/* ============================================================
   stock.css — Stock CPT archive (archive-stock.php) page styles

   静的プロトタイプ /stock.html の inline <style> から stock-* セレクタを
   移植。footer / drawer / header の共通 PC overrides は base.css /
   header.css / footer.css 側で扱われているため、ここには含めない。

   依存: tokens.css → base.css → header.css → footer.css → stock.css

   フィルター UI:
     静的版は <button data-filter="..."> + JS だったが、WP では
     <a class="filter-btn" href="?brand=..."> の URL ベース GET に変更。
     CSS は両セレクタに対応して書く（将来再利用しやすいよう）。

   メモ: 「All 表示はブランド別グルーピング」方針 (project_volto_stock_listing)
   に従い、All 時のみ .brand-group-heading を出す。
   ============================================================ */

/* ===== Page-level body rhythm (matches static stock.html) ===== */
body{
	line-height: 1.7;
	letter-spacing: 0.02em;
}

/* ===== HERO ===== */
.stock-hero{
	position: relative;
	width: 100%;
	min-height: 56vh;
	min-height: 56svh;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 110px 26px 36px;
	color: var(--paper);
}
.stock-hero picture{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
	z-index: 0;
}
.stock-hero img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	z-index: 0;
}
.stock-hero h1{
	position: relative;
	z-index: 2;
	margin: 0;
	font-family: var(--jp);
	font-weight: 200;
	font-size: clamp(40px, 11vw, 56px);
	letter-spacing: 0.06em;
	line-height: 1;
	color: var(--paper);
	text-shadow: 0 1px 16px rgba(0,0,0,0.28);
}

/* ===== Test Ride Notice ===== */
.ride-notice{
	padding: 44px 26px 22px;
	text-align: center;
}
.ride-notice .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.40em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 14px;
}
.ride-notice .lead{
	display: block;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.10em;
	line-height: 1.85;
	color: rgba(10,10,10,0.7);
	margin: 0 auto 22px;
}
.ride-notice .picker{
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	border-top: 1px solid rgba(10,10,10,0.18);
	border-bottom: 1px solid rgba(10,10,10,0.18);
}
.ride-notice .picker a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 26px;
	font-family: var(--en);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.24em;
	color: var(--ink);
	transition: background .25s ease, color .25s ease;
}
.ride-notice .picker a + a{
	border-left: 1px solid rgba(10,10,10,0.18);
}
.ride-notice .picker a:hover{
	background: var(--ink);
	color: var(--paper);
}
.ride-notice .picker .arrow{ font-weight: 300; }

/* ===== FILTERS (text-only) =====
   静的: <button data-filter>  / WP: <a class="filter-btn" href="?brand=">
   両方を同じスタイルで扱う */
.filters{
	padding: 30px 22px 6px;
	border-bottom: 1px solid var(--line-on-light);
}
.filters .row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	flex-wrap: nowrap;
	overflow: hidden;
	padding-bottom: 8px;
}
.filters button,
.filters .filter-btn{
	flex: 0 1 auto;
	min-width: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: 0.10em;
	color: rgba(10,10,10,0.45);
	padding: 12px 4px;
	border-bottom: 1px solid transparent;
	transition: color .25s ease, border-color .25s ease;
	white-space: nowrap;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
.filters button.is-active,
.filters .filter-btn.is-active{
	color: var(--ink);
	border-bottom-color: var(--ink);
}
.filters .meta{
	margin-top: 4px;
	display: flex; align-items: baseline; justify-content: flex-start;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	color: var(--dim-on-light);
	padding-bottom: 14px;
}

/* ===== GRID ===== */
.stock-grid{
	padding: 32px 18px 54px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 12px;
}

/* Brand group heading (All 表示時のみ出る) */
.brand-group-heading{
	grid-column: 1 / -1;
	margin: 24px 0 4px;
	font-family: var(--en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-on-light);
}
.brand-group-heading:first-of-type{ margin-top: 0; }

/* Card */
.card{
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ink);
}
.card .thumb{
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	background: var(--paper-soft);
	overflow: hidden;
	border-radius: 1px;
}
.card .thumb img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.4s ease;
}
.card:hover .thumb img{ transform: scale(1.03); }
.card .brand-tag{
	font-family: var(--en);
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.22em;
	color: var(--dim-on-light);
	text-transform: uppercase;
	margin-top: 2px;
}
.card .name{
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
}
.card .price{
	font-family: var(--en);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: rgba(10,10,10,0.65);
}
.card .view{
	margin-top: 4px;
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--en);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.22em;
	color: rgba(10,10,10,0.55);
	transition: color .25s ease, gap .25s ease;
}
.card:hover .view{ color: var(--ink); gap: 12px; }
.card .view .arrow{ font-weight: 300; }

