*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
:root{
  --paper:#fdfdfb; --paper-2:#f6f6f2; --paper-3:#eef0ea;
  --ink:#1c2230; --ink-2:#4a5160; --ink-3:#8a8f9a;
  --line:#d8dad2; --line-2:#c2c5bb;
  --blue:#1e3a5f; --blue-bg:#eef2f7;
  --green:#2e7d5b; --green-bg:#edf5f0;
  --red:#a14040; --red-bg:#f8efef;
  --amber:#8a6d2f; --amber-bg:#f7f2e6;
  --serif:'Noto Serif JP',serif; --sans:'Noto Sans JP',sans-serif; --mono:'JetBrains Mono',monospace;
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.9;font-size:15px;-webkit-font-smoothing:antialiased;}
#prog{position:fixed;top:0;left:0;height:2px;z-index:200;background:linear-gradient(90deg,var(--blue),var(--green));width:0;}
.nav{position:sticky;top:0;z-index:100;background:rgba(253,253,251,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:920px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;}
.nav-brand{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;}
.nav-brand span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--ink-3);font-weight:400;}
.nav a.back{font-size:13px;color:var(--blue);text-decoration:none;font-family:var(--mono);letter-spacing:.04em;}
.nav a.back:hover{text-decoration:underline;}
.wrap{max-width:920px;margin:0 auto;padding:0 24px;}
.hero{padding:54px 0 30px;border-bottom:1px solid var(--line);}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:18px;}
.crumb a{color:var(--ink-3);text-decoration:none;}.crumb a:hover{color:var(--blue);}
.rid-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.rid{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--blue);}
.verdict{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:3px 11px;border-radius:2px;color:var(--red);background:var(--red-bg);border:1px solid var(--red);}
.badge-inv{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:3px 11px;border-radius:2px;color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber);}
.hero h1{font-family:var(--serif);font-size:30px;font-weight:700;line-height:1.5;letter-spacing:.01em;margin-bottom:18px;}
.hero h1 em{font-style:normal;color:var(--red);}
.hero-lead{font-size:16px;color:var(--ink-2);line-height:1.95;max-width:46em;}
.hero-meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;font-size:12.5px;color:var(--ink-3);}
.hero-meta b{color:var(--ink-2);font-weight:500;}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:38px 0;}
.summary>div{background:var(--paper);padding:22px 20px;}
.summary .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:8px;}
.summary .v{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.25;}
.summary .v.pos{color:var(--blue);}
.summary .v.neg{color:var(--red);}
.summary .v.warn{color:var(--amber);}
.summary .s{font-size:11.5px;color:var(--ink-3);margin-top:6px;}
@media(max-width:680px){.summary{grid-template-columns:1fr;}}
.body{padding:18px 0 40px;}
.body h2{font-family:var(--serif);font-size:23px;font-weight:600;margin:46px 0 8px;padding-top:8px;}
.body h2 .no{font-family:var(--mono);font-size:13px;color:var(--blue);margin-right:12px;font-weight:400;}
.body h3{font-family:var(--serif);font-size:17px;font-weight:600;margin:30px 0 10px;color:var(--ink);}
.body p{margin-bottom:16px;color:var(--ink-2);}
.body .rule{width:46px;height:2px;background:var(--blue);margin:14px 0 22px;}
.body strong{color:var(--ink);font-weight:600;}
.body em{font-style:normal;background:linear-gradient(transparent 62%,var(--amber-bg) 62%);padding:0 1px;color:var(--ink);font-weight:500;}
figure{margin:30px 0;border:1px solid var(--line);background:var(--paper);}
figure img{width:100%;display:block;}
figure figcaption{font-size:12px;color:var(--ink-3);padding:11px 16px;border-top:1px solid var(--line);background:var(--paper-2);}
figure figcaption b{color:var(--ink-2);font-weight:500;}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px;}
.dtable caption{caption-side:top;text-align:left;font-size:12px;color:var(--ink-3);padding:11px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);}
.dtable caption b{color:var(--ink-2);font-weight:500;}
.dtable th{background:var(--paper-3);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--ink-2);font-weight:500;padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);}
.dtable td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);}
.dtable td.num{font-family:var(--mono);text-align:right;}
.dtable td.neg{color:var(--red);}
.dtable td.pos{color:var(--blue);}
.dtable tr:last-child td{border-bottom:none;}
.callout{border-left:3px solid var(--blue);background:var(--blue-bg);padding:18px 22px;margin:26px 0;}
.callout.warn{border-left-color:var(--red);background:var(--red-bg);}
.callout p:last-child{margin-bottom:0;}
.callout .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--blue);margin-bottom:8px;}
.callout.warn .lbl{color:var(--red);}
.steps{counter-reset:st;margin:24px 0;}
.steps>li{list-style:none;counter-increment:st;position:relative;padding:0 0 18px 44px;color:var(--ink-2);}
.steps>li::before{content:counter(st);position:absolute;left:0;top:1px;width:28px;height:28px;border:1px solid var(--blue);color:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12.5px;}
.steps b{color:var(--ink);}
.prodlink{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.btn-primary{display:inline-block;padding:12px 24px;background:var(--blue);color:#fff;text-decoration:none;font-size:14px;border-radius:2px;}
.btn-ghost{display:inline-block;padding:12px 24px;border:1px solid var(--line-2);color:var(--ink-2);text-decoration:none;font-size:14px;border-radius:2px;}
.disc{border-top:1px solid var(--line);padding:26px 0 60px;font-size:12px;color:var(--ink-3);line-height:1.85;}
.disc p{margin-bottom:12px;}
.disc b{color:var(--ink-2);font-weight:500;}
@media(max-width:680px){.hero h1{font-size:24px;}.body h2{font-size:20px;}}

/* ── 『何を測っていたのか』シリーズ 追加分 ───────────────── */

/* 結論を最初に出すためのブロック。読者に最後まで読ませてから明かす作りにしない。
   元CSSの .verdict（赤いバッジ）と衝突するため、別名にしてある。 */
.takeaway{border:1px solid var(--line);border-top:3px solid var(--blue);background:var(--paper-2);padding:24px 26px;margin:34px 0;}
.takeaway .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--blue);margin-bottom:12px;}
.takeaway p{font-size:15px;line-height:1.95;color:var(--ink-2);margin-bottom:12px;}
.takeaway p:last-child{margin-bottom:0;}
.takeaway strong{color:var(--ink);}

