/* 駅広告から来た人だけのあいさつ（template-parts/recruit-station-intro.php）。prefix rsi- */
.rsi, .rsi-hello { display: none; }
html.rsi-on .rsi { display: block; }
/* 駅広告から来た人には通常の新卒採用ページの中身を出さない（05 の導線でクエリパラメタなしのページへ移る） */
html.rsi-on .rsi ~ * { display: none; }
html.rsi-on[data-rsi-face="02-097"] .rsi-hello[data-face="02-097"],
html.rsi-on[data-rsi-face="02-102"] .rsi-hello[data-face="02-102"],
html.rsi-on[data-rsi-face="02-115"] .rsi-hello[data-face="02-115"],
html.rsi-on[data-rsi-face="default"] .rsi-hello[data-face="default"] { display: block; }

.rsi { overflow-x: clip; color: var(--rc-ink); word-break: auto-phrase; }
.rsi-hello { background: var(--rc-white); }
.rsi-hello__in { min-height: calc(100vh - 74px); min-height: calc(100svh - 74px); display: flex; flex-direction: column; padding-top: 20px; padding-bottom: 20px; }
.rsi-hello__label { font-size: 12px; font-weight: 700; color: var(--rc-red); }
.rsi-hello__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 0; }
.rsi-hello .rsi-figure { align-self: center; }
.rsi-hello__img { display: block; width: auto; max-width: 100%; height: auto; max-height: 34vh; max-height: 34svh; margin: 0 auto; object-fit: contain; }
.rsi-hello__text { display: flex; flex-direction: column; gap: 14px; }
.rsi-hello__title { font-size: 34px; font-weight: 900; line-height: 1.4; }
.rsi-hello__title span { color: var(--rc-red); }
.rsi-hello__lead { color: var(--rc-gray); font-size: 15px; font-weight: 500; line-height: 1.7; }
.rsi-hello__scroll { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; color: var(--rc-red); font-family: var(--rc-en); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.rsi-hello__scroll span { font-family: var(--rc-jp); font-size: 16px; letter-spacing: 0; }

.rsi-bubble { min-width: 0; overflow-wrap: anywhere; margin: 0; padding: 12px 16px; background: var(--rc-white); border: 1.5px solid var(--rc-ink); border-radius: 16px; color: var(--rc-ink); font-size: 14px; font-weight: 700; line-height: 1.65; white-space: pre-line; cursor: default; }
.rsi-bubble.is-ready { position: relative; }
.rsi-ghost { visibility: hidden; }
.rsi-typed { position: absolute; inset: 0; padding: inherit; white-space: pre-line; }
.rsi-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em; background: var(--rc-red); animation: rsi-blink 1s steps(1) infinite; }
.rsi-caret.is-done { animation: rsi-blink 1s steps(1) 1 forwards, rsi-out 0s 1.2s forwards; }
@keyframes rsi-blink { 50% { opacity: 0; } }
@keyframes rsi-out { to { visibility: hidden; } }

