/* =====================================================================
 * maker.css — メーカー一覧TOP（2h-0）とメーカー別（2h）の指定
 * ---------------------------------------------------------------------
 * 面（全幅の青・白い箱・セクションの並び・FAQ の見た目）は
 * components.css の共通部品に置いてある。ここには 2h-0 固有のものだけを書く。
 *
 * 2ページで同じファイルを読む。比較カード（.mk-spec）と渡りの導線（.mk-guide）は
 * どちらのページにも出るので、分けると同じ値を2か所に書くことになる。
 *
 * 【2h-0 メーカー一覧TOP の面の配分】
 *   FV            青の箱（交換ページと同じ .hero__box。写真は敷かない）
 *   9社カード     全幅の青（水玉）← このページの主役
 *   9社比較表     白い箱
 *   迷っている方へ／エラーコード導線  吹き出し2つ（.ex-anxiety は components.css）
 *   FAQ           白いカード＋グレーの水玉
 *   CTA           黄色の帯
 *
 * 【2h メーカー別 の面の配分】
 *   FV            青の箱
 *   3つの特徴     白いカード3枚（番号の丸）
 *   人気機種      全幅の青（水玉）← このページの主役
 *   他社との比較  白い箱
 *   エラーコード導線  白いカード
 *   施工事例      全幅の水色
 *   スタッフコメント  白いカード＋丸アイコン（components.css）
 *   FAQ           白いカード＋グレーの水玉
 *   CTA           黄色の帯
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV
 * 写真を敷かないので、交換ページの写真用グラデーションは止める。
 * 「9社対応」を大きくする。数字なのでオレンジ（赤は使わない）。
 * ------------------------------------------------------------------- */
.hero--maker .hero__box::after { content: none; }
.hero--maker .hero__catch { gap: 8px; }
.hero--maker .hero__catch-label--strong {
	font-size: 28px;
	color: var(--c-warm);
	padding-block: 4px;
}
/* 並びと間隔はほかの FV と同じ（pages.css の .hero--page:not(.hero--v2) .hero__cta）。 */
.hero--maker .hero__cta { position: relative; z-index: 3; }

/* ---------------------------------------------------------------------
 * 9社カードグリッド（このページの主役）
 *
 * 社名はロゴ画像で出す。幅はエラーコード検索（.el-maker__logo）と同じく
 * 縦横比の0.3乗に比例させ、横長のロゴだけ細く縮んで見えないようにする。
 * ロゴが無いメーカーは社名の文字（.mk-card__name）で出す。
 * ------------------------------------------------------------------- */
.mk-grid { display: grid; gap: 16px; }
.mk-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	height: 100%;
	padding: 20px 16px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
	transition: transform .15s ease, box-shadow .15s ease;
}
.mk-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mk-card__logo { display: flex; align-items: center; justify-content: center; height: 44px; width: 100%; }
.mk-card__logo img { display: block; width: calc(min(70%, 150px) * pow(var(--ratio, 4) / 9, .3)); max-height: 100%; height: auto; }
.mk-card__name {
	font-size: 20px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.mk-card__feature {
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 価格は数字だけオレンジで大きく（交換ページの機種カードと同じ扱い）。 */
.mk-card__yen {
	font-size: 14px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-gray-70);
}
.mk-card__yen b {
	font-family: var(--font-num);
	font-size: 26px;
	font-weight: 800;
	color: var(--c-warm);
	margin-inline: 2px;
}
/* 「◯◯の詳細」。カード全体がリンクなので、ここはボタンにせず矢印つきの文字にする。 */
.mk-card__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 6px;
	font-size: 14px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-40);
}
.mk-card__more::after {
	content: "";
	flex: none;
	width: 12px;
	height: 14px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow.png");
	mask: no-repeat center / contain url("../img/icon-arrow.png");
}

/* ---------------------------------------------------------------------
 * 9社比較表（4軸）
 * 表組みにすると幅1200でも1列133pxになって読めない。
 * メーカーごとのカードにして、広い画面では3列に並べる（横に溢れない）。
 * ------------------------------------------------------------------- */
