/* ===== 2026-09-28 トップ：スクロール演出（ヒーロー固定・SOLUTION/SERVICE/CASE止め進行・
 *  PROCESS進行・CTA幕） =====
 * 対とするJS＝top-scroll.js。読み込みはトップのみ・top.js の後。
 * 戻し方＝このファイルとtop-scroll.jsを削除し、functions.php の同名マーカーを削除する。
 * 一時停止だけなら add_filter( 'gasp_top_scroll_enabled', '__return_false' );
 *
 * 条件：固定は sticky のみ／pin-spacer等でJSが高さを足すことはしない／
 * transform は末端（ヒーロー用の演出）以外に使わない／rem禁止（テーマがルート10pxになる罠）。
 * 全体を @media (min-width:768px) の中に置く（スマホはJS側で最初から何も作らないが、
 * CSS側も二重に守る）。
 */

:root {
	/* ヒーローが止まる長さ。ここ1箇所で調整する。
	   2026-10-01 50vh → 100vh。岡田さん「トップでスクロールした時にここでかぶさりが止まる状態だけど
	   上までかぶせを止めなくていい。」＝50vh では面が画面の真ん中まで上がったところで止めが解け、
	   ヒーローの上半分が見えたまま一緒に流れていた。100vh で面が窓の上端（ヘッダーの裏）まで上がりきる。
	   ページ全体の長さは変わらない（空き .gasp-ts-hero-spacer と面の負マージンが同じ値で相殺する）。
	   戻すときは 50vh に戻す */
	--gasp-ts-hero-x: 100vh;
}

