/* 案件タイムライン型 ＋ 物語：白地に深い青緑、差し色は琥珀。本文は読みやすい幅の1カラム、図と表はその幅で */
:root {
  --bg: #FFFFFF;
  --bg-sub: #F3F7FD;
  --ink: #10213D;
  --ink-2: #344969;
  --muted: #526580;
  --line: #DCE6F4;
  --line-strong: #10213D;
  --teal: #2563EB;
  --teal-strong: #1D4ED8;
  --teal-soft: #D7E7FF;
  --teal-soft-ink: #173B75;
  --amber: #1D4ED8;
  --amber-soft: #EFF6FF;
  --amber-ink: #173B75;
  --amber-head: #1D4ED8;
  --sand: #DBEAFE;
  --sand-ink: #173B75;
  --warn-soft: #E4EEFF;
  --warn-ink: #163D80;
  --band: #10213D;
  --band-ink: #FFFFFF;
  --band-sub: #DCE9FF;
  --quiz-bg: #10213D;
  --quiz-panel: #152F5C;
  --quiz-ink: #FFFFFF;
  --quiz-line: #6888B6;
  --quiz-accent: #96C3FF;
  --btn-bg: #2563EB;
  --btn-ink: #FFFFFF;
  --bar-1: #2563EB;
  --bar-2: #6A9BE9;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --font-num: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --measure: 760px;
  --wide: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #091426; --bg-sub: #101F38; --ink: #E7EEFA; --ink-2: #C8D6ED; --muted: #A8BDDE;
    --line: #283E60; --line-strong: #C8D6ED; --teal: #92BCFF; --teal-strong: #BED8FF;
    --teal-soft: #183A6A; --teal-soft-ink: #DCEAFF; --amber: #92BCFF; --amber-soft: #132B4F;
    --amber-ink: #DCEAFF; --amber-head: #BCD7FF; --sand: #24436E; --sand-ink: #DAE9FF;
    --warn-soft: #23416E; --warn-ink: #DBEAFF; --band: #071327; --band-ink: #FFFFFF; --band-sub: #C2D5F2;
    --quiz-bg: #071327; --quiz-panel: #142C51; --quiz-ink: #F2F6FF; --quiz-line: #617EA7; --quiz-accent: #96C3FF;
    --btn-bg: #2563EB; --btn-ink: #FFFFFF; --bar-1: #2563EB; --bar-2: #5789DE;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #091426; --bg-sub: #101F38; --ink: #E7EEFA; --ink-2: #C8D6ED; --muted: #A8BDDE;
  --line: #283E60; --line-strong: #C8D6ED; --teal: #92BCFF; --teal-strong: #BED8FF;
  --teal-soft: #183A6A; --teal-soft-ink: #DCEAFF; --amber: #92BCFF; --amber-soft: #132B4F;
  --amber-ink: #DCEAFF; --amber-head: #BCD7FF; --sand: #24436E; --sand-ink: #DAE9FF;
  --warn-soft: #23416E; --warn-ink: #DBEAFF; --band: #071327; --band-ink: #FFFFFF; --band-sub: #C2D5F2;
  --quiz-bg: #071327; --quiz-panel: #142C51; --quiz-ink: #F2F6FF; --quiz-line: #617EA7; --quiz-accent: #96C3FF;
  --btn-bg: #2563EB; --btn-ink: #FFFFFF; --bar-1: #2563EB; --bar-2: #5789DE;
  color-scheme: dark;
}

