@charset "UTF-8";

/* ========================================
   header.css
   共通ヘッダーのスタイル
   - 既定（〜）= PC 横並びナビ
   - @media (max-width: 1160px) = ドロワー（ハンバーガー）
   ※ 切替幅 1160px は base.css の --bp-drawer と一致させること
     （header.js も --bp-drawer を参照してリサイズ判定に使う）
   ※ ヘッダー高さ / ドロワーの重なり量は base.css の
     --header-height / --header-height-sp / --drawer-overlap で管理
======================================== */

.l-header {
  position: sticky;                /* スクロール時も上部に追従（PC / SP 共通）*/
  top: 0;
  z-index: 1500;                   /* ページ本文より前面。ドロワー/オーバーレイは本要素の内側で重なる */
  background-color: #fff;          /* ヘッダー背景を真っ白に */
}

.l-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--header-height);
  padding: 0 32px;
}

/* ---- ロゴ ---- */
.l-header-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.l-header-logo img {
  display: block;
  width: auto;
  height: 43px;                    /* ★2026-08-20 60→43px（ヘッダー72pxの60%） */
}

/* ---- グローバルナビ ---- */
.l-header-nav {
  display: flex;
  flex-shrink: 0;    /* ロゴ/ENTRY に押されてもナビは縮めない */
  /* ロゴとの間の余白。切替点付近で ENTRY が見切れないよう vw を抑えめに。 */
  margin-left: clamp(24px, 5vw, 120px);
}

.l-header-nav-list {
  display: flex;
  align-items: center;
  /* li 同士の間隔。切替点付近で収まるよう vw を抑えめに。 */
  gap: clamp(14px, 2.4vw, 48px);
}

.l-header-nav-item {
  flex-shrink: 0;          /* 各項目を縮めない（縦積み・潰れ防止）*/
  white-space: nowrap;     /* テキストは常に 1 行固定 */
}

/* ★2026-08-05 見出しは <button>（リンクではなく開閉専用）。
   ブラウザ既定の枠・背景・余白・フォントを打ち消し、従来の見た目を保つ */
.l-header-nav-link {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 2.04rem;            /* 1.7rem × 1.2 */
  font-weight: 900;              /* 700 → 900（最大）*/
  color: #1a1a1a;
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: inherit;
  -webkit-text-stroke: 0.5px currentColor; /* さらに視覚的に太く */
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.l-header-nav-link:hover {
  opacity: 0.6;
}

/* ★2026-08-17 D-1: 現在地の印（跡田さん選択＝案②「文字を赤に」）。
   PCは個別ページ名がドロップダウンの中に隠れていて普段見えないため、
   カテゴリ側（会社を知る等）に印を付ける。判定は parts/head.php の nav_current_cat()。
   ホバーは opacity(薄くなる)なので、色の変化とは見分けが付く。
   -webkit-text-stroke も同じ赤にしないと、黒の縁が残って濁って見える */
.l-header-nav-item.is-current > .l-header-nav-link {
  color: #E7352B;
  -webkit-text-stroke: 0.5px #E7352B;
}

/* ★2026-08-03 Figma公式 Component/Header Desktop(54:33697)準拠のホバードロップダウン。
   ▼/▶アイコンは公式の「黄丸+赤三角」をSVGデータURIで再現 */
.l-header-nav-caret {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-left: 7px;
  vertical-align: -4px;
  /* ★2026-08-03 支給画像(btn.png=黒縁リング付き黄丸+赤▼)に差し替え。旧SVG描画は縁なしだった */
  background: url("../../images/common/nav-caret.webp") no-repeat center / contain;
}
.l-header-nav-item {
  position: relative;
}
/* 項目とカードの間のホバー橋(隙間でホバーが途切れないように) */
.l-header-nav-item.is-open::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 30px;
}
.l-header-nav-sub {
  position: absolute;
  top: calc(100% + 26px);
  left: -18px;
  margin: 0;
  padding: 24px 30px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #fff;
  border: 2px solid #212121;
  border-radius: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1600;
}
.l-header-nav-sub--right {
  left: auto;
  right: -18px;
}
/* .is-open = クリック/タップで開いた状態（header.js が付与） */
.l-header-nav-item:focus-within .l-header-nav-sub,
.l-header-nav-item.is-open .l-header-nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ★2026-08-05 ホバーで開く指定は「マウスが使える環境」に限定する。
   タッチ端末はタップ後もホバー状態が残る（iOS Safari の既知の挙動）ため、
   無条件に :hover を効かせると同じ見出しを再タップしても閉じられなくなる。
   この指定により、指で操作する端末では .is-open だけで開閉が完結する */
@media (hover: hover) and (pointer: fine) {
  .l-header-nav-item:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 30px;
  }
  .l-header-nav-item:hover .l-header-nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.l-header-nav-sub-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.7rem;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.l-header-nav-sub-link:hover {
  opacity: 0.6;
}
.l-header-nav-sub-link::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* ★2026-08-03 支給の▼ボタン(黒縁リング付き)と揃えて黒縁リングを追加 */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11.2" fill="%23FCD064" stroke="%23212121" stroke-width="1.6"/><path d="M9 6.5L17.5 12L9 17.5Z" fill="%23E7352B"/></svg>') no-repeat center / contain;
}

