@charset "utf-8";
/* ==========================================================================
   読み込み画面（ブート）— 採用特設サイト共通
   --------------------------------------------------------------------------
   ★このファイルだけは top.css / style.css の両方と一緒に読み込みます。
     トップ（top.css）と下層ページ（style.css）は同時に読まれないので、
     読み込み画面のように «全ページ共通» のものはここに分けています。
     変数（--ease など）は css を読む順に左右されないよう、ここでは使わず
     数値を直に書いています。

   ■ この画面が要る理由は2つ
     1. トップは写真とフォントの量が多く、開いた直後は
        「文字だけ出て、あとから写真が入る」ように見えていました。
     2. 下層ページも、日本語のWebフォント（Noto Sans JP）が届くまでは
        端末の書体で描かれるため、あとから字の形と折り返しが変わって
        «文字がばらばらと出てくる» ように見えていました（2026-09-22 の指摘）。
     どちらも「フォントと最初の画像がそろうまで、1枚の面で隠す」ことで直します。

   ■ 見た目（2026-09-23）… ビッグバン。画面のまん中から図形がこちらへ弾け飛び、一部がそのままヒーロー（下層は共通の背景）になる
     流れ … 動きを止めたまま用意（.is-arm）→ 画面のまん中から図形が一斉に、回転しながら大きくなって、こちらへ弾け飛ぶ（.is-fly。出だしが一番速い）。
         本物の約 2 倍の «写し»（canvas .boot__cv に JS が描く）は、そのまま大きくなって四方八方の画面の外へ抜ける。
         本編の絵の図形（.fh-f）はすっと減速して本編の位置に収まる（bootIn。行き過ぎない）。線は引かれるように（bootLine）、もやはふわっと（bootHaze）。
       → 図形が収まった瞬間に、読み込み画面を外す（消える間を置かない）。本編の図形はそこから一斉に漂い始める（html.is-booted …）。
         念のための打ち切りのときだけ .45 秒で消す（.is-out）。
     変数（--gx/--gy/--gr/--op/--fd/--ft/--len）は JS（template-parts/recruit-boot.php の «ビッグバン»）が図形ごとに入れます。
     本編と同じ絵が同じ位置に収まるので、読み込み画面が消えるときに境目が出ません。
     帯はヒーローの #Future と同じ空色→桃のグラデーション（画面の下端に細く）。
     ★2026-09-23 に «結晶» → «紙吹雪» → «図形がまん中から飛んでくる» → いまの形、とご指示で変えました。
       控え … _archive/theme-backups/recruit-boot-crystal-confetti-*／recruit-boot-confetti-hero-*／recruit-boot-flyin-*。
     ★閃光や衝撃波のような強い光は入れていません（以前 «サイトの色調のまま» とのご指示で外したため）。
       まん中の点（.boot__core）も «丸い球体が見える» とのご指示で外しました。
   ========================================================================== */

.boot{
  display:none;                 /* 合図（html.is-booting）が付くまで出しません */
  position:fixed; inset:0; z-index:9999;
  align-items:center; justify-content:center;
  overflow:hidden;
  background:#FEFEFE;           /* ヒーロー・本編の地色と同じ白 */
}
html.is-booting .boot{ display:flex }
/* 消える … 図形が飛び終わって、絵が本編と同じになってから（JS の endBoot）。下の本編の絵と同じなので、白地が抜けるだけに見える */
.boot.is-out{ opacity:0; pointer-events:none; transition:opacity .45s ease }

/* --- 本編の絵（図形 .fh-f）------------------------------------------------------------
   .boot の中の絵は本編と同じ SVG（トップはヒーロー .fh__bg、下層は共通の背景 .fbg）。
   ★絵全体（.fh__svg／.fbg__svg）は本編の fhDrift の «始まりの位置» に固定しておきます。
     本編の図形は読み込み中は止めてあり（下の html.is-booting …）、読み込み画面が消えたあと最初の位置から動き出すので、
     この画面の絵と本編の絵が ぴったり重なります。
   ★動きは transform だけで書きます（translate／rotate／scale の個別指定は、SVG の図形では Chrome が描き直さないことがある）。
   ★transition ではなく keyframes です（Chrome は «アニメーション中だったプロパティ» に transition を掛けない）。 */
