/* ==========================================================================
   site-header.css
   ========================================================================== */

/* fixed ではなく sticky。
   fixed だとデモ帯（通常フローの要素）の下に潜り込み、
   本文側にも header 分の padding を持たせる必要が出て二重管理になる。
   sticky ならフローに参加したままスクロール時だけ上端に貼り付く。 */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  height: var(--header-height-sm);
  background-color: var(--white);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
}

/* ロゴ。デモ期間中は仮素材のテキストロゴ */
.site-header__logo {
  /* ロゴは画像なので下線は付けない。濃度だけ動かす */
  transition: opacity var(--duration-base) var(--ease-out);

  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--navy-800);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-decoration: none;
}

.site-header__nav {
  display: none;
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/*
  ナビと電話番号の hover。
  下線が左から伸びる。ボタンの塗りと同じ「左から右へ」の動きで、
  ヒーローのワイプまで含めてページ全体の所作を揃えている。

  ★線の色は currentColor。
    案B の透明ヘッダーは最初が白文字・スクロール後が黒文字、
    案C の浮かせたヘッダーは gray-900 と、状態によって文字色が変わる。
    currentColor にしておけば、どの状態でも文字と同じ色の線が出る。

  ★a を inline-block にしている。
    インラインのままだと ::after の絶対配置の基準が安定しない。
    幅は中身なりなので、ヘッダーの高さや配置は変わらない（実測で確認済み）。
*/
.site-header__nav-link {
  position: relative;
  display: inline-block;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-header__nav-link::after,
.site-header__tel::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -5px;
  height: var(--border-width-thick);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.site-header__nav-link:hover::after,
.site-header__nav-link:focus-visible::after,
.site-header__tel:hover::after,
.site-header__tel:focus-visible::after {
  transform: scaleX(1);
}

.site-header__nav-link:hover {
  color: var(--navy-800);
}

/* --------------------------------------------------------------------------
   現在地（2026-09-16 三嶋指示「いまどのページを見ているか分からない」）
   --------------------------------------------------------------------------
   ★★**hover と同じ ::after をそのまま出す。** 新しい装飾は作らない。
     上の ::after（2px・currentColor・下 -5px）を scaleX(1) にするだけなので、
     «hover したときの見た目» と «現在地» が同じ線で表される。

   ★判定は PHP 側（glcl_nav_is_current()）で、印は **aria-current="page" 属性**。
     クラスを足していない。属性セレクタで拾うことで
     «見た目が出ている ＝ 支援技術にも現在地が伝わっている» を必ず一致させる。
     クラスだけの実装だと、見た目は出ているのに読み上げでは分からない状態を作れてしまう。

   ★★**アニメーションさせない。** hover は scaleX(0)→(1) の 0.25 秒だが、
     現在地は最初から引かれていてほしい。ページを開いた瞬間に線が伸びると
     «たったいまホバーした» ように見える。transition を none で打ち消す。

   ★色は hover と違い currentColor のまま（navy-800 にしない）。
     ★理由：写真・紺ベタのヒーロー（$header_overlay = true）では
       透明ヘッダーの文字が白になる。ここで navy-800 を指定すると
       紺地の上に紺の線を引くことになり、現在地が見えなくなる。
       currentColor なら白文字のときは白い線になる。
   -------------------------------------------------------------------------- */
.site-header__nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transition: none;
}

/* ★★**太字にしない。** 一度 --fw-bold を当てたが戻した。
     Noto Sans JP の 500 → 700 で «選ばれる理由» が数 px 広がり、
     現在地のページだけナビの項目位置が横にずれる。
     線を引くだけなら ::after は絶対配置なので **レイアウトは 1px も動かない**。 */

/* «サービス» のメガメニューは mega-menu.css（2026-10-02。9-29 の縦 1 列のメニューを置き換えた） */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* 電話番号。
   「TEL 050-3852-2703」と文字で出すと 1 項目で約 140px を使い、
   ナビと CTA を圧迫していた。文字の「TEL」をアイコンに変え、
   番号を Oswald（Noto より字幅が 17% 狭い）で組んで幅を詰めている。 */
.site-header__tel {
  position: relative;
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__tel:hover {
  color: var(--navy-800);
}

.site-header__logo:hover {
  opacity: 0.72;
}

.site-header__tel-icon {
  flex-shrink: 0;
}

.site-header__tel-number {
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .site-header {
    height: var(--header-height);
  }

  .site-header__logo {
    font-size: var(--text-xl);
  }

  .site-header__nav {
    display: block;
  }
}

/* 電話番号は 1280px 以上でだけ出す。
   CTA が「経営課題の無料診断」になって横幅が増えたため、
   1024px ではロゴ + ナビ 6 項目 + 電話 + CTA が収まらず横にはみ出す（実測 1158px > 1009px）。
   優先度の低い電話番号を落とし、ナビの間隔も 1280px 以上でだけ広げる。 */
/* 'wide_only' の項目（«よくある質問»・glcl_nav()）は 1280px 以上でだけ横並びに出す。
   1024〜1279px ではロゴ＋7 項目＋CTA が入らない（2026-10-02 実測 1024px で 50px はみ出す） */
.site-header__nav-item--wide {
  display: none;
}

@media (min-width: 1280px) {
  .site-header__tel {
    display: flex;
  }

  .site-header__nav-item--wide {
    display: list-item;
  }

  .site-header__nav-list {
    gap: var(--space-6);
  }
}

/* ロゴ画像。高さ基準で置き、幅は比率任せ。
   width/height 属性で比率を宣言しているので読み込み中のガタつきは起きない。
   実ファイルの縦横比が 192:40 と違う場合は属性値を実寸に合わせること。 */
.site-header__logo-img {
  width: auto;
  height: 26px;
}

@media (min-width: 1024px) {
  .site-header__logo-img {
    height: 32px;
  }
}

/* ==========================================================================
   透明ヘッダー（$header_overlay = true のページ）
   --------------------------------------------------------------------------
   最初：背景透明・文字白／80px スクロール後：背景白・文字黒。
   閾値の判定は assets/js/header-scroll.js。見た目の定義はここに集約する。

   sticky ではなく fixed にしている。sticky はフローに参加するため
   FV がヘッダーの下から始まってしまい、「重ねる」が成立しないため。
   ========================================================================== */
/*
  切り替えの柔らかさについて。
  背景だけ 250ms で動かしても、文字色とロゴが瞬時に変わるため
  全体としては「パッと切り替わった」ように見えていた。
  ①時間を 250ms → 480ms に伸ばす
  ②背景・影だけでなく、ナビ・電話番号・ロゴにも同じ transition を効かせる
  ③ロゴは display の入れ替えをやめ、2 枚を重ねて opacity でクロスフェードする
  の 3 点で揃えている。--header-fade は案B のこの用途だけのローカル値。
*/
.site-header--overlay {
  --header-fade: 480ms;

  position: fixed;
  inset-inline: 0;
  background-color: transparent;
  box-shadow: none;
  transition:
    background-color var(--header-fade) var(--ease-in-out),
    box-shadow var(--header-fade) var(--ease-in-out);
}

.site-header--overlay .site-header__nav-link,
.site-header--overlay .site-header__tel,
.site-header--overlay .btn {
  transition:
    color var(--header-fade) var(--ease-in-out),
    background-color var(--header-fade) var(--ease-in-out),
    border-color var(--header-fade) var(--ease-in-out),
    /* ★白い光も一緒に渡す。ここに足さないと、閾値の 80px でだけ
       光がパッと点く。このヘッダーは «全部を同じ 480ms で渡す» 作りなので、
       1 つでも即時のものがあると切り替えが硬く見える。 */
    text-shadow var(--header-fade) var(--ease-in-out);
}

/* 透明状態。色は意味トークンごと差し替える（個別に上書きして回らない） */
.site-header--overlay:not(.is-scrolled) {
  --color-text: var(--white);
  --color-text-muted: var(--navy-200);
  --color-action: var(--white);
  --color-action-text: var(--navy-800);
  --color-action-hover: var(--navy-100);
  --color-action-active: var(--navy-200);
  --color-focus: var(--white);
}

.site-header--overlay:not(.is-scrolled) .site-header__nav-link,
.site-header--overlay:not(.is-scrolled) .site-header__tel {
  color: var(--white);
}

/*
  スクロール後。
  ★白は 0.85 で敷く（三嶋指示）。下を通る本文がうっすら透ける。

  ★★半透明にすると «白地の前提で決めた文字色» が成り立たなくなる。
    バーの下に来るいちばん暗い面は締めの navy-950 #040227。
    そこに白 0.85 を重ねた実効色は rgb(217.4, 217.1, 211.6)。
    この地でのコントラスト（実測）：

      ナビ  gray-800 #303036 …  9.26:1  ○
      電話  gray-600 #666670 …  4.01:1  ✕（純白なら 5.67:1）
      電話  gray-700 #494950 …  6.31:1  ○ ← これに上げた

    ★案C の浮かせたヘッダー（--float）でも同じことが起きて、
      同じ直し方（--color-text-muted を gray-700 へ）をしている。
      «半透明のバーに、白地用の補足色をそのまま載せない» は
      このファイルで 2 回目の話。

    ★不透明度を下げるなら文字色を測り直すこと。
      gray-600 のままで 4.5:1 を保てる下限は 0.895（計算）。
      0.85 は «色を変えずに» 使える濃さではない。

  ★backdrop-filter は掛けていない。掛けると案C と同じ «すりガラス» になり、
    透け方の性格が変わる。必要になったら別途相談すること。
*/
.site-header--overlay.is-scrolled {
  --color-text-muted: var(--gray-700);

  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-header);
}

/*
  白い光を文字の周りに敷く（三嶋指示）。
  ★バーが半透明なので、下を通る面によって文字のすぐ周りの明るさが変わる。
    紺の面が来ると地が rgb(217, 217, 212) まで落ちる。
    光を敷くと、文字に接する数 px だけが白へ戻り、地が何であっても
    «文字の縁» の見え方が揃う。

  ★ぼかし 20px・不透明度 0.85 は三嶋指定値。
    項目の間隔は 24px（実測）なので、ぼかし 20px の光は隣と中間で重なる。
    重なった部分は «ナビの下に白い板が敷かれている» ように見える。
    これは崩れではなく、この指定の狙いどおり。

  ★★これはコントラスト比の数字には算入されない（WCAG は text-shadow を
    見ない）。だから電話番号を gray-700 に上げた対処は外していない。
    光は «見た目の助け»、色は «基準を満たすための担保» で、役割が別。

  ★透明状態（:not(.is-scrolled)）には敷かない。あちらは文字が白なので、
    白い光は効かないうえ、文字が太って見える。
*/
.site-header--overlay.is-scrolled .site-header__nav-link,
.site-header--overlay.is-scrolled .site-header__tel {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.85);
}

