@charset "UTF-8";
/**
 * campfire-cases — フロントUI（仕様書 §6 / 案1）
 *
 * 既存テーマとの衝突対策（§6-3）:
 *  - すべてのセレクタを .cfc-scope 配下に閉じる
 *  - box-sizing を .cfc-scope * に明示
 *  - テーマ側の img / a / p / button 指定を打ち消す
 *  - !important は .cfc-card__title など、カード高さに直結する箇所だけに留める
 *
 * レスポンシブの判定基準（v1.3.1）:
 *  - サマリーの列数       → コンテナ幅（@container cfcitems）
 *  - サマリーの余白・文字 → コンテナ幅（@container cfcsum）
 *  - カードの段組み       → コンテナ幅（@container cfclist）
 *  - カード内の統計行     → カード幅（@container cfccard / v1.3.0 から）
 *  - ページャーのボタン   → ビューポート幅（指で押す大きさの話なので端末基準）
 *  コンテナクエリ非対応ブラウザ向けには @supports not (container-type: inline-size)
 *  でビューポート幅の近似を用意してある
 *  （サマリーの列数はベースの auto-fit グリッドがそのまま受け止める）。
 *
 * カードのタイトルは <p class="cfc-card__title"> で出す（v1.2.1）:
 *  目次プラグイン（Rich Table of Contents 等）が本文中の h2〜h4 を機械的に拾うため、
 *  見出し要素で出すとカードのタイトルが全部目次に並んでしまう。
 *  見た目（14px / 行間22px / 2行clamp / 高さ44px）はここで完全に担保しているので、
 *  p にしても1pxも変わらない。
 *
 * カード高さは全カードで揃うこと:
 *  サムネ(aspect-ratio 16/9) + 本文(14 + 44 + 8 + 16 + 10)
 *  + バー(18 + 10) + 統計(14 + 18 + 16) が全て固定値。
 */

/* ------------------------------------------------------------------
 * スコープ・リセット
 * ------------------------------------------------------------------ */
.cfc-scope {
	--cfc-cols: 3;
	--cfc-gap: 20px;
	--cfc-card-bg: #ffffff;
	--cfc-border: #e9e9ec;
	--cfc-text: #1f2328;
	--cfc-sub: #6b7280;
	--cfc-muted: #9aa0a6;
	--cfc-accent: #e8483c;
	--cfc-success: #f5c518;
	--cfc-track: #eceef1;
	--cfc-radius: 12px;
	--cfc-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 8px rgba(0, 0, 0, .05);
	--cfc-shadow-hover: 0 2px 4px rgba(0, 0, 0, .06), 0 8px 20px rgba(0, 0, 0, .08);
	--cfc-font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;

	box-sizing: border-box;
	font-family: var(--cfc-font);
	color: var(--cfc-text);
	line-height: 1.6;
	text-align: left;
	-webkit-font-smoothing: antialiased;

	/* テーマ本文の字送り・ウェイトを一覧の中へ持ち込ませない。
	   JIN:R は本文に letter-spacing: 0.18rem / font-weight: 300 を効かせており、
	   そのままだと数値の幅が1割ほど広がって列の計算が狂う。 */
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;

	/* 目次プラグイン・シェアボタン等が float するボックスを直前に置くことがあるため、
	   一覧が回り込んでレイアウトが崩れないよう回り込みを解除する（v1.2.1）。 */
	clear: both;

	/* レスポンシブ判定の基準（v1.3.1）。
	   ビューポート幅ではなく「一覧が実際に置かれている場所の幅」で判定するため、
	   一番外側のラッパー自身をコンテナにしておく。
	   本文カラムが 740px 固定のテーマ（JIN:R の d--article-width-740 など）では
	   ここが 740px になり、ビューポートが 1400px でも狭いレイアウトを選べる。 */
	container-type: inline-size;
	container-name: cfcroot;
}

.cfc-scope *,
.cfc-scope *::before,
.cfc-scope *::after {
	box-sizing: border-box;
}

/* テーマ側の指定を打ち消す */
.cfc-scope img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.cfc-scope a {
	text-decoration: none;
	box-shadow: none;
	border: 0;
	background: none;
}

