/* おうち計算 style.css
 * design/SPEC.md に沿った自前 CSS。外部読み込みなし。ライトのみ（暗い配色は作らない）。
 * 方針（2026-10-09 から）：白地・空色・オレンジのボタン。ゴシックの太い見出し。最後の「そら」の節が、この上の色と形を上書きする。
 */
:root {
  color-scheme: light;
  /* 面 */
  --paper: #FFFFFF;
  --wash: #F3F4F2;
  --tint: #EAF1F0;
  --brass-wash: #FAF4E4;
  /* 文字 */
  --ink: #1B2224;
  --ink-2: #4B5658;
  --primary: #1D4B4F;
  --deep: #12363A;
  --link: #0B5C73;
  --visited: #8A3F75;
  --brass: #A67F25;
  --brass-ink: #7A5B12;
  --brass-btn: #8C6A10;       /* 紹介ボタンの面。白文字との比 5.0 */
  --brass-btn-dark: #6A4E0F;  /* 押したとき・ホバー。白文字との比 7.8 */
  /* 線 */
  --rule: #D5DAD8;
  --hair: #C9D1CF;
  --rule-strong: #667274;
  /* 暗い面の上 */
  --on-deep: #E8F0EF;
  --on-deep-2: #B9CBC9;
  --on-deep-accent: #F2D27A;
  /* 状態 */
  --focus: #8A6A14;
  --err: #A4161A;
  --gutter: 16px;
  --font-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", "BIZ UDPMincho", "MS PMincho", serif;
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", sans-serif;

  /* ===== テーマ用の値（assets/themes/<名前>.css が :root で上書きする）。既定の値は、いまの見た目と同じ ===== */
  /* 面の地色 */
  --page-bg: var(--paper);
  /* 形：角丸・影・線 */
  --radius: 2px;          /* ボタン・印・入力欄 */
  --radius-card: 0;       /* 写真つきカード・CTA・表の外枠まわり */
  --radius-box: 0;        /* 要点箱・数字の帯・結果の箱など */
  --shadow-card: none;
  --shadow-card-hover: var(--shadow-card);
  --shadow-btn: none;
  --card-border: var(--rule-strong);
  --card-gap: 24px;
  --card-pad: 16px;
  /* 余白・幅 */
  --text-w: 700px;        /* 本文の幅 */
  --sec-pad-top: 48px;
  --sec-pad-bottom: 56px;
  /* 文字 */
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --lh-body: 1.85;
  --h1-color: var(--deep);
  --h2-color: var(--primary);
  --eyebrow-color: var(--brass-ink);
  --promise-color: var(--primary);
  /* 【PR】帯 */
  --pr-bg: var(--ink);
  --pr-fg: #fff;
  /* ヘッダー */
  --header-bg: var(--paper);
  --header-top: var(--primary);
  --header-top-w: 4px;
  --header-line: var(--rule);
  --brand-color: var(--deep);
  --nav-active: var(--primary);
  /* ヒーロー */
  --hero-rule: var(--primary);
  --hero-rule-w: 4px;
  --hero-frame-bg: var(--deep);
  --hero-frame-rule: var(--brass);
  /* 要点箱 */
  --answer-bg: var(--tint);
  --answer-rule: var(--primary);
  --answer-rule-w: 4px;
  --answer-label: var(--primary);
  /* 数字の帯（トップ・一覧の stat-band） */
  --stat-bg: var(--deep);
  --stat-fg: var(--on-deep);
  --stat-sub: var(--on-deep-2);
  --stat-figure: var(--on-deep-accent);
  --stat-line: rgba(185, 203, 201, .4);
  /* 計算結果の箱 */
  --result-bg: var(--deep);
  --result-fg: #fff;
  --result-sub: var(--on-deep-2);
  --result-rule: var(--brass);
  /* ボタン */
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--deep);
  --btn-fg: #fff;
  --cta-btn-bg: var(--brass-btn);
  --cta-btn-bg-hover: var(--brass-btn-dark);
  --cta-btn-fg: #fff;
  /* 紹介の箱（CTA） */
  --cta-rule: var(--ink);
  --cta-rule-w: 4px;
  /* 表 */
  --table-rule: var(--primary);
  --table-head-bg: var(--tint);
  --table-head-fg: var(--primary);
  --hl-bg: var(--tint);
  /* フッター */
  --footer-bg: var(--deep);
  --footer-fg: var(--on-deep);
  --footer-sub: var(--on-deep-2);
  --footer-brand: #fff;
  --footer-rule: var(--brass);
  /* 帯グラフの色（計算結果・図） */
  --bd-1: #1D4B4F;
  --bd-2: #5F9396;
  --bd-3: #A67F25;
  --bd-4: #4B5658;
  /* 交互の節（sec-alt）の中。白に戻す部品の色 */
  --band-card: #FFFFFF;
  --band-thead: #E4EBE9;
}
@media (min-width: 640px) { :root { --gutter: 24px; } }

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; background: var(--page-bg); color: var(--ink);
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: .02em;
  line-break: strict; overflow-wrap: anywhere;
}
@media (min-width: 480px) { body { font-size: var(--fs-body-lg); } }
img, svg { max-width: 100%; }
img { height: auto; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a:visited { color: var(--visited); }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a, .btn, .cta-btn, .btn-outline { transition: color .15s, background-color .15s, border-color .15s; }
strong { font-weight: 700; }
time { font-variant-numeric: tabular-nums; }
.dt { white-space: nowrap; }   /* site.js が日付（2026-10-08）を包む */
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--paper); color: var(--ink); padding: 12px 16px; border: 2px solid var(--primary); }
.skip:focus { left: 8px; top: 8px; }

/* ---------- 【PR】帯（全ページの最上部。本文と同じ大きさ。小さくしない） ---------- */
.pr-bar { background: var(--pr-bg); color: var(--pr-fg); font-size: inherit; line-height: 1.55; padding: 8px 0; }
.pr-bar strong { font-size: 1.1em; font-weight: 700; margin-right: .3em; }
.pr-bar a, .pr-bar a:visited { color: var(--pr-fg); margin-left: .5em; white-space: nowrap; display: inline-block; padding: 12px 6px; margin-top: -12px; margin-bottom: -12px; }
.pr-bar a:focus-visible { outline-color: var(--on-deep-accent); }

/* ---------- ヘッダー（ロゴとナビは1行。ナビは横にスクロール。ハンバーガーにしない。題材が増えても、高さは増えない） ---------- */
.site-header { background: var(--header-bg); border-top: var(--header-top-w) solid var(--header-top); border-bottom: 1px solid var(--header-line); }
.header-inner { display: flex; flex-wrap: nowrap; align-items: center; column-gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 52px; flex: 0 0 auto; color: var(--brand-color); text-decoration: none; }
.brand:visited { color: var(--brand-color); }
.brand-mark { flex: none; width: 26px; height: 26px; }
.brand-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .02em; font-feature-settings: "palt" 1; white-space: nowrap; }
.site-nav { flex: 1 1 0; min-width: 0; border-left: 1px solid var(--rule); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav[data-more] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; }
.nav-list li { flex: 0 0 auto; }
.nav-list a, .nav-list a:visited {
  display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 12px;
  color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.3; letter-spacing: .03em; text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; text-align: center;
}
.nav-list a:focus-visible { outline-offset: -4px; }
.nav-list a:hover { color: var(--primary); border-bottom-color: var(--rule-strong); }
.nav-list a[aria-current] { color: var(--nav-active); border-bottom-color: var(--nav-active); }
@media (min-width: 1024px) {
  .header-inner { column-gap: 20px; }
  .brand { min-height: 72px; gap: 10px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 1.75rem; letter-spacing: .04em; }
  .site-nav { border-left: 0; }
  .nav-list { justify-content: flex-end; width: auto; }
  .nav-list a { min-height: 72px; padding: 0 10px; }
}

/* ---------- 本文の段組（本文 700px・表と広い写真 960px・ヒーローと帯は全幅） ---------- */
main { display: block; padding-bottom: 64px; }
.prose {
  --gutter-w: var(--gutter);
  --cols:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, var(--wide-pad, 130px))
    [text-start] min(var(--text-w), 100% - 2 * var(--gutter))
    [text-end] minmax(0, var(--wide-pad, 130px))
    [wide-end] minmax(var(--gutter), 1fr)
    [full-end];
  display: grid;
  grid-template-columns: var(--cols);
}
/* 題材の入口ページ（hub）：本文の列を 1040px にして、カード・図・表と左右の端をそろえる。段落だけ 46rem までに絞る（左そろえ） */
.prose.t-hub, .prose.t-home {
  --wide-pad: 0px;
  --cols:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start text-start] min(1040px, 100% - 2 * var(--gutter))
    [text-end wide-end] minmax(var(--gutter), 1fr)
    [full-end];
}
.prose:is(.t-hub, .t-home) > p:not([class]), .prose:is(.t-hub, .t-home) > .sec > p:not([class]), .prose:is(.t-hub, .t-home) > ol:not([class]), .prose:is(.t-hub, .t-home) > .sec > ol:not([class]),
.prose:is(.t-hub, .t-home) > ul:not([class]), .prose:is(.t-hub, .t-home) > .sec > ul:not([class]) { max-width: 46rem; }
:is(.prose, .prose > .sec) > * { grid-column: text-start / text-end; min-width: 0; margin: 0; }
:is(.prose, .prose > .sec) > .wide, :is(.prose, .prose > .sec) > .table-wrap, :is(.prose, .prose > .sec) > figure.wide { grid-column: wide-start / wide-end; }
/* 広い画面では、表の段だけ 1040px まで広げる（出どころの列が細くなって、1 行 3 文字で折り返すのを防ぐ）。写真は 960px のまま */
@media (min-width: 1088px) { .prose { --wide-pad: 170px; } }
:is(.prose, .prose > .sec) > figure.wide { max-width: 960px; width: 100%; justify-self: center; }
:is(.prose, .prose > .sec) > .full { grid-column: full-start / full-end; }
:is(.prose, .prose > .sec) > * + *, :is(.prose, .prose > .sec) > section > * + * { margin-top: 1.25em; }
:is(.prose, .prose > .sec) > figure + *, :is(.prose, .prose > .sec) > .table-wrap + * { margin-top: 28px; }
:is(.prose, .prose > .sec) > .table-wrap { margin-top: 24px; }
:is(.prose, .prose > .sec) > figure { margin-top: 32px; }
:is(.prose, .prose > .sec) > h3, :is(.prose, .prose > .sec) > section > h3 { margin-top: 36px; }
:is(.prose, .prose > .sec) > h2, :is(.prose, .prose > .sec) > section > h2 { margin-top: 48px; }
:is(.prose, .prose > .sec) > h2 + *, :is(.prose, .prose > .sec) > section > h2 + *, :is(.prose, .prose > .sec) > h3 + *, :is(.prose, .prose > .sec) > section > h3 + * { margin-top: 12px; }
:is(.prose, .prose > .sec) > h2 + h3 { margin-top: 24px; }
@media (min-width: 640px) {
  :is(.prose, .prose > .sec) > h2, :is(.prose, .prose > .sec) > section > h2 { margin-top: 56px; }
  :is(.prose, .prose > .sec) > h2 + *, :is(.prose, .prose > .sec) > section > h2 + * { margin-top: 16px; }
}
:is(.prose, .prose > .sec) > section > :first-child { margin-top: 0; }
.prose :where(ul, ol) { padding-left: 1.5em; }
.prose :where(li) + :where(li) { margin-top: .5em; }
.prose :where(li) > :where(ul, ol) { margin-top: .5em; }
.prose :where(p, li) { text-wrap: pretty; }
.prose ol > li::marker { font-weight: 700; color: var(--primary); }

