@charset "utf-8";
/* =============================================================================
   浴室暖房乾燥機 シリーズページ 色の上書きだけ
     /bathroomdryer/css/bd_series.css

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

   浴室暖房乾燥機のアクセントは浴室の水色系の濃い青。
   ボタン（見積り・電話・商品詳細）の緑、KPIの緑、星のアンバー、
   合計金額の赤、グラフの水色は商材共通なので触らない。
   ========================================================================== */

.dw2.bathdryer {
	--dw2-accent:    #c4560f;   /* オレンジ系（2026-10-06 指示）。白文字が乗るので暗めにする */
	--dw2-accent-bg: #fdf1e8;   /* その薄色。面に使ってよいのはここまで */
}

/* 機能の見出しに「ミスト搭載のみ」「付属」のバッジを添えると、320px幅で枠からはみ出す。見出しを折り返せるようにする */
.dw2.bathdryer .dw2-opt__t { flex-wrap: wrap; row-gap: 4px; align-items: flex-start; }
/* 見出しの絵は縮めない。文字は自分の箱の中で折り返す。
   くくらないと絵だけが1行目に残り、文字が2行目から始まって横に並ぶ列とそろわない
   （2026-10-12 ご指摘）。 */
.dw2.bathdryer .dw2-opt__t > svg { flex: none; }
.dw2.bathdryer .dw2-opt__tx { flex: 1 1 0; min-width: 0; }
/* 横に並べた機能は、見出しが1行でも2行でも本文の始まりをそろえる。
   対応していないブラウザでは、これまでどおり各列が上から詰まる。 */
@supports (grid-template-rows: subgrid) {
	.dw2.bathdryer .dw2-opts--3 { grid-auto-rows: auto; }
	.dw2.bathdryer .dw2-opts--3 > .dw2-opt { grid-row: span 2; grid-template-rows: subgrid; }
	.dw2.bathdryer .dw2-opts--3 > .dw2-opt > div { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
}

/* =============================================================================
 * ラインアップの品番カード（2026-10-09 トイレと同じ形にそろえた）
 *   品番は仕様表の上に大きく。仕様表は罫線の表をやめ、「項目名（小・色）｜値（太字）」の1段の箱を2列で並べる
 *   （1マス2段にすると高さを取りすぎる）。項目数が奇数なら最後の箱は横いっぱい。機能の札は札どうし・上の表と離す。
 * ========================================================================== */
.dw2 .dw2-item__m .dw2-item__sku {
	margin: 0 0 9px; padding: 0 0 8px; border-bottom: 2px solid var(--dw2-accent, #1f5f9e);
	font-size: 17px; font-weight: bold; line-height: 1.35; color: #1d2b38; letter-spacing: .01em; overflow-wrap: anywhere;
}
.dw2 .dw2-item__m .dw2-item__sku > span { display: block; margin: 3px 0 0; font-size: 12px; font-weight: normal; color: #5a6b78; }
.dw2 .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 .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: #f2f6fa; border: 0 !important; border-radius: 8px; grid-row: auto !important; text-align: left;
}
.dw2 .dw2-item__m .dw2-item__spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dw2 .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, #1f5f9e); text-align: left; }
.dw2 .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; letter-spacing: -0.01em; color: #1d2b38; text-align: left; }
.dw2 .dw2-item .dw2-tags { gap: 7px 7px; margin-top: 12px; }
.dw2 .dw2-item .dw2-tags li { margin: 0; padding: 3px 9px; border-radius: 999px; }

@media screen and (max-width: 767px) {
	.dw2 .dw2-item__m .dw2-item__sku { font-size: 14px; margin: 8px 0 7px; padding-bottom: 6px; }
	.dw2 .dw2-item__m .dw2-item__sku > span { font-size: 10.5px; }
	.dw2 .dw2-item__m .dw2-item__spec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.dw2 .dw2-item__m .dw2-item__spec > div { padding: 4px 8px; gap: 6px; }
	.dw2 .dw2-item__m .dw2-item__spec dt { font-size: 10px; }
	.dw2 .dw2-item__m .dw2-item__spec dd { font-size: 11.5px; }
	.dw2 .dw2-item .dw2-tags { gap: 6px; margin-top: 10px; margin-bottom: 10px; }
	.dw2 .dw2-item .dw2-tags li { padding: 3px 8px; }
}

/* ラインアップの写真に重ねるブランドロゴ（ノーリツ天井埋込型＝シャーン）。
   写真の右下。商品にかぶらない大きさにとどめる（2026-10-12 ご指摘）。 */
.dw2.bathdryer .dw2-item__figure { position: relative; }
.dw2.bathdryer .dw2-item__bm {
	position: absolute; right: -6%; bottom: 2%; z-index: 2;
	width: 50%; max-width: 110px; height: auto; aspect-ratio: 500 / 197;
	object-fit: contain; pointer-events: none;
}
@media only screen and (max-width: 640px) {
	.dw2.bathdryer .dw2-item__bm { width: 38%; max-width: 86px; }
}