/*
  ロゴの切り替え。display の入れ替えだと一瞬で入れ替わって硬いので、
  2 枚を同じマスに重ねて opacity で渡す。
  通常ロゴ（879×190）と白ロゴ（262×52）は縦横比がわずかに違うため、
  同じ箱に object-fit: contain で収めて左右のズレを出さないようにしている。
*/
.site-header--overlay .site-header__logo {
  display: grid;
}

.site-header--overlay .site-header__logo-img {
  grid-area: 1 / 1;
  width: 148px;
  object-fit: contain;
  object-position: left center;
  transition: opacity var(--header-fade) var(--ease-in-out);
}

.site-header--overlay:not(.is-scrolled) .site-header__logo-img--dark {
  opacity: 0;
}

.site-header--overlay.is-scrolled .site-header__logo-img--light {
  opacity: 0;
}

/* オーバーレイでないページでは白ロゴを出力しないが、念のため隠す */
.site-header:not(.site-header--overlay) .site-header__logo-img--light {
  display: none;
}

/* ==========================================================================
   浮かせたヘッダー（$header_float = true のページ／案C）
   --------------------------------------------------------------------------
   Studio の実測値をそのまま採用している。
     背景 rgba(255,255,255,.8) ／ backdrop-filter: blur(2px)
     角丸 12px ／ 高さ 64px ／ 影 0 1px 4px rgba(14,31,53,.08)
     画面の上端ではなく 20px 内側に浮かせる

   ★角丸 12px はトークンの上限（--radius-lg = 8px）を超えている。
     「角丸は最小限」という方針からの逸脱なので、案C 限定の値として
     ここに直接書いている。トークンには昇格させない。
   ========================================================================== */