/* ---------- パンくず・見出し ---------- */
.crumbs { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); padding-top: 8px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .4em; }
.prose .crumbs li + li { margin-top: 0; }
.crumbs li + li::before { content: "›"; margin-right: .4em; color: var(--ink-2); }
.crumbs a { display: inline-block; padding: 9px 0; }
.crumbs [aria-current] { display: inline-block; padding: 9px 0; }
.prose h1, .prose h2 { font-family: var(--font-serif); font-weight: 700; font-feature-settings: "palt" 1; text-wrap: balance; word-break: auto-phrase; }
.prose h1 { font-size: 1.75rem; line-height: 1.35; letter-spacing: .01em; color: var(--h1-color); }
@media (min-width: 480px) { .prose h1 { font-size: 2rem; } }
@media (min-width: 1024px) { .prose h1 { font-size: 2.5rem; } }
:is(.prose, .prose > .sec) > h1 { margin-top: 4px; }
.prose h2 { font-size: 1.5rem; line-height: 1.45; letter-spacing: .01em; color: var(--h2-color); }
@media (min-width: 480px) { .prose h2 { font-size: 1.625rem; } }
@media (min-width: 1024px) { .prose h2 { font-size: 1.75rem; } }
.prose h3 { font-size: 1.1875rem; line-height: 1.5; font-weight: 700; letter-spacing: .02em; color: var(--ink); padding-bottom: 6px; border-bottom: 1px solid var(--rule); text-wrap: balance; }
@media (min-width: 480px) { .prose h3 { font-size: 1.25rem; } }
/* 章番号つきの h2（記事と一覧ページだけ。プライバシーなどの文書には付けない） */
.t-article, .t-hub { counter-reset: sec; }
.t-article h2, .t-hub h2 { counter-increment: sec; }
.t-article h2::before, .t-hub h2::before {
  content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 8px;
  font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: .06em; color: var(--brass-ink);
  font-variant-numeric: lining-nums;
}
.t-article h2::after, .t-hub h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; background: var(--brass); }
.t-article .sources > h2::after, .t-article .related > h2::after, .t-article .changelog > h2::after { content: none; }
.t-page h2 { border-top: 2px solid var(--primary); padding-top: 16px; }
.t-home h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; background: var(--brass); }
:is(.prose, .prose > .sec) > h1:first-child { margin-top: 32px; }
.t-home :is(.prose, .prose > .sec) > p.small { grid-column: wide-start / wide-end; }
.prose h2[id], .prose h3[id] { scroll-margin-top: 16px; }

/* ---------- 日付帯・要点箱・注意箱 ---------- */
.small, .hint, .table-hint { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.meta-strip { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.meta-strip dl { margin: 0; display: grid; gap: 2px 28px; }
.meta-strip dl div { display: flex; gap: .6em; }
.meta-strip dt { font-weight: 700; }
.meta-strip dd { margin: 0; }
.meta-strip p { margin: 8px 0 0; }
.meta-strip .legend .badge { margin-right: .2em; }
@media (min-width: 640px) { .meta-strip dl { grid-template-columns: repeat(3, auto); justify-content: start; } }
/* スマホでは、日付帯（実測で約 250px）が結論を最初の画面の下に押し下げるので、要点箱を先に見せ、日付帯はそのすぐ下に置く（見た目の順だけ。文書の順は変えない） */
@media (max-width: 639px) {
  :is(.prose, .prose > .sec) > .crumbs { order: -3; }
  :is(.prose, .prose > .sec) > h1 { order: -2; }
  :is(.prose, .prose > .sec) > .meta-strip + .answer { order: -1; }   /* h1 のすぐ下の要点箱だけ。節ごとの要点箱（耐用年数の記事）は動かさない */
  :is(.prose, .prose > .sec) > .meta-strip + .answer + .cta-a { order: -1; }   /* 型A は要点箱のすぐ下 */
}
.answer {
  background: var(--answer-bg); border-top: var(--answer-rule-w) solid var(--answer-rule); border-radius: var(--radius-box); box-shadow: var(--shadow-card); padding: 16px;
  font-size: 1.125rem; line-height: 1.8; letter-spacing: .02em;
}
.answer::before { content: "要点"; display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; color: var(--answer-label); }
@media (min-width: 480px) { .answer { padding: 20px; font-size: 1.1875rem; } }
@media (min-width: 1024px) { .answer { font-size: 1.25rem; } }
.note { background: var(--wash); border: 1px solid var(--rule-strong); padding: 16px 20px; }
.note::before { content: "ご注意"; display: block; margin-bottom: 4px; font-size: .9375rem; font-weight: 700; color: var(--primary); }
.note > * + *, .calc-warn > * + * { margin-top: .5em; }
.calc-warn { background: var(--brass-wash); border: 2px solid var(--brass-ink); padding: 16px 20px; }
.calc-warn p { margin: 0; }

/* ---------- 目次 ---------- */
.toc { border-top: 3px solid var(--primary); border-bottom: 1px solid var(--rule); }
.toc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; cursor: pointer;
  font-size: 1.125rem; font-weight: 700; list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "＋"; font-weight: 700; color: var(--primary); }
.toc details[open] > summary::after { content: "－"; }
.toc ol { list-style: none; margin: 0; padding: 0 0 8px; counter-reset: toc; }
.toc li { counter-increment: toc; margin: 0; }
.toc li + li { margin-top: 0; }
.toc li a { display: flex; align-items: baseline; gap: .75em; min-height: 44px; padding: 8px 0; }
.toc li a::before {
  content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-serif); font-weight: 700;
  font-size: .9375rem; letter-spacing: .14em; color: var(--brass-ink); text-decoration: none; display: inline-block;
}

/* ---------- 写真と図 ---------- */
.photo img, .hero-photo img, .card-photo img { outline: 1px solid rgba(27, 34, 36, .14); outline-offset: -1px; background: var(--wash); }
.photo img { display: block; width: 100%; height: auto; }
.photo img.crop, .card-photo img.crop { object-fit: cover; object-position: var(--pos, 50% 50%); }
:is(.prose, .prose > .sec) > figure.hero-article { grid-column: full-start / full-end; }
.hero-article img { aspect-ratio: 16 / 10; object-fit: cover; object-position: var(--pos, 50% 50%); }
@media (min-width: 768px) {
  :is(.prose, .prose > .sec) > figure.hero-article { grid-column: wide-start / wide-end; max-width: 960px; width: 100%; justify-self: center; }
  .hero-article img { aspect-ratio: 2 / 1; }
}
.diagram { margin-top: 32px; }
.diagram .dg { max-width: 500px; margin: 0 auto; }
.dg-svg { display: block; width: 100%; height: auto; }
.diagram figcaption { margin: 12px 0 0; font-size: 1rem; line-height: 1.7; color: var(--ink); }
.dg-t { font-family: var(--font-sans); font-size: 16px; fill: var(--ink); letter-spacing: 0; }
.dg-t-primary { fill: var(--primary); font-weight: 700; }
.dg-t-brass { fill: var(--brass-ink); font-weight: 700; }
.dg-scaf rect { fill: none; stroke: var(--brass-ink); stroke-width: 2; stroke-dasharray: 6 4; }
.dg-scaf-in { fill: none; stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 6 4; }
.dg-roof { fill: var(--paper); stroke: var(--primary); stroke-width: 2; }
.dg-wall, .dg-bar-wall { fill: var(--tint); stroke: var(--primary); stroke-width: 2; }
.dg-bar-scaf { fill: var(--brass-wash); stroke: var(--brass-ink); stroke-width: 2; stroke-dasharray: 6 4; }
.dg-b1 { fill: var(--primary); stroke: var(--primary); stroke-width: 2; }
.dg-b2 { fill: var(--tint); stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 4; }
.dg-grid { stroke: var(--rule); stroke-width: 1; fill: none; }
.dg-axis { stroke: var(--ink-2); stroke-width: 2; fill: none; }

