@charset "UTF-8";

/* ============================================================
   数字で見る「オールブルー」：ページごと夜の配色にする
   （/recruit-test/numbers-test/ 専用 ／ 48番）
   ------------------------------------------------------------
   ■ なぜ別ファイルか
   本来は recruit-test-watercolor.css の続き（48番）に書くべき内容。
   ただしあのファイルは**エディタ（Cursor）が開いたまま保存を繰り返していて、
   こちらの追記が3回巻き戻された**（2026-09-10 消失 / 09-12 二重化 / 09-12 消失）。
   書くたびに消える場所に積むのをやめ、独立したファイルにした。
   読み込みは inc/assets.php で is_page('numbers-test') のときだけ、
   水彩CSSの後ろに積んでいる（だから後勝ちで上書きできる）。
   水彩CSS側が落ち着いたら 48番として本体へ移してよい。

   ■ 何をしているか
   以前は紙の地に蛍光ペンを乗せるため、本音を開くと暗幕を1枚かぶせていた。
   ファブリカの裏側モードは覆いを使わず**地の色だけ**で成立させているので、
   こちらも覆いをやめ、**本音を開いたときだけ配色そのものを夜側へ振る**。

   ★ 普段（閉じているとき）は通常の水彩の配色のまま。
   このファイルの指定は全部 `.is-honne-open` の中に閉じてある。
   is-honne-open は js が main と body の両方に付ける
   （ヘッダーが main の外にいるので body 側も要る）。
   常時ダークにしたくなったら、各セレクタから .is-honne-open を外すだけ。
   （旧47-3の暗幕CSSは水彩CSS側に残っているが、php から要素を、
     js から is-honne-ready を外したので**もう描かれない**。掃除は本体を
     触れるようになってからでよい。）

   ■ 作り方の順番
   まず水彩CSSの色トークン（--wc-paper / --wc-navy ほか）を夜側の値に
   入れ替え、**それで裏返らなかったものだけ**を名指しで直す。
   トークンで7割が裏返るが、**「紙色を地に、紺を文字に」使っていた所は
   入れ替えると地と文字が同じ明るさになって消える**（本音ボタン・戻る
   ボタン・ヘッダーのRECRUIT SITE・エントリーの帯がこれだった）。
   入れ替えたら必ずブラウザ実測でコントラストを測り直すこと。

   ■ ヘッダーとフッター
   どちらも main の外にあるので main のクラスでは届かない。
   body.numbers-dark.is-honne-open（inc/search.php で付与）を起点にしている。
   フッターは白のままで、main の地を下端だけ紙色へ寄せて溶かしている
   （帯で塗ると23番で直した「ぶつ切り」が復活するため）。
   ============================================================ */

