@charset "utf-8";
/* =============================================================================
 * ドアパネル・ドア面材ページ 固有CSS
 *   /dishwasher/panasonic/panel/css/panel.css
 *   共通は /dishwasher/css/series.css（.dw2-*）と
 *         /dishwasher/panasonic/css/panasonic.css。
 *   色（--dw2-accent）は食洗機共通の1色を使う（ここでは上書きしない）。
 * ========================================================================== */

/* ---- 必要性のラベル（色だけで伝えず、必ず文字を併記する） ---- */
.dw2 .pnl-need {
	display: inline-block; margin-left: 6px; padding: 1px 8px 2px; border-radius: 10px;
	font-size: 12px; font-weight: bold; line-height: 1.6; white-space: nowrap; border: 1px solid;
}
.dw2 .pnl-need.is-opt { color: #1c6b2e; background: #eef8ef; border-color: #bfe0c4; }
.dw2 .pnl-need.is-req { color: #a5401a; background: #fdf1ea; border-color: #f0cdb8; }
.dw2 .pnl-need.is-non { color: #555;    background: #f2f2f2; border-color: #ddd; }
.dw2 .pnl-yes { color: #1c6b2e; }
.dw2 .pnl-no  { color: #b42318; }

/* 判定表は1列目を広めに（前面タイプ名が折り返さないように） */
@media screen and (min-width: 768px) {
	.dw2 .pnl-quick th[scope="row"] { min-width: 11em; }
	.dw2 .pnl-models th[scope="row"] { min-width: 8em; }
}

/* ファーストビュー直下の注意 */
.dw2 .dw2-warn.pnl-warn--lead { margin: 14px 0 20px; border-width: 2px; }
.dw2 .dw2-warn.pnl-warn--lead > b { font-size: 15px; line-height: 1.5; }

/* ---- 4つの前面タイプの図解（画像を使わずCSSで描く） ---- */
.dw2 .pnl-figs { display: grid; gap: 14px; margin: 4px 0 18px; }
.dw2 .pnl-figs__i {
	display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: start;
	border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; padding: 13px;
}
.dw2 .pnl-fig {
	position: relative; height: 118px; border-radius: 3px; background: #f4f5f7;
	border: 1px solid #e0e3e8; overflow: hidden;
}
.dw2 .pnl-fig__op {
	position: absolute; left: 8px; right: 8px; top: 8px; height: 16px; border-radius: 2px;
	background: #cdd3db; color: #555; font-size: 9.5px; line-height: 16px; text-align: center; letter-spacing: .04em;
}
.dw2 .pnl-fig__body {
	position: absolute; left: 8px; right: 8px; top: 30px; bottom: 8px; border-radius: 2px;
	background: #dfe3e8; color: #666; font-size: 10.5px; line-height: 1.3; text-align: center;
	display: flex; align-items: center; justify-content: center;
}
.dw2 .pnl-fig__front {
	position: absolute; left: 8px; right: 8px; bottom: 8px; border-radius: 2px;
	color: #fff; font-size: 10px; line-height: 1.25; text-align: center; padding: 3px 2px;
	background: var(--dw2-accent);
}
/* ドアパネル型＝薄いパネルを前面に重ねる */
.dw2 .pnl-fig--panel   .pnl-fig__front { height: 30px; display: flex; align-items: center; justify-content: center; opacity: .92; }
/* ドア面材型＝厚い面材 */
.dw2 .pnl-fig--zaimoku .pnl-fig__front { height: 46px; display: flex; align-items: center; justify-content: center; }
/* ドアフル面材型＝操作部まで覆う（上端まで伸ばす） */
.dw2 .pnl-fig--full    .pnl-fig__front { top: 8px; height: auto; display: flex; align-items: center; justify-content: center; }
/* 一体型＝前面が本体と一体（別部材なし） */
.dw2 .pnl-fig--ittai   .pnl-fig__front { height: 46px; display: flex; align-items: center; justify-content: center; background: #9aa3ad; }
.dw2 .pnl-figs__t { margin: 0 0 6px; font-size: 14.5px; font-weight: bold; color: var(--dw2-accent); }
.dw2 .pnl-figs__d { margin: 0 0 6px; font-size: 13px; line-height: 1.7; }
.dw2 .pnl-figs__l { margin: 0 0 6px; padding: 0; list-style: none; }
.dw2 .pnl-figs__l li { position: relative; padding-left: 13px; font-size: 12.5px; line-height: 1.7; color: #444; }
.dw2 .pnl-figs__l li::before { content: "・"; position: absolute; left: 0; color: var(--dw2-accent); }
.dw2 .pnl-figs__w { margin: 0; font-size: 12.5px; font-weight: bold; }

/* ---- 品番の確認位置（CSSで描く簡易図） ---- */
.dw2 .pnl-where { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: center; margin: 4px 0 6px; }
.dw2 .pnl-where__fig {
	position: relative; height: 150px; border: 1px solid #e0e3e8; border-radius: var(--dw2-radius);
	background: linear-gradient(#f7f8f9 0 34%, #eceff3 34% 100%);
}
.dw2 .pnl-where__unit {
	position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
	font-size: 11px; color: #666;
}
.dw2 .pnl-where__tag {
	position: absolute; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; font-weight: bold;
	color: #fff; background: var(--dw2-accent); white-space: nowrap;
}
.dw2 .pnl-where__tag--side   { left: 12px; top: 56px; }
.dw2 .pnl-where__tag--bottom { right: 12px; bottom: 16px; }
.dw2 .pnl-where__b p { margin: 0 0 6px; font-size: 13px; line-height: 1.75; }

/* ---- 部材ブロック ---- */
.dw2 .pnl-part { border: 1px solid var(--dw2-line); border-radius: var(--dw2-radius); background: #fff; margin: 0 0 14px; overflow: hidden; }
.dw2 .pnl-part__head {
	display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between;
	padding: 11px 13px; background: var(--dw2-accent-bg); border-bottom: 1px solid var(--dw2-line);
}
.dw2 .pnl-part__t { margin: 0; font-size: 15px; font-weight: bold; color: var(--dw2-accent); }
.dw2 .pnl-part__t span { display: block; margin-top: 2px; font-size: 12px; font-weight: normal; color: #555; }
.dw2 .pnl-part__p { margin: 0; text-align: right; }
.dw2 .pnl-part__list { display: block; font-size: 11.5px; color: #777; }
.dw2 .pnl-part__sale { display: block; font-size: 12.5px; color: #333; }
.dw2 .pnl-part__sale strong { font-size: 20px; color: var(--dw2-red); margin: 0 1px 0 4px; }
.dw2 .pnl-part__sale em {
	display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px;
	background: var(--dw2-red); color: #fff; font-size: 11px; font-style: normal; font-weight: bold;
}
.dw2 .pnl-part__b { padding: 12px 13px; }

/* 扉柄のサンプル画像 */
.dw2 .pnl-swatch { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.dw2 .pnl-swatch li { width: 128px; text-align: center; font-size: 12px; }
.dw2 .pnl-swatch img { display: block; width: 100%; height: auto; border: 1px solid var(--dw2-line); border-radius: 3px; background: #fff; }
.dw2 .pnl-swatch b { display: block; margin-top: 4px; font-size: 12.5px; color: var(--dw2-accent); }
.dw2 .pnl-swatch span { display: block; color: #666; font-size: 11.5px; }
.dw2 .pnl-color__img { width: 96px; height: auto; border: 1px solid var(--dw2-line); border-radius: 3px; }

/* ---- 確認項目の箇条書き（2列） ---- */
.dw2 .pnl-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; margin: 6px 0 8px; padding-left: 1.2em; }
.dw2 .pnl-checklist li { font-size: 13px; line-height: 1.9; }

/* ---- 選び方の4ステップ ---- */
.dw2 .pnl-steps { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dw2 .pnl-steps li { border: 1px solid var(--dw2-line); border-left: 4px solid var(--dw2-accent); border-radius: var(--dw2-radius); background: #fff; padding: 11px 13px; }
.dw2 .pnl-steps__h { margin: 0 0 4px; font-size: 14.5px; font-weight: bold; }
.dw2 .pnl-steps__n { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 10px; background: var(--dw2-accent); color: #fff; font-size: 11.5px; }
.dw2 .pnl-steps__d { margin: 0; font-size: 13px; line-height: 1.8; }

/* ---- スマートフォン ---- */
@media screen and (max-width: 767px) {
	.dw2 .pnl-figs { grid-template-columns: 1fr; }
	.dw2 .pnl-figs__i { grid-template-columns: 116px 1fr; gap: 11px; padding: 11px; }
	.dw2 .pnl-fig { height: 104px; }
	.dw2 .pnl-where { grid-template-columns: 1fr; }
	.dw2 .pnl-part__head { flex-direction: column; }
	.dw2 .pnl-part__p { text-align: left; }
	.dw2 .pnl-checklist { grid-template-columns: 1fr; }
	.dw2 .pnl-swatch li { width: calc((100% - 24px) / 3); }
}

/* ---- 隣接ブロックがくっつかないように（このページで組んだ並び） ---- */
.dw2.panel .dw2-sec > .dw2-why + .dw2-cta,
.dw2.panel .dw2-sec > .dw2-why + .dw2-warn,
.dw2.panel .dw2-sec > .dw2-kj__wrap + .dw2-warn,
.dw2.panel .dw2-sec > .dw2-cmp__wrap + .dw2-warn,
.dw2.panel .dw2-sec > .dw2-note + .dw2-warn,
.dw2.panel .dw2-sec > .pnl-checklist + .dw2-note,
.dw2.panel .dw2-sec > .pnl-part + .dw2-warn { margin-top: 18px; }

/* ---- 表は文字を折り返さず、横スライドで見せる（2026-09-17 指摘）----
   共通CSSはPC（641px以上）で .dw2-cmp__wrap を overflow-x:visible にして
   セル内を折り返す作りなので、このページの表だけ「折り返さない＋スライド」に上書きする。 */
.dw2.panel .dw2-cmp__wrap,
.dw2.panel .dw2-kj__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dw2.panel .pnl-quick,
.dw2.panel .pnl-models,
.dw2.panel #cabinet .dw2-kj { width: auto; min-width: 100%; }
.dw2.panel .pnl-quick th,
.dw2.panel .pnl-quick td,
.dw2.panel .pnl-models th,
.dw2.panel .pnl-models td,
.dw2.panel #cabinet .dw2-kj th,
.dw2.panel #cabinet .dw2-kj td {
	white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
}
/* 1列目は固定のままスクロールできるようにする（項目名を見失わない） */
.dw2.panel .pnl-quick tbody th,
.dw2.panel .pnl-models tbody th { min-width: 0; }
/* 「横にスクロールできます」の案内はPCでも出す（共通CSSはPCで隠すため） */
.dw2.panel .dw2-cmp__hint { display: block; }

/* 施工事例の項目名（「取り付けた部材」）が折り返さないように少し広げる */
.dw2.panel .dw2-case__sw dt { flex: 0 0 6.8em; white-space: nowrap; }