/*
  文字色を濃くする。
  バーは半透明なので、紺のヒーローに重なると実効色が #CDCCDD になり、
  白地の前提で決めた色ではコントラストが足りない。
  実測：--color-text-muted（#666670）は 3.62:1 で AA を下回っていた。
  gray-900 で 10.72:1、gray-700 で 5.69:1 に上げている。
*/
.site-header--float {
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);

  position: fixed;
  inset-block-start: var(--space-5);
  inset-inline: var(--space-5);
  /* 画面いっぱいに伸ばさず 1300px で止めて中央に置く（三嶋指定）。
     左右 20px の inset より内側に収まるので、広い画面でだけ効く。 */
  max-width: 1300px;
  margin-inline: auto;
  height: 64px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(14, 31, 53, 0.08);
}

/* バー自体が内側に寄っているので、中のコンテナは余白を詰める */
.site-header--float .site-header__inner {
  max-width: none;
  padding-inline: var(--space-6);
}

@media (min-width: 1024px) {
  .site-header--float {
    height: var(--header-height);
  }
}

/* トークンの duration は抑制設定で 0 になるが、--header-fade は
   案B 用のローカル値なので個別に落とす必要がある */
@media (prefers-reduced-motion: reduce) {
  .site-header--overlay {
    --header-fade: 0.01ms;
  }
}