/* ── 1. 色トークンを夜側へ入れ替える ─────────────────────
   ★ 入れ替えは **main の中だけ**に閉じること。
   最初は body に置いたが、ヘッダーまで届いて事故った。ヘッダーには
   「透過（夜の地に重なる）」と「.scrolled（白い帯）」の2状態があり、
   body で --wc-navy を明るい側に倒すと、**白い帯のときに白文字**になって
   RECRUIT SITE・会社を知る・コーポレートTOP が丸ごと消えた。
   main に閉じれば、ヘッダーは他のテストページと同じ配色のまま動く。
   夜の地に重なる状態の手当てだけを 9章でやる。 */
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers {
	--wc-paper:      #0e2033; /* 紙 → 夜の海 */
	--wc-paper-deep: #0a1828;
	--wc-sky:        #16304a;
	--wc-sky-pale:   #1b3a57;
	--wc-navy:       #e6f0f8; /* 文字色。紺 → 紙白に反転 */
	--wc-navy-soft:  #b7cadb;

	--ch-scallo:      #dbe9f6; /* 見出し・図のキャプション */
	--ch-scallo-mid:  #9fb8ce;
	--ch-scallo-pale: #24435f;
	--ch-abi-pale:    #1d3d5a;

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

/* 画面の余白（ゴムバンド表示など）が紙色で出ないように、body の地も夜側へ。
   トークンではなく直値。ここを var(--wc-paper) にすると main の外にも
   夜の値が漏れる（＝上の注意書きの事故に戻る）。

   セレクタが長いのには理由がある。19番の
     body.recruit-test:has(main#contents.recruit.sub)
   が紙色を置いていて、:has() は**中で一番強いものの強さを持つ**ため
   (1,4,2) になる。`body.recruit-test.numbers-dark.is-honne-open` (0,2,1) では届かない。
   同じ形に .numbers-dark を足して並び、後ろに置くことで勝たせている。 */
body.recruit-test.numbers-dark.is-honne-open:has(main#contents.recruit.company-numbers) {
	background-color: #0e2033;
	background-image: none;
}

/* ── 2. 地 ─────────────────────────────────────────────
   下端だけ紙色へ寄せて白いフッターへ溶かす。
   エントリーの帯より下で切り替わるよう、変化は最後の12%に閉じてある。 */
body.numbers-dark.is-honne-open main#contents.recruit.company-numbers {
	background: linear-gradient(180deg,
		#0b1c2e 0%,
		#10263c 46%,
		#0f2437 82%,
		#20415f 92%,
		#f7f3ea 100%);
}

body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .con-box02 {
	background: transparent;
}

/* MV：キービジュアルの絵はそのままで、上に重ねる霞だけ夜側にする */
body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-mv::after {
	background: linear-gradient(180deg,
		rgba(7, 20, 34, .84) 0%,
		rgba(9, 26, 43, .74) 52%,
		rgba(11, 28, 46, .92) 100%);
}

body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-mv .page-title {
	color: #eaf4ff;
	text-shadow:
		0 2px 18px rgba(6, 18, 32, .9),
		0 0 40px rgba(6, 18, 32, .8);
}

body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-mv__sub,
body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-mv__lead {
	color: #dceaf7;
	text-shadow:
		0 1px 0 rgba(6, 18, 32, .9),
		0 0 12px rgba(6, 18, 32, .85),
		0 0 26px rgba(6, 18, 32, .7);
}

/* ── 3. カード ─────────────────────────────────────────── */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item {
	background-color: rgba(226, 241, 252, .07);
	border: 1px solid rgba(226, 241, 252, .17);
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .item-headline {
	color: #eaf4ff;
	border-bottom-color: rgba(108, 180, 228, .55);
}

/* ── 4. グラフ ───────────────────────────────────────────
   ドーナツは style.css が --chart-* 変数で描いているので、変数を
   振り直すだけで色が入れ替わる（形は触らない）。
   暗い地では濃い青から沈むので、明るい側から順に割り当てる。 */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-career-donut,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut {
	--chart-navy:   #e6f0f8;
	--chart-blue-1: #7fd2ff;
	--chart-blue-2: #4aa8e6;
	--chart-blue-3: #3d80c4;
	--chart-blue-4: #2d5f9c;
	--chart-blue-5: #22466f;
}

/* ドーナツの真ん中の穴。カードの地と同じ色でないと輪が切れて見える。
   19番側が item まで書いて紙色を置いているので、同じ深さで書かないと勝てない。 */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item01 .company-career-donut__ring::after,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item04 .company-number-donut__ring::after,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item.item05 .company-number-donut__ring::after {
	background: #17293b;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item figcaption {
	color: #cfe2f3;
}

/* 数字と添え字。style.css は濃紺で置いているので明るい側へ */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .text,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .text02,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .c-text {
	color: #dceaf7;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .value,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .value02,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item .value03 {
	color: #7fd2ff;
}

/* 男女比・平均残業時間のアイコンは濃紺の線画で、夜の地に沈む。
   色を持たない絵なので filter で明るい水色に起こす。 */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .list-item figure.img img {
	filter: brightness(0) saturate(100%) invert(83%) sepia(18%) saturate(900%) hue-rotate(170deg) brightness(102%);
}

/* Image 2.0 の水彩挿絵は、本音表示中だけ濃紺背景版へ差し替える。
   上の汎用 filter を解除し、生成時の水彩色をそのまま見せる。 */
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor {
	display: block;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor img.company-number-watercolor__default {
	display: none !important;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-number-watercolor img.company-number-watercolor__honne {
	display: block !important;
	filter: none !important;
	/* 生成画像の濃紺だけをカード地へ溶かし、明るい水彩部分を残す。 */
	mix-blend-mode: lighten;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-number-source,
body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-member-total small {
	color: #cfe2f3;
}

body.numbers-dark.is-honne-open main#contents.recruit.company .con-box02 .box02 .list .company-career-donut.is-members {
	--career-navy: #e6f0f8;
	--career-blue-1: #7fd2ff;
	--career-blue-2: #3d80c4;
}

/* ── 5. トークンの入れ替えで消えるもの ─────────────────
   「地＝紙色 / 文字＝--wc-navy」で作ってあったボタン類は、
   トークンが入れ替わると地も文字も明るくなって読めなくなる。
   夜側では地を透かし、枠と文字を明るい側に置き直す。 */
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-honne-toggle,
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-back__link {
	background: rgba(226, 241, 252, .1);
	border-color: rgba(226, 241, 252, .55);
	color: #eaf4ff;
}

body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-honne-toggle:hover,
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-honne-toggle:focus-visible,
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-back__link:hover,
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-back__link:focus-visible {
	background: rgba(226, 241, 252, .2);
}

/* 開いているあいだは「押されている」側なので、明るい地に暗い字 */
body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers.is-honne-open .test-honne-toggle {
	background: #e9f4ff;
	border-color: #e9f4ff;
	color: #0e2033;
}

body.recruit-test.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-numbers-back__arrow {
	border-left-color: #eaf4ff;
	border-bottom-color: #eaf4ff;
}

/* エントリーの帯。地は桃色のままで、文字が --ch-scallo ＝ 夜側では
   明るい色に裏返って桃色に溶けていた（実測 1.48:1）。文字だけ暗い側へ戻す。 */
body.numbers-dark.is-honne-open main#contents.recruit.sub .recruit-entry-btn a {
	color: #23384f;
}

body.numbers-dark.is-honne-open main#contents.recruit.sub .recruit-entry-btn a::before {
	background-color: #23384f;
}


/* ── 6-2. 本音モード：参考画像の手書き素材レイヤー ─────────────
   インプットの手書きPNGを、カードをまたいで大きく貼る。
   通常表示では出さず、本音モード時だけ参考画像のようにカード外へはみ出させる。

   ★ 下の --doodle-w / -x / -y / -r は **?honneEdit=1 の配置モードで
     目で決めた値**（2026-09-14 更新）。計算で出したものではないので、
     数字だけ手で直すより、もう一度 /recruit-test/numbers-test/?honneEdit=1 を
     開いて置き直し、パネルの「Copy CSS」で出た値に差し替える方が早い。
     left / top / right の基準位置はレイアウト側の取り決めなので据え置き、
     ずらしは transform（--doodle-x / -y）だけで持たせている。 */
body.recruit-test main#contents.recruit.company-numbers .con-box02 .box02 .list {
	position: relative;
	overflow: visible;
}

/* 素材は画面の端まではみ出して置いてある（それが狙い）が、そのままだと
   ページに横スクロールが出る（実測 scrollWidth 1519 / clientWidth 1432 ＝
   overtime が右へ58px、division が87px）。位置は触らず、**画面の端で切る**。
   overflow:hidden ではなく **clip** なのは、縦を visible のまま残せるため
   （hidden にすると縦がスクロール枠になり、position:sticky や
     ページ内アンカーの挙動まで巻き込む）。 */
body.recruit-test main#contents.recruit.company-numbers.is-honne-open {
	overflow-x: clip;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle-layer {
	position: absolute;
	z-index: 915;
	inset: 0;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility 0s linear .22s;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-doodle-layer {
	opacity: 1;
	visibility: visible;
	transition-delay: .16s;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle {
	position: absolute;
	display: block;
	width: var(--doodle-w);
	max-width: none;
	height: auto;
	filter:
		drop-shadow(0 0 6px rgba(205, 222, 28, .52))
		drop-shadow(0 2px 5px rgba(5, 18, 32, .42));
	mix-blend-mode: screen;
	opacity: .96;
	transform:
		translate3d(var(--doodle-x, 0), var(--doodle-y, 0), 0)
		rotate(var(--doodle-r, 0deg))
		scale(.985);
	transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .24s ease;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-doodle {
	transform:
		translate3d(var(--doodle-x, 0), var(--doodle-y, 0), 0)
		rotate(var(--doodle-r, 0deg))
		scale(1);
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-study {
	--doodle-w: 354px;
	--doodle-x: -134px;
	--doodle-y: 111px;
	--doodle-r: -3deg;
	left: 0;
	top: 0;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-career {
	--doodle-w: 504px;
	--doodle-x: -34px;
	--doodle-y: 126px;
	--doodle-r: -2deg;
	left: 17%;
	top: 27%;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-overtime {
	--doodle-w: 492px;
	--doodle-x: 216px;
	--doodle-y: 285px;
	--doodle-r: -1deg;
	right: 0;
	top: 20%;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-division {
	--doodle-w: 530px;
	--doodle-x: 251px;
	--doodle-y: 390px;
	--doodle-r: -1deg;
	right: 0;
	top: 48%;
}

/* 画像の本音が主役になるため、旧テキスト本音は視覚的には出さない。
   HTMLには残しておき、文面管理と読み上げの逃げ道を残す。 */
body.recruit-test main#contents.recruit.company-numbers:has(.test-honne-doodle-layer) .test-honne-note {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-study {
		--doodle-w: 58vw;
		--doodle-x: -12%;
		--doodle-y: -2%;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-career {
		--doodle-w: 60vw;
		--doodle-x: -4%;
		--doodle-y: -2%;
		left: 2%;
		top: 17%;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-overtime {
		--doodle-w: 62vw;
		--doodle-x: 10%;
		--doodle-y: 0;
		top: 32%;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-doodle.is-division {
		--doodle-w: 72vw;
		--doodle-x: 8%;
		--doodle-y: 0;
		top: 57%;
	}
}


/* ── 7. 本音の書き込み ─────────────────────────────────
   地が暗くなったので、47-4 で足していた濃紺のにじみは要らない。
   蛍光色の発色を邪魔していたぶんを削り、ネオンのにじみを主にする。
   グラフの線に重なるときのために、ごく薄い沈めだけ残してある。 */
body.numbers-dark.is-honne-open main#contents.recruit.company-numbers .test-honne-note__body {
	text-shadow:
		0 0 8px currentColor,
		0 0 16px currentColor,
		0 1px 2px rgba(4, 16, 30, .85),
		0 0 6px rgba(4, 16, 30, .6);
}

/* ── 8. （欠番）パンくず ─────────────────────────────────
   2026-09-16 にテストページ全体からパンくずを外したので、ここにあった
   区切り「>」と文字色の夜側指定も消した。番号だけ残す。 */

/* ── 9. ヘッダー ─────────────────────────────────────────
   ★ ヘッダーには状態が2つある。ここを分けないと必ず事故る。
     ① 透過（ページ上部）      … 夜の地に重なる → 明るい側へ
     ② .scrolled（白い帯）     … style.css:695 で background:#fff になる
                                  → **元の紙用の配色のまま**にする。
                                     夜側にすると白地に白で全部消える
   SPは常に白い帯なので、①の指定は PC幅かつ :not(.scrolled) に閉じてある。

   実測で拾った値（推測で直さないこと）:
     会社を知る等  文字 rgb(230,240,248) / 地 rgba(255,253,247,.9) → 1.14:1 */
@media screen and (min-width: 769px) {
	/* ロゴは濃紺1色のPNG。白版の素材が無いので filter で白に起こす */
	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .logo img {
		filter: brightness(0) invert(1);
	}

	/* 白いピルのままだと、明るくなった文字が地に溶ける。ピルごと夜側へ */
	body.recruit-test.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-btm ul li a {
		background-color: rgba(10, 26, 43, .62);
		box-shadow: inset 0 0 0 1px rgba(226, 241, 252, .4);
	}

	/* 文字に掛かっている光は「紙の上で紺を浮かせる」ためのもの。
	   夜の地では逆に文字を潰すので、暗い側の影に替える。 */
	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-top a,
	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-top a span,
	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-btm ul li a,
	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-btm ul li a span {
		color: #e6f0f8;
		text-shadow: 0 1px 10px rgba(6, 18, 32, .95);
	}

	body.numbers-dark.is-honne-open #globalHeader:not(.scrolled) .global-navi .nav-top a::after {
		filter: brightness(0) invert(1);
	}
}

/* ※ SPのハンバーガーや .scrolled の白い帯は、トークンを main に閉じた時点で
   他のテストページと同じ配色に戻るため、手当ては要らない。 */

/* ── 10. 本音素材の手動調整モード ─────────────────────────
   URL に ?honneEdit=1 を付けた時だけ、素材をドラッグ編集できる。 */
body.recruit-test main#contents.recruit.company-numbers.is-honne-edit .test-honne-doodle-layer {
	pointer-events: auto;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-edit .test-honne-doodle {
	cursor: grab;
	touch-action: none;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-edit .test-honne-doodle:active {
	cursor: grabbing;
}

body.recruit-test main#contents.recruit.company-numbers.is-honne-edit .test-honne-doodle.is-edit-selected {
	outline: 2px dashed #f2ff3d;
	outline-offset: 8px;
	filter:
		drop-shadow(0 0 8px rgba(205, 222, 28, .8))
		drop-shadow(0 4px 10px rgba(5, 18, 32, .58));
}

body.recruit-test.is-honne-edit .test-honne-editor-panel {
	position: fixed;
	z-index: 10050;
	right: 18px;
	bottom: 18px;
	width: min(420px, calc(100vw - 36px));
	padding: 14px;
	border: 1px solid rgba(226, 241, 252, .34);
	border-radius: 8px;
	background: rgba(9, 24, 40, .94);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .36);
	color: #eaf4ff;
	font-family: inherit;
}

body.recruit-test.is-honne-edit .test-honne-editor-panel__head {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

body.recruit-test.is-honne-edit .test-honne-editor-panel__body {
	margin-top: 4px;
	color: #bdd3e6;
	font-size: 11px;
	line-height: 1.6;
}

body.recruit-test.is-honne-edit .test-honne-editor-panel__code {
	display: block;
	width: 100%;
	height: 154px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid rgba(226, 241, 252, .22);
	border-radius: 6px;
	background: rgba(3, 12, 22, .74);
	color: #dff0ff;
	font-family: Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1.45;
	resize: vertical;
}

body.recruit-test.is-honne-edit .test-honne-editor-panel__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

body.recruit-test.is-honne-edit .test-honne-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, .3);
	border-radius: 6px;
	background: rgba(226, 241, 252, .12);
	color: #eaf4ff;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

body.recruit-test.is-honne-edit .test-honne-editor-panel__actions button:hover,
body.recruit-test.is-honne-edit .test-honne-editor-panel__actions button:focus-visible {
	background: rgba(226, 241, 252, .22);
}

/* ── 11. 本音ボタンのアイコン（望遠鏡を覗くアビー） ─────────
   ※ このファイルは本来「夜の配色」用だが、水彩CSS本体が
     エディタに巻き戻される問題があるあいだは、このページ固有の
     指定をここにまとめている（冒頭の注記と同じ理由）。

   絵が無いときは php 側が従来の鉛筆を出すので、この節は
   .has-face が付いたときだけ効く。丸く抜いて、ボタンの上下から
   少しはみ出させる（顔が乗っている感じにするため）。 */
body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle.has-face {
	padding-left: 8px;
	gap: 8px;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle__face {
	display: block;
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	margin-block: -12px; /* ボタンの上下からはみ出させる */
	border-radius: 50%;
	object-fit: cover;
	object-position: center 42%; /* 顔と望遠鏡が真ん中に来る位置 */
	filter: drop-shadow(0 3px 6px rgba(6, 18, 32, .35));
	transition: transform .22s ease;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle:hover .test-honne-toggle__face,
body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle:focus-visible .test-honne-toggle__face {
	transform: scale(1.08) rotate(-4deg);
}

/* 開いているあいだは「覗き込んでいる」ように少し前へ出す */
body.recruit-test main#contents.recruit.company-numbers.is-honne-open .test-honne-toggle__face {
	transform: scale(1.12);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle__face {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		margin-block: -10px;
	}
}

/* ── 12. 本音ボタンの位置：ヘッダーに潜らせない ───────────
   ★ この節だけ .is-honne-open を付けない。閉じているときも効かせる必要があるため。

   ■ 何が起きていたか
   ボタンは main の中にあり、**main 自身が重なりの箱（position + z-index:1）**なので、
   ボタンの z-index:920 は main の中でしか効かない。ヘッダーは main の外の
   z-index:20 なので、**重なった瞬間にヘッダーが上に乗ってクリックを食う**。
   元の指定は `top: clamp(84px, 9vw, 124px)`。9vw が 124px に届くのは幅1378px以上で、
   **それ未満（＝普通のノートPC幅）では 84〜124px となりヘッダー（下端124px）に潜る**。
   1440pxで確認していたので気づけなかった。

   ■ 直し方
   重なり順では勝てない（main の z-index を上げると本文がヘッダーの上を流れる）ので、
   **そもそも重ならない位置に固定する**。vw 依存をやめ、ヘッダーの実寸から決め打ちする。
     PC   ヘッダー下端 124px → 136px
     SP   ヘッダー下端 約74px → 92px
   ヘッダーの高さを変えたらここも変える。 */
body.recruit-test main#contents.recruit.company-numbers {
	--honne-top: 136px;
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle {
	top: var(--honne-top);
}

body.recruit-test main#contents.recruit.company-numbers .test-honne-caption {
	top: calc(var(--honne-top) + 54px);
}

@media screen and (max-width: 768.999px) {
	body.recruit-test main#contents.recruit.company-numbers {
		--honne-top: 92px;
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-toggle {
		top: var(--honne-top);
	}

	body.recruit-test main#contents.recruit.company-numbers .test-honne-caption {
		top: calc(var(--honne-top) + 48px);
	}
}