/* =====================================================
   有限会社 木竜 — recruit-story-cine-v2.css
   求職者のみなさまへ（シネマティック版・構成組み替え）追加スタイル
   recruit-story-cine.css を継承。.kiryu-rs- プレフィックス統一。
   スクロールジャック（スタック型リビール ×3）／分岐セクション
   ===================================================== */

/* =====================================================
   スクロールジャック（共通スタック型リビール）
   ===================================================== */
.kiryu-rs-stack-jack { position: relative; }
.kiryu-rs-stack-jack[data-count="3"] { height: 300vh; }
.kiryu-rs-stack-jack[data-count="5"] { height: 350vh; }
.kiryu-rs-salary-jack { position: relative; height: 360vh; }

.kiryu-rs-stack-sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--stack-bg, var(--paper));
}
.kiryu-rs-stack-item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(60px);
  will-change: transform, opacity;
}

/* 進捗インジケータ（縦・右端） */
.kiryu-rs-stack-progress {
  position: absolute; right: clamp(18px, 3.4vw, 46px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; z-index: 40;
}
.kiryu-rs-stack-prog-num {
  font-family: var(--en); font-size: 10px; letter-spacing: 0.2em; font-weight: 600;
  color: rgba(255,255,255,0.45); writing-mode: vertical-rl;
}
.kiryu-rs-stack-line {
  width: 1px; height: 64px; position: relative; background: rgba(255,255,255,0.22);
}
.kiryu-rs-stack-line > span {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: var(--c-pink); transition: height 0.2s linear;
}
/* 紙地のジャック上ではダーク基調に */
.kiryu-rs-stack-jack--paper .kiryu-rs-stack-prog-num { color: rgba(27,22,32,0.4); }
.kiryu-rs-stack-jack--paper .kiryu-rs-stack-line { background: rgba(27,22,32,0.16); }

/* =====================================================
   プロローグ スクロールジャック（3段階リビール）
   ステージ1：縦書き見出し → 2：円形写真 → 3：説明文
   ===================================================== */
.kiryu-rs-prologue-jack {
  position: relative;
  height: 300vh;
}
.kiryu-rs-prologue-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.kiryu-rs-prologue-jack .kiryu-rs-prologue {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
}
.kiryu-rs-prologue-head,
.kiryu-rs-prologue-media .kiryu-rs-ph,
.kiryu-rs-prologue-text {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

/* =====================================================
   ① 仕事シーン（全面・シネマティック）
   ===================================================== */
.kiryu-rs-scene {
  position: relative; width: 100%; height: 100%; margin: 0;
  display: flex; align-items: flex-end;
  padding: clamp(54px, 8vw, 130px) clamp(28px, 8vw, 130px);
  overflow: hidden;
}
.kiryu-rs-scene-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 28px);
}
.kiryu-rs-scene-1 .kiryu-rs-scene-bg { background-color: #1a0533; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 28px), linear-gradient(158deg, #2A0F52 0%, #160a2b 72%); }
.kiryu-rs-scene-2 .kiryu-rs-scene-bg { background-color: #2a0b2e; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 28px), linear-gradient(158deg, #4a1442 0%, #1d0820 72%); }
.kiryu-rs-scene-3 .kiryu-rs-scene-bg { background-color: #160a2b; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 28px), linear-gradient(158deg, #241043 0%, #120626 72%); }
.kiryu-rs-scene-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(12,3,26,0.7) 0%, rgba(12,3,26,0.12) 50%, rgba(12,3,26,0.34) 100%);
}
.kiryu-rs-scene-file {
  position: absolute; top: clamp(22px, 4vw, 44px); left: clamp(28px, 8vw, 130px); z-index: 3;
  font-family: var(--en), ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.62);
}
.kiryu-rs-scene-file::before {
  content: '[ PHOTO ] '; color: rgba(255,255,255,0.4); letter-spacing: 0.16em;
}
.kiryu-rs-scene-cap { position: relative; z-index: 3; max-width: 640px; }
.kiryu-rs-scene-num {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--en); font-weight: 600; font-size: 11px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--c-pink); margin-bottom: 22px;
}
.kiryu-rs-scene-num::before { content: ''; width: 36px; height: 1px; background: var(--c-pink); }
.kiryu-rs-scene-cap h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 4.6vw, 58px); line-height: 1.4; letter-spacing: 0.05em;
  color: #fff; margin: 0 0 18px; text-shadow: 0 4px 30px rgba(0,0,0,0.45);
}
.kiryu-rs-scene-cap p {
  font-family: var(--serif); font-size: clamp(15px, 1.7vw, 19px); line-height: 2.05;
  color: rgba(255,255,255,0.86); margin: 0; max-width: 30em; text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

/* =====================================================
   ② STEP（スタック・エディトリアル）
   ===================================================== */
.kiryu-rs-stack-step {
  width: min(1040px, 88vw);
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.kiryu-rs-stack-step-media {
  aspect-ratio: 4 / 5; width: 100%;
  box-shadow: 0 30px 66px rgba(27,22,32,0.18);
}
.kiryu-rs-stack-step-body .kiryu-rs-step-num {
  font-family: var(--en); font-weight: 700; font-size: 12px; letter-spacing: 0.24em;
  color: var(--c-pink); display: block; margin-bottom: 4px;
}
.kiryu-rs-stack-step-body .kiryu-rs-step-num b {
  font-size: clamp(40px, 5vw, 62px); display: block; color: var(--ink);
  letter-spacing: 0.02em; margin-top: 8px; font-weight: 700; line-height: 1;
}
.kiryu-rs-stack-step-body h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 38px); line-height: 1.5; color: var(--ink);
  margin: 22px 0 26px; letter-spacing: 0.03em;
}
.kiryu-rs-stack-step-body ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px;
  border-top: 1px solid var(--line); padding-top: 26px;
}
.kiryu-rs-stack-step-body li {
  font-family: var(--serif); font-size: clamp(14px, 1.4vw, 16.5px); line-height: 1.85;
  color: var(--ink-2); padding-left: 22px; position: relative;
}
.kiryu-rs-stack-step-body li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-pink);
}

