@charset "utf-8";
/* =============================================================================
 * 便座（温水洗浄便座）のメーカー別TOP 共通CSS
 * /toilet/css/seat_top.css
 *  使うページ：/toilet/panasonic/toware/（ビューティ・トワレ）・/toilet/lixil/shower-toilet/（シャワートイレ）
 *  読み込み順：series.css → toilet_series.css → toto/neorest/css/neorest_top.css（.nrt-*）→ このファイル
 *  ・グレード／品番の札の色（.twg-*）。色は優劣ではなく区別のため（ネオレストの札と同じ色の組）。
 *  ・シリーズ一覧の特長アイコン（.st-pt）、本体色の見本（.st-col）。
 * ========================================================================== */
.dw2.tlt .nrt-sr__g .twg-4, .dw2.tlt .nrt-pt .twg-4 { --nrt-g: #f7ab4a; }
.dw2.tlt .nrt-sr__g .twg-3, .dw2.tlt .nrt-pt .twg-3 { --nrt-g: #e98ee8; }
.dw2.tlt .nrt-sr__g .twg-2, .dw2.tlt .nrt-pt .twg-2 { --nrt-g: #4fbfe8; }
.dw2.tlt .nrt-sr__g .twg-1, .dw2.tlt .nrt-pt .twg-1 { --nrt-g: #3cc39a; }
.dw2.tlt .nrt-sr__g .twg-5, .dw2.tlt .nrt-pt .twg-5 { --nrt-g: #6f7fa0; }

/* シリーズ一覧の特長（アイコン＋短い語） */
.dw2.seat-top .st-pt { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.dw2.seat-top .st-pt span {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 4px; white-space: nowrap;
	font-size: 12px; font-weight: bold; color: #24425f; background: #f2f6fa; border: 1px solid #dbe5ee; border-radius: 14px;
}
.dw2.seat-top .st-pt i {
	display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
	color: #fff; background: var(--dw2-accent, #1f5f9e); font-style: normal;
}
.dw2.seat-top .st-pt i svg { width: 12px; height: 12px; }

/* 本体色の見本 */
.dw2.seat-top .st-col { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dw2.seat-top .st-col li {
	display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 10px 14px;
	background: #fff; border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2.seat-top .st-col img { display: block; width: 100%; max-width: 180px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin-bottom: 8px; }
.dw2.seat-top .st-col b { font-size: 15px; }
.dw2.seat-top .st-col span { margin-top: 3px; font-size: 12px; color: var(--dw2-ink-sub); }
.dw2.seat-top .st-col.is-n4, .dw2.seat-top .st-col.is-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw2.seat-top .st-col.is-n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media only screen and (max-width: 640px) {
	.dw2.seat-top .st-col, .dw2.seat-top .st-col.is-n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dw2.seat-top .st-col.is-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}