@charset "UTF-8";
/* =========================================================
   トップページの FV (案11 作り込み版)
   - クラスはすべて kfv- で始める。ヘッダー (khd-) は ks-header.css
   - 写真は管理画面の「トップスライド」(PC 画像・SP 画像・alt) から出す
   - 写真の切り替え方は section の data-transition (fade / wipe / curtain / slide / drift)
   元に戻すときは home/index.blade.php を ~/bak-fv-* の内容に戻す
   ========================================================= */
:root {
  --kfv-gap: 14px;                 /* 画面の端とオレンジの面のすき間 */
  --kfv-box-h: 50vh;               /* オレンジの面の高さ */
  --kfv-box-ratio: 30%;            /* オレンジの面の幅 (文字の幅に対する割合) */
  --kfv-interval: 6500ms;          /* 写真の切り替え間隔 (JS からも上書きする) */
}
.kfv *, .kfv *::before, .kfv *::after, .kfv-opening * { box-sizing: border-box; }
.kfv :where(a) { color: inherit; text-decoration: none; }
.kfv :where(a):hover { opacity: 1; }
.kfv :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.kfv :where(img), .kfv-opening :where(img) { display: block; max-width: 100%; }
.kfv :where(a, button):focus-visible { outline: 2px solid var(--kfv-orange-2); outline-offset: 3px; border-radius: 4px; }
.kfv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* =========================================================
   FV
   ========================================================= */
.kfv { position: relative; height: 100vh; height: 100svh; min-height: 640px; max-height: 1200px; overflow: hidden; background: #1d2a3a; color: #fff; }

/* ---------- 写真 ---------- */
/* 写真の拡大・流れる動きが枠の外にはみ出さないよう overflow: hidden (スマホでは枠がボタンの段の上で終わるため) */
.kfv__slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; opacity: .84; overflow: hidden;
  transform-origin: bottom; transform: translate3d(0, calc(var(--kfv-scroll, 0) * 40vh), 0) scale(calc(1 + var(--kfv-scroll, 0) * .08)); will-change: transform; }
.kfv__slides::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(var(--kfv-navy), .5), rgba(var(--kfv-navy), 0) 55%),
    linear-gradient(90deg, rgba(var(--kfv-navy), .35), rgba(var(--kfv-navy), 0) 50%),
    linear-gradient(180deg, rgba(var(--kfv-navy), .4), rgba(var(--kfv-navy), 0) 24%); }
.kfv__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.kfv__slide.is-active { opacity: 1; z-index: 1; }
.kfv__slide picture { display: block; width: 100%; height: 100%; }
/* 少し寄った状態からゆっくり引いていく */
.kfv__slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.08); }
.kfv__slide.is-zoom img { animation: kfv-zoom calc(var(--kfv-interval) + 1400ms) linear forwards; }
@keyframes kfv-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.kfv.is-paused .kfv__slide.is-zoom img { animation-play-state: paused; }

/* ---------- 写真の切り替え方 (section の data-transition で選ぶ) ----------
   fade    : ふわっと入れ替わる (初期値)
   wipe    : 新しい写真が左から右へ、幕を開けるように現れる
   curtain : オレンジの面が横切って、その後ろから新しい写真が現れる
   slide   : 新しい写真が下からせり上がり、前の写真は少し上へ押し出される
   drift   : 前の写真が上へ流れながら消え、新しい写真が浮かび上がる (buddica.jp と同じ)
------------------------------------------------------------------------- */
.kfv[data-transition]:not([data-transition="fade"]) .kfv__slide { opacity: 1; visibility: hidden; transition: none; }
.kfv[data-transition]:not([data-transition="fade"]) .kfv__slide.is-active,
.kfv[data-transition]:not([data-transition="fade"]) .kfv__slide.is-leaving { visibility: visible; }
.kfv__slide.is-leaving { z-index: 0; }

