@charset "utf-8";
/* =============================================================================
 * パロマ WNBS-C（レンジフード）固有CSS
 *   /rangefood/paloma/wnbsc/css/wnbsc2.css
 *
 *  レイアウト・UIは共通の /rangefood/css/series.css（.gc2-*）にある。
 *  ガスコンロ・食洗機のシリーズページと同じ部品をそのまま使うので、
 *  ここに書くのは<シリーズのアクセント色>と、わずかな上書きだけ。
 *  読み込み順は必ず series.css → このファイル。
 *
 *  ★共通CSSは1行も変えていない。ほかの商材のシリーズページには影響しない。
 *  ★ここの指定はすべて .gc2.wnbsc2 の中だけに効く。
 *  ★@media はこのファイルの<いちばん最後>に置く（先に書くと負ける）。
 * ========================================================================== */

/*	シリーズのアクセント色。★レンジフードは<シリーズを問わず同じ色>にそろえる（LGRの紫）。シリーズごとに色を変えると、同じ商材なのに別のサイトのように見えるため。 */
.gc2.wnbsc2 {
	--gc2-accent:    #5a4a86;
	--gc2-accent-bg: #f2f0f7;
}

/* -----------------------------------------------------------------------------
   見出しにアイコンを付ける
   共通の .gc2-feat__i は .gc2-feat__g h3 の中で flex 前提になっている。
   見出し（.gc2-h4）でも上下の中心にそろえたいので、アイコンを入れた
   見出しにだけ .wnbsc2-ih を付けて flex にする。
   ※共通CSSの .gc2-h4 そのものは変えない（他商材に影響させない）。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 h3.gc2-h4.wnbsc2-ih {
	display: flex; align-items: center; gap: 7px;
}

/* -----------------------------------------------------------------------------
   写真は説明の図より小さく出す
   中に文字が無い写真は大きく出す必要がない。共通の上限（620px）のままだと
   1枚が画面を占めてしまう。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-facebox__fig.wnbsc2-figs img { max-width: 340px; }

/* -----------------------------------------------------------------------------
   型番の読み方（.gc2-flags）
   共通は左の列が9em。「WNBSK607CDMSIL」が2行に割れるので少し広げる。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-flags > li { grid-template-columns: 11em 1fr; }

/* -----------------------------------------------------------------------------
   写真つきカード（.gc2-care）の見出しにアイコンを付けたときの位置そろえ
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-care__t { display: flex; align-items: center; gap: 6px; }
.gc2.wnbsc2 .gc2-care__t .gc2-feat__i { flex: 0 0 auto; font-size: 15px; }

/* -----------------------------------------------------------------------------
   ブロックどうしをくっつけない
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-warn { margin: 18px 0; }
.gc2.wnbsc2 .gc2-media { margin-bottom: 20px; }
.gc2.wnbsc2 .gc2-vs { gap: 16px; }
.gc2.wnbsc2 .gc2-care { gap: 16px; }

/* -----------------------------------------------------------------------------
   お手入れカードの「どうするか」の行
   取りはずすのか、拭くだけなのかが<ひと目で分かる>ようにする。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-how {
	margin: 0 0 4px !important;
	font-size: 12px !important; font-weight: bold;
	color: var(--gc2-accent) !important;
}

/* -----------------------------------------------------------------------------
   付属品・別売品（.gc2-opts.wnbsc2-opts3）
   共通は「1列・写真が左140px」。点数が多くて文字だけの行が続くとそっけないので、
   このページの中だけ<写真が上のカードを横3列>にする。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-opts3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt {
	grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden;
	/*	1行目＝画像は中身ぴったり、2行目＝文章が余りを受け持つ。
		これを書かないと、文字の少ないカードほど画像の枠だけが縦に伸びて
		画像の大きさがそろわなくなる。 */
	grid-template-rows: auto 1fr;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt__fig {
	background: #f4f6f8; border-bottom: 1px solid var(--gc2-line); padding: 8px;
}
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt__fig img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 0;
}
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt > div { padding: 12px 13px 13px; }
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt__t {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: 14.5px; margin-bottom: 6px;
}
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt__t em { margin-left: 0; vertical-align: 0; }
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt__t .gc2-feat__i { font-size: 16px; color: var(--gc2-accent); }
.gc2.wnbsc2 .wnbsc2-opts3 .gc2-opt p { font-size: 13px; }

