/* トップページ固有のスタイル。design-source/top-demo.dc.html 27〜86行のインライン style から抽出。 */

/* トップだけ body 背景を ink にする */
body.sb-page-top {
	background: var(--sb-ink);
}

/* トップ固有のアニメーション値（共通の hZoom 1.1 / hFloat -10px と異なる）。
   同名の @keyframes を再定義すると他ページに影響するため別名にする。 */
@keyframes sbZoomTop {
	from { transform: scale(1.02); }
	to { transform: scale(1.11); }
}

@keyframes sbFloatTop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}

/* ===== ヒーロー容器 ===== */
.sb-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--sb-ink);
}

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

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

.sb-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .9) 0%, rgba(8, 12, 7, .66) 40%, rgba(8, 12, 7, .2) 76%);
}

.sb-hero__scrim--top {
	background: linear-gradient(180deg, rgba(8, 12, 7, .5) 0%, rgba(8, 12, 7, 0) 22%);
}

/* main はヘッダー分を除いた残り全体を占め、内部でヒーロー本文・キュー・要点を縦に並べる */
.sb-main--top {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* ===== ヒーロー本文（コピー＋映像カード） ===== */
.sb-hero__body {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 64px;
	padding: 40px 56px 56px;
	min-height: 0;
}

.sb-hero__copy {
	flex: 1 1 auto;
	max-width: 600px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	color: var(--sb-paper);
}

.sb-hero__label {
	font-size: 10px;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--sb-sage);
	animation: hFade 1.2s .5s both;
}

.sb-hero__title {
	margin: 32px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(38px, 4vw, 60px);
	line-height: 1.48;
	letter-spacing: .01em;
}

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

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

.sb-hero__title-line--1 {
	animation-delay: .6s;
}

.sb-hero__title-line--2 {
	animation-delay: .76s;
}

.sb-hero__lead {
	margin: 30px 0 0;
	font: 300 14.5px/2.3 var(--sb-font-sans);
	color: rgba(244, 242, 236, .84);
	/*
	 * 2026-08-24: 42ch は明朝／ゴシックの日本語だと実効 326px（全角22文字）しかなく、
	 * 48文字のリード文が3行に折れて
	 *   「…工事も改修も不要／で、既存の打席が…／になります。」
	 * と助詞が割れ、最終行が6文字だけ残っていた（本番実測）。
	 * ch は「数字 0 の字幅」で、日本語では半角ぶんにしかならない。全角基準で
	 * 数えられる em に変えて、親（600px）の中で2行に収まる幅にする。
	 */
	max-width: 30em;
	animation: hFadeUp 1.2s 1.1s both;
	text-wrap: pretty;
}

.sb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 38px;
	animation: hFadeUp 1.2s 1.3s both;
}

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

/* a:hover の色指定に負けないよう2クラス分の詳細度で色を固定する */
.sb-hero__cta.sb-hero__cta--primary {
	background: var(--sb-green);
	color: #fff;
}

.sb-hero__cta.sb-hero__cta--ghost {
	color: var(--sb-paper);
	border: 1px solid rgba(244, 242, 236, .45);
}

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

/* ===== 数値バッジ3つ ===== */
.sb-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	margin-top: 22px;
}

.sb-stats__item:nth-child(1) {
	animation: hFadeUp 1s 1.7s both;
}

.sb-stats__item:nth-child(2) {
	animation: hFadeUp 1s 1.82s both;
}

.sb-stats__item:nth-child(3) {
	animation: hFadeUp 1s 1.94s both;
}

.sb-stats__label {
	letter-spacing: .2em;
	color: rgba(244, 242, 236, .55);
}

.sb-stats__value {
	font-family: var(--sb-font-serif);
	font-size: 26px;
	margin-top: 9px;
}

.sb-stats__unit {
	font-size: 12px;
	margin-left: 3px;
}

/* ===== 映像カード ===== */
.sb-media-card {
	flex: 0 1 300px;
	min-width: 210px;
	max-width: 300px;
}

.sb-media-card__clip {
	animation: hClipUp 1.4s .9s cubic-bezier(.77, 0, .18, 1) both;
}

.sb-media-card__float {
	animation: sbFloatTop 9s ease-in-out infinite;
	box-shadow: 0 40px 84px rgba(0, 0, 0, .5);
}

.sb-media-card__img {
	width: 100%;
	height: min(456px, 52vh);
	object-fit: cover;
	display: block;
	background: var(--sb-ink);
}

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

.sb-media-card__bay {
	color: var(--sb-sage);
	white-space: nowrap;
}

.sb-media-card__installed {
	text-align: right;
	margin-top: 18px;
	animation: hFade 1.2s 1.7s both;
}

.sb-media-card__installed-label {
	letter-spacing: .24em;
	color: rgba(244, 242, 236, .55);
}

.sb-media-card__installed-name {
	font-family: var(--sb-font-serif);
	font-size: 16px;
	margin-top: 8px;
	color: var(--sb-paper);
}

/* ===== スクロールキュー ===== */
.sb-scroll-cue {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 56px 22px;
	animation: hFade 1.4s 2.1s both;
	flex: none;
}

