@charset "utf-8";
/* =============================================================================
 * パナソニック共通CSS（ビルトイン食洗機 シリーズページ用）
 * /dishwasher/panasonic/css/panasonic.css
 *
 *  【3層構成のうちの②メーカー共通】
 *   ① 食洗機共通UI … /dishwasher/css/series.css（.dw2-* のレイアウト一式）
 *   ② このファイル  … パナソニックのトーンと、パナソニック各シリーズで共用する部品
 *   ③ シリーズ固有  … /dishwasher/panasonic/<series>/css/<series>.css（最小限）
 *
 *  ガスコンロ側（/gasconro/paloma/css/paloma.css 等）と同じ役割・同じクラス設計。
 *  シリーズを追加するときは、このファイルの .pn-cards を使う（複製しない）。
 *
 *  食洗機のページは「清潔感のある白基調＋水を思わせる青」にする。
 *  アクセントは本文の #333 と十分に差のある青にして、色だけに頼らず
 *  マーカー・枠・アイコンでも区別が付くようにしている。
 * ========================================================================== */

.dw2.panasonic {
	--dw2-accent:    #4a4f8c;   /* 食洗機は全シリーズこの色で統一（ガスコンロのスペリアと同色） */
	--dw2-accent-bg: #eef0f8;   /* 強調マーカー・枠内の淡い背景（同上） */
	--pn-line:       #dde5ee;   /* 枠線（青みのあるグレー） */
}

/* 見出しは上書きしない。h2/h3 の heading_01 はサイト共通のものを使う。 */

/* 枠線をブランドのトーンにそろえる */
.dw2.panasonic .dw2-item { border-color: var(--pn-line); }
.dw2.panasonic .dw2-cmp th,
.dw2.panasonic .dw2-cmp td { border-color: var(--pn-line); }

/* -----------------------------------------------------------------------------
 * 写真つき解説のグリッド（パナソニック共通）
 *   「写真＋見出し＋説明」を2列（SPは1列）で並べる。
 *   ・is-wide … 図の中の文字が小さくなると読めない横長の図は1行を使い切る。
 * -------------------------------------------------------------------------- */
.dw2.panasonic .pn-cards {
	list-style: none; margin: 0 10px; padding: 0;
	display: grid; grid-template-columns: 1fr; gap: 12px;
}
.dw2.panasonic .pn-cards > li {
	border: 1px solid var(--pn-line); border-radius: var(--dw2-radius);
	background: #fff; overflow: hidden;
}
.dw2.panasonic .pn-cards > li::before { content: none; }
.dw2.panasonic .pn-cards__fig { margin: 0; background: #fff; }
.dw2.panasonic .pn-cards__fig img { display: block; width: 100%; height: auto; }
.dw2.panasonic .pn-cards__b { padding: 11px 13px 13px; }
.dw2.panasonic .pn-cards__t { display: block; font-size: 16px; font-weight: bold; line-height: 1.35; }
.dw2.panasonic .pn-cards__sub {
	display: inline-block; margin: 4px 0 0; padding: 2px 8px;
	font-size: 11.5px; font-weight: bold; line-height: 1.4;
	color: #fff; background: var(--dw2-accent); border-radius: 3px;
}
.dw2.panasonic .pn-cards__d { margin: 7px 0 0; font-size: 13.5px; line-height: 1.75; }

@media screen and (min-width: 760px) {
	.dw2.panasonic .pn-cards { grid-template-columns: 1fr 1fr; gap: 14px; }
	.dw2.panasonic .pn-cards > li.is-wide { grid-column: 1 / -1; }
}

/* メーカー表記のバッジ（「ナノイー X」などの商標名の目印） */
.dw2.panasonic .pn-tm {
	display: inline-block; padding: 1px 7px; margin: 0 2px;
	font-size: 11.5px; font-weight: bold; letter-spacing: 0;
	color: #0b4a97; background: #eef5fd; border: 1px solid #cfe0f3; border-radius: 3px;
	white-space: nowrap; vertical-align: 1px;
}

/* =============================================================================
 * パナソニックTOP（/dishwasher/panasonic/）で使う部品
 *   メーカーTOPは1ページしかないが、ページ専用CSSファイルを増やさないため
 *   ②メーカー共通のこのファイルへ置く。既存のシリーズページは使わないので影響しない。
 * ========================================================================== */

/* ヒーローのメーカーラベル。既定の赤ではなく食洗機共通のアクセント色にする */
.dw2.panasonic .dw2-hero__new.pn-flag {
	background: var(--dw2-accent); color: #fff;
}

/* ---- 現行シリーズ一覧（.dw2-panels の中身） ---- */
.dw2.panasonic .pn-slist { margin: 0 10px 10px; }
.dw2.panasonic .pn-sl__spec { margin: 12px 14px 0; font-size: 12.5px; }
.dw2.panasonic .pn-sl__spec > div {
	display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--pn-line);
}
.dw2.panasonic .pn-sl__spec > div:last-child { border-bottom: 0; }
.dw2.panasonic .pn-sl__spec dt { flex: 0 0 5.5em; color: var(--dw2-ink-sub); }
.dw2.panasonic .pn-sl__spec dd { margin: 0; flex: 1 1 auto; line-height: 1.65; }

