@charset "utf-8";
/* ============================================================
   Corason Journal h1（見本A「数字のポスター」comp_a_poster.png に合わせた版・元は g1。ファイル名は e1.css のまま。h1 の層はいちばん下）
   ------------------------------------------------------------
   見た目の芯：白い結果の面と罫線。文は飾らず、何があるかだけを書く。角は直角、影なし。
   切り替えは変数だけ。どの組み合わせでも、ヘッダー・見出し・計算機の位置は同じ（高さは px で固定）。
   2. 3ページの骨組みは同じ：ヘッダー1段（PC 72／スマホ 64）→ パンくずの段（PC 44）→ 見出しの段 .p-hd → 本文。
   3. 押せる物の形：.btn 主ボタン（濃い色の塗り・48px）／.row-b 罫線の行／.seg 切り替え（選択中は強調色の面＋白の ✓）／
      .csw 計算機の切り替え（文字＋2px の下線）／.tl 文字リンク／.reset／.sh-x／.drum-btn／.menu-btn。
   4. 動き：押す所の色だけ（120ms）。面の開閉（開く160ms・閉じる140ms・暗幕120ms）。金額・グラフ・選択の印は0ms。
      スマホのメニューは本文に重なる面（本文は動かない）。動きを減らす設定では全部0。
   ============================================================ */
/* Windows の游ゴシックは Regular が細くかすれるので、端末の Medium／Bold に別名を付けて使う（読み込みなし＝揺れなし） */
@font-face { font-family: "JaGothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 100 549; }
@font-face { font-family: "JaGothic"; src: local("Yu Gothic Bold"), local("YuGothic-Bold"); font-weight: 550 900; }
:root {
  /* h1 見本A「数字のポスター」：白・墨・朱赤。朱赤は増える額と、今いる所の印だけ（選択は墨） */
  --c-bg: #FFFFFF;        /* ページ */
  --c-sf: #FFFFFF;        /* 面・ヘッダー・メニュー */
  --c-field: #FFFFFF;     /* 入力欄の中 */
  --c-unit: #F2F2F2;      /* 入力欄の右の単位の箱 */
  --c-ink: #161616;       /* 本文・金額 */
  --c-ink2: #5F5F5F;      /* 補助文字 */
  --c-line: #D7D7D7;      /* 罫線 */
  --c-edge: #BDBDBD;      /* 入力欄・ボタンの枠 */
  --c-strong: #161616;    /* 太い区切り */
  --c-act: #161616;       /* 選択・フォーカス（墨） */
  --c-act-d: #000000;
  --c-acc: #E63224;       /* 朱赤：今いる所の印 */
  --c-band: #161616;      /* 濃い色の帯 */
  --c-pband: #F2F2F2;
  --c-on: #FFFFFF;
  --c-mark: #E63224;      /* 増える分 */
  --c-bar1: #161616; --c-bar2: #6B6B6B; --c-bar3: #BDBDBD;
  --c-hover: #F4F4F4;
  --c-press: #E8E8E8;
  --c-fill-press: #000000;
  --c-bad: #B3261E; --c-bad-t: #A3211A;
  --c-scrim: rgba(22, 22, 22, .36);
  /* 書体：BIZ UDPGothic＋Schibsted Grotesk（間に合わない時は端末の角ゴと Arial） */
  --f-fb: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "JaGothic", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --f-ja: "BIZ UDPGothic", var(--f-fb);
  --f-num: "Schibsted Grotesk", "Helvetica Neue", Arial, "BIZ UDPGothic", var(--f-fb);
  --w-b: 700;
  --w-nav: 700;
  --w-num: 700;
  --ls-num: -.02em;
  --fs-h1: 40px; --fs-h1-sp: 28px;
  --fs-note: 13px; --fs-label: 14px; --fs-ctl: 15px; --fs-body: 16px; --fs-lead: 17px;
  --fs-main: 124px; --lh-main: 116px; --fs-after: 66px; --lh-after: 62px; --fs-diff: 66px; --lh-diff: 62px;
  --fs-unit: 16px; --fs-input: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 20px; --s5: 28px; --s6: 40px; --s7: 56px; --s8: 72px;
  --ln: 1px solid var(--c-line); --ln-strong: 2px solid var(--c-strong); --ln-ink: 1px solid var(--c-line);
  --r-in: 0; --r-card: 0;
  --h-main: 64px; --h-hd: 64px;
  --h-crumb: 0px; --p-top: 14px; --h-lead: 0px;
  --h-input: 58px; --h-btn: 48px; --h-tap: 44px; --h-seg: 44px; --h-rowb: 52px; --h-more: 48px; --h-drum: 48px;
  --uw: 72px; --ucol: 64px; --dock: 64px; --w-sheet: 600px; --col-in: 472px; --gap-col: 40px;
  --t-color: background-color .12s linear, color .12s linear, border-color .12s linear;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scrollbar-gutter: stable; }
html.is-lock { overflow: hidden; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--fs-body)/1.85 var(--f-ja); letter-spacing: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
:where(h1, h2, h3, p, dl, dd, ol, ul, figure) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-act); }
button { font: inherit; color: inherit; letter-spacing: inherit; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: 0; }
.nb { display: inline-block; white-space: nowrap; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jw { word-break: auto-phrase; text-wrap: balance; }
.wrap { width: min(1200px, 100% - 64px); margin-inline: auto; }
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }
.ic-20 { width: 20px; height: 20px; }
.note-s { font: 400 var(--fs-note)/1.65 var(--f-ja); color: var(--c-ink2); }

/* ── 押せる物の共通の反応（色だけ・120ms・フォーカスの枠は1種類＝赤茶2px） ── */
a, button, summary, .seg > label { transition: var(--t-color); -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--c-act); outline-offset: 2px; }
.seg > label:has(input:focus-visible) { outline: 2px solid var(--c-act); outline-offset: 2px; z-index: 1; }

/* ── 骨組み：パンくずの段・見出しの段（3ページで同じ高さ） ── */
.crumb { display: flex; align-items: center; height: var(--h-crumb); overflow: hidden; }
.crumb ol { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 8px; font: 500 var(--fs-note)/1.4 var(--f-ja); color: var(--c-ink2); white-space: nowrap; }
.crumb li { display: flex; align-items: center; gap: 8px; }
.crumb li + li::before { content: "/"; color: var(--c-edge); font-weight: 400; }
.crumb a { display: inline-flex; align-items: center; min-height: var(--h-tap); color: var(--c-ink2); text-decoration: none; }
.crumb a:hover { color: var(--c-act); }
.crumb [aria-current] { color: var(--c-ink); }
.p-hd { padding-top: var(--p-top); }
.p-hd h1, .a-hd h1 { font: var(--w-b) var(--fs-h1)/48px var(--f-ja); letter-spacing: .01em; }
.p-hd .lead { height: var(--h-lead); margin-top: 8px; overflow: hidden; font: 400 16px/28px var(--f-ja); color: var(--c-ink2); }
.p-hd .handoff { color: var(--c-ink); font-weight: 500; }

/* ── 押せる物 ── */
/* 1. 主ボタン（黒の塗り・直角に近い） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h-btn); padding: 0 24px; border: 0; border-radius: 0; background: var(--c-band); color: var(--c-on); font: var(--w-b) 14px/1.4 var(--f-ja); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--c-act); }
.btn:active { background: var(--c-act-d); }
.btn .ic { stroke-width: 1.8; }
/* 2. 罫線の行（面を開く）。箱にせず、上下の線で挟む */
.row-b { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: var(--h-rowb); margin: 0; padding: 8px 4px 8px 0; border: 0; border-top: var(--ln-ink); border-radius: 0; background: transparent; color: var(--c-ink); font: 500 var(--fs-ctl)/22px var(--f-ja); text-align: left; cursor: pointer; }
.row-b:hover { color: var(--c-act); }
.row-b:active { background: var(--c-press); }
.row-b .ic { color: var(--c-ink); width: 18px; height: 18px; stroke-width: 1.6; }
.row-b:hover .ic { color: var(--c-act); }
.rb-t small { display: block; margin-top: 1px; font: 400 var(--fs-note)/18px var(--f-ja); color: var(--c-ink2); }
/* 3. 切り替え（つながった1組・外周と項目間に線・選択は黒） */
.seg { display: grid; gap: 0; border: 1px solid var(--c-edge); border-radius: var(--r-in); background: var(--c-field); }
.seg.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg > label, .seg > button { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: var(--h-seg); margin: 0; padding: 0 6px; border: 0; border-left: 1px solid var(--c-edge); border-radius: 0; background: transparent; color: var(--c-ink); font: 600 16px/1.2 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-align: center; }
.seg > :first-child { border-left: 0; border-radius: 1px 0 0 1px; }
.seg > :last-child { border-radius: 0 1px 1px 0; }
.seg > label:hover, .seg > button:hover { background: var(--c-hover); }
.seg > label:active, .seg > button:active { background: var(--c-press); }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
/* ✓ は字の左に重ねる（字の位置は選択中でも動かない） */
.seg > label > span, .seg > button > span { position: relative; }
.seg .ck { position: absolute; right: 100%; top: 50%; margin: -6px 5px 0 0; display: block; visibility: hidden; width: 12px; height: 12px; flex: none; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.seg > label:has(input:checked), .seg > button[aria-selected="true"] { background: var(--c-act); color: #fff; }
.seg > label:has(input:checked) .ck, .seg > button[aria-selected="true"] .ck { visibility: visible; }
.seg > label:has(input:checked):active, .seg > button[aria-selected="true"]:active { background: var(--c-fill-press); }
.seg .ja, .seg > button { font: 500 var(--fs-ctl)/1.2 var(--f-ja); }
.seg > label.is-off { background: var(--c-bg); color: var(--c-ink2); cursor: not-allowed; text-decoration: line-through; text-decoration-color: var(--c-edge); }
.seg > label.is-off input { cursor: not-allowed; }
.seg > label.is-off:has(input:checked) { background: var(--c-bg); color: var(--c-ink2); }
.seg > label.is-off:has(input:checked) .ck { visibility: hidden; }
/* 4. 文字リンク（赤茶）・控えめな文字のボタン */
.tl { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-tap); font: var(--w-b) var(--fs-label)/20px var(--f-ja); color: var(--c-act); text-decoration: none; white-space: nowrap; }
.tl:hover { color: var(--c-ink); }
.tl:active { color: var(--c-act-d); }
.reset { min-height: var(--h-tap); padding: 0; border: 0; background: none; font: 500 var(--fs-label)/20px var(--f-ja); color: var(--c-ink2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.reset:hover { color: var(--c-act); }
.reset:active { color: var(--c-act-d); }
.reset.undo { color: var(--c-act); }
/* 面を閉じる × */
.sh-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: var(--r-in); background: none; color: var(--c-ink); cursor: pointer; }
.sh-x:hover { background: var(--c-hover); color: var(--c-act); }
.sh-x:active { background: var(--c-press); }
.sh-x .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; font: var(--w-b) var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink); }
.meta .num { font-weight: 500; color: var(--c-ink2); }

/* ── 面：箱で囲まず、上の太罫で節を始める ── */
.panel { background: var(--c-sf); border-radius: 0; border-top: var(--ln-strong); }
.panel--in { background: transparent; border-radius: 0; border-top: var(--ln-strong); }

/* ── 答えの行（説明／金額／単位。金額の右端をそろえ、単位は基準線に合わせる） ── */
.ax { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--ucol); column-gap: var(--s2); align-items: baseline; }
.ax > .l { font: 500 15px/20px var(--f-ja); min-width: 0; word-break: auto-phrase; }
.ax > .n { text-align: right; white-space: nowrap; font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; font-weight: var(--w-num); letter-spacing: var(--ls-num); }
.ax > .u { font: 500 var(--fs-unit)/1.4 var(--f-ja); white-space: nowrap; letter-spacing: 0; }
.up { color: var(--c-ink); }
/* 計算機の答えの行：金額の箱の位置と幅を固定（値が変わっても箱は動かない。字は右にそろう） */
.c-out .ax { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--ucol); }

