/* ビジョンページ固有のスタイル。
   設計書 docs/superpowers/specs/2026-09-07-vision-page-design.md
   寸法はデザインカンバス（Vision Page.dc.html）の SPEC パネルに従う。
   セクション上下 128px / 見出し→本文 32px / 本文→ブロック 56〜72px /
   カード padding 28〜36px / キャッチ 76px / h2 38〜44px lh1.6 /
   リード 16px lh2.1 / 本文 15px lh2.15 / ラベル 11〜12px mono ls.18em

   クラス名は衝突しないよう sb-v* 接頭辞で統一する（他ページ用のスタイルには一切触れない）。
   sb-vhero / sb-vwhy / sb-vprob / sb-vsol / sb-vfact / sb-vfut / sb-vstr / sb-vmis / sb-vjoin */

:root {
	/* 人工芝のグレー。原から受領した循環図の実装で1色だけ追加されたもの。
	   既存トークンに中間グレーが無いため、このページ限りのローカル値として持つ
	   （デザイントークンの値は変更しないという規約のため tokens.css には入れない）。 */
	/* 原の指定した図の中間グレー。SVG の線と枠に使う（図形は 3:1 規定）。 */
	--sb-vsol-gray: #8b8f86;
	/* 同じ役割を文字で出すとき用。#8b8f86 は paper 上で 2.94 しかないため
	   文字だけ暗くする。#686c64 で 4.79（2026-09-08 実測）。 */
	--sb-vsol-gray-text: #686c64;
}

/* ===== 共通 ===== */
/* 2カラム（ラベル列 220px ＋ gap 40px）。本文の最大幅は 720px。 */
.sb-vwhy__inner,
.sb-vprob__inner,
.sb-vsol__inner,
.sb-vfact__inner,
.sb-vfut__inner,
.sb-vstr__inner,
.sb-vmis__inner,
.sb-vjoin__inner {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 40px;
	max-width: 1240px;
	margin: 0 auto;
	/* ここは --sb-pad-inline を使わない。この器は max-width + margin:auto で
	   既に中央寄せになっており、両方を効かせると内側の余白が二重に効いて
	   本文が不要に痩せる（2026-09-17 に実測して戻した）。 */
	padding: 128px 48px;
}

/* grid の子は既定で min-width:auto になり、中身（900px の循環図）に合わせて
   カラムが広がってページ全体が横スクロールする（2026-09-08 実測で 924px になった）。
   min-width:0 を与えてカラムを親幅に収め、横スクロールは図の枠の中だけで起こす。 */
.sb-vwhy__main,
.sb-vprob__main,
.sb-vsol__main,
.sb-vfact__main,
.sb-vfut__main,
.sb-vstr__main,
.sb-vmis__main,
.sb-vjoin__main {
	min-width: 0;
}

.sb-vwhy__aside,
.sb-vprob__aside,
.sb-vsol__aside,
.sb-vfact__aside,
.sb-vfut__aside,
.sb-vstr__aside,
.sb-vmis__aside,
.sb-vjoin__aside {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}

.sb-vwhy__no,
.sb-vprob__no,
.sb-vsol__no,
.sb-vfact__no,
.sb-vfut__no,
.sb-vstr__no,
.sb-vmis__no,
.sb-vjoin__no {
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vwhy__eyebrow,
.sb-vprob__eyebrow,
.sb-vsol__eyebrow,
.sb-vfact__eyebrow,
.sb-vfut__eyebrow,
.sb-vstr__eyebrow,
.sb-vmis__eyebrow,
.sb-vjoin__eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
}

.sb-vwhy__title,
.sb-vprob__title,
.sb-vsol__title,
.sb-vfact__title,
.sb-vfut__title,
.sb-vstr__title,
.sb-vmis__title,
.sb-vjoin__title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: clamp(26px, 2.7vw, 38px);
	line-height: 1.6;
	letter-spacing: .03em;
}

