/* 導入事例ページ固有のスタイル。design-source/cases-demo.dc.html 36〜110行のインライン style から抽出。 */

/* ===== CASES HERO ===== */
/* トップの .sb-hero、製品の .sb-phero とは別物。
   クラス名は衝突しないよう .sb-chero（cases hero）で統一する。
   他ページ用のスタイルには一切触れない。 */
.sb-chero {
	position: relative;
	background: var(--sb-ink);
	color: var(--sb-paper);
	overflow: hidden;
}

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

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

.sb-chero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .93) 0%, rgba(8, 12, 7, .72) 46%, rgba(8, 12, 7, .3) 82%);
}

.sb-chero__body {
	position: relative;
	padding: 96px 48px 84px;
}

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

.sb-chero__title {
	margin: 30px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1.48;
	max-width: 22ch;
}

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

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

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

.sb-chero__title-line--2 {
	animation-delay: .46s;
}

.sb-chero__lead {
	margin: 28px 0 0;
	font: 300 14.5px/2.3 var(--sb-font-sans);
	color: rgba(244, 242, 236, .84);
	max-width: 52ch;
	animation: hFadeUp 1.2s .9s both;
	text-wrap: pretty;
}

.sb-chero__table-wrap {
	margin-top: 52px;
	animation: hFadeUp 1.2s 1.1s both;
}

.sb-chero__table-head {
	display: grid;
	grid-template-columns: 2fr 1.4fr 1fr 1fr;
	gap: 0;
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .2em;
	color: rgba(244, 242, 236, .5);
	padding: 14px 0;
	border-top: 1px solid rgba(244, 242, 236, .28);
	border-bottom: 1px solid rgba(244, 242, 236, .16);
}

.sb-chero__row {
	display: grid;
	grid-template-columns: 2fr 1.4fr 1fr 1fr;
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid rgba(244, 242, 236, .16);
}

.sb-chero__row--last {
	border-bottom: 1px solid rgba(244, 242, 236, .28);
}

.sb-chero__row--link {
	text-decoration: none;
	color: var(--sb-paper);
	transition: background .25s;
}

.sb-chero__row--link:hover {
	background: rgba(157, 196, 164, .1);
}

.sb-chero__row-name {
	font-family: var(--sb-font-serif);
	font-size: 19px;
}

.sb-chero__row-type,
.sb-chero__row-loc {
	font: 300 12px/1.8 var(--sb-font-sans);
	color: rgba(244, 242, 236, .75);
}

.sb-chero__row-time {
	font: 300 12px/1.8 var(--sb-font-sans);
	color: rgba(244, 242, 236, .55);
}

.sb-chero__footnote {
	margin: 18px 0 0;
	font: 300 11.5px/1.9 var(--sb-font-sans);
	color: rgba(244, 242, 236, .55);
}

/* ===== セクション見出し（ラベル＋見出し）は共通の形。CASE01/CASES02-04/PATTERNS で使う ===== */
.sb-case-featured__head,
.sb-case-upcoming__head,
.sb-case-patterns__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.sb-case-featured__title,
.sb-case-upcoming__title,
.sb-case-patterns__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
}

/* ===== CASE 01（大箱根カントリークラブ） ===== */
.sb-case-featured {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-case-featured__eyebrow {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: #6b6659;
}

.sb-case-featured__meta {
	margin: 16px 0 0;
	font: 300 12.5px/2 var(--sb-font-sans);
	color: #5b564a;
}

.sb-case-featured__media {
	display: flex;
	gap: 40px;
	margin-top: 48px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sb-case-featured__figure {
	flex: 1 1 460px;
	min-width: 300px;
	position: relative;
	overflow: hidden;
	background: var(--sb-ink);
	min-height: 340px;
}

/* 事例の個別ページは写真が1枚だけ。狭い画面では __media が flex-direction: column
   になり、flex-basis が高さに効いて幅は min-width の 300px まで縮む（2026-09-09
   実測: 390px 幅でコンテンツ幅 342px に対し図が 300px、右に42pxの隙間）。
   align-self で交差軸いっぱいに伸ばす。横並びのときは flex: 1 1 460px が
   そのまま効くため影響しない。 */
.sb-case-featured__media--solo .sb-case-featured__figure {
	align-self: stretch;
}

.sb-case-featured__figure-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sb-case-featured__figure-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 12, 7, 0) 55%, rgba(8, 12, 7, .75) 100%);
}

.sb-case-featured__figure-caption {
	position: absolute;
	left: 20px;
	bottom: 18px;
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .2em;
	color: rgba(244, 242, 236, .8);
}

