@charset "UTF-8";
/*
 * あとづけ屋 ショーケース v0.1.0 (DRAFT)
 * 見た目の正本: shop/design_options/OptionB3.dc.html（案B-3）
 *
 * すべて .azs 配下にスコープする。WooCommerce の .summary.entry-summary には一切かからない。
 * リストは ul / ol を使わない（子テーマの `ul, ol { margin:0 !important }` を避けるため）。
 */

.azs {
	--azs-accent: #C9A96E;
	--azs-accent-ink: #8C6A2B;
	--azs-accent-ink-hover: #6E521F;
	--azs-paper: #FAF8F4;
	--azs-paper-tint: #F4F0E8;
	--azs-ink: #14110E;
	--azs-ink-soft: #57534E;
	--azs-ink-mute: #6B6154;
	--azs-line: #E3DED2;
	--azs-reverse: #F7F3EC;
	--azs-pad: 56px;
	--azs-serif: "Yu Mincho", "Hiragino Mincho ProN", serif;
	--azs-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	max-width: 1100px;
	margin: 48px auto;
	background: var(--azs-paper);
	color: var(--azs-ink);
	line-height: 1.95;
	font-family: system-ui, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", sans-serif;
	font-size: 15px;
	text-align: left;
}

.azs *,
.azs *::before,
.azs *::after { box-sizing: border-box; }

.azs p { margin: 0; }
.azs h2 { margin: 0; }
.azs img { max-width: 100%; height: auto; display: block; }

.azs a { color: var(--azs-accent-ink); text-decoration: none; }
.azs a:hover { color: var(--azs-accent-ink-hover); }
.azs a:focus-visible { outline: 2px solid var(--azs-accent); outline-offset: 2px; }

/* 紙の質感（全面に薄い粒子） */
.azs-grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: .05;
	
	background-image: radial-gradient(#14110E .5px, transparent .5px);
	background-size: 3px 3px;
}

/* ------------------------------------------------------------------ 動き */
@keyframes azs-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes azs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes azs-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes azs-settle { from { opacity: 0; letter-spacing: .26em; filter: blur(5px); } to { opacity: 1; letter-spacing: .04em; filter: blur(0); } }
@keyframes azs-slowzoom { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes azs-sweep { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(240%); } }

.azs-rise { animation: azs-rise 1s cubic-bezier(.22,.61,.36,1) both; }
.azs-fade { animation: azs-fade 1.2s ease both; }
.azs-settle { animation: azs-settle 1.6s cubic-bezier(.22,.61,.36,1) both; }
.azs-zoom { animation: azs-slowzoom 26s ease-in-out infinite alternate; }

.azs-d1 { animation-delay: .1s; }
.azs-d2 { animation-delay: .25s; }
.azs-d3 { animation-delay: .4s; }
.azs-d4 { animation-delay: .55s; }
.azs-d5 { animation-delay: .7s; }
.azs-d6 { animation-delay: .85s; }
.azs-d7 { animation-delay: 1s; }
.azs-d8 { animation-delay: 1.15s; }

.azs-rule {
	display: block;
	width: 48px;
	height: 1px;
	background: var(--azs-accent);
	transform-origin: center;
	animation: azs-draw 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.azs-rule-left { transform-origin: left; }

/* ------------------------------------------------------------------ 共通枠 */
.azs-sec { padding: 72px var(--azs-pad); }
.azs-sec-tint { background: var(--azs-paper-tint); }
.azs-sec-dark { background: var(--azs-ink); color: var(--azs-reverse); }
.azs-head { text-align: center; margin-bottom: 30px; }
.azs-h2 {
	font-family: var(--azs-serif);
	font-size: 28px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--azs-ink);
	margin: 0 0 12px;
}
.azs-head .azs-rule { margin: 0 auto 16px; }
.azs-head-lead {
	margin: 0 auto;
	max-width: 620px;
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--azs-ink-soft);
}
.azs-strong { color: var(--azs-accent-ink); font-weight: bold; }

