/* =====================================================================
 * top.css — TOP（ワイヤーフレーム 2b）だけの指定
 * ---------------------------------------------------------------------
 * 面（全幅の青・全幅の水色・白い箱・セクションの並び・FAQ の見た目）は
 * components.css の共通部品に置いてある。ここには TOP 固有のものだけを書く。
 *
 * 【このページの面の配分】
 *   FV          青の箱（交換ページと同じ .hero__box）
 *   ご用件      全幅の青（水玉）← このページの主役
 *   料金/メーカー 白い箱（.panel）
 *   エリア      地
 *   施工事例    全幅の水色（.cases-block）
 *   補助金      白い箱＋写真
 *   理由/コラム/FAQ 地の上に白いカード
 *   CTA         黄色の帯
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * FV
 * 形は交換ページと同じ（hero-v2.css）。ここに書くのは TOP 固有の2つだけ（2026-10-12）:
 *   ・2行目「最短即日。」は交換ページの価格と同じ黄色の大きい文字
 *   ・背景はスタッフの実写（ワイヤー 2a-D「スタッフ実写」）。交換ページの写真のように
 *     40% まで薄めると顔が見えなくなるので、写真は不透明のまま右に置き、
 *     左から blue-60 のグラデーションで文字の下を青に沈める。スマホは交換ページと同じく青一色
 * ------------------------------------------------------------------- */
.hero--top .hero__lead { font-size: 44px; line-height: 1.45; font-weight: var(--fw-bold); color: var(--c-highlight); }
.hero--top .hero__photo { display: none; }
/* FV のすぐ下が「ご用件」の青い帯なので間を空ける（TOP はパンくずを置かない）。 */
.hero--top + .dots-block { margin-top: 40px; }
/* 見出しと本文は語の切れ目でだけ折り返す（「交｜換」「費用｜なし。」「解決し｜ます。」と割れていた）。 */
.hero--top .hero__seg,
.hero--top .hero__sub--ex em,
.hero--top .hero__sub-tail { display: inline-block; }
/* 320幅でも見出し1行目「九州のエコキュート」が1行に収まる大きさまで縮める（28px は 375 幅で収まる上限）。 */
@media (max-width: 599.98px) {
	.hero--top .hero__title { font-size: min(28px, 7.4vw); }
}

/* ---------------------------------------------------------------------
 * ご用件をお選びください（このページの主役）
 * 面は .dots-block（全幅の青＋水玉）。その上に白いカードを3枚。
 * 丸アイコンは交換ページ「工事の流れ」と同じ 青い円＋白い線画。
 *
 * 【素材が2系統ある（2026-09-08 修正）】
 *   icon/flow-*.png  青い円＋白の線画が1枚に焼き込まれている（円まで不透明）
 *   icon/cost-*.png  白地に濃紺の線画。円は入っていない
 *
 *   前は3枚ともマスクにして白で塗っていたが、いまの書き出しではどちらの系統も
 *   円や白地まで不透明なので、マスクにすると塗りつぶされる（白い丸・白い四角になる）。
 *   flow 系は画像のまま置き、cost 系は白地を透過にした派生ファイルをマスクにする。
 *
 *   ※ 見つかった経緯: 画面上は線画が出ていたが、それは7日前のキャッシュ（3枚とも
 *     透過の線画だった旧ファイル）を見ていただけだった。CSS 側はバージョンを付けずに
 *     参照していて、キャッシュが切れた人・初めて来た人には白い丸で見えていた。
 * ------------------------------------------------------------------- */
.top-entry__grid { display: grid; gap: 16px; }
/* SP は「アイコン左・文字右」の横長。3枚とも画面に入るようにする
 * （制作メモ「FV直下・3つ同時に画面内」）。 */
