/* ============================================================
   02-header.css
   追従ヘッダーとナビ
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
header{
  position:sticky;top:0;z-index:120;
  background:rgba(244,246,252,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-strong);
  transition:box-shadow .3s ease,background-color .3s ease;
}
/* 少しでもスクロールしたら、下に薄い影を落として本文と分ける */
header.is-scrolled{box-shadow:0 8px 26px rgba(17,26,60,.08)}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:11px 24px;
  display:flex;align-items:center;justify-content:center;
}

nav.main{display:flex;gap:30px;align-items:center;justify-content:center;flex-wrap:wrap}
nav.main a{
  font-weight:700;font-size:.88rem;letter-spacing:.08em;
  text-decoration:none;color:var(--ink);padding:5px 1px;
  border-bottom:2px solid transparent;transition:.25s;white-space:nowrap;
}
nav.main a:hover,nav.main a:focus-visible{color:var(--navy);border-bottom-color:var(--yellow)}
.nav-booth{
  background:var(--navy);color:var(--white)!important;
  padding:9px 18px!important;border-radius:999px;border-bottom:none!important;
  display:inline-flex;align-items:center;gap:8px;transition:.25s;font-size:.82rem;
}
.nav-booth b{font-family:var(--font-mono);color:var(--yellow);font-weight:700;letter-spacing:.04em}
.nav-booth:hover{background:var(--navy-deep);transform:translateY(-1px)}

/* ── スマホ用の部品。PCでは出さない（PCの見た目は一切変えない） ── */
.nav-brand,.nav-toggle{display:none}
.read-progress{display:none}