@charset "utf-8";
/* ==========================================================================
   hero.css — 採用トップ（/recruit/）のヒーロー（2026-09-23 一新）
   --------------------------------------------------------------------------
   参考画像 tools/hero-future/reference/hero-reference.png（1672×941）を再現したもの。
   inc/recruit.php が、トップ（index.html）だけで top.css → recruit-design.css の
   後に読み込みます。HTML は page-templates/recruit-index.php の「ヒーロー」の節。

   構成
     1. 変数
     2. ヘッダーの上書き（透明にする／ENTRY ボタン／英字の色）
     3. ヒーローの箱と背景（SVG の多角形・線・ドット）
     4. 文字（左のコピー／左端の縦組み／右のリード）
     5. 登場の動き
     6. 画面幅ごとの調整

   ★ヘッダーの大きさ（社章 43px・社名 1.62rem・メニューの文字）は top.css のまま。
     ここでは «透明にする» «ENTRY を足す» «英字の色» だけを上書きしています。
   ★寸法の基準
     参考画像の幅 1672px を 100vw として、位置と大きさを vw と % で持たせています。
     「1672 のとき何px か」をコメントに書いてあるので、直すときはそこを見てください。
   ★top.css の «2. ヒーローの白い面» «5. ヒーロー» «.poly» «.ld__*» «.scroll» は、
     もう HTML 側に相手がいません（2026-09-23）。戻すときのために残してあります。
   ========================================================================== */

/* ================= 1. 変数 ================= */
body[data-page="index"]{
  --fh-nav-h:var(--rc-header-h);           /* ヘッダーの高さ（top.css。PC 92px／768px以下 64px） */
  --fh-ink:#0A2246;                        /* 見出し「Create」「with us.」の紺 */
  --fh-ink-2:#12254F;                      /* 「旭建設株式会社 採用特設サイト」「つくるのは、」 */
  --fh-eyebrow:#5FA4F8;                    /* recruitment special site */
  --fh-side:#4E5E7C;                       /* 左端の PEOPLE / TOWN … */
  --fh-lead-en:#8593AC;                    /* A BRIGHTER TOMORROW TOGETHER. */
  --fh-ff-en:"Poppins","Inter","Noto Sans JP",sans-serif;
  --fh-ff-ttl:"Inter Tight","Inter","Arial",sans-serif;   /* 見出し。参考画像の字形にいちばん近い（tools/hero-future/fonttest.html で比較） */
}

/* ================= 2. ヘッダーの上書き ================= */
/* 透明なまま、ヒーローの上に重ねます。recruit-design.css の白い面と6色の線は、
   下へスクロールして .stuck が付いたときだけ出します。 */
html body[data-page="index"] .nav{ background:transparent; border-bottom:0; box-shadow:none; }
html body[data-page="index"] .nav::after{ opacity:0; }
html body[data-page="index"] .nav.stuck{ background:rgba(255,255,255,.9); box-shadow:0 1px 0 rgba(6,38,63,.05); }
html body[data-page="index"] .nav.stuck::after{ opacity:1; }
/* メニューの英字の色は、全ページ共通で css/recruit-design.css（body[data-page] .gnav a:nth-child(n) の --uc）。
   ここでは指定しません（2026-09-23。以前ここに書いていたが、recruit-design.css の灰色の指定に負けて効いていなかった）。 */

/* --- ENTRY（水色→桃色のグラデーションの丸ボタン）。メニューの右、コンパクトに --- */
.entry-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.85em; flex:none;
  height:40px; padding:0 18px 0 22px; margin-left:clamp(4px,1vw,14px);
  border-radius:999px; text-decoration:none; color:#fff;
  font-family:var(--fh-ff-en); font-size:11px; font-weight:600; letter-spacing:.22em; line-height:1;
  background:linear-gradient(90deg,#5FB4FF 0%,#7FA6FF 34%,#A79CF3 58%,#D39FE0 80%,#F5A6CB 100%);
  box-shadow:0 8px 20px rgba(120,150,235,.30);
  transition:transform .2s ease,box-shadow .2s ease;
}
.entry-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(120,150,235,.36); color:#fff; }
.entry-btn svg{ width:1.85em; height:1em; fill:none; stroke:currentColor; stroke-width:1.6;
                stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--ease); }
.entry-btn:hover svg{ transform:translateX(4px); }

