/* =====================================================================
 * components.css — 共通部品（ヘッダー/フッター/ボタン/カード/CTA/バッジ）
 * ===================================================================== */

/* ---------- ボタン ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 22px; border-radius: var(--radius-pill);
	font-weight: var(--fw-bold); font-size: 14px; line-height: 1.3;
	color: #fff; background: var(--c-brand); transition: .2s; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--brand { background: var(--c-brand-deep); box-shadow: var(--shadow-cta); }
.btn--brand:hover { background: #082455; }
.btn--phone { background: var(--c-warm); }
.btn--phone:hover { background: var(--c-warm-deep); }
.btn--line { background: var(--c-line); }
.btn--lg { padding: 16px 28px; font-size: 16px; }
.btn--block { display: flex; width: 100%; }

/* ---------- ボタン（Figma: btn コンポーネント 4種） ----------
 * 高さ73 / padding 20px 40px / 間隔12 / 角丸80 / 文字 24px・行間28.8・太字
 * 矢印は Font Awesome 6 Free 900 の arrow-right（21×24）。SVG をマスクにして色を変える。
 *
 * 2026-09-05 に exchange.css から移した。デザインで定義されたボタンはこの4種だけで、
 * 交換ページ以外でも同じものを使う。 */
.fbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 28px;
	border-radius: 80px;
	font-size: 17px;
	line-height: 1.2;
	font-weight: var(--fw-bold);
	text-align: center;
	text-wrap: balance;      /* 見出し（.sec-label）と同じ。2行目に数文字だけ落ちないようにする */
	word-break: auto-phrase;
	overflow-wrap: anywhere; /* 文節が幅に収まらないときだけ、文節の中で折り返す */
	transition: filter .15s ease, transform .15s ease;
}
.fbtn:hover { transform: translateY(-2px); }
.fbtn::after {
	content: "";
	flex: none;
	width: 21px;
	height: 24px;
	background: currentColor;
	opacity: .8; /* Figma の矢印レイヤーは不透明度80% */
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
	mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
}
/* Figma のボタンは4種とも 2px の枠線つき（塗りと同じ色）。 */
.fbtn--fill-dark  { background: var(--fig-blue-60); color: #fff; border: 2px solid var(--fig-blue-60); }
.fbtn--fill-light { background: var(--fig-blue-40); color: #fff; border: 2px solid var(--fig-blue-40); }
.fbtn--line-dark  { background: #fff; color: var(--fig-blue-60); border: 2px solid var(--fig-blue-60); }
.fbtn--line-light { background: #fff; color: var(--fig-blue-40); border: 2px solid var(--fig-blue-40); }
/* ボタンの下に矢印を出さないもの（一覧への導線ではなく、その場の操作）。 */
.fbtn--noarrow::after { content: none; }

/* ボタンを中央に縦積みする箱。セクションの末尾に置く導線に使う。 */
.ex-btns { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* 横に並べるもの（2つ以上あるとき）。
 * 2026-09-08 に top.css から移した。TOP・エラーコード個別の2ページで使う。 */
.ex-btns--row { flex-direction: row; flex-wrap: wrap; justify-content: center; }

@media (min-width: 600px) {
	/* ボタン: 高さ73 / padding 20 40 / 間隔12 / 文字24px・行間28.8 */
	/* Figma のボタンは高さ73（余白20×2 ＋ 文字枠29 ＋ 枠線4）。
	 * 行間28.8だと72.8になって0.2px足りない。 */
	.fbtn { padding: calc(20 * var(--u)) calc(40 * var(--u)); gap: calc(12 * var(--u)); font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(19.33 * var(--ff)), calc(29 * var(--u))); }
}

/* ---------- 全幅セクション ----------
 * 画面いっぱいに広がるセクション（Figma で幅1440のもの）。
 * 内容幅1200 の流れの中から、左右に飛び出させる。
 * 100vw ではなく 100% ＋ 親のはみ出しで作ると、縦スクロールバーが
 * 常に出る環境（Windows 等）でも横スクロールが生まれない。
 * .ex-bleed は交換ページで使っている同じもの（名前だけ残してある）。 */
.bleed,
.ex-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* =====================================================================
 * ページ共通のレイアウト部品（2026-09-05）
 * ---------------------------------------------------------------------
 * 交換ページで確定した「面」の語彙を、他のページでも同じ数値で使うための入れ物。
 * TOP（2b）で作ったものを、修理TOP（2d）を作るときに共通へ上げた。
 * 使い分けは ~/journal/projects/sakabo/notes/2026-09-10_デザイン横展開の進め方.md §2。
 * ===================================================================== */

/* セクションの縦並び。交換ページの .ex-contents と同じ間隔。 */
.page-contents {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-block: 48px 32px;
}
/* CTA帯は自前で上下の余白を持っているので、並びの中では消す。 */
.page-contents .cta-y { padding-block: 0; }

/* セクションの中の並び（見出しバー → 中身 → ボタン）。 */
.sec-stack { display: flex; flex-direction: column; gap: 24px; }

/* 白い箱。交換ページの「お支払い方法」「症状チェック」と同じ作り。
 * 表・一覧・入力欄など、囲って見せるものに使う。 */
.panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
/* 箱の中や地の上に置く補足の1行。 */
.panel-note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	text-align: center;
}
.panel-note--left { text-align: left; }

/* 全幅の青＋水玉。交換ページの「人気機種」と同じ面。
 * **そのページの主役を1つだけ**載せる。 */
.dots-block {
	background: var(--fig-blue-40) repeat 0 0 / 24px 24px url("../img/bg-dots.png");
	padding-block: 40px;
}
.dots-block__inner { display: flex; flex-direction: column; gap: 24px; }

/* 全幅の水色＋上下のビル群。交換ページの「施工事例」と同じ面。 */
.cases-block {
	background-color: var(--fig-blue-30);
	background-image: url("../img/cases-bg-top.jpg"), url("../img/cases-bg-bottom.jpg");
	background-position: top center, bottom center;
	background-repeat: no-repeat, no-repeat;
	background-size: 1440px 80px, 1440px 80px;
	padding-block: 40px;
}
.cases-block__inner { display: flex; flex-direction: column; gap: 24px; }

/* ---------- お住まいの地域までの対応スピード（template-parts/area-map.php） ----------
 * Figma: Frame 42（898-733）。本体は Frame 71（898-735）1440×760 / 横並び・中央寄せ / 間隔0。
 * 左に文字の列（Frame 148 240×389 / 縦 / 間隔80）、右に地図（898-736 750×760）。
 * 文字はすべて #0B56A2・Noto Sans JP Bold。行の高さは Figma の枠の高さ（AUTO）÷ 文字の大きさ（28→34、40→48、70→84、18→22）。
 * スマホ（〜599）は Figma に無い。地図を幅の88%で右に寄せ、文字を地図の左下（県の形が無く、薄い円だけの所）に重ねる
 * （2026-10-12 jojiさんの指示）。文字と位置は地図の縮尺 --m（地図の幅 ÷ 750）で決め、地図と一緒に縮む。
 * 値は地図750の座標。文字の列は内容幅の左端・上400 から（行の高さの余白まで含めて、県の形に1画素も重ならない位置）。
 * 「最短即日対応」の大きさは、県の形の左端（y460〜660 で x230〜260）までの幅で決まる。注記はスマホだけ3行に分けて大きくする。
 * 文字の列は地図の下へ 118 はみ出すので、その分ボタンを下げる（本体の下の余白）。 */
.area-speed__body { --m: calc((100vw - var(--gutter) * 2) * .88 / 750); position: relative; display: flex; align-items: center; justify-content: flex-end; margin-bottom: calc(118 * var(--m)); }
.area-speed__text { position: absolute; z-index: 1; left: 0; top: calc(400 * var(--m)); display: flex; flex-direction: column; gap: calc(22 * var(--m)); }
.area-speed__block { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--m)); }
.area-speed__label,
.area-speed__value,
.area-speed__note { margin: 0; color: var(--fig-blue-60); font-weight: var(--fw-bold); }
.area-speed__label { font-size: calc(42 * var(--m)); line-height: 1.2143; }
/* 下線: Line 11 48×0・線4・中央揃え。線は前後の間隔の真ん中に乗るので、上下の余白を線の半分ずつ打ち消す */
.area-speed__bar { display: block; width: calc(58 * var(--m)); height: 3px; margin-block: -1.5px; background: var(--fig-blue-60); }
.area-speed__value { font-size: calc(52 * var(--m)); line-height: 1.2; white-space: nowrap; }
/* 「即日」だけ下線（Figma: 下線・太さと位置は自動） */
.area-speed__u { text-decoration: underline; }
/* 「7」: 70px・白・字間36%。前の「州」に字間83%（40px の 33.2）が付いている。
 * 円（Ellipse 3 85×85 / #0B56A2）は文字の後ろ。中心は「7」の左端から 19.3（字幅41.3の中央より1.3左）、縦は行の中心から +2.5（70px のとき）。 */
.area-speed__num {
	position: relative;
	z-index: 0;
	display: inline-block;
	margin-left: .4743em;
	margin-right: .36em;
	font-size: 1.75em;
	color: #fff;
}
.area-speed__num::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: .2757em;
	top: calc(50% + .0357em);
	width: 1.2143em;
	height: 1.2143em;
	border-radius: 50%;
	background: var(--fig-blue-60);
	transform: translate(-50%, -50%);
}
.area-speed__note { font-size: calc(36 * var(--m)); line-height: 1.2222; font-weight: var(--fw-medium); white-space: nowrap; }
.area-speed__map { width: 88%; }
.area-speed__map img { display: block; width: 100%; height: auto; }

/* ---------- よくあるご質問の見た目 ----------
 * 共通部品 template-parts/faq.php の中身は触らず、
 * 外側に .faq-design を付けたページだけ交換ページと同じ見た目にする。 */