/* STEP ジャック：3カラムグリッド（重ね合わせをやめ、各自の位置で1つずつ出現） */
.kiryu-rs-steps--jack { width: 100%; margin-top: 0; }
.kiryu-rs-steps--jack .kiryu-rs-stack-item {
  position: static; inset: auto;
  display: block;
}

/* 実写真の差し込み（プレースホルダー → 写真） */
.kiryu-rs-ph-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1;
}
.kiryu-rs-ph.is-filled::before { display: none; }
.kiryu-rs-ph.is-filled .kiryu-rs-ph-cap { display: none; }

/* =====================================================
   ③ 給与内訳（積み上げ）
   ===================================================== */
.kiryu-rs-salary-jack .kiryu-rs-stack-sticky { background: var(--paper); }
.kiryu-rs-salary-stage { width: min(640px, 90vw); }
.kiryu-rs-srow > span:first-child { display: inline-flex; align-items: center; }
.kiryu-rs-splus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 14px; flex-shrink: 0;
  border: 1px solid var(--c-pink); border-radius: 50%;
  color: var(--c-pink); font-family: var(--en); font-weight: 700; font-size: 13px; line-height: 1;
}
.kiryu-rs-salary-total.kiryu-rs-srow { border-top: 1px solid var(--ink); margin-top: 6px; }

/* スクロールジャックの見出し（紙・中央） */
.kiryu-rs-salary-head { text-align: center; }
.kiryu-rs-salary-head .kiryu-rs-label { justify-content: center; }

/* =====================================================
   あなたのスタートラインは？（分岐セクション）
   ===================================================== */