/* トップ・一覧のヒーロー（写真の上に文字は載せない） */
.hero-photo { margin: 0; background: var(--wash); }
.hero-photo img { display: block; width: 100%; max-width: 1600px; margin: 0 auto; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hero-home img { aspect-ratio: 4 / 3; }
.hero-hub img { height: clamp(220px, 30vw, 420px); }
@media (min-width: 768px) { .hero-home img { aspect-ratio: auto; height: clamp(260px, 38vw, 560px); } }

.hero-photo { border-bottom: var(--hero-rule-w) solid var(--hero-rule); }
/* ヒーロー：写真と文字を分ける。写真の下の、白い面に、見出しと約束を置く（写真の上に文字は載せない・食い込ませない） */
:is(.prose, .prose > .sec) > .hero-intro { grid-column: wide-start / wide-end; margin-top: 32px; display: grid; gap: 16px; }
.eyebrow { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 1.0625rem; line-height: 1; letter-spacing: .2em; color: var(--eyebrow-color); }
.hero-intro h1 { margin: 0; font-size: 1.75rem; line-height: 1.4; letter-spacing: .02em; max-width: 28em; }
.hi-body { display: grid; gap: 20px; }
.hi-body > p { margin: 0; }
.topic-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
:is(.prose, .prose > .sec) > .topic-pills { margin-top: 16px; }
.topic-pills > li { margin: 0; }
.prose .topic-pills > li + li { margin-top: 0; }
.hi-side .topic-pills { margin-top: 16px; }
.topic-pills a, .topic-pills a:visited {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
  border: 2px solid var(--primary); border-radius: 2px; background: var(--paper); color: var(--primary);
  font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-decoration: none;
}
.topic-pills a:hover { background: var(--primary); color: #fff; }
@media (min-width: 480px) { .hero-intro h1 { font-size: 2.125rem; } }
@media (min-width: 768px) {
  :is(.prose, .prose > .sec) > .hero-intro { margin-top: 40px; gap: 20px; }
  .hi-body { grid-template-columns: 6fr 5fr; column-gap: 48px; align-items: start; }
  .hero-intro h1 { font-size: 2.5rem; }
}
@media (min-width: 1024px) { .hero-intro h1 { font-size: 2.875rem; } }
.promise { font-family: var(--font-serif); font-weight: 700; font-size: 1.375rem; line-height: 1.5; letter-spacing: .02em; color: var(--promise-color); text-wrap: balance; word-break: auto-phrase; }
@media (min-width: 480px) { .promise { font-size: 1.625rem; } }
@media (min-width: 1024px) { .promise { font-size: 1.875rem; } }

/* 数字の帯（記事にある数字だけ） */
:is(.prose, .prose > .sec) > .stat-band { grid-column: full-start / full-end; margin-top: 56px; padding: 40px 0; background: var(--stat-bg); color: var(--stat-fg); border-radius: var(--radius-box); }
.stat-inner { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); display: grid; }
.stat { padding: 24px 0; border-top: 1px solid var(--stat-line); }
.stat:first-child { padding-top: 0; border-top: 0; }
.stat:last-child { padding-bottom: 0; }
.stat p { margin: 0; }
.stat-label { font-size: .9375rem; line-height: 1.6; color: var(--stat-sub); }
.stat-figure { margin-top: 4px; font-family: var(--font-serif); font-weight: 700; font-size: 2.5rem; line-height: 1.1; letter-spacing: 0; color: var(--stat-figure); font-variant-numeric: lining-nums; }
.stat-figure .u { font-size: .5em; margin: 0 .1em; }
.stat-text { margin-top: 8px; font-size: 1rem; line-height: 1.7; color: var(--stat-fg); }
.stat-link { margin-top: 8px; font-size: .9375rem; line-height: 1.7; }
.stat a, .stat a:visited { color: var(--stat-fg); }
.stat a:focus-visible { outline-color: var(--on-deep-accent); }
@media (min-width: 480px) { .stat-figure { font-size: 3.25rem; } }
@media (min-width: 768px) {
  .stat-inner { grid-template-columns: repeat(3, 1fr); }
  .stat { padding: 0 24px; border-top: 0; border-left: 1px solid var(--stat-line); }
  .stat:first-child { padding-left: 0; border-left: 0; }
  .stat:last-child { padding-right: 0; }
  .stat-figure { font-size: 3rem; }
}
@media (min-width: 1024px) { .stat-figure { font-size: 4rem; } }

.stat-note { max-width: 960px; margin: 28px auto 0; padding: 0 var(--gutter); font-size: .9375rem; line-height: 1.7; color: var(--stat-sub); }
.stat-action {
  max-width: 960px; margin: 32px auto 0; padding: 24px var(--gutter) 0; border-top: 1px solid var(--stat-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; color: var(--stat-fg);
}
.stat-action span { font-size: 1rem; line-height: 1.6; }
.btn-light, .btn-light:visited {
  display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 56px; padding: 10px 28px;
  border: 2px solid var(--on-deep-accent); border-radius: 2px; background: var(--on-deep-accent); color: var(--deep);
  font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-decoration: none;
}
.btn-light::after { content: "→"; }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--deep); }
.btn-light:focus-visible { outline-color: #fff; outline-offset: 3px; }
@media (min-width: 640px) { .btn-light { display: inline-flex; width: auto; min-width: 16rem; } }

/* 約束（均等カードにしない。上の罫＋番号＋見出し） */
:is(.prose, .prose > .sec) > .promises { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; gap: 32px; }
.promises > li { margin: 0; border-top: 2px solid var(--primary); padding-top: 12px; }
.promises > li + li { margin-top: 0; }
.promises .no { display: block; margin-bottom: 8px; font-family: var(--font-serif); font-weight: 700; font-size: .9375rem; line-height: 1; letter-spacing: .14em; color: var(--brass-ink); }
.promises h3 { margin: 0 0 6px; padding: 0; border: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; color: var(--primary); }
.promises p { margin: 0; }
@media (min-width: 768px) { :is(.prose, .prose > .sec) > .promises { grid-template-columns: repeat(3, 1fr); } }

/* 写真つきのカード（題材・記事） */
:is(.prose, .prose > .sec) > .entry-list { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; gap: var(--card-gap); }
.entry-list > li { margin: 0; }
.entry-list > li + li { margin-top: 0; }
.entry-list a, .entry-list a:visited { display: block; height: 100%; color: var(--ink); text-decoration: none; border: 1px solid var(--card-border); background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.entry-list a:hover, .topics a:hover { box-shadow: var(--shadow-card-hover); }
.card-photo { display: block; overflow: hidden; background: var(--wash); }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: var(--pos, 50% 50%); }
.entry-body { display: block; padding: var(--card-pad); }
.entry-title { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1.375rem; line-height: 1.45; color: var(--primary); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.entry-list a:hover .entry-title { text-decoration-thickness: 3px; }
.entry-desc { display: block; margin-top: 6px; font-size: 1rem; line-height: 1.7; color: var(--ink); letter-spacing: .02em; }
/* トップの記事カード：大 1（左）＋小 2（右）。写真が主役 */
@media (min-width: 768px) {
  .entry-list.feature { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: 24px; }
  .entry-list.feature > li:first-child { grid-row: 1 / span 2; }
  .entry-list.feature > li:first-child a { display: flex; flex-direction: column; }
  .entry-list.feature > li:first-child .card-photo { flex: 1 1 auto; min-height: 0; }
  .entry-list.feature > li:first-child .card-photo img { height: 100%; aspect-ratio: 4 / 3; }
  .entry-list.feature > li:not(:first-child) a { display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; }
  .entry-list.feature > li:not(:first-child) .card-photo img { height: 100%; aspect-ratio: auto; }
  .entry-list.feature > li:not(:first-child) .entry-body { align-self: center; padding: 16px 20px; }
}
@media (min-width: 768px) { .entry-list.feature .entry-title { font-size: 1.25rem; } .entry-list.feature > li:first-child .entry-title { font-size: 1.5rem; } }
/* トップの題材の写真は、細長く切る（空が多く、ピントも甘い写真のため。家のある下側を残す） */
.topic-list .card-photo img { aspect-ratio: 12 / 5; }
@media (min-width: 768px) {
  .entry-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .entry-list.topic-list a { display: grid; grid-template-columns: 7fr 5fr; align-items: stretch; }
  .topic-list .entry-body { align-self: center; padding: 24px; }
}

/* 見積書の項目→現場の作業（タイル） */
:is(.prose, .prose > .sec) > .tiles { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.tiles > li { margin: 0; }
.tiles > li + li { margin-top: 0; }
.tiles a, .tiles a:visited { display: block; height: 100%; color: var(--ink); text-decoration: none; }
.tile-no { display: block; margin: 8px 0 2px; font-family: var(--font-serif); font-weight: 700; font-size: .9375rem; line-height: 1.4; letter-spacing: .14em; color: var(--brass-ink); }
.tile-name { display: block; font-weight: 700; font-size: 1rem; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.tiles a:hover .tile-name { text-decoration-thickness: 3px; }
.tile-desc { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.tiles .is-text a { display: flex; flex-direction: column; justify-content: center; min-height: 140px; padding: 16px; background: var(--tint); border-top: 4px solid var(--primary); }
.tiles .is-text .tile-name { font-family: var(--font-serif); font-size: 1.1875rem; color: var(--primary); }
@media (min-width: 768px) { :is(.prose, .prose > .sec) > .tiles { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } }

/* ---------- 表（見積書のように。縦線なし・外枠なし） ---------- */
.table-wrap { position: relative; }
.table-scroll { position: relative; overflow-x: auto; }   /* sr-only の「外部サイト」が枠の外にはみ出して、ページ全体が横に伸びるのを防ぐ */
.table-scroll:focus-visible { outline-offset: 0; }
.table-wrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; opacity: 0;
  background: linear-gradient(270deg, rgba(27, 34, 36, .22), rgba(27, 34, 36, 0));
}
.table-wrap[data-more]::after { opacity: 1; }
.table-hint { margin-bottom: 0; }
@media (min-width: 1088px) { :is(.prose, .prose > .sec) > .table-hint { display: none; } }
table {
  width: 100%; border-collapse: collapse; overflow-wrap: normal;
  font-size: 1rem; line-height: 1.65; letter-spacing: .01em; font-variant-numeric: tabular-nums lining-nums;
  border-top: 3px solid var(--table-rule); border-bottom: 2px solid var(--table-rule);
}
table a { overflow-wrap: anywhere; }
table a[href^="http"] { word-break: normal; overflow-wrap: anywhere; }   /* URL は「/」や「.」の後ろで折り返す。足りないときだけ、字の途中でも折る */
td > a[href^="http"]:only-child, th > a[href^="http"]:only-child { display: inline-block; padding: 8px 0; margin: -8px 0; }   /* 表の中の 1 本だけのリンクも、押せる高さを 40px 近く取る */   /* 長い URL は、「sk-」だけ 1 行に残さず、行を埋めて折り返す */
table.wide { min-width: 46rem; }
th, td { padding: 12px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
thead th { background: var(--table-head-bg); color: var(--table-head-fg); font-size: 1rem; line-height: 1.5; font-weight: 700; letter-spacing: .02em; border-bottom: 1px solid var(--table-rule); vertical-align: bottom; }
tbody > tr > * { background: var(--paper); }
tbody > tr:nth-child(even) > * { background: var(--wash); }
tbody th { font-weight: 700; }
tbody th[scope="row"] { min-width: 10rem; }
table:not(.wide) tbody th[scope="row"] { width: 32%; }
td:has(> a[href^="http"]) { min-width: 9.5rem; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th[colspan] { background: var(--tint); color: var(--primary); }
td.num, th.num { text-align: right; white-space: nowrap; }
caption { caption-side: top; text-align: left; padding: 0 0 8px; font-size: .9375rem; color: var(--ink-2); }
td .small, th .small, td .hint { display: block; font-size: .9375rem; color: var(--ink-2); font-weight: 400; }
tr.subtotal > th, tr.subtotal > td, tr.total > th, tr.total > td { font-weight: 700; border-top: 3px double var(--primary); }
tr.total > td.num { font-size: 1.25rem; }
td details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media (min-width: 1024px) { td, th { font-size: 1.0625rem; } thead th { font-size: 1rem; } }
/* 日付などの短い注記つきの列は、1 行 3 文字で折り返さない幅を取る */
td:has(> .small):not(.num) { min-width: 9rem; }
td.date { min-width: 7.5rem; white-space: nowrap; }
td.nw { white-space: nowrap; }   /* 「アクリル」「ウレタン」のような短い語は、2 文字で折り返さない（site.js が付ける） */
th, td { text-wrap: pretty; }   /* 「し」だけが 1 行に残るのを減らす */
@media (min-width: 1088px) { td:has(> a[href^="http"]) { min-width: 12rem; } }

/* 狭い画面（1000px 未満）：5 列以下の表は、1 行を 1 まとまりに積む（横にスクロールしないと条件や出どころが見えない、を避ける）。
   site.js が、表に class="stack" と、各セルに data-label（見出しの文字）を付ける。動かないときは、今までどおり横にスクロールする。 */
@media (max-width: 62.49em) {
  /* 積まない長い表：URL を折り返さない（折り返すと、見えている左の列の行が、何行ぶんも空いて高くなる） */
  table:not(.stack) td a[href^="http"] { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
  table:not(.stack) td.nw2 { white-space: nowrap; }
  .table-hint.is-stacked { display: none; }
  table.stack { min-width: 0 !important; border-top-width: 3px; }
  table.stack, table.stack tbody, table.stack tr, table.stack th, table.stack td { display: block; width: auto; }
  table.stack thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.stack caption { display: block; }
  table.stack tbody tr { padding: 14px 0 12px; border-bottom: 1px solid var(--hair); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack tbody > tr > * { background: transparent; }
  table.stack tbody > tr:nth-child(even) { background: var(--wash); }
  table.stack th, table.stack td { min-width: 0 !important; padding: 0 14px; border: 0; }
  table.stack tbody th[scope="row"] { width: auto; padding-bottom: 6px; font-size: 1.0625rem; line-height: 1.6; }
  table.stack td { margin-top: 6px; font-size: 1rem; line-height: 1.7; }
  table.stack td[data-label]::before { content: attr(data-label) "："; font-weight: 700; color: var(--primary); }
  table.stack td.num, table.stack td.date, table.stack td.nw { text-align: left; white-space: normal; }
  table.stack td.num { word-break: keep-all; overflow-wrap: normal; }   /* 「295,000」と「円」を別の行に割らない */
  table.stack td .small, table.stack td .row-formula { margin-top: 2px; }
  table.stack tbody tr:has(> th[colspan]) { padding: 0; background: var(--tint); }
  table.stack tbody th[colspan] { padding: 10px 14px; background: var(--tint); }
  table.stack tr.subtotal, table.stack tr.total { border-top: 3px double var(--primary); }
  table.stack tr.subtotal > th, table.stack tr.subtotal > td, table.stack tr.total > th, table.stack tr.total > td { border-top: 0; }
  table.stack td a { overflow-wrap: anywhere; }
  #calc-detail table.stack td.num { display: inline-block; width: calc(50% - 4px); vertical-align: top; }
}

/* 出どころの印：実線＝確認できた・一次／破線＝二次・未確認／真鍮＝当サイトの計算 */
.badge {
  display: inline-block; padding: 0 8px; border: 2px solid var(--primary); border-radius: 2px;
  background: var(--primary); color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.4; letter-spacing: .05em; white-space: nowrap;
}
.badge.secondary { background: var(--paper); color: var(--ink-2); border: 2px dashed var(--rule-strong); }
.badge.calc { background: var(--paper); color: var(--brass-ink); border: 2px solid var(--brass-ink); }

/* 外部リンクの印（同じタブで開く） */
a[href^="http"]:not(.cta-btn)::after { content: "↗"; font-size: .8em; margin-left: .1em; text-decoration: none; display: inline-block; }

/* ---------- 紹介リンク：型A（小・要点箱の直後）／型B（本命・主要な表の直後）／型C（末尾） ----------
 * 【PR】のチップと報酬の文はリンクのすぐ近く。条件（cta-terms）はボタンの前。影・グラデーション・固定・ポップアップなし。角は 2px まで。 */
.cta { background: var(--paper); border: 1px solid var(--card-border); border-top: var(--cta-rule-w) solid var(--cta-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 20px; }
.cta > * + * { margin-top: 12px; }
.cta p { margin: 0; }
:is(.prose, .prose > .sec) > .cta { margin-top: 48px; }
:is(.prose, .prose > .sec) > .cta + * { margin-top: 40px; }
.pr-chip {
  display: inline-block; padding: 0 8px; background: var(--ink); color: #fff; border-radius: 2px;
  font-size: inherit; font-weight: 700; line-height: 1.6; letter-spacing: .04em; vertical-align: middle; white-space: nowrap;
}
.cta-reward { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.cta-reward a { white-space: nowrap; }
.cta-terms { font-size: 1rem; line-height: 1.7; }

/* 型A：1 行＋文字リンク */
.cta-a { border-width: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); background: var(--wash); padding: 12px 16px; }
.cta-a > * + * { margin-top: 0; }
:is(.prose, .prose > .sec) > .cta-a { margin-top: 20px; }
:is(.prose, .prose > .sec) > .cta-a + * { margin-top: 24px; }
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; line-height: 1.6; }
.cta-lead { font-weight: 700; }
.cta-link { display: inline-block; padding: 10px 0; min-height: 44px; font-weight: 700; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }   /* 「法」だけの行を作らない。inline-block：折り返しても「↗」が文の末尾に付く（inline-flex だと右端に離れる） */
.cta-link.is-off { color: var(--ink-2); text-decoration: none; border-bottom: 2px dashed var(--rule-strong); align-self: center; min-height: 0; padding: 0; margin: 8px 0; }
.cta-note { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.cta-note .cta-terms { font-size: inherit; line-height: inherit; }

/* 型B（本命）・型C（末尾） */
.cta-b, .cta-c { padding: 24px 20px; }
@media (min-width: 640px) { .cta-b, .cta-c { padding: 32px; } }
.cta-title {
  font-family: var(--font-serif); font-weight: 700; font-size: 1.375rem; line-height: 1.5; letter-spacing: .01em; color: var(--primary);
  font-feature-settings: "palt" 1; text-wrap: balance; word-break: auto-phrase;
}
@media (min-width: 480px) { .cta-title { font-size: 1.5rem; } }
.cta-facts-label { font-size: .9375rem; line-height: 1.7; color: var(--ink-2); }
.cta .cta-facts-label { margin-top: 16px; }
.cta-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cta .cta-facts { margin-top: 4px; }
.cta-facts li, .cta-facts li + li { position: relative; margin: 0; padding-left: 28px; font-size: 1.125rem; line-height: 1.7; }
.cta-facts li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 10px; height: 10px; background: var(--brass); }
.cta-lead-c { font-size: 1.125rem; line-height: 1.8; }
.cta .cta-terms { margin-top: 16px; }
.cta .cta-action { margin-top: 20px; }
.cta .cta-reward { margin-top: 12px; }

/* 紹介ボタン：真鍮色の面・白文字・高さ 56px・角 2px・影なし。押したとき少し濃くなる。スマホは横いっぱい */
.cta-btn, .cta-btn:visited {
  display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 56px; padding: 10px 20px;
  border: 2px solid var(--cta-btn-bg); border-radius: 2px; background: var(--cta-btn-bg); color: var(--cta-btn-fg); box-shadow: var(--shadow-btn);
  font-size: 1.125rem; font-weight: 700; line-height: 1.35; letter-spacing: .04em; text-align: center; text-decoration: none;
}
.cta-btn .nb { display: inline-block; }   /* 「（最大4社）」を 1 かたまりに */
.cta-btn::after { content: "→"; }
@media (min-width: 480px) { .cta-btn { font-size: 1.25rem; } }
@media (min-width: 640px) { .cta-btn { display: inline-flex; width: auto; min-width: 24rem; } }
.cta-btn:hover, .cta-btn:active, .cta-btn:visited:hover { background: var(--cta-btn-bg-hover); border-color: var(--cta-btn-bg-hover); color: var(--cta-btn-fg); text-decoration: none; }
.cta-btn.is-off, .cta-btn.is-off:hover { background: var(--wash); border: 2px dashed var(--rule-strong); color: var(--ink-2); cursor: not-allowed; }
.cta-btn.is-off::after { content: none; }

/* 計算ツール：結果が出るまで、結果の直下の型B は出さない（:has が使えない古いブラウザでは、いつも出る） */
.result:has(#calc-summary[hidden]) + .cta-b { display: none; }

/* 戻る・トップへなどの、枠だけのボタン（404 ページ） */
.btn-outline, .btn-outline:visited {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px;
  border: 2px solid var(--primary); border-radius: 2px; background: var(--paper); color: var(--primary);
  font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-decoration: none;
}
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 出典・未確認・履歴 ---------- */
:is(.prose, .prose > .sec) > .sources { margin-top: 64px; font-size: 1rem; grid-column: wide-start / wide-end; }
.sources > :not(.table-wrap) { max-width: 700px; margin-left: auto; margin-right: auto; width: 100%; }
.sources > h2 { border-top: 2px solid var(--primary); padding-top: 16px; }
.sources li { font-size: 1rem; }
.sources .small { font-size: .9375rem; }
.sources h3 { font-size: 1.125rem; }
.unverified { background: var(--wash); border: 2px dashed var(--rule-strong); padding: 16px 20px; }
.unverified::before { content: "未確認"; display: block; margin-bottom: 6px; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-2); }
.unverified ul { margin: 0; padding-left: 1.5em; }
.unverified li::marker { content: "— "; color: var(--ink-2); }
:is(.prose, .prose > .sec) > .changelog { margin-top: 48px; }
.changelog h2::before { content: none; display: none; }
.changelog ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.changelog li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }

/* ---------- 計算ツール ---------- */
.calc { background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--primary); padding: 16px; }
@media (min-width: 640px) { .calc { padding: 32px; } }
.calc-status { margin: 0 0 16px; font-size: .9375rem; color: var(--ink-2); }
.calc fieldset { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.calc fieldset#calc-fields { margin: 0; }
.calc legend, .calc label.block { display: block; padding: 0; margin: 0 0 8px; font-size: 1.125rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; color: var(--primary); }
.calc .field { margin: 0 0 28px; }
.calc .hint { margin: 8px 0 0; }
.choices { display: grid; gap: 8px; }
.choices label {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 14px;
  border: 2px solid var(--rule-strong); border-radius: 2px; font-weight: 400; cursor: pointer;
}
.choices label:has(input:checked) { border-color: var(--primary); background: var(--tint); }
.calc input[type="radio"], .calc input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--primary); }
.checks label, .calc .disabled-note { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; font-weight: 400; cursor: pointer; }
.calc .disabled-note { color: var(--ink-2); cursor: default; }
.input-row { display: flex; align-items: center; gap: 12px; }
.input-row .unit { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.calc input[type="number"], .calc select {
  font: inherit; font-size: 1.375rem; line-height: 1.2; height: 56px; width: 100%; max-width: 20rem; padding: 0 14px;
  border: 2px solid var(--rule-strong); border-radius: 2px; background: #fff; color: var(--ink); letter-spacing: 0;
}
.input-row input[type="number"] { max-width: 14rem; }
.calc input[type="number"]:focus-visible, .calc select:focus-visible { border-color: var(--primary); outline: 3px solid var(--focus); outline-offset: 2px; }
.extras .extra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; }
.extras .extra label { flex: 1 0 100%; font-weight: 700; font-size: 1rem; }
.extras .extra input[type="number"] { width: 9rem; max-width: 9rem; }
.extras .extra .hint { flex: 1 0 100%; margin: 0; }
.btn {
  font: inherit; font-size: 1.125rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  height: 56px; width: 100%; padding: 0 32px; border: 2px solid var(--btn-bg); border-radius: 2px;
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--shadow-btn); cursor: pointer;
}
@media (min-width: 480px) { .btn { font-size: 1.25rem; } }
@media (min-width: 640px) { .btn { width: auto; min-width: 16rem; } }
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn[disabled] { background: var(--wash); color: var(--ink-2); border: 2px dashed var(--rule-strong); cursor: not-allowed; }
.calc-error { margin: 0 0 12px; font-size: 1rem; font-weight: 700; color: var(--err); }
.calc-error:empty { display: none; }
.calc-error:not(:empty)::before { content: "入力エラー："; }
.calc-error + .btn { margin-top: 0; }

:is(.prose, .prose > .sec) > .result { margin-top: 32px; grid-column: wide-start / wide-end; }
.result > :not(#calc-detail), #calc-detail > :not(.table-wrap) { max-width: 700px; margin-left: auto; margin-right: auto; width: 100%; }
.result:focus { outline: none; }   /* ボタンを押したあと、スクリプトが結果へ移すだけの枠。広い範囲を囲む輪は不要 */
.result:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }   /* キーボードで操作したときだけ輪を出す */
.result > * + *, #calc-detail > * + * { margin-top: 20px; }
#calc-detail > .breakdown, #calc-detail > .formula { margin-top: 28px; }
#calc-detail > .cta-b { margin-top: 32px; }
#calc-detail > .cta-b + * { margin-top: 32px; }
@media (min-width: 768px) { #calc-detail > .cta-b + .table-hint + .table-wrap { margin-top: 32px; } }   /* ヒントが隠れる幅では、表が次に来る */
#calc-detail table.wide { min-width: 38rem; }
#calc-detail tbody td:last-child { min-width: 10rem; }
#calc-detail tbody th[scope="row"] { min-width: 11rem; }
@media (min-width: 768px) { #calc-detail .table-hint { display: none; } }
.result-summary { margin: 0; padding: 20px; background: var(--result-bg); color: var(--result-fg); border-top: 4px solid var(--result-rule); border-radius: var(--radius-box); font-weight: 400; }
@media (min-width: 640px) { .result-summary { padding: 24px; } }
.result-summary:focus-visible, .result-summary a:focus-visible { outline-color: var(--on-deep-accent); }
.result-label { display: block; font-size: .9375rem; line-height: 1.6; color: var(--result-sub); }
.result-figure { display: block; margin: 4px 0 10px; font-family: var(--font-serif); font-weight: 700; font-size: 1.75rem; line-height: 1.25; letter-spacing: 0; color: var(--result-fg); font-variant-numeric: lining-nums; }
.result-figure .unit { font-size: .6em; margin-left: .1em; }
.result-figure .to { display: inline-block; margin: 0 .35em; font-size: .7em; font-weight: 400; }
.result-note { display: block; font-size: 1rem; line-height: 1.7; color: var(--result-fg); }
@media (min-width: 480px) { .result-figure { font-size: 2.25rem; } }
@media (min-width: 1024px) { .result-figure { font-size: 3rem; } }
.breakdown { margin: 0; }
.breakdown h3 { margin: 0 0 8px; }
.bd-bar { display: flex; gap: 2px; height: 28px; background: var(--paper); }
.bd-seg { display: block; height: 100%; min-width: 2px; }
.bd-1 { background: var(--bd-1); }
.bd-2 { background: var(--bd-2); }
.bd-3 { background: var(--bd-3); }
.bd-4 { background: var(--bd-4); }
.bd-5 { background: repeating-linear-gradient(135deg, #4B5658 0 3px, #FFFFFF 3px 6px); outline: 1px solid #4B5658; outline-offset: -1px; }
.bd-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px 24px; }
.bd-list li { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 32px; font-size: 1rem; }
.bd-swatch { flex: none; width: 16px; height: 16px; }
.bd-pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.breakdown .small { margin-top: 8px; }
@media (min-width: 640px) { .bd-list { grid-template-columns: 1fr 1fr; } }
.formula { margin: 0; padding: 16px; background: var(--wash); border: 1px dashed var(--rule-strong); font-size: 1rem; line-height: 1.8; }
.formula > p { margin: 0 0 6px; font-weight: 700; color: var(--primary); }
.formula ul { margin: 0; padding-left: 1.4em; }
.formula li + li { margin-top: .35em; }
.row-formula { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.65; font-weight: 400; color: var(--ink-2); }

/* ---------- 記事の部品：この記事でわかること・要点の帯・数字の帯・表の注目の行・よくある質問・関連記事 ---------- */
/* この記事でわかること（3点。各点はその節へのリンク） */
.learn { background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--brass); padding: 16px 20px 18px; }
.learn-title { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; line-height: 1.5; color: var(--primary); }
.prose .learn ol { margin: 0; padding: 0; list-style: none; counter-reset: learn; display: grid; gap: 8px; }
.learn li { margin: 0; counter-increment: learn; display: flex; gap: .8em; align-items: baseline; font-size: 1.0625rem; line-height: 1.7; }
.prose .learn li + li { margin-top: 0; }
.learn li::before { content: counter(learn, decimal-leading-zero); flex: none; font-family: var(--font-serif); font-weight: 700; font-size: .9375rem; letter-spacing: .14em; color: var(--brass-ink); }
@media (max-width: 639px) { :is(.prose, .prose > .sec) > .learn { order: -1; } }   /* スマホでは、要点箱のすぐ下（日付帯より先）に見せる */

/* 節の要点の帯（上に真鍮色の太い罫。左線は使わない） */
.kp { margin: 0; padding: 12px 0; border-top: 2px solid var(--brass); border-bottom: 1px solid var(--rule); font-size: 1.0625rem; line-height: 1.75; font-weight: 400; color: var(--ink); }
.kp strong { font-family: var(--font-serif); font-size: 1.1875rem; color: var(--primary); }
.kp-label { display: inline-block; margin-right: .8em; font-size: .9375rem; font-weight: 700; letter-spacing: .14em; color: var(--brass-ink); }

/* 数字の帯（記事の数字だけ。その節の主な数字を並べる） */
:is(.prose, .prose > .sec) > .numstrip { grid-column: wide-start / wide-end; list-style: none; margin-top: 24px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); background: var(--wash); border-top: 4px solid var(--primary); border-bottom: 1px solid var(--rule); }
.numstrip > li { margin: 0; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--rule); }
.prose .numstrip > li + li { margin-top: 0; }
.numstrip > li:nth-child(odd) { border-right: 1px solid var(--rule); }
.numstrip > li:nth-last-child(-n+2) { border-bottom: 0; }
.ns-label { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.ns-fig { font-family: var(--font-serif); font-weight: 700; font-size: 1.375rem; line-height: 1.3; letter-spacing: 0; color: var(--primary); font-variant-numeric: lining-nums; white-space: nowrap; }
.ns-fig small { font-size: .75em; margin: 0 .06em; }
.ns-note .nb { display: inline-block; white-space: nowrap; }
.ns-note { font-size: .9375rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 419px) { .numstrip > li { padding: 12px 10px 14px; } .ns-fig { font-size: 1.1875rem; } }
@media (min-width: 480px) { .ns-fig { font-size: 1.625rem; } }
@media (min-width: 768px) {
  :is(.prose, .prose > .sec) > .numstrip { grid-template-columns: repeat(4, 1fr); }
  .numstrip > li { padding: 18px 16px 20px; border-bottom: 0; border-right: 0; }
  .numstrip > li + li { border-left: 1px solid var(--rule); }
}

/* 表の注目の行（一次の行・最小・最大など）と、行の中の小さな印 */
.mark { display: inline-block; margin-right: .35em; padding: 0 6px; border: 1.5px solid var(--brass-ink); border-radius: 2px; background: var(--paper); color: var(--brass-ink); font-size: .9375rem; font-weight: 700; line-height: 1.45; letter-spacing: .04em; white-space: nowrap; }
table tbody tr.hl > * { background: var(--hl-bg); border-top: 2px solid var(--table-rule); border-bottom: 2px solid var(--table-rule); }
table tbody tr.hl > td.num, table tbody tr.hl > td strong { font-weight: 700; }
@media (max-width: 62.49em) {
  table.stack tbody tr.hl { background: var(--hl-bg); border-top: 2px solid var(--table-rule); border-bottom: 2px solid var(--table-rule); }
  table.stack tbody tr.hl > * { background: transparent; border: 0; }
}

/* あわせて読みたい（関連記事。写真つきのカード） */
:is(.prose, .prose > .sec) > .related { grid-column: wide-start / wide-end; margin-top: 56px; }
.related > h2 { margin: 0 0 20px; }
.t-article .related h2 { counter-increment: none; }
.t-article .related h2::before { display: none; }
.related .entry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .related .entry-list { grid-template-columns: 1fr 1fr; } }
.entry-date { display: block; margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }

/* トップの題材の入口カード（写真つき 2 枚＋写真の無い題材は深い面と線画） */
:is(.prose, .prose > .sec) > .topics { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; gap: 24px; }
.topics > li { margin: 0; }
.topics > li + li { margin-top: 0; }
.topics a, .topics a:visited { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; border: 1px solid var(--card-border); background: var(--paper); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
.topics a:hover .entry-title { text-decoration-thickness: 3px; }
.topics .card-photo img { aspect-ratio: 16 / 9; }
.topics .entry-body { flex: 1 1 auto; padding: 18px 18px 20px; }
.topic-status { display: inline-block; margin-bottom: 10px; padding: 0 8px; border-radius: 2px; font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.topic-status.is-live { background: var(--primary); border: 2px solid var(--primary); color: #fff; }
.topic-status.is-plan { background: var(--paper); border: 2px dashed var(--rule-strong); color: var(--ink-2); }
.topic-meta { display: block; margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 768px) { :is(.prose, .prose > .sec) > .topics { grid-template-columns: 1fr 1fr; } :is(.prose, .prose > .sec) > .topics.cols-3 { grid-template-columns: repeat(3, 1fr); } }

/* 使い方の 3 ステップ */
:is(.prose, .prose > .sec) > .steps { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; gap: 20px; }
.steps > li { position: relative; margin: 0; padding: 16px 18px 20px; background: var(--wash); border-top: 4px solid var(--primary); }
.prose .steps > li + li { margin-top: 0; }
.step-no { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; line-height: 1; letter-spacing: .02em; color: var(--brass-ink); }
.steps h3 { margin: 10px 0 6px; padding: 0; border: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.5; color: var(--primary); }
.steps p { margin: 0; }
@media (min-width: 768px) {
  :is(.prose, .prose > .sec) > .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .steps > li:not(:last-child)::after { content: "→"; position: absolute; top: 18px; right: -26px; width: 20px; text-align: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--brass-ink); }
}

/* 図（SVG）の部品：帯グラフの色・手順の箱・矢印 */
.dg-t-b { font-weight: 700; }
.dg-t-2 { fill: var(--ink-2); }
.dg-c1 { fill: var(--bd-1); }
.dg-c2 { fill: var(--bd-2); }
.dg-c3 { fill: var(--bd-3); }
.dg-c4 { fill: var(--bd-4); }
.dg-c5 { fill: url(#dgC-hatch); stroke: #4B5658; stroke-width: 1; }
.dg-step { fill: var(--paper); stroke: var(--primary); stroke-width: 2; }
.dg-step-hi { fill: var(--tint); }
.dg-num { font-family: var(--font-serif); font-weight: 700; font-size: 26px; fill: #fff; }
.dg-num-brass { fill: var(--brass-ink); }
.dg-arrow { fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }

/* ---------- フッター ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-fg); border-top: 4px solid var(--footer-rule); padding: 32px 0; font-size: 1rem; line-height: 1.8; letter-spacing: .02em; }
.footer-brand { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.4; color: var(--footer-brand); letter-spacing: .04em; }
.footer-lead { margin: 4px 0 0; }
.footer-head { margin: 24px 0 0; font-size: .9375rem; font-weight: 700; letter-spacing: .1em; color: var(--footer-sub); }
.footer-links { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.footer-links + .footer-note { margin-top: 24px; }
.footer-links a, .footer-links a:visited { display: flex; align-items: center; min-height: 44px; color: var(--footer-fg); }
.footer-note { margin: 0 0 6px; color: var(--footer-fg); }
.footer-note .nb { display: inline-block; }   /* 「このページの最終更新：…」を、1 かたまりで次の行へ送る */
.site-footer a:focus-visible { outline-color: var(--on-deep-accent); }
@media (min-width: 640px) {
  .site-footer { padding: 48px 0; }
  .footer-links { display: flex; flex-wrap: wrap; gap: 0 28px; }
}

/* ---------- 2026-10-09：総合サイトの形・密度を上げる部品 ---------- */
:root { --band: #F3F4F2; }

/* 節（h2 ごと。地の色を白／薄い灰で交互にして、節の頭を見つけやすくする） */
.prose > .sec { grid-column: full-start / full-end; display: grid; grid-template-columns: var(--cols); margin-top: 0; padding: var(--sec-pad-top) 0 var(--sec-pad-bottom); }
.prose > :not(.sec) + .sec { margin-top: 48px; }
.prose > .sec + :not(.sec) { margin-top: 0; }
.prose > .stat-band + .sec { margin-top: 0; }
.prose > .sec > h2 { margin-top: 0; }
@media (min-width: 640px) { .prose > .sec { padding: calc(var(--sec-pad-top) + 16px) 0 calc(var(--sec-pad-bottom) + 16px); } }
.sec-alt { background: var(--band); --paper: var(--band); --wash: var(--band-card); }
.sec-alt .cta, .sec-alt .qa, .sec-alt .learn, .sec-alt .callout:not(.num), .sec-alt .calc { background: var(--band-card); }
.sec-alt .cta-a { background: var(--band-card); }
.sec-alt thead th { background: var(--band-thead); }
.sec-alt .photo img { background: var(--band-card); }

/* 題材の入口ページの写真（元が幅960pxなので、引き伸ばさず、濃い帯の中に置く） */
.hero-photo.is-framed { background: var(--hero-frame-bg); border-bottom: 4px solid var(--hero-frame-rule); padding: 16px 0; }
.hero-frame { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); }
.hero-photo.is-framed img { display: block; width: 100%; max-width: none; height: auto; object-fit: cover; outline: 1px solid rgba(255, 255, 255, .22); outline-offset: -1px; }
@media (max-width: 639px) { .hero-photo.is-framed img { aspect-ratio: 3 / 2 !important; } }
@media (min-width: 640px) { .hero-photo.is-framed { padding: 28px 0; } }

.prose.t-hub figure.wide, .prose.t-hub .sec > figure.wide { max-width: none; }
/* 図と文を横に並べる（広い画面）。狭い画面は縦 */
:is(.prose, .prose > .sec) > .split { grid-column: wide-start / wide-end; display: grid; gap: 24px; align-items: start; }
.split .diagram { margin: 0; }
.split .diagram .dg { max-width: 440px; }
@media (min-width: 768px) {
  :is(.prose, .prose > .sec) > .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
  :is(.prose, .prose > .sec) > .split.split-rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* 幅が出る理由（番号つきの行） */
.reasons { list-style: none; margin: 0; padding: 0; counter-reset: rs; display: grid; gap: 12px; }
.reasons > li { counter-increment: rs; position: relative; margin: 0; padding: 14px 16px 14px 66px; background: var(--paper); border-top: 3px solid var(--primary); border-bottom: 1px solid var(--hair); }
.prose .reasons > li + li { margin-top: 0; }
.reasons > li::before { content: counter(rs); position: absolute; left: 18px; top: 10px; font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; line-height: 1.1; color: var(--brass-ink); }
.reasons > li strong { display: block; font-family: var(--font-serif); font-size: 1.1875rem; line-height: 1.5; color: var(--primary); }
.sec-alt .reasons > li { background: var(--band-card); }

/* ラベル付きの枠（「見積書でここを見る」「数字の読み方」） */
.callout { background: var(--tint); border-top: 4px solid var(--primary); padding: 16px 18px 18px; }
.callout.num { border-top-color: var(--brass); background: var(--brass-wash); }
.callout > * { margin: 0; }
.callout > * + * { margin-top: 10px; }
.callout-label { display: flex; align-items: center; gap: .55em; font-family: var(--font-serif); font-weight: 700; font-size: 1.1875rem; line-height: 1.5; color: var(--primary); }
.callout-label::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--brass); }
.callout.num .callout-label { color: var(--brass-ink); }
.checklist { list-style: none; padding: 0; display: grid; gap: 8px; }
.prose .checklist { padding: 0; }
.checklist > li { position: relative; margin: 0; padding-left: 26px; line-height: 1.7; }
.prose .checklist > li + li { margin-top: 0; }
.checklist > li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 10px; height: 10px; border: 2px solid var(--primary); background: var(--paper); }
.checklist > li strong { color: var(--primary); }
.callout.num .checklist > li::before { border-color: var(--brass-ink); }
.callout.num .checklist > li strong { color: var(--brass-ink); }

/* 公開予定の記事（2×2 のカード） */
:is(.prose, .prose > .sec) > .planned { grid-column: wide-start / wide-end; list-style: none; padding: 0; display: grid; gap: 20px; border: 0; }
@media (min-width: 768px) { :is(.prose, .prose > .sec) > .planned { grid-template-columns: 1fr 1fr; gap: 24px; } }
.planned > li { margin: 0; padding: 16px 20px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: var(--paper); border: 1px solid var(--rule-strong); border-top: 4px solid var(--primary); }
.prose .planned > li + li { margin-top: 0; }
.pl-head { display: flex; align-items: center; gap: 14px; }
.pl-no { font-family: var(--font-serif); font-weight: 700; font-size: 2.25rem; line-height: 1; color: var(--brass-ink); }
.pl-status { display: inline-block; padding: 0 8px; border: 2px dashed var(--rule-strong); border-radius: 2px; background: var(--paper); color: var(--ink-2); font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: .05em; }
.pl-title { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; line-height: 1.5; color: var(--primary); text-wrap: balance; }
.pl-desc { font-size: 1rem; line-height: 1.75; }
.pl-chips-label { margin-top: auto; padding-top: 6px; font-size: .9375rem; font-weight: 700; color: var(--ink-2); }
.pl-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .pl-chips { padding: 0; }
.pl-chips > li { margin: 0; padding: 2px 10px; border: 1.5px solid var(--primary); border-radius: 2px; background: var(--tint); font-size: .9375rem; line-height: 1.6; }
.prose .pl-chips > li + li { margin-top: 0; }

/* 題材の入口ページ：「このページでわかること」を3列に */
@media (min-width: 768px) {
  .t-hub .learn ol { grid-template-columns: repeat(3, 1fr); gap: 16px 28px; }
  .t-hub .learn li { flex-direction: column; gap: .2em; }
}

/* よくある質問（開け閉めできる Q&A。答えの先頭に「結論」） */
.faq { display: grid; gap: 10px; }
.qa { border: 1px solid var(--rule-strong); border-top: 3px solid var(--primary); background: var(--paper); }
.qa > summary { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 16px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1.125rem; line-height: 1.55; color: var(--ink); }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: "＋"; flex: none; margin-left: auto; padding-left: 8px; font-weight: 700; color: var(--primary); }
.qa[open] > summary::after { content: "－"; }
.qa > summary:hover .qa-t { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.qa-q { flex: none; display: grid; place-items: center; width: 34px; height: 34px; background: var(--primary); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem; }
.qa-t { flex: 1 1 auto; }
.qa-a { padding: 2px 16px 18px 64px; border-top: 1px solid var(--hair); }
.qa-a p { margin: 0; }
.qa-label { display: inline-block; margin: 14px 0 6px; padding: 0 8px; border: 1.5px solid var(--brass-ink); border-radius: 2px; background: var(--brass-wash); color: var(--brass-ink); font-size: .9375rem; font-weight: 700; line-height: 1.5; letter-spacing: .14em; }
@media (max-width: 479px) { .qa-a { padding-left: 16px; } }

/* 「次はこれ」の1行バー（広告ではない、記事どうしの導線） */
.next-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 18px; background: var(--tint); border-top: 3px solid var(--primary); }
.next-bar .nb-label { font-family: var(--font-serif); font-weight: 700; font-size: .9375rem; letter-spacing: .14em; color: var(--brass-ink); }
.next-bar a, .next-bar a:visited { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--primary); }
.next-bar a::after { content: "→"; margin-left: .4em; text-decoration: none; display: inline-block; }
.next-bar .nb-sub { flex: 1 0 100%; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); padding-bottom: 8px; margin-top: -4px; }
.sec-alt .next-bar { background: var(--band-card); }

/* 一次／二次の2マス小表 */
.duo { margin: 0; display: grid; border-top: 3px solid var(--primary); border-bottom: 1px solid var(--hair); background: var(--paper); }
.duo > div { padding: 10px 14px 12px; }
.duo > div + div { border-top: 1px solid var(--hair); }
.duo dt { margin: 0 0 4px; font-weight: 700; }
.duo dd { margin: 0; font-size: 1rem; line-height: 1.7; }
.duo dd b { font-family: var(--font-serif); font-size: 1.125rem; color: var(--primary); }
@media (min-width: 640px) { .duo { grid-template-columns: 1fr 1fr; } .duo > div + div { border-top: 0; border-left: 1px solid var(--hair); } }
.sec-alt .duo { background: var(--band-card); }

/* 種類ごとに開閉する表 */
:is(.prose, .prose > .sec) > details.tbl-group { grid-column: wide-start / wide-end; border: 1px solid var(--rule-strong); border-top: 3px solid var(--primary); background: var(--paper); }
:is(.prose, .prose > .sec) > details.tbl-group + details.tbl-group { margin-top: 10px; }
.tbl-group > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 60px; padding: 10px 16px; cursor: pointer; list-style: none; }
.tbl-group > summary::-webkit-details-marker { display: none; }
.tbl-group > summary::after { content: "＋"; margin-left: 8px; font-weight: 700; color: var(--primary); }
.tbl-group[open] > summary::after { content: "－"; }
.tg-name { font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--primary); }
.tg-meta { font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.tg-range { margin-left: auto; font-family: var(--font-serif); font-weight: 700; font-size: 1.25rem; line-height: 1.4; color: var(--brass-ink); white-space: nowrap; }
.tbl-group[open] > summary { border-bottom: 1px solid var(--hair); }
.tbl-group .table-wrap { margin: 0; }
.tbl-group table { border-top: 0; }
.sec-alt .tbl-group { background: var(--band-card); }

/* 出典のリンク一覧（表をやめて、リンクだけ） */
.link-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 0 28px; }
.prose .link-grid { padding: 0; }
.link-grid > li { margin: 0; padding: 2px 0; border-bottom: 1px solid var(--hair); font-size: 1rem; }
.prose .link-grid > li + li { margin-top: 0; }
.link-grid a { display: inline-block; padding: 8px 0; }
.link-grid .lg-kind { margin-left: .5em; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 640px) { .link-grid { grid-template-columns: 1fr 1fr; } }

/* 見取り図の「空白の金額」 */
.dg-ph { stroke: var(--rule-strong); stroke-width: 3; stroke-dasharray: 2 7; fill: none; }

/* 計算ツール：例の結果・付帯部の開閉 */
.calc-sample { margin: 0 0 24px; padding: 16px 18px 18px; background: var(--wash); border: 1px dashed var(--rule-strong); }
.calc-sample > * { margin: 0; }
.calc-sample > * + * { margin-top: 10px; }
.sample-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: 700; }
.sample-tag { display: inline-block; padding: 0 10px; border: 2px solid var(--brass-ink); border-radius: 2px; background: var(--paper); color: var(--brass-ink); font-size: .9375rem; letter-spacing: .14em; }
.sample-figure { font-family: var(--font-serif); font-weight: 700; font-size: 2rem; line-height: 1.25; color: var(--primary); font-variant-numeric: lining-nums; }
.sample-figure .u { font-size: .6em; margin: 0 .1em; }
.sample-figure .to { margin: 0 .3em; font-size: .7em; font-weight: 400; }
.calc-sample .bd-bar { height: 20px; background: transparent; }
.calc-sample .bd-list { margin-top: 8px; }
.calc-sample .small a { white-space: nowrap; }
.calc details.extras-details { margin: 0 0 28px; border: 1px solid var(--rule-strong); border-radius: 2px; }
.extras-details > summary { display: flex; align-items: center; min-height: 56px; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: var(--primary); }
.extras-details > summary::-webkit-details-marker { display: none; }
.extras-details > summary::after { content: "＋"; margin-left: auto; padding-left: 8px; }
.extras-details[open] > summary::after { content: "－"; }
.extras-body { padding: 0 14px 14px; border-top: 1px solid var(--hair); }
.extras-body > .hint { margin: 10px 0 12px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; } }


