@charset "utf-8";
/* =============================================================================
 * IHクッキングヒーター メーカーTOP 固有CSS（三菱電機・パナソニック・日立 共通）
 * /ih/css/ih_maker_top.css
 *
 *  読み込み順： /ih/css/series.css → /ih/css/maker.css → このファイル
 *  ここにはIH固有のものだけを置く（色・バナーの縦横比・写真の比率・シリーズ別の色）。
 *  レイアウトは maker.css 側にあるので、こちらへ書き足さないこと。
 *  色はIH共通のグレー #4f5b66（series.css の --gc2-accent と同じ値。2026-10-07 赤は見づらいとの指示で変更）。シリーズページとずらさない・メーカーごとに変えない。
 * ========================================================================== */

.gc2.ih-mtop {
	--gc2-accent:    #4f5b66;
	--gc2-accent-bg: #f1f3f5;
	--mk-navy:   #4f5b66;
	--mk-navy-d: #353e47;
	--mk-red:    #d7000f;
	--mk-tint:   #f4f5f7;
	--mk-line:   #dde1e5;

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

/* 商品写真は横長（690×390）。3:2の枠だと上下が切れるので比率を合わせ、全体を見せる */
.gc2.ih-mtop .mk-card__fig img,
.gc2.ih-mtop .mk-rank__fig img,
.gc2.ih-mtop .mk-budget__l img { aspect-ratio: 690 / 390; object-fit: contain; background: #fff; }

/* シリーズごとの色（施工実績の積み上げ帯・凡例・価格帯の点で使う）。赤系の濃淡＋無彩色で見分ける */
.gc2.ih-mtop .is-old { --mk-tone: #9aa3ad; }
/* 三菱電機 */
.gc2.ih-mtop--mitsubishi .is-crosstop  { --mk-tone: #8e1616; }
.gc2.ih-mtop--mitsubishi .is-eurostyle { --mk-tone: #2f2f33; }
.gc2.ih-mtop--mitsubishi .is-rakuraku  { --mk-tone: #c0504d; }
.gc2.ih-mtop--mitsubishi .is-simple    { --mk-tone: #b07d12; }
.gc2.ih-mtop--mitsubishi .is-others    { --mk-tone: #5d6f80; }
/* パナソニック */
.gc2.ih-mtop--panasonic .is-s      { --mk-tone: #6e1212; }
.gc2.ih-mtop--panasonic .is-a      { --mk-tone: #b71c1c; }
.gc2.ih-mtop--panasonic .is-b      { --mk-tone: #d9534f; }
.gc2.ih-mtop--panasonic .is-c      { --mk-tone: #b07d12; }
.gc2.ih-mtop--panasonic .is-f      { --mk-tone: #2a6f97; }
.gc2.ih-mtop--panasonic .is-j      { --mk-tone: #3f7d5c; }
.gc2.ih-mtop--panasonic .is-n      { --mk-tone: #7d8b4f; }
.gc2.ih-mtop--panasonic .is-w      { --mk-tone: #6a4c93; }
.gc2.ih-mtop--panasonic .is-others { --mk-tone: #5d6f80; }
/* 日立 */
.gc2.ih-mtop--hitachi .is-high   { --mk-tone: #6e1212; }
.gc2.ih-mtop--hitachi .is-middle { --mk-tone: #c0504d; }
.gc2.ih-mtop--hitachi .is-basic  { --mk-tone: #b07d12; }
.gc2.ih-mtop--hitachi .is-mutral { --mk-tone: #2f2f33; }
.gc2.ih-mtop--hitachi .is-others { --mk-tone: #5d6f80; }

/* シリーズ比較表は「行＝項目・列＝シリーズ」（シリーズページと同じ向き） */
.gc2.ih-mtop .mk-scmp thead th:not(:first-child) { min-width: 118px; }
.gc2.ih-mtop .mk-scmp thead th a { color: inherit; }
.gc2.ih-mtop .mk-scmp tbody th { min-width: 118px; }
.gc2.ih-mtop .gc2-cmp tbody th > span,
.gc2.ih-mtop .gc2-cmp thead th > span { display: block; font-size: 10px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2.ih-mtop .gc2-cmp td.gc2-cmp__price { white-space: nowrap; }
.gc2.ih-mtop .gc2-cmp tbody th small { display: block; font-size: 10px; font-weight: normal; color: var(--gc2-ink-sub); }
.gc2.ih-mtop .mk-wcmp tbody th a,
.gc2.ih-mtop .mk-wcmp td a { color: var(--gc2-accent); }
.gc2.ih-mtop .gc2-cmp td > span:not(.gc2-cmp__yes):not(.gc2-cmp__na):not(.gc2-cmp__yn) { display: block; margin-top: 3px; font-size: 11px;
	color: var(--gc2-ink-sub); line-height: 1.6; }
.gc2.ih-mtop .gc2-kj td.is-est { font-weight: bold; color: var(--gc2-ink); }

/* .gc2-pick の1件目を強調する共通CSS（series.css）は「このページのシリーズ」用。
   メーカーTOPでは並びに優劣を付けないので1件目の強調を外し、
   三菱電機・パナソニック・日立の違いでは「このページのメーカー」（.is-me）だけに付ける */
.gc2.ih-mtop .gc2-pick__i:first-child { border-color: var(--gc2-line); box-shadow: none; }
.gc2.ih-mtop .gc2-pick__i:first-child .gc2-pick__t { color: var(--gc2-ink); background: var(--gc2-bg-soft); border-bottom-color: var(--gc2-line); }
.gc2.ih-mtop #maker .gc2-pick__i.is-me { border-color: var(--gc2-accent); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.gc2.ih-mtop #maker .gc2-pick__i.is-me .gc2-pick__t { color: #fff; background: var(--gc2-accent); border-bottom-color: var(--gc2-accent); }
.gc2.ih-mtop #maker .gc2-pick__i.is-me .gc2-pick__t::after { content: "このページ"; margin-left: 8px; padding: 1px 7px;
	font-size: 10.5px; font-weight: normal; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 10px; }

/* 関連ページ（.gc2-rel）はカード全体を押せる */
.gc2.ih-mtop .gc2-rel li { cursor: pointer; }
.gc2.ih-mtop .gc2-rel__t::before { content: ""; position: absolute; inset: 0; z-index: 1; }

/* 現行シリーズの位置づけ（.mk-pos）。ラベルの列幅をラベルの長さに合わせる */
.gc2.ih-mtop .mk-pos > li { grid-template-columns: max-content minmax(0, 1fr) auto; }

/* このページでは斜体を使わない。<em> は強調の意味だけで、書体は変えない */
.gc2.ih-mtop em { font-style: normal; }

/* 現行シリーズ一覧：シリーズ数が3の倍数でないとき、最後の段が左に寄って右が空く。
   カードを広げず（同じ大きさのまま）最後の段を中央にそろえる */
.gc2.ih-mtop .mk-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.gc2.ih-mtop .mk-cards > li { flex: 0 0 calc((100% - 28px) / 3); min-width: 0; }

/* 特徴（.mk-tech）は2列。奇数個のときは最後の1つを全幅にする（右側を空けない） */
.gc2.ih-mtop .mk-tech > .mk-tech__g:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 数値ストリップ（.mk-fv__stat）は口コミが無いメーカーでは3つになる。
   列を4つに固定すると右に空き列が残るので、数に合わせて等分する（SPは奇数の最後を全幅） */
.gc2.ih-mtop .mk-fv__stat { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* ★画面幅のきまりはこのファイルのいちばん後ろに置く */
@media only screen and (max-width: 640px) {
	.gc2.ih-mtop .mk-pos > li { grid-template-columns: minmax(0, 1fr) auto; }
	.gc2.ih-mtop .mk-cards > li { flex-basis: calc((100% - 14px) / 2); }
	.gc2.ih-mtop .mk-fv__stat { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; }
	.gc2.ih-mtop .mk-fv__stat > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}