/* ==========================================================================
   採用ページ（/recruit/）の動き 2026-11-08 試作
   ・<html> に .is-ranim が付いたときだけ隠す（JS が動かない・動きを減らす設定の端末では最初から全部見える）
   ・もともとの transform を壊さないよう、既存の要素は translate / scale / rotate（個別プロパティ）で動かす
   ・r- で始まるクラスは recruit-anim.js が付ける
   ========================================================================== */

/* ---------- 1. ヒーロー（JS より先に CSS だけで隠しておく） ---------- */
.is-ranim :is(.page-recruit__top, .page-recruit__top-sp) > img {
	clip-path: inset(0 100% 0 0);
	transform: scale(1.14);
	transform-origin: 20% 50%;
}

.is-ranim :is(.page-recruit__top, .page-recruit__top-sp) :is(.title-helvetica, .title-antro-wrap, .sub-title):not(.r-ready) {
	opacity: 0;
}

.is-ranim :is(.page-recruit__top, .page-recruit__top-sp) :is(.braemcrum, .btn-2025, .image-top__member img) {
	opacity: 0;
}

/* 写真：左から幕が開くように現れ、少し引いて止まる */
.is-ranim .r-hero.is-play > img {
	clip-path: inset(0 0 0 0);
	transform: none;
	transition: clip-path 1.5s cubic-bezier(.77, 0, .18, 1), transform 2.6s cubic-bezier(.19, 1, .22, 1);
}

/* 文字：1文字ずつ下から組み上がる（--d は JS） */
.is-ranim .r-ch {
	display: inline-block;
	opacity: 0;
	translate: 0 .65em;
	rotate: 10deg;
	filter: blur(6px);
	transition: opacity .5s ease, translate 1s cubic-bezier(.19, 1, .22, 1), rotate 1s cubic-bezier(.19, 1, .22, 1), filter .6s ease;
	transition-delay: var(--d, 0ms);
}

.is-ranim .r-ch--soft {
	translate: 0 .35em;
	rotate: none;
}

.is-ranim .r-hero.is-play .r-ch,
.is-ranim .r-chars.is-in .r-ch {
	opacity: 1;
	translate: none;
	rotate: none;
	filter: none;
}

/* 「at」：手で書いたように左から現れる（mix-blend-mode を壊さないよう、外枠ではなく2枚それぞれを切り抜く） */
.is-ranim .r-hero .title-antro {
	clip-path: inset(-40% 115% -40% -40%);
	transition: clip-path 1s cubic-bezier(.65, 0, .35, 1) var(--d, 0ms);
}

.is-ranim .r-hero.is-play .title-antro {
	clip-path: inset(-40% -40% -40% -40%);
}

.is-ranim .r-hero.is-done .title-antro {
	clip-path: none;
	transition: none;
}

/* 「ヒト」の下にピンクの線が引かれる */
.is-ranim .r-hl {
	position: relative;
}

.is-ranim .r-hl::after {
	content: '';
	position: absolute;
	left: 0;
	right: .45em;
	bottom: -.28em;
	height: 2px;
	border-radius: 2px;
	background: #fc5fb2;
	scale: 0 1;
	transform-origin: left center;
	transition: scale .7s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms);
}

.is-ranim .r-hero.is-play .r-hl::after {
	scale: 1 1;
}

/* 2025・パンくず */
.is-ranim .r-hero.is-play .btn-2025 {
	opacity: 1;
	scale: 1;
	transition: opacity .4s ease 1.9s, scale .7s cubic-bezier(.34, 1.56, .64, 1) 1.9s;
}

.is-ranim .r-hero .btn-2025 {
	scale: .4;
}

.is-ranim .r-hero .braemcrum {
	translate: 0 10px;
}

.is-ranim .r-hero.is-play .braemcrum {
	opacity: 1;
	translate: none;
	transition: opacity .8s ease 2s, translate 1s cubic-bezier(.19, 1, .22, 1) 2s;
}

/* 線画の2人：歩いて入ってくる → その後はゆっくり呼吸 */
.is-ranim .r-hero.is-play .image-top__member img {
	animation: r-walk 1.9s linear 1.45s both;
}

