@charset "utf-8";
/* =============================================================================
   エアコン シリーズページ 色の上書きと、エアコンだけの部品
     /airconditioner/css/ac_series.css

   【重要】見出し・目次・商品一覧・比較表・施工事例・口コミ・FAQ などの作りは
     ガスコンロ／食洗機／乾太くん／浴室乾燥機／トイレと同じ共通UI（/airconditioner/css/series.css の .dw2-*）を
     そのまま使う。ここで変えるのは色と、エアコンで足した部品（.act-*）だけ。

   エアコンのアクセントは青緑（#0b6878）。トイレの青（#1f5f9e）・IHのグレー・浴室乾燥機のオレンジ・レンジフードの紫と分ける。
   ボタン（見積り・電話・商品詳細）の緑、KPIの緑、星のアンバー、合計金額の赤、グラフの水色は商材共通なので触らない。
   外枠のクラスは .act（.aircon などは css/base.css と当たるおそれがあるので使わない）。
   ========================================================================== */

.dw2.act {
	--dw2-accent:    #0b6878;
	--dw2-accent-bg: #e8f4f6;
}
.dw2.act .dw2-opt__t { flex-wrap: wrap; row-gap: 4px; }

/* ---- ラインアップの札（○畳用｜単相100V）は折り返さない ---- */
.dw2.act .dw2-item__label > span { white-space: nowrap; }
.dw2.act .dw2-item__label.act-lb-200 { --dw2-item-label: #2d5b86; }

/* ---- 型番のカード：品番は仕様表の上、仕様は「項目名｜値」の1段の箱（トイレ・食洗機と同じ） ---- */
.dw2.act .dw2-item__m .dw2-item__sku {
	margin: 0 0 9px; padding: 0 0 8px; border-bottom: 2px solid var(--dw2-accent);
	font-size: 17px; font-weight: bold; line-height: 1.35; color: #1d2b38; letter-spacing: .01em;
}
.dw2.act .dw2-item__m .dw2-item__sku > span { display: block; margin: 3px 0 0; font-size: 12px; font-weight: normal; color: #5a6b78; }
.dw2.act .dw2-item__m .dw2-item__spec {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-flow: row;
	gap: 6px; flex: 0 0 auto; margin: 0; border: 0; border-radius: 0; font-size: 13px;
}
.dw2.act .dw2-item__m .dw2-item__spec > div {
	display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 6px 10px;
	background: #f0f6f7; border: 0 !important; border-radius: 8px; grid-row: auto !important; text-align: left;
}
.dw2.act .dw2-item__m .dw2-item__spec dt { flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: bold; letter-spacing: .04em; color: var(--dw2-accent); text-align: left; }
.dw2.act .dw2-item__m .dw2-item__spec dd { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 12.5px; font-weight: bold; line-height: 1.45; color: #1d2b38; text-align: left; letter-spacing: -0.01em; }
.dw2.act .dw2-item .dw2-tags { gap: 7px 7px; margin-top: 12px; }
.dw2.act .dw2-item .dw2-tags li { margin: 0; padding: 3px 9px; border-radius: 999px; }

/* 公式のラインアップ写真（590×363・背景つき）は正方形に押し込まない */
.dw2.act .dw2-item__main.is-photo { aspect-ratio: 590 / 363; object-fit: cover; background: #e9f1f6; }
.dw2.act .act-figcap { margin: 4px 0 0; font-size: 10.5px; line-height: 1.4; color: #6b7785; text-align: left; }


/* 本体価格の下に工事費（新規取付）の行 */
.dw2.act .dw2-item__prices .is-kouji dt, .dw2.act .dw2-item__prices .is-kouji dd { color: #4a5865; }

/* 色違い（GV のブラウンなど）：それぞれの商品詳細へ */
.dw2.act .act-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 9px 0 0; font-size: 12.5px; }
.dw2.act .act-colors > span { font-size: 11px; font-weight: bold; color: var(--dw2-accent); }
.dw2.act .act-colors a, .dw2.act .act-colors b {
	display: inline-flex; flex-direction: column; padding: 4px 10px; border: 1px solid #c9dfe3; border-radius: 8px;
	background: #fff; color: #1d2b38; font-weight: bold; line-height: 1.3; text-decoration: none;
}
.dw2.act .act-colors a:hover { border-color: var(--dw2-accent); }
.dw2.act .act-colors small { font-size: 10.5px; font-weight: normal; color: #5a6b78; }

/* ---- ファーストビューの「畳数から選ぶ」 ---- */
/* 下の見積り・電話ボタンとくっつけない（2026-10-11 指摘「ボタン同士をくっつけんな」） */
.dw2.act .act-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 18px; }
.dw2.act .act-jump__lb { margin-right: 4px; font-size: 12px; font-weight: bold; color: var(--dw2-accent); }
.dw2.act .act-jump__a {
	display: inline-block; min-width: 3.4em; padding: 4px 10px; border: 1px solid #b9d7dc; border-radius: 999px;
	background: #fff; color: var(--dw2-accent); font-size: 13px; font-weight: bold; text-align: center; text-decoration: none;
}
.dw2.act .act-jump__a:hover { background: var(--dw2-accent); color: #fff; border-color: var(--dw2-accent); }

/* ---- こんな方に向いています ---- */
.dw2.act .act-for { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
.dw2.act .act-for li {
	position: relative; margin: 0; padding: 12px 12px 12px 36px; background: var(--dw2-accent-bg); border-radius: 10px;
	font-size: 14px; line-height: 1.6; color: #1d2b38;
}
.dw2.act .act-for li::before {
	content: ""; position: absolute; left: 12px; top: 16px; width: 14px; height: 8px;
	border-left: 3px solid var(--dw2-accent); border-bottom: 3px solid var(--dw2-accent); transform: rotate(-45deg);
}

/* ---- 畳数・能力の表 ---- */
.dw2.act .act-size td small { display: block; margin-top: 2px; font-size: 11px; color: #5a6b78; }
.dw2.act .act-size td { white-space: nowrap; }
.dw2.act .act-size td.is-t b { color: var(--dw2-accent); }
.dw2.act .act-size td.is-v.is-200 { color: #2d5b86; font-weight: bold; }
.dw2.act .act-size td.is-p { color: var(--dw2-red); font-weight: bold; text-align: right; }
.dw2.act .act-size td.is-p span { font-size: 11px; font-weight: normal; margin-left: 1px; }
.dw2.act .act-size td.is-p .is-ask, .dw2.act .act-opt .is-ask { color: #b95c00; font-size: 12.5px; font-weight: bold; }
.dw2.act .act-size th a { color: var(--dw2-accent); }

/* ---- 機能の分類の札・注記・そのほかの機能 ---- */
.dw2.act .act-fcat { display: inline-block; margin: 0 0 4px; padding: 1px 8px; border-radius: 999px; background: var(--dw2-accent-bg); color: var(--dw2-accent); font-size: 11px; font-weight: bold; line-height: 1.6; }
.dw2.act .act-fnote { margin-top: 6px; font-size: 11px; line-height: 1.5; color: #6b7785; }
/* 分類ごとに項目数がばらばらなので、格子でなく段組みにして空きを作らない */
/* ---- そのほかの機能：名前だけのタグを横に並べて折り返す（縦1列にしない。2026-10-11 指摘） ---- */
.dw2.act .act-others { margin: 0 0 12px; }
.dw2.act .act-others__g { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #d6e5e8; border-radius: 10px; background: #fff; }
.dw2.act .act-others__h { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 2px solid var(--dw2-accent); font-size: 13.5px; font-weight: bold; color: var(--dw2-accent); }
.dw2.act .act-others ul { display: flex; flex-wrap: wrap; gap: 6px 6px; margin: 0; padding: 0; list-style: none; }
.dw2.act .act-others li { margin: 0; padding: 4px 11px; border: 1px solid #d6e5e8; border-radius: 999px; background: #f5fafb; font-size: 12.5px; line-height: 1.5; color: #1d2b38; }

/* ---- 本体カラー・リモコン ---- */
.dw2.act .dw2-opt__fig.act-fig-col img { aspect-ratio: auto; object-fit: contain; background: #fff; }
.dw2.act .dw2-opts.act-one { grid-template-columns: minmax(0, 1fr) !important; }
.dw2.act .dw2-opts.act-one > .dw2-opt { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: center; }
.dw2.act .dw2-opt__fig.act-fig-remote img { aspect-ratio: auto; object-fit: contain; background: #fff; }

/* ---- 比較表のサムネイル（公式写真 590×363） ---- */
.dw2.act img.dw2-cmp__thumb.act-thumb { aspect-ratio: 590 / 363; object-fit: cover; width: 120px; }

/* ---- 追加工事の表 ---- */
.dw2.act .act-optlead { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; }
.dw2.act .act-opt td { white-space: normal; }
.dw2.act .act-opt td.is-p { white-space: nowrap; }

/* 発売前の型番（2026-10-11） */
.act-rel { margin: 6px 0 8px; padding: 6px 10px; border: 1px solid #e0a040; border-radius: 4px; background: #fff8ec; color: #8a5300; font-size: 13px; line-height: 1.5; }

@media screen and (max-width: 767px) {
	.dw2.act .dw2-item__m .dw2-item__sku { font-size: 14px; margin: 8px 0 7px; padding-bottom: 6px; }
	.dw2.act .dw2-item__m .dw2-item__sku > span { font-size: 10.5px; }
	.dw2.act .dw2-item__m .dw2-item__spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.dw2.act .dw2-item__m .dw2-item__spec > div { padding: 4px 7px; gap: 5px; }
	.dw2.act .dw2-item__m .dw2-item__spec dt { font-size: 9.5px; letter-spacing: 0; }
	.dw2.act .dw2-item__m .dw2-item__spec dd { font-size: 10.5px; letter-spacing: -0.02em; white-space: nowrap; }
	.dw2.act .dw2-item .dw2-tags { gap: 6px; margin-top: 10px; margin-bottom: 10px; }
	.dw2.act .dw2-item .dw2-tags li { padding: 3px 8px; }
	.dw2.act .act-for { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.dw2.act .act-for li { font-size: 13px; padding: 10px 10px 10px 32px; }
	.dw2.act .act-for li::before { left: 10px; top: 14px; }
	.dw2.act .dw2-opts.act-one > .dw2-opt { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.dw2.act img.dw2-cmp__thumb.act-thumb { width: 86px; }
	.dw2.act .act-jump__a { font-size: 12px; padding: 3px 8px; min-width: 3em; }
}

/* 機能の写真は元の比率がまちまちなので、枠を16:9に固定して中に収める（高さをそろえる・2026-10-12） */
.dw2.act #feature .dw2-opt__fig { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.dw2.act #feature .dw2-opt__fig img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: #fff; }
/* ラインアップの各商品：写真の左上にブランド・機能のロゴ（高さをそろえる） */
.dw2.act .act-lu-logo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 24px; margin: 0 0 4px; }
.dw2.act .act-lu-logo__i { display: block; width: auto; height: 22px; max-width: 100%; margin: 0; object-fit: contain; }
@media screen and (max-width: 767px) {
	.dw2.act .act-lu-logo { min-height: 18px; gap: 3px 5px; }
	.dw2.act .act-lu-logo__i { height: 16px; }
}
/* ロゴは高さ40px。下の写真の上の余白に少しかぶせる（2026-10-12 指示） */
.dw2.act .dw2-item__figure { position: relative; }
.dw2.act .act-lu-logo { position: relative; z-index: 2; min-height: 40px; margin: 0 0 -18px; padding-left: 4px; }
.dw2.act .act-lu-logo__i { height: 40px !important; width: auto !important; max-width: 100%; }
@media screen and (max-width: 767px) {
	.dw2.act .act-lu-logo { min-height: 26px; margin-bottom: -10px; }
	.dw2.act .act-lu-logo__i { height: 26px !important; }
}
.dw2.act .act-lu-logo { margin-top: 8px; }
/* うるさらX は横長の文字ロゴなので小さく（2026-10-12 指示の値） */
.dw2.act .act-lu-logo__i[src*="daikin_urusarax"] {
	height: 25px !important;
	width: auto !important;
	max-width: 100%;
	margin-top: 10px;
}
/* ゼネラル（nocria＋シリーズ）は高さ35px・上に10px（2026-10-12 指示の値） */
.dw2.act .act-lu-logo__i[src*="general_nocria"] {
	height: 35px !important;
	width: auto !important;
	max-width: 100%;
	margin-top: 10px;
}
/* ラインアップのロゴはすべて上に10px（2026-10-12 指示「他もmargin-top:10pxは必ず入れろ」） */
.dw2.act .act-lu-logo__i { margin-top: 10px !important; }
/* パナソニック（nanoeX）は高さ20px（2026-10-12 指示の値） */
.dw2.act .act-lu-logo__i[src*="panasonic_nanoex"] { height: 20px !important; width: auto !important; max-width: 100%; }