@charset "UTF-8";

/* ===================================================================
 * 採用サイト（page-templates/recruit.php）専用CSS
 * 子テーマ新規ファイル（2026-09-01 段1）。
 *
 * モック C:\oka\work\_claude\HP_poc\app\src\components\recruit\RecruitHeader.tsx /
 * RecruitFooter.tsx の配色（紫アクセント）を、サイトのアクセント変数
 * var(--pt-button-bg)（親テーマ style.css :root で定義／実値は --pt-accent-color）
 * に読み替える。remは使わない（このテーマはルートfont-sizeが10pxに変更される既知の罠があり、
 * remを使うと縮む）。すべてpx指定。
 * =================================================================== */

:root {
	--recruit-header-h: 72px;
	--recruit-header-h-mobile: 64px;
	--recruit-border: var(--pt-border-color, #e9e8ff);
	--recruit-text: var(--pt-body-color, #282424);
	--recruit-heading: var(--pt-headings-color, #29294b);
	--recruit-accent: var(--pt-button-bg, #216be9);
	--recruit-bg: var(--pt-body-bg-color, #faf8ff);
	--recruit-card-bg: var(--pt-card-bg, #fff);
}

.recruit-page {
	background: var(--recruit-bg);
	color: var(--recruit-text);
}

/* main本文の上に固定ヘッダー分の余白を確保 */
.recruit-page {
	padding-top: var(--recruit-header-h);
}
@media (max-width: 781px) {
	.recruit-page {
		padding-top: var(--recruit-header-h-mobile);
	}
}

/* ===== ヘッダー ===== */
.recruit-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	height: var(--recruit-header-h);
	background: rgba(255, 255, 255, 0.9);
	border-bottom: 1px solid var(--recruit-border);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* 管理バー表示時は管理バーの下に配置（WPの管理バーはposition:fixedで手前に固定される） */
body.admin-bar .recruit-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar .recruit-header {
		top: 46px;
	}
}

.recruit-header__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--gasp-sp-24);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gasp-sp-16);
}

.recruit-header__logo {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-12);
	text-decoration: none;
	flex-shrink: 0;
}
.recruit-header__logo-img {
	height: 32px;
	width: auto;
	display: block;
}
.recruit-header__logo-label {
	font-size: var(--gasp-fs-12);
	color: var(--recruit-text);
	border-left: 1px solid var(--recruit-border);
	padding-left: var(--gasp-sp-12);
	white-space: nowrap;
}

.recruit-header__menu {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-24);
}

.recruit-header__nav-list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-4);
	margin: 0;
	padding: 0;
}
.recruit-header__nav-link {
	display: inline-block;
	padding: var(--gasp-sp-8) var(--gasp-sp-12);
	border-radius: var(--gasp-r-8);
	font-size: var(--gasp-fs-14);
	font-weight: 500;
	color: var(--recruit-text);
	text-decoration: none;
	white-space: nowrap;
}
.recruit-header__nav-link:hover {
	background: color-mix(in srgb, var(--recruit-accent) 8%, transparent);
	color: var(--recruit-heading);
}
.recruit-header__nav-link.is-active {
	color: var(--recruit-accent);
	background: color-mix(in srgb, var(--recruit-accent) 10%, transparent);
}

.recruit-header__actions {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-16);
	flex-shrink: 0;
}
.recruit-header__corporate-link {
	font-size: var(--gasp-fs-14);
	color: var(--recruit-text);
	text-decoration: none;
	white-space: nowrap;
}
.recruit-header__corporate-link:hover {
	color: var(--recruit-heading);
}
.recruit-header__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	padding: var(--gasp-sp-12) var(--gasp-sp-24);
	border-radius: var(--gasp-r-pill);
	background: var(--recruit-accent);
	color: #fff;
	font-size: var(--gasp-fs-14);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.recruit-header__cta:hover {
	opacity: 0.9;
}

.recruit-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gasp-sp-4);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.recruit-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--recruit-heading);
}

/* ===== モバイル（781px以下）：ハンバーガー開閉 =====
 * nav（リンク一覧）とactions（コーポレートサイト／エントリー）は header-recruit.php では
 * 兄弟要素ではなく .recruit-header__menu（id="recruit-nav"）の子。recruit.jsはこの
 * #recruit-nav 1つにis-openを付け外しするだけなので、両方をこの1つのクラスで表示させる。 */
@media (max-width: 781px) {
	.recruit-header__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #fff;
		border-bottom: 1px solid var(--recruit-border);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	}
	.recruit-header__menu.is-open {
		display: flex;
	}
	.recruit-header__nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--gasp-sp-8) var(--gasp-sp-16) var(--gasp-sp-16);
	}
	.recruit-header__nav-link {
		padding: var(--gasp-sp-12) var(--gasp-sp-8);
		width: 100%;
	}
	.recruit-header__actions {
		flex-direction: column;
		align-items: stretch;
		gap: var(--gasp-sp-12);
		padding: var(--gasp-sp-12) var(--gasp-sp-16) var(--gasp-sp-16);
		border-top: 1px solid var(--recruit-border);
	}
	.recruit-header__cta {
		justify-content: center;
	}
	.recruit-header__toggle {
		display: flex;
	}
}

/* ===== フッター ===== */
.recruit-footer {
	background: var(--recruit-heading);
	color: rgba(255, 255, 255, 0.85);
}
.recruit-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--gasp-sp-64) var(--gasp-sp-24);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gasp-sp-48);
}
@media (max-width: 781px) {
	.recruit-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--gasp-sp-32);
		padding: var(--gasp-sp-48) var(--gasp-sp-24);
	}
}

.recruit-footer__logo {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-12);
	margin-bottom: var(--gasp-sp-16);
}
.recruit-footer__logo-img {
	height: 28px;
	width: auto;
	display: block;
	filter: brightness(0) invert(1);
}
.recruit-footer__logo-label {
	font-size: var(--gasp-fs-14);
	color: rgba(255, 255, 255, 0.6);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: var(--gasp-sp-12);
}
.recruit-footer__desc {
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-loose);
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.recruit-footer__heading {
	font-size: var(--gasp-fs-16);
	font-weight: 600;
	color: #fff;
	margin: 0 0 var(--gasp-sp-16);
}
.recruit-footer__sitemap-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gasp-sp-8) var(--gasp-sp-16);
}
.recruit-footer__sitemap-list a {
	font-size: var(--gasp-fs-14);
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
.recruit-footer__sitemap-list a:hover {
	color: #fff;
}

.recruit-footer__contact-desc {
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-loose);
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 var(--gasp-sp-16);
}
.recruit-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	padding: var(--gasp-sp-12) var(--gasp-sp-24);
	border-radius: var(--gasp-r-8);
	background: var(--recruit-accent);
	color: #fff;
	font-size: var(--gasp-fs-14);
	font-weight: 600;
	text-decoration: none;
}
.recruit-footer__cta:hover {
	opacity: 0.9;
}

.recruit-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.recruit-footer__bottom > * {
	max-width: 1400px;
}
.recruit-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--gasp-sp-12);
	padding: var(--gasp-sp-24);
}
@media (min-width: 782px) {
	.recruit-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
		max-width: 1400px;
		margin: 0 auto;
	}
}
.recruit-footer__copyright {
	font-size: var(--gasp-fs-14);
	color: rgba(255, 255, 255, 0.5);
	margin: 0;
}
.recruit-footer__bottom-links a {
	font-size: var(--gasp-fs-14);
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}
.recruit-footer__bottom-links a:hover {
	color: #fff;
}

/* ===== 本文コンテナ（段1は器のみ。段2以降で見出し・本文の型を追加） ===== */
.recruit-main {
	min-height: 200px;
}

/* ===== 2026-09-01 段2 採用トップ ここから =====
 * ページID 37（採用トップ）の本文刷新（update_page_37.php）で使う本文専用クラス。
 * 90秒動画プレースホルダのみ独自クラスが必要（他の節はテーマ標準のcard-bg/is-style-outline等の
 * ブロックスタイルで足りるため追記不要）。動画は実体が無いためクリック動作・カーソル変更は付けない
 * （トップページ top.css の .gasp-recruit-video と同じ考え方。あちらはJS生成節・こちらはGutenberg
 * 本文なので実装は別だが見た目のトーンを合わせた）。remは使わない（このテーマの既知の罠）。
 * 戻し方＝このブロックを消すだけ（本文側は restore_page.php 37 で原本に戻せる）。 */
.recruit-video-placeholder {
	aspect-ratio: 16 / 9;
	max-width: 800px;
	margin: 0 auto;
	border: 1px solid var(--recruit-border);
	border-radius: var(--gasp-r-12);
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--gasp-sp-8);
}
/* 2026-09-02：白地に対して ▶ が 2.85:1（図形の3:1未満）、ラベルが 3.54:1（本文の4.5:1未満）で、
 * どちらもAAを割っていた（採用トップで実測）。今回の変更より前からある箇所だが、
 * 全ページのコントラストを測った流れで見つけたので直す。
 * 「仮の要素だから薄くていい」ではなく、**読める薄さ**にする。 */
.recruit-video-placeholder__icon {
	font-size: var(--gasp-fs-40);
	line-height: var(--gasp-lh-1);
	color: #6b6b6b; /* 白地に 5.74:1 */
	margin: 0;
}
.recruit-video-placeholder__label {
	font-size: var(--gasp-fs-14);
	color: #6b6b6b; /* 白地に 5.74:1 */
	margin: 0;
}
/* 仮コンテンツの注記（補足注記の流儀＝グレー斜体9pt相当。トップページの .gasp-recruit-draft-note と
 * 同じ「※」プレフィックスの型を踏襲） */
.recruit-draft-note {
	font-size: var(--gasp-fs-12);
	color: #999999;
	font-style: italic;
	text-align: center;
	margin: var(--gasp-sp-16) 0 0;
}
/* ===== 2026-09-01 段2 採用トップ ここまで ===== */

/* ===== 2026-09-01 段2.5 コーポレート型共通部品 ここから =====
 * 岡田さん指示（段2.5）「採用トップをコーポレートサイトと同じ型のレイアウトへ」。
 * トップページ（top.css）の実装済みパターンを、DBを触らず子テーマ既存ファイルにも触らず、
 * recruit.css側に自前で再実装する（top.cssはenqueueしない・本文にgasp-*クラスを持ち込まない）。
 * remは使わない（このテーマの既知の罠。ルートfont-sizeが10px）。
 * update_page_37_corp_layout.php が本文に付与する recruit-band / recruit-band--tint /
 * recruit-section-head / recruit-section-label / recruit-card-grid の4クラスを実装する。 */

/* ---- 帯（節の背景） ----
 * 白帯／薄青帯を交互に並べて節を視覚的に区切る。align:full の wp:group に付与する。
 * margin:0 明示＝節間の90px/120pxスペーサーを撤去した代わりに、帯自体が余計な既定マージンを
 * 持たないようにして、白い切れ目（隙間）が挟まらないようにするため。 */
.recruit-band {
	background: #fff;
	padding: var(--gasp-sp-64) var(--gasp-sp-24);
	margin-top: 0;
	margin-bottom: 0;
}
/* --recruit-accent は既存の:root定義（var(--pt-button-bg, #216be9)）をそのまま使う。
 * 4%はトップページ .gasp-process-section と同じ濃さ（コーポレート側の見え方に合わせる） */
.recruit-band--tint {
	background: color-mix(in srgb, var(--recruit-accent) 4%, #fff);
}

/* ---- 節見出し（英字ラベル＋H3） ----
 * 実測値の出典：http://localhost:8090/ の h3.wp-block-heading.is-style-core-style-2
 * （課題と解決法／技術別サービス／導入事例等）を getComputedStyle で計測（2026-09-01）。
 * 実装元は子テーマではなく親テーマ blogsy の assets/css/patterns.css
 * （.wp-block-heading.is-style-core-style-2 系ルール）。採用トップは is-style-core-style-2
 * クラス自体を外し、下記で自前実装に置き換える（親テーマへの依存を切るため）。 */
.recruit-section-label {
	font-size: var(--gasp-fs-16);
	font-weight: 400;
	color: #282424;
	margin: 0;
	text-align: left;
}
.recruit-section-head h3.wp-block-heading {
	position: relative;
	z-index: 0;
	padding-bottom: var(--gasp-sp-4); /* 実測値：patterns.cssの0.5rem相当（root font-size 10px×0.5=5px） */
}
/* 青ティック：30px×3pxの棒＋3px角の点を8px間隔で3つ（box-shadowで2つ追加）。
 * 実測値：before=width30px/height3px/left0、after=width3px/height3px/left35px、
 * 色はいずれも rgb(33, 107, 233) = var(--recruit-accent) の実値 #216be9 と一致。
 * bottom:0・z-index:-1・border-radius:50pxも実測どおり（h3側のposition:relativeが受け皿）。 */
.recruit-section-head h3.wp-block-heading::before,
.recruit-section-head h3.wp-block-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 3px;
	background-color: var(--recruit-accent);
	border-radius: var(--gasp-r-pill);
	z-index: -1;
}
.recruit-section-head h3.wp-block-heading::before {
	width: 30px;
	left: 0;
}
.recruit-section-head h3.wp-block-heading::after {
	width: 3px;
	left: 35px;
	box-shadow: 8px 0 0 var(--recruit-accent), 16px 0 0 var(--recruit-accent);
}

/* ---- カードの等高化（3つの約束／数字でわかるGASP／募集中の職種） ----
 * top.css「2026-08-31 会社情報カードの整列」と同じ手法：カードをカラムの高さいっぱいに伸ばし、
 * ボタンがある場合はmargin-top:autoで下端に揃える（無い場合は単に等高になるだけで害はない）。 */
.recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color {
	height: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}
.recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var(--gasp-sp-24);
}

/* ---- 90秒動画プレースホルダの白カード化 ----
 * 段2マーカー内（グレー#f5f5f5・枠線）は変更せず、後勝ちのここで上書きする。
 * 白背景＋テーマ標準の影（他のカードと同じ var(--wp--preset--shadow--standard)）にした結果、
 * 枠線は他のカード（card-bg背景・枠線なし）と体裁を揃えるため外す。角丸16pxは維持。 */
.recruit-video-placeholder {
	background: #fff;
	border: none;
	box-shadow: var(--wp--preset--shadow--standard);
}
/* ===== 2026-09-01 段2.5 コーポレート型共通部品 ここまで ===== */

/* ===== 2026-09-01 採用地色（朱ピンク） ここから =====
 * 岡田さん決定（段2.6）：「地色を、コーポレート=紺・採用=濃い朱色ピンクに。カードだけ白く浮かせる」。
 * px指定のみ（remは使わない・このテーマの既知の罠）。
 * --recruit-ground の1行を変えるだけで全体の色が変わる・戻せる設計にしている
 * （候補比較 P1/P2/P3 もこの1行の値だけを差し替えて撮影した）。
 * 採用ページは page-templates/recruit.php が the_content() を直接出力する構造で、
 * コーポレート側にあった `.card-layout-w`（親テーマの白ボックス）に相当するものが無いため、
 * コーポレート側のような追加対応（transparent化や!important）は不要だった。 */
:root {
	/* 2026-09-01 岡田さん選定でP3（#b53a49）
	 * 2026-09-02 岡田さん指示「採用サイトのこの朱色をもう少し濃い暗い色にしてもらっていいかな」
	 *   → **#9e3040** に変更。
	 *
	 * 選んだ根拠（実測・白文字 #ffffff とのコントラスト／フッター #361116 との差）：
	 *   #b53a49（変更前） 5.73:1 ／ 2.94
	 *   #a83442          6.49:1 ／ 2.59
	 *   **#9e3040（採用） 7.12:1 ／ 2.36**
	 *   #8d2a38          8.33:1 ／ 2.02
	 *   #7c2430          9.76:1 ／ 1.72
	 * これ以上暗くするとフッター（#361116）との差が2を割り、
	 * 「地」と「フッター」の層が見分けられなくなる。7.12:1 は読みやすさも十分。
	 * さらに暗くしたい場合は、フッターも一緒に暗くする必要がある（今回は触っていない）。
	 *
	 * 戻し方＝この1行の値を #b53a49 に戻す。この変数だけで全ページの地色が変わる。 */
	/* ===== 2026-10-01 採用サイトの色を赤→青（岡田さん原文・旧値・戻し方） =====
	 * 岡田さん原文：「採用サイトは、コンセプトの色を赤じゃなくて青がいいとのこと。ただ、コーポレートサイトと
	 *   差別化はしたいから、濃紺はやめよう。何か適した青で塗りなおしてくれるかな。」
	 * 選んだ青＝B 海の青 #195d84（白文字との比 7.14:1・旧 #9e3040 は 7.12:1）。
	 * 置き換えた色（採用サイトのみ。コーポレートの corp-color.css は触っていない）：
	 *   地                       #9e3040 / rgba(158,48,64,…) → #195d84 / rgba(25,93,132,…)
	 *   暗い色（フッター・覆い） #361116 / rgba(54,17,22,…)  → #081c28 / rgba(8,28,40,…)（地を30%に暗くした色）
	 *   淡い色（フッターの文字） #dab9bd                      → #aec6d4
	 *   地に載る枠線ボタンのホバー文字 #b53a49（9/2 の直し漏れ）→ var(--recruit-ground)
	 * 画像 recruit_work_eyecatch.jpg（すき間の地が #361116 で焼き込み）は別名 recruit_work_eyecatch_blue.jpg に作り直した（旧ファイルは残置）。
	 * 戻し方＝退避 C:\oka\work\_claude\HP_wp\_taihi\blogsy_gasp_20261001_before_blue\ のテーマ一式に戻す。
	 *   値だけなら 上の4色を旧値に戻し、画像参照（recruit.css の 3772 帯・inc/recruit-scenes.php）を recruit_work_eyecatch.jpg に戻す。
	 * 下のコメント内の #9e3040 #361116 #b53a49 は経緯の記録なので書き換えていない。 */
	--recruit-ground: #195d84; /* 旧P3 #b53a49／旧P2 #c13a59／候補P1 #a62c68 */
}
.recruit-page {
	background: var(--recruit-ground);
}

/* 帯：段2.5では白／薄青(--tintのみ)交互だったが、地そのものが色付きになったため
 * .recruit-band は透過にして地を見せ、.recruit-band--tint だけ「地よりやや暗い帯」として
 * 交互リズムを保つ（D6のcolor-mix指定どおり）。段2.5ブロック内の`.recruit-band{background:#fff;...}`
 * は書き換えず、ここで後勝ちにする。 */
.recruit-band {
	background: transparent;
}
.recruit-band--tint {
	background: color-mix(in srgb, #000 12%, var(--recruit-ground));
}

/* 地の上の本文・弱文字（白カード内は対象外＝下の許可リストで戻す） */
.recruit-band,
.recruit-band--tint {
	color: #fff;
}
/* 許可リスト：白カード（has-card-bg-background-color）の中は段2.5までの色のまま（青はそのまま）。
 * D9：--recruit-accent の一括振替はしない＝カード内の青(#216be9)はここでは触っていない。 */
.recruit-band .has-card-bg-background-color,
.recruit-band--tint .has-card-bg-background-color {
	color: var(--recruit-text);
}
.recruit-band .has-card-bg-background-color h1,
.recruit-band .has-card-bg-background-color h2,
.recruit-band .has-card-bg-background-color h3,
.recruit-band .has-card-bg-background-color h4,
.recruit-band .has-card-bg-background-color h5,
.recruit-band .has-card-bg-background-color h6,
.recruit-band--tint .has-card-bg-background-color h1,
.recruit-band--tint .has-card-bg-background-color h2,
.recruit-band--tint .has-card-bg-background-color h3,
.recruit-band--tint .has-card-bg-background-color h4,
.recruit-band--tint .has-card-bg-background-color h5,
.recruit-band--tint .has-card-bg-background-color h6 {
	color: var(--recruit-heading);
}

/* 節ラベル・青ティックは地に直接載るため白系へ（D9：朱ピンク地×青#216be9は約1.1:1で消えるため）。
 * ::after内のbox-shadow（462行目、段2.5ブロック）は独立指定のためここで別途上書きが必要
 * （見落とし注意点として指示文に明記されていた箇所）。 */
.recruit-section-label {
	color: #fff;
}
.recruit-section-head h3.wp-block-heading::before,
.recruit-section-head h3.wp-block-heading::after {
	background-color: #fff;
}
.recruit-section-head h3.wp-block-heading::after {
	box-shadow: 8px 0 0 #fff, 16px 0 0 #fff;
}

/* ヒーローのベール：紺(#141c3a、update_page_37_corp_layout.phpのDB値)→選定ピンクへ。
 * DBは変更せず、CSSの後勝ちで色だけ差し替える（戻す場合はこの1ルールを削除するだけでよい）。
 * has-background-dim-60（段2.5でdimRatio60として実装）が不透明色に対してopacity:0.6を掛けるため、
 * 結果としてrgba(#c13a59, 0.6)相当の見え方になる（アルファを二重にかけないよう、ここでは
 * 不透明の#c13a59のみを指定している）。 */
.recruit-page .wp-block-cover__background.has-background-dim-60 {
	background-color: var(--recruit-ground) !important;
}
/* ===== 2026-09-01 採用地色（朱ピンク） ここまで ===== */

/* ===== 2026-09-01 段3 章パネル ここから =====
 * 岡田さん指摘への対応（update_page_37_panel_cta.php が本文側で recruit-band(--tint) を
 * recruit-panel に置き換える。align:fullも外し、非fullwidthの白パネルにする）。
 * 「各章がパネルに乗ってない」→ 動画・約束・数字・職種の4節を白い角丸パネルに乗せて浮かせる。
 * 「一緒に働きませんか？をまずはご相談くださいと揃えたい」→ CTA節の見出し・ボタン列の型を
 * コーポレート側ページ2806のCTA（H4太字700・contact_buttonクラス）に揃える（本ブロックでは
 * 主に段2.6で白文字化されたラベル・青ティックを、パネル内では元の濃色に戻す）。
 * remは使わない（このテーマの既知の罠。ルートfont-sizeが10px）。 */

/* ---- パネル本体 ----
 * 角丸24px・節間56pxの出典＝top.css .gasp-process-section（561-566行目、border-radius:24px、
 * margin-bottom:56px）。padding/box-shadowは画面実測で決定（下記参照）。 */
.recruit-panel {
	background: #fff;
	border-radius: var(--gasp-r-12);
	padding: var(--gasp-sp-48) var(--gasp-sp-32);
	margin: var(--gasp-sp-64) auto;
	box-shadow: var(--wp--preset--shadow--standard, 0 2px 8px rgba(0, 0, 0, 0.08));
}

/* ---- パネル内の文字色を段2.6の白指定から戻す（詳細度で勝つ） ----
 * 段2.6（516-554行目）は .recruit-band / .recruit-band--tint に紐づく白文字化ルールで、
 * recruit-band(--tint)クラス自体を本文から外したことで自動的に効かなくなる。ただし
 * .recruit-section-label{color:#fff} と青ティックの白化（スコープなしのセレクタ）だけは
 * 引き続き効いてしまうため、ここで詳細度の高いセレクタ（.recruit-panel 経由）で打ち返す。
 * ::afterのbox-shadow（段2.6 552-554行目）も独立指定のため再指定が必要（見落とし注意点）。 */
.recruit-panel .recruit-section-label {
	color: #282424;
}
.recruit-panel .recruit-section-head h3.wp-block-heading::before,
.recruit-panel .recruit-section-head h3.wp-block-heading::after {
	background-color: var(--recruit-accent);
}
.recruit-panel .recruit-section-head h3.wp-block-heading::after {
	box-shadow: 8px 0 0 var(--recruit-accent), 16px 0 0 var(--recruit-accent);
}

/* ---- 幅合わせ（パネル・CTA・ヒーロー内コンテンツの左右端を揃える） ----
 * 実測：.eye-catch_group（ヒーロー内コンテンツ）は幅620px・中央寄せ（cover内でconstrained）。
 * .recruit-panel・.recruit-cta は align指定なしのため親の内容幅（テーマcontentSize=980px）
 * まで広がる。ヒーローの620pxまで狭めると数字4タイル等のカードグリッドが窮屈になるため、
 * 「左右端を揃える」は基準をヒーロー側ではなくテーマの標準コンテンツ幅（980px）に取り、
 * パネル・CTAともその幅・中央寄せに統一する（実測でこの980pxが.recruit-mainの実効幅と一致）。 */
.recruit-panel,
.recruit-cta {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}
/* ===== 2026-09-01 段3 章パネル ここまで ===== */

/* ===== 2026-09-01 段4 見出しを地色の上へ・カードだけ浮かせる ここから =====
 * 岡田さん指摘（9/1夜）「パネルに乗っていて、やはりコンテンツが同じようになってない」
 * → 選択肢を3つ提示して岡田さんが選んだのは
 *   **「見出しを地色の上に出す＋カードだけ浮かせる」＝コーポレートのSERVICE節と同型**。
 *
 * ■ コーポレート側の型（実測。これに合わせる）
 *   節ラベル（SOLUTION等）… 16px / 400 / #eef1f8 を地色の上に直置き
 *   見出し（課題と解決法等）… H3 26px / 600 / #fff・青ティック（30×3px＋3点ドット）
 *   白いのは中身のカードだけ（bg #fff・地色の上に影で浮く）
 *   ＝ラッパーになる白いパネルは存在しない
 *
 * ■ 実現方法（DBは触らない）
 * ラベル・H3・カードはすべて .recruit-panel の子孫なので、**パネルの背景・影・paddingを消すだけで
 * 中身はそのまま地色の上に並ぶ**。DOMを動かす必要が無い（＝ページ37の post_content は無変更。
 * 9/1の`?`化事故の再発面を開かない）。段3マーカーは編集せず、後勝ちでここに書く。
 *
 * ■ 段3で入れた「パネル内は濃色に戻す」指定の打ち返し
 * 段3は白パネルの上に乗る前提でラベル#282424・H3#29294b・青ティックにしていた。
 * パネルが無くなり朱ピンク地（#b53a49）の上に出るので、コーポレートと同じ白系へ戻す。
 * **青ティックは朱ピンク地の上で 1.19:1（ほぼ不可視）** なので白にする
 * （コーポレートで青が成立しているのは地が紺 #141c3a だから＝3.46:1。色そのものではなく
 *  「見出しの下線」という役割を移す。段2.6のD9で既に同じ判断をしている）。
 *
 * ■ コントラスト（朱ピンク #b53a49 に対して・計算値）
 *   #ffffff 5.73:1 ／ #fbfbfb 5.54:1 ／ #eef1f8 5.07:1  … いずれもWCAG AA（4.5:1）を満たす
 *   参考：現状の注記 #999999 は 2.01:1、段3のラベル #282424 は 1.09:1 で判読不能になる
 *
 * 戻し方＝このブロックを削除すると段3の白パネルに戻る。 */

/* ---- パネルの見た目を消す（幅と節間の間隔は段3のまま残す） ---- */
.recruit-panel {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* ---- 地色の上に出た見出し・本文を白系に戻す（段3の濃色指定を後勝ちで打ち返す） ----
 * セレクタは段3と同じ形にして、読み込み順で勝たせている（詳細度は同じ）。 */
.recruit-panel .recruit-section-label {
	color: #eef1f8;
}
.recruit-panel .recruit-section-head h3.wp-block-heading {
	color: #fff;
}
/* 見出しブロック内のリード段落（例：「私たちの仕事・文化・想いを90秒にまとめました」）。
 * カード内の段落は .recruit-section-head の外なので巻き込まない。 */
.recruit-panel .recruit-section-head p:not(.recruit-section-label) {
	color: #eef1f8;
}

/* ---- 青ティックを白にする（朱ピンク地では青が1.19:1でほぼ見えないため） ---- */
.recruit-panel .recruit-section-head h3.wp-block-heading::before,
.recruit-panel .recruit-section-head h3.wp-block-heading::after {
	background-color: #fbfbfb;
}
/* ::after の3点ドットは box-shadow で描いているので別途指定が必要
 * （段3で「再指定漏れが起きやすい既知の見落としポイント」として記録されている箇所）。 */
.recruit-panel .recruit-section-head h3.wp-block-heading::after {
	box-shadow: 8px 0 0 #fbfbfb, 16px 0 0 #fbfbfb;
}

/* ---- 注記（「※ この動画は準備中です」）も地色の上に出るので白系にする ----
 * 現状 #999999 は朱ピンク地で 2.01:1 ＝読めない。
 * 「注記であること」は色の濃さではなく **12px・イタリック** で表す
 * （色の濃さで表すと、地色が濃い面では必ず読めなくなるため）。 */
.recruit-draft-note {
	color: #eef1f8;
}
/* ===== 2026-09-01 段4 見出しを地色の上へ・カードだけ浮かせる ここまで ===== */

/* ===== 2026-09-01 段5 フッターの地色 ここから =====
 * 岡田さん指示（9/1夜）「リクルートサイトのフッターの色も、コーポレートサイトと同じように
 * パネルの色を同程度濃くした色にしてほしい」。
 *
 * ■ 現状の何が問題か（実測）
 * .recruit-footer の背景は `var(--recruit-heading)` ＝ #29294b（**紺**）で、
 * 採用の地色 #b53a49（朱ピンク）とは無関係な色。段2.6で地色を朱ピンクにしたときに
 * フッターだけコーポレート系の紺が取り残されていた。
 *
 * ■ コーポレートはどうなっているか（実測）
 *   地色 #141c3a → フッター #0d1326（境界コントラスト 1.10:1）
 *   トップのCTAパネル「まずはご相談ください」の実効色 = 黒70% × 地色 = #060811
 *   → CTAパネルとフッターの比は 1.08:1 ＝ **足元が連続した一枚の暗い面に見える**
 * コーポレートは地色が暗いため、「比率で暗くする」「見えの差を揃える」「CTAパネルと同じ濃さ」の
 * 3つの定義が**すべて同じ色に収束する**。採用は地色が明るいので3つが大きく分かれる。
 *
 * ■ 候補（すべて #b53a49 = rgb(181,58,73) から導出・白 #fbfbfb とのコントラスト付き）
 *   F1 #a13341  HSL明度差を同じ（−5.3pt）        白と 6.62:1  地との境界 1.20:1
 *   F2 #762630  チャンネル比0.661／HSL明度比0.653  白と 9.58:1  地との境界 1.73:1
 *   F3 #361116  CTAパネルと同じ濃さ（黒70%×地色） 白と 16.3:1  地との境界 2.94:1
 *
 * ■ 実装値は F3（**2026-09-01 岡田さん選定で確定**。3案のスクリーンショットを並べて選定）
 * 理由：①岡田さんの原文が「**パネル**の色を同程度濃くした色」でパネルを名指ししている
 *      ②コーポレートで成立している「CTA ≒ フッター」という関係を採用でも成立させるのが
 *        「コーポレートサイトと同じように」の意味として一貫する
 *      ③採用トップの最下部は CTAパネル → フッターの順に並ぶので、濃さが揃うと
 *        コーポレートと同じ「連続した暗い足元」に見える
 *      ④由来する数字が1つだけ（70% ＝ CTAカバーの dimRatio そのもの。新しい係数を増やさない）
 * F1を選ぶ場合の注意：地との境界が 1.20:1 で、明るい地色の上では**色を変え忘れたように見える**恐れ。
 *
 * ■ hex直書きにしている理由
 * color-mix で --recruit-ground から自動導出すると、将来 --recruit-ground を変えたときに
 * フッターが**黙って変わり、岡田さんの選定結果が無言で失われる**。
 * ただし今回まさに「地色をP3にしたのにフッターが取り残された」失敗が起きているので、
 * 取り残しに気づけるよう --recruit-ground の定義行にも注意書きを置く。
 *
 * 戻し方＝このブロックを削除すると #29294b（紺）に戻る。 */
:root {
	/* 2026-09-01 岡田さん選定でF3に確定。候補：F1 #a13341 ／ F2 #762630 ／ F3 #361116 */
	--recruit-footer-ground: #081c28;
}
.recruit-footer {
	background: var(--recruit-footer-ground);
}
/* ===== 2026-09-01 段5 フッターの地色 ここまで ===== */

/* ===== 2026-09-01 段6 ヘッダー/フッターをコーポレート型に（v2） ここから =====
 * 岡田さん指摘「リクルートサイト、ヘッダ、フッターがコーポレートサイトと同じようになってない」
 * 「会社ロゴが違う。コーポレートサイトが正しい」「フッターのこの部分も違う（左カラム）」。
 * 岡田さん回答：採用フッターは採用専用のリンク構成を持つ／説明文は採用向けの文言のまま。
 *
 * 対象マークアップは header-recruit2.php / footer-recruit2.php（新規）。
 * 見た目の大半は**親テーマのクラス名を使うことで親テーマCSSが供給**する。
 * このブロックに書くのは次の3種類だけ：
 *   (A) corp-color.css が採用ページで読み込まれないことによる穴埋め
 *   (B) 採用固有の要素（採用サイトラベル／コーポレートサイトリンク／エントリー／モバイル開閉）
 *   (C) フッターのリンク列だけは体裁を実測値から写す（ウィジェット出力を流用できないため）
 * remは使わない（このテーマはルートfont-sizeが10pxになる既知の罠）。
 *
 * ■ スコープは .recruit-page--v2（v1に漏らさないため）
 * v1 と v2 は **同じ id="recruit-nav" を使っている**（v1は .recruit-header__menu、v2は
 * .blogsy-header-nav-wrapper に付く）。当初このブロックを `.recruit-page` でスコープしていたが、
 * それだと `page-templates/recruit.php` の2語を 'recruit' に戻して v1 に復帰させても
 * `#recruit-nav{position:absolute;...}` の1ルールが v1 にも当たり、
 * **782〜1024px 幅（v1の折り畳み境界は781pxなので本来は通常表示の域）でナビが
 * ヘッダーの外へずれて白背景・下線が付く**という崩れを起こす（点検役が発見）。
 * v2 の body には `recruit-page--v2` が付く（header-recruit2.php の body_class）ので、
 * このブロックのセレクタはすべて `.recruit-page--v2` でスコープしてある。
 * ＝**2語を戻すだけで v1 に完全復帰する**（このブロックを消す必要はない）。
 *
 * 戻し方＝page-templates/recruit.php の get_header('recruit2')/get_footer('recruit2') を
 * 'recruit' に戻す（v1に一発で戻る）。このブロックは残しておいても v1 には当たらない。 */

/* ---- (A) ヘッダーの白バー ----
 * corp-color.css は functions.php の `!is_page_template('page-templates/recruit.php')` 条件で
 * **採用ページでは読み込まれない**。そこに書いてあるヘッダー白バーの指定（#site-header と
 * .pt-header-inner）が採用側に効かず、親テーマが参照する var(--pt-body-bg-color) の素の値で
 * ヘッダーが描かれてしまう。同等のルールを採用スコープで持つ。
 * !important の根拠はコーポレート側と同じ（.pt-header-inner は変数参照の指定に負けるため）。 */
.recruit-page--v2 #site-header {
	background-color: #fff;
}
.recruit-page--v2 .pt-header-inner {
	background-color: #fff !important;
}

/* ---- (A) 固定ヘッダー分の余白を解除 ----
 * v1 のヘッダーは position:fixed だったため段1で .recruit-page に padding-top を入れていた
 * （段1マーカー32行目付近）。v2 では #site-header が position:sticky（header-always-visible.css）で
 * 流れの中に場所を残すので、この余白は二重の隙間になる。段1マーカーは編集せず後勝ちで解除する。 */
.recruit-page--v2 {
	padding-top: 0;
}

/* ---- (B) ロゴ右の「採用サイト」ラベル ----
 * ※岡田さん未確認：残すか消すかは確認していない。黙って消さない側に倒して残している。 */
.recruit-site-label {
	margin-left: var(--gasp-sp-12);
	padding-left: var(--gasp-sp-12);
	border-left: 1px solid var(--recruit-border);
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-1);
	color: var(--recruit-text);
	white-space: nowrap;
}
.recruit-page--v2 .pt-logo {
	display: flex;
	align-items: center;
}

