@charset "UTF-8";
/* ===== 2026-09-28 コスト最適化ページ：レイアウト作り直し（試作） =====
 *
 * 対象は 9/28〜9/29 は投稿2990（/solution/cost-optimization/）1ページのみ。2026-09-30 からカテゴリ solution／service／case の
 * 詳細投稿19本（岡田さん「コスト最適化の動きを、まずコーポレートサイトで横展開してほしい。」「動きというか、同じ構成にしてほしい」）。
 * 読み込み条件・経緯は inc/solution-scenes.php（9/29 に functions.php から移設）冒頭のコメントを参照。
 * 下の値（低い窓のしきい値など）は 2990 で測ったもの。他の18本では測っていない。
 * 本文（DB）は変更していない。ここは見た目（レイアウト・配色）の作り直しだけ。
 *
 * 2026-09-30（固定ページ12本）岡田さん（原文）：
 * 「このページも同じ構成でいいと思うけど、どう？」「開いた時は動画じゃなくて画像でもいいと思う。」
 * 「全部やってしまってよいよ。たぶんそうするべきで、そうした後で課題は解決すべきと思う。」
 * → COMPANY／RESOURCES 配下の固定ページ12本にもこのファイルを共用する（body.gasp-scenes-page）。追加は末尾の「12. 固定ページ」節だけ
 *   （固定ページの真ん中の見出しは h2 も来るので、h3 と同じ見た目の規則を h2 に当てる）。
 *
 * 9/28 岡田さん「ここまで動きのあるページはトップだけでいいよ。」で、いったん完全に静的なページにした
 * （レイアウトと配色の作り直しのみ。solution-scenes.js は削除済み）。
 *
 * 2026-09-29 岡田さん（原文）：
 * 「コスト最適化のページなんだけど、これをもっと高さも幅も足して、横はサイズ一杯にして、
 *  スクロールすると右半分で以下のコンテンツが流れていく構成ってできる？ ヘッダとフッタは今と変わらずで。」
 * → 設計役の比較（案A 2列グリッド／案B 全幅 sticky ヒーロー＋右半分の帯／案C 止めて解放）から案Bを採用。
 *   理由：開いた直後は全幅のヒーローだけが見え、スクロールで右半分に後続が流れる＝発言そのまま。
 *   sticky と z-index だけで JS が要らず、9/28 に設計役が置いた条件（固定は sticky のみ・空のスクロール区間を作らない・
 *   窓より背の高い要素は固定しない・GSAP/Lenis を入れない）にも合う。
 *   作り＝ヒーロー（.gs-scene--hero）を sticky で窓いっぱい（高さ 100vh−ヘッダー高）に止め、
 *   課題〜関連サービスの4節（9/29 時点の 2990。9/30 から他の投稿は 2〜6節）を包む .gs-lane（single-solution-scenes.php）を右半分の幅・不透明の地で
 *   上に重ねて流す。末尾の紺帯（.gs-scene--closing）は全幅・不透明でヒーローを覆い、その下端が
 *   窓の下端に着いた時点でヒーローは根元（.gs-scenes-root）ごと上へ抜ける＝フッターは今のまま入る。
 *   spacer も負マージンも JS も無し（sticky が止まっている間、通常フローの弟要素はその上を通る）。
 *
 * 767px 以下と印刷では sticky も帯も効かない（1b 節が @media screen and (min-width:768px) の中にあるため）＝
 * ヒーロー static・帯は全幅の 9/28 の静的な形。末尾の @media print は動画を消すだけ。
 *
 * 親テーマの AOS（[data-aos]、本文が持つ aos-fade-up クラスに実行時付与される）は無効化する。
 * AOSの「動き出すまで opacity:0・クリック不可」を残さないよう常時 opacity:1 / pointer-events:auto にする
 * （top-reveal.css で使っているのと同じ手当て）。
 *
 * 2026-09-29（3列化）岡田さん（原文）：
 * 「もう一列、真ん中に列を追加して、スクロールすると最初に「よくある課題」が真ん中列に現れる。さらにスクロールすると、
 *  ストレージ費と～～とかの本文が右列に現れる。全部現れたら、中と右が上にスライドしていき、次に「当社の考え方」が真ん中に現れる。
 *  さらにスクロールするとコストは「置き方」と～～の本文が現れる。。。のサイクルを作ることはできる？」
 * → 末尾の「8. 3列」節。1025px 以上だけ：左＝sticky ヒーロー（34%）／中＝節の見出し（22%）／右＝節の本文（44%）。
 *   帯（.gs-lane）を右 66% に広げ、その中の舞台（.gs-stage）を grid-template-columns: 1fr 2fr にする。
 *   768〜1024px は1回目のまま（右半分の帯・止めない）、767px 以下と印刷は静的。
 *
 * 2026-09-29（節を足していく構成）岡田さん（原文）：
 * 「動きはいい。これだけだと、画面が殺風景すぎるので、中と右はスクロールが進むと追加される構成にしようか。
 *  上が詰まったらそのまま上に流れていく。できる？」（リードの確認への回答＝「上から順に並ぶ」）
 * → 8節を作り直し：節ごとに窓いっぱいの舞台を止める形をやめ、4節（9/30 から投稿ごとに 2〜6節）を .gs-lane > .gs-feed-wrap > .gs-feed に詰めて上から並べる。
 *   止める規則は .gs-feed-wrap.is-pinned の下だけ（入れ物 .gs-feed を sticky でヘッダー下に止め、走行区間 .gs-feed-spacer を開ける）。
 *   節の出し入れは .gs-feed-wrap.is-feed の下だけ（各節の is-head-on / is-body-on が付くまで見出し・本文を隠す）。
 *   is-pinned / is-feed / is-head-on / is-body-on はすべて assets/js/solution-scenes.js が付ける。
 *   JS が無い・失敗・止めを切った（フィルタ gasp_solution_scenes_pin_enabled = false）ときはクラスが付かず、
 *   3列のまま全部見えて流れるだけ。
 *
 * 戻し方（3段）：
 *   1) 止めと出し入れを切る＝inc/solution-scenes.php のフィルタ gasp_solution_scenes_pin_enabled を false（JS を読まない＝3列で全部見えて流れるだけ）
 *   2) 節ごとに止める形（この構成の前）へ＝退避 C:\oka\work\_claude\HP_wp\_taihi\blogsy_gasp_20260929_S4_before_feed\ の4本
 *      （inc/solution-scenes.php・single-solution-scenes.php・assets/css/solution-scenes.css・assets/js/solution-scenes.js）を戻す。
 *      さらに1回目（右半分の帯）の形へ戻すなら、退避 ...\blogsy_gasp_20260929_S2_before_three_columns\ の3本
 *      （inc/solution-scenes.php・single-solution-scenes.php・assets/css/solution-scenes.css）を戻し、assets/js/solution-scenes.js を削除
 *   3) 従来表示へ＝inc/solution-scenes.php の gasp_solution_scenes_categories() を array() にする（投稿19本。9/30 からカテゴリ指定。旧 ids() の array()。本文は無傷）。
 *      固定ページ12本（9/30〜）は別の表なので、全ページを戻すには gasp_page_scenes_pages() も array() にする（inc 冒頭の戻し方4段の4）
 *      9/30 の横展開で、汎用型 .gs-scene--section の帯の中の columns 縦積み規則（下の該当セレクタ）を足した。他の規則は 2990 のまま。
 *      この追加はリードの判断（岡田さんの回答から直接は導けない）＝理由：帯の右列（1366px で約 600px）に 3〜6 列のカードを横に並べると
 *      1列 100〜150px に潰れる。外すなら .gs-scene--section の行を5か所から消す（1b 節の中の3つの規則群＝display／flex-basis／margin-top と、
 *      8 節の2つの規則群＝display／flex-basis）
 * 9/29 の「右半分」だけ外すなら（3列化を戻したうえで）、このファイルの「1b. 全幅 sticky ヒーロー＋右半分の帯」節・その直後の「低い窓」media・
 * 下の --gs-header-h 変数ブロック・このコメントの 9/29 の段落（767px 以下・印刷の段落も）と、single-solution-scenes.php の .gs-lane 包みを削除。
 */

/* ヘッダーの実測高＝header-always-visible.css の scroll-padding-top と同じ定数を使う
 * （デスクトップ 96px／1024px 以下 116px／WP 管理バーは +32、782px 以下は +46）。
 * これは JS が無いときの既定値。3列化（9/29）で assets/js/solution-scenes.js が読み込まれるようになったので、
 * JS が動くときは #site-header の実測高で body の inline style に上書きする（リード実測：窓幅 1025〜1119px では
 * メニューが折り返してヘッダーが 141px になり、この定数 96px との差 45px だけヒーローがヘッダーの下に潜っていた）。
 * 上書きは幅に関係なく読み込み・resize・load のたびに行う（止める判定は 1025px 以上だけだが、ヘッダー高の同期は全幅）。
 * JS が無い・reduced-motion で JS が早く抜けたときは、この定数のまま（＝1025〜1119px では 45px 潜る問題が残る）。
 * header-always-visible.css の定数を変えたら、JS が無いときの既定値としてここも同じ値に直す。 */