/* 数字を3つ並べる。1つ目＝取り分、2つ目＝コスト、3つ目＝その比 */
.gap{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0;}
.gap>div{background:var(--paper);padding:20px 18px;text-align:center;}
.gap .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:9px;line-height:1.5;}
.gap .v{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--ink);line-height:1.15;}
.gap .v.cost{color:var(--red);}
.gap .v.ratio{color:var(--blue);}
.gap .s{font-size:11px;color:var(--ink-3);margin-top:7px;}
@media(max-width:680px){.gap{grid-template-columns:1fr;}}

/* 記事に「無い」ものを正直に列挙するブロック。書籍への導線はここだけ。 */
.bookbox{border:1px solid var(--line);background:var(--paper);margin:34px 0;}
.bookbox-h{padding:20px 24px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);}
.bookbox-h .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:8px;}
.bookbox-h h3{font-family:var(--serif);font-size:19px;font-weight:600;margin:0;line-height:1.5;}
.bookbox-b{padding:20px 24px 24px;}
.bookbox-b p{font-size:13.5px;color:var(--ink-2);margin-bottom:14px;}
.bookbox-b ul{list-style:none;margin:0 0 16px;}
.bookbox-b li{position:relative;padding-left:20px;font-size:13.5px;color:var(--ink-2);margin-bottom:8px;line-height:1.8;}
.bookbox-b li::before{content:"—";position:absolute;left:0;color:var(--line-2);}
.bookbox-b li b{color:var(--ink);}

/* シリーズ内の回遊 */
.sibs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:26px 0 0;}
.sib{display:block;border:1px solid var(--line);padding:16px 18px;text-decoration:none;background:var(--paper);transition:border-color .2s;}
.sib:hover{border-color:var(--blue);}
.sib .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--blue);margin-bottom:6px;}
.sib .t{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);line-height:1.5;}
.sib .d{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.7;}
@media(max-width:680px){.sibs{grid-template-columns:1fr;}}

.dtable td.mono{font-family:var(--mono);}
.body h2 .no{font-family:var(--mono);font-size:13px;color:var(--blue);margin-right:12px;font-weight:400;}

/* 列の多い表はスマホ幅に収まらない。図の中だけ横に動かし、
   ページ本体は横スクロールさせない。 */
figure{overflow-x:auto;}
figure>.dtable{min-width:100%;}
@media(max-width:680px){.dtable th,.dtable td{padding:8px 10px;font-size:12.5px;white-space:nowrap;}
  .dtable td:first-child,.dtable th:first-child{white-space:normal;}}