/* base.css — 全ページ共通の基盤。各ページ CSS の前に読み込むこと。
   ここに置くのは「全ページで同じ値が望ましい」もののみ:
   - CSS 設計トークン（カラー、イージング）
   - リセット
   - アクセシビリティ（focus-visible / prefers-reduced-motion）
   - 共通タイポユーティリティ（.eyebrow, .lead-sentence, .quote-large）
   ページ固有の header / footer / drawer は各ページ CSS のままにしている。
   詳細: docs/03_設計規約/CSS_ARCHITECTURE.md
*/

/* ── DESIGN TOKENS ── */
:root{
  /* core palette */
  --navy:#0F2742;
  --navy-mid:#1a3a5c;
  --blue:#1E5FA8;
  --accent:#E85D1B;
  --accent-light:#f07040;
  --steel:#5a6a7a;

  /* neutrals */
  --white:#f8f6f2;
  --gray-light:#F2F4F6;
  --gray-mid:#c8c4bc;
  --sand:#ece6d6;

  /* text */
  --text-dark:#1a1a1a;
  --text-mid:#4a4a4a;

  /* motion */
  --ease-brand:cubic-bezier(.65,.05,.36,1);
}

/* ── UNIVERSAL RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* ── ACCESSIBILITY ── */
a:focus-visible,
button:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ── SKIP TO CONTENT (a11y) ── */
.skip-link{
  position:fixed;top:-100px;left:8px;
  background:var(--accent);color:#fff;
  padding:12px 22px;
  font-size:13px;letter-spacing:.08em;font-weight:500;
  text-decoration:none;border-radius:2px;
  z-index:9999;
  transition:top .2s ease;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.skip-link:focus{top:8px;outline:2px solid #fff;outline-offset:2px}

/* ── TYPOGRAPHY LAYERS (cross-page utilities) ── */
.eyebrow{
  font-family:"Bebas Neue",sans-serif;
  font-size:12px;letter-spacing:.32em;
  color:var(--accent);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;
  font-weight:500;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);display:block}

.lead-sentence{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(18px,2vw,22px);line-height:1.9;
  color:var(--navy);font-weight:400;letter-spacing:.04em;
}

.quote-large{
  font-family:"Noto Serif JP",serif;
  font-size:clamp(24px,2.6vw,32px);line-height:1.7;
  color:var(--navy);font-weight:400;letter-spacing:.04em;
  margin:0;
}
.quote-large::before{content:"「";color:var(--accent)}
.quote-large::after{content:"」";color:var(--accent)}

/* ── FADE-UP UTILITY (base.js IntersectionObserver と対) ── */
/* 子要素 stagger (.fu:nth-child) はページ固有差分（6/9 ページのみ実装）のため各ページ CSS に残置 */
.fu{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
.fu.on{opacity:1;transform:translateY(0)}

/* ── DEMO / STAGING BANNER (base.js が *.pages.dev で動的注入) ── */
/* 本番アルファメールには注入されないため body に影響なし。
   削除は base.js の注入処理ごと行うこと（CSS 単独残置可）。
   下部固定: 上部ナビ／ハンバーガーボタンとの干渉を避ける（2026-05-21 井本さん指摘で sticky top:0 → fixed bottom:0 へ変更）。 */
#demo-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:9999;
  background:var(--accent);color:#fff;
  font-family:"Noto Sans JP",sans-serif;
  font-size:12px;line-height:1.5;
  padding:6px 16px;text-align:center;
  letter-spacing:.02em;
  box-shadow:0 -2px 8px rgba(0,0,0,.15);
}