/* ── 入力（白い欄・四辺1px・下だけ2px） ── */
.fld { margin: 0; min-width: 0; }
fieldset.fld { border: 0; padding: 0; }
.fld > label, .lbl, .lbl-t { display: block; margin: 0 0 8px; padding: 0; font: 600 var(--fs-label)/21px var(--f-ja); }
.inp { position: relative; min-width: 0; }
.inp input { width: 100%; height: var(--h-input); margin: 0; padding: 0 calc(16px + var(--uw) + 10px) 0 16px; border: 1px solid var(--c-edge); border-radius: 0; box-shadow: none; background: var(--c-field); color: var(--c-ink); text-align: right; font: 600 var(--fs-input)/1 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; -webkit-appearance: none; appearance: none; transition: border-color .12s linear; }
.inp input:hover { border-color: var(--c-ink); }
/* フォーカスは赤茶の2px の輪郭（外に出す＝中の字も枠も動かない） */
.inp input:focus { outline: 2px solid var(--c-act); outline-offset: 3px; }
.inp .unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: var(--uw); font: 400 var(--fs-label)/1 var(--f-ja); color: var(--c-ink2); pointer-events: none; }
#f-rate, #f-years { --uw: 16px; }
.fld.is-bad input, .fld.is-bad .drum-btn { border-color: var(--c-bad); box-shadow: inset 0 0 0 1px var(--c-bad); }
.fld.is-bad input:focus { border-color: var(--c-bad); box-shadow: inset 0 0 0 1px var(--c-bad); outline-color: var(--c-act); }
/* エラー文・補足の1行は先に取っておく（出ても下が動かない） */
.slot { min-height: 20px; margin-top: 6px; }
.slot--2 { min-height: 40px; }
.err { display: flex; gap: 6px; font: 500 var(--fs-note)/20px var(--f-ja); letter-spacing: 0; color: var(--c-bad-t); }
.err .ic { margin-top: 2px; stroke-linecap: round; }
.err:has(span:empty) { display: none; }
.src-l { font: 500 var(--fs-note)/20px var(--f-num); color: var(--c-ink); letter-spacing: 0; }
.src-l:empty { display: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.in-main .row2 { margin-top: 10px; }
.help { margin: 0 0 8px; min-height: 20px; font: 400 var(--fs-note)/20px var(--f-ja); color: var(--c-ink2); }
.help.rn { margin: 8px 0 0; font: 600 var(--fs-note)/20px var(--f-num); color: var(--c-ink); letter-spacing: 0; }
#e-timing { font-family: var(--f-ja); font-weight: 500; color: var(--c-ink2); }
.g-ttl { margin: 0 0 var(--s3); font: var(--w-b) 17px/24px var(--f-ja); }
.note-s.auto { margin: 0 0 var(--s4); }

/* 年数：閉じた形は入力欄と同じ形のボタン */
.drum-btn { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%; height: var(--h-input); padding: 0 14px 0 12px; border: 1px solid var(--c-edge); border-radius: 0; background: var(--c-field); color: var(--c-ink); cursor: pointer; }
.drum-btn:hover { border-color: var(--c-ink); }
.drum-btn:active { background: var(--c-hover); }
.drum-btn:focus-visible, .drum-btn[aria-expanded="true"] { outline: 2px solid var(--c-act); outline-offset: 3px; }
.drum-btn .n { min-width: 2ch; text-align: right; font: 600 var(--fs-input)/1 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; }
.drum-btn .u { font: 400 var(--fs-label)/1 var(--f-ja); color: var(--c-ink2); }
.drum-btn .ic { color: var(--c-ink); }
.drum-btn[aria-expanded="true"] .ic { transform: rotate(180deg); color: var(--c-act); }

/* ═══════ 計算機（トップと計算機ページで同じ部品） ═══════ */
.calc { display: grid; grid-template-columns: var(--col-in) minmax(0, 1fr); gap: var(--gap-col); margin-top: 24px; align-items: start; }
.c-in { position: sticky; top: 16px; padding: 20px 0 8px; }
.opt-row { margin-top: var(--s3); border-bottom: var(--ln-ink); }
/* 詳しく設定：上下の罫線で挟んだ行。開いた中身は同じ紙面の続き（箱を足さない）。閉＝▾／開＝▴ */
.opt-row[aria-expanded="true"] { border-bottom-color: var(--c-line); }
.opt-row[aria-expanded="true"] .ic { transform: rotate(180deg); }
.opt-body { padding: 0 0 var(--s4); border-bottom: var(--ln-ink); }
.opt-body .o-sec:first-child { margin-top: var(--s4); }
.opt-body .pbox { margin-top: var(--s4); }
.opt-body .mdesc dd { font-size: var(--fs-label); line-height: 1.8; }
.opt-body .reset-row { margin-top: var(--s3); }
/* 開いて左が長くなったら、追従をやめて普通に流す（下まで読めるように） */
.c-in:has(.opt-body:not([hidden])) { position: static; }
.c-out { padding: 28px 40px 32px; min-width: 0; }
.r-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); border-bottom: var(--ln); }
.r-hd .ml { flex: none; min-width: 8em; }
.r-hd .ml b { font: var(--w-b) 17px/24px var(--f-ja); }
.r-hd .cnd-line { flex: 1; min-width: 0; text-align: right; font: 500 var(--fs-label)/20px var(--f-num); font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink2); letter-spacing: 0; white-space: nowrap; }
.o-main { padding-top: var(--s4); }
.rl { font: var(--w-b) var(--fs-label)/20px var(--f-ja); }
.o-main .mv { margin-top: 4px; }
.o-main .mv .l { align-self: baseline; }
.o-main .mv .n { font-size: var(--fs-main); line-height: var(--lh-main); }
.o-main .last { margin-top: 4px; font: 400 var(--fs-label)/20px var(--f-ja); color: var(--c-ink2); text-align: right; }
.o-main .last b { margin: 0 2px 0 8px; font-size: 16px; color: var(--c-ink); }
.is-hid { visibility: hidden; }
.o-main.is-wait .n { color: var(--c-ink2); }
.c-out:has(.is-wait) .cnd-line { color: var(--c-ink); font-family: var(--f-ja); }
/* 金利上昇の影響（このサイトの柱：黒の太罫で節を始める） */
.o-rise { margin-top: var(--s5); padding-top: var(--s4); border-top: var(--ln-strong); }
.rh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--s4); }
.rh h2 { font: var(--w-b) 20px/28px var(--f-ja); letter-spacing: -.005em; }
.rh .rc { flex: 1; min-width: 0; text-align: right; font: 500 var(--fs-label)/20px var(--f-num); font-variant-numeric: tabular-nums lining-nums; color: var(--c-ink2); letter-spacing: 0; }
.rsel { display: grid; grid-template-columns: 4fr 3fr; gap: var(--s5); margin-top: var(--s4); }
.o-rise .ax { min-height: 68px; align-items: baseline; padding: 14px 0 10px; border-bottom: var(--ln); }
.o-rise .ax.r1 { margin-top: var(--s4); border-top: var(--ln-ink); }
.o-rise .ax .l { font-weight: var(--w-b); }
.o-rise .r1 .n { font-size: var(--fs-after); line-height: var(--lh-after); }
.o-rise .r2 .n { font-size: var(--fs-diff); line-height: var(--lh-diff); }
.o-rise .r2 .u { font-size: 16px; }
.more-rows { display: grid; gap: 0; margin-top: var(--s5); border-bottom: var(--ln-ink); }
.more-rows .row-b { min-height: var(--h-more); font: 500 15px/22px var(--f-ja); }
.more-rows .row-b + .row-b { border-top: var(--ln); }
.more-rows .row-b .ic { width: 22px; height: 22px; stroke-width: 1.4; }
.basis { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 var(--s5); margin-top: var(--s3); }
.basis .note-s { flex: 1 1 320px; min-height: 40px; padding-top: 12px; }
.basis .tl { flex: none; }
.soon-line { margin-top: var(--s4); font: 400 var(--fs-note)/20px var(--f-ja); color: var(--c-ink2); }

/* ── 年数のドラム（PC は入力の上に重なる面・スマホは下から出る面）。影なし・黒の1px ── */
.drum { position: fixed; z-index: 40; background: var(--c-sf); border-radius: var(--r-in); box-shadow: 0 0 0 1px var(--c-ink); opacity: 0; transition: opacity .14s ease-in; }
.drum.in { opacity: 1; transition: opacity .16s ease-out; }
.drum-hd { display: none; }
.drum-win { position: relative; height: calc(var(--h-drum) * 5); overflow: hidden; border-radius: var(--r-in); }
.drum-sel { position: absolute; left: 0; right: 0; top: calc(var(--h-drum) * 2); height: var(--h-drum); border-radius: 0; background: var(--c-act); pointer-events: none; }
.drum-list { position: relative; z-index: 1; height: 100%; margin: 0; padding: calc(var(--h-drum) * 2) 0; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); outline: none; cursor: grab; touch-action: pan-y; }
.drum-list::-webkit-scrollbar { display: none; }
.drum-list li { display: flex; align-items: baseline; justify-content: center; gap: 3px; height: var(--h-drum); padding-top: 13px; scroll-snap-align: center; font: 600 21px/1 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--c-ink2); user-select: none; }
.drum-list li small { font: 500 var(--fs-note)/1 var(--f-ja); }
.drum-list li[aria-selected="true"] { color: #fff; }
.drum-list:focus-visible { box-shadow: inset 0 0 0 2px var(--c-act); }

.o-sec { margin-top: var(--s5); }
.pbox .pcalc { margin-top: 4px; font: 400 var(--fs-label)/22px var(--f-ja); }
.pbox .pcalc b { font: var(--w-b) 19px/20px var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; margin: 0 2px; }
.pbox .note-s { margin-top: 4px; }
.mdesc { margin-top: var(--s4); }
.mdesc > div { padding: 12px 0; border-bottom: var(--ln); }
.mdesc > div:first-child { border-top: var(--ln); }
.mdesc dt { font: var(--w-b) var(--fs-label)/20px var(--f-ja); }
.mdesc dd { margin-top: 4px; font: 400 var(--fs-label)/1.8 var(--f-ja); color: var(--c-ink2); }
.reset-row { display: flex; gap: var(--s5); }
.pane-in { margin-top: var(--s3); }
.pane-h { margin-top: var(--s6); padding-top: var(--s3); border-top: var(--ln-ink); font: var(--w-b) 16px/24px var(--f-ja); }
.pane-p { margin-top: var(--s3); font: 400 var(--fs-label)/1.8 var(--f-ja); }
.pane-p b { font-weight: var(--w-b); }
.ktbl { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.ktbl caption { text-align: right; padding-bottom: 6px; font: 400 var(--fs-note)/18px var(--f-ja); color: var(--c-ink2); }
.ktbl th, .ktbl td { padding: 12px 0 12px 12px; border-bottom: var(--ln); text-align: right; }
.ktbl th:first-child { padding-left: 0; text-align: left; font: 500 var(--fs-label)/20px var(--f-ja); word-break: auto-phrase; }
.ktbl thead th { word-break: auto-phrase; border-bottom: var(--ln-strong); font: var(--w-b) var(--fs-note)/18px var(--f-ja); color: var(--c-ink); vertical-align: bottom; }
.ktbl td { font: var(--w-b) 17px/22px var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; white-space: nowrap; }
.lg { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font: 500 var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink2); }
.lg i { display: inline-block; width: 20px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 3px solid var(--c-ink); }
.lg i.k2 { border-top: 2px dashed var(--c-ink2); }
.lg i.k3 { height: 10px; border: 0; background: var(--c-mark); }
.chart { display: block; width: 100%; margin-top: var(--s2); }
.chart text { font-family: var(--f-num); font-size: 13px; fill: var(--c-ink2); font-variant-numeric: tabular-nums lining-nums; }
.more { margin-top: var(--s4); border-top: var(--ln); }
.more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--h-rowb); font: var(--w-b) var(--fs-label)/20px var(--f-ja); color: var(--c-ink); cursor: pointer; list-style: none; border-bottom: var(--ln); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--c-act); }
.more[open] summary .ic { transform: rotate(180deg); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--fs-label); margin-top: var(--s3); }
.dtable caption { text-align: left; font: 500 var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink2); padding: var(--s3) 0 6px; }
.dtable th, .dtable td { padding: 8px 0 8px 8px; border-bottom: var(--ln); text-align: right; font-weight: 400; }
.dtable th:first-child { text-align: left; padding-left: 0; }
.dtable td { font-family: var(--f-num); font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }
.dtable thead th { font: var(--w-b) var(--fs-note)/1.4 var(--f-ja); color: var(--c-ink); border-bottom: var(--ln-ink); }
.cdx-b { margin-top: var(--s6); padding: 0 0 4px; background: none; }
.cdx-b .pane-h { margin-top: 0; }
.cdx-b p { margin-top: var(--s2); font: 400 var(--fs-label)/1.8 var(--f-ja); color: var(--c-ink2); }
.cdx-b p + p { margin-top: 4px; }
/* 早見表：押せるマス（直角・細い枠・選択は黒） */

/* ── 写真・記事の行 ── */
.ph { background: var(--c-line); overflow: hidden; position: relative; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph img.is-missing { visibility: hidden; }
.arow { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 24px; align-items: start; padding: 20px 0; border-bottom: var(--ln); color: var(--c-ink); text-decoration: none; }
.arow .ph { aspect-ratio: 3 / 2; border-radius: 0; }
.arow h3 { margin-top: 6px; font: var(--w-b) 18px/1.55 var(--f-ja); letter-spacing: 0; transition: var(--t-color); }
.arow:hover h3 { color: var(--c-act); }
.alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); border-top: var(--ln-strong); }
.sec { margin-top: var(--s8); }
.sec-hd { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.sec-hd h2 { flex: none; font: var(--w-b) 28px/1.35 var(--f-ja); letter-spacing: -.005em; }

/* ═══════ 計算機ページの下 ═══════ */
.about { margin-top: var(--s8); display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; padding-top: var(--s4); border-top: var(--ln-strong); }
.about h2 { font: var(--w-b) 24px/1.4 var(--f-ja); letter-spacing: -.005em; }
.about dl > div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s5); padding: var(--s4) 0; border-bottom: var(--ln); }
.about dl > div:first-child { padding-top: 4px; }
.about dt { font: var(--w-b) var(--fs-label)/1.8 var(--f-ja); }
.about dd { font: 400 16px/1.85 var(--f-ja); }
.formula { display: inline-block; margin: 8px 0; padding: 8px 0; font: 600 18px/1.6 var(--f-num); letter-spacing: 0; }
.relrow { margin-top: var(--s7); display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 20px 0; border-top: var(--ln-strong); border-bottom: var(--ln); color: var(--c-ink); text-decoration: none; }
.relrow .ph { aspect-ratio: 3 / 2; border-radius: 0; }
.relrow h2 { margin-top: 6px; font: var(--w-b) 20px/1.5 var(--f-ja); transition: var(--t-color); }
.relrow p { margin-top: 4px; font: 400 var(--fs-label)/1.7 var(--f-ja); color: var(--c-ink2); }
.relrow .tl { pointer-events: none; }
.relrow:hover h2 { color: var(--c-act); }

/* スマホの答えの帯（出し入れは動かさない）。黒の帯 */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(var(--dock) + env(safe-area-inset-bottom)); padding: 8px 20px calc(8px + env(safe-area-inset-bottom)); background: var(--c-band); color: var(--c-on); border-top: 0; display: none; flex-direction: column; justify-content: center; transform: translateY(110%); }
.dock.on { transform: none; }
.dock .dl { font: 500 var(--fs-note)/1.4 var(--f-ja); color: rgba(255, 255, 255, .78); }
.dock .dv { margin-top: 2px; font: var(--w-b) 18px/1.25 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; white-space: nowrap; }
.dock .dv small { font: 500 var(--fs-note)/1 var(--f-ja); margin-left: 2px; letter-spacing: 0; }
.dock .dv em { font-style: normal; color: var(--c-mark); }
.dock .dv .dv-s { font: 500 var(--fs-label)/1.3 var(--f-ja); letter-spacing: 0; }
.dock .dv .dv-k { margin-right: 6px; font: 500 var(--fs-note)/1 var(--f-ja); letter-spacing: 0; }

