@charset "UTF-8";
/* ==========================================================================
   b.s. — adventure.css（SPECIAL：仕事は、冒険だ。）
   通常ページとは別の世界観（マスタードの背景・巨大な黒文字）。
   共通ヘッダー／ページナビは使わず、ロゴだけ（TOPへ戻る）を固定しています。
   数値はIllustratorのデザイン座標（幅1280px基準）。
   ========================================================================== */

@layer pages {
  .p-adventure { background: var(--c-mustard); }
  .p-adventure ::selection { background: var(--c-ink); color: var(--c-mustard); }

  /* タイトル（画面の左右からはみ出す巨大な文字） */
  .p-adv-hero { --scene-y: 0; --scene-h: 922; }
  .p-adv-hero__title { --x: 0.0; --y: 611.0; --fs: 358.309; --lh: 1.1691; --ls: 0.0407em; --ls: 0.0407em; }

  /* 雪山＋募集文 */
  .p-adv-story { --scene-y: 922; --scene-h: 1458; }
  .p-adv-mountain__band { --band-y: 922; --band-h: 688; --bleed: 90; }
  .p-adv-story__white { --x: 125.4; --y: 1500.8; --fs: 29.998; --lh: 2.1001; --ls: 0.0407em; }
  .p-adv-story__text { --x: 610.0; --y: 1935.4; --fs: 23.548; --lh: 2.1; --ls: 0.0409em; }

  /* 役割に分けられ…（群衆） */
  .p-adv-role { --scene-y: 2380; --scene-h: 770; }
  .p-adv-role__text { --x: 15.0; --y: 2523.6; --fs: 45.996; --lh: 1.7393; --ls: 0.0407em; --k: var(--k-shippori); }
  .p-adv-role__band { --band-y: 2458; --band-h: 511; --bleed: 90; }

  /* そして今。／向かう先は、 */
  .p-adv-now { --scene-y: 3150; --scene-h: 977; }
  .p-adv-now__text { --x: 309.0; --y: 3326.6; --fs: 45.996; --lh: 1.7391; --ls: -0.1080em; }
  .p-adv-now__text .l0 { letter-spacing: -0.0357em; }
  .p-adv-future__text { --x: 161.5; --y: 3712.7; --fs: 37.294; --lh: 3.1911; --ls: 0.0406em; }
  .p-adv-future__text p + p { margin-top: 0; }   /* 1行ずつ段落に分け、行送りはそのまま */

  /* 氷原 */
  .p-adv-need { --scene-y: 4127; --scene-h: 973; }
  .p-adv-need__band { --band-y: 4127; --band-h: 840; --bleed: 90; }
  .p-adv-need__text { --x: 0.0; --y: 4398.9; --fs: 47.996; --lh: 1.458; --ls: -0.1081em; }
  .p-adv-need__only { --x: 2.0; --y: 4769.9; --fs: 72.994; --lh: 1.2052; --ls: 0.0408em; }
  .p-adv-need__you { --x: 2.0; --y: 5010.5; --fs: 146.886; --lh: 1.2; --ls: -0.1079em; }

  /* あなたは、生かされるのか（海の写真は画面幅より小さい枠） */
  .p-adv-alive { --scene-y: 5100; --scene-h: 900; }
  .p-adv-alive__band { --band-y: 5181; --band-h: 495; --bleed: 0; --band-x: 85; --band-w: 1110; }
  .p-adv-alive__text { --x: 7.0; --y: 5371.2; --fs: 86.093; --lh: 1.8055; --ls: 0.1999em; --slant: var(--slant-en); --slant: var(--slant-en); }

  /* 白の70%の巨大な文字 */
  .p-adv-last { --scene-y: 6000; --scene-h: 700; }
  .p-adv-last__title { --x: 0.0; --y: 6122.9; --fs: 358.309; --lh: 1.1691; --ls: 0.0407em; }
  .p-adv-last__title { color: rgb(255 255 255 / 0.7); }

  /* ロゴ（締め） */
  .p-adv-closing { --scene-y: 6700; --scene-h: 425; }
  .p-adv-closing__tagline { --x: 513.0; --y: 6752.1; --fs: 24.303; --lh: 1.7389; --ls: 0.0406em; --k: var(--k-shippori); }
  .p-adv-closing__logo { --x: 763.34; --y: 6770.4; --w: 464.05; }
}

