/**
 * RECRUIT（求職者の方へ）ページ
 * デザイン: デザインデータpng/6_RECRUIT.png
 * ベースレイアウト。画像・動画・QR・波形・アニメ演出は後日実装。
 * 全クラス p-recruit__（他ページと非連動）。ボタンは共通 btn-* を使用。
 *
 * 配色: 橙 #F5A313 / 黄 #FDCE00 / 青緑 #10A9AC / 文字 #493B3B / クリーム #FFF8EA / 濃 #2B2525
 */

.p-recruit {
	overflow: clip; /* hidden だと sticky が効かないため clip */
}

/* ヒーローは共通 l-page-hero（style.css）に移行 */

/* =========================================================
 * 共通: 濃色セクション帯（VOICE〜歓迎）
 * MESSAGE は l-page-hero の固定カバー（blur FV写真 + 橙70%）が透ける
 * ========================================================= */
.p-recruit__voice,
.p-recruit__work,
.p-recruit__welcome {
	background-color: #2B2525;
}
.p-recruit__message,
.p-recruit__voice,
.p-recruit__work,
.p-recruit__welcome {
	color: #fff;
}/* 永続スライドの装飾テキスト（共通ヘルパー） */
.p-recruit__marquee {
	position: absolute;
	left: 0;
	width: 100%;
	overflow: hidden;
	pointer-events: none;
}.p-recruit__marquee-inner {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
	animation: recruitMarquee 40s linear infinite;
}.p-recruit__marquee-word {
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	padding: 0 0.35em;
}
.p-recruit__marquee-word {
	font-size: 110px;
	color: rgba(255, 255, 255, 0.4); /* 流れる装飾テキストの濃度は全ページ共通 */
}
@keyframes recruitMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {.p-recruit__marquee-inner { animation: none; }
}

/* =========================================================
 * MESSAGE
 * ========================================================= */
.p-recruit__message {
	position: relative;
	text-align: center;
	/* 100svh表示 + 100svhホールド（通り過ぎ防止・TOP方式） */
	height: 200svh;
}
.p-recruit__message-hold {
	position: sticky;
	top: 0;
	height: 100svh;
	display: flex;
	align-items: center;
	overflow: clip;
}
.p-recruit__message .p-recruit__message-inner {
	width: 100%;
}
.p-recruit__message-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.25;
	/* TODO: 背景画像 */
}
.p-recruit__message-inner {
	position: relative;
	z-index: 1;
}
.p-recruit__message-title {
	position: relative;
	font-weight: 700;
	font-size: 40px;
	margin-bottom: 24px;
	padding-bottom: 18px;
}
/* タイトル下中央の白ライン */
.p-recruit__message-title::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 200px;
	height: 1px;
	background: #fff;
}
.p-recruit__message-text {
	font-size: 18px;
	line-height: 2.2;
}
.p-recruit__marquee {
	bottom: -18px;
	z-index: 1;
}

/* =========================================================
 * DAY & VOICE
 * ========================================================= */
.p-recruit__voice {
	position: relative;
	padding: 120px 40px 80px;
}
/* カードの塗りを画面右端までブリードさせる擬似要素（カードと同色） */
.p-recruit__voice::before {
	content: "";
	position: absolute;
	top: 120px;
	right: 0;
	width: 50vw;
	height: calc(100% - 120px - 80px); /* 上下paddingを除いたカードの高さ域 */
	background: #FFF8EA;
}
/* カードは 1140px インナー（中央寄せ・擬似要素より前面） */
.p-recruit__voice-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	background: #FFF8EA;
	color: #493B3B;
	border-radius: 0;
	padding: 56px;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 56px;
	align-items: center;
}
/* スマホモック: 前面=枠PNG(透過) / 背面=縦長画像の上向き永続スクロール */
.p-recruit__voice-mock {
	position: relative;
	aspect-ratio: 571 / 1144; /* モック画像の実寸比 */
}
.p-recruit__voice-mock-frame {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}
/* モック全体を覆う透明リンク（枠画像より前面） */
.p-recruit__voice-mock-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 32px;
	transition: opacity 0.3s ease;
}
.p-recruit__voice-mock:hover .p-recruit__voice-mock-link {
	background: rgba(255, 255, 255, 0.08); /* hoverでわずかに明るく＝押せることの示唆 */
}
.p-recruit__voice-mock-link:focus-visible {
	outline: 2px solid #10A9AC;
	outline-offset: 4px;
}
.p-recruit__voice-mock-screen {
	position: absolute;
	inset: 1.8% 3.5%; /* ベゼルぶん内側（枠571px中 画面531px） */
	z-index: 1;
	overflow: hidden;
	border-radius: 24px;
	background: #2B2525;
}
/* 縦型スライダー: 1スライド=画面枠と同じ高さ。JS(js/recruit.js)が
 * translateY を 100% ずつ動かしてスワイプ風に自動送りする */
.p-recruit__voice-mock-track {
	display: flex;
	flex-direction: column;
	height: 100%;
	will-change: transform;
}
.p-recruit__voice-mock-slide {
	flex: 0 0 100%;
	height: 100%;
	overflow: hidden;
}
.p-recruit__voice-mock-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
	/* 自動送りはJS側で停止。先頭スライドを表示したままにする */
	.p-recruit__voice-mock-track { transform: none !important; }
}
.p-recruit__voice-title {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 32px;
	flex-direction: column;
}
.p-recruit__voice-title-eng {
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: #F5A313;
	text-transform: uppercase;
}
.p-recruit__voice-title-jp {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: #F5A313;
}
.p-recruit__voice-text {
	font-size: 14px;
	line-height: 2;
	margin-bottom: 28px;
	font-weight: 700;
}
/* ダウンロード枠 = バナー画像1枚（PC/SPで差し替え）。全体がリンク */
.p-recruit__voice-download {
	display: block;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p-recruit__voice-download:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(43, 37, 37, 0.12);
}
.p-recruit__voice-download img {
	display: block;
	width: 100%;
	height: auto;
}