.cfc-scope p {
	/* テーマが #postContent p { margin: 3.3rem 0; padding: 0 } のように
	   ID セレクタで p の余白を指定してくると、クラスだけのセレクタでは
	   何個クラスを重ねても勝てない（詳細度は ID > クラス）。
	   実際 JIN:R v1.4.6 は #postContent p, .o--widget-area p に
	   margin-top/bottom: 3.3rem（＝33px）を当てており、
	   サマリーの見出し（p 要素）の上下に 33px の余白が入ってしまう。
	   p を使っているのは
	   .cfc-summary__caption / .cfc-card__title / .cfc-notice / .cfc-empty の4つで、
	   いずれも余白は自分で決めるので、ここは !important で固定する。 */
	margin: 0 !important;
	padding: 0 !important;
	text-indent: 0;
}

.cfc-scope button {
	font: inherit;
	color: inherit;
	margin: 0;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
}

/* ------------------------------------------------------------------
 * サマリー（§5-2 / v1.3.1）
 * ------------------------------------------------------------------
 * 構造:
 *   .cfc-summary            外枠。padding は持たない
 *     .cfc-summary__caption 集計対象ラベル（band では帯そのもの）
 *     .cfc-summary__body    数値エリアの器。左右上下の余白はここが持つ。
 *                           ＝ 数値エリアに実際に使える幅そのものなので、
 *                              コンテナクエリの基準（cfcitems）にできる。
 *       .cfc-summary__items 数値のグリッド
 *         .cfc-summary__item  ラベル＋値
 *
 * v1.2.1 では外枠に padding: 14px 18px を置き、band だけ padding-top: 0 と
 * 負マージン（margin: 0 -18px）＋ flex-basis: calc(100% + 36px) で帯を全幅化していた。
 * この「打ち消し」が効かない環境では帯の上に padding 分（14px）の白い余白が残る。
 * v1.3.0 で外枠の padding を 0 にして、余白は caption と数値エリアが自分で持つ形にした。
 * 打ち消すものが無いので、帯は常にボックス上端へ密着する。
 *
 * v1.3.1: レスポンシブの判定を「ビューポート幅」から「コンテナ幅」へ変えた。
 *   v1.3.0 は @media (max-width: 600px) でPC用／SP用を切り替えていたが、
 *   これはブラウザの窓幅で判定するため、
 *   「ビューポートは1400pxだが本文カラムは740px」という
 *   テーマ（JIN:R の d--article-width-740 など）では
 *   PC用の1行レイアウトが選ばれ、数値が 3+1 に折り返していた。
 *   実測: 740pxカラム = 数値エリア702px に対し、
 *         4項目を横1行に並べるのに必要な幅は medium 740.5px / large 817.9px。
 *   v1.3.1 では .cfc-summary__body をコンテナにして、
 *   「数値エリアに実際に使える幅」で列数を決める。
 *
 * 文字サイズは summary_size（small / medium / large）で3段階。
 * 実際の値はカスタムプロパティで持ち、コンテナ幅で差し替える。 */
.cfc-scope .cfc-summary {
	/* medium（既定）の値。--size-* で上書きされる。 */
	--cfc-sum-cap: 13px;
	--cfc-sum-label: 13px;
	--cfc-sum-value: 20px;
	--cfc-sum-gap-x: 14px;
	--cfc-sum-gap-y: 10px;
	--cfc-sum-pad-x: 18px;
	--cfc-sum-pad-y: 14px;

	/* 1項目あたりに必要な最小幅。
	   支援総額（例: 2,638,236,955円 ＝ 14文字）が省略も折り返しも無く入る幅に
	   実測ベースで余裕を持たせてある。列数はこの値を割らない範囲で決める。 */
	--cfc-sum-col: 175px;

	margin: 0 0 20px;
	padding: 0;
	background: var(--cfc-card-bg);
	border: 1px solid var(--cfc-border);
	border-radius: var(--cfc-radius);
	box-shadow: var(--cfc-shadow);
}

/* --- 文字サイズ 3段階 -------------------------------------------------------
   small は v1.2.1 相当。medium が既定で一段大きい。large はさらに大きい。
   --cfc-sum-col は「その文字サイズで支援総額が収まる幅」。 */
.cfc-scope .cfc-summary--size-small {
	--cfc-sum-cap: 12px;
	--cfc-sum-label: 12px;
	--cfc-sum-value: 17px;
	--cfc-sum-col: 150px;
}

.cfc-scope .cfc-summary--size-medium {
	--cfc-sum-cap: 13px;
	--cfc-sum-label: 13px;
	--cfc-sum-value: 20px;
	--cfc-sum-col: 175px;
}

