@charset "utf-8";
/* =============================================================================
 * パロマ フェイシスグランド（FACEIS GRAND） シリーズ固有CSS
 * /gasconro/paloma/faceisgrand/css/faceisgrand.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/css/series.css（.gc2-* のレイアウト一式）
 *   ② パロマ共通       … /gasconro/paloma/css/paloma.css（.pa-cards・.pa-tm）
 *   ③ このファイル     … このシリーズの目印と、素材の縦横比に合わせた最小限の調整だけ
 *
 *  見出しはサイト共通のまま使う。共通CSSは触らない（クレア・アバンセへ波及するため）。
 * ========================================================================== */

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

/* -----------------------------------------------------------------------------
 * オーブン接続の目印
 *   Uが付くかどうかで設置できるかが変わるため、型番の下でひと目で分かるようにする。
 * -------------------------------------------------------------------------- */
.gc2.paloma.faceisgrand .fg-oven {
	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;
}
.gc2.paloma.faceisgrand .fg-oven.is-yes { background: #1f7a8c; }	/* オーブン接続対応品 */

/* 受注生産品の目印（納期が通常品と違う）。★バッジ行（天板幅＋無料10年保証）は
   共通CSSが2枠で組んでいるので絶対に足さない。型番の下のオーブン接続バッジの隣に置く。 */
.gc2.paloma.faceisgrand .fg-order {
	display: inline-block; margin-left: 5px; padding: 1px 8px;
	font-size: 11px; font-weight: bold; line-height: 1.6; letter-spacing: 0;
	color: #fff; background: #b4262c; border-radius: 3px; white-space: nowrap;
}

/* カラー一覧に「どんな方に向くか」の一行を足す */
.gc2.paloma.faceisgrand .fg-fit {
	display: block; margin-top: 6px; padding: 10px;
	border-top: 1px dashed var(--pa-line);
	font-size: 11.5px; line-height: 1.6; color: #555; text-align: left;
}

/* 6色を並べるので、1枠の幅を少し詰めて3列（SPは2列）で収める */
@media screen and (min-width: 768px) {
	.gc2.paloma.faceisgrand .gc2-colors { grid-template-columns: repeat(3, 1fr); }
}

/* 操作パネル図はパロマほっとなびの公式素材（2000×1065）を600pxで使う。 */
.gc2.paloma.faceisgrand .gc2-panel__fig { padding: 12px 10px 0; background: #fff; text-align: center; }
.gc2.paloma.faceisgrand .gc2-panel__fig img { width: 100%; max-width: 600px; height: auto; }

/* 写真つき解説（.pa-cards）の図版。
   素材の縦横比が 500×320／520×320／600×384（公式素材）と混在するので、
   枠は 25:16 に固定したまま <contain> で収める（cover にすると端が切れる）。 */
.gc2.paloma.faceisgrand .pa-cards__fig img {
	aspect-ratio: 25 / 16; object-fit: contain; background: #fff;
}


/* -----------------------------------------------------------------------------
 * 施工実績データのブロック幅をそろえる
 *   共通CSSに `.gc2-idata__c:nth-of-type(3) { grid-column: 1/-1 }`（3枚目だけ全幅）が
 *   あり、内訳が6枚あるこのページでは 344/344/700/344/344/700 とバラバラになる。
 *   ここで打ち消して、内訳カードはすべて同じ幅（2列）にする。
 *   最後の「施工した都道府県」だけはチップの一覧なので is-wide のまま全幅で出す。
 * -------------------------------------------------------------------------- */
.gc2.paloma.faceisgrand .gc2-idata__c:nth-of-type(3) { grid-column: auto; }
.gc2.paloma.faceisgrand .gc2-idata__c:nth-of-type(3) .gc2-bars__b { max-width: none; }

/* -----------------------------------------------------------------------------
 * スマホ版：型番の下の目印が縦に並んだときにくっつかないようにする
 *   幅が足りず「オーブン接続非対応」と「受注生産品」が2段になるため、
 *   inline-flex + gap で行間・字間をとる（PCは1行に収まるので影響なし）。
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	.gc2.paloma.faceisgrand .gc2-item__sku > span {
		display: inline-flex; flex-wrap: wrap; gap: 4px 5px; vertical-align: middle;
	}
	.gc2.paloma.faceisgrand .fg-oven { margin-right: 0; }
	.gc2.paloma.faceisgrand .fg-order { margin-left: 0; }
}