/* Layout: 暖簾（のれん）色のヘッダー帯と裾の切れ込み。デスクトップは左に目次、右に本文1カラム。
   各ページの一番上に動画、その下に「現場の話」→「データで答え合わせ」の2段構成。計算は伝票、判定は色つきの札で見せる */
:root{
  --bg:#F4F5F2;
  --surface:#FFFFFF;
  --sunken:#ECEEEA;
  --ink:#1B2240;
  --ink-soft:#525A75;
  --line:#D7DAE1;
  --indigo:#2A3C7A;
  --noren:#232F5E;
  --noren-ink:#F4F5F2;
  --noren-soft:#BCC4E0;
  --band:#2E4290;
  --band-ink:#FFFFFF;
  --karashi:#D2A92B;
  --karashi-ink:#7A5C04;
  --karashi-wash:#F6EDCC;
  --ok:#2E7D4F;
  --ok-wash:#E1F1E7;
  --partial:#7A5C04;
  --partial-wash:#F6EDCC;
  --none:#555D78;
  --none-wash:#E6E8EE;
  --fix:#A3302F;
  --fix-wash:#F7E3E1;
  --slip-rule:#C8CFE5;
  --hand:#1F2E6B;
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1428; --surface:#171E3A; --sunken:#121831; --ink:#E7E9F1; --ink-soft:#A7AEC6; --line:#2B3459;
    --indigo:#A9B8F0; --noren:#1C2652; --noren-ink:#EEF0F6; --noren-soft:#A3AED6;
    --band:#4A5FB5; --band-ink:#FFFFFF;
    --karashi:#E2BE4E; --karashi-ink:#E6C760; --karashi-wash:#2C2817;
    --ok:#7FD1A0; --ok-wash:#173326; --partial:#E6C760; --partial-wash:#2C2817;
    --none:#B4BAD0; --none-wash:#232B4B; --fix:#F0A3A0; --fix-wash:#3A1E24;
    --slip-rule:#34406E; --hand:#C3CEFF;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1428; --surface:#171E3A; --sunken:#121831; --ink:#E7E9F1; --ink-soft:#A7AEC6; --line:#2B3459;
  --indigo:#A9B8F0; --noren:#1C2652; --noren-ink:#EEF0F6; --noren-soft:#A3AED6;
  --band:#4A5FB5; --band-ink:#FFFFFF;
  --karashi:#E2BE4E; --karashi-ink:#E6C760; --karashi-wash:#2C2817;
  --ok:#7FD1A0; --ok-wash:#173326; --partial:#E6C760; --partial-wash:#2C2817;
  --none:#B4BAD0; --none-wash:#232B4B; --fix:#F0A3A0; --fix-wash:#3A1E24;
  --slip-rule:#34406E; --hand:#C3CEFF;
  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box }
html.standalone{ padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px) }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:1.0625rem; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; text-size-adjust:100%;
}
img{ max-width:100% }
a{ color:var(--indigo); text-underline-offset:.2em }
a:focus-visible, summary:focus-visible{ outline:2px solid var(--karashi); outline-offset:2px; border-radius:4px }
p{ margin:0 0 1rem }
strong{ font-weight:700 }
.num{ font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink) }

/* ── ヘッダー（暖簾） ── */
.site-header{ background:var(--noren); color:var(--noren-ink); position:relative; z-index:20 }
.site-header-inner{
  max-width:72rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:.85rem;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.site-name{ color:var(--noren-ink); text-decoration:none; font-weight:700; font-size:1.0625rem; letter-spacing:.06em; line-height:1.5 }
.site-name small{ display:block; font-weight:400; font-size:.75rem; letter-spacing:.1em; color:var(--noren-soft) }
.hem{
  height:16px;
  background:linear-gradient(to right,
    var(--noren) 0 calc(33.333% - 3px),
    var(--bg) calc(33.333% - 3px) calc(33.333% + 3px),
    var(--noren) calc(33.333% + 3px) calc(66.666% - 3px),
    var(--bg) calc(66.666% - 3px) calc(66.666% + 3px),
    var(--noren) calc(66.666% + 3px) 100%);
}

/* スマホ用の目次メニュー */
.menu{ position:relative }
.menu summary{
  list-style:none; cursor:pointer; user-select:none;
  font-size:.875rem; font-weight:500; padding:.4rem .9rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--noren-soft) 55%, transparent); color:var(--noren-ink);
}
.menu summary::-webkit-details-marker{ display:none }
.menu[open] summary{ background:var(--noren-ink); color:var(--noren) }
.menu-panel{
  position:absolute; right:0; top:calc(100% + .5rem); width:min(22rem, calc(100vw - 32px));
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:.5rem; box-shadow:0 12px 32px rgba(10,16,40,.18); max-height:70vh; overflow:auto;
}
@media (min-width:960px){ .menu{ display:none } }

