/* 導入案内ページ固有のスタイル。design-source に元デモは存在しない
   （2026-08-24 の新規ページ）ため、他ページ（page-product.css / page-sustainability.css /
   page-cases.css）と同じデザイン言語（sb- 接頭辞・セクション余白104px/48px・
   sb-label 英語ラベル・Zen Old Mincho の見出し）を踏襲して新規に書き起こす。 */

/* ===== セクション見出し（ラベル＋見出し）は各セクション共通の形 ===== */
.sb-projconcept__head,
.sb-projmerit__head,
.sb-projsystem__head,
.sb-projop__head,
.sb-projsupply__head,
.sb-projprice__head,
.sb-projflow__head,
.sb-projcases__head,
.sb-projfaq__head {
	display: flex;
	align-items: baseline;
	gap: 24px;
	flex-wrap: wrap;
}

.sb-projconcept__title,
.sb-projmerit__title,
.sb-projsystem__title,
.sb-projop__title,
.sb-projsupply__title,
.sb-projprice__title,
.sb-projflow__title,
.sb-projcases__title,
.sb-projfaq__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.5;
	min-width: 0;
	/* max-width が必須。base.css の h1-h4 は word-break:keep-all と
	   overflow-wrap:break-word を持つが、それだけでは折り返しが機能しない
	   環境があることを実機検証で確認したため、他の見出し（sus-shero__title 等）と
	   同じくテキスト要素自身に明示的な max-width（ch）を指定する。 */
	max-width: 26ch;
}

/* ===== HERO（循環型ポータブル天然芝ショットマット SHIBAHUプレート） ===== */
.sb-projhero {
	position: relative;
	background: var(--sb-ink);
	color: var(--sb-paper);
	overflow: hidden;
}

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

.sb-projhero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * 縦位置（1108×1477）の写真を横長の帯（およそ 1584×636）に切るため、
	 * 見える範囲は元画像の縦 4割ほどしかない。中央（既定の 50%）だと
	 * 練習場のフェアウェイだけが写り、肝心の天然芝プレートが下端で切れる
	 * （2026-08-24 実測）。プレートと打席が入る下寄りに寄せる。
	 */
	object-position: 50% 85%;
	animation: hZoom 26s ease-out both;
}

.sb-projhero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .94) 0%, rgba(8, 12, 7, .72) 46%, rgba(8, 12, 7, .32) 84%);
}

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

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

/* 見出しの上に置く説明行（2026-08-24 レビューで見出しから格下げ）。
   「これは何か」を伝える行なので、商品名より前に、小さく置く。 */
.sb-projhero__descriptor {
	margin: 26px 0 0;
	font: 300 15px/1.9 var(--sb-font-sans);
	letter-spacing: .04em;
	color: rgba(244, 242, 236, .82);
	max-width: 34em;
}

.sb-projhero__title {
	margin: 10px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1.35;
	/* 主見出しは商品名（全角8文字相当）なので上限は em で持つ。
	   ch は明朝の日本語だと半角ぶんしかなく、実効の字詰めが読めない。 */
	max-width: 18em;
}

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

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

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

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

.sb-projhero__subcopy {
	margin: 22px 0 0;
	font-family: var(--sb-font-serif);
	/* キャッチコピーなので、リード文（15px）とは明確に差をつける。
	   17px ではリードとほぼ同寸で、ただの一文に見えていた。 */
	font-size: clamp(19px, 2vw, 24px);
	line-height: 1.7;
	letter-spacing: .02em;
	color: var(--sb-sage);
	animation: hFadeUp 1s .8s both;
	/* ch は明朝の日本語だと半角ぶんしか数えないので em で持つ
	   （docs/hara-feedback-2026-08-24.md 8節の指摘と同じ理由）。 */
	max-width: min(100%, 20em);
}

.sb-projhero__lead {
	margin: 18px 0 0;
	max-width: 46ch;
	font: 300 14.5px/2.2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .84);
	animation: hFadeUp 1s 1s both;
}

.sb-projhero__actions {
	margin-top: 36px;
	animation: hFadeUp 1s 1.2s both;
}

.sb-projhero__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 0 34px;
	/* 2026-08-24: 角が立っていて、トップ・ヘッダー・他ページの CTA（すべて
	   pill 型）と揃っていなかった。同じ 999px を指定して統一する。 */
	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-projhero__cta:hover {
	background: var(--sb-green-dark);
	color: #fff;
}

