/* =========================================================================
   tokens.css — ブランドの“真実”だけ（色トークン・フォント・最小リセット・出現アニメ）
   コンポーネント定義は持たない。各ページが独自レイアウトを一から書くための土台。
   ＝同じ base.css を使い回して“同じ顔”になるのを構造的に避けるための共有基盤。
   使い方: tokens.css → 案件の brand.theme.css → ページ独自 <style> の順で読む。
   lp.js（reveal/seq/data-count）が効くよう .reveal 等もここに含む。
   ========================================================================= */
:root{
  /* ブランド6トークン（brand.theme.css で上書き） */
  --brand:#15467D; --brand-2:#4F93D9; --brand-ink:#0C1E36; --brand-soft:#9CC2EC;
  --accent:#E8552D; --glow:color-mix(in srgb,var(--brand-2) 40%,transparent);
  /* 派生 */
  --blue:var(--brand); --blue-bright:var(--brand-2); --red:var(--accent);
  /* 中立トークン */
  --mist:#F4F6F9; --mist-2:#E9EEF4; --paper:#fff; --text:#1E2730; --muted:#5B6B7D;
  --line:color-mix(in srgb,var(--brand) 16%,transparent);
  --line-2:color-mix(in srgb,var(--brand) 26%,transparent);
  --line-d:rgba(255,255,255,.14);
  --maxw:1160px; --r:16px;
  /* ダーク面 */
  --text-d:color-mix(in srgb,var(--brand-soft) 42%,#fff);
  --muted-d:color-mix(in srgb,var(--brand-soft) 55%,#8092a6);
  /* フォント */
  --font-sans:"Noto Sans JP",system-ui,sans-serif;
  --font-display:"Space Grotesk",sans-serif;
  --font-mono:"Space Mono",monospace;
  --font-serif:"Noto Serif JP",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text);background:var(--paper);line-height:1.85;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt";overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* 日本語の単語途中改行を防ぎ、文節境界で折る（非対応ブラウザは normal にフォールバック） */
h1,h2,h3,h4,.lead,.sub,.huge{word-break:auto-phrase;line-break:strict}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono)}
/* 出現アニメ（lp.js が .in を付与） */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.seq>*{opacity:0;transform:translateY(18px);animation:seqIn .72s cubic-bezier(.2,.7,.2,1) forwards}
.seq>*:nth-child(1){animation-delay:.05s}.seq>*:nth-child(2){animation-delay:.16s}
.seq>*:nth-child(3){animation-delay:.27s}.seq>*:nth-child(4){animation-delay:.38s}.seq>*:nth-child(5){animation-delay:.49s}
@keyframes seqIn{to{opacity:1;transform:none}}
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 12px var(--glow)}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}.seq>*{opacity:1;transform:none}
}