.kiryu-rs-branch {
  position: relative; overflow: hidden;
  padding: clamp(92px, 12vw, 168px) 24px;
  background: linear-gradient(135deg, #F3E8FF 0%, #FCE7F3 100%);
}
.kiryu-rs-branch-inner { max-width: 1040px; margin: 0 auto; position: relative; }
.kiryu-rs-branch-head { text-align: center; margin-bottom: clamp(48px, 7vw, 76px); }
.kiryu-rs-branch-head .kiryu-rs-label { justify-content: center; color: var(--c-purple); }
.kiryu-rs-branch-head .kiryu-rs-label::before { background: var(--c-purple); }
.kiryu-rs-branch-head h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(27px, 4.4vw, 50px); line-height: 1.5; letter-spacing: 0.05em;
  color: var(--ink); margin: 0 0 24px; text-wrap: balance;
}
.kiryu-rs-branch-head p {
  font-family: var(--serif); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 2.1;
  color: var(--ink-2); margin: 0 auto; max-width: 520px;
}
.kiryu-rs-branch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kiryu-rs-branch-card {
  background: #fff; border-radius: 20px;
  padding: clamp(36px, 4.2vw, 54px) clamp(30px, 3.6vw, 46px);
  box-shadow: 0 34px 80px rgba(27,22,32,0.12);
  display: flex; flex-direction: column;
}
.kiryu-rs-branch-tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  margin-bottom: 26px;
}
.kiryu-rs-branch-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.kiryu-rs-branch-tag--pink { color: var(--c-pink-d); }
.kiryu-rs-branch-tag--pink::before { background: var(--c-pink); }
.kiryu-rs-branch-tag--purple { color: var(--c-purple-d); }
.kiryu-rs-branch-tag--purple::before { background: var(--c-purple); }
.kiryu-rs-branch-card h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 29px); line-height: 1.5; color: var(--ink); margin: 0 0 18px;
  letter-spacing: 0.03em;
}
.kiryu-rs-branch-card > p {
  font-family: var(--serif); font-size: 15px; line-height: 2.1; color: var(--ink-2);
  margin: 0 0 34px; text-wrap: pretty;
}
.kiryu-rs-branch-btn {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: 0.06em;
  padding: 20px 28px; border-radius: 6px; text-decoration: none; color: #fff;
  transition: transform 0.25s var(--ease-out), background 0.25s, box-shadow 0.25s;
}
.kiryu-rs-branch-btn svg { width: 19px; height: 19px; transition: transform 0.25s var(--ease-out); }
.kiryu-rs-branch-btn:hover { transform: translateY(-3px); }
.kiryu-rs-branch-btn:hover svg { transform: translateX(5px); }
.kiryu-rs-branch-btn--pink { background: var(--c-pink); box-shadow: 0 16px 36px rgba(236,72,153,0.3); }
.kiryu-rs-branch-btn--pink:hover { background: #f0569f; }
.kiryu-rs-branch-btn--purple { background: var(--c-purple); box-shadow: 0 16px 36px rgba(124,58,237,0.28); }
.kiryu-rs-branch-btn--purple:hover { background: #8b46f0; }

/* ENTRY ボタン：主従（①を大きく） */
.kiryu-rs-entry-btns { flex-direction: column; align-items: center; gap: 18px; }
.kiryu-rs-entry-btns .kiryu-rs-btn-fill { padding: 22px 60px; font-size: 15px; }
.kiryu-rs-entry-btns-sub { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* =====================================================
   レスポンシブ
   ===================================================== */
@media (max-width: 880px) {
  .kiryu-rs-stack-step { grid-template-columns: 1fr; gap: 30px; }
  .kiryu-rs-stack-step-media { aspect-ratio: 16 / 10; max-width: 520px; }
}
@media (max-width: 768px) {
  .kiryu-rs-branch-grid { grid-template-columns: 1fr; gap: 22px; }
  .kiryu-rs-entry-btns-sub { flex-direction: column; width: 100%; }
  .kiryu-rs-entry-btns-sub .kiryu-rs-btn { width: 100%; }

  /* スクロールジャック無効化 → 通常スタック表示（SP） */
  .kiryu-rs-stack-jack[data-count] { height: auto; }
  .kiryu-rs-salary-jack { height: auto; }
  .kiryu-rs-prologue-jack { height: auto; }
  .kiryu-rs-prologue-sticky { position: static; height: auto; overflow: visible; display: block; }
  .kiryu-rs-prologue-jack .kiryu-rs-prologue { padding-top: clamp(88px,12vw,168px); padding-bottom: clamp(88px,12vw,168px); }
  .kiryu-rs-prologue-head,
  .kiryu-rs-prologue-media .kiryu-rs-ph,
  .kiryu-rs-prologue-text { opacity: 1; transform: none; }
  .kiryu-rs-stack-sticky {
    position: static; height: auto; overflow: visible;
    flex-direction: column; gap: 0; background: transparent;
  }
  .kiryu-rs-stack-item { position: static; opacity: 1; transform: none; }
  .kiryu-rs-scene { min-height: 72vw; }
  .kiryu-rs-stack-step { padding: 40px 24px; }
  .kiryu-rs-salary-stage { padding: 40px 24px; }
  .kiryu-rs-stack-progress { display: none; }
  .kiryu-rs-srow { opacity: 1 !important; transform: none !important; }
}

/* 低モーション配慮：通常スタック表示へフォールバック */
@media (prefers-reduced-motion: reduce) {
  .kiryu-rs-stack-jack[data-count] { height: auto; }
  .kiryu-rs-salary-jack { height: auto; }
  .kiryu-rs-prologue-jack { height: auto; }
  .kiryu-rs-prologue-sticky { position: static; height: auto; overflow: visible; display: block; }
  .kiryu-rs-prologue-jack .kiryu-rs-prologue { padding-top: clamp(88px,12vw,168px); padding-bottom: clamp(88px,12vw,168px); }
  .kiryu-rs-prologue-head,
  .kiryu-rs-prologue-media .kiryu-rs-ph,
  .kiryu-rs-prologue-text { opacity: 1; transform: none; }
  .kiryu-rs-stack-sticky {
    position: static; height: auto; overflow: visible;
    flex-direction: column; gap: 0; background: transparent;
  }
  .kiryu-rs-stack-item { position: static; opacity: 1; transform: none; }
  .kiryu-rs-scene { min-height: 62vh; }
  .kiryu-rs-stack-progress { display: none; }
  .kiryu-rs-srow { opacity: 1 !important; transform: none !important; }
}