/* =====================================================================
 * errorcode.css — エラーコードの3ページ（2e 個別 / 2l 検索TOP / 2m メーカー別）
 * ---------------------------------------------------------------------
 * 2e のデザインは Figma に無い（Figma にあるのは交換サービス 1枚だけ）。
 * そのため、交換ページで確定した部品と数値だけを使って組んでいる。
 * 語彙は ~/journal/projects/sakabo/notes/2026-09-10_デザイン横展開の進め方.md §2 のカタログどおりで、
 * 新しい形は作っていない。
 *
 * 【面の配分】縦の抑揚はここで作る。
 *   結論ボックス    白い箱（4pxの青枠）＋緊急度バッジを右上。見出しはワイヤーの結論文
 *   リセット手順    **全幅の青（水玉）に白いカード** ← このページの主役
 *   症状ガイド      青い箱（水玉）に修理TOPの症状ボタン（2026-10-14）
 *   原因／費用      地の上の白い箱
 *   スタッフコメント 白いカード＋青い丸アイコン
 *   LINE＋電話      LINE緑の枠の白い箱＋3つの手順（2026-10-14）
 *   関連エラー5件   地の上の白いカード
 *   交換の案内      白い箱
 *   FAQ             白いカード＋グレーの水玉（TOPと同じ）
 *   ページ末尾      黄色のCTA帯
 *
 * カード（.ec-card）と緊急度バッジ（.ec-urgency）は3ページで同じものを使う。
 * pages.css にある旧スタイル（1pxの灰枠・角丸12）は症状ページ（2k）などが
 * まだ使っているので消さず、このファイルで上書きしている。
 * ===================================================================== */

/* DB から来る本文（対処方法・修理費用）。 */
.err-text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 結論ボックス（FV）
 * 2e 制作メモ「DB冒頭結論3行は背景色つき結論ボックスで囲む。緊急度バッジを右上に」。
 * 地（#F5FAFD）の上に白＋4pxの青枠。2026-10-14 に青い FV も試したが見づらく、この形に戻した。
 * コードは1行目に分けてオレンジで大きく（数字はオレンジという決め）。
 * ワイヤーの結論文は、見出し「{メーカー}のエラー「{code}」は、」と水色の面の意味に分けて出す。
 * ------------------------------------------------------------------- */