.sb-scroll-cue__track {
	width: 1px;
	height: 44px;
	background: rgba(244, 242, 236, .3);
	overflow: hidden;
	position: relative;
}

.sb-scroll-cue__dot {
	position: absolute;
	inset: 0;
	background: var(--sb-sage);
	animation: hCue 2.6s ease-in-out infinite;
}

.sb-scroll-cue__label {
	letter-spacing: .26em;
	color: rgba(244, 242, 236, .55);
}

/* ===== 3カラム要点 ===== */
.sb-pillars {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: rgba(244, 242, 236, .16);
	border-top: 1px solid rgba(244, 242, 236, .16);
	animation: hFade 1.4s 1.9s both;
	flex: none;
}

.sb-pillars__item {
	background: rgba(8, 12, 7, .74);
	padding: 22px 40px;
	color: var(--sb-paper);
}

.sb-pillars__item:first-child {
	padding: 22px 56px;
}

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

.sb-pillars__text {
	font: 300 12.5px/1.9 var(--sb-font-sans);
	margin-top: 9px;
	color: rgba(244, 242, 236, .86);
}

/* =========================================================================
   ヒーローの下に続く4セクション（2026-08-24 追加）

   それまでトップはヒーロー → マーキー → フッターで、スクロールしても
   製品・実績・問い合わせ導線が何も出てこなかった。
   配色は既存ページと同じ明暗の交互（ISSUE=ink / SOLUTION=paper /
   PROOF=charcoal / CTA=paper）。余白・見出し・eyebrow の型は
   page-sustainability.css の .sb-sproblem / .sb-scta に揃えている。
   ========================================================================= */

/* 4セクション共通の見出し（eyebrow＋見出しを baseline で並べる型） */
.sb-tissue__head,
.sb-tsol__head,
.sb-tproof__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.sb-tissue__title,
.sb-tsol__title,
.sb-tproof__title {
	margin: 0;
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.5;
	min-width: 0;
	max-width: 24em;
}

/* ===== ISSUE（打席マットの現実） ===== */
.sb-tissue {
	background: var(--sb-ink);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-tissue__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 0;
	margin-top: 48px;
	/*
	 * ISSUE は2項目（3項目めは環境ページと重複するため落とした）。1fr のままだと
	 * 1344px の器を2等分して1列 672px になり、本文（上限 30em ≒ 390px）に対して
	 * 列が広すぎて間延びして見えた（2026-08-24 実測）。SOLUTION の3項目が1列
	 * 448px でちょうど埋まっているので、それに近い幅に収まる上限を置く。
	 * 3項目に戻した場合も1列 333px で成立する。
	 *
	 * 2026-09-17 追記: 器が --sb-pad-inline の導入で 1344px → 1200px に変わり、
	 * 2等分しても 672px ではなく 600px になった。間延びの度合いは当時より
	 * 小さいが、本文の上限が 30em（約390px）である以上、列を広げても文字は
	 * 広がらず列内の余白が増えるだけなので 1000px を維持する（河村判断）。
	 *
	 * この節は他セクション（1200px）より狭いため「右が空いている／崩れている」
	 * ように見えることがあるが、意図的なもの。auto-fit の余った列は幅0に
	 * 潰れており、項目は器の右端まで届いている（死角0px を実測で確認済み）。
	 * 幅を変える判断をするまで、ここを「不具合」として直さないこと。
	 */
	max-width: 1000px;
}

.sb-tissue__item {
	/* min-width:0 が必須。Grid アイテムの既定 min-width:auto だと、長い日本語で
	   トラックが内容の最小幅まで広がり、body の overflow-x:hidden で右側が
	   クリップされる。 */
	min-width: 0;
	padding: 30px;
	border-top: 1px solid rgba(244, 242, 236, .28);
}

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

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

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

.sb-tissue__item-text {
	margin: 12px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .8);
	max-width: 30em;
}

.sb-tissue__item-note {
	margin-top: 16px;
	color: var(--sb-sage);
	letter-spacing: .18em;
	line-height: 1;
}

.sb-tissue__more {
	margin: 40px 0 0;
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	font: 300 13px/2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .72);
}