.is-ranim .r-hero.is-done.is-vis .image-top__member {
	animation: r-breathe 5s ease-in-out infinite;
}

/* ---------- 2. 共通：下からふわっと（--i で時間差・--base で開始を遅らせる） ---------- */
.is-ranim .r-up {
	opacity: 0;
	translate: 0 34px;
	transition: opacity .8s ease, translate 1.1s cubic-bezier(.19, 1, .22, 1);
	transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 100ms);
}

.is-ranim .r-right {
	opacity: 0;
	translate: 46px 0;
	transition: opacity .8s ease, translate 1.1s cubic-bezier(.19, 1, .22, 1);
	transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 110ms);
}

.is-ranim :is(.r-up, .r-right).is-in {
	opacity: 1;
	translate: none;
}

/* 区切り線が左から引かれる */
.is-ranim .r-line {
	scale: 0 1;
	transform-origin: left center;
	transition: scale 1.4s cubic-bezier(.77, 0, .18, 1) var(--d, 0ms);
}

.is-ranim .r-line.is-in {
	scale: 1 1;
}

/* 項目の下線が左から引かれる（元の線は JS で透明にして、同じ色・太さで描き直す） */
.is-ranim .r-uline {
	position: relative;
}

.is-ranim .r-uline::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--ulw, 1px) * -1);
	height: var(--ulw, 1px);
	background: var(--ulc, #222);
	scale: 0 1;
	transform-origin: left center;
	transition: scale 1.1s cubic-bezier(.77, 0, .18, 1);
	transition-delay: calc(var(--base, 0ms) + var(--i, 0) * 110ms + 250ms);
}

.is-ranim .r-uline.is-in::after {
	scale: 1 1;
}

/* 1文字ずつに分けるのは画面に入る直前なので、それまでは見出しごと隠しておく */
.is-ranim :is(.r-chars, .r-sweep):not(.r-split) {
	opacity: 0;
}

/* ---------- 3. 大見出し：ピンク→青緑の帯が1行ずつ走り、抜けたあとに文字が残る ---------- */
.is-ranim .r-sweep .r-c {
	opacity: 0;
}

.is-ranim .r-sweep.is-in .r-c {
	opacity: 1;
	transition: opacity .2s ease var(--cd, 0ms);
}

