/* =========================================================
   HKPR — fv.css（TOPのファーストビュー専用）v4
   PROD-20261017-HKPR-026：RYO作成のデザイン（_素材/RYO支給/FV_20261017/PCFV.png 1586×992・スマホFV.png 853×1844）どおりに実装。
   RYO「背景画像で文字やボタンはHTMLで」
   PROD-20261018-HKPR-028（DIR-20261018-hkpr-22 の N1〜N3）：600〜1023px で背景を左寄せにして写真と英字が切れた（N1・N2）ので、
     768px 以上は背景画像を全幅で見せる（見本の比率のまま縮小。写真の人物・大きな英字・PEOPLE CONNECT… が全部入る）。
     文字は下限の大きさで読めるようにし、SP の組み方はサイト共通の切り替え幅 767px 以下にした（下の 027 の記述のうち 600px の切り替えは廃止）
   PROD-20261018-HKPR-027（DIR-20261017-hkpr-21 の F1〜F3 の差し戻し）：
   - 600px 以上は PC の組み方（背景 top-fv-pc.jpg）。1024px 以上は見本の比率どおり（1単位＝幅/1586）。
     1023〜600px は 1単位を少しずつ大きくし（0.6456px → 0.73px）、背景を高さ基準で左寄せに置く。右側の写真は画面の外へ切れるが、
     文字の大きさ・FV の高さが 1024px と連続する（1023/1024 の飛びをなくす。TB で FV が 1,500px を超えない）
   - 599px 以下は SP の組み方（背景 top-fv-sp.jpg・見本 853 幅）。文字のブロックを普通の流れに置き、下の紺の帯は FV の下端に付ける。
     行の高さは見本の比率のまま固定し、小さい幅で文字の下限が効いても FV が伸びない（下の一文が紺の帯に落ちない・背景の下端と帯のあいだにすき間が出ない）
   - ボタンは幅を「最小幅」にし、文字と矢印のあいだに必ずすき間を取る（文字が長ければボタンが広がる）
   - TOP index.html の <!-- FV:START --> 〜 <!-- FV:END --> と、このファイルだけで完結する。クラスはすべて .fv 接頭辞
   ========================================================= */
