/* ==================================================================
 *  議会報告 記事の表示部品
 *
 *  src/render.py が出す HTML に当たるスタイル。
 *  記事本文（投稿データ）には <style> を含めない。文字だけを保存し、
 *  見え方はすべてこのファイルで決める。あとから一括で調整できる。
 *
 *  配色は site-preview のモックアップに合わせた紺基調。
 *  ただしモックアップ側の .gikai-report は
 *    ・第17項の切替機構（書体・文字サイズ・強調・折りたたみ）が無い
 *    ・@media(max-width:600px) が閉じておらず、文字の拡大が
 *      スマートフォンでしか効いていない
 *  という状態だったため、こちらの構造を残して配色のみ取り込んでいる。
 *
 *  要件定義書 第17項（見え方に関するご要望）の対応箇所には ★印 を付す。
 * ================================================================== */

.gikai-report {
	/* --- 配色 --------------------------------------------------------
	 * 8月のご指摘により、質問と回答の色を分ける。
	 *
	 *   質問（議員の問いかけ）… オレンジ系（党のカラー）
	 *   回答（区の答弁）      … グリーン系（練馬区のカラー）
	 *
	 * 読み手が色だけで「誰の発言か」を見分けられるようにするための指定。
	 * 答弁のポイントは、回答と同系だと沈むため、
	 * 回答の枠の中で一段濃い緑に白地を重ねて区別する。
	 *
	 * 変数名は役割で付ける。
	 *   q = 議員の問いかけ　a = 区の答弁　pt = 答弁のポイント
	 * ---------------------------------------------------------------- */
	--paper: #FFFFFF;
	--ink: #1F2A33;
	--ink-mid: #4A5966;
	--ink-soft: #7A8A96;
	--line: #DCE3E8;
	--line-soft: #F0F4F7;

	/* 質問側 … オレンジ（党のカラー） */
	--q: #E8811F;
	--q-line: #E8912D;
	--q-bg: #FDF4E8;
	--q-ink: #A85A00;

	/* 回答側 … グリーン（練馬区のカラー） */
	--a: #2E8B57;
	--a-line: #4FA377;
	--a-bg: #EDF7F1;
	--a-ink: #1D6B41;

	/* 答弁のポイント … 回答の枠の中で目立たせる */
	--pt: #1D6B41;
	--pt-bg: #FFFFFF;
	--pt-ink: #14512F;

	--quote-bg: #F7F5F1;
	--quote-line: #E0D5C2;
	--sum-bg: #FDFAF3;
	--sum-line: #E3C77A;

	/* --- 文字の大きさ ---------------------------------------------
	 * ★② 可視化の文字／★③ ポイントとまとめの文字を大きくする
	 * ★⑤ 答弁の全文は小さくして圧縮する
	 * 比較用に .mk-size-compact（以前の大きさ）を用意している
	 * ------------------------------------------------------------- */
	/* 8月のご指摘「文字が小さい」「可視化の文字が小さい。
	   本文とのメリハリがない」を受けて、全体を一段大きくし、
	   可視化は本文よりはっきり大きくしている。 */
	--f-body:      17px;     /* 質問・背景の本文 */
	--f-answer:    14.5px;   /* ★⑤ 答弁の全文（本文より小さく） */
	--f-point:     17px;     /* ★③ 答弁のポイント */
	--f-point-lbl: 14.5px;
	/* 8月26日のご指摘「最後のまとめの文字が小さい」。
	   本文と同じ17pxだったため、まとめだけが目に入らなかった。
	   記事の結論にあたる部分なので、本文より一段大きくする。 */
	--f-sum:       18.5px;   /* ★③ まとめ */
	--f-sum-ttl:   21px;
	/* 8月26日のご指摘「最後のまとめ“ ”の文字が小さい」。
	   締めの引用が15pxで、本文17pxより小さかった。
	   議員のご発言をそのまま載せる、記事の締めにあたる部分なので
	   本文と同じ大きさにする。 */
	--f-quote:     17px;     /* 締めの引用 */
	--f-viz-cap:   19px;     /* ★② 可視化の見出し */
	--f-viz-head:  16px;     /* ★② 比較カードの見出し */
	--f-viz-body:  16.5px;   /* ★② 比較カード・フロー図の本文 */
	--f-num-key:   14.5px;   /* ★② 数値カード */
	--f-num-val:   36px;
	--f-num-note:  13.5px;
	--f-h2:        22px;
	--f-bg-h:      19px;     /* 背景の小見出し。本文より大きくする */

	/* ★④ 1センテンスごとに空白行を入れる。
	   ご指摘「2〜3行（1センテンス）で空白行を入れる」に対応。
	   render.py が句点・読点で行を分けているので、
	   その各行の間隔をここで決める。 */
	--gap-line: 1.15em;

	color: var(--ink);
	font-size: var(--f-body);
	line-height: 1.9;
}

