@charset "utf-8";
/* =============================================================================
 * ビルトイン食洗機 シリーズページ 共通コンポーネント  (.dw2-*)
 *   /dishwasher/css/series.css
 *
 *  対象: /dishwasher/<メーカー>/<シリーズ>/index.html
 *        （第1号: パナソニック M9 Plus。以降 B1／C1／R9／リンナイ各シリーズで共用）
 *
 *  【使い方】
 *    1. このファイルを読み込む
 *         <link href="/dishwasher/css/series.css?v=<filemtime>" rel="stylesheet">
 *    2. そのあとにメーカー共通CSS（例 /dishwasher/panasonic/css/panasonic.css）
 *    3. 最後にシリーズ固有CSS（例 css/m9plus.css）
 *    4. コンテンツを <div class="dw2 <maker> <series>"> で包む
 *
 *  【設計ルール】
 *   ・すべて .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;
}
@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;
}
}
.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;
}
.dw2-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px;
}
.dw2-usp li {
	border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius);
	padding: 0; text-align: center; background: #fff;
	border-top: 3px solid var(--dw2-accent);
	overflow: hidden;
}
.dw2-usp__a {
	display: block; position: relative;
	padding: 11px 22px 12px 8px;
	text-decoration: none; color: inherit; transition: background .2s;
}
.dw2-usp__a::after {
	content: "›"; position: absolute; right: 8px; top: 50%;
	transform: translateY(-50%);
	font-size: 16px; font-weight: bold; color: var(--dw2-ink-sub); line-height: 1;
}
.dw2-usp__a:hover, .dw2-usp__a:focus-visible { background: var(--dw2-accent-bg); text-decoration: none;
}
.dw2-usp li.is-a .dw2-usp__a:hover { background: #eef8ee;
}
.dw2-usp li.is-c .dw2-usp__a:hover { background: #fff6e8;
}
.dw2-usp li.is-a { border-top-color: #46a049;
}
.dw2-usp li.is-b { border-top-color: var(--dw2-accent);
}
.dw2-usp li.is-c { border-top-color: #e0870f;
}
.dw2-usp b { display: block; font-size: 19px; line-height: 1.25; color: var(--dw2-ink);
}
.dw2-usp b em { font-style: normal; font-size: 13px; margin-left: 1px;
}
.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 span { display: block; font-size: 11.5px; color: var(--dw2-ink-sub); line-height: 1.5; margin-top: 4px;
}
.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;
}
.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;
}
@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);
}
}
.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 9px;
	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;
}
.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: 100px; 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; border-radius: 50%;
}
.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;
}
@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 tbody th span { font-size: 10.5px; font-weight: normal; color: var(--dw2-ink-sub);
}
.dw2-cmp td.is-me { background: #f2f8fd; font-weight: bold;
}
.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);
}
@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;
}
}
.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;
}
.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;
}
@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;
}
.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 { display: flex; align-items: baseline; gap: 8px; padding: 10px 26px 10px 12px;
}
.dw2-usp b { font-size: 16px;
}
.dw2-usp span { margin-top: 0; 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: 11px; 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;
}
}
.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;
}
@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;
}
}
.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%);
}
@media screen and (max-width: 767px) {
.dw2-intro__more p { margin-bottom: 15px; line-height: 1.95;
}
.dw2-intro__more { padding-top: 13px;
}
}
.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; }
@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; }
}

/* 食洗機の商品写真はこのサイトでは正方形（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行に収まらないので、目印を次の行に落とす */
@media screen and (max-width: 640px) {
	.dw2-item__sku > span { display: flex; margin-left: 0; margin-top: 4px; }
}
.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列目（項目名）は食洗機のほうが語が長い */
@media (min-width: 768px) {
.dw2-cmp th[scope="row"] { min-width: 9.5em; }
}

/* 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; }