/* ============================================================
 * 配色「そら」（2026-10-09 に本番へ。白地・空色・オレンジのボタン）
 * 元は assets/themes/sora.css。:root の変数を上書きし、形（角丸・影）を足す。
 * ============================================================ */
:root {
  /* ---- 色の素 ---- */
  --sky: #2F8FD6;              /* 飾りの線・帯・丸。文字や白文字の面には使わない（白との比 3.5） */
  --sky-soft: #8CC5F0;
  --orange: #F08C2E;           /* ボタンの面。文字は濃い茶色（比 6.9） */
  --orange-hover: #E07A1A;
  --orange-ink: #B3500A;       /* 白地のオレンジの文字（比 5.2） */
  --on-orange: #2B1700;

  /* ---- style.css の変数を上書き ---- */
  --paper: #FFFFFF;
  --wash: #F3F8FC;
  --tint: #E8F3FC;
  --brass-wash: #FFF5E6;
  --ink: #1F2A37;
  --ink-2: #4A5868;
  --primary: #1A6FB8;
  --deep: #164B7E;
  --link: #0F63A8;
  --visited: #7A3E9D;
  --brass: #F08C2E;
  --brass-ink: #B3500A;
  --brass-btn: #F08C2E;
  --brass-btn-dark: #E07A1A;
  --rule: #DCE7F0;
  --hair: #D9E6F1;
  --rule-strong: #7C93A8;
  --on-deep: #1F2A37;
  --on-deep-2: #4A5868;
  --on-deep-accent: #1A6FB8;
  --focus: #0F63A8;
  --err: #B3121A;
  --font-serif: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic UI", "Meiryo", sans-serif;

  /* 形 */
  --radius: 8px;
  --radius-card: 16px;
  --radius-box: 14px;
  --shadow-card: 0 2px 12px rgba(30, 90, 150, .10);
  --shadow-card-hover: 0 8px 24px rgba(30, 90, 150, .18);
  --shadow-btn: 0 3px 10px rgba(240, 140, 46, .38);
  --card-border: #D3E4F2;
  --card-gap: 28px;
  --card-pad: 20px;

  /* 余白 */
  --sec-pad-top: 56px;
  --sec-pad-bottom: 64px;
  --lh-body: 1.9;

  /* 文字 */
  --h1-color: #17324D;
  --h2-color: #17324D;
  --eyebrow-color: #B3500A;
  --promise-color: #1A6FB8;

  /* 【PR】帯：薄い灰色の細い帯 */
  --pr-bg: #F1F4F7;
  --pr-fg: #3E4C5B;

  /* ヘッダー */
  --header-bg: #FFFFFF;
  --header-top: #2F8FD6;
  --header-top-w: 6px;
  --header-line: #E1EAF2;
  --brand-color: #1A6FB8;
  --nav-active: #1A6FB8;

  /* ヒーロー */
  --hero-rule: transparent;
  --hero-rule-w: 0px;
  --hero-frame-bg: #EAF4FC;
  --hero-frame-rule: #2F8FD6;

  /* 要点箱 */
  --answer-bg: #EAF4FC;
  --answer-rule: #2F8FD6;
  --answer-rule-w: 5px;
  --answer-label: #1A6FB8;

  /* 数字の帯：薄い空色の地に濃い空色の数字 */
  --stat-bg: #EAF4FC;
  --stat-fg: #1F2A37;
  --stat-sub: #4A5868;
  --stat-figure: #0F4C85;
  --stat-line: #8DB8DE;

  /* 計算結果の箱：薄い空色 */
  --result-bg: #EAF4FC;
  --result-fg: #1F2A37;
  --result-sub: #4A5868;
  --result-rule: #F08C2E;

  /* ボタン：オレンジ */
  --btn-bg: #F08C2E;
  --btn-bg-hover: #E07A1A;
  --btn-fg: #2B1700;
  --cta-btn-bg: #F08C2E;
  --cta-btn-bg-hover: #E07A1A;
  --cta-btn-fg: #2B1700;

  /* 紹介の箱 */
  --cta-rule: #F08C2E;
  --cta-rule-w: 2px;

  /* 表 */
  --table-rule: #2F8FD6;
  --table-head-bg: #E3F0FB;
  --table-head-fg: #164B7E;
  --hl-bg: #FFF3E0;

  /* フッター：明るい */
  --footer-bg: #EAF4FC;
  --footer-fg: #1F2A37;
  --footer-sub: #4A5868;
  --footer-brand: #1A6FB8;
  --footer-rule: #F08C2E;

  /* 帯グラフ・図の色 */
  --bd-1: #1A6FB8;
  --bd-2: #4A9FE0;
  --bd-3: #F08C2E;
  --bd-4: #5B7186;

  /* 交互の節 */
  --band: #F2F8FD;
  --band-card: #FFFFFF;
  --band-thead: #DCEBF8;
}