/* ── 全体の配置 ── */
.layout{
  max-width:72rem; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:2rem;
  padding-block:1.75rem 4rem;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.side{ display:none }
@media (min-width:960px){
  .layout{ grid-template-columns:15rem minmax(0,1fr); gap:3rem }
  .side{ display:block }
  .side nav{ position:sticky; top:1.5rem }
}
main{ min-width:0; max-width:46rem }

/* 目次リスト（サイドバーとメニュー共通） */
.toc-label{ margin:0 0 .5rem; font-size:.75rem; font-weight:700; letter-spacing:.16em; color:var(--ink-soft) }
.toc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem }
.toc-list a{
  display:grid; grid-template-columns:2.4rem minmax(0,1fr); align-items:baseline;
  padding:.4rem .6rem; border-radius:6px; text-decoration:none; color:var(--ink);
  font-size:.875rem; line-height:1.55;
}
.toc-list a:hover{ background:var(--sunken) }
.toc-list a[aria-current="page"]{ background:var(--noren); color:var(--noren-ink) }
.toc-list .no{ font-size:.75rem; font-weight:700; color:var(--karashi-ink); font-variant-numeric:tabular-nums }
.toc-list a[aria-current="page"] .no{ color:var(--karashi) }
.toc-list .group{ grid-column:1 / -1; margin:.75rem .6rem .25rem; font-size:.6875rem; letter-spacing:.14em; color:var(--ink-soft); font-weight:700 }

/* ── 動画枠 ── */
.video{
  position:relative; aspect-ratio:16 / 9; max-width:100%; border-radius:10px; overflow:hidden;
  background:var(--noren); color:var(--noren-ink);
  display:grid; place-items:center; text-align:center;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.video-placeholder{ display:grid; justify-items:center; gap:.55rem; padding:1rem }
.play{
  width:3.5rem; height:3.5rem; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--noren-soft) 70%, transparent);
  display:grid; place-items:center;
}
.play::before{
  content:""; width:0; height:0; margin-left:.25rem;
  border-left:1rem solid var(--noren-ink); border-top:.62rem solid transparent; border-bottom:.62rem solid transparent;
}
.video-ep{ font-size:.8125rem; letter-spacing:.14em; color:var(--noren-soft); font-weight:500 }
.video-title{ font-weight:700; font-size:clamp(1rem, 3.2vw, 1.25rem); line-height:1.5; max-width:22em; text-wrap:balance }
.video-note{ font-size:.75rem; color:var(--noren-soft) }

/* ── 章の見出し ── */
.ch-head{ margin:1.75rem 0 1.5rem }
.eyebrow{ margin:0; font-size:.8125rem; font-weight:700; letter-spacing:.16em; color:var(--karashi-ink) }
h1{ font-size:clamp(1.625rem, 5vw, 2.25rem); line-height:1.4; font-weight:700; letter-spacing:.03em; margin:.3rem 0 .8rem; text-wrap:balance }
.lead{ font-size:1.125rem; font-weight:500; line-height:1.85; margin:0 }

.keypoints{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1rem 1.25rem 1.1rem; margin:0 0 .5rem }
.keypoints-title{ margin:0 0 .4rem; font-size:.8125rem; font-weight:700; letter-spacing:.14em; color:var(--ink-soft) }
.keypoints ul{ list-style:none; padding:0; margin:0; display:grid; gap:.35rem }
.keypoints li{ position:relative; padding-left:1.6rem; font-weight:500; line-height:1.7 }
.keypoints li::before{
  content:""; position:absolute; left:.15rem; top:.42em; width:.55rem; height:.95rem;
  border-right:3px solid var(--karashi); border-bottom:3px solid var(--karashi); transform:rotate(40deg);
}