.r-bar {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(90deg, #fc5fb2 0%, #9a7cff 50%, #02b5b4 100%);
	transform: scaleX(0);
	transform-origin: 0 50%;
	animation: r-bar .95s cubic-bezier(.77, 0, .18, 1) var(--ld, 0ms) both;
}

/* ---------- 4. 画像の出方 ---------- */
/* 4-1. 写真：左から幕が開く＋少し引く */
.is-ranim .r-wipe {
	clip-path: inset(0 100% 0 0);
	scale: 1.1;
	transition: clip-path 1.3s cubic-bezier(.77, 0, .18, 1), scale 2.2s cubic-bezier(.19, 1, .22, 1);
	transition-delay: var(--d, 0ms);
}

.is-ranim .r-wipe.is-in {
	clip-path: inset(0 0 0 0);
	scale: 1;
}

/* 4-2. 線画・筆文字：にじむように描かれていく（横 / 縦） */
.is-ranim .r-ink {
	-webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: 100% 0;
	mask-position: 100% 0;
	transition: -webkit-mask-position 2s cubic-bezier(.65, 0, .35, 1), mask-position 2s cubic-bezier(.65, 0, .35, 1);
	transition-delay: var(--d, 0ms);
}

.is-ranim .r-ink--v {
	-webkit-mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
	mask-image: linear-gradient(180deg, #000 42%, transparent 58%);
	-webkit-mask-size: 100% 260%;
	mask-size: 100% 260%;
	-webkit-mask-position: 0 100%;
	mask-position: 0 100%;
}

.is-ranim .r-ink.is-in {
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
}

.is-ranim .r-ink.is-done {
	-webkit-mask-image: none;
	mask-image: none;
}

/* 4-3. 人物の線画：歩いて入ってくる（--wx：どちらから来るか） */
.is-ranim .r-walk {
	opacity: 0;
}

.is-ranim .r-walk.is-in {
	animation: r-walk 1.9s linear var(--d, 0ms) both;
}

/* 4-4. ポンと出る */
.is-ranim .r-pop {
	opacity: 0;
	scale: .82;
	translate: 0 12px;
	transition: opacity .5s ease, scale .8s cubic-bezier(.34, 1.56, .64, 1), translate .8s cubic-bezier(.34, 1.56, .64, 1);
	transition-delay: var(--d, 0ms);
}

.is-ranim .r-pop-s {
	opacity: 0;
	scale: .2;
	transition: opacity .3s ease, scale .8s cubic-bezier(.34, 1.8, .64, 1);
	transition-delay: var(--d, 0ms);
}

.is-ranim :is(.r-pop, .r-pop-s).is-in {
	opacity: 1;
	scale: 1;
	translate: none;
}

/* 4-5. ピラミッド：下から色が満ちる */
.is-ranim .r-fill {
	clip-path: inset(100% 0 0 0);
	transition: clip-path 1.6s cubic-bezier(.65, 0, .35, 1) .1s;
}

.is-ranim .is-in > .r-fill,
.is-ranim .r-fill.is-in {
	clip-path: inset(0 0 0 0);
}

/* 4-6. 脳のイラストの後ろで、ピンクと青がゆっくり呼吸する */
.is-ranim .r-glow {
	position: relative;
	z-index: 0;
}

.is-ranim .r-glow::before,
.is-ranim .r-glow::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 4%;
	width: 40%;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(42px);
	opacity: 0;
	pointer-events: none;
}

/* 左の脳＝仕事（青）、右の脳＝家族（ピンク）。2026-11-08 に絵の左右を入れ替えたのに合わせた */
.is-ranim .r-glow::before {
	left: 12%;
	background: #33d3ff;
}

.is-ranim .r-glow::after {
	left: 47%;
	background: #ff5fd2;
}

.is-ranim .r-glow.is-in.is-vis::before {
	animation: r-glow 3.4s ease-in-out .8s infinite alternate both;
}

.is-ranim .r-glow.is-in.is-vis::after {
	animation: r-glow 3.4s ease-in-out 2.5s infinite alternate both;
}

/* ---------- 5. LIFE RICH ＝ WORK RICH × FAMILY RICH の掛け算 ---------- */
.is-ranim .r-eq .r-eq-l {
	opacity: 0;
	translate: -110px 0;
}

.is-ranim .r-eq .r-eq-r {
	opacity: 0;
	translate: 110px 0;
}

.is-ranim .r-eq .r-eq-x {
	position: relative;
	opacity: 0;
	scale: 0;
	rotate: -270deg;
}

.is-ranim .r-eq .r-eq-eq {
	opacity: 0;
	translate: -24px 0;
}

.is-ranim .r-eq .r-eq-life {
	opacity: 0;
	scale: .55;
	filter: blur(10px);
}

.is-ranim .r-eq--sp .r-eq-life {
	translate: 0 -28px;
}

.is-ranim .r-eq.is-in :is(.r-eq-l, .r-eq-r) {
	opacity: 1;
	translate: none;
	transition: opacity .35s ease, translate .75s cubic-bezier(.5, 1.7, .5, 1);
}

.is-ranim .r-eq.is-in .r-eq-x {
	opacity: 1;
	scale: 1;
	rotate: none;
	transition: opacity .2s ease .55s, scale .7s cubic-bezier(.34, 1.9, .64, 1) .55s, rotate .7s cubic-bezier(.19, 1, .22, 1) .55s;
}

/* × がぶつかった瞬間の波紋 */
.is-ranim .r-eq .r-eq-x::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 1.6em;
	height: 1.6em;
	margin: -.8em 0 0 -.8em;
	border-radius: 50%;
	border: 2px solid #fc5fb2;
	opacity: 0;
	pointer-events: none;
}