.cfc-scope .cfc-summary--size-large {
	--cfc-sum-cap: 14px;
	--cfc-sum-label: 14px;
	--cfc-sum-value: 23px;
	--cfc-sum-col: 200px;
}

/* 集計対象ラベル（サマリーの見出し）。
   見た目は summary_style で 3種類（band / heading / inline）に切り替わる。
   ここは共通の土台で、実際の字送り・余白は下のモディファイアが決める。
   ラベルを出すときは必ずモディファイアが付くので、この基底値は保険。 */
.cfc-scope .cfc-summary__caption {
	margin: 0;
	padding: var(--cfc-sum-pad-y) var(--cfc-sum-pad-x) 0 !important;
	font-size: var(--cfc-sum-cap);
	line-height: 1.5;
	font-weight: 600;
	color: var(--cfc-sub);
	/* JIN:R の #postContent.d--font-pc-l-size p { letter-spacing: .07rem } は
	   ID を含むためクラスだけでは勝てない。見出しの字送りはここで固定する。 */
	letter-spacing: 0 !important;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* 数値エリアの器。
   数値まわりの余白はすべてここが持つので、
   この要素の内容ボックス幅 ＝ 数値グリッドが実際に使える幅になる。
   その幅をコンテナクエリの基準（cfcitems）にすることで、
   ビューポート幅ではなく「本当に使える幅」で列数を決められる。
   （inline のときはラベルのバッジが同じ行を食うが、その分も正しく測れる） */
.cfc-scope .cfc-summary__body {
	container-type: inline-size;
	container-name: cfcitems;
	margin: 0;
	padding: var(--cfc-sum-pad-y) var(--cfc-sum-pad-x);
}

/* 数値グリッド。
   ベース（＝コンテナクエリ非対応ブラウザで効く形）は auto-fit グリッド。
   1列あたり --cfc-sum-col を割らない範囲で自動的に列数が決まるので、
   どんな幅でも横にはみ出さない。min(100%, …) はコンテナが
   --cfc-sum-col より狭いときに1列へ落とすための保険。 */
.cfc-scope .cfc-summary__items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cfc-sum-col)), 1fr));
	align-items: start;
	gap: var(--cfc-sum-gap-y) var(--cfc-sum-gap-x);
	margin: 0;
	padding: 0;
}

.cfc-scope .cfc-summary__item {
	display: block;
	min-width: 0;
}

.cfc-scope .cfc-summary__label {
	display: block;
	margin: 0 0 1px;
	font-size: var(--cfc-sum-label);
	line-height: 1.4;
	color: var(--cfc-sub);
	white-space: nowrap;
}

.cfc-scope .cfc-summary__value {
	display: block;
	font-size: var(--cfc-sum-value);
	line-height: 1.3;
	/* 値は <strong>。JIN:R は #wrapper.d--notosans-thin strong { font-weight: 500 } を
	   当てており、ID を含むためクラスだけでは勝てない。 */
	font-weight: 700 !important;
	color: var(--cfc-text);
	white-space: nowrap;
}

/* --- band（既定）: ラベルを薄いグレーの帯にして数値エリアと分ける ---------
   外枠に padding が無いので、帯は負マージンなしでボックス上端に密着する。
   角丸は外枠の内側に合わせる（枠線1px分だけ小さく）。 */
.cfc-scope .cfc-summary--band .cfc-summary__caption {
	padding: 9px var(--cfc-sum-pad-x) !important;
	background: #f6f7f9;
	border-bottom: 1px solid var(--cfc-border);
	border-radius: calc(var(--cfc-radius) - 1px) calc(var(--cfc-radius) - 1px) 0 0;
	font-weight: 600;
	color: #4b5563;
}

.cfc-scope .cfc-summary--band .cfc-summary__body {
	padding-top: 12px;
}

/* --- heading: ラベルを一段強い見出しにして、数値をすぐ下に詰める --------- */
.cfc-scope .cfc-summary--heading .cfc-summary__caption {
	font-size: calc(var(--cfc-sum-cap) + 2px);
	line-height: 1.45;
	font-weight: 700;
	color: var(--cfc-text);
}

.cfc-scope .cfc-summary--heading .cfc-summary__body {
	padding-top: 6px;
}

/* --- inline: ラベルを角丸バッジにして数値と同じ行の先頭に置く -------------
   幅が足りなければ flex-wrap で自動的に折り返す（狭い画面でも破綻しない）。
   角丸は「1行のときちょうど錠剤形」になる値を font-size から算出する。
   長い自由入力で2行以上になっても、999px のような極端な丸みで
   不格好にならない（＝ほどよい角丸の箱になる）。 */