/* ---- (B) 右端のアクション（コーポレートサイトリンク＋エントリー） ---- */
.recruit-header-actions {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-16);
	margin-left: auto;
}
.recruit-corporate-link {
	color: var(--recruit-text);
	text-decoration: none;
	white-space: nowrap;
	/* 2026-10-07 タンさん指摘 K12：隣のナビ7項目（15px・600・字間 -0.25px・行高 normal）と大きさ・太さが違って見えた（実測 14px・400）。
	 * ナビ項目の computed 値に揃える。戻し方：この3行を font-size: var(--gasp-fs-14); 1行に戻す。 */
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.25px;
}
.recruit-corporate-link:hover {
	text-decoration: underline;
}
/* エントリーボタンの高さをコーポレートの「お問い合わせ」に合わせる。
 * 実測：コーポレート45px／採用39px。padding（10.42px 18px）も line-height（18px）も
 * 親テーマの .blogsy-btn から同じものが当たっているが、コーポレート側は .icon_chat の
 * SVGアイコンが入るぶん6px高い。採用側のCTAは「エントリー」で、チャットアイコンは
 * 意味が合わない（段3で同じ判断をして icon_chat を採らなかった）。
 * アイコンを足す代わりに実測値の45pxを最低高さとして与える。 */
.recruit-entry-btn {
	min-height: 45px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
/* 2026-10-07 タンさん指摘 K12（エントリーの文字が上に寄る）：原因＝上の display:inline-flex を、親テーマ style.min.css の
 * .button{display:inline-block}（同じ詳細度で後から読み込まれる）が打ち消していた。実測（1366）：ボタンは display:block 扱いで、
 * min-height 45px のうち文字の下に余り 約6px が溜まり、文字の中心がボタンの中心より約3.6px上にあった
 * （ボタン y25.5・高45＝中心48／span y32.9・高23＝中心44.4）。クラスを足して詳細度を上げ、inline-flex を効かせる。
 * 戻し方：この規則を削除。 */
.recruit-header-actions .recruit-entry-btn {
	display: inline-flex;
}

/* ---- (B) モバイルの開閉 ----
 * 親テーマのオフキャンバスは primary_menu（コーポレートのメニュー）しか出せないため、
 * v1 から動作実績のある #recruit-menu-toggle ＋ #recruit-nav ＋ recruit.js を維持する。
 * 切り替え幅は親テーマのヘッダー切替（blogsy_ajax_object.header_breakpoint 既定1025px）に合わせる。 */
.recruit-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: var(--gasp-sp-4);
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.recruit-header__toggle-bar {
	display: block;
	width: 22px;
	height: 2px;
	margin: 0 auto;
	background: var(--recruit-text);
}
/* 2026-10-08 原野さん指摘 H1（「採用ページヘッダーに表示のエントリーボタンの下の余白が多いのが気になる」）。岡田さん「H1とH4も対応して」。
 * 実測：幅1025〜1200 でヘッダーが2段に折れ（141px）、エントリーだけが2段目に落ちていた（ロゴ357＋ナビ798＋右259＝1414px が入らない）。
 * 設計役の推奨（境目を上げる）で、ハンバーガーに切り替える幅を 1024 → 1239 に上げた（下の @media の値・header-recruit2.php の noscript も同じ値）。
 * 値の根拠（実測・会社を知る 3693）：2段になるのは幅 1210 以下、1220 からは1段（96px）。字の幅の環境差を見て 20px ほど余裕を足した＝リードの判断。
 * 1025〜1239 はハンバーガー（ヘッダー 96px・押すと7項目が 44px で開く＝幅1100で実測）。
 * 親テーマの「1024以下でナビを隠す !important」は 1025〜1239 に効かないので、直後のブロックで同じことを足す。
 * 戻し方：下の 2つの @media の 1239px を 1024px に戻し（1025〜1239 のブロックは削除）、noscript の 1239px を 1024px に戻す。 */
/* 2026-10-08 タンさん指摘 N5：開いたメニューの最後の「コーポレートサイト」（header-recruit2.php の li.recruit-nav-corporate）は、
 * 右に「コーポレートサイト」のリンクが出ている広い幅（1240px 以上）では隠す。戻し方：この規則と header-recruit2.php の li を削除 */
@media screen and (min-width: 1240px) {
	.recruit-page--v2 #recruit-nav .recruit-nav-corporate {
		display: none;
	}
}
@media screen and (min-width: 1025px) and (max-width: 1239px) {
	.recruit-page--v2 .pt-header-inner #recruit-nav:not(.is-open) {
		display: none !important;
	}
}
@media screen and (max-width: 1239px) {
	.recruit-page--v2 #recruit-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		padding: var(--gasp-sp-12) var(--gasp-sp-24) var(--gasp-sp-24);
		background: #fff;
		border-bottom: 1px solid var(--recruit-border);
	}
	/* !important の根拠（実測）：親テーマ style.min.css に
	 *   @media (max-width:1024px) { .pt-header-inner .blogsy-header-nav-wrapper { display:none !important } }
	 * があり、is-open を付けても開かなかった（実測：is-open=true なのに computed display=none）。
	 * !important 同士の勝負になるので、こちらは id を含む高い詳細度＋!important で上書きする。 */
	.recruit-page--v2 .pt-header-inner #recruit-nav.is-open {
		display: block !important;
	}
	/* ※未解決（2026-09-01・岡田さん判断待ち）：モバイルのヘッダー高さ
	 *   採用 173px ／ コーポレート 116px。
	 * 原因は「採用サイト」ラベルが1行を占めること（実測：ロゴ／ラベル／エントリー＋ハンバーガー
	 * の3段に折り返している。コーポレートは ロゴ／お問い合わせ＋ハンバーガー の2段）。
	 * ロゴを縮める案（max-width指定）は試したが、親テーマ style.min.css の
	 * `.pt-header-inner .pt-logo img{max-width:100%}` と同詳細度でかつ**style.min.cssが
	 * recruit.cssより後に読み込まれる**ため効かなかった（実測で確認）。
	 * 詳細度を上げれば通せるが、そもそも「採用サイト」ラベルを残すかどうかが岡田さん未確認なので、
	 * 当て推量で縮めずここで止める。選択肢は
	 *   (a) モバイルではラベルを出さない（コーポレートと同じ2段・116px相当になる）
	 *   (b) ラベルは残しロゴだけ縮める（詳細度を上げて max-width を通す）
	 *   (c) このまま3段で許容する
	 * 横スクロールは出ていない（375px で body.scrollWidth = 375）。 */
	.recruit-site-label {
		font-size: var(--gasp-fs-12);
		margin-left: var(--gasp-sp-8);
		padding-left: var(--gasp-sp-8);
	}
	.recruit-page--v2 #recruit-nav .blogsy-header-nav {
		display: block;
	}
	/* 2026-10-07 タンさん指摘 S8：開いたメニューの項目が指で押しにくい。各項目のリンクを1行44px以上にする
	 * （44px は hero-actions.css 94行 .gasp-hero-cta の min-height と同じ下限）。
	 * 戻し方：この規則を削除。 */
	.recruit-page--v2 #recruit-nav .blogsy-header-nav > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
		padding-top: var(--gasp-sp-8);
		padding-bottom: var(--gasp-sp-8);
	}
	/* 2026-10-07 タンさん指摘 S7：ハンバーガーを2回目に押すと黒丸になる。親テーマ style.css 729〜738行の
	 * button:hover{background:#282424}（＋624〜635行 border-radius:50px）が、タッチ端末ではタップ後も :hover が残るため
	 * 40×40 のトグルが黒丸で出る。:hover/:focus/:active の地を透明に固定する。:focus-visible の枠は消さない。
	 * 戻し方：この規則を削除。 */
	.recruit-page--v2 .recruit-header__toggle:hover,
	.recruit-page--v2 .recruit-header__toggle:focus,
	.recruit-page--v2 .recruit-header__toggle:active {
		background: transparent;
	}
	.recruit-page--v2 .pt-header-container {
		position: relative;
	}
	.recruit-header__toggle {
		display: flex;
	}
	/* 狭い幅ではロゴ＋エントリー＋ハンバーガーだけ残す（コーポレートと同じ密度にする） */
	.recruit-corporate-link {
		display: none;
	}
}

/* ---- (A)(C) フッター ----
 * corp-color.css が来ないので、フッターの地色は採用側で明示する。
 * 色は段5で岡田さんが選定した F3（--recruit-footer-ground）をそのまま使う。
 * 親テーマの .site-default-footer は素で background:#ffffff を持つため上書きが要る。 */
.recruit-page--v2 #site-footer,
.recruit-page--v2 .site-default-footer {
	background: var(--recruit-footer-ground) !important;
	color: #aec6d4;
}
.recruit-page--v2 #site-footer a {
	color: #eef1f8;
	text-decoration: none;
}
.recruit-page--v2 #site-footer a:hover {
	text-decoration: underline;
}
.recruit-page--v2 #site-footer h3,
.recruit-page--v2 #site-footer h4 {
	color: #fff;
}

/* 左カラム（地球儀マーク＋社名＋説明文）。コーポレートと同じく3要素とも中央寄せ。 */
.recruit-footer-mark {
	margin: 0 0 var(--gasp-sp-12);
	text-align: center;
}
.recruit-footer-desc {
	margin: var(--gasp-sp-8) 0 0;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}
.recruit-footer-site-label {
	margin: var(--gasp-sp-12) 0 0;
	font-size: var(--gasp-fs-14);
	color: #aec6d4;
}

/* 2026-10-01 フッターの「エントリー・お問い合わせ」ボタンを白地＋地色の文字に（赤→青の作業の一部）
 * 岡田さんの回答：「（青い地の上の青い塗りボタン #216be9 が溶けて見えにくい場合）替えてよい」
 *   ＝溶けるボタンだけ、採用トップの「エントリー」（.gasp-recruit-cta--primary）と同じ白地に地色の文字の形にする。
 * 理由：親テーマの .button の青 #216be9 が暗い青のフッター #081c28 に乗ると 3.60:1・同系色で縁が弱い
 *   （旧：濃赤 #361116 の上で 3.48:1 だったが色相が違うので溶けなかった）。
 * 文字＝var(--recruit-ground) #195d84 on 白 ＝ 7.14:1。ホバーは文字色を変えず全体を少し落とす（hero と同じ）。
 * 戻し方＝このブロックを削除すると親テーマの青い塗りに戻る。 */
.recruit-page--v2 #site-footer .recruit-footer-cta,
.recruit-page--v2 #site-footer .recruit-footer-cta:hover,
.recruit-page--v2 #site-footer .recruit-footer-cta:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: var(--recruit-ground);
}
.recruit-page--v2 #site-footer .recruit-footer-cta:hover,
.recruit-page--v2 #site-footer .recruit-footer-cta:focus-visible {
	opacity: .88;
}

/* (C) リンク列。コーポレートのフッター実測値を写している
 * （見出し26px/400 #b8c3da・リンク15px/400 #b8c3da）。
 * コーポレート側はナビメニューウィジェットの出力に付く体裁で、採用のリンク構成には流用できない。
 * ＝ここだけは「写し」なので、コーポレートのフッター体裁を変えたら合わせて直すこと。 */
.recruit-footer-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gasp-sp-32);
}
@media screen and (max-width: 767px) {
	.recruit-footer-cols {
		grid-template-columns: 1fr;
	}
}
.recruit-footer-heading {
	margin: 0 0 var(--gasp-sp-12);
	font-size: var(--gasp-fs-28);
	font-weight: 400;
	line-height: var(--gasp-lh-tight);
}
.recruit-footer-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gasp-sp-8) var(--gasp-sp-24);
}
.recruit-footer-list a {
	font-size: var(--gasp-fs-16);
}
.recruit-footer-contact-desc {
	margin: 0 0 var(--gasp-sp-16);
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}

/* 下部バー：コーポレートと同じく中央寄せ（v1は左右振り分けだった）。 */
.recruit-page--v2 .default-footer-copyright {
	text-align: center;
}
.recruit-page--v2 .default-footer-copyright p {
	margin: 0;
	font-size: var(--gasp-fs-16);
}
.recruit-footer-bottom-links {
	margin-top: var(--gasp-sp-8) !important;
}
/* ===== 2026-09-01 段6 ヘッダー/フッターをコーポレート型に（v2） ここまで ===== */

/* ===== 2026-09-02 採用4ページ 共通部品 ここから =====
 * 岡田さん指示（9/2朝）「採用サイトの会社を知る、仕事を知る、人を知る、働き方・制度を
 * 近藤さんのモックに揃えてもらっていいかな。まず忠実に再現しよう。」
 * 岡田さん決定：**型と中身はモック忠実・地色はP3のまま**。
 * ＝節の構成／見出し／カードの並び／文言はモックどおり。色は段2.6＋段4の現行
 * （地＝P3 #b53a49／面＝白カード／見出しは地色の上に白文字）を維持する。
 *
 * ■ モックの bg-secondary / bg-background の交互は持ち込まない
 * モックは薄グレーと白の帯を交互に敷いて節を区切っているが、段4で岡田さんが選んだのは
 * 「見出しを地色の上へ・カードだけ浮かせる」＝**面の交互を持たない型**。
 * 交互を持ち込むと同じサイトに節区切りの型が2つできるので、**全節を地色の直置き**にする。
 * 節の切れ目は既存の2つで表す：
 *   節間の間  … .recruit-panel の margin 56px（段3で入り、段4で背景・影・paddingだけ消えた）
 *   節の頭    … .recruit-section-head（ラベル#eef1f8＋h3白＋白ティック）
 * 段2.6の .recruit-band--tint（地よりやや暗い帯）は**復活させない**（削除もしない＝
 * 既存マーカー内を触らないため。使わないことをここに書いておく）。
 *
 * ■ 見出しレベルは h3 で統一
 * モックは h2 だが、ティックのCSSが .recruit-section-head h3.wp-block-heading 固定で、
 * 採用トップ37も h3。h2 にすると見出しの型をもう1つ作ることになるので h3 に揃える。
 *
 * ■ ヒーローは画像を使わない
 * モック4本とも淡色帯で画像を置いていない。37のヒーローは cover + useFeaturedImage:true だが、
 * 4ページにアイキャッチが設定されているかは未確認で、無ければ空の cover になる。
 * 画像を使わなければこの分岐自体が消える。
 *
 * ■ rem は使わない（このテーマはルートfont-sizeが10pxになる既知の罠）
 * 本文側のインラインstyleも 3rem ではなく 30px で書いている（37は3rem＝実効30px。
 * 結果は同じで、罠を踏まない側に寄せた）。
 *
 * 戻し方＝このブロックを削除し、各ページを php restore_page.php <ID> で戻す。 */

/* ---- ヒーロー（ラベル＋h1＋リード。画像なし） ---- */
.recruit-hero {
	max-width: 980px;
	margin: 0 auto;
	padding: var(--gasp-sp-64) 0 var(--gasp-sp-8);
}
.recruit-hero .recruit-section-label {
	color: #eef1f8;
}
.recruit-hero h1.wp-block-heading {
	color: #fff;
	margin: var(--gasp-sp-8) 0 var(--gasp-sp-16);
}
.recruit-hero .recruit-hero-lead {
	max-width: 720px;
	margin: 0;
	color: #eef1f8;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}

/* ---- 番号つきカード（モックの「私たちの仕事の流儀」）----
 * 白カードの中に「丸番号＋タイトル＋説明」を横並びで置く。
 * 番号の丸は薄い青地に青文字（モックの bg-accent/10 + text-accent と同じ考え方）。 */
.recruit-numbered-card {
	display: flex;
	align-items: flex-start;
	gap: var(--gasp-sp-16);
}
.recruit-numbered-card .recruit-num {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: var(--gasp-r-12);
	background: color-mix(in srgb, var(--recruit-accent) 10%, #fff);
	color: var(--recruit-accent);
	font-weight: 700;
	font-size: var(--gasp-fs-16);
	line-height: 40px;
	text-align: center;
	margin: 0;
}
.recruit-numbered-card .recruit-num-body {
	flex: 1 1 auto;
}
.recruit-numbered-card h4.wp-block-heading {
	margin: 0 0 var(--gasp-sp-8);
	font-size: var(--gasp-fs-16);
}
.recruit-numbered-card p {
	margin: 0;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}

/* ---- アイコン付きの箇条（モックの「信頼のつくり方」）----
 * 白カードを縦に積み、左にアイコンを置く。 */
.recruit-icon-item {
	display: flex;
	align-items: flex-start;
	gap: var(--gasp-sp-16);
}
.recruit-icon-item p {
	margin: 0;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}
/* アイコンは本文にSVGを埋めず、**CSSの疑似要素**で描く。
 * 理由1：本文にSVGを入れるとDB本文が肥大し、書き込みスクリプトで行う
 *        「可視テキスト・全hrefの照合」のノイズになって検査が形骸化する。
 * 理由2：疑似要素なら本文に空タグを置かずに済む（空の段落ブロックはWPに削除される）。
 * 形は lucide の Shield（モックが使っているもの）。 */
.recruit-icon-item::before {
	content: "";
	flex: 0 0 auto;
	display: block;
	width: 24px;
	height: 24px;
	margin-top: var(--gasp-sp-4);
	background-color: var(--recruit-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.recruit-icon-item--shield::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
}

/* ---- 定義リスト（モックの「会社概要」）----
 * 白カード1枚の中を行区切り線で分ける。ラベルは固定幅。 */
.recruit-deflist .recruit-deflist-row {
	display: flex;
	gap: var(--gasp-sp-16);
	padding: var(--gasp-sp-16) 0;
	border-bottom: 1px solid var(--recruit-border);
}
.recruit-deflist .recruit-deflist-row:last-child {
	border-bottom: 0;
}
.recruit-deflist .recruit-deflist-label {
	flex: 0 0 128px;
	margin: 0;
	font-size: var(--gasp-fs-14);
	color: #6b6b6b;
}
.recruit-deflist .recruit-deflist-value {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
	font-weight: 500;
}
@media screen and (max-width: 600px) {
	.recruit-deflist .recruit-deflist-row {
		flex-direction: column;
		gap: var(--gasp-sp-4);
	}
	.recruit-deflist .recruit-deflist-label {
		flex-basis: auto;
	}
}

/* ---- 沿革のタイムライン ----
 * 地色の上に直接置く（カードにしない＝モックも面を持たない）。
 * 線と点は地色の上なので白系にする（青は朱ピンク地で1.19:1＝ほぼ見えないため。段4と同じ判断）。 */
.recruit-timeline {
	max-width: 720px;
	margin: 0;
	padding-left: var(--gasp-sp-32);
	border-left: 2px solid rgba(255, 255, 255, 0.35);
}
.recruit-timeline .recruit-timeline-item {
	position: relative;
	margin-bottom: var(--gasp-sp-32);
}
.recruit-timeline .recruit-timeline-item:last-child {
	margin-bottom: 0;
}
.recruit-timeline .recruit-timeline-item::before {
	content: "";
	position: absolute;
	left: -37px;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fbfbfb;
	box-shadow: 0 0 0 4px var(--recruit-ground);
}
.recruit-timeline .recruit-timeline-year {
	margin: 0 0 var(--gasp-sp-4);
	font-weight: 700;
	color: #fbfbfb;
}
.recruit-timeline .recruit-timeline-event {
	margin: 0;
	color: #eef1f8;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}
/* ===== 2026-09-02 採用4ページ 共通部品 ここまで ===== */

/* ===== 2026-09-02 採用4ページ 共通部品（実測後の是正） ここから =====
 * 1枚目（会社を知る／3693）を実装して画面で測った結果、2件の崩れが出たのでここで是正する。
 * どちらも**原因は親テーマ側の後勝ち**で、当てずっぽうではなく computed 値で特定した。
 *
 * ■ 是正1：横方向の余白がゼロで、狭い幅だと文字が画面の端に張り付く
 * 実測（790px幅）：.recruit-hero / .recruit-panel とも x=0・width=775・padding-left=0。
 * `has-global-padding` は付いているが、親テーマ側でルートの余白変数が効いておらず 0 になる。
 * 段3では .recruit-panel に padding 48px 32px があったが、段4（箱をやめる）で padding:0 にしたため、
 * max-width:980px が効かない幅では左右に余白が無くなる。**ページ37でも同じ状態**になっている。
 * → max-width を 1028px（980＋24×2）にして padding を 0 24px にする。
 *   box-sizing:border-box なので**デスクトップの内容幅は980pxのまま変わらず**、
 *   狭い幅でだけ24pxの余白が付く（＝37の見え方を変えずに端の張り付きだけ直る）。
 *
 * ■ 是正2：番号カード・アイコン付き箇条が縦積みになる
 * 実測：computed が display:flex なのに **flex-direction:column**、
 * .recruit-num の margin が `0 138.712px`（＝中央寄せ）。
 * ※当初このコメントに「親テーマ style.min.css が後勝ちしている」と書いたが**誤り**だった。
 *   CSSOMを走査して当たっているルールを列挙したところ、犯人は**このファイル自身**の
 *   段2.5マーカーにあるカード等高化ルール
 *     `.recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color`
 *     { display:flex; flex-direction:column; }
 *   で、クラス4つぶんの詳細度がある。`.recruit-page--v2 .recruit-numbered-card`（クラス2つ）では
 *   届かない。アイコン付き箇条と定義リストは .recruit-card-grid の外にあるので、
 *   同じ指定でも効いていた（＝同じ書き方で片方だけ直った理由）。
 * → 番号カードだけ、等高化ルールと同じ形にクラスを1つ足した詳細度で打ち返す。
 *   等高化そのもの（カードの高さが揃う）は残したいので、段2.5マーカーは触らない。 */

/* 是正1
 *
 * 2026-09-02 岡田さん指示「採用サイトの記事の幅は、コーポレートサイトと同じでいい。」
 * → コーポレート側の実測値に合わせた。
 *   コーポレート … `.single-content-inner` が 枠1281px（左右padding 20px）＝**内容幅1241px**
 *   採用（変更前）… max-width 1028px（左右padding 24px）＝内容幅980px
 * 内容幅を1241pxに揃えるため、枠を 1281px・左右padding 20px にする。
 * （数字を直接合わせている。1028pxは9/2午前にリードが決めた値で、根拠は「読みやすい幅」だった） */
.recruit-hero,
.recruit-panel {
	max-width: 1281px;
	padding-left: var(--gasp-sp-24);
	padding-right: var(--gasp-sp-24);
	box-sizing: border-box;
}

/* 是正2 */
.recruit-page--v2 .recruit-numbered-card,
.recruit-page--v2 .recruit-icon-item,
.recruit-page--v2 .recruit-deflist-row {
	flex-direction: row;
}
/* 番号カードは段2.5の等高化ルール（クラス4つ）に負けるので、クラス5つで打ち返す。
 * 等高化（カードの高さが揃う）は残したいため、段2.5マーカー側は触らない。 */
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-numbered-card.has-card-bg-background-color {
	flex-direction: row;
	align-items: flex-start;
}
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-numbered-card > .recruit-num,
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-numbered-card > .recruit-num-body {
	margin: 0;
	max-width: none;
}
.recruit-page--v2 .recruit-deflist-row > p {
	margin: 0;
}
/* 定義リストは狭い幅では縦積みに戻す（上の row 指定を打ち返す） */
@media screen and (max-width: 600px) {
	.recruit-page--v2 .recruit-deflist-row {
		flex-direction: column;
	}
}
/* ===== 2026-09-02 採用4ページ 共通部品（実測後の是正） ここまで ===== */

/* ===== 2026-09-02 採用4ページ 実測後の是正 その2 ここから =====
 * （1枚目「会社を知る」のレビューで見つかった3件。
 *   マーカーの外に置いてしまっていたのを 2026-09-02 の点検指摘で囲い直した）
 *
 * 是正3：白カードの中の小見出しが読めない
 *   「なりたくない会社像」に地色用の .recruit-section-label（#eef1f8）を流用していたため、
 *   白カードの上で判読不能になっていた（岡田さんが何度も指摘している「白文字が見えない」型）。
 *   → カード内専用のクラスを用意する。本文側も .recruit-card-label に変更済み。
 * 是正4：アイコン付き箇条の文字が中央寄せになる
 *   実測：.recruit-icon-item の中の段落が中央寄せで、アイコンとの間が大きく開いていた。
 *   モックは左寄せなので明示する。 */
.recruit-card-label {
	margin: var(--gasp-sp-24) 0 var(--gasp-sp-8);
	font-size: var(--gasp-fs-14);
	color: #6b6b6b;
}
.recruit-icon-item {
	text-align: left;
}
.recruit-icon-item p {
	flex: 1 1 auto;
	text-align: left;
}
/* 是正5：番号の丸の文字が薄い青地に対して 4.32:1 で AA（4.5:1）にわずかに届かない。
 * 16px/700 は WCAG の「大きい文字」（太字18.66px以上）に当たらないので通常基準が要る。
 * アクセント青を少し落として基準を満たす。丸の地色（アクセント10%＋白）は変えない。 */
.recruit-numbered-card .recruit-num {
	color: #1b58c4;
}
/* 戻し方＝「実測後の是正 その2 ここから」〜「ここまで」の間を削除する。 */
/* ===== 2026-09-02 採用4ページ 実測後の是正 その2 ここまで ===== */

/* ===== 2026-09-02 採用4ページ 2枚目（仕事を知る）で追加した部品 ここから =====
 * モック RecruitWork.tsx 準拠。1枚目（会社を知る）で作った型に次を足す。
 *   .recruit-icon-box   … アイコンを薄青の角丸に載せる箱（職種カード・共通テンプレ・強みで共用）
 *   .recruit-job-card   … 職種カード（アイコン＋見出し＋アクセント色の一行＋説明＋リンク）
 *   .recruit-step-card  … 仕事の進め方の4ステップ（丸番号＋語＋短い説明・中央寄せ）
 *   .recruit-icon-card  … アイコン＋見出し＋説明を横並びにする小カード
 * アイコンは1枚目と同じ方式（本文にSVGを埋めず、CSSのmaskで描く）。
 * 色は #1b58c4（1枚目の番号と同じ。薄青地でAAを満たす値として実測で決めた）。 */

.recruit-icon-box {
	width: 48px;
	height: 48px;
	border-radius: var(--gasp-r-12);
	background: color-mix(in srgb, var(--recruit-accent) 10%, #fff);
	margin: 0 0 var(--gasp-sp-16);
	position: relative;
}
.recruit-icon-box::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	background-color: #1b58c4;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.recruit-icon-box--sm {
	width: 34px;
	height: 34px;
	border-radius: var(--gasp-r-8);
	margin: 0;
	flex: 0 0 auto;
}
.recruit-icon-box--sm::before {
	width: 18px;
	height: 18px;
}

/* lucide アイコン（mask-image の data URI） */
.recruit-icon-box--message::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3C/svg%3E");
}
.recruit-icon-box--monitor::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cline x1='8' x2='16' y1='21' y2='21'/%3E%3Cline x1='12' x2='12' y1='17' y2='21'/%3E%3C/svg%3E");
}
.recruit-icon-box--file::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}
.recruit-icon-box--users::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
}
.recruit-icon-box--target::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}
.recruit-icon-box--bulb::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}
.recruit-icon-box--trend::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpolyline points='16 7 22 7 22 13'/%3E%3C/svg%3E");
}

