/* ============================================================
   共通ヘッダー／グローバルナビ／パンくず（全ページ共通）
   マークアップは assets/site-header.js が挿入します。
   ヘッダー・ナビの見た目はこのファイルだけ直せば全ページに反映されます。
   ※ 色などのデザイントークン（--indigo-deep 等）は各ページの :root を参照します。
   ============================================================ */

/* ---------- ヘッダーバー ---------- */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; color:var(--on-dark); transition:background .35s ease, color .35s ease, box-shadow .35s ease; }
.site-header.scrolled{ background:rgba(246,244,238,.9); -webkit-backdrop-filter:saturate(140%) blur(10px); backdrop-filter:saturate(140%) blur(10px); color:var(--ink); box-shadow:0 1px 0 rgba(28,32,48,.08); }
.site-header.scrolled .nav-toggle{ color:var(--ink); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:baseline; gap:.6rem; }
.brand__name{ font-family:var(--jp-serif); font-weight:700; font-size:1.18rem; letter-spacing:.06em; }
.brand__sub{ font-family:var(--latin); font-style:italic; font-size:.95rem; letter-spacing:.18em; opacity:.8; }

/* ---------- Entry ボタン ---------- */
.entry-btn{ font-family:var(--latin); font-style:italic; font-weight:600; font-size:1.02rem; letter-spacing:.12em; background:var(--honey); color:var(--indigo-deep); padding:.55rem 1.5rem; border-radius:999px; transition:transform .25s ease, background .25s ease, box-shadow .25s ease; white-space:nowrap; }
.entry-btn:hover, .entry-btn:focus-visible{ background:var(--honey-bright); transform:translateY(-2px); box-shadow:0 8px 22px rgba(199,154,62,.3); }
.header__inner > .entry-btn{ margin-left:auto; margin-right:clamp(6px,1.2vw,12px); }

/* ---------- ハンバーガーボタン（全画面幅で表示） ---------- */
.nav-toggle{ display:block; position:relative; width:44px; height:44px; border:0; background:transparent; color:inherit; cursor:pointer; padding:0; -webkit-tap-highlight-color:transparent; }
.nav-toggle__box{ position:absolute; top:50%; left:50%; width:26px; height:2px; margin:-1px 0 0 -13px; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after{ position:absolute; left:0; width:26px; height:2px; background:currentColor; border-radius:2px; }
.nav-toggle__bar{ top:0; transition:background .2s ease; }
.nav-toggle__bar::before, .nav-toggle__bar::after{ content:""; transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.nav-toggle__bar::before{ transform:translateY(-8px); }
.nav-toggle__bar::after{ transform:translateY(8px); }
body.nav-open .nav-toggle__bar{ background:transparent; }
body.nav-open .nav-toggle__bar::before{ transform:translateY(0) rotate(45deg); }
body.nav-open .nav-toggle__bar::after{ transform:translateY(0) rotate(-45deg); }

/* ---------- メニュー本体（body.nav-open で表示） ---------- */
.nav{ display:none; }
body.nav-open .nav{ display:flex; flex-direction:column; align-items:stretch; gap:.2rem; position:fixed; inset:72px 0 auto 0; z-index:55; background:var(--indigo-deep); color:var(--on-dark); padding:1.6rem clamp(20px,5vw,48px) 2.4rem; box-shadow:0 24px 50px -20px rgba(0,0,0,.5); overflow-y:auto; max-height:calc(100vh - 72px); }
.nav > a{ font-size:1rem; padding-block:.75rem; border-bottom:1px solid var(--line-on-dark); position:relative; opacity:.92; letter-spacing:.06em; }
.nav > a::after{ content:""; position:absolute; left:0; right:100%; bottom:.1rem; height:1px; background:var(--honey); transition:right .3s ease; }
.nav > a:hover::after, .nav > a:focus-visible::after{ right:0; }
.nav a[aria-current="page"]{ opacity:1; }
.nav a[aria-current="page"]::after{ right:0; }
.nav-drop{ width:100%; border-bottom:1px solid var(--line-on-dark); }
.nav-drop__trigger{ display:inline-flex; align-items:center; gap:.35em; font-size:1rem; letter-spacing:.06em; position:relative; padding-block:.75rem; width:100%; opacity:.92; }
.nav-drop__trigger::after{ content:""; position:absolute; left:0; right:100%; bottom:.1rem; height:1px; background:var(--honey); transition:right .3s ease; }
.nav-drop__trigger:hover::after, .nav-drop__trigger:focus-visible::after{ right:0; }
.nav-drop__caret{ width:8px; height:8px; opacity:.65; flex:none; }
.nav-drop__panel{ padding:0 0 .6rem .6rem; }
.nav-drop__panel a{ display:block; color:var(--on-dark-dim); padding:.5rem 0; font-size:.9rem; letter-spacing:.02em; }
.nav-drop__panel a::after{ display:none; }
.nav-drop__panel a:hover, .nav-drop__panel a:focus-visible{ color:var(--honey-bright); }

/* ---------- パンくずバー（最上部は紺で統一・固定ヘッダーの下に配置） ---------- */
.crumb-bar{ background:var(--indigo-deep); border-bottom:1px solid var(--line-on-dark); padding-top:72px; }
.crumb-bar .wrap{ padding-block:.85rem; }
.crumb-bar ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; font-size:.78rem; letter-spacing:.05em; color:var(--on-dark-dim); }
.crumb-bar a{ color:var(--on-dark); } .crumb-bar a:hover{ color:var(--honey-bright); }
.crumb-bar li:not(:last-child)::after{ content:"/"; margin-left:.5rem; color:rgba(234,231,221,.35); }

/* ---------- 画面幅による微調整 ---------- */
@media (max-width:960px){
  .header__inner > .entry-btn{ font-size:.88rem; padding:.46rem 1.05rem; }
}
@media (max-width:380px){
  .brand__name{ font-size:1.02rem; }
  .brand__sub{ display:none; }
  .header__inner > .entry-btn{ font-size:.8rem; padding:.42rem .85rem; letter-spacing:.08em; }
}