@charset "utf-8";
/* =============================================================================
 * リンナイ ビルトイン食洗機 共通CSS（メーカー共通・②層）
 *   /dishwasher/rinnai/css/rinnai.css
 *
 *  ・アクセント色（--dw2-accent）は食洗機共通の1色をそのまま使う（上書きしない）。
 *    食洗機カテゴリの統一感を崩さないため、ここで色を変えてはいけない。
 *  ・リンナイの赤は --rn-red として持ち、ラベルなど限定箇所だけに使う。
 *
 *  ★`.dw2.rn2` は「リンナイのシリーズページ共通ブロック」。
 *    ワイド／奥行60cm対応／フロントオープンの3ページが同じ指定を共有し、
 *    ページ専用CSSを作らないためにここへ置いている。
 *    既存の slide_deep／slide_middle には rn2 を付けていないので影響しない。
 * ========================================================================== */

.dw2.rinnai {
	--rn-red:    #c8161d;   /* リンナイのコーポレートカラーに近い赤。ラベル等の限定用途 */
	--rn-red-bg: #fdeff0;
}

/* メーカー名・タイプ名のラベル（ヒーロー） */
.dw2.rinnai .dw2-hero__new.sd-flag,
.dw2.rinnai .dw2-hero__new.sm-flag,
.dw2.rinnai .dw2-hero__new.rn-flag {
	background: var(--rn-red); color: #fff; border-color: var(--rn-red);
}

/* 機能アイコン（リンナイ公式の機能アイコンを小さく添える） */
.dw2.rinnai .sd-ficon {
	width: 22px; height: 22px; vertical-align: -4px; margin-right: 5px;
}

/* =============================================================================
 * ここから下は `.dw2.rn2` を付けたページの共通ブロック
 * ========================================================================== */

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

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

/* ---- 区分・グレードの枠（2〜3枚並べる）
       ★ul/li にしない。サイト共通のインラインjQuery
         $('li').click(function(e){ $(this).children('ul').slideToggle('fast'); ... })
         が全ページで効いていて、li の直下に ul があるとクリックで開閉してしまう。 ---- */