/* ═══════ 記事 ═══════ */
.a-grid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; column-gap: 72px; }
.a-hd, .a-ph, .a-body { grid-column: 1; }
.a-hd { padding-top: var(--p-top); }
.a-ex { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 24px; margin-top: var(--p-top); }
.a-hd .lead { margin-top: var(--s4); margin-bottom: var(--s4); font: 400 var(--fs-lead)/30px var(--f-ja); color: var(--c-ink); }
.concl { margin-top: var(--s5); padding: 20px 28px 24px; }
.concl .t { font: 500 var(--fs-label)/1.6 var(--f-ja); }
.concl .big { display: flex; align-items: baseline; gap: var(--s2); margin-top: 4px; }
.concl .big .n { font: var(--w-b) 48px/1.1 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.035em; }
.concl .big .u { font: 500 16px/1.4 var(--f-ja); }
.concl .big .l { font: 500 15px/1.5 var(--f-ja); }
.concl .s { margin-top: 4px; font: 400 15px/26px var(--f-ja); color: var(--c-ink2); }
.concl .bars { margin-top: var(--s4); }
.concl .btn { display: none; }
.bars { display: block; width: 100%; overflow: visible; }
.bars text { font-family: var(--f-num); font-size: 13px; fill: var(--c-ink2); font-variant-numeric: tabular-nums lining-nums; }
.bars .bl { font-family: var(--f-ja); font-weight: 500; }
.bars .bv { font-size: 13px; fill: var(--c-ink); font-weight: 600; }
.learn { margin-top: var(--s5); border-bottom: var(--ln); }
.learn summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: var(--w-b) 15px/1.5 var(--f-ja); cursor: pointer; list-style: none; border-top: var(--ln-ink); }
.learn summary::-webkit-details-marker { display: none; }
.learn summary:hover { color: var(--c-act); }
.learn summary .ic { color: var(--c-ink); }
.learn[open] summary .ic { transform: rotate(180deg); }
.learn li { border-top: var(--ln); }
.learn a { display: flex; align-items: baseline; gap: 16px; min-height: var(--h-tap); padding: 10px 0; color: var(--c-ink); text-decoration: none; font: 500 15px/1.6 var(--f-ja); }
.learn a .no { flex: none; width: 20px; font: var(--w-b) 15px/1 var(--f-num); color: var(--c-ink2); }
.learn a:hover { color: var(--c-act); }
.byline { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: var(--s3); font: 500 var(--fs-note)/22px var(--f-ja); color: var(--c-ink2); }
.byline b { font-weight: 500; color: var(--c-ink); margin-left: 6px; }
.a-ph { margin-top: var(--s5); }
.a-ph .ph { height: 240px; border-radius: 0; }
.a-ph figcaption { margin-top: 8px; font: 400 var(--fs-note)/1.6 var(--f-ja); color: var(--c-ink2); }
.ex { padding: 20px 0 0; background: transparent; --ucol: 22px; }
.ex-t { font: var(--w-b) 16px/1.5 var(--f-ja); }
.ex .cnd { margin-top: var(--s3); }
.ex .now { margin-top: var(--s4); padding-top: 12px; border-top: var(--ln-strong); }
.ex .now .l { display: block; font: 500 var(--fs-label)/1.5 var(--f-ja); }
.ex .now .n { font-size: 38px; line-height: 1.2; }
.ex .now .u { font-size: 16px; font-weight: 500; }
.ex .btn { width: 100%; margin-top: 24px; }
.ex .note-s { margin-top: var(--s2); }
.a-body { margin-top: var(--s2); }
.a-body h2 { margin-top: var(--s7); padding-top: var(--s3); border-top: var(--ln-strong); font: var(--w-b) 26px/1.5 var(--f-ja); letter-spacing: -.005em; }
.a-body p { margin-top: var(--s4); font: 400 16px/1.85 var(--f-ja); }
.cnd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s4); background: transparent; border-top: var(--ln-ink); border-bottom: var(--ln); }
.cnd > div { padding: 12px 16px 12px 0; }
.cnd > div + div { padding-left: 16px; box-shadow: inset 1px 0 0 var(--c-line); }
.cnd dt { font: 400 var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink2); }
.cnd dd { margin-top: 2px; font: var(--w-b) 22px/1.35 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.cnd dd small { font: 500 var(--fs-note)/1 var(--f-ja); margin-left: 2px; letter-spacing: 0; }
.cnd dd.ja { font: 500 var(--fs-label)/1.6 var(--f-ja); letter-spacing: 0; }
.cnd--list { display: block; background: none; box-shadow: none; border-radius: 0; border-top: var(--ln-ink); border-bottom: 0; margin-top: var(--s3); }
.cnd--list > div, .cnd--list > div + div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: 12px 0; border-bottom: var(--ln); box-shadow: none; }
.cnd--list dt { font: 400 var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink2); }
.cnd--list dd { margin: 0; font: var(--w-b) 17px/1.4 var(--f-num); letter-spacing: -.02em; }
.cnd--list dd.ja { font: var(--w-b) 15px/1.4 var(--f-ja); }
.tbl { margin-top: var(--s5); }
.mtbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mtbl caption { text-align: left; padding-bottom: 12px; font: var(--w-b) 17px/1.5 var(--f-ja); }
.mtbl caption span { display: block; font: 400 var(--fs-note)/1.6 var(--f-ja); color: var(--c-ink2); }
.mtbl col.c0 { width: 120px; }
.mtbl thead th { padding: 10px 14px; border-top: var(--ln-strong); border-bottom: var(--ln-ink); font: var(--w-b) var(--fs-label)/1.4 var(--f-ja); color: var(--c-ink); text-align: right; }
.mtbl thead th:first-child { text-align: left; padding-left: 0; }
.mtbl tbody th { padding: 14px 0; text-align: left; font: var(--w-b) 18px/1.2 var(--f-num); letter-spacing: -.01em; border-bottom: var(--ln); vertical-align: top; }
.mtbl td { padding: 12px 14px; text-align: right; border-bottom: var(--ln); vertical-align: top; }
.mtbl td b { display: block; font: var(--w-b) 22px/1.3 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; }
.mtbl td span { display: block; margin-top: 2px; font: 500 var(--fs-label)/1.3 var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; color: var(--c-ink2); }
.mtbl td.hl { background: var(--c-sf); box-shadow: inset 0 0 0 2px var(--c-ink); }
.mtbl td.hl span { color: var(--c-ink); font-weight: var(--w-b); }
.mtbl td.hl span em { font-style: normal; background: linear-gradient(transparent 58%, var(--c-mark) 58%); }
.a-body p.tnote { margin-top: 10px; font: 400 var(--fs-note)/1.6 var(--f-ja); color: var(--c-ink2); }
.callout { margin-top: var(--s5); padding: 20px 28px 22px; --ucol: 64px; }
.callout .t { font: var(--w-b) var(--fs-label)/1.6 var(--f-ja); }
.callout .ax { margin-top: 4px; }
.callout .n { font-size: 44px; line-height: 1.15; }
.callout .d { margin-top: 6px; padding-top: 8px; border-top: var(--ln); }
.callout .d .n { font-size: 24px; }
.callout .big { margin-top: 4px; padding-top: 0; border-top: 0; }
.callout .big .n { font-size: 38px; }
.fig { margin-top: var(--s5); }
.fig-t { font: var(--w-b) 17px/1.5 var(--f-ja); padding-bottom: var(--s2); border-bottom: var(--ln-ink); }
.fig figcaption { margin-top: var(--s2); font: 400 var(--fs-note)/1.6 var(--f-ja); color: var(--c-ink2); }
.fig .chart { margin-top: var(--s4); }
.fig .chart text.lb { font-family: var(--f-ja); fill: var(--c-ink); font-weight: var(--w-b); font-size: 14px; }
.fig .chart text.v { fill: var(--c-ink); font-weight: var(--w-b); font-size: 14px; }
.note { margin-top: var(--s5); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3); padding: 18px 24px; background: var(--c-sf); border-left: 3px solid var(--c-ink); border-radius: 0; font: 400 15px/1.85 var(--f-ja); }
.note b { display: block; font-weight: var(--w-b); }
.note .ic { margin-top: 5px; stroke-linecap: round; }
.try { margin-top: var(--s4); padding: 20px 28px 28px; }
.try-t { font: var(--w-b) 16px/1.5 var(--f-ja); }
.try .btn { margin-top: var(--s4); }
.src { margin-top: var(--s7); border-top: var(--ln-strong); }
.src dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); padding: 12px 0; border-bottom: var(--ln); font: 400 var(--fs-label)/1.8 var(--f-ja); }
.src dt { font-weight: var(--w-b); }
.src a { display: inline-flex; align-items: center; min-height: var(--h-tap); }
.related { margin-top: var(--s8); }
.related .alist { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s6); }
.related .arow { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); }
.related .arow h3 { font-size: 16px; }
.relcalc { margin-top: var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: 24px 32px; }
.relcalc h2 { margin-top: 4px; font: var(--w-b) 22px/1.5 var(--f-ja); }
.relcalc p { margin-top: 4px; font: 400 var(--fs-label)/1.7 var(--f-ja); color: var(--c-ink2); }

/* ── フッター：紙面の奥付（紙の地・上に黒の2px） ── */
.ft { margin-top: 0; background: var(--c-sf); color: var(--c-ink); border-top: 2px solid var(--c-strong); padding: 48px 0 32px; }
.ft-grid { display: grid; grid-template-columns: var(--col-in) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-col); }
.ft-name { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ft-tag { margin-top: 12px; font: 400 var(--fs-label)/1.8 var(--f-ja); color: var(--c-ink2); }
.ft h2 { padding-bottom: 8px; margin-bottom: 4px; border-bottom: var(--ln); font: var(--w-b) var(--fs-note)/1.5 var(--f-ja); color: var(--c-ink); }
.ft ul a { display: inline-flex; align-items: center; min-height: var(--h-tap); font: 400 var(--fs-label)/1.5 var(--f-ja); color: var(--c-ink); text-decoration: none; }
.ft ul a:hover { color: var(--c-act); }
.ft-base { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-top: var(--s6); padding-top: 16px; border-top: var(--ln-ink); font: 400 var(--fs-note)/1.7 var(--f-ja); color: var(--c-ink2); }
.ft-base a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h-tap); color: var(--c-act); text-underline-offset: 3px; }
.ft-base a:hover { color: var(--c-ink); }
.ft-base .cr { margin-left: auto; }

