@charset "utf-8";
/* =============================================================================
 * 家庭用ガス給湯器 商品詳細 固有CSS
 *   /maker/commodity_search/css/detail.css
 *
 *  共通部分は /css/detail_common.css（.pd-*）。ここに書くのは給湯器にしか無いもの
 *  だけにする。コンロ・食洗機・乾太くんの商品詳細が崩れないよう、
 *  共通クラスの見た目はここで上書きしない。
 *    .pd-rc*   … リモコンを選ぶ（給湯器だけ）
 *    .pd-part* … 交換に必要な部材（旧品番検索から来たときだけ）
 *    .pd-rctbl … 対応リモコンの表
 * ========================================================================== */

/* ---- リモコンを選ぶ ---------------------------------------------------- */
.pd .pd-rc {
	margin: 14px 0 0;
	border: 1px solid #dde6ed;
	border-radius: 8px;
	background: #f7fafc;
	padding: 12px 12px 10px;
}
.pd .pd-rc__h {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: bold;
	color: #0f3350;
	line-height: 1.4;
}
.pd .pd-rc__h small {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: normal;
	color: #5a6b7a;
}
.pd .pd-rc__l { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pd .pd-rc__l > li { margin: 0; }
/* ラベル全体を押せるようにする。ラジオは見た目を残す（キーボードでも選べる） */
.pd .pd-rc__l label { display: block; cursor: pointer; }
.pd .pd-rc__l input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pd .pd-rc__b {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: center;
	background: #fff;
	border: 2px solid #dde6ed;
	border-radius: 6px;
	padding: 9px 11px;
}
/* 画像が無いリモコンは1列にする（空の枠を作らない） */
.pd .pd-rc__b:not(:has(.pd-rc__ph)) { grid-template-columns: 1fr; }
.pd .pd-rc__l input:checked + .pd-rc__b { border-color: #1a7f4b; background: #f2fbf6; }
.pd .pd-rc__l input:focus-visible + .pd-rc__b { outline: 2px solid #1a4f72; outline-offset: 2px; }
.pd .pd-rc__ph { display: block; width: 180px; }
.pd .pd-rc__ph img { display: block; width: 100%; height: auto; }
.pd .pd-rc__x { display: block; min-width: 0; }
.pd .pd-rc__x b {
	font-size: 14px;
	font-weight: bold;
	color: #0f3350;
	/* 型番は折り返さない。桁の多い型番で改行して読みにくくなるのを防ぐ */
	white-space: nowrap;
}
.pd .pd-rc__x em {
	font-style: normal;
	font-size: 11px;
	font-weight: bold;
	margin-left: 6px;
	padding: 1px 6px;
	border-radius: 3px;
	vertical-align: 1px;
}
.pd .pd-rc__x em.is-std    { background: #1a7f4b; color: #fff; }
.pd .pd-rc__x em.is-bundle { background: #5a6b7a; color: #fff; }
.pd .pd-rc__n {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: #5a6b7a;
	line-height: 1.5;
}
.pd .pd-rc__p {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: bold;
	color: #d7000f;
	/* 金額と単位を改行で割らない */
	white-space: nowrap;
}
.pd .pd-rc__p i {
	font-style: normal;
	font-size: 11.5px;
	font-weight: bold;
	color: #5a6b7a;
	margin-left: 6px;
}
.pd .pd-rc__one {
	margin: 12px 0 0;
	font-size: 13px;
	color: #3b4a58;
}
.pd .pd-rc__one b { color: #0f3350; white-space: nowrap; }
.pd .pd-rc__f { display: block; margin-top: 3px; font-size: 11.5px; color: #5a6b7a; line-height: 1.5; }
.pd .pd-rctbl tbody tr.is-me > th,
.pd .pd-rctbl tbody tr.is-me > td { background: #f2fbf6; }
.pd .pd-rctbl th { white-space: nowrap; }

/* ---- いまお使いの型番 → この商品（旧品番検索から来たときだけ） --------- */
.pd.is-kyu .pd-swap {
	display: grid;
	grid-template-columns: 1fr 34px 1fr;
	align-items: stretch;
	gap: 0;
	margin: 12px 0 0;
}
.pd.is-kyu .pd-swap__i {
	padding: 11px 14px 12px;
	border: 1px solid #dde6ed;
	border-radius: 6px;
	background: #f6f9fb;
}
.pd.is-kyu .pd-swap__i.is-new { border-color: #b7d9c5; background: #f2fbf6; }
.pd.is-kyu .pd-swap__k { display: block; font-size: 11.5px; color: #5a6b7a; }
.pd.is-kyu .pd-swap__i b {
	display: block;
	margin-top: 3px;
	font-size: 16px;
	font-weight: bold;
	color: #0f3350;
	overflow-wrap: anywhere;
}
.pd.is-kyu .pd-swap__y { display: block; margin-top: 4px; font-size: 12px; color: #5a6b7a; }
.pd.is-kyu .pd-swap__y em { font-style: normal; font-weight: bold; font-size: 15px; color: #d7000f; }
/* 矢印は文字ではなく三角で描く（フォントによって形が変わらない） */
.pd.is-kyu .pd-swap__a { position: relative; }
.pd.is-kyu .pd-swap__a::before {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 9px; height: 9px;
	border-top: 2px solid #8aa0b2;
	border-right: 2px solid #8aa0b2;
	transform: translate(-60%, -50%) rotate(45deg);
}
@media only screen and (max-width: 767px) {
	/* 横に並べると型番が折り返して読みにくいので、縦に積んで矢印を下向きにする */
	.pd.is-kyu .pd-swap { grid-template-columns: 1fr; }
	.pd.is-kyu .pd-swap__a { height: 22px; }
	.pd.is-kyu .pd-swap__a::before { transform: translate(-50%, -60%) rotate(135deg); }
}

/* ---- 交換に必要な部材 -------------------------------------------------- */
.pd .pd-part { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pd .pd-part > li {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 12px;
	align-items: baseline;
	border: 1px solid #dde6ed;
	border-radius: 6px;
	background: #fff;
	padding: 10px 12px;
}
.pd .pd-part__k {
	grid-column: 1;
	font-size: 11.5px;
	color: #5a6b7a;
}
.pd .pd-part > li b {
	grid-column: 1;
	font-size: 14px;
	font-weight: bold;
	color: #0f3350;
	white-space: nowrap;
}
.pd .pd-part__p {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: center;
	font-size: 15px;
	font-weight: bold;
	color: #d7000f;
	white-space: nowrap;
}
.pd .pd-part__d {
	grid-column: 1 / -1;
	margin-top: 2px;
	font-size: 11.5px;
	color: #5a6b7a;
}

@media only screen and (max-width: 640px) {
	.pd .pd-rc { padding: 10px 10px 8px; }
	.pd .pd-rc__ph { width: 100px; }
	.pd .pd-rc__x b { font-size: 13px; }
	.pd .pd-rc__p { font-size: 14px; }
	/* 320px でも型番と金額が重ならないよう、部材は縦に積む */
	.pd .pd-part > li { grid-template-columns: 1fr; }
	.pd .pd-part__p { grid-column: 1; grid-row: auto; align-self: start; margin-top: 2px; }
}

/* ---- 金額の内訳（箱の数が変わる） ------------------------------------- */
/* 共通CSSは <箱・＋・箱・＝・箱> の5列固定。給湯器はリモコンが入って
   7つになることも、本体同梱や工事費なしで5つになることもある。
   列数を決め打ちできないので flex にして、記号だけ幅を取らないようにする。 */
.pd.is-kyu .pd-break {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	grid-template-columns: none;
}
.pd.is-kyu .pd-break > li { flex: 1 1 0; min-width: 0; }
.pd.is-kyu .pd-break > li.is-op { flex: 0 0 auto; padding: 0 2px; }

@media only screen and (max-width: 767px) {
	/* スマホは縦に積む。記号は行間に置く */
	.pd.is-kyu .pd-break { flex-wrap: wrap; flex-direction: column; }
	.pd.is-kyu .pd-break > li { flex: 0 0 auto; }
	.pd.is-kyu .pd-break > li.is-op { align-self: center; padding: 3px 0; }
}

/* ---- 対応リモコンの表 -------------------------------------------------- */
/* 「区分」の列は幅が狭いと「オ プ シ ョ ン」と1文字ずつ縦に割れる。
   折り返さず、列幅も内容ぶんだけにする。 */
.pd.is-kyu .pd-rctbl td:nth-child(2),
.pd.is-kyu .pd-rctbl th:nth-child(2) { white-space: nowrap; width: 1%; text-align: center; }
/* 特徴の列は折り返して読ませる（型番の列だけ折らない） */
.pd.is-kyu .pd-rctbl td:nth-child(3) { white-space: normal; }

/* ---- スマホでの並び順 -------------------------------------------------- */
/* 共通CSSはスマホで pd-fv__buy を flex にして order で並べ替える
   （brand=1 / price=2 / chip=3 / usp=4 / act=5）。
   リモコン選択は給湯器にしか無く order が付いていないため 0 になり、
   価格より前に出てしまっていた。
   型番 → 画像 → 主要仕様 → 価格 → リモコン → 見積 の順にする。 */
@media only screen and (max-width: 767px) {
	.pd.is-kyu .pd-fv__buy .pd-brand   { order: 1; }
	.pd.is-kyu .pd-fv__buy .pd-chip    { order: 2; margin: 10px 0 0; }
	.pd.is-kyu .pd-fv__buy .pd-price   { order: 3; }
	.pd.is-kyu .pd-fv__buy .pd-eol     { order: 3; }
	.pd.is-kyu .pd-fv__buy .pd-rc      { order: 4; }
	.pd.is-kyu .pd-fv__buy .pd-rc__one { order: 4; }
	.pd.is-kyu .pd-fv__buy .pd-usp     { order: 5; }
	.pd.is-kyu .pd-fv__buy .pd-act     { order: 6; }
}


/* ---- 内訳の1つめの箱（商品本体＋リモコン） ---------------------------- */
/* 本体とリモコンを別の箱にすると箱が4つになり、アイコン6個が入る
   標準交換工事費の箱が潰れる。1つの箱にまとめて、中で2行に分ける。 */
.pd.is-kyu .pd-breakin { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dotted #e4e9ee; }
.pd.is-kyu .pd-breakin > li {
	margin: 0;
	padding: 1px 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 11.5px;
	line-height: 1.6;
	color: #5a6b78;
	text-align: left;
}
.pd.is-kyu .pd-breakin > li::before { content: none; }
.pd.is-kyu .pd-breakin > li > span { min-width: 0; overflow-wrap: anywhere; }
.pd.is-kyu .pd-breakin > li > b {
	display: inline !important;
	margin: 0 !important;
	font-size: 12.5px !important;
	color: #22303a;
	white-space: nowrap;
}
/* 工事費の箱はアイコンが6つ入るので、ほかより広く取る */
.pd.is-kyu .pd-break > li.is-pack { flex: 1.5 1 0; }

/* ---- リモコン表の画像 -------------------------------------------------- */
/* 画像の下に型番を置く（横に並べると型番が折り返して読みにくい）。 */
.pd.is-kyu .pd-rcm { display: block; }
.pd.is-kyu .pd-rcm__i {
	display: block;
	width: 180px;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 0;
	border: 1px solid #e4e9ee;
	border-radius: 4px;
	background: #fff;
	cursor: zoom-in;
	position: relative;
}
.pd.is-kyu .pd-rcm__i:hover { border-color: #209512; }
.pd.is-kyu .pd-rcm__i:focus-visible { outline: 2px solid #1a4f72; outline-offset: 2px; }
.pd.is-kyu .pd-rcm__i img { display: block; width: 100%; height: auto; }
.pd.is-kyu .pd-rcm__i em {
	display: block;
	padding: 3px 0 4px;
	border-top: 1px dotted #e4e9ee;
	font-style: normal;
	font-size: 10.5px;
	color: #5a6b78;
	text-align: center;
}
.pd.is-kyu .pd-rcm b { display: block; font-weight: bold; text-align: center;}
/* 列幅は<中身ぴったり>にする。
   px で決め打ちすると、中身との差がそのまま右側の余白になる。
   width:1% は表の中では「中身が入る最小の幅」という意味になる。
   リモコン・区分・価格を中身ぴったりにして、
   **余った幅はすべて「特徴」の列に回す**（文章なので広いほど読みやすい）。

   **PCのときだけに限る。**
   スマホでは表をやめてカードにするので、この width:1% が残っていると
   セルが4.6pxまで潰れて、画像が消えて型番と重なって見える。
   :first-child / :nth-child が付いているぶん優先度が高く、
   スマホ側で width:auto と書いても勝てない（実測 th=4.58px）。 */
@media only screen and (min-width: 768px) {
	.pd.is-kyu .pd-rctbl th:first-child,
	.pd.is-kyu .pd-rctbl td:first-child { width: 1%; }
	.pd.is-kyu .pd-rctbl th:nth-child(4),
	.pd.is-kyu .pd-rctbl td:nth-child(4) { width: 1%; white-space: nowrap; }
	.pd.is-kyu .pd-rctbl th:nth-child(3),
	.pd.is-kyu .pd-rctbl td:nth-child(3) { width: auto; }
}
/* 金額は上にそろえる（行が高いと真ん中に浮いて見える） */
.pd.is-kyu .pd-rctbl td { vertical-align: top; }
.pd.is-kyu .pd-rctbl th { vertical-align: top; }

/* ---- 画像の拡大表示（lightbox2 は使わない） --------------------------- */
.pd-zoom {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	background: rgba(0, 0, 0, .78);
}
.pd-zoom img {
	display: block;
	max-width: min(92vw, 720px);
	max-height: 76vh;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 4px;
}
.pd-zoom__c { margin: 0; color: #fff; font-size: 14px; font-weight: bold; text-align: center; }
.pd-zoom__x {
	position: absolute;
	top: 10px; right: 14px;
	width: 40px; height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #22303a;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.pd-zoom__x:hover { background: #fff; }

/* ---- 関連ページのリンク ------------------------------------------------ */
/* 共通の .pd-more は<1本のリンクを右に置く>ためのもの。
   複数本を並べると右寄せの箇条書きになって不格好なので、別に用意する。 */
.pd.is-kyu .pd-links { list-style: none; margin: 10px 0 14px; padding: 0; }
.pd.is-kyu .pd-links > li { margin: 0; border-bottom: 1px dotted #e4e9ee; }
.pd.is-kyu .pd-links > li::before { content: none; }
.pd.is-kyu .pd-links > li > a {
	display: block;
	position: relative;
	padding: 11px 24px 11px 2px;
	font-size: 13.5px;
	font-weight: bold;
	text-decoration: none;
}
.pd.is-kyu .pd-links > li > a::after {
	content: "";
	position: absolute;
	right: 6px; top: 50%;
	width: 6px; height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}
.pd.is-kyu .pd-links > li > a:hover { background: #f6f8fa; }

@media only screen and (max-width: 640px) {
	/* 狭い画面では表ごと横スクロールになるので、画像は少し小さくする */
	.pd.is-kyu .pd-rcm__i { width: 130px; }
}

/* ---- 交換前の機種（実績の棒） ----------------------------------------- */
/* 件数の多さが一目で分かるようにする。棒はいちばん多い型番を100%とした割合。 */
.pd.is-kyu .pd-oldbar {
	display: block;
	width: 100px;
	height: 5px;
	margin-top: 4px;
	border-radius: 3px;
	background: #e9eef3;
	overflow: hidden;
}
.pd.is-kyu .pd-oldbar > i { display: block; height: 100%; background: #209512; }
.pd.is-kyu .pd-old tbody th { font-size: 14px; }
@media only screen and (max-width: 767px) {
	/* スマホでは1行に流れるので、棒は横に置く */
	.pd.is-kyu .pd-oldbar { display: inline-block; vertical-align: middle; width: 70px; margin: 0 0 0 7px; }
}

/* ---- 商品画像の縦横比（給湯器だけ） ----------------------------------- */
/* 共通CSSは .pd .pd-fv__ph img に 5/4（スマホは5/5）を当てている。
   給湯器の本体写真は縦長で上下に余白が出るため 5/3 にする。
   **.pd.is-kyu を付けて給湯器だけに限定する。**
   共通の .pd .pd-fv__ph img を直すとコンロ・食洗機・乾太くんまで変わる。
   クラス3つなので、スマホ側の 5/5（クラス2つ）よりも優先される。 */
.pd.is-kyu .pd-fv__ph img { aspect-ratio: 5 / 3; }

/* ---- 対応リモコンの表：スマホでは表をやめてカードにする --------------- */
/* 4列の表を狭い画面にそのまま出すと、「特徴」の列が1〜2文字ずつ改行されて
   読めなくなる（横スクロールにしても指で追いにくい）。
   行ごとのカードに組み替えて、画像・型番・区分・特徴・価格を縦に並べる。
   見出し行は消して、各値の前に項目名を出す（td の data-l）。 */
@media only screen and (max-width: 767px) {
	.pd.is-kyu .pd-scroll:has(.pd-rctbl) { overflow: visible; }
	.pd.is-kyu .pd-rctbl,
	.pd.is-kyu .pd-rctbl tbody,
	.pd.is-kyu .pd-rctbl tr,
	.pd.is-kyu .pd-rctbl th,
	.pd.is-kyu .pd-rctbl td { display: block; width: auto; }
	.pd.is-kyu .pd-rctbl thead { display: none; }
	.pd.is-kyu .pd-rctbl { border: 0; }
	.pd.is-kyu .pd-rctbl tbody tr {
		margin: 0 0 10px;
		padding: 11px 12px 12px;
		border: 1px solid #e4e9ee;
		border-radius: 6px;
		background: #fff;
	}
	.pd.is-kyu .pd-rctbl tbody tr.is-me { border-color: #1a7f4b; background: #f2fbf6; }
	.pd.is-kyu .pd-rctbl th,
	.pd.is-kyu .pd-rctbl td {
		padding: 0;
		border: 0;
		background: none !important;
		/* **幅の指定を必ず戻す。**
		   PCで列を内容ぴったりにするために入れた width:1% が、
		   ブロック表示にしたここでも効いて、セルが4pxまで潰れていた
		   （画像が消えて型番と重なって見えた）。 */
		width: auto;
		max-width: none;
	}

	/* 画像と型番は横に並べる（縦に積むと1枚で画面を使い切ってしまう） */
	.pd.is-kyu .pd-rctbl .pd-rcm { display: flex; align-items: center; gap: 10px; }
	.pd.is-kyu .pd-rctbl .pd-rcm__i { width: 110px; margin: 0; flex: 0 0 auto; }
	.pd.is-kyu .pd-rctbl .pd-rcm b { text-align: left; font-size: 15px; }

	/* 区分・特徴・価格は項目名を添えて1行ずつ */
	.pd.is-kyu .pd-rctbl td { margin-top: 7px; font-size: 13px; line-height: 1.7; }
	.pd.is-kyu .pd-rctbl td::before {
		content: attr(data-l);
		display: inline-block;
		min-width: 3.5em;
		margin-right: 7px;
		padding: 1px 6px;
		border-radius: 3px;
		background: #eef2f6;
		color: #5a6b78;
		font-size: 10.5px;
		font-weight: bold;
		vertical-align: 2px;
	}
	.pd.is-kyu .pd-rctbl td.is-price { font-size: 16px; font-weight: bold; color: #d7000f; }
	.pd.is-kyu .pd-rctbl .pd-rc__f { display: block; margin-top: 2px; }
}

/* ---- リモコンの案内ページへのリンク ------------------------------------ */
/* クラス名は pd-rc__more。**pd-rc__l は使わない**
   ――それは上のリモコン一覧の <ul> が先に使っているクラスで、
   同じ名前を付けたせいで一覧が inline-block に縮み（715→607px）、
   一覧の右端に矢印（::after）まで出ていた。 */
.pd.is-kyu .pd-rc__more {
	display: inline-block;
	margin-top: 4px;
	position: relative;
	padding-right: 15px;
	font-size: 12px;
	font-weight: bold;
	text-decoration: underline;
}
.pd.is-kyu .pd-rc__more::after {
	content: "";
	position: absolute;
	right: 3px; top: 50%;
	width: 5px; height: 5px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-50%) rotate(45deg);
}

/* ---- 写真に重ねて出す仕様の絵（号数・ふろ機能・設置方式・省エネ） ------
   絵は /include/gs_icon.php の共通アイコン。.dw2-ic の見た目はシリーズページの
   CSS にしか無く、この画面では読み込んでいないので、大きさはここで決める。
   **枠は写真の上に重ねる。** 横に並べて置くと給湯器の写真が右へ寄ってしまう。
   項目が1件も無いときは has-ic が付かない＝今までどおり写真だけになる。 */
/* ロゴも重ねるので、枠そのものを基準にする（アイコンの有無によらず） */
.pd.is-kyu .pd-fv__ph { position: relative; }
.pd.is-kyu .pd-spi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	/* 写真の左端に重ねる。写真は object-fit: contain で中央に出るので、
	   給湯器の絵には重ならない。 */
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 132px;
	z-index: 1;
}
.pd.is-kyu .pd-spi > li {
	margin: 0;
	padding: 10px 5px 9px;
	text-align: center;
	border: 1px solid var(--d-line);
	/* 写真に重なるので、下の白地が透けないよう不透明にする */
	background: var(--d-panel);
}
.pd.is-kyu .pd-spi svg { display: block; width: 30px; height: 30px; margin: 0 auto; color: var(--d-acc); }
.pd.is-kyu .pd-spi b {
	display: block;
	margin: 5px 0 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
}
.pd.is-kyu .pd-spi span { display: block; margin: 3px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--d-sub); }
.pd.is-kyu .pd-spi > li.is-long b { font-size: 13px; }

/* メーカーのロゴ。写真枠の右上に重ねる。 */
/* 素材は 460×180。幅で大きさを決める（高さでそろえるとメーカーごとに
   文字の大きさが変わって見える。ロゴの描き幅はどれも素材幅の 83〜91%）。 */
.pd.is-kyu .pd-mklg { position: absolute; right: 14px; top: 10px; width: 150px; height: auto; z-index: 1; }

@media screen and (max-width: 767px) {
	/* スマホは重ねない。写真が小さいので、重ねると商品が隠れる。
	   DOM では写真より前にあるので、order で写真の下へ回す。 */
	.pd.is-kyu .pd-fv__ph.has-ic { display: flex; flex-direction: column; }
	.pd.is-kyu .pd-fv__ph.has-ic img { order: 1; }
	.pd.is-kyu .pd-spi {
		order: 2;
		position: static;
		transform: none;
		margin: 8px 0 0;
		/* 幅を書かないと中身なりの幅になり、枠の数で左右の余白が変わって見える。
		   100% にして等分すれば、何個でも必ず収まって左右もそろう。 */
		width: 100%;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 6px;
	}
	.pd.is-kyu .pd-spi > li { padding: 8px 3px 7px; }
	.pd.is-kyu .pd-spi svg { width: 24px; height: 24px; }
	.pd.is-kyu .pd-spi b { font-size: 13px; }
	.pd.is-kyu .pd-spi span { font-size: 10.5px; }
	/* スマホは枠が81pxしかないので、6文字（全角）で折り返してしまう。
	   PCは132pxあるので縮めない。 */
	.pd.is-kyu .pd-spi > li.is-mid b  { font-size: 11.5px; }
	.pd.is-kyu .pd-spi > li.is-long b { font-size: 11.5px; }
	/* 2026-10-05 スマホの商品写真を 5/4 に（ご指示）。写真が大きくなりロゴと重なるので、
	   写真の上にロゴの帯（38px）を空けて（ロゴ画像の中の白い余白ぶんは top をマイナスにして詰める）ロゴを上へ逃がし、白い背景は multiply で透かす。 */
	.pd.is-kyu .pd-fv__ph img { aspect-ratio: 5 / 4; }
	.pd.is-kyu .pd-fv__ph:has(.pd-mklg) { padding-top: 38px; }
	.pd.is-kyu .pd-mklg { right: 8px; top: -16px; width: 140px; mix-blend-mode: multiply; }
}
/* =============================================================================
 * 金額の箱のうち、旧品番検索から来たときだけ出る2行（2026-10-02 ご指摘）
 *     いまお使いの型番  OURB-2051SAQ
 *     追加部材 1点・すべて使う場合の目安   5,594円
 *
 *  この2行は<その方がいま使っている型番>で決まるぶんで、ほかの行
 *  （商品本体・リモコン・標準交換工事費）とは出どころが違う。
 *  どこが自分だけのぶんなのかが分かるように、薄い色の帯で囲む。
 *
 *  ★色は薄いクリーム色にする。青はリンク、緑は保証とお見積り、
 *    だいだいは星に使っていて、どれも意味を持っているため使わない。
 *    グラデーション・影は使わない。
 *
 *  ★共通CSS（/css/detail_common.css）はガスコンロ・食洗機・乾太くんの
 *    商品詳細と共用なので触っていない。給湯器だけのここに書く。
 * ========================================================================== */
.pd.is-kyu .pd-price__b > div.is-old {
	/* 箱の左右の余白（dl の padding 12px）より少し外まで帯を広げて、
	   行ではなく<ひとまとまり>に見えるようにする */
	margin: 0 -8px; padding: 4px 8px;
	background: #fdf5e3;
}
.pd.is-kyu .pd-price__b > div.is-old dt { color: var(--d-ink); }
/*	部材の型番。見出しのとなりに並べ、見出しより少し大きく濃くして
	これが中身だと分かるようにする。 */
.pd.is-kyu .pd-price__b > div.is-old dt b {
	margin-left: 10px;
	font-size: 14px; font-weight: bold; color: var(--d-ink);
}
/*	「すべて使う場合の目安」のような添え書きは、型番が長いと右の金額を
	押してしまうので<見出しの下>に回して左ぞろえにする。 */
.pd.is-kyu .pd-price__b > div.is-old dt span {
	display: block; margin-left: 0; color: #8a6b2e; line-height: 1.6;
}
/*	見出しが2行になるので、金額は上にそろえる（下に沈まないように）。
	左の見出しは幅が余ったぶんだけ広がってよい（型番を折り返さない）。 */
.pd.is-kyu .pd-price__b > div.is-old { align-items: flex-start; }
.pd.is-kyu .pd-price__b > div.is-old dt { flex: 1 1 auto; }
.pd.is-kyu .pd-price__b > div.is-old dd { padding-top: 1px; }
/* =============================================================================
 * いまお使いの型番（金額の箱のいちばん上・2026-10-02 ご指示）
 *
 *  旧品番検索から来たときだけ、メーカー希望小売価格の<上>に1行出す。
 *  型番は金額ではないので、金額の行をまとめた dl には入れない。
 *  下の「追加部材」の帯と同じ薄いクリーム色にして、この2つが
 *  ひとつづきの話だと分かるようにしている。
 *  グラデーション・影は使わない。
 * ========================================================================== */
.pd.is-kyu .pd-from {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px;
	margin: 0; padding: 8px 12px;
	background: #fdf5e3;
	font-size: 12.5px; line-height: 1.6;
}
.pd.is-kyu .pd-from span { color: var(--d-sub); }
.pd.is-kyu .pd-from b { font-size: 15px; font-weight: bold; color: var(--d-ink); }
.pd.is-kyu .pd-from em { font-style: normal; font-size: 11.5px; color: #8a6b2e; }
/* 帯の上端・下端だけ角を丸める。1行のときは同じ div に両方付く */
.pd.is-kyu .pd-price__b > div.is-old-t { margin-top: 5px; padding-top: 6px; border-radius: 5px 5px 0 0; }
.pd.is-kyu .pd-price__b > div.is-old-b { margin-bottom: 5px; padding-bottom: 6px; border-radius: 0 0 5px 5px; }
.pd.is-kyu .pd-price__b > div.is-old-t.is-old-b { border-radius: 5px; }

/* ---- ファーストビューの縦の間隔 --------------------------------------
   仕様のチップと金額の箱、ロゴの行とチップがくっついて見えていた
   （2026-10-03 ご指摘）。ブロックどうしは必ず隙間を空ける。 */
.pd.is-kyu .pd-brand { margin: 18px 0 10px; }
.pd.is-kyu .pd-chip  { margin: 0 0 16px; }
.pd.is-kyu .pd-price { margin-top: 0; }
@media screen and (max-width: 767px) {
	.pd.is-kyu .pd-fv__buy .pd-chip { margin: 12px 0 14px; }
}

/* ---- 価格が未登録の品番（お問い合わせ） --------------------------------
   0円や、工事費だけの総額を出さないための差し替え表示。 */
.pd.is-kyu .pd-price--ask { padding: 0 0 2px; }
.pd.is-kyu .pd-ask { margin: 0; padding: 16px 16px 18px; text-align: center; }
.pd.is-kyu .pd-ask b {
	display: block; font-size: 22px; font-weight: bold; color: var(--d-acc); line-height: 1.4;
}
.pd.is-kyu .pd-ask span {
	display: block; margin-top: 6px; font-size: 13px; line-height: 1.8; color: var(--d-sub);
}