@charset "utf-8";
/* =============================================================================
 * IHクッキングヒーター メーカー別シリーズページ 共通の上書き（三菱電機・パナソニック）
 * /ih/css/ih_maker_series.css（旧 /ih/mitsubishi/css/ms_series.css をここへ移した）
 *
 *  【構成】
 *   ① IH共通UI … /ih/css/series.css（.gc2-* ＝ガスコンロのシリーズページと同じ部品）
 *   ② このファイル … アクセント色と、写真つき解説（.ms-cards）・型番の目印などメーカーページ共通の部品
 *  対象：三菱 EURO STYLE・らく楽IH・simple・その他／パナソニック 各シリーズ。三菱 CROSS+TOP は cross_top.css。
 *  見出しはサイト共通のまま使う。共通CSSは触らない。
 * ========================================================================== */

.gc2.ih.ms {
	/* メイン色はIH共通（/ih/css/series.css）の赤系をそのまま使う。ここでは上書きしない */
	--ms-line: #dfe5ea;
}

/* 型番の下の目印（シリーズ・タイプ）。スマホの2列で長いと列が広がるので折り返しを許す */
.gc2.ih.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.ih.ms .gc2-items > .gc2-item { min-width: 0; }

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

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

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

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

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

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

@media screen and (min-width: 768px) {
	.gc2.ih.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.ih.ms .gc2-items.ms-items--one > .gc2-item > .gc2-item__badges { grid-column: 1 / -1; }
	.gc2.ih.ms .gc2-items.ms-items--one > .gc2-item > .gc2-item__figure { grid-column: 1; grid-row: 2 / span 6; }
	.gc2.ih.ms .gc2-items.ms-items--one > .gc2-item > :not(.gc2-item__badges):not(.gc2-item__figure) { grid-column: 2; }
	/* 横並びになるぶん、型番は少し大きく出す */
	.gc2.ih.ms .gc2-items.ms-items--one .gc2-item__sku { font-size: 19px; }
}
@media screen and (min-width: 760px) {
	.gc2.ih.ms .ms-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
	.gc2.ih.ms .ms-cards.is-odd > li:last-child { grid-column: 1 / -1; }
	.gc2.ih.ms .ms-cards.is-odd > li:last-child .ms-cards__fig img { max-height: 384px; }
}
@media only screen and (max-width: 640px) {
	.gc2.ih.ms .gc2-kpi { grid-template-columns: 1fr 1fr; } {
	.gc2.ih.ms #old .gc2-flags > li { grid-template-columns: 1fr; }
}