.boot .fh__bg,
.boot .fbg{ position:absolute; inset:0; z-index:1; visibility:hidden; }
/* 読み込み画面の中の絵は、下層ページで弾けさせるとき（.is-art）だけ見せる。トップは本物のヒーロー（#site）を弾けさせるので出さない */
.boot.is-art .fh__bg,
.boot.is-art .fbg{ visibility:visible; }
/* トップ … 弾けた瞬間に読み込み画面を透明にして、下の本物のヒーローを見せる（写しの canvas と帯だけ重ねる） */
.boot.is-see{ background:transparent; }
.boot .fh__svg,
.boot .fbg__svg{ animation:none; transform:translate(-1.2%,-1%); }
/* ヒーローの SVG の白い地（<rect>）は、この画面では消す（この画面の地色と同じ白なので見た目は変わらない） */
.boot .fh__svg > rect:not(.fh-f),
.boot .fbg__svg > rect:not(.fh-f){ display:none; }

/* 飛ぶ前 … 図形は画面のまん中に、小さく隠れている。
   .bb は «弾けさせる入れ物»（トップは #site のヒーロー .fh__bg、下層は読み込み画面の中の .fbg）に JS が付ける */
.bb .fh-f{ animation:none; transform-box:fill-box; transform-origin:center; opacity:0; }
.bb .fh-f{ transform:translate(var(--gx,0px),var(--gy,0px)) scale(.03) rotate(var(--gr,0deg)); }
.bb .fh-f.is-line,
.bb .fh-f.is-haze{ transform:none; }
.bb .fh-f.is-line{ stroke-dashoffset:var(--len,0); }

/* 弾ける … まん中から、回転しながら大きくなって、こちらへ。出だしが一番速く、すっと減速して本編の位置に収まる。
   ★行き過ぎてから戻る動き（1.08 倍）はやめた（«張り付いたあと、きゅっと小さくなって急に止まる» とのご指摘。2026-09-23）。
     収まった瞬間に読み込み画面を外し、本編の図形がそのまま漂い始める（下の html.is-booted …）。 */
.bb.is-arm .fh-f{ animation:bootIn var(--ft,1.1s) linear var(--fd,0s) both; }
@keyframes bootIn{
  0%  { opacity:0; transform:translate(var(--gx,0px),var(--gy,0px)) scale(.03) rotate(var(--gr,0deg));
        animation-timing-function:cubic-bezier(.15,.62,.3,1); }
  6%  { opacity:var(--op,1); }
  100%{ opacity:var(--op,1); transform:none; }
}
/* 線 … 引かれるように */
.bb.is-arm .fh-f.is-line{ animation:bootLine var(--ft,.9s) cubic-bezier(.3,.7,.2,1) var(--fd,0s) both; }
@keyframes bootLine{
  from{ opacity:var(--op,1); stroke-dashoffset:var(--len,0); }
  to  { opacity:var(--op,1); stroke-dashoffset:0; }
}
/* もや … ふわっと */
.bb.is-arm .fh-f.is-haze{ animation:bootHaze var(--ft,1.1s) ease var(--fd,0s) both; }
@keyframes bootHaze{ from{ opacity:0; } to{ opacity:var(--op,1); } }
/* トップのヒーロー … 弾けている間から、本編の漂い（fhFloat）を重ねて動かす（2026-09-23 のご指示 «一瞬ピタッとなるけど、止まらないでそのまま動き続けて»）。
   漂いを下に敷き（replace）、弾ける動きをその上に足す（animation-composition:add）。弾ける動きが収まっても漂いは動いたままなので、止まらない。
   ★一括指定（animation:）は使わない。上の «止めたまま用意»（play-state:paused）まで消えてしまうため。
   ★読み込み画面が外れても .bb／.is-arm は外さない（recruit-boot.php の cf.keep）。外すと漂いが最初からになって飛ぶ。
   ★下層（読み込み画面の中の絵）は、外れたあと本編の背景（body > .fbg）に入れ替わるので、この指定は付けない。 */
