/* 採用：環境を知る — 縦書きの列 side.php ＋ ワイプ／まだらの初期状態（B2 2026-10-08・指示書_v2 §5.0・§7 #7・#8）
   寸法の記法: rem＝Figma px ÷ 10（PC は 1rem＝幅/192）。呼ぶ側のセクションは position:relative。
   ENV-STICKY（2026-10-12・本人「働きやすい環境の文字がついてくるように」）: 縦書きの題を sticky に（env_sticky_20261012/design/指示書.md）。 */

/* ============================================================ 縦書きの列（PC）
   列＝.env-side（レール）: 左 141.5rem・上 --side-top から 下 --side-bottom（区画の下端からの距離）まで。金の縦線はレールの高さいっぱい。
     ├ .env-side__track（題が動ける範囲）: レールの上端から「レールの下端 − (--side-tail − 79.7rem)」まで
     │   └ .env-side__pin（sticky・高さ 66.8rem＝題 1rem〜66.8rem。写真①（アイコン）は 2026-10-15 から出さない＝前は 79.7rem で写真① 1rem〜10rem＋題 13.9rem〜79.7rem）: 目次バーの下 --env-pin-top で止まり、track の下端で区画と一緒に流れる
     └ .env-side__tail（写真②③・高さ --side-tail）: レールの下端に置く。題が着地すると Figma と同じ組み（題・写真②③の位置関係）になる
   写真 3 枠の --x --y は今までどおり「列の左上（＝pin／tail の左上）」基準。 */
.rc-page-environment .env-side{position:absolute;left:141.5rem;top:var(--side-top,0);bottom:var(--side-bottom,0);width:12rem;pointer-events:none;z-index:1}
.rc-page-environment .env-side__line{position:absolute;left:0;top:0;width:.2rem;height:100%;background:var(--env-gold);display:block}
.rc-page-environment .env-side__track{position:absolute;left:0;top:0;width:100%;bottom:max(0rem,calc(var(--side-tail,79.7rem) - 79.7rem))}
.rc-page-environment .env-side__pin{position:sticky;top:var(--env-pin-top);height:66.8rem}   /* ENV-ICON-OFF（2026-10-15・本人「アイコンを付けなくなったから消して・その分上につめて」）: 79.7→66.8rem（題の上のアイコン 枠 1rem〜10rem＋題との間 3.9rem＝12.9rem 分）。track の下端（--side-tail − 79.7）は変えない＝着地した時の題と写真②③の位置関係は元のまま（pin の上端が 12.9rem 下で止まる） */
.rc-page-environment .env-side__tail{position:absolute;left:0;bottom:0;width:100%;height:var(--side-tail,0)}
.rc-page-environment .env-side__ph{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);display:block}
.rc-page-environment .env-side__ph>.env-ph,
.rc-page-environment .env-side__ph>img{display:block;width:100%;height:100%;object-fit:cover}
.rc-page-environment .env-side__title{position:absolute;left:3.8rem;top:1rem;width:9.4rem;height:65.8rem;margin:0;
  writing-mode:vertical-rl;text-align:center;white-space:nowrap;font:700 8.728rem/9.4rem var(--serif);letter-spacing:.672rem;color:var(--env-brown)}   /* 縦書きは Figma の「行の高さ」94 が 1 字の送り（7 字で 658）＝送り 9.4rem になるよう字間 .672rem */
.rc-page-environment .env-side__title{pointer-events:auto}   /* SEL-B04（2026-10-14・文字選択）原因: 縦書きの列 .env-side は他の部分を押せなくしないよう pointer-events:none で、中の題（働きやすい環境 等）も none を受け継ぎ、マウスが下の区画に抜けて選べなかった→題だけ auto。題の箱（9.4×65.8rem）は字そのものの範囲で、押せる物とは重ならない（conflict_b.js で 0 を確認） */
/* 止まる位置: 目次バーの見えている下端 8.4rem（14.2rem − 切り 5.8rem・rc-bar-hd.css）＋ 4rem。
   画面が横に極端に長い（高さ/幅 < 約 0.48）ときは、題の下端が画面の下から 2rem 上に収まる所まで上げる（写真①がバーの下に隠れるだけで題は切れない） */
.rc-page-environment{--env-pin-top:min(12.4rem,calc(100vh - 81.7rem))}
.rc-site.admin-bar.rc-page-environment{--env-pin-top:min(calc(12.4rem + 32px),calc(100vh - 81.7rem))}

