@charset "utf-8";
/* =============================================================================
 * エコキュート メーカーTOP 固有CSS（三菱電機・ダイキン・パナソニック・日立・コロナ 共通）
 * /ecokyu-to/css/eco_maker_top.css
 *
 *  /ih/css/ih_maker_top.css（IH版）を写したもの（2026-10-07）。
 *  読み込み順： /ecokyu-to/css/series.css → /ecokyu-to/css/maker.css → このファイル
 *  色はエコキュート共通 #19707a（series.css の --gc2-accent と同じ値）。メーカーごとに変えない。
 *  商品写真はシリーズページの pic2（500×500の正方形）なので、写真枠は 1:1。
 *  シリーズ一覧・特徴の最後の段は中央寄せにも全幅にもしない（左から同じ大きさで並べる）。
 * ========================================================================== */

.gc2.eco-mtop {
	--gc2-accent:    #19707a;
	--gc2-accent-bg: #eef6f7;
	--mk-navy:   #19707a;
	--mk-navy-d: #0f4f57;
	--mk-red:    #d7000f;
	--mk-tint:   #f4f5f7;
	--mk-line:   #dde1e5;

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

/* 商品写真は正方形（500×500）。枠を1:1にして全体を見せる */
.gc2.eco-mtop .mk-card__fig img,
.gc2.eco-mtop .mk-rank__fig img,
.gc2.eco-mtop .mk-budget__l img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }

/* シリーズごとの色（施工実績の積み上げ帯・凡例・価格帯の点で使う）。青緑の濃淡＋無彩色で見分ける */
.gc2.eco-mtop .is-old { --mk-tone: #9aa3ad; }
.gc2.eco-mtop--mitsubishi .is-p { --mk-tone: #0f4f57; }
.gc2.eco-mtop--mitsubishi .is-s { --mk-tone: #2a8f9a; }
.gc2.eco-mtop--mitsubishi .is-v { --mk-tone: #b07d12; }
.gc2.eco-mtop--daikin .is-x  { --mk-tone: #0f4f57; }
.gc2.eco-mtop--daikin .is-a  { --mk-tone: #2a8f9a; }
.gc2.eco-mtop--daikin .is-n  { --mk-tone: #b07d12; }
.gc2.eco-mtop--daikin .is-xn { --mk-tone: #6a4c93; }
.gc2.eco-mtop--panasonic .is-jx { --mk-tone: #0f4f57; }
.gc2.eco-mtop--panasonic .is-jp { --mk-tone: #19707a; }
.gc2.eco-mtop--panasonic .is-n  { --mk-tone: #2a8f9a; }
.gc2.eco-mtop--panasonic .is-j  { --mk-tone: #4aa3ad; }
.gc2.eco-mtop--panasonic .is-e  { --mk-tone: #7fc0c7; }
.gc2.eco-mtop--panasonic .is-s  { --mk-tone: #b07d12; }
.gc2.eco-mtop--panasonic .is-w  { --mk-tone: #6a4c93; }
.gc2.eco-mtop--panasonic .is-h  { --mk-tone: #9a7ec2; }
.gc2.eco-mtop--panasonic .is-c  { --mk-tone: #2a6f97; }
.gc2.eco-mtop--panasonic .is-v  { --mk-tone: #5d6f80; }
.gc2.eco-mtop--panasonic .is-b  { --mk-tone: #2f2f33; }
.gc2.eco-mtop--panasonic .is-df { --mk-tone: #c0504d; }
.gc2.eco-mtop--hitachi .is-c_full { --mk-tone: #0f4f57; }
.gc2.eco-mtop--hitachi .is-full   { --mk-tone: #2a8f9a; }
.gc2.eco-mtop--hitachi .is-kyutou { --mk-tone: #b07d12; }
.gc2.eco-mtop--corona .is-full   { --mk-tone: #0f4f57; }
.gc2.eco-mtop--corona .is-auto   { --mk-tone: #2a8f9a; }
.gc2.eco-mtop--corona .is-kyutou { --mk-tone: #b07d12; }

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

/* .gc2-pick の1件目を強調する共通CSS（series.css）は「このページのシリーズ」用。
   メーカーTOPでは並びに優劣を付けないので1件目の強調を外し、
   三菱電機・パナソニック・日立の違いでは「このページのメーカー」（.is-me）だけに付ける */
.gc2.eco-mtop .gc2-pick__i:first-child { border-color: var(--gc2-line); box-shadow: none; }
.gc2.eco-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.eco-mtop #maker .gc2-pick__i.is-me { border-color: var(--gc2-accent); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
.gc2.eco-mtop #maker .gc2-pick__i.is-me .gc2-pick__t { color: #fff; background: var(--gc2-accent); border-bottom-color: var(--gc2-accent); }
.gc2.eco-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.eco-mtop .gc2-rel li { cursor: pointer; }
.gc2.eco-mtop .gc2-rel__t::before { content: ""; position: absolute; inset: 0; z-index: 1; }

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

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

/* 現行シリーズ一覧：同じ大きさで左から並べる（最後の段も中央寄せ・全幅にしない） */
.gc2.eco-mtop .mk-cards { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.gc2.eco-mtop .mk-cards > li { flex: 0 0 calc((100% - 28px) / 3); min-width: 0; }

/* 特徴（.mk-tech）は2列。奇数個でも最後の1つを広げない */

/* 数値ストリップ（.mk-fv__stat）は口コミが無いメーカーでは3つになる。
   列を4つに固定すると右に空き列が残るので、数に合わせて等分する（SPは奇数の最後を全幅） */
.gc2.eco-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.eco-mtop .mk-pos > li { grid-template-columns: minmax(0, 1fr) auto; }
	.gc2.eco-mtop .mk-cards > li { flex-basis: calc((100% - 14px) / 2); }
	.gc2.eco-mtop .mk-fv__stat { grid-template-columns: repeat(2, 1fr); grid-auto-flow: row; }
	.gc2.eco-mtop .mk-fv__stat > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}