@charset "utf-8";
/* 乗務員募集 recruit3「思ってたのと違う」— 二画面スクラブ
   設計書: docs/design-recruit-scrub-2026-09-09.md §2
   共有の page-sub.css / common.min.css は変更しない。上書きは .page-recruit3 配下だけ。 */

.page-recruit3 {
  --rc-navy: var(--color-main, #04225c);
  --rc-navy2: var(--color-bg6, #0b2a66);
  --rc-yellow: var(--color-bg9, #fad622);
  --rc-grey: #eef1f6;
  --sub-slope: 7rem;
}
@media (max-width: 767px) { .page-recruit3 { --sub-slope: 4rem; } }
.page-recruit3 .sub-main { background-color: #fff; }

/* ============================================================
   0. 二画面スクラブ・ヒーロー
   ============================================================ */
.page-recruit3 .tw-hero {
  position: relative;
  height: calc(100svh + 400vh);
  background: #04122c;
}
.page-recruit3 .tw-stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  background: #04122c;
  /* 0-6% は右だけの1枚。6-11% で境界が中央へ開き、84-94% で左が右へ溶ける */
  --split: clamp(0, calc((var(--s, 0) - .06) / .05), 1);
  --close: clamp(0, calc((var(--s, 0) - .84) / .10), 1);
  --frac: calc(.5 * var(--split) * (1 - var(--close)));
}
.page-recruit3 .tw-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: #04122c;
}
.page-recruit3 #scrubMyth { clip-path: inset(0 calc(100% - var(--frac) * 100%) 0 0); filter: saturate(.72); }
.page-recruit3 #scrubReal { clip-path: inset(0 0 0 calc(var(--frac) * 100%)); }

.page-recruit3 .tw-divider {
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--frac) * 100%);
  width: 2px; margin-left: -1px;
  background: var(--rc-yellow);
  opacity: calc(var(--split) * (1 - var(--close)));
  z-index: 4; pointer-events: none;
}

/* 暗いスクリム。文字は白なので上下から締める */
.page-recruit3 .tw-scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(4,18,44,.62) 0, rgba(4,18,44,.10) 26%, rgba(4,18,44,0) 42%),
    linear-gradient(to top,    rgba(4,18,44,.68) 0, rgba(4,18,44,.20) 24%, rgba(4,18,44,0) 46%);
}

/* 進捗バー */
.page-recruit3 .tw-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; z-index: 6;
  width: calc(var(--s, 0) * 100%);
  background: var(--rc-yellow);
}

/* 固定の見出しとリボン */
.page-recruit3 .tw-head {
  position: absolute; z-index: 5; top: 24rem; left: 4rem; right: 4rem;
  color: #fff; pointer-events: none;
}
.page-recruit3 .tw-en {
  font-family: var(--sub-en, "Archivo", sans-serif);
  font-style: italic; font-weight: 700; letter-spacing: .08em;
  font-size: 1.3rem; color: var(--rc-yellow); margin: 0 0 .8rem;
}
.page-recruit3 .tw-title {
  font-family: var(--sub-serif, "Noto Serif JP", serif);
  font-weight: 700; font-size: 4.4rem; line-height: 1.35;
  margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,.55);
}
.page-recruit3 .tw-ribbon {
  position: absolute; z-index: 5; top: 24rem; right: 4rem;
  display: inline-block; padding: .7rem 1.6rem;
  background: var(--rc-navy); color: #fff;
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 1.4rem; letter-spacing: .06em;
  transform: skewX(-8deg);
  /* 1枚の画面のあいだはリボンを出さない */
  opacity: var(--split);
}
.page-recruit3 .tw-ribbon span { display: inline-block; transform: skewX(8deg); }