.sb-case-featured__polaroid {
	flex: 0 1 260px;
	min-width: 200px;
	max-width: 280px;
}

.sb-case-featured__polaroid-frame {
	box-shadow: 0 30px 60px rgba(13, 17, 9, .28);
}

.sb-case-featured__polaroid-img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	display: block;
	background: var(--sb-ink);
}

.sb-case-featured__polaroid-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: var(--sb-charcoal);
	padding: 11px 14px;
	font: 9px/1.5 var(--sb-font-mono);
	letter-spacing: .2em;
	color: #fff;
}

.sb-case-featured__polaroid-bar-turf {
	color: var(--sb-sage);
}

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

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

.sb-case-featured__item-no {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .24em;
	color: #6b6659;
}

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

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

.sb-case-featured__footer {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	margin-top: 26px;
	flex-wrap: wrap;
	font: 300 11.5px/1.9 var(--sb-font-sans);
	color: #6b6659;
}

.sb-case-featured__footer-link {
	color: var(--sb-green-dark);
	text-decoration: none;
}

/* ===== CASES 02-04（同じ構成で、順次掲載します。） ===== */
.sb-case-upcoming {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-case-upcoming__eyebrow {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: var(--sb-sage);
}

.sb-case-upcoming__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 48px;
}

.sb-case-upcoming__card {
	border: 1px solid rgba(244, 242, 236, .2);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-case-upcoming__card-eyebrow {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .24em;
	color: var(--sb-sage);
}

.sb-case-upcoming__card-title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-size: 20px;
	font-weight: 400;
}

.sb-case-upcoming__card-text {
	margin: 0;
	font: 300 12.5px/2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .72);
}

/* ===== PATTERNS（自施設は、どのパターンか。） ===== */
.sb-case-patterns {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-case-patterns__eyebrow {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .3em;
	color: #6b6659;
}

.sb-case-patterns__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
	margin-top: 48px;
}

.sb-case-patterns__item {
	padding: 30px;
	border-top: 1px solid rgba(20, 21, 15, .28);
}

.sb-case-patterns__item:first-child {
	padding-left: 0;
}

.sb-case-patterns__item-type {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .24em;
	color: var(--sb-green-dark);
}

.sb-case-patterns__item-name {
	margin: 14px 0 0;
	font-family: var(--sb-font-serif);
	font-size: 22px;
	font-weight: 400;
}

.sb-case-patterns__item-text {
	margin: 12px 0 0;
	font: 300 12.5px/2.1 var(--sb-font-sans);
	color: #5b564a;
	max-width: 32ch;
}

/* ===== CASES CTA ===== */
.sb-case-cta {
	background: var(--sb-charcoal);
	color: 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-case-cta__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.5;
}

.sb-case-cta__lead {
	margin: 20px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .75);
}

.sb-case-cta__btn {
	text-decoration: none;
	background: var(--sb-green);
	color: #fff;
	padding: 17px 36px;
	border-radius: 999px;
	font-size: 12.5px;
	letter-spacing: .08em;
	white-space: nowrap;
}

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

	.sb-case-featured,
	.sb-case-upcoming,
	.sb-case-patterns,
	.sb-case-cta {
		padding-left: 24px;
		padding-right: 24px;
	}

	.sb-chero__table-head,
	.sb-chero__row {
		grid-template-columns: 1.6fr 1fr 1fr;
	}

	.sb-chero__table-head span:last-child,
	.sb-chero__row-time {
		display: none;
	}
}

@media (max-width: 560px) {
	.sb-chero__title {
		max-width: none;
	}

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

	.sb-chero__row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 18px 0;
	}

	.sb-chero__row-name {
		font-size: 17px;
	}

	.sb-chero__row-type,
	.sb-chero__row-loc,
	.sb-chero__row-time {
		display: block;
		font-size: 11px;
	}

	.sb-chero__row-type::before,
	.sb-chero__row-loc::before,
	.sb-chero__row-time::before {
		letter-spacing: .1em;
		color: rgba(244, 242, 236, .4);
	}

	.sb-chero__row-type::before {
		content: "形態  ";
	}

	.sb-chero__row-loc::before {
		content: "所在地  ";
	}

	.sb-chero__row-time::before {
		content: "導入時期  ";
	}

	.sb-case-featured__media {
		flex-direction: column;
	}

	.sb-case-featured__polaroid {
		max-width: none;
	}

	.sb-case-patterns__item {
		padding: 24px 0;
	}

	.sb-case-patterns__item:first-child {
		padding-left: 0;
	}
}