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

/* ---- 表は文字を折り返さず、横スライドで見せる ---- */
.dw2.slide_middle .dw2-cmp__wrap,
.dw2.slide_middle .dw2-kj__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dw2.slide_middle .sm-cmp,
.dw2.slide_middle .sm-legacy { width: auto; min-width: 100%; }
.dw2.slide_middle .sm-cmp th,
.dw2.slide_middle .sm-cmp td,
.dw2.slide_middle .sm-legacy th,
.dw2.slide_middle .sm-legacy td { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.dw2.slide_middle .sm-cmp tbody th,
.dw2.slide_middle .sm-legacy tbody th { min-width: 0; }
.dw2.slide_middle .dw2-cmp__hint { display: block; }
/* 補足列だけは文章なので折り返す */
.dw2.slide_middle .sm-cmp td.sm-cmp__d { white-space: normal; text-align: left; font-size: 12px; color: #555; min-width: 16em; }
/* ○と「搭載」は1行に並べる（セル内で改行させない） */
.dw2.slide_middle .sm-cmp .dw2-cmp__yn { display: inline; margin-left: 3px; font-size: 11px; color: #555; }

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

/* ---- 3グレードの紹介（グレードごとに色を分ける／押せそうな見た目にしない） ---- */
.dw2.slide_middle .sm-grades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; padding: 0; }
.dw2.slide_middle .sm-grades__i {
	--sm-g: var(--dw2-accent);
	border: 1px solid var(--dw2-line); border-top: 3px solid var(--sm-g);
	border-radius: var(--dw2-radius); background: #fff; padding: 12px 13px;
}
.dw2.slide_middle .sm-grades__i.is-high { --sm-g: var(--rn-red); }
.dw2.slide_middle .sm-grades__i.is-mid  { --sm-g: var(--dw2-accent); }
.dw2.slide_middle .sm-grades__i.is-std  { --sm-g: #14776b; }
.dw2.slide_middle .sm-grades__t { margin: 0 0 6px; font-size: 15px; font-weight: bold; color: var(--sm-g); }
.dw2.slide_middle .sm-grades__t span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: #666; }
.dw2.slide_middle .sm-grades__d { margin: 0 0 8px; font-size: 13px; line-height: 1.75; }
/* 装備の一覧は枠付きのタグ（＝押せるボタンに見える）をやめて、ふつうの文章の並びにする。
   ul/li を使わないのは、サイト共通の $('li').click → children('ul').slideToggle を受けないため。 */
.dw2.slide_middle .sm-grades__f { margin: 0; font-size: 12.5px; line-height: 1.9; color: #333; }
.dw2.slide_middle .sm-grades__f span { display: inline-block; white-space: nowrap; }
.dw2.slide_middle .sm-grades__f span::before { content: "・"; color: var(--sm-g); }
@media screen and (max-width: 767px) {
	.dw2.slide_middle .sm-grades { grid-template-columns: 1fr; }
}

/* ---- カゴの比較（おかってカゴ＝ピンク／ぎっしりカゴ＝青。カゴ名は写真の上の角丸ラベル） ---- */
.dw2.slide_middle .sm-kago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 4px 0 16px; padding: 0; }
.dw2.slide_middle .sm-kago__i {
	--sm-k: var(--dw2-accent);
	border: 2px solid var(--sm-k); border-radius: var(--dw2-radius); background: #fff; padding: 12px;
}
.dw2.slide_middle .sm-kago__i.is-okatte   { --sm-k: #c2185b; }
.dw2.slide_middle .sm-kago__i.is-gisshiri { --sm-k: #15609e; }
.dw2.slide_middle .sm-kago__t { margin: 0 0 10px; text-align: center; }
.dw2.slide_middle .sm-kago__t b {
	display: inline-block; padding: 7px 26px; border-radius: 999px;
	background: var(--sm-k); color: #fff; font-size: 15.5px; font-weight: bold; line-height: 1.5;
}
.dw2.slide_middle .sm-kago__t span { display: block; margin-top: 6px; font-size: 12.5px; font-weight: normal; color: #555; }
.dw2.slide_middle .sm-kago__b { padding: 0 2px; }
.dw2.slide_middle .sm-kago__l { margin: 0; padding: 0; }
.dw2.slide_middle .sm-kago__l p { position: relative; margin: 0; padding-left: 13px; font-size: 12.5px; line-height: 1.8; }
.dw2.slide_middle .sm-kago__l p::before { content: "・"; position: absolute; left: 0; color: var(--sm-k); }
@media screen and (max-width: 767px) {
	.dw2.slide_middle .sm-kago { grid-template-columns: 1fr; }
	.dw2.slide_middle .sm-kago__t b { padding: 6px 20px; font-size: 14.5px; }
}

/* ---- 主要機能と搭載グレード（横いっぱい・中身は最大5列） ---- */
.dw2.slide_middle .dw2-feat { grid-template-columns: 1fr; }
.dw2.slide_middle .dw2-feat .dw2-fl {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px;
}
.dw2.slide_middle .dw2-feat .dw2-fl > div {
	display: block; padding: 10px 8px 11px; border: 1px solid var(--dw2-line);
	border-radius: 8px; background: #fff; text-align: center;
}
.dw2.slide_middle .dw2-feat .dw2-fl dt {
	display: block; padding-left: 0; font-size: 12.5px; font-weight: bold; line-height: 1.5; text-align: center;
}
.dw2.slide_middle .dw2-feat .dw2-fl dt::before { content: none; }
.dw2.slide_middle .sm-ficon {
	flex: none; display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; margin: 0 auto 7px;
	border: 1px solid var(--dw2-line); border-radius: 8px; background: #fff; overflow: hidden;
}
.dw2.slide_middle .sm-ficon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dw2.slide_middle .sm-ficon svg { width: 28px; height: 28px; color: var(--dw2-accent); }
.dw2.slide_middle .sm-fname { display: block; }
.dw2.slide_middle .sm-gbadges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 0; }
.dw2.slide_middle .sm-gbadge {
	display: inline-flex; align-items: center; gap: 1px;
	font-style: normal; font-size: 10px; font-weight: bold; line-height: 1.6;
	padding: 1px 5px 1px 4px; border-radius: 10px;
	border: 1px solid #ddd; background: #f4f4f4; color: #999; white-space: nowrap;
}
.dw2.slide_middle .sm-gbadge i { font-style: normal; font-size: 12px; line-height: 1; }
.dw2.slide_middle .sm-gbadge.is-on { background: var(--dw2-accent-bg); border-color: var(--dw2-accent); color: var(--dw2-accent); }
.dw2.slide_middle .dw2-feat .dw2-fl dd { margin: 7px 0 0; padding-left: 0; font-size: 11.5px; line-height: 1.75; color: #444; text-align: left; }
@media screen and (max-width: 900px) {
	.dw2.slide_middle .dw2-feat .dw2-fl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
	.dw2.slide_middle .dw2-feat .dw2-fl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
	.dw2.slide_middle .dw2-feat .dw2-fl dd { font-size: 11px; }
}

/* 機能の説明に添える但し書き */
.dw2.slide_middle .sm-caution {
	display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; line-height: 1.6; color: #777;
}
.dw2.slide_middle .sm-caution::before { content: "※"; }

/* ---- 商品一覧（グレードのバッジ・カゴ別の色・旧モデルの表） ---- */
.dw2.slide_middle .sm-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_middle .sm-badge.is-on  { color: var(--rn-red); background: var(--rn-red-bg); border-color: #f0c3c5; }
.dw2.slide_middle .sm-badge.is-off { color: #666; background: #f3f3f3; border-color: #ddd; }
/* 商品カードのラベルと枠線をカゴごとに色分け */
.dw2.slide_middle .dw2-item.is-okatte   { --dw2-item-label: #c2185b; border-color: #c2185b; }
.dw2.slide_middle .dw2-item.is-gisshiri { --dw2-item-label: #15609e; border-color: #15609e; }
.dw2.slide_middle .sm-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_middle .sm-photolist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media screen and (max-width: 640px) {
	.dw2.slide_middle .sm-photolist { grid-template-columns: 1fr; }
}

/* 隣接ブロックがくっつかないように */
.dw2.slide_middle .dw2-sec > .dw2-why + .dw2-warn,
.dw2.slide_middle .dw2-sec > .dw2-cmp__wrap + .dw2-why,
.dw2.slide_middle .dw2-sec > .sm-kago + .dw2-cmp__wrap { margin-top: 18px; }
.dw2.slide_middle .dw2-sec > .dw2-cmp__hint + .dw2-cmp__wrap { margin-top: 12px; }
.dw2.slide_middle .dw2-sec > .dw2-cmp__wrap + .dw2-media,
.dw2.slide_middle .dw2-sec > .dw2-feat + .dw2-media { margin-top: 18px; }
.dw2.slide_middle .dw2-cost__b > p + .dw2-pack { margin-top: 14px; }