@charset "utf-8";
/* ============================================================
   Weppy.Co — style.css  v2.0
   設計書：Weppy.Co_トップページ_デザイン設計書_v2.0.md
   コンセプト：ひと晩（01:00 → 09:00）
   依存ライブラリ ゼロ
   ============================================================ */

@layer reset, tokens, base, layout, component, utility;

/* ============================================================
   reset
   ============================================================ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  html:focus-within { scroll-behavior: smooth; }
  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, a { font: inherit; color: inherit; }
  a { text-decoration: none; }
  ul, ol { padding: 0; list-style: none; }
  blockquote { margin: 0; }
  h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
}

/* ============================================================
   tokens
   ============================================================ */
@layer tokens {
  :root {
    /* --- neutral : night --- */
    --ink-1000:#04060A; --ink-950:#05070C; --ink-900:#0A0F1A; --ink-800:#111827;
    --ink-700:#1B2434;  --ink-600:#2B3648; --ink-500:#4A5668; --ink-400:#6E7B8E;
    --ink-300:#9AA5B4;  --ink-200:#C9D1DB; --ink-100:#E4E9EF; --ink-050:#141C2B;

    /* --- neutral : morning --- */
    --paper:#FCFBF9; --paper-card:#FFFFFF; --paper-warm:#FFF9F4; --paper-violet:#F5F3FA;
    --rule-warm:#E9E4DC; --rule-dot:#D9CFC2; --watermark:#EFE9E0;

    /* --- blue --- */
    --blue-300:#8FB6FF; --blue-500:#4C8DFF; --blue-600:#2E6BE6; --blue-700:#1F4FB5; --cyan-400:#6FE3FF;

    /* --- amber : 街の灯り（v2.0 追加） --- */
    --amber-300:#E8B06A;

    /* --- violet --- */
    --violet-400:#A78BFF; --violet-500:#7B5CFF; --violet-600:#5B3FD6;

    /* --- orange --- */
    --orange-050:#FFF4EC; --orange-100:#FFE4D2; --orange-200:#FFC79C; --orange-300:#FFA66E;
    --orange-500:#FF6A1F; --orange-600:#E2540B; --orange-700:#B8430A; --orange-800:#A83A05; --orange-900:#7A2A03;
    --ink-on-orange:#1A0B02;

    /* --- type --- */
    --font-mincho:  "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
    --font-gothic:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    --font-display: "Archivo", "Noto Sans JP", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-hero:      clamp(3.5rem, 10.4vw, 9.4rem);
    --fs-statement: clamp(2.25rem, 4.6vw, 4.125rem);
    --fs-h2:        clamp(1.75rem, 3.2vw, 2.875rem);
    --fs-h3:        clamp(1.25rem, 2vw, 1.875rem);
    --fs-lead:      clamp(1rem, 1.2vw, 1.0625rem);
    --fs-body:      clamp(.9375rem, 1.1vw, 1rem);
    --fs-small:     .8125rem;
    --fs-label:     .75rem;
    --fs-mono:      .75rem;
    --fs-num-xl:    clamp(2.25rem, 3.6vw, 3.5rem);

    /* --- space --- */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px;
    --sp-6:30px; --sp-7:44px; --sp-8:62px; --sp-9:88px; --sp-10:120px;
    --sp-11:160px; --sp-12:200px;

    --container: 1440px;
    --rail-clock: 0px;
    --rail-tate: 0px;
    --gutter: clamp(20px, 3.2vw, 44px);
    /* 和文の版面。1行 = 42文字。30em（＝30文字）では短い一文が必ず2行に割れ、
       行末に1〜3文字だけ残る「泣き別れ」が page 全体で頻発していた（2026-09-06 修正）。
       和文の可読行長は 35〜45文字が標準。ここを下回らせない。 */
    --measure: 42em;
    --grid-gap: clamp(16px, 1.6vw, 22px);

    --section-py:    clamp(76px, 6.4vw, 114px);
    --section-py-lg: clamp(100px, 8.4vw, 150px);
    --block-gap:     clamp(40px, 4.4vw, 72px);
    --stack-gap:     24px;

    /* --- shape --- */
    --border-hair: 1px;
    --radius-s: 2px; --radius-m: 3px; --radius-l: 5px;
    --shadow-s: 0 1px 2px rgba(17,24,39,.05), 0 6px 18px rgba(17,24,39,.06);
    --shadow-m: 0 10px 34px rgba(255,106,31,.13);
    --shadow-l: 0 20px 64px rgba(122,42,3,.44);
    --glow-blue:   0 0 0 1px rgba(76,141,255,.22), 0 0 46px rgba(76,141,255,.18);
    --glow-violet: 0 0 0 1px rgba(167,139,255,.26), 0 0 52px rgba(167,139,255,.20);

    /* --- motion --- */
    --ease-hard: cubic-bezier(.2,.8,.2,1);
    --ease-out:  cubic-bezier(.16,1,.3,1);
    --ease-soft: cubic-bezier(.33,1,.68,1);
    --ease-dawn: cubic-bezier(.4,0,.1,1);
    --dur-1:160ms; --dur-2:240ms; --dur-3:400ms; --dur-4:560ms; --dur-5:720ms; --dur-dawn:2400ms;

    /* --- semantic defaults (night) --- */
    --bg: var(--ink-950);
    --fg: var(--ink-100);
    --fg-muted: var(--ink-300);
    --fg-dim: var(--ink-400);
    --accent: var(--blue-500);
    --accent-2: var(--amber-300);
    --rule: var(--ink-050);
    --rule-strong: var(--ink-600);
    --mark: var(--amber-300);
    --focus: #FF8640;
    --wm-color: rgba(228,233,239,.085);   /* 3% では黒に沈んで見えない（2026-09-06 修正） */
    --head-font: var(--font-mincho);
    --move: 8px;
    --dur: var(--dur-2);
    --ease: var(--ease-hard);
    --stagger: 40ms;

    /* --- figure --- */
    --grid: rgba(228,233,239,.06);
    --grid-strong: rgba(228,233,239,.16);
    --fig-line: var(--ink-400);
    --fig-line-soft: var(--ink-600);
    --fig-fill: var(--ink-1000);
    --fig-accent: var(--blue-500);
    --fig-accent-soft: rgba(76,141,255,.5);
    --fig-text: var(--ink-300);
    --you: var(--orange-500);
    --peer: var(--orange-300);
    --halo: rgba(255,106,31,.16);

    /* --- clock --- */
    --dial-size: 146px;
    --dial-plate: rgba(4,6,10,.72);
    --dial-rim: #37455C;
    --dial-track: #131B2B;
    --dial-arc: var(--blue-600);
    --dial-ground: #04060A;
    --dial-horizon: #243043;
    --sky-1:#04060A; --sky-2:#070C16; --sky-3:#0A1220; --sky-4:#0C1626;
    --sun-fill:#131B2B; --sun-stroke:#2B3648; --sun-glow-c:#FFD696; --sun-glow-a:0; --sun-glow-a2:0;
    --dial-time: #FFFFFF;
  }

  /* ---- morning scope ---- */
  [data-time="morning"] {
    --bg: var(--paper);
    --fg: var(--ink-800);
    --fg-muted: #48525F;
    --fg-dim: #656F7C;
    --accent: var(--orange-700);
    --accent-2: #7F6A56;
    --rule: var(--rule-warm);
    --rule-strong: var(--rule-dot);
    --mark: #E0CDB8;
    --focus: #D9530C;
    --wm-color: var(--watermark);
    --head-font: var(--font-gothic);
    --move: 20px;
    --dur: var(--dur-4);
    --ease: var(--ease-out);
    --stagger: 80ms;

    --grid: #F2F4F7;
    --grid-strong: #C9D1DB;
    --fig-line: #6E7B8E;
    --fig-line-soft: #DCD3C8;
    --fig-fill: var(--paper-card);
    --fig-accent: var(--orange-700);
    --fig-accent-soft: var(--orange-200);
    --fig-text: #48525F;

    --dial-plate: #FFFFFF;
    --dial-rim: #E5CDB6;
    --dial-track: #F3E7DA;
    --dial-arc: #FF7A2A;
    --dial-ground: #DCBFA0;
    --dial-horizon: #E8CFB4;
    --sky-1:#4E8FD0; --sky-2:#7FB6E4; --sky-3:#BBD9F1; --sky-4:#E4F0FA;
    --sun-fill:#FFB84D; --sun-stroke:#FFA224; --sun-glow-c:#FFD08A; --sun-glow-a:.5; --sun-glow-a2:.16;
    --dial-time: var(--ink-800);
  }

  [data-time="dawn"] {
    --accent: var(--violet-400);
    --mark: var(--amber-300);
    --dial-arc: var(--violet-400);
    --dial-rim: #5A5182;
    --dial-track: #2A2440;
    --sky-1:#16182E; --sky-2:#3A3560; --sky-3:#8B6A7A; --sky-4:#F6DEC0;
    --dial-ground:#0C1017; --dial-horizon:#8B7A90;
    --sun-fill:#FFE0B0; --sun-stroke:#FFE0B0; --sun-glow-c:#FFD696; --sun-glow-a:.85; --sun-glow-a2:.3;
    --dial-plate: rgba(11,10,22,.5);
  }

  @media (min-width: 600px) { :root { --rail-tate: 78px; } }
  /* 900〜1279px は時計が右下に居る。レーンを空けて本文と重ねない。
     1280px 以上は右レールに時計そのものが乗る。 */
  @media (min-width: 900px) and (max-width: 1279px) { :root { --rail-clock: 150px; } }
  @media (min-width: 1280px) { :root { --rail-clock: 210px; --dial-size: 146px; } }
}

/* ============================================================
   base
   ============================================================ */
@layer base {
  html { background: var(--ink-1000); }
  body {
    margin: 0;
    background: var(--ink-1000);
    color: var(--ink-100);
    font-family: var(--font-gothic);
    font-size: var(--fs-body);
    line-height: 1.95;
    letter-spacing: .03em;
    overflow-x: hidden;
  }
  ::selection { background: var(--orange-500); color: var(--ink-on-orange); }
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: inherit;
  }
  /* ---- 和文の折り返し（設計書 §5 和文組版のルール 6）----
     ・auto-phrase … 文節で折る。「AIを単なる便利／なツール」「もっと言えば、あな／たが」のような
       語中での泣き別れを止める。Chrome/Edge が対応、非対応ブラウザは normal に落ちるだけ。
     ・pretty      … 最終行に1〜2字だけ残る行を避ける。
     ・strict      … 小書き仮名・長音を行頭に置かない（日本語の禁則を厳しく取る）。 */
  :where(p, li, dt, dd, figcaption, blockquote, h1, h2, h3, h4) {
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: pretty;
  }
  /* 599以下は文節でぶった切ると短い行が立つ。幅の端まで流してから折る */
  @media (max-width: 599px) {
    :where(p, li, dt, dd, figcaption, blockquote, h1, h2, h3, h4) {
      word-break: normal;
      text-wrap: wrap;
    }
  }

  .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
  .en   { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label);
          letter-spacing: .28em; color: var(--accent-2); }
  .en-in{ font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--orange-800); color: #fff; padding: 12px 20px;
  }
  .skip:focus { left: 0; }
  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ============================================================
   layout — 8つの型
   ============================================================ */