.mk-specs { display: grid; gap: 16px; }
.mk-spec {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: 12px;
	background: var(--fig-blue-20);
}
.mk-spec__name {
	font-size: 18px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.mk-spec__list { display: flex; flex-direction: column; }
.mk-spec__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 10px 0;
	font-size: 14px;
	line-height: 1.6;
}
.mk-spec__row + .mk-spec__row { border-top: 2px solid var(--fig-blue-30); }
.mk-spec__row:first-child { padding-top: 0; }
.mk-spec__row dt { font-weight: var(--fw-medium); color: var(--fig-gray-50); }
.mk-spec__row dd { font-weight: var(--fw-bold); color: var(--fig-gray-70); text-align: right; }
/* 未入力の軸。数値が入っている軸と見分けがつくよう薄くする。 */
.mk-spec__empty { color: var(--fig-gray-30); }
.mk-spec__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	font-size: 14px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-40);
}
.mk-spec__more::after {
	content: "";
	flex: none;
	width: 12px;
	height: 14px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow.png");
	mask: no-repeat center / contain url("../img/icon-arrow.png");
}

/* ---------------------------------------------------------------------
 * 渡りの導線（エラーコード。メーカー別 2h）
 * 見出しバーだけが並ばないよう、白いカードにボタンを置く。
 * ------------------------------------------------------------------- */
.mk-guide {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	/* 縁なしの白いカードは地と区別がつかないので使わない（2026-10-18 jojiさん）。.panel と同じ枠線. */
	border: 4px solid var(--fig-blue-40);
}
.mk-guide__title {
	font-size: 20px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	text-align: center;
}

/* ---------------------------------------------------------------------
 * 迷っている方へ／エラーコード導線（2h-0）
 * 交換ページの不安の吹き出し（.ex-anxiety。components.css）を2つ縦に並べる。
 * 答えの文の下にボタンを置くので、二重三角は上下中央ではなく文の1行目にそろえる。
 * ------------------------------------------------------------------- */
.mk-worry { display: flex; flex-direction: column; gap: 80px; }
.mk-worry .ex-anxiety { padding-top: 0; }
.mk-worry .ex-anxiety__answer { align-items: flex-start; }
.mk-worry .ex-anxiety__mark { margin-top: 6px; }
.mk-worry__answer { flex: 1; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 答えの文は文節ごと（.ex-anxiety__ph）に折る。赤い一文も途中で折らない（「迷った／らプロに」のように割れるのを防ぐ）。 */
.mk-worry .ex-anxiety__text strong { display: inline-block; }
/* スマホは イラストを小さくし、ボタンを縦に積む。
 * ボタンは二重三角の右の段から出して、画面の中央に置く（左へ 三角30＋間隔20 ぶん広げる。2026-10-13 jojiさんの指示）。 */
@media (max-width: 599.98px) {
	.mk-worry .ex-anxiety__illust { width: auto; }
	.mk-worry .ex-anxiety__illust img { width: auto; max-height: 150px; margin-inline: auto; }
	.mk-worry .ex-btns { align-items: center; margin-left: -50px; }
	/* 幅は340で止める。画面いっぱいだと大きめのスマホで横に長くなりすぎる（2026-10-14 jojiさんの指示）。 */
	.mk-worry .ex-btns .fbtn { width: 100%; max-width: 340px; }
	.mk-worry .ex-btns--row { flex-direction: column; }
}
@media (min-width: 600px) {
	.mk-worry { gap: calc(104 * var(--u)); }
	.mk-worry .ex-anxiety__mark { margin-top: calc(14 * var(--u)); }
	.mk-worry__answer { gap: calc(20 * var(--u)); }
	.mk-worry .ex-btns { align-items: flex-start; }
	.mk-worry .ex-btns--row { justify-content: flex-start; }
	.mk-worry .fbtn { white-space: nowrap; }
	/* 吹き出しは文字の長さに合わせて縮める。右側の段いっぱいに広げると、画面幅によって文字の右に空きが出る（2026-10-13 jojiさんの指示）。 */
	.mk-worry .ex-anxiety__bubble { align-self: flex-start; max-width: 100%; }
}
/* 600〜1023 は吹き出しの段が狭い（画面幅の約59%。600で353px）。PC の大きさのままだと2行に折れるので、
 * 文字の大きさを画面幅に比例させて1行に収める（2026-10-14 jojiさんの指示）。
 * 段の幅 0.589×画面幅 から枠と余白（左右28×2）を引き、いちばん長い15文字ぶんで割った値。上限は PC の1024での大きさ（28px）。 */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.mk-worry .ex-anxiety__bubble { white-space: nowrap; font-size: min(28px, 3.8vw - 3.6px); line-height: 1.35; padding: 14px 24px; }
}