/* ═══════ 中くらいの幅 ═══════ */
@media (max-width: 1180px) {
  :root { --fs-main: 60px; --lh-main: 66px; --fs-after: 34px; --lh-after: 40px; }
  .calc { grid-template-columns: 352px minmax(0, 1fr); gap: var(--s5); }
  .c-out { padding: 28px 28px 32px; }
  .about { grid-template-columns: 352px minmax(0, 1fr); gap: var(--s5); }
  .a-grid { grid-template-columns: minmax(0, 1fr) 280px; column-gap: var(--s7); }
}
@media (max-width: 1023px) {
  .wrap { width: calc(100% - 48px); }
  .calc { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s4); }
  .c-in { padding: 20px 0 8px; }
  .c-out { padding: 24px; }
  .rsel { grid-template-columns: 1fr; gap: var(--s3); }
  .rsel .help--pad { display: none; }
  .about { grid-template-columns: 1fr; gap: var(--s4); }
  .related .alist { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════ スマホ ═══════ */
@media (max-width: 767px) {
  :root { --h-hd: 72px; --p-top: 20px; --h-lead: 52px; --fs-main: 56px; --lh-main: 60px; --fs-after: 32px; --lh-after: 38px; --fs-diff: 26px; --lh-diff: 32px; --fs-unit: 15px; --fs-input: 22px; --h-input: 52px; --ucol: 52px; }
  .wrap { width: calc(100% - 40px); }
  .gnav { gap: 0; }
  .gnav a { padding: 0 10px; font-size: var(--fs-label); }
  .gnav a::after { left: 10px; right: 10px; bottom: 6px; }
  .gnav .pc { display: none; }
  .crumb { display: none; }
  .p-hd h1, .a-hd h1 { font-size: 28px; line-height: 40px; }
  .p-hd .lead { margin-top: 6px; font-size: 16px; line-height: 26px; }

  /* 並び：見出し → 借入額 → 年利・返済期間 → 毎月の返済額 → 詳しく設定 → 金利上昇の影響 → 詳細を開く3行 → 計算の条件 */
  .calc { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: var(--s4); }
  .c-in, .c-out { display: contents; }
  .in-main { order: 1; padding: 16px 0 4px; border-top: var(--ln-strong); }
  .in-main .row2 { margin-top: 2px; }
  .slot { margin-top: 4px; }
  .note-s.auto { margin-bottom: 10px; }
  .g-ttl { margin-bottom: 8px; font-size: 16px; }
  .o-top { order: 2; padding: 14px 20px 10px; background: var(--c-sf); }
  .r-hd { display: block; padding-bottom: 8px; }
  .r-hd .ml b { font-size: 15px; line-height: 22px; }
  .r-hd .cnd-line { text-align: left; font-size: var(--fs-note); line-height: 18px; }
  .o-main { padding-top: 10px; }
  .rl { font-size: var(--fs-note); font-weight: 500; color: var(--c-ink2); }
  .o-main .mv { margin-top: 0; }
  .o-main .mv .ax { grid-template-columns: minmax(0, 1fr) var(--ucol); }
  .o-main .mv .ax .l { grid-column: 1 / -1; }
  .opt-row { order: 3; margin-top: 0; padding: 8px 4px 8px 0; }
  .opt-body { order: 3; }
  .o-rise { order: 4; margin-top: var(--s5); padding: 16px 20px 4px; border-top: var(--ln-strong); background: var(--c-sf); }
  .rh { display: block; }
  .rh h2 { font-size: 19px; line-height: 26px; }
  .rh .rc { text-align: left; font-size: var(--fs-note); line-height: 20px; }
  .rsel { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s3); }
  .rsel .help--pad { display: none; }
  .o-rise .ax { min-height: 58px; padding: 12px 0 8px; }
  .o-rise .ax.r1 { margin-top: var(--s4); }
  .o-rise .ax .l { font-size: var(--fs-label); }
  .o-rise .ax.r2 { border-bottom: 0; }
  .more-rows { order: 5; margin-top: var(--s5); }
  .basis { order: 6; display: block; margin-top: var(--s2); }
  .basis .note-s { padding-top: 0; min-height: 0; }
  .soon-line { margin-top: var(--s5); }
  .seg > label, .seg > button { padding: 0 4px; }

  .drum { left: 0; right: 0; bottom: 0; top: auto; border-radius: 0; box-shadow: none; border-top: 2px solid var(--c-ink); padding: 0 20px calc(16px + env(safe-area-inset-bottom)); opacity: 1; transform: translateY(100%); transition: transform .14s ease-in; }
  .drum.in { transform: none; transition: transform .16s ease-out; }
  .drum-hd { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
  .drum-t { font: var(--w-b) 17px/1.4 var(--f-ja); }
  .drum-win { border-top: var(--ln); }
  /* 面：中身で高さを変えず、ほぼ全画面で固定。中だけスクロール */

  .sec { margin-top: var(--s7); }
  .sec-hd h2 { font-size: 22px; }
  .alist { grid-template-columns: 1fr; }
  .arow { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .arow h3 { margin-top: 4px; font-size: 15px; line-height: 1.6; }
  .arow .meta { font-size: var(--fs-note); }
  .about { margin-top: var(--s7); }
  .about h2 { font-size: 22px; }
  .about dl > div { grid-template-columns: 1fr; gap: 4px; }
  .relrow { grid-template-columns: 104px minmax(0, 1fr); gap: var(--s4); margin-top: var(--s7); }
  .relrow h2 { font-size: 16px; }
  .relrow p, .relrow .tl { display: none; }
  .dock { display: flex; }
  body.dockpage { padding-bottom: calc(var(--dock) + env(safe-area-inset-bottom)); }

  .a-grid { display: flex; flex-direction: column; }
  .a-hd { order: 1; } .a-ph { order: 2; } .a-body { order: 3; }
  .a-ex { display: none; }
  .a-hd .lead { font-size: 16px; line-height: 28px; margin-top: 12px; }
  .concl { padding: 16px 20px 20px; margin-top: var(--s4); }
  .concl .big .n { font-size: 40px; }
  .concl .btn { display: flex; width: 100%; margin-top: var(--s4); }
  .a-ph .ph { height: 180px; }
  .a-body h2 { margin-top: 44px; font-size: 22px; }
  .a-body p { font-size: 16px; line-height: 29px; }
  .cnd { grid-template-columns: 1fr 1fr; }
  .cnd > div, .cnd > div + div { padding: 10px 12px 10px 0; box-shadow: none; }
  .cnd > div:nth-child(2n) { padding-left: 12px; box-shadow: inset 1px 0 0 var(--c-line); }
  .cnd > div:nth-child(n+3) { border-top: var(--ln); }
  .cnd dd { font-size: 19px; }
  .cnd--list > div, .cnd--list > div + div { padding: 9px 0; box-shadow: none; border-top: 0; }
  .mtbl col.c0 { width: 60px; }
  .mtbl thead th { padding: 8px 6px; font-size: var(--fs-note); }
  .mtbl tbody th { font-size: 15px; padding: 12px 0; }
  .mtbl td { padding: 10px 6px; }
  .mtbl td b { font-size: 16px; letter-spacing: -.01em; }
  .mtbl td span { font-size: var(--fs-note); }
  .callout { padding: 16px 20px 18px; --ucol: 52px; }
  .callout .n { font-size: 36px; }
  .callout .d .n { font-size: 21px; }
  .callout .big .n { font-size: 30px; }
  .note { padding: 14px 16px; }
  .try { padding: 16px 20px 20px; }
  .try .btn { width: 100%; }
  .src dl > div { grid-template-columns: 1fr; gap: 2px; }
  .related { margin-top: var(--s7); }
  .related .arow { grid-template-columns: 104px minmax(0, 1fr); }
  .relcalc { display: block; padding: 18px 20px 20px; }
  .relcalc .btn { width: 100%; margin-top: var(--s4); }

  .ft { margin-top: 80px; padding: 36px 0 28px; }
  .ft-grid { grid-template-columns: 1fr; gap: 24px; }
  .ft-base .cr { margin-left: 0; }
}
@media (max-width: 374px) {
  :root { --fs-main: 46px; --lh-main: 52px; --fs-after: 30px; --lh-after: 36px; }
  .wrap { width: calc(100% - 32px); }
  .o-top { padding-left: 16px; padding-right: 16px; }
  .o-rise { padding-left: 16px; padding-right: 16px; }
  .gnav a { padding: 0 8px; }
  .mtbl col.c0 { width: 56px; }
  .mtbl td { padding: 10px 4px; }
  .mtbl thead th { font-size: 12px; letter-spacing: 0; }
  .err, #e-timing { font-size: 12px; }
  .dock .dv { font-size: 16px; }
}
/* ═══════ g1：ヘッダー3段・メニュー・帯・記事の並び・テーマ・見本の切り替え ═══════ */
main { padding-bottom: 96px; }
.meta > span:first-child { color: var(--c-act); }
.tl:hover, .ft ul a:hover, .ft-base a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── ヘッダー：濃い色の細い帯24 → ロゴとナビ72 → カテゴリ44（合計140・3ページで同じ） ── */
.hd { position: relative; height: var(--h-hd); background: var(--c-sf); }
.hd-band { height: var(--h-band); background: var(--c-band); color: var(--c-on); }
.hd-band-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: hidden; font: 500 12px/1 var(--f-ja); letter-spacing: .03em; white-space: nowrap; }
.hd-band-in .pc { color: rgba(255, 255, 255, .78); }
.hd-main { height: var(--h-main); border-bottom: var(--ln); }
.hd-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-tap); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.logo-a { font: 600 24px/1 var(--f-num); letter-spacing: .055em; }
.logo-b { font: 500 24px/1 var(--f-num); letter-spacing: -.015em; }
.gnav { display: flex; align-items: center; gap: 2px; }
.gnav a { position: relative; display: inline-flex; align-items: center; height: var(--h-tap); padding: 0 12px; font: var(--w-nav) 14px/1 var(--f-ja); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.gnav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: transparent; transition: background-color .12s linear; }
.gnav a:hover { color: var(--c-act); }
.gnav a[aria-current] { color: var(--c-act); }
.gnav a[aria-current]::after { background: var(--c-act); }
/* メニューのボタン：開いても幅は同じ（ナビが動かない） */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 120px; height: var(--h-tap); margin-left: 12px; padding: 0; border: 1px solid var(--c-ink); border-radius: 0; background: transparent; color: var(--c-ink); font: var(--w-nav) 14px/1 var(--f-ja); cursor: pointer; white-space: nowrap; }
.menu-btn:hover { background: var(--c-hover); }
.menu-btn:active { background: var(--c-press); }
.menu-btn .mb-c, .menu-btn .mb-x { display: none; }
.menu-btn[aria-expanded="true"] { background: var(--c-ink); color: #fff; }
.menu-btn[aria-expanded="true"] .mb-o, .menu-btn[aria-expanded="true"] .mb-plus { display: none; }
.menu-btn[aria-expanded="true"] .mb-c, .menu-btn[aria-expanded="true"] .mb-x { display: inline; }
.catnav { height: var(--h-cat); box-shadow: inset 0 -1px 0 var(--c-line); }
.catnav .wrap { height: 100%; }
.catnav ul { display: flex; align-items: stretch; height: 100%; overflow: hidden; }
.catnav a { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 14px; font: 500 13px/1 var(--f-ja); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.catnav li:first-child a { padding-left: 0; }
.catnav a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; background: transparent; }
.catnav li:first-child a::after { left: 0; }
.catnav a:hover { color: var(--c-act); }
.catnav a[aria-current] { color: var(--c-act); }
.catnav a[aria-current]::after { background: var(--c-act); }

/* ── メニューの面：ヘッダーのすぐ下に重なる（本文は動かない）。白・下に濃い2px・影なし ── */
.menu { position: fixed; left: 0; right: 0; top: var(--h-hd); z-index: 35; overflow-y: auto; overscroll-behavior: contain; background: var(--c-sf); border-bottom: 2px solid var(--c-strong); }
.menu-in { display: grid; grid-template-columns: 240px 320px minmax(0, 1fr); gap: 40px; padding: 28px 0 32px; }
.m-h { padding-bottom: 8px; border-bottom: 2px solid var(--c-strong); font: var(--w-b) 12px/1.5 var(--f-ja); color: var(--c-ink2); letter-spacing: .04em; }
.m-list li, .m-cats li { border-bottom: var(--ln); }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; font: 500 16px/1.5 var(--f-ja); color: var(--c-ink); text-decoration: none; }
.m-row small { flex: none; font: 500 12px/1 var(--f-ja); color: var(--c-ink2); }
.m-row.is-soon { color: var(--c-ink2); cursor: default; }
.m-row.is-soon small { padding: 5px 6px; border: 1px solid var(--c-line); }
a.m-row:hover { color: var(--c-act); }
a.m-row[aria-current] { color: var(--c-act); }
.m-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.m-cats a { display: flex; align-items: center; min-height: 48px; font: 500 15px/1.4 var(--f-ja); color: var(--c-ink); text-decoration: none; }
.m-cats a:hover { color: var(--c-act); }
.m-art { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 0; border-bottom: var(--ln); color: var(--c-ink); text-decoration: none; font: 500 16px/1.6 var(--f-ja); }
.m-art .ph { display: block; aspect-ratio: 4 / 3; }
.m-art small { display: block; margin-bottom: 2px; font: var(--w-b) 12px/1.5 var(--f-ja); color: var(--c-act); }
.m-art:hover > span:last-child { color: var(--c-act); }
.m-note { margin-top: 10px; font: 400 12px/1.6 var(--f-ja); color: var(--c-ink2); }


/* ── 見出しの段：小さな見出し（3ページとも24px）→ 題 → 説明 ── */
.kicker { display: flex; align-items: center; height: 24px; margin-bottom: 6px; font: var(--w-b) 13px/1 var(--f-ja); color: var(--c-act); letter-spacing: .02em; white-space: nowrap; }
.kicker .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--c-act); font: var(--w-b) 12px/1 var(--f-ja); }

/* ── 計算機の切り替え（文字＋2pxの下線。準備中は押せない） ── */
.csw { display: flex; gap: 0 32px; margin-top: 24px; border-bottom: var(--ln); }
.csw-i { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font: var(--w-b) 15px/1.3 var(--f-ja); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.csw-i small { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--c-line); font: 500 12px/1 var(--f-ja); color: var(--c-ink2); }
.csw-i.is-soon { color: var(--c-ink2); cursor: default; }
.csw-i[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-act); }
a.csw-i:hover { color: var(--c-act); }

/* ── 計算機：入力側はページの地のまま・結果側は面 ── */
.panel--in { background: transparent; }
.c-out.panel { background: var(--c-sf); }

/* ── 写真の帯「建物と経営の現場から」 ── */
.pband { margin-top: 48px; padding: 28px 0 32px; background: var(--c-pband); }
.sec-hd { align-items: baseline; }
.sec-note { font: 400 12px/1.5 var(--f-ja); color: var(--c-ink2); }
.sec-hd h2 { font: var(--w-b) 24px/1.4 var(--f-ja); letter-spacing: .01em; }
.pb-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 4px; }
.pb-i { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: start; color: var(--c-ink); text-decoration: none; }
.pb-i .ph { aspect-ratio: 4 / 3; }
.pb-t { margin-top: 4px; font: var(--w-b) 16px/1.6 var(--f-ja); }
.pb-i:hover .pb-t { color: var(--c-act); text-decoration: underline; text-underline-offset: 4px; }

/* ── 最新の記事（先頭を大きく・ほかは写真付きの行） ── */
.sec { margin-top: 56px; }
.latest { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 var(--gap-col); padding-top: 24px; border-top: var(--ln-strong); }
.lead-art { display: block; color: var(--c-ink); text-decoration: none; }
.lead-art .ph { aspect-ratio: 3 / 2; }
.lead-art .meta { margin-top: 16px; }
.lead-art h3 { margin-top: 6px; font: var(--w-b) 22px/1.5 var(--f-ja); }
.lead-ex { margin-top: 8px; font: 400 15px/1.8 var(--f-ja); color: var(--c-ink2); }
.lead-art:hover h3, .arow:hover h3, .relrow:hover h2 { color: var(--c-act); text-decoration: underline; text-underline-offset: 4px; }
.alist--rows { display: block; border-top: 0; }
.alist--rows .arow:first-child { padding-top: 0; }
.arow { grid-template-columns: 144px minmax(0, 1fr); }
.arow .ph, .relrow .ph { aspect-ratio: 4 / 3; }
.arow h3 { font-size: 18px; }
.related .alist { border-top: var(--ln-strong); }

/* ── テーマから探す（4列×2段・上罫線＋名前＋短い説明） ── */
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.tgrid a { display: block; min-height: 44px; padding: 14px 0 22px; border-top: var(--ln-strong); color: var(--c-ink); text-decoration: none; }
.tgrid b { display: block; font: var(--w-b) 17px/1.5 var(--f-ja); }
.tgrid span { display: block; margin-top: 4px; font: 400 13px/1.65 var(--f-ja); color: var(--c-ink2); }
.tgrid a:hover b { color: var(--c-act); text-decoration: underline; text-underline-offset: 4px; }