.top-entry__card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 20px;
	background: #fff;
	transition: transform .15s ease, box-shadow .15s ease;
}
.top-entry__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* flow 系は円ごと1枚の画像。CSS では大きさだけ決める。
 *
 * ?v= は画像の書き出し日。CSS の中の URL には PHP のバージョンを差し込めないので、
 * 画像を差し替えたらこの数字も上げる。付けないと、旧ファイル（透過の白い線画だった頃の
 * もの）を持っている人には何も見えなくなる。画像の Cache-Control は7日。 */
.top-entry__ico {
	flex: none;
	display: block;
	width: 72px;
	height: 72px;
	background: no-repeat center / contain var(--ico);
}
.top-entry__card--repair .top-entry__ico { --ico: url("../img/icon/flow-work.png?v=20260904"); }
.top-entry__card--error  .top-entry__ico { --ico: url("../img/icon/flow-survey.png?v=20260904"); }

/* cost 系は線画だけなので、円は CSS で作る。
 * cost-unit-line.png は cost-unit.png の白地を透明にしただけの派生ファイル
 * （線の形は触っていない）。マスクにして白で塗る。
 * 60px は、線画が枠の53%を占めるため。flow 系の見え方（円の44%）にそろえた値。 */
.top-entry__card--exchange .top-entry__ico {
	border-radius: 50%;
	background: var(--c-brand);
	position: relative;
}
.top-entry__card--exchange .top-entry__ico::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 60px;
	height: 60px;
	background: #fff;
	-webkit-mask: no-repeat center / contain url("../img/icon/cost-unit-line.png?v=20260908");
	mask: no-repeat center / contain url("../img/icon/cost-unit-line.png?v=20260908");
}
.top-entry__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.top-entry__title {
	font-size: 18px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
.top-entry__desc {
	font-size: 14px;
	line-height: 1.7;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * 料金の目安
 * 桁が未定（◯◯）なので、黄色は面ではなく下線で使う。
 * 金額が入ったら交換ページの機種カードと同じ「黄色の面」に上げてよい。
 * ------------------------------------------------------------------- */
.top-price__grid { display: grid; gap: 16px; }
.top-price__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 16px;
	border-radius: 12px;
	background: var(--fig-blue-20);
	color: inherit;
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease;
}
.top-price__item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
/* 容量。交換ページの容量バッジ（角丸6・濃紺・白文字）と同じ。 */
.top-price__cap {
	padding: 2px 20px;
	border-radius: 6px;
	background: var(--fig-blue-60);
	color: #fff;
	font-size: 22px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
}
.top-price__desc {
	font-size: 15px;
	line-height: 1.6;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}
/* 金額はまだ「◯◯」なので、数字だけを大きくしない（丸が2つ並んで見えるだけになる）。
 * 実際の数字が入ったら、交換ページの機種カードと同じ「数字だけ大きくオレンジ」に上げる。 */
.top-price__yen {
	font-size: 26px;
	line-height: 1.4;
	font-weight: 900;
	color: var(--c-warm);
}
/* 「◯◯万円〜」の下に敷く黄色。交換ページの「最大◯万円」と同じ引き方。 */
.top-price__yen mark {
	background: linear-gradient(var(--fig-yellow), var(--fig-yellow)) no-repeat 0 100% / 100% 10px;
	color: inherit;
}

/* ---------------------------------------------------------------------
 * 国内主要9メーカーに対応
 * 1枚の枠の中に9社。区切りは薄い水色の線だけにして、箱を9個並べない。
 * スマホは2列、600 以上は3列×3段（2026-10-16 jojiさんの指示）。
 * ------------------------------------------------------------------- */
.top-makers__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: var(--fig-blue-30);
	border: 1px solid var(--fig-blue-30);
	border-radius: 12px;
	overflow: hidden;
}
.top-makers__grid a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 8px 4px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
	text-align: center;
	transition: background .15s ease;
}
.top-makers__grid a:hover { background: var(--fig-blue-20); }
/* ロゴは縦横比がばらばら（三菱は約3:1、タカラは約9:1）。幅を揃えると横長のものだけ
 * 細く縮んで見える。幅を縦横比の0.3乗に比例させて差を縮める（0.5乗で面積が揃うが、
 * 三菱・ハウステックは中の文字が小さく、スマホで読めなかった）。
 * いちばん横長のタカラ（9:1）で枠の94%、ただし110pxで止める（600〜1023 は枠が
 * 230px ほどあり、止めないと枠いっぱいに広がる）。--ratio は front-page.php が入れる。 */