/* ===== CONCEPT（天然芝で、“ゴルフ環境のスタンダード”を敷きなおす。） ===== */
.sb-projconcept {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

/* 2026-09-17: 共通の 26ch だと「練習は人工芝」の直後で折り返し、続く
   「を、終わらせる。」が切り離されて読み下しにくくなっていた（本番実測）。
   見出しは16文字と短く、1行に収まる幅を与えれば破綻しない。 */
.sb-projconcept__title {
	max-width: min(100%, 22em);
}

/* 2026-09-17: 本文1列だけだと右半分が空白のまま残るため、本文と写真の2列にした。
   写真列は本文列よりやや狭くし（0.85fr）、左の読み物としての主従を保つ。 */
.sb-projconcept__body {
	margin-top: 44px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: 64px;
	align-items: stretch;
}

.sb-projconcept__texts {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.sb-projconcept__figure {
	margin: 0;
	min-width: 0;
	/* 本文の高さに合わせて伸ばす。単独では高さが決まらないので下限を置く。 */
	min-height: 320px;
}

.sb-projconcept__picture,
.sb-projconcept__img {
	display: block;
	width: 100%;
	height: 100%;
}

.sb-projconcept__img {
	object-fit: cover;
	object-position: center;
}

.sb-projconcept__text {
	margin: 0;
	font: 300 14.5px/2.3 var(--sb-font-sans);
	color: #3c3a32;
	/* max-width は親（.sb-projconcept__body）だけでなくテキスト要素自身にも
	   指定する（sb-projmerit__item のコメント参照）。ch 単位は書体・サイズに
	   よって実際の px 幅が大きく変わり、68ch がモバイル幅（390px）を超えて
	   一切制約にならないケースがあったため、px の上限も併記して確実に
	   ビューポート内に収める。 */
	max-width: min(68ch, 560px);
}

/* ===== MERIT（導入メリット4点） ===== */
.sb-projmerit {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-projmerit__grid {
	margin-top: 52px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1px;
	background: rgba(244, 242, 236, .14);
	border: 1px solid rgba(244, 242, 236, .14);
}

.sb-projmerit__item {
	/* min-width:0 が必須。CSS Grid のアイテムは既定で min-width:auto となり、
	   長い日本語の見出し・本文があると内容の最小サイズぶんトラックが広がり、
	   body の overflow-x:hidden（横スクロール防止の保険）で右側が見えないまま
	   クリップされる（2026-08-24、モバイル幅で実機確認して特定）。 */
	min-width: 0;
	background: var(--sb-charcoal);
	padding: 30px 26px;
}

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

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

.sb-projmerit__item-text {
	margin: 10px 0 0;
	font: 300 12.5px/2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .78);
	max-width: 32ch;
}

/* ===== SYSTEM（仕組みと仕様） ===== */
.sb-projsystem {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

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

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

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

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

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

.sb-projsystem__value {
	font-family: var(--sb-font-serif);
	font-size: 20px;
	max-width: 260px;
}

.sb-projsystem__note {
	font: 300 12px/1.9 var(--sb-font-sans);
	color: #6b6659;
	max-width: 30ch;
}

/* ===== OPERATION（既存オペレーションへの組込 ＋ 現場スタッフの作業） ===== */
.sb-projop {
	background: var(--sb-ink);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

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

.sb-projop__step {
	/* min-width:0 の理由は sb-projmerit__item のコメントを参照（flex アイテムも同じ既定値を持つ）。 */
	min-width: 0;
	flex: 1 1 180px;
	padding: 26px 24px;
	border-top: 1px solid rgba(244, 242, 236, .28);
}

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

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

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

.sb-projop__sales {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.sb-projop__sales-card {
	/* min-width:0 の理由は sb-projmerit__item のコメントを参照。 */
	min-width: 0;
	padding: 26px;
	border: 1px solid rgba(244, 242, 236, .24);
	background: rgba(244, 242, 236, .04);
}

.sb-projop__sales-card--proposal {
	border-style: dashed;
	background: transparent;
}

.sb-projop__sales-tag {
	display: inline-block;
	letter-spacing: .2em;
	color: var(--sb-sage);
}

.sb-projop__sales-text {
	margin: 14px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .82);
	max-width: 34ch;
}

.sb-projop__tasks {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid rgba(244, 242, 236, .2);
}

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

.sb-projop__tasks-list {
	margin-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 1px;
	background: rgba(244, 242, 236, .14);
}

.sb-projop__task {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	background: var(--sb-ink);
	flex-wrap: wrap;
}

.sb-projop__task-label {
	font-size: 13px;
}

.sb-projop__task-value {
	font-family: var(--sb-font-serif);
	font-size: 14.5px;
	color: var(--sb-sage);
	max-width: 24ch;
}

.sb-projop__disclaimer,
.sb-projop__note {
	margin: 18px 0 0;
	font: 300 12px/1.9 var(--sb-font-sans);
	color: rgba(244, 242, 236, .6);
	max-width: 48ch;
}

/* ===== SUPPLY（なぜ全て対応できるか） ===== */
.sb-projsupply {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

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

.sb-projsupply__cycles {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
}

.sb-projsupply__cycle {
	/* min-width:0 の理由は sb-projmerit__item のコメントを参照。 */
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	border: 1px solid rgba(20, 21, 15, .14);
}

.sb-projsupply__cycle-label {
	font: 9.5px/1 var(--sb-font-mono);
	letter-spacing: .18em;
	color: #6b6659;
}

.sb-projsupply__cycle-value {
	font-family: var(--sb-font-serif);
	font-size: 20px;
	color: var(--sb-green-dark);
	max-width: 24ch;
}

/* ===== PRICE（料金体系） ===== */
.sb-projprice {
	background: var(--sb-charcoal);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-projprice__table {
	margin-top: 44px;
	border-top: 1px solid rgba(244, 242, 236, .18);
}

.sb-projprice__row {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 0;
	border-bottom: 1px solid rgba(244, 242, 236, .14);
	flex-wrap: wrap;
}

.sb-projprice__label {
	/* min-width:0 の理由は sb-projmerit__item のコメントを参照（flex アイテムも同じ既定値を持つ）。 */
	min-width: 0;
	font-size: 13.5px;
	color: rgba(244, 242, 236, .7);
	max-width: 20ch;
}

.sb-projprice__value {
	min-width: 0;
	font-family: var(--sb-font-serif);
	font-size: 16px;
	text-align: right;
	/*
	 * 上限は em で持つ。`ch`（数字 0 の幅）は明朝の日本語だとおよそ半角ぶんしかなく、
	 * 32ch ≒ 16em ≒ 256px にしかならない。「個別見積（施設の規模と打席数に応じて算出）」
	 * は全角22文字で約352px 必要なので、32ch では必ず折り返して
	 * 右揃えのまま「出）」だけが次行に落ちた（2026-08-24 実測）。
	 * 全角基準で数えられる em に変え、狭い幅では 100% で止める。
	 */
	max-width: min(100%, 30em);
}

.sb-projprice__note {
	margin: 30px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: var(--sb-sage);
	max-width: 56ch;
}

.sb-projprice__cta-text {
	margin: 14px 0 0;
	font: 300 12.5px/2.1 var(--sb-font-sans);
	color: rgba(244, 242, 236, .66);
	max-width: 56ch;
}

/* ===== FLOW（ご利用までの流れ） ===== */
.sb-projflow {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-projflow__steps {
	margin-top: 48px;
	display: flex;
	gap: 0;
	flex-wrap: wrap;
}

.sb-projflow__step {
	min-width: 0;
	flex: 1 1 220px;
	padding: 26px 24px 26px 0;
	border-top: 1px solid rgba(20, 21, 15, .2);
}

.sb-projflow__week {
	color: var(--sb-green-dark);
	letter-spacing: .2em;
}

.sb-projflow__step-text {
	margin: 14px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: #3c3a32;
	/* 2026-08-24: 幅は既に列（.sb-projflow__step の flex 1 1 220px）が決めている。
	   そこへ 26ch を重ねると二重に絞られ、「無料現地調査＆収益シミュレーション
	   のご提出」が3行に折れて最終行が3文字だけ残っていた。列に任せる。 */
	max-width: none;
}

/* ===== CASES（導入施設） ===== */
.sb-projcases {
	background: var(--sb-ink);
	color: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

.sb-projcases__grid {
	margin-top: 44px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: rgba(244, 242, 236, .14);
	border: 1px solid rgba(244, 242, 236, .14);
}

.sb-projcases__item {
	/* min-width:0 の理由は sb-projmerit__item のコメントを参照。 */
	min-width: 0;
	background: var(--sb-ink);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

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

.sb-projcases__item-type {
	font: 9px/1 var(--sb-font-mono);
	letter-spacing: .16em;
	color: var(--sb-sage);
}

.sb-projcases__item-loc {
	font: 300 12px/1.6 var(--sb-font-sans);
	color: rgba(244, 242, 236, .66);
}

.sb-projcases__empty {
	margin-top: 44px;
	font: 300 13px/2 var(--sb-font-sans);
	color: rgba(244, 242, 236, .6);
}

.sb-projcases__note {
	margin: 30px 0 0;
	font: 300 12px/1.9 var(--sb-font-sans);
	color: rgba(244, 242, 236, .6);
	max-width: 56ch;
}

.sb-projcases__link {
	display: inline-flex;
	margin-top: 18px;
	color: var(--sb-sage);
	font-size: 13px;
	letter-spacing: .04em;
}

/* ===== FAQ（よくあるご質問） ===== */
.sb-projfaq {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
}

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

/* 2026-09-17: 72ch だと罫線が画面の左6割で切れ、右が空白のまま残っていた。
   このページの他セクション（MERIT・SYSTEM・FLOW）は auto-fit グリッドで
   器の幅いっぱいを使うため、FAQ だけが途中で切れて浮いて見える。
   幅の上限を外して他セクションと同じ器に揃える。 */
.sb-projfaq__list {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
}

.sb-projfaq__item {
	border-top: 1px solid rgba(20, 21, 15, .18);
	padding: 22px 0;
}

.sb-projfaq__item:last-child {
	border-bottom: 1px solid rgba(20, 21, 15, .18);
}

.sb-projfaq__question {
	cursor: pointer;
	list-style: none;
	font-size: 14.5px;
	font-weight: 400;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.sb-projfaq__question::-webkit-details-marker {
	display: none;
}

.sb-projfaq__question::after {
	content: '+';
	font-family: var(--sb-font-serif);
	font-size: 20px;
	color: var(--sb-green-dark);
	flex: none;
}

.sb-projfaq__item[open] .sb-projfaq__question::after {
	content: '－';
}

.sb-projfaq__answer {
	margin: 16px 0 0;
	font: 300 13px/2.1 var(--sb-font-sans);
	color: #5b564a;
	max-width: 60ch;
}

/* ===== CTA ===== */
/* 2026-09-17: 見出しが 44px まで育ってページ内のどの見出しより大きくなり、
   さらに flex-end での space-between で見出しとボタンが画面の両端に離れて
   いた（本番実測）。見出しの上限を他セクションの見出し（40px）より小さい
   34px に下げ、ベースラインではなく中央で揃えて一組に見せる。 */
.sb-projcta {
	background: var(--sb-paper);
	padding: 104px var(--sb-pad-inline);
	display: flex;
	align-items: center;
	/* space-between だと器の左右両端に離れ、見出しとボタンの間が 430px ほど
	   空いて別々の要素に見えた（2026-09-17 実測）。左詰めにして隣り合わせ、
	   「相談してください → ここを押す」の視線を途切れさせない。 */
	justify-content: flex-start;
	gap: 28px 72px;
	flex-wrap: wrap;
}

.sb-projcta__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.5;
}

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

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

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

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

/* ===== レスポンシブ（layout.css / page-product.css と同じブレークポイント） ===== */
@media (max-width: 900px) {
	.sb-projconcept,
	.sb-projmerit,
	.sb-projsystem,
	.sb-projop,
	.sb-projsupply,
	.sb-projprice,
	.sb-projflow,
	.sb-projcases,
	.sb-projfaq,
	.sb-projcta {
		padding-left: 24px;
		padding-right: 24px;
	}

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

	/* CONCEPT の2列（本文＋写真）は横に並べる余地が無くなるので縦に積む。
	   写真は下に回し、読み物としての本文を先に読ませる。 */
	.sb-projconcept__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.sb-projconcept__figure {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	/* 検証環境（ヘッドレスChromeでのスクリーンショット確認）で、長い日本語文が
	   折り返されずビューポート外へそのままはみ出す現象を確認した
	   （2026-08-24）。product-indoor.php 等の既存グリッドでも、十分に長い文字列
	   （検証用に一時的に差し替えて確認）では同条件で再現するため、grid/flex
	   固有の不具合ではなく、テキスト要素自身に「ビューポート幅より明確に
	   小さいことが保証された max-width」が無い場合に起きる、より広い条件の
	   現象だと分かった。ch 単位は書体・サイズによって実際の px 幅が変わり、
	   数値によってはモバイル幅（390px）でも制約として働かないことがあったため、
	   本ページの本文テキスト要素には下記でモバイル用に px 単位の
	   max-width を明示的に指定し直す。念のため display も
	   grid/flex から block の縦積みに切り替える。 */
	.sb-projmerit__grid,
	.sb-projcases__grid {
		display: block;
		background: none;
		border: none;
	}

	.sb-projmerit__item,
	.sb-projcases__item {
		display: block;
		border-bottom: 1px solid rgba(244, 242, 236, .14);
	}

	.sb-projcases__item-type,
	.sb-projcases__item-loc {
		display: block;
		margin-top: 8px;
	}

	.sb-projop__sales,
	.sb-projsupply__cycles {
		display: block;
	}

	.sb-projop__sales-card,
	.sb-projsupply__cycle {
		display: block;
		margin-bottom: 16px;
	}

	.sb-projsupply__cycle-value {
		display: block;
		margin-top: 10px;
	}

	.sb-projop__steps,
	.sb-projflow__steps,
	.sb-projop__tasks-list,
	.sb-projop__task,
	.sb-projprice__row {
		display: block;
	}

	.sb-projop__task {
		padding-bottom: 8px;
	}

	.sb-projprice__value {
		text-align: left;
		margin-top: 4px;
	}

	.sb-projsystem__row {
		/* grid-template-columns だけでなく display も block にする。
		   display:grid のままだと（1カラム化しても）同じ現象で
		   長い日本語文が折り返されずにはみ出すため。 */
		display: block;
		gap: 4px;
	}

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

	.sb-projsystem__label,
	.sb-projsystem__value,
	.sb-projsystem__note {
		display: block;
	}

	/*
	 * 本文テキスト要素の max-width を上書きする。
	 *
	 * ch 単位のままだと書体・サイズによっては 390px を超えて制約にならない。
	 * 当初は 300px / 260px の固定値にしていたが、それだと 390px 幅で実際に
	 * 使える 342px に対して常に 42〜82px を捨てることになり、見出しが
	 * 「SHIBAHUプ／レート」のように1文字だけ次行へ落ちていた（2026-08-24 実測）。
	 *
	 * `min(100%, ○em)` にすれば、狭い画面では 100%（＝親の幅なのではみ出さない）、
	 * 広い画面では em 基準の読みやすい字詰めで止まる。このメディアクエリは
	 * 900px 以下＝タブレットも含むため、100% だけにすると本文が 850px 幅まで
	 * 伸びて読みづらくなる。両方を満たすのが min()。
	 */
	.sb-projconcept__text,
	.sb-projsupply__text,
	.sb-projop__sales-text,
	.sb-projop__note,
	.sb-projop__disclaimer,
	.sb-projprice__note,
	.sb-projprice__cta-text,
	.sb-projcases__note,
	.sb-projfaq__answer {
		max-width: min(100%, 34em);
	}

	.sb-projmerit__item-text,
	.sb-projsystem__value,
	.sb-projsystem__note,
	.sb-projop__task-value,
	.sb-projsupply__cycle-value,
	.sb-projprice__label,
	.sb-projprice__value,
	.sb-projflow__step-text {
		max-width: min(100%, 26em);
	}

	.sb-projconcept__title,
	.sb-projmerit__title,
	.sb-projsystem__title,
	.sb-projop__title,
	.sb-projsupply__title,
	.sb-projprice__title,
	.sb-projflow__title,
	.sb-projcases__title,
	.sb-projfaq__title,
	.sb-projcta__title,
	.sb-projhero__title,
	.sb-projhero__lead {
		max-width: min(100%, 20em);
	}
}

@media (max-width: 560px) {
	/* .sb-projop__steps と .sb-projflow__steps は900px以下で既に display:block
	   にしている（上の @media (max-width: 900px) を参照）ため、
	   ここでの flex-direction:column の指定は不要（block では意味を持たない）。 */
	.sb-projop__step {
		border-top: 1px solid rgba(244, 242, 236, .28);
	}

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

	.sb-projflow__step {
		padding-right: 0;
	}

	.sb-projcta {
		flex-direction: column;
		align-items: flex-start;
	}
}