/* wipe */
.kfv[data-transition="wipe"] .kfv__slide.is-active { animation: kfv-wipe 1.3s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes kfv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.kfv[data-transition="wipe"] .kfv__slide.is-leaving img { animation: none; transform: scale(1); }

/* curtain: 前半はオレンジの面が左から伸びて前の写真を覆い、後半は面が右へ抜けて新しい写真が見える */
.kfv[data-transition="curtain"] .kfv__slide.is-active { animation: kfv-wipe .65s cubic-bezier(.7, 0, .3, 1) both; }
.kfv[data-transition="curtain"] .kfv__slide::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(90deg, var(--kfv-orange), var(--kfv-orange-2)); transform: scaleX(0); pointer-events: none; }
.kfv[data-transition="curtain"] .kfv__slide.is-active::after { transform-origin: right; animation: kfv-curtain-out .7s cubic-bezier(.7, 0, .3, 1) .6s both; }
@keyframes kfv-curtain-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* slide */
.kfv[data-transition="slide"] .kfv__slide.is-active { animation: kfv-up-in 1.2s cubic-bezier(.7, 0, .2, 1) both; }
.kfv[data-transition="slide"] .kfv__slide.is-leaving { animation: kfv-up-out 1.2s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes kfv-up-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kfv-up-out { from { transform: none; } to { transform: translateY(-30%); filter: brightness(.6); } }

/* drift (buddica.jp と同じ時間配分) */
.kfv[data-transition="drift"] .kfv__slide.is-active { animation: kfv-drift-in 1.4s ease-out both; }
.kfv[data-transition="drift"] .kfv__slide.is-leaving { z-index: 2; animation: kfv-drift-out 1.2s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes kfv-drift-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kfv-drift-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-20%); } }
.kfv[data-transition="drift"] .kfv__slide img { transform: scale(1); }
.kfv[data-transition="drift"] .kfv__slide.is-zoom img { animation-name: kfv-zoom-in; }
@keyframes kfv-zoom-in { from { transform: scale(1); } to { transform: scale(1.1); } }

/* ---------- 左下の文字とオレンジの面 ---------- */
.kfv__copy { position: absolute; z-index: 5; left: var(--kfv-gap); bottom: var(--kfv-gap); width: max-content; max-width: calc(100% - var(--kfv-gap) * 2); height: var(--kfv-box-h);
  display: flex; flex-direction: column; justify-content: center; padding: 0 3vw 0 5vw; isolation: isolate; }
/* オレンジの面は文字の左側だけに敷き、文字は右の写真の上まではみ出す。開いたときに下から伸びる */
.kfv__box { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: var(--kfv-box-ratio); border-radius: var(--kfv-radius);
  background: linear-gradient(160deg, var(--kfv-orange-2) 0%, var(--kfv-orange) 70%);
  transform-origin: bottom; transform: scaleY(0); transition: transform .7s var(--kfv-ease); }
.kfv.is-ready .kfv__box { transform: none; }
.kfv.is-from-opening .kfv__box { transition: none; transform: none; }