.is-ranim .r-eq.is-in .r-eq-x::after {
	animation: r-ring .9s cubic-bezier(.19, 1, .22, 1) .62s both;
}

.is-ranim .r-eq.is-in .r-eq-eq {
	opacity: 1;
	translate: none;
	transition: opacity .4s ease .95s, translate .6s cubic-bezier(.19, 1, .22, 1) .95s;
}

.is-ranim .r-eq.is-in .r-eq-life {
	opacity: 1;
	scale: 1;
	translate: none;
	filter: none;
	transition: opacity .6s ease 1.05s, scale 1s cubic-bezier(.34, 1.4, .64, 1) 1.05s, translate 1s cubic-bezier(.19, 1, .22, 1) 1.05s, filter .7s ease 1.05s;
}

/* LIFE RICH の文字に、ピンク→青緑の光が一度だけ走る */
.is-ranim .r-shine-text {
	background: linear-gradient(100deg, #222 0 40%, #fc5fb2 47%, #9a7cff 50%, #02b5b4 53%, #222 60% 100%) 100% 0 / 300% 100% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.is-ranim .r-eq.is-in .r-shine-text {
	animation: r-shine 1.8s cubic-bezier(.65, 0, .35, 1) 1.5s both;
}

/* ---------- 6. FAMILY RICH の5項目：黒いラベルが伸び、文字が続く ---------- */
.is-ranim .r-li .label {
	scale: 0 1;
	transform-origin: left center;
	transition: scale .6s cubic-bezier(.77, 0, .18, 1) calc(var(--i, 0) * 120ms + 200ms);
}

.is-ranim .r-li .value {
	opacity: 0;
	translate: -14px 0;
	transition: opacity .5s ease, translate .8s cubic-bezier(.19, 1, .22, 1);
	transition-delay: calc(var(--i, 0) * 120ms + 500ms);
}

.is-ranim .r-li.is-in .label {
	scale: 1 1;
}

.is-ranim .r-li.is-in .value {
	opacity: 1;
	translate: none;
}

/* ---------- 7. 数字：カウントアップと回る数字 ---------- */
.r-num {
	display: inline-block;
	text-align: right;
}

.r-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.r-odo {
	display: inline-block;
	height: 1em;
	overflow: hidden;
	vertical-align: top;
	line-height: 1;
	text-align: center;
}

.r-odo__reel {
	display: block;
	transition: transform 1.7s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms);
}

.r-odo__reel > r-d {
	display: block;
	height: 1em;
	line-height: 1;
}

.is-in .r-odo__reel {
	transform: translateY(calc(var(--n, 0) * -1em));
}

/* ---------- 8. 福利厚生のカード：配られるように現れ、マウスで3Dに傾く ---------- */
.r-card {
	display: inline-block;
	position: relative;
	line-height: 0;
	transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
	transition: transform .6s cubic-bezier(.19, 1, .22, 1);
}

.r-card.is-hover {
	--sc: 1.04;
	transition: transform .15s ease-out;
}

.is-ranim .r-card > img {
	opacity: 0;
	transform: perspective(700px) translate3d(50px, 24px, -120px) rotateY(-48deg) rotateX(14deg);
	transition: opacity .6s ease var(--d, 0ms), transform 1.2s cubic-bezier(.2, 1.15, .3, 1) var(--d, 0ms);
}

.is-ranim .is-in .r-card > img {
	opacity: 1;
	transform: none;
}

.r-shine {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	overflow: hidden;
	pointer-events: none;
}

.r-shine::before {
	content: '';
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: -70%;
	width: 45%;
	background: linear-gradient(100deg, transparent 0%, rgb(255 255 255 / 65%) 50%, transparent 100%);
	transform: skewX(-18deg);
	opacity: 0;
}

.is-ranim .is-in .r-shine::before {
	animation: r-card-shine 1.1s cubic-bezier(.65, 0, .35, 1) calc(var(--d, 0ms) + 650ms);
}

.r-card.is-hover .r-shine::before {
	left: calc(var(--gx, 50%) - 22%);
	opacity: .9;
	animation: none;
	transition: left .12s linear, opacity .2s ease;
}

