/* 製品ページ固有のスタイル。design-source/product-demo.dc.html 36〜130行のインライン style から抽出。 */

/* ===== PRODUCT HERO ===== */
/* トップの .sb-hero（ビューポート全体を占める暗色ヒーロー容器）とは別物。
   クラス名は sb-hero と衝突しないよう .sb-phero（product hero）で統一する。
   トップ用のスタイルには一切触れない。 */
.sb-phero {
	position: relative;
	background: var(--sb-ink);
	color: var(--sb-paper);
	overflow: hidden;
}

/* 上段: 天面いっぱいの写真。トップの「左コピー＋右メディアカード」と構図を
   分けるため、製品ページは写真を上に敷いて縦の流れにする（2026-08-18）。 */
.sb-phero__cover {
	position: relative;
	height: clamp(280px, 42vw, 480px);
	/* 必須。背景画像は hZoom で拡大するため、クリップしないと枠の外へはみ出し、
	   スクリム（この要素の内側にしかない）が効かない生の写真が下辺に帯状に
	   露出する（2026-08-18、川村指摘。ピクセル実測で特定）。 */
	overflow: hidden;
}

.sb-phero__cover-wrap {
	position: absolute;
	inset: 0;
}

.sb-phero__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: hZoom 24s ease-out both;
}

.sb-phero__scrim {
	position: absolute;
	inset: 0;
	/* 下端を落とす。見出し1行目が写真に重なるため、明るい芝の上でも文字が
	   読める濃度が要る。
	   色は必ず ink（--sb-ink: #0d1109 = rgba(13,17,9)）と同じ値を使い、終端は
	   完全不透明（1）にすること。ここを rgba(8,12,7,.97) にしていたときは、
	   (a) スクリムの色と下地の ink がわずかに違う (b) 終端が透けて明るい芝が
	   残る、の二重で写真の下端に明るい帯が横切って見えていた
	   （2026-08-18、川村指摘。実機のスクリーンショットで確認して修正）。 */
	background: linear-gradient(180deg, rgba(13, 17, 9, .5) 0%, rgba(13, 17, 9, .06) 32%, rgba(13, 17, 9, .55) 62%, rgba(13, 17, 9, .92) 86%, rgba(13, 17, 9, 1) 100%);
}

.sb-phero__topbar {
	position: absolute;
	top: 40px;
	left: 48px;
	right: 48px;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.sb-phero__label {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: var(--sb-sage);
	animation: hFade 1.2s .2s both;
}

.sb-phero__brand {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: rgba(244, 242, 236, .55);
}

/* 下段: コピーとスペック。写真に少し重ねて continuity を出す。 */
.sb-phero__body {
	position: relative;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: start;
	gap: 64px;
	padding: 0 48px 72px;
	margin-top: clamp(-84px, -6vw, -40px);
}

.sb-phero__copy {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.sb-phero__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(38px, 5.4vw, 82px);
	line-height: 1.3;
	letter-spacing: .01em;
}

.sb-phero__title-mask {
	display: block;
	overflow: hidden;
}

.sb-phero__title-line {
	display: block;
	animation: hRise 1.3s cubic-bezier(.19, 1, .22, 1) both;
}

.sb-phero__title-line--1 {
	animation-delay: .3s;
}

.sb-phero__title-line--2 {
	animation-delay: .48s;
}

.sb-phero__lead {
	margin: 28px 0 0;
	max-width: 30em;
	font-size: 15px;
	line-height: 2.1;
	color: rgba(244, 242, 236, .8);
	animation: hFadeUp 1s 1s both;
}

.sb-phero__actions {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	animation: hFadeUp 1s 1.2s both;
}

.sb-phero__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 34px;
	/* 2026-08-24: 角が立っていて、ヘッダーのCTA・トップのヒーローCTA・
	   同ページ下部の .sb-product-cta__btn（いずれも 999px の pill 型）と
	   揃っていなかった。サイト内のCTAは pill に統一する。 */
	border-radius: 999px;
	background: var(--sb-green);
	/* 緑ボタン上の paper はコントラスト比 4.37 で AA（4.5）に届かない。
	   白なら 4.89（2026-08-24 実測）。他の緑ボタンは元々 #fff で、ここだけ漏れていた。 */
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .08em;
	transition: background .3s;
}

.sb-phero__cta:hover {
	background: var(--sb-green-dark);
	color: #fff;
}

/* スペックは右列に縦積み。横並びだと上段の写真と競合して読みにくい。 */
.sb-phero__stats {
	display: flex;
	flex-direction: column;
	align-self: end;
}

.sb-phero__stats-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(244, 242, 236, .18);
}