/* -----------------------------------------------------------------------------
   ほかのシリーズへのカード（.gc2-care.wnbsc2-series）
   カードぜんたいをリンクにできるように a を1枚かぶせている。
   その a を枠いっぱいに広げる。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-series > li > a {
	display: flex; flex-direction: column; height: 100%;
	color: inherit; text-decoration: none;
}
.gc2.wnbsc2 .wnbsc2-series > li > a:hover { background: var(--gc2-accent-bg); }
.gc2.wnbsc2 .wnbsc2-series > li > a:hover .gc2-care__t { text-decoration: underline; }
.gc2.wnbsc2 .wnbsc2-series .gc2-care__fig img { object-fit: contain; background: #fff; padding: 6px; }
.gc2.wnbsc2 .wnbsc2-series .gc2-care__b { display: flex; flex-direction: column; gap: 4px; }
.gc2.wnbsc2 .wnbsc2-series__p {
	margin-top: auto !important; padding-top: 6px;
	font-size: 12px !important; font-weight: bold; color: var(--gc2-accent) !important;
}

/* -----------------------------------------------------------------------------
   2列のタイル（.gc2-facts.wnbsc2-facts2）
   共通の .gc2-facts は3列。項目が4つのときは3列だと1つだけ次の行に残るので、
   そのブロックだけ2列にする（スマホは @media で共通に戻す）。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-facts2 { grid-template-columns: repeat(2, 1fr); }

/* -----------------------------------------------------------------------------
   機能カードの札（.wnbsc2-feat8 .gc2-care__tag）
   共通CSSは札を<画像の左上に重ねる>作り。写真ならよいが、機能カードは
   文字の入った図なので、図の見出しに札が重なって読めなくなる。
   機能カードだけ、札を画像の外（説明の上）に置く。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-feat8 .gc2-care__tag {
	position: static; display: inline-block; margin-bottom: 6px;
}
.gc2.wnbsc2 .wnbsc2-feat8 .gc2-care__b { padding-top: 11px; }

/* -----------------------------------------------------------------------------
   #auto の2枠
   共通CSSは画像の高さを決めていないので、元の縦横比の違いがそのまま
   枠の高さの違いになる。この節だけ高さを決めて、中に収める（contain）。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 #auto .gc2-vs__card > img {
	width: 100%; height: 210px; object-fit: contain;
	margin: 0; padding: 10px; background: #f4f6f8;
	border-bottom: 1px solid var(--gc2-line);
}

/* -----------------------------------------------------------------------------
   カラー見本
   型番ごとの商品写真を出す。写真が無い色が出てきたときだけ色の四角を出す。
   ★別カラーの商品写真を色見本として使い回すことはしない。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-sw {
	display: block; width: 100%; height: 72px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   3枠を横に並べたとき（幅の選び方）
   共通の .gc2-vs dt は 10em 固定。3枠だと枠が狭く、金額が3行に折り返す。
   項目名の幅を詰めて、金額は改行で割らない。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-vs--3 dt { flex: 0 0 6em; }
.gc2.wnbsc2 .wnbsc2-yen { white-space: nowrap; }

/* -----------------------------------------------------------------------------
   商品写真が用意されていない型番の枠
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-item__noimg {
	display: flex; align-items: center; justify-content: center;
	min-height: 120px; background: #f4f6f8; color: #888; font-size: 12px;
}



/* -----------------------------------------------------------------------------
   「商品詳細」ボタンをカードの下端にそろえる
   共通CSSの .gc2-item は flex の縦並びなので、ボタンのすぐ上にある
   <工事費込み総額の帯>に margin-top:auto を付けると、帯とボタンがまとめて
   下に寄り、横に並んだカードどうしで位置がそろう。
   ★ボタンだけを下げると帯との間に空きができて間延びするので、帯から下を下げる。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .gc2-item__total { margin-top: auto; }

/* 写真が用意できていない型番の枠。商品写真と同じ正方形にして、
   写真のあるカードとないカードで高さが変わらないようにする。 */
.gc2.wnbsc2 .gc2-item__noimg {
	width: 100%; aspect-ratio: 1 / 1; min-height: 0;
}

