@charset "utf-8";
/* =============================================================================
 * リンナイ スライドオープン深型タイプ ページ固有CSS
 *   /dishwasher/rinnai/slide_deep/css/slide_deep.css
 *   共通は /dishwasher/css/series.css（.dw2-*）と /dishwasher/rinnai/css/rinnai.css。
 *   アクセント色は食洗機共通の1色を使う（ここでは変更しない）。
 * ========================================================================== */

/* ---- 表は文字を折り返さず、横スライドで見せる ---- */
.dw2.slide_deep .dw2-cmp__wrap,
.dw2.slide_deep .dw2-kj__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dw2.slide_deep .sd-cmp,
.dw2.slide_deep .sd-legacy { width: auto; min-width: 100%; }
.dw2.slide_deep .sd-cmp th,
.dw2.slide_deep .sd-cmp td,
.dw2.slide_deep .sd-legacy th,
.dw2.slide_deep .sd-legacy td { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.dw2.slide_deep .sd-cmp tbody th,
.dw2.slide_deep .sd-legacy tbody th { min-width: 0; }
.dw2.slide_deep .dw2-cmp__hint { display: block; }
/* 補足列だけは文章なので折り返す */
.dw2.slide_deep .sd-cmp td.sd-cmp__d { white-space: normal; text-align: left; font-size: 12px; color: #555; min-width: 16em; }
.dw2.slide_deep .sd-cmp .dw2-cmp__yn { display: block; font-size: 10.5px; color: #666; margin-top: 1px; }

/* ---- ヒーローの3枚タイル ---- */
.dw2.slide_deep .sd-facts--hero { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 12px; }
@media screen and (max-width: 640px) {
	.dw2.slide_deep .sd-facts--hero { grid-template-columns: 1fr; }
}

/* ---- 3グレードの紹介 ---- */
.dw2.slide_deep .sd-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; padding: 0; }
.dw2.slide_deep .sd-grades__i { border: 1px solid var(--dw2-line); border-top: 3px solid var(--dw2-accent); border-radius: var(--dw2-radius); background: #fff; padding: 12px 13px; }
.dw2.slide_deep .sd-grades__i.is-high { border-top-color: var(--rn-red); }
.dw2.slide_deep .sd-grades__t { margin: 0 0 6px; font-size: 15px; font-weight: bold; color: var(--dw2-accent); }
.dw2.slide_deep .sd-grades__i.is-high .sd-grades__t { color: var(--rn-red); }
.dw2.slide_deep .sd-grades__t span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: #666; }
.dw2.slide_deep .sd-grades__d { margin: 0 0 8px; font-size: 13px; line-height: 1.75; }
@media screen and (max-width: 767px) {
	.dw2.slide_deep .sd-grades { grid-template-columns: 1fr; }
}

/* ---- カゴの比較 ---- */
.dw2.slide_deep .sd-kago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 16px; padding: 0; list-style: none; }
.dw2.slide_deep .sd-kago__i { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; overflow: hidden; }
.dw2.slide_deep .sd-kago__fig { margin: 0; }
.dw2.slide_deep .sd-kago__fig img { display: block; width: 100%; height: auto; }
.dw2.slide_deep .sd-kago__b { padding: 11px 13px 13px; }
.dw2.slide_deep .sd-kago__t { margin: 0 0 7px; font-size: 15px; font-weight: bold; color: var(--dw2-accent); }
.dw2.slide_deep .sd-kago__t span { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; color: #555; }
.dw2.slide_deep .sd-kago__l { margin: 0; padding: 0; list-style: none; }
.dw2.slide_deep .sd-kago__l li { position: relative; padding-left: 13px; font-size: 12.5px; line-height: 1.8; }
.dw2.slide_deep .sd-kago__l li::before { content: "・"; position: absolute; left: 0; color: var(--dw2-accent); }
@media screen and (max-width: 767px) {
	.dw2.slide_deep .sd-kago { grid-template-columns: 1fr; }
}

/* ---- 機能一覧のグレードバッジ ---- */
.dw2.slide_deep .sd-gbadges { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 1px; }
.dw2.slide_deep .sd-gbadge {
	font-style: normal; font-size: 10.5px; font-weight: bold; line-height: 1.6;
	padding: 0 5px; border-radius: 3px; border: 1px solid #ddd; background: #f4f4f4; color: #999; white-space: nowrap;
}
.dw2.slide_deep .sd-gbadge.is-on { background: var(--dw2-accent-bg); border-color: var(--dw2-accent); color: var(--dw2-accent); }

/* ---- 商品一覧（グレードのバッジ・旧モデルの表） ---- */
.dw2.slide_deep .sd-badge {
	display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
	font-size: 11.5px; font-weight: bold; border: 1px solid;
}
.dw2.slide_deep .sd-badge.is-high,
.dw2.slide_deep .sd-badge.is-mid { color: var(--rn-red); background: var(--rn-red-bg); border-color: #f0c3c5; }
.dw2.slide_deep .sd-badge.is-std { color: #666; background: #f3f3f3; border-color: #ddd; }
.dw2.slide_deep .sd-legacy__tag {
	display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px;
	background: #f2f2f2; border: 1px solid #ddd; color: #777; font-size: 10.5px; font-weight: bold;
}

/* 確認写真の一覧は2列 */
.dw2.slide_deep .sd-photolist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media screen and (max-width: 640px) {
	.dw2.slide_deep .sd-photolist { grid-template-columns: 1fr; }
}

/* 隣接ブロックがくっつかないように */
.dw2.slide_deep .dw2-sec > .dw2-why + .dw2-warn,
.dw2.slide_deep .dw2-sec > .dw2-cmp__wrap + .dw2-why,
.dw2.slide_deep .dw2-sec > .sd-kago + .dw2-cmp__wrap { margin-top: 18px; }


/* ---- 主要機能と搭載グレード（2026-09-17 指摘：アイコンを大きく・見やすく） ---- */
.dw2.slide_deep .dw2-feat .dw2-fl > div {
	display: grid; grid-template-columns: 1fr; gap: 2px;
	padding: 12px 2px; border-bottom: 1px solid var(--dw2-line);
}
.dw2.slide_deep .dw2-feat .dw2-fl > div:last-child {}
.dw2.slide_deep .dw2-feat .dw2-fl dt {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
	font-size: 15.5px; font-weight: bold; line-height: 1.5;
}
.dw2.slide_deep .sd-ficon {
	flex: 0 0 56px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--dw2-line); border-radius: 8px; background: #fff; overflow: hidden;
}
.dw2.slide_deep .sd-ficon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dw2.slide_deep .sd-ficon svg { width: 30px; height: 30px; color: var(--dw2-accent); }
.dw2.slide_deep .sd-fname { flex: 1 1 10em; }
.dw2.slide_deep .dw2-feat .dw2-fl dd {
	margin: 2px 0 0 68px; font-size: 13px; line-height: 1.8; color: #444;
}

/* 搭載グレードのバッジ（色だけでなく○／−と文字も併記） */
.dw2.slide_deep .sd-gbadges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.dw2.slide_deep .sd-gbadge {
	display: inline-flex; align-items: center; gap: 4px;
	font-style: normal; font-size: 12.5px; font-weight: bold; line-height: 1.6;
	padding: 3px 10px 3px 7px; border-radius: 14px;
	border: 1px solid #ddd; background: #f4f4f4; color: #999; white-space: nowrap;
}
.dw2.slide_deep .sd-gbadge i { font-style: normal; font-size: 14px; line-height: 1; }
.dw2.slide_deep .sd-gbadge.is-on {
	background: var(--dw2-accent-bg); border-color: var(--dw2-accent); color: var(--dw2-accent);
}
@media screen and (max-width: 640px) {
	.dw2.slide_deep .dw2-feat .dw2-fl dt { font-size: 14.5px; gap: 7px 9px; }
	.dw2.slide_deep .sd-ficon { flex: 0 0 46px; width: 46px; height: 46px; }
	.dw2.slide_deep .sd-ficon svg { width: 26px; height: 26px; }
	.dw2.slide_deep .dw2-feat .dw2-fl dd { margin-left: 0; }
	.dw2.slide_deep .sd-gbadge { font-size: 12px; padding: 2px 9px 2px 6px; }
}

/* ○と「搭載」は1行に並べる（セル内で改行させない） */
.dw2.slide_deep .sd-cmp .dw2-cmp__yn { display: inline; margin-left: 3px; font-size: 11px; color: #555; }

/* 隣接ブロックの最低間隔（追加分） */
.dw2.slide_deep .dw2-sec > .dw2-cmp__hint + .dw2-cmp__wrap { margin-top: 12px; }
.dw2.slide_deep .dw2-sec > .dw2-cmp__wrap + .dw2-media,
.dw2.slide_deep .dw2-sec > .dw2-feat + .dw2-media { margin-top: 18px; }

/* 機能一覧のグレードバッジ：狭い画面では折り返して収める */
.dw2.slide_deep .sd-gbadges { flex-wrap: wrap; }
@media screen and (max-width: 640px) {
	.dw2.slide_deep .sd-gbadges { margin-left: 0; margin-top: 3px; }
	.dw2.slide_deep .dw2-fl dt { display: block; }
}
.dw2.slide_deep .dw2-cost__b > p + .dw2-pack { margin-top: 14px; }

/* ---- 機能ブロックは横いっぱい・中身は最大5列（2026-09-17 指摘）----
   共通CSS（.dw2-feat は2列・.dw2-fl は縦並び）はパナソニックのページで使っているので変更しない。
   このページ（.dw2.slide_deep）だけ上書きする。 */
.dw2.slide_deep .dw2-feat { grid-template-columns: 1fr; }
.dw2.slide_deep .dw2-feat .dw2-fl {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
	padding: 12px;
}
.dw2.slide_deep .dw2-feat .dw2-fl > div {
	display: block; padding: 10px 8px 11px; border: 1px solid var(--dw2-line);
	border-top: 1px solid var(--dw2-line); border-radius: 8px; background: #fff; text-align: center;
}
.dw2.slide_deep .dw2-feat .dw2-fl > div:first-child { padding-top: 10px; }
.dw2.slide_deep .dw2-feat .dw2-fl dt {
	display: block; padding-left: 0; font-size: 12.5px; line-height: 1.5; text-align: center;
}
.dw2.slide_deep .dw2-feat .dw2-fl dt::before { content: none; }	/* 先頭の丸は出さない（枠で区切るため） */
.dw2.slide_deep .dw2-feat .sd-ficon {
	flex: none; display: flex; width: 52px; height: 52px; margin: 0 auto 7px;
}
.dw2.slide_deep .dw2-feat .sd-ficon svg { width: 28px; height: 28px; }
.dw2.slide_deep .dw2-feat .sd-fname { display: block; flex: none; margin: 0 0 6px; font-size: 12.5px; }
.dw2.slide_deep .dw2-feat .sd-gbadges { justify-content: center; gap: 3px; }
.dw2.slide_deep .dw2-feat .sd-gbadge {
	font-size: 10px; padding: 1px 5px 1px 4px; gap: 1px; border-radius: 10px;
}
.dw2.slide_deep .dw2-feat .sd-gbadge i { font-size: 11px; }
.dw2.slide_deep .dw2-feat .dw2-fl dd {
	margin: 7px 0 0; padding-left: 0; font-size: 11.5px; line-height: 1.65; text-align: left; color: #555;
}

/* 画面が狭いときは列数を落とす（横スクロールはさせない） */
@media screen and (max-width: 900px) {
	.dw2.slide_deep .dw2-feat .dw2-fl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
	.dw2.slide_deep .dw2-feat .dw2-fl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.dw2.slide_deep .dw2-feat .sd-ficon { width: 46px; height: 46px; }
	.dw2.slide_deep .dw2-feat .dw2-fl dd { font-size: 11px; }
}

/* ---- 3グレードの枠（2026-09-17 指摘：押せそうに見える／スタンダードの色が同じ） ---- */
/* グレードごとの色を1つの変数にまとめ、上辺の線・見出し・中点に使う。
   ハイ＝リンナイの赤／ミドル＝食洗機共通のアクセント／スタンダード＝深い青緑（3色を区別する） */
.dw2.slide_deep .sd-grades__i { --sd-g: var(--dw2-accent); border-top-color: var(--sd-g); }
.dw2.slide_deep .sd-grades__i.is-high { --sd-g: var(--rn-red); }
.dw2.slide_deep .sd-grades__i.is-mid { --sd-g: var(--dw2-accent); }
.dw2.slide_deep .sd-grades__i.is-std { --sd-g: #14776b; }
.dw2.slide_deep .sd-grades__i .sd-grades__t { color: var(--sd-g); }

/* 装備の一覧は枠付きのタグ（＝押せるボタンに見える）をやめて、ふつうの文章の並びにする。
   ul/li を使わないのは、サイト共通の $('li').click → children('ul').slideToggle を受けないため
   （li の直下に ul があると、枠をクリックしただけで一覧が消えてしまう）。
   1項目の途中では折り返さない（「・プラ／ズマクラスター」のような割れ方を防ぐ）。 */
.dw2.slide_deep .sd-grades__f { margin: 0; font-size: 12.5px; line-height: 1.9; color: #333; }
.dw2.slide_deep .sd-grades__f span { display: inline-block; white-space: nowrap; }
.dw2.slide_deep .sd-grades__f span::before { content: "・"; color: var(--sd-g); }

/* ---- カゴの枠（2026-09-17 指摘：色分け＋カゴ名は写真の上に丸いラベルで置く） ---- */
/* カゴごとの色を1つの変数にまとめ、枠線・ラベル・中点に使う。
   どちらが上位という意味ではなく、2種類を見分けやすくするための色分け。 */
.dw2.slide_deep .sd-kago__i { --sd-k: var(--dw2-accent); }
.dw2.slide_deep .sd-kago__i.is-okatte { --sd-k: #c2185b; }
.dw2.slide_deep .sd-kago__i.is-gisshiri { --sd-k: #15609e; }
.dw2.slide_deep .sd-kago__i {
	border: 2px solid var(--sd-k); padding: 12px; overflow: visible; background: #fff;
}
/* カゴ名は角丸のラベルにして写真の上に置く */
.dw2.slide_deep .sd-kago__i .sd-kago__t { margin: 0 0 10px; text-align: center; }
.dw2.slide_deep .sd-kago__i .sd-kago__t b {
	display: inline-block; padding: 7px 26px; border-radius: 999px;
	background: var(--sd-k); color: #fff; font-size: 15.5px; font-weight: bold; line-height: 1.5;
}
.dw2.slide_deep .sd-kago__i .sd-kago__t span {
	display: block; margin-top: 6px; font-size: 12.5px; font-weight: normal; color: #555;
}
/* 写真は枠の内側に収める */
.dw2.slide_deep .sd-kago__fig { border: 1px solid var(--dw2-line); border-radius: 3px; overflow: hidden; }
.dw2.slide_deep .sd-kago__b { padding: 11px 2px 0; }
.dw2.slide_deep .sd-kago__i .sd-kago__l li::before { color: var(--sd-k); }
@media screen and (max-width: 640px) {
	.dw2.slide_deep .sd-kago__i .sd-kago__t b { padding: 6px 20px; font-size: 14.5px; }
}

/* 機能の説明に添える但し書き（例：すべての菌を除菌できるわけではありません） */
.dw2.slide_deep .sd-caution {
	display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; line-height: 1.6; color: #777;
}
.dw2.slide_deep .sd-caution::before { content: "※"; }

/* 商品カードのラベルと枠線をカゴごとに色分け（おかってカゴ＝ピンク／ぎっしりカゴ＝青） */
.dw2.slide_deep .dw2-item.is-okatte { --dw2-item-label: #c2185b; border-color: #c2185b; }
.dw2.slide_deep .dw2-item.is-gisshiri { --dw2-item-label: #15609e; border-color: #15609e; }