/* ===========================================================
   All Japan Agent — インタラクション層
   ①ヘッダー：ホバーでメガメニュー展開＋画面全体を暗転
   ②スクロール：文字・画像がふわっと立ち上がる（reveal）
   ※ style.css / 各ページのインラインCSSより後に読み込むこと
   =========================================================== */

/* ---------- ヘッダー：ロゴ ---------- */
/* ★2026-08-26 本番ロゴ差し替え。以前はindex.htmlだけが .brand の見た目(太字+金四角)を
   持っていて、他12ページは class="brand en" にスタイルが1つも当たらず素のテキストリンクだった
   (各ページのインラインstyleにも.brandの定義が無い＝既存の不具合)。
   ここに集約すれば全13ページで同じロゴが同じ見た目で出る。 */
.brand { display: flex; align-items: center; }
.brand-logo { height: 30px; width: auto; display: block; }
/* ★12ページ中12枚が読み込む style.css 側に .brand::before(金四角) が残っている。
   新ロゴ自体がアイコンを内包しているので、ここで打ち消さないとロゴの左に浮いた金四角が残る
   (実際にPlaywrightのスクリーンショットで見つかった)。site.cssは全ページで最後に読まれるので
   ここに書けば確実に勝つ。*/
.brand::before { content: none; }

/* ---------- フッター：社名ロゴ ---------- */
/* ★2026-09-07 フッター下部の社名表記(.fb-name のテキスト「ALL JAPAN AGENT」)を、
   ヘッダーと同じロゴ画像(img/logo.svg)に差し替え。
   footer自体には背景色の指定が無く(style.css)、bodyの --bg:#fff をそのまま継承する白背景。
   logo.svgは文字・マークとも #141414(ほぼ黒)なので、ヘッダーと同条件で問題なくコントラストが取れる。
   .fgrid .fb-name::before はテキスト用の金四角ビュレット(style.css)。画像だけになると
   左に浮いて残ってしまうため、ヘッダーの .brand::before と同じ理由で打ち消す。
   site.cssは全ページで最後に読まれるので、ここに書けば確実に勝つ。
   高さはヘッダーのロゴ(30px)よりひと回り大きい40pxに設定
   (.fb-nameの元テキストは font-size:1rem だったのに対し、フッター全体の社名ブロックとして
   目立たせたいのと、64pxの上部余白に対して窮屈にならないバランスを見て決めた)。 */
.fgrid .fb-name::before { content: none; }
.fb-logo { height: 40px; width: auto; display: block; }

/* ---------- ヘッダー：メガメニュー ---------- */
header { position: sticky; top: 0; z-index: 120; }

/* ★ナビ4項目は右端の「無料相談」ボタンの隣に寄せる。
   header は justify-content:space-between なので、nav に margin-left:auto を効かせると
   余った横幅が全部ロゴとナビの間に入り、nav と .head-btns が右側で隣り合う。 */
header nav { display: flex; align-items: stretch; gap: 0; height: 100%; font-size: .82rem; font-weight: 600; margin-left: auto; }
header nav .nav-item { position: static; display: flex; align-items: center; height: 100%; }
header nav .nav-link {
  position: relative; display: flex; align-items: center; height: 100%;
  padding: 0 17px; cursor: pointer; color: var(--ink); white-space: nowrap;
}
header nav .nav-link::after {
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 0; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
header nav .nav-item:hover .nav-link::after,
header nav > .nav-link:hover::after { transform: scaleX(1); }

.caret {
  width: 6px; height: 6px; margin-left: 9px; margin-top: -3px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .28s ease, margin-top .28s ease; opacity: .65;
}
header nav .nav-item:hover .caret { transform: rotate(225deg); margin-top: 3px; opacity: 1; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-bottom: 1px solid var(--line);
  opacity: 0; visibility: hidden;
  clip-path: inset(0 0 100% 0);            /* 上から開く（白帯が落ちてこない） */
  transition: clip-path .42s cubic-bezier(.22,.61,.36,1), opacity .2s ease, visibility .42s;
  z-index: 121;
}
header nav .nav-item:hover .mega { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); }

