@charset "utf-8";
/* =============================================================================
 * 施工事例 詳細ページ 専用UI（.sd-*）
 *   /sekou/css/detail_new.css
 *   共通の商品詳細UI（/css/detail_common.css の .pd-*）の上に、施工事例だけの部品を足す。
 *   色は商品詳細と同じ（アクセントは共通の緑 --d-acc）。影は使わない。
 *   2026-10-14 全面リニューアル。
 * ========================================================================== */

#mainContents .pd.is-sk { padding: 0 2px; }
.pd.is-sk { --sd-line: #dfe6ec; --sd-soft: #f5f8fa; --sd-blue: #1a6fc4; --sd-ink2: #0b3a5c; }

/* ---- 見出し ---- */
.pd .sd-top { margin: 4px 0 18px !important; }
/* 見出しの上の情報（2026-10-14 作り直し：塗りの札をやめ、3つとも同じ見た目のアイコン＋文字） */
.pd .sd-eyebrow { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; padding: 0; list-style: none; }
.pd .sd-eyebrow > li { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; font-size: 13px; font-weight: bold; color: var(--d-sub); }
.pd .sd-eyebrow > li::before { content: none; }
.pd .sd-eyebrow svg { flex: none; fill: none; stroke: var(--d-acc); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pd .sd-h { display: block; margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--d-ink); font-weight: bold; }
.pd .sd-h__m {
	display: inline; font-size: 25px; line-height: 1.5; letter-spacing: .02em;
	background: linear-gradient(transparent 68%, color-mix(in srgb, var(--d-acc) 22%, #fff) 68%);
}
.pd .sd-h__s { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 14px; line-height: 1.4; }
.pd .sd-h__c { display: inline-block; padding: 4px 12px; border-radius: 8px; background: #eef1f4; color: #39444e; letter-spacing: .02em; overflow-wrap: anywhere; }
.pd .sd-h__c.is-a { background: color-mix(in srgb, var(--d-acc) 12%, #fff); color: color-mix(in srgb, var(--d-acc) 75%, #000); }
.pd .sd-h__ar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--d-acc); color: #fff; font-size: 13px; line-height: 1; }
.pd .sd-h__x { font-size: 13px; color: var(--d-sub); font-weight: bold; }
.pd .sd-sub { margin: 0 0 14px; font-size: 13px; color: var(--d-sub); }

/* ---- 交換前／交換後（同じ比率で横並び。スマホは縦） ---- */
.pd .sd-ba { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); align-items: start; gap: 0; }
.pd .sd-ba.is-one { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; }
.pd .sd-ba__f { margin: 0; }
.pd .sd-ba__ph {
	display: block; width: 100%; padding: 0; margin: 0; border: 1px solid var(--sd-line); border-radius: 12px; overflow: hidden;
	background: #eef2f5; cursor: zoom-in; aspect-ratio: 4 / 3;
}
.pd .sd-ba__ph img { display: block; width: 100%; height: 100% !important; object-fit: contain; }
.pd .sd-ba__ph:focus-visible { outline: 3px solid var(--sd-blue); outline-offset: 2px; }
.pd .sd-ba__f figcaption { margin: 8px 2px 0; font-size: 13px; font-weight: bold; line-height: 1.5; color: var(--d-ink); }
.pd .sd-ba__lb {
	display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: 999px;
	background: #5f6b75; color: #fff; font-size: 12px;
}
.pd .sd-ba__lb.is-a { background: var(--d-acc); }
.pd .sd-ba__ar { align-self: center; justify-self: center; width: 14px; height: 14px; border-top: 3px solid #9aa7b2; border-right: 3px solid #9aa7b2; transform: rotate(45deg); margin-top: -30px; }
.pd .sd-ba__note { margin: 8px 0 0; font-size: 11.5px; color: var(--d-sub); text-align: right; }

/* ---- 概要（2026-10-14 作り直し）：交換前→交換後の帯＋施工データのアイコン行 ---- */
.pd .sd-sum { margin: 0 0 14px !important; border: 1px solid var(--sd-line); border-radius: 16px; overflow: hidden; background: #fff; }
.pd .sd-swap {
	display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; gap: 6px;
	padding: 18px 20px; background: linear-gradient(135deg, #f7f9fb 0%, #f7f9fb 50%, color-mix(in srgb, var(--d-acc) 9%, #fff) 50%, color-mix(in srgb, var(--d-acc) 9%, #fff) 100%);
}
.pd .sd-swap.is-new { grid-template-columns: minmax(0, 1fr); background: color-mix(in srgb, var(--d-acc) 8%, #fff); }
.pd .sd-swap__s { min-width: 0; }
.pd .sd-swap__s.is-a { text-align: right; }
.pd .sd-swap.is-new .sd-swap__s.is-a { text-align: left; }
.pd .sd-swap__k {
	display: inline-block; margin: 0 0 6px; padding: 1px 12px; border-radius: 999px;
	background: #5f6b75; color: #fff; font-size: 11.5px; font-weight: bold; line-height: 1.7; letter-spacing: .04em;
}
.pd .sd-swap__s.is-a .sd-swap__k { background: var(--d-acc); }
.pd .sd-swap__m { margin: 0; font-size: 22px; font-weight: bold; line-height: 1.3; letter-spacing: .01em; color: var(--d-ink); overflow-wrap: anywhere; }
.pd .sd-swap__s.is-a .sd-swap__m { color: color-mix(in srgb, var(--d-acc) 70%, #000); }
.pd .sd-swap__d { margin: 4px 0 0; font-size: 12.5px; color: var(--d-sub); line-height: 1.6; }
.pd .sd-swap__ar {
	display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
	background: #fff; border: 1px solid var(--sd-line); color: var(--d-acc);
}
.pd .sd-swap__ar svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pd .sd-eol { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 4px; background: #eef0f2; color: #6b7178; font-style: normal; font-size: 11px; font-weight: bold; }
.pd .sd-facts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sd-line); }
.pd .sd-facts > li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 12px; border-left: 1px solid var(--sd-line); min-width: 0; }
.pd .sd-facts > li:first-child { border-left: 0; }
.pd .sd-facts > li::before { content: none; }
.pd .sd-facts__i { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--d-acc) 10%, #fff); color: var(--d-acc); }
.pd .sd-facts__i svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd .sd-facts__x { display: flex; flex-direction: column; min-width: 0; }
.pd .sd-facts__x small { font-size: 11px; color: var(--d-sub); line-height: 1.4; }
.pd .sd-facts__x b { font-size: 14px; line-height: 1.45; color: var(--d-ink); overflow-wrap: anywhere; }

/* ---- 前／次（丸い矢印つきのボタン） ---- */
.pd .sd-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.pd .sd-pn.is-bottom { margin-top: 26px; }
.pd .sd-pn__a {
	display: flex; align-items: center; gap: 12px; min-height: 64px; box-sizing: border-box;
	padding: 10px 14px; border-radius: 14px; background: #f5f7f9; text-decoration: none; color: var(--d-ink);
	transition: background .15s;
}
.pd .sd-pn__a.is-next { flex-direction: row-reverse; text-align: right; }
.pd .sd-pn__a:hover { background: color-mix(in srgb, var(--d-acc) 9%, #fff); }
.pd .sd-pn__a:focus-visible { outline: 3px solid var(--sd-blue); outline-offset: 2px; }
.pd .sd-pn__c { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--d-acc); border: 1px solid var(--sd-line); }
.pd .sd-pn__c svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pd .sd-pn__x { display: flex; flex-direction: column; min-width: 0; }
.pd .sd-pn__l { font-size: 11.5px; font-weight: bold; color: var(--d-sub); }
.pd .sd-pn__t { font-size: 13.5px; font-weight: bold; line-height: 1.45; overflow-wrap: anywhere; }
.pd .sd-pn__s { font-size: 11px; color: var(--d-sub); }
.pd .sd-pn__note { margin: 4px 0 20px; font-size: 11.5px; color: var(--d-sub); text-align: center; }
.pd .sd-back { margin: 12px 0 22px; text-align: center; }
.pd .sd-back a {
	display: inline-block; min-height: 44px; box-sizing: border-box; padding: 11px 26px; border: 1px solid var(--d-acc); border-radius: 999px;
	color: var(--d-acc); font-weight: bold; text-decoration: none; background: #fff;
}
.pd .sd-back a:hover { background: var(--d-acc); color: #fff; }

/* ---- 金額 ---- */
.pd .sd-sec { margin: 0 0 26px !important; }
.pd .sd-pr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; margin: 14px 0 0; align-items: stretch; }
/* 2枚の高さと中の行（見出し・金額・説明）をそろえる（2026-10-14「ブロック高さ揃えろ」） */
.pd .sd-pr__c { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.pd .sd-pr:has(> .sd-pr__c:only-child) { grid-template-columns: minmax(0, 1fr); }
.pd .sd-pr__c { padding: 14px 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; }
.pd .sd-pr__c.is-pay { border-color: #f1c4c6; background: #fffafa; }
.pd .sd-pr__k { margin: 0 0 4px; font-size: 14px; font-weight: bold; color: var(--d-ink); }
.pd .sd-pr__k small { display: block; font-size: 11.5px; font-weight: normal; color: var(--d-sub); }
.pd .sd-pr__v { margin: 0 0 6px; font-size: 13px; font-weight: bold; color: var(--d-ink); }
.pd .sd-pr__v b { font-size: 28px; letter-spacing: -.01em; margin-right: 2px; }
.pd .sd-pr__c.is-pay .sd-pr__v b { color: var(--d-red); }
.pd .sd-pr__c.is-reg .sd-pr__v b { font-size: 22px; color: #4a5560; }
.pd .sd-pr__v i { font-style: normal; font-size: 12px; font-weight: normal; color: var(--d-sub); margin-left: 4px; }
.pd .sd-pr__n { margin: 0; font-size: 12px; color: var(--d-sub); }
.pd .sd-pr__d summary { cursor: pointer; font-size: 12.5px; font-weight: bold; color: var(--sd-blue); min-height: 32px; line-height: 32px; }
.pd .sd-tbl { width: 100%; margin: 4px 0 0; border-collapse: collapse; font-size: 12.5px; }
.pd .sd-tbl th, .pd .sd-tbl td { padding: 6px 4px; border: 0; border-top: 1px solid var(--sd-line); background: none; text-align: left; vertical-align: top; font-weight: normal; }
.pd .sd-tbl th small { display: block; color: var(--d-sub); font-size: 11.5px; }
.pd .sd-tbl td { text-align: right; white-space: nowrap; }
.pd .sd-tbl tr.is-sub th, .pd .sd-tbl tr.is-sub td { font-weight: bold; }

/* ---- 担当スタッフ・口コミ ---- */
.pd .sd-vo { margin: 12px 0 0; padding: 14px 16px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; }
.pd .sd-vo.is-user { background: var(--sd-soft); }
.pd .sd-vo__h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; font-weight: bold; color: var(--d-ink); }
.pd .sd-vo__i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--d-acc); }
.pd .sd-vo__i svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd .sd-vo__t { margin: 0 0 6px; font-size: 14.5px; font-weight: bold; }
.pd .sd-vo__b { margin: 0; font-size: 14px; line-height: 1.9; }
.pd .sd-stars { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; list-style: none; }
.pd .sd-stars > li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 12.5px; }
.pd .sd-stars > li::before { content: none; }
.pd .sd-stars__l { color: var(--d-sub); }
.pd .sd-stars__s { display: inline-flex; gap: 1px; }
.pd .sd-stars__s i { display: block; width: 14px; height: 14px; background: #d5dbe0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pd .sd-stars__s i.on { background: #f5a623; }
.pd .sd-stars b { font-size: 13px; }
.pd .sd-vo__ph { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pd .sd-vo__p { padding: 0; border: 1px solid var(--sd-line); border-radius: 8px; overflow: hidden; background: #fff; cursor: zoom-in; width: 110px; height: 110px; }
.pd .sd-vo__p img { width: 100%; height: 100% !important; object-fit: cover; display: block; }

/* ---- お客様の口コミ（2026-10-14 作り直し「レビューの表示…デザインも変えろ見ずらい」） ---- */
.pd .sd-rv { margin: 12px 0 0; padding: 18px 20px; border: 1px solid #f0dcb4; border-radius: 14px; background: linear-gradient(180deg, #fffaf0 0%, #fff 70%); }
.pd .sd-rv__score { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px dashed #ecd7ad; }
.pd .sd-rv__avg { text-align: center; }
.pd .sd-rv__num { margin: 0; line-height: 1; color: #2b2b2b; }
.pd .sd-rv__num b { font-size: 46px; letter-spacing: -.02em; }
.pd .sd-rv__num small { font-size: 15px; color: var(--d-sub); margin-left: 2px; }
.pd .sd-rv__stars { display: flex; justify-content: center; gap: 2px; margin: 6px 0 4px; }
.pd .sd-st { fill: #dfe3e7; }
.pd .sd-st.on { fill: #f5a623; }
.pd .sd-rv__cap { margin: 0; font-size: 11.5px; color: var(--d-sub); }
.pd .sd-rv__bars { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd .sd-rv__bars > li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 1.6em; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 13px; }
.pd .sd-rv__bars > li::before { content: none; }
.pd .sd-rv__bl { font-weight: bold; color: var(--d-ink); white-space: nowrap; }
.pd .sd-rv__bar { display: block; height: 10px; border-radius: 999px; background: #eceff2; overflow: hidden; }
.pd .sd-rv__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f7b53b, #f5a623); }
.pd .sd-rv__bars b { font-size: 15px; text-align: right; }
/* お客様のアバター（サイト共通の /images/user_icon.webp）＋本文。担当スタッフは /images/support_icon.webp */
.pd .sd-av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.pd .sd-av img { width: 40px; height: 40px !important; display: block; }
.pd .sd-av.is-user { background: #ffe9c2; box-shadow: 0 0 0 3px #fff, 0 0 0 4px #f2d7a3; }
.pd .sd-av.is-staff { background: color-mix(in srgb, var(--d-acc) 14%, #fff); box-shadow: 0 0 0 3px #fff, 0 0 0 4px color-mix(in srgb, var(--d-acc) 35%, #fff); }
.pd .sd-rv__q { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.pd .sd-rv__av { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; text-align: center; }
.pd .sd-rv__nm { font-size: 13px; font-weight: bold; line-height: 1.35; color: var(--d-ink); }
.pd .sd-rv__nm small { display: block; font-size: 10.5px; font-weight: normal; color: var(--d-sub); }
.pd .sd-rv__bq {
	position: relative; margin: 0; padding: 14px 16px; border: 1px solid #f0dcb4; border-radius: 4px 14px 14px 14px; background: #fff; quotes: none;
}
.pd .sd-rv__bq::before { content: ""; position: absolute; left: -8px; top: 18px; width: 14px; height: 14px; background: #fff; border-left: 1px solid #f0dcb4; border-bottom: 1px solid #f0dcb4; transform: rotate(45deg); }
.pd .sd-rv__t { margin: 0 0 6px; font-size: 16.5px; font-weight: bold; line-height: 1.5; color: var(--d-ink); }
.pd .sd-rv__b { margin: 0; font-size: 15px; line-height: 2; color: #2a333b; }
.pd .sd-rv__who { margin: 10px 0 0; font-size: 12.5px; color: var(--d-sub); text-align: right; }
.pd .sd-rv__ph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; }
.pd .sd-rv__p { padding: 0; border: 1px solid var(--sd-line); border-radius: 10px; overflow: hidden; background: #fff; cursor: zoom-in; aspect-ratio: 1 / 1; }
.pd .sd-rv__p img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.pd .sd-reply { margin: 12px 0 0; padding: 14px 18px; border: 1px solid var(--sd-line); border-radius: 14px; background: #f6f9fb; }
.pd .sd-reply.is-reply { position: relative; margin-left: 40px; }
.pd .sd-reply.is-reply::before { content: ""; position: absolute; left: -22px; top: -12px; width: 16px; height: 30px; border-left: 2px solid #c9d3dc; border-bottom: 2px solid #c9d3dc; border-bottom-left-radius: 10px; }
.pd .sd-reply__h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 13.5px; font-weight: bold; color: var(--d-ink); }
.pd .sd-reply__i { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--d-acc); }
.pd .sd-reply__i svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.pd .sd-reply__b { margin: 0; font-size: 14px; line-height: 1.9; }
.pd .sd-reply__h small { display: block; font-size: 11px; font-weight: normal; color: var(--d-sub); }
.pd .sd-reply .sd-av { width: 48px; height: 48px; }
.pd .sd-reply .sd-av img { width: 34px; height: 34px !important; }

/* ---- 商品・関連ページへの導線 ---- */
.pd .sd-go { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.pd .sd-go > li { margin: 0; padding: 0; }
.pd .sd-go > li::before { content: none; }
.pd .sd-go a {
	position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 60px; box-sizing: border-box;
	padding: 10px 34px 10px 14px; border: 1px solid var(--sd-line); border-radius: 12px; background: #fff; text-decoration: none; color: var(--d-ink);
}
.pd .sd-go a::after {
	content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px;
	border-top: 2px solid var(--d-acc); border-right: 2px solid var(--d-acc); transform: translateY(-50%) rotate(45deg);
}
.pd .sd-go a:hover { border-color: var(--d-acc); }
.pd .sd-go b { font-size: 14px; line-height: 1.45; }
.pd .sd-go span { font-size: 12px; color: var(--d-sub); }

/* 件数ぶんの列（3件なら3列。2・4件は2列） */
.pd .sd-go.is-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd .sd-go.is-n1 { grid-template-columns: minmax(0, 1fr); }

/* ---- 関連する施工事例 ---- */
.pd .sd-rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 14px; padding: 0; list-style: none; }
.pd .sd-rel > li { margin: 0; padding: 0; }
.pd .sd-rel > li::before { content: none; }
.pd .sd-rel a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sd-line); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; color: var(--d-ink); }
.pd .sd-rel a:hover { border-color: var(--d-acc); }
.pd .sd-rel__ph { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--sd-line); }
.pd .sd-rel__ph > span { position: relative; display: block; aspect-ratio: 1 / 1; background: #eef2f5; overflow: hidden; }
.pd .sd-rel__ph img { display: block; width: 100%; height: 100% !important; object-fit: cover; }
.pd .sd-rel__ph i { position: absolute; left: 4px; top: 4px; padding: 0 6px; border-radius: 999px; background: rgba(60, 70, 80, .85); color: #fff; font-style: normal; font-size: 10.5px; font-weight: bold; line-height: 1.6; }
.pd .sd-rel__ph i.is-a { background: var(--d-acc); }
.pd .sd-rel__k { align-self: flex-start; margin: 8px 10px 0; padding: 0 8px; border-radius: 999px; background: var(--sd-soft); border: 1px solid var(--sd-line); font-size: 11px; font-weight: bold; color: var(--d-sub); line-height: 1.7; }
.pd .sd-rel__k.is-model { background: color-mix(in srgb, var(--d-acc) 10%, #fff); border-color: color-mix(in srgb, var(--d-acc) 40%, #fff); color: var(--d-acc); }
.pd .sd-rel__t { margin: 0; border: 0; background: none; padding: 4px 10px 0; font-size: 13px; font-weight: bold; line-height: 1.45; overflow-wrap: anywhere; }
.pd .sd-rel__s { padding: 2px 10px 10px; font-size: 11.5px; color: var(--d-sub); }

/* ---- 写真の拡大 ---- */
.sd-zoom { max-width: min(96vw, 1000px); max-height: 92vh; padding: 0; border: 0; border-radius: 10px; background: #111; overflow: hidden; }
.sd-zoom::backdrop { background: rgba(0, 0, 0, .75); }
.sd-zoom img { display: block; max-width: min(96vw, 1000px); max-height: 92vh; width: auto; height: auto; margin: 0 auto; }
.sd-zoom form { position: absolute; right: 6px; top: 6px; margin: 0; }
.sd-zoom__x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #222; font-size: 24px; line-height: 44px; cursor: pointer; }

/* ---- スマホ（@media はCSSの最後） ---- */
@media screen and (max-width: 767px) {
	.pd .sd-h__m { font-size: 20px; }
	.pd .sd-h__s { font-size: 13px; }
	.pd .sd-h__c { padding: 3px 10px; }
	.pd .sd-ba { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.pd .sd-ba__ar { transform: rotate(135deg); margin: 2px auto 10px; }
	/* 交換前・交換後を同じ形のカード2枚で縦に重ね、継ぎ目に下向きの丸い矢印（2026-10-14「スマホデザイン直せ」）。
	   横並びだと長い型番（RUX-V1312FFDA-E 等）が途中で折れて矢印に重なるため縦 */
	.pd .sd-swap { position: relative; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; background: #f7f9fb; }
	.pd .sd-swap.is-new { grid-template-columns: minmax(0, 1fr); }
	.pd .sd-swap__s, .pd .sd-swap__s.is-a { text-align: left; padding: 11px 12px 12px; margin: 0; border-radius: 12px; background: #fff; border: 1px solid var(--sd-line); }
	.pd .sd-swap__s.is-a { background: color-mix(in srgb, var(--d-acc) 9%, #fff); border-color: color-mix(in srgb, var(--d-acc) 35%, #fff); }
	.pd .sd-swap__k { margin-bottom: 5px; font-size: 11px; padding: 0 10px; }
	.pd .sd-swap__d { font-size: 11.5px; }
	.pd .sd-swap__ar { position: absolute; left: 50%; top: 50%; z-index: 1; width: 32px; height: 32px; margin: 0; transform: translate(-50%, -50%) rotate(90deg); box-shadow: 0 0 0 4px #f7f9fb; }
	.pd .sd-swap__ar svg { width: 16px; height: 16px; }
	.pd .sd-swap__m { font-size: 18px; line-height: 1.35; }
	.pd .sd-swap__s, .pd .sd-swap__s.is-a { padding: 12px 14px; }
	.pd .sd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pd .sd-facts > li { padding: 10px 12px; }
	.pd .sd-facts > li:nth-child(odd) { border-left: 0; }
	.pd .sd-facts > li:nth-child(n+3) { border-top: 1px solid var(--sd-line); }
	.pd .sd-facts > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.pd .sd-pr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pd .sd-pr__c { display: block; grid-row: auto; }
	.pd .sd-pr__v b { font-size: 26px; }
	.pd .sd-go, .pd .sd-go.is-n3 { grid-template-columns: minmax(0, 1fr); }
	.pd .sd-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.pd .sd-pn__t { font-size: 12.5px; }
	.pd .sd-pn { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.pd .sd-pn__a { gap: 10px; padding: 10px 12px; }
	.pd .sd-pn__c { width: 32px; height: 32px; }
	.pd .sd-rv { padding: 14px; }
	.pd .sd-rv__score { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.pd .sd-rv__num b { font-size: 40px; }
	.pd .sd-rv__avg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; text-align: left; }
	.pd .sd-rv__stars { margin: 0; justify-content: flex-start; }
	.pd .sd-rv__cap { flex-basis: 100%; }
	.pd .sd-rv__q { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
	.pd .sd-av { width: 48px; height: 48px; }
	.pd .sd-av img { width: 34px; height: 34px !important; }
	.pd .sd-rv__bq { padding: 12px 13px; }
	.pd .sd-rv__b { font-size: 14.5px; }
	.pd .sd-rv__ph { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pd .sd-reply.is-reply { margin-left: 22px; }
	.pd .sd-reply.is-reply::before { left: -16px; width: 12px; }
}
@media screen and (max-width: 360px) {
	.pd .sd-pn { grid-template-columns: minmax(0, 1fr); }
	.pd .sd-pn__a.is-next { text-align: left; }
	.pd .sd-facts { grid-template-columns: minmax(0, 1fr); }
	.pd .sd-facts > li { border-left: 0; }
	.pd .sd-facts > li + li { border-top: 1px solid var(--sd-line); }
}