/* ============================================================ ワイプ（縦書きの題＝上から下へ・見出しの行＝左から右へ）
   現物: 東急不動産 /recruit/graduate/development2/ の見出しのワイプ（幅 0→100%・1.5s cubic-bezier(.51,.32,0,.96)）＝W/research/動き_FV_tokyu.md §1・§2-2。
   FV（rc-environment.css 103〜104 行）が使っている --env-wipe と同じ値。clip-path で幅 0→全幅（x）／高さ 0→全高（y）。
   隠すのは html.motion のときだけ。no-motion・reduced-motion は最初から表示。--wd は JS が同じ親の中で .15s ずつ。 */
html.motion:not(.no-motion) .rc-page-environment [data-env-wipe]{transition:clip-path var(--env-wipe) var(--wd,0s)}
html.motion:not(.no-motion) .rc-page-environment [data-env-wipe="y"]:not(.is-in){clip-path:inset(-1em -1em calc(100% + 1em) -1em)}
html.motion:not(.no-motion) .rc-page-environment [data-env-wipe="x"]:not(.is-in){clip-path:inset(-1em calc(100% + 1em) -1em -1em)}
html.motion .rc-page-environment [data-env-wipe].is-in{clip-path:inset(-1em)}
/* 出典: 本人 2026-10-08「見切れてる」→ 箱からはみ出す文字（行送りが字より小さい題）を切らないよう、動きと直角の方向は 1em 外まで見せる */

/* ============================================================ まだら（縦書き脇の写真 3 枠・03 のコラージュ 5）
   現物: 東急不動産 /recruit/graduate/ の写真の出方＝WebGL のフラグメントシェーダ（500×500 の格子の升目ごとに出る時刻が違う）。W/research/動き_まだら_tokyu.md。
   JS（rc-environment-side.js）が canvas で同じ式を描く。描いている間は本物を隠し、終わったら .is-in で本物を出して canvas を外す。
   縦書きの列は pin（写真①）と tail（写真②③）がそれぞれ [data-env-mottle]＝見えた方から始まる（2026-10-12・tail は区画の終わりにあるため） */
html.motion:not(.no-motion) .rc-page-environment [data-env-mot]:not(.is-in){visibility:hidden}
.rc-page-environment .env-mot-cv{visibility:visible}
.rc-page-environment .env-mot-cv{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}

/* reduced-motion・no-motion（検収ツールが後から付ける）は :not(.no-motion) で隠さない＝最初から最終状態 */

/* ============================================================ SP（≤1023・縦向き ≤1366）: 見出しの下に横 1 列の帯（題は縦書きのまま 3.6rem・写真は右に並べる・縦線は消す）。
   呼ぶ側のセクションが position:relative でなくてもよいよう、列自体を通常の流れに戻す。
   2026-10-12: track は箱を作らない（display:contents）。pin（題・写真①）と tail（写真②③）は横並びの箱のまま（まだらの IO が見るので箱が要る）＝並びと間は今と同じ。sticky は使わない。 */
@media (max-width:1023px), (max-width:1366px) and (orientation:portrait){
  .rc-page-environment .env-side{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:auto;margin:3.2rem var(--gut) 0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1.6rem}
  .rc-page-environment .env-side__line{display:none}
  .rc-page-environment .env-side__track{display:contents}
  .rc-page-environment .env-side__pin,
  .rc-page-environment .env-side__tail{position:static;top:auto;bottom:auto;width:auto;height:auto;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1.6rem}
  .rc-page-environment .env-side__title{position:static;order:-1;width:auto;height:auto;font-size:3.6rem;line-height:1.15;letter-spacing:.2rem;margin:0;writing-mode:horizontal-tb}   /* SP-YOKO（2026-10-14・本人「SP版 縦の文字を横文字に変更してほしい」）: PC の縦書き（writing-mode）を SP では横書きに */
  .rc-page-environment .env-side__ph{position:relative;left:auto;top:auto;width:calc(var(--w) * .42);height:calc(var(--h) * .42);flex:none}
  .rc-page-environment .env-side__ph--3{display:none}
  .rc-page-environment .env-side--benefits{display:none}   /* LK16-043・SP-SIDE-OFF（2026-10-16・Lark「これSPは不要かも」＝本人「（働きやすい環境）SPは不要かも」）: SP では BENEFIT 01（六つの制度）の最後のカードの下・BENEFIT 02 の上に題「働きやすい環境」だけが 1 行残っていたので、列ごと出さない（消した後の間は 4rem＝02→03 と同じ）。PC の縦書き・sticky は無変更。03 仲間とつながる・04 地域とつながるは指摘外のため今のまま */
  .rc-page-environment :is(.env-side--coworkers,.env-side--community){display:none}   /* SP-SIDE-OFF2（2026-11-06・本人「スマホ版の時はこの（仲間とつながる・地域とつながる）文字は出さないようにしたい」）: 03・04 の題も SP では列ごと出さない（02 と同じ）。PC の縦書き・sticky は無変更 */
}