/* ---------- 9. 言葉に合わせた小ネタ ---------- */
/* 「▼」がゆっくり弾む */
.is-ranim .r-bob.is-vis {
	animation: r-bob 1.8s ease-in-out infinite;
}

/* PROFESSIONAL：筆記体が左から書かれていく（横の流れは JS が translate で付ける） */
.is-ranim .r-write {
	clip-path: inset(-30% 100% -30% 0);
	transition: clip-path 1.8s cubic-bezier(.65, 0, .35, 1) .2s;
}

.is-ranim .r-write.is-in {
	clip-path: inset(-30% -10% -30% 0);
}

/* カジュアル面談の背景：はみ出しを隠す（拡大と縦のずれは JS） */
.is-ranim .r-cta {
	overflow: hidden;
}

/* 黒い丸ボタン：カーソルに吸い寄せられる（--mx / --my は JS） */
.is-ranim .r-magnet {
	translate: var(--mx, 0) var(--my, 0);
	transition: translate .35s cubic-bezier(.19, 1, .22, 1);
}

/* ---------- keyframes ---------- */
@keyframes r-walk {
	0% { opacity: 0; translate: var(--wx, 80px) 0; }
	14% { opacity: 1; translate: calc(var(--wx, 80px) * .82) -6px; }
	28% { translate: calc(var(--wx, 80px) * .64) 0; }
	42% { translate: calc(var(--wx, 80px) * .47) -6px; }
	56% { translate: calc(var(--wx, 80px) * .31) 0; }
	70% { translate: calc(var(--wx, 80px) * .17) -5px; }
	85% { translate: calc(var(--wx, 80px) * .06) 0; }
	100% { opacity: 1; translate: none; }
}

@keyframes r-breathe {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -5px; }
}