@media (min-width: 768px) {

	/* ---- 1) ヒーロー：sticky＋食い込み ---- */
	.gasp-ts-hero-wrap {
		position: relative;
		z-index: 0;
	}
	.gasp-ts-hero {
		position: sticky;
		top: min(calc(100vh - var(--gasp-ts-hero-h, 100vh)), 0px);
	}
	.gasp-ts-hero-spacer {
		height: var(--gasp-ts-hero-x);
	}
	/* 被さる面：不透明の地だけ（角丸・影は無し＝岡田さんが見て決める）。
	   display:flow-root は負のmargin-topでも自分の中の margin が親の外へ抜けないようにする保険 */
	.gasp-ts-face-wrap {
		position: relative;
		z-index: 1;
		display: flow-root;
		margin-top: calc(-1 * var(--gasp-ts-hero-x));
		background: var(--pt-body-bg-color, #141c3a);
		/* 2026-09-28 岡田さん「幅が足りてない」：面が本文幅しかなく（幅1083の窓で実測 958px）、
		   岡田さんの画面では右側からヒーローが見えていた。
		   地を画面の端まで広げる。100vw＋負marginは横あふれの原因になるので使わず、
		   box-shadow（スクロール領域に数えられない）で左右に塗り、clip-path で上下を面の高さに切る */
		box-shadow: 0 0 0 100vmax var(--pt-body-bg-color, #141c3a);
		clip-path: inset(0 -100vmax);
	}
	.gasp-ts-face-wrap > *:first-child {
		margin-top: 0;
	}

	/* ---- 2) PROCESS：既存の横並び5段＋体制3枚を進み具合で塗る（左ナビ・縦並びは撤去） ----
	   岡田さん指示（9/28）「既存の企画、設計が色を塗られて行って…スクロール度合いに沿って
	   これも色が塗られる動きじゃないかな」。DOM・レイアウトとも9/1時点の横並びのまま
	   （top-scroll.js側もDOMの組み替えをやめた）。塗りは top.css の進行ウェーブ
	   （.wp-block-group.has-card-bg-background-color::before）を流用し、時間ループの
	   アニメーションだけ止めて is-lit クラスの有無で opacity を直接制御する。
	   2026-09-29：PROCESSは節の自然な高さが窓に収まるとき（stepPin）は他節と同じ sticky＋走行区間
	   （steps=5・stepPx=160）で塗りが進み、収まらないときだけ従来の中心通過型（T=500px）に自動で
	   戻る（top-scroll.js processPaint参照）。is-litの付け外し自体はどちらの経路でも同じ＝この
	   ::before ルールに手を入れる必要はない。RESOURCESのチップ切替（旧T=300px）は9/29に撤去済み
	   （クリックのみに戻した。岡田さん原文「RESOURCESは高さを変えてアピールするほどの項目ではない」）。
	   値はどれも実測でない初期値・岡田さんが画面で決める。 */
	.gasp-ts-process-on .gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color::before,
	.gasp-ts-process-on .gasp-process-team > .wp-block-column .wp-block-group.has-card-bg-background-color::before {
		animation: none !important;
		opacity: 0;
	}
	.gasp-ts-process-on .gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color.is-lit::before,
	.gasp-ts-process-on .gasp-process-team > .wp-block-column .wp-block-group.has-card-bg-background-color.is-lit::before {
		opacity: 1;
	}

	/* ---- 2b) PROCESS：縦並びに組み替える（9/29）----
	   岡田さん（止めた PROCESS の画面を見て）「右に回転して、縦に並べたら？
	   左がPM、SE、Ops　右が企画→設計→実装→移行→運用　その下にSLA目安で。
	   背景も右に90度回転して、上から下に流れるように」
	   パネル（.gasp-process-panel）を左右2列のグリッドにする：上に導入文、左列＝「体制」＋PM/SE/Ops、
	   右列＝「導入の流れ」＋5段、下に SLA 目安。DOM は動かさない（CSS だけ）。
	   背景動画は 9/28 から90°回転版（nagare_bg_v.mp4・上から下へ流れる）が入っている（top.js）。
	   横長のパネルでは中央の帯しか見えなかったが、縦に長くなるぶん見える範囲が広がる。
	   縦に5枚並ぶと、今のカードの上下余白（40px）では高さが 1,100px を超えて多くの窓で止まれないため、
	   縦並びの間だけカードの上下余白を 16px・最小高さなしにする（リードの判断・岡田さん未確認）。
	   体制3枚は流れ5段と同じ高さに伸ばす（左右の列の下端を揃える＝リードの判断・岡田さん未確認）。
	   矢印（top.css の ::after「›」）は下向きにして段と段の間に置く。
	   効かせる条件＝html.gasp-ts-process-on（top-scroll.js の processPaint が付ける。processPaint が
	   初期化で失敗したら外れて 9/1 の横並びに戻る。止める仕組み（stepPin）だけがスクロール中に
	   失敗した場合は、このクラスは残る＝縦並びのまま、止めずに中心通過型の塗り（T=500）で進む。
	   窓が低くて止まらない時と同じ状態）。止めている間は下の 3) の規則でパネルが窓の残りいっぱいに伸び、カードも伸びる。
	   印刷：止めている間の引き伸ばしは印刷の共通規則（.gasp-ts-pin の height:auto）で外れる。縦のグリッド自体は
	   印刷でも残す（パネル自身が .gasp-ts-pin になり共通規則の display:block が当たるので、印刷側で grid に戻している。
	   止めていない時の見た目＝画面と同じ並びで印刷される見込み。※印刷プレビューでは未確認）。
	   間隔の値（列の間 32px・行の間 16px・カードの間 24px）は、矢印の丸（32px）が段の間に収まり、
	   止まれる窓を増やすよう置いたリードの判断（岡田さん未確認）。9/29 案A・B 適用後の実測：パネルの自然高 667px
	   ＝窓の高さ 763px 以上で止まる（窓幅 1230）。
	   カードの色の帯（top.css の進行ウェーブの ::before、90deg＝左から右）は縦並びでも向きを変えていない（※岡田さん未確認）。 */
	html.gasp-ts-process-on .gasp-process-panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
		grid-template-areas:
			"lead lead"
			"hteam hflow"
			"team flow"
			"sla sla";
		column-gap: 32px;
		row-gap: 16px;
	}
	html.gasp-ts-process-on .gasp-process-panel > .wp-block-spacer {
		display: none;
	}
	html.gasp-ts-process-on .gasp-process-panel > p.has-text-align-center {
		grid-area: lead;
		margin: 0;
	}
	/* パネル直下の h4 は「導入の流れ」「体制」の2つだけで、この順に並ぶ（9/29 実測）。:has を使うと
	   非対応ブラウザで見出しが自動配置に回って重なるため、順番（nth-of-type）で割り当てる */
	html.gasp-ts-process-on .gasp-process-panel > h4.wp-block-heading:nth-of-type(1) {
		grid-area: hflow;
		margin: 0;
	}
	html.gasp-ts-process-on .gasp-process-panel > h4.wp-block-heading:nth-of-type(2) {
		grid-area: hteam;
		margin: 0;
	}
	html.gasp-ts-process-on .gasp-process-panel > .gasp-process-flow,
	html.gasp-ts-process-on .gasp-process-panel > .gasp-process-team {
		flex-direction: column;
		flex-wrap: nowrap;
		margin: 0;
	}
	html.gasp-ts-process-on .gasp-process-panel > .gasp-process-flow {
		grid-area: flow;
		gap: 24px;
	}
	html.gasp-ts-process-on .gasp-process-panel > .gasp-process-team {
		grid-area: team;
		gap: 24px;
	}
	html.gasp-ts-process-on .gasp-process-panel > .is-content-justification-center {
		grid-area: sla;
		margin: 0;
	}
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column,
	html.gasp-ts-process-on .gasp-process-team > .wp-block-column {
		/* WP コアの列の規則（幅指定のある列は flex-grow:0）に勝つため !important */
		flex: 1 1 0 !important;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column > .wp-block-group.has-card-bg-background-color,
	html.gasp-ts-process-on .gasp-process-team > .wp-block-column > .wp-block-group.has-card-bg-background-color {
		flex: 1 1 auto;
		min-height: 0;
		/* カードの上下余白はブロックの style 属性（padding:4rem＝40px）で入っているため !important で上書き */
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	/* 9/29 案B：カードの中の見出しと説明を左右に並べる（縦並びの間だけ）。
	   岡田さん「なるほどな、じゃあAとBで移行か。」（B＝カードを横長にして節を低くし、止まれる窓を増やす）。
	   見出しの幅 7em は「企画」〜「運用」「PM」「SE」「Ops」が1行で収まる幅として置いたリードの判断（岡田さん未確認） */
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column > .wp-block-group.has-card-bg-background-color,
	html.gasp-ts-process-on .gasp-process-team > .wp-block-column > .wp-block-group.has-card-bg-background-color {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 16px;
	}
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column > .wp-block-group.has-card-bg-background-color > h4,
	html.gasp-ts-process-on .gasp-process-team > .wp-block-column > .wp-block-group.has-card-bg-background-color > h4 {
		flex: 0 0 7em;
		margin: 0 !important;
		text-align: left;
	}
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column > .wp-block-group.has-card-bg-background-color > p,
	html.gasp-ts-process-on .gasp-process-team > .wp-block-column > .wp-block-group.has-card-bg-background-color > p {
		flex: 1 1 auto;
		margin: 0 !important;
		text-align: left;
	}
	html.gasp-ts-process-on .gasp-process-flow > .wp-block-column:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -28px;
		left: 50%;
		transform: translateX(-50%) rotate(90deg);
	}

	/* ---- 3) SOLUTION・SERVICE・CASE 共通：止めて進める（sticky＋走行区間）----
	   2026-09-29：SOLUTION専用だった .gasp-ts-sol-* を、SERVICE節・CASE節にも同じ動きを付ける
	   岡田さん指示（9/29「技術別サービスも同じ感じでいいよ」「次は導入事例も対応したい」）を受けて
	   共通クラスへ書き換えた（top-scroll.js の stepPin と対）。状態は html ではなく包み要素（.gasp-ts-pin-wrap）の
	   is-pinned クラスと、その包み要素上のCSS変数に持たせる＝SOLUTIONとSERVICEが同時に
	   動いても互いのCSS変数を上書きしない（節ごとに独立して壊れる、の約束を維持）。

	   .gasp-ts-pin-wrap.is-pinned が付いているとき（＝節の自然な高さ＋ヘッダー高が窓に収まるとき）
	   だけ sticky と高さの引き伸ばしを効かせる。付いていない窓では .gasp-ts-pin は何の指定も
	   受けず今日と同じ（sticky無し・走行区間0＝spacer-hがJSで0pxに戻る）。
	   高さの引き伸ばしは「箱だけ」ではなく中身（見出し行は自然高のまま・パネル/本文/動画側は
	   flexで残りいっぱいに伸びる）。.gasp-solution-body は既存CSS（align-items:stretch）で
	   text/media が縦にstretchされる仕組みをそのまま使う（720行目付近・上のセクション参照）ので
	   ここではbody自身の高さをflex:1で確保するところまでで足りる。
	   見た目の帰結（リード実測 9/28・1920×1080、SOLUTION）：動画（object-fit:cover）は縦長に
	   切り取られ、文章欄（縦中央揃え）の上下に空きが出る。可否は岡田さんが画面で決める
	   （コードの不具合ではない） */
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin {
		position: sticky;
		top: var(--gasp-ts-pin-top, 0px);
		height: var(--gasp-ts-pin-avail-h, auto);
		display: flex;
		flex-direction: column;
		z-index: 2;
	}
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .wp-block-columns {
		flex: 0 0 auto;
	}
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .gasp-solution-panel,
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .gasp-service-panel,
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .gasp-case-flow {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	/* PROCESS（9/29）：止めるのはパネルそのもの（案A）。上の共通規則がパネルに display:flex を当てるので、
	   グリッド（2b）に戻す。高さは共通規則の「窓 − ヘッダー」になり、グリッドの3行目＝カードの行が伸びる */
	html.gasp-ts-process-on .gasp-ts-pin-wrap.is-pinned > .gasp-process-panel.gasp-ts-pin {
		display: grid;
	}
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .gasp-solution-panel > .gasp-solution-body,
	.gasp-ts-pin-wrap.is-pinned > .gasp-ts-pin > .gasp-service-panel > .gasp-solution-body {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* ---- CASE：カードの画像欄を窓の下端まで伸ばす（9/29・岡田さん「イでやってみようか」）----
	   経路＝.gasp-ts-pin > .gasp-case-flow（上のルールで縦flex化済み）→ .gasp-case-scroller →
	   .wp-block-query → ul(.wp-block-post-template) → li → カード(.block-post-list-item・
	   既存CSSで常時 height:100%/flex column) → .image-container（9/29実測で発見した包み要素。
	   figureとカードの間にあり、無指定だと自然高になって連鎖が切れる）→ 最後の画像の枠
	   （.wp-block-post-featured-image）だけが残りの高さを受け取る。見出し列（チップ7個の
	   wp-block-columns）は上のジェネリック規則で flex:0 0 auto のまま＝自然高を維持。
	   カードの枠・余白そのものは伸ばさない（画像の枠の中身＝img/videoだけが height:100%）。
	   横スクロール（overflow-x:auto は .gasp-case-scroller に既存のまま）には触れない。
	   img には !important を付ける＝common.css の「.block-post-list-item .image-container img
	   { height: fit-content !important; }」（CASE専用ではない共通ルール）が先に効いており、
	   詳細度だけでは height:100% が勝てないため（9/29 実機確認で発見）。 */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow > .gasp-case-scroller {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-scroller > .wp-block-query {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.gasp-ts-pin-wrap.is-pinned .wp-block-query > .wp-block-post-template {
		flex: 1 1 auto;
		min-height: 0;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-template > li > .block-post-list-item > .image-container {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .image-container > .wp-block-post-featured-image {
		flex: 1 1 auto;
		min-height: 0;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image > a {
		display: block;
		height: 100%;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image img,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image .gasp-card-movie {
		height: 100% !important;
	}
	/* ---- CASE：止めている間だけ、抜粋を画像の下端に重ねる（9/29）----
	   岡田さん（伸びた画像の画面を見て）「これであれば、文章の部分「延命・移行・再構築～～」も画像に
	   乗せちゃってもいいかもね。続きを読むだけは現状のままで。」
	   カードをグリッドにし、画像の包み（.image-container）と抜粋を同じ1行目に置いて抜粋を下端に寄せる。
	   見出し（h4）・「続きを読む」は2・3行目（h4は同日追加の指示で、白抜きの題があるカードでは消す＝下）。
	   DOMは動かさない（CSSだけ）。
	   余白の値は9/29実測：.image-container は左右 padding 15px・下 margin 25px、画像の角丸 12px。
	   白文字の下に敷く暗いグラデーションはリードの判断（写真の上で読めるようにするため・岡田さん未確認）。
	   pointer-events:none＝抜粋が重なった部分を押しても、下の画像リンク（記事へ）が今までどおり効くように。
	   止めていない間・収まらない窓では何も変わらない（is-pinned 配下だけ）。 */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-template > li > .block-post-list-item {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto auto;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .image-container {
		grid-area: 1 / 1;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt {
		grid-area: 1 / 1;
		/* 9/29 岡田さん「文字の位置を、物流WMS導入の少し下くらいにしてほしい」：
		   白抜きの題（.gasp-card-title）は画像の縦中央に出るので、抜粋の枠を画像の高さいっぱいに広げ、
		   上半分を空ける（::before が高さの50%）＋そこから p の margin-top 32px（題の文字の下半分＋少しの隙間。32 はリードが決めた値・岡田さんが画面で決める）あけて文を始める。
		   9/29 実測（1083×1538・物流）：題の文字 866〜890px、文 904〜973px＝題の14px下 */
		align-self: stretch;
		display: flex;
		flex-direction: column;
		position: relative;
		/* 画像のリンクに親テーマ patterns.min.css の「.block-post-list-item .image-container a { z-index:10 }」が
		   効いて抜粋の上に来るため、それより上に置く（9/29 ブラウザで styleSheets を照合して特定。
		   画面で抜粋が隠れているのを撮って判明＝数値だけ測った時は気づけなかった） */
		z-index: 11;
		margin: 0 15px 25px;
		padding: 0 16px 14px;
		/* 文が画像の中ほどに来るので、下から暗くするグラデーションは文の後ろに届かない。
		   代わりに白抜きの題（top.css 8/28）と同じ文字の影で読ませる（リードの判断・岡田さん未確認） */
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
		pointer-events: none;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt::before {
		content: "";
		flex: 0 0 50%;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt > p {
		margin-top: 32px;
		/* 9/29 止めている間は3行切り（top.css）をやめ、画像に収まる行数で切る（top-scroll.js の fitLines が
		   --gasp-case-lines に入れる。未設定なら今までと同じ3行）。全文が入る窓では「…」は出ない */
		-webkit-line-clamp: var(--gasp-case-lines, 3);
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt p {
		color: #fff;
	}
	/* 9/29 追加：岡田さん「いや、この部分もパネルに乗せちゃってほしいんだ。逆に白抜きパネルに残ってる
	   タイトル文言「物流WMS導入」はいらない」＝止めている間は白いカード側の見出し（h4）を出さない。
	   h4と読んだ根拠：
	   ・目視＝岡田さんが添えた切り抜きは、白い地に濃い色の太字「物流WMS導入」
	   ・DOM（9/29）＝この文字が画面に見えるのは .gasp-card-title と h4.wp-block-post-title の2つ
	     （img の alt と「続きを読む」内の読み上げ専用文字は画面に出ない）
	   ・計測（9/29 getComputedStyle）＝.block-post-list-item の地 rgb(255,255,255)、h4 の文字 rgb(41,41,75)
	     太さ600、.gasp-card-title の文字 rgb(255,255,255)＝切り抜きと合うのは h4
	   ＝岡田さんの「白抜きパネル」は白いカードのこと（コード内の呼び名「白抜き文字」とは別）と読んだ。
	   題は画像の上の白抜き文字（.gasp-card-title・8/28）が残る。止めていない間は今までどおり出る。
	   白抜き文字は動画を読み込めたカードにしか付かない（top.js 8/28：画面に近づいてから読み込み・
	   省データや読み込み失敗では画像のまま）ので、白抜き文字があるカードだけ見出しを消す（:has）。
	   :has 非対応のブラウザでは見出しが残る＝題が消えることはない側に倒す */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-title {
		grid-area: 2 / 1;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item:has(.gasp-card-title) > .wp-block-post-title {
		display: none;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-read-more {
		grid-area: 3 / 1;
		justify-self: start;
	}
	.gasp-ts-pin-wrap {
		position: relative;
	}
	.gasp-ts-pin-spacer {
		height: var(--gasp-ts-pin-spacer-h, 0px);
	}
}

/* 印刷：sticky解除・食い込み解除・進行表示は非表示（幕はtop-reveal.css側の@media printで解除） */
@media print {
	.gasp-ts-hero {
		position: static !important;
	}
	.gasp-ts-hero-spacer {
		height: 0 !important;
	}
	.gasp-ts-face-wrap {
		margin-top: 0 !important;
		/* 画面の端まで広げた地（box-shadow）と上下の切り取りは印刷では外す */
		box-shadow: none !important;
		clip-path: none !important;
	}
	.gasp-ts-pin {
		position: static !important;
		height: auto !important;
		display: block !important;
	}
	/* PROCESS はパネル自身が .gasp-ts-pin（9/29 案A）。印刷でも縦のグリッド（2b）のまま出す */
	html.gasp-ts-process-on .gasp-process-panel.gasp-ts-pin {
		display: grid !important;
	}
	.gasp-ts-pin-spacer {
		height: 0 !important;
	}
	/* CASE：画像の枠を窓に合わせて伸ばす指定も印刷では戻す（9/29追加分。.gasp-ts-pin が
	   display:block に戻る上の規則だけでは img の height:100% !important が残ってしまうため、
	   img まで明示的に元の200px（top.cssの既定値）へ戻す） */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow > .gasp-case-scroller,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-scroller > .wp-block-query,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-template > li > .block-post-list-item > .image-container,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .image-container > .wp-block-post-featured-image {
		display: block !important;
		height: auto !important;
	}
	.gasp-ts-pin-wrap.is-pinned .wp-block-query > .wp-block-post-template {
		height: auto !important;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image > a {
		display: block !important;
		height: auto !important;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image img,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-featured-image .gasp-card-movie {
		height: 200px !important;
	}
	/* CASE：抜粋を画像に重ねる指定も印刷では戻す（カードは既存の縦flexへ・抜粋は通常の流れへ） */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .wp-block-post-template > li > .block-post-list-item {
		display: flex !important;
		flex-direction: column;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		text-shadow: none !important;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt::before {
		content: none !important;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt > p {
		margin-top: 0 !important;
		-webkit-line-clamp: 3 !important;
	}
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt,
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-excerpt p {
		color: inherit !important;
	}
	/* 見出しは印刷では全カード出す（:has で絞らない）＝止めていない時の見た目に戻すのが印刷の約束のため */
	.gasp-ts-pin-wrap.is-pinned .gasp-case-flow .block-post-list-item > .wp-block-post-title {
		display: block !important;
	}
}
/* ===== 2026-09-28 トップ：スクロール演出（ヒーロー固定・PROCESS進行・CTA幕） ここまで ===== */