/* 主な特長。押せる見た目にしないよう「・」付きの文章で出す */
.dw2.panasonic .pn-sl__pt { margin: 10px 14px 0; }
.dw2.panasonic .pn-sl__pt p {
	margin: 0 0 4px; padding-left: 1.05em; position: relative;
	font-size: 13px; line-height: 1.7;
}
.dw2.panasonic .pn-sl__pt p:last-child { margin-bottom: 0; }
.dw2.panasonic .pn-sl__pt p::before {
	content: "・"; position: absolute; left: 0; color: var(--dw2-accent);
}

.dw2.panasonic .pn-sl__who {
	margin: 11px 14px 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.75;
	background: var(--dw2-accent-bg); border-radius: var(--dw2-radius);
}
.dw2.panasonic .pn-sl__who b { display: block; font-size: 11.5px; color: var(--dw2-accent); }
.dw2.panasonic .pn-sl__note {
	margin: 9px 14px 0; font-size: 11.5px; line-height: 1.75; color: #555;
}

/* 価格→ボタンのかたまりは枠の下端にそろえる。auto はかたまりの先頭だけに置く */
.dw2.panasonic .pn-sl__price {
	margin: auto 14px 0; padding: 11px 0 0; border-top: 1px solid var(--pn-line);
	font-size: 13px; line-height: 1.5;
}
.dw2.panasonic .pn-sl__price b { display: block; font-size: 11.5px; color: var(--dw2-ink-sub); }
.dw2.panasonic .pn-sl__price strong { font-size: 22px; font-weight: bold; color: var(--dw2-red, #d70000); }
.dw2.panasonic .pn-sl__price .yen { font-size: 13px; }
.dw2.panasonic .pn-sl__price em { display: block; font-style: normal; font-size: 11px; color: #666; }
.dw2.panasonic .pn-sl__act { margin: 10px 14px 14px; }
.dw2.panasonic .pn-sl__act .dw2-btn { width: 100%; font-size: 13px; line-height: 1.45; }

/* ---- 比較表 ---- */
/* 当社に商品写真が無い系統は、写真の代わりに同じ大きさの枠で系統名を出す
   （無いものを作らず、列の高さをそろえる） */
.dw2.panasonic .pn-cmp__noimg {
	display: flex; align-items: center; justify-content: center;
	width: 100px; aspect-ratio: 1 / 1; margin: 0 auto 6px; padding: 4px;
	background: rgba(255, 255, 255, .16); border: 1px dashed rgba(255, 255, 255, .55);
	border-radius: 3px; font-size: 11px; font-weight: bold; line-height: 1.35; text-align: center;
}
.dw2.panasonic .pn-cmp__skus { font-size: 11.5px; line-height: 1.65; white-space: nowrap; }

/* 型番別スペック表は列が多いので文字を少し詰める */
.dw2.panasonic .pn-mtbl th,
.dw2.panasonic .pn-mtbl td { font-size: 12px; padding: 7px 9px; }
.dw2.panasonic .pn-mtbl thead th { white-space: nowrap; }

/* ---- 代表機種の中の機能一覧（枠付きタグにしない） ----
   1項目1行。機能名が長いものがあるので nowrap にはしない
   （nowrap にすると狭い画面で枠が列幅を超えてはみ出す）。
   折り返した2行目は「・」の下に入らないようぶら下げる。 */
.dw2.panasonic .pn-item__f { margin: 0 0 9px; font-size: 11.5px; line-height: 1.75; }
.dw2.panasonic .pn-item__f span {
	display: block; padding-left: 1.05em; text-indent: -1.05em;
	overflow-wrap: anywhere;
}

/* ---- 機能の説明 ---- */
.dw2.panasonic .pn-fi { display: inline-flex; margin-right: 5px; font-size: 15px; vertical-align: -2px; }
.dw2.panasonic .pn-fon {
	display: block; margin-bottom: 5px; font-size: 12px; line-height: 1.7; color: var(--dw2-accent);
}

@media screen and (max-width: 767px) {
	.dw2.panasonic .pn-slist { margin: 0 8px 10px; }
	.dw2.panasonic .pn-cmp__noimg { width: 96px; font-size: 10.5px; }
	.dw2.panasonic .pn-mtbl th,
	.dw2.panasonic .pn-mtbl td { font-size: 11.5px; padding: 6px 8px; }
}