@layer layout {

  .sec {
    position: relative;
    background: var(--bg);
    color: var(--fg);
    padding-block: var(--section-py);
    padding-inline: calc(var(--gutter) + var(--rail-tate)) calc(var(--gutter) + var(--rail-clock));
    overflow: hidden;
    isolation: isolate;
  }
  .sec--s03, .sec--s08, .sec--cta { padding-block: var(--section-py-lg); }

  /* ① stage ------------------------------------------------ */
  .sec--hero {
    min-height: 100svh;
    display: grid; align-content: center;
    padding-block: 0;
    background: var(--ink-1000);
  }
  .sec--cta { display: grid; place-items: center; min-height: 92svh; text-align: center; }

  /* ② column-photo ----------------------------------------- */
  .s01__grid, .s05__grid {
    display: grid; gap: var(--block-gap);
    grid-template-columns: 1fr;
    align-items: start;
  }
  @media (min-width: 900px) {
    /* lg。写真＋本文の横並び。見出し折り返しより、900px でも柱を崩さない方を取る */
    .s01__grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(24px, 2.4vw, 44px); }
    .s05__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 3vw, 54px); }
  }
  .s01__col > * + * { margin-top: var(--stack-gap); }
  .s05__col > * + * { margin-top: var(--stack-gap); }

  /* ③ sticky-split ----------------------------------------- */
  .split { display: grid; gap: var(--block-gap); grid-template-columns: 1fr; margin-top: var(--sp-7); }
  @media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
    .split__fig { position: sticky; top: 22vh; }
  }
  .split__list { display: flex; flex-direction: column; }
  .split__list li {
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
    border-bottom: 1px dotted var(--rule-strong);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    position: relative;
  }
  .split__list li::before {
    content: ""; position: absolute; left: 0; top: 1.5em;
    width: 8px; height: 1px; background: var(--accent);
  }

  /* ④ statement -------------------------------------------- */
  .stmt {
    font-family: var(--head-font);
    font-weight: 700;
    font-size: var(--fs-statement);
    line-height: 1.68;
    letter-spacing: .04em;
    text-align: center;
    font-feature-settings: "palt" 1;
  }

  /* ⑤ figure-annotated ------------------------------------- */
  .fig { position: relative; }
  .fig svg { width: 100%; height: auto; }
  .fig--frame {
    border: 1px solid var(--rule); border-radius: var(--radius-l);
    background: var(--fig-fill);
    /* 四隅の「」は外から 24px。中身がそこからはみ出さないよう、罫の内側に収める */
    padding: 32px;
  }
  /* SVG のテキストは viewBox の拡大率で一緒に縮む。1340 幅の図版が 328px に入ると
     11px の指定が実効 2.7px になり、事実上読めない（2026-09-07 実測・修正）。
     JS が各 svg に実際の縮小率 --fig-scale を入れ、ここで割り戻して
     どの画面幅でも一定の CSS px で表示させる。JS が無い場合は .72 で近似する。 */
  .fig svg { --fig-scale: .72; }
  .figlab   { font-family: var(--font-mono); font-size: calc(12px / var(--fig-scale)); fill: var(--fig-text); letter-spacing: .16em; }
  .figlab--mark { fill: var(--fig-accent); font-weight: 700; }
  .figlab--en   { fill: var(--fig-line-soft); letter-spacing: .14em; font-size: calc(11px / var(--fig-scale)); }
  .fignode  { font-family: var(--font-gothic); font-size: calc(12.5px / var(--fig-scale)); fill: var(--fig-text); }
  .figyou   { font-family: var(--font-mono); font-size: calc(11px / var(--fig-scale)); fill: #fff; letter-spacing: .1em; }
  /* 塗りの明るいノードに置く YOU。白のままだと朝の面（白い丸）で消える */
  .figyou--ghost { fill: var(--fig-text); }
  /* 仲間のノード。淡いオレンジ地なので白は乗らない（1.92:1）。濃いオレンジで抜く（5.06:1） */
  .figyou--peer { fill: var(--orange-900); font-size: calc(10px / var(--fig-scale)); }
  /* ---- 図版の言葉は SVG の外に出す ----
     SVG 内の text は viewBox の縮尺で伸縮するため、読める大きさにすると図が窮屈になり、
     「丸の横にラベル」というパワポの絵面になる。図版は絵だけを持ち、
     言葉は HTML 側でページ本来の級数で組む（2026-09-07 改訂）。
     SVG に残してよいのは、図の部品そのものである短い語（YOU / 軸足 / UPDATE）だけ。 */
  /* 図そのものを説明する一行は、罫の「上」＝絵の直下に置く。
     罫の下は、その図から言えること（結び）だけにする。 */
  .fignote {
    margin: 10px 0 0; padding-inline: 8px;
    font-size: 12.5px; line-height: 1.8; color: var(--fg-dim);
  }
  /* 図版の上に重ねる見出し。罫で仕切ると表のヘッダーに見えるので、
     枠も罫も持たせず、図の余白へ直接置く（2026-09-07 修正）。 */
  .fighd {
    position: absolute; z-index: 2; left: 0; right: 0; top: 18px; margin: 0;
    text-align: center;
    font-family: var(--head-font); font-weight: 700;
    font-size: var(--fs-lead); line-height: 1.6; letter-spacing: .04em;
    color: var(--fig-accent);
  }
  @media (max-width: 560px) { .fighd { top: 12px; } }
  .figcap { display: block; margin-top: 16px; color: var(--fig-text); }
  .figcap__t {
    display: block; font-family: var(--head-font); font-weight: 700;
    font-size: var(--fs-lead); line-height: 1.6; letter-spacing: .04em; color: var(--fg);
  }
  .figcap__t--mark, .figcap__col--mark .figcap__t { color: var(--fig-accent); }
  .figcap__en {
    display: block; margin-top: 5px; font-size: 10px;
    letter-spacing: .2em; color: var(--fig-line-soft);
  }
  .figcap__l { display: block; margin-top: 10px; font-size: var(--fs-small); line-height: 1.85; }
  .figcap__n { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.8; color: var(--fg-dim); }
  .figcap--stack { display: flex; flex-direction: column; gap: 4px; }
  .figcap--stack .figcap__n { margin-top: 0; }
  .figcap--c { text-align: center; align-items: center; }
  .figcap--split { display: grid; gap: 22px; }
  @media (min-width: 720px) {
    .figcap--split { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 52px); }
  }
  /* 枠のある図版は、罫で区切って同じ板の中に収める */
  .fig--frame .figcap, .fig--net .figcap {
    margin-top: 14px; padding: 15px 8px 4px; border-top: 1px solid var(--rule);
  }
  /* 599以下：F-01 は図を縦に積み、「これまで」を図の上、「これから」を図の下へ。
     余白は .fig--frame の 32px のまま（四隅の「」は外から 24px。中身はその内側） */
  @media (max-width: 599px) {
    [data-asset="F-01"] .f01-cap--before {
      margin-top: 0; margin-bottom: 12px; padding: 0 8px 14px;
      border-top: 0; border-bottom: 1px solid var(--rule);
    }
    [data-asset="F-01"] .f01-cap--after { margin-top: 14px; }
  }
  /* 600以上は DOM 順（これまで→図→これから）を、図の下に2キャプションへ戻す */
  @media (min-width: 600px) {
    [data-asset="F-01"] {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas:
        "svg"
        "before"
        "after";
    }
    [data-asset="F-01"] > .cnr { grid-area: 1 / 1 / -1 / -1; }
    [data-asset="F-01"] > svg {
      grid-area: svg;
      border-bottom: 1px solid var(--rule);
    }
    [data-asset="F-01"] .f01-cap {
      border-top: 0;
      margin-top: 0;
    }
    [data-asset="F-01"] .f01-cap--before { grid-area: before; }
    [data-asset="F-01"] .f01-cap--after { grid-area: after; }
  }
  @media (min-width: 720px) {
    [data-asset="F-01"] {
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(24px, 3vw, 52px);
      grid-template-areas:
        "svg svg"
        "before after";
    }
  }

  /* ⑥ grid-dense ------------------------------------------- */
  /* 「例えば・・・」直下。全幅で 30px 詰める */
  .board {
    display: grid;
    column-gap: var(--grid-gap);
    row-gap: calc(var(--grid-gap) + 20px);
    grid-template-columns: 1fr;
    margin-top: calc(var(--sp-8) - 30px);
  }
  @media (min-width: 700px)  { .board { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1100px) { .board { grid-template-columns: repeat(4, minmax(0,1fr)); } }

  .cards { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-top: var(--sp-7); }
  @media (min-width: 640px)  { .cards--6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1000px) { .cards--6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  /* 3つ横に並ぶので、箱の高さは揃える（中身の量が違っても下端を合わせる） */
  .offers { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-top: var(--sp-7); align-items: stretch; }
  @media (min-width: 1100px) { .offers { grid-template-columns: 1.12fr 1fr 1fr; } }

  /* ⑦ showcase --------------------------------------------- */
  .works { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; margin-top: var(--sp-6); }
  @media (min-width: 760px)  { .works { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1100px) { .works { grid-template-columns: repeat(3, minmax(0,1fr)); } }

  /* ⑧ ledger ----------------------------------------------- */
  .ledger { display: grid; gap: var(--block-gap); grid-template-columns: 1fr; margin-top: var(--sp-8); }
  @media (min-width: 900px) { .ledger { grid-template-columns: 1.62fr 1fr; gap: clamp(26px,3vw,52px); } }

  /* --- s06 --- */
  .s06__grid { display: grid; gap: var(--block-gap); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 1000px) { .s06__grid { grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); } }
  #netFig { width: 100%; max-width: 500px; justify-self: center; }
  .s06__col > * + * { margin-top: var(--stack-gap); }
  /* セクションの締め。グリッドの外に出して全幅で組む（1行に収める） */
  .s06__close { margin-top: var(--sp-8); }
  .s06__close > * + * { margin-top: var(--stack-gap); }
  .s06__close .pull { max-width: none; }
}

/* ============================================================
   component — 意匠 と パーツ
   ============================================================ */
@layer component {

  /* ---------- header ---------- */
  .hdr {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    height: 66px; display: flex; align-items: center; justify-content: space-between;
    padding-inline: var(--gutter);
    background: rgba(4,6,10,.72);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(43,54,72,.5);
    transition: background var(--dur-3) linear, border-color var(--dur-3) linear;
  }
  .hdr[data-on="morning"] { background: rgba(252,251,249,.82); border-bottom-color: var(--rule-warm); }
  .hdr[data-on="cta"]     { background: rgba(168,58,5,.86);   border-bottom-color: rgba(255,255,255,.18); }

  .hdr__l { display: flex; align-items: center; gap: 18px; min-width: 0; }
  .hdr__brand { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: #fff; }
  .hdr__brand span { color: var(--orange-500); }
  .hdr[data-on="morning"] .hdr__brand { color: var(--ink-800); }
  .hdr[data-on="cta"] .hdr__brand span { color: #FFD9BE; }
  .hdr__sep { width: 1px; height: 14px; background: var(--ink-700); }
  .hdr__tag {
    font-family: var(--font-mincho); font-weight: 600; font-size: 12px;
    letter-spacing: .16em; color: var(--ink-400); white-space: nowrap;
  }
  .hdr[data-on="morning"] .hdr__tag { color: #7A8592; }
  .hdr[data-on="cta"] .hdr__tag, .hdr[data-on="cta"] .hdr__lnk { color: rgba(255,255,255,.86); }
  /* 英字ラベルは面が変わると沈む。夜の --ink-500 のままにしない（F6 再発防止） */
  .hdr[data-on="cta"] .hdr__lnk .mono { color: rgba(255,255,255,.62); }
  .hdr[data-on="morning"] .hdr__lnk .mono { color: #8A7F72; }
  .hdr__r { display: flex; align-items: center; gap: 20px; }
  .hdr__lnk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-300); }
  .hdr__lnk .mono { font-size: 10px; letter-spacing: .16em; color: var(--ink-500); }
  .hdr[data-on="morning"] .hdr__lnk { color: #48525F; }
  .hdr__lnk:hover { color: var(--orange-300); }
  .hdr__join {
    border: 1px solid var(--ink-500); border-radius: var(--radius-s);
    padding: 9px 20px; font-size: 13px; color: var(--ink-200);
    transition: background var(--dur-1), color var(--dur-1), border-color var(--dur-1);
  }
  .hdr__join:hover { background: var(--orange-500); border-color: var(--orange-500); color: var(--ink-on-orange); }
  .hdr[data-on="morning"] .hdr__join { border-color: var(--orange-700); color: var(--orange-700); }
  .hdr[data-on="cta"] .hdr__join { background: #fff; border-color: #fff; color: var(--orange-800); font-weight: 700; }
  @media (max-width: 720px) { .hdr__sep, .hdr__tag, .hdr__lnk .mono { display: none; } }
  @media (max-width: 520px) { .hdr__r { gap: 12px; } .hdr__join { padding: 8px 14px; } }

  /* ---------- clock : THE SKY DIAL ---------- */
  .dial {
    position: fixed; z-index: 30;
    /* --dial-park は「CTAボタンの高さで止める」ための持ち上げ量（JS が入れる） */
    right: max(16px, calc(var(--gutter) - 8px)); top: 50%;
    transform: translateY(calc(-50% - var(--dial-park, 0px)));
    display: flex; align-items: center; gap: 14px;
    pointer-events: none;
  }
  .dial__rail { display: flex; flex-direction: column; align-items: center; gap: 11px; height: 150px; }
  .dial__rail::before { content: ""; width: 1px; height: 20px; background: var(--rule-strong); }
  .dial__tick { display: none; }
  .dial__name {
    display: flex; flex-direction: column; align-items: center; gap: .34em;
    font-family: var(--head-font); font-weight: 700; font-size: 14px; color: var(--fg-muted);
    flex: none;
  }
  .dial__name i { font-style: normal; line-height: 1; }
  .dial__line { flex-grow: 1; width: 1px; background: var(--rule-strong); }
  .dial__body { display: flex; flex-direction: column; align-items: center; gap: 11px; }
  .dial__face svg { width: var(--dial-size); height: var(--dial-size); }
  .dial__face { transition: transform 900ms var(--ease-out), filter 900ms var(--ease-out); }
  .dial.is-sunrise .dial__face { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(167,139,255,.6)); }
  .dial__time {
    font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .02em;
    color: var(--dial-time);
    transition: color var(--dur-3) var(--ease-out), text-shadow var(--dur-3) var(--ease-out);
  }
  /* 09:00 ちょうど。時刻だけ白に抜いて「着いた」ことを示す */
  .dial.is-nine .dial__time { color: #FFFFFF; text-shadow: 0 0 22px rgba(0,0,0,.22); }
  .dial__range { display: flex; align-items: center; gap: 8px; font-size: 9.5px; letter-spacing: .2em; color: var(--fg-dim); }
  .dial__range span { width: 14px; height: 1px; background: var(--rule-strong); }
  .sec--hero ~ * { }
  /* CTA はオレンジ一色の面。時計まわりの文字と罫を朝のトークン（濃いグレー）のままにすると沈む。 */
  body[data-at="cta"] .dial__name,
  body[data-at="cta"] .dial__range { color: rgba(255,255,255,.82); }
  body[data-at="cta"] .dial__rail::before,
  body[data-at="cta"] .dial__line,
  body[data-at="cta"] .dial__range span { background: rgba(255,255,255,.42); }

  body[data-at="hero"] .dial { --dial-size: 212px; }
  body[data-at="hero"] .dial__time { font-size: 42px; }
  @media (max-width: 1279px) {
    /* 右レールが確保できない幅では右下へ回すが、大きさは 1280px 以上と同じ 146px を保つ。
       盤面が本文に重なるため、下から立ち上がる暗幕（scrim）を敷いて層として見せる。 */
    .dial {
      right: max(14px, calc(var(--gutter) - 10px)); bottom: 34px; top: auto;
      transform: translateY(calc(-1 * var(--dial-park, 0px)));
      gap: 10px; flex-direction: column; align-items: center;
    }
    .dial__rail, .dial__range { display: none; }
    .dial__name { display: none; }
    /* 下に本文が来たときの逃げ。色を敷くと地のグラデーションと合わずに輪が出るので、
       色は一切置かず「ぼかしだけ」を円形マスクで抜く。縁が出ない。 */
    .dial::before {
      content: ""; position: absolute; z-index: -1;
      left: -40px; right: -40px; top: -34px; bottom: -30px;
      backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
      -webkit-mask-image: radial-gradient(closest-side at 50% 46%, #000 0%, #000 52%, transparent 100%);
      mask-image: radial-gradient(closest-side at 50% 46%, #000 0%, #000 52%, transparent 100%);
    }
    .dial__body { gap: 8px; }
    .dial__time { font-size: 26px; }
    body[data-at="hero"] .dial { --dial-size: 146px; }
    body[data-at="hero"] .dial__time { font-size: 26px; }
  }
  @media (max-width: 599px) {
    .dial { --dial-size: 118px; right: 10px; bottom: 30px; }
    .dial::before { left: -30px; right: -26px; top: -26px; bottom: -22px; }
    .dial__time { font-size: 22px; }
    body[data-at="hero"] .dial { --dial-size: 118px; }
    body[data-at="hero"] .dial__time { font-size: 22px; }
  }

  /* ---------- 意匠 : 見出しシステム ---------- */
  .hd { max-width: 46rem; }
  .hd--wide { max-width: none; }
  .hd--center { text-align: center; margin-inline: auto; max-width: 50rem; }
  .hd--sub { margin-top: var(--sp-8); }
  .hd .en { display: block; margin-top: 14px; }
  .hd .en:first-child { margin-top: 0; }
  /* 599px 以下で出す横書きラベル。デスクトップでは非表示なので、英字の上余白は従来どおり 0。 */
  .hd__tate { display: none; }
  .hd .hd__tate + .en { margin-top: 0; }
  .hd h2, .hd h3 {
    font-family: var(--head-font); font-weight: 700;
    font-size: var(--fs-h2); line-height: 1.5; letter-spacing: .01em;
    margin-top: 12px; color: var(--fg);
    font-feature-settings: "palt" 1;
  }
  .hd h3 { font-size: var(--fs-h3); }
  .hd .lead {
    font-size: var(--fs-lead); line-height: 2.0; color: var(--fg-muted);
    margin-top: 20px; max-width: 42em;   /* 本文と同じ 42字。32em は狭すぎて泣き別れが出る */
  }
  .hd--center .lead { margin-inline: auto; }

  /* 599px 以下：左レーンの縦書きを、見出しの上へ横書きで移す */
  @media (max-width: 599px) {
    .hd__tate {
      display: flex; align-items: center; gap: 12px;
      font-family: var(--head-font); font-weight: 700; font-size: 20px;
      letter-spacing: .06em; color: var(--fg);
    }
    .hd__tate .mono {
      font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--accent);
    }
    .hd__tate i {
      display: block; width: 22px; height: 2px; background: var(--accent); flex: none;
    }
    .hd .hd__tate + .en { margin-top: 48px; }
    .hd--center .hd__tate { justify-content: center; }
    .hero__type > .hd__tate { margin-bottom: 52px; color: var(--ink-100); }
    .dawn .hd__tate { color: #fff; }
    .dawn .hd__tate .mono { color: var(--amber-300); }
    .dawn .hd__tate i { background: var(--amber-300); }
    .sec--cta .hd__tate {
      justify-content: center; color: #fff; font-size: 20px; margin-bottom: 52px;
    }
    /* 実幅 375px（スクロールバー込みだと本文が 335px を切る）で
       「AIに仕事を奪われる現実。」を1行に収める。376px で測らない。 */
    #s01 .hd h2 { font-size: 25px; }
    #s01 .hd__keep { white-space: nowrap; }
    #s01 .pull--blue br { display: none; }
    /* 375px で「作って」の「て」が br の前に落ちる。少し下げて1行目に残す */
    #s04 .hd h2 { font-size: 26px; }
    /* 375px で「広げること」の「と」が落ちる */
    #s08 .hd h2 { font-size: 26px; }
  }

  /* 三分割罫 */
  .rule3 { display: flex; align-items: center; gap: 0; margin-top: 22px; }
  .rule3 i { display: block; height: 2px; background: var(--accent); }
  .rule3 i:nth-child(1) { width: 44px; margin-right: 6px; }
  .rule3 i:nth-child(2) { width: 6px;  margin-right: 5px; background: var(--mark); }
  .rule3 i:nth-child(3) { width: 2px;  background: var(--mark); }
  .rule3--c { justify-content: center; }
  .rule3--c i:nth-child(1) { width: 2px; margin-right: 5px; background: var(--mark); }
  .rule3--c i:nth-child(2) { width: 6px; margin-right: 6px; background: var(--mark); }
  .rule3--c i:nth-child(3) { width: 44px; margin-right: 6px; background: var(--accent); }
  .rule3--c i:nth-child(4) { width: 6px; margin-right: 5px; background: var(--mark); }
  .rule3--c i:nth-child(5) { width: 2px; background: var(--mark); }

  /* 二重罫 */
  .rule2 i { display: block; height: 1px; background: var(--fg); }
  .rule2 i:first-child { margin-bottom: 3px; }

  /* 縦書きサイドラベル */
  .tate {
    position: absolute; left: var(--gutter); top: clamp(80px, 9vw, 130px);
    display: none; flex-direction: column; align-items: center; gap: 13px;
    height: 300px; z-index: 2;
  }
  @media (min-width: 600px) { .tate { display: flex; } }
  .tate .mono { font-size: 15px; font-weight: 700; letter-spacing: .12em; color: var(--accent); }
  .tate__t { width: 2px; height: 26px; background: var(--accent); }
  /* 縦書きは writing-mode に頼らず1文字ずつ積む。
     vertical-rl はフォントの縦書きメトリクスに依存し、Webフォントが落ちてこないと
     字送りが 0 になって文字が重なるため。 */
  .tate__w {
    display: flex; flex-direction: column; align-items: center; gap: .34em;
    font-family: var(--head-font); font-weight: 700; font-size: 19px; color: var(--fg-muted);
    flex: none;
  }
  .tate__w i { font-style: normal; line-height: 1; font-feature-settings: "palt" 0; }
  .tate__l { flex-grow: 1; width: 1px; background: linear-gradient(180deg, var(--rule-strong), transparent); }

  /* 透かし数字 */
  .wm {
    /* z-index: 0 だと「配置済み要素」として静的な見出しより後に描かれ、
       透かしが見出しの上に乗って文字を食う（.sec は isolation:isolate なので -1 で地の上・本文の下に入る）。 */
    position: absolute; z-index: -1; pointer-events: none; user-select: none;
    font-family: var(--font-display); font-weight: 800; line-height: .8;
    font-size: clamp(140px, 19vw, 270px); letter-spacing: -.05em; color: var(--wm-color);
    left: clamp(200px, 36vw, 560px); top: 26px;
  }
  /* s01 だけ：写真 < 透かし < 本文。component 層に置く（layout 層だと .wm の -1 に負ける）。 */
  .s01__photo { z-index: 0; width: 100%; max-width: 360px; justify-self: center; }
  .sec--s01 > .wm { z-index: 1; }
  .s01__col, .s01__b, .s01__c { position: relative; z-index: 2; }
  .wm--r { left: auto; right: 60px; top: 14px; font-size: clamp(120px,16vw,230px); }
  /* s06 は右半分が不透明な図版カードなので、既定位置（左 36vw）だと数字がカードの下に隠れる。
     見出しの背面へ寄せる（2026-09-06 修正）。 */
  .wm--l { left: clamp(24px, 4vw, 74px); top: 54px; }
  .wm--dawn { left: 80px; top: 44%; color: rgba(255,255,255,.075); }
  .wm--cta { left: 60px; top: auto; bottom: -40px; color: rgba(255,255,255,.085); }

  /* 隅取り */
  .cnr { position: absolute; width: 12px; height: 12px; z-index: 3; pointer-events: none; }
  .cnr--tl { left: 24px; top: 24px;  border-left: 1px solid var(--mark); border-top: 1px solid var(--mark); }
  .cnr--tr { right: 24px; top: 24px; border-right: 1px solid var(--mark); border-top: 1px solid var(--mark); }
  .cnr--bl { left: 24px; bottom: 24px;  border-left: 1px solid var(--mark); border-bottom: 1px solid var(--mark); }
  .cnr--br { right: 24px; bottom: 24px; border-right: 1px solid var(--mark); border-bottom: 1px solid var(--mark); }

  /* テクスチャ。写真スロットには重ねない（粒子が怖い絵になる） */
  .grain {
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 3px 3px;
  }
  .hero__media > .grain,
  .ph > .grain,
  .offer__vis > .grain { display: none; }
  [data-time="morning"] { background-image: repeating-linear-gradient(92deg, rgba(184,67,10,.032) 0 1px, transparent 1px 4px); }

  /* ---------- 本文 ---------- */
  .body { font-size: var(--fs-body); line-height: 1.95; color: var(--fg-muted); max-width: var(--measure); }
  .body--em { color: var(--fg); font-weight: 500; }
  .body--note { font-size: var(--fs-small); color: var(--fg-muted); }
  .body--center { margin-inline: auto; text-align: center; max-width: 40em; }
  /* 30em の版面を外す例外。3つの句が並ぶ一息の文で、
     途中で折り返すと「戸惑い／不安／焦り」の並びが切れるため（設計書 §9.1）。 */
  .body--wide { max-width: none; }
  .sec > .body + .body { margin-top: var(--stack-gap); }

  .pull {
    border-left: 2px solid var(--accent); padding-left: 20px;
    font-family: var(--head-font); font-weight: 700;
    font-size: clamp(1.125rem, 1.9vw, 1.4375rem); line-height: 1.9; letter-spacing: .04em;
    color: var(--fg); max-width: 40em;
  }
  .pull p + p { margin-top: 1em; }
  .pull--blue { border-color: var(--blue-700); }
  .pull--c { border-left: 0; text-align: center; padding: 0; margin-inline: auto; }
  .pull--c::before, .pull--c::after { content: ""; display: block; width: 34px; height: 1px; background: var(--rule-strong); margin: 22px auto; }
  .s08-pull-br { display: none; }
  @media (max-width: 599px) {
    .s08-pull-br { display: revert; }
  }

  .close {
    font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(1.25rem, 2.2vw, 1.875rem); line-height: 1.7; color: var(--fg);
    margin-top: var(--sp-7);
  }

  .between { display: flex; align-items: center; gap: 18px; margin-top: var(--sp-6); }
  .between i { flex-grow: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--rule-strong) 0 2px, transparent 2px 5px); }
  .between span { font-size: var(--fs-lead); color: var(--fg-muted); text-align: center; }
  .between b { color: var(--orange-700); }
  @media (max-width: 700px) { .between i { display: none; } }
  @media (max-width: 599px) {
    .between span { text-align: left; }
    #s04 > .body--center,
    #s08 > .body--center { text-align: left; margin-inline: 0; }
    #s04 > .body--center br,
    #s08 > .body--center br { display: none; }
  }

  /* シーン1のあいだページを送らせない。スクロールバーの消失で幅が飛ばないよう
     gutter を確保しておく（ロック中も本文の行長が変わらない）。 */
  html { scrollbar-gutter: stable; }
  html.hero-lock, html.hero-lock body { overflow: hidden; }

  /* ---------- HERO ---------- */
  .hero__media { position: absolute; inset: 0; z-index: 0; background: radial-gradient(130% 95% at 44% 66%, #0D1526 0%, #070B13 50%, #04060A 100%); }
  .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
  /* 実写 P-01 に窓外の灯りがあるので、CSS の街ブロックは重ねない */
  .hero__city { display: none; }
  .hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(4,6,10,.92) 0%, rgba(4,6,10,.72) 38%, rgba(4,6,10,.22) 64%, rgba(4,6,10,.34) 100%);
    box-shadow: inset 0 0 200px 74px #04060A;
  }
  .hero__type { position: relative; z-index: 2; padding-inline: clamp(20px, 6vw, 118px); padding-block: 120px 0; max-width: 900px; }
  .hero__logo {
    font-family: var(--font-display); font-weight: 800; font-size: var(--fs-hero);
    line-height: .92; letter-spacing: -.045em; color: #fff; margin-top: 14px;
    text-shadow: 0 0 100px rgba(76,141,255,.26);
  }
  .hero__logo span { color: var(--orange-500); }
  /* ================================================================
     HERO は二場面（2026-09-08 改訂）
       シーン1「問いかけ」… 画面いっぱいのタイトルカード。他のUIは出さない
       シーン2「名乗り」  … シーン1のあとに来て、ここで止まる（ループしない）
     ★ 時間で消さない。読み終わるまで待ち、最初のスクロールで送る。
        50字を4秒で引っ込めると読み切れない。送る権利は読者に渡す。
        保険として JS 側に 5.5s のフォールバックだけ置いてある。
     ★ 転換の一語「でも、」を、このページで最初の琥珀にする。
        4:44 の時刻、CTA のオレンジへ繋がる最初の一点。
     ================================================================ */
  /* 尺。1行目が着地してから「でも」まで 2.4秒あける。この沈黙が不安そのもの。
     2行目のあとは何も起こさない。SCROLL の合図は 3秒待ってから、ごく静かに。 */
  :root {
    --hero-t1: 900ms; --hero-t2: 3900ms; --hero-t4: 6200ms; --hero-dur: 1000ms;
    --hero-fs: clamp(1.25rem, 3.6vw, 3.25rem);
    --hero-gap: clamp(24px, 3.4vw, 56px);
  }

  /* --- 部屋を沈める暗幕。シーン1のあいだだけ --- */
  .hero__veil {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    /* 光が画面の下にあるので、暗幕で絵を潰す必要がなくなった。
       上を軽く、下（灯りの帯）をやや強く。文字は空の上に乗る。 */
    background: linear-gradient(180deg, rgba(4,6,10,.20) 0%, rgba(4,6,10,.34) 52%, rgba(4,6,10,.52) 100%);
    /* 抜ける速さがそのまま「明るくなっていく」体感になる。
       ease-out だと 0.3 秒でほぼ終わり、切り替わりに見えて“明るくなった”が残らない。
       前半をゆっくり立ち上げて、2.4 秒かけて開ける。 */
    transition: opacity 1500ms cubic-bezier(.42,.02,.30,1);
  }
  body.hero-open .hero__veil { opacity: 0; }

  /* 遠くが最後に開く。近くの街 → 中景 → 地平線 の順で見えるようにすると、
     「視界が広がった」ではなく「遠くまで見えるようになった」になる。
     地平線の帯だけを覆い、veil より 0.6 秒遅れて、より長く（3.4s）かけて抜ける。 */
  .hero__far {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(180deg,
      rgba(4,6,10,0) 22%, rgba(4,6,10,.30) 36%, rgba(4,6,10,.62) 48%,
      rgba(4,6,10,.54) 58%, rgba(4,6,10,.16) 70%, rgba(4,6,10,0) 80%);
    transition: opacity 2200ms cubic-bezier(.36,.04,.28,1) 320ms;
  }
  body.hero-open .hero__far { opacity: 0; }

  /* --- シーン1：タイトルカード --- */
  .hero__card {
    position: absolute; inset: 0; z-index: 4;
    display: grid; align-content: center; justify-items: center;
    gap: var(--hero-gap);
    padding-inline: var(--gutter); text-align: center; pointer-events: none;
    /* 罫の行（1px＋間隔）が上に積まれるぶん、中央が下へずれる。同じ量を下に足して打ち消す */
    padding-bottom: calc(var(--hero-gap) + 15px);
    transition: opacity 440ms var(--ease-out);
    /* 沈黙のあいだは1行目が画面の中心に来るよう、2行目のぶんだけ下げておく。
       「でも」が現れるのと同時に、本来の中心へ戻る。 */
    animation: heroCenter var(--hero-dur) var(--ease-out) var(--hero-t2) both;
  }
  @keyframes heroCenter {
    from { transform: translateY(calc((var(--hero-fs) * 4.1 + var(--hero-gap)) / 2)); }
    to   { transform: none; }
  }
  body.hero-open .hero__card { opacity: 0; }

  /* 4:44 と同じ意匠。罫が中央から左右へ開いてから言葉が来る */
  .hero__card__rule { display: flex; align-items: center; width: min(78vw, 40em); gap: 0; margin: 0 0 clamp(6px,1vw,14px); }
  .hero__card__rule i {
    flex: 1 1 0; height: 1px; min-width: 0;
    background: linear-gradient(90deg, transparent, rgba(232,176,106,.5));
    transform: scaleX(0); transform-origin: 100% 50%;
    animation: heroRule 1500ms var(--ease-out) 150ms forwards;
  }
  .hero__card__rule i:last-child {
    background: linear-gradient(90deg, rgba(232,176,106,.5), transparent);
    transform-origin: 0 50%;
  }
  @keyframes heroRule { to { transform: none; } }

  .hero__card p:not(.hero__card__rule):not(.hero__card__go) {
    font-family: var(--font-mincho); font-weight: 600;
    font-size: var(--hero-fs);
    line-height: 2.05; letter-spacing: .1em;
    max-width: 34em; margin: 0; opacity: 0;
    text-shadow: 0 0 44px rgba(4,6,10,.9);
  }
  /* 1行目。かつて blur で「未来が見えない」を演じていたが、読ませる文字を
     3秒ぼかすのは、目を酷使している読み手への負荷でしかない。演出より可読性を取る。
     「見えない」は言葉が言っているので、字は最初から像を結んでいてよい。 */
  .hero__card__a {
    color: var(--ink-200);
    animation: heroLine var(--hero-dur) var(--ease-out) var(--hero-t1) forwards;
  }
  .hero__card__b { color: #FFFFFF;        animation: heroLine var(--hero-dur) var(--ease-out) var(--hero-t2) forwards; }
  /* ロゴの .Co と同じオレンジ。ここに全部を注ぐ一語なので、夜の琥珀ではなく
     ブランドの色そのものを当てる。ファーストビューで「Weppy.Co の色」が一度で決まる。
     朝の色を先に使うことになるが、この一語の強さを優先する。夜空に対して 6.69:1。 */
  .hero__card__b em {
    font-style: normal; color: var(--orange-500);
    text-shadow: 0 0 28px rgba(255,106,31,.42);
  }
  @keyframes heroLine {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }

  /* 送り方を伝える。押しつけない小ささで */
  .hero__card__go {
    position: absolute; left: 0; right: 0; bottom: clamp(30px, 5.5vh, 70px);
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    margin: 0; opacity: 0;
    animation: heroLine 900ms var(--ease-out) var(--hero-t4) forwards;
  }
  .hero__card__go .mono { font-size: 9.5px; letter-spacing: .3em; color: var(--ink-400); }
  .hero__card__go i { display: block; width: 1px; height: 34px;
    background: linear-gradient(180deg, var(--ink-500), transparent); }

  /* シーン1→2で背景を動かすのは取りやめ。寄りから引くと「開いた」ではなく
     「別の画像に変わった」に見える。開くのは光だけでやる（.hero__far）。 */

  /* --- シーン2：名乗り ---
     以前は5要素をひと塊で、blur(8px) から 620ms で出していた。塊で動くと
     「ブロックが差し替わった」に見えるし、blur は文字にかけない方針で外した。
     順に置いていく。動く距離を 16px → 9px に詰め、時間を 620 → 940ms に伸ばす。
     距離を減らして時間を延ばすと、速度が落ちて動きが目に留まらなくなる ＝ 上品になる。 */
  .hero__scene2 > * {
    opacity: 0; transform: translateY(9px);
    transition: opacity 940ms cubic-bezier(.22,.68,.16,1) var(--d, 0ms),
                transform 940ms cubic-bezier(.22,.68,.16,1) var(--d, 0ms);
  }
  .hero__scene2 > .hd__tate  { --d:  60ms; }
  .hero__scene2 > .hero__kw  { --d: 160ms; }
  /* ロゴだけ少し遅らせて、少し長く。ここが名乗りの本体なので、最後に据わる */
  .hero__scene2 > .hero__logo { --d: 300ms;
    transition-duration: 1120ms; transform: translateY(12px); }
  .hero__scene2 > .rule3     { --d: 560ms; }
  .hero__scene2 > .hero__sub { --d: 660ms; }
  body.hero-open .hero__scene2 > * { opacity: 1; transform: none; }

  /* 罫は上がってくるのではなく、引かれる。3本が左から順に伸びる */
  .hero__scene2 > .rule3 i {
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 700ms cubic-bezier(.22,.68,.16,1);
  }
  .hero__scene2 > .rule3 i:nth-child(1) { transition-delay: 600ms; }
  .hero__scene2 > .rule3 i:nth-child(2) { transition-delay: 780ms; }
  .hero__scene2 > .rule3 i:nth-child(3) { transition-delay: 880ms; }
  body.hero-open .hero__scene2 > .rule3 i { transform: none; }

  /* --- シーン1のあいだは他のUIを出さない。名乗りと一緒に戻る --- */
  .sec--hero .tate, .sec--hero .scroll, .sec--hero .cnr, .hdr {
    opacity: 0; transition: opacity 560ms var(--ease-out) 220ms;
  }
  body.hero-open .sec--hero .tate, body.hero-open .sec--hero .scroll,
  body.hero-open .sec--hero .cnr, body.hero-open .hdr { opacity: 1; }
  /* 時計は隠さない。このページ最大の武器で、言葉より先に「ひと晩」を伝える。
     暗闇に 1:00 だけが灯っている状態から始める。 */
  body:has(.hero__card) .dial { animation: heroDial 1400ms var(--ease-out) 200ms both; }
  @keyframes heroDial { from { opacity: 0; } to { opacity: 1; } }

  /* 広い幅では1文＝1行。狭い幅だけ折る位置を指定する
     （auto-phrase が効かない環境があり、放っておくと「ど／こまでも」で割れる） */
  /* 1文を2行に組む。長い1行にすると右の時計に当たり、級数も下げざるを得なくなる。
     2行なら大きいまま置けて、タイトルカードとしても塊で効く。 */
  .hero__card .brsp { display: inline; }

  @media (prefers-reduced-motion: reduce) {
    .hero__veil, .hero__far, .hero__card { display: none; }
    .hero__scene2 > *, .hero__scene2 > .rule3 i { opacity: 1; transform: none; filter: none; transition: none; }
    .sec--hero .tate, .sec--hero .scroll, .sec--hero .cnr, .hdr, .dial { opacity: 1; transition: none; animation: none; }
  }

  .hero__kw {
    font-size: clamp(12px, 1.3vw, 18px); letter-spacing: .16em; color: var(--accent-2);
    display: flex; align-items: baseline; width: fit-content;
  }
  .hero__kw i { font-style: normal; margin-inline: .46em; opacity: .55; }
  .hero__sub {
    font-family: var(--font-mincho); font-weight: 700;
    font-size: clamp(1.0625rem, 2.1vw, 1.875rem); line-height: 1.95; letter-spacing: .1em;
    color: var(--ink-100); margin-top: 26px;
  }
  .hero__sub > span { white-space: nowrap; }
  /* 600px以上は従来どおり「Webクリエイターの」のあとで折る */
  @media (min-width: 600px) {
    .hero__sub br:first-of-type { display: none; }
  }
  /* スマホ。確認基準は 375px。プレビューが 376px 以上でもここが当たる。 */
  @media (max-width: 599px) {
    .hero__sub { font-size: 15.5px; }
  }
  .scroll { position: absolute; left: var(--gutter); bottom: 44px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .scroll .mono { writing-mode: vertical-rl; font-size: 9.5px; letter-spacing: .24em; color: var(--ink-400); flex: none; white-space: nowrap; }
  .scroll i { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, var(--blue-600), transparent); }
  @media (max-width: 900px) { .scroll { display: none; } }

  /* ---------- 写真スロット ---------- */
  .ph { position: relative; overflow: hidden; border-radius: var(--radius-m); }
  .ph > img,
  .offer__vis > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .ph--longshot > img { object-position: 38% 58%; }
  .ph--window > img { object-position: 50% 42%; }
  .offer__vis--night > img { object-position: 18% 72%; }
  .offer__vis--face  > img { object-position: 50% 22%; }
  .offer__vis--warm  > img { object-position: 42% 38%; }

  .ph--longshot {
    aspect-ratio: 4/3.4; background: #04060A;
    container-type: inline-size;
  }
  /* 1600px 幅のとき枠は 360px。inset 180px / 68px はそのときの見え方。
     枠が縮んでも同じ比率になるよう、360 に対する割合で追従させる。 */
  .ph__vig {
    position: absolute; inset: 0; pointer-events: none;
    box-shadow: inset 0 0 calc(180 / 360 * 100cqw) calc(68 / 360 * 100cqw) #04060A;
  }
  .ph__fade { position: absolute; right: 0; top: 0; bottom: 0; width: 32%; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; }
  /* s01 だけ暗幕を弱める。写真が「雰囲気のある暗い部屋」から「並んだ画面」に変わり、
     絵の主題が中央〜左に集まった。180/68 のビネットはその主題ごと食っていた。
     写真自体は明るくしない（黒が浮いて、画面の光が弱くなる）。枠だけを開ける。 */
  .ph--longshot .ph__vig {
    box-shadow: inset 0 0 calc(120 / 360 * 100cqw) calc(34 / 360 * 100cqw) #04060A;
  }

  .ph--window { aspect-ratio: 4/3.2; background: #D8D0C6; }

  /* ---------- s01 ---------- */
  .replaced { position: relative; border: 1px solid var(--ink-050); border-radius: var(--radius-m); padding: 22px 24px 24px; background: rgba(10,15,26,.5); }
  .replaced .cnr { width: 10px; height: 10px; }
  .replaced .cnr--tl { left: 9px; top: 9px; border-color: rgba(232,176,106,.4); }
  .replaced .cnr--br { right: 9px; bottom: 9px; border-color: rgba(232,176,106,.4); }
  .replaced__hd { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
  .replaced__hd .mono { font-size: 9.5px; letter-spacing: .18em; color: var(--ink-400); }
  .replaced__hd i { flex-grow: 1; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-700) 0 2px, transparent 2px 5px); }
  .replaced__n b { color: var(--blue-700); }
  .replaced__list { display: flex; flex-direction: column; gap: 10px; }
  .replaced__list li { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 8px; }
  .replaced__list li .mono { font-size: 10px; color: #8290A4; transition: color var(--dur-2) var(--ease-hard); }
  .replaced__list li span:last-child {
    font-size: 1rem; color: var(--ink-200);
    width: fit-content;   /* 取り消し線を文字幅で止める（セル幅いっぱいに伸ばさない） */
    background-image: linear-gradient(var(--blue-500), var(--blue-500));
    background-repeat: no-repeat; background-position: 0 50%; background-size: 0 1px;
    transition: background-size var(--dur-2) var(--ease-hard), color var(--dur-3) var(--ease-hard);
  }
  /* 消えた後も必ず読める。取り消し線が「奪われた」を語るのであって、
     コントラストを落として語らせない（設計書 F6 の再発防止）。 */
  .replaced__list li.is-gone span:last-child { background-size: 100% 1px; color: #78859A; }
  .replaced__list li.is-gone .mono { color: #6E7B8E; }

  .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
  .chips li {
    font-size: 12.5px; border: 1px solid var(--rule); border-radius: var(--radius-s);
    padding: 5px 11px; color: var(--fg-muted); background: rgba(255,255,255,.02);
  }
  [data-time="morning"] .chips li { background: var(--paper-card); }
  /* AI が「できてしまう」ことのリスト。AI 側がチェックを入れていく感触を出すため、
     冷たい青のチェックマークを CSS で描き、順に灯していく（設計書 §9.1）。 */
  .chips--gen li {
    display: inline-flex; align-items: center; gap: 8px; padding-left: 10px;
    transition: color var(--dur-2), border-color var(--dur-2);
  }
  .chips--gen li::before {
    content: ""; flex: none; width: 5px; height: 9px; margin-top: -3px;
    border-right: 1.6px solid var(--blue-500); border-bottom: 1.6px solid var(--blue-500);
    transform: rotate(42deg) scale(.4); transform-origin: 50% 60%;
    opacity: 0; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
  }
  .chips--gen.is-in li::before { opacity: 1; transform: rotate(42deg) scale(1); }
  .chips--gen.is-in li:nth-child(1)::before { transition-delay: 200ms; }
  .chips--gen.is-in li:nth-child(2)::before { transition-delay: 380ms; }
  .chips--gen.is-in li:nth-child(3)::before { transition-delay: 560ms; }
  .chips--gen.is-in li:nth-child(4)::before { transition-delay: 740ms; }
  .chips--gen.is-in li:nth-child(5)::before { transition-delay: 920ms; }
  @media (prefers-reduced-motion: reduce) {
    .chips--gen li::before { opacity: 1; transform: rotate(42deg); transition: none; }
  }

  .qs, .peers { display: flex; flex-direction: column; margin-top: var(--sp-6); }
  .qs li, .peers li {
    display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: baseline;
    padding: 13px 0; border-bottom: 1px dotted var(--rule-strong);
  }
  .qs li .mono, .peers li .mono { font-size: 9.5px; color: var(--fg-dim); }
  .qs li p, .peers li p { font-size: var(--fs-lead); line-height: 1.8; color: var(--fg); }

  .s01__b, .s01__c { margin-top: var(--sp-9); }
  .s01__c { max-width: none; }
  @media (min-width: 900px) {
    .qs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(24px,3vw,52px); }
    .s01__c__split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(24px,3vw,52px); align-items: start; }
  }
  .s01__c > * + * { margin-top: var(--stack-gap); }
  /* 1列のとき、経歴の下罫に本文が張り付く */
  .s01__c__split > .body--note { margin-top: 20px; }
  @media (min-width: 900px) { .s01__c__split > .body--note { margin-top: 0; } }

  .neg { border-left: 1px solid var(--ink-700); padding-left: 22px; }
  .neg p { font-size: var(--fs-lead); line-height: 1.9; }
  .neg p + p { margin-top: 10px; }
  .neg__off { color: var(--ink-400); }
  .neg__on  { color: var(--ink-100); font-weight: 500; }

  .tl { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
  .tl li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .tl__y { font-size: 22px; font-weight: 700; color: var(--accent); }
  .tl__y em { font-size: 12px; font-style: normal; margin-left: 2px; }
  /* 年のうしろのダッシュ ＝「そこから今も続いている」。数字より一段落として、
     年号そのものの読みを邪魔しない（設計書 §9.1）。 */
  .tl__y i { font-style: normal; margin-left: .1em; opacity: .55; }
  .tl__t { font-size: var(--fs-small); color: var(--fg-muted); }

  /* ---------- s02 ---------- */
  .s02__after, .s02__end { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 10px; }
  .mult { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: 14px; }
  .mult__ops { display: flex; align-items: center; gap: 20px; font-size: 40px; color: var(--ink-600); line-height: 1; }
  .mult__ops b { font-size: 56px; color: var(--orange-500); transform-origin: center; transition: transform var(--dur-4) var(--ease-out); }
  .mult__ops.is-in b { transform: scale(1.4); }
  .mult__say { font-family: var(--head-font); font-weight: 700; font-size: clamp(1.25rem,2.4vw,2rem); line-height: 1.7; color: var(--fg); }
  .mult__x { font-size: var(--fs-lead); color: var(--fg-muted); }
  /* 3 → 5 → 10 と、数字そのものを段階的に大きくして「掛け算で増える」を字面で見せる。
     行間が暴れないよう line-height は 0 に落とし、下端で揃える（設計書 §9.2）。 */
  .mult__x { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; padding-top: 16px; }
  .mult__x .mono {
    font-weight: 700; color: var(--accent); line-height: .78;
    letter-spacing: -.01em; margin-inline: .1em;
    text-shadow: 0 0 34px rgba(76,141,255,.34);
  }
  /* 先頭に .mult__x-lead を足しても、3・5・10 の指定がずれないようにする */
  .mult__x .mult__x-n:nth-child(1 of .mult__x-n) .mono { font-size: 2.1em; }
  .mult__x .mult__x-n:nth-child(2 of .mult__x-n) .mono { font-size: 2.8em; }
  .mult__x .mult__x-n:nth-child(3 of .mult__x-n) .mono { font-size: 3.7em; color: var(--orange-500); text-shadow: 0 0 42px rgba(255,106,31,.4); }
  .mult__x-n { white-space: nowrap; }
  @media (max-width: 599px) {
    .mult__x { align-items: flex-start; }
    .mult__x-lead { flex-basis: 100%; margin-bottom: 8px; }
  }

  .cards li { border: 1px solid var(--rule); border-radius: var(--radius-l); padding: 20px 22px; background: rgba(255,255,255,.02); }
  [data-time="morning"] .cards li { background: var(--paper-card); }
  .cards li .mono { font-size: 10px; letter-spacing: .14em; color: var(--fg-dim); }
  .cards li p { margin-top: 9px; font-size: var(--fs-lead); line-height: 1.7; color: var(--fg); }
  @media (max-width: 599px) {
    .cards li { display: flex; align-items: baseline; gap: 12px; }
    .cards li p { margin-top: 0; }
  }

  .lay { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .fig.is-in .lay { opacity: 1; transform: none; }
  .fig.is-in .lay:nth-child(1) { transition-delay: 0ms; }
  .fig.is-in .lay:nth-child(2) { transition-delay: 70ms; }
  .fig.is-in .lay:nth-child(3) { transition-delay: 140ms; }
  .fig.is-in .lay:nth-child(4) { transition-delay: 210ms; }
  .fig.is-in .lay:nth-child(5) { transition-delay: 280ms; }
  .fig.is-in .lay:nth-child(6) { transition-delay: 350ms; }
  .fig.is-in .lay:nth-child(7) { transition-delay: 420ms; }
  .fig.is-in .lay:nth-child(8) { transition-delay: 490ms; }

  /* ---------- s03 : 夜明け ---------- */
  .sec--s03 { padding: 0; background: var(--paper); }
  .dawn {
    position: relative; overflow: hidden;
    min-height: 100svh;
    display: grid; align-content: center;
    padding-block: var(--section-py-lg);
    padding-inline: calc(var(--gutter) + var(--rail-tate)) calc(var(--gutter) + var(--rail-clock));
    background: linear-gradient(180deg, #080D18 0%, #141B31 26%, #2C2549 48%, #5B4570 66%, #9A6E6B 78%, #D7A98C 88%, #F2E2D2 95%, var(--paper) 100%);
  }
  .dawn__light { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: linear-gradient(180deg, rgba(224,214,240,.22) 0%, rgba(123,92,255,.09) 48%, transparent 100%); opacity: 0; transition: opacity var(--dur-dawn) var(--ease-dawn); }
  .dawn.is-in .dawn__light { opacity: 1; }
  .dawn__win { position: absolute; left: 50%; transform: translateX(-50%); top: -70px; width: min(640px, 60vw); height: 360px; background: radial-gradient(58% 68% at 50% 22%, rgba(236,228,248,.30), transparent 72%); filter: blur(10px); }
  .dawn__horizon { position: absolute; left: 0; right: 0; top: 74%; height: 22%; background: radial-gradient(70% 100% at 22% 100%, rgba(255,206,150,.34), transparent 70%); }
  .dawn .hd--dawn { position: absolute; left: calc(var(--gutter) + var(--rail-tate)); top: clamp(72px, 8vw, 100px); }
  .dawn .en { color: var(--amber-300); }
  .dawn__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0; }
  @media (max-width: 599px) {
    /* 見出しが absolute のままだと、中央の本文が UPDATE に重なる */
    .dawn .hd--dawn {
      position: relative; left: auto; top: auto; z-index: 3;
      width: 100%; text-align: center; margin-bottom: 28px;
    }
    .dawn .hd--dawn .hd__tate { justify-content: center; }
    .stmt--before,
    .stmt--after {
      text-align: left; width: 100%; align-self: stretch;
    }
    .stmt--before br,
    .stmt--after br { display: none; }
  }
  .dawn__pre { color: #B5AECB; text-align: center; max-width: 42em; }
  .dawn__pre + .dawn__pre { margin-top: 14px; }
  @media (max-width: 599px) {
    .dawn__body > .dawn__pre:first-of-type {
      text-align: left; width: 100%; align-self: stretch;
    }
  }
  .stmt--before { color: #fff; margin-top: var(--sp-8); text-shadow: 0 0 70px rgba(123,92,255,.24); }
  .dawn__drop { display: block; width: 1px; height: 46px; background: linear-gradient(180deg, rgba(196,160,232,.9), transparent); margin-top: 34px; }

  /* ---------- 04:44 の刻印 ---------- */
  /* ページで唯一、時刻を文字として置く場所。左右の罫が中央から外へ引かれ、
     時刻 → 言葉 の順に灯る。「夜が明けた」はこのページで最初のゴシックで、
     ここから下は書体が変わる（設計書 §2.2 チャンネル③の切替点そのもの）。 */
  .daybreak {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(12px, 1.8vw, 22px);
    width: min(100%, 42em); margin: 26px auto 0;
    opacity: 1; transform: none;      /* 汎用 reveal の動きは使わない */
  }
  .daybreak__rule {
    flex: 1 1 0; height: 1px; min-width: 0;
    background: linear-gradient(90deg, transparent, rgba(232,176,106,.62));
    transform: scaleX(0); transform-origin: 100% 50%;
    transition: transform 1100ms var(--ease-out);
  }
  .daybreak__rule:last-child {
    background: linear-gradient(90deg, rgba(232,176,106,.62), transparent);
    transform-origin: 0 50%;
  }
  .daybreak.is-in .daybreak__rule { transform: none; }
  .daybreak__time {
    flex: none; font-size: clamp(21px, 2.5vw, 32px); font-weight: 700; line-height: 1;
    letter-spacing: .04em; color: var(--amber-300);
    text-shadow: 0 0 34px rgba(232,176,106,.55);
    opacity: 0; transform: translateY(6px);
    transition: opacity 700ms var(--ease-out) 220ms, transform 700ms var(--ease-out) 220ms;
  }
  .daybreak__word {
    flex: none; font-family: var(--font-gothic); font-weight: 700;
    font-size: clamp(14px, 1.5vw, 18px); line-height: 1; letter-spacing: .2em;
    color: #FFFFFF; text-shadow: 0 0 30px rgba(255,255,255,.28);
    opacity: 0; transform: translateY(6px);
    transition: opacity 700ms var(--ease-out) 620ms, transform 700ms var(--ease-out) 620ms;
  }
  .daybreak.is-in .daybreak__time,
  .daybreak.is-in .daybreak__word { opacity: 1; transform: none; }
  @media (max-width: 560px) {
    .daybreak { flex-wrap: wrap; gap: 10px 14px; }
    .daybreak__rule { flex-basis: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .daybreak__rule { transform: none; transition: none; }
    .daybreak__time, .daybreak__word { opacity: 1; transform: none; transition: none; }
  }
  .stmt--after { margin-top: 26px; }
  /* ページで一番大きい一文。本文（--ink-800）より一段濃くして、ここだけ黒に寄せる（2026-09-07） */
  .stmt--after { font-family: var(--font-gothic); font-weight: 700; letter-spacing: .01em; color: var(--ink-900); margin-top: 30px; }


  .s03__light {
    position: relative; background: var(--paper); color: var(--fg);
    padding-block: var(--section-py);
    padding-inline: calc(var(--gutter) + var(--rail-tate)) calc(var(--gutter) + var(--rail-clock));
  }
  .teamwrap { margin-top: var(--sp-7); display: grid; gap: var(--sp-6); }
  .teamwrap__lead { display: flex; flex-direction: column; gap: 12px; max-width: 62em; }
  @media (min-width: 1100px) { .teamwrap__lead { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--grid-gap); max-width: none; } }

  /* ---------- s04 ---------- */
  .board__hd { display: flex; align-items: baseline; gap: 9px; padding-bottom: 10px; margin-bottom: 11px; border-bottom: 2px solid var(--fg); }
  .board__hd .mono { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--fg); }
  .board__hd span:last-child { font-size: 11.5px; color: var(--fg-dim); }
  .board__col--grow .board__hd .mono { color: var(--orange-700); }
  .board__col ul { display: flex; flex-direction: column; gap: 8px; }
  .board__col li {
    border: 1px solid var(--rule); border-radius: var(--radius-m); background: var(--paper-card);
    padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  }
  .board__col li .mono { font-size: 10px; letter-spacing: .14em; color: var(--accent-2); }
  .board__col li p { font-size: 13.5px; line-height: 1.55; font-weight: 500; color: var(--ink-800); }
  @media (max-width: 599px) {
    .board__col li { flex-direction: row; align-items: baseline; gap: 12px; }
    .board__col li p { margin: 0; }
  }
  .board__col--grow li { border-color: #F3DCC8; background: #FFFAF5; }
  .board__col--grow li .mono { color: #D8A87E; }

  /* 横並びのカードは下端を揃える。中身の文字数が違っても箱の高さは揃え、
     タグの行を最下部に押し出して基準線を作る（設計書 §5 横並びの規則）。 */
  .work { position: relative; display: flex; }
  .work__a { display: flex; flex-direction: column; flex: 1; border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden; background: var(--paper-card); transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out); }
  .work__a:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); }
  .work__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding-inline: 11px; background: #F7F4F0; border-bottom: 1px solid var(--rule); }
  .work__bar i { width: 5px; height: 5px; border-radius: 50%; background: #DBD3C8; }
  .work__bar .mono { font-size: 10px; color: var(--accent-2); margin-left: 9px; letter-spacing: .06em; }
  .work__shot { display: block; aspect-ratio: 4/3; overflow: hidden; }
  .work__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: object-position 2.4s var(--ease-soft); }
  .work__a:hover .work__shot img { object-position: bottom center; }
  .work__meta { display: flex; flex-direction: column; flex: 1; padding: 17px 19px 20px; }
  .work__lv { display: flex; align-items: center; gap: 9px; }
  .work__lv b { font-size: 10px; letter-spacing: .14em; color: #fff; background: #C3B7A8; border-radius: var(--radius-s); padding: 3px 7px; }
  .work__lv em { font-size: 10px; font-style: normal; letter-spacing: .12em; color: var(--accent-2); font-family: var(--font-mono); }
  .work__meta strong { display: block; font-size: 1rem; font-weight: 700; color: var(--ink-800); margin-top: 11px; line-height: 1.5; }
  .work__txt { display: block; font-size: 12.5px; line-height: 1.85; color: var(--fg-muted); margin-top: 8px; }
  .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 13px; }
  .work .tags { margin-top: auto; padding-top: 13px; }
  .tags i { font-style: normal; font-size: 10px; letter-spacing: .06em; border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 4px 9px; color: var(--fg-muted); }
  .work:nth-child(2) .work__lv b { background: #8C7F70; }
  .work--self .work__a { border: 1.5px solid var(--orange-500); box-shadow: var(--shadow-m); }
  .work--self .work__bar { background: var(--orange-050); border-bottom-color: var(--orange-100); }
  .work--self .work__bar i { background: var(--orange-200); }
  .work--self .work__bar .mono { color: var(--orange-700); }
  .work--self .work__lv b { background: var(--orange-700); }
  .work--self .work__lv em { color: var(--orange-700); }
  .work--self .tags i { border-color: var(--orange-100); background: #FFFAF5; color: var(--orange-700); }

  .seminar { margin-top: var(--sp-7); border-top: 1px solid var(--rule); padding-top: 24px; display: grid; gap: var(--sp-5); align-items: center; }
  @media (min-width: 1280px) { .seminar { grid-template-columns: 1fr auto; gap: var(--sp-7); } }
  .seminar h4 { font-size: clamp(1.0625rem,1.6vw,1.1875rem); font-weight: 700; color: var(--fg); }
  .seminar__hd { font-size: var(--fs-lead); font-weight: 700; color: var(--orange-700); margin-top: 8px; }
  .seminar__l .body { margin-top: 8px; max-width: 46em; }
  .seminar__r { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  @media (min-width: 1280px) { .seminar__r { align-items: flex-end; } }

  .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: var(--radius-s); font-weight: 700; }
  .btn--line { border: 1.5px solid var(--blue-700); color: var(--blue-700); padding: 15px 30px; font-size: 14.5px; transition: background var(--dur-1), color var(--dur-1); }
  .btn--line:hover { background: var(--blue-700); color: #fff; }
  @media (max-width: 599px) {
    #s04-seminar .seminar__r { align-items: center; }
    #s04-seminar .btn__here { display: none; }
  }
  .btn--fill { position: relative; background: #fff; color: var(--orange-800); padding: 26px clamp(32px, 6vw, 78px); font-size: clamp(1.0625rem,2vw,1.4375rem); box-shadow: var(--shadow-l); transition: transform var(--dur-2) var(--ease-out); }
  .btn--fill:hover { transform: translateY(-2px); }
  .btn--fill .cnr { width: 11px; height: 11px; border-color: rgba(168,58,5,.3); }
  .btn--fill .cnr--tl { left: 9px; top: 9px; }
  .btn--fill .cnr--br { right: 9px; bottom: 9px; }

  /* 途中CTA（§9.7 末）。紙の面に置く Primary。白地のままだと消えるので、
     地と反転させて orange-700 に白抜き（白文字 5.46:1 ／ 紙との差 5.28:1）。
     最終CTAより一段小さくして、着地点の格を保つ。 */
  .midcta { display: flex; justify-content: center; margin-top: var(--sp-9); }
  .btn--paper {
    background: var(--orange-700); color: #fff;
    padding: 22px clamp(28px, 5vw, 62px);
    font-size: clamp(1rem, 1.7vw, 1.25rem);
    box-shadow: 0 14px 40px rgba(184,67,10,.22);
    transition: background var(--dur-1), transform var(--dur-2) var(--ease-out);
  }
  .btn--paper .cnr { border-color: rgba(255,255,255,.45); }
  .btn--paper:hover { background: var(--orange-800); }

  .s04__end { margin-top: var(--sp-9); }
  .s04__end > * + * { margin-top: var(--stack-gap); }

  /* ---------- s05 ---------- */
  .pivotwrap { margin-top: var(--sp-7); display: grid; gap: var(--sp-6); }
  @media (min-width: 1000px) { .pivotwrap { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: var(--sp-7); } }
  .pivotwrap > .fig { width: 100%; max-width: 500px; justify-self: center; }
  .pivotwrap__t { display: flex; flex-direction: column; gap: 14px; }
  /* 踏み出す足は「元の位置（12時）→ 3時」へ 90度。
     グレーの脚は元の足の位置なので、そこから着地までの全域が塗られる。
     逆向きにすると歩幅が縮んで見え、60度だと元の位置と扇の始まりがずれる（2026-09-07 修正）。 */
  #pivotArm, #pvClipRect {
    transform-origin: 320px 205px;
    transform: rotate(-90deg);          /* 初期＝12時。元の足に重なっていて、扇は面積ゼロ */
    transition: transform var(--dur-5) var(--ease-out);
  }
  /* ラベルは動きの途中では出さない。足が元の位置を離れてから「転換前」、
     着地してから「転換後」。動いている最中に文字が2つあると読めない。 */
  .pvlab { opacity: 0; transition: opacity 420ms var(--ease-out); }
  .fig.is-in .pvlab--before { opacity: 1; transition-delay: 300ms; }
  .fig.is-in .pvlab--after  { opacity: 1; transition-delay: 700ms; }
  @media (prefers-reduced-motion: reduce) { .pvlab { opacity: 1; transition: none; } }

  /* 着地＝3時。切り抜きも同じ角度で回るので、扇は足に引かれて 90度 ぶん開く */
  .fig.is-in #pivotArm, .fig.is-in #pvClipRect { transform: rotate(0deg); }
  /* 動きを減らす設定では、JS が読み込み時点で is-in を付ける。
     transition が残っていると、そこで一度振れてしまう（2026-09-07 修正）。 */
  @media (prefers-reduced-motion: reduce) { #pivotArm, #pvClipRect { transition: none; } }

  .bubbles { display: grid; gap: 12px; margin-top: var(--sp-6); }
  @media (min-width: 700px) { .bubbles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1100px) { .bubbles { grid-template-columns: repeat(3, minmax(0,1fr)); } }
  .bubbles li {
    position: relative; background: var(--paper-card); border: 1px solid var(--rule);
    border-radius: var(--radius-l); padding: 18px 22px; font-size: var(--fs-lead); color: var(--fg);
  }
  .bubbles li::after { content: ""; position: absolute; left: 26px; bottom: -7px; width: 12px; height: 12px; background: var(--paper-card); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transform: rotate(45deg); }
  .s05__end { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-5); }

  /* ---------- s06 ---------- */
  .fig--net { border: 1px solid var(--orange-100); border-radius: var(--radius-l); background: #FFFDFB; }
  .sec--s06 { background: var(--paper-warm); }
  .peer { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
  .fig--net.is-in .peer { opacity: 1; }
  .fig--net.is-in .peer[data-peer="1"] { transition-delay: 80ms; }
  .fig--net.is-in .peer[data-peer="2"] { transition-delay: 160ms; }
  .fig--net.is-in .peer[data-peer="3"] { transition-delay: 240ms; }
  .fig--net.is-in .peer[data-peer="4"] { transition-delay: 320ms; }
  .peer:hover g[stroke] path { stroke: var(--orange-300); }
  .net__inter path { transition: stroke var(--dur-1) linear; }
  .fig--net.is-lit .net__inter path { stroke: var(--orange-300); }

  /* ---------- s07 ---------- */
  .offer { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius-l); overflow: hidden; background: var(--paper-card); }
  .offer--warm { border-color: #F3DCC8; background: #FFFAF5; }
  .offer__vis { position: relative; height: 158px; flex: none; display: grid; place-items: center; overflow: hidden; }
  .offer__vis b { position: absolute; right: 16px; top: 12px; font-size: 13px; letter-spacing: .18em; font-weight: 400; z-index: 2; }
  .offer__vis--night { background: #04060A; }
  /* 夜の写真の右上は空と街の灯り。地の輝度 0.002〜0.137 に対し、
     青(--blue-500)では 1.76:1 で読めない。白なら 5.62:1（2026-09-07 実測）。 */
  .offer__vis--night b { color: #FFFFFF; }
  .offer__vis--night .offer__mon { position: absolute; top: 44px; width: 54px; height: 36px; border-radius: 2px; background: #1F3B68; box-shadow: 0 0 26px rgba(76,141,255,.35); }
  .offer__vis--night .offer__mon:nth-of-type(1) { left: calc(50% - 88px); }
  .offer__vis--night .offer__mon:nth-of-type(2) { left: calc(50% - 27px); background: #25457A; }
  .offer__vis--night .offer__mon:nth-of-type(3) { left: calc(50% + 34px); background: #1B3157; }
  .offer__vis--night .offer__fig { position: absolute; top: 86px; width: 19px; height: 26px; border-radius: 8px 8px 0 0; background: #060A12; }
  .offer__vis--night .offer__fig:nth-of-type(4) { left: calc(50% - 71px); }
  .offer__vis--night .offer__fig:nth-of-type(5) { left: calc(50% - 10px); }
  .offer__vis--night .offer__fig:nth-of-type(6) { left: calc(50% + 51px); }
  .offer__amber { position: absolute; width: 3px; height: 3px; background: var(--amber-300); }
  .offer__amber:nth-of-type(7) { right: 14px; top: 14px; opacity: .8; }
  .offer__amber:nth-of-type(8) { right: 30px; top: 26px; opacity: .45; }
  .offer__vis--grid { background: #F5F2EE; background-image: linear-gradient(#EDE8E1 1px, transparent 1px), linear-gradient(90deg, #EDE8E1 1px, transparent 1px); background-size: 16px 16px; }
  .offer__vis--grid svg { width: 200px; }
  /* 朝の写真の右上は明るい壁（輝度 0.39〜0.48）。橙では 2.04:1 で沈む。
     濃紺なら 6.66:1（4つの画面幅で実測・2026-09-07）。 */
  .offer__vis--warm b { color: var(--ink-800); }
  .offer__vis--warm { background: var(--orange-050); }

  /* ---- 顔の入るスロット（2026-09-07 追加）----
     ページで唯一、顔が写る場所。ここだけは「あなた」ではなく「話す相手」なので顔がある。
     1列でも他のカードと同じ 158px。切り抜きは object-position で顔を残す。 */
  .offer__vis--face { background: #EFE7D6; }
  /* ラベルは3枚とも同じ「右上・13px・素の文字」。箱を持たせると1枚だけ別部品に見える。
     ただしこの写真は左下のラベル帯に明部 38〜47%・暗部 10〜48% が常に同居していて
     （4つの画面幅で実測）、白文字のままでは明るいシャツの上で消える。
     そこで左下の隅だけに影を置く。240×70px、隅で最大 .55、そこから外へ消える。
     顔（画面上部中央）からは最も詰まった切り抜きでも 90px 以上離れており、絶対にかからない。 */
  .offer__body { flex: 1; padding: 22px 24px 26px; }
  .offer h4 { font-size: clamp(1.0625rem,1.5vw,1.1875rem); font-weight: 700; line-height: 1.5; color: var(--ink-800); }
  .offer .body { margin-top: 14px; }
  .offer .body + .body { margin-top: 10px; }
  .agent { margin-top: 14px; border-top: 1px dotted var(--rule-dot); padding-top: 14px; }
  .agent__hd { font-size: 14px; font-weight: 700; color: var(--ink-800); }
  .agent__hd span { font-size: 22px; font-weight: 700; color: var(--orange-700); margin-right: 6px; }

  .ledger h3 { font-size: clamp(1.25rem,1.9vw,1.5rem); font-weight: 700; margin-top: 8px; }
  .ledger .en { display: block; margin-top: 20px; }
  /* 無料 / 36,000 / 10,800 の頭を1本の縦線に揃える。
     金額は右揃えにせず、ラベル列の右端＝金額列の左端で読ませる。
     .price__off は枠の内側に 22px の余白と 1px の罫があるので、その 23px を引いて同じ位置に置く。 */
  /* em はそれを使う要素の font-size で解決されるので、ここは必ず rem で持つ。
     em にすると .price__row（17px）と .price__off（15px）で幅がズレて頭が揃わない。 */
  .ledger__price { --price-label: 10.5rem; --price-inset: 23px; }
  @media (max-width: 599px) {
    /* 375px でラベル列 10.5rem だと金額列が 167px しか残らず「円」が落ちる */
    .ledger__price { --price-label: 5.5rem; }
  }
  .price { margin-top: 22px; }
  .price__row {
    display: grid; grid-template-columns: var(--price-label) minmax(0, 1fr);
    align-items: baseline; column-gap: 0; padding: 15px 0;
    border-bottom: 1px dotted var(--rule-dot);
  }
  .price__row dt { font-size: var(--fs-lead); color: var(--fg-muted); }
  .price__row dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 6px; }
  .price__amt { display: inline-flex; align-items: baseline; column-gap: 9px; white-space: nowrap; }
  .price__row dd b { font-size: var(--fs-num-xl); font-weight: 700; line-height: 1; color: var(--ink-800); }
  .price__row dd span { font-size: var(--fs-lead); color: var(--fg-muted); }
  .price__row dd em { flex-basis: 100%; font-size: 13px; font-style: normal; color: var(--fg-dim); }
  .price__free { font-size: 26px; font-weight: 500; color: var(--ink-800); }
  .price__off { position: relative; display: grid; gap: 12px; align-items: center; margin-top: 14px; padding: 18px 22px; background: var(--orange-050); border: 1px solid #F3DCC8; border-radius: var(--radius-m); }
  /* 「初月70%OFF」の帯は、まず〈バッジ＋金額〉で数字を見せ、説明文はその下に置く。
     金額と説明文が横に並ぶと、目が金額に届く前に文章を読まされる（2026-09-06 変更）。 */
  .price__badge { order: 1; justify-self: start; }
  .price__offnum { order: 2; }
  .price__offtxt { order: 3; }
  @media (min-width: 700px) {
    .price__off {
      grid-template-columns: calc(var(--price-label) - var(--price-inset)) minmax(0, 1fr);
      row-gap: 12px; column-gap: 0; align-items: center;
    }
    .price__badge  { grid-column: 1; grid-row: 1; }
    .price__offnum { grid-column: 2; grid-row: 1; justify-content: flex-start; }
    .price__offtxt { grid-column: 1 / -1; grid-row: 2; }
  }
  .price__off .cnr { width: 10px; height: 10px; border-color: var(--orange-700); }
  .price__off .cnr--tl { left: 8px; top: 8px; } .price__off .cnr--br { right: 8px; bottom: 8px; }
  .price__badge { font-size: 11px; letter-spacing: .14em; color: #fff; background: var(--orange-700); border-radius: var(--radius-s); padding: 6px 11px; font-weight: 700; white-space: nowrap; }
  .price__offtxt { font-size: 13.5px; color: var(--fg-muted); }
  .price__offnum { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; row-gap: 6px; justify-content: flex-start; }
  .price__offnum b { font-size: var(--fs-num-xl); font-weight: 700; line-height: 1; color: var(--orange-700); }
  .price__offnum span { font-size: var(--fs-lead); color: var(--orange-700); }
  .price__offnum em { flex-basis: 100%; font-size: 13px; font-style: normal; color: #8C5C3A; }

  .cap__num { display: flex; align-items: flex-end; gap: 14px; margin-top: 20px; }
  .cap__num b { font-size: clamp(3.5rem,6vw,5rem); font-weight: 700; line-height: .9; color: var(--ink-800); }
  .cap__num span { font-size: var(--fs-lead); color: var(--fg-muted); padding-bottom: 9px; }
  .cap__ratio { margin-top: 10px; font-size: 13px; letter-spacing: .1em; color: var(--orange-700); }
  .cap__ratio b { font-weight: 700; }
  .cap__dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 16px; max-width: 340px; }
  .cap__dots li { aspect-ratio: 1; min-width: 0; border-radius: 50%; background: var(--orange-100); }
  .cap__dots li.on { background: var(--orange-500); }
  /* 2つ目のドットは「あなたの席」。ゆっくり明滅させて、空席ではなく
     席が待っていることを伝える（設計書 §9.7）。 */
  .cap__dots li.you {
    background: var(--orange-500); opacity: .32;
    animation: seat 3.2s var(--ease-soft) infinite;
  }
  @keyframes seat {
    0%, 100% { opacity: .28; box-shadow: 0 0 0 0 rgba(255,106,31,.42); }
    50%      { opacity: .90; box-shadow: 0 0 0 6px rgba(255,106,31,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .cap__dots li.you { animation: none; opacity: .6; }
  }
  .ledger__cap .body { margin-top: 18px; }

  /* ---------- s08 ---------- */
  .steps { display: flex; flex-direction: column; gap: 13px; margin-top: var(--sp-7); align-items: center; text-align: center; }
  .steps li { font-size: clamp(1.0625rem,1.9vw,1.375rem); font-weight: 500; color: var(--fg); }
  .flip {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: var(--sp-8); padding: var(--sp-8) var(--gutter);
    border-radius: var(--radius-l);
    background: var(--paper); color: var(--ink-800);
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-6);
    transition: background var(--dur-5) linear, color var(--dur-5) linear;
  }
  .flip.is-in { background: var(--orange-800); color: #fff; }
  /* ---- 面を「塗り」ではなく「光」にする（2026-09-07）----
     ベタ1色＋白文字だけだと、直後の CTA（同じ orange-800 の面）と見分けがつかず、
     この板が CTA の予告に見えてしまう。ここは 9:00 の一歩手前の光。
     光源の位置は CTA と同じ右上に置き、彩度と高さをわずかに落とす。
     グラデーションは transition できないので、色の遷移は背景色に任せ、
     光・粒子・隅取りは opacity でフェードさせる。 */
  .flip__light {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(94% 104% at 78% 2%, #E4691A 0%, #C24A08 32%, #A83A05 60%, #8B2F04 100%);
    opacity: 0; transition: opacity var(--dur-5) linear;
  }
  .flip.is-in .flip__light { opacity: 1; }
  .flip > .grain { z-index: -1; opacity: 0; transition: opacity var(--dur-5) linear; }
  .flip.is-in > .grain { opacity: 1; }
  .flip .cnr {
    border-color: rgba(255,255,255,.42);
    opacity: 0; transition: opacity var(--dur-5) linear;
  }
  .flip.is-in .cnr { opacity: 1; }
  /* 2つの言い切り と 結び のあいだに、ページ共通の三分割罫を入れて段落を分ける */
  .flip .rule3 { margin-top: 0; }
  .flip .rule3 i { background: rgba(255,255,255,.42); }
  .flip .rule3 i:nth-child(3) { background: #fff; }
  @media (prefers-reduced-motion: reduce) {
    .flip__light, .flip > .grain, .flip .cnr { transition: none; }
  }
  .flip .stmt--flip { font-family: var(--font-gothic); font-size: clamp(1.375rem,3.2vw,2.5rem); line-height: 1.7; text-align: center; font-weight: 700; }
  @media (max-width: 599px) {
    .flip .stmt--flip { text-align: left; }
    .flip .stmt--flip br { display: none; }
  }
  .flip__end { font-size: clamp(1.125rem,2vw,1.5rem); font-weight: 700; text-align: center; line-height: 1.8; }
  .flip__end b { display: block; font-weight: 700; }
  .flip__end em { display: block; font-style: normal; font-weight: 500; font-size: .72em; letter-spacing: .18em; color: rgba(255,255,255,.72); margin-bottom: 6px; }

  /* ---------- CTA ---------- */
  .sec--cta { background: var(--orange-800); color: #fff; }
  .cta__light { position: absolute; inset: 0; background: radial-gradient(78% 88% at 74% 6%, #FF8F45 0%, #E2540B 32%, #A83A05 64%, #7A2A03 100%); z-index: 0; }
  .cta__shaft { position: absolute; z-index: 0; filter: blur(24px); transform: rotate(16deg); }
  .cta__shaft--a { right: 5%; top: -60px; width: 320px; height: 700px; background: linear-gradient(180deg, rgba(255,236,212,.20), transparent); animation: breathe 8s var(--ease-soft) infinite; }
  .cta__shaft--b { right: 22%; top: -60px; width: 180px; height: 600px; background: linear-gradient(180deg, rgba(255,236,212,.13), transparent); }
  @keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .95; } }
  .cta__in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-block: 40px; }
  .cta__time { display: flex; align-items: center; gap: 12px; }
  .cta__time i { width: 22px; height: 1px; background: rgba(255,255,255,.42); }
  .cta__time .mono { font-size: 11px; letter-spacing: .3em; color: rgba(255,255,255,.78); }
  .cta__h { font-family: var(--font-gothic); font-weight: 700; font-size: clamp(1.75rem,4.4vw,3.75rem); line-height: 1.55; margin-top: 26px; }
  .sec--cta .rule3 i:nth-child(3) { background: #fff; }
  .sec--cta .rule3 i { background: rgba(255,255,255,.5); }
  .cta__q { font-family: var(--font-mincho); font-weight: 600; font-size: clamp(1rem,1.9vw,1.25rem); line-height: 2.3; letter-spacing: .08em; color: rgba(255,255,255,.92); margin-top: 34px; }
  .cta__q p + p { margin-top: 1.2em; }
  .sec--cta .btn--fill { margin-top: 50px; }
  .cta__terms { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; margin-top: 20px; }
  .cta__terms .mono { font-size: 11.5px; letter-spacing: .14em; color: rgba(255,255,255,.84); }
  .cta__terms i { width: 1px; height: 12px; background: rgba(255,255,255,.32); }
  .sec--cta .cnr { border-color: rgba(255,255,255,.34); }
  .sec--cta .tate .mono { color: #FFD9BE; }
  .sec--cta .tate__w { color: #FFFFFF; }
  .sec--cta .tate__t { background: #FFD9BE; }
  .sec--cta .tate__l { background: rgba(255,255,255,.3); }

  /* ---------- footer ---------- */
  .ft {
    background: var(--ink-1000); color: var(--ink-100);
    padding-block: clamp(72px, 9vw, 128px); padding-inline: var(--gutter);
    text-align: center;
  }
  .ft > * { max-width: 40em; margin-inline: auto; }
  .ft__brand { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h2); color: #fff; }
  .ft__brand span { color: var(--orange-500); }
  .ft__kw { font-size: var(--fs-label); letter-spacing: .24em; color: var(--blue-300); margin-top: var(--sp-5); }
  .ft__tag { font-size: var(--fs-small); color: var(--ink-300); margin-top: var(--sp-4); }
  /* 区切りの「｜」は独立要素にしない。折り返したときに行末へ取り残されるため、
     直前のリンクに ::after で付ける（2026-09-07 修正）。 */
  .ft__nav {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px;
    max-width: none; margin-top: var(--sp-9);
    font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-300);
  }
  .ft__nav a:not(:last-child)::after { content: "｜"; margin-left: 14px; color: var(--ink-600); }
  .ft__nav a { color: var(--ink-300); }
  .ft__nav a:hover { color: var(--ink-100); text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
  .ft__c { font-size: var(--fs-label); color: var(--ink-300); margin-top: var(--sp-5); }
}


/* ============================================================
   制作メモの表示（HERO映像キャプション／撮影仕様／演出メモ／切り替え規則の帯）
   公開版では非表示のため HTML 側から要素を外している。
   戻すときは index.html に要素を復帰させ、以下のコメントを解除する。
   ------------------------------------------------------------
  .hero__cap {
    position: absolute; left: clamp(20px, 6vw, 118px); bottom: 44px; z-index: 2;
    max-width: 520px; border-top: 1px solid rgba(43,54,72,.6); padding-top: 16px;
  }
  .hero__cap figcaption { display: flex; gap: 20px; font-size: 12.5px; line-height: 1.95; color: var(--ink-300); }
  .hero__cap .mono { font-size: 10px; letter-spacing: .16em; color: var(--amber-300); white-space: nowrap; padding-top: 3px; }
  @media (max-width: 860px) { .hero__cap { display: none; } }
  .ph figcaption {
    position: absolute; left: 14px; bottom: 12px; z-index: 4;
    display: flex; align-items: center; gap: 10px;
    font-size: 9.5px; letter-spacing: .14em; color: var(--ink-400);
  }
  .ph figcaption b { color: var(--amber-300); font-weight: 400; }
  .ph figcaption i { width: 16px; height: 1px; background: var(--ink-700); }
  .ph--window figcaption { color: #8A7867; }
  .ph--window figcaption b { color: var(--orange-700); }
  .ph--window figcaption i { background: var(--rule-dot); }
  .dawn__note { position: absolute; left: calc(var(--gutter) + var(--rail-tate)); bottom: 8%; max-width: 420px; border-top: 1px solid rgba(58,36,34,.30); padding-top: 12px; font-size: 12px; line-height: 1.9; color: #3A2422; }
  .dawn__note .mono { display: block; font-size: 9.5px; letter-spacing: .16em; color: #5A2540; font-weight: 700; margin-bottom: 8px; }
  @media (max-width: 900px) { .dawn__note { position: static; margin-top: var(--sp-8); max-width: none; } }
  .switchbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 36px;
    padding: 22px var(--gutter); background: var(--paper-card);
    border-top: 1px solid var(--rule-warm); border-bottom: 1px solid var(--rule-warm);
  }
  .switchbar li { font-size: 10.5px; letter-spacing: .14em; color: var(--fg-dim); }
  .switchbar b { color: var(--violet-600); }
  .seminar__note { font-size: 9.5px; letter-spacing: .14em; color: var(--fg-dim); }
   ============================================================ */

/* ============================================================
   utility
   ============================================================ */
@layer utility {
  .u-nowrap { white-space: nowrap; }
  .reveal { opacity: 0; transform: translateY(var(--move)); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
}

/* ============================================================
   reduced motion — R6 の唯一の !important 許可ブロック
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}