.fv{position:relative;background:#f3f7fc;container-type:inline-size}
.fv__stage{--u:calc(100cqw / 1586);position:relative;overflow:hidden;height:calc(var(--u) * 907)}
.fv__bg img{position:absolute;left:0;bottom:0;width:calc(var(--u) * 1586);height:auto;max-width:none}
.fv__sp{display:none}

/* ---------- PC の組み方（600px〜）：座標は見本 PCFV.png（ヘッダーの下 y85 から）の px ---------- */
.fv__in{position:absolute;z-index:2;left:calc(var(--u) * 70);top:calc(var(--u) * 128)}
.fv__label{font-family:Inter,sans-serif;font-weight:700;font-size:max(10px,calc(var(--u) * 18));line-height:1.4;letter-spacing:.27em;color:#2b57bf;white-space:nowrap}
.fv__ttl{position:relative;margin-top:calc(var(--u) * 25);font-size:calc(var(--u) * 92);font-weight:900;line-height:1.14;letter-spacing:.02em;color:#03162f;font-feature-settings:"palt";white-space:nowrap}
.fv__ttl em{font-style:normal;color:#1c4cad}
/* HKPR-030（RYO「デザインはひらがな文字小さいだろ」）：見本はひらがなが漢字より小さい（実測で高さ約0.8倍） */
.fv__kana{font-size:.86em}
/* 見本は2行目の文字が1行目より少し小さい（漢字の高さ 約0.92倍・字の送り 約0.87倍） */
.fv__l2{font-size:.935em;letter-spacing:0}
/* 見本では2行目の「でつなぐ。」の後ろで写真が白くぼけ、文字が写真に沈まない。背景素材にはぼけが無いので、白いぼかしを文字の後ろに置く */
/* HKPR-030（RYO「文字のシャドウキツすぎ」）：白いぼかしを薄く・小さくした */
/* HKPR-033（RYO「シャドウが広すぎる／弱まったんだけど結局範囲は変わってないから違和感／見づらかったらシャドウ強めてもいいからシャドウの範囲、大きさ自体を狭くしたい」）：
   見出しの後ろの大きな白いぼかし（560×200単位の楕円）をやめ、文字の形に沿った白い影（text-shadow）にした。広がりは文字から数px。濃さは上げた */
.fv__ttl::before{content:none}
.fv__ttl{text-shadow:0 0 calc(var(--u) * 3) rgba(255,255,255,.95),0 0 calc(var(--u) * 9) rgba(255,255,255,.7)}
.fv__lead{margin-top:calc(var(--u) * 21);margin-left:calc(var(--u) * 4);font-size:max(12px,calc(var(--u) * 21.5));font-weight:500;line-height:1.81;color:#202941;letter-spacing:.02em;white-space:nowrap}
.fv__cta{display:flex;gap:calc(var(--u) * 16);margin-top:calc(var(--u) * 54);margin-left:calc(var(--u) * 2)}
.fv__btn{display:flex;align-items:center;justify-content:center;gap:max(12px,calc(var(--u) * 29));min-width:calc(var(--u) * 264);height:max(40px,calc(var(--u) * 74));padding:0 calc(var(--u) * 24);font-size:max(12px,calc(var(--u) * 18.4));font-weight:700;letter-spacing:.02em;white-space:nowrap;color:#fff;background:#2551be;box-shadow:inset 0 0 0 1px #2551be;transition:background .2s,color .2s}
.fv__btn::after{content:"→";flex:none;font-family:Inter,sans-serif;font-weight:500;font-size:max(13px,calc(var(--u) * 22));transition:transform .2s}
.fv__btn:hover{background:#1d3f97}
.fv__btn:hover::after{transform:translateX(4px)}
.fv__btn--line{min-width:calc(var(--u) * 219);background:#fff;color:#0b1a33;box-shadow:inset 0 0 0 1.5px #3a465c}
.fv__btn--line:hover{background:#eef3fb}
.fv__tag{display:flex;align-items:center;gap:calc(var(--u) * 16);margin-top:calc(var(--u) * 43);margin-left:calc(var(--u) * 6);width:calc(var(--u) * 470);font-size:max(12px,calc(var(--u) * 17.2));font-weight:500;letter-spacing:.04em;color:#2c374e;white-space:nowrap}
.fv__tag::before,.fv__tag::after{content:"";flex:1;height:max(1px,calc(var(--u) * 2));background:#4f78e0}
.fv__tag{width:max-content;min-width:calc(var(--u) * 470)}
.fv__tag::before,.fv__tag::after{flex:1 0 max(16px,calc(var(--u) * 60))}
/* 768〜879px：ボタンを横に2つ並べると、右の小さな写真の列にかかるので縦に並べる（下の一文までが FV の中に収まる） */
@media (min-width:768px) and (max-width:879px){
  .fv__cta{flex-direction:column;align-items:flex-start;gap:8px}
  .fv__btn,.fv__btn--line{min-width:calc(var(--u) * 330)}
  /* HKPR-029（N4）：ボタンを縦に並べた分だけ下の一文が下がり、右の青い帯が左へ迫る。左の線を外し字間を詰めて、末尾「ビス」を白い面の中に収める */
  .fv__tag{margin-left:0;gap:8px;letter-spacing:0}
  .fv__tag::before{display:none}
}
.fv__en{position:absolute;z-index:1;left:calc(var(--u) * 842);top:calc(var(--u) * 748);font-family:Inter,sans-serif;font-weight:800;font-size:calc(var(--u) * 70);line-height:.93;letter-spacing:-.01em;color:rgba(64,118,220,.32);transform:skewX(-10deg);transform-origin:left bottom;white-space:nowrap;pointer-events:none;user-select:none}
.fv__en span{letter-spacing:.035em}
.fv__words{display:none}


/* ---------- SP の組み方（〜767px）：座標は見本 スマホFV.png（ヘッダーの下 y108 から・幅853）の px ---------- */
@media (max-width:767px){
  /* HKPR-031：背景画像の下端より下の地の色を、画像の下端の左側の色（rgb(239,247,255)前後）にそろえ、左下の横線を消す */
  .fv__stage{--u:calc(100cqw / 853);height:auto;min-height:calc(var(--u) * 1736);background:#eff7ff}
  .fv__bg img{top:0;bottom:auto;width:100%}
  .fv__sp{display:inline}
  /* 紺の帯：見本では左端 y1566・右端 y1485（FV の上端から）で斜めに始まる。FV の下端に付ける */
  /* HKPR-030（RYO「スマホの下の繋ぎ目見えるから自然にできない？」）：帯の上の辺を背景画像の紺の斜めの辺（右端 y1485・x300 で y1536）と同じ線にし、色も画像の紺（rgb(4,40,90)前後）から下へ濃くしてつなぐ */
  /* HKPR-031（RYO「色じゃなくて／線がズレてるんだよ」）：帯を FV の下端ではなく背景画像の座標で置く（上端 y1484・左端は 79.4 下）。画像の紺の斜めの辺を実測で直線に当てはめた値（x300 で y1535.5・x680 で y1500.1）。FV の高さが端末の文字で少し変わっても線がずれない */
  .fv__stage::after{content:"";position:absolute;z-index:1;left:0;right:0;top:calc(var(--u) * 1484);bottom:0;background:linear-gradient(180deg,#04285a 0,#04285a calc(var(--u) * 60),#03214a calc(var(--u) * 150),#032043 100%);clip-path:polygon(0 calc(var(--u) * 79.4),100% 0,100% 100%,0 100%)}
  .fv__in{position:relative;left:auto;top:auto;padding:calc(var(--u) * 150) calc(var(--u) * 23) calc(var(--u) * 253) calc(var(--u) * 40)}
  .fv__label{font-size:max(9.5px,calc(var(--u) * 20));line-height:calc(var(--u) * 33);letter-spacing:.22em}
  /* HKPR-036（RYO「人と企業を〜のメインコピー／もう少しだけ大きくできる？／全体的に／スマホの時ね」）：見出し 74→78単位（375px で 32.5→34.3px・約5%）。
     見出しが高くなった分（3行×1.42×4単位＝17.04単位）だけリードの上の余白を減らし、リード・ボタン・下の一文・FV の高さは変えない */
  .fv__ttl{margin-top:calc(var(--u) * 17);font-size:calc(var(--u) * 78);line-height:1.42}
  /* DIR-26 N5（PROD-033 で SP の「力」が青い斜めの帯に沈んだ）：SP は白い影を文字の縁で濃くする（白を重ねる）。届く範囲は文字から約8px（作業前の大きなぼかしは13〜34px）。「力」の縁のコントラストは 5c99959 以上 */
  .fv__ttl{text-shadow:0 0 3px #fff,0 0 4px #fff,0 0 6px #fff,0 0 7px #fff,0 0 8px #fff,0 0 11px #fff}
  /* HKPR-036（RYO「ちょっとでかいな／14.5pxくらいで」）：リード 34→33単位（375px で 15.0→14.5px）。
     HKPR-034（RYO「スマホのFV／本文文字小さすぎ」）：リードを 27.5→34単位（375px で 12.1→15.0px・サイト SP の本文 15px と同じ）。下限 12px（13px にすると 320px で行末の「。」が青い斜めの帯にかかる）・上限 22px は据え置き。
     3行のまま幅に収めるため字間を 0・句読点詰めにした。行の送り（54.6単位）は変えないので FV の高さ・ボタン・帯の位置は変わらない */
  .fv__lead{margin-top:calc(var(--u) * 525.96);margin-left:0;font-size:clamp(12px,calc(var(--u) * 33),22px);line-height:calc(var(--u) * 54.6);letter-spacing:0;font-feature-settings:"palt"}
  .fv__cta{gap:calc(var(--u) * 17);margin-top:calc(var(--u) * 40);margin-left:calc(var(--u) * -2)}
  /* HKPR-031：見本どおり2つのボタンを同じ幅に（文字が入りきらない幅だけ中身の幅まで広がる） */
  .fv__btn{flex:1 1 0;min-width:max-content;gap:max(8px,calc(var(--u) * 34));height:max(40px,calc(var(--u) * 107));padding:0 calc(var(--u) * 32);font-size:max(12px,calc(var(--u) * 26.8));font-weight:500}
  .fv__btn::after{font-size:max(13px,calc(var(--u) * 30))}
  .fv__tag{margin-top:calc(var(--u) * 36);margin-left:0;width:auto;font-size:max(11.5px,calc(var(--u) * 26));line-height:calc(var(--u) * 46);gap:calc(var(--u) * 26);letter-spacing:.07em}
  .fv__en{z-index:2;left:calc(var(--u) * 22);top:auto;bottom:calc(var(--u) * 46);font-size:calc(var(--u) * 62.5);color:rgba(70,120,225,.45)}
  .fv__words{display:block;position:absolute;z-index:2;left:calc(var(--u) * 697);bottom:calc(var(--u) * 25);padding-left:calc(var(--u) * 25);border-left:1px solid rgba(255,255,255,.75);font-family:Inter,sans-serif;font-weight:500;font-size:calc(var(--u) * 14);line-height:calc(var(--u) * 30.3);letter-spacing:.12em;color:#fff}
}
/* SP のリードは上限 22px（682〜767px でサイトの H2 26px より大きくならないように） */
/* 下限の大きさが効く狭い幅（〜420px）：句読点を詰めて、リード・ボタン・ラベルが幅に収まるようにする */
@media (max-width:420px){
  .fv__label{letter-spacing:.14em}
  .fv__lead{letter-spacing:0;font-feature-settings:"palt"}
  .fv__btn{padding:0 8px;letter-spacing:0}
  .fv__tag{letter-spacing:0;gap:8px}
  .fv__tag::before{flex:0 0 12px}
}