@charset "UTF-8";

/* トップ画面 */

/* スライダー */
@media screen and (min-width: 1025px) {
    .pt-header-layout-1 .pt-header .pt-header-inner {
		background-color: unset !important;
	}
	.pt-header-layout-1 .pt-header .pt-header-inner .pt-header-container {
		background-color: rgb(255,255,255,0.7);
	}
	.pt-header-layout-1 .pt-header .pt-header-inner .pt-header-container:after {
		transition : 0.3s;
	}
}

.main_slider {
	width: 100vw;
  	margin-left: calc(50% - 50vw);
  	margin-right: calc(50% - 50vw);
	margin-top: -120px;
}
/* 2026-10-07 タンさん指摘 S1①：767px以下はヘッダーが不透明（上の1025px以上の透過指定が当たらない）なので、-120px で上へ潜らせると
 * ヒーローの上端 約120px がヘッダーの裏に隠れ、見出しの1行目が切れる。この幅では潜らせない。
 * 768px以上は top-scroll の止める計算に関わるので触らない。戻し方：この media ブロックを削除。 */
@media screen and (max-width: 767px) {
	.main_slider {
		margin-top: 0;
	}
}
.main_slider .wp-block-cover {
	height: 100vh;
}
.main_slider .swiper-slide .wp-block-cover__inner-container{
	margin-top: 10vh;
}

.main_slider .swiper-slide img {
	transition: transform .6s ease; 
}
.main_slider .swiper-slide:hover img {
	transform: scale(1.1);
}
.main_slider h1 {
	background: #353f68;
    width: fit-content;
	mix-blend-mode: hard-light;
    padding-left: var(--gasp-sp-12);
}
.main_slider p {
	width: fit-content;
}

.main_slider .swiper-slide-active h1,
.main_slider .swiper-slide-active p,
.main_slider .swiper-slide-active a {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: SliderFadeIn;
}
.main_slider .swiper-slide-active h1 {
  	animation-delay: 1s; /* 待ち時間 */
}
.main_slider .swiper-slide-active p {
  	animation-delay: 1.2s; /* 待ち時間 */
}
.main_slider .swiper-slide-active a {
  	animation-delay: 1.4s;
}

.main_slider .swiper-button-prev:after,
.main_slider .swiper-button-next:after {
	color: white;
}
.main_slider .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 30px;
}
.main_slider .swiper-pagination-bullet {
    width: 40px;
    height: 3px;
    margin: 0 var(--gasp-sp-12) !important;
    background-color: white;
    border-radius: 0;
}

@keyframes SliderFadeIn {
	from {
		opacity: 0;
		filter: blur(10px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@media (max-width: 767px) {
	.main_slider h1 {
		font-size: 6vw !important;
	}
	.main_slider p {
		font-size: 3.5vw !important;
	}
	.content-wrapper {
		margin-top: auto;
	}
}


/* プリローダー */
.site-preloader {
	opacity: 0;
	visibility: hidden;
}
.site-main-preloader {
	opacity: 1;
	visibility: visible;
	background: radial-gradient(circle at center, #1a1a1a, #0d0d0d);
	animation: PreloaderFadeOut 1s ease 3s forwards;
}
.site-main-preloader .preloader-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-main-preloader .preloader-inner .preloader-item {
	display: flex;
    flex-direction: column;
    align-items: center;
}
.site-main-preloader .preloader-inner .preloader-item .title {
	font-size: var(--gasp-fs-40);
	letter-spacing: 8px;
	color: #e5e5e5;
	z-index: 2;
	opacity: 0;
	transform: translateY(10px);
	animation: PreloaderFadeIn 1.8s ease forwards;
}
.site-main-preloader .preloader-inner .preloader-item .line {
	width: 140px;
	height: 1px;
	margin: var(--gasp-sp-24) 0;
	background: linear-gradient(90deg, transparent, #aaa, transparent);
	opacity: 0.6;
}
.site-main-preloader .preloader-inner .preloader-item .sub {
	font-size: var(--gasp-fs-14);
	color: #999;
	letter-spacing: 2px;
	opacity: 0;
	animation: PreloaderFadeIn 2s ease 0.5s forwards;
}

.site-main-preloader .preloader-inner .ring {
	position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    animation: ripple 4s ease-out infinite;
}
.site-main-preloader .preloader-inner .ring:nth-child(2) { animation-delay: 1s; }
.site-main-preloader .preloader-inner .ring:nth-child(3) { animation-delay: 2s; }

@keyframes ripple {
	0% {
		transform: scale(0.7);
		opacity: 0.4;
	}
	100% {
		transform: scale(2.2);
		opacity: 0;
	}
}
@keyframes PreloaderFadeIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes PreloaderFadeOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

/* ジグザグ表示 */

@media screen and (min-width: 1025px) {
	.zigzag li:nth-child(2) {
	margin-top: var(--gasp-sp-128);
	}
	.zigzag li:nth-child(odd):not(:nth-child(1)) {
		margin-top: -100px;
	}
}

/* ===== 2026-08-25 バグ修正（段階A）ここから ===== */

/* [A-1] 投稿一覧の「次へ »」で /page/2/ 等に移動するたびWELCOMEが再生される問題：
   ページ送り済み（WPが body に paged クラスを付与）ではプリローダーを出さない。
   ※2026-08-26：「初回訪問のみ再生」の制御（html.gasp-welcome-shown／top.jsのsessionStorage）は
     岡田判断で削除し、原本どおり「トップページを開くたびに毎回再生」へ戻した。
     この body.paged の抑止だけを残している */
body.paged .site-main-preloader {
	animation: none;
	opacity: 0;
	visibility: hidden;
}

/* [A-2] スライダー見出しの「文字の背景色」：
   hard-light合成の半透明帯は背景画像次第で色が濁って見えるため帯を廃止し、
   オーバーレイの強化＋文字影で可読性を確保する */
.main_slider .wp-block-cover__background.has-background-dim {
	background: linear-gradient(135deg,
		rgba(20, 28, 58, 0.78) 0%,
		rgba(20, 28, 58, 0.50) 55%,
		rgba(24, 34, 70, 0.32) 100%) !important;
	opacity: 1 !important;
	/* 注意：この上書きにより、編集画面のカバー「オーバーレイの不透明度」スライダーは効かなくなる */
}
.main_slider h1 {
	background: transparent;
	mix-blend-mode: normal;
	padding-left: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65), 0 0 2px rgba(0, 0, 0, 0.5);
	text-wrap: balance; /* 1語だけ2行目に落ちる不格好な折り返しの回避 */
}
.main_slider p {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.60), 0 0 2px rgba(0, 0, 0, 0.45);
}

/* ===== 2026-08-25 バグ修正（段階A）ここまで ===== */

/* ===== 2026-08-25 段階B：ページ送り時のスライダー抑止 ここから =====
   投稿一覧の「次へ»」で /page/2/ 等に移動した際は、全画面スライダーを出さず一覧から表示を開始する
   ※2026-08-26：岡田判断で「非表示」はやめた。スライダーは残したまま、
     一覧の先頭が画面の一番上に来る位置から表示する（上にスクロールすればスライダーが見える）。
     位置合わせは top.js 末尾の追記ブロック（scrollPastHero）で行う */
html.gasp-skip-hero .site-main-preloader {
	animation: none;
	opacity: 0;
	visibility: hidden;
}
/* 2026-10-08 タンさん指摘 K1：岡田さん「K1は訪問時に一回だけ表示するができたらありがたい。」
   同じタブで2回目以降のトップは WELCOME を出さない（クラスは template-parts/header/site-preloader.php の inline script が付ける）。
   戻し方：この規則を削除 */
html.gasp-welcome-seen .site-main-preloader {
	animation: none;
	opacity: 0;
	visibility: hidden;
}
/* ===== 2026-08-25 段階B：ページ送り時のスライダー抑止 ここまで ===== */


/* ===== 2026-08-26 トップ＝動画ヒーロー（案A：シネマティック・ネイビー） ここから =====
   方針：固定ページ3144（原本のスライダー）はDB無変更のまま、
         背景の写真だけをCSS/JSで動画に差し替える。
         見出し・本文・「詳しく見る →」リンク・WELCOMEプリローダーは原本のまま。
   スイッチ：top.js が .main_slider に .gasp-hero-movie を付けたときだけ動画表示になる。
             （JSが動かない環境では何も付かず、原本の写真スライダーがそのまま出る＝安全側） */

/* [1] 背景レイヤー（top.js が .main_slider の先頭に挿入する）
       動画の読み込み前・モバイル・省データ時はポスター画像（背景画像）が見える */
.gasp-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background-color: #141c3a;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}
.gasp-hero-bg video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* 紺のオーバーレイ。段階A-2でスライダーに入れた指定と同じ配色（文字の可読性を揃えるため） */
.gasp-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* 2026-09-02：ヒーロー動画を雲（hero_cloud.mp4）に差し替えたとき、明るくなって本文が
	 * 読めなくなったので幕を 0.86/0.70/0.58 まで濃くした。**その後ヒーローは元の
	 * オフィス撮影（hero_cut6_A.mp4）に戻したので、幕もこの値に戻してある。**
	 *
	 * 覚えとして残す（動画を差し替えるときは幕も測り直すこと）：
	 * 雲の動画に対する実測（実フレーム6点・合成後の輝度で計算）は
	 *   幕0.32 … 最悪 3.28:1 ／ 本文が乗る帯の17.1%が4.5:1未満
	 *   幕0.58 … 最悪 4.93:1 ／ NG 0%
	 * ＝**幕の濃さは動画の明るさに紐づいている。動画だけ替えると本文が読めなくなる。** */
	background: linear-gradient(135deg,
		rgba(20, 28, 58, 0.78) 0%,
		rgba(20, 28, 58, 0.50) 55%,
		rgba(24, 34, 70, 0.32) 100%);
}

/* [2] スライド側：写真と各スライドのオーバーレイを消して、背後の動画レイヤーを見せる。
       文字ブロックはそのまま残るので、原本の文章とリンクは維持される。
       ※各スライドのオーバーレイを残すとフェード中に2枚重なって暗さが脈打つため、
         オーバーレイは上の [1] に1枚だけ置く */
.main_slider.gasp-hero-movie .swiper-wrapper {
	position: relative;
	z-index: 1;
}
.main_slider.gasp-hero-movie .swiper-slide .wp-block-cover__image-background {
	opacity: 0;
	/* 注意：この指定により、編集画面でスライドのカバー画像を差し替えても表示に出なくなる
	   （表示されるのは背景の動画。写真スライダーに戻す場合は top.js 末尾の追記ブロックごと外す） */
}
.main_slider.gasp-hero-movie .swiper-slide .wp-block-cover__background.has-background-dim {
	opacity: 0 !important;
	background: transparent !important;
	/* 注意：段階A-2（同ファイル上部）と同じく、編集画面のカバー「オーバーレイの不透明度」および
	   オーバーレイ色の設定はスライダーに対して効かない。紺の被せは上の .gasp-hero-bg::after で一括指定 */
}
.main_slider.gasp-hero-movie .swiper-slide,
.main_slider.gasp-hero-movie .swiper-slide .wp-block-cover {
	background-color: transparent;
}
/* [2-b] 表示中のスライドの文字だけを見せる。
   原本は「6枚が同じ位置に重なっていて、写真が不透明だから下の枚が隠れる」という作りのため、
   写真を消した本方式では文字が重なって見えてしまう。表示中以外の文字ブロックを畳んで回避する
   （swiper側のopacityには手を触れない） */
.main_slider.gasp-hero-movie .swiper-slide .wp-block-cover__inner-container {
	opacity: 0;
	transition: opacity 0.8s ease;
}
.main_slider.gasp-hero-movie .swiper-slide-active .wp-block-cover__inner-container {
	opacity: 1;
}
/* 動画の上に矢印・ページネーションを出す */
.main_slider.gasp-hero-movie .swiper-button-prev,
.main_slider.gasp-hero-movie .swiper-button-next,
.main_slider.gasp-hero-movie .swiper-pagination {
	z-index: 2;
}

/* [3] 見出しのタイピング表示
       以下は .gasp-typing-on（＝タイピングを実行する条件が揃ったときだけJSが付ける）配下に置く。
       付かない場合（JSが動かない・動きを減らす設定）は原本のフェードインがそのまま効く */

/* JSが打ち始められるようになるまで見出しを隠す。JSが動かなければ8秒で自動解除（top.js FALLBACK_MS） */
.main_slider.gasp-type-init .swiper-slide h1 {
	visibility: hidden;
}
/* 見出しは既存のフェードイン（SliderFadeIn）を止める＝タイピングとの二重演出を避ける */
.main_slider.gasp-typing-on .swiper-slide-active h1 {
	animation-name: none;
	opacity: 1;
	filter: none;
}
/* 本文・リンクは「打ち終わってから」出す。
   ＝CSSの固定待ち時間ではなく、JSが打ち終わりに付ける .gasp-typed を合図にする
   （固定待ちにすると、初回訪問のWELCOME待ちの分だけ本文が先に出てしまう） */
.main_slider.gasp-typing-on .swiper-slide-active p,
.main_slider.gasp-typing-on .swiper-slide-active a {
	animation-name: none;
	opacity: 0;
}
.main_slider.gasp-typing-on .swiper-slide-active.gasp-typed p {
	animation-name: SliderFadeIn;
	animation-delay: 0.05s;
}
.main_slider.gasp-typing-on .swiper-slide-active.gasp-typed a {
	animation-name: SliderFadeIn;
	animation-delay: 0.35s;
}
/* カーソル（タイピング中のみ表示） */
.main_slider .gasp-typing::after {
	content: "";
	display: inline-block;
	width: 0.06em;
	min-width: 2px;
	height: 1em;
	margin-left: 0.06em;
	vertical-align: -0.1em;
	background: currentColor;
	animation: gaspCaret 0.9s step-end infinite;
}
@keyframes gaspCaret {
	0%, 49% { opacity: 0.85; }
	50%, 100% { opacity: 0; }
}

/* [4] 動きを減らす設定（prefers-reduced-motion: reduce）の扱いは top.js 側で完結している。
   ＝動画を読み込まずポスター画像だけを敷き、タイピングもしない（この[3]のクラス自体が付かない）。
   そのためCSS側での上書きは不要（以前ここに置いていた上書きは、クラスが付かない条件下では
   到達しない記述だったため削除した。2026-08-26 点検指摘） */

/* [5] サイバーレイヤー（2026-08-27 追加）
       top.js が .gasp-hero-bg の中に2枚差し込み、スライド切替のたびに濃淡を入れ替える。
       mix-blend-mode:screen なので、素材の暗い部分は消えて光る部分だけがヒーロー映像に乗る。
       上の [1] の紺オーバーレイ（.gasp-hero-bg::after）は、このレイヤーより後に描かれる＝
       サイバーレイヤーの上から紺が被る。
       ※ opacity の初期値は 0。top.js は2枚そろっているときだけ値を入れ、
         途中で1枚落ちた場合は残った側も 0 に戻す（＝何も乗らない＝安全側） */
.gasp-hero-bg .gasp-hero-fx {
	opacity: 0;
	mix-blend-mode: screen;
	/* 入れ替わりにかける時間は top.js の FX_SWAP_MS が要素に直接指定する（既定4秒） */
	transition-property: opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 4s;
}
/* 動きを減らす設定のときは、そもそも top.js が動画レイヤー自体を作らないので
   ここでの打ち消しは不要（上の[4]と同じ理由）。念のためアニメーションだけ止めておく */
@media (prefers-reduced-motion: reduce) {
	.gasp-hero-bg .gasp-hero-fx { transition: none; }
}

/* ===== 2026-08-26 トップ＝動画ヒーロー（案A） ここまで ===== */



/* ===== 2026-08-28 SOLUTIONカードの動画化 ここから ===== */
/* トップ（固定ページ2806）のSOLUTIONクエリループのカード画像に、
   投稿ページと同じ動画（sol_*.mp4）を重ねる。挿入はtop.jsの同日追記ブロック。
   画像は残したまま上に動画を被せる＝レイアウトは画像が保持し、読めない環境では画像のまま（安全側） */
.gasp-card-movie {
    position: relative;
    display: block;
    overflow: hidden; /* ホバー拡大などで中身がカード外へはみ出さないように */
    border-radius: var(--gasp-r-12);
}
.gasp-card-movie > .gasp-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--gasp-r-12); /* カード画像のインラインstyleと同じ値 */
    opacity: 0;
    transition: opacity 0.4s, transform 0.8s; /* transformの0.8sは元画像のホバー拡大と同じ時間 */
    /* 投稿ページのアイキャッチ動画（single.css 8/28ブロック）と同じ減光 */
    filter: brightness(0.6) saturate(0.85);
    pointer-events: none; /* クリックは下のリンクに通す */
}
.gasp-card-movie.gasp-card-playing > .gasp-card-video {
    opacity: 1;
}
/* 再生が始まったら元画像は消す。テーマのホバー拡大(scale)が元画像に掛かると
   動画の両サイドにはみ出して見えるため（8/28 岡田さん指摘） */
