@charset "utf-8";
/* =============================================================================
 * ノーリツ ネスト（Nest） シリーズ固有CSS
 * /gasconro/noritz/nest/css/nest.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/rinnai/css/series.css（.gc2-* のレイアウト一式）
 *   ② ノーリツ共通     … /gasconro/noritz/css/noritz.css
 *   ③ このファイル     … ネストのアクセント色と固有の上書きだけ（最小限）
 *
 *  ネストはベーシックタイプで、つやめきガラス（ムーンシルバー）が持ち味。
 *  プログレの金系（#8a7233）、オルシェの青灰（#4f6472）とは変えて、
 *  落ち着いたグレージュをアクセントにする。見出しはサイト共通のまま使う。
 * ========================================================================== */

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

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

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

/* -----------------------------------------------------------------------------
 * 口数の目印
 *   ネストは2口と3口が同じ一覧に並ぶので、ひと目で分かるようにする。
 *   天板幅バッジの隣に置くと横に入りきらず崩れるので、型番の下の説明の先頭に置く。
 *   2口だけ色を変えて、見落とさないようにしている。
 * -------------------------------------------------------------------------- */
.nst-burner {
	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: var(--gc2-accent); border-radius: 3px; white-space: nowrap;
	vertical-align: 1px;
}
.nst-burner.is-two { background: #b3651a; }	/* 2口タイプ */

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

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

/* 選び方の写真もそろえる */
.gc2.noritz.nest .gc2-vs__card > img {
	width: 100%; margin-top: 0; aspect-ratio: 25 / 16; object-fit: contain; background: #fff;
}

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

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

/* カードが3枚のときは3列にする */
@media screen and (min-width: 760px) {
	.gc2.noritz.nest .gc2-vs:has(> .gc2-vs__card:nth-child(3):last-child) {
		grid-template-columns: repeat(3, 1fr);
	}
}

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