/* =====================================================================
 * subsidy.css — 補助金TOP（2j）と自治体別補助金（2r）の指定
 * ---------------------------------------------------------------------
 * 前半が 2j（/subsidy/）、後半が 2r（/subsidy/{pref}/）。
 * 受付状況バッジ（.sb-badge）と県リンク（.sb-prefs）を両ページで使うので、
 * メーカーの 2h-0／2h と同じく1つのファイルにまとめてある。
 *
 * 面（全幅の青・白い箱・セクションの並び・FAQ の見た目）は
 * components.css の共通部品に置いてある。ここには 2j 固有のものだけを書く。
 *
 * 【このページの面の配分】
 *   FV            青の箱（写真なし。バッジと更新日を最初に読ませる）
 *   制度のポイント 白い箱
 *   予算の消化状況 地の上に白いカード
 *   対象の機種例   地の上に白いカード
 *   申請の流れ    全幅の青（水玉）← このページの主役
 *   県・市の併用   白い箱
 *   FAQ           白いカード＋グレーの水玉
 *   CTA           黄色の帯
 *
 * クラス名は .sb-* にしてある。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV
 * 写真を敷かないので、交換ページの写真用グラデーションと楕円は止める。
 * ------------------------------------------------------------------- */
.hero--subsidy .hero__box::after { content: none; }
.hero--subsidy .hero__catch { gap: 8px; }
/* 補助額はまだ「◯万円」。数字が入っていないので大きくしない
 * （丸が1つ浮くだけになる）。言い切りの側をひとまわり大きくするに留める。 */
.hero--subsidy .hero__catch-label--strong { font-size: 26px; padding-block: 4px; }

/* --- 受付状況と最終更新（制作メモ：H1直下） --- */
.sb-status {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
}
/* バッジは角丸6。緑=受付中／橙=残りわずか／グレー=受付終了（2a-D の3状態）。
 * 濃い青の上なので、面を塗って白文字にする。文字だけ色を変えると沈む。 */
.sb-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
}
.sb-badge__mark { font-size: .8em; line-height: 1; }
.sb-badge--open    { background: var(--c-ok); }
.sb-badge--limited { background: var(--c-warm); }
/* 受付終了だけは彩度を落とす。終わったものを緑や橙と同じ強さで出すと、
 * まだ使えるように見える。 */
.sb-badge--closed  { background: var(--fig-gray-50); }
/* スマホの FV では、塗った面がボタンより目立ってボタンへの誘導を妨げるので、塗りなし・白い枠線にする
 * （交換ページ・TOP の FV のバッジと同じ。2026-10-12 フィードバック）。状態の色は ● にだけ残す。
 * 600 以上は上の面の指定のまま。県別ページの一覧のバッジ（.sb-status の外）は対象外。 */
@media (max-width: 599.98px) {
	.sb-status .sb-badge { background: none; border: 1px solid #fff; padding: 5px 15px; }
	.sb-status .sb-badge--open .sb-badge__mark    { color: var(--c-ok); }
	.sb-status .sb-badge--limited .sb-badge__mark { color: var(--c-warm); }
	.sb-status .sb-badge--closed .sb-badge__mark  { color: var(--fig-gray-50); }
}
.sb-status__date {
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-medium);
	color: var(--fig-blue-20);
}

/* ---------------------------------------------------------------------
 * 制度のポイント
 * 表組みにせず、項目ごとに1行。狭い画面では見出しの下に値を置く。
 * ------------------------------------------------------------------- */