/* card hidden state (for future JS filter) */
.card[hidden]{ display: none; }

/* empty state */
.empty{
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px 40px;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--dim-on-light);
}

/* ===== Bottom CTA ===== */
.stock-foot{
	padding: 70px 26px 90px;
	text-align: center;
}
.stock-foot .cta{
	display: inline-flex; align-items: center; gap: 14px;
	padding: 16px 26px;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.20em;
	transition: background .3s ease, color .3s ease;
}
.stock-foot .cta:hover{ background: var(--ink); color: var(--paper); }
.stock-foot .cta .arrow{ font-family: var(--en); font-weight: 300; }

/* ===== Sold Archive link ===== */
.sold-link{
	padding: 40px 26px 60px;
	text-align: center;
	border-top: 1px solid var(--line-on-light);
	margin: 0 26px;
}
.sold-link .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 8px;
}
.sold-link .jp{
	display: block;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: rgba(10,10,10,0.6);
	margin-bottom: 18px;
}
.sold-link a{
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--en);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.24em;
	color: var(--ink);
	border-bottom: 1px solid rgba(10,10,10,0.25);
	padding-bottom: 4px;
	transition: gap .25s ease, border-color .25s ease;
}
.sold-link a:hover{
	gap: 14px;
	border-bottom-color: var(--ink);
}
.sold-link a .arrow{ font-weight: 300; }

/* ===== Reveal (scroll-in) ===== */
.reveal{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .9s ease, transform .9s ease;
}
.reveal.is-visible{
	opacity: 1;
	transform: none;
}

/* ============================================================
   @media (min-width: 540px) — small tablet
   ============================================================ */
@media (min-width: 540px){
	.stock-grid{ gap: 32px 16px; padding: 42px 22px 64px; }
	.card .name{ font-size: 15px; }
}

/* ============================================================
   @media (min-width: 768px) — PC
   --pc-gutter は静的 stock.html では clamp(40px, 5vw, 72px) で
   front-page (clamp 64-96) より狭め。Stock のグリッド密度を稼ぐため。
   ============================================================ */