/* ── パート見出し ── */
.part-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; margin:3.25rem 0 .25rem; padding-top:1.25rem; border-top:2px solid var(--ink) }
.pill{ display:inline-block; font-size:.8125rem; font-weight:700; letter-spacing:.1em; padding:.2rem .8rem; border-radius:999px; line-height:1.7 }
.pill.field{ background:var(--noren); color:var(--noren-ink) }
.pill.data{ background:var(--karashi); color:#2A2006 }
.part-note{ font-size:.875rem; color:var(--ink-soft) }

h2{
  font-size:1.3125rem; font-weight:700; line-height:1.55; margin:2.25rem 0 .7rem; text-wrap:balance;
  display:flex; gap:.6rem; align-items:baseline;
}
h2::before{ content:""; flex:0 0 auto; width:.55rem; height:.55rem; background:var(--karashi); transform:translateY(-.15rem) }
.part-head + h2{ margin-top:1.25rem }

/* 箇条書き */
.points, .points ul{ list-style:none; padding:0; margin:0 }
.points{ display:grid; gap:.45rem; margin-bottom:1rem }
.points > li{ position:relative; padding-left:1.2rem }
.points > li::before{ content:""; position:absolute; left:.15rem; top:.82em; width:.42rem; height:.42rem; border-radius:50%; background:var(--ink-soft) }
.points ul{ display:grid; gap:.15rem; margin-top:.25rem }
.points ul li{ position:relative; padding-left:1.1rem; color:var(--ink-soft) }
.points ul li::before{ content:""; position:absolute; left:.1rem; top:.95em; width:.55rem; height:1px; background:var(--ink-soft) }
.mark{ font-weight:700; background:linear-gradient(transparent 62%, var(--karashi-wash) 62%) }

.voice{ margin:1.25rem 0; padding:.25rem 0 .25rem 1rem; border-left:3px solid var(--karashi) }
.voice p{ margin:0 }
.voice cite{ display:block; margin-top:.3rem; font-style:normal; font-size:.8125rem; color:var(--ink-soft) }

.note{ margin:1.5rem 0; background:var(--karashi-wash); padding:1rem 1.15rem; border-radius:8px; font-size:.9375rem; line-height:1.85 }
.note b{ display:block; font-size:.8125rem; letter-spacing:.12em; color:var(--karashi-ink); margin-bottom:.2rem }
.note p:last-child{ margin:0 }

/* ── 伝票 ── */
.slips{ display:grid; grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); gap:1rem; margin:1.25rem 0 1.5rem }
.slip{ margin:0; min-width:0; display:grid; gap:.35rem; align-content:start; background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:.85rem 1rem 1rem }
.slip-head{ display:flex; justify-content:space-between; gap:.5rem; font-size:.75rem; letter-spacing:.2em; color:var(--ink-soft); padding-bottom:.4rem; border-bottom:1px dashed var(--slip-rule) }
.slip-row{ font-weight:500; font-size:1.0625rem; color:var(--hand); padding:.2rem 0; border-bottom:1px solid var(--slip-rule); font-variant-numeric:tabular-nums }
.slip-total{ display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding-top:.3rem }
.slip-total span{ font-size:.8125rem; letter-spacing:.2em; color:var(--ink-soft) }
.slip-total b{ font-weight:700; font-size:1.625rem; color:var(--hand); border-bottom:3px double var(--hand); line-height:1.35; font-variant-numeric:tabular-nums }
.slip figcaption{ font-size:.875rem; line-height:1.75; color:var(--ink-soft); padding-top:.35rem }