.err-fv { padding-block: 24px 0; } /* 他のページの FV（.hero--page）と同じ */
.err-fv__box {
	position: relative;
	padding: 24px 20px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
/* メーカー名。交換ページの地域バッジと同じ（水色の面に青文字・角丸6）。 */
.err-fv__eyebrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.err-fv__maker {
	padding: 2px 14px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 15px;
	font-weight: var(--fw-bold);
}
.err-fv__code {
	margin-top: 10px;
	font-family: var(--font-num);
	font-size: 56px;
	line-height: 1.05;
	font-weight: 800;
	color: var(--c-warm);
}
.err-fv__title { margin-top: 8px; font-size: 18px; line-height: 1.5; font-weight: var(--fw-bold); color: var(--fig-blue-60); }
/* 意味は水色の面にまとめる。1行目は太字、2行目以降は普通の太さ。 */
.err-fv__panel { margin-top: 10px; padding: 16px 18px; border-radius: 12px; background: var(--fig-blue-20); }
.err-fv__mean { font-size: 17px; line-height: 1.8; font-weight: var(--fw-bold); color: var(--fig-blue-80); }
.err-fv__mean-sub { margin-top: 6px; font-size: 15px; line-height: 1.8; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
/* 案内文は意味より目立たせない。 */
.err-fv__sub { margin-top: 12px; font-size: 14px; line-height: 1.8; font-weight: var(--fw-medium); color: var(--fig-gray-50); }

/* 緊急度バッジ（赤・オレンジ・緑の3色）。狭い画面では見出しに重なるので上に積み、
 * 1024 以上で右上へ移す。 */
.err-fv .ec-urgency {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	padding: 4px 14px;
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
}
.err-fv .ec-urgency.ec-urgency--red    { background: var(--c-urgency-stop); }
.err-fv .ec-urgency.ec-urgency--orange { background: var(--c-urgency-check); }
.err-fv .ec-urgency.ec-urgency--green  { background: var(--c-urgency-self); }

/* ---------------------------------------------------------------------
 * リセット・解除の手順（このページの主役）
 * 面は .dots-block（全幅の青＋水玉）。その上に白いカードを並べる。
 * このセクションだけ .page-contents の外にあるので、上との間隔を自前で持つ。
 * パンくずのすぐ後ろに来るため、実際の値は pages.css の .breadcrumb--after-fv + section が決める。
 * ------------------------------------------------------------------- */
.err-reset { margin-top: 48px; }

/* 番号つきの手順（.reset-steps）と原因の箇条書き（.cause-list）は、
 * 症状別修理（2k）でも同じものを使うため components.css へ移した
 * （2026-09-09。クラス名はそのまま）。 */

/* 対処方法：前置き（青い面の上の白文字）→ 手順ごとの白いカード → 改善しないとき（薄いオレンジのカード）。 */
.err-act__intro { margin-bottom: 12px; font-size: 16px; font-weight: var(--fw-bold); color: #fff; }
.err-act__list { display: flex; flex-direction: column; gap: 10px; }
.err-act__card { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #fff; }
.err-act__no {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--fig-blue-60);
	color: #fff;
	font-family: var(--font-num);
	font-size: 17px;
	font-weight: 700;
}
.err-act__body { padding-top: 4px; font-size: 17px; line-height: 1.6; font-weight: var(--fw-bold); color: var(--c-ink); }
.err-act__body small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.7; font-weight: var(--fw-medium); color: var(--fig-gray-70); }
/* 左に色の線を付けない（2026-10-14 jojiさんの指示）。背景色だけで分ける。 */
.err-act__after { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: #fff4e8; font-size: 14px; line-height: 1.8; color: #6b3d0b; }
.err-act__after-title { font-size: 15px; font-weight: var(--fw-bold); color: #c25a00; }

/* リモコンの写真枠（撮影待ち）。青い面の上なので白く抜く。 */
.err-remote {
	width: 100%;
	margin: 0;
	border-radius: 20px;
	background: rgba(255, 255, 255, .85);
	border-color: var(--fig-blue-60);
}
/* 青い面の上の補足は白で読む。 */
.err-reset .panel-note { color: #fff; }

/* ---------------------------------------------------------------------
 * この症状の解決ガイド
 * 青い箱（水玉）に、修理TOPの症状ボタン（components.css の .rp-symptom）を載せる。
 * ワイヤーの「→」に合わせ、このページのボタンだけ右に矢印を付ける。
 * ------------------------------------------------------------------- */
.err-guide__box {
	padding: 24px 20px;
	border-radius: 20px;
	background: var(--fig-blue-40) url(../img/bg-dots.png);
	text-align: center;
}
.err-guide__title { font-size: 20px; font-weight: 800; color: #fff; }
.err-guide__list { max-width: 420px; margin: 14px auto 0; grid-template-columns: 1fr; }
.err-guide__note { margin-top: 12px; font-size: 14px; color: #fff; }
.rp-symptom--arrow::after {
	content: "";
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
}

/* 詳しい解説記事への導線は共通の .fl-links（一文の下にボタン。2026-10-18）。 */

/* ---------------------------------------------------------------------
 * 修理費用：設置年数で分かれる案内
 * 白い箱の中の淡い青（#E9F4FC）。面をもう1枚増やさずに段差を作る。
 * ------------------------------------------------------------------- */
.err-age {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px;
	border-radius: 12px;
	background: var(--fig-blue-20);
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.err-age strong { color: var(--fig-blue-60); font-weight: var(--fw-bold); }

/* LINE＋電話の白い箱（.err-line）は、お問い合わせ（2f）でも同じものを使うため
 * components.css へ移した（クラス名はそのまま）。
 * このページは 2026-10-14 から下の .err-consult を使う。 */
.err-consult__box {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--c-line);
	text-align: center;
}
.err-consult__title { font-size: 20px; line-height: 1.5; font-weight: 800; color: var(--fig-blue-80); }
.err-consult__lead { margin-top: -12px; font-size: 15px; color: var(--fig-gray-70); }
.err-consult__steps { display: grid; gap: 8px; }
.err-consult__steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	background: #ecfaf2;
	font-size: 15px;
	font-weight: var(--fw-bold);
	text-align: left;
}
.err-consult__no {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--c-line);
	color: #fff;
	font-family: var(--font-num);
}
.err-consult__btns { display: grid; gap: 12px; }
.err-consult__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 20px;
	border-radius: 100px;
	color: #fff;
	font-size: 16px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
}
/* 下に敷いていた濃い色の影は外した（2026-10-14 jojiさんの指示）。 */
.err-consult__btn--line { background: var(--c-line); }
.err-consult__btn--tel { background: var(--fig-orange); }
/* LINE の URL が未設定のあいだも、色は薄くしない（2026-10-14 jojiさんの指示）。押せないだけ。 */
.err-consult__btn.is-disabled { cursor: default; }
.err-consult__line-mark { padding: 2px 6px; border-radius: 4px; background: #fff; color: var(--c-line); font-family: var(--font-en); font-size: 11px; }

/* ---------------------------------------------------------------------
 * {メーカー}のよくあるエラー（5件）
 * 一覧ページのカード（1pxの灰枠・角丸12）を、交換ページの白いカードに寄せる。
 * ------------------------------------------------------------------- */
.sec-stack .ec-grid { display: grid; gap: 16px; }
.sec-stack .ec-card__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 20px;
	border: 0;
	border-radius: 20px;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sec-stack .ec-card__link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.sec-stack .ec-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sec-stack .ec-card__code {
	font-family: var(--font-num);
	font-size: 24px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--c-warm);
}
.sec-stack .ec-card__desc {
	font-size: 15px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 緊急度は色の点だけ（意味は個別ページの結論ボックスで読める）。 */
.sec-stack .ec-urgency--dot {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
}
.sec-stack .ec-urgency--dot.ec-urgency--red    { background: var(--c-urgency-stop); }
.sec-stack .ec-urgency--dot.ec-urgency--orange { background: var(--c-urgency-check); }
.sec-stack .ec-urgency--dot.ec-urgency--green  { background: var(--c-urgency-self); }

/* =====================================================================
 * PC（600 以上。交換ページ・TOP と同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	.err-text { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }

	/* --- 結論ボックス（FV） --- */
	/* ヘッダーとの間は他のページの FV と同じ32（Figma の Frame 20）。 */
	.err-fv { padding-block: calc(32 * var(--u)) 0; }
	.err-fv__box { padding: calc(40 * var(--u)); }
	.err-fv__eyebrow { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.err-fv__code { font-size: max(calc(56 * var(--ff)), calc(80 * var(--u))); }
	.err-fv__title { font-size: max(calc(18 * var(--ff)), calc(24 * var(--u))); }
	.err-fv__panel { padding: calc(20 * var(--u)) calc(24 * var(--u)); }
	.err-fv__mean { font-size: max(calc(17 * var(--ff)), calc(21 * var(--u))); }
	.err-fv__mean-sub { font-size: max(calc(15 * var(--ff)), calc(17 * var(--u))); }
	.err-fv__sub { font-size: max(calc(14 * var(--ff)), calc(15 * var(--u))); }
	.err-fv .ec-urgency {
		font-size: max(calc(14 * var(--ff)), calc(16 * var(--u)));
		padding: calc(6 * var(--u)) calc(18 * var(--u));
	}

	/* --- リセット手順（主役） --- */
	.err-remote { max-width: calc(720 * var(--u)); margin-inline: auto; }

	/* --- 対処方法 --- */
	.err-act__intro { font-size: max(calc(16 * var(--ff)), calc(20 * var(--u))); }
	.err-act__card { padding: calc(20 * var(--u)) calc(28 * var(--u)); }
	.err-act__body { font-size: max(calc(17 * var(--ff)), calc(20 * var(--u))); }
	.err-act__after { padding: calc(20 * var(--u)) calc(28 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }

	/* --- 渡りの導線 --- */
	.err-guide__box { padding: calc(40 * var(--u)); }
	.err-guide__title { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.err-guide__list { max-width: calc(520 * var(--u)); grid-template-columns: 1fr; }

	/* --- LINE＋電話 --- */
	.err-consult__box { padding: calc(40 * var(--u)) calc(56 * var(--u)); gap: calc(24 * var(--u)); }
	.err-consult__title { font-size: max(calc(20 * var(--ff)), calc(28 * var(--u))); }
	.err-consult__lead { margin-top: calc(-16 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.err-consult__steps { grid-template-columns: repeat(3, 1fr); }
	.err-consult__steps li { flex-direction: column; justify-content: center; padding: calc(16 * var(--u)) calc(10 * var(--u)); text-align: center; }
	.err-consult__btns { grid-template-columns: 1fr 1fr; }
	.err-consult__btn { font-size: max(calc(16 * var(--ff)), calc(20 * var(--u))); padding: calc(18 * var(--u)) calc(24 * var(--u)); }


	/* --- 費用の分岐 --- */
	.err-age { padding: calc(32 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }



	/* --- よくあるエラー：5件を横一列 --- */
	.sec-stack .ec-grid { grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); }
	.sec-stack .ec-card__link { padding: calc(24 * var(--u)) calc(20 * var(--u)); }
	.sec-stack .ec-card__code { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.sec-stack .ec-card__desc { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }

}
/* =====================================================================
 * ここから下は エラー検索TOP（2l）とメーカー別一覧（2m）
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 2ステップ検索（2l のこのページの主役）
 * 青い面の上に白い箱。段を分けて、迷う幅を1つずつにする。
 * ------------------------------------------------------------------- */
.el-form { gap: 24px; }
.el-step { display: flex; flex-direction: column; gap: 8px; }
/* STEP の番号。交換ページ「工事の流れ」の 01〜04 と同じ濃紺の印。 */
.el-step__no {
	align-self: flex-start;
	padding: 2px 14px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 13px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
}
.el-step--optional .el-step__no { background: var(--fig-gray-40); }
.el-step__label {
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 入力欄。50〜70代が主要ユーザーなので、指で押せる高さと大きい文字にする。 */
.el-select,
.el-input {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--fig-blue-30);
	border-radius: 6px;
	background: #fff;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
.el-select:focus,
.el-input:focus { outline: 3px solid var(--fig-blue-40); outline-offset: 1px; }

/* ---------------------------------------------------------------------
 * メーカーから探す（2l）
 * ------------------------------------------------------------------- */
/* 件数に合わせて列が伸びる。エラーコードが登録されているメーカーだけを出すので、
 * 社数は9社とはかぎらない（5社のときに9列の左端へ寄らないようにする）。 */
/* スマホは2列（150px 以上で取っていたときは1列になり、ロゴを入れると縦に長くなりすぎた）。
 * 社数が奇数のときは、最後の1社をほかと同じ大きさのまま中央に置く（600〜1023 の3列と同じ扱い）。 */
@media (max-width: 599.98px) {
	.el-makers { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
	.el-makers li { flex: 0 0 calc((100% - 10px) / 2); }
}
.el-maker {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 8px;
	border-radius: 12px;
	/* ロゴの画像には白い地のものがある（日立・コロナ）ので、面は白にして枠線で囲む。 */
	border: 2px solid var(--fig-blue-30);
	background: #fff;
	text-align: center;
	transition: background .15s ease;
}
.el-maker:hover { background: var(--fig-blue-20); }
/* ロゴの置き場は高さをそろえ、社名の位置が揃うようにする。
 * 幅は TOP（top.css の .top-makers__logo）と同じく縦横比の0.3乗に比例させ、横長のロゴだけ細く縮んで見えないようにする。 */
.el-maker__logo { display: flex; align-items: center; justify-content: center; height: 40px; margin-bottom: 6px; }
.el-maker__logo img { display: block; width: calc(min(94%, 120px) * pow(var(--ratio, 4) / 9, .3)); max-height: 100%; height: auto; }
.el-maker__name {
	/* 幅320で「パナソニッ｜ク」と割れたので、折り返さず、狭い画面だけ少し小さくする。 */
	white-space: nowrap;
	font-size: clamp(14px, 4.4vw, 16px);
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}

/* ---------------------------------------------------------------------
 * いま多いお問い合わせ（2l）
 * 順位の丸はメーカー別ページのランキングと同じ形。
 * ------------------------------------------------------------------- */
.el-rank { display: flex; flex-direction: column; gap: 10px; }
.el-rank__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 20px;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.el-rank__row:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.el-rank__no {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--c-brand);
	color: #fff;
	font-family: var(--font-num);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}
.el-rank__body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; flex: 1; min-width: 0; }
.el-rank__maker {
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-50);
}
.el-rank__code {
	font-family: var(--font-num);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--c-warm);
}

/* ---------------------------------------------------------------------
 * 一覧の下のページ送り
 * ------------------------------------------------------------------- */
.el-pager { margin-top: 8px; }
.el-pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.el-pager .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.el-pager .page-numbers.current { background: var(--fig-blue-60); color: #fff; }
.el-pager .page-numbers:hover { background: var(--fig-blue-20); }
.el-pager .page-numbers.current:hover { background: var(--fig-blue-60); }
/* 青い面の上に置くとき（2m）。白のままだと面に溶けないので枠を足す。 */
.el-pager--on-blue .page-numbers { border: 2px solid #fff; }
.el-pager--on-blue .page-numbers.current { border-color: var(--fig-blue-60); }

/* ---------------------------------------------------------------------
 * 渡りの導線（症状から探す／交換のサイン）
 * ------------------------------------------------------------------- */
/* 白い箱だけだとページの地（#F5FAFD）に溶けるので、交換ページの白い箱と同じ 4px の青枠を付ける（2026-10-12）。
 * 見出しに黄色の線は引かない（2026-10-14）。チップは青地に白文字、ボタンは濃紺。 */
.el-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
}
.el-card__title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	text-align: center;
}
/* 症状・メーカー名のバッジ。交換ページの地域バッジと同じ形。 */
.el-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.el-chips--center { justify-content: center; }
.el-chips a {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	transition: filter .15s ease;
}
.el-chips a:hover { filter: brightness(.95); }
.el-card .el-chips a { background: var(--fig-blue-40); color: #fff; }
.el-card__seg { display: inline-block; }
/* スマホ（〜599）は、説明文の区切りを外して自然に流す（区切ったままだと1つの塊が幅に収まらず語の途中で折れる）。
 * 見出しの区切り（「エラーは出ていないけど」「調子が悪い」）は残す。
 * 症状は文字を13pxに少し詰めて、同じ幅のボタンを2列×3行に並べる（2026-10-12）。 */
@media (max-width: 599.98px) {
	.el-symptom .panel-note .el-card__seg { display: inline; }
	.el-symptom .el-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.el-symptom .el-chips a { display: block; text-align: center; padding-inline: 4px; font-size: 13px; white-space: nowrap; letter-spacing: -.02em; }
}
/* タブレット（600〜1023）は6つの症状が「5個＋1個」に割れるので、同じ幅のボタンを3列×2行に並べる（2026-10-12）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.el-symptom .el-chips { display: grid; grid-template-columns: repeat(3, 1fr); }
	.el-symptom .el-chips a { display: block; text-align: center; padding-inline: 8px; }
}

/* ---------------------------------------------------------------------
 * FV（2m）
 * 写真を敷かないので、交換ページの写真用グラデーションは止める。
 * 2枚目（エラーコード一覧）を大きくする。
 * ------------------------------------------------------------------- */
.hero--errorlist .hero__box::after { content: none; }
.hero--errorlist .hero__catch { gap: 8px; }
.hero--errorlist .hero__catch-label--strong { font-size: 28px; padding-block: 4px; }

/* ---------------------------------------------------------------------
 * 緊急度の凡例（2m）
 * ------------------------------------------------------------------- */
/* 白いカード3枚に大きな記号（2026-10-14 jojiさんと3案から決定）。スマホは縦に3枚、600以上は横に3枚。
 * 色の線は付けない（jojiさんの指示）。3段階は記号の形と色で見分ける。 */
.el-legend { display: grid; gap: 10px; }
.el-legend__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 14px;
	background: #fff;
}
.el-legend__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	font-weight: var(--fw-bold);
}
.el-legend__text {
	font-size: 16px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
	/* 2行に折れる幅（320・600付近）で、文節の切れ目で折り、行の長さをそろえる。 */
	text-wrap: balance;
	word-break: auto-phrase;
}
/* 凡例と表の記号は同じ色にする（他のエラーコードのページの印と同じ3色）。 */
.el-legend__mark.ec-urgency--red,
.el-table .ec-urgency--red    { background: var(--c-urgency-stop); }
.el-legend__mark.ec-urgency--orange,
.el-table .ec-urgency--orange { background: var(--c-urgency-check); }
.el-legend__mark.ec-urgency--green,
.el-table .ec-urgency--green  { background: var(--c-urgency-self); }

/* ---------------------------------------------------------------------
 * コード一覧の表（2m）
 * ワイヤーが「表を維持してよい唯一の例外」としている箇所。3列まで。
 * 行全体がリンクなので、行にカーソルを当てたときに面が変わるようにする。
 * ------------------------------------------------------------------- */
.el-table-panel { padding: 0; overflow: hidden; }
.el-table { width: 100%; border-collapse: collapse; }
.el-table th,
.el-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: middle;
}
.el-table thead th {
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
}
.el-table tbody tr + tr { border-top: 2px solid var(--fig-blue-30); }
.el-table tbody tr:hover { background: var(--fig-blue-20); }
.el-table__code a {
	display: block;
	font-family: var(--font-num);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
	color: var(--c-warm);
}
.el-table__meaning {
	font-size: 15px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 意味・緊急度の列も同じページへのリンク（行全体を押せるようにするため）。
 * 文字はリンクに見せない。押せる範囲だけをセルいっぱいに広げる。 */
.el-table__meaning a,
.el-table__urgency a { display: block; color: inherit; text-decoration: none; }
/* 緊急度の列は印だけなので最小幅にする。見出しの文字が縦に折れないよう
 * 列の両方（見出しセルとデータセル）で折り返しを止める。 */
.el-table th:last-child,
.el-table__urgency { width: 1%; white-space: nowrap; text-align: center; }
/* スマホは3列にすると「意味」の列が狭く、1行の説明が4〜5行に折れる。
 * 1行目にコードと緊急度、2行目に意味を置き、意味に幅いっぱいを使う（2026-10-14）。
 * 列の見出しは消す（コードと記号は見ればわかり、記号の意味は表のすぐ下の凡例にある）。 */
@media (max-width: 599.98px) {
	.el-table thead { display: none; }
	.el-table tbody tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; padding: 14px 16px; }
	.el-table th,
	.el-table td { padding: 0; }
	.el-table__meaning { grid-column: 1 / -1; grid-row: 2; }
	.el-table__urgency { width: auto; }
}
/* =====================================================================
 * PC（2l・2m）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- 2ステップ検索 --- */
	/* 入力欄を横一列に並べ、印と見出しは各欄の上に置く（2026-10-12、3案から B案に決定）。
	 * 見出しの列を固定幅で取っていたときは、短い見出しの右に大きな空きが出ていた。
	 * 症状の分類が無いときは欄が2つになるので、grid の列数ではなく flex で等分する。ボタンは次の行。 */
	.el-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: calc(32 * var(--u)) calc(20 * var(--u)); }
	.el-step { flex: 1 1 0; min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: calc(12 * var(--u)); }
	.el-form > .ex-btns { flex-basis: 100%; }
	.el-step__no { font-size: max(calc(14 * var(--ff)), calc(15 * var(--u))); padding: calc(4 * var(--u)) calc(14 * var(--u)); }
	.el-step__label { white-space: nowrap; font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }
	.el-select,
	.el-input { grid-column: 1 / -1; font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); padding: calc(16 * var(--u)) calc(20 * var(--u)); }

	/* --- メーカーから探す：横一列（社数ぶんで幅を分ける） --- */
	/* 1024 以上は全社を横一列。600〜1023 は3列にして、余った段は中央に寄せる
	 * （110px 以上で詰めていたときは、幅600で「4社＋1社」と1社だけ下に落ちていた）。 */
	.el-makers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: calc(12 * var(--u)); }
	.el-maker { padding: calc(18 * var(--u)) calc(6 * var(--u)); }
	.el-maker__logo { height: max(40px, calc(52 * var(--u))); }
	.el-maker__name { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	/* --- いま多いお問い合わせ --- */
	.el-rank { gap: calc(12 * var(--u)); }
	.el-rank__row { padding: calc(18 * var(--u)) calc(28 * var(--u)); gap: calc(20 * var(--u)); }
	.el-rank__no { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.el-rank__maker { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.el-rank__code { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }

	/* --- 渡りの導線 --- */
	.el-card { padding: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.el-card__title { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.el-chips a { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); padding: calc(10 * var(--u)) calc(24 * var(--u)); }

	/* --- 凡例：横に3枚。記号を上、説明を下に置く --- */
	.el-legend { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.el-legend__card { flex-direction: column; justify-content: center; gap: calc(12 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(20 * var(--u)); text-align: center; }
	.el-legend__mark { width: max(44px, calc(56 * var(--u))); height: max(44px, calc(56 * var(--u))); font-size: max(18px, calc(24 * var(--u))); }
	.el-legend__text { font-size: max(calc(14 * var(--ff)), calc(20 * var(--u))); }

	/* --- FV --- */
	.hero--errorlist .hero__catch { gap: calc(12 * var(--u)); }
	.hero--errorlist .hero__catch-label--strong { font-size: max(calc(35 * var(--ff)), calc(52 * var(--u))); padding: calc(4 * var(--u)) calc(24 * var(--u)); }

	/* --- 表 --- */
	.el-table th,
	.el-table td { padding: calc(18 * var(--u)) calc(28 * var(--u)); }
	.el-table thead th { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.el-table__code a { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.el-table__meaning { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
}

/* 1024 以上だけの並べ方（2026-10-12）。
 *   結論ボックスのバッジは右上に重ねる（600〜1023 では見出しに重なるので上に積んだまま）
 *   一覧カードは5列（600〜1023 は3列） */
@media (min-width: 1024px) {
	.err-fv .ec-urgency { position: absolute; top: calc(28 * var(--u)); right: calc(32 * var(--u)); margin: 0; }
	.err-fv__eyebrow { padding-right: calc(300 * var(--u)); } /* バッジと重ならない幅で止める */

	.sec-stack .ec-grid { grid-template-columns: repeat(5, 1fr); }
}

/* メーカーから探す（600〜1023）: 3列。2段目は中央に寄せる。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.el-makers { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
	.el-makers li { flex: 0 0 calc((100% - 24px) / 3); }
}