@media (min-width: 768px){

	:root{
		--pc-stock-gutter: clamp(40px, 5vw, 72px);
	}

	body{
		font-size: 16px;
		line-height: 1.85;
		letter-spacing: 0.03em;
	}

	/* Hero */
	.stock-hero{
		min-height: 48vh;
		padding: 0 var(--pc-stock-gutter) 8vh;
		align-items: flex-end;
		justify-content: flex-start;
	}
	.stock-hero h1{
		font-size: clamp(56px, 6.5vw, 88px);
		letter-spacing: 0.10em;
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}

	/* Test Ride Notice */
	.ride-notice{
		max-width: 1200px;
		margin: 0 auto;
		padding: 72px var(--pc-stock-gutter) 28px;
	}
	.ride-notice .en{
		font-size: 14px;
		letter-spacing: 0.42em;
		margin-bottom: 18px;
	}
	.ride-notice .lead{
		font-size: 14.5px;
		letter-spacing: 0.10em;
		line-height: 2;
		margin-bottom: 30px;
	}
	.ride-notice .picker a{
		font-size: 14px;
		letter-spacing: 0.28em;
		padding: 20px 44px;
	}

	/* Filters */
	.filters{
		padding: 60px var(--pc-stock-gutter) 0;
		border-bottom: none;
	}
	.filters .row,
	.filters .meta{
		max-width: 1200px;
		margin: 0 auto;
	}
	.filters .row{
		gap: 36px;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--line-on-light);
	}
	.filters button,
	.filters .filter-btn{
		font-size: 13px;
		letter-spacing: 0.18em;
		padding: 6px 2px;
	}
	.filters .meta{
		margin-top: 18px;
		font-size: 11.5px;
		letter-spacing: 0.22em;
		padding-bottom: 0;
	}

	/* Grid: 3 columns at 768+ */
	.stock-grid{
		max-width: 1200px;
		margin: 0 auto;
		padding: 60px var(--pc-stock-gutter) 80px;
		grid-template-columns: repeat(3, 1fr);
		gap: 64px 28px;
	}
	.brand-group-heading{
		font-size: 13px;
		letter-spacing: 0.36em;
		margin: 32px 0 8px;
		padding-bottom: 14px;
	}
	.card{ gap: 16px; }
	.card .name{
		font-size: 16px;
		letter-spacing: 0.08em;
		line-height: 1.7;
	}
	.card .brand-tag{
		font-size: 10.5px;
		letter-spacing: 0.26em;
	}
	.card .price{
		font-size: 13.5px;
		letter-spacing: 0.05em;
	}
	.card .view{
		font-size: 11.5px;
		letter-spacing: 0.26em;
	}

	/* Bottom CTA */
	.stock-foot{
		padding: 80px var(--pc-stock-gutter) 80px;
	}
	.stock-foot .cta{
		font-size: 14.5px;
		letter-spacing: 0.24em;
		padding: 18px 36px;
	}

	/* Sold Archive link */
	.sold-link{
		max-width: 1200px;
		margin: 0 auto;
		padding: 60px var(--pc-stock-gutter) 80px;
	}
	.sold-link .en{ font-size: 12px; letter-spacing: 0.34em; }
	.sold-link .jp{ font-size: 14px; letter-spacing: 0.18em; }
	.sold-link a{ font-size: 13px; letter-spacing: 0.28em; }
}

/* ============================================================
   @media (min-width: 1280px) — wide PC: 4 columns
   ============================================================ */
@media (min-width: 1280px){
	.stock-grid{
		grid-template-columns: repeat(4, 1fr);
		gap: 64px 28px;
	}
}

/* ============================================================
   ===== Single Stock Detail (Phase B / 29-section editorial) =====
   静的プロトタイプ /stock-detail.html の inline <style> から
   詳細ページ用セレクタを移植。

   構成:
     .title-block / .eyecatch / .intro / .spec-top / .big-photo /
     .quiet-cta / .h2 / .h3 / .h4 / .body-text / .grid-2 /
     .visit-invite / .detail-images / .price-block /
     .sales-method / .contact-bar / .values / .notice /
     .owner-msg / .back-link

   依存: tokens.css → base.css → header.css → footer.css → stock.css
   ============================================================ */

/* ---------- Title block ---------- */
.title-block{
	padding: 96px 26px 28px;
	text-align: left;
	border-bottom: 1px solid var(--line-on-light);
}
.title-block .tag{
	display: inline-block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0.40em;
	text-transform: uppercase;
	color: var(--ink);
	border: 1px solid var(--ink);
	padding: 5px 11px 4px;
	margin-bottom: 22px;
}
.title-block .brand-en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 12px;
}
.title-block h1{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(22px, 6vw, 28px);
	letter-spacing: 0.10em;
	line-height: 1.55;
	color: var(--ink);
}
.title-block .meta{
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.20em;
	color: var(--dim-on-light);
}

