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

.gc2.panasonic-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 720×200 ／ SP 520×400 */
	--mk-hero:    720 / 200;
	--mk-hero-sp: 13 / 10;
}

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

/* シリーズごとの色（施工実績の積み上げ帯・凡例・位置づけのラベルで使う） */
.gc2 .is-dwd     { --mk-tone: #16537a; }
.gc2 .is-ded     { --mk-tone: #2a8ca8; }
.gc2 .is-htc     { --mk-tone: #6a4c93; }
.gc2 .is-hgc     { --mk-tone: #2e7d5b; }
.gc2 .is-hzc     { --mk-tone: #7d8b4f; }
.gc2 .is-shallow { --mk-tone: #b07d12; }
.gc2 .is-center  { --mk-tone: #c05a1b; }
.gc2 .is-side    { --mk-tone: #8b1a3a; }
.gc2 .is-mantle  { --mk-tone: #4a7ba7; }
.gc2 .is-old         { --mk-tone: #9aa3ad; }

/* 比較表は「行＝シリーズ・列＝項目」。列が12あるので最小幅を少し詰める */
.gc2.panasonic-top .gc2-cmp thead th:not(:first-child) { min-width: 96px; }
.gc2.panasonic-top .gc2-cmp tbody th { min-width: 132px; }
.gc2.panasonic-top .gc2-cmp tbody th a { color: var(--gc2-accent); font-weight: bold; }
.gc2.panasonic-top .gc2-cmp tbody th small { display: block; font-size: 10px; font-weight: normal;
	color: var(--gc2-ink-sub); }
/* 金額のセルは途中で折り返さない（共通CSSの nowrap は tr 側のクラス向け） */
.gc2.panasonic-top .gc2-cmp td.gc2-cmp__price { white-space: nowrap; }
.gc2.panasonic-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.panasonic-top .gc2-rel li { cursor: pointer; }
.gc2.panasonic-top .gc2-rel__t::before { content: ""; position: absolute; inset: 0; z-index: 1; }

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

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

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

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

/* ===== AIエコナビ（#econavi）。図と箇条書きを横に並べる。SPは縦に積む ===== */
.gc2.panasonic-top .pn-eco { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 18px; align-items: start; }
.gc2.panasonic-top .pn-eco__fig { margin: 0; background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 10px; }
.gc2.panasonic-top .pn-eco__fig img { display: block; width: 100%; height: auto; }
.gc2.panasonic-top .pn-eco .gc2-flags { margin-top: 0; }

/* ===== 設置方式（#setup）。4枚のカード。画像は同じ高さの枠に収める ===== */
.gc2.panasonic-top .pn-shape { list-style: none; margin: 0 0 16px; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gc2.panasonic-top .pn-shape > li { margin: 0; padding: 12px; background: #fff; border: 1px solid var(--mk-line);
	border-radius: 10px; display: flex; flex-direction: column; }
.gc2.panasonic-top .pn-shape > li::before { display: none; }
.gc2.panasonic-top .pn-shape figure { margin: 0 0 8px; height: 120px; display: flex; align-items: center; justify-content: center; }
.gc2.panasonic-top .pn-shape figure img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.gc2.panasonic-top .pn-shape__t { margin: 0 0 4px; font-weight: bold; color: var(--gc2-accent); font-size: 15px; text-align: center; }
.gc2.panasonic-top .pn-shape__d { margin: 0; font-size: 13px; line-height: 1.7; }


/* ★画面幅のきまりはこのファイルのいちばん後ろに置く */
@media only screen and (max-width: 640px) {
	.gc2.panasonic-top .mk-pos > li { grid-template-columns: minmax(0, 1fr) auto; }
	.gc2.panasonic-top .pn-eco { grid-template-columns: minmax(0, 1fr); }
	.gc2.panasonic-top .pn-eco__fig { max-width: 360px; margin: 0 auto; }
	.gc2.panasonic-top .pn-shape { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.gc2.panasonic-top .pn-shape > li { padding: 8px; }
	.gc2.panasonic-top .pn-shape figure { height: 96px; }
	.gc2.panasonic-top .pn-shape__d { font-size: 12px; }
}