.top-makers__grid li { display: flex; }
/* 2列だと9社目が1つ余り、隣が線の色で埋まる。余った1社は行いっぱいに広げる（600 以上の3列では打ち消す）。 */
.top-makers__grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.top-makers__grid li > a { flex: 1; }
.top-makers__logo {
	display: block;
	margin-block: auto;
	width: calc(min(94%, 110px) * pow(var(--ratio, 4) / 9, .3));
	height: auto;
}
/* 「◯◯の詳細 →」。スマホは枠が 75〜90px しかなく1行に入らないので、社名を外して「詳細 →」だけにする
 * （社名はロゴで分かる）。600 以上は「◯◯の詳細 →」を1行で出す。
 * 矢印はメーカー一覧（maker.css の .mk-card__more）と同じアイコン。 */
.top-makers__more {
	font-size: 12px;
	line-height: 1.4;
	color: var(--fig-blue-40);
}
.top-makers__more > span { white-space: nowrap; }
.top-makers__name { display: none; }
.top-makers__more > span:last-child::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 11px;
	margin-left: 4px;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: no-repeat center / contain url("../img/icon-arrow.png");
	mask: no-repeat center / contain url("../img/icon-arrow.png");
}

/* 補助金の枠は交換ページ・料金表と共用（components.css の .ex-subsidy）。 */

/* ---------------------------------------------------------------------
 * 選ばれる理由
 * 番号の丸は、交換ページ「工事の流れ」の 01〜04 と同じ扱い。
 * ------------------------------------------------------------------- */
.top-reasons__grid { display: grid; gap: 16px; }
.top-reason {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 24px 20px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
}
.top-reason__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;
}
.top-reason__title {
	font-size: 19px;
	line-height: 1.5;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-60);
}
/* 見出しの改行は PC でだけ使う（3枚の高さをそろえるため）。 */
.top-reason__title br { display: none; }
.top-reason__text {
	font-size: 15px;
	line-height: 1.8;
	font-weight: var(--fw-medium);
	color: var(--fig-gray-70);
}

/* ---------------------------------------------------------------------
 * お役立ちコラム
 * 施工事例と同じカードの形（写真・日付・見出し）にそろえる。
 * ------------------------------------------------------------------- */