/* ---------- Eyecatch ---------- */
.eyecatch{
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--paper-soft);
	overflow: hidden;
	margin: 0;
}
.eyecatch img{
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Intro lead ---------- */
.intro{
	padding: 44px 26px 0;
}
.intro p{
	margin: 0 0 1.2em;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14.5px;
	letter-spacing: 0.06em;
	line-height: 2.05;
	color: rgba(10,10,10,0.78);
}
.intro .model-line{
	display: block;
	margin: 8px 0 0;
	font-family: var(--jp);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.10em;
	color: var(--ink);
}

/* ---------- Spec table (top, dense, definition list) ---------- */
.spec-top{
	margin: 36px 26px 0;
	border-top: 1px solid var(--line-on-light);
}
.spec-top dl{
	margin: 0;
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 0;
}
.spec-top dt, .spec-top dd{
	padding: 16px 0;
	border-bottom: 1px solid var(--line-on-light);
	margin: 0;
}
.spec-top dt{
	font-family: var(--en);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	padding-top: 20px;
}
.spec-top dd{
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.06em;
	color: var(--ink);
	padding-left: 14px;
}

/* ---------- Big photo (between sections) ---------- */
.big-photo{
	margin: 56px 0 0;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--paper-soft);
	overflow: hidden;
}
.big-photo img{
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.big-photo .cap{
	display: block;
	margin: 10px 26px 0;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.20em;
	color: var(--dim-on-light);
}

/* ---------- Inline LINE / Visit CTA ---------- */
.quiet-cta{
	margin: 36px 26px 0;
	padding: 22px 0;
	text-align: center;
	border-top: 1px solid var(--line-on-light);
	border-bottom: 1px solid var(--line-on-light);
}
.quiet-cta .lbl{
	display: block;
	font-family: var(--en);
	font-size: 10.5px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 10px;
}
.quiet-cta a{
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--jp); font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.18em;
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 4px;
	transition: gap .25s ease;
}
.quiet-cta a:hover{ gap: 16px; }

/* ---------- Section headings (.h2 / .h3 / .h4) ---------- */
.h2{
	padding: 80px 26px 18px;
}
.h2 .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0.40em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 14px;
}
.h2 .jp{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: clamp(20px, 5.4vw, 24px);
	letter-spacing: 0.12em;
	line-height: 1.6;
	color: var(--ink);
}

.h3{
	padding: 64px 26px 14px;
}
.h3 .en{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 10px;
}
.h3 .jp{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 19px;
	letter-spacing: 0.14em;
	color: var(--ink);
}

.h4{
	padding: 42px 26px 14px;
	font-family: var(--jp);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0.10em;
	color: var(--ink);
	margin: 0;
	line-height: 1.7;
}

/* ---------- Body text ---------- */
.body-text{
	padding: 0 26px;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14.5px;
	letter-spacing: 0.06em;
	line-height: 2.1;
	color: rgba(10,10,10,0.8);
}
.body-text p{ margin: 0 0 1.4em; }
.body-text p:last-child{ margin-bottom: 0; }
.body-text ul{
	margin: 0; padding: 0; list-style: none;
}
.body-text ul li{
	position: relative;
	padding: 10px 0 10px 22px;
	border-bottom: 1px solid var(--line-on-light);
}
.body-text ul li:last-child{ border-bottom: 0; }
.body-text ul li::before{
	content: "";
	position: absolute;
	left: 0; top: 24px;
	width: 8px; height: 1px;
	background: rgba(10,10,10,0.4);
}

/* ---------- 2x2 photo grid (外観) ---------- */
.grid-2{
	margin: 28px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}
.grid-2 img{
	width: 100%; height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	background: var(--paper-soft);
}

/* ---------- Visit invite block ---------- */
.visit-invite{
	margin-top: 28px;
	padding: 0 26px;
}
.visit-invite p{
	margin: 22px 0 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 2;
	color: rgba(10,10,10,0.78);
}