.gasp-card-movie.gasp-card-playing img {
    visibility: hidden;
}
/* ホバー時の拡大は動画側に引き継ぐ（元画像のscale演出と同等） */
.gasp-card-movie.gasp-card-playing:hover > .gasp-card-video {
    transform: scale(1.1);
}
/* 白抜きタイトル（8/28 岡田さん指示）。動画の再生中だけ重ねる */
.gasp-card-movie > .gasp-card-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gasp-sp-8) var(--gasp-sp-16); /* 旧: 0.5rem 1rem。ルート10pxのため実質5px/10pxになっていた（点検指摘・8/28修正） */
    text-align: center;
    color: #fff;
    /* カード下の通常タイトル（.wp-block-post-title 実測 22px/600）と同じ大きさ（8/28 岡田指示）。
       remはこのテーマのルートが10pxで見た目が小さくなるためpx指定 */
    font-weight: 600;
    font-size: var(--gasp-fs-20);
    line-height: var(--gasp-lh-tight);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
    z-index: 1;
}
.gasp-card-movie.gasp-card-playing > .gasp-card-title {
    opacity: 1;
}
/* ===== 2026-08-28 SOLUTIONカードの動画化 ここまで ===== */

/* ===== 2026-08-28 フィルタチップ ここから =====
   モックのCasesSection（業種フィルタ）と同じ「選択中=塗り／非選択=アウトラインのピル」。
   色はモックの紫（ブランド）ではなく、サイトのアクセント変数を使う（岡田さんへの経緯MD記録案件）。
   DOMはtop.js側で注入。JS無効時はこのCSSが当たる要素自体が存在しない＝安全側。 */
.gasp-case-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gasp-sp-8);
    margin-top: var(--gasp-sp-12);
}
.gasp-case-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--gasp-r-pill);
    border: 1px solid var(--pt-button-bg);
    background: transparent;
    color: var(--pt-button-bg);
    /* 8/28画面レビューで「ボタンが小さすぎる」指摘。原因はrem指定
       （このテーマはルート10pxなので0.8rem=8pxしか出ない）。px指定に直して拡大した。
       スマホでも押しやすいよう min-height 40px（岡田さん指示のタップ領域目安） */
    font-size: var(--gasp-fs-16);
    line-height: var(--gasp-lh-tight);
    padding: var(--gasp-sp-12) var(--gasp-sp-24);
    min-height: 40px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.gasp-case-chip:hover {
    background: color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
}
.gasp-case-chip.is-active {
    background: var(--pt-button-bg);
    color: #fff;
}
/* フィルタで隠すカード。動画・アニメ用クラスと共存できるようdisplayだけ変える */
.gasp-case-hidden {
    display: none !important;
}
/* ===== 2026-08-28 フィルタチップ ここまで ===== */

/* ===== 2026-08-28 セクション見た目強化 ここから =====
   「導入の流れ・体制」「会社情報」（8/28追記の自作ブロック）の見た目をモック準拠に強化。
   スコープ用クラスはtop.js側でJS注入（DBのHTML自体は変えていない＝会社概要の行組みだけ
   別途DB側で対応、詳細はupdate_page2806_sections.phpのコメント参照）。 */

/* 流れ5枚の間に矢印（モックの ChevronRight 相当）。最後のカードの後ろには付けない */
.gasp-process-flow > .wp-block-column {
    position: relative;
}
.gasp-process-flow > .wp-block-column:not(:last-child)::after {
    content: "\203A";
    position: absolute;
    top: 50%;
    right: -18px;
    transform: translateY(-50%);
    /* 8/28画面レビューで「矢印が小さくて見えない」指摘。旧値はrem指定で実質16px相当しか出ていなかった
       （ルート10pxのテーマのため）。px指定＋丸背景を足して視認性を上げた */
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--pt-button-bg) 12%, #fff);
    font-size: var(--gasp-fs-20);
    line-height: var(--gasp-lh-1);
    color: var(--pt-button-bg);
    z-index: 1;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    /* スマホは縦積みなので矢印は下向きに回転するか、狭くて見苦しければ非表示（岡田さん指示どおり非表示を選択） */
    .gasp-process-flow > .wp-block-column:not(:last-child)::after {
        display: none;
    }
}
/* 流れ5枚の見出し（企画/設計/実装/移行/運用）はアクセント色（モック: text-accent） */
.gasp-process-flow h4.wp-block-heading {
    color: var(--pt-button-bg);
}
/* 8/28画面レビュー: カードの高さが不揃い（説明文の折り返し行数がカードごとに違うため）。
   min-heightで揃えて縦中央寄せにする（モックの「1枚の資料」に見える指示への対応） */
.gasp-process-flow .wp-block-group.has-card-bg-background-color,
.gasp-process-team .wp-block-group.has-card-bg-background-color {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
/* 節の中見出し（導入の流れ／体制）もアクセント色に寄せる。is-style-defaultはこの2見出しだけに
   付けている（カード側のh4には付いていない）ので、これだけで狙って当たる */
.gasp-process-section h4.is-style-default {
    color: var(--pt-button-bg);
}
/* 8/28画面レビュー:「1枚の資料」に見えるよう節全体を薄い背景帯でまとめ、次セクション
   （会社情報）との間にSLAバッジがくっついて見えないよう余白を追加（既存の5vhスペーサーと
   同等以上を確保） */
.gasp-process-section {
    background: color-mix(in srgb, var(--pt-button-bg) 4%, transparent);
    border-radius: var(--gasp-r-12);
    padding: var(--gasp-sp-48) var(--gasp-sp-24);
    margin-bottom: var(--gasp-sp-64);
}
/* SLAバッジ：既存の青グラデ実装から、サイトのアクセント基調へ配色だけ差し替え。
   インラインstyle（background/box-shadow）に勝つため!important。構造は変えていない。
   8/28画面レビューでサイズも拡大（旧実装のpaddingは小さめだった） */
.gasp-sla-badge {
    background: color-mix(in srgb, var(--pt-button-bg) 12%, #fff) !important;
    box-shadow: none !important;
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 35%, transparent);
    padding: var(--gasp-sp-12) var(--gasp-sp-24) !important;
    display: inline-flex !important;
}
.gasp-sla-badge p {
    color: var(--pt-button-bg) !important;
    font-size: var(--gasp-fs-16) !important;
    font-weight: 700 !important;
}

/* パートナー・アライアンスのチップを3列グリッドへ（モック: grid-cols-3）。
   既存はGutenbergのflex-wrapレイアウト（インラインstyle）なので!importantで上書き */
.gasp-partner-chips {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--gasp-sp-8) !important;
}
@media screen and (max-width: 767px) {
    .gasp-partner-chips {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* ===== 2026-08-28 セクション見た目強化 ここまで ===== */

/* ===== 2026-08-28 画面レビュー改善 ここから =====
   岡田さんの画面レビュー6点対応の見た目部分（JS側の対応はtop.js同名マーカー参照）。
   このテーマはルートfont-sizeが10px（一般的な16pxではない）ため、remで書くと
   意図した見た目より小さく出る。この節は px 指定で統一する。 */

/* ---- 1) SOLUTIONタブパネル ---- */
.gasp-solution-legacy-hidden {
    display: none !important;
}
.gasp-solution-panel {
    margin-top: var(--gasp-sp-24);
}
.gasp-solution-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gasp-sp-8);
    margin-bottom: var(--gasp-sp-24);
}
.gasp-solution-tab {
    box-sizing: border-box;
    border-radius: var(--gasp-r-pill);
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 40%, transparent);
    background: transparent;
    color: inherit;
    font-size: var(--gasp-fs-16);
    font-weight: 500;
    line-height: var(--gasp-lh-tight);
    padding: var(--gasp-sp-12) var(--gasp-sp-16);
    min-height: 40px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.gasp-solution-tab:hover:not(.is-active) {
    background: color-mix(in srgb, var(--pt-button-bg) 12%, transparent);
}
.gasp-solution-tab.is-active {
    background: var(--pt-button-bg);
    color: #fff;
    border-color: var(--pt-button-bg);
}
.gasp-solution-body {
    display: flex;
    align-items: stretch;
    gap: var(--gasp-sp-32);
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 30%, transparent);
    background: color-mix(in srgb, var(--pt-button-bg) 6%, #fff);
    border-radius: var(--gasp-r-12);
    padding: var(--gasp-sp-32);
    box-sizing: border-box;
}
.gasp-solution-text {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.gasp-solution-subtitle {
    font-size: var(--gasp-fs-20);
    font-weight: 700;
    line-height: var(--gasp-lh-tight);
    margin: 0 0 var(--gasp-sp-16);
}
.gasp-solution-lead {
    font-size: var(--gasp-fs-16);
    line-height: var(--gasp-lh-loose);
    margin: 0 0 var(--gasp-sp-24);
    color: inherit;
    opacity: 0.85;
}
.gasp-solution-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gasp-sp-24);
}
.gasp-solution-link {
    font-size: var(--gasp-fs-14);
    font-weight: 500;
    color: var(--pt-button-bg);
    text-decoration: none;
}
.gasp-solution-link:hover {
    text-decoration: underline;
}
.gasp-solution-link-sub {
    color: inherit;
    opacity: 0.7;
}
.gasp-solution-media {
    flex: 1 1 45%;
    min-height: 240px;
    border-radius: var(--gasp-r-12);
    overflow: hidden;
    background: #000;
    position: relative; /* 白抜きタイトルの基準（8/28追記） */
}
/* 動画上の白抜き項目名（8/28 岡田さん指示＝カード時代の表示を復活）。
   カードの白抜きタイトル（.gasp-card-title）と同じ体裁 */
.gasp-solution-media > .gasp-solution-media-title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gasp-sp-8) var(--gasp-sp-16);
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: var(--gasp-fs-20);
    line-height: var(--gasp-lh-tight);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.gasp-solution-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media screen and (max-width: 900px) {
    .gasp-solution-body {
        flex-direction: column;
        padding: var(--gasp-sp-24);
    }
    .gasp-solution-media {
        min-height: 200px;
    }
}

/* ---- 2) SERVICE節：ホバー強化（モックのhover:shadow相当） ---- */
.gasp-service-cards .block-post-list-item {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.gasp-service-cards .block-post-list-item:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

/* ---- 4) 会社概要：ラベル固定幅のtable風行組み ----
   patch_company_rows.php で作った行（wp:group flex）に、top.js側でスコープ用クラスを付けている。
   ラベル列を固定幅にすることで、値の開始位置が行ごとに揃う（岡田さん指摘「ガタガタ」の原因は
   ラベル幅が可変で値の左端が行ごとにズレて見えていたこと） */
.gasp-company-info-row {
    align-items: baseline;
}
.gasp-company-info-label {
    flex: 0 0 6em;
    text-align: left;
    margin: 0;
}
.gasp-company-info-value {
    /* 2026-10-15：basis を auto から 0 に（min-width:0 も）。auto だと長い値（所在地）が横に収まらず、
       行の flex-wrap で値ごと次の行へ落ちてラベルの下に回り込んでいた（岡田さん指摘「ずれちゃってる。所在地が」）。
       0 にすると値はラベルの右の残り幅に収まり、その中で折り返す。戻し方＝flex: 1 1 auto; に戻し min-width の行を消す */
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    margin: 0;
}
/* 2026-10-15：スマホ幅ではラベル欄を 6em → 5em（最長の「代表取締役」がちょうど5文字）。
   幅375pxで値の欄が152pxしかなく「東京都中央区銀座1-18-2」（163px・メイリオ14px太字で実測）が1行に入らなかったため。
   5em で値の欄は約166px。戻し方＝このメディアクエリを消す */
@media (max-width: 480px) {
    .gasp-company-info-label {
        flex-basis: 5em;
    }
}
/* 認証・許認可チップのサイズ統一（Pマーク/派遣許可で文字数が違うため高さが不揃いだった） */
.gasp-cert-chips {
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--gasp-sp-8) !important;
}
.gasp-cert-chips > .wp-block-group {
    box-sizing: border-box;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* パートナーチップも高さを揃える（3列グリッドは既存ブロックで対応済み、ここは高さのみ） */
.gasp-partner-chips > .wp-block-group {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* ---- 6) お知らせ：カード型→行リスト型（モック: 日付＋タイトルの簡素な行） ---- */
.gasp-news-list .block-post-list-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: var(--gasp-sp-16) 0 !important;
    display: flex !important;
    align-items: baseline;
    gap: var(--gasp-sp-24);
}
.gasp-news-list .block-post-list-item:last-child {
    border-bottom: none !important;
}
.gasp-news-list .wp-block-post-date {
    flex: 0 0 auto;
    font-size: var(--gasp-fs-14);
    opacity: 0.6;
}
.gasp-news-list .wp-block-post-title {
    font-size: var(--gasp-fs-16) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}
