/* LATENT design prototype（PC表示）
   構成は「計器」：数字と区画で情報を整理する。区切りは罫線ではなく、面と白い隙間。
   配色は 白／黒／ライム。
   ink＝報じられた事実、mark（ライム）＝編集部の判断（公開の線・見送り・採点・番号・傍注・予測）。
   mark は「面」と「太い印」にだけ使う。ライムの文字・細い線は作らない（白やグレーの上で読めないため）。

   文字の大きさは固定。列の幅だけがブラウザの幅に合わせて伸び縮みする（最大幅・最小幅なし）。
   横に並ぶ列は flex で組み、比率は flex-grow で決める（例 7:5）。
   幅が足りず列が収まらないときは、はみ出さずに下へ折り返す（@media は使わない）。 */

:root {
  --paper: #ffffff;
  --ink: #0b0b0c;
  --ink-2: #3a3b40;
  --mute: #6d6f77;
  --panel: #f2f2f3;
  --line: #dcdde1;
  --mark: #c6f432;
  --on-ink: #ffffff;
  --on-ink-2: #c4c6cc;
  --on-ink-line: #34363b;

  --jp: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --num: "IBM Plex Mono", "IBM Plex Sans JP", monospace;

  /* 余白 */
  --gutter: 40px;
  --gap: 40px;
  --slit: 2px;      /* 区画の間の白い隙間 */
  --pad: 28px;      /* 区画の内側 */
  --s1: 12px;
  --s2: 20px;
  --s3: 32px;
  --s4: 56px;
  --s5: 88px;
  /* 線 */
  --heavy: 4px;

  color-scheme: only light;   /* ブラウザの自動ダーク化を止め、常に白地で表示する */
}

html { background: var(--paper); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.8 var(--jp);
  font-synthesis: none;
  line-break: strict;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
p, li { text-wrap: pretty; }

.wrap { padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-family: var(--num); font-feature-settings: "tnum", "zero" 0; letter-spacing: 0; }

/* 見出し共通：文節改行 */
.hl { font-weight: 700; word-break: auto-phrase; text-wrap: balance; text-spacing-trim: trim-start; }

/* 判断の札：ライムの下地に黒い文字 */
.no .num, .sec-h .num, .points li::before, .why b, .due, .nref, .side b, .thread .now time {
  background: var(--mark); color: var(--ink);
}

/* ───────── ヘッダー ───────── */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 32px; padding: 30px 0 22px; }

/* 題字：記号はロゴ（黒地に白い L とライムの四角）。logo.svg はこの CSS と同じ場所に置く。
   ロゴの中の L と「LATENT」の文字で、高さと上下の位置をそろえる。
   L の高さは絵の 560/1024、L の下端は絵の下から 232/1024。1cap は、使われている書体の大文字の高さ。 */
.logo { display: inline-block; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: .14em; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo::before {
  content: ""; display: inline-block; margin-right: .42em;
  width: 1.28em; height: 1.28em; vertical-align: -.29em;
  background: url("logo.svg") center / contain no-repeat;
}
@supports (width: 1cap) {
  .logo::before { width: calc(1cap * 1024 / 560); height: calc(1cap * 1024 / 560); vertical-align: calc(1cap * -232 / 560); }
}

.motto { font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--ink-2); padding: 0 0 6px 8px; }
.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.nav a { display: block; font-size: .875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; padding: 4px 0 8px; }
.nav a[aria-current] { font-weight: 700; box-shadow: inset 0 calc(var(--heavy) * -1) 0 var(--mark); }
.nav a:hover { text-decoration: none; box-shadow: inset 0 calc(var(--heavy) * -1) 0 var(--ink); }
.nav .gap { width: 8px; }