@keyframes r-bar {
	0% { transform: scaleX(0); transform-origin: 0 50%; }
	46% { transform: scaleX(1); transform-origin: 0 50%; }
	54% { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

@keyframes r-glow {
	from { opacity: .12; transform: scale(.85); }
	to { opacity: .6; transform: scale(1.1); }
}

@keyframes r-ring {
	0% { opacity: .9; transform: scale(.2); }
	100% { opacity: 0; transform: scale(2.6); }
}

@keyframes r-shine {
	from { background-position: 100% 0; }
	to { background-position: 0 0; }
}

@keyframes r-card-shine {
	0% { left: -70%; opacity: 1; }
	100% { left: 130%; opacity: 1; }
}

@keyframes r-bob {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 5px; }
}

/* 動きを減らす設定の端末：JS が .is-ranim を付けないので何も隠れない。念のためここでも止める */
@media (prefers-reduced-motion: reduce) {
	.is-ranim * {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   採用ページのローディング 2026-11-08
   夜色の地で、ピンク（家族）と青（仕事）の淡い光がゆっくり寄ってひとつになる。
   その動きに合わせて「仕事と家族の両方に／誇りを持てる人生を／創りにいく会社。」を1行ずつ見せ、
   最後はふちのぼやけた白い光がふくらんでページへつながる。
   ・<html> に .is-ranim と .is-rload が両方付いたときだけ出す（セッション中の初回だけ・動きを減らす設定では出さない）
   ・制御は page-recruit.php のローディング直後の小さなスクリプト。画像は使わない
   ========================================================================== */
.r-loader {
	display: none;
}

.is-ranim.is-rload .r-loader {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	--u: 1vmin;
	--pink: #ff9bd4;
	--teal: #8fdcff;
	color: #f4f0f7;
	background: radial-gradient(ellipse 90% 70% at 50% 38%, #2b2734 0%, #201d27 50%, #19171e 100%);
}

/* 枠の大きさ基準の単位に対応していれば使う（ページでは枠が無いので画面基準と同じ） */
@supports (width: 1cqmin) {
	.is-ranim.is-rload .r-loader {
		--u: 1cqmin;
	}
}

/* 出ている間はページを動かさない */
.is-ranim.is-rload body {
	overflow: hidden;
}

.rl-scene {
	position: absolute;
	inset: 0;
}

/* 後ろにうっすら漂うピンクと青の光 */
.rl-scene::before,
.rl-scene::after {
	content: '';
	position: absolute;
	top: calc(50% - var(--u) * 15);
	width: calc(var(--u) * 70);
	aspect-ratio: 1;
	margin-top: calc(var(--u) * -35);
	border-radius: 50%;
	pointer-events: none;
	opacity: .16;
	animation: rl-ambient 5s ease-in-out infinite alternate;
}

.rl-scene::before {
	left: calc(50% - var(--u) * 52);
	background: radial-gradient(circle, var(--pink) 0%, transparent 65%);
}

.rl-scene::after {
	left: calc(50% - var(--u) * 18);
	background: radial-gradient(circle, var(--teal) 0%, transparent 65%);
	animation-delay: -2.5s;
}

/* 光の玉：回りながらゆっくり寄っていく */
.rl-stage {
	position: absolute;
	left: 50%;
	top: calc(50% - var(--u) * 15);
	z-index: 1;
	width: calc(var(--u) * 44);
	aspect-ratio: 1;
	translate: -50% -50%;
}

.rl-spin {
	position: absolute;
	inset: 0;
	animation: rl-spin 1.35s cubic-bezier(.45, .05, .25, 1) both;
}

.rl-orb {
	--r: calc(var(--u) * 19);
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--u) * 7);
	aspect-ratio: 1;
	margin: calc(var(--u) * -3.5) 0 0 calc(var(--u) * -3.5);
}

.rl-orb i {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 38%, rgb(255 255 255 / 85%) 0 10%, var(--c) 55%, rgb(255 255 255 / 0) 100%);
	box-shadow: 0 0 calc(var(--u) * 4) calc(var(--u) * .6) var(--c);
	filter: blur(.4px);
}

.rl-orb::before {
	content: '';
	position: absolute;
	inset: -110%;
	border-radius: 50%;
	background: radial-gradient(circle, var(--c) 0%, transparent 62%);
	opacity: .32;
}

.rl-orb--fam {
	--c: var(--pink);
	animation: rl-fam 1.35s cubic-bezier(.45, .05, .3, 1) both;
}

.rl-orb--work {
	--c: var(--teal);
	animation: rl-work 1.35s cubic-bezier(.45, .05, .3, 1) both;
}

/* ひとつになる：輪や強い閃光は出さず、光がふわっとふくらむ */
.rl-flash,
.rl-merge {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--u) * 12);
	aspect-ratio: 1;
	margin: calc(var(--u) * -6) 0 0 calc(var(--u) * -6);
	border-radius: 50%;
	pointer-events: none;
}

.rl-flash {
	opacity: 0;
	background: radial-gradient(circle, rgb(255 255 255 / 55%) 0 25%, rgb(255 255 255 / 0) 70%);
	animation: rl-flash 1.2s ease-out 1.25s forwards;
}

.rl-merge {
	opacity: 0;
	scale: 0;
	background: radial-gradient(circle at 40% 38%, #fff 0 10%, #ffc6e6 34%, #cbb9ff 62%, #a5e3ff 100%);
	box-shadow: 0 0 calc(var(--u) * 7) calc(var(--u) * 1.2) rgb(200 175 255 / 45%);
	animation: rl-merge 1.1s cubic-bezier(.22, 1, .36, 1) 1.25s both, rl-breathe 3.2s ease-in-out 2.35s infinite;
}

/* コピーはこの一文だけ。玉の動きに合わせて1行ずつ出し、そろったあとも読み切れるだけ見せる */
.rl-text {
	position: absolute;
	left: 50%;
	top: calc(50% + var(--u) * 9);
	z-index: 1;
	translate: -50% 0;
	text-align: center;
	white-space: nowrap;
}

.rl-copy {
	margin: 0;
	display: grid;
	justify-items: center;
	font: 400 max(18px, calc(var(--u) * 2.9))/2.05 "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	letter-spacing: .18em;
	padding-left: .18em;
	color: #f4f0f7;
}

.rl-copy span {
	opacity: 0;
}

.rl-copy .l1 {
	animation: rl-msg 1.2s cubic-bezier(.22, 1, .36, 1) .3s both;
}

.rl-copy .l2 {
	animation: rl-msg 1.2s cubic-bezier(.22, 1, .36, 1) 1.3s both;
}

.rl-copy .l3 {
	animation: rl-msg 1.3s cubic-bezier(.22, 1, .36, 1) 2.15s both;
}

/* 下の細い線（進み具合）と SKIP */
.rl-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 2px;
	opacity: .7;
}

