/* ===== FV（Figma 14511:47775）1440×800 ===== */
.fv{position:relative;height:800px;overflow:hidden;background:linear-gradient(171.906deg,var(--c-base) 8.7607%,var(--c-base3) 53.386%)}

/* 写真マーキー: 2227.771×627.562 / bottom25.42 / 中央 / -6°回転 / 9枚 350×400 mr-119 */
.fv__marquee{position:absolute;left:calc(50% + .14px);bottom:25.42px;width:2227.771px;height:627.562px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
.fv__strip{display:flex;align-items:center;flex:none;transform:rotate(-6deg)}
.fv__track{position:relative;display:flex;align-items:center;flex:none}
.fv__group{display:flex;align-items:center;flex:none}
/* クローンは9枚目の次（9×231=2079px = 100%-119px）に絶対配置し、幅計算に影響させない */
.fv__group--clone{position:absolute;left:calc(100% - 119px);top:0}
.fv__card{position:relative;flex:none;width:350px;height:400px;margin-right:-119px;overflow:hidden}
.fv__card:last-child{margin-right:0}
.fv__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}

/* 見出し: left75.28 top74.18 982.401×189.884 / -5°回転 / 図形ワード＋テキスト */
.fv__headline{position:absolute;left:max(30px,calc(50% - 644.72px));top:74.18px;width:982.401px;height:189.884px;display:flex;align-items:center;justify-content:center;font-weight:500}
/* h1 は1行目だけを包む透過的なラッパー。フレックスアイテムとしての振る舞いを
   従来の .fv__headline-inner と同じにして、見た目を変えずに見出しの範囲だけを絞る */
.fv__headline-h1{display:flex;flex:none;font:inherit;font-weight:inherit;letter-spacing:inherit}
.fv__headline-inner{display:flex;align-items:flex-end;gap:4.183px;flex:none;transform:rotate(-5deg)}
.fv__word{display:block;width:479.997px;height:105.136px;flex:none}
/* 「自由な発想」はインラインSVG（水色の四角形 .fv__sq を個別に動かすため。旧 img/fv_word.svg と同じ描画） */
.fv__word svg{display:block;width:100%;height:100%}
.fv__copy{display:flex;align-items:center;justify-content:center;width:492.775px;height:71.463px;flex:none}
.fv__copy-text{display:block;flex:none;position:relative;top:-2px;left:1px;transform:skewX(-7deg) scaleY(.99);font-size:72px;font-weight:500;line-height:1;letter-spacing:1.44px;white-space:nowrap;color:var(--c-text)}
/* SP専用の2行目（PCでは出さない） */
.fv__copy2{display:none}

