.potaden-products {
	--potaden-border: #d8dce3;
	--potaden-head-bg: #f4f6f8;
	--potaden-text: #222;
	--potaden-muted: #68707b;
	--potaden-accent: #1769aa;
	color: var(--potaden-text);
	font-size: 14px;
	line-height: 1.55;
}

.potaden-products__scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.potaden-products__scroll:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

.potaden-products__table {
	width: 100%;
	min-width: 1040px;
	margin: 0;
	border: 1px solid var(--potaden-border);
	border-collapse: collapse;
	background: #fff;
}

.potaden-products__table th,
.potaden-products__table td {
	padding: 10px 12px;
	border: 1px solid var(--potaden-border);
	vertical-align: top;
	text-align: left;
	white-space: nowrap;
}

.potaden-products__table th {
	background: var(--potaden-head-bg);
	font-weight: 700;
}

.potaden-products__unit {
	color: var(--potaden-muted);
}

/* Ver.0.10.70: card/comparison-table short form of an estimated (non-official) AC-alone charge
   time — e.g. "約5.1時間（推定）". Same quiet warm-gray as the detail-page estimated value
   (.potaden-product-detail__spec-cell--estimated); the full disclaimer sentence is detail-page
   only and is never shown here. */
.potaden-products__estimated {
	color: #6b5d42;
}

/* Ver.0.10.4: `white-space: nowrap` protects the badge from mid-word wrapping on narrow mobile
   widths — width itself stays content-based (`inline-block`/`inline-flex`, no fixed width), so a
   longer label (e.g. "型落ちモデル", restored from the shortened "型落モデル") never needs a
   smaller font to fit; if space is tight, the badge keeps its own width and whatever sits next to
   it wraps instead. */
.potaden-products__status {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 4px;
	background: #eef1f4;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.potaden-products__status--current {
	background: #e6f5eb;
	color: #176b35;
}

.potaden-products__status--old_model {
	background: #fff3d6;
	color: #745200;
}

.potaden-products__status--discontinued {
	background: #eceef1;
	color: #555d66;
}

.potaden-products__link {
	color: var(--potaden-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.potaden-products__empty {
	margin: 0;
	padding: 16px;
	border: 1px solid var(--potaden-border);
	background: var(--potaden-head-bg);
}

.potaden-products--search {
	margin-bottom: 24px;
}

/* Ver.0.10.6: originally an explicit "this is one search-operation panel" treatment — a bordered/
   tinted box wrapping the whole form.
   Ver.0.10.57: that outer frame is removed — it doubled up with the two tier boxes inside it
   (製品名・メーカー名から調べる／条件から自分にあう製品を探す), reading as a "box inside a box".
   Those two tiers are now the only visible boxes; the form element itself carries no border/
   background/padding of its own. */
.potaden-products__search-form {
	padding: 0;
	border: 0;
	background: transparent;
}

.potaden-products__search-fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px 14px;
}

/* Ver.0.10.56: 製品名から直接探す — 単独フィールドを親カラム幅いっぱいに広げる。狭い3列グリッドの
   1マス分（コード入力欄のような見た目）にはしない。入力欄自体は既存の`width: 100%`ルールを流用。 */
.potaden-products__search-fields--wide {
	grid-template-columns: minmax(0, 1fr);
}

.potaden-products__search-advanced {
	margin-top: 16px;
	border: 1px solid var(--potaden-border);
	border-radius: 6px;
	background: #fff;
}

.potaden-products__search-advanced > summary {
	padding: 11px 14px;
	color: #303943;
	font-weight: 700;
	cursor: pointer;
}

.potaden-products__search-advanced > summary:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

.potaden-products__search-advanced[open] > summary {
	border-bottom: 1px solid var(--potaden-border);
}

.potaden-products__search-advanced .potaden-products__search-fields {
	padding: 14px;
}

/* Ver.0.10.68: real-page DOM check found the accordion's a11y-only heading
   (`<h3 class="screen-reader-text">詳しい検索条件</h3>`, visually redundant with the visible
   `<summary>` text) was NOT actually clipped off-screen on this site — it rendered with SWELL's
   default heading margin (measured live: ~54.6px above / ~36.4px below, at 18.2px font-size),
   adding ~100px of dead space between the opened summary and the first field ("AC出力口数")
   that had nothing to do with the intended 14px `.search-fields` padding above. Forcing the
   standard visually-hidden pattern here (scoped only to this one heading inside
   `.search-advanced`, not the site-wide `.screen-reader-text` class) removes it from layout
   entirely, so the only remaining space is the existing 14px padding — already within the
   requested 12–16px range, so no other spacing was changed. */
.potaden-products__search-advanced .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.potaden-products__search-field,
.potaden-products__search-range {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	/* Ver.0.9.4: keeps fields clear of the sticky compare bar (top: 10px) when the browser jumps
	   here via the "容量・出力から探す" #anchor link. display:contents has no box of its own, so
	   this lives on the fields themselves rather than on .potaden-products__search-anchor-target. */
	scroll-margin-top: 110px;
	/* Ver.0.10.5: background transitions smoothly when a select's value changes via JS. */
	transition: background-color 0.15s ease;
}

/* Ver.0.10.5: a value is set on this field — pale yellow background so a chosen search condition
   is never overlooked (server-rendered on initial load from the current filter value, then kept
   in sync live by `product-search.js` on every `change` — UI-only, the GET/search logic itself
   is unchanged). Unset/"すべて" stays the plain transparent background above. */
.potaden-products__search-field.is-selected {
	background: #fff8d8;
}

/* Ver.0.9.4: scroll/focus target for the "容量・出力から探す" gateway link. display:contents keeps
   the wrapped capacity/output fields as direct grid items of .potaden-products__search-fields so the
   3-column layout is unaffected; the wrapper itself only exists to give #anchor navigation something
   to land on and focus. */
.potaden-products__search-anchor-target {
	display: contents;
}

.potaden-products__search-field > span,
.potaden-products__search-range > legend {
	display: block;
	margin: 0 0 5px;
	padding: 0;
	font-size: 13px;
	font-weight: 700;
}

.potaden-products__search-field select,
.potaden-products__search-field input,
.potaden-products__search-range input {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 42px;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #b9c0c8;
	border-radius: 4px;
	background: #fff;
	color: var(--potaden-text);
	font: inherit;
}

.potaden-products__search-field select:focus,
.potaden-products__search-field input:focus,
.potaden-products__search-range input:focus {
	border-color: var(--potaden-accent);
	box-shadow: 0 0 0 1px var(--potaden-accent);
	outline: 0;
}

.potaden-products__search-range > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 7px;
	align-items: center;
}

.potaden-products__result-count {
	margin: 0;
	white-space: nowrap;
}

.potaden-products__result-count strong {
	font-size: 18px;
}

.potaden-products__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.potaden-products__card {
	display: flex;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--potaden-border);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(20, 30, 40, 0.06);
	overflow: hidden;
	flex-direction: column;
}

/* Ver.0.10.5: now an `<a>` to the detail page (was a plain `<div>`) — `text-decoration: none`
   guards the placeholder's "NO IMAGE" text against an inherited link underline. */
.potaden-products__image {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: clamp(235px, 23.5vw, 310px);
	padding: 0;
	align-items: center;
	justify-content: center;
	background: #f4f6f8;
	overflow: hidden;
	text-decoration: none;
}

.potaden-products__image-element {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

.potaden-products__image-placeholder {
	color: #9299a2;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.potaden-products__card-body {
	display: flex;
	padding: 12px 16px 16px;
	flex: 1;
	flex-direction: column;
}

.potaden-products__card-title {
	margin: 0 0 8px;
	padding: 0 0 5px;
	border: 0;
	border-bottom: 1px solid #e4e8ec;
	background: none;
	font-size: 18px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.potaden-products__card-title::before,
.potaden-products__card-title::after {
	content: none !important;
	display: none !important;
}

.potaden-products__details {
	margin: 0;
}

.potaden-products__detail-row {
	display: grid;
	grid-template-columns: minmax(82px, 36%) minmax(0, 1fr);
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid #edf0f2;
}

.potaden-products__detail-row dt,
.potaden-products__detail-row dd {
	min-width: 0;
	margin: 0;
	overflow-wrap: anywhere;
}

.potaden-products__detail-row dt {
	color: var(--potaden-muted);
	font-weight: 700;
}

.potaden-products__card-action {
	padding-top: 0;
}

.potaden-products__card-action .potaden-products__link {
	display: flex;
	box-sizing: border-box;
	min-height: 42px;
	padding: 10px 14px;
	border-radius: 5px;
	background: var(--potaden-accent);
	color: #fff;
	text-align: center;
	text-decoration: none;
	align-items: center;
	justify-content: center;
}

.potaden-products__card-controls {
	display: flex;
	margin-top: auto;
	padding-top: 12px;
	gap: 6px;
	flex-direction: column;
}

.potaden-products__card-action .potaden-products__link:hover,
.potaden-products__card-action .potaden-products__link:focus-visible {
	background: #115486;
	color: #fff;
}

.potaden-products__compare-choice {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding: 7px 10px;
	border: 1px solid #b8ccdc;
	border-radius: 5px;
	background: #f5f9fc;
	color: #245f8a;
	gap: 7px;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	cursor: pointer;
}

.potaden-products__compare-choice input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--potaden-accent);
}

.potaden-products__compare-bar {
	display: flex;
	margin-top: 20px;
	padding: 14px 16px;
	border: 1px solid var(--potaden-border);
	border-radius: 8px;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	background: #f8f9fa;
}

.potaden-products__compare-count,
.potaden-products__compare-message {
	margin: 0;
}

.potaden-products__compare-count strong {
	font-size: 20px;
}

.potaden-products__compare-message {
	margin-top: 3px;
	color: var(--potaden-muted);
	font-size: 13px;
}

.potaden-products__compare-submit {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--potaden-accent);
	border-radius: 5px;
	background: var(--potaden-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.potaden-products__compare-submit:hover,
.potaden-products__compare-submit:focus-visible {
	background: #115486;
}

.potaden-products__compare-submit:disabled {
	border-color: #aeb4bb;
	background: #aeb4bb;
	cursor: not-allowed;
	opacity: 0.8;
}

.potaden-products--comparison {
	margin-bottom: 24px;
}

.potaden-products__comparison-heading {
	display: flex;
	margin-bottom: 12px;
	gap: 16px;
	align-items: flex-end;
	justify-content: space-between;
}

.potaden-products__comparison-title,
.potaden-products__comparison-heading p {
	margin: 0;
}

.potaden-products__comparison-title {
	font-size: 24px;
	line-height: 1.35;
}

.potaden-products__comparison-heading p {
	margin-top: 3px;
	color: var(--potaden-muted);
}

.potaden-products__comparison-clear {
	white-space: nowrap;
}

.potaden-products__comparison-scroll {
	max-width: 100%;
	border: 1px solid var(--potaden-border);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.potaden-products__comparison-scroll:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

.potaden-products__comparison-table {
	width: max-content;
	min-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: #fff;
}

.potaden-products__comparison-table th,
.potaden-products__comparison-table td {
	box-sizing: border-box;
	min-width: 220px;
	padding: 11px 12px;
	border: 0;
	border-right: 1px solid var(--potaden-border);
	border-bottom: 1px solid var(--potaden-border);
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
}

.potaden-products__comparison-table tr:last-child th,
.potaden-products__comparison-table tr:last-child td {
	border-bottom: 0;
}

.potaden-products__comparison-table th:last-child,
.potaden-products__comparison-table td:last-child {
	border-right: 0;
}

.potaden-products__comparison-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #eef2f5;
	font-size: 15px;
}

.potaden-products__comparison-table .potaden-products__comparison-label {
	position: sticky;
	left: 0;
	z-index: 3;
	width: 150px;
	min-width: 150px;
	background: #f5f7f9;
	font-weight: 700;
}

.potaden-products__comparison-table thead .potaden-products__comparison-label {
	z-index: 4;
	background: #e7ecf0;
}

.potaden-products__comparison-image {
	display: block;
	width: 100%;
	height: 150px;
	margin: 0;
	object-fit: contain;
}

.potaden-products__comparison-notice {
	margin-bottom: 18px;
	padding: 12px 14px;
	border: 1px solid #8db7d8;
	border-radius: 5px;
	background: #eef7fd;
}

.potaden-products__comparison-notice--warning {
	border-color: #dfb85c;
	background: #fff8e6;
}

@media (max-width: 1023px) {
	.potaden-products__search-fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.potaden-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Ver.0.10.6: modest compensating pull-up for the search/list page, mobile only, now that the
	   page's own title block above is hidden (see the `.potaden-products-fullwidth` hide rule).
	   Best-effort/tunable value — this environment cannot see how much leftover spacing the
	   theme's own wrapper padding/margin actually leaves once its title content is hidden; adjust
	   this figure after checking the real page. PC is untouched (outside this media query).
	   Ver.0.10.55: retargeted from the removed standalone status-gateways nav to the search form
	   itself, since すぐ探す now lives inside the form as its first child. */
	.potaden-products-fullwidth .potaden-products__search-form {
		margin-top: 0;
	}

	.potaden-products__image {
		height: 280px;
	}

	.potaden-products__comparison-heading,
	.potaden-products__compare-bar {
		align-items: stretch;
		flex-direction: column;
	}

	.potaden-products__compare-submit {
		width: 100%;
	}

	.potaden-products__comparison-table th,
	.potaden-products__comparison-table td {
		min-width: 190px;
	}

	.potaden-products__comparison-table .potaden-products__comparison-label {
		width: 112px;
		min-width: 112px;
	}

	.potaden-products__search-fields {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
	}

	/* Keep label→control at the shared 6px relationship above, while removing the previous
	   30px-feeling control→next-label gap (field padding + grid gap + next field padding). */
	.potaden-products__search-field,
	.potaden-products__search-range {
		padding: 5px 6px;
	}

	.potaden-products__result-count {
		grid-row: 1;
		white-space: normal;
	}

	.potaden-products__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}

	.potaden-products__scroll {
		overflow: visible;
	}

	.potaden-products__table,
	.potaden-products__table tbody,
	.potaden-products__table tr,
	.potaden-products__table td {
		display: block;
		width: 100%;
		min-width: 0;
	}

	.potaden-products__table {
		border: 0;
		background: transparent;
	}

	.potaden-products__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.potaden-products__table tr {
		margin: 0 0 16px;
		border: 1px solid var(--potaden-border);
		border-radius: 6px;
		background: #fff;
		overflow: hidden;
	}

	.potaden-products__table td {
		display: grid;
		grid-template-columns: minmax(88px, 34%) 1fr;
		gap: 10px;
		padding: 9px 12px;
		border: 0;
		border-bottom: 1px solid var(--potaden-border);
		white-space: normal;
	}

	.potaden-products__table td:last-child {
		border-bottom: 0;
	}

	.potaden-products__table td::before {
		content: attr(data-label);
		font-weight: 700;
	}
}

/* Ver.0.9.2 production product-list layout. SWELL's sidebar filter controls one-column output. */
/* Ver.0.10.12: the search database owns its visible H1 instead of borrowing SWELL's article
   title chrome. It is intentionally an unboxed functional-page heading above the two gateways. */
.potaden-products__page-header {
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 4px 0 0;
	background: #fff;
}

.potaden-products__page-title-row {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 8px;
}

/* Ver.0.10.63: 実用的なページ見出しとして扱う（「大きなデザイン見出し」にしない）— 左揃え・
   アイコンなし・囲みなし・色帯なし・下線なし（旧`.page-title-accent`は削除）。将来ヒーロー画像が
   すぐ上に来る前提で、色はtier見出し（`.search-tier--direct`）と同じ系統のネイビーに揃えた。 */
.potaden-products__page-title {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #22314a !important;
	font-size: clamp(28px, 3vw, 32px) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	letter-spacing: 0.01em;
	text-align: left;
}

.potaden-products__page-title::before,
.potaden-products__page-title::after {
	content: none !important;
	display: none !important;
}

.potaden-products__page-description {
	max-width: 880px;
	margin: 8px 0 0;
	color: #5a6672;
	font-size: 14.5px;
	font-weight: 400;
	line-height: 1.7;
}

/* Ver.0.10.9: initially closed disclosure immediately below the two search gateways. Native
   details/summary semantics keep it keyboard-operable without any search-page JavaScript. */
.potaden-products__manufacturer-policy {
	box-sizing: border-box;
	margin: 0 0 12px;
	padding: 0;
	border: 1px solid #e1e6ea;
	border-radius: 7px;
	background: #f6f8fa;
	color: #303840;
	overflow: hidden;
}

.potaden-products__manufacturer-policy-summary {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) 18px;
	box-sizing: border-box;
	min-height: 43px;
	margin: 0;
	padding: 10px 12px;
	align-items: center;
	gap: 7px;
	list-style: none;
	cursor: pointer;
}

.potaden-products__manufacturer-policy-summary::-webkit-details-marker {
	display: none;
}

.potaden-products__manufacturer-policy-summary:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: -2px;
}

.potaden-products__manufacturer-policy-title {
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #303840 !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.4;
}

.potaden-products__manufacturer-policy-bulb,
.potaden-products__manufacturer-policy-chevron {
	display: block;
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}

.potaden-products__manufacturer-policy-bulb {
	color: #b78a22;
}

.potaden-products__manufacturer-policy-chevron {
	color: #737d87;
}

.potaden-products__manufacturer-policy[open] .potaden-products__manufacturer-policy-chevron {
	transform: rotate(180deg);
}

.potaden-products__manufacturer-policy-content {
	padding: 0 12px 11px 37px;
}

.potaden-products__manufacturer-policy-content p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
}

.potaden-products__manufacturer-policy-names {
	font-weight: 600;
}

/* Ver.0.11.5: the 5 selection criteria — small heading + 1-line description repeated 5 times,
   kept inside the existing accordion content (no new component). List-style is suppressed and
   replaced by CSS counters so PC/SP share one simple "1. ラベル" heading without duplicating the
   number in markup. Vertical rhythm only; no card chrome, no extra border/background per item, so
   this stays compact while the accordion is open and doesn't affect the closed-state height. */
.potaden-products__manufacturer-policy-list {
	display: flex;
	flex-direction: column;
	margin: 10px 0;
	padding: 0;
	gap: 9px;
	list-style: none;
	counter-reset: potaden-manufacturer-policy-counter;
}

.potaden-products__manufacturer-policy-item {
	counter-increment: potaden-manufacturer-policy-counter;
}

.potaden-products__manufacturer-policy-item-label {
	display: block;
	margin-bottom: 2px;
	color: #303840;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.potaden-products__manufacturer-policy-item-label::before {
	content: counter(potaden-manufacturer-policy-counter) '. ';
	color: #b78a22;
}

.potaden-products__manufacturer-policy-item-summary {
	display: block;
	color: #5a6672;
	font-size: 13.5px;
	line-height: 1.6;
}