.sb-vwhy__lead,
.sb-vprob__lead,
.sb-vsol__lead,
.sb-vfact__lead,
.sb-vfut__lead,
.sb-vmis__lead,
.sb-vjoin__lead {
	margin: 32px 0 0;
	max-width: 720px;
	font: 300 16px/2.1 var(--sb-font-sans);
}

/* ===== 01 KEY VISION ===== */
.sb-vhero {
	position: relative;
	background: var(--sb-ink);
	color: var(--sb-paper);
	overflow: hidden;
}

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

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

.sb-vhero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(8, 12, 7, .95) 0%, rgba(8, 12, 7, .78) 52%, rgba(8, 12, 7, .42) 88%);
}

.sb-vhero__body {
	position: relative;
	max-width: 1240px;
	margin: 0 auto;
	padding: 128px 48px 116px;
}

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

.sb-vhero__title {
	margin: 30px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 400;
	font-size: clamp(34px, 5.3vw, 76px);
	line-height: 1.42;
	letter-spacing: .02em;
	max-width: 22ch;
	animation: hFade 1.2s .35s both;
}

.sb-vhero__title-en {
	margin: 18px 0 0;
	font: 11px/1.8 var(--sb-font-mono);
	letter-spacing: .16em;
	color: rgba(244, 242, 236, .72);
	animation: hFade 1.2s .5s both;
}

.sb-vhero__divider {
	width: 56px;
	height: 1px;
	margin: 34px 0 0;
	background: var(--sb-green);
	animation: hFade 1.2s .6s both;
}

.sb-vhero__lead {
	margin: 26px 0 0;
	max-width: 620px;
	font: 300 15px/2.15 var(--sb-font-sans);
	color: rgba(244, 242, 236, .88);
	animation: hFade 1.2s .7s both;
}

/* ===== 02 WHY GRASS ===== */
.sb-vwhy__grid {
	margin: 64px 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 36px 40px;
}

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

