/* モバイルファースト：基本スタイルはスマホ幅、768px以上で PC 向けに上書きする */

/* ========== ARTICLE ========== */
.article .article-label{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-orange-deep);
  margin-bottom:8px;
}

.note{font-size:11px;line-height:1.5;color:var(--c-grey)}
/* 出典は図の補足なので、図のすぐ下に寄せる（.chart の下マージン24pxを打ち消して8pxにする） */
.chart + .note{margin-top:-16px}

/* 基本ルール：項目名と説明を並べた囲み */
.rule-box{
  margin:0 0 16px;
  background:var(--c-white);border:2px solid var(--c-navy);border-radius:var(--radius-sm);
}
.rule-row{padding:14px 16px}
.rule-row + .rule-row{border-top:1px solid rgba(31,58,138,.2)}
.rule-row dt{font-weight:700;color:var(--c-navy);margin-bottom:2px}

.fig-pair{margin:24px 0}
.fig-pair .article-fig{margin:0 0 16px}

/* ========== TOC ========== */
.toc{
  margin:32px 0 0;padding:16px 20px;
  background:var(--c-white);border:1px solid var(--c-cream);border-radius:var(--radius-sm);
}
.article .toc-title{font-weight:700;color:var(--c-navy);margin-bottom:8px}
.toc ol{list-style:none;counter-reset:toc}
/* 番号は ::before で描く。標準の番号（list-style）はli の外側に出るため、区切り線が番号の下まで届かない */
.toc li{
  counter-increment:toc;
  display:flex;gap:.5em;
  padding:10px 0;border-bottom:1px solid rgba(31,58,138,.15);
}
.toc li:last-child{border-bottom:none}
.toc li::before{content:counter(toc) ".";color:var(--c-navy);font-weight:700}
/* common.css の .article a:not(.btn, .link-card) の下線を打ち消すため、同じ詳細度（0,2,1）で後に書く */
.article .toc a{color:var(--c-navy);text-decoration:none}
.article .toc a:hover{color:var(--c-orange-deep)}

/* ========== CTA ========== */
.article-cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.article-cta .btn{justify-content:center}

/* 見出し内の語句が途中で折り返されないよう、ひとかたまりで改行させる */
.nowrap{display:inline-block}

/* 読者の声（セリフ）を地の文と区別する */
.voice{color:#4A4A4A}

/* ========== CHART ========== */
.chart{
  margin:24px 0;padding:16px;
  background:var(--c-white);border:1px solid var(--c-cream);border-radius:var(--radius-sm);
}
.article .chart-title{font-weight:700;font-size:14px;color:var(--c-charcoal);margin-bottom:8px}
/* viewBox で拡大されるため、PCで文字が大きくなりすぎないよう上限を設ける */
.chart-svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;overflow:visible}
.chart-svg .grid{stroke:rgba(26,26,26,.1);stroke-width:1}
.chart-svg .base{stroke:rgba(26,26,26,.4);stroke-width:1}
.chart-svg .axis{font-size:11px;fill:var(--c-grey);font-family:var(--font-body)}
/* 目盛り線の上に重なっても読めるよう、背景色の縁取りを付ける */
.chart-svg .val{font-size:12px;font-weight:700;fill:var(--c-charcoal);paint-order:stroke;stroke:var(--c-white);stroke-width:4px;stroke-linejoin:round}
.chart-svg .val-lg{font-size:18px;font-weight:800;font-family:var(--font-display)}
.chart-svg .bar{fill:var(--c-navy)}
.chart-svg .bar-hl{fill:var(--c-orange-deep)}

.chart-pie{display:block;width:100%;max-width:280px;height:auto;margin:8px auto 0}
/* 2つの扇形の境目を白い隙間で区切る */
.chart-pie .slice{stroke:var(--c-white);stroke-width:2;stroke-linejoin:round}
.slice-f{fill:var(--c-orange-deep)}
.slice-m{fill:var(--c-navy)}
.pie-name{font-size:14px;font-weight:700;font-family:var(--font-body)}
.pie-pct{font-size:26px;font-weight:800;font-family:var(--font-display)}
/* オレンジ上は白文字だとコントラスト不足のため濃紺にする */
.pie-label-f{fill:var(--c-navy-deep)}
.pie-label-m{fill:var(--c-white)}

/* ========== PC ========== */
@media (min-width:768px){
  .rule-row{display:grid;grid-template-columns:6em 1fr;gap:16px;padding:16px 24px}
  .rule-row dt{margin-bottom:0}
  .fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fig-pair .article-fig{margin:0}
  .article-cta{flex-direction:row;justify-content:center}
}