.potaden-products__result-summary {
	display: flex;
	margin: 0 0 18px;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.potaden-products__result-summary .potaden-products__result-count,
.potaden-products__result-breakdown {
	margin: 0;
}

.potaden-products__result-summary .potaden-products__result-count {
	padding: 0;
	background: transparent;
	font-size: 16px;
}

.potaden-products__result-breakdown {
	color: var(--potaden-muted);
	font-size: 13px;
}

.potaden-products__card-manufacturer {
	display: flex;
	margin: 0 0 7px;
	color: var(--potaden-muted);
	font-size: 13px;
	font-weight: 700;
	gap: 6px;
	align-items: baseline;
}

.potaden-products__card-manufacturer-label {
	color: #7b848d;
	font-size: 11px;
	font-weight: 600;
}

.potaden-products__card-status {
	display: flex;
	min-height: 33px;
	margin-bottom: 7px;
	gap: 7px;
	align-items: center;
	flex-wrap: wrap;
}

.potaden-products__card-release-year {
	color: #69727c;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.potaden-products__pagination {
	margin: 30px 0 10px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	overflow: visible;
}

.potaden-products__pagination ul.page-numbers {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 8px;
	align-items: center;
	justify-content: center;
	list-style: none;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* SWELL and block styles may decorate generic navigation/list elements with a wide background
   or pseudo-element. Pagination owns only the individual page buttons, so neutralize those
   inherited decorations at every wrapper level. */
.potaden-products__pagination::before,
.potaden-products__pagination::after,
.potaden-products__pagination ul.page-numbers::before,
.potaden-products__pagination ul.page-numbers::after,
.potaden-products__pagination li::before,
.potaden-products__pagination li::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

.potaden-products__pagination li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.potaden-products__pagination a.page-numbers,
.potaden-products__pagination span.page-numbers {
	display: inline-flex;
	box-sizing: border-box;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 11px;
	border: 1px solid #cbd1d7;
	border-radius: 7px;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #34404b;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.potaden-products__pagination span.current,
.potaden-products__pagination a.page-numbers:hover,
.potaden-products__pagination a.page-numbers:focus-visible {
	border-color: var(--potaden-accent);
	background: var(--potaden-accent);
	color: #fff;
}

@media (max-width: 767px) {
	.potaden-products__page-header {
		margin-bottom: 16px;
		padding-top: 2px;
	}

	.potaden-products__page-title-row {
		gap: 7px;
	}

	.potaden-products__page-title {
		font-size: clamp(23px, 6.5vw, 26px) !important;
		line-height: 1.35 !important;
	}

	.potaden-products__page-description {
		font-size: 13.5px;
		line-height: 1.65;
	}

	.potaden-products__result-summary {
		display: block;
	}

	.potaden-products__result-breakdown {
		margin-top: 5px;
	}

	.potaden-products__compare-bar {
		align-items: center;
		flex-direction: row;
	}

	.potaden-products__compare-chips {
		display: none;
	}

	.potaden-products__compare-submit {
		width: auto;
		min-height: 40px;
		padding: 8px 11px;
		font-size: 13px;
	}

	.potaden-products__pagination ul.page-numbers {
		gap: 6px;
		flex-wrap: wrap;
	}

	.potaden-products__pagination a.page-numbers,
	.potaden-products__pagination span.page-numbers {
		min-width: 44px;
		min-height: 44px;
	}
}

/* Ver.0.6 search guidance and form hierarchy.
   Ver.0.10.7: this later rule used to overwrite the Ver.0.10.6 blue-gray panel with white and
   a strong shadow. Kept the final cascade winner visibly panel-like on the live SWELL page.
   Ver.0.10.57: the outer panel itself is removed (see the earlier `.search-form` rule) — this
   rule, being later in the cascade with equal specificity, was still winning and silently
   reintroducing the exact border/background/padding that edit removed. Neutralized to match. */
.potaden-products__search-form {
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* Ver.0.10.57: `.search-intro`／`.search-intro-heading` and their rules were removed here — the
   form's own intro heading was deleted in Ver.0.10.56 (the page H1 above already covers it), so
   this whole selector family had no matching markup left. */
.potaden-products__search-tier-heading,
.potaden-products__search-group-title {
	margin: 0;
}

.potaden-products__search-groups {
	display: grid;
	gap: 10px;
}

/* Ver.0.10.55: small outline icon shared by the search UI's two main entry-point headings —
   same single-color, uniform-stroke language as `Potaden_Product_Detail::render_section_icon()`,
   sized for a heading line. See `render_ui_icon()`. Color/size get a further per-tier bump inside
   `.search-tier-heading .ui-icon` (Ver.0.10.57). */
.potaden-products__ui-icon {
	display: inline-block;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-right: 6px;
	color: #6b7580;
	vertical-align: -3px;
}

/* Ver.0.10.54: 検索UIの最上位の区分（tier）＝検索方法の違いだけに色を使う。中に入れ子の
   .search-groupは自前の枠・背景を持たず（下の`.potaden-products__search-tier
   .potaden-products__search-group`参照）、tier自体が視覚的な境界を担う — カードを重ねず、2大区分
   だけを基本構造にする。
   Ver.0.10.55: 上下パディング・見出し下マージンを圧縮し、情報密度を上げた。
   Ver.0.10.57: 外枠（.search-form）を廃止したのでtierが検索UI内で唯一の可視ボックスになった。
   本体の色分けは見出しバー側（下の`.search-tier-heading`）へ移し、tier本体はごく淡い差のみに抑える
   （箱感を強めすぎない）。上下paddingもさらに圧縮。 */
.potaden-products__search-tier {
	padding: 10px 14px;
	border: 1px solid #e7e9ec;
	border-radius: 10px;
}

.potaden-products__search-tier--direct {
	background: #fff;
}

.potaden-products__search-tier--guided {
	border-color: #e3e8ea;
	background: #fbfdfd;
}

/* Ver.0.10.57: SWELL見出しの「左アイコン＋テキスト」構成をベースに、検索UI用の見出しバーとして
   淡い差し色・ごく弱い角丸・少し大きめのアイコンを足す。信頼感を保つため彩度は低いまま、面積も
   見出し1行分だけに留める（派手なバナー化はしない）。
   Ver.0.10.58: これはH2要素なので、SWELLテーマ側の記事見出しデフォルト（大きな上下マージン・
   下線・背景）がこのルールより強い詳細度／!importantで残っていると、tier上端と見出しの間、
   見出しと中身の間、2つ目のtier見出し上に数十px単位の余白が漏れて見える（実機スクショで確認済み）。
   旧`.search-intro-heading`（Ver.0.10.56で削除済み）が同じ理由で!importantを使っていたのと同じ
   対処として、このルールにも!importantを付けてSWELLのデフォルトを確実に打ち消す。 */
.potaden-products__search-tier-heading {
	display: flex !important;
	margin: -10px -14px 0 !important;
	padding: 9px 14px !important;
	border: 0 !important;
	border-radius: 8px 8px 0 0 !important;
	box-shadow: none !important;
	align-items: center;
	font-size: 15.5px !important;
	font-weight: 800 !important;
	line-height: 1.4 !important;
}

.potaden-products__search-tier--direct .potaden-products__search-tier-heading {
	background: #eef1f8;
	color: #2c3a5c;
}

.potaden-products__search-tier--guided .potaden-products__search-tier-heading {
	background: #e9f1f4;
	color: #2a4750;
}

.potaden-products__search-tier-heading .potaden-products__ui-icon {
	width: 19px;
	height: 19px;
	color: inherit;
}

/* Ver.0.10.56: 「条件から自分にあう製品を探す」見出し直下の短い補足文。旧`.search-intro p`と同じ
   トーン（見出しに近接、離れた要素からは離す、という情報階層を余白で示す）。
   Ver.0.10.57: 見出しが独立バーになったため、本文側の余白として付け直す。 */
.potaden-products__search-tier-description {
	margin: 8px 0 0;
	color: var(--potaden-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Ver.0.10.75: 検索トップ2枚の説明イラスト（ユーザー確定デザイン、改変禁止）。Ver.0.10.74からの
   変更点：(1) PC画像を縮小してSPに使う方式をやめ、PC/SP専用に用意された別画像を`<picture>`
   （マークアップ側）で出し分ける。(2) 「メーカー・シリーズから製品を探す」専用だった`--linked`
   修飾（2カラムの右側という狭い列に収める版）は、セクション全体を1枚で説明する統合イラストへの
   変更に伴い削除——今はどちらのイラストも各tier/セクションの見出し直下・全幅という同じ配置。
   検索UI本体より目立たせない補助要素という位置づけは変えず、`max-width`で頭打ちする。
   Ver.0.10.84時点の実寸：PC条件検索=2048×768、PC製品名・メーカー名=1896×829、SP条件検索=
   1604×905、SP製品名・メーカー名=1588×901——4枚とも縦横比が微妙に異なり、かつユーザー方針として
   「2枚の高さを揃える」ことより「各画像が横幅いっぱいで内容が大きく見えること」を優先するため、
   固定`aspect-ratio`は使わずwidth/height属性（PC）・画像の内在比率（SP、CSSでの明示なし）だけに
   任せる。 */
.potaden-products__search-tier-illustration {
	margin: 12px 0 0;
	line-height: 0;
}

/* Ver.0.10.77: 実画面確認でPC版イラストが`max-width: 720px`のせいで検索セクションの有効幅（838px、
   検索フィールド行と同じ）を使い切れず、画像内の文字が小さく読みにくいとの指摘を受け、`max-width`
   を撤去した。検索フィールド行と同じ`<p>`の幅（`width: 100%`）まで自然に広がるだけで、画像そのもの
   （ユーザー提供・改変禁止）は再制作していない。
   Ver.0.10.78: 「製品名・メーカー名から調べる」用のPC画像がユーザー提供の新版（1896×829）へ差し替わり、
   もう一方のPC画像（条件検索、2048×768）と縦横比が異なる2種類になったため、ここでの固定`aspect-ratio`
   指定は撤去した。各`<img>`のwidth/height属性（PHP側で画像ごとの実寸を指定）だけで、ブラウザは
   標準機能として正しい縦横比を読み込み前から確保する（CLS対策として`aspect-ratio`の明示は必須では
   ない）。 */
.potaden-products__search-tier-illustration img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ver.0.10.84: SP側の固定`aspect-ratio`（Ver.0.10.81で追加）を撤去した。今回のSP2枚は意図的に
   縦横比が完全一致ではない（1604×905と1588×901、対になる画像だが高さを揃える設計ではない）ため、
   固定`aspect-ratio`を指定すると画像本来の比率と食い違い、`width:100%; height:auto`の`auto`側が
   CSSの`aspect-ratio`から逆算されて画像が横方向に伸び縮みして見える不具合があった（実画面で
   「製品名・メーカー名から調べる」画像が横に潰れて見える、として報告された事象）。`aspect-ratio`を
   指定しなければ、ブラウザは画像の実際の内在比率（intrinsic ratio）で`height`を自動計算するため、
   2枚の縦横比が異なっていても、それぞれ正しい比率のまま表示される。「2枚の高さを揃える」ことは
   今回のユーザー方針で明示的に優先しないとされたため、意図的にCSS側で高さを合わせる指定はしない。 */

.potaden-products__search-tier-body {
	display: grid;
	margin-top: 10px;
	gap: 10px;
}

/* Ver.0.10.55: 「製品名・メーカー名から調べる」内をPCで2カラムに — 左：製品名から直接探す、
   右：メーカー・シリーズから製品を探す。スマホ（767px以下）は縦積みに戻す（下の媒体クエリ参照）。
   Ver.0.10.56: 右カラム（3セレクト）が窮屈にならないよう比率を1:1.6へ調整。
   Ver.0.10.57: 左の製品名入力欄が狭すぎるとの指摘を受け、比率を1:1.3へ戻して左カラムを広げた。
   Ver.0.10.65: 一時的に軽量カード化のため`align-items: start`を外していたが、Ver.0.10.66で
   ブロック全体のカード化自体を撤回したため`align-items: start`を元に戻した（ブロック全体を
   stretchで揃える必要がなくなったため）。gap:20pxはPCの左右カラム間隔と、SP縦積み時のブロック間
   間隔を兼ねる。 */
.potaden-products__search-tier-body--columns {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	align-items: start;
	gap: 20px;
}

/* Ver.0.10.56: すべての.search-groupは常にtier（または.search-advanced）の内側にあり、tier自体が
   視覚的な境界を担うため、グループ自身は枠・背景を持たない（箱のネスト削減）。
   Ver.0.10.65で「製品名から直接探す」「メーカー・シリーズから製品を探す」をブロック全体カード化
   した（背景・枠線・角丸・padding）が、意図と異なる（ブロック全体ではなく小見出し文字だけを軽く
   目立たせたい）とのユーザー判断でVer.0.10.66で撤回。Ver.0.10.64までの「枠・背景を持たない」
   状態へ戻した。 */
.potaden-products__search-group {
	padding: 0;
	border: 0;
	background: transparent;
}

/* Ver.0.10.58: これはH3要素。SWELLの記事見出しデフォルト（下線・背景・大きめの上下マージン —
   実機スクショで「製品名から直接探す」等の直下に不要な下線が出ていたのはこれ）を!importantで
   確実に打ち消す。理由は上の`.search-tier-heading`と同じ。 */
.potaden-products__search-group-title {
	margin: 0 0 6px !important;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #313842 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

/* Ver.0.10.66: ブロック全体のカード化（Ver.0.10.65、撤回済み）の代わりに、小見出し文字そのものを
   ごく軽いラベル／帯として見せる。対象は`.search-tier-body--columns`直下の2小見出しだけ
   （「製品名から直接探す」「メーカー・シリーズから製品を探す」）— ガイドtier側の見出し（詳しい
   検索条件の非表示見出し等）には影響しない。上の`.search-group-title`が`!important`で
   padding/border/backgroundを0/透明に固定しているため、ここでも`!important`で明示的に上書きする
   （このファイル内の既存の`!important`衝突と同じ対処）。
   Ver.0.10.67: 固定`width: 248px`は「メーカー・シリーズから製品を探す」側が2段になる原因だった
   ため撤廃。帯自体が左右の検索方法の区切りとして機能するよう、`width: 100%`で各カラム幅いっぱいに
   追従させる（PC：カラム幅、SP：コンテンツ幅）。`display: block`にしたことで左右の帯の高さは、
   同じフォントサイズ・paddingであれば1行に収まる限り自然に揃う（固定heightは使わない）。文字色・
   フォントサイズ・ウェイトは`.search-group-title`のまま変更しない（SP専用のフォールバックは下の
   媒体クエリを参照）。 */
.potaden-products__search-tier-body--columns .potaden-products__search-group-title {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 4px 10px !important;
	border: 1px solid #dfe6ec !important;
	border-radius: 4px !important;
	background: #f3f6f9 !important;
}

/* Ver.0.10.64: 小見出し左の四角マーク（Ver.0.10.56〜0.10.63で塗りつぶし→アウトラインへ軽量化して
   きたもの）は最終判断として廃止。大見出し「製品名・メーカー名から調べる」のアイコンで階層は
   既に表現できており、小見出しにまで装飾を重ねる必要がないため。小見出しは文字サイズ・ウェイト・
   （既存の）下線だけで表現する — `.search-group-title`自体のスタイルは変更しない。 */

.potaden-products__search-group-hint {
	margin: -1px 0 6px;
	color: var(--potaden-muted);
	font-size: 12.5px;
	line-height: 1.5;
}

/* Ver.0.10.60: 左右2カラム（製品名から直接探す／メーカー・シリーズから製品を探す）の見出し→補足文→
   入力欄の縦位置を完全に揃えるため、両カラムの補足文に共通のmin-heightを持たせる。右側の文言が
   折り返しても、下の入力欄・セレクトの開始位置が左右でズレない。2カラムのときだけ効かせ、SP縦積み
   （下の媒体クエリで解除）では不要な空白を残さない。 */
.potaden-products__search-tier-body--columns .potaden-products__search-group-hint {
	min-height: 2.4em;
}

/* Ver.0.10.62: 検索方法ごとの実行点。左右2カラム＋条件tierの3ブロックすべてが同じ
   「実行ボタン（主）＋部分リセット（従）」の行を、そのブロックの入力コントロール直下・中央配置で
   持つ。実行ボタンは`.search-block-submit`ひとつに統一 — メーカー・シリーズブロックの「この製品を
   見る」／「この条件で検索」もこのクラスだけを使い、hidden属性の対にJSがトグルする
   （data-potaden-linked-view/-search、product-search.js参照）。`:not([hidden])`で表示を制御する
   のは、`hidden`属性はUAスタイルシートの`display:none`だけで実現されており、後から`display`を
   指定するルールがあると詳細度が同じでも上書きしてしまう可能性があるため。ボタン最小幅を揃える
   ことで、文言の長さ（「検索」／「この条件で検索」）が違っても左右のバランスが崩れないようにする。 */
.potaden-products__search-block-actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 10px;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.potaden-products__search-block-submit {
	box-sizing: border-box;
	min-width: 168px;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid var(--potaden-accent);
	border-radius: 5px;
	background: var(--potaden-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.potaden-products__search-block-submit:not([hidden]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Ver.0.10.66: 二重の非表示ガード（`hidden`属性＋このクラス）。`!important`にすることで、他の
   `.search-block-submit`系ルールの詳細度・記述順に関係なく必ず隠す — 「この製品を見る」と
   「この条件で検索」が同時に表示される不具合の再発防止。 */
.potaden-products__search-block-submit--hidden {
	display: none !important;
}

.potaden-products__search-block-submit:hover,
.potaden-products__search-block-submit:focus-visible {
	background: #115486;
	color: #fff;
}

/* Ver.0.10.63: 部分リセットをテキストリンクから軽いアウトラインボタンへ変更 — 「操作要素だと
   分かりにくい」との指摘を受け、白背景＋薄いブルーグレー枠の副ボタンにする。主実行ボタン
   （`.search-block-submit`＝青ベタ）と高さを揃え、優先順位（主＝青ベタ／従＝白＋アウトライン）を
   明確にする。「入力をクリア」「選択をリセット」「条件をリセット」— 文言はブロックごとに変え、どの
   条件が消えるか分かるようにする（他ブロックの条件はbuild_partial_reset_url()側で保持したまま、
   URLだけ変える）。 */
.potaden-products__search-block-reset {
	box-sizing: border-box;
	display: inline-flex;
	min-height: 42px;
	padding: 9px 18px;
	border: 1px solid #b7c2cf;
	border-radius: 5px;
	background: #fff;
	color: #33415a;
	align-items: center;
	justify-content: center;
	font: inherit;
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.potaden-products__search-block-reset:hover,
.potaden-products__search-block-reset:focus-visible {
	border-color: #93a4b6;
	background: #eef2f6;
	color: #22314a;
}

/* Ver.0.10.53: シリーズ／製品名は、メーカー未選択の間は使用不可（disabled）。ブラウザ標準の
   disabled表現に加えて、フィールド全体を薄くし、ラベル部分の不透明度も落として「今は選べない」を
   より明確にする。disabled自体はサーバー側の`disabled()`出力＋product-search.jsの両方で保つ。 */
.potaden-products__search-field.is-dependent-disabled {
	opacity: 0.55;
}

.potaden-products__search-field.is-dependent-disabled select {
	cursor: not-allowed;
	background: #f1f3f5;
}

.potaden-products__field-heading {
	display: flex;
	min-height: 25px;
	margin: 0 0 6px;
	gap: 6px;
	align-items: center;
	font-size: 13px;
	font-weight: 700;
}

/* Ver.0.10.9: every condition icon uses the same calm blue-gray fill and dark outline. The
   product-detail spec icons intentionally use a much lighter gray so search grouping remains
   the stronger visual cue. */
.potaden-products__field-icon {
	display: inline-flex;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: #333;
}

.potaden-products__field-icon svg {
	width: 100%;
	height: 100%;
}

.potaden-products__range-inputs {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 7px;
	align-items: center;
}

.potaden-products__help {
	position: relative;
	display: inline-block;
	margin: 0;
}

.potaden-products__help-toggle {
	display: inline-flex;
	box-sizing: border-box;
	width: 23px;
	height: 23px;
	border: 1px solid #86909c;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #4b5663;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

.potaden-products__help-toggle::-webkit-details-marker {
	display: none;
}

.potaden-products__help-toggle:hover,
.potaden-products__help-toggle:focus-visible,
.potaden-products__help[open] .potaden-products__help-toggle {
	border-color: var(--potaden-accent);
	outline: 0;
	background: var(--potaden-accent);
	color: #fff;
}

.potaden-products__help-toggle:focus-visible {
	box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.22);
}

.potaden-products__help-panel {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	z-index: 30;
	box-sizing: border-box;
	width: min(360px, calc(100vw - 48px));
	padding: 16px;
	border: 1px solid #d7dce2;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 34px rgba(25, 35, 45, 0.18);
	color: var(--potaden-text);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.65;
}

.potaden-products__search-field:last-child .potaden-products__help-panel,
.potaden-products__search-range:last-child .potaden-products__help-panel {
	right: 0;
	left: auto;
}

.potaden-products__help-panel h4,
.potaden-products__help-panel p {
	margin: 0;
}

.potaden-products__help-panel h4 {
	margin-bottom: 10px;
	font-size: 15px;
}

.potaden-products__help-panel p + p {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #edf0f3;
}


.potaden-products__result-count {
	padding: 7px 12px;
	border-radius: 999px;
	background: #eef5fa;
	color: #344250;
}

/* Compact sticky selection status with plain-text product chips. */
.potaden-products__compare-bar {
	position: sticky;
	top: 10px;
	z-index: 20;
	margin: 0 0 20px;
	padding: 13px 15px;
	border-color: #dce2e8;
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(25, 35, 45, 0.12);
	backdrop-filter: blur(8px);
}

.potaden-products__compare-summary {
	min-width: 0;
	flex: 1;
}

.potaden-products__compare-chips {
	display: flex;
	min-height: 0;
	margin-top: 6px;
	gap: 6px;
	flex-wrap: wrap;
}

.potaden-products__compare-chips:empty {
	display: none;
}

.potaden-products__compare-chip {
	display: inline-block;
	max-width: 220px;
	padding: 3px 9px;
	border: 1px solid #d7dce2;
	border-radius: 999px;
	background: #f5f7f9;
	font-size: 12px;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Ver.0.6 product-led horizontal comparison. */
.potaden-products__comparison-swipe-hint {
	display: none;
	margin: 0 0 10px;
	color: var(--potaden-muted);
	font-size: 13px;
}

.potaden-products__comparison-scroll {
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 5px 24px rgba(25, 35, 45, 0.07);
	/* Keep the user's exact scrollbar/swipe position, including scrollLeft = 0. */
	scroll-snap-type: none;
	scrollbar-color: #aab2bc #eef0f2;
}

.potaden-products__comparison-table {
	color: #1d1d1f;
}

.potaden-products__comparison-table th,
.potaden-products__comparison-table td {
	width: 260px;
	min-width: 260px;
	padding: 20px 22px;
	border: 0;
	border-bottom: 1px solid #e7e9ec;
	background: #fff;
	color: #1d1d1f;
	vertical-align: middle;
	scroll-snap-align: none;
}

.potaden-products__comparison-table thead th {
	position: static;
	background: #fff;
	color: #1d1d1f;
}

.potaden-products__comparison-table .potaden-products__comparison-label,
.potaden-products__comparison-table thead .potaden-products__comparison-label {
	position: sticky;
	left: 0;
	z-index: 4;
	width: 150px;
	min-width: 150px;
	padding-right: 16px;
	background: #fff;
	color: #3d4650;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 8px 0 14px -14px rgba(20, 28, 36, 0.8);
}

.potaden-products__comparison-table thead .potaden-products__comparison-label {
	vertical-align: bottom;
}

.potaden-products__comparison-product-header h3 {
	min-height: 3em;
	margin: 0 0 14px;
	color: #1d1d1f;
	font-size: 20px;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.potaden-products__comparison-product-image {
	display: flex;
	height: 268px;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.potaden-products__comparison-image {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}

.potaden-products__comparison-table tr[data-potaden-comparison-key="capacity_wh"] td,
.potaden-products__comparison-table tr[data-potaden-comparison-key="rated_output_w"] td,
.potaden-products__comparison-table tr[data-potaden-comparison-key="weight_kg"] td {
	font-size: 20px;
	font-weight: 700;
}

.potaden-products__comparison-table .potaden-products__comparison-group th {
	position: static;
	width: auto;
	min-width: 0;
	padding: 12px 22px;
	background: #f4f6f8;
	color: #3d4650;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-align: left;
}

@media (max-width: 767px) {
	.potaden-products__search-tier {
		padding: 10px 12px;
	}

	/* Ver.0.10.57: heading bar's negative-margin bleed must match the tier's own padding at each
	   breakpoint, or the rounded top corners misalign by a couple of px.
	   Ver.0.10.58: !important added to match the base rule (SWELL H2 defaults must stay defeated
	   at every breakpoint, not just desktop). */
	.potaden-products__search-tier-heading {
		margin: -10px -12px 0 !important;
		padding: 8px 12px !important;
	}

	.potaden-products__search-tier-body {
		gap: 12px;
	}

	/* Ver.0.10.55: 「製品名やメーカーがわかる方」の2カラムはスマホでは縦積みに戻す。すぐ探すの
	   チップ行はそのまま折り返し（`flex-wrap`）で対応するため個別のオーバーライドは不要。この
	   ルールは`.potaden-products__search-tier-body--columns`の非メディアクエリ版（同ファイル内で
	   このブロックより前で定義）より後に置くことで、同じ詳細度でも確実に上書きする。 */
	/* Ver.0.10.66: ブロック全体をカード化しない（Ver.0.10.65から撤回）ため、SPで縦積みになったとき
	   「製品名から直接探す」と「メーカー・シリーズから製品を探す」の境界は、ほぼこのgapだけで示す
	   ことになる。カードの枠線が無い分、gapを内部要素間の間隔よりはっきり大きくして区切りを明確に
	   する（ユーザー指定の目安16〜24pxの上寄り）。ブロック内部（見出し→補足文→入力→ボタン）の
	   間隔はこのブロックの対象外で無変更。 */
	.potaden-products__search-tier-body--columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	/* Ver.0.10.67: SPでは帯幅がコンテンツ幅いっぱいまで広がるため通常は1行に収まるはずだが、
	   「メーカー・シリーズから製品を探す」がごく狭い画面幅（320〜360px程度）でも確実に1行に収まる
	   ようにするための保険。文字サイズを大きく下げず、わずかな調整に留める。左側の短い見出しにも
	   同じルールを適用する（左右で同じデザインルールを使うため、片方だけ変えない）。 */
	.potaden-products__search-tier-body--columns .potaden-products__search-group-title {
		font-size: 13.5px !important;
		letter-spacing: -0.01em !important;
	}

	/* Ver.0.10.60: 縦積みでは左右の縦位置を揃える必要が無いので、共通min-heightを解除して不要な
	   空白を出さない。ベース側の.search-tier-body--columns .search-group-hintルール（同ファイル内で
	   このブロックより前）より後に置くことで、同じ詳細度でも確実に上書きする。 */
	.potaden-products__search-tier-body--columns .potaden-products__search-group-hint {
		min-height: 0;
	}

	/* Ver.0.10.62: SPでは実行ボタンを幅いっぱいにし、直下に部分リセットが見える配置を保つ
	   （検索直後にリセットが遠くならないよう、.search-block-actions自体はflex-wrapのまま）。 */
	.potaden-products__search-block-submit:not([hidden]) {
		width: 100%;
	}

	.potaden-products__help {
		position: static;
	}

	.potaden-products__field-heading {
		position: relative;
	}

	.potaden-products__help-panel,
	.potaden-products__search-field:last-child .potaden-products__help-panel,
	.potaden-products__search-range:last-child .potaden-products__help-panel {
		position: absolute;
		top: calc(100% + 7px);
		right: 0;
		left: 0;
		width: auto;
	}

	.potaden-products__result-count {
		width: fit-content;
	}

	.potaden-products__compare-bar {
		top: 4px;
		padding: 11px 12px;
		gap: 9px;
	}

	.potaden-products__compare-message {
		display: none;
	}

	.potaden-products__compare-chip {
		max-width: 145px;
	}

	.potaden-products__comparison-swipe-hint {
		display: block;
	}

	.potaden-products__comparison-table th,
	.potaden-products__comparison-table td {
		width: 220px;
		min-width: 220px;
		padding: 17px 16px;
	}

	.potaden-products__comparison-table .potaden-products__comparison-label,
	.potaden-products__comparison-table thead .potaden-products__comparison-label {
		width: 104px;
		min-width: 104px;
		padding: 14px 10px;
	}

	.potaden-products__comparison-product-header h3 {
		font-size: 17px;
	}

	.potaden-products__comparison-product-image {
		height: 225px;
	}
}

/* Ver.0.7: isolate the comparison heading from SWELL heading decorations. */
.potaden-products--comparison .potaden-products__comparison-title {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #1d1d1f;
	font-size: 24px;
	line-height: 1.35;
	text-align: left;
}

.potaden-products--comparison .potaden-products__comparison-title::before,
.potaden-products--comparison .potaden-products__comparison-title::after {
	display: none;
	content: none;
}

/* Ver.0.7: public product hub page. */
.potaden-product-detail {
	--potaden-detail-surface: #f7f8fa;
	max-width: 1040px;
	margin: 0 auto;
}

/* Ver.0.10.4: link back to the product search top — mobile has no other way back once inside a
   detail page. Ver.0.10.5–0.10.19: a pale-gray pill, shown as its own full-width paragraph
   below the hero. Ver.0.10.20–0.10.26 tried various positions inside/around the hero's media
   column, which kept reading as "part of the image" rather than independent navigation.
   Ver.0.10.27–0.10.29 moved it out of the hero grid and used `position: absolute` to center it
   inside whatever blank space already existed between the hero and the lead comment, specifically
   to avoid adding any new page height.
   Ver.0.10.49: real-screen feedback reversed that constraint — squeezing the link into existing
   space read as cramped, not as independent navigation. Back to a normal-flow paragraph
   (`class-potaden-product-detail.php` renders it as the hero's own next sibling, not nested
   inside it — `.hero` is a CSS grid with no area assigned to this element, so nesting a
   normal-flow node there would make it an unpredictable implicit grid item) with real
   margin-top/margin-bottom (PC 18px, SP 14px — see the media query below) instead of being
   centered inside a shared 28px gap. Styling also stepped back from "a permanently visible pill"
   to "plain text link, decorated only on hover" — an independent nav affordance, not a CTA. */
.potaden-product-detail__back-link {
	margin: 18px 0;
}

/* Ver.0.10.52: reverted from Ver.0.10.29's "plain text link, decorated only on hover" back to a
   small bordered button — real-screen feedback was that the plain-link version was too easy to
   lose track of. Background/border deliberately reuse `.highlights`'s own pale warm tone
   (#f7f5f0 / a lighter tint of its #7a6f5f border) so this reads as part of the same neutral
   "info chrome" family as the good/caution-point panel, not as a CTA — kept visually weaker than
   the purchase/compare buttons below (no fill color, thin border, small type). */
.potaden-product-detail__back-link a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border: 1px solid #cfc6b6;
	border-radius: 6px;
	background: #f7f5f0;
	color: #514a3f;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
}

.potaden-product-detail__back-link a:hover,
.potaden-product-detail__back-link a:focus-visible {
	border-color: #b9ac93;
	background: #f1ede2;
	text-decoration: underline;
}

.potaden-product-detail__back-link .potaden-product-detail__section-icon {
	width: 13px;
	height: 13px;
	color: currentColor;
}

/* Ver.0.10.7: SWELL 2.16.0's actual `swell_is_show_ttltop` filter and
   `swell_before_post_head` action now prevent parts/single/post_head.php from loading, so its
   H1/date/meta markup is absent from the final DOM. These selectors remain only as a defensive
   visual fallback for materially different SWELL versions; CSS is no longer the H1 solution.
   Ver.0.10.6 originally hid the THEME's own article title/date/meta header block on `potaden_product`
   singles (WordPress core adds the `single-potaden_product` body class automatically for any
   singular CPT post, as long as the theme calls `body_class()` — SWELL does, so no new body
   class is needed here). The hero's product name (`.potaden-product-detail__title`, now a real
   `<h1>`) becomes the page's sole visible H1.
   IMPORTANT — UNVERIFIED: `.p-articleHead` / `.p-articleHead__title` / `.p-postDate` are a
   best-effort guess at SWELL's actual class names (this dev environment cannot inspect the real
   theme DOM). `.entry-header` / `.entry-title` / `.entry-date` / `.posted-on` / `.updated` are
   the generic WordPress-convention fallbacks many themes also emit. If none of these match your
   live site, this rule silently does nothing (safe failure) — inspect the real header block in
   your browser's devtools and add its actual class here. `filter_swell_page_title()` above is a
   second, independent best-effort attempt via a (also unconfirmed) SWELL filter hook — if SWELL
   doesn't expose it, it's simply never called and has no effect; this CSS is what actually does
   the hiding either way. WordPress's own post date/modified-date/title DATA is untouched — only
   this specific front-end block is hidden from display. */
.single-potaden_product .p-articleHead,
.single-potaden_product .p-articleHead__title,
.single-potaden_product .p-articleHead__meta,
.single-potaden_product .p-postDate,
.single-potaden_product .entry-header,
.single-potaden_product .entry-title,
.single-potaden_product .entry-date,
.single-potaden_product .posted-on,
.single-potaden_product .updated {
	display: none !important;
}

/* Ver.0.10.24 added a CSS fallback here with guessed SWELL related-posts class names
   (`.p-postRelation` etc.) alongside a guessed `swell_is_show_related` filter. Ver.0.10.26
   confirmed against actual SWELL 2.16.0 source that neither guess matched: the real class is
   `.l-articleBottom__section.-related` / `.p-postList.p-relatedPosts`, and the real control
   point is per-post meta `swell_meta_show_related`, not a filter. The fix now lives entirely in
   `Potaden_Product_Detail::filter_swell_related_post_meta()`, which stops the block from
   rendering at all (server-side), so no CSS hiding rule is needed here. Removed rather than
   left as an inert fallback, since it never matched real SWELL markup and (with the block no
   longer rendering) has nothing left to hide. */

/* Ver.0.10.6: same hide, scoped to the search/list page (any WP Page containing the
   `[potaden_products]` shortcode — `.potaden-products-fullwidth` is the existing body class
   `Potaden_Product_Shortcode::add_fullwidth_body_class()` already adds there, reused rather than
   introducing a new one). Removes the page's own title (e.g. a placeholder like "テストポタ電")
   from display above the 2 shortcuts / search panel. Same unverified-selector caveat as above —
   inspect your real theme DOM and adjust if these class names don't match. */
.potaden-products-fullwidth .p-articleHead,
.potaden-products-fullwidth .p-articleHead__title,
.potaden-products-fullwidth .p-articleHead__meta,
.potaden-products-fullwidth .entry-header,
.potaden-products-fullwidth .entry-title,
.potaden-products-fullwidth .page-title,
.potaden-products-fullwidth .c-pageTitle,
.potaden-products-fullwidth #top_title_area {
	display: none !important;
}

/* Ver.0.10.8: hiding the page title does not remove SWELL's independent `.l-content`
   top padding (2em/4em in SWELL 2.16.0). Reduce that real source of the empty area only on
   the product-search page; no negative margin and no effect on ordinary posts/pages.
   Ver.0.10.67: re-confirmed via live DOM/CSSOM that this rule was silently losing — SWELL's
   own auto-generated inline stylesheet (`#swell_custom-inline-css`) carries
   `.top #content{padding-top:4em}`, specificity (1 ID, 1 class), which beats this rule's
   (0 ID, 2 classes) regardless of source order, so the real computed padding-top stayed 64px/
   54px (PC/SP, since `4em` scales with `#content`'s own font-size) no matter what value was
   written here.
   Ver.0.10.68: fixed at the root cause instead of fighting it with !important. `#body_wrap`
   only carries `.top` on the front page (SWELL's "top page" flag) and only carries
   `.potaden-products-fullwidth` on this product-search page, so a selector requiring BOTH
   classes together (`.top.potaden-products-fullwidth #content`) can only ever match this one
   page — it cannot fire on any other page even if `.top` alone were reused elsewhere. Its
   specificity (1 ID, 2 classes) beats SWELL's `.top #content` (1 ID, 1 class) cleanly, so no
   `!important` is needed. Value set to 2.5em per user instruction (~30-40% less than SWELL's
   4em, verified live: 64px→40px on PC, 54px→33.75px on SP, since both scale with the same
   em-based mechanism SWELL itself uses — no separate mobile rule required). */
.potaden-products-fullwidth .l-content {
	padding-top: 0;
}

.top.potaden-products-fullwidth #content {
	padding-top: 2.5em;
}

/* Ver.0.9.7: a product-photo-plus-judgment-info first view rather than a large-image brand
   hero, compressed roughly 25-30% versus Ver.0.9.6 (padding/gap/media height all reduced).
   The four hero pieces (media/name/status/spec-summary) are direct grid children placed with
   named `grid-template-areas` so PC and mobile can rearrange them without duplicate markup:
   PC keeps the photo beside a stacked info column; mobile puts the photo on top, then reuses
   the space that used to sit empty beside a short model name for a name+status two-column
   row, then a full-width spec summary. `align-items: start` keeps the hero's height tied to
   its shorter column/track rather than stretching to match a tall product photo. */
.potaden-product-detail__hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	grid-template-areas:
		"media name"
		"media status";
	column-gap: 24px;
	row-gap: 4px;
	padding: 10px 0 14px;
	align-items: start;
}

/* Ver.0.10.22 split this into an outer layout wrapper (`.media`) and an inner `.media-frame`
   (the gray rounded box) so the back-link could sit outside the frame while staying in the
   media column. Ver.0.10.27 moves the back-link out of the hero grid entirely (see above), so
   `.media` is back to simply sizing/positioning the frame — kept as two elements rather than
   merged back into one, since `.media-frame` (background/padding/radius, photo only) is a
   meaningful, separately-reusable unit and merging them now would be a bigger diff for no
   behavior change. */
.potaden-product-detail__media {
	grid-area: media;
	box-sizing: border-box;
	height: clamp(150px, 19.5vw, 225px);
	align-self: start;
}

.potaden-product-detail__media-frame {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 4px;
	border-radius: 14px;
	align-items: center;
	justify-content: center;
	background: var(--potaden-detail-surface);
}

/* object-fit: contain keeps the full, uncropped photo — the box is sized to hold the product
   comfortably, not to be filled edge-to-edge, and a tall/portrait photo is capped by the box's
   own height rather than stretching the hero to match it. */
.potaden-product-detail__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
}

.potaden-product-detail__image-zoom {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	align-items: center;
	justify-content: center;
}

.potaden-product-detail__image-zoom:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

html.potaden-product-image-lightbox-open {
	overflow: hidden;
}

.potaden-product-image-lightbox[hidden] {
	display: none;
}

.potaden-product-image-lightbox {
	position: fixed;
	z-index: 100000;
	inset: 0;
	display: flex;
	box-sizing: border-box;
	padding: clamp(18px, 4vw, 48px);
	background: rgba(12, 17, 22, 0.88);
	align-items: center;
	justify-content: center;
	cursor: zoom-out;
}

.potaden-product-image-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	touch-action: pinch-zoom;
	cursor: default;
}

.potaden-product-image-lightbox__close {
	position: fixed;
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
	z-index: 1;
	display: inline-flex;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 50%;
	background: rgba(20, 26, 32, 0.68);
	color: #fff;
	font: 400 31px/1 sans-serif;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.potaden-product-image-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.potaden-product-detail__image-placeholder {
	display: flex;
	width: 100%;
	height: 100%;
	min-height: 120px;
	align-items: center;
	justify-content: center;
	color: #89919b;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.potaden-product-detail__name-block {
	grid-area: name;
	align-self: end;
}

.potaden-product-detail__status-block {
	grid-area: status;
	margin-top: 6px;
}

.potaden-product-detail__manufacturer,
.potaden-product-detail__title,
.potaden-product-detail__lead,
.potaden-product-detail__actions p,
.potaden-product-detail__review p {
	margin: 0;
}

/* Ver.0.10.0: メーカー／シリーズは小さく薄いラベル＋やや強めの値、という明確な階層にする
   （Ver.0.9.x の「メーカー / シリーズ」プレーンテキスト連結表示から変更）。 */
.potaden-product-detail__field-line {
	display: flex;
	margin: 0 0 2px;
	gap: 6px;
	align-items: baseline;
}

.potaden-product-detail__field-label {
	color: #8b929b;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.potaden-product-detail__field-value {
	color: #384049;
	font-size: 13.5px;
	font-weight: 700;
}

.potaden-product-detail__title {
	margin: 4px 0 0;
	color: #1d1d1f;
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

/* Ver.0.10.2: 発売年月 — メーカー／シリーズより控えめ（field-labelよりさらに小さく薄い）。 */
.potaden-product-detail__release-date {
	margin: 4px 0 0;
	color: #9299a2;
	font-size: 11px;
	font-weight: 500;
}

/* Ver.0.9.7: PC/mobile quick-glance summary of the four key specs, placed in the hero via
   `grid-area: specs`. A compact 2x2 grid rather than literal "|" separators — the full
   labeled "主要スペック" tile section further down the page remains the primary, authoritative
   display; this is an overview only and reuses the same underlying values (no new meta). */
.potaden-product-detail__hero-specs {
	grid-area: specs;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 8px 0 0;
	padding: 0;
	gap: 5px 8px;
	list-style: none;
}

.potaden-product-detail__hero-specs li {
	min-width: 0;
	padding: 5px 8px;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	background: #fff;
	color: #1d1d1f;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.potaden-product-detail__lead {
	margin-top: 18px;
	color: var(--potaden-muted);
	font-size: 15px;
}

.potaden-product-detail__section {
	margin-top: 28px;
	padding: 28px;
	border-radius: 14px;
	background: var(--potaden-detail-surface);
}

/* Ver.0.10.3: 他社ライバル機・購入者レビューの傾向は、セクション全体の背景色付きボックス・
   外枠をやめ、ページ背景に直接置く（個々のカードの枠は別途維持）。ページ全体の「箱の連続感」
   を減らす方針。左右padding自体は他セクションとの余白リズムを保つため維持する。 */
.potaden-product-detail__section.potaden-product-detail__rivals,
.potaden-product-detail__section.potaden-product-detail__review-themes {
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
	background: transparent;
}

/* Ver.0.10.8: reviews explain the evaluation immediately above, so the following rival section
   needs a slightly shorter transition than the standard 28px section rhythm. */
.potaden-product-detail__review-themes + .potaden-product-detail__rivals {
	margin-top: 20px;
}

.potaden-product-detail__section > h2 {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 0 20px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #1d1d1f;
	font-size: 22px;
	line-height: 1.35;
}

.potaden-product-detail__section > h2::before,
.potaden-product-detail__section > h2::after {
	display: none;
	content: none;
}

/* Ver.0.10.1: dedicated, compact H2 styling scoped to this page only — never touches SWELL's
   or ordinary posts' H2 styling. Overrides `.section > h2` above by specificity (two classes
   beat one class + one element), per the design brief's own selector. 18-20px, minimal margin,
   no decoration — a DB-UI heading, not an article's big H2 band. */
/* Ver.0.10.5: `display: flex` so the new section icon (`.section-icon`) and the heading text sit
   on one line, vertically centered — headings without an icon (e.g. 主要スペック) are unaffected
   visually, a single text node in a flex container still simply fills the line normally. */
.potaden-product-detail .potaden-section-title {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0 0 14px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: #1d1d1f;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	align-items: center;
	gap: 8px;
}

/* Ver.0.10.5: shared sizing for every section-heading icon (詳しいスペック／良い点注意点／他社
   ライバル機／購入者レビューの傾向／セール価格を確認) — never larger/bolder than the heading
   text itself. */
.potaden-product-detail__section-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #4c5762;
}

.potaden-product-detail__specs-accordion-title .potaden-product-detail__section-icon {
	width: 16px;
	height: 16px;
	color: #6b7580;
}

/* Ver.0.10.6: 良い点・注意点／他社ライバル機の2アイコンは、実画面で意味が読み取りづらいという
   フィードバックにより18px→21pxへ拡大（他アイコンより主張しすぎない範囲で、形として認識できる
   サイズを優先）。アイコン・見出しの位置関係は共通の`.potaden-section-title`（flex/gap/
   align-items:center）で揃えたまま、サイズだけを個別調整している。 */
.potaden-product-detail__highlights-title .potaden-product-detail__section-icon,
.potaden-product-detail__rivals-title .potaden-product-detail__section-icon {
	width: 21px;
	height: 21px;
}

.potaden-product-detail .potaden-section-title::before,
.potaden-product-detail .potaden-section-title::after {
	display: none;
	content: none;
}

/* Ver.0.10.1: 「詳しいスペックを見る」— collapsed state is a single thin, light-gray, button-
   styled row (not a full .section card), so it barely adds height while closed. Still native
   <details>/<summary> (no JS, keyboard-operable). The H2 lives inside <summary> and keeps
   .potaden-section-title as its *semantic* class, but this more specific selector restyles it
   to read as button label text rather than a heading, matching the collapsed-button look. */
.potaden-product-detail__specs-accordion {
	margin-top: 14px;
}

.potaden-product-detail__specs-accordion-summary {
	position: relative;
	display: flex;
	box-sizing: border-box;
	height: 46px;
	padding: 0 40px;
	border-radius: 7px;
	align-items: center;
	justify-content: center;
	background: #f0f1f3;
	cursor: pointer;
	list-style: none;
}

.potaden-product-detail__specs-accordion-summary::-webkit-details-marker {
	display: none;
}

/* Ver.0.10.2: single SVG chevron (see PHP), flipped in place via `rotate()` on open — same
   size/stroke/box/position both states, only the rotation differs. */
.potaden-product-detail__specs-accordion-icon {
	position: absolute;
	top: 50%;
	right: 16px;
	width: 16px;
	height: 16px;
	color: #8b929b;
	transform: translateY(-50%);
}

.potaden-product-detail__specs-accordion[open] > .potaden-product-detail__specs-accordion-summary .potaden-product-detail__specs-accordion-icon {
	transform: translateY(-50%) rotate(180deg);
}

.potaden-product-detail__specs-accordion-summary:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: -2px;
}

/* Ver.0.10.3: sized to match the "主要スペック" heading (base `.potaden-section-title` is
   19px/800) so "詳しいスペックを見る" reads as the next real section, not a minor supplementary
   link. The row itself stays a fixed 46px button (`.specs-accordion-summary`), so growing the
   text does not grow the accordion's collapsed height. */
.potaden-product-detail__specs-accordion-summary .potaden-section-title {
	margin: 0;
	color: #3d4650;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
}

.potaden-product-detail__specs-accordion-body {
	margin-top: 8px;
	padding: 22px;
	display: grid;
	gap: 22px;
	border-radius: 10px;
	background: var(--potaden-detail-surface);
}

.potaden-product-detail__specs-group-title {
	margin: 0 0 12px;
	color: #4c5762;
	font-size: 14px;
	font-weight: 700;
}

/* Ver.0.10.2: 主要スペックは色分けにも外枠にも頼らず、アイコン・ラベルサイズ・数値サイズ・
   font-weight・罫線・余白の差だけでフラットに情報階層を作る（Ver.0.10.1の薄い暖色背景、
   および外側の囲い枠・背景パネルはいずれも撤去）。ページ背景の上に直接置かれ、区切りは各
   スペック間の細い罫線（border-left/border-top）のみで表現する。容量・定格出力の主役2項目
   は、背景色ではなくアイコン/ラベル/数値のサイズとweightで補助4項目より少し強く見せる。 */
.potaden-product-detail__spec-panel {
	background: transparent;
}

.potaden-product-detail__spec-panel-row {
	display: grid;
}

.potaden-product-detail__spec-panel-row--primary {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.potaden-product-detail__spec-panel-row--secondary {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid #e1e5e9;
}

/* Ver.0.10.5: 主要スペック6項目の内部レイアウトを固定構造化。以前はアイコンが`.spec-cell`の
   フレックス子要素としてラベル・数値の両方の左に縦通しで並んでおり、数値（dd）の左端がアイコン
   幅の分だけ毎回インデントされていた。今回、アイコンを`<dt>`（ラベル行）の内側へ移し、
   `.spec-cell`自体は単純なブロックへ変更。これにより数値・前モデル比は常に`.spec-cell-body`の
   左端（＝アイコンの左端と同じX座標）から開始し、アイコン・？の有無に関わらず6項目すべてで
   数値の開始位置が揃う。 */
.potaden-product-detail__spec-cell {
	display: block;
	min-width: 0;
	padding: 10px 12px;
}

.potaden-product-detail__spec-panel-row--primary .potaden-product-detail__spec-cell + .potaden-product-detail__spec-cell {
	border-left: 1px solid #e1e5e9;
}

.potaden-product-detail__spec-panel-row--secondary .potaden-product-detail__spec-cell + .potaden-product-detail__spec-cell {
	border-left: 1px solid #edf0f2;
}

/* Ver.0.10.9: detail specs use the same filled/outlined icon language as search, but with an
   almost-white gray fill and smaller footprint so values remain dominant. */
.potaden-product-detail__spec-cell-icon {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 15px;
	height: 15px;
	padding: 1.5px;
	border: 1px solid #555;
	border-radius: 3px;
	background: #f1f3f5;
	color: #4b5157;
}

.potaden-product-detail__spec-panel-row--primary .potaden-product-detail__spec-cell-icon {
	width: 17px;
	height: 17px;
	padding: 2px;
	color: #3f454b;
}

.potaden-product-detail__spec-cell-body {
	min-width: 0;
}

/* 1段目：アイコン・項目名・「？」を必ず同一行・nowrapで揃える（？だけ改行・項目名の下へ落ちる
   ことを防ぐ）。 */
.potaden-product-detail__spec-cell-body dt {
	display: flex;
	margin: 0 0 4px;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	color: #4c5762;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.potaden-product-detail__spec-panel-row--primary .potaden-product-detail__spec-cell-body dt {
	font-size: 14px;
	font-weight: 800;
}

/* 2段目：数値。ラベル行とは別行に必ず改行し、セル（`.spec-cell-body`）の左端を基準に左揃え。
   アイコン／？の有無に関わらず、6項目すべてこの同じ左基準から始まる。 */
.potaden-product-detail__spec-cell-body dd {
	margin: 0;
	color: #14202b;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.potaden-product-detail__spec-panel-row--primary .potaden-product-detail__spec-cell-body dd {
	font-size: 20px;
}

/* 3段目：前モデル比（存在する項目のみ）。数値と同じ左端から始まるブロック要素とし、数値との
   間に4〜6px程度の縦間隔を確保する（以前は数値の右に密着するインライン表示だった）。ないセル
   では単にこの要素自体が存在しないだけで、高さ合わせ用の空行は作らない。長い文字列はこのセル
   内だけで折り返し、隣のセルへは侵入しない（`min-width:0`は`.spec-cell-body`側で確保済み）。 */
.potaden-product-detail__spec-panel-diff {
	display: block;
	margin: 5px 0 0;
	color: #1c5683;
	font-size: 10.5px;
	font-weight: 800;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
}

.potaden-product-detail__spec-note {
	display: block;
	margin: 2px 0 0;
	color: var(--potaden-muted);
	font-size: 11px;
	font-weight: 600;
}

/* Ver.0.10.70: estimated (non-official) AC-alone charge time. Deliberately a quieter warm-gray
   tone rather than the bold black used for a manufacturer-published ac_charge_100_minutes value,
   so an estimate is never visually mistaken for an official figure — same "muted, no saturated
   warning color" language already used for review sentiment / suitability columns above. The
   "（推定）" text itself is the primary signal; this color difference is a secondary reinforcement. */
.potaden-product-detail__spec-cell-body dd.potaden-product-detail__spec-cell--estimated {
	color: #6b5d42;
}

.potaden-product-detail__spec-note--estimated {
	color: #8a7752;
}

/* Ver.0.10.30: `.potaden-product-detail__position` is dead CSS (no PHP output references this
   class any more — it predates the lead-comment redesign) but is left as-is/untouched here,
   split into its own rule from `.specs` below rather than removed, since cleaning up unused CSS
   is out of scope for this change. */
.potaden-product-detail__position {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	gap: 12px;
}

.potaden-product-detail__position > div {
	min-width: 0;
	padding: 18px;
	border: 1px solid #e1e5e9;
	border-radius: 10px;
	background: #fff;
}

.potaden-product-detail__position dt,
.potaden-product-detail__position dd {
	margin: 0;
}

.potaden-product-detail__position dt {
	display: inline-flex;
	margin-bottom: 7px;
	align-items: center;
	gap: 4px;
	color: var(--potaden-muted);
	font-size: 13px;
	font-weight: 700;
}

.potaden-product-detail__position dd {
	font-size: 16px;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Ver.0.10.0–0.10.29: 「詳しいスペックを見る」内の各カテゴリーは、3列グリッドに個別の白カード
   （枠線＋角丸＋18pxパディング、ラベルと値を上下2段で積む構成）を並べる構成だった。項目数が3の
   倍数でないカテゴリーが多く、PCの広い横幅に対してカードの間だけが余り、すかすか見えていた。
   Ver.0.10.30は「1枚の白い罫線ボックスの中に、上下2段カードを2列で詰めて並べる」構成に変えた
   が、この2段カード自体は温存したため、依然として詳細スペックが画面を大きく占有していた。加えて
   0.10.30は`.specs`自体（各行ではなくグループ全体を包む<dl>）に`border`/`border-radius`/
   `background`を付けてしまい、スマホの`@media`側はここまで明示的にリセットしていなかったため、
   スマホでも各グループがまるごと白い角丸ボックスに入って見える意図しない副作用があった。
   Ver.0.10.31: 詳細スペックを主役ではなく脇役UIとして扱う方針のもと、PCのみ「ラベル左／値右の
   1行セル」を採用し、モバイルの各行（`display:flex; justify-content:space-between;`、下記
   `@media`のルールと全く同じ考え方）をそのまま2列へ並べる形に統一した。個別カードの枠・角丸・
   上下2段構成・グループ全体を囲う外枠は廃止し、行間の細い下罫線だけで区切る（縦罫線・二重線・
   影は使わない——Appleのスペック比較表のように罫線そのものを減らす方向）。奇数件で最後の1項目が
   単独になる場合も、無理に2列幅いっぱいへ広げて目立たせることはせず、グリッドの自然な流れのまま
   左列だけに収まるようにした（右列は単に空白になるだけで、枠や背景を持つ「巨大セル」にはならない
   ——不要な特別ルールが1つ減っている）。「バッテリー種類」の値セルだけは、既存の
   `.potaden-product-detail__spec-note`（1段弱いグレーの短い特徴補足、`format_battery_type()`
   が付加）が値の下にもう1行増えるため、その項目だけ他より少し背が高くなることを許容している。
   既存の？ヘルプボタン・パネル（`build_spec_help()`）はマークアップ・JSとも無変更。 */
.potaden-product-detail__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	column-gap: 28px;
}

.potaden-product-detail__specs > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	min-width: 0;
	padding: 7px 0;
	border-bottom: 1px solid #edf0f2;
	background: transparent;
	gap: 3px 10px;
}

.potaden-product-detail__specs dt,
.potaden-product-detail__specs dd {
	margin: 0;
}

.potaden-product-detail__specs dt {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	color: var(--potaden-muted);
	font-size: 13px;
	font-weight: 700;
}

.potaden-product-detail__specs dd {
	flex: 0 1 auto;
	font-size: 14px;
	font-weight: 700;
	text-align: right;
	overflow-wrap: anywhere;
}

/* "？" help panel forces a wrap onto its own full-width line within the row (same technique the
   mobile row list already uses below), instead of squeezing beside the value. */
.potaden-product-detail__specs .potaden-product-detail__spec-help-panel {
	flex: 1 0 100%;
	text-align: left;
}

.potaden-products__model-link {
	color: var(--potaden-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.potaden-product-detail__actions {
	margin: 32px 0;
	padding: 24px;
	border: 1px solid #dbe2e8;
	border-radius: 14px;
	background: #fff;
	text-align: center;
}

.potaden-product-detail__compare-link {
	display: inline-flex;
	box-sizing: border-box;
	width: 300px;
	max-width: 100%;
	min-height: 48px;
	padding: 12px 24px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	background: var(--potaden-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.potaden-product-detail__compare-link:hover,
.potaden-product-detail__compare-link:focus-visible {
	background: #115486;
	color: #fff;
}

.potaden-product-detail__actions p {
	margin-top: 9px;
	color: var(--potaden-muted);
	font-size: 13px;
}

@media (max-width: 767px) {
	/* Ver.0.9.8: mobile keeps the same left-photo/right-info column split as PC (not
	   photo-on-top) — the product photo stays a real column rather than a full-width band, so
	   the product itself reads larger within a smaller box. Ratio is ~45/55, narrower than
	   PC's ~48/52, favoring the judgment info on the right. See the `grid-template-areas` base
	   rule above (same "media name / media status / media specs" areas as PC). */
	.potaden-product-detail__hero {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
		column-gap: 14px;
		row-gap: 3px;
		padding: 6px 0 14px;
	}

	/* Ver.0.10.7: SWELL's post_head is no longer emitted, so the old compensating negative margin
	   is unnecessary. */
	.potaden-product-detail {
		margin-top: 0;
	}

	.potaden-product-detail__media {
		height: clamp(128px, 43vw, 193px);
	}

	.potaden-product-detail__media-frame {
		padding: 3px;
	}

	/* Ver.0.10.49: normal-flow margin now (see the base, non-media-query `.back-link` rule) — SP
	   gets a smaller margin than PC's 18px, within the confirmed 12–16px range. */
	.potaden-product-detail__back-link {
		margin: 14px 0;
	}

	.potaden-product-detail__back-link a {
		font-size: 12.5px;
		padding: 3px 8px;
		line-height: 1.15;
	}

	.potaden-product-detail__name-block {
		align-self: start;
	}

	.potaden-product-detail__status-block {
		margin-top: 4px;
	}

	.potaden-product-detail__title {
		font-size: 17px;
		line-height: 1.3;
	}

	.potaden-product-detail__hero-specs {
		margin-top: 6px;
		gap: 4px 6px;
	}

	.potaden-product-detail__hero-specs li {
		padding: 4px 6px;
		font-size: 11px;
	}

	.potaden-product-detail__section {
		padding: 18px;
	}

	.potaden-product-detail__specs-accordion-body {
		padding: 16px;
	}

	.potaden-product-detail__position {
		grid-template-columns: minmax(0, 1fr);
	}

	.potaden-product-detail__actions {
		padding: 18px;
	}

	.potaden-product-detail__compare-link {
		width: 100%;
	}
}

/* Ver.0.9.7: only on genuinely narrow screens, where a 2-column name/status row would break,
   fall back to a single stacked column. Ordinary phone widths keep the 2-column layout above. */
@media (max-width: 380px) {
	.potaden-product-detail__hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"media"
			"name"
			"status";
	}
}

/* Ver.0.8: make lifecycle status a primary product fact. */
/* Ver.0.10.0: a tighter, less "capsule" badge — data-site/spec-sheet styling rather than a
   rounded pill. Border-radius/padding only; the color-per-status meaning is unchanged. */
.potaden-products__status {
	padding: 4px 9px;
	border: 1px solid currentColor;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.4;
}

.potaden-products__status--prominent {
	display: inline-flex;
	padding: 6px 13px;
	align-items: center;
	font-size: 15px;
	white-space: nowrap;
}

.potaden-products__card .potaden-products__status,
.potaden-products__comparison-table .potaden-products__status {
	padding: 6px 12px;
	font-size: 14px;
}

.potaden-product-detail__status-guidance {
	margin-top: 14px;
	padding: 13px 15px;
	border-left: 4px solid #78838e;
	border-radius: 0 8px 8px 0;
	background: #f5f7f9;
	color: #38434e;
}

.potaden-product-detail__status-guidance--current {
	border-left-color: #27824a;
	background: #eef8f1;
}

.potaden-product-detail__status-guidance--old_model {
	border-left-color: #a87300;
	background: #fff8e8;
}

.potaden-product-detail__status-guidance--discontinued {
	border-left-color: #68717b;
	background: #f1f3f5;
}

.potaden-product-detail__status-guidance p {
	margin: 0;
}

.potaden-product-detail__status-guidance p + p {
	margin-top: 8px;
}

.potaden-product-detail__successor-lead {
	padding-top: 8px;
	border-top: 1px solid rgba(80, 90, 100, 0.18);
}

/* Ver.0.9.6: hero's successor callout is a single short line next to the status badge — the
   full previous/successor relationship now lives in the generation-flow section below, so no
   large colored guidance box duplicates it here. */
.potaden-product-detail__successor-short {
	margin: 8px 0 0;
	color: #38434e;
	font-size: 14px;
}

.potaden-product-detail__successor-short strong {
	color: var(--potaden-muted);
	font-weight: 700;
}

/* Ver.0.10.4: 容量クラス — 販売状態バッジのすぐ下、別ラベルとして表示。バッジより控えめな
   トーン（バッジは色付き背景で強調、こちらはプレーンテキスト）。 */
.potaden-product-detail__capacity-class {
	display: flex;
	margin: 6px 0 0;
	gap: 5px;
	align-items: center;
	color: #6b7580;
	font-size: 13px;
	font-weight: 600;
}

/* Ver.0.10.5: deliberately not the same look as the "？" glossary toggle (`.spec-help-toggle`) —
   a plain lowercase "i" in a thinner, quieter circle, since it answers a different, narrower
   question ("why is this product in this capacity class") than the shared spec glossary. Reuses the same
   toggle/panel JS, only the appearance differs. */
.potaden-product-detail__spec-help-toggle--info {
	width: 20px;
	height: 20px;
	border-color: #c3c9cf;
	color: #6b7580;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
}

.potaden-product-detail__spec-help-toggle--info:hover,
.potaden-product-detail__spec-help-toggle--info:focus-visible,
.potaden-product-detail__spec-help-toggle--info.is-open {
	border-color: var(--potaden-accent);
	background: var(--potaden-accent);
	color: #fff;
}

.potaden-product-detail__capacity-class-help-panel {
	margin-top: 6px;
	width: 100%;
}

.potaden-product-detail__quick-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 22px 0 0;
	gap: 8px;
}

.potaden-product-detail__quick-specs > div {
	min-width: 0;
	padding: 12px 8px;
	border-top: 1px solid #dfe3e7;
}

.potaden-product-detail__quick-specs dt,
.potaden-product-detail__quick-specs dd {
	margin: 0;
}

.potaden-product-detail__quick-specs dt {
	margin-bottom: 4px;
	color: var(--potaden-muted);
	font-size: 12px;
	font-weight: 700;
}

.potaden-product-detail__quick-specs dd {
	color: #1d1d1f;
	font-size: clamp(17px, 2vw, 23px);
	font-weight: 800;
	white-space: nowrap;
}

/* Shared, validated purchase and review links. */
.potaden-products__purchase-link,
.potaden-products__review-link {
	display: inline-flex;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--potaden-accent);
	border-radius: 7px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: #fff;
	color: var(--potaden-accent);
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}

/* Ver.0.10.5: article/document icon (see `render_section_icon('review-link')`), sized to sit
   quietly beside the label — never larger/bolder than the text. */
.potaden-products__review-link .potaden-product-detail__section-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: currentColor;
}

.potaden-products__purchase-link:hover,
.potaden-products__purchase-link:focus-visible,
.potaden-products__review-link:hover,
.potaden-products__review-link:focus-visible {
	background: #eef5fa;
	color: #115486;
}

/* Ver.0.10.5: same "under 30〜40% of the text" marker technique as the good-points highlight
   (see `.highlight-item--good .highlight-text`), but a pale orange and its own inline `<span>`
   (not the `<h2>` itself, which is full-width) so the marker hugs just the heading text instead
   of the whole block width. Deliberately a different hue from the good-points' yellow, so a
   purchase-intent heading and a good-point sentence never read as the same kind of highlight.
   Ver.0.10.47: the orange underline itself was removed per real-screen feedback — the page is
   otherwise blue/white/gray throughout, and this was the one place an orange line stood out on
   its own. The purchase CTA/section itself is unchanged; only this decorative marker background is
   gone (the wrapping spans stay in the markup, now visually inert, so this can be reverted by
   restoring the background-* declarations alone if ever wanted back). */
.potaden-product-detail__purchase-title-marker {
	display: block;
	min-width: 0;
	max-width: calc(100% - 26px);
	flex: 0 1 auto;
}

.potaden-product-detail__purchase-title-marker-text {
	display: inline;
}

.potaden-product-detail__pr {
	box-sizing: border-box;
	margin: 0 0 5px;
	color: #596670;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: right;
}

@media (max-width: 767px) {
	.potaden-product-detail__pr {
		margin-bottom: 4px;
		font-size: 12px;
	}
}

/* Ver.0.10.0: 購入者レビューの傾向 — storage/display only (see DEVELOPMENT_HANDOFF.md). PC
   shows 3-ish cards across (wraps/scrolls if more); mobile becomes a scroll-snap carousel, same
   pattern as the rival cards. Sentiment is a subtle left-border accent only — no star ratings
   or computed scores, and the text label always carries the actual meaning. */
.potaden-product-detail__review-theme-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	margin: 0 0 12px;
	padding: 0;
	gap: 14px;
	list-style: none;
}

/* Ver.0.10.52: 5件の場合だけauto-fitが「4＋1」の不揃いな配置になる（コンテナ幅次第で1行4枚目が
   折り返す）ため、count修飾クラスで5件時のみ3列固定にし「3＋2」の安定したレイアウトへ強制する。
   1〜4件は既存のauto-fit挙動のまま変更しない。モバイルは下部のメディアクエリでdisplay:flexの
   横スクロールカルーセルへ切り替わり、後勝ちでこのルールを上書きするため、ここではPC/タブレット
   幅でのみ効く。 */
.potaden-product-detail__review-theme-list--count-5 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Ver.0.10.3: 左アクセント線（傾向ごとの色分け）を廃止し、ごく薄いクリーム背景＋薄い罫線のみの
   フラットなカードへ変更。傾向（positive/caution/neutral）自体は`.review-theme-sentiment`の
   文字ラベルで示すため、色分け情報は失われない。 */
.potaden-product-detail__review-theme-card {
	padding: 14px 16px;
	border: 1px solid #e6e0d5;
	border-radius: 8px;
	background: #fcfaf6;
}

.potaden-product-detail__review-theme-name {
	margin: 0 0 6px;
	color: #1d1d1f;
	font-size: 15px;
	font-weight: 800;
}

/* Ver.0.10.3: replaces the removed left-accent-color coding — small muted text, not a colorful
   badge, so the card stays flat/quiet while the sentiment is still conveyed. */
.potaden-product-detail__review-theme-sentiment {
	margin-left: 6px;
	color: #8b929b;
	font-size: 11px;
	font-weight: 600;
}

.potaden-product-detail__review-theme-summary {
	margin: 0;
	color: #333;
	font-size: 13px;
	line-height: 1.6;
}

.potaden-product-detail__review-note {
	margin: 0;
	color: var(--potaden-muted);
	font-size: 12px;
}

/* Ver.0.10.24: こんな人に向いている／向いていない — two quiet columns, not promotional badges.
   PC sits side by side; mobile stacks (suited first, since it's the more common read). Colors
   are deliberately muted: a pale green tint for "suited" (echoes the site's existing 現行モデル/
   良い点 green) and a neutral pale warm gray for "not suited" — no saturated red, no "おすすめ！"
   styling, no icons per item beyond the section heading's own icon. */
.potaden-product-detail__suitability-columns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.potaden-product-detail__suitability-column {
	padding: 14px 16px;
	border-radius: 8px;
}

.potaden-product-detail__suitability-column--suited {
	border: 1px solid #d3e6d6;
	background: #f3f9f4;
}

.potaden-product-detail__suitability-column--not-suited {
	border: 1px solid #e6e0d5;
	background: #f9f7f3;
}

.potaden-product-detail__suitability-heading {
	margin: 0 0 8px;
	color: #1d1d1f;
	font-size: 14px;
	font-weight: 800;
}

.potaden-product-detail__suitability-column--suited .potaden-product-detail__suitability-heading {
	color: #2b6b3c;
}

.potaden-product-detail__suitability-column--not-suited .potaden-product-detail__suitability-heading {
	color: #6b6058;
}

.potaden-product-detail__suitability-list {
	margin: 0;
	padding: 0 0 0 1.1em;
	color: #333;
	font-size: 13.5px;
	line-height: 1.6;
}

.potaden-product-detail__suitability-list li + li {
	margin-top: 5px;
}

/* Ver.0.10.27: PC-only center alignment for the whole セール価格 block (heading, note, and the
   button grid as one centered unit) — default/unscoped here (this codebase's convention is
   "PC is the default, mobile overrides via `max-width:767px`"), reset back to the original
   left-aligned/full-width mobile look inside that media query below. */
.potaden-product-detail__purchase .potaden-section-title {
	justify-content: center;
}


.potaden-product-detail__purchase-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 560px;
	margin-inline: auto;
	gap: 10px;
}

/* Ver.0.10.28: the Ver.0.10.27 centering above only centered the 560px *grid box*, not the
   button(s) inside it. Grid items stretch to fill their column by default (`justify-items:
   stretch`), so when only one purchase link is registered — the common case, e.g. DELTA 3 1000
   Air has only `official_url` — that single button fills just grid column 1 of the 2-column
   grid, i.e. only the left half of the 560px box, so its own center X sits a quarter of the way
   in, not at the box's center. This is invisible when 2+ links are registered (they fill both
   columns, so the visual block's center already equals the box's center) and only shows up with
   exactly one.
   Ver.0.10.28's fix (`grid-column:1/-1; justify-self:center`) centered it correctly, but
   `justify-self:center` also stops it from stretching at all — it shrank to its own intrinsic
   content width, visibly smaller than the pre-0.10.27 button (back when `.purchase-links` had no
   `max-width:560px` cap at all, so the same single button, stretching to fill grid column 1 of a
   grid spanning the *entire, uncapped* section width, rendered noticeably wider).
   Ver.0.10.29 restores that original pixel width while keeping the Ver.0.10.28 centering: the
   `:has()` rule below removes the 560px cap *only* when there is exactly one purchase link (2+
   link products keep the 560px-capped, evenly-centered grid untouched), and the button gets an
   explicit `width: calc((100% - 10px) / 2)` — since it now spans both grid columns (`1 / -1`),
   its own percentage basis is the *full, uncapped* grid width, so this computes to exactly the
   width one column would have stretched to in the pre-0.10.27 full-width 2-column grid (same
   formula the browser used internally back then: (full grid width − 1 gap) / 2 columns). It's
   simply no longer left-anchored in column 1 — `justify-self:center` centers that same-width box
   within the (now uncapped) grid, which is itself centered by the section's own layout. Mobile
   forces `width:100%` below regardless of all of this, so mobile is unaffected (full-width look
   preserved). */
.potaden-product-detail__purchase-links:has(> .potaden-products__purchase-link:only-child) {
	max-width: none;
}

.potaden-product-detail__purchase-links > .potaden-products__purchase-link:only-child {
	grid-column: 1 / -1;
	justify-self: center;
	width: calc((100% - 10px) / 2);
}

/* Ver.0.9.8: the official-site button is this block's primary CTA — a mid/deep green (not the
   page's blue accent used everywhere else) so it reads as the trusted "buy here" action and
   stands apart from Amazon/Rakuten/Yahoo, which keep their existing outline treatment. */
.potaden-product-detail__purchase-links .potaden-products__purchase-link--official {
	border-color: #136534;
	background: #16803c;
	color: #fff;
}

.potaden-product-detail__purchase-links .potaden-products__purchase-link--official:hover,
.potaden-product-detail__purchase-links .potaden-products__purchase-link--official:focus-visible {
	background: #106129;
	color: #fff;
}

/* Ver.0.11.19 / DEC-005: an old/discontinued product's verified successor is the
   first decision CTA. It is an internal link (no affiliate rel/target) and uses
   the established blue palette so it is distinct from the green official shop. */
.potaden-product-detail__purchase-links .potaden-products__purchase-link--successor {
	border-color: #155f92;
	background: #176ea6;
	color: #fff;
}

.potaden-product-detail__purchase-links .potaden-products__purchase-link--successor:hover,
.potaden-product-detail__purchase-links .potaden-products__purchase-link--successor:focus-visible {
	background: #115780;
	color: #fff;
}

/* Ver.0.10.52: the two detail-page "primary-weight" CTAs — official purchase link (green) and
   compare-list button (blue, in `.potaden-product-detail__actions` further down the page) — sat
   at different widths/heights (official: grid-cell width, 44px min-height; compare: auto content
   width, 48px min-height), reading as mismatched despite both being top-tier actions. Harmonized
   to one shared box size on PC; color alone keeps the existing official/secondary hierarchy.
   `width` needs `!important` here only to outrank the `:only-child` rule above (same specificity
   otherwise; official is `:only-child` on the common one-purchase-URL product). Mobile is
   unaffected — both already go full-width via existing rules below/at Ver.0.10.31. */
.potaden-product-detail__purchase-links .potaden-products__purchase-link--official {
	width: 300px !important;
	max-width: 100%;
	min-height: 48px;
}

/* Ver.0.10.4: no more heading/section box around this — just the button-link itself, with the
   same top margin the old `.section` gave it, so page rhythm doesn't change. */
.potaden-product-detail__review {
	margin-top: 28px;
}

/* Ver.0.10.5: this rule previously duplicated the selector at line ~2089 with a conflicting
   solid accent-blue style — because it comes later in the source, it was unintentionally
   winning over the intended outline treatment (same bug pattern as the earlier
   `.spec-diff-inline` duplicate-selector issue). Now the single definition: a quiet "read the
   article" secondary CTA — pale orange/peach, dark neutral text, deliberately weaker than the
   purchase CTAs (green official-site button, Amazon/Rakuten/Yahoo) so it never competes with them. */
.potaden-products__review-link {
	background: #fdf1e6;
	border-color: #f0c9a0;
	color: #4a3a2c;
}

.potaden-products__review-link:hover,
.potaden-products__review-link:focus-visible {
	background: #fbe6d2;
	border-color: #e3b183;
	color: #3a2d22;
}

/* Keep card purchase choices useful without turning the card into an ad block. */
.potaden-products__card-action {
	display: grid;
	gap: 8px;
}

.potaden-products__card-action .potaden-products__purchase-link {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	font-size: 13px;
}

.potaden-products__comparison-product-header > .potaden-products__purchase-link {
	width: 100%;
	min-height: 40px;
	margin-top: 12px;
	padding: 8px 12px;
	font-size: 13px;
}

.potaden-products__comparison-clear {
	display: inline-flex;
	min-height: 36px;
	padding: 7px 11px;
	border: 1px solid #c8ced5;
	border-radius: 6px;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #59636e;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.potaden-products__comparison-clear:hover,
.potaden-products__comparison-clear:focus-visible {
	border-color: #9099a3;
	background: #f5f6f7;
	color: #303942;
}

@media (max-width: 767px) {
	.potaden-products__status--prominent {
		font-size: 14px;
	}

	.potaden-product-detail__quick-specs {
		gap: 4px;
	}

	.potaden-product-detail__quick-specs > div {
		padding: 10px 4px;
	}

	.potaden-product-detail__quick-specs dd {
		font-size: 17px;
	}

	/* Ver.0.10.27: restore the pre-existing left-aligned/full-width mobile look — the new PC
	   centering above (base, unscoped rules) must not change mobile at all. */
	.potaden-product-detail__purchase .potaden-section-title {
		justify-content: flex-start;
	}


	.potaden-product-detail__purchase-links {
		grid-template-columns: minmax(0, 1fr);
		max-width: none;
		margin-inline: 0;
	}

	.potaden-product-detail__purchase-links .potaden-products__purchase-link,
	.potaden-products__review-link {
		width: 100%;
	}

	/* Ver.0.10.29: the PC-only `:only-child` width fix above (`width: calc((100% - 10px) / 2)`)
	   has higher specificity than the plain `width:100%` rule right above (an extra `:only-child`
	   pseudo-class), so without this explicit reset it would win on mobile too and silently break
	   the "スマホは現在の全幅系表示を維持" requirement. This restores full width for the
	   single-purchase-link case specifically, same as the rule above already does for the general
	   case — mobile is always full-width regardless of how many purchase links exist. */
	.potaden-product-detail__purchase-links > .potaden-products__purchase-link:only-child {
		width: 100%;
	}
}

/* Ver.0.9.2: keep the sticky comparison bar compact on phones after legacy rules. */
@media (max-width: 767px) {
	.potaden-products__compare-bar {
		align-items: center;
		flex-direction: row;
	}

	.potaden-products__compare-chips {
		display: none;
	}

	.potaden-products__compare-submit {
		width: auto;
		min-height: 40px;
		padding: 8px 11px;
		font-size: 13px;
	}
}

/* Ver.0.9.5/0.9.6: detail-page-top prototype — magazine-style pros/cons block, compact
   positioning, key-spec tiles with inline previous-model diff, generation flow, and rivals. */
.potaden-product-detail__visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ver.0.10.38: `_potaden_positioning_note` keeps the existing quiet pen-note surface and accent
   bars, but no longer reserves a tall left column for the pencil. The icon and visible product-
   specific H2 now form a compact top row, followed by the unchanged comment copy. */
.potaden-product-detail__lead-comment {
	position: relative;
	display: block;
	margin: 24px 0 0;
	padding: 17px 20px;
	border: 0;
	border-radius: 0;
	background: #f7f7f7;
	box-shadow: none;
}

/* Ver.0.10.21: widened from the Ver.0.10.20 86%/7%-inset treatment (which read as the whole
   comment box being pinched in from the sides) to a near-full-width 96%/2%-inset bar — only the
   accent lines change; `.lead-comment`'s own box width/padding is untouched, so the body copy
   keeps its existing width. */
.potaden-product-detail__lead-comment::before,
.potaden-product-detail__lead-comment::after {
	position: absolute;
	left: 2%;
	width: 96%;
	height: 6px;
	border-radius: 45% 55% 48% 52%;
	background: linear-gradient(90deg, transparent 0%, rgba(220, 234, 240, 0.5) 3%, rgba(173, 205, 218, 0.78) 10%, rgba(194, 219, 229, 0.72) 88%, rgba(220, 234, 240, 0.46) 97%, transparent 100%);
	content: "";
	pointer-events: none;
}

/* Ver.0.10.20: top/bottom marker thickness and opacity are intentionally identical —
   both read as the same fluorescent-highlighter accent, not a heavier top / lighter bottom. */
.potaden-product-detail__lead-comment::before {
	top: 1px;
	transform: rotate(-0.12deg);
}

.potaden-product-detail__lead-comment::after {
	bottom: 1px;
	transform: rotate(0.1deg);
}

.potaden-product-detail .potaden-product-detail__lead-comment-title {
	margin: 0 0 9px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.potaden-product-detail__lead-comment-title .potaden-product-detail__section-icon {
	width: 22px;
	height: 22px;
	color: #858585;
}

.potaden-product-detail__lead-comment-content {
	min-width: 0;
}

.potaden-product-detail__lead-comment-headline {
	margin: 0;
	color: #30343a;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;
}

.potaden-product-detail__lead-comment-body {
	margin: 3px 0 0;
	color: #555b62;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
}

/* Ver.0.10.24: light emphasis only — `**text**` in the stored note becomes `<strong>` (see
   Potaden_Product_Detail::format_positioning_segment()). Weight only, no color/background/
   underline, so at most ~2 emphasized phrases read as "worth noticing" without shouting or
   turning the whole comment bold. */
.potaden-product-detail__lead-comment-headline strong,
.potaden-product-detail__lead-comment-body strong {
	font-weight: 700;
}

/* Tuck the gap in when a lead comment sits directly above the highlights block, so the two
   read as connected — the highlights section otherwise keeps its normal top margin. */
.potaden-product-detail__lead-comment + .potaden-product-detail__highlights {
	margin-top: 10px;
}

/* Ver.0.9.6: one dense, magazine-style evaluation block (good/caution points run together,
   not split into two side-by-side cards) with bold ○/△ marks and tight line spacing.
   Ver.0.9.8: treated as the page's key judgment panel — a firm neutral outline (not red, not
   an alert/ad-box look) sets it apart from the plain section cards around it. */
.potaden-product-detail__highlights {
	padding: 14px 18px;
	border: 2px solid #7a6f5f;
	border-radius: 8px;
	background: #f7f5f0;
}

.potaden-product-detail__highlight-list {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 0;
	list-style: none;
}

/* Ver.0.10.4: was `align-items: baseline` — for a non-text flex item (the mark's `<span>` has no
   text, only an SVG) the browser has to synthesize a baseline from its bottom margin edge, which
   sits noticeably below the comment text's real first-line baseline (visible up/down mismatch).
   `flex-start` top-aligns the mark's own box with the text box instead, then per-mark
   `margin-top` (below) nudges each shape to its own optical center against the first line —
   ○ and △ get slightly different values since a stroked triangle doesn't read as centered at
   the same offset as a stroked circle even from an identical bounding box. */
.potaden-product-detail__highlight-item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 5px 0;
}

/* Ver.0.10.1: a faint divider under each line (not the last) instead of relying on gap alone —
   marks a boundary between items without turning the block into separate cards. */
.potaden-product-detail__highlight-item:not(:last-child) {
	border-bottom: 1px solid #e6e0d5;
}

/* Ver.0.10.0: marks are inline SVG (render_mark_svg()), not CSS-drawn shapes — a CSS
   border/clip-path triangle renders with an uneven-looking stroke (the base reads thicker than
   the slanted sides), which an SVG `<polygon stroke>` avoids by construction (genuinely uniform
   stroke width). Color is set here via `currentColor` so it can differ good vs caution while
   the SVG markup itself stays identical/reusable (also used at a smaller size in rival cards). */
.potaden-product-detail__highlight-mark {
	display: inline-flex;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	align-items: center;
	justify-content: center;
}

.potaden-product-detail__highlight-mark .potaden-product-detail__mark-svg {
	width: 100%;
	height: 100%;
}

.potaden-product-detail__highlight-item--good .potaden-product-detail__highlight-mark {
	color: #c65a64;
	margin-top: 1px;
}

.potaden-product-detail__highlight-item--caution .potaden-product-detail__highlight-mark {
	color: #6b6058;
	margin-top: 2px;
}

.potaden-product-detail__highlight-text {
	color: #1d1d1f;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.45;
}

/* Ver.0.10.37: the direct flex child (`.highlight-text`) is blockified by flex layout, so painting
   it produced one rectangular band behind all wrapped lines. Keep that outer span for sizing and
   paint a nested, genuinely inline span instead. `box-decoration-break: clone` gives each line
   fragment its own lower-55% marker. Ver.0.10.37 restores the established 13.5px/1.45 text
   typography while retaining this inline marker treatment; weight, color and item layout remain
   unchanged. */
.potaden-product-detail__highlight-item--good .potaden-product-detail__highlight-marker {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background-image: linear-gradient(to top, rgba(255, 224, 92, 0.55) 0%, rgba(255, 224, 92, 0.55) 55%, transparent 55%, transparent 100%);
	background-repeat: no-repeat;
}

/* Ver.0.9.7: "この製品の立ち位置" reads as a small explanatory panel directly under the
   good/caution list — a light tint + thin left accent line, not a border-top divider (too easy
   to miss, per Ver.0.9.6 feedback) and not a large independent card. */
.potaden-product-detail__positioning-block {
	margin-top: 10px;
	padding: 8px 12px;
	border-left: 3px solid var(--potaden-accent);
	background: #eef3f6;
	border-radius: 0 6px 6px 0;
}

.potaden-product-detail__positioning-label {
	margin: 0 0 3px;
	color: #4c5762;
	font-size: 12px;
	font-weight: 700;
}

.potaden-product-detail__positioning-text {
	margin: 0;
	color: #333;
	font-size: 14px;
	line-height: 1.55;
}

/* Standalone positioning section (no pros/cons registered) — same small-heading-plus-accent-
   panel treatment, just without the outer highlights block wrapping it. */
.potaden-product-detail__positioning {
	padding: 0;
	background: transparent;
}

.potaden-product-detail__positioning > h2 {
	margin-bottom: 6px;
	font-size: 15px;
}

.potaden-product-detail__positioning > .potaden-product-detail__positioning-text {
	padding: 8px 12px;
	border-left: 3px solid var(--potaden-accent);
	background: #eef3f6;
	border-radius: 0 6px 6px 0;
}

/* Ver.0.10.0: 4項目→6項目。PC 3列×2段／スマホ2列×3段を基本とし、タイルの縦横は拡大しない。 */
.potaden-product-detail__spec-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	gap: 10px;
}

/* Ver.0.9.7: the key specs need to clearly outrank the plain "詳しい仕様" rows below — a top
   accent border (matching the pattern already used for the list-page status gateway cards) and
   a larger number. Ver.0.10.0: base tile is neutral; capacity/output get a light blue tint and
   price a light warm tint (minimal color-coding — the label/value text always carries the
   actual meaning, color is a light accent only, not the sole signal). */
.potaden-product-detail__spec-tile {
	min-width: 0;
	padding: 14px 12px;
	border: 1px solid #e1e5e9;
	border-top: 3px solid #c7cdd3;
	border-radius: 10px;
	background: #fff;
	text-align: center;
}

.potaden-product-detail__spec-tile--capacity,
.potaden-product-detail__spec-tile--output {
	border-color: #dbe6ee;
	border-top-color: var(--potaden-accent);
	background: #f5f9fc;
}

.potaden-product-detail__spec-tile--price {
	border-color: #ecdfd0;
	border-top-color: #b4763c;
	background: #fbf6ef;
}

.potaden-product-detail__spec-icon {
	display: block;
	height: 0;
	margin: 0 0 4px;
}

.potaden-product-detail__spec-icon:empty {
	margin: 0;
}

.potaden-product-detail__spec-tile dt,
.potaden-product-detail__spec-tile dd {
	margin: 0;
}

.potaden-product-detail__spec-tile dt {
	display: inline-flex;
	margin-bottom: 7px;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	color: #4c5762;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.potaden-product-detail__spec-tile dd {
	color: #10202f;
	font-size: 26px;
	font-weight: 800;
}

/* Ver.0.9.6: previous-model diff, shown inline where its number lives instead of a separate
   section — on a key-spec tile, or appended after a detailed-spec row's value. */
.potaden-product-detail__spec-diff {
	margin: 4px 0 0;
	color: #1c5683;
	font-size: 12px;
	font-weight: 800;
}

.potaden-product-detail__spec-diff-inline {
	margin-left: 8px;
	color: #1c5683;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

/* Ver.0.10.2: no `.potaden-product-detail__section` class on this section anymore (see PHP) —
   own top margin keeps the page rhythm without the shared card background/padding/radius, so
   the generation flow reads as models placed directly on the page background. */
.potaden-product-detail__generations {
	margin-top: 24px;
}

/* Ver.0.9.8: at most 3 steps always fit one row now (no scrolling needed on PC or mobile), so
   this wrapper (see PHP) is a harmless no-op kept only as a safety net for unusually long
   model names on very narrow screens. */
.potaden-product-detail__generation-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Ver.0.10.7: compact left-aligned label above the diagram with a calendar icon. It remains a
   real H2 for structure/aria-labelledby but never inherits SWELL's heading band. */
.potaden-product-detail__generations-caption {
	display: flex !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: #59636e !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-align: left !important;
	align-items: center;
	gap: 7px;
}

.potaden-product-detail__generations-caption .potaden-product-detail__section-icon {
	width: 16px;
	height: 16px;
	color: #7b8792;
}

.potaden-product-detail__generations-caption::before,
.potaden-product-detail__generations-caption::after {
	content: none !important;
	display: none !important;
}

.potaden-product-detail__generation-scroll:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

.potaden-product-detail__generation-flow {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 10px;
	align-items: stretch;
	list-style: none;
	flex-wrap: wrap;
}

/* Ver.0.10.18: SWELL's `.post_content ol` adds a 1.5em (~21px) inline-start padding after
   the plugin rule. Limit the reset to this one generation list and use !important so the
   theme cannot shrink all three cards again; ordinary article ordered lists are untouched. */
.post_content .potaden-product-detail__generation-flow {
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

.potaden-product-detail__generation-arrow {
	display: flex;
	color: var(--potaden-muted);
	font-size: 18px;
	font-weight: 700;
	align-items: center;
}

/* Ver.0.10.1: cards in one row stretch to equal height (.generation-flow's align-items:stretch)
   and the specs mini-row below is pushed to the bottom via margin-top:auto, so 参考価格／容量／
   定格出力 line up along the same bottom edge across previous/current/successor regardless of
   how many lines the name/status above happen to take. */
.potaden-product-detail__generation-step {
	position: relative;
	display: grid;
	box-sizing: border-box;
	grid-template-columns: minmax(0, 1fr);
	/* Ver.0.10.20 trimmed the specs row from 76px to 58px, but real measured content (3 spec
	   lines + 8px top padding) needs 63px — 58px was clipping the "出力" row by a few px.
	   Ver.0.10.21 corrects that back to 63px and instead finds the remaining PC savings from
	   row 1 (68px→65px, still fits a real 2-line product name with a small buffer) and from the
	   CTA row, which now only reserves its 40px on cards that actually render a button (see
	   `--no-cta` below) instead of on every card regardless. */
	grid-template-rows: 65px 35px 63px minmax(40px, auto);
	min-width: 160px;
	padding: 16px 20px 9px;
	border: 1px solid #e1e5e9;
	border-radius: 5px;
	background: #fff;
	flex: 1 1 160px;
	gap: 5px;
	align-items: start;
}

/* Ver.0.10.21: cards with no CTA (the current-viewed model, and an unresolved previous/successor
   placeholder) never render a 4th grid item, yet the fixed 4-row template still reserved a full
   40px+gap for it — a dead strip of blank space every time. Dropping the row and opting this
   card out of `.generation-flow`'s `align-items: stretch` (via `align-self: flex-start`) lets it
   end right after its own content instead of being stretched to match its CTA-bearing siblings.
   The 3-card "same height" convention is intentionally not preserved for this specific case —
   the alternative was a large empty block purely to keep heights equal, which was rejected. */
.potaden-product-detail__generation-step--no-cta {
	grid-template-rows: 65px 35px 63px;
	padding-bottom: 12px;
	align-self: flex-start;
}

/* Ver.0.10.9: representative photos reuse the existing primary-image meta. Text remains the
   main content (about 70%), while a small contained image occupies the right side. Specs and
   the optional detail link span the full card width below, keeping all three cards aligned. */
.potaden-product-detail__generation-step--has-image {
	grid-template-columns: minmax(0, 11fr) minmax(108px, 9fr);
	column-gap: 10px;
}

.potaden-product-detail__generation-content {
	display: flex;
	grid-row: 1;
	grid-column: 1 / -1;
	height: auto;
	min-width: 0;
	gap: 4px;
	flex-direction: column;
	align-items: flex-start;
}

.potaden-product-detail__generation-step--has-image .potaden-product-detail__generation-content {
	grid-column: 1;
}

.potaden-product-detail__generation-status {
	display: flex;
	grid-row: 2;
	grid-column: 1 / -1;
	min-width: 0;
	align-items: flex-end;
}

.potaden-product-detail__generation-status > .potaden-products__status {
	margin: 0;
}

.potaden-product-detail__generation-step--has-image .potaden-product-detail__generation-status {
	grid-column: 1;
}

.potaden-product-detail__generation-media {
	display: flex;
	grid-row: 1 / 3;
	grid-column: 2;
	width: 100%;
	height: auto;
	min-height: 104px;
	align-self: stretch;
	align-items: flex-end;
	justify-content: center;
}

.potaden-product-detail__generation-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* The current step stays identifiable without an extra icon: the existing stronger border and
   faint background tint are sufficient and do not compete with the product image/status chip. */
.potaden-product-detail__generation-step--current {
	border-width: 1px;
	border-color: var(--potaden-accent);
	padding: 16px 20px 9px;
	box-shadow: inset 0 0 0 1px var(--potaden-accent);
	background: #eef5fa;
}

/* Ver.0.10.21: the current-viewed model never renders a CTA (see `--no-cta` above), so this
   2-class combination — more specific than either single-class rule — is what actually decides
   its bottom padding; without it, `--current`'s own `padding` shorthand (below, same specificity
   as `--no-cta`, later in source order) would silently win and re-introduce the reserved gap. */
.potaden-product-detail__generation-step--current.potaden-product-detail__generation-step--no-cta {
	padding-bottom: 12px;
}

.potaden-product-detail__generation-step--placeholder {
	border-style: dashed;
	background: #fafbfc;
}

.potaden-product-detail__generation-step--placeholder-none {
	border-style: solid;
	background: #f7f8f9;
}

.potaden-product-detail__generation-empty-label {
	margin: 0;
	color: #626d78;
	font-size: 12px;
	font-weight: 700;
}

.potaden-product-detail__generation-empty-note {
	display: flex;
	box-sizing: border-box;
	grid-row: 3;
	grid-column: 1 / -1;
	width: 100%;
	height: 58px;
	margin: 0;
	padding-top: 8px;
	border-top: 1px solid #edf0f2;
	color: #7a848e;
	font-size: 11px;
	line-height: 1.45;
	align-items: flex-start;
}

/* ============================================================================================
   Ver.0.10.39: 「モデルの位置づけ・関係」— PC「幹（前後モデル）／枝（派生・容量違い・拡張構成）」
   の2段構成。幹は既存の.generation-flow/.generation-stepをそのまま流用（→矢印つき、上のルール
   群がそのまま適用される）。枝は同じ.generation-stepをベースにしつつ、幹の固定grid-template-rows
   （65px/35px/63px/auto）を前提にした`.generation-specs`等のgrid-row指定を無効化するため、
   .relation-branch単体をgridでなくflex縦積みへ切り替える（矢印は使わず、キャプション＋余白のみ
   で幹と区切る）。既存の.generation-step系ルールとの重複・上書きは意図的で、後方の枝専用ルールが
   カスケード順で勝つ。 ============================================================================================ */

/* Ver.0.10.41: `.potaden-product-detail__relations`／`-title`の実際の定義は、このファイル末尾の
   Ver.0.10.41ブロック（現行モデル中心の関係グラフ）にある。以下、このコメントより下の
   `.generation-*`/`.relation-branch*`/`.relation-tag*`/`.relation-trunk-notes`系ルールは
   Ver.0.10.39〜0.10.40の「幹＋枝」デザイン用で、詳細ページはもう出力しない（未使用・削除はして
   いない）。 */

/* Ver.0.10.39 (pre-launch fix): unconfirmed previous/successor is a short line under the trunk
   row, not a full placeholder card — keeps 「モデルの位置づけ・関係」's height close to the
   card-only case even when one or both sides are unconfirmed. Up to 2 items (previous/successor),
   so a simple inline list is enough; no wrapping/grid concerns like the branch row has. */
.potaden-product-detail__relation-trunk-notes {
	display: flex;
	margin: 8px 0 0;
	padding: 0;
	gap: 4px 14px;
	flex-wrap: wrap;
	list-style: none;
}

.potaden-product-detail__relation-trunk-notes li {
	color: var(--potaden-muted);
	font-size: 11.5px;
	font-weight: 700;
}

/* Ver.0.10.40 (2nd pass): dropped the full-width horizontal "branch line" and per-card stems from
   the first cut of this connector — real-screen feedback was that a mind-map-precise connection
   wasn't wanted, and the full-width line read as heavier than intended. What remains is just the
   short tick under the current-model card (`.generation-step--current::after` below), leading
   into this caption + card row — enough to read as "branches off from here" without adding height
   or implying an exact, computed connection to each card. margin-top is small on purpose: most of
   the visual gap is the tick itself. */
.potaden-product-detail__relation-branches-wrap {
	margin-top: 10px;
}

.potaden-product-detail__relation-branches-caption {
	margin: 0 0 6px;
	color: var(--potaden-muted);
	font-size: 11.5px;
	font-weight: 700;
}

.potaden-product-detail__relation-branches {
	display: flex;
	margin: 0;
	padding: 0;
	gap: 10px;
	flex-wrap: wrap;
	list-style: none;
}

.potaden-product-detail__relation-branch {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	gap: 6px;
	min-width: 150px;
	max-width: 220px;
	padding: 12px 14px 10px;
	border: 1px solid #e1e5e9;
	border-radius: 5px;
	background: #fff;
	flex: 1 1 150px;
}

/* Ver.0.10.40: short tick under the current-model card — the only piece of the connector that
   survived the 2nd-pass simplification above. "This is where the branches come from", nothing
   more literal than that. Height matches `.relation-trunk-notes`'s 8px top margin so the tick
   never visually crosses into that text when both an unconfirmed trunk side and branches are
   present on the same product. */
.potaden-product-detail__generation-step--current::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 2px;
	height: 8px;
	background: var(--potaden-border);
	transform: translateX(-50%);
}

.potaden-product-detail__relation-branch .potaden-product-detail__generation-specs,
.potaden-product-detail__relation-branch .potaden-product-detail__generation-empty-note {
	height: auto;
	margin-top: 2px;
}

.potaden-product-detail__relation-branch .potaden-product-detail__generation-name {
	-webkit-line-clamp: 3;
}

.potaden-product-detail__relation-branch--note-only {
	gap: 4px;
	background: #fafbfc;
}

.potaden-product-detail__relation-tag {
	display: inline-flex;
	align-self: flex-start;
	padding: 1px 7px;
	border-radius: 3px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.potaden-product-detail__relation-tag--previous,
.potaden-product-detail__relation-tag--successor {
	color: #1769aa;
	background: #e7f0f8;
}

.potaden-product-detail__relation-tag--derivative {
	color: #7a4fb0;
	background: #f1e9fa;
}

/* Ver.0.10.40: 派生元（base_model、derivativeの逆方向）は派生モデルと対になる関係なので同系色
   を使うが、方向の違いが見た目でも分かるよう彩度をわずかに落とす。 */
.potaden-product-detail__relation-tag--base_model {
	color: #8a6bb0;
	background: #f4eefa;
}

.potaden-product-detail__relation-tag--capacity_variant {
	color: #0f7a6b;
	background: #e2f5f1;
}

/* Ver.0.10.40: 同シリーズ（series_peer）は容量違い等ほど関係を言い切れない、より緩い関係のため、
   容量違いと近い色相を保ちつつ主張を弱めたニュートラルなグレーがかった配色にする。 */
.potaden-product-detail__relation-tag--series_peer {
	color: #5b6b73;
	background: #eaf0f1;
}

.potaden-product-detail__relation-tag--expansion_config {
	color: #8a5a00;
	background: #fdf1da;
}

.potaden-product-detail__relation-branch-note {
	margin: 2px 0 0;
	color: #626d78;
	font-size: 11px;
	line-height: 1.55;
}

.potaden-product-detail__relation-branches-more {
	margin-top: 10px;
}

.potaden-product-detail__relation-branches-more > summary {
	color: var(--potaden-accent);
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.potaden-product-detail__relation-branches-more > summary::-webkit-details-marker {
	display: none;
}

.potaden-product-detail__relation-branches-more[open] > summary {
	margin-bottom: 10px;
}

.potaden-product-detail__relation-branches-more .potaden-product-detail__relation-branches {
	margin: 0;
}

.potaden-product-detail__generation-name {
	display: -webkit-box;
	max-width: 100%;
	font-weight: 700;
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.potaden-product-detail__generation-step--has-image .potaden-product-detail__generation-name {
	max-width: 100%;
}

/* Ver.0.10.2: 発売年（任意）— 価格・容量・出力の3項目とは別の情報階層として、製品名の直下に
   小さく薄く表示する。未登録なら要素ごと出力されない（PHP側でスキップ）。 */
.potaden-product-detail__generation-release-date {
	margin: 0;
	color: #9299a2;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.25;
	white-space: nowrap;
}

/* Ver.0.10.2: 「ざっくり世代比較」— 価格・容量・定格出力の3項目のみ、1項目1行。dtに固定幅を
   与えることで、隣り合う3枚のカードの見た目の横幅がおおむね揃う（.generation-flowの
   flex:1 1 160pxにより）状況下で、各行のラベル／値の境界位置も自然に揃う。margin-top:auto
   で行の集合自体をカード下端に揃える（他のスペックは含めない）。 */
.potaden-product-detail__generation-specs {
	display: grid;
	box-sizing: border-box;
	grid-row: 3;
	grid-column: 1 / -1;
	width: 100%;
	height: 58px;
	margin: 0;
	padding-top: 8px;
	gap: 2px 0;
	border-top: 1px solid #edf0f2;
	align-content: start;
}

.potaden-product-detail__generation-specs > div {
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.potaden-product-detail__generation-specs dt {
	flex: 0 0 32px;
	margin: 0;
	color: var(--potaden-muted);
	font-size: 10px;
	font-weight: 700;
}

.potaden-product-detail__generation-specs dd {
	margin: 0;
	color: #1d1d1f;
	font-size: 12px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.potaden-product-detail__generation-detail-link {
	display: inline-flex;
	box-sizing: border-box;
	grid-row: 4;
	grid-column: 1 / -1;
	width: 100%;
	min-height: 40px;
	margin-top: 0;
	padding: 8px 10px;
	border: 1px solid #8fb4d1;
	border-radius: 5px;
	background: #f1f7fc;
	color: #1b5f91;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	justify-self: stretch;
}

.potaden-product-detail__generation-detail-link:hover,
.potaden-product-detail__generation-detail-link:focus-visible {
	color: #124d79;
	border-color: #5f94bb;
	background: #e4f0f8;
	text-decoration: none;
}

/* Ver.0.9.9: rivals are small comparison cards, not a link list — PC shows up to 3 across so
   the reader can compare all rivals side by side; each card leads with the manufacturer name
   (its own line, ahead of the product name) so Jackery/Anker/BLUETTI read as distinct at a
   glance without needing brand colors or logo images. */
.potaden-product-detail__rival-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin: 0;
	padding: 0;
	gap: 14px;
	list-style: none;
}

.potaden-product-detail__rival-card {
	display: flex;
	min-width: 0;
	padding: 16px;
	border: 1px solid #e1e5e9;
	border-radius: 10px;
	background: #fff;
	flex-direction: column;
	gap: 4px;
}

/* Ver.0.10.24: 「何を優先するとどちらを選ぶべきか」— small kicker above the rival's own image/
   name, in the page's existing accent blue so it reads as "a judgment cue", not a second
   heading competing with the manufacturer/product name below it. Optional; only rendered when
   the admin has filled in a comparison label for that rival slot. */
.potaden-product-detail__rival-comparison-label {
	margin: 0 0 6px;
	color: var(--potaden-accent);
	font-size: 12px;
	font-weight: 800;
}

/* Ver.0.10.24: comparison reason — placed after the rival's own good/caution points (its "what
   it's like"), just before the action buttons, so the read order is: what the rival is → why
   you'd pick it over the current product instead. Plain text, no quote marks/blockquote, to
   avoid it reading like a review excerpt. */
.potaden-product-detail__rival-comparison-reason {
	margin: 4px 0 0;
	color: #3a4048;
	font-size: 12.5px;
	line-height: 1.6;
}

/* Ver.0.10.0: rival's own representative image (existing product-image meta, no new field). */
.potaden-product-detail__rival-media {
	display: flex;
	height: 120px;
	margin: 0 0 8px;
	padding: 6px;
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	background: var(--potaden-detail-surface);
}

.potaden-product-detail__rival-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.potaden-product-detail__rival-image-placeholder {
	color: #9299a2;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.potaden-product-detail__rival-manufacturer {
	margin: 0;
	color: var(--potaden-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.potaden-product-detail__rival-name {
	display: block;
	margin: 0 0 6px;
	color: #1d1d1f;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.potaden-product-detail__rival-name:hover,
.potaden-product-detail__rival-name:focus-visible {
	color: var(--potaden-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.potaden-product-detail__rival-card .potaden-products__status--prominent {
	align-self: flex-start;
	margin-bottom: 8px;
	padding: 5px 11px;
	font-size: 13px;
}

.potaden-product-detail__rival-specs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 8px;
	padding: 8px 0;
	border-top: 1px solid #edf0f2;
	border-bottom: 1px solid #edf0f2;
	gap: 4px;
}

.potaden-product-detail__rival-specs dt {
	margin: 0 0 2px;
	color: var(--potaden-muted);
	font-size: 11px;
	font-weight: 700;
}

.potaden-product-detail__rival-specs dd {
	margin: 0;
	color: #1d1d1f;
	font-size: 13px;
	font-weight: 800;
	overflow-wrap: anywhere;
}

.potaden-product-detail__rival-points {
	display: grid;
	margin: 0 0 10px;
	padding: 0;
	gap: 3px;
	list-style: none;
}

/* Ver.0.10.4: same baseline→flex-start fix as `.highlight-item` above, scaled down. */
.potaden-product-detail__rival-point {
	display: flex;
	gap: 6px;
	align-items: flex-start;
	color: #1d1d1f;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
}

/* Ver.0.10.0: same inline-SVG mark as the main highlights list, just smaller. */
.potaden-product-detail__rival-point-mark {
	display: inline-flex;
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	align-items: center;
	justify-content: center;
}

.potaden-product-detail__rival-point-mark .potaden-product-detail__mark-svg {
	width: 100%;
	height: 100%;
}

.potaden-product-detail__rival-point--good .potaden-product-detail__rival-point-mark {
	color: #c65a64;
	margin-top: 1px;
}

.potaden-product-detail__rival-point--caution .potaden-product-detail__rival-point-mark {
	color: #6b6058;
	margin-top: 1px;
}

.potaden-product-detail__rival-actions {
	display: grid;
	margin-top: auto;
	gap: 6px;
}

.potaden-product-detail__rival-detail,
.potaden-product-detail__rival-compare {
	display: inline-flex;
	box-sizing: border-box;
	min-height: 40px;
	padding: 8px 14px;
	border-radius: 5px;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--potaden-accent);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.potaden-product-detail__rival-detail {
	border: 1px solid #8fb4d1;
	background: #f1f7fc;
	color: #1b5f91;
}

.potaden-product-detail__rival-compare {
	border: 1px solid var(--potaden-accent);
	background: #fff;
	color: var(--potaden-accent);
}

.potaden-product-detail__rival-detail:hover,
.potaden-product-detail__rival-detail:focus-visible {
	border-color: #5f94bb;
	background: #e4f0f8;
	color: #124d79;
}

.potaden-product-detail__rival-compare:hover,
.potaden-product-detail__rival-compare:focus-visible {
	background: #eef5fa;
	color: #115486;
}

/* Toggled "added" state, shared with the generic single-product compare CTA below. */
.potaden-product-detail__rival-compare.is-added,
.potaden-product-detail__compare-link.is-added {
	border-color: #16803c;
	background: #16803c;
	color: #fff;
}

.potaden-product-detail__rival-compare.is-added:hover,
.potaden-product-detail__rival-compare.is-added:focus-visible,
.potaden-product-detail__compare-link.is-added:hover,
.potaden-product-detail__compare-link.is-added:focus-visible {
	background: #106129;
	color: #fff;
}

/* Ver.0.9.9: persistent readout of the localStorage compare list (see product-rival-compare.js).
   Ver.0.10.72: rebuilt as a 3-column grid (`1fr auto 1fr`) instead of Ver.0.10.71's flex-wrap row.
   With the two outer columns both `1fr` (equal flexible space), the middle column — the CTA
   button — sits at the true horizontal center of the bar regardless of how long the count text or
   リストをクリア are, matching the requested "count text — big centered button — clear link" layout
   (real-screen feedback was that Ver.0.10.71's left-aligned button still read as secondary). Falls
   back to a single stacked column on mobile (below). */
/* Ver.0.10.73: fixes a regression introduced in Ver.0.10.71 — this element is empty markup
   (`<p class="potaden-product-detail__compare-status" data-potaden-compare-status hidden></p>`)
   until product-rival-compare.js's updateStatus() has localStorage compare-list items to show,
   and relies on the native `hidden` attribute (UA-stylesheet `display:none`) to stay invisible
   until then. Ver.0.10.71 added an unconditional `display: flex` here (for the CTA layout) without
   the `:not([hidden])` guard already used elsewhere in this file for exactly this reason (see the
   `.potaden-products__search-block-submit` comment above) — that unconditional `display` silently
   overrode `[hidden]`, so the empty `<p>` rendered as a visible blank gray rounded bar on every
   product detail page (any manufacturer) whenever the visitor's compare list was empty, which is
   the normal/default state for a first-time visitor. Scoping to `:not([hidden])` restores the
   original hide-when-empty behavior while keeping the Ver.0.10.72 grid CTA layout for when it's
   actually populated. */
.potaden-product-detail__compare-status:not([hidden]) {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px 16px;
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid #dbe2e8;
	border-radius: 8px;
	background: #f5f7f9;
	color: #333;
	font-size: 13px;
}

.potaden-product-detail__compare-status-count {
	justify-self: start;
}

/* Ver.0.10.71: was a plain underlined text link — user feedback (real-screen test) was that the
   primary action on this bar was too easy to miss next to the count text and the "リストをクリア"
   text link. Restyled as a solid blue button using the same CTA language as
   `.potaden-products__search-block-submit` on the search page, so the one action that actually
   navigates somewhere reads as clearly primary.
   Ver.0.10.72: enlarged further (Ver.0.10.71's 36px-tall button still read as secondary/easy to
   miss per real-screen feedback) and centered via the grid above — this is the bar's one primary
   action, sized and placed accordingly. `リストをクリア`
   (`.potaden-product-detail__compare-status-clear`) is unchanged per explicit instruction. */
.potaden-product-detail__compare-status-link {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	justify-self: center;
	min-width: 260px;
	min-height: 48px;
	padding: 10px 24px;
	border: 1px solid var(--potaden-accent);
	border-radius: 6px;
	background: var(--potaden-accent);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(20, 32, 43, 0.18);
}

.potaden-product-detail__compare-status-link:hover,
.potaden-product-detail__compare-status-link:focus-visible {
	background: #115486;
	color: #fff;
}

.potaden-product-detail__compare-status-clear {
	justify-self: end;
}

@media (max-width: 767px) {
	/* Ver.0.10.72: 縦積み — 比較件数 → 大きなCTAボタン → リストをクリア。DOM順（count → link →
	   clear）がそのままこの並び順になるため、grid-auto-flowの変更だけで済む。 */
	.potaden-product-detail__compare-status {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.potaden-product-detail__compare-status-count,
	.potaden-product-detail__compare-status-link,
	.potaden-product-detail__compare-status-clear {
		justify-self: center;
	}

	.potaden-product-detail__compare-status-link {
		width: 100%;
		max-width: 300px;
	}
}

.potaden-product-detail__compare-status-clear {
	border: 0;
	background: transparent;
	color: var(--potaden-muted);
	font: inherit;
	font-size: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Ver.0.9.9: detail page's own "？" spec-glossary UI — plain button + sibling panel, not the
   search form's `<details>` popover. The panel expands in normal block flow (full row width)
   rather than as an absolutely positioned overlay, so it cannot clip inside a narrow row. */
.potaden-product-detail__spec-help-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 1px solid #86909c;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #4b5663;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	cursor: pointer;
}

.potaden-product-detail__spec-help-toggle:hover,
.potaden-product-detail__spec-help-toggle:focus-visible,
.potaden-product-detail__spec-help-toggle.is-open {
	border-color: var(--potaden-accent);
	outline: 0;
	background: var(--potaden-accent);
	color: #fff;
}

.potaden-product-detail__spec-help-toggle:focus-visible {
	box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.22);
}

/* Ver.0.10.0: a mouse/touch click must never leave a lingering focus-ring "blue state" behind —
   only real keyboard focus gets the :focus-visible ring above. `.is-open` (JS-driven) is the
   only thing that indicates the panel is open. */
.potaden-product-detail__spec-help-toggle:focus:not(:focus-visible) {
	outline: 0;
	box-shadow: none;
}

/* Ver.0.10.3 originally needed `flex-basis:100%` here because `.spec-cell` was a flex row (icon +
   `.spec-cell-body`) and this panel was a 3rd flex item competing for the same line (the "3
   characters per line" bug). Ver.0.10.5 made `.spec-cell` a plain block (see its own comment), so
   this panel is now simply a block-level sibling that already spans the full cell width on its
   own — no flex properties needed any more. */
.potaden-product-detail__spec-help-panel {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 9px 11px;
	border: 1px solid #d7dce2;
	border-radius: 6px;
	background: #f5f7f9;
	color: #333;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.6;
	text-align: left;
}

.potaden-product-detail__spec-help-panel[hidden] {
	display: none;
}

.potaden-product-detail__spec-help-title {
	display: block;
	margin-bottom: 4px;
	color: #1d1d1f;
	font-size: 13px;
}

.potaden-product-detail__spec-help-item {
	display: block;
}

.potaden-product-detail__spec-help-item + .potaden-product-detail__spec-help-item {
	margin-top: 6px;
}

/* The 4-tile key-spec section keeps its own centered layout — the help panel there still needs
   left-aligned text regardless of the tile's own text-align:center. */
.potaden-product-detail__spec-tile .potaden-product-detail__spec-help-panel {
	margin-top: 8px;
}

@media (max-width: 767px) {
	/* Ver.0.10.68: this SP-only duplicate of the ineffective `padding-top: 0` rule above was
	   never actually functioning either (same specificity fight against SWELL's `.top #content`,
	   see the comment near `.top.potaden-products-fullwidth #content` earlier in this file, which
	   now handles both PC and SP with a single unscoped-by-viewport rule since SWELL's own
	   `4em` value already scales per-viewport via `#content`'s own font-size). Removed here to
	   avoid leaving dead/misleading CSS behind. */

	.potaden-product-detail__lead-comment {
		padding: 14px 15px;
	}

	.potaden-product-detail__lead-comment::before,
	.potaden-product-detail__lead-comment::after {
		left: 2%;
		width: 96%;
		height: 5px;
	}

	.potaden-product-detail .potaden-product-detail__lead-comment-title {
		margin-bottom: 8px;
		font-size: 18px;
	}

	.potaden-product-detail__lead-comment-title .potaden-product-detail__section-icon {
		width: 21px;
		height: 21px;
	}

	.potaden-product-detail__lead-comment-headline,
	.potaden-product-detail__lead-comment-body {
		font-size: 14px;
	}

	.potaden-product-detail__highlights {
		padding: 14px 16px;
	}

	/* Ver.0.9.7: marks stay large/bold on mobile too — PC and mobile share the same ○/△
	   treatment. Ver.0.10.3: text itself is no longer pinned to a separate (larger) mobile
	   size — it now simply inherits the same 13.5px used on PC. */

	/* Ver.0.10.1: secondary spec row becomes 2 columns × 2 rows on mobile (still no independent
	   cards) — reset the left/top rule borders that only made sense in the 4-across PC layout. */
	.potaden-product-detail__spec-panel-row--secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.potaden-product-detail__spec-panel-row--secondary .potaden-product-detail__spec-cell:nth-child(2n+1) {
		border-left: 0;
	}

	.potaden-product-detail__spec-panel-row--secondary .potaden-product-detail__spec-cell:nth-child(n+3) {
		border-top: 1px solid #edf0f2;
	}

	/* Ver.0.10.20: 重量／参考価格は常に表示だが、サイクル数／満充電時間はそれぞれ個別にデータが
	   ある製品だけ表示されるため、片方だけ登録済みの製品では secondary 行が3セルになる。2列
	   グリッドでは3セル目（＝最後のセル）だけが単独の行に落ち、右隣が空白のまま残って見えるため、
	   「3セルちょうど」のときに限り最後のセルを全幅化して空き枠を消す。4セル（両方登録）・2セル
	   （両方未登録）のときはこの条件に一致せず、既存の2×2レイアウトのまま変わらない。 */
	.potaden-product-detail__spec-panel-row--secondary .potaden-product-detail__spec-cell:nth-child(3):last-child {
		grid-column: 1 / -1;
		border-left: 0;
	}

	/* Ver.0.10.3: on mobile the説明パネル must use the full 主要スペック width, not just its own
	   cell's ~50% column — a cell narrow enough that the panel text wrapped to a few characters
	   per line. While its panel is open, the cell itself spans the full grid row (both the
	   primary 2-col and secondary 2-col mobile layouts), pushing any following cell onto its own
	   line below (native CSS Grid auto-flow — no JS, no DOM move needed). The "？" toggle stays
	   exactly where it is; only the expanded state changes width. PC is untouched (this block is
	   inside the mobile media query only). Falls back to the previous (still fully usable, just
	   narrower) cell-width panel in browsers without `:has()` support. */
	.potaden-product-detail__spec-cell:has(> .potaden-product-detail__spec-help-panel:not([hidden])) {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 0;
	}

	.potaden-product-detail__spec-cell-body dd {
		font-size: 16px;
	}

	.potaden-product-detail__spec-panel-row--primary .potaden-product-detail__spec-cell-body dd {
		font-size: 18px;
	}

	/* Ver.0.9.8: at most 3 steps (previous/current/successor), so the flow fits one row on a
	   phone screen without scrolling — compact padding/font, names may wrap to 2 lines, and
	   flex:1 keeps the (up to) 3 steps evenly sized instead of a fixed min-width forcing
	   overflow. .generation-scroll stays a harmless no-op safety net (see base rule). */
	.potaden-product-detail__generation-flow {
		flex-wrap: nowrap;
		gap: 0;
	}

	/* Ver.0.10.16: symmetrically reclaim up to 18px from each side of SWELL's detail-content
	   gutter, while capping the result at viewport width minus 4px. This leaves about 2px per
	   side without horizontal overflow even when a theme uses a narrower-than-20px gutter. */
	.potaden-product-detail__generation-scroll {
		position: relative;
		left: 50%;
		width: min(calc(100% + 28px), calc(100vw - 8px));
		max-width: calc(100vw - 8px);
		margin-inline: 0;
		transform: translateX(-50%);
	}

	/* Ver.0.10.21: content row 38px→42px (real 2-line name + release date measured at ~41px;
	   38px was clipping it by a few px) — a small increase, but the image row 78px→60px and
	   status row 24px→22px (measured badge height 20px) both shrink to match their actual
	   content, so the net card height still drops. See `--no-cta` below for the 5th (CTA) row. */
	.potaden-product-detail__generation-step {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 42px 60px 22px 54px 36px;
		min-width: 0;
		padding: 4px 10px;
		flex: 1 1 0;
		gap: 2px;
	}

	.potaden-product-detail__generation-step--no-cta {
		grid-template-rows: 42px 60px 22px 54px;
		padding-bottom: 6px;
		align-self: flex-start;
	}

	.potaden-product-detail__generation-step--has-image {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}

	.potaden-product-detail__generation-content {
		grid-row: 1;
		grid-column: 1 / -1;
		width: 100%;
		gap: 1px;
	}

	.potaden-product-detail__generation-step--has-image .potaden-product-detail__generation-content {
		grid-column: 1 / -1;
	}

	.potaden-product-detail__generation-media {
		position: static;
		grid-row: 2;
		grid-column: 1 / -1;
		width: calc(100% + 12px);
		height: 78px;
		min-height: 0;
		align-self: center;
		align-items: center;
		margin: 0 -6px;
	}

	.potaden-product-detail__generation-status,
	.potaden-product-detail__generation-step--has-image .potaden-product-detail__generation-status {
		grid-row: 3;
		grid-column: 1 / -1;
		align-items: center;
	}

	.potaden-product-detail__generation-step--has-image .potaden-products__status--prominent {
		max-width: 100%;
	}

	.potaden-product-detail__generation-step--current {
		padding: 4px 10px;
	}

	.potaden-product-detail__generation-step--current.potaden-product-detail__generation-step--no-cta {
		padding-bottom: 6px;
	}

	.potaden-product-detail__generation-name {
		font-size: 11px;
		line-height: 1.25;
	}

	.potaden-product-detail__generation-release-date {
		font-size: 10px;
	}

	.potaden-product-detail__generation-arrow {
		flex: 0 0 5px;
		font-size: 8px;
		justify-content: center;
	}

	.potaden-product-detail__generation-step .potaden-products__status--prominent {
		padding: 2px 6px;
		font-size: 10px;
	}

	.potaden-product-detail__generation-specs {
		grid-row: 4;
		height: 54px;
		gap: 1px 2px;
		padding-top: 4px;
	}

	.potaden-product-detail__generation-empty-note {
		grid-row: 4;
		height: 54px;
		padding-top: 4px;
		font-size: 9px;
	}

	.potaden-product-detail__generation-specs dt {
		font-size: 8.5px;
	}

	.potaden-product-detail__generation-specs dd {
		font-size: 10px;
	}

	.potaden-product-detail__generation-detail-link {
		grid-row: 5;
		width: 100%;
		min-height: 36px;
		margin-top: 0;
		padding: 5px;
		border-radius: 4px;
		font-size: 10.5px;
	}

	/* Ver.0.10.39: SP「枝」（関連する機種・構成）は固定2列にして高さを抑える。矢印は使わず、
	   幹1段＋枝1〜2段（最大4件が2列×2行に収まる）を基本形として3段以上になりにくくする。
	   Ver.0.10.40（2nd pass）：接続線自体がPC側でcurrentカードのtick1本まで簡略化されたため、
	   SP固有の追加オーバーライドは不要になった（tickは共通ルールがそのまま適用される）。 */
	.potaden-product-detail__relation-branches-wrap {
		margin-top: 8px;
	}

	.potaden-product-detail__relation-branches {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.potaden-product-detail__relation-branch {
		min-width: 0;
		max-width: none;
		padding: 8px 10px;
	}

	.potaden-product-detail__relation-branch .potaden-product-detail__generation-name {
		font-size: 11px;
		line-height: 1.25;
	}

	.potaden-product-detail__relation-branch .potaden-product-detail__generation-release-date {
		font-size: 10px;
	}

	.potaden-product-detail__relation-branch .potaden-product-detail__generation-media {
		width: 100%;
		height: 54px;
		margin: 0;
	}

	.potaden-product-detail__relation-branch-note {
		font-size: 10px;
	}

	.potaden-product-detail__relation-tag {
		font-size: 9.5px;
	}

	/* Ver.0.9.7: 詳細スペック／充電・拡張スペック drop the card grid for a simple "label ｜
	   value" row list on mobile — the 4-tile primary spec section above is unaffected (it uses
	   the separate .spec-tiles/.spec-tile classes, kept as cards per spec). */
	.potaden-product-detail__specs {
		display: block;
	}

	.potaden-product-detail__specs > div {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: baseline;
		padding: 8px 2px;
		border: 0;
		border-bottom: 1px solid #e3e7eb;
		border-radius: 0;
		background: transparent;
		gap: 4px 10px;
	}

	.potaden-product-detail__specs > div:last-child {
		border-bottom: 0;
	}

	/* Ver.0.10.30 added a PC-only `:nth-child(odd)` vertical divider here, whose extra
	   pseudo-class gave it higher specificity than the plain `border:0` reset above — it leaked
	   through onto mobile's single-column list (visually meaningless there, but still rendered)
	   until this explicit reset was added. Ver.0.10.31 removed the vertical divider from the PC
	   rules entirely (see the base, non-media-query `.specs` block above — the new single-row PC
	   cells use only a bottom border, no per-column divider), so this reset has nothing left to
	   override and was removed together with it. This comment is left as a pointer for anyone
	   diffing 0.10.30→0.10.31 who wonders where the rule went. */

	.potaden-product-detail__specs dt {
		margin-bottom: 0;
		flex: 0 0 auto;
		font-size: 13px;
	}

	.potaden-product-detail__specs dd {
		flex: 0 1 auto;
		font-size: 14px;
		font-weight: 700;
		text-align: right;
	}

	/* "？" panel forces a wrap onto its own full-width line within the row's flex container
	   (row has flex-wrap:wrap above) instead of squeezing beside the value or overflowing. */
	.potaden-product-detail__specs .potaden-product-detail__spec-help-panel {
		flex: 1 0 100%;
		text-align: left;
	}

	/* Ver.0.9.9: rivals become a scroll-snap carousel on mobile — one card reads at (nearly)
	   full width, the next card's edge peeks in on the right as the scroll affordance. Scoped
	   to this container only and with no JS scroll-position correction, so it cannot reproduce
	   the PC comparison-table snap-back bug documented for .comparison-scroll. */
	.potaden-product-detail__rival-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	.potaden-product-detail__rival-card {
		box-sizing: border-box;
		flex: 0 0 88%;
		max-width: 88%;
		scroll-snap-align: start;
	}

	.potaden-product-detail__compare-status {
		font-size: 12.5px;
	}

	/* Ver.0.10.24: stacked, not side-by-side, on mobile — two ~50%-width columns would each be
	   too narrow to read comfortably. */
	.potaden-product-detail__suitability-columns {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	/* Ver.0.10.0: 購入者レビューの傾向 — same one-card-plus-peek carousel pattern as the rival
	   cards, scoped to its own container only. */
	.potaden-product-detail__review-theme-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
	}

	/* Ver.0.10.5 narrowed 88%→84%; Ver.0.10.6 narrows further to 78% (within the requested 76〜80%
	   target per real-screen feedback — reading text still felt too wide at 84%). Width-only
	   change: no extra horizontal padding, no font-size reduction, card height still grows with
	   content, PC (outside this mobile media query) is untouched. */
	.potaden-product-detail__review-theme-card {
		box-sizing: border-box;
		flex: 0 0 78%;
		max-width: 78%;
		scroll-snap-align: start;
	}
}

/* Ver.0.10.8 mobile list prototype: two compact, information-led product cards per row. Desktop
   and tablet rules above remain unchanged. The card keeps every existing field; only the mobile
   visual order, spacing and image ratio change. */
@media (max-width: 767px) {
	.potaden-products__manufacturer-policy {
		margin-bottom: 9px;
	}

	.potaden-products__manufacturer-policy-title {
		font-size: 14px !important;
		white-space: nowrap;
	}

	.potaden-products__manufacturer-policy-summary {
		min-height: 40px;
		padding: 8px 10px;
	}

	.potaden-products__manufacturer-policy-content {
		padding: 0 10px 9px 35px;
	}

	.potaden-products__manufacturer-policy-content p {
		font-size: 13px;
		line-height: 1.55;
	}

	.potaden-products__manufacturer-policy-list {
		margin: 8px 0;
		gap: 8px;
	}

	.potaden-products__manufacturer-policy-item-label {
		font-size: 13px;
	}

	.potaden-products__manufacturer-policy-item-summary {
		font-size: 12.5px;
		line-height: 1.55;
	}

	body.potaden-products-fullwidth .potaden-products--cards .potaden-products__grid,
	.potaden-products--cards .potaden-products__grid {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px 8px;
	}

	.potaden-products--cards .potaden-products__card {
		box-sizing: border-box;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		border-radius: 7px;
		box-shadow: 0 1px 5px rgba(20, 30, 40, 0.06);
	}

	.potaden-products--cards .potaden-products__image {
		height: clamp(94px, 29vw, 120px);
		padding: 0;
	}

	.potaden-products--cards .potaden-products__card-body {
		padding: 9px 4px 10px;
	}

	.potaden-products--cards .potaden-products__card-title {
		display: -webkit-box;
		min-height: 2.8em;
		margin: 0 0 5px;
		padding-bottom: 4px;
		font-size: clamp(14px, 3.8vw, 15px);
		font-weight: 700;
		line-height: 1.4;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.potaden-products--cards .potaden-products__card-manufacturer {
		margin: 0 0 6px;
		font-size: 11px;
		line-height: 1.35;
		gap: 4px;
	}

	.potaden-products--cards .potaden-products__card-manufacturer-label {
		font-size: 9.5px;
	}

	.potaden-products--cards .potaden-products__card-status {
		min-height: 29px;
		margin-bottom: 6px;
		gap: 3px;
		flex-wrap: nowrap;
	}

	.potaden-products--cards .potaden-products__card-release-year {
		font-size: 10px;
	}

	.potaden-products--cards .potaden-products__card .potaden-products__status {
		padding: 3px;
		font-size: 9.5px;
		line-height: 1.35;
	}

	.potaden-products--cards .potaden-products__details {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 5px;
	}

	.potaden-products--cards .potaden-products__detail-row {
		display: block;
		min-width: 0;
		padding: 5px 4px;
		border: 1px solid #edf0f2;
		border-radius: 4px;
		background: #fafbfc;
	}

	.potaden-products--cards .potaden-products__detail-row dt {
		margin-bottom: 1px;
		color: #69727c;
		font-size: 10.5px;
		font-weight: 600;
		line-height: 1.3;
	}

	.potaden-products--cards .potaden-products__detail-row dd {
		font-size: 13px;
		font-weight: 700;
		line-height: 1.35;
	}

	.potaden-products--cards .potaden-products__compare-choice {
		box-sizing: border-box;
		min-height: 40px;
		margin: 0;
		padding: 6px 5px;
		font-size: 12.5px;
	}

	.potaden-products--cards .potaden-products__compare-choice input {
		width: 20px;
		height: 20px;
		flex: 0 0 auto;
	}

	.potaden-products--cards .potaden-products__card-controls {
		margin-top: auto;
		padding-top: 7px;
		gap: 5px;
	}

	.potaden-products--cards .potaden-products__card-action {
		margin-top: 0;
		padding-top: 0;
		gap: 6px;
	}

	.potaden-products--cards .potaden-products__card-action .potaden-products__link,
	.potaden-products--cards .potaden-products__card-action .potaden-products__purchase-link {
		box-sizing: border-box;
		min-height: 40px;
		padding: 7px 5px;
		font-size: 12px;
		line-height: 1.35;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 359px) {
	.potaden-products--cards .potaden-products__grid {
		gap: 8px 6px;
	}

	.potaden-products--cards .potaden-products__card-body {
		padding-right: 3px;
		padding-left: 3px;
	}

	.potaden-products--cards .potaden-products__card-title {
		font-size: 13.5px;
	}

	.potaden-products--cards .potaden-products__detail-row {
		padding-right: 3px;
		padding-left: 3px;
	}

	.potaden-products--cards .potaden-products__detail-row dd {
		font-size: 12px;
	}
}

/* ============================================================================================
   Ver.0.10.42: 「機種の位置づけ・関係」— 実際に写真・線がカード端までつながる関係図（2nd redesign
   pass）。Ver.0.10.41はin/current/outという分類は正しかったが、写真がなく接続線も装飾的な短い
   スタブに留まり「カードの一覧」に見えるという実画面指摘があった。PHP側
   （class-potaden-product-detail.php の compute_relation_layout()/render_relation_diagram()）が
   全ノード・全線の絶対座標を計算し、そのVERY SAME座標をSVGの<line>と絶対配置したカードの両方に使う
   ため、線は必ずカード端に実際に接続する。PC/SP用に別々の固定座標図を1回ずつ描画し、CSSでどちらか
   一方だけ表示する（スケール変換ではなく、SPは承認済みの115×154px・12px本文という専用寸法）。
   旧Ver.0.10.39〜0.10.41の`.generation-*`/`.relation-branch*`/`.relation-tag*`/
   `.relation-trunk-notes`系ルール（上のほうに残っている）はこのセクションではもう出力されず、未使用
   （過去バージョンとの互換のため削除はしていない）。

   Ver.0.10.43: 実サイト確認（gorogoro.site）を受けた最終調整。(1) SPで横スクロールが必要な場合でも
   PCと同じトポロジー（この機種を中心に左右へ展開）を維持するという設計自体は元々変更していないが、
   `--auto`（初期表示でこの機種を画面中央付近へ自動スクロールするJS）を「3件以上の分岐があるときだけ」
   から「常時」へ変更（PHP側）——単純な前後モデル1件ずつの構成でもSP幅では収まらないケースがあった
   ため。(2) `a.rg-node:hover`ルールを削除——ノードカード自体を`<a>`にする方式（Ver.0.10.42）をやめ、
   常に`<div>`にした（下記(3)参照）。(3) 解決済みの関連製品カードの下部に、控えめなテキストリンク
   `.rg-node-more-link`（「詳しく見る →」）を追加。カード全体を暗黙にクリック可能にする方式ではなく、
   見える affordance を持たせる要望のため。この機種自身のカード・note-onlyカードには出さない。この
   追加行の分だけ、PHP側`get_relation_diagram_metrics()`の`card_h`/`multi_card_h`を拡張済み
   （`card_w`/`photo_h`/gap系は不変）。

   Ver.0.10.44：分岐の関係タイプラベルがカード/線/矢印と重なる不具合、SPでnoteが「…」省略される
   不具合を修正するため`gap_stub`とnote幅を拡張したが、実画面確認の結果PC全体が間延びして「まとまり」
   が弱くなるという不合格が出た。

   Ver.0.10.45：Ver.0.10.44の反省を踏まえ、PCの間隔（`gap_stub`）はVer.0.10.43相当（SP18px/PC26px）
   まで戻し、代わりにnoteを「独立した吹き出し型の注釈ボックス」（`--bubble`、背景・枠・弱い角丸・
   三角ポインタ）へ変更し、横幅もカード幅に比例させず固定値（`note_w`、SP約160px/PC約210px、承認
   済みの140〜180px幅の範囲）にすることで、ノード同士の距離を広げずにnoteの可読性を確保した。
   「この機種」バッジは「このページの機種」へ文言変更（意味の曖昧さ解消）。

   Ver.0.10.46：分岐カードの高さ不足（`multi_card_h`一律使用）で容量・出力・詳しく見るがまとめて
   `overflow:hidden`に切られていた不具合を修正。noteの配置方向をカード直下からrelationの向き
   （in=左外側／out=右外側）と枝の位置（現在ノード中心より上=上・下=下）に応じた出し分けへ変更。

   Ver.0.10.47：実サイト確認の結果、Ver.0.10.46の「note上下配置」はSPの縦方向を増やすと不合格に
   なった。今回で構造を再整理した：
   (1) 関係タイプラベルは、線の中点ではなく「カード自身の上端／下端の外側」（`top_y`/`below_y`＋
       `label_gap`、place_relation_side()/render_relation_diagram()）へ完全に移動した。これにより
       `gap_stub`/`gap_spine`（カード間の接続チャンネル）がラベル用の横幅を確保する必要がなくなり、
       Ver.0.10.43比でさらに35〜40%縮小できた（PC: 60px→36px、SP: 40px→24px）——「PC右側の余白が
       広すぎる」という指摘への対応。
   (2) noteは「カード上下」をやめ「カードの横（relationの向きに応じて外側）」へ完全移動した——
       in側はダイアグラム全体の左外側、out側は右外側。これにより縦方向の高さがnoteによって伸びる
       ことがなくなった（SPの「縦に大きくならない」要件）。横幅も承認済みレンジへ再調整
       （`note_w`、SP約140px/PC約180px）。三角ポインタは対象カード方向（in=右向き／out=左向き）を
       指す。
   (3) 「このページの機種」バッジを、写真に重なる絶対配置オーバーレイから、カード上部の専用行
       （`.rg-node-current-badge`）へ変更した。
   (4) 参考価格（`_potaden_reference_price`）を復活。以前の「価格は表示しない」指示は撤回された。
   (5) 「詳しく見る →」を、枠線・背景・角丸・固定高さを持つ小さな囲みチップへ変更した。

   Ver.0.10.48：Ver.0.10.47の実サイト確認で、PC/SPともかなり改善したという評価を得た一方、3点の
   指摘があった。
   (1) SPで「詳しく見る →」がカード下端からはみ出す不具合を修正——`card_h`をさらに拡張
       （SP184px→200px）、チップ自体の`min-height`／`margin-top`もSP限定でわずかに縮小。
   (2) relation typeラベルを、「カードの近く（上端／下端の外側）」から「接続線そのものの意味を示す
       ラベル」として、線の中点に載せる方式へ再度変更した——ただし今回は縦書き
       （`writing-mode:vertical-rl`）にすることで、タグの横幅が数文字ぶんの狭い幅になり、Ver.0.10.42
       〜46で問題になっていた「カードに重なる」現象を回避できる（タグの高さ方向はカードの外を通る
       隙間内に収まるため、線の中点に置いてもカードへは重ならない）。配色をrelation note吹き出しと
       明確に区別（背景`#e4edf3`・枠`#9fb4c3`、noteの`#eef5fb`・`#b9cddd`とは別系統）。
   (3) 分岐（例：DELTA3→Classic/Plus）で全ての枝のrelation typeが同じ場合、各枝の幹（spineと
       現在ノードをつなぐ共有線）へ1個だけラベルを表示し、各枝の個別スタブへの重複表示をやめた
       （`place_relation_side()`）。relation typeが枝ごとに異なる場合は、従来どおり個別表示のまま。

   Ver.0.10.49：PCは「かなり完成に近い」と評価され、以下2点のみの微調整。
   (1) 左右の間隔を統一——`容量違い`側（`gap_single`のみ）が`派生モデル`側（`gap_stub`+`gap_spine`）
       より広すぎたため、両者を同じ合計値へそろえた（SP: 36px、PC: 50px）。
   (2) SPでClassicだけ「詳しく見る →」が切れる不具合を修正——ClassicとPlusは同じ固定高さだが、
       Classicの製品名テキストがPlusより多い行数で折り返され、必要高さが上回っていた。`card_h`を
       さらに拡張（SP200px→220px、2行の製品名を安全に見込む）し、`.rg-node-body`の下padding
       （7px→10px）でCTA下の余白も確実に確保した。PCの`card_h`（232px）は不変。
   ============================================================================================ */

.potaden-product-detail__relations {
	margin-top: 24px;
}

.potaden-product-detail__relations-title {
	margin-bottom: 14px;
}

.potaden-product-detail__rg-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.potaden-product-detail__rg-scroll:focus-visible {
	outline: 2px solid var(--potaden-accent);
	outline-offset: 2px;
}

/* Ver.0.10.42: PC/SPは同じデータから別々の固定寸法図を1回ずつ描画し、表示はCSSで排他的に切り替える
   （767pxを境に既存の他セクションと統一）。 */
.potaden-product-detail__rg-scroll--sp {
	display: none;
}

.potaden-product-detail__rg-diagram {
	position: relative;
}

.potaden-product-detail__rg-diagram svg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.potaden-product-detail__rg-line {
	stroke: #8a929b;
	stroke-width: 1.6;
}

.potaden-product-detail__rg-arrowhead {
	fill: #6b7480;
}

.potaden-product-detail__rg-node {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #e1e5e9;
	border-radius: 7px;
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.potaden-product-detail__rg-node--current {
	border: 2px solid var(--potaden-accent);
	background: #eaf3ff;
}

.potaden-product-detail__rg-node--note-only {
	align-items: center;
	justify-content: center;
	background: #fafbfc;
	text-align: center;
}

.potaden-product-detail__rg-node-photo {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #edf0f2;
	background: #f2f4f6;
}

/* Ver.0.10.42: photo height must match get_relation_diagram_metrics()'s `photo_h` per breakpoint
   (PC 84px / SP 50px) — the card's total height (set inline per node from the same metrics) has
   no room to spare for a mismatched photo box. */
.potaden-product-detail__rg-diagram--pc .potaden-product-detail__rg-node-photo {
	height: 84px;
}

.potaden-product-detail__rg-diagram--sp .potaden-product-detail__rg-node-photo {
	height: 50px;
}

.potaden-product-detail__rg-node-photo-img {
	display: block;
	max-width: 82%;
	max-height: 82%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.potaden-product-detail__rg-node-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-height: 0;
	padding: 6px 8px 8px; /* Ver.0.11.10: relation specs now follow the status naturally; retain a compact bottom cushion for long-name cards and their CTA. */
}

.potaden-product-detail__rg-node-body--note-only {
	align-items: center;
	justify-content: center;
	padding: 8px;
}

.potaden-product-detail__rg-node-note-name {
	color: #3d4550;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.4;
}

/* Ver.0.10.47: was a `position:absolute` overlay pinned to the card's top-left corner
   (Ver.0.10.42–46) — on real screens this sat on top of the product photo, not beside it. Now a
   normal row in the card's own flex flow, above the photo (see render_relation_node()), sized by
   an inline `height` matching `get_relation_diagram_metrics()`'s `current_badge_h` — the current
   node's card is the only one with the extra height budget for this row
   (compute_relation_layout()). */
.potaden-product-detail__rg-node-current-badge {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--potaden-accent);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.potaden-product-detail__rg-node-name {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.28;
}

.potaden-product-detail__rg-node-date {
	color: var(--potaden-muted);
	font-size: 9.5px;
}

.potaden-product-detail__rg-node-status {
	align-self: flex-start;
	margin-top: 1px;
}

.potaden-product-detail__rg-node-status .potaden-products__status {
	padding: 1px 6px;
	font-size: 9.5px;
}

.potaden-product-detail__rg-node-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 8px;
	margin-top: 2px;
	padding-top: 4px;
	border-top: 1px dashed #edf0f2;
}

.potaden-product-detail__rg-node-specs-label {
	display: block;
	color: var(--potaden-muted);
	font-size: 9.5px;
	line-height: 1.2;
}

.potaden-product-detail__rg-node-specs b {
	display: block;
	color: #222;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
}

/* Ver.0.10.47: restored (was explicitly removed in Ver.0.10.42, per an instruction later confirmed
   to be a mistake — a relation-graph reader needs the reference price for a purchase decision as
   much as capacity/output). Deliberately smaller/quieter than the capacity/output row — this is
   supplementary information, not the card's headline. Omitted entirely by the caller when
   `reference_price` isn't registered (see render_relation_node()), not shown as a "—" placeholder. */
.potaden-product-detail__rg-node-price {
	color: #4a5560;
	font-size: 9.5px;
	line-height: 1.3;
}

.potaden-product-detail__rg-node-price-label {
	color: var(--potaden-muted);
}

/* Ver.0.10.47: was plain text + arrow (Ver.0.10.43–46) — real-screen feedback was that it was hard
   to spot as a tappable link amid the rest of the card's body text. Now a small bordered chip
   (never as large/prominent as the purchase-CTA buttons elsewhere on the page). Not the current
   node ("このページの機種" badge instead) and not a note-only card (no independent post to link
   to). */
.potaden-product-detail__rg-node-more-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78%;
	min-height: 28px;
	margin: 4px auto 0;
	border: 1px solid #b9cddd;
	border-radius: 5px;
	background: #fff;
	color: #1f5f9e;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.potaden-product-detail__rg-node-more-link:hover {
	background: #eef5fb;
	border-color: #9db9cf;
}

/* Ver.0.10.48: real-screen feedback was this chip (and the price row above it) still clipped past
   the SP card's bottom edge even after `card_h` grew — tightened the chip's own vertical footprint
   a little further as the "minimum necessary" adjustment the instruction allowed, on top of the
   `card_h` increase (get_relation_diagram_metrics()) doing most of the work. */
.potaden-product-detail__rg-diagram--sp .potaden-product-detail__rg-node-more-link {
	min-height: 26px;
	margin-top: 3px;
}

/* Ver.0.10.42: 関係タイプ（例：派生モデル）は必ず接続線の直近に表示。
   Ver.0.10.47：水平位置をspine（線のチャンネル）からカード自身の水平中心へ、垂直位置を線の中点
   （＝カードの垂直中央、結局カード自体に重なっていた）からカードの上端／下端の外側へ移動した。
   Ver.0.10.48：実画面確認の結果、「カードの説明」に見えてしまい「線の意味」として読みにくいという
   指摘を受け、方針を転換した——relation typeは「カードの近く」ではなく「接続線そのもの」を表す
   ラベルとして、線の上（中点）に載せる方式へ戻した。今回は縦書き（`writing-mode:vertical-rl`）に
   することで、タグの横幅が数文字ぶんの狭い幅（高さ方向ではなく）になり、カード間の隙間
   （`gap_single`／`gap_stub`+`gap_spine`）に収まりカードへ重ならない（place_relation_side()の
   docblock参照）。線の色を隠す不透明な背景で「線が途切れてタグが載っている」ように見せる。
   relation note（吹き出し）とは役割・配色を明確に分け、CTAのような強い色は使わない。分岐で全ての
   枝のrelation typeが同じ場合は、各枝の幹（spineとcurrentをつなぐ共有線）に1個だけ表示する
   （`place_relation_side()`のラベル共有ロジック）。 */
.potaden-product-detail__rg-edge-label {
	position: absolute;
	box-sizing: border-box;
	writing-mode: vertical-rl;
	text-orientation: upright;
	transform: translate(-50%, -50%);
	padding: 3px 2px;
	border: 1px solid #9fb4c3;
	border-radius: 4px;
	background: #e4edf3;
	color: #3d4550;
	font-size: 10px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.potaden-product-detail__rg-diagram--sp .potaden-product-detail__rg-edge-label {
	padding: 2px 1px;
	font-size: 9px;
}

/* Ver.0.10.42: 変化コメント（_potaden_relation_n_note）は関係タイプとは役割分離して表示する。
   Ver.0.10.45：独立した「吹き出し」型の注釈ボックス（背景・枠・弱い角丸・三角ポインタ）へ変更。
   `text-overflow:ellipsis`／`-webkit-line-clamp`は使わず、自然改行で最後まで読める（横幅はPHP側の
   固定値`note_w`を使い、カード幅に比例して図全体を広げない。render_relation_diagram()参照）。
   Ver.0.10.46：カード直下への機械的配置をやめ、relationの向きに応じた上下配置へ変更したが、実画面
   確認の結果SPの縦方向が伸びるという不合格が出た。
   Ver.0.10.47：配置方向を「カードの上下」から「ダイアグラム全体の外側・横」へ完全に変更した——
   in側の吹き出しはダイアグラム全体の左外側、out側は右外側（render_relation_diagram()）。縦方向は
   カードの垂直中心に`transform:translateY(-50%)`で揃えるだけなので、noteが原因でSPの縦の高さが
   伸びることがなくなった。横幅も承認済みレンジへ再調整（SP約140px・PC約180px）。
   配色は、相関図の白いカード・淡いグレー背景とほぼ同系色だった旧配色（背景`#f7f8fa`）が「どこまでが
   コメントか分かりにくい」という指摘を受け、ごく薄い青系（背景`#eef5fb`・枠`#b9cddd`）へ変更した。
   CTAやボタンに見えるほど強い色（濃い青・黄・橙）は使わない。 */
.potaden-product-detail__rg-edge-note {
	position: absolute;
	box-sizing: border-box;
	transform: translateY(-50%);
	color: #33424f;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
}

.potaden-product-detail__rg-edge-note--bubble {
	padding: 5px 8px 6px;
	border: 1px solid #b9cddd;
	border-radius: 6px;
	background: #eef5fb;
	box-shadow: 0 1px 2px rgba(20, 30, 40, 0.04);
}

/* Speech-bubble pointer: two stacked CSS triangles (border-colored one behind, background-colored
   one 1px in front) so the tail reads as an extension of the box's own border, not a separate
   shape. Ver.0.10.47: the bubble now sits *beside* its card (not above/below it), so the pointer
   points sideways — `--pointer-right` (an `in`-side note, hanging off the diagram's left edge,
   whose card is to its right) and `--pointer-left` (an `out`-side note, hanging off the right
   edge, whose card is to its left) — vertically centered on the bubble's own height via `top:50%`,
   which stays correct regardless of how many lines the note text wraps to. */
.potaden-product-detail__rg-edge-note--bubble::before,
.potaden-product-detail__rg-edge-note--bubble::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.potaden-product-detail__rg-edge-note--pointer-right::before {
	right: -7px;
	border-left: 7px solid #b9cddd;
}

.potaden-product-detail__rg-edge-note--pointer-right::after {
	right: -6px;
	border-left: 6px solid #eef5fb;
}

.potaden-product-detail__rg-edge-note--pointer-left::before {
	left: -7px;
	border-right: 7px solid #b9cddd;
}

.potaden-product-detail__rg-edge-note--pointer-left::after {
	left: -6px;
	border-right: 6px solid #eef5fb;
}

@media (max-width: 767px) {
	.potaden-product-detail__rg-scroll--pc {
		display: none;
	}

	.potaden-product-detail__rg-scroll--sp {
		display: block;
	}
}