.p-recruit__voice-note {
    font-size: 14px;
    color: #493B3B;
    line-height: 2;
    font-weight: 700;
}

/* =========================================================
 * 求人媒体ボタン（募集要項アコーディオン内・区分ごと）
 * ACFでURLが入っている媒体だけ出力される（PHP側で制御）
 * ========================================================= */
.p-recruit__media {
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid #E0DACE;
}
.p-recruit__media-lead {
	font-size: 14px;
	font-weight: 700;
	color: #493B3B;
	margin-bottom: 16px;
}
.p-recruit__media-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
/* 幅は li（フレックスアイテム）側で持つ。a に幅を持たせると li が縮んだ時に
 * a の % が縮んだ li 基準になって極端に小さくなる */
.p-recruit__media-item {
	width: 200px;
	flex: 0 0 auto;
}
.p-recruit__media-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 64px;
	padding: 7px 12px; /* ロゴを大きく見せるため余白は最小限（枠サイズは不変） */
	background: #fff;
	border: 1px solid #E0DACE;
	border-radius: 10px;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

/* フリーボタン: 文言とリンクを管理画面で自由に設定できる枠。
 * 媒体ロゴボタンと同じ箱サイズ・同じ並びに乗るようにして、行が揃うようにしている。
 * ※デザイン確定後に色・装飾はここだけ調整すれば済む */
/* 文言の長さに合わせて横に伸びる（ロゴボタンは200px固定だが、
 * 文字ボタンは折り返すと読みにくいため最低幅だけ揃えて可変にする） */
.p-recruit__media-item--free {
	width: auto;
	max-width: 100%;
}
.p-recruit__media-btn--free {
	width: auto;
	min-width: 200px;
	max-width: 100%;
	background: #F5A313;
	border-color: #F5A313;
	color: #fff;
	gap: 8px;
	padding: 7px 24px;
}
.p-recruit__media-btn--free:hover {
	background: #ED8900;
	border-color: #ED8900;
}
.p-recruit__media-free-label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}
.p-recruit__media-btn--free::after {
	content: "→";
	flex-shrink: 0;
	transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}
.p-recruit__media-btn--free:hover::after {
	transform: translateX(4px);
}
.p-recruit__media-btn:hover {
	border-color: #10A9AC;
	box-shadow: 0 4px 16px rgba(43, 37, 37, 0.1);
	transform: translateY(-2px);
}
.p-recruit__media-logo {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
/* 背景が白でないロゴは、ボタンの塗りをロゴ台紙に合わせる（JOBTV=黒） */
.p-recruit__media-btn--jobtv {
	background: #000;
	border-color: #000;
}
.p-recruit__media-btn--jobtv:hover {
	border-color: #10A9AC;
}

.p-recruit__media-name {
	font-weight: 700;
	font-size: 15px;
	color: #493B3B;
}

/* =========================================================
 * 働き方 / 歓迎（画像 + テキストの左右組み）
 * ========================================================= */
/* 1140px インナー */
.p-recruit__work-inner,
.p-recruit__info-inner {
	width: 100%;
	max-width: 1220px; /* コンテンツ1140 + 左右padding40 */
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}
.p-recruit__work-inner,
.p-recruit__welcome-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.p-recruit__work { padding: 60px 0; }
.p-recruit__welcome { padding: 60px 0 120px; }

.p-recruit__work-img,
.p-recruit__welcome-img {
	aspect-ratio: 4 / 3;
	background: #3a3232 center / cover no-repeat;
}
.p-recruit__work-img {
	background-image: url(../images/recruit/work01.webp);
}
.p-recruit__welcome-img {
	background-image: url(../images/recruit/welcome01.webp);
}
/* 画像を壁までブリード:
 * w-1280(最大1360・左右padding40)の外側余白 = max(50vw - 680px, 0) + 40px を
 * ネガティブマージンで打ち消し、幅を同量広げる */
.p-recruit__work-img {
	width: calc(100% + max(50vw - 610px, 0px) + 40px); /* 1140インナー基準 */
	margin-left: calc(-1 * (max(50vw - 610px, 0px) + 40px)); /* 左壁まで */
}
.p-recruit__welcome-img {
	width: calc(100% + max(50vw - 680px, 0px) + 40px);
	margin-right: calc(-1 * (max(50vw - 680px, 0px) + 40px)); /* 右壁まで */
}
/* 歓迎はテキスト左・画像右（デザイン準拠） */
.p-recruit__welcome-body { order: 0; }
.p-recruit__welcome-img { order: 1; }

 /* 見出し: オレンジ + 文字の右側から伸びる線（serviceラベルと同方式） */
.p-recruit__work-title,
.p-recruit__welcome-title {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	font-weight: 700;
	font-size: 26px;
	color: #F5A313;
	margin-bottom: 24px;
	padding-bottom: 0;
}
.p-recruit__work-title::after,
.p-recruit__welcome-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
}
.p-recruit__work-text {
	font-size: 15px;
	line-height: 2;
}
.p-recruit__work-text + .p-recruit__work-text {
	margin-top: 20px;
}
.p-recruit__welcome-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.p-recruit__welcome-item {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	line-height: 1.7;
}
.p-recruit__welcome-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #FDCE00;
}
@media screen and (max-width: 1240px) {
}