/* 職種カード */
.recruit-job-card h4.wp-block-heading {
	margin: 0 0 var(--gasp-sp-8);
	font-size: var(--gasp-fs-20);
}
.recruit-job-sub {
	margin: 0 0 var(--gasp-sp-12);
	color: #1b58c4;
	font-size: var(--gasp-fs-14);
	font-weight: 500;
}
.recruit-job-card p {
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}

/* 仕事の進め方の4ステップ */
.recruit-step-card {
	text-align: center;
}
.recruit-step-card .recruit-step-num {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--gasp-sp-12);
	border-radius: 50%;
	background: #1b58c4;
	color: #fff;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}
/* 2026-09-02：中身が「1」ではなく「STEP 1」のように長いときの形。
 * 40pxの丸のままだと文字が入りきらず、「STEP」だけ見えて番号が切れる（実測）。
 * 職種ページの採用プロセス図が同じ用途で **min-width:72px の角丸ピル** を使っているので、
 * それに合わせる。既存の丸（番号1文字）には影響しない別クラス。 */
.recruit-step-card .recruit-step-num--wide {
	width: auto;
	min-width: 84px;
	max-width: max-content;
	height: 32px;
	padding: 0 var(--gasp-sp-16);
	border-radius: var(--gasp-r-pill);
	line-height: 32px;
	font-size: var(--gasp-fs-14);
	letter-spacing: .06em;
}

.recruit-step-card .recruit-step-name {
	margin: 0 0 var(--gasp-sp-4);
	font-weight: 700;
}
.recruit-step-card .recruit-step-desc {
	margin: 0;
	font-size: var(--gasp-fs-14);
	color: #6b6b6b;
}

/* アイコン＋見出し＋説明の横並び小カード */
.recruit-icon-card {
	display: flex;
	align-items: flex-start;
	gap: var(--gasp-sp-16);
}
.recruit-icon-card .recruit-icon-card-body h4.wp-block-heading {
	margin: 0 0 var(--gasp-sp-4);
	font-size: var(--gasp-fs-16);
}
.recruit-icon-card .recruit-icon-card-body p {
	margin: 0;
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-loose);
}
/* 段2.5の等高化ルール（クラス4つぶんの詳細度）に負けるため、
 * 1枚目の番号カードと同じ形で打ち返す（等高化そのものは残す）。 */
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-icon-card.has-card-bg-background-color {
	flex-direction: row;
	align-items: flex-start;
}
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-icon-card > .recruit-icon-box,
.recruit-card-grid > .wp-block-column > .wp-block-group.recruit-icon-card > .recruit-icon-card-body {
	margin: 0;
	max-width: none;
}
/* ===== 2026-09-02 採用4ページ 2枚目（仕事を知る）で追加した部品 ここまで ===== */

/* ===== 2026-09-02 採用4ページ 是正まとめ ここから =====
 * 1枚目・2枚目を実装して画面で測った結果の是正を、ここに1ブロックでまとめる。
 * （当初いくつかをマーカーの外に書いてしまい、他のブロックと書式が揃っていなかった。
 *   2026-09-02 点検指摘。以降の是正はこのブロック内に追記する）
 *
 * 是正6：カラム見出しが地色の上で読めない
 *   実測（仕事を知る／1280px）：「小さな組織だからこそ」「キャリアパス例」の h4 が
 *   既定の見出し色 #29294b のまま朱ピンク地（#b53a49）に乗り **2.42:1**。
 *   これらはカードの外＝地色の上に置く見出しなので、節見出しと同じ白系にする。
 *   （カード内の h4 は白カードの上なので対象外＝クラスを分けている）
 *
 * 戻し方＝このブロックを削除する。 */
.recruit-col-heading {
	color: #fff;
	margin: 0 0 var(--gasp-sp-16);
	font-size: var(--gasp-fs-20);
}
/* ===== 2026-09-02 採用4ページ 是正まとめ ここまで ===== */

/* ===== 2026-09-02 採用4ページ 3枚目（人を知る）で追加した部品 ここから =====
 * モック RecruitMember.tsx 準拠。インタビューカード用の部品を足す。
 *   .recruit-role-badge … 職種バッジ（薄青地の小さいラベル）＋その右の氏名表記
 *   .recruit-quote      … 引用ボックス（薄い面＋引用符アイコン＋イタリック）
 *   .recruit-tags       … タグの並び
 *   .recruit-tag        … タグ1つ（小・角丸・薄いグレー地）
 * アイコンは1枚目・2枚目と同じ方式（本文にSVGを埋めずCSSのmaskで描く）。 */

.recruit-role-line {
	display: flex;
	align-items: center;
	gap: var(--gasp-sp-8);
	margin: 0 0 var(--gasp-sp-12);
}
.recruit-role-badge {
	display: inline-block;
	margin: 0;
	padding: var(--gasp-sp-4) var(--gasp-sp-12);
	border-radius: var(--gasp-r-8);
	background: color-mix(in srgb, var(--recruit-accent) 10%, #fff);
	color: #1b58c4;
	font-size: var(--gasp-fs-12);
	font-weight: 500;
}
.recruit-role-person {
	margin: 0;
	font-size: var(--gasp-fs-12);
	color: #6b6b6b;
}

.recruit-quote {
	margin: var(--gasp-sp-16) 0;
	padding: var(--gasp-sp-16);
	border-radius: var(--gasp-r-12);
	background: #f3f4f8;
	position: relative;
}
.recruit-quote::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	margin: 0 0 var(--gasp-sp-8);
	background-color: #1b58c4;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}
.recruit-quote p {
	margin: 0;
	font-size: var(--gasp-fs-14);
	font-style: italic;
	line-height: var(--gasp-lh-loose);
}

.recruit-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gasp-sp-8);
	margin: 0 0 var(--gasp-sp-16);
}
.recruit-tag {
	margin: 0;
	padding: var(--gasp-sp-4) var(--gasp-sp-12);
	border-radius: var(--gasp-r-8);
	background: #f0f0f3;
	color: #4a4a4a;
	font-size: var(--gasp-fs-12);
}

.recruit-interview-card h4.wp-block-heading {
	margin: 0 0 var(--gasp-sp-8);
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-normal);
}
.recruit-interview-card .recruit-interview-lead {
	margin: 0;
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-loose);
	color: #6b6b6b;
}

/* 節見出しの左に置くアイコン（営業／エンジニア／取締役の各インタビュー節） */
.recruit-icon-box--briefcase::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='7' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
.recruit-icon-box--code::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E");
}
.recruit-icon-box--usercheck::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpolyline points='16 11 18 13 22 9'/%3E%3C/svg%3E");
}
.recruit-icon-box--refresh::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
}
/* ===== 2026-09-02 採用4ページ 3枚目（人を知る）で追加した部品 ここまで ===== */

/* ===== 2026-09-02 採用4ページ 4枚目（働き方・制度）で追加した部品 ここから =====
 * モック RecruitCulture.tsx 準拠。
 *   .recruit-list-card  … 1行だけの白カード（働き方・スキルアップの箇条書き）
 *   .recruit-stat-tile  … 数値タイル（薄青地・中央寄せ・ラベル／値／注記）
 *   アイコン laptop / book / chart を追加
 *
 * 是正7：節見出しのアイコンが中央に浮く
 *   実測（人を知る／1382px）：.recruit-section-head の中に置いたアイコン箱が
 *   constrained レイアウトの auto マージンで中央寄せになっていた。
 *   モックはラベルの左に並ぶ形なので、左寄せに戻す。 */

.recruit-section-head .recruit-icon-box {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: var(--gasp-sp-12);
}

/* 1行だけの白カード */
.recruit-list-card p {
	margin: 0;
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}

/* 数値タイル（2026-10-02 中央→左寄せ。岡田さん「全部左寄せにしよう。」。このクラスを使うのは 3786 だけ＝ローカルDBで確認） */
.recruit-stat-tile {
	text-align: left;
}
/* 2026-10-02 3786 の白いカードを全部左寄せに（岡田さん「全部左寄せにしよう。」）。
   列の中のカードは等高化（下の `.recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color`＝flex の縦並び）と
   WP の constrained レイアウト（子に margin-left/right:auto !important）が重なり、中身が文字の幅に縮んでカードの真ん中に置かれていた
   （text-align を left にしても見た目は真ん中のまま＝1366×768 で実測：スキルアップ・データで見る職場の8枚）。
   子の左右の auto を外して幅いっぱいに戻す。WP 側が !important なので !important が要る。他のページのカード列は変えない（3786 に限定） */
body.page-id-3786 .recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
body.page-id-3786 p.recruit-draft-note {
	text-align: left;
}
/* 2026-10-02 3786「データで見る職場」と「コミュニケーション」を一列に（岡田さん「この二つは一列に表示で。後者は太字に。」）。
   「一列」＝カードの中身を1行に並べる、と読んだ（リードの判断。4枚はもともと縦に1列なので、カード同士の並びの話ではないと判断）。
   ・数値タイル：項目名｜値｜注記を横並び（文字の下端で揃える）。カードの幅が足りなければ折り返す
   ・コミュニケーション：2つの段落を続けて流す（段落を inline に）＋太字。カードの幅に収まらない窓（1366×768 でカード幅 522px）では折り返す
   値の上の 4px（recruit-scenes.css の .recruit-stat-value / .recruit-stat-note の margin-top）は横並びでは要らないので 0 */
body.page-id-3786 .recruit-card-grid > .wp-block-column > .wp-block-group.recruit-stat-tile {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--gasp-sp-24);
	row-gap: var(--gasp-sp-4);
}
body.page-id-3786 .recruit-stat-tile > p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
body.page-id-3786 .recruit-panel > .has-card-bg-background-color:not(.recruit-list-card) > p {
	display: inline;
	font-weight: 700;
}
body.page-id-3786 .recruit-panel > .has-card-bg-background-color:not(.recruit-list-card) > p + p {
	margin-left: 1em !important;
}
.recruit-stat-tile .recruit-stat-label {
	margin: 0;
	font-size: var(--gasp-fs-14);
	color: #6b6b6b;
}
.recruit-stat-tile .recruit-stat-value {
	margin: var(--gasp-sp-4) 0 0;
	font-size: var(--gasp-fs-20);
	font-weight: 700;
	line-height: var(--gasp-lh-normal);
}
.recruit-stat-tile .recruit-stat-note {
	margin: var(--gasp-sp-4) 0 0;
	font-size: var(--gasp-fs-12);
	color: #6b6b6b;
}

.recruit-icon-box--laptop::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9m16 0H4m16 0 1.28 2.55a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45L4 16'/%3E%3C/svg%3E");
}
.recruit-icon-box--book::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}
.recruit-icon-box--chart::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='20' y2='10'/%3E%3Cline x1='18' x2='18' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='16'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='12' y1='20' y2='10'/%3E%3Cline x1='18' x2='18' y1='20' y2='4'/%3E%3Cline x1='6' x2='6' y1='20' y2='16'/%3E%3C/svg%3E");
}
/* ===== 2026-09-02 採用4ページ 4枚目（働き方・制度）で追加した部品 ここまで ===== */

/* ===== 2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ） ここから =====
 * 是正8：幅を持たせた要素が勝手に中央寄せになる
 *
 * 実測（CSSOMを走査して当たっているルールを列挙）：
 *   WordPress本体がインラインで出しているレイアウトCSS
 *     .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
 *     { margin-left: auto !important; margin-right: auto !important; }
 *   が効いており、**!important 付きなので詳細度をいくら上げても勝てない**。
 *   その結果、max-width や width を持たせた子要素が全部中央に寄る：
 *     .recruit-hero-lead（max-width 720px）… 実測 margin 0 130px ＝中央。モックは左寄せ
 *     .recruit-timeline（max-width 720px）  … 同上
 *     .recruit-section-head の .recruit-icon-box（幅34/48px）… 実測 margin 0 473px ＝節見出しの上に浮く
 *
 * 対処：本体が !important で書いているので、こちらも !important で打ち返す。
 * 対象は「左寄せにしたい」と決めている3つだけに絞る（中央寄せが正しいもの
 * ＝ .recruit-step-num などには当てない）。
 * ブロック側から layout:constrained を外す手もあるが、4ページ分のスクリプトを
 * 書き換えることになるうえ、WPが後から付け直す可能性があるのでCSS側で閉じる。
 *
 * 戻し方＝このブロックを削除する。 */
.recruit-hero .recruit-hero-lead,
.recruit-section-head .recruit-hero-lead,
.recruit-timeline,
.recruit-section-head .recruit-icon-box {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* ===== 2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ） ここまで ===== */

/* ===== 2026-09-02 インタビュー4本で追加した部品 ここから =====
 * 対象＝95105 sales-a / 95106 sales-b / 95107 engineer-c / 95108 director-o。
 * 本文は update_interviews.php がモックから機械抽出したものを流し込んでいる。
 *
 * 追加するのは3つだけで、他はすでにある部品（.recruit-hero / .recruit-panel /
 * .recruit-quote / .recruit-tags / .recruit-timeline / .recruit-list-card）を使い回している。
 *
 * 戻し方＝このブロックを削除する。 */

/* 「← 人を知るに戻る」。地色（朱ピンク）の上に置くので、リンク色を明示しないと
 * 親テーマの濃い青のままで読めない（実測で判読不能だった）。 */
.recruit-hero .recruit-section-label a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.recruit-hero .recruit-section-label a:hover {
	color: #ffffff;
	text-decoration: none;
}

/* 「営業職｜営業A」の行。役職はバッジ、氏名はその横の文字。
 *
 * ■ セレクタを .recruit-role-line の中に限っている理由（2026-09-02 点検指摘で是正）
 * 最初は素の `.recruit-role-person` に書いていたが、**このクラスは既存の
 * 「人を知る」（3792）でも使われている**（update_page_3792_member.php 83-84行）。
 * 素で書くと後勝ちで 3792 の色・文字サイズ・余白まで変わってしまい、
 * **今回の対象ではない公開済みページの見た目を黙って変える**ことになっていた。
 *   3792 … 独立した段落として置く（既存の定義 1488行：margin 0 / 12px / #6b6b6b）
 *   今回 … .recruit-role-line の中にバッジと並べて置く
 * 構造が違うので、**今回の形だけに限定する。**
 *   3792 … <p class="recruit-role-person">営業A</p>（独立した段落）
 *   今回 … <p class="recruit-role-line"><span class="recruit-role-badge">…</span>
 *            <span class="recruit-role-person">営業A</span></p>
 * .recruit-role-line で絞るだけでは足りない（**3792 も .recruit-role-line を持っている**。
 * 実測で色と文字サイズがまだ変わっていた）ので、**span に限定**して完全に分ける。
 *
 * ■ 色を場所で変える理由
 * 白カードの上に置くことが多いので既定は濃い色。地色（朱ピンク）の上に置く
 * ヒーローのときだけ白にする。最初は無条件に #ffffff にしていて、
 * インタビュー一覧（95104）の白カードの中で**白on白＝1:1で完全に見えなくなっていた**（実測）。
 * 「地色の上だから白」という前提を、カードの中にも持ち込んでいたのが誤り。 */
span.recruit-role-person {
	margin-left: var(--gasp-sp-8);
	font-size: var(--gasp-fs-14);
	color: #4a4a4a;
}
.recruit-hero span.recruit-role-person {
	color: #ffffff;
}

/* 引用の出典（「— 面接での代表・上司の言葉」）。
 * 引用枠にすると引用が2つ並んでいるように見えるので、小さい行にして引用の直後へ置く。 */
.recruit-quote-cite {
	margin: -4px 0 var(--gasp-sp-24);
	font-size: var(--gasp-fs-14);
	color: #fbfbfb;
}

/* 本文の白カード。長い読み物なので、地色の上に白文字を延々と流さずカードに乗せる
 * （段4で決めた「見出しは地色の上・中身はカード」の型に合わせる）。 */
.recruit-body-card p {
	margin: 0 0 var(--gasp-sp-16);
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-loose);
}
.recruit-body-card p:last-child {
	margin-bottom: 0;
}
.recruit-body-card strong {
	font-weight: 700;
}
/* ===== 2026-09-02 インタビュー4本で追加した部品 ここまで ===== */

/* ===== 2026-09-02 職種4ページ（3802/3851/3853/3855）の是正 ここから =====
 * 対象＝IT法人営業・開発エンジニア・インフラエンジニア・営業事務。
 *
 * この4ページは**モックに寄せる書き換えをしていない**。理由＝
 * 現行の本文が実データで埋まっている（実際の業務例・9:00〜18:00の1日の流れ・
 * 中途入社社員の経歴・資格支援の実文言・募集要項・採用プロセスのフロー図）。
 * モック（RecruitWorkSales/Engineer.tsx）に置き換えると**①のデータを②で上書きする**ことになる。
 * 岡田さんがモック化を指示したのは「会社を知る／仕事を知る／人を知る／働き方・制度」の4ページで、
 * 職種ページは名指しされていない。よって**読みにくい所だけ直す**。
 *
 * 是正1：パンくずが地色の上で読めない
 *   実測（/recruit/work/sales/）：「RECRUIT ＞ 職種一覧 ＞ IT法人営業」の文字色は
 *   rgb(40,36,36)、地は朱ピンク rgb(181,58,73) で **2.68:1**（AAの4.5:1に届かない）。
 *   4ページ共通。区切りの「＞」も同じ。
 *   → 白に振り替える（採用側で青ティックを白にしたのと同じ考え方）。
 *     現在地（最後の項目・リンクでない）は少し落として区別する。
 *
 * 戻し方＝このブロックを削除する。 */

.recruit-page--v2 .breadcrumbs,
.recruit-page--v2 .breadcrumbs p {
	color: #fbfbfb;
}
.recruit-page--v2 .breadcrumbs a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.recruit-page--v2 .breadcrumbs a:hover {
	color: #ffffff;
	text-decoration: none;
}

/* 是正2：採用プロセス図の「STEP 1/2/3」が読めない
 *   実測：文字色 #3b82c4 が薄青地 #eaf4ff の上で **3.65:1**（AAの4.5:1に届かない）。
 *   この配色は**本文（post_content）の中の <style> に直書き**されていて、
 *   4ページとも同じものが入っている。
 *
 *   本文を書き換えず、CSSで上書きする理由＝本文側の <style> は body 内にあるので
 *   同じ詳細度なら**後に出てくる本文側が勝つ**。よってクラスを1つ足して詳細度で上回る
 *   （.recruit-page--v2 .blogsy-flow ＝ 0,2,0 対 .blogsy-flow ＝ 0,1,0）。
 *
 *   色は #3b82c4 → **#2a6ba8**。薄青地で 5.01:1、白地の矢印で 5.57:1。
 *   変数1つの差し替えなので、STEPの文字も矢印も同時に濃くなる（どちらも基準を満たす）。
 *   元の色味からの振れを最小にする値を選んだ（もっと濃い候補もあるが見た目が変わりすぎる）。 */
.recruit-page--v2 .blogsy-flow {
	--flow-accent: #2a6ba8;
}

/* 是正3：地色の上に置いたアウトライン型ボタンが読めない
 *   実測（/recruit/entry/ ほか）：文字色 rgb(40,36,36)・枠も同色で、地の朱ピンクに対して
 *   **2.68:1**（AAの4.5:1に届かない）。エントリー／代表メッセージ／採用ニュース／
 *   インタビュー一覧の4ページで、2つ目のボタンが該当した。
 *   → 地色の上では白の文字と枠にする。1つ目（塗りボタン）は既存のままで基準を満たしている。
 *   カードの中に置いたアウトラインボタンには当てない（そちらは白地なので今のままでよい）。 */
.recruit-page--v2 .recruit-panel > .wp-block-buttons .is-style-outline .wp-block-button__link,
.recruit-page--v2 .recruit-hero .is-style-outline .wp-block-button__link {
	color: #ffffff;
	border-color: #ffffff;
}
.recruit-page--v2 .recruit-panel > .wp-block-buttons .is-style-outline .wp-block-button__link:hover,
.recruit-page--v2 .recruit-hero .is-style-outline .wp-block-button__link:hover {
	color: var(--recruit-ground);
	background-color: #ffffff;
	border-color: #ffffff;
}
/* 2026-10-07 タンさん指摘 K11（下線のみ。記号は保留）：採用トップ末尾 CTA の「カジュアル面談」に下線が出る。
 *   出所（computed style の規則走査）＝親テーマ style.min.css の a:focus{text-decoration:underline}。
 *   通常時と :hover は none で、クリック／タップでフォーカスが残った状態で出る。CTA のボタン内リンクだけ :focus の下線を消す。
 *   キーボード操作の目印は :focus-visible の枠が別にあるので消さない。
 *   戻し方：この規則を削除。 */
.recruit-page--v2 .recruit-cta .wp-block-button__link:focus {
	text-decoration: none;
}
/* ===== 2026-09-02 職種4ページ（3802/3851/3853/3855）の是正 ここまで ===== */

/* ===== 2026-09-02 岡田さんの追加指摘（4件） ここから ===== */

/* [1] 幅をコーポレートに合わせる（追い込み）
 * 上の「是正1」で .recruit-hero/.recruit-panel は 1281px（内容幅1241px）にしたが、
 * 段3の「幅合わせ」ブロック（628-633行）が .recruit-panel と .recruit-cta を
 * **max-width: 980px** に絞っていて、CTA だけ狭いまま残っていた。
 * ここで両方をコーポレートと同じ 1281px に揃える（左右padding 20px は是正1側で入っている）。 */
.recruit-panel,
.recruit-cta {
	max-width: 1281px;
}

/* [1-b] CTAの箱（cover）だけ両サイトで位置が違っていた
 * 岡田さん指摘「微妙に両サイトで各コンテンツの位置が違う」（2026-09-02・フッター周りの比較画像）
 *
 * 実測（1366px幅・スクロールバーを除いた可視幅1351px）：
 *   コーポレート … .wp-block-cover 左55 / 幅1241（＝内容領域の中に収まっている）
 *   採用（変更前）… .wp-block-cover 左35 / 幅1281（＝**20px外側に張り出していた**）
 * 原因＝`.recruit-cta` には左右の padding が無く、cover が枠いっぱいに広がっていたため。
 * `.recruit-panel` は padding 20px を持っているので中身が 1241px に収まっていた。
 * → CTA にも同じ 20px を入れて、cover の幅を 1241px にそろえる。 */
/* .recruit-cta に padding を入れる方法は**効かなかった**（CSSOMにはルールが載るのに
 * 計算値が 0px のまま＝別のルールに潰される）。cover の幅を直接そろえるほうが確実。 */
.recruit-page--v2 .recruit-cta > .wp-block-cover {
	max-width: 1241px;
	margin-left: auto;
	margin-right: auto;
}

/* 2026-10-08 原野さん指摘 H4（「エントリー、お問い合わせへの部分が、フッターと背景が被っていたりして目立たないと思った。
 * また、文言とボタンが離れすぎていて気になった。」）。岡田さん「H1とH4も対応して」。
 * 実測（1366）：ページ末尾の帯（本文の .recruit-cta の cover。覆いは黒の dim70）がフッター #081c28 とほぼ同じ濃紺でつながり、
 * 文言（flex-grow で伸びる列）とボタン（右端）の間が 500px 以上あいていた。対象は cover の帯を持つ5ページ（37・3693・3772・3786・3792）。
 * 設計役の推奨どおり CSS だけで（本文 DB は不変）：①覆いを採用の地色 #195d84 の不透明に（白文字 7.14:1）②文言とボタンを中央に寄せ、間を 40px に。
 * 舞台ページの全幅の帯（recruit-scenes.css 5節）にも同じセレクタで効く。
 * 戻し方：この2規則を削除。 */
.recruit-page--v2 .recruit-cta > .wp-block-cover > .wp-block-cover__background {
	background-color: #195d84 !important;
	opacity: 1 !important;
}
.recruit-page--v2 .recruit-cta > .wp-block-cover > .wp-block-cover__inner-container > .wp-block-group.is-layout-flex {
	justify-content: center;
	gap: 40px;
}
.recruit-page--v2 .recruit-cta > .wp-block-cover > .wp-block-cover__inner-container > .wp-block-group.is-layout-flex > * {
	flex-grow: 0 !important;
}
/* 文言が長くボタンが下に回るページ（人を知る 3792＝1366 で文言の列 1243px）で、左寄せの文言と中央のボタンが揃わなかったので、文言も中央に */
.recruit-page--v2 .recruit-cta > .wp-block-cover > .wp-block-cover__inner-container > .wp-block-group.is-layout-flex > .wp-block-group :is(h2, h3, h4, p) {
	text-align: center;
}

/* [2] 最下部のコンテンツがフッターに食い込む
 * 岡田さん指摘「フッターに引っ付いちゃってる」（2026-09-02）。
 *
 * 実測：4ページ（会社を知る／仕事を知る／人を知る／働き方・制度）で、
 * 最後の要素 .recruit-cta の下端がフッターの上端より **100px下**にあった
 * （＝重なっている）。CTAは cover ブロックで、下方向のマージンを持っていない。
 * 採用トップ（37）だけは末尾にスペーサーがあるので20px空いていた。
 *
 * → 本文の器（.recruit-main）に下余白を入れる。ページごとに末尾の要素が違っても
 *   確実に効くので、CTA側にマージンを足すより安全。
 *   80px はコーポレート側の節間（5vh 相当≒40px）の2倍で、フッターとの境目が分かる量。 */
