@charset "utf-8";
/* =============================================================================
 * ノーリツ ミッケ（Mikke） シリーズ固有CSS
 * /gasconro/noritz/mikke/css/mikke.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/css/series.css（.gc2-* のレイアウト一式）
 *   ② ノーリツ共通     … /gasconro/noritz/css/noritz.css
 *   ③ このファイル     … ミッケのアクセント色と固有の上書きだけ（最小限）
 *
 *  ミッケはシンプルタイプで、3色から選べるのが持ち味。
 *  プログレ（金）・オルシェ（青灰）・ネスト（グレージュ）と変えて、
 *  シルバーピンクに寄せた落ち着いたローズブラウンをアクセントにする。
 *  見出しはサイト共通のまま使う（メーカーごとに体裁を変えない）。
 * ========================================================================== */

.gc2.noritz.mikke {
	--gc2-accent: #1f3d52; /* 全シリーズ共通の色（デリシアと同色・2026-09-16 指示） */
}

/* -----------------------------------------------------------------------------
 * 写真つき解説（デザイン／コンロ／グリル）
 *   共通CSSに同じ用途のグリッドが無いのでここで持つ。
 *   オルシェ・ネストと同じ形（.orc-cards / .nst-cards）。
 *   将来ノーリツ共通へ移すときは3ページの link を同時に直すこと。
 * -------------------------------------------------------------------------- */
.mke-cards {
	list-style: none; margin: 0 10px; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px;
}
.mke-cards > li {
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
	background: #fff; overflow: hidden;
}
.mke-cards > li::before { content: none; }
.mke-cards__fig { margin: 0; background: #fff; }
.mke-cards__fig img {
	display: block; width: 100%; height: auto;
	/* 画像の縦横比はまちまち（500x320・544x270・900x240 など）。
	   高さを揃えるために切らず、そのまま入れる。 */
}
.mke-cards__b { padding: 11px 13px 13px; }
.mke-cards__t { display: block; font-size: 16px; font-weight: bold; line-height: 1.35; }
.mke-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;
}
.mke-cards__d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.75; }

@media screen and (min-width: 760px) {
	.mke-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* -----------------------------------------------------------------------------
 * レンジフード連動の目印
 *   ミッケは同じ色・同じ幅で「標準タイプ」と「連動タイプ」が並ぶので、
 *   どちらなのかがひと目で分かるようにする。
 *   天板幅バッジの隣に足すと横に入りきらないので、型番の下の説明に置く。
 * -------------------------------------------------------------------------- */
.mke-hood {
	display: inline-block; margin-right: 5px; padding: 1px 7px;
	font-size: 11px; font-weight: bold; line-height: 1.5; letter-spacing: 0;
	color: #fff; background: #8f8f8f; border-radius: 3px; white-space: nowrap;
	vertical-align: 1px;
}
.mke-hood.is-hood { background: #1f7a8c; }	/* レンジフード連動タイプ */

/* カラーの一覧に「どのキッチンに合うか」の一行を足す */
.mke-fit { display: block; font-size: 11px; line-height: 1.5; color: var(--gc2-ink-sub); padding: 0 5px 7px; }

@media screen and (max-width: 640px) {
	.mke-cards { margin: 0 8px; }
	.mke-cards__t { font-size: 15px; }
	.mke-cards__d { font-size: 13px; }
	.mke-hood { font-size: 10.5px; padding: 1px 6px; margin-right: 4px; }
	.mke-fit { font-size: 10.5px; }
}

/* -----------------------------------------------------------------------------
 * 横に並ぶ図版の大きさをそろえる
 *   素材の縦横比がまちまち（500x320・544x270・700x467・900x240 など）で、
 *   そのまま並べると隣同士で高さが違って見づらい。
 *   同じ枠に収め、切り取らずに中央へ入れる（object-fit:contain）。
 * -------------------------------------------------------------------------- */
.gc2.noritz.mikke .mke-cards__fig,
.gc2.noritz.mikke .gc2-panel__fig {
	aspect-ratio: 25 / 16;			/* 500x320 に合わせる */
	display: flex; align-items: center; justify-content: center;
	background: #fff; overflow: hidden;
}
.gc2.noritz.mikke .mke-cards__fig img,
.gc2.noritz.mikke .gc2-panel__fig img { width: 85%; height: 100%; object-fit: contain; }

/* 選び方の写真も同じ大きさにそろえる */
.gc2.noritz.mikke .gc2-vs__card > img {
	width: 85%; margin-top: 0; aspect-ratio: 25 / 16; object-fit: contain; background: #fff;
}

/* 付属品・別売品の図版もそろえる */
.gc2.noritz.mikke .gc2-opt__fig {
	width: 140px; aspect-ratio: 3 / 2;
	display: flex; align-items: center; justify-content: center;
	background: #fff; overflow: hidden;
}
.gc2.noritz.mikke .gc2-opt__fig img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }

/* お手入れの図版は枠の高さを決めて敷き詰める */
.gc2.noritz.mikke .gc2-care__fig { height: 150px; }
.gc2.noritz.mikke .gc2-care__fig img {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

@media screen and (max-width: 640px) {
	.gc2.noritz.mikke .gc2-opt__fig { width: 100px; }
	.gc2.noritz.mikke .gc2-care__fig { height: 130px; }
}

/* 選び方のカードが3枚のときの3列化は共通CSS（gasconro/css/series.css）へ移した。
   ここで重複して持つと breakpoint が食い違うので置かない。 */