/* ------------------------------------------------------------------ 1 hero */
.azs-hero {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 72px 0;
}
.azs-hero-bg {
	position: absolute;
	inset: -20px;
	background: radial-gradient(90% 70% at 50% 30%, #2A2520 0%, #14110E 60%, #0C0A08 100%);
}
.azs-hero-mark {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: .5;
}
.azs-hero-inner { position: relative; padding: 0 var(--azs-pad); max-width: 780px; }
.azs-eyebrow {
	display: block;
	font-family: var(--azs-mono);
	font-size: 11.5px;
	letter-spacing: .28em;
	color: var(--azs-accent);
	margin-bottom: 22px;
}
.azs-h1 {
	font-family: var(--azs-serif);
	font-size: 46px;
	line-height: 1.45;
	font-weight: 500;
	margin: 0 0 16px;
	color: var(--azs-reverse);
}
.azs-hero .azs-rule { width: 64px; margin: 0 auto 20px; }
.azs-lead { margin: 0 0 30px; font-size: 16px; line-height: 2; color: rgba(247,243,236,.82); }
.azs-cta {
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--azs-accent);
	color: var(--azs-ink);
	padding: 18px 34px;
	font-weight: bold;
	font-size: 15.5px;
	line-height: 1.4;
	transition: background-color .4s ease, color .4s ease;
}
.azs-cta::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 36%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
	animation: azs-sweep 5.5s ease-in-out infinite;
}
.azs-cta:hover { background: var(--azs-ink); color: var(--azs-reverse); }
.azs-cta-note { margin: 12px 0 0; font-size: 12.5px; color: rgba(247,243,236,.55); }

/* ------------------------------------------------------------------ 2 結論 */
.azs-conclusion-sec { padding: 88px var(--azs-pad); text-align: center; }
.azs-conclusion {
	font-family: var(--azs-serif);
	margin: 0 auto 18px;
	font-size: 22px;
	line-height: 2;
	color: var(--azs-ink);
	max-width: 640px;
}
.azs-conclusion-sub {
	margin: 0 auto;
	font-size: 14.5px;
	line-height: 2.1;
	max-width: 600px;
	color: var(--azs-ink-soft);
}