/* ===== 2026-08-28 画面レビュー改善 ここまで ===== */

/* ===== 2026-08-31 SERVICE節の横スクロール ここから =====
   岡田さん指示（8/31）「技術別サービスを、横にスクロールして増えていく形に」。
   最終形＝**素の横スクロール列＋横スクロールバー**。
   スクロールで自動的に流れる方式（sticky固定・位置連動・ホイール振替）は 8/31 に岡田さん判断で
   すべて取り下げ（作って外した案の記録は top.js の同日追記ブロック先頭のコメントが正）。

   レイアウトは「見出しが上・カード列が下に全幅」（SOLUTION節と同じ形）。
   DOMの組み替えは top.js 側。JSが動かない回は原本のジグザグ2列グリッドのまま＝安全側。

   注意：このテーマはルートのfont-sizeが10pxなのでremは使わない（8/28の指摘と同じ理由）。 */

/* 見出しの2列組の下に全幅で置く。16px＋スクローラーの上padding 8px＝実質24px
   （このページの他の追記で使っている最小余白に合わせた） */
.gasp-service-flow {
    position: relative;
    margin-top: var(--gasp-sp-16);
}
/* 見出しだけが残った2列組は、下に余白を作らない（カード列との間が空きすぎるため） */
.gasp-service-flow-heading {
    margin-bottom: 0 !important;
}

/* ---- 横スクロールする箱 ---- */
.gasp-service-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* 端まで送ったときにブラウザの「戻る」に繋がらないように */
    /* 上8px：overflow-y:hidden なので、8/28に入れたホバー演出（3px浮き上がり＋上向きの影）が
       ここで切れる。実測でカードの上の余裕が0pxだったため確保した（点検役の指摘・8/31）。
       下16px：カードと横スクロールバーの間 */
    padding: var(--gasp-sp-8) 0 var(--gasp-sp-16);
    /* Firefox など標準プロパティ側。auto＝既定の太さ（thin にすると細くなり気づきにくい） */
    scrollbar-width: auto;
    scrollbar-color: var(--pt-button-bg) color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
}
/* キーボードでこの箱に入ったときに、どこにいるか分かるようにする（矢印キーで送れる） */
.gasp-service-scroller:focus-visible {
    outline: 2px solid var(--pt-button-bg);
    outline-offset: 4px;
    border-radius: var(--gasp-r-4);
}
/* Chrome/Edge/Safari 側。既定の細いバーだと「横に送れる」ことに気づけないので太めにして常時見せる */
.gasp-service-scroller::-webkit-scrollbar {
    height: 10px;
}
.gasp-service-scroller::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
    border-radius: var(--gasp-r-pill);
}
.gasp-service-scroller::-webkit-scrollbar-thumb {
    background: var(--pt-button-bg);
    border-radius: var(--gasp-r-pill);
}
.gasp-service-scroller::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--pt-button-bg) 80%, #000);
}

/* ---- カードを横1列に並べる ---- */
/* 原本は is-layout-grid の2列グリッド（.wp-container-core-post-template-... が
   display:grid と grid-template-columns を持つ）。横1列にするため上書きする */
.gasp-service-flow .wp-block-post-template {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: var(--gasp-sp-24) !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}
/* カード幅360px＝原本の2列グリッドでのカード実測値（481px）より狭く、
   全幅1,288pxのときに3.4枚が並んで「まだ続く」と分かる幅として選んだ値。実測に基づく最適値ではない */
.gasp-service-flow .wp-block-post-template > li {
    flex: 0 0 360px;
    max-width: 360px;
    margin-top: 0 !important; /* .zigzag（1025px以上で ±100〜120px の段差）を打ち消す */
    scroll-snap-align: start;
}
/* スマホ幅ではカード360pxが画面より広く、1枚が両端で切れて読みにくい（390px幅で実測：
   カード360px＞表示領域332px）。画面幅に対する割合にして、右端に次のカードを覗かせる */
@media screen and (max-width: 767px) {
    .gasp-service-flow .wp-block-post-template > li {
        flex-basis: 86%;
        max-width: 86%;
    }
}
/* カードの中身：高さを揃える（横並びでは行の高さが最も高いカードに揃うため、
   画像の高さと本文の行数を固定しないと1枚だけ間延びして見える） */
.gasp-service-flow .wp-block-post-template > li > .block-post-list-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* 画像200px＝カード幅360pxに対して約16:9になる高さ。動画アイキャッチ（8/28）も同じ比率で作ってある。
   実測に基づく最適値ではなく、カード全体（画像＋タイトル2行＋本文3行）が424pxに収まる配分として選んだ */
.gasp-service-flow .wp-block-post-featured-image img,
.gasp-service-flow .wp-block-post-featured-image .gasp-card-movie {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.gasp-service-flow .wp-block-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gasp-service-flow .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ===== 2026-08-31 SERVICE節の横スクロール ここまで ===== */

/* ===== 2026-08-31 CASE節の横スクロール ここから =====
   岡田さん指示（8/31）「導入事例も…上で選んだら下のスクロール領域に表示される形に」。
   DOMの組み替えとチップ連携は top.js 側の同名ブロック。ここは見た目のみ。
   値はSERVICE節（上の 2026-08-31 ブロック）と同じ（節を跨いで同じカード幅・同じ操作感にするため）。
   注意：このテーマはルートのfont-sizeが10pxなのでremは使わない（8/28の指摘と同じ理由）。 */

.gasp-case-flow {
    position: relative;
    margin-top: var(--gasp-sp-16);
}
/* 見出し＋チップだけが残った2列組は、下に余白を作らない */
.gasp-case-flow-heading {
    margin-bottom: 0 !important;
}
/* 見出し＋チップの列を全幅へ（原本はインラインstyleで flex-basis:20%）。
   チップ7個が横一列に並べる幅を確保する＝SERVICE節には無いCASE節だけの追加 */
.gasp-case-flow-heading > .gasp-case-heading-col {
    flex-basis: 100% !important;
}
/* クエリループが抜けて空になった80%列（top.js が空を確認してから付けるクラス） */
.gasp-case-flow-heading > .gasp-case-empty-col {
    display: none;
}

/* ---- 横スクロールする箱（SERVICE節と同じ値） ---- */
.gasp-case-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; /* 端まで送ったときにブラウザの「戻る」に繋がらないように */
    /* 上8px＝ホバーの浮き上がり（3px＋上向きの影）が overflow-y:hidden で切れないための余裕。
       下16px＝カードと横スクロールバーの間（SERVICE節と同じ配分） */
    padding: var(--gasp-sp-8) 0 var(--gasp-sp-16);
    scrollbar-width: auto;
    scrollbar-color: var(--pt-button-bg) color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
}
/* キーボードでこの箱に入ったときに、どこにいるか分かるようにする（矢印キーで送れる） */
.gasp-case-scroller:focus-visible {
    outline: 2px solid var(--pt-button-bg);
    outline-offset: 4px;
    border-radius: var(--gasp-r-4);
}
/* 既定の細いバーだと「横に送れる」ことに気づけないので太めにして常時見せる。
   絞り込みで溢れなくなった回はバーごと出ない（overflow-x:auto の標準挙動＝岡田さん確認済みの動き） */
.gasp-case-scroller::-webkit-scrollbar {
    height: 10px;
}
.gasp-case-scroller::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
    border-radius: var(--gasp-r-pill);
}
.gasp-case-scroller::-webkit-scrollbar-thumb {
    background: var(--pt-button-bg);
    border-radius: var(--gasp-r-pill);
}
.gasp-case-scroller::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--pt-button-bg) 80%, #000);
}

/* ---- カードを横1列に並べる ---- */
/* 原本は .zigzag 付きの2列グリッド（2枚目以降に margin-top:120px の段差。8/31実DOMで実測）。
   横1列にするため上書きする */
.gasp-case-flow .wp-block-post-template {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: var(--gasp-sp-24) !important;
    align-items: stretch;
    margin: 0 !important;
    padding: 0 !important;
}
.gasp-case-flow .wp-block-post-template > li {
    flex: 0 0 360px;
    max-width: 360px;
    margin-top: 0 !important; /* .zigzag の段差（margin-top:120px）を打ち消す */
    scroll-snap-align: start;
}
/* 絞り込みで内側カードが隠れた li は枠ごと畳む（top.js の syncRow が付けるクラス。
   8/28の gasp-case-hidden は内側の .block-post-list-item に付くため、liの360px枠が残る対策） */
.gasp-case-flow .wp-block-post-template > li.gasp-case-li-hidden {
    display: none !important;
}
/* スマホ幅：SERVICE節と同じ理由（カード360px＞表示領域）で画面幅比にする */
@media screen and (max-width: 767px) {
    .gasp-case-flow .wp-block-post-template > li {
        flex-basis: 86%;
        max-width: 86%;
    }
}
/* カードの中身：高さ・画像・行数の揃え（SERVICE節と同値。
   カード構造がSERVICEと同一なのは8/31に実DOMで確認済み） */
.gasp-case-flow .wp-block-post-template > li > .block-post-list-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.gasp-case-flow .wp-block-post-featured-image img,
.gasp-case-flow .wp-block-post-featured-image .gasp-card-movie {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.gasp-case-flow .wp-block-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gasp-case-flow .wp-block-post-excerpt__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ===== 2026-08-31 CASE節の横スクロール ここまで ===== */

/* ===== 2026-08-31 残り4節のレイアウト統一 ここから =====
   岡田さん指示（8/31）＝資料／導入の流れ・体制／会社情報／お知らせ（→ニュース）を
   「英字ラベル＋見出しが上（左寄せ）・中身が下に全幅」の節構成へ統一。
   DOMの組み替え・ラベル挿入・文言差し替えは top.js 側の同名ブロック。ここは見た目のみ。
   注意：このテーマはルートのfont-sizeが10pxなのでremは使わない。 */

/* ---- 20%/80%の2列組を縦積みに折る（資料・ニュースで使用） ----
   flex-wrap:wrap の !important は必須（.wp-container-core-columns-is-layout-f383d393 の
   nowrap に、!important 無しのインライン指定では勝てないことを8/31に実測）。
   flex-basis の !important は原本のインラインstyle（flex-basis:20%/80%）に勝つため（CASE節と同じ） */
.gasp-stack-columns {
    flex-wrap: wrap !important;
}
.gasp-stack-columns > .gasp-stack-heading-col,
.gasp-stack-columns > .gasp-stack-body-col {
    flex-basis: 100% !important;
}

/* ---- 英字ラベル（導入の流れ・体制／会社情報に新設） ----
   値は原本のRESOURCESラベル（素の段落）の実測値：16px・weight 400・rgb(40,36,36)・margin 0 */
.gasp-section-label {
    font-size: var(--gasp-fs-16);
    font-weight: 400;
    color: #282424;
    margin: 0;
    text-align: left;
}

/* ---- 見出しの左寄せ（導入の流れ・体制／会社情報） ----
   対象はセクション直下のH3とリード文だけ。H4（「導入の流れ」「体制」）とカード内の
   中央寄せは8/28に岡田さんレビュー済みの見た目なので触らない */
.gasp-left-section > h3.wp-block-heading {
    text-align: left !important;
}
.gasp-left-section > p.wp-block-paragraph {
    text-align: left !important;
}
/* ===== 2026-08-31 残り4節のレイアウト統一 ここまで ===== */

/* ===== 2026-08-31 会社情報カードの整列 ここから =====
   岡田さん指示（8/31）「この部分をもうちょっと見栄えよく整理できるかな」（会社情報の3カード）。
   実測した乱れの正体（8/31）＝
   ①カードの箱がカラム高さ522pxに対し437/399pxで止まり、下端とボタン位置が3枚でバラバラ
   ②会社概要の行が内容幅に縮む（98〜221px）うえ、枠線が4行だけに付き従業員数の行には無い
   ③カード内の wp-block-spacer＋一律24pxマージンが「死に空白」になっている（会社概要の中央の大穴）
   対処はCSSのみ（DB・JS無変更）。セレクタは8/28ブロックが付けたスコープクラスを使う。 */

/* ①カードをカラムの高さいっぱいに伸ばし、ボタンを3枚とも下端に揃える */
.gasp-company-section .wp-block-column > .wp-block-group.has-card-bg-background-color {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* margin-top:auto が余りの縦をすべて吸収する＝ボタンの上に空きが偏らない。
   padding-top はボタンと直前の中身の最小間隔（吸収される margin-top の代わり） */
.gasp-company-section .wp-block-column > .wp-block-group.has-card-bg-background-color > .wp-block-buttons {
    margin-top: auto !important;
    padding-top: var(--gasp-sp-24);
}

/* ②会社概要の行を全幅に揃え、区切り線を全行で統一（最後の行だけ線なし）。
   元の枠（2.4px #E9E8FF・4行だけ）はここで消して引き直す。
   線幅1px＝区切り線は主張させない一般的な罫線幅（元の2.4pxは「行ごとの枠」として太く見えていた側の値）。
   色 #E9E8FF は元の枠色を踏襲。padding 8px 0＝元の6px 0のままだと線を足したとき行が詰まって
   見えたため+2px。
   行の親（縦組みグループ）も内容幅に縮んでカード中央に浮くので、カード幅いっぱいに広げる。
   このセレクタ（is-vertical直下グループ）は3カード中、会社概要カードにしか該当しないことを
   実DOMで確認済み（8/31。代表メッセージ0・会社概要1・パートナー0） */
.gasp-company-section .has-card-bg-background-color > .wp-block-group.is-vertical {
    width: 100%;
    box-sizing: border-box;
}
.gasp-company-section .gasp-company-info-row {
    width: 100%;
    border: none !important;
    border-bottom: 1px solid #e9e8ff !important;
    padding: var(--gasp-sp-8) 0;
}
.gasp-company-section .gasp-company-info-row:last-of-type {
    border-bottom: none !important;
}

/* ③カード内のスペーサーは死に空白になるだけなので出さない（間隔は既存の24pxマージンに任せる）。
   3カード共通で効かせるのは意図どおり：該当は会社概要2つ＋パートナー2つで（代表メッセージには無い。
   8/31実DOM確認）、いずれも間隔目的のみ。ボタンが margin-top:auto で下端固定になった後は
   スペーサーの間隔が「ボタン上の余白の偏り」にしかならない */
.gasp-company-section .has-card-bg-background-color > .wp-block-spacer {
    display: none;
}
/* ===== 2026-08-31 会社情報カードの整列 ここまで ===== */

/* ===== 2026-08-31 節背景（画像・動画） ここから =====
   岡田さん指示（8/31）＝5要素に背景を設定。クラス付与と動画レイヤー挿入は top.js 側の同名ブロック。
   基調＝「白ベール越しにうっすら」（岡田さん確認済み）。方式は page.css 段階B の白93%方式の応用。
   注意：このテーマはルートのfont-sizeが10pxなのでremは使わない。 */

/* ---- 会社情報3カードの背景画像 ----
   URLは top.css からの相対（../images/section/）＝JSでのテーマURL逆算が不要。
   白ベールの濃さは各行のrgba第4引数1箇所で調整できる。
   代表メッセージだけ0.92＝「よーく見ないとわからないくらい」（岡田さん指定 8/31）。
   画像ファイル自体も個人名判読不能までぼかし済み（σ7・原本はWeb配下に無い） */
.gasp-company-section .gasp-cardbg-message {
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url(../images/section/msg_note.jpg);
    background-size: cover;
    background-position: center;
}
.gasp-company-section .gasp-cardbg-profile {
    background-image: linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)), url(../images/section/office_sign.jpg);
    background-size: cover;
    background-position: center;
}
.gasp-company-section .gasp-cardbg-partner {
    background-image: linear-gradient(rgba(255, 255, 255, 0.90), rgba(255, 255, 255, 0.90)), url(../images/section/ginza_view.jpg);
    background-size: cover;
    background-position: center;
}