/* =========================================================
 * RECRUIT INFOMATION（募集要項 / 明色背景 + アコーディオン）
 * ========================================================= */
.p-recruit__info {
	background-color: #FFF8EA;
	color: #493B3B;
	padding: 120px 0 180px;
}
.p-recruit__info-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
	margin-bottom: 48px;
}
.p-recruit__heading {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: #F5A313;
}
.p-recruit__heading-eng {
	font-weight: 700;
	font-size: 56px;
	line-height: 1.05;
	text-transform: uppercase;
}
.p-recruit__heading-jp {
	font-weight: 700;
	font-size: 16px;
	line-height: 160%;
	letter-spacing: 0.2em;
}
.p-recruit__info-lead {
	font-size: 15px;
	line-height: 1.9;
}

/* アコーディオン（details/summary） */
.p-recruit__accordions {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.p-recruit__accordion {
	border-radius: 0;
	overflow: hidden;
}
.p-recruit__accordion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #2B2525;
	color: #fff;
	padding: 14px 17px;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	list-style: none;
	line-height: 1.8;
	letter-spacing: 0.1em;
}
.p-recruit__accordion-head::-webkit-details-marker { display: none; }
/* シェブロン（∨ / 開くと ∧） */
.p-recruit__accordion-icon {
	position: relative;
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.p-recruit__accordion-icon::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 2px;
	width: 9px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	transition: transform 0.25s ease, top 0.25s ease;
}
.p-recruit__accordion[open] .p-recruit__accordion-icon::before {
	top: 5px;
	transform: rotate(-135deg);
}
.p-recruit__accordion-body {
	background: transparent;
	border: none;
}

/* 募集要項テーブル */
.p-recruit__table {
	width: 100%;
	border-collapse: collapse;
}
.p-recruit__table-row {
	border-bottom: 1px solid rgba(73, 59, 59, 0.15);
}
.p-recruit__table-th {
	width: 180px;
	text-align: left;
	vertical-align: top;
	font-weight: 700;
	font-size: 15px;
	padding: 22px 16px 22px 0;
}
.p-recruit__table-td {
	vertical-align: top;
	font-size: 14px;
	line-height: 1.9;
	padding: 16px 0;
}

/* =========================================================
 * レスポンシブ
 * ========================================================= */
@media screen and (max-width: 1080px) {
	.p-recruit__heading-eng { font-size: 40px; }
	.p-recruit__voice-card { grid-template-columns: 240px 1fr; gap: 40px; padding: 40px; }
}

@media screen and (max-width: 768px) {
	.p-recruit__marquee { bottom: -8px; }


	.p-recruit__message-title { font-size: 24px; }
	.p-recruit__marquee-word { font-size: 60px; }

	.p-recruit__message-title::before { width: 80px; } /* SPは下線を短く */
	.p-recruit__message-text {
		font-size: 14px;
		line-height: 2.7;
		letter-spacing: .2em;
		font-weight: 700;
	}
	.p-recruit__voice { padding: 80px 20px 40px; }
	.p-recruit__work-inner,
	.p-recruit__info-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.p-recruit__work-title,
	.p-recruit__welcome-title {
		font-size: 20px;
	}
	.p-recruit__work-text {
		font-size: 14px;
	}
	.p-recruit__welcome-item {
		font-size: 14px;
	}
	.p-recruit__voice::before {
		top: 80px;
		height: calc(100% - 80px - 40px);
	}
	/* SPは flex + display:contents で並び順を組み替え:
	 * タイトル → 本文 → モック → ダウンロード → 注記 */
	.p-recruit__voice-card {
		display: flex;
		flex-direction: column;
		gap: 24px;
		padding: 56px 20px;
	}
	.p-recruit__voice-body { display: contents; }
	.p-recruit__voice-title { order: 1; margin-bottom: 0; width: 100%; }
	.p-recruit__voice-text { order: 2; margin-bottom: 0; }
	.p-recruit__voice-text br { display: none; } /* SPは改行位置を成り行きに */
	.p-recruit__voice-mock { order: 3; max-width: 240px; margin: 0 auto; width: 100%; }
	/* SPのダウンロード枠: 縦長バナー画像に差し替わる（picture の source で切替） */
	.p-recruit__voice-download {
		order: 4;
		margin: 0 auto;
		max-width: 320px;
		width: 100%;
	}
	.p-recruit__voice-note { order: 5; }
	/* SP: 媒体ボタンは2列 */
	.p-recruit__media-list { gap: 12px; }
	.p-recruit__media-item { width: calc(50% - 6px); }
	.p-recruit__media-btn { height: 56px; padding: 6px 10px; }

	.p-recruit__work-inner,
	.p-recruit__welcome-inner { grid-template-columns: 1fr; gap: 28px; }
	.p-recruit__work { padding: 48px 0; }
	.p-recruit__welcome { padding: 48px 0 80px; }
	.p-recruit__welcome-body { order: 2; }
	.p-recruit__welcome-img { order: 2; }
.p-recruit__work-img{
	order: 2;
}
	.p-recruit__info { padding: 64px 0 80px; }
	.p-recruit__info-head { flex-direction: column; align-items: flex-start; gap: 16px; }
	.p-recruit__heading-eng { font-size: 32px; }
	.p-recruit__voice-title-eng { font-size: 32px; }
	.p-recruit__accordion-body { overflow-x: auto; }
	/* SPは 項目名の下に内容が来る縦積み */
	.p-recruit__table-row {
		display: flex;
		flex-direction: column;
	}
	.p-recruit__table-th {
		width: 130px;
		padding: 16px 16px 0 0;
	}
	.p-recruit__table-td {
		padding: 14px 16px 16px 0;
	}
}

