/* =====================================================================
   header.css — 共通ヘッダー（PC GlobalMenu / SP ハンバーガー＋ドロワー）
   ブレークポイント:
     >=1150px            … PCヘッダー（レイアウト変更なし最小）
     1024px–1149px       … モバイルヘッダーへ切替
     600px–1023px        … タブレット（1023基準で縮小）
     <600px              … モバイル
   ===================================================================== */

/* アンカーリンクのスクロール位置補正用（stickyヘッダーの実高）。
   ※ --header-h は header.js が「SPバーの高さ」としてhtmlのインラインstyleに設定する
   別用途の変数（PCでは0pxになる）ため、混同しないよう専用変数を用意する */
:root { --sticky-offset: 70px; }

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--container-white);
  transition: transform .3s ease;
}
/* SP/タブレット（<=1149px）: 下スクロールで隠す / 上スクロールで表示。
   header.js が方向を検知して .is-hidden を付与（フロートCTAと同仕様） */
@media (max-width: 1149px) {
  .l-header.is-hidden { transform: translateY(-100%); }
}

/* 既定（=モバイル/タブレット）: SPバー表示・PC非表示 */
.l-header__pc { display: none; }
.l-header__sp { display: flex; }

/* =========================================================
   SPヘッダーバー（<=1149px）
   ========================================================= */
.l-header__sp {
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  height: 70px;   /* 余白込みの総高（box-sizing: border-box） */
  padding: var(--space-12) var(--space-24);
}
.l-header__logo img { height: 28px; width: auto; }

/* ハンバーガーボタン（バー3本＋MENU） */
.l-header__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px;
}
.l-header__bars {
  position: relative;
  width: 32px;
  height: 24px;
}
.l-header__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: var(--radius-8);
  background: var(--color-primary);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.l-header__bars span:nth-child(1) { top: 2px; }
.l-header__bars span:nth-child(2) { top: 11px; }
.l-header__bars span:nth-child(3) { top: 20px; }
.l-header__menulabel {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  color: var(--color-primary);
  line-height: 1;
}
/* 開いた状態 → ×に変形 */
.l-header__toggle[aria-expanded="true"] .l-header__bars span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.l-header__toggle[aria-expanded="true"] .l-header__bars span:nth-child(2) { opacity: 0; }
.l-header__toggle[aria-expanded="true"] .l-header__bars span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* =========================================================
   SPドロワー
   ========================================================= */
.l-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  background: var(--container-alfa); /* オーバーレイ */
}
.l-drawer.is-open { display: block; }
.l-drawer__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  padding: calc(var(--header-h, 61px) + var(--space-8)) var(--space-24) var(--space-48);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--container-white);
}

/* ナビグループ */
.l-nav-group { border-bottom: 1px solid var(--border-light); }
.l-nav-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-8);
  padding: var(--space-24) var(--space-8);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-default);
  text-align: left;
}
.l-nav-group__chevron {
  flex: none;
  width: 16px; height: 16px;
  color: var(--text-secondary);
  transition: transform .25s ease;
}
.l-nav-group__head[aria-expanded="true"] .l-nav-group__chevron { transform: rotate(180deg); }
.l-nav-group__head--link .l-nav-group__chevron { transform: rotate(-90deg); } /* リンク型は右向き */

/* サブリンク（アコーディオン本体） */
.l-nav-group__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-16); /* 行間はリンクの上下padding(8+8=16)で作る／列間のみ16 */
  padding: 0 var(--space-8); /* 左右8px */
  overflow: hidden;
}
.l-nav-group__sub a {
  display: block;
  padding: var(--space-8) 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-default);
}
.l-nav-group__sub a:hover { color: var(--text-primary); }

/* 折りたたみ式（特長/ラインナップ/声）: 既定で閉じる・1カラム */
.l-nav-group__head[data-accordion] + .l-nav-group__sub {
  grid-template-columns: 1fr;
  max-height: 0;
  transition: max-height .3s ease;
}
.l-nav-group__head[data-accordion][aria-expanded="true"] + .l-nav-group__sub {
  max-height: 600px;
  padding-bottom: var(--space-16);
}
/* 折りたたみ式カテゴリ: TOP（先頭リンク）以外は左に16pxインデント */
.l-nav-group__head[data-accordion] + .l-nav-group__sub > a:not(:first-child) {
  padding-left: var(--space-16);
}
/* --flat: 親子関係のない同列リンク（例：手数料の都県別）はインデントなし */
.l-nav-group__head[data-accordion] + .l-nav-group__sub--flat > a:not(:first-child) {
  padding-left: 0;
}

/* ドロワーCTA */
.l-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-top: var(--space-32);
}
/* 「加入済の方はこちら」だけ他CTAと間隔を空ける（gap16px と合算して見た目32px） */
.l-drawer__cta .c-btn--outline { margin-top: var(--space-16); }

/* =========================================================
   PCヘッダー（>=1150px）
   ========================================================= */