/* ---------- 土台 ---------- */
body { font-weight: 400; }
strong { font-weight: 800; }
::selection { background: #BFE0F8; color: #1F2A37; }
a { text-decoration-color: rgba(15, 99, 168, .45); }
a:hover { text-decoration-color: currentColor; }

/* 見出しは、明朝をやめて、太めのゴシック */
.prose h1, .prose h2 { font-weight: 800; letter-spacing: .01em; }
.prose h2 { font-size: 1.625rem; }
@media (min-width: 480px) { .prose h2 { font-size: 1.75rem; } }
@media (min-width: 1024px) { .prose h2 { font-size: 2rem; } }
.prose h3 { font-weight: 800; border-bottom: 2px solid #CFE5F7; }
.prose :where(ul, ol) { padding-left: 1.4em; }
.prose ol > li::marker { color: var(--primary); }
.brand-name, .promise, .eyebrow, .entry-title, .cta-title, .learn-title, .callout-label, .stat-figure, .result-figure,
.ns-fig, .tile-name, .tg-name, .tg-range, .pl-title, .sample-figure, .kp strong, .reasons > li strong { font-weight: 800; }

/* ---------- 【PR】帯：薄い灰色の細い帯 ---------- */
.pr-bar { border-bottom: 1px solid #E1E7EC; padding: 3px 0; }
.pr-bar strong { font-weight: 800; color: #1F2A37; }
.pr-bar a, .pr-bar a:visited { color: var(--link); text-decoration: underline; }
.pr-bar a:focus-visible { outline-color: var(--focus); }
.pr-chip { background: #E8EEF3; color: #1F2A37; border: 1px solid #B7C4D0; border-radius: 6px; padding: 0 8px; }

/* ---------- ヘッダー ---------- */
.site-header { box-shadow: 0 2px 10px rgba(30, 90, 150, .08); position: relative; z-index: 1; }
.brand-mark path:nth-child(1), .brand-mark path:nth-child(2) { stroke: #2F8FD6; }
.brand-mark path:nth-child(3) { stroke: #F08C2E; }
.brand-name { font-weight: 800; letter-spacing: .03em; }
.site-nav { border-left-color: #DCE7F0; }
.nav-list a, .nav-list a:visited { font-weight: 700; color: #1F2A37; }
.nav-list a:hover { color: var(--primary); border-bottom-color: #F08C2E; }
.nav-list a[aria-current] { color: var(--primary); border-bottom-color: #F08C2E; }

/* ---------- ヒーロー：下の角を丸く ---------- */
.hero-photo { border-radius: 0 0 28px 28px; overflow: hidden; background: #EAF4FC; }
.hero-photo img, .hero-article img, .card-photo img, .photo img { outline: 0; filter: brightness(1.02) saturate(1.08); }
/* トップの写真は低く：最初の画面に見出しとボタンまで入れる */
.hero-home img { aspect-ratio: 2 / 1; }
@media (min-width: 768px) { .hero-home img { aspect-ratio: auto; height: clamp(240px, 45vh, 420px); } }
.hero-hub img { height: clamp(240px, 34vw, 460px); }
@media (min-width: 640px) { .hero-photo { border-radius: 0 0 40px 40px; } }
.hero-photo.is-framed { border-bottom: 0; padding: 24px 0 8px; border-radius: 0 0 28px 28px; }
.hero-photo.is-framed img { outline: 0; border-radius: 16px; box-shadow: 0 6px 22px rgba(30, 90, 150, .18); }
@media (min-width: 640px) { .hero-photo.is-framed { padding: 36px 0 12px; } }

/* ヒーローの下：白い余白を広く */
:is(.prose, .prose > .sec) > .hero-intro { margin-top: 28px; gap: 14px; }
@media (min-width: 768px) { :is(.prose, .prose > .sec) > .hero-intro { margin-top: 32px; gap: 16px; } }
.hero-cta { margin: 0; }
.hero-cta .btn-light { min-height: 52px; }
.eyebrow { display: inline-block; justify-self: start; padding: 6px 14px 5px; border-radius: 999px; background: #FFF1E0; color: #A54A06; font-size: .9375rem; letter-spacing: .16em; line-height: 1.3; }
.hero-intro h1 { font-weight: 800; color: #17324D; max-width: 24em; }
.hi-body { margin-top: 4px; }
.topic-pills a, .topic-pills a:visited { border: 2px solid #2F8FD6; border-radius: 999px; background: #fff; color: var(--primary); font-weight: 800; padding: 0 20px; box-shadow: 0 2px 8px rgba(30, 90, 150, .08); }
.topic-pills a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- 章番号つきの h2 ---------- */
.t-article h2::before, .t-hub h2::before {
  display: block; width: fit-content; margin-bottom: 10px; padding: 4px 14px 3px; border-radius: 999px; background: #FFF1E0; color: #A54A06;
  font-family: var(--font-sans); font-weight: 800; font-size: .9375rem; line-height: 1.3; letter-spacing: .14em;
}
.t-article h2::after, .t-hub h2::after, .t-home h2::after { width: 56px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #2F8FD6 0 60%, #F08C2E 60% 100%); }
.t-home h2 { margin-top: 72px; }
.t-page h2 { border-top: 0; padding-top: 0; }
.t-page h2::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 12px; border-radius: 3px; background: linear-gradient(90deg, #2F8FD6 0 60%, #F08C2E 60% 100%); }
.t-article .sources > h2::after, .t-article .related > h2::after, .t-article .changelog > h2::after { content: none; }
.sources > h2 { border-top: 0; padding-top: 0; }

/* ---------- 日付帯・要点箱・注意箱 ---------- */
.meta-strip { border-color: #E1EAF2; }
.answer { border: 1px solid #CFE5F7; border-top: 5px solid #2F8FD6; box-shadow: 0 2px 12px rgba(30, 90, 150, .08); padding: 20px; }
.answer::before { content: "要点"; display: block; width: fit-content; margin-bottom: 10px; padding: 2px 12px; border-radius: 999px; background: #1A6FB8; color: #fff; font-size: .9375rem; letter-spacing: .14em; }
@media (min-width: 480px) { .answer { padding: 24px 28px; } }
.note { background: #F6FAFD; border: 1px solid #CFE0EE; border-radius: 12px; }
.note::before { color: var(--primary); }
.calc-warn { border: 2px solid #E8A25A; border-radius: 12px; }
.unverified { border-radius: 12px; border-color: #8CA0B3; background: #F6FAFD; }

/* ---------- 目次・この記事でわかること ---------- */
.toc { border: 1px solid #D3E4F2; border-top: 4px solid #2F8FD6; border-radius: 14px; padding: 0 20px; background: #fff; }
.learn { background: #F6FAFD; border: 1px solid #CFE5F7; border-top: 5px solid #F08C2E; border-radius: 14px; padding: 18px 22px 20px; }
.learn-title { font-size: 1.25rem; color: var(--primary); }
.learn li::before { color: #A54A06; font-family: var(--font-sans); font-weight: 800; }
.toc li a::before { color: #A54A06; font-family: var(--font-sans); font-weight: 800; }

/* ---------- 写真・図 ---------- */
.photo img, .card-photo img { border-radius: 14px; }
.card-photo img { border-radius: 0; }
.hero-article img { border-radius: 18px; }
@media (max-width: 767px) { :is(.prose, .prose > .sec) > figure.hero-article { padding: 0 var(--gutter); } }
.diagram .dg { background: #fff; border: 1px solid #D3E4F2; border-radius: 16px; padding: 12px; box-shadow: 0 2px 12px rgba(30, 90, 150, .08); }
.diagram figcaption { color: var(--ink-2); }

/* ---------- 数字の帯：薄い空色の地に、濃い空色の数字 ---------- */
:is(.prose, .prose > .sec) > .stat-band { margin-top: 72px; padding: 56px 0 52px; background: #EAF4FC; border-top: 4px solid #2F8FD6; border-bottom: 1px solid #B9D6EE; border-radius: 0; }
.stat-figure { font-weight: 800; font-size: 2.75rem; position: relative; padding-bottom: 14px; white-space: nowrap; }
.stat-figure::after { content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 5px; border-radius: 3px; background: #F08C2E; }
.stat-figure .u { font-size: .42em; margin: 0 .15em; font-weight: 700; color: #1F2A37; }
@media (min-width: 480px) { .stat-figure { font-size: 3.5rem; } }
@media (min-width: 768px) { .stat-figure { font-size: 3rem; } }
@media (min-width: 1024px) { .stat-figure { font-size: 3.75rem; } }
.stat-label { font-weight: 700; color: #4A5868; }
.stat-text { color: #1F2A37; }
.stat a, .stat a:visited { color: var(--link); }
.stat-action { border-top-color: #8DB8DE; }
.btn-light, .btn-light:visited {
  border: 2px solid #F08C2E; border-radius: 10px; background: #F08C2E; color: #2B1700; box-shadow: var(--shadow-btn); font-weight: 800;
}
.btn-light:hover { background: #E07A1A; border-color: #E07A1A; color: #2B1700; }
.btn-light:focus-visible { outline-color: var(--focus); }

/* ---------- 約束・使い方・カード ---------- */
:is(.prose, .prose > .sec) > .promises { gap: 20px; }
.promises > li { padding: 22px 22px 24px; background: #fff; border: 1px solid #D3E4F2; border-top: 5px solid #2F8FD6; border-radius: 16px; box-shadow: var(--shadow-card); }
.promises .no { font-family: var(--font-sans); font-weight: 800; font-size: .9375rem; color: #A54A06; }
.promises h3 { color: var(--primary); font-weight: 800; }

.steps > li { padding: 22px 22px 26px; background: #fff; border: 1px solid #D3E4F2; border-top: 5px solid #2F8FD6; border-radius: 16px; box-shadow: var(--shadow-card); }
.step-no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #F08C2E; color: #2B1700; font-family: var(--font-sans); font-weight: 800; font-size: 1.375rem; letter-spacing: 0; }
.steps h3 { color: var(--primary); font-weight: 800; margin-top: 14px; }
@media (min-width: 768px) { .steps > li:not(:last-child)::after { color: #F08C2E; right: -28px; top: 36px; font-family: var(--font-sans); } }

.entry-list a, .entry-list a:visited, .topics a, .topics a:visited { border-radius: var(--radius-card); transition: box-shadow .2s, transform .2s; }
.entry-list a:hover, .topics a:hover { transform: translateY(-3px); }
.entry-title { font-weight: 800; color: var(--primary); text-decoration: none; }
.entry-list a:hover .entry-title, .topics a:hover .entry-title { text-decoration: underline; text-decoration-thickness: 2px; }
.entry-desc { color: #1F2A37; }
.entry-date { color: var(--ink-2); }
.topic-status { border-radius: 999px; padding: 1px 12px; }
.topic-status.is-live { background: var(--primary); border-color: var(--primary); }
.topic-status.is-plan { border: 2px dashed #8CA0B3; background: #fff; }
.tiles a:hover .tile-name { text-decoration-thickness: 2px; }
.tile-no { color: #A54A06; font-family: var(--font-sans); font-weight: 800; }
.tiles .is-text a { border: 1px solid #CFE5F7; border-top: 5px solid #2F8FD6; border-radius: 14px; background: #F6FAFD; }
.tiles .is-text .tile-name { color: var(--primary); }
@media (prefers-reduced-motion: reduce) { .entry-list a:hover, .topics a:hover { transform: none; } }

/* ---------- 表：やわらかい枠 ---------- */
.table-scroll { border: 1px solid #D3E4F2; border-radius: 14px; background: #fff; }
table { border-top: 0; border-bottom: 0; }
thead th { border-bottom: 2px solid #2F8FD6; }
tbody th[colspan] { color: var(--table-head-fg); }
tr.subtotal > th, tr.subtotal > td, tr.total > th, tr.total > td { border-top: 3px double #2F8FD6; }
table tbody tr.hl > * { border-top: 2px solid #F08C2E; border-bottom: 2px solid #F08C2E; }
.mark { border-radius: 6px; border-color: #B3500A; }
@media (max-width: 62.49em) {
  table.stack tbody tr.hl { border-top: 2px solid #F08C2E; border-bottom: 2px solid #F08C2E; }
  table.stack tr.subtotal, table.stack tr.total { border-top: 3px double #2F8FD6; }
  .table-scroll:has(table.stack) { border: 0; border-radius: 0; background: transparent; }
  table.stack { border-top: 0; }
}

/* ---------- 印・バッジ ---------- */
.badge { border-radius: 6px; padding: 0 9px; }
.badge.secondary { border-color: #6F8498; }
.badge.calc { border-color: #B3500A; color: #A54A06; }

/* ---------- 紹介リンク（CTA）：あたたかい薄オレンジの箱＋オレンジのボタン ---------- */
.cta { background: #FFF9F1; border: 2px solid #F6C990; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cta-a { background: #F6F9FC; border: 1px solid #DCE7F0; border-radius: 12px; box-shadow: none; padding: 12px 18px; }
.sec-alt .cta { background: #FFF9F1; }
.sec-alt .cta-a { background: #fff; }
.cta-title { color: #17324D; font-weight: 800; }
.cta-facts li::before { width: 12px; height: 12px; border-radius: 50%; background: #F08C2E; top: .68em; }
.cta-btn, .cta-btn:visited { border-radius: 10px; font-weight: 800; box-shadow: var(--shadow-btn); }
.cta-btn:hover, .cta-btn:active, .cta-btn:visited:hover { color: #2B1700; box-shadow: 0 5px 16px rgba(240, 140, 46, .45); }
.cta-btn.is-off, .cta-btn.is-off:hover { box-shadow: none; border-radius: 10px; }
.cta-link.is-off { border-bottom-color: #8CA0B3; }

/* ---------- 計算ツール ---------- */
.calc { border: 1px solid #D3E4F2; border-top: 5px solid #2F8FD6; border-radius: 18px; box-shadow: var(--shadow-card); }
.calc legend, .calc label.block { font-weight: 800; }
.choices label { border-radius: 12px; border-color: #9DB3C5; background: #fff; }
.choices label:hover { border-color: #2F8FD6; }
.choices label:has(input:checked) { border-color: #1A6FB8; background: #E8F3FC; }
.calc input[type="radio"], .calc input[type="checkbox"] { accent-color: #1A6FB8; }
.calc input[type="number"], .calc select { border-radius: 10px; border-color: #7C93A8; }
.calc input[type="number"]:focus-visible, .calc select:focus-visible { border-color: #1A6FB8; }
.btn { border-radius: 10px; font-weight: 800; }
.btn:hover { box-shadow: 0 5px 16px rgba(240, 140, 46, .45); }
.btn[disabled] { box-shadow: none; }
.calc-sample { border-radius: 14px; border-color: #8CA0B3; background: #F6FAFD; }
.sample-tag { border-radius: 6px; }
.sample-figure { color: var(--primary); font-weight: 800; }
.calc details.extras-details { border-radius: 12px; border-color: #9DB3C5; }
.result-summary { border: 1px solid #CFE5F7; border-top: 5px solid #F08C2E; border-radius: var(--radius-box); box-shadow: var(--shadow-card); }
.result-figure { color: var(--primary); font-weight: 800; }
.formula { border-radius: 12px; border-color: #8CA0B3; background: #F6FAFD; }
.bd-bar { border-radius: 8px; overflow: hidden; }
.bd-swatch { border-radius: 4px; }
.btn-outline, .btn-outline:visited { border-radius: 10px; font-weight: 800; }

/* ---------- 記事の部品 ---------- */
.kp { background: #FFF7EC; border: 1px solid #F7DDBD; border-top: 3px solid #F08C2E; border-radius: 12px; padding: 14px 18px; }
.kp strong { color: var(--primary); }
.kp-label { color: #A54A06; }
:is(.prose, .prose > .sec) > .numstrip { background: #fff; border: 1px solid #D3E4F2; border-top: 5px solid #2F8FD6; border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; }
.numstrip > li { border-color: #DCE7F0; }
.ns-fig { color: var(--primary); font-weight: 800; }
.callout { background: #F2F8FD; border: 1px solid #CFE5F7; border-top: 5px solid #2F8FD6; border-radius: 14px; }
.callout.num { background: #FFF7EC; border-color: #F7DDBD; border-top-color: #F08C2E; }
.callout-label::before { border-radius: 50%; background: #F08C2E; }
.checklist > li::before { border-radius: 4px; border-color: #1A6FB8; }
.reasons > li { border: 1px solid #D3E4F2; border-top: 4px solid #2F8FD6; border-radius: 14px; box-shadow: 0 2px 8px rgba(30, 90, 150, .06); }
.reasons > li::before { font-family: var(--font-sans); font-weight: 800; color: #A54A06; }
.planned > li { border: 1px solid #D3E4F2; border-top: 5px solid #2F8FD6; border-radius: 16px; box-shadow: var(--shadow-card); }
.pl-no { font-family: var(--font-sans); font-weight: 800; color: #A54A06; }
.pl-status { border-radius: 999px; border-color: #8CA0B3; padding: 0 12px; }
.pl-chips > li { border-radius: 999px; border: 1.5px solid #8CC5F0; background: #E8F3FC; padding: 2px 12px; }
.step-no, .tile-no, .no { font-variant-numeric: lining-nums; }

.qa { border: 1px solid #D3E4F2; border-top: 1px solid #D3E4F2; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(30, 90, 150, .06); }
.qa-q { border-radius: 50%; background: #1A6FB8; font-family: var(--font-sans); font-weight: 800; }
.qa-label { border-radius: 999px; border-color: #D98A3E; background: #FFF5E6; color: #A54A06; padding: 0 12px; }
.qa > summary::after { color: var(--primary); }
.faq { gap: 12px; }
.next-bar { background: #E8F3FC; border: 1px solid #CFE5F7; border-radius: 12px; }
.next-bar .nb-label { color: #A54A06; font-family: var(--font-sans); font-weight: 800; }
.sec-alt .next-bar { background: #fff; }
.duo { border: 1px solid #D3E4F2; border-top: 4px solid #2F8FD6; border-radius: 14px; overflow: hidden; }
:is(.prose, .prose > .sec) > details.tbl-group { border-radius: 16px; overflow: hidden; border-color: #D3E4F2; border-top: 1px solid #D3E4F2; box-shadow: 0 2px 8px rgba(30, 90, 150, .06); }
.tg-range { color: #A54A06; }
.tbl-group .table-scroll { border: 0; border-radius: 0; }
.tbl-group[open] > summary { background: #F2F8FD; }
.link-grid > li { border-color: #DCE7F0; }
.changelog ul { border-top-color: #DCE7F0; }
.changelog li { border-bottom-color: #DCE7F0; }

/* 交互の節：薄い空色の地に、白いカード */
.sec-alt { background: var(--band); }
.sec-alt .table-scroll { background: #fff; }

/* ---------- パンくず ---------- */
.crumbs a { color: var(--link); }

/* ---------- フッター：明るい面 ---------- */
.site-footer { border-top: 6px solid #F08C2E; padding: 44px 0 40px; }
.footer-brand { font-weight: 800; }
.footer-head { color: #3E4C5B; }
.site-footer a, .site-footer a:visited { color: var(--link); }
.site-footer a:focus-visible { outline-color: var(--focus); }
.footer-links a { font-weight: 700; }

/* ---------- 印刷（見積もりと見比べる人のため） ---------- */
@media print {
  body { font-size: 12pt; color: #000; background: #fff; }
  .skip, .site-nav, .brand-sub, .toc, .cta, .table-hint, .footer-links, .hero-links { display: none !important; }
  .pr-bar { background: #fff; color: #000; border: 1px solid #000; }
  .pr-bar a { color: #000; }
  .site-header { border-top: 0; }
  .answer, .stat-band, .site-footer, .result-summary, .hero-panel { background: #fff !important; color: #000 !important; }
  .stat-band *, .site-footer *, .result-summary * { color: #000 !important; }
  .hero-photo img, .hero-article img { max-height: 6cm; }
  a[href^="http"]::after { content: " （" attr(href) "）"; font-size: .85em; }
  table { break-inside: avoid; }
  .table-scroll { overflow: visible; }
}

/* ---------- AI イメージ：画像の右下に小さな「イメージ」のラベル ---------- */
.ai-frame { display: block; position: relative; }
.hero-home .ai-frame, .hero-hub:not(.is-framed) .ai-frame { max-width: 1600px; margin: 0 auto; }
.ai-label { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(20, 28, 34, .55); color: #fff; font-size: .75rem; line-height: 1.5; letter-spacing: .04em; pointer-events: none; }
.hero-photo.is-framed .ai-label { border-radius: 4px; right: 10px; bottom: 10px; }
@media (min-width: 768px) { .hero-home img.crop { object-position: var(--pos-pc, var(--pos, 50% 50%)); } }