/* サブコピー: left952 top679 418×66 / 右寄せ / gap6 */
.fv__sub{position:absolute;left:min(calc(50% + 232px),calc(100% - 448px));top:679px;width:418px;height:66px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fv__sub-row{display:flex;align-items:flex-end;gap:4px;width:100%;height:30px}
.fv__badge{display:inline-flex;align-items:center;justify-content:center;padding:0 8px 1px;background:var(--c-main);color:var(--c-inverse);font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.72px;white-space:nowrap}
.fv__tail,.fv__sub-line{font-size:18px;font-weight:500;line-height:1.6;letter-spacing:.72px;white-space:nowrap}

/* ===== SP（768px以下）: FV（Figma 14600:69276）375×650 ===== */
@media (max-width:768px){
  .fv{height:650px;background:linear-gradient(154.567deg,var(--c-base) 9.2543%,var(--c-base3) 56.242%)}
  /* マーキー: 1335.867×376.454 / left calc(50%+.43px) / bottom108.49 / カード 211×240 ×9 mr-72 */
  /* Figmaは幅1318の枠に1323分のカードを詰めた状態 → 画素照合で 3px 右に補正（left .43 + 3） */
  .fv__marquee{left:calc(50% + 3.43px);bottom:108.49px;width:1335.867px;height:376.454px}
  .fv__card{width:211px;height:240px;margin-right:-72px}
  .fv__card:last-child{margin-right:0}
  .fv__group--clone{left:calc(100% - 72px)}
  /* ループ距離はSPのカード幅で再計算（9×139=1251px）。animation.css の PC用 fv-marquee を上書き。速度はPCと同じ「1枚あたり約6秒」 */
  .fv .fv__track{animation-name:fv-marquee-sp;animation-duration:34s}
  /* 見出し枠 355×119 / 中央 / top85 / clip */
  /* ※ transform で中央寄せしない（animation.css の fv-in が transform:none で上書きするため left 計算で中央に置く） */
  .fv__headline{left:calc(50% - 177.5px);top:85px;width:355px;height:119px;overflow:hidden;display:block}
  /* 1行目: Figma枠 (2,-9) 321.555×83.609 に、回転前 317.874×56.118 の中身を中央配置 → left3.84 top4.75 */
  .fv__headline-inner{position:absolute;left:3.84px;top:4.75px;gap:0}
  .fv__word{width:255.999px;height:56.118px}
  .fv__copy{width:61.875px;height:39.702px}
  .fv__copy-text{top:0;left:0;font-size:40px;letter-spacing:.8px}
  /* 「現場を救う。」は1行目では視覚的に隠す（h1 の読み上げテキストは保持） */
  .fv__copy-b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* 2行目: (123,55) 239.661×65.803 / 45px medium ls.9 / rotate-5 skewX-7 scaleY.99 */
  .fv__copy2{position:absolute;left:123px;top:55px;width:239.661px;height:65.803px;display:flex;align-items:center;justify-content:center}
  .fv__copy2-text{display:block;flex:none;transform:rotate(-5deg) skewX(-7deg) scaleY(.99);font-size:45px;font-weight:500;line-height:1;letter-spacing:.9px;white-space:nowrap;color:var(--c-text)}
  /* サブコピー: 中央 / top523 / gap4 / バッジ 16px px6 pb2 ls.64 / 1行 18px ls.72（「で、」の尻尾はSPに無い） */
  .fv__sub{left:0;right:0;top:523px;width:auto;height:auto;align-items:center;gap:4px}
  .fv__sub-row{width:auto;height:auto}
  .fv__badge{padding:0 6px 2px;font-size:16px;letter-spacing:.64px}
  .fv__tail{display:none}
}
@keyframes fv-marquee-sp{from{transform:translateX(0)}to{transform:translateX(-1251px)}}

/* ===== タブレット（769〜1200px）: 見出しは982px固定・nowrap なので、傾きを保ったまま比率で縮める =====
   （文字サイズを個別に落とすと「自由な発想」のSVGとカーニングが崩れるため、ブロックごとscaleする） */
@media (min-width:769px) and (max-width:1200px){
  .fv__headline{left:var(--pad-side);width:auto}
  /* 回転後の実効幅 ≒ 982*cos5° + 190*sin5° ≒ 995px。左右30pxを引いた幅に収まる倍率を段階で当てる
     （scale() は単位なしの数値しか取れず calc((100vw - 60px)/995) は無効なため） */
  .fv__headline-inner{transform:rotate(-5deg) scale(var(--fv-s,1));transform-origin:left center}
  .fv__sub{left:auto;right:var(--pad-side);width:auto}
  .fv__sub-row{white-space:normal}
}
@media (min-width:769px) and (max-width:860px){ .fv{--fv-s:.71} }
@media (min-width:861px) and (max-width:980px){ .fv{--fv-s:.81} }
@media (min-width:981px) and (max-width:1080px){ .fv{--fv-s:.91} }
@media (min-width:1081px) and (max-width:1200px){ .fv{--fv-s:1} }

/* ===== FVアニメーション（あおさん指示 A-1。JS発火を待たないCSSアニメ＝LCP保護） =====
   ① ヘッダーと写真マーキーは最初から表示。animation.css §2（fv-fade / fv-in）は下の高詳細度セレクタで無効化
      マーキー速度は参考サイト（shinseidenki.co.jp ≒ 37px/s）に合わせ 24s→56s（2079px/56s ≒ 37px/s、1枚あたり約6秒）
   ② メインコピー「自由な発想で、現場を救う。」: 左→右のワイプ出現（clip-path。astomosgroup-logistics-recruit.jp のFVコピー型）
      傾いた行に沿ってワイプさせるため、回転を持つ .fv__headline-inner 自身に掛ける（SPは h1 が0×0のため必須）
   ③ ②の終盤からサブコピー2行を同じワイプで順に出現。並行して「自由な発想」の水色の四角形（.fv__sq）を
      ②の位置（各文字の内側・左下に14px寄った位置）から最終位置へ steps(4) で4段階に移動（tech-flag.co.jp のドット的挙動）
   ④ 最終形（ヘッダーの固定追従はレーン1 header.css 側） */
.fv .fv__track{animation-duration:56s}
.js .fv .fv__marquee,.js .fv .fv__headline,.js .fv .fv__sub{animation:none}
@keyframes fv-wipe{from{clip-path:polygon(-10% -60%,-10% -60%,-10% 160%,-10% 160%)}to{clip-path:polygon(-10% -60%,110% -60%,110% 160%,-10% 160%)}}
@keyframes fv-sq{from{transform:translate(-14px,14px)}to{transform:none}}
.js .fv__headline-inner{animation:fv-wipe 1s var(--ease-out-quint) .15s both}
.js .fv__copy2{animation:fv-wipe .9s var(--ease-out-quint) .55s both}
.js .fv__sub > p{animation:fv-wipe .9s var(--ease-out-quint) 1.05s both}
.js .fv__sub > p + p{animation-delay:1.2s}
.js .fv__sq{animation:fv-sq .5s steps(4,end) 1.1s both}
@media (prefers-reduced-motion:reduce){
  .js .fv__headline-inner,.js .fv__copy2,.js .fv__sub > p,.js .fv__sq{animation:none!important}
}