/* =====================================================================
 * exchange.css — 交換サービス /exchange/
 * ---------------------------------------------------------------------
 * このファイルの数値は、すべて Figma の定義値をそのまま書いたもの。
 * 出典: Figma「sakaguchi（コピー）」/ ページ「サービス」/ フレーム Desktop（1440×11086）
 * padding・要素間の間隔・文字サイズ・行間・色・角丸は Figma REST API から取得した値で、
 * 画面を見て測ったものは1つもない。値を変えるときは Figma を先に直すこと。
 *
 * PC（1440幅）を基準に書き、幅が足りない画面では縦積みに落とす。
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV の上書き
 *
 * 「白い地の上に角丸の青い箱」に戻す打ち消しは、下層ページすべてで要るので
 * pages.css へ移した（2026-09-10）。ここに残すのは交換ページ固有の調整だけ。
 * ------------------------------------------------------------------- */

/* FV の枠線。Figma: blue-60（#0B56A2）・内側・4px（headline の stroke）。
 * 書き出し画像で確かめると、外周の4pxは楕円やグラデーションが乗る位置でも
 * #0B56A2 の単色になっている。つまり線はいちばん上に描かれている。
 * 中身（写真 z0 → グラデーション z1 → 楕円 z2 → 文字 z3）より上に置く。 */
.hero__edge {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	border: 4px solid var(--fig-blue-60);
	border-radius: var(--radius-lg);
}

/* パンくずの見た目は pages.css（全ページ共通）へ移した（2026-09-10）。 */

/* ---------------------------------------------------------------------
 * 本文の並び（Figma: contents 1200×9899 / padding上下60 / 要素間100）
 * ------------------------------------------------------------------- */
/* Figma の Frame 20（ページの縦の並び）は要素間が一律32px。
 * その32pxと、contents 自身の上下余白60pxを足したぶんを上に取る。 */
.ex-contents {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 56px 32px;
}

/* 全幅セクション（.bleed）と Figma のボタン（.fbtn）は他のページでも使うので、
 * 2026-09-05 に components.css へ移した。ここには置かない。 */

/* 白い面と枠を持つセクション（お支払い方法・補助金・症状）。
 * これらは .wrap が付いているが、.wrap の箱は「内容1200 ＋ 左右余白28」の
 * 1256px なので、そのままだと白い面と枠が Figma より左右28pxずつ大きくなる。
 * Figma ではこの3つの箱そのものが1200px。上限を1200に戻す。
 * スマホは枠が画面の端に付かないよう、補助金の枠と同じく左右に --gutter を空ける。 */
/* 補助金（.ex-subsidy）は料金表でも使うので components.css へ移した（2026-10-12）。 */

/* ボタンを縦に並べる箱（.ex-btns）も components.css に移した（2026-09-05）。 */

/* FV（v2）の見た目は hero-v2.css（TOP と共用。2026-10-12 に移した）。 */

/* ---------------------------------------------------------------------
 * 1. 人気機種の価格例（Figma v2 / 白い面に角丸の枠のカードを2列）
 * ------------------------------------------------------------------- */
.ex-models { display: flex; flex-direction: column; gap: 32px; }
.ex-models__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ex-models__note {
	text-align: center; color: var(--fig-gray-70);
	font-size: 14px; line-height: 1.8; font-weight: var(--fw-medium);
}
.ex-models__note a { color: var(--fig-blue-40); text-decoration: underline; }

/* カード: 580 / 白 / 角丸20 / 枠 #C3E1FF 2px */
.ex-model {
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 20px;
	background: #fff;
}
/* 上段: メーカーロゴ ＋ 容量バッジ。Figma: Frame 98 532×37 / 間隔10 / 横 */
.ex-model__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* メーカーのロゴ。Figma は 138×37 の窓（Slot）で、その中にロゴごとに違う
 * 大きさ・位置で画像を置き、はみ出したぶんを切っている。
 * 数値は Figma の定義値そのまま（--w 幅 / --h 高さ / --x 左 / --y 上）。
 * SP は同じ切り方のまま --s で縮める。 */
.ex-model__maker {
	--s: .7;
	position: relative;
	flex: none;
	overflow: hidden;
	width: calc(138px * var(--s));
	height: calc(37px * var(--s));
}
.ex-model__maker img {
	position: absolute;
	max-width: none;
	width: calc(var(--w) * var(--s));
	height: calc(var(--h) * var(--s));
	left: calc(var(--x) * var(--s));
	top: calc(var(--y) * var(--s));
}
/* 日立だけ、Figma 側で画像の枠（138×23）を切ったうえに拡大率が指定してある。
 * 逆算すると 155.3×78.9 を (-9.3,-28) に置いた形になる。 */
