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

.gc2.paloma.metal {
	--gc2-accent: #4f7a5c;		/* ホーロートップの実用グレードに合わせた落ち着いた緑。#333 と十分な明度差をとる */
	--gc2-accent-bg: #ecf4ee;
}

/* -----------------------------------------------------------------------------
 * 型番の下の目印
 *   バッジ行（天板幅／無料10年保証）は共通CSSが2枠で組んでいるので触らない。
 *   リプラで選定の分かれ目になる「オーブン接続対応」「ヒートカットトップ」は
 *   型番の下に置く（クレア・フェイシスグランド・シストと同じ場所）。
 * -------------------------------------------------------------------------- */
.gc2.paloma.metal .pm-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.metal .pm-oven.is-yes { background: #1f7a8c; }
.gc2.paloma.metal .pm-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.metal .pm-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;
}

/* -----------------------------------------------------------------------------
 * 操作パネル図（パロマ公式の操作部図・横長）
 *   共通CSSの max-width:366px のままだと文字が小さくなりすぎるので、
 *   このページだけ 520px まで許容する。
 * -------------------------------------------------------------------------- */
.gc2.paloma.metal .gc2-panel__fig { padding: 12px 10px 0; background: #fff; text-align: center; }
.gc2.paloma.metal .gc2-panel__fig img { width: 100%; max-width: 520px; height: auto; }

/* 写真つき解説（.pa-cards）の図版。
   左右に並ぶ画像の大きさをそろえるため、素材側をすべて 600×400（3:2）に
   統一してある（写真は切り出し、説明図は地色で上下を足して縦横比だけを合わせた）。
   枠と素材の比が同じなので cover でも切れず、どのカードも同じ大きさで出る。 */
.gc2.paloma.metal .pa-cards__fig img {
	aspect-ratio: 3 / 2; object-fit: cover; background: #fff;
}

/* -----------------------------------------------------------------------------
 * 商品一覧を天板幅で2ブロックに分ける
 *   絞り込みUIを置くほど品番が多くない（4品番）ので、
 *   「天板幅60cm（2品番）」「天板幅75cm（2品番）」の見出しで分けるだけにする。
 * -------------------------------------------------------------------------- */
.gc2.paloma.metal .pm-wgroup { margin-top: 20px; }
.gc2.paloma.metal .pm-wgroup:first-of-type { margin-top: 0; }
.gc2.paloma.metal .pm-wgroup__h {
	display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin: 0 0 10px; padding: 7px 12px;
	font-size: 15px; font-weight: bold; line-height: 1.5; color: #fff;
	background: var(--gc2-accent); border-radius: var(--gc2-radius);
}
.gc2.paloma.metal .pm-wgroup__h span {
	font-size: 12px; font-weight: normal; color: #fff; opacity: .92;
}

/* -----------------------------------------------------------------------------
 * 施工実績データのブロック幅をそろえる
 *   共通CSSに `.gc2-idata__c:nth-of-type(3) { grid-column: 1/-1 }`（3枚目だけ全幅）が
 *   あり、内訳が5枚以上あるこのページでは幅がバラバラになる。
 * -------------------------------------------------------------------------- */
.gc2.paloma.metal .gc2-idata__c:nth-of-type(3) { grid-column: auto; }
.gc2.paloma.metal .gc2-idata__c:nth-of-type(3) .gc2-bars__b { max-width: none; }

/* -----------------------------------------------------------------------------
 * スマホ版：型番の下の目印が2段になるときにくっつかないようにする
 * -------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	.gc2.paloma.metal .gc2-item__sku > span {
		display: inline-flex; flex-wrap: wrap; gap: 4px 5px; vertical-align: middle;
	}
	.gc2.paloma.metal .pm-oven { margin-right: 0; }
	.gc2.paloma.metal .pm-heat { margin-left: 0; }
	.gc2.paloma.metal .pm-wgroup__h { font-size: 14px; }
}