/* ── 目盛りの図 ── */
.range{ margin:1.25rem 0 1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:1rem 1rem .9rem }
.range-title{ margin:0; font-size:.875rem; font-weight:700 }
.range-track{ position:relative; height:2.4rem; margin-top:2rem; background:var(--sunken) }
.range-low{ position:absolute; top:0; bottom:0; left:0; width:30%; background:repeating-linear-gradient(135deg, var(--fix-wash) 0 6px, transparent 6px 12px); border:1px dashed color-mix(in srgb, var(--fix) 45%, transparent) }
.range-mid{ position:absolute; top:0; bottom:0; left:50%; width:20%; background:var(--karashi-wash) }
.range-band{ position:absolute; top:0; bottom:0; left:30%; right:0; background:var(--band); color:var(--band-ink); display:flex; align-items:center; padding:0 .7rem; font-size:.8125rem; font-weight:500; white-space:nowrap; overflow:hidden }
.range-floor{ position:absolute; left:30%; top:-1.5rem; bottom:-.35rem; border-left:3px solid var(--karashi); margin-left:-1.5px }
.range-floor span{ position:absolute; left:.45rem; top:-.2rem; font-size:.75rem; font-weight:700; color:var(--karashi-ink); white-space:nowrap; line-height:1.4 }
.range-floor.at-left span{ left:auto; right:.45rem }
.range-ticks{ position:relative; height:1.5rem; margin-top:.35rem; font-size:.75rem; color:var(--ink-soft); font-variant-numeric:tabular-nums }
.range-ticks span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap }
.range-ticks span:first-child{ transform:none }
.range-ticks span:last-child{ transform:translateX(-100%) }
.range-legend{ display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; margin:.5rem 0 0; padding:0; list-style:none; font-size:.8125rem; color:var(--ink-soft) }
.range-legend li{ display:flex; align-items:center; gap:.45rem }
.sw{ width:1.1rem; height:.75rem; flex:0 0 auto }
.sw-low{ background:repeating-linear-gradient(135deg, var(--fix-wash) 0 3px, transparent 3px 6px); border:1px dashed color-mix(in srgb, var(--fix) 45%, transparent) }
.sw-mid{ background:var(--karashi-wash); border:1px solid color-mix(in srgb, var(--karashi) 50%, transparent) }
.sw-band{ background:var(--band) }
.sw-floor{ width:3px; height:1rem; background:var(--karashi) }

/* ── 負のスパイラル ── */
.spiral-title{ margin:1.5rem 0 .1rem; font-size:.8125rem; font-weight:700; letter-spacing:.16em; color:var(--fix) }
.spiral{ list-style:none; padding:0; margin:.6rem 0 1.4rem; display:grid; gap:1.7rem; counter-reset:s }
.spiral li{ position:relative; counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:.65rem 1rem .65rem 2.9rem; line-height:1.7 }
.spiral li::before{ content:counter(s); position:absolute; left:1.05rem; top:.62rem; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums }
.spiral li:not(:last-child)::after{ content:"↓"; position:absolute; left:1.05rem; bottom:-1.65rem; color:var(--ink-soft); line-height:1.6rem }
.spiral li.end{ background:var(--fix-wash); border-color:var(--fix); font-weight:700 }
.spiral li.end::before{ color:var(--fix) }

/* ── 判定カード ── */
.verdict{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:1.1rem 1.2rem 1.15rem; margin:1.25rem 0 }
.verdict-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem; margin-bottom:.6rem }
.verdict h3{ margin:0; font-size:1.125rem; line-height:1.55; font-weight:700; text-wrap:balance }
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.75rem; font-weight:700; letter-spacing:.06em; padding:.15rem .6rem; border-radius:4px; line-height:1.7; white-space:nowrap }
.badge::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:currentColor }
.badge.ok{ background:var(--ok-wash); color:var(--ok) }
.badge.partial{ background:var(--partial-wash); color:var(--partial) }
.badge.none{ background:var(--none-wash); color:var(--none) }
.badge.fix{ background:var(--fix-wash); color:var(--fix) }
.verdict .points{ margin-bottom:.5rem }
.verdict h2{ font-size:1rem; margin:1.4rem 0 .45rem }
.verdict > p{ margin:.25rem 0 .75rem }
.restate{ margin:.85rem 0 0; padding:.75rem .9rem; background:var(--sunken); border-radius:6px; font-size:.9375rem; line-height:1.8 }
.restate b{ display:block; font-size:.75rem; letter-spacing:.12em; color:var(--ink-soft); margin-bottom:.15rem }
.src-tag{ font-size:.75rem; color:var(--ink-soft); white-space:nowrap }

/* ── 表 ── */
.table-wrap{ overflow-x:auto; margin:1rem 0 1.5rem; border:1px solid var(--line); border-radius:8px; background:var(--surface) }
table{ border-collapse:collapse; width:100%; min-width:30rem; font-size:.9375rem; line-height:1.65 }
th, td{ text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line); vertical-align:top }
thead th{ font-size:.8125rem; color:var(--ink-soft); font-weight:700; background:var(--sunken) }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:0 }
td.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
tr.total td, tr.total th{ font-weight:700; background:var(--karashi-wash) }
.table-note{ font-size:.8125rem; color:var(--ink-soft); margin-top:-.9rem }