/* ---------- Detail images link ---------- */
.detail-images{
	margin: 56px 26px 0;
	padding: 28px 0;
	text-align: center;
	border-top: 1px solid var(--line-on-light);
	border-bottom: 1px solid var(--line-on-light);
}
.detail-images .en{
	display: block;
	font-family: var(--en);
	font-size: 10.5px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 10px;
}
.detail-images a{
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--jp); font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.18em;
	color: var(--ink);
	border-bottom: 1px solid rgba(10,10,10,0.25);
	padding-bottom: 4px;
	transition: gap .25s ease, border-color .25s ease;
}
.detail-images a:hover{ gap: 16px; border-bottom-color: var(--ink); }

/* ---------- Price table ---------- */
.price-block{
	margin: 64px 26px 0;
	padding: 36px 0 32px;
	border-top: 1px solid var(--line-on-light);
	border-bottom: 1px solid var(--line-on-light);
}
.price-block .ttl{
	font-family: var(--jp);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.14em;
	color: var(--ink);
	margin: 0 0 22px;
}
.price-block table{
	width: 100%;
	border-collapse: collapse;
	font-family: var(--jp);
}
.price-block th, .price-block td{
	text-align: left;
	padding: 14px 0;
	border-bottom: 1px dashed var(--line-on-light);
	font-weight: 300;
	font-size: 13.5px;
	letter-spacing: 0.06em;
	color: rgba(10,10,10,0.78);
}
.price-block th{
	font-family: var(--en);
	font-weight: 400;
	font-size: 10.5px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	width: 50%;
}
.price-block td{
	text-align: right;
	font-family: var(--en);
	font-weight: 400;
	color: var(--ink);
}
.price-block tr.total th,
.price-block tr.total td{
	border-bottom: 0;
	padding-top: 22px;
	font-size: 13px;
	letter-spacing: 0.22em;
}
.price-block tr.total th{ color: var(--ink); }
.price-block tr.total td{
	font-size: 22px;
	letter-spacing: 0.02em;
}
.price-block .note{
	margin-top: 18px;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1.9;
	color: var(--dim-on-light);
}

/* ---------- Sales method comparison ---------- */
.sales-method{
	margin: 36px 26px 0;
}
.sales-method .compare{
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 8px;
}
.sales-method .col{
	border: 1px solid var(--line-on-light);
	padding: 22px 22px 26px;
	background: var(--paper);
}
.sales-method .col.featured{
	background: var(--paper-soft);
}
.sales-method .col .en{
	display: block;
	font-family: var(--en);
	font-size: 10.5px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 8px;
}
.sales-method .col .jp{
	font-family: var(--jp);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0.10em;
	color: var(--ink);
	margin: 0 0 14px;
}
.sales-method .col p{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 2;
	color: rgba(10,10,10,0.78);
}

/* ---------- Contact bar ---------- */
.contact-bar{
	margin: 56px 26px 0;
	padding: 32px 0;
	text-align: center;
	border-top: 1px solid var(--line-on-light);
	border-bottom: 1px solid var(--line-on-light);
}
.contact-bar .en{
	display: block;
	font-family: var(--en);
	font-size: 10.5px;
	letter-spacing: 0.40em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 14px;
}
.contact-bar .tel{
	display: block;
	font-family: var(--en);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0.06em;
	color: var(--ink);
	margin-bottom: 6px;
}
.contact-bar .hours{
	display: block;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: 0.10em;
	color: var(--dim-on-light);
	margin-bottom: 22px;
}
.contact-bar .row{
	display: flex; flex-direction: column; gap: 10px;
}
.contact-bar .row a{
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	padding: 15px 22px;
	font-family: var(--jp); font-weight: 300;
	font-size: 13.5px;
	letter-spacing: 0.20em;
	border: 1px solid var(--ink);
	color: var(--ink);
	transition: background .3s ease, color .3s ease;
}
.contact-bar .row a.primary{ background: var(--ink); color: var(--paper); }
.contact-bar .row a:hover{ background: var(--ink); color: var(--paper); }
.contact-bar .row a.primary:hover{ background: transparent; color: var(--ink); }

