:root { --fg: #1f2328; --muted: #57606a; --line: #d0d7de; --bg: #ffffff; --note: #fff8e1; --note-line: #b58900;
  --brand: #1f4b6e; --brand-soft: #eef4fa; --brand-line: #b9cfe3; --soft: #f6f8fa; --link: #0b5cad;
  --cta: #c2410c; --cta-dark: #9a3412; --focus: #1f6feb; --wrap: 680px; }
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--fg); background: var(--bg); line-height: 1.8;
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; }
.site-header, main, .site-footer { max-width: 760px; margin: 0 auto; padding: 0 16px; }
a { color: var(--link); text-underline-offset: 0.2em; }
a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* ヘッダー: 画面の幅いっぱいの落ち着いた帯。中の文字は本文の列にそろえる */
.site-header { max-width: none; padding: 14px max(16px, calc(50% - var(--wrap) / 2)) 12px; background: var(--brand); border-bottom: 0; }
.site-title { font-weight: 700; color: #ffffff; text-decoration: none; font-size: 1.2rem; letter-spacing: 0.08em; }
.tagline { margin: 2px 0 0; color: #d5e3f0; font-size: 0.85rem; line-height: 1.6; }
/* 本文の列: 全角で 40 字ほど（680px）。文字 17px・行間 1.8 */
main { max-width: calc(var(--wrap) + 32px); padding-top: 24px; padding-bottom: 40px; }
h1 { font-size: 1.65rem; line-height: 1.45; margin: 0.4em 0 0.6em; letter-spacing: 0.01em; }
h2 { font-size: 1.3rem; line-height: 1.5; margin: 2.6em 0 0.9em; padding: 2px 0 2px 12px; border-left: 5px solid var(--brand); border-bottom: 0; }
p { margin: 0 0 1.1em; }
table { border-collapse: collapse; width: 100%; margin: 1.4em 0; display: block; overflow-x: auto; font-size: 0.94rem; line-height: 1.6;
  border: 1px solid var(--line); border-radius: 10px; }
@supports (width: fit-content) { table { width: fit-content; max-width: 100%; } }
th, td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 10px; text-align: left; vertical-align: middle; }
thead th { background: var(--brand-soft); color: var(--brand); font-weight: 700; border-bottom: 2px solid var(--brand); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: #fafbfc; }
.pr-line, .byline { font-size: 1rem; margin: 6px 0; }
.pr-line { font-weight: 700; border-left: 4px solid var(--note-line); background: var(--note); padding: 4px 10px; }
.meta { color: var(--muted); font-size: 0.85rem; margin: 0 0 18px; }
/* 導入（署名欄の次の段落）: 淡い箱で最初に読ませる */
.post > .meta + p { font-size: 1.06rem; line-height: 1.85; background: var(--brand-soft); border-left: 5px solid var(--brand);
  border-radius: 0 10px 10px 0; padding: 16px 18px; margin: 0 0 1.6em; }
.sources { font-size: 0.95rem; margin-top: 2.6em; border-top: 1px solid var(--line); padding-top: 8px; }
.sources summary { cursor: pointer; font-weight: 700; color: var(--muted); padding: 8px 0; }
.sources ul { padding-left: 1.2em; }
.sources li { overflow-wrap: anywhere; }
/* フッター: 薄い帯・固定ページのリンクは押しやすい高さに */
.site-footer { max-width: none; margin-top: 24px; padding: 20px max(16px, calc(50% - var(--wrap) / 2)) 32px; background: var(--soft);
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer li a { display: inline-block; padding: 10px 0; color: var(--fg); }
.site-footer p { margin: 0; }
/* 記事の一覧（トップ）: 1本ずつのカード */
.article-list { list-style: none; padding: 0; margin: 1em 0; }
.article-list li { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.article-list li > a { font-weight: 700; font-size: 1.08rem; line-height: 1.55; }
.article-list li p { margin: 6px 0 0; }
/* 計算機: 1つの箱・答えの行を大きく */
.calc { border: 2px solid var(--brand); border-radius: 12px; padding: 14px 18px 16px; margin: 1.4em 0; max-width: 100%; background: var(--brand-soft); }
.calc-field { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 10px 0; }
.calc-field label { flex: 1 1 100%; font-weight: 700; }
.calc input, .calc select { font: inherit; padding: 6px 10px; min-width: 0; max-width: 100%; min-height: 44px;
  border: 1px solid #8c959f; border-radius: 8px; background: #ffffff; color: var(--fg); }
.calc input { width: 10em; }
.calc-output-label { margin: 16px 0 0; color: var(--brand); font-weight: 700; font-size: 0.9rem; }
.calc-answer { margin: 6px 0 0; font-weight: 700; overflow-wrap: anywhere; font-size: 1.2rem; line-height: 1.6; background: #ffffff;
  border: 1px solid var(--brand-line); border-radius: 10px; padding: 12px 14px; }
/* 購入ボタン: 塗りの色・高さ 44px 以上。表の中は同じ色で小さめ。「販売店を見る」は枠だけ */
.buy { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; max-width: 100%; margin: 4px 0; padding: 8px 20px;
  border: 2px solid var(--cta); border-radius: 10px; background: var(--cta); color: #ffffff; font-weight: 700; text-decoration: none;
  overflow-wrap: anywhere; line-height: 1.4; text-align: center; }
.buy:hover { background: var(--cta-dark); border-color: var(--cta-dark); }
.buy:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.post > p > .buy { display: flex; width: fit-content; min-width: 15em; margin: 14px 0 6px; padding: 10px 24px; font-size: 1.05rem;
  box-shadow: 0 2px 0 var(--cta-dark); }
.post > .meta + p > .buy { min-width: 17em; padding: 12px 28px; font-size: 1.1rem; }
.post > .meta + p > .buy ~ .buy { background: var(--bg); color: var(--cta); box-shadow: none; padding: 8px 20px; font-size: 1rem; }
.post > .meta + p > .buy ~ .buy:hover { background: #fff4ed; }
td .buy { padding: 6px 10px; font-size: 0.85rem; white-space: nowrap; }
.buy[aria-label$="の販売店を見る"] { background: var(--bg); color: var(--brand); border-color: var(--brand); box-shadow: none; }
.buy[aria-label$="の販売店を見る"]:hover { background: var(--brand-soft); }
/* 600px 以下: 表の各行を縦に積むカードにする（購入ボタンを横スクロールの外に出さない・2026-10-19 QA M-6）。
   各セルの前に列の見出し（build が付ける data-label）を出す。切り替えの幅は stage.card_switch_width と同じ */
@media (max-width: 600px) {
  table, thead, tbody, tr, th, td { display: block; width: 100%; }
  table { overflow-x: visible; border: 0; }
  thead tr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  tr { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 12px; padding: 4px 12px; }
  td { border: 0; border-bottom: 1px solid var(--line); padding: 6px 0; overflow-wrap: anywhere; }
  td:last-child { border-bottom: 0; }
  td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
  td .buy { display: block; width: 100%; text-align: center; padding: 8px 12px; }
}
.chart { margin: 1em 0; max-width: 100%; padding: 16px 20px 12px; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.chart figcaption { font-weight: 700; margin-bottom: 8px; line-height: 1.6; }
.chart-svg { display: block; width: 100%; max-width: 480px; height: auto; }
.chart-svg text { font-family: inherit; fill: var(--fg); }
/* スマホの細かい直し（上のカードの規則はそのまま・ここは見た目だけ） */
@media (max-width: 600px) {
  main { padding-top: 16px; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; margin-top: 2.2em; }
  .post > .meta + p { padding: 14px 14px; font-size: 1.03rem; }
  .post > p > .buy, .post > .meta + p > .buy { width: 100%; min-width: 0; }
  table { border-radius: 0; font-size: 0.97rem; }
  tbody tr:nth-child(even) { background: none; }
  tr { border-radius: 10px; padding: 6px 14px; box-shadow: 0 1px 2px rgba(31, 35, 40, 0.06); }
  td .buy { min-height: 48px; margin: 6px 0 4px; font-size: 1rem; white-space: normal; }
  .calc { padding: 12px 14px 14px; }
  .calc select { width: 100%; }
  .chart { margin: 1.2em -16px; max-width: none; padding: 12px 16px; border-left: 0; border-right: 0; border-radius: 0; }
}