@charset "utf-8";
/* =============================================================================
 * 壁掛エアコン 商品詳細 固有CSS（確認版 detail2.php）
 *   /airconditioner/commodity_search/css/detail2.css（.pd.is-ac）
 *
 *  読み込み順は「/css/detail_common.css → このファイル」。
 *  ・写真枠（左にロゴ・シリーズ名・札／右に写真／下に仕様の箱）は食洗機の detail.css を写したもの（2026-10-12 指示「メイン画像の配置は食洗機に合わせろ」）。
 *  ・お問い合わせ価格・機能の写真つき解説はトイレの detail2.css から写した。
 *  ・最後の「エアコンだけの部品」がこのページで足したもの。
 * ========================================================================== */

/* ---- 食洗機から（写真枠） ---- *//* 食洗機のアクセント。共通CSSの既定値と同じ（ガスコンロとそろえている）。 */
.pd.is-ac { --d-acc: #209512; }

/* 商品写真は正方形に近いので、共通の 5:4 ではなく 1:1 で置く */
.pd.is-ac .pd-fv__ph img { aspect-ratio: 5 / 5; }

/* =============================================================================
 * 写真枠（2026-10-10 トイレの商品詳細と同じ形）
 *   左上＝メーカーロゴ・シリーズ名／右＝商品写真（右寄せ）／下＝仕様のアイコンを1行（1つ＝4分の1幅、5つなら等分）
 * ========================================================================== */
.pd.is-ac .pd-fv__ph.has-dwh { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "h p" "i i"; align-items: start; padding: 0; }
.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { grid-area: h; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 0 0 22px; }
.pd.is-ac .pd-fv__ph .pd-fvh__img { display: block; width: auto; height: 34px; max-width: 100%; aspect-ratio: auto; margin: 0; object-fit: contain; }
.pd.is-ac .pd-fvh__s { font-size: 24px; font-weight: 800; line-height: 1.3; color: #333; }
.pd.is-ac .pd-fv__ph.has-dwh > img { grid-area: p; justify-self: end; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: 100% 50%; margin: 0; padding: 20px; box-sizing: border-box; }
.pd.is-ac .pd-fv__ph.has-dwh > .pd-fv__noimg { grid-area: p; }
.pd.is-ac .pd-dwspi { grid-area: i; list-style: none; display: flex; flex-wrap: nowrap; gap: 8px; margin: 12px 0 14px; padding: 0 14px; box-sizing: border-box; }
.pd.is-ac .pd-dwspi > li { flex: 1 1 0; min-width: 0; max-width: calc((100% - 24px) / 4); margin: 0; padding: 10px 4px 9px; text-align: center; list-style: none;
	background: var(--d-panel, #f5f7f9); border: 1px solid var(--d-line, #dfe5ec); border-radius: 6px; box-sizing: border-box; }
.pd.is-ac .pd-dwspi svg { display: block; width: 28px; height: 28px; margin: 0 auto; color: var(--d-acc); }
.pd.is-ac .pd-dwspi b { display: block; margin: 5px 0 0; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.pd.is-ac .pd-dwspi span { display: block; margin: 3px 0 0; font-size: 11px; color: var(--d-sub, #5a6b78); }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { gap: 8px; padding: 12px 0 0 10px; }
	.pd.is-ac .pd-fv__ph .pd-fvh__img { height: 22px; }
	.pd.is-ac .pd-fvh__s { font-size: 16px; }
	.pd.is-ac .pd-fv__ph.has-dwh > img { padding: 8px 8px 0 0; }
	.pd.is-ac .pd-dwspi { gap: 5px; margin: 8px 0 10px; padding: 0 8px; }
	.pd.is-ac .pd-dwspi > li { max-width: calc((100% - 15px) / 4); padding: 7px 2px 6px; }
	.pd.is-ac .pd-dwspi svg { width: 22px; height: 22px; }
	.pd.is-ac .pd-dwspi b { font-size: 11px; letter-spacing: -0.04em; }
	.pd.is-ac .pd-dwspi span { font-size: 10px; }
}
/* 長い値は小さくして枠に収める（2段にしない） */
.pd.is-ac .pd-dwspi > li.is-mid b { font-size: 13px; }
.pd.is-ac .pd-dwspi > li.is-long b { font-size: 12px; letter-spacing: -0.03em; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-dwspi > li.is-mid b { font-size: 10px; letter-spacing: -0.06em; }
	.pd.is-ac .pd-dwspi > li.is-long b { font-size: 9px; letter-spacing: -0.08em; }
}
/* 食洗機の商品画像は、ロゴ・シリーズ名・機能アイコンまで入った1枚（2026-10-10 指示「既存画像のように機能アイコン画像も入れ込め」）。
   画像がある品番はその画像を枠いっぱいに出し、ロゴとシリーズ名の段は出さない（二重になるため）。画像が無い品番だけ段を出す */
.pd.is-ac .pd-fv__ph.has-dwimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "i"; }
.pd.is-ac .pd-fv__ph.has-dwimg > .pd-fvh { display: none; }
.pd.is-ac .pd-fv__ph.has-dwimg > img { justify-self: center; aspect-ratio: auto; width: 100%; max-width: 620px; height: auto; object-position: 50% 50%; padding: 12px 12px 0; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fv__ph.has-dwimg > img { padding: 6px 6px 0; }
}

/* 既存画像に入っていた情報を部品で並べる（2026-10-10）。札の色は既存画像と同じ */
.pd.is-ac .pd-fv__ph.has-dwh { grid-template-areas: "h p" "f f" "i i"; }
.pd.is-ac .pd-dwb { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
/* 札は1行で収める。PC・スマホとも折り返さない（2026-10-12 ご指摘）。
   長い言葉の札だけ字を少し小さくして、枠からはみ出さないようにする。 */
.pd.is-ac .pd-dwb em { display: inline-block; min-width: 150px; max-width: 100%; padding: 6px 12px; font-style: normal; font-size: 20px; font-weight: 800; line-height: 1.3; text-align: center; white-space: nowrap; color: #fff; border-radius: 3px; box-sizing: border-box; }
.pd.is-ac .pd-dwb em.is-long { font-size: 16px; }
.pd.is-ac .pd-dwb em.is-type  { background: #1aa01a; }
.pd.is-ac .pd-dwb em.is-grade { background: #12c8c8; }
.pd.is-ac .pd-dwb em.is-panel { background: #b5b5b5; }
.pd.is-ac .pd-dwb em.is-kago  { background: #f7c6f3; color: #a12aa0; border: 2px solid #e27be0; }
.pd.is-ac .pd-dwb em.is-ufb   { background: #2b8fd6; }
.pd.is-ac .pd-dwf { grid-area: f; list-style: none; display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px; margin: 10px 0 0; padding: 0 14px; }
.pd.is-ac .pd-dwf > li { flex: 0 1 auto; margin: 0; list-style: none; }
.pd.is-ac .pd-dwf img { display: block; width: auto; height: 65px; max-width: 100%; aspect-ratio: auto; object-fit: contain; margin: 0; padding: 0; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-dwb { gap: 4px; }
	.pd.is-ac .pd-dwb em { min-width: 0; padding: 3px 7px; font-size: 11px; }
	.pd.is-ac .pd-dwb em.is-long { font-size: 9.5px; }
	.pd.is-ac .pd-dwf { gap: 4px; padding: 0 6px; }
	.pd.is-ac .pd-dwf img { height: 36px; }
}
.pd.is-ac .pd-dwf img { max-width: 96px; }
@media screen and (max-width: 767px) { .pd.is-ac .pd-dwf img { max-width: 56px; } }
/* 下の仕様アイコンの枠はトイレ・浴室乾燥機と同じ四角（角丸にしない・2026-10-10） */
.pd.is-ac .pd-dwspi > li { border-radius: 0; }
/* ロゴの下のシリーズ名は控えめに（2026-10-10「でかすぎ」）。札と同じ幅に収まる大きさで、細い線で区切る */
.pd.is-ac .pd-fvh__s { font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; color: #3a4652; padding-bottom: 8px; border-bottom: 1px solid #dfe5ec; margin-top: 4px;}
.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { gap: 10px; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fvh__s { font-size: 12.5px; padding-bottom: 5px; }
	.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { gap: 6px; }
}
.pd.is-ac .pd-fvh__s { width: fit-content; max-width: 100%; }
.pd.is-ac .pd-fvh__s small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; color: #6a7884; }
@media screen and (max-width: 767px) { .pd.is-ac .pd-fvh__s small { font-size: 10.5px; } }
/* スマホ：ロゴが写真にかぶらないよう、左の段の幅に収める（2026-10-11 指摘） */
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fv__ph .pd-fvh__img { width: auto; height: auto; max-width: 100%; max-height: 22px; }
	.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { padding-right: 6px; min-width: 0; }
	.pd.is-ac .pd-dwspi > li { overflow: hidden; }
	.pd.is-ac .pd-dwspi span { white-space: nowrap; font-size: 9.5px; letter-spacing: -0.04em; }
}
/* 機能ロゴの段：数が多いとスマホではみ出した（2026-10-11 M9 Plus）。枠の幅を等分して、ロゴは枠に収まる大きさまで縮める */
.pd.is-ac .pd-dwf { overflow: hidden; }
.pd.is-ac .pd-dwf > li { flex: 0 1 auto; min-width: 0; }
.pd.is-ac .pd-dwf img { max-width: 100%; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-dwf { justify-content: space-between; gap: 3px; }
	.pd.is-ac .pd-dwf > li { flex: 1 1 0; display: flex; justify-content: center; }
	.pd.is-ac .pd-dwf img { width: 100%; height: auto; max-height: 36px; max-width: 56px; }
}

/* 横長の帯のロゴ（ECONAVI 157×36・ナノイーX 199×35）。ほかのアイコンと同じ高さにすると幅が280px前後まで広がるので、
   高さを下げて上下中央に置く（2026-10-12 指摘「エコナビだけでかい」） */
.pd.is-ac .pd-dwf { align-items: center; }
.pd.is-ac .pd-dwf > li.is-wide img { height: 26px; max-width: 120px; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-dwf > li.is-wide img { height: 17px; max-width: 78px; }
}


/* ---- トイレから ---- */
 *  （.pd-rc＝選ぶ箱、.pd-part＝部材、.pd-ask など）。.pd.is-kyu は .pd.is-ac に置き換えた。
.pd.is-ac .pd-price--ask { padding: 0 0 2px; }
.pd.is-ac .pd-ask { margin: 0; padding: 16px 16px 18px; text-align: center; }
.pd.is-ac .pd-spec__s { display: inline-block; margin-left: 6px; padding: 0 6px; font-size: 10.5px; font-weight: normal; color: #5a6b7a; background: #eef2f5; border-radius: 3px; vertical-align: 1px; }
.pd.is-ac .pd-fimg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pd.is-ac .pd-fimg > li { margin: 0; padding: 0 0 12px; overflow: hidden; background: #fff; border: 1px solid #dde6ed; border-radius: 8px; }
.pd.is-ac .pd-fimg > li::before { content: none; }
.pd.is-ac .pd-fimg__ph { margin: 0 0 10px; }
.pd.is-ac .pd-fimg__ph img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pd.is-ac .pd-fimg__t { margin: 0 12px 6px; font-size: 15px; font-weight: bold; line-height: 1.45; color: #0f3350; }
.pd.is-ac .pd-fimg__t em { display: inline-block; margin-left: 6px; padding: 0 7px; font-style: normal; font-size: 11px; color: #fff; background: #5a6b7a; border-radius: 3px; vertical-align: 2px; }
.pd.is-ac .pd-fimg__d { margin: 0 12px; font-size: 12.5px; line-height: 1.7; color: #4a5a68; }
	.pd.is-ac .pd-fimg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pd.is-ac .pd-ask b {
	display: block; font-size: 22px; font-weight: bold; color: var(--d-acc); line-height: 1.4;
}
.pd.is-ac .pd-ask span {
	display: block; margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--d-sub);
}

/* =============================================================================
 * エアコンだけの部品
 * ========================================================================== */
/* アクセントの色は他の商材の商品詳細と共通（detail_common.css の緑）。商材の色で上書きしない（2026-10-12 指摘「10年保証・よくある質問の色は共通」） */
/* 三菱電機のロゴは2段（マーク＋2行の社名）。1段のロゴと同じ高さにすると字が小さく見えるので高くする */
.pd.is-ac .pd-fv__ph .pd-fvh__img.is-2l { height: 52px; }
.pd.is-ac .pd-fvh__s small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: #6a7884; }
/* 札（食洗機と同じ形）。色：発売予定＝橙・位置づけ＝青緑・主な機能＝青 */
.pd.is-ac .pd-dwb { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px; }
.pd.is-ac .pd-dwb em { display: inline-block; min-width: 150px; max-width: 100%; padding: 6px 12px; font-style: normal; font-size: 20px; font-weight: 800; line-height: 1.3; text-align: center; white-space: nowrap; color: #fff; border-radius: 3px; box-sizing: border-box; }
.pd.is-ac .pd-dwb em.is-long  { font-size: 16px; }
.pd.is-ac .pd-dwb em.is-rel   { background: #e8740c; }
.pd.is-ac .pd-dwb em.is-grade { background: #12a8b8; }
.pd.is-ac .pd-dwb em.is-feat  { background: #2b7fd0; }
.pd.is-ac .pd-fvh__s { font-size: 22px; font-weight: 700; line-height: 1.45; letter-spacing: .02em; color: #3a4652; padding-bottom: 8px; border-bottom: 1px solid #dfe5ec; margin-top: 4px; width: fit-content; max-width: 100%; }
.pd.is-ac .pd-dwspi > li { border-radius: 0; max-width: none; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fv__ph .pd-fvh__img { width: auto; height: auto; max-width: 100%; max-height: 22px; }
	.pd.is-ac .pd-fv__ph .pd-fvh__img.is-2l { max-height: 32px; }
	.pd.is-ac .pd-fvh__s { font-size: 12.5px; padding-bottom: 5px; }
	.pd.is-ac .pd-fvh__s small { font-size: 10.5px; }
	.pd.is-ac .pd-fv__ph.has-dwh > .pd-fvh { padding-right: 6px; min-width: 0; gap: 6px; }
	.pd.is-ac .pd-dwb { gap: 4px; }
	.pd.is-ac .pd-dwb em { min-width: 0; padding: 3px 7px; font-size: 11px; }
	.pd.is-ac .pd-dwb em.is-long { font-size: 9.5px; }
	.pd.is-ac .pd-dwspi > li { overflow: hidden; }
	.pd.is-ac .pd-dwspi span { white-space: nowrap; font-size: 9.5px; letter-spacing: -0.04em; }
}
/* 発売予定・交換の注記 */
.pd.is-ac .pd-relnote { margin: 10px 0 0; padding: 9px 12px; font-size: 13px; line-height: 1.6; color: #6b3a05; background: #fff4e8; border: 1px solid #f2c79b; border-radius: 4px; }
.pd.is-ac .pd-relnote b { color: #c25e00; }
.pd.is-ac .pd-swapnote { margin: 6px 0 0; padding: 7px 10px; font-size: 12px; line-height: 1.6; color: #4a5a68; background: #f5f8fb; border-radius: 4px; }
.pd.is-ac .pd-swapnote b { color: #0f3350; }
/* 機能の解説：写真が1枚も無いシリーズは文字だけの枠を並べる */
.pd.is-ac .pd-fimg.is-txt > li { padding: 12px 0; }
/* 機能の写真は元の比率がまちまち（690×119〜690×430）なので、枠を16:9に固定して中に収める。
   並んだ写真の高さをそろえる（2026-10-12 指摘「画像の高さ揃えろ」） */
.pd.is-ac .pd-fimg__ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin: 0 0 10px; padding: 6px; background: #fff; border-bottom: 1px solid #eef2f5; box-sizing: border-box; }
.pd.is-ac .pd-fimg__ph img { width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; object-fit: contain; background: #fff; }
.pd.is-ac .pd-h3 { margin: 18px 0 8px; font-size: 15px; font-weight: bold; color: #0f3350; }
.pd.is-ac .pd-oth { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pd.is-ac .pd-oth > li { margin: 0; padding: 5px 10px; font-size: 12.5px; line-height: 1.4; background: #f3f6f9; border: 1px solid #dde6ed; border-radius: 3px; }
.pd.is-ac .pd-oth > li::before { content: none; }
/* 比較表の○・－ */
.pd.is-ac .pd-vs .pd-yes { color: #d0281e; font-size: 17px; font-weight: bold; }
.pd.is-ac .pd-vs td small { display: block; font-size: 10.5px; color: #5a6b7a; line-height: 1.35; }
.pd.is-ac .pd-vs .pd-na { color: #b7c0c7; }
.pd.is-ac .pd-note2 a { margin-left: 4px; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-fimg.is-txt { grid-template-columns: minmax(0, 1fr); }
}

/* シリーズとの違い：列を広く取り、入りきらない分は横にスクロール（2026-10-12 指摘「幅広くして横スライドさせろ」）。
   機能名の列は左に固定する。この型番のシリーズの列に色を付ける */
.pd.is-ac #vs .pd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.pd.is-ac .pd-vs { table-layout: auto; width: max-content; min-width: 100%; }
.pd.is-ac .pd-vs thead th:first-child, .pd.is-ac .pd-vs tbody th { width: auto; min-width: 150px; position: sticky; left: 0; z-index: 1; }
.pd.is-ac .pd-vs thead th:first-child { background: var(--d-panel, #f5f7f9); z-index: 2; }
.pd.is-ac .pd-vs thead th:not(:first-child), .pd.is-ac .pd-vs td { min-width: 128px; }
.pd.is-ac .pd-vs thead th { padding: 9px 8px; font-size: 13px; line-height: 1.4; white-space: nowrap; }
.pd.is-ac .pd-vs thead th b { display: block; font-size: 14px; }
.pd.is-ac .pd-vs thead th span { display: block; margin-top: 2px; font-size: 11px; font-weight: normal; }
.pd.is-ac .pd-vs tbody th { font-size: 13px; white-space: nowrap; padding: 9px 10px; }
.pd.is-ac .pd-vs td { padding: 9px 8px; }
.pd.is-ac .pd-vs thead th.is-me { background: var(--d-acc); border-bottom-color: var(--d-acc); color: #fff; }
.pd.is-ac .pd-vs thead th.is-me a, .pd.is-ac .pd-vs thead th.is-me span { color: #fff; }
.pd.is-ac .pd-vs td.is-me { background: #f3faf2; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-vs thead th:first-child, .pd.is-ac .pd-vs tbody th { min-width: 108px; }
	.pd.is-ac .pd-vs thead th:not(:first-child), .pd.is-ac .pd-vs td { min-width: 104px; }
	.pd.is-ac .pd-vs tbody th { font-size: 11.5px; white-space: normal; }
}

/* ブランド名（エオリア・霧ヶ峰など）はシリーズ名と同じ行に並べる。改行しない（2026-10-12 指摘） */
.pd.is-ac .pd-fvh__s { white-space: nowrap; }
.pd.is-ac .pd-fvh__s small { display: inline; margin: 0 0 0 8px; vertical-align: 1px; }
/* 発売予定の注記と価格の枠をくっつけない（2026-10-12 指摘） */
.pd.is-ac .pd-relnote { margin-bottom: 12px; }
/* そのほかの機能：シリーズページ（.act-others）と同じ、白い枠の中に丸い札を並べる（2026-10-12「このデザインなんだよ」） */
.pd.is-ac .pd-oth { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #d6e5e8; border-radius: 10px; background: #fff; display: flex; flex-wrap: wrap; gap: 6px; }
.pd.is-ac .pd-oth > li { padding: 4px 11px; border: 1px solid #d6e5e8; border-radius: 999px; background: #f5fafb; font-size: 12.5px; line-height: 1.5; color: #1d2b38; }
.pd.is-ac .pd-h3 { padding: 8px 12px; background: #f3f6f8; border-left: 0; font-size: 14.5px; }
/* ブランド・機能のロゴ（霧ヶ峰・うるさらX・nanoeX・nocria・ReLaLa・シリーズマーク）。高さをそろえて横に並べる */
.pd.is-ac .pd-acblogo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pd.is-ac .pd-acblogo__i { display: block; width: auto; height: 34px; max-width: 100%; margin: 0; aspect-ratio: auto; object-fit: contain; }
@media screen and (max-width: 767px) {
	.pd.is-ac .pd-acblogo { gap: 5px 8px; }
	.pd.is-ac .pd-acblogo__i { height: 20px; }
}
/* 共通CSSの article#mainContents img { height:auto } に負けてロゴが原寸で出ていたので !important で高さを決める */
/* 写真枠の img に効いている aspect-ratio: 1/1（商品写真用）を外す。外さないと30×30に押し込まれて潰れる */
.pd.is-ac .pd-fv__ph .pd-acblogo__i { width: auto !important; height: 36px !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: fill !important; padding: 0 !important; }
@media screen and (max-width: 767px) { .pd.is-ac .pd-fv__ph .pd-acblogo__i { height: 22px !important; } }