/* ================= 3. ヒーローの箱と背景 ================= */
/* ヘッダーの後ろまで背景を敷きたいので、ヘッダーの高さぶん上へずらして、
   同じだけ上に余白を取っています（ヘッダーは sticky のままです）。 */
html body[data-page="index"] .hero.fh{
  position:relative; z-index:2; display:block;
  margin-top:calc(-1 * var(--fh-nav-h));
  min-height:100svh; padding:var(--fh-nav-h) 0 0;
  overflow:hidden; clip-path:none; isolation:isolate; text-align:left;
  background:transparent; border-bottom:0; color:var(--fh-ink);   /* 地色は全ページ共通の背景（.fbg／html）と同じ白 */
}
html body[data-page="index"] .hero.fh::before,
html body[data-page="index"] .hero.fh::after{ display:none; }
/* ★下の節へシームレスにつなぐため、ヒーローの絵（白い地ごと）は下の 26% で徐々に消え、
     その下から全ページ共通の背景（.fbg。同じ白地に同じ種類の図形）が見えてきます（2026-09-23 のご指示）。 */
.fh__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 74%,transparent 100%); }
.fh__svg{ position:absolute; inset:-3%; width:106%; height:106%; display:block;
  animation:fhDrift 16s ease-in-out infinite alternate; }   /* 絵全体もゆっくり流す（recruit-design.css の @keyframes fhDrift） */
.fh__svg--sp{ display:none; }

/* ================= 4. 文字 ================= */
/* --- 左のコピー。1672 のとき 左端 159px（参考画像は 255px。「もう少し左に」のご指示で 2026-09-23 に 2 回寄せた）、上下は中央 --- */
.fh__in{
  position:absolute; z-index:2; left:9.5%; top:50%; transform:translateY(-50%);
  margin-top:-.4vw; pointer-events:none;
}
.fh__in > *{ pointer-events:auto; }
.fh__eyebrow{
  margin:0 0 .95vw .8vw; font-family:var(--fh-ff-en); font-style:italic; font-weight:400;
  font-size:clamp(11px,1.08vw,18px); letter-spacing:.175em; line-height:1; color:var(--fh-eyebrow);
  white-space:nowrap;
}
/* 太さは 400（参考画像は 700。「もっと細く」のご指示で 700→600→400。2026-09-23）
   ★戻したいときはここの font-weight と inc/recruit.php の書体の指定（Inter+Tight の 1,400）を合わせて変える */
.fh__title{ margin:0; font-family:var(--fh-ff-ttl); font-style:italic; font-weight:400; letter-spacing:-.03em; }
.fh__l{ display:block; width:max-content; line-height:.86; color:var(--fh-ink); }
/* 2行組み … 1行目 Create、2行目 «#Future with us.»（with us. を #Future の右へ。2026-09-23 のご指示）。
   3つとも同じ大きさ 120px（参考画像は 126／158／96 の3行組み）。狭い画面では with us. が自動で次の行に折れる。 */