.cfc-scope .cfc-summary--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: var(--cfc-sum-pad-y) var(--cfc-sum-pad-x);
}

.cfc-scope .cfc-summary--inline .cfc-summary__caption {
	flex: 0 1 auto;
	max-width: 100%;
	margin: 0;
	padding: 4px 12px !important;
	background: #f1f3f5;
	border-radius: calc(.75em + 4px);
	font-size: calc(var(--cfc-sum-cap) - 1px);
	line-height: 1.5;
	font-weight: 600;
	color: #4b5563;
}

/* flex-basis を 60% にしておくと、
   ラベルが長くて数値エリアが4割を切る場面では数値エリアが次の行へ回り、
   短いラベルのときは同じ行に残って残り幅（＝6割以上）を取る。
   どちらの場合も「数値エリアの実幅」は cfcitems として正しく測れる。 */
.cfc-scope .cfc-summary--inline .cfc-summary__body {
	flex: 1 1 60%;
	min-width: 0;
	padding: 0;
}

/* ------------------------------------------------------------------
 * サマリーのレスポンシブ（コンテナ幅基準 / v1.3.1）
 * ------------------------------------------------------------------ */

/* --- 狭いコンテナ: 余白と文字を一段詰める -------------------------------
   判定は .cfc-scope の幅（cfcroot）＝ 一覧が置かれている場所の幅。
   ビューポート幅ではない。 */
@container cfcroot (max-width: 480px) {

	.cfc-scope .cfc-summary {
		--cfc-sum-pad-x: 14px;
		--cfc-sum-pad-y: 12px;
	}

	.cfc-scope .cfc-summary--size-small {
		--cfc-sum-label: 11px;
		--cfc-sum-value: 16px;
		--cfc-sum-col: 140px;
	}

	.cfc-scope .cfc-summary--size-medium {
		--cfc-sum-label: 12px;
		--cfc-sum-value: 18px;
		--cfc-sum-col: 155px;
	}

	.cfc-scope .cfc-summary--size-large {
		--cfc-sum-label: 13px;
		--cfc-sum-value: 20px;
		--cfc-sum-col: 175px;
	}

	/* band の帯は狭いコンテナでも外枠上端に密着する（打ち消す padding が無い）。 */
	.cfc-scope .cfc-summary--band .cfc-summary__caption {
		padding: 8px var(--cfc-sum-pad-x) !important;
	}

	.cfc-scope .cfc-summary--band .cfc-summary__body {
		padding-top: 11px;
	}

	/* inline のバッジは狭いコンテナでは全幅の角丸ラベルにする。
	   自由入力の長いラベルでも錠剤形が伸びきって不格好にならない。 */
	.cfc-scope .cfc-summary--inline {
		display: block;
	}

	.cfc-scope .cfc-summary--inline .cfc-summary__caption {
		display: block;
		max-width: none;
		margin: 0 0 10px !important;
		padding: 5px 10px !important;
		border-radius: 8px;
	}
}

/* --- 列数: 数値エリアの実幅（cfcitems）と項目数で確定させる ---------------
   「必要幅 ＝ 列数 × --cfc-sum-col ＋ 隙間」を満たすときだけその列数にする。
   4項目のときは 3列を飛ばして 4列 → 2列 と落とすので、
   「3つ並んで4つ目だけ次の行」という中途半端な折り返しが構造的に起きない。 */