.faq-design .faq { padding-block: 0; }
.faq-design .faq .wrap { padding-inline: 0; max-width: none; }
.faq-design .sec-head { margin-bottom: 24px; }
.faq-design .faq__list { display: flex; flex-direction: column; gap: 16px; max-width: none; margin: 0; }
.faq-design .faq__item {
	border: 0;
	border-radius: 20px;
	background: #fff;
	overflow: hidden;
}
/* 問い: うすいグレーの水玉を敷き、下に水色2pxの線。「Q.」は濃紺。 */
.faq-design .faq__q {
	padding: 14px 52px 14px 20px;
	background: repeat 0 0 / 24px 24px url("../img/bg-dots-gray.png?v=20261011b");
	border-bottom: 2px solid var(--fig-blue-30);
	font-size: 17px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.faq-design .faq__q::after { right: 20px; color: var(--fig-blue-60); font-size: 22px; }
.faq-design .faq__a {
	padding: 14px 20px 18px;
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 回答末尾の関連ページへのリンク（よくある質問ページの DB の回答だけにある）。
 * 白地に濃い青の枠の小さいピル。矢印は .fbtn と同じアイコン（2026-10-14 jojiさんが3案から A案）。 */
.faq-design .faq__link { margin-top: 12px; }
.faq-design .faq__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 16px 6px 20px;
	border: 2px solid var(--fig-blue-60);
	border-radius: 80px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	text-decoration: none;
}
.faq-design .faq__link a::after {
	content: "";
	flex: none;
	width: 13px;
	height: 15px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
	mask: no-repeat center / contain url("../img/icon-arrow-fa.svg");
}
/* 「よくある質問をすべて見る」のボタンは共通の .fbtn（template-parts/faq.php）。 */
.faq-design .faq__more { margin-top: 24px; }

@media (min-width: 600px) {
	.page-contents { gap: calc(88 * var(--u)); padding-block: calc(88 * var(--u)) calc(60 * var(--u)); }
	.sec-stack { gap: calc(40 * var(--u)); }
	.panel { padding: calc(40 * var(--u)); gap: calc(28 * var(--u)); }
	.panel-note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.dots-block { padding-block: calc(56 * var(--u)); }
	.dots-block__inner { gap: calc(32 * var(--u)); }
	.cases-block { padding-block: calc(72 * var(--u)); }
	.cases-block__inner { gap: calc(40 * var(--u)); }

	/* お住まいの地域までの対応スピード: Figma の横並び（文字の列＋地図750）を比例で縮める。 */
	.area-speed__body { justify-content: center; margin-bottom: 0; }
	.area-speed__text { position: static; gap: calc(80 * var(--u)); }
	.area-speed__sp { display: none; }
	.area-speed__block { gap: calc(13 * var(--u)); }
	.area-speed__label { font-size: max(calc(18.66667 * var(--ff)), calc(28 * var(--u))); }
	.area-speed__bar { width: calc(48 * var(--u)); height: 4px; margin-block: -2px; }
	.area-speed__value { font-size: max(calc(26.66667 * var(--ff)), calc(40 * var(--u))); }
	.area-speed__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.area-speed__map { flex: none; width: calc(750 * var(--u)); max-width: none; }

	.faq-design .faq__list { gap: calc(24 * var(--u)); }
	.faq-design .faq__q { padding: calc(14 * var(--u)) calc(64 * var(--u)) calc(14 * var(--u)) calc(32 * var(--u)); font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.faq-design .faq__q::after { right: calc(32 * var(--u)); font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.faq-design .faq__a { padding: calc(18 * var(--u)) calc(32 * var(--u)) calc(22 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.faq-design .faq__more { margin-top: calc(40 * var(--u)); }
	.faq-design .faq__link { margin-top: calc(14 * var(--u)); }
	.faq-design .faq__link a { gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(8 * var(--u)) calc(24 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
}

/* ---------- タグ / バッジ ---------- */
.tag { display: inline-block; font-size: 11px; font-weight: var(--fw-bold); padding: 2px 8px; border-radius: 4px; line-height: 1.6; }
.tag--badge { background: var(--c-badge); color: #fff; }
.tag--ok { background: var(--c-ok); color: #fff; }

/* ---------- リンク矢印 ---------- */
.link-arrow { color: var(--c-brand-deep); font-weight: var(--fw-bold); display: inline-block; padding: 4px 0; }
.link-arrow:hover { color: var(--c-brand); }

/* ---------- ヘッダー ---------- */
/* PC ではヘッダーの下にナビの青い線が付くので、灰色の境界線は SP のときだけ。
 * PC で両方出すと、ヘッダーが1px高くなって以降がすべて下へずれる。 */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--c-border); }
.site-header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }

/* ロゴ。SPでは高さを詰める。 */
.site-header__brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand { display: block; }
.brand picture { display: block; }
/* スマホ・タブレットのロゴ（2026-10-12 jojiさんと決定）。
 * キャッチ文は出さず、ロゴだけの画像（logo-mark.svg）を画面幅に合わせた大きさで出す。
 * 高さは 幅375で32・幅1023で48、そのあいだは画面幅に比例（以前はキャッチ文入りの画像を高さ34で固定）。
 * --header-h はドロワーの開始位置とアンカーの止まる位置に使うので、ヘッダーの高さ（ロゴ＋上下8。最低60）に合わせる。 */
:root {
	--logo-h: clamp(32px, 2.469vw + 22.74px, 48px);
	--header-h: max(60px, calc(var(--logo-h) + 16px));
}
.site-header__inner { padding-block: 8px; }
.brand__logo { width: auto; height: var(--logo-h); }
/* PC はキャッチ文入りのロゴ画像（logo.svg）を出す。--header-h は以前のまま。 */
@media (min-width: 1024px) {
	:root { --header-h: 60px; }
}

/* 電話とCTAはSPでは出さない（画面下の固定バーが担う）。 */
.site-header__contact { display: none; }
.site-header__tel { display: none; }
.gnav { display: none; }
.site-header__cta { display: none; }

/* ハンバーガー（2026-10-12 anshindo.site の開閉ボタンに合わせた）
 * 43×43・角丸5・白80%。線は幅19×2・上から10/16/22。下に「MENU」10px。
 * 開くと上下の線が×になり（幅13・±45°）、文字が「CLOSE」になる。
 * 中身・配置・動きは前のまま（アイコンだけ変えた）。 */
.drawer-toggle {
	position: relative; flex: none; margin-left: auto;
	width: 43px; height: 43px; padding: 0; border: 0; border-radius: 5px;
	background: rgba(255, 255, 255, .8); color: #1a1a1a; cursor: pointer;
}
.drawer-toggle__bar {
	position: absolute; left: 12px; width: 19px; height: 2px; border-radius: 5px;
	background: currentColor; transition: .4s;
}
.drawer-toggle__bar:nth-of-type(1) { top: 10px; }
.drawer-toggle__bar:nth-of-type(2) { top: 16px; }
.drawer-toggle__bar:nth-of-type(3) { top: 22px; }
.drawer-toggle::after {
	content: "MENU"; position: absolute; left: 0; right: 0; top: 27px;
	font-family: Arial, sans-serif; font-size: 10px; line-height: 1; text-align: center;
}
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-of-type(1) { left: 15px; width: 13px; transform: translateY(6px) rotate(-45deg); }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-of-type(2) { opacity: 0; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle__bar:nth-of-type(3) { left: 15px; width: 13px; transform: translateY(-6px) rotate(45deg); }
.drawer-toggle[aria-expanded="true"]::after { content: "CLOSE"; }

/* ---------- SPドロワー ---------- */
.drawer {
	position: fixed; top: 0; right: 0; z-index: 60; width: min(84vw, 340px); height: 100dvh;
	background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.18); overflow-y: auto; padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.drawer__list { display: grid; gap: 2px; margin-bottom: 20px; }
.drawer__list a { display: flex; align-items: center; gap: 8px; padding: 12px 4px; border-bottom: 1px solid var(--c-border); font-weight: var(--fw-bold); }
.drawer__cta { display: grid; gap: 10px; }
.drawer-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(15,25,45,.45); }
body.is-drawer-open { overflow: hidden; }
/* 開いている間はヘッダーをドロワーより手前に出し、メニューはヘッダーの下から始める。
 * ドロワーを画面の上端から出すと、閉じるボタン（≡）がドロワーの下に隠れて押せなかった（2026-10-11）。 */
body.is-drawer-open .site-header { z-index: 65; }
body.is-drawer-open .drawer { padding-top: calc(var(--header-h) + 16px); }

/* ---------- SP固定バー ---------- */
.sp-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1fr;
	background: #fff; box-shadow: 0 -4px 18px rgba(0,0,0,.12); padding-bottom: env(safe-area-inset-bottom);
}
/* 3つ並び（見積もり／LINE／電話）。幅が125pxずつしかないので、アイコンを上・文字を下に置く（2026-10-11）。 */
.sp-bar { grid-template-columns: repeat(3, 1fr); }
.sp-bar__btn {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	height: var(--spbar-h); color: #fff; text-align: center;
}
.sp-bar__label { font-size: 14px; line-height: 1.15; font-weight: var(--fw-bold); }
.sp-bar__label small { display: block; margin-top: 2px; font-size: 10px; font-weight: var(--fw-medium); opacity: .9; }
.sp-bar__btn--phone { background: var(--c-warm); order: 3; }
.sp-bar__btn--line { background: var(--c-line); order: 2; }
.sp-bar__btn--form { background: var(--c-brand-deep); order: 1; }
.sp-bar--phone-first .sp-bar__btn--phone { order: 1; }
.sp-bar--phone-first .sp-bar__btn--form { order: 3; }
/* アイコンは CTA カードと同じ形。色を文字色に合わせるためマスクで塗る。 */
.sp-bar__ico { flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; }
.sp-bar__ico--tel { -webkit-mask-image: url("../img/icon-tel-cta.svg"); mask-image: url("../img/icon-tel-cta.svg"); }
.sp-bar__ico--mail {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}
/* LINE は白い角丸の中に緑の文字。 */
.sp-bar__ico--line {
	display: grid; place-items: center; width: 24px; height: 20px; border-radius: 5px;
	background: #fff; -webkit-mask: none; mask: none;
	color: var(--c-line); font-size: 7px; font-weight: 900; letter-spacing: .02em;
}

/* ---------- フッター ---------- */
.site-footer { background: var(--c-brand-deep); color: #fff; padding-block: 44px 28px; }
.site-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
.fcol__title { font-size: 14px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.2); }
.fcol__list { display: grid; gap: 6px; }
.fcol__list a { font-size: 13px; opacity: .85; }
.fcol__list a:hover { opacity: 1; text-decoration: underline; }
.site-footer__bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); display: grid; gap: 12px; }
.fnav-legal { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fnav-legal a { font-size: 12px; opacity: .8; }
.copyright { font-size: 12px; opacity: .7; }
/* 見出しの中のボタン。PC では見出しのまま（押せない）、スマホでは開閉に使う。 */
.fcol__toggle { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }

/* スマホ版（2026-10-11 jojiさんと決定・案A）。
 * 先頭に会社名と電話番号。各グループは開閉式で、最初は閉じておく（高さ1039→約690）。
 * 閉じるのは main.js が .is-accordion を付けたときだけ。スクリプトが動かなくても中身は見える。 */
.fbrand { display: grid; justify-items: start; gap: 6px; margin-bottom: 24px; }
.fbrand__name { font-size: 16px; font-weight: var(--fw-bold); }
.fbrand__tel { font-family: var(--font-num); font-size: 28px; font-weight: 800; line-height: 1.2; }
.fbrand__hours { font-size: 12px; opacity: .8; }
@media (max-width: 1023.98px) {
	.site-footer { padding-block: 32px 24px; }
	.site-footer__cols.is-accordion { display: block; border-top: 1px solid rgba(255,255,255,.2); }
	.is-accordion .fcol { border-bottom: 1px solid rgba(255,255,255,.2); }
	.is-accordion .fcol__title { margin: 0; padding: 0; border: 0; }
	.is-accordion .fcol__toggle { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font-size: 15px; cursor: pointer; }
	.is-accordion .fcol__toggle::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
	.is-accordion .fcol__toggle[aria-expanded="true"]::after { content: "−"; }
	.is-accordion .fcol__list { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 0 4px 16px; }
	.is-accordion .fcol.is-closed .fcol__list { display: none; }
	.fcol__list a { font-size: 14px; }
}

/* ---------- PC ---------- */
@media (min-width: 600px) {
	.btn--mail { background: var(--c-brand); color: #fff; }
	.btn--mail:hover { background: var(--c-brand-mid); }
	.btn--line { background: var(--c-line); color: #fff; }
	.btn--line:hover { filter: brightness(.94); }
}

/* 固定バーとフッターは、ヘッダーと同じくタブレット（〜1023）までスマホの形にする（2026-10-12）。
 * main.js の開閉式の判定（1023.98）と対。片方だけ変えるとずれる。 */
@media (min-width: 1024px) {
	/* SP固定バーはSP専用。PCでは非表示＆本文下余白も解除 */
	.sp-bar { display: none; }
	body { padding-bottom: 0; }
	.site-footer__cols { grid-template-columns: repeat(5, 1fr); gap: calc(28 * var(--u)); }
	.fbrand { display: none; }
	.fcol__toggle { pointer-events: none; }
	.site-footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------- PC のヘッダー（1024以上） ----------
 * 2026-10-12 jojiさんの指示で、タブレット（〜1023）もスマホと同じヘッダー（ロゴ＋≡MENU のドロワー）にした。
 * 以前は 900 から PC のヘッダーに切り替えていた。画面幅の3段階（〜599／600〜1023／1024〜）は tokens.css の末尾を参照。
 * 固定バーとフッターは上の min-width: 1024px、ボタンの色は上の min-width: 600px で切り替える。 */
@media (min-width: 1024px) {
	/* ---------- ヘッダー（Figma API の定義値どおり 2026-09-04） ----------
	 * header 1440×220（現行の Figma / 2026-10-11 に再確認）= 上段150（余白上下20＋中身110）＋ ナビ70。
	 * 2026-10-09 に一度 236（上段165・オレンジ帯30・ボタン88・ナビ71）にしたが、
	 * 現行の Figma は 220・26・76・70 なので戻した。
	 * 上段は 内容幅1200 の中で ロゴ360 ／ 電話+CTA 690 を両端に置く。
	 *   ロゴ         360×86（タグライン14 + gap10 + ロゴ画像62）
	 *   電話ブロック 398×108 @(630) gap14
	 *   CTAブロック  268×110 @(1052) gap8
	 *   その2つの間  gap24
	 * 数値はすべて Figma API から取得したもので、目測ではない。 */
	.site-header__inner {
		/* Figma の上段（Frame 5）は中身を上下中央に置く。
		 * 上そろえにするとロゴが12px、電話まわりが1px上にずれる。 */
		align-items: center; justify-content: space-between;
		gap: calc(20 * var(--u)); padding-block: calc(20 * var(--u)); min-height: calc(150 * var(--u));
	}
	/* 電話（398）と CTA（268）を gap24 で並べたまとまり。全体で 690。 */
	.site-header__contact { display: flex; align-items: center; gap: calc(24 * var(--u)); }

	/* ロゴ画像（360×62）。Figma ではタグライン（14）＋ 間隔10 の下に置かれているが、タグラインは出していない。 */
	.site-header__brand { gap: calc(10 * var(--u)); }
	.brand__logo { width: calc(360 * var(--u)); height: auto; }

	/* 電話ブロック 398×108 / gap14 */
	.site-header__tel { display: block; text-align: left; width: calc(398 * var(--u)); }
	/* オレンジ帯 398×26・padding 2/20・角丸100・文字は黄色18px（白ではない） */
	.site-header__tel-lead {
		display: block; padding: 2px calc(20 * var(--u)); border-radius: calc(100 * var(--u));
		background: var(--c-warm); color: var(--c-highlight);
		/* Figma のオレンジ帯は高さ26（上下2の余白＋文字枠22）。 */
		font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: max(calc(17 * var(--ff)), calc(22 * var(--u))); font-weight: var(--fw-bold);
		text-align: center;
	}
	/* 番号は Geist 800 49px。アイコンとの間は 6px。 */
	/* Figma の Frame 15（アイコン＋番号）は 398×35。文字は 49px だが行の高さは 35。 */
	.site-header__tel-num {
		display: flex; align-items: center; justify-content: flex-start; gap: calc(6 * var(--u));
		margin-top: calc(14 * var(--u)); height: calc(35 * var(--u));
		/* 下で字間を足すぶん幅が枠ぎりぎりになる。折り返させない。 */
		white-space: nowrap;
		color: var(--c-warm); font-family: var(--font-num); font-weight: 800;
		font-size: max(calc(33 * var(--ff)), calc(49 * var(--u))); line-height: max(calc(23.33 * var(--ff)), calc(35 * var(--u)));
		/* Figma の指定は字間0だが、Google Fonts の Geist は Figma のものより
		 * わずかに詰まっていて、同じ49pxでも番号全体が7px短くなる。
		 * 右端がオレンジ帯の端とそろわなくなるので、そのぶんを字間で戻す。 */
		letter-spacing: 0.63px;
	}
	/* 受話器アイコン。Figma で実際に描かれている大きさは 45×33 で、
	 * 書き出した SVG（viewBox 46×48）を原寸で置くとその大きさになる。
	 * 一方レイアウト上の枠は 32 しか取られておらず、絵は番号側へはみ出している。
	 * 枠32＋間隔6＝38 だけ番号を送るため、はみ出すぶんを負のマージンで戻す。 */
	.site-header__tel-icon {
		width: calc(46 * var(--u)); height: calc(48 * var(--u)); flex: none;
		/* SVG の枠（viewBox 628,56）と絵の位置をそろえるための2px・1.6px。 */
		margin-left: -2px; margin-right: calc(-12 * var(--u));
		position: relative; top: 1.6px;
	}
	.site-header__tel-hours {
		margin-top: calc(14 * var(--u)); text-align: center;
		/* Figma の枠は19。番号との間隔は14。 */
		font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); line-height: max(calc(17 * var(--ff)), calc(19 * var(--u))); font-weight: var(--fw-medium);
		color: var(--fig-gray-50);
	}

	/* CTAブロック 268×110 / gap8 */
	/* Figma: 電話ブロック（高さ108・Y1）と CTA（高さ110・Y0）は上下中央で、ずらしはない。 */
	.site-header__cta { display: block; width: calc(268 * var(--u)); }
	.site-header__cta-lead {
		padding: 2px calc(20 * var(--u)); margin-bottom: calc(8 * var(--u)); text-align: center;
		/* Figma の枠は26（上下2の余白＋文字枠22）。 */
		font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: max(calc(17 * var(--ff)), calc(22 * var(--u))); font-weight: var(--fw-bold);
		color: var(--fig-gray-70);
	}
	.site-header__cta-lead::before { content: "＼"; }
	.site-header__cta-lead::after  { content: "／"; }
	/* ボタン 128×76・padding 12/20・角丸6・文字22px/行間26.4・間隔12 */
	.site-header__cta-btns { display: flex; gap: calc(12 * var(--u)); }
	.site-header__cta-btns .btn {
		width: calc(128 * var(--u)); padding: calc(12 * var(--u)) calc(20 * var(--u)); border-radius: calc(6 * var(--u));
		/* Figma のボタンは 128×76（左右20・上下12の余白＋2行×26）。CTA ブロック全体は 268×110。 */
		font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); line-height: max(calc(17.33 * var(--ff)), calc(26 * var(--u))); font-weight: var(--fw-bold);
		box-shadow: var(--shadow-btn);
	}

	/* ナビ：1440×70。項目は150×70・padding上下9・文字18px/行間21.6。
	 * 「エラーコード検索」だけ2行（Figma で中身が44px）。 */
	/* Figma: ナビの白い帯は 1440×70。#259EF5 の4pxの線はその「外側の下」に付く
	 * （Figma の枠線は OUTSIDE 指定）。帯の70pxに線は含まれない。
	 * border-bottom にすると線のぶん帯が66pxに痩せて、ヘッダー全体も4px高くなるので、
	 * 線は box-shadow で外へ出す。 */
	/* PC ではヘッダー全体（220px）を貼り付けると画面の3割を占め続けるので、
	 * 上段（ロゴ・電話・見積りボタン）は本文と一緒に流し、
	 * ナビだけを画面の上に残す。電話番号は上へ戻れば見える。
	 * ナビが <header> の外に置いてあるのはこのため（header.php の注記を参照）。 */
	.site-header { position: static; border-bottom: 0; }
	.gnav {
		position: sticky; top: 0; z-index: 50;
		display: block; background: #fff;
		box-shadow: 0 4px 0 var(--c-brand);
	}
	/* ページ内リンクで飛んだ先が、貼り付いたナビ（70＋線4）の下に隠れないように。 */
	html { scroll-padding-top: 75px; }
	.gnav__list { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; }
	.gnav__item--secondary { display: none; }
	/* 区切り線は Figma では「#15233E を不透明度10%」。各項目の右辺に1本、
	 * 最後の項目だけ無し。2番目以降の左辺に引くと同じ本数・同じ位置になる。 */
	.gnav__item + .gnav__item { border-left: 1px solid rgba(21, 35, 62, .1); }
	.gnav__item a {
		display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
		height: calc(70 * var(--u)); padding: calc(9 * var(--u)) calc(4 * var(--u));
		font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); line-height: max(calc(17 * var(--ff)), calc(21.6 * var(--u))); font-weight: var(--fw-bold);
		color: var(--fig-gray-70); text-align: center;
	}
	.gnav__item a:hover { color: var(--c-brand); }
	.gnav__item.is-current a { color: var(--c-brand); }

	.drawer-toggle { display: none; }
}


/* ==========================================================================
   画像プレースホルダ（グレー矩形）
   ワイヤーフレーム 2a-D:「素材が揃うまではグレー矩形+ラベルで指定」

   点線の枠にしているのは、実装済みの装飾と見分けるため。
   写真が入ると呼び出し側が img に変わるので、この枠は自然に消える。
   ========================================================================== */
.img-ph {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4px;
	padding: 12px;
	text-align: center;
	background: var(--c-bg-soft);
	border: 1px dashed #c3cfdd;
	border-radius: var(--radius-sm);
	color: var(--c-gray);
	overflow: hidden;
}
.img-ph__icon  { font-size: 20px; line-height: 1; opacity: .55; }
.img-ph__label { font-size: 12px; font-weight: var(--fw-bold); line-height: 1.5; }
.img-ph__note  { font-size: 11px; opacity: .85; line-height: 1.5; }

.img-ph--16x9   { aspect-ratio: 16 / 9; }
.img-ph--4x3    { aspect-ratio: 4 / 3; }
.img-ph--1x1    { aspect-ratio: 1 / 1; }

/* =====================================================================
 * デザイン反映（2026-09-04）
 * Figma「sakaguchi」サービス / 交換サービス 1440×11086 に準拠。
 * ===================================================================== */

/* ---------- FV（Figma API: headline 1200×376） ----------
 * padding 60/40 / gap16 / 角丸20
 * 背景は3層: ベース #0B56A2 → 写真(不透明度40%・STRETCH) → 右へ抜けるグラデーション
 * 左上に 829×829 の放射状グラデーション（#3E9AF6 → #0B56A2）の楕円が乗る */
.hero--page { background: none; color: inherit; padding-block: 24px 0; }
.hero__box {
	position: relative;
	border-radius: var(--radius-lg);
	background: var(--fig-blue-60);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	padding: 28px 20px;
}
/* Figma の描画順を再現する。
 *   ①ベース色 → ②写真(40%) → ③左を覆うグラデーション → ④装飾の楕円 → ⑤文字
 * ③は「左半分は不透明、82%地点で透明」（Figma の GRADIENT_LINEAR をそのまま）。 */
.hero__box::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg,
		var(--fig-blue-60) 0%, var(--fig-blue-60) 50%,
		rgba(11, 86, 162, 0) 82%, rgba(11, 86, 162, 0) 100%);
}
/* 装飾の楕円 829×829。headline の左上にはみ出す。
 * グラデーションは Figma の gradientHandlePositions から出した値。
 *   中心 (0.3428, 0.4072) → 34.28% 40.72%
 *   軸1 (0.8745, 0.8770) / 軸2 (-0.1270, 0.9390)
 *   → 中心からの距離はどちらも 588px（直交・同じ長さ ＝ 真円）
 * 半径を書かないと既定の farthest-corner（ここでは733.7px）になり、
 * Figma より25%大きく広がって明るい側が伸び、色味が変わってしまう。 */
.hero__box::before {
	content: ""; position: absolute; z-index: 2; pointer-events: none;
	width: 829px; height: 829px; left: -243px; top: -351px;
	border-radius: 50%;
	background: radial-gradient(circle 588px at 34.28% 40.72%, #3E9AF6 0%, var(--fig-blue-60) 100%);
}
.hero__body { position: relative; z-index: 3; }
.hero__catch { display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-shadow: none; }
/* 白帯: padding 6/24・角丸6・文字40px/行間48・色 #0B56A2 */
.hero__catch-label {
	display: inline-block;
	background: #fff; color: var(--fig-blue-60);
	border-radius: 6px;
	padding: 6px 24px;
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
/* 価格: 「100」72px ＋「万円〜」40px を gap9 で並べる。どちらも Noto Sans JP 700・黄色。
 * Figma の Frame 35 は上下中央そろえ（86の枠の中で48の「万円〜」が上下に19ずつ空く）。
 * ベースラインでそろえると「万円〜」が下がりすぎる。 */
.hero__price {
	display: flex; align-items: center; gap: 9px;
	font-family: var(--font-base);
	font-size: 22px; font-weight: var(--fw-bold);
	color: var(--c-highlight);
	line-height: 1.2;
}
.hero__price b {
	font-family: var(--font-base);
	font-size: 40px; font-weight: var(--fw-bold);
	color: var(--c-highlight);
	line-height: 1.2;
	margin: 0;
}
/* 本文: 24px / 行間43.2 / 色 #E9F4FC */
.hero--page .hero__sub {
	font-size: 15px; margin-top: 16px; max-width: none; opacity: 1;
	line-height: 1.8; font-weight: var(--fw-bold); color: var(--fig-blue-20);
}
/* 写真は不透明度40%で背景として敷く（グラデーションより下）。 */
.hero__photo { position: absolute; inset: 0; z-index: 0; opacity: .4; }
/* Figma の scaleMode は STRETCH（縦横比を無視して枠いっぱいに伸ばす）＝ object-fit: fill。 */
.hero__photo img { width: 100%; height: 100%; object-fit: fill; }

/* ---------- 黄色のCTA帯（Figma API: cta 1200×230 / 角丸20 / 白） ----------
 * 黄色は 736×257 の図形が左に重なる（帯の外へはみ出す）
 * 電話ブロック 522×153 gap20 ／ 右ブロック 522×158 gap21
 * オレンジ帯 522×50 padding 8/20 角丸6 文字28px
 * 番号 Geist 800 58px ／ 受付 18px #5E5E5E
 * 見出し 24px #0B56A2 ／ ボタン 255×96 padding19/20 角丸6 文字30px gap12
 * 人物 313×354 */
.cta-y { padding-block: 8px 32px; }
/* 帯の上に置く見出しと一文（任意。2l「リセットしてもエラーが消えないときは」で使う）。
 * 見出しピルや枠で包まず、文字だけで帯に渡す。色と太さはセクション見出しの文字（青・太字）に合わせる。 */
.cta-y__intro { margin-bottom: 20px; text-align: center; }
.cta-y__intro-title { font-size: 20px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.cta-y__intro-seg { display: inline-block; }
.cta-y__intro-note { margin-top: 6px; font-size: 14px; line-height: 1.7; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
@media (min-width: 600px) {
	.cta-y__intro { margin-bottom: calc(28 * var(--u)); }
	.cta-y__intro-title { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.cta-y__intro-note { margin-top: calc(8 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
}
/* 見出しの吹き出し（cta-yellow の intro=bubble。2026-10-16 D案）。
 * 一文は「＼ ／」付きで上に小さく、問いかけは交換ページの不安の吹き出しと同じ白・水色4pxの枠。
 * 尻尾の丸2つは下の帯に向けて中央に置く。 */
.cta-y__intro--bubble { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.cta-y__intro-tag { margin-bottom: 12px; font-size: 15px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-40); }
.cta-y__intro-tag::before { content: "＼"; }
.cta-y__intro-tag::after  { content: "／"; }
.cta-y__intro-bubble {
	position: relative;
	padding: 14px 28px;
	border-radius: 80px;
	background: #fff;
	border: 4px solid var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 20px; line-height: 1.3; font-weight: var(--fw-bold);
	text-align: center;
}
.cta-y__intro-bubble::before,
.cta-y__intro-bubble::after {
	content: ""; position: absolute; left: 50%;
	border-radius: 50%; background: #fff; border: 4px solid var(--fig-blue-30);
	transform: translateX(-50%);
}
.cta-y__intro-bubble::before { width: 20px; height: 20px; bottom: -16px; }
.cta-y__intro-bubble::after  { width: 11px; height: 11px; bottom: -32px; margin-left: 10px; }
@media (min-width: 600px) {
	.cta-y__intro--bubble { margin-bottom: calc(48 * var(--u)); }
	.cta-y__intro-tag { margin-bottom: calc(14 * var(--u)); font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.cta-y__intro-bubble { padding: calc(18 * var(--u)) calc(48 * var(--u)); font-size: max(calc(20 * var(--ff)), calc(30 * var(--u))); }
}
.cta-y__box {
	position: relative;
	display: grid;
	gap: 20px;
	padding: 24px 20px;
	border-radius: var(--radius-lg);
	background: var(--c-highlight);
	overflow: hidden;
}
.cta-y__tel { text-align: center; }
.cta-y__tel-lead {
	display: block; padding: 8px 20px; border-radius: 6px;
	background: var(--c-warm); color: #fff;
	font-size: 18px; font-weight: var(--fw-bold); line-height: 1.2;
}
.cta-y__tel-num {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-top: 20px;
	color: var(--c-warm); font-family: var(--font-num); font-weight: 800;
	font-size: 34px; line-height: 1.1;
}
.cta-y__tel-icon { width: 34px; height: 34px; flex: none; }
.cta-y__tel-hours { font-size: 14px; color: var(--fig-gray-50); margin-top: 20px; font-weight: var(--fw-medium); }

.cta-y__form { text-align: center; }
.cta-y__form-lead {
	display: inline-block;
	font-size: 17px; font-weight: var(--fw-bold); color: var(--fig-blue-60);
	margin-bottom: 21px; line-height: 1.2;
}
.cta-y__form-lead b { font-size: 1.33em; font-weight: inherit; }
.cta-y__btns { display: grid; gap: 12px; }
.cta-y__btns .btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 19px 20px; border-radius: 6px;
	font-size: 20px; line-height: 1.2; font-weight: var(--fw-bold);
	box-shadow: var(--shadow-btn);
}
.btn__icon { width: 28px; height: 28px; flex: none; }
.cta-y__photo { display: none; }

/* スマホ版（2026-10-12 jojiさんの参考画像から再現。Figma にスマホのデザインは無い）。
 * 白いカード＋青い枠。上半分が黄色（下辺はまっすぐ）、下半分が白。
 *   上: オレンジのピル → 番号（アイコンなし）→ 受付時間。すべて中央ぞろえ
 *   下: 2行の見出し → ボタン2つ（文字は2行）。右下に人物写真を置き、ボタンはその左に収める
 * 寸法は参考画像（2倍で書き出したもの・カード幅320）を画素で測った値。
 * .cta-y__seg はスマホだけ1行ずつに分ける（PC は1行のまま）。 */
.cta-y__seg { display: inline; }
@media (max-width: 599.98px) {
	.cta-y__box {
		grid-template-columns: minmax(0, 1fr);
		gap: 0; padding: 0;
		background: #fff;
		border: 3px solid var(--fig-blue-40);
	}
	.cta-y__tel { padding: 17px 24px 16.5px; background: var(--c-highlight); }
	.cta-y__tel-lead { padding: 5px 8px; border-radius: 100px; font-size: 17px; line-height: 24px; }
	/* 番号の幅がカードの81%になる大きさ（カード320で36.5px）。幅320の画面でも1行に収まる。 */
	.cta-y__tel-num { margin-top: 10px; font-size: min(36.5px, (100vw - 40px) * .114); line-height: 1.2; white-space: nowrap; }
	.cta-y__tel-icon { display: none; }
	.cta-y__tel-hours { margin-top: 4.5px; font-size: 15.3px; line-height: 1.4; }

	.cta-y__form { position: relative; z-index: 1; padding: 9px 24px 16.5px; text-align: left; }
	.cta-y__seg { display: block; }
	.cta-y__form-lead { display: block; margin-bottom: 12px; font-size: 20px; line-height: 25px; }
	.cta-y__form-lead b { font-size: 1.35em; line-height: 1; }
	/* ボタン2つは、人物写真の手前まで画面幅に合わせて伸ばす（2026-10-13 フィードバック:
	 * 幅を固定すると大きめのスマホで右が空く）。右の51（カードの余白24と合わせて75）は写真の絵が始まる位置まで。
	 * 写真は右端に固定の大きさで置いているので、この値は画面幅によらない。カード幅320でボタンは各102。 */
	.cta-y__btns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-right: 51px; }
	.cta-y__btns .btn {
		padding: 8px 4px; min-height: 54.5px;
		border-radius: 6px;
		font-size: 17px; line-height: 1.1;
		box-shadow: 0 2px 0 #e0e0e0;
	}
	.cta-y__btns .btn__icon { display: none; }
	/* 人物は白い面の右下。枠の右で少し切れる（参考画像どおり）。
	 * 写真の透明な上端は黄色にかかるが、絵のある部分は白い面に収まる。 */
	.cta-y__photo {
		display: block;
		position: absolute; right: -20px; bottom: 0; z-index: 2;
		width: 152px;
		pointer-events: none;
	}
	.cta-y__photo img { display: block; width: 100%; height: auto; }
}
/* 参考画像はカード幅320（画面360）。それより狭い画面（320など）では、受付時間が2行に割れ、
 * 人物が見出しと LINE ボタンに重なるので、文字・ボタン・写真を小さくする。 */
@media (max-width: 359.98px) {
	.cta-y__tel-hours { font-size: 13.5px; }
	.cta-y__form-lead { font-size: 17px; line-height: 22px; }
	.cta-y__btns { gap: 10px; margin-right: 39px; }
	.cta-y__btns .btn { font-size: 15px; }
	.cta-y__photo { right: -16px; width: 120px; }
}

/* =====================================================================
 * PC（Figma API の定義値どおり 2026-09-04）
 * FV / 黄色CTA帯。数値はすべて Figma から取得したもの。
 * ===================================================================== */
@media (min-width: 600px) {
	/* FV: 1200×376 / padding 60px 40px / gap16。中身は幅1112の縦積み。 */
	.hero--page { padding-block: calc(32 * var(--u)) 0; }
	/* Figma の headline は高さ376の固定枠で、中身（248）は上下の中央に置かれる。
	 * padding 60 で上詰めにすると、中身が4px上にずれる。
	 * 左右は「枠線4px の内側から padding 40」なので、合わせて44。
	 * （枠線は .hero__edge で別に描いているため、padding に足しておく） */
	.hero__box {
		padding: calc(60 * var(--u)) calc(44 * var(--u)); min-height: calc(376 * var(--u));
		display: flex; flex-direction: column; justify-content: center;
	}
	.hero__body { max-width: calc(1112 * var(--u)); }
	.hero__catch-label { padding: calc(6 * var(--u)) calc(24 * var(--u)); font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(32 * var(--ff)), calc(48 * var(--u))); }
	.hero__price { gap: calc(9 * var(--u)); font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(32 * var(--ff)), calc(48 * var(--u))); }
	.hero__price b { font-size: max(calc(48 * var(--ff)), calc(72 * var(--u))); line-height: max(calc(57.6 * var(--ff)), calc(86.4 * var(--u))); }
	.hero--page .hero__sub { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); line-height: max(calc(28.8 * var(--ff)), calc(43.2 * var(--u))); margin-top: calc(16 * var(--u)); }

	/* 黄色CTA帯の上下の余白。中身の指定は下の「黄色のCTA帯（PC）」にまとめた。 */
	.cta-y { padding-block: calc(8 * var(--u)) calc(48 * var(--u)); }
}

/* FV（青いカード）の 600〜1023: カードの幅に合わせて中身を比例させる。
 * --u は画面幅が基準（1424 で 1px）なので、画面いっぱいに広げたカードに対して中身が小さく、
 * 右に空きが出て左に寄って見えていた。この幅だけ、カードの幅（Figma では1200）を基準に置き換える。
 * 交換ページ・TOP（.hero--v2）で先に入れたものを、全ページの FV に広げた（2026-10-12）。
 * 100cqi はコンテナ（.hero--page の .wrap。内側の幅＝カードの幅）の幅。文字の下限（--ff）はそのまま。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.hero--page > .wrap { container-type: inline-size; }
	.hero--page .hero__box { --u: min(1px, 100cqi / 1200); }
	/* 説明文の最後の行に「ん。」「す。」だけが残らないようにする。 */
	.hero--page .hero__sub { text-wrap: pretty; }
}

/* ---------- 黄色のCTA帯（PC） ----------
 * 寸法は「Figma の値 × var(--cu)」で書く。--cu はカードの幅（Figma では1200）に対する比で、
 * カードが1200あれば 1px、狭いとその幅に比例して小さくなる。
 * 中身を固定の寸法で書いていたときは、カードが1200より狭い画面（幅1000〜1180ほど）で
 * 中身が右にはみ出し、人物がボタンに重なっていた（2026-10-12）。
 * 100cqi はコンテナ（.cta-y の .wrap。内側の幅＝カードの幅）の幅。
 * 2px 以下の値（線の太さなど）と字間は縮めない。
 * スマホの形（max-width: 599.98px）とは 600 で切り替わる。600〜999 は文字の下限などを足している（このあとの max-width: 999.98px の指定）。 */
.cta-y > .wrap { container-type: inline-size; }
@media (min-width: 600px) {
	.cta-y__box { --cu: min(1px, 100cqi / 1200); }
	.cta-y__box {
		/* Figma: 左右のかたまりは 522px ずつ、あいだ26px、左の余白28px。
		 * 右いっぱいには広げない（右端の102pxは人物の場所として空けてある）。 */
		grid-template-columns: calc(522 * var(--cu)) calc(522 * var(--cu));
		justify-content: start;
		align-items: center;
		gap: calc(26 * var(--cu));
		padding: 0 calc(28 * var(--cu));
		background: #fff;
		min-height: calc(230 * var(--cu));
		/* Figma: cta の枠線は #259EF5 の 4px（内側）、角丸24 */
		border: 4px solid var(--fig-blue-40);
		border-radius: calc(24 * var(--cu));
	}
	/* 黄色の図形 736×257。帯からはみ出して左に重なる（Figma の Rectangle 8）。 */
	.cta-y__box::before {
		content: ""; position: absolute; z-index: 0;
		left: calc(-18 * var(--cu)); top: calc(-14 * var(--cu)); width: calc(736 * var(--cu)); height: calc(257 * var(--cu));
		background: var(--c-highlight);
		/* 斜めの辺は上端と下端で 537px ずれる（書き出し画像で実測）。
		 * 736 に対して 73% の位置に下端が来る。 */
		clip-path: polygon(0 0, 100% 0, 73% 100%, 0 100%);
	}
	.cta-y__tel, .cta-y__form { position: relative; z-index: 1; }
	/* 電話ブロック 522×153 / gap20 */
	/* Figma: Frame 6 は padding 20/8・角丸100・高さ50（文字枠34）。ブロック全体は 50+20+41+20+22 = 153。 */
	/* 2026-10-11 Figma（934-1321・934-1342）の値に合わせる: 帯 50（padding 8/20）・番号41・受付22、
	 * 右は Frame 8 が Y36・高さ158、文言（Frame 9）42、間隔21 → ボタン上端 36+63 = 99。 */
	/* ピルの文字だけは比例より早く縮める（2026-10-12 jojiさんの指示）。比例のままだと幅1000で22pxになり、大きく見えた。
	 * カード幅944（画面1000）で18px、1200で Figma の28px。そのあいだは直線でつなぐ。 */
	.cta-y__tel-lead { padding: calc(8 * var(--cu)) calc(20 * var(--cu)); border-radius: calc(100 * var(--cu)); font-size: clamp(18px, 3.90625cqi - 18.875px, 28px); line-height: calc(34 * var(--cu)); }
	/* 番号は Geist 800 58px・行間41。ヘッダーの番号と同じく、Google Fonts の Geist は
	 * Figma のものよりわずかに詰まっていて、同じ58pxでも番号全体が7px短くなる。
	 * そのぶんを字間で戻す（書き出し画像と実装のスクリーンショットを画素で突き合わせた値）。 */
	/* Figma の Frame 15（アイコン＋番号）は 463×41。受話器の絵は行の高さより
	 * 大きいが、行を押し広げてはいない。高さを41で止めて、絵ははみ出させる。 */
	.cta-y__tel-num {
		margin-top: calc(20 * var(--cu)); font-size: calc(58 * var(--cu)); line-height: calc(41 * var(--cu)); gap: calc(6 * var(--cu));
		height: calc(41 * var(--cu));
		letter-spacing: 0.64px; white-space: nowrap;
	}
	/* 受話器アイコン。Figma で実際に描かれている大きさは 32.2×32.2 で、
	 * 書き出した SVG（viewBox 48×46）を原寸で置くとその大きさになる。
	 * 絵は SVG の枠の中で左に5.5px・上に8.8px ずれた位置にあるので、
	 * レイアウト上の枠32＋間隔6 に合わせるため、余っているぶんを負の余白で詰める。 */
	.cta-y__tel-icon {
		width: calc(48 * var(--cu)); height: calc(46 * var(--cu));
		margin-left: calc(-5.5 * var(--cu)); margin-right: calc(-10.3 * var(--cu));
		position: relative; top: -1.9px;
	}
	.cta-y__tel-hours { margin-top: calc(20 * var(--cu)); font-size: calc(18 * var(--cu)); line-height: calc(22 * var(--cu)); }
	/* 右ブロック 522×158 / gap21。文言は左寄せ（Figma の Frame 9 は左揃え）。 */
	/* Figma の Frame 9 は高さ42（上下2pxの余白＋文字枠38）。この高さを出さないと
	 * 右のかたまり全体が上にずれ、ボタンの位置が5pxほど合わなくなる。 */
	.cta-y__form-lead {
		position: relative; display: block; text-align: left;
		padding-block: 2px;
		font-size: calc(24 * var(--cu)); line-height: calc(38 * var(--cu)); margin-bottom: calc(21 * var(--cu));
		/* Figma の Frame 9 は 42（上下2の余白＋文字枠38）。
		 * 「60」の32pxが行を上へ押し広げて45.5になるので、高さを42で止める。 */
		height: calc(42 * var(--cu));
	}
	/* 「60」だけ32px（Figma）。行の高さは親と同じ38pxに固定する。
	 * 指定しないと32pxぶんの行が立って、枠が42→45.5に伸びる。 */
	.cta-y__form-lead b { font-size: calc(32 * var(--cu)); line-height: calc(38 * var(--cu)); font-weight: inherit; }
	/* 文言の上下にあった水色の斜め線2本（Figma の Line 8 / 9）は、ご指示で削除（2026-10-09）。 */
	/* 列の最小幅を0にして、中身が広くても 255 ずつに保つ（Figma の2つのボタンは同じ幅）。 */
	/* ボタン上端は Figma どおり帯の上端から99。一度8px下げたが、Figma に戻した（2026-10-11）。 */
	.cta-y__btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--cu)); }
	/* Figma の Frame 8 は高さ158（文言42＋間隔21＋ボタン帯。ボタンは96で、1pxはみ出す）。 */
	.cta-y__form { height: calc(158 * var(--cu)); }
	/* Figma の Frame 12 は 255×96。中身はアイコン32＋gap10＋文字180で、
	 * Figma の padding は左右20・上下19。中身（222）が内側（215）より7px広く、中央そろえで両側にはみ出す。
	 * 高さは中身（19+36+19=74）では足りないので96で固定する。 */
	.cta-y__btns .btn {
		min-height: calc(96 * var(--cu));
		padding: calc(19 * var(--cu)) calc(20 * var(--cu)); border-radius: calc(8 * var(--cu));
		font-size: calc(30 * var(--cu)); line-height: calc(36 * var(--cu)); gap: calc(10 * var(--cu)); white-space: nowrap;
	}
	/* ボタンのアイコンは CTA帯の外でも使うので、PC の大きさ（32）はここで固定のまま残す。 */
	.btn__icon { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
	.cta-y__btns .btn__icon { width: calc(32 * var(--cu)); height: calc(32 * var(--cu)); }
	/* 人物。テーマに入っていた写真は Figma で使われているものと別だったため、
	 * デザインの書き出し（2倍）から人物だけを切り抜いて使う。
	 * Figma の見え方は 221×226 で、帯の右下にぴったり付き、上端は枠線に少し重なる。 */
	.cta-y__photo {
		display: block; position: absolute; right: 0; bottom: 0; z-index: 2;
		width: calc(221 * var(--cu)); height: calc(226 * var(--cu)); pointer-events: none;
	}
	.cta-y__photo img { width: 100%; height: 100%; display: block; }
}

/* お問い合わせ欄の 600〜999（2026-10-12 jojiさんの指示で PC と同じデザインにした。exchange.css から移した）。
 * 寸法は上の PC 用（min-width: 600px）と同じく「Figma の値 × --cu（カード幅 ÷ 1200）」で、ここには PC 用との差だけを書く。
 * 幅600ではカードが約550で、比例のままだと受付時間が8px台になるので、小さい文字にだけ下限を付け、
 * 文字が下限で大きくなっても収まるよう、高さを決め打ちしていた所は中身に合わせて伸びるようにした。
 * 範囲は 999.98 まで。600〜1023 にそろえると 1000〜1023 の見た目が変わるので、そのままにしてある。 */
@media (min-width: 600px) and (max-width: 999.98px) {
	.cta-y__box { --cu: calc(100cqi / 1200); padding: calc(16 * var(--cu)) calc(28 * var(--cu)); }
	/* PC は帯230に対して上に14・下に13はみ出す（高さ257）。文字の下限で帯が伸びても下端まで届くよう、帯の高さから決める。 */
	.cta-y__box::before { height: calc(100% + 27 * var(--cu)); }
	.cta-y__tel-lead { font-size: max(13px, calc(28 * var(--cu))); line-height: max(18px, calc(34 * var(--cu))); }
	.cta-y__tel-num { height: auto; }
	.cta-y__tel-hours { font-size: max(11px, calc(18 * var(--cu))); line-height: max(15px, calc(22 * var(--cu))); }
	.cta-y__form { height: auto; }
	.cta-y__form-lead {
		height: auto;
		/* PC と同じく1行に収める（幅600で12pxだと「はしません」が次の行に落ちた）。 */
		font-size: max(11px, calc(24 * var(--cu))); line-height: max(18px, calc(38 * var(--cu)));
		white-space: nowrap; text-wrap: nowrap; word-break: normal;
	}
	.cta-y__form-lead b { font-size: max(14px, calc(32 * var(--cu))); line-height: inherit; }
	.cta-y__btns .btn { padding: calc(19 * var(--cu)) calc(8 * var(--cu)); font-size: max(13px, calc(30 * var(--cu))); line-height: 1.2; }
	.cta-y__btns .btn__icon { width: max(16px, calc(32 * var(--cu))); height: max(16px, calc(32 * var(--cu))); }
}

/* ---------- 幅いっぱいの電話ボタン（.rp-tel） ----------
 * 交換ページ FV の「今すぐお電話」と同じオレンジの丸いボタンを、面の幅いっぱいまで広げたもの。
 * 影は付けない。角丸はほかのボタン（.fbtn）と同じ80（2026-10-12 jojiさんの指示）。
 * 番号は白抜き。受付時間もボタンの中に入れる（PC は番号の右に縦線で区切り、スマホは番号の下）。
 * 修理TOP（2d）・症状別（2k）・お問い合わせ（2f）・商品詳細（2o）で使う（template-parts/tel-card.php）。
 * 2026-10-12 に黄色の面から変えた（修理ページの FV 3案から A案に決定）。 */
.rp-tel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 18px 16px 16px;
	border-radius: 24px;
	background: var(--fig-orange);
	color: #fff;
	text-decoration: none;
	transition: transform .15s ease;
}
.rp-tel:hover { transform: translateY(-2px); }
.rp-tel__main {
	display: flex;
	align-items: center;
	justify-content: center;
	/* スマホは受話器・番号・「に電話する」を縦に積む。
	 * 折り返しに任せると、幅によって受話器が番号の横に入ったり上に落ちたりしてそろわない。 */
	flex-direction: column;
	gap: 4px;
}
.rp-tel__icon { width: 30px; height: 30px; flex: none; }
.rp-tel__num {
	font-family: var(--font-num);
	font-weight: 800;
	font-size: 30px;
	line-height: 1.05;
	letter-spacing: .02em;
	white-space: nowrap;
}
.rp-tel__label {
	width: 100%;
	text-align: center;
	white-space: nowrap;
	font-size: 16px;
	font-weight: var(--fw-bold);
}
/* スマホは「受付 ◯:00〜◯:00｜通話無料」と1行につなぐ。 */
.rp-tel__hours {
	display: flex; flex-wrap: wrap; justify-content: center;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	opacity: .92;
}
.rp-tel__hours span + span::before { content: "｜"; margin-inline: 4px; opacity: .6; }

@media (min-width: 600px) {
	/* 600 以上は受話器・番号・「に電話する」を1行に並べる。受付時間はその下に1行。 */
	.rp-tel { gap: calc(12 * var(--u)); padding: calc(26 * var(--u)) calc(40 * var(--u)); border-radius: 80px; }
	.rp-tel__main { flex-direction: row; flex-wrap: nowrap; gap: calc(16 * var(--u)); }
	.rp-tel__icon { width: max(calc(30 * var(--ff)), calc(42 * var(--u))); height: max(calc(30 * var(--ff)), calc(42 * var(--u))); }
	.rp-tel__num { font-size: max(calc(36 * var(--ff)), calc(60 * var(--u))); }
	.rp-tel__label { width: auto; font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.rp-tel__hours { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
}
/* 1024 以上は受付時間も同じ行に置き、縦線で区切る（600〜1023 では入りきらず「に電話する」が縦に割れた）。 */
@media (min-width: 1024px) {
	.rp-tel { flex-direction: row; justify-content: center; gap: calc(28 * var(--u)); }
	.rp-tel__hours { flex-direction: column; padding-left: calc(28 * var(--u)); border-left: 1px solid rgba(255, 255, 255, .5); text-align: left; }
	.rp-tel__hours span + span::before { content: none; }
}

/* ---------------------------------------------------------------------
 * LINE＋電話
 * 旧デザインの LINE の帯（.cta-b。削除済み）は全幅の緑ベタで、上下の青と黄色にはさまれると
 * 3色目の帯になった。白い箱に置き換え、色はボタンだけで持たせる。
 * ------------------------------------------------------------------- */
.err-line__box { align-items: center; text-align: center; gap: 12px; }
.err-line__title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.err-line__lead {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.err-line__btns { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }
@media (min-width: 600px) {
	.err-line__title { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.err-line__lead { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.err-line__btns { flex-direction: row; justify-content: center; gap: calc(20 * var(--u)); }
}

/* ---------- FVの中に置くボタン（template-parts/hero-cta.php） ----------
 * 交換ページの FV（Figma v2）の形: 548×96 / 角丸100 / 間隔10 / 文字 Bold 30 / ドロップシャドウ 0 3 0 #000 10%。
 * 2026-10-14 に hero-v2.css から移した。v2 以外の FV（補助金・メーカー・エリア）でも使う。
 * 並べ方（.hero__cta）は hero-v2.css と pages.css 側で決める。 */
.hero__cta-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 60px; border-radius: 100px;
	color: #fff; text-decoration: none;
	font-size: 18px; line-height: 1.45; font-weight: var(--fw-bold);
	box-shadow: var(--shadow-btn);
	transition: transform .15s ease;
}
.hero__cta-btn:hover { transform: translateY(-2px); }
.hero__cta-btn svg { width: 1.2em; height: 1.2em; flex: none; }
.hero__cta-btn--tel  { background: var(--fig-orange); }
.hero__cta-btn--form { background: var(--fig-blue-40); }
@media (min-width: 600px) {
	.hero__cta-btn { flex: none; width: calc(548 * var(--u)); height: calc(96 * var(--u)); font-size: max(calc(20 * var(--ff)), calc(30 * var(--u))); line-height: max(calc(28.66667 * var(--ff)), calc(43 * var(--u))); gap: calc(10 * var(--u)); }
	.hero__cta-btn svg { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
}

/* ---------- スタッフコメント ----------
 * 白いカードに青い丸アイコン。実績にもとづく一言を置く枠。
 * 2026-09-08 に errorcode.css から移した。エラーコード個別（2e）と
 * メーカー別（2h）で使う。クラス名は移す前のまま。 */
.err-staff__card {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
/* 書き出した PNG は「青い円＋白い線画」で1枚になっている（円の部分も不透明）。
 * マスクにすると円ごと塗りつぶされて白い丸になるので、画像のまま置く。 */
.err-staff__ico {
	flex: none;
	display: block;
	width: 56px;
	height: 56px;
	background: no-repeat center / contain url("../img/icon/flow-work.png?v=20260904");
}
.err-staff__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.err-staff__label {
	font-size: 15px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.err-staff__text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

@media (min-width: 600px) {
	.err-staff__card { padding: calc(40 * var(--u)); gap: calc(24 * var(--u)); }
	.err-staff__ico { width: calc(88 * var(--u)); height: calc(88 * var(--u)); }
	.err-staff__label { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.err-staff__text { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
}

/* ---------- 番号つきの手順（.reset-steps） ----------
 * エラーコード個別（2e）の「リセット・解除の手順」のために作ったが、
 * 症状別修理（2k）の「まず試してください（順番に）」でも同じものが要るので
 * errorcode.css からここへ移した（2026-09-09。クラス名は変えていない）。
 *
 * 親を `.dots-block` に限定しているのは、pages.css にある旧スタイル
 * （1pxの灰枠・角丸12）に勝つため。読み込み順は components → pages なので、
 * 裸の `.reset-steps` で書くと後から読まれる pages.css に負ける。
 * どちらのページも全幅の青（水玉）の上に置くので、この親で用が足りる。 */
.dots-block .reset-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
}
.dots-block .reset-steps li {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 18px 20px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	font-weight: var(--fw-bold);
}
/* 丸は交換ページ「工事の流れ」の 01〜04 と同じ扱い。 */
.dots-block .reset-steps__no {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--c-brand);
	color: #fff;
	font-family: var(--font-num);
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.dots-block .reset-steps__body {
	display: grid;
	gap: 4px;
	padding-top: 6px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fig-gray-70);
}
.dots-block .reset-steps__body small {
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}

/* ---------- 原因の箇条書き（.cause-list） ----------
 * 2e の「リセットしても消えないときの原因」のために作ったが、
 * 2k の「考えられる原因」でも同じものが要るので errorcode.css からここへ移した
 * （2026-09-09。クラス名は変えていない）。
 *
 * 箱を項目ごとに分けず、1枚の白い箱の中を薄い水色の線で区切る。 */
.sec-stack .cause-list { display: flex; flex-direction: column; gap: 0; margin: 0; }
.sec-stack .cause-list li {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 16px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.sec-stack .cause-list li + li { border-top: 2px solid var(--fig-blue-30); }
.sec-stack .cause-list li:first-child { padding-top: 0; }
.sec-stack .cause-list li:last-child { padding-bottom: 0; }
/* 中黒のかわりに、交換ページの症状チェックと同じ青い丸。 */
.sec-stack .cause-list li::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 12px;
	border-radius: 50%;
	background: var(--c-brand);
}
/* 補足は本文の下に落とす（li が横並びの箱なので、幅いっぱいを取らせて改行させる）。 */
.sec-stack .cause-list li small {
	flex: 0 0 100%;
	padding-left: 22px;
	font-size: 14px;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}

@media (min-width: 600px) {
	.dots-block .reset-steps { gap: calc(16 * var(--u)); }
	.dots-block .reset-steps li { padding: calc(24 * var(--u)) calc(32 * var(--u)); gap: calc(24 * var(--u)); }
	.dots-block .reset-steps__no { width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.dots-block .reset-steps__body { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); padding-top: calc(10 * var(--u)); }
	.dots-block .reset-steps__body small { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }

	.sec-stack .cause-list li { padding: calc(20 * var(--u)) 0; font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); gap: calc(16 * var(--u)); }
	.sec-stack .cause-list li::before { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); }
	.sec-stack .cause-list li small { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
}

/* ---------- 絞り込みの入力欄（.cs-filter / .cs-field / .cs-select） ----------
 * 施工事例の一覧（2s）のために作ったが、機種検索（2n）でも同じものが要るので
 * case.css からここへ移した（2026-09-09。クラス名は変えていない）。
 *
 * どちらのページも全幅の青（水玉）に白い箱で載せる。
 * 入力欄が横に伸びすぎないよう、箱の幅を 800px で止める。 */
/* `width: 100%` を書かないと箱が内容の幅まで縮む。
 * .panel は .dots-block__inner（flex column）の子で、そこに margin-inline: auto を
 * 足すと stretch が外れ、中身の select の幅で止まってしまう。 */
.cs-filter { width: 100%; max-width: 800px; margin-inline: auto; }
.cs-filter__grid { display: grid; gap: 16px; }
.cs-field { display: flex; flex-direction: column; gap: 6px; }
.cs-field__label {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 文字は 16px を下回らない。下回ると iPhone が選択時に画面を拡大し、
 * 戻らなくなる（2f で確かめた）。 */
.cs-select {
	width: 100%;
	padding: 12px 14px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.cs-select:focus { outline: 3px solid var(--fig-blue-40); outline-offset: 1px; }

/* プルダウンの矢印（全ページ共通）。ブラウザ標準の矢印は小さく枠の端に寄るので、
 * 青い三角（幅12・右から16）に差し替える（2026-10-12 jojiさんの指示）。
 * 各ページの `padding` 一括指定に右の余白を消されないよう、要素名を付けて強くする。
 * 三角の色は --fig-blue-60（#0b56a2）。data URI では変数が使えないので値を直接書く。 */
select.el-select,
select.cs-select,
select.rp-search__select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M0 0h12L6 8z' fill='%230b56a2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
}

@media (min-width: 600px) {
	.cs-filter__grid { grid-template-columns: repeat(2, 1fr); gap: calc(20 * var(--u)); }
	.cs-field__label { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
	.cs-select { padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
}

/* ---------- 一覧ページの件数・ページ送り・0件の箱 ----------
 * 施工事例の一覧（2s）のために作ったが、機種検索（2n）でも同じものが要るので
 * case.css からここへ移した（2026-09-09。クラス名は変えていない）。 */
/* ページ送り: 丸い数字ボタン。今のページを青く塗る。
 * コラム一覧（.cl-pager）で作った見た目を、機種検索・施工事例（.cs-pager）にも当てる（2026-10-21）。 */
.cl-pager .screen-reader-text,
.cs-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cl-pager .nav-links,
.cs-pager .nav-links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.cl-pager .page-numbers,
.cs-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 100px;
	background: #fff;
	color: var(--fig-blue-60);
	font-family: var(--font-num);
	font-size: 16px;
	font-weight: 700;
}
.cl-pager .page-numbers.prev,
.cs-pager .page-numbers.prev,
.cl-pager .page-numbers.next,
.cs-pager .page-numbers.next { font-family: var(--font-base); font-size: 14px; padding-inline: 18px; }
.cl-pager a.page-numbers:hover,
.cs-pager a.page-numbers:hover { border-color: var(--fig-blue-40); }
.cl-pager .page-numbers.current,
.cs-pager .page-numbers.current { border-color: var(--fig-blue-60); background: var(--fig-blue-60); color: #fff; }
.cl-pager .page-numbers.dots,
.cs-pager .page-numbers.dots { min-width: 0; padding-inline: 2px; border: 0; background: none; color: var(--fig-gray-40); }
/* スマホは「前へ」「次へ」を数字の上下に分けず、数字を小さくして1行に収める。 */
@media (max-width: 599.98px) {
	.cl-pager .nav-links,
	.cs-pager .nav-links { gap: 6px; }
	.cl-pager .page-numbers,
	.cs-pager .page-numbers { min-width: 40px; height: 40px; padding-inline: 8px; font-size: 15px; }
	.cl-pager .page-numbers.prev,
	.cs-pager .page-numbers.prev,
	.cl-pager .page-numbers.next,
	.cs-pager .page-numbers.next { padding-inline: 12px; font-size: 13px; }
}
@media (min-width: 600px) {
	.cl-pager .nav-links,
	.cs-pager .nav-links { gap: calc(10 * var(--u)); }
}
.cs-count {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	text-align: center;
}
.cs-count b { font-size: 22px; font-weight: 900; color: var(--fig-blue-60); }



/* 0件のときの白い箱。空の箱を並べず、意味のある文字とボタンを入れる。 */
.cs-empty {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40); /* 水色の地に縁なしの白は地と同化する（2026-10-18 jojiさん指示。.panel と同じ枠線） */
	text-align: center;
}
.cs-empty__title {
	font-size: 17px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.cs-empty__note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	text-align: left;
}

@media (min-width: 600px) {
	.cs-count { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.cs-count b { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.cs-empty { padding: calc(40 * var(--u)); }
	.cs-empty__title { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.cs-empty__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); text-align: center; }
}

/* ---------- 末尾の導線を包む白い箱（.fl-links） ----------
 * 工事の流れ（2w）のために作ったが、お客様の声（2x）と会社概要（2z）でも
 * 同じものが要るので flow.css からここへ移した（2026-09-09。クラス名はそのまま）。
 * 地の上にボタンだけが宙に浮くと、何のセクションか分からなくなる。 */
.fl-links {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40); /* 縁なしの白は地と同化する（2026-10-18 jojiさん指示。.panel と同じ枠線） */
}

/* 箱の上に一文、その下にボタン（2026-10-18 jojiさん指示）。
 * 会社概要・お客様の声・工事の流れ・エラーコード個別のほか、エリアの .ar-links の中でも使う。
 * ボタンは同じ幅。PC は横に並び、スマホは幅が足りないので縦に落ちる。 */
.fl-links__text { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.fl-links__title { font-size: 20px; line-height: 1.5; font-weight: 900; color: var(--fig-blue-60); text-wrap: balance; word-break: auto-phrase; }
.fl-links__note { font-size: 15px; line-height: 1.7; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
.fl-links__btns .fbtn { width: 100%; max-width: 360px; }

@media (min-width: 600px) {
	.fl-links { padding: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.fl-links__title { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.fl-links__note { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }
}

/* ---------------------------------------------------------------------
 * カテゴリタブ（.fq-tabs / .fq-tab）
 * FAQ総合（2y）のために作ったが、コラム一覧（2u）でも同じものが要るので
 * faq.css からここへ移した（2026-09-09。クラス名は変えていない）。
 *
 * どちらも全幅の青（水玉）の上に白いカードで並べる。
 * 2y はページ内アンカー、2u はカテゴリページへのリンク。
 * 押すと移動するだけなので、押せることが分かる見た目にする。
 * ------------------------------------------------------------------- */
.fq-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fq-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-height: 72px;
	padding: 12px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.fq-tab:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.fq-tab__name {
	font-size: 17px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* カテゴリの絵。件数（5問）は4つとも同じで選ぶ材料にならないため、代わりに置いた（2026-10-14 jojiさんの指示）。 */
.fq-tab__ico {
	width: 30px;
	height: 30px;
	margin-bottom: 4px;
	background: var(--fig-blue-60);
	-webkit-mask: no-repeat center / contain var(--ico);
	mask: no-repeat center / contain var(--ico);
}

@media (min-width: 600px) {
	/* カテゴリは4つ（2y は 料金・工事・修理・補助金、2u は 交換・修理・費用・使い方）。 */
	.fq-tabs { grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--u)); }
	.fq-tab { min-height: calc(88 * var(--u)); }
	.fq-tab__name { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.fq-tab__ico { width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-bottom: calc(6 * var(--u)); }
}

@media (min-width: 600px) {
	/* Figma v2 の下の電話帯: 電話ブロックは上から 38.5（帯の高さ230の中央）。 */
	.cta-y__tel { position: static; }
	.cta-y__form { position: relative; top: 0; }
}

/* ---------------------------------------------------------------------
 * お支払い方法の枠（Figma: 交換ページ Frame 53 1200×529 / padding40 / 間隔20 / 角丸20 / 白）
 * template-parts/payment-methods.php。交換ページと料金表で使う（2026-10-12 に exchange.css から移した）。
 * 幅と余白は .wrap（交換ページでは比例させた .wrap）と同じ強さで競るので、.ex-pay.wrap で書く。
 * ------------------------------------------------------------------- */
.ex-pay.wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
/* 説明文: 20px / 行間36 / #364259 / 太字 */
.ex-pay__lead {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
	text-align: center;
}
.ex-pay__img { margin: 0; text-align: center; }
.ex-pay__img img { width: 100%; max-width: 840px; height: auto; margin-inline: auto; }
@media (min-width: 600px) {
	/* Figma: Frame 53 は 1220×529。内容幅1200より10pxずつ外へ出る（全メーカーの帯と同じ）。 */
	.ex-pay.wrap { max-width: calc(1220 * var(--u)); padding: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.ex-pay__lead { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); line-height: max(calc(25.2 * var(--ff)), calc(36 * var(--u))); }
}
/* 600〜1023: 枠そのものが内容幅の箱で、左右の余白を自分の padding に使っている。外側に 24 を空ける（補助金の枠と同じ）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ex-pay.wrap { max-width: calc(100% - 48px); padding-inline: 24px; }
}

/* ---------------------------------------------------------------------
 * 補助金の案内枠（Figma: 交換ページ Frame 49 / node 898:762。中の Frame 48 に白い面）
 * template-parts/subsidy-banner.php。交換ページと料金表で使う（2026-10-12 に exchange.css から移した）。
 * ------------------------------------------------------------------- */
/* Figma は「枠（Frame 49・#259EF5 の4px枠）の内側に白い面（Frame 48）」の二重構造。
 * 白面は枠のちょうど内側なので、border と background でそのまま表せる。 */
.ex-subsidy {
	position: relative;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
	overflow: hidden;
}
/* 背景の写真。右端にそろえて置く（Figma でも右半分だけに写真が見える）。 */
.ex-subsidy__bg {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
	/* Figma は枠線4pxの内側にある白い面（Frame 48）を角丸20で切り抜いている。
	 * 枠の内側の線（角丸16）で切ると写真が角に入り込みすぎるので、写真の右側の角を20で丸める。 */
	border-radius: 0 20px 20px 0;
	/* Figma では写真の上に「左は白・右へ透明」のグラデーションが重なっている。
	 * 書き出し画像にはその白が焼き込まれているので、写真が現れはじめる位置
	 * （Figma の x619）から右端まで切り出してそのまま置く。
	 * ここでさらにマスクを掛けると二重になって、写真が Figma より薄くなる。 */
}
/* 背景の飾り文字: Geist 700 131px / 行間235.8 / #C3E1FF・不透明度40%。枠の上にはみ出す。
 * 40% を掛けないと写真や文字より前に出てしまい、デザインより濃く見える。 */
.ex-subsidy__deco {
	position: absolute;
	left: 24px;
	top: -46px;
	font-family: var(--font-num);
	font-weight: 700;
	font-size: 80px;
	line-height: 1.8;
	color: var(--fig-blue-30);
	opacity: .4;
	pointer-events: none;
	user-select: none;
}
/* 幅と余白は .wrap と同じ強さで競るので、.ex-subsidy.wrap で書く。 */
.ex-subsidy.wrap { max-width: var(--wrap); padding: 32px 24px 24px; }
/* スマホは枠が画面の端に付かないよう、ほかの白い箱（.panel）と同じく左右に --gutter を空ける。 */
@media (max-width: 599.98px) {
	.ex-subsidy.wrap { max-width: calc(100% - 2 * var(--gutter)); padding: 28px 20px 24px; }
	/* 375幅で「最大◯万円」の「円」だけが次の行に落ちたので、強調部分は割らない。 */
	.ex-subsidy__line1 mark { white-space: nowrap; }
	.ex-subsidy .fbtn { padding-inline: 24px; }
}
.ex-subsidy__body { position: relative; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
/* 「受付中」の緑バッジと更新日（TOP だけ。点滅・アニメは禁止、静かに鮮度を示す）。 */
.ex-subsidy__status { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0; }
.ex-subsidy__tag {
	display: inline-block;
	padding: 2px 14px;
	border-radius: 6px;
	background: var(--c-ok);
	color: #fff;
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
}
.ex-subsidy__date { font-size: 13px; line-height: 1.6; font-weight: var(--fw-medium); color: var(--fig-gray-50); }
/* 見出し。1行目は赤で文字ごとに大きさが変わる。2行目は濃紺で28px。 */
.ex-subsidy__title { font-weight: var(--fw-bold); }
.ex-subsidy__line1,
.ex-subsidy__line1b,
.ex-subsidy__line2 { display: block; }
.ex-subsidy__line1b { font-size: 22px; line-height: 1.8; color: #d12a32; }
.ex-subsidy__line1 { font-size: 22px; line-height: 1.8; color: #d12a32; }
.ex-subsidy__line1 b  { font-size: 36px; font-weight: inherit; }
.ex-subsidy__line1 em { font-size: 41px; font-weight: inherit; font-style: normal; }
.ex-subsidy__line1 i  { font-size: 29px; font-weight: inherit; font-style: normal; }
/* 「最大◯万円」の下に敷く黄色。Figma: Rectangle 9 は 256×16 の #F6FF00 で、
 * ちょうどこの5文字の下に置かれている。 */
.ex-subsidy__line1 mark {
	background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 10px;
	color: inherit;
}
.ex-subsidy__line2 { font-size: 19px; line-height: 1.8; color: var(--fig-gray-70); }
/* スマホ（〜599）では写真を出さない（2026-10-12 jojiさんの指示）。幅が狭いと写真が文字の真後ろに来て読みにくかった。 */
@media (max-width: 599.98px) {
	.ex-subsidy__bg { display: none; }
}
@media (min-width: 600px) {
	/* Figma（現行）: 補助金のカードは 1220×417。内容幅1200より10pxずつ外へ出る（お支払いのカードと同じ）。 */
	.ex-subsidy.wrap { max-width: calc(1220 * var(--u)); padding: calc(69 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)); }
	/* Figma の枠は518。 */
	.ex-subsidy__deco { left: calc(40 * var(--u)); top: calc(-35 * var(--u)); font-size: max(calc(88 * var(--ff)), calc(131 * var(--u))); line-height: max(calc(158.4 * var(--ff)), calc(235.8 * var(--u))); letter-spacing: 0.16px; }
	/* 黄色は Figma では 256×16 の独立した図形。文字の背景として敷くと、
	 * 「大」「円」の字送りぶん（6.76＋6.3）だけ右に長くなるので、その分を削る。 */
	.ex-subsidy__line1 mark { background-size: calc(100% - calc(5 * var(--u))) calc(16 * var(--u)); }
	/* 行の高さは Figma の lineHeightPx（57.6）では合わない。
	 * 書き出し画像で文字の位置を測ると、1行目は一番大きい「◯」(60px) の1.8倍＝108、
	 * 2行目は34で、さらに8px 詰まっている。この値だと両方の行が1px以内で重なる。 */
	.ex-subsidy__tag { font-size: 16px; padding: 4px 16px; }
	.ex-subsidy__date { font-size: 15px; }
	.ex-subsidy__line1 { font-size: max(calc(24 * var(--ff)), calc(36 * var(--u))); line-height: max(calc(69.33333 * var(--ff)), calc(104 * var(--u))); }
	.ex-subsidy__line1 b  { font-size: max(calc(34 * var(--ff)), calc(50 * var(--u))); }
	.ex-subsidy__line1 em { font-size: max(calc(40 * var(--ff)), calc(60 * var(--u))); }
	.ex-subsidy__line1 i  { font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); }
	/* Figma は3か所だけ字送りを変えている（「、」-5.04 ／「大」+6.76 ／「円」+6.3）。
	 * 字送りは「その文字の次までの距離」なので、次に来る要素の余白で同じことをする。
	 * これを入れないと1行目が Figma より8px短くなる。 */
	/* 1行目は文字間 +0.6px（Figma は 補助金で、 が 159 幅、サイトは 155.5 だった）。最大の位置は据え置き。 */
	.ex-subsidy__line1 { letter-spacing: .6px; position: relative; top: calc(4.5 * var(--u)); }
	.ex-subsidy__line1 mark { margin-left: calc(-7.1 * var(--u)); letter-spacing: 0; }
	.ex-subsidy__line1 em { margin-left: calc(9.5 * var(--u)); }
	.ex-subsidy__line1 i { margin-left: 1.5px; margin-right: calc(6.3 * var(--u)); }
	/* v2 で増えた2行目「安くなります！」。1行目の枠（104）の下端から 22.5px 食い込ませて、行の中心を Figma の位置（1行目の62px下）に置く。 */
	.ex-subsidy__line1b { font-size: max(calc(24 * var(--ff)), calc(36 * var(--u))); line-height: max(calc(43.33333 * var(--ff)), calc(65 * var(--u))); margin-top: calc(-23 * var(--u)); letter-spacing: .6px; }
	.ex-subsidy__line2 { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); line-height: max(calc(23.07143 * var(--ff)), calc(34 * var(--u))); margin-top: calc(4 * var(--u)); }
	/* 見出しとボタンの間。数値は文字の実際の描画位置から逆算したもの。 */
	.ex-subsidy__body { gap: calc(26.5 * var(--u)); }
	/* 黄色の下線は文字の足元から3.5px上（Figma: Rectangle 9 は y7231..7246）。 */
	.ex-subsidy__line1 mark { background-position: 0 calc(100% - 1.5px); }
}
/* 600〜1023: 枠そのものが内容幅の箱で、左右の余白を自分の padding に使っている。外側に 24 を空ける。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ex-subsidy.wrap { max-width: calc(100% - 48px); padding-inline: 24px; }
}

/* ---------------------------------------------------------------------
 * 不安の吹き出し（Figma: 交換ページ Frame 40）
 * 交換ページとメーカー一覧で使う（2026-10-13 に exchange.css から移した）。
 * ------------------------------------------------------------------- */
/* 不安の吹き出し。Figma: Frame 40 1103×299 / 上余白40 / 間隔20 / 横。
 * 中身は上下中央そろえ（イラスト259 に対し右側211、上下に24ずつ空く）。 */
/* スマホは 吹き出し → イラスト → 答え の順に縦に積む（2026-10-12 jojiさんと決定）。
 * 横並びのままだと文章の幅が105pxしかなく、4〜5文字ずつ折れていた。PC は横並び（600以上の指定） */
.ex-anxiety {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding-top: 40px;
}
.ex-anxiety__illust { flex: none; order: 2; width: 130px; }
.ex-anxiety__illust img { width: 100%; height: auto; }
/* 右側。Figma: Frame 65 838×211 / 間隔20 / 縦 */
.ex-anxiety__body { display: contents; }
.ex-anxiety__bubble { order: 1; align-self: stretch; text-align: center; }
.ex-anxiety__answer { order: 3; align-self: stretch; }
/* 語の途中で折れないよう、文節ごとにまとめる。PC は1行に収まるので普通の文字に戻す */
.ex-anxiety__ph { display: inline-block; }
/* 吹き出し: 838×96 / padding 20 55 / 角丸80 / 白 / 文字40px・行間48・#0B56A2
 * 枠線 #C3E1FF 4px（内側） */
.ex-anxiety__bubble {
	position: relative;
	padding: 16px 28px;
	border-radius: 80px;
	background: #fff;
	border: 4px solid var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 20px;
	line-height: 1.2;
	font-weight: var(--fw-bold);
}
/* 吹き出しの尻尾。Figma では白い丸が2つ（32×32 と 16×16）左下に置かれている。
 * どちらも #C3E1FF の4px枠つき。 */
.ex-anxiety__bubble::before,
.ex-anxiety__bubble::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	background: #fff;
	border: 4px solid var(--fig-blue-30);
}
.ex-anxiety__bubble::before { width: 20px; height: 20px; left: -6px; bottom: -8px; }
.ex-anxiety__bubble::after  { width: 10px; height: 10px; left: -18px; bottom: -20px; }
/* 答え: Frame 67 772×95 / 間隔20 / 横。三角は上下中央（Figma の実描画で確認）。 */
.ex-anxiety__answer { display: flex; align-items: center; gap: 20px; }
/* 二重の三角（早送りの記号）。
 * Figma の JSON は Group 59×59 / Polygon 37×59 を2つ、と言っているが、
 * 書き出し画像で測ると実際に描かれているのは全体 48×41 で、枠（59幅）の中の
 * 左から9px・上下中央に置かれている。JSON ではなく描画のほうに合わせる。
 *
 * 三角の角は半径4で丸めてある。CSS の border で作る三角形は角を丸められないので、
 * 書き出した形をマスクにして色を付ける（パンくずの区切りやボタンの矢印と同じ）。 */
.ex-anxiety__mark {
	flex: none;
	width: 30px;
	height: 21px;
	background: var(--fig-blue-60);
	-webkit-mask: no-repeat 4px center / 24px 21px url("../img/icon-double-tri.png");
	mask: no-repeat 4px center / 24px 21px url("../img/icon-double-tri.png");
}
/* 本文: 24px / 行間は文字サイズの1.8倍 / #364259 / 太字。
 * Figma の lineHeightPx 43.2 は 24px の行での値で、赤い28pxの行は 50.4 になる。
 * 固定pxではなく倍率で書くと、両方の行が Figma と同じ高さになる。 */
.ex-anxiety__text {
	font-size: 16px;
	line-height: 1.8;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
/* Figma では「必ず工事前にご説明しご了承いただいて」の18文字だけ
 * 赤（#E4011D）かつ 24px→28px に大きくなる（characterStyleOverrides）。 */
.ex-anxiety__text strong { color: var(--fig-red); font-weight: inherit; font-size: 1.1667em; }
@media (min-width: 600px) {
	/* 不安の吹き出し（Figma Frame 40）: 1086×322 / 上余白40 / 間隔20。イラスト228×282、右側838×211。
	 * 右側はイラストの高さに対して上下中央（上から 40 + 35.5 = 75.5）。 */
	.ex-anxiety { flex-direction: row; width: calc(1086 * var(--u)); margin-inline: auto; padding-top: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.ex-anxiety__illust { order: 0; width: calc(228 * var(--u)); }
	.ex-anxiety__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; gap: calc(20 * var(--u)); max-width: calc(838 * var(--u)); }
	.ex-anxiety__bubble, .ex-anxiety__answer { order: 0; align-self: auto; text-align: start; }
	.ex-anxiety__ph { display: inline; }
	/* 吹き出し: padding 20 55 / 文字40px・行間48 */
	.ex-anxiety__bubble { padding: calc(20 * var(--u)) calc(55 * var(--u)); font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); line-height: max(calc(32.4 * var(--ff)), calc(48 * var(--u))); }
	/* Figma: 尻尾は丸が2つ。吹き出し（838×96）の外枠の左上を原点にして
	 *   32×32 … 左-3・上から66.5 / 16×16 … 左-3・上から81.5（Frame 40 直下で X245 Y157）。
	 * CSS の left/bottom は枠線（4px）の内側が基準なので、枠線の分を引いて書く。
	 *   left = -3 - 4 = -7 / bottom = (96-4) - (上 + 高さ) 。32→-6.5、16→-5.5 */
	.ex-anxiety__bubble::before { width: calc(32 * var(--u)); height: calc(32 * var(--u)); left: calc(-7 * var(--u)); bottom: calc(-6.5 * var(--u)); }
	.ex-anxiety__bubble::after  { width: calc(16 * var(--u)); height: calc(16 * var(--u)); left: calc(-7 * var(--u)); bottom: calc(-5.5 * var(--u)); }
	/* 三角: 書き出し画像の実測で全体48×41。枠は59px幅で、左から9pxの位置。 */
	.ex-anxiety__mark {
		width: calc(59 * var(--u)); height: calc(41 * var(--u));
		-webkit-mask: no-repeat calc(9 * var(--u)) center / calc(48 * var(--u)) calc(41 * var(--u)) url("../img/icon-double-tri.png");
		mask: no-repeat calc(9 * var(--u)) center / calc(48 * var(--u)) calc(41 * var(--u)) url("../img/icon-double-tri.png");
	}
	/* 本文: 24px。行間は倍率のまま（赤い28pxの行は 50.4 になる） */
	.ex-anxiety__text { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
}

/* ---------------------------------------------------------------------
 * 症状から調べる（.rp-symptoms）
 * 修理TOP（2d）のために作ったが、エラーコード個別（2e）の「この症状の解決ガイド」と
 * 症状別（2k）の関連する症状でも使うので、repair.css からここへ移した（2026-10-22。クラス名はそのまま）。
 * 文字が主。「その他の症状」だけ枠線グレーで格下げ（制作メモ）。
 * ------------------------------------------------------------------- */
/* スマホ（〜599）は1列。2列だと1枚が約150pxで「お湯が出ない・ぬるい」が3〜4行に割れていた（2026-10-12）。
 * 600 以上は2列（下の PC の指定）。 */
.rp-symptoms { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* 文字はカードの中央。アイコンだけカードの左端に固定して、縦に見たとき
 * 6枚のアイコンが1列にそろうようにする（中身を左寄せにすると中央そろえが崩れるため、
 * アイコンを絶対配置で外に出している）。
 * 左右の余白は同じ値にする。片側だけ広げると文字の中央がカードの中央からずれる。 */
.rp-symptom {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 12px 48px;
	border-radius: 20px;
	background: #fff;
	color: var(--fig-blue-60);
	font-size: 17px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.rp-symptom:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* 2行になるときは語の切れ目で折り、行の長さもそろえる（「お湯が出ない・ぬ｜るい」と割れていた）。 */
.rp-symptom__name { word-break: auto-phrase; text-wrap: balance; }
/* アイコンは「従」。文字より小さく、色も文字と同じにして目立たせない
 * （制作メモ「文字が主、アイコンが従」）。
 * 単色の SVG をマスクとして使い、色は CSS 側で付ける。 */
.rp-symptom__ico {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain var(--ico);
	mask: no-repeat center / contain var(--ico);
	opacity: .55;
}
/* ワイヤーの制作メモは「その他の症状だけ枠線グレーで格下げ」だが、
 * 6枚とも同じ配色にする（2026-09-08 指示）。クラスは残してあるので、
 * 格下げに戻すときはここに枠線と文字色を書けばよい。 */
@media (min-width: 600px) {
	/* 症状：2列×3（ワイヤーの指定どおり） */
	.rp-symptoms { grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
	.rp-symptom { min-height: calc(104 * var(--u)); font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); border-radius: calc(20 * var(--u)); padding: calc(12 * var(--u)) calc(72 * var(--u)); }
	.rp-symptom__ico { left: calc(28 * var(--u)); width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
}