.sb-tissue__more-link,
.sb-tsol__more-link {
	color: var(--sb-sage);
	font-size: 12.5px;
	letter-spacing: .06em;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.sb-tissue__more-link:hover,
.sb-tissue__more-link:focus-visible,
.sb-tsol__more-link:hover,
.sb-tsol__more-link:focus-visible {
	border-bottom-color: currentColor;
}

/* ===== SOLUTION（SHIBAHUがすること） ===== */
.sb-tsol {
	background: var(--sb-paper);
	color: var(--sb-charcoal);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-tsol__lead {
	margin: 26px 0 0;
	font: 300 14px/2.2 var(--sb-font-sans);
	color: #3c3a32;
	max-width: 34em;
}

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

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

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

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

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

.sb-tsol__item-text {
	margin: 12px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: #5b564a;
	max-width: 30em;
}

.sb-tsol__more {
	margin-top: 40px;
}

.sb-tsol__more-link {
	color: var(--sb-green-dark);
}

/* ===== PROOF（導入と実績） ===== */
.sb-tproof {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-tproof__body {
	display: grid;
	/*
	 * 左（導入施設＝稼働状況の2行）と右（ニュース・メディア4件）で分量が違うので、
	 * 等分ではなく右を広く取る。等分だと左列の下に大きな空白が残った（実測）。
	 * 狭い画面では下の @media で1カラムに落とす。
	 */
	grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
	gap: 48px;
	margin-top: 52px;
}

.sb-tproof__col {
	min-width: 0;
	padding-top: 26px;
	border-top: 1px solid rgba(244, 242, 236, .28);
}

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

.sb-tproof__status {
	margin: 18px 0 0;
	font: 300 13.5px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .84);
	max-width: 30em;
}

.sb-tproof__facilities {
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sb-tproof__facility {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(244, 242, 236, .12);
}

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

.sb-tproof__facility-timing {
	color: var(--sb-sage);
	letter-spacing: .18em;
	line-height: 1;
}

.sb-tproof__news {
	margin: 20px 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sb-tproof__news-item {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(244, 242, 236, .12);
}

.sb-tproof__news-tag {
	color: var(--sb-sage);
	letter-spacing: .18em;
	line-height: 1;
	flex: none;
}

.sb-tproof__news-title {
	font: 300 13px/1.9 var(--sb-font-sans);
	color: rgba(244, 242, 236, .86);
	min-width: 0;
}

.sb-tproof__news-title--link {
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}

.sb-tproof__news-title--link:hover,
.sb-tproof__news-title--link:focus-visible {
	color: var(--sb-paper);
	border-bottom-color: currentColor;
}

.sb-tproof__link {
	display: inline-block;
	margin-top: 24px;
	color: var(--sb-sage);
	font-size: 12.5px;
	letter-spacing: .06em;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}

.sb-tproof__link:hover,
.sb-tproof__link:focus-visible {
	border-bottom-color: currentColor;
}

.sb-tproof__note {
	margin: 40px 0 0;
	font: 300 11.5px/1.9 var(--sb-font-sans);
	color: rgba(244, 242, 236, .62);
	max-width: 48em;
}

/* ===== CTA（自施設の条件で収益シミュレーションを見る） ===== */
.sb-tcta {
	background: var(--sb-paper);
	color: var(--sb-charcoal);
	padding: 104px var(--sb-pad-inline);
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 44px;
	flex-wrap: wrap;
}

.sb-tcta__copy {
	min-width: 0;
}

.sb-tcta__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.5;
	max-width: 20em;
}

.sb-tcta__lead {
	margin: 22px 0 0;
	font: 300 13.5px/2.1 var(--sb-font-sans);
	color: #5b564a;
	max-width: 34em;
}

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

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

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

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

/* ===== レスポンシブ =====
   デモは単一ビューポート想定でメディアクエリを持たないが、ヒーロー本文の
   横並び（コピー＋映像カード）は幅が狭いと破綻するため、layout.css と同じ
   ブレークポイント（900px / 560px）で最小限の調整を行う。 */
@media (max-width: 900px) {
	.sb-hero__body {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 24px 40px;
		gap: 40px;
	}

	.sb-hero__copy {
		max-width: none;
	}

	.sb-media-card {
		max-width: 320px;
		width: 100%;
	}

	.sb-scroll-cue {
		padding-left: 24px;
		padding-right: 24px;
	}

	.sb-pillars__item,
	.sb-pillars__item:first-child {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* 追加4セクション（2026-08-24）。他ページと同じ 24px の左右余白に落とす。 */
	.sb-tissue,
	.sb-tsol,
	.sb-tproof,
	.sb-tcta {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* 1カラムに落ちたら、項目の左右余白も外して行頭を揃える。 */
	.sb-tissue__item,
	.sb-tissue__item:first-child,
	.sb-tsol__item,
	.sb-tsol__item:first-child {
		padding-left: 0;
		padding-right: 0;
	}

	/*
	 * 本文の上限を狭い画面向けに上書きする。em 基準のままだと 30em（約390px）が
	 * ビューポート幅とほぼ同じで制約として働かず、逆に広い画面では効きすぎる。
	 * min(100%, ○em) で「狭い画面では親いっぱい・広い画面では読みやすい字詰め」
	 * の両方を満たす（導入案内ページで同じ問題を実測して確立した書き方）。
	 */
	.sb-tissue__item-text,
	.sb-tsol__item-text,
	.sb-tproof__status,
	.sb-tcta__lead,
	.sb-tsol__lead {
		max-width: min(100%, 34em);
	}

	.sb-tissue__title,
	.sb-tsol__title,
	.sb-tproof__title,
	.sb-tcta__title {
		max-width: min(100%, 20em);
	}

	.sb-tproof__body {
		grid-template-columns: 1fr;
		gap: 36px;
	}
}

@media (max-width: 560px) {
	.sb-pillars {
		grid-template-columns: 1fr;
	}

	.sb-stats {
		gap: 32px;
	}
}