@charset "UTF-8";

/* ============================================================
   水彩テーマ（/recruit-test/ 専用の上書き層）

   キービジュアル AI出力/watercolor-voyage-left-keyvisual.png の
   絵柄に合わせて、現行リクルートページの「パキパキした原色」を
   水彩のトーンに置き換えている。

   ・色は絵から直に拾った値（下の CSS 変数）
   ・地は #102095 のベタ塗りをやめ、紙＋淡い水の層にしている
   ・紙目は feTurbulence のノイズ（22番）。以前は paper-grain.png
     ＝キービジュアルの切り抜きだったが、模様が反復して見えたため差し替えた
   ・地は夜明けのグラデーション（22番）

   採用しないと決めたら、このファイルと inc/assets.php の
   enqueue、inc/search.php の body クラスを消せば元に戻る。

   ------------------------------------------------------------
   ★ セレクタの書き分け（ここを守らないと下層2ページが取り残される）
   ------------------------------------------------------------
   このファイルは is_recruit_test() のページでしか読み込まれない。
     /recruit-test/                      … main.recruit.index.test-tone
     /recruit-test/company-test/         … main.recruit.sub.company.test-tone
     /recruit-test/workstyle-test/       … main.recruit.sub.workstyle.test-tone
     /recruit-test/captains-cabin-test/  … main.recruit.sub.company.company-cabin.test-tone
     /recruit-test/numbers-test/         … main.recruit.sub.company.company-numbers.test-tone

   船内マップのピンから生えた下2つは会社を知るの派生なので .company を残してある
   （Numbers のカードなど company 用の style.css 側の指定をそのまま使うため）。
   要素を探すときはこの5ページぶんを並べて、どれに当たるかを見てから書く。

   使い分けは3つだけ。

     .test-tone … 3ページ共通。**新しいトーン指定はまずこれで書く。**
                  見出し・本文の色・ボタン・カードの角・応募ブロックなど、
                  ページをまたいで同じであるべきものは全部ここ。
     .index     … トップ固有の構造だけ（MV / What's All Blue? の地図 /
                  con-box01〜04 のセクション背景 / Member の望遠鏡 など）。
     .sub       … 下層2ページ固有の構造だけ（MV帯・サイドナビINDEX・
                  Numbers のカードなど）。

   詳細度はどれも (0,1,3,2) で並んでいるので、.index / .sub を
   .test-tone に置き換えても本番 style.css との勝ち負けは変わらない。

   ■ なぜこの節があるか
   もともと共通のトーン指定まで .index 限定で書かれていたため、
   トップを直すたびに下層2ページ（会社を知る／働き方を知る）だけが
   古いままになり、そのつど 19番・28番のように手で写す作業が
   発生していた（28番の解説に、地が index 限定だったせいで
   下層が藤色になっていた実例がある）。写しは同じ詳細度で
   後ろに置かれるため、次にトップを直すと今度は写しが勝って
   下層が動かなくなる、といういたちごっこにもなっていた。
   .test-tone に書けば1回で3ページに届く。

   ■ 迷ったときの判断
   「その指定はトップにしか無い要素に当たるか？」
     はい → .index（.test-whats-* / .p-test-mv など）
     いいえ → .test-tone
   下層にも同じクラスがあるが**見え方を変えたくない**場合だけ
   .index に残す（例: 18-② の nowrap は下層で溢れるので共通にしない）。

   ■ 部分一致セレクタ・ワイルドカードで塗らない（2026-09-14）
   `[class*="entry"]` や `.apply-btn *` のようなまとめ塗りをしないこと。
   その文字列を名前に含むだけの別物、色を変えてはいけない子まで巻き込む。
   実際に `[class*="entry"]` が
     ・会社を知るのMVピン   .test-company-mv-pin.is-entry
     ・追従の応募ボタン     .p-test-entry-float
     ・Q&Aの宝箱リンク      .test-qa-treasure-entry
     ・募集要項の入れ物     .entry-list
   にも淡い水色の地を敷き、`.apply-btn *` が中の「応募する」の白文字を
   紺へ落としていた（11-②・11-⑥ を参照）。しかもこの節のセレクタは
   #contents を含むぶん強いので、巻き込まれた側が
   `background: transparent !important` を書いても勝てない
   ＝当てられた側での打ち返しでは止まらない。
   当たり先はクラス名で名指しし、塗りたい先が増えたらセレクタを足すこと。
   ============================================================ */

/* ------------------------------------------------------------
   目次（節番号は書いた順。行番号は変わるので載せていない）
   探すときは節番号で: grep -n "^   26\." このファイル
   ------------------------------------------------------------
     1.     メインビジュアル：キービジュアルを敷く
     2.     ヘッダー：濃紺前提の白ロゴを紙の上でも見えるように
     3.     各セクションの地：#102095 のベタを水彩の層に置き換える
     4.     文字色：白抜き前提だったものを紺に落とす
     5.     ボタン・枠：角を丸め、水彩のにじみ影にする
     6.     水飛沫：紙の上では白泡が飛ぶので、少し濃く見せる
     34.    働き方を知る：制度島エクスプローラー
     7.     キャラ対話：水彩トーンに合わせ直す
     8.     フッター
     9.     原色の追放 ／ キャラクターのパステル色に統一
     10.    構図の調整（見出しと乗組員を重ねない）
     11.    取り残していた原色の掃除
     12.    社名の由来セクション（parts/test-origin.php）
     13.    代表者名（筆文字）を黒に
     15.    追従する応募ボタン（parts/test-entry-float.php）
     16.    タイトル周りの整理
     17.    見出しをすべて「What’s All Blue?」と同じ二段構成に揃える
     18.    17番の取りこぼし（可読性の修正）
     18-1.  What’s All Blue? を航海地図UIにする
     19.    下層2ページ（会社を知る／働き方を知る）を水彩トーンに
     20.    MVの下端を紙に溶かす（ぶつ切りの解消）
     21.    ビジョン「Only Digital Adventure」を主役に
     22.    地の作り直し（反復して見える紙目 ／ 夜明けのグラデーション）
     23.    残っていたぶつ切りをグラデーションに ／ インタビューの足
     24.    Member：望遠鏡カーソルの拡大演出
     25.    テストページの白フッターと覗き込みキャラ
     25.    MVの寄り引きを直す（インフィの顔が切れていた）
     11.    「では、出航の準備を。」のCTAを宝箱素材にする
     26.    「では、出航の準備を。」を淡色パステル素材に戻す
     27.    FAQ横のアビー/ナギを大きくして内側へ寄せる
     28.    下層2ページの地を index に合わせる
     29.    出航準備CTAの視認性と余白
     30.    Top Message → Why “All Blue” の間延びを詰める
     31.    宝箱CTAの収まりとhover開閉
     31.    募集要項（Entry）を航海日誌にする
     32.    社名の由来：3ブロック削除後の下余白の詰め直し
     33.    働き方を知る：カラー島のMV
     34.    会社を知る：会社島と停泊船のMV
     36.    会社を知る：ボラギノールタウン風の船内マップ
     35.    MVの淡い層の上端が、スカロの目の高さで直線に見える
     37.    働き方を知る：スマホ幅のはみ出しと表記ゆれを抑える
     39.    会社を知る：トップ全面メインデッキ＋3ピン
     40.    会社を知る：船長室・経営理念導線
     41.    会社を知る：ボラギノールタウン風ピンバナー統一
     45.    働き方を知る：入社後の流れを海賊の宴にする
     46.    働き方を知る：入社後の航路スクロール
     47.    数字で見る「オールブルー」：単独ページと本音レイヤー
     48.    （別ファイル recruit-test-numbers-dark.css）数字ページの夜側配色
     49.    会社を知る：サイドのINDEXの「数字で見るオールブルー」ボタン
     50.    スマホ対応：横はみ出しの封じ込めとSPの操作性（2026-09-17）

   ※ 節番号は重複しているものがある（25 と 11 が2回ずつ）。
     後から書いた方が後勝ちなので、直すときは必ず grep で全部出してから触ること。
   ------------------------------------------------------------ */

body.recruit-test {
	/* ── 絵から拾った色 ── */
	--wc-paper:      #faf4e6; /* 紙 */
	--wc-paper-deep: #f2e9d6; /* 紙（濃いめ） */
	--wc-sky:        #cfe6f2; /* 空 */
	--wc-sky-pale:   #e6f2f8;
	--wc-sea:        #4a8fc7; /* 海（中） */
	--wc-sea-deep:   #245e94; /* 海（深） */
	--wc-navy:       #1b3a5c; /* スカロの紺＝文字色 */
	--wc-navy-soft:  #3a5f83;
	--wc-purple:     #a98fd0; /* ナギ */
	--wc-coral:      #e0596b; /* インフィ */
	--wc-pin-red:    #e60012; /* ボラギノールタウン寄せの地図ピン赤 */
	--wc-pin-red-dark: #9f0715;
	--wc-pin-red-glow: rgba(230, 0, 18, .24);
	--wc-sand:       #e8d9b8; /* 帆・砂 */
	--wc-wood:       #c9a063; /* マスト */
	--wc-leaf:       #7fa86b; /* 島 */

	background-color: var(--wc-paper);
	color: var(--wc-navy);
}

/* 紙目を全面に薄く敷く。これだけで「印刷物っぽさ」が出る
   ※ 敷くものは 22番で paper-grain.png から手続き的なノイズに差し替えた。
     paper-grain.png がキービジュアルの切り抜きで、模様が反復して見えたため。
     ここは位置と重ね方だけを持たせている。 */
body.recruit-test::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	mix-blend-mode: multiply;
}
/* 紙目(::before)より前に出す。
   ヘッダーは position:fixed のまま触らないこと。
   ここで relative にすると流れに戻ってしまい、main が
   ヘッダーの高さ分（124px）押し下げられて MV が画面からはみ出す。 */
body.recruit-test main,
body.recruit-test footer {
	position: relative;
	z-index: 1;
}
body.recruit-test #globalHeader {
	z-index: 20; /* 元の指定と同じ。position は上書きしない */
}

/* ────────────────────────────────────────────
   1. メインビジュアル：キービジュアルを敷く
   ──────────────────────────────────────────── */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv {
	/* 2026-09-14 差し替え。元は voyage-kv.jpg（旧ファイルは残してあるので、
	   戻すときはこの1行を voyage-kv.jpg に書き換えるだけでよい）。
	   支給の 修正版トップ.png（1536x1024・透過なし）を、背景用途なのでJPGにしてある
	   （2.54MB → 0.55MB。原本のPNGは AI出力/修正版トップ.png）。 */
	background-image: url("../images/recruit/test/kv/voyage-kv-v2.jpg");
	background-repeat: no-repeat;
	background-position: center 42%;
	background-size: cover;
	background-color: var(--wc-sky);
}

/* 上端に淡い空の層。白ロゴと見出しが絵に埋もれないようにする（濃いスクリムは水彩が濁るので使わない） */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 46%;
	background: linear-gradient(180deg,
		rgba(250, 244, 230, .88) 0%,
		rgba(233, 243, 249, .55) 45%,
		rgba(233, 243, 249, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

/* 見出しは上寄せ。絵の主役（乗組員）と重ならないようにする */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv {
	justify-content: flex-start;
	padding-block: 152px 90px;
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .main-text {
	color: var(--wc-navy);
	text-shadow:
		0 2px 18px rgba(250, 246, 236, .95),
		0 0 42px rgba(250, 246, 236, .85);
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .test-mv-scroll {
	color: var(--wc-navy);
	text-shadow: 0 1px 10px rgba(250, 246, 236, .9);
}
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .test-mv-scroll::after {
	background: linear-gradient(180deg, rgba(27, 58, 92, .75), rgba(27, 58, 92, 0));
}

/* ────────────────────────────────────────────
   2. ヘッダー：濃紺前提の白ロゴを紙の上でも見えるように
   ──────────────────────────────────────────── */
/* 元は filter: brightness(0) invert(1) で白抜きにしている。
   紙の地では白ロゴが消えるので、反転を外して元の色に戻す */
body.recruit-test #globalHeader .logo a img {
	filter: drop-shadow(0 1px 6px rgba(250, 244, 230, .9));
}
body.recruit-test #globalHeader .sp-menu span {
	background-color: var(--wc-navy);
}

/* ────────────────────────────────────────────
   3. 各セクションの地：#102095 のベタを水彩の層に置き換える
   ──────────────────────────────────────────── */
body.recruit-test main#contents.recruit.index .con-box01,
body.recruit-test main#contents.recruit.index .con-box02,
body.recruit-test main#contents.recruit.index .con-box03,
body.recruit-test main#contents.recruit.index .con-box04 {
	background-image: none;
	background-color: transparent;
}

/* 社長メッセージ：紙 → 淡い空 */
body.recruit-test main#contents.recruit.index .con-box01 {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		var(--wc-sky-pale) 42%,
		var(--wc-paper) 100%);
	padding-block: 110px 150px;
}

/* 会社を知る／働き方を知る：淡い海 */
body.recruit-test main#contents.recruit.index .con-box02 {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		#dcecf6 50%,
		var(--wc-paper-deep) 100%);
}

/* 社員紹介：砂浜寄りの暖色 */
body.recruit-test main#contents.recruit.index .con-box03 {
	background: linear-gradient(180deg,
		var(--wc-paper-deep) 0%,
		#f6ecd8 55%,
		var(--wc-paper) 100%);
}

/* 募集要項：紙 */
body.recruit-test main#contents.recruit.index .con-box04 {
	background: var(--wc-paper);
}

/* ────────────────────────────────────────────
   4. 文字色：白抜き前提だったものを紺に落とす
   ──────────────────────────────────────────── */
body.recruit-test main#contents.recruit.index .con-box01,
body.recruit-test main#contents.recruit.index .con-box01 p,
body.recruit-test main#contents.recruit.index .con-box02,
body.recruit-test main#contents.recruit.index .con-box02 p,
body.recruit-test main#contents.recruit.index .con-box03,
body.recruit-test main#contents.recruit.index .con-box04 {
	color: var(--wc-navy);
}

/* 見出し・本文の色は3ページ共通（下層も同じ地・同じ文字色のため） */
body.recruit-test main#contents.recruit.test-tone .c-text,
body.recruit-test main#contents.recruit.test-tone .box-headline,
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title {
	color: var(--wc-navy);
}

body.recruit-test main#contents.recruit.index .con-mv .sub-text {
	color: var(--wc-coral);
}

/* 英字見出しは海の色で。ベタ塗りの主張を弱める */
body.recruit-test main#contents.recruit.test-tone .box-headline,
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title span {
	color: var(--wc-sea-deep);
}

/* ────────────────────────────────────────────
   5. ボタン・枠：角を丸め、水彩のにじみ影にする
   ──────────────────────────────────────────── */
body.recruit-test main#contents.recruit.test-tone a.op,
body.recruit-test main#contents.recruit.test-tone .btn a,
body.recruit-test #globalHeader .global-navi .nav-btm .btn a {
	border-radius: 999px;
	box-shadow: 0 6px 18px rgba(36, 94, 148, .18);
	transition: transform .25s, box-shadow .25s, background-color .25s;
}
body.recruit-test main#contents.recruit.test-tone a.op:hover,
body.recruit-test main#contents.recruit.test-tone .btn a:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(36, 94, 148, .26);
}

/* カード類の角と影 */
body.recruit-test main#contents.recruit.test-tone .recruit-member-list .item,
body.recruit-test main#contents.recruit.test-tone .inner-box,
body.recruit-test main#contents.recruit.test-tone .list-item {
	border-radius: 16px;
}

/* ────────────────────────────────────────────
   6. 水飛沫：紙の上では白泡が飛ぶので、少し濃く見せる
   ──────────────────────────────────────────── */
body.recruit-test .test-splash .test-drop {
	width: 118px;
	height: 118px;
	margin: -59px 0 0 -59px;
	mix-blend-mode: normal;
}

body.recruit-test .test-splash.is-fallback-splash .test-drop {
	opacity: 0;
	transform: translate3d(0, 0, 0) scale(.25);
	animation: testSplashFallbackTest var(--splash-duration, 4s) ease-out var(--splash-delay, 0s) infinite;
}

@keyframes testSplashFallbackTest {
	0% {
		opacity: 0;
		transform: translate3d(0, 0, 0) scale(.25) rotate(0deg);
	}
	12% {
		opacity: .9;
	}
	100% {
		opacity: 0;
		transform: translate3d(var(--splash-x, 180px), var(--splash-y, -180px), 0) scale(var(--splash-scale, 1)) rotate(var(--splash-rotate, 45deg));
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .test-splash .test-drop {
		width: 76px;
		height: 76px;
		margin: -38px 0 0 -38px;
	}
}

/* ============================================================
   34. 働き方を知る：制度島マップ（ボラギノールタウン風）
   ------------------------------------------------------------
   ページを開くと画面いっぱいの島マップが出て、ピンを押すと
   左からバナーがせり出す。マークアップは parts/page-workstyle-test.php、
   中身（見出し・本文・画像）は assets/js/workstyle-island.js の items。

   ■ 島は切り取らない（2026-09-09 変更）
   前は object-fit:cover で枠を埋めていたので、画面が横長・背が低いほど
   絵の上下が切れ、いちばん下の桟橋やラジオ港が画面の外に出てスクロールが
   要った。いまは **絵をまるごと収める**（contain 相当）に変えてある。

     枠の高さ --map-h = min( 画面の残り全部 , 100vw ÷ 1.5 )
     絵の実寸 --art-w = min( 100vw , --map-h × 1.5 )   --art-h = --art-w ÷ 1.5

   背の高いウィンドウでは絵が横いっぱいに収まり（余白ゼロ）、背が低いと
   左右に海の余白が出る。どちらでも **9つのピンは必ず1画面に入る**。

   ■ ピンの座標系（ここが要）
   .workstyle-island-stage 自体を「絵とぴったり同じ大きさの箱」にして枠の
   中央に置いてある。だから絵・ピンの層・海のマスクは全部 inset:0 で重なり、
   ピンの left/top は **絵の中の位置そのまま**（％）で書ける。
   切り出し位置の変数（--map-crop-x / -y）はもう無い。増やさないこと。
   絵を差し替えても、縦横比が 3:2 のままならピンは島から外れない。

   ■ なぜこの形にしたか
   前はPC用とSP用で座標表を2つ手で持っていた。絵を差し替えるたび両方を
   直す必要があり、実際に片方だけ直してSPのピンが海の上に残っていた。
   層を入れて座標表は1つに統一した。**SP側に座標を書き足さないこと。**

   ■ 絵は動かさない。動くのは海だけ
   .workstyle-island-map-art には元々 testWorkstyleIslandFloat（±0.8度の回転＋
   最大18pxの移動）が掛かっていたが、ピンは動かないので押すたびに島から
   ずれていた。クリックする地図なので絵は固定してある。

   動きは .workstyle-island-stage の ::before（うねり）と ::after（きらめき）の
   2枚が持つ。以前はこの2枚が枠いっぱいに掛かっていて、島の木や屋根の上でも
   光が流れていた。いまは海の形に切り抜いたマスク --sea-mask を掛けてあるので、
   島・空・桟橋には乗らない。

   ★ 島の絵を差し替えたら、マスクも作り直すこと
       python3 scripts/make-sea-mask.py theme/ALLBLUE/assets/images/recruit/test/map/<新しい絵>.png
     絵から海の領域を抜き出して workstyle-island-sea-mask.png を上書きする。
     作り直さないと、前の絵の海の形のまま光が流れて島の上で光る。
     マスクは絵と同じ 3:2 で、箱（.workstyle-island-stage）も絵と同じ大きさなので、
     mask-size:100% 100% を渡すだけで絵とぴったり重なる。合わせ込みの計算は要らない。
   ============================================================ */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero {
	/* ── 枠の大きさ。ここを変えても座標は直さなくてよい ── */
	--hdr: 124px;                                  /* 固定ヘッダーの高さ（実測） */
	/* 枠の高さはヘッダー下いっぱい。絵は cover 計算で拡大し、端の継ぎ足し海を見せない。 */
	/* 絵の縦横比。**JSが絵の naturalWidth/naturalHeight から上書きする**ので、
	   ここの値は画像を読めなかったときの控え。絵を差し替えても直さなくてよい。
	   （2026-09-09：ここを 1.5 決め打ちにしていたため、v6＝1920x1040＝1.846 に
	     替わった時点で箱と絵の比がずれ、object-fit:contain が箱の中で絵を
	     letterbox して**ピンの層だけが絵からずれた**。実測で 1432 の箱に
	     絵は 1278 しか描かれておらず、左右に77pxずつの食い違いが出ていた。
	     二度と起きないよう、比は絵そのものから取る。） */
	--art-ratio: 1.8461538462;
	--map-h: calc(100svh - var(--hdr));
	/* 枠を必ず覆う一枚絵の実寸。画像比は保つのでピン座標も同じ比で追従する。 */
	--art-w: max(100vw, calc(var(--map-h) * var(--art-ratio)));
	--art-h: calc(var(--art-w) / var(--art-ratio));
	/* 継ぎ足し海は使わない */
	--band: 0px;
	/* 海の形に切り抜くマスク。絵と1対1なので、絵を替えたら作り直す（節の頭を参照） */
	--sea-mask: url("../images/recruit/test/map/workstyle-island-sea-mask.png");
	/* 水平線の高さ。絵から実測した値（scripts/make-sea-bands.py が表示する）。
	   余白側のうねりを水平線より下だけに出すために使う */
	--sea-top: 49.4%;

	position: relative;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	margin-top: var(--hdr);
	height: var(--map-h);
	overflow: hidden;
	background: #cfe6f2;
}

/* ── 余白の海（painted open ocean）─────────────────────────
   絵の左右に、絵の海から作った板を敷く。板は
     [ しっぽ ][ 絵の左端を左右反転したもの ]      ← 左用
     [ 絵の左端そのまま ][ しっぽ ]                ← 右用
   という作りで、**絵と接する側の画素列が絵の端と一致する**＝境目が連続する。
   作り方と作り直しの手順は scripts/make-sea-bands.py の頭に書いてある。

   background-size: auto 100% ＝ 絵と同じ縦倍率。余白が出るときは
   --art-h == --map-h（枠の高さ＝絵の高さ）なので、板の水平線が絵の水平線と
   ぴったり同じ高さに来る。合わせ込みの計算は要らない。

   repeat はしない。反復すると帆船やイルカが2つ出る。板は1320px幅あり、
   足りない分は下の地のグラデーション（板から採った色）が受ける。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0; /* 絵（stage:1）とコピー（hero-copy:5）より下 */
	display: none;
	width: 0;
	overflow: hidden; /* うねり・きらめきを帯の中に閉じる */
	isolation: isolate; /* mix-blend-mode を帯の中だけで効かせる */
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: auto 100%;
	transition: opacity .7s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea.is-left {
	left: 0;
	background-image: url("../images/recruit/test/map/workstyle-island-sea-band-left.jpg");
	background-position: right center; /* 板の右端＝絵の左端に合わせる */
	--seam: 270deg;                    /* 継ぎ目は右。そこから左へ効かせる */
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea.is-right {
	right: 0;
	background-image: url("../images/recruit/test/map/workstyle-island-sea-band-right.jpg");
	background-position: left center;
	--seam: 90deg;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea--dawn {
	opacity: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea--dawn.is-left {
	background-image: url("../images/recruit/test/map/workstyle-island-sea-band-left-dawn.jpg");
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea--dawn.is-right {
	background-image: url("../images/recruit/test/map/workstyle-island-sea-band-right-dawn.jpg");
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero.is-dawn {
	--sea-top: 14.2%;
	background: linear-gradient(180deg,
		#7daee8 0%,
		#ffe0aa var(--sea-top),
		#77d3f4 calc(var(--sea-top) + 2%),
		#21a7ec 62%,
		#77dcfa 100%);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero.is-dawn .workstyle-island-sea:not(.workstyle-island-sea--dawn) {
	opacity: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero.is-dawn .workstyle-island-sea--dawn {
	opacity: 1;
}

/* ── 髑髏の岩島 ────────────────────────────────────────────
   左の外洋に小さく浮かぶ岩島。素材が無いあいだは PHP 側の file_exists で
   出力ごと止まるので、ここは置き場所と揺れだけを決めておく。

   ■ 余白が無い画面では自分で消える
   幅を min(欲しい大きさ, --band - 24px) にしてある。背の高い画面では
   --band が 0 ＝ 幅0 になり、島の絵の上へはみ出すことがない。
   （メディアクエリで消し分けると、枠の高さの式を変えるたびに直しが要る）

   ■ 縦位置
   左の余白の下のほう。上半分には見出し（Workstyle / All Adventure Island）と
   CTAが乗っているので、そこは避ける（hero-copy は z-index:5 で常に上）。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-skull {
	position: absolute;
	z-index: 1; /* 余白の板(0)より上・コピー(5)より下 */
	left: clamp(6px, 2.2vw, 44px);
	bottom: clamp(16px, 5vh, 64px);
	width: 0;
	aspect-ratio: 1 / 1;
	pointer-events: none;
	filter: drop-shadow(0 10px 14px rgba(27, 58, 92, .18));
	animation: workstyleIslandSkullBob 7.5s ease-in-out infinite alternate;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-skull img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-skull {
		animation: none;
	}
}

@keyframes workstyleIslandSkullBob {
	from { transform: translate3d(0, 0, 0) rotate(-.6deg); }
	to   { transform: translate3d(0, -7px, 0) rotate(.6deg); }
}

/* 余白側のうねり・きらめき。柄と動きは絵の中（stage）と同じものを使い回す
   （下の「海の2枚」のセレクタに ::before / ::after で相乗りしている）。
   ここでは置き場所とマスクだけを決める。

   マスクは2枚の掛け合わせ。
     ① 水平線より下だけ    … 空の上で波が流れると嘘になる
     ② 継ぎ目から外へ      … 縞はそれぞれの箱を原点に描かれるので、
                              境目で位相が合わない。境目では効かせず、
                              72pxかけて立ち上げると段差が見えない */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea::before,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-mask-image:
		linear-gradient(180deg, transparent 0 var(--sea-top), #000 calc(var(--sea-top) + 3%)),
		linear-gradient(var(--seam), transparent 0, #000 72px);
	        mask-image:
		linear-gradient(180deg, transparent 0 var(--sea-top), #000 calc(var(--sea-top) + 3%)),
		linear-gradient(var(--seam), transparent 0, #000 72px);
	-webkit-mask-composite: source-in;
	        mask-composite: intersect;
}

/* 絵とピンが入る箱。**絵と1対1の大きさ**で枠の中央に置く。
   overflow は visible。ピンのラベルが島の縁からはみ出しても切らないため。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: var(--art-w);
	height: var(--art-h);
	translate: -50% -50%;
	isolation: isolate;
}

/* ── 海の2枚。ここだけが動く ──────────────────
   ::before ＝ 大きなうねり（谷の影と、うねりの背の白）
   ::after  ＝ 水面のきらめき（細かい光）
   どちらも同じマスクで海の形に切り抜いてある。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::before,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	-webkit-mask-image: var(--sea-mask);
	        mask-image: var(--sea-mask);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-position: center;
	        mask-position: center;
}

/* うねり。太さの違う帯が2本、速さを変えて手前（下）へ流れる。
   2本の間隔が違うので重なり方が変わり続け、同じ水面が戻ってこない。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::before,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea::before {
	background:
		/* 左下の深み。これだけは動かさない（下の keyframes で位置を据え置き） */
		radial-gradient(32% 40% at 18% 72%, rgba(0, 128, 217, .2), rgba(0, 128, 217, 0) 74%),
		/* 谷の影 ── 間隔 190px。ふちを14px以上かけて溶かす＝線に見せない */
		repeating-linear-gradient(176deg,
			rgba(12, 78, 130, 0) 0 62px,
			rgba(12, 78, 130, .26) 92px 112px,
			rgba(12, 78, 130, 0) 142px 190px),
		/* うねりの背 ── 間隔 300px */
		repeating-linear-gradient(183deg,
			rgba(255, 255, 255, 0) 0 110px,
			rgba(255, 255, 255, .3) 148px 176px,
			rgba(255, 255, 255, 0) 214px 300px);
	mix-blend-mode: soft-light;
	opacity: .95;
	animation: workstyleIslandSwell 21s linear infinite;
}

/* きらめき。細い光が下へ、もう1本が上へ。すれ違うので水面がざわつく。
   さらに13秒かけて明るさが寄せては引く＝日射しの当たり方が変わる。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::after,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea::after {
	background:
		/* 間隔 44px */
		repeating-linear-gradient(171deg,
			rgba(255, 255, 255, 0) 0 16px,
			rgba(255, 255, 255, .52) 24px 28px,
			rgba(255, 255, 255, 0) 36px 44px),
		/* 間隔 76px。上の1本と21度ずらしてあるので、
		   重なったところだけが明るく光る＝縞ではなく粒に見える */
		repeating-linear-gradient(192deg,
			rgba(255, 255, 255, 0) 0 30px,
			rgba(255, 255, 255, .34) 38px 45px,
			rgba(255, 255, 255, 0) 53px 76px);
	mix-blend-mode: screen;
	opacity: .46;
	animation:
		workstyleIslandSparkle 8.5s linear infinite,
		workstyleIslandGlint 13s ease-in-out infinite alternate;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-map-art {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: fill;
	filter: saturate(1.08) contrast(1.04);
	transition: opacity .7s ease, filter .7s ease;
	object-position: center center;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-map-art--dawn {
	opacity: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero.is-dawn .workstyle-island-map-art--day {
	opacity: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero.is-dawn .workstyle-island-map-art--dawn {
	opacity: 1;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle {
	position: absolute;
	top: clamp(18px, 3vw, 34px);
	right: clamp(18px, 3.6vw, 54px);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	min-height: 44px;   /* 実測42pxだった */
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, .66);
	border-radius: 999px;
	background: rgba(5, 34, 68, .54);
	box-shadow: 0 12px 30px rgba(5, 34, 68, .2), inset 0 1px 0 rgba(255, 255, 255, .2);
	color: #fff;
	font: 900 14px/1.1 var(--font-ja, inherit);
	letter-spacing: 0;
	cursor: pointer;
	backdrop-filter: blur(10px) saturate(1.1);
	transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle:focus-visible {
	border-color: rgba(255, 235, 195, .96);
	background: rgba(236, 137, 83, .76);
	transform: translateY(-1px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle:focus-visible {
	outline: 3px solid rgba(255, 221, 139, .72);
	outline-offset: 3px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-clouds {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud {
	position: absolute;
	left: 100%;
	top: var(--cloud-y);
	display: block;
	width: var(--cloud-w);
	height: auto;
	opacity: var(--cloud-alpha);
	filter: drop-shadow(0 18px 22px rgba(27, 58, 92, .08));
	transform-origin: 50% 50%;
	animation: workstyleIslandCloudDrift var(--cloud-speed) linear var(--cloud-delay) infinite;
	will-change: transform, opacity;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-01 {
	--cloud-y: 11%;
	--cloud-w: clamp(280px, 28vw, 470px);
	--cloud-alpha: .52;
	--cloud-speed: 46s;
	--cloud-delay: -31s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-02 {
	--cloud-y: 39%;
	--cloud-w: clamp(340px, 36vw, 620px);
	--cloud-alpha: .43;
	--cloud-speed: 58s;
	--cloud-delay: -14s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-03 {
	--cloud-y: 64%;
	--cloud-w: clamp(230px, 22vw, 380px);
	--cloud-alpha: .38;
	--cloud-speed: 39s;
	--cloud-delay: -7s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird-flight {
	position: absolute;
	z-index: 3;
	top: 74%;
	left: auto;
	right: -16vw;
	width: clamp(54px, 5.6vw, 90px);
	pointer-events: none;
	filter: drop-shadow(0 8px 10px rgba(27, 58, 92, .16));
	animation: workstyleIslandBirdFlight 18s linear -4s infinite;
	will-change: transform, opacity;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: 52% 54%;
	animation: workstyleIslandBirdGlide 2.8s ease-in-out infinite alternate;
}

body.recruit-test.is-workstyle-intro-active {
	overflow: hidden;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-banner {
	position: fixed;
	z-index: 20000;
	inset: 0;
	display: grid;
	place-items: center;
	place-items: safe center; /* 縦に入り切らないときは上端から。中央寄せだと上がはみ出して掴めなくなる */
	/* ★ 上だけヘッダーぶん空ける。
	   このカードは画面中央寄せなので、**ウィンドウが縦に短いとカードごと上へ寄り、
	   閉じる×がヘッダー（下端124px）の裏に入って押せなくなる**。
	   バナーの z-index は 20000 だが、**main 自身が重なりの箱（position + z-index:1）**
	   なので、main の外にいるヘッダー（z-index:20）には勝てない＝重なった時点で負ける。
	   重なり順で解決できないので、そもそもヘッダーの下に来ないように場所で逃がす。
	   ヘッダーの高さを変えたらこの値も変える。 */
	padding: 136px 24px 24px;
	overflow-y: auto;
	background: rgba(5, 34, 68, .38);
	backdrop-filter: blur(3px) saturate(1.08);
	color: var(--wc-navy);
	pointer-events: auto;
	animation: workstyleIslandIntroBanner .72s cubic-bezier(.2, .8, .2, 1) both;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-banner.is-closed {
	display: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(390px, .92fr) minmax(380px, .78fr);
	align-items: center;
	gap: clamp(36px, 5vw, 68px);
	width: min(1160px, calc(100vw - 72px));
	max-height: calc(100svh - 72px);
	padding: clamp(42px, 5vw, 64px) clamp(46px, 6vw, 78px);
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .96);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 30px 76px rgba(5, 34, 68, .32), inset 0 -4px 0 rgba(0, 145, 221, .06);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-card::before {
	content: "";
	position: absolute;
	left: clamp(46px, 6vw, 78px);
	right: clamp(46px, 6vw, 78px);
	bottom: 28px;
	height: 10px;
	background: linear-gradient(90deg, rgba(0, 145, 221, .16), rgba(242, 170, 68, .22), rgba(0, 145, 221, .12));
	border-radius: 999px;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba(27, 58, 92, .28);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--wc-navy);
	font: 700 30px/1 Arial, sans-serif;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(27, 58, 92, .14);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-close:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-close:focus-visible {
	border-color: rgba(0, 145, 221, .55);
	outline: 3px solid rgba(0, 145, 221, .22);
	outline-offset: 2px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-crew {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	max-height: min(620px, calc(100svh - 160px));
	object-fit: contain;
	filter: drop-shadow(0 18px 22px rgba(27, 58, 92, .18));
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-copy {
	position: relative;
	z-index: 1;
	padding: 0 8px 0 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-copy h2 {
	margin: 0;
	color: #123f73;
	font-size: clamp(34px, 3vw, 46px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-copy h2 span {
	display: block;
	white-space: nowrap;
}


/* 絵と完全に重なる層。ピンの親。箱＝絵なので inset:0 で足りる */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-layer {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
}

/* 個別の透過施設。一枚絵と同じパーセント座標で重ねる。
   ?building-edit=1 でドラッグ・拡大縮小し、値は同じブラウザに保存される。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-building {
	--building-left: 50%;
	--building-top: 50%;
	--building-width: 14%;
	--building-rotate: 0deg;

	position: absolute;
	z-index: 0;
	left: var(--building-left);
	top: var(--building-top);
	display: block;
	width: var(--building-width);
	height: auto;
	max-width: none;
	user-select: none;
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(var(--building-rotate));
	transform-origin: center;
	filter: drop-shadow(0 7px 6px rgba(20, 65, 88, .16));
	transition: filter .18s ease, opacity .18s ease;
	-webkit-user-drag: none;
}

body.recruit-test main#contents.recruit.workstyle .building-evaluation {
	--building-left: 74.15%;
	--building-top: 18.20%;
	--building-width: 15.20%;
}

/* ── ピン ────────────────────────────────────
   left/top は丸いピンの中心座標。ボタン本体はタップ領域だけを持ち、
   ラベルは絶対配置で hover/focus 時だけ出す。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot {
	--pin: 28px;
	--tap: 50px;

	position: absolute;
	z-index: 1;
	left: var(--pin-left);
	top: var(--pin-top);
	display: block;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wc-navy);
	cursor: pointer;
	pointer-events: auto;
	transform-origin: center;
	translate: -50% -50%;
	transition: transform .24s ease, filter .24s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot.is-flip {
	transform-origin: center;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:focus-visible,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot[aria-expanded="true"] {
	filter: brightness(1.06);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:focus-visible {
	transform: scale(1.09);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .68);
	outline-offset: 6px;
	border-radius: 99px;
}

/* 赤い雫のピン。
   ------------------------------------------------------------
   **ここは main 限定にしないこと（2026-09-09）。**
   同じ `.spot-pin` を「暮らしの入り江」のモーダル（.workstyle-life-cove-banner）も使うが、
   あのモーダルは JS が body 直下へ動かすので `main#contents.recruit.workstyle ...` から外れる。
   実際それで入江のピンだけ素の span（0x24・背景なし）に戻っていた。
   入江側に `.is-active .spot-pin { background:#b90010 }` があることからも分かるとおり、
   もともとこの雫が来る前提で書かれている。

   main に閉じてよいのは「島マップの構造・状態」だけ（.workstyle-island-spot の座標、
   [aria-expanded] の開閉、.is-island-open のラベル退避）。
   **見た目そのものは body スコープに置く。** `.spot-pin` / `.spot-label` は
   page-workstyle-test.php でしか使っていないので、広げても他へは波及しない。 */
body.recruit-test .spot-pin {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: var(--pin);
	height: var(--pin);
	border: 3px solid #fffdf7;
	border-radius: 50% 50% 50% 0;
	background: var(--wc-pin-red);
	box-shadow:
		inset -4px -5px 0 rgba(159, 7, 21, .24),
		0 0 0 5px var(--wc-pin-red-glow),
		0 10px 22px rgba(21, 55, 94, .3);
	transform: translate(-50%, -50%) rotate(-45deg);
	/* 明滅は入れない（2026-09-09）。外側の光がふくらむ動きを付けていたが、
	   絵の情報量が多いところに常時動くものが9〜10個並ぶと目が休まらない。
	   静止時の box-shadow（上の3行）だけで十分に浮いて見える。
	   会社を知るページのピン（.test-company-*-pin）にはまだ明滅が残っている。 */
}

body.recruit-test .spot-pin::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fffdf7;
	transform: translate(-50%, -50%);
}

body.recruit-test .spot-label {
	position: absolute;
	left: calc(50% + var(--pin) / 2 + 7px);
	top: 50%;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(218, 246, 255, .92));
	box-shadow: 0 8px 18px rgba(27, 58, 92, .16), inset 0 -2px 0 rgba(0, 145, 221, .1);
	font-size: clamp(11px, 1.05vw, 14px);
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-4px, calc(-50% + 2px));
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot.is-flip .spot-label {
	left: auto;
	right: calc(50% + var(--pin) / 2 + 7px);
	transform: translate(4px, calc(-50% + 2px));
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:hover .spot-label,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot:focus-visible .spot-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition-delay: 0s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot[aria-expanded="true"] .spot-pin {
	background: #b90010;
	animation: none;
}

/* ── ピンの位置＝絵の中の座標（PC/SP共通。ここだけを直す） ──
   v6 の絵（1920x1040）へ、雫ピンの先端が建物・施設へ落ちるように置く。
     旗の丘          丘のてっぺんの青い旗
     評価の灯台      右上の白い灯台
     eラーニング温室  中央上のドーム型グリーンハウス
     資格の展望台    右上の木製展望台と望遠鏡
     レヴェリー広場  日除けの下の円卓（左の張り出しデッキ）
     学びのアカデミー 中央下の白壁・青屋根の学舎
     たからばこ図書館 右中段の宝箱型の本棚建物
     暮らしの入り江  左下のパラソルとデッキチェアの浜辺
     ラジオ港        右下のアンテナと港小屋 */
body.recruit-test main#contents.recruit.workstyle .spot-flag { --pin-left: 66.95%; --pin-top: 13.3%; }
body.recruit-test main#contents.recruit.workstyle .spot-evaluation { --pin-left: 75.45%; --pin-top: 13.9%; }
body.recruit-test main#contents.recruit.workstyle .spot-elearning { --pin-left: 65.15%; --pin-top: 25.0%; }
body.recruit-test main#contents.recruit.workstyle .spot-certification { --pin-left: 84.35%; --pin-top: 30.4%; }
body.recruit-test main#contents.recruit.workstyle .spot-meeting { --pin-left: 42.70%; --pin-top: 36.7%; }
body.recruit-test main#contents.recruit.workstyle .spot-training { --pin-left: 58.55%; --pin-top: 45.7%; }
body.recruit-test main#contents.recruit.workstyle .spot-library { --pin-left: 75.55%; --pin-top: 47.6%; }
body.recruit-test main#contents.recruit.workstyle .spot-life { --pin-left: 42.15%; --pin-top: 63.7%; }
body.recruit-test main#contents.recruit.workstyle .spot-radio { --pin-left: 80.35%; --pin-top: 66.6%; }

/* ── 島の配置エディタ（?building-edit=1） ── */
body.recruit-test.is-island-layout-edit main#contents.recruit.workstyle .workstyle-island-building,
body.recruit-test.is-island-layout-edit main#contents.recruit.workstyle .workstyle-island-spot {
	transition: none;
}

body.recruit-test.is-island-layout-edit.is-building-edit main#contents.recruit.workstyle .workstyle-island-building {
	z-index: 3;
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
}

body.recruit-test.is-island-layout-edit.is-building-edit main#contents.recruit.workstyle .workstyle-island-building:active {
	cursor: grabbing;
}

body.recruit-test.is-island-layout-edit.is-building-edit main#contents.recruit.workstyle .workstyle-island-spot {
	opacity: .34;
	pointer-events: none;
}

body.recruit-test.is-island-layout-edit.is-pin-edit main#contents.recruit.workstyle .workstyle-island-building {
	opacity: .86;
	pointer-events: none;
}

body.recruit-test.is-island-layout-edit.is-pin-edit main#contents.recruit.workstyle .workstyle-island-spot {
	z-index: 4;
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
}

body.recruit-test.is-island-layout-edit.is-pin-edit main#contents.recruit.workstyle .workstyle-island-spot:active {
	cursor: grabbing;
}

body.recruit-test.is-island-layout-edit main#contents.recruit.workstyle .is-edit-selected {
	filter:
		drop-shadow(0 0 3px #fff)
		drop-shadow(0 0 8px #ef164b)
		drop-shadow(0 10px 14px rgba(21, 55, 94, .26));
}

body.recruit-test.is-island-layout-edit main#contents.recruit.workstyle .workstyle-island-hero-copy,
body.recruit-test.is-island-layout-edit main#contents.recruit.workstyle .workstyle-island-dawn-toggle {
	pointer-events: none;
	opacity: .3;
}

body.recruit-test .workstyle-island-layout-editor {
	position: fixed;
	z-index: 30000;
	top: 86px;
	left: 18px;
	display: grid;
	gap: 10px;
	width: min(340px, calc(100vw - 36px));
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .74);
	border-radius: 12px;
	background: rgba(8, 32, 54, .9);
	box-shadow: 0 18px 48px rgba(4, 24, 42, .32);
	color: #fff;
	font-family: var(--font-ja, sans-serif);
	backdrop-filter: blur(12px) saturate(1.1);
}

body.recruit-test .workstyle-island-layout-editor__head {
	font-size: 16px;
	font-weight: 900;
	letter-spacing: .04em;
}

body.recruit-test .workstyle-island-layout-editor__modes,
body.recruit-test .workstyle-island-layout-editor__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

body.recruit-test .workstyle-island-layout-editor button {
	min-height: 38px;
	padding: 7px 10px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font: 800 12px/1.2 var(--font-ja, sans-serif);
	cursor: pointer;
}

body.recruit-test .workstyle-island-layout-editor button:hover,
body.recruit-test .workstyle-island-layout-editor button:focus-visible,
body.recruit-test .workstyle-island-layout-editor button.is-active {
	border-color: rgba(255, 255, 255, .94);
	background: #168fc5;
	outline: none;
}

body.recruit-test .workstyle-island-layout-editor__selected,
body.recruit-test .workstyle-island-layout-editor__help {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
}

body.recruit-test .workstyle-island-layout-editor__selected {
	font-weight: 900;
	color: #ffe18a;
}

body.recruit-test .workstyle-island-layout-editor__help {
	color: rgba(255, 255, 255, .78);
}

body.recruit-test .workstyle-island-layout-editor__code {
	width: 100%;
	height: 124px;
	padding: 9px;
	resize: vertical;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 8px;
	background: rgba(0, 0, 0, .34);
	color: #c8f1ff;
	font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 767px) {
	body.recruit-test .workstyle-island-layout-editor {
		top: 72px;
		left: 10px;
		width: min(310px, calc(100vw - 20px));
		padding: 12px;
	}
}

/* ── 左のリード（パネルが開くと引っ込む） ────── */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy {
	position: absolute;
	z-index: 5;
	top: clamp(26px, 4vw, 54px);
	left: clamp(20px, 4.4vw, 68px);
	width: min(400px, 42vw);
	transition: opacity .3s ease, transform .3s ease;
}

/* 文字の後ろにだけ紙を敷く（2026-09-09）。
   ------------------------------------------------------------
   ここは元々「地が紙」の前提で紺の文字を置いていた。地が海の絵に
   変わったあともそのままだったので、明るい水色（実測 #7cd3fa〜#3cbcfb）の上に
   紺が乗る形になっていた。「All Adventure Island」（--wc-sea-deep #245e94）で
   コントラスト比 4.05:1 ＝ WCAG AA の 4.5:1 に届いていない。
   しかも背景はきらめきと波が動くので、数値以上に読みづらい。

   直し方として「文字を白抜きにする」は採らなかった。SPでは同じ文字が
   紙の上（マップの下）に流れるので、白にすると今度はSPで消える。
   **文字の色は1つのままにして、地のほうを紙に戻す。**
   左は画面の外まではみ出させ、右と上下は溶かして切り口を作らない。

   紙を敷いたので、水色の上で輪郭を保つために入れていた白い text-shadow は
   全部外した（紙の上では滲んで見えるだけなので）。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* 上端＝MVの上端、高さ＝MVいっぱい。左端＝画面の左端。
	   ぼかすのは右だけにしてある。楕円で抜くと上下と右に切り口が出て
	   （実際、最初に書いた radial-gradient は箱の縁で不透明のまま切れて
	   四角い跡が見えた）、消すには箱をむやみに広げるしかなくなる。
	   上下をMVの縁とぴったり合わせれば、そもそも縁が見えない。 */
	top: calc(-1 * clamp(26px, 4vw, 54px));
	left: calc(-1 * clamp(20px, 4.4vw, 68px));
	right: calc(-1 * clamp(80px, 11vw, 190px));
	height: var(--map-h);
	background: linear-gradient(90deg,
		rgba(255, 253, 247, .96) 0 52%,
		rgba(255, 253, 247, .80) 72%,
		rgba(255, 253, 247, 0) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle.is-island-open .workstyle-island-hero-copy {
	opacity: 0;
	transform: translateX(-14px);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy .page-title {
	margin: 0;
	color: var(--ch-scallo, var(--wc-navy));
	font-size: clamp(38px, 5vw, 72px);
	font-weight: 900;
	line-height: 1.05;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-lead {
	margin: clamp(12px, 1.6vw, 20px) 0 0;
	color: var(--wc-sea-deep);
	font-size: clamp(15px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.4;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-lead span {
	display: block;
	margin-top: 4px;
	color: var(--wc-navy);
	font-size: clamp(12px, 1.15vw, 15px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-note {
	margin: clamp(14px, 1.8vw, 22px) 0 0;
	color: var(--wc-navy);
	font-size: clamp(12px, 1.1vw, 14px);
	line-height: 1.7;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-skip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
	min-height: 44px;   /* 実測 144x32 だった。padding では 32px 止まりなので下限で押さえる */
	margin-top: clamp(14px, 1.8vw, 22px);
	padding: 0 20px;
	border: 1px solid rgba(27, 58, 92, .28);
	border-radius: 999px;
	background: rgba(255, 253, 247, .88);
	color: var(--wc-navy);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-skip::after { content: "↓"; }

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-skip:hover {
	border-color: var(--wc-coral);
	background: #fff;
}

/* ── 左からせり出すバナー ─────────────────────
   参考: ボラギノールタウン（インプットフォルダのスクリーンショット 2026-09-09）。
   あちらの効きどころは3つで、そのまま踏襲している。

     1. 紙が画面の7割を占める。右に地図が帯で残るので、どのスポットを
        開いているのかが見えたまま読める。帯の上のピンはそのまま押せる
        （ピンの層 z-index:4 ／ バナー z-index:6 で重なりが競合しない）ので、
        いちいち閉じなくても次のスポットへ移れる。
     2. 並びは「上に現場写真の帯 → 下は左に施設の切り抜き、右に説明文」。
        写真は紙の幅いっぱいの帯（高さ clamp(180px,26vh,260px)）で、
        施設の切り抜きは背景が透けた素材なので紙の上では「一点もの」に見える。
     3. 閉じるは右上の細い×＋CLOSE。頭の左にロゴ、足元に小さな署名。
        以前の紺の丸ボタンは紙の静けさに対して強すぎた。

   縦は上下中央。パネル自身が縦スクロールするので、内側の段は
   flex-shrink を 0 にして、縮んで頭が切れないようにしてある。 */
/* 紙は2段組。左＝現場写真、右＝施設の切り抜き＋説明文。
   縦積み（写真を上に全幅で敷く）にすると、写真を切らずに原寸比で出したとき
   右側に写真1枚ぶんの空白が残って間延びする。横に並べて紙の幅を使い切る。
   左の段は写真の幅ぶんだけ（auto）、右の段が残り全部。
   写真が無いスポットは下の .is-no-media で右段が全幅に伸びる。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel {
	position: absolute;
	z-index: 6;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	width: min(1360px, 72vw);
	height: 100%;
	background: #fffdf7;
	box-shadow: 22px 0 60px rgba(27, 58, 92, .20);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(-101%);
	transition: transform .42s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .42s;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel.is-open {
	visibility: visible;
	transform: none;
	transition: transform .42s cubic-bezier(.22, .9, .3, 1), visibility 0s;
}

/* ── バナーの頭：左にオールブルーのロゴ、右に閉じる ── */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-head {
	grid-column: 1 / -1;
	position: sticky;
	z-index: 3;
	top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: clamp(16px, 2.2vw, 34px) clamp(20px, 3.2vw, 54px) clamp(10px, 1.2vw, 18px);
	/* すぐ下が写真の帯なので、以前の「下へ透けていくぼかし」はやめて地の色で切る。
	   スクロールしたとき写真が薄く透けて見えるのを避けるため。 */
	background: #fffdf7;
}

/* ロゴ＋島名。固定ヘッダーのロゴが真上にあるので、
   同じ絵を2つ縦に並べただけに見えないよう島名を添えている。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-mark {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	margin: 0;
	color: var(--wc-navy-soft);
	font-size: clamp(11px, 1vw, 13px);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-mark span {
	padding-left: clamp(10px, 1.2vw, 16px);
	border-left: 1px solid rgba(27, 58, 92, .22);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-logo {
	display: block;
	width: auto;
	height: clamp(22px, 2.1vw, 30px);
}

/* 細い×とCLOSE。線は currentColor なので hover は color だけ変えればよい */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
	/* 押せる範囲を48pxまで広げる（2026-09-09 実測: PC 47x47 / SP 47x41）。
	   線が細く CLOSE の字も小さいので、見た目の×（22〜28px）だけが的に見えて
	   「押しにくい」と言われていた。**描く大きさは変えず、余白で的だけ広げる。** */
	min-width: 48px;
	min-height: 48px;
	padding: 6px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wc-navy);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close .close-mark {
	position: relative;
	display: block;
	width: clamp(22px, 2vw, 28px);
	height: clamp(22px, 2vw, 28px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close .close-mark::before,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close .close-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close .close-mark::before { transform: rotate(45deg); }
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close .close-mark::after  { transform: rotate(-45deg); }

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close:hover {
	color: var(--wc-coral);
}

/* 押した手応え。的を広げても反応が無いと「効いていない」と感じるため */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close:active {
	transform: scale(.92);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-close:focus-visible {
	outline: 2px solid var(--wc-coral);
	outline-offset: 4px;
}

/* ── 上：挿絵 ──────────────────────────────
   **絵を切らない。** adventure-wc01〜08.jpg はどれも 800x550（1.4545:1）。
   これを width:100% ＋ 固定 height ＋ object-fit:cover で敷くと、
   1036x310 の帯に 1.45:1 の絵を流し込むことになり、上下を半分以上刈り取って
   キャラクターの頭と足が落ちる＝引き伸ばしたように見えていた。

   なので高さは指定せず（height:auto）、絵そのものの比率で出す。
   止めるのは幅のほうで、

     幅 = min( 紙の内側 , 620px , 58svh )

   3つ目の項があるので、背の低いウィンドウでは絵も一緒に小さくなり、
   「挿絵＋切り抜き＋説明文」がスクロールなしで収まる
   （58svh ＝ 高さにすると約 0.4 画面ぶん。1.4545 で割った値が絵の高さになる）。

   絵を差し替えても比率はファイル側から決まるので、ここは触らなくてよい。
   横幅いっぱいに敷き直したくなったら、まず上の「切らない」理由を読むこと。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-media {
	grid-column: 1;
	align-self: center;
	flex: 0 0 auto;
	margin: 0;
	padding: clamp(12px, 1.6vw, 22px) clamp(14px, 1.6vw, 26px) clamp(12px, 1.6vw, 22px) clamp(20px, 3.2vw, 54px);
	background: transparent;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-media img {
	display: block;
	/* 左段の幅はこの写真で決まるので、幅に % は使えない（自分の幅を自分で参照して循環する）。
	   50svh の項があるので背の低いウィンドウでは写真も縮み、紙がスクロールしない。 */
	width: min(520px, 50svh);
	max-width: 100%;
	height: auto;
	margin-inline: 0;
	border-radius: 10px;
	box-shadow: 0 14px 30px rgba(27, 58, 92, .14);
}

/* 写真のないスポット（暮らしの入り江）は枠じたいを出さない。
   左の段が空になるので、説明側を2段ぶち抜きにして元の横並び（切り抜き＋本文）へ戻す。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel.is-no-media .workstyle-island-panel-media {
	display: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel.is-no-media .workstyle-island-panel-inner {
	grid-column: 1 / -1;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: clamp(22px, 3.2vw, 52px);
	padding-left: clamp(20px, 3.2vw, 54px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel.is-no-media .workstyle-island-panel-spot {
	width: 28%;
}

/* ── 右の段：施設の切り抜き→見出し→本文の縦積み ────── */
/* align-items は flex-start。center にすると切り抜き・見出し・本文の左端が
   それぞれの幅ぶんだけ散らばって段違いに見えるので、左端を1本の線に揃える。
   左の padding が細いのは、隣が写真の段でそちらの余白と合わさるため。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-inner {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(14px, 1.8vw, 24px);
	padding: clamp(14px, 2vw, 30px) clamp(20px, 3.2vw, 54px) clamp(14px, 2vw, 30px) clamp(14px, 1.6vw, 26px);
}

/* 左：地図から切り出した施設の絵（透過PNG）。
   紙の上に置いた一点ものに見せたいので、枠も地も付けず落ち影だけにしている。
   素材は 338〜676px と小さいので、引き伸ばしすぎないよう max-width で止める。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot {
	flex: 0 0 auto;
	width: min(268px, 100%);
	margin: 0;
	text-align: left;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot:empty { display: none; }

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot img {
	display: block;
	width: 100%;
	/* 挿絵と同じで、背の低いウィンドウでは切り抜きも一緒に小さくする。
	   でないと「挿絵＋切り抜き＋説明文」が1画面に入らずパネルがスクロールする。 */
	max-width: min(300px, calc(var(--map-h) * .46));
	height: auto;
	margin: 0;
	filter: drop-shadow(0 18px 30px rgba(27, 58, 92, .18));
	animation: workstyleIslandCutIn .5s ease .06s both;
}

/* 右：見出しと本文。1行が長くなりすぎないよう max-width で止める */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-body {
	flex: 0 1 auto;
	min-width: 0;
	width: 100%;
	max-width: 34em;
	padding: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--wc-coral);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-kicker::before {
	content: "";
	width: clamp(18px, 2vw, 28px);
	height: 1px;
	background: currentColor;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel h2 {
	margin: 0 0 clamp(16px, 1.8vw, 26px);
	color: var(--wc-navy);
	font-size: clamp(21px, 2.3vw, 34px);
	font-weight: 900;
	/* 蛍光マーカーの斜線が下の行の頭に触れないよう、行間は広めに取る */
	line-height: 1.6;
}

/* 見出しの下に走る手書きの斜線。参考サイトの「マーカーで引いた」感を出す。
   box-decoration-break:clone で、折り返した2行目にもきちんと付く。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel h2 span {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 .08em .06em;
	background-image: repeating-linear-gradient(-48deg,
		rgba(232, 217, 184, .95) 0 2px,
		rgba(232, 217, 184, 0) 2px 7px);
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: auto .46em;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel .c-text {
	margin: 0;
	color: var(--wc-navy);
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 2.05;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 44px;
	margin-top: clamp(18px, 2.2vw, 28px);
	padding: 0 20px;
	/* 枠は透明のまま残す。白フチにすると濃紺の上で輪っかが目立って
	   エントリーボタンと別物に見えるため。太さは高さを変えないための保持。 */
	border: 2px solid transparent;
	border-radius: 999px;
	background-color: var(--btn-brand);
	background-image: var(--btn-brand-grad);
	box-shadow: 0 12px 26px rgba(0, 91, 167, .28), inset 0 -2px 0 rgba(5, 34, 68, .12);
	color: #fff;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta::after {
	content: "↓";
	margin-left: .55em;
	font-size: 1.08em;
	line-height: 1;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta:focus-visible {
	background-image: var(--btn-brand-grad-hover);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 91, 167, .34), inset 0 -2px 0 rgba(5, 34, 68, .12);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta:focus-visible {
	outline: 3px solid rgba(0, 91, 167, .45);
	outline-offset: 3px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta[hidden] {
	display: none;
}

/* ── 足元の署名（参考サイトのコピーライトの位置） ── */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-foot {
	grid-column: 1 / -1;
	flex: 0 0 auto;
	margin: 0;
	padding: 0 clamp(20px, 3.2vw, 54px) clamp(16px, 2vw, 28px);
	color: rgba(27, 58, 92, .40);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
}

@keyframes workstyleIslandCutIn {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* ■ 送る距離の出どころ（継ぎ目を出さないための計算）
   帯は傾いているので、縦にどれだけ送れば「帯1本ぶん」進むかは
   間隔 ÷ cos(傾き) になる。この値ちょうどで送ると1周して元の形に戻り、
   ループの折り返しで飛ばない。傾きか間隔を変えたら、必ず計算し直すこと。
     176deg → 190 ÷ cos(4°)  = 190.46      183deg → 300 ÷ cos(3°)  = 300.41
     171deg → 44×3 ÷ cos(9°) = 133.65      192deg → 76 ÷ cos(12°)  =  77.70
   ::before の1枚目（左下の深み）は動かさないので 0 のまま。 */
@keyframes workstyleIslandSwell {
	from { background-position: 0 0, 0 0, 0 0; }
	to   { background-position: 0 0, 0 190.46px, 0 300.41px; }
}
@keyframes workstyleIslandSparkle {
	from { background-position: 0 0, 0 0; }
	to   { background-position: 0 133.65px, 0 -77.70px; }
}
@keyframes workstyleIslandGlint {
	from { opacity: .34; }
	to   { opacity: .6; }
}
@keyframes workstyleIslandCloudDrift {
	0%   { opacity: 0; transform: translate3d(18vw, 12vh, 0) rotate(-13deg) scale(.98); }
	10%  { opacity: var(--cloud-alpha); }
	72%  { opacity: var(--cloud-alpha); }
	100% { opacity: 0; transform: translate3d(-128vw, -48vh, 0) rotate(-13deg) scale(.82); }
}

@keyframes workstyleIslandBirdFlight {
	0%   { opacity: 0; transform: translate3d(12vw, 8vh, 0) rotate(-18deg) scale(.98); }
	10%  { opacity: .86; }
	44%  { transform: translate3d(-44vw, -22vh, 0) rotate(-22deg) scale(.9); }
	74%  { opacity: .86; transform: translate3d(-86vw, -42vh, 0) rotate(-18deg) scale(.8); }
	100% { opacity: 0; transform: translate3d(-122vw, -58vh, 0) rotate(-21deg) scale(.72); }
}
@keyframes workstyleIslandBirdGlide {
	from { transform: translateY(-2px) scaleY(.82) skewX(-4deg) rotate(-1deg); }
	to   { transform: translateY(3px) scaleY(.86) skewX(-2deg) rotate(1.2deg); }
}
@keyframes workstyleIslandPin {
	0%, 100% { box-shadow: inset -4px -5px 0 rgba(159, 7, 21, .24), 0 0 0 5px var(--wc-pin-red-glow), 0 10px 22px rgba(21, 55, 94, .3); }
	50%      { box-shadow: inset -4px -5px 0 rgba(159, 7, 21, .24), 0 0 0 12px rgba(230, 0, 18, .07), 0 12px 26px rgba(21, 55, 94, .34); }
}

@keyframes workstyleIslandIntroBanner {
	from {
		opacity: 0;
		transform: translateY(18px) scale(.96);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ── SP ──────────────────────────────────────
   触るのは枠の高さ（--map-h）だけ。絵の実寸・ピンの層・海のマスクは
   すべて式で追従するので、ピンの座標は書き足さないこと。
   SPは 100vw÷1.5 ＝ 絵が横いっぱいに収まる高さになるので左右の余白は出ない。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero {
		--hdr: 74px;
		--map-h: calc(100svh - var(--hdr));
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle {
		top: 12px;
		right: 12px;
		min-width: 84px;
		min-height: 44px;   /* 実測38pxだった */
		padding: 0 14px;
		font-size: 13px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot { --pin: 24px; --tap: 44px; }
	body.recruit-test .spot-pin { border-width: 2px; }
	body.recruit-test .spot-label { padding: 4px 7px; font-size: 10px; border-radius: 5px; }

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-banner {
		padding: 100px 14px 14px; /* SPのヘッダーは約77px。上だけ空ける（PC側の注記と同じ理由） */
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-card {
		grid-template-columns: 1fr;
		gap: 10px;
		width: min(430px, calc(100vw - 28px));
		max-height: calc(100svh - 28px);
		padding: 52px 24px 34px;
		overflow-y: auto;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-close {
		top: 8px;
		right: 8px;
		width: 44px;   /* 実測40pxだった */
		height: 44px;
		font-size: 30px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-crew {
		max-height: 50svh;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-copy {
		padding: 0 4px;
		text-align: center;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-copy h2 {
		font-size: 28px;
	}

	/* SP は絵の横幅が足りないので、リードを重ねずマップの下に流す。
	   枠は「マップ（--map-h）＋リード」の縦積みで、合わせてほぼ画面いっぱいになる。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero {
		height: var(--map-h);
		background: #cfe6f2;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage {
		position: absolute;
		top: 50%;
		left: 50%;
		width: var(--art-w);
		height: var(--art-h);
		translate: -50% -50%;
	}

	/* hero は「マップ＋リード」の縦積みで height:auto。パネルは％では高さが決まらないので、
	   ヘッダーの下いっぱい＝1画面ぶんを明示する。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel {
		height: calc(100svh - var(--hdr));
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-01 {
		--cloud-y: 8%;
		--cloud-w: clamp(190px, 58vw, 260px);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-02 {
		--cloud-y: 42%;
		--cloud-w: clamp(230px, 70vw, 310px);
		--cloud-alpha: .34;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud.is-03 {
		display: none;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird-flight {
		top: 78%;
		left: auto;
		right: -24vw;
		width: clamp(48px, 15vw, 68px);
		animation-duration: 15s;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy {
		position: absolute;
		left: 18px;
		top: clamp(18px, 6vw, 34px);
		width: min(56vw, 240px);
		padding: 0;
	}

	/* SPはリードがマップの下＝もともと紙の上に出るので、敷き直さない */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy::before {
		display: none;
	}

	/* マップの下に出るので、開いていても引っ込める必要がない */
	body.recruit-test main#contents.recruit.workstyle.is-island-open .workstyle-island-hero-copy {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy .page-title,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-lead,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-note {
		text-shadow: none;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-note br { display: none; }

	/* SPは横に2段並べる幅がないので、切り抜き→見出し→本文→写真の縦積みに戻す。
	   パネルはほぼ画面幅まで広げて、参考サイトと同じ「紙が主役」の見え方を保つ。 */
	/* SPは2段組にする幅がないので、縦1列の並びに戻す。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel {
		display: flex;
		flex-direction: column;
		width: min(560px, 94vw);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-head {
		padding: 16px 18px 8px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-inner {
		display: block;
		padding: 4px 18px 20px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot {
		margin-bottom: clamp(14px, 4vw, 22px);
	}

	/* SPは横に2段並べる幅がないので、写真→切り抜き→説明文の縦積みに落とす。
	   1画面（--hdr を除いた高さ）に収まるよう、写真も切り抜きも詰めてある。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot img {
		width: min(190px, 62%);
		max-width: none;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-body {
		max-width: none;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta {
		width: 100%;
		min-height: 44px;   /* 実測42pxだった */
		margin-top: 16px;
		padding-inline: 14px;
	}

	/* SPは svh の項が効きすぎて絵が細くなるので、紙の幅から余白を引いたぶんまで
	   広げてよい。比率は PC と同じくファイル側（1.4545:1）任せ。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-media {
		padding: 12px 18px 0;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-media img {
		width: 100%;
		height: auto;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-foot {
		padding: 0 18px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::before,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage::after,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-cloud,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird-flight,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-intro-banner,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-bird-flight { display: none; }
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-map-art,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-sea,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta,
	body.recruit-test .spot-label { transition: none; }
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-spot img { animation: none; }
}

/* ────────────────────────────────────────────
   7. キャラ対話：水彩トーンに合わせ直す
   ──────────────────────────────────────────── */
body.recruit-test .p-test-qa {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		var(--wc-sky-pale) 40%,
		#dfeef7 70%,
		var(--wc-paper) 100%);
}
body.recruit-test .p-test-qa .test-qa-head {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: clamp(520px, 52vw, 650px);
	padding-top: clamp(52px, 6vw, 88px);
}
body.recruit-test .p-test-qa .test-qa-interview-visual {
	position: absolute;
	top: 49%;
	left: 50%;
	z-index: 0;
	width: min(118vw, 1520px);
	margin: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
body.recruit-test .p-test-qa .test-qa-interview-visual img {
	display: block;
	width: 100%;
	height: auto;
}
body.recruit-test .p-test-qa .test-qa-head-copy {
	position: relative;
	z-index: 1;
	width: min(560px, 100%);
	text-shadow: 0 2px 18px rgba(255, 253, 247, .88), 0 0 5px rgba(255, 253, 247, .94);
}
body.recruit-test .p-test-qa .test-qa-eyebrow { color: var(--wc-sea); }
body.recruit-test .p-test-qa .test-qa-title,
body.recruit-test .p-test-qa .test-qa-outro-text { color: var(--wc-navy); }
body.recruit-test .p-test-qa .test-qa-title-note {
	display: block;
	margin-top: clamp(10px, 1.2vw, 16px);
	font-size: clamp(19px, 2vw, 28px);
	font-weight: 700;
	line-height: 1.5;
	color: var(--wc-navy);
}
body.recruit-test .p-test-qa .test-qa-title-note:only-child {
	margin-top: 0;
}
body.recruit-test .p-test-qa .test-qa-lead { color: var(--wc-navy-soft); }
body.recruit-test .p-test-qa .test-qa-crew-panel {
	position: relative;
	width: min(600px, 100%);
	margin: clamp(24px, 3vw, 36px) auto 0;
	padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 24px) clamp(18px, 2.2vw, 24px);
	border: 2px solid rgba(143, 196, 228, .75);
	border-radius: 24px;
	background: #fffdf7;
	box-shadow: 0 14px 34px rgba(36, 94, 148, .14);
}
body.recruit-test .p-test-qa .test-qa-crew-panel::before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 78px;
	height: 14px;
	border-radius: 999px;
	background: var(--ch-abi);
	transform: translateX(-50%);
}
body.recruit-test .p-test-qa .test-qa-crew-heading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 92px;
	margin: 0 auto 14px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--wc-sky-pale);
	color: var(--wc-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
}
body.recruit-test .p-test-qa .test-qa-crew-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(70px, 1fr));
	gap: clamp(8px, 1.3vw, 14px);
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
body.recruit-test .p-test-qa .test-qa-crew-item {
	min-width: 0;
	text-align: center;
}
body.recruit-test .p-test-qa .test-qa-crew-window {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	width: clamp(78px, 8vw, 98px);
	height: clamp(78px, 8vw, 98px);
	margin: 0 auto 10px;
	overflow: hidden;
	border: 3px solid var(--ch-abi);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 18px rgba(36, 94, 148, .16);
}
body.recruit-test .p-test-qa .test-qa-crew-window img {
	width: auto;
	max-width: none;
	height: 116%;
	transform: translateY(5%);
}
body.recruit-test .p-test-qa .test-qa-crew-item.is-sukaro .test-qa-crew-window { border-color: var(--ch-scallo-mid); }
body.recruit-test .p-test-qa .test-qa-crew-item.is-nagi .test-qa-crew-window { border-color: var(--ch-nagi); }
body.recruit-test .p-test-qa .test-qa-crew-item.is-infi .test-qa-crew-window { border-color: var(--ch-infi); }
body.recruit-test .p-test-qa .test-qa-crew-item.is-nagi .test-qa-crew-window img {
	height: 108%;
	transform: translateY(1%);
}
body.recruit-test .p-test-qa .test-qa-crew-item.is-infi .test-qa-crew-window img {
	height: 98%;
	transform: translateY(4%);
}
body.recruit-test .p-test-qa .test-qa-crew-name,
body.recruit-test .p-test-qa .test-qa-crew-role {
	display: block;
	white-space: nowrap;
}
body.recruit-test .p-test-qa .test-qa-crew-name {
	font-size: clamp(11px, 1.2vw, 13px);
	font-weight: 700;
	line-height: 1.35;
	color: var(--wc-navy);
}
body.recruit-test .p-test-qa .test-qa-crew-role {
	margin-top: 2px;
	font-size: clamp(10px, 1vw, 11px);
	line-height: 1.35;
	color: var(--wc-navy-soft);
}
body.recruit-test .p-test-qa .test-qa-list {
	position: relative;
	z-index: 2;
	margin-top: 0;
}
body.recruit-test .p-test-qa .test-qa-row.is-aside {
	justify-content: flex-start;
	align-items: flex-end;
}
body.recruit-test .p-test-qa .test-qa-interview-stage .test-qa-balloon {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(620px, calc(100vw - clamp(36px, 8vw, 104px) - clamp(84px, 13vw, 148px) - clamp(12px, 2.2vw, 26px)));
	min-height: clamp(116px, 10vw, 142px);
}
body.recruit-test .p-test-qa .test-qa-interview-stage {
	position: relative;
	z-index: 2;
	width: 100vw;
	margin: clamp(-92px, -6.6vw, -56px) calc(50% - 50vw) 0;
	padding: clamp(86px, 8.8vw, 126px) clamp(18px, 4vw, 52px) clamp(84px, 8vw, 116px);
}
body.recruit-test .p-test-qa .test-qa-photo-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: 0;
	background: rgba(242, 249, 253, .9);
}
body.recruit-test .p-test-qa .test-qa-photo-layer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(90deg, rgba(242, 249, 253, .64) 0%, rgba(255, 253, 247, .18) 50%, rgba(242, 249, 253, .64) 100%),
		linear-gradient(180deg, rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .12) 48%, rgba(242, 249, 253, .58) 100%);
}
body.recruit-test .p-test-qa .test-qa-photo {
	position: absolute;
	z-index: 1;
	margin: 0;
	overflow: hidden;
	border-radius: 8px;
	opacity: .9;
	box-shadow: 0 12px 30px rgba(18, 58, 86, .12);
}
body.recruit-test .p-test-qa .test-qa-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.recruit-test .p-test-qa .test-qa-photo-01 {
	top: 2%;
	left: 3%;
	width: 58%;
	height: 25%;
}
body.recruit-test .p-test-qa .test-qa-photo-02 {
	top: 10%;
	right: 4%;
	width: 42%;
	height: 21%;
}
body.recruit-test .p-test-qa .test-qa-photo-03 {
	top: 32%;
	left: 2%;
	width: 46%;
	height: 22%;
}
body.recruit-test .p-test-qa .test-qa-photo-04 {
	top: 43%;
	right: 3%;
	width: 56%;
	height: 24%;
}
body.recruit-test .p-test-qa .test-qa-photo-05 {
	bottom: 10%;
	left: 4%;
	width: 52%;
	height: 23%;
}
body.recruit-test .p-test-qa .test-qa-photo-06 {
	right: 6%;
	bottom: 3%;
	width: 40%;
	height: 19%;
}

body.recruit-test .p-test-qa .test-qa-balloon {
	background: rgba(255, 255, 255, .96);
	border-color: #a9cfe6;
	border-radius: 22px;
	box-shadow: 0 12px 28px rgba(36, 94, 148, .16);
}
body.recruit-test .p-test-qa .test-qa-text { color: var(--wc-navy); }
body.recruit-test .p-test-qa .test-qa-text em {
	background: linear-gradient(transparent 62%, rgba(232, 217, 184, .95) 62%);
}
body.recruit-test .p-test-qa .is-sukaro .test-qa-balloon { border-color: #7b9ac2; }
body.recruit-test .p-test-qa .is-nagi   .test-qa-balloon { border-color: var(--wc-purple); }
body.recruit-test .p-test-qa .is-infi   .test-qa-balloon { border-color: var(--wc-coral); }
body.recruit-test .p-test-qa .test-qa-interview-stage .is-infi .test-qa-balloon {
	border-radius: 22px;
	padding: 20px 26px 22px;
}
body.recruit-test .p-test-qa .is-q .test-qa-balloon::before { border-right-color: #a9cfe6; }
body.recruit-test .p-test-qa .is-q .test-qa-balloon::after  { border-right-color: rgba(255, 253, 247, .92); }
body.recruit-test .p-test-qa .is-a .test-qa-balloon::before { border-left-color: #7b9ac2; }
body.recruit-test .p-test-qa .is-a .test-qa-balloon::after  { border-left-color: rgba(255, 253, 247, .92); }
body.recruit-test .p-test-qa .is-a.is-nagi .test-qa-balloon::before { border-left-color: var(--wc-purple); }

body.recruit-test .p-test-qa .test-qa-outro-btn a {
	background: var(--wc-coral);
	box-shadow: 0 8px 22px rgba(224, 89, 107, .3);
}
body.recruit-test .p-test-qa .test-qa-outro-btn a:hover {
	background: #cf4759;
}

body.recruit-test .p-test-qa .test-qa-outro {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: clamp(620px, 62vw, 820px);
	margin-top: clamp(72px, 9vw, 128px);
	padding: clamp(74px, 8vw, 118px) 0 clamp(58px, 6vw, 86px);
	overflow: visible;
	isolation: isolate;
}

body.recruit-test .p-test-qa .test-qa-outro::before {
	content: "";
	position: absolute;
	inset: 12% calc(50% - 50vw) 0;
	z-index: -1;
	background:
		linear-gradient(180deg,
			rgba(255, 253, 247, 0) 0%,
			rgba(220, 240, 255, .56) 42%,
			rgba(250, 244, 230, 0) 100%);
	pointer-events: none;
}

body.recruit-test .p-test-qa .test-qa-outro-visual {
	position: absolute;
	z-index: 2;
	top: 52%;
	left: 50%;
	width: min(1640px, 142vw);
	margin: 0;
	opacity: 1;
	filter: drop-shadow(0 26px 42px rgba(36, 72, 120, .24));
	pointer-events: none;
	transform-origin: 62% 54%;
	transform: translate(-50%, -50%);
	will-change: transform;
}

body.recruit-test .p-test-qa .test-qa-outro .test-qa-outro-visual,
body.recruit-test .p-test-qa.is-anim-ready .test-qa-outro [data-qa-chara],
body.recruit-test .p-test-qa.is-fallback-reveal .test-qa-outro [data-qa-chara],
body.recruit-test .p-test-qa.is-anim-ready .test-qa-outro:not(.is-shown) [data-qa-chara],
body.recruit-test .p-test-qa.is-fallback-reveal .test-qa-outro:not(.is-shown) [data-qa-chara] {
	opacity: 1;
	visibility: visible;
}

body.recruit-test .p-test-qa .test-qa-outro-visual img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 1;
	transform-origin: 62% 54%;
	animation:
		testQaOutroPop .85s cubic-bezier(.2, 1.24, .42, 1) both,
		testQaAdventureInvite 3.8s ease-in-out 1.05s infinite;
}

body.recruit-test .p-test-qa .test-qa-outro-text {
	position: relative;
	z-index: 5;
	width: min(760px, 92vw);
	margin: 0 auto clamp(214px, 24vw, 312px);
	font-size: clamp(64px, 7.8vw, 112px);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: 0;
	text-align: left;
	color: var(--wc-navy);
	text-shadow:
		0 2px 0 rgba(255, 255, 255, .9),
		0 8px 0 rgba(255, 255, 255, .72),
		0 18px 34px rgba(250, 244, 230, .98),
		0 0 48px rgba(250, 244, 230, .95);
	transform: translateX(-18vw) translateY(-2vw);
}

body.recruit-test .p-test-qa .test-qa-outro-btn {
	position: absolute;
	z-index: 6;
	left: 50%;
	bottom: clamp(72px, 6vw, 104px);
	margin-top: 0;
	translate: -50% 0;
}

body.recruit-test .p-test-qa .test-qa-outro-btn a {
	min-width: min(320px, 86vw);
	padding: 18px 44px;
	border: 2px solid rgba(255, 253, 247, .88);
	background: var(--ch-infi) !important;
	color: #fff !important;
	box-shadow:
		0 12px 28px rgba(224, 89, 107, .32),
		0 0 0 8px rgba(255, 168, 176, .16);
}

body.recruit-test .p-test-qa .test-qa-outro-btn a:hover {
	background: #cf4759 !important;
}

	@keyframes testQaOutroPop {
		0% {
			opacity: 1;
			transform: translate3d(30px, 32px, 0) scale(.9) rotate(-2.4deg);
		}
		72% {
			opacity: 1;
			transform: translate3d(-8px, -12px, 0) scale(1.07) rotate(.9deg);
		}
		100% {
			opacity: 1;
			transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
		}
	}

	@keyframes testQaAdventureInvite {
		0%, 100% {
			transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
		}
		38% {
			transform: translate3d(0, -8px, 0) scale(1.018) rotate(.7deg);
		}
		68% {
			transform: translate3d(0, -3px, 0) scale(1.008) rotate(-.45deg);
		}
	}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test .p-test-qa .test-qa-outro-visual img {
		animation: none;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-head {
		min-height: clamp(500px, 126vw, 640px);
		padding-top: clamp(34px, 9vw, 54px);
	}
	body.recruit-test .p-test-qa .test-qa-interview-visual {
		top: 41%;
		width: min(210vw, 940px);
	}
	body.recruit-test .p-test-qa .test-qa-head-copy {
		width: min(340px, 86vw);
	}
	body.recruit-test .p-test-qa .test-qa-crew-panel {
		width: min(318px, 100%);
		padding: 16px 14px 18px;
	}
	body.recruit-test .p-test-qa .test-qa-crew-list {
		grid-template-columns: repeat(2, minmax(92px, 1fr));
		width: 100%;
		gap: 10px 12px;
	}
	body.recruit-test .p-test-qa .test-qa-list {
		margin-top: 0;
	}
	body.recruit-test .p-test-qa .test-qa-row.is-aside {
		align-items: flex-start;
	}
	body.recruit-test .p-test-qa .test-qa-interview-stage .test-qa-balloon {
		width: 100%;
		min-height: 0;
	}
	body.recruit-test .p-test-qa .test-qa-interview-stage {
		width: 100vw;
		margin-top: clamp(-76px, -15vw, -42px);
		margin-inline: calc(50% - 50vw);
		padding: 64px 14px 62px;
	}
	body.recruit-test .p-test-qa .test-qa-photo {
		opacity: .82;
	}
	body.recruit-test .p-test-qa .test-qa-photo-01 {
		top: 2%;
		left: -18%;
		width: 82%;
		height: 17%;
	}
	body.recruit-test .p-test-qa .test-qa-photo-02 {
		top: 14%;
		right: -16%;
		width: 70%;
		height: 15%;
	}
	body.recruit-test .p-test-qa .test-qa-photo-03 {
		top: 31%;
		left: -22%;
		width: 72%;
		height: 16%;
	}
	body.recruit-test .p-test-qa .test-qa-photo-04 {
		top: 48%;
		right: -20%;
		width: 78%;
		height: 17%;
	}
	body.recruit-test .p-test-qa .test-qa-photo-05 {
		bottom: 16%;
		left: -14%;
		width: 72%;
		height: 16%;
	}
	body.recruit-test .p-test-qa .test-qa-photo-06 {
		right: -12%;
		bottom: 3%;
		width: 66%;
		height: 14%;
	}
	body.recruit-test .p-test-qa .test-qa-outro {
		min-height: clamp(650px, 170vw, 760px);
		margin-top: 56px;
		padding: 62px 0 46px;
	}
	body.recruit-test .p-test-qa .test-qa-outro-visual {
		top: 55%;
		width: min(760px, 194vw);
	}
	body.recruit-test .p-test-qa .test-qa-outro-text {
		width: min(356px, 90vw);
		margin-bottom: clamp(198px, 54vw, 254px);
		font-size: clamp(42px, 12vw, 58px);
		line-height: 1.18;
		transform: translateX(-2vw) translateY(-5vw);
	}
	body.recruit-test .p-test-qa .test-qa-outro-btn {
		bottom: 92px;
		margin-top: 0;
	}
	body.recruit-test .p-test-qa .test-qa-outro-btn a {
		min-width: min(286px, 86vw);
		padding: 16px 32px;
	}
}

/* ────────────────────────────────────────────
   8. フッター
   ──────────────────────────────────────────── */
body.recruit-test footer {
	background: var(--wc-paper-deep);
	color: var(--wc-navy);
}

/* ── 水飛沫の見え方の修正 ──────────────────────
   白い泡を明るい空の上に置いていたので見えていなかった。
   舳先の波しぶきが立つ位置（画面下寄り＝濃い海の上）から出す。 */
body.recruit-test #test-splash-mv .test-drop {
	top: 74%;
	left: 44%;
	width: 168px;
	height: 168px;
	margin: -84px 0 0 -84px;
	filter: drop-shadow(0 2px 5px rgba(23, 62, 100, .28));
}
@media screen and (max-width: 768.999px) {
	body.recruit-test #test-splash-mv .test-drop {
		width: 104px;
		height: 104px;
		margin: -52px 0 0 -52px;
	}
}

/* ── ヘッダー：白抜き前提だったナビを紺に ────── */
body.recruit-test #globalHeader .global-navi .nav-top a,
body.recruit-test #globalHeader .global-navi .nav-top a span,
body.recruit-test #globalHeader .global-navi .nav-btm ul li a,
body.recruit-test #globalHeader .global-navi .nav-btm ul li a span {
	color: var(--wc-navy);
	text-shadow: 0 1px 8px rgba(250, 244, 230, .95);
}
body.recruit-test #globalHeader .global-navi .nav-top a::after {
	filter: brightness(0) saturate(100%) invert(15%) sepia(30%) saturate(1400%) hue-rotate(178deg);
}
body.recruit-test #globalHeader .global-navi .nav-btm .btn a {
	background-color: var(--wc-coral);
}

/* 紙目はヘッダー帯では邪魔なので少し弱める */
body.recruit-test::before {
	opacity: .18;
}

/* ============================================================
   9. 原色の追放 ／ キャラクターのパステル色に統一
   ------------------------------------------------------------
   色はキービジュアル（水彩）から実際に抽出した各キャラの色。
     スカロ  #244878  紺
     アビー  #6cb4e4  水色
     ナギ    #a884cc  藤
     インフィ #f07884  珊瑚
   これを淡くしたものをボタン地に使い、文字は紺にする。
   彩度を上げて白文字にするとパキパキが戻るため、その逆をやっている。

   ※ 社内のカラーパレット（社長室/ブランド/colors.md）の
      Primary #005CA7・Accent #F0C93A は彩度が高く、
      「奇抜な青とオレンジをなくしたい」という方針と衝突するため
      ここでは採用していない。
   ============================================================ */
body.recruit-test {
	--ch-scallo:      #244878;
	--ch-scallo-mid:  #506f98;
	--ch-scallo-pale: #d5e0ef;

	--ch-abi:         #6cb4e4;
	--ch-abi-mid:     #a3daff;
	--ch-abi-pale:    #dcf0ff;

	--ch-nagi:        #a884cc;
	--ch-nagi-mid:    #d4b7f1;
	--ch-nagi-pale:   #efe4fb;

	--ch-infi:        #f07884;
	--ch-infi-mid:    #ffa8b0;
	--ch-infi-pale:   #ffdde0;

	/* 既存変数もキャラ色に寄せ直す */
	--wc-navy:   #244878;
	--wc-sea:    #6cb4e4;
	--wc-purple: #a884cc;
	--wc-coral:  #f07884;

	/* ── 誘導ボタンの地色：出どころはここ1か所（2026-09-14） ──
	   ヘッダーのエントリー、募集要項の応募する、そしてバナー
	   （Company Deck ／ 働き方の島パネル）の誘導ボタンまで全部これを使う。
	   バナーだけ別の水色→オレンジを持っていて色がズレたので、変数に寄せた。
	   値を変えるときはここだけ。個別のルールに色を直書きしないこと。 */
	--btn-brand:            #005ba7;
	--btn-brand-grad:       linear-gradient(120deg, #004e91 0%, #0063ac 58%, #00a3dd 100%);
	--btn-brand-hover:      #004a8a;
	--btn-brand-grad-hover: linear-gradient(120deg, #003f78 0%, #005293 58%, #008cc4 100%);
}

/* ── 主ボタン（エントリー）：オレンジ #f34f0e を追放 ── */
/* 応募系ボタンはコーポレートカラー（2026-09-10）。
   ------------------------------------------------------------
   ここは元々キャラのピンク（--ch-infi-mid #ffa8b0）だった。周りが紺〜水色の
   水彩なので、募集要項の中の「応募する」だけ浮いて見えるという指摘。
   本番 style.css で使われているブランドの青（#005ba7 ／ #00b0ec）に寄せる。

   **グラデーションの向きと止め位置に理由がある。**
   白文字は明るい水色の上では読めない（#00b0ec ベタだと白で 2.52:1 ＝ WCAG AA 未達）。
   なので明るい側は右端だけの差し色にして、**文字が乗る中央は濃い側**に置いてある。
   角度と 58% の止め位置はそのための数字。ここを動かすなら白文字のコントラストを測り直すこと。 */
body.recruit-test #globalHeader .global-navi .nav-btm .btn a,
body.recruit-test main#contents.recruit.test-tone .btn a,
body.recruit-test .p-test-qa .test-qa-outro-btn a {
	background-color: var(--btn-brand) !important;
	background-image: var(--btn-brand-grad) !important;
	color: #fff !important;
	font-weight: 700;
	box-shadow: 0 6px 18px rgba(0, 91, 167, .3);
}
body.recruit-test #globalHeader .global-navi .nav-btm .btn a:hover,
body.recruit-test main#contents.recruit.test-tone .btn a:hover,
body.recruit-test .p-test-qa .test-qa-outro-btn a:hover {
	background-color: var(--btn-brand-hover) !important;
	background-image: var(--btn-brand-grad-hover) !important;
	color: #fff !important;
	opacity: 1;
}

body.recruit-test .p-test-qa .test-qa-outro-btn a {
	min-width: min(320px, 86vw);
	padding: 18px 44px;
	border: 2px solid rgba(255, 253, 247, .88);
	background: var(--ch-infi) !important;
	background-image: none !important;
	color: #fff !important;
	box-shadow:
		0 12px 28px rgba(224, 89, 107, .32),
		0 0 0 8px rgba(255, 168, 176, .16);
}

/* ── 副ボタン（VIEW MORE 等）：青グラデを追放 ── */
body.recruit-test main#contents.recruit.test-tone a.op,
body.recruit-test main#contents.recruit.test-tone .op {
	background-image: none !important;
	background-color: var(--ch-abi-mid) !important;
	color: var(--ch-scallo) !important;
}
body.recruit-test main#contents.recruit.test-tone a.op:hover {
	background-color: var(--ch-abi) !important;
	color: #fff !important;
}

/* ── サブコピーのオレンジ ── */
body.recruit-test main#contents.recruit.index .con-mv .sub-text {
	color: var(--ch-scallo-mid);
}

/* ── ページ内に残る青グラデの帯・線をパステルに ── */
body.recruit-test main#contents.recruit.test-tone [class*="c-"][style*="gradient"],
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title::after,
body.recruit-test main#contents.recruit.test-tone .box-headline::after {
	background-image: linear-gradient(to right, var(--ch-abi-mid), var(--ch-nagi-mid)) !important;
}

/* ── SPメニューのバー ── */
body.recruit-test #globalHeader .sp-menu span,
body.recruit-test #globalHeader.scrolled .sp-menu:not(.active) span {
	background-image: none !important;
	background-color: var(--ch-scallo) !important;
}

/* ── 対話セクションも4キャラの色に揃える ── */
body.recruit-test .p-test-qa .is-abi .test-qa-balloon,
body.recruit-test .p-test-qa .is-q .test-qa-balloon { border-color: var(--ch-abi); }
body.recruit-test .p-test-qa .is-sukaro .test-qa-balloon { border-color: var(--ch-scallo-mid); }
body.recruit-test .p-test-qa .is-nagi .test-qa-balloon { border-color: var(--ch-nagi); }
body.recruit-test .p-test-qa .is-infi .test-qa-balloon { border-color: var(--ch-infi); }
body.recruit-test .p-test-qa .is-q .test-qa-balloon::before { border-right-color: var(--ch-abi); }
body.recruit-test .p-test-qa .is-a .test-qa-balloon::before { border-left-color: var(--ch-scallo-mid); }
body.recruit-test .p-test-qa .is-a.is-nagi .test-qa-balloon::before { border-left-color: var(--ch-nagi); }
body.recruit-test .p-test-qa .test-qa-name { color: var(--ch-scallo-mid); }
body.recruit-test .p-test-qa .is-nagi .test-qa-name { color: #7a5ea8; }
body.recruit-test .p-test-qa .is-infi .test-qa-name { color: #c4566a; }
body.recruit-test .p-test-qa .test-qa-eyebrow { color: var(--ch-abi); }
body.recruit-test .p-test-qa .test-qa-text em {
	background: linear-gradient(transparent 62%, var(--ch-infi-pale) 62%);
}

/* ============================================================
   10. 構図の調整（見出しと乗組員を重ねない）
   ------------------------------------------------------------
   background-size: cover のままだと、1440x900 で空の帯が
   ヘッダー下から乗組員の帽子まで約186pxしかなく、
   118px×2行（278px）の見出しが必ず顔にかぶる。
   絵を少し寄せて上端を基準にし、乗組員を下へ送って場所を作る。
   左右は多少切れるが、主役（乗組員と舳先）は中央なので影響が小さい。
   ============================================================ */
/* 見出しは「左下・左揃え」。ディンプスと同じ置き方
     .row1 { left: 2rem; bottom: 14.4rem } / .row2 { left: 2rem; bottom: 2rem }

   絵の見せ方は逆算した。1440x900・auto 135%・下端基準のとき
     画像の高さ = 900 x 1.35 = 1215
     顔の下端   = 0.72 x 1215 - 315(上の切れ) = 560px
     見出しの上端 = 900 - 60(下余白) - 278(118px x 1.18 x 2行) = 562px
   → 顔の直下から文字が始まる。文字が乗るのは船体と海の面だけになる。 */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv {
	background-size: auto 135%;
	background-position: center bottom;
	justify-content: flex-end;
	align-items: flex-start;
	text-align: left;
	padding: 120px clamp(24px, 5vw, 76px) clamp(52px, 6.5vw, 76px);
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .main-text {
	text-align: left;
	margin: 0;
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .test-splash {
	z-index: 3;
}

/* 上の淡い層は、文字が乗る範囲だけに絞って薄くする */
/* 文字が乗るのは左下になったので、淡い層もそちらへ移す */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv::before {
	inset: auto 0 0 0;
	height: 58%;
	background: linear-gradient(9deg,
		rgba(250, 246, 238, .92) 6%,
		rgba(243, 248, 252, .62) 42%,
		rgba(243, 248, 252, 0) 92%);
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .main-text {
	text-shadow:
		0 2px 14px rgba(252, 249, 242, .92),
		0 0 34px rgba(252, 249, 242, .8);
}

/* ── 水飛沫：キャラに白い靄をかけないよう、海面の高さに留める ── */
body.recruit-test #test-splash-mv .test-drop {
	top: 90%;
	left: 46%;
	width: 148px;
	height: 148px;
	margin: -74px 0 0 -74px;
	opacity: .85;
}
@media screen and (max-width: 768.999px) {
	body.recruit-test #test-splash-mv .test-drop {
		width: 92px;
		height: 92px;
		margin: -46px 0 0 -46px;
	}
}

/* ── ヘッダー：紙目だけが乗って灰色の帯に見えていたので、紙の地を敷く ──
   停止位置を4つにしている。元は 0% .92 → 62% .72 → 100% 0 の3点で、
   62%以降が一気に抜けていた。ナビの文字は高さ70〜87px（ヘッダーは124px）＝
   ちょうどその抜けた帯にあり、紙の地が効かないまま絵の上に置かれていた。
   84%まで .38 を残して最後だけ抜くと、下端の継ぎ目は出さずに文字の行だけ守れる。 */
body.recruit-test #globalHeader {
	background: linear-gradient(180deg,
		rgba(252, 249, 242, .95) 0%,
		rgba(252, 249, 242, .82) 58%,
		rgba(252, 249, 242, .38) 84%,
		rgba(252, 249, 242, 0) 100%);
}

/* ── ヘッダーのナビ（会社を知る／働き方を知る）に紙の板を敷く ──────
   上のグラデを濃くしても、文字の可読性を「背後の絵」に預けている限り
   MVを描き替えるたびに振り出しに戻る。index はピンクのインフィ、
   会社を知るは教会と木立ちが文字の真後ろに来ていて、実際に読めなかった。

   そこで文字に自前の地を持たせる＝島MVのスポット名（白い角丸の札）と
   同じ手にした。これで背後が何色でも読める。隣の「エントリー」も
   同じ角丸なので、3つ並んで導線に見える（ユーザーもこれを
   「各ページに飛ぶボタン」と呼んでいた＝板があるほうが実態に合う）。

   PC限定。SPのナビは全面ドロワーで既に地があり、板を足すと二重になる。
   板ができたので、滲みで浮かせていた text-shadow は外す（字が甘くなる）。 */
@media screen and (min-width: 769px) {
	body.recruit-test #globalHeader .global-navi .nav-btm ul {
		gap: 0 12px; /* 板の左右padding分、間隔を詰めて群に見せる */
	}
	body.recruit-test #globalHeader .global-navi .nav-btm ul li a {
		display: block; /* inline のままでは上下の padding が効かない */
		padding: 9px 18px;
		border-radius: 9999px;
		background-color: rgba(255, 253, 247, .9);
		box-shadow: 0 2px 10px rgba(36, 72, 120, .1);
		transition: background-color .3s, box-shadow .3s;
	}
	body.recruit-test #globalHeader .global-navi .nav-btm ul li a,
	body.recruit-test #globalHeader .global-navi .nav-btm ul li a span {
		text-shadow: none;
	}
}
@media screen and (min-width: 769px) and (max-width: 950px) {
	body.recruit-test #globalHeader .global-navi .nav-btm ul li a {
		padding: 8px 14px;
	}
}
@media screen and (min-width: 769px) and (hover: hover) {
	/* 元は opacity:.5 で薄くする作り。板ごと透けて背後の絵が出てくるので、
	   透明度ではなく板の濃さと影で反応させる */
	body.recruit-test #globalHeader .global-navi .nav-btm ul li a:hover {
		opacity: 1;
		background-color: #fffdf7;
		box-shadow: 0 4px 14px rgba(36, 72, 120, .18);
	}
}

/* 水飛沫は舳先の波が立つ高さへ */
body.recruit-test #test-splash-mv .test-drop {
	top: 86%;
	left: 44%;
}

/* 日本語はどこでも折り返すので「会社だ／ロ。」のように語尾が切れる。
   文節単位で折り返す（未対応ブラウザは従来どおりの折り返しに戻るだけ） */
body.recruit-test .p-test-qa .test-qa-text,
body.recruit-test main#contents.recruit.index .c-text {
	word-break: auto-phrase;
}

/* ============================================================
   11. 取り残していた原色の掃除
   ------------------------------------------------------------
   ページ全体を撮って高彩度ピクセルを走査したところ、
   下記4箇所にオレンジ #f34f0e と原色の青が残っていた。
   あわせて、白抜き前提の文字が淡い地の上で読めなくなっていた
   箇所（当方の変更で発生）も直す。
   ============================================================ */

/* ── ① フッター：真っ黒 + 青いグリッド画像 ── */
body.recruit-test footer {
	background-image: none !important;
	background-color: var(--wc-paper-deep) !important;
	color: var(--ch-scallo) !important;
}
body.recruit-test footer * {
	color: var(--ch-scallo) !important;
	border-color: rgba(36, 72, 120, .22) !important;
}
body.recruit-test footer a:hover { color: var(--ch-abi) !important; }
/* 背景画像を持つ内側の要素も潰す */
body.recruit-test footer [class*="bg"],
body.recruit-test footer::before,
body.recruit-test footer::after {
	background-image: none !important;
}

/* ── ② 応募ブロック（entry-bg.png の原色ブルー） ──
   **ここで [class*="entry"] を使わないこと（2026-09-14）。**
   クラス名に entry を含むだけの別物にまで淡い水色の地が乗る。実害が出ていたのは
     ・会社を知るのMVピン    .test-company-mv-pin.is-entry ＝ピンの後ろに水色の丸
     ・追従の応募ボタン      .p-test-entry-float           ＝コンパスの後ろに水色の丸
     ・Q&Aの宝箱リンク       .test-qa-treasure-entry       ＝宝箱の後ろに水色の四角
     ・募集要項の入れ物      .entry-list                   ＝カードの隙間が水色の帯
   前3つは自分側で background: transparent !important を持っていたのに、
   こちらは #contents のぶんだけ強いので全部負けていた。打ち返しでは止まらない。

   原色ブルーが実際に敷かれているのは次の2か所だけで、どちらも名指しのルールが
   すでにある。ここでまとめて塗る必要はないので、この節は当たり先の道案内だけ残す。
     ・下層3ページの「応募する」    .recruit-entry-btn a  → 19-8（珊瑚の淡色 + 紺文字）
     ・トップ募集要項カードの応募   .apply-btn            → この下の⑥（--ch-abi-pale）
   応募まわりの色を変えるときは、その2か所を直す。 */

/* ── ③ FAQ の「Q」マーク（オレンジ） ── */
body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-right .faq-list .list-item .question::before {
	color: var(--ch-abi) !important;
}
/* FAQ カードの地も紙に寄せる */
body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-right .faq-list .list-item {
	background-color: rgba(255, 253, 247, .82) !important;
	border: 1px solid rgba(36, 72, 120, .12);
}

/* ── ④ 社員紹介カードの部署ラベル（オレンジ） ── */
body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list .list-item a .item-meta {
	color: var(--ch-nagi) !important;
}

/* ── ⑤ 白抜き文字の読めない箇所を紺へ ──
   もともと濃紺の地に白文字で置かれていたものが、
   地を紙に変えたことで読めなくなっていた。 */
body.recruit-test main#contents.recruit.index .con-box02,
body.recruit-test main#contents.recruit.index .con-box02 *,
body.recruit-test main#contents.recruit.index .con-box03,
body.recruit-test main#contents.recruit.index .con-box03 *,
body.recruit-test main#contents.recruit.index .con-box04,
body.recruit-test main#contents.recruit.index .con-box04 * {
	text-shadow: none;
}
body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .c-recruit-section-title,
body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .c-recruit-section-title span,
body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list .list-item a .item-catch,
body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list .list-item a p {
	color: var(--ch-scallo) !important;
}
/* 白 or 限りなく白に近い文字を一括で紺に落とす保険 */
body.recruit-test main#contents.recruit.index .con-box02 [class*="title"],
body.recruit-test main#contents.recruit.index .con-box03 [class*="title"],
body.recruit-test main#contents.recruit.index .con-box04 [class*="title"],
body.recruit-test main#contents.recruit.index .con-box02 [class*="catch"],
body.recruit-test main#contents.recruit.index .con-box03 [class*="catch"],
body.recruit-test main#contents.recruit.index .con-box04 [class*="catch"] {
	color: var(--ch-scallo) !important;
}

/* ============================================================
   12. 社名の由来セクション（parts/test-origin.php）
   ============================================================ */
body.recruit-test .p-test-origin {
	position: relative;
	padding-block: clamp(72px, 11vw, 140px);
	background:
		linear-gradient(180deg,
			var(--wc-paper) 0%,
			#eaf4fb 30%,
			#dcedf8 66%,
			var(--wc-paper) 100%);
	overflow: hidden;
}

body.recruit-test .p-test-origin .test-origin-sea {
	position: absolute;
	inset: 14% -8% auto;
	height: 56%;
	background:
		radial-gradient(ellipse at 18% 50%, rgba(108, 180, 228, .22), rgba(108, 180, 228, 0) 56%),
		radial-gradient(ellipse at 78% 42%, rgba(168, 132, 204, .16), rgba(168, 132, 204, 0) 52%),
		linear-gradient(115deg, rgba(255, 255, 255, 0) 0 24%, rgba(255, 255, 255, .55) 25% 26%, rgba(255, 255, 255, 0) 27% 100%);
	opacity: .9;
	transform: rotate(-2deg);
	pointer-events: none;
}
body.recruit-test .p-test-origin .c-inner {
	position: relative;
}

body.recruit-test .p-test-origin .test-origin-hero {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
	align-items: center;
	gap: clamp(28px, 5vw, 70px);
}
body.recruit-test .p-test-origin .test-origin-copy {
	position: relative;
	z-index: 2;
}
body.recruit-test .p-test-origin .test-origin-eyebrow {
	margin: 0 0 14px;
	font-family: "Jost", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--ch-abi);
}
body.recruit-test .p-test-origin .test-origin-title {
	margin: 0;
	font-size: clamp(30px, 5vw, 58px);
	font-weight: 700;
	line-height: 1.34;
	color: var(--ch-scallo);
}

body.recruit-test .p-test-origin .test-origin-lead {
	margin: clamp(20px, 2.8vw, 30px) 0 0;
	font-size: clamp(16px, 1.8vw, 20px);
	line-height: 1.9;
	color: var(--ch-scallo);
	word-break: auto-phrase;
}
body.recruit-test .p-test-origin .test-origin-lead em {
	font-style: normal;
	font-family: "Jost", sans-serif;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--ch-abi);
}
body.recruit-test .p-test-origin .test-origin-lead strong {
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--ch-abi-mid) 62%);
}
body.recruit-test .p-test-origin .test-origin-note {
	margin: clamp(16px, 2.2vw, 24px) 0 0;
	font-size: clamp(14px, 1.55vw, 16px);
	line-height: 2;
	color: #3c5b7c;
	word-break: auto-phrase;
}
body.recruit-test .p-test-origin .test-origin-visual {
	position: relative;
	z-index: 1;
	margin: 0;
}
body.recruit-test .p-test-origin .test-origin-visual::before {
	content: "";
	position: absolute;
	inset: 8% 8% -4%;
	background: rgba(108, 180, 228, .2);
	filter: blur(34px);
	z-index: -1;
}
body.recruit-test .p-test-origin .test-origin-visual img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(36, 72, 120, .16);
}
@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-origin .test-origin-hero {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	body.recruit-test .p-test-origin .test-origin-copy {
		text-align: left;
	}
}

/* ── ⑥ 応募ブロック（トップの募集要項カード）。原色ブルーの当たり先は
      入れ物ではなく中の .apply-btn。②から名指しで回ってくるのはここ ── */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn {
	background-image: none !important;
	background-color: var(--ch-abi-pale) !important;
	color: var(--ch-scallo) !important;
	border: 1px solid rgba(36, 72, 120, .14);
}
/* 中の文字を紺にするのは説明文だけ。`* {}` で一括に落とすと、
   同じ中にいる「応募する」の白文字まで紺になる（2026-09-14）。
   あのボタンの地はブランドブルーのベタなので、紺だと約1.3:1 で沈む。
   色の出どころは「主ボタン（エントリー）：オレンジ #f34f0e を追放」の
   #fff ＝ .test-tone .btn a。ここで触らなければそちらが効く。 */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn p {
	color: var(--ch-scallo) !important;
	text-shadow: none !important;
}

/* ── ⑦ フッター上部の問い合わせ帯（濃紺のベタ） ── */
body.recruit-test footer .footer-contact {
	background-image: none !important;
	background-color: var(--ch-abi-pale) !important;
}
body.recruit-test footer .footer-contact * {
	color: var(--ch-scallo) !important;
}
body.recruit-test footer .footer-contact .btn a {
	background-color: #fdfbf5 !important;
	border-color: var(--ch-scallo) !important;
}

/* ── ⑧ フッターのロゴ ──
   footer-logo.png は濃い地に置く前提のシアングラデーション版。
   紙の地では浮くので、ヘッダーで使っている黒版に差し替える。 */
body.recruit-test footer .logo img {
	content: url("../images/common/header-logo.png");
	width: auto;
	max-width: 100%;
	height: auto;
}

/* スクロール誘導は左下の見出しとぶつかるので右端へ逃がす */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .test-mv-scroll {
	left: auto;
	right: clamp(24px, 4vw, 56px);
	bottom: 28px;
	transform: none;
}

/* 水飛沫は文字の後ろではなく、右寄りの舳先から出す */
body.recruit-test #test-splash-mv .test-drop {
	top: 78%;
	left: 62%;
}

/* ============================================================
   13. 代表者名（筆文字）を黒に
   ------------------------------------------------------------
   name.png は濃紺の地に置く前提の「白い」筆文字。紙の地では
   ほぼ見えないので、アルファを保ったまま黒く落とす。
   brightness(0) は不透明ピクセルだけを黒にするので、筆の
   かすれ（半透明部分）はそのまま濃淡として残る。
   ※ /recruit/ の同じ画像には影響しない（このCSSは
     /recruit-test/ でのみ読み込まれる。inc/assets.php:125）
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box01 .box02 .inner-box .inner-box-content .name img {
	filter: brightness(0);
}
/* 添え書きの「代表取締役」も同じ黒で揃える */
body.recruit-test main#contents.recruit.index .con-box01 .box02 .inner-box .inner-box-content .name span {
	color: #000;
}

/* ============================================================
   15. 追従する応募ボタン（parts/test-entry-float.php）
   ------------------------------------------------------------
   桑沢の `.requestLink` の移植。あちらの実装はこうなっている。

     position:fixed; right:calc((100% - 1175px)/2); bottom:50px;
     visibility:hidden; opacity:0;   ← 既定は隠す
     .active { visibility:visible; opacity:1 }
     .hide   { visibility:hidden;  opacity:0 }   ← ページ末尾で退場

   right を「画面の端」ではなく「本文カラムの端」に合わせているのが要点。
   浮いているのに本文と縦のラインが揃うので、貼り付けた感じが出ない。
   ここも同じ手を使い、`.c-inner`（max-width:1100px）の右端に寄せている。
   ただし広い画面だと端から離れすぎるので 72px で打ち止めにした。

   見た目は Image 2.0 生成の完成版コンパスボタン。
   「Entry / 応募する」も画像内に入れ、周囲の水彩画と同じ筆致に揃える。

   .is-shown の付け外しは assets/js/recruit-test-splash.js の末尾。
   退場の的（本物の応募ボタンとフッター）は3ページ分をJS側でまとめて
   見ている。判定はボタンの実寸（offsetHeight）から決めているので、
   ここで大きさを変えるとフッター際で消える位置も一緒に動く＝JSは触らなくてよい。
   ============================================================ */
body.recruit-test .p-test-entry-float {
	position: fixed;
	z-index: 15; /* ヘッダー(20)より下・社員紹介モーダル(1000)より下。紙目(0)より上 */
	right: clamp(20px, calc((100% - 1100px) / 2), 72px);
	bottom: clamp(20px, 4vh, 46px);

	display: block;
	width: clamp(118px, 12vw, 150px);
	height: clamp(118px, 12vw, 150px);
	border: 0;
	border-radius: 50%;

	background: transparent !important;
	text-decoration: none;
	filter: drop-shadow(0 12px 20px rgba(36, 72, 120, .22));

	/* 既定は退場した状態。JSが .is-shown を付けるまでこのまま。

	   出入りで速さを変えている。登場はゆっくり（下の .is-shown 側で .34s）、
	   退場はここで .18s ＋ 加速するイージング＝スッと引っ込む。
	   往復を同じ .38s ease にしていたため、フッター際でぬるっと居残って
	   見えていた。消えるときは短く、落ちる向き（下＋縮小）に逃がす。
	   visibility は離散値なので、透明度が0になるまで visible のまま
	   ＝フェードは最後まで見える（.18s は待ってから hidden になる）。 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(26px) scale(.84) rotate(-6deg);
	pointer-events: none;
	transition:
		opacity .18s cubic-bezier(.4, 0, 1, 1),
		visibility .18s,
		transform .18s cubic-bezier(.4, 0, 1, 1),
		filter .25s ease;
}

body.recruit-test .p-test-entry-float.is-shown {
	opacity: 1;
	visibility: visible;
	transform: rotate(-3deg);
	pointer-events: auto;
	/* 登場側。退場より遅らせて、最後に軽く落ち着かせる */
	transition:
		opacity .34s ease,
		visibility .34s,
		transform .34s cubic-bezier(.22, .8, .28, 1),
		filter .25s ease;
}

body.recruit-test .p-test-entry-float:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 4px;
	filter:
		drop-shadow(0 12px 22px rgba(36, 72, 120, .24))
		drop-shadow(0 0 0 #244878);
}

body.recruit-test .p-test-entry-float img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media (hover: hover) {
	body.recruit-test .p-test-entry-float:hover {
		filter: drop-shadow(0 16px 28px rgba(36, 72, 120, .3));
		transform: translateY(-4px) rotate(2deg) scale(1.04);
	}
}

/* SP：桑沢も50pxまで縮めている。親指の届く右下に、本文を隠さない大きさで置く */
	@media screen and (max-width: 768.999px) {
		body.recruit-test .p-test-entry-float {
			right: 10px;
			bottom: 10px;
			width: 94px;
			height: 94px;
		}
	}

/* 動きを減らす設定の人には、出入りだけ即時にする（ボタン自体は出す） */
@media (prefers-reduced-motion: reduce) {
	body.recruit-test .p-test-entry-float,
	body.recruit-test .p-test-entry-float.is-shown {
		/* 出入りの動きは殺す（消えるのは即時）。傾きは動きではなく
		   見た目なので、隠れている側にも同じ値を置いて動かさない */
		transform: rotate(-3deg);
		transition: none;
	}
}

/* 印刷では邪魔なので出さない */
@media print {
	body.recruit-test .p-test-entry-float {
		display: none;
	}
}

/* ============================================================
   16. タイトル周りの整理
   ------------------------------------------------------------
   ① ビジョンの英字「Only Digital Adventure」を主役サイズに上げる。
      同じ <p> の中に日本語のビジョンが <br> で続いているので、
      英字だけを span（.test-vision-en）で囲んで指定している
      （page-recruit-test.php 側）。

   ② 英字のセクションタイトルの色とサイズを揃える。
      Top Message ／ Why “All Blue” ／ Ask the Crew は
      どれも「セクションの名札」で役割が同じなのに、
        Top Message  20px ・ #245e94（--wc-sea-deep）
        Why “All Blue” 14px ・ #6cb4e4（--ch-abi）
        Ask the Crew   14px ・ #6cb4e4（--ch-abi）
      と大きさも色もばらけていた。海の深い青に統一して一段上げる。
      淡い #6cb4e4 は紙の地（#faf4e6）に対して2.2:1しかなく
      読みづらかったので、7:1台まで上がる副次効果もある。

   ③ What’s All Blue? だけ原色の青 #171d99 が残っていた。
      style.css 側のセレクタが `.box-headline .main` で、
      セクション4の上書き（`.box-headline`）より詳細度が高く
      すり抜けていた。ここで同じ色に引き込む。
      ※こちらは72pxの大見出しなので、サイズは上げない。
   ============================================================ */
body.recruit-test {
	/* 英字セクションタイトルの色。1箇所変えれば全部変わる */
	--wc-title: var(--wc-sea-deep);
}

/* ── ① ビジョンの英字 ── */
body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en {
	display: inline-block;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.35;
	letter-spacing: .01em;
}

/* ── ②③ は 17番に統合した（サイズと色を1箇所で持たせるため） ── */

/* ============================================================
   17. 見出しをすべて「What’s All Blue?」と同じ二段構成に揃える
   ------------------------------------------------------------
   このページには見出しの型が3つ混在していた。

     (A) box-headline + .main/.sub  … What’s All Blue?
         英字72px ＋ 日本語22px          ← これをお手本にする
     (B) c-recruit-section-title + .main/.sub … Member / FAQ / Entry
         英字64px ＋ 日本語18px          ← 少しだけ小さい
     (C) eyebrow ＋ 日本語の大見出し … Why “All Blue” / Ask the Crew
         英字14px ＋ 日本語58px・46px    ← (A)と主従が逆

   (C)は英字が小さく日本語が主役という逆の作りなので、単に英字を
   72pxにすると大きな行が2つ並んでしまう。そこで (A) の主従に
   合わせ、英字を上げるのと同時に日本語を22pxまで下げている。

   サイズはお手本(A)の実測値をそのまま変数にした。ブレークポイント
   （1000px / 768.999px）と、SPの `min(calc(...))` の係数も
   style.css の .box-headline .main / .sub からそのまま持ってきた
   もので、テーマの流体スケールに乗せている。

   Top Message は日本語の対がないので英字だけ。

   ついでに拾った不具合:
   Member と FAQ は `.main.white`（#fff）、Entry は `.main.blue`
   （#171d99）が style.css で直接指定されており、水彩CSSでは
   一度も上書きしていなかった。紙の地に白文字なのでほぼ見えず、
   Entry だけ原色の青が残っていた。ここで3つとも --wc-title に
   引き込む（`.main.white` より詳細度を上げてある）。
   ============================================================ */
body.recruit-test {
	--wc-h-main: 72px; /* 英字（主）*/
	--wc-h-sub:  22px; /* 日本語（従）*/
	--wc-h-gap:  20px; /* 英字と日本語の間 */
}
@media screen and (max-width: 1000px) {
	body.recruit-test {
		--wc-h-main: 50px;
		--wc-h-sub:  18px;
	}
}
@media screen and (max-width: 768.999px) {
	body.recruit-test {
		--wc-h-main: min(calc(0.0709090909 * 100vw) + calc(max(600px - 100vw, 0px) * 2000), calc(0.0866666667 * 100vw) + calc(max(450px - 100vw, 0px) * 2000), calc(0.104 * 100vw));
		--wc-h-sub:  min(calc(0.0254545455 * 100vw) + calc(max(600px - 100vw, 0px) * 2000), calc(0.0311111111 * 100vw) + calc(max(450px - 100vw, 0px) * 2000), calc(0.0373333333 * 100vw));
		--wc-h-gap:  min(calc(0.0181818182 * 100vw) + calc(max(600px - 100vw, 0px) * 2000), calc(0.0222222222 * 100vw) + calc(max(450px - 100vw, 0px) * 2000), calc(0.0266666667 * 100vw));
	}
}

/* ── 英字（主）── */
body.recruit-test main#contents.recruit.index .con-box01 .box02 .box-headline,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline .main,
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title .main,
body.recruit-test .p-test-origin .test-origin-eyebrow,
body.recruit-test .p-test-qa .test-qa-eyebrow {
	font-family: "Jost", sans-serif;
	font-size: var(--wc-h-main);
	font-weight: 600;
	line-height: 1.1;
	/* eyebrow の .22em は72pxだと1文字あたり16px開いて崩れるので解除。
	   uppercase も外して、お手本と同じ「書いたままの大小」にする */
	letter-spacing: normal;
	text-transform: none;
	color: var(--wc-title);
}

/* eyebrow は下マージンを持っていたが、間隔は日本語側の上マージンで
   取る（お手本の .sub margin-top と同じ持たせ方）。二重に空くのを防ぐ */
body.recruit-test .p-test-origin .test-origin-eyebrow,
body.recruit-test .p-test-qa .test-qa-eyebrow {
	margin-bottom: 0;
}

/* ── 日本語（従）── */
body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline .sub,
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title .sub,
body.recruit-test .p-test-origin .test-origin-title,
body.recruit-test .p-test-qa .test-qa-title {
	margin-top: var(--wc-h-gap);
	font-size: var(--wc-h-sub);
	font-weight: 700;
	line-height: 1.6;
}

/* ============================================================
   18. 17番の取りこぼし（可読性の修正）
   ------------------------------------------------------------
   ① 日本語（従）に色を指定していなかった。
      `.c-recruit-section-title .sub.white` が style.css で #fff
      なので、「社員紹介」「よくあるご質問」が紙の地に白文字＝
      ほぼ見えないままだった。17番では .main 側だけ拾っていた。

   ② Why “All Blue” が2行に折り返して “All Blue” が割れていた。
      原因は幅。test-origin-hero は
        grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr)
      で、1100px のうち文字側は約463pxしか取れない。72pxだと
      この見出しは約500px必要なので入りきらない。
      minmax の下限が 0 なので、列が内容より狭くなることを
      許してしまっていた。下限を min-content にして、
      見出しが必要な幅を列に確保させる。
      あわせて英字見出しは1行で扱う（nowrap）。SPは1カラムに
      なるので解除し、折り返す場合も “All Blue” は
      test-origin.php 側の span で塊のまま保たれる。
   ============================================================ */

/* ── ① 日本語（従）の色 ── */
body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline .sub,
body.recruit-test main#contents.recruit.test-tone .c-recruit-section-title .sub,
body.recruit-test .p-test-origin .test-origin-title,
body.recruit-test .p-test-qa .test-qa-title {
	color: var(--wc-navy);
}

/* ── ② 英字見出しは1行で ── */
body.recruit-test main#contents.recruit.index .con-box01 .box02 .box-headline,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline .main,
body.recruit-test main#contents.recruit.index .c-recruit-section-title .main,
body.recruit-test .p-test-origin .test-origin-eyebrow,
body.recruit-test .p-test-qa .test-qa-eyebrow {
	white-space: nowrap;
}
body.recruit-test .test-nowrap {
	white-space: nowrap;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline::before {
	display: none;
}

/* ============================================================
   18-1. What’s All Blue? を航海地図UIにする
   ------------------------------------------------------------
   既存の羊皮紙地図 `whats-bg.png` の中央余白に、Image 2.0生成の
   架空島素材を重ねる。説明文は画像に焼き込まずHTMLのバナーに残し、
   島そのものをリンクとして押せるようにする。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box02 .box01 {
	position: relative;
	/* 羊皮紙の余白詰め。style.css の padding-block:100px は
	   見出しの上が空きすぎるので縮める。下は逆に上より広く取る
	   （見出しが上に載っている分、島の塊が紙の中央より下がって
	   見えるため。下を狭めると始まりの島がちぎれた縁に迫る）*/
	padding-top: clamp(56px, 5.4vw, 76px);
	padding-bottom: clamp(48px, 5.6vw, 80px);
	background-image: none;
	background-color: transparent;
	border-radius: 0;
	overflow: visible;
	isolation: isolate;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: clamp(-18px, -1.4vw, -10px);
	background: url("../images/recruit/test/map/whats-map-ragged-panel.png") no-repeat center / 100% 100%;
	pointer-events: none;
	filter:
		drop-shadow(0 18px 34px rgba(82, 62, 40, .16))
		drop-shadow(0 42px 64px rgba(46, 57, 60, .1));
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 > .c-inner {
	position: relative;
	z-index: 2;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map {
	position: relative;
	width: min(100%, 1160px);
	aspect-ratio: 1672 / 941;
	/* 上マージンが負なのは、allblue-map-islands.png の上端に
	   透明な余白が焼き込まれていて（島の絵は画像の8%あたりから）
	   箱の高さ分だけ見出しから離れて見えるため。その空き分を
	   引き戻し、島の塊を紙の縦中央あたりまで上げている。
	   下は逆に負にしない（島の下端＝始まりの島の岩が紙のちぎれた
	   縁に近づきすぎるため。下の余白は box01 の padding-bottom で
	   確保する）*/
	margin: clamp(-70px, -4.6vw, -24px) auto 0;
	overflow: visible;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map-islands {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: .98;
	mix-blend-mode: multiply;
	filter: contrast(1.05) saturate(.72);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: 83%;
	height: 62%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 55%, rgba(121, 93, 61, .13), transparent 62%);
	filter: blur(20px);
	opacity: .26;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 72%;
	width: 22%;
	height: 30%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin-art {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 47%;
	display: block;
	width: 144%;
	max-width: none;
	height: auto;
	opacity: .98;
	mix-blend-mode: multiply;
	transform: translate(-50%, -50%) rotate(1deg);
	filter:
		sepia(.35)
		saturate(.72)
		brightness(.98)
		contrast(1.24)
		drop-shadow(0 8px 12px rgba(78, 60, 42, .1));
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin span,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 7px 16px;
	border: 1px solid rgba(92, 67, 45, .22);
	border-radius: 999px;
	background: rgba(255, 250, 235, .88);
	color: #5f4b36;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	box-shadow: 0 8px 18px rgba(79, 58, 38, .08);
	white-space: nowrap;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin span {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 78%;
	transform: translateX(-50%);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34%;
	height: 42%;
	border-radius: 48%;
	color: #5f4b36;
	cursor: pointer;
	text-decoration: none;
	outline: none;
	transition: transform .28s ease, filter .28s ease;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: -3%;
	border: 1px dashed rgba(105, 80, 52, .3);
	border-radius: 48%;
	background: rgba(255, 250, 235, .08);
	box-shadow: none;
	opacity: .62;
	transform: scale(.96);
	transition: opacity .24s ease, transform .24s ease, box-shadow .24s ease, background-color .24s ease;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:hover::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus-visible::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:hover) .test-whats-island-company::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus) .test-whats-island-company::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus-visible) .test-whats-island-company::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:hover) .test-whats-island-workstyle::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus) .test-whats-island-workstyle::before,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus-visible) .test-whats-island-workstyle::before {
	opacity: 1;
	background: rgba(255, 250, 235, .24);
	box-shadow:
		0 0 0 3px rgba(255, 250, 235, .28),
		0 16px 30px rgba(78, 60, 42, .16);
	transform: scale(1.06);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company {
	left: 24%;
	top: 48%;
	transform: translate(-50%, -50%) rotate(-4deg);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle {
	left: 76%;
	top: 47%;
	width: 34%;
	height: 43%;
	transform: translate(-50%, -50%) rotate(3deg);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:hover,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:focus,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:focus-visible,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:hover) .test-whats-island-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus) .test-whats-island-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus-visible) .test-whats-island-company {
	filter: brightness(1.04);
	transform: translate(-50%, -53%) rotate(-4deg) scale(1.04);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:hover,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:focus,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:focus-visible,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:hover) .test-whats-island-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus) .test-whats-island-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus-visible) .test-whats-island-workstyle {
	filter: brightness(1.04);
	transform: translate(-50%, -53%) rotate(3deg) scale(1.04);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-art {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 46%;
	display: block;
	width: 132%;
	max-width: none;
	height: auto;
	opacity: 1;
	mix-blend-mode: multiply;
	pointer-events: none;
	transform: translate(-50%, -50%);
	filter:
		sepia(.4)
		saturate(.72)
		brightness(.96)
		contrast(1.32)
		drop-shadow(0 8px 12px rgba(78, 60, 42, .12));
	transition: transform .28s ease, filter .28s ease;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company .test-whats-island-art {
	width: 128%;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle .test-whats-island-art {
	width: 126%;
	top: 48%;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:hover .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus-visible .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:hover) .test-whats-island-company .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus) .test-whats-island-company .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus-visible) .test-whats-island-company .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:hover) .test-whats-island-workstyle .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus) .test-whats-island-workstyle .test-whats-island-art,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus-visible) .test-whats-island-workstyle .test-whats-island-art {
	filter:
		sepia(.4)
		saturate(.72)
		brightness(1.04)
		contrast(1.5)
		drop-shadow(0 14px 18px rgba(78, 60, 42, .2));
	transform: translate(-50%, -53%) scale(1.07);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-pin {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 54%;
	width: 15px;
	height: 15px;
	border: 2px solid rgba(255, 250, 235, .9);
	border-radius: 50%;
	background: #8a6b48;
	box-shadow:
		0 0 0 5px rgba(138, 107, 72, .18),
		0 6px 14px rgba(79, 58, 38, .18);
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-label {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 76%;
	transform: translateX(-50%);
	border-color: rgba(105, 80, 52, .28);
	background: rgba(255, 253, 247, .94);
	box-shadow:
		0 10px 22px rgba(79, 58, 38, .13),
		0 0 0 3px rgba(255, 255, 255, .55);
	transition: transform .24s ease, box-shadow .24s ease, background-color .24s ease, color .24s ease;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:hover .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island:focus-visible .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:hover) .test-whats-island-company .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus) .test-whats-island-company .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus-visible) .test-whats-island-company .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:hover) .test-whats-island-workstyle .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus) .test-whats-island-workstyle .test-whats-label,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus-visible) .test-whats-island-workstyle .test-whats-label {
	background: rgba(255, 253, 247, .96);
	color: #5f4b36;
	box-shadow:
		0 14px 28px rgba(79, 58, 38, .18),
		0 0 0 4px rgba(255, 250, 235, .52);
	transform: translate(-50%, -4px);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card {
	position: absolute;
	z-index: 5;
	top: 27%;
	display: block;
	box-sizing: border-box;
	width: min(330px, calc(50% - 70px));
	padding: clamp(18px, 2.2vw, 24px);
	border: 1px solid rgba(95, 75, 54, .18);
	border-radius: 8px;
	background: rgba(255, 253, 247, .94);
	box-shadow: 0 18px 42px rgba(79, 58, 38, .14);
	opacity: 0;
	pointer-events: none;
	color: inherit;
	text-decoration: none;
	transform: translateY(12px);
	transition: opacity .24s ease, transform .24s ease;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-company {
	left: clamp(18px, 3vw, 42px);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-workstyle {
	right: clamp(18px, 3vw, 42px);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:hover ~ .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:focus ~ .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company:focus-visible ~ .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-company:hover,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-company:focus,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-company:focus-visible,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:hover ~ .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:focus ~ .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle:focus-visible ~ .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-workstyle:hover,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-workstyle:focus,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-workstyle:focus-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-island-company:hover) .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:hover) .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-island-company:focus) .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-company:focus) .test-whats-card-company,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-island-workstyle:hover) .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:hover) .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-island-workstyle:focus) .test-whats-card-workstyle,
body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map:has(.test-whats-card-workstyle:focus) .test-whats-card-workstyle {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-head {
	margin-bottom: 12px;
	color: var(--ch-scallo);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 700;
	line-height: 1.35;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card .c-text {
	margin: 0;
	color: #3c5b7c;
	font-size: clamp(13px, 1.45vw, 15px);
	line-height: 1.75;
	word-break: auto-phrase;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	color: var(--ch-scallo);
	font-family: "Jost", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
}

body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-link::before {
	content: "";
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--ch-scallo) url("../images/common/icn-ar-r-white02.png") no-repeat center / 5px 6px;
}

/* 見出しが入る幅を列に確保させる（下限 0 → min-content） */
body.recruit-test .p-test-origin .test-origin-hero {
	grid-template-columns: minmax(min-content, .9fr) minmax(320px, 1.1fr);
}

@media screen and (max-width: 768.999px) {
	/* SPは1カラム。折り返しを許す（“All Blue” は span 側で保護済み） */
	body.recruit-test main#contents.recruit.index .con-box01 .box02 .box-headline,
	body.recruit-test main#contents.recruit.index .con-box02 .box01 .box-headline .main,
	body.recruit-test main#contents.recruit.index .c-recruit-section-title .main,
	body.recruit-test .p-test-origin .test-origin-eyebrow,
	body.recruit-test .p-test-qa .test-qa-eyebrow {
		white-space: normal;
	}
	body.recruit-test .p-test-origin .test-origin-hero {
		grid-template-columns: 1fr;
	}

	/* PC側の padding は clamp の下限（56px / 28px）がタブレット用の
	   値なので、SPは幅に対して素直に効く値をここで指定し直す */
	body.recruit-test main#contents.recruit.index .con-box02 .box01 {
		padding-top: clamp(26px, 8.6vw, 38px);
		padding-bottom: clamp(20px, 6vw, 28px);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map {
		--test-map-sp-h: min(94vw, 460px);
		width: 100%;
		aspect-ratio: auto;
		min-height: 0;
		/* SPは地図画像を 164vw まで拡大して使うので、画像上端の
		   透明な余白もその分広がる。PCと同じ考え方で引き戻す */
		margin-top: clamp(-18px, -4vw, -4px);
		margin-bottom: 0;
		padding-top: var(--test-map-sp-h);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01::before {
		inset: -10px;
		background-image: url("../images/recruit/test/map/whats-map-ragged-panel-sp.png");
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-map-islands {
		inset: 0 auto auto 50%;
		width: min(164vw, 790px);
		height: var(--test-map-sp-h);
		max-width: none;
		transform: translateX(-50%);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin {
		top: calc(var(--test-map-sp-h) * .72);
		width: 34%;
		height: calc(var(--test-map-sp-h) * .28);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin-art {
		width: 152%;
		top: 45%;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island {
		width: 46%;
		height: calc(var(--test-map-sp-h) * .4);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company {
		left: 22%;
		top: calc(var(--test-map-sp-h) * .4);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle {
		left: 78%;
		top: calc(var(--test-map-sp-h) * .39);
		width: 46%;
		height: calc(var(--test-map-sp-h) * .4);
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-company .test-whats-island-art,
	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-island-workstyle .test-whats-island-art {
		width: 124%;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin span,
	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-label {
		min-height: 30px;
		padding: 6px 12px;
		font-size: 11px;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-origin span {
		top: 75%;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		margin-top: 14px;
		padding: 20px;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card-head {
		font-size: 20px;
	}

	body.recruit-test main#contents.recruit.index .con-box02 .box01 .test-whats-card .c-text {
		font-size: 13px;
		line-height: 1.85;
	}
}

/* ============================================================
   19. 下層2ページ（会社を知る／働き方を知る）を水彩トーンに
   ------------------------------------------------------------
   対象:
     parts/page-company-test.php   /recruit-test/company-test/
     parts/page-workstyle-test.php /recruit-test/workstyle-test/

   この2ページは本番の複製で、main のクラスも本番と同じ
   `recruit sub company` / `recruit sub workstyle` のまま。
   style.css の company(139ルール)・workstyle(91ルール)を
   そのまま効かせたいので、色と質感だけをここで上書きしている。

   本番の下層ページは「濃紺〜藍の空写真(mv-bg.png)を全面に敷き、
   文字は全部白、差し色はオレンジ #f34f0e」という作り。
   つまりトップと違い、地の色そのものが濃い。
   紙に置き換えると白文字が全部消えるので、
   「地を紙に」→「白文字を紺に」の順で二段構えで直している。

   ※ 写真の上に乗る figcaption の白文字だけは残す（地が写真なので読める）。
      そのため `*` での一括指定は使わず、白抜き箇所を名指ししている。
   ============================================================ */

/* ── 19-1. 地：全面の青空写真をやめる ────────────────────
   本番は body 自体に mv-bg.png + #23099b を敷いている。
   :has() のセレクタは中身の詳細度を持つため素の body.recruit-test では
   勝てない。同じ :has() に .recruit-test を足して1段上げている。

   ※ 敷き直す中身は 22-2 に移した（同じセレクタで後勝ち）。
     ここは「本番の青空を止める」という意図だけを残している。 */
body.recruit-test:has(main#contents.recruit.sub) {
	background-image: none;
	background-color: var(--wc-paper);
}

/* ── 19-2. MV帯：キービジュアルに差し替え ──────────────── */
body.recruit-test main#contents.recruit.sub .con-mv {
	background-image: url("../images/recruit/test/kv/voyage-kv.jpg");
	background-repeat: no-repeat;
	background-position: center 30%;
	background-size: cover;
	background-color: var(--wc-sky);
}

/* 本番の ::before は mv-img01.png（白いあしらい）を .4 で重ねるもの。
   紙の地では白が飛んで見えないだけなので出さない。 */
body.recruit-test main#contents.recruit.sub .con-mv::before {
	content: none;
}

/* 代わりに ::after を文字の下敷きにする。
   `.con-mv > *` の z-index:2 は要素のみが対象で擬似要素は拾わないため、
   ::after は「背景の上・文字の下」に入る。 */
body.recruit-test main#contents.recruit.sub .con-mv::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(250, 244, 230, .86) 0%,
		rgba(243, 248, 252, .62) 52%,
		rgba(243, 248, 252, .30) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.sub .con-mv .page-title {
	color: var(--ch-scallo);
	text-shadow:
		0 2px 16px rgba(252, 249, 242, .92),
		0 0 38px rgba(252, 249, 242, .8);
}

/* ── 19-3. 追従サイドナビ（INDEX）：濃紺カード → 紙のカード ──
   本番は side-bg.png（濃い地）＋白文字＋オレンジの点。
   見出しの `rgba(255,255,255,.2)` は「濃い地に白を薄く」の指定なので、
   紙の上では消える。紺を薄くする方に置き換える。 */
body.recruit-test:has(main#contents.recruit.sub) .side-menu {
	background-image: none;
	background-color: rgba(255, 253, 247, .94);
	border: 1px solid var(--ch-abi-mid);
	box-shadow: 0 8px 24px rgba(36, 94, 148, .12);
	transition:
		opacity 360ms ease,
		transform 360ms ease,
		visibility 360ms ease;
}
body.recruit-test:has(main#contents.recruit.sub) .side-menu .side-headline {
	color: rgba(36, 72, 120, .32);
}
body.recruit-test.is-onboarding-route-visible:has(main#contents.recruit.workstyle) .side-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-18px);
	pointer-events: none;
}
body.recruit-test:has(main#contents.recruit.sub) .side-menu ul li::before {
	background-image: none;
	background-color: var(--ch-infi);
}
/* サイドナビの押せる範囲を広げる（2026-09-09 実測: 文字の枠は 144x24 しかなかった）。
   ------------------------------------------------------------
   **当たり判定だけを ::after で1枚かぶせる。** 流れの外に出るので、
   文字の位置も li の高さも1pxも動かない。li は ::before の線を top:12px に
   絶対配置しているため、文字が下がると線とずれる。それを避ける必要がある。

   ここは2回外している。同じ轍を踏まないこと。
     ・padding ＋ 負のマージン … 縦のマージンが li と相殺されて **li が 24→44px に伸びた**
       （実測。li の y も 705→695 に動いた）。li に縦paddingが無いのでマージンが貫通する。
     ・a を display:inline のまま ::after … **判定が広がらない**（実測で上下左右とも外れた）。
   inline-block にして初めて ::after の絶対配置が期待どおりに効く。

   li どうしの間隔は 25px あるので、上下10pxずつ広げても隣とは重ならない（実測15px空く）。 */
body.recruit-test:has(main#contents.recruit.sub) .side-menu ul li a {
	position: relative;
	display: inline-block;
	color: var(--ch-scallo);
}

body.recruit-test:has(main#contents.recruit.sub) .side-menu ul li a::after {
	content: "";
	position: absolute;
	inset: -10px -8px;
}
body.recruit-test:has(main#contents.recruit.sub) .side-menu ul li.active a {
	color: var(--ch-infi);
}
body.recruit-test:has(main#contents.recruit.sub) .side-menu ul li.active::before {
	background-color: var(--ch-infi);
}

/* ── 19-4. 見出し ────────────────────────────────
   見出しの二段構成（英字＝主／日本語＝従）は 17・18番が
   .test-tone スコープで3ページまとめて受け持つ。ここに写しは置かない。
   `.main.white` / `.main.blue` / `.sub.small` といった本番の派生クラスも
   .test-tone 側の詳細度（0,1,5,2）が style.css（0,0,3,0）を上回るので
   個別に名指しする必要はない。

   17-② の nowrap だけは共通に上げていない（18-②が .index 限定のまま）。
   下層は「Corporate Slogan」が最長で、72pxだと約640px必要になるうえ、
   1180px以下でサイドナビ用に本文が200px削られる（style.css:15750付近）。
   1行に固定すると溢れるため、折り返しを許したままにしている。 */

/* 日本語だけの見出し（workstyle「入社後の流れ（未経験）」）は
   Jost も 72px も当てない。欧文書体に和文を流すと字面が崩れる。
   色だけ揃える。 */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .box-headline .main {
	color: var(--wc-title);
}
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .box-headline .sub {
	color: var(--wc-navy-soft);
}
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .box-headline#anc03 {
	position: relative;
	z-index: 4;
}
/* 下線：#6793e3（原色青）と #fff（白） → 淡い水色 */
body.recruit-test main#contents.recruit.sub .c-recruit-section-title.border,
body.recruit-test main#contents.recruit.sub .c-recruit-section-title.border.border-white {
	border-bottom-color: rgba(108, 180, 228, .55);
}
body.recruit-test main#contents.recruit.sub .box-headline {
	color: var(--ch-scallo);
}

/* 経営理念の帯（白文字 on オレンジ） → 紺文字 on 珊瑚の淡色 */
body.recruit-test main#contents.recruit.company .con-box01 .box-headline span {
	background-color: var(--ch-infi-mid);
	color: var(--ch-scallo);
}

/* ── 19-5. 本文：白文字を紺に落とす ─────────────────────
   写真に重なる figcaption は対象にしない（地が写真なので白のまま読める）。 */
body.recruit-test main#contents.recruit.sub .text-white,
body.recruit-test main#contents.recruit.workstyle .con-box02 {
	color: var(--ch-scallo);
}
/* 入社後の流れの縦線（白） */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .list::before {
	background-color: rgba(108, 180, 228, .5);
}

/* ── 19-6. カード・数値・区切り線 ───────────────────────
   #171d99 原色青 / #000d15 ほぼ黒 / #f5f0e6 生成り
   → 紺 / 紺 / 紙（生成りは元から水彩に近いので少し明るくするだけ） */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item,
body.recruit-test main#contents.recruit.workstyle .con-box02 .box03 .list .list-item {
	background-color: rgba(255, 253, 247, .9);
	border: 1px solid rgba(36, 72, 120, .12);
}
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item .item-headline {
	border-bottom-color: var(--ch-abi);
}
/* 入社後の流れ（未経験）のカード。
   本番は .list-item 自体に地が無く（style.css:17000付近）、濃紺の地に
   白文字を直接置く作りだった。地を紙にしたあと、ここだけ透けたままで
   28番のセクショングラデーションが下から出ていたので白を敷く。
   左の「1週目」列は .item-left が自前の地（--ch-abi-pale）を持つので、
   白＋淡い水色の2色に分かれたまま残る。 */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .list .list-item {
	background-color: #fff;
	border-color: rgba(36, 72, 120, .12);
}
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .list .list-item .item-left {
	background-color: var(--ch-abi-pale);
	color: var(--ch-scallo);
}
body.recruit-test main#contents.recruit.workstyle .con-box02 .box03 .list .list-item .item-title span,
body.recruit-test main#contents.recruit.workstyle .con-box02 .box03 .list .list-item p {
	color: var(--ch-scallo);
}

/* 数値の単位（背景クリップのグラデ文字）。原色青→水色を紺→水色に */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item .text .value02 {
	background-image:
		linear-gradient(to bottom, var(--ch-scallo), var(--ch-abi)),
		linear-gradient(to bottom, var(--ch-scallo), var(--ch-scallo));
}
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .text .line::before {
	background-color: var(--ch-abi-mid);
}

/* ── 19-7. グラフ画像 ────────────────────────────────
   ここでCSSのfilterは使っていない。画像そのものを
   Numbers セクションの配色に置き換えてある。

     元: 原色インディゴの5段  #171d99 #4046c2 #5b61da #8589e8 #a3a6f2（H=237°）
         ＋中央の生成り #f5f0e6 ＋文字 #000d15
     後: 紺〜淡水色の5段      #244878 #4275a5 #6cb4e4 #a3daff #c4e7ff
         ＋中央 #fffdf7（カードの地）＋文字 #244878（--ch-scallo）

   filter だと文字と生成りまで一緒に転んで、色の指定もできない。
   色数が少ない図なので「元の色→移送先の色」の対応表で引き直した。

     変換スクリプト: 一時ファイル（scratchpad/recolor-numbers.py）
     出力: assets/images/recruit/test/numbers/number-img01〜05.png
     参照: parts/page-company-test.php

   本番の assets/images/recruit/company/ 側は手を付けていない。
   ※ 02・03 は青を含まない黒の線画だったので、黒→紺だけ効いている。 */

/* Numbersの前職円グラフを画像ではなくHTML/CSSで描く。 */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-career-donut {
	--career-navy: var(--ch-scallo);
	--career-blue-1: var(--ch-scallo);
	--career-blue-2: #4275a5;
	--career-blue-3: var(--ch-abi);
	--career-blue-4: #a3daff;
	--career-blue-5: #c4e7ff;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-career-donut__ring::after {
	background: #fffdf7;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut,
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut {
	--chart-navy: var(--ch-scallo);
	--chart-blue-1: var(--ch-scallo);
	--chart-blue-2: #4275a5;
	--chart-blue-3: var(--ch-abi);
	--chart-blue-4: #a3daff;
	--chart-blue-5: #c4e7ff;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-age-chart figcaption,
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-division-chart figcaption {
	color: var(--ch-scallo);
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut__ring::after,
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut__ring::after {
	background: #fffdf7;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item02 .text.company-gender-ratio .value,
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item02 .text.company-gender-ratio .value02 {
	background-image: none;
	background-clip: border-box;
	-webkit-background-clip: border-box;
	color: var(--ch-scallo);
	-webkit-text-fill-color: currentColor;
}

/* ── 19-8. Entryボタン・関連リンク ─────────────────────
   entry-bg.png（原色ブルー）が敷かれているのは外枠の
   .recruit-entry-btn ではなく中の `a`（style.css:15832）。
   矢印の丸は `a::before` に #f34f0e（style.css:15879）。
   セクション11-② は entry を含むクラスをまとめて塗っていたが、外枠しか
   拾えないうえ無関係なピンやボタンまで巻き込むのでやめた（2026-09-14）。
   当たり先はここで名指しする。

   色はトップの主ボタンと同じ「珊瑚の淡色 + 紺文字」に揃えた
   （追従応募ボタンもこの色。ページをまたいで応募系が同じ色になる）。 */
body.recruit-test main#contents.recruit.sub .recruit-entry-btn a {
	background-image: none;
	background-color: var(--ch-infi-mid);
	color: var(--ch-scallo);
	box-shadow: 0 8px 22px rgba(240, 120, 132, .28);
}
/* 矢印の丸。中の矢印アイコンが白なので、地は濃い紺のままにする */
body.recruit-test main#contents.recruit.sub .recruit-entry-btn a::before {
	background-color: var(--ch-scallo);
}

/* 汎用ボタンの丸角・にじみ影・パステル地は 5番／9番が .test-tone で
   3ページまとめて当てる。ここでは下層だけの取りこぼしを拾う。 */
/* .border-bk の枠線は #000d15（ほぼ黒）。紙の上では硬いので紺に落とす */
body.recruit-test main#contents.recruit.sub .c-btn.border-bk {
	border-color: rgba(36, 72, 120, .35);
	color: var(--ch-scallo);
}
/* 矢印の丸（オレンジ）は紺に。中の矢印アイコンが白なので地は濃くしておく */
body.recruit-test main#contents.recruit.sub .c-btn.arrow::after,
body.recruit-test main#contents.recruit.sub .c-btn.arrow.arrow-orange::after {
	background-color: var(--ch-scallo);
	border-color: var(--ch-scallo);
}

/* 関連リンク帯の白地を紙に */
body.recruit-test main#contents.recruit.company .c-relatedlinks-box {
	background-color: var(--wc-paper-deep);
}

/* ── 19-9. 追従応募ボタン：SPだけ左下へ逃がす ─────────────
   下層ページの .side-menu は SP で position:fixed の右下パネルになり
   （style.css:4902 付近・z-index:100）、応募ボタンと確実に重なる。
   桑沢も SP では左下（bottom:15px; left:0）に置いているので同じ手にする。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.sub .p-test-entry-float {
		right: auto;
		left: 14px;
	}

	body.recruit-test:has(main#contents.recruit.company) .p-test-entry-float {
		display: none;
	}
}

/* ============================================================
   20. MVの下端を紙に溶かす（ぶつ切りの解消）
   ------------------------------------------------------------
   10番で `background-size: auto 135%` ＋ `background-position:
   center bottom` にしたため、キービジュアルの下端がMVの下端と
   ぴったり重なっている。絵は下端まで描かれているので、そこで
   スパッと切れて次のセクション（紙）に変わる＝ぶつ切りに見える。

   既にある ::before は「文字を読ませるための層」で、
     ・下端でも .92 止まり（＝絵が8%残る）
     ・色が rgb(250,246,238) で紙の #faf4e6 とわずかに違う
     ・9deg の斜めなので左右で切れる高さが変わる
   という作りなので、境目を消す役には足りていなかった。

   そこで ::after を「紙に向かって消える層」として別に用意する。
   最下部を完全な var(--wc-paper) にすることで、次の .con-box01
   の先頭色（同じ --wc-paper）と継ぎ目なくつながる。

   濃度の変化は帯の下半分に寄せてある（上38%はほぼ素のまま）。
   全体を均等に薄くすると絵まで洗い流してしまうため、
   「下側だけをぼかす」形にしている。

   重ね順:
     ::before 1 … 文字用の層
     ::after  2 … 下端のフェード（これ）
     .main-text / .test-mv-scroll 3 … 文字は必ずフェードより上
   見出しはMVの左下にあり、この帯と縦位置が重なる。z-index を
   上げて文字自体はぼかさず、背景だけを紙に近づける。
   （文字は紺＋クリームの text-shadow なので、下地が紙に寄る分
     むしろ読みやすくなる）
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 30%;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(250, 244, 230, 0)   0%,
		rgba(250, 244, 230, .18) 38%,
		rgba(250, 244, 230, .52) 66%,
		rgba(250, 244, 230, .86) 86%,
		var(--wc-paper)         100%);
}

/* 文字はフェードより上に置く（::after が z-index を持つと、
   位置指定のない静的な文字は下に回ってしまうため） */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .main-text {
	position: relative;
	z-index: 4;
}

body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .test-mv-scroll {
	z-index: 4;
}

/* ============================================================
   21. ビジョン「Only Digital Adventure」を主役に
   ------------------------------------------------------------
   16番①で40pxにしたが、ページの一番上の主張としてはまだ弱い。
   見出し（72px）と並ぶ大きさまで上げ、色も本文の紺から
   見出しの色（--wc-title）に移して「読み物」から「主張」にする。

   幅の見立て:
   「Only Digital Adventure」は全角カッコ2つ＋欧文22字で
   おおよそ 12.6em。76pxなら約958pxで、親の .c-inner
   （max-width:1100px）に収まる。5vw を挟んでいるので
   1100px以下の画面では画面幅に追従して縮む。

   nowrap にしているのは、折り返すと "Digital / Adventure" が
   分かれて主張が割れるため。ただしSPでは1行に収まらないので
   解除し、サイズも画面幅基準に切り替える。

   親 .box01 は width:fit-content なので、この行が最も長いと
   ボックス幅がこの行に決まる（margin-inline:auto で中央のまま）。
   下の日本語段落は自前の <br> で改行しているので影響しない。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en {
	font-size: clamp(30px, 5vw, 76px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .005em;
	white-space: nowrap;
	color: var(--wc-title);
	/* 地が紙→淡い空のグラデーションなので、縁を起こして輪郭を締める */
	text-shadow: 0 1px 14px rgba(250, 246, 236, .92);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en {
		font-size: clamp(26px, 7.2vw, 40px);
		white-space: normal;
	}
}

/* ============================================================
   22. 地の作り直し（反復して見える紙目 ／ 夜明けのグラデーション）
   ------------------------------------------------------------
   ■ 直した不具合：紙目が「模様」として反復して見えていた

   paper-grain.png は名前のとおり紙目のつもりの画像だが、中身は
   キービジュアルの 260x260 の切り抜きで、縄のような白い曲線と
   大きな黒い塊がはっきり写っている。これを 260px 間隔で全面に
   repeat していたので、紙の質感ではなく「同じ絵が並んだ壁紙」に
   見えていた。fixed の全面レイヤーなので、どのページでも同じに出る。

   紙目に必要なのは「向きも形もない細かい凹凸」なので、
   絵ではなく feTurbulence のノイズに差し替えた。
     ・fractalNoise      … 方向性のない粒
     ・stitchTiles=stitch … タイルの継ぎ目が出ない
     ・そもそも乱数なので、繰り返しても模様として認識されない
   画像ファイルを増やさずに済むので data URI で埋めている。
   粒を粗くしたいときは baseFrequency を下げる（0.9 → 0.5 など）。

   paper-grain.png は消していない（参照を外しただけ）。

   ■ 足したもの：夜明けのグラデーション

   下層2ページ（19番）の地は var(--wc-paper) のベタで、
   そこに上の紙目だけが乗った状態だった。ベタ塗り＋反復する模様
   なので、なおさら「雑に連続」して見える。

   そこで地そのものを夜明けの空にする。

   ■ 色の出どころ

   色は考えて決めたのではなく、本番リクルートページの背景画像から
   実際に採った。「リクルートページの背景色を持ってくる」ため。

     assets/images/recruit/index/contents-bg01.png
       .con-box01 の上端に敷かれている空の写真。
       上から下へ H201°の水色 → H225°の藤 → H238°の紫と動く。
       これが「可愛い」と言われている色。
       画素を数えたところ暖色は 4,342,796 画素中 0 画素で、
       完全に寒色だけで出来ている。

     assets/images/recruit/index/whats-bg.png
       「What's All Blue?」の羊皮紙。生成り #f4e5c7。
       上の空に暖色がないので、朝の光はこちらから採った。

   採った素の色はどれも L=37〜52% で暗い（元は白文字を乗せる前提の
   地なので当然）。当方は文字が紺なので、色相だけ残して明度を
   85〜93%に上げて使っている。そのまま明度を上げると彩度も一緒に
   落ちて全部同じ灰青になり「可愛い」色が消えるので、彩度は 1.8 倍
   して補っている。

     上   #b7e5fd  contents-bg01 上端（H201 水色）
     ↓    #bbdcf9        〃      18%（H208）
     ↓    #c2cef5        〃      34%（H225 藤へ）
     ↓    #c3c8f3        〃      48%（H235）
     ↓    #c1c3f6        〃      62%（H238 一番紫）
     ↓    #e7e7f4  ↑の明度だけ上げた橋渡し
     ↓    #f7ecd7  whats-bg.png の生成りを少し明るく
     下   #faf4e6  紙（--wc-paper／フッターの地と継ぐ）

   84%の橋渡しを白に近い藤で挟んでいるのは、藤（H238）から
   生成り（H40）へ一気に振ると中間が濁った灰紫になるため。
   いったん白に寄せてから暖色へ渡すと濁らない。

   全段、紺文字（--ch-scallo #244878）とのコントラストは
   5.4:1〜8.4:1。WCAG AA（4.5:1）は全段クリアしている。
   「夜明け」は色相の移動だけで表して、明暗ではやらない
   （地が濃くなると紺文字が読めなくなるため）。

   置き場所は body。main ではない。
   ::before（紙目）は z-index:0 で main（z-index:1）の下にあるため、
   main に地を持たせると紙目が隠れてしまう。body の背景なら
   紙目はその上に乗るので、「夜明けの空に紙目が焼かれた」状態になる。

   background-attachment:fixed にしてあるのは、
   位置決めの基準を「本文の高さ」ではなく「画面」にするため。
   ページの長さで見え方が変わらず、繰り返しも起きない。
   （fixed が効かないブラウザでは本文全高に伸びる＝スクロールに
     つれて夜明けが進む形になる。どちらでも破綻しない）

   トップページ（.index）のセクション別グラデーション（3番）には
   手を付けていない。あちらは意図して段ごとに色を変えている。
   トップも1枚の夜明けに揃えたい場合は、3番の .con-box01〜04 の
   background を transparent にすればこの地が通る。
   ============================================================ */

/* 紙目のノイズ。::before と、必要なら他でも使えるよう変数にしておく */
body.recruit-test {
	--wc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");

	/* 夜明けの空。:has() 側（22-2）でも同じものを使うので変数にしている。
	   色は全部、本番リクルートページの背景画像から採った実測値。
	   どこから採ったかは22番の解説の「色の出どころ」に表がある。

	   値の中にコメントを書いていないのは、カスタムプロパティの値が
	   トークン列としてそのまま保持される仕組みで、コメントの扱いが
	   実装差の出やすいところだから。背景が丸ごと出なくなるのは痛いので、
	   対応表は下のコメントに出して値は素のままにしてある。

	     1層目 朝の光       whats-bg.png の生成り rgb(244,229,199)
	     2層目 藤の残り     contents-bg01 の一番紫 rgb(70,74,170)
	     3層目 空のランプ    0% #b7e5fd  contents-bg01 上端 H201 水色
	                       22% #bbdcf9        〃      18%  H208
	                       42% #c2cef5        〃      34%  H225 藤へ
	                       60% #c3c8f3        〃      48%  H235
	                       74% #c1c3f6        〃      62%  H238 一番紫
	                       84% #e7e7f4  ↑の明度だけ上げた橋渡し
	                       93% #f7ecd7  whats-bg.png の生成りを少し明るく
	                      100% --wc-paper 紙 */
	--wc-dawn:
		radial-gradient(120% 30% at 50% 100%, rgba(244, 229, 199, .55), rgba(244, 229, 199, 0) 72%),
		radial-gradient(84% 22% at 14% 0%, rgba(70, 74, 170, .16), rgba(70, 74, 170, 0) 70%),
		linear-gradient(180deg,
			#b7e5fd 0%,
			#bbdcf9 22%,
			#c2cef5 42%,
			#c3c8f3 60%,
			#c1c3f6 74%,
			#e7e7f4 84%,
			#f7ecd7 93%,
			var(--wc-paper) 100%);
}

/* ── 22-1. 紙目：絵の切り抜き → 継ぎ目のないノイズ ────────── */
body.recruit-test::before {
	background-image: var(--wc-grain);
	background-repeat: repeat;
	background-size: 180px 180px;
	opacity: .3;
}

/* ── 22-2. 夜明けを地にする ─────────────────────────── */
body.recruit-test {
	background-image: var(--wc-dawn);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 100% 100%;
}

/* 下層2ページは本番が body に mv-bg.png（青空写真）＋#23099b を
   指定している。:has() は引数の詳細度を持つので、上の
   body.recruit-test では勝てない（19-1 と同じ理由）。
   同じ :has() に .recruit-test を足して1段上げ、
   background 系を全部ここで指定し直す。 */
body.recruit-test:has(main#contents.recruit.sub) {
	background-image: var(--wc-dawn);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: 0 0;
	background-size: 100% 100%;
	background-color: var(--wc-paper);
}

/* 関連リンク帯は 19-8 で紙のベタにしていた。
   ベタだとここだけ夜明けが途切れるので半透明にする。 */
body.recruit-test main#contents.recruit.company .c-relatedlinks-box {
	background-color: rgba(242, 233, 214, .5);
}

/* 数字のカードも、19-6 の時点では紙に近い不透明色だった。
   地が空になったので、カードは「空に浮いた紙」として少し透かす。 */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item,
body.recruit-test main#contents.recruit.workstyle .con-box02 .box03 .list .list-item {
	background-color: rgba(255, 253, 247, .78);
}

/* ============================================================
   23. 残っていたぶつ切りをグラデーションに ／ インタビューの足
   ------------------------------------------------------------
   ■ セクションの地のつなぎ目を確認した結果

   .con-box01〜04 と .p-test-origin / .p-test-qa は、終わりの色と
   次の始まりの色が既に一致していて継ぎ目はなかった。
     con-box01 終 paper → p-test-origin 始 paper
     p-test-origin 終 paper → p-test-qa 始 paper
     p-test-qa 終 paper → con-box02 始 paper
     con-box02 終 paper-deep → con-box03 始 paper-deep
     con-box03 終 paper → con-box04 paper
   実際に切れて見えていたのは「地の色」ではなく、地の上に置いた
   四角い面と画像の縁だった。20番のMVと同じ性質のもの。

   ① インタビューの写真パネル（.test-qa-photo-layer）
      100vw の全幅で rgba(242,249,253,.9) のベタを敷き、その上に
      写真を絶対配置している。パネルの上下端で面と写真が同時に
      スパッと終わるので、帯が貼ってあるように見えていた。
      mask で上下120pxを透過させ、面ごと地に溶かす。
      左右は画面端なので処理不要。

   ② 社名の由来のイラスト（why-all-blue-origin.png）
      2048x1024 の RGB＝**透過なし**の四角い画像。角丸8pxと
      影は付いているが、絵そのものが矩形で終わっている。
      mask の楕円で四辺をぼかす。mask は border-box を基準に
      切るので box-shadow は消える（＝影が途中で切れる事故を
      避けるため none にする）。奥行きは既にある ::before の
      blur(34px) の光が担う。

   ③ 募集要項 → フッター
      .con-box04 が paper のベタ、footer が paper-deep のベタで、
      ここだけ色が一段変わる継ぎ目が残っていた。下端で
      paper-deep に寄せて段差をなくす。

   ■ インタビューのキャラの足が見えない件

   .test-qa-interview-visual は 2048x1024 の透過PNGを
   width: min(118vw, 1520px) で置いている＝広い画面で高さ760px。
   一方 .test-qa-head は min-height 最大650pxで、画像は
   top:49% の中央合わせなので下に約48pxはみ出す。
   さらに次の .test-qa-interview-stage が
   margin-top: clamp(-92px, -6.6vw, -56px) で56〜92px食い込み、
   そちらが z-index:2、キャラは z-index:0 なので、
   足の100〜140pxがパネルの下に隠れていた。

   .test-qa-head 自体を z-index:3 にして、ステージより前に出す。
   head の地は透明なのでステージの中身は隠れず、キャラの
   透過PNGの絵の部分だけがパネルの上に重なって足まで見える。
   見出し（.test-qa-head-copy, z-index:1）は head の内側なので
   キャラより前のまま＝文字は隠れない。
   ============================================================ */

/* ── ① インタビューの写真パネルの上下を溶かす ── */
body.recruit-test .p-test-qa .test-qa-photo-layer {
	-webkit-mask-image: linear-gradient(180deg,
		transparent 0,
		#000 120px,
		#000 calc(100% - 120px),
		transparent 100%);
	mask-image: linear-gradient(180deg,
		transparent 0,
		#000 120px,
		#000 calc(100% - 120px),
		transparent 100%);
}
@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-photo-layer {
		-webkit-mask-image: linear-gradient(180deg,
			transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
		mask-image: linear-gradient(180deg,
			transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	}
}

/* ── ② 由来のイラストの四辺をぼかす ── */
body.recruit-test .p-test-origin .test-origin-visual img {
	box-shadow: none;
	-webkit-mask-image: radial-gradient(115% 115% at 50% 48%, #000 58%, transparent 100%);
	mask-image: radial-gradient(115% 115% at 50% 48%, #000 58%, transparent 100%);
}

/* ── ③ 募集要項からフッターへの段差をなくす ── */
body.recruit-test main#contents.recruit.index .con-box04 {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		var(--wc-paper) 68%,
		var(--wc-paper-deep) 100%);
}

/* ── インタビューのキャラを写真パネルより前に出す（足を出す）── */
body.recruit-test .p-test-qa .test-qa-head {
	z-index: 3;
}

/* ============================================================
   24. Member：望遠鏡カーソルの拡大演出
   ============================================================ */
body.recruit-test .test-member-lens-stage {
	position: relative;
}

body.recruit-test .test-member-lens-stage,
body.recruit-test .test-member-lens-stage a {
	cursor: none !important;
}

body.recruit-test .member-cursor {
	display: none !important;
}

body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list.is-marquee:hover .marquee-track,
body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list.is-marquee:active .marquee-track,
body.recruit-test main#contents.recruit.index .con-box03 .box01 .recruit-member-list.is-marquee:focus-within .marquee-track {
	animation-play-state: running;
}

body.recruit-test .test-member-lens {
	--member-lens-size: clamp(250px, 24vw, 340px);
	--member-lens-scale: 1.42;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	width: var(--member-lens-size);
	aspect-ratio: 1;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	filter: drop-shadow(0 18px 32px rgba(36, 72, 120, .22));
	transform: translate3d(-50%, -50%, 0) scale(.94);
	transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
	will-change: left, top, transform;
}

body.recruit-test .test-member-lens.is-active {
	opacity: 1;
	visibility: visible;
	transform: translate3d(-50%, -50%, 0) scale(1);
}

body.recruit-test .test-member-lens-viewport {
	position: absolute;
	inset: 20% 18% 18% 20%;
	z-index: 1;
	overflow: hidden;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 18%),
		rgba(229, 246, 255, .36);
	clip-path: circle(50% at 50% 50%);
}

body.recruit-test .test-member-lens-viewport .marquee-track {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	width: max-content;
	animation: none !important;
	transform-origin: 0 0;
	will-change: transform;
}

body.recruit-test .test-member-lens-viewport .marquee-set {
	flex-shrink: 0;
	display: flex;
	flex-wrap: nowrap;
	gap: 0 20px;
	padding-right: 20px;
}

body.recruit-test .test-member-lens-viewport .list-item {
	flex-shrink: 0;
	width: 260px;
}

body.recruit-test .test-member-lens-viewport .list-item a {
	display: block;
	color: var(--ch-scallo);
}

body.recruit-test .test-member-lens-viewport a {
	cursor: default;
	pointer-events: none;
}

body.recruit-test .test-member-lens-viewport .item-thumbnail {
	position: relative;
	margin: 0;
	background-color: transparent;
	border-radius: 8px;
	overflow: hidden;
}

body.recruit-test .test-member-lens-viewport .item-thumbnail::before {
	content: "";
	display: block;
	padding-top: 76.9230769231%;
}

body.recruit-test .test-member-lens-viewport .item-thumbnail img,
body.recruit-test .test-member-lens-viewport .item-thumbnail iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate(-50%, -50%);
}

body.recruit-test .test-member-lens-viewport .item-meta {
	margin-top: 18px;
	font-size: 13px;
	color: var(--ch-nagi) !important;
}

body.recruit-test .test-member-lens-viewport .item-title {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.55;
	color: var(--ch-scallo) !important;
}

body.recruit-test .test-member-lens-viewport::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 22%),
		radial-gradient(circle at 50% 58%, rgba(108, 180, 228, 0) 55%, rgba(108, 180, 228, .28) 100%);
	box-shadow: inset 0 0 24px rgba(36, 72, 120, .18);
}

body.recruit-test .test-member-lens-frame {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (min-width: 769px) and (max-width: 1000px) {
	body.recruit-test .test-member-lens-viewport .list-item {
		width: 220px;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .test-member-lens {
		display: none;
	}

	body.recruit-test .test-member-lens-stage,
	body.recruit-test .test-member-lens-stage a {
		cursor: auto !important;
	}

	body.recruit-test .test-member-lens-viewport .marquee-set {
		gap: 0 4vw;
		padding-right: 4vw;
	}

	body.recruit-test .test-member-lens-viewport .list-item {
		width: 44vw;
	}
}

@media (hover: none) {
	body.recruit-test .test-member-lens {
		display: none;
	}

	body.recruit-test .test-member-lens-stage,
	body.recruit-test .test-member-lens-stage a {
		cursor: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test .test-member-lens {
		display: none;
	}
}

/* ============================================================
   25. テストページの白フッターと覗き込みキャラ
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box04 {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		var(--wc-paper) 68%,
		var(--wc-paper-deep) 100%);
}

/* footer-peeking-crew-image2.png は 920x428。キャラの切り取り線（＝フッター
   の縁にあたる水平線）はキャンバス上端から 416px の位置にあり、その下の
   12px は「縁を掴む拳」が前にはみ出している分の余白。
   translateY(-100%) はキャンバス下端をフッター上端に合わせるので、切り取り
   線がその 12px 分（画像高の 2.8%）だけ上に浮き、キャラがフッターから浮いて
   見えていた。--crew-ledge でその分だけ押し下げて縁に接地させる。
   画像を差し替えたら「切り取り線より下の透明余白 ÷ 画像高」を再計算して
   --crew-ledge だけ更新すること（%指定なので表示幅が変わってもズレない）。 */
body.recruit-test .p-test-footer-crew {
	--crew-ledge: 2.8037%; /* 12 / 428 */
	position: absolute;
	top: 0;
	right: clamp(18px, 6vw, 92px);
	z-index: 10;
	width: clamp(270px, 31vw, 460px);
	margin: 0;
	overflow: visible;
	pointer-events: none;
	transform: translateY(calc(-100% + var(--crew-ledge)));
}

body.recruit-test .p-test-footer-crew::after {
	content: none;
}

body.recruit-test .p-test-footer-crew-art {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 4px 7px rgba(36, 72, 120, .12));
}

body.recruit-test footer#globalFooter {
	position: relative;
	z-index: 3;
	margin-top: 0;
	padding-top: clamp(92px, 8vw, 128px);
	background: #fff !important;
	border-top: 1px solid rgba(36, 72, 120, .12);
	color: var(--ch-scallo) !important;
	overflow: visible;
}

body.recruit-test footer#globalFooter .footer-contact {
	background-color: rgba(255, 255, 255, .96) !important;
	border: 1px solid rgba(36, 72, 120, .14);
	border-radius: 8px;
	box-shadow: 0 18px 42px rgba(36, 72, 120, .08);
}

body.recruit-test footer#globalFooter .footer-contact .contact-headline {
	border-bottom-color: rgba(36, 72, 120, .16) !important;
}

body.recruit-test footer#globalFooter .footer-contact .contact-headline .main {
	color: var(--ch-abi) !important;
}

body.recruit-test footer#globalFooter .footer-contact .contact-content .btn a {
	background-color: var(--ch-scallo) !important;
	border-color: var(--ch-scallo) !important;
	color: #fff !important;
}

body.recruit-test footer#globalFooter .footer-contact .contact-content .btn a span {
	color: #fff !important;
}

body.recruit-test footer#globalFooter .footer-main,
body.recruit-test footer#globalFooter .footer-btm {
	border-color: rgba(36, 72, 120, .14) !important;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-footer-crew {
		top: 0;
		right: 50%;
		width: min(330px, 84vw);
		transform: translate(50%, calc(-100% + var(--crew-ledge)));
	}

	body.recruit-test footer#globalFooter {
		margin-top: 0;
		padding-top: clamp(78px, 20vw, 104px);
	}
}

/* ============================================================
   25. MVの寄り引きを直す（インフィの顔が切れていた）
   ------------------------------------------------------------
   10番で `background-size: auto 135%` ＋ `background-position:
   center bottom` にしたところ、キービジュアル上部にいるインフィ
   （赤いエビ）の顔が画面の外へ出ていた。

   ■ 実測（voyage-kv.jpg 1536x1024・色で連結成分を取って計測）

     インフィ（赤）  x  800–1179   y  94–368   ← 触角の先が y=94
       └ 黒目               y 209–221
     ナギ（紫）      x 1083–1415   y 409–871   ← 一番下の紫が y=871
     スカロ・アビー  この2体は中央寄りで上下の端に掛からない

   ■ なぜ切れていたか

   MVは `min-height:100vh`（style.css:20053）。
   `auto 135%` は「画像の高さ＝MVの高さの135%」なので、
   はみ出す 35% 分が切り落とされる。元画像に換算すると

     1024 × (1.35-1)/1.35 = 265.5px

   これは画面の大きさに依らず一定（はみ出し量も倍率も高さに比例
   するため約分される）。`center bottom` は「下端を合わせる」＝
   はみ出し全部を上から削る指定なので、上端 265.5px が消えていた。
   インフィの触角は y=94、黒目は y=209 なので、顔ごと消える。

   ■ 135% では両立しない

   インフィを出すには 上端の切り ≦ 94px、
   ナギの足を残すには 上端の切り ≧ 265.5-(1024-871) = 112.5px。
   94 < 112.5 なので、この倍率では position をどこに置いても
   どちらかが切れる（計算上 42.4%〜35.4% という空の範囲になる）。

   収めたいのは y 94–871 の 777px。1024-777 = 247px までしか
   切れないので、倍率を下げて切り合計を 247px 以下にする必要がある。

     135% → 265.5px  両立しない
     132% → 248.2px  わずかに足りない
     128% → 224.0px  両立する（position 31.7%〜42.0%）
     125% → 204.8px  両立する

   128% を採り、position はその範囲の中央 37% にした。
   上端 83px 切り（インフィの上に 11px 余る）／
   下端 141px 切り（ナギの下に 12px 余る）。

   ■ background-size に max() を使っている理由

   倍率を下げると画像の幅も縮む。`auto 128%` だと画像幅は
   MV高さの 1.92 倍で、横幅がそれを超えると左右に隙間が空いて
   背景色（--wc-sky）が覗く。1920x950 で 96px、1920x860 で
   268px の隙間になる（現状の 135% でも 2.03 倍が限界で、
   同じ穴が空いていた。今回さらに広がる）。

   そこで幅を `max(100%, 192vh)` で指定した。
     ・192vh ＝ 高さ128vh 相当（1.5:1 の絵なので 128×1.5）
       → 通常はこちらが効き、狙いどおりの 128% の寄りになる
     ・画面が横長で 192vh が足りないときだけ 100%（＝MV幅）が
       効いて、隙間が空かない
   広い画面では縦の切りが増えてインフィの触角の先がわずかに
   掛かることがあるが、顔（黒目 y=209）はどの比率でも残る。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv {
	background-size: max(100%, 192vh) auto;
	background-position: center 37%;
}

/* ============================================================
   11. 「では、出航の準備を。」のCTAを宝箱素材にする
   ------------------------------------------------------------
   正面の開いた宝箱と、奥から飛び出すプレートを別素材で重ねる。
   画像に日本語を焼くと崩れやすいため、可読性が必要なラベルだけHTMLで重ねる。
   ============================================================ */
body.recruit-test .p-test-qa .test-qa-outro-btn {
	top: auto;
	bottom: clamp(64px, 5vw, 92px);
	width: min(430px, 90vw);
	height: clamp(198px, 18vw, 258px);
	pointer-events: none;
}

body.recruit-test .p-test-qa .test-qa-outro-btn a.test-qa-treasure-entry {
	position: relative;
	display: block;
	overflow: visible;
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: var(--ch-scallo) !important;
	font-weight: 800;
	letter-spacing: 0;
	box-shadow: none;
	pointer-events: auto;
	animation: testQaTreasureFloat 4s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-outro-btn a.test-qa-treasure-entry:hover {
	color: var(--ch-scallo) !important;
	animation-play-state: paused;
}

body.recruit-test .p-test-qa .test-qa-treasure-chest,
body.recruit-test .p-test-qa .test-qa-treasure-plaque,
body.recruit-test .p-test-qa .test-qa-treasure-label {
	position: absolute;
	left: 50%;
	pointer-events: none;
}

body.recruit-test .p-test-qa .test-qa-treasure-chest img,
body.recruit-test .p-test-qa .test-qa-treasure-plaque img {
	display: block;
	width: 100%;
	height: auto;
}

body.recruit-test .p-test-qa .test-qa-treasure-plaque {
	z-index: 1;
	bottom: clamp(72px, 6.2vw, 100px);
	width: min(430px, 100%);
	filter: drop-shadow(0 12px 18px rgba(36, 72, 120, .15));
	transform: translateX(-50%) translateY(12px) scale(.94);
	transform-origin: 50% 100%;
	animation: testQaTreasurePlaquePop 3.8s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-treasure-chest {
	z-index: 2;
	bottom: 0;
	width: clamp(150px, 15.5vw, 214px);
	filter: drop-shadow(0 14px 24px rgba(36, 72, 120, .18));
	transform: translateX(-50%) rotate(-1deg);
	transform-origin: 50% 88%;
	animation: testQaTreasureChestBob 4s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-treasure-label {
	z-index: 3;
	bottom: clamp(108px, 9.2vw, 138px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(250px, 64vw);
	padding: 13px 30px 14px;
	border-radius: 999px;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .9) 0%, rgba(247, 238, 218, .84) 100%);
	color: var(--ch-scallo);
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.1;
	text-align: center;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .95);
	box-shadow:
		0 0 0 2px rgba(255, 253, 247, .72),
		0 8px 16px rgba(36, 72, 120, .13);
	transform: translateX(-50%) translateY(8px) scale(.96);
	animation: testQaTreasureLabelPop 3.8s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:hover .test-qa-treasure-plaque,
body.recruit-test .p-test-qa .test-qa-treasure-entry:hover .test-qa-treasure-label {
	animation-play-state: paused;
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:hover .test-qa-treasure-label {
	box-shadow:
		0 0 0 2px rgba(255, 253, 247, .84),
		0 10px 20px rgba(36, 72, 120, .18);
}

@keyframes testQaTreasureFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}

@keyframes testQaTreasurePlaquePop {
	0%, 100% { transform: translateX(-50%) translateY(12px) scale(.94); }
	42% { transform: translateX(-50%) translateY(-4px) scale(1); }
}

@keyframes testQaTreasureChestBob {
	0%, 100% { transform: translateX(-50%) rotate(-1deg); }
	50% { transform: translateX(-50%) translateY(-3px) rotate(1deg); }
}

@keyframes testQaTreasureLabelPop {
	0%, 56% { opacity: .92; transform: translateX(-50%) translateY(10px) scale(.95); }
	70% { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.04); }
	100% { opacity: 1; transform: translateX(-50%) translateY(8px) scale(.96); }
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-outro-btn {
		top: auto;
		bottom: 112px;
		width: min(340px, 88vw);
		height: 212px;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-plaque {
		bottom: 72px;
		width: 100%;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-chest {
		width: 154px;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-label {
		bottom: 105px;
		min-width: min(224px, 66vw);
		font-size: 17px;
	}
}

/* ============================================================
   26. 「では、出航の準備を。」を淡色パステル素材に戻す
   ------------------------------------------------------------
   角ばった水飛沫のある pastel-soft 版を使い、
   両サイドの余白ぎりぎりまで広げる。
   ============================================================ */
body.recruit-test .p-test-qa .test-qa-outro-visual {
	position: absolute;
	isolation: isolate;
	width: min(1720px, 148vw);
	transform-origin: 58% 54%;
}

body.recruit-test .p-test-qa .test-qa-outro-visual .test-qa-outro-art {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	filter: drop-shadow(0 22px 34px rgba(36, 72, 120, .16));
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-outro-visual .test-qa-outro-art {
	animation:
		testQaOutroPop .85s cubic-bezier(.2, 1.24, .42, 1) both,
		testQaAdventureInvite 3.6s ease-in-out 1.05s infinite;
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test .p-test-qa .test-qa-outro-visual .test-qa-outro-art,
	body.recruit-test .p-test-qa .test-qa-treasure-entry,
	body.recruit-test .p-test-qa .test-qa-treasure-chest,
	body.recruit-test .p-test-qa .test-qa-treasure-plaque,
	body.recruit-test .p-test-qa .test-qa-treasure-label {
		animation: none;
	}
}

/* ============================================================
   27. FAQ横のアビー/ナギを大きくして内側へ寄せる
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box03 .box02 {
	gap: 0 clamp(250px, 18vw, 300px);
}

body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img {
	left: -160px;
	bottom: -54px;
	width: clamp(440px, 34vw, 490px);
}

body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img img {
	width: 100%;
	max-width: none;
}

@media screen and (max-width: 1000px) and (min-width: 769px) {
	body.recruit-test main#contents.recruit.index .con-box03 .box02 {
		gap: 0 clamp(128px, 14vw, 152px);
	}

	body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img {
		left: -136px;
		bottom: -42px;
		width: clamp(320px, 36vw, 350px);
	}

	body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img img {
		width: 100%;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.index .con-box03 .box02 {
		gap: 0;
	}

	body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img {
		position: relative;
		top: auto;
		right: auto;
		left: auto;
		bottom: auto;
		width: min(94vw, 430px);
		margin: clamp(12px, 4vw, 24px) auto clamp(28px, 8vw, 48px);
		transform: translateX(-2%);
	}

	body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-left .img img {
		width: 100%;
	}

body.recruit-test main#contents.recruit.index .con-box03 .box02 .box-right {
	margin-top: clamp(24px, 7vw, 42px);
}
}

/* ────────────────────────────────────────────
   28. 下層2ページの地を index に合わせる

   /recruit-test/company-test/ と /recruit-test/workstyle-test/ は
   body に recruit-test が付くのでこのファイル自体は読まれている
   （is_recruit_test() に両方入っている）。ただし地の指定が
   main#contents.recruit.index に限定されていたため、セクションに
   背景が無く、body 側の装飾グラデ（radial-gradient に
   rgba(70,74,170,.1) の紫が入っている）がそのまま透けて、
   ページ全体が藤色になっていた。
   index ではセクションが全面を覆うので同じ層は見えない。

   計測（描画してcomputed styleを実読）:
     .con-mv    → キービジュアルあり（19-2番で対応済み）
     .con-box01 → culture-bg.png / 羊皮紙の紙あり
     .con-box02 → background 透明・画像なし ← ここだけが素通し
     白抜き文字の取り残し 0件／見出しは既に紺・海色
   なので触るのは地とサムネの見え方だけでよい。

   ※ 当初は .workstyle だけに当てていたため、同じ構造の
     company-test が藤色のまま残っていた。下層は2ページとも
     同じ作りなので .sub でまとめて当てる（ヘッダーの
     「セレクタの書き分け」参照）。
   ──────────────────────────────────────────── */

/* con-box01（Culture / Corporate Slogan）は width:calc(100% - 40px) で
   左右に余白があり、その隙間からも body の紫が覗く。
   セクション単位ではなく main に紙を敷く */
body.recruit-test main#contents.recruit.sub {
	background-color: var(--wc-paper);
}

/* con-box02 の帯（workstyle: All Adventure＋Benefits ／
   company: Business＋Numbers）。index の con-box02 と同じ
   紙 → 淡い海 → 紙（濃いめ）の並びにする。
   この区画は縦に長いので中間点を 46% に置いて水を緩やかに通す */
body.recruit-test main#contents.recruit.sub .con-box02 {
	background: linear-gradient(180deg,
		var(--wc-paper) 0%,
		#dcecf6 46%,
		var(--wc-paper-deep) 100%);
}

body.recruit-test main#contents.recruit.workstyle .con-box01 .workstyle-culture-illustration {
	width: min(980px, 100%);
	margin: clamp(36px, 4.8vw, 64px) auto 0;
}

body.recruit-test main#contents.recruit.workstyle .con-box01 .workstyle-culture-illustration img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 26px rgba(82, 58, 24, .12));
}

body.recruit-test main#contents.recruit.company .con-box02 .box01 .head {
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

body.recruit-test main#contents.recruit.company .con-box02 .box01 .head .c-recruit-section-title {
	justify-content: center;
}

body.recruit-test main#contents.recruit.company .con-box02 .box01 .head p {
	margin-top: clamp(24px, 3vw, 36px);
	text-align: center;
}

body.recruit-test main#contents.recruit.company .con-box02 .box01 .head .btn {
	margin-top: clamp(22px, 2.8vw, 34px);
}

body.recruit-test main#contents.recruit.company .con-box02 .box01 .list {
	margin-top: clamp(38px, 4.4vw, 58px);
}

/* 見出し下の罫線。style.css の #6793e3 は濃紺の地の上での色なので、
   紙の上では浮く。FAQカードの縁（rgba(36,72,120,.12)）と同じ系統に落とす */
body.recruit-test main#contents.recruit.sub .c-recruit-section-title.border {
	border-bottom-color: rgba(36, 72, 120, .18);
}

/* All Adventure のサムネを水彩イラストに差し替えたので、
   写真前提の裸の角丸だと絵が地に溶ける。紙の縁と淡い影で「貼ってある」見え方にする */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box01 .list .list-item .item-thumbnail img {
	border-radius: 10px;
	border: 1px solid rgba(36, 72, 120, .12);
	box-shadow: 0 6px 18px rgba(36, 72, 120, .10);
	background-color: #fffdf7;
}

/* ────────────────────────────────────────────
   29. 出航準備CTAの視認性と余白

   もとは pastel-soft が淡すぎたので彩度と輪郭をCSSで戻していたが、
   絵を濃い版に差し替えたため色の補正は外した（2026-09-14。下の
   .test-qa-outro-art 参照）。この節に残るのは余白と大きさの調整。
   宝箱CTAはアビーの顔から下へ逃がすため、
   アウトロ自体の下側を伸ばしてから低い位置に置く。
   ──────────────────────────────────────────── */
body.recruit-test .p-test-qa .test-qa-outro {
	min-height: clamp(760px, 68vw, 980px);
	padding-bottom: clamp(112px, 10vw, 154px);
}

body.recruit-test .p-test-qa .test-qa-outro-visual {
	top: 44%;
	width: min(1740px, 150vw);
}

/* 色の補正はかけない（2026-09-14）。
   saturate(1.42) contrast(1.1) brightness(1.03) を足していたのは、
   元の pastel-soft が淡すぎて他のキャラ絵から浮いていたため。
   絵を濃い版に描き直したので補正は二度がけになり、エビが原色の赤、
   船長のコートがロイヤルブルーになって水彩のトーンから外れていた。
   絵の色は絵のまま出す。濃さを変えたいときは画像側を直すこと。
   残してある drop-shadow は色ではなく、紙から浮かせるための影。 */
body.recruit-test .p-test-qa .test-qa-outro-visual .test-qa-outro-art {
	filter: drop-shadow(0 24px 34px rgba(36, 72, 120, .24));
}

body.recruit-test .p-test-qa .test-qa-outro-text {
	margin-bottom: clamp(300px, 30vw, 420px);
}

body.recruit-test .p-test-qa .test-qa-outro-btn {
	bottom: clamp(28px, 3.2vw, 46px);
	width: min(410px, 86vw);
}

body.recruit-test .p-test-qa .test-qa-treasure-plaque {
	filter: drop-shadow(0 14px 22px rgba(36, 72, 120, .2));
}

body.recruit-test .p-test-qa .test-qa-treasure-label {
	box-shadow:
		0 0 0 2px rgba(255, 253, 247, .82),
		0 10px 20px rgba(36, 72, 120, .18);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-outro {
		min-height: clamp(840px, 232vw, 980px);
		padding-top: 70px;
		padding-bottom: 42px;
	}

	body.recruit-test .p-test-qa .test-qa-outro-visual {
		top: 36%;
		width: min(760px, 192vw);
	}

	body.recruit-test .p-test-qa .test-qa-outro-text {
		margin-bottom: clamp(360px, 98vw, 430px);
		transform: translateX(-2vw) translateY(-8vw);
	}

	body.recruit-test .p-test-qa .test-qa-outro-btn {
		bottom: 34px;
		width: min(328px, 86vw);
		height: 204px;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-label {
		bottom: 104px;
	}
}

/* ============================================================
   30. Top Message → Why “All Blue” の間延びを詰める
   ------------------------------------------------------------
   計測（PC 1440px）:
     .con-box01 の padding-bottom 150px
   ＋ .p-test-origin の padding-top  140px（clampの上限）
   ＝ 290px。ページ内で最大の空白で、社長メッセージが終わったのに
   次が始まらない「間延び」の実体はこの二重取り。

   元の 210px（style.css）は、下端の contents-bg02.png（船と波の
   イラスト）を置くための余白だった。水彩版は3番で
   background-image: none にして絵を外しているので、
   その分の余白だけが残っていた。＝詰めても絵は欠けない。

   ヘッドレスChromeで実測しながら3案を比較して 72 + 64 = 136px に。
   （署名の下端 → Why の字面上端の実測ギャップ。1440px幅）
     176px … まだ空きが目立つ
     136px … 節の変わり目として読めて、かつ間延びしない ← 採用
     108px … 署名と大見出しが競り始める
   署名は右端・「Why “All Blue”」は左端にあり、空白が斜めに
   つながるので数値より広く見える。だから他の境界より小さめでよい。

   .p-test-origin の下側（→ .p-test-qa へのつなぎ）は間延びして
   いない（実測280pxだが、その空きは対話セクション頭の大きな
   イラストが埋める）ので padding-block を上下別指定にして据え置く。

   SP も同じ理由（contents-bg02-sp.png を外している）で
   最大258pxが余っていたので合わせて詰める。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box01 {
	padding-block: 110px 72px;
}

body.recruit-test .p-test-origin {
	padding-block: clamp(44px, 4.4vw, 72px) clamp(72px, 11vw, 140px);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.index .con-box01 {
		padding-bottom: clamp(60px, 15vw, 100px);
	}

	/* SPではもう一段、船のイラスト用の「空予約」が挟まっていた。
	   style.css:14654 の .inner-box は SP だけ position:relative ＋
	   padding-bottom: 約0.41*100vw（390px幅で195px）を持っている。
	   これは .ship（message-img02.png）が position:absolute; bottom:0 で
	   置かれる前提の場所取りだが、その img は page-recruit-test.php で
	   コメントアウト済み（水彩MVと重なって過剰なので外した）。
	   実測でも .ship は存在せず（shipPresent:false）、195pxがまるごと
	   空いていたので畳む。これでSPの署名→見出しは299px→約104pxになる。
	   ＝ .index に置く理由: 下層2ページの .inner-box は見え方を
	   変えたくないため（冒頭「セレクタの書き分け」の但し書き）。 */
	body.recruit-test main#contents.recruit.index .con-box01 .box02 .inner-box {
		padding-bottom: 0;
	}
}

/* ============================================================
   31. 宝箱CTAの収まりとhover開閉
   ============================================================ */
body.recruit-test .p-test-qa .test-qa-outro {
	min-height: clamp(820px, 72vw, 1060px);
	margin-bottom: clamp(96px, 8vw, 148px);
	padding-bottom: clamp(140px, 11vw, 176px);
}

body.recruit-test .p-test-qa .test-qa-outro::before {
	inset: 15% calc(50% - 50vw) 7%;
	background:
		radial-gradient(ellipse at 50% 54%,
			rgba(207, 230, 242, .24) 0%,
			rgba(232, 243, 248, .18) 34%,
			rgba(250, 244, 230, 0) 72%),
		linear-gradient(180deg,
			rgba(250, 244, 230, 0) 0%,
			rgba(232, 243, 248, .16) 48%,
			rgba(250, 244, 230, 0) 100%);
}

body.recruit-test .p-test-qa .test-qa-outro-visual {
	top: 42%;
}

body.recruit-test .p-test-qa .test-qa-outro-btn {
	bottom: clamp(90px, 7vw, 124px);
	width: min(410px, 84vw);
}

body.recruit-test .p-test-qa .test-qa-treasure-lid {
	position: absolute;
	left: 50%;
	z-index: 4;
	bottom: 0;
	width: clamp(150px, 15.5vw, 214px);
	pointer-events: none;
	filter: drop-shadow(0 10px 16px rgba(36, 72, 120, .16));
	transform: translateX(-50%) translateY(18px) scaleY(.48);
	transform-origin: 50% 53%;
	opacity: .96;
	transition:
		opacity .28s ease,
		transform .42s cubic-bezier(.2, 1.28, .42, 1);
}

body.recruit-test .p-test-qa .test-qa-treasure-lid img {
	display: block;
	width: 100%;
	height: auto;
	clip-path: inset(0 0 48% 0);
}

body.recruit-test .p-test-qa .test-qa-treasure-plaque,
body.recruit-test .p-test-qa .test-qa-treasure-chest,
body.recruit-test .p-test-qa .test-qa-treasure-label {
	transition:
		filter .25s ease,
		opacity .25s ease,
		transform .42s cubic-bezier(.2, 1.28, .42, 1),
		box-shadow .25s ease;
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-lid {
	opacity: 0;
	transform: translateX(-50%) translateY(-26px) scaleY(1.05) rotate(-3deg);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-plaque {
	animation: none;
	filter: drop-shadow(0 18px 26px rgba(36, 72, 120, .24));
	transform: translateX(-50%) translateY(-18px) scale(1.03);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-chest {
	animation: none;
	transform: translateX(-50%) translateY(3px) rotate(1deg);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-label {
	animation: none;
	box-shadow:
		0 0 0 2px rgba(255, 253, 247, .9),
		0 14px 24px rgba(36, 72, 120, .22);
	transform: translateX(-50%) translateY(-6px) scale(1.04);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-outro {
		min-height: clamp(900px, 244vw, 1040px);
		margin-bottom: clamp(92px, 22vw, 128px);
		padding-bottom: 74px;
	}

	body.recruit-test .p-test-qa .test-qa-outro::before {
		inset: 18% calc(50% - 50vw) 9%;
	}

	body.recruit-test .p-test-qa .test-qa-outro-visual {
		top: 34%;
	}

	body.recruit-test .p-test-qa .test-qa-outro-btn {
		bottom: 72px;
		width: min(326px, 84vw);
		height: 202px;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-lid {
		width: 154px;
	}
}

/* ============================================================
   31. 募集要項（Entry）を航海日誌にする
   ------------------------------------------------------------
   ここだけ本番のまま残っていた。地はグレーの角丸カード #f5f6f9、
   中は白いカード、見出しは原色の #171d99。地図UI（18-1番）まで
   紙と航海の語彙で通してきたのに、応募の直前＝いちばん読ませたい
   ところで世界観が切れていた。

   見立ては「航海日誌のページ」。1件の募集＝日誌の1ページで、
   左に綴じ代（破線＋綴じ穴）、本文は破線の罫で区切る。

   ■ 画像は1枚も足していない
      綴じ穴も罫も破線もすべて CSS のグラデーション。
      22番の紙目ノイズが全面に乗るので、ここでは地の色と罫だけ足す。
      （このページは既に実測27MBあるので、素材を増やさない方針）

   ■ 触ってはいけないもの
      ・.item-head と .item-content の隣接関係
        common.js 537行が $(this).next().slideToggle() で開閉する。
        間に要素を挟むと開かなくなる。
      ・.c-switch の ::before / ::after
        active で ::after が rotate(90deg) して ＋ → − になる。
        位置と色だけ上書きして、仕組みには触れていない。

   ■ 前の番号の打ち消しについて
      11番の「原色の掃除」が .con-box04 * に色を !important で
      当てているので、応募ボタンの白抜き文字だけ !important で
      取り返している（紺地に白なので、これは読める側の白）。

   ■ .test-tone ではなく .index で書いている理由
      ヘッダーの「セレクタの書き分け」は、共通のトーンは .test-tone、
      トップ固有の構造は .index と決めている。
      .entry-list / .apply-btn は下層2ページには存在せず
      （page-company-test.php・page-workstyle-test.php とも0件）、
      募集要項はトップだけの構造なので .index が正しい側。
      ここを .test-tone にしても届く先が増えないだけで害はないが、
      「共通のトーンだ」と誤読されるのを避けてこちらにしている。
   ============================================================ */

/* ── リード（表がいきなり始まるのを防ぐ） ── */
body.recruit-test main#contents.recruit.index .con-box04 .test-log-lead {
	margin-top: 26px;
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 2.05;
	color: var(--ch-scallo);
	word-break: auto-phrase;
}

body.recruit-test main#contents.recruit.index .con-box04 .test-log-lead .test-log-count {
	display: inline-block;
	margin: 0 .12em;
	font-size: 1.5em;
	font-weight: 700;
	line-height: 1;
	color: var(--wc-wood);
}

/* ── 日誌のページ ── */
/* 入れ物は地を持たない（紙に見えるのはカード側だけ）。
   11番の [class*="entry"] がここにも淡い水色を敷くので !important で
   打ち返していたが、11-② を名指しに直して発生源を止めたため
   打ち返しは不要になった（2026-09-14）。
   日誌まわりのクラスが test-log-* なのは、その罠を避けていた頃の名残り。 */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list {
	gap: 26px 0;
	margin-top: 46px;
	background-color: transparent;
}

/* 本番CSSは .con-box04 に padding-top だけを持たせている（style.css 15472行）。
   閉じている日誌カードは中身が畳まれて背が低いので、最後の1件が
   フッターの覗き込みキャラに接して見切れたように見えていた。下に余白を足す */
body.recruit-test main#contents.recruit.index .con-box04 {
	padding-bottom: clamp(80px, 9vw, 130px);
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item {
	position: relative;
	padding: 32px 42px 0 66px; /* 左は綴じ代のぶん空ける */
	background-color: transparent;
	background-image: linear-gradient(180deg, #fdfaf2 0%, #f7efdd 100%);
	border: 1px solid rgba(201, 160, 99, .38);
	border-radius: 3px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 6px 18px rgba(36, 72, 120, .07);
}

/* 綴じ代：破線の罫と、64pxごとの綴じ穴 */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 44px;
	border-right: 1px dashed rgba(201, 160, 99, .5);
	background-image: radial-gradient(circle at 22px 32px,
		rgba(201, 160, 99, .42) 0 4px,
		rgba(201, 160, 99, 0) 4.8px);
	background-size: 44px 64px;
	background-repeat: repeat-y;
	pointer-events: none;
}

/* ── 見出し行（クリックで開閉する） ── */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head {
	display: flex;
	align-items: center;
	gap: 22px;
	padding-right: 0;
	padding-bottom: 26px;
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .test-log-headwrap {
	flex: 1 1 auto;
	min-width: 0;
}

/* 「航海日誌 No.01」 */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .test-log-no {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 9px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	color: rgba(36, 72, 120, .6);
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .test-log-no svg {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	fill: var(--wc-wood);
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .item-headline {
	font-size: clamp(19px, 1.85vw, 25px);
	letter-spacing: .02em;
	color: var(--ch-scallo);
	word-break: auto-phrase;
}

/* ＋/− を羅針盤の輪に入れる。中の棒は common.js が回すのでそのまま */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .c-switch {
	position: relative;
	top: auto;
	right: auto;
	transform: none;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(36, 72, 120, .32);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .55);
	transition: background-color .3s, border-color .3s;
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .c-switch::before {
	left: 26%;
	width: 48%;
	height: 1.5px;
	background-color: var(--ch-scallo);
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .c-switch::after {
	top: 26%;
	left: 50%;
	width: 1.5px;
	height: 48%;
	background-color: var(--ch-scallo);
}

@media (hover: hover) {
	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head:hover .c-switch {
		background-color: #fff;
		border-color: rgba(36, 72, 120, .58);
	}
}

/* ── 日誌の中身 ── */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content {
	margin-bottom: 34px;
	padding: 24px 32px 32px;
	background-color: rgba(255, 255, 255, .5);
	border: 1px dashed rgba(201, 160, 99, .45);
	border-radius: 2px;
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table tr:not(:first-child) {
	border-top: 1px dashed rgba(36, 72, 120, .17);
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table th {
	width: 208px;
	padding-top: 17px;
	font-size: 14px;
	letter-spacing: .06em;
	vertical-align: top;
	color: var(--ch-scallo);
}

/* 項目名の頭に、地図のピンと同じ向きの小さな菱形 */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table th::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 9px;
	margin-bottom: 3px;
	background-color: var(--wc-wood);
	transform: rotate(45deg);
}

/* 11番と同じ理由。放っておくと「フレックスタイ／ム制」「年末年／始」の
   ように語の途中で折り返す。SPで列が狭くなるほど目立つ */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table td {
	color: var(--wc-navy);
	word-break: auto-phrase;
}

/* ── 応募ブロック：原色の背景画像をやめて、切り取り線の紙片に ── */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn {
	height: auto;
	gap: 18px 0;
	margin-top: 34px;
	padding: 30px 24px;
	border: 1px dashed rgba(36, 72, 120, .3);
	border-radius: 2px;
	background-image: none !important;
	background-color: rgba(214, 231, 244, .4) !important;
}

body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--ch-scallo) !important;
	word-break: auto-phrase;
}

/* ボタンの「色」はここでは決めない。
   9番が主ボタン（ヘッダーのエントリー／Ask the Crew の締め／ここ）を
   .test-tone .btn a でまとめて !important で揃えている
   （2026-09-10 以降はブランドブルーの地＋白文字。当初は珊瑚色＋紺文字）。
   ページ内で応募ボタンの色が3種類に割れるのを避けたいので、
   ここは大きさと字間だけにして、色は9番に任せる。
   （最初 紺地に白文字で上書きしたが、9番の背景が !important で残り
     珊瑚地に白文字＝読みにくい組み合わせになったので取り下げた） */
body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn .btn a {
	width: 258px;
	height: 58px;
	letter-spacing: .08em;
	border: none;
}

/* ── タブレット ── */
@media screen and (max-width: 1000px) {
	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item {
		padding: 26px 24px 0 54px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item::before {
		width: 36px;
		background-image: radial-gradient(circle at 18px 28px,
			rgba(201, 160, 99, .42) 0 3.4px,
			rgba(201, 160, 99, 0) 4.1px);
		background-size: 36px 56px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content {
		padding: 20px 22px 24px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table th {
		width: 170px;
	}
}

/* ── SP：綴じ代を細く、表は縦積み（縦積みは本番CSSがやっている） ── */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.index .con-box04 .test-log-lead {
		margin-top: 20px;
		line-height: 1.95;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list {
		gap: 18px 0;
		margin-top: 32px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item {
		padding: 22px 18px 0 44px;
		border-radius: 3px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item::before {
		width: 30px;
		background-image: radial-gradient(circle at 15px 24px,
			rgba(201, 160, 99, .4) 0 3px,
			rgba(201, 160, 99, 0) 3.6px);
		background-size: 30px 48px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head {
		gap: 14px;
		padding-bottom: 20px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .test-log-no {
		margin-bottom: 7px;
		font-size: 11px;
		letter-spacing: .12em;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .item-headline {
		font-size: clamp(16px, 4.3vw, 20px);
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-head .c-switch {
		width: 30px;
		height: 30px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content {
		margin-bottom: 22px;
		padding: 6px 18px 22px;
	}

	/* 縦積みになるので、項目名と中身の間を詰めて1件ずつの塊に見せる */
	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table th {
		width: 100% !important;
		padding-top: 16px;
		font-size: 13px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content table td {
		padding-top: 4px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn {
		margin-top: 26px;
		padding: 24px 16px;
	}

	body.recruit-test main#contents.recruit.index .con-box04 .entry-list .list-item .item-content .apply-btn .btn a {
		width: min(78vw, 258px);
		height: 54px;
	}
}

/* ============================================================
   32. 社名の由来：3ブロック削除後の下余白の詰め直し
   ------------------------------------------------------------
   ユーザー指示で test-origin.php から次の3つを削除した。
     ・集まる → 混ざる → 踏み出す の帯（.test-origin-route）
     ・01〜03 の3枚組カード（.test-origin-cards）
     ・Only Digital Adventure の帯（.test-origin-vision）
       ※ 同じ文言が con-box01 の .test-vision-en に既にあり重複していた
   対応するCSSも同時に削除済み（ルール14本）。

   残ったのは 見出し＋リード＋ノート＋海図イラスト だけ。
   下の padding は帯が下端にあった前提の 140px だったので、
   30番が上を詰めたのと同じ水準まで落とす。

   なお、この下に見える大きな余白の大半はここではなく
   Ask the Crew 側（.test-qa-head の min-height 520〜650px）。
   乗組員が左右から覗き込むためのステージなので触っていない。
   ============================================================ */
body.recruit-test .p-test-origin {
	padding-block: clamp(44px, 4.4vw, 72px) clamp(52px, 5.5vw, 92px);
}

/* ============================================================
   33. 働き方を知る：カラー島のMV
   ============================================================ */
body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv {
	position: relative;
	min-height: clamp(520px, 50vw, 680px);
	padding-block: clamp(132px, 11vw, 168px) clamp(118px, 10vw, 152px);
	overflow: hidden;
	background:
		linear-gradient(180deg,
			#cfe6f2 0%,
			#e6f2f8 43%,
			#b8e4e4 100%);
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 75% 23%, rgba(255, 246, 190, .42) 0 9%, rgba(255, 246, 190, 0) 24%),
		linear-gradient(90deg, rgba(250, 244, 230, .92) 0%, rgba(250, 244, 230, .68) 31%, rgba(250, 244, 230, .08) 62%, rgba(250, 244, 230, 0) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv::after {
	content: "";
	position: absolute;
	inset: auto calc(50% - 50vw) 0;
	z-index: 1;
	height: 38%;
	background:
		linear-gradient(180deg, rgba(74, 143, 199, 0) 0%, rgba(74, 143, 199, .24) 100%),
		repeating-radial-gradient(ellipse at 50% 100%,
			rgba(255, 253, 247, .36) 0 2px,
			rgba(255, 253, 247, 0) 3px 18px);
	opacity: .78;
	animation: testWorkstyleSea 14s ease-in-out infinite alternate;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv .c-inner {
	position: relative;
	z-index: 3;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv .page-title {
	color: var(--ch-scallo);
	text-shadow:
		0 2px 0 rgba(255, 253, 247, .9),
		0 16px 34px rgba(250, 244, 230, .95);
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background:
		linear-gradient(90deg, rgba(250, 244, 230, .88) 0%, rgba(250, 244, 230, .58) 27%, rgba(250, 244, 230, .08) 58%, rgba(250, 244, 230, 0) 100%),
		linear-gradient(180deg, rgba(255, 253, 247, .18) 0%, rgba(255, 253, 247, 0) 46%);
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::before {
	content: "";
	position: absolute;
	left: -4vw;
	right: 48vw;
	bottom: 4%;
	z-index: 6;
	height: clamp(74px, 9vw, 126px);
	background:
		repeating-radial-gradient(ellipse at 50% 120%,
			rgba(255, 253, 247, 0) 0 18px,
			rgba(255, 253, 247, .66) 19px 22px,
			rgba(255, 253, 247, 0) 23px 50px);
	border-radius: 999px;
	filter: blur(.15px);
	opacity: .58;
	-webkit-mask-image: radial-gradient(ellipse at 42% 58%, #000 0 54%, transparent 76%);
	mask-image: radial-gradient(ellipse at 42% 58%, #000 0 54%, transparent 76%);
	animation: testWorkstyleBoatSea 5.2s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-art {
	position: absolute;
	right: max(-116px, -7vw);
	bottom: max(-180px, -12vw);
	z-index: 0;
	width: min(1060px, 74vw);
	height: auto;
	filter:
		saturate(1.07)
		contrast(1.03)
		drop-shadow(0 30px 42px rgba(27, 58, 92, .2));
	transform-origin: 52% 74%;
	animation: testWorkstyleIslandFloat 6.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-boat-art {
	position: absolute;
	left: clamp(10px, 3.2vw, 56px);
	bottom: clamp(-10px, 1.2vw, 18px);
	z-index: 7;
	width: min(580px, 42vw);
	height: auto;
	filter:
		saturate(1.05)
		contrast(1.03)
		drop-shadow(0 22px 26px rgba(27, 58, 92, .2));
	transform-origin: 52% 78%;
	animation: testWorkstyleBoatFloat 4.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud {
	position: absolute;
	z-index: 1;
	width: clamp(126px, 12vw, 190px);
	height: clamp(42px, 4vw, 62px);
	border-radius: 999px;
	background: rgba(255, 253, 247, .74);
	filter: blur(.2px);
	box-shadow:
		38px 2px 0 -10px rgba(255, 253, 247, .62),
		-30px 8px 0 -14px rgba(255, 253, 247, .58);
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud.is-01 {
	top: 24%;
	left: 49%;
	animation: testWorkstyleCloud 18s linear infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud.is-02 {
	top: 37%;
	left: 72%;
	width: clamp(96px, 9vw, 150px);
	opacity: .76;
	animation: testWorkstyleCloud 24s linear -8s infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-wave {
	position: absolute;
	z-index: 3;
	right: max(-90px, -5vw);
	bottom: clamp(54px, 5.5vw, 78px);
	width: min(680px, 52vw);
	height: 36px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 253, 247, 0) 0 18px,
			rgba(255, 253, 247, .62) 19px 56px,
			rgba(255, 253, 247, 0) 57px 92px);
	opacity: .66;
	animation: testWorkstyleWave 5.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-wave.is-02 {
	right: max(210px, 16vw);
	bottom: clamp(24px, 3vw, 42px);
	width: min(420px, 32vw);
	opacity: .42;
	animation-delay: -2.2s;
}

body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-light {
	position: absolute;
	z-index: 4;
	right: min(37vw, 510px);
	top: clamp(170px, 19vw, 248px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fffdf7;
	box-shadow:
		0 0 0 4px rgba(255, 253, 247, .34),
		0 0 22px 10px rgba(255, 231, 152, .4);
	animation: testWorkstyleLight 2.8s ease-in-out infinite;
}

@keyframes testWorkstyleIslandFloat {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-.7deg) scale(1); }
	48% { transform: translate3d(10px, -18px, 0) rotate(.8deg) scale(1.012); }
	72% { transform: translate3d(4px, -7px, 0) rotate(.2deg) scale(1.006); }
}

@keyframes testWorkstyleBoatFloat {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-1.1deg); }
	45% { transform: translate3d(14px, -12px, 0) rotate(1.4deg); }
	72% { transform: translate3d(7px, -4px, 0) rotate(.2deg); }
}

@keyframes testWorkstyleBoatSea {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: .54; }
	50% { transform: translate3d(-24px, -7px, 0) scaleX(1.05); opacity: .78; }
}

@keyframes testWorkstyleSea {
	from { background-position: 0 0, 0 0; }
	to { background-position: 0 0, 58px 14px; }
}

@keyframes testWorkstyleCloud {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-90px, 0, 0); }
}

@keyframes testWorkstyleWave {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
	50% { transform: translate3d(-22px, -5px, 0) scaleX(1.05); }
}

@keyframes testWorkstyleLight {
	0%, 100% { opacity: .35; transform: scale(.72); }
	50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv::after,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-art,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-boat-art,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::before,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::after,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-wave,
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-light {
		animation: none;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv {
		min-height: clamp(520px, 142vw, 650px);
		padding-block: clamp(92px, 24vw, 120px) clamp(240px, 60vw, 310px);
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv::before {
		background:
			radial-gradient(circle at 70% 34%, rgba(255, 246, 190, .34) 0 12%, rgba(255, 246, 190, 0) 30%),
			linear-gradient(180deg, rgba(250, 244, 230, .92) 0%, rgba(250, 244, 230, .54) 46%, rgba(250, 244, 230, 0) 78%);
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::after {
		background:
			linear-gradient(180deg, rgba(250, 244, 230, .9) 0%, rgba(250, 244, 230, .5) 28%, rgba(250, 244, 230, 0) 68%);
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-scene::before {
		left: -20%;
		right: 18%;
		bottom: 5%;
		height: 66px;
		opacity: .52;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-island-art {
		right: 50%;
		bottom: max(-150px, -35vw);
		inset-block-start: auto;
		left: auto;
		width: min(760px, 178vw);
		height: auto;
		transform: translateX(48%) scale(1.02);
		animation-name: testWorkstyleIslandFloatSp;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-boat-art {
		left: clamp(-104px, -25vw, -76px);
		bottom: clamp(-40px, -8vw, -22px);
		width: min(460px, 118vw);
		animation-name: testWorkstyleBoatFloatSp;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud.is-01 {
		top: 38%;
		left: 9%;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-cloud.is-02 {
		top: 54%;
		left: 68%;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-wave {
		right: -18%;
		bottom: 78px;
		width: 118vw;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-wave.is-02 {
		right: 18%;
		bottom: 42px;
		width: 70vw;
	}

	body.recruit-test main#contents.recruit.workstyle .test-workstyle-mv-light {
		right: 30%;
		top: 58%;
	}
}

@keyframes testWorkstyleIslandFloatSp {
	0%, 100% { transform: translateX(48%) scale(1.02) translate3d(0, 0, 0) rotate(-.5deg); }
	48% { transform: translateX(48%) scale(1.035) translate3d(6px, -11px, 0) rotate(.6deg); }
	72% { transform: translateX(48%) scale(1.028) translate3d(3px, -5px, 0) rotate(.1deg); }
}

@keyframes testWorkstyleBoatFloatSp {
	0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
	45% { transform: translate3d(10px, -9px, 0) rotate(1.2deg); }
	72% { transform: translate3d(5px, -3px, 0) rotate(.1deg); }
}

/* ============================================================
   34. 会社を知る：会社島と停泊船のMV
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-mv {
	position: relative;
	min-height: clamp(520px, 50vw, 680px);
	padding-block: clamp(132px, 11vw, 168px) clamp(118px, 10vw, 152px);
	overflow: hidden;
	background:
		linear-gradient(180deg,
			#cfe6f2 0%,
			#eaf5fb 42%,
			#b9e2ef 100%);
}

body.recruit-test main#contents.recruit.company .test-company-mv::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 76% 20%, rgba(255, 246, 190, .38) 0 9%, rgba(255, 246, 190, 0) 24%),
		linear-gradient(90deg, rgba(250, 244, 230, .94) 0%, rgba(250, 244, 230, .72) 30%, rgba(250, 244, 230, .12) 58%, rgba(250, 244, 230, 0) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-mv::after {
	content: "";
	position: absolute;
	inset: auto calc(50% - 50vw) 0;
	z-index: 1;
	height: 38%;
	background:
		linear-gradient(180deg, rgba(74, 143, 199, 0) 0%, rgba(74, 143, 199, .22) 100%),
		repeating-radial-gradient(ellipse at 50% 100%,
			rgba(255, 253, 247, .34) 0 2px,
			rgba(255, 253, 247, 0) 3px 18px);
	opacity: .76;
	animation: testCompanySea 14s ease-in-out infinite alternate;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-mv .c-inner {
	position: relative;
	z-index: 4;
}

body.recruit-test main#contents.recruit.company .test-company-mv .page-title {
	color: var(--ch-scallo);
	text-shadow:
		0 2px 0 rgba(255, 253, 247, .9),
		0 16px 34px rgba(250, 244, 230, .95);
}

body.recruit-test main#contents.recruit.company .test-company-island-scene {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-island-scene::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background:
		linear-gradient(90deg, rgba(250, 244, 230, .9) 0%, rgba(250, 244, 230, .62) 28%, rgba(250, 244, 230, .12) 58%, rgba(250, 244, 230, 0) 100%),
		linear-gradient(180deg, rgba(255, 253, 247, .16) 0%, rgba(255, 253, 247, 0) 46%);
}

body.recruit-test main#contents.recruit.company .test-company-island-scene::before {
	content: "";
	position: absolute;
	left: -6vw;
	right: 42vw;
	bottom: 5%;
	z-index: 6;
	height: clamp(74px, 9vw, 126px);
	background:
		repeating-radial-gradient(ellipse at 50% 120%,
			rgba(255, 253, 247, 0) 0 18px,
			rgba(255, 253, 247, .62) 19px 22px,
			rgba(255, 253, 247, 0) 23px 50px);
	border-radius: 999px;
	filter: blur(.15px);
	opacity: .52;
	-webkit-mask-image: radial-gradient(ellipse at 42% 58%, #000 0 54%, transparent 76%);
	        mask-image: radial-gradient(ellipse at 42% 58%, #000 0 54%, transparent 76%);
	animation: testCompanyBoatSea 5.2s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.company .test-company-island-art {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	filter:
		saturate(1.02)
		contrast(1.02);
	transform: scale(1.018);
	transform-origin: 58% 62%;
	animation: testCompanyIslandDrift 14s ease-in-out infinite alternate;
}

body.recruit-test main#contents.recruit.company .test-company-mv-cloud {
	position: absolute;
	z-index: 1;
	width: clamp(126px, 12vw, 190px);
	height: clamp(42px, 4vw, 62px);
	border-radius: 999px;
	background: rgba(255, 253, 247, .74);
	filter: blur(.2px);
	box-shadow:
		38px 2px 0 -10px rgba(255, 253, 247, .62),
		-30px 8px 0 -14px rgba(255, 253, 247, .58);
}

body.recruit-test main#contents.recruit.company .test-company-mv-cloud.is-01 {
	top: 24%;
	left: 47%;
	animation: testCompanyCloud 18s linear infinite;
}

body.recruit-test main#contents.recruit.company .test-company-mv-cloud.is-02 {
	top: 37%;
	left: 73%;
	width: clamp(96px, 9vw, 150px);
	opacity: .76;
	animation: testCompanyCloud 24s linear -8s infinite;
}

body.recruit-test main#contents.recruit.company .test-company-mv-wave {
	position: absolute;
	z-index: 3;
	right: max(-90px, -5vw);
	bottom: clamp(54px, 5.5vw, 78px);
	width: min(680px, 52vw);
	height: 36px;
	border-radius: 999px;
	background:
		repeating-linear-gradient(90deg,
			rgba(255, 253, 247, 0) 0 18px,
			rgba(255, 253, 247, .62) 19px 56px,
			rgba(255, 253, 247, 0) 57px 92px);
	opacity: .62;
	animation: testCompanyWave 5.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.company .test-company-mv-wave.is-02 {
	right: max(210px, 16vw);
	bottom: clamp(24px, 3vw, 42px);
	width: min(420px, 32vw);
	opacity: .4;
	animation-delay: -2.2s;
}

body.recruit-test main#contents.recruit.company .test-company-mv-light {
	position: absolute;
	z-index: 4;
	right: min(31vw, 470px);
	top: clamp(210px, 23vw, 304px);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fffdf7;
	box-shadow:
		0 0 0 4px rgba(255, 253, 247, .34),
		0 0 22px 10px rgba(255, 231, 152, .38);
	animation: testCompanyLight 2.8s ease-in-out infinite;
}

@keyframes testCompanyIslandDrift {
	from { transform: scale(1.018) translate3d(-4px, 0, 0); }
	to { transform: scale(1.034) translate3d(6px, -8px, 0); }
}

@keyframes testCompanyBoatSea {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); opacity: .5; }
	50% { transform: translate3d(-24px, -7px, 0) scaleX(1.05); opacity: .72; }
}

@keyframes testCompanySea {
	from { background-position: 0 0, 0 0; }
	to { background-position: 0 0, 58px 14px; }
}

@keyframes testCompanyCloud {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-90px, 0, 0); }
}

@keyframes testCompanyWave {
	0%, 100% { transform: translate3d(0, 0, 0) scaleX(1); }
	50% { transform: translate3d(-22px, -5px, 0) scaleX(1.05); }
}

@keyframes testCompanyLight {
	0%, 100% { opacity: .35; transform: scale(.72); }
	50% { opacity: 1; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.company .test-company-mv::after,
	body.recruit-test main#contents.recruit.company .test-company-island-art,
	body.recruit-test main#contents.recruit.company .test-company-island-scene::before,
	body.recruit-test main#contents.recruit.company .test-company-island-scene::after,
	body.recruit-test main#contents.recruit.company .test-company-mv-cloud,
	body.recruit-test main#contents.recruit.company .test-company-mv-wave,
	body.recruit-test main#contents.recruit.company .test-company-mv-light {
		animation: none;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-mv {
		min-height: clamp(520px, 142vw, 650px);
		padding-block: clamp(92px, 24vw, 120px) clamp(240px, 60vw, 310px);
	}

	body.recruit-test main#contents.recruit.company .test-company-mv::before {
		background:
			radial-gradient(circle at 72% 34%, rgba(255, 246, 190, .32) 0 12%, rgba(255, 246, 190, 0) 30%),
			linear-gradient(180deg, rgba(250, 244, 230, .94) 0%, rgba(250, 244, 230, .58) 44%, rgba(250, 244, 230, 0) 78%);
	}

	body.recruit-test main#contents.recruit.company .test-company-island-scene::after {
		background:
			linear-gradient(180deg, rgba(250, 244, 230, .9) 0%, rgba(250, 244, 230, .5) 28%, rgba(250, 244, 230, 0) 68%);
	}

	body.recruit-test main#contents.recruit.company .test-company-island-scene::before {
		left: -18%;
		right: 18%;
		bottom: 5%;
		height: 66px;
		opacity: .5;
	}

	body.recruit-test main#contents.recruit.company .test-company-island-art {
		object-position: 58% center;
		transform: scale(1.02);
		animation-name: testCompanyIslandDriftSp;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-cloud.is-01 {
		top: 38%;
		left: 9%;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-cloud.is-02 {
		top: 54%;
		left: 68%;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-wave {
		right: -18%;
		bottom: 78px;
		width: 118vw;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-wave.is-02 {
		right: 18%;
		bottom: 42px;
		width: 70vw;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-light {
		right: 28%;
		top: 58%;
	}
}

@keyframes testCompanyIslandDriftSp {
	from { transform: scale(1.02) translate3d(-3px, 0, 0); }
	to { transform: scale(1.035) translate3d(4px, -7px, 0); }
}

/* ============================================================
   36. 会社を知る：ボラギノールタウン風の船内マップ
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-ship-town {
	position: relative;
	z-index: 1;
	padding: clamp(70px, 8vw, 116px) 0 clamp(76px, 9vw, 132px);
	background:
		linear-gradient(180deg,
			rgba(250, 244, 230, .98) 0%,
			rgba(230, 242, 248, .95) 48%,
			rgba(250, 244, 230, .98) 100%);
	overflow: hidden;
}

body.recruit-test main#contents.recruit.company .test-company-ship-town::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 14% 24%, rgba(255, 253, 247, .78) 0 8%, rgba(255, 253, 247, 0) 24%),
		radial-gradient(circle at 88% 80%, rgba(74, 143, 199, .16) 0 9%, rgba(74, 143, 199, 0) 25%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-ship-head {
	max-width: 920px;
	margin: 0 auto clamp(34px, 4vw, 54px);
	text-align: center;
}

body.recruit-test main#contents.recruit.company .test-company-ship-head .c-recruit-section-title {
	justify-content: center;
}

body.recruit-test main#contents.recruit.company .test-company-ship-head .c-text {
	margin-top: clamp(18px, 2.2vw, 28px);
	color: var(--wc-navy-soft);
	line-height: 2;
}

body.recruit-test main#contents.recruit.company .test-company-ship-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: clamp(22px, 3vw, 38px);
	align-items: stretch;
}

body.recruit-test main#contents.recruit.company .test-company-ship-map {
	position: relative;
	aspect-ratio: 3 / 2;
	min-height: 0;
	overflow: hidden;
	border: 1px solid rgba(36, 72, 120, .12);
	border-radius: 10px;
	background: var(--wc-sky);
	box-shadow:
		0 24px 56px rgba(36, 72, 120, .18),
		inset 0 0 0 8px rgba(255, 253, 247, .48);
	isolation: isolate;
}

body.recruit-test main#contents.recruit.company .test-company-ship-map::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .08) 0%, rgba(255, 253, 247, 0) 38%),
		linear-gradient(90deg, rgba(27, 58, 92, .04) 0%, rgba(27, 58, 92, 0) 38%, rgba(27, 58, 92, .06) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-ship-map img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	object-fit: cover;
	object-position: 50% 50%;
	filter: saturate(1.05) contrast(1.02);
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 12px 6px 6px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 253, 247, .92);
	color: var(--wc-navy);
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: 0;
	box-shadow:
		0 10px 22px rgba(36, 72, 120, .22),
		0 0 0 2px rgba(255, 253, 247, .76);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		background-color .22s ease;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-captain {
	left: 17%;
	top: 38%;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-deck {
	left: 46%;
	top: 66%;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-chart {
	left: 73%;
	top: 47%;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-port {
	left: 88%;
	top: 73%;
}

body.recruit-test main#contents.recruit.company .test-company-pin-dot {
	position: relative;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	border-radius: 50% 50% 50% 0;
	background: var(--wc-pin-red);
	box-shadow:
		inset -4px -5px 0 rgba(159, 7, 21, .24),
		0 0 0 5px var(--wc-pin-red-glow);
	transform: rotate(-45deg);
}

body.recruit-test main#contents.recruit.company .test-company-pin-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fffdf7;
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-pin-label {
	white-space: nowrap;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-ship-pin:focus-visible,
body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-active {
	background: #fffdf7;
	box-shadow:
		0 14px 26px rgba(36, 72, 120, .28),
		0 0 0 3px rgba(230, 0, 18, .3);
	transform: translate(-50%, -56%);
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .42);
	outline-offset: 4px;
}

body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-active .test-company-pin-dot {
	animation: testCompanyPinPulse 1.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.company .test-company-ship-panel {
	position: relative;
	min-height: 100%;
}

body.recruit-test main#contents.recruit.company .test-company-ship-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	padding: clamp(28px, 3.2vw, 42px);
	border: 1px solid rgba(36, 72, 120, .14);
	border-radius: 10px;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .96) 0%, rgba(250, 244, 230, .96) 100%);
	box-shadow: 0 18px 42px rgba(36, 72, 120, .14);
	color: var(--wc-navy);
}

body.recruit-test main#contents.recruit.company .test-company-ship-card[hidden] {
	display: none;
}

body.recruit-test main#contents.recruit.company .test-company-ship-card.is-active {
	animation: testCompanyPanelIn .26s ease-out;
}

body.recruit-test main#contents.recruit.company .test-company-ship-kicker {
	margin: 0 0 12px;
	color: var(--wc-sea-deep);
	font-family: "Montserrat", "Jost", sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: uppercase;
}

body.recruit-test main#contents.recruit.company .test-company-ship-card h3 {
	margin: 0 0 18px;
	color: var(--wc-navy);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 900;
	line-height: 1.45;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.company .test-company-ship-card p:not(.test-company-ship-kicker) {
	margin: 0;
	color: var(--wc-navy-soft);
	font-size: 15px;
	line-height: 1.9;
}

body.recruit-test main#contents.recruit.company .test-company-ship-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 46px;
	margin-top: clamp(24px, 3vw, 34px);
	padding: 0 22px;
	border: 1px solid rgba(36, 72, 120, .18);
	border-radius: 999px;
	background: var(--wc-navy);
	color: #fffdf7;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	box-shadow: 0 10px 20px rgba(36, 72, 120, .18);
	transition:
		background-color .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
}

body.recruit-test main#contents.recruit.company .test-company-ship-link:hover,
body.recruit-test main#contents.recruit.company .test-company-ship-link:focus-visible {
	background: var(--wc-sea-deep);
	color: #fffdf7;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(36, 72, 120, .22);
}

@keyframes testCompanyPinPulse {
	0%, 100% { box-shadow: inset -4px -5px 0 rgba(159, 7, 21, .24), 0 0 0 5px var(--wc-pin-red-glow); }
	50% { box-shadow: inset -4px -5px 0 rgba(159, 7, 21, .24), 0 0 0 12px rgba(230, 0, 18, .07); }
}

@keyframes testCompanyPanelIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width: 1024px) {
	body.recruit-test main#contents.recruit.company .test-company-ship-layout {
		grid-template-columns: 1fr;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-panel {
		min-height: 0;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-card {
		min-height: 260px;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-ship-town {
		padding: 58px 0 76px;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-head {
		text-align: left;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-head .c-recruit-section-title {
		justify-content: flex-start;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-map,
	body.recruit-test main#contents.recruit.company .test-company-ship-map img {
		min-height: 0;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-pin {
		gap: 6px;
		padding: 5px 9px 5px 5px;
		font-size: 12px;
		box-shadow:
			0 8px 18px rgba(36, 72, 120, .2),
			0 0 0 2px rgba(255, 253, 247, .74);
	}

	body.recruit-test main#contents.recruit.company .test-company-pin-dot {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-captain {
		left: 17%;
		top: 38%;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-deck {
		left: 46%;
		top: 66%;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-chart {
		left: 73%;
		top: 47%;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-port {
		left: 88%;
		top: 73%;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-card {
		min-height: 0;
		padding: 26px 22px;
	}

	body.recruit-test main#contents.recruit.company .test-company-ship-link {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.company .test-company-ship-pin.is-active .test-company-pin-dot,
	body.recruit-test main#contents.recruit.company .test-company-ship-card.is-active {
		animation: none;
	}
}

/* ============================================================
   35. MVの淡い層の上端が、スカロの目の高さで直線に見える
   ------------------------------------------------------------
   ■ 症状
   キービジュアルの上を、水平の直線が左右に横切っている。
   ちょうどスカロ（船長）の目の高さで、帽子の濃い青の上だと
   はっきり分かる。「水飛沫の切り替わり」に見えるが、
   水飛沫（.test-drop）は無関係。

   ■ 原因
   10番で置いた ::before（見出しを読ませるための淡い層）。
       inset: auto 0 0 0;  height: 58%;
       background: linear-gradient(9deg, … rgba(243,248,252,0) 92%);
   要素の上端は MV高さの 42%（1440x900 なら y=377px）にある水平線。
   一方 グラデーションは 9deg に傾いているので、透明になる
   「92%」の線も 9deg 傾いている。1440px の幅では
   tan(9°)×1440 ≒ 228px ぶん左右で高さがずれる。
   結果、水平な上端のうち片側はまだ透明になりきっておらず、
   そこだけ色が乗ったまま断ち切られる＝直線として見える。

   計測（1440x900・スカロの帽子 x560-760 の帯）:
     y=377 で行間の輝度差が最大の 9.81。他の行は 7 以下。
     y=377 は 900px の 41.9% ＝ ::before の上端と一致。

   ■ 直し方
   高さや角度をいじると 10番・20番の見え方が変わるので、
   上端だけをマスクで消す。傾きが何度であっても、上端が
   必ず完全な透明から始まるので原理的に段差が出ない。

   フェードは上から26%（≒136px）で、y=377〜514 の範囲。
   見出しが乗るのは y=580 付近からなので、
   「文字を読ませる」という ::before 本来の役目は削っていない。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-mv.p-test-mv::before {
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%, #000 100%);
	        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 26%, #000 100%);
}

/* ============================================================
   37. 働き方を知る：スマホ幅のはみ出しと表記ゆれを抑える
   ------------------------------------------------------------
   制度島MVはPCでは成立しているが、SPでは右上の旗ラベルと
   パンくずが画面外へ逃げやすい。ページ全体の横スクロールも
   ここでテストページ限定に抑える。
   ============================================================ */
body.recruit-test main#contents.recruit.workstyle.test-tone {
	overflow-x: clip;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage {
	contain: paint;
	overflow: clip;
}

@media screen and (max-width: 768.999px) {
	/* ここにあった --map-crop-x は、34番が絵を切り取らなくなった時点で効かなくなったので削除。
	   SPの見せ方を変えたいときは 34番の --map-h だけを触ること。 */
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot.spot-flag .spot-label,
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-spot.spot-library .spot-label {
		left: auto;
		right: calc(50% + var(--pin) / 2 + 7px);
		transform: translate(4px, calc(-50% + 2px));
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy {
		overflow: hidden;
	}

	body.recruit-test main#contents.recruit.workstyle .c-sidebar-wrap .contents-box .c-inner {
		width: auto;
		max-width: none;
		margin-inline: 20px;
		padding-inline: 0;
		padding-right: 0;
	}

	body.recruit-test main#contents.recruit.workstyle .con-box01 {
		overflow: hidden;
	}
}


/* ============================================================
   39. 会社を知る：トップ全面メインデッキ＋3ピン
   ------------------------------------------------------------
   company-ship-main-deck-watercolor-v3-photoshop.png をMVの
   主役にし、画像上には「船長室へ」「メインデッキ」「エントリー」の3ピンを置く。
   下部の旧4ピン船内マップは page-company-test.php 側で外している。
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-mv {
	min-height: clamp(720px, calc(100svh - 16px), 940px);
	padding-block: clamp(112px, 9vw, 148px) clamp(92px, 7vw, 124px);
	background: #cfe6f2;
	isolation: isolate;
}

body.recruit-test main#contents.recruit.company .test-company-mv::before {
	z-index: 3;
	background:
		linear-gradient(180deg, rgba(250, 244, 230, .66) 0%, rgba(250, 244, 230, .2) 34%, rgba(250, 244, 230, 0) 62%),
		linear-gradient(90deg, rgba(250, 244, 230, .72) 0%, rgba(250, 244, 230, .42) 26%, rgba(250, 244, 230, .08) 56%, rgba(250, 244, 230, 0) 100%);
}

body.recruit-test main#contents.recruit.company .test-company-mv::after,
body.recruit-test main#contents.recruit.company .test-company-island-scene::before {
	display: none;
}

body.recruit-test main#contents.recruit.company .test-company-mv .c-inner {
	position: relative;
	z-index: 10;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-mv .page-title {
	pointer-events: auto;
}

body.recruit-test main#contents.recruit.company .test-company-island-scene {
	z-index: 1;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-island-scene::after {
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .08) 0%, rgba(255, 253, 247, 0) 34%, rgba(16, 52, 85, .08) 100%),
		radial-gradient(circle at 23% 30%, rgba(255, 253, 247, .3) 0 10%, rgba(255, 253, 247, 0) 30%);
}

body.recruit-test main#contents.recruit.company .test-company-island-art {
	object-position: 50% 50%;
	filter: saturate(1.02) contrast(1.01);
	transform: scaleX(-1);
	transform-origin: center center;
	animation: none;
}

body.recruit-test main#contents.recruit.company .test-company-deck-crew {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-deck-character {
	position: absolute;
	left: var(--crew-left);
	top: var(--crew-top);
	z-index: var(--crew-z, 3);
	display: block;
	width: var(--crew-width);
	height: auto;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	filter:
		drop-shadow(3px 5px 2px rgba(54, 34, 18, .2))
		drop-shadow(11px 15px 9px rgba(73, 45, 21, .16));
	transform: translate(-50%, -50%) rotate(var(--crew-rotate, 0deg));
	transform-origin: 50% 72%;
}

body.recruit-test main#contents.recruit.company .test-company-deck-character.is-skaro {
	--crew-left: 74.99%;
	--crew-top: 38.17%;
	--crew-width: 12.40%;
	--crew-rotate: 0deg;
	--crew-z: 4;
}

body.recruit-test main#contents.recruit.company .test-company-deck-character.is-abby {
	--crew-left: 33.07%;
	--crew-top: 61.45%;
	--crew-width: 11%;
	--crew-rotate: 0deg;
}

body.recruit-test main#contents.recruit.company .test-company-deck-character.is-nagi {
	--crew-left: 47.01%;
	--crew-top: 41.47%;
	--crew-width: 11%;
	--crew-rotate: 0deg;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin {
	position: absolute;
	z-index: 8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wc-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	pointer-events: auto;
	transform: translate(-50%, -50%);
	transition: transform .22s ease;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain {
	left: 83%;
	top: 38%;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-deck {
	left: 54%;
	top: 66%;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-entry {
	left: 12%;
	top: 73%;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-dot {
	position: relative;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border: 3px solid #fffdf7;
	border-radius: 50% 50% 50% 0;
	background: var(--wc-pin-red);
	box-shadow:
		inset -5px -6px 0 rgba(159, 7, 21, .24),
		0 0 0 5px rgba(230, 0, 18, .28),
		0 10px 22px rgba(21, 55, 94, .34);
	transform: rotate(-45deg);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fffdf7;
	box-shadow: none;
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-label {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	padding: 9px 13px;
	border: 2px solid var(--wc-pin-red);
	border-radius: 999px;
	background: rgba(255, 253, 247, .98);
	box-shadow:
		0 14px 30px rgba(21, 55, 94, .28),
		0 0 0 3px rgba(20, 84, 150, .18);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-4px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible {
	transform: translate(-50%, calc(-50% - 5px));
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible .test-company-pin-label {
	opacity: 1;
	transform: translate(0, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .42);
	outline-offset: 4px;
}


body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain .test-company-pin-label {
	left: auto;
	right: calc(100% + 8px);
	transform: translate(4px, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain:focus-visible .test-company-pin-label {
	transform: translate(0, -50%);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-mv {
		min-height: clamp(620px, 156vw, 760px);
		padding-block: clamp(92px, 24vw, 118px) clamp(92px, 22vw, 128px);
	}

	body.recruit-test main#contents.recruit.company .test-company-mv::before {
		background:
			linear-gradient(180deg, rgba(250, 244, 230, .8) 0%, rgba(250, 244, 230, .34) 36%, rgba(250, 244, 230, 0) 68%),
			linear-gradient(90deg, rgba(250, 244, 230, .58) 0%, rgba(250, 244, 230, .2) 48%, rgba(250, 244, 230, 0) 100%);
	}

	body.recruit-test main#contents.recruit.company .test-company-island-art {
		object-position: 21% 50%;
		transform: scaleX(-1);
		transform-origin: center center;
		animation: none;
	}

	body.recruit-test main#contents.recruit.company .test-company-deck-crew {
		inset: 0;
	}

	body.recruit-test main#contents.recruit.company .test-company-deck-character.is-skaro {
		--crew-left: 48%;
		--crew-top: 30%;
		--crew-width: 29%;
	}

	body.recruit-test main#contents.recruit.company .test-company-deck-character.is-abby {
		--crew-left: 28%;
		--crew-top: 44%;
		--crew-width: 23%;
	}

	body.recruit-test main#contents.recruit.company .test-company-deck-character.is-nagi {
		--crew-left: 68%;
		--crew-top: 44%;
		--crew-width: 23%;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin {
		width: 40px;
		height: 40px;
		padding: 0;
		font-size: 12px;
		transform: translate(-50%, -50%);
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover,
	body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible {
		transform: translate(-50%, calc(-50% - 4px));
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-dot {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain {
		left: 82%;
		top: 38%;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-deck {
		left: 54%;
		top: 66%;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-entry {
		left: 13%;
		top: 73%;
	}
}

/* URL に ?crew-edit=1 を付けた時だけ、メインデッキの3体を個別配置できる。 */
body.recruit-test main#contents.recruit.company.is-deck-crew-edit .test-company-deck-crew {
	z-index: 9;
	pointer-events: auto;
}

body.recruit-test main#contents.recruit.company.is-deck-crew-edit .test-company-deck-character {
	pointer-events: auto;
	cursor: grab;
	touch-action: none;
}

body.recruit-test main#contents.recruit.company.is-deck-crew-edit .test-company-deck-character:active {
	cursor: grabbing;
}

body.recruit-test main#contents.recruit.company.is-deck-crew-edit .test-company-deck-character.is-edit-selected {
	outline: 2px dashed #e60012;
	outline-offset: 5px;
	filter:
		drop-shadow(0 0 8px rgba(255, 253, 247, .95))
		drop-shadow(3px 5px 2px rgba(54, 34, 18, .24))
		drop-shadow(11px 15px 9px rgba(73, 45, 21, .2));
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 10050;
	width: min(410px, calc(100vw - 36px));
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 8px;
	background: rgba(7, 40, 70, .94);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
	color: #fff;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__head {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__body {
	margin-top: 4px;
	color: #cfe6f2;
	font-size: 11px;
	line-height: 1.6;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__code {
	display: block;
	width: 100%;
	height: 150px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 6px;
	background: rgba(0, 20, 38, .72);
	color: #e9f6ff;
	font-family: Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	resize: vertical;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 6px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__actions button:hover,
body.recruit-test.is-deck-crew-edit .test-deck-crew-editor__actions button:focus-visible {
	background: rgba(255, 255, 255, .22);
}

/* ============================================================
   40. 会社を知る：船長室・経営理念導線
   ------------------------------------------------------------
   船長室画像上に「経営理念」と「メインデッキへ戻る」の2ピンを置く。
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-cabin {
	position: relative;
	min-height: clamp(680px, calc(100svh - 28px), 900px);
	padding: 0;
	background: #f5dfaa;
	overflow: hidden;
	isolation: isolate;
}

body.recruit-test main#contents.recruit.company .test-company-cabin::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(16, 52, 85, .08) 0%, rgba(16, 52, 85, 0) 34%, rgba(16, 52, 85, .18) 100%),
		linear-gradient(90deg, rgba(255, 253, 247, .34) 0%, rgba(255, 253, 247, 0) 34%, rgba(20, 84, 150, .1) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-scene {
	position: absolute;
	inset: 0;
	z-index: 1;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-art {
	--cabin-art-x: -0.64%;
	--cabin-art-y: 8.48%;
	--cabin-art-scale: 1.000;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
	filter: saturate(1.03) contrast(1.01);
	transform: translate3d(var(--cabin-art-x), var(--cabin-art-y), 0) scale(var(--cabin-art-scale));
	transform-origin: 50% 50%;
}

body.recruit-test main#contents.recruit.company.is-cabin-art-edit .test-company-cabin-scene {
	touch-action: none;
}

body.recruit-test main#contents.recruit.company.is-cabin-art-edit .test-company-cabin-art {
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
}

body.recruit-test main#contents.recruit.company.is-cabin-art-edit .test-company-cabin-art:active {
	cursor: grabbing;
}

body.recruit-test main#contents.recruit.company.is-cabin-art-edit .test-company-cabin-pin {
	cursor: move;
	touch-action: none;
}

body.recruit-test main#contents.recruit.company.is-cabin-art-edit .test-company-cabin-pin.is-edit-selected .test-company-pin-dot {
	outline: 3px dashed #ffe164;
	outline-offset: 5px;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin {
	position: absolute;
	left: var(--cabin-pin-left);
	top: var(--cabin-pin-top);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wc-navy);
	font-family: inherit;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: 0;
	text-decoration: none;
	transform: translate(-50%, -50%);
	transition: transform .22s ease;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe {
	--cabin-pin-left: 81.51%;
	--cabin-pin-top: 44.80%;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-exit {
	--cabin-pin-left: 11.08%;
	--cabin-pin-top: 28.96%;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-dot {
	position: relative;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border: 3px solid #fffdf7;
	border-radius: 50% 50% 50% 0;
	background: var(--wc-pin-red);
	box-shadow:
		inset -5px -6px 0 rgba(159, 7, 21, .24),
		0 0 0 5px rgba(230, 0, 18, .28),
		0 10px 22px rgba(21, 55, 94, .34);
	transform: rotate(-45deg);
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fffdf7;
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-label {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	padding: 9px 13px;
	border: 2px solid var(--wc-pin-red);
	border-radius: 999px;
	background: rgba(255, 253, 247, .98);
	box-shadow:
		0 14px 30px rgba(21, 55, 94, .28),
		0 0 0 3px rgba(20, 84, 150, .18);
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-4px, -50%);
	transition: opacity .2s ease, transform .2s ease;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible {
	transform: translate(-50%, calc(-50% - 5px));
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible .test-company-pin-label {
	opacity: 1;
	transform: translate(0, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .42);
	outline-offset: 4px;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe .test-company-pin-label {
	left: auto;
	right: calc(100% + 8px);
	transform: translate(4px, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe:focus-visible .test-company-pin-label {
	transform: translate(0, -50%);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-cabin {
		min-height: clamp(620px, 158vw, 760px);
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-art {
		object-position: 64% 50%;
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin {
		width: 40px;
		height: 40px;
		font-size: 12px;
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover,
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible {
		transform: translate(-50%, calc(-50% - 4px));
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-dot {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe {
		--cabin-pin-left: 86%;
		--cabin-pin-top: 52%;
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-exit {
		--cabin-pin-left: 10%;
		--cabin-pin-top: 31%;
	}
}

/* ============================================================
   34-2. 暮らしの入り江：トップ前面ピンバナー
   ------------------------------------------------------------ */
body.is-life-cove-open {
	overflow: hidden;
}

body.recruit-test .workstyle-life-cove-banner[hidden] {
	display: none;
}

body.recruit-test .workstyle-life-cove-banner {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: block;
	background: rgba(8, 24, 44, .88);
	opacity: 0;
	transition: opacity .18s ease;
}

body.recruit-test .workstyle-life-cove-banner.is-open {
	opacity: 1;
}

body.recruit-test .workstyle-life-cove-backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

body.recruit-test .workstyle-life-cove-explorer {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: #08182c;
	transform: scale(1.01);
	transition: transform .18s ease;
}

body.recruit-test .workstyle-life-cove-banner.is-open .workstyle-life-cove-explorer {
	transform: scale(1);
}

body.recruit-test .workstyle-life-cove-top {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 40px);
	padding: clamp(18px, 3vw, 36px) clamp(18px, 3.5vw, 48px) clamp(56px, 8vw, 110px);
	background: linear-gradient(180deg, rgba(8, 24, 44, .62), rgba(8, 24, 44, 0));
	pointer-events: none;
}

body.recruit-test .workstyle-life-cove-copy {
	min-width: 0;
	color: #fffdf7;
	text-shadow: 0 3px 18px rgba(8, 24, 44, .45);
}

body.recruit-test .workstyle-life-cove-kicker,
body.recruit-test .workstyle-life-cove-card-kicker {
	margin: 0 0 5px;
	color: #ffe267;
	font-size: 12px;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: .08em;
}

body.recruit-test .workstyle-life-cove-copy h3 {
	margin: 0;
	color: #fffdf7;
	font-size: clamp(22px, 3vw, 44px);
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: 0;
}

body.recruit-test .workstyle-life-cove-close,
body.recruit-test .workstyle-life-cove-detail-close {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	/* 52px だと CLOSE（10px・字間.14em）が入りきらず「CLOS / E」で折り返していた。
	   実測で内側38pxに対し文字が約38px。折り返さない幅にして nowrap で固定する。 */
	width: 56px;
	height: 52px;
	padding: 7px 5px;
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: currentColor;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
}

body.recruit-test .workstyle-life-cove-close {
	color: #fffdf7;
}

body.recruit-test .workstyle-life-cove-close .close-mark,
body.recruit-test .workstyle-life-cove-detail-close .close-mark {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
}

body.recruit-test .workstyle-life-cove-close .close-mark::before,
body.recruit-test .workstyle-life-cove-close .close-mark::after,
body.recruit-test .workstyle-life-cove-detail-close .close-mark::before,
body.recruit-test .workstyle-life-cove-detail-close .close-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
}

body.recruit-test .workstyle-life-cove-close .close-mark::before,
body.recruit-test .workstyle-life-cove-detail-close .close-mark::before { transform: rotate(45deg); }
body.recruit-test .workstyle-life-cove-close .close-mark::after,
body.recruit-test .workstyle-life-cove-detail-close .close-mark::after { transform: rotate(-45deg); }

body.recruit-test .workstyle-life-cove-close:hover,
body.recruit-test .workstyle-life-cove-detail-close:hover {
	color: var(--wc-coral);
}

body.recruit-test .workstyle-life-cove-close:focus-visible,
body.recruit-test .workstyle-life-cove-detail-close:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .48);
	outline-offset: 3px;
	border-radius: 8px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-panel-cta[href="#workstyle-life-cove-banner"]::after {
	content: "→";
}

body.recruit-test .workstyle-life-cove-map {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: #08182c;
}

body.recruit-test .workstyle-life-cove-canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
}

body.recruit-test .workstyle-life-cove-canvas::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(8, 24, 44, .12), rgba(8, 24, 44, 0) 28%, rgba(8, 24, 44, .16)),
		linear-gradient(0deg, rgba(8, 24, 44, .16), rgba(8, 24, 44, 0) 30%);
	pointer-events: none;
}

body.recruit-test .workstyle-life-cove-canvas > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(1.08) contrast(1.04);
}

body.recruit-test .workstyle-life-cove-pin {
	--pin: 30px;
	--tap: 58px;

	position: absolute;
	z-index: 3;
	display: block;
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wc-navy);
	cursor: pointer;
	translate: -50% -50%;
	transition: transform .24s ease, filter .24s ease;
}

body.recruit-test .workstyle-life-cove-pin:hover,
body.recruit-test .workstyle-life-cove-pin:focus-visible,
body.recruit-test .workstyle-life-cove-pin.is-active {
	filter: brightness(1.08) contrast(1.1);
}

body.recruit-test .workstyle-life-cove-pin:hover,
body.recruit-test .workstyle-life-cove-pin:focus-visible {
	transform: scale(1.09);
}

body.recruit-test .workstyle-life-cove-pin:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .68);
	outline-offset: 6px;
	border-radius: 99px;
}


body.recruit-test .workstyle-life-cove-pin .spot-pin {
	z-index: 1;
}

body.recruit-test .workstyle-life-cove-pin .spot-label {
	z-index: 2;
}

body.recruit-test .workstyle-life-cove-pin.is-flip .spot-label {
	left: auto;
	right: calc(50% + var(--pin) / 2 + 7px);
	transform: translate(4px, calc(-50% + 2px));
}

body.recruit-test .workstyle-life-cove-pin:hover .spot-label,
body.recruit-test .workstyle-life-cove-pin:focus-visible .spot-label,
body.recruit-test .workstyle-life-cove-pin.is-active .spot-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition-delay: 0s;
}

body.recruit-test .workstyle-life-cove-pin.is-flip:hover .spot-label,
body.recruit-test .workstyle-life-cove-pin.is-flip:focus-visible .spot-label,
body.recruit-test .workstyle-life-cove-pin.is-flip.is-active .spot-label {
	transform: translate(0, -50%);
}

body.recruit-test .workstyle-life-cove-pin.is-active .spot-pin {
	background: #b90010;
	animation: none;
}

body.recruit-test .workstyle-life-cove-pin.is-hybrid { left: 69%; top: 60%; }
body.recruit-test .workstyle-life-cove-pin.is-casual { left: 29%; top: 58%; }
body.recruit-test .workstyle-life-cove-pin.is-childcare { left: 54%; top: 30%; }
body.recruit-test .workstyle-life-cove-pin.is-care { left: 82%; top: 56%; }
body.recruit-test .workstyle-life-cove-pin.is-paid { left: 43%; top: 37%; }
body.recruit-test .workstyle-life-cove-pin.is-birthday { left: 74%; top: 68%; }
body.recruit-test .workstyle-life-cove-pin.is-anniversary { left: 36%; top: 48%; }
body.recruit-test .workstyle-life-cove-pin.is-no-overtime { left: 52%; top: 54%; }
body.recruit-test .workstyle-life-cove-pin.is-snack { left: 78%; top: 49%; }
body.recruit-test .workstyle-life-cove-pin.is-sports { left: 61%; top: 71%; }

body.recruit-test .workstyle-life-cove-detail {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	width: min(66vw, 820px);
	background: rgba(255, 253, 247, .97);
	box-shadow: 24px 0 70px rgba(4, 18, 36, .36);
	color: var(--wc-navy);
	transform: translateX(-104%);
	transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}

body.recruit-test .workstyle-life-cove-detail.is-open {
	transform: translateX(0);
}

body.recruit-test .workstyle-life-cove-detail-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex: 0 0 auto;
	padding: clamp(16px, 2vw, 24px) clamp(20px, 3vw, 42px);
}

body.recruit-test .workstyle-life-cove-detail-mark {
	margin: 0;
	color: var(--wc-coral);
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.recruit-test .workstyle-life-cove-detail-media {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 clamp(20px, 3vw, 42px);
}

body.recruit-test .workstyle-life-cove-detail-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
	box-shadow: 0 14px 30px rgba(27, 58, 92, .14);
}

body.recruit-test .workstyle-life-cove-detail-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: clamp(20px, 3vw, 42px);
	overflow: auto;
}

body.recruit-test .workstyle-life-cove-detail-body h4 {
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	color: var(--wc-navy);
	font-size: clamp(24px, 2.8vw, 42px);
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0;
}

body.recruit-test .workstyle-life-cove-detail-body h4::after {
	content: "";
	display: block;
	width: 92px;
	height: 8px;
	margin-top: 12px;
	border-radius: 999px;
	background: repeating-linear-gradient(-48deg, rgba(232, 217, 184, .95) 0 2px, rgba(232, 217, 184, 0) 2px 7px);
}

body.recruit-test .workstyle-life-cove-detail-body p {
	margin: 0;
	color: var(--wc-navy);
	font-size: clamp(14px, 1.05vw, 16px);
	line-height: 2.05;
}


@media (max-width: 768px) {
	body.recruit-test .workstyle-life-cove-top {
		padding: 12px 14px 58px;
	}

	body.recruit-test .workstyle-life-cove-copy h3 {
		font-size: 20px;
	}

	body.recruit-test .workstyle-life-cove-close,
	body.recruit-test .workstyle-life-cove-detail-close {
		width: 46px;
		height: 46px;
	}

	body.recruit-test .workstyle-life-cove-pin {
		--pin: 24px;
		--tap: 44px;
	}

	body.recruit-test .workstyle-life-cove-pin .spot-label {
		display: none;
	}

	body.recruit-test .workstyle-life-cove-detail {
		width: 100vw;
	}

	body.recruit-test .workstyle-life-cove-detail-head {
		padding: 12px 16px;
	}

	body.recruit-test .workstyle-life-cove-detail-media {
		padding: 0 16px;
	}

	body.recruit-test .workstyle-life-cove-detail-body {
		padding: 18px 16px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test .workstyle-life-cove-banner,
	body.recruit-test .workstyle-life-cove-explorer,
	body.recruit-test .workstyle-life-cove-pin,
	body.recruit-test .workstyle-life-cove-detail {
		animation: none;
		transition: none;
	}
}

/* ============================================================
   41. 会社を知る：ボラギノールタウン風ピンバナー統一
   ------------------------------------------------------------
   メインデッキと船長室のピン押下時に、働き方の島マップと同型の紙バナーを出す。
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-mv,
body.recruit-test main#contents.recruit.company .test-company-cabin {
	--company-panel-header-gap: clamp(132px, 9vw, 156px);
	position: relative;
}

body.recruit-test main#contents.recruit.company .test-company-island-scene,
body.recruit-test main#contents.recruit.company .test-company-cabin-scene {
	z-index: 11;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin {
	--pin: 28px;
	--tap: 50px;
	z-index: 13;
	display: block;
	width: var(--tap);
	height: var(--tap);
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--wc-navy);
	cursor: pointer;
	pointer-events: auto;
	transform: none;
	translate: -50% -50%;
	transition: transform .24s ease, filter .24s ease;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible,
body.recruit-test main#contents.recruit.company .test-company-mv-pin[aria-expanded="true"],
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin[aria-expanded="true"] {
	filter: brightness(1.06);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible {
	transform: scale(1.09);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-dot,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-dot {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: var(--pin);
	height: var(--pin);
	flex: 0 0 var(--pin);
	border: 3px solid #fffdf7;
	border-radius: 50% 50% 50% 0;
	background: var(--wc-pin-red);
	box-shadow:
		inset -4px -5px 0 rgba(159, 7, 21, .24),
		0 0 0 5px var(--wc-pin-red-glow),
		0 10px 22px rgba(21, 55, 94, .3);
	transform: translate(-50%, -50%) rotate(-45deg);
	animation: workstyleIslandPin 2.8s ease-in-out infinite;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-dot::after,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-dot::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fffdf7;
	transform: translate(-50%, -50%);
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin[aria-expanded="true"] .test-company-pin-dot,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin[aria-expanded="true"] .test-company-pin-dot {
	background: #b90010;
	animation: none;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-label {
	position: absolute;
	left: calc(50% + var(--pin) / 2 + 7px);
	top: 50%;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 7px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(218, 246, 255, .92));
	box-shadow: 0 8px 18px rgba(27, 58, 92, .16), inset 0 -2px 0 rgba(0, 145, 221, .1);
	color: var(--wc-navy);
	font-size: clamp(11px, 1.05vw, 14px);
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translate(-4px, calc(-50% + 2px));
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-numbers .test-company-pin-label {
	left: auto;
	right: calc(50% + var(--pin) / 2 + 7px);
	transform: translate(4px, calc(-50% + 2px));
}

body.recruit-test main#contents.recruit.company .test-company-mv-pin:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-mv-pin:focus-visible .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:hover .test-company-pin-label,
body.recruit-test main#contents.recruit.company .test-company-cabin-pin:focus-visible .test-company-pin-label {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
	transition-delay: 0s;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel {
	position: absolute;
	z-index: 14;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(1360px, 72vw);
	height: 100%;
	background: #fffdf7;
	box-shadow: 22px 0 60px rgba(27, 58, 92, .20);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(-101%);
	transition: transform .42s cubic-bezier(.22, .9, .3, 1), visibility 0s linear .42s;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel.is-open {
	visibility: visible;
	transform: none;
	transition: transform .42s cubic-bezier(.22, .9, .3, 1), visibility 0s;
}

/* サイト共通ヘッダーを避けるための余白は、パネルの padding-top ではなく
   この見出し帯の padding-top で取る。
   padding-top をスクロールコンテナ側に置くと、その余白ぶんはスクロール領域の
   一部なので中身が上へ抜けて見え、sticky な見出し帯の**上**に本文が覗く
   （パネルが縦に溢れたときだけ出るので長らく気づかれていなかった）。
   帯そのものを背景ごと厚くして top:0 で貼れば、上に抜けた中身は帯の下に隠れる。 */
body.recruit-test main#contents.recruit.company .test-company-map-panel-head {
	position: sticky;
	z-index: 3;
	top: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: calc(var(--company-panel-header-gap) + clamp(16px, 2.2vw, 34px)) clamp(20px, 3.2vw, 54px) clamp(10px, 1.2vw, 18px);
	background: #fffdf7;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-mark {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
	margin: 0;
	color: var(--wc-navy-soft);
	font-size: clamp(11px, 1vw, 13px);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-mark span {
	padding-left: clamp(10px, 1.2vw, 16px);
	border-left: 1px solid rgba(27, 58, 92, .22);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-logo {
	display: block;
	width: auto;
	height: clamp(22px, 2.1vw, 30px);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-close {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	width: auto;
	height: auto;
	padding: 2px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--wc-navy);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	cursor: pointer;
	transition: color .2s ease;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-close .close-mark {
	position: relative;
	display: block;
	width: clamp(22px, 2vw, 28px);
	height: clamp(22px, 2vw, 28px);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-close .close-mark::before,
body.recruit-test main#contents.recruit.company .test-company-map-panel-close .close-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-close .close-mark::before { transform: rotate(45deg); }
body.recruit-test main#contents.recruit.company .test-company-map-panel-close .close-mark::after { transform: rotate(-45deg); }
body.recruit-test main#contents.recruit.company .test-company-map-panel-close:hover { color: var(--wc-coral); }

body.recruit-test main#contents.recruit.company .test-company-map-panel-close:focus-visible {
	outline: 2px solid var(--wc-coral);
	outline-offset: 4px;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-media,
body.recruit-test main#contents.recruit.company .test-company-map-panel.is-no-media .test-company-map-panel-media,
body.recruit-test main#contents.recruit.company .test-company-map-panel-art:empty {
	display: none;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 0 auto;
	padding: clamp(28px, 4vw, 62px) clamp(24px, 4.2vw, 70px) clamp(24px, 3.2vw, 48px);
}

/* ------------------------------------------------------------
   船長室の「経営理念について」バナーに図版を載せる
   ------------------------------------------------------------
   workstyle-island.js の items に image があるスポットだけ、パネルに
   .has-panel-art が付いて figure[data-company-art] に図版が入る。

   横並び（本文左・図版右）にしていない理由:
   本文は max-width 34em ＝ 1440幅で実測 544px、パネル内側は 911px しかなく、
   図版に回せるのは 330px 前後。slogan-img01.png は 1700x850 の図解で、
   その幅だと中の文字が 7px 相当まで潰れて読めなくなる。
   会社ページの同じ図版は 850px で出しているので、こちらも同じ幅を上限に
   本文の下へ積む。パネルは overflow-y:auto なので縦は伸びてよい。
   ------------------------------------------------------------ */
body.recruit-test main#contents.recruit.company .test-company-map-panel.has-panel-art .test-company-map-panel-inner {
	/* 見出し・本文・図版の左端を揃えるための共通幅。図版と本文ブロックで同じ値を使う。 */
	--panel-art-w: min(100%, 800px);
	flex-direction: column;
	gap: clamp(20px, 2.4vw, 34px);
	padding-top: clamp(22px, 2.8vw, 44px);
	padding-bottom: clamp(20px, 2.6vw, 40px);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel.has-panel-art .test-company-map-panel-body {
	order: 1;
	max-width: var(--panel-art-w);
}

/* 本文ブロックを図版幅まで広げても、読み物の行長は元の 34em のままにしておく。 */
body.recruit-test main#contents.recruit.company .test-company-map-panel.has-panel-art .test-company-map-panel-body .c-text {
	max-width: 34em;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-art {
	order: 2;
	width: var(--panel-art-w, min(100%, 800px));
	margin: 0;
	border: 1px solid rgba(74, 143, 199, .26);
	border-radius: 10px;
	/* 図版の地は白。パネルの地（#fffdf7）に直接置くと縁が溶けるので、
	   白を敷いたうえで枠と影を付けて「貼ってある」ように見せる。 */
	background: #fff;
	box-shadow: 0 16px 34px rgba(36, 72, 120, .12);
	overflow: hidden;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-art-image {
	display: block;
	width: 100%;
	height: auto;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-body {
	width: 100%;
	max-width: 34em;
	padding: 0;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 clamp(10px, 1.2vw, 16px);
	color: var(--wc-coral);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-kicker::before {
	content: "";
	width: clamp(18px, 2vw, 28px);
	height: 1px;
	background: currentColor;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel h2 {
	margin: 0 0 clamp(16px, 1.8vw, 26px);
	color: var(--wc-navy);
	font-size: clamp(21px, 2.3vw, 34px);
	font-weight: 900;
	line-height: 1.6;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel h2 span {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 .08em .06em;
	background-image: repeating-linear-gradient(-48deg, rgba(232, 217, 184, .95) 0 2px, rgba(232, 217, 184, 0) 2px 7px);
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: auto .46em;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel .c-text {
	margin: 0;
	color: var(--wc-navy);
	font-size: clamp(13px, 1.05vw, 16px);
	line-height: 2.05;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-extra[hidden] {
	display: none;
}

/* ------------------------------------------------------------
   デッキのバナーに出る Business の4枚
   ------------------------------------------------------------
   文字入れは **会社を知るページ本体の Business カードと同じ**にする。
   ＝絵の上に白抜きで、左に番号・右にタイトル。
   本体側の正本は style.css の
     main#contents.recruit.company .con-box02 .box01 .list .list-item .img
     （とその ::after / img / figcaption / .number / .item-title）
   もとはここだけ「枠＋薄い地＋赤い番号を絵の下に置く」独自のカードで、
   同じ絵・同じ節なのにデッキから飛ぶと別物に見えた（2026-09-16 修正）。
   本体側を触るときはここも一緒に直すこと。
   ------------------------------------------------------------ */

/* 本文（c-text）は読み物なので 34em のままでいいが、カードは絵なので
   34em＝実測544pxの中に2枚並べるとイラストが潰れる。
   ステップがあるときだけ本文ブロック側を広げて、絵に幅を回す。 */
body.recruit-test main#contents.recruit.company .test-company-map-panel.has-business-steps .test-company-map-panel-body {
	max-width: min(100%, 900px);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel.has-business-steps .test-company-map-panel-body .c-text {
	max-width: 34em;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: clamp(18px, 2.2vw, 28px);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-step {
	position: relative;
	margin: 0;
	/* 本体は height:190px 固定。ここは枠が狭いぶん少しだけ縮む。
	   絵は 840x376（比 2.23）なので、この高さだと上下がわずかに切れる程度。 */
	height: clamp(124px, 13.2vw, 190px);
	border-radius: 10px;
	overflow: hidden;
}

/* 下から navy のグラデをかけて白抜き文字を乗せる。本体の .img::after と同値。 */
body.recruit-test main#contents.recruit.company .test-company-map-panel-step::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	height: 62%;
	background: linear-gradient(180deg, rgba(6, 31, 69, 0) 0%, rgba(6, 31, 69, .55) 58%, rgba(6, 31, 69, .78) 100%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-step img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-step-caption {
	position: absolute;
	bottom: clamp(13px, 1.8vw, 24px);
	left: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	padding-inline: clamp(14px, 1.9vw, 26px);
	color: #fff;
	text-shadow: 0 3px 12px rgba(0, 26, 58, .62);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-step-number {
	font-family: "Jost", sans-serif;
	font-size: clamp(13px, 1.15vw, 18px);
	font-weight: 600;
	line-height: 1;
	/* 赤にしない。本体のカードは白抜きで、ここだけ赤いと番号が浮く */
	color: inherit;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-step-title {
	font-size: clamp(17px, 1.9vw, 30px);
	font-weight: bold;
	line-height: 1.2;
}

@media screen and (max-width: 768.999px) {
	/* SPはパネル自体が 90vw しかないので、本体と同じく1列に落とす */
	body.recruit-test main#contents.recruit.company .test-company-map-panel-steps {
		grid-template-columns: minmax(0, 1fr);
	}

	body.recruit-test main#contents.recruit.company .test-company-map-panel-step {
		height: min(40vw, 190px);
	}
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 44px;
	margin-top: clamp(18px, 2.2vw, 28px);
	padding: 0 20px;
	/* 枠は透明のまま残す。白フチにすると濃紺の上で輪っかが目立って
	   エントリーボタンと別物に見えるため。太さは高さを変えないための保持。 */
	border: 2px solid transparent;
	border-radius: 999px;
	background-color: var(--btn-brand);
	background-image: var(--btn-brand-grad);
	box-shadow: 0 12px 26px rgba(0, 91, 167, .28), inset 0 -2px 0 rgba(5, 34, 68, .12);
	color: #fff;
	font-size: clamp(13px, 1vw, 15px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta::after {
	content: "↓";
	margin-left: .55em;
	font-size: 1.08em;
	line-height: 1;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta[href*="captains-cabin-test"]::after,
body.recruit-test main#contents.recruit.company .test-company-map-panel-cta[href*="entry"]::after {
	content: "→";
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta:hover,
body.recruit-test main#contents.recruit.company .test-company-map-panel-cta:focus-visible {
	background-image: var(--btn-brand-grad-hover);
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 91, 167, .34), inset 0 -2px 0 rgba(5, 34, 68, .12);
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta:focus-visible {
	outline: 3px solid rgba(0, 91, 167, .45);
	outline-offset: 3px;
}

body.recruit-test main#contents.recruit.company .test-company-map-panel-cta[hidden] { display: none; }

body.recruit-test main#contents.recruit.company .test-company-map-panel-foot {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 clamp(20px, 3.2vw, 54px) clamp(16px, 2vw, 28px);
	color: rgba(27, 58, 92, .40);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1.4;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-title {
	position: relative;
	z-index: 10;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-title .page-title {
	pointer-events: auto;
}

body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-numbers {
	--cabin-pin-left: 52.71%;
	--cabin-pin-top: 73.01%;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-mv,
	body.recruit-test main#contents.recruit.company .test-company-cabin {
		--company-panel-header-gap: clamp(96px, 22vw, 118px);
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin,
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin {
		--pin: 24px;
		--tap: 44px;
	}

	body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-label,
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-label {
		padding: 4px 7px;
		border-radius: 5px;
		font-size: 10px;
	}

	body.recruit-test main#contents.recruit.company .test-company-map-panel {
		width: min(100%, 90vw);
	}

	body.recruit-test main#contents.recruit.company .test-company-map-panel-inner {
		align-items: flex-start;
		padding: clamp(26px, 7vw, 40px) clamp(20px, 6vw, 30px) clamp(22px, 6vw, 34px);
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-numbers {
		--cabin-pin-left: 55%;
		--cabin-pin-top: 65%;
	}
}


/* ============================================================
   45. 働き方を知る：入社後の流れを海賊の宴にする
   ------------------------------------------------------------ */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-banquet {
	--banquet-navy: var(--ch-scallo, #244878);
	--banquet-blue: var(--ch-abi, #6cb4e4);
	--banquet-coral: var(--ch-infi, #f07884);
	--banquet-gold: #cfa45a;
	position: relative;
	margin-top: clamp(34px, 5vw, 64px);
	padding: clamp(22px, 4vw, 46px);
	border: 1px solid rgba(201, 160, 99, .34);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .94), rgba(247, 239, 221, .9)),
		repeating-linear-gradient(90deg,
			rgba(151, 93, 45, .12) 0 1px,
			rgba(255, 255, 255, 0) 1px 82px),
		linear-gradient(90deg, #e2b979, #f5ddaa 36%, #c8914d 100%);
	box-shadow: 0 22px 42px rgba(36, 72, 120, .12), inset 0 1px 0 rgba(255, 255, 255, .7);
	overflow: hidden;
}

body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-banquet::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed rgba(201, 160, 99, .42);
	border-radius: 6px;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-invite-copy {
	margin: clamp(14px, 2vw, 22px) auto 0;
	color: var(--wc-navy);
	font-size: clamp(18px, 2.2vw, 28px);
	font-weight: 800;
	line-height: 1.65;
	text-align: center;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-banquet:has(.workstyle-banquet-invite:not([hidden])) {
	padding: clamp(18px, 3vw, 32px) 0 0;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-banquet:has(.workstyle-banquet-invite:not([hidden]))::before {
	display: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	min-height: clamp(300px, 42vw, 520px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button {
	position: relative;
	display: block;
	width: min(1080px, 112%);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	filter: drop-shadow(0 22px 24px rgba(36, 72, 120, .18));
	transition: transform .25s ease, filter .25s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button img {
	display: block;
	width: 100%;
	height: auto;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-start-label {
	position: absolute;
	left: 50%;
	bottom: clamp(-2px, 1vw, 12px);
	translate: -50% 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: min(300px, 68vw);
	min-height: clamp(48px, 5.6vw, 60px);
	padding: 0 clamp(26px, 4vw, 42px);
	border: 2px solid rgba(255, 255, 255, .9);
	border-radius: 999px;
	background-image: linear-gradient(120deg, #004e91 0%, #0063ac 58%, #00a3dd 100%);
	box-shadow: 0 14px 26px rgba(0, 99, 172, .28), inset 0 2px 0 rgba(255, 255, 255, .32);
	color: #fff;
	font-weight: 900;
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-start-label::after {
	content: "";
	width: .55em;
	height: .55em;
	margin-left: .75em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	rotate: 45deg;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button:focus-visible {
	transform: translateY(-5px) scale(1.015);
	filter: drop-shadow(0 28px 28px rgba(36, 72, 120, .23));
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button:hover .workstyle-banquet-start-label,
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button:focus-visible .workstyle-banquet-start-label {
	background-image: linear-gradient(120deg, #003f78 0%, #005293 58%, #008cc4 100%);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button:focus-visible {
	outline: 3px solid rgba(36, 72, 120, .75);
	outline-offset: 8px;
	border-radius: 8px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-course {
	position: relative;
	z-index: 1;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-course[hidden],
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite[hidden] {
	display: none !important;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-plate {
	display: grid;
	grid-template-columns: minmax(320px, 1.08fr) minmax(300px, .92fr);
	align-items: center;
	gap: clamp(20px, 4vw, 54px);
	min-height: clamp(420px, 42vw, 560px);
	padding: clamp(24px, 4vw, 48px);
	border: 1px solid rgba(201, 160, 99, .42);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(255, 253, 247, .86), rgba(255, 248, 232, .72)),
		repeating-linear-gradient(0deg, rgba(124, 79, 42, .12) 0 2px, rgba(255, 255, 255, 0) 2px 72px),
		linear-gradient(90deg, #9f6531, #d79b55 45%, #8e5729 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66), 0 18px 30px rgba(36, 72, 120, .1);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-dish {
	position: relative;
	margin: 0;
	min-width: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-dish::before {
	content: "";
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 4%;
	height: 20%;
	border-radius: 50%;
	background: rgba(36, 72, 120, .16);
	filter: blur(14px);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-dish img {
	position: relative;
	display: block;
	width: min(126%, 640px);
	height: auto;	
	max-width: none;
	max-height: 520px;
	margin-inline: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 16px rgba(67, 45, 24, .18));
	animation: workstyleBanquetDishIn .38s ease both;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-copy {
	min-width: 0;
	padding: clamp(22px, 3vw, 34px);
	border: 1px solid rgba(108, 180, 228, .34);
	border-radius: 8px;
	background: rgba(255, 253, 247, .9);
	box-shadow: 0 12px 22px rgba(36, 72, 120, .08);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-copy:focus {
	outline: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-count {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	margin: 0 0 14px;
	padding: 0 13px;
	border: 1px solid rgba(36, 72, 120, .22);
	border-radius: 999px;
	background: rgba(214, 231, 244, .74);
	color: var(--banquet-navy);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-period {
	margin: 0 0 8px;
	color: var(--banquet-coral);
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 900;
	line-height: 1.2;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-copy h3 {
	margin: 0;
	color: var(--banquet-navy);
	font-size: clamp(24px, 3vw, 38px);
	font-weight: 900;
	line-height: 1.24;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-copy .c-text {
	margin-top: clamp(14px, 1.8vw, 22px);
	color: var(--wc-navy);
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.9;
	word-break: auto-phrase;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-controls {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
	margin-top: clamp(18px, 3vw, 30px);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list::before {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	top: 50%;
	height: 4px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--banquet-gold) 0 var(--banquet-progress, 16.66%), rgba(36, 72, 120, .16) var(--banquet-progress, 16.66%) 100%);
	translate: 0 -50%;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list li {
	position: relative;
	z-index: 1;
	margin: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-inline: auto;
	border: 1px solid rgba(36, 72, 120, .28);
	border-radius: 50%;
	background: rgba(255, 253, 247, .94);
	box-shadow: 0 6px 14px rgba(36, 72, 120, .1);
	color: var(--banquet-navy);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button:hover,
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button:focus-visible,
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button.is-active {
	transform: translateY(-2px);
	border-color: rgba(240, 120, 132, .72);
	background: #fff;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button.is-active {
	box-shadow: 0 0 0 6px rgba(240, 120, 132, .18), 0 8px 16px rgba(36, 72, 120, .12);
	color: var(--banquet-coral);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button:focus-visible,
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-nav:focus-visible {
	outline: 3px solid rgba(36, 72, 120, .72);
	outline-offset: 3px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid rgba(36, 72, 120, .22);
	border-radius: 999px;
	background: rgba(255, 253, 247, .9);
	color: var(--banquet-navy);
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-nav:hover {
	transform: translateY(-2px);
	border-color: rgba(36, 72, 120, .38);
	background: #fff;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-nav:disabled {
	cursor: default;
	opacity: .38;
	transform: none;
}

@keyframes workstyleBanquetDishIn {
	from { opacity: 0; transform: translateY(14px) scale(.97) rotate(-.8deg); }
	to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@media screen and (max-width: 900px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-plate {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-dish img {
		max-height: 360px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-controls {
		grid-template-columns: 1fr 1fr;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-banquet {
		margin-top: 28px;
		padding: 16px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite {
		min-height: 0;
		padding: 8px 0 18px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-invite-button {
		width: min(600px, 112%);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-start-label {
		bottom: 0;
		min-width: min(240px, 68vw);
		min-height: 48px;
		font-size: 17px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-plate {
		gap: 12px;
		padding: 16px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-copy {
		padding: 18px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-dish img {
		width: min(112%, 420px);
		max-height: 280px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-controls {
		gap: 14px 10px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-nav {
		min-width: 0;
		width: 100%;
		min-height: 44px;
		font-size: 12px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list {
		gap: 6px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-banquet-step-list button {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}
}

/* ==========================================================================
   46. 働き方を知る：入社後の航路スクロール
   ========================================================================== */
body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-onboarding-route {
	--onboarding-section-h: max(1780px, 177.7vw);
	--onboarding-stage-h: calc(var(--onboarding-section-h) - 400px);
	--onboarding-edge-color: #dceef7;
	--onboarding-sidebar-pad: 250px;

	position: relative;
	left: auto;
	right: auto;
	box-sizing: border-box;
	width: calc(100vw + var(--onboarding-sidebar-pad));
	max-width: none;
	z-index: 1;
	min-height: var(--onboarding-section-h);
	margin: 48px calc(50% - 50vw) 0;
	padding: 92px clamp(18px, 5vw, 72px) 120px;
	overflow: hidden;
	background-color: #e8f7ff;
	background-image: url("../images/recruit/test/map/entry-flow/entry-onboarding-map-bg-revised-b-v5.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow:
		0 -34px 44px 28px var(--onboarding-edge-color),
		0 34px 44px 28px var(--onboarding-edge-color);
	color: #173247;
	isolation: isolate;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("../images/recruit/test/map/entry-flow/entry-onboarding-map-bg-revised-b-v5.png");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	content: "";
	opacity: 1;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route::after {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(180deg,
			var(--onboarding-edge-color) 0%,
			rgba(220, 238, 247, 0.96) 2.4%,
			rgba(220, 238, 247, 0.64) 5.8%,
			rgba(220, 238, 247, 0.18) 10%,
			rgba(220, 238, 247, 0) 15%,
			rgba(220, 238, 247, 0) 85%,
			rgba(220, 238, 247, 0.18) 90%,
			rgba(220, 238, 247, 0.64) 94.2%,
			rgba(220, 238, 247, 0.96) 97.6%,
			var(--onboarding-edge-color) 100%);
	content: "";
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__header,
body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__stage {
	position: relative;
	z-index: 1;
	width: min(1120px, 100%);
	margin-right: auto;
	margin-left: auto;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__header {
	width: min(680px, 100%);
	margin-bottom: 54px;
	text-align: center;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__title {
	margin: 0;
	color: #14314a;
	font-size: clamp(28px, 5vw, 54px);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.08;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__lead {
	margin: 16px auto 0;
	color: rgba(23, 50, 71, 0.76);
	font-size: clamp(15px, 2vw, 18px);
	font-weight: 600;
	line-height: 1.85;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__stage {
	height: var(--onboarding-stage-h);
	min-height: 1380px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__line {
	position: absolute;
	top: 18px;
	left: 50%;
	width: min(33vw, 360px);
	min-width: 220px;
	height: calc(var(--onboarding-stage-h) - 140px);
	min-height: 1240px;
	transform: translateX(-50%);
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__path {
	fill: none;
	stroke: transparent;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__abby {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: clamp(132px, 11vw, 176px);
	transform: translate(-50%, -58%);
	will-change: transform;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__abby img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 10px 9px rgba(25, 61, 82, 0.2));
	transform-origin: 50% 82%;
	animation: workstyle-onboarding-abby-walk 1400ms ease-in-out infinite;
}

@keyframes workstyle-onboarding-abby-walk {
	0%,
	100% {
		transform: translateX(0) translateY(0) rotate(-1deg);
	}

	25% {
		transform: translateX(-1px) translateY(-3px) rotate(1deg);
	}

	50% {
		transform: translateX(0) translateY(0) rotate(1deg);
	}

	75% {
		transform: translateX(1px) translateY(-3px) rotate(-1deg);
	}
}


body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew-layer {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew {
	position: absolute;
	top: var(--entry-top);
	left: var(--entry-left);
	display: block;
	width: var(--entry-w);
	height: auto;
	filter: drop-shadow(0 12px 12px rgba(25, 61, 82, 0.18));
	transform: translate(-50%, -50%) translate(var(--entry-x, 0px), var(--entry-y, 0px)) rotate(var(--entry-r, 0deg));
	transform-origin: 50% 76%;
	-webkit-user-select: none;
	        user-select: none;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-sukaro {
	--entry-left: 23%;
	--entry-top: 17%;
	--entry-w: 147px;
	--entry-x: 166px;
	--entry-y: 1606px;
	--entry-r: -7deg;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-infi {
	--entry-left: 74%;
	--entry-top: 39%;
	--entry-w: 155px;
	--entry-x: -70px;
	--entry-y: 54px;
	--entry-r: 10deg;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-nagi {
	--entry-left: 28%;
	--entry-top: 70%;
	--entry-w: 169px;
	--entry-x: 8px;
	--entry-y: -1460px;
	--entry-r: 6deg;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step {
	position: absolute;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: min(360px, calc(50% - 96px));
	min-height: 132px;
	padding: 22px;
	border: 1px solid rgba(47, 102, 132, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow:
		0 20px 48px rgba(23, 50, 71, 0.18),
		0 0 0 1px rgba(255, 255, 255, 0.72) inset;
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	opacity: 0;
	filter: blur(2px);
	transform: translateY(26px) scale(0.98);
	transition:
		opacity 640ms ease,
		filter 640ms ease,
		transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step.is-revealed {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0) scale(1);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(odd) {
	left: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(even) {
	right: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--1 {
	top: 2.6%;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--2 {
	top: 23%;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--3 {
	top: 43.8%;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--4 {
	top: 64.3%;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--5 {
	top: 84.5%;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step__number {
	margin: 0 0 8px;
	color: #2b6c91;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step__title {
	margin: 0;
	color: #173247;
	font-size: clamp(20px, 2.5vw, 28px);
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.22;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step__text {
	margin: 10px 0 0;
	color: rgba(23, 50, 71, 0.9);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step__mark {
	position: absolute;
	top: 50%;
	width: 16px;
	height: 16px;
	border: 3px solid #ffffff;
	border-radius: 50%;
	background: #2b8ec4;
	box-shadow: 0 0 0 5px rgba(43, 142, 196, 0.2);
	transform: translateY(-50%);
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(odd) .workstyle-onboarding-step__mark {
	right: -67px;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(even) .workstyle-onboarding-step__mark {
	left: -67px;
}

@media screen and (max-width: 840px) {
	body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-onboarding-route {
		--onboarding-section-h: max(1900px, 177.7vw);
		--onboarding-stage-h: calc(var(--onboarding-section-h) - 380px);
		--onboarding-sidebar-pad: clamp(16px, 5vw, 30px);

		padding: 74px 16px 96px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__header {
		margin-bottom: 40px;
		text-align: left;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__stage {
		height: var(--onboarding-stage-h);
		min-height: 1520px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__line {
		left: 50%;
		width: 156px;
		min-width: 156px;
		height: calc(var(--onboarding-stage-h) - 120px);
		min-height: 1400px;
		opacity: 0.82;
		transform: translateX(-50%);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__abby {
		width: 148px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-sukaro {
		--entry-left: 18%;
		--entry-top: 14%;
		--entry-w: 112px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-infi {
		--entry-left: 80%;
		--entry-top: 38%;
		--entry-w: 88px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-crew.is-nagi {
		--entry-left: 24%;
		--entry-top: 72%;
		--entry-w: 116px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step {
		right: auto;
		left: auto;
		width: min(100%, 560px);
		min-height: 0;
		padding: 18px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(odd),
	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(even) {
		right: auto;
		left: 0;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--1 {
		top: 2.9%;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--2 {
		top: 22.8%;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--3 {
		top: 42.8%;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--4 {
		top: 62.8%;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step--5 {
		top: 82.5%;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(odd) .workstyle-onboarding-step__mark,
	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-step:nth-of-type(even) .workstyle-onboarding-step__mark {
		top: -11px;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__abby img {
		animation: none;
	}
}


body.recruit-test main#contents.recruit.workstyle.is-onboarding-entry-edit .workstyle-onboarding-crew-layer {
	z-index: 6;
	pointer-events: auto;
}

body.recruit-test main#contents.recruit.workstyle.is-onboarding-entry-edit .workstyle-onboarding-crew {
	cursor: grab;
	touch-action: none;
}

body.recruit-test main#contents.recruit.workstyle.is-onboarding-entry-edit .workstyle-onboarding-crew:active {
	cursor: grabbing;
}

body.recruit-test main#contents.recruit.workstyle.is-onboarding-entry-edit .workstyle-onboarding-crew.is-edit-selected {
	outline: 2px dashed #f2ff3d;
	outline-offset: 8px;
	filter:
		drop-shadow(0 0 8px rgba(205, 222, 28, 0.8))
		drop-shadow(0 12px 12px rgba(25, 61, 82, 0.26));
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel {
	position: fixed;
	z-index: 10060;
	right: 18px;
	bottom: 18px;
	width: min(430px, calc(100vw - 36px));
	padding: 14px;
	border: 1px solid rgba(226, 241, 252, 0.34);
	border-radius: 8px;
	background: rgba(9, 24, 40, 0.94);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
	color: #eaf4ff;
	font-family: inherit;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__head {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__body {
	margin-top: 4px;
	color: #bdd3e6;
	font-size: 11px;
	line-height: 1.6;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__code {
	display: block;
	width: 100%;
	height: 170px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid rgba(226, 241, 252, 0.22);
	border-radius: 6px;
	background: rgba(3, 12, 22, 0.74);
	color: #dff0ff;
	font-family: Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	resize: vertical;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid rgba(226, 241, 252, 0.3);
	border-radius: 6px;
	background: rgba(226, 241, 252, 0.12);
	color: #eaf4ff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__actions button:hover,
body.recruit-test.is-onboarding-entry-edit .test-entry-editor-panel__actions button:focus-visible {
	background: rgba(226, 241, 252, 0.22);
}

/* ============================================================
   34-3. 出航準備CTA：宝箱を閉じた状態から開く
   ------------------------------------------------------------
   既存素材は開いた宝箱1枚なので、本体は下箱だけを切り出し、
   蓋レイヤーは閉じた位置から奥へ倒す。財宝プレートとラベルは
   箱の中から上がってくる順にして、蓋だけが飛ぶ動きに見せない。
   ============================================================ */
body.recruit-test .p-test-qa .test-qa-treasure-entry {
	perspective: 760px;
	animation: testQaTreasureFloat 4.6s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-treasure-entry::before,
body.recruit-test .p-test-qa .test-qa-treasure-entry::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: clamp(86px, 7.4vw, 118px);
	z-index: 2;
	width: clamp(170px, 16vw, 230px);
	height: clamp(96px, 8vw, 126px);
	pointer-events: none;
	opacity: 0;
	transform: translateX(-50%) translateY(34px) scale(.76);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry::before {
	background:
		radial-gradient(circle at 22% 78%, rgba(255, 226, 103, .95) 0 5px, transparent 6px),
		radial-gradient(circle at 40% 58%, rgba(255, 253, 247, .96) 0 4px, transparent 5px),
		radial-gradient(circle at 55% 74%, rgba(111, 190, 225, .92) 0 5px, transparent 6px),
		radial-gradient(circle at 70% 52%, rgba(255, 159, 126, .9) 0 5px, transparent 6px),
		radial-gradient(circle at 82% 70%, rgba(255, 253, 247, .92) 0 3px, transparent 4px);
	filter: drop-shadow(0 6px 8px rgba(36, 72, 120, .16));
}

body.recruit-test .p-test-qa .test-qa-treasure-entry::after {
	background:
		radial-gradient(circle at 20% 36%, rgba(255, 253, 247, .98) 0 2px, transparent 3px),
		radial-gradient(circle at 34% 18%, rgba(255, 226, 103, .95) 0 4px, transparent 5px),
		radial-gradient(circle at 52% 32%, rgba(255, 253, 247, .98) 0 3px, transparent 4px),
		radial-gradient(circle at 68% 16%, rgba(255, 226, 103, .9) 0 4px, transparent 5px),
		radial-gradient(circle at 82% 34%, rgba(111, 190, 225, .85) 0 3px, transparent 4px);
	filter: drop-shadow(0 0 10px rgba(255, 226, 103, .56));
}

body.recruit-test .p-test-qa .test-qa-treasure-chest {
	clip-path: inset(42% 0 0 0);
	transform: translateX(-50%) translateY(0) rotate(-1deg);
	transform-origin: 50% 88%;
	animation: testQaTreasureChestClosed 4.6s ease-in-out infinite;
}

body.recruit-test .p-test-qa .test-qa-treasure-lid {
	z-index: 4;
	bottom: clamp(38px, 3.4vw, 54px);
	opacity: 1;
	transform: translateX(-50%) translateY(26px) rotateX(68deg) scaleY(.42);
	transform-origin: 50% 96%;
	transition:
		transform .5s cubic-bezier(.18, 1.2, .38, 1),
		filter .25s ease;
}

body.recruit-test .p-test-qa .test-qa-treasure-lid img {
	clip-path: inset(0 0 49% 0);
}

body.recruit-test .p-test-qa .test-qa-treasure-plaque {
	z-index: 2;
	opacity: 0;
	transform: translateX(-50%) translateY(66px) scale(.58);
	transform-origin: 50% 100%;
	animation: none;
}

body.recruit-test .p-test-qa .test-qa-treasure-label {
	z-index: 5;
	opacity: 0;
	transform: translateX(-50%) translateY(48px) scale(.8);
	animation: none;
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-lid {
	animation: testQaTreasureLidOpen 3.2s cubic-bezier(.18, 1.04, .34, 1) .45s both;
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-plaque {
	animation: testQaTreasurePlaqueRise 3.2s cubic-bezier(.18, 1.04, .34, 1) .45s both;
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-label {
	animation: testQaTreasureLabelRise 3.2s cubic-bezier(.18, 1.04, .34, 1) .45s both;
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::before {
	animation: testQaTreasureGemsBurst 3.2s ease-out .45s both;
}

body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::after {
	animation: testQaTreasureSparkBurst 3.2s ease-out .62s both;
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-lid {
	opacity: 1;
	filter: drop-shadow(0 12px 18px rgba(36, 72, 120, .18));
	transform: translateX(-50%) translateY(-18px) rotateX(0deg) rotate(-3deg) scaleY(.86);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-plaque {
	opacity: 1;
	filter: drop-shadow(0 18px 26px rgba(36, 72, 120, .24));
	transform: translateX(-50%) translateY(-18px) scale(1.03);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-chest {
	animation-play-state: paused;
	transform: translateX(-50%) translateY(3px) rotate(1deg);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible) .test-qa-treasure-label {
	opacity: 1;
	box-shadow:
		0 0 0 2px rgba(255, 253, 247, .9),
		0 14px 24px rgba(36, 72, 120, .22);
	transform: translateX(-50%) translateY(-6px) scale(1.04);
}

body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible)::before,
body.recruit-test .p-test-qa .test-qa-treasure-entry:is(:hover, :focus-visible)::after {
	opacity: 1;
	transform: translateX(-50%) translateY(-26px) scale(1);
}

@keyframes testQaTreasureChestClosed {
	0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1deg); }
	50% { transform: translateX(-50%) translateY(-2px) rotate(.6deg); }
}

@keyframes testQaTreasureLidOpen {
	0%, 22% {
		transform: translateX(-50%) translateY(26px) rotateX(68deg) scaleY(.42);
	}
	42% {
		transform: translateX(-50%) translateY(-25px) rotateX(0deg) rotate(-6deg) scaleY(.9);
	}
	58% {
		transform: translateX(-50%) translateY(-14px) rotateX(0deg) rotate(-2deg) scaleY(.86);
	}
	100% {
		transform: translateX(-50%) translateY(-18px) rotateX(0deg) rotate(-3deg) scaleY(.86);
	}
}

@keyframes testQaTreasurePlaqueRise {
	0%, 30% {
		opacity: 0;
		transform: translateX(-50%) translateY(66px) scale(.58);
	}
	54% {
		opacity: 1;
		transform: translateX(-50%) translateY(-26px) scale(1.06);
	}
	68%, 100% {
		opacity: 1;
		transform: translateX(-50%) translateY(-18px) scale(1.03);
	}
}

@keyframes testQaTreasureLabelRise {
	0%, 42% {
		opacity: 0;
		transform: translateX(-50%) translateY(48px) scale(.8);
	}
	62% {
		opacity: 1;
		transform: translateX(-50%) translateY(-12px) scale(1.08);
	}
	76%, 100% {
		opacity: 1;
		transform: translateX(-50%) translateY(-6px) scale(1.04);
	}
}

@keyframes testQaTreasureGemsBurst {
	0%, 32% {
		opacity: 0;
		transform: translateX(-50%) translateY(34px) scale(.76);
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) translateY(-34px) scale(1.05);
	}
	100% {
		opacity: .82;
		transform: translateX(-50%) translateY(-18px) scale(.98);
	}
}

@keyframes testQaTreasureSparkBurst {
	0%, 38% {
		opacity: 0;
		transform: translateX(-50%) translateY(26px) scale(.72);
	}
	58% {
		opacity: 1;
		transform: translateX(-50%) translateY(-48px) scale(1.05);
	}
	100% {
		opacity: .74;
		transform: translateX(-50%) translateY(-28px) scale(.98);
	}
}

@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-treasure-entry::before,
	body.recruit-test .p-test-qa .test-qa-treasure-entry::after {
		bottom: 86px;
		width: 176px;
		height: 96px;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-lid {
		bottom: 39px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-lid,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-plaque,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-label,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::before,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::after {
		animation: none;
	}

	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-lid {
		transform: translateX(-50%) translateY(-18px) rotateX(0deg) rotate(-3deg) scaleY(.86);
	}

	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-plaque,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-label {
		opacity: 1;
	}
}


/* ============================================================
   47. 数字で見る「オールブルー」：単独ページと本音レイヤー
   ------------------------------------------------------------
   /recruit-test/numbers-test/（船長室の Numbers ピンから直行）。
   main は .recruit.sub.company.company-numbers.test-tone。

   **.sub と .company を残しているのが要点。**
   MV帯は 19-2 のキービジュアルが、カードとドーナツは style.css の
   `main#contents.recruit.company .con-box02 .box02 …` がそのまま当たる。
   ここで書くのは「このページにしか無いもの」だけ:
     47-1 MV帯の文字組み（他の下層ページには無いリード文がある）
     47-2 右上の「本音を見る」
     47-3 画面を暗くする層
     47-4 カードの上の手書き吹き出し
     47-5 船長室へ戻る
     47-6 スマホ幅

   ■ 重なりの決め方（ここを崩すと本音が暗幕の下に潜る）
   暗幕 .test-honne-scrim は position:fixed の1枚で、吹き出しは
   カード（.list-item）の中に absolute で置いてある。
   **どちらも main の中にある**のが肝で、main 自身が重なりの箱
   （position + z-index:1）なので、その中では z-index の数字だけで
   前後が決まる。あいだの要素は箱を作っていない（実測で確認済み）。
     暗幕 900 → 吹き出し 910 → 右上のボタン 920
   ヘッダーだけは main の外（fixed / z-index 20）にいて暗幕が届かない。
   main の z-index を上げると本文がヘッダーの上を流れてしまうので、
   ヘッダーは body 側のクラスで別に暗くしている（47-3の末尾）。
   ============================================================ */

/* ── 47-1. MV帯の文字組み ───────────────────────────────
   MVの絵と地は 19-2（下層2ページと共通）のまま。
   このページだけリード文があるので、その行間と余白をここで持つ。 */
/* 既定の .sub .con-mv は padding-top:120px で、固定ヘッダーの下端(124px)と
   ぶつかってパンくずが潜っていた（実測 gap:-4px）。このページはMVに
   リード文まで入るので、上だけ広げて逃がす。SP側は既定のまま。 */
@media screen and (min-width: 769px) {
	body.recruit-test main#contents.recruit.company-numbers .test-numbers-mv {
		padding-top: 152px;
	}
}

body.recruit-test main#contents.recruit.company-numbers .test-numbers-mv .page-title {
	margin-top: 4px;
}

body.recruit-test main#contents.recruit.company-numbers .test-numbers-mv__sub {
	margin-top: 10px;
	color: var(--wc-navy);
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 700;
	letter-spacing: .04em;
	text-shadow: 0 2px 12px rgba(252, 249, 242, .95), 0 0 26px rgba(252, 249, 242, .85);
}

/* 絵の上に置く本文。19-2 の ::after（紙の霞）だけでは絵柄によって
   地がばらつくので、page-title と同じ白い光を回して読みを揃える。 */
body.recruit-test main#contents.recruit.company-numbers .test-numbers-mv__lead {
	margin-top: 20px;
	max-width: 40em;
	color: var(--wc-navy);
	font-size: clamp(13px, 1.15vw, 15px);
	font-weight: 500;
	line-height: 2;
	text-shadow:
		0 1px 0 rgba(252, 249, 242, .95),
		0 0 10px rgba(252, 249, 242, .95),
		0 0 22px rgba(252, 249, 242, .8);
}

/* 見出しを1枚外しているので（php の show_heading=false）、
   セクション上の余白と .list の上余白を詰めてカードから始める。 */
body.recruit-test main#contents.recruit.company-numbers .con-box02 {
	padding-top: clamp(28px, 3.5vw, 52px);
}

body.recruit-test main#contents.recruit.company-numbers .con-box02 .box02 .list {
	margin-top: 0;
}

/* ── 47-2. 右上の「本音を見る」 ─────────────────────────
   ヘッダー（高さ約110px / z-index 20）の下に置く。
   開いているあいだも押せるように暗幕より前（920）。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle {
	position: fixed;
	z-index: 920;
	top: clamp(84px, 9vw, 124px);
	right: clamp(14px, calc((100% - 1100px) / 2), 72px);

	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 20px;
	min-height: 46px;
	border: 2px solid var(--wc-navy);
	border-radius: 999px;
	background: rgba(255, 253, 247, .96);
	box-shadow: 0 10px 24px rgba(27, 58, 92, .2);
	color: var(--wc-navy);
	font-family: inherit;
	font-size: clamp(13px, 1.15vw, 15px);
	font-weight: 800;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle:hover,
body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle:focus-visible {
	transform: translateY(-2px);
	background: #fffdf7;
	box-shadow: 0 14px 28px rgba(27, 58, 92, .26);
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle:focus-visible {
	outline: 3px solid rgba(230, 0, 18, .42);
	outline-offset: 3px;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-toggle {
	background: var(--wc-navy);
	color: #fffdf7;
}

/* 仮の文面であることの断り。開いているあいだだけボタンの下に出す。
   本物の本音に差し替えたら、このブロックと php の1行を消す。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-caption {
	position: fixed;
	z-index: 920;
	top: calc(clamp(84px, 9vw, 124px) + 54px);
	right: clamp(14px, calc((100% - 1100px) / 2), 72px);
	margin: 0;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(27, 58, 92, .86);
	color: #fffdf7;
	font-size: 11px;
	letter-spacing: .02em;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-caption {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ── 47-3. 画面を暗くする層 ─────────────────────────────
   52%。最初は 42% にしていたが、紙の吹き出しをやめて蛍光ペンの字に
   したときに、地が明るすぎて蛍光色が沈んだ（実測: 地のままで 1.0〜2.4:1）。
   グラフと数字は読めたまま、ネオンが光る濃さがこのあたり。
   **ここを薄くするなら 47-4 の濃紺のにじみを足すこと。** */
body.recruit-test main#contents.recruit.company-numbers .test-honne-scrim {
	position: fixed;
	z-index: 900;
	inset: 0;
	background: rgba(10, 30, 52, .52);
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
	transition: opacity .35s ease, visibility 0s linear .35s;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-scrim {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ヘッダーは main の外にあり、main が自前の重なりの箱（position + z-index:1）を
   持っているので、main の中の暗幕ではどうやっても届かない。ヘッダーだけ別に暗くする。
   is-honne-ready は JS が起動時に付ける＝このページにしか付かない。 */
body.recruit-test.is-honne-ready #globalHeader::after {
	content: "";
	position: absolute;
	z-index: 5; /* ヘッダーの中だけの順位。中身（ロゴ・ボタン）はどれも auto */
	inset: 0;
	background: rgba(10, 30, 52, .52); /* 47-3 の暗幕と同じ濃さ */
	pointer-events: none; /* 暗くするだけ。ヘッダーのボタンは押せたまま */
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility 0s linear .35s;
}

body.recruit-test.is-honne-open #globalHeader::after {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* ── 47-4. カードの上への手書き（蛍光ペン） ─────────────
   紙の吹き出しは置かない。**グラフの上に直接ペンで書いた**形にしている。

   ■ 蛍光色を紙の上で読ませるための下ごしらえ
   吹き出しの白地が無くなったぶん、地は「暗幕ごしのカード」＝およそ
   rgb(152,159,165) の中間色になる。ここに蛍光色をベタで置くと
   蛍光ピンクで 1.3:1、蛍光イエローでも 2.3:1 しか出ず読めない。
   そこで **文字のすぐ外に濃紺のにじみを何段か重ねて地を暗く沈め**、
   その上でネオンを光らせている（下の text-shadow の並び）。
   実測はCSS末尾のコメント参照。色は明るい蛍光に寄せてあり、
   蛍光ピンクも #ff5fd2 まで明度を上げて 4.5:1 を超えさせている。
   **暗いネオン（原色マゼンタ等）に変えると一気に読めなくなる。** */
/* ノート自体は出る／出ないだけを持つ。動きは1文字ずつ（下）が持つので、
   ここでフェードさせると二重に薄くなる。

   ★ 位置は指定しない。カードの中に**流し込む**（カードが下に伸びる）。
   ------------------------------------------------------------
   最初はカードごとに top/left を % で置いて絵の上に重ねていたが、
   **カードの中身を作り替えるたびに全部ずれる**（2026-09-10 に実測して
   合わせたものが、09-11 の style.css 更新で item01 が 833→761px に
   なった時点で崩れ、90% や見出しの上に被った）。
   数字カードはまだ手が入る場所なので、中身の配置に依存する指定は置かない。
   下に流せば、カードをどう作り替えても字が数字を隠すことはない。
   「絵の上に書いた」感じは、傾き・1文字ずつのばらつき・下線で出す。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-note {
	position: relative; /* static だと z-index が効かず暗幕の下に潜る */
	z-index: 910;
	display: none;
	width: auto;
	margin-top: 14px;
	transform: rotate(var(--honne-rot, -1.4deg));
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-note {
	display: block;
}

/* カードの中で2枚続くとき（item01）に下線とぶつからない間隔 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-note + .test-honne-note {
	margin-top: 20px;
}

/* 読み上げ用の素のテキスト。画面には出さない（ばらした字の方は aria-hidden） */
body.recruit-test main#contents.recruit.company-numbers .test-honne-note__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── 1文字ずつ ──────────────────────────────────────────
   --rot 傾き / --dy 上下 / --sc 大きさ / --ink-a 濃さ は JS が
   文字の位置から決めて配っている（読み込むたびには変わらない）。
   出るときは **左から1文字ずつ**。ペンが進むように見せるため、
   遅延は文字の順番 --i に比例させている。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(7px) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
	transition: opacity .2s ease, transform .2s ease;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-char {
	opacity: var(--ink-a, 1);
	transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
	transition-delay: calc(var(--i, 0) * 22ms + var(--honne-i, 0) * 60ms);
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-note__body {
	position: relative;
	display: block;
	padding: 0;
	border: 0;
	background: none;
	color: var(--honne-ink, #f2ff3d);
	font-family: "Yusei Magic", "Yomogi", "Klee One", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	font-size: clamp(14px, 1.35vw, 17px);
	font-weight: 400;
	line-height: 1.78;
	letter-spacing: .015em;
	text-align: left;
	/* 並びに意味がある。text-shadow は**先に書いたものが上**に乗る。
	     ① 濃紺を字に密着させて3段 … 字の輪郭を締める（読みの主役）
	     ② ネオンのにじみ         … ①の外側で光る＝蛍光ペンの発色
	     ③ 濃紺を広く4段          … 地を沈めて、その光を成立させる
	   ②だけにすると紙の上で消える。①を外すと輪郭がぼける。 */
	text-shadow:
		0 0 1px rgba(4, 16, 30, 1),
		0 0 2px rgba(4, 16, 30, 1),
		0 0 3px rgba(4, 16, 30, .97),
		0 0 9px currentColor,
		0 0 6px rgba(4, 16, 30, .92),
		0 0 12px rgba(4, 16, 30, .85),
		0 0 20px rgba(4, 16, 30, .7),
		0 0 32px rgba(4, 16, 30, .5);
}

/* ペンで最後に引く線。**字を書き終えてから**左から右へ引く。
   遅延の --honne-n（文字数）は JS が渡している。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-note__body::after {
	content: "";
	position: absolute;
	left: 1px;
	right: 10%;
	bottom: -5px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	opacity: .8;
	transform: scaleX(0) rotate(-.7deg);
	transform-origin: 0 50%;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
	box-shadow:
		0 0 6px currentColor,
		0 0 3px rgba(4, 16, 30, .9),
		0 0 9px rgba(4, 16, 30, .8);
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-note__body::after {
	transform: scaleX(1) rotate(-.7deg);
	transition-delay: calc(var(--honne-n, 20) * 22ms + var(--honne-i, 0) * 60ms);
}

/* カードごとのインクの色と傾き。**位置は持たない**（上の注記のとおり）。 */
body.recruit-test main#contents.recruit.company-numbers .list-item.item01 .test-honne-note.is-n1 { --honne-ink: #f2ff3d; --honne-rot: -1.5deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item01 .test-honne-note.is-n2 { --honne-ink: #7cff5c; --honne-rot: 1.2deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item02 .test-honne-note { --honne-ink: #ff5fd2; --honne-rot: 1.1deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item03 .test-honne-note { --honne-ink: #57f5ff; --honne-rot: -1.3deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item04 .test-honne-note { --honne-ink: #f2ff3d; --honne-rot: 1.4deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item05 .test-honne-note { --honne-ink: #ffa53d; --honne-rot: -1.2deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item06 .test-honne-note { --honne-ink: #7cff5c; --honne-rot: 1.3deg; }
body.recruit-test main#contents.recruit.company-numbers .list-item.item07 .test-honne-note { --honne-ink: #ff5fd2; --honne-rot: -1.1deg; }

/* ── 47-5. 船長室へ戻る ─────────────────────────────── */
body.recruit-test main#contents.recruit.company-numbers .test-numbers-back {
	margin-top: clamp(32px, 4vw, 56px);
	text-align: center;
}

body.recruit-test main#contents.recruit.company-numbers .test-numbers-back__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	min-height: 46px;
	border: 2px solid var(--wc-navy);
	border-radius: 999px;
	background: rgba(255, 253, 247, .92);
	color: var(--wc-navy);
	font-size: clamp(13px, 1.15vw, 15px);
	font-weight: 800;
	letter-spacing: .04em;
	text-decoration: none;
	transition: transform .2s ease, background-color .2s ease;
}

body.recruit-test main#contents.recruit.company-numbers .test-numbers-back__link:hover,
body.recruit-test main#contents.recruit.company-numbers .test-numbers-back__link:focus-visible {
	transform: translateY(-2px);
	background: #fffdf7;
}

body.recruit-test main#contents.recruit.company-numbers .test-numbers-back__arrow {
	display: block;
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--wc-navy);
	border-bottom: 2px solid var(--wc-navy);
	transform: rotate(45deg);
}

/* ── 47-6. スマホ幅 ─────────────────────────────────────
   書き込みの置き方はPCと同じ（カードの中に流し込む）ので、
   ここで直すのは固定ボタンとMVの余白だけ。 */
@media screen and (max-width: 768.999px) {
	/* 固定の「本音を見る」がパンくずに被っていたので、MVの上を空ける */
	body.recruit-test main#contents.recruit.company-numbers .test-numbers-mv {
		padding-top: 176px;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle {
		top: clamp(70px, 17vw, 96px);
		right: 12px;
		padding: 10px 16px 10px 13px;
		min-height: 42px;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-caption {
		top: calc(clamp(70px, 17vw, 96px) + 48px);
		right: 12px;
		max-width: calc(100% - 24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.company-numbers .test-honne-note,
	body.recruit-test main#contents.recruit.company-numbers .test-honne-scrim,
	body.recruit-test.is-honne-ready #globalHeader::after {
		transition-duration: .01s;
	}

	body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-note,
	body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-char,
	body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-note__body::after {
		transition-delay: 0s;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-char {
		transition-duration: .01s;
	}
}

/* 入社後の流れ：航路 ↔ 宴 の切替ボタン。節の右上に浮かせる。
   航路版は position:relative なのでそのまま乗る。宴版にも同じ指定を足してある。
   色は応募系と同じコーポレートカラー（白文字が読める濃さで止めてある）。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-banquet {
	position: relative;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch {
	position: absolute;
	z-index: 5;
	top: clamp(16px, 2.2vw, 30px);
	right: clamp(16px, 3vw, 44px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background-color: #005ba7;
	background-image: linear-gradient(120deg, #004e91 0%, #0063ac 58%, #00a3dd 100%);
	box-shadow: 0 6px 18px rgba(0, 91, 167, .3);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
	transition: filter .2s ease, transform .2s ease;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch::after { content: "\21C4"; font-size: 15px; }
body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch:hover { filter: brightness(1.08); }
body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch:active { transform: scale(.97); }

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch:focus-visible {
	outline: 3px solid rgba(224, 89, 107, .75);
	outline-offset: 3px;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch {
		top: 12px;
		right: 12px;
		padding: 0 14px;
		font-size: 12px;
	}
}

/* ============================================================
   49. 会社を知る：サイドのINDEXの「数字で見るオールブルー」ボタン
   ------------------------------------------------------------
   `/recruit-test/company-test/` のサイドのINDEXから Numbers 単独ページ
   （/recruit-test/numbers-test/）へ送る。2026-09-16 までは同じ内容を
   ページ内 #anc03 にも置いていたが外し、この導線1本にした。
   通常のアンカーではなく別ページ遷移なので見た目もボタン化。
   ============================================================ */
body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test {
	margin-top: 20px;
	padding-left: 0;
	/* 他の項目は左に 45px 詰めて文字を並べているが、これはボタンなので
	   INDEX の箱（220px・左右パディング無し）の真ん中に置く（2026-09-16） */
	text-align: center;
}

body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test::before {
	content: none;
}

body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 15px;
	border: 2px solid rgba(27, 58, 92, .72);
	border-radius: 999px;
	background: rgba(255, 253, 247, .92);
	box-shadow: 0 10px 22px rgba(27, 58, 92, .16);
	color: var(--wc-navy);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
}

body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test a::after {
	content: "";
	/* 19-3 の「押せる範囲を広げる ::after」（position:absolute; inset:-10px -8px）が
	   ここにも当たり、矢印がボタンの左上へ飛び出していた（2026-09-16 実測）。
	   このボタンは丸ごと当たり判定なので、流れの中に戻して文字の右に置く。 */
	position: static;
	inset: auto;
	width: 7px;
	height: 7px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test a:hover,
body.recruit-test main#contents.recruit.company .side-menu .test-company-side-number-test a:focus-visible {
	opacity: 1;
	background: #fffdf7;
	transform: translateY(-2px);
}

/* 招待コピーと切替ボタンを前に出す（2026-09-14）。
   ------------------------------------------------------------
   どちらも「グラデーションに負けて埋もれている」という指摘。原因は2つで、どちらも
   **航路の節（.workstyle-onboarding-route）が後ろに描いているもの**に負けていた。

     ・招待コピー … 節の `box-shadow: 0 -34px 44px 28px` が上へ約60px伸びており、
                    すぐ上にあるコピーの上に淡い色が乗っていた
     ・切替ボタン … 節の ::after（上下を溶かす縦グラデ、position:absolute / z-index:0）は
                    **位置指定のない中身より手前に描かれる**。ボタンは position 指定が
                    無かったので、その下に潜っていた

   どちらも `position: relative` ＋ z-index を与えて、グラデより前に出すだけで直る。
   節そのものは z-index:1 なので、中身は 2 を与えておけば確実に上に来る。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-flow-invite-copy {
	position: relative;
	z-index: 2;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch-row {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	width: min(1120px, 100%);
	margin: 0 auto clamp(14px, 1.8vw, 24px);
	padding-inline: clamp(18px, 5vw, 72px);
	box-sizing: border-box;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-flow-switch {
	position: relative;
	z-index: 2;
}

/* ============================================================
   会社を知る：メインデッキの格子からインフィーが顔を出す
   ============================================================ */
body.recruit-test main#contents.recruit.company .test-company-infi-hatch {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	transform: scaleX(-1);
	transform-origin: center center;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__trigger {
	fill: transparent;
	cursor: help;
	pointer-events: all;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__hole {
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 8px 8px rgba(20, 12, 8, .36));
	transition: opacity 80ms ease;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__peek {
	opacity: 0;
	pointer-events: none;
	transform: translateY(205px) scale(.88);
	transform-origin: center bottom;
	transform-box: fill-box;
	transition:
		opacity 100ms ease 190ms,
		transform 480ms cubic-bezier(.2, 1.28, .36, 1) 170ms;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__lid {
	pointer-events: none;
	transform: translate(0, 0) scaleY(1);
	transform-box: fill-box;
	transform-origin: 50% 6%;
	filter: drop-shadow(0 0 0 rgba(20, 12, 8, 0));
	transition:
		transform 420ms cubic-bezier(.2, .78, .28, 1),
		filter 220ms ease;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__trigger:hover ~ .test-company-infi-hatch__hole {
	opacity: 1;
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__trigger:hover ~ .test-company-infi-hatch__mask .test-company-infi-hatch__peek {
	opacity: 1;
	transform: translateY(0) scale(1);
}

body.recruit-test main#contents.recruit.company .test-company-infi-hatch__trigger:hover ~ .test-company-infi-hatch__lid {
	filter: drop-shadow(-8px 18px 10px rgba(20, 12, 8, .28));
	transform: translate(-20px, -104px) scaleY(.34) rotate(-2deg);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .test-company-infi-hatch {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.recruit-test main#contents.recruit.company .test-company-infi-hatch__peek {
		transition-duration: 1ms;
		transition-delay: 0ms;
	}

	body.recruit-test main#contents.recruit.company .test-company-infi-hatch__lid,
	body.recruit-test main#contents.recruit.company .test-company-infi-hatch__hole {
		transition-duration: 1ms;
	}
}

/* ============================================================
   2026-09-14 Numbers: 社員台帳・勤怠実績への更新
   ============================================================ */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-member-total small {
	display: block !important;
	margin-top: 8px;
	color: var(--ch-scallo);
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1.6;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-career-donut.is-members {
	grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-career-donut.is-members .company-career-donut__ring {
	grid-row: 1 / span 2 !important;
	background: conic-gradient(
		var(--career-blue-1) 0 85.714%,
		var(--career-blue-2) 85.714% 100%
	) !important;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor {
	margin: 0 auto;
	line-height: 0;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor img {
	display: block;
	width: min(100%, 360px) !important;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
	mix-blend-mode: multiply;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .item03 .company-number-watercolor img {
	width: min(100%, 270px) !important;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-hybrid-ratio {
	margin-top: 16px;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-number-source {
	margin: 10px 0 0;
	color: var(--ch-scallo);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	text-align: center;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut.is-age .company-number-donut__ring {
	background: conic-gradient(
		var(--chart-blue-1) 0 70%,
		var(--chart-blue-2) 70% 100%
	) !important;
}

body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut.is-division .company-number-donut__ring {
	background: conic-gradient(
		var(--chart-blue-1) 0 29.167%,
		var(--chart-blue-2) 29.167% 54.167%,
		var(--chart-blue-3) 54.167% 75%,
		var(--chart-blue-4) 75% 83.333%,
		var(--chart-blue-5) 83.333% 100%
	) !important;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-career-donut.is-members {
		grid-template-columns: 1fr;
	}

	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-career-donut.is-members .company-career-donut__ring {
		grid-row: auto !important;
	}

	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor img {
		width: min(100%, 420px) !important;
	}

	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .item03 .company-number-watercolor img {
		width: min(82%, 320px) !important;
	}
}

/* ============================================================
   50. ビジョン英字のピンク帯を外す
   ------------------------------------------------------------
   「Only Digital Adventure」の背景ラインが強く見えすぎるため、
   テキストだけを残して帯状の背景・影・装飾線を無効化する。
   ============================================================ */
body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en {
	padding: 0 !important;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-box-decoration-break: initial;
	box-decoration-break: initial;
}

body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en::before,
body.recruit-test main#contents.recruit.index .con-box01 .box01 p .test-vision-en::after {
	content: none !important;
	display: none !important;
}

/* Numbersの本音専用画像は通常モードでは読み込み後も描画しない。
   本音側CSSが同じ優先度で濃紺版だけを表示する。 */
body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor img.company-number-watercolor__honne {
	display: none !important;
}

/* ============================================================
   51. 制度島MVをサイト最上端まで表示
   ------------------------------------------------------------
   以前は hero 自体を固定ヘッダー124pxぶん下げ、その残りの高さへ
   cover していたため、島画像の上71pxが overflow で切れていた。
   hero と絵を画面上端から始め、ヘッダーだけを透明で重ねる。
   コピーと夜明けボタンはヘッダー下へ逃がす。
   ============================================================ */
body.recruit-test:has(main#contents.recruit.workstyle) #globalHeader:not(.scrolled) {
	background: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero {
	--site-header-h: 124px;
	--hdr: 0px;
	--map-h: 100svh;
	margin-top: 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage {
	top: 0;
	translate: -50% 0;
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy {
	top: calc(var(--site-header-h) + clamp(26px, 4vw, 54px));
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy::before {
	/* copy自身の上余白も戻し、左の白面をheroの上端まで届かせる。 */
	top: calc(-1 * var(--site-header-h) - clamp(26px, 4vw, 54px));
}

body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle {
	top: calc(var(--site-header-h) + clamp(18px, 3vw, 34px));
}

/* ピンの座標系を持つ3層は静止させる。動かすのは海の疑似要素・雲・鳥だけ。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-island-stage,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-map-art,
body.recruit-test main#contents.recruit.workstyle .workstyle-island-layer {
	animation: none !important;
	transform: none !important;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero {
		--site-header-h: 74px;
		--hdr: 0px;
		--map-h: 100svh;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-copy {
		top: calc(var(--site-header-h) + clamp(18px, 6vw, 34px));
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-island-dawn-toggle {
		top: calc(var(--site-header-h) + 12px);
	}
}

/* ============================================================
   50. スマホ対応：横はみ出しの封じ込めとSPの操作性（2026-09-17）
   ------------------------------------------------------------
   実機相当（390x844・iPhone UA）で本番5ページをフルページ検分した
   結果の修正。検分の記録は 運用/作業ログ-リクルート改造.md の同日分。

   50-1 横はみ出しの封じ込め（全ページ）
   50-2 宝箱CTA：SPは開閉の劇場をやめる
   50-3 会社を知る：覗き込みクルーの逃げ場
   50-4 働き方を知る：島マップ下のスポットチップ（C案）
   50-5 船長室・メインデッキ：ピンのラベルをSPで常時表示
   50-6 働き方を知る：ヒーロー説明文に紙の下敷き
   50-7 トップ見出しの孤立改行「る。」を防ぐ
   50-8 数字ページ：添え字と凡例の読みやすさ
   ============================================================ */

/* ── 50-1. 横はみ出しの封じ込め ─────────────────────────
   トップは What's All Blue? の島地図（幅640px・中央合わせ）が本文の
   外へはみ出し、body が 515px に広がっていた。ページが横にパンできる
   だけでなく、**ヘッダーの幅も body に追従して伸びるため、右端基準の
   ハンバーガーボタンが x=453〜494 ＝画面外へ出て、SPでメニューが
   開けなかった**。main で clip すると body は 390px に戻り、ボタンも
   画面内（x=328〜369）へ戻る（本番へのCSSライブ注入で実証済み）。
   節37で workstyle だけ同じ手当てをしていたのを、全ページに広げた形。
   数字ページの微小なはみ出し（393px）もこれで消える。
   fixed の要素（追従応募ボタン・サイドINDEX・本音の暗幕・入り江の
   バナー）は main の clip に巻き込まれないので影響なし。 */
body.recruit-test main#contents.recruit {
	overflow-x: clip;
}

/* ── 50-2. 宝箱CTA：SPは開閉の劇場をやめる ─────────────
   スクロール発火（.is-shown）の「蓋が開いて背板と札がせり上がる」
   演出の最終状態が、SPでは静止画のまま残る。蓋が宙に浮いて別の
   宝箱のように見え、背板 plaque の白っぽい矩形が地の上に露出していた。
   hover の無いSPでは、閉じた宝箱＋ラベルだけの構成に戻す。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test .p-test-qa .test-qa-treasure-plaque {
		display: none;
	}

	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-lid {
		animation: none;
	}

	body.recruit-test .p-test-qa .test-qa-treasure-label,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-label {
		animation: none;
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}

	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::before,
	body.recruit-test .p-test-qa .test-qa-outro.is-shown .test-qa-treasure-entry::after {
		animation: none;
	}
}

/* ── 50-3. 会社を知る：覗き込みクルーの逃げ場 ───────────
   フッター上縁のクルー（.p-test-footer-crew）は translateY(-100%) で
   直前のセクションへ張り出す作り。フッターは Contact カードから
   始まるので、会社を知るでは main 最後の Information 3枚目のカードに
   クルーが覆い被さり、本文もリンクも塞いでいた（SPは中央寄せ・
   幅330pxで張り出しが約150px）。カード側に張り出しぶんの余白を
   空けて、クルーは余白を覗き込む形にする。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company .c-relatedlinks-box {
		padding-bottom: 170px;
	}
}

/* ── 50-4. 働き方を知る：島マップ下のスポットチップ（C案）──
   島マップのステージは幅1558pxのまま overflow:clip で、SPでは中央の
   390pxしか見えない。ドラッグも横スクロールも無いので、9スポット中
   6つ（旗の丘・評価の灯台・eラーニング温室・資格の展望台・
   たからばこ図書館・ラジオ港）のピンが**永久に押せなかった**。
   マップ直下にスポット名のチップを並べ、ピンと同じ解説パネルを
   開かせる（挙動は workstyle-island.js の末尾）。PCはピンで足りる
   ので出さない。 */
body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips {
	display: none;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips {
		display: block;
		position: relative;
		z-index: 5;
		padding: 18px 20px 24px;
		background: var(--wc-paper);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips__lead {
		margin: 0 0 10px;
		color: var(--wc-navy);
		font-size: 13px;
		font-weight: 800;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips__list {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips__chip {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		padding: 8px 14px;
		border: 2px solid rgba(36, 72, 120, .24);
		border-radius: 999px;
		background: rgba(255, 253, 247, .96);
		color: var(--wc-navy);
		font-family: inherit;
		font-size: 13px;
		font-weight: 800;
		line-height: 1.2;
		box-shadow: 0 2px 8px rgba(36, 72, 120, .08);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-spot-chips__chip .chip-pin {
		width: 10px;
		height: 10px;
		flex: 0 0 10px;
		border: 1.5px solid #fffdf7;
		border-radius: 50% 50% 50% 0;
		background: var(--wc-pin-red);
		box-shadow: 0 0 0 1.5px rgba(230, 0, 18, .25);
		transform: rotate(-45deg);
	}
}

/* ── 50-5. 船長室・メインデッキ：ピンのラベルをSPで常時表示 ──
   ラベル（経営理念／Numbers／メインデッキへ戻る／船長室へ／
   エントリー）は opacity:0 で hover/focus 時だけ出す作りだった。
   hover の無いSPでは一度も現れず、無地のピンだけが置かれて
   「何のボタンか分からない」状態だったので、SPは常時出す。
   ラベルは pointer-events:none なのでタップはピン本体が受ける。 */
@media screen and (max-width: 768.999px) {
	/* visibility まで書くのは、8089行あたりの書き直し節がラベルを
	   opacity:0 ＋ visibility:hidden の2段構えで隠しているため。
	   opacity だけ返しても visibility が hidden のままで出てこない
	   （hidden はレイアウトを保つので座標の検証もすり抜けた）。 */
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin .test-company-pin-label,
	body.recruit-test main#contents.recruit.company .test-company-mv-pin .test-company-pin-label {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
	}

	/* 左向きに出すラベル（右端寄りのピン）は、その向きのまま出す */
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-globe .test-company-pin-label,
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin.is-numbers .test-company-pin-label,
	body.recruit-test main#contents.recruit.company .test-company-mv-pin.is-captain .test-company-pin-label {
		transform: translate(0, -50%);
	}

	/* SPで40pxに絞られていたタップ領域を44pxへ戻す */
	body.recruit-test main#contents.recruit.company .test-company-cabin-pin {
		width: 44px;
		height: 44px;
	}

	/* Captain's Cabin の題字が固定ヘッダーの真下に潜り、さらに絵のシーン
	   （z-index:11）がコンテナ（z-index:10）より上で塗られて読めなかった。
	   ヘッダー（約74px）の下から始め、重なりも絵の上・パネル（14）の下へ。 */
	body.recruit-test main#contents.recruit.company .test-company-cabin-title {
		margin-top: 80px;
		z-index: 12;
	}

	body.recruit-test main#contents.recruit.company .test-company-cabin-title .page-title {
		color: var(--wc-navy);
		opacity: 1;
		text-shadow: 0 1px 12px rgba(250, 246, 236, .9);
	}
}

/* ── 50-6. 働き方を知る：ヒーロー説明文に紙の下敷き ────────
   「島のスポットをクリックすると…」が滝と木立ちの絵に埋もれて
   読めなかった。ヘッダーのナビと同じ手＝自前の紙の板を敷く。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .workstyle-island-hero-note {
		width: fit-content;
		padding: 8px 12px;
		border-radius: 12px;
		background: rgba(255, 253, 247, .88);
		color: var(--wc-navy);
		text-shadow: none;
		box-shadow: 0 2px 10px rgba(36, 72, 120, .12);
	}
}

/* ── 50-7. トップ見出しの孤立改行「る。」を防ぐ ──────────
   「次の産業を変える。」は9字。SPの実測 font-size 40.56px では
   9字で365pxになり、コンテナ342px（390-左右24px）に入らず
   「る。」だけが3行目に落ちていた。9.2vw なら 390px 幅で35.9px
   ＝323px で収まり、320px幅でも破綻しない。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.index .con-mv.p-test-mv .main-text {
		font-size: min(40px, 9.2vw);
	}
}

/* ── 50-8. 数字ページ：添え字と凡例の読みやすさ ──────────
   ・「現在の在籍メンバー」「月平均 約／時間」の添え字は、style.css の
     vw計算がSPで約8pxまで縮むため実機ではほぼ読めなかった。固定pxへ。
     大きい数字（.value系）は自前の font-size を持つので影響しない。
   ・ドーナツ凡例の色チップ（border-left）は4px幅では藍色の階調が
     見分けられなかったので10pxへ広げる。 */
@media screen and (max-width: 768.999px) {
	/* .list-item.item01 まで書くのは style.css の vw計算ルール
	   （main#contents… .list-item.item01 .text02 ＝クラス8個）に
	   詳細度で勝つため。省くと 5.9px のまま負ける（ローカル実測）。 */
	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-member-total {
		font-size: 13px;
	}

	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item03 .text {
		font-size: 14px;
	}

	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-career-donut__label,
	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut__label,
	body.recruit-test main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut__label {
		border-left-width: 10px;
	}
}

/* ── 50-9. 入社後の航路：SPの間延びを詰める ─────────────
   SPは節の高さが1900px固定で、カードの間が道の絵だけの区間に
   なって間延びしていた。挙動（workstyle-island.js 末尾）は
   SVGパスをステージ実寸に比例マッピングしていて高さの決め打ちが
   無いので、高さを詰めるだけでアビーの歩みもカードの発火も追従する。
   背景の道の絵は cover なので切り出しが変わるだけ。 */
@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.workstyle .con-box02 .box02 .workstyle-onboarding-route {
		--onboarding-section-h: max(1460px, 177.7vw);
		--onboarding-stage-h: calc(var(--onboarding-section-h) - 380px);
	}

	body.recruit-test main#contents.recruit.workstyle .workstyle-onboarding-route__stage {
		min-height: 1080px;
	}
}