@charset "utf-8";
/* =============================================================================
 * ビルトイン食洗機 商品詳細 固有CSS
 *   /dishwasher/commodity_search/css/detail.css
 *
 *  【共通分は /css/detail_common.css へ移した（2026-09-22）】
 *  以前このファイルにあった約330ブロックは、ガスコンロの detail.css と
 *  接頭辞（.dwp / .gcd）だけ違う同じものだった。共通CSSに1本化し、
 *  クラス接頭辞も .dwp → .pd に変えた。
 *
 *  ここに残すのは食洗機にしか無いものだけ。
 *  読み込み順は「/css/detail_common.css → このファイル」。
 * ========================================================================== */

/* 食洗機のアクセント。共通CSSの既定値と同じ（ガスコンロとそろえている）。 */
.pd.is-dw { --d-acc: #209512; }

/* 商品写真は正方形に近いので、共通の 5:4 ではなく 1:1 で置く */
.pd.is-dw .pd-fv__ph img { aspect-ratio: 5 / 5; }

/* =============================================================================
 * 食洗機だけの節
 *   食器収納・容量／コース別運転時間／節水・経済性／同シリーズの比較表
 *   ガスコンロには無い節なので、ここだけ新しく書いている。
 *   色・文字サイズ・余白の考え方は共通部分（ガスコンロからの移植分）にそろえる。
 * ========================================================================== */

/* ---- 食器収納・容量 ---------------------------------------------------- */
.pd .pd-dish {
	display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: 18px; align-items: start;
}
.pd .pd-dish__ph { margin: 0; }
.pd .pd-dish__ph img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--d-line); background: #fff;
}
.pd .pd-dish__x { min-width: 0; }
.pd .pd-dish__n {
	margin: 0 0 8px; padding: 10px 14px; display: flex; align-items: baseline; gap: 8px;
	background: var(--d-panel); border: 1px solid var(--d-line);
}
.pd .pd-dish__n span { font-size: 13px; color: var(--d-sub); }
.pd .pd-dish__n b { font-size: 34px; line-height: 1; color: var(--d-acc); letter-spacing: -.02em; }
.pd .pd-dish__n small { font-size: 15px; font-weight: bold; }
.pd .pd-dish__v,
.pd .pd-dish__k { margin: 0 0 6px; font-size: 13.5px; }
.pd .pd-dish__v b { font-weight: bold; }

