@charset "utf-8";
/* =============================================================================
   TOTO ネオレスト TOP（5シリーズの入口）だけの部品
     /toilet/toto/neorest/css/neorest_top.css
   共通UI（/toilet/css/series.css の .dw2-*）に無い「シリーズを並べて選ぶ」部品だけをここに書く。
   色は toilet_series.css の変数（--dw2-accent / --dw2-accent-bg）と既存のグレード色を使う。
   ボタンの緑・合計金額の赤は商材共通なので触らない。（2026-10-08）
   ========================================================================== */

/* ---- シリーズの行（1シリーズ1行。写真｜説明｜価格） ---- */
.dw2.tlt .nrt-sr { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.dw2.tlt .nrt-sr > li { display: grid; grid-template-columns: 180px minmax(0, 1fr) 210px; gap: 16px; align-items: center;
	padding: 16px; border: 1px solid #dfe5ec; border-radius: 8px; background: #fff; }
.dw2.tlt .nrt-sr__fig { margin: 0; text-align: center; }
.dw2.tlt .nrt-sr__fig img { width: 180px; height: 180px; object-fit: contain; display: block; margin: 0 auto; }
.dw2.tlt .nrt-sr__name { margin: 0 0 4px; font-size: 20px; font-weight: bold; line-height: 1.35; white-space: nowrap; }
.dw2.tlt .nrt-sr__name a { color: var(--dw2-accent); text-decoration: none; }
.dw2.tlt .nrt-sr__name a:hover { text-decoration: underline; }
.dw2.tlt .nrt-sr__catch { margin: 0 0 8px; font-size: 14px; font-weight: bold; color: #33414d; }
.dw2.tlt .nrt-sr__d { margin: 0 0 8px; font-size: 13.5px; line-height: 1.7; color: #33414d; }
.dw2.tlt .nrt-sr__g { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; padding: 0; list-style: none; }
.dw2.tlt .nrt-sr__g li { padding: 2px 9px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: bold; white-space: nowrap;
	background: var(--nrt-g, var(--dw2-accent)); }
.dw2.tlt .nrt-sr__g .tlg-ls2, .dw2.tlt .nrt-sr__g .tlg-as2, .dw2.tlt .nrt-sr__g .tlg-rs2 { --nrt-g: #f1aef3; }
.dw2.tlt .nrt-sr__g .tlg-ls1, .dw2.tlt .nrt-sr__g .tlg-as1, .dw2.tlt .nrt-sr__g .tlg-rs1 { --nrt-g: #82d6fd; }
.dw2.tlt .nrt-sr__g .tlg-rs3 { --nrt-g: #f7ab4a; }
.dw2.tlt .nrt-sr__g .tlg-ls-w { --nrt-g: #43b1d3; }
.dw2.tlt .nrt-sr__g .tlg-as-w { --nrt-g: #43d3a6; }
.dw2.tlt .nrt-sr__r { text-align: right; }
.dw2.tlt .nrt-sr__cnt { margin: 0 0 2px; font-size: 12.5px; color: #5a6b78; white-space: nowrap; }
.dw2.tlt .nrt-sr__lb { margin: 0; font-size: 12px; font-weight: bold; color: #33414d; white-space: nowrap; }
.dw2.tlt .nrt-sr__p { margin: 0 0 8px; white-space: nowrap; color: #e00; font-weight: bold; line-height: 1.3; }
.dw2.tlt .nrt-sr__p strong { font-size: 26px; }
.dw2.tlt .nrt-sr__p .u { font-size: 13px; }
.dw2.tlt .nrt-sr__p .to { display: block; font-size: 12.5px; color: #5a6b78; font-weight: normal; }
.dw2.tlt .nrt-sr__p.is-ask strong { font-size: 18px; }
.dw2.tlt .nrt-sr__r .dw2-btn { white-space: nowrap; }

/* ---- 目的から選ぶ（左に目的、右におすすめ） ---- */
.dw2.tlt .nrt-pick { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dw2.tlt .nrt-pick > div { padding: 14px 16px; border: 1px solid #dfe5ec; border-left: 5px solid var(--dw2-accent); border-radius: 6px; background: #fff; }
.dw2.tlt .nrt-pick dt { margin: 0 0 6px; font-weight: bold; font-size: 15px; color: #22303c; }
.dw2.tlt .nrt-pick dd { margin: 0; font-size: 13.5px; line-height: 1.75; color: #33414d; }
.dw2.tlt .nrt-pick dd b { color: var(--dw2-accent); }

/* ---- 価格帯の表（シリーズ×グレード） ---- */
.dw2.tlt .nrt-pt th, .dw2.tlt .nrt-pt td { white-space: nowrap; }
.dw2.tlt .nrt-pt td.is-p { color: #e00; font-weight: bold; }
.dw2.tlt .nrt-pt .nrt-g { display: inline-block; padding: 1px 8px; border-radius: 3px; color: #fff; font-size: 12px; font-weight: bold; background: var(--nrt-g, var(--dw2-accent)); }
.dw2.tlt .nrt-pt .tlg-ls2, .dw2.tlt .nrt-pt .tlg-as2, .dw2.tlt .nrt-pt .tlg-rs2 { --nrt-g: #f1aef3; }
.dw2.tlt .nrt-pt .tlg-ls1, .dw2.tlt .nrt-pt .tlg-as1, .dw2.tlt .nrt-pt .tlg-rs1 { --nrt-g: #82d6fd; }
.dw2.tlt .nrt-pt .tlg-rs3 { --nrt-g: #f7ab4a; }
.dw2.tlt .nrt-pt .tlg-ls-w { --nrt-g: #43b1d3; }
.dw2.tlt .nrt-pt .tlg-as-w { --nrt-g: #43d3a6; }

/* ---- 比較表の列の写真は小さめに（10列並ぶため） ---- */
.dw2.tlt .nrt-cmp .dw2-cmp__thumb { width: 96px; height: 96px; object-fit: contain; }

/* ---- 排水の表 ---- */
.dw2.tlt .nrt-dr td { text-align: center; }
.dw2.tlt .nrt-dr th[scope="row"] { white-space: nowrap; }

/* 目的から選ぶ（2026-10-08 写真付きカードに作り直し。PC3列×2段・スマホ2列） */
.dw2.tlt ul.nrt-pk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dw2.tlt .nrt-pk__i { display: flex; flex-direction: column; margin: 0; border: 1px solid #dfe5ec; border-radius: 8px; overflow: hidden; background: #fff; }
.dw2.tlt .nrt-pk__fig { margin: 0; aspect-ratio: 750 / 563; overflow: hidden; background: #fff; }
.dw2.tlt .nrt-pk__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dw2.tlt .nrt-pk__b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 12px 14px 14px; }
.dw2.tlt p.nrt-pk__t { white-space: nowrap; margin: 0; padding-left: 8px; border-left: 4px solid var(--dw2-accent); font-weight: bold; font-size: 15px; line-height: 1.4; color: #22303c; }
.dw2.tlt p.nrt-pk__sr { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dw2.tlt .nrt-pk__sr a { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--dw2-accent); color: #fff; font-size: 12px; font-weight: bold; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.dw2.tlt .nrt-pk__sr a:hover { opacity: .85; }
.dw2.tlt p.nrt-pk__d { margin: 0; font-size: 13px; line-height: 1.7; color: #33414d; }
.dw2.tlt .nrt-pk__d b { color: var(--dw2-accent); }

/* 比較表のセルを折り返さない（ウォシュレットTOP 2026-10-09「壁（エコリモコン）」が2行になる） */
.dw2.tlt .nrt-nw td { white-space: nowrap; }

@media screen and (max-width: 767px) {
	.dw2.tlt .nrt-sr > li { grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 12px; }
	.dw2.tlt .nrt-sr__fig img { width: 110px; height: 110px; }
	.dw2.tlt .nrt-sr__name { font-size: 17px; }
	.dw2.tlt .nrt-sr__catch { font-size: 13px; }
	.dw2.tlt .nrt-sr__d { display: none; }
	.dw2.tlt .nrt-sr__r { grid-column: 1 / -1; text-align: left; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
	.dw2.tlt .nrt-sr__p { margin: 0; }
	.dw2.tlt .nrt-sr__p .to { display: inline; margin-left: 4px; }
	.dw2.tlt .nrt-sr__r .dw2-btn { width: 100%; }
	.dw2.tlt .nrt-pick { grid-template-columns: minmax(0, 1fr); }
	.dw2.tlt ul.nrt-pk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.dw2.tlt .nrt-pk__b { padding: 8px 9px 10px; gap: 6px; }
	.dw2.tlt p.nrt-pk__t { font-size: 13px; padding-left: 6px; border-left-width: 3px; }
	.dw2.tlt .nrt-pk__sr a { font-size: 11px; padding: 2px 8px; }
	.dw2.tlt p.nrt-pk__d { font-size: 12px; line-height: 1.6; }
	.dw2.tlt .nrt-cmp .dw2-cmp__thumb { width: 72px; height: 72px; }
}