.recruit-page--v2 .recruit-main {
	padding-bottom: var(--gasp-sp-96);
}

/* [3] アイコンを全部やめる
 * 岡田さん指示「アイコンは全部とっていい。なくしちゃっていい。」（2026-09-02）。
 *
 * 対象＝`.recruit-icon-box`（薄青の角丸にlucideアイコンを載せた箱）。
 * 実測の設置数：仕事を知る16／人を知る5／働き方・制度4／会社を知る0。
 *
 * **本文（post_content）は書き換えず、CSSで消す。**
 *   - 本文側はブロックが残るので、戻したいときはこの1ルールを消すだけでよい
 *   - 6本のスクリプトを書き換えて再実行するより副作用が小さい
 * 箱が消えたぶんの余白は、隣接する見出し側で詰める。
 *
 * `.recruit-icon-item` の行頭に出していたアイコン（シールド・チェック等・24×24のmask）も
 * 「全部」に含めて消す。行の区切りは白カードそのもので付いているので、
 * 印が無くても項目は区別できる（消したぶんの左余白も戻す）。 */
.recruit-icon-box {
	display: none !important;
}
.recruit-icon-item::before,
.recruit-icon-card::before {
	display: none !important;
}
.recruit-icon-item {
	gap: 0;
}
/* アイコン箱の直後に来ていたラベルの上余白を戻す（箱の margin-bottom 10px 相当） */
.recruit-section-head .recruit-icon-box + .recruit-section-label {
	margin-top: 0;
}


/* [4] パネルを広げたのに、中のブロックが 980px のまま中央寄せで残っていた
 *
 * 実測（/recruit/about/・1382px幅）：
 *   .recruit-panel        left 43 / 幅1281（padding 20）→ 内容の左端は 63
 *   .recruit-section-head left 193 / 幅980（max-width 980px）  ← **130pxずれる**
 *   .recruit-timeline     left 63 / 幅720
 * ＝「沿革」の見出しだけ内側に入り、明細は左端に付く形になっていた。
 *
 * 原因は WordPress のレイアウト変数 `--wp--style--global--content-size` が **980px** のまま
 * だったこと。`is-layout-constrained` のブロックはこの値で幅を決めて中央寄せする。
 * .recruit-panel の max-width だけ広げても、中のブロックは980pxで止まる。
 *
 * → 採用ページの中だけこの変数をパネルの内容幅（1241px）にする。
 *   ブロック個別の max-width を書き換えるより副作用が小さく、
 *   これから足すブロックにも自動で効く。
 *   .recruit-timeline のように**意図して狭くしている**もの（読みやすさのため720px）は
 *   自前の max-width を持っているのでこの変更の影響を受けない。
 *
 * 戻し方＝この1ルールを消す。 */
.recruit-page--v2 {
	--wp--style--global--content-size: 1241px;
}

/* ===== 2026-09-02 岡田さんの追加指摘（4件） ここまで ===== */

/* ===== 2026-09-02 採用ページの帯をスクロール中も残す ＝ 2026-09-06 撤去 =====
 *
 * 岡田さん指示（2026-09-06）「スクロールをしたときに引っ付くのはやめたい。」
 * ＝ 2026-09-02 に入れた `position: sticky`（帯をヘッダー直下に貼り付ける）を**撤去した**。
 * コーポレート側（`corp-color.css` の同名節）も同時に撤去している（岡田さん回答「両方」）。
 *
 * ■ 何を消したか（**戻すためではなく、何が無くなったかを追える**ようにするための記録。
 *   撤去は岡田さんの指示なので、復活させる前提では書いていない）
 *   ・帯（`.recruit-page--v2 .recruit-main > .recruit-hero`）の
 *     `position: sticky` / `top` / `z-index: 2` / `background` / `box-shadow: 0 0 0 40px`
 *   ・帯の直下に置いていた**56px の目隠しパネル**（`::after`）とその左右への影2本
 *   ・後続コンテンツを帯の裏に通す `~ * { position: relative; z-index: 1 }`
 *   ・`prefers-reduced-motion` で `static` に戻す解除ルール
 *
 * ■ 撤去しても画面の余白は変わらない（実測・2026-09-06）
 *   目隠しパネル 56px と `box-shadow` の spread 40px は、どちらも `--recruit-ground`＝
 *   `.recruit-page` の地色と**同じ1色**なので、静止時には元から見えていない。
 *   帯の下に見えている余白の正体は `.recruit-panel` の `margin-top`（基本ルール `margin: 56px auto`）で、これは別物。
 *
 * ■ 残す実測値（このブロックで測ったもの。他の指定がこの値に依存している）
 *   ヘッダーの高さ … 幅1382px **96px** ／ 768〜1024px **116px** ／ 375px **173px**
 *   帯の高さ       … 幅1382px 212 / 265 / 308 / 315 / 321px（最大321）
 *                    幅375px  234 / 471 / 502 / 524px（最大524）
 *   帯を持つのは **12ページ**（3693 / 3772 / 3786 / 3792 / 95101〜95108）。
 *   37（採用トップ）は `.eye-catch-contents`、3788 / 3802 / 3851 / 3853 / 3855 は帯が無い。
 *   ★**この一覧は 2026-09-06 時点のもので、いまと食い違う。対象ページの根拠に使わないこと。**
 *     2026-09-17 に全ページを実測したところ**帯を持つのは15ページ**で、
 *     ここで「帯が無い」と書いている **3788 / 3802 / 3851 にも帯がある**
 *     （3853 / 3855 は旧デザインのままで、これは今も帯が無い）。
 *     **「コーポレートに揃える」の対象ページの正は `functions.php` の
 *     `gasp_recruit_corp_aligned_ids()` の配列**（2026-09-17〜）。CSS側の表は記録であって指定ではない。
 *
 * ■ この撤去と対で直したもの（消し忘れると壊れる側）
 *   3792（人を知る）の `.recruit-hero-media` は、**sticky が作る包含ブロックに乗っていた**。
 *   sticky を消すと基準を失ってビューポート大に広がるため、
 *   同ファイルの「2026-09-04 人を知るの見出し帯に動画」ブロックで
 *   `body.page-id-3792 … .recruit-hero { position: relative }` を**無条件のルールに変えてある**。
 */

/* ===== 2026-09-03 採用トップのアイキャッチを高くする ここから =====
 *
 * 岡田さん「動画をだいぶ引いた画角にしてほしい」（2026-09-03）。
 *
 * ■ なぜ高さを触るのか（横だけでは引けないため）
 *   素材は縦向きの 1080x1920 で、左端 x=0〜50 に他社（信金中央金庫）の看板がある。
 *   使えるのは x=100〜1080 ＝ **幅980pxが横方向の上限**。いまが900pxなので、
 *   横に広げても**9%しか変わらない**（「だいぶ」にならない）。
 *   枠を高くすると**縦に見える範囲**が増える：287px → 439px、映る面積で約1.7倍。
 *
 * ■ 変えたもの
 *   WordPress 標準の cover は `min-height: 430px`。採用トップ（37）のアイキャッチだけ 600px にする。
 *   動画も同じ比（1366:600 ＝ 2.277）で作り直してある（`tools/make_recruit_eyecatch.sh`）。
 *   **枠の比と動画の比は必ず揃える**（ずれると `object-fit: cover` が勝手に切り落とす）。
 *
 * ■ 768px 未満は 430px のまま
 *   スマホで 600px にすると、最初の画面がアイキャッチだけで埋まってしまうため。
 *
 * ■ 他のページには効かない
 *   `.recruit-page--v2 .recruit-main >` で始めているので、対象は**採用トップの1枠だけ**。
 *   コーポレート側の投稿の帯（`.single-content-inner > .eye-catch-contents`）とは別のセレクタ。
 *
 * ■ 2026-09-04 追記：素材が横向きに撮り直された（岡田さん）。**このCSSは変えていない。**
 *   上の「横はもう引けない（縦素材で幅980px上限）」は**旧素材の話で、いまは当てはまらない**
 *   （新素材は 1920x1080 の横向きで、帯には約1856px幅が入る）。
 *   それでも 600px のままにしているのは、**この高さで作った他の要素（3行の帯・スクロール時の見え方）を
 *   動かさないため**。比 2.2776 は変わっていないので `object-fit: cover` の切り落としも起きない。
 *   高さを変えるなら `tools/make_recruit_eyecatch.sh` の `OW`/`OH`/`ASPECT` と必ずセットで。
 *
 * ■ 戻し方
 *   このブロックを消す（＝標準の430pxに戻る）。そのときは動画も
 *   `make_recruit_eyecatch.sh` の `OH`/`ASPECT` を 408 / 3.1397 に戻して作り直すこと。
 */
@media (min-width: 768px) {
	.recruit-page--v2 .recruit-main > .eye-catch-contents .wp-block-cover {
		min-height: 600px;
	}
}
/* ===== 2026-09-03 採用トップのアイキャッチを高くする ここまで ===== */

/* ===== 2026-09-03 採用トップにも3行を載せる（2026-09-04に1行へ／動画の上へ） ここから =====
 *
 * 岡田さん指示（2026-09-03）「これ（コーポレートのヒーロー下のCTA・バッジ・タブ）を採用サイトにもつけてほしい」
 * ＋ 回答：中身は採用向けに入れ替える／**アイコンは付けない**
 *
 * ■ 2026-09-04 の変更（岡田さん指示）
 *   「ここはエントリーとカジュアル面談だけでいい。でもうちょっと上に移動して、
 *     現場で〜の行から一行開けて配置ぐらいに。動画にかぶせちゃってよい。」
 *   ・**2行目（バッジ）と3行目（タブ）を廃止**したので、その規則もこのブロックから消した
 *     （何を消したかは `functions.php` の同名ブロックに書いてある。戻すときは両方戻す）
 *   ・**置き場所が「アイキャッチ帯の下」から「アイキャッチの中＝動画の上」に変わった。**
 *     差し込みは `functions.php` 側（本文の目印の位置）。CSSは間隔だけを持つ。
 *
 * ■ コーポレート版（`hero-actions.css`）を読み込まない理由
 *   あちらは `.main_slider` の中に **position:absolute** で重ねる作りで、
 *   動画の明るさに上限が無い前提の「幕」も持っている。採用側は
 *   **cover の普通の縦並びの中に置くだけ**（絶対配置しない）ので、前提が違う。
 *   同じ見た目（丸いピル）を作り直している。
 *
 * ■ 配色（**動画の全609フレーム×ボタンの矩形の全画素**で実測。5点サンプリングでは足りない）
 *   主ボタン「エントリー」＝白地に #9e3040 の文字 … **7.12:1**（AAA）。
 *     地が不透明なので動画の明るさに左右されない。
 *   もう一方「カジュアル面談」＝**動画の上に直接**白文字（朱色60%の覆い越し）。
 *     覆いだけ（黒の幕なし）だと **最悪 3.11:1**（609フレーム全部が4.5:1を割る）。
 *     白いトラックや空が矩形に入るフレームがあるため。**15pxの太字はAAで4.5:1が要る**
 *     （大きい文字の3:1では通らない）。
 *     → **黒22%の幕を敷いて 最悪 4.82:1**（609フレーム中4.5:1を割るものは0）。
 *        実測：幕なし3.11 ／ 18%で4.44（18フレームが割れる）／ **22%で4.82** ／ 28%で5.49。
 *   **半透明の文字色は使わない**（弱めるのは地と幕だけ）。
 *   ※**動画を作り直したらこの実測をやり直すこと**（明るい画に変わると割れる）。
 *     測り方＝出力から `crop=316:44:538:361`（＝ボタンの矩形）を全フレーム取り出し、
 *     `0.4*動画 + 0.6*#9e3040` を合成してから、白との比を全画素で見る。
 *
 * ■ 戻し方
 *   このブロックを削除し、`functions.php` の同名ブロックも削除する。
 *   帯だけ止めるなら add_filter( 'gasp_recruit_hero_actions_enabled', '__return_false' );
 */
.gasp-recruit-actions {
	box-sizing: border-box;
	max-width: 1290px;
	/* リード文（行の高さ23.25px）から**1行ぶん空ける**＝岡田さんの「一行開けて配置ぐらい」。
	   cover の中に入ったので左右の padding は cover 側が持っている。 */
	margin: var(--gasp-sp-24) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--gasp-sp-16);
}
.gasp-recruit-ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--gasp-sp-12);
	margin: 0;
}

/* 応募導線のボタン
 *
 * **セレクタがクラス3つ（`.recruit-page .gasp-recruit-actions .gasp-recruit-cta`）なのは飾りではない**
 * （2026-09-04）。cover の中に入れた結果、**親テーマ**の
 *   `.wp-block-cover .wp-block-cover__inner-container a { color: inherit }`（`style.min.css`）
 * が効くようになった。あちらは **(0,2,1)**。**「エントリー」が白地に白文字になって消えた**
 * （実測。`color` が `inherit` ＝ 見出し群の白 #fbfbfb を継いでいた）。
 * クラス3つ＝**(0,3,0)** にすると勝つ。**`!important` は使わない。**
 * ※`.recruit-page` だけを足した (0,2,0) では**足りない**（1度作って外した）。
 */
.recruit-page .gasp-recruit-actions .gasp-recruit-cta {
	display: inline-flex;
	align-items: center;
	padding: var(--gasp-sp-12) var(--gasp-sp-24);
	border: 1.5px solid #fff;
	border-radius: var(--gasp-r-pill);
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-tight);
	font-weight: 700;
	color: #fff;
	/* 動画の明るいフレームでも白文字が読めるようにする幕（上の実測を参照）。
	   主ボタンは下で不透明な白に塗り替わるので、これが効くのは枠線だけのボタン。 */
	background-color: color-mix(in srgb, #000 22%, transparent);
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.recruit-page .gasp-recruit-actions .gasp-recruit-cta:hover,
.recruit-page .gasp-recruit-actions .gasp-recruit-cta:focus-visible {
	background-color: color-mix(in srgb, #000 38%, transparent); /* 幕を濃くする＝明るくしない */
	color: #fff;
}
.recruit-page .gasp-recruit-actions .gasp-recruit-cta--primary {
	background-color: #fff;
	color: var(--recruit-ground);
}
.recruit-page .gasp-recruit-actions .gasp-recruit-cta--primary:hover,
.recruit-page .gasp-recruit-actions .gasp-recruit-cta--primary:focus-visible {
	background-color: #fff;
	color: var(--recruit-ground);
	opacity: .88; /* 文字色は変えずに全体を少し落とす（半透明の文字色を作らないため） */
}

/* （2026-09-04 に `.gasp-recruit-badge`／`.gasp-recruit-tab` の規則を削除した。
    バッジ行とタブ行そのものを出さなくなったため。戻すときは functions.php と両方。） */

@media (max-width: 767px) {
	.gasp-recruit-actions {
		margin-top: var(--gasp-sp-24);
		gap: var(--gasp-sp-12);
	}
	.recruit-page .gasp-recruit-actions .gasp-recruit-cta {
		padding: var(--gasp-sp-12) var(--gasp-sp-16);
		font-size: var(--gasp-fs-14);
	}
}
/* ===== 2026-09-03 採用トップにも3行を載せる ここまで ===== */


/* ===== 2026-09-03 採用トップのカードの地を動画にする ここから =====
 *
 * 岡田さん指示（2026-09-03）
 *   「素材フォルダに 採用サイト_トップページ って名前の付いた動画を置いたから、該当するパネルに貼ってください。」
 *   → 最初は白いカードの上に16:9で置いたが、続けて
 *   「**動画は背景でお願いしたい。**パネルは大きくなっていい感じだけどね。」
 *   ＝**カードの地を動画にして、文字をその上に載せる。大きさは大きいまま。**
 *
 * ブロックの作り替えは `recruit_rebuild/update_p37_video_cards.php`（`--revert` で白いカードに戻る）。
 * 素材の書き出しは `tools/make_recruit_panel_videos.sh`。
 *
 * ■ 文字を白にする（半透明は使わない）
 *   元は白カード＋濃い文字だったので、そのままでは動画の上で読めない。
 *   カバーの中の文字を**不透明な白**に固定する。読みやすさは
 *   **紺 #141c3a 60%のオーバーレイ**（ブロック側で指定）で確保する。
 *
 *   **実測（5本×全フレーム＝計1,179コマ・文字が乗る中央帯の平均色の最悪値）**
 *     | 素材 | 50%のとき | **60%（採用）** |
 *     | プードル | **4.21:1（AA未達）** | **5.54:1** |
 *     | 眼鏡     | 5.39:1  | 6.81:1  |
 *     | 営業職   | 11.06:1 | 12.15:1 |
 *     | システム | 10.85:1 | 11.96:1 |
 *     | 滝       | 14.15:1 | 14.70:1 |
 *   → **60%にした理由＝50%ではプードルの最悪コマが4.21:1でAA（4.5:1）を割る。**
 *     最初は5点サンプリングで4.91:1と読んで50%にしたが、**点検の指摘で全フレームを
 *     測り直したら未達だった**。60%は採用トップのアイキャッチと同じ値で見た目も揃う。
 *   ※`hero-actions.css` の逆算表（紺は 4.5:1 に α≧0.61）は
 *     **背後が純白の場合**の値。ここは背後が実素材なので実測で決めている
 *     （純白の worst case を採ると α=0.7 が必要で、動画がほぼ見えなくなる）。
 *
 * ■ ボタン（職種カードの「詳しく見る →」）
 *   `is-style-outline` は文字色＝枠色なので、白にすれば枠も白になる。
 *
 * ■ 縦の位置
 *   カバーは中身を上下中央に置く。カードの高さを揃えるため
 *   `min-height` はブロック側（320px／職種は360px）で持たせている。
 *
 * ■ 戻し方
 *   1. `php recruit_rebuild/update_p37_video_cards.php --revert`（白いカードに戻る）
 *   2. このCSSブロックを削除する
 *   ※`recruit_rebuild/video_cards_37/*.txt`（元のカードの現物）と
 *     `uploads/2026/09/recruit_promise_*.mp4` / `recruit_job_*.mp4` は**残していい**
 *     （残っても表示には出ない。もう一度当てたくなったときに使う）。
 */
.recruit-video-card {
	overflow: hidden; /* 角丸から動画がはみ出さないように */
}
/* ★覆いの色と濃さは**ここで決める**（2026-09-03）
 *
 * ブロック側の `dimRatio` / `customOverlayColor` は**そのままでは効かない**。
 * 採用ページには上の「採用地色」ブロックに
 *   `.recruit-page .wp-block-cover__background.has-background-dim-60 { background-color: var(--recruit-ground) !important }`
 * があり、**紺の指定が朱色（#9e3040）に置き換わる**（アイキャッチもこの色で覆われている）。
 * さらに実測では濃さが 0.5 のままだった（`has-background-dim` の既定が残る）。
 *
 * **朱色のままでは文字が読めない。全フレーム実測（1,179コマ）：**
 *   | 覆い | プードル（最悪） | 眼鏡 | 営業職 | システム | 滝 |
 *   | 朱 #9e3040 50%（何もしないと これ） | **3.17:1** | 3.80 | 7.41 | 7.30 | 9.85 |
 *   | 朱 #9e3040 70%                     | 4.51:1 | 4.97 | 7.41 | 7.35 | 8.79 |
 *   | **フッター色 #361116 60%（採用）** | **5.78:1** | 6.98 | 12.37 | 12.22 | 15.11 |
 *
 * フッター色を選んだ理由＝**サイトと同じ赤の系統**でありながら十分に暗く、
 * 60%でも映像が見える。朱色を濃くする（70%）だと 4.51:1 でぎりぎりのうえ、
 * 映像がベールに沈んで「動画を背景に」の指示から遠のく。
 * 濃さは `!important` の効いた既定を上書きするため、ここで明示している。 */
.recruit-page .recruit-video-card > .wp-block-cover__background.has-background-dim-60 {
	background-color: var(--recruit-footer-ground) !important;
	opacity: 0.6;
}
.recruit-video-card .wp-block-cover__inner-container,
.recruit-video-card .wp-block-cover__inner-container h4,
.recruit-video-card .wp-block-cover__inner-container p {
	color: #fff;
}
.recruit-video-card .wp-block-button.is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}
.recruit-video-card .wp-block-button.is-style-outline .wp-block-button__link:hover,
.recruit-video-card .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, #fff 18%, transparent);
	color: #fff;
}
/* ===== 2026-09-03 採用トップのカードの地を動画にする ここまで ===== */



/* ===== 2026-09-03 会社を知るの見出し帯に写真 ここから =====
 *
 * 岡田さん指示（2026-09-03）
 *   「**会社を知るの文言と画像を重ねて欲しいのだが。。。コーポレートサイトと同様に。**」
 *
 * ■ コーポレート側と同じ作り
 *   コーポレートは見出し帯（`.single-page-title`）に
 *     `background-image: linear-gradient(<地色の半透明>, <地色の半透明>), url(写真)`
 *   を敷いて白文字を重ねている（`corp-color.css` の `body.page-id-103 / 104 / 106 / 97`）。
 *   採用側の帯は `.recruit-hero` なので、そこへ同じやり方で敷く。
 *
 * ■ これまでの経緯（同じ直しを繰り返さないための記録）
 *   最初は帯の**下に**画像ブロックを1枚置いた → 「大きすぎる」「レイヤーがおかしい」。
 *   独立したブロックだと、①高さが画面幅なりに伸びる ②全幅にすると固定された帯の左右から
 *   はみ出す、の2つが避けられない。**帯の背景にすると両方消える**（帯の大きさに従うため）。
 *   本文（post_content）にはもう画像ブロックを入れていない
 *   （`recruit_rebuild/update_p3693_about_eyecatch.php` はメディア登録とアイキャッチ設定だけ）。
 *
 * ■ 覆いの色＝**濃赤 #361116**（`--recruit-footer-ground`）。地色の朱色ではない。
 *   写真は夜景だが**光跡や街灯が明るく**、朱色では白文字が読めない。
 *   実測（文字が乗る左半分を48x21＝1,008セルに割り、いちばん明るいセルで計算）：
 *
 *   | 覆い | 40% | 45% | 50% | **55%（採用）** | 60% |
 *   |---|---|---|---|---|---|
 *   | 朱 #9e3040   | 2.81 | 3.04 | 3.29 | 3.57 | 3.87 |
 *   | 濃赤 #361116 | 3.62 | 4.10 | 4.65 | **5.31** | 6.07 |
 *
 *   → 朱色は60%でも 3.87:1 で **AA（4.5:1）に届かない**。濃赤55%を採用。
 *   採用トップのカード（動画背景）と同じ色なので、サイト内で揃う。
 *
 * ■ 高さ 300px
 *   帯の中身（About／会社を知る／リード文）が211pxなので、写真が見える余白を少しだけ足す。
 *   コーポレート側の帯は220px前後。**大きすぎない**（岡田さん「大きすぎる」の指摘を踏まえて
 *   828px→360px→300pxと下げてきた）。
 *
 * ■ 角を丸める（2026-09-03 岡田さん「これ角を丸くできるかな。コーポレートサイトと同じように。」）
 *   コーポレートの見出し帯（`.eye-catch-contents .wp-block-cover`）と同じ `var(--pt-soft-radius)`。
 *   **すき間を埋めている影も一緒に丸くなる**ので、境目は出ない
 *   （`box-shadow` の spread は `border-radius` に沿って広がる。sticky帯の実装で確認済み）。
 *   影の色は地色と同じなので、丸めた角からは地色が見えるだけ。
 *
 * ■ 戻し方
 *   このブロックを削除する（＝帯が元の地色一色（10/1 から青）に戻る）。
 *   アイキャッチ画像の設定も外すなら
 *   `php recruit_rebuild/update_p3693_about_eyecatch.php --revert`。
 */
body.page-id-3693 .recruit-main > .recruit-hero {
	min-height: 300px;
	/* **flex にしないこと。** `display:flex` にすると帯の中の見出しとラベルが
	 * 「幅なり」になり、テーマが持つ左右autoのマージンで**中央に寄ってしまう**
	 * （実測：見出しの margin-left が 515px になった）。上下の余白で位置を作る。
	 * ※2026-09-15 に方針が変わった（岡田さん「コーポレートサイトを正として、そろえてほしい」）。
	 *   **中央寄せが目的になったので、このページだけ flex にしている**（`align-items` は
	 *   既定のままにして上の現象は起こさない）。ファイル末尾の同日ブロックを参照。 */
	padding-top: var(--gasp-sp-96);
	padding-bottom: var(--gasp-sp-48);
	background-image:
		linear-gradient(rgba(8, 28, 40, 0.55), rgba(8, 28, 40, 0.66)),
		url(/wp-content/uploads/2026/09/recruit_about_eyecatch.jpg);
	background-size: cover;
	background-position: center 50%;
	background-repeat: no-repeat;
	border-radius: var(--pt-soft-radius);
}
@media (max-width: 767px) {
	body.page-id-3693 .recruit-main > .recruit-hero {
		min-height: 240px;
	}
}
/* ===== 2026-09-03 会社を知るの見出し帯に写真 ここまで ===== */

/* ===== 2026-09-04 帯とヘッダーの間を開ける＋代表メッセージの帯に写真 ここから =====
 *
 * ■ 岡田さん指示（2026-09-04）
 *   ①「ヘッダーとの間を少し開けて」（会社を知るの帯がヘッダーに接していた）
 *   ②「このアイキャッチは、コーポレートサイトの代表メッセージと同じものに。」
 *
 * ■ ①はページを選ばず `.recruit-hero` 全体に効かせる
 *   採用サイトの下層ページは**全部**、帯が `top=96px`＝ヘッダーの真下に接していた（実測）。
 *   地色と同じ帯（代表メッセージ等）では気づかないが、**写真や角丸が入ると接触が見える**。
 *   1ページだけ直すと、次に写真を入れたページでまた同じことになるので共通で開ける。
 *   `.recruit-main` 側ではなく帯に `margin-top` を置く理由＝帯を持たないページに影響させないため。
 *
 * ■ ②＝コーポレート 97「代表メッセージ」と**同じ写真・同じ組み方**
 *   向こうの作り（`corp-color.css` の `body.page-id-97 .single-page-title`）：
 *     ・写真 `gasp代表.jpg` を **`background-size: auto 100%` で右端に置く**（＝全身が入る「引いた」絵）
 *     ・左から右へ薄くなるグラデーションを重ね、**左側の地色の上に見出しを乗せる**
 *     ・写真の上には覆いを掛けない（岡田さん「松原さんの顔がよく見えるように」）
 *   ここでも同じ組み方にする。**違うのはグラデーションの色だけ**で、
 *   コーポレートの紺 `#141c3a` ではなく**採用の朱 `#9e3040`**を使う
 *   （9/1に決めた「コーポレート＝紺／採用＝朱」の色分けを崩さないため。※写真は同一）。
 *
 *   **こちらは見出しが長いので、文字が写真に掛からないよう右に余白を作る**（`padding-right`）。
 *   向こうの見出しは「代表メッセージ」の6文字だが、こちらは
 *   「『役に立つ』『話を聞く』その当たり前を、実装と運用で証明する」で**帯のほぼ全幅に伸びる**。
 *   グラデーションの止め位置だけで対処しようとしたが、実測で**最悪 2.2:1**（AA の 4.5:1 に遠い）。
 *   止め位置を 82% まで動かしても 2.7:1 までしか上がらない＝**この手では解けない**。
 *   → **文字の側を写真の手前で折り返させる**。帯 1281px に対し写真は 450px（高さ基準）で
 *     右端 x=831 から始まるので、右に 470px の余白を取れば文字は写真に届かない。
 *   結果、見出しは**朱色の地の上だけ**に乗る＝白文字とのコントラストは **7.12:1**（AAA）。
 *   グラデーションは写真の左端をなじませるためだけに使う（58%→80%）。
 *   **写真・見出し・帯の幅を変えたら測り直すこと**（写真の開始位置 x が動く）。
 *
 * ■ 高さ 300px（`min-height`）
 *   もとの帯は 212px。写真は高さ基準で置くので、低いと写真の幅が
 *   212×1.5＝318px しか取れず「顔だけ小さく右端」になる。
 *   300px にすると幅 450px ＝ 会社を知るの帯（3693）と同じ高さでもあり、サイト内で揃う。
 *
 * ■ 戻し方
 *   このブロックを削除する（①の余白も②の写真も消えて、9/3 の状態に戻る）。
 */
.recruit-page--v2 .recruit-main > .recruit-hero {
	margin-top: var(--gasp-sp-24);
}
@media (max-width: 767px) {
	.recruit-page--v2 .recruit-main > .recruit-hero {
		margin-top: var(--gasp-sp-16);
	}
}

body.page-id-95101 .recruit-main > .recruit-hero {
	min-height: 300px;
	background-image:
		linear-gradient(to right, rgba(25, 93, 132, 1) 58%, rgba(25, 93, 132, 0) 80%),
		url(/wp-content/uploads/2026/08/gasp代表.jpg);
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
	border-radius: var(--pt-soft-radius);
}
@media (min-width: 1025px) {
	/* 文字を写真の手前で折り返させる（上の実測を参照）。写真の幅は帯の高さ×1.5＝450px。
	 * **写真を出す幅（下の 1024px 以下で消す指定）と必ず対にすること。** */
	body.page-id-95101 .recruit-main > .recruit-hero {
		padding-right: 470px;
	}
}
@media (max-width: 1024px) {
	/* **写真を出すのは「文字を折り返させる余白」を取れる 1025px 以上だけ**（点検役の指摘で是正）。
	 * 1024px以下は帯が狭く、右450pxの写真を出すと見出しが必ず写真に掛かる
	 * ＝上で潰したはずのコントラストの問題（最悪 2.15:1）がそのまま戻る。
	 * 3693 の帯はカバー配置なので狭い幅でも成立するが、こちらは右寄せなので別扱いにする。 */
	body.page-id-95101 .recruit-main > .recruit-hero {
		min-height: 0;
		background-image: none;
	}
}
/* ===== 2026-09-04 帯とヘッダーの間を開ける＋代表メッセージの帯に写真 ここまで ===== */