/* ───────── 計器の帯：版・記事の数字 ───────── */
.gauge { display: flex; flex-wrap: wrap; gap: var(--slit); }
.cell { flex: 1 1 6.5rem; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 16px 18px 14px; background: var(--panel); }
.cell:first-child { flex: 2.2 1 14.3rem; }
.cell:last-child { flex: 1.8 1 11.7rem; }
.cell .k { font-size: .8125rem; line-height: 1.4; color: var(--mute); }
.cell b { font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.cell b.num { font-size: 1.625rem; font-weight: 500; line-height: 1.1; }
.cell-ed { background: var(--ink); color: var(--on-ink); }
.cell-ed h1, .cell-ed b { font-size: 1.625rem; font-weight: 700; line-height: 1.1; letter-spacing: .04em; }
.cell-ed .k { color: var(--on-ink-2); }
a.cell-ed:hover { text-decoration: none; background: var(--mark); color: var(--ink); }
a.cell-ed:hover .k { color: var(--ink); }

/* ───────── 記事の部品 ───────── */
.no { display: flex; align-items: baseline; gap: 14px; font-size: .8125rem; line-height: 1.4; color: var(--mute); }
.no .num { padding: 1px .5em; font-size: 1rem; font-weight: 500; line-height: 1.4; }

/* 出来事：事実は小さく */
.event { font-size: .875rem; line-height: 1.8; color: var(--ink-2); }
.event b { display: inline-block; margin-right: .9em; padding-right: .9em; border-right: 1px solid var(--line); font-weight: 700; color: var(--ink); }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .8125rem; color: var(--mute); }
.meta span + span::before { content: "／"; margin: 0 .5em; color: var(--line); }
.read { margin-left: auto; font-size: .875rem; font-weight: 700; color: var(--ink); padding: 9px 18px; background: var(--mark); }
.read::after { content: "→"; margin-left: .6em; }
.read:hover { text-decoration: none; background: var(--ink); color: var(--on-ink); }

/* ───────── クリックできるものの見分け ─────────
   クリックできるもの：下線のある文字／矢印のある区画とボタン／ナビとフッターの黒い文字。
   クリックできないもの：矢印も下線もない。まだ行き先のない項目（.off）は灰色の文字にする。 */
.off { color: var(--mute); cursor: default; }
.nav .off { display: block; font-size: .875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; padding: 4px 0 8px; }
.nav .off.cur { color: var(--ink); font-weight: 700; box-shadow: inset 0 calc(var(--heavy) * -1) 0 var(--mark); }   /* いまいる領域 */
.text a, .foot li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* 計器の帯のうち、リンクになっている区画：右上に矢印 */
a.cell { position: relative; }
a.cell::after { content: "↓"; position: absolute; right: 16px; top: 14px; font-size: .875rem; font-weight: 700; line-height: 1.4; }
a.cell.go::after { content: "→"; }
a.cell.back::after { content: "←"; }
a.cell:hover { text-decoration: none; background: var(--mark); color: var(--ink); }
a.cell:hover .k { color: var(--ink); }

/* トップとジャンルの記事の一覧：どの記事も同じ形の行で並べる */
.list { padding-top: var(--s3); }
.empty { padding: var(--s3) 0 var(--s4); border-top: 1px solid var(--ink); font-size: .9375rem; color: var(--ink-2); }

/* 大きな見出し */
.lead-hl { font-size: 3.25rem; line-height: 1.32; letter-spacing: .01em; margin: 4px 0 8px; text-spacing-trim: space-all; }
/* 大きな見出しのカギ括弧は、字面の外の空きを手で詰める（行頭を本文の左端にそろえる） */
.q-open { margin-left: -.5em; }
.q-close { margin-right: -.3em; }

/* この記事の要点 */
.points { padding: var(--s2) 0 0; border-top: 1px solid var(--line); }
.points ol { counter-reset: p; display: flex; flex-direction: column; gap: 6px; }
.points-h { font-size: .8125rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.points li { counter-increment: p; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: baseline; font-size: .9375rem; font-weight: 500; line-height: 1.75; }
.points li::before { content: "0" counter(p); justify-self: start; padding: 0 .45em; font-family: var(--num); font-size: .8125rem; line-height: 1.6; }

/* ───────── トップ：主記事 ───────── */
.lead { display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--s4) 0 var(--s4); }
.lead-text { flex: 7 1 28rem; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.lead-dek { font-size: 1.0625rem; line-height: 1.95; }
.lead-text .meta { margin-top: auto; padding-top: var(--s1); }

/* 図：断面図。ライムの面に、線の上は白い層、線の下は黒い層 */
.fig { display: flex; flex-direction: column; background: var(--mark); padding: var(--pad); }
.lead > .fig { flex: 5 1 20rem; min-width: 0; }
.fig-cap { display: flex; gap: .8em; font-size: .875rem; font-weight: 700; line-height: 1.6; }
.fig-no { flex: none; font-weight: 400; }
.cut { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); gap: 0 12px; margin-top: var(--s2); }
.side-h { font-size: .8125rem; font-weight: 700; line-height: 1.4; padding-top: 16px; }
.layers { display: flex; flex-direction: column; gap: var(--slit); }
.layers li { display: flex; align-items: baseline; gap: 14px; padding: 10px 16px; word-break: auto-phrase; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.layers .num { flex: none; font-size: .8125rem; font-weight: 400; }
.up li { background: var(--paper); }
.up .num { color: var(--mute); }
.down li { background: var(--ink); color: var(--on-ink); }
.down .num { color: var(--on-ink-2); }
.waterline {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  margin: 12px 0; font-size: .8125rem; font-weight: 700; line-height: 1;
}
.waterline::after { content: ""; order: -1; flex: 1; border-top: var(--heavy) solid var(--ink); }
.fig-note { margin-top: auto; padding-top: var(--s2); font-size: 1rem; font-weight: 700; line-height: 1.7; }

/* 記事 02・03：横1行 */
.row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s1) var(--gap);
  padding: var(--s3) 0; border-top: 1px solid var(--ink);
}
.row .no { flex: 0 0 4rem; padding-top: 6px; }
.row-main { flex: 6 1 21rem; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.row h2, .row h3 { font-size: 2rem; line-height: 1.4; }
.row .dek { flex: 4 1 14rem; min-width: 0; font-size: .9375rem; line-height: 1.9; color: var(--ink-2); padding-top: 2px; }
.row .meta { flex: 0 0 10.5rem; justify-content: flex-end; gap: 12px 0; padding-top: 6px; }
.row .meta .read { flex: none; white-space: nowrap; }

/* 記事の行は、行のどこを押しても記事が開く（見出しのリンクを行全体に広げる） */
.row { position: relative; }
.row .hl a::after { content: ""; position: absolute; inset: 0; }
.row:hover .hl a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.row:hover .read { background: var(--ink); color: var(--on-ink); }

/* ───────── 区画：グレーの面・黒い面 ───────── */
.band { display: flex; flex-wrap: wrap; gap: var(--slit); margin-top: var(--s4); }
.band > section { flex: 3.5 1 16.1rem; min-width: 0; }
.band > section:first-child { flex: 5 1 23rem; }
.panel { background: var(--panel); padding: var(--pad) var(--pad) calc(var(--pad) + 8px); }
.panel.dark { background: var(--ink); color: var(--on-ink); }
.sec-h { display: flex; align-items: baseline; gap: 12px; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.sec-h .num { padding: 0 .5em; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.sec-note { margin: 4px 0 var(--s2); font-size: .8125rem; line-height: 1.7; color: var(--mute); }
.dark .sec-note { color: var(--on-ink-2); }

/* グレーの面の上では、区切りは白い線。黒い面の上では、濃い灰の線 */
.wire li, .passed li, .verdicts li { border-top: var(--slit) solid var(--paper); }
.dark li { border-top-color: var(--on-ink-line); }

.wire li { display: grid; grid-template-columns: 3.6rem 6rem minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 13px 0; break-inside: avoid; }
.wire time { font-family: var(--num); font-size: .9375rem; font-weight: 500; }
.wire .area { font-size: .8125rem; color: var(--mute); }
.wire p { font-size: .9375rem; line-height: 1.75; }
.wire .src { margin-left: .7em; font-size: .8125rem; color: var(--mute); text-decoration: underline; text-underline-offset: .2em; white-space: nowrap; }
/* 記事ページ：幅があれば2段 */
.wire.two { columns: 24rem 2; column-gap: var(--gap); }

.passed li { padding: 14px 0; }
.passed s {
  font-size: .9375rem; font-weight: 700; line-height: 1.6;
  text-decoration-line: line-through; text-decoration-color: var(--mark); text-decoration-thickness: 3px;
  word-break: auto-phrase;
}
.passed .why { margin-top: 6px; font-size: .8125rem; line-height: 1.8; color: var(--on-ink-2); }
.why b { display: inline-block; margin-right: .7em; padding: 0 .5em; font-weight: 700; line-height: 1.5; }

.verdicts li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 14px 0; }
.tag {
  display: block; margin-top: 2px; padding: 4px 0; text-align: center;
  font-size: .8125rem; font-weight: 700; line-height: 1.4;
  background: var(--mark); color: var(--ink);
}
.tag.miss { background: var(--ink); color: var(--on-ink); }
.tag.part { background: linear-gradient(to bottom, var(--paper) 0 50%, var(--mark) 50% 100%); }
.tag.open { background: none; box-shadow: inset 0 0 0 1px var(--mute); color: var(--mute); font-weight: 500; }
.verdicts .claim { font-size: .9375rem; font-weight: 500; line-height: 1.7; word-break: auto-phrase; }
.verdicts .note { margin-top: 2px; font-size: .8125rem; line-height: 1.6; color: var(--mute); }
.more { display: inline-block; margin-top: var(--s2); padding-bottom: 3px; font-size: .875rem; font-weight: 700; box-shadow: inset 0 -1px 0 var(--ink); }
.more:hover { text-decoration: none; box-shadow: inset 0 calc(var(--heavy) * -1) 0 var(--mark); }

/* ───────── ニュースレター：黒い区画 ───────── */
.letter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--gap);
  margin-top: var(--slit); padding: var(--s4) var(--pad); background: var(--ink); color: var(--on-ink);
}
.letter > div { min-width: 0; }
.letter > div:first-child { flex: 7 1 24.5rem; }
.letter > div:last-child { flex: 5 1 17.5rem; }
.letter h2 { font-size: 2.25rem; line-height: 1.35; }
.letter p { margin-top: 8px; font-size: .9375rem; line-height: 1.8; color: var(--on-ink-2); }
.letter form { display: flex; gap: var(--slit); }
.letter input {
  flex: 1; min-width: 0; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 0; border-radius: 0; padding: .9em 1em;
}
.letter input::placeholder { color: var(--mute); }
.letter input:focus-visible, .letter button:focus-visible { outline-color: var(--mark); }
.letter button {
  font: inherit; font-size: .9375rem; font-weight: 700; color: var(--ink);
  background: var(--mark); border: 0; border-radius: 0; padding: .9em 1.8em; cursor: pointer; white-space: nowrap;
}
.letter button:hover { background: var(--paper); }
.letter small { display: block; margin-top: 10px; font-size: .8125rem; line-height: 1.6; color: var(--on-ink-2); }

/* ───────── フッター ───────── */
.foot { display: flex; flex-wrap: wrap; gap: var(--s3) var(--gap); padding: var(--s4) 0 var(--s3); font-size: .875rem; }
.foot > div { min-width: 0; flex: 2 1 6rem; }
.foot > div:first-child { flex: 5 1 15rem; }
.foot > div:last-child { flex: 3 1 9rem; }
.foot .logo { font-size: 1.625rem; }
.foot .motto { margin-top: 18px; padding: 0; }
.foot h3 { margin-bottom: 8px; font-size: .8125rem; font-weight: 400; color: var(--mute); }
.foot li { line-height: 2.2; }
.colophon {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  border-top: 1px solid var(--line); padding: var(--s2) 0 var(--s4); font-size: .8125rem; color: var(--mute);
}

/* ───────── 記事ページ ─────────
   記事の頭は、見出しを全幅で置き、その下を 7:5（リード・要点｜出来事）に分ける。
   本文は 2.5:6:3.5（目次｜本文｜傍注）。目次の列は、広い画面で本文の1行が長くなりすぎないために置く。 */
.art-top { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4) 0 0; }
.art-head { display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--s2) 0 var(--s4); }
.art-title { flex: 7 1 28rem; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.standfirst { font-size: 1.125rem; font-weight: 500; line-height: 1.95; }
.byline { margin-top: auto; padding-top: var(--s1); font-size: .8125rem; line-height: 1.6; color: var(--mute); }
.byline strong { font-weight: 700; color: var(--ink); }

.facts { flex: 5 1 20rem; min-width: 0; align-self: flex-start; }
.facts ul { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s1); }
.facts li { position: relative; padding-left: 1.3em; font-size: .9375rem; line-height: 1.8; }
.facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px; background: var(--ink); }
.facts .src { margin-top: var(--s2); padding-top: var(--s1); border-top: var(--slit) solid var(--paper); font-size: .8125rem; line-height: 1.7; color: var(--mute); }
.facts .src a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

.body { display: flex; flex-wrap: wrap; gap: var(--s3) var(--gap); border-top: 1px solid var(--ink); padding: var(--s4) 0 var(--s5); }
.toc-col { flex: 2.5 1 10rem; min-width: 0; }                 /* 高さは本文と同じ（この中で .toc が画面に残る） */
.toc { position: sticky; top: var(--s2); }
.toc h2 { font-size: .8125rem; font-weight: 700; line-height: 1.4; margin-bottom: var(--s1); }
.toc ol { counter-reset: t; }
.toc li { counter-increment: t; display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; font-size: .875rem; line-height: 1.6; padding: 7px 0; border-top: 1px solid var(--line); }
.toc li::before { content: counter(t, decimal-leading-zero); font-family: var(--num); font-size: .75rem; color: var(--mute); }

/* 本文の列：本文 6 ＋ 傍注 3.5（間の 40px を含む） */
.prose { flex: 9.5 1 calc(38rem + var(--gap)); min-width: 0; font-size: 1.0625rem; line-height: 2; }
.sect { display: flex; flex-wrap: wrap; gap: var(--s2) var(--gap); }
.sect + .sect, .sect + .wide, .wide + .sect, .wide + .wide { margin-top: var(--s4); }
.text { flex: 6 1 24rem; min-width: 0; }
.notes { flex: 3.5 1 14rem; min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.notes:not(:empty) { padding-top: 4rem; }   /* 節の見出しの下、最初の段落の高さにそろえる */
.text > * + * { margin-top: 1.3em; }
.text h2 { font-size: 1.625rem; line-height: 1.5; scroll-margin-top: var(--s2); }
.text h2 + * { margin-top: 1em; }
.text p { text-align: justify; text-justify: inter-character; }
.nref { margin: 0 .15em; padding: 0 .35em; font-size: .6875rem; font-weight: 700; line-height: 1.5; vertical-align: .5em; white-space: nowrap; }

/* 傍注：その節の横 */
.side { border-top: var(--heavy) solid var(--mark); padding-top: 10px; font-size: .8125rem; line-height: 1.85; color: var(--ink-2); }
.side b { display: inline-block; margin-right: .7em; padding: 0 .45em; font-weight: 700; line-height: 1.5; }
.side dfn { font-style: normal; font-weight: 700; color: var(--ink); }

/* 本文の列いっぱいに置くもの：図・予測 */
.wide .fig-note { margin-top: 0; }
.wide .layers li { font-size: 1rem; }

.forecast { padding: var(--s3) var(--pad) var(--pad); background: var(--ink); color: var(--on-ink); }
.forecast h2 { font-size: 1.625rem; line-height: 1.5; scroll-margin-top: var(--s2); }
.forecast .sec-note { color: var(--on-ink-2); margin-bottom: var(--s1); }
.forecast li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px var(--gap); padding: var(--s2) 0; border-top: var(--slit) solid var(--on-ink-line); }
.forecast .claim { flex: 1 1 20rem; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.7; word-break: auto-phrase; }
.due { flex: none; padding: 2px .7em; font-size: .8125rem; font-weight: 700; line-height: 1.6; }

/* 経緯・一次情報・更新履歴 */
.text .list-h { font-size: 1.125rem; font-weight: 700; line-height: 1.5; padding-bottom: 10px; border-bottom: 1px solid var(--ink); scroll-margin-top: var(--s2); }
.text .list-h + * { margin-top: 0; }
.thread li, .log li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 0 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.75; }
.log li { grid-template-columns: 11.5em minmax(0, 1fr); }
.thread time, .log time { font-size: .8125rem; color: var(--mute); font-feature-settings: "tnum"; }
.thread .now { font-weight: 700; }
.thread .now time { justify-self: start; padding: 0 .5em; font-weight: 700; }
.refs li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.75; }
.refs a { text-decoration: underline; text-underline-offset: .2em; }
.refs span { font-size: .8125rem; color: var(--mute); }

/* 同じ版のほかの記事・その他の動き */
.others > .sec-h { padding-bottom: var(--s2); }
.rest { margin-top: var(--s4); }

/* ───────── 数値の図 ─────────
   数値は「板」に載せる。白い板＝比較の相手、黒い板（.me）＝この記事の対象。板の間は白い隙間。
   ライムの面の上に直接置く文字は黒だけ（白い文字・白い棒は読めない）。
   1つの記事で、ライムの面にするのは主役の図1つ。ほかはグレーの面（.quiet）。 */
.fig.quiet { background: var(--panel); }
.fig-lede { margin-top: 6px; font-size: .8125rem; line-height: 1.7; }

/* 図の出典行：誰が測ったか。札は「開発元の測定／第三者の測定／利用者の報告／編集部の計算」の4種類 */
.fig-src { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: var(--s2); font-size: .8125rem; line-height: 1.7; }
.fig-src b { flex: none; padding: 0 .5em; font-weight: 700; line-height: 1.5; background: var(--ink); color: var(--on-ink); }
.fig-src span { flex: 1 1 14rem; min-width: 0; }
.fig-src a { text-decoration: underline; text-underline-offset: .2em; }

/* 横棒の図：棒の長さ＝値÷図の中の最大値（--v ÷ --max）。0始まりで、目盛りは図の中で共通。
   値は棒の先に書く。--room は、いちばん長い棒でも値が入るように空けておく幅。 */
.bars { --room: 5.5em; display: flex; flex-direction: column; gap: var(--slit); margin-top: var(--s2); }
.bars-h { padding: var(--s1) 0 6px; font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.bars-h:first-child { padding-top: 0; }
.bars-h small { margin-left: .9em; font-size: inherit; font-weight: 400; }   /* 組の条件の補足 */
/* 行は低く保つ：補足は名前の横、「指数」の見出しと数値も横に並べる */
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s2); padding: 9px 16px; background: var(--paper); font-size: .9375rem; line-height: 1.5; }
.bar-name { flex: 3 1 9rem; min-width: 0; font-weight: 700; word-break: auto-phrase; }
.bar-name small { margin-left: .7em; font-size: .8125rem; font-weight: 400; }
.bar-x { flex: 0 0 5rem; display: flex; align-items: baseline; gap: 8px; font-size: .8125rem; line-height: 1.4; }   /* 単位の違う値（指数など）は棒にせず、数値で置く */
.bar-x b { font-size: 1.25rem; font-weight: 500; line-height: 1.1; }
.bar-set { flex: 9 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bar-line { display: flex; align-items: center; gap: 10px; }
.bar-k { flex: 0 0 3em; font-size: .8125rem; line-height: 1; }
.bar-track { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bar { flex: none; width: calc(var(--v) / var(--max) * (100% - var(--room))); height: 14px; background: var(--ink); }
.bar-v { flex: none; font-weight: 500; line-height: 1; white-space: nowrap; }
.bar-line.sub .bar { background: var(--mute); }
.bar-row.me { background: var(--ink); color: var(--on-ink); }
.bar-row.me .bar { background: var(--paper); }
.bar-row.me .sub .bar { background: var(--on-ink-2); }

/* 前→後の対比：左の板が前（白）、右の板が後（黒）。単位が行ごとに違うので棒にしない */
.shift { display: flex; flex-direction: column; gap: var(--slit); margin-top: var(--s2); }
.shift li { display: flex; flex-wrap: wrap; gap: var(--slit); }
.shift-what { flex: 4 1 12rem; min-width: 0; padding: 9px 16px; background: var(--paper); font-size: .9375rem; font-weight: 700; line-height: 1.5; word-break: auto-phrase; }
.shift-what small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; line-height: 1.6; }
.shift-pair { flex: 6 1 calc(16rem + var(--slit)); min-width: 0; display: flex; flex-wrap: wrap; gap: var(--slit); }
.shift .from, .shift .to { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 10px; }
.shift .from { background: var(--paper); }
.shift .to { background: var(--ink); color: var(--on-ink); }
.shift .k { font-size: .8125rem; line-height: 1.4; }
.shift b { font-size: 1.25rem; font-weight: 700; line-height: 1.3; word-break: auto-phrase; }
.shift b.num { font-weight: 500; }
.chg { align-self: flex-start; padding: 0 .5em; font-size: .8125rem; font-weight: 700; line-height: 1.6; background: var(--mark); color: var(--ink); }   /* 編集部の計算。同じ尺度の値どうしに限る */

/* 断面図で、線の下に区分を重ねるとき（区分の間をあける）。層の中の補足は小さく */
.cut.long-h { grid-template-columns: 9.6em minmax(0, 1fr); }   /* 左の見出しが長いとき */
.cut .gap-top { margin-top: var(--s2); }
.layers small { display: block; margin-top: 2px; font-size: .8125rem; font-weight: 400; line-height: 1.6; }

/* 本文の中の箇条書き */
.text ul.dots { display: flex; flex-direction: column; gap: 6px; }
.text ul.dots li { position: relative; padding-left: 1.3em; }
.text ul.dots li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; height: 6px; background: var(--ink); }

/* 関連する記事：番号の代わりに版の日付を置く */
.row .no.date { flex-basis: 5rem; }

/* ───────── トップ：記事の一覧｜アクセスランキング ─────────
   左が記事の一覧、右がランキング（9:3）。幅が足りないときは、ランキングが一覧の下に回る。
   ランキングを置くのはトップだけ。 */
.top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--gap); }
.top > .list { flex: 9 1 38rem; min-width: 0; }
.sidebar { flex: 3 1 15rem; min-width: 0; margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }   /* 上端を「記事」の見出しにそろえる */
/* 記事では本文・目次・傍注を一組にし、その右に広告を置く。
   各列は通常の文書フローで伸び、収まらないときは下へ回る。 */
.article-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--gap); border-top: 1px solid var(--ink); padding: var(--s4) 0 var(--s5); }
.article-layout > .body { flex: 9 1 38rem; min-width: 0; border-top: 0; padding: 0; }
.article-layout > .sidebar { margin-top: 0; }
.article-layout .notes:empty { display: none; }
.rank { min-width: 0; }
.rank ol { margin-top: var(--s2); }
.rank li { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: var(--slit) solid var(--paper); }
.rank .no { flex: none; }
.rank .hl { flex: 1 1 0; min-width: 0; font-size: .9375rem; line-height: 1.7; }
.rank .hl a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.rank .hl a::after { content: ""; position: absolute; inset: 0; }   /* 項目のどこを押しても記事が開く */
.rank li:hover .hl a { text-decoration-thickness: 2px; }

/* 広告はランキングと別の区画に置く。列幅に追従し、記事リンクとは重ならない。 */
.ad-section, .affiliate-section { min-width: 0; }
.ad-label { margin-bottom: 10px; color: var(--mute); font-size: .75rem; line-height: 1.5; }
.ad-space { min-height: 250px; }
.adsbygoogle[hidden] { display: none !important; }
.ad-placeholder { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--mute); }
.ad-placeholder[hidden] { display: none; }
.ad-placeholder span { font-family: var(--num); font-size: 1.125rem; }
.ad-placeholder small { font-size: .75rem; }
.affiliate-cards { display: flex; flex-direction: column; gap: var(--s2); }
.affiliate-card { display: block; padding: 24px; border: 1px solid var(--line); background: var(--paper); }
.affiliate-card:hover { text-decoration: none; border-color: var(--ink); }
.affiliate-cover { display: block; width: 100%; height: 208px; object-fit: contain; margin-bottom: var(--s2); }
.affiliate-series { font-size: .8125rem; color: var(--mute); }
.affiliate-title { margin-top: 4px; font-size: 1.125rem; line-height: 1.65; }
.affiliate-card:hover .affiliate-title { text-decoration: underline; text-underline-offset: .2em; }
.affiliate-publisher { margin-top: 8px; font-size: .8125rem; color: var(--ink-2); }
.affiliate-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--s2); padding: 12px 16px; background: var(--mark); font-size: .875rem; font-weight: 700; }
.affiliate-disclosure { margin-top: 12px; color: var(--mute); font-size: .75rem; line-height: 1.8; }

/* 記事の行の中身をまとめる箱（.row-body）。中は「見出し・出来事｜紹介文・ボタン」の 6:4。
   幅が足りないときは、紹介文とボタンが一組のまま、見出しの下（見出しの左端）へ回る。
   ボタンだけが下に落ちることはない。 */
.row-body { flex: 1 1 21rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s1) var(--gap); }
.row-body .row-main { flex: 6 1 28rem; }
.row-sub { flex: 4 1 calc(28.5rem + var(--gap)); min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s1) var(--gap); }
.row-sub .dek { flex: 1 1 18rem; }
.row-sub .meta { margin-left: auto; }   /* ボタンは右端 */