@charset "utf-8";
/* =============================================================================
 * エアコン メーカーTOP 固有CSS（6社共通）
 * /airconditioner/css/ac_maker_top.css
 *
 *  読み込み順： series.css → ac_series.css → maker.css → このファイル
 *  ここにはエアコン固有のもの（色・バナーの縦横比・写真の比率・畳数の表）だけを置く。
 *  レイアウトは maker.css 側にあるので、こちらへ書き足さないこと。
 *  エアコンのアクセントは青緑（#0b6878）1色。シリーズページ（ac_series.css）と同じ値にする。
 * ========================================================================== */

.dw2.ac-mtop {
	--mk-navy:   #0b6878;
	--mk-navy-d: #074d59;
	--mk-red:    #0b6878;
	--mk-tint:   #f2f8f9;
	--mk-line:   #d6e6e9;
	--dw2-accent:    #0b6878;
	--dw2-accent-bg: #e8f4f6;

	/* ファーストビューのバナー実寸 PC 1700×590（表示850×295）／ SP 1104×960（表示552×480） */
	--mk-hero:    850 / 295;
	--mk-hero-sp: 552 / 480;
}

/* シリーズの写真（白地に室内機＋室外機・正方形）。三菱FLだけ商品画像（横長）なので contain で収める */
.dw2.ac-mtop .mk-card__fig img,
.dw2.ac-mtop .mk-rank__fig img { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
.dw2.ac-mtop .dw2-cmp__thumb { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }

/* ファーストビュー・カードの金額は「数字」と「円」を改行で割らない（下の補足だけ折り返す） */
.dw2.ac-mtop .mk-fv__stat .is-price dd { white-space: nowrap; }
.dw2.ac-mtop .mk-fv__stat .is-price dd span { white-space: normal; }
.dw2.ac-mtop .mk-card__p b { white-space: nowrap; }

/* 発売前のシリーズ（全機種が発売予定）のカードの価格欄 */
.dw2.ac-mtop .mk-card__p.act-rel-s { color: #8a5300; font-weight: bold; }
.dw2.ac-mtop .mk-card__p.act-rel-s span { display: block; font-size: 12px; font-weight: normal; color: var(--dw2-ink-sub); }

/* 畳数×シリーズの表：金額だけを小さめに並べる */
.dw2.ac-mtop .ac-mt-tatami td { font-size: 13px; white-space: nowrap; text-align: center; }
.dw2.ac-mtop .ac-mt-tatami td b { font-size: 14px; color: var(--dw2-ink); }
.dw2.ac-mtop .ac-mt-tatami th[scope="row"] span { display: block; font-size: 11px; font-weight: normal; color: var(--dw2-ink-sub); }
.dw2.ac-mtop .ac-mt-tatami .ac-mt-na  { color: #b7c0c7; }
.dw2.ac-mtop .ac-mt-tatami .ac-mt-ask { font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.ac-mtop .ac-mt-tatami .ac-mt-rel { font-size: 12px; color: #8a5300; font-weight: bold; }

/* 6メーカーの表：自社のメーカーの列に色を付ける */
.dw2.ac-mtop .ac-mt-makers td.is-me { background: var(--dw2-accent-bg); }
.dw2.ac-mtop .ac-mt-makers thead th.is-me { background: var(--dw2-accent); color: #fff; }
.dw2.ac-mtop .ac-mt-makers td { font-size: 13px; line-height: 1.55; }

/* =============================================================================
 * 2026-10-12 指摘「シリーズ比較表・畳数の表・6社の違いがバグってる」
 *   PCで表が本文幅（720px）より広く、右が切れて見えていた。
 *   PCは列幅を固定して本文幅に収める（シリーズ・畳数が多い表はテンプレート側で2段に分割）。
 *   スマホは従来どおり横スクロール。
 * ========================================================================== */
.dw2.ac-mtop .ac-mt-split.is-next { margin-top: 12px; }
@media screen and (min-width: 768px) {
	.dw2.ac-mtop .ac-mt-split, .dw2.ac-mtop .ac-mt-makers { overflow-x: visible; }
	.dw2.ac-mtop .ac-mt-split .dw2-cmp,
	.dw2.ac-mtop .ac-mt-makers { table-layout: fixed; width: 100%; }
	.dw2.ac-mtop .ac-mt-split .dw2-cmp thead th:not(:first-child),
	.dw2.ac-mtop .ac-mt-makers thead th:not(:first-child) { min-width: 0; }
	.dw2.ac-mtop .ac-mt-split .dw2-cmp thead th:first-child,
	.dw2.ac-mtop .ac-mt-makers thead th:first-child { width: 128px; }
	.dw2.ac-mtop .ac-mt-split .dw2-cmp tbody th { white-space: normal; }
	.dw2.ac-mtop .ac-mt-makers td { font-size: 12px; word-break: break-all; }
	.dw2.ac-mtop .ac-mt-tatami td { white-space: nowrap; }
}