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

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

/* -----------------------------------------------------------------------------
 * 型番の下の目印
 *   ウィズナの現行6品番はすべてオーブン接続非対応。ここを見落とすと
 *   コンロ下にガスオーブンがあるお宅で設置できないので、型番の下に必ず出す。
 * -------------------------------------------------------------------------- */
.gc2.paloma.withna .wi-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;
}
/* Black Line（前面フェイスがグラファイトブラック）の目印 */
.gc2.paloma.withna .wi-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: #1c1c20; border-radius: 3px; white-space: nowrap;
}
/* ヒートカットトップ（ハイパーガラスコートトップのみ）の目印 */
.gc2.paloma.withna .wi-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.withna .wi-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;
}

/* 3色なのでPCは3列（SPは共通CSSのまま2列） */
@media screen and (min-width: 768px) {
	.gc2.paloma.withna .gc2-colors { grid-template-columns: repeat(3, 1fr); }
}

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

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

/* -----------------------------------------------------------------------------
 * 施工実績データのブロック幅をそろえる
 *   共通CSSに `.gc2-idata__c:nth-of-type(3) { grid-column: 1/-1 }`（3枚目だけ全幅）が
 *   あり、内訳が6枚あるこのページでは幅がバラバラになる。
 *   ここで打ち消して、内訳カードはすべて同じ幅（2列）にする。
 *   最後の「施工した都道府県」だけはチップの一覧なので is-wide のまま全幅で出す。
 * -------------------------------------------------------------------------- */
.gc2.paloma.withna .gc2-idata__c:nth-of-type(3) { grid-column: auto; }
.gc2.paloma.withna .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.withna .gc2-item__sku > span {
		display: inline-flex; flex-wrap: wrap; gap: 4px 5px; vertical-align: middle;
	}
	.gc2.paloma.withna .wi-oven { margin-right: 0; }
	.gc2.paloma.withna .wi-line,
	.gc2.paloma.withna .wi-heat { margin-left: 0; }
}