@media (min-width: 1150px) {
  :root { --sticky-offset: 184px; }   /* PCヘッダーの実高 */
  .l-header__sp { display: none; }
  .l-drawer { display: none !important; }
  .l-header__pc { display: block; }

  .l-header__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--space-48) var(--space-16) var(--space-24) var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  /* 上段: ロゴ＋加入済ボタン / サブメニュー */
  .l-header__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding-inline: var(--space-16);
  }
  .l-header__brand {
    display: flex;
    align-items: flex-end;
    gap: var(--space-24);
  }
  .l-header__brand .l-header__logo img { height: 32px; width: auto; }

  .l-header__sub {
    display: flex;
    align-items: center;
    gap: var(--space-8);
  }
  .l-header__sub a {
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-8);
    font-size: 12px;
    line-height: 18px;
    letter-spacing: .04em;
    color: var(--text-default);
  }
  .l-header__sub a:hover { background: var(--container-highlight); }

  /* 下段: メインナビ / CTA */
  .l-header__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
  }
  .l-header__nav {
    display: flex;
    align-items: center;
  }
  .l-header__nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 60px;
    padding-inline: var(--space-16);
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--text-default);
    white-space: nowrap;
  }
  /* ホバー/カレント = 緑の下線 */
  .l-header__nav a::after {
    content: "";
    position: absolute;
    left: var(--space-16); right: var(--space-16);
    bottom: 12px;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    transform: scaleX(0);
    transition: transform .2s ease;
  }
  .l-header__nav a:hover::after,
  .l-header__nav a[aria-current="page"]::after { transform: scaleX(1); }

  .l-header__cta {
    display: flex;
    align-items: center;
    gap: var(--space-16);
  }
}

/* 1200px未満のPC表示では左右パディングを詰める（1150最小対応） */
@media (min-width: 1150px) and (max-width: 1239px) {
  .l-header__inner { padding-inline: var(--space-16); }
}

/* =========================================================
   PCメガドロップダウン（>=1150px）
   参考モーション: nobel.co.jp PC黒ナビ（ドロップ＋フェード）
   ========================================================= */
@media (min-width: 1150px) {
  .l-header__pc { position: relative; }

  .l-header__nav a[data-dropdown] { cursor: pointer; }

  .l-megamenu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 80;
    /* ヘッダーから10px離す（三角ポインタの先端で10px・上 padding = gap10 + 三角12） */
    padding: 22px var(--space-16) var(--space-24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), visibility .28s ease;
  }
  .l-megamenu[hidden] { display: block; } /* 属性hiddenを上書きしトランジションを有効化 */
  .l-megamenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* 全幅パネルの左右余白は当たり判定にしない（そこにポインタを置いても閉じるよう）。
       ホバー対象は下の .l-megamenu__card（見えているボックス）のみに限定する。 */
    pointer-events: none;
  }

  .l-megamenu__card {
    position: relative;
    pointer-events: auto;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-40) var(--space-64);
    background: var(--container-white);
    border-radius: var(--radius-40);
    box-shadow: 0 0 8px rgba(0, 0, 0, .08), 0 12px 28px rgba(0, 0, 0, .06);
  }

  /* 上部の吹き出し三角（JSがナビ項目位置に合わせて --mm-arrow を設定） */
  .l-megamenu__pointer {
    position: absolute;
    top: -12px;
    left: var(--mm-arrow, 120px);
    width: 28px; height: 12px;
    transform: translateX(-50%);
    background: var(--container-white);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .08));
  }

  .l-megamenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
  }
  .l-megamenu__title {
    font-size: 28px;
    line-height: 40px;
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--text-default);
  }
  /* 「〜トップ」ピル内の右シェブロン */
  .c-btn__chev {
    width: 7px; height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin-left: 2px;
  }

  /* 画像カード行 */
  .l-megamenu__cards { display: flex; gap: var(--space-40); }
  .l-mmcard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    width: 238px;
  }
  .l-mmcard__img {
    display: block;
    width: 238px; height: 150px;
    border-radius: var(--radius-24);
    background: var(--container-level1); /* 画像プレースホルダ（未差し替えカードの地） */
    object-fit: cover;                   /* 画像は238×150にトリミング */
  }
  /* ホバー時：画像の上に透明度30%の白を重ねる */
  .l-mmcard::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 238px; height: 150px;
    border-radius: var(--radius-24);
    background: #fff;
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
  }
  .l-mmcard:hover::before { opacity: .3; }
  .l-mmcard__label {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-inline: var(--space-4);
    font-size: 16px;
    line-height: 24px;
    font-weight: var(--fw-bold);
    color: var(--text-default);
    white-space: nowrap; /* ラベルは1行（折り返さない） */
  }
  /* ホバー時：テキスト #25221e／アイコン #734D00 に変更 */
  .l-mmcard:hover .l-mmcard__label { color: #25221e; }
  .l-mmcard:hover .l-mmcard__arrow { background: #734D00; }

  /* 丸い茶色の右矢印アイコン */
  .l-mmcard__arrow {
    position: relative;
    flex: none;
    width: 24px; height: 24px;
    border-radius: var(--radius-full);
    background: var(--text-secondary); /* #734d00 */
  }
  .l-mmcard__arrow::after {
    content: "";
    position: absolute;
    top: 50%; left: 45%;
    width: 5px; height: 5px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* サブリンク行（ラインナップ） */
  .l-megamenu__sublinks { display: flex; gap: var(--space-40); }
  .l-mmsub {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    padding-bottom: var(--space-8);
    font-size: 16px;
    font-weight: var(--fw-bold);
    color: var(--text-default);
    border-bottom: 1px solid #C3B4A0;
  }
  /* ホバー：写真カード（l-mmcard）と同じ色変更（テキスト #25221e／アイコン #734D00） */
  .l-mmsub:hover { color: #25221e; }
  .l-mmsub:hover .l-mmcard__arrow { background: #734D00; }
}