@charset "utf-8";
/* =============================================================================
 * リンナイ レンジフード メーカーTOP 固有CSS
 * /rangefood/rinnai/css/rinnai_top.css
 *
 *  読み込み順： /rangefood/css/series.css → /rangefood/css/maker.css → このファイル
 *  ここにはリンナイ固有のものだけを置く（色・バナーの縦横比・シリーズ別の色・写真の比率）。
 *  レイアウトは maker.css 側にあるので、こちらへ書き足さないこと。
 * ========================================================================== */

.gc2.rinnai-top {
	/* レンジフードのアクセント色は全シリーズ共通（series.css と同じ値） */
	--gc2-accent:    #5a4a86;
	--gc2-accent-bg: #f2f0f7;
	--mk-navy:   #4a3c73;
	--mk-navy-d: #332960;
	--mk-red:    #d7000f;
	--mk-tint:   #f4f2f9;
	--mk-line:   #e0dcec;

	/* ファーストビューのバナー実寸 PC 850×295 ／ SP 520×400 */
	--mk-hero:    850 / 295;
	--mk-hero-sp: 13 / 10;
}

/* 商品写真は正方形（350×350）。3:2の枠だと左右が大きく空く */
.gc2.rinnai-top .mk-card__fig img,
.gc2.rinnai-top .mk-rank__fig img,
.gc2.rinnai-top .mk-budget__l img,
.gc2.rinnai-top .mk-rec__fig img { aspect-ratio: 1 / 1; }

/* シリーズごとの色（施工実績の積み上げ帯と凡例で使う） */
.gc2 .is-tag  { --mk-tone: #6a4c93; }
.gc2 .is-ogr  { --mk-tone: #8b1a3a; }
.gc2 .is-agg  { --mk-tone: #5d6f80; }
.gc2 .is-xgr  { --mk-tone: #16537a; }
.gc2 .is-lgr  { --mk-tone: #2a8ca8; }
.gc2 .is-tlr  { --mk-tone: #2e7d5b; }
.gc2 .is-ewr  { --mk-tone: #b07d12; }
.gc2 .is-bda  { --mk-tone: #c05a1b; }
.gc2 .is-bfrs { --mk-tone: #4a7ba7; }
.gc2 .is-bfr  { --mk-tone: #7d8b4f; }
.gc2 .is-old  { --mk-tone: #9aa3ad; }

/* 比較表は「行＝シリーズ・列＝項目」。列が10を超えるので最小幅を少し詰める */
.gc2.rinnai-top .gc2-cmp thead th:not(:first-child) { min-width: 104px; }
.gc2.rinnai-top .gc2-cmp tbody th { min-width: 132px; }
.gc2.rinnai-top .gc2-cmp tbody th a { color: var(--gc2-accent); font-weight: bold; }
.gc2.rinnai-top .gc2-cmp tbody th small { display: block; font-size: 10px; font-weight: normal;
	color: var(--gc2-ink-sub); }
/* 金額のセルは途中で折り返さない（共通CSSの nowrap は tr 側のクラス向け） */
.gc2.rinnai-top .gc2-cmp td.gc2-cmp__price { white-space: nowrap; }
.gc2.rinnai-top .gc2-cmp td > span:not(.gc2-cmp__yes):not(.gc2-cmp__na) { display: block; margin-top: 3px; font-size: 10.5px;
	color: var(--gc2-ink-sub); line-height: 1.5; }

/* 関連ページ（.gc2-rel）はカード全体を押せるようにする（2026-10-04 指示）。
   リンクの前に透明な層を敷いてカード（li）全体を覆う。li は series.css で position:relative。 */
.gc2.rinnai-top .gc2-rel li { cursor: pointer; }
.gc2.rinnai-top .gc2-rel__t::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* 現行シリーズの位置づけ（.mk-pos）。ラベルの列が固定幅（8.5em）だと、
   「オイルスマッシャー」など長いラベルがシリーズ名と説明文にかぶる（2026-10-04 指摘）。
   列の幅をラベルの長さに合わせる。 */
.gc2.rinnai-top .mk-pos > li { grid-template-columns: max-content minmax(0, 1fr) auto; }

/* 現行シリーズ一覧の商品画像に余白10px（2026-10-04 指示）。枠の大きさは変えず内側に取る */
.gc2.rinnai-top #series .mk-card__fig img { padding: 10px; box-sizing: border-box; }

/* このページでは斜体を使わない。<em> は強調の意味だけで、書体は変えない（2026-10-04 指摘） */
.gc2.rinnai-top em { font-style: normal; }

/* 現行商品と価格（.mk-rec）の商品画像は枠線なし（2026-10-04 指示） */
.gc2.rinnai-top #lineup .mk-rec__fig,
.gc2.rinnai-top #lineup .mk-rec__fig img { border: 0; box-shadow: none; }

/* ★画面幅のきまりはこのファイルのいちばん後ろに置く */
@media only screen and (max-width: 640px) {
	.gc2.rinnai-top .mk-pos > li { grid-template-columns: minmax(0, 1fr) auto; }
}