@charset "utf-8";
/* =============================================================================
   ガス衣類乾燥機「乾太くん」 シリーズページ 色の上書きだけ
     /clothesdryer/css/kanta_series.css

   【重要】レイアウト・部品は作らない。
     見出し・目次・商品一覧・比較表・施工事例・口コミ・FAQ などの作りは
     ガスコンロ／食洗機と同じ共通UI（/clothesdryer/css/series.css の .dw2-*）を
     そのまま使う。ここで変えるのは**色だけ**。
     （2026-09-21 指示「ここは共通だろ。色だけ○○ベースにしろよボーダーとか。
       なんでレイアウト変えるんだよ」）

   乾太くんのアクセントは GRAY。
     2026-09-21 「REDベースやめるわ。グレーベースにしてください。」で赤から変更。
   共通UIは --dw2-accent を見ているので、変数を差し替えるだけで
   目次・タグ・ラベル・アイコン・棒グラフ・枠線がグレーになる。
   ボタン（見積り・電話・商品詳細）の緑、KPIの緑、星のアンバー、
   合計金額の赤は商材共通なので触らない。
   ========================================================================== */

.dw2.kanta {
	--dw2-accent:    #4f5459;   /* 乾太くんのアクセント（グレー）。白文字が乗るので暗めにする */
	--dw2-accent-bg: #f2f3f4;   /* その薄色。面に使ってよいのはここまで */
}

/* グラフの色は上書きしない。共通CSSのまま使う（2026-09-21 指摘）。
     施工実績・交換実績の棒（.dw2-bars__b i）  … 水色 #29abe9 ＝食洗機・コンロと同じ
     お客様の評価の棒（.dw2-rate__tr i）        … ★と同じ黄色 #f5a623

   機能タグの枠線は青前提の固定色なので、ここだけグレーにそろえる */
.dw2.kanta .dw2-tags li { border-color: #d5d8da; }

/* =============================================================================
 * ラインアップの品番カード（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; }
}