body.gasp-scenes {
	--gs-header-h: 96px;
}
@media screen and (max-width: 1024px) {
	body.gasp-scenes { --gs-header-h: 116px; }
}
body.gasp-scenes.admin-bar {
	--gs-header-h: calc(96px + 32px);
}
@media screen and (max-width: 1024px) {
	body.gasp-scenes.admin-bar { --gs-header-h: calc(116px + 32px); }
}
@media screen and (max-width: 782px) {
	body.gasp-scenes.admin-bar { --gs-header-h: calc(116px + 46px); }
}

:root {
	--gs-navy: #141c3a;
	--gs-ink: #1c2333;
	--gs-sub: #4a5164;
	--gs-line: #dde1ea;
	--gs-panel-bg: #f6f7fa;
}

body.gasp-scenes {
	/* 2026-09-30 #fff → サイトの地の紺（corp-color.css の --pt-body-bg-color と同じ値）。経緯は末尾の「11.」節 */
	background: #141c3a;
}
body.gasp-scenes .gs-scenes-main {
	max-width: none;
	padding: 0;
	margin: 0;
}
body.gasp-scenes .gs-scenes-root {
	width: 100%;
}
body.gasp-scenes .gs-scene-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 88px 24px;
}
@media (max-width: 767px) {
	body.gasp-scenes .gs-scene-inner {
		padding: 56px 20px;
	}
}

/* 親テーマのAOSを無効化（動かない前提。「動き出すまで押せない」を残さない） */
body.gasp-scenes [data-aos] {
	opacity: 1 !important;
	transform: none !important;
	pointer-events: auto !important;
	transition-property: none !important;
}

/* 見出し・段落の親テーマ既定装飾（背景付きマーカー帯）を、この6節ではいったん解除して作り直す */
body.gasp-scenes .gs-scene h1,
body.gasp-scenes .gs-scene h2,
body.gasp-scenes .gs-scene h3,
body.gasp-scenes .gs-scene h4,
body.gasp-scenes .gs-scene p {
	background: none;
	width: auto;
	padding: 0;
	margin-top: 0;
}

/* ---------- 1. ヒーロー ---------- */
.gs-scene--hero .eye-catch-contents {
	margin: 0;
}
.gs-scene--hero .wp-block-cover {
	min-height: 100vh;
	border-radius: 0;
	display: flex;
	align-items: center;
}

/* ---------- 1b. 全幅 sticky ヒーロー＋右半分の帯（2026-09-29） ---------- */
/* 768px 以上だけ。767px 以下は single.js の動画差し込み・top-scroll.js と同じ線で「動かない」に揃える */
@media screen and (min-width: 768px) {
	body.gasp-scenes .gs-scenes-root {
		/* sticky の入れ物。overflow / transform を置かない（置くと sticky が効かなくなる） */
		position: relative;
	}
	body.gasp-scenes .gs-scene--hero {
		position: sticky;
		top: var(--gs-header-h);
		height: calc(100vh - var(--gs-header-h));
		z-index: 0;
	}
	body.gasp-scenes .gs-scene--hero .eye-catch-contents,
	body.gasp-scenes .gs-scene--hero .wp-block-cover {
		height: 100%;
		min-height: 0;
	}
	/* 文字は左半分に収める（右半分は後続の通り道）。620px は 9/28 の値＝行長の上限。
	 * cover は WP 既定で justify-content:center（flex）なので、margin-left:72px だけでは中央寄りに置かれる
	 * （9/29 実測：1366 幅で文字ブロックの左端が 417px）→ flex-start で左に寄せる */
	body.gasp-scenes .gs-scene--hero .wp-block-cover {
		justify-content: flex-start;
	}
	body.gasp-scenes .gs-scene--hero .wp-block-cover__inner-container {
		max-width: min(620px, calc(50% - 72px));
	}
	/* 右半分の帯＝課題〜関連サービスの通り道。ヒーロー（z-index:0）の上を不透明で通る */
	body.gasp-scenes .gs-lane {
		position: relative;
		z-index: 1;
		margin-left: 50%;
		width: 50%;
		/* 2026-09-30 #fff → 紺（不透明であることは変えない＝ヒーローの上を覆って通る）。経緯は末尾の「11.」節 */
		background: #141c3a;
	}
	body.gasp-scenes .gs-lane .gs-scene-inner {
		max-width: none;
		padding: 72px 48px;
	}
	/* 帯の幅（1366 で 683px）では「左見出し＋右の行」の2列が詰まるので、帯の中では見出しを上に積む。
	 * flex の column 方向にすると flex-basis:0 の列が高さ 0 に潰れる（WP コアの列指定）ため display:block で積む */
	body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-columns,
	body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-columns,
	body.gasp-scenes .gs-lane .gs-scene--section .wp-block-columns {
		display: block;
	}
	body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-columns > .wp-block-column,
	body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-columns > .wp-block-column,
	body.gasp-scenes .gs-lane .gs-scene--section .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: 100%;
	}
	body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-columns > .wp-block-column + .wp-block-column,
	body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-columns > .wp-block-column + .wp-block-column,
	body.gasp-scenes .gs-lane .gs-scene--section .wp-block-columns > .wp-block-column + .wp-block-column {
		margin-top: 24px;
	}
	/* 末尾の紺帯は全幅・不透明でヒーローを覆う（帯の地を section 自体に持たせ、中の cover の幅に依らず覆う） */
	body.gasp-scenes .gs-scene--closing {
		position: relative;
		z-index: 1;
		background: var(--gs-navy);
	}
}
/* 窓が低くヒーローの文字が「100vh−ヘッダー高」に収まらないときは sticky をやめて自然高に戻す
 * （9/28 に設計役が置いた条件「窓より背の高い要素は固定しない」を CSS で表現）。
 * しきい値＝このページ（2990）の文字ブロックの自然高＋cover の上下 padding 30px＋ヘッダー高（9/29 リード実測）：
 *   768〜1024（文字幅＝50%−72px・1回目の実測）：幅 768＝370+30+116=516 ／ 1024＝281+30+116=427 → 520
 *   1025 以上（3列化で文字幅＝34%−72px・3列化後に測り直し。ヘッダーは JS の実測値＝1025〜1119 でメニューが折り返し 141px）：
 *     幅 1025＝460+30+141=631 ／ 1119＝374+30+141=545 → 1025〜1119 は 640
 *     幅 1200＝374+30+96=500（1120 は未測定。1119 と 1200 がどちらも 374 なので間も 374 と見ている）→ 1120〜1365 は 510
 *     幅 1366＝317+30+96=443 → 1366〜1599 は 450
 *     幅 1600・1920＝256+30+96=382 → 1600 以上は 420（旧値のまま）
 * 帯の境目の間は測っていない（文字幅が広がるほど低くなる向きなので、各帯の左端の値で置いた）。
 * 帯の右端を 1119.98px などにしたのは、ブラウザのズームで CSS 幅が小数（例 1119.5px）になったときの帯の間の抜けを 0.02px まで狭めるため（9/29 点検指摘。
 * 抜けは完全には消えていない。1024/1025 の境は整数のまま＝既存の 1b 節と同じ形）。
 * 管理バー表示時はヘッダーが +32/+46px 高くなるが、しきい値には入れていない（未実測）。
 * static に落ちた側では帯は右側のままなので、帯が流れる間の左側は地の空きになる（9/30 から紺地。見え方は未確認）。
 * 文言や列の比率が変わればこの値も測り直す（他の課題ページに広げるときも同じ） */
