/* ── 書体トークン（両層で唯一の定義） ─────────────────────────
   ★header.css は売り層・知識層の両方が最後に読む。ここに置けば1箇所で揃う。
     以前は --serif が売り層の各HTMLにしか無く、知識層では未定義だった。
     header.site .logo は var(--serif, serif) なので、知識層だけ総称serif
     （OS既定の明朝／Times）にフォールバックし、同じヘッダーが層で別の書体に
     なっていた（2026-09-04 発覚）。 */
:root{
  --serif:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',serif;
  --sans:游ゴシック体,"Yu Gothic Medium","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   header.css — 売り層(/)と知識層(/site/)で共通のヘッダー
   ------------------------------------------------------------
   2026-09-04：同じヘッダーのCSSが site/css/style.css とLP各ページの
   <style> に二重にあり、片方を直すたびにもう片方とずれた（1日に5回）。
   ここが唯一の正とし、両層とも最後にこのファイルを読む。
   ★片方だけ直さない。直すならこのファイルだけ。

   使う変数（両層で同じ値を定義しておくこと）
     --hd-bg    ヘッダーの地      --hd-line  下線と区切り
     --hd-text  ナビの文字        --hd-title ロゴ
     --hd-acc   ホバー・現在地     --hd-cta   CTAの塗り
   ══════════════════════════════════════════════════════════════ */

header.site{position:sticky;top:0;z-index:50;background:var(--hd-bg);
  border-bottom:1px solid var(--hd-line);padding:0;box-shadow:none;
  font-size:16px;line-height:1.9;color:var(--hd-text)}
/* backdrop-filter は書かない。Safariで自身の sticky が効かなくなる。 */

header.site .bar{max-width:1000px;margin:0 auto;padding:0 22px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative}

header.site .logo{display:block;line-height:1.9;font-family:var(--serif,serif);font-weight:600;
  font-size:18px;letter-spacing:.1em;color:var(--hd-title);white-space:nowrap;text-decoration:none}
header.site .logo b{color:var(--hd-gold,#D4B878);font-weight:600}
header.site .logo small{font-size:10px;letter-spacing:.14em;color:var(--hd-mute,#9C8FA8);
  display:block;margin-top:1px}

/* flex:1 が無いと space-between が余白を均等配分し、ナビが中央へ寄る */
header.site nav{display:flex;gap:14px;flex:1;flex-wrap:nowrap;justify-content:flex-end;
  min-width:0;white-space:nowrap;font-size:13px;line-height:1.9}

/* ナビとCTAは同じ定義にする。CTAだけ別に書くと色や太さがずれる */
header.site nav a,
header.site .hcta{font-size:13.5px;font-weight:700;color:var(--hd-text);padding:0 0 3px;
  border-radius:0;background:none;position:relative;line-height:1.9;text-decoration:none;
  letter-spacing:normal;white-space:nowrap}
header.site nav a::after,
header.site .hcta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--hd-acc);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
header.site nav a:hover::after,
header.site .hcta:hover::after{transform:scaleX(1)}
header.site nav a:hover,
header.site .hcta:hover{color:var(--hd-acc);background:none;opacity:1}
header.site nav a[aria-current="page"]{color:var(--hd-acc)}
header.site nav a[aria-current="page"]::after{transform:scaleX(1)}

header.site .h-right{display:flex;align-items:center;gap:12px;
  flex-wrap:nowrap;flex-shrink:0;justify-content:flex-end}
/* flex-wrap:wrap にすると1px足りない瞬間に検索とCTAが縦に割れる */

header.site .search-box{display:none}   /* 索引がタイトルのみで使えないため非表示 */
header.site .hcta .lbl-short{display:none}

/* ハンバーガー（STORK19子テーマと同じ ☰＋MENU） */
header.site .hmenu{display:none;align-items:center;justify-content:center;flex-direction:column;
  gap:2px;width:45px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--hd-text)}
header.site .hmenu .hm-ico{display:flex;flex-direction:column;gap:4px;align-items:center}
header.site .hmenu .hm-ico i{display:block;width:18px;height:1.5px;background:currentColor;
  transition:transform .18s ease,opacity .18s ease}
header.site .hmenu .hm-lbl{font-size:8.5px;letter-spacing:.08em;line-height:1;opacity:.75}
.nav-open header.site .hmenu .hm-ico i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-open header.site .hmenu .hm-ico i:nth-child(2){opacity:0}
.nav-open header.site .hmenu .hm-ico i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
header.site .hpanel{display:none}

/* ── 881〜1120px：詰まってきたらナビが譲る ── */
@media(min-width:881px) and (max-width:1120px){
  header.site nav{gap:12px;font-size:12.5px;overflow-x:auto;scrollbar-width:none}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{padding:6px 8px 3px}
  header.site .logo{font-size:16px}
}

/* ── 〜880px：2段。ロゴ＋CTA＋☰／下段に横スクロールのナビ ── */
@media(max-width:880px){
  header.site .bar{height:auto;min-height:52px;gap:8px;flex-wrap:wrap;padding:0 0 0 14px}
  header.site .logo{min-width:0;flex:1 1 auto;font-size:13.5px;letter-spacing:.04em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
  header.site .logo small{font-size:9px;letter-spacing:.08em;margin-top:0}
  header.site .h-right{width:auto;gap:6px;margin-left:auto}
  header.site .hmenu{display:flex}
  /* CTAは短い文言へ。CSSの content で差し替えると読み込み中にボタンが動く */
  header.site .hcta{padding:0}
  header.site .hcta .lbl-long{display:none}
  header.site .hcta .lbl-short{display:inline-block;font-size:12px;
    background:var(--hd-cta);color:#fff;padding:8px 12px;border-radius:3px}
  header.site .hcta::after{display:none}

  header.site nav{order:9;flex:0 0 100%;width:calc(100% + 14px);margin-left:-14px;
    padding:0 46px 0 14px;box-sizing:border-box;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    border-top:1px solid var(--hd-line)}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{flex:0 0 auto;padding:10px 13px;font-size:12.5px}

  /* 右端のフェードと矢印。端まで送ると消える */
  header.site .bar::after{content:"";position:absolute;right:0;bottom:0;width:52px;height:45px;
    pointer-events:none;z-index:2;opacity:0;transition:opacity .2s ease;
    background:linear-gradient(90deg,rgba(0,0,0,0),var(--hd-bg) 62%)}
  header.site .bar::before{content:"";position:absolute;right:13px;bottom:16px;width:7px;height:7px;
    border-right:1.5px solid var(--hd-text);border-bottom:1.5px solid var(--hd-text);
    transform:rotate(-45deg);pointer-events:none;z-index:3;opacity:0;transition:opacity .2s ease}
  .nav-more header.site .bar::after,
  .nav-more header.site .bar::before{opacity:.85}

  header.site .hpanel{position:absolute;left:0;right:0;top:100%;z-index:60;
    background:var(--hd-bg);border-bottom:1px solid var(--hd-line);
    box-shadow:0 12px 26px rgba(0,0,0,.34)}
  .nav-open header.site .hpanel{display:block}
  header.site .hpanel a{display:block;padding:13px 16px;font-size:14px;
    border-bottom:1px solid var(--hd-line);color:var(--hd-text);text-decoration:none}
  header.site .hpanel a:last-child{border-bottom:0}
}