/* =====================================================================
 * ここから下は メーカー別（2h）だけ
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * {メーカー}のエコキュート、3つの特徴
 * 番号の丸は交換ページ「工事の流れ」の 01〜04 と同じ扱い。
 * ------------------------------------------------------------------- */
.mk-features { display: grid; gap: 16px; }
.mk-feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	border: 4px solid var(--fig-blue-40);
	text-align: center;
}
.mk-feature__no {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c-brand);
	color: #fff;
	font-family: var(--font-num);
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
/* 公式の機能名は太字（制作メモ「公式の機能名を太字ゴシック+説明1行」）。 */
.mk-feature__title {
	font-size: 19px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.mk-feature__text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 人気機種ランキング（このページの主役）
 * 青い面の上に白いカードを3枚。順位の丸・型番・容量バッジ・価格。
 * ------------------------------------------------------------------- */
.mk-rank__list { display: flex; flex-direction: column; gap: 12px; }
.mk-rank__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 20px;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
a.mk-rank__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mk-rank__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;
}
.mk-rank__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; flex: 1; }
.mk-rank__model {
	font-size: 17px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 容量。交換ページの容量バッジ（角丸6・濃紺・白文字）と同じ。 */
.mk-rank__cap {
	padding: 2px 14px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 14px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
}
/* 価格はオレンジ。金額が「◯◯万円」のあいだは大きくしない。 */
.mk-rank__yen {
	flex: none;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--c-warm);
}
/* 機種がまだ無いときの枠。押せないので、浮き上がる動きも出さない。 */
.mk-rank__card--empty { opacity: .85; }
.mk-rank__card--empty .mk-rank__model { color: var(--fig-gray-50); font-weight: var(--fw-medium); }
.mk-rank__card--empty .mk-rank__yen { color: var(--fig-gray-30); }

/* いま見ているメーカー。比較の中で位置がすぐ分かるように枠を付ける。 */
.mk-spec--self { border: 2px solid var(--fig-blue-40); background: #fff; }
.mk-spec__self {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 6px;
	background: var(--fig-blue-30);
	color: var(--fig-blue-60);
	font-size: 12px;
	line-height: 1.6;
	font-weight: var(--fw-bold);
	vertical-align: middle;
}

/* =====================================================================
 * PC（600 以上。交換ページ・TOP と同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV --- */
	.hero--maker .hero__catch { gap: calc(12 * var(--u)); }
	.hero--maker .hero__catch-label--strong { font-size: max(calc(35 * var(--ff)), calc(52 * var(--u))); padding: calc(4 * var(--u)) calc(24 * var(--u)); }

	/* --- 9社カード：3列×3段 --- */
	.mk-grid { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.mk-card { padding: calc(28 * var(--u)) calc(24 * var(--u)); gap: calc(12 * var(--u)); }
	.mk-card__name { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.mk-card__logo { height: max(44px, calc(56 * var(--u))); }
	.mk-card__feature { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.mk-card__yen { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.mk-card__yen b { font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
	.mk-card__more { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }

	/* --- 比較表：3列×3段 --- */
	.mk-specs { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	.mk-spec { padding: calc(24 * var(--u)); }
	.mk-spec__name { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.mk-spec__row { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); padding: calc(12 * var(--u)) 0; }
	.mk-spec__more { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }

	/* --- 渡りの導線 --- */
	.mk-guide { padding: calc(40 * var(--u)); gap: calc(20 * var(--u)); }
	.mk-guide__title { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }

	/* --- 3つの特徴：3列 --- */
	.mk-features { grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); }
	.mk-feature { padding: calc(36 * var(--u)) calc(28 * var(--u)); gap: calc(14 * var(--u)); }
	.mk-feature__no { width: calc(76 * var(--u)); height: calc(76 * var(--u)); font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
	.mk-feature__title { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.mk-feature__text { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); text-align: left; align-self: stretch; }

	/* --- 人気機種ランキング --- */
	.mk-rank__list { gap: calc(16 * var(--u)); }
	.mk-rank__card { padding: calc(24 * var(--u)) calc(32 * var(--u)); gap: calc(24 * var(--u)); }
	.mk-rank__no { width: calc(56 * var(--u)); height: calc(56 * var(--u)); font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.mk-rank__model { font-size: max(calc(15 * var(--ff)), calc(22 * var(--u))); }
	.mk-rank__cap { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); padding: 2px calc(18 * var(--u)); }
	.mk-rank__yen { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); }
	.mk-spec__self { font-size: 13px; }
}