/* =========================================================
 * ビルドストーリー（TOPの page-front__sns セクション完全踏襲・自動複製）
 * 元: style.css の page-front__sns ルール一式を p-recruit__story にリネーム
 * keyframes(snsItemUp 等)は style.css のグローバル定義を共有
 * ========================================================= */
/* =========================================================
 * SNS / インタビュー誘導セクション
 * PC : 左に1枚ビジュアル + 右にテキスト
 * SP : ビジュアルを隠し、下部にティッカー(140px画像/gap20px/永続横スクロール)
 * ========================================================= */
.p-recruit__story {
	position: relative;
	z-index: 7;
}
/* ---- SNS イントロ演出 (増分1: 黒ステージ + ロゴ + step01→02→03 左→右色塗り) ----
 * JS が .p-recruit__story__intro に is-active を付与すると再生。 */
/* 全画面ピン: 高さのある wrap の中で intro を sticky 固定 → 演出中ずっと全画面表示 */
.p-recruit__story__intro-wrap {
	position: relative;
	height: 200vh; /* ピン尺。長くするほど固定される時間が伸びる */
}
.p-recruit__story__intro {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #2B2525;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
}
.p-recruit__story__intro-logo {
	position: relative;
	z-index: 1;
	width: min(60vw, 753px);
}
/* 増分2: F5A313 の低い波が左下→右上へ上がって徐々に覆う。
 * 左が高く右が低い浅いカーブ (SVG path)。要素を画面下外から上げ、右へドリフト。
 * 上げ切ると曲線が画面上端より上に抜け、全面オレンジになる。 */
.p-recruit__story__intro-wave {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 130%;
	height: 200vh;
	z-index: 2;
	transform: translate(-20%, 175vh); /* 開始: 左下の画面外 */
	will-change: transform;
}
.p-recruit__story__intro-wave svg {
	display: block;
	width: 100%;
	height: 100%;
}
.p-recruit__story__intro.is-active .p-recruit__story__intro-wave {
	animation: snsWaveRise 1s cubic-bezier(0.33, 0, 0.2, 1) 0.15s forwards;
}
/* 増分3: 波の上に薄い EB6A00(20%) ロゴ 5行。中央(2)が拡大しながら出現 → 上下が続く。 */
.p-recruit__story__intro-rows {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7vh;
	pointer-events: none;
	overflow: hidden;
}
.p-recruit__story__intro-row {
	flex: 0 0 auto;
	opacity: 0;
}
/* PC は中央5行(0〜4)のみ使用。6行目以降は SP の敷き詰め用なので PC では非表示。 */
.p-recruit__story__intro-row:nth-child(n+6) {
	display: none;
}
.p-recruit__story__intro-row-svg {
	display: block;
	height: 13vh;   /* ≒ 120/800。アスペクト比で横長になり左右に少しはみ出す */
	width: auto;
	max-width: none;
}
/* 各行が中心位置からどれだけ離れて配置されるか (=分裂の開始オフセット)。
 * 1スロット = 行高さ13vh + gap7vh = 20vh。 */