/* ------------------------------------------------------------------ 3 章 */
.azs-ch-photo {
	position: relative;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 32px 20px;
	text-align: center;
}
.azs-ch-photo-dark { background: linear-gradient(135deg, #1D1913, #14110E); }
.azs-ch-photo-light { background: linear-gradient(135deg, #F0EBE1, #E5DFD2); min-height: 340px; }
.azs-ch-cap { font-size: 12.5px; letter-spacing: .06em; color: rgba(201,169,110,.9); }
.azs-ch-photo-light .azs-ch-cap { color: var(--azs-accent-ink); }
.azs-ch-marks { flex-direction: row; gap: 40px; min-height: 320px; }
.azs-ch-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.azs-ch-mark-label { font-size: 12px; color: rgba(201,169,110,.85); }
.azs-ch-mark-div { width: 1px; height: 60px; background: rgba(201,169,110,.3); }

.azs-ch-asym {
	padding: 56px var(--azs-pad) 72px;
	display: grid;
	grid-template-columns: 300px minmax(0,1fr);
	gap: 40px;
	align-items: start;
}
.azs-ch-no {
	display: block;
	font-family: var(--azs-mono);
	font-size: 11px;
	letter-spacing: .22em;
	color: var(--azs-accent-ink);
	margin-bottom: 10px;
}
.azs-ch-asym .azs-rule { width: 44px; }
.azs-ch-asym .azs-h2 { font-size: 30px; margin-bottom: 16px; }
.azs-ch-body { margin: 0; font-size: 15px; line-height: 2.15; color: var(--azs-ink-soft); max-width: 560px; }

.azs-ch-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.azs-ch-split-text { padding: 40px var(--azs-pad); }
.azs-ch-split .azs-rule { width: 44px; margin-bottom: 16px; }
.azs-ch-split .azs-ch-body { font-size: 14.5px; line-height: 2.1; }

.azs-ch-center { padding: 56px var(--azs-pad) 72px; text-align: center; }
.azs-ch-center .azs-h2 { font-size: 30px; margin-bottom: 14px; }
.azs-ch-center .azs-rule { margin: 0 auto 18px; }
.azs-ch-center .azs-ch-body { margin: 0 auto; max-width: 620px; line-height: 2.1; }

/* ------------------------------------------------------------------ 4 記録 */
.azs-ev-sec { padding: 0 var(--azs-pad) 72px; }
.azs-ev {
	border-top: 1px solid var(--azs-line);
	border-bottom: 1px solid var(--azs-line);
	padding: 34px 0;
	display: grid;
	grid-template-columns: 220px minmax(0,1fr);
	gap: 40px;
	align-items: center;
}
.azs-ev-label {
	display: block;
	font-family: var(--azs-mono);
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--azs-accent-ink);
	margin-bottom: 8px;
}
.azs-ev-value {
	display: block;
	font-family: var(--azs-mono);
	font-size: 34px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--azs-ink);
}
.azs-ev-unit { font-size: 12px; color: var(--azs-ink-mute); }
.azs-ev-title { margin: 0 0 8px; font-family: var(--azs-serif); font-size: 19px; color: var(--azs-ink); }
.azs-ev-body { margin: 0; font-size: 14px; line-height: 2.05; color: var(--azs-ink-soft); }

/* ------------------------------------------------------------------ 5 写真 */
.azs-photo-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap: 14px;
}
.azs-photo-grid-extra { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 14px; }
.azs-tile {
	background: var(--azs-paper);
	border: 1px solid var(--azs-line);
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.azs-tile:hover { border-color: var(--azs-accent); transform: translateY(-3px); }
.azs-tile-no { font-family: var(--azs-mono); font-size: 12px; color: var(--azs-accent-ink); }
.azs-tile-t { margin: 0; font-size: 14.5px; font-weight: bold; line-height: 1.65; }
.azs-tile-d { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--azs-ink-mute); }
.azs-extra-title {
	margin: 30px 0 0;
	text-align: center;
	font-size: 13.5px;
	letter-spacing: .04em;
	color: var(--azs-accent-ink);
	font-weight: bold;
}

/* ------------------------------------------------------------------ 5.5 数値タイル（performance の型だけで使う） */
.azs-numbers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0,1fr));
	gap: 14px;
	max-width: 900px;
	margin: 0 auto;
}
.azs-num {
	border: 1px solid var(--azs-line);
	background: var(--azs-paper);
	padding: 28px 22px;
	text-align: center;
	transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.azs-num:hover { border-color: var(--azs-accent); transform: translateY(-3px); }
.azs-num-label {
	display: block;
	font-family: var(--azs-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	color: var(--azs-accent-ink);
	margin-bottom: 12px;
}
.azs-num-value {
	display: block;
	font-family: var(--azs-mono);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--azs-ink);
	word-break: break-word;
}

/* ------------------------------------------------------------------ 6 適合 */
.azs-table-wrap { width: 100%; overflow-x: auto; }
.azs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.azs-table th {
	text-align: left;
	padding: 13px 18px;
	font-weight: bold;
	background: var(--azs-ink);
	color: var(--azs-reverse);
}
.azs-table td { padding: 14px 18px; border-bottom: 1px solid var(--azs-line); background: var(--azs-paper); color: var(--azs-ink); }
.azs-table tr:last-child td { border-bottom: 0; }
.azs-table tr { transition: background-color .4s ease; }
.azs-table tbody tr:hover td { background: var(--azs-paper-tint); }
.azs-td-mono { font-family: var(--azs-mono); font-size: 13.5px; }
.azs-ok { color: #15803d; font-weight: bold; }
.azs-check { color: #b45309; font-weight: bold; }

/* ------------------------------------------------------------------ 7 仕様 */
.azs-specs { display: flex; flex-direction: column; max-width: 720px; margin: 0 auto; }
.azs-srow {
	display: flex;
	padding: 15px 12px;
	border-bottom: 1px solid var(--azs-line);
	transition: background-color .4s ease;
}
.azs-srow:last-child { border-bottom: 0; }
.azs-srow:hover { background: var(--azs-paper); }
.azs-slabel { width: 220px; flex: none; font-size: 13.5px; color: var(--azs-ink-mute); }
.azs-svalue { font-size: 14.5px; }
.azs-svalue-mono { font-family: var(--azs-mono); }
.azs-spec-note { max-width: 720px; margin: 16px auto 0; font-size: 12.5px; line-height: 1.9; color: var(--azs-ink-mute); }

/* ------------------------------------------------------------------ 8 FAQ */
.azs-faq { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.azs-faq-item {
	border: 1px solid var(--azs-line);
	background: #fff;
	padding: 20px 24px;
	transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.azs-faq-item:hover { border-color: var(--azs-accent); transform: translateY(-3px); }
.azs-faq-q { margin: 0 0 8px; font-size: 15px; font-weight: bold; line-height: 1.7; }
.azs-faq-a { margin: 0; font-size: 13.5px; line-height: 2; color: var(--azs-ink-soft); }

/* ------------------------------------------------------------------ 9 価格 */
.azs-price-sec { padding: 72px var(--azs-pad); text-align: center; }
.azs-price-label { display: block; font-size: 12.5px; letter-spacing: .1em; color: rgba(247,243,236,.6); margin-bottom: 10px; }
.azs-price-value {
	margin: 0 0 10px;
	font-family: var(--azs-mono);
	font-size: 40px;
	font-weight: 500;
	color: var(--azs-accent);
	line-height: 1.15;
}
.azs-price-value .amount,
.azs-price-value bdi { font-family: var(--azs-mono); color: var(--azs-accent); }
.azs-price-note { margin: 0 0 26px; font-size: 13.5px; color: rgba(247,243,236,.65); line-height: 1.9; }
.azs-cta-buy {
	background: transparent;
	border: 1px solid var(--azs-accent);
	color: var(--azs-accent);
	padding: 16px 32px;
	font-size: 15px;
}
.azs-cta-buy:hover { background: var(--azs-accent); color: var(--azs-ink); }

/* ------------------------------------------------------------------ 10 内部リンク */
.azs-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.azs-link-item { display: flex; }
.azs-link {
	width: 100%;
	border: 1px solid var(--azs-line);
	background: #fff;
	padding: 18px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--azs-ink);
	transition: border-color .45s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.azs-link:hover { border-color: var(--azs-accent); transform: translateY(-3px); color: var(--azs-ink); }
.azs-link-arrow { color: var(--azs-accent-ink); flex: none; }

/* ------------------------------------------------------------------ 11 最終 */
.azs-final { padding: 88px var(--azs-pad); text-align: center; }
.azs-final .azs-h2 { margin-bottom: 12px; }
.azs-final-lead { margin: 0 0 26px; font-size: 14.5px; color: var(--azs-ink-soft); }

/* ==================================================================
 * 4つの型。配色・書体は共通のまま、構成と密度だけを変える。
 * 各メーカーのブランドカラーは使わない（白基調＋シャンパンで統一）。
 * ================================================================== */

/* showcase: 案B-3そのまま。上の既定値がこの型。 */

/* cinematic: 写真を主役に。文章は短く見せ、余白を最大に取る。 */
.azs-layout-cinematic { --azs-pad: 72px; }
.azs-layout-cinematic .azs-hero { min-height: 720px; }
.azs-layout-cinematic .azs-h1 { font-size: 54px; }
.azs-layout-cinematic .azs-ch-photo { min-height: 560px; }
.azs-layout-cinematic .azs-ch-photo-light { min-height: 520px; }
.azs-layout-cinematic .azs-sec { padding: 112px var(--azs-pad); }
.azs-layout-cinematic .azs-conclusion-sec { padding: 120px var(--azs-pad); }
.azs-layout-cinematic .azs-ch-asym { padding: 72px var(--azs-pad) 112px; }
.azs-layout-cinematic .azs-ch-center { padding: 72px var(--azs-pad) 112px; }
.azs-layout-cinematic .azs-ch-body { font-size: 16px; line-height: 2.3; max-width: 520px; }
.azs-layout-cinematic .azs-final { padding: 120px var(--azs-pad); }

/* performance: 数値のタイルを前に出す。仕様欄も大きめに。 */
.azs-layout-performance .azs-ch-photo { min-height: 320px; }
.azs-layout-performance .azs-ch-photo-light { min-height: 300px; }
.azs-layout-performance .azs-svalue-mono { font-size: 16px; }
.azs-layout-performance .azs-td-mono { font-size: 14.5px; }

/* practical: 適合表と仕様表が先。写真は控えめ。迷いを早く消す。 */
.azs-layout-practical .azs-hero { min-height: 460px; }
.azs-layout-practical .azs-h1 { font-size: 38px; }
.azs-layout-practical .azs-conclusion-sec { padding: 56px var(--azs-pad); }
.azs-layout-practical .azs-sec { padding: 56px var(--azs-pad); }
.azs-layout-practical .azs-ch-photo { min-height: 220px; }
.azs-layout-practical .azs-ch-photo-light { min-height: 200px; }
.azs-layout-practical .azs-ch-asym { padding: 40px var(--azs-pad) 48px; }
.azs-layout-practical .azs-ch-center { padding: 40px var(--azs-pad) 48px; }
.azs-layout-practical .azs-ch-split-text { padding: 32px var(--azs-pad); }
.azs-layout-practical .azs-final { padding: 64px var(--azs-pad); }

/* ------------------------------------------------------------------ 画面が狭いとき */
@media (max-width: 900px) {
	.azs { --azs-pad: 32px; margin: 32px auto; }
	.azs-h1 { font-size: 34px; }
	.azs-h2 { font-size: 24px; }
	.azs-ch-asym { grid-template-columns: 1fr; gap: 18px; }
	.azs-ch-split { grid-template-columns: 1fr; }
	.azs-ch-split-text { padding: 32px var(--azs-pad) 8px; }
	.azs-ev { grid-template-columns: 1fr; gap: 20px; }
	.azs-photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.azs-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.azs-numbers { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
	.azs-num { padding: 20px 12px; }
	.azs-num-value { font-size: 20px; }
	.azs-layout-cinematic { --azs-pad: 32px; }
	.azs-layout-cinematic .azs-hero { min-height: 520px; }
	.azs-layout-cinematic .azs-h1 { font-size: 34px; }
	.azs-layout-cinematic .azs-ch-photo { min-height: 340px; }
	.azs-layout-cinematic .azs-sec,
	.azs-layout-cinematic .azs-conclusion-sec,
	.azs-layout-cinematic .azs-final { padding: 64px var(--azs-pad); }
	.azs-layout-cinematic .azs-ch-asym,
	.azs-layout-cinematic .azs-ch-center { padding: 40px var(--azs-pad) 56px; }
}

@media (max-width: 600px) {
	.azs { --azs-pad: 20px; font-size: 14.5px; }
	.azs-hero { min-height: 480px; }
	.azs-h1 { font-size: 27px; }
	.azs-conclusion { font-size: 18px; }
	.azs-photo-grid,
	.azs-photo-grid-extra,
	.azs-links { grid-template-columns: 1fr; }
	.azs-ch-marks { flex-direction: column; gap: 22px; }
	.azs-ch-mark-div { width: 60px; height: 1px; }
	.azs-srow { flex-direction: column; }
	.azs-slabel { width: auto; }
	.azs-table th,
	.azs-table td { padding: 10px 12px; }
	.azs-price-value { font-size: 30px; }
	.azs-numbers { grid-template-columns: 1fr; }
	.azs-layout-cinematic .azs-h1,
	.azs-layout-practical .azs-h1 { font-size: 27px; }
}

/* ------------------------------------------------------------------ 動きを止める設定のとき */
@media (prefers-reduced-motion: reduce) {
	.azs-rise,
	.azs-fade,
	.azs-settle,
	.azs-rule,
	.azs-zoom {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		letter-spacing: normal !important;
	}
	.azs-cta::after { display: none; }
	.azs-tile,
	.azs-faq-item,
	.azs-link,
	.azs-num,
	.azs-cta,
	.azs-srow,
	.azs-table tr { transition: none !important; }
	.azs-tile:hover,
	.azs-faq-item:hover,
	.azs-link:hover,
	.azs-num:hover { transform: none !important; }
}

/* ==========================================================================
   構成の型（メーカーごと）
   ・HTMLの並びは検索エンジンに最適な順のまま固定する
   ・見た目の順番と密度だけをCSSで変える
   ・配色と書体はどの型も共通（白基調＋シャンパン）。他社のブランド色は使わない
   ========================================================================== */
.azs { display: flex; flex-direction: column; }
.azs > * { order: 50; }
.azs > .azs-grain { order: 0; }
.azs > [data-sec="hero"] { order: 10; }
.azs > [data-sec="conclusion"] { order: 11; }

/* --- cinematic：写真を主役に。言葉は最小限、余白は最大 --- */
.azs[data-layout="cinematic"] > [data-sec="hero"] { height: 720px; }
.azs[data-layout="cinematic"] .azs-h1 { font-size: 52px; }
.azs[data-layout="cinematic"] .azs-sec { padding-top: 104px; padding-bottom: 104px; }
.azs[data-layout="cinematic"] .azs-ch { padding-bottom: 96px; }
.azs[data-layout="cinematic"] .azs-conclusion { font-size: 24px; }

/* --- showcase：既定。案B-3の章立てそのまま --- */

/* --- performance：数値を大きく見せ、仕様を前に出す --- */
.azs[data-layout="performance"] > [data-sec="specs"] { order: 20; }
.azs[data-layout="performance"] > [data-sec="fitment"] { order: 21; }
.azs[data-layout="performance"] .azs-h1 { font-size: 44px; letter-spacing: .04em; }
.azs[data-layout="performance"] .azs-sec { padding-top: 64px; padding-bottom: 64px; }
.azs[data-layout="performance"] .azs-spec-row { font-size: 15.5px; }

/* --- practical：適合と仕様を先に。迷いを早く消す --- */
.azs[data-layout="practical"] > [data-sec="fitment"] { order: 20; }
.azs[data-layout="practical"] > [data-sec="specs"] { order: 21; }
.azs[data-layout="practical"] > [data-sec="photos"] { order: 22; }
.azs[data-layout="practical"] > [data-sec="hero"] { height: 420px; }
.azs[data-layout="practical"] .azs-h1 { font-size: 36px; }
.azs[data-layout="practical"] .azs-sec { padding-top: 52px; padding-bottom: 52px; }
.azs[data-layout="practical"] .azs-ch { padding-bottom: 48px; }

/* 動きを減らす設定の端末では、順番の入れ替えはそのまま・動きだけ止める */
@media (max-width: 768px) {
  .azs[data-layout="cinematic"] > [data-sec="hero"],
  .azs[data-layout="practical"] > [data-sec="hero"] { height: auto; min-height: 380px; }
}


/* ==========================================================================
   描画の軽量化（2026-08-20 追加）
   ・画面に入るまで中の描画をしない。高さは先に確保するのでズレは出ない。
   ・写真枠は最初の画面に入らないため、遅れて描いてよい。
   ========================================================================== */
.azs > [data-sec="hero"],
.azs > [data-sec="conclusion"],
.azs > [data-sec="chapter"],
.azs > [data-sec="evidence"],
.azs > [data-sec="photos"],
.azs > [data-sec="fitment"],
.azs > [data-sec="specs"],
.azs > [data-sec="faq"],
.azs > [data-sec="links"]{
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}

/* 紙の質感は最初の描画に要らない。画面に入ってから描く。 */
.azs-grain{
  content-visibility: auto;
  /* 2026-08-20: mix-blend-mode をやめた。画面全体の合成をやり直させて描画が重くなるため。
     見た目はほぼ変わらない（薄い点の重ね）。 */
  opacity: .035;
}