.fh__l--1{ font-size:clamp(44px,7.2vw,120px); letter-spacing:-.025em; margin-top:.09em; }   /* Create   120px */
.fh__l--2,.fh__l--3{ display:inline-block; vertical-align:baseline; }
.fh__l--3{ margin-left:.11em; }   /* Future と with の間を、with と us の間と同じに（2026-09-24 のご指示。以前 .22em） */
.fh__l--2{ font-size:clamp(44px,7.2vw,120px); margin:-.03em 0 0 -.02em; letter-spacing:-.01em;   /* #Future  120px */
  padding-right:.06em;
  /* 参考画像の色に白を 2 割ほど混ぜた、やさしい色（空色→藤→桃） */
  background:linear-gradient(90deg,#85D6FD 0%,#91CEFD 18%,#A1C7FD 36%,#B2BBFA 50%,#CFB3EF 63%,#DCB5EB 73%,#F3B3D1 85%,#FDB5C4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.fh__l--3{ font-size:clamp(44px,7.2vw,120px); margin-top:-.01em; letter-spacing:0; }   /* with us.  120px */
.fh__company{
  margin:1.5vw 0 0 .55vw; font-family:var(--ff-jp); font-size:clamp(12px,1.44vw,24px); font-weight:500;
  letter-spacing:.25em; line-height:1; color:var(--fh-ink-2); white-space:nowrap; font-feature-settings:"palt";
}

/* --- 左下の «SCROLL»。縦書きの文字と、下へ流れて消える線（2026-09-23。以前の PEOPLE / TOWN … の代わり） --- */
.fh__scroll{
  position:absolute; z-index:2; left:3.3%; bottom:5.5%;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none; color:var(--fh-side);
}
.fh__scroll-txt{
  writing-mode:vertical-rl; font-family:var(--fh-ff-en); font-size:clamp(8px,.62vw,10.5px); font-weight:600;
  letter-spacing:.32em; line-height:1; margin-left:.32em;
}
.fh__scroll-line{
  position:relative; width:1.5px; height:clamp(54px,5.6vw,92px); overflow:hidden;
  background:rgba(78,94,124,.16);
}
.fh__scroll-line::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:100%;
  background:linear-gradient(180deg,#2FC1FF 0%,#7C86FF 50%,#F27ACB 100%);
  transform:translateY(-100%);
  animation:fhScrollLine 2.4s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fhScrollLine{
  0%  { transform:translateY(-100%); }
  45% { transform:translateY(0); }
  100%{ transform:translateY(100%); }
}
.fh__scroll:hover .fh__scroll-txt{ color:var(--fh-ink); }

/* --- 右のリード。1672 のとき x 1180px、y 430〜580 --- */
/* ★右のリード（.fh__lead）は 2026-09-23 のご指示で外しました（recruit-index.php では if ( false ) で残しています）。
     以下は戻したときのための指定です。 */
.fh__lead{ position:absolute; z-index:2; left:70.6%; top:53.7%; transform:translateY(-50%); margin:0; pointer-events:none; text-align:left; }
.fh__lead-jp{
  margin:0; font-family:var(--ff-jp); font-size:clamp(15px,1.79vw,30px); font-weight:500;
  letter-spacing:.2em; line-height:1.55; color:var(--fh-ink-2); white-space:nowrap; font-feature-settings:"palt";
}
.fh__lead-en{
  margin:1.4vw 0 0; font-family:var(--fh-ff-en); font-size:clamp(9px,.84vw,14px); font-weight:500;
  letter-spacing:.3em; line-height:2.1; color:var(--fh-lead-en); white-space:nowrap;
}

/* ================= 5. 登場の動き ================= */
/* 文字は下から少し持ち上がりながら現れます。背景は最初から出しておきます。
   ★.fh__side と .fh__lead は transform を位置決めに使っているので、動きは translate で付けています。
   ★ENTRY ボタンも同じ動き（.fh-rise）。top.css の .rise は transform を使うので、
     ボタンのホバー（transform）とぶつかります。ここでは使いません。 */
.fh__eyebrow,.fh__l,.fh__company,.fh__scroll,.fh__lead{ animation:fhIn .9s var(--ease-out) both; }
/* 出る順番 … Create → #Future → with us. を 0.45 秒ずつ（«もう少し間を» で 0.25 → 0.45）。肩書き・会社名は早めに（2026-09-23 のご指示。以前は .12/.22/.32、会社名 .45） */
.fh__eyebrow{ animation-delay:0s }
.fh__l--1{ animation-delay:.05s }
.fh__l--2{ animation-delay:.5s }
.fh__l--3{ animation-delay:.95s }
.fh__company{ animation-delay:.15s }
.fh__scroll,.fh__lead{ animation-delay:.5s }
.fh-rise{ animation:fhIn .9s var(--ease-out) var(--d,0s) both; }
@keyframes fhIn{ from{ opacity:0; translate:0 18px } to{ opacity:1; translate:0 0 } }
/* 見出しの3つ（Create／#Future／with us.）は、左から右へ «スパッ» と現れる（2026-09-23 のご指示。以前は上の fhIn）。
   .4 秒で、出だしで一気に開いて最後だけ少し締める（expo-out）。★«ぬめぬめ» とのご指摘で .95 秒のゆっくりした開き方から変えた。
   clip-path の右側を 100% → 0 に。★上下左右を -.25em 広げているのは、斜体の文字がはみ出す分を切らないため */
.fh__l{ animation-name:fhWipe; animation-duration:.4s; animation-timing-function:cubic-bezier(.19,1,.22,1); }   /* ★遅れ（上の .fh__l--1〜3）を消さないよう、一括指定は使わない */
@keyframes fhWipe{
  from{ clip-path:inset(-.25em 100% -.25em -.25em); }
  to  { clip-path:inset(-.25em -.25em -.25em -.25em); }
}

/* --- 背景の図形ひとつひとつが、ゆっくり漂います（2026-09-23 のご指示。WebGL ではなく CSS） ---
   SVG の各図形に class="fh-f" と、動く量の変数（--dx/--dy：何px 動くか、--r：何度傾くか、
   --t：一往復の秒数、--dl：始める位相）が付いています（recruit-index.php）。
   ★動きの本体（.fh-f と @keyframes fhFloat）は、全ページの背景と読み込み画面でも使うので
     css/recruit-design.css にあります。
   ★画面のふちに接している図形は、動いても白い隙間が出ないよう、ふちの 30px 外まで延ばしてあります。 */
@media (prefers-reduced-motion:reduce){
  .fh__eyebrow,.fh__l,.fh__company,.fh__scroll,.fh__lead,.fh-rise{ animation:none; }
  .fh__scroll-line::after{ animation:none; transform:none; }
}

/* ================= 6. 画面幅ごとの調整 ================= */
/* 1080px 以下は top.css がメニューを隠してハンバーガーに切り替えます（ENTRY は残す） */
@media (max-width:1080px){
  .entry-btn{ margin-left:auto; }
}
@media (max-width:1000px){
  .fh__in{ left:8%; }
  .fh__l--1,.fh__l--2,.fh__l--3{ font-size:clamp(44px,8.5vw,84px); }
  .fh__company{ font-size:clamp(12px,1.7vw,17px); }
  .fh__eyebrow{ font-size:clamp(11px,1.35vw,14px); }
  .fh__lead{ left:auto; right:6%; top:auto; bottom:9%; transform:none; }
  .fh__lead-jp{ font-size:clamp(15px,2.2vw,22px); }
  .fh__lead-en{ font-size:clamp(9px,1.05vw,11px); margin-top:10px; }
  .fh__scroll{ left:3%; }
}
/* スマホ。背景は縦長用の SVG に切り替え、文字は上から順に積みます */
@media (max-width:760px){
  .entry-btn{ height:36px; padding:0 14px 0 18px; font-size:10px; letter-spacing:.18em; }
  .fh__svg--pc{ display:none; }
  .fh__svg--sp{ display:block; }
  html body[data-page="index"] .hero.fh{ min-height:max(640px,100svh); padding:var(--fh-nav-h) 0 0; }
  .fh__in{ left:7%; top:44%; margin-top:0; }
  .fh__eyebrow{ font-size:11px; letter-spacing:.16em; margin-bottom:12px; }
  .fh__title{ letter-spacing:-.03em; }
  /* スマホも2行組み（#Future の右に with us.。2026-09-24 のご指示。以前は3行組み）。
     «#Future with us.» は約 6.9 文字ぶんの幅。«少し小さく» のご指示で 12.6vw → 11.4vw（412px で 47px、360px で 41px）。折り返さないよう nowrap */
  .fh__title{ white-space:nowrap; }
  .fh__l--1,.fh__l--2,.fh__l--3{ font-size:clamp(34px,11.4vw,60px); }
  .fh__l--3{ margin-left:.045em; }   /* Future と with の間を with と us の間と同じに（スマホは PC より詰める） */
  .fh__l--2,.fh__l--3{ margin-top:.15em; }   /* Create と #Future の行間を少し空ける（2026-09-24 のご指示） */
  .fh__company{ margin-top:16px; font-size:clamp(11px,3.4vw,14px); letter-spacing:.14em; }
  .fh__scroll{ display:none; }   /* スマホは左下にリードがあるので出さない */
  .fh__lead{ left:7%; right:auto; top:auto; bottom:7%; transform:none; }
  .fh__lead-jp{ font-size:clamp(16px,4.9vw,20px); line-height:1.6; }
  .fh__lead-en{ font-size:9.5px; letter-spacing:.24em; margin-top:8px; line-height:1.9; }
}
@media (max-width:480px){
  .entry-btn{ display:none; }   /* 入口はハンバーガーの中の「募集要項」に任せます */
}
/* 横長で低い画面（ノートPCの半分など）では、文字を少し小さくして収めます */
@media (min-width:761px) and (max-height:640px){
  .fh__l--1,.fh__l--2,.fh__l--3{ font-size:clamp(42px,5.6vw,90px); }
}