.p-recruit__story__intro-row--0 { --split: 40vh; }
.p-recruit__story__intro-row--1 { --split: 20vh; }
.p-recruit__story__intro-row--3 { --split: -20vh; }
.p-recruit__story__intro-row--4 { --split: -40vh; }
/* 中央(2)が拡大しながら出現 (波が覆い切った後) */
.p-recruit__story__intro.is-active .p-recruit__story__intro-row--2 {
	animation: snsRowZoom 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s forwards;
}
/* 中央から内側(1,3) → 外側(0,4) の順に分裂して各段へ広がる */
.p-recruit__story__intro.is-active .p-recruit__story__intro-row--1,
.p-recruit__story__intro.is-active .p-recruit__story__intro-row--3 {
	animation: snsRowSplit 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.9s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__intro-row--0,
.p-recruit__story__intro.is-active .p-recruit__story__intro-row--4 {
	animation: snsRowSplit 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1.05s forwards;
}
/* 増分4: アニメ完了後、メインコンテンツをオレンジ＋薄文字の上(最前面)に中央配置でふわっと表示 */
.p-recruit__story__intro .p-recruit__story__inner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.p-recruit__story__intro.is-active .p-recruit__story__inner {
	pointer-events: auto;
}
/* inner の子要素を順次表示: visual → title(下から) → text(下から) → link(順次) */
.p-recruit__story__visual,
.p-recruit__story__title,
.p-recruit__story__text,
.p-recruit__story__link {
	opacity: 0;
}
.p-recruit__story__title,
.p-recruit__story__text,
.p-recruit__story__link {
	transform: translateY(24px);
}
.p-recruit__story__intro.is-active .p-recruit__story__visual {
	animation: snsItemFade 0.6s ease 0.9s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__title {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__text {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__link:nth-child(1) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.4s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__link:nth-child(2) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.55s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__link:nth-child(3) {
	animation: snsItemUp 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 1.7s forwards;
}
.p-recruit__story__intro-logo-svg {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0;
}
/* SP用ロゴ(2行)は PC では非表示 (SPで切替) */
.p-recruit__story__intro-logo-svg--sp {
	display: none;
}
.p-recruit__story__intro.is-active .p-recruit__story__intro-logo-svg {
	opacity: 1;
	transition: opacity 0.53s ease;
}
/* 色塗り: clip rect の width を 0 → 各語幅へ。is-active で step01→02→03 と順次。 */
.p-recruit__story__fill-rect {
	width: 0;
}
/* step01→03 で徐々に加速。後ろの語ほど dur を短く(速く)し、step01 は ease-in で
 * ゆっくり入る → 全体として「だんだん速く流れる」スイープになる。 */
.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--step01 {
	animation: snsFillStep01 0.8s ease-in 0.15s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--step02 {
	animation: snsFillStep02 0.25s linear 0.15s forwards;
}
.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--step03 {
	animation: snsFillStep03 0.21s linear 0.15s forwards;
}
.p-recruit__story__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	padding-left: 80px;
	padding-right: 80px;
}
@media screen and (max-width: 1240px) {
	.p-recruit__story__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}
/* PC: sns-img を左カラムに全高で配置 (画像は cover で縦いっぱい) */
.p-recruit__story__visual {
	flex: 0 0 44%;
	height: 100%;
	overflow: hidden;
	padding-left: 80px;
	padding-right: 80px;
	background: #fff8eb66;
	display: flex;
	gap: 20px;              /* 横並びの列同士の隙間 */
}
/* 各列: 縦ティッカー。同じ画像を2枚縦に並べたトラックを translateY でループ。 */
.p-recruit__story__visual-col {
	flex: 1;
	height: 100%;
	overflow: hidden;
}
.p-recruit__story__visual-track {
	display: flex;
	flex-direction: column;
}
.p-recruit__story__visual-track img {
	display: block;
	width: 100%;
	height: auto;
}
/* 左: 下→上 / 右: 上→下。2枚なので -50% (1枚分) でシームレスループ。 */
.p-recruit__story__visual-col--up .p-recruit__story__visual-track {
	animation: snsVisualUp 24s linear infinite;
}
.p-recruit__story__visual-col--down .p-recruit__story__visual-track {
	animation: snsVisualDown 24s linear infinite;
}
.p-recruit__story__body {
	flex: 1;
}
.p-recruit__story__title {
	font-size: 32px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.2em;
	line-height: 1.6;
	margin-bottom: 16px;
}
.p-recruit__story__text {
	letter-spacing: 0.2em;
	color: #fff;
	font-weight: 700;
	line-height: 1.8;
	margin-bottom: 40px;
}
.p-recruit__story__links {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* SNS / インタビュー 共通ボタン: 白・角丸・最大280px・padding統一。
 * hover で btn-main と同じ「波が競り上がる」演出 (濃色の波が下から覆い、文字を白に)。 */
.p-recruit__story__link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px; /* アイコン→テキストの間隔 */
	width: 100%;
	max-width: 280px;
	padding: 10px 16px 10px 32px;
	background: #fff;
	border-radius: 999px;
	font-size: 14px;
	color: #2B2525;
	min-height: 42px;
	overflow: hidden;
	isolation: isolate;
	/* 文字色は波が覆う頃に切り替わるよう少し遅延 (btn-main と同様) */
	transition: color 0.3s ease 0.3s;
}
.p-recruit__story__link::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: -90%;
	right: -90%;
	/* 上下に広めの余白を取り、rotate しても角まで覆い切れるように */
	top: -60%;
	bottom: -60%;
	background: #493B3B;
	border-radius: 50% 50% 0 0 / 60% 60% 0 0;
	translate: 0 130%;
	rotate: 8deg;
	transform-origin: 50% 50%;
	transition:
		translate 0.9s cubic-bezier(.45, .05, .25, 1),
		rotate 1.1s cubic-bezier(.5, -.2, .4, 1.3);
}
.p-recruit__story__link:hover::before {
	translate: 0 0;
	rotate: -8deg;
}
.p-recruit__story__link:hover {
	color: #fff;
}
.p-recruit__story__link-icon {
	width: 24px;
	height: 24px;
}
/* ボタン右の矢印 (arrows-sns.svg)。12px四方・右から16px。 */
.p-recruit__story__link-arrow {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	object-fit: contain;
	transition: filter 0.3s ease 0.2s; /* 波が覆う頃に合わせて少し遅延 */
}
/* ホバー時: 濃色の波が覆うので矢印(画像)を白に */
.p-recruit__story__link:hover .p-recruit__story__link-arrow {
	filter: brightness(0) invert(1);
}
/* ティッカーは既定(PC)では非表示。SP のみ表示。 */
.p-recruit__story__ticker {
	display: none;
}
@media screen and (max-width: 768px) {
	.p-recruit__story__inner {
		display: block;
	}
	/* SP: 中身が100vh超になるため stickyオーバーレイをやめ通常フローに。
	 * 波を intro 全体に広げ、コンテンツをオレンジの上に普通にスクロールさせる。 */
	.p-recruit__story__intro-wrap {
		height: auto;
	}
	.p-recruit__story__intro {
		position: relative;
		display: block;
		height: auto;
		min-height: 100vh;
		padding: 0;
	}
	.p-recruit__story__intro-logo {
		position: absolute;
		top: 50vh;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80vw;
		z-index: 1;
	}
	.p-recruit__story__intro-wave {
		height: calc(100% + 100vh);
		width: 130%;
		transform: translateY(100%);
	}
	/* SP: 薄い行を上端から敷き詰め (32px / gap10px)。中央寄せだと上の行が見切れるので
	 * top基準に変更し、上の行が切れないようにする。中心から増える演出は scaleY(0→1)。 */
	.p-recruit__story__intro-rows {
		top: 0;
		bottom: auto;
		height: auto;
		justify-content: flex-start;
		gap: 10px;
		transform: scaleY(0);
		transform-origin: center center; /* 中心から上下に広がる (PCの中心分裂と統一) */
	}
	.p-recruit__story__intro-rows .p-recruit__story__intro-row {
		display: block;   /* nth-child(n+6)非表示を上書きして全行表示 */
		opacity: 0.2;
		transform: none;
	}
	.p-recruit__story__intro.is-active .p-recruit__story__intro-row {
		animation: none;  /* PC用の各行分裂は無効化 */
	}
	.p-recruit__story__intro.is-active .p-recruit__story__intro-rows {
		animation: snsRowsGrowSp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s forwards;
	}
	.p-recruit__story__intro-row-svg {
		height: 32px;
	}
	/* SP: ロゴを2行版(svg01)に切替。色塗りは PC と同じ step01→02→03 のタイミング。 */
	.p-recruit__story__intro-logo-svg--pc {
		display: none;
	}
	.p-recruit__story__intro-logo-svg--sp {
		display: block;
	}
	.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--sp-step01 {
		animation: snsFillSp01 0.8s ease-in 0.15s forwards;
	}
	.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--sp-step02 {
		animation: snsFillSp02 0.25s linear 0.15s forwards;
	}
	.p-recruit__story__intro.is-active .p-recruit__story__fill-rect--sp-step03 {
		animation: snsFillSp03 0.21s linear 0.15s forwards;
	}
	/* SP: 中身はオレンジの上にオーバーレイ。縦中央寄せだと背が高い時に上が切れるので
	 * 上寄せ(top:80px)にして上が切れないようにする。 */
	/* SP: 中身は通常フローでオレンジの上に (上部に配置)。intro は中身の高さまで伸び、
	 * absoluteをやめたので高さ100vh超でも見切れない。reveal は PC と同じく発火させる。 */
	.p-recruit__story__intro .p-recruit__story__inner {
		position: relative;
		z-index: 4;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		height: auto;
		margin-top: 80px; /* ヘッダー回避。中身は画面内に収まり reveal が見える */
		padding: 0 0 80px;
	}
	/* SP: 1枚ビジュアルは隠してティッカーに切替 */
	.p-recruit__story__visual {
		display: none;
	}
	.p-recruit__story__ticker {
		display: block;
		overflow: hidden;
		margin-top: 64px;            /* SNSボタン(links)とスライダーの要素間余白 */
		/* 祖先(intro 40px + inner 20px)の左右paddingに依存せず画面端〜端の全幅に */
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: 0;
		padding-top: 24px;
		padding-bottom: 24px;
		background: #fff8ea66;       /* PC同様 FFF8EA 40% */
		/* 最初は非表示。SNSボタンの順次出現の後に下から表示 */
		opacity: 0;
		transform: translateY(24px);
	}
	.p-recruit__story__intro.is-active .p-recruit__story__ticker {
		animation: snsItemUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 2.2s forwards;
	}
	.p-recruit__story__title {
		font-size: 28px;
		text-align: center;
	}
	.p-recruit__story__text {
		font-size: 14px;
		text-align: center;
	}
	.p-recruit__story__links {
		align-items: center;
	}
	/* 横スクロール: 2セット出力 → translateX(-50%) で1セット分ぴったりループ。
	 * gap ではなく item の margin-right で間隔を作り継ぎ目をシームレスに。 */
	.p-recruit__story__ticker-track {
		display: flex;
		width: max-content;
		animation: snsTickerFlow 20s linear infinite;
	}
	.p-recruit__story__ticker-item {
		flex: 0 0 auto;
		margin-right: 20px;
	}
	.p-recruit__story__ticker-link {
		display: block;
	}
	.p-recruit__story__ticker-item img {
		display: block;
		width: 140px;
		height: auto;
	}
}

/* フッター共通CONTACTの上波色（このページの直前セクション背景に馴染ませる） */
:root {
	--contact-wave-color: #FFF8EA;
}

/* =========================================================
 * recruit 専用: intro のロゴ塗り・波はスキップし、
 * 「濃オレンジ文字(rows)の分裂」からアニメ開始（上のdelayは-3.3sシフト済み）
 * ========================================================= */
.p-recruit__story__intro-logo,
.p-recruit__story__intro-wave {
	display: none;
}
.p-recruit__story__intro {
	background: #F5A313; /* 波が来ないため最初から本体色 */
}

/* recruit 専用: story タイトルのSP調整 */
@media screen and (max-width: 768px) {
	.p-recruit__story__title {
		font-size: 24px;
		text-align: center;
	}
	.p-recruit__story__intro {
		position: relative;
		display: flex;
		height: auto;
		min-height: 100vh;
		padding: 0;
	}
}

/* recruit 専用: 募集要項の表示順（見出し→リード→アコーディオンを重ね掛けで一気に出す）
 * 以前は「見出しのｽｽｽ完了を待つ」直列だったため全体で2.4s掛かっていた。
 * 文字送りを詰めつつ、後続を前の途中に被せて 約1.0s で出し切る。 */
html.js-text-anim .p-recruit__info .p-recruit__heading .anim-char__text {
	transition-duration: 0.45s;
	transition-delay: calc(0.028s * var(--char-index));
}
html.js-text-anim .p-recruit__info .p-recruit__info-lead,
html.js-text-anim .p-recruit__info .p-recruit__accordions {
	transition-duration: 0.5s;
}
html.js-text-anim .p-recruit__info .p-recruit__info-lead.is-anim-in { transition-delay: 0.3s; }
html.js-text-anim .p-recruit__info .p-recruit__accordions.is-anim-in { transition-delay: 0.5s; }

/* recruit 専用: 働き方の表示順（画像=白ワイプ(〜1.1s) → タイトル → 本文2つ） */
/* 画像ワイプ(1.1s)の途中=白が引いて画像が見え始める頃(0.55s〜)から文字を発火 */
html.js-text-anim .p-recruit__work .p-recruit__work-title.is-anim-in { transition-delay: 0.55s; }
html.js-text-anim .p-recruit__work .p-recruit__work-text:nth-of-type(1).is-anim-in { transition-delay: 0.75s; }
html.js-text-anim .p-recruit__work .p-recruit__work-text:nth-of-type(2).is-anim-in { transition-delay: 0.95s; }

/* recruit 専用: 歓迎セクションの表示順（画像=白ワイプ(〜1.1s) → タイトル → リスト） */
html.js-text-anim .p-recruit__welcome .p-recruit__welcome-title.is-anim-in { transition-delay: 0.55s; }
html.js-text-anim .p-recruit__welcome .p-recruit__welcome-list.is-anim-in { transition-delay: 0.75s; }

/* recruit 専用: DAY & VOICE の表示順（モック → タイトル文字ｽｽｽ → 本文 → DL → 注記） */
html.js-text-anim .p-recruit__voice .p-recruit__voice-title .anim-char__text {
	transition-delay: calc(0.5s + 0.05s * var(--char-index));
}
html.js-text-anim .p-recruit__voice .p-recruit__voice-text.is-anim-in { transition-delay: 1.5s; }
html.js-text-anim .p-recruit__voice .p-recruit__voice-download.is-anim-in { transition-delay: 1.7s; }
html.js-text-anim .p-recruit__voice .p-recruit__voice-note.is-anim-in { transition-delay: 1.9s; }
/* SPは タイトル → 本文 → モック → DL → 注記 の順（レビュー指示） */
@media screen and (max-width: 768px) {
	html.js-text-anim .p-recruit__voice .p-recruit__voice-title .anim-char__text {
		transition-delay: calc(0.05s * var(--char-index));
	}
	html.js-text-anim .p-recruit__voice .p-recruit__voice-text.is-anim-in { transition-delay: 1.0s; }
	html.js-text-anim .p-recruit__voice .p-recruit__voice-mock.is-anim-in { transition-delay: 1.2s; }
	html.js-text-anim .p-recruit__voice .p-recruit__voice-download.is-anim-in { transition-delay: 1.4s; }
	html.js-text-anim .p-recruit__voice .p-recruit__voice-note.is-anim-in { transition-delay: 1.6s; }
}

/* 無限ループは js/wave-flow.js の rAF 駆動（WebKitのループ境界チラつき対策）。
 * JS有効時は CSS keyframes を停止（no-JS時はCSSフォールバック） */
html.js-wave-flow .p-recruit__marquee-inner,
html.js-wave-flow .p-recruit__story__visual-track,
html.js-wave-flow .p-recruit__voice-mock-track {
	animation: none !important;
}

/* 下層FVカバーをこのページでは TOP aboutus 風に戻す:
 * ぼかしFV写真(cover-img) + 橙60% + 黒10%（numbersは不透明オレンジのまま） */
.l-page-hero__cover-img {
	display: block;
}
.l-page-hero__cover::before {
	background:
		linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
		linear-gradient(rgba(245, 163, 19, 0.6), rgba(245, 163, 19, 0.6));
}

/* =========================================================
 * MOVIE（紹介動画）: 濃色帯の中のサムネ+モーダル再生
 * ========================================================= */
.p-recruit__movie {
	background-color: #2B2525;
	/* 下は 24px: サムネを右下にずらした青緑の面(-16px)が、次セクション(DAY&VOICE)の
	 * 同色背景に塗りつぶされて下辺が切れるのを防ぐ。DAY&VOICE の上余白120pxと合わせて余白を作る */
	padding: 96px 40px 24px;
	/* 動画/サムネの実比率(幅/高さ)。PHPが style で上書きする。既定は16:9 */
	--movie-ar: 1.7778;
	--movie-ar-sp: 1.7778;
	--movie-max-h: 66svh; /* 縦長素材でも縦に伸びすぎないための高さ上限 */
}
.p-recruit__movie-inner {
	max-width: 880px;
	margin: 0 auto;
}
.p-recruit__movie-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 36px;
}
.p-recruit__movie-title-eng {
	font-weight: 700;
	font-size: 60px;
	line-height: 1;
	color: #F5A313;
	text-transform: uppercase;
}
.p-recruit__movie-title-jp {
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: #F5A313;
}
/* サムネ全体がボタン。ずらしフレーム(teal)で奥行きを出す */
.p-recruit__movie-open {
	position: relative;
	display: block;
	/* 横長素材は幅いっぱい / 縦長素材は高さ上限に収まる幅まで自動で絞る */
	width: min(100%, calc(var(--movie-max-h) * var(--movie-ar)));
	margin-inline: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.p-recruit__movie-open::before {
	content: "";
	position: absolute;
	inset: 16px -16px -16px 16px; /* 右下へずらした面 */
	background: #10A9AC;
	border-radius: 16px;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-recruit__movie-open:hover::before {
	transform: translate(4px, 4px);
}
.p-recruit__movie-thumb {
	position: relative;
	display: block;
	aspect-ratio: var(--movie-ar);
	border-radius: 16px;
	overflow: hidden;
	background: #1d1919;
}
/* 再生ボタンが際立つよう薄く落とす */
.p-recruit__movie-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(43, 37, 37, 0.25);
	transition: background 0.3s ease;
}
.p-recruit__movie-open:hover .p-recruit__movie-thumb::after {
	background: rgba(43, 37, 37, 0.1);
}
.p-recruit__movie-thumb-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: scale 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-recruit__movie-open:hover .p-recruit__movie-thumb-media {
	scale: 1.04;
}
/* 中央の再生ボタン */
.p-recruit__movie-play {
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: #F5A313;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s ease, background 0.3s ease;
}
.p-recruit__movie-play svg { width: 44px; height: 44px; margin-left: 4px; }
.p-recruit__movie-open:hover .p-recruit__movie-play {
	transform: scale(1.08);
	background: #FDCE00;
}
/* 再生ボタンの波紋（さりげなく） */
.p-recruit__movie-play::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid rgba(245, 163, 19, 0.7);
	animation: recruitMoviePulse 2.4s ease-out infinite;
}
@keyframes recruitMoviePulse {
	0%   { transform: scale(1);   opacity: 0.8; }
	70%  { transform: scale(1.55); opacity: 0; }
	100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.p-recruit__movie-play::before { animation: none; }
}
.p-recruit__movie-caption {
	position: absolute;
	right: 20px;
	bottom: 14px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	color: #fff;
	opacity: 0.85;
}
/* ---- モーダル ---- */
.p-recruit__movie-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.p-recruit__movie-modal[hidden] { display: none; }
.p-recruit__movie-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 16, 0.88);
}
.p-recruit__movie-modal-body {
	position: relative;
	/* 縦長動画は 82svh に収まる幅まで絞る＝上下がはみ出さない */
	width: min(1080px, 100%, calc(82svh * var(--movie-ar, 1.7778)));
	animation: recruitMovieIn 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes recruitMovieIn {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
.p-recruit__movie-modal-video {
	display: block;
	width: 100%;
	max-height: 82svh;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* 閉じるボタン: 画面右上に固定のシンプルな✕（装飾・アニメなし）
 * 中身はSVG。flexで中央に置く（ボタンの既定の中央寄せに頼らない） */
.p-recruit__movie-modal-close {
	position: fixed;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	cursor: pointer;
}
.p-recruit__movie-modal-close svg {
	display: block;
	width: 20px;
	height: 20px;
}
/* モーダル表示中はヘッダーを消す。SPのハンバーガーが閉じるボタンと同じ位置にあり、
 * オーバーレイ越しに透けて重なって見えるため（クリックもモーダル側に通す） */
html.is-movie-modal-open .l-header {
	visibility: hidden;
	pointer-events: none;
}
@media screen and (max-width: 768px) {
	.p-recruit__movie {
		padding: 64px 20px 16px; /* 下: 青緑の面(-10px)が次セクションに隠れない分を確保 */
		--movie-ar: var(--movie-ar-sp);
		--movie-max-h: 72svh;
	}
	.p-recruit__movie-title-eng { font-size: 32px; }
	.p-recruit__movie-title { margin-bottom: 24px; }
	.p-recruit__movie-open::before { inset: 10px -10px -10px 10px; border-radius: 10px; }
	.p-recruit__movie-thumb { border-radius: 10px; }
	.p-recruit__movie-play { width: 64px; height: 64px; }
	.p-recruit__movie-play svg { width: 30px; height: 30px; margin-left: 3px; }
	.p-recruit__movie-caption { right: 12px; bottom: 8px; font-size: 11px; }
	.p-recruit__movie-modal { padding: 12px; }
}

/* =========================================================
 * エントリーフォームへの追従CTA（RECRUITページ専用）
 * TOPの l-floating と同じ考え方: FVを抜けたら出て、フッターに入ったら消える。
 * ボタンの見た目は共通コンポーネント(btn-orange / btn-main)をそのまま使う。
 * ========================================================= */
.p-recruit__entry-cta {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity 0.5s ease, visibility 0s linear 0.5s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-recruit__entry-cta.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 0.5s ease, visibility 0s linear 0s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* フッター（＝ページ下部のCONTACT導線）に入ったら引っ込める。is-visible より後に定義して上書き */
.p-recruit__entry-cta.is-visible.is-footer-hide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(16px);
	transition: opacity 0.5s ease, visibility 0s linear 0.5s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* サイズは共通ボタン(btn-main)の 4/3 倍。文字・余白・矢印・影をすべて同率で上げて
 * 見た目の比率を保つ（矢印は "→" の文字なので font-size に追従する） */
.p-recruit__entry-cta-btn {
	gap: 11px;
	padding: 19px 35px 19px 45px;
	font-size: 21px;
	/* 濃色セクションの上でも浮くように影を強めに */
	box-shadow: 0 13px 37px rgba(43, 37, 37, 0.28);
}

/* SP: 下部に固定した横長バー（親指の届く位置） */
@media screen and (max-width: 768px) {
	.p-recruit__entry-cta {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	.p-recruit__entry-cta-btn {
		width: 100%;
		justify-content: center;
		padding: 20px 26px;
		font-size: 20px;
	}
}