.ex-model__maker--hitachi    { --w: 155.3px; --h: 78.9px; --x: -9.3px; --y: -28px; }
.ex-model__maker--mitsubishi { --w: 144px;   --h: 144px;  --x: -14px;  --y: -53px; }
.ex-model__maker--chofu      { --w: 205px;   --h: 103px;  --x: -34px;  --y: -33px; }
.ex-model__maker--daikin     { --w: 152px;   --h: 42px;   --x: -7px;   --y: -6px; }
/* ロゴ画像が無いメーカーは会社名を文字で出す（枠の高さに合わせて中央に置く）。 */
.ex-model__maker--text {
	display: flex; align-items: center;
	width: auto; overflow: visible;
	font-weight: var(--fw-bold); color: var(--fig-gray-70);
	font-size: calc(20px * var(--s));
}
.ex-model__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ex-model__badges { display: flex; align-items: center; gap: 8px; flex: none; }
.ex-model__no { font-size: 18px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-gray-70); }
.ex-model__note { font-weight: var(--fw-medium); color: var(--fig-gray-50); }
/* スマホは写真を型番の下に大きく置く（2026-10-12 jojiさんと決定）。PC は右に置く（600以上の指定） */
.ex-model__body { display: flex; flex-direction: column; gap: 8px; }
.ex-model__spec { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-model__photo { flex: none; order: -1; width: 170px; align-self: center; }
.ex-model__photo img { width: 100%; height: auto; aspect-ratio: 185 / 189; object-fit: contain; }
/* 特徴: 淡い青の箱に2行 */
.ex-model__tag {
	padding: 4px 12px; border-radius: 6px;
	background: var(--fig-blue-20); color: var(--fig-gray-70);
	font-size: 12px; line-height: 1.4; font-weight: var(--fw-bold);
}
/* 価格の行: ラベル（2行）が左、金額が右 */
.ex-model__row {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	min-height: 44px;
	color: var(--fig-gray-70); font-weight: var(--fw-bold);
}
.ex-model__lbl { font-size: 12px; line-height: 1.4; }
.ex-model__val { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.ex-model__val b { font-size: 20px; line-height: 1.4; font-weight: var(--fw-bold); }
.ex-model__val i { font-size: 12px; font-style: normal; }
.ex-model__val small { font-size: 10px; }
.ex-model__row--list .ex-model__val { color: var(--fig-gray-30); }
.ex-model__row--list .ex-model__val b { text-decoration: line-through; }
.ex-model__row--price .ex-model__val { color: var(--fig-blue-60); }
.ex-model__row--subsidy { padding: 0 8px; border-radius: 8px; background: rgba(255, 102, 0, .1); color: var(--fig-orange); }
.ex-model__row--subsidy .ex-model__val { color: var(--fig-orange); }
/* 実質価格の帯 */
.ex-model__total {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	padding: 4px 16px; border-radius: 6px;
	background: var(--fig-blue-20); color: var(--fig-orange);
}
.ex-model__total-label { font-size: 14px; line-height: 1.2; font-weight: var(--fw-bold); white-space: nowrap; }
.ex-model__total-yen { display: flex; align-items: flex-end; gap: 6px; }
.ex-model__total-num { font-size: 32px; line-height: 1.1; font-weight: 900; }
.ex-model__total-unit { display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: var(--fw-bold); }
.ex-model__total-unit small { font-size: 10px; }
.ex-model__total-unit span  { font-size: 18px; }
.ex-model__note { font-size: 11px; line-height: 1.6; color: var(--fig-gray-70); }
.ex-model__btns { display: flex; gap: 8px; }
.ex-model__btn {
	flex: 1 1 0; display: flex; align-items: center; justify-content: center;
	min-height: 44px; border-radius: 40px;
	color: #fff; text-decoration: none;
	font-size: 15px; line-height: 1.3; font-weight: var(--fw-bold);
	transition: transform .15s ease;
}
.ex-model__btn:hover { transform: translateY(-2px); }
.ex-model__btn--dark  { background: var(--fig-blue-80); }
.ex-model__btn--light { background: var(--fig-blue-40); }
.ex-model__btn { box-shadow: var(--shadow-btn); }
/* 幅375未満（320など）。価格や番号は折り返さない指定なので、カードが縮まずに
 * 画面の右へはみ出し、ページ全体が横に広がっていた（2026-10-11）。余白・写真・数字を少しずつ詰める。 */
@media (max-width: 374.98px) {
	.ex-model { padding: 16px; }
	.ex-model__photo { width: 150px; }
	.ex-model__val b { font-size: 17px; }
	.ex-model__total { gap: 8px; padding: 4px 10px; }
	.ex-model__total-num { font-size: 26px; }
	/* 412行目に同じ指定（flex: none）がもう一度あるので、親を付けて優先させる。 */
	.ex-model__head .ex-model__badges { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

/* ---------------------------------------------------------------------
 * 2. 全メーカー取り扱っています（Figma v2・新設）
 * 右半分に人物写真が入る（PC幅のみ。スマホは青の面だけ）。
 * ------------------------------------------------------------------- */
.ex-makers__box {
	padding: 28px 20px; border-radius: 28px; color: #fff;
	background: var(--fig-blue-40);
}
.ex-makers__title { font-size: 24px; line-height: 1.6; font-weight: var(--fw-bold); }
.ex-makers__text { margin-top: 16px; font-size: 14px; line-height: 1.7; font-weight: var(--fw-bold); max-width: 600px; color: var(--fig-blue-20); }
.ex-makers__btns { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 20px; }

/* ---------------------------------------------------------------------
 * 3. 総額に含まれるもの（Figma v2）
 * 「製品価格」と「工事費」の2枠、計算例、不安への答え、補助金の注意書き。
 * ------------------------------------------------------------------- */
.ex-total { display: flex; flex-direction: column; gap: 40px; }
.ex-total__lead { text-align: center; }
.ex-total__catch { font-size: 24px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-40); }
.ex-total__sub { margin-top: 8px; font-size: 14px; line-height: 1.6; font-weight: var(--fw-bold); color: var(--fig-red); }

.ex-cost2 { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.ex-cost2__plus { align-self: center; font-size: 40px; line-height: 1; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.ex-cost2__tag { margin-bottom: 30px; text-align: center; font-size: 16px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-40); }
.ex-cost2__tag::before { content: "＼"; }
.ex-cost2__tag::after  { content: "／"; }
.ex-cost2__box {
	position: relative;
	padding: 36px 20px 24px;
	background: #fff;
	border: 4px solid var(--fig-blue-40); border-radius: 24px;
}
/* 見出しのカプセルは枠の上辺をまたぐ */
.ex-cost2__name {
	position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
	padding: 4px 28px; border-radius: 40px;
	background: var(--fig-blue-40); color: #fff;
	font-size: 18px; line-height: 1.4; font-weight: var(--fw-bold); white-space: nowrap;
}
.ex-cost2__list { display: flex; flex-direction: column; gap: 16px; }
.ex-cost2__item { display: flex; align-items: center; gap: 12px; }
.ex-cost2__img { flex: none; width: 115px; height: 70px; display: flex; align-items: center; justify-content: center; }
.ex-cost2__img img { width: 100%; height: 100%; object-fit: contain; }
.ex-cost2__text { display: flex; flex-direction: column; gap: 2px; color: var(--fig-gray-70); }
.ex-cost2__text b { font-size: 16px; line-height: 1.4; font-weight: var(--fw-bold); }
.ex-cost2__text small { font-size: 12px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--fig-gray-40); }
/* 保証の帯 */
.ex-cost2__guard {
	margin-top: 20px; padding: 8px 12px; border-radius: 6px; text-align: center;
	/* Figma の線形グラデーション: ハンドルの位置から、帯の 10.6% で #2E82D6、50% で #0B56A2（残りは単色）。 */
	background: linear-gradient(113deg, #2e82d6 10.6%, var(--fig-blue-60) 50%); color: #fff;
	font-size: 15px; line-height: 1.4; font-weight: var(--fw-bold);
}
.ex-cost2__guard span { white-space: nowrap; }
.ex-cost2__guard em { color: var(--fig-yellow); font-style: normal; }
.ex-guard-ico { display: inline-block; width: 24px; height: 24px; margin-right: 0; flex: none; }
/* Figma の帯: 横並び・中央・間隔10・padding 上下10 左右0・角丸8 */
.ex-cost2__guard { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; border-radius: 8px; }
/* 「メーカー保証」は Font Awesome 6 の award。Figma から書き出した画像を白抜きのマスクにして使う。 */
.ex-guard-ico--award {
	width: 18px; height: 24px; margin-right: 0; background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/exchange/icon-award.png");
	mask: no-repeat center / contain url("../img/exchange/icon-award.png");
}
.ex-cost2__guard:not(.ex-cost2__guard--own) { background: var(--fig-blue-60); }

/* 計算例 */
.ex-eg { display: flex; flex-direction: column; gap: 8px; }
.ex-eg__title { text-align: center; font-size: 20px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.ex-eg__box { padding: 20px 16px; border-radius: 28px; background: var(--fig-blue-30); display: flex; flex-direction: column; gap: 16px; }
.ex-eg__cols { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
/* スマホは「＋」の上下を空ける。下の「工事費」のラベルが枠の上に半分はみ出す（約14px）ので、下側はその分を足す（2026-10-12） */
.ex-eg__plus { align-self: center; margin: 4px 0 18px; font-size: 32px; line-height: 1; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.ex-eg__panel {
	position: relative; padding: 36px 16px 16px;
	border-radius: 20px; background: var(--fig-blue-20);
	color: var(--fig-gray-70); font-weight: var(--fw-bold);
}
.ex-eg__tag {
	position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
	padding: 2px 24px; border-radius: 40px; background: var(--fig-blue-40); color: #fff;
	font-size: 15px; line-height: 1.6; white-space: nowrap;
}
.ex-eg__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 14px; line-height: 1.5; }
.ex-eg__row small { font-size: 11px; }
.ex-eg__row--list b { color: var(--fig-gray-40); text-decoration: line-through; }
.ex-eg__row--subsidy { margin-block: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 102, 0, .2); color: var(--fig-orange); }
.ex-eg__row--sum { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--fig-gray-70); }
.ex-eg__row--sum b { color: var(--fig-orange); font-size: 1.2em; white-space: nowrap; }
/* スマホは「（補助金適用後）」を「製品価格」の下の行に置き、語の途中で折れないようにする（2026-10-12） */
.ex-eg__row--sum small { display: block; }
.ex-eg__work { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; line-height: 1.5; }
.ex-eg__work small { display: block; font-size: 11px; }
.ex-eg__work b { color: var(--fig-orange); font-size: 1.2em; white-space: nowrap; }
.ex-eg__panel .ex-cost2__guard { margin-top: 12px; }
.ex-eg__total {
	display: flex; align-items: baseline; justify-content: center; gap: 10px;
	padding: 10px 12px; border-radius: 12px; background: var(--fig-yellow); color: var(--fig-orange);
	font-weight: var(--fw-bold);
}
.ex-eg__total span { font-size: 14px; }
.ex-eg__total b { font-size: 22px; }
.ex-eg__total small { font-size: 12px; }
/* スマホ（〜599）は2段（2026-10-12 jojiさんと決定・案A）。上に「お支払い総額（税込）」、下に金額を大きく。
 * 横1列のままだと幅375以下で3つがそれぞれ折り返し、「345,000／円〜」「（税／込）」と割れていた。 */
@media (max-width: 599.98px) {
	.ex-eg__total { flex-wrap: wrap; justify-content: center; gap: 0; padding: 10px 12px 12px; }
	.ex-eg__total span { order: 1; }
	.ex-eg__total small { order: 2; }
	.ex-eg__total b { order: 3; flex-basis: 100%; text-align: center; font-size: 30px; line-height: 1.2; white-space: nowrap; }
}

/* 補助金の注意書き */
.ex-notes { display: flex; flex-direction: column; gap: 2px; color: var(--fig-gray-70); font-size: 12px; line-height: 1.8; }
.ex-notes b { font-weight: var(--fw-bold); }
.ex-notes__last { margin-top: 16px; }

/* 不安の吹き出し（.ex-anxiety）は メーカー一覧でも使うので components.css に移した（2026-10-13）。 */

/* 右側のバッジ2つ（グレード＋容量）。Figma: Frame 112 / 間隔12 / 横 */
.ex-model__badges { display: flex; align-items: center; gap: 8px; flex: none; }
/* グレードバッジ: 195×32 / padding 6 10 / 間隔8 / 角丸6 / 文字20px #153E65。
 * 背景は左右に濃い金、中央が明るい金の横グラデーション（Figma の定義値）。
 * ⚠ Figma では8枚のうちダイキンの2枚だけに付いている。残り6枚は同じバッジが
 *   容量バッジの真下に重なって隠れており、書き出し画像にも出ていない。
 *   どの機種に付けるかを決める入力欄はまだ無いので、見本の2枚だけに出している。 */
.ex-model__grade {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 7px;
	border-radius: 6px;
	background: linear-gradient(90deg, #E3CB74 0%, #FFECA7 50%, #E3CB74 100%);
	color: var(--fig-blue-80);
	font-size: 13px;
	line-height: 1;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	flex: none;
}
/* 王冠は Font Awesome 6 の crown。書き出し画像から切り出したものを
 * マスクにして、色は文字と同じにする（他のアイコンと同じやり方）。 */
.ex-model__grade::before {
	content: "";
	flex: none;
	width: 18px;
	height: 13px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-crown.png");
	mask: no-repeat center / contain url("../img/icon-crown.png");
}
/* 容量バッジ: 106×37 / padding 8 20 / 角丸6 / #0B56A2 / 文字28px・白
 * Figma の行間 50.4 をそのまま line-height にすると高さが 66 になって合わない。
 * 枠の高さ37は「上下の余白8 ＋ 文字の実際の高さ21」なので、高さを直接決める。 */
.ex-model__cap {
	display: flex;
	align-items: center;
	height: 24px;
	padding: 0 14px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 18px;
	line-height: 1;
	font-weight: var(--fw-bold);
	white-space: nowrap;
	flex: none;
}
/* 下向きの三角。Figma: Polygon 2 の枠は 102×23 だが、角丸4が付いているため
 * 実際に塗られているのは 53.87×16.96 で、枠の中の (24.07, 5.75) に置かれている
 * （Figma API の absoluteRenderBounds で確認した）。
 * 枠のほうは 102×23 のまま置く。ここを縮めるとカードの高さが変わるため。
 *
 * 角丸の三角は border では描けないので、三角形を太い線（線の角を丸く）で
 * なぞった形をマスクにして、色は CSS 側で付ける。
 * 線の太さ8＝角丸4の2倍。内側の三角を上下左右に4ずつ太らせると、
 * 角が半径4で丸まった 53.87×16.96 の三角になる。 */
.ex-model__arrow {
	--as: .667;
	width: calc(102px * var(--as));
	height: calc(23px * var(--as));
	margin-inline: auto;
	background: var(--fig-blue-60);
	-webkit-mask: no-repeat calc(24.07px * var(--as)) calc(5.75px * var(--as)) / calc(53.87px * var(--as)) calc(16.96px * var(--as)) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2053.87%2016.96'%3E%3Cpath%20d='M4%204H49.87L26.94%2012.96Z'%20stroke='%23000'%20stroke-width='8'%20stroke-linejoin='round'/%3E%3C/svg%3E");
	mask: no-repeat calc(24.07px * var(--as)) calc(5.75px * var(--as)) / calc(53.87px * var(--as)) calc(16.96px * var(--as)) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2053.87%2016.96'%3E%3Cpath%20d='M4%204H49.87L26.94%2012.96Z'%20stroke='%23000'%20stroke-width='8'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
 * 3. 交換工事の流れ（Figma: Frame 41 / 1200×597 / 間隔40）
 * ------------------------------------------------------------------- */
.ex-flow { display: flex; flex-direction: column; gap: 40px; }
/* Figma: Frame 38 1200×360 / 間隔50 / 横。丸の中心あたりを1本の線が通る */
.ex-flow__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 24px;
	justify-items: center;
}
.ex-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
/* 円: 200×200 / #259EF5。中のアイコンは 100×101 */
/* 青い円とアイコンは、Figma の書き出しから円ごと切り出した1枚の画像。 */
.ex-flow__icon { display: block; width: 130px; height: 130px; }
.ex-flow__icon img { width: 100%; height: 100%; }
/* 文字は円（200px）より広くなってよい。Figma でも「現地調査・見積もり」は234px、
 * 「保証書発行・アフターフォロー」は207pxで、円からはみ出している。 */
.ex-flow__text { display: flex; flex-direction: column; align-items: center; gap: 7px; white-space: nowrap; }
/* 幅375未満では2列に収まらない（「保証書発行・アフターフォロー」）ので折り返しを許す。 */
@media (max-width: 374.98px) { .ex-flow__text { white-space: normal; } }
/* 番号: Geist 700 44px / 行間61.6 / #0B56A2 */
.ex-flow__no {
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.4;
	color: var(--fig-blue-60);
}
/* 名称: Noto Sans JP 700 26px / 行間36.4 / #0B56A2 */
.ex-flow__name {
	font-size: 18px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 補足: Noto Sans JP 500 26px / 行間36.4 / #5E5E5E */
.ex-flow__note {
	font-size: 18px;
	line-height: 1.4;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}

/* 4. お支払い方法（.ex-pay）は料金表でも使うので components.css へ移した（2026-10-12）。 */

/* 5. お住まいの地域までの対応スピードは components.css（.area-speed。TOP・修理・エリアと共用）。 */

/* 6. 補助金は components.css（料金表と共用）。 */

/* ---------------------------------------------------------------------
 * 7. 交換の施工事例（Figma: Frame 50 1440×838 / 上下余白80 / 間隔40 / #C3E1FF）
 * ------------------------------------------------------------------- */
/* 背景は #C3E1FF の上に、配管・配線の写真を「不透明度10%・焼き込みカラー」で
 * 重ねたもの（Figma の Frame 50 の2枚目の塗り）。
 * 写真は Figma API の images から取り、次のとおり1枚に焼き込んである。
 *   ・imageTransform（縦を 0.0635〜0.9365 で切り出し）どおりに切って 1440×838 に伸ばす
 *   ・#C3E1FF を下地に、焼き込みカラーで重ねて不透明度10%
 * 書き出し画像の背景と突き合わせて、平均の差は 0.3/255（ほぼ同一）。 */
.ex-cases {
	background-color: var(--fig-blue-30);
	padding-block: 48px;
}
.ex-cases__inner { display: flex; flex-direction: column; gap: 40px; }
/* カードは画面の左右にはみ出して並ぶ（Figma の Frame 38 は 1440幅で、
 * カードが画面外まで続いている）。横に送って見られるようにする。 */
/* スナップは付けない。Figma の初期位置（カードが左に521px送られた状態）は
 * カード1枚ぶんの区切りと合わないので、スナップがあるとそこへ吸い寄せられて
 * デザインどおりに置けない。 */
/* Figma の Frame 38 は画面いっぱい（1440幅）で、カードは画面の端で切れる。
 * 内容幅1200の中に置くと左右28pxぶん早く切れてしまうので、画面幅まで広げる。 */
.ex-cases__track {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	scrollbar-width: none;
}
.ex-cases__track::-webkit-scrollbar { display: none; }
/* スマホ・タブレット（〜1023）は Case 01 から始め、1枚目の左端を本文の左端にそろえる。
 * 送ったときもカードの左端で止まるようにする（PC の初期位置の都合が無いのでスナップを付ける）。 */
@media (max-width: 1023.98px) {
	.ex-cases__track { padding-inline: 20px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; }
	.ex-cases__track > * { scroll-snap-align: start; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ex-cases__track { padding-inline: 24px; scroll-padding-inline: 24px; }
}
/* カード: Group 387×450。中の Frame 81 は 388×395 / 角丸20 / 白 */
.ex-case {
	position: relative;
	flex: none;
	width: 300px;
	padding-top: 55px;
}
.ex-case__inner {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
	height: 100%;
}
/* 「Case 01」: Geist 700 44px / 行間79.2 / 白。カードの上に重ねる */
.ex-case__no {
	position: absolute;
	left: 18px;
	top: 0;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.8;
	color: #fff;
}
.ex-case__thumb { aspect-ratio: 387 / 227; overflow: hidden; }
.ex-case__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 本文: Frame 83 / padding 20 20 32 / 間隔8 / 縦 */
.ex-case__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 32px; }
/* 地域バッジ: padding 0 16 / 角丸6 / #C3E1FF / 文字20px・行間36・#0B56A2・太字 */
.ex-case__area {
	align-self: flex-start;
	padding: 0 16px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 16px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
}
/* 見出し: 20px / 行間36 / 黒 / 太さ500 */
.ex-case__title {
	font-size: 16px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: #000;
}

/* ---------------------------------------------------------------------
 * 8. こんな症状は、交換のサインです
 *    Figma v2: Frame 51 1440×752 / 間隔20。v1 にあった白い面と余白は無くなった。
 * ------------------------------------------------------------------- */
.ex-symptom {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
/* Figma: Frame 84 1120×412 / 間隔8 / 縦。上に項目、下にイラスト */
.ex-symptom__body { display: flex; flex-direction: column; gap: 8px; align-items: center; }
/* 項目は2つのまとまりに分かれる（3つ ／ 2つ）。間隔40 */
.ex-symptom__cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; }
.ex-symptom__col { display: flex; flex-direction: column; gap: 12px; }
/* スマホ（〜599）は1列にして左端をそろえ、まとまりごと中央に置く（600〜1023 と同じ。2026-10-12）。
 * 2列のまま折り返すと、列ごとに中央寄せされて4・5番目だけ右にずれていた。 */
@media (max-width: 599.98px) {
	.ex-symptom__cols { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; width: fit-content; max-width: 100%; margin-inline: auto; }
}
/* 1項目: 間隔12 / 横。四角は 31×31、文字は 24px・行間43.2・黒・太さ500 */
.ex-symptom__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 17px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: #000;
	cursor: pointer;
}
.ex-symptom__item input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Figma の Rectangle 10 は 31×31・塗りなし・枠線 #C3E1FF 4px（内側）・角丸なし。
 * チェックマークの絵は無く、空の四角が並ぶ。 */
.ex-symptom__box {
	flex: none;
	width: 31px;
	height: 31px;
	border: 4px solid var(--fig-blue-30);
	background: transparent;
}
.ex-symptom__item input:checked + .ex-symptom__box { background: var(--fig-blue-40); }
.ex-symptom__illust { width: 145px; }
.ex-symptom__illust img { width: 100%; height: auto; }
/* 結び: 40px / 行間48 / #0B56A2 / 太字 */
.ex-symptom__result {
	font-size: 22px;
	line-height: 1.2;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	text-align: center;
}
/* 2つ以上チェックが入ったとき（ワイヤー 2c「2つ以上で強調表示」）。
 * 黄色の引き方は「最大◯万円」と同じ。文字だけの幅に敷きたいので span に掛ける。 */
.ex-symptom__result span {
	background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 0;
	transition: background-size .2s ease;
}
.ex-symptom__result.is-on span { background-size: 100% 12px; }

/* ---------------------------------------------------------------------
 * 9. よくあるご質問（Figma: Frame 52 1200×1323 / 間隔40）
 * ------------------------------------------------------------------- */
.ex-faq { display: flex; flex-direction: column; gap: 40px; }
.ex-faq__list { display: flex; flex-direction: column; gap: 40px; }
/* 1問: 1200×179 / 下余白20 / 間隔20 / 角丸20 / 白 */
.ex-faq__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 20px;
	border-radius: 20px;
	background: #fff;
}
/* 問い: padding 0 40 / 間隔20 / 横。「Q」は Geist 700 54px・行間97.2・#0B56A2。
 * 問いと答えのあいだに #C3E1FF の2pxの線が入る。 */
.ex-faq__q {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 12px 20px;
	border-bottom: 2px solid var(--fig-blue-30);
	/* 問いの部分だけ、うすいグレーの四角を24px間隔で並べた模様が敷いてある。
	 * Figma の「パターン塗り」で中身は API から取れないため、Figma で書き出した画像を測って作った。
	 * 四角は1辺4px・#EBEBEB で、問いの枠の左上から x8・y-0.5 の位置に始まる（2026-10-11 実測）。 */
	background: repeat 0 0 / 24px 24px url("../img/bg-dots-gray.png?v=20261011b");
}
.ex-faq__mark {
	flex: none;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 36px;
	line-height: 1.5;
	color: var(--fig-blue-60);
}
/* 質問文: 26px / 行間46.8 / #0B56A2 / 太字 */
.ex-faq__title {
	font-size: 18px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 答え: 22px / 行間39.6 / #364259 / 太さ500 */
.ex-faq__a {
	padding: 0 20px;
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* =====================================================================
 * PC（Figma の 1440 幅）
 * ここから下の数値は Figma の定義値そのもの。コーポレートサイトと同じく画面幅を3段階に分ける予定。
 * 機種カード・総額の品目と計算例・お問い合わせ欄・症状は、600〜1023 では文字が収まらないので
 * 中身をスマホの並べ方にし、列の数だけ別に決めている（このファイルの末尾。2026-10-12 jojiさんと決定）。
 *   〜599     スマホ（上の指定）
 *   600〜1023 狭めの PC。PC の配置のまま比例して縮め、文字には下限を付ける
 *   1024〜    Figma どおりの PC。1440 未満は比例して縮み、1440 以上は Figma の値で止まる
 * 寸法は「Figma の値 × var(--u)」で書く。--u は 1424 以上で 1px、それより狭いと画面幅に比例する。
 * 基準を 1440 ではなく 1424 にしているのは、100vw がスクロールバー（最大16px程度）の幅を除いた値になるため。
 * 1440 にすると、幅1440の画面でもスクロールバーの分だけ全体が縮んで Figma とずれる。
 * 文字は max(下限 × var(--ff), 値 × var(--u))。--ff は全幅で 1px（tokens.css）。
 * 下限はコーポレートサイトの値（16/18/20→14、24→16）に合わせて「値の2/3（14未満にはしない）」。
 * 2px 以下の値（線の太さなど）と字間は縮めない。
 * ===================================================================== */
/* --u と --ff の定義は全ページで使うので tokens.css に移した（2026-10-12）。 */
@media (min-width: 600px) {
	/* 内容幅の枠（.wrap）の比例は全ページ共通なので base.css にある（1024 以上は 1200＋左右28、600〜1023 は左右24）。 */

	/* 本文の並び: 上下余白60 / 要素間100。上には Frame 20 の間隔32を足す。 */
	.ex-contents { gap: calc(100 * var(--u)); padding-block: calc(92 * var(--u)) calc(60 * var(--u)); }

	/* Figma の Frame 20 は「ヘッダー／パンくず／FV／実績帯／CTA／本文」を
	 * 一律32pxの間隔で縦に並べている。それぞれの上に32pxを持たせて再現する（FV の32は components.css の .hero--page）。 */
	.cta-y { padding-block: calc(32 * var(--u)) 0; }
	/* ただし本文の中にもう一度出てくる CTA は Frame 20 の並びではなく
	 * contents（間隔100）の子なので、この32pxは付けない。
	 * 付けたままだと下の CTA だけ33px下がる。 */
	.ex-contents .cta-y { padding-block: 0; }

	/* --- FV（v2）: 共通の形は hero-v2.css。背景の写真だけ交換ページ固有 --- */
	/* 背景は Figma から文字を抜いて書き出した 2400×1330（グラデーション・写真40%・blue-60 を焼き込み済み）。
	 * 2026-10-12 に一度外したが、600〜1023 の比率を PC にそろえたので同日戻した（jojiさんの指示）。
	 * 600〜1023 はカードが PC（1200×665）より縦長になるので、縦横比を保ったまま右に寄せ、左の青い部分を切る。 */
	.hero--ex .hero__box { background: var(--fig-blue-60) url("../img/hero-ex-bg.webp") no-repeat right center / cover; }
	/* パンくずは FV の下（Figma の Frame 20 は ヘッダー → FV → パンくず → 本文 を間隔32で縦に並べる）。
	 * パンくず 1200×17。FV の下端から「人気機種の価格例」の上端までは 32 + 17 + 32 + 60 = 141。
	 * パンくず自体の指定は全ページ共通なので pages.css にある。本文の上余白（92）は上の .ex-contents。 */
	/* v2 のボタンは高さ77（v1 は73）。全幅の帯は個別に決めている。 */


	/* v2 の見出しバー（title）は角丸100の完全なピル形 */
	.ex-contents .sec-label { border-radius: calc(100 * var(--u)); }
	/* 見出しのピル（base.css の PC 用の値）も比例させる。固定のままだと 600〜1023 で文字が2行に割れる。 */
	.ex-contents .sec-label { min-height: calc(75 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)); font-size: max(calc(24 * var(--ff)), calc(36 * var(--u))); line-height: max(calc(28.66667 * var(--ff)), calc(43 * var(--u))); }
	.ex-contents .sec-label--tall { min-height: calc(84 * var(--u)); line-height: max(calc(34.66667 * var(--ff)), calc(52 * var(--u))); }
	.ex-contents .sec-label::before,
	.ex-contents .sec-label::after { content: ""; flex: 0 0 calc(72 * var(--u)); }
	.ex-contents .sec-label::before { margin-right: calc(31 * var(--u)); }
	.ex-contents .sec-label::after  { margin-left: calc(31 * var(--u)); }

	/* --- 2. 全メーカー --- */
	/* Figma（Desktop_v2 / Frame 126）: 1220×660・余白60・縦に間隔40・角丸40。
	 * 見出し 46px/67px・本文 20px/32px（どちらも幅600）・ボタン2つは間隔20。 */
	.ex-makers__box { display: flex; flex-direction: column; gap: calc(40 * var(--u)); padding: calc(60 * var(--u)); border-radius: calc(40 * var(--u)); }
	/* Figma の Frame 126 は 1220×660（本文幅1200より左右10pxずつ広い）。 */
	.ex-makers__box { margin-inline: calc(-10 * var(--u)); }
	/* 背景は Figma から文字を抜いて書き出した 2440×1320（青→透明のグラデーション・写真60%・blue-40 を焼き込み済み）。 */
	.ex-makers__box { background: var(--fig-blue-40) url("../img/bg-makers.webp") no-repeat center / cover; }
	.ex-makers__title { width: calc(600 * var(--u)); font-size: max(calc(31 * var(--ff)), calc(46 * var(--u))); line-height: max(calc(45.15217 * var(--ff)), calc(67 * var(--u))); }
	.ex-makers__text { width: calc(600 * var(--u)); max-width: none; margin-top: 0; font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: max(calc(22.4 * var(--ff)), calc(32 * var(--u))); }
	.ex-makers__btns { gap: calc(20 * var(--u)); margin-top: 0; }
	/* 白ボタンは枠線も白（Figma: 塗り white・線 white 2px 内側）。 */
	.ex-makers .fbtn--line-dark { border-color: #fff; }

	/* --- 3. 総額に含まれるもの --- */
	.ex-total { gap: calc(40 * var(--u)); }
	.ex-total__catch { font-size: max(calc(39 * var(--ff)), calc(58 * var(--u))); line-height: max(calc(56.48276 * var(--ff)), calc(84 * var(--u))); }
	/* Figma Frame 127: 見出し84 ＋ 間隔12 ＋ 補足35 ＝ 131 */
	.ex-total__sub { margin-top: calc(12 * var(--u)); font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(23.33333 * var(--ff)), calc(35 * var(--u))); }
	/* Figma: 注意書きは Medium 18・行間180%（太字の箇所だけ Bold）。1つ目の文字ブロックは4行で高さ128。 */
	.ex-notes { gap: 0; font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: max(calc(24.88889 * var(--ff)), calc(32 * var(--u))); font-weight: var(--fw-medium); letter-spacing: -0.06px; }
	/* Figma（現行）: 注意書きの枠は X 122.5・幅 1195（内容幅1200の左端より2.5px右）。 */
	.ex-notes { margin-left: calc(2.5 * var(--u)); max-width: calc(1195 * var(--u)); }
	/* Figma: 注意書きは2つの文字ブロック。1つ目 高さ128（行間180%）、2つ目 高さ58（行間160%）、間隔40。 */
	.ex-notes__last { margin-top: calc(40 * var(--u)); line-height: calc(29 * var(--u)); letter-spacing: 0; }



	/* --- 3. 交換工事の流れ --- */
	/* Figma の4つは「文字の幅で決まる可変幅の列」を間隔50で並べたもので、
	 * 幅は 200 / 234 / 200 / 207 とばらばら（円はどれも200で、各列の中央にある）。
	 * 4列を200px固定にすると円の位置が最大21pxずれるので、Figma の幅をそのまま書く。
	 * 合計 200+234+200+207+50×3 = 991 を1200の中で中央（左に104.5）。 */
	.ex-flow__steps { grid-template-columns: calc(200 * var(--u)) calc(234 * var(--u)) calc(200 * var(--u)) calc(207 * var(--u)); justify-content: center; gap: calc(50 * var(--u)); }
	/* 円と円をつなぐ帯。1つ目の円の中心から4つ目の円の中心まで。
	 *   円1の中心 = 104.5 + 100 = 204.5
	 *   円4の中心 = 104.5 + 784 + 3.5 + 100 = 992（右端から208）
	 * 縦位置は書き出し画像の実測で、Frame38 の上から89px（JSON の 107 は誤り）。 */
	.ex-flow__steps::before {
		content: "";
		position: absolute;
		top: calc(89 * var(--u));
		left: calc(204.5 * var(--u));
		right: calc(208 * var(--u));
		height: calc(36 * var(--u));
		background: var(--fig-blue-30);
		z-index: 0;
	}
	.ex-flow__step { position: relative; z-index: 1; gap: calc(12 * var(--u)); }
	.ex-flow__icon { width: calc(200 * var(--u)); height: calc(200 * var(--u)); }
	/* Figma の枠は 62 / 36 / 36（間隔7）で合計148。 */
	/* Geist の字幅が Figma より狭く、枠51に対し1.2px足りない。 */
	.ex-flow__no   { font-size: max(calc(29 * var(--ff)), calc(44 * var(--u))); line-height: max(calc(40.86364 * var(--ff)), calc(62 * var(--u))); letter-spacing: 0.6px; }
	.ex-flow__name { font-size: max(calc(17 * var(--ff)), calc(26 * var(--u))); line-height: max(calc(23.53846 * var(--ff)), calc(36 * var(--u))); }
	.ex-flow__note { font-size: max(calc(17 * var(--ff)), calc(26 * var(--u))); line-height: max(calc(23.53846 * var(--ff)), calc(36 * var(--u))); }

	/* --- 4. お支払い方法: components.css へ移した --- */

	/* --- 6. 補助金: components.css へ移した --- */

	/* --- 7. 施工事例 --- */
	/* 背景の模様は 1440×838 に合わせて作ってあるので、この幅のときだけ敷く。
	 * 幅が足りない画面では高さが変わって位置が合わなくなるため、地の色だけにする。 */
	.ex-cases {
		padding-block: calc(80 * var(--u));
		background-image: url("../img/cases-bg.jpg");
		background-position: center top;
		background-repeat: no-repeat;
		background-size: calc(1440 * var(--u)) calc(838 * var(--u));
	}
	.ex-cases__track { gap: calc(32 * var(--u)); }
	/* カードの幅は387（書き出し画像で白い箱の左右を測った値）。間隔32と合わせて
	 * 1枚あたり419px送る。388にすると6枚で5pxずれて、右のカードが合わなくなる。 */
	/* Figma（現行）: 事例1つ（Group 4）は 387×450。白いカードは上から55.08・幅388（左右に0.5はみ出す）・高さ395。
	 * 「Case」の文字は左17.83・上0（枠 170×79）。 */
	.ex-case { width: calc(387 * var(--u)); padding-top: calc(55.08 * var(--u)); }
	.ex-case__inner { margin-inline: -0.5px; }
	/* 写真の枠は 幅いっぱい×227（比率で出すと 388幅で 227.6 になり、カードが0.6px伸びる）。 */
	.ex-case__thumb { aspect-ratio: auto; height: calc(227 * var(--u)); }
	/* Figma の枠は170（Case01）。Geist の字幅ぶんを字間で戻す。 */
	.ex-case__no { font-size: max(calc(29 * var(--ff)), calc(44 * var(--u))); line-height: max(calc(52.2 * var(--ff)), calc(79.2 * var(--u))); left: calc(17.83 * var(--u)); letter-spacing: 0.2px; }
	.ex-case__body { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u)); gap: calc(8 * var(--u)); }
	.ex-case__area { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: max(calc(25.2 * var(--ff)), calc(36 * var(--u))); }
	.ex-case__title { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: max(calc(25.2 * var(--ff)), calc(36 * var(--u))); }

	/* --- 9. FAQ --- */
	/* Figma（現行）: タイトルのピルも質問カードも幅1220。内容幅1200より10pxずつ外へ出る。 */
	.ex-faq > .sec-label,
	.ex-faq__list { margin-inline: calc(-10 * var(--u)); }
	.ex-faq__list { gap: calc(40 * var(--u)); }
	.ex-faq__item { gap: calc(20 * var(--u)); padding-bottom: calc(20 * var(--u)); }
	.ex-faq__q { padding: 0 calc(40 * var(--u)); gap: calc(20 * var(--u)); align-items: center; min-height: calc(99 * var(--u)); }
	/* Figma の「Q」の枠は97。 */
	.ex-faq__mark { font-size: max(calc(36 * var(--ff)), calc(54 * var(--u))); line-height: max(calc(64.66667 * var(--ff)), calc(97 * var(--u))); }
	.ex-faq__title { font-size: max(calc(17 * var(--ff)), calc(26 * var(--u))); line-height: max(calc(30.6 * var(--ff)), calc(46.8 * var(--u))); }
	/* Figma の答えの枠は40。 */
	.ex-faq__a { padding: 0 calc(40 * var(--u)); font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: max(calc(27.27273 * var(--ff)), calc(40 * var(--u))); }
}


/* 機種カード（2026-10-12 jojiさんと決定）。600〜1023 も PC と同じ横長のカード（Figma 580）を1列で並べる。
 * 寸法は var(--mu)。1024 以上は他と同じ --u（画面幅に比例）、600〜1023 はカード1枚の幅に比例
 * （580 入る幅なら Figma の値そのまま、入らないときだけ縮む。100cqi は .ex-models__grid の幅）。 */
@media (min-width: 1024px) { .ex-models { --mu: var(--u); } }
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ex-models { --mu: 1px; }
	.ex-models__grid { container-type: inline-size; }
	.ex-model { --mu: min(1px, 100cqi / 580); }
}
@media (min-width: 600px) {
	/* --- 1. 人気機種 --- */
	.ex-models { gap: calc(40 * var(--mu)); }
	/* Figma（現行）: ピルは「総額に含まれるもの」だけ高さ84（sec-label--tall）、ほかは75（base.css の既定）。 */
	/* カード 580 を2列、間隔40 */
	.ex-models__grid { grid-template-columns: repeat(2, calc(580 * var(--mu))); justify-content: center; gap: calc(44 * var(--mu)) calc(40 * var(--mu)); }
	/* Figma: Noto Sans JP Medium 18px・行間180%・字間0・中央。リンクは blue-40。
	 * 枠は2行で高さ64（1行32）。32.4 だと0.8px長くなって、以降が全部ずれる。 */
	.ex-models__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--mu))); line-height: max(calc(24.88889 * var(--ff)), calc(32 * var(--mu))); }
	.ex-model { padding: calc(22 * var(--mu)) calc(26 * var(--mu)) calc(24 * var(--mu)); gap: calc(8 * var(--mu)); }
	.ex-model__maker { --s: 1; }
	/* 600〜1023 は文字の下限で横に収まらないことがあるので折り返す（1024 以上では1行に収まる）。 */
	.ex-model__badges { gap: calc(12 * var(--mu)); flex-wrap: wrap; }
	/* グレードバッジ 187×34 / 容量バッジ 105×34 */
	.ex-model__grade { height: calc(34 * var(--mu)); padding: 0 calc(12 * var(--mu)); gap: calc(8 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(20 * var(--mu))); }
	.ex-model__grade::before { width: calc(27 * var(--mu)); height: calc(20 * var(--mu)); }
	.ex-model__cap { height: calc(34 * var(--mu)); padding: 0 calc(20 * var(--mu)); font-size: max(calc(16 * var(--ff)), calc(24 * var(--mu))); border-radius: calc(40 * var(--mu)); }
	.ex-model__no { margin-top: calc(10 * var(--mu)); margin-bottom: 2px; font-size: max(calc(17 * var(--ff)), calc(26 * var(--mu))); line-height: max(calc(24.84615 * var(--ff)), calc(38 * var(--mu))); }
	.ex-model__body { position: relative; flex-direction: row; gap: 0; }
	.ex-model__photo { order: 0; }
	.ex-model__spec { width: calc(333 * var(--mu)); flex: none; gap: calc(6 * var(--mu)); }
	.ex-model__photo { position: absolute; right: 0; top: calc(-3 * var(--mu)); width: calc(180 * var(--mu)); }
	.ex-model__tag { padding: calc(5 * var(--mu)) calc(16 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(16 * var(--mu))); line-height: max(calc(19.25 * var(--ff)), calc(22 * var(--mu))); }
	.ex-model__row { min-height: calc(54 * var(--mu)); }
	.ex-model__lbl { font-size: max(calc(14 * var(--ff)), calc(16 * var(--mu))); line-height: max(calc(19.25 * var(--ff)), calc(22 * var(--mu))); }
	.ex-model__val { gap: calc(6 * var(--mu)); }
	.ex-model__val b { font-size: max(calc(19 * var(--ff)), calc(28 * var(--mu))); line-height: max(calc(27.14286 * var(--ff)), calc(40 * var(--mu))); }
	.ex-model__val i { font-size: max(calc(14 * var(--ff)), calc(16 * var(--mu))); }
	.ex-model__val small { font-size: max(calc(12 * var(--ff)), calc(12 * var(--mu))); }
	.ex-model__row--subsidy { min-height: calc(52 * var(--mu)); margin-top: calc(3 * var(--mu)); padding: 0 calc(12 * var(--mu)); }
	/* 実質価格の帯: 67（v1 と同じ組み方） */
	.ex-model__total { padding: calc(4 * var(--mu)) calc(16 * var(--mu)); gap: calc(16 * var(--mu)); }
	.ex-model__total-label { font-size: max(calc(14 * var(--ff)), calc(20 * var(--mu))); line-height: max(calc(16.8 * var(--ff)), calc(24 * var(--mu))); }
	.ex-model__total-num   { font-size: max(calc(32 * var(--ff)), calc(48 * var(--mu))); transform: translateY(calc(-8.8 * var(--mu))); }
	.ex-model__total-unit small { font-size: max(calc(14 * var(--ff)), calc(14 * var(--mu))); line-height: max(calc(25.2 * var(--ff)), calc(25.2 * var(--mu))); }
	.ex-model__total-unit span  { font-size: max(calc(17 * var(--ff)), calc(26 * var(--mu))); line-height: max(calc(30.6 * var(--ff)), calc(46.8 * var(--mu))); margin-top: calc(-13 * var(--mu)); }
	.ex-model__arrow { --as: 1; margin-block: 2px; }
	.ex-model__note { margin-top: calc(4 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(14 * var(--mu))); line-height: max(calc(20 * var(--ff)), calc(20 * var(--mu))); }
	.ex-model__btns { gap: calc(12 * var(--mu)); margin-top: calc(4 * var(--mu)); }
	.ex-model__btn { min-height: calc(52 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(20 * var(--mu))); }

	/* --- 1b. 機種カード（Figma v2 のデザインモードの値）---
	 * カード 580×597 / padding 24 / 縦 gap 10 / 角丸24 / 枠 blue-30 2px。
	 * 縦の並び: ロゴ段38 → 型番＋仕様 290 → 三角23 → 実質価格の帯67 → 注記26 → ボタン53。 */
	.ex-model { padding: calc(24 * var(--mu)); gap: calc(10 * var(--mu)); border-radius: calc(24 * var(--mu)); }
	/* ロゴは縮まない大きさで描いているので、600〜1023 で収まらないときはバッジを次の行へ送る。 */
	.ex-model__head { min-height: calc(38 * var(--mu)); flex-wrap: wrap; row-gap: 8px; }
	.ex-model__cap { padding: 0 calc(24 * var(--mu)); }
	/* 型番: Bold 26 / 行間180%（47）/ gray-70。型番と仕様の間は8（カードの gap 10 から 2 戻す）。 */
	.ex-model__no { margin: 0; font-size: max(calc(17 * var(--ff)), calc(26 * var(--mu))); line-height: max(calc(30.73077 * var(--ff)), calc(47 * var(--mu))); }
	.ex-model__body { margin-top: -2px; }
	.ex-model__spec { width: calc(333 * var(--mu)); gap: calc(5 * var(--mu)); }
	/* 特徴: 333×56 / padding 6 20 / 角丸8 / blue-20 / 文字 Bold 16・行間140%・gray-70 */
	.ex-model__tag { padding: calc(6 * var(--mu)) calc(20 * var(--mu)); border-radius: calc(8 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(16 * var(--mu))); line-height: max(calc(19.25 * var(--ff)), calc(22 * var(--mu))); }
	/* 価格の行 333×54。ラベル Bold 18・行間140%。金額 Bold 30（円 20 ／ 税込 13・行間180%）間隔8 */
	.ex-model__row { min-height: calc(54 * var(--mu)); }
	.ex-model__lbl { font-size: max(calc(14 * var(--ff)), calc(18 * var(--mu))); line-height: max(calc(19.6 * var(--ff)), calc(25.2 * var(--mu))); }
	.ex-model__val { gap: calc(9 * var(--mu)); align-items: center; }
	.ex-model__val b { font-size: max(calc(20 * var(--ff)), calc(30 * var(--mu))); line-height: max(calc(36 * var(--ff)), calc(54 * var(--mu))); }
	.ex-model__val i { font-size: max(calc(14 * var(--ff)), calc(20 * var(--mu))); line-height: max(calc(25.2 * var(--ff)), calc(36 * var(--mu))); }
	.ex-model__val small { font-size: max(calc(13 * var(--ff)), calc(13 * var(--mu))); line-height: max(calc(23 * var(--ff)), calc(23 * var(--mu))); }
	.ex-model__val small { position: relative; top: -2px; }
	/* 補助金の行: padding 0 12 / 角丸8 / orange 10% */
	.ex-model__row--subsidy { margin-top: 0; min-height: calc(54 * var(--mu)); padding: 0 calc(12 * var(--mu)); border-radius: calc(8 * var(--mu)); }
	/* 写真 185×189 は、型番の左上を基準に x343・y50（型番〜仕様の枠の左上から） */
	.ex-model__photo { left: calc(343 * var(--mu)); right: auto; top: calc(-5 * var(--mu)); width: calc(185 * var(--mu)); }
	.ex-model__arrow { margin-block: 0; }
	/* 帯 528×67 / padding 16 4 / 間隔16 / 角丸8 */
	.ex-model__total { border-radius: calc(8 * var(--mu)); }
	/* 注記: Medium 16 / 行間160%（26）/ gray-50 */
	.ex-model__note { margin: 0; font-size: max(calc(14 * var(--ff)), calc(16 * var(--mu))); line-height: max(calc(22.75 * var(--ff)), calc(26 * var(--mu))); }
	/* ボタン 258×53: padding 12 20 / 角丸100 / Bold 20（行間 自動29）/ 間隔12 */
	.ex-model__btns { gap: calc(12 * var(--mu)); margin-top: 0; }
	.ex-model__btn { min-height: calc(53 * var(--mu)); padding: calc(12 * var(--mu)) calc(20 * var(--mu)); font-size: max(calc(14 * var(--ff)), calc(20 * var(--mu))); line-height: max(calc(20.3 * var(--ff)), calc(29 * var(--mu))); }
	/* 行の間隔は 40（列は 40 のまま）。カード高さは 597 に合わせてある。 */
	.ex-models__grid { gap: calc(40 * var(--mu)); }

}
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ex-models__grid { grid-template-columns: minmax(0, 580px); gap: 24px; }
}