/* ---- 動画背景の土台 ----
   レイヤー（.gasp-secbg）はホスト節の第1子に入る absolute の箱。
   overflow:hidden と角丸はレイヤー側に持たせ、節本体の overflow は触らない
   （SLAバッジ等の既存要素への波及を避けるため）。24px＝.gasp-process-section の実測角丸に合わせた */
.gasp-secbg-host {
    position: relative;
}
/* 中身をレイヤーより前面に（z-index:autoの子はabsoluteの後勝ちに負けるため明示） */
.gasp-secbg-host > *:not(.gasp-secbg) {
    position: relative;
    z-index: 1;
}
.gasp-secbg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--gasp-r-12);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}
.gasp-secbg.is-playing {
    opacity: 1;
}
.gasp-secbg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 白ベール（動画の上・中身の下）。濃さは節ごとに1箇所 */
.gasp-secbg::after {
    content: "";
    position: absolute;
    inset: 0;
}
.gasp-secbg-process::after {
    background: rgba(255, 255, 255, 0.84);
}
/* 2026-09-01：資料節の動画背景は岡田さん指示で廃止（top.jsの同名ブロック内コメント参照）。
   「資料節の箱化」.gasp-resources-section（padding 40px 24px・角丸24px）は削除したまま
   （箱なし＝新レイアウト＝CASE型のままが正。ここは戻していない）。
   2026-09-28 同日中に一度「動画を戻す」で `.gasp-secbg-resources` を使う白ベールを足したが、
   岡田さん指示「動画はいらなくないかな。パネルもいらない」で撤回・恒久的に無し
   （top.js側でターゲット自体を削除済み＝この要素は生成されない）。ルールも削除した。 */
/* ===== 2026-08-31 節背景（画像・動画） ここまで ===== */

/* ===== 2026-08-31 会社情報カードの文字拡大 ここから =====
   岡田さん指示（8/31）「会社概要とパートナーアライアンスは文字が小さいので、代表メッセージを
   含めてもう少し縦に大きくしてもいいので読める文字のサイズに」。
   実測（8/31）：会社概要の行（ラベル・値）とチップ（認証・パートナー）が**9px**だった
   ＝DB側のrem系指定がルート10pxで縮む既知の罠（8/28チップと同根）。代表メッセージ本文は16pxで問題なし。
   カードは等高flex（16章）なので、文字が増えた分は3枚そろって縦に伸びる（岡田さん許可済み）。 */
.gasp-company-section .gasp-company-info-label,
.gasp-company-section .gasp-company-info-label p {
    font-size: var(--gasp-fs-14) !important;
}
.gasp-company-section .gasp-company-info-value,
.gasp-company-section .gasp-company-info-value p {
    font-size: var(--gasp-fs-14) !important;
}
.gasp-company-section .gasp-cert-chips p {
    font-size: var(--gasp-fs-14) !important;
    line-height: var(--gasp-lh-tight);
}
.gasp-company-section .gasp-partner-chips p {
    font-size: var(--gasp-fs-14) !important;
    line-height: var(--gasp-lh-tight);
}
/* ===== 2026-08-31 会社情報カードの文字拡大 ここまで ===== */

/* ===== 2026-09-01 導入の流れカードの色変遷（進行ウェーブ） ここから =====
   岡田さん指示（9/1）：①「左から順番に各ボックスの背景色が変遷していくように。グラデーションでスムーズに」
   →②同日訂正「左から右に、工程が遷移していくイメージで色が移動していく動きを。通過した工程は白に戻す」。
   方式＝設計役の3案比較（A:疑似要素opacityウェーブ／B:background-positionで帯を横断／C:行全体スイープ）
   から案Aを採用：カード内に合成専用のオーバーレイ（::before）を置き、その opacity だけを keyframes で動かす。
   ・テーマプリセット .has-card-bg-background-color は background-color に !important 付きで出力される
     （この規則は実ファイルには無く、WPコアのGlobal Stylesが<head>の#global-styles-inline-cssに動的生成する。
     2026-09-01にローカル複製のブラウザで実物を確認済み：
     background-color: var(--wp--preset--color--card-bg) !important;）。
     CSSアニメーションは author の !important に負ける（transition > !important > animation）。
     そのため background-color を直接動かす書き方は「書けても黙って効かない」＝最初から排除し、
     動かすのは疑似要素の opacity のみ（コンポジタ合成＝再ペイントなし）
   ・アニメが動く条件＝ (prefers-reduced-motion: no-preference) and (min-width: 782px)。
     それ以外（動きを減らす設定・縦積み幅・古いブラウザ）は下の静的ランプに自動で落ちる
     ＝どの環境でも「順序」の意味は伝わる（真っ白で止まる／濃色で固まる失敗モードがない）
   ・782px＝WPコアの列縦積み点（781px以下で縦積み）。既存の矢印非表示（「セクション見た目強化」
     ブロック）は767px基準のため基準が2つ並ぶ＝768〜781pxは縦積み＋静的ランプ＋矢印あり（既存踏襲の癖）
   ・「体制」3枚には適用しない＝並列の役割に進行のハイライトを流すと「Opsが最終段階」の誤読を作るため
   ・nth-child(1)〜(5)は5列決め打ち。列数が変わったら本ブロックの色境界とdelayを要更新
     （未定義になったカードはエラーなく白単色に戻るだけで気づきにくい）
   ・ピーク濃度26%＝h4のアクセント青が文字色無変更で読める上限（概算コントラスト3.4:1・
     太字ラージテキスト基準3:1。#216be9はテーマ既定値で、カスタマイザーでの上書き有無は※未確認）
   ・初見が静止画になり得る：ループ14秒中、点灯は先頭12秒。到達時が静止区間だと2秒間動いて見えない
     （当初は10秒中6秒・静止4秒。9/1岡田さん指示「流れは倍くらい遅く・周期の待ちは半分」で現値に変更）。
     ビューポート到達起動はJS（IntersectionObserver）が要るため見送り（SERVICE節の「リスナーを置かない」前例）。
     速度・重なり・濃度の調整箇所＝::beforeのanimation-duration／各nth-childのanimation-delay／color-mixの%
   戻し方＝このブロックを消すだけ（DB・JS・既存ブロック無変更） */

/* --- ベース：静的チェーングラデ（アニメ無効環境のフォールバック） ---
   カードkを境界色(k-1)→(k)の2ストップにし、カードNの右端色＝N+1の左端色で隙間越しに1本の流れに見せる。
   境界値＝アクセント色の白混合 6%→10%→14%→18%→22%→26%。
   始点6%＝節の帯背景（「2026-08-28 セクション見た目強化」のaccent 4%）にカード1が沈まない値 */
.gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color {
    background-image: linear-gradient(var(--gasp-flow-dir, 90deg), var(--gasp-flow-from), var(--gasp-flow-to));
}
.gasp-process-flow > .wp-block-column:nth-child(1) .wp-block-group.has-card-bg-background-color {
    --gasp-flow-from: color-mix(in srgb, var(--pt-button-bg) 6%, #fff);
    --gasp-flow-to: color-mix(in srgb, var(--pt-button-bg) 10%, #fff);
}
.gasp-process-flow > .wp-block-column:nth-child(2) .wp-block-group.has-card-bg-background-color {
    --gasp-flow-from: color-mix(in srgb, var(--pt-button-bg) 10%, #fff);
    --gasp-flow-to: color-mix(in srgb, var(--pt-button-bg) 14%, #fff);
}
.gasp-process-flow > .wp-block-column:nth-child(3) .wp-block-group.has-card-bg-background-color {
    --gasp-flow-from: color-mix(in srgb, var(--pt-button-bg) 14%, #fff);
    --gasp-flow-to: color-mix(in srgb, var(--pt-button-bg) 18%, #fff);
}
.gasp-process-flow > .wp-block-column:nth-child(4) .wp-block-group.has-card-bg-background-color {
    --gasp-flow-from: color-mix(in srgb, var(--pt-button-bg) 18%, #fff);
    --gasp-flow-to: color-mix(in srgb, var(--pt-button-bg) 22%, #fff);
}
.gasp-process-flow > .wp-block-column:nth-child(5) .wp-block-group.has-card-bg-background-color {
    --gasp-flow-from: color-mix(in srgb, var(--pt-button-bg) 22%, #fff);
    --gasp-flow-to: color-mix(in srgb, var(--pt-button-bg) 26%, #fff);
}
/* 縦積み幅ではグラデ方向も上→下へ（流れの向きと揃える。閾値はWPコアの縦積み点781pxに合わせた） */
@media screen and (max-width: 781px) {
    .gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color {
        --gasp-flow-dir: 180deg;
    }
}

/* --- 進行ウェーブ（動きを許可した環境・PC幅のみ） --- */
/* 2026-10-07 タンさん指摘 S3：min-width:782px を外した（9/1「縦積みの幅では流さない」の理由は 9/29 にPCも縦並びになって消えた）。
   767px以下でも波を流す。768px以上は top-scroll の塗りが上書きするので変わらない。戻し方＝下の条件を (prefers-reduced-motion: no-preference) and (min-width: 782px) に戻す（2箇所：進行ウェーブ・体制）。 */
@media (prefers-reduced-motion: no-preference) {
    /* ベースのランプを外してプリセットの白背景に戻す＝「通過した工程は白」が成立。
       isolation:isolate はオーバーレイのz-index:-1がカードの外（節の帯）へ逃げないための封じ込め。
       これによりカードは恒常的にスタッキングコンテキストになる＝将来カード内に
       z-index依存の要素を足すときは前提が変わる点に注意 */
    .gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color {
        background-image: none;
        position: relative;
        isolation: isolate;
    }
    /* 合成専用オーバーレイ。点灯時も左→右の勾配（18→26%）を持たせ、
       初回指示の「グラデーション」と進行方向の示唆を残す。
       border-radius:inherit＝カードのインラインstyle（16px）に自動追従 */
    .gasp-process-flow > .wp-block-column .wp-block-group.has-card-bg-background-color::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: -1;
        background: linear-gradient(90deg,
            color-mix(in srgb, var(--pt-button-bg) 18%, #fff),
            color-mix(in srgb, var(--pt-button-bg) 26%, #fff));
        opacity: 0;
        animation: gaspFlowWave 14s ease-in-out infinite;
    }
    /* 点灯4秒（立ち上がり2秒・減衰2秒）×5枚＝スイープ12秒＋静止2秒＝周期14秒。
       delay 2秒刻み＝減衰2秒と隣の立ち上がり2秒が全面クロスフェードになり、ピークが2秒ごとに右へ渡る。
       %は14秒基準（1s≒7.1429%）：立ち上がり終わり=2s=14.2857%・減衰終わり=4s=28.5714% */
    .gasp-process-flow > .wp-block-column:nth-child(2) .wp-block-group.has-card-bg-background-color::before {
        animation-delay: 2s;
    }
    .gasp-process-flow > .wp-block-column:nth-child(3) .wp-block-group.has-card-bg-background-color::before {
        animation-delay: 4s;
    }
    .gasp-process-flow > .wp-block-column:nth-child(4) .wp-block-group.has-card-bg-background-color::before {
        animation-delay: 6s;
    }
    .gasp-process-flow > .wp-block-column:nth-child(5) .wp-block-group.has-card-bg-background-color::before {
        animation-delay: 8s;
    }
    @keyframes gaspFlowWave {
        0% { opacity: 0; }
        14.2857% { opacity: 1; }
        28.5714% { opacity: 0; }
        100% { opacity: 0; }
    }
}

/* 矢印の丸背景：既存の「セクション見た目強化」ブロック（accent 12%＋白）は静的ランプの
   カード2以降（12%超）に沈むため、白ソリッド＋accent系の枠線へ後勝ちで上書き。
   ウェーブ動作時の白カード上でも成立する見た目。
   8/28「小さくて見えない」対応を経た箇所の変更なので岡田さんの画面レビュー対象に含める */
.gasp-process-flow > .wp-block-column:not(:last-child)::after {
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 35%, transparent);
}
/* ===== 2026-09-01 導入の流れカードの色変遷（進行ウェーブ） ここまで ===== */

/* ===== 2026-09-01 体制カードの役割連動点灯 ここから =====
   岡田さん指示（9/1）「企画の色が変わったらPMにも同時に色をつける、設計に色が付いたらSEにも、
   移行に色がついたらOpsにも、運用に色がついたらPMは外れる」。
   方式＝上の「進行ウェーブ」ブロックの案Aをそのまま体制3枚（.gasp-process-team）へ拡張
   （::beforeオーバーレイのopacityのみ動かす。新たな方式候補は無いため設計役は通していない）。
   流れ側が2秒のパルスなのに対し、体制側は「関与している間は点いたまま」の持続点灯。
   ・同期の根拠＝流れ側と同じ14秒ループ・同じdocumentタイムライン起点なので、%が同じ時刻なら毎周期そろう
     （流れ側＝delay 0〜8s＋rise 0→14.2857%／体制側＝delay 0でkeyframesの%に時刻を直書き）
   ・時刻表（14s=100%・2s=14.2857%。9/1岡田さん指示「流れは倍くらい遅く・待ちは半分」で
     10秒周期から変更。流れ側の点灯窓＝企画0-2s/設計2-4s/実装4-6s/移行6-8s/運用8-10s、減衰は各+2s）：
     PM =企画と同時点灯(0→2s)・点きっぱなし・運用の点灯と同時に消灯(8→10s)
     SE =設計と同時点灯(2→4s)・点きっぱなし・運用の点灯と同時に消灯(8→10s)
         （当初はサイクル終端消灯の仮置きだったが、9/1岡田さん追加指示「運用まで行ったらSEも外れる」で確定）
     Ops=移行と同時点灯(6→8s)・点きっぱなし・サイクル終端で消灯(10→12s)
     ※Opsの消灯タイミングは岡田さん指示に無い＝「運用の消灯と同時（サイクル終端）」をリード仮置き。画面レビューで要確認
   ・点灯色＝フラット（accent 22%＝流れ側グラデ18〜26%の中間）。役割には方向の意味が無いため勾配を付けない
   ・動く条件は流れ側と同一メディアクエリ。アニメ無効環境・縦積み幅では体制は白のまま
     （静的な色を残すと「並列の役割に順序がある」誤読を作るため。設計役9/1の整理を踏襲）
   ・nth-child(1)〜(3)＝PM/SE/Opsの並び順決め打ち。体制の列数・並びが変わったら要更新
   戻し方＝このブロックを消すだけ（DB・JS・既存ブロック無変更） */
/* 2026-10-07 タンさん指摘 S3：min-width:782px を外した（9/1「縦積みの幅では流さない」の理由は 9/29 にPCも縦並びになって消えた）。
   767px以下でも波を流す。768px以上は top-scroll の塗りが上書きするので変わらない。戻し方＝下の条件を (prefers-reduced-motion: no-preference) and (min-width: 782px) に戻す（2箇所：進行ウェーブ・体制）。 */
@media (prefers-reduced-motion: no-preference) {
    .gasp-process-team > .wp-block-column .wp-block-group.has-card-bg-background-color {
        position: relative;
        isolation: isolate;
    }
    .gasp-process-team > .wp-block-column .wp-block-group.has-card-bg-background-color::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: -1;
        background: color-mix(in srgb, var(--pt-button-bg) 22%, #fff);
        opacity: 0;
        animation-duration: 14s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    .gasp-process-team > .wp-block-column:nth-child(1) .wp-block-group.has-card-bg-background-color::before {
        animation-name: gaspTeamPM;
    }
    .gasp-process-team > .wp-block-column:nth-child(2) .wp-block-group.has-card-bg-background-color::before {
        animation-name: gaspTeamSE;
    }
    .gasp-process-team > .wp-block-column:nth-child(3) .wp-block-group.has-card-bg-background-color::before {
        animation-name: gaspTeamOps;
    }
    /* %は14秒基準：2s=14.2857% / 4s=28.5714% / 6s=42.8571% / 8s=57.1429% / 10s=71.4286% / 12s=85.7143% */
    @keyframes gaspTeamPM {
        0% { opacity: 0; }
        14.2857% { opacity: 1; }
        57.1429% { opacity: 1; }
        71.4286% { opacity: 0; }
        100% { opacity: 0; }
    }
    @keyframes gaspTeamSE {
        0%, 14.2857% { opacity: 0; }
        28.5714% { opacity: 1; }
        57.1429% { opacity: 1; }
        71.4286% { opacity: 0; }
        100% { opacity: 0; }
    }
    @keyframes gaspTeamOps {
        0%, 42.8571% { opacity: 0; }
        57.1429% { opacity: 1; }
        71.4286% { opacity: 1; }
        85.7143% { opacity: 0; }
        100% { opacity: 0; }
    }
}
/* ===== 2026-09-01 体制カードの役割連動点灯 ここまで ===== */

/* ===== 2026-09-01 流れ・体制カードの等高化 ここから =====
   岡田さん指示（9/1）「箱のサイズもそろえられるかな」。
   乱れの正体（9/1実測・幅1382px）＝流れ5枚が194×4＋169px（説明文の折り返し行数の差。
   「2026-08-28 セクション見た目強化」のmin-height:150pxは下限を揃えるだけで、超えた分は揃わない）。
   対処＝「2026-08-31 会社情報カードの整列」と同じ手：カードをカラムの高さいっぱいに伸ばす。
   WPコアの列flexは既定でカラム同士を行の高さにストレッチするので、height:100%で
   一番高いカードに全員が揃う（行が違えば高さは違ってよい＝流れ行と体制行は揃えない）。
   縦積み幅では行高さの共有が無くなり各カードが内容高さに戻るだけ（害なし。
   9/1にモバイル幅エミュレーションで実測済み＝縦積み状態で流れ・体制とも全カード150px）。
   中身の縦中央寄せは8/28ブロックのjustify-content:centerがそのまま効く。
   戻し方＝このブロックを消すだけ（DB・JS無変更） */
.gasp-process-flow > .wp-block-column > .wp-block-group.has-card-bg-background-color,
.gasp-process-team > .wp-block-column > .wp-block-group.has-card-bg-background-color {
    height: 100%;
}
/* ===== 2026-09-01 流れ・体制カードの等高化 ここまで ===== */

/* ===== 2026-09-01 資料節リフレッシュ（チップ＋横スクロール） ここから =====
   経緯・判断はtop.jsの同名ブロック冒頭コメント参照。★仮カードを含むため持ち込みゲート対象。
   値はCASE節（「2026-08-28 フィルタチップ」「2026-08-31 CASE節の横スクロール」）から複製して
   gasp-rsc- に付け替えた（gasp-case-* への相乗り禁止の理由はJS側コメント）。
   rem禁止（このテーマはルート10pxでremが縮む既知の罠）。
   戻し方＝このブロックとtop.jsの同名ブロックを消すだけ */

/* 旧カード側の列（hrefが空のボタンだけの列）を畳む。クラスはJS付与＝JS無効時は原本のまま */
.gasp-rsc-legacy-hidden {
    display: none;
}
/* 見出し＋チップだけが残った2列組は、下に余白を作らない（CASE節と同値） */
.gasp-rsc-flow-heading {
    margin-bottom: 0 !important;
}
/* 見出し列を全幅へ（stackColumns不成立の回の保険。成立時は既存の100%指定と同居するだけ） */
.gasp-rsc-flow-heading > .gasp-rsc-heading-col {
    flex-basis: 100% !important;
}

/* ---- 横スクロールする箱（CASE節と同値） ---- */
.gasp-rsc-flow {
    position: relative;
    margin-top: var(--gasp-sp-16);
}
.gasp-rsc-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: var(--gasp-sp-8) 0 var(--gasp-sp-16);
    scrollbar-width: auto;
    scrollbar-color: var(--pt-button-bg) color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
}
.gasp-rsc-scroller:focus-visible {
    outline: 2px solid var(--pt-button-bg);
    outline-offset: 4px;
    border-radius: var(--gasp-r-4);
}
.gasp-rsc-scroller::-webkit-scrollbar {
    height: 10px;
}
.gasp-rsc-scroller::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
    border-radius: var(--gasp-r-pill);
}
.gasp-rsc-scroller::-webkit-scrollbar-thumb {
    background: var(--pt-button-bg);
    border-radius: var(--gasp-r-pill);
}
.gasp-rsc-scroller::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--pt-button-bg) 80%, #000);
}

/* ---- カード列（自前DOMなのでCASE節と違い!important不要） ---- */
.gasp-rsc-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--gasp-sp-24);
    align-items: stretch;
}
.gasp-rsc-card {
    flex: 0 0 360px;
    max-width: 360px;
    scroll-snap-align: start;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--gasp-sp-12);
    min-height: 160px;
    padding: var(--gasp-sp-24);
    background: #fff;
    border-radius: var(--gasp-r-12);
    /* カード影はテーマの標準影に合わせる（無い環境では薄い影のフォールバック） */
    box-shadow: var(--wp--preset--shadow--standard, 0 2px 8px rgba(0, 0, 0, 0.08));
}
/* チップ絞り込みで隠すカード（カード枠に直接付く＝CASE節のsyncRow相当は不要） */
.gasp-rsc-hidden {
    display: none !important;
}
.gasp-rsc-card-head {
    display: flex;
    align-items: center;
    gap: var(--gasp-sp-8);
}
/* カテゴリバッジ＝モックのタグチップ相当（塗りの薄いピル） */
.gasp-rsc-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--gasp-r-pill);
    background: color-mix(in srgb, var(--pt-button-bg) 12%, #fff);
    color: var(--pt-button-bg);
    font-size: var(--gasp-fs-14);
    line-height: var(--gasp-lh-tight);
    padding: var(--gasp-sp-4) var(--gasp-sp-12);
}
.gasp-rsc-meta {
    font-size: var(--gasp-fs-14);
    color: #666666;
}
.gasp-rsc-title {
    font-size: var(--gasp-fs-16);
    font-weight: 700;
    line-height: var(--gasp-lh-normal);
}
/* リンク／準備中はカード下端に固定（会社情報カードのmargin-top:autoと同じ手） */
.gasp-rsc-link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--pt-button-bg);
    font-size: var(--gasp-fs-16);
    text-decoration: none;
}
.gasp-rsc-link:hover {
    text-decoration: underline;
}
.gasp-rsc-pending {
    margin-top: auto;
    align-self: flex-start;
    color: #999999;
    font-size: var(--gasp-fs-14);
}

/* ---- チップ（8/28フィルタチップと同値・クラスだけ複製） ---- */
.gasp-rsc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gasp-sp-8);
    margin-top: var(--gasp-sp-12);
}
.gasp-rsc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: var(--gasp-r-pill);
    border: 1px solid var(--pt-button-bg);
    background: transparent;
    color: var(--pt-button-bg);
    font-size: var(--gasp-fs-16);
    line-height: var(--gasp-lh-tight);
    padding: var(--gasp-sp-12) var(--gasp-sp-24);
    min-height: 40px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}
.gasp-rsc-chip:hover {
    background: color-mix(in srgb, var(--pt-button-bg) 15%, transparent);
}
.gasp-rsc-chip.is-active {
    background: var(--pt-button-bg);
    color: #fff;
}

/* スマホ幅：CASE節と同じ理由（カード360px＞表示領域）で画面幅比にする */
@media screen and (max-width: 767px) {
    .gasp-rsc-card {
        flex: 0 0 86%;
        max-width: 86%;
    }
}
/* ===== 2026-09-01 資料節リフレッシュ（チップ＋横スクロール） ここまで ===== */

/* ===== 2026-09-01 パートナーチップの整列 ここから =====
   岡田さん指示（9/1）「画像の場所がガチャついてるから揃えてほしい」（会社情報のパートナー・
   アライアンスのチップ群。背景画像カード上で高さ52〜135pxのチップが凸凹に並んでいた＝9/1実測）。
   原因＝3列グリッド（「2026-08-28 セクション見た目強化」のgasp-partner-chips）のセル内で
   チップ（wp-block-group）が伸びず内容高さのままになるため、行内でも行間でも高さが揃わない。
   対処＝全行を等高に（grid-auto-rows:1fr）＋チップをセルいっぱいに伸ばして中身を中央寄せ。
   認証チップ（gasp-cert-chips＝2個・flex・32px揃い）は乱れていないため触らない。
   注意＝「2026-08-28 セクション見た目強化」に同一セレクタ .gasp-partner-chips > .wp-block-group の
   既存ルール（min-height:52px・flex中央寄せ）が別にある。本ブロックはそれに .gasp-company-section を
   前置した詳細度で height:100% を重ねる形＝本ブロックだけ消すと8/28のmin-height:52px状態に戻る
   （点検役9/1の所見）。
   戻し方＝このブロックを消すだけ（DB・JS無変更） */
.gasp-company-section .gasp-partner-chips {
    grid-auto-rows: 1fr;
}
.gasp-company-section .gasp-partner-chips > .wp-block-group {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* ===== 2026-09-01 パートナーチップの整列 ここまで ===== */

/* ===== 2026-09-01 採用ストーリー節の新設 ここから =====
   経緯・判断はtop.jsの同名ブロック冒頭コメント参照。★仮コンテンツ（タグ数値・リード・社員の声）を
   含むため持ち込みゲート対象。rem禁止（ルート10pxの既知の罠）。
   戻し方＝このブロックとtop.jsの同名ブロックを消すだけ */
.gasp-recruit-section {
    margin: var(--gasp-sp-64) 0;
}
.gasp-recruit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gasp-sp-32);
    align-items: center;
}
@media screen and (max-width: 781px) {
    /* 他節の縦積み点（WPコア781px）に合わせる */
    .gasp-recruit-grid {
        grid-template-columns: 1fr;
    }
}
/* 英字ラベル＝他節（RESOURCES等）と同じ小さめグレー */
.gasp-recruit-label {
    font-size: var(--gasp-fs-14);
    color: #666666;
    letter-spacing: 0.1em;
    margin: 0 0 var(--gasp-sp-8);
}
.gasp-recruit-heading {
    margin-top: 0;
}
.gasp-recruit-lead {
    color: #555555;
    line-height: var(--gasp-lh-loose);
    margin: var(--gasp-sp-16) 0 var(--gasp-sp-24);
}
.gasp-recruit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gasp-sp-8);
    margin-bottom: var(--gasp-sp-24);
}
/* タグ＝資料節バッジと同系（アクセントの薄いピル＋枠線。モックの accent/10＋border-accent/30 相当） */
.gasp-recruit-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--gasp-r-pill);
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 30%, transparent);
    background: color-mix(in srgb, var(--pt-button-bg) 10%, #fff);
    color: var(--pt-button-bg);
    font-size: var(--gasp-fs-14);
    line-height: var(--gasp-lh-tight);
    padding: var(--gasp-sp-8) var(--gasp-sp-16);
}
/* CTA＝モックの黒ボタン（bg-primary）。サイトのボタン角丸に寄せて12px */
.gasp-recruit-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--gasp-sp-8);
    background: #1a1a1a;
    color: #ffffff;
    font-size: var(--gasp-fs-16);
    font-weight: 700;
    padding: var(--gasp-sp-16) var(--gasp-sp-24);
    border-radius: var(--gasp-r-12);
    text-decoration: none;
    transition: opacity 0.2s;
}
.gasp-recruit-cta:hover {
    opacity: 0.85;
    color: #ffffff;
}
/* 動画プレースホルダ＝16:9の薄い箱。実体が無いのでクリック動作・カーソル変更は付けない */
.gasp-recruit-video {
    aspect-ratio: 16 / 9;
    border: 1px solid #e5e5e5;
    border-radius: var(--gasp-r-12);
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gasp-sp-8);
}
.gasp-recruit-play {
    font-size: var(--gasp-fs-40);
    line-height: var(--gasp-lh-1);
    color: #999999;
}
.gasp-recruit-video-label {
    font-size: var(--gasp-fs-14);
    color: #888888;
}
/* 2026-09-29 仮の会社紹介動画（top.js の同日ブロック）。枠（16:9・角丸）いっぱいに動画を置く。
   動画が読み込めない回は has-player が外れ、上の「準備中」表示のまま */