/* ---------- 動き ----------
   タイトル：1文字ずつ「刷られる」ように現れる（フェードではなく、パッと出る）
   白の巨大文字：透かしのように、ゆっくり浮かび上がる */
@layer motion {
  .js-motion [data-intro="print"] .line {
    clip-path: inset(-20% 100% -40% 0);
    transition: clip-path 0.9s steps(4, jump-none) calc(0.25s + var(--i, 0) * 0.85s);
  }
  .js-motion.is-ready [data-intro="print"] .line { clip-path: inset(-20% -5% -40% -5%); }
  .js-motion [data-reveal="rise"] { opacity: 0; translate: 0 60px; transition: opacity 2.4s linear, translate 2.4s var(--ease-out); }
  .js-motion [data-reveal="rise"].is-inview { opacity: 1; translate: 0 0; }
}

/* ==========================================================================
   SMARTPHONE／TABLET（〜1023px）
   巨大文字は画面に収めず、はみ出したまま。写真は縦長にトリミングし直しています。
   ========================================================================== */
@layer pages {
  /* タブレット：SPの構図を縦横同じ比率で拡大（写真と文字の重なりを保つ） */
  @media (min-width: 560px) and (max-width: 1023px) {
    .p-adventure { --sf: var(--sv); }
  }
  @media (max-width: 1023px) {
    .p-adv-hero { --spb: 0; }
    .p-adv-hero__title { --sx: -6; --sy: 92; --sfs: 130; --slh: 1.12; --sls: -0.03em; }
    .p-adv-story { --spb: 40; }
    .p-adv-mountain__band { --sbh: 700; --sby: -58; }
    .p-adv-story__white { --sx: 20; --sy: -330; --sfs: 16; --sfs-min: 14.5px; --slh: 1.9; z-index: 3; }
    .p-adv-story__text { --sx: 40; --sy: 70; --sfs: 15; --sfs-min: 14px; --slh: 1.95; }
    .p-adv-role { --spb: 10; }
    .p-adv-role__text { --sx: 14; --sy: 90; --sfs: 25; --sfs-min: 21px; --slh: 1.5; z-index: 3; }
    .p-adv-role__band { --sbh: 440; --sby: -60; }
    .p-adv-now { --spb: 0; }
    .p-adv-now__text { --sx: 24; --sy: 90; --sfs: 22; --sfs-min: 19px; --slh: 1.6; --sls: -0.06em; }
    .p-adv-future__text { --sx: 30; --sy: 60; --sfs: 18; --sfs-min: 16px; --slh: 2.3; }
    .p-adv-need { --spb: 30; }
    .p-adv-need__band { --sbh: 620; --sby: 60; }
    .p-adv-need__text { --sx: 12; --sy: -580; --sfs: 20; --sfs-min: 17px; --slh: 1.42; --sls: -0.06em; z-index: 3; }
    .p-adv-need__only { --sx: 12; --sy: 26; --sfs: 30; --sfs-min: 25px; --slh: 1.25; --sls: -0.04em; z-index: 3; }
    .p-adv-need__you { --sx: 6; --sy: 14; --sfs: 66; --sfs-min: 54px; --slh: 1.1; --sls: -0.1em; z-index: 3; }
    .p-adv-alive { --spb: 20; }
    .p-adv-alive__band { margin-left: 0; width: 100%; }
    /* 人物の足元（写真の下寄り）が、横長になるタブレットでも切れないよう下側を基準に表示 */
    .p-adv-alive__band .c-band__img { object-position: 50% 85%; }
    .p-adv-alive__band { --sbh: 480; --sby: 70; }
    .p-adv-alive__text { --sx: 14; --sy: -400; --sfs: 30; --sfs-min: 25px; --slh: 1.5; z-index: 3; }
    .p-adv-last { --spb: 20; }
    .p-adv-last__title { --sx: -6; --sy: 70; --sfs: 130; --slh: 1.12; --sls: -0.03em; }
  }
  /* 幅340px未満：ロゴ（固定サイズ）との重なりで1行目が淡く表示されないよう、FVの巨大文字だけ少し下げる */
  @media (max-width: 339px) {
    .p-adv-hero__title { --sy: 104; }
  }
}