#site .bb.is-arm .fh-f{
  animation-name:fhFloat, bootGlide;
  animation-duration:var(--t,12s), var(--ft,1.1s);
  animation-timing-function:ease-in-out, linear;
  /* 漂いの始まりをずらし、すべり終わるころ（約 2.3 秒）に漂いが一番速いところに来るように（fhFloat は 25% ごとに一度ゆるむため）。
     2.3 秒のとき «一周の 3/8» … 25%〜50% の区間のまん中 */
  animation-delay:calc(2.3s - var(--t,12s) * .375), var(--fd,0s);
  animation-iteration-count:infinite, 1;
  animation-fill-mode:none, both;
  animation-composition:replace, add;
}
#site .bb.is-arm .fh-f.is-line{
  animation-name:fhFloat, bootLine;
  animation-duration:var(--t,12s), var(--ft,.9s);
  animation-timing-function:ease-in-out, cubic-bezier(.3,.7,.2,1);
}
#site .bb.is-arm .fh-f.is-haze{
  animation-name:fhFloat, bootHaze;
  animation-duration:var(--t,12s), var(--ft,1.1s);
  animation-timing-function:ease-in-out, ease;
}
/* トップ用の弾ける動き … bootIn と同じ道筋を 2.1〜2.4 秒で。出だしは速く、終わりはゆっくりすべらせ、速さを 0 にしないまま漂いへ渡す
   （曲線の終わりの傾きを少し残している。cubic-bezier の 4 つ目を 1 でなく .97 に）。 */
@keyframes bootGlide{
  0%  { opacity:0; transform:translate(var(--gx,0px),var(--gy,0px)) scale(.03) rotate(var(--gr,0deg));
        animation-timing-function:cubic-bezier(.08,.72,.3,.97); }
  4%  { opacity:var(--op,1); }
  100%{ opacity:var(--op,1); transform:none; }
}
/* 写し … canvas に JS が描く（まん中から四方八方へ、大きくなりながら画面の外へ）。本物の図形より手前 */
.boot__cv{ position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; }

/* ★動きは «ため»（.is-arm）のうちに止めたまま用意しておき、弾ける瞬間（.is-fly）に動かし始める。
     弾ける瞬間に図形の動きを一度に用意すると、そこで画面が止まり、一番速い出だしが見えなかった（2026-09-23）。
     ★この指定は上の animation の指定より後ろに置く（同じ強さなので、後ろが勝つ）。 */
.bb.is-arm:not(.is-fly) .fh-f{ animation-play-state:paused; }
/* トップ … 本編の動きを止めている（html.is-hold）あいだも、弾ける動きだけは動かす */
html.is-hold #site .bb.is-fly .fh-f{ animation-play-state:running !important; }

/* 読み込み画面が外れた瞬間から、本編の図形をすべて一斉に漂わせる（ふだんは図形ごとに 0〜1.2 秒の遅れ --dl がある）。
   ★遅れがあると、収まった図形の一部がそのぶん止まったままになり «急に止まる» ように見えるため（2026-09-23）。
   ★is-booted は読み込み画面の JS（endBoot）が付け、そのあと外さない（途中で遅れを変えると動きが飛ぶ）。 */
html.is-booted #site .fh-f,
html.is-booted body > .fbg .fh-f{ animation-delay:0s; }