/* 機種カード・総額の品目と計算例・症状は、1024 以上だけ Figma の並べ方にする。
 * 600〜1023 ではスマホの中身の並べ方を使い、下の「600〜1023」の指定で列を決める。 */
@media (min-width: 1024px) {
	/* --- 3. 総額に含まれるもの（品目と計算例） --- */
	.ex-cost2 { margin-top: calc(22 * var(--u)); display: grid; grid-template-columns: calc(533 * var(--u)) calc(129 * var(--u)) calc(533 * var(--u)); width: calc(1195 * var(--u)); margin-inline: auto; align-items: start; gap: 0; }
	.ex-cost2__plus { align-self: center; justify-self: center; margin-top: 0; transform: none; font-size: max(calc(55 * var(--ff)), calc(82 * var(--u))); line-height: max(calc(79.81707 * var(--ff)), calc(119 * var(--u))); }
	.ex-cost2__tag { margin-bottom: calc(40 * var(--u)); font-size: max(calc(17 * var(--ff)), calc(26 * var(--u))); line-height: max(calc(24.84615 * var(--ff)), calc(38 * var(--u))); }
	.ex-cost2__box { padding: calc(40 * var(--u)); }
	.ex-cost2__name { padding: calc(4 * var(--u)) calc(28 * var(--u)); font-size: max(calc(21 * var(--ff)), calc(32 * var(--u))); line-height: max(calc(30.1875 * var(--ff)), calc(46 * var(--u))); border-radius: calc(100 * var(--u)); }
	.ex-cost2__list { gap: calc(20 * var(--u)); }
	.ex-cost2__col:last-child .ex-cost2__list { gap: calc(11 * var(--u)); }
	.ex-cost2__col:last-child .ex-cost2__guard { margin-top: calc(11 * var(--u)); }
	.ex-cost2__item { gap: calc(20 * var(--u)); }
	.ex-cost2__img { width: calc(230 * var(--u)); height: calc(140 * var(--u)); }
	/* Figma は1つの文字（233幅）の中で 24px と 18px を混ぜ、行間は「自動」（Noto Sans JP で約1.448）。間隔の指定は無い。 */
	.ex-cost2__text { gap: 0; width: calc(233 * var(--u)); }
	.ex-cost2__text b { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: 1.448; }
	.ex-cost2__text small { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: 1.448; }
	/* Figma: 「自社独自の」22px・「10」26px・「年工事保証」22px、行間140% */
	.ex-cost2__guard { margin-top: calc(20 * var(--u)); padding: calc(10 * var(--u)) 0; border-radius: calc(8 * var(--u)); font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: 1.4; gap: calc(10 * var(--u)); }
	.ex-cost2__guard em { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.ex-cost2__guard em b { font-size: max(calc(17 * var(--ff)), calc(26 * var(--u))); font-weight: inherit; }
	.ex-cost2__guard:not(.ex-cost2__guard--own) { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: 1.4; padding-block: calc(10 * var(--u)); min-height: calc(54 * var(--u)); box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

	.ex-eg { position: relative; margin-top: calc(22 * var(--u)); }
	.ex-eg__title { position: absolute; left: 0; right: 0; top: calc(-31 * var(--u)); z-index: 1; font-size: max(calc(21 * var(--ff)), calc(31 * var(--u))); line-height: max(calc(37.93548 * var(--ff)), calc(56 * var(--u))); }
	.ex-eg__box { width: calc(1195 * var(--u)); margin-inline: auto; padding: calc(50 * var(--u)) calc(40 * var(--u)); border-radius: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.ex-eg__cols { display: grid; grid-template-columns: calc(529 * var(--u)) 1fr calc(457 * var(--u)); align-items: start; gap: 0; }
	.ex-eg__plus { align-self: center; justify-self: center; margin: 0; font-size: max(calc(55 * var(--ff)), calc(82 * var(--u))); line-height: max(calc(79.81707 * var(--ff)), calc(119 * var(--u))); }
	.ex-eg__panel { padding: calc(40 * var(--u)); }
	/* Figma: 行の間隔16、上下余白40。行そのものには余白を持たせない（補助金の行だけ上下6）。 */
	.ex-eg__panel--product { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
	/* Figma: 工事費側は縦に間隔11・余白40・角丸24 */
	.ex-eg__panel--work { padding: calc(40 * var(--u)); display: flex; flex-direction: column; gap: calc(11 * var(--u)); }
	.ex-eg__panel { border-radius: calc(24 * var(--u)); }
	.ex-eg__cols { align-items: center; }
	.ex-eg__panel--work .ex-cost2__guard { padding-block: calc(12 * var(--u)); }
	/* Figma（デザインモード）: ピルの文字 Bold 24・高さ29。ピルは 文字の上下3の余白で高さ35。 */
	.ex-eg__tag { padding: calc(4 * var(--u)) calc(28 * var(--u)); font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(19.33333 * var(--ff)), calc(29 * var(--u))); }
	/* ラベル Bold 20・高さ24、金額 Bold 24・高さ29（合計行の金額だけ高さ35） */
	.ex-eg__row { padding: 0; font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: max(calc(16.8 * var(--ff)), calc(24 * var(--u))); }
	.ex-eg__row b { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(19.33333 * var(--ff)), calc(29 * var(--u))); }
	.ex-eg__row--sum b { line-height: calc(35 * var(--u)); }
	/* Figma: 文字ブロック幅208 = 「製品価格」20px×4(80) + 「（補助金適用後）」8文字×16 (128) */
	.ex-eg__row small { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.ex-eg__row--sum small { display: inline; }
	.ex-eg__row--subsidy { margin-block: 0; padding: calc(6 * var(--u)) calc(12 * var(--u)); }
	.ex-eg__row--sum { margin-top: 0; padding-top: calc(15 * var(--u)); }
	/* Figma: 工事一式（Bold 20）と（エコキュート→エコキュート）（16）は1つの文字、行間160%、全体 136×83。 */
	.ex-eg__work { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: 1.6; }
	/* 補助文は 8文字で幅136 → 1文字17px。2行ぶんの高さは (83−32)/2 ≒ 25.5 → 行間150%。 */
	.ex-eg__work small { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); line-height: 1.5; }
	.ex-eg__work b { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: 1.6; }
	.ex-eg__panel .ex-cost2__guard { margin-top: 0; padding: calc(10 * var(--u)) 0; font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: 1.4; }
	.ex-eg__total { gap: 0; padding: calc(8 * var(--u)) calc(40 * var(--u)); height: calc(70 * var(--u)); box-sizing: border-box; border-radius: calc(24 * var(--u)); }
	.ex-eg__total span { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: max(calc(27.27273 * var(--ff)), calc(40 * var(--u))); margin-right: calc(20 * var(--u)); }
	.ex-eg__total b { font-size: max(calc(20 * var(--ff)), calc(30 * var(--u))); line-height: max(calc(36 * var(--ff)), calc(54 * var(--u))); letter-spacing: .45px; }
	/* 「345,000円〜」180 ＋ 「（税込）」4文字で 76（1文字19px）＝ 全体 256。間に隙間は無い。 */
	.ex-eg__total small { font-size: max(calc(14 * var(--ff)), calc(19 * var(--u))); line-height: max(calc(39.78947 * var(--ff)), calc(54 * var(--u))); }

	/* --- 8. 症状 --- */
	/* Figma（現行）: タイトルのピルは 1220×84（内容幅1200より10pxずつ外へ出る。FAQのタイトルと同じ）。 */
	.ex-symptom > .sec-label { margin-inline: calc(-10 * var(--u)); }
	.ex-symptom { gap: calc(20 * var(--u)); }
	.ex-symptom__cols { gap: calc(12 * var(--u)) calc(40 * var(--u)); }
	/* Figma の枠は43。行間43.2だと3行で0.6px高くなる。 */
	.ex-symptom__item { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(28.66667 * var(--ff)), calc(43 * var(--u))); }
	.ex-symptom__illust { width: calc(304 * var(--u)); }
	/* Figma（現行）: 症状のまとまり（Frame 84 は 1220×481）の下から次の文までは 20（セクションの間隔）だけ。
	 * 以前あった下余白6pxを外すと、セクション全体の高さも Figma の 746 になる。 */
	.ex-symptom__result { font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(32.4 * var(--ff)), calc(48 * var(--u))); }

}