/* 左右のコピー塊 */
.page-recruit3 .tw-copy {
  position: absolute; z-index: 5; bottom: 12rem;
  width: min(36rem, 38vw);
  color: #fff;
  opacity: 0; transform: translateY(1.2rem);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
/* 開幕（1枚の画面）と合流のあいだは左右のコピーを出さない */
.page-recruit3 .tw-copy.is-on { opacity: calc(var(--split) * (1 - var(--close))); transform: none; }
.page-recruit3 .tw-copy--l { left: 4rem; }
/* 右下の丸い MENU ボタンを避けて一段上げる */
.page-recruit3 .tw-copy--r { right: 4rem; bottom: 16rem; text-align: right; }
.page-recruit3 .tw-copy__tag {
  display: inline-block; margin: 0 0 1rem; padding: .3rem 1rem;
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 1.1rem; letter-spacing: .08em;
}
.page-recruit3 .tw-copy--l .tw-copy__tag { background: rgba(255,255,255,.16); color: #fff; }
.page-recruit3 .tw-copy--r .tw-copy__tag { background: var(--rc-yellow); color: var(--rc-navy); }
.page-recruit3 .tw-copy__lead {
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 2.6rem; line-height: 1.45; margin: 0;
}
.page-recruit3 .tw-copy__note {
  font-size: 1.4rem; line-height: 1.85; margin: 1.2rem 0 0; color: rgba(255,255,255,.9);
}

/* 中央：開幕と合流 */
.page-recruit3 .tw-center {
  position: absolute; z-index: 6; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; pointer-events: none; padding: 0 4rem;
}
.page-recruit3 .tw-center--open  { opacity: calc(1 - var(--split)); }
.page-recruit3 .tw-center--merge { opacity: var(--close); }
.page-recruit3 .tw-center p {
  font-family: var(--sub-serif, "Noto Serif JP", serif);
  font-weight: 700; font-size: 3.6rem; line-height: 1.5; margin: 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.page-recruit3 .tw-center--merge .tw-cta {
  display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center;
  margin-top: 3rem; pointer-events: auto;
}
.page-recruit3 .tw-pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1.4rem 3rem; border-radius: 999px;
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 1.6rem; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-recruit3 .tw-pill--w { background: #fff; color: var(--rc-navy); }
.page-recruit3 .tw-pill--n { background: var(--rc-navy); color: #fff; border: 1px solid rgba(255,255,255,.4); }
.page-recruit3 .tw-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* 静止画モード（読み込み失敗・省データ） */
.page-recruit3 .tw-hero.is-still { height: 100svh; }
.page-recruit3 .tw-hero.is-still .tw-canvas { display: none; }
.page-recruit3 .tw-hero.is-still .tw-still { display: block; }
.page-recruit3 .tw-still {
  display: none; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.page-recruit3 .tw-hero.is-still .tw-copy { opacity: 1; transform: none; }
.page-recruit3 .tw-hero.is-still .tw-divider,
.page-recruit3 .tw-hero.is-still .tw-center--open { display: none; }
.page-recruit3 .tw-hero.is-still .tw-center--merge { opacity: 1; }

/* ------------------ SP は上下分割 ------------------ */
@media (max-width: 767px) {
  .page-recruit3 .tw-hero { height: calc(100svh + 340vh); }
  .page-recruit3 #scrubMyth { clip-path: inset(0 0 calc(100% - var(--frac) * 100%) 0); }
  .page-recruit3 #scrubReal { clip-path: inset(calc(var(--frac) * 100%) 0 0 0); }
  .page-recruit3 .tw-divider {
    left: 0; right: 0; top: calc(var(--frac) * 100%);
    width: auto; height: 2px; bottom: auto; margin-left: 0; margin-top: -1px;
  }
  .page-recruit3 .tw-head { top: 12rem; left: 2.4rem; right: 2.4rem; }
  .page-recruit3 .tw-title { font-size: 2.6rem; }
  .page-recruit3 .tw-ribbon { top: auto; bottom: 1.6rem; right: 2.4rem; font-size: 1.1rem; padding: .5rem 1.2rem; }
  .page-recruit3 .tw-copy { width: auto; left: 2.4rem; right: 2.4rem; text-align: left; }
  .page-recruit3 .tw-copy--l { bottom: auto; top: 20rem; }
  .page-recruit3 .tw-copy--r { bottom: 8rem; text-align: left; }
  .page-recruit3 .tw-copy__lead { font-size: 1.9rem; }
  .page-recruit3 .tw-copy__note { font-size: 1.25rem; }
  .page-recruit3 .tw-center p { font-size: 2.2rem; }
  .page-recruit3 .tw-pill { font-size: 1.4rem; padding: 1.2rem 2.2rem; }
}

/* 動きを控えめに */
.is-calm .page-recruit3 .tw-copy { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .page-recruit3 .tw-copy { transition: none; }
}

/* ============================================================
   1. ヒーロー直下の各章
   ============================================================ */
.page-recruit3 .tw-disclaimer {
  margin: 0; padding: 1.4rem 4rem; background: #04122c; color: rgba(255,255,255,.66);
  font-size: 1.2rem; line-height: 1.7; text-align: right;
}
.page-recruit3 .tw-sec { padding: 9rem 4rem; background: #fff; color: var(--rc-navy); }
.page-recruit3 .tw-sec--grey { background: var(--rc-grey); }
.page-recruit3 .tw-sec--navy {
  background: var(--rc-navy); color: #fff;
  clip-path: polygon(0 var(--sub-slope), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--sub-slope) * -1);
  padding-top: calc(9rem + var(--sub-slope));
}
.page-recruit3 .tw-sec__inner { max-width: 108rem; margin-inline: auto; }
.page-recruit3 .tw-sec__en {
  font-family: var(--sub-en, "Archivo", sans-serif);
  font-style: italic; font-weight: 700; letter-spacing: .08em;
  font-size: 1.3rem; margin: 0 0 .8rem; color: var(--rc-yellow);
}
.page-recruit3 .tw-sec--grey .tw-sec__en,
.page-recruit3 .tw-sec:not(.tw-sec--navy) .tw-sec__en { color: #b9861a; }
.page-recruit3 .tw-sec__title {
  font-family: var(--sub-serif, "Noto Serif JP", serif);
  font-weight: 700; font-size: 3.4rem; line-height: 1.4; margin: 0 0 1.6rem;
}
.page-recruit3 .tw-sec__lead { font-size: 1.6rem; line-height: 1.9; margin: 0 0 3.2rem; }
.page-recruit3 .tw-sec__note { font-size: 1.3rem; line-height: 1.8; margin: 2.4rem 0 0; opacity: .8; }

/* 対照表 */
.page-recruit3 .tw-table { overflow-x: auto; }
.page-recruit3 .tw-table table { width: 100%; min-width: 68rem; border-collapse: collapse; font-size: 1.5rem; }
.page-recruit3 .tw-table th,
.page-recruit3 .tw-table td { padding: 1.6rem 1.8rem; text-align: left; vertical-align: top; line-height: 1.8; }
.page-recruit3 .tw-table thead th {
  background: var(--rc-navy); color: #fff;
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif); font-weight: 800; font-size: 1.4rem;
}
.page-recruit3 .tw-table tbody tr { border-bottom: 1px solid #d7dde8; }
.page-recruit3 .tw-table tbody tr:nth-child(odd) { background: #f7f9fc; }
.page-recruit3 .tw-table td:first-child { color: #6b7688; }
.page-recruit3 .tw-table td:nth-child(2) { font-weight: 700; }
.page-recruit3 .tw-table td:last-child { font-size: 1.25rem; color: #6b7688; white-space: nowrap; }

/* 角切りカード */
.page-recruit3 .tw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.page-recruit3 .tw-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22);
  padding: 3rem 2.6rem; clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
}
.page-recruit3 .tw-card h3 {
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 1.9rem; margin: 0 0 1.2rem; color: var(--rc-yellow);
}
.page-recruit3 .tw-card p { font-size: 1.5rem; line-height: 1.9; margin: 0; }
.page-recruit3 .tw-card__cite { margin-top: 1.6rem !important; font-size: 1.2rem !important; opacity: .72; }

/* 乗り場 */
.page-recruit3 .tw-stands { display: flex; flex-wrap: wrap; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.page-recruit3 .tw-stands li {
  display: inline-flex; align-items: center; padding: 1.2rem 2.4rem; border-radius: 999px;
  background: #fff; border: 2px solid var(--rc-navy);
  font-family: var(--font-gothic2, "M PLUS 1p", sans-serif); font-weight: 800; font-size: 1.6rem;
}

/* 10のこと */
.page-recruit3 .tw-check { margin: 0; padding: 0 0 0 2.4rem; counter-reset: c; list-style: none; }
.page-recruit3 .tw-check li {
  position: relative; counter-increment: c;
  padding: 1.8rem 0 1.8rem 5rem; border-bottom: 1px solid #d7dde8;
  font-size: 1.5rem; line-height: 1.9;
}
.page-recruit3 .tw-check li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 1.8rem;
  font-family: var(--sub-en, "Archivo", sans-serif); font-style: italic; font-weight: 700;
  font-size: 1.8rem; color: #b9861a;
}
.page-recruit3 .tw-check b { display: block; font-weight: 800; }

/* つづき */
.page-recruit3 .tw-next { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.page-recruit3 .tw-next__card {
  display: block; padding: 3.4rem 3rem; text-decoration: none; color: #fff;
  background: var(--rc-navy); clip-path: polygon(0 0, calc(100% - 2.4rem) 0, 100% 2.4rem, 100% 100%, 0 100%);
  transition: transform .2s ease, box-shadow .2s ease;
}
.page-recruit3 .tw-next__card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(4,34,92,.28); }
.page-recruit3 .tw-next__en {
  display: block; font-family: var(--sub-en, "Archivo", sans-serif); font-style: italic;
  font-weight: 700; font-size: 1.2rem; letter-spacing: .08em; color: var(--rc-yellow); margin-bottom: 1rem;
}
.page-recruit3 .tw-next__title {
  display: block; font-family: var(--font-gothic2, "M PLUS 1p", sans-serif);
  font-weight: 800; font-size: 2.1rem; line-height: 1.5; margin-bottom: 1rem;
}
.page-recruit3 .tw-next__note { display: block; font-size: 1.4rem; line-height: 1.85; opacity: .86; }

/* ENTRY */
.page-recruit3 .tw-entry { text-align: center; }
.page-recruit3 .tw-entry__tel { margin: 2.4rem 0 0; }
.page-recruit3 .tw-entry__tel a {
  font-family: var(--sub-en, "Archivo", sans-serif); font-weight: 700; font-style: italic;
  font-size: 5.2rem; color: var(--rc-yellow); text-decoration: none; letter-spacing: .02em;
}
.page-recruit3 .tw-entry__note { margin: 1.6rem 0 0; font-size: 1.3rem; opacity: .82; }

@media (max-width: 767px) {
  .page-recruit3 .tw-disclaimer { padding: 1.2rem 2.4rem; text-align: left; font-size: 1.1rem; }
  .page-recruit3 .tw-sec { padding: 6rem 2.4rem; }
  .page-recruit3 .tw-sec--navy { padding-top: calc(6rem + var(--sub-slope)); }
  .page-recruit3 .tw-sec__title { font-size: 2.4rem; }
  .page-recruit3 .tw-sec__lead { font-size: 1.45rem; margin-bottom: 2.4rem; }
  .page-recruit3 .tw-cards,
  .page-recruit3 .tw-next { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-recruit3 .tw-check { padding-left: 0; }
  .page-recruit3 .tw-check li { padding-left: 4.2rem; font-size: 1.4rem; }
  .page-recruit3 .tw-entry__tel a { font-size: 3.4rem; }
  .page-recruit3 .tw-table table { font-size: 1.35rem; min-width: 60rem; }
}