.dw2.rn2 .rn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; padding: 0; }
.dw2.rn2 .rn-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dw2.rn2 .rn-card {
	--rn-c: var(--dw2-accent);
	border: 1px solid var(--dw2-line); border-top: 3px solid var(--rn-c);
	border-radius: var(--dw2-radius); background: #fff; padding: 12px 13px;
}
.dw2.rn2 .rn-card.is-a { --rn-c: var(--rn-red); }
.dw2.rn2 .rn-card.is-b { --rn-c: var(--dw2-accent); }
.dw2.rn2 .rn-card.is-c { --rn-c: #14776b; }
.dw2.rn2 .rn-card__t { margin: 0 0 6px; font-size: 15px; font-weight: bold; color: var(--rn-c); }
.dw2.rn2 .rn-card__t span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: normal; color: #666; }
.dw2.rn2 .rn-card__d { margin: 0 0 8px; font-size: 13px; line-height: 1.75; }
/* 装備の一覧は枠付きのタグ（＝押せるボタンに見える）にしない。ふつうの文章の並びにする */
.dw2.rn2 .rn-card__f { margin: 0; font-size: 12.5px; line-height: 1.9; color: #333; }
.dw2.rn2 .rn-card__f span { display: inline-block; white-space: nowrap; }
.dw2.rn2 .rn-card__f span::before { content: "・"; color: var(--rn-c); }
/* 枠の中に写真を入れる場合（角丸ラベル＋写真） */
.dw2.rn2 .rn-card--pic { border: 2px solid var(--rn-c); padding: 12px; }
.dw2.rn2 .rn-card--pic .rn-card__t { text-align: center; }
.dw2.rn2 .rn-card--pic .rn-card__t b {
	display: inline-block; padding: 7px 26px; border-radius: 999px;
	background: var(--rn-c); color: #fff; font-size: 15.5px; font-weight: bold; line-height: 1.5;
}
.dw2.rn2 .rn-card--pic .rn-card__t span { margin-top: 6px; font-size: 12.5px; color: #555; }
.dw2.rn2 .rn-card__fig { margin: 0 0 10px; border: 1px solid var(--dw2-line); border-radius: 3px; overflow: hidden; }
.dw2.rn2 .rn-card__fig img { display: block; width: 100%; height: auto; }
.dw2.rn2 .rn-card__fig figcaption { padding: 5px 7px; font-size: 11px; line-height: 1.6; color: #666; background: var(--dw2-bg); }
.dw2.rn2 .rn-card__l { margin: 0; padding: 0; }
.dw2.rn2 .rn-card__l p { position: relative; margin: 0; padding-left: 13px; font-size: 12.5px; line-height: 1.8; }
.dw2.rn2 .rn-card__l p::before { content: "・"; position: absolute; left: 0; color: var(--rn-c); }
@media screen and (max-width: 767px) {
	.dw2.rn2 .rn-cards, .dw2.rn2 .rn-cards--2 { grid-template-columns: 1fr; }
	.dw2.rn2 .rn-card--pic .rn-card__t b { padding: 6px 20px; font-size: 14.5px; }
}

/* ---- 主要機能と搭載区分（横いっぱい・中身は最大5列） ---- */
.dw2.rn2 .dw2-feat { grid-template-columns: 1fr; }
.dw2.rn2 .dw2-feat .dw2-fl {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 12px;
}
.dw2.rn2 .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.rn2 .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.rn2 .dw2-feat .dw2-fl dt::before { content: none; }
.dw2.rn2 .rn-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.rn2 .rn-ficon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dw2.rn2 .rn-ficon svg { width: 28px; height: 28px; color: var(--dw2-accent); }
.dw2.rn2 .rn-fname { display: block; }
.dw2.rn2 .rn-gbadges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 6px 0 0; }
.dw2.rn2 .rn-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.rn2 .rn-gbadge i { font-style: normal; font-size: 12px; line-height: 1; }
.dw2.rn2 .rn-gbadge.is-on { background: var(--dw2-accent-bg); border-color: var(--dw2-accent); color: var(--dw2-accent); }
.dw2.rn2 .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.rn2 .dw2-feat .dw2-fl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
	.dw2.rn2 .dw2-feat .dw2-fl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
	.dw2.rn2 .dw2-feat .dw2-fl dd { font-size: 11px; }
}

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

/* ---- 商品一覧のバッジ・区分別の色 ---- */
.dw2.rn2 .rn-badge {
	display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px;
	font-size: 11.5px; font-weight: bold; border: 1px solid;
}
.dw2.rn2 .rn-badge.is-on  { color: var(--rn-red); background: var(--rn-red-bg); border-color: #f0c3c5; }
.dw2.rn2 .rn-badge.is-off { color: #666; background: #f3f3f3; border-color: #ddd; }
.dw2.rn2 .dw2-item.is-a { --dw2-item-label: var(--rn-red); border-color: var(--rn-red); }
.dw2.rn2 .dw2-item.is-b { --dw2-item-label: var(--dw2-accent); border-color: var(--dw2-accent); }
.dw2.rn2 .dw2-item.is-c { --dw2-item-label: #14776b; border-color: #14776b; }
.dw2.rn2 .rn-tbl__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.rn2 .rn-photolist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media screen and (max-width: 640px) {
	.dw2.rn2 .rn-photolist { grid-template-columns: 1fr; }
}

/* 左右に並ぶ写真は同じ幅にそろえる（片方だけ小さく見えないようにする） */
.dw2.rn2 .rn-photolist--eq { gap: 0 18px; align-items: start; margin: 14px 0 0; }
.dw2.rn2 .rn-photolist--eq .dw2-media__fig img { width: 100%; margin: 0 0 6px; }

/* 素材が小さい写真は引き伸ばさず、元の大きさに近い幅でそろえる */
.dw2.rn2 .rn-photolist--sm { grid-template-columns: repeat(2, 180px); gap: 0 18px; margin: 8px 0 0; }
.dw2.rn2 .rn-photolist--sm .dw2-media__fig img { width: 100%; margin: 0 0 6px; }
@media screen and (max-width: 640px) {
	.dw2.rn2 .rn-photolist--sm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 単独で置く参考写真。素材の幅を超えて引き伸ばさない */
.dw2.rn2 .rn-fig { max-width: 350px; margin: 16px 0 0; }
.dw2.rn2 .rn-fig img { display: block; width: 100%; height: auto; margin: 0 0 6px; border-radius: var(--dw2-radius); }
.dw2.rn2 .rn-fig figcaption { font-size: 12px; color: var(--dw2-ink-sub); line-height: 1.6; }

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

/* ---- カラー見本の並び（専用ドアパネルページ） ---- */
.dw2.rn2 .rn-swatch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.dw2.rn2 .rn-swatch > li { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; overflow: hidden; }
.dw2.rn2 .rn-swatch img { display: block; width: 100%; height: auto; background: var(--dw2-bg); }
.dw2.rn2 .rn-swatch b { display: block; padding: 8px 9px 2px; font-size: 13px; line-height: 1.5; }
.dw2.rn2 .rn-swatch span { display: block; padding: 0 9px 9px; font-size: 11.5px; line-height: 1.7; color: #555; }
@media screen and (max-width: 767px) {
	.dw2.rn2 .rn-swatch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 420px) {
	.dw2.rn2 .rn-swatch { grid-template-columns: 1fr; }
}