.top-columns__grid { display: grid; gap: 16px; }
.top-column { background: #fff; border-radius: 20px; overflow: hidden; }
.top-column a { display: flex; flex-direction: column; gap: 6px; padding: 0 0 20px; }
.top-column a > :not(.top-column__thumb) { margin-inline: 20px; }
.top-column__thumb { display: block; aspect-ratio: 388/227; overflow: hidden; margin-bottom: 10px; }
.top-column__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 写真が無い記事はサムネの枠ごと出さない（薄い面だけが縦に伸びて空白に見えるため）。
 * アイキャッチを設定すればそのまま写真のカードになる。 */
.top-column__thumb--none { display: none; }
.top-column a:has(.top-column__thumb--none) { padding-top: 20px; }
.top-column__date {
	font-family: var(--font-en);
	font-size: 14px;
	line-height: 1.4;
	font-weight: var(--fw-bold);
	color: var(--fig-blue-40);
}
.top-column__title {
	font-size: 16px;
	line-height: 1.7;
	font-weight: var(--fw-bold);
	color: var(--c-ink);
}
.top-column a:hover .top-column__title { text-decoration: underline; }

/* =====================================================================
 * PC（600 以上。交換ページと同じ）
 * ===================================================================== */
@media (min-width: 600px) {
	/* --- FV --- */
	.hero--top + .dots-block { margin-top: calc(60 * var(--u)); }
	.hero--top .hero__sub-tail { display: inline-block; }
	.hero--top .hero__lead { font-size: max(calc(48 * var(--ff)), calc(72 * var(--u))); line-height: max(calc(69.33333 * var(--ff)), calc(104 * var(--u))); }
	/* 写真は右56%。縦位置26%で顔が枠に入る。横0%（左端を残す）で人物が右に寄り、本文と重ならない。 */
	.hero--top .hero__photo { display: block; inset: 0 0 0 auto; width: 56%; opacity: 1; }
	.hero--top .hero__photo img { object-fit: cover; object-position: 0% 26%; }
	/* 左は blue-60 の面、写真が始まるあたりから右へ薄くする（交換ページの ① と同じ色）。 */
	.hero--top .hero__box::after {
		display: block;
		background: linear-gradient(90deg,
			var(--fig-blue-60) 0%, var(--fig-blue-60) 46%,
			rgba(11, 86, 162, .55) 64%, rgba(11, 86, 162, .2) 100%);
	}

	/* --- ご用件（主役）：3列。FV直下で3つとも視野に入る大きさに抑える --- */
	.top-entry__grid { grid-template-columns: repeat(3, 1fr); gap: calc(24 * var(--u)); }
	/* PC は「アイコン上・文字下」の3層（制作メモ: アイコン+太字+補足）。 */
	.top-entry__card { flex-direction: column; text-align: center; gap: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); }
	.top-entry__ico { width: calc(116 * var(--u)); height: calc(116 * var(--u)); }
	.top-entry__card--exchange .top-entry__ico::after { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
	.top-entry__text { align-items: center; gap: calc(4 * var(--u)); }
	.top-entry__title { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	/* 3枚とも説明が1行に収まる大きさ（いちばん長い「お湯が出ない・水漏れなど症状から調べる」で決めた）。 */
	.top-entry__desc { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); }

	/* --- 料金の目安 --- */
	.top-price__grid { grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); }
	.top-price__item { padding: calc(28 * var(--u)) calc(24 * var(--u)); gap: calc(12 * var(--u)); }
	.top-price__cap { font-size: max(calc(19 * var(--ff)), calc(28 * var(--u))); padding: 2px calc(24 * var(--u)); }
	.top-price__desc { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
	.top-price__yen { font-size: max(calc(27 * var(--ff)), calc(40 * var(--u))); }
	.top-price__yen mark { background-size: 100% 14px; }

	/* --- メーカー：600 以上は3列×3段。区切りは線だけ --- */
	.top-makers__grid { grid-template-columns: repeat(3, 1fr); }
	.top-makers__grid li:last-child:nth-child(odd) { grid-column: auto; }
	.top-makers__grid a { min-height: calc(88 * var(--u)); font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.top-makers__more { font-size: max(calc(12 * var(--ff)), calc(14 * var(--u))); }
	.top-makers__name { display: inline; }


	/* --- 選ばれる理由 --- */
	.top-reasons__grid { grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); }
	.top-reason { padding: calc(36 * var(--u)) calc(28 * var(--u)); gap: calc(14 * var(--u)); }
	.top-reason__no { width: calc(76 * var(--u)); height: calc(76 * var(--u)); font-size: max(calc(22 * var(--ff)), calc(32 * var(--u))); }
	.top-reason__title { font-size: max(calc(16 * var(--ff)), calc(24 * var(--u))); }
	.top-reason__title br { display: inline; }
	.top-reason__text { font-size: max(calc(14 * var(--ff)), calc(17 * var(--u))); text-align: left; align-self: stretch; }

	/* --- コラム --- */
	.top-columns__grid { grid-template-columns: repeat(3, 1fr); gap: calc(32 * var(--u)); }
	.top-column__date { font-size: max(calc(14 * var(--ff)), calc(16 * var(--u))); }
	.top-column__title { font-size: max(calc(14 * var(--ff)), calc(18 * var(--u))); }
}