/* ---- ENTRYボタン ---- */
.l-header-entry {
  display: block;
  flex-shrink: 0;
  /* ナビ最終項目との間隔は確保しつつ、余白は auto で右端へ寄せる。
     inner の右 padding(32px) ぶん画面端から余裕を持って収まる。 */
  margin-left: auto;
  padding-left: clamp(24px, 3vw, 48px); /* 「採用情報」との最小間隔 */
  line-height: 0;
  transition: opacity 0.2s ease;
}

.l-header-entry:hover {
  opacity: 0.85;
}

.l-header-entry img {
  display: block;
  width: auto;
  height: 43px;                    /* ★2026-08-20 60→43px（ロゴと同寸） */
}

/* ---- ハンバーガーボタン（PC では非表示） ---- */
.l-header-burger {
  display: none;                /* PC では非表示 */
}

/* ---- ドロワー本体 / ドロワー用 ENTRY / オーバーレイ（PC では非表示） ---- */
.l-header-drawer,
.l-header-drawer-entry,
.l-header-overlay {
  display: none;
}

/* SP 専用（ENTRY 重複表示の制御）*/
.l-header-nav-item--entry {
  display: none;                /* PC では nav 内の ENTRY は隠す（右側の ENTRY 画像を使用）*/
}

/* ========================================
   SP / タブレット（1160px 以下）
   PC 用の横並びナビは、次のすべてに余裕がある幅（1160px 超）まで:
   - ENTRY ボタンが画面端から余裕を持って収まる
   - ロゴ「北九州日産モーター」と「人を知る」の間に十分な余白
   - li 同士の間隔は clamp で 60→18px まで詰めた状態
   これらが窮屈になる前に、ドロワー（ハンバーガー）へ切り替える。
   ※ gap / ロゴ間余白を従来の 5分の3 まで詰めたぶん、切替幅を
     1180px → 1120px まで下げていたが、これは下げ過ぎだった。
   ★2026-08-17 E-2案A: 1120px → 1160px に戻す（跡田さん選択）。
     1120pxでは切替直後の 1121〜1159px で ENTRY ボタンが画面外へ出て
     横スクロールが発生していた（1121pxで32px・1152pxで6pxのはみ出しを実測）。
     ENTRY 込みでPCナビが収まる最小幅は実測1160px。
     base.css の --bp-drawer と必ず同じ値にすること（header.js はそちらを読む）
======================================== */
@media screen and (max-width: 1160px) {
  /* .l-header の position: sticky / z-index は base 側の宣言を踏襲（SP でも追従）*/

  .l-header-inner {
    height: var(--header-height-sp);    /* PC 72px → SP 68px(Figma公式実測) */
    padding: 0 16px;
  }

  /* ロゴサイズ。★2026-08-03 Figma公式(54:34196)実測に統一: 旧height40px(幅164)→幅145px。
     これを含む各要素の縮小で、320px幅のMENUはみ出し(要素過大が真因)も解消 */
  .l-header-logo img {
    width: 145px;
    height: auto;
  }

  /* PC 用 ENTRY 画像 / PC 横並びナビは SP では非表示 */
  .l-header-entry,
  .l-header-nav {
    display: none;
  }

  /* ヘッダー右側の ENTRY ボタン（開閉に関わらず常時表示）*/
  .l-header-drawer-entry {
    display: block;
    flex-shrink: 0;
    margin-left: auto;                  /* ロゴから右へ寄せ、ハンバーガーの左隣に */
    line-height: 0;
    z-index: 1600;
    position: relative;
    transition: opacity 0.2s ease;
  }

  .l-header-drawer-entry:hover {
    opacity: 0.85;
  }

  .l-header-drawer-entry img {
    display: block;
    width: auto;
    height: 31px;                       /* ★2026-08-03 Figma公式実測(約96×31)に統一。旧38px */
  }

  /* ---- ハンバーガー / CLOSE ボタン（MENU・CLOSE ラベル付き）---- */
  /* ★2026-08-03 MENUボタンをFigma公式実測(約38×44)に統一。旧44×48・バー28px */
  .l-header-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: 12px;                  /* ENTRY ボタンの右隣 */
    width: 38px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1600;
    position: relative;
  }

  .l-header-burger-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 24px;
    height: 19px;
  }

  .l-header-burger-bar {
    display: block;
    width: 24px;
    height: 2.5px;
    background-color: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .l-header-burger-label {
    margin-top: 2px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1a1a1a;
    line-height: 1;
  }

  .l-header-burger-label--close {
    display: none;                      /* 通常は MENU を表示 */
  }

  /* 開いている時：3 本線を × に変形し、ラベルを CLOSE に切り替え
     ★2026-08-03 バー縮小(gap5+bar2.5)に合わせ移動量 9→7.5px */
  .l-header-burger.is-open .l-header-burger-box {
    height: 19px;
  }
  .l-header-burger.is-open .l-header-burger-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .l-header-burger.is-open .l-header-burger-bar:nth-child(2) {
    opacity: 0;
  }
  .l-header-burger.is-open .l-header-burger-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }
  .l-header-burger.is-open .l-header-burger-label--menu {
    display: none;
  }
  .l-header-burger.is-open .l-header-burger-label--close {
    display: block;
  }

  /* ================================
     ドロワー本体（XD: カテゴリ別カードメニュー）
     - 固定幅 400px（スマホ / 640px どちらでも同じ）
     - 画面に余裕がある時は右寄せ、右からスライドイン
     - 画面幅 ≒ メニュー幅の時は中央寄せ、上からスライドイン（後段クエリ）
  ================================ */
  .l-header-drawer {
    display: block;
    position: fixed;
    /* ヘッダー下端に --drawer-overlap(2px) 重ねて、ヘッダーと緑 Hero の境界に出る
       1px の緑線を隠す（白パネルがヘッダーとフラットに繋がる）*/
    top: calc(var(--header-height-sp) - var(--drawer-overlap));
    right: 0;
    width: 400px;                       /* 固定幅 */
    max-width: 100%;
    height: calc(100% - (var(--header-height-sp) - var(--drawer-overlap)));
    padding: 22px 18px 40px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 白背景をメニューごとスライドさせる。メニュー幅 + padding の余白分が
       白いパネルとして画面を覆う（ヘッダー下〜画面下端）*/
    background-color: #fff;
    box-shadow: -6px 0 20px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);        /* 右からスライド（既定）*/
    /* ★2026-08-03 閉じる時にスライドが見えなかった不具合の修正（跡田さん指摘）。
       visibility を遷移対象に入れていなかったため、is-open を外した瞬間に
       hidden になり、右へ戻るアニメーションが見えないまま消えていた。
       閉じる時は 0.32s 待ってから隠し（下記 delay）、開く時は即座に表示する
       （.is-open 側で delay 0s に上書き）。オーバーレイと同じ手法。 */
    transition: transform 0.32s ease, visibility 0s linear 0.32s;
    z-index: 1550;
    visibility: hidden;
  }

  .l-header-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.32s ease, visibility 0s linear 0s;
  }

  .l-header-menu {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  /* ---- カテゴリカード ---- */
  .l-header-menu-card {
    background-color: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  }

  /* 赤い見出しバー */
  .l-header-menu-title {
    margin: 0;
    padding: 12px 18px;
    background-color: #e7352b;          /* 赤 */
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* リンクリスト */
  .l-header-menu-list {
    list-style: none;
    margin: 0;
    padding: 14px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* 環境を知る：2 列レイアウト */
  .l-header-menu-list--2col {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 12px;
  }
  .l-header-menu-list--2col > li {
    width: calc(50% - 7px);
  }
  .l-header-menu-list--2col > .l-header-menu-item--full {
    width: 100%;
  }

  /* 各リンク（赤丸▶ アイコン付き）*/
  .l-header-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.4rem;
    font-weight: 500;
    color: #1a1a1a;
    text-decoration: none;
    line-height: 1.4;
    transition: opacity 0.2s ease;
  }

  .l-header-menu-link:hover {
    opacity: 0.6;
  }

  /* ★2026-08-17 D-1: ドロワーは個別ページ名が常に見えているので、そちらに印を付ける */
  .l-header-menu-link.is-current {
    color: #E7352B;
  }

  /* 赤丸▶アイコン。★2026-08-02 Figma公式(54:35213)準拠: 支給画像(footer-button.png)に変更。
     旧CSS描画は▶(::after)が負マージンで文字末尾側にずれ、ベタ赤丸に見えていた */
  .l-header-menu-link::before {
    content: "";
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    background: url("../../images/common/footer-button.webp") no-repeat center / contain;
  }

  /* 背景オーバーレイ：ドロワー展開時に背面（本文エリア）を覆う。
     ヘッダーは暗転させないため top はヘッダー下から開始。
     ドロワーと同じ位置にして、境界の緑線を隠す。 */
  .l-header-overlay {
    display: block;
    position: fixed;
    top: calc(var(--header-height-sp) - var(--drawer-overlap)); /* ヘッダーは覆わない（暗転させない）*/
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 1540;
  }

  .l-header-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }
}

/* ========================================
   ★2026-08-03 スライド方向を全幅で「右から左」に統一（跡田さん依頼）。
   従来はメニュー幅(400px)に対して左右の余白が取れない 440px 以下だけ
   中央寄せ＋上からのスライドに切り替えていたため、多くのスマホ（375〜430px）で
   上から降りてくる動きになっていた。
   画面が狭い時はメニューが画面幅いっぱいになる（= 右端に接する）ので、
   中央寄せをやめても収まりは崩れない。
======================================== */

/* ★2026-08-03 極狭幅(〜360px): 公式比率を保ったままわずかに縮小し、320pxでも収める */
@media (max-width: 360px) {
  .l-header-logo img { width: 138px; }
  .l-header-drawer-entry img { height: 29px; }
}