.rsi-block { background: var(--rc-white); padding: 56px 0; }
.rsi-block--off { background: var(--rc-off); }
.rsi-block--dark { background: var(--rc-ink); color: var(--rc-white); }
.rsi-block__in { display: flex; flex-direction: column; gap: 24px; }
.rsi-side { display: flex; align-items: center; gap: 14px; }
.rsi-side .rsi-figure { flex: none; width: 112px; height: 104px; }
.rsi-side__img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rsi-side .rsi-bubble { flex: 1; }
.rsi-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.rsi-label { display: flex; gap: 10px; color: var(--rc-red); font-size: 14px; font-weight: 700; }
.rsi-label span { font-family: var(--rc-en); letter-spacing: .04em; }
.rsi-block--dark .rsi-label { color: var(--rc-white); }
.rsi-block--dark .rsi-label span { color: var(--rc-red); }
.rsi-title { font-size: 26px; font-weight: 700; line-height: 1.5; }
.rsi-body { color: var(--rc-gray); font-size: 15px; line-height: 1.9; }
.rsi-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.rsi-chips li { padding: 6px 12px; border: 1px solid var(--rc-red); color: var(--rc-red); font-size: 13px; font-weight: 700; }
.rsi-points { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.rsi-points li { position: relative; padding: 14px 16px 14px 32px; background: var(--rc-white); border: 1px solid var(--rc-line); font-size: 14px; font-weight: 500; line-height: 1.7; }
.rsi-points li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 4px; height: 22px; background: var(--rc-red); }
.rsi-aside { color: var(--rc-red); font-size: 16px; font-weight: 700; }
.rsi-qa { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.rsi-qa > div { padding: 18px 20px; background: var(--rc-white); border: 1px solid var(--rc-line); }
.rsi-qa dt { font-size: 16px; font-weight: 700; line-height: 1.6; }
.rsi-qa dt::before { content: "Q. "; color: var(--rc-red); }
.rsi-qa dd { margin: 8px 0 0; color: var(--rc-gray); font-size: 15px; line-height: 1.8; }
.rsi-qa dd::before { content: "A. "; }
.rsi-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.rsi-stats li { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 16px; background: var(--rc-white); border: 1px solid var(--rc-line); }
.rsi-stats li:nth-child(-n+2) { grid-column: 1 / -1; }
.rsi-stats__k { color: var(--rc-red); font-size: 12px; font-weight: 700; }
.rsi-stats__v { font-family: var(--rc-en); font-size: 26px; font-weight: 700; line-height: 1.2; }
.rsi-stats__v small { margin-left: 2px; font-family: var(--rc-jp); font-size: 12px; font-weight: 700; }
.rsi-stats__v--jp { font-family: var(--rc-jp); font-size: 19px; line-height: 1.5; }
.rsi-stats__n { color: var(--rc-gray); font-size: 11.5px; line-height: 1.6; }
.rsi-num { font-variant-numeric: tabular-nums; }
.rsi-more-label { color: var(--rc-red); font-size: 15px; font-weight: 900; }
.rsi-chips--plain li { border-color: var(--rc-line); background: var(--rc-white); color: var(--rc-ink); font-weight: 500; }
.rsi-note { color: var(--rc-gray); font-size: 11.5px; line-height: 1.6; }
.rsi-cheer { padding-left: 14px; border-left: 4px solid var(--rc-red); font-size: 17px; font-weight: 700; line-height: 1.7; }
.rsi-actions { display: flex; flex-direction: column; gap: 12px; }
.rsi-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 20px 0 24px; border: 1px solid var(--rc-white); color: var(--rc-white); font-size: 15px; font-weight: 700; transition: opacity .2s; }
.rsi-btn:hover { opacity: .85; }
.rsi-btn--primary { background: var(--rc-red); border-color: var(--rc-red); }
.rsi-btn .rc-arrow { width: 20px; height: 12px; flex: none; }
.rsi-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); color: var(--rc-white); font-size: 14px; font-weight: 700; }
.rsi-more .rc-arrow { width: 20px; height: 12px; flex: none; }

/* あいさつの登場: 絵 → 見出し →（吹き出しの打ち込みは JS）→ 説明文 */
html.rsi-on .rsi-hello__title { animation: rsi-wipe .45s .5s cubic-bezier(.16, 1, .3, 1) both; }
html.rsi-on .rsi-hello__lead, html.rsi-on .rsi-hello__scroll { animation: rsi-in .6s 3.4s ease-out both; }
html.rsi-on .rsi-hello .rsi-bubble { animation: rsi-in .3s 1.15s ease-out both, rsi-reveal 0s 4.5s forwards; }

@keyframes rsi-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* JS が文字を空にするまで（.is-ready）あいさつの吹き出しの文字を隠す。JS が動かなかったときは 4 秒後に全文を出す */
html.rsi-on .rsi-hello .rsi-bubble:not(.is-ready) { color: transparent; }
@keyframes rsi-reveal { to { color: var(--rc-ink); } }

/* 登場（役目: 勢いと重さで熱さを見せる。飾りは足さない）
   0s 絵が手前から叩きつけるように入る → 0.38s 着地で画面が揺れる → 0.5s 見出しがせり上がる → 0.8s「アツビーバー」を押す → 1.3s 吹き出しを打ち込む */