/* ===== 2026-09-04 インタビュー記事の引用が全幅に伸びるのを直す ここから =====
 *
 * 岡田さん指摘「人を知るのページのインタビューの記事が全部この形に崩れてるね。」
 *
 * ■ 何が起きていたか（実測）
 *   `.recruit-main` の直下の子は、ほとんどが `wp:group`（`is-layout-constrained`）で、
 *   `.recruit-hero, .recruit-panel` の規則により **max-width 1281px・左右auto** で中央に収まる。
 *   ところが引用だけは**素の `<p>`** で本文に入っており（`update_interviews.php` が
 *   `wp:paragraph` で出している）、この規則に当たらない。
 *   結果 **left=0 / right=1468 ＝ 画面いっぱい**に広がり、薄い面と文字が枠の外へはみ出していた
 *   （他の要素は 94〜1375）。
 *
 * ■ 対象（実測で洗い出した・採用の全15ページを走査）
 *   `/recruit/interview/`            … `.recruit-draft-note`
 *   `/recruit/interview/sales-a/`    … `.recruit-quote` ＋ `.recruit-quote-cite`
 *   `/recruit/interview/sales-b/`    … `.recruit-quote`
 *   `/recruit/interview/engineer-c/` … `.recruit-quote`
 *   `/recruit/interview/director-o/` … `.recruit-quote`
 *   他10ページは直下に素の要素が無い（＝影響なし）。
 *
 * ■ 直し方＝**クラスではなく「`.recruit-main` の直下の素の段落」を対象にする**
 *   クラス名を並べると、次に別のクラスで同じことをしたときにまた崩れる。
 *   直下の `<p>` は本来ここに置かれない形なので、まとめて枠に収める。
 *   幅は `.recruit-hero / .recruit-panel` と同じ 1281px（1239行付近の是正1と同じ値）。
 *   **引用自身の内側の padding（16px）や背景は触らない**（見た目は変えず、位置だけ直す）。
 *
 * ■ ★これから `.recruit-main` の直下に素の段落を書く人へ
 *   この規則は**クラスを見ずに直下の `<p>` すべて**に効く。
 *   意図的に画面いっぱいに広げたい段落を置きたくなったら、ここで除外すること。
 *   （2026-09-04 時点で直下に素の段落があるのは上の5ページだけ＝実測）
 *
 * ■ 本文（post_content）は変更していない
 *   ブロック構造を組み替える手もあるが、5ページ分のDB更新になるうえ
 *   `update_interviews.php` を作り直すことになる。**表示位置の問題なのでCSSで閉じる。**
 *
 * ■ 戻し方
 *   このブロックを削除する。
 *
 * ■ ※2026-09-17：**`recruit-corp-aligned` クラスを持つページでは、末尾の
 *   「2026-09-15 会社を知るの帯をコーポレートに揃える」ブロックがこの 1281px を
 *   `calc(100% - 3rem - 80px)`（実測1242px）に上書きする**（768px以上）。
 *   帯と本文パネルを同じ幅に寄せたので、この段落だけ1281pxで残ると左右にはみ出すため。
 *   ここの値を変えるときは、末尾のブロックも見ること。
 */
.recruit-page--v2 .recruit-main > p {
	max-width: 1281px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
/* ===== 2026-09-04 インタビュー記事の引用が全幅に伸びるのを直す ここまで ===== */

/* ===== 2026-09-04 仕事を知るの見出し帯にホワイトボードの手書き ここから =====
 *
 * 岡田さん指示
 *   ①「素材フォルダにホワイトボードの手書き画像をいくつか置いたから、
 *      これを組み合わせて仕事をしるページのアイキャッチを作ってみて。」
 *   ②「アイキャッチは見えていいからぼやかさなくていいよ。
 *      あと、複数枚をランダムに傾けたり重ねたり、するイメージで。」
 *
 * ■ 画像は `tools/make_recruit_work_eyecatch.py` が作る
 *   ホワイトボードの写真から5枚のカードを切り出し、**傾けて重ねた**もの（②）。**ぼかしは無い**。
 *   **どの写真を使い、どれを外したかと、その理由はそのスクリプトの冒頭に書いてある。**
 *   ぼかしをやめた＝**文字が読める状態で外に出る**ので、写真の選別が唯一の防波堤になる。
 *   （顧客名・個人名・パスワードが写っているものは外してある）
 *   出力＝`uploads/2026/09/recruit_work_eyecatch.jpg`（1920x462・帯の比 1281:308 と同じ）。
 *   ※2026-10-01 から使っているのは同じスクリプトで地を #081c28 にした `recruit_work_eyecatch_blue.jpg`（旧ファイルは残置）。
 *
 * ■ 覆い＝濃赤 #361116（`--recruit-footer-ground`）を **55%→66%**（3693 と同じ濃さ）
 *   ※2026-10-01 から覆いの色は #081c28（濃さは同じ）。下の数字は赤のときの実測（青での実測は作業まとめ_20261001 11章）
 *   **全文字領域（ラベル・見出し・リード2行）を48x5のセルに割り、いちばん明るいセルで実測**：
 *     35-45% … 3.12:1（AA未達） ／ 45-55% … 4.05:1（AA未達）
 *     **55-66%（採用）… 5.43:1** ／ 62-72% … 6.60:1
 *   55-66% は「AA を満たす一番薄い側」＝**②の『見えていい』に一番近いところ**。
 *   これより薄くすると見出しが読めなくなる。
 *   ※**画像を作り直したら測り直すこと。**
 *
 * ■ 高さは触らない（帯の中身が 308px あるので `min-height` は要らない）
 *
 * ■ 戻し方
 *   このブロックを削除する（＝帯が地色一色（10/1 から青）に戻る）。画像ファイルは残しても表示に出ない。
 */
/* ★2026-09-17 上側の覆いを 0.55 → 0.56 に上げた（岡田さん「覆いを少し濃くする」）
 *
 * 理由＝帯の高さが 308 → 430px になって `cover` の切り取り範囲が変わり、
 * **スマホ幅(375)の最悪コントラストが 4.49:1 と AA(4.5:1) を 0.01 割った**（実測・全画素）。
 *
 * | 覆い（上,下） | PC(1242x430)最悪 | SP(375x430)最悪 |
 * |---|---|---|
 * | 0.55,0.66（変更前） | 4.72:1 | **4.49:1**（割る） |
 * | 0.55,0.67（下だけ+0.01） | 4.77:1 | 4.54:1 |
 * | **0.56,0.66（採用）** | **4.81:1** | **4.58:1** |
 * | 0.57,0.66（上だけ+0.02） | 4.91:1 | 4.68:1 |
 *
 * **常にSPがPCより厳しい**（白文字が帯の上寄り y=85〜247/430 にあるため）ので、
 * **同じ+0.01でも上側を上げるほうが効く**（0.56,0.66 のSP 4.58 ＞ 0.55,0.67 のSP 4.54）。
 * 岡田さんの言葉が「**少し**濃くする」なので、**両方満たす中でいちばん薄い側**を採った。
 * 測り方＝先に `ffmpeg` で表示と同じ切り出し（PC `crop=1334:462:293:0` ／ SP `crop=402:462:759:0`）を
 * 作ってから `tools/measure_band_contrast.py` に渡す（ツールは `cover` を再現しない）。 */
body.page-id-3772 .recruit-main > .recruit-hero {
	background-image:
		linear-gradient(rgba(8, 28, 40, 0.56), rgba(8, 28, 40, 0.66)),
		url(/wp-content/uploads/2026/09/recruit_work_eyecatch_blue.jpg);
	background-size: cover;
	background-position: center 50%;
	background-repeat: no-repeat;
	border-radius: var(--pt-soft-radius);
}
/* ===== 2026-09-04 仕事を知るの見出し帯にホワイトボードの手書き ここまで ===== */

/* ===== 2026-09-04 パネル直下に置いた文章の色 ここから =====
 *
 * 岡田さん指示「これはパネルから出していい」（仕事を知る・仕事の進め方の下の「当社の標準プロセスは…」）。
 * `update_p3772_tweaks.php` で白いカードを外し、`recruit-hero-lead` を付けて地の上に出した。
 *
 * ところが `.recruit-hero-lead` の白文字は**帯の中（`.recruit-hero` の子）でしか効かない**ため、
 * 地の上に出した段落は**濃い文字色のまま朱色に乗って読めなかった**（実測 rgb(40,36,36)）。
 * パネルの直下に置いたものだけ、帯の中と同じ色にする。
 *
 * 色は帯のリード文と同じ #eef1f8。朱色 #9e3040 との比は **6.6:1**（AA）。
 * ※`.recruit-panel` の**直下**に限る（白いカードの中の同クラスを巻き込まないため）。
 *
 * 戻し方：このブロックを削除する。
 */
.recruit-page--v2 .recruit-main > .recruit-panel > .recruit-hero-lead {
	color: #eef1f8;
}
/* ===== 2026-09-04 パネル直下に置いた文章の色 ここまで ===== */

/* ===== 2026-09-04 人を知るの見出し帯に動画（2026-09-06 に営業職 3802 も） ここから =====
 *
 * ■ 2026-09-06 追記：**このブロックは 3792（人を知る）と 3802（営業職）の2ページに効く**
 *   岡田さん指示「営業職のアイキャッチも、仕事を知るの同パネル動画でいい。」
 *   帯の構造（`.recruit-hero-media` の敷き方・覆い・兄弟の重ね順）は2ページで同じなので、
 *   **セレクタにページIDを並記した**（`body.page-id-3792, body.page-id-3802`）。
 *   ページ別に分けてあるのは**ポスター画像の背景指定だけ**（3792のみ。3802にポスターは無い）。
 *   セレクタからページIDを外して `.recruit-page--v2` 全体に効かせる形は**採らなかった**
 *   ＝3792 の適用条件そのものが変わり、同名クラスが他所に出た瞬間に巻き込むため。
 *   **3ページ目が来た時点で、functions.php の一般化と同時にここも一般化する。**
 *
 * ■ 2026-09-06 追記：`position: relative` を 3802 にも**明示的に**置いている
 *   3802 の帯は、この指定を入れる前から計算値が `relative` だった（実測）が、
 *   **どのルールが与えているのか特定できていない**（※未確認。ブラウザ側から全スタイルシートの
 *   ルールを列挙できず、テーマのCSSを走査しても該当ルールが見つからなかった）。
 *   出所の分からない値に `.recruit-hero-media` の包含ブロックを預けると、
 *   2026-09-02→09-06 に踏んだ「sticky が消えた瞬間に基準を失う」と同じ形になるので、
 *   **依存せず自分で置く**。
 *
 * 岡田さん指示「これを人をしるのアイキャッチにして」（社員旅行のBBQ動画）
 * ＋「動画を全編流していい」「レイアウトがおかしくなってるね」。
 * `<span class="recruit-hero-media"><video></video></span>` を `functions.php` の同名マーカーブロックが
 * 帯の中に差し込んでいる（本文は無変更）。動画の作り方＝`tools/make_recruit_member_eyecatch.sh`。
 *
 * ★**社員が写る。掲載許可は取っていない。**
 *   台帳（実装記録/recruit_rebuild/facts_ledger_recruit4.md）の **P5-2** に項目を追加してある。
 *   既存の「90秒動画に写る社員の掲載許可」（P5）とは**別の素材**。
 *   検証環境・本番へ持ち込むには許可が要る。
 *
 * ■ ★最初に作った版で**レイアウトを2か所壊した**（岡田さん指摘）。同じことをしないための記録。
 *   1. **`.recruit-hero::after` を覆いに使ってしまった。**
 *      この擬似要素は**2026-09-02 の sticky ブロックが既に使っている**
 *      （帯の下に置く56pxの目隠しパネル。同ファイル 2008行付近）。
 *      上書きした結果、目隠しパネルが消え、覆いも 1281x56 の帯になって効かなかった（実測）。
 *      → **覆いは自前の `.recruit-hero-media` の `::after` に置く。** 帯の擬似要素は触らない。
 *   2. **帯に `overflow: hidden` を掛けてしまった。**
 *      上の目隠しパネルは `top: 100%`＝帯の外にあるので、これも消える。
 *      → **切り抜きは `.recruit-hero-media` 側**で行う（角丸もそちらに持たせる）。
 *
 * ■ 位置：**`inset: 0` でよい。padding とは対にしない**
 *   （2026-09-06 訂正。ここには「負の値を padding と対にする」と書いてあったが、
 *    **実装は下の 2612行付近で `inset: 0` に変わっており、記述のほうが古かった**。
 *    動画が内側に寄る原因は padding ではなく WordPress のレイアウトCSS で、
 *    `max-width: none` / `margin: 0` で外している。理由は実装側のコメントが正。）
 *   ＝**`.recruit-hero` の padding を変えても、この動画の位置は追随して直す必要がない。**
 *
 * ■ 覆い＝濃赤 #361116 を 60%→70%
 *   `tools/measure_band_contrast.py` で実測して決めた。**素材を替えるたびに測り直している。**
 *     12秒版（GX010789・全フレーム）… 55-66% 4.28（AA未達）／**60-70% 4.99**
 *     全編版（GX010789・402秒・1fps）… **60-70% 4.94**
 *     全編版（GX040808・531秒・2fps）… 60-70% 4.93
 *     **いまの素材（GX040808の0〜60秒・全1770フレーム）… 55-66% 4.30（AA未達）／
 *       60-70% 5.01（採用）／ 65-75% 5.92**
 *   ＝素材を替えても 60-70% で 4.9〜5.0 に収まる（AAの4.5:1を満たす）ので**濃さは据え置き**。
 *
 *   ★**2026-09-06 以降、この 60-70% は 3792 と 3802 の2ページで共有している。**
 *   **3792 の都合でここを変えるときは、3802 も測り直すこと**（点検役の指摘で追記）。
 *   3802（営業職・`recruit_job_sales.mp4`・帯 1281x333）の実測（全258フレーム・文字5ブロック）：
 *     **60-70% … 5.48（採用）** ／ 65-75% … 6.45 ／ 70-80% … 7.61
 *   再現（**この素材は `object-fit: cover` で 1.601倍に拡大されるので、
 *   `measure_band_contrast.py` に渡す前に表示と同じ切り出しを作る**。
 *   ツールは指定サイズへ引き伸ばすだけで cover を再現しない）：
 *     ffmpeg -i www/wp-content/uploads/2026/09/recruit_job_sales.mp4 -vf "crop=800:208:0:121" -an cover_sales.mp4
 *     python tools/measure_band_contrast.py cover_sales.mp4 --w 1281 --h 333 \
 *       --box 20,74,101,20 --box 20,97,1241,25 --box 20,130,1241,50 \
 *       --box 20,202,340,20 --box 20,228,720,97 --veil 0.60,0.70
 *   crop の出どころ＝cover の倍率は幅で決まる（1281/800＝1.6013）ので、
 *   素材側で切り出す高さは 333/1.6013＝208px、上下中央なので y=(450-208)/2=121。
 *   **60秒に縮めたので、いまは間引かずに全フレームで測れている。**
 *   再現：
 *     python tools/measure_band_contrast.py www/wp-content/uploads/2026/09/recruit_member_eyecatch.mp4 \
 *       --w 1281 --h 321 --fps 2 --box 20,72,1241,25 --box 20,105,1241,50 \
 *       --box 20,171,1241,29 --box 20,216,720,97 --veil 0.60,0.70
 *   ※**長い動画は `--fps` で間引いて測っている**（531秒を全フレームだと生20GB）。
 *     間引きで足りると判断した根拠＝12秒版を**全フレーム**で測った 4.99 と、
 *     全編を1〜2fpsで測った 4.94／4.93 が**0.1以内で一致**していること。
 *     いずれもカメラがゆっくり動くだけで、1コマだけ極端に明るくなる作りではない。
 *     **動きの速い素材に替えたら、この前提から確かめ直すこと。**（点検役の指摘で追記）
 *   **動画を作り直したら測り直すこと。**
 *
 *   ★**2026-09-17 帯の高さが変わったので測り直した（濃さは据え置きでよかった）**
 *   「コーポレートに揃える」で帯が **3792＝1281x321 → 1242x430** ／ **3802＝1281x333 → 1242x430** になり、
 *   比が変わって `cover` の切り取り範囲が変わった＝**上の実測値はどれも今の帯では無効**。
 *   新しい帯で測り直した結果（覆いは **0.60,0.70 のまま触っていない**）：
 *
 *   | ページ | 幅 | 素材 | cover倍率 | 切り出し | 最悪コントラスト | AA |
 *   |---|---|---|---|---|---|---|
 *   | 3792 | PC 1242 | mp4 1440x346・59秒 | 1.242775 | `crop=998:346:221:0` | **5.68:1**（全1770フレーム・間引きなし） | 満たす |
 *   | 3792 | SP 375 | ポスターjpg 1440x346 | 1.242775 | `crop=302:346:569:0` | **6.11:1** | 満たす |
 *   | 3802 | PC 1242 | mp4 800x450・8.6秒 | 1.552500 | `crop=800:276:0:87` | **6.61:1**（全258フレーム） | 満たす |
 *   | 3802 | SP 375 | **素材なし** | — | — | **12.65:1**（地色＋覆いのみ） | 満たす |
 *
 *   ※3802のスマホは `<video>` が `display:none`（実測 0x0）で、`.recruit-hero-media::after` の覆いだけが
 *     地色 `#9e3040` に乗る。**ポスター画像が無い**（★10として持ち越し中）。
 *     ポスターを足したらこの行は無効になるので測り直すこと。
 *   ※59秒の全長は**間引かずに全フレーム**で測った（所要25秒）。10秒版の暫定値5.68と全長が同値。
 *   ※覆いを変えるときは、**このブロックは3792と3802で共有している**ので両方測り直すこと（上と同じ）。
 *
 * ■ ファイルの大きさ＝**3.28MB**（59秒・1440x346・crf34）
 *   帯の背景で自動再生するので、開くたびにこれだけ落ちてくる。実測の推移：
 *     全編531秒 crf30 … 62.3MB ／ 全編531秒 crf34 … 35.4MB ／ **0〜60秒 crf34 … 3.28MB**
 *   ＝**区間を絞ったのがいちばん効いた**（岡田さん「過剰であれば削ってもいい」）。
 *   区間の選び方は `tools/make_recruit_member_eyecatch.sh` の冒頭に、
 *   全編を10秒ごとに見た中身の表とともに書いてある。
 *
 * ■ スマホ（767px以下）と「動きを減らす」設定では**動画を出さずポスター画像**にする
 *   `<video>` は消さずCSSで隠すだけ（条件が変わればそのまま動く）。
 *
 * ■ 戻し方
 *   このブロックと `functions.php` の同名ブロックを削除する（帯が地色一色（10/1 から青）に戻る）。
 */
body.page-id-3792 .recruit-main > .recruit-hero > .recruit-hero-media,
body.page-id-3802 .recruit-main > .recruit-hero > .recruit-hero-media {
	position: absolute;
	/* `inset: 0` でよい（実測）。
	 * 最初「絶対配置の基準はパディングボックスだから padding のぶん負の値が要る」と考えて
	 * `-72px/-20px/-8px/-20px` を入れたら、**帯より左右20pxずつ外へはみ出した**。
	 * 実際に動画が内側に寄っていた原因は padding ではなく、**WordPress のレイアウトCSS**が
	 * 直下の子に `max-width` と `margin:auto` を当てていたこと（下の2行で外している）。 */
	inset: 0;
	z-index: 0;
	overflow: hidden;                 /* 角丸からの切り抜きはここで行う（帯には掛けない） */
	border-radius: var(--pt-soft-radius);
	pointer-events: none;
	/* 帯は `is-layout-constrained` なので、WordPress のレイアウトCSSが**直下の子すべて**に
	 * `max-width: <content-size>` と `margin-left/right: auto` を当てる。
	 * これを外さないと、`left:-20px` を書いても**中央寄せの計算に負けて左右が20px内側のまま**になる
	 * （実測：x=114・幅1241 のまま動かなかった）。 */
	max-width: none;
	margin: 0;
}
body.page-id-3792 .recruit-main > .recruit-hero > .recruit-hero-media > video,
body.page-id-3802 .recruit-main > .recruit-hero > .recruit-hero-media > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.page-id-3792 .recruit-main > .recruit-hero > .recruit-hero-media::after,
body.page-id-3802 .recruit-main > .recruit-hero > .recruit-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(8, 28, 40, 0.60), rgba(8, 28, 40, 0.70));
}
body.page-id-3792 .recruit-main > .recruit-hero > *:not(.recruit-hero-media),
body.page-id-3802 .recruit-main > .recruit-hero > *:not(.recruit-hero-media) {
	position: relative;
	z-index: 2;
}
/* 帯を `.recruit-hero-media`（絶対配置）の基準にする。
 *
 * **2026-09-06 に無条件のルールへ変えた。**
 * 元は「帯が sticky にならない条件」（幅767px以下／高さ689px以下／`prefers-reduced-motion`）を
 * メディアクエリで並べ、**それ以外の窓では sticky 自身が基準になる**ことに頼っていた。
 * 2026-09-06 に岡田さん指示で sticky を撤去したため、この頼り先が消えている。
 * 条件付きのまま撤去すると、幅1382px・高さ900px のような**条件に当たらない窓**で
 * `.recruit-hero-media` が祖先に positioned を見つけられず
 * （`.recruit-main`／`.recruit-page` とも position 指定なし＝実測）、
 * 基準が**初期包含ブロック（ビューポート大）**へ飛ぶ。
 * ＝BBQ動画と濃赤70%の覆いがページ先頭の1画面ぶんを覆う。
 *
 * 包含ブロックを他のルールの副産物に依存させないため、条件を外して常に relative にする。 */