/* ── 計算機への案内の帯（濃い色・白いボタン） ── */
.gband { margin-top: 72px; background: var(--c-band); color: var(--c-on); }
.gband-in { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 112px; padding: 24px 0; }
.gb-k { font: var(--w-b) 12px/1.5 var(--f-ja); color: rgba(255, 255, 255, .78); letter-spacing: .04em; }
.gband h2 { margin-top: 2px; font: var(--w-b) 22px/1.5 var(--f-ja); }
.gb-p { margin-top: 4px; font: 400 14px/1.7 var(--f-ja); color: rgba(255, 255, 255, .84); }
.btn--w { flex: none; background: #fff; color: var(--c-ink); }
.btn--w:hover { background: var(--c-pband); color: var(--c-ink); }
.btn--w:active { background: var(--c-press); }
.gband :focus-visible, .relcalc :focus-visible, .hd-band :focus-visible { outline-color: #fff; }

/* ── このサイトについて ── */
.site { margin-top: 72px; display: grid; grid-template-columns: var(--col-in) minmax(0, 1fr); gap: var(--gap-col); padding-top: 20px; border-top: var(--ln-strong); }
.site h2 { font: var(--w-b) 24px/1.4 var(--f-ja); }
.site-b p { font: 400 16px/1.85 var(--f-ja); }
.site-b p + p { margin-top: 8px; }
.site-b .tl { margin-top: 8px; }

/* ── 記事の末尾の案内（濃い色の帯の形） ── */
.relcalc.panel { background: var(--c-band); color: var(--c-on); border-top: 0; padding: 28px 32px; }
.relcalc .meta > span:first-child { color: rgba(255, 255, 255, .78); }
.relcalc h2 { color: var(--c-on); }
.relcalc p { color: rgba(255, 255, 255, .84); }
.relcalc .btn { background: #fff; color: var(--c-ink); }
.relcalc .btn:hover { background: var(--c-pband); }

/* ── フッター ── */
.ft-name { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.ft-themes ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }

@media (max-width: 1180px) {
  .catnav a { padding: 0 10px; }
  .catnav a::after { left: 10px; right: 10px; }
  :root { --col-in: 352px; --gap-col: 28px; }
}
@media (max-width: 1023px) {
  :root { --col-in: 320px; --gap-col: 20px; }
  .catnav a { padding: 0 8px; font-size: 12px; }
  .pb-list { grid-template-columns: 1fr; gap: 16px; }
  .latest { grid-template-columns: 1fr; }
  .alist--rows { margin-top: 20px; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site { grid-template-columns: 1fr; gap: 12px; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════ g1 スマホ ═══════ */
@media (max-width: 767px) {
  :root { --h-main: 64px; --h-hd: 64px; --h-lead: 52px; --fs-main: 52px; --lh-main: 58px; --fs-after: 32px; --lh-after: 38px; }
  main { padding-bottom: 72px; }
  .hd-band-in { justify-content: flex-start; }
  .hd-band-in .pc { display: none; }
  .catnav { display: none; }
  .logo { gap: 6px; }
  .logo-a, .logo-b { font-size: 20px; }
  .menu-btn { width: 64px; margin-left: 0; font-size: 13px; }
  .menu-btn .ic { display: none !important; }
  .menu-in { display: block; padding: 20px 0 40px; }
  .m-col + .m-col { margin-top: 28px; }
  .m-art { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; font-size: 15px; }
  /* 下の帯が出ている間は隠す（帯と重ねない・位置を動かさない＝揺れない）。上か下までスクロールすると出る */

  .p-hd { height: calc(var(--p-top) + 40px + 6px + var(--h-lead)); }
  .p-hd h1, .a-hd h1 { font-size: var(--fs-h1-sp); line-height: 40px; }
  .p-hd .lead { margin-top: 6px; }
  .csw { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 20px; }
  .csw-i { flex-direction: column; justify-content: center; gap: 4px; min-height: 56px; font-size: 14px; text-align: center; white-space: normal; }
  .calc { margin-top: 20px; }

  .pband { margin-top: 40px; padding: 24px 0 28px; }
  .sec-hd { flex-wrap: wrap; gap: 2px 12px; }
  .sec-hd h2 { font-size: 21px; }
  .pb-list { grid-template-columns: 1fr; gap: 16px; }
  .pb-i { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .pb-t { font-size: 15px; }
  .sec { margin-top: 44px; }
  .latest { grid-template-columns: 1fr; padding-top: 20px; }
  .lead-art h3 { font-size: 19px; }
  .lead-ex { font-size: 14px; }
  .alist--rows { margin-top: 20px; border-top: var(--ln); }
  .alist--rows .arow:first-child { padding-top: 16px; }
  .arow { grid-template-columns: 104px minmax(0, 1fr); }
  .arow h3 { font-size: 15px; }
  .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .tgrid a { padding: 12px 0 18px; }
  .tgrid b { font-size: 15px; }
  .gband { margin-top: 56px; }
  .gband-in { flex-direction: column; align-items: stretch; gap: 20px; padding: 28px 0; }
  .gband h2 { font-size: 19px; }
  .btn--w { width: 100%; }
  .site { margin-top: 56px; grid-template-columns: 1fr; gap: 12px; }
  .relcalc.panel { padding: 20px; }
  .ft-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 374px) {
  .logo-a, .logo-b { font-size: 18px; }
}

/* ═══════ g1 2回目：ヘッダー1段・ロゴの仮置き・記事のカード・フッター1行 ═══════ */
/* ロゴは仮（描いたロゴが決まったら .logo-mark の中を画像に置きかえる） */
.logo-mark { display: inline-block; font: var(--w-b) 20px/1 var(--f-ja); letter-spacing: 0; color: var(--c-ink); white-space: nowrap; }
.gnav { gap: 8px; }
.menu-btn { display: none; }
/* 記事のカード（写真4:3・日付・題） */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap-col); padding-top: 24px; border-top: var(--ln-strong); }
.cards--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: block; color: var(--c-ink); text-decoration: none; }
.card .ph { aspect-ratio: 4 / 3; }
.card .meta { margin-top: 12px; }
.card h3 { margin-top: 4px; font: var(--w-b) 18px/1.6 var(--f-ja); }
.card:hover h3 { color: var(--c-act); text-decoration: underline; text-underline-offset: 4px; }
.related .sec-hd h2 { font: var(--w-b) 22px/1.4 var(--f-ja); }
/* フッター：名前と2つのリンク／運営の1行 */
.ft { margin-top: 0; padding: 32px 0 24px; }
.ft-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.ft-name .logo-mark { font-size: 18px; }
.ft-links { display: flex; gap: 8px 28px; }
.ft-links a { display: inline-flex; align-items: center; min-height: var(--h-tap); font: 500 var(--fs-label)/1.5 var(--f-ja); color: var(--c-ink); text-decoration: none; }
.ft-links a:hover { color: var(--c-act); text-decoration: underline; text-underline-offset: 4px; }
.ft-base { margin-top: 20px; }
.ft-base p a { display: inline-block; min-height: 0; padding: 12px 0; margin: -12px 0; line-height: 20px; color: var(--c-act); }
@media (max-width: 1023px) {
  .cards, .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .logo-mark { font-size: 18px; }
  .menu-btn { display: inline-flex; width: 72px; }
  .menu .m-list li:first-child { border-top: 0; }
  .cards, .cards--2 { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: var(--ln-strong); }
  .card { display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; padding: 16px 0; border-bottom: var(--ln); }
  .card .ph { grid-row: 1 / span 2; }
  .card .meta { margin-top: 0; }
  .card h3 { font-size: 16px; }
  .ft { margin-top: 0; }
  .ft-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* 動きを減らす設定：全部0 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { transition: none !important; animation: none !important; }
}
.o-main .ax > .l { font: var(--w-b) var(--fs-label)/20px var(--f-ja); }
@media (max-width: 767px) { .o-main .ax > .l { font: 500 var(--fs-note)/20px var(--f-ja); color: var(--c-ink2); } }
.concl .t, .concl .s, .callout .t { word-break: auto-phrase; }
@media (max-width: 374px) { .p-hd .lead { font-size: 15px; letter-spacing: 0; } }

/* ═══════════════════════════════════════════════════════════
   h1：見本A「数字のポスター」（comp_a_poster.png）に合わせた層
   10/28 r2：字を全体に小さく（どれも大きすぎた）・左右の余白（中身は 1104px まで）・入力は左／答えは右・
   下の3行はその行のすぐ下に開く（右から出る面はやめた）。
   白い地・墨の字・1本の縦罫。左に大きな答え、右に入力（単位は右の灰色の箱）。
   選択は墨の面＋白の ✓。朱赤は「増える額」と「今いる所」の印だけ。
   ═══════════════════════════════════════════════════════════ */
:root {
  --fs-h1: 30px; --fs-h1-sp: 22px;
  --fs-main: 84px; --lh-main: 84px; --fs-after: 42px; --lh-after: 46px; --fs-diff: 42px; --lh-diff: 46px;
  --fs-input: 22px; --h-input: 50px; --uw: 60px;
  --col-in: 384px; --gap-col: 40px; --h-more: 52px;
}
.wrap { width: min(1104px, 100% - 96px); }
main { padding-bottom: 88px; }
a { color: var(--c-ink); }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.num { font-weight: 600; }
/* Schibsted Grotesk の等幅数字はカンマが広く空くので、数字は全部プロポーショナル */
*, *::before, *::after { font-variant-numeric: lining-nums proportional-nums !important; }
.meta > span:first-child { color: var(--c-ink2); }

/* ── ヘッダー：1段 64px。ロゴは字だけの仮置き。今いる所は朱赤の字と3pxの下線 ── */
.hd-main { border-bottom: 1px solid var(--c-line); }
.logo-img { display: block; width: auto; height: 21px; max-width: none; }
.gnav { gap: 4px; height: 100%; }
.gnav a { height: var(--h-main); padding: 0 16px; font: 700 15px/1 var(--f-ja); }
.gnav a::after { left: 8px; right: 8px; bottom: -1px; height: 3px; }
.gnav a:hover { color: var(--c-acc); }
.gnav a[aria-current] { color: var(--c-acc); }
.gnav a[aria-current]::after { background: var(--c-acc); }
.menu-btn { border-color: var(--c-edge); }

/* ── 見出しの段（3ページで同じ位置）。パンくずは出さない ── */
.crumb { display: none; }
main > .wrap { position: relative; }
.p-hd { padding-top: var(--p-top); }
.p-hd h1, .a-hd h1 { font: 700 var(--fs-h1)/40px var(--f-ja); letter-spacing: .01em; }
.p-hd { display: flex; align-items: baseline; gap: 0 24px; }
.p-hd .lead { height: auto; margin: 0; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); white-space: nowrap; }
.p-hd .handoff { color: var(--c-ink); font-weight: 700; }

/* 計算機の切り替え：見出しの行の右（入力の列の上）。準備中は押せない */
.csw { position: absolute; right: 0; top: calc(var(--p-top) - 2px); width: auto; display: flex; justify-content: flex-end; gap: 0 24px; margin: 0; border: 0; }
.csw-i { min-height: 44px; font: 700 13px/1.3 var(--f-ja); }
.csw-i[aria-current]::after { bottom: 4px; height: 2px; background: var(--c-ink); }
.csw-i small { height: 20px; border-color: var(--c-line); }

/* ── 計算機：左＝入力（384px）｜縦罫1本｜右＝答え ── */
.calc { display: block; margin-top: 12px; }
.c-main { display: grid; grid-template-columns: var(--col-in) minmax(0, 1fr); align-items: stretch; }
.c-out.panel, .panel--in { background: transparent; border-top: 0; }
.c-out { grid-column: 2; grid-row: 1; padding: 14px 0 24px 48px; }
.c-in { grid-column: 1; grid-row: 1; position: static; padding: 14px var(--gap-col) 20px 0; border-right: 1px solid var(--c-line); }
.c-in:has(.opt-body:not([hidden])) { position: static; }

/* 入力：はっきりした四角＋右の単位の箱 */
.fld > label, .lbl, .lbl-t { margin: 0 0 6px; font: 700 14px/20px var(--f-ja); color: var(--c-ink); }
.in-main .row2 { display: block; margin-top: 0; }
.in-main .fld + .fld, .in-main .row2 { margin-top: 6px; }
.in-main .row2 .fld + .fld { margin-top: 6px; }
.slot { min-height: 22px; margin-top: 6px; }
.inp input { height: var(--h-input); padding: 0 calc(var(--uw) + 14px) 0 16px; border: 1px solid var(--c-edge); text-align: left; font: 500 var(--fs-input)/1 var(--f-num); letter-spacing: -.01em; }
.inp input:hover { border-color: var(--c-ink); }
.inp input:focus { outline: 2px solid var(--c-ink); outline-offset: 2px; border-color: var(--c-ink); }
.inp .unit { top: 1px; right: 1px; bottom: 1px; width: var(--uw); transform: none; display: flex; align-items: center; justify-content: center; background: var(--c-unit); border-left: 1px solid var(--c-edge); font: 400 14px/1 var(--f-ja); color: var(--c-ink); }
#f-rate, #f-years { --uw: 60px; }
.drum-btn { position: relative; justify-content: flex-start; height: var(--h-input); padding: 0 calc(var(--uw) + 14px) 0 16px; border: 1px solid var(--c-edge); }
.drum-btn:hover { border-color: var(--c-ink); }
.drum-btn:focus-visible, .drum-btn[aria-expanded="true"] { outline: 2px solid var(--c-ink); outline-offset: 2px; border-color: var(--c-ink); }
.drum-btn .n { min-width: 0; text-align: left; font: 500 var(--fs-input)/1 var(--f-num); }
.drum-btn .u { position: absolute; top: 0; right: 0; bottom: 0; width: var(--uw); display: flex; align-items: center; justify-content: center; background: var(--c-unit); border-left: 1px solid var(--c-edge); font: 400 14px/1 var(--f-ja); color: var(--c-ink); }
.drum-btn .ic { position: absolute; right: calc(var(--uw) + 16px); top: 50%; margin-top: -8px; color: var(--c-ink2); }
.drum-btn[aria-expanded="true"] .ic { color: var(--c-ink); }
.fld.is-bad input, .fld.is-bad .drum-btn { border-color: var(--c-bad); box-shadow: inset 0 0 0 1px var(--c-bad); }

/* 詳しく設定：上の罫だけの行。開くと、すぐ下に同じ紙面の続き */
.opt-row { min-height: 56px; margin-top: 8px; padding: 8px 4px 8px 0; border-top: 1px solid var(--c-line); border-bottom: 0; }
.opt-row .rb-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font: 700 14px/22px var(--f-ja); }
.opt-row .rb-t small { display: inline; margin: 0; font: 400 12px/18px var(--f-ja); color: var(--c-ink2); }
.opt-row .ic { width: 18px; height: 18px; }
.opt-row[aria-expanded="true"] { border-bottom: 0; }
.opt-body { padding: 0 0 8px; border-bottom: 0; }
.opt-body .o-sec:first-child { margin-top: 8px; }
.o-sec { margin-top: var(--s4); }
.reset-row { gap: 24px; }

/* 切り替え：離れた四角の並び。選択は墨の面＋白の ✓ */
.seg { gap: 10px; border: 0; background: transparent; }
.seg > label, .seg > button { min-height: var(--h-seg); padding: 0 8px; border: 1px solid var(--c-edge); background: var(--c-field); font: 600 15px/1.2 var(--f-num); }
.seg > :first-child { border-left: 1px solid var(--c-edge); }
.seg > label:hover, .seg > button:hover { border-color: var(--c-ink); background: var(--c-field); }
.seg > label:active, .seg > button:active { background: var(--c-press); }
.seg > label:has(input:checked), .seg > button[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.seg > label:has(input:checked):active, .seg > button[aria-selected="true"]:active { background: #000; }
.seg .ck { margin-right: 6px; width: 12px; height: 12px; margin-top: -6px; }
.seg .ja, .seg > button { font: 400 14px/1.2 var(--f-ja); }
.seg > label:has(input:checked) .ja, .seg > button[aria-selected="true"] { font-weight: 700; }
.seg small { margin-left: 3px; font: 400 12px/1 var(--f-ja); font-feature-settings: "palt" 1; letter-spacing: .02em; }
.seg > label.is-off { background: var(--c-field); border-style: dashed; border-color: var(--c-line); color: #8A8A8A; text-decoration: none; }
.seg > label.is-off:has(input:checked) { background: var(--c-field); color: #8A8A8A; }

/* ── 答え（左の列） ── */
.r-hd { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px 16px; flex-wrap: wrap; padding: 0; border: 0; }
.r-hd .ml { min-width: 0; }
.r-hd .ml b { font: 700 19px/28px var(--f-ja); }
.r-hd .cnd-line { flex: 0 1 auto; text-align: left; font: 500 13px/20px var(--f-num); color: var(--c-ink2); }
.c-out:has(.is-wait) .cnd-line { color: var(--c-bad-t); font-weight: 700; }
.o-main { padding-top: 0; }
.o-main .mv { margin-top: 0; }
/* 数字と単位は離さない：2列目の単位は折り返さない。入りきらない時は E.fit が数字の字を小さくする */
.calc .c-out .ax { display: grid; grid-template-columns: minmax(0, max-content) max-content; justify-content: start; align-items: baseline; column-gap: 0; }
.calc .c-out .ax > .l { grid-column: 1 / -1; }
.calc .c-out .ax > .n { min-width: 0; }
.calc .c-out .ax > .u { white-space: nowrap; }
/* 答えの行の高さは固定（「—」など書体のちがう字になっても下が動かない） */
.o-main .mv .ax { height: calc(22px + 6px + var(--lh-main)); overflow: visible; }
.o-rise .ax { height: calc(22px + 2px + var(--lh-after)); }
.o-main .ax > .l { font: 400 14px/22px var(--f-ja); color: var(--c-ink2); }
.o-main .mv .n { font: 800 var(--fs-main)/var(--lh-main) var(--f-num); letter-spacing: -.04em; margin: 6px 0 0 -4px; text-align: left; }
.o-main .mv .u { margin-left: 14px; font: 700 20px/1 var(--f-ja); }
.o-main.is-wait .n { color: #B0B0B0; }
.o-main .last { margin-top: 4px; min-height: 20px; text-align: left; font: 400 13px/20px var(--f-ja); }

/* 金利上昇の影響 */
.o-rise { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.rh { justify-content: flex-start; gap: 2px 16px; }
.rh h2 { font: 700 19px/28px var(--f-ja); letter-spacing: 0; }
.rh .rc { flex: 0 1 auto; text-align: left; font: 500 13px/20px var(--f-num); }
.rsel { display: block; margin-top: 12px; }
.rsel fieldset { position: relative; display: flow-root; }
.rsel fieldset + fieldset { margin-top: 8px; }
.rsel legend { float: left; width: 64px; margin: 0; padding: 0; font: 700 14px/44px var(--f-ja); }
.rsel .seg { margin-left: 64px; justify-content: start; gap: 8px; }
.rsel .seg.c4 { grid-template-columns: repeat(4, 112px); }
.rsel .seg.c3 { grid-template-columns: repeat(3, 112px); }
.rsel .help.rn { margin: 0; }
#e-timing { position: absolute; left: calc(64px + 3 * 112px + 2 * 8px + 16px); right: 0; top: 0; min-height: 44px; display: flex; align-items: center; margin: 0; font: 500 13px/20px var(--f-ja); color: var(--c-ink2); }
#e-timing:empty { display: none; }
.r-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 20px; }
.o-rise .ax { min-height: 0; padding: 0; border: 0; margin: 0; }
.o-rise .ax.r1 { margin-top: 0; border-top: 0; padding-right: 24px; }
.o-rise .ax.r2 { padding-left: 32px; border-left: 1px solid var(--c-line); }
.o-rise .ax .l { font: 700 14px/22px var(--f-ja); }
.o-rise .ax .n { margin: 2px 0 0 -2px; text-align: left; font: 800 var(--fs-after)/var(--lh-after) var(--f-num); letter-spacing: -.03em; }
.o-rise .ax .u { margin-left: 10px; font: 700 16px/1 var(--f-ja); }
.o-rise .r2 .n { font-size: var(--fs-diff); line-height: var(--lh-diff); color: var(--c-mark); }
.o-rise .r2 .u { font-size: 16px; }

/* 下の3行：罫で挟んだ行（行全体が押せる）。押すと、その行のすぐ下に開く。上の物は動かない */
.more-rows { display: block; margin-top: 8px; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.acc + .acc { border-top: 1px solid var(--c-line); }
.acc-h { margin: 0; font: inherit; }
.more-rows .row-b { min-height: var(--h-more); padding: 0 6px 0 0; border-top: 0; font: 400 15px/22px var(--f-ja); }
.more-rows .row-b .ic { width: 18px; height: 18px; stroke-width: 1.5; }
.acc-b[aria-expanded="true"] .rb-t { font-weight: 700; }
.acc-b[aria-expanded="true"] .ic { transform: rotate(180deg); }
.acc-body { padding: 2px 0 36px; }
.acc-cond { font: 500 13px/20px var(--f-num); color: var(--c-ink2); }
.acc-in { margin-top: 12px; }
.acc-in--sum, .acc-in--cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; }
.acc-c > .pane-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.acc-a > .ktbl:first-child { margin-top: 0; }
.acc-in .cdx-b { margin-top: 28px; }
.row-b:hover, .row-b:hover .ic { color: var(--c-ink); }
.row-b:hover .rb-t { text-decoration: underline; text-underline-offset: 4px; }
.basis { align-items: center; min-height: 44px; margin-top: 4px; }
.basis .tl { min-height: 44px; }
.basis .note-s { padding-top: 0; min-height: 0; flex: 1 1 320px; }
.tl { color: var(--c-ink); font: 700 13px/20px var(--f-ja); }
.tl:hover { color: var(--c-acc); }

/* ── 記事：写真＋題の3つ横並び（写真は横長） ── */
.arts { margin-top: 40px; }
.cards { gap: 24px 24px; padding-top: 0; border-top: 0; }
.card .ph { aspect-ratio: 415 / 150; }
.card h3 { margin-top: 10px; font: 400 15px/1.6 var(--f-ja); }
.card:hover h3 { color: var(--c-ink); }
.related .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related .sec-hd { padding-bottom: 12px; border-bottom: 1px solid var(--c-line); margin-bottom: 20px; }

/* ── 開いた行の中・ドラム・帯：同じ白と墨 ── */
.pane-h { border-top: 1px solid var(--c-line); font: 700 15px/22px var(--f-ja); }
.ktbl thead th { border-bottom: 1px solid var(--c-ink); }
.ktbl td { font: 600 16px/22px var(--f-num); }
.drum { box-shadow: 0 0 0 1px var(--c-ink); }
.drum-sel { background: var(--c-ink); }
.dock { background: var(--c-ink); }
.dock .dv { font-weight: 700; }
.dock .dv em { color: #FF6B5C; }

/* ── 計算機ページの下：計算条件と計算方法（罫の表） ── */
.about { grid-template-columns: calc(100% - var(--col-in)) minmax(0, 1fr); gap: 0; padding-top: 24px; border-top: 1px solid var(--c-ink); }
.about h2 { font: 700 20px/1.4 var(--f-ja); }
.about dl { grid-column: 1; grid-row: 2; }
.about dl > div { grid-template-columns: 160px minmax(0, 1fr); border-bottom: 1px solid var(--c-line); }
.about dl > div:first-child { border-top: 1px solid var(--c-line); padding-top: 20px; margin-top: 16px; }
.formula { font: 600 17px/1.6 var(--f-num); }

/* ── 記事のページ：同じ言葉（白・墨・細い罫・数字は大きく） ── */
.a-hd .lead { font: 400 15px/28px var(--f-ja); }
.a-body h2 { font-size: 21px; }
.cnd dd { font-size: 19px; }
.mtbl td b { font-size: 19px; }
.ex .now .n { font-size: 32px; }
.sec-hd h2 { font-size: 20px; }
.concl.panel, .callout.panel, .try.panel, .ex.panel { background: transparent; border: 1px solid var(--c-line); border-top: 2px solid var(--c-ink); }
.ex.panel { padding: 18px 20px 20px; }
.concl .big .n { font: 800 48px/1 var(--f-num); letter-spacing: -.035em; }
.concl .big .n.up, .callout .n.up { color: var(--c-mark); }
.concl .big .u { font: 700 17px/1 var(--f-ja); }
.callout .n { font-weight: 800; letter-spacing: -.035em; }
.mtbl thead th { border-bottom: 1px solid var(--c-ink); }
.mtbl td.hl { box-shadow: inset 0 0 0 2px var(--c-ink); }
.mtbl td em, .mtbl td.hl span em { color: var(--c-mark); font-style: normal; background: none; }
.btn { background: var(--c-ink); font: 700 14px/1.4 var(--f-ja); }
.btn:hover { background: #333; }
.relcalc.panel { background: var(--c-ink); }
.relcalc .btn:hover { background: var(--c-hover); }
.note { border-left: 2px solid var(--c-ink); }

/* ── フッター ── */
.ft { border-top: 1px solid var(--c-ink); }
.ft-name .logo-img { height: 18px; }
.ft-base { border-top: 1px solid var(--c-line); }
.ft-base p a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ═══ 中くらいの幅 ═══ */
@media (max-width: 1100px) {
  :root { --fs-main: 76px; --lh-main: 78px; --fs-after: 38px; --lh-after: 42px; --fs-diff: 38px; --lh-diff: 42px; --col-in: 340px; --gap-col: 32px; }
  .wrap { width: calc(100% - 80px); }
  .c-out { padding-left: 36px; }
  .rsel .seg.c4, .rsel .seg.c3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #e-timing { position: static; margin: 6px 0 0 64px; min-height: 0; }
  .acc-in--sum, .acc-in--cmp { gap: 0 36px; }
  .about { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .r-pair { grid-template-columns: 1fr; row-gap: 14px; }
  .o-rise .ax.r2 { padding-left: 0; border-left: 0; }
  .acc-in--sum, .acc-in--cmp { grid-template-columns: 1fr; }
  .acc-c { margin-top: 28px; }
}

/* ═══ スマホ：入力 → 答え → 金利上昇の影響 → 下の3行 → 記事 ═══ */
@media (max-width: 767px) {
  :root { --h-hd: 60px; --h-main: 60px; --p-top: 18px; --fs-h1-sp: 22px; --fs-main: 56px; --lh-main: 60px; --fs-after: 32px; --lh-after: 38px; --fs-diff: 32px; --lh-diff: 38px; --fs-input: 20px; --h-input: 50px; --uw: 52px; }
  .wrap { width: calc(100% - 32px); }
  .logo-img { height: 18px; }
  #f-rate, #f-years { --uw: 52px; }
  .gnav a { height: 44px; }
  .menu-btn { width: 80px; height: 44px; font: 700 14px/1 var(--f-ja); }
  .p-hd { display: block; height: calc(var(--p-top) + 32px + 24px); padding-top: var(--p-top); }
  .p-hd h1, .a-hd h1 { font-size: var(--fs-h1-sp); line-height: 32px; }
  .p-hd .lead { position: static; white-space: nowrap; overflow: hidden; margin-top: 2px; font-size: 13px; line-height: 20px; }
  .csw { position: static; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; }
  .csw-i { justify-content: center; min-height: 48px; border: 1px solid var(--c-edge); font-size: 14px; text-align: center; white-space: normal; flex-direction: row; gap: 6px; }
  .csw-i[aria-current] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
  .csw-i[aria-current]::after { display: none; }
  .csw-i.is-soon { border-style: dashed; border-color: var(--c-line); }
  .csw-i small { height: 20px; padding: 0 4px; }
  .calc { display: flex; flex-direction: column; margin-top: 16px; }
  .c-main, .c-in, .c-out { display: contents; }
  .in-main { order: 1; padding: 0; border-top: 0; }
  .in-main .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 2px; }
  .in-main .row2 .fld + .fld { margin-top: 0; }
  .fld > label, .lbl, .lbl-t { font-size: 14px; line-height: 20px; margin-bottom: 6px; }
  .slot { min-height: 20px; margin-top: 4px; }
  .drum-btn .ic { right: calc(var(--uw) + 10px); }
  .o-top { order: 2; padding: 16px 0 0; border-top: 1px solid var(--c-ink); background: none; }
  .r-hd { display: block; }
  .r-hd .ml b { font-size: 16px; line-height: 24px; }
  .r-hd .cnd-line { display: block; font-size: 13px; }
  .o-main .ax > .l { font-size: 13px; line-height: 20px; margin-top: 6px; }
  .o-main .mv .n { margin: 2px 0 0 -3px; letter-spacing: -.04em; }
  .o-main .mv .u { margin-left: 10px; font-size: 16px; }
  .opt-row { order: 1; min-height: 56px; margin-top: 4px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .opt-row .rb-t { font-size: 14px; }
  .opt-body { order: 1; }
  .o-rise { order: 4; margin-top: 4px; padding: 16px 0 4px; border-top: 1px solid var(--c-ink); background: none; }
  .c-in, .c-out { border: 0; padding: 0; }
  .rh { display: block; }
  .rh h2 { font-size: 17px; line-height: 26px; }
  .rh .rc { display: block; font-size: 13px; }
  .rsel { margin-top: 14px; }
  .rsel legend { float: none; width: auto; margin-bottom: 6px; font-size: 14px; line-height: 20px; }
  .rsel fieldset + fieldset { margin-top: 14px; }
  .rsel .seg { margin-left: 0; }
  .rsel .seg.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rsel .seg.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  #e-timing { position: static; margin: 6px 0 0; min-height: 0; }
  .r-pair { grid-template-columns: 1fr; row-gap: 0; margin-top: 18px; border-top: 1px solid var(--c-line); }
  .o-rise .ax { height: calc(22px + var(--lh-after) + 22px); padding: 12px 0 10px; }
  .o-main .mv .ax { height: calc(20px + 6px + 2px + var(--lh-main)); }
  .o-rise .ax.r1 { padding-right: 0; border-bottom: 1px solid var(--c-line); }
  .o-rise .ax.r2 { padding-left: 0; border-left: 0; }
  .o-rise .ax .l { font-size: 14px; line-height: 22px; }
  .o-rise .ax .u { margin-left: 8px; font-size: 15px; }
  .o-rise .r2 .u { font-size: 15px; }
  .more-rows { order: 5; margin-top: 20px; }
  .more-rows .row-b { font-size: 15px; }
  .acc-in--sum, .acc-in--cmp { display: block; }
  .acc-c { margin-top: 28px; }
  .acc-body { padding-bottom: 28px; }
  .basis { order: 6; display: block; margin-top: 8px; }
  .seg > label, .seg > button { padding: 0 6px; font-size: 15px; }
  .seg small { font-size: 12px; }
  .arts { margin-top: 40px; }
  .cards, .cards--2, .related .cards { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
  .card { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto; column-gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
  .card .ph { grid-row: auto; aspect-ratio: 4 / 3; }
  .card h3 { margin-top: 0; font-size: 15px; }
  .about { grid-template-columns: 1fr; }
  .about h2 { font-size: 18px; }
  .about dl > div { grid-template-columns: 1fr; }
  .concl .big .n { font-size: 38px; }
  .related .sec-hd { margin-bottom: 0; }
}
@media (max-width: 374px) {
  :root { --fs-main: 50px; --lh-main: 54px; --fs-after: 30px; --lh-after: 36px; --fs-diff: 30px; --lh-diff: 36px; --uw: 48px; }
  .wrap { width: calc(100% - 32px); }
  .inp input { padding: 0 calc(var(--uw) + 6px) 0 12px; }
  .csw-i { flex-direction: column; gap: 2px; min-height: 56px; font-size: 13px; }
  .csw-i small { height: 18px; }
  .drum-btn { padding-left: 12px; }
  .o-main .mv .u { font-size: 15px; margin-left: 8px; }
  .seg small { display: none; }
}
a.m-row[aria-current] { color: var(--c-acc); font-weight: 700; }

/* r4 10/28 boss「ちょっとわかりにくい」「押す前に、押したら何が見られるか分かったほうがいい」
   閉じた行＝名前＋何が見られるかの1行（小さく灰色・スマホは折り返す）。開いた中＝結論の1文 → 前提 → 表・図 → 補足 */
.more-rows .acc-b { align-items: center; min-height: 64px; padding: 11px 6px 11px 0; }
.acc-b .rb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-n { font: 500 15px/22px var(--f-ja); color: var(--c-ink); }
.acc-d { font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.acc-b[aria-expanded="true"] .rb-t { font-weight: 400; }
.acc-b[aria-expanded="true"] .acc-n { font-weight: 700; }
.row-b.acc-b:hover .rb-t { text-decoration: none; }
.row-b.acc-b:hover .acc-n { text-decoration: underline; text-underline-offset: 4px; }
.acc-body { padding: 4px 0 32px; }
.acc-ans { max-width: 760px; font: 700 16px/28px var(--f-ja); color: var(--c-ink); }
.acc-ans b { font-family: var(--f-num); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; }
.acc-ans b.up, .acc-sub b.up { color: var(--c-mark); }
.acc-cond { max-width: 760px; margin-top: 4px; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.acc-in { margin-top: 20px; }
.acc-in--sum { display: block; max-width: 760px; }
.acc-in--cmp { display: block; }
.acc-in .acc-ex { max-width: 760px; margin-top: 0; color: var(--c-ink); }
.acc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start; margin-top: 16px; }
.acc-two .acc-c > .pane-h:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.acc-two .acc-a { padding-top: 2px; }
.acc-two .acc-c { margin-top: 0; }
.acc-two .acc-a .ktbl { margin-top: 0; }
.acc-in--sum > .ktbl { margin-top: 0; }
.acc-cond .nb { white-space: nowrap; }
.acc-sub { margin-top: 10px; padding: 0 4px; font: 400 14px/22px var(--f-ja); color: var(--c-ink); }
.acc-sub b { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.acc-in--note { max-width: 760px; margin-top: 0; }
.acc-in--note p { margin-top: 0; font: 400 14px/1.8 var(--f-ja); color: var(--c-ink2); }
.acc-in--note p + p { margin-top: 6px; }
@media (max-width: 1100px) { .acc-two { gap: 0 36px; } }
@media (max-width: 900px) { .acc-two { grid-template-columns: 1fr; } .acc-two .acc-a { margin-top: 24px; } }
@media (max-width: 767px) {
  .more-rows .acc-b { min-height: 64px; padding: 12px 4px 12px 0; }
  .acc-ans { font-size: 15px; line-height: 26px; }
  .acc-body { padding-bottom: 28px; }
  .acc-in { margin-top: 16px; }
}

/* r3 10/28 boss「縦の間隔がむだに広い」：エラーが無いときは予備の空きを取らない */
.calc .in-main .slot { min-height: 0; margin-top: 0; }
.calc .in-main .slot:has(.err:not(:has(span:empty))), .calc .in-main .slot:has(.src-l:not(:empty)) { margin-top: 6px; }
.calc .in-main .fld + .fld, .calc .in-main .row2, .calc .in-main .row2 .fld + .fld { margin-top: 16px; }
@media (max-width: 767px) { .calc .in-main .row2 .fld + .fld { margin-top: 0; } .calc .in-main .row2 { margin-top: 14px; } }

/* r5 10/28 boss「これしかないなら、はじめから表示」：詳しく設定は開閉せず常に出す */
.opt-body.is-always { margin-top: 20px; padding: 0 0 8px; border-top: 1px solid var(--c-line); }
.c-in:has(.opt-body.is-always) { position: static; }
.opt-body.is-always .mdesc dd { font-size: 13px; line-height: 1.7; }
@media (max-width: 767px) { .opt-body.is-always { order: 1; margin-top: 4px; } }

/* r6 10/28 boss A：金利の上がり方の早見表は、上の答え（上昇後・毎月の増加額）のすぐ下に常に出す。マスを押すと上の数字が変わる
   落ち着かせる：見出しは小さく、マスは細い罫の白い四角。増える額は墨（赤は上の「毎月の増加額」だけ）。選んだマスは上のボタンと同じ墨の面＋白の ✓ */
.rq { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--c-line); }
.rq-h { font: 700 14px/22px var(--f-ja); color: var(--c-ink); letter-spacing: 0; }
.rq-t { width: 100%; margin: 2px 0 0; border-collapse: separate; border-spacing: 0 4px; table-layout: fixed; }
.rq-t thead th { padding: 0 12px 2px; font: 400 12px/18px var(--f-ja); color: var(--c-ink2); text-align: right; white-space: nowrap; }
.rq-t thead th:first-child { width: 96px; padding-left: 0; text-align: left; }
.rq-t tbody th { padding: 0; font: 600 15px/20px var(--f-num); font-variant-numeric: tabular-nums lining-nums; text-align: left; white-space: nowrap; letter-spacing: 0; }
.rq-t tbody th small { margin-left: 3px; font: 400 12px/1 var(--f-ja); color: var(--c-ink2); }
.rq-t td { padding: 0 0 0 4px; }
.rq .qc { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: 100%; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 0; background: var(--c-field); color: var(--c-ink); cursor: pointer; text-align: right; }
.rq .qc:hover { border-color: var(--c-ink); background: var(--c-field); }
.rq .qc:active { background: var(--c-press); }
.rq .qc b { flex: 1 1 auto; min-width: 0; text-align: right; font: 500 15px/20px var(--f-num); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; white-space: nowrap; }
/* 数字の箱はマスいっぱい（中の数字が変わっても箱は動かない＝揺れに数えない） */
.rq .qc b small { margin-left: 2px; font: 400 12px/1 var(--f-ja); }
.rq .qc .ck { width: 12px; height: 12px; flex: none; visibility: hidden; stroke: #fff; stroke-width: 2.2; fill: none; stroke-linecap: square; stroke-linejoin: miter; }
.rq .qc[aria-pressed="true"] { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.rq .qc[aria-pressed="true"]:active { background: #000; }
.rq .qc[aria-pressed="true"] .ck { visibility: visible; }
.rq .qc[aria-pressed="true"] b { font-weight: 700; }
.rq .qc.is-off, .rq .qc:disabled { border-style: dashed; border-color: var(--c-line); background: transparent; color: #8A8A8A; cursor: default; }
.rq .qc.is-off b { font: 400 15px/20px var(--f-num); }
.rq-i { min-height: 22px; margin-top: 8px; font: 400 14px/22px var(--f-ja); color: var(--c-ink); }
.rq-i b { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
.rq-n { margin-top: 4px; font: 400 12px/20px var(--f-ja); color: var(--c-ink2); }
@media (max-width: 767px) {
  .rq { margin-top: 4px; padding-top: 14px; }
  .rq-t thead th { padding: 0 6px 2px; }
  .rq-t thead th:first-child { width: 44px; }
  .rq-t tbody th { font-size: 14px; }
  .rq-t tbody th small { display: none; }
  .rq .qc { gap: 3px; padding: 0 6px; }
  .rq .qc b { font-size: 14px; }
  .rq .qc .ck { width: 10px; height: 10px; }
  .rq-i { font-size: 13px; line-height: 21px; }
}


/* r8 10/29 boss：早見表は常には出さず、押したときだけその場で開く（下の行と同じ形の1行・初めは閉じる・開くと下へ伸びるだけ）
   年ごとの表は返済総額の中から出し、下の行の1本にした（行の形は r4 のまま） */
.rq { margin-top: 24px; padding-top: 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.rq-hh { margin: 0; font: inherit; }
.rq .rq-b { align-items: center; min-height: 64px; padding: 11px 6px 11px 0; border-top: 0; font: 400 15px/22px var(--f-ja); }
.rq .rq-b .ic { width: 18px; height: 18px; stroke-width: 1.5; }
.rq-p { padding: 0 0 18px; }
.rq-p .rq-t { margin-top: 0; }
.acc-in--yr { max-width: 760px; }
.acc-in--yr > .dtable { margin-top: 0; }
.acc-in--yr .dtable caption { padding-top: 0; }
@media (max-width: 767px) {
  .rq { margin-top: 16px; padding-top: 0; }
  .rq .rq-b { padding: 12px 4px 12px 0; }
  .rq-p { padding-bottom: 16px; }
  .acc-in--yr .dtable th, .acc-in--yr .dtable td { padding-left: 6px; }
  .acc-in--yr .dtable th:first-child { padding-left: 0; }
}


/* ═══════ r9 10/29 boss「画面すっきり」：説明の文は出しっぱなしにせず、ⓘ（か小さな語）に合わせたら出す。スマホは押したら出す
   見た目は白い箱＋細い墨の線だけ（影・角丸なし）。出る・消えるだけで動かない。押す所は44px（負の余白で行の高さは変えない）
   年ごとの表は1年ごとの返済額（元金・利息の内訳・合計）。スマホの答えの帯は低く ═══════ */
.tip { position: relative; display: inline-block; vertical-align: top; line-height: 20px; }
.tip-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; margin: -12px -14px -12px -12px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--c-ink2); cursor: help; font: 400 13px/20px var(--f-ja); letter-spacing: 0; vertical-align: top; -webkit-tap-highlight-color: transparent; }
.tip-b .ic { width: 16px; height: 16px; stroke-width: 1.4; stroke-linecap: round; }
.tip-b:hover, .tip.is-open .tip-b { color: var(--c-ink); }
.tip-b--t { width: auto; margin: -12px -6px; padding: 0 6px; }
.tip-b--t .tip-l { text-decoration: underline dotted; text-decoration-color: var(--c-edge); text-underline-offset: 3px; }
.tip-b:focus-visible { outline: none; }
.tip-b:focus-visible .ic, .tip-b--t:focus-visible .tip-l { outline: 2px solid var(--c-act); outline-offset: 2px; }
.tip-b--t:focus-visible .ic { outline: none; }
.lbl-tip .tip { margin-left: 4px; }
.pane-h .tip { margin-left: 4px; vertical-align: top; margin-top: 1px; }
.ytbl caption .tip { margin-left: 10px; }
.tip-p { position: absolute; z-index: 30; top: calc(100% + 8px); left: -8px; display: block; width: max-content; max-width: min(280px, calc(100vw - 32px)); padding: 10px 12px; border: 1px solid var(--c-ink); border-radius: 0; background: #fff; box-shadow: none; color: var(--c-ink); font: 400 13px/1.7 var(--f-ja); letter-spacing: 0; text-align: left; white-space: normal; word-break: auto-phrase; overflow-wrap: anywhere; cursor: auto; }
.tip-p.is-up { top: auto; bottom: calc(100% + 8px); }
.tip-r { display: block; }
.tip-r + .tip-r { margin-top: 8px; }
.tip-r b { display: block; font-weight: 700; }
.basis-t { flex: 1 1 auto; margin: 0; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.rq-n { min-height: 20px; margin-top: 4px; font: 400 13px/20px var(--f-ja); }
@media (max-width: 767px) {
  .basis-t { padding: 12px 0 8px; }
}

/* 年ごとの表：上の2つのボタンで「上がった場合／変わらない場合」。合計の行は「返済総額と利息」と同じ数字 */
.yr-sw { max-width: 360px; margin: 0 0 12px; }
.yr-box { max-width: 100%; overflow-x: auto; }
.ytbl { margin-top: 0; }
.ytbl caption { padding-top: 0; }
.ytbl th, .ytbl td { white-space: nowrap; }
.ytbl thead th { vertical-align: bottom; }
.ytbl tfoot th, .ytbl tfoot td { border-top: 1px solid var(--c-ink); border-bottom: 0; font-weight: 700; }
@media (max-width: 767px) {
  .acc-in--yr .ytbl th, .acc-in--yr .ytbl td { padding: 7px 0 7px 4px; font-size: 12px; }
  .acc-in--yr .ytbl thead th { font-size: 12px; line-height: 16px; white-space: normal; }
  .acc-in--yr .ytbl th:first-child { position: sticky; left: 0; z-index: 1; padding-left: 0; background: var(--c-bg); }
  .yr-sw { max-width: none; }
}

/* スマホの答えの帯：見出しを短く（毎月の返済額 など）・帯を低く。ページの下は帯の高さ＋16px あける */
@media (max-width: 767px) {
  :root { --dock: 52px; }
  .dock { padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); }
  .dock .dl { font-size: 12px; line-height: 16px; }
  .dock .dv { margin-top: 1px; font-size: 16px; line-height: 20px; }
  body.dockpage { padding-bottom: calc(var(--dock) + 16px + env(safe-area-inset-bottom)); }
}


/* ═══════ r11 article 10/29：記事のページを計算機と同じ言葉に（白・墨・細い罫・箱にしない）
   本文は1行およそ42字（42em）。表・図は本文の列いっぱい。横の補足は ⓘ（共通の .tip）。
   どれも body.pg-art の中だけ（計算機のページには効かない） ═══════ */
.pg-art .a-grid { grid-template-columns: minmax(0, 1fr) 272px; column-gap: 88px; }
.pg-art .a-hd .lead { max-width: none; margin: 8px 0 0; font: 400 15px/26px var(--f-ja); color: var(--c-ink2); text-wrap: pretty; }
.pg-art .a-body .callout + p { margin-top: 24px; }
.pg-art .byline { gap: 0 20px; margin-top: 4px; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.pg-art .byline b { font-weight: 400; color: var(--c-ink2); }

/* 結論：上の細い墨の罫だけ。数字は計算機の「毎月の増加額」と同じ形 */
.pg-art .concl { margin-top: 28px; padding: 20px 0 0; background: none; border: 0; border-top: 1px solid var(--c-ink); }
.pg-art .concl .t { font: 700 15px/24px var(--f-ja); }
.pg-art .concl .big { gap: 0; margin-top: 4px; }
.pg-art .concl .big .n { font: 800 42px/46px var(--f-num); letter-spacing: -.03em; color: var(--c-mark); }
.pg-art .concl .big .u { margin-left: 8px; font: 700 16px/1 var(--f-ja); }
.pg-art .concl .big .l { margin-left: 8px; font: 700 15px/1 var(--f-ja); }
.pg-art .concl .s { margin-top: 6px; font: 500 13px/20px var(--f-num); color: var(--c-ink2); }
.pg-art .concl .bars { margin-top: 20px; }
/* 図の高さは先に取っておく（描いても下が動かない）：結論の棒＝50px・時期ごとの棒＝330px（E.bars・initArticle と同じ値） */
.pg-art #headBars { height: 50px; }
.pg-art #incChart { height: 330px; }

/* この記事で分かること：計算機の下の行と同じ罫の行 */
.pg-art .learn { margin-top: 28px; border-bottom: 1px solid var(--c-line); }
.pg-art .learn summary { min-height: 52px; border-top: 1px solid var(--c-line); font: 700 15px/22px var(--f-ja); }
.pg-art .learn summary .ic { width: 18px; height: 18px; }
.pg-art .learn a { gap: 14px; padding: 10px 0; font: 400 15px/24px var(--f-ja); }
.pg-art .learn a .no { width: 16px; font: 600 14px/24px var(--f-num); }
.pg-art .learn a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 4px; }

.pg-art .a-ph { margin-top: 32px; }
.pg-art .a-ph .ph { height: 240px; }

/* 右の「この例の条件」：箱にせず、上の墨の罫と細い行だけ */
.pg-art .a-ex { top: 24px; }
.pg-art .ex { padding: 16px 0 0; background: none; border: 0; border-top: 1px solid var(--c-ink); }
.pg-art .ex-t { font: 700 15px/22px var(--f-ja); }
.pg-art .ex .cnd--list { margin-top: 10px; border-top: 1px solid var(--c-line); }
.pg-art .cnd--list > div, .pg-art .cnd--list > div + div { padding: 9px 0; }
.pg-art .cnd--list dt { font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.pg-art .cnd--list dd { font: 600 16px/20px var(--f-num); letter-spacing: -.01em; }
.pg-art .cnd--list dd.ja { font: 700 14px/20px var(--f-ja); }
.pg-art .cnd--list dd small { font: 400 12px/1 var(--f-ja); }
.pg-art .ex .now { margin-top: 16px; padding-top: 0; border-top: 0; }
.pg-art .ex .now .l { font: 700 14px/22px var(--f-ja); color: var(--c-ink); }
.pg-art .ex .nv { display: flex; align-items: baseline; margin-top: 2px; }
.pg-art .ex .nv .n { font: 800 32px/38px var(--f-num); letter-spacing: -.03em; }
.pg-art .ex .nv .u { margin-left: 8px; font: 700 15px/1 var(--f-ja); }
.pg-art .ex .btn { width: 100%; margin-top: 20px; }

/* 本文：見出しは落ち着いた20px・上に細い墨の罫。本文は16px・行間1.9・1行42字まで */
.pg-art .a-body { margin-top: 0; }
.pg-art .a-body h2 { max-width: none; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--c-ink); font: 700 20px/30px var(--f-ja); letter-spacing: 0; }
.pg-art .a-body p { max-width: 42em; margin-top: 16px; font: 400 16px/1.9 var(--f-ja); }

/* 答えの組（計算機の「上昇後｜毎月の増加額」と同じ形） */
.pg-art .callout { margin-top: 20px; padding: 0; background: none; border: 0; }
.pg-art .a-body .callout .t { max-width: none; margin: 0; font: 700 14px/22px var(--f-ja); color: var(--c-ink2); }
.pg-art .pair { display: grid; grid-template-columns: max-content max-content; margin-top: 8px; }
.pg-art .a-body .kv { max-width: none; margin: 0; }
.pg-art .kv .k { display: block; font: 700 14px/22px var(--f-ja); }
.pg-art .kv .v { display: flex; align-items: baseline; margin-top: 2px; }
.pg-art .kv .n { font: 800 42px/46px var(--f-num); letter-spacing: -.03em; white-space: nowrap; }
.pg-art .kv .n.up { color: var(--c-mark); }
.pg-art .kv .u { margin-left: 8px; font: 700 16px/1 var(--f-ja); white-space: nowrap; }
.pg-art .pair .kv:first-child { padding-right: 40px; }
.pg-art .kv--d { padding-left: 40px; border-left: 1px solid var(--c-line); }
.pg-art .a-body .kv--one { margin-top: 4px; }

/* 条件の並び（細い罫・数字は計算機の入力と同じ書体） */
.pg-art .cnd { margin-top: 16px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.pg-art .cnd dt { font: 400 13px/20px var(--f-ja); }
.pg-art .cnd dd { font: 600 19px/26px var(--f-num); letter-spacing: -.01em; }
.pg-art .cnd dd small { font: 400 12px/1 var(--f-ja); }
.pg-art .cnd dd.ja { font: 700 14px/26px var(--f-ja); }
.pg-art .cnd--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* 表：上の墨の罫は1px（計算機の表と同じ） */
.pg-art .tbl { margin-top: 28px; }
.pg-art .mtbl caption { padding-bottom: 10px; font: 700 15px/22px var(--f-ja); }
.pg-art .mtbl caption span { margin-top: 2px; font: 400 13px/20px var(--f-ja); }
.pg-art .mtbl thead th { padding: 8px 14px; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-ink); font: 700 13px/20px var(--f-ja); }
.pg-art .mtbl thead th:first-child { padding-left: 0; }
.pg-art .mtbl tbody th { padding: 12px 0; font: 700 16px/24px var(--f-num); }
.pg-art .mtbl td { padding: 10px 14px; }
.pg-art .mtbl td b { font: 600 19px/24px var(--f-num); letter-spacing: -.01em; }
.pg-art .mtbl td span { font: 500 13px/20px var(--f-num); }
.pg-art .mtbl td.hl { box-shadow: inset 0 0 0 1px var(--c-ink); }
.pg-art .mtbl td.hl b { font-weight: 800; }

/* 横の補足：ⓘ（合わせたら出る・スマホは押したら出る） */
.pg-art .a-body p.tipline, .pg-art .fig p.tipline { min-height: 20px; margin-top: 10px; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.pg-art .tipline .tip-p { max-width: min(360px, calc(100vw - 32px)); }

/* 図 */
.pg-art .fig { margin-top: 28px; }
.pg-art .fig-t { display: block; padding-bottom: 10px; border-bottom: 1px solid var(--c-line); font: 700 15px/22px var(--f-ja); color: var(--c-ink); }
.pg-art .fig .chart { margin-top: 16px; }

/* 計算機へ渡す条件 */
.pg-art .try { margin-top: 20px; padding: 0; background: none; border: 0; }
.pg-art .try-t { font: 700 14px/22px var(--f-ja); }
.pg-art .try .cnd { margin-top: 8px; }
.pg-art .try .btn { margin-top: 20px; }

/* 検証日・条件・出典（計算機の「計算条件と計算方法」と同じ罫の表） */
.pg-art .src { margin-top: 56px; border-top: 1px solid var(--c-ink); }
.pg-art .src dl > div { grid-template-columns: 136px minmax(0, 1fr); gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--c-line); font: 400 14px/1.85 var(--f-ja); }
.pg-art .src dt { font: 700 14px/1.85 var(--f-ja); }
.pg-art .src dd { max-width: 42em; }
.pg-art .src a { min-height: var(--h-tap); color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ほかの記事・計算機への行（黒い帯はやめ、罫の行に） */
.pg-art .related { margin-top: 72px; }
.pg-art .related .sec-hd h2 { font: 700 20px/30px var(--f-ja); }
.pg-art .relcalc { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding: 18px 0; background: none; color: var(--c-ink); border: 0; border-top: 1px solid var(--c-ink); border-bottom: 1px solid var(--c-line); }
.pg-art .relcalc h2 { margin: 0; font: 700 17px/26px var(--f-ja); color: var(--c-ink); }
.pg-art .relcalc p { margin-top: 2px; font: 400 13px/20px var(--f-ja); color: var(--c-ink2); }
.pg-art .relcalc .tl { flex: none; }

@media (max-width: 1100px) {
  .pg-art .a-grid { grid-template-columns: minmax(0, 1fr) 256px; column-gap: 48px; }
}
@media (max-width: 900px) {
  .pg-art .pair { grid-template-columns: max-content; row-gap: 14px; }
  .pg-art .pair .kv:first-child { padding-right: 0; }
  .pg-art .kv--d { padding-left: 0; border-left: 0; }
  .pg-art .cnd--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-art .cnd--5 > div:nth-child(n+4) { border-top: 1px solid var(--c-line); }
  .pg-art .cnd--5 > div:nth-child(4) { padding-left: 0; box-shadow: none; }
}
@media (max-width: 767px) {
  .pg-art .a-hd .lead { margin-top: 6px; font-size: 15px; line-height: 25px; }
  .pg-art .concl { margin-top: 20px; padding-top: 16px; }
  .pg-art .concl .t { font-size: 15px; }
  .pg-art .concl .big .n { font-size: 36px; line-height: 42px; }
  .pg-art .concl .btn { margin-top: 20px; }
  .pg-art .learn { margin-top: 24px; }
  .pg-art .a-ph { margin-top: 24px; }
  .pg-art .a-ph .ph { height: 180px; }
  .pg-art .a-body h2 { margin-top: 44px; padding-top: 16px; font-size: 18px; line-height: 28px; }
  .pg-art .a-body p { line-height: 1.9; }
  .pg-art .kv .n { font-size: 32px; line-height: 38px; }
  .pg-art .cnd dd { font-size: 17px; }
  .pg-art .cnd--5 { grid-template-columns: 1fr 1fr; }
  .pg-art .cnd--5 > div:nth-child(n) { padding: 10px 12px 10px 0; box-shadow: none; border-top: 0; }
  .pg-art .cnd--5 > div:nth-child(2n) { padding-left: 12px; box-shadow: inset 1px 0 0 var(--c-line); }
  .pg-art .cnd--5 > div:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .pg-art .cnd--5 > div:last-child { grid-column: 1 / -1; padding-left: 0; box-shadow: none; }
  .pg-art .mtbl thead th { padding: 8px 6px; font-size: 12px; }
  .pg-art .mtbl tbody th { font-size: 14px; }
  .pg-art .mtbl td { padding: 10px 6px; }
  .pg-art .mtbl td b { font-size: 16px; line-height: 22px; }
  .pg-art .mtbl td span { font-size: 12px; line-height: 18px; }
  .pg-art .try .btn { width: 100%; }
  .pg-art .src dl > div { grid-template-columns: 1fr; gap: 2px; }
  .pg-art .related { margin-top: 56px; }
  .pg-art .related .sec-hd h2 { font-size: 18px; line-height: 28px; }
  .pg-art .relcalc { display: block; margin-top: 40px; padding: 16px 0 8px; }
  .pg-art .relcalc .tl { margin-top: 4px; }
}
@media (max-width: 374px) {
  .pg-art .concl .big .n { font-size: 32px; }
  .pg-art .mtbl td { padding: 10px 4px; }
  .pg-art .mtbl td b { font-size: 15px; }
}

/* ═══ 10/29 シミュレーションの入口（simulation.html とトップ）。2つを並べる（スマホは縦）。罫だけ・角丸と影なし。動くのは色だけ ═══ */
.sim { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 24px; }
.sim-i { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 24px; align-items: start; min-height: 44px; padding: 24px 0 28px; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; transition: var(--t-color); }
.sim-ph { aspect-ratio: 4 / 3; }
.sim-t { display: block; min-width: 0; }
.sim-n { display: flex; align-items: center; gap: 10px; font: 700 20px/30px var(--f-ja); transition: var(--t-color); }
.sim-n .ic { width: 18px; height: 18px; }
.sim-d { display: block; margin-top: 8px; font: 400 14px/1.8 var(--f-ja); color: var(--c-ink2); }
.sim-i:hover .sim-n { color: var(--c-acc); }
.sim-i:focus-visible { outline-offset: 4px; }
/* トップ：見出しの下の1行・2つの段（シミュレーション／新しい記事） */
.idx-lead { margin-top: 8px; font: 400 15px/1.8 var(--f-ja); color: var(--c-ink2); }
.idx-sec { margin-top: 48px; }
.idx-sec:first-of-type { margin-top: 32px; }
.idx-h { font: 700 18px/28px var(--f-ja); }
.idx-sec .sim { margin-top: 12px; }
.idx-sec .cards { margin-top: 12px; }
@media (max-width: 767px) {
  .sim { grid-template-columns: 1fr; margin-top: 16px; }
  .sim li + li .sim-i { border-top: 0; }
  .p-hd:not(:has(.lead)) { height: auto; }  /* 説明の1行がない見出し（トップ・シミュレーション）は空きを残さない */
  .p-hd + .sim { margin-top: 20px; }
  .sim-i { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 16px 0 18px; }
  .sim-n { gap: 6px; font-size: 16px; line-height: 24px; white-space: nowrap; }
  .sim-n .ic { width: 16px; height: 16px; }
  .sim-d { margin-top: 4px; font-size: 13px; line-height: 1.7; }
  .idx-lead { margin-top: 6px; font-size: 14px; }
  .idx-sec { margin-top: 40px; }
  .idx-sec:first-of-type { margin-top: 24px; }
  .idx-h { font-size: 17px; line-height: 26px; }
}
@media (max-width: 374px) { .sim-n { font-size: 15px; } }

/* 10/29 依頼168 A：記事の写真は色あり・枠 3:2・写真の上に朱赤の番号 */
.card .no { display: block; margin-bottom: 8px; font: 700 13px/1 var(--f-num, inherit); color: var(--c-acc); letter-spacing: .04em; }
.card .ph { aspect-ratio: 3 / 2; }
@media (max-width: 767px) {
  .card { grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "ph no" "ph h3"; align-items: start; }
  .card .ph { grid-area: ph; aspect-ratio: 3 / 2; }
  .card .no { grid-area: no; margin: 2px 0 6px; }
  .card h3 { grid-area: h3; }
}

/* 10/29 依頼174：シミュレーションの入口の画像は、入口のために組んだ計算の画面の絵（高精細・4:3）。画像は左に 200px、名前と説明は右（名前は1行に収める） */
.sim-i { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.sim-n { white-space: nowrap; }
.sim-ph { aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.sim-ph img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
  .sim-i { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 16px 0 18px; }
  .sim-n { font-size: 15px; }
}