@keyframes rsi-smash { 0% { opacity: 0; transform: translateY(-6%) scale(1.35); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes rsi-shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 3px; } 40% { translate: 5px -3px; } 60% { translate: -3px 2px; } 80% { translate: 2px -1px; } }
@keyframes rsi-wipe { from { clip-path: inset(0 0 100% 0); translate: 0 18px; } to { clip-path: inset(0 0 -10% 0); translate: 0 0; } }
@keyframes rsi-stamp { 0% { opacity: 0; scale: 1.8; filter: blur(6px); } 70% { opacity: 1; scale: .96; filter: blur(0); } 100% { opacity: 1; scale: 1; filter: none; } }
@keyframes rsi-idle { 0%, 100% { scale: 1; } 50% { scale: 1.012; } }
@keyframes rsi-rise { from { opacity: 0; transform: translateY(24px) scale(1.12); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.rsi-figure img { transform-origin: 50% 100%; }
html.rsi-on .rsi-hello__img { animation: rsi-smash .42s cubic-bezier(.16, 1, .3, 1) both, rsi-idle 3.2s 1.4s ease-in-out infinite; }
html.rsi-on .rsi-hello__body { animation: rsi-shake .22s .38s linear; }
html.rsi-on .rsi-hello__title span { display: inline-block; transform-origin: 0 60%; animation: rsi-stamp .38s .8s cubic-bezier(.16, 1, .3, 1) both; }
html.rsi-js .rsi-side:not(.is-in) .rsi-side__img { opacity: 0; }
.rsi-side.is-in .rsi-side__img { animation: rsi-rise .5s cubic-bezier(.16, 1, .3, 1) both, rsi-idle 3.2s 1.8s ease-in-out infinite; }
/* 01〜05 の絵: 登場後にセリフに合わせた一動作（役目: 吹き出しの言葉を体で言う） */
@keyframes rsi-shout { 0%, 100% { scale: 1; translate: 0 0; } 20% { scale: 1.12; translate: 6px 0; } 40% { scale: .98; translate: 0 0; } 62% { scale: 1.1; translate: 5px 0; } 80% { scale: 1; translate: 0 0; } }
@keyframes rsi-drop { 0% { opacity: 0; transform: translateY(-70px); } 55% { opacity: 1; transform: translateY(0) scale(1.06, .86); } 75% { transform: translateY(-6px) scale(.97, 1.04); } 100% { opacity: 1; transform: none; } }
@keyframes rsi-jolt { 0%, 100% { translate: 0 0; } 25% { translate: -4px 0; } 50% { translate: 4px 0; } 75% { translate: -2px 0; } }
@keyframes rsi-bow { 0%, 100% { rotate: 0deg; } 35%, 55% { rotate: 7deg; } }
@keyframes rsi-think { 0%, 100% { rotate: 0deg; } 20% { rotate: -5deg; } 45% { rotate: 4deg; } 70% { rotate: -2deg; } }
@keyframes rsi-spring { 0% { opacity: 0; transform: translateY(46px) scale(.8, 1.1); } 55% { opacity: 1; transform: translateY(-20px) scale(.96, 1.05); } 78% { transform: translateY(3px) scale(1.04, .95); } 100% { opacity: 1; transform: none; } }
@keyframes rsi-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -12px; } }
.rsi-side--shout.is-in .rsi-side__img { transform-origin: 30% 70%; animation: rsi-rise .45s cubic-bezier(.16, 1, .3, 1) both, rsi-shout .7s .5s ease-out, rsi-idle 3.2s 1.8s ease-in-out infinite; }
.rsi-side--stomp.is-in .rsi-side__img { animation: rsi-drop .55s cubic-bezier(.5, 0, .2, 1) both, rsi-jolt .22s .3s linear, rsi-idle 3.2s 1.8s ease-in-out infinite; }
.rsi-side--bow.is-in .rsi-side__img { animation: rsi-rise .45s cubic-bezier(.16, 1, .3, 1) both, rsi-bow .7s .55s ease-in-out, rsi-idle 3.2s 1.8s ease-in-out infinite; }
.rsi-side--think.is-in .rsi-side__img { animation: rsi-rise .45s cubic-bezier(.16, 1, .3, 1) both, rsi-think 1.3s .55s ease-in-out, rsi-idle 3.2s 2.2s ease-in-out infinite; }
@keyframes rsi-beat { 0%, 100% { scale: 1; } 14% { scale: 1.08; } 28% { scale: 1; } 42% { scale: 1.06; } 70% { scale: 1; } }
.rsi-side--beat.is-in .rsi-side__img { animation: rsi-rise .45s cubic-bezier(.16, 1, .3, 1) both, rsi-beat 1s .5s ease-out, rsi-beat 1s 2.6s ease-out, rsi-idle 3.2s 3.8s ease-in-out infinite; }
.rsi-side--spring.is-in .rsi-side__img { animation: rsi-spring .6s cubic-bezier(.2, .8, .3, 1) both, rsi-hop .4s 1.1s ease-out, rsi-idle 3.2s 1.9s ease-in-out infinite; }