.sb-summary { display: flex; flex-direction: column; }
.sb-summary__row { display: grid; gap: 4px; padding: 16px 0; }
.sb-summary__row + .sb-summary__row { border-top: 2px solid var(--fig-blue-30); }
.sb-summary__row:first-child { padding-top: 0; }
.sb-summary__row:last-child { padding-bottom: 0; }
.sb-summary__row dt {
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.sb-summary__row dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 予算の消化状況
 * 「残り◯%」を先に読ませ、バーはその裏付けとして下に置く。
 * バーだけ先に出すと、満ちているのか減っているのかが読み取れない。
 * ------------------------------------------------------------------- */
.sb-budget {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
}
.sb-budget__rest {
	font-size: 18px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 数字はオレンジ（サイト共通の決めごと）。ここは「◯」ではなく実数が入る。 */
.sb-budget__rest b {
	font-family: var(--font-num);
	font-size: 32px;
	font-weight: 800;
	color: var(--c-warm);
	margin-inline: 4px;
}
.sb-budget__bar {
	height: 28px;
	border-radius: 6px;
	/* 溝はグレー。淡い青にすると、残量の青と見分けがつかない。 */
	background: var(--fig-gray-10);
	overflow: hidden;
}
.sb-budget__fill {
	display: block;
	width: var(--rest, 50%);
	height: 100%;
	border-radius: 6px;
	background: var(--fig-blue-40);
}
.sb-budget__note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 補助金対象の機種例
 * ------------------------------------------------------------------- */
.sb-models { display: grid; gap: 12px; }
.sb-model {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 20px 16px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sb-model:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sb-model__name {
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	word-break: break-all;
}
/* 補助額は実数が入る欄なので、金額の決めごとどおり黄色の面に載せる。 */
.sb-model__yen {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.sb-model__yen mark {
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--fig-yellow);
	color: var(--c-warm);
	font-family: var(--font-num);
	font-size: 1.4em;
	font-weight: 800;
	margin-left: 4px;
}

/* ---------------------------------------------------------------------
 * 申請の流れ（青い面の上）
 * ------------------------------------------------------------------- */
.sb-flow__lead {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: #fff;
	text-align: center;
}
/* 1文で1行。文の中は語のまとまり（span）ごとに折り返す。
 * 箱にしないと、画面幅によって「しま／す。」のように文末だけが次の行に落ちる（2026-10-14 jojiさんの指摘）。 */
.sb-flow__sentence { display: block; }
.sb-flow__sentence > span { display: inline-block; }
/* 「署名するだけ」は太字だけにする（黄色の線は金額にだけ引く。2026-10-14 jojiさんの指示）。 */
.sb-flow__lead b { font-weight: var(--fw-bold); }

/* 4枚のカード。スマホは縦1列、PCは横一列。
 * スマホを2列×2段にすると、1→2→3→4 を横に読むのか縦に読むのかが分からない（2026-10-14 jojiさんの指摘）。
 * 番号は置かず、カードの間の白い三角で順番を示す（スマホは下向き、PCは右向き）。
 * スマホは「絵｜担当と手順名」の横並び。PCは絵を上に置いた縦積み。 */
.sb-steps { display: grid; gap: 22px; }
.sb-step {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr;
	grid-template-areas: "ico who" "ico name";
	align-items: center;
	justify-items: start;
	column-gap: 14px;
	row-gap: 4px;
	padding: 14px 16px;
	border-radius: 18px;
	background: #fff;
}
/* カードの間の三角（白）。スマホは下向き。 */
.sb-step + .sb-step::before {
	content: "";
	position: absolute;
	top: -17px;
	left: 50%;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top: 12px solid #fff;
	border-bottom: 0;
}
.sb-step__ico { grid-area: ico; width: 52px; height: 52px; }
/* 「誰がやるか」のラベル。当社＝青、お客様＝オレンジ。 */
.sb-step__who {
	grid-area: who;
	align-self: end;
	padding: 2px 10px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 12px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
}
.sb-step__name {
	grid-area: name;
	align-self: start;
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
/* お客様の1枚だけ、オレンジの枠と淡いオレンジの面にして「ここだけ」の札を付ける。
 * 枠は outline で内側に引く（border だと他の3枚より中身が4px狭くなり、絵の位置がずれる）。 */
.sb-step--you { background: #fff1e6; outline: 4px solid var(--c-warm); outline-offset: -4px; }
.sb-step--you .sb-step__who { background: var(--c-warm); color: #fff; }
.sb-step--you .sb-step__name { color: var(--c-ink); font-size: 17px; }
.sb-step__flag {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--c-highlight);
	color: var(--c-ink);
	font-size: 11px;
	line-height: 1.4;
	font-weight: var(--fw-black);
	box-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------------------
 * 県や市の補助金と併用できる？
 * 地図は出さない。ここで選ぶのは「補助金のページ」であって対応エリアではなく、
 * 同じ地図を2つの意味で使うと、どちらの話か分からなくなる。
 * ------------------------------------------------------------------- */
/* スマホは2列。7県だと最後の1つが余るので、ほかと同じ幅のまま中央に置く（2026-10-14）。 */
.sb-prefs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sb-prefs li { flex: 0 0 calc((100% - 12px) / 2); }
/* 交換ページの地域バッジと同じ（水色の面に青文字・角丸6）。 */
.sb-prefs a {
	display: block;
	padding: 12px 8px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 16px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	text-align: center;
	transition: transform .15s ease, background .15s ease;
}
.sb-prefs a:hover { transform: translateY(-2px); background: var(--fig-blue-40); color: #fff; }
/* 2r の「他の県」。全幅の青（水玉）の上なので白い札にする（エリアの .ar-cities と同じ）。
 * 自分の県を除いた6県なので、PC は6列で幅いっぱいに並べる。 */
.sb-prefs--on-blue a { background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.sb-prefs--on-blue a:hover { background: #fff; color: var(--fig-blue-60); box-shadow: var(--shadow); }

/* =====================================================================
 * ここから下は自治体別補助金（2r）— template-subsidy-pref.php
 * ---------------------------------------------------------------------
 * 2j と同じファイルに置いてあるのは、受付状況バッジ（.sb-badge）と
 * 県リンク（.sb-prefs）を両ページで使うため（メーカーの 2h-0／2h と同じ形）。
 * ===================================================================== */

/* FV。県名＋「エコキュートの補助金一覧（2026年度）」は 2j の見出しより長いので、
 * 言い切りの側を大きくしすぎない（2行に折れて白帯が3枚に見える）。 */
.hero--subsidy-pref .hero__catch-label--strong { font-size: 22px; }

/* ---------------------------------------------------------------------
 * 自治体の制度一覧（このページの主役）
 * ワイヤーは5列の表だが、§表のSP設計が「3列超はカードUI変換」と決めている。
 * 全幅の青（水玉）の上に、白いカード（角丸20・枠なし）を並べる。
 * ------------------------------------------------------------------- */
.sb-orgs { display: grid; gap: 16px; margin: 0; list-style: none; padding: 0; }
.sb-org {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
}
.sb-org__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}
.sb-org__name {
	font-size: 20px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.sb-org__title {
	font-size: 16px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.sb-org__note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* 補助額と期限。項目名と値の2列で、狭い画面では上下に積む。 */
.sb-org__meta { display: flex; flex-direction: column; gap: 0; margin: 0; }
.sb-org__meta > div {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	padding: 10px 0;
	font-size: 15px;
	line-height: 1.7;
}
.sb-org__meta > div + div { border-top: 2px solid var(--fig-blue-30); }
.sb-org__meta > div:first-child { padding-top: 0; }
.sb-org__meta > div:last-child { padding-bottom: 0; }
.sb-org__meta dt { font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.sb-org__meta dd { margin: 0; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
/* 補助額は数字。数字はオレンジという決めに従う。黄色の面までは敷かない
 * （自治体ごとに1枚ずつ黄色が並ぶと、どれが自分の市か探しにくくなる）。 */
.sb-org__amount {
	font-weight: var(--fw-bold);
	color: var(--c-warm);
}

/* 公式サイトへのボタンはカードの下端にそろえる（カードの高さが不ぞろいでも
 * 「次に押すもの」の位置が動かない）。 */
.sb-org__link { margin-top: auto; align-self: flex-start; }

/* 0件のときのカード。空の箱に見せない（意味のある文字とボタンを入れる）。 */
.sb-org--empty { gap: 16px; }

/* ---------------------------------------------------------------------
 * 国との併用／実質価格の例
 * ------------------------------------------------------------------- */
.sb-pref__text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 答えを先に大きく出し、内訳をその下に小さく並べる。
 * 数字はオレンジ（答えだけ）、黄色の線も答えの金額だけ。
 * スマホは答えをオレンジ枠で囲み、内訳は点線区切りの明細。600〜は下の @media で式の形に変える。 */
.sb-example {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.sb-example__ans {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px 8px 20px;
	border: 3px solid var(--fig-orange);
	border-radius: 16px;
}
.sb-example__lead {
	font-size: 16px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
	text-wrap: balance;        /* 折り返すときは「〜なら、／補助金を使って」で切る */
	word-break: auto-phrase;
}
.sb-example__net {
	font-size: 22px;
	line-height: 1;
	font-weight: 900;
	color: var(--c-warm);
	white-space: nowrap;
}
.sb-example__net mark {
	margin: 0 4px;
	background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 35%;
	color: inherit;
	font-family: var(--font-num);
	font-size: 48px;
	font-weight: 700;
}
.sb-example__net span { font-size: 24px; }
.sb-example__eq {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.sb-example__eq > div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 2px dashed var(--fig-blue-30);
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
	text-align: left;
}
.sb-example__num {
	font-family: var(--font-num);
	font-size: 18px;
	color: var(--fig-gray-70);
	white-space: nowrap;
}
/* スマホは式の「−」の丸を出さず、補助金の金額に「−」を付けて青にする */
.sb-example__sub .sb-example__num { color: var(--fig-blue-40); }
.sb-example__sub .sb-example__num::before { content: "−"; }
.sb-example__op {
	display: none;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--fig-blue-60);
	color: #fff;
	font-weight: 900;
}

/* 渡りの導線（県の交換事例へ）。見出しバーを持たないので白いカードにボタンだけ。 */
.sb-cross {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}

/* =====================================================================
 * PC（600 以上。交換ページ・TOP と同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV --- */
	.hero--subsidy .hero__catch { gap: calc(12 * var(--u)); }
	.hero--subsidy .hero__catch-label--strong { font-size: max(calc(30 * var(--ff)), calc(44 * var(--u))); padding: calc(4 * var(--u)) calc(24 * var(--u)); }
	.sb-status { gap: calc(12 * var(--u)) calc(20 * var(--u)); margin-top: calc(24 * var(--u)); }
	.sb-badge { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); padding: calc(8 * var(--u)) calc(24 * var(--u)); }
	.sb-status__date { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }

	/* --- 制度のポイント：項目名と値を横一列 --- */
	.sb-summary__row { grid-template-columns: calc(200 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: baseline; padding: calc(20 * var(--u)) 0; }
	.sb-summary__row dt { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.sb-summary__row dd { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }

	/* --- 予算 --- */
	.sb-budget { padding: calc(40 * var(--u)); gap: calc(16 * var(--u)); }
	.sb-budget__rest { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.sb-budget__rest b { font-size: max(calc(32 * var(--ff)), calc(48 * var(--u))); }
	.sb-budget__bar { height: calc(40 * var(--u)); }
	.sb-budget__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }

	/* --- 対象機種：4件を横一列 --- */
	.sb-models { grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--u)); }
	.sb-model { padding: calc(28 * var(--u)) calc(20 * var(--u)); gap: calc(12 * var(--u)); }
	.sb-model__name { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.sb-model__yen { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	/* --- 申請の流れ：4段を横一列 --- */
	.sb-flow__lead { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	/* 三角を置くぶん、カードの間を広げる。カードもひと回り小さくする（2026-10-14）。 */
	.sb-steps { grid-template-columns: repeat(4, 1fr); gap: max(28px, calc(44 * var(--u))); }
	.sb-step { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(8 * var(--u)); padding: max(20px, calc(24 * var(--u))) calc(14 * var(--u)) calc(22 * var(--u)); }
	.sb-step__who, .sb-step__name { align-self: auto; }
	/* PCは右向きの三角を、カードの間のすき間の真ん中に置く。 */
	.sb-step + .sb-step::before {
		top: 50%;
		left: calc(max(28px, calc(44 * var(--u))) / -2);
		transform: translate(-50%, -50%);
		border: max(10px, calc(14 * var(--u))) solid transparent;
		border-left: max(12px, calc(16 * var(--u))) solid #fff;
		border-right: 0;
	}
	.sb-step__ico { width: max(56px, calc(76 * var(--u))); height: max(56px, calc(76 * var(--u))); }
	.sb-step__who { font-size: max(calc(12 * var(--ff)), calc(14 * var(--u))); padding: calc(4 * var(--u)) calc(16 * var(--u)); }
	.sb-step__name { font-size: max(calc(13 * var(--ff)), calc(17 * var(--u))); }
	.sb-step--you .sb-step__name { font-size: max(calc(15 * var(--ff)), calc(20 * var(--u))); }
	.sb-step__flag { top: calc(-14 * var(--u)); right: calc(12 * var(--u)); transform: none; font-size: max(calc(12 * var(--ff)), calc(14 * var(--u))); padding: calc(4 * var(--u)) calc(14 * var(--u)); }

	/* --- 県・市：7県を横一列 --- */
	/* 7県が横一列に収まるので、最後だけ広げる指定は戻す。 */
	.sb-prefs { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(16 * var(--u)); }
	.sb-prefs a { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(14 * var(--u)) calc(8 * var(--u)); }
	.sb-prefs--on-blue { grid-template-columns: repeat(6, 1fr); }

	/* ----- 自治体別補助金（2r） ----- */
	.hero--subsidy-pref .hero__catch-label--strong { font-size: max(calc(24 * var(--ff)), calc(36 * var(--u))); }

	/* 自治体は2列。3列にすると1枚の幅が狭く、制度名が3行に折れる。 */
	.sb-orgs { grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--u)); }
	.sb-org { padding: calc(32 * var(--u)); gap: calc(16 * var(--u)); }
	.sb-org__name { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.sb-org__title { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.sb-org__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.sb-org__meta > div { grid-template-columns: calc(100 * var(--u)) 1fr; padding: calc(12 * var(--u)) 0; font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	.sb-pref__text { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.sb-example { gap: calc(16 * var(--u)); }
	.sb-example__lead { font-size: max(calc(15 * var(--ff)), calc(20 * var(--u))); }
	.sb-example__net { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.sb-example__net mark { font-size: max(calc(44 * var(--ff)), calc(64 * var(--u))); }
	.sb-example__net span { font-size: max(calc(20 * var(--ff)), calc(30 * var(--u))); }
	/* タブレット・PC は答えの枠を外し、内訳を水色の帯に横1列の式で並べる */
	.sb-example__ans { padding: 0; border: 0; gap: calc(16 * var(--u)); }
	.sb-example__eq {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: calc(24 * var(--u));
		max-width: calc(760 * var(--u));
		padding: calc(20 * var(--u)) calc(24 * var(--u));
		border-radius: 12px;
		background: var(--fig-blue-20);
	}
	.sb-example__eq > div { flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; text-align: center; font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.sb-example__num { font-size: max(calc(16 * var(--ff)), calc(22 * var(--u))); color: var(--fig-blue-60); }
	.sb-example__sub .sb-example__num { color: var(--fig-blue-60); }
	.sb-example__sub .sb-example__num::before { content: none; }
	.sb-example__op { display: grid; }
	.sb-cross { padding: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
}