@media screen and (min-width: 768px) and (max-width: 1024px) and (max-height: 520px),
       screen and (min-width: 1025px) and (max-width: 1119.98px) and (max-height: 640px),
       screen and (min-width: 1120px) and (max-width: 1365.98px) and (max-height: 510px),
       screen and (min-width: 1366px) and (max-width: 1599.98px) and (max-height: 450px),
       screen and (min-width: 1600px) and (max-height: 420px) {
	body.gasp-scenes .gs-scene--hero {
		position: static;
		height: auto;
	}
	body.gasp-scenes .gs-scene--hero .eye-catch-contents,
	body.gasp-scenes .gs-scene--hero .wp-block-cover {
		height: auto;
		min-height: 0;
	}
}
.gs-scene--hero .wp-block-cover__background {
	background-color: rgba(20, 28, 58, 0.5);
}
.gs-scene--hero .wp-block-cover__inner-container {
	text-align: left;
	max-width: 620px;
	width: 100%;
	margin: 0 0 0 72px;
	padding: 0 24px 0 0;
}
.gs-scene--hero h1 {
	color: #fff;
	font-size: 44px;
	line-height: 1.3;
	font-weight: 700;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
	display: block;
}
.gs-scene--hero h3 {
	color: #f0f2fa;
	font-size: 19px;
	line-height: 1.7;
	margin-top: 20px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.gs-scene--hero .eye-catch_group p {
	color: #dfe3f2;
	font-size: 15px;
	line-height: 1.9;
	margin-top: 14px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 767px) {
	.gs-scene--hero .wp-block-cover__inner-container {
		margin-left: 24px;
		max-width: none;
	}
	.gs-scene--hero h1 { font-size: 30px; }
	.gs-scene--hero h3 { font-size: 16px; }
}

/* ---------- 2. よくある課題 ---------- */
/* 大きな白パネル・4本のピンクの帯をやめて、左見出し＋右の行リストにする（既存クラスをCSSで作り直すだけ。
 * DOM構造・文言は変えていない。強調の切替は無し＝全行つねに同じ濃さで読める） */
.gs-scene--issues .wp-block-group.aos-fade-up.has-card-bg-background-color {
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.gs-scene--issues .wp-block-columns {
	align-items: flex-start;
	gap: 48px;
}
.gs-scene--issues .wp-block-column.is-vertically-aligned-center {
	flex-basis: 30% !important;
	align-self: flex-start;
}
.gs-scene--issues .wp-block-column.is-vertically-aligned-center h3 {
	text-align: left;
	font-size: 26px;
	color: var(--gs-ink);
	position: relative;
	padding-bottom: 16px;
	display: inline-block;
}
.gs-scene--issues .wp-block-column.is-vertically-aligned-center h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--gs-navy);
}
.gs-scene--issues .wp-block-group.is-vertical {
	display: flex;
	flex-direction: column;
	gap: 0;
	counter-reset: gs-issue;
}
.gs-scene--issues .wp-block-group.is-vertical > .wp-block-group.has-background {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 22px 0;
	border-bottom: 1px solid var(--gs-line);
	/* 2026-10-07 タンさん指摘 K7：行が display:flex だと、段落が2つある課題（性能・可用性の『連絡の迷子』）の2つ目が
	 * 右の列に並んでしまう。丸（30px）｜本文 の2列 grid にして、段落はすべて2列目（1つ目の下の行）に置く。揃えは baseline→start。
	 * 戻し方：下の5行（display〜row-gap）を display:flex; align-items:baseline; gap:18px に戻し、下の「> *」規則（grid-column:2・K7）を削除。 */
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: start;
	column-gap: 18px;
	row-gap: 0;
	counter-increment: gs-issue;
}
.gs-scene--issues .wp-block-group.is-vertical > .wp-block-group.has-background > * {
	grid-column: 2;
}
.gs-scene--issues .wp-block-group.is-vertical > .wp-block-group.has-background:first-child {
	border-top: 1px solid var(--gs-line);
}
.gs-scene--issues .wp-block-group.is-vertical > .wp-block-group.has-background::before {
	content: counter(gs-issue);
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--gs-navy);
	color: var(--gs-navy);
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.gs-scene--issues .wp-block-group.is-vertical p {
	text-align: left !important;
	font-size: 15px;
	line-height: 1.8;
	color: var(--gs-sub);
	font-weight: 400 !important;
}

/* ---------- 3-4. 置き方と回し方／段階的に整える ---------- */
.gs-scene--approach {
	background: var(--gs-panel-bg);
}
.gs-approach-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.gs-approach-head h3 {
	font-size: 28px;
	color: var(--gs-ink);
	line-height: 1.5;
}
.gs-approach-head p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--gs-ink);
	margin-top: 14px !important;
}

.gs-approach-divider {
	text-align: center;
	margin: 56px 0 40px;
}
.gs-approach-divider h4 {
	font-size: 15px;
	color: var(--gs-sub);
	display: flex;
	align-items: center;
	gap: 16px;
	justify-content: center;
}
.gs-approach-divider h4::before,
.gs-approach-divider h4::after {
	content: "";
	flex: 1 1 60px;
	max-width: 120px;
	height: 1px;
	background: var(--gs-line);
}

/* 3段を縦に。既存の3カード（wp-block-column が flex-basis:100% で並ぶ実装）を素直に縦積みにするだけ */
.gs-scene--approach .wp-block-columns.alignwide {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 720px;
	margin: 0 auto;
}
.gs-scene--approach .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}
.gs-scene--approach .wp-block-group.aos-fade-up {
	box-shadow: none !important;
	padding: 32px !important;
	border: 1px solid var(--gs-line);
	border-radius: 8px !important;
	background: #fff !important;
}

/* 左に丸番号（点線でつなぐ）、右に段の見出しと本文。静的な飾りのレイアウトだけで、動きは無い */
.gs-steps-layout {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 32px;
	max-width: 800px;
	margin: 0 auto;
}
.gs-steps-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	background-image: linear-gradient(var(--gs-line), var(--gs-line));
	background-repeat: repeat-y;
	background-position: center;
	background-size: 1px 100%;
}
.gs-steps-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--gs-navy);
	border: 1px solid var(--gs-navy);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 8px 0;
}
.gs-steps-rail .gs-steps-num:first-child { margin-top: 0; }
/* 2026-10-07 タンさん指摘 S2＋K6：767px以下で rail（丸番号の列）ごと非表示にしていた規則を外した（PCと同じ形＝丸番号｜カード）。
 * 番号が「丸」と「見出しの１．」の2回出る件は inc/solution-scenes.php 側で見出しの数字を表示上だけ外して1回にした。
 * 戻し方：ここに下の @media (max-width: 767px) の2規則（.gs-steps-layout を 1fr・.gs-steps-rail を display:none）を戻し、
 * 次の「3段の丸番号をカードの上端に揃える」の @media screen を min-width: 768px に戻す。 */

/* ---------- 5. 成果物の一例 ---------- */
.gs-scene--deliverables .wp-block-group.aos-fade-up.has-card-bg-background-color {
	background: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.gs-scene--deliverables .wp-block-column.is-vertically-aligned-center h3 {
	text-align: left;
	font-size: 24px;
	color: var(--gs-ink);
}
.gs-scene--deliverables .wp-block-group.is-vertical {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.gs-scene--deliverables .wp-block-group.is-vertical > .wp-block-group.has-background {
	background: var(--gs-panel-bg) !important;
	box-shadow: none !important;
	border-radius: 8px !important;
	padding: 16px 22px !important;
}
.gs-scene--deliverables .wp-block-group.is-vertical p {
	text-align: left !important;
	font-weight: 700 !important;
	font-size: 15px;
	color: var(--gs-ink);
}
.gs-scene--deliverables .wp-block-group.is-vertical p.margin_top_5_ {
	font-weight: 400 !important;
	font-size: 13px;
	color: var(--gs-sub);
	margin-top: 4px !important;
}

/* ---------- 6. 関連サービス ---------- */
.gs-scene--related .gs-stage-body h3 {
	/* 3列化後、通常は h3 が真ん中列へ移っている。ここに残るのは「見出しを抜けなかったとき」の1回目の形だけ */
	text-align: center;
	font-size: 22px;
	color: var(--gs-ink);
	margin-bottom: 28px !important;
}

/* ---------- 7. 末尾 ---------- */
/* 本文側は has-black-background-color（黒）で保存されているが、地の基調色（紺 #141c3a）に揃える指示のため
 * 見た目だけ上書きする（本文の色設定自体は変えていない） */
.gs-scene--closing .wp-block-cover {
	border-radius: 0;
}
.gs-scene--closing .wp-block-cover__background.has-black-background-color {
	background-color: var(--gs-navy);
}
.gs-scene--closing h4 {
	font-size: 22px;
	text-align: center;
}
.gs-scene--closing .wp-block-buttons {
	margin-top: 20px;
}

/* ---------- 8. 3列：見出し（中）と本文（右）／節を足していく — 2026-09-29 ---------- */
/* DOM は single-solution-scenes.php／inc/solution-scenes.php が出す：
 *   div.gs-lane > div.gs-feed-wrap > [ div.gs-feed > section.gs-scene ×n（2990 は4・他は 2〜6） ／ div.gs-feed-spacer ]
 *   section.gs-scene > div.gs-stage.gs-scene-inner > [div.gs-stage-mid, div.gs-stage-body]
 * 舞台は .gs-scene-inner を兼ねる＝767px 以下・768〜1024px は1回目と同じ余白・幅の規則がそのまま効く。
 * .gs-feed-wrap / .gs-feed は何もしない箱（既定では見た目の規則を持たない）。.gs-lane 自身には transform / overflow を付けない
 * （中の sticky が効かなくなる・JS の hero 部品が見る帯の上端がずれる）。 */
.gs-feed-spacer {
	display: none;
}
/* 3列にならない幅（1024px 以下）では、見出しを本文の上に積む */
body.gasp-scenes .gs-scene .gs-stage-mid {
	margin-bottom: 28px;
}
body.gasp-scenes .gs-scene .gs-stage-mid:empty {
	display: none;
}
body.gasp-scenes .gs-scene .gs-stage-mid h3 {
	text-align: left;
	font-size: 26px;
	line-height: 1.4;
	color: var(--gs-ink);
	position: relative;
	padding-bottom: 16px;
	display: inline-block;
	margin-bottom: 0 !important;
}
body.gasp-scenes .gs-scene .gs-stage-mid h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--gs-navy);
}
/* 課題・成果物の一例（9/30〜 汎用型 section も）：見出しの列を抜いたあとに残る右の列は全幅で使う（flex-basis:66.66% を打ち消す） */
.gs-scene--issues .gs-stage-body .wp-block-columns,
.gs-scene--deliverables .gs-stage-body .wp-block-columns,
.gs-scene--section .gs-stage-body .wp-block-columns {
	display: block;
}
.gs-scene--issues .gs-stage-body .wp-block-columns > .wp-block-column,
.gs-scene--deliverables .gs-stage-body .wp-block-columns > .wp-block-column,
.gs-scene--section .gs-stage-body .wp-block-columns > .wp-block-column {
	flex-basis: auto !important;
	width: 100%;
}
/* 2026-10-07 タンさん指摘 S6：同じ段組の中のカード（右の列）の間が、帯の外（1025px未満・.gs-lane でない幅）では 0 だった。
 * 上の display:block で縦に積むのに、間隔の指定（212〜216行付近の margin-top:24px）が .gs-lane の media 内だけだったため。
 * 段組どうしの間（実測 19.2px＝WP の既定）に揃える。.gs-lane 内は上の 24px が詳細度で勝つので変わらない。
 * 戻し方：この規則のブロックを削除。 */
