/* 環境ページ固有のスタイル。design-source/sustainability-demo.dc.html 34〜108行のインライン style から抽出。 */

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

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

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

.sb-shero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .94) 0%, rgba(8, 12, 7, .7) 48%, rgba(8, 12, 7, .3) 84%);
}

.sb-shero__body {
	position: relative;
	padding: 104px 48px 92px;
}

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

.sb-shero__title {
	margin: 30px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(36px, 4.4vw, 62px);
	line-height: 1.44;
	/* デモ（design-source）は 20ch だが、h1 に word-break: keep-all を掛けている
	   都合上、20ch では「大量の人工芝ゴミをなくす。」の句点だけが次行へ押し出される
	   （2026-08-18 川村指摘）。行の文字数に合わせて 28ch まで広げ、2行それぞれが
	   1行に収まるようにする。 */
	max-width: 28ch;
}

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

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

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

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

.sb-shero__divider {
	height: 1px;
	background: rgba(244, 242, 236, .24);
	margin-top: 44px;
	max-width: 640px;
	transform-origin: left;
	animation: hLine 1.4s 1s cubic-bezier(.19, 1, .22, 1) both;
}

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

/* ===== ISSUE（人工芝マットは、捨てるしかない。） ===== */
.sb-sproblem {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-sproblem__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

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

.sb-sproblem__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
}

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

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

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

.sb-sproblem__no {
	color: #6b6659;
	letter-spacing: .24em;
}

.sb-sproblem__item-title {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--sb-font-sans);
}

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

.sb-sproblem__note {
	margin-top: 16px;
	color: #736e62;
	letter-spacing: .18em;
	line-height: 1;
}

/* ===== SOLUTION（芝は、土に還せる。） ===== */
.sb-scycle {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-scycle__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

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

.sb-scycle__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
}

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

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

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

.sb-scycle__no {
	color: var(--sb-sage);
	letter-spacing: .24em;
}

.sb-scycle__step-title {
	margin: 14px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	font-family: var(--sb-font-sans);
}

.sb-scycle__row {
	display: flex;
	gap: 44px;
	margin-top: 52px;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sb-scycle__text {
	flex: 1 1 420px;
	margin: 0;
	font: 300 13.5px/2.3 var(--sb-font-sans);
	color: rgba(244, 242, 236, .8);
	max-width: 52ch;
}

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

.sb-scycle__media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .9;
}

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

/* ===== FOR FACILITIES（環境対応を、説明できる材料にする。） ===== */
.sb-smaterial {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-smaterial__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

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

.sb-smaterial__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
}

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

.sb-smaterial__item {
	background: var(--sb-paper);
	padding: 34px 30px;
}

.sb-smaterial__no {
	color: #6b6659;
	letter-spacing: .24em;
}

.sb-smaterial__item-title {
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 700;
	font-family: var(--sb-font-sans);
}

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

/* ===== PUBLIC PARTNERSHIP（行政連携） ===== */
.sb-spartner {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

.sb-spartner__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

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

.sb-spartner__row {
	display: flex;
	gap: 44px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.sb-spartner__card {
	flex: 1 1 420px;
	min-width: 300px;
	border: 1px solid rgba(244, 242, 236, .2);
	padding: 34px 30px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sb-spartner__card--helix {
	border: 1px solid rgba(157, 196, 164, .4);
}

.sb-spartner__card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	color: var(--sb-sage);
	letter-spacing: .22em;
}

.sb-spartner__card-date {
	color: rgba(244, 242, 236, .55);
}

.sb-spartner__card-title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-size: 24px;
	font-weight: 400;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.sb-spartner__placeholder {
	height: 180px;
	background: rgba(244, 242, 236, .06);
	border: 1px dashed rgba(244, 242, 236, .25);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 9px/1.8 var(--sb-font-mono);
	letter-spacing: .2em;
	color: rgba(244, 242, 236, .5);
	text-align: center;
}

.sb-spartner__card-eyebrow {
	color: var(--sb-sage);
	letter-spacing: .22em;
}

.sb-spartner__card-text {
	margin: 0;
	font: 300 13px/2.2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .8);
	max-width: 38ch;
}

/* ===== CTA（環境対応の実績として、導入する。） ===== */
.sb-scta {
	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-scta__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.5;
}

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

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

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

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

/* ===== レスポンシブ（layout.css / page-top.css / page-product.css / page-cases.css と同じブレークポイント） ===== */
@media (max-width: 900px) {
	.sb-shero__body,
	.sb-sproblem,
	.sb-scycle,
	.sb-smaterial,
	.sb-spartner,
	.sb-scta {
		padding-left: 24px;
		padding-right: 24px;
	}
}

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

	.sb-scycle__step {
		flex: 1 1 45%;
	}
}