.gasp-recruit-video.has-player {
    overflow: hidden;
    background: #141c3a;
}
.gasp-recruit-video-player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 社員の声カード */
.gasp-recruit-voice {
    margin-top: var(--gasp-sp-16);
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: var(--gasp-r-12);
    padding: var(--gasp-sp-24) var(--gasp-sp-24);
}
.gasp-recruit-voice-head {
    display: flex;
    align-items: center;
    gap: var(--gasp-sp-12);
    margin-bottom: var(--gasp-sp-12);
}
.gasp-recruit-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    color: #888888;
    font-size: var(--gasp-fs-14);
    flex-shrink: 0;
}
.gasp-recruit-voice-role {
    font-size: var(--gasp-fs-16);
    font-weight: 700;
}
.gasp-recruit-voice-meta {
    font-size: var(--gasp-fs-14);
    color: #888888;
}
.gasp-recruit-voice-quote {
    font-size: var(--gasp-fs-14);
    color: #555555;
    line-height: var(--gasp-lh-loose);
    margin: 0;
}
/* 仮コンテンツの注記（点検役9/1指摘への対応。補足注記の流儀＝グレー小さめに合わせる） */
.gasp-recruit-draft-note {
    font-size: var(--gasp-fs-12);
    color: #999999;
    font-style: italic;
    margin: var(--gasp-sp-12) 0 0;
}
/* ===== 2026-09-01 採用ストーリー節の新設 ここまで ===== */

/* ===== 2026-09-01 横スクローラーからの横あふれ修正 ここから =====
   症状（岡田さん報告9/1・実測で再現）＝狭い幅でページ全体に横あふれが出る。
   768px（innerWidth 768／documentElement.clientWidth 753）で
   document.body.scrollWidth が **2436**。375px相当でも同型。

   ■ 発生条件（実測9/1）
   ページ最上部では出ない（761）。**CASE／SERVICE節が画面に入ってAOSの出現アニメ
   （aos-fade-up）が完了した時点から**出る（2436）。だから「ページを開いた直後の計測」では
   見つからず、スクロールしてから測ると出る。

   ■ 原因
   漏れているのはカードそのものではなく、原本の「続きを読む」に付く
   `span.screen-reader-text`（読み上げ用ラベル。position:absolute・1px×1px・
   clip-path:inset(50%) で不可視。スクローラー配下に21個）。
   overflow のクリップは「containing block がクリップ箱かその子孫にある要素」にしか効かない。
   このspanの containing block が、スクローラーの**外側**にある
   .gasp-service-flow / .gasp-case-flow / .gasp-rsc-flow（いずれも position:relative）に
   なっているため、`overflow-x: auto` を素通りして root の scrollable overflow に加算される。
   実測：最も右のspanの右端 2436px ＝ body.scrollWidth と一致。

   AOS未完了の間だけ出ないのは、カード側に transform（実測 translateY 100px）が乗っており、
   transform 付き要素が containing block になる＝スクローラーの内側に入るため。
   `aos-animate` で transform:none になった瞬間に containing block が flow 側へ移り、逃げ始める。

   ■ 対処
   スクローラー自身を position:relative にして containing block をクリップ箱へ戻す（1宣言）。
   spanは1px・clip-path:inset(50%) で不可視なので、位置が変わっても見た目には影響しない。
   z-index は指定しない＝stacking context を作らないので、既存の重なり順は変わらない。
   flow側の position:relative は既存マーカー内なので触らない（岡田さん制約）。
   実測（768px・CASE節までスクロールした状態）：body.scrollWidth 2436 → 760。
   （下のA/B表では同じ768pxが761。760/761の1px差は測定条件の違い＝実スクロールで到達した回と
     下の合成レシピで作った回。どちらも「ヒーロー由来の約8pxだけが残った状態」で同じ意味）

   ■ 再現・計測のしかた（点検役9/1指摘。これを書かないと次の人が「起きない」と誤判定する）
   ページロード直後や、出現アニメが走らない環境（ブラウザペイン非表示・ヘッドレス等では
   requestAnimationFrame が回らずAOSが自然発火しない）では**症状が出ない**。
   その場合はAOS完了状態を手で作ってから測る（**transitionを切るのが必須**。
   フレームが進まない環境ではクラスを足しても transform がアニメの開始値のまま残り、
   「aos-animate は付いているのに transform:none にならない」＝症状が出ないままになる。9/1に実際に踏んだ）：
     document.querySelectorAll('.aos-init').forEach(el => {
       el.style.transition = 'none'; el.classList.add('aos-animate');
     });
   そのうえで document.body.scrollWidth を読む。効いているかの確認は、同じ状態で
   3スクローラーへ inline の position:static を当てて値が跳ねること（A/B）で取る。
   実測（AOS完了状態でのA/B）：1366px 2441→1359／768px 2436→761／375px 1897→375。

   ■ 残る7〜8px（今回は直さない・岡田さん判断待ち）
   `.main_slider { width: 100vw }`（このファイル冒頭）の 100vw が縦スクロールバー（実測15px）を
   含むため、親（スクロールポート幅）より左右へ7.5pxずつはみ出し、右側だけが加算される。
   縦スクロールバーが出る幅ではデスクトップ（1366px：1359 vs 1351）でも同量出ており、
   親テーマの `html{overflow-x:hidden}` で不可視・実際に横へは動かない（scrollX は常に0）。
   直すとフルブリード（8/26承認の見た目）に手が入るため、報告のみとした。

   戻し方＝このブロックを消すだけ。rem不使用（このテーマはルート10pxの既知の罠）。 */
.gasp-service-scroller,
.gasp-case-scroller,
.gasp-rsc-scroller {
    position: relative;
}
/* ===== 2026-09-01 横スクローラーからの横あふれ修正 ここまで ===== */



/* ===== 2026-09-01 チップの型を SOLUTION に統一 ここから =====
 * 岡田さん指示（9/1夜）「ボタンの形式はこれを正として。導入事例と資料・セミナー・ブログを直したい」
 * （添付はSOLUTION節のチップ。選択中＝青塗り白文字／非選択＝薄い青枠＋明るい文字）
 *
 * ■ 実測した差（1366px）
 * | | SOLUTION `.gasp-solution-tab`（正） | CASE `.gasp-case-chip` / RESOURCES `.gasp-rsc-chip` |
 * | 太さ         | 500                              | **600**                    |
 * | 左右padding  | 18px                             | **20px**                   |
 * | 非選択の文字 | #eef1f8（`color:inherit`で地の本文色を継承） | **#216be9（青）**   |
 * | 非選択の枠線 | 青の40%（color-mix）             | **青100%（不透明）**       |
 * | 選択中       | 青塗り・白文字・青枠             | 同じ（差なし）             |
 * | 角丸/高さ    | 999px / min-height 40px          | 同じ（差なし）             |
 * ＝**非選択チップの見え方だけが違っていた**。選択中は元から一致している。
 *
 * ■ 直し方
 * 既存定義（.gasp-case-chip は471行目付近、.gasp-rsc-chip は1563行目付近）は編集せず、
 * ファイル末尾のこのブロックで後勝ちにする（同じ詳細度なので読み込み順で勝つ）。
 * 値は .gasp-solution-tab（615行目付近）からそのまま写す＝**別々に数値を決めない**。
 * `color: inherit` も写す。SOLUTION が明るい文字に見えているのは地の本文色（#eef1f8）を
 * 継承しているためで、固定色を新しく足すと地色を変えたときにまた取り残される。
 *
 * hover も揃える（SOLUTIONは「選択中には効かない」12%、CASE/RESOURCESは選択中にも効く15%だった）。
 *
 * 戻し方＝このブロックを削除する。 */
.gasp-case-chip,
.gasp-rsc-chip {
    border: 1px solid color-mix(in srgb, var(--pt-button-bg) 40%, transparent);
    color: inherit;
    font-weight: 500;
    padding: var(--gasp-sp-12) var(--gasp-sp-16);
}
.gasp-case-chip:hover,
.gasp-rsc-chip:hover {
    background: transparent;
}
.gasp-case-chip:hover:not(.is-active),
.gasp-rsc-chip:hover:not(.is-active) {
    background: color-mix(in srgb, var(--pt-button-bg) 12%, transparent);
}
.gasp-case-chip.is-active,
.gasp-rsc-chip.is-active {
    background: var(--pt-button-bg);
    color: #fff;
    border-color: var(--pt-button-bg);
}
/* ===== 2026-09-01 チップの型を SOLUTION に統一 ここまで ===== */


