@charset "utf-8";
/* =============================================================================
 * パロマ ブリリオ（BRilliO） シリーズ固有CSS
 * /gasconro/paloma/brillio/css/brillio.css
 *
 *  【3層構成】
 *   ① ガスコンロ共通UI … /gasconro/css/series.css（.gc2-* のレイアウト一式）
 *   ② パロマ共通       … /gasconro/paloma/css/paloma.css（.pa-cards・.pa-tm）
 *   ③ このファイル     … このシリーズの目印と、素材の縦横比に合わせた最小限の調整だけ
 *
 *  見出し・カード・価格・CTAはサイト共通のまま使う（共通CSSは触らない）。
 *  クレア・アバンセ・フェイシスグランドと同じ見え方にそろえるため、
 *  共通CSSの値（色チップの大きさ・仕様表の項目幅・比較表の列幅など）は上書きしない。
 * ========================================================================== */

.gc2.paloma.brillio {
	--gc2-accent: #6b6f76;		/* シャインシルバーのフェイスに寄せたグレー系 */
	--gc2-accent-bg: #f1f2f4;
}

/* -----------------------------------------------------------------------------
 * 型番の下の目印
 *   ブリリオの現行10品番はすべてオーブン接続対応。コンロ下がガスオーブンでも
 *   選べることが選定の分かれ目になるので、型番の下に必ず出す。
 *   あわせて BRilliOα（クリアガラストップ）／Black Line／ヒートカットトップも出す。
 * -------------------------------------------------------------------------- */
.gc2.paloma.brillio .br-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.brillio .br-oven.is-yes { background: #1f7a8c; }

/* BRilliOα（クリアガラストップ）／Black Line（前面フェイスがブラック）の目印 */
.gc2.paloma.brillio .br-line {
	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: #8a6d3b; border-radius: 3px; white-space: nowrap;
}
.gc2.paloma.brillio .br-line.is-black { background: #1c1c20; }
/* ヒートカットトップ（ハイパーガラスコートトップのみ）の目印 */
.gc2.paloma.brillio .br-heat {
	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: #1f7a8c; border-radius: 3px; white-space: nowrap;
}

/* カラー一覧に「どんな方に向くか」の一行を足す */
.gc2.paloma.brillio .br-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;
}

/* 操作パネル図はパロマほっとなびの公式素材。横幅いっぱいに出す。 */
.gc2.paloma.brillio .gc2-panel__fig { padding: 12px 10px 0; background: #fff; text-align: center; }
.gc2.paloma.brillio .gc2-panel__fig img { width: 100%; max-width: 600px; height: auto; }

/* 写真つき解説（.pa-cards）の図版。
   素材は 480×320・600×400（3:2）と 600×300（2:1）・690×390 が混在するので、
   枠は 3:2 に固定したまま <contain> で収める（cover にすると端が切れる）。
   カードの背景と同じ白で埋まるので、余白は見た目に出ない。 */
.gc2.paloma.brillio .pa-cards__fig img {
	aspect-ratio: 3 / 2; object-fit: contain; background: #fff;
}

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

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

/* -----------------------------------------------------------------------------
 * 天板カラー一覧はPCで3列
 *   共通CSSは5色のとき5列（1枠137px）になり色見本が小さくなるので、
 *   ブリリオだけ3列にして1枚を大きく見せる（SPは共通CSSのまま）。
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	.gc2.paloma.brillio .gc2-colors { grid-template-columns: repeat(3, 1fr); }
}