/* =====================================================================
 * repair.css — 修理TOP（ワイヤーフレーム 2d）だけの指定
 * ---------------------------------------------------------------------
 * 面（全幅の青・全幅の水色・白い箱・セクションの並び・FAQ）は
 * components.css の共通部品。ここには 2d 固有のものだけを書く。
 *
 * 【このページの面の配分】
 *   FV            交換ページと同じ青の箱（hero-v2.css・写真なし）。電話はオレンジの幅いっぱいのボタン
 *   症状から調べる 全幅の青（水玉）← このページの主役
 *   エラー検索/費用/エリア 白い箱（.panel）
 *   修理と交換     地の上に白いカード
 *   修理の事例     全幅の水色（.cases-block）
 *   FAQ           地の上に白いカード
 *   CTA           黄色の帯
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV — 電話を最大化する（制作メモ「電話ボタンを画面幅いっぱい・最大サイズ」）
 * ------------------------------------------------------------------- */
/* 修理TOP の FV は交換ページと同じ形（hero-v2.css）。写真は敷かず、ここでは見出しの大きさだけ決める（2026-10-12 A案）。
 * 1行目は交換ページのタイトルより小さく、2行目（最短即日でお伺いします。）を黄色で大きく見せる。 */
.hero--rp .hero__title { font-size: 20px; line-height: 1.4; }
.hero--rp .hero__seg { display: inline-block; }
/* 説明文の改行はスマホでは消し、語のまとまり（.hero__seg）の切れ目で折り返す。 */
@media (max-width: 599.98px) { .hero--rp .rp-br { display: none; } }
/* 間隔は .hero__body の gap で取るので、個別の余白は消す。 */
.hero--rp .hero__sub,
.hero--rp .rp-sublink { margin: 0; }

/* 症状別ページ（2k）の FV には写真を敷かない。交換ページの箱から写真の層だけ外す。 */
.hero--repair .hero__box::after { content: none; }
.hero--repair .hero__catch { gap: 8px; }
.hero--repair .hero__catch-label--strong { font-size: 24px; color: var(--fig-red); padding-block: 4px; }
.hero--repair .hero__sub { margin-bottom: 24px; }
/* 症状ページで冒頭の説明が未入力のときは、バッジのすぐ下に電話ボタンが来る。説明文があるときと同じ間隔を空ける。 */
.sy-badges + .rp-tel { margin-top: 24px; }

/* 幅いっぱいの電話ボタン（.rp-tel）は、お問い合わせ（2f）でも同じものを使うため
 * components.css へ移した（クラス名はそのまま）。 */

/* フォームへの導線は電話ボタンより格下げする（制作メモ「文字リンク程度」）。
 * 白い線だけの小さなボタンにする。塗りが無いので電話ボタンより目立たず、押せる場所ははっきりする（2026-10-14 jojiさんと4案から決定）。 */
.rp-sublink {
	position: relative;
	z-index: 3;
	margin-top: 16px;
	text-align: center;
	font-size: 14px;
}
.rp-sublink a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0 10px;
	padding: 10px 24px;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 100px;
	color: #fff;
	font-weight: var(--fw-bold);
	line-height: 1.5;
	text-decoration: none;
	transition: background .15s ease;
}
.rp-sublink a:hover { background: rgba(255, 255, 255, .12); }
/* 矢印はほかのボタン（.fbtn）と同じ絵。後ろの語のまとまりに付けて、矢印だけが次の行に落ちないようにする。 */
.rp-sublink a span:last-child::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 16px;
	margin-left: 10px;
	vertical-align: -2px;
	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");
}
/* 1行に収まらない幅（〜410px くらい）では「お急ぎでない方は」「無料見積もりフォームへ」の切れ目で2行に折る。
 * 1行に収めるには文字を12px 前後まで小さくする必要があり、読みにくくなるため。 */
.rp-sublink a span { display: inline-block; }

/* 症状から調べる（.rp-symptoms）は、エラーコード個別（2e）と症状別（2k）でも使うので components.css へ移した（2026-10-22）。 */

/* ---------------------------------------------------------------------
 * エラーコード検索
 * ------------------------------------------------------------------- */
.rp-search { display: grid; gap: 12px; }
.rp-search__select,
.rp-search__input {
	padding: 14px 16px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: 16px;
	color: var(--c-ink);
}
.rp-search__select:focus,
.rp-search__input:focus { outline: 2px solid var(--fig-blue-40); outline-offset: 1px; }
.rp-search__btn {
	padding: 14px 32px;
	border: 2px solid var(--fig-blue-60);
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 18px;
	line-height: 1.2;
	font-weight: var(--fw-bold);
	box-shadow: var(--shadow-btn);
	transition: transform .15s ease;
}
.rp-search__btn:hover { transform: translateY(-2px); }

