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

/*	★レンジフードのアクセント色。4シリーズ＋TAG・OGRで<同じ紫>にそろえてある。
	  以前はシリーズごとに色を変えていたが、同じ商材なのに別のサイトのように
	  見えるため統一した（2026-10-03）。 */
.gc2.tag2 {
	--gc2-accent:    #5a4a86;
	--gc2-accent-bg: #f2f0f7;
}

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

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

/* -----------------------------------------------------------------------------
   型番の読み方（.gc2-flags）
   共通は左の列が9em。「TAG-REC-AP」が「TAG-REC-／AP」と2行に割れるので、
   TAGのページだけ少し広げる。
   -------------------------------------------------------------------------- */
.gc2.tag2 .gc2-flags > li { grid-template-columns: 11em 1fr; }

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

/* -----------------------------------------------------------------------------
   ブロックどうしをくっつけない
   注意書き（.gc2-warn）や写真つきの枠が前後の文に接していたので間を空ける。
   -------------------------------------------------------------------------- */
.gc2.tag2 .gc2-warn { margin: 18px 0; }
.gc2.tag2 .gc2-media { margin-bottom: 20px; }
.gc2.tag2 .gc2-vs { gap: 16px; }
.gc2.tag2 .gc2-care { gap: 16px; }

/* -----------------------------------------------------------------------------
   付属品・別売品（.gc2-opts.tag2-opts3）
   共通は「1列・写真が左140px」。TAGは5点あって文字だけの行が続いてそっけないので、
   このページの中だけ<写真が上のカードを横3列>にする。
   ★共通CSS（series.css）は変えていない。ほかの商材には影響しない。
   -------------------------------------------------------------------------- */
.gc2.tag2 .tag2-opts3 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gc2.tag2 .tag2-opts3 .gc2-opt {
	grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .07);
}
.gc2.tag2 .tag2-opts3 .gc2-opt__fig {
	background: #f4f6f8; border-bottom: 1px solid var(--gc2-line); padding: 8px;
}
.gc2.tag2 .tag2-opts3 .gc2-opt__fig img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 0;
}
.gc2.tag2 .tag2-opts3 .gc2-opt > div { padding: 12px 13px 13px; }
/* 見出しはアイコン＋名前＋付属/別売の札。札は名前の右に置く */
.gc2.tag2 .tag2-opts3 .gc2-opt__t {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	font-size: 14.5px; margin-bottom: 6px;
}
.gc2.tag2 .tag2-opts3 .gc2-opt__t em { margin-left: 0; vertical-align: 0; }
.gc2.tag2 .tag2-opts3 .gc2-opt__t .gc2-feat__i { font-size: 16px; color: var(--gc2-accent); }
.gc2.tag2 .tag2-opts3 .gc2-opt p { font-size: 13px; }


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


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

/* -----------------------------------------------------------------------------
   カラー見本
   型番ごとの商品写真（images/TAG-REC-AP601＋色記号.webp）を出す。
   ★写真が無い色が出てきたときだけ、色そのものを四角で出す（下の .tag2-sw）。
     別カラーの商品写真を色見本として使い回すことはしない。
   -------------------------------------------------------------------------- */
.gc2.tag2 .tag2-sw {
	display: block; width: 100%; height: 72px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   3枠を横に並べたとき（幅の選び方）
   共通の .gc2-vs dt は 10em 固定。3枠だと枠が狭く、
   「工事費込み 213,829円〜（税込）」が3行に折り返して読めなかった。
   項目名の幅を詰めて、金額は改行で割らない。
   -------------------------------------------------------------------------- */
.gc2.tag2 .gc2-vs--3 dt { flex: 0 0 6em; }
.gc2.tag2 .tag2-yen { white-space: nowrap; }

/* -----------------------------------------------------------------------------
   商品写真が用意されていない型番の枠
   （いまは9品番すべてに写真があるので出ないが、増えたときのため）
   -------------------------------------------------------------------------- */
.gc2.tag2 .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.tag2 .gc2-item__total { margin-top: auto; }

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

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

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

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