/* ---- 基本 ---- */
*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.9;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
h1, h2, h3, p, li, dd, td, th { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; }
a { color: var(--teal); }
a:hover { color: var(--teal-strong); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--quiz-accent); outline-offset: 2px; border-radius: 4px; }
strong { font-weight: 700; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--bg); color: var(--ink); padding: 8px 12px; z-index: 20; }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--wide); margin: 0 auto; }
.narrow { max-width: var(--measure); margin: 0 auto; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ---- ヘッダー ---- */
.site-header { background: var(--band); }
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-block: 14px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--band-ink); text-decoration: none; font-weight: 700; font-size: 16px; margin-right: auto; }
.logo:hover { color: var(--band-ink); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 14px; }
.site-nav a { color: var(--band-sub); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.site-nav a:hover { color: var(--band-ink); text-decoration: underline; }

/* ---- 現在地（フェーズ） ---- */
.phase { background: var(--bg-sub); border-bottom: 1px solid var(--line); }
.phase ol { list-style: none; margin: 0 auto; padding-block: 12px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 1.5; }
.phase li { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.phase li[aria-current="step"] { background: var(--amber); border-color: var(--amber); color: var(--bg); font-weight: 700; }

/* ---- 章の本文 ---- */
.chapter { padding-block: 72px 112px; }
.eyebrow { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--amber); letter-spacing: 0.06em; line-height: 1.6; }
.chapter h1 { margin: 0 0 28px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.4; }
.chapter h2 { margin: 0 0 20px; font-size: clamp(22px, 2.6vw, 26px); line-height: 1.55; }
.chapter h3 { margin: 32px 0 12px; font-size: 19px; line-height: 1.6; }
.chapter p { margin: 0 0 22px; }
.chapter ul, .chapter ol.plain { margin: 0 0 24px; padding-left: 1.3em; }
.chapter li { margin-bottom: 8px; }
.lead { font-size: 18px; color: var(--ink-2); }
.block { margin-bottom: 88px; }
.block:last-of-type { margin-bottom: 64px; }
.small { font-size: 14px; color: var(--muted); }

.q-box { border: 2px solid var(--teal); border-radius: 8px; padding: 18px 22px; margin-bottom: 64px; }
.q-box__label { margin: 0 0 4px !important; font-size: 13px; font-weight: 700; color: var(--teal); letter-spacing: 0.08em; }
.q-box__q { margin: 0 !important; font-size: 21px; font-weight: 700; line-height: 1.6; }

/* ---- 場面と会話 ---- */
.scene-title { margin: 0 0 8px !important; font-size: 14px !important; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; }
.narr { color: var(--ink-2); }
.talk { display: flex; flex-direction: column; gap: 22px; margin: 28px 0; }
.say { display: flex; gap: 14px; align-items: flex-start; }
.say > div { min-width: 0; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #FFFFFF; background: #2563EB; line-height: 1; }
.say--m .avatar { background: #193B70; }
.say--o .avatar { background: #1D4ED8; }
.say--t .avatar { background: #496A9D; }
.say__name { margin: 0 0 4px !important; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.5; }
.bubble { margin: 0 !important; background: var(--bg-sub); border-radius: 0 14px 14px 14px; padding: 12px 18px; }
.say--o .bubble { background: var(--amber-soft); }
.timeskip { text-align: center; font-size: 14px; color: var(--muted); letter-spacing: 0.2em; margin: 28px 0 !important; }

/* ---- ことば（用語） ---- */
.words { background: var(--bg-sub); border-radius: 8px; padding: 14px 20px; margin: 0 0 24px; font-size: 15px; }
.words summary { font-weight: 700; min-height: 28px; cursor: pointer; }
.words dl { margin: 12px 0 0; line-height: 1.8; }
.words dt { font-weight: 700; }
.words dd { margin: 0 0 12px; color: var(--ink-2); }
.words dd:last-child { margin-bottom: 0; }

/* ---- 数字と図 ---- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--line); border-radius: 8px; margin: 0 0 24px; }
.figures > div { padding: 16px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-right: -1px; margin-bottom: -1px; }
.figures dt, .figures .f-label { font-size: 13px; color: var(--muted); line-height: 1.5; }
.figures dd, .figures .f-value { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.figures .unit { font-size: 15px; margin-left: 2px; }
.figures .accent { color: var(--teal); }

.bar { display: flex; min-height: 52px; border-radius: 6px; overflow: hidden; font-size: 14px; font-weight: 500; margin-bottom: 10px; line-height: 1.4; }
.bar > div { display: flex; align-items: center; padding: 8px 12px; min-width: 0; }
.bar .b1 { background: var(--bar-1); color: #FFFFFF; }
.bar .b2 { background: var(--bar-2); color: #FFFFFF; }
.bar .b3 { background: var(--warn-soft); color: var(--warn-ink); font-weight: 700; }
.bar .b4 { background: var(--teal-soft); color: var(--teal-soft-ink); }

.table-wrap { overflow-x: auto; margin: 0 0 16px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.7; }
table.data caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 8px; }
table.data th, table.data td { padding: 12px 12px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.data thead th { border-bottom: 2px solid var(--line-strong); font-size: 14px; }
table.data td.r, table.data th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.total td, table.data tr.total th { font-weight: 700; border-top: 2px solid var(--line-strong); }
table.data .minus { color: #B3261E; }
:root[data-theme="dark"] table.data .minus { color: #FF8A80; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) table.data .minus { color: #FF8A80; } }

.tag { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.tag--good { background: var(--teal); color: var(--bg); }
.tag--mid { background: var(--teal-soft); color: var(--teal-soft-ink); }
.tag--warn { background: var(--warn-soft); color: var(--warn-ink); }

.steps { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line-strong); }
.steps li { display: flex; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); margin: 0; }
.steps .s-when { flex: none; width: 6.5em; font-size: 14px; font-weight: 700; color: var(--teal); line-height: 1.9; }
.steps .s-body { min-width: 0; }
.steps .s-body strong { display: block; }
.steps .s-body span { font-size: 15px; color: var(--ink-2); }

/* 人数の推移（横棒） */
.hbars { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.hbar { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 12px; align-items: center; font-size: 14px; }
.hbar__track { background: var(--bg-sub); border-radius: 4px; overflow: hidden; }
.hbar__fill { display: block; height: 28px; background: var(--bar-1); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 0 8px; line-height: 28px; white-space: nowrap; border-radius: 4px; min-width: 3.5em; font-variant-numeric: tabular-nums; }
.hbar__fill--out { background: var(--bar-2); }

/* ---- 小野寺の経理メモ ---- */
.memo { background: var(--amber-soft); border-radius: 8px; padding: 24px 26px; margin-bottom: 64px; }
.memo h2 { margin: 0 0 8px !important; font-size: 15px !important; font-weight: 700; color: var(--amber-head); line-height: 1.6; }
.memo p { margin: 0 0 12px !important; font-size: 16px; line-height: 1.85; color: var(--amber-ink); }
.memo p:last-child { margin-bottom: 0 !important; }

/* ---- 技術リンク ---- */
.techlist { list-style: none; padding: 0 !important; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.techlist li { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--line); padding-right: 16px; }
.techlist .t-name { font-weight: 700; display: block; }
.techlist .t-desc { font-size: 15px; color: var(--ink-2); display: block; }
.techlist a { font-size: 14px; }

/* ---- クイズ ---- */
.quiz { background: var(--quiz-bg); color: var(--quiz-ink); border-radius: 12px; padding: 36px clamp(20px, 4vw, 32px); margin-bottom: 88px; }
.quiz__eyebrow { margin: 0 0 8px !important; font-size: 13px; font-weight: 700; color: var(--quiz-accent); letter-spacing: 0.1em; }
.quiz h2 { color: var(--quiz-ink); margin-bottom: 24px !important; }
.quiz__choices { display: flex; flex-direction: column; gap: 10px; }
.quiz__btn {
  font: inherit; font-size: 16px; line-height: 1.6; text-align: left; cursor: pointer;
  padding: 14px 18px; min-height: 52px; border-radius: 8px;
  background: transparent; color: var(--quiz-ink); border: 1px solid var(--quiz-line);
}
.quiz__btn:hover { border-color: var(--quiz-accent); }
.quiz__btn[aria-pressed="true"] { background: var(--quiz-accent); color: #10213D; border-color: var(--quiz-accent); font-weight: 700; }
.quiz__result { margin-top: 24px; background: var(--quiz-panel); border-radius: 8px; padding: 20px 22px; font-size: 16px; line-height: 1.85; }
.quiz__result p { margin: 0 0 14px !important; }
.quiz__result p:last-child { margin-bottom: 0 !important; }
.quiz__answer { font-weight: 700; color: var(--quiz-accent); margin-bottom: 6px !important; }

/* ---- まとめ・読了・章移動 ---- */
.points { border-top: 2px solid var(--line-strong); padding-top: 24px; margin-bottom: 48px; }
.points h2 { font-size: 20px !important; margin-bottom: 12px !important; }
.points ol { margin: 0; padding-left: 1.4em; }
.points li { margin-bottom: 8px; }
.done-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 40px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border-radius: 6px; font: inherit; font-size: 16px; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1.5;
  background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-bg);
}
.btn:hover { color: var(--btn-ink); filter: brightness(1.08); }
.btn--ghost { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn--ghost:hover { color: var(--teal-strong); }
.btn[aria-pressed="true"] { background: transparent; color: var(--teal); border-color: var(--teal); }
.chapnav { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.chapnav a.prev { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- トップページ ---- */
.hero { background: var(--bg-sub); border-bottom: 1px solid var(--line); }
.hero__in { padding-block: 88px 48px; }
.hero h1 { margin: 0 0 28px; font-size: clamp(32px, 4.8vw, 54px); line-height: 1.38; }
.hero__lead { margin: 0 0 36px; font-size: 18px; color: var(--ink-2); max-width: 32em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.hero__actions a.text { font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.hero__stats { padding-block: 0 64px; }
.hero__stats .figures { background: var(--bg); margin: 0; }
.section { padding-block: 104px 32px; }
.section h2 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 32px); line-height: 1.5; }
.section .intro { margin: 0 0 40px; color: var(--ink-2); max-width: 34em; }
.cast { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 36px 32px; }
.cast li { display: flex; gap: 16px; min-width: 0; }
.cast .avatar { width: 60px; height: 60px; font-size: 22px; }
.cast__name { margin: 0; font-weight: 700; font-size: 18px; }
.cast__role { margin: 0 0 10px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.cast .bubble { font-size: 15px; line-height: 1.75; }
.cast li.is-o .bubble { background: var(--amber-soft); }

.timeline-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.timeline { min-width: 820px; padding: 24px; }
.tl-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tl-head { font-size: 13px; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 8px; }
.tl-phase { margin: 14px 0 18px; font-size: 13px; font-weight: 500; line-height: 1.5; }
.tl-phase span { padding: 8px 10px; border-radius: 4px; }
.ph-1 { background: var(--sand); color: var(--sand-ink); }
.ph-2 { background: var(--teal-soft); color: var(--teal-soft-ink); }
.ph-3 { background: var(--bar-1); color: #FFFFFF; }
.ph-4 { background: #1D4ED8; color: #FFFFFF; }
.ph-5 { background: var(--line); color: var(--ink); }
.tl-ch { font-size: 13px; row-gap: 6px; line-height: 1.6; }
.tl-ch a { font-weight: 700; color: var(--ink); text-decoration: none; }
.tl-ch a:hover { text-decoration: underline; }
.tl-ch .now { color: var(--amber); }
.tl-ch .span { border-top: 2px dotted var(--muted); padding-top: 4px; color: var(--ink-2); }

.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.toc li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.toc .toc-no { flex: none; width: 4em; font-size: 14px; font-weight: 700; color: var(--teal); line-height: 1.9; }
.toc .toc-body { min-width: 0; flex: 1; }
.toc .toc-body a { color: var(--ink); font-weight: 700; text-decoration: none; font-size: 17px; }
.toc .toc-body a:hover { text-decoration: underline; color: var(--teal); }
.toc .toc-sub { margin: 2px 0 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
.toc .toc-done { flex: none; align-self: center; font-size: 12px; font-weight: 700; color: var(--teal); border: 1px solid var(--teal); border-radius: 999px; padding: 2px 10px; line-height: 1.6; }
.progress-line { font-size: 14px; color: var(--muted); margin: -24px 0 32px; }

.about { background: var(--bg-sub); border-top: 1px solid var(--line); margin-top: 88px; }
.about__in { padding-block: 56px 64px; font-size: 14px; color: var(--ink-2); line-height: 1.85; }
.about h2 { font-size: 16px; margin: 0 0 12px; color: var(--ink); }
.about p { margin: 0 0 10px; max-width: 46em; }

.site-footer { border-top: 1px solid var(--line); }
.site-footer__in { padding-block: 24px 32px; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .chapter { padding-block: 48px 88px; }
  .block { margin-bottom: 64px; }
  .say { gap: 10px; }
  .avatar { width: 38px; height: 38px; font-size: 14px; }
  .steps li { flex-direction: column; gap: 2px; }
  .toc li { gap: 12px; flex-wrap: wrap; }
  .toc .toc-no { width: 100%; }
  .hero__in { padding-block: 56px 40px; }
  .section { padding-block: 72px 24px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }


/* Blue editorial redesign: static HTML, shared by all chapters. */
:root { --wide:1180px; --focus-blue:#2563EB; --navy:#0B214A; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { font-size:18px; }
.site-header { background:#FFFFFF; border-bottom:1px solid #DCE6F4; }
.site-header__in { min-height:78px; padding-block:16px; }
.logo { color:#10213D; font-size:16px; letter-spacing:.025em; }
.logo:hover { color:#1D4ED8; }
.logo svg { padding:5px; width:36px; height:36px; border-radius:11px; background:#2563EB; }
.site-nav { font-size:14px; gap:8px 26px; }
.site-nav a { color:#344969; }
.site-nav a:hover { color:#1D4ED8; }
.hero { position:relative; isolation:isolate; overflow:hidden; color:#FFFFFF; background:#0B214A; border:0; }
.hero__visual { position:absolute; inset:0 0 0 26%; z-index:-2; }
.hero__visual img { height:100%; width:100%; object-fit:cover; object-position:65% 48%; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0B214A 8%,#0B214AFA 31%,#0B214AC4 52%,#0B214A25 82%),linear-gradient(0deg,#0B214A 0%,#0B214A00 48%); z-index:-1; }
.hero__in { padding-block:74px 42px; position:relative; }
.hero .eyebrow { color:#A9CCFF; font-size:12px; letter-spacing:.12em; max-width:38em; padding-left:15px; border-left:3px solid #7DB2FF; }
.hero h1 { max-width:11.8em; font-size:clamp(36px,4.6vw,61px); line-height:1.42; letter-spacing:.035em; margin-bottom:26px; }
.hero__lead { color:#DCE9FF; max-width:29em; font-size:16px; line-height:2; margin-bottom:30px; }
.hero__actions .btn { background:#FFFFFF; color:#1648B4; border-color:#FFFFFF; font-weight:700; padding:16px 25px; border-radius:6px; box-shadow:0 8px 22px #00163625; }
.hero__actions a.text { color:#D9E8FF; font-size:13px; text-underline-offset:5px; }
.hero__stats { padding-block:14px 46px; }
.hero__stats .figures { background:#FFFFFF0A; border-color:#FFFFFF30; border-radius:8px; backdrop-filter:blur(8px); }
.hero__stats .figures > div { border-color:#FFFFFF24; padding:20px 26px; }
.hero__stats dt { color:#BDCEEC; font-size:12px; }
.hero__stats dd.accent { color:#FFFFFF; font-size:36px; letter-spacing:.025em; margin-top:8px; }
.hero__stats .unit { font-size:16px; }
.section { padding-block:88px 12px; }
.section .eyebrow { text-transform:uppercase; font-size:12px; letter-spacing:.14em; }
.section h2 { font-size:clamp(28px,3.2vw,38px); letter-spacing:.025em; line-height:1.5; }
.section .intro { max-width:47em; font-size:16px; line-height:1.95; margin-bottom:32px; }
.cast { gap:22px; }
.cast li { display:block; border:1px solid var(--line); border-radius:12px; padding:24px; background:var(--bg); box-shadow:0 10px 30px #0B214A06; }
.avatar { background-image:url('images/cast-blue.webp') !important; background-size:400% auto !important; background-position:0% 50% !important; color:transparent; border-radius:14px; box-shadow:0 0 0 1px #0B214A0A; }
.say--m .avatar, .cast li:nth-child(2) .avatar { background-position:33.333% 50% !important; }
.say--o .avatar, .cast li:nth-child(3) .avatar { background-position:66.667% 50% !important; }
.say--t .avatar, .client-cast .avatar { background-position:100% 50% !important; }
.cast .avatar { width:86px; height:86px; margin-bottom:16px; }
.cast__name { font-size:19px; }
.cast__role { margin:4px 0 16px; }
.cast .bubble { border-radius:6px; font-size:14px; padding:14px 16px; min-height:75px; }
.client-cast { margin-top:20px; background:var(--bg-sub); padding:18px 22px; border-radius:10px; display:flex; align-items:center; gap:15px; font-size:14px; }
.client-cast .avatar { width:54px; height:54px; flex:none; }
.client-cast p { margin:0; }
.client-cast .small { font-size:12px; }
.timeline-box { background:var(--bg-sub); border:0; border-radius:12px; }
.timeline { padding:30px; }
.tl-phase span { padding:12px 10px; }
.tl-head { font-size:12px; border-color:var(--line); }
.toc { border:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.toc li { position:relative; display:flex; flex-direction:column; gap:0; padding:0 0 22px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); transition:transform .18s ease,box-shadow .18s ease; }
.toc li:hover { transform:translateY(-4px); box-shadow:0 12px 26px #0B214A10; }
.toc .toc-art { display:flex; align-items:center; justify-content:space-between; height:114px; background:var(--bg-sub); color:var(--teal); padding:22px 24px; }
.toc .toc-art svg { width:46px; height:46px; stroke:currentColor; fill:none; stroke-width:1.3; }
.toc .toc-art span { font-size:50px; line-height:1; font-family:Georgia,serif; opacity:.38; }
.toc li:nth-child(3n+2) .toc-art { color:#FFFFFF; background:#2563EB; }
.toc li:nth-child(3n) .toc-art { color:#FFFFFF; background:#153A78; }
.toc .toc-no { padding:18px 22px 8px; width:auto; font-size:12px; letter-spacing:.1em; }
.toc .toc-body { padding:0 22px; }
.toc .toc-body a { font-size:17px; line-height:1.8; }
.toc .toc-body a::after { content:""; position:absolute; inset:0; }
.toc li:focus-within { outline:3px solid #7DB2FF; outline-offset:3px; }
.toc .toc-sub { margin-top:12px; font-size:12px; line-height:1.8; }
.toc .toc-done { align-self:flex-start; margin:14px 22px 0; }
.about { margin-top:76px; }
.chapter { padding-block:58px 90px; }
.chapter > .eyebrow { font-size:12px; letter-spacing:.12em; }
.chapter h1 { font-size:clamp(33px,4.4vw,48px); line-height:1.55; }
.chapter-cover { border-radius:10px; overflow:hidden; position:relative; margin:0 0 32px; background:#0B214A; }
.chapter-cover img { max-height:230px; display:block; width:100%; height:230px; object-fit:cover; object-position:70% 56%; opacity:.82; }
.chapter-cover figcaption { position:absolute; left:24px; right:20px; bottom:19px; color:#FFFFFF; font-size:12px; letter-spacing:.13em; }
.chapter-cover::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(0deg,#0B214AD9,transparent); pointer-events:none; }
.chapter-cover figcaption { z-index:1; }
.q-box { background:var(--bg-sub); border:0; border-left:4px solid #2563EB; border-radius:0 10px 10px 0; padding:22px 26px; }
.q-box__label { font-size:12px; margin-bottom:8px !important; }
.q-box__q { font-size:22px; }
.phase { background:var(--bg); }
.phase ol { gap:8px; padding-block:16px; }
.phase li { border:0; border-radius:5px; background:var(--bg-sub); font-size:11px; padding:8px 12px; }
.phase li[aria-current="step"] { background:#2563EB; color:#FFFFFF; }
.scene-title { color:var(--teal); padding-bottom:12px; border-bottom:1px solid var(--line); }
.say { gap:14px; }
.say .avatar { width:50px; height:50px; }
.say__name { margin-bottom:7px !important; }
.bubble { padding:16px 20px; border:1px solid var(--line); background:var(--bg); box-shadow:0 5px 16px #0B214A04; }
.say--o .bubble { border-color:var(--teal-soft); }
.memo { position:relative; border:1px solid var(--teal-soft); border-left:4px solid #2563EB; border-radius:0 10px 10px 0; padding:26px 28px; }
.memo h2 { padding-bottom:10px; }
.quiz { border-radius:14px; background:linear-gradient(125deg,#0B214A,#153D85); box-shadow:0 12px 28px #0B214A12; }
.quiz__eyebrow { color:#A8CEFF; }
.quiz__btn { border-color:#7193C9; border-radius:6px; }
.quiz__btn:hover { background:#FFFFFF0D; border-color:#BCD8FF; }
.quiz__btn[aria-pressed="true"] { background:#D8E9FF; color:#0B214A; border-color:#D8E9FF; }
.quiz__result { background:#FFFFFF0D; }
.quiz__answer { color:#BBD7FF; }
.words { border:1px solid var(--line); border-radius:8px; font-size:15px; }
.words summary { color:var(--teal); }
.btn { border-radius:6px; }
.chapnav .btn { max-width:100%; }
.chapter .table-wrap { border-radius:8px; }
.chapter .data thead { background:var(--bg-sub); }
.chapter .data th,.chapter .data td { padding-left:10px; padding-right:10px; }
.chapter .data thead th { border-bottom:1px solid var(--line); }
.bar { min-height:68px; }
@media(max-width:850px) {
 .toc { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hero h1 { max-width:12.5em; }
 .hero__visual { left:12%; opacity:.65; }
 .hero::before { background:linear-gradient(90deg,#0B214AF5,#0B214AA6 75%),linear-gradient(0deg,#0B214A,transparent 85%); }
 .cast { gap:14px; }
 .cast li { padding:18px; }
 .cast .bubble { min-height:0; }
}
@media(max-width:560px) {
 body { font-size:17px; }
 .site-header__in { padding-block:13px; gap:6px; }
 .logo { font-size:13px; gap:8px; }
 .logo svg { width:30px; height:30px; border-radius:8px; }
 .site-nav { width:100%; gap:6px 22px; font-size:12px; padding-left:38px; }
 .site-nav a { min-height:34px; }
 .hero__in { padding-block:40px 25px; }
 .hero h1 { font-size:35px; letter-spacing:.01em; margin-bottom:22px; }
 .hero .eyebrow { font-size:10px; line-height:1.8; margin-bottom:22px; max-width:30em; }
 .hero__lead { font-size:14px; line-height:2; }
 .hero__actions { align-items:stretch; flex-direction:column; gap:8px; }
 .hero__actions .btn { align-self:flex-start; font-size:14px; }
 .hero__actions a.text { font-size:12px; }
 .hero__visual { left:0; }
 .hero__visual img { object-position:73% 50%; }
 .hero__stats { padding-block:0 30px; }
 .hero__stats .figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .hero__stats .figures > div { padding:16px; }
 .hero__stats dt { font-size:10px; }
 .hero__stats dd.accent { font-size:29px; }
 .hero__stats .unit { font-size:13px; }
 .section { padding-block:56px 8px; }
 .section h2 { font-size:28px; }
 .section .intro { font-size:15px; }
 .cast { grid-template-columns:1fr; }
 .cast li { display:flex; padding:20px; gap:16px; }
 .cast .avatar { width:62px; height:62px; margin:0; border-radius:13px; }
 .cast__name { font-size:17px; }
 .cast__role { font-size:12px; margin-top:3px; margin-bottom:10px; }
 .cast .bubble { font-size:13px; }
 .client-cast { padding:16px; align-items:flex-start; font-size:13px; }
 .toc { grid-template-columns:1fr; gap:16px; }
 .toc li { display:grid; grid-template-columns:82px minmax(0,1fr); grid-template-rows:auto 1fr; padding:0; gap:0; }
 .toc .toc-art { grid-column:1; grid-row:1 / span 3; height:auto; min-height:145px; padding:18px; justify-content:center; }
 .toc .toc-art span { display:none; }
 .toc .toc-art svg { width:38px; height:38px; }
 .toc .toc-no { grid-column:2; padding:17px 16px 4px; }
 .toc .toc-body { grid-column:2; padding:0 16px 18px; }
 .toc .toc-body a { font-size:15px; }
 .toc .toc-sub { font-size:11px; margin-top:8px; }
 .toc .toc-done { grid-column:2; margin:0 16px 14px; justify-self:start; }
 .chapter { padding-block:36px 60px; }
 .chapter h1 { font-size:32px; }
 .chapter > .eyebrow { font-size:11px; }
 .chapter-cover img { height:170px; max-height:170px; }
 .chapter-cover figcaption { left:18px; bottom:14px; font-size:10px; }
 .q-box { padding:20px; margin-bottom:44px; }
 .q-box__q { font-size:20px; }
 .say { gap:10px; }
 .say .avatar { width:40px; height:40px; border-radius:11px; }
 .say__name { font-size:11px; }
 .bubble { padding:13px 15px; font-size:16px; }
 .phase ol { gap:5px; padding-block:11px; }
 .phase li { font-size:10px; padding:6px 8px; }
 .memo { padding:22px 20px; }
 .quiz { padding:26px 20px; }
 .quiz__btn { font-size:15px; padding:14px; }
 .figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .bar { font-size:12px; }
 .bar > div { padding:8px; }
}
@media(prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) .site-header { background:#091426; border-color:#283E60; }
 :root:not([data-theme="light"]) .logo { color:#E7EEFA; }
 :root:not([data-theme="light"]) .site-nav a { color:#C8D6ED; }
}
:root[data-theme="dark"] .site-header { background:#091426; border-color:#283E60; }
:root[data-theme="dark"] .logo { color:#E7EEFA; }
:root[data-theme="dark"] .site-nav a { color:#C8D6ED; }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .toc li { transition:none; } .toc li:hover { transform:none; } }