/* ---------------------------------------------------------------------
 * 修理費用の目安
 * 金額はまだ「◯〜◯万円」。数字が入っていないので大きくしない。
 * ------------------------------------------------------------------- */
.rp-costs { display: flex; flex-direction: column; gap: 12px; }
.rp-cost {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-radius: 12px;
	background: var(--fig-blue-20);
}
.rp-cost__name {
	font-size: 16px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.rp-cost__yen {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--c-warm);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * 修理と交換、どちらがお得？
 * 図解（判断フローチャート）はデザイン待ちのため、いまは文章だけ。
 * ------------------------------------------------------------------- */
.rp-judge {
	padding: 24px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40); /* 縁は白い箱（.panel）と同じ */
	text-align: center;
}
.rp-judge__lead {
	word-break: auto-phrase; /* スマホで「修理｜費」と語の途中で割れないように */
	text-wrap: balance;
	font-size: 20px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 「設置10年」「修理費5万円」は見出しと同じ太さのまま（黄色の線は金額にだけ引く。2026-10-14 jojiさんの指示）。 */
.rp-judge__lead b { font-weight: inherit; }
.rp-judge__text {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.rp-judge__text strong { color: var(--fig-red); font-weight: var(--fw-bold); }

/* --- 判断フローチャート（D1）---
 * 質問1・質問2・交換を順にたどる。599 以下は四角いカードを縦に積み、間に▼を置く（2026-10-16 jojiさんが F を選んだ）。
 * 600 以上は矢羽根でつないで右向きの1本の矢印に見せる（タブレットは D）。
 * 進むほど面の色を濃くして、行き着く先が交換だと分かるようにする。 */
.rp-flow { display: flex; flex-direction: column; gap: 10px; word-break: auto-phrase; }
.rp-flow__arrow { display: flex; flex-direction: column; }
.rp-flow__seg {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-radius: 12px;
	color: var(--fig-blue-60);
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
}
.rp-flow__step { display: flex; justify-content: center; height: 26px; }
.rp-flow__step::after { content: ""; margin-top: 7px; border: 11px solid transparent; border-top: 13px solid var(--fig-blue-60); border-bottom: 0; }
.rp-flow__seg--1 { background: var(--fig-blue-20); }
.rp-flow__seg--2 { background: var(--fig-blue-30); }
.rp-flow__seg--ex {
	flex-direction: column;
	justify-content: center;
	padding: 20px 18px;
	border-radius: 16px;
	background: var(--fig-blue-60);
	text-align: center;
}
.rp-flow__no { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fig-blue-60); color: #fff; font: 700 15px/1 var(--font-num); }
.rp-flow__yes,
.rp-flow__down span { padding: 2px 14px; border-radius: 999px; font-size: 14px; line-height: 1.6; font-weight: var(--fw-bold); white-space: nowrap; }
.rp-flow__yes { flex: none; margin-left: auto; background: var(--fig-blue-60); color: #fff; }
.rp-flow__nos { display: none; }
.rp-flow__down span { border: 2px solid var(--fig-blue-60); background: #fff; color: var(--fig-blue-60); }
.rp-flow__title { font-size: 22px; line-height: 1.4; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
.rp-flow__seg--ex .rp-flow__title { color: #fff; }
.rp-flow__title b { color: var(--fig-yellow); font-weight: inherit; }
.rp-flow__lead { font-size: 15px; line-height: 1.7; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
/* 下線はサイト共通の黄色い線（料金表・TOP と同じ太さ 10px）。2026-10-16 jojiさんの指示。 */
.rp-flow__lead u { text-decoration: none; background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 10px; }
.rp-flow__repair { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 20px; background: #fff; text-align: center; }
.rp-flow .rp-flow__btn { padding: 12px 22px; font-size: 16px; line-height: 1.4; white-space: nowrap; }
.rp-flow .rp-flow__btn--ex { background: #fff; color: var(--fig-blue-60); border-color: #fff; }

/* =====================================================================
 * ここから下は症状別修理（2k）— taxonomy-error_symptom.php
 * ---------------------------------------------------------------------
 * 2d と同じファイルに置いてあるのは、FV（無地の青＋幅いっぱいの電話ボタン）を両ページで使うため
 * （メーカーの 2h-0／2h と同じ形）。症状カード（.rp-symptom）は components.css にある。
 * 番号つきの手順（.reset-steps）と原因（.cause-list）は components.css にある。
 * ===================================================================== */

/* H1 の後半は症状名。2d は言い切りを赤にしているが、ここでは濃紺のままにする。
 * 赤は「緊急度：高」のバッジで使うので、同じ画面で2か所に出すと
 * どちらが警告なのか分からなくなる。 */
.hero--symptom .hero__catch-label--strong { color: var(--fig-blue-60); }

/* --- 緊急度と「自分で直るケースあり」（H1直下） ---
 * どちらも白い枠線のバッジ。面を塗ると、すぐ下の電話ボタンより目立って誘導を妨げる（2026-10-12 フィードバック）。
 * 緊急度は3本の棒の本数で段階を見せ、点いた棒だけ色を付ける（2026-10-14、3案から B案）。
 *   高＝赤・中＝黄・低＝緑。濃い青の上で読めるよう、tokens.css の緊急度の色より明るくしてある。
 *   中を橙にしないのは、電話ボタンのオレンジと見分けがつかなくなるため。 */
.sy-badges {
	position: relative;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 16px;
}
.sy-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 15px;
	border: 1px solid #fff;
	border-radius: 6px;
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
}
.sy-badge--high { --sy-meter: #ff7a8a; }
.sy-badge--mid  { --sy-meter: var(--fig-yellow); }
.sy-badge--low  { --sy-meter: #6ee7a8; }
.sy-meter { display: inline-flex; align-items: flex-end; gap: 3px; }
.sy-meter i { display: block; width: 6px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.sy-meter i:nth-child(1) { height: 8px; }
.sy-meter i:nth-child(2) { height: 12px; }
.sy-meter i:nth-child(3) { height: 16px; }
.sy-meter i.is-on { background: var(--sy-meter); }
/* 「自分で直るケースあり」は状態ではなく補足なので、棒を付けない。 */

/* --- 手順が未入力のときに青い面へ置く白いカード --- */
.sy-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 20px;
	background: #fff;
}
.sy-card__title {
	font-size: 17px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.sy-card__note {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* --- 修理費用の目安 ---
 * 項目名と金額の2列。金額はオレンジ（数字はオレンジという決め）。 */
.sy-costs { display: flex; flex-direction: column; gap: 0; margin: 0; }
.sy-costs__row {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 12px;
	padding: 14px 0;
	font-size: 16px;
	line-height: 1.7;
}
.sy-costs__row + .sy-costs__row { border-top: 2px solid var(--fig-blue-30); }
.sy-costs__row:first-child { padding-top: 0; }
.sy-costs__row:last-child { padding-bottom: 0; }
.sy-costs dt { font-weight: var(--fw-bold); color: var(--fig-gray-70); }
.sy-costs dd {
	margin: 0;
	white-space: nowrap;
	font-size: 20px;
	font-weight: 900;
	color: var(--c-warm);
}

/* --- エラーコード（症状⇄エラーの相互リンク） ---
 * 水色の枠のタイル。スマホ1列・600〜1023 は2列・1024 以上は3列（2026-10-14、3案から A案）。
 * 1段目にコード（数字の書体・オレンジ）とメーカー名のラベル、2段目に内容、右下に矢印。
 * メーカー名は内容と混ざって見えないよう、塗りのラベルにして右に寄せる。 */
.sy-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; list-style: none; padding: 0; }
.sy-codes li { display: flex; }
.sy-code {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 12px 34px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 14px;
	background: #fff;
	transition: border-color .15s ease;
}
.sy-code:hover { border-color: var(--fig-blue-40); }
.sy-code::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 12px;
	width: 14px;
	height: 16px;
	background: var(--fig-blue-40);
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow.png");
	mask: no-repeat center / contain url("../img/icon-arrow.png");
}
.sy-code__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.sy-code__no {
	font-family: var(--font-num);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--c-warm);
}
.sy-code__maker {
	padding: 2px 8px;
	border-radius: 100px;
	background: var(--fig-blue-20);
	color: var(--fig-blue-60);
	font-size: 11px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	white-space: nowrap;
}
.sy-code__desc {
	font-size: 13px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
	word-break: auto-phrase; /* 「異｜常」のように語の途中で割れないようにする */
	overflow-wrap: anywhere; /* 1語が枠より長いときだけ語の途中で折る（タイルが押し広げられないように） */
}
/* スマホは1列（2列だと「ミスト混合温度異常」のような長い語が途中で折れる）。
 * 横長になるので、矢印は右下ではなく右の中央に置き、下の余白を詰める。
 * 「エラーコードから調べる」が箱の中で2行に折れるので、左右の余白と文字を詰める。 */
@media (max-width: 599.98px) {
	.sy-codes { grid-template-columns: minmax(0, 1fr); }
	.sy-code { padding: 12px 40px 12px 14px; gap: 4px; }
	.sy-code::after { top: 50%; bottom: auto; right: 14px; transform: translateY(-50%); }
	.sy-code__head { justify-content: flex-start; gap: 4px 12px; }
	.sy-codes ~ .ex-btns .fbtn,
	.sy-judge__btns .fbtn { padding-inline: 16px; font-size: min(17px, 4.2vw); }
}

/* --- 修理と交換の判断基準 --- */
/* 判断基準は修理TOPの .rp-judge をそのまま使う。白い箱（.panel）の中に置くので、箱の余白と面は外す。
 * ボタン2つは同じ幅（スマホは縦積みで幅いっぱい、600〜1023 は縦積みで長いほうの幅、1024 以上は横並び）。
 * 幅を中身に合わせると「同じ症状の修理事例を見る」がスマホで2行に折れ、2つの幅もそろわなかった。 */
.sy-judge { padding: 0; background: none; border: 0; }
.sy-judge__btns { align-items: stretch; }
.sy-judge__btns .fbtn { width: 100%; max-width: 520px; margin-inline: auto; white-space: nowrap; }

/* =====================================================================
 * PC（600 以上。交換ページと同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV（修理TOP）: 写真は敷かない（2026-10-12 jojiさんの指示）。面は無地の青 --- */
	.hero--rp .hero__title { font-size: max(calc(22 * var(--ff)), calc(36 * var(--u))); }

	/* --- FV（症状別） --- */
	.hero--repair .hero__catch { gap: calc(12 * var(--u)); }
	.hero--repair .hero__catch-label--strong { font-size: max(calc(30 * var(--ff)), calc(44 * var(--u))); padding: calc(4 * var(--u)) calc(24 * var(--u)); }
	.hero--repair .hero__sub { margin-bottom: calc(32 * var(--u)); }
	.sy-badges + .rp-tel { margin-top: calc(32 * var(--u)); }
	.rp-sublink { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); margin-top: calc(20 * var(--u)); }

	/* --- エラー検索：横一列 --- */
	.rp-search { grid-template-columns: 1fr 1fr auto; gap: calc(16 * var(--u)); align-items: center; }
	.rp-search__select,
	.rp-search__input { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(16 * var(--u)) calc(20 * var(--u)); }
	.rp-search__btn { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); padding: calc(16 * var(--u)) calc(40 * var(--u)); }

	/* --- 修理費用：2列 --- */
	.rp-costs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(20 * var(--u)); }
	.rp-cost { padding: calc(18 * var(--u)) calc(24 * var(--u)); }
	.rp-cost__name { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	/* 金額はまだ「◯〜◯万円」。数字が入っていないので、文字だけ大きくしない
	 * （丸が3つ並んで見えるだけになる）。 */
	.rp-cost__yen { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }

	/* --- 修理と交換 --- */
	.rp-judge { padding: calc(40 * var(--u)); }
	.rp-judge__lead { font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
	.rp-judge__lead b { background-size: 100% 14px; }
	.rp-judge__text { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); margin-top: calc(16 * var(--u)); }


	/* ----- 症状別修理（2k） ----- */
	.sy-badges { gap: calc(12 * var(--u)) calc(20 * var(--u)); margin-top: calc(24 * var(--u)); }
	.sy-badge { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); padding: calc(7 * var(--u)) calc(21 * var(--u)); gap: calc(12 * var(--u)); }
	.sy-meter { gap: calc(4 * var(--u)); }
	.sy-meter i { width: calc(7 * var(--u)); }
	.sy-meter i:nth-child(1) { height: calc(9 * var(--u)); }
	.sy-meter i:nth-child(2) { height: calc(14 * var(--u)); }
	.sy-meter i:nth-child(3) { height: calc(19 * var(--u)); }

	.sy-card { padding: calc(40 * var(--u)); gap: calc(16 * var(--u)); }
	.sy-card__title { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.sy-card__note { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }

	.sy-costs__row { padding: calc(18 * var(--u)) 0; font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.sy-costs dd { font-size: max(calc(18 * var(--ff)), calc(26 * var(--u))); }

	.sy-codes { gap: calc(20 * var(--u)); }
	.sy-code { padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(48 * var(--u)); gap: calc(10 * var(--u)); }
	.sy-code::after { right: calc(20 * var(--u)); bottom: calc(18 * var(--u)); }
	.sy-code__no { font-size: max(calc(20 * var(--ff)), calc(32 * var(--u))); }
	.sy-code__maker { padding: calc(3 * var(--u)) calc(12 * var(--u)); font-size: max(calc(12 * var(--ff)), calc(14 * var(--u))); }
	.sy-code__desc { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	.sy-judge { padding: 0; }

	/* 関連する症状は3件。2列だと3枚目だけが左に取り残されるので、
	 * 幅の広い画面では3列にして1行に収める（2d の6枚は2列×3のまま）。 */
	.sy-related { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 600px) {
	/* 判断フローチャート：600 以上は右向きの矢印。「いいえ」の矢印は質問1・質問2の真下に置き、修理の帯は2つの質問の幅にそろえる。 */
	.rp-flow { gap: 0; }
	.rp-flow__arrow { flex-direction: row; align-items: stretch; }
	.rp-flow__step { display: none; }
	.rp-flow__seg {
		flex: 1;
		border-radius: 0;
		padding: calc(22 * var(--u)) calc(44 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
		font-size: max(calc(16 * var(--ff)), calc(19 * var(--u)));
		clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
	}
	.rp-flow__seg ~ .rp-flow__seg {
		margin: 0 0 0 -12px;
		padding-top: calc(22 * var(--u));
		padding-left: calc(48 * var(--u));
		clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%, 28px 50%);
	}
	.rp-flow__seg--ex {
		flex: 1.2;
		gap: calc(14 * var(--u));
		padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u)) calc(52 * var(--u)) !important;
		border-radius: 0 20px 20px 0;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 28px 50%) !important;
	}
	.rp-flow__nos { display: grid; grid-template-columns: 1fr 1fr 1.2fr; padding: 10px 0; }
	.rp-flow__down { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
	.rp-flow__down::after { content: ""; border: 10px solid transparent; border-top: 12px solid var(--fig-blue-60); border-bottom: 0; }
	.rp-flow__repair { flex-direction: row; justify-content: space-between; width: calc(200% / 3.2); box-sizing: border-box; padding: calc(20 * var(--u)) calc(28 * var(--u)); text-align: left; }
	.rp-flow__lead { display: none; }
	.rp-flow__title { font-size: max(calc(22 * var(--ff)), calc(26 * var(--u))); }
}
/* タブレットは矢羽根1つが 230px ほどしかないので、番号・質問・「はい」を縦に積み、とがりと文字を小さくする（D）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.rp-flow__seg { flex-direction: column; align-items: flex-start; justify-content: center; padding: 18px 36px 18px 18px; font-size: 16px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); }
	.rp-flow__seg ~ .rp-flow__seg { margin-left: -10px; padding: 18px 36px 18px 34px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%, 22px 50%); }
	.rp-flow__yes { margin-left: 0; }
	.rp-flow__seg--ex { align-items: center; gap: 12px; padding: 20px 16px 20px 36px !important; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 22px 50%) !important; }
	.rp-flow__seg--ex .rp-flow__title { font-size: 20px; }
	.rp-flow .rp-flow__btn { padding: 10px 16px; font-size: 15px; }
	.rp-flow__repair { flex-direction: column; justify-content: center; text-align: center; }
}
/* エラーコードのタイルは 1024 以上だけ3列。600〜1023 は3列だとメーカー名がコードの下に落ちる行と落ちない行が混ざるので2列のまま。 */
/* 600〜1023 は縦積みのまま、幅いっぱいにせず長いほう（「同じ症状の修理事例を見る」）の幅にそろえる。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.sy-judge__btns { display: grid; grid-template-columns: max-content; justify-content: center; }
	.sy-judge__btns .fbtn { width: auto; max-width: none; margin: 0; }
}
@media (min-width: 1024px) {

	.sy-codes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* 判断基準のボタンは 1024 以上だけ横並び。600〜1023 は箱が狭く、横に並べると「同じ症状の修理事例を見る」が収まらない。 */
	.sy-judge__btns { flex-direction: row; justify-content: center; }
	.sy-judge__btns .fbtn { width: calc(480 * var(--u)); margin: 0; }
}