/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* --- Header --- */
.header {
  width: 100%;
  position: relative;
  z-index: 50;
}

.header-container {
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* モバイルはwrap対応 */
  border-bottom: 5px solid #f7f7f7;
}

@media (min-width: 640px) {
  .header-container {
    flex-wrap: nowrap; /* PC以上はwrap解除 */
  }
}

/* --- Logo --- */
.header-logo img {
  display: block;
  max-width: 250px;
  width: 100%;
  height: auto;
  min-height: 40px;
}

/* --- Menu Toggle (Mobile) --- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  cursor: pointer;
  color: #6b7280;
}

.menu-toggle:hover { background-color: #f3f4f6; }
.menu-toggle:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px #e5e7eb; }

@media(min-width: 768px) { .menu-toggle { display: none; } }

/* --- Navigation Menu --- */
.nav-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 3rem;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.5rem;
  z-index: 50;
  background-color: #fff; 
}

.nav-menu.active { display: flex; }

@media(min-width: 640px) {
  .nav-menu {
    position: static;
    display: flex !important;
    flex-direction: row;
    gap: 1rem;
    align-items: center;       
    justify-content: flex-end; 
    flex-wrap: nowrap;         
  }
}
/* --- Navigation List & Items --- */
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media(min-width: 640px) {
  .nav-list {
    flex-direction: row;
    gap: 1rem;
    align-items: center; /* 横並びでも中央揃え */
  }
}

.nav-item { position: relative; }

.nav-item > a {
  display: flex;
  align-items: center;   /* 垂直中央揃え */
  gap: 0.25rem;
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1rem;
  color: #4461b1;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;  /* 改行防止 */
}
/* ヘッダーナビゲーション全リンクのスタイル */
.nav-item > a,
.nav-item > a:visited,
.nav-item > a:hover,
.nav-item > a:link,
.nav-item > a:active,
.nav-item .submenu a,
.nav-item .submenu a:visited,
.nav-item .submenu a:hover,
.nav-item .submenu a:link,
.nav-item .submenu a:active {
    color: #4461b1; /* メニュー色 */
    text-decoration: none; /* 必要なら */
}


/* アイコン付きリンク */
.nav-item > a img { width: 31px; height: 31px; }

/* --- Submenu --- */
.submenu {
  display: none;
  position: absolute;
  top: 3rem;
  left: 0;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  width: auto;          /* 幅を狭く */
  padding: 0;
  margin: 0;
  list-style: none;      /* マーカーを消す */
  z-index: 50;
}

.nav-item:hover .submenu { display: flex; }

.submenu a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #000;
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap; /* 改行防止 */
  text-align: left;    /* 左寄せ */
}

/* Hover background for submenu */
.submenu a:hover { background-color: #f3f4f6; }





/* 上層リンクをクリック無効化 */
.disabled-link {
  pointer-events: none; /* クリック無効 */
  cursor: default;      /* 見た目のカーソルも通常に */
}

/* サブメニューはホバーで表示 */
.nav-item .submenu {
  display: none;       /* デフォルト非表示 */
  position: absolute;  /* 必要に応じて配置 */
}

.nav-item:hover .submenu {
  display: block;      /* ホバーで表示 */
}
@media (max-width: 640px) {
 

  .nav-item > a {
    padding-right: 3.5rem;
  }
  nav-item .submenu {
    position: static;
  }



}
/* 外側のボタン枠 */
.member-page-btn {
  width: 70px;              /* ボタン全体の幅 */
  height: 70px;             /* ボタン全体の高さ */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ボタン本体（クリック範囲） */
.login-icon {
  display: flex;
  flex-direction: column;    /* アイコン→テキストを縦に並べる */
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: #333;    /* 背景色（変更OK） */
  border-radius: 12px;       /* 角を丸く */
  text-decoration: none;     /* 下線を消す */
  overflow: hidden;          /* 文字がはみ出ないように */
}

/* アイコン領域 */
.icon-container {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SVGアイコンを白く */

.login-icon svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
}

@media(min-width: 640px) { .login-icon { display: flex;} }

/* テキスト部分 */
.label {
  margin-top: 4px;           /* アイコンとの隙間 */
  font-size: 12px;            /* 小さめフォント */
  line-height: 1.2;
  font-weight: bold;
  color: white;              /* 白文字 */
  text-align: center;
  white-space: nowrap;       /* 改行禁止 */
}