/* ==========================================================================
   SiteHeader — design/SiteHeader.dc.html
   TOP 以外の12ページで使用。TOP はスクロール連動のため別実装（top.css）。
   ========================================================================== */

.hd { position: relative; background: var(--c-navy); font-family: var(--f-body); }

/* 斜めのアクセントラインは css/components.css の .accents を使う */

/* --- ナビ行 -------------------------------------------------------------- */
.hd__spacer { display: none; }

.hd__bar {
  position: relative;
  height: var(--h-header-pc);
  padding: 0 clamp(32px, 5vw, 100px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
}

.hd__logo img { height: clamp(28px, 6vw, 44px); width: auto; }

.hd__nav { display: flex; align-items: center; gap: 36px; }

.hd__link {
  color: var(--c-offwhite);
  font-size: 15px;
  font-weight: 500;
}
.hd__link:hover { color: var(--c-offwhite); opacity: .75; }
/* 現在地のみ太字 + 赤下線 */
.hd__link.is-active {
  font-weight: 700;
  border-bottom: 2px solid var(--c-red);
  padding-bottom: 4px;
}

.hd__cta {
  background: var(--c-red);
  color: var(--c-offwhite);
  font-size: 14px;
  font-weight: 700;
  padding: 13px 26px;
  /* ホバーで赤とオフホワイトを入れ替える。
     ヘッダーが紺なので紺にすると箱が背景と同色（コントラスト1.00:1）になり
     ボタンの形が消えてしまうため、明るい側へ反転させる。
     ドロップダウンの項目（.hd__menu-link）と同じ「反転」の考え方。 */
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.hd__cta:hover { background: var(--c-offwhite); color: var(--c-navy); }

/* --- メンバーのドロップダウン --------------------------------------------- */
.hd__member { position: relative; }

/* 「メンバー」はリンクではなくボタン。見た目はナビの他項目と揃える */
.hd__member-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}
/* 現在地のときだけ下線が付くので、その分の余白を戻す */
.hd__member-trigger.is-active { padding-bottom: 4px; }

.hd__caret { font-size: 9px; opacity: .7; }

.hd__menu {
  position: absolute;
  top: 100%;
  left: -14px;
  /* トリガーとパネルの隙間を透明な当たり判定で埋める。gap を使うとホバーが切れる */
  padding-top: 14px;
  min-width: 170px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 60;
}
/* ホバー・フォーカス・クリックのいずれでも開く（キーボード操作への対応） */
.hd__member:hover .hd__menu,
.hd__member:focus-within .hd__menu,
.hd__member.is-open .hd__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hd__menu-panel { background: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); padding: 6px 0; }
.hd__menu-link {
  display: block;
  font-size: 14px;
  color: var(--c-navy);
  padding: 11px 20px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.hd__menu-link:hover { background: var(--c-navy); color: var(--c-offwhite); }

/* --- ハンバーガー -------------------------------------------------------- */
.hd__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hd__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--c-offwhite);
}
.hd__burger span:nth-child(1) { transition: transform .25s ease, opacity .2s ease; }
.hd__burger span:nth-child(2) { transition: opacity .2s ease; }
.hd__burger span:nth-child(3) { transition: transform .25s ease; }
/* 開いたとき×印に変形 */
.hd__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px)  rotate(45deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- モバイルメニュー（全画面オーバーレイ） -------------------------------- */
.hd__mobile { display: none; }

.hd__mobile-link {
  color: var(--c-offwhite);
  font-size: 16px;
  font-weight: 600;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  min-height: 45px;               /* タップ領域の確保 */
}
.hd__mobile-link:hover { color: var(--c-offwhite); }

/* リンクではない見出し（「メンバー」） */
.hd__mobile-heading { cursor: default; }

.hd__mobile-sub {
  color: rgba(242, 243, 243, .72);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 0 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  min-height: 45px;
}
.hd__mobile-sub:hover { color: rgba(242, 243, 243, .72); }

.hd__mobile-cta {
  display: block;
  text-align: center;
  background: var(--c-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 16px;
  margin-top: 16px;
}
.hd__mobile-cta {
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.hd__mobile-cta:hover { background: var(--c-offwhite); color: var(--c-navy); }

/* --- ヘッダー帯（下層ページのパンくず + ページタイトル） -------------------- */
.hd__band {
  position: relative;
  z-index: 2;
  padding: clamp(40px, 6vw, 64px) clamp(20px, 5vw, 100px) clamp(48px, 8vw, 96px);
}
.hd__crumb { font-size: 13px; color: rgba(242, 243, 243, .55); margin-bottom: 24px; }
.hd__crumb a { color: inherit; }
.hd__crumb a:hover { color: var(--c-offwhite); }
.hd__crumb-sep { margin: 0 8px; }

.hd__label {
  font-family: var(--f-en);
  font-weight: 800;
  font-style: italic;
  font-size: 14px;
  letter-spacing: var(--ls-kicker);
  color: var(--c-offwhite);
  opacity: .7;
}
.hd__title {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: var(--fs-page-title);
  color: var(--c-offwhite);
  margin: 12px 0 0;
  letter-spacing: var(--ls-en);
}
/* 役職・キャッチはヘッダー帯に出せるが、メンバーページは navOnly（帯なし）の
   ため現在どのページも使っていない。03_components.md の仕様として残している。 */
.hd__role {
  font-size: 14px;
  font-weight: 600;
  color: rgba(242, 243, 243, .62);
  letter-spacing: .04em;
  margin-top: 14px;
}
.hd__tagline {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: clamp(18px, 2.8vw, 28px);
  line-height: 1.6;
  color: var(--c-offwhite);
  margin-top: 16px;
  max-width: 22em;
}

/* ==========================================================================
   SP（768px 以下）
   ========================================================================== */
@media (max-width: 768px) {
  .hd__spacer { display: block; height: var(--h-header-sp); }

  .hd__bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: var(--c-navy);
    box-shadow: var(--shadow-header-sp);
    height: var(--h-header-sp);
    padding: 0 20px;
  }

  .hd__nav { display: none; }
  .hd__burger { display: flex; }

  .hd__mobile {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--h-header-sp);
    left: 0; right: 0; bottom: 0;
    background: var(--c-navy);
    padding: 8px 20px 32px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 90;
    /* 既定は閉じている。開くと .is-open が付く */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
  .hd__mobile.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   TOP専用ヘッダー — design/TOP.dc.html
   ヒーロー上に透明で重なり、ABOUTセクションに達したら紺に切り替わる。
   ========================================================================== */
.hd--top { background: transparent; }

.hd--top .hd__bar {
  position: sticky;
  top: 0;
  height: 96px;
  padding: 0 clamp(32px, 5vw, 100px);
  background: transparent;
  box-shadow: none;
  transition: background .3s ease, box-shadow .3s ease;
  z-index: 50;
}
/* スクロールでヘッダー下端に ABOUT セクションが達したら紺に */
.hd--top .hd__bar.is-past { background: var(--c-navy); box-shadow: var(--shadow-header-sp); }

.hd--top .hd__spacer { display: none; }

@media (max-width: 768px) {
  .hd--top .hd__bar { height: var(--h-header-sp); padding: 0 20px; }
  /* SPでメニューを開いている間も紺にする */
  .hd--top .hd__bar.is-menu-open { background: var(--c-navy); }
  .hd--top .hd__spacer { display: none; }
  .hd--top .hd__mobile { z-index: 40; }
}