@charset "utf-8";
/* =============================================================================
 * エコキュート メーカー別シリーズページ 共通の上書き
 * /ecokyu-to/css/eco_maker_series.css
 *  ★IHの /ih/css/ih_maker_series.css を写し、.gc2.ih.ms → .gc2.ecq.ms に替えたもの（2026-10-07）。
 *    ★「.eco」はサイト共通の css/base.css に別の部品として既にある（幅396pxの左寄せになる）ので使わない。
 *    末尾にエコキュートだけの調整（縦長の商品写真・価格の内訳・補助金の表）を足した。
 *
 *  【構成】
 *   ① IH共通UI … /ih/css/series.css（.gc2-* ＝ガスコンロのシリーズページと同じ部品）
 *   ② このファイル … アクセント色と、写真つき解説（.ms-cards）・型番の目印などメーカーページ共通の部品
 *  対象：三菱 EURO STYLE・らく楽IH・simple・その他／パナソニック 各シリーズ。三菱 CROSS+TOP は cross_top.css。
 *  見出しはサイト共通のまま使う。共通CSSは触らない。
 * ========================================================================== */

.gc2.ecq.ms {
	/* メイン色はエコキュート共通（/ecokyu-to/css/series.css）の値をそのまま使う。ここでは上書きしない */
	--ms-line: #dfe5ea;
}

/* 型番の下の目印（シリーズ・タイプ）。スマホの2列で長いと列が広がるので折り返しを許す */
.gc2.ecq.ms .ms-tag {
	display: inline-block; margin-right: 5px; padding: 1px 8px;
	font-size: 11px; font-weight: bold; line-height: 1.6; letter-spacing: 0;
	color: #fff; background: var(--gc2-accent); border-radius: 3px; white-space: normal; vertical-align: 1px;
}

/* 商品カードの中身がはみ出して列を押し広げないようにする */
.gc2.ecq.ms .gc2-items > .gc2-item { min-width: 0; }