.mega-inner { max-width: 1120px; margin: 0 auto; padding: 26px 6% 30px; }
.mega-head {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.mega-head .en { color: var(--blue); font-size: .68rem; letter-spacing: .26em; font-weight: 800; font-family: "Helvetica Neue", Arial, sans-serif; flex-shrink: 0; }
.mega-head p { font-size: .8rem; color: var(--gray); font-weight: 400; }

/* リンクは1行に横並び（縦に伸ばさない） */
.mega-links { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0 26px; }
.mega-links a {
  display: block; height: auto; padding: 20px 0 4px; border-top: none;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), color .2s;
}
.mega-links a:hover { transform: translateY(-3px); color: var(--blue); }
.mega-links a b { display: block; font-size: .92rem; font-weight: 800; position: relative; padding-bottom: 8px; }
.mega-links a b::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 20px; height: 2px;
  background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.mega-links a:hover b::after { transform: scaleX(1); }
.mega-links a small { display: block; font-size: .76rem; color: var(--gray); font-weight: 400; margin-top: 4px; line-height: 1.75; }
.mega-links a::after { display: none; }

/* ヘッダー右のボタン */
.head-btns { display: flex; align-items: center; gap: 10px; margin-left: 22px; }
.btn-ghost {
  border: 1px solid var(--ink); color: var(--ink); padding: 11px 20px;
  font-size: .8rem; font-weight: 700; white-space: nowrap; transition: .2s;
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-cta { white-space: nowrap; }

/* 画面全体の暗転 */
.nav-dim {
  position: fixed; inset: 0; background: rgba(9,18,34,.55); backdrop-filter: blur(1.5px);
  opacity: 0; visibility: hidden; transition: opacity .34s ease, visibility .34s; z-index: 90;
}
body.menu-open .nav-dim { opacity: 1; visibility: visible; }

/* ---------- スクロール reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .rv.in { opacity: 1; transform: none; }

  /* 画像は少し大きめから寄る */
  .rv-img { opacity: 0; transform: scale(1.04); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.22,.61,.36,1); }
  .rv-img.in { opacity: 1; transform: none; }
}

/* ---------- モバイル ---------- */
@media (max-width: 960px) {
  /* ★ハンバーガーを押すまでナビは閉じたまま
     （site.css の `header nav{display:flex}` が既存の `nav{display:none}` を
       詳細度で上回ってしまい、常時展開になるのを打ち消す） */
  header nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; height: auto; margin-left: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 6px 0 14px; box-shadow: 0 14px 26px rgba(12,22,38,.12);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .nav-toggle:checked ~ nav { display: flex; }

  header nav .nav-item { display: block; height: auto; }
  header nav .nav-link { padding: 13px 6%; height: auto; font-weight: 700; }
  header nav .nav-link::after { display: none; }
  .caret { display: none; }

  /* メガメニューは開閉なしの通常リストに戻す（clip-pathで潰さない） */
  .mega,
  header nav .nav-item:hover .mega {
    position: static; opacity: 1; visibility: visible;
    clip-path: none !important; transition: none;
    box-shadow: none; border-top: none; border-bottom: none; background: transparent;
  }
  .mega-inner { display: block; padding: 0 0 6px; }
  .mega-head { display: none; }
  .mega-links { display: block; }
  .mega-links a { border-top: none; padding: 9px 6% 9px 11%; }
  .mega-links a:hover { transform: none; }
  .mega-links a b { font-weight: 600; font-size: .88rem; padding-bottom: 0; }
  .mega-links a b::after { display: none; }
  .mega-links a small { display: none; }

  .nav-dim { display: none; }
  .head-btns { display: none !important; }
}