body.page-id-3792 .recruit-main > .recruit-hero,
body.page-id-3802 .recruit-main > .recruit-hero {
	position: relative;
}
@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	/* 動画は出さない。**3792 はポスター画像に差し替え、3802 は覆いだけが残る**（＝地色一色（10/1 から青）の帯に戻る）。
	 * 3802 にポスターを置いていないのは、いま流用している `recruit_job_sales.mp4` に
	 * 対応するポスター画像が無いため（`recruit_job_sales_poster.jpg` は存在しない＝実測）。
	 * **揃えるかは岡田さんの回答待ち**（揃えるならポスターを1枚作って下のルールに 3802 を足す）。
	 * `prefers-reduced-motion` でも止めるのは、動きを減らす設定の人に
	 * 背景動画をループ再生しないため（3792 と同じ扱い）。 */
	body.page-id-3792 .recruit-main > .recruit-hero > .recruit-hero-media > video,
	body.page-id-3802 .recruit-main > .recruit-hero > .recruit-hero-media > video {
		display: none;
	}
	body.page-id-3792 .recruit-main > .recruit-hero > .recruit-hero-media {
		background-image: url(/wp-content/uploads/2026/09/recruit_member_eyecatch_poster.jpg);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
/* ===== 2026-09-04 人を知るの見出し帯に動画 ここまで ===== */

/* ===== 2026-09-04 カードの文字が中央に寄って見える問題 ここから =====
 *
 * 岡田さん指摘「右寄せと左寄せが混じってないかね。」
 * （仕事を知る 3772 の「キャリアの伸ばし方」「自分に合うかを判断する材料」のカード）
 *
 * ■ 原因（実測）
 *   `.recruit-icon-card` は `display: flex`（1439行）。
 *   もともと **[アイコン][本文]** を横に並べるための指定だったが、
 *   **2026-09-03 にアイコンを21個削除した**（`remove_recruit_icons.php`）ので、
 *   いま並んでいるのは本文だけ。
 *   本文（`.recruit-icon-card-body`）に幅の指定が無いため、**flexアイテムとして
 *   自分の文字数ぶんに縮む**。結果、カードごとに幅が変わり、文字が中央に寄って見える。
 *   実測（「キャリアの伸ばし方」「キャリアパス例」の2列＝各3枚。見出しの左端x／幅）：
 *     左の列 … 小さな組織ならではの裁量 x=173/489 ／ **上流から下流まで一気通貫 x=236/363**
 *              ／ 学び続ける環境 x=176/484
 *     右の列 … スペシャリスト x=924/252 ／ リード x=924/252 ／ PM x=910/280
 *     ＝**同じ列の中で左端も幅もそろっていない**（短い見出しほど内側に寄る）
 *   `text-align` はどれも `start`（左）なので、**寄っているのは文字ではなく箱のほう**。
 *
 * ■ 直し方
 *   本文をカードの幅いっぱいに伸ばす（`flex: 1 1 auto`）。
 *   `min-width: 0` は、長い語で flexアイテムが縮まなくなるのを防ぐ定石。
 *   **アイコンを戻したときも壊れない**（`.recruit-icon-box` は固定幅で `flex` を持たないので、
 *   アイコンの箱が先に幅を取り、残りを本文が埋める）。
 *
 * ■ 是正後の実測（同じ6枚）
 *   **左の列は3枚とも x=138・幅561px、右の列は3枚とも x=770・幅561px**
 *   ＝2列なので左端の値は2つある（138+561=699 が左列の右端、770 から右列が始まる）。
 *
 * ■ 戻し方
 *   このブロックを削除する。
 */
.recruit-icon-card > .recruit-icon-card-body {
	flex: 1 1 auto;
	min-width: 0;
}
/* ===== 2026-09-04 カードの文字が中央に寄って見える問題 ここまで ===== */

/* ===== 2026-09-04 仕事の進め方をコーポレートの「導入の流れ」と同じ形に ここから =====
 *
 * 岡田さん指示「採用サイト、仕事を知るの仕事の進め方は、コーポレートサイトの画像部と同じようにして。」
 * （コーポレートトップの「導入の流れ」＝企画→設計→実装→移行→運用 の5枚の画面を示して）
 *
 * ■ 向こうの作り（`top.css` の「2026-08-28 セクション見た目強化」と「進行ウェーブ」）を写した
 *   1. 列と列のあいだに **丸い「›」**（`column:not(:last-child)::after`）。最後の列には付けない
 *   2. 見出しを**アクセント色で大きく**（向こうは `h4` を 22px / 600 / アクセント色）
 *   3. カードの背景を**左から右へ濃くなる帯**にして「1本の流れ」に見せる
 *      （向こうはアクセント色の白混合 6%→26% を5枚に振っている。こちらは4枚なので 6%→22%）
 *   4. **高さを揃えて縦中央寄せ**（説明文の行数がカードごとに違うと不揃いに見える）
 *   5. **丸番号は消す**。向こうに番号は無く、順序は矢印と並び順で分かる
 *
 * ■ 色はコーポレートの青ではなく**このカードで既に使っている `#1b58c4`**
 *   採用サイトの地は朱だが、**この白いカードの中はもとから青**
 *   （`.recruit-step-card .recruit-step-num` の背景・1406行。「薄青地でAAを満たす値として実測で決めた」）。
 *   ここで朱に変えると番号カード以外の既存の青と食い違うので、既にある青に揃えた。
 *   ※**サイトのアクセント変数 `--recruit-accent`（#216be9）とは別の値**。
 *     白カードの中に2種類の青がある状態は 2026-09-02（番号カード導入）からのもので、
 *     ここはそれを踏襲しているだけ。**変数に寄せるなら両方まとめて直す話になる**（点検役の指摘）。
 *
 * ■ スコープを `body.page-id-3772` に限っている理由
 *   `.recruit-step-card` は**エントリー（95102）でも使われている**（あちらは横長のピル型で、
 *   `recruit-step-num--wide`）。クラスだけで当てると**あちらの申込みの流れが崩れる**。
 *   3772 側にステップカードは1組（4枚）だけなのでページIDで十分に絞れる。
 *   `:has()` を使っているのは、同じ `.recruit-card-grid` が他の節でも使われていて
 *   列そのものには目印が無いため（`common.css`・`corp-color.css` でも同じ手を使っている）。
 *   ※`hero-actions.css` には「`:has()` を使ったが**非対応ブラウザでの壊れ方が悪く**撤去した」
 *     記録がある（2026-09-02 点検指摘）。あちらは**押せない要素が残ってクリックを奪う**形だった。
 *     ここで使っているのは**矢印（`::after`・`pointer-events:none`）とその位置決めだけ**なので、
 *     非対応なら「矢印が出ない」だけで操作は奪わない。**用途が違うので同じ轍ではない**（点検役の指摘）。
 *
 * ■ スマホ（767px以下）では矢印を出さない
 *   縦積みになるので横向きの矢印が意味を失う（コーポレート側と同じ判断）。
 *   ※**768〜781pxの帯では「縦積みなのに矢印が出る」**。WPコアが列を縦積みにするのは781pxで、
 *     矢印を消しているのは767pxなので、そのあいだが食い違う。
 *     **コーポレート側（`top.css`）にも同じズレがあり、あちらのコメントに既知として書かれている。**
 *     写した側にも同じことが起きるので、ここにも書いておく（点検役の指摘）。
 *
 * ■ ★説明文の色を `#6b6b6b` → `#555555` に変えた（コントラスト）
 *   `.recruit-step-desc` の `#6b6b6b`（1435行）は**白いカードの上で決めた色**。
 *   ここで**着色した地（青の白混合 6〜22%）を後ろに敷いた**ので、濃い側で足りなくなる。
 *   実測（地＝`color-mix(in srgb, #1b58c4 X%, #fff)` を合成して相対輝度から計算）：
 *
 *     地の混合率        6%    10%   14%   18%   22%
 *     #6b6b6b（元）    4.87  4.58  4.32  4.04  **3.78** ← 14%から下回る（AA=4.5:1）
 *     **#555555（採用）** 6.81  6.40  6.04  5.66  **5.29** ← 全列で満たす
 *     見出し #1b58c4   5.92  5.57  5.25  4.92  **4.60** ← 22pxでも通常文字として満たす
 *
 *   ＝**背景を足したら、その上に元からあった文字色を測り直す。**
 *   点検役の指摘で気づいた（このブロックだけコントラストの実測を書いていなかった）。
 *
 * ■ 戻し方
 *   このブロックを削除する（丸番号つきの元の見た目に戻る）。本文（post_content）は無変更。
 */
body.page-id-3772 .wp-block-column:has(> .recruit-step-card) {
	position: relative;
}
body.page-id-3772 .wp-block-column:has(> .recruit-step-card):not(:last-child)::after {
	content: "\203A";
	position: absolute;
	top: 50%;
	right: -18px;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid color-mix(in srgb, #1b58c4 35%, transparent);
	font-size: var(--gasp-fs-20);
	line-height: var(--gasp-lh-1);
	color: #1b58c4;
	z-index: 1;
	pointer-events: none;
}
@media screen and (max-width: 767px) {
	body.page-id-3772 .wp-block-column:has(> .recruit-step-card):not(:last-child)::after {
		display: none;
	}
}
/* 2026-10-02 帯の形（gasp-scenes-recruit）では4枚が縦に積まれるので、丸の「›」を下向きに（岡田さん「パネル右の〇と＞の図形は下向きにすべきだね。」）。
   1366×768 の実測で4枚とも左端 781px・上端が 174px ずつ下＝縦1列。
   同日2回目：位置もカードの下の中央へ（岡田さん「この〇図形はパネル下部の中央に必要だな。このパネルの配置だと工程は上から下に流れるので。」）。
   カードの間 24px（実測）の真ん中に丸（32px）の中心が来るよう、下へ 24/2+16＝28px はみ出させる。
   帯の形でない表示（横並びのまま）には当てない */
body.gasp-scenes-recruit.page-id-3772 .wp-block-column:has(> .recruit-step-card):not(:last-child)::after {
	top: auto;
	right: auto;
	left: 50%;
	bottom: -28px;
	transform: translateX(-50%) rotate(90deg);
}
/* 2026-10-07 タンさん指摘 S11：767px以下でも帯の形では下向きの丸を出す（上の「767px以下は矢印を出さない」は横向き矢印が縦積みで無意味という理由で、
   10/2 から帯の形は下向きになったので理由が消えた）。カードの間は S6 の対応で 767px以下 19.2px（幅800・1366 では 24px のまま＝実装役の実測。768〜1024px の他の幅は測っていない）なので、丸の中心が間の真ん中に来るよう bottom を 16+19.2/2＝25.6px にする。
   ※32px の丸は 19.2px の間に収まらず上下のカードに 6.4px ずつ重なる（PCの 24px の間でも 4px ずつ重なる設計と同じ）。
   戻し方：この2つの規則を削除。 */
@media screen and (max-width: 767px) {
	body.gasp-scenes-recruit.page-id-3772 .wp-block-column:has(> .recruit-step-card):not(:last-child)::after {
		display: flex;
	}
}
@media screen and (max-width: 767px) {
	body.gasp-scenes-recruit.page-id-3772 .wp-block-column:has(> .recruit-step-card):not(:last-child)::after {
		bottom: -25.6px;
	}
}

/* カード本体：高さを揃えて縦中央寄せ＋左から右へ濃くなる帯 */
body.page-id-3772 .wp-block-column > .recruit-step-card {
	min-height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	background-image: linear-gradient(var(--gasp-flow-dir, 90deg), var(--gasp-flow-from), var(--gasp-flow-to));
}
body.page-id-3772 .wp-block-column:nth-child(1) > .recruit-step-card {
	--gasp-flow-from: color-mix(in srgb, #1b58c4 6%, #fff);
	--gasp-flow-to:   color-mix(in srgb, #1b58c4 10%, #fff);
}
body.page-id-3772 .wp-block-column:nth-child(2) > .recruit-step-card {
	--gasp-flow-from: color-mix(in srgb, #1b58c4 10%, #fff);
	--gasp-flow-to:   color-mix(in srgb, #1b58c4 14%, #fff);
}
body.page-id-3772 .wp-block-column:nth-child(3) > .recruit-step-card {
	--gasp-flow-from: color-mix(in srgb, #1b58c4 14%, #fff);
	--gasp-flow-to:   color-mix(in srgb, #1b58c4 18%, #fff);
}
body.page-id-3772 .wp-block-column:nth-child(4) > .recruit-step-card {
	--gasp-flow-from: color-mix(in srgb, #1b58c4 18%, #fff);
	--gasp-flow-to:   color-mix(in srgb, #1b58c4 22%, #fff);
}
@media screen and (max-width: 781px) {
	/* 縦積みでは帯の向きも上→下へ（WPコアが縦積みに切り替わる781pxに合わせる） */
	body.page-id-3772 .wp-block-column > .recruit-step-card {
		--gasp-flow-dir: 180deg;
	}
}

/* 丸番号は出さない（コーポレート側に番号は無い）。順序は矢印と並び順で示す */
body.page-id-3772 .recruit-step-card .recruit-step-num {
	display: none;
}
/* 見出しはコーポレートの h4 と同じ大きさ・太さ・色 */
body.page-id-3772 .recruit-step-card .recruit-step-name {
	margin: 0 0 var(--gasp-sp-8);
	font-size: var(--gasp-fs-20);
	font-weight: 600;
	line-height: var(--gasp-lh-tight);
	color: #1b58c4;
}
body.page-id-3772 .recruit-step-card .recruit-step-desc {
	font-size: var(--gasp-fs-14);
	line-height: var(--gasp-lh-loose);
	color: #555555;   /* 着色した地の上でAAを満たす値。上の実測表を参照 */
}
/* ===== 2026-09-04 仕事の進め方をコーポレートの「導入の流れ」と同じ形に ここまで ===== */


/* ===== 2026-09-04 カードが1枚だけの節でパネルの幅が12px広くなる ここから =====
 *
 * 岡田さん指摘（2026-09-04）「パネルの幅が微妙に違うね。」
 *   （人を知る 3792 のスクリーンショット。営業インタビューのカードと
 *     エンジニア／取締役インタビューのカードを見比べての指摘）
 *
 * ■ 何が起きていたか（実測）
 *   `.recruit-card-grid` の枠は 1241px、`column-gap` は 24px
 *   （`:root :where(.is-layout-flex)` の `gap: 2.4rem`。**このテーマのルート字送りは10px**なので
 *     2.4rem = 24px。実測で確認した）。
 *   カラムは WordPress が **インラインで `flex-basis: 50%`** を書く（`wp:column {"width":"50%"}`）。
 *     カードが2枚 … 50%+50% = 1241px だが使える幅は 1241-24 = 1217px なので
 *                    flex-shrink が各12pxずつ縮めて **608.5px（実測 609px）**
 *     カードが1枚 … 縮める理由が無いので **620.5px（実測 621px）**
 *   ＝**同じ「50%」なのに、隣にカードがあるかどうかで12px変わる。**
 *   1483px幅で 609 対 621、900px幅で 412 対 422（実測）。
 *   岡田さんのスクリーンショットは125%表示で 762 対 777 に見えていた（609/621の1.25倍）。
 *
 * ■ 該当箇所は2つだけ（全ページを走査して確認）
 *   `.recruit-card-grid` を持つ7ページのうち、**カラムが1つなのに 50% を宣言している**のは
 *   3792（人を知る）の**エンジニアインタビューと取締役インタビュー**だけ。
 *   他は 2col=50%／3col=33.33%／4col=25% で、宣言と枚数が一致している。
 *
 * ■ 直し方＝1枚だけのときも「2枚並びと同じ幅」にする
 *   `50%` を「行の半分」ではなく**グリッドの1コマ**として扱う ＝ `(100% - 隙間) / 2`。
 *   隙間は数値を書かずテーマの変数を使う（`--wp--style--block-gap` は 2.4rem＝24px と実測）。
 *   **カードを枠いっぱい（1241px）に広げる案は採らなかった。**
 *   岡田さんの指摘は「微妙に違う」＝上の節と揃えたいという意味なので、揃える先は2枚並びの幅。
 *
 *   `!important` が要るのは、WordPress が `flex-basis` を**インライン style で**書くため
 *   （インラインには通常のセレクタでは勝てない）。
 *   `[style*="flex-basis:50%"]` を付けているのは、**50%を宣言しているカラムだけ**に当てるため
 *   （将来1枚だけの 33.33% のカラムが出てきても巻き込まない）。
 *
 * ■ 戻し方
 *   このマーカーの間を削除する。621pxに戻る。 */
.recruit-card-grid > .wp-block-column:only-child[style*="flex-basis:50%"] {
	flex-basis: calc((100% - var(--wp--style--block-gap, 2.4rem)) / 2) !important;
}
/* ===== 2026-09-04 カードが1枚だけの節でパネルの幅が12px広くなる ここまで ===== */

/* ===== 2026-09-06 アイキャッチの下の余白を詰める ここから =====
 *
 * 岡田さん指示（2026-09-06）「アイキャッチの下はもっと余白を小さくしていい。今の4分の1くらい。」
 * （「会社を知る」3693 の画面を見ながら）
 *
 * ■ 何が「今の余白」だったか（実測・2026-09-06・幅1382px／3693）
 *   帯 `.recruit-hero` の下端 420px、直後の `.recruit-panel` の上端 476px ＝ **56px**。
 *   正体は `.recruit-panel` の `margin-top: 56px`。
 *
 * ■ **帯の次が `.recruit-panel` でないページがある**（点検役の指摘で追記）
 *   インタビュー4本（95105〜95108）は帯の直後が `.recruit-quote`（`margin: 16px 0`付近）。
 *   ＝**このページの元の余白は56pxではなく16px**で、このルールは 16px → 14px の 2px しか変えない。
 *   「4分の1」になるのは帯の次が `.recruit-panel` のページ（3693 / 3772 / 3786 / 3792 / 95101〜95104）。
 *   実測（2026-09-06・幅1382px）：3693 = 14px ／ 95105（次が `.recruit-quote`）= 14px。
 *   詳細度はこのルール（0,3,0）が `.recruit-quote`（0,1,0）に勝つので、意図せず上書きしている。
 *   **2px の差なので揃える側に倒したが、インタビューだけ元の16pxに戻すなら**
 *   `.recruit-hero + .recruit-quote { margin-top: 16px }` を1本足す。
 *   ※同じ位置にあった「56pxの目隠しパネル」（2026-09-02 の sticky ブロック）は
 *     地色と同色で**見えていなかった**ので、余白の正体ではない。撤去しても余白は変わっていない。
 *
 * ■ 56px → **14px**（＝4分の1）
 *
 * ■ なぜ `.recruit-panel` の 56px そのものを変えないか
 *   `.recruit-panel { margin: 56px auto }` は**全パネルの上下**に効く。
 *   値を直接変えると採用サイト全ページの**節と節の間が全部詰まる**。
 *   岡田さんが見ているのは帯の直下1か所なので、隣接セレクタで**帯の次の1個だけ**に絞る。
 *
 * ■ ページを選ばずに効かせる
 *   帯を持つ12ページ（3693 / 3772 / 3786 / 3792 / 95101〜95108）すべてが対象。
 *   1ページだけ直すと、次に別のページを見たときに同じ指摘がもう一度来る
 *   （2026-09-04 に同じ判断をしている＝「帯とヘッダーの間を開ける」の節）。
 *
 * ■ 戻し方
 *   このブロックを削除する。56pxに戻る。
 */
.recruit-page--v2 .recruit-main > .recruit-hero + * {
	margin-top: var(--gasp-sp-16);
}
/* ===== 2026-09-06 アイキャッチの下の余白を詰める ここまで ===== */

/* ===== 2026-09-15 会社を知るの帯をコーポレートに揃える ここから =====
 *
 * ■ 岡田さん指示（2026-09-15・「会社を知る」とコーポレートの帯を並べた画像を見ながら）
 *   「コーポレートサイトを正として、そろえてほしい」
 *
 *   揃える範囲の確認への回答（選んだ選択肢の文言そのまま）：
 *     ・帯の寸法（左右55px・高さ430px）
 *     ・文字を縦横中央に
 *     ・リード文の体裁（16px・幅980・中央）
 *   **選ばなかった＝揃えないもの**：覆いを灰0.5の一色に
 *     → 濃赤 `rgba(54,17,22,.55→.66)`（「2026-09-03 会社を知るの見出し帯にアイキャッチ」ブロック）は**1文字も触らない**。
 *       採用＝朱／コーポレート＝紺の色分け（9/1決定）を帯からも消さないため。
 *   対象＝**「会社を知る」(3693) だけ**（岡田さん「まず3693だけ」）。
 *
 * ■ コーポレートの「左右55px」は固定値ではなく**式**（実測4点で確認・2026-09-15）
 *   向こうの帯（`.eye-catch-contents .wp-block-cover`）の左右の余白は、
 *   `.pt-container` の **1.5rem** ＋ `article.card-layout-w` 20px ＋ `.single-content-inner` 20px の積み上がり。
 *   器の上限は `--pt-site-width: 1400px`。したがって
 *     **幅 = min(clientWidth, 1400) − (3rem + 80px)、左右auto**
 *
 *   **★この 1.5rem は固定値ではない。** このテーマはルートの文字サイズが幅で変わり（実測：
 *   clientWidth 785 で 8.48px ／ 1367 で 10px）、同じ 1.5rem が **12.72px / 15px** と動く。
 *   ＝コーポレートの左右は 55px 固定ではなく **53〜55px で変化する**。
 *   最初 `calc(100% - 110px)` と px で書いたが、785px幅で 55 対 53 の2pxずれが出たので rem 式にした。
 *
 *   実測（コーポレート `.wp-block-cover` ／ 2026-09-15）：
 *
 *   | clientWidth | 帯の左端 | 帯の幅 | 高さ |
 *   |---|---|---|---|
 *   | 375  | 28 | 319 | 430 |
 *   | 785  | 53 | 679 | 430 |
 *   | 1085 | 55 | 975 | 430 |
 *   | 1367 | 55 | 1257 | 430 |
 *   | 1485 | 98（中央寄せ） | 1290（1400で頭打ち） | 430 |
 *
 *   → **値（1257px）ではなく式を写す。** `max-width: 1257px` にすると1367pxでしか一致せず、
 *     広い窓ではコーポレートより早く中央寄せが始まって左右が食い違う。
 *   `.recruit-main` は素の全幅（左右paddingなし）なので `100%` ＝ clientWidth で、式がそのまま書ける。
 *   **`max-width` は `.recruit-hero, .recruit-panel` の `max-width: 1281px` を必ず上書きすること**
 *   （放置すると広い窓で9pxずれる）。
 *   ※このファイル前半に「rem は使わない（ルートが10pxになる罠）」と書いてあるが、ここは逆に
 *     **向こうが rem で持っている余白を写すのが目的**なので rem で書く。px で固定すると上の2pxずれになる。
 *
 * ■ スマホ（767px以下）の左右は**現状のまま**にした
 *   コーポレートのSPは左右28px（実測）、採用の本文は0px。帯だけ28pxにすると
 *   帯と本文の段差が28px＝PCの12pxより目立つ。岡田さんが選んだ「左右55px」はPCの数値。
 *   **高さ430pxはSPにも当てる**（コーポレートはSPでも430＝メディアクエリ無し。9/3ブロックの240pxを上書き）。
 *
 * ■ 縦横中央の作り方（「2026-09-03 会社を知るの見出し帯にアイキャッチ」ブロックの「flex にしないこと」を今回だけ外している）
 *   9/3 に「flexにすると見出しが幅なりになり、テーマの左右autoマージンで中央に寄る」と書いたのは
 *   **左揃えにしたかったから**。今回は中央が目的なので向きが逆になった。
 *   `align-items` は**既定(stretch)のまま触らない**。実際には WP本体がインラインで出している
 *   （`margin-left/right: auto !important`）が交差軸のautoマージンとして stretch より先に効くため、
 *   **子は幅なりになって中央に寄る**（実測 2026-09-15：ラベル45px・見出し210px・リード542pxで、
 *   3つとも中心が帯の中心684pxと一致）。9/3に「寄ってしまう」と書いた現象そのものだが、
 *   **今回はそれが目的**なので利用する。`align-items: center` を書き足しても結果は同じで、
 *   宣言が1つ増えるだけなので書かない。横の文字揃えは `text-align: center` が担当する。
 *   `.recruit-section-label` だけは `text-align: left` を持っているので個別に上書きする。
 *
 * ■ padding 88/20/48 → 16px
 *   88/48は「上から積む」前提の値で、縦中央にすると中身が20px下にずれる。
 *   コーポレートのカバーと同じ16pxにする（0にすると中身が430pxを超えたとき角丸の縁に触る）。
 *
 * ■ 帯の下の14px（「2026-09-06 アイキャッチの下の余白を詰める」ブロック）は触らない。
 *   **帯に `margin-bottom` を足さないこと**
 *   14pxは隣接兄弟（`.recruit-hero + *`）で効いているので、帯の display や高さを変えても効き続ける。
 *   壊れる条件は「帯に margin-bottom を足す」の1つだけ。
 *
 * ■ **全行を `body.recruit-corp-aligned` から書き始めること。`body` を落とさないこと。**
 *   `.recruit-page--v2` で書くと 95101（代表メッセージ・写真を右端に置き padding-right 470px で
 *   見出しを折り返している）を巻き込み、9/4に潰したコントラスト2.15:1が戻る。
 *   `body` を落とすと詳細度が (0,3,1)→(0,3,0) に下がり、
 *   **末尾の10vhブロックが「2026-09-06 アイキャッチの下の余白を詰める」の14pxルール（0,3,0）と同点になる**
 *   ＝勝ち負けがソース順だけで決まる。**「CSSに書いてあるのに画面が変わらない」形で黙って壊れる**側なので、
 *   必ず `body` を付ける（設計役の指摘 2026-09-17）。
 *
 * ■ ★2026-09-17 対象ページの指定を「ページIDの列挙」から「body のクラス1語」に変えた
 *   岡田さん「採用サイトを、この形で統一しようか」→ 対象が14ページになったため。
 *
 *   **対象ページの正は `functions.php` の `gasp_recruit_corp_aligned_ids()` の配列。**
 *   このブロックのセレクタにページIDは書かない。**下の表は「いつ何を当てたか」の記録**であって、
 *   対象の指定ではない（2か所で管理すると必ず食い違う）。
 *
 *   | 追加日 | ページ | 帯の背景 | 変更前の帯（x / 幅 / 高さ・clientWidth 1352） |
 *   |---|---|---|---|
 *   | 2026-09-15 | 3693 会社を知る | 写真 `recruit_about_eyecatch.jpg` | 43 / 1281 / 300 |
 *   | 2026-09-17 | 3786 働き方・制度 | 地色のみ | 36 / 1281 / 211 |
 *   | 2026-09-17 | 3772 仕事を知る | 写真 `recruit_work_eyecatch.jpg`（10/1 から `_blue.jpg`） | 43 / 1281 / 308 |
 *   | 2026-09-17 | 3788 FAQ | 地色のみ（**リード文も無い**） | 36 / 1281 / 179 |
 *   | 2026-09-17 | 3792 人を知る | 動画 `recruit_member_eyecatch.mp4` | 43 / 1281 / 321 |
 *   | 2026-09-17 | 3802 営業職 | 動画 `recruit_job_sales.mp4`（SPは素材なし） | 43 / 1281 / 333 |
 *   | 2026-09-17 | 3851 エンジニア職 | 地色のみ（**戻りリンクあり**） | 36 / 1281 / — |
 *   | 2026-09-17 | 95102 エントリー | 地色のみ | 36 / 1281 / — |
 *   | 2026-09-17 | 95103 採用ニュース | 地色のみ | 36 / 1281 / — |
 *   | 2026-09-17 | 95104 インタビュー一覧 | 地色のみ（**素の `<p>` 1個**） | 36 / 1281 / — |
 *   | 2026-09-17 | 95105〜95108 インタビュー4本 | 地色のみ（**戻りリンク＋素の `<p>`**） | 36 / 1281 / — |
 *
 *   **入れていないもの**：95101 代表メッセージ（岡田さん「今回は外す」）／37 採用トップ（別構造）／
 *   3733・3751・3767・3853・3855（旧デザインのまま）。
 *
 *   ※3786は**帯に背景素材が無い**ので、白文字のコントラストは地色（`--recruit-ground: #9e3040`）
 *     との既知の値 7.12:1 のまま＝**測り直しは要らない**（設計役の「層1」）。
 *     （2026-10-01 から地は #195d84＝白との比 7.14:1・計算）
 *   ※**列挙に戻さないこと。** 列挙は「帯だけ揃って本文パネルの padding だけ0になっていない」という
 *     **20pxずれた9割正しい画面**（＝部分適用）を作れてしまう。クラス1語なら
 *     **全部当たるか1つも当たらないか**の2状態しかない。
 *   ※`:is()` でまとめる案も却下した。詳細度は保てるが、**非対応の環境ではルールごと丸ごと無効**になり、
 *     14ページが同時に崩れる（しかもこちらのブラウザでは再現しない）。
 *     **同じ判断が `functions.php` の `gasp_hero_actions_body_class` の直前のコメントで既に下されている**（`:has()` をやめて `body_class` にした）。
 *
 * ■ ★未確認：**背景の無いページで高さ430pxを写してよいかは、岡田さんに確認できていない**
 *   岡田さんが「430pxのまま」と答えた（2026-09-15・スマホで1画面の76%を占める件）のは
 *   **帯に夜景写真がある3693**についての回答。
 *   3786は帯が透明で（実測：`background-color: rgba(0,0,0,0)` / `background-image: none`）、
 *   赤いのは `body`（`--recruit-ground`）＝**帯と地の境目が無い**。
 *   211→430px にした219px分が、そのまま**何も無い赤い余白**として増えて見える。
 *   **層1の10ページは全部この形**なので、ここは1ページ目を見てもらって決める（点検役の指摘 2026-09-17）。
 *   コントラストは測り直し不要だが、**それは「高さを写してよい」の根拠にはならない**。
 *
 * ■ 1ページだけ外す手順
 *   **`functions.php` の `gasp_recruit_corp_aligned_ids()` の配列から、そのIDを1つ消す。**
 *   CSSは1行も触らない。3ブロック（帯／節の中央揃え／節の上下10vh）が同時に外れる。
 *   実際に 95101 代表メッセージはこの理由で配列に入れていない（岡田さん「今回は外す」2026-09-17）。
 *
 * ■ 戻し方＝このブロックを削除する（クラスが付いている全ページが9/6までの状態に戻る）。
 *   **1ページだけ外す場合は上の「■ 1ページだけ外す手順」。**
 *   **クラスの仕組みごとやめる場合**は `functions.php` の
 *   「2026-09-17 『コーポレートに揃える』対象ページに目印を付ける」ブロックを削除する。
 *   **あわせて「2026-09-03 会社を知るの見出し帯にアイキャッチ」ブロックの
 *   `body.page-id-3693 .recruit-main > .recruit-hero` にある「**flex にしないこと**」コメントへの追記
 *   （「※2026-09-15 に方針が変わった…」の3行）も消すこと。**
 *   ここを消すと参照先が無くなり、「flexにしないこと」という元の禁止だけが残って読み手が混乱する。 */
@media (min-width: 768px) {
	/* 左右＝コーポレートと同じ式（3rem+80px。実測で53〜55px）。
	 * `.recruit-hero, .recruit-panel` の `max-width: 1281px` を上書きする */
	body.recruit-corp-aligned .recruit-main > .recruit-hero {
		width: calc(100% - 3rem - 80px);
		max-width: calc(1400px - 3rem - 80px);
		margin-left: auto;
		margin-right: auto;
	}
}
body.recruit-corp-aligned .recruit-main > .recruit-hero {
	min-height: 430px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	padding: var(--gasp-sp-16);
}
@media (max-width: 767px) {
	/* 「2026-09-03 会社を知るの見出し帯にアイキャッチ」ブロックの SP用 `min-height: 240px` を上書き。コーポレートはSPでも430px。
	 * 3786は9/3ブロックの対象外（SP専用の高さ指定を持たない）が、同じ値なので並記しておく */
	body.recruit-corp-aligned .recruit-main > .recruit-hero {
		min-height: 430px;
	}
}
/* ラベルは `.recruit-section-label` が `text-align: left` を持つので、親の center が届かない */
body.recruit-corp-aligned .recruit-main > .recruit-hero .recruit-section-label {
	text-align: center;
}
/* リード文。「2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ）」ブロックの
 * `margin-left/right: 0 !important` を、クラスを持つページだけ打ち返す
 * （あちらは他ページが依存しているので削除しない）。
 * `line-height` は `.recruit-hero .recruit-hero-lead` の倍率指定（1.9）なので、
 * 大きさを変えれば行間も追随する＝触らない。
 *
 * ★2026-09-15 修正：ここは最初 `16px` と固定で書いたが、**コーポレートの同じ位置は `1.6rem`**
 *   （実測：clientWidth 1367 で 16px ／ 995 で 13.568px）。px固定だと狭い幅でずれるので rem にした。
 *   岡田さんの判断＝「コーポレート側（rem）に寄せる」（2026-09-15）。
 *   ※このファイル前半の「rem は使わない（このテーマはルートfont-sizeが10pxになる既知の罠）」と
 *     逆向きになる理由は、末尾の同日ブロックに書いてある
 *     （向こうが rem で持っている値を写すのが目的）。 */
body.recruit-corp-aligned .recruit-main > .recruit-hero .recruit-hero-lead {
	font-size: var(--gasp-fs-16);
	max-width: 980px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ---- 本文パネルも帯と同じ左右55pxに寄せる（2026-09-15 岡田さん判断） ----
 *
 * 帯だけ55pxにすると、帯の左端55pxに対して本文の左端が63pxで**8pxずれる**（実測）。
 * 岡田さんの判断＝「本文パネルも55pxに寄せる」。
 *
 * ■ コーポレートの本文は帯と完全に同じ矩形（実測 2026-09-15・clientWidth 1367）
 *   `.single-content-inner` の直下は、帯（`.eye-catch-contents`）も
 *   「よくある課題」「成果物の一例」等の節も**すべて x=55 / w=1257**。
 *   ＝向こうは帯と本文が同じ幅・同じ左端。ここに合わせる。
 *
 * ■ 採用側で55pxに合わせるには3つ要る（1つでも欠けると揃わない）
 *   ① 枠を帯と同じ式にする（`calc(100% - 110px)` / `max-width:1290px` / 左右auto）
 *   ② 枠の左右padding 20pxを**0にする**。残すと中身が x=75 になり、
 *      帯の左端55pxから逆に20px内側へずれる
 *   ③ `--wp--style--global--content-size` を**帯・パネルと同じ上限**にする。
 *      採用ページ全体に `--wp--style--global--content-size: 1241px` を当てているルールがあり、パネルを広げても
 *      `is-layout-constrained` の子（`.recruit-section-head` 等）が1241pxで止まって中央に寄る
 *      ＝**枠だけ広げても中身の左端は63pxのまま動かない**（9/2に同じ形を踏んでいる）。
 *      3693 だけに当てるので他ページの1241pxは動かない。
 *   → 本文の幅は 1241px → **1257px（16px広くなる）**。コーポレートと同値。
 *
 * ■ 左右paddingを0にするのは768px以上だけ
 *   767px以下はこの20pxが画面端と文字の間の余白そのもの。消すと文字が端に張り付く。
 *
 * ■ CTAの箱だけ別に上限を持っている
 *   `.recruit-cta > .wp-block-cover` を `max-width:1241px` にしているルールがある
 *   （9/2に「cover が20px外側へ張り出す」を直したときの値）。
 *   パネルが1257pxになると今度はこれだけ内側に8px入るので、解除する。
 *
 * ■ ★2026-09-17 素の `<p>` も同じ幅にする（設計役の指摘）
 *   95104〜95108 の5ページは、`.recruit-main` の**直下に素の `<p>`**（`.recruit-quote` /
 *   `.recruit-quote-cite` / `.recruit-draft-note`）を持っている。
 *   「2026-09-04 インタビュー記事の引用が全幅に伸びるのを直す」ブロックがこれを `max-width: 1281px` で拾っているので、
 *   **パネルだけ広げるとこの段落だけ1281pxのまま残り、左右にはみ出す。**
 *   原因も直す値も戻し方もパネル・CTAと同じなので、**別ブロックを作らずここに並記する**
 *   （別に作ると、消すときに4ブロック目を探すことになる）。
 *   ※`padding-left/right: 0` のほうには**足さない**。`.recruit-quote` の内側16pxは
 *     9/4に「触らない」と決めてあるため。 */
body.recruit-corp-aligned {
	/* 帯・パネルの上限と同じ値にする（＝子が先に頭打ちにならない）。
	 * 1241px を残すと、パネルを広げても中身が1241pxで止まって左端が動かない。
	 * **ここだけメディアクエリの外にある**（下の2つは768px以上限定）。この変数は
	 * 「これ以上は広げない」という上限でしかなく、767px以下では使える幅（実測：375px幅で335px）が
	 * どちらの値より小さいので、当たっても結果が変わらないため
	 * （実測 2026-09-15・375x812：パネルの中身 x=20 / w=335 ＝変更前と同じ）。 */
	--wp--style--global--content-size: calc(1400px - 3rem - 80px);
}
@media (min-width: 768px) {
	body.recruit-corp-aligned .recruit-main > .recruit-panel,
	body.recruit-corp-aligned .recruit-main > .recruit-cta,
	body.recruit-corp-aligned .recruit-main > p {
		width: calc(100% - 3rem - 80px);
		max-width: calc(1400px - 3rem - 80px);
		margin-left: auto;
		margin-right: auto;
	}
	/* 左右paddingを持っているのは `.recruit-panel` だけ。
	 * `.recruit-cta` は元から0なので、こちらには書かない */
	body.recruit-corp-aligned .recruit-main > .recruit-panel {
		padding-left: 0;
		padding-right: 0;
	}
	body.recruit-corp-aligned .recruit-main > .recruit-cta > .wp-block-cover {
		max-width: none;
	}
}
/* ===== 2026-09-15 会社を知るの帯をコーポレートに揃える ここまで ===== */

/* ===== 2026-09-15 会社を知る「私たちの仕事の流儀」の節をコーポレートに揃える（位置のみ） ここから =====
 *   （2026-09-17 に対象を**5節すべて**へ広げた。ブロック名は作業まとめ_20260915.md の
 *    「戻し方」が参照しているので変えていない。範囲の経緯は下の「■ 当てる範囲」を読むこと）
 *
 * ■ 岡田さん指示（2026-09-15・コーポレートの節と採用の節の画像2枚を並べて）
 *   「この部分もコーポレートに揃えようか」
 *   揃える範囲の確認への回答＝「**カードの白地は真似しなくていい。位置は揃えよう。**」
 *   カードの地＝「動画のまま（地は揃えない）」
 *
 *   → **揃えるのは位置（中央揃え）だけ。** 地の色・白カード・動画・カードの高さ・列数・gap・
 *     文字サイズ・余白は**対象外**（要求に無い）。
 *
 * ■ コーポレート側（実測 2026-09-15・`/solution/cost-optimization/`）
 *   節の見出し（H3 26px）・リード（P 16px）・小見出し（H4 22px）・カードの中の見出しと本文が
 *   **すべて中央**。**見出しの下に飾りは無い**（`::before`/`::after` とも `content: none`）。
 *
 * ■ 当てる範囲（★2026-09-17 に岡田さんの回答で広がった）
 *   **2026-09-15 時点**＝「Work Style／私たちの仕事の流儀」の節だけ。岡田さんの指示が「この部分」
 *   だったため、残り4節（Trust／CEO Message／Company Profile／History）は触らず、
 *   **ページ内で1節だけ中央**という状態で岡田さんの判断待ちにしていた（作業まとめ_20260915.md ★12）。
 *
 *   **2026-09-17**：岡田さん「採用サイトを、この形で統一しようか」
 *   ＋揃える範囲の確認への回答＝「**帯＋節＋3693の残り4節**」
 *   → ★12 は「揃える」で決着。絞りから `.recruit-hero + ` を外し、
 *     **このページの5節すべて**（Work Style／Trust／CEO Message／Company Profile／History）に当てる。
 *     実測（2026-09-17）：`.recruit-main` の直下は 帯 → `.recruit-panel` ×5 → `.recruit-cta`。
 *
 *   ※**広げたのは「位置（中央揃え）」だけ。** 同じ2026-09-15の
 *     「パネルの高さ292px」と「節の上下10vh」は**Work Style の1節に限定したまま**にしてある
 *     （岡田さんの回答＝この2つは「当てるページだけ見ながら」判断する、2026-09-17）。
 *     残り4節に動画カードは無いので、292px はそもそも当たる先が無い（実測：3693の
 *     インライン `min-height:320px` は Work Style の4枚だけ）。
 *
 * ■ 見出しの下の飾り（青ティック）は**消さずに中央へ寄せる**
 *   岡田さんが言ったのは「位置」であって、装飾を消すとは言っていない。
 *   作り＝`.recruit-section-head h3.wp-block-heading` の `::before` が `left:0 / width:30px`、`::after` が `left:35px / width:3px` ＋
 *   `box-shadow` で +8px・+16px の点。**飾り全体は見出しの左端から 0〜54px**（30/35-38/43-46/51-54）。
 *   h3 は幅いっぱいのブロックなので、`text-align:center` にしても**線だけ左端に残る**。
 *   → `left` の2値だけ差し替えて、塊ごと 27px 左へ寄せる（54の半分）。
 *   **`left` 以外は再宣言しない**（色・太さ・`box-shadow` を書き直すと、このファイルが過去に3回踏んだ
 *   「片方だけ上書きして点が残る」を自分から作ることになる）。
 *   ※**線が要らないと分かったら、この2行を `display:none` に差し替えるだけでよい。**
 *
 * ■ カードは「中の文字の text-align」だけで届く
 *   覆い（`span.wp-block-cover__background`・濃赤）と `<video>` は
 *   `.wp-block-cover__inner-container` の**兄弟**なので、中の text-align は両方に影響しない。
 *   カード自体は元から `display:flex` / `align-items:center` / `justify-content:center`（実測）で
 *   **箱の中では既に中央**。左だったのは文字だけ。
 *   継承は直接指定に負けるので、container と中の h4・p を明示して書く（このファイルのカード内の色指定と同じ形）。
 *
 * ■ この変更は**縦を1pxも動かさない**（動いていたら書きすぎ）。
 *
 * ■ 戻し方＝このブロックを削除する。
 *   **「ページの1節目だけ中央」（＝2026-09-15 の形）に戻したい場合**は、
 *   このブロックの「ここから／ここまで」の範囲で
 *   `.recruit-main > .recruit-panel` を `.recruit-main > .recruit-hero + .recruit-panel` に
 *   **範囲まるごと全置換する**（ブロックごと消す必要はない）。
 *   ※**行数を数えて直さないこと**（点検役の指摘 2026-09-17）。
 *     カンマ区切りで1つの宣言に複数セレクタが入っており、**対象ページが増えるたびに行数も増える**。
 *     「n行直したから終わり」だと必ず取りこぼす。**範囲指定の全置換か grep で確認すること。**
 *
 * ■ **特定の1ページだけ外す**場合は、「2026-09-15 会社を知るの帯をコーポレートに揃える」ブロックの「■ 1ページだけ外す手順」を読むこと。
 *   ここだけ直しても、そのページの帯と余白は揃ったままになる。 */
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-section-head {
	text-align: center;
}
/* ラベルは `.recruit-section-label` が `text-align: left` を持っているので、親の center が届かない（帯でも踏んだ罠） */
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-section-head .recruit-section-label {
	text-align: center;
}
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-section-head .recruit-hero-lead {
	text-align: center;
}
/* 飾りの塊（0〜54px）を中央へ。left 以外は触らない */
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-section-head h3.wp-block-heading::before {
	left: calc(50% - 27px);
}
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-section-head h3.wp-block-heading::after {
	left: calc(50% + 8px);
}
/* カードの中の文字（覆い・動画には触れていない）。
 *
 * ★2026-09-17 夕：**当たる先が増えた。** 以前ここに「3693 Work Style の4枚のまま」と書いていたが、
 *   同日に **3772「仕事を知る」の『各職種ページで開示する情報』の6枚を動画カードにした**ため、
 *   いまは **3693の4枚 ＋ 3772の6枚 ＝ 10枚**に当たっている
 *   （3772も `gasp_recruit_corp_aligned_ids()` に入っているので `body.recruit-corp-aligned` が付く）。
 *
 * ★**3772の6枚の中央揃えは、このルールに依存している。**
 *   岡田さんの回答「中央のままでよい」を、3772側に何も書かずにこのルールで満たしている。
 *   ＝**このブロックを削除したり、`.recruit-main > .recruit-hero + .recruit-panel` に戻したりすると、
 *   3693だけでなく3772の6枚も予告なく左揃えに戻る。**
 *   3693側を戻すときは、3772の6枚をどうするかを必ず一緒に決めること（点検役の指摘 2026-09-17）。 */
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-video-card .wp-block-cover__inner-container,
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-video-card .wp-block-cover__inner-container h4,
body.recruit-corp-aligned .recruit-main > .recruit-panel .recruit-video-card .wp-block-cover__inner-container p {
	text-align: center;
}
/* ===== 2026-09-15 会社を知る「私たちの仕事の流儀」の節をコーポレートに揃える（位置のみ） ここまで ===== */

/* ===== 2026-09-15 仕事の流儀のパネルの高さをコーポレートに合わせる ここから =====
 *
 * ■ 岡田さんの指摘（2026-09-15・位置を揃えた画面を見て）
 *   「サイズ感とか、余白が違うなあ。
 *    コーポレートは文章があって、これを先に読ませてパネルがあるって感じじゃん。
 *    でも、採用サイトは文字はおまけで何なら見なくてもよくて、パネルが主体、って感じがする」
 *
 * ■ 何がそう見せていたか（実測・2026-09-15・幅1367）
 *
 *   | | コーポレート | 採用（変更前） |
 *   |---|---|---|
 *   | 節全体の高さ | 488px | 803px |
 *   | パネルの前に読む文字 | 173px（説明2行16px＋小見出し22px） | 115px（実質1行8文字15px） |
 *   | パネルの面積 | 292px（1行） | 664px（320px×2行＋余白24px） |
 *   | 節に占めるパネルの比率 | **60%** | **86%** |
 *   | パネルの中身 | 白地で**全部が文字**（内側の余白40px） | 動画で**文字は79px＝カードの25%**（内側の余白15px） |
 *
 * ■ 岡田さんが選んだ対処＝**「パネルを小さくする（320→292px）」の1つだけ**
 *   選ばなかったもの（＝やらない）：文字サイズと余白を揃える（15→16px・15→40px）／
 *   読ませる文章を足す（本文の変更になる）／揃えない。
 *   **文字サイズ・余白・文言・列数・地・動画は触っていない。**
 *
 * ■ なぜ `!important` が要るか
 *   この高さは本文（post_content）の**インライン指定**（`style="…min-height:320px;…"`）で、
 *   CSSのセレクタでは詳細度をいくら上げても勝てない（実測でstyle属性を確認）。
 *   本文を書き換えるスクリプトを走らせる手もあるが、**このブロックの削除1手で戻せる**ほうを採った。
 *
 * ■ 当てるのは「帯の次のパネル」1節だけ（位置揃えのブロックと同じ絞り）。
 *   他ページ（3772/3792 等）の動画カードは320pxのまま。
 *
 * ■ 戻し方＝このブロックを削除する（320pxに戻る）。 */
body.page-id-3693 .recruit-main > .recruit-hero + .recruit-panel .recruit-video-card {
	min-height: 292px !important;
}
/* ===== 2026-09-15 仕事の流儀のパネルの高さをコーポレートに合わせる ここまで ===== */

/* ===== 2026-09-15 仕事の流儀のパネルの上（節見出しまわり）の文字をコーポレートに合わせる ここから =====
 *
 * ■ 岡田さん指示（2026-09-15）
 *   「パネルの文字はともかく、パネル上の余白と文字はコーポレートの例示に揃えてほしい」
 *   ＝**パネルの中（カード）の文字は対象外**で、**パネルの上に置かれている文字と余白**を揃える。
 *
 * ■ 測ってみると、違っていたのは**リード文の大きさ1点だけ**だった（実測 2026-09-15・幅1367）
 *
 *   | | 採用（変更前） | コーポレート |
 *   |---|---|---|
 *   | 節見出し | 26px / 600 / 行間37.7 | **同じ** |
 *   | 見出し→リード | 24px | **24px（同じ）** |
 *   | リード文 | **15px / 行間23.25** | **16px / 行間24.8** |
 *   | リード→パネル | 24px | **24px（同じ）** |
 *
 *   15pxは継承値。出どころは `wp-content/uploads/blogsy/dynamic-styles.css` の
 *   `body { font-size: 15px }`（カスタマイザ生成・**px固定**）で、`.recruit-panel` 側には
 *   `font-size` の指定が無い（CSSOMを走査して特定。29枚中、外部フォントの1枚だけが読めず、
 *   それ以外は全部読めている＝「0件」ではなく「読めたうえで1件」）。
 *   **行間は倍率（1.55）で持っているので、大きさを合わせれば行間も追随する**＝`line-height` は書かない。
 *
 * ■ ★コーポレートの16pxは固定値ではない（帯の左右55pxと同じ形）
 *   実測（2026-09-15）：clientWidth 1367 で **16px**（ルート10px）／995 で **13.568px**（ルート8.48px）。
 *   ＝向こうは **1.6rem** で持っていて、幅に応じて縮む。
 *   `font-size: 16px` と固定すると**1367px幅でしか一致しない**ので、同じ `1.6rem` で書く。
 *   ※このファイル前半の「rem は使わない（ルートが10pxになる罠）」と逆向きになるが、
 *     ここは**向こうが rem で持っている値を写すのが目的**。固定すると上の13.568pxとずれる。
 *
 *   **副作用（実測・承知のうえ）**：採用サイトの他の文字は px 固定なので、
 *   1367px幅では リード16px ＞ カード本文15px だが、995px幅では リード13.57px ＜ カード本文15px となり
 *   **大小が逆転する**。コーポレートに揃えることを優先した。
 *   固定にしたい場合は `1.6rem` を `16px` に戻せばよい（この1行だけ）。
 *
 * ■ 揃えられないもの（**文言の話なので触らない**）
 *   コーポレートはこの位置に**説明2行（16px）＋小見出し（22px）**があるが、採用は**1行8文字**
 *   （「価値観から行動へ」）。文章を足すのは本文の変更になるので、今回はやらない。
 *   ラベル「Work Style」はコーポレートに無いが、**消すのは文字サイズでも余白でもない**ので残した。
 *
 * ■ 戻し方＝このブロックを削除する（15pxに戻る）。 */
body.page-id-3693 .recruit-main > .recruit-hero + .recruit-panel .recruit-section-head .recruit-hero-lead {
	font-size: var(--gasp-fs-16);
}
/* ===== 2026-09-15 仕事の流儀のパネルの上（節見出しまわり）の文字をコーポレートに合わせる ここまで ===== */

/* ===== 2026-09-15 仕事の流儀の節の上下の余白をコーポレートに合わせる ここから =====
 *
 * ■ 岡田さん指示（2026-09-15）
 *   「パネル上部の文章部について、その上と下のパネルの余白をコーポレートサイトと同様に開けてみて」
 *
 * ■ コーポレートの節の上下（実測 2026-09-15・幅1367・窓の高さ900）
 *   `.single-content-inner` の直下は〈節〉〈スペーサー〉〈節〉〈スペーサー〉…の並びで、
 *   スペーサーは **`style="height:10vh"`＝この窓で90px**。節そのものに padding は無い
 *   （節の上端＝見出しの上端、節の下端＝カード行の下端。実測とも0px）。
 *   ＝**節と節の間は上下とも10vh**。
 *
 *   | | コーポレート | 採用（変更前） |
 *   |---|---|---|
 *   | 文章部の上 | 10vh（90px） | **14px** |
 *   | 文章部→パネル | 24px | 24px（すでに一致・触らない） |
 *   | パネルの下（次の節まで） | 10vh（90px） | **56px** |
 *
 * ■ **`vh`（窓の高さ基準）で写す。** 向こうが `10vh` で持っているので、
 *   90px と固定すると窓の高さが違う環境でずれる（帯の左右・リード文と同じ形の罠）。
 *
 * ■ ★上の14pxは 2026-09-06 に岡田さん自身が決めた値
 *   「アイキャッチの下はもっと余白を小さくしていい。今の4分の1くらい」＝56→14px
 *   （「2026-09-06 アイキャッチの下の余白を詰める」ブロック）。9/15の指示でこれを上書きしている。
 *   そのブロック自体は消していないので、**このブロックで当てていないページは14px／56pxのまま**。
 *   （※2026-09-15 の時点では「帯の次の1節だけ」上書きしていたので、
 *     **当てたページでも2節目以降は56pxのままだった**。下の 2026-09-17 でそこが変わっている。）
 *
 * ■ ★2026-09-17 に 3786 を追加し、**ページ内の全節へ広げた**
 *   他ページへ広げるかの確認への回答＝「**当てるページだけ見ながら**」（岡田さん 2026-09-17）。
 *   → 3786 を追加。
 *
 *   そのうえで、3786を当てた画面を見た岡田さんの回答＝「**全節を10vhに揃える**」（2026-09-17）。
 *   → 絞りから `.recruit-hero + ` を外し、**当てたページの全節**に当てる。
 *     これで節と節の間もコーポレートと同じ 10vh になる（向こうは〈節〉〈10vhスペーサー〉の繰り返し）。
 *   ※**当てていないページは 14px / 56px のまま**（「2026-09-06 アイキャッチの下の余白を詰める」の9/6ルールは消していない）。
 *   ※`.recruit-cta`（最後の節の下）には当てていない＝要求に無いため。
 *
 *   ※**最後の節→CTA の間隔を測ると190pxに出るが、レイアウト上の余白は他と同じ90px。**
 *     差の100pxは CTA に掛かっている `transform: matrix(1,0,0,1,0,100)` で、出どころは
 *     `aos.min.css` の `html:not(.no-js) [data-aos="fade-up"] { transform: translate3d(0,100px,0) }`
 *     （**実行時にAOSのJSが `data-aos="fade-up"` を付けている**。本文のHTMLには `aos-fade-up`
 *     というクラスしか無いので、PHP側のソースを見ても分からない＝実際のDOMで確かめること）。
 *     変更前の156pxも同じ理由で 56+100 だった。**margin ではないので、ここを直そうとしないこと。**
 *     ※**未確認＝この100pxが実機のスクロールで解除されるか。**
 *       解除側の `[data-aos^="fade"].aos-animate { opacity:1; transform:none }` は存在し、
 *       セレクタも一致している（実測）。ただし `aos-animate` を付けても計算値が変わらないため、
 *       **ブラウザペインが非表示だとフレームが出ずtransitionが進まない**という既知の制約に当たっている。
 *       実機（ペインを表示した状態か、実ブラウザ）で目視すること。なお**今回の変更とは無関係**
 *       （変えたのは margin だけで、CTAには何も当てていない）。
 *
 *   **戻し方（このブロックだけ「帯の次の1節」に戻す）**＝下のセレクタに `.recruit-hero + ` を書き戻す。
 *
 * ■ 下は `.recruit-panel` の `margin-bottom: 56px` を上書きする。
 *   効くのはこの節と次の節（Trust）の間だけ。
 *
 * ■ 戻し方＝このブロックを削除する。**戻り先は節の位置で違う**（点検役の指摘 2026-09-17）：
 *   - **帯の次の1節目**＝上 **14px**（「2026-09-06 アイキャッチの下の余白を詰める」の `.recruit-hero + *`）・下 56px
 *   - **2節目以降**＝上下とも **56px**（`.recruit-panel` の基本ルール `margin: 56px auto`）
 *     ＝「全部が上14px・下56pxに戻る」ではない。14pxは帯の直後の1個にしか効かない。
 *   **「帯の次の1節だけ10vh」（＝2026-09-15の形）に戻す**なら、下のセレクタに `.recruit-hero + ` を書き戻す。
 *   **特定の1ページだけ外す**場合は、「2026-09-15 会社を知るの帯をコーポレートに揃える」ブロックの「■ 1ページだけ外す手順」を読むこと。 */
body.recruit-corp-aligned .recruit-main > .recruit-panel {
	margin-top: 10vh;
	margin-bottom: 10vh;
}
/* ★2026-09-17 追加：**帯の次が「節」でないページ**（95105〜95108 インタビュー4本）
 *
 * このページは `.recruit-main` の直下が 帯 → 素の `<p>`（`.recruit-quote`）→ … という並びで、
 * 上のルールが `.recruit-panel` だけを対象にしているため引用段落には当たらず、
 * 「2026-09-06 アイキャッチの下の余白を詰める」の9/6ルール（`.recruit-hero + *` ＝ 14px）がそのまま効いていた
 * ＝**このページだけ帯の下が14pxで、他の10ページは90px**（実測 95108＝14/90/90…）。
 *
 * 岡田さんの回答（2026-09-17・実測を見せたうえで）＝「**90pxに揃える**」。
 * 引用段落は「節」ではないので、上のルールを広げず**ここに1つ足す**（節の下側10vhは足さない
 * ＝引用と次の要素の間隔は今のまま。要求は「帯の次」の話だったため）。
 *
 * 詳細度＝(0,3,2) で 9/6ルール (0,3,0) に勝つ。
 * 戻し方＝この1ルールを削除する（インタビュー4本だけ帯の下が14pxに戻る）。 */
body.recruit-corp-aligned .recruit-main > .recruit-hero + p {
	margin-top: 10vh;
}
/* ===== 2026-09-15 仕事の流儀の節の上下の余白をコーポレートに合わせる ここまで ===== */

/* ===== 2026-09-17 Trustの3枚を横に並べる ここから =====
 *
 * ■ 岡田さん指示（2026-09-17・白いバー3枚が縦に並んだ画面を見ながら）
 *   「ここのパネルは、3枚横にならべる方式にして」
 *
 * ■ 3枚は節の**直接の子**で、横に並べる入れ物が本文側に無い（実測）。
 *   3枚を1行にする権限は親（パネル）の formatting context にしかないので、
 *   **パネルを grid にする**。DBは触らない。
 *   `inline-block`/`float` 案は却下＝**文字数が20/25/29字で違うので高さが揃わない**うえ、
 *   パネルがBFCを作っていないので float が次の節へ抜ける。grid なら等高が既定。
 *
 * ■ ★必ず踏む罠＝WPコアの auto マージン
 *   `.is-layout-constrained > :where(...)` が `margin-left/right: auto !important` を出しており、
 *   **詳細度をいくら上げても勝てない**
 *   （「2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ）」ブロックに実測記録）。
 *   grid アイテムに両側 auto が乗ると **stretch をやめて内容幅に縮み、セルの中で中央に浮く**
 *   ＝ 2026-09-04 に `.recruit-icon-card` で踏んだ「本文が文字数ぶんに縮む」と同じ事故が grid の姿で再発する。
 *   しかも**3枚が違う幅で中央に浮く**＝一見それらしく見えて崩れている側に出る。
 *   → **直接の子の左右マージンを 0 に打ち返す**
 *     （同じ形の前例＝「2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ）」ブロックの
 *      `.recruit-hero .recruit-hero-lead, …, .recruit-timeline, …` に `margin-left: 0 !important` を並べている規則）。
 *     `width` で殴らない＝カードは内側に30pxの padding を持っているので、はみ出しを自分で作る。
 *
 * ■ 節の名指しに `:has(> .recruit-icon-item)` を使う理由
 *   3枚を持つパネルを指す目印が本文側に無い。`:nth-child()` だと**節の順番が変わった瞬間に
 *   CEO節が3列になる**＝明確に壊れた画面が出る。`:has()` なら**効かない環境では縦積みのまま**
 *   ＝2026-09-17より前の画面に戻るだけで崩れない。「効かない＝現状維持」を選んだ。
 *   ※`:is()` は 2026-09-17 に却下しているが、あちらは**効かないと14ページが同時に崩れる**側だった。
 *     失敗の大きさが違うので判断が逆になる。
 *   ※**未確認＝岡田さんのブラウザが `:has()` に対応しているか。** 非対応でも見えるのは今日の画面。
 *     検証環境や公開に載せる段になったら、本文側にクラスを1語足す（DB変更）へ切り替える判断が要る。
 *
 * ■ 列の隙間だけ 24px を書く。**行の隙間は書かない**
 *   WPコアの block-gap が既に24pxを縦に持っている（実測で検算済み：
 *   Trust節 448 = 115 + 3×(24+87)）。両方書くと48pxになる。
 *
 * ■ 768px以上だけ。767px以下はパネルの中身が335pxしかなく、3列だと1列95.7px
 *   （内側のpadding 60pxを引いて文字幅35px＝2字）で成立しない。
 *   768は corp-aligned ブロックが使っている既存の境界＝**新しい閾値を増やさない**。
 *
 * ■ 3693固有。`body.recruit-corp-aligned`（14ページ共通）には入れない。
 *   ★**`functions.php` の `gasp_recruit_corp_aligned_ids()` から3693を消しても、このブロックは残る**
 *     （絞りが別だから）。「1ページ外す手順」を実行した人が外れ残りを踏まないように。
 *
 * ■ 戻し方＝このブロックを削除する（3枚が縦に戻る）。 */
@media (min-width: 768px) {
	body.page-id-3693 .recruit-panel:has(> .recruit-icon-item) {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: var(--gasp-sp-24);
	}
	/* ★WPコアの `margin-left/right: auto !important` を打ち返す。
	 * これが無いと3枚が文字数ぶんに縮んでセルの中で中央に浮く（9/4に踏んだ事故の再発）。
	 * 見出しと3枚を同じ絞りに入れて、**効くときは全部効き、効かないときは全部効かない**ようにする */
	body.page-id-3693 .recruit-panel:has(> .recruit-icon-item) > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
		/* ★`min-width: 0` が無いと 768px幅で崩れる（実測 2026-09-17）。
		 * grid アイテムの `min-width` の既定は `auto`＝**中身より狭くならない**ので、
		 * 幅が足りないと `1fr` を無視してトラックが広がる。
		 * 実測（viewport 768・clientWidth 753）：3枚が **249 / 194 / 225px** とばらばらになり、
		 * **横に15pxあふれた**。1367pxでは中身が収まるので気づけない＝**狭い幅でだけ出る**。
		 * ※2026-09-04 に `.recruit-icon-card` で `flex: 1 1 auto; min-width: 0` を入れたのと同じ話。
		 *   flex と grid で同じ既定（`auto`）を持っているので、同じ対処が要る。 */
		min-width: 0;
	}
	/* 見出しは全列にまたがらせる。書かないと見出しが1列目に入って3枚が2列目以降へ散る */
	body.page-id-3693 .recruit-panel:has(> .recruit-icon-item) > .recruit-section-head {
		grid-column: 1 / -1;
	}
}
/* ===== 2026-09-17 Trustの3枚を横に並べる ここまで ===== */

/* ===== 2026-09-17 代表メッセージと会社概要の白いカードの幅 ここから =====
 *
 * ■ 岡田さん指示（2026-09-17・白いカードが全幅で並んだ画面を見ながら）
 *   「ここは二つともパネルの幅を半分にして」
 *   ＋ 確認への回答＝「**白い箱だけ半分**」／「**中央**」
 *
 * ■ 「パネル」が指しているもの
 *   `.recruit-panel` は 2026-09-01（段4）から `background: transparent` で**画面に見えていない**。
 *   岡田さんが画面を見ながら「パネル」と呼べる白い面は**中の白カードだけ**なので、そちらに当てる。
 *   節の枠に当てると見出しも注記も半分になり、**9/15に決めた「帯と本文の左端55px揃え」を自分で壊す**。
 *
 * ■ 当てる先＝「見出しの直後にある白カードで、`.recruit-icon-item` ではないもの」
 *   これで **CEO Message と 会社概要の2枚だけ**が取れる
 *   （Work Styleの次は `.wp-block-columns`、沿革は `.recruit-timeline` なので当たらない。
 *    Trustの3枚は `has-card-bg-background-color` を持つので `:not(.recruit-icon-item)` が要る）。
 *   岡田さんが「**ここは二つとも**」と1つの指示にまとめているので、**指定も1本にする**
 *   （節ごとに書くと、片方だけ直した中間状態を作れてしまう）。
 *
 * ■ `box-sizing` を同じ規則に並べて書く
 *   このテーマは `box-sizing` を全体には当てておらず、必要な箇所に個別に書いている
 *   （例＝`.recruit-hero, .recruit-panel` と
 *    `.recruit-card-grid > .wp-block-column > .wp-block-group.has-card-bg-background-color`。
 *    ※ここは一度、別のセレクタを書いて点検役に指摘された 2026-09-17）。
 *   並べて書けば**現在値がどちらでも結果は621pxで同じ**になり、確認そのものが要らなくなる。
 *
 * ■ 中央＝幅を書くだけでよい
 *   WPコアの `margin-left/right: auto !important` がそのまま中央に寄せる（追加指定ゼロ）。
 *   左に寄せたくなったら `margin-left: 0 !important` を1行足す
 *   （「2026-09-02 採用4ページ 是正（constrainedレイアウトの中央寄せ）」ブロックと同じ手）。
 *
 * ■ 半分にしても節は縮まない（設計役の算定）
 *   会社概要の見出し列（`.recruit-deflist-label`）は `flex: 0 0 128px` の**固定で縮まない**ので、
 *   カードが50%になっても**値の列は1038→417px＝40%**になる。
 *   結果、事業内容の行が増えて**節はむしろ伸びる**。実測値は作業まとめに書く。
 *
 * ■ 768px以上だけ。767px以下は半分にすると167pxで成立しない。
 *
 * ■ CEO節の注記（`p.recruit-draft-note`）は**触っていない**＝全幅のまま。
 *   要求に無いため（★岡田さんの判断待ち）。
 *
 * ■ 戻し方＝このブロックを削除する（全幅に戻る）。
 *   **その場合、下の「沿革の左端を…揃える」ブロックも一緒に消すこと**（左端の基準が消えるため）。 */
body.page-id-3693 {
	/* 白カードの幅。**このブロックと「沿革の左端を…」ブロックの両方が参照する。**
	 * 幅を変えるときはここだけ直せば、沿革の左端も追随する。
	 * ※この宣言を消すと（変数が未定義になると）、参照している `width` と `margin-left: calc(…)` の
	 *   **宣言が無効になり、そのプロパティは初期値に解決される**（`width` は `auto`＝結果として全幅、
	 *   `margin-left` は `0`）。＝**カードは全幅・沿革は左端55px＝どちらも2026-09-17より前の見た目に戻る。**
	 *   片方だけ壊れることは無いので、安全側に倒れる。
	 *   （「別のルールにフォールバックする」のではなく「初期値に戻る」。たまたま結果が一致している
	 *    ＝点検役の注記 2026-09-17） */
	--gasp-about-card-w: 75%;
}
@media (min-width: 768px) {
	body.page-id-3693 .recruit-panel > .recruit-section-head + .has-card-bg-background-color:not(.recruit-icon-item) {
		/* ★2026-09-17 50% → 75%（岡田さん「ごめん、半分だと細すぎた、現状の1.5倍にして」）
		 * 「現状」＝半分にした直後の 621px。その1.5倍＝**931.5px**＝パネルの **75%**。
		 * ※**1242px は固定値ではない。** パネルの幅は `width: calc(100% - 3rem - 80px)` の可変で、
		 *   1242px は clientWidth 1352 で測った値の1つ。だから px ではなく % で書いている。
		 * 半分にしたときの実測＝CEOカード 621/479・会社概要カード 621/593（事業内容が2行→3行）。
		 * 75%にした実測＝CEOカード 931.5/436・会社概要カード 931.5/566（事業内容が2行に戻った）。
		 *
		 * ★**幅は直接書かず変数で持つ。** 下の「沿革の左端を…揃える」ブロックが
		 *   **この幅から左端を計算している**ので、ここに数値を直接書くと、
		 *   次に幅を変えたときに沿革だけ黙ってずれる（今日すでに50%→75%と1回変わっている）。 */
		width: var(--gasp-about-card-w);
		box-sizing: border-box;
	}
}
/* ===== 2026-09-17 代表メッセージと会社概要の白いカードの幅 ここまで ===== */

/* ===== 2026-09-17 沿革の左端を会社概要の値の列に揃える ここから =====
 *
 * ■ 岡田さん指示（2026-09-17・沿革が左端に、上のカードが中央にある画面を見ながら）
 *   「沿革も左端を、上部パネルの『プライバシーマーク・・・』に揃えて」
 *   ＝会社概要カードの**値の列**（「プライバシーマーク、Microsoft Partner」が始まる位置）に、
 *     沿革のタイムラインの左端を合わせる。
 *
 * ■ 実測（2026-09-17・clientWidth 1352）
 *   会社概要の値の列  … x = **384.3**
 *   沿革のタイムライン … x = **55**（幅720・`max-width: 720px`・margin 0）
 *   → ずらす量 **329.25px**
 *
 * ■ ★値ではなく式で書く（9/15の教訓「値ではなく式を写す」と同じ）
 *   329.25 の内訳＝
 *     カードが中央に寄る分  (100% − カード幅) ÷ 2 ＝ (1242 − 931.5) ÷ 2 ＝ 155.25
 *   ＋ カードの内側 padding                              30
 *   ＋ 見出し列（`.recruit-deflist-label` の `flex: 0 0 128px`） 128
 *   ＋ 見出し列と値の列の隙間（`gap`）                    16
 *   ＝ 155.25 + 174 = **329.25** ✓（実測 384.3 − 55 = 329.3 と一致）
 *
 *   **カード幅は `--gasp-about-card-w` を参照する。** 数値で書くと、次にカードの幅を変えたときに
 *   **沿革だけ黙ってずれる**（今日すでに 50% → 75% と1回変わっている）。
 *   ※174px のほう（30 + 128 + 16）は変数になっていない。**変えたらここも直すこと。**
 *     3つとも出どころを書いておく（点検役の指摘＝どこを見れば分かるかが辿れないと、
 *     変えた人がここを直す必要に気づけない）：
 *       **30** … カードの内側 padding。**CSSではなく本文のインライン指定**で、
 *                `recruit_rebuild/update_page_3693_about.php` の `$card` 変数
 *                （`padding-top:30px; …` を4辺に出している）。**ブロックエディタ側で余白を変えても動く。**
 *       **128** … `.recruit-deflist-label` の `flex: 0 0 128px`（このファイル内）
 *       **16** … `.recruit-deflist-row` の `gap`（このファイル内）
 *
 * ■ 768px以上だけ。767px以下はカードが全幅（335px）なので、ずらす基準そのものが無い。
 *
 * ■ 触るのは `margin-left` だけ。**幅（`max-width: 720px`）は変えていない**
 *   ＝右端は 384.3 + 720 = 1104.3 でパネル（〜1297）に収まる。
 *
 * ■ ★`!important` が要る（付けずに書いて1回外した・実測）
 *   `.recruit-timeline` は、**WPコアの `margin-left/right: auto !important` を潰すための既存の打ち返し**
 *   （`.recruit-hero .recruit-hero-lead, …, .recruit-timeline, …` の
 *   `margin-left: 0 !important` を並べているルール）の対象に入っている。
 *   詳細度をいくら上げても `!important` には勝てないので、こちらも `!important` にする。
 *   ＝**`!important` を外すと、画面は何も変わらない**（沿革が左端55pxのまま）。
 *
 * ■ 戻し方＝このブロックを削除する（沿革が左端55pxに戻る）。 */
@media (min-width: 768px) {
	body.page-id-3693 .recruit-panel > .recruit-timeline {
		margin-left: calc((100% - var(--gasp-about-card-w)) / 2 + 174px) !important;
	}
}
/* ===== 2026-09-17 沿革の左端を会社概要の値の列に揃える ここまで ===== */

/* ===== 2026-09-17 キャリアの伸ばし方：列見出しを中央＋カードに画像を敷く ここから =====
 *
 * ■ 岡田さん指示（2026-09-17・「キャリアの伸ばし方」の2列×3枚の画面を見ながら）
 *   「ここの見出しは真ん中でいいのではないかな。
 *     あと、同じ考えでフリーの画像を落としてきて、このパネルにはめて欲しい。」
 *   確認への回答＝「**カード6枚に1枚ずつ**」「**白地のままうっすら敷く**」
 *   ※**この「白地のままうっすら」は同日に撤回された**（下の「★2026-09-17（3回目）」）。
 *     いまの形＝**動画カードと同じ濃い覆い＋白文字**。以下はそこに至るまでの経緯として残している。
 *
 *   1枚だけ当てた画面を見せたあとの指示：
 *   「**ごめん、パネルサイズはこれとそろえよう。画像はちょっと薄いかな。。。**」
 *   （「これ」＝同じページの「各職種ページで開示する情報」の動画カード＝**高さ320px**）
 *   → **高さ 100px → 320px**、**白ベール 0.85 → 0.70**。
 *   ※高さの初回の回答は「100pxのまま」だったが、**画面を見て変わった**。
 *     幅は609pxのまま（列の作りが違うので、動画カードの398pxには揃わない）。
 *
 * ■ 見出しの中央揃えに **`body.page-id-3772` の絞りが要る**
 *   `.recruit-col-heading` は3772の2つ（「小さな組織だからこそ」「キャリアパス例」）だけでなく、
 *   **3792「人を知る」のヒーローにもH2で1つある**（設計役が現物で確認）。
 *   無条件に `text-align: center` を書くと、**頼まれていない別ページのリード見出しが動く**。
 *
 * ■ 画像は **CSSの背景**で敷く（DBは触らない）
 *   動画のときは「再生する要素」が要るので本文（post_content）を書き換えたが、
 *   **画像なら本文を触らずに同じ絵が出る。触る面が少ないほうを選ぶ**（設計役の比較）。
 *   `.recruit-icon-card` は**このページに6個だけ**＝キャリア節の6枚（実測 2026-09-17。
 *   「各職種ページで開示する情報」の6枚は同日に `wp:cover` へ置き換えたので、このクラスを持たない）。
 *
 * ■ ★2026-09-17（3回目）**動画カードと同じ「濃い覆い＋白文字」にした**
 *   岡田さん（この節の画面と、同じページの動画カードの画面を並べて）：
 *   「**この画像は、白くぼかすんじゃなくて、動画のようにグレーアウトのようにして
 *     フォントもそろえてほしいって言ったんだが。**」
 *   ＝**明るいグレーの幕を薄く敷く形は「グレーアウト」になっていなかった。**
 *   揃える相手は同じページの動画カード（`.recruit-video-card`・2155行〜）なので、**そこと同じ値を使う**：
 *     覆い ＝ `var(--recruit-footer-ground)`（#361116 ＝ `rgb(54,17,22)`）の **60%**（10/1 から変数の値は #081c28＝rgb(8,28,40)）
 *     文字 ＝ **白 `#fff`**
 *     大きさ ＝ **h4 2.2rem ／ 本文の上マージン 2.4rem**（下の「■ 文字を動画カードに揃える」）
 *   この節でやり直した3つ：①白ベール0.70＋濃い文字 → ②グレー220 0.75＋濃い文字（今回否定された）
 *   → ③これ。①②のコントラスト表は**方向が逆（薄いほど危ない）で混乱のもと**なので残していない。
 *   ※**画像をモノクロに焼いてあるのは②のときの解釈**（`format=gray`）。今回の発言（「グレーアウト」）
 *     とも食い違わないので戻していない。色に戻すなら ffmpeg の `format=gray` を外して焼き直すだけ。
 *
 * ■ ★白文字のコントラストは**実測した**（2026-09-17・`format=gray` 済みの6枚の現物）
 *   合成 ＝ `0.6 × #361116 + 0.4 × 画像`（グラデが画像の上に乗る、CSSの重ね方そのまま）。
 *   白文字との比を ①最悪の1画素 ②文字が乗る中央帯（縦20〜80%）の 8x8 ブロック平均の最悪 で出した。
 *   測定スクリプトは使い捨て（`measure_band_contrast.py` は**動画の帯用で、この形は測れない**）。
 *
 *   | 覆いの濃さ | 1画素の最悪（6枚中） | 中央帯8x8の最悪 | AA(4.5:1) |
 *   |---|---|---|---|
 *   | 0.55 | 3.90 | 3.91 | **割る** |
 *   | **0.60（採用＝動画カードと同値）** | **4.57** | **4.58** | **満たす** |
 *   | 0.65 | 5.39 | 5.40 | 満たす |
 *   | 0.70 | 6.40 | 6.41 | 満たす |
 *
 *   **6枚のうち4枚に純白の画素がある**（裁量＝ホワイトボード／一気通貫＝天井／学び＝書架／リード＝連なるブロック。
 *   PM＝ネットワークは 4.62、スペシャリスト＝回路だけ暗くて 9.52）ので、
 *   **1画素の最悪＝「画像が真っ白だったとき」の値と一致している**（0.60 で 4.57:1）。
 *   ＝**この 4.57:1 は画像の中身に依存しない下限**で、画像を差し替えても下回らない。
 *   **★ただし余裕は 0.07 しかない。** 覆いを薄くする／覆いの色を明るくすると即AAを割る（0.55 で 3.90）。
 *     **「もう少し画像を出したい」と言われたら、薄くするのではなく覆いの色を暗くして測り直すこと。**
 *     安全側に振るだけなら 0.65（5.39）だが、**動画カードと同じ値ではなくなる**（＝今回の指示から外れる）。
 *
 * ■ ★画像が404になっても読める（前の版からの改善。点検役の指摘 2026-09-17 への回答）
 *   グラデは `background-image` の1枚目なので、**url が落ちてもグラデだけは描かれる**。
 *   下はカードの白（`has-card-bg-background-color`）なので、合成は「画像＝純白」と同じ＝**4.57:1**。
 *   ダークテーマ（`--pt-card-bg: #272c31`）のときも計算した＝合成 `rgb(48,28,33)` で **16.01:1**
 *   （点検役の指摘で、ここだけ数値なしの断定だったので計算した 2026-09-17）。
 *
 * ■ ★`--gasp-career-veil` の**宣言だけを消すと、覆いも画像も消えて白地に白文字**になる（点検役の指摘 2026-09-17）
 *   `var()` が未定義だと `background-image` は**宣言ごと無効**になり、文字色の `#fff` だけが残るため。
 *   ＝**404（グラデは残る）より悪い壊れ方**なので、6か所の `var()` に**同じ値をフォールバックとして書いてある**。
 *   **値を変えるときは宣言（`--gasp-career-veil`）のほうを変える**（フォールバックは宣言が消えたときの保険で、
 *   宣言がある限り使われない）。両方そろえて直す必要はないが、**宣言ごと消すなら6か所も一緒に消すこと**。
 *
 * ■ 画像は**先に切り出してある**（`cover` 任せにしない）
 *   カードは **609x213＝比 2.859:1**。ffmpeg 1コマンドで
 *   `crop=iw:iw/2.859`（中央）→ `scale=1218:426` → `format=gray` に揃えてある
 *   ＝**ディスク上の絵＝画面に出る絵**。6枚合計 **508KB**。
 *   **★高さを変えるたびに比が変わるので切り出し直すこと**：
 *     100px → 6.09:1（279KB）／320px → 1.903:1（761KB）／**213px → 2.859:1（508KB・現行）**。
 *   出所とライセンスは `素材\採用サイト_仕事を知る_カード画像_出所メモ_20260917.md`。
 *
 * ■ 6枚の割り当て（**位置指定なので、カードを増減すると黙ってずれる**。増減したらここを見直す）
 *   左列（小さな組織だからこそ） 1:裁量=ホワイトボード 2:一気通貫=天井のパース 3:学び=書架
 *   右列（キャリアパス例）       1:スペシャリスト=回路 2:リード=連なるブロック 3:PM=ネットワーク
 *
 * ■ 戻し方＝このブロックを削除する
 *   （見出しが左に戻り、覆いと背景画像が消えて、**白いカードに濃い文字**の元の形＝高さ指定なしに戻る）。 */
body.page-id-3772 .recruit-col-heading {
	text-align: center;
}
/* 6枚共通。`background-color` は書かない＝カードは `has-card-bg-background-color`（白）を持っているので、
 * ショートハンドで塗り潰すとそちらを消してしまう */
body.page-id-3772 .recruit-icon-card {
	/* 覆いの色と濃さは**ここ1か所**で持つ（下の6つのルールはこれを参照するだけ）。
	 * 値は動画カード（`.recruit-video-card`・2176行）と同じ `--recruit-footer-ground` #361116（10/1 から #081c28）の60%。
	 * ※`var()` をグラデの中で直に書けないので rgba のリテラルで持つ
	 *   （`color-mix()` で書くと、対応していない環境で `background-image` ごと無効になり、
	 *   **覆いも画像も消えて白地に白文字**になる＝読めなくなるため使わない）。
	 * ※濃さを変えるときは**ここ**を変える（0.60 未満はAAを割る＝冒頭の表）。
	 *   6か所の `var()` には同じ値がフォールバックとして書いてあるが、**宣言がある限り使われない**
	 *   （宣言だけ消えたときに白地＋白文字にならないための保険。冒頭の★を読むこと）。 */
	--gasp-career-veil: rgba(8, 28, 40, 0.6);
	/* 高さ＝岡田さん「高さはこの2/3でいいな」（320 → 213px）。
	 * ※**高さを変えたら画像を切り出し直すこと**（比が変わる。213pxのときは 2.859:1） */
	min-height: 213px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* 動画カードと同じ「上下左右中央」の寄せ方に揃える（動画カードは align/justify とも center） */
	align-items: center;
	justify-content: center;
	/* ★ここに `padding: 15px` と書いてあったが、**効いていなかった**（実測 2026-09-17・設計役の指摘）。
	 * カードの div は本文（post_content）側で `style="…padding-top:24px;…"` を持っていて、
	 * インライン指定には詳細度で勝てない＝**実際の内余白は 24px**（動画カードは 15px）。
	 * `!important` で 15px にすることはできるが、**内余白を揃えろとは言われていない**ので書かない
	 * （岡田さんの指示は覆い・文字・高さ）。効かない行を残すほうが害なので削除した。
	 * ※同じ理由で `box-shadow`（カードは影あり・動画カードは影なし）も触っていない。 */
}
/* ■ 文字を動画カードに揃える
 * （岡田さん「文字のフォントとサイズもそろえて、動画と同じテイストにしようか」
 *   → 揃いきっていなかったので 2026-09-17 に「**動画のように…フォントもそろえてほしい**」と再指摘）
 *
 * 実測（2026-09-17・同じページの動画カードと並べて）：
 *   | | 動画カード | キャリア（変更前） |
 *   |---|---|---|
 *   | 見出し | Poppins **2.2rem** / 600 / 行間1.45 | Poppins **22px 固定** / 600 / 行間1.45 |
 *   | 本文   | Inter 15px / 行間1.55 / 上マージン **2.4rem** | Inter 15px / 行間1.55 / 上マージン **24px 固定** |
 *   | 色     | **白 #fff** | **濃い紺 rgb(41,41,75) / 本文 rgb(40,36,36)** |
 *   | 揃え   | 中央 | 中央（一致） |
 *
 * ■ ★残っていた違いは「色」と「px固定 vs rem」の2つ
 *   **フォントは元から同じ**（Poppins / Inter）。行間の倍率も一致していた。
 *   ①**色**＝動画カードは白。前の版は「白いベールの上だから白文字にすると読めない」という理由で
 *     濃い文字のまま残していたが、**覆いを濃くした今回はそれごと揃える**（コントラストは冒頭の実測表）。
 *   ②**px固定だと、揃うのは幅1367pxのときだけだった**。動画カードは `2.2rem` / `2.4rem` で持っていて、
 *     このテーマはルートのfont-sizeが幅で変わる（実測：幅1367で10px、幅797で **8.48px**）。
 *     ＝**幅797では 動画 18.656px に対しキャリアは 22px のまま**で、狭い画面ほど食い違っていた。
 *     **向こうが rem で持っている値を写す**（9/15 の「仕事の流儀のリード文」と同じ判断。
 *     このファイル前半の「rem は使わない」は px 指定を rem に変えない話で、写す場合はこちら）。
 *
 * ■ 色は `.recruit-icon-card-body` の中を**明示して書く**（継承は直接指定に負けるため。
 *   動画カード側 2180行も同じ形で h4・p を並べて書いている）。 */
body.page-id-3772 .recruit-icon-card .recruit-icon-card-body,
body.page-id-3772 .recruit-icon-card .recruit-icon-card-body h4,
body.page-id-3772 .recruit-icon-card .recruit-icon-card-body p {
	color: #fff;
	text-align: center;
}
body.page-id-3772 .recruit-icon-card .recruit-icon-card-body h4 {
	font-size: var(--gasp-fs-20);
	line-height: var(--gasp-lh-tight);
	margin-bottom: 0;
}
body.page-id-3772 .recruit-icon-card .recruit-icon-card-body p {
	font-size: var(--gasp-fs-16);
	line-height: var(--gasp-lh-normal);
	margin-top: 2.4rem;
}
body.page-id-3772 .wp-block-column:nth-child(1) > .recruit-icon-card:nth-of-type(1) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_sairyou.jpg);
}
body.page-id-3772 .wp-block-column:nth-child(1) > .recruit-icon-card:nth-of-type(2) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_ikkitsukan.jpg);
}
body.page-id-3772 .wp-block-column:nth-child(1) > .recruit-icon-card:nth-of-type(3) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_manabi.jpg);
}
body.page-id-3772 .wp-block-column:nth-child(2) > .recruit-icon-card:nth-of-type(1) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_specialist.jpg);
}
body.page-id-3772 .wp-block-column:nth-child(2) > .recruit-icon-card:nth-of-type(2) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_lead.jpg);
}
body.page-id-3772 .wp-block-column:nth-child(2) > .recruit-icon-card:nth-of-type(3) {
	background-image:
		linear-gradient(var(--gasp-career-veil, rgba(8, 28, 40, 0.6)), var(--gasp-career-veil, rgba(8, 28, 40, 0.6))),
		url(/wp-content/uploads/2026/09/recruit_career_pm.jpg);
}
/* ===== 2026-09-17 キャリアの伸ばし方：列見出しを中央＋カードに画像を敷く ここまで ===== */