.gs-scene--issues .gs-stage-body .wp-block-columns > .wp-block-column + .wp-block-column,
.gs-scene--deliverables .gs-stage-body .wp-block-columns > .wp-block-column + .wp-block-column,
.gs-scene--section .gs-stage-body .wp-block-columns > .wp-block-column + .wp-block-column {
	margin-top: 19.2px;
}
/* 2026-10-08 タンさん指摘 N3（「代表メッセージのボックスは修正していない」＝S6「ボックスとボックスの間に空白がある」の残り・リードの読み）。
 * 実測（375・代表メッセージ 97）：白いボックスが1つずつ見出しの無い節（data-gs-heading="missing"）になっていて、
 * ボックスの間が節の余白 56＋56＝112px（他ページのカードの間は S6 で 19.2px）。767px 以下の 97 に限り、
 * 見出しの無い節が続くところだけ、前の節の下の余白を 0・その節の上の余白を 19.2px にする（見出しのある節の前後は今のまま）。
 * 戻し方：この規則のブロックを削除。 */
@media screen and (max-width: 767px) {
	body.page-id-97 .gs-scene:has(+ .gs-scene[data-gs-heading="missing"]) > .gs-stage {
		padding-bottom: 0;
	}
	body.page-id-97 .gs-scene + .gs-scene[data-gs-heading="missing"] > .gs-stage {
		padding-top: 19.2px;
	}
}
.gs-scene--related .gs-stage-body .wp-block-buttons {
	justify-content: flex-start;
}

