で包む
*
* 【設計ルール】
* ・すべて .dw2 配下にスコープする。既存の共通CSS（/css/common.css,
* /common-new/css/base.css, /dishwasher/css/style.css, /dishwasher/panasonic/css/style.css）
* のセレクタには触らないので、他ページへ影響しない。
* ・ガスコンロのシリーズページ（/gasconro/css/series.css の .gc2-*）と
* **同じ設計・同じ寸法・同じ色**にしてある。サイト内で同じ体裁に見えるように、
* 新規に書き起こさず、実績のあるブロックを移植して接頭辞だけ .dw2- にした。
* ガスコンロ側のCSSには一切手を入れていない（肥大化させない）。
* ・シリーズごとに変えるのは --dw2-accent / --dw2-accent-bg の2つだけ。
* ・クラス名にメーカー名・シリーズ名を入れない（.dw2-hero など中立名）。
*
* 【共通コンポーネント】
* レイアウト .dw2-sec / .dw2-lead / .dw2-note / .dw2-h4 / .dw2-src
* ファースト .dw2-hero / .dw2-pricebar / .dw2-usp / .dw2-toc
* 概要 .dw2-intro / .dw2-facts / .dw2-point
* 選び方 .dw2-fit / .dw2-step / .dw2-vs / .dw2-flags
* 商品一覧 .dw2-items / .dw2-item / .dw2-tags / .dw2-old
* 比較 .dw2-cmp / .dw2-pick
* 長所短所 .dw2-pc
* 機能 .dw2-fhl / .dw2-feat / .dw2-panel / .dw2-media
* 仕様 .dw2-spec / .dw2-opt
* 費用 .dw2-cost / .dw2-pack / .dw2-kj / .dw2-why / .dw2-promise / .dw2-warn
* 実績 .dw2-kpi / .dw2-idata / .dw2-bars
* 施工事例 .dw2-cases / .dw2-case
* 評価 .dw2-rate / .dw2-stars
* FAQ .dw2-faq
* 関連 .dw2-rel / .dw2-morelink
* 共通部品 .dw2-btn / .dw2-cta / .dw2-ic / .dw2-backtop / .dw2-chip
*
* 【ブレークポイント】
* min-width:960px … PC（固定ヘッダー分の scroll-margin-top）
* max-width:767px … タブレット以下
* max-width:640px … 既存サイトのSP切替点
* max-width:480px … スマートフォン
* max-width:359px … 極小幅
* ========================================================================== */
.dw2 {
--dw2-blue: #0065cc;
--dw2-blue-dark: #004993;
--dw2-green: #34aa34;
--dw2-green-dark:#208d14;
--dw2-green-txt: #009900;
--dw2-red: #eb0000;
--dw2-ink: #333;
--dw2-ink-sub: #666;
--dw2-line: #ddd;
--dw2-line-str: #e3e1e1;
--dw2-bg: #f1f1f1;
--dw2-bg-soft: #f7f8f9;
--dw2-radius: 4px;
--dw2-radius-lg: 10px;
/* 食洗機は全シリーズ同じ色に統一する（2026-09-16 指示・ガスコンロのスペリアと同色）。
シリーズごとに変えない。見出しの青帯はサイト共通CSSなので触らない。 */
--dw2-accent: #4a4f8c;
--dw2-accent-bg: #eef0f8;
}
.dw2, .dw2 * { word-break: normal; overflow-wrap: break-word;
}
.dw2 { color: var(--dw2-ink); line-height: 1.8;
}
.dw2 *, .dw2 *::before, .dw2 *::after { box-sizing: border-box;
}
.dw2 img { max-width: 100%; height: auto;
}
.dw2 ul, .dw2 ol { list-style: none; margin: 0 10; padding: 0;
}
.dw2 a:not([class]) {
color: var(--dw2-accent);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.dw2 a:not([class]):hover,
.dw2 a:not([class]):focus-visible { text-decoration: none;
}
.dw2 .button007 a,
.dw2 .button007 a:not([class]) {
color: #fff;
text-decoration: none;
}
.dw2 .button007 a:hover,
.dw2 .button007 a:focus-visible {
color: #0065cc;
text-decoration: none;
}
.dw2 .dw2-nowrap { word-break: keep-all; white-space: nowrap;
}
.dw2 .dw2-sr {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.dw2-sec { margin: 0 0 42px;
}
.dw2-sec:last-child { margin-bottom: 0;
}
.dw2-lead { font-size: 15px; margin: 18px 10px;
}
.dw2-h4 {
font-size: 16px; font-weight: bold; color: var(--dw2-ink);
margin: 24px 0 10px; padding: 7px 12px;
background: var(--dw2-bg); border-left: 4px solid var(--dw2-accent);
border-radius: 0 var(--dw2-radius) var(--dw2-radius) 0;
line-height: 1.5;
}
.dw2-h5 { font-size: 15px; font-weight: bold; margin: 16px 0 6px; line-height: 1.6;
}
.dw2-sec[id] { scroll-margin-top: 20px;
}
.dw2-backtop-w { margin: 6px 0 10px; text-align: right; line-height: 1;
}
.dw2-backtop {
appearance: none; -webkit-appearance: none;
display: inline-flex; align-items: center; gap: 4px;
background: #fff; border: 1px solid var(--dw2-accent); color: var(--dw2-accent);
font-family: inherit; font-size: 12px; font-weight: bold;
line-height: 1.5; padding: 5px 14px; border-radius: 999px;
cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.dw2-backtop:hover, .dw2-backtop:focus-visible { background: var(--dw2-accent); color: #fff;
}
.dw2-backtop span { font-size: 13px;
}
.dw2-hero {
border-radius: var(--dw2-radius-lg);
overflow: hidden;
background: #fff;
margin-bottom: 24px;
border: 1px solid #ccc;
}
.dw2-hero__figure { margin: 0; position: relative; background: #eef0f2;
}
.dw2-hero__figure picture { display: block;
}
.dw2-hero__figure img { display: block; width: 100%;
}
.dw2-hero__flag {
position: absolute; top: 10px; left: 10px;
background: var(--dw2-red); color: #fff; font-weight: bold;
font-size: 12px; line-height: 1; padding: 7px 10px; border-radius: 999px;
box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.dw2-hero__body { padding: 18px 18px 20px;
}
.dw2-hero__series { font-size: 13px; color: var(--dw2-ink-sub); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dw2-hero__series::after {
content: ""; order: 2; flex: 1 1 24px; min-width: 24px;
height: 1px; background: #d70000;
}
.dw2-hero__new { order: 3;
}
.dw2-hero__new {
background: #d70000; color: #fff; font-size: 12.5px; font-weight: bold;
padding: 5px 13px; border-radius: 999px; line-height: 1.35;
letter-spacing: .03em;
box-shadow: 0 1px 3px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.28);
word-break: keep-all; white-space: nowrap;
}
.dw2-hero__name {
font-size: 26px; font-weight: bold; line-height: 1.3; margin: 0 0 6px;
color: var(--dw2-ink); letter-spacing: -.01em;
}
.dw2-hero__sub { font-size: 14px; color: var(--dw2-ink-sub); line-height: 1.7; margin: 0 0 16px;
}
.dw2-hero__copy { font-size: 14px; line-height: 1.85; margin: 14px 0 16px; color: #444;
}
.dw2-pricebar {
border: 2px solid var(--dw2-accent);
border-radius: var(--dw2-radius-lg);
padding: 14px 16px 15px; margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(27,110,168,.10);
}
.dw2-pricebar__label {
display: inline-block; font-size: 12.5px; font-weight: bold; color: #fff;
background: var(--dw2-accent); border-radius: 3px;
padding: 3px 10px; margin: 0 0 8px; line-height: 1.5;
}
.dw2-pricebar__val { margin: 0; line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px;
}
.dw2-pricebar__val strong {
color: var(--dw2-red); font-size: 42px; font-weight: bold; letter-spacing: -.02em;
}
.dw2-pricebar__val .u { font-size: 18px; font-weight: bold; color: var(--dw2-red);
}
.dw2-pricebar__val .to { font-size: 16px; color: var(--dw2-ink-sub);
}
.dw2-pricebar__off {
background: var(--dw2-red); color: #fff; font-size: 13px; font-weight: bold;
padding: 4px 10px; border-radius: 999px; margin-left: 6px; line-height: 1.4;
word-break: keep-all; white-space: nowrap;
}
.dw2-pricebar__inc { display: flex; flex-wrap: wrap; gap: 5px; margin: 11px 0 8px;
}
.dw2-pricebar__inc li {
font-size: 11.5px; line-height: 1.5; padding: 3px 9px 3px 20px;
background: #fff; border: 1px solid #cfe2f2; border-radius: 999px;
color: var(--dw2-accent); position: relative; word-break: keep-all;
}
.dw2-pricebar__inc li::before {
content: "✓"; position: absolute; left: 7px; font-weight: bold; color: #46a049;
}
.dw2-pricebar__note { font-size: 11.5px; color: var(--dw2-ink-sub); margin: 0; line-height: 1.7;
}
/* ---------------------------------------------------------------------------
ファーストビューの3つの要点
2026-09-21 指示「ここのデザインが嫌いなんだよなー。変えてもっと見やすく。
スマホ版も変えろ。」で作り直した。
・上の細い色線をやめ、左のアイコンで種類が分かるようにする
・中央ぞろえをやめて左ぞろえ。数値 → 説明 の順に視線が落ちる
・押せることが分かるように矢印を丸で囲み、hoverで枠と影を付ける
並びは全ページ共通で is-a＝性能の数値／is-b＝10年保証／is-c＝施工実績。
アイコンはCSSだけで出すので、各ページのHTMLは変えなくてよい。
--------------------------------------------------------------------------*/
.dw2-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
margin: 0 0 4px; padding: 0; list-style: none;
}
.dw2-usp li {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; padding: 0; text-align: left; overflow: hidden;
transition: background .18s, border-color .18s;
}
.dw2-usp__a {
display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto;
align-items: center; column-gap: 8px;
padding: 11px 9px 11px 11px; text-decoration: none; color: inherit;
transition: background .18s, box-shadow .18s;
}
/* 右端の矢印。丸で囲んで「押せる」ことを分かるようにする */
.dw2-usp__a::after {
content: "›"; grid-column: -2; grid-row: 1 / -1; justify-self: end; align-self: center;
width: 20px; height: 20px; border-radius: 50%;
background: var(--dw2-bg); color: var(--dw2-ink-sub);
font-size: 14px; font-weight: bold; line-height: 19px; text-align: center;
transition: background .18s, color .18s;
}
.dw2-usp__a:hover, .dw2-usp__a:focus-visible { text-decoration: none;
}
/* hover は枠ごと（li）で色を変える。a だけに掛けると外側に白が残って中途半端に見える
（2026-09-21 指摘「hoverしたときに全部backグランド色変えろよ」）。 */
.dw2-usp li.is-a:hover, .dw2-usp li.is-a:focus-within { background: #eef8ee; border-color: #2f7a33;
}
.dw2-usp li.is-b:hover, .dw2-usp li.is-b:focus-within { background: var(--dw2-accent-bg); border-color: var(--dw2-accent);
}
.dw2-usp li.is-c:hover, .dw2-usp li.is-c:focus-within { background: #fff6e8; border-color: #b56a00;
}
.dw2-usp b { display: block; grid-column: -3; grid-row: 1; align-self: end;
font-size: 20px; font-weight: bold; line-height: 1.2; color: var(--dw2-ink); overflow-wrap: anywhere;
}
.dw2-usp b em { font-style: normal; font-size: 13px; font-weight: bold; margin-left: 1px;
}
.dw2-usp span { display: block; grid-column: -3; grid-row: 2; align-self: start;
font-size: 11.5px; color: var(--dw2-ink-sub); line-height: 1.55; margin-top: 3px;
}
/* 種類ごとの色。面は塗らず、数字とアイコンと hover の矢印にだけ使う */
.dw2-usp li.is-a b { color: #2f7a33;
}
.dw2-usp li.is-b b { color: var(--dw2-accent);
}
.dw2-usp li.is-c b { color: #b56a00;
}
.dw2-usp li.is-a:hover .dw2-usp__a::after,
.dw2-usp li.is-a:focus-within .dw2-usp__a::after { background: #2f7a33; color: #fff;
}
.dw2-usp li.is-b:hover .dw2-usp__a::after,
.dw2-usp li.is-b:focus-within .dw2-usp__a::after { background: var(--dw2-accent); color: #fff;
}
.dw2-usp li.is-c:hover .dw2-usp__a::after,
.dw2-usp li.is-c:focus-within .dw2-usp__a::after { background: #b56a00; color: #fff;
}
/* 左のアイコン。mask が使えるブラウザだけ列を増やして出す
（使えない環境では色の四角が出てしまうので、列ごと作らない）。 */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
.dw2-usp__a { grid-template-columns: 26px minmax(0, 1fr) 20px;
}
.dw2-usp__a::before {
content: ""; grid-column: 1; grid-row: 1 / -1; align-self: center;
width: 26px; height: 26px; display: block;
background-color: var(--dw2-accent);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: 26px 26px; mask-size: 26px 26px;
}
/* is-a＝性能の数値（時計） */
.dw2-usp li.is-a .dw2-usp__a::before { background-color: #2f7a33;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 6.6 12 12.3 16 14.4'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 6.6 12 12.3 16 14.4'/%3E%3C/svg%3E");
}
/* is-b＝10年保証（盾＋チェック） */
.dw2-usp li.is-b .dw2-usp__a::before { background-color: var(--dw2-accent);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.2 2.7v5.3c0 4.6-3.1 8.4-7.2 10.4-4.1-2-7.2-5.8-7.2-10.4V5.5L12 2.8z'/%3E%3Cpolyline points='8.7 11.9 11.1 14.3 15.4 9.7'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.2 2.7v5.3c0 4.6-3.1 8.4-7.2 10.4-4.1-2-7.2-5.8-7.2-10.4V5.5L12 2.8z'/%3E%3Cpolyline points='8.7 11.9 11.1 14.3 15.4 9.7'/%3E%3C/svg%3E");
}
/* is-c＝施工実績（棒グラフ） */
.dw2-usp li.is-c .dw2-usp__a::before { background-color: #b56a00;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3.6' y1='20.2' x2='20.4' y2='20.2'/%3E%3Crect x='5.4' y='12.2' width='3.6' height='6'/%3E%3Crect x='10.2' y='8.2' width='3.6' height='10'/%3E%3Crect x='15' y='4.2' width='3.6' height='14'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3.6' y1='20.2' x2='20.4' y2='20.2'/%3E%3Crect x='5.4' y='12.2' width='3.6' height='6'/%3E%3Crect x='10.2' y='8.2' width='3.6' height='10'/%3E%3Crect x='15' y='4.2' width='3.6' height='14'/%3E%3C/svg%3E");
}
}
.dw2-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.dw2-cta--single { grid-template-columns: 1fr;
}
.dw2-btn {
display: block; text-align: center; text-decoration: none;
border-radius: var(--dw2-radius); padding: 13px 10px;
font-size: 18px; font-weight: bold; line-height: 1.4;
transition: all .25s;
}
.dw2-btn small { display: block; font-size: 14px; font-weight: normal; margin-top: 2px;
}
.dw2-btn--primary {
background: var(--dw2-green); border: 2px solid var(--dw2-green-dark); color: #fff;
}
.dw2-btn--primary:hover { background: #207720; text-decoration: none; color: #fff;
}
.dw2-btn--tel {
background: #fff; border: 2px solid var(--dw2-green-dark); color: var(--dw2-green-dark);
}
.dw2-btn--tel:hover { background: #f2fbf2; text-decoration: none;
}
.dw2-btn--ghost {
background: #fff; border: 1px solid var(--dw2-line); color: var(--dw2-blue);
font-weight: normal; font-size: 14px; padding: 11px 10px;
}
.dw2-btn--ghost:hover { background: var(--dw2-bg-soft); text-decoration: none;
}
.dw2-toc {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; margin-bottom: 34px; overflow: hidden;
}
.dw2-toc__h {
display: flex; align-items: center; gap: 8px; margin: 0;
padding: 10px 14px; font-size: 14.5px; font-weight: bold; line-height: 1.4;
background: var(--dw2-accent-bg); border-bottom: 1px solid var(--dw2-line);
}
.dw2-toc__i { display: inline-flex; flex: 0 0 auto; color: var(--dw2-accent); font-size: 18px; width: 1em;
}
.dw2-toc__n { margin-left: auto; font-size: 12px; font-weight: normal; color: var(--dw2-ink-sub);
}
.dw2-toc ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 6px; counter-reset: dw2toc; padding: 7px 8px 9px;
}
.dw2-toc li { counter-increment: dw2toc;
}
.dw2-toc a {
display: flex; align-items: center; gap: 8px;
padding: 8px 8px 8px 7px; font-size: 13px; line-height: 1.5;
text-decoration: none; border-radius: var(--dw2-radius);
}
.dw2-toc a::before {
content: counter(dw2toc);
flex: 0 0 auto; width: 20px; height: 20px; line-height: 20px;
border-radius: 50%; text-align: center;
background: var(--dw2-accent); color: #fff;
font-size: 11px; font-weight: bold;
}
.dw2-toc a::after { content: "›"; margin-left: auto; padding-left: 4px; color: #b9c0c7; font-size: 15px; font-weight: bold; line-height: 1;
}
.dw2-toc a:hover { background: var(--dw2-accent-bg); text-decoration: none;
}
.dw2-toc a:hover::after { color: var(--dw2-accent);
}
.dw2-media { display: grid; grid-template-columns: 300px 1fr; gap: 18px; align-items: start; margin-bottom: 18px;
}
.dw2-media--rev { grid-template-columns: 1fr 300px;
}
.dw2-media--rev .dw2-media__fig { order: 2;
}
.dw2-media__fig { margin: 0;
}
.dw2-media__fig img { display: block; width: 90%; border-radius: var(--dw2-radius);margin: 10px auto;
}
.dw2-media__fig figcaption { font-size: 12px; color: var(--dw2-ink-sub); margin-top: 5px; line-height: 1.6;padding: 0 10px;
}
.dw2-media__body > :first-child { margin-top: 0;
}
.dw2-media__body p { padding: 3%;
}
.dw2-fit { display: grid; grid-template-columns: 1fr; gap: 14px;
}
.dw2-fit__box { border: 2px solid var(--dw2-line); border-radius: var(--dw2-radius); overflow: hidden; background: #fff;
}
.dw2-fit__box h3 { margin: 0; padding: 9px 12px; font-size: 15px; color: #fff; line-height: 1.5; font-weight: bold;
}
.dw2-fit__box--yes { border-color: #46a049;
}
.dw2-fit__box--yes h3 { background: #46a049;
}
.dw2-fit__box--no { border-color: #8a94a0;
}
.dw2-fit__box--no h3 { background: #8a94a0;
}
.dw2-fit__box ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px;
}
.dw2-fit__box li {
position: relative; margin: 0;
padding: 10px 12px 11px 2.5em;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
font-size: 13.5px; line-height: 1.7;
}
.dw2-fit__box li:last-child { margin-bottom: 0;
}
.dw2-fit__box li strong { display: block; margin-bottom: 3px; font-size: 14px; line-height: 1.5;
}
.dw2-fit__box--yes li { background: #f6fbf7; border-color: #cfe6d1;
}
.dw2-fit__box--no li { background: #f7f8fa; border-color: #dde1e6;
}
.dw2-fit__why { display: block; font-weight: bold; margin-bottom: 4px;
}
.dw2-fit__go { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px;
}
.dw2-fit__box li::before {
position: absolute; top: 11px; left: 11px;
width: 19px; height: 19px; line-height: 19px;
border-radius: 50%; text-align: center;
font-size: 12px; font-weight: bold; color: #fff;
}
.dw2-fit__box--yes li::before { content: "○"; background: #46a049;
}
.dw2-fit__box--no li::before { content: "→"; background: #8a94a0;
}
.dw2-step { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); margin-bottom: 16px; background: #fff;
}
.dw2-step__h {
display: flex; align-items: center; gap: 10px;
margin: 0; padding: 11px 14px; background: var(--dw2-bg); border-bottom: 1px solid var(--dw2-line);
font-size: 16px; line-height: 1.4;
}
.dw2-step__n {
flex: 0 0 auto; background: var(--dw2-accent); color: #fff; font-weight: bold;
font-size: 15px; padding: 4px 9px; border-radius: 999px; letter-spacing: .04em;
}
.dw2-step__b { padding: 14px;
}
.dw2-step__lead {
margin: 2px 0 15px; padding: 12px 14px 13px;
font-size: 14px; line-height: 1.95;
background: var(--dw2-accent-bg);
border-left: 4px solid var(--dw2-accent);
border-radius: 0 var(--dw2-radius) var(--dw2-radius) 0;
}
.dw2-step__lead strong { color: var(--dw2-accent);
}
.dw2-step__b > p { margin: 0 0 12px;
}
.dw2-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.dw2-vs__card {
overflow: hidden; background: #fff;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2-vs__card > img {display: block;
width: 85%;
object-fit: cover;
text-align: center;
margin: 0 auto;
margin-top: 5%;
}
.dw2-vs__in { padding: 11px 13px 13px;
}
.dw2-vs__t {
font-size: 15px; font-weight: bold; margin: 0 0 9px; padding-bottom: 8px;
color: var(--dw2-accent); line-height: 1.4;
border-bottom: 1px dashed var(--dw2-line);
}
.dw2-vs__t span {
display: block; width: fit-content; margin-top: 6px; padding: 2px 9px;
background: var(--dw2-accent-bg); border-radius: 999px;
font-size: 11.5px; font-weight: bold; color: var(--dw2-ink-sub); line-height: 1.6;
}
.dw2-vs dl { margin: 0 0 8px; font-size: 13px;
}
.dw2-vs dl > div { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--dw2-line);
}
.dw2-vs dl > div:last-child { border-bottom: 0;
}
.dw2-vs dt { flex: 0 0 10em; color: var(--dw2-ink-sub);
}
.dw2-vs dd { margin: 0; flex: 1 1 auto;
}
.dw2-vs__note { font-size: 12.5px; line-height: 1.7; margin: 0; color: var(--dw2-ink-sub);
}
.dw2-flags { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); overflow: hidden;
}
.dw2-flags > li { display: grid; grid-template-columns: 9em 1fr; border-top: 1px solid var(--dw2-line);
}
.dw2-flags > li:first-child { border-top: 0;
}
.dw2-flags b { background: var(--dw2-bg-soft); padding: 10px 12px; font-size: 13.5px; line-height: 1.6;
}
.dw2-flags span { padding: 10px 12px; font-size: 13.5px; line-height: 1.7;
}
.dw2-chip {
appearance: none; -webkit-appearance: none;
border: 1px solid var(--dw2-line); background: #fff; color: var(--dw2-ink);
font-size: 13px; font-family: inherit; line-height: 1.4;
padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.dw2-chip:hover { border-color: var(--dw2-accent);
}
.dw2-chip[aria-pressed="true"] {
background: var(--dw2-accent); border-color: var(--dw2-accent); color: #fff; font-weight: bold;
}
.dw2-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.dw2-item {
border: 2px solid var(--dw2-line-str); border-radius: var(--dw2-radius);
background: #fff; padding: 12px; display: flex; flex-direction: column;
}
.dw2-item.is-hidden { display: none;
}
.dw2-item--old { border-color: var(--dw2-line); background: #fafafa;
}
.dw2-item__badges { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.dw2-item__grt { font-size: 16px; font-weight: bold; color: var(--dw2-red); line-height: 1.4;text-align: center;width: 100%;
}
/* 商品カードの見出しラベル。サイト内の他のラベル（.dw2-hero__new / .dw2-pricebar__off など）と
同じ 999px のピル。色はページ側で --dw2-item-label を指定する（既定はアクセント色）。 */
.dw2-item__label {
display: block; width: fit-content; max-width: 100%; margin: 0 auto;
background: var(--dw2-item-label, var(--dw2-accent)); color: #fff;
font-size: 13.5px; font-weight: bold; line-height: 1.45; text-align: center;
padding: 5px 16px; border-radius: 999px; word-break: keep-all;
}
.dw2-item__figure { margin: 0 0 10px; position: relative;
}
.dw2-item__figure > a { display: block; text-decoration: none;
}
.dw2-item__main {
display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 2px; padding: 6%;
}
.dw2-item__swatch {
position: absolute; right: 5px; bottom: 5px; width: 27%; max-width: 84px;
border: 2px solid #fff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.28);
display: block; aspect-ratio: 3 / 2; object-fit: cover;
}
.dw2-item__sku {
font-size: 14px; font-weight: bold; margin: 0 0 7px; line-height: 1.4;
word-break: keep-all; overflow-wrap: anywhere;
}
.dw2-item__sku span { display: block; font-size: 11px; font-weight: normal; color: var(--dw2-ink-sub); margin-top: 1px;
}
.dw2-item__spec { margin: 0 0 9px; font-size: 12.5px; border: 1px solid #e6e6e6; border-radius: 2px;
}
.dw2-item__spec > div { display: flex; gap: 6px; padding: 5px 8px; border-top: 1px solid #eee;
}
.dw2-item__spec > div:first-child { border-top: 0;
}
.dw2-item__spec dt { flex: 0 0 4.5em; color: var(--dw2-ink-sub);
}
.dw2-item__spec dd { margin: 0; flex: 1 1 auto; line-height: 1.6;
}
.dw2-tags { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; margin-bottom: 9px; flex: 1 1 auto;
}
.dw2-tags li {
font-size: 11px; line-height: 1.4; padding: 3px 7px; border-radius: 2px;
background: var(--dw2-accent-bg); color: var(--dw2-accent); border: 1px solid #cfe2f2;
}
.dw2-tags li.is-hood { background: #fff3e6; color: #b95c00; border-color: #ffd9ad;
}
.dw2-tags li.is-mesh { background: #eef8ee; color: #2b7a2f; border-color: #c9e6c9;
}
/* 価格・合計・ボタンはカードの下端にそろえる（上の説明量が違っても行内で位置が合うように）。
auto を置くのは「下のかたまりの先頭」だけ。2か所に置くと余白が分散してそろわない。 */
.dw2-item__prices { margin: auto 0 9px; font-size: 15px;
}
.dw2-item__prices > div { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 6px;
}
.dw2-item__prices dt { color: var(--dw2-ink-sub);
}
.dw2-item__prices dd { margin: 0; text-align: right;
}
.dw2-item__prices .is-list dd { color: var(--dw2-ink-sub);
}
.dw2-item__prices .is-list s { text-decoration: line-through;
}
.dw2-item__prices .is-sale dt, .dw2-item__prices .is-sale dd { color: var(--dw2-green-txt); font-weight: bold;
}
.dw2-item__prices .yen { font-size: .82em; font-weight: normal; margin-left: 1px;
}
.dw2-item__off {
display: inline-block; background: var(--dw2-red); color: #fff; font-weight: bold;
font-size: 14px; padding: 1px 6px; border-radius: 2px; margin-right: 8px;
word-break: keep-all; white-space: nowrap;
}
.dw2-item__total {
background: var(--dw2-bg); border-top: 2px solid #ccc; border-bottom: 2px solid #ccc;
padding: 8px 10px; margin: 0 0 10px; text-align: right;
}
.dw2-item__total b { display: block; font-size: 11.5px; font-weight: bold; color: var(--dw2-ink-sub); text-align: left; line-height: 1.4; margin-bottom: 1%;
}
.dw2-item__total strong { color: var(--dw2-red); font-size: 24px; font-weight: bold; line-height: 1.2;
}
.dw2-item__total .yen { font-size: 13px;color: var(--dw2-red);
}
.dw2-item__total--ask { background: #fffbef; border-top-color: #f0dfae; border-bottom-color: #f0dfae; text-align: left;
}
.dw2-item__total--ask strong { color: #b95c00; font-size: 20px;
}
.dw2-item__askn { display: block; font-size: 11.5px; color: var(--dw2-ink-sub); line-height: 1.6; margin-top: 2px;
}
.dw2-item__acts { display: grid; grid-template-columns: 1fr; gap: 6px;
}
.dw2-item__acts .dw2-btn { padding: 10px 8px; font-size: 14px;
}
.dw2-item__acts--one { grid-template-columns: 1fr !important;
}
.dw2-old { margin-top: 26px; border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: var(--dw2-bg-soft);
}
.dw2-old > summary {
cursor: pointer; padding: 13px 16px; font-size: 15px; font-weight: bold; list-style: none;
display: flex; align-items: center; gap: 8px; line-height: 1.5;
}
.dw2-old > summary::-webkit-details-marker { display: none;
}
.dw2-old > summary::after { content: "＋"; margin-left: auto; color: var(--dw2-accent); font-weight: bold;
}
.dw2-old[open] > summary::after { content: "−";
}
.dw2-old > summary small { display: block; font-size: 12px; font-weight: normal; color: var(--dw2-ink-sub);
}
.dw2-old__b { padding: 0 14px 16px;
}
.dw2-case__rate { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px;
}
.dw2-case__rate-lb { font-size: 11px; color: var(--dw2-ink-sub);
}
.dw2-case__rate .dw2-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; line-height: 1.2; white-space: nowrap;
}
.dw2-case__rate b { font-size: 13px;
}
.dw2-promise {
border: 2px solid #34aa34; border-radius: var(--dw2-radius);
background: #f4fbf4; margin: 14px 10px; overflow: hidden;
}
.dw2-promise__h {
margin: 0; background: #34aa34; color: #fff;
font-size: 15px; font-weight: bold; line-height: 1.45; padding: 8px 12px;
}
.dw2-promise__l { margin: 0; padding: 11px 13px 12px 13px; list-style: none;
}
.dw2-promise__l li {
position: relative; padding-left: 24px; font-size: 13px; line-height: 1.65;margin: 10px;
}
.dw2-promise__l li + li { margin-top: 7px;
}
.dw2-promise__l li::before {
content: "✓"; position: absolute; left: 2px; top: 0;
color: #2b8a2b; font-size: 14px; font-weight: bold;
}
.dw2-promise__l b { color: #1d6b1d;
}
.dw2-cmp__wrap { margin: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dw2-cmp {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid var(--dw2-line); font-size: 12.5px; line-height: 1.5;
}
.dw2-cmp th, .dw2-cmp td {
border: 1px solid var(--dw2-line); padding: 7px 8px; text-align: center; vertical-align: middle;
}
.dw2 img.dw2-cmp__thumb {
display: block; width: 70px; max-width: none; margin: 0 auto 6px;
aspect-ratio: 3 / 2; object-fit: contain;
border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px; background: #fff; padding: 2%;
}
.dw2-cmp thead th:first-child img.dw2-cmp__thumb { display: none;
}
.dw2-cmp thead th:not(:first-child) { min-width: 118px;
}
.dw2-cmp thead th { background: #eef4fa; font-size: 13px; line-height: 1.4;
}
.dw2-cmp thead th a { color: var(--dw2-accent);
}
.dw2-cmp thead th.is-me { background: var(--dw2-accent); color: #fff;
}
.dw2-cmp thead th span { display: block; font-size: 10px; font-weight: normal;
}
.dw2-cmp tbody th {
background: #f7f8f9; text-align: left; font-size: 12px; white-space: nowrap;
}
.dw2-cmp thead th:first-child,
.dw2-cmp tbody th { position: sticky; left: 0; z-index: 1;
}
.dw2-cmp thead th:first-child { background: #eef4fa; z-index: 2;
}
.dw2-cmp__hint { display: none;
}
/* 「スクロールできます」の案内（scroll-hint.js）は、既定だと表のまん中に
120×80の黒い箱で出る。そのため固定表示にした1列目の下に潜り込んだり、
セルの文字を隠したりしていた（2026-09-28 指摘）。
横スクロールが要るときだけ表の上に場所を空けて、細い帯を右端に出す。 */
.dw2-cmp__wrap.is-scrollable { padding-top: 26px;
}
.dw2-cmp__wrap .scroll-hint-icon-wrap { z-index: 3;
}
.dw2-cmp__wrap .scroll-hint-icon {
top: 0; left: 0; width: 100%; height: 22px;
padding: 0; border-radius: 0; background: none; text-align: right;
}
.dw2-cmp__wrap .scroll-hint-icon:before,
.dw2-cmp__wrap .scroll-hint-icon:after { content: none; display: none;
}
.dw2-cmp__wrap .scroll-hint-text {
display: inline-block; margin: 0; padding: 3px 11px; border-radius: 11px;
background: rgba(0, 0, 0, .72); color: #fff;
font-size: 11px; font-weight: bold; line-height: 1.4; white-space: nowrap;
}
.dw2-cmp__wrap .scroll-hint-text:before { content: "\2194"; margin-right: 6px; font-weight: normal;
}
.dw2-cmp tbody th span { display: block; font-size: 10.5px; font-weight: normal; color: var(--dw2-ink-sub);
}
/* このページの列は**列ごと**色を変える（2026-09-21 指摘「列全体で色変えろよ見やすく」）。
見出しにだけ is-me を付けているページでも列全体が塗られるように :has() で拾う。
色は商材のアクセントの薄色を使うので、赤・グレー・紺どれでも浮かない。 */
.dw2-cmp td.is-me,
.dw2-cmp:has(thead th:nth-child(2).is-me) tbody tr > *:nth-child(2),
.dw2-cmp:has(thead th:nth-child(3).is-me) tbody tr > *:nth-child(3),
.dw2-cmp:has(thead th:nth-child(4).is-me) tbody tr > *:nth-child(4) {
background: var(--dw2-accent-bg); font-weight: bold;
}
/* 列の左右に細い線を入れて、どこからどこまでが自分の列か分かるようにする */
/* 左右と最下段の線は box-shadow で引く。border だと border-collapse で
隣のセルに負けて右だけ濃く見える（2026-09-21 指摘）。 */
.dw2-cmp:has(thead th:nth-child(2).is-me) tbody tr > *:nth-child(2),
.dw2-cmp:has(thead th:nth-child(3).is-me) tbody tr > *:nth-child(3),
.dw2-cmp:has(thead th:nth-child(4).is-me) tbody tr > *:nth-child(4) {
box-shadow: inset 1px 0 0 var(--dw2-accent), inset -1px 0 0 var(--dw2-accent);
}
.dw2-cmp:has(thead th:nth-child(2).is-me) tbody tr:last-child > *:nth-child(2),
.dw2-cmp:has(thead th:nth-child(3).is-me) tbody tr:last-child > *:nth-child(3),
.dw2-cmp:has(thead th:nth-child(4).is-me) tbody tr:last-child > *:nth-child(4) {
box-shadow: inset 1px 0 0 var(--dw2-accent), inset -1px 0 0 var(--dw2-accent),
inset 0 -1px 0 var(--dw2-accent);
}
.dw2-cmp__price td { font-size: 12px; white-space: nowrap;
}
.dw2-cmp__price b { font-size: 16px; color: var(--dw2-red);
}
.dw2-cmp__price span { font-size: 10.5px; color: var(--dw2-ink-sub);
}
.dw2-cmp__yes {
display: inline-block; font-size: 19px; font-weight: bold; line-height: 1;
color: var(--dw2-red);
-webkit-text-stroke: 1.2px var(--dw2-red);
paint-order: stroke fill;
}
.dw2-cmp__yn {
display: block; margin-top: 3px;
font-size: 10.5px; font-weight: normal; line-height: 1.4; color: var(--dw2-ink-sub);
}
.dw2-cmp__na {
display: inline-block; font-size: 17px; font-weight: bold; line-height: 1;
color: #b5b5b5;
}
.dw2-cmp td.is-me .dw2-cmp__na { color: #a6a6a6;
}
.dw2-pick { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 10px 0;
}
.dw2-pick__i {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; overflow: hidden;
}
.dw2-pick__i::before { content: none;
}
.dw2-pick__t {
margin: 0; padding: 8px 12px;
font-size: 14.5px; font-weight: bold; line-height: 1.45;
color: var(--dw2-ink); background: var(--dw2-bg-soft);
border-bottom: 1px solid var(--dw2-line);
}
.dw2-pick__i > p { margin: 0; padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.85;
}
.dw2-pick__i:first-child { border-color: var(--dw2-accent); box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.dw2-pick__i:first-child .dw2-pick__t {
color: #fff; background: var(--dw2-accent); border-bottom-color: var(--dw2-accent);
}
.dw2-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 10px;
}
.dw2-pc__col { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; overflow: hidden;
}
.dw2-pc__h { margin: 0; padding: 8px 12px; font-size: 14px; font-weight: bold; color: #fff;
}
.dw2-pc__col.is-pro .dw2-pc__h { background: #2b8a2b;
}
.dw2-pc__col.is-con .dw2-pc__h { background: #b07a12;
}
.dw2-pc__col dl { margin: 0; padding: 10px 12px 12px;
}
.dw2-pc__col dt { font-size: 13px; font-weight: bold; line-height: 1.5; position: relative; padding-left: 16px;
}
.dw2-pc__col dt::before { position: absolute; left: 0; top: 0; font-weight: bold;
}
.dw2-pc__col.is-pro dt::before { content: "○"; color: #2b8a2b;
}
.dw2-pc__col.is-con dt::before { content: "！"; color: #b07a12;
}
.dw2-pc__col dd { margin: 3px 0 0 16px; font-size: 12.5px; line-height: 1.65; color: var(--dw2-ink-sub);
}
.dw2-pc__col dd + dt { margin-top: 10px;
}
.dw2-ic { width: 1em; height: 1em; display: block;
}
.dw2-kpi {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
margin: 0 10px 14px; padding: 0; list-style: none;
}
.dw2-kpi li {
display: block; margin: 0; list-style: none; text-align: center;
border: 1px solid #2c9146; border-top: 3px solid #2c9146;
border-radius: var(--dw2-radius); background: #fff; padding: 12px 8px 11px;
}
.dw2-kpi li::before { content: none;
}
.dw2-kpi__i { display: block; font-size: 26px; color: #2c9146; margin: 0 auto 6px; width: 1em;
}
.dw2-kpi__v { display: block; line-height: 1.1;
}
.dw2-kpi__v b { font-size: 30px; font-weight: bold; color: #2c9146;
}
.dw2-kpi__v b.is-sm { font-size: 20px;
}
.dw2-kpi__v em { font-size: 13px; font-style: normal; font-weight: bold; margin-left: 2px;
}
.dw2-kpi__l { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--dw2-ink-sub);
}
.dw2-idata { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 10px;
}
.dw2-idata__c { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; padding: 11px 12px 12px;
}
.dw2-idata__c.is-wide { grid-column: 1 / -1;
}
.dw2-idata__c:nth-of-type(3) { grid-column: 1 / -1;
}
.dw2-idata__c:nth-of-type(3) .dw2-bars__b { max-width: 420px;
}
.dw2-idata__h {
display: flex; align-items: center; gap: 6px;
margin: 0 0 8px; padding-bottom: 7px; border-bottom: 1px solid var(--dw2-line);
font-size: 13.5px; font-weight: bold; color: var(--dw2-accent);
}
.dw2-idata__i { font-size: 19px; color: var(--dw2-accent); flex: 0 0 auto; width: 1em;
}
.dw2-idata__top { margin: 0 0 9px; line-height: 1.15;
}
.dw2-idata__top b { font-size: 27px; font-weight: bold; color: var(--dw2-red);
}
.dw2-idata__top b em { font-size: 15px; font-style: normal; margin-left: 1px;
}
.dw2-idata__top span { font-size: 13px; font-weight: bold; margin-left: 2px;
}
.dw2-idata__n { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--dw2-ink-sub);
}
.dw2-bars { margin: 0; padding: 0; list-style: none;
}
.dw2-bars li {
display: flex; align-items: center; gap: 6px;
border: 0; background: none; padding: 0; margin: 0; list-style: none;
}
.dw2-bars li::before { content: none;
}
.dw2-bars li + li { margin-top: 7px;
}
.dw2-bars__l { flex: 0 0 6.6em; font-size: 12px; white-space: nowrap;
}
.dw2-bars__b { flex: 1 1 auto; height: 12px; background: #eef1f4; border-radius: 6px; overflow: hidden; min-width: 0;
}
.dw2-bars__b i { display: block; height: 100%; background: #29abe9; border-radius: 6px;
}
.dw2-bars__v { flex: 0 0 5.4em; text-align: right; font-size: 12px;
}
.dw2-bars__v b { font-size: 13.5px; font-weight: bold;
}
.dw2-bars__v i { font-style: normal; font-size: 11px; color: var(--dw2-ink-sub); margin-left: 4px;
}
.dw2-idata__pref { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none;
}
.dw2-idata__pref li {
display: flex; align-items: center; gap: 4px; margin: 0; list-style: none;
border: 1px solid var(--dw2-line); border-radius: 999px; padding: 4px 11px 4px 8px;
background: #fff;
}
.dw2-idata__pref li .dw2-ic { font-size: 13px; color: var(--dw2-accent); flex: 0 0 auto; width: 1em;
}
.dw2-idata__pref li::before { content: none;
}
.dw2-idata__pref b { font-size: 12.5px;
}
.dw2-idata__pref span { font-size: 11px; color: var(--dw2-ink-sub);
}
.dw2-pack {
display: grid; grid-template-columns: 1fr auto 2.8fr auto 1fr;
align-items: stretch; gap: 10px; margin: 0 0 10px;
}
.dw2-pack__op {
margin: 0; align-self: center; justify-self: center;
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--dw2-accent); color: #fff;
font-size: 19px; font-weight: bold; line-height: 1;
}
.dw2-pack__b {
display: flex; flex-direction: column;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; overflow: hidden; min-width: 0;
}
.dw2-pack__h {
margin: 0; padding: 8px 10px; text-align: center;
background: var(--dw2-accent-bg); color: var(--dw2-accent);
font-size: 13px; font-weight: bold; line-height: 1.45;
border-bottom: 1px solid var(--dw2-line);
}
.dw2-pack__h span { display: block; margin-top: 1px; font-size: 13px; font-weight: bold; color: var(--dw2-red);
}
.dw2-pack__g {
display: grid; grid-template-columns: 1fr; gap: 9px;
margin: 0; padding: 14px 14px 15px; list-style: none;
}
.dw2-pack__b.is-pack .dw2-pack__g { grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 10px;
}
.dw2-pack__g li {
display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
text-align: center; margin: 0; padding: 11px 6px 10px; list-style: none;
border: 1px solid #e6ecf2; border-radius: 6px; background: #f8fbfe;
}
.dw2-pack__g li::before { content: none;
}
.dw2-pack__g { flex: 1 1 auto; align-content: center;
}
.dw2-pack__b.is-goods .dw2-pack__g li,
.dw2-pack__b.is-after .dw2-pack__g li { padding: 13px 8px 12px; border: 0; background: none;
}
.dw2-pack__g img { display: block; width: 48px; height: 48px; object-fit: contain; margin: 0 auto 7px;
}
.dw2-pack__b.is-after .dw2-pack__g img { width: 66px; height: 74px; margin-bottom: 8px;
}
.dw2-pack__g b { display: block; font-size: 12px; font-weight: bold; line-height: 1.5;
}
.dw2-pack__g span { display: block; margin-top: 2px; font-size: 12px; font-weight: bold; color: var(--dw2-red); line-height: 1.5;
}
.dw2-pack__b.is-goods .dw2-pack__g span { color: #009900; font-size: 11.5px;
}
.dw2-pack__total {
margin: 0 0 12px; padding: 10px 12px; text-align: center;
background: var(--dw2-accent); color: #fff; border-radius: var(--dw2-radius);
font-size: 13.5px; font-weight: bold; line-height: 1.5;
}
.dw2-pack__total strong { color: #fff;
}
.dw2-why { margin: 0 10px 4px;
}
.dw2-why dt {
font-size: 13.5px; font-weight: bold; line-height: 1.5;
position: relative; padding-left: 15px; color: var(--dw2-ink);
}
.dw2-why dt::before {
content: ""; position: absolute; left: 0; top: .5em;
width: 8px; height: 8px; border-radius: 2px; background: var(--dw2-accent);
}
.dw2-why dd { margin: 3px 0 0 15px; font-size: 13px; line-height: 1.75; color: #444;
}
.dw2-why dd + dt { margin-top: 11px;
}
.dw2-kj__wrap { margin: 0 0 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.dw2-kj { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px;
}
.dw2-kj th, .dw2-kj td { border: 1px solid var(--dw2-line); padding: 7px 10px;
}
.dw2-kj thead th { background: #eef4fa; text-align: center; font-size: 12.5px;
}
.dw2-kj tbody th { background: #f7f8f9; text-align: left; font-weight: normal; white-space: nowrap;
}
.dw2-kj td.is-p { text-align: right; white-space: nowrap; font-weight: bold; color: var(--dw2-red); font-size: 15px;
}
.dw2-kj td.is-p span { font-size: 11.5px; font-weight: normal; margin-left: 1px;
}
.dw2-cost__note { margin: 0 0 4px;
}
.dw2-cost__note li { font-size: 12px; line-height: 1.7; color: var(--dw2-ink-sub);
}
.dw2-rel { margin: 0 10px 14px; padding: 0; list-style: none;
}
.dw2-rel li {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; padding: 9px 12px; margin: 0; list-style: none;
}
.dw2-rel li::before { content: none;
}
.dw2-rel li + li { margin-top: 7px;
}
.dw2-rel__t {
display: block; font-size: 13.5px; font-weight: bold;
color: var(--dw2-accent); text-decoration: underline; text-underline-offset: 2px;
}
.dw2-rel li:hover .dw2-rel__t { text-decoration: none;
}
.dw2-rel__d { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; color: var(--dw2-ink-sub);
}
.dw2-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.dw2-feat__g { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; overflow: hidden;
}
.dw2-feat__g h3 { margin: 0; padding: 9px 12px; font-size: 14px; background: var(--dw2-accent); color: #fff; line-height: 1.5; font-weight: bold;
}
.dw2-feat__g ul { padding: 10px 12px;
}
.dw2-feat__g li { font-size: 13px; line-height: 1.7; padding-left: 1.1em; position: relative; margin-bottom: 5px;
}
.dw2-feat__g li:last-child { margin-bottom: 0;
}
.dw2-feat__g li::before { content: "・"; position: absolute; left: 0; color: var(--dw2-accent);
}
.dw2-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 10px;
}
.dw2-panel {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius-lg);
background: #fff; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.07);
display: flex; flex-direction: column;
}
.dw2-panel__h {
position: relative; margin: 0; padding: 11px 16px 11px 32px;
background: linear-gradient(135deg, #0065cc 0%, #2f8ec9 100%);
color: #fff; line-height: 1.4;
}
.dw2-panel__h::before {
content: ""; position: absolute; left: 0; top: 0;
border-style: solid; border-width: 0 0 52px 24px;
border-color: transparent transparent rgba(255,255,255,.16) transparent;
}
.dw2-panel__h b { position: relative; display: block; font-size: 16px; font-weight: bold;
}
.dw2-panel__h span { position: relative; display: block; font-size: 11.5px; opacity: .92;
}
.dw2-panel__fig { margin: 0; padding: 12px 14px 0; background: #fff; text-align: center;
}
.dw2-panel__fig img { display: block; width: 100%; max-width: 366px; height: auto; margin: 0 auto;
}
.dw2-panel__list { counter-reset: dw2pn; margin: 0; padding: 12px 14px 4px;
}
.dw2-panel__list > div {
position: relative; padding: 9px 0 9px 32px;
border-bottom: 1px dashed var(--dw2-line);
}
.dw2-panel__list > div:last-child { border-bottom: 0;
}
.dw2-panel__list > div::before {
counter-increment: dw2pn; content: counter(dw2pn);
position: absolute; left: 0; top: 10px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--dw2-accent); color: #fff; border-radius: 50%;
font-size: 11px; font-weight: bold;
}
.dw2-panel__list dt { font-size: 13.5px; font-weight: bold; color: var(--dw2-accent); line-height: 1.5;
}
.dw2-panel__list dd { margin: 0; font-size: 12.5px; line-height: 1.7; color: #444;
}
.dw2-point {
position: relative; margin: 8px 14px 16px; padding: 12px 13px 11px;
background: var(--dw2-accent-bg);
border: 1px dashed var(--dw2-accent); border-radius: var(--dw2-radius);
margin-top: auto;
}
.dw2-point b {
position: absolute; top: -10px; left: 11px;
display: inline-flex; align-items: center; gap: 4px;
background: var(--dw2-accent); color: #fff;
font-size: 10.5px; font-weight: bold; letter-spacing: .08em;
padding: 3px 10px; border-radius: 999px; line-height: 1.4;
}
.dw2-point__i { display: block; font-size: 13px; width: 1em;
}
.dw2-point p { font-size: 12.5px; line-height: 1.75; margin: 2px 0 0; color: #333;
}
.dw2-intro { display: grid; grid-template-columns: 300px 1fr; gap: 14px 18px; align-items: start; margin-bottom: 16px;
}
.dw2-intro__fig { margin: 0;
}
.dw2-intro__fig img {
display: block; width: 85%; border-radius: var(--dw2-radius); margin:0 auto; text-align: center;
}
.dw2-intro__fig figcaption { font-size: 11.5px; color: var(--dw2-ink-sub); margin: 8px; line-height: 1.6;
}
.dw2-intro__fig figcaption b { display: block; font-size: 12.5px; color: var(--dw2-ink);
}
.dw2-intro__fig figcaption span { display: block; margin-top: 1px;
}
.dw2-intro__body > :first-child { margin-top: 0;
}
.dw2-intro__body p { font-size: 14px; line-height: 1.9;
}
.dw2-intro__lead {
margin: 0; padding: 12px 14px 13px;
font-size: 14.5px; line-height: 1.95;
background: var(--dw2-accent-bg);
border-left: 4px solid var(--dw2-accent);
border-radius: 0 var(--dw2-radius) var(--dw2-radius) 0;
}
.dw2-intro__more { grid-column: 1 / -1;
}
.dw2-intro__more p { margin: 0 0 10px; font-size: 14px; line-height: 1.95;
}
.dw2-intro__more p:last-child { margin-bottom: 0;
}
.dw2-intro strong { color: var(--dw2-accent);
}
.dw2-facts__h {
display: flex; align-items: center; gap: 8px;
margin: 0 0 9px; font-size: 14px; font-weight: bold; color: var(--dw2-ink);
}
.dw2-facts__h::before {
content: ""; flex: 0 0 4px; align-self: stretch; min-height: 1.2em;
background: var(--dw2-accent); border-radius: 2px;
}
.dw2-facts__h::after {
content: ""; flex: 1 1 auto; height: 1px; background: var(--dw2-line);
}
.dw2-facts {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
margin: 0 0 16px; padding: 0; list-style: none;
}
.dw2-facts li {
display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto;
align-items: center; column-gap: 10px; row-gap: 6px;
margin: 0; padding: 12px 13px 12px; list-style: none;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: linear-gradient(180deg, #fbfdff 0%, #fff 46%);
transition: box-shadow .2s, border-color .2s;
}
.dw2-facts li::before { content: none;
}
.dw2-facts li:hover { border-color: #b9d4ee; box-shadow: 0 2px 7px rgba(0,101,204,.09);
}
.dw2-facts__i {
grid-row: 1; grid-column: 1;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--dw2-accent-bg); color: var(--dw2-accent);
font-size: 24px; border: 1px solid #d8e7f6;
}
.dw2-facts__t { grid-row: 1; grid-column: 2; display: block; min-width: 0;
}
.dw2-facts__k {
display: inline-block; font-size: 10.5px; font-weight: bold; line-height: 1.4; letter-spacing: .04em;
color: #fff; background: var(--dw2-accent);
border-radius: 2px; padding: 1px 7px; margin-bottom: 4px;
}
.dw2-facts__v { display: block; font-size: 18px; font-weight: bold; color: var(--dw2-ink); line-height: 1.3;
}
.dw2-facts__n {
grid-row: 2; grid-column: 1 / -1;
display: block; font-size: 11.5px; color: #555; line-height: 1.65;
padding-top: 7px; border-top: 1px dashed #e2e8ee;
}
.dw2-point--wide { margin: 4px 0 4px; padding: 15px 15px 13px;
}
.dw2-point--wide p { font-size: 13.5px;
}
.dw2-spec { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); overflow: hidden; margin: 0;
}
.dw2-spec > div { display: grid; grid-template-columns: 15em 1fr; border-top: 1px solid var(--dw2-line);
}
.dw2-spec > div:first-child { border-top: 0;
}
.dw2-spec dt { background: var(--dw2-bg-soft); padding: 9px 12px; font-size: 13px; font-weight: bold; line-height: 1.6;
}
.dw2-spec dd { margin: 0; padding: 9px 12px; font-size: 13px; line-height: 1.7;
}
.dw2-opts { display: grid; grid-template-columns: 1fr; gap: 12px;
}
.dw2-opt {
display: grid; grid-template-columns: 140px 1fr; gap: 14px;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; padding: 13px;
}
.dw2-opt--noimg { grid-template-columns: 1fr;
}
.dw2-opt__fig { margin: 0;
}
.dw2-opt__fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; border-radius: 2px;
}
.dw2-opt__t { font-size: 15px; font-weight: bold; margin: 0 0 5px; line-height: 1.45;
}
.dw2-opt__t em {
font-style: normal; font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 2px;
margin-left: 6px; vertical-align: 2px; word-break: keep-all; white-space: nowrap;
}
.dw2-opt__t em.is-std { background: #eef8ee; color: #2b7a2f; border: 1px solid #c9e6c9;
}
.dw2-opt__t em.is-opt { background: var(--dw2-bg); color: var(--dw2-ink-sub); border: 1px solid var(--dw2-line);
}
.dw2-opt__meta { font-size: 12px; color: var(--dw2-ink-sub); margin: 0 0 6px; line-height: 1.6;
}
.dw2-opt__meta b { color: var(--dw2-ink);
}
.dw2-opt p { font-size: 13.5px; margin: 0; line-height: 1.75;
}
.dw2-cost { border: 2px solid var(--dw2-accent); border-radius: var(--dw2-radius); overflow: hidden; background: #fff;
}
.dw2-cost__h { margin: 0; padding: 11px 14px; background: var(--dw2-accent); color: #fff; font-size: 16px; line-height: 1.5;
}
.dw2-cost__h span { font-size: 16px; font-weight: normal;
}
.dw2-cost__b { padding: 14px;
}
.dw2-cost__list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 14px;
}
.dw2-cost__list li {
font-size: 13.5px; line-height: 1.6; padding: 8px 10px 8px 2em; position: relative;
background: var(--dw2-bg-soft); border-radius: 2px;
}
.dw2-cost__list li::before {
content: "✓"; position: absolute; left: .8em; color: #46a049; font-weight: bold;
}
.dw2-warn {
border: 1px solid #f0dfae; background: #fffbef; border-radius: var(--dw2-radius);
padding: 12px 14px; font-size: 13.5px; line-height: 1.8;
}
.dw2-warn b { display: block; margin-bottom: 5px; color: #8a6100; font-size: 14px;
}
.dw2-warn ul li { padding-left: 1.1em; position: relative; margin-bottom: 4px;
}
.dw2-warn ul li::before { content: "・"; position: absolute; left: 0;
}
.dw2-warn ul li:last-child { margin-bottom: 0;
}
.dw2-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.dw2-case { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; overflow: hidden; display: flex; flex-direction: column;
}
.dw2-case__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dw2-line);
}
.dw2-case__ba figure { margin: 0; background: #fff; position: relative;
}
.dw2-case__ba img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f2f3f4;
}
.dw2-case__ba figcaption {
position: absolute; top: 5px; left: 5px; font-size: 10.5px; font-weight: bold;
background: rgba(0,0,0,.62); color: #fff; padding: 2px 7px; border-radius: 2px; line-height: 1.5;
}
.dw2-case__ba figure:last-child figcaption { background: rgba(52,170,52,.9);
}
.dw2-case__b { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1 1 auto;
}
.dw2-case__area { font-size: 13px; font-weight: bold; margin: 0 0 6px; line-height: 1.5;
}
.dw2-case__area span { font-size: 11.5px; font-weight: normal; color: var(--dw2-ink-sub); margin-left: 5px;
}
.dw2-case__sw { margin: 0 0 8px; font-size: 12px;
}
.dw2-case__sw > div { display: flex; gap: 6px; padding: 3px 0;
}
.dw2-case__sw dt { flex: 0 0 4.5em; color: var(--dw2-ink-sub);
}
.dw2-case__sw dd { margin: 0; flex: 1 1 auto; overflow-wrap: anywhere; line-height: 1.6;
}
.dw2-case__voice {
margin: 0 0 10px; padding: 9px 11px;
background: #fffdf3; border: 1px solid #f0e2b8; border-radius: var(--dw2-radius);
position: relative;
}
.dw2-case__voice-lb {
display: inline-block; font-size: 10.5px; font-weight: bold; line-height: 1.4;
color: #8a6100; background: #fdf3d6; border: 1px solid #f0dfae;
border-radius: 2px; padding: 1px 6px; margin-bottom: 5px;
word-break: keep-all; white-space: nowrap;
}
.dw2-case__voice-t { display: block; font-size: 13px; font-weight: bold; color: #6b4c00; line-height: 1.5; margin-bottom: 3px;
}
.dw2-case__voice p { font-size: 12.5px; line-height: 1.8; margin: 0; color: #444;
}
.dw2-case__more { margin-top: auto;
}
.dw2-morelink { margin: 16px 0 0; text-align: center;
/* ボタンが2つ以上並ぶときに、必ず隙間を空ける。
inline-block ＋ text-align だけだと、HTML でボタン同士の間に改行が無い書き方を
したときに空白が生まれず、ボタンがぴったりくっついて見えてしまう。
flex の gap なら HTML の書き方に左右されない。 */
display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.dw2-morelink .dw2-btn { display: inline-block; min-width: 300px; padding: 12px 22px;
}
.dw2-rate { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; padding: 16px;
}
.dw2-rate__big { text-align: center;
}
.dw2-rate__big strong { display: block; font-size: 40px; font-weight: bold; line-height: 1; color: var(--dw2-ink);
}
.dw2-rate__big .st { display: block; color: #f5a623; font-size: 18px; letter-spacing: 2px; margin: 4px 0 2px;
}
.dw2-rate__big span { display: block; font-size: 12px; color: var(--dw2-ink-sub);
}
.dw2-rate__bars { margin: 0;
}
.dw2-rate__bars li { display: grid; grid-template-columns: 3.2em 1fr 2.6em; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 4px;
}
.dw2-rate__bars li:last-child { margin-bottom: 0;
}
.dw2-rate__tr { background: var(--dw2-bg); border-radius: 999px; height: 8px; overflow: hidden;
}
.dw2-rate__tr i { display: block; height: 100%; background: #f5a623; border-radius: 999px;
}
.dw2-rate__bars b { text-align: right; color: var(--dw2-ink-sub); font-weight: normal;
}
.dw2-faq { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); overflow: hidden; background: #fff;
}
.dw2-faq__i { border-top: 1px solid var(--dw2-line);
}
.dw2-faq__i:first-child { border-top: 0;
}
.dw2-faq__i > summary {
cursor: pointer; list-style: none; padding: 13px 40px 13px 44px; position: relative;
font-size: 14.5px; font-weight: bold; line-height: 1.65;
}
.dw2-faq__i > summary::-webkit-details-marker { display: none;
}
.dw2-faq__i > summary::before {
content: "Q"; position: absolute; left: 13px; top: 12px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--dw2-accent); color: #fff; border-radius: 50%; font-size: 12px;
}
.dw2-faq__i > summary::after {
content: ""; position: absolute; right: 16px; top: 19px;
width: 8px; height: 8px; border-right: 2px solid var(--dw2-ink-sub);
border-bottom: 2px solid var(--dw2-ink-sub); transform: rotate(45deg); transition: transform .2s;
}
.dw2-faq__i[open] > summary::after { transform: rotate(-135deg); top: 22px;
}
.dw2-faq__i > summary:hover { background: var(--dw2-bg-soft);
}
.dw2-faq__a { padding: 15px 16px 15px 44px; position: relative;
}
.dw2-faq__a::before {
content: "A"; position: absolute; left: 13px; top: 1px;
width: 22px; height: 22px; line-height: 22px; text-align: center;
background: var(--dw2-bg); color: var(--dw2-ink-sub); border-radius: 50%; font-size: 12px; font-weight: bold;margin-top: 15px;
}
.dw2-faq__a p { font-size: 14px; line-height: 1.85; margin: 0;
}
.dw2-src {
font-size: 11.5px; color: var(--dw2-ink-sub); line-height: 1.75;
border-top: 1px dashed var(--dw2-line); padding: 12px; margin-top: 8px;
}
.dw2-src a { color: var(--dw2-ink-sub);
}
.dw2-note { font-size: 13px; color: var(--dw2-ink-sub); line-height: 1.75; margin: 14px 0 0;
}
.dw2-fhl {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin: 0 0 14px; padding: 0; list-style: none;
}
.dw2-fhl > li {
display: flex; gap: 12px; align-items: flex-start;
padding: 13px 14px; background: var(--dw2-accent-bg);
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--dw2-radius);
}
.dw2-fhl__i {
flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 50%;
background: #fff; border: 1px solid rgba(0, 0, 0, 0.1);
color: var(--dw2-accent); font-size: 22px;
}
.dw2-fhl__b { display: block; min-width: 0;
}
.dw2-fhl__k { display: block; font-size: 14.5px; line-height: 1.45; color: #2a2a2a;
}
.dw2-fhl__v {
display: inline-block; margin: 4px 0 5px; padding: 1px 8px;
font-size: 11.5px; font-weight: bold; letter-spacing: 0;
color: #fff; background: var(--dw2-accent); border-radius: 999px;
}
.dw2-fhl__d { display: block; font-size: 12.5px; line-height: 1.75; color: #4a4a4a;
}
.dw2-feat__g h3 { display: flex; align-items: center; gap: 7px;
}
.dw2-feat__i { display: inline-flex; font-size: 16px;
}
.dw2-fl { margin: 0; padding: 10px 12px;
}
.dw2-fl > div { padding: 7px 0; border-top: 1px dotted #e2e2e2;
}
.dw2-fl > div:first-child { padding-top: 2px; border-top: 0;
}
.dw2-fl dt {
font-size: 13.5px; font-weight: bold; line-height: 1.55; color: #2a2a2a;
padding-left: 1.05em; position: relative;
}
.dw2-fl dt::before {
content: ""; position: absolute; left: 0; top: 0.5em;
width: 6px; height: 6px; border-radius: 50%; background: var(--dw2-accent);
}
.dw2-fl dd {
margin: 3px 0 0; padding-left: 1.05em;
font-size: 12.5px; line-height: 1.75; color: #555;
}
.dw2-fl__b {
display: inline-block; margin-left: 6px; padding: 1px 7px;
font-size: 11px; font-weight: normal; letter-spacing: 0; white-space: nowrap;
color: var(--dw2-accent); background: var(--dw2-accent-bg);
border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; vertical-align: 2px;
}
.dw2-fl__note {
margin: 0; padding: 0 12px 11px; font-size: 11.5px; line-height: 1.7; color: #7a7a7a;
}
.dw2-lead { line-height: 1.95;
}
.dw2-intro__more p { margin-bottom: 17px; line-height: 2.0;
}
.dw2-intro__more p:last-child { margin-bottom: 0;
}
.dw2-intro__more {
border-top: 1px solid var(--dw2-line);
padding: 2%;
}
.dw2-intro__more strong,
.dw2-hero__copy strong,
.dw2-lead strong {
font-weight: 600;
background: linear-gradient(transparent 55%, var(--dw2-accent-bg) 55%);
}
.dw2-pricebar__label {
display: block; width: -moz-fit-content; width: fit-content;
margin-left: auto; margin-right: auto; text-align: center;
}
.dw2-pricebar__val { justify-content: center;
}
.dw2-pricebar__inc { justify-content: center;
}
/* =============================================================
* 食洗機ページでの調整（ガスコンロ版から変えている点はここだけ）
* ============================================================= */
/* 目次のピル・商品画像の拡大リンクは、見た目がボタン/画像なので下線を出さない
（ガスコンロ版の同じ指定から、食洗機で使わないカラー見本の分だけ外したもの） */
.dw2-toc a:not([class]),
.dw2-item__figure > a:not([class]) { text-decoration: none; }
/* キーボード操作時のフォーカス表示を戻す。
サイト共通の /css/reset.css が `outline: 0`／`outline: none` を全要素に当てているため、
Tabキーで移動しても「いまどこにいるか」が分からない状態になっている。
共通ファイルは全ページに影響するので触らず、このページの範囲だけで見えるようにする。
マウス操作では出ない :focus-visible を使う。 */
.dw2 a:focus-visible,
.dw2 button:focus-visible,
.dw2 summary:focus-visible,
.dw2 details:focus-visible,
.dw2 [tabindex]:focus-visible {
outline: 3px solid #0b57b2;
outline-offset: 2px;
border-radius: 2px;
}
/* 濃い背景のボタン（緑のCTA・青い見出し内）では白い輪郭にして見えるようにする */
.dw2 .dw2-btn--primary:focus-visible,
.dw2 .dw2-usp__a:focus-visible {
outline-color: #fff;
box-shadow: 0 0 0 5px rgba(11, 87, 178, .55);
}
/* 2択の枠（.dw2-vs__card）の中の箇条書き。
ガスコンロ側はシリーズごとのCSSに同じ定義を置く運用になっていて、
書き忘れるとマーカーの無い素のリストで出る。食洗機では最初から共通へ入れておく。 */
.dw2-vs__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dw2-vs__list li {
position: relative; padding: 0 0 0 1.9em; margin: 0 0 7px; line-height: 1.75;
}
.dw2-vs__list li::before {
content: "✓"; position: absolute; left: 0; top: .25em;
width: 17px; height: 17px; line-height: 17px; text-align: center;
border-radius: 50%; background: var(--dw2-accent); color: #fff;
font-size: 10px; font-weight: bold;
}
.dw2-vs__list li:last-child { margin-bottom: 0; }
/* 食洗機の商品写真はこのサイトでは正方形（350×350）で用意されている。
ガスコンロ用の 3:2 の枠に入れると上下が切れるので、枠を正方形にして
contain で収める（写真を切り取らない）。**食洗機の商品画像はすべて正方形で扱う。** */
.dw2-item__main { aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
/* 比較表の見出しに出すシリーズのサムネイルも同じ。共通CSS（ガスコンロ由来）は 3:2 だが、
食洗機は正方形の写真をそのまま縮小して使うので枠も正方形にする。 */
.dw2 img.dw2-cmp__thumb { aspect-ratio: 1 / 1; }
/* 写真を置かない導入部（同じ商品写真をページ内で何度も出さないため）。
.dw2-intro は「写真300px＋本文」の2列なので、写真が無いときは1列に戻す。 */
.dw2-intro--nofig { grid-template-columns: 1fr; }
/* 型番の下に置く目印（ドアパネル型／ドア面材型）。
バッジ行には足さない（2枠のレイアウトが崩れるため）。 */
.dw2-item__sku > span { display: inline-flex; flex-wrap: wrap; gap: 4px 5px; align-items: center; margin-left: 9px; vertical-align: 1px; }
/* スマートフォンは型番と目印が1行に収まらないので、目印を次の行に落とす */
.dw2-item__sku .dw2-doortag {
display: inline-block; font-size: 11px; font-weight: bold; line-height: 1.5;
color: #fff; background: var(--dw2-accent); border-radius: 2px; padding: 1px 6px;
}
.dw2-item__sku .dw2-doortag.is-zaimoku { background: #5b6b7b; }
/* 数値を大きく見せる帯（標準使用水量・運転経費など）。
.dw2-kpi をそのまま使うが、食洗機は単位付きの数値が長いので折り返しを許す。 */
.dw2-kpi__v { flex-wrap: wrap; }
/* 出典・注釈の下に置く一次情報リンクは、行間を詰めすぎない */
.dw2-src a { word-break: break-all; }
/* 比較表の1列目（項目名）は食洗機のほうが語が長い */
/* 2択の枠のすぐ下に比較表が続くと、枠と表がくっついて読みにくい。
（PCでは「横にスクロールできます」の案内が非表示なので、間に何も入らない） */
.dw2-sec > .dw2-vs { margin-bottom: 22px; }
/* 機能一覧の写真は枠の高さをそろえる（隣同士で高さが違うと見づらい）。
縦横比は他の機能写真と同じ 1004:632。切り取らずに収めるので contain。 */
.dw2 .pn-cards__fig img { aspect-ratio: 1004 / 632; object-fit: contain; background: #fff; }
/* 「無料10年保証」はバッジ画像（/images/guarantee10_list.webp・500×120）で出す。
枠（右53%）の幅に合わせて縮め、文字だけの表示より目に留まるようにする。 */
.dw2 .dw2-item__grt img { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; }
/* -----------------------------------------------------------------------------
* 隣接ブロックの最低間隔（2026-09-16 指摘「ブロック同士をくっつけるな」）
* 節の中で続くブロックが余白ゼロで接していた箇所に間隔を入れる。
* M9 Plus／B1／M8ワイドの3ページ共通で効く。
* -------------------------------------------------------------------------- */
.dw2 .dw2-warn + .dw2-toc { margin-top: 20px; }
.dw2 .dw2-sec > .dw2-warn { margin-bottom: 18px; }
.dw2 .dw2-sec > .dw2-warn:last-child { margin-bottom: 0; }
.dw2 .dw2-facts__h + .dw2-facts { margin-top: 12px; }
.dw2 .dw2-media__body > .dw2-h5 + .dw2-spec { margin-top: 12px; }
.dw2 .dw2-cost__b > .dw2-kj__wrap + .dw2-cost__note { margin-top: 14px; }
.dw2 .dw2-cost__b > .dw2-why + .dw2-warn { margin-top: 18px; }
.dw2 .dw2-cmp__wrap + .dw2-why { margin-top: 18px; }
.dw2 .dw2-cmp__wrap + .dw2-spec,
.dw2 .dw2-cmp__wrap + .dw2-pick { margin-top: 16px; }
.dw2 .dw2-cost__b > .dw2-spec + .dw2-warn,
.dw2 .dw2-cost__b > .dw2-cmp__wrap + .dw2-warn { margin-top: 18px; }
/* 表と、そのすぐ下に続くブロックが余白ゼロで接していた箇所（2026-09-19 指摘）。
dl.dw2-spec・table.dw2-cmp のあとに注意枠・箇条書き・小見出しが続く形はどのページでも起こる。 */
.dw2 .dw2-spec + .dw2-warn,
.dw2 .dw2-why + .dw2-warn { margin-top: 18px; }
.dw2 .dw2-cmp__wrap + .dw2-warn { margin-top: 18px; }
.dw2 .dw2-cmp__wrap + .dw2-cost__note,
.dw2 .dw2-spec + .dw2-cost__note { margin-top: 14px; }
.dw2 .dw2-cmp__wrap + .dw2-h4,
.dw2 .dw2-spec + .dw2-h4,
.dw2 .dw2-kj__wrap + .dw2-h4 { margin-top: 22px; }
.dw2 .dw2-note + .dw2-toc { margin-top: 20px; }
.dw2 .dw2-feat + .dw2-warn { margin-top: 18px; }
.dw2 .dw2-cmp__wrap + .dw2-point { margin-top: 18px; }
/* -----------------------------------------------------------------------------
* 図版まわり（2026-09-19 追加）
* メーカーの公開画像・寸法図をそのまま並べるための部品。
* .dw2-fig … 単独の図版（横幅いっぱい）
* .dw2-fig--incard … .dw2-vs の升目に図版だけを置くとき（枠と余白を .dw2-vs__card と合わせる）
* .dw2-gal … 同じ大きさの図版を並べる（既定3列・SPで2列→1列）
* .dw2-chipfig … 扉柄などの小さな色見本
* -------------------------------------------------------------------------- */
.dw2 .dw2-fig { margin: 14px 10px; }
.dw2 .dw2-fig > img {
display: block; width: 100%; height: auto; background: #fff;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .dw2-fig > figcaption {
margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--dw2-ink-sub);
}
.dw2 .dw2-vs > .dw2-fig--incard {
margin: 0; padding: 10px; background: #fff;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .dw2-vs > .dw2-fig--incard > img { border: 0; border-radius: 2px; }
.dw2 .dw2-vs > .dw2-fig--incard > figcaption { margin-top: 7px; font-size: 12.5px; }
.dw2 .dw2-gal {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
margin: 14px 10px 0; padding: 0; list-style: none;
}
.dw2 .dw2-gal > li { margin: 0; }
.dw2 .dw2-gal > li::before { content: none; }
.dw2 .dw2-gal figure {
margin: 0; padding: 8px; background: #fff; height: 100%;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .dw2-gal img { display: block; width: 100%; height: auto; border-radius: 2px; }
.dw2 .dw2-gal figcaption {
margin-top: 7px; font-size: 12.5px; line-height: 1.6; font-weight: bold; text-align: center;
color: var(--dw2-ink);
}
.dw2 .dw2-chipfig { margin: 0 0 9px; }
.dw2 .dw2-chipfig > img {
display: block; width: 100%; max-width: 240px; height: auto;
border: 1px solid var(--dw2-line); border-radius: 3px;
}
.dw2 .dw2-chipfig > figcaption {
margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--dw2-ink-sub);
}
.dw2 .dw2-nowrap { white-space: nowrap; }
.dw2 .dw2-warn .dw2-tags { margin: 10px 0 0; }
.dw2 .dw2-point .dw2-tags { margin: 9px 0 0; }
.dw2 .dw2-gal + .dw2-note { margin-top: 10px; }
.dw2 .dw2-fig + .dw2-vs { margin-top: 14px; }
.dw2 .dw2-vs + .dw2-cost__note { margin-top: 14px; }
.dw2 .dw2-vs + .dw2-note { margin-top: 12px; }
.dw2 .dw2-figs { margin: 0; }
.dw2 .dw2-figs > .dw2-fig:first-child { margin-top: 14px; }
/* -----------------------------------------------------------------------------
* フロントオープン 2社比較（.fo-cmp）— 2026-09-19 追加
* /dishwasher/include/front_open_compare.php 専用。
* パナソニックのページとリンナイのページの両方で同じ見た目になるように、
* メーカー色はこのブロックの中だけで持つ（ページ側の --dw2-accent は変えない）。
* スマートフォンでは表を項目ごとのカードに組み替える（横スクロールさせない）。
* -------------------------------------------------------------------------- */
.dw2 .fo-cmp {
--fo-pn: #1a4f9c; /* パナソニック側 */
--fo-pn-bg: #eef3fb;
--fo-rn: #c8102e; /* リンナイ側 */
--fo-rn-bg: #fdeff1;
}
/* ---- 商品画像と価格（左右で同じ大きさ・同じ余白） ---- */
.dw2 .fo-cmp__heads {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 10px 0;
}
.dw2 .fo-cmp__head {
display: flex; flex-direction: column; background: #fff; padding: 12px;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .fo-cmp__head--panasonic { border-top: 3px solid var(--fo-pn); }
.dw2 .fo-cmp__head--rinnai { border-top: 3px solid var(--fo-rn); }
.dw2 .fo-cmp__head--panasonic.is-me { background: var(--fo-pn-bg); border-color: var(--fo-pn); }
.dw2 .fo-cmp__head--rinnai.is-me { background: var(--fo-rn-bg); border-color: var(--fo-rn); }
.dw2 .fo-cmp__mine {
align-self: flex-start; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px;
font-size: 11.5px; font-weight: bold; color: #fff; line-height: 1.6;
}
.dw2 .fo-cmp__head--panasonic .fo-cmp__mine { background: var(--fo-pn); }
.dw2 .fo-cmp__head--rinnai .fo-cmp__mine { background: var(--fo-rn); }
/* 帯が無い側は場所だけ確保する（左右で商品画像の位置をそろえる） */
.dw2 .fo-cmp__mine--off { visibility: hidden; }
.dw2 .fo-cmp__fig { margin: 0 auto 10px; width: 100%; max-width: 260px; }
.dw2 .fo-cmp__fig img {
display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
object-fit: contain; background: #fff; border-radius: 3px;
}
.dw2 .fo-cmp__maker { margin: 0; font-size: 12.5px; font-weight: bold; line-height: 1.5; }
.dw2 .fo-cmp__head--panasonic .fo-cmp__maker { color: var(--fo-pn); }
.dw2 .fo-cmp__head--rinnai .fo-cmp__maker { color: var(--fo-rn); }
.dw2 .fo-cmp__name { margin: 2px 0 9px; font-size: 16px; font-weight: bold; line-height: 1.4; }
.dw2 .fo-cmp__name span {
display: block; margin-top: 3px; font-size: 11.5px; font-weight: normal;
color: var(--dw2-ink-sub); line-height: 1.6;
}
/* 価格の枠は商品名のすぐ下に置く。下寄せにすると、下の注記の行数が違うだけで
左右の金額の高さがずれて見比べにくくなるため。 */
.dw2 .fo-cmp__price {
margin: 0 0 6px; padding: 11px 10px; background: var(--dw2-bg);
border-radius: var(--dw2-radius); line-height: 1.3;
}
.dw2 .fo-cmp__price-l {
display: block; margin-bottom: 3px; font-size: 11px; font-weight: bold;
color: var(--dw2-ink-sub); line-height: 1.5;
}
.dw2 .fo-cmp__price strong { font-size: 24px; color: var(--dw2-red); }
.dw2 .fo-cmp__val { display: block; white-space: nowrap; }
.dw2 .fo-cmp__yen { font-size: 12px; margin-left: 1px; }
.dw2 .fo-cmp__from { font-size: 13px; margin-left: 3px; font-weight: bold; }
.dw2 .fo-cmp__pnote { margin: 0 0 9px; font-size: 11.5px; line-height: 1.7; color: var(--dw2-ink-sub); }
.dw2 .fo-cmp__link { margin: auto 0 0; padding-top: 4px; font-size: 13px; }
/* ---- 数字で見る3つの違い ---- */
.dw2 .fo-cmp__hl {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
margin: 16px 10px 0; padding: 0; list-style: none;
}
.dw2 .fo-cmp__hl > li {
margin: 0; padding: 11px 12px 12px; background: #fff;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .fo-cmp__hl > li::before { content: none; }
.dw2 .fo-cmp__hl-k {
margin: 0 0 7px; padding-bottom: 6px; font-size: 13.5px; font-weight: bold;
border-bottom: 1px dashed var(--dw2-line); line-height: 1.4;
}
.dw2 .fo-cmp__hl-v {
display: flex; align-items: center; gap: 7px; margin: 0 0 5px; line-height: 1.4;
}
.dw2 .fo-cmp__hl-v b { font-size: 17px; }
.dw2 .fo-cmp__tag {
flex: 0 0 auto; min-width: 6.4em; text-align: center; padding: 2px 6px; border-radius: 2px;
font-size: 10.5px; font-weight: bold; line-height: 1.6; color: #fff;
}
.dw2 .fo-cmp__tag--pn { background: var(--fo-pn); }
.dw2 .fo-cmp__tag--rn { background: var(--fo-rn); }
.dw2 .fo-cmp__hl-w {
margin: 7px 0 0; font-size: 12px; line-height: 1.7; color: var(--dw2-ink-sub);
}
/* ---- 比較表（PC） ---- */
.dw2 .fo-cmp__tblwrap { margin: 18px 10px 0; }
.dw2 .fo-cmp__tbl {
width: 100%; border-collapse: collapse; background: #fff;
border: 1px solid var(--dw2-line); font-size: 13px; line-height: 1.6;
/* メーカー2列は必ず同じ幅にする（片方だけ広いと見比べにくいため） */
table-layout: fixed;
}
.dw2 .fo-cmp__cap {
caption-side: top; text-align: left; padding: 0 0 7px;
font-size: 13px; font-weight: bold; color: var(--dw2-ink);
}
.dw2 .fo-cmp__tbl th,
.dw2 .fo-cmp__tbl td {
border: 1px solid var(--dw2-line); padding: 9px 11px; vertical-align: top;
overflow-wrap: anywhere;
}
.dw2 .fo-cmp__tbl tbody th,
.dw2 .fo-cmp__tbl thead th:first-child {
width: 11em; background: #f7f8f9; text-align: left; font-size: 12.5px;
}
.dw2 .fo-cmp__th { width: calc((100% - 11em) / 2); }
.dw2 .fo-cmp__g {
display: block; margin-top: 3px; font-size: 10.5px; font-weight: normal;
color: var(--dw2-ink-sub); line-height: 1.5;
}
.dw2 .fo-cmp__th { text-align: center; font-size: 13.5px; line-height: 1.4; color: #fff; }
.dw2 .fo-cmp__th--pn { background: var(--fo-pn); }
.dw2 .fo-cmp__th--rn { background: var(--fo-rn); }
.dw2 .fo-cmp__th span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: normal; }
.dw2 .fo-cmp__th em {
display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px;
background: #fff; font-size: 10.5px; font-style: normal; font-weight: bold; line-height: 1.6;
}
.dw2 .fo-cmp__th--pn em { color: var(--fo-pn); }
.dw2 .fo-cmp__th--rn em { color: var(--fo-rn); }
.dw2 .fo-cmp__tbl td.is-me { background: #fffdf3; }
.dw2 .fo-cmp__tbl td.fo-cmp__td--pn.is-me { box-shadow: inset 3px 0 0 var(--fo-pn); }
.dw2 .fo-cmp__tbl td.fo-cmp__td--rn.is-me { box-shadow: inset 3px 0 0 var(--fo-rn); }
.dw2 .fo-cmp__only {
display: block; margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--dw2-ink-sub);
}
/* ---- 選び分け ---- */
.dw2 .fo-cmp__fits {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 10px 0;
}
.dw2 .fo-cmp__fit {
background: #fff; padding: 13px 14px 14px;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .fo-cmp__fit--panasonic { border-top: 3px solid var(--fo-pn); }
.dw2 .fo-cmp__fit--rinnai { border-top: 3px solid var(--fo-rn); }
.dw2 .fo-cmp__fit--panasonic.is-me { background: var(--fo-pn-bg); }
.dw2 .fo-cmp__fit--rinnai.is-me { background: var(--fo-rn-bg); }
.dw2 .fo-cmp__fit-h {
margin: 0 0 9px; padding-bottom: 8px; font-size: 14.5px; font-weight: bold; line-height: 1.45;
border-bottom: 1px dashed var(--dw2-line);
}
.dw2 .fo-cmp__fit--panasonic .fo-cmp__fit-h { color: var(--fo-pn); }
.dw2 .fo-cmp__fit--rinnai .fo-cmp__fit-h { color: var(--fo-rn); }
.dw2 .fo-cmp__fit-l { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.dw2 .fo-cmp__fit-l li {
position: relative; padding-left: 1.35em; margin-bottom: 6px; line-height: 1.75;
}
.dw2 .fo-cmp__fit-l li::before {
content: "✓"; position: absolute; left: 0; top: 0; font-weight: bold;
}
.dw2 .fo-cmp__fit--panasonic .fo-cmp__fit-l li::before { color: var(--fo-pn); }
.dw2 .fo-cmp__fit--rinnai .fo-cmp__fit-l li::before { color: var(--fo-rn); }
.dw2 .fo-cmp__fit-n {
margin: 10px 0 0; font-size: 12px; line-height: 1.75; color: var(--dw2-ink-sub);
}
/* ---- タブレット ---- */
/* ---- スマートフォン：表を項目ごとのカードに組み替える（横スクロールさせない） ---- */
/* 横並びのボタンで、小さい説明のある・なしが混ざっても文字を上下中央にそろえる
（説明の無いボタンだけ文字が上に寄って見えるのを防ぐ）。 */
.dw2 .dw2-cta .dw2-btn {
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* 図版を並べたあとに本文・小見出しが続くときの間隔（2026-09-19 追加）。 */
.dw2 .dw2-gal + .dw2-why,
.dw2 .dw2-gal + .dw2-warn,
.dw2 .dw2-gal + .dw2-spec,
.dw2 .dw2-gal + .dw2-lead,
.dw2 .dw2-gal + .dw2-h4,
.dw2 .dw2-figs + .dw2-why,
.dw2 .dw2-figs + .dw2-h4,
.dw2 .dw2-fig + .dw2-why,
.dw2 .dw2-fig + .dw2-h4,
.dw2 .dw2-fig + .dw2-lead { margin-top: 20px; }
/* -----------------------------------------------------------------------------
* 交換ケースの一覧（.dw2-caselist）— 2026-09-19 追加
* 「いまお使いの機種ごとに、手順の有無と確認点」を1件ずつ枠で見せる。
* is-ok（専用手順あり）／is-care（要確認）で左の色帯だけ変える。
* 色だけで区別せず、必ず文字のラベル（.dw2-caselist__st）を併記する。
* -------------------------------------------------------------------------- */
.dw2 .dw2-caselist { margin: 14px 10px 0; padding: 0; list-style: none; }
.dw2 .dw2-caselist__i {
margin: 0 0 10px; background: #fff; overflow: hidden;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
border-left: 4px solid var(--dw2-line);
}
.dw2 .dw2-caselist__i::before { content: none; }
.dw2 .dw2-caselist__i:last-child { margin-bottom: 0; }
.dw2 .dw2-caselist__i.is-ok { border-left-color: #2b8a2b; }
.dw2 .dw2-caselist__i.is-care { border-left-color: #d08700; }
.dw2 .dw2-caselist__h {
display: flex; align-items: flex-start; gap: 10px; margin: 0;
padding: 10px 13px; background: var(--dw2-bg);
border-bottom: 1px solid var(--dw2-line);
}
.dw2 .dw2-caselist__ic { flex: 0 0 auto; line-height: 1; color: var(--dw2-accent); }
.dw2 .dw2-caselist__ic svg { width: 20px; height: 20px; display: block; }
.dw2 .dw2-caselist__t {
flex: 1 1 auto; font-size: 14.5px; font-weight: bold; line-height: 1.45;
}
.dw2 .dw2-caselist__t > span {
display: block; margin-top: 3px; font-size: 11.5px; font-weight: normal;
color: var(--dw2-ink-sub); line-height: 1.6;
}
.dw2 .dw2-caselist__st {
flex: 0 0 auto; align-self: center; padding: 3px 10px; border-radius: 999px;
font-size: 11px; font-weight: bold; line-height: 1.6; white-space: nowrap;
}
.dw2 .dw2-caselist__i.is-ok .dw2-caselist__st { background: #eef8ee; color: #1f6b23; border: 1px solid #c9e6c9; }
.dw2 .dw2-caselist__i.is-care .dw2-caselist__st { background: #fff6e5; color: #8a5a00; border: 1px solid #f0d9a8; }
.dw2 .dw2-caselist__b { padding: 11px 13px 12px; }
.dw2 .dw2-caselist__b > p { margin: 0; font-size: 13.5px; line-height: 1.85; }
.dw2 .dw2-caselist__l {
margin: 9px 0 0; padding: 9px 0 0; list-style: none;
border-top: 1px dashed var(--dw2-line); font-size: 13px;
}
.dw2 .dw2-caselist__l li {
position: relative; padding-left: 1.3em; margin-bottom: 5px; line-height: 1.75;
}
.dw2 .dw2-caselist__l li:last-child { margin-bottom: 0; }
.dw2 .dw2-caselist__l li::before {
content: ""; position: absolute; left: 2px; top: .62em;
width: 6px; height: 6px; border-radius: 50%; background: var(--dw2-accent);
}
/* 確認項目の2枠は既存の .dw2-feat を使う。見出しは h4 で出す。 */
.dw2 .dw2-feat__g h4 {
margin: 0; padding: 9px 12px; font-size: 14px; line-height: 1.5; font-weight: bold;
background: var(--dw2-accent); color: #fff;
}
.dw2 .dw2-caselist + .dw2-warn { margin-top: 18px; }
.dw2 .dw2-caselist + .dw2-h4 { margin-top: 22px; }
.dw2 .fo-cmp__tblwrap + .dw2-cost__note { margin-top: 14px; }
.dw2 .dw2-note + .dw2-point,
.dw2 .dw2-why + .dw2-media,
.dw2 .dw2-spec + .dw2-media,
.dw2 .dw2-lead + .dw2-point { margin-top: 18px; }
/* ---------------------------------------------------------------------------
商品一覧を横1列にする（2026-09-20 指示）
「縦3列ではなく横いっぱいにして1列に。画像のサイズや文字サイズは現状を維持して
配置だけ変える」「左にメイン画像。ボーダーなどの色やデザインは変えるな」
「下に合わせろ。下に隙間作るな」「スマホ版は今のままでいい」
1品番＝1行。左に商品画像（保証バッジ・ラベル・品番も左）、右側は上から
仕様表（3行にして右へ伸ばす）→ 機能一覧 → 希望小売価格〜商品詳細ボタン の順に積む。
画像の幅 203px は3列だったときの表示幅そのまま。文字の大きさ・枠線・配色は触らない。
--------------------------------------------------------------------------*/
/* 縦積みのとき（767px以下）は今までと同じ見え方のまま。包んだことも、タグや
ボタンを移したことも見た目に出さない。左の枠は display:contents で無かったことにして、
保証→ラベル→画像→品番→仕様→機能→価格→ボタン の順に order で並べ直す。 */
/* ---------------------------------------------------------------------------
別売品・注意点の一覧を横3列にする（2026-09-21 指示）
「設置できない場所・使えない部材、設置のしかた＞＞横3列にしろ。」
「画像が小さくて見えない。」
既定の .dw2-opts（1列・左に140pxの画像）は変えない。3列で使いたいページだけ
.dw2-opts--3 を足す。3列だと1枠231pxしかないので、画像は上に置いて枠幅いっぱいに
広げる（140px固定より大きく見える）。商品一覧（.dw2-items）と同じ列数・同じ折返し。
--------------------------------------------------------------------------*/
.dw2-opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.dw2-opts--3 > .dw2-opt { grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start;
}
/* 既定は 3:2 に切り出すが、3列で使う説明図は素材の比率がそろっているので
そのまま出す（上下に白帯を作らない）。 */
.dw2-opts--3 > .dw2-opt .dw2-opt__fig img { width: 100%; height: auto; aspect-ratio: auto;
}
/* 見出しの前に置くアイコン。見出しが2行になってもアイコンは1行目の横に置く */
.dw2-opts--3 > .dw2-opt .dw2-opt__t { display: flex; align-items: flex-start; gap: 7px;
}
.dw2-opts--3 > .dw2-opt .dw2-opt__t > svg { margin-top: .28em;
}
.dw2-opts--3 > .dw2-opt .dw2-opt__t .dw2-ic { font-size: 17px; color: var(--dw2-accent);
}
/* スマホでも1列にはしない。商品一覧（.dw2-items）と同じ2列にそろえる
（2026-09-21「他のページ全部2列だろ？」）。 */
/* 評価の分布（★5〜★1）の件数欄。3桁＋「件」で 2.6em だと折り返すので広げる
（2026-09-21 指摘「315件」が2行になっていた）。 */
.dw2-rate__bars li { grid-template-columns: 3.2em 1fr 3.6em;
}
/* .dw2-fit__box に直接置いた説明文。枠にpaddingが無く、ul だけが内側余白を持つ作りなので
段落が枠の端にべったり付いていた（2026-09-21 指摘「ちゃんとpadding入れろや見づらい」）。
ul と同じ左右余白をそろえる。 */
.dw2-fit__box > p { margin: 0; padding: 11px 14px 0; line-height: 1.8;
}
.dw2-fit__box > p + ul { padding-top: 10px;
}
/* 比較表のすぐ下に「向いている方／合う方」の枠が来ると余白ゼロで接触する
（2026-09-21 指摘「くっつけんなよ！！」）。隣接ブロックの最低間隔をそろえる。 */
.dw2 .dw2-cmp__wrap + .dw2-fit,
.dw2 .dw2-cmp__wrap + .dw2-opts,
.dw2 .dw2-spec + .dw2-fit,
.dw2 .dw2-lead + .dw2-opts { margin-top: 18px;
}
/* 棒グラフのラベルに補足（メーカー名など）を添えるとき。
既定は6.6emのnowrapなので、補足がある行だけ幅を広げて2行にする。
補足を入れていない既存ページには影響しない。 */
.dw2-bars__l i { display: block; font-style: normal; font-size: 10.5px;
color: var(--dw2-ink-sub); line-height: 1.4; font-weight: normal;
}
.dw2-bars__l:has(i) { flex-basis: 10em; white-space: normal;
}
/* ---------------------------------------------------------------------------
ラインアップの絞り込み（2026-09-21 指示「コンロみたいにタイプ別で絞り込み機能つけて」）
動きは /dishwasher/js/series.js が担当（data-dw2-lineup / data-dw2-group /
data-dw2-value / data-dw2-filter / data-dw2-count / data-dw2-empty）。
見た目はガスコンロの .gc2-filter をそのまま .dw2 に移したもの。寸法・色は変えない。
--------------------------------------------------------------------------*/
.dw2-filter {
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: var(--dw2-bg-soft); padding: 12px 14px; margin-bottom: 16px;
}
.dw2-filter__row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: nowrap;
}
/* チップは独立したflexコンテナ内で折り返す。行に直接置くと2行目がラベル幅を無視して
左端から始まり、1行目のチップと揃わない。 */
.dw2-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 0%; min-width: 0;
}
.dw2-filter__row + .dw2-filter__row { margin-top: 9px;
}
.dw2-filter__lb { flex: 0 0 7.2em; font-size: 13px; font-weight: bold; color: var(--dw2-ink-sub);
padding-top: 8px; line-height: 1.4;
}
.dw2-filter__count { font-size: 13px; color: var(--dw2-ink-sub); margin: 10px 0 0;
}
.dw2-filter__count b { color: var(--dw2-red); font-size: 16px;
}
.dw2-filter__empty {
display: none; margin: 14px 0 0; padding: 12px; text-align: center;
background: #fff; border: 1px dashed var(--dw2-line); border-radius: var(--dw2-radius);
font-size: 14px; color: var(--dw2-ink-sub);
}
.dw2-filter__empty.is-on { display: block;
}
/* 写真が主役の節で使う2列版（2026-09-21 指示「2列にしろ」）。
既定の .dw2-gal（3列）はそのままなので、既存ページには影響しない。
後ろのメディアクエリに負けないよう、ファイル末尾で ul 付きの指定にしている。 */
.dw2 ul.dw2-gal--2 { grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 図版の文字が小さくて3列だと読めない節で使う2列版（2026-09-21 指示）。
既定の .dw2-opts--3 は変えないので、ほかのページには影響しない。 */
.dw2 div.dw2-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* =============================================================================
* 2列・3列に並ぶとき、カードの中の行をそろえる（2026-09-22 指摘）
*
* 【何が起きていたか】
* 左右のカードで
* ・ラベル（「9kg・標準」は1行／「9kg・コインタイマー内蔵」は2行）
* ・型番の下の説明（「標準タイプ／ネジ接続」は1行／
* 「コインタイマー内蔵タイプ／ガスコード接続」は2行）
* ・タグの数
* で行数が違い、そこから下（仕様表・価格・ボタン）が最大60pxずれていた。
*
* 【直し方】
* ①ラベルは**ピルの大きさを変えずに**、ラベルが占める行の高さだけ2行分にする。
* ピル自体に min-height を当てると、短いラベルまで大きな帯になってしまう
* （食洗機・ガスコンロのシリーズページと見た目が変わってしまう）ので、
* 背景を中の
に移し、外側の は高さを持つだけの枠にする。
* ②型番の下の説明も2行分の高さをとる（こちらは背景が無いので min-height だけ）。
* ③タグの数は商品ごとに違って当然なので、そこは伸び縮みさせ、
* 価格とボタンを**カードの下端にそろえる**。
* カードの外枠の高さはグリッドがそろえてくれるので、ここで決めるのは中だけ。
* ========================================================================== */
/* -----------------------------------------------------------------------------
* 文字だけの保証バッジ（業務用乾太くん）
* 業務用は当社の無料10年保証の対象外。家庭用のバッジ画像
* （guarantee10_list.webp＝「商品・工事とも無料10年保証」）は使えないので、
* メーカーの無料保証があることを文字で出す（2026-09-22 指示）。
* 「無料10年保証」と同じ赤で大きく出すと対象だと誤解されるため、
* 枠線のある落ち着いた見た目にして、重みを一段下げる。
* -------------------------------------------------------------------------- */
.dw2-item__grt--mk {
display: block; width: 100%; padding: 4px 8px;
background: #fff; border: 1px solid var(--dw2-line-str); border-radius: 4px;
color: var(--dw2-ink); font-size: 13px; font-weight: bold;
line-height: 1.4; text-align: center;
}
/* -----------------------------------------------------------------------------
* ラインアップのページ送り（.dw2-pager）
* 品番が多いページ用。[data-dw2-pager] を置いたページだけ出る。
* 中身は series.js が描く。色は --dw2-accent を継承する。
* -------------------------------------------------------------------------- */
.dw2-pager { margin: 14px 0 0; text-align: center;
}
.dw2-pager__st { margin: 0 0 8px; font-size: 12.5px; color: var(--dw2-ink-sub);
}
.dw2-pager__b { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
}
.dw2-pager .dw2-page {
min-width: 38px; padding: 8px 10px; border: 1px solid var(--dw2-line);
border-radius: 2px; background: #fff; color: var(--dw2-ink);
font-size: 13.5px; font-weight: bold; line-height: 1.2; cursor: pointer;
}
.dw2-pager .dw2-page:hover { border-color: var(--dw2-accent); color: var(--dw2-accent);
}
.dw2-pager .dw2-page.is-on {
background: var(--dw2-accent); border-color: var(--dw2-accent); color: #fff; cursor: default;
}
.dw2-pager .dw2-page--nav { min-width: 60px;
}
.dw2-pager .dw2-page[disabled] { opacity: .4; cursor: default; border-color: var(--dw2-line); color: var(--dw2-ink-sub);
}
.dw2-pager .dw2-page__gap { display: inline-flex; align-items: flex-end; padding: 0 2px; color: var(--dw2-ink-sub);
}
.dw2-pager--top { margin: 0 0 12px;
}
/* -----------------------------------------------------------------------------
* 関連ページ（.dw2-rel）を横3列のカードにする（2026-09-23 指示）
* 1列に積むと縦に長く、リンクの下線も読みにくかった。
* 3列のカードにして、右端の「›」で移動先だと分かるようにする。
* スマホは1列に戻す。
* -------------------------------------------------------------------------- */
.dw2-rel {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
margin: 0 10px 14px; padding: 0; list-style: none;
}
.dw2-rel li {
position: relative; display: block; height: 100%;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
background: #fff; padding: 12px 32px 11px 13px; margin: 0; list-style: none;
}
.dw2-rel li + li { margin-top: 0; }
.dw2-rel li:hover { border-color: var(--dw2-accent); background: var(--dw2-accent-bg); }
.dw2-rel li::before { content: none; }
.dw2-rel li::after {
content: ""; position: absolute; right: 13px; top: 50%;
width: 7px; height: 7px; margin-top: -4px;
border-top: 2px solid var(--dw2-accent); border-right: 2px solid var(--dw2-accent);
transform: rotate(45deg);
}
.dw2-rel__t {
display: block; font-size: 14px; font-weight: bold; line-height: 1.5;
color: var(--dw2-accent); text-decoration: none;
}
.dw2-rel li:hover .dw2-rel__t { text-decoration: underline; text-underline-offset: 2px; }
.dw2-rel__d { display: block; margin-top: 3px; font-size: 12px; line-height: 1.65; color: var(--dw2-ink-sub); }
/* =============================================================================
* ★画面幅のきまり（@media）は**このファイルのいちばん後ろ**にまとめる。
* 部品の指定より前に置くと優先度が同じなので<あとに書いた部品の指定>が勝ち、
* スマホのきまりが黙って効かなくなる。
* 実際、関連商品の見出し（.dw2-rel__t）の字の大きさが効いていなかった。
* **部品を足すときは、きまりをこの下へ書く。上には書かない。**
* ========================================================================== */
@media screen and (min-width: 960px) {
.dw2-sec[id] { scroll-margin-top: 182px;
}
}
@media screen and (max-width: 480px) {
.dw2-sec[id] { scroll-margin-top: 122px;
}
}
@media screen and (min-width: 641px) {
.dw2-vs.dw2-vs--3 { grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 641px) {
.dw2-vs:has(> .dw2-vs__card:nth-child(3):last-child):has(> .dw2-vs__card > img) {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 641px) {
.dw2-cmp__wrap.scroll-hint,
.dw2-cmp__wrap { overflow-x: visible;
}
.dw2-cmp { width: 100%;
}
.dw2-cmp tbody th { white-space: normal;
}
.dw2-cmp tbody th,
.dw2-cmp thead th:first-child { min-width: 170px;
}
.dw2-cmp th,
.dw2-cmp td { overflow-wrap: anywhere; word-break: normal;
}
.dw2-cmp__hint { display: none;
}
.dw2-cmp__wrap .scroll-hint-icon-wrap { display: none;
}
.dw2-cmp__wrap.is-scrollable { padding-top: 0;
}
}
@media screen and (min-width: 760px) {
.dw2-pick { grid-template-columns: 1fr 1fr; gap: 12px;
}
}
@media screen and (min-width: 960px) {
.dw2-pick:has(> .dw2-pick__i:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 640px) {
.dw2-pick { margin: 12px 8px 0; gap: 8px;
}
.dw2-pick__t { font-size: 13.5px; padding: 7px 10px;
}
.dw2-pick__i > p { font-size: 13px; padding: 9px 10px 11px; line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.dw2-media, .dw2-media--rev { grid-template-columns: 1fr; gap: 12px;
}
.dw2-intro { grid-template-columns: 1fr; gap: 12px;
}
.dw2-toc ol { grid-template-columns: repeat(2, 1fr);
}
.dw2-intro__lead { font-size: 14px; padding: 11px 12px 12px;
}
.dw2-step__lead { font-size: 13.5px; padding: 11px 12px 12px; margin-bottom: 13px; margin: 3% 0% !important;
}
.dw2-intro__more p { font-size: 13.5px;
}
.dw2-media--rev .dw2-media__fig { order: 0;
}
/* スマホは写真を半分の幅にして中央に置き、説明文はその下（2026-10-04 指示。画像が大きすぎた） */
.dw2-media__fig { width: 50%; margin: 0 auto;
}
.dw2-media__fig figcaption { text-align: center;
}
.dw2-spec > div { grid-template-columns: 11em 1fr;
}
}
@media only screen and (max-width: 640px) {
.dw2 { line-height: 1.85;
}
.dw2 p { font-size: 13px; margin: 3%;
}
.dw2-sec { margin-bottom: 34px;
}
.dw2-sec.is-jumped > h2.heading_01 { padding-right: 84px;
}
.dw2-backtop { right: 10px; font-size: 11.5px; padding: 4px 10px;
}
.dw2-hero { border-radius: var(--dw2-radius);
}
.dw2-hero__new { font-size: 12px; padding: 4px 11px; letter-spacing: .02em;
}
.dw2-hero__series::after { display: none;
}
.dw2-hero__flag { top: auto; top: 10px;
}
.dw2-hero__body { padding: 14px;
}
.dw2-hero__name { font-size: 19px;
}
.dw2-pricebar__val strong { font-size: 27px;
}
.dw2-usp { grid-template-columns: 1fr; gap: 6px;
}
.dw2-hero__name { font-size: 21px;
}
.dw2-hero__sub { font-size: 13.5px;
}
.dw2-pricebar { padding: 12px 13px 13px;
}
.dw2-pricebar__val strong { font-size: 34px;
}
.dw2-pricebar__val .u { font-size: 16px;
}
.dw2-pricebar__off { font-size: 12px; margin-left: 0; margin-top: 4px;
}
.dw2-pricebar__inc li { font-size: 11px;
}
.dw2 img.dw2-cmp__thumb { width: 96px; margin-bottom: 4px;
}
.dw2-cmp thead th:not(:first-child) { min-width: 110px;
}
.dw2-usp li { display: block; text-align: left; padding: 0;
}
.dw2-usp__a { padding: 11px 10px 11px 12px; column-gap: 10px;
}
.dw2-usp span { font-size: 12.5px;
}
.dw2-usp b { font-size: 18px;
}
.dw2-usp span { margin-top: 2px; font-size: 12px;
}
.dw2-cta { grid-template-columns: 1fr;
}
.dw2-toc { margin-bottom: 26px;
}
.dw2-toc ol { grid-template-columns: repeat(2, 1fr); gap: 1px 4px; padding: 6px;
}
.dw2-toc__h { font-size: 13.5px; padding: 9px 12px;
}
.dw2-toc a { font-size: 12px; padding: 7px 6px 7px 6px; gap: 6px;
}
.dw2-toc a::before { width: 18px; height: 18px; line-height: 18px; font-size: 10px;
}
.dw2-toc a::after { font-size: 13px; padding-left: 2px;
}
.dw2-fit { grid-template-columns: 1fr;
}
.dw2-fit__box ul { grid-template-columns: repeat(2, 1fr);
}
.dw2-facts { grid-template-columns: 1fr 1fr; gap: 8px;
}
.dw2-facts li { grid-template-columns: 36px 1fr; column-gap: 8px; padding: 10px 10px 10px;
}
.dw2-facts__i { width: 36px; height: 36px; font-size: 20px;
}
.dw2-facts__v { font-size: 16px;
}
.dw2-facts__k { font-size: 10px;
}
.dw2-facts__n { font-size: 11px; padding-top: 6px;
}
.dw2-vs{ grid-template-columns: 1fr;
}
.dw2-vs dt { flex: 0 0 6.8em;
}
.dw2-panels { grid-template-columns: 1fr; gap: 14px;
}
.dw2-panel__h { padding: 10px 14px 10px 30px;
}
.dw2-panel__h b { font-size: 15px;
}
.dw2-panel__list dt { font-size: 14px;
}
.dw2-panel__list dd { font-size: 13px;
}
.dw2-point p { font-size: 13px;
}
.dw2-fit__box ul { grid-template-columns: 1fr; gap: 8px; padding: 10px 11px;
}
.dw2-fit__box li { font-size: 13px; padding: 9px 11px 10px 2.4em;
}
.dw2-fit__box li strong { font-size: 13.5px;
}
.dw2-flags > li { grid-template-columns: 1fr;
}
.dw2-flags b { border-bottom: 1px solid var(--dw2-line);
}
.dw2-spec > div { grid-template-columns: 1fr;
}
.dw2-spec dt { border-bottom: 1px solid var(--dw2-line);
}
.dw2-chip { font-size: 13px; padding: 8px 14px;
}
.dw2-items { grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.dw2-item { padding: 8px; border-width: 1px;
}
.dw2-item__badges { gap: 4px; margin-bottom: 6px;
}
.dw2-item__grt { font-size: 16px; width: 100%; padding: 2px 0;
}
.dw2-item__label { font-size: 12px; padding: 4px 12px; margin-bottom: 7px;
}
.dw2-item__figure { display: grid; grid-template-columns: 1fr; margin-bottom: 8px;
}
.dw2-item__swatch { width: 30%; max-width: 56px; right: 3px; bottom: 3px; border-width: 1px;
}
.dw2-item__sku { font-size: 13.5px; margin-bottom: 5px; overflow-wrap: anywhere;
}
.dw2-item__sku span { font-size: 10px;
}
.dw2-item__spec { font-size: 11.5px; margin-bottom: 7px;
}
.dw2-item__spec > div { flex-direction: column; gap: 0; padding: 4px 6px;
}
.dw2-item__spec dt { flex: none; font-size: 10px;
}
.dw2-item__spec dd { line-height: 1.5;
}
.dw2-tags { gap: 3px; margin-bottom: 7px;
}
.dw2-tags li { font-size: 10px; padding: 2px 5px;
}
.dw2-item__prices { font-size: 12.5px; margin-bottom: 7px;
}
.dw2-item__prices > div { flex-direction: column; align-items: stretch; gap: 0; padding: 3px 0;
}
.dw2-item__prices dt { font-size: 10.5px;
}
.dw2-item__prices dd { text-align: right; font-size: 13.5px;
}
.dw2-item__off { font-size: 10px; padding: 1px 4px; margin-right: 5px; margin-left: 0;
}
.dw2-item__total { padding: 6px 8px; margin-bottom: 8px;
}
.dw2-item__total b { font-size: 10px;
}
.dw2-item__total strong { font-size: 21px;
}
.dw2-item__total .yen { font-size: 11px;
}
.dw2-item__askn { font-size: 10px;
}
.dw2-item__acts { grid-template-columns: 1fr; gap: 5px;
}
.dw2-item__acts .dw2-btn { padding: 9px 6px; font-size: 12.5px;
}
.dw2-item__acts .dw2-btn small { font-size: 9.5px;
}
.dw2-old__b { padding: 0 8px 12px;
}
.dw2-promise { margin: 12px 8px;
}
.dw2-promise__h { font-size: 13.5px; padding: 7px 10px;
}
.dw2-promise__l { padding: 10px 11px;
}
.dw2-promise__l li { font-size: 12.5px; padding-left: 21px; margin: 12px; margin
}
.dw2-cmp__hint { display: none;
}
.dw2-cmp { font-size: 11.5px; min-width: 540px;
}
.dw2-cmp th, .dw2-cmp td { padding: 6px 6px;
}
.dw2-cmp thead th { font-size: 12px;
}
.dw2-cmp tbody th { font-size: 11.5px; min-width: 118px; white-space: normal;
}
.dw2-cmp__price b { font-size: 14px;
}
.dw2-pc { grid-template-columns: 1fr; margin: 0 8px;
}
.dw2-pc__col dt { font-size: 12.5px;
}
.dw2-pc__col dd { font-size: 12px;
}
.dw2-kpi { grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 8px 12px;
}
.dw2-kpi li { padding: 10px 6px 9px;
}
.dw2-kpi__i { font-size: 22px; margin-bottom: 4px;
}
.dw2-kpi__v b { font-size: 25px;
}
.dw2-kpi__v b.is-sm { font-size: 15px;
}
.dw2-kpi__l { font-size: 11px;
}
.dw2-idata { grid-template-columns: 1fr; margin: 0 8px;
}
.dw2-idata__top b { font-size: 24px;
}
.dw2-bars__l { flex: 0 0 5.6em; font-size: 11.5px;
}
.dw2-bars__v { flex: 0 0 5.2em;
}
.dw2-pack { grid-template-columns: 1fr; gap: 6px;
}
.dw2-pack__op {
position: relative; width: 100%; height: 40px; border-radius: 0;
background: none; color: var(--dw2-accent);
font-size: 0 !important;
}
.dw2-pack__op::before {
content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
background: var(--dw2-line);
}
.dw2-pack__op::after {
content: "＋"; position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--dw2-accent); color: #fff;
font-size: 23px; font-weight: bold; line-height: 1;
}
.dw2-pack__g { padding: 11px 11px 12px; gap: 8px;
}
.dw2-pack__b.is-pack .dw2-pack__g { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px;
}
.dw2-pack__g li { padding: 10px 5px 9px;
}
.dw2-pack__g img { width: 42px; height: 42px; margin-bottom: 6px;
}
.dw2-pack__b.is-after .dw2-pack__g img { width: 56px; height: 63px;
}
.dw2-pack__g b, .dw2-pack__g span { font-size: 11.5px;
}
.dw2-pack__total { font-size: 12.5px; padding: 9px 10px;
}
.dw2-why { margin: 0 8px 4px;
}
.dw2-why dt { font-size: 13px;
}
.dw2-why dd { font-size: 12.5px;
}
.dw2-kj { font-size: 11.5px; min-width: 0;
}
.dw2-kj th, .dw2-kj td { padding: 5px 5px;
}
.dw2-kj td.is-p { font-size: 13.5px;
}
.dw2-kj tbody th { white-space: normal;
}
.dw2-rel { margin: 0 8px 12px;
}
.dw2-rel__t { font-size: 13px;
}
.dw2-cases { grid-template-columns: 1fr;
}
.dw2-morelink .dw2-btn { min-width: 0; width: 100%;
}
.dw2-rate { grid-template-columns: 1fr; gap: 12px; padding: 14px;
}
.dw2-opt { grid-template-columns: 100px 1fr; gap: 11px; padding: 11px;
}
.dw2-opt.dw2-opt--noimg { grid-template-columns: 1fr;
}
.dw2-faq__i > summary { font-size: 14.5px; padding: 12px 36px 12px 42px;
}
.dw2-faq__a { padding: 0 14px 14px 42px;
}
.dw2-faq__a p { font-size: 14.5px;
}
}
@media only screen and (max-width: 359px) {
.dw2-item__acts { grid-template-columns: 1fr;
}
.dw2-opt { grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.dw2 * { transition: none !important;
}
}
@media screen and (max-width: 767px) {
.dw2-fhl { grid-template-columns: 1fr;
}
.dw2-fhl__i { width: 36px; height: 36px; font-size: 19px;
}
.dw2-fhl__k { font-size: 14px;
}
.dw2-fl__b { white-space: normal;
}
}
@media screen and (max-width: 767px) {
.dw2-intro__more p { margin-bottom: 15px; line-height: 1.95;
}
.dw2-intro__more { padding-top: 13px;
}
}
@media screen and (max-width: 767px) {
.dw2-vs__list { font-size: 12.5px; }
.dw2-vs__list li { padding-left: 1.8em; margin-bottom: 6px; }
.dw2-vs__list li::before { width: 16px; height: 16px; line-height: 16px; font-size: 9.5px; }
}
@media screen and (max-width: 640px) {
.dw2-item__sku > span { display: flex; margin-left: 0; margin-top: 4px; }
}
@media (min-width: 768px) {
.dw2-cmp th[scope="row"] { min-width: 9.5em; }
}
@media screen and (max-width: 640px) {
.dw2 .dw2-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 8px 0; }
.dw2 .dw2-gal figcaption { font-size: 12px; }
}
@media screen and (max-width: 359px) {
.dw2 .dw2-gal { grid-template-columns: 1fr; }
}
@media screen and (max-width: 480px) {
.dw2 .dw2-nowrap { white-space: normal; overflow-wrap: anywhere; }
}
@media screen and (max-width: 767px) {
.dw2 .fo-cmp__hl { grid-template-columns: 1fr; }
.dw2 .fo-cmp__tbl tbody th,
.dw2 .fo-cmp__tbl thead th:first-child { width: 8.5em; }
.dw2 .fo-cmp__th { width: calc((100% - 8.5em) / 2); }
}
@media screen and (max-width: 640px) {
.dw2 .fo-cmp__heads { grid-template-columns: 1fr; gap: 10px; margin: 12px 8px 0; }
.dw2 .fo-cmp__fig { max-width: 210px; }
.dw2 .fo-cmp__hl { margin: 14px 8px 0; gap: 8px; }
.dw2 .fo-cmp__fits { grid-template-columns: 1fr; margin: 14px 8px 0; gap: 10px; }
.dw2 .fo-cmp__tblwrap { margin: 16px 8px 0; }
.dw2 .fo-cmp__tbl { border: 0; font-size: 13px; table-layout: auto; }
.dw2 .fo-cmp__tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dw2 .fo-cmp__tbl tbody,
.dw2 .fo-cmp__tbl tr,
.dw2 .fo-cmp__tbl th,
.dw2 .fo-cmp__tbl td { display: block; width: auto; }
.dw2 .fo-cmp__tbl tr {
margin-bottom: 10px; background: #fff; overflow: hidden;
border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
}
.dw2 .fo-cmp__tbl tbody th,
.dw2 .fo-cmp__tbl thead th:first-child {
width: auto; border: 0; border-bottom: 1px solid var(--dw2-line);
padding: 8px 11px; font-size: 13.5px; background: #eef1f4;
}
.dw2 .fo-cmp__g { display: inline; margin-left: 7px; }
.dw2 .fo-cmp__tbl td { border: 0; padding: 9px 11px 10px 11px; }
.dw2 .fo-cmp__tbl td + td { border-top: 1px dotted var(--dw2-line); }
.dw2 .fo-cmp__tbl td::before {
content: attr(data-h); display: block; margin-bottom: 4px;
font-size: 11px; font-weight: bold; line-height: 1.5;
}
.dw2 .fo-cmp__tbl td.fo-cmp__td--pn::before { color: var(--fo-pn); }
.dw2 .fo-cmp__tbl td.fo-cmp__td--rn::before { color: var(--fo-rn); }
.dw2 .fo-cmp__tbl td.fo-cmp__td--pn.is-me { box-shadow: inset 4px 0 0 var(--fo-pn); }
.dw2 .fo-cmp__tbl td.fo-cmp__td--rn.is-me { box-shadow: inset 4px 0 0 var(--fo-rn); }
.dw2 .fo-cmp__price strong { font-size: 22px; }
}
@media screen and (max-width: 359px) {
.dw2 .fo-cmp__hl-v { flex-wrap: wrap; gap: 4px; }
}
@media screen and (max-width: 480px) {
.dw2 .dw2-caselist { margin: 12px 8px 0; }
.dw2 .dw2-caselist__h { flex-wrap: wrap; gap: 8px; }
.dw2 .dw2-caselist__t { flex: 1 1 100%; order: 2; }
.dw2 .dw2-caselist__ic { order: 1; }
.dw2 .dw2-caselist__st { order: 1; margin-left: auto; }
}
@media screen and (min-width: 768px) {
.dw2-items { grid-template-columns: 1fr;
}
.dw2-item { display: grid; grid-template-columns: 203px minmax(0, 1fr);
grid-template-rows: 1fr auto auto; column-gap: 14px;
}
/* 左＝保証バッジ・ラベル・商品画像・品番（品番は画像のすぐ下） */
.dw2-item__l { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; min-width: 0;
}
.dw2-item__l > :last-child { margin-bottom: 0;
}
.dw2-item__l .dw2-item__sku { margin: 8px 0 0;
}
.dw2-item__l .dw2-item__acts { margin: 9px 0 0;
}
/* 右上＝仕様表。縦に長い1列にせず、3行にして右へ伸ばす（7項目なら3列目に送る） */
.dw2-item__m { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0;
}
.dw2-item__m .dw2-item__spec { flex: 1 1 auto; margin: 0; display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.dw2-item__m .dw2-item__spec > div { align-items: center;
}
.dw2-item__m .dw2-item__spec > div:nth-child(3n+1) { border-top: 0;
}
.dw2-item__m .dw2-item__spec > div:nth-child(n+4) { border-left: 1px solid #e6e6e6;
}
/* 仕様が7項目以上あるページは、3行だと3列になって1列が細くなりすぎる。
2列を保つために4行にする（項目数はページごとに違う）。 */
.dw2-item__m .dw2-item__spec:has(> div:nth-child(7)) { grid-template-rows: repeat(4, minmax(0, 1fr));
}
.dw2-item__m .dw2-item__spec:has(> div:nth-child(7)) > div { border-top: 1px solid #eee; border-left: 0;
}
.dw2-item__m .dw2-item__spec:has(> div:nth-child(7)) > div:nth-child(4n+1) { border-top: 0;
}
.dw2-item__m .dw2-item__spec:has(> div:nth-child(7)) > div:nth-child(n+5) { border-left: 1px solid #e6e6e6;
}
/* 項目数が奇数だと最後のマスが空いて、枠線が途中で切れて見える
（2026-09-20 指摘：操作部の下だけ右の枠線が無い）。最後の項目を2行分にして埋める。 */
.dw2-item__m .dw2-item__spec > div:last-child:nth-child(odd) { grid-row: span 2;
}
/* その下＝機能一覧 */
.dw2-item > .dw2-tags { grid-column: 2; grid-row: 2; margin: 9px 0 0; flex: 0 0 auto;
}
/* さらにその下＝希望小売価格・ガスペック本体価格・まるごと工事パック付の合計金額。
商品詳細ボタンは左の列（品番の下）に移したので、ここは1列で積む。 */
.dw2-item__r { grid-column: 2; grid-row: 3; margin-top: 9px; display: block;
}
.dw2-item__r .dw2-item__prices { margin: 0 0 8px;
}
/* 合計金額の枠は「ガスペック本体価格」の文字の位置から右端まで。
6px は上の価格行の内側の余白ぶん（文字の頭をそろえるため）。 */
.dw2-item__r .dw2-item__total { margin: 0 0 0 6px;
}
}
@media screen and (max-width: 767px) {
.dw2-item__l { display: contents;
}
.dw2-item__l > * { order: 1;
}
.dw2-item__m { display: flex; flex-direction: column; flex: 1 1 auto; order: 2;
}
.dw2-item > .dw2-tags { order: 3;
}
.dw2-item__r { display: flex; flex-direction: column; order: 4;
}
.dw2-item__l .dw2-item__acts { order: 5;
}
.dw2-item:has(> .dw2-tags) .dw2-item__m { flex: 0 0 auto;
}
}
@media screen and (max-width: 767px) {
.dw2-opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.dw2-opts--3 > .dw2-opt { padding: 8px;
}
}
@media screen and (max-width: 767px) {
.dw2-bars__l:has(i) { flex-basis: 8.4em;
}
}
@media screen and (max-width: 767px) {
.dw2-filter { padding: 11px 12px;
}
.dw2-filter__row { flex-wrap: wrap;
}
.dw2-filter__lb { flex: 0 0 100%; margin-bottom: 2px; padding-top: 0;
}
.dw2-filter__chips { flex: 0 0 100%;
}
}
@media screen and (max-width: 767px) {
/* 左端の「項目」列が細すぎて1文字ずつ折り返り、行がむだに縦長になっていた
（2026-09-21 指摘「左の列縦に長くしすぎだろ」）。表は横スクロールするので
見出し列に最低幅を持たせ、補足は小さくして行数を減らす。 */
.dw2-cmp th[scope="row"] { min-width: 118px;
}
.dw2-cmp tbody th span { display: block; font-size: 9.5px; line-height: 1.4;
}
}
@media screen and (max-width: 767px) {
.dw2 ul.dw2-gal--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
}
@media screen and (max-width: 767px) {
.dw2 div.dw2-opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
}
@media only screen and (max-width: 767px) {
.dw2-item__label {
background: none; padding: 0; width: auto; max-width: 100%;
display: flex; align-items: center; justify-content: center;
}
.dw2-item__label > span {
display: inline-block; max-width: 100%;
background: var(--dw2-item-label, var(--dw2-accent)); color: #fff;
border-radius: 999px; text-align: center;
}
/* 価格とボタンはカードの下端にそろえる（間のタグの行数が違っても動かない） */
.dw2-item__r { margin-top: auto; }
}
@media only screen and (max-width: 640px) {
/* 2列のとき。ピルの内側の余白は元のまま（4px 12px）、行の高さだけ2行分。 */
/* .dw2 p { margin: 3% } が
にも当たるので、
左右の余白を打ち消しておく（幅が3%ぶん狭くなるのを防ぐ）。 */
.dw2 p.dw2-item__label { margin-left: 0; margin-right: 0; }
.dw2-item__label {}
.dw2-item__label > span { padding: 4px 12px; }
.dw2-item__sku span { min-height: calc(1.4em * 2); }
}
@media only screen and (min-width: 641px) and (max-width: 767px) {
/* 3列のとき。ピルの内側の余白はPCと同じ（5px 16px）。 */
.dw2-item__label { min-height: calc(1.45em * 2 + 10px); }
.dw2-item__label > span { padding: 5px 16px; }
.dw2-item__sku span { min-height: calc(1.4em * 2); }
}
@media only screen and (max-width: 640px) {
.dw2-item__grt--mk { font-size: 11.5px; padding: 3px 4px; }
}
@media screen and (max-width: 767px) {
.dw2-pager { margin: 12px 8px 0;
}
/* ★一覧の上に出すページ送りは、下に隙間を空ける。
すぐ上の .dw2-pager（スマホ用）が margin-bottom:0 で、
あとに書いてあるぶん .dw2-pager--top の 0 0 12px に勝ってしまい、
商品のカードとページ送りがくっついていた（2026-10-03 ご指摘）。 */
.dw2-pager--top { margin: 0 8px 14px; }
.dw2-pager__st { font-size: 11.5px;
}
.dw2-pager .dw2-page { min-width: 34px; padding: 7px 8px; font-size: 12.5px;
}
.dw2-pager .dw2-page--nav { min-width: 52px;
}
}
@media screen and (max-width: 767px) {
.dw2-rel { grid-template-columns: 1fr; gap: 8px; margin: 0 8px 12px; }
.dw2-rel li { padding: 11px 28px 10px 12px; }
.dw2-rel__t { font-size: 13.5px; }
}