/* 05 応援してます: 「これも、あれも！」と畳みかける（JS が .is-in を順に付ける。間隔はだんだん詰める） */
@keyframes rsi-stamp-card { 0% { opacity: 0; transform: scale(1.18) rotate(-2deg); filter: blur(4px); } 60% { opacity: 1; transform: scale(.97); filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes rsi-fire { 0% { opacity: 0; transform: translateY(12px) scale(.75); } 60% { opacity: 1; transform: translateY(-3px) scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes rsi-draw { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
html.rsi-js #rsi-support .rsi-pop:not(.is-in) { opacity: 0; }
#rsi-support .rsi-stats .rsi-pop.is-in, #rsi-support .rsi-more-label.is-in { animation: rsi-stamp-card .4s cubic-bezier(.16, 1, .3, 1) both; }
#rsi-support .rsi-chips .rsi-pop.is-in { animation: rsi-fire .3s cubic-bezier(.16, 1, .3, 1) both; }
#rsi-support .rsi-cheer.is-in { animation: rsi-draw .55s cubic-bezier(.65, 0, .35, 1) both; }

/* 区画のあいだの帯：スクロールに合わせてアツビーバーが歩く（8コマ。コマ送りと位置は js） */
.rsi-walk { --rsi-walk-h: clamp(120px, 17vw, 220px); position: relative; height: calc(var(--rsi-walk-h) + 24px); overflow: hidden; background: var(--rc-white); pointer-events: none; }
.rsi-walk--off { background: var(--rc-off); }
.rsi-walk__actor { position: absolute; left: 0; bottom: 12px; height: var(--rsi-walk-h); aspect-ratio: 462 / 480; opacity: 0; transition: opacity .3s; will-change: transform; }
.rsi-walk.is-ready .rsi-walk__actor { opacity: 1; }
.rsi-walk__sprite { position: absolute; inset: 0; background: url(../img/recruit/beaver/walk.webp) 0 0 / 800% 100% no-repeat; transform-origin: 50% 100%; }
.rsi-walk.is-left .rsi-walk__sprite { transform: scaleX(-1); }
.rsi-walk__shadow { position: absolute; left: 18%; right: 6%; bottom: -8px; height: 16px; background: radial-gradient(closest-side, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0)); }
.rsi-walk.is-left .rsi-walk__shadow { left: 6%; right: 18%; }
/* 止まったら、その場で小さく息をする */
.rsi-walk.is-idle .rsi-walk__sprite { animation: rsi-breathe 1.6s ease-in-out infinite; }
.rsi-walk.is-idle.is-left .rsi-walk__sprite { animation-name: rsi-breathe-left; }
@keyframes rsi-breathe { 50% { transform: scaleY(1.015); } }
@keyframes rsi-breathe-left { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) scaleY(1.015); } }

@media (prefers-reduced-motion: reduce) {
	html.rsi-on .rsi *, html.rsi-on .rsi-hello .rsi-bubble { animation: none !important; }
	html.rsi-js .rsi-side:not(.is-in) .rsi-side__img, html.rsi-js #rsi-support .rsi-pop:not(.is-in) { opacity: 1; }
	html.rsi-on .rsi-bubble[data-type] { color: var(--rc-ink); }
	.rsi-caret { display: none; }
}

@media screen and (min-width: 768px) {
	.rsi-hello__in { min-height: calc(100vh - 86px); min-height: calc(100svh - 86px); padding-top: 32px; padding-bottom: 24px; }
	.rsi-hello__body { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 48px; }
	.rsi-hello .rsi-figure { flex: none; width: 40%; }
	.rsi-hello__img { width: 100%; max-height: 62vh; max-height: 62svh; }
	.rsi-hello__text { flex: 1; min-width: 0; gap: 28px; }
	.rsi-hello__title { font-size: clamp(40px, 4.6vw, 52px); }
	.rsi-hello .rsi-bubble { padding: 18px 24px; font-size: 18px; }
	.rsi-hello__lead { font-size: 18px; }
	.rsi-block { padding: 96px 0; }
	.rsi-block__in { flex-direction: row; align-items: flex-start; gap: 64px; }
	.rsi-side { flex: none; width: 280px; flex-direction: column; align-items: stretch; gap: 20px; }
	.rsi-side .rsi-bubble { flex: none; }
	.rsi-side .rsi-figure { width: 100%; height: 260px; }
	.rsi-title { font-size: 36px; }
	.rsi-body, .rsi-points li { font-size: 16px; }
	.rsi-stats li:nth-child(-n+2) { grid-column: auto; }
	.rsi-stats__v { font-size: 30px; }
	.rsi-stats__n { font-size: 12px; }
	.rsi-main { flex: 1; gap: 28px; }
	.rsi-actions { flex-direction: row; flex-wrap: wrap; gap: 16px; }
	.rsi-btn { height: 64px; min-width: 280px; }
}