/* ===== 2026-09-22 帯に写真を敷く（働き方・制度／よくある質問／採用ニュース） ここから =====

  岡田さん「ここに静止画を」「ここにも静止画を」「ここにも静止画を」
  （2026-09-22・3786 働き方・制度／3788 よくある質問／95103 採用ニュース の
    地色だけの帯の画面写真を添えて）

  使った写真＝**自社で撮影したもの**（素材フォルダの PXL_20260125_*）。
  外部から落とさなかった理由：手元に実物のオフィス写真があり、権利の確認が要らないため。
  ※どの写真を当てるかは**リードの見立て**で、岡田さん未確認（絵を見て差し替え可）。
    差し替えは下の `url(...)` を1行変えるだけ。候補の一覧は `_out\cand\sheet1.jpg` / `sheet2.jpg`。

  | ページ            | 写真（候補番号） | 中身            | 元ファイル                      | 縮小後  |
  |------------------|----------------|----------------|--------------------------------|--------|
  | 3786 働き方・制度  | No.11          | 執務エリア       | PXL_20260125_090849976.jpg     | 131KB  |
  | 3788 よくある質問  | No.16          | 会議室          | PXL_20260125_090946984.jpg     | 147KB  |
  | 95103 採用ニュース | No.15          | エントランス     | PXL_20260125_090940679.jpg     | 198KB  |

  覆いは3693（会社を知る）と**同じ濃さ**（0.55→0.66 の朱系グラデーション）にしてある。
  9/17 の実測で、この濃さでないと白文字が AA 基準を割ることが分かっているため
  （0.55→3.90:1 で割れ、0.60→4.57:1 で通る）。**濃さは変えないこと。**

  戻し方：このブロックを削除する（写真ファイルは uploads に残るが、参照が消えるだけ）。
*/
body.page-id-3786 .recruit-main > .recruit-hero,
body.page-id-3788 .recruit-main > .recruit-hero,
body.page-id-95103 .recruit-main > .recruit-hero {
	background-size: cover;
	background-position: center 50%;
	background-repeat: no-repeat;
	border-radius: var(--pt-soft-radius);
}
body.page-id-3786 .recruit-main > .recruit-hero {
	background-image:
		linear-gradient(rgba(8, 28, 40, 0.55), rgba(8, 28, 40, 0.66)),
		url(/wp-content/uploads/2026/09/recruit_culture_band.jpg);
}
body.page-id-3788 .recruit-main > .recruit-hero {
	background-image:
		linear-gradient(rgba(8, 28, 40, 0.55), rgba(8, 28, 40, 0.66)),
		url(/wp-content/uploads/2026/09/recruit_faq_band.jpg);
}
body.page-id-95103 .recruit-main > .recruit-hero {
	background-image:
		linear-gradient(rgba(8, 28, 40, 0.55), rgba(8, 28, 40, 0.66)),
		url(/wp-content/uploads/2026/09/recruit_news_band.jpg);
}
/* ===== 2026-09-22 帯に写真を敷く（働き方・制度／よくある質問／採用ニュース） ここまで ===== */