/* ===== 2026-09-18 トップ上2画面の見直し（案2修正版） ここから =====
   岡田さんの発言（原文）：
     「ただ、案２の地球を右寄せにして解像度を上げてるのはいいと思う。」
     「文字のフォント、配置とかもいいと思う。」
     「今より良くなってると思う。余白感とかも」
     「ものについては、背景の色が白になってるのでそれはそのままの方がいいと思ってる。」
     「トップページの動画は自社の居室をつかってるからそのままにしたい。動画を使ってるところは動画のままにしたい。」

   絵は ChatGPT が出した「案2の修正版」。**ただし地の色は絵と違い、現状の紺 #141c3a のまま**
   （岡田さんの明示指示）。CSS の設計と各値も ChatGPT。こちら（Claude）は材料と制約を渡し、
   返ってきたものを当てて実測する役。

   **戻し方＝このブロックを丸ごと削除する。** 既存ブロック・top.js・DB・hero-actions.css は無変更。

   採った手段と理由：
   - 地球は `[src$="fx_earth.mp4"]` で名指しする。**top.js を触らずに2枚を区別できる唯一の手**
     （クラスは2枚とも `gasp-hero-fx` で同じ）。岡田さん判断で地図（fx_map）は位置を変えない
   - `.gasp-hero-bg video`（263行）は**動画3本すべてに当たる**ので、そこには書かない。
     居室の実写（hero_cut6_A.mp4）を縮めないため
   - 片方を `display:none` にしない。top.js に「2枚そろわなければ何も出さない」安全弁があり、
     消すと4秒に1度なにも出ない時間ができる
   - 帯（CTA/バッジ/タブ）は hero-actions.css が **top.css より後に読まれる**ので、
     `.main_slider` を前置して詳細度を1段上げる
   - ハッシュ付きクラス（`wp-container-core-buttons-is-layout-01528e29` 等）は使わない。再生成で変わるため
   - `rem` を使わない。ルート font-size が幅で変わる（1367pxで10px／375pxで8px）
   - 親要素に `transform` を新設しない（9/1に body.scrollWidth が 761→2436 に跳ねた事例。上のブロック参照）

   ★このブロックの数値について（値ごとのタグ付けはやめた。分類が現物に合わなかったため）

     **ここにある数値はすべて調整値で、「測って出した最適値」は1つもない。**
     下の実測を見ながら、ChatGPT か Claude が決めた値。詰め切っていない前提で読むこと。

     この回で実際に測ったのは次だけ（2026-09-18・幅を変えて2.5秒待ってから計測）：
       幅1367 … 見出し 70〜720／地球 736〜1336（top 130）／帯 70／ヒーロー高さ957／scrollWidth 1360
       幅1024 … 見出し 70〜610／地球 601〜1001（top 166）／帯 70／ヒーロー高さ948／scrollWidth 1017
       幅800  … 見出し 72〜532／地球 481〜781（top 186）／帯 72／ヒーロー高さ984／scrollWidth 793
       ＝**1367は重なりゼロ（16px空き）。1024で9px、800で51px まだ重なっている（未解決）**

     このうち Claude が実測から直接計算したのは4つだけ
     ＝h1/p の max-width 650px と、帯の padding-left 78 / 77 / 79px（各行のコメント参照）。
     残りは ChatGPT が決めた値で、実測を根拠にしたものと、根拠なしの初期値が混ざっている。
   ★幅768px未満は top.js の VIDEO_MIN_W=768 により FX動画自体が生成されない＝対象外

   ============================================================================
   ★2026-09-21 追補：地球の大きさと位置を、3段の固定値から式1本に置き換えた
   ============================================================================
   岡田さんの発言（原文）：
     「もっと地球でかくていいよ」
     （幅1900pxの画面写真を添えて。2倍/3倍/5倍を見比べたうえで「5倍＋4Kから作り直す」を選択）
     「今の本番より軽くなればいいよ」（容量について）
     「よくわからないからまかせる」（式の細部について）

   ■ なぜ式にしたか（9/18の3段では解けない）
   9/18版は ≥1101px=600px ／ 851-1100px=400px ／ 768-850px=300px の3段だった。
   段の中で画面が狭くなっても地球は縮まないので、**各段の下端で必ず見出しに寄る**。
   2026-09-21 の実測（文字の実際の右端と、地球の明るい芯の左端）：
     1367→+204  1200→+37  1101→**−62**  1024→+117  950→+43  900→−7  860→**−47**  800→+29  768→−3
   ＝重なるのは 1024 や 800 ではなく、**各段の下端**（9/18に書いた「1024で9px・800で51px」は
     要素の箱どうしを測った値で、絵の重なりではない。周囲は純黒で screen 合成では見えないため）。

   ■ 素材の実測（ffmpeg の bbox フィルタ・しきい値 Y=160・全フレームの合併）
   fx_earth.mp4（3008x1692）の明るい芯（球体）＝ 横 26.16%〜74.37%（直径はフレーム幅の 0.48205＝1450px）
                                                縦  5.61%〜91.37%
   周囲は純黒。**箱の 26% ぶんは見えない余白**で、9/18版はその余白のぶんだけ地球を引っ込めていた。
   → 芯を基準に置き、見えない余白は画面の外（overflow:hidden）へ出す。これが「大きくする」の実体。

   ■ 式（自由な値は2つだけ）
     芯の直径 = min(1447px, 76%)    76% ＝ 岡田さんが5倍を選んだときの幅1900pxでの値 1443px から。
                                     1447px ＝ 素材の芯 1450px の内側に収まる値＝どの幅でも拡大しない
     箱の幅   = 芯 ÷ 0.48205 = 芯 × 2.0745
     right    = 24px − 芯 × 0.5317   （0.2563 × 2.0745。箱の右の死に余白を画面外へ出すので負になる）
   ※この3つの数字は `tools\make_hero_fx.ps1` が「★top.css に写す値」として出力する。手計算しない。
   基準は `.gasp-hero-bg`（実測：幅=100vw=1367px・左端 −7.5px・overflow:hidden・地球の offsetParent）。
   ％はこの箱に対する値。**`.gasp-hero-bg { overflow:hidden }`（257行）への依存が増える**
   ＝これを外すと右の死に余白が画面外へ出ず、横あふれに化ける。

   ■ 消えた値（9/18版からの差分）
   width 600/400/300・right 24/16/12・top 150/170/190 の**9個の調整値が、上の式1本になった**。
   ブレークポイント 1100/850 は文字側の指定でだけ使う（地球はもう段を持たない）。
   文字側（max-width 650/540/460・margin-left 48/32/24・帯の padding）は**1文字も変えていない**
   ＝岡田さん「文字のフォント、配置とかもいいと思う」（9/18）を壊さないため。

   ■ 承知のうえで受け入れたこと
   5倍では**球体が見出し・本文の上を通る**（幅1920で芯が文字の右端より248px内側に入る）。
   岡田さんが2倍/3倍/5倍の絵を見比べたうえで選んだ形。
   白文字の読みやすさ（18秒を6点サンプルした最悪値・文字の箱の中でいちばん明るい画素と白との比）：
     幅1920  4.07 → 4.01 ／ 幅1367  3.48 → 3.46 ／ 幅768  3.09 → 3.13（768は変更後のほうが高い）
   ＝**差は±0.07以内で、測り直すと同じ幅でも0.05ほど振れる**（サンプルする時刻が変わるため）。
   つまり地球を5倍にしたことでは動いていない。低い主因は居室動画の明るい部分で、
   **この変更の前からAA4.5を下回っている**。
   直すなら覆いを濃くする話になるが、覆いは9/18に「今回は変えない」で固定した項目なので触っていない。
   ★測り方の罠（2026-09-21に実際に踏んだ）＝測定中にスライダーが次の絵へ進むと、
     別スライドの白い文字が枠に入って「比1.00」という嘘の値が出る。**測る前に autoplay を止め、
     全スライドの文字を隠すこと。**（この注意書きの前に一度 4.11→3.97 という値を書いたが、
     それはスライダーが動いたまま測った値で、上の表が測り直した正しい値）

   ■ 素材の差し替え（2本とも作り直した。生成は `tools\make_hero_fx.ps1` が正）
   岡田さんの発言（原文・2026-09-21）：
     「地球は回ったままでよかったのだが、、、」
     「あと、平面図も解像度高い動画落としたよね」
   - `fx_earth.mp4` … 1280x720(4.04MB) → **3008x1692・14.333秒(12.77MB)**。
     **8/27から続いていた往復再生（順→逆＝回って巻き戻る）をやめ、順再生のみにした**＝回り続ける。
     つなぎ目は末尾0.7秒を先頭にクロスフェード（地図と同じ方式）。
     ★原本15秒の中に自転の一周は入っていない（先頭に戻る時刻が無く、差は時間とともに増える一方＝実測）
       ので、ぴったりループは作れない。クロスフェードが唯一の手。
       素材自体のちらつき（隣り合うフレーム間の差7.7に対し1秒後は17.7）に紛れて継ぎ目は見えない。
   - `fx_map.mp4` … 1280x720(1.36MB) → **1920x1080・19.353秒(2.92MB)**。
     原本と同じ1920x1080＝全画面に敷いても拡大しない（9/18版は幅1920の画面で1.5倍に拡大されていた）。
   - 退避＝`fx_earth_1280.mp4` / `fx_map_1280.mp4`（9/18版）、`fx_earth_960.mp4` / `fx_map_960.mp4`（8/27版）
   ★16:9ちょうどの寸法にして `setsar=1` を明示している。3000x1688 で作ったら SAR が 3376:3375 になり、
     ブラウザの videoWidth が 3001 になった（9/4に記録済みの罠）。
   ヒーローで読む3本の合計は 10.36MB → **20.64MB**（本番サイトのトップは101.8MB＝その約1/5）。
   岡田さん「今の本番より軽くなればいいよ」（2026-09-21）に照らして、この容量で確定。
   ★同名で上書きしたので**キャッシュのパージが要る**（古いバイトを見て「変わっていない」と誤認する）。
     2026-09-21 の確認＝ブラウザペインで `videoWidth` と HEAD の content-length を読み、
     新しいバイトが来ていることを確かめてから画面を見た。**岡田さんのChromeでは強制リロードが要る。**

   ■ 持ち込みゲート
   **この変更（CSS・素材とも）はローカル複製 8090 にのみ適用。検証環境（219.100.163.233）へは
   持ち込んでいない。** 出所の記録は `20260825_刷新\素材\トップ_ヒーロー光レイヤー_出所メモ_20260918.md`
   の「2026-09-21」節（4K原本は9/18に取得済みの同一素材で、新規調達はしていない）。

   ■ 戻し方（**3つある**。混ぜないこと。(c) は 2026-09-21 夕に増えた）
   (a) **9/18＋9/21をまとめて捨てる**＝このブロック（1881行〜末尾）を丸ごと削除する。
       9/18の文字レイアウト（左寄せ・帯の左端合わせ）も一緒に消える。
   (b) **地球の出し方だけ9/18の3段に戻す**。
       ★この値の出どころ＝**2026-09-21に書き換える前のこのファイルを読んで写した実物の値**
         （`HP_wp` は git 管理外で、9/18時点の控えは残っていない。記憶や推測ではないが、
          当時のファイルと突き合わせて検証したわけでもない）。
       下の [1] の宣言を次に置き換え、
       [5] に `inset:170px 16px auto auto; width:400px;`、
       [6] に `inset:190px 12px auto auto; width:300px;` を同じセレクタで書き戻す：
         .gasp-hero-bg video.gasp-hero-fx[src$="fx_earth.mp4"] {
             inset: 150px 24px auto auto; width: 600px; height: auto; object-fit: contain;
         }
       素材も戻すなら `fx_earth.mp4` / `fx_map.mp4` を別名にして、`*_1280.mp4` を元の名前に改名する
       （9/18の形。さらに前に戻すなら `*_960.mp4`）。作り直すなら `tools\make_hero_fx.ps1`。
   (c) **地球の置き方だけ 2026-09-21「昼」の形（球が文字の上を通る・直径1447px）に戻す**
       ＝下の [1] の `--gasp-earth-core` と `inset` を次の2行に置き換える（他は触らない）：
         --gasp-earth-core: min(1447px, 76%);
         inset: 150px calc(24px - var(--gasp-earth-core) * 0.5317) auto auto;
       ★この2行の出どころ＝**同日夕に書き換える直前のこのファイルの実物**（読んで写した）。
         `0.5317` は素材を作り直したあとの最終値で、**同日昼のいっとき `0.5313` だった時期がある**
         （3008x1692 を作り直す前の値）。戻すなら 0.5317 が正。
         当時のファイルと突き合わせて検証したわけではない（git管理外で控えが無い）＝※未確認。
       このとき `--gasp-text-right` は使われなくなるが、残しておいても害はない。 */

