@charset "utf-8";
/* =============================================================================
   トイレ シリーズページ 色の上書きだけ
     /toilet/css/toilet_series.css

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

   トイレのアクセントは、既存のトイレページの基調色（#0065cc）を白文字が乗る濃さまで落とした青。
   ※外枠のクラスは .tlt。サイト共通の css/base.css に .toilet p {color:#fff} があり、.toilet を使うと本文が白くなって消える（2026-10-07）。
   ボタン（見積り・電話・商品詳細）の緑、KPIの緑、星のアンバー、
   合計金額の赤、グラフの水色は商材共通なので触らない。
   ========================================================================== */

.dw2.tlt {
	--dw2-accent:    #1f5f9e;   /* 濃い青（2026-10-07）。白文字が乗るので暗めにする */
	--dw2-accent-bg: #eef4fb;   /* その薄色。面に使ってよいのはここまで */
}

/* 機能の見出しにバッジを添えると、320px幅で枠からはみ出す。見出しを折り返せるようにする（浴室乾燥機と同じ） */
.dw2.tlt .dw2-opt__t { flex-wrap: wrap; row-gap: 4px; }

/* ラインアップの札（LS2｜… など）の色は、既存のネオレストページのグレード札（toto/neorest/css/style.css の .grade_*）と同じにする（2026-10-08）。
   文字は既存どおり白・太字（共通の .dw2-item__label のまま）。NXは既存にグレード色が無いのでアクセント色のまま */
.dw2.tlt .dw2-item__label.tlg-ls2, .dw2.tlt .dw2-item__label.tlg-as2, .dw2.tlt .dw2-item__label.tlg-rs2 { --dw2-item-label: #f1aef3; }
.dw2.tlt .dw2-item__label.tlg-ls1, .dw2.tlt .dw2-item__label.tlg-as1, .dw2.tlt .dw2-item__label.tlg-rs1 { --dw2-item-label: #82d6fd; }
.dw2.tlt .dw2-item__label.tlg-rs3 { --dw2-item-label: #f7ab4a; }
.dw2.tlt .dw2-item__label.tlg-ls-w { --dw2-item-label: #43b1d3; }
.dw2.tlt .dw2-item__label.tlg-as-w { --dw2-item-label: #43d3a6; }

/* ラインアップの札（LS-W｜スティック シルバー など）は折り返さない（2026-10-08「改行させんな」）。
   5ページ143件でPC・スマホとも1行・カードからはみ出さないことを実測。 */
.dw2.tlt .dw2-item__label > span { white-space: nowrap; }


/* =============================================================================
 * ラインアップの品番カード（2026-10-09 指示「型番を表の上に持ってこい。テーブルのデザイン変えろ、そっけない」）
 *   品番は仕様表の上に大きく。仕様表は罫線の表をやめ、「項目名（小）＋値（太字）」の小さな箱を2列で並べる。
 *   項目数が奇数のときは最後の箱を横いっぱいにする（右だけ空けない）。
 * ========================================================================== */
.dw2.tlt .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.tlt .dw2-item__m .dw2-item__sku > span { display: block; margin: 3px 0 0; font-size: 12px; font-weight: normal; color: #5a6b78; }
.dw2.tlt .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.tlt .dw2-item__m .dw2-item__spec > div {
	display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 11px;
	background: #f2f6fa; border: 0 !important; border-radius: 8px; grid-row: auto !important;
}
.dw2.tlt .dw2-item__m .dw2-item__spec > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dw2.tlt .dw2-item__m .dw2-item__spec > div, .dw2.tlt .dw2-item__m .dw2-item__spec dt, .dw2.tlt .dw2-item__m .dw2-item__spec dd { align-items: flex-start; text-align: left; }
.dw2.tlt .dw2-item__m .dw2-item__spec dt { flex: none; font-size: 11px; font-weight: bold; letter-spacing: .04em; color: var(--dw2-accent); }
.dw2.tlt .dw2-item__m .dw2-item__spec dd { margin: 0; font-size: 13px; font-weight: bold; line-height: 1.5; color: #1d2b38; }

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

/* 機能の札：札どうし・上の仕様表とくっつけない（2026-10-09 指摘「ブロックくっつけるな」） */
.dw2.tlt .dw2-item .dw2-tags { gap: 7px 7px; margin-top: 12px; }
.dw2.tlt .dw2-item .dw2-tags li { margin: 0; padding: 3px 9px; border-radius: 999px; }
@media screen and (max-width: 767px) {
	.dw2.tlt .dw2-item .dw2-tags { gap: 6px; margin-top: 10px; margin-bottom: 10px; }
	.dw2.tlt .dw2-item .dw2-tags li { padding: 3px 8px; }
}

/* 仕様の箱は1段（項目名と値を横に並べる）。2段にすると高さを取りすぎる（2026-10-09 指摘） */
.dw2.tlt .dw2-item__m .dw2-item__spec > div { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 6px 10px; }
.dw2.tlt .dw2-item__m .dw2-item__spec dt { flex: 0 0 4.6em; white-space: nowrap; }
.dw2.tlt .dw2-item__m .dw2-item__spec dd { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
@media screen and (max-width: 767px) {
	.dw2.tlt .dw2-item__m .dw2-item__spec > div { padding: 4px 8px; gap: 6px; }
	.dw2.tlt .dw2-item__m .dw2-item__spec dt { flex-basis: 4.4em; }
}

/* 項目名の幅は中身なり（値の幅を広く取り、折り返しを減らす） */
.dw2.tlt .dw2-item__m .dw2-item__spec dt { flex: 0 0 auto; }
.dw2.tlt .dw2-item__m .dw2-item__spec dd { font-size: 12.5px; letter-spacing: -0.01em; }
@media screen and (max-width: 767px) {
	.dw2.tlt .dw2-item__m .dw2-item__spec dt { flex: 0 0 auto; }
	.dw2.tlt .dw2-item__m .dw2-item__spec dd { font-size: 11.5px; }
}