.sb-phero__stats-item:nth-child(1) {
	animation: hFadeUp 1s 1.4s both;
}

.sb-phero__stats-item:nth-child(2) {
	animation: hFadeUp 1s 1.52s both;
}

.sb-phero__stats-item:nth-child(3) {
	animation: hFadeUp 1s 1.64s both;
}

.sb-phero__stats-label {
	letter-spacing: .2em;
	color: var(--sb-sage);
}

.sb-phero__stats-value {
	font-family: var(--sb-font-serif);
	font-size: 34px;
	line-height: 1;
}

.sb-phero__stats-unit {
	font-size: 17px;
	margin-left: 4px;
}

/* ===== セクション見出し（ラベル＋見出し）は5セクション共通の形。SPEC/QUALITY/INDOOR/MAINTENANCE で使う ===== */
.sb-numbers__head,
.sb-structure__head,
.sb-indoor__head,
.sb-cycle__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.sb-numbers__title,
.sb-structure__title,
.sb-indoor__title,
.sb-cycle__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
	min-width: 0;
}

/* ===== SPEC（数字で答える） ===== */
.sb-numbers {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-numbers__eyebrow {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	color: #6b6659;
}

.sb-numbers__table {
	margin-top: 44px;
	border-top: 1px solid rgba(20, 21, 15, 0.18);
}

.sb-numbers__row {
	display: grid;
	grid-template-columns: 220px 1fr 1fr;
	align-items: baseline;
	padding: 22px 0;
	border-bottom: 1px solid rgba(20, 21, 15, 0.12);
}

.sb-numbers__row--head {
	align-items: center;
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: 0.2em;
	color: #6b6659;
	padding: 14px 0;
}

.sb-numbers__row--highlight {
	border-bottom: 1px solid rgba(20, 21, 15, 0.18);
	background: rgba(46, 128, 71, 0.05);
}

.sb-numbers__label {
	font-size: 13.5px;
	font-weight: 400;
}

.sb-numbers__row--highlight .sb-numbers__label {
	font-weight: 700;
}

.sb-numbers__value {
	font-family: var(--sb-font-serif);
	font-size: 22px;
}

.sb-numbers__row--highlight .sb-numbers__value {
	font-size: 26px;
	color: var(--sb-green-dark);
}

.sb-numbers__note {
	font: 300 12px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

.sb-numbers__row--highlight .sb-numbers__note {
	color: #5b564a;
}

.sb-numbers__footnote {
	margin: 20px 0 0;
	font: 300 11.5px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

/* ===== スコア帯別の打球数（SPEC 内の従属表・2026-08-24 追加） =====
   SPEC 本体の下に続く2列の小さな表。SPEC と同じ paper 背景の上に置き、
   罫線と字送りも SPEC に合わせて「同じ表の続き」として読めるようにしている。 */
.sb-shots {
	margin-top: 56px;
	max-width: 720px;
}

.sb-shots__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.6;
}

.sb-shots__table {
	margin-top: 20px;
	border-top: 1px solid rgba(20, 21, 15, 0.18);
}

.sb-shots__row {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid rgba(20, 21, 15, 0.12);
}

.sb-shots__row--head {
	align-items: center;
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: 0.2em;
	color: #6b6659;
	padding: 12px 0;
}

.sb-shots__band {
	font-size: 13.5px;
	font-weight: 400;
}

.sb-shots__value {
	font-family: var(--sb-font-serif);
	font-size: 20px;
}

.sb-shots__note {
	margin: 16px 0 0;
	font: 300 11.5px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

/* ===== QUALITY（なぜ、運べる天然芝が成立するのか） ===== */
.sb-structure {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-structure__eyebrow {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	color: var(--sb-sage);
}

.sb-structure__body {
	display: flex;
	gap: 44px;
	margin-top: 52px;
	flex-wrap: wrap;
}

.sb-structure__figure {
	flex: 1 1 420px;
	min-width: 280px;
	position: relative;
	overflow: hidden;
	background: var(--sb-ink);
	min-height: 320px;
}

.sb-structure__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
}

.sb-structure__figure-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 7, 0) 50%, rgba(8, 12, 7, 0.8) 100%);
}

.sb-structure__figure-caption {
	position: absolute;
	left: 22px;
	bottom: 20px;
	font: 9px/1.8 var(--sb-font-mono);
	letter-spacing: 0.2em;
	color: rgba(244, 242, 236, 0.8);
}

.sb-structure__list {
	flex: 1 1 380px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	gap: 34px;
	justify-content: center;
}