.sb-vwhy__item-no {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vwhy__item-title {
	margin: 10px 0 0;
	font: 700 17px/1.6 var(--sb-font-sans);
}

.sb-vwhy__item-text {
	margin: 10px 0 0;
	font: 300 13.5px/1.95 var(--sb-font-sans);
	color: rgba(20, 21, 15, .72);
}

.sb-vwhy__close {
	margin: 56px 0 0;
	max-width: 720px;
	padding-left: 24px;
	border-left: 2px solid var(--sb-green);
	font: 300 16px/2.1 var(--sb-font-sans);
}

/* ===== 03 THE PROBLEM ===== */
.sb-vprob__grid {
	margin: 56px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sb-vprob__item {
	background: rgba(20, 21, 15, .035);
	border: 1px solid rgba(20, 21, 15, .12);
	padding: 28px;
}

.sb-vprob__item-tag {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vprob__item-title {
	margin: 14px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
}

.sb-vprob__item-text {
	margin: 12px 0 0;
	font: 300 13.5px/1.95 var(--sb-font-sans);
	color: rgba(20, 21, 15, .72);
}

.sb-vprob__body {
	margin: 56px 0 0;
	max-width: 720px;
}

.sb-vprob__text {
	margin: 0;
	font: 300 15px/2.15 var(--sb-font-sans);
}

.sb-vprob__text + .sb-vprob__text {
	margin-top: 28px;
}

.sb-vprob__text--strong {
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.8;
}

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

/* ===== 04 CORE SOLUTION（循環図） ===== */
/* 原から受領した実装（vision-page-design/index.html）の style を写したもの。
   図の縦横比・ラベル位置・矢印座標は原の値をそのまま使う（依頼 A-2）。 */
.sb-vsol__figscroll {
	margin: 56px 0 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sb-vsol__fig {
	position: relative;
	width: 100%;
	aspect-ratio: 1600 / 893;
}

.sb-vsol__fig img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.sb-vsol__fig svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sb-vsol__lbl {
	position: absolute;
	transform: translateX(-50%);
	text-align: center;
	white-space: nowrap;
}

.sb-vsol__lbl-n {
	display: block;
	font: 11px/1 var(--sb-font-mono);
	letter-spacing: .14em;
	color: var(--sb-green-dark);
}

.sb-vsol__lbl-t {
	display: block;
	margin-top: 2px;
	font: 700 15px/1.5 var(--sb-font-sans);
	letter-spacing: .04em;
	color: var(--sb-charcoal);
}

.sb-vsol__lbl-s {
	display: block;
	margin-top: 1px;
	font: 300 11px/1.5 var(--sb-font-sans);
	color: rgba(20, 21, 15, .62);
}

.sb-vsol__rlbl {
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.sb-vsol__rlbl-n {
	font: 11px/1 var(--sb-font-mono);
	letter-spacing: .14em;
	color: var(--sb-sage);
}

.sb-vsol__rlbl-t {
	font: 700 15px/1.5 var(--sb-font-sans);
	letter-spacing: .04em;
	color: var(--sb-paper);
}

.sb-vsol__rlbl-s {
	font: 300 11.5px/1.5 var(--sb-font-sans);
	color: rgba(244, 242, 236, .75);
}

/* スワイプの案内とテキストリストはモバイルだけで出す。 */
.sb-vsol__swipe,
.sb-vsol__steps {
	display: none;
}

.sb-vsol__legend {
	margin: 28px 0 0;
	display: flex;
	gap: 40px;
	align-items: flex-start;
	border-top: 1px solid rgba(20, 21, 15, .16);
	padding-top: 18px;
}

.sb-vsol__lg {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.sb-vsol__sw {
	margin-top: 7px;
	flex: 0 0 auto;
}

.sb-vsol__lg-title {
	display: block;
	font: 700 13px/1.6 var(--sb-font-sans);
}

.sb-vsol__lg-text {
	display: block;
	margin-top: 2px;
	font: 300 12px/1.7 var(--sb-font-sans);
	color: rgba(20, 21, 15, .66);
}

.sb-vsol__cols {
	margin: 64px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

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

.sb-vsol__col-en {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vsol__col-title {
	margin: 8px 0 0;
	font: 700 17px/1.6 var(--sb-font-sans);
}

.sb-vsol__col-text {
	margin: 10px 0 0;
	font: 300 13.5px/1.95 var(--sb-font-sans);
}

.sb-vsol__close {
	margin: 56px 0 0;
	max-width: 760px;
	font: 300 16px/2.1 var(--sb-font-sans);
}

.sb-vsol__close-strong {
	display: block;
	margin: 14px 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: .03em;
}

/* ===== 05 WHERE WE ARE（事実） ===== */
.sb-vfact__badge {
	margin-top: 6px;
	padding: 5px 9px;
	border: 1px solid var(--sb-green);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--sb-green-dark);
}

.sb-vfact__table {
	margin: 56px 0 0;
	border-top: 1px solid rgba(20, 21, 15, .16);
}

.sb-vfact__row {
	display: grid;
	grid-template-columns: 120px 1fr 96px;
	gap: 24px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid rgba(20, 21, 15, .16);
}

.sb-vfact__row-label {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
	padding-top: 4px;
}

.sb-vfact__row-text {
	margin: 0;
	font: 300 14.5px/1.95 var(--sb-font-sans);
}

.sb-vfact__row-value {
	font: 9px/1.6 var(--sb-font-mono);
	letter-spacing: .16em;
	text-align: right;
	color: rgba(20, 21, 15, .62);
	padding-top: 4px;
}

.sb-vfact__close {
	margin: 40px 0 0;
	max-width: 720px;
	font: 300 15px/2.15 var(--sb-font-sans);
	color: rgba(20, 21, 15, .78);
}

/* ===== 06 WHAT OPENS UP（構想・背景を反転） ===== */
/* このセクションだけ背景が ink。共通の __no ルール（green-dark）は ink 上で
   コントラスト 2.48 しかないため、sage（9.87）で上書きする。2026-09-08 実測。 */
.sb-vfut__no {
	color: var(--sb-sage);
}

/* 05 が「事実」でここが「構想」であることを、見た瞬間に区別できるようにする（依頼 A-4）。 */
.sb-vfut {
	background: var(--sb-ink);
	color: var(--sb-paper);
}

.sb-vfut__eyebrow {
	color: rgba(244, 242, 236, .82);
}

.sb-vfut__badge {
	margin-top: 6px;
	padding: 5px 9px;
	border: 1px solid var(--sb-sage);
	font-size: 10px;
	letter-spacing: .14em;
	color: var(--sb-sage);
}

.sb-vfut__lead {
	color: rgba(244, 242, 236, .8);
}

.sb-vfut__grid {
	margin: 56px 0 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: rgba(244, 242, 236, .16);
	border: 1px solid rgba(244, 242, 236, .16);
}

.sb-vfut__item {
	background: var(--sb-ink);
	padding: 28px 20px;
}

.sb-vfut__item-no {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-sage);
}

.sb-vfut__item-title {
	margin: 14px 0 0;
	font: 700 14px/1.65 var(--sb-font-sans);
}

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

.sb-vfut__close {
	margin: 56px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.sb-vfut__close-lead {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.7;
}

.sb-vfut__close-text {
	margin: 0;
	font: 300 13.5px/2.05 var(--sb-font-sans);
	color: rgba(244, 242, 236, .78);
}

/* ===== 07 STRUCTURE ===== */
.sb-vstr__diagram {
	margin: 56px 0 0;
	border-top: 1px solid rgba(20, 21, 15, .22);
	padding-top: 24px;
}

.sb-vstr__platform-label {
	display: block;
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vstr__platform-name {
	margin: 8px 0 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 24px;
	letter-spacing: .02em;
	display: inline-block;
}

.sb-vstr__platform-text {
	margin: 6px 0 0 16px;
	display: inline-block;
	font: 300 12.5px/1.8 var(--sb-font-sans);
	color: rgba(20, 21, 15, .66);
}

.sb-vstr__projects {
	margin: 22px 0 0;
	padding-left: 22px;
	border-left: 1px solid rgba(20, 21, 15, .22);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sb-vstr__project {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 20px 24px;
}

.sb-vstr__project--live {
	background: rgba(46, 128, 71, .07);
	border: 1px solid rgba(46, 128, 71, .5);
}

/* 空枠2つ。「これから増える」ことを示す欄なので点線で空のまま残す（依頼 A-4）。 */
.sb-vstr__project--coming {
	border: 1px dashed rgba(20, 21, 15, .3);
}

.sb-vstr__project-label {
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--sb-green-dark);
}

.sb-vstr__project--coming .sb-vstr__project-label {
	/* .5 では paper 上で 3.36 しかなかった。.65 で 5.48（2026-09-08 実測）。 */
	color: rgba(20, 21, 15, .65);
}

.sb-vstr__project-name {
	margin: 0;
	font: 700 16px/1.6 var(--sb-font-sans);
	letter-spacing: .04em;
	display: inline-block;
}

.sb-vstr__project-name--empty {
	font-weight: 300;
	color: rgba(20, 21, 15, .65);
}

.sb-vstr__project-text {
	margin: 0 0 0 16px;
	display: inline-block;
	font: 300 13px/1.8 var(--sb-font-sans);
	color: rgba(20, 21, 15, .72);
}

.sb-vstr__project-badge {
	padding: 6px 12px;
	background: var(--sb-green-dark);
	color: var(--sb-paper);
	font-size: 9.5px;
	letter-spacing: .14em;
	white-space: nowrap;
}

.sb-vstr__project-badge--coming {
	background: transparent;
	border: 1px solid rgba(20, 21, 15, .3);
	color: rgba(20, 21, 15, .65);
}

.sb-vstr__close {
	margin: 40px 0 0;
	max-width: 720px;
	font: 300 15px/2.15 var(--sb-font-sans);
}

/* ===== 08 MISSION ===== */
.sb-vmis__grid {
	margin: 56px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(20, 21, 15, .22);
}

.sb-vmis__item {
	padding: 24px 28px 24px 0;
}

.sb-vmis__item + .sb-vmis__item {
	padding-left: 28px;
	border-left: 1px solid rgba(20, 21, 15, .16);
}

.sb-vmis__item-title {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.6;
}

.sb-vmis__item-text {
	margin: 10px 0 0;
	font: 300 13px/1.95 var(--sb-font-sans);
	color: rgba(20, 21, 15, .72);
}

.sb-vmis__close {
	margin: 40px 0 0;
	max-width: 720px;
	font: 300 15px/2.15 var(--sb-font-sans);
}

/* ===== 09 JOIN US ===== */
.sb-vjoin__grid {
	margin: 56px 0 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

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

.sb-vjoin__item-en {
	font-size: 10px;
	letter-spacing: .18em;
	color: var(--sb-green-dark);
}

.sb-vjoin__item-title {
	margin: 8px 0 0;
	font: 700 16px/1.6 var(--sb-font-sans);
}

.sb-vjoin__item-text {
	margin: 10px 0 0;
	font: 300 13px/1.95 var(--sb-font-sans);
	color: rgba(20, 21, 15, .72);
}

.sb-vjoin__actions {
	margin: 56px 0 0;
	display: flex;
	gap: 28px;
	align-items: center;
	flex-wrap: wrap;
}

.sb-vjoin__close {
	margin: 0;
	font-family: var(--sb-font-serif);
	font-weight: 600;
	font-size: clamp(17px, 1.7vw, 22px);
	line-height: 1.7;
}

.sb-vjoin__btn {
	display: inline-block;
	padding: 15px 30px;
	background: var(--sb-green-dark);
	color: var(--sb-paper);
	font: 500 13px/1 var(--sb-font-sans);
	letter-spacing: .08em;
	text-decoration: none;
	transition: background .25s ease;
}

.sb-vjoin__btn:hover,
.sb-vjoin__btn:focus-visible {
	background: var(--sb-green);
}

/* ===== 04 循環図の切り替え ===== */
/* 原の実装は 760px 以下を横スクロールにしていたが、中間幅（761〜1099px）では
   図が 545〜743px に縮み、ラベルの説明文どうしが重なって読めなくなる
   （2026-09-08 実測: 901px のとき図は 545px で「自社の芝生畑で育てる」が切れた）。
   カンバスのデスクトップ図は 884px で、この幅ではラベルが読める。
   図が 743px を下回る幅では縮小をやめ、900px のまま横スクロールさせる。
   ラベルは絵柄との対応で % 指定されているため、図を縮めると文字だけが相対的に
   大きくなる構造で、フォントサイズでは解決できない。 */
@media (max-width: 1099px) {
	.sb-vsol__figscroll {
		margin-top: 22px;
	}

	.sb-vsol__fig {
		width: 900px;
		margin-top: 0;
	}

	.sb-vsol__swipe {
		display: block;
		margin: 10px 0 0;
		font: 10px/1.6 var(--sb-font-mono);
		letter-spacing: .16em;
		/* .5 では 3.36 しかなかった。.65 で 5.48（2026-09-08 実測）。 */
		color: rgba(20, 21, 15, .65);
	}

	.sb-vsol__steps {
		display: grid;
		gap: 0;
		margin: 36px 0 0;
	}

	.sb-vsol__step {
		display: grid;
		grid-template-columns: 34px 1fr;
		gap: 14px;
		padding: 14px 0;
		border-top: 1px solid rgba(20, 21, 15, .16);
		align-items: start;
	}

	.sb-vsol__step:last-of-type {
		border-bottom: 1px solid rgba(20, 21, 15, .16);
	}

	.sb-vsol__step-n {
		font: 11px/1.6 var(--sb-font-mono);
		letter-spacing: .12em;
		color: var(--sb-green-dark);
		padding-top: 3px;
	}

	.sb-vsol__step-title {
		display: block;
		font: 700 15px/1.6 var(--sb-font-sans);
	}

	.sb-vsol__step-text {
		display: block;
		margin-top: 2px;
		font: 300 12.5px/1.8 var(--sb-font-sans);
		color: rgba(20, 21, 15, .66);
	}

	.sb-vsol__step--back .sb-vsol__step-n {
		color: var(--sb-green-dark);
	}

	.sb-vsol__step--dead .sb-vsol__step-n {
		color: var(--sb-vsol-gray-text);
	}

	.sb-vsol__step--dead .sb-vsol__step-title {
		color: rgba(20, 21, 15, .6);
	}

	.sb-vsol__legend {
		flex-direction: column;
		gap: 14px;
		margin-top: 22px;
	}
}

/* ===== 06 の10領域グリッド ===== */
/* 5列はカンバス（1440px）の並び。1100px を下回ると1列が 110px 程度になり、
   見出しのカタカナ語（word-break: keep-all が効いている）が折り返せずページ全体が
   横スクロールする（2026-09-08 実測: 901px で文書幅 980px）。3列に落として防ぐ。 */
@media (max-width: 1100px) {
	.sb-vfut__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ===== タブレット ===== */
@media (max-width: 900px) {
	.sb-vwhy__inner,
	.sb-vprob__inner,
	.sb-vsol__inner,
	.sb-vfact__inner,
	.sb-vfut__inner,
	.sb-vstr__inner,
	.sb-vmis__inner,
	.sb-vjoin__inner {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 88px 32px;
	}

	.sb-vwhy__aside,
	.sb-vprob__aside,
	.sb-vsol__aside,
	.sb-vfact__aside,
	.sb-vfut__aside,
	.sb-vstr__aside,
	.sb-vmis__aside,
	.sb-vjoin__aside {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		flex-wrap: wrap;
	}

	.sb-vhero__body {
		padding: 96px 32px 84px;
	}

	.sb-vprob__grid,
	.sb-vsol__cols,
	.sb-vjoin__grid {
		grid-template-columns: 1fr 1fr;
	}

	.sb-vmis__grid {
		grid-template-columns: 1fr;
	}

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

	.sb-vmis__item + .sb-vmis__item {
		padding-left: 0;
		border-left: 0;
	}

	.sb-vfut__close {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ===== モバイル ===== */
/* 循環図のブレークポイントは原の実装（index.html）の 760px に合わせる。
   図は縮小せず 900px 幅のまま横スクロールさせ、下にテキストリストを出す（依頼 A-3）。 */
@media (max-width: 760px) {
	.sb-vwhy__inner,
	.sb-vprob__inner,
	.sb-vsol__inner,
	.sb-vfact__inner,
	.sb-vfut__inner,
	.sb-vstr__inner,
	.sb-vmis__inner,
	.sb-vjoin__inner {
		padding: 64px 24px;
	}

	.sb-vhero__body {
		padding: 76px 24px 64px;
	}

	.sb-vwhy__grid,
	.sb-vprob__grid,
	.sb-vsol__cols,
	.sb-vjoin__grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sb-vfut__grid {
		grid-template-columns: 1fr 1fr;
	}

	.sb-vwhy__close,
	.sb-vprob__body,
	.sb-vfact__close,
	.sb-vstr__close,
	.sb-vmis__close {
		margin-top: 40px;
	}

	.sb-vsol__close {
		margin-top: 40px;
		font-size: 15px;
	}

	.sb-vsol__close-strong {
		font-size: 19px;
	}

	/* カンバスのモバイル版に合わせ、ラベルと値を同じ行に置き、本文を次の行に流す。 */
	.sb-vfact__row {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"label value"
			"text  text";
		gap: 10px 12px;
	}

	.sb-vfact__row-label {
		grid-area: label;
		padding-top: 0;
	}

	.sb-vfact__row-value {
		grid-area: value;
		text-align: right;
		padding-top: 0;
	}

	.sb-vfact__row-text {
		grid-area: text;
	}

	.sb-vstr__project {
		grid-template-columns: 1fr;
		gap: 10px;
		align-items: start;
	}

	.sb-vstr__project-badge {
		justify-self: start;
	}

	.sb-vstr__platform-text,
	.sb-vstr__project-text {
		display: block;
		margin-left: 0;
	}
}