/* 以前の大きさ。ご確認いただくための比較用 */
.gikai-report.mk-size-compact {
	--f-body: 14.5px;  --f-answer: 13.5px;  --f-bg-h: 16.5px;
	--f-point: 13px;   --f-point-lbl: 12.5px;
	--f-sum: 14px;     --f-sum-ttl: 14px;   --f-quote: 13.5px;
	--f-viz-cap: 14px; --f-viz-head: 12.5px; --f-viz-body: 13.5px;
	--f-num-key: 12px; --f-num-val: 22px;    --f-num-note: 11.5px;
	--f-h2: 19px;
}

.gikai-report * { box-sizing: border-box; }


/* --- 冒頭 -------------------------------------------------------- */

.gikai-report .kaigi { font-size: 13.5px; font-weight: 700; margin: 0 0 12px; }
.gikai-report .intro { font-size: 15px; color: var(--ink-mid); margin: 0 0 6px; line-height: 1.95; }
.gikai-report .intro-note {
	font-size: 12px; color: var(--ink-soft); margin: 0 0 34px;
	padding-bottom: 22px; border-bottom: 1px solid var(--line);
}


/* --- 見出し ------------------------------------------------------ */

.gikai-report h2 {
	font-size: var(--f-h2); margin: 44px 0 18px; font-weight: 700;
	padding-bottom: 9px; border-bottom: 3px solid var(--q-line); line-height: 1.55;
}
/* 背景の小見出し。
   8月23日のご指摘「こちら文字が小さいのでもう少し大きい方が良い」。
   本文が17pxなのに小見出しが15.5pxで、見出しのほうが小さかった。
   本文より大きくし、線も濃くして見出しらしくする。 */
.gikai-report .bg-h {
	font-size: var(--f-bg-h); font-weight: 700; margin: 28px 0 10px;
	padding-left: 12px; border-left: 4px solid var(--q-line); color: var(--ink);
	line-height: 1.6;
}


/* --- 地の文（背景の説明） ---------------------------------------- */

.gikai-report .talk { margin: 0 0 20px; }
.gikai-report .talk p { margin: 0 0 var(--gap-line); font-size: var(--f-body); line-height: 1.95; }
.gikai-report .talk p.gap { margin-bottom: 16px; }

.gikai-report .bg-note {
	font-size: 12px; color: var(--ink-soft); margin: 4px 0 20px;
	padding: 8px 12px; background: var(--line-soft);
	border-left: 3px solid var(--line); line-height: 1.8;
}


/* --- 質問 -------------------------------------------------------- */

.gikai-report .q {
	background: var(--q-bg); border: 1px solid var(--q-line);
	border-radius: 6px; padding: 16px 19px; margin: 22px 0;
}
.gikai-report .q .ttl {
	font-size: 15px; font-weight: 700; color: var(--q-ink);
	margin: 0 0 10px; line-height: 1.7;
}
.gikai-report .q p { margin: 0 0 var(--gap-line); font-size: var(--f-body); line-height: 1.9; }
.gikai-report .q p:last-child { margin-bottom: 0; }


/* --- 答弁 -------------------------------------------------------- */

.gikai-report .a {
	background: var(--a-bg); border: 1px solid var(--a-line);
	border-radius: 6px; padding: 16px 19px; margin: 22px 0;
}
.gikai-report .a .ttl { font-size: 14.5px; font-weight: 700; color: var(--a-ink); margin: 0 0 12px; }

/* 答弁のポイント ★③ */
.gikai-report .pt {
	background: var(--pt-bg); border: 1px solid var(--pt);
	border-radius: 5px; padding: 13px 16px; margin: 0 0 13px;
}
/* 答弁が2つ以上ある節では、ポイントを答弁の枠の外に1度だけ置く
   （8月19日のご指摘。答弁ごとに繰り返すと別の答弁に別の要点が付く）。
   枠の外に出ると答弁との結びつきが見えにくいので、
   回答側の色をわずかに敷いて、続きであることを示す。 */