.kfv__catch, .kfv__h1 { margin: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.kfv__catch { font-size: clamp(40px, 4.4vw, 76px); font-weight: 900; line-height: 1.32; letter-spacing: .04em; }
.kfv__h1 { margin-top: 26px; font-size: clamp(15px, 1.35vw, 20px); font-weight: 700; line-height: 1.8; letter-spacing: .04em; }
.kfv__row { display: block; overflow: hidden; padding-left: .04em; }
.kfv__row > span { display: block; opacity: 0; transform: translateX(-50%); transition: opacity .7s var(--kfv-ease), transform .7s var(--kfv-ease); transition-delay: calc(var(--i) * 60ms + 60ms); }
.kfv.is-ready .kfv__row > span { opacity: 1; transform: none; }

/* ---------- 右下: SCROLL・写真の切り替え・一時停止・求人を探す ---------- */
.kfv__actions { position: absolute; z-index: 6; right: 28px; bottom: 30px; display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateY(16px); transition: opacity .6s ease .3s, transform .6s ease .3s; }
.kfv.is-ready .kfv__actions { opacity: 1; transform: none; }
.kfv__glass { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: var(--kfv-radius);
  background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 12px; font-weight: 600; transition: background-color .3s; }
.kfv__glass:hover { background: rgba(255, 255, 255, .24); }
.kfv__scroll svg { width: 14px; height: 14px; color: var(--kfv-orange-2); animation: kfv-bob 1.8s ease-in-out infinite; }
@keyframes kfv-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.kfv.is-scrolled .kfv__scroll { opacity: 0; pointer-events: none; }

/* 写真の切り替え: 選ばれている点の周りに、次に切り替わるまでの残り時間を円で表示 */
.kfv__dots { gap: 4px; padding: 0 8px; }
.kfv__dot { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.kfv__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background-color .3s, transform .3s; }
.kfv__dot[aria-current="true"]::before { background: #fff; transform: scale(1.2); }
.kfv__dot svg { position: absolute; inset: 3px; width: 24px; height: 24px; transform: rotate(-90deg); opacity: 0; }
.kfv__dot[aria-current="true"] svg { opacity: 1; }
.kfv__dot circle { fill: none; stroke: var(--kfv-orange-2); stroke-width: 2; stroke-dasharray: 63; stroke-dashoffset: 63; }
.kfv__dot.is-run circle { animation: kfv-ring var(--kfv-interval) linear forwards; }
.kfv.is-paused .kfv__dot.is-run circle { animation-play-state: paused; }
@keyframes kfv-ring { to { stroke-dashoffset: 0; } }
.kfv__play { width: 46px; justify-content: center; padding: 0; }
.kfv__play svg { width: 16px; height: 16px; }
.kfv__play .i-play, .kfv.is-paused .kfv__play .i-pause { display: none; }
.kfv.is-paused .kfv__play .i-play { display: block; }

/* =========================================================
   オープニング: 白い画面にロゴと読み込みバー → 縮んでオレンジの面になる
   (その人が初めてサイトを開いたときだけ。クリック・キー操作で飛ばせる)
   ========================================================= */
.kfv-opening { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; padding-left: 8vw; background: #fafafa; cursor: pointer;
  clip-path: inset(0 0 0 0 round 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1), background-color .4s ease .25s; }
.kfv-opening__logo { width: 220px; opacity: 0; transform: translateY(8px); animation: kfv-op-logo .5s var(--kfv-ease) forwards; transition: opacity .3s; }
@keyframes kfv-op-logo { to { opacity: 1; transform: none; } }
.kfv-opening__bar { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 4px; transition: opacity .3s; }
.kfv-opening__bar::after { content: ""; position: absolute; inset: 0; background: var(--kfv-orange); transform: scaleX(var(--kfv-load, 0)); transform-origin: left; transition: transform .3s ease; }
.kfv-opening__skip { position: absolute; right: 22px; bottom: 26px; font-size: 11px; color: #9a948c; letter-spacing: .08em; transition: opacity .3s; }
.kfv-opening.is-shrink { background-color: var(--kfv-orange); cursor: default; }
.kfv-opening.is-shrink .kfv-opening__logo, .kfv-opening.is-shrink .kfv-opening__bar, .kfv-opening.is-shrink .kfv-opening__skip { opacity: 0; }
.kfv-opening.is-done { opacity: 0; transition: opacity .35s ease; }

/* オープニングを出さない場合 (JS が動かない・もう見た人・検索エンジン)。
   JS が動かないときは、文字やボタンも最初から見せる */
html:not(.kfv-js) .kfv-opening, .kfv-skip-opening .kfv-opening { display: none; }
html:not(.kfv-js) .kfv__row > span, html:not(.kfv-js) .kfv__actions { opacity: 1; transform: none; }
html:not(.kfv-js) .kfv__box { transform: none; }
/* 検索エンジンには、文字やボタンを動きなしで最初から見せる */
.kfv-bot .kfv__row > span, .kfv-bot .kfv__actions { opacity: 1; transform: none; transition: none; }
.kfv-bot .kfv__box { transform: none; transition: none; }

/* FV が見えている間は「ページの先頭へ」ボタンを隠す (FV の「求人を探す」ボタンと重なるため) */
.kfv-hero-visible .top_link_btn { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility .3s; }

/* =========================================================
   スマホ
   ========================================================= */
@media (max-width: 900px) {
  :root { --kfv-gap: 10px; --kfv-box-h: 250px; --kfv-box-ratio: 34%; }

  .kfv { min-height: 600px; }
  .kfv__slides { bottom: 74px; }
  .kfv__slide img { object-position: var(--pos-sp, 50% 50%); }
  .kfv__copy { bottom: 84px; padding: 0 22px; }
  .kfv__catch { font-size: clamp(36px, 11vw, 52px); }
  .kfv__h1 { margin-top: 14px; font-size: 14px; }
  .kfv__actions { left: 10px; right: 10px; bottom: 14px; gap: 6px; }
  .kfv__actions .kfv-btn { flex: 1; padding: 14px 10px; font-size: 13px; gap: 6px; }
  .kfv__scroll { display: none; }
  .kfv__glass { height: 44px; }
  .kfv__dots { padding: 0 4px; gap: 0; }
  .kfv__play { width: 44px; }
  .kfv-opening { padding-left: 0; justify-content: center; }
  .kfv-opening__logo { width: 170px; }
}

/* 動きを減らす設定の人には、オープニングとズームを出さない */
@media (prefers-reduced-motion: reduce) {
  .kfv-opening { display: none; }
  .kfv__slide img, .kfv__slide.is-zoom img { animation: none; transform: none; }
  .kfv__slides { transform: none; }
  .kfv__row > span, .kfv__box, .kfv__actions { transition: none; }
  .kfv__scroll svg { animation: none; }
  .kfv .kfv__slide, .kfv .kfv__slide::after { animation: none !important; }
}