/* 写真つき解説のグリッド（CROSS+TOP の .ct-cards と同じ形）。図は 25:16 の枠に contain で収める */
.gc2.ecq.ms .ms-cards {
	list-style: none; margin: 0 10px; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px;
}
.gc2.ecq.ms .ms-cards > li {
	border: 1px solid var(--ms-line); border-radius: var(--gc2-radius);
	background: #fff; overflow: hidden;
}
.gc2.ecq.ms .ms-cards > li::before { content: none; }
.gc2.ecq.ms .ms-cards__fig { margin: 0; background: #fff; }
.gc2.ecq.ms .ms-cards__fig img { display: block; width: 100%; height: auto; aspect-ratio: 25 / 16; object-fit: contain; background: #fff; }
.gc2.ecq.ms .ms-cards__b { padding: 11px 13px 13px; }
.gc2.ecq.ms .ms-cards__t { display: block; font-size: 16px; font-weight: bold; line-height: 1.35; }
.gc2.ecq.ms .ms-cards__sub {
	display: inline-block; margin: 4px 0 0; padding: 2px 8px;
	font-size: 11.5px; font-weight: bold; line-height: 1.4;
	color: #fff; background: var(--gc2-accent); border-radius: 3px;
}
.gc2.ecq.ms .ms-cards__d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.75; }

/* 型番が1つだけのページは、横いっぱいの1枚にする（右を空けない）。
   ※品番が複数のページで奇数のときも、最後の1枚は広げずほかのカードと同じ大きさにする（2026-10-06 指示）。
   PCでは写真を左・説明を右に置いた横並びカード（ノーリツ プラスドゥ /gasconro/noritz/plusdo/css/plusdo.css と同じ形。2026-10-06 指示）。
   子要素の並びは ms_body.php の順（バッジ／写真／型番／仕様／タグ／価格／総額／ボタン）。 */
.gc2.ecq.ms .gc2-items.ms-items--one { grid-template-columns: 1fr; }

/* 施工事例が奇数のとき、最後の1つは横いっぱい */
/* 2026-10-07 施工事例が1件・奇数件でも横いっぱいに広げない（ガスコンロと同じ2列の1枠）。指示により外した */

/* 実績のKPIは件数が少ないうちは3枚以下になる。並んだ枚数で横幅を割り、右を空けない */
.gc2.ecq.ms .gc2-kpi { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

/* 前モデルの対応表は左の欄に「旧型番 → 現行品」が入るので少し広げる（SPは縦積み） */
.gc2.ecq.ms #old .gc2-flags > li { grid-template-columns: 15em 1fr; }

/* 共通CSSは3枚目の実績カードを横いっぱいにするが、三菱のページでは枚数で決める（ms_body.php が is-wide を付ける） */
.gc2.ecq.ms .gc2-idata__c:nth-of-type(3) { grid-column: auto; }
.gc2.ecq.ms .gc2-idata__c.is-wide { grid-column: 1 / -1; }

/* 仕様表（型番が複数のとき）。1列目は固定のまま、値は中央ぞろえ */
.gc2.ecq.ms .ms-spec td { text-align: center; }

@media screen and (min-width: 768px) {
	.gc2.ecq.ms .gc2-items.ms-items--one > .gc2-item {
		display: grid; grid-template-columns: 330px minmax(0, 1fr);
		column-gap: 20px; align-items: start; padding: 16px;
	}
	.gc2.ecq.ms .gc2-items.ms-items--one > .gc2-item > .gc2-item__badges { grid-column: 1 / -1; }
	.gc2.ecq.ms .gc2-items.ms-items--one > .gc2-item > .gc2-item__figure { grid-column: 1; grid-row: 2 / span 6; }
	.gc2.ecq.ms .gc2-items.ms-items--one > .gc2-item > :not(.gc2-item__badges):not(.gc2-item__figure) { grid-column: 2; }
	/* 横並びになるぶん、型番は少し大きく出す */
	.gc2.ecq.ms .gc2-items.ms-items--one .gc2-item__sku { font-size: 19px; }
}
@media screen and (min-width: 760px) {
	.gc2.ecq.ms .ms-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
	.gc2.ecq.ms .ms-cards.is-odd > li:last-child { grid-column: 1 / -1; }
	.gc2.ecq.ms .ms-cards.is-odd > li:last-child .ms-cards__fig img { max-height: 384px; }
}
@media only screen and (max-width: 640px) {
	/* 元（/ih/css/ih_maker_series.css）にはこの行の末尾に余分な「{」があり、後ろの指定が効いていなかった。エコキュートでは外した */
	.gc2.ecq.ms .gc2-kpi { grid-template-columns: 1fr 1fr; }
	.gc2.ecq.ms #old .gc2-flags > li { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- エコキュートだけの調整（2026-10-07）
   商品写真は縦長の本体（貯湯ユニット＋ヒートポンプ）を500×500の白地に収めたもの（Craton2の商品画像と同じ）。
   IH・ガスコンロ用の横長の枠（690×390）だと小さくなるので、正方形の枠で全体を見せる。 */
.gc2.ecq.ms .gc2-item__figure img,
.gc2.ecq.ms .gc2-intro__fig img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.gc2.ecq.ms .gc2-intro__fig img { max-height: 360px; width: auto; margin: 0 auto; display: block; }
/* 価格の内訳（リモコンセット・脚部カバー・工事パック）。本体価格より一段小さく */
.gc2.ecq.ms .gc2-item__prices .is-set dt { font-size: 12px; color: #5a6b78; font-weight: normal; }
.gc2.ecq.ms .gc2-item__prices .is-set dt small { display: block; font-size: 11px; color: #7a8792; }
.gc2.ecq.ms .gc2-item__prices .is-set dd { font-size: 13px; color: #33414d; font-weight: bold; }
/* 補助金の表 */
.gc2.ecq.ms .eco-subsidy dd b { color: var(--gc2-accent); font-size: 16px; }
/* 写真つき解説が3枚のときは横3列に並べる（最後の1枚を広げたり中央に寄せたりしない。2026-10-07 指示）。
   5枚以上の奇数は従来どおり（エコキュートのページでは使っていない） */
@media screen and (min-width: 760px) {
	.gc2.ecq.ms .ms-cards.is-n3 { grid-template-columns: repeat(3, 1fr); }
	.gc2.ecq.ms .ms-cards.is-n3 > li:last-child { grid-column: auto; }
	.gc2.ecq.ms .ms-cards.is-n3 > li:last-child .ms-cards__fig img { max-height: none; }
}

/* -----------------------------------------------------------------------------
 * 価格の内訳（リモコンセット・脚部カバー・まるごと工事パック）を1行にする（2026-10-08）
 *   「高さ取りすぎ。スマホ版も同様。改行すんな」→ 品番を見出しの横に小さく並べ、
 *   スマホは見出しを「リモコン」「カバー」に縮め（.is-pc を隠す）、本体同梱のときは品番の「(付属)」を出さない。
 *   見出し・品番・金額を1行に収める。スマホでも縦に積まない（共通CSSは縦積みにしている）。
 * ------------------------------------------------------------------------- */
.gc2.ecq.ms .gc2-item__prices > div.is-set { flex-direction: row; align-items: baseline; gap: 6px; padding: 2px 6px; }
.gc2.ecq.ms .gc2-item__prices .is-set dt { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc2.ecq.ms .gc2-item__prices .is-set dt small { display: inline; margin-left: 6px; }
.gc2.ecq.ms .gc2-item__prices .is-set dd { flex: none; white-space: nowrap; }
@media screen and (max-width: 767px) {
	.gc2.ecq.ms .gc2-item__prices > div.is-set { padding: 1px 0; gap: 2px; }
	.gc2.ecq.ms .gc2-item__prices .is-set dt { font-size: 9.5px; }
	.gc2.ecq.ms .gc2-item__prices .is-set dt .is-pc { display: none; }
	.gc2.ecq.ms .gc2-item__prices .is-set dt small { font-size: 9px; margin-left: 1px; letter-spacing: -.04em; }
	.gc2.ecq.ms .gc2-item__prices .is-set dd { font-size: 11px; }
}