.gikai-report .pt-lead {
	background: var(--a-bg);
	border-color: var(--a-line);
	margin: 0 0 10px;
}
.gikai-report .pt .lbl {
	font-size: var(--f-point-lbl); font-weight: 700; color: var(--pt-ink); margin: 0 0 6px;
}
/* 要点も1文ごとに段落を分ける（8月13日「2〜3行で空白行を入れる」）。
   以前は要点が1つの <p> だったため margin: 0 でよかったが、
   文ごとに分けたので段落の間に空きが要る。最後の段落だけ空けない。 */
.gikai-report .pt p { margin: 0 0 .9em; font-size: var(--f-point); color: var(--pt-ink); line-height: 1.9; }
.gikai-report .pt p:last-child { margin-bottom: 0; }

/* 答弁の全文 ★⑤ 小さくして圧縮する */
.gikai-report .a .body { font-size: var(--f-answer); color: var(--ink-mid); line-height: 1.85; margin: 0; }
.gikai-report .a .body p { margin: 0 0 .95em; }

/* ★⑤ 折りたたみ。ポイントだけ読んで先へ進める */
.gikai-report details.fold { margin: 0; }
.gikai-report details.fold > summary {
	cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12.5px; font-weight: 700; color: var(--a-ink);
	padding: 6px 12px; border: 1px solid var(--a-line); border-radius: 4px;
	background: rgba(255, 255, 255, .7); user-select: none;
}
.gikai-report details.fold > summary::-webkit-details-marker { display: none; }
.gikai-report details.fold > summary::after { content: "＋"; font-size: 12px; }
.gikai-report details.fold[open] > summary::after { content: "－"; }
.gikai-report details.fold[open] > summary { margin-bottom: 11px; }
.gikai-report details.fold > summary:hover { background: #fff; }


/* --- 可視化 ★② ------------------------------------------------- */

.gikai-report .viz { border: 1px solid var(--line); border-radius: 6px; padding: 20px; margin: 28px 0; }
.gikai-report .viz .cap {
	text-align: center; font-size: var(--f-viz-cap); font-weight: 700; margin: 0 0 18px; line-height: 1.6;
}

/* 比較カード */
.gikai-report .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gikai-report .col { border: 1px solid var(--line); border-radius: 5px; padding: 15px; text-align: center; }
.gikai-report .col.l { border-top: 3px solid var(--q-line); }
.gikai-report .col.r { border-top: 3px solid var(--a-line); }
.gikai-report .col .h { font-size: var(--f-viz-head); font-weight: 700; margin: 0 0 9px; line-height: 1.6; }
.gikai-report .col.l .h { color: var(--q-ink); }
.gikai-report .col.r .h { color: var(--a-ink); }
.gikai-report .col p { margin: 3px 0; font-size: var(--f-viz-body); line-height: 1.8; }

/* 数値カード */
.gikai-report .nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.gikai-report .num { text-align: center; padding: 6px; }
.gikai-report .num .k { font-size: var(--f-num-key); color: var(--ink-soft); margin: 0 0 6px; line-height: 1.6; }
.gikai-report .num .v { font-size: var(--f-num-val); font-weight: 700; margin: 0; line-height: 1.2; color: var(--a-ink); letter-spacing: -.01em; }
.gikai-report .num .v small { font-size: .55em; }
.gikai-report .num .s { font-size: var(--f-num-note); color: var(--ink-soft); margin: 6px 0 0; line-height: 1.65; }

/* フロー図 */
.gikai-report .flow { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gikai-report .flow .step {
	border: 1px solid var(--line); border-radius: 5px; padding: 11px 17px;
	font-size: var(--f-viz-body); text-align: center; width: 100%; max-width: 440px; line-height: 1.7;
}
.gikai-report .flow .arw { color: var(--ink-soft); font-size: 13px; }


/* --- 締めのことば ------------------------------------------------
 * 長い意見表明をまるごと引用の枠に入れると読みづらい。
 * 前半は見出しと地の文、訴えかけの部分だけを引用の枠に入れる。
 * ---------------------------------------------------------------- */

.gikai-report .closing-h {
	font-size: var(--f-h2);
	font-weight: 700;
	margin: 44px 0 18px;
	padding-bottom: 9px;
	border-bottom: 3px solid var(--q-line);
	line-height: 1.55;
}
.gikai-report .closing-lead { margin: 0 0 8px; }
.gikai-report .closing-lead p {
	font-size: var(--f-body);
	line-height: 1.95;
	margin: 0 0 var(--gap-line);
}

.gikai-report .quote {
	background: var(--quote-bg); border-radius: 6px; padding: 26px 30px;
	margin: 32px 0; position: relative;
}
.gikai-report .quote::before {
	content: "\201C"; position: absolute; left: 12px; top: 2px; font-size: 44px;
	color: var(--quote-line); line-height: 1; font-family: Georgia, serif;
}
.gikai-report .quote p { margin: 0; font-size: var(--f-quote); line-height: 2.0; }


/* --- まとめ ★③ ------------------------------------------------- */

.gikai-report .sum {
	background: var(--sum-bg); border: 1px solid var(--sum-line); border-radius: 6px;
	padding: 20px 24px; margin: 32px 0;
}
.gikai-report .sum .ttl { text-align: center; font-size: var(--f-sum-ttl); font-weight: 700; margin: 0 0 15px; }
.gikai-report .sum ul { margin: 0; padding-left: 21px; }
.gikai-report .sum li { font-size: var(--f-sum); margin: 10px 0; line-height: 1.9; }
.gikai-report .sum .req {
	margin: 17px 0 0; padding-top: 15px; border-top: 1px solid var(--sum-line);
	font-size: var(--f-sum); font-weight: 700; line-height: 1.9;
}


/* --- 強調 ★④ ---------------------------------------------------
 * 下線・太字・背景色のいずれで見せるかをご確認いただく。
 * どこを強調するかは第10項で確定済み（原文の一部を指定し、実在を検証する）。
 * ---------------------------------------------------------------- */

.gikai-report .mk { font-style: normal; font-weight: 600; }

/* 既定：下線＋薄い背景 */
.gikai-report .mk,
.mk-emph-marker .gikai-report .mk {
	border-bottom: 2px solid var(--q-line);
	background: linear-gradient(transparent 58%, rgba(232, 129, 31, .22) 58%);
}
/* 下線のみ */
.mk-emph-underline .gikai-report .mk {
	border-bottom: 2px solid var(--q-line);
	background: none;
}
/* 太字のみ */
.mk-emph-bold .gikai-report .mk {
	border-bottom: none; background: none;
	font-weight: 700; color: var(--q-ink);
}
/* 背景色のみ */
.mk-emph-bg .gikai-report .mk {
	border-bottom: none;
	background: rgba(232, 129, 31, .22);
	padding: 1px 3px; border-radius: 2px;
}


/* --- 要確認 ------------------------------------------------------ */

.gikai-report .review {
	background: #FFF4F4; border: 1px solid #E0A0A0; border-radius: 6px;
	padding: 12px 16px; margin: 20px 0; font-size: 13px; color: #9A3B3B;
}


/* --- 出典 -------------------------------------------------------- */

.gikai-report .src { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); }
.gikai-report .src h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 10px; }
.gikai-report .src .meta { font-size: 12.5px; font-weight: 700; margin: 0 0 8px; }
.gikai-report .src a { color: var(--a-ink); }
.gikai-report table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gikai-report th {
	text-align: left; padding: 8px; background: var(--line-soft); border: 1px solid var(--line);
	font-weight: 700; font-size: 11.5px; color: var(--ink-mid); white-space: nowrap;
}
.gikai-report td { padding: 9px 8px; border: 1px solid var(--line); vertical-align: top; line-height: 1.75; }
.gikai-report td.c { white-space: nowrap; }
.gikai-report .src .note { font-size: 11.5px; color: var(--ink-soft); margin: 9px 0 0; line-height: 1.8; }