.pd .pd-dishlist {
	list-style: none; margin: 10px 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.pd .pd-dishlist > li {
	margin: 0; padding: 8px 4px; text-align: center;
	background: #fff; border: 1px solid var(--d-line);
}
.pd .pd-dishlist > li::before { content: none; }
.pd .pd-dishlist img { display: block; width: 42px; height: 42px; margin: 0 auto 3px; padding: 8%;}
.pd .pd-dishlist span { display: block; font-size: 11.5px; color: var(--d-sub); line-height: 1.4; }
.pd .pd-dishlist b { display: block; font-size: 13.5px; line-height: 1.3; }

/* ---- コース別運転時間 --------------------------------------------------
   コース数は品番で3〜8とばらつく。等分割だと4＋2のように半端な段ができて
   間が空くので、1枠の最小幅を決めて自動で折り返す。枠は罫線でつないで
   ひとつの帯に見せる（ばらばらのカードを並べない）。 */
.pd .pd-time {
	list-style: none; margin: 8px 0 4px; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 0; border: 1px solid var(--d-line); background: #fff;
}
.pd .pd-time > li {
	margin: 0; padding: 9px 6px 10px; text-align: center;
	border: 1px solid var(--d-line);
}
.pd .pd-time > li::before { content: none; }
.pd .pd-time span { display: block; font-size: 11px; color: var(--d-sub); line-height: 1.5; }
.pd .pd-time b {
	display: block; margin-top: 1px; font-size: 17px; line-height: 1.25;
	color: var(--d-ink); letter-spacing: -.01em;
}

/* ---- 節水・経済性 ------------------------------------------------------
   項目は1〜3個しか無いので、カードを等分割すると空きが目立つ。
   1本の帯に「条件／使用水量／年間の節約」を並べる。 */
.pd .pd-eco {
	list-style: none; margin: 8px 0 4px; padding: 0;
	display: flex; flex-wrap: wrap; align-items: stretch;
	border: 1px solid var(--d-line); background: #fff;
}
.pd .pd-eco > li {
	margin: 0; padding: 9px 16px 10px; flex: 0 1 auto;
	border-left: 1px solid var(--d-line);
}
.pd .pd-eco > li:first-child { border-left: 0; background: var(--d-panel); }
.pd .pd-eco > li::before { content: none; }
.pd .pd-eco span { display: block; font-size: 11px; color: var(--d-sub); line-height: 1.5; }
.pd .pd-eco b { display: block; margin-top: 1px; font-size: 17px; line-height: 1.25; color: var(--d-ink); }
.pd .pd-eco > li.is-w b { color: var(--d-acc); }
.pd .pd-eco > li.is-s b { color: var(--d-red); }

/* 同シリーズの比較表（.pd-scroll / .pd-vartbl）は /css/detail_common.css へ移した（2026-09-22） */

@media only screen and (max-width: 767px) {
	.pd .pd-dish { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	/* 食器の入り方が分かる大きさを保つ。小さくしない */
	.pd .pd-dish__ph img { max-width: 420px; margin: 0 auto; }
	.pd .pd-dish__n b { font-size: 29px; }
	.pd .pd-dishlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.pd .pd-dishlist img { width: 36px; height: 36px; padding: 0;}
	.pd .pd-time { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
	.pd .pd-time > li { padding: 7px 4px 8px; }
	.pd .pd-time b { font-size: 15px; }
	.pd .pd-eco > li { padding: 7px 11px 8px; flex: 1 1 auto; }
	.pd .pd-eco b { font-size: 15px; }
}

/* ---- 機能（メーカー公式の図・写真つき） --------------------------------
   公式の図は横長のものが多いので、横にサムネイルを置くと潰れる。
   画像はカードの幅いっぱいに上へ置き、その下に機能名と説明を入れる。 */
.pd .pd-fpic {
	list-style: none; margin: 0 0 14px; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.pd .pd-fpic > li {
	margin: 0; padding: 0; background: #fff; border: 1px solid var(--d-line);
	display: flex; flex-direction: column;
}
.pd .pd-fpic > li::before { content: none; }
.pd .pd-fpic__p {
	display: block; background: var(--d-panel); border-bottom: 1px solid var(--d-line);
}
.pd .pd-fpic__p img {
	display: block; width: 100%; height: auto; max-height: 190px;
	object-fit: contain; object-position: center;
}
.pd .pd-fpic__x { display: block; padding: 10px 13px 12px; }
.pd .pd-fpic__x b {
	display: block; margin-bottom: 3px; padding-left: 13px; position: relative;
	font-size: 14px; font-weight: bold; line-height: 1.45; color: var(--d-ink);
}
.pd .pd-fpic__x b::before {
	content: ""; position: absolute; left: 0; top: .52em;
	width: 7px; height: 7px; background: var(--d-acc);
}
.pd .pd-fpic__x span { display: block; font-size: 12.5px; line-height: 1.8; color: var(--d-sub); }

@media only screen and (max-width: 767px) {
	.pd .pd-fpic { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.pd .pd-fpic__p img { max-height: 210px; }
	.pd .pd-fpic__x { padding: 9px 11px 11px; }
}

/* ---- 機能ごとのアイコン -------------------------------------------------
   ガスコンロのアイコンは横長（100×48）でそろっているが、食洗機のアイコンは
   縦長・横長・正方形が混在する（リンナイは180×180の正方形、パナソニックは
   メーカーの帯から機能ごとに切り出したもの）。cover だと端が切れるので
   contain にして絵の全体を見せ、枠の大きさだけそろえる。 */
.pd .pd-feat > li { grid-template-columns: 100px 1fr; }
.pd .pd-feat__i img {
	width: 100px; height: 72px; object-fit: contain; padding: 4px;
	background: #fff; border: 1px solid var(--d-line);
}
@media only screen and (max-width: 767px) {
	.pd .pd-feat > li { grid-template-columns: 84px 1fr; }
	.pd .pd-feat__i img { width: 84px; height: 60px; padding: 3px; }
}