/* リセット+基本要素+レイアウト枠 — spec §2.3 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink-900);
  font-size: var(--fs-md);
  font-weight: 500;  /* 游ゴシック M */
  line-height: 1.7;
  overflow-x: clip;  /* フルブリード要素(100vw)由来の横はみ出しを遮断 */
}
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.35; margin: 0 0 var(--sp-3); }
h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 700; }
h2 { font-size: clamp(18px, 2.6vw, 24px); font-weight: 700; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
p { margin: 0 0 var(--sp-3); }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* レイアウト */
.container { max-width: 1190px; margin: 0 auto; padding: 0 var(--sp-5); }
main.container { padding-top: var(--sp-6); padding-bottom: var(--sp-10); }

/* ヘッダー: 全幅のミニマルバー(ロゴ+CTA+ハンバーガー)。参考: HELLO CYCLING */
.site-header {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: none;
  position: sticky; top: 0; z-index: 60;
}
.site-header .inner {
  max-width: none; margin: 0; padding: 14px clamp(20px, 4vw, 48px);
  display: flex; align-items: center; gap: var(--sp-4);
}
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700;
  font-size: var(--fs-lg); text-decoration: none; position: relative; }
/* ヘッダーロゴ高さの正: 26px(旧30pxはcomponents.cssの26pxに常に負けていた死にルール) */
.brand-img { height: 26px; width: auto; display: block; }

/* スキップリンク(a11y): フォーカス時のみ表示し、キーボード利用者が
   バナー+ロゴ+CTA+ハンバーガーを毎ページ通過せず本文へ飛べるようにする */
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100;
  background: var(--ink-900); color: #fff; font-weight: 700;
  padding: 10px 16px; border-radius: 0 0 10px 10px; text-decoration: none;
  transition: top .15s var(--ease); }
.skip-link:focus, .skip-link:focus-visible { top: 0; }
.brand-white { position: absolute; inset: 0; opacity: 0; }  /* 白版は重ねて非表示 */
/* メニュー(オレンジ)を開いたらヘッダーを透過し、ロゴを白版に切替 */
body.nav-open .site-header { background: transparent; backdrop-filter: none;
  -webkit-backdrop-filter: none; border-bottom-color: transparent; }
body.nav-open .brand-color { opacity: 0; }
body.nav-open .brand-white { opacity: 1; }
.header-right { margin-left: auto; display: flex; align-items: center;
  gap: var(--sp-3); }

/* ハンバーガー(3本線 → ×) */
.nav-toggle { width: 44px; height: 44px; border: none; background: none;
  cursor: pointer; padding: 0; position: relative; flex: none; }
.nav-toggle span { position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--ink-900); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease); }
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* 全画面オーバーレイメニュー。アンバー地に白文字 */
.nav-overlay { position: fixed; inset: 0; z-index: 55;
  background: var(--amber-500); color: #fff;
  display: flex; flex-direction: column;
  padding: clamp(80px, 11vh, 130px) clamp(24px, 6vw, 96px) clamp(20px, 4vh, 40px);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  /* visibility はフェードアウト完了後に hidden へ(閉じ方向のみ遅延)。
     開き方向は即 visible にしないと、開いた直後のフォーカス移動が無効になる */
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s;
  overflow-y: auto; }
.nav-overlay.open { opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s; }
.nav-overlay-inner { width: 100%; max-width: 1240px; margin: 0 auto;
  flex: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-10);
  align-content: center; align-items: center; }
.nav-main { list-style: none; margin: 0; padding: 0; }
.nav-main li { border-bottom: 1px solid rgba(20, 21, 23, .22); }
.nav-main a { display: flex; align-items: baseline; gap: var(--sp-4);
  padding: clamp(12px, 2vh, 20px) 0; text-decoration: none; color: #fff;
  opacity: 0; transform: translateX(24px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); }
.nav-overlay.open .nav-main a { opacity: 1; transform: none; }
.nav-main li:nth-child(1) a { transition-delay: .08s; }
.nav-main li:nth-child(2) a { transition-delay: .14s; }
.nav-main li:nth-child(3) a { transition-delay: .20s; }
.nav-main li:nth-child(4) a { transition-delay: .26s; }
.nav-main li:nth-child(5) a { transition-delay: .32s; }
.nav-main li:nth-child(6) a { transition-delay: .38s; }
.nav-main .jp { font-size: clamp(28px, 4vw, 46px); font-weight: 700;
  letter-spacing: .02em; line-height: 1.1; }
.nav-main .en { font-size: var(--fs-xs); font-weight: 700; opacity: .7;
  letter-spacing: .14em; }