.rl-bar i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #ff9bd4, #c3b1ff, #8fdcff);
	transform: scaleX(0);
	transform-origin: left center;
}

.rl-skip {
	position: absolute;
	right: max(16px, calc(var(--u) * 3));
	top: max(16px, calc(var(--u) * 3));
	z-index: 3;
	font: 600 11px/1 "Outfit", sans-serif;
	letter-spacing: .2em;
	color: #fff;
	opacity: .35;
}

/* 出ていく：合わさった光が、ふちのぼやけた白い光になって画面いっぱいに広がり、そのままページへ */
.rl-light {
	position: absolute;
	left: 50%;
	top: calc(50% - var(--u) * 15);
	z-index: 2;
	width: calc(var(--u) * 20);
	aspect-ratio: 1;
	margin: calc(var(--u) * -10) 0 0 calc(var(--u) * -10);
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 42%, rgb(255 255 255 / 0) 70%);
	opacity: 0;
	scale: 0;
	pointer-events: none;
}

.r-loader.is-out .rl-light {
	opacity: 1;
	scale: 24;
	transition: scale 1s cubic-bezier(.55, 0, .3, 1), opacity .25s ease;
}

.r-loader.is-out .rl-bar,
.r-loader.is-out .rl-skip {
	opacity: 0;
	transition: opacity .25s ease;
}

.r-loader.is-out {
	opacity: 0;
	pointer-events: none;
	transition: opacity .55s ease .85s;
}

@keyframes rl-spin {
	from { rotate: -30deg; }
	to { rotate: 170deg; }
}

@keyframes rl-fam {
	0% { translate: calc(var(--r) * -1) 0; opacity: 0; }
	12% { opacity: 1; }
	92% { opacity: 1; }
	100% { translate: 0 0; opacity: 0; }
}

@keyframes rl-work {
	0% { translate: var(--r) 0; opacity: 0; }
	12% { opacity: 1; }
	92% { opacity: 1; }
	100% { translate: 0 0; opacity: 0; }
}

@keyframes rl-flash {
	0% { opacity: .9; scale: .5; }
	100% { opacity: 0; scale: 2.6; }
}

@keyframes rl-merge {
	0% { opacity: 0; scale: .3; filter: blur(8px); }
	60% { opacity: 1; scale: 1.08; filter: blur(0); }
	100% { opacity: 1; scale: 1; filter: none; }
}

@keyframes rl-breathe {
	0%, 100% { scale: 1; }
	50% { scale: 1.06; }
}

@keyframes rl-ambient {
	from { translate: calc(var(--u) * -2) calc(var(--u) * 1); scale: .95; }
	to { translate: calc(var(--u) * 3) calc(var(--u) * -2); scale: 1.08; }
}

@keyframes rl-msg {
	from { opacity: 0; translate: 0 .35em; filter: blur(5px); }
	to { opacity: 1; translate: none; filter: none; }
}

/* ヒーローのラベル（● 随時募集中／RECRUITING PAGE ─ 採用専用ページ）：開幕の最後にふわっと出る（2026-11-08） */
.is-ranim :is(.page-recruit__top, .page-recruit__top-sp) .r-meta {
	opacity: 0;
	translate: 0 8px;
}

.is-ranim .r-hero.is-play .r-meta {
	opacity: 1;
	translate: none;
	transition: opacity .8s ease 2.15s, translate 1s cubic-bezier(.19, 1, .22, 1) 2.15s;
}