@media (min-width: 768px) {

	/* [1] 地球。fx_map には当てない。段は持たない（幅から連続で決まる）

	   ★2026-09-21 夕：文字の上を通さない置き方に変えた。
	   ChatGPT（API経由の査定）＝「大きな地球そのものは問題ではない。問題は点描の細かい線と明暗差が
	   文字の輪郭に重なること。直径1450pxのまま文章の上を通すのは妥当ではない。地球は右へ寄せ、
	   文字領域との間に最低80pxの空白を確保する」。岡田さん「進め方は、とりあえずどちらでもいいよ」
	   ＝見た目の判断はChatGPT側に寄せるという今日の取り決めに従って採った。
	   **戻し方＝この [1] を、下の「戻し方(b)」のコード片（9/18の3段）か、
	     2026-09-21 昼の形（`--gasp-earth-core: min(1447px, 76%)` ＋
	     `inset: 150px calc(24px - var(--gasp-earth-core) * 0.5317) auto auto;`）に置き換える。** */
	.gasp-hero-bg video.gasp-hero-fx[src$="fx_earth.mp4"] {
		/* 芯（明るい球体）の直径。
		   ★2026-09-21 夜（2）：岡田さん「文字は地球にかぶってもいいから、これくらいの位置に移動できないかな。
	     地球はこれくらいでいいかな。」で**文字だけ右へ動かした**（地球は不変）。
	     **これで白文字のコントラストが下がった**（全時刻の最悪値・実測）：
	       幅1920 4.01 → **3.43** ／ 幅1367 3.46 → **3.16**
	     ＝AA基準4.5は元から下回っていたが、今回さらに 0.3〜0.6 下がった
	     （文字が居室動画の明るい部分と地球の上に乗ったため。**重なりは計算で確かめた値で、
	       画面で1文字ずつ見比べたわけではない**＝※未確認）。
	     さらに同日夜（3）で文字幅を650→900pxに広げたため、幅1920で **3.19** まで下がった。
	     → **同日夜（4）で解消**。岡田さん「入れて。」で、ChatGPTの推奨どおり
	       「文字の下だけ濃紺のグラデーションで守る」を入れた（下の [7]。覆いは触っていない）。
	     **入れた後の実測（全時刻の最悪値）＝ 幅1920 8.47 ／ 1367 8.52 ／ 1024 8.21 ／ 768 8.63**
	     ＝**初めて全幅でAA基準4.5を超えた**（この案件では8/25以降ずっと下回っていた）。
	     その後の夜（5）で見出しを1行に収めるため幅を広げた結果 **1920で5.82 ／ 1367で5.63**
	     （下がったが基準は超えたまま。文字が右へ伸びて幕の薄い側に掛かるため）。

	   ★2026-09-21 夜：ChatGPT（API経由）が出した推奨値に合わせた。原文：
		     「地球の直径：画面幅の48〜55%／1920px幅の場合：920〜1060px／最大直径：1080px／
		       配置：右端から−80〜−160px、垂直方向は中央より少し下／文字領域への侵入：なし」
		   ①文字帯の右端＋80px より右にしか置かない（左端で固定するので、**侵入は構造的に起きない**）
		   ②画面幅の52%（推奨の48〜55%の中央）。③上限1080px（推奨の上限）
		   ④空いた幅の1.6倍まで＝**右へはみ出してよい**（推奨の「右端から−80〜−160px」がこれ）
		   ⑤下限300px（細くなりすぎない）
		   縦は上限を置かない＝大きいときは下が切れる。推奨の「垂直方向は中央より少し下」がこの状態 */
		/* ★2026-09-25：岡田さん「地球ももっと大きくして、もう少し右にずらしていいと思う。
		     地球の左側４分の１くらいが文字にかかる感じで、サイズは1.3倍くらいに。」
		   （幅約1920の「データ基盤」スライドの画面写真を添えて）
		   直径：52%→67.6%（×1.3）、上限 1080→1404px（×1.3）。下限300pxはそのまま。
		     旧式にあった `min(…, calc((100% - text-right - 80px) * 1.6))` は「文字に侵入させない」ための項で、
		     かぶせる置き方に変えるので外した。
		   左端：芯の左端 ＝ 文字の右端 − 直径×0.25（「左側4分の1が文字にかかる」）。
		     文字の右端 ＝ `--gasp-text-left + 900px`（900 ＝ 本文 p の max-width。既にこのファイルにある値）。
		     幅1920で 317+900＝1217px ＝ 添付スライドの見出しの右端 1215px（実測）と一致する。
		     0.7927 ＝ 0.25 ＋ 0.5427（0.5427 は箱の左端から芯の左端までの比＝0.2616×2.0745。変えていない）。
		   幅1920の実測（変更前→後・ブラウザペインで測定）：直径 998→1298 ／ 芯の左端 800→885 ／
		     芯の右端 1799→2183（263px が画面外）。式の値は 892 で、ブラウザペインでは 885、hero_check.mjs（ヘッドレス）では 892 と出た。
		     ペインの7pxのずれの原因は※未確認（`.gasp-hero-bg` の左端 −7.5px の分と思われるが、1920幅では測っていない）。
		   ★幅1100/1101 と 850/851 の境目で `--gasp-text-right` が飛ぶ（632→約1082、564→632）ので、文字側と同じく
		     地球の左端もその境目で飛ぶ（今回の式で連動するようになった。リサイズ中にだけ見える。実害は※未確認）。
		   ★幅1367（実測）：芯 924px・左端 887・右端 1811 ＝ 444px（48%）が画面外に出る。岡田さんの指示は1920の写真に対するもので、
		     狭い幅については何も言っていない＝リードが受け入れた帰結。
		   ★同日、最初は `calc(var(--gasp-text-left) + 900px - …)` と直書きしたが、幅1100px以下では文字が
		     16.5% ではなく固定px（[5]=32+600、[6]=24+540）に切り替わるため、文字の右端が 1069px（1024幅）と
		     実際の 572px から大きくずれ、地球の 81% が画面外に出た（hero_check.mjs の実測：芯 左896／径692／文字右端572）。
		     → 文字の右端は `--gasp-text-right` に一本化した（[2] の定義を「実際の右端」に戻し、[5][6] の 632/564 はそのまま）。
		   戻し方＝下の2宣言と [2] の `--gasp-text-right` を次の旧値に戻す（他は触っていない）：
		     .main_slider { --gasp-text-right: 728px; }
		     --gasp-earth-core: clamp(300px,
		         min(52%, calc((100% - var(--gasp-text-right) - 80px) * 1.6)), 1080px);
		     inset: 150px auto auto
		         calc(var(--gasp-text-right) + 80px - var(--gasp-earth-core) * 0.5427); */
		--gasp-earth-core: clamp(300px, 67.6%, 1404px);
		/* 箱の左端＝（文字の右端 − 芯×0.25）− 芯×0.5427。文字の右端＝ `--gasp-text-right`（[2][5][6] で幅ごとに定義） */
		inset: 150px auto auto
			calc(var(--gasp-text-right) - var(--gasp-earth-core) * 0.7927);
		/* top 150px＝263行の inset:0 を打ち消す。明示するのは静的位置への依存をなくすため
		   （v1は top:auto で -20px に落ち、overflow:hidden で上端20pxが切れていた）。
		   right/bottom は auto＝右側は画面の外へ出してよい（overflow:hidden で切れる） */
		width: calc(var(--gasp-earth-core) * 2.0745);  /* 箱の幅 ＝ 芯 ÷ 0.48205 */
		height: auto;                 /* 高さを固定しない＝縦横比を保つ */
		object-fit: contain;          /* 263行の cover を打ち消す。地球はフレーム内で位置が動くので
		                                 cover で切ると窓から出る回ができる */
	}

	/* [2] スライド本文を左のひとまとまりにする。h1 の display は触らない
	       （PC用/モバイル用の2つがあり、タイピングJSが offsetParent で打つ側を選ぶため） */
	.main_slider {
		/* ★地球の左端を決める基準。**もともとは文字帯の右端だった**が、2026-09-21 夜に
		   岡田さん「文字は地球にかぶってもいいから、これくらいの位置に移動できないかな。
		   地球はこれくらいでいいかな。」で**文字だけ右へ動かし、地球は動かさない**ことにしたので、
		   いまは「地球をここに置く」ための基準値として残っている（値は動かさない）
		   ★2026-09-25：岡田さん「地球の左側４分の１くらいが文字にかかる感じで」を受けて、[1] の式が
		     「文字の右端 − 直径×0.25」になったので、この値を**実際の文字の右端**に戻した
		     ＝ `--gasp-text-left + 900px`（900 ＝ 本文 p の max-width。幅1920で 317+900＝1217 ＝
		     「データ基盤」スライドの見出しの右端 1215 と一致・実測）。[5][6] の 632/564 は元から実際の右端なので不変。
		     旧値（戻し方用）：728px（48 + 680＝文字が左にあった頃の右端） */
		--gasp-text-right: calc(var(--gasp-text-left) + 900px);

		/* 文字ブロックの左端。岡田さんが送ってきた画面写真の位置から算出＝画面幅の16.5%
		   （写真の枠 330〜1013／画面幅約2000。実装後の実測は 幅1920 で 327〜1007）。
		   ★狭い幅（1100px以下・850px以下）では**この値を使わず、旧来の px 指定のまま**。
		     理由＝岡田さんの指示は幅1920の画面写真に対するもので、狭い幅では文字の幅が足りず
		     右へ寄せると本文が潰れるため。**その結果、幅1100と1101の境目で左端が約150px飛ぶ**
		     （リサイズ中にだけ見える。実害は確認していない＝※未確認）。
		     狭い幅も動かすなら、`--gasp-text-left` を各メディアクエリで上書きする */
		--gasp-text-left: 16.5%;
	}
	.main_slider .wp-block-cover__inner-container > .wp-block-group {
		/* ★2026-09-21 夜（3）：岡田さん「これ、文字は意識して改行しなくていいかと。」
		   ＝本文が「段階的な／移行で」のような半端な位置で2行に割れていたのを直す。
		   原因は手で入れた改行ではなく（`<br>` はゼロ＝実測）、**幅を650pxに絞っていたこと**。
		   930px に広げて、文が自然に流れるようにした。右端は画面からはみ出さないように抑える */
		/* ★2026-09-21 夜（5）：岡田さん「タイトル行が改行されちゃってるね。」
		   いちばん長い見出し「業務を止めないAzure移行。影響を説明できる設計へ。」は
		   **1行に1045px要る**（42px・実測）ので、箱を930→**1080px**に広げた。
		   1080 ＝ 見出しの上限1060px（=1045+15）＋ 左右の内余白15px×… の実測合わせではなく、
		   **「見出し1060pxが確実に入る、きりのよい値」として置いた**（＝根拠は1060pxのほう）。
		   本文は900pxのまま */
		width: min(1080px, calc(100% - var(--gasp-text-left) - 24px));
		max-width: 1080px;
		margin-left: var(--gasp-text-left);
		margin-right: auto;
	}
	.main_slider .wp-block-cover__inner-container h1 {
		/* 2026-09-21 夜（3）に 650→900px、夜（5）に **900→1060px**。
		   1060px ＝ いちばん長い見出しが1行に要る 1045px（実測）＋15px の余裕。
		   ★本文（p）は 900px のまま＝1行が長くなりすぎないように、見出しだけ広げている */
		max-width: 1060px;
		/* ★!important が要る（本文と同じ理由）。WPコアが `.wp-container-content-XXXX` に
		   `margin-inline:auto !important` を当てるため、**見出しの箱が中身の幅まで縮んで中央に寄る**。
		   その結果、狭い幅で「見える化して即対応。」が必要359px／箱358px＝**1px足りずに2行**になっていた
		   （2026-09-21 夜に hero_check.mjs で検出）。本文だけ !important にして見出しを忘れていた */
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left;             /* has-text-align-center(0,1,0) に (0,2,1) で勝つ */
		/* ★`text-wrap` は **normal を明示する**。223行目（8/25ブロック）に
		   `.main_slider h1 { text-wrap: balance }` が生きていて、ここで宣言を消しただけでは
		   そちらが効いたままになるため（2026-09-21 夜に実際に踏んだ）。
		   balance は「行の長さをそろえるために改行位置を動かす」指定で、
		   岡田さんの「意識して改行しなくていい」に反する。
		   ★値は `wrap`。`normal` は text-wrap では**無効**で、書いても丸ごと無視される
		     （2026-09-21 夜に `normal` と書いて効かず、computed が balance のままなのを実測して気づいた）。
		   ★**幅768px未満（スマホ）は balance のまま**。この9/21ブロックが `@media (min-width:768px)` の
		     中にあるため。岡田さんの指示は幅1920の画面写真に対するもので、
		     223行目の balance は「1語だけ2行目に落ちる不格好な折り返しの回避」＝狭い幅でこそ効く指定なので、
		     あえて残している。**これはリードの判断で、岡田さんはスマホ幅について何も言っていない。**
		     ※スマホ幅で実際に不格好な折り返しが起きるかは確かめていない（8/25のコメントの理由を引いただけ＝未確認）。
		     （スマホも外すなら、このブロックの外に同じ宣言を1つ足す） */
		text-wrap: wrap;
	}
	.main_slider .wp-block-cover__inner-container p {
		max-width: 900px;             /* 同上 */
		/* ★!important が要る。**1行に収まる段落だけ WPコアが中央に寄せる**（実測：`margin-left: 134.9px`）。
		   WPの「constrained layout」が `.wp-container-content-XXXX` に `margin-inline: auto !important` を
		   当てるため、!important 無しでは勝てない（この案件で何度も踏んでいる型）。
		   岡田さん「左寄せにしたほうがよみやすいかな。」（2026-09-21 夜）*/
		margin-left: 0 !important;
		margin-right: auto !important;
		text-align: left;
	}

	/* [7] 文字の下だけ濃紺で守る（2026-09-21 夜）。
	   岡田さん「入れて。」＝ChatGPT（API経由）の推奨：
	     「文字の背後には、左端から画面幅55%程度まで、以下のグラデーションを置きます。
	       左側 rgba(20,28,58,0.88)／中央 rgba(20,28,58,0.62)／右側 rgba(20,28,58,0)」
	   文字は 17%〜65% にあるので、消えきる位置を75%にしている（推奨の55%では文字の右端が守れない）。
	   **覆い（.gasp-hero-bg::after）のCSSは触っていない。**
	   ★ただし重なり順は「覆いより下」ではない。**`z-index:1` を付けた時点で、
	     z-index を指定していない兄弟（動画3本・FX2枚・`::after` の覆い）**全部より上**に描かれる**
	     （最初コメントに「覆いより下」と書いたが誤り。2026-09-21 夜に点検役の指摘で訂正）。
	     動画より上に出すには z-index が要り、その副作用として覆いより上にも来る、という関係。
	   戻し方＝この [7] を消すだけ */
	.gasp-hero-bg::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;               /* 動画（z-index指定なし）より上に出すために要る。上のコメント参照 */
		pointer-events: none;
		/* ★止める位置は**文字の位置から決める**。最初 75% で切ったら、幅1367で文字の右端（85%）が
		   幕からはみ出してコントラストが 3.18 のままだった（実測して気づいた）。
		   文字ブロックは `--gasp-text-left` から最大**1080px**（夜（5）で930→1080に拡大）なので、
		   その先170pxで消えるようにしている。
		   ★濃さは2回測り直して決めた：
		     ①0.88/0.72/0.35/0（終点 +1050px）→ 幅1920で4.04・1367で4.18＝1920が基準割れ
		     ②**0.88/0.80/0.60/0（終点 +1250px）→ 1920で8.47・1367で8.52・1024で8.21・768で8.63**＝採用
		   ★幅1100px以下では文字の左端が `--gasp-text-left`（16.5%）ではなく 32px／24px の固定値に
		     切り替わるので、**この幕の基準と文字の実位置はずれる**。幕のほうが広いので実害は出ておらず
		     （1024で8.21・768で8.63＝基準クリア）、そのまま置いている */
		background: linear-gradient(to right,
			rgba(20, 28, 58, 0.88) 0,
			rgba(20, 28, 58, 0.80) calc(var(--gasp-text-left) + 400px),
			rgba(20, 28, 58, 0.60) calc(var(--gasp-text-left) + 900px),
			rgba(20, 28, 58, 0) calc(var(--gasp-text-left) + 1250px));
	}

	/* [3] 「詳しく見る →」。head に出るハッシュ付きクラスには依存しない */
	.main_slider .wp-block-cover__inner-container .wp-block-buttons {
		justify-content: flex-start;
	}

	/* [4] 帯。position/top は触らないので top.js の本文下端への追従は残る */
	.main_slider .gasp-hero-ctas,
	.main_slider .gasp-hero-badges,
	.main_slider .gasp-hero-tabs {
		justify-content: flex-start;
	}
	.main_slider .gasp-hero-actions {
		/* 文字ブロックと左端をそろえる。2026-09-21 夜に文字を右へ動かしたので、帯も同じだけ動かす。
		   +25px の内訳＝文字側の内余白15px ＋ actions の基準左端のずれ7px（既知の width:100vw 由来）＋丸め3px。
		   ★29pxで試したら帯が見出しより4px右に出たので25pxにした（幅1920で実測して合わせた） */
		padding-left: calc(var(--gasp-text-left) + 25px);
		padding-right: var(--gasp-sp-48);
		/* hero-actions.css の `padding: 0 max(24px, calc(50% - 512px)) 32px` に
		   詳細度(0,2,0)で勝つ。下の 32px はそのまま生きる */
	}

	/* [4.5] 1101〜1300px：**文字の位置（16.5%）を保ったままだと、いちばん長い見出しが1行に収まらない。**
	   実測（2026-09-21 夜）＝必要1045px に対し 箱は 1150で881／1200で923／1280で990／
	   1301で1007／1330で1032／**1350で1044**px（＝箱が必要幅に追いつくのが1350px前後）。
	   最初 max-width:1300px で切ったら **1301〜1349pxに穴が残った**（実測して気づいた）ので1349pxまでに広げた。
	   岡田さんの指示は「文字はこの位置」と「タイトルを改行しない」の2つなので、
	   **位置を優先し、この幅だけ見出しの文字を小さくして1行に収める**。
	   3.05vw は「必要幅 ÷ 箱の幅 × 42px」を1150〜1280で満たす値（実測から算出）。
	   ★これはリードの判断。岡田さんはこの幅について何も言っていない。
	     別の手＝この幅だけ文字を左へ戻す（位置が変わる）／2行を許す（改行が戻る） */
	@media (min-width: 1101px) and (max-width: 1349px) {
		.main_slider .wp-block-cover__inner-container h1 { font-size: min(42px, 3.05vw); }
	}

	/* [5] 中間幅。**地球の指定は 2026-09-21 に上の式へ統合して削除した**（段の下端で必ず寄るため）。
	       ここに残すのは文字側だけ＝見出し・本文の幅と、帯の左端合わせ */
	@media (max-width: 1100px) {
		.main_slider { --gasp-text-right: 632px; }   /* 32 + 600 */
		.main_slider .wp-block-cover__inner-container > .wp-block-group {
			width: min(600px, calc(100% - 64px));
			max-width: 600px;
			margin-left: var(--gasp-sp-32);
		}
		.main_slider .wp-block-cover__inner-container h1,
		.main_slider .wp-block-cover__inner-container p {
			max-width: 540px;
		}
		.main_slider .gasp-hero-actions {
			padding-left: 77px;       /* 実測から算出：幅1024で actions の基準左端 -7px、見出しの文字左端70px
			                             → -7 + 77 = 70px で一致（60pxのときは53pxで17pxずれていた） */
			padding-right: var(--gasp-sp-32);
		}
	}

	/* [6] タブレット下限。768px未満は上記のとおり対象外。
	       ここも地球の指定は 2026-09-21 に上の式へ統合して削除した（文字側だけ残す） */
	@media (max-width: 850px) {
		.main_slider { --gasp-text-right: 564px; }   /* 24 + 540 */
		.main_slider .wp-block-cover__inner-container > .wp-block-group {
			width: calc(100% - 48px);
			max-width: 540px;
			margin-left: var(--gasp-sp-24);
		}
		.main_slider .wp-block-cover__inner-container h1,
		.main_slider .wp-block-cover__inner-container p {
			max-width: 460px;
		}
		.main_slider .gasp-hero-actions {
			padding-left: 79px;       /* 実測から算出：幅800で actions の基準左端 -7px、見出しの文字左端72px
			                             → -7 + 79 = 72px で一致（52pxのときは45pxで27pxずれていた） */
			padding-right: var(--gasp-sp-24);
		}
	}
}
/* ===== 2026-09-18 トップ上2画面の見直し（案2修正版） ここまで ===== */

/* ===== 2026-09-29 入れ替え後の節の間隔 ここから =====
   岡田さん「改めて追加で、添付画像のRESOURCESの上下、COMPANYの上下を他と揃えてほしい。」
   他の節の間は空きブロック（wp-block-spacer・height:5vh）1本。RESOURCES と PROCESS を入れ替えた
   （top.js「RESOURCES と PROCESS&TEAM の並び替え」）ことで次のずれが出ていた（9/29 実測・窓高1538＝5vh は77px）：
   - PROCESS → RESOURCES＝141px：PROCESS 節の下 margin 64px が空きブロックに上乗せ（入れ替え前は PROCESS の直後が COMPANY で、この 64px が節の間だった）
   - RESOURCES → COMPANY＝0px：入れ替え前はこの2節は隣り合っていなかった
   - COMPANY → RECRUIT＝64px：RECRUIT 節の上 margin
   すべて 5vh（空きブロックと同じ）に揃える。top.js が入れ替えに成功した回だけ付ける目印
   （.gasp-swap-process / .gasp-swap-rsc）のときだけ効く＝入れ替えが中止された回は今までどおり。 */
.single-content-inner > .gasp-swap-process {
    margin-bottom: 0;
}
.single-content-inner > .gasp-swap-rsc {
    margin-bottom: 5vh;
}
.single-content-inner > .gasp-swap-rsc ~ .gasp-recruit-section {
    margin-top: 5vh;
}
/* ===== 2026-09-29 入れ替え後の節の間隔 ここまで ===== */