/* 「例えば…」の金額・数字の太さ。Figma はすべて Bold(700)。ブラウザ既定の b は 900 に見えるため明示する。 */
.ex-eg b, .ex-eg strong { font-weight: 700; }

@media (min-width: 1024px) {
	/* Figma の行は縦中央そろえ（ラベル24・金額29 → ラベルは上から2.5）。ベースラインそろえではない。 */
	.ex-eg__row { align-items: center; }
	.ex-eg__row span, .ex-eg__row small { line-height: calc(24 * var(--u)); }
}
@media (min-width: 1024px) {
	.ex-eg__row--sum > span { display: inline-flex; align-items: baseline; height: calc(24 * var(--u)); }
}
@media (min-width: 1024px) {
	/* Figma: 区切り線は高さ0の独立した線（y187）。合計の行は線の16下（y203）で、行自身に線や余白は持たない。 */
	.ex-eg__row--sum { position: relative; margin-top: calc(16 * var(--u)); padding-top: 0; border-top: 0; }
	.ex-eg__row--sum::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-16 * var(--u)); height: 1px; background: var(--fig-gray-70); }
}
@media (min-width: 1024px) {
	/* 取り消し線: Figma の線は文字の高さ29のうち上から約14px（線の中心）・太さ約2px。CSS の line-through は位置を動かせないので自前で引く。 */
	.ex-eg__row--list b { position: relative; text-decoration: none; }
	.ex-eg__row--list b::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(13 * var(--u)); height: 2px; background: currentColor; }
}
/* 箇条書きの記号: Figma の書き出し(3x)を測ると、塗りの三角 幅5.3×高さ5。左端0.3、文字の字面まで 6.7。
 * 縦は文の1行目の中央に置く（2026-10-12 jojiさんの指示。Figma では中央より1pxほど下）。
 * overflow: hidden で下端をベースラインの基準にし、漢字の中心（ベースラインから 0.38em 上）に三角の中心（下端から2.5）を合わせる。
 * em を文字の大きさに合わせるため font-size は親のまま。中の「▸」は5pxの枠に切られ、塗りと同じ色なので見えない。 */