/* ---------- Values cluster ---------- */
.values{
	margin: 0 26px;
	padding: 0;
}
.values .links{
	margin: 16px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--line-on-light);
	border: 1px solid var(--line-on-light);
}
.values .links a{
	background: var(--paper);
	padding: 22px 18px;
	display: block;
	transition: background .25s ease;
}
.values .links a:hover{ background: var(--paper-soft); }
.values .links .en{
	display: block;
	font-family: var(--en);
	font-size: 10px;
	letter-spacing: 0.30em;
	text-transform: uppercase;
	color: var(--dim-on-light);
	margin-bottom: 6px;
}
.values .links .jp{
	display: block;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.10em;
	color: var(--ink);
}

/* ---------- Notice (注意事項) ---------- */
.notice{
	margin: 0 26px;
}
.notice .item{
	border-top: 1px solid var(--line-on-light);
	padding: 26px 0 18px;
}
.notice .item:last-child{ border-bottom: 1px solid var(--line-on-light); }
.notice .item .ttl{
	font-family: var(--jp);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.12em;
	color: var(--ink);
	margin: 0 0 10px;
}
.notice .item p{
	margin: 0;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 2;
	color: rgba(10,10,10,0.74);
}

/* ---------- Owner message ---------- */
.owner-msg{
	margin: 0 26px;
	padding: 36px 0 0;
}
.owner-msg p{
	margin: 0 0 1.3em;
	font-family: var(--jp);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: 0.08em;
	line-height: 2.1;
	color: rgba(10,10,10,0.78);
}
.owner-msg .sign{
	margin-top: 8px;
	font-family: var(--en);
	font-size: 11px;
	letter-spacing: 0.30em;
	text-transform: uppercase;
	color: var(--dim-on-light);
}

/* ---------- Back to Stock ---------- */
.back-link{
	padding: 64px 26px 80px;
	text-align: center;
}
.back-link a{
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--en);
	font-size: 11.5px;
	letter-spacing: 0.28em;
	color: var(--ink);
	border-bottom: 1px solid rgba(10,10,10,0.25);
	padding-bottom: 4px;
	transition: gap .25s ease;
}
.back-link a:hover{ gap: 16px; }

/* ============================================================
   ===== DESKTOP (>=768px) — single editorial column =====
   ============================================================ */
