/* FAiTH FV Preview — design.md v1.4 / Claude Design Turn5 準拠 */
:root{
  --navy:#071C2C;
  --navy-glow1:#123753;
  --navy-glow2:#0C2A41;
  --blue:#1457A6;
  --orange:#F26A21;
  --orange-dark:#D95A15;
  --warm-white:#F7F6F2;
  --ink:#10202B;
  --slate:#66727B;
  --hairline-dark:rgba(255,255,255,.055);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--navy);
  color:#fff;
  font-family:'Noto Sans JP',system-ui,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:#fff;color:var(--ink);padding:10px 16px}
.skip:focus{left:12px}

/* ── Header ── */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 48px;
}
.logo{font:800 22px/1 Manrope,sans-serif;letter-spacing:.01em;color:#fff}
.nav-pc{display:flex;align-items:center;gap:24px}
.nav-pc a{font:500 12.5px/1 'Noto Sans JP',sans-serif;color:rgba(255,255,255,.78);transition:color .3s}
.nav-pc a:hover,.nav-pc a:focus-visible{color:var(--orange)}
.cta-pill{
  font:600 13px/1 'Noto Sans JP',sans-serif;color:#fff;background:var(--orange);
  padding:11px 24px;border-radius:999px;transition:background .3s;
}
.cta-pill:hover,.cta-pill:focus-visible{background:var(--orange-dark);color:#fff}
.menu-pill{
  display:none;font:700 12px/1 Manrope,sans-serif;letter-spacing:.12em;color:#fff;
  background:transparent;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  padding:13px 26px;cursor:pointer;
}
.menu-overlay{
  position:fixed;inset:0;z-index:30;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:48px 36px;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.menu-overlay.open{opacity:1;pointer-events:auto}
.menu-overlay a{font:600 clamp(22px,6vw,28px)/2 'Noto Sans JP',sans-serif;color:#fff}
.menu-overlay .cta-pill{align-self:flex-start;margin-top:20px;font-size:15px;padding:14px 32px}
.menu-close{position:absolute;top:26px;right:24px;background:none;border:1px solid rgba(255,255,255,.5);border-radius:999px;color:#fff;font:700 12px/1 Manrope,sans-serif;letter-spacing:.12em;padding:13px 26px;cursor:pointer}

/* ── Hero ── */
.hero{
  position:relative;height:100svh;min-height:560px;overflow:hidden;
  background:var(--navy);
}
.hero-bg{position:absolute;inset:-8%;pointer-events:none}
.glow1{
  position:absolute;inset:0;
  background:radial-gradient(1050px 700px at 65% 20%,var(--navy-glow1) 0%,rgba(18,55,83,0) 62%);
  animation:fvGlow 18s ease-in-out infinite;
}
.glow2{
  position:absolute;inset:0;
  background:radial-gradient(760px 560px at 10% 92%,var(--navy-glow2) 0%,rgba(12,42,65,0) 58%);
}
.gridlines{position:absolute;inset:0;pointer-events:none}
.gridlines span{position:absolute;top:0;bottom:0;width:1px;background:var(--hairline-dark)}
.gridlines span:nth-child(1){left:16.66%}
.gridlines span:nth-child(2){left:33.33%}
.gridlines span:nth-child(3){left:50%}
.gridlines span:nth-child(4){left:66.66%}
.gridlines span:nth-child(5){left:83.33%}

.hero-title{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-54%);
  display:flex;flex-direction:column;align-items:center;z-index:3;
  font:800 clamp(56px,11.7vw,168px)/1.05 Manrope,sans-serif;
  letter-spacing:-.02em;color:#fff;
}
.hero-title .mask{overflow:hidden;padding:0 12px}
.hero-title .line{display:inline-block;white-space:nowrap}
.hero-title .line2wrap{margin-top:.05em}
.hero-title .dot{color:var(--orange)}

.jp-copy{position:absolute;right:48px;bottom:64px;z-index:4;text-align:left}
.jp-copy .tick{display:block;width:26px;height:2px;background:var(--orange);margin:0 0 16px}
.jp-copy p{font:600 19px/1.95 'Noto Sans JP',sans-serif;color:#fff}
.scroll-cue{position:absolute;left:48px;bottom:64px;z-index:4;display:flex;align-items:center;gap:14px}
.scroll-cue .circle{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);font:400 15px/1 Manrope,sans-serif;
}
.scroll-cue .label{font:700 10.5px/1 Manrope,sans-serif;letter-spacing:.26em;color:rgba(255,255,255,.5)}

/* variant A: 光の帯（45°） */
.band{
  display:none;position:absolute;top:-60%;left:-420px;width:150px;height:220%;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.1),rgba(255,255,255,0));
}
.v-a .band{display:block;animation:fvBand45 6s linear 2.2s infinite}
.v-a .line1.settled{animation:fvSwayA 7s ease-in-out infinite}
.v-a .line2.settled{animation:fvSwayB 8s ease-in-out infinite}

/* variant B: 色収差グリッチ（5秒周期・通常時は完全静止） */
.v-b .line1{animation:fvGlitch5 5s linear 1.6s infinite}
.v-b .line2{animation:fvGlitch5 5s linear 1.72s infinite}

/* ── Statement（スクロール体感用・BRAND STATEMENT抜粋） ── */
.statement{position:relative;background:var(--navy);padding:160px 48px 0;z-index:2}
.statement .inner{max-width:1200px;margin:0 auto}
.sec-label{display:flex;align-items:center;gap:14px;margin-bottom:36px}
.sec-label .tick{width:26px;height:2px;background:var(--orange)}
.sec-label span{font:700 11px/1 Manrope,sans-serif;letter-spacing:.24em;color:rgba(255,255,255,.55)}
.statement h2{font:600 clamp(28px,3.6vw,52px)/1.6 'Noto Sans JP',sans-serif;color:#fff;margin-bottom:36px}
.statement .body{max-width:640px;font:400 16px/2.1 'Noto Sans JP',sans-serif;color:rgba(255,255,255,.82)}
.statement .more{display:inline-flex;align-items:center;gap:10px;margin-top:44px;font:600 14px/1 'Noto Sans JP',sans-serif;color:#fff;transition:color .3s}
.statement .more:hover{color:var(--orange)}
.statement .more .plus{color:var(--orange);font:600 16px/1 Manrope,sans-serif}
/* 次セクション見出しのチラ見せ（Ref 5） */
.next-peek{margin-top:140px;border-top:1px solid rgba(255,255,255,.12);padding-top:48px;overflow:hidden}
.next-peek .giant{
  font:800 clamp(64px,9vw,130px)/1 Manrope,sans-serif;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28);
  transform:translateY(38%);white-space:nowrap;
}

/* ── Keyframes（Claude Design Turn5 実測値） ── */
@keyframes fvGlow{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-42px,26px) scale(1.05)}100%{transform:translate(0,0) scale(1)}}
@keyframes fvBand45{0%{transform:translateX(0) rotate(45deg)}58%,100%{transform:translateX(2400px) rotate(45deg)}}
@keyframes fvSwayA{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes fvSwayB{0%,100%{transform:translateX(0)}25%{transform:translateX(8px)}75%{transform:translateX(-8px)}}
@keyframes fvGlitch5{
  0%,91.5%,98%,100%{text-shadow:0 0 0 rgba(255,60,60,0),0 0 0 rgba(80,160,255,0);transform:translateX(0)}
  92.5%{text-shadow:-4px 0 0 rgba(255,60,60,.7),4px 0 0 rgba(80,160,255,.7);transform:translateX(2px)}
  94.5%{text-shadow:3px 0 0 rgba(255,60,60,.5),-3px 0 0 rgba(80,160,255,.5);transform:translateX(-2px)}
  96.5%{text-shadow:-1px 0 0 rgba(255,60,60,.25),1px 0 0 rgba(80,160,255,.25);transform:translateX(1px)}
}

/* ── SP（design.md Ref 10-12：スケール維持・MENUピル） ── */
@media (max-width:1024px){
  .nav-pc{display:none}
  .menu-pill{display:block}
  .site-header{padding:20px 20px}
}
@media (max-width:768px){
  .hero-title{font-size:15vw}
  .jp-copy{right:auto;left:20px;bottom:96px}
  .jp-copy p{font-size:16px}
  .scroll-cue{left:20px;bottom:28px}
  .statement{padding:96px 20px 0}
  .band{width:90px}
  .next-peek{margin-top:88px}
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── 案D：CARTA ZERO質感（Turn 4a・段違いスタッガード） ── */
.v-d .hero-title-stag{position:absolute;inset:0;z-index:3;font:800 clamp(56px,11.7vw,168px)/0.95 Manrope,sans-serif;letter-spacing:-.02em;color:#fff}
.v-d .stag-be{position:absolute;left:3.3%;top:13%}
.v-d .stag-auth{position:absolute;left:3.3%;top:38%;white-space:nowrap}
.v-d .band-d{
  position:absolute;top:-15%;left:-450px;width:320px;height:140%;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0));
  animation:fvBand 9s ease-in-out 3s infinite;
}
.v-d .jp-copy{bottom:calc(140px + 66px)}
.v-d .scroll-cue{bottom:calc(140px + 46px)}
.peek-strip{
  position:absolute;left:0;right:0;bottom:0;height:140px;z-index:5;
  border-top:1px solid rgba(255,255,255,.09);
  padding:26px 48px 0;background:var(--navy);overflow:hidden;
}
.peek-strip .sec-label{margin-bottom:18px}
.peek-strip .peek-head{font:700 clamp(20px,3vw,44px)/1.4 'Noto Sans JP',sans-serif;color:#fff}
.statement-d{padding-top:96px}
@keyframes fvDriftA{from{transform:translateX(0)}to{transform:translateX(26px)}}
@keyframes fvDriftB{from{transform:translateX(0)}to{transform:translateX(-30px)}}
@keyframes fvBand{0%{transform:translateX(0) rotate(16deg)}44%,100%{transform:translateX(2450px) rotate(16deg)}}
@media (max-width:768px){
  .v-d .hero-title-stag{font-size:15vw}
  .v-d .stag-be{left:38%;top:16%}
  .v-d .stag-auth{left:12px;top:32%}
  .v-d .jp-copy{left:20px;right:auto;bottom:calc(112px + 56px)}
  .v-d .scroll-cue{left:20px;bottom:calc(112px + 16px)}
  .peek-strip{height:112px;padding:20px 20px 0}
  .peek-strip .sec-label{margin-bottom:12px}
}

/* ── 案D確定：修正R1（質感・ヘッダー・SPバランス） ── */
.grain{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.site-header{transition:background .45s ease,box-shadow .45s ease}
.site-header.scrolled{background:rgba(7,28,44,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.v-d .stag-be,.v-d .stag-auth{will-change:transform}
@media (max-width:768px){
  .v-d .stag-be{left:12px;top:21%}
  .v-d .stag-auth{left:12px;top:36%}
}

/* ── 案D強化：常時モーション層（オーロラ・帯2本・漂い増幅・生きたグレイン） ── */
.v-d .glow3{
  position:absolute;inset:0;
  background:radial-gradient(900px 620px at 28% 62%,#0E3A5C 0%,rgba(14,58,92,0) 60%);
  animation:fvAurora1 26s ease-in-out infinite alternate;
}
.v-d .glow4{
  position:absolute;inset:0;opacity:.7;
  background:radial-gradient(1200px 420px at 85% 78%,#134668 0%,rgba(19,70,104,0) 55%);
  animation:fvAurora2 33s ease-in-out infinite alternate;
}
@keyframes fvAurora1{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(90px,-40px) scale(1.08)}
  100%{transform:translate(-60px,30px) scale(1.02)}
}
@keyframes fvAurora2{
  0%{transform:translate(0,0)}
  100%{transform:translate(-130px,-50px) scale(1.1)}
}
/* 漂いの増幅（±26/30px → ±42/48px・XYの複合軌道）
   外側(.stag-*)はGSAPパララックス専用にし、漂いは内側の行(.line)へ移す */
.v-d .stag-be,.v-d .stag-auth{animation:none}
.v-d .stag-be .line,.v-d .stag-auth .line{display:inline-block;will-change:transform}
@keyframes fvDriftA2{
  0%{transform:translate(0,0)}
  55%{transform:translate(26px,-8px)}
  100%{transform:translate(42px,-14px)}
}
@keyframes fvDriftB2{
  0%{transform:translate(0,0)}
  45%{transform:translate(-28px,7px)}
  100%{transform:translate(-48px,12px)}
}
/* 光の帯を2本目（周期ずらし・細め） */
.band-d2{
  width:180px;opacity:.7;
  animation:fvBand 13s ease-in-out 7.5s infinite;
}
/* グレインの揺らめき（フィルム質感） */
.v-d .grain{animation:fvGrain .9s steps(1) infinite}
@keyframes fvGrain{
  0%{background-position:0 0}
  25%{background-position:-46px 32px}
  50%{background-position:28px -40px}
  75%{background-position:-24px -28px}
  100%{background-position:38px 22px}
}
/* スクロールキューの呼吸 */
.v-d .scroll-cue .circle{animation:fvCue 2.4s ease-in-out 2.6s infinite}
@keyframes fvCue{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

/* ── 案D完全同等化②：実写背景＋Ken Burns（IMG-01・ChatGPT image 2生成） ── */
.hero-photo{position:absolute;inset:0;overflow:hidden}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
  transform-origin:60% 40%;
  animation:fvKenBurns 38s ease-in-out infinite alternate;
  filter:saturate(.92);
  will-change:transform;
}
/* 文字可読性のためのネイビーオーバーレイ（上下を締める） */
.hero-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,28,44,.60) 0%,rgba(7,28,44,.38) 46%,rgba(7,28,44,.80) 100%);
}
@keyframes fvKenBurns{
  0%{transform:scale(1.03) translate(0,0)}
  100%{transform:scale(1.13) translate(-2.4%,1.6%)}
}
/* 実写が入ったのでオーロラは補助光に減光 */
.v-d .glow3{opacity:.55}
.v-d .glow4{opacity:.4}

/* ── ヒーロー動画（夜明けタイムラプス・1回再生→朝焼けで静止・PC/SP共通） ──
   下敷きimg＝動画の先頭フレームと同一画像のため、切替は視覚上存在しない */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}

/* ── 背景を「見て分かる速度」で動かす（光の流れ層＋Ken Burns強化） ── */
.hero-photo img{animation:fvKenBurns2 22s ease-in-out infinite alternate}
@keyframes fvKenBurns2{
  0%{transform:scale(1.05) translate(0,0)}
  100%{transform:scale(1.2) translate(-3%,2%)}
}
/* 同じ画像をスクリーン合成で重ね、光条に沿って流す＝光が差し込み続ける表現 */
.hero-photo .flow{
  position:absolute;inset:-6%;
  background-image:url("images/hero-bg2.jpg");
  background-size:cover;background-position:60% 40%;
  mix-blend-mode:screen;opacity:0;pointer-events:none;
  animation:fvFlow 11s ease-in-out infinite;
  will-change:transform,opacity;
}
.hero-photo .flow2{animation:fvFlow2 17s ease-in-out 5s infinite}
@keyframes fvFlow{
  0%{opacity:0;transform:translate(-4%,3%) scale(1.05)}
  45%{opacity:.34}
  100%{opacity:0;transform:translate(2.5%,-2%) scale(1.12)}
}
@keyframes fvFlow2{
  0%{opacity:0;transform:translate(3%,-2.5%) scale(1.08)}
  50%{opacity:.22}
  100%{opacity:0;transform:translate(-3%,2%) scale(1.04)}
}
@media (max-width:768px){
  .hero-photo .flow{background-image:url("images/hero-bg2-sp.jpg")}
}

/* ── トーン明化パス（どんより解消：夜→夜明け） ── */
/* オーバーレイを大幅に軽く（.60/.38/.80 → .40/.18/.62） */
.hero-photo::after{
  background:linear-gradient(180deg,rgba(7,28,44,.52) 0%,rgba(10,36,56,.28) 46%,rgba(7,28,44,.66) 100%);
}
/* 光の流れ層も夜明け画像に合わせる＋わずかに強く */
.hero-photo .flow{background-image:url("images/recruit-bg.jpg")}
@media (max-width:768px){.hero-photo .flow{background-image:url("images/recruit-bg.jpg")}}
@keyframes fvFlow{
  0%{opacity:0;transform:translate(-4%,3%) scale(1.05)}
  45%{opacity:.42}
  100%{opacity:0;transform:translate(2.5%,-2%) scale(1.12)}
}
/* グローを明るい青へ（濁った紺→澄んだ青） */
.v-d .glow1{background:radial-gradient(1050px 700px at 65% 20%,#1B4A6E 0%,rgba(27,74,110,0) 62%)}
.v-d .glow3{background:radial-gradient(900px 620px at 28% 62%,#175681 0%,rgba(23,86,129,0) 60%);opacity:.6}
.v-d .glow4{background:radial-gradient(1200px 420px at 85% 78%,#1B5C88 0%,rgba(27,92,136,0) 55%);opacity:.45}
/* SPはモヤの原因になる補助光レイヤーを止める（動画自体が動くため不要）：
   光の帯320pxは画面の8割を覆う／オーロラ・グロウも相対的に大きすぎて白く濁る */
@media (max-width:768px){
  .v-d .band-d,.v-d .band-d2{display:none}
  .v-d .glow1,.v-d .glow2,.v-d .glow3,.v-d .glow4{display:none}
}
/* グレインを薄く（曇り感の低減） */
.grain{opacity:.032}
/* ネイビー面をわずかに明るいトーンへ（#071C2C→#0B2237） */
.statement,.sec--dark,.peek-strip{background:#0B2237}
.site-header.scrolled{background:rgba(11,34,55,.86)}
.hero{background:#0B2237}
/* 本文の白の透過を上げて読み味を軽く */
.statement .body{color:rgba(255,255,255,.88)}
.sec--dark .sec-body{color:rgba(255,255,255,.88)}
/* 明背景上の白文字の可読性担保 */
.v-d .hero-title-stag{text-shadow:0 2px 28px rgba(7,28,44,.4)}
.jp-copy p{text-shadow:0 1px 14px rgba(7,28,44,.5)}

/* ── オープニング（濃紺＋カウンター：読み込みを演出に変える） ── */
.opening{
  position:fixed;inset:0;z-index:95;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.opening.done{transform:translateY(-100%)}
.opening-inner{text-align:center}
.opening-logo{height:38px;filter:brightness(0) invert(1);opacity:.92;margin-bottom:22px}
.opening-count{font:800 30px/1 Manrope,sans-serif;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.opening-pct{font-size:.55em;margin-left:4px;color:rgba(255,255,255,.5)}
.opening-bar{width:140px;height:2px;background:rgba(255,255,255,.14);margin:20px auto 0;overflow:hidden}
.opening-bar span{display:block;height:100%;width:0;background:var(--orange)}
html.is-opening,html.is-opening body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.opening{display:none}}