/* ── 出典 ── */
.sources{ margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--line) }
.sources h2{ font-size:1rem; margin:0 0 .5rem }
.sources h2::before{ display:none }
.sources ol{ margin:0; padding-left:1.4rem; display:grid; gap:.3rem; font-size:.8125rem; line-height:1.7; color:var(--ink-soft) }
.sources a{ word-break:break-all }

/* ── 前後のページ ── */
.pager{ display:grid; grid-template-columns:repeat(auto-fit, minmax(14rem, 1fr)); gap:.75rem; margin-top:2.5rem }
.pager a{ display:grid; gap:.1rem; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:.8rem 1rem }
.pager a:hover{ border-color:var(--indigo) }
.pager span{ font-size:.75rem; color:var(--ink-soft); letter-spacing:.08em }
.pager b{ font-weight:700; line-height:1.55 }
.pager .next{ text-align:right }

/* ── トップページ ── */
.hero{ background:var(--noren); color:var(--noren-ink) }
.hero-inner{
  max-width:72rem; margin:0 auto; padding-block:1.5rem 2.25rem;
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}
.hero .eyebrow{ color:var(--noren-soft); font-weight:500 }
.hero h1{ font-size:clamp(2rem, 7vw, 3.25rem); line-height:1.3; margin:.5rem 0 1rem; letter-spacing:.05em }
.hero-lead{ max-width:34em; margin:0; line-height:1.95 }
.facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(9rem, 1fr)); gap:1rem 1.5rem; margin:1.75rem 0 0; padding-top:1.1rem; border-top:1px solid color-mix(in srgb, var(--noren-soft) 45%, transparent); max-width:40rem }
.facts div{ display:grid; gap:.05rem; min-width:0 }
.facts dt{ font-size:.75rem; letter-spacing:.12em; color:var(--noren-soft) }
.facts dd{ margin:0; font-weight:700; font-size:clamp(1.375rem, 5vw, 1.75rem); line-height:1.35; font-variant-numeric:tabular-nums }
.facts dd small{ font-size:.6em; margin-left:.1em; font-weight:500 }

.section-title{ font-size:1.375rem; font-weight:700; margin:3rem 0 .9rem; line-height:1.5; text-wrap:balance }
.ch-cards{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(17rem, 1fr)); gap:.75rem }
.ch-cards a{ display:grid; gap:.25rem; height:100%; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.95rem 1.05rem 1rem }
.ch-cards a:hover{ border-color:var(--indigo) }
.ch-cards .no{ font-size:.75rem; font-weight:700; letter-spacing:.12em; color:var(--karashi-ink) }
.ch-cards .t{ font-weight:700; line-height:1.55 }
.ch-cards .s{ font-size:.875rem; color:var(--ink-soft); line-height:1.7 }
.ch-cards .kind{ justify-self:start; margin-top:.3rem; font-size:.6875rem; font-weight:700; letter-spacing:.08em; padding:.05rem .5rem; border-radius:4px; background:var(--sunken); color:var(--ink-soft) }

.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.75rem; margin:0 }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem }
.stat dt{ font-size:.8125rem; color:var(--ink-soft); line-height:1.6 }
.stat dd{ margin:.15rem 0 0; font-size:1.5rem; font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums }
.stat dd small{ display:block; font-size:.75rem; font-weight:400; color:var(--ink-soft); margin-top:.2rem; line-height:1.5 }

.how{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:.75rem; counter-reset:h }
.how li{ counter-increment:h; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:.9rem 1rem; line-height:1.75 }
.how li::before{ content:counter(h); display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--noren); color:var(--noren-ink); font-size:.8125rem; font-weight:700; margin-bottom:.4rem }
.how b{ display:block }

.site-footer{ border-top:1px solid var(--line); }
.site-footer-inner{
  max-width:72rem; margin:0 auto; padding-block:1.5rem 2.5rem; font-size:.8125rem; color:var(--ink-soft);
  padding-left:max(16px, env(safe-area-inset-left,0px));
  padding-right:max(16px, env(safe-area-inset-right,0px));
}

@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } }