/* ============================================================
   本文の図（文字で描く図）｜2026-10-09 L-20261008-19
   画像にせず、ページの中の文字として置く（字が崩れない・スマホで読める・検索とAIに読める）。
   色は深藍・陽アンバー・あたたかい灰の3つまで。部品の作り方は daily/figures/FIGURE_SPEC.md。
   ============================================================ */
article figure.fg{margin:30px 0;padding:20px 18px 14px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-s);line-height:1.6;letter-spacing:.01em}
.fg *{box-sizing:border-box}
.fg .fg-kicker{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--sun-ink);margin:0 0 4px}
.fg .fg-ttl{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 14px;line-height:1.45}
.fg figcaption{font-size:13px;color:var(--sub);text-align:left;margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);line-height:1.7}
.fg .fg-src{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.fg .fg-src a{color:var(--muted)}
.fg b,.fg strong{color:var(--navy)}
.fg .n{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* 部品の中の名前は fg- の下でだけ効かせる。ブログ側に .warn と .v があるので、その2つは fg-warn・fv にしてある */

/* 1 式（何と何を掛けると決まるか） */
.fg-formula .row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:stretch}
.fg-formula .part{min-width:0;background:var(--soft);border-radius:10px;padding:12px 6px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.fg-formula .part .l{font-size:12px;color:var(--sub);font-weight:700}
.fg-formula .part .fv{font-size:17px;font-weight:800;color:var(--navy);line-height:1.35;margin:3px 0;overflow-wrap:anywhere}
.fg-formula .part .fv .n{font-size:21px}
.fg-formula .part .d{font-size:11.5px;color:var(--sub);line-height:1.5}
.fg-formula .part.key{background:var(--navy)}
.fg-formula .part.key .l,.fg-formula .part.key .d{color:rgba(255,255,255,.78)}
.fg-formula .part.key .fv{color:var(--sun-soft)}
.fg-formula .op{align-self:center;font-size:20px;font-weight:800;color:var(--sun-deep)}
.fg-formula .result{margin-top:10px;border:2px solid var(--navy);border-radius:10px;padding:10px 12px;text-align:center;font-weight:800;color:var(--navy);font-size:15.5px;position:relative}
.fg-formula .result::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:8px;background:var(--navy)}
.fg-formula .result small{display:block;font-weight:500;font-size:12px;color:var(--sub)}

/* 2 手順（上から下へ） */
.fg-flow ol{list-style:none;margin:0;padding:0;counter-reset:fg}
.fg-flow li{counter-increment:fg;position:relative;padding:0 0 16px 46px}
.fg-flow li::before{content:counter(fg);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
.fg-flow li::after{content:"";position:absolute;left:15px;top:36px;bottom:2px;width:2px;background:var(--line)}
.fg-flow li:last-child{padding-bottom:0}
.fg-flow li:last-child::after{display:none}
.fg-flow .t{display:block;font-weight:800;color:var(--navy);font-size:15.5px;padding-top:4px}
.fg-flow .d{display:block;font-size:13.5px;color:var(--sub);margin-top:2px}
.fg-flow .who{display:inline-block;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--sun-ink);background:var(--soft2);border-radius:999px;padding:1px 9px}
.fg-flow li.key::before{background:var(--sun);color:var(--navy)}

/* 3 分かれ道（問い → 当てはまるほうへ） */
.fg-branch .q{background:var(--navy);color:#fff;border-radius:10px;padding:11px 14px;font-weight:800;font-size:15px;text-align:center;position:relative;margin-bottom:22px}
.fg-branch .q::after{content:"";position:absolute;left:50%;bottom:-16px;margin-left:-1px;width:2px;height:16px;background:var(--navy)}
.fg-branch .outs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;border-top:2px solid var(--navy);padding-top:14px;position:relative}
.fg-branch .out{border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:#fff;position:relative}
.fg-branch .out::before{content:"";position:absolute;left:50%;top:-15px;margin-left:-1px;width:2px;height:14px;background:var(--navy)}
.fg-branch .out .c{display:block;font-size:13px;color:var(--sub);font-weight:700}
.fg-branch .out .r{display:block;font-size:15.5px;font-weight:800;color:var(--navy);margin-top:3px;line-height:1.4}
.fg-branch .out .d{display:block;font-size:12px;color:var(--sub);margin-top:4px;line-height:1.55}
.fg-branch .out.fg-warn{background:var(--soft2);border-color:var(--sun)}
.fg-branch .out.fg-warn .r{color:var(--sun-ink)}

/* 4 時間の帯 */
.fg-time ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--line)}
.fg-time li{position:relative;padding:0 0 15px 16px}
.fg-time li:last-child{padding-bottom:0}
.fg-time li::before{content:"";position:absolute;left:-26.5px;top:5px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.fg-time li.key::before{background:var(--sun);border-color:var(--sun-deep)}
.fg-time li.past::before{border-color:#A9B0B8}
.fg-time .w{display:block;font-size:12.5px;font-weight:800;color:var(--sun-ink);letter-spacing:.03em}
.fg-time .t{display:block;font-weight:800;color:var(--navy);font-size:15px}
.fg-time .d{display:block;font-size:13px;color:var(--sub)}
.fg-time li.sp{padding:0}
.fg-time li.sp::before{display:none}
.fg-time .span{margin:2px 0 14px -21px;padding:8px 12px 8px 14px;background:var(--soft2);border-left:3px solid var(--sun);font-size:13px;font-weight:700;color:var(--sun-ink)}

/* 5 並べて比べる */
.fg-compare .cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fg-compare .cols.c3{grid-template-columns:1fr}
.fg-compare .col{border-radius:10px;padding:12px 12px 10px;background:var(--soft)}
.fg-compare .col.key{background:var(--navy)}
.fg-compare .col .h{font-weight:800;font-size:14.5px;color:var(--navy);margin:0 0 6px;line-height:1.4}
.fg-compare .col.key .h{color:var(--sun-soft)}
.fg-compare .col ul{margin:0;padding:0;list-style:none}
.fg-compare .col li{font-size:13px;color:var(--ink);padding:5px 0;border-top:1px solid rgba(14,31,48,.1);line-height:1.55}
.fg-compare .col.key li{color:#fff;border-top-color:rgba(255,255,255,.18)}
.fg-compare .col.key b{color:var(--sun-soft)}
.fg-compare .col b{background:linear-gradient(transparent 62%,rgba(232,155,51,.35) 0)}
.fg-compare .col.key b{background:none}
@media(min-width:641px){.fg-compare .cols.c3{grid-template-columns:repeat(3,1fr)}}

/* 6 数字（出典のある数字を大きく） */
.fg-stat .items{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.4rem,1fr));gap:8px}
.fg-stat .it{background:var(--soft);border-radius:10px;padding:12px 10px;text-align:center}
.fg-stat .it .l{display:block;font-size:12px;font-weight:700;color:var(--sub)}
.fg-stat .it .fv{display:block;font-size:26px;font-weight:800;color:var(--navy);line-height:1.25;font-variant-numeric:tabular-nums}
.fg-stat .it .fv small{font-size:13px;font-weight:800;margin-left:1px}
.fg-stat .it .d{display:block;font-size:11.5px;color:var(--sub);line-height:1.5;margin-top:2px}
.fg-stat .it.key{background:var(--navy)}
.fg-stat .it.key .l,.fg-stat .it.key .d{color:rgba(255,255,255,.8)}
.fg-stat .it.key .fv{color:var(--sun-soft)}
/* 6' 横棒で大きさを比べる */
.fg-bars .r{display:grid;grid-template-columns:6.5em 1fr;gap:8px;align-items:center;margin:9px 0}
.fg-bars .l{font-size:12.5px;font-weight:700;color:var(--sub);line-height:1.4}
.fg-bars .b{display:flex;align-items:center;gap:8px}
.fg-bars .bar{height:22px;border-radius:0 5px 5px 0;background:var(--navy);min-width:3px}
.fg-bars .r.key .bar{background:var(--sun)}
.fg-bars .fv{font-size:14.5px;font-weight:800;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
.fg-bars .tag{display:inline-block;font-size:11.5px;font-weight:800;color:var(--sun-ink);background:var(--soft2);border-radius:4px;padding:1px 8px;margin-bottom:6px}

/* 7 書式の見本（紙に見立てる） */
.fg-sheet .paper{background:#FFFEFB;border:1px solid #D9D4C7;border-radius:4px;padding:14px 14px 12px;box-shadow:3px 4px 0 var(--soft);font-size:13px}
.fg-sheet .paper .pt{font-weight:800;color:var(--navy);font-size:14px;text-align:center;margin:0 0 10px;padding-bottom:8px;border-bottom:2px solid var(--navy)}
.fg-sheet table{width:100%;border-collapse:collapse;font-size:12px;margin:0;min-width:0}
.fg-sheet th,.fg-sheet td{border:1px solid #CFC9BB;padding:5px 5px;text-align:left;vertical-align:top;line-height:1.45}
.fg-sheet th{background:var(--soft);color:var(--navy);font-weight:800}
.fg-sheet td.eg{color:var(--sun-ink);font-weight:700}
.fg-sheet .line{display:grid;grid-template-columns:6.6em minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dotted #CFC9BB;line-height:1.6}
.fg-sheet .line b{font-size:12.5px}
.fg-sheet .hint{font-size:11.5px;color:var(--muted);margin:8px 0 0}

/* 8 確かめる一覧 */
.fg-check ul{list-style:none;margin:0;padding:0}
.fg-check li{position:relative;padding:9px 0 9px 34px;border-top:1px solid var(--line)}
.fg-check li:first-child{border-top:0}
.fg-check li::before{content:"";position:absolute;left:2px;top:11px;width:19px;height:19px;border:2px solid var(--navy);border-radius:4px;background:#fff}
.fg-check li::after{content:"";position:absolute;left:8px;top:14px;width:6px;height:10px;border:solid var(--sun-deep);border-width:0 3px 3px 0;transform:rotate(42deg)}
.fg-check .t{display:block;font-weight:800;color:var(--navy);font-size:14.5px}
.fg-check .d{display:block;font-size:12.5px;color:var(--sub)}

/* 9 全体像（まん中の題と、まわりの要素） */
.fg-map .hub{background:var(--navy);color:#fff;border-radius:999px;padding:10px 18px;font-weight:800;font-size:15px;text-align:center;margin:0 auto 20px;max-width:22em;position:relative}
.fg-map .hub::after{content:"";position:absolute;left:50%;bottom:-14px;margin-left:-1px;width:2px;height:14px;background:var(--navy)}
.fg-map .nodes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;border-top:2px solid var(--navy);padding-top:12px;counter-reset:mp}
.fg-map .node{counter-increment:mp;background:var(--soft);border-radius:10px;padding:10px 10px 10px 40px;position:relative}
.fg-map .node::before{content:counter(mp);position:absolute;left:9px;top:10px;width:23px;height:23px;border-radius:50%;background:var(--sun);color:var(--navy);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.fg-map .node .t{display:block;font-weight:800;color:var(--navy);font-size:14px;line-height:1.4}
.fg-map .node .d{display:block;font-size:12px;color:var(--sub);line-height:1.5;margin-top:2px}
.fg-map .node.wide{grid-column:1/-1}
@media(min-width:641px){.fg-map .nodes.n3{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-map .nodes.n3 .node:last-child{grid-column:auto}.fg-branch .outs.o3{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-branch .outs.o3 .out:last-child{grid-column:auto}.fg-branch .outs.o3 .out:nth-child(n+3)::before{display:block}}
@media(max-width:380px){.fg-formula .part .fv{font-size:15.5px}.fg-map .nodes{grid-template-columns:1fr}}
@media print{article figure.fg{box-shadow:none;break-inside:avoid}}

/* 幅からはみ出さない・端数の箱は横いっぱいに（2026-10-09 20本の見本で見つけた崩れの直し） */
.fg .t,.fg .d,.fg .r,.fg .c,.fg .h,.fg li{overflow-wrap:anywhere;min-width:0}
.fg-map .nodes.n3 .node:last-child{grid-column:1/-1}
.fg-branch .outs .out:last-child:nth-child(odd){grid-column:1/-1}
.fg-branch .outs .out:nth-child(n+3)::before{display:none}
.fg-branch .outs.o1{grid-template-columns:minmax(0,1fr)}