/* -----------------------------------------------------------------------------
   お手入れ・機能カードの図は<切らずに全部見せる>
   共通CSSは .gc2-care__fig img を height:150px / object-fit:cover にしている。
   写真ならそれでよいが、<文字の入った600×400の説明図>を入れると上下が切れて
   見出しが読めなくなる（PC表示）。このページの中だけ、同じ3:2の枠に
   <収める>（contain）ようにする。
   ※共通CSSは1行も変えない。ほかの商材・ほかのページには影響しない。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-care4 .gc2-care__fig img,
.gc2.wnbsc2 .wnbsc2-feat8 .gc2-care__fig img {
	height: auto; aspect-ratio: 3 / 2; object-fit: contain;
}

/* -----------------------------------------------------------------------------
   お手入れカードの札（.wnbsc2-care4 .gc2-care__tag）
   このページのお手入れカードは<文字の入った説明図>なので、
   札を画像に重ねると図の見出しが読めなくなる。札を画像の外に出す。
   -------------------------------------------------------------------------- */
.gc2.wnbsc2 .wnbsc2-care4 .gc2-care__tag {
	position: static; display: inline-block; margin-bottom: 6px;
}
.gc2.wnbsc2 .wnbsc2-care4 .gc2-care__b { padding-top: 11px; }


/* =============================================================================
   ▼@media はここから下だけ（部品の指定より後ろに置かないと効かない）
   ========================================================================== */
@media screen and (min-width: 641px) {
	/*	お手入れの4枚は、PC・タブレットでは2列（3列だと1つだけ次の行に残る）。
		スマホは共通CSSの1列（左にサムネ）のままにする。
		※ここをスマホにも効かせると、枠が細くなって1文字ずつ折り返す。 */
	.gc2.wnbsc2 .wnbsc2-care4 { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px) {
	/* 3列だとカードが細くなりすぎるので2列にする */
	.gc2.wnbsc2 .wnbsc2-opts3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media screen and (max-width: 480px) {
	.gc2.wnbsc2 .wnbsc2-opts3 { grid-template-columns: 1fr; }
}

@media screen and (max-width: 640px) {
	.gc2.wnbsc2 .wnbsc2-sw { height: 56px; }

	/*	4つのタイルは、スマホでは共通CSSの1列に戻す。
		2列のままだと枠が細くなって文字が1文字ずつ折り返す。 */
	.gc2.wnbsc2 .wnbsc2-facts2 { grid-template-columns: 1fr; }

	/*	機能のカードは<図>なので、スマホで左118pxのサムネにすると読めない。
		図を上に全幅で出し、下に説明を置く。 */
	.gc2.wnbsc2 .wnbsc2-feat8 > li { flex-direction: column; }
	.gc2.wnbsc2 .wnbsc2-feat8 .gc2-care__fig { flex: 0 0 auto; }
	.gc2.wnbsc2 .wnbsc2-feat8 .gc2-care__fig img {
		width: 100%; height: auto; aspect-ratio: 3 / 2;
		object-fit: contain; background: #f4f6f8; min-height: 0;
	}

	/*	お手入れのカードも図と写真なので、スマホでは上に全幅で出す。 */
	.gc2.wnbsc2 .wnbsc2-care4 > li { flex-direction: column; }
	.gc2.wnbsc2 .wnbsc2-care4 .gc2-care__fig { flex: 0 0 auto; }
	.gc2.wnbsc2 .wnbsc2-care4 .gc2-care__fig img {
		width: 100%; height: auto; aspect-ratio: 3 / 2;
		object-fit: contain; background: #f4f6f8; min-height: 0;
	}

	/*	ほかのシリーズのカードはスマホで2列にする（共通CSSは1列）。
		商品写真とシリーズ名と価格を見比べる枠なので、横に2つ並べたほうが分かりやすい。
		写真は左の細いサムネではなく、上に全幅で置く。 */
	.gc2.wnbsc2 .wnbsc2-series { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.gc2.wnbsc2 .wnbsc2-series > li { flex-direction: column; }
	.gc2.wnbsc2 .wnbsc2-series > li > a { height: 100%; }
	.gc2.wnbsc2 .wnbsc2-series .gc2-care__fig { flex: 0 0 auto; }
	.gc2.wnbsc2 .wnbsc2-series .gc2-care__fig img {
		width: 100%; height: auto; aspect-ratio: 1 / 1;
		object-fit: contain; background: #fff; min-height: 0; padding: 4px;
	}
	.gc2.wnbsc2 .wnbsc2-series .gc2-care__b { padding: 8px 10px 10px; }
}