/* ===== 2026-09-22 白いカードに写真を入れる（コミュニケーション／データで見る職場）＝2026-10-02 に外した =====
  岡田さん「これは画像いらないかな。」（2026-10-02・3786 のデータで見る職場とコミュニケーションの画面写真を添えて）
  9/22 に入れた規則（写真の帯・縦帯と、それに合わせた padding の上書き）をまるごと削除した。帯の中に移した側の同じ規則（recruit-scenes.css 6節）も削除。
  戻すときは退避 C:\oka\work\_claude\HP_wp\_taihi/blogsy_gasp_20261002_before_p3786_noimg/assets\css\ からこのブロックを戻す。 */

/* ===== 2026-09-22 ★取り消した規則についての記録（コードは残していない） =====

  「動画カードになった信頼の3枚から、アイコン用の見た目を外す」というブロックを一度足したが、
  **誤診だったので取り消した。**同じ間違いを繰り返さないために経緯だけ残す。

  ■ 何を誤ったか
  動画カードに `recruit-icon-item`（横並びの目印）を引き継いだあと、
  「24×24の盾アイコンが出ている」と判断して打ち消しを足した。
  **判断の材料が足りていなかった。**見たのは `::before` の `content` と幅だけで、
  **`display` を見ていなかった。**

  実際には 1880行の「2026-09-02 アイコンを全部やめる」ブロックに
  `.recruit-icon-item::before, .recruit-icon-card::before { display: none !important }`
  が既にあり、**アイコンは元から描かれていない**（2026-09-22 実測：`::before` の display=none）。

  ■ 取り消した理由
  不要だっただけでなく、打ち消しに入れた `display: block` が
  WordPress本体の `.wp-block-cover { display: flex; justify-content: center; align-items: center }`
  を上書きしてしまい、**中身の寄せ方を既存の動画カード4枚と変えていた**。
  直す必要の無いものを直して、別のところを壊す形だった。

  ■ 残る論点（★判断待ちへ）
  `recruit-icon-item` が**横並びの目印と見た目の両方を持っている**構造自体は残っている。
  いまは 1880行の `!important` が見た目を殺しているので実害は出ていないが、
  **その1行を消すと動画カードにアイコンが復活する。**
  クラスを「目印用」と「見た目用」に分けるのが筋だが、2026-09-17 のブロックと本文（DB）の
  両方を書き換えることになるので、別途判断する。
*/

/* ===== 2026-09-22 信頼の3枚の縦の寄せ方を、既存の動画カードに合わせる ここから =====

  岡田さん（動画の入れ方を聞いたときの回答）「既存の動画カードと同じ形」（2026-09-22）

  引き継いだ `recruit-icon-item` の `align-items: flex-start`（1095行）が効いて、
  **信頼の3枚だけ中身が上寄せ**になっていた（実測・2026-09-22）：

  | | 縦の寄せ方 | 中身の上端 | カードの高さ |
  |---|---|---|---|
  | 信頼の3枚 | flex-start | 15px | 200px |
  | 仕事の流儀の4枚（既存） | center | 106px | 292px |

  `display` は触らない（一度 `block` にして WordPress本体の
  `.wp-block-cover { display:flex }` を潰し、取り消した経緯が上のブロックにある）。
  **寄せ方だけ**を既存に合わせる。

  ★3792（文化が再現される仕組み・2枚）に同じ直しが要らない理由：
    あちらの元カードは `recruit-` 接頭辞のクラスを持たないため
    （`wp-block-group has-card-bg-background-color has-background` だけ）、
    置き換えのときに `recruit-icon-item` が引き継がれない。
    したがって `align-items: flex-start` が効かず、**WordPress本体の既定（center）のまま**。
    ＝3792は元から既存カードと同じ寄せ方になっている（点検役が現物で確認・2026-09-22）。

  ★まだ揃っていないもの＝**カードの高さ**。
    信頼200px／文化240px に対し、既存の動画カードは292px（仕事の流儀）。
    「既存の動画カードと同じ形」という指示に対して、寄せ方は合わせたが高さは合わせていない。
    3枚・2枚が横に並ぶので低くしてあるが、**これはリードの判断で岡田さん未確認**。

  戻し方：このブロックを削除する。
*/
body.page-id-3693 .recruit-video-card.recruit-icon-item {
	align-items: center;
}
/* ===== 2026-09-22 信頼の3枚の縦の寄せ方を、既存の動画カードに合わせる ここまで ===== */

/* ===== 2026-10-09 技術の一覧を3行に（エンジニア職 3851「使うツール／環境」） =====
  岡田さん原文：「縦が長いので三行ぐらいに分けて。パネル内で。」
  対象は本文で `gasp-tech-list` を付けた <ul> だけ（言語・DB・クラウド・環境・AI の4枚。
  付けているのは recruit_rebuild/update_p3851_tech_list_20261009.php）。
  項目は上から下・左から右へ流す（列の数は項目数で決まる）。
  行数は**カードの幅**で切り替える（窓の幅ではない。採用の下層は左に見出しの列があるので、
  広い窓ほどカードが狭くなる＝1440px の窓で 555px／686px の窓で 631px・実測）。
    カードの中身（左右の余白 24px ずつを除いた幅）584px 以上＝3行／470px 以上＝4行／それ未満＝2列の行送り
  境目の根拠（実測・列の間 32px）：一番広いクラウド・環境（13項目）が 3行で 581px・4行で 468px
    （言語は 3行 507px・4行 401px）。境目は必要幅に数 px の余りを足した値（リードの置き値。
    686px の窓の中身 583px は 3行に 2px しか余らないので、字の描画のずれで溢れないよう4行に倒している）。
  実測の結果：1880px の窓（カード 749px）＝3行／1440px（555px）＝4行／686px（631px）＝4行。
  戻し方：このブロックを削除する（1列の箇条書きに戻る）。
*/
.recruit-body-card:has(> ul.gasp-tech-list) {
	container-type: inline-size;
}
.recruit-body-card ul.gasp-tech-list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	column-gap: 32px; /* 黒丸は列の間に出るので、24px では前の列の文字に寄りすぎた（686px 幅の画像で確認） */
	row-gap: 4px;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
@container (min-width: 470px) {
	.recruit-body-card ul.gasp-tech-list {
		grid-template-columns: none;
		grid-template-rows: repeat(4, auto);
		grid-auto-flow: column;
	}
}
@container (min-width: 584px) {
	.recruit-body-card ul.gasp-tech-list {
		grid-template-rows: repeat(3, auto);
	}
}
/* ===== 2026-10-09 技術の一覧を3行に ここまで ===== */