/* 読み込み中は本編の背景の図形を動かさない（«最初の位置»＝この画面の図形が飛んでいく先、で待たせる）。
   トップのヒーローは #site の中なので、下の html.is-hold で同じように止まります。
   ★図形の --dl（動き始めるまでの遅れ）は正の値にしてあります。負にすると «最初の位置» が
     途中の位置になり、飛んだ先とずれます（2026-09-23）。 */
html.is-booting body > .fbg .fh-f,
html.is-booting body > .fbg .fbg__svg{ animation-play-state:paused !important }

/* 読み込み中はスクロールさせません（本編が裏で動いてしまうため） */
html.is-booting,
html.is-booting body{ overflow:hidden }
/* ★スクロールバーの溝を常に確保します（2026-09-23）。
     これが無いと、読み込み中（overflow:hidden）はスクロールバーが消え、読み込み画面が消えた瞬間に
     スクロールバーが現れて、その幅（Windows で約17px）ぶん画面全体が «カクッ» と左へずれていました。 */
html{ scrollbar-gutter:stable }

/* --- 帯（画面の下端） ------------------------------------------------------ */
.boot__in{
  position:absolute; z-index:3; left:50%; bottom:clamp(28px,6vh,56px);
  transform:translateX(-50%); transition:opacity .25s;
}
.boot.is-out .boot__in{ opacity:0 }
/* 進み具合の帯。数字は出しません（止まって見えたときに気になるため）。
   3px で、ヒーローの #Future と同じ空色→藤→桃のグラデーションを流します（両端を同じ色にして、つなぎ目を出さない）。 */
.boot__bar{
  position:relative; width:min(200px,52vw); height:3px;
  border-radius:99px; background:rgba(6,38,63,.07); overflow:hidden;
  opacity:0; animation:bootBar .6s cubic-bezier(.2,1.2,.4,1) .3s forwards;
}
.boot__bar i{
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:99px;
  background:linear-gradient(90deg,
    #62CBFD 0%, #86B7FC 18%, #9CA8F8 32%, #C29DEA 46%, #F09EC4 60%, #FDA0B3 70%, #C29DEA 84%, #62CBFD 100%);
  background-size:260% 100%;
  animation:bootFlow 2.6s linear infinite;
  transition:width .4s cubic-bezier(.16,1,.3,1);
}
@keyframes bootFlow{ from{ background-position:0 0 } to{ background-position:-260% 0 } }
@keyframes bootBar{ to{ opacity:1; transform:none } }

/* 本編の動きを止めておく（球体・見出し・背景のモヤ・ヘッダーの浮き上がり）。
   animation-play-state だけを止めているので、合図を外すと最初から動き出します。
   ★#site はトップだけにあります。下層ページには無いので、この指定は効きません
     （下層は «フォントがそろうまで隠す» ためだけに読み込み画面を出しています）。 */
html.is-hold #site,
html.is-hold #site *,
html.is-hold #site *::before,
html.is-hold #site *::after{ animation-play-state:paused !important }

@media (prefers-reduced-motion:reduce){
  .boot__bar{ animation:none; opacity:1; transform:none }
  .boot__bar i{ transition:none; animation:none }
  .boot,.boot.is-out{ transition:none }
  /* 飛ばさない。図形は最初から本編の位置に、本来の濃さで */
  .bb .fh-f,.bb.is-fly .fh-f{ animation:none; transform:none; opacity:var(--op,1); stroke-dashoffset:0 }
  .boot__cv{ display:none }
}

/* サイトの中でページを移ってきたとき（html.is-noboot。template-parts/recruit-boot-head.php）… 読み込み画面は出さず、
   本文を .25 秒でふわっと出すだけ（2026-09-23 のご指示「2ページ目以降は読み込み画面を出さない」） */
html.is-noboot .boot{ display:none !important; }
html.is-noboot body{ animation:bootPageIn .25s ease-out both; }
@keyframes bootPageIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ html.is-noboot body{ animation:none; } }