.nav-main a:hover .jp { text-decoration: underline; text-underline-offset: 6px; }
/* 現在地の可視化(aria-current はテンプレートで付与済み・スタイル未定義だった) */
.nav-main a[aria-current="page"] .jp { text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 3px; }
.nav-main a[aria-current="page"]::before { content: '●'; font-size: 10px;
  align-self: center; }
.nav-sub { display: flex; flex-direction: column; gap: var(--sp-2);
  align-items: stretch; opacity: 0; transition: opacity .5s var(--ease) .42s; }
.nav-overlay.open .nav-sub { opacity: 1; }
/* 右側の大きな緑カード。中に白のLINEボタンを置く */
.nav-cta-card { background: var(--line-700); border-radius: 22px;
  padding: clamp(24px, 3vw, 36px); text-align: center;
  box-shadow: 0 18px 40px rgba(6, 199, 85, .4); }
.nav-cta-lead { margin: 0 0 var(--sp-3); font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700; color: #fff; }
.nav-cta-note { margin: var(--sp-3) 0 0; font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .9); line-height: 1.6; }
/* カード内のLINEボタン: 白地に緑文字でくっきり(line-cta-lg の中央寄せmarginを打ち消す) */
.nav-overlay .nav-cta { margin: 0 auto; background: #fff; color: var(--line-700);
  font-size: clamp(15px, 1.6vw, 18px); padding: 15px 30px; border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.nav-overlay .nav-cta:hover { background: var(--paper-hover); }
.nav-overlay .nav-cta .line-cta-icon { background: rgba(6, 199, 85, .15); color: var(--line-700); }
/* 下部フッター: ポリシー等の補助リンク */
.nav-foot { width: 100%; max-width: 1240px; margin: var(--sp-6) auto 0;
  padding-top: var(--sp-4); border-top: 1px solid rgba(20, 21, 23, .25);
  display: flex; gap: var(--sp-6); flex-wrap: wrap;
  opacity: 0; transition: opacity .5s var(--ease) .5s; }
.nav-overlay.open .nav-foot { opacity: 1; }
.nav-foot a { color: rgba(255, 255, 255, .92); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 700; }
.nav-foot a:hover { text-decoration: underline; }
body.nav-open { overflow: hidden; }
@media (max-width: 760px) {
  .nav-overlay-inner { grid-template-columns: 1fr; gap: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle span, .nav-overlay, .nav-main a, .nav-sub { transition: none !important; }
}

/* フッター */
.site-footer {
  border-top: 1px solid var(--border); background: var(--surface);
  margin-top: var(--sp-10); font-size: var(--fs-xs); color: var(--ink-600);
}
.site-footer .inner { max-width: 1190px; margin: 0 auto;
  padding: var(--sp-10) var(--sp-5) var(--sp-8); }
.site-footer a { color: var(--ink-600); }
.footer-top { display: flex; align-items: center; gap: var(--sp-5);
  flex-wrap: wrap; margin-bottom: var(--sp-4); }
.footer-logo { height: 30px; width: auto; display: block; }
.footer-poco { height: 56px; width: auto; display: block; margin-left: auto; }  /* 右端の余白へ寄せる */
.footer-mission { margin: 0; font-size: var(--fs-base); font-weight: 700;
  color: var(--ink-900); }
.footer-note { max-width: 620px; margin-bottom: var(--sp-6); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-4) 0; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }
.footer-links a { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900);
  text-decoration: none; }
.footer-links a:hover { color: var(--amber-700); }
.footer-links .ext { font-size: var(--fs-2xs); color: var(--ink-400); }
.footer-bottom { display: flex; justify-content: space-between;
  align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.copyright { margin: 0; font-weight: 700; color: var(--ink-400); }
.footer-cite { margin: 0; font-size: 11.5px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* フォーカスリング(a11y)。白地で視認できるよう墨色の高コントラストリング */
:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* 押下フィードバック(:active)。全操作系に一貫した沈み込みを与える */
.btn-cite:active, .btn-export:active, .line-cta:active, .line-cta-lg:active,
.pd-line-btn:active, .pd-close:active, .c-pagetop:active, .nav-toggle:active,
.adopter-chip:active, .section-anchors a:active, .ops-nav a:active,
.tile:active, .theme-card:active, .issue-card:active {
  transform: translateY(1px);
}

/* 無効状態(:disabled)。JSで disabled を立てるボタンに視覚的な区別を与える */
button:disabled, button[disabled],
.btn-cite:disabled, .btn-export:disabled, .line-cta[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none;
}

/* モーション控えめ設定の尊重(必ず最後) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* スクロール連動フェードイン(reveal.js)。JS無効時は常に表示(no-jsフォールバック) */
.js .reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}