@container cfcitems (min-width: 0px) {

	.cfc-scope .cfc-summary__items {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* small（値17px / 狭いコンテナでは16px） */
@container cfcitems (min-width: 195px) {

	.cfc-scope .cfc-summary--size-small .cfc-summary__items--2,
	.cfc-scope .cfc-summary--size-small .cfc-summary__items--3,
	.cfc-scope .cfc-summary--size-small .cfc-summary__items--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 480px) {

	.cfc-scope .cfc-summary--size-small .cfc-summary__items--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 645px) {

	.cfc-scope .cfc-summary--size-small .cfc-summary__items--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* medium（値20px / 狭いコンテナでは18px） */
@container cfcitems (min-width: 215px) {

	.cfc-scope .cfc-summary--size-medium .cfc-summary__items--2,
	.cfc-scope .cfc-summary--size-medium .cfc-summary__items--3,
	.cfc-scope .cfc-summary--size-medium .cfc-summary__items--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 555px) {

	.cfc-scope .cfc-summary--size-medium .cfc-summary__items--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 745px) {

	.cfc-scope .cfc-summary--size-medium .cfc-summary__items--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* large（値23px / 狭いコンテナでは20px） */
@container cfcitems (min-width: 235px) {

	.cfc-scope .cfc-summary--size-large .cfc-summary__items--2,
	.cfc-scope .cfc-summary--size-large .cfc-summary__items--3,
	.cfc-scope .cfc-summary--size-large .cfc-summary__items--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 630px) {

	.cfc-scope .cfc-summary--size-large .cfc-summary__items--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container cfcitems (min-width: 845px) {

	.cfc-scope .cfc-summary--size-large .cfc-summary__items--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- 支援総額は桁数が多い（例: 2,638,236,955円 ＝ 14文字）。
   2列にしたとき1列の幅が足りないコンテナでは、支援総額のセルだけ
   行いっぱいに広げる（文字を小さくしたり省略したりしない）。 */
@container cfcitems (max-width: 293px) {

	.cfc-scope .cfc-summary--size-small .cfc-summary__item--amount {
		grid-column: 1 / -1;
	}
}

@container cfcitems (max-width: 323px) {

	.cfc-scope .cfc-summary--size-medium .cfc-summary__item--amount {
		grid-column: 1 / -1;
	}
}

@container cfcitems (max-width: 363px) {

	.cfc-scope .cfc-summary--size-large .cfc-summary__item--amount {
		grid-column: 1 / -1;
	}
}

/* --- コンテナクエリ非対応ブラウザ向けのフォールバック ---------------------
   列数はベースの auto-fit グリッドが面倒を見る（＝はみ出さない）。
   ここではビューポート幅で「スマホなら余白と文字を詰める」だけを近似する。 */
@supports not (container-type: inline-size) {

	@media (max-width: 600px) {

		.cfc-scope .cfc-summary {
			--cfc-sum-pad-x: 14px;
			--cfc-sum-pad-y: 12px;
		}

		.cfc-scope .cfc-summary--size-small {
			--cfc-sum-label: 11px;
			--cfc-sum-value: 16px;
			--cfc-sum-col: 140px;
		}

		.cfc-scope .cfc-summary--size-medium {
			--cfc-sum-label: 12px;
			--cfc-sum-value: 18px;
			--cfc-sum-col: 155px;
		}

		.cfc-scope .cfc-summary--size-large {
			--cfc-sum-label: 13px;
			--cfc-sum-value: 20px;
			--cfc-sum-col: 175px;
		}

		.cfc-scope .cfc-summary--band .cfc-summary__caption {
			padding: 8px var(--cfc-sum-pad-x) !important;
		}

		.cfc-scope .cfc-summary--band .cfc-summary__body {
			padding-top: 11px;
		}

		.cfc-scope .cfc-summary--inline {
			display: block;
		}

		.cfc-scope .cfc-summary--inline .cfc-summary__caption {
			display: block;
			max-width: none;
			margin: 0 0 10px !important;
			padding: 5px 10px !important;
			border-radius: 8px;
		}

		.cfc-scope .cfc-summary--inline .cfc-summary__body {
			padding: 0;
		}
	}

	@media (max-width: 374px) {

		.cfc-scope .cfc-summary__item--amount {
			grid-column: 1 / -1;
		}
	}
}

/* ------------------------------------------------------------------
 * グリッド（§6-2 / v1.3.1）
 * ------------------------------------------------------------------
 * 段組みの判定もコンテナ幅基準。
 * ビューポート1400px・本文カラム740px のテーマで columns="3" を指定すると
 * 1枚あたり約228pxまで痩せてしまうため、
 * 「一覧が実際に使える幅」で列数を落とす。 */
.cfc-scope .cfc-list {
	position: relative;
	scroll-margin-top: 16px;

	/* 段組みの判定基準（＝カード一覧に使える幅そのもの）。 */
	container-type: inline-size;
	container-name: cfclist;
}

.cfc-scope .cfc-grid {
	display: grid;
	gap: var(--cfc-gap);
	grid-template-columns: repeat(var(--cfc-cols, 3), minmax(0, 1fr));
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfc-scope .cfc-grid.is-loading {
	opacity: .45;
	pointer-events: none;
	transition: opacity .15s ease;
}

@container cfclist (max-width: 900px) {

	.cfc-scope .cfc-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container cfclist (max-width: 600px) {

	.cfc-scope .cfc-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* コンテナクエリ非対応ブラウザ向けのフォールバック（ビューポート幅で近似）。 */
@supports not (container-type: inline-size) {

	@media (max-width: 900px) {

		.cfc-scope .cfc-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 600px) {

		.cfc-scope .cfc-grid {
			grid-template-columns: minmax(0, 1fr);
		}
	}
}

/* ------------------------------------------------------------------
 * カード
 * ------------------------------------------------------------------ */
.cfc-scope .cfc-card {
	display: flex;
	container-type: inline-size;
	container-name: cfccard;
	margin: 0;
	padding: 0;
	background: var(--cfc-card-bg);
	border: 1px solid var(--cfc-border);
	border-radius: var(--cfc-radius);
	box-shadow: var(--cfc-shadow);
	overflow: hidden;
	transition: box-shadow .18s ease, transform .18s ease;
}

.cfc-scope .cfc-card:hover {
	box-shadow: var(--cfc-shadow-hover);
	transform: translateY(-1px);
}

.cfc-scope .cfc-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.cfc-scope .cfc-card__link:focus-visible {
	outline: 2px solid var(--cfc-accent);
	outline-offset: -2px;
}

/* サムネイル -------------------------------------------------------- */
.cfc-scope .cfc-card__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, #dfe3e8, #c8cdd4);
	flex: 0 0 auto;
}

/* aspect-ratio 非対応ブラウザ向けフォールバック */
@supports not (aspect-ratio: 16 / 9) {
	.cfc-scope .cfc-card__thumb {
		height: 0;
		padding-top: 56.25%;
	}

	.cfc-scope .cfc-card__thumb img {
		position: absolute;
		inset: 0;
	}
}

.cfc-scope .cfc-card__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* 都道府県ピル（画像左下オーバーレイ・縦の高さを消費しない） */
.cfc-scope .cfc-card__pref {
	position: absolute;
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	padding: 2px 9px 2px 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-backdrop-filter: saturate(140%) blur(2px);
	backdrop-filter: saturate(140%) blur(2px);
}

.cfc-scope .cfc-card__pref::before {
	content: "📍";
	margin-right: 2px;
}

/* 本文 -------------------------------------------------------------- */
.cfc-scope .cfc-card__body {
	padding: 14px 16px 0;
	flex: 0 0 auto;
	min-width: 0;
}

/* カードのタイトル。
   v1.2.1 で h3 から p に変えたため、テーマ側の `.entry-content p` 等の指定を
   確実に打ち消す必要がある。カード高さ（44px = 22px × 2行）に直結する
   font-size / line-height / height は !important で固定する。 */
.cfc-scope .cfc-card__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 22px !important;
	height: 44px !important;
	min-height: 0;
	max-height: none;
	font-weight: 700;
	font-style: normal;
	color: var(--cfc-text);
	/* #postContent.d--font-pc-l-size p { letter-spacing: .07rem } 対策（ID には勝てないため）。 */
	letter-spacing: 0 !important;
	text-align: left;
	text-indent: 0;
	text-transform: none;
	text-shadow: none;
	background: none;
	border: 0;
	width: auto;
	max-width: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}

.cfc-scope .cfc-card__title::before,
.cfc-scope .cfc-card__title::after {
	content: none;
}

.cfc-scope .cfc-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 16px;
	margin: 0 0 10px;
	font-size: 11px;
	line-height: 16px;
	min-width: 0;
}

.cfc-scope .cfc-card__cat {
	flex: 0 1 auto;
	max-width: 62%;
	color: var(--cfc-accent);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cfc-scope .cfc-card__owner {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--cfc-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 達成率バー -------------------------------------------------------- */
.cfc-scope .cfc-card__bar {
	position: relative;
	height: 18px;
	margin: 0 16px 10px;
	padding-left: 42px;
	flex: 0 0 auto;
}

/* トラック（灰色の溝） */
.cfc-scope .cfc-card__bar::after {
	content: "";
	position: absolute;
	left: 42px;
	right: 0;
	top: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--cfc-track);
}

.cfc-scope .cfc-card__bar-fill {
	position: relative;
	z-index: 1;
	height: 6px;
	max-width: 100%;
	margin-top: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e8483c 0%, #f5a623 100%);
}

.cfc-scope .cfc-card__bar-label {
	position: absolute;
	left: 0;
	top: 0;
	width: 38px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 700;
	color: var(--cfc-accent);
	white-space: nowrap;
}

/* 100%以上は黄色帯に白抜きSUCCESS */
.cfc-scope .cfc-card__bar--success {
	padding-left: 0;
	border-radius: 4px;
	background: var(--cfc-success);
	overflow: hidden;
}

.cfc-scope .cfc-card__bar--success::after {
	display: none;
}

.cfc-scope .cfc-card__bar--success .cfc-card__bar-fill {
	display: none;
}

.cfc-scope .cfc-card__bar--success .cfc-card__bar-label {
	position: static;
	display: block;
	width: auto;
	height: 18px;
	/* 右端の達成率と重ならないよう、あらかじめ場所を空けておく。
	   足りなくなれば SUCCESS 側が省略記号になるだけで、高さは変わらない。

	   v1.3.1: 予約分を padding-right → margin-right に変えた。
	   overflow: hidden が切るのは「パディングの外側」なので、
	   padding-right で空けた場所には文字がはみ出して描画されてしまい、
	   カードが極端に痩せた環境（コンテナクエリ非対応ブラウザなど）で
	   SUCCESS の文字が達成率に重なっていた。
	   margin-right なら要素の箱そのものが達成率の手前で終わるので、
	   重なりが構造的に起きない（見た目は空けている場所が同じなので変わらない）。 */
	padding-left: 9px;
	padding-right: 0;
	margin-right: 46px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .10em;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 帯の右端に達成率（白抜き・右寄せ）。
   絶対配置なので帯の高さ（18px）＝カード高さには一切影響しない。 */
.cfc-scope .cfc-card__bar--success .cfc-card__bar-rate {
	position: absolute;
	right: 9px;
	top: 0;
	height: 18px;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 18px;
	white-space: nowrap;
	pointer-events: none;
}

/* 統計3枠 ----------------------------------------------------------- */
.cfc-scope .cfc-card__stats {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 16px 16px;
	flex: 0 0 auto;
}

.cfc-scope .cfc-stat {
	flex: 1 1 0;
	min-width: 0;
}

/* 3枠目は「実施期間」が入ると最も長くなるので少しだけ広く取る */
.cfc-scope .cfc-card__stats .cfc-stat:last-child {
	flex: 1.2 1 0;
}

.cfc-scope .cfc-stat__label {
	display: block;
	height: 14px;
	font-size: 10px;
	line-height: 14px;
	color: var(--cfc-muted);
	white-space: nowrap;
	overflow: hidden;
}

.cfc-scope .cfc-stat__value {
	display: block;
	height: 18px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	color: var(--cfc-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 実施期間は文字数が多いので少し詰める（折り返させない＝高さを崩さない） */
.cfc-scope .cfc-stat__value--period {
	font-size: 11px;
	letter-spacing: -.03em;
}

/* カードが痩せたときだけ統計行を詰めて、省略（…）を減らす。
   高さに関わる値（行高・上下padding）は一切変えないので、カード高さは揃ったまま。
   コンテナクエリが使える環境では「カード幅」で判定する。 */
@container cfccard (max-width: 344px) {

	.cfc-scope .cfc-card__stats {
		gap: 6px;
		padding-left: 12px;
		padding-right: 12px;
	}

	.cfc-scope .cfc-stat__value {
		font-size: 12px;
	}

	.cfc-scope .cfc-stat__value--period {
		font-size: 10px;
	}
}

/* さらに痩せた場合（テーマの本文幅が狭い / columns=4 など）。
   12px でも 7〜8桁の金額が「1,496,…」と欠けてしまう幅なので、
   統計を 2段（現在・支援者／残り・実施期間）に組み替えて全桁を見せる。
   すべてのカードが同じ幅＝同じ段組みになるため、カード高さは揃ったまま。

   v1.3.1 で切り替え幅を 264px → 320px に広げた。
   3枠を横に並べたときの3枠目（実施期間）の実測幅は
   0.375 × (カード幅 − 36px)。年をまたぐ実施期間
   （例: 2025.11.1 – 2026.1.31 ＝ 10px で約93px）を欠けずに出すには
   カード幅 320px 前後が必要で、265〜320px のカードでは
   金額・実施期間のどちらかが「…」で欠けていた。 */
@container cfccard (max-width: 320px) {

	.cfc-scope .cfc-card__stats {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 4px 10px;
	}

	.cfc-scope .cfc-card__stats .cfc-stat:last-child {
		grid-column: 1 / -1;
	}

	.cfc-scope .cfc-stat__value {
		font-size: 12px;
		letter-spacing: 0;
	}

	.cfc-scope .cfc-stat__value--period {
		font-size: 11px;
		letter-spacing: -.02em;
	}
}

/* 極端に狭いカード（狭いテーマ本文幅 × columns=4 など）。統計を1列に積む。 */
@container cfccard (max-width: 196px) {

	.cfc-scope .cfc-card__stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.cfc-scope .cfc-card__stats .cfc-stat:last-child {
		grid-column: auto;
	}
}

/* SUCCESS帯の達成率は、SUCCESS の文字が読めなくなるほど狭いカードでは隠す。
   （padding-right の予約分も戻すので SUCCESS が省略されずに収まる）
   264px / 196px の分岐では両方収まることを実測で確認済み。 */
@container cfccard (max-width: 160px) {

	.cfc-scope .cfc-card__bar--success .cfc-card__bar-rate {
		display: none;
	}

	.cfc-scope .cfc-card__bar--success .cfc-card__bar-label {
		margin-right: 6px;
	}
}

/* コンテナクエリ非対応ブラウザ向けのフォールバック（ビューポート幅で近似） */
@supports not (container-type: inline-size) {

	@media (min-width: 601px) and (max-width: 1100px) {

		.cfc-scope .cfc-card__stats {
			gap: 6px;
			padding-left: 12px;
			padding-right: 12px;
		}

		.cfc-scope .cfc-stat__value {
			font-size: 12px;
		}

		.cfc-scope .cfc-stat__value--period {
			font-size: 10px;
		}
	}
}

/* ------------------------------------------------------------------
 * 通知・空表示
 * ------------------------------------------------------------------ */
.cfc-scope .cfc-notice {
	margin: 14px 0 0 !important;
	font-size: 13px;
	color: var(--cfc-sub);
	text-align: center;
}

.cfc-scope .cfc-notice--error {
	color: #c5221f;
}

.cfc-scope .cfc-empty {
	margin: 0 !important;
	padding: 24px 0 !important;
	font-size: 14px;
	color: var(--cfc-sub);
	text-align: center;
}

/* ------------------------------------------------------------------
 * ページャー（§6-4）
 * ------------------------------------------------------------------ */
.cfc-scope .cfc-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 24px 0 0;
}

.cfc-scope .cfc-pager__btn {
	min-width: 36px;
	height: 36px;
	padding: 0 11px;
	border: 1px solid var(--cfc-border);
	border-radius: 8px;
	background: var(--cfc-card-bg);
	color: var(--cfc-text);
	font-size: 13px;
	line-height: 34px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cfc-scope .cfc-pager__btn:hover:not([disabled]):not(.is-current) {
	background: #f5f6f7;
	border-color: #d9dade;
}

.cfc-scope .cfc-pager__btn:focus-visible {
	outline: 2px solid var(--cfc-accent);
	outline-offset: 1px;
}

.cfc-scope .cfc-pager__btn[disabled] {
	opacity: .4;
	cursor: default;
}

.cfc-scope .cfc-pager__btn.is-current {
	background: var(--cfc-accent);
	border-color: var(--cfc-accent);
	color: #fff;
	cursor: default;
}

.cfc-scope .cfc-pager__gap {
	min-width: 20px;
	text-align: center;
	color: var(--cfc-muted);
	font-size: 13px;
	line-height: 36px;
	user-select: none;
}

/* ページャーだけはビューポート幅で判定する（v1.3.1 でも据え置き）。
   ボタンの大きさは「指で押せるか」＝端末の話であってコンテナ幅の話ではない。
   幅が足りないときは flex-wrap: wrap で複数行に折り返すだけなので、
   狭いコンテナに置いても横にはみ出すことはない（＝コンテナ基準にする必要が無い）。 */
@media (max-width: 600px) {
	.cfc-scope .cfc-pager__btn {
		min-width: 32px;
		height: 32px;
		padding: 0 8px;
		line-height: 30px;
		font-size: 12px;
	}
}

/* ------------------------------------------------------------------
 * 動きを減らす設定への配慮
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

	.cfc-scope .cfc-card,
	.cfc-scope .cfc-grid,
	.cfc-scope .cfc-pager__btn {
		transition: none;
	}

	.cfc-scope .cfc-card:hover {
		transform: none;
	}
}