/* ==========================================================================
   モバイルナビ（1024px 未満）
   --------------------------------------------------------------------------
   2026-09-10 追加。それまでは 1024px 未満でナビを非表示にしているだけで、
   代替の導線が無かった（decisions.md「未着手」に挙がっていたもの）。

   ボタン：.site-header__menu（2 本線 → 開くと ×）
   引き出し：.site-nav-drawer。ヘッダーの直下から画面いっぱいに白い面を出し、
             ナビ 6 項目・電話・CTA を縦に並べる。
   状態は assets/js/nav-drawer.js が扱う（aria-expanded / hidden / html.is-nav-open）。

   ★滑り込みの演出は付けない。«出る／消える» だけ。
   ★角丸・影・枠線は付けない。ヘッダーの下辺の 1px 罫だけで面を切る。
   ★1024px 以上ではボタンも引き出しも display: none。
     通常のナビが出るので、この範囲の見え方は追加前と 1px も変わらない。
   ========================================================================== */
.site-header__menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-inline-start: calc(var(--space-2) * -1);
  padding: 0 11px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.site-header__menu span {
  display: block;
  width: 22px;
  height: var(--border-width-thick);
  background-color: currentColor;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

/* 開いているとき：2 本線を × にする。3 本目は使わない（2 本で足りる） */
.site-header__menu[aria-expanded="true"] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.site-header__menu[aria-expanded="true"] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* 透明ヘッダー（スクロール前）では白 */
.site-header--overlay:not(.is-scrolled) .site-header__menu {
  color: var(--white);
}

.site-nav-drawer {
  position: fixed;
  inset: var(--header-height-sm) 0 0;
  z-index: var(--z-drawer);
  overflow-y: auto;
  padding-block: var(--space-6) var(--space-10);
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--white);
}

/* 透明ヘッダーは fixed で本文の上に浮いているため、引き出しの上端も同じ高さ */
.site-nav-drawer__list {
  display: grid;
}

.site-nav-drawer__list a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  color: var(--color-text-strong);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.site-nav-drawer__list a:hover,
.site-nav-drawer__list a:focus-visible {
  color: var(--color-link);
}

/*
  引き出し（1024px 未満）の現在地。
  ★★ここは ::after を持たない（行が全幅の «一覧» で、下に 1px の罫がすでにある）。
    アンダーラインを足すと、項目の区切り罫と重なって «二重線» に見える。
  ★代わりに **左端に 2px の縦罫** を引き、文字を太くする。
    ヘッダーと «同じ線» ではないが、一覧形式で現在地を示すときの素直な形。
    ★.sec-head__label や .reason-block__title と同じ «左の縦罫» の流用で、
      このサイトに既にあるパターン。新しい装飾ではない。
*/
.site-nav-drawer__list a[aria-current="page"] {
  padding-left: var(--space-4);
  border-left: var(--border-width-thick) solid var(--color-border-accent);
  color: var(--color-text-strong);
}

/* «サービス» の下の 6 領域（2026-09-29 今林）。一段下げ、文字を 1 段小さくして親と分ける。
   開閉はさせない（常に並べる）。項目が 6 つなので、畳むより見えている方が早い。 */
.site-nav-drawer__sub {
  display: grid;
  padding-left: var(--space-4);
}

.site-nav-drawer__list .site-nav-drawer__sub a {
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  color: var(--color-text);
}

.site-nav-drawer__actions {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.site-nav-drawer__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

/* 開いている間は本文をスクロールさせない */
html.is-nav-open,
html.is-nav-open body {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .site-header__menu,
  .site-nav-drawer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__menu span {
    transition: none;
  }
}

/*
  ★480px 未満ではヘッダーの CTA ボタンを出さない（引き出しの中に同じボタンがある）。
    理由は実測。375px 表示（縦スクロールバー込みで使える幅 320px）に
      ロゴ 148 ＋ 隙間 24 ＋ CTA 137 ＋ 隙間 12 ＋ メニュー 44 ＝ 365px
    は入らず、右端が 45px はみ出していた（2026-09-10 実測 x=333+44=377 > 360）。
    CTA を抜くと 148 ＋ 24 ＋ 44 ＝ 216px で収まる。
    480px 以上なら 365 < 440 で全部入る。
  ★ロゴを縮める案は取らなかった。通常ロゴ（26px 高・約 120px 幅）でも
    120 ＋ 24 ＋ 137 ＋ 12 ＋ 44 ＝ 337 > 320 で足りない。
*/
@media (max-width: 479px) {
  .site-header__actions .btn {
    display: none;
  }
}