/* 出典の表は行数が多い。既定では折りたたむ */
.gikai-report .src details > summary,
.gikai-report details.src-fold > summary {
	cursor: pointer; list-style: none;
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 700; color: var(--ink-mid);
	padding: 7px 14px; border: 1px solid var(--line); border-radius: 4px;
	background: var(--line-soft); user-select: none;
}
.gikai-report .src details > summary::-webkit-details-marker,
.gikai-report details.src-fold > summary::-webkit-details-marker { display: none; }
.gikai-report .src details > summary::before,
.gikai-report details.src-fold > summary::before { content: none; }
.gikai-report .src details > summary::after,
.gikai-report details.src-fold > summary::after { content: "＋"; font-size: 12px; }
.gikai-report .src details[open] > summary::after,
.gikai-report details.src-fold[open] > summary::after { content: "－"; }
.gikai-report .src details[open] > summary,
.gikai-report details.src-fold[open] > summary { margin-bottom: 12px; }
.gikai-report .src details > summary:hover,
.gikai-report details.src-fold > summary:hover { background: #fff; }


/* --- 画面が狭いとき ---------------------------------------------- */

@media (max-width: 600px) {
	/* 小見出しは本文より大きく、大見出しより小さく。
	   携帯側に --f-bg-h を書き忘れると、19px のまま残って
	   大見出し（18px）を上回り、大小が逆転する。 */
	.gikai-report {
		--f-body: 15px; --f-h2: 18px; --f-bg-h: 16.5px;
		--f-num-val: 23px; --f-viz-cap: 15px;
	}
	.gikai-report .cols { grid-template-columns: 1fr; }
	.gikai-report th, .gikai-report td { padding: 6px 5px; font-size: 11px; }
	.gikai-report .q, .gikai-report .a { padding: 14px 15px; }
	.gikai-report .quote { padding: 22px 20px 22px 26px; }
	.gikai-report .sum { padding: 17px 16px; }
}


/* ==================================================================
   手書きのブログ記事
   ------------------------------------------------------------------
   8月15日のご要望
     「議会報告と同じフォーマット（体裁）で投稿できると良いです
        アイキャッチ画像 → ブログタイトル → イントロダクション文章
        → 見出し１ → 文章 → 見出し２ → 文章」

   議会報告の本文は、組み立て側が .talk などの目印を付けて出力する。
   一方、編集画面で書いた記事は素の <p> と <h2> でしかない。
   そこで、目印の無い段落・見出し・画像にも同じ体裁が当たるようにする。
   ================================================================== */

/* イントロダクション（抜粋欄に書いた文） */
.article-lead {
	font-size: 16.5px;
	line-height: 1.95;
	color: var(--ink, #24313D);
	background: var(--q-bg, #FDF4E8);
	border-left: 4px solid var(--q-line, #E8912D);
	border-radius: 0 8px 8px 0;
	padding: 18px 20px;
	margin: 0 0 30px;
}

/* 本文の段落。議会報告の .talk p と同じ見え方にする */
.post-body > p {
	font-size: var(--f-body, 17px);
	line-height: 1.95;
	margin: 0 0 var(--gap-line, 1.15em);
	color: var(--ink, #24313D);
}

/* 見出し。議会報告の h2 は組み立て側が出すが、
   編集画面で入れた h2・h3 にも同じ体裁を当てる */
.post-body > h3 {
	font-size: 17.5px;
	font-weight: 700;
	margin: 34px 0 14px;
	padding-left: 11px;
	border-left: 4px solid var(--a-line, #4FA377);
	color: var(--ink, #24313D);
	line-height: 1.6;
}
.post-body > h4 {
	font-size: 16px;
	font-weight: 700;
	margin: 26px 0 10px;
	color: var(--q-ink, #A85A00);
}

/* 記事の中に置いた画像 */
.post-body figure,
.post-body .wp-block-image {
	margin: 26px 0;
}
.post-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}
.post-body figcaption {
	font-size: 13.5px;
	color: var(--muted, #6B7A88);
	margin-top: 8px;
	text-align: center;
}

/* 箇条書き */
.post-body > ul,
.post-body > ol {
	font-size: var(--f-body, 17px);
	line-height: 1.9;
	margin: 0 0 22px;
	padding-left: 1.6em;
}
.post-body > ul > li,
.post-body > ol > li {
	margin-bottom: 8px;
}

/* 引用。議会報告の締めの引用と同じ形 */
.post-body > blockquote {
	margin: 26px 0;
	padding: 22px 24px 22px 30px;
	background: var(--paper-2, #F5F8FA);
	border-left: 4px solid var(--quote-line, #C9D6E0);
	border-radius: 0 8px 8px 0;
	font-size: 16px;
	line-height: 1.95;
}

/* 区切り線 */
.post-body > hr {
	border: 0;
	border-top: 1px solid var(--line, #DCE5EC);
	margin: 38px 0;
}

@media (max-width: 600px) {
	.article-lead { font-size: 15.5px; padding: 15px 16px; }
	.post-body > h3 { font-size: 16.5px; }
}

/* --- 答弁の塊（一般質問） ---------------------------------------
 * 8月26日 ももかわ様
 *   「①背景、質問 ②背景、質問 ③背景、質問
 *     → 答弁①、答弁②、答弁③ の並びにした方が良いかもしれません」
 *
 * 一般質問は区が所管部署ごとにまとめて答弁するため、
 * 質問1つ1つに答弁を割り当てず、記事の最後にまとめて並べる。
 * 質問の列と答弁の列の境目がはっきり分かるようにする。
 * ------------------------------------------------------------- */
.gikai-report .ans-block {
	margin: 34px 0 8px;
	padding: 22px 20px 6px;
	background: var(--a-bg, #f4f7fa);
	border-top: 3px solid var(--accent, #f08000);
}

.gikai-report .ans-block-ttl {
	margin: 0 0 4px;
	font-size: var(--f-h2);
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--ink);
	border: 0;
	padding: 0;
}

/* 塊の中の答弁は、下の枠線で区切るだけにして軽くする */
.gikai-report .ans-block .a {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line, #dfe4ea);
	border-radius: 0;
	margin: 0;
	padding: 14px 0;
}

.gikai-report .ans-block .a:last-child { border-bottom: 0; }

/* 部署名と、答弁の中の見出し */
.gikai-report .ans-block .a .ttl { margin: 0; }

.gikai-report .ans-block .pt { margin: 12px 0 18px; }

@media (max-width: 600px) {
	.gikai-report .ans-block { padding: 16px 14px 4px; margin-top: 26px; }
}

/* --- 記事のアイキャッチ。中段だけを透過の帯にする -------------------
 * 8月27日 ももかわ様
 *   「議会報告の個別ページのアイキャッチ画像は一覧で表示されるものと
 *     同じ中段を透過にしたもので統一した方が見やすい（暗く見えるため）」
 *
 * これまでは写真の全面に暗い膜をかけていたため、写真そのものが沈んでいた。
 * 一覧のカードは帯の部分だけが暗く、写真は素のまま見える。
 * 記事ページも同じ形にする。
 * ------------------------------------------------------------------ */
.article-hero-panel {
	inset: auto 0 auto 0;            /* 上下いっぱいに広げない */
	top: 50%;
	transform: translateY(-50%);
	padding: 1.4rem 1.5rem;
	background: rgba(12, 16, 22, 0.72);   /* 一覧のカードと同じ濃さ */
	gap: 0.55rem;
}

@media (max-width: 600px) {
	.article-hero-panel {
		padding: 1rem 1rem;
		gap: 0.4rem;
	}
}

/* --- 比較カードの数値を大きくする -----------------------------------
 * 8月27日 ももかわ様「比較カードの数値が小さい」
 *
 * 見出しが16px、その下の数値も16.5pxで、ほぼ同じ大きさだった。
 * 比べていただくための部品なので、数値が目に入る必要がある。
 * 数値カードほど大きくはせず、見出しとの差がつく程度にする。
 * ------------------------------------------------------------------ */
/* 見出しの直後の1行が比べる数値。ここだけ大きくする。
 * .col p だと見出し（p.h）にも当たり、
 * .col p ~ p だと数値そのものに当たってしまうので、
 * 見出しの隣という指定にする。 */
.gikai-report .col .h + p {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .01em;
	margin: 6px 0 3px;
}

@media (max-width: 600px) {
	.gikai-report .col .h + p { font-size: 21px; }
}

/* 数字と単位の組。ここで折り返さない（8月27日）
 * 「55,000」と「人」が別の行に分かれていた。 */
.gikai-report .num .v .nv {
	white-space: nowrap;
	display: inline-block;
}

/* 数値の出どころ（8月27日）
 * 背景や質問の数値も数値カードにするようにしたため、
 * 区が答えた数字と議員が挙げた数字が同じ見た目で並ぶ。
 * 取り違えないよう、項目名の横に小さく添える。 */
.gikai-report .num .k .src-tag {
	display: inline-block;
	margin-left: .4em;
	padding: .05em .45em;
	font-size: .8em;
	font-weight: 700;
	line-height: 1.5;
	border-radius: 3px;
	vertical-align: 1px;
}
.gikai-report .num .k .src-a { background: var(--a-bg); color: var(--a-ink); }
.gikai-report .num .k .src-q { background: var(--q-bg); color: var(--q-ink); }