.sb-structure__no {
	letter-spacing: 0.24em;
	color: var(--sb-sage);
}

.sb-structure__item-title {
	margin: 12px 0 0;
	font-size: 15px;
	font-weight: 700;
}

.sb-structure__item-text {
	margin: 10px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, 0.78);
	max-width: 40ch;
}

.sb-structure__divider {
	height: 1px;
	background: rgba(244, 242, 236, 0.18);
}

/* ===== INDOOR（インドアゴルフ場での、可否と条件） ===== */
.sb-indoor {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-indoor__eyebrow {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	color: #6b6659;
}

.sb-indoor__lead {
	margin: 22px 0 0;
	font: 300 13.5px/2.2 var(--sb-font-sans);
	color: #5b564a;
	max-width: 52ch;
}

.sb-indoor__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: rgba(20, 21, 15, 0.14);
	border: 1px solid rgba(20, 21, 15, 0.14);
	margin-top: 44px;
}

.sb-indoor__item {
	background: var(--sb-paper);
	padding: 30px 26px;
}

.sb-indoor__no {
	letter-spacing: 0.24em;
	color: #6b6659;
}

.sb-indoor__item-title {
	margin: 14px 0 0;
	font-size: 14.5px;
	font-weight: 700;
}

.sb-indoor__item-text {
	margin: 10px 0 0;
	font: 300 12.5px/2 var(--sb-font-sans);
	color: #5b564a;
}

.sb-indoor__status {
	margin-top: 16px;
	letter-spacing: 0.18em;
	color: #736e62;
}

/* ===== MAINTENANCE（仕入れて、使って、返す） ===== */
.sb-cycle {
	background: var(--sb-ink);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-cycle__eyebrow {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	color: var(--sb-sage);
}

.sb-cycle__steps {
	display: flex;
	gap: 0;
	align-items: stretch;
	margin-top: 52px;
	flex-wrap: wrap;
}

.sb-cycle__step {
	flex: 1 1 180px;
	padding: 26px 24px;
	border-top: 1px solid rgba(244, 242, 236, 0.28);
}

.sb-cycle__step:last-child {
	border-top: 1px solid var(--sb-sage);
}

.sb-cycle__no {
	letter-spacing: 0.24em;
	color: var(--sb-sage);
}

.sb-cycle__step-title {
	margin: 14px 0 0;
	font-size: 14.5px;
	font-weight: 700;
}

.sb-cycle__step-text {
	margin: 8px 0 0;
	font: 300 12px/2 var(--sb-font-sans);
	color: rgba(244, 242, 236, 0.72);
}

.sb-cycle__note {
	margin: 34px 0 0;
	font: 300 12.5px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, 0.66);
	max-width: 64ch;
}

.sb-cycle__note-link {
	color: var(--sb-sage);
}

/* ===== PRODUCT CTA ===== */
.sb-product-cta {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 44px;
	flex-wrap: wrap;
}

.sb-product-cta__title {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.5;
}

.sb-product-cta__actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.sb-product-cta__btn {
	padding: 16px 34px;
	border-radius: 999px;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.sb-product-cta__btn.sb-product-cta__btn--primary {
	background: var(--sb-green);
	color: #fff;
}

.sb-product-cta__btn.sb-product-cta__btn--ghost {
	color: var(--sb-charcoal);
	border: 1px solid rgba(20, 21, 15, 0.3);
}

/* ===== レスポンシブ（layout.css / page-top.css と同じブレークポイント） ===== */
@media (max-width: 900px) {
	.sb-numbers,
	.sb-structure,
	.sb-indoor,
	.sb-cycle,
	.sb-product-cta {
		padding-left: 24px;
		padding-right: 24px;
	}

	.sb-numbers__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.sb-numbers__row--head {
		display: none;
	}

	/* スコア帯の表も SPEC と同じ扱いにする（1列に落として見出し行を隠す）。 */
	.sb-shots__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.sb-shots__row--head {
		display: none;
	}

	.sb-phero__body {
		grid-template-columns: 1fr;
		gap: 36px;
		padding: 0 24px 48px;
		margin-top: -40px;
	}

	.sb-phero__topbar {
		left: 24px;
		right: 24px;
		top: 28px;
	}

	.sb-phero__stats {
		align-self: stretch;
	}
}

@media (max-width: 560px) {
	.sb-cycle__steps {
		flex-direction: column;
	}

	.sb-cycle__step {
		border-top: 1px solid rgba(244, 242, 236, 0.28);
	}

	.sb-cycle__step:last-child {
		border-top: 1px solid var(--sb-sage);
	}

	.sb-phero__stats-value {
		font-size: 28px;
	}
}