@media (min-width: 768px){

	:root{
		--pc-detail-max: 880px;
		--pc-detail-wide: 1200px;
		--pc-detail-gutter: clamp(40px, 5vw, 72px);
	}

	/* Title block */
	.title-block{
		max-width: var(--pc-detail-max);
		margin: 0 auto;
		padding: 132px var(--pc-detail-gutter) 40px;
	}
	.title-block .tag{
		font-size: 11.5px; letter-spacing: 0.44em;
		padding: 6px 13px 5px;
		margin-bottom: 28px;
	}
	.title-block .brand-en{ font-size: 13px; letter-spacing: 0.42em; }
	.title-block h1{
		font-size: clamp(30px, 3.4vw, 38px);
		letter-spacing: 0.12em;
		line-height: 1.55;
	}
	.title-block .meta{ font-size: 11.5px; letter-spacing: 0.24em; margin-top: 22px; }

	/* Eyecatch */
	.eyecatch{
		max-width: var(--pc-detail-wide);
		margin: 0 auto;
		aspect-ratio: 16 / 9;
	}

	/* Reading column */
	.intro,
	.spec-top,
	.quiet-cta,
	.h2,
	.h3,
	.h4,
	.body-text,
	.visit-invite,
	.detail-images,
	.price-block,
	.sales-method,
	.contact-bar,
	.values,
	.notice,
	.owner-msg,
	.back-link{
		max-width: var(--pc-detail-max);
		margin-left: auto;
		margin-right: auto;
	}

	.intro{ padding: 64px var(--pc-detail-gutter) 0; }
	.intro p{ font-size: 15.5px; line-height: 2.2; }
	.intro .model-line{ font-size: 18px; letter-spacing: 0.12em; }

	.spec-top{ margin-top: 48px; padding: 0 var(--pc-detail-gutter); border-top: 0; }
	.spec-top dl{ grid-template-columns: 200px 1fr; border-top: 1px solid var(--line-on-light); }
	.spec-top dt{ font-size: 11.5px; letter-spacing: 0.32em; padding: 24px 0; }
	.spec-top dd{ font-size: 15px; padding: 24px 0 24px 18px; }

	/* Big photo full-bleed */
	.big-photo{
		max-width: var(--pc-detail-wide);
		margin: 88px auto 0;
		aspect-ratio: 16 / 9;
	}
	.big-photo .cap{ margin-left: var(--pc-detail-gutter); margin-right: var(--pc-detail-gutter); }

	.quiet-cta{
		margin-top: 56px;
		padding: 28px var(--pc-detail-gutter);
	}
	.quiet-cta a{ font-size: 14.5px; letter-spacing: 0.22em; }

	.h2{ padding: 120px var(--pc-detail-gutter) 22px; }
	.h2 .en{ font-size: 12px; letter-spacing: 0.44em; }
	.h2 .jp{ font-size: clamp(26px, 2.6vw, 32px); letter-spacing: 0.16em; line-height: 1.6; }

	.h3{ padding: 96px var(--pc-detail-gutter) 18px; }
	.h3 .en{ font-size: 11.5px; letter-spacing: 0.40em; }
	.h3 .jp{ font-size: 22px; letter-spacing: 0.18em; }

	.h4{ padding: 56px var(--pc-detail-gutter) 16px; font-size: 17px; letter-spacing: 0.14em; }

	.body-text{ padding: 0 var(--pc-detail-gutter); font-size: 15.5px; line-height: 2.25; }

	.grid-2{ margin: 36px auto 0; max-width: var(--pc-detail-wide); gap: 6px; }

	.visit-invite{ padding: 0 var(--pc-detail-gutter); }
	.visit-invite p{ font-size: 15px; line-height: 2.2; margin-top: 30px; }

	.detail-images{
		margin-top: 80px; padding: 36px var(--pc-detail-gutter);
	}

	.price-block{
		margin-top: 96px; padding: 48px var(--pc-detail-gutter);
	}
	.price-block .ttl{ font-size: 15.5px; letter-spacing: 0.18em; margin-bottom: 28px; }
	.price-block th{ font-size: 11.5px; letter-spacing: 0.28em; }
	.price-block td{ font-size: 15px; }
	.price-block tr.total th{ font-size: 14px; letter-spacing: 0.24em; }
	.price-block tr.total td{ font-size: 28px; }

	.sales-method{ margin-top: 48px; padding: 0 var(--pc-detail-gutter); }
	.sales-method .compare{ grid-template-columns: 1fr 1fr; gap: 24px; }
	.sales-method .col{ padding: 32px 32px 36px; }
	.sales-method .col .jp{ font-size: 17px; letter-spacing: 0.14em; }
	.sales-method .col p{ font-size: 14px; line-height: 2.1; }

	.contact-bar{ margin-top: 80px; padding: 48px var(--pc-detail-gutter); }
	.contact-bar .tel{ font-size: 32px; }
	.contact-bar .row{ flex-direction: row; justify-content: center; gap: 14px; }
	.contact-bar .row a{ min-width: 240px; padding: 18px 32px; font-size: 14.5px; }

	.values{ padding: 0 var(--pc-detail-gutter); }
	.values .links{ grid-template-columns: 1fr 1fr 1fr 1fr; }
	.values .links a{ padding: 28px 22px; }
	.values .links .jp{ font-size: 14px; letter-spacing: 0.12em; }

	.notice{ padding: 0 var(--pc-detail-gutter); }
	.notice .item .ttl{ font-size: 15.5px; letter-spacing: 0.16em; }
	.notice .item p{ font-size: 14px; line-height: 2.1; }

	.owner-msg{ padding: 56px var(--pc-detail-gutter) 0; }
	.owner-msg p{ font-size: 15px; line-height: 2.25; }

	.back-link{ padding: 96px var(--pc-detail-gutter) 120px; }
}