@media screen and (min-width: 1025px) {
	/* 左列 34%：ヒーローの文字幅を左列に合わせる（1b は 50%−72px） */
	body.gasp-scenes .gs-scene--hero .wp-block-cover__inner-container {
		max-width: min(620px, calc(34% - 72px));
		/* 2026-09-29 岡田さん「開いた時は文字を真ん中に表示して、スクロールすると左に移動しつつ、真ん中の列が出てくる動きってできる？」
		 * 横のずらし量 --gs-hero-x は assets/js/solution-scenes.js の hero 部品がスクロール位置から毎回計算して入れる（逆向きにも戻る）。
		 * 既定値 0＝今の左寄せ。JS が無い・動かない・失敗したときは左寄せのまま（真ん中を CSS の既定にすると、JS が動かないとき
		 * 文字が帯の下に隠れるため＝設計役の指摘）。transform は文字の入れ物だけに付ける（ヒーローや祖先に付けると sticky が壊れる）。
		 * 幅は変えずに動かすだけ（途中で幅を変えると折り返しががたつく）。行は左揃えのまま。
		 * 外すなら：この transform の1行と、solution-scenes.js の makeHero 部品・heroUnit の生成・measureAll と onScroll の中の
		 * heroUnit の呼び出しを消す（heroUnit の生成だけ消すと呼び出し側が参照エラーになる）。
		 * ※退避 S3 の2本を戻す手は、9/29 4回目（.gs-feed 化・S4）以降は単独では使えない（S3 の JS は .gs-pin-wrap を探して disabled になる）。
		 *   戻すなら S4 → S3 の順 */
		transform: translateX(var(--gs-hero-x, 0px));
	}
	/* 帯を右 66% に広げる（1b は右 50%） */
	body.gasp-scenes .gs-lane {
		margin-left: 34%;
		width: 66%;
	}
	/* 帯の中を 中 1fr（＝全体の22%）／右 2fr（＝44%）。余白は舞台ではなく中・右の列に持たせる */
	body.gasp-scenes .gs-lane .gs-stage.gs-scene-inner {
		display: grid;
		grid-template-columns: 1fr 2fr;
		/* 上揃え（7章の舞台は縦中央だった）：節の高さが窓いっぱいではなく自然高になり、背の高い行（当社の考え方）を縦中央に揃えると
		 * 行が下から入ってきたとき見出しが画面の外に残るため（設計役の指摘・リードが採用。岡田さん未確認） */
		align-items: start;
		box-sizing: border-box;
		padding: 0;
	}
	body.gasp-scenes .gs-lane .gs-stage-mid {
		margin-bottom: 0;
		padding: 40px 24px 40px 40px;
	}
	body.gasp-scenes .gs-lane .gs-stage-body {
		min-width: 0;
		padding: 40px 48px 40px 24px;
	}
	/* 当社の考え方：右列（44%）に3段が収まるよう詰める。収まりは JS が自然高で判定する（収まらなければその節は止めずに流れる） */
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-approach-head h3 {
		font-size: 22px;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-approach-head p {
		font-size: 14px;
		line-height: 1.8;
		margin-top: 8px !important;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-approach-divider {
		margin: 24px 0 16px;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-steps-layout {
		grid-template-columns: 40px 1fr;
		gap: 16px;
		max-width: none;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .wp-block-columns.alignwide {
		gap: 12px;
		max-width: none;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .wp-block-group.aos-fade-up {
		padding: 16px 22px !important;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-steps-body h4 {
		font-size: 15px;
	}
	body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-steps-body p {
		font-size: 13px;
		line-height: 1.7;
	}

	/* 止める（is-pinned は JS が付ける）：入れ物 .gs-feed（節を詰めて並べたもの。2990 は4節・他は 2〜6節）を「ヘッダー下〜窓の下」に sticky で止め、
	 * 走行区間（.gs-feed-spacer）ぶんの高さを入れ物の下に開ける。高さは自然高のまま（窓より背が高くても sticky は効く）。
	 * top は 1b のヒーローと同じ --gs-header-h。JS は同じ top を getComputedStyle で読んで進み具合を出す */
	body.gasp-scenes .gs-feed-wrap.is-pinned .gs-feed {
		position: sticky;
		top: var(--gs-header-h);
	}
	body.gasp-scenes .gs-feed-wrap.is-pinned .gs-feed-spacer {
		display: block;
		height: var(--gs-feed-spacer-h, 0px);
	}
	/* 節の出し入れ：is-feed が付いている間、各節の見出し（中）・本文（右）は is-head-on / is-body-on が付くまで隠す
	 * （visibility:hidden＝隠れたリンクに Tab が行かない。高さは変わらない＝節は最初から場所を取っている）。
	 * is-feed が付かない（JS が無い・失敗・1024px 以下）ときはここの規則が当たらず、全部見える。
	 * フェードの長さ 0.4s は既定の置き値（岡田さんが画面で決める） */
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-stage-mid,
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-stage-body {
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s ease, visibility 0s linear 0.4s;
	}
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-scene.is-head-on .gs-stage-mid,
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-scene.is-body-on .gs-stage-body {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.4s ease, visibility 0s;
	}
}
@media screen and (min-width: 1025px) and (prefers-reduced-motion: reduce) {
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-stage-mid,
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-stage-body,
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-scene.is-head-on .gs-stage-mid,
	body.gasp-scenes .gs-feed-wrap.is-feed .gs-scene.is-body-on .gs-stage-body {
		transition: none;
	}
}

/* ---------- 10. 寄せと書式の統一 — 2026-09-29 ---------- */
/* 岡田さん（原文）：「あと全体的に寄せとか書式とかガチャついてて見にくいので、見直してみて。」
 * 揃える規則（リードの判断・見た目の案出しではなく統一の規則）：
 *   ・右の列の文字はすべて左揃え（当社の考え方だけ中央揃えだった）
 *   ・右の列の見出し h3 は 22px／段の見出し h4 は 16px／本文 p は 15px／小さい補足は 13px（節ごとにばらばらだった）
 *   ・カードは列の幅いっぱい（成果物の一例は中身の幅に縮んでいた）
 *   ・当社の考え方の3段：左の丸番号を各カードの上端に揃える（番号3つが上に固まっていた）。線は番号の後ろを通す
 *   ・関連する取り組み例のボタンは紺の枠と文字（薄いグレーで読めなかった）
 *   ・中央寄せのための max-width（720/800px）と margin:auto は外す（右の列は既に幅が決まっている）
 * ここは 8 節より後に置く。8 節には body.gasp-scenes 付き（詳細度が上）の同名規則があるので、文字サイズは body.gasp-scenes を付けて
 * 勝たせ、余白（カードの padding・区切りの margin）は 8 節の値をそのまま使う（ここでは決めない）。3段の grid の列（40px 1fr）と
 * 間隔（16px）はここで決める＝1025px 以上では 8 節と同値、768〜1024px ではここが唯一の決定元。
 * 丸番号の grid 化は @media screen（768px 以上）の中＝印刷では従来の rail（番号が上に固まる形）。DOM・文言は変えない。
 * ボタンの丸み（999px）・余白（10px 22px）・hover の反転は色と一緒にリードが置いた値（岡田さん未確認）。 */
/* 当社の考え方：左揃え・幅いっぱい */
.gs-scene--approach .gs-stage-body .gs-approach-head {
	text-align: left;
	max-width: none;
	margin: 0;
}
.gs-scene--approach .gs-stage-body .gs-approach-head h3 {
	font-size: 22px;
	line-height: 1.5;
}
/* 8 節（1025px 以上）に body.gasp-scenes 付きの同名規則（14px 等）があり詳細度で負けるため、こちらも body.gasp-scenes を付ける */
body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-approach-head p {
	text-align: left;
	font-size: 15px;
	line-height: 1.8;
	margin-top: 10px !important;
}
.gs-scene--approach .gs-stage-body .gs-approach-divider {
	text-align: left;
	/* 余白は 8 節（1025px 以上・24px 0 16px）の値がそのまま効く＝ここでは決めない */
}
.gs-scene--approach .gs-stage-body .gs-approach-divider h4 {
	justify-content: flex-start;
	font-size: 14px;
}
.gs-scene--approach .gs-stage-body .gs-approach-divider h4::before {
	display: none;
}
.gs-scene--approach .gs-stage-body .gs-approach-divider h4::after {
	flex: 1 1 60px;
	max-width: none;
}
.gs-scene--approach .gs-stage-body .gs-steps-body h4,
.gs-scene--approach .gs-stage-body .gs-steps-body p {
	text-align: left;
}
body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-steps-body h4 {
	font-size: 16px;
}
body.gasp-scenes .gs-scene--approach .gs-stage-body .gs-steps-body p {
	font-size: 14px;
	line-height: 1.7;
}
/* 3段のカードの padding は 8 節（1025px 以上・16px 22px）と 4 節（32px）の既存値のまま＝ここでは決めない */
/* 3段の丸番号をカードの上端に揃える（全幅。2026-10-07 までは 768px 以上のみで、767px 以下は rail を出さなかった）。
 * rail と body の箱を display:contents で透過させ、番号とカードを同じグリッドの行に置く。線は grid の1列目を貫く ::before */
@media screen {
	.gs-scene--approach .gs-stage-body .gs-steps-layout {
		display: grid;
		grid-template-columns: 40px 1fr;
		column-gap: 16px;
		row-gap: 16px;
		max-width: none;
		margin: 0;
		position: relative;
	}
	/* 行を明示する（段の数は PHP が data-gs-steps-count に出す。1〜5 段まで）。明示しないと ::before の grid-row: 1 / -1 が
	 * 暗黙行に届かず、線が1段目の高さで止まる（9/29 点検指摘） */
	.gs-scene--approach .gs-stage-body .gs-steps-layout[data-gs-steps-count="1"] { grid-template-rows: repeat(1, auto); }
	.gs-scene--approach .gs-stage-body .gs-steps-layout[data-gs-steps-count="2"] { grid-template-rows: repeat(2, auto); }
	.gs-scene--approach .gs-stage-body .gs-steps-layout[data-gs-steps-count="3"] { grid-template-rows: repeat(3, auto); }
	.gs-scene--approach .gs-stage-body .gs-steps-layout[data-gs-steps-count="4"] { grid-template-rows: repeat(4, auto); }
	.gs-scene--approach .gs-stage-body .gs-steps-layout[data-gs-steps-count="5"] { grid-template-rows: repeat(5, auto); }
	.gs-scene--approach .gs-stage-body .gs-steps-layout::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / -1;
		justify-self: center;
		width: 1px;
		background: var(--gs-line);
	}
	.gs-scene--approach .gs-stage-body .gs-steps-rail,
	.gs-scene--approach .gs-stage-body .gs-steps-body,
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-columns.alignwide {
		display: contents;
	}
	.gs-scene--approach .gs-stage-body .gs-steps-num {
		grid-column: 1;
		align-self: start;
		margin: 14px 0 0;
		position: relative;
		z-index: 1;
	}
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column {
		grid-column: 2;
		width: auto;
	}
	.gs-scene--approach .gs-stage-body .gs-steps-num:nth-child(1),
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column:nth-child(1) { grid-row: 1; }
	.gs-scene--approach .gs-stage-body .gs-steps-num:nth-child(2),
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column:nth-child(2) { grid-row: 2; }
	.gs-scene--approach .gs-stage-body .gs-steps-num:nth-child(3),
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column:nth-child(3) { grid-row: 3; }
	.gs-scene--approach .gs-stage-body .gs-steps-num:nth-child(4),
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column:nth-child(4) { grid-row: 4; }
	.gs-scene--approach .gs-stage-body .gs-steps-num:nth-child(5),
	.gs-scene--approach .gs-stage-body .gs-steps-body .wp-block-column:nth-child(5) { grid-row: 5; }
}
/* 成果物の一例：カードを列の幅いっぱいに */
.gs-scene--deliverables .gs-stage-body .wp-block-group.is-vertical {
	align-items: stretch !important;
}
.gs-scene--deliverables .gs-stage-body .wp-block-group.is-vertical > .wp-block-group.has-background {
	width: 100%;
	box-sizing: border-box;
}
/* 関連する取り組み例：ボタンを左寄せ・紺の枠と文字 */
.gs-scene--related .gs-stage-body .wp-block-buttons {
	justify-content: flex-start;
	gap: 12px;
}
.gs-scene--related .gs-stage-body .wp-block-button .wp-block-button__link {
	color: var(--gs-navy) !important;
	border: 1px solid var(--gs-navy) !important;
	background: #fff !important;
	font-size: 14px;
	padding: 10px 22px;
	border-radius: 999px;
}
.gs-scene--related .gs-stage-body .wp-block-button .wp-block-button__link:hover {
	color: #fff !important;
	background: var(--gs-navy) !important;
}

/* 印刷＝動画だけ非表示。sticky・右半分の帯・低い窓の切替はすべて @media screen の中にあるので、
 * 印刷には最初から効かない（ヒーロー static・帯は全幅＝9/28 の静的な形で刷られる。戻す規則は要らない）。
 * .gasp-eyecatch-video は body.gasp-scenes で絞る（9/28 点検の指摘：絞りが無く他ページに効く形だった） */
@media print {
	body.gasp-scenes .gs-scene--hero video,
	body.gasp-scenes .gasp-eyecatch-video {
		display: none !important;
	}
}

/* ---------- 11. 帯の地を紺に — 2026-09-30 ---------- */
/* 岡田さん（原文）：「この部分、背景黒の方がいいかな。。。」→ リードの見立て（真っ黒ではなくサイトの地の紺）に
 * 「いや、じゃあ紺に変更してしまっていいよ。」
 * コーポレート全体は「紺の地＋白いカードだけ浮く2層」（corp-color.css・9/1）。このページだけ地を白に上書きしていたのを、その規則に戻す。
 * 新しい色は作らない。値はすべて corp-color.css／top.css に既にあるもの：
 *   地 #141c3a／帯 #1b2547／本文 #eef1f8／弱文字 #b8c3da／アクセント #9ec1ff／紺地の線 rgba(255,255,255,0.12)（フッターの区切り線）
 * やり方：帯（.gs-lane）の中で色のトークンを紺地用に再宣言する（既存規則は var() で色を取っているので一斉に切り替わる）。
 * 白いカードの中だけトークンを元の値に戻す。紺色の部品（下線・丸番号）は紺の上で消えるのでアクセント色にする。
 * メディアクエリの外に置く＝767px 以下（帯が全幅）でも同じ。ヒーローと末尾の紺帯は触らない。
 * 戻し方：この節を丸ごと消し、上の body.gasp-scenes と 1b 節の .gs-lane の background を #fff に戻す
 * （または退避 C:\oka\work\_claude\HP_wp\_taihi\blogsy_gasp_20260930_S6_before_navy\ を戻す） */
body.gasp-scenes .gs-lane {
	--gs-ink: #eef1f8;
	--gs-sub: #b8c3da;
	--gs-line: rgba(255, 255, 255, 0.12);
	--gs-panel-bg: #1b2547;
	color: #eef1f8;
}
/* 白いカードの中は元の値（明るい地用）に戻す：当社の考え方の3段カード／汎用型の節の白いカード */
body.gasp-scenes .gs-lane .gs-scene--approach .wp-block-group.aos-fade-up,
body.gasp-scenes .gs-lane .gs-scene--section .has-card-bg-background-color {
	--gs-ink: #1c2333;
	--gs-sub: #4a5164;
	--gs-line: #dde1ea;
	--gs-panel-bg: #f6f7fa;
}
/* よくある課題・成果物の一例は、このファイルがカードの白地を消している（地の上に直接文字が載る）。
 * corp-color.css は .has-card-bg-background-color の中を暗い文字（#282424／見出し #29294b）に固定しているので、この2型の中だけ紺地用に戻す */
/* 条件は白地を消す規則（2節・5節の .wp-block-group.aos-fade-up.has-card-bg-background-color）と同じにする
 * （9/30 点検指摘：クラスだけで当てると、白地が残るカードの文字まで明るくなる） */
body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-group.aos-fade-up.has-card-bg-background-color,
body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-group.aos-fade-up.has-card-bg-background-color {
	color: #eef1f8;
}
body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-group.aos-fade-up.has-card-bg-background-color :is(h1, h2, h3, h4, h5, h6),
body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-group.aos-fade-up.has-card-bg-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}
body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-group.aos-fade-up.has-card-bg-background-color a:not(.wp-element-button),
body.gasp-scenes .gs-lane .gs-scene--deliverables .wp-block-group.aos-fade-up.has-card-bg-background-color a:not(.wp-element-button) {
	color: #9ec1ff;
}
/* 関連する取り組み例のボタン：既定（白地・紺文字）はそのまま。hover は紺に反転していたが、地が紺なので輪郭ごと消える（9/30 点検指摘）
 * → 紺地の上のアクセント（#9ec1ff 地・紺文字）に反転する */
body.gasp-scenes .gs-lane .gs-scene--related .gs-stage-body .wp-block-button .wp-block-button__link:hover {
	color: #141c3a !important;
	background: #9ec1ff !important;
	border-color: #9ec1ff !important;
}
/* 紺色の部品 → アクセント（corp-color.css の「紺地の上のアクセント #9ec1ff」と同じ扱い） */
body.gasp-scenes .gs-lane .gs-stage-mid h3::after,
body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-column.is-vertically-aligned-center h3::after {
	background: #9ec1ff;
}
body.gasp-scenes .gs-lane .gs-scene--issues .wp-block-group.is-vertical > .wp-block-group.has-background::before {
	border-color: #9ec1ff;
	color: #9ec1ff;
}
body.gasp-scenes .gs-lane .gs-steps-num {
	background: #9ec1ff;
	border-color: #9ec1ff;
	color: #141c3a;
}
/* ---------- 12. 固定ページ — 2026-09-30 ---------- */
/* 固定ページ12本（inc/solution-scenes.php の gasp_page_scenes_pages()）は、真ん中の見出しに本文の h2 も来る
 * （固定ページの節は h2 か h3 の先頭を抜く／トップレベルの見出しは h2）。投稿側の h3 の規則（8 節・11 節）と同じ値を h2 に当てるだけ。 */
body.gasp-scenes-page .gs-scene .gs-stage-mid h2 {
	text-align: left;
	font-size: 26px;
	line-height: 1.4;
	color: var(--gs-ink);
	position: relative;
	padding-bottom: 16px;
	display: inline-block;
	margin-bottom: 0 !important;
}
body.gasp-scenes-page .gs-scene .gs-stage-mid h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--gs-navy);
}
/* 11 節：紺地の帯の中の下線はアクセント色 */
body.gasp-scenes-page .gs-lane .gs-stage-mid h2::after {
	background: #9ec1ff;
}
/* 真ん中の見出しが無い節（data-gs-heading="missing"）：真ん中は 8 節の :empty で display:none になり、本文が grid の1列目（真ん中の細い列）に
 * 詰まって潰れていた（9/30 リードが 97 代表メッセージの画面で確認＝松原さんのカードの名前が切れた）。本文は常に右の列に置く。
 * 規則は body.gasp-scenes（投稿にも当たる）。投稿19本には真ん中の見出しが無い節が0件（9/30 リード実測＝data-gs-heading="missing" を curl で数えた）なので
 * 投稿の見え方は今は変わらない。投稿に見出しの無い節が出たときも本文は右の列に入る（固定ページを gasp_page_scenes_pages() で外してもこの規則は残る）。
 * 3列になる 1025px 以上だけ（8 節と同じ線） */
@media screen and (min-width: 1025px) {
	body.gasp-scenes .gs-lane .gs-stage.gs-scene-inner > .gs-stage-body {
		grid-column: 2;
	}
}

/* 中身が「その幅では非表示のブロック」だけの節を、節ごと出さない — 2026-09-30
 * 岡田さん（原文）：「あとは各パネルの間隔を他のページと合わせておけばいいかな。標準的な間隔。」
 * 標準＝節の本文の上下 padding 40px ずつ＝中身どうしの間隔 80px（課題ページ 2990 で実測）。代表メッセージ（97）も大半のカードは 80px だったが、
 * 末尾近くの帯が PC 用（wp-block-hidden-mobile）と SP 用（wp-block-hidden-desktop / -tablet）の2つ入っていて、非表示側の節が中身 0・padding だけの
 * 80px の帯として残り、前後のカードの間隔が 160px になっていた（1366px 実測）。→ 節の本文の唯一の子がその幅で非表示のブロックなら節ごと消す。
 * 幅の線は、非表示クラスのインライン CSS（WordPress コアのブロック可視性が本文と一緒に出す。9/30 に 97 の HTML で確認）と同じ：desktop＝782px 超／tablet＝480 超〜782／mobile＝480 以下。
 * WP の更新でこの線が変わると、ここと食い違う（気づく仕組みは無い）。
 * 固定ページ（body.gasp-scenes-page）だけ。投稿19本にこのクラスは無い。戻し方＝この3規則を消す */
@media (width > 782px) {
	body.gasp-scenes-page .gs-feed .gs-scene:has(> .gs-stage > .gs-stage-body > .wp-block-hidden-desktop:first-child:last-child) { display: none; }
}
@media (480px < width <= 782px) {
	body.gasp-scenes-page .gs-feed .gs-scene:has(> .gs-stage > .gs-stage-body > .wp-block-hidden-tablet:first-child:last-child) { display: none; }
}
@media (width <= 480px) {
	body.gasp-scenes-page .gs-feed .gs-scene:has(> .gs-stage > .gs-stage-body > .wp-block-hidden-mobile:first-child:last-child) { display: none; }
}

/* 代表メッセージ（97）：1つの節の中で縦に積んだカード（開発・運用の進め方の3段＝元は横並びの3列）の隙間を、節と節の間隔と同じ 80px に。
 * 岡田さん（原文・画面を添えて）「こういう、パネル間の間隔がバラバラなのが気になるんだ」＝節の間は 80px なのに、3段の間だけ縦積み規則の 24px だった。
 * 対象＝97 で、列の直下が白いカード（.has-card-bg-background-color）になっている columns だけ（＝カードを縦に積んだ列）。
 *   松原さんのカードの中の2列（動画の列＋名前の列。カードの中の columns）は対象外＝「ここはこれでいい」のまま 24px（9/30 点検指摘で絞った）。
 * 幅＝1025px 以上だけ（節の上下 padding が 40px ずつ＝節の間 80px なのはこの幅。768〜1024px は節の padding が 72px で「標準」が別の値＝未実測なので触らない）。
 * 投稿19本の縦積みは 24px のまま。戻し方＝この規則を消す */
@media screen and (min-width: 1025px) {
	body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .wp-block-columns:has(> .wp-block-column > .has-card-bg-background-color) > .wp-block-column + .wp-block-column {
		margin-top: 80px;
	}
}

/* ---------- 13. 代表メッセージ（page-id-97）：ヒーロー写真（帯が上がっても松原さんにかぶらない位置へ）・カードの写真（出さない）・見出しの下の1行 — 2026-09-30 ---------- */
/* 岡田さん（原文）：「代表メッセージはスライドした時に松原さんにかぶらない位置に画像をずらせるかな。松原さんはもっと縮尺されてしまってもかまわない。」
 * 写真 gasp代表.jpg（1800×1200）の松原さんは横 33〜63%・顔は上 17〜40%。既定の object-fit:cover は写真を幅に合わせて広げる（3:2 の写真より
 * ヒーローのほうが横長）ので、横にずらす余地が無い。→ 写真を「高さはヒーローに合わせ・幅は写真の比率のまま（縮む）」にし、
 * 人の中心（写真の幅の 48%）が帯に隠れない左の列の中心（3列＝幅の 34% の中央 17%／2列＝50% の中央 25%）に来るよう置く。
 * 置き方は要素自身の寸法で決める（left＝列の中心、transform で自分の幅の 48% だけ左へ）ので、窓の縦横比やヒーローの高さ（低い窓で static になり
 * 自然高になったとき）に依らず人の位置は同じ（9/30 点検指摘：最初は「幅＝高さ×1.5」を式に置いていて、縦長の窓＝768×1024 や 1280×1024 で人が画面の外に出た）。
 * 右側に写真の無い部分が出るので、写真の右端 160px を紺へ溶かす（mask＝写真の箱に対する割合。リードの判断＝硬い縦の切れ目を出さないため。外すなら mask の2行を消す）。
 * **開いた直後（スクロール 0）から写真は左に寄り、右側は写真の無い面（被せ span の #0f4c7a 半透明と地の紺の合成色）になる**（帯が上がる前も同じ絵＝リードの判断。
 * 岡田さんの発言は「スライドした時」だが、スクロールに合わせて写真だけ動かすのは新しい動きになるので入れていない。岡田さん未確認）。
 * ※合わせているのは人の「中心」だけ。人の幅はヒーローの高さ（100vh−ヘッダー）×約0.45 なので、ヒーローの高さが窓の幅の 0.756 倍（3列）／1.11 倍（2列）を
 *   超える縦長の窓では人の端が帯の下に入る（例 768×1024＝ヒーロー高 908px で約 12px）。逆に幅が広くて低い窓（例 1920 幅でヒーロー高 453px 未満＝1920 幅のヘッダー 96px を足して窓の高さ約 550px 未満）
 *   では写真の左端が画面内に入り、左側には mask が無いので硬い縁が出る（点検役の計算・未実測）。
 * 767px 以下は帯が全幅で被らないので触らない（cover のまま）。戻し方＝この 13 節を消す（または退避 _taihi\blogsy_gasp_20260930_S8_before_ceo_shift） */
@media screen and (min-width: 768px) {
	body.gasp-scenes-page.page-id-97 .gs-scene--hero .wp-block-cover__image-background {
		--gs-ceo-band: 25vw; /* 2列（768〜1024px）＝帯は右 50% */
		width: auto;        /* cover の CSS の width:100% を外し、高さ 100% に対する写真の比率（1.5）で幅が決まる */
		height: 100%;
		max-width: none;
		left: var(--gs-ceo-band);
		transform: translateX(-48%); /* 自分の幅の 48%＝人の中心を left の位置へ */
		object-fit: fill; /* 箱が写真の比率そのものなので切り抜き無し。表のインライン object-position（right center）は効かなくなる */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 160px), transparent 100%);
		mask-image: linear-gradient(to right, #000 calc(100% - 160px), transparent 100%);
	}
}
@media screen and (min-width: 1025px) {
	body.gasp-scenes-page.page-id-97 .gs-scene--hero .wp-block-cover__image-background {
		--gs-ceo-band: 17vw; /* 3列＝帯は右 66%・左の列は 34% */
	}
}
/* 代表メッセージのカードの写真（会議室・ユースケース・品質・運用の4枚＝figure.wp-block-image.size-full.is-style-rounded を持つ列）
 * 経緯（同日・4段階）：
 *   1回目 岡田さん「これはもっと画像小さくていい。文字が主役」→ 幅 220px・列の中央
 *   2回目 岡田さん「丸の絵は全部パネル内で右寄せ、丸は切れちゃってもいいから倍くらいに拡大」→ 440px・本文の下に右寄せ
 *   3回目 岡田さん「変わってないように見えるが。。」→ 確認への回答「パネルの右３分の１まで。それより右は画像は見切れて構わない。左３分の２が文字を表示するスペース。」
 *          → 左 2/3 文字・右 1/3 写真（右端で切れる）の横並び
 *   4回目 岡田さん「むしろこれ絵があるとパネルのサイズがまちまちになって読みにくいので、いらないかな。画像はとっちゃおうか。」
 *          → **写真の列を出さない**（DB は触らない＝表示だけ外す。1〜3回目の規則は消した）。文字の列は縦積み規則（1b・8 節）でカードいっぱいの幅になる
 * 松原さんのカード（.gasp-ceo-swing・wp:html ブロックで size-full を持たない）は「ここはこれでいい」＝当たらない。
 * 戻し方（写真を戻す）＝下の display:none と margin-top の2規則を消す（前の版は退避にある：S9＝220px 中央、S10＝横並び（440px・左 2/3 右 1/3）。
 *   S10 は会話中に読んだ内容からの復元なので、戻しても元と完全に同じとは限らない。440px 右寄せの縦積み版だけの退避は無い） */
body.gasp-scenes-page.page-id-97 .gs-lane .wp-block-column:has(> figure.wp-block-image.size-full.is-style-rounded:not(.gasp-ceo-swing)) {
	display: none;
}
/* 写真の列が DOM で先に来るカード（ユースケース・運用）では、文字の列が「2つ目の列」なので縦積み規則（1b 節の .wp-block-column + .wp-block-column）の
 * margin-top:24px が残る（display:none でも隣接兄弟の判定からは外れない＝9/30 点検指摘）。4枚で上の余白を揃えるため 0 に */
body.gasp-scenes-page.page-id-97 .gs-lane .wp-block-column:has(> figure.wp-block-image.size-full.is-style-rounded:not(.gasp-ceo-swing)) + .wp-block-column {
	margin-top: 0;
}
/* 岡田さん（原文・同日）：「各パネルのタイトルと本文の間は一行空白行を入れて。」
 * 対象＝代表メッセージの白いカード（.has-card-bg-background-color）の中の見出し h4（松原さんのカードの名前・4枚のカードの題・3段のカードの題）。
 * 空白行の高さ＝本文 p の1行（カードの中の p は 15px・行の高さ 23.25px＝9/30 リード実測。1.55 はその逆算で、テーマのどの指定から来るかは※未確認）。
 * 「空白行」は見出しの下余白で表す近似（DB に空段落は足さない。3段のカードは元の 8px を置き換える）。p の指定が変われば値もずれる。
 * 戻し方＝この規則を消す */
body.gasp-scenes-page.page-id-97 .gs-lane .has-card-bg-background-color h4 {
	/* !important＝3段のカードの h4 は本文側にインライン style="margin-top:28px;margin-bottom:8px" があり、それに勝たせるため（9/30 実測） */
	margin-bottom: calc(15px * 1.55) !important;
}

/* ---------- 14. 代表メッセージ（page-id-97）「当社の強み」を重厚感のある見せ方に — 2026-09-30 ---------- */
/* 岡田さん（原文）：「結論である当社の強みがポップすぎる。もっと重厚感のある演出に。」
 * 見た目の案は ChatGPT（会社HPリニューアル プロジェクト・チャット「デザイン案作成」9/30）が返した絵1枚で、岡田さんが「OK」（関門通過）。
 * 絵の中身＝白いパネルをやめ、帯より一段明るい紺の半透明パネル（細い枠線）／4項目は細い横線で区切った4行／各行の左に「01〜04」の大きな薄い青の数字、
 * 右に白の太字見出しと説明。文言は不変・3列の構成は不変。
 * 対象の節＝本文が「白いカード > columns > 列 > 縦積み group > has-background の行」の形（97 ではこの節だけ。2990 の成果物の一例と同じ型だが、
 * 固定ページは型の表を引かないので section 型のまま）。色はすべて既存の値（帯 #1b2547・線 rgba(255,255,255,0.12)・本文 #eef1f8・弱文字 #b8c3da・アクセント #9ec1ff）。
 * 数字は CSS のカウンタで振る（DB に書かない）。絵から読んだリードの置き値（岡田さん未確認）＝数字 36px・細字 300・字間 0.02em・位置 left 8px/top 18px／
 * 行の余白 22px・左の幅 88px／見出し 16px 白・説明 14px 弱文字色・本文 15px・行間 1.7・見出しの下 6px。
 * パネルの地は絵では半透明に見えるが、実装は不透明の #1b2547（帯の一段明るい紺と同じ値）。パネルの角丸 16px と padding 4rem は本文のインラインのまま残す
 * （上書きするのは白地・影だけ）＝行の線はパネルの padding の内側に収まる。
 * !important＝WP コアが .has-card-bg-background-color の白と、本文側のインライン（角丸・グラデーション・影）を強く指定しているため。
 * 戻し方＝この 14 節を消す（または退避 _taihi\blogsy_gasp_20260930_S11_before_strengths） */
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .gs-stage-body > .wp-block-group > .has-card-bg-background-color:has(> .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background) {
	background: #1b2547 !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: none !important;
	color: #eef1f8;
}
/* 縦積み group も「has-background の行を持つもの」に絞る（松原さんのカードの名前の縦積み group に gap:0 が当たっていた＝9/30 点検指摘） */
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical:has(> .wp-block-group.has-background) {
	gap: 0 !important;
	counter-reset: gs-strength;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background {
	background: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding: 22px 0 22px 88px !important;
	margin: 0 !important;
	position: relative;
	counter-increment: gs-strength;
	width: 100%;
	box-sizing: border-box;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background:last-child {
	border-bottom: 0;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background::before {
	content: counter(gs-strength, decimal-leading-zero);
	position: absolute;
	left: 8px;
	top: 18px;
	font-size: 36px;
	line-height: 1;
	font-weight: 300;
	color: #9ec1ff;
	letter-spacing: 0.02em;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background p {
	color: #eef1f8;
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background p:first-child {
	color: #fff;
	font-size: 16px;
	margin-bottom: 6px;
}
body.gasp-scenes-page.page-id-97 .gs-lane .gs-scene--section .has-card-bg-background-color > .wp-block-columns > .wp-block-column > .wp-block-group.is-vertical > .wp-block-group.has-background p.margin_top_5_ {
	color: #b8c3da;
	font-size: 14px;
	margin-top: 0 !important;
}
/* 13. 2026-10-01 見出しを真ん中の列へ移したあとに残る、空の見出しの箱を消す（固定ページ）。
   導入事例の一覧（34）を対象に足したとき（岡田さん「導入事例のサイトもコスト最適化とかのサイトと同じレイアウトにしよう。」）、
   本文の列に中身の無い紺の箱（246×80px・1366×768 で実測）が残っているのを見つけた。
   正体は本文の見出しの入れ物 .category_caption（corp-color.css が地色と余白を付けている）で、中の h2 だけが真ん中の列へ移り、箱が空で残る。
   9/30 に対象にした RESOURCES（35）・資料ダウンロード（3292）・お知らせ（3297）・COMPANY（2）にも同じ空箱が出ていた（10/1 実測。9/30 の課題表には未記載）。
   子要素が1つも無いときだけ消す＝見出しが残っている箱には効かない。
   ※文字だけ入っていて要素の無い箱もこの規則で消える。10/1 に固定ページ14本（同日足した 32・34 を含む）＋採用の下層17本
     （body.gasp-scenes-page が付く全31ページ）を実測し、当たる箱は 34・32・2・35・3292・3297 の6個だけ・どれも文字は空、を確認した。
     投稿19本（body に gasp-scenes-page が付かない）とトップ（.gs-scene が無い）には効かない。
     対象ページを足したら同じ確認をすること。戻すときはこの規則を消す */
body.gasp-scenes-page .gs-scene .category_caption:not(:has(*)) {
	display: none;
}
/* 14. 2026-10-01 右のパネル全体をリンクにしたもの（inc/solution-scenes.php の gasp_page_scenes_parse()）。
   岡田さん「これ、リンクは右のパネルにつけてほしい」（法定表示・ポリシー）。見た目は今のパネルのまま（文字色・下線を変えない）。
   戻すときはこの規則と PHP の同日ブロックを消す */
body.gasp-scenes-page .gs-panel-link {
	display: block;
	color: inherit;
	text-decoration: none;
}
body.gasp-scenes-page .gs-panel-link:hover,
body.gasp-scenes-page .gs-panel-link:focus-visible {
	color: inherit;
	text-decoration: none;
}
/* 15. 2026-10-01 お知らせ（3297）の紹介文「当社からのお知らせ、プレスリリース、イベント情報などをお届けします。」
   岡田さん「当社からのお知らせ、プレス～～の文言はパネルと左寄せで合わせて、パネルとの間隔一行開けて。文字サイズをもう二つくらい上げて」
   ・左寄せでパネル（お知らせのカード）の左端に揃える：本文の中央寄せと幅の制限を外し、包む箱のテーマ標準の左右の余白（15px）を 0 に（実測で 15px ずれていた）
   ・パネルとの間を1行（この文字の行の高さ＝1lh）
   ・文字の大きさ 15px → 18px（「二つくらい」＝文字サイズの選択肢を2つ上げた値と読んだ・リードの判断）
   対象はこのページのこの段落だけ（他の一覧ページの紹介文は触らない）。戻すときはこのブロックを消す */
body.gasp-scenes-page.page-id-3297 .gs-stage-body > .wp-block-group:has(> p.has-text-align-center) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.gasp-scenes-page.page-id-3297 .gs-stage-body > .wp-block-group > p.has-text-align-center {
	text-align: left !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 1lh !important;
	font-size: 18px !important;
}
/* 16. 2026-10-05 右の列の中央寄せを左寄せに（全ページ）
   岡田さん（モダナイズの「まず『見える化』…」の節を添えて）「ここの寄せが他のページと揃ってないね」
   （コスト最適化の「当社の考え方」を添えて）「これの、下記も左寄せでいいんじゃないかな。SOLUTIONの全頁で同様でいい。」
   （Azure導入・移行の「次の一手」の節を添えて）「あと、このAzure移行は完了がゴールではありません。運用フェ～～とかの文言は、全頁で同じように左寄せにそろえようか。」
   「採用サイトも含めてでいい」
   本文（DB）の has-text-align-center が要素に直接付いていて、10 節の左揃え（親の .gs-approach-head 等）では負けていた。
   対象＝この3列の作り（body.gasp-scenes・.gs-lane）を使う全ページ＝投稿19本・固定ページ14本・採用の下層17本（10/5 リードが50本を確認）。
   当たるのは投稿14本（SOLUTION 3本・SERVICE／CASE 11本）と固定ページ6本（2・32・34・97・104・3297。96 は下の除外）。採用の17本は中央寄せの文が無く当たらない。
   採用トップ（37）はこの作りではないので対象外。
   同日の1回目は SOLUTION の6本（postid で絞り）だったのを、上の岡田さんの「全頁」「採用サイトも」で広げた。
   ボタン（a.wp-block-button__link）は対象外＝並びは 10 節の flex-start のまま。DB は変えない。戻すときはこのブロックを消す
   除外：96 会社概要（社名の由来「世界を舞台に…」の3行）＝岡田さん（同日・その画面を添えて）「ここの世界を～～の文言は中寄せでいいや。。。ごめん」。
   96 で当たっていたのはこの3行だけなので、ページごと外した（元の中央寄せに戻る） */
body.gasp-scenes:not(.page-id-96) .gs-lane .gs-stage-body :is(h1, h2, h3, h4, h5, h6, p).has-text-align-center {
	text-align: left !important;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* 16c. 2026-10-05 Microsoft製品導入（3020）「対象製品」のパネル：製品名の2列を左に寄せる
   岡田さん「この対象製品のパネルも左寄せでいいんじゃないかな」
   本文（DB）の横並びの箱に中央寄せ（is-content-justification-center ＝ justify-content:center）が付いていて、2列が真ん中に寄っていた。
   16 節は文字の寄せ（has-text-align-center）だけを拾うので、横並びの箱の寄せは別に外す。パネル（白い箱）の位置と幅は変えない。
   同じ形（帯の中の is-content-justification-center・ボタン以外）は他に 3855（エントリーの並び）と 104（取引先一覧・縦並び）にもあるが、指示外なので触らない。
   戻すときはこのブロックを消す */
body.postid-3020.gasp-scenes .gs-lane .gs-stage-body .is-horizontal.is-content-justification-center {
	justify-content: flex-start !important;
}

/* 16b. 2026-10-05 モダナイズ（95001）「- 当社のアプローチ（4ステップ） -」の前に1行あける
   岡田さん「当社のアプローチの前に一行空白を入れて」。1行＝この見出しの行の高さ（1lh）。
   この形の見出し（本文の h4.is-style-default）が汎用の節にあるのは SOLUTION の中で 95001 だけ（10/5 リードが6本で確認）。戻すときはこのブロックを消す */
body.postid-95001.gasp-scenes .gs-lane .gs-scene--section .gs-stage-body h4.is-style-default {
	margin-top: 1lh !important;
}

/* 17. 2026-10-05 「関連する取り組み」等の事例カード（クエリループ）の高さを揃える
   岡田さん（事例カード2枚の高さが違う画面を添えて）「このパネルの高さと、…」
   li はグリッドで同じ高さに伸びているが、中の白いパネル（.block-post-list-item）が中身の高さで止まっていた。
   投稿19本・固定ページの帯の中のクエリループ全部に効く（どれも同じ部品）。戻すときはこのブロックを消す */
body.gasp-scenes .gs-lane li.wp-block-post > .block-post-list-item {
	height: 100%;
	box-sizing: border-box;
}

/* 18. 2026-10-06 Pleasanter導入（3035）のヒーロー：副題を題と同じ大きさに
   松原さん（営業共有ノート「HP文言チェック」(13)）「ここは二つの話があるのに、主文、複文になっている。
   理美容向けITサロンソリューションへ展開 ⇒ ここを最低限同じ大きさの文字で表現すること」。
   副題（h3）の大きさ・太さ・行の高さを、上の 1. 節の h1（44px／700／1.3、767px 以下 30px）にそろえる。色・影・上の余白は h3 のまま。
   戻すときはこのブロックを消す */
body.postid-3035 .gs-scene--hero h3 {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.3;
}
@media (max-width: 767px) {
	body.postid-3035 .gs-scene--hero h3 { font-size: 30px; }
}
/* ===== 2026-09-28 コスト最適化ページ：レイアウト作り直し（試作） ここまで ===== */

/* ===== 2026-10-09 公式サイトのリンク（業務支援SaaS 3022 の TimeTracker RX／Pleasanter） =====
  岡田さん原文：「このリンクだけど、文章との間に一行開けて、下線をつけてリンクがあるのがわかるようにして。TimeTrackerも同様。」
  対象は本文で `gasp-official-link` を付けた段落だけ（recruit_rebuild/update_p3022_official_link_20261009.php）。
  変更前（実測）：上の文との間 0px・下線なし・文字と同じ色。
  上の空き＝その段落の行の高さ1つ分（1lh＝15px の字で 23.25px）。
  戻し方：このブロックを削除する。
*/
p.gasp-official-link {
	margin-top: 1lh !important; /* .margin_top_5_ ほか本文の段落の余白を詰める規則より後に効かせる */
}
p.gasp-official-link a[href] {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* ===== 2026-10-09 公式サイトのリンク ここまで ===== */