.ex-notes__mk { display: inline-block; width: 6.7px; height: 5px; overflow: hidden; vertical-align: calc(0.38em - 2.5px); background: currentColor; clip-path: polygon(0 0, 0 100%, 5.3px 50%); }



/* =====================================================================
 * 600〜1023（狭めの PC）で、PC の並べ方では文字が収まらない所（2026-10-12 jojiさんと決定）
 *   機種カード … PC と同じ横長のカードを1列（2026-10-12 に2列から変更。指定は上の --mu のところ）
 *   総額の品目・計算例 … 中身はスマホの並べ方のまま、2列に並べる
 *   お問い合わせ欄 … 電話とフォームを左右2列（components.css の黄色のCTA帯。600〜999 だけ文字の下限を足している）
 *   症状 … 2列（PC と同じ。2026-10-12 に1列から変更）
 * 2列にすると比例で縮めた内容幅（600 で約500）では狭すぎるので、この幅だけ内容幅を左右24の余白で取る。
 * ===================================================================== */
@media (min-width: 600px) and (max-width: 1023.98px) {
	/* 内容幅（左右24）は base.css、FV（青いカード）の比例は components.css にある。 */

	/* --- 総額の品目: 「製品価格 ＋ 工事費」を左右に --- */
	.ex-cost2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0 8px; }
	.ex-cost2__plus { align-self: center; }
	.ex-cost2__box { padding: 36px 16px 20px; }
	.ex-cost2__img { width: 88px; height: 54px; }
	.ex-cost2__guard { gap: 6px; font-size: 14px; }

	/* --- 計算例: 「製品価格 ＋ 工事費」を左右に --- */
	.ex-eg__cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
	/* 金額は折り返さない（「165,000円〜」が「円〜」で割れていた）。ラベルの側を折り返す。 */
	.ex-eg__row b, .ex-eg__work b { white-space: nowrap; }

	/* --- 症状: PC と同じく2列（3つ ／ 2つ）。2026-10-12 jojiさんの指示で1列から変更 ---
	 * 幅600では2列の合計が内容幅を少し超えるので、折り返さずに並べ、長い項目は列の中で2行にする。 */
	.ex-symptom__cols { flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 12px 32px; }
	.ex-symptom__col { flex: 0 1 auto; min-width: 0; }
	/* 2行になるときは文節の切れ目で改行する（「かかるよう／になった」と割れていた）。 */
	.ex-symptom__item { word-break: auto-phrase; }
}

/* お問い合わせ欄（黄色の CTA）の 600〜999 の指定は、全ページで使うので components.css に移した（2026-10-12）。 */