@charset "utf-8";
/* =============================================================================
 * ノーリツ オルシェ（Orche） シリーズ固有CSS
 * /gasconro/noritz/orche/css/orche.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/css/series.css（.gc2-* のレイアウト一式）
 *   ② ノーリツ共通     … /gasconro/noritz/css/noritz.css
 *   ③ このファイル     … オルシェのアクセント色と固有の上書きだけ（最小限）
 *
 *  オルシェは「スタイリッシュ・道具としての愛着」が売りのシリーズなので、
 *  プログレの金系（#8a7233）ではなく、ステンレスとガラスに寄せた
 *  くもりのある青灰色をアクセントにする。見出しはサイト共通のまま使う。
 * ========================================================================== */

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

/* -----------------------------------------------------------------------------
 * デザイン・調理機能・グリル・アプリの写真つき解説
 *   共通CSSに同じ用途のグリッドが無いので、ここで持つ。
 *   写真が大きく見えるように、PCでは2列（狭い画面では1列）。
 * -------------------------------------------------------------------------- */
.orc-cards {
	list-style: none; margin: 0 10px; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px;
}
.orc-cards > li {
	border: 1px solid var(--gc2-line); border-radius: var(--gc2-radius);
	background: #fff; overflow: hidden;
}
.orc-cards > li::before { content: none; }
.orc-cards__fig { margin: 0; background: #fff; }
.orc-cards__fig img {
	display: block; width: 85%; height: auto;text-align: center;margin: 0 auto;
	/* 画像の縦横比はまちまち（500x320・700x467・720x250 など）。
	   高さを揃えるために切らず、そのまま入れる。 */
}
.orc-cards__b { padding: 11px 13px 13px; }
.orc-cards__t { display: block; font-size: 14px; font-weight: bold; line-height: 1.35; }
.orc-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;
}
.orc-cards__d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.75; }

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

/* -----------------------------------------------------------------------------
 * 温度クックの数字を目立たせる小物
 * -------------------------------------------------------------------------- */
.orc-temp {
	display: inline-block; padding: 1px 7px; margin: 0 2px;
	font-size: 12px; font-weight: bold; letter-spacing: 0;
	color: #b3251a; background: #fdf1ef; border: 1px solid #edc9c4; border-radius: 3px;
	white-space: nowrap; vertical-align: 1px;
}

@media screen and (max-width: 640px) {
	.orc-cards { margin: 0 8px; }
	.orc-cards__t { font-size: 15px; }
	.orc-cards__d { font-size: 13px; }
}

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

/* 操作パネルの図は文字が読める大きさで出す（左右とも同じ大きさの画像） */
.gc2.noritz.orche .gc2-panel__fig { padding: 12px 10px 0; background: #fff; }
.gc2.noritz.orche .gc2-panel__fig img { width: 100%; max-width: none; height: auto; }

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

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

/* お手入れの図版は枠の高さを決めて敷き詰める */
.gc2.noritz.orche .gc2-care__fig { height: 150px; }
.gc2.noritz.orche .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.orche .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.orche .gc2-opt__fig { width: 100px; }
	.gc2.noritz.orche .gc2-care__fig { height: 130px; }
}

/* 文字が焼き込まれた横長の図（デザイン比較・温度キープの流れ・つなぐレシピの4コマ・
   グリルクリーンモード）は、2列の枠に入れると縮小されて文字がつぶれる。
   横幅いっぱいの1枚として出し、縦横比の固定も外して実寸どおりに見せる。 */
.gc2.noritz.orche .orc-cards > li.is-wide { grid-column: 1 / -1; }
.gc2.noritz.orche .orc-cards__fig.is-wide { aspect-ratio: auto; display: block; }
.gc2.noritz.orche .orc-cards__fig.is-wide img { width: 90%; height: auto; object-fit: contain; margin-top: 5%;}