/* =========================================================
   山田冷機工業株式会社 求人LP（20261021a）
   色：指示書の2色（ブルー #1F5FA8／オレンジ #E58A2E＝応募ボタンだけ）＋白・グレー・黒
   書体：Noto Sans JP 400・500・700
   グラデーション・すりガラス・濃い影は使わない。角丸は4〜8px
   ========================================================= */
:root{
  --b:#1F5FA8;           /* メイン：落ち着いた青 */
  --b-d:#184C87;         /* メインの濃いめ（ホバー・押下） */
  --b-10:rgba(31,95,168,.10);
  --b-30:rgba(31,95,168,.30);
  --o:#E58A2E;           /* サブ：応募ボタンだけ */
  --o-d:#D47A20;
  --gray:#F2F4F6;        /* グレー：面 */
  --ink:#1E2328;         /* 文字（黒） */
  --ink2:#565D66;        /* 補助の文字 */
  --dark:#12181F;        /* 暗転シアター・フッター */
  --line:rgba(30,35,40,.14);
  --r:4px;
  --r-l:8px;
  --max:1240px;
  --gut:clamp(20px,4vw,64px);
  --hd:84px;
  --e1:cubic-bezier(.16,1,.3,1);   /* 入場 */
  --e2:cubic-bezier(.25,1,.5,1);   /* ホバー・開閉 */
  --e3:cubic-bezier(.77,0,.18,1);  /* 幕 */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--hd)}
body{margin:0;font-family:"Noto Sans JP",sans-serif;font-weight:400;color:var(--ink);background:#fff;line-height:2;letter-spacing:.04em;font-feature-settings:"palt" 1;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700}
ul,ol{list-style:none;margin:0;padding:0}
.pc{display:inline}.sp{display:none}
.h2,.h3,.txt,.step__t,.qa__q,.qa__a p,.req dd,.fv__lead,.tile__cap p,.num__t{word-break:auto-phrase}
.in{width:100%;max-width:calc(var(--max) + var(--gut)*2);margin:0 auto;padding:0 var(--gut)}
.ph{position:relative;overflow:hidden;background:#d9dee4;border-radius:var(--r)}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- ボタン ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:var(--r);font-weight:700;font-size:15px;letter-spacing:.08em;line-height:1.3;white-space:nowrap;overflow:hidden;isolation:isolate;transition:background-color .35s,color .35s,border-color .35s,transform .25s var(--e2)}
.btn:active{transform:scale(.97)}
.btn--o{background:var(--o);color:var(--ink)}
.btn--o:hover{background:var(--o-d)}
.btn--line{background:#fff;color:var(--b);border:1px solid var(--b)}
.btn--line:hover{background:var(--b);color:#fff}
.btn--line svg{width:18px;height:18px}
.btn--s{min-height:46px;padding:0 20px;font-size:14px}
.btn--l{min-height:64px;padding:0 34px;font-size:17px}
.btn--full{width:100%}
/* 光が斜めに走る（ホバー） */
.btn--o::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:rgba(255,255,255,.45);transform:skewX(-20deg);opacity:0;z-index:-1;pointer-events:none}
.btn--o:hover::before{animation:shine .8s var(--e2)}
@keyframes shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:0}}
/* 押したときの波紋（JSで .rip を足す） */
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes rip{to{transform:scale(4);opacity:0}}
/* 矢印の入れ替わり（ホバー） */
.arw{position:relative;width:18px;height:12px;overflow:hidden;flex:none}
.arw i{position:absolute;left:0;top:0;width:18px;height:12px;transition:transform .6s var(--e2),opacity .6s var(--e2)}
.arw i::before{content:"";position:absolute;left:0;top:5.5px;width:17px;height:1.5px;background:currentColor}
.arw i::after{content:"";position:absolute;right:1px;top:1.5px;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.arw i + i{transform:translateX(-180%);opacity:0}
.btn:hover .arw i:first-child{transform:translateX(120%);opacity:0}
.btn:hover .arw i + i{transform:none;opacity:1}
/* 電話のボタン（2段） */
.btn--tel{flex-direction:column;align-items:flex-start;gap:0;background:#fff;color:var(--ink);border:1px solid var(--b);padding:0 24px;min-height:64px}
.btn--tel small{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--ink2)}
.btn--tel b{display:inline-flex;align-items:center;gap:6px;font-size:21px;letter-spacing:.04em;color:var(--b)}
.btn--tel svg{width:17px;height:17px}
.btn--tel:hover{background:var(--b-10)}

/* ---------- ヘッダー ---------- */
.hd{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--cl)}
/* FVの中のヘッダー（白文字）。FVを過ぎると、白い地のヘッダーが上から出る */
.hd--fv{position:absolute;inset:0 0 auto;height:88px;z-index:20;color:#fff}
.hd--fix{position:fixed;inset:0 0 auto;height:var(--hd);z-index:50;background:#fff;box-shadow:0 1px 0 var(--line);transform:translateY(-100%);transition:transform .7s var(--e1)}
.hd--fix.is-on{transform:none}
.hd--fv .logo__text{color:#fff}
.hd--fv .logo__sub{color:rgba(255,255,255,.85)}
.hd--fv .hd__nav a::after{background:#fff}
.hd--fv .hd__nav a.is-current{color:#fff}
.hd--fv .hd__tel{color:#fff}
.hd--fv .hd__icon{color:#fff;border-color:rgba(255,255,255,.8)}
.logo{display:flex;flex-direction:column;gap:6px}
.logo__text{font-size:21px}
.logo__sub{font-size:11px;font-weight:500;letter-spacing:.2em;color:var(--ink2);line-height:1}
.hd__nav ul{display:flex;gap:clamp(18px,2.4vw,40px)}
.hd__nav a{position:relative;font-size:14px;font-weight:500;letter-spacing:.1em;padding:6px 0}
.hd__nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--b);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e2)}
.hd__nav a:hover::after,.hd__nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.hd__nav a.is-current{color:var(--b)}
.hd__act{display:flex;align-items:center;gap:18px}
.hd__tel{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.hd__tel svg{width:22px;height:22px;flex:none;color:var(--b)}
.hd--fv .hd__tel svg{color:#fff}
.hd__tel small{display:block;font-size:12px;line-height:1.3;letter-spacing:.06em;opacity:.8}
.hd__tel b{display:block;font-size:20px;font-weight:700;letter-spacing:.04em;line-height:1.2}
.hd__icon{display:none}

/* ---------- 固定CTA：右下に、右から滑り込む ---------- */
.fixcta{position:fixed;right:24px;bottom:24px;z-index:45;display:flex;gap:10px;transform:translateX(130%);opacity:0;transition:transform .9s var(--e3),opacity .9s}
.fixcta.is-in{transform:none;opacity:1}
.fixcta.is-off{transform:translateX(130%);opacity:0}
.fixcta .btn{min-height:58px;box-shadow:0 2px 10px rgba(18,24,31,.12)}

/* ---------- 共通：表示の動き ---------- */
.fade{opacity:0;transform:translateY(22px);transition:opacity 1s var(--e2),transform 1s var(--e2)}
.fade.is-visible{opacity:1;transform:none}
.mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--e1)}
.mask.is-visible{clip-path:inset(0 0 0 0)}
.mask img{transform:scale(1.14);transition:transform 1.9s var(--e1)}
.mask.is-visible img{transform:scale(1)}
.d1{transition-delay:.12s!important}.d2{transition-delay:.24s!important}.d3{transition-delay:.36s!important}.d4{transition-delay:.48s!important}.d5{transition-delay:.6s!important}

/* 見出し：行ごとに下からせり上がる */
.h2{font-size:clamp(30px,3.2vw,46px);line-height:1.5;letter-spacing:.08em}
.h2--xl{font-size:clamp(36px,4.6vw,68px);line-height:1.4}
.h3{font-size:clamp(24px,2.3vw,32px);line-height:1.55;letter-spacing:.07em}
.h2 .ln,.h3 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.h2 .ln > span,.h3 .ln > span{display:block;transform:translateY(110%);transition:transform 1.1s var(--e1)}
.h2.is-visible .ln > span,.h3.is-visible .ln > span{transform:none}
.h2 .ln:nth-child(2) > span,.h3 .ln:nth-child(2) > span{transition-delay:.12s}
.h-en{font-size:clamp(48px,5.4vw,80px);letter-spacing:.06em;line-height:1.1;color:var(--b)}

/* 小ラベル：番号 → 伸びる罫線 → 日本語 */
.lb{display:inline-flex;align-items:center;gap:0;font-size:14px;font-weight:700;letter-spacing:.16em;color:var(--b);line-height:1.4}
.lb__no{display:inline-flex;align-items:center;font-size:13px;letter-spacing:.1em}
.lb__no::after{content:"";display:block;width:0;height:1px;background:currentColor;margin:0 14px;transition:width .9s var(--e1) .15s}
.lb.is-visible .lb__no::after{width:40px}
.lb--w{color:#fff}
.txt{font-size:15.5px;line-height:2.15}
.txt + .txt{margin-top:16px}
.sec-h .h2{margin-top:18px}
.sec-h__txt{margin-top:28px;max-width:40em}
.sec-h--c{text-align:center;align-items:center;display:flex;flex-direction:column}

/* 写真の入れ替え枠（クロスフェード） */
.swap{position:relative;overflow:hidden}
.swap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease-out}
.swap img.is-on{opacity:1}

/* =========================================================
   ① FV：デザイナー案B「青の地と重なる写真」（トンマナ.md と同じ値）
   ========================================================= */
:root{
  --cl:max(var(--gut), calc((100vw - 1440px) / 2));  /* FV・ヘッダーの左右の余白（内容は1440pxの枠、青の地と写真は画面幅いっぱい） */
  --top:112px;          /* 写真の枠の上端 */
  --col:600px;          /* 見出しの列の幅（写真の枠の左端までの距離） */
  --condH:196px;        /* 条件の表の高さの目安 */
}
.fv{position:relative;height:100vh;height:100svh;min-height:760px;background:var(--b);color:#fff;overflow:hidden}
.fv__body{position:absolute;z-index:5;left:var(--cl);top:var(--top);bottom:calc(var(--condH) + 36px);width:calc(var(--col) - 40px);display:flex;flex-direction:column;justify-content:center}
.fv__job{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;font-size:15px;font-weight:700;letter-spacing:.1em;line-height:1.6}
.fv__job .en{font-size:12px;font-weight:500;letter-spacing:.32em;opacity:.85;display:inline-flex;align-items:center;white-space:nowrap}
.fv__job .en::after{content:"";display:inline-block;width:28px;height:1px;background:currentColor;margin-left:14px;opacity:.7}
.fv__h{margin-top:18px;font-size:clamp(42px,4.8vw,80px);font-weight:700;line-height:1.28;letter-spacing:.04em}
.fv__h .ln{display:block;overflow:hidden;padding-bottom:.04em}
.fv__h .ln > span{display:block}
.fv__lead{margin-top:24px;font-size:18px;font-weight:500;line-height:1.8;letter-spacing:.05em;word-break:keep-all;overflow-wrap:anywhere}
.fv__lead span{display:block}
.fv__biz{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:15px;line-height:1.7}
.fv__biz .pre{opacity:.85}
.fv__biz .it{font-weight:500;padding:0 12px;border-left:1px solid rgba(255,255,255,.4)}
.fv__biz .pre + .it{border-left:0;padding-left:4px}
.fv__cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.fv__cta .btn--o{min-width:270px}
.fv__cta--sp{display:none}

/* 写真の枠：右端・下端は裁ち落とし、左上だけ角丸 */
.fv__visual{position:absolute;z-index:2;left:calc(var(--cl) + var(--col));right:0;top:var(--top);bottom:0}
.fv__photo{position:absolute;inset:0;border-top-left-radius:6px;overflow:hidden;background:#8e99a5}
.slide{position:absolute;inset:0;margin:0;opacity:0;z-index:0;transition:opacity 1.6s ease}
.slide.is-active{opacity:1;z-index:2}
.slide.is-leaving{opacity:1;z-index:1;transition:none}
.slide img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);transform-origin:var(--origin,50% 50%)}
.slide.is-active img,.slide.is-leaving img{animation:var(--kb,kbIn) 8.5s linear forwards}
@keyframes kbIn{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes kbOut{from{transform:scale(1.1)}to{transform:scale(1)}}
/* 写真に薄く青をかけて色をそろえる（乗算28%・単色） */
.tint{position:absolute;inset:0;background:var(--b);mix-blend-mode:multiply;opacity:.28;z-index:3;pointer-events:none}
/* 写真の進み具合 */
.prog{position:absolute;z-index:4;right:var(--cl);top:28px;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;letter-spacing:.08em;line-height:1}
.prog b{font-size:22px;font-weight:700}
.prog__bars{display:flex;gap:6px}
.prog__bars i{position:relative;width:36px;height:2px;background:rgba(255,255,255,.35);overflow:hidden}
.prog__bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.prog__bars i.is-on::after{animation:lineX 6.5s linear forwards}
.prog__bars i.is-done::after{transform:scaleX(1)}
/* 手元の写真：白い縁で重ねる */
.fv__inset{position:absolute;z-index:6;right:var(--cl);bottom:52px;width:300px;height:204px;border:6px solid #fff;border-radius:6px;overflow:hidden;background:#a3acb6}

/* 条件の表（白い面を、青の地と写真の境目にまたがって重ねる） */
.fv__cond{position:absolute;z-index:7;left:var(--cl);bottom:0;width:min(860px, calc(100% - var(--cl) * 2 - 340px));background:#fff;color:var(--ink);border-radius:6px 6px 0 0;padding:30px 36px 26px}
.ruler{position:absolute;left:36px;top:0;width:calc(100% - 72px);height:12px}
.ruler line{stroke:var(--b);stroke-width:1;opacity:.45}
.cond{display:grid;grid-template-columns:1.35fr 1fr;margin:0}
.cond > div{display:flex;align-items:center;gap:18px;padding:14px 24px;min-height:72px}
.cond > div:nth-child(odd){padding-left:0;border-right:1px solid var(--line)}
.cond > div:nth-child(n+3){border-top:1px solid var(--line)}
.cond dt{flex:none;width:64px;font-size:14px;font-weight:700;color:var(--b);letter-spacing:.1em;line-height:1.4}
.cond dd{margin:0;display:flex;align-items:flex-end;flex-wrap:wrap;gap:4px 18px}
.cond .g{display:flex;flex-direction:column;line-height:1.2}
.cond .s{font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--ink2);margin-bottom:4px}
.cond .v{font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.1;display:flex;align-items:baseline;white-space:nowrap}
.cond .v .t{font-size:22px;letter-spacing:.06em}
.cond .v .aside{font-size:14px;font-weight:500;color:var(--ink2);margin-left:10px;letter-spacing:.04em}
.cond .n{display:inline-flex;font-size:34px;font-weight:700;letter-spacing:.01em;line-height:1;margin:0 2px;color:var(--b)}
/* デジタル温度計のように数字が回って止まる */
.roll{display:inline-block;height:1.1em;overflow:hidden;line-height:1.1}
.roll > i{display:flex;flex-direction:column;font-style:normal;transform:translateY(calc(var(--to) * -1.1em))}
.roll > i > span{display:block;height:1.1em;text-align:center}

/* 冷媒配管の線（ガス管・液管の2本1組。中を冷気の点線が流れ続ける） */
.pipes{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.pipes .p{fill:none;stroke:#fff;stroke-linecap:round}
.pipes .p--g{stroke-width:1.6;opacity:.62}
.pipes .p--l{stroke-width:1;opacity:.48}
.pipes .f{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:3 21;stroke-linecap:round;opacity:0}
.js .pipes .p{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2s var(--e1) .5s forwards}
.js .pipes .f{animation:fadeIn .8s ease 2s forwards, pflow 1.4s linear 2s infinite}
.pipes.is-done .p{animation:none;stroke-dashoffset:0}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pflow{to{stroke-dashoffset:-24}}

/* 電話（青の地の上）：白い下地が下から弾んでせり上がる */
.btn--telw{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);padding:0 22px;gap:12px;min-height:64px}
.btn--telw::before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .6s cubic-bezier(.34,1.4,.64,1);z-index:-1}
.btn--telw:hover{color:var(--b)}
.btn--telw:hover::before{transform:none}
.btn--telw svg{width:20px;height:20px;flex:none}
.btn--telw .tx{display:flex;flex-direction:column;align-items:flex-start;font-size:16px}
.btn--telw .tx small{font-size:13px;font-weight:500;letter-spacing:.06em;line-height:1.3;opacity:.85}
/* FVの応募ボタン：読み込み後と、数秒おきに光が走る */
.fv__cta .btn--o::before{animation:shine 1s var(--e2) 2.2s, shineIdle 6s var(--e2) 3.2s infinite}
@keyframes shineIdle{0%{left:-60%;opacity:1}16%,100%{left:130%;opacity:0}}

/* FVの入場（約1.1秒で読める状態） */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes upIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes downIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes lineUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes maskUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes maskL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes condUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes rollIn{from{transform:translateY(0)}}
@keyframes lineX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.js .hd--fv > *{animation:downIn .6s var(--e2) both}
.js .hd--fv > *:nth-child(2){animation-delay:.06s}.js .hd--fv > *:nth-child(3){animation-delay:.12s}
.js .fv__job{animation:upIn .6s var(--e2) .15s both}
.js .fv__h .ln > span{animation:lineUp .8s var(--e1) both;animation-delay:calc(.22s + var(--i,0) * .12s)}
.js .fv__lead span{animation:upIn .6s var(--e2) both;animation-delay:calc(.5s + var(--i,0) * .08s)}
.js .fv__biz{animation:upIn .6s var(--e2) .68s both}
.js .fv__cta .btn{animation:fromR .7s var(--e2) both;animation-delay:calc(.75s + var(--i,0) * .08s)}
.js .fv__photo{animation:maskUp 1.2s var(--e1) .05s both}
.js .fv__inset{animation:maskL .9s var(--e1) .7s both}
.js .fv__cond{animation:condUp .9s var(--e1) .35s both}
.js .ruler{animation:maskL 1.2s var(--e1) .7s both}
.js .roll > i{animation:rollIn 1.3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.6s + var(--i,0) * .07s)}
.js .prog{animation:fadeIn .8s ease 1s both}

/* 中間幅 */
@media (max-width:1199px){
  :root{--col:520px;--condH:300px}
  .fv{min-height:900px}
  .fv__lead span{display:inline}
  .fv__inset{width:240px;height:164px}
  .fv__cond{width:calc(100% - var(--cl) * 2 - 270px);padding:28px 24px 22px}
  .cond{grid-template-columns:1fr}
  .cond > div:nth-child(odd){border-right:0}
  .cond > div{padding-left:0}
  .cond > div:nth-child(n+2){border-top:1px solid var(--line)}
}
/* 広い画面 */
@media (min-width:1920px){
  :root{--col:720px;--top:124px;--condH:216px}
  .fv{min-height:1000px}
  .fv__h{font-size:clamp(80px,4.4vw,104px)}
  .fv__lead{font-size:21px}
  .fv__biz{font-size:16px}
  .fv__inset{width:380px;height:258px}
  .fv__cond{width:min(1000px, calc(100% - var(--cl) * 2 - 420px));padding:34px 44px 30px}
  .cond .n{font-size:40px}
}
/* 撮影用（縦長ウィンドウ）：線を描き終えた状態で写す */
@media (min-height:2001px){ .pipes .p{stroke-dashoffset:0!important;animation:none!important} .pipes .f{opacity:.8!important;animation:none!important} .fv{height:900px;min-height:0} }

/* =========================================================
   ② 仕事内容：大小のタイル
   ========================================================= */
.work{padding:150px 0 0;position:relative}
.tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 32px;margin-top:72px;align-items:start}
.tile{position:relative}
.tile__ph{border-radius:var(--r);background:#d9dee4}
.tile--a{grid-column:1 / 6;grid-row:1 / 3}
.tile--a .tile__ph{aspect-ratio:4/5.2}
.tile--b{grid-column:6 / 9;grid-row:1}
.tile--b .tile__ph{aspect-ratio:4/3.4}
.tile--c{grid-column:9 / 13;grid-row:1;margin-top:96px}
.tile--c .tile__ph{aspect-ratio:4/3}
.tile--d{grid-column:6 / 13;grid-row:2}
.tile--d .tile__ph{aspect-ratio:21/8.4}
.tile__cap{position:relative;z-index:2;background:#fff;margin:-44px 0 0 20px;padding:20px 24px 4px 0;max-width:calc(100% - 20px);border-top-right-radius:var(--r)}
.tile__cap::before{content:"";position:absolute;left:-20px;top:0;width:20px;height:44px;background:#fff}
.tile__no{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--b);line-height:1.4}
.tile__t{font-size:clamp(18px,1.6vw,22px);line-height:1.5;letter-spacing:.07em;margin-top:6px}
.tile__cap p{font-size:14px;color:var(--ink2);line-height:1.9;margin-top:6px}
.tile__ph img{transition:transform 1.2s var(--e1),opacity 1.4s ease-out}
.tile:hover .tile__ph img.is-on{transform:scale(1.04)}

/* 現場を回る働き方 */
.route{margin-top:130px;padding:110px 0;background:var(--gray)}
.route__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.route__ph{aspect-ratio:4/3.2}
.route .h3{margin-top:18px}
.route .txt{margin-top:22px}
.line{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px}
.line__track{position:absolute;left:6px;right:calc(33.33% - 6px);top:6px;height:2px;background:var(--line)}
.line__track{right:auto;width:calc(66.66% + 0px)}
.line__track i{position:absolute;inset:0;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--e1)}
.line.is-visible .line__track i{transform:scaleX(1)}
.line__runner{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--b);opacity:0}
.line.is-run .line__runner{opacity:1;animation:run 5.5s cubic-bezier(.65,0,.35,1) infinite,pulse 1.6s ease-out infinite}
@keyframes run{0%{left:0;opacity:1}85%{left:calc(100% - 10px);opacity:1}100%{left:calc(100% - 10px);opacity:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,95,168,.45)}100%{box-shadow:0 0 0 12px rgba(31,95,168,0)}}
.line__pt{position:relative;display:flex;flex-direction:column;gap:2px}
.line__dot{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--b);position:relative;z-index:1;transform:scale(0);transition:transform .6s cubic-bezier(.68,-.55,.27,1.55)}
.line__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--b);opacity:0}
.line.is-visible .line__dot{transform:scale(1)}
.line.is-visible .line__dot::after{animation:ring 1s ease-out both;animation-delay:inherit}
@keyframes ring{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
.line.is-visible .line__pt--m .line__dot{transition-delay:.6s}
.line.is-visible .line__pt--e .line__dot{transition-delay:1.2s}
.line__pt--s .line__dot{background:var(--b)}
.line__name{margin-top:14px;font-size:17px;font-weight:700;letter-spacing:.08em;line-height:1.5}
.line__sub{font-size:13px;color:var(--ink2);line-height:1.6}
.line__name,.line__sub{opacity:0;transform:translateY(10px);transition:opacity .8s var(--e1),transform .8s var(--e1)}
.line.is-visible .line__name,.line.is-visible .line__sub{opacity:1;transform:none}
.line.is-visible .line__pt--m .line__name,.line.is-visible .line__pt--m .line__sub{transition-delay:.7s}
.line.is-visible .line__pt--e .line__name,.line.is-visible .line__pt--e .line__sub{transition-delay:1.3s}

/* 写真の帯：大きさを変えながら横に流れ続ける */
.pband{overflow:hidden;padding:56px 0 0}
.pband__track{display:flex;align-items:center;gap:16px;width:max-content;animation:flow 70s linear infinite}
.pband img{height:250px;width:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.pband img.t{height:190px;aspect-ratio:4/5}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 動画：暗転シアター */
.movie{margin-top:120px;padding:120px 0 130px;background:#fff;color:var(--ink);transition:background-color 1.2s var(--e2),color 1.2s var(--e2)}
.movie.is-dark{background:var(--dark);color:#fff}
.movie .lb{color:var(--b);transition:color 1.2s}
.movie.is-dark .lb{color:#fff}
.movie__head{text-align:center;display:flex;flex-direction:column;align-items:center}
.movie__head .h3{margin-top:18px}
.movie__head .txt{margin-top:18px;color:inherit;opacity:.88}
.movie__frame{position:relative;max-width:1000px;margin:56px auto 0;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#000;transform:scale(.9);transition:transform 1.6s var(--e1)}
.movie.is-dark .movie__frame{transform:none}
.movie__frame img{width:100%;height:100%;object-fit:cover;opacity:.62}
.movie__play{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .5s var(--e2)}
.movie__play::before,.movie__play::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,255,255,.7);animation:pulseRing 2.6s var(--e1) infinite}
.movie__play::after{animation-delay:1.3s}
.movie__play svg{width:28px;height:28px;margin-left:5px;fill:var(--b)}
.movie__frame:hover .movie__play{transform:scale(1.08)}
@keyframes pulseRing{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.45);opacity:0}}
.movie__branch{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:12px}
.movie__branch span{font-size:14px;font-weight:700;letter-spacing:.1em;color:#fff;border:1px solid rgba(255,255,255,.75);border-radius:var(--r);padding:8px 22px;line-height:1.4;background:rgba(18,24,31,.35)}

/* =========================================================
   ③ 働く魅力
   ========================================================= */
.why{position:relative}
.why__hero{position:relative;height:clamp(520px,78vh,780px);overflow:hidden;color:#fff;display:flex;align-items:center}
.why__bg{position:absolute;inset:-12% 0;will-change:transform}
.why__bg img{width:100%;height:100%;object-fit:cover}
.why__tint{position:absolute;inset:0;background:var(--b);mix-blend-mode:multiply;opacity:.62}
.why__hero-in{position:relative;z-index:2;padding-bottom:60px}
.why__hero .h2{margin-top:22px}
.why__arc{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:160px;z-index:3;fill:#fff}

/* 育て方の3段階（左の写真は固定、段階に合わせて入れ替わる） */
.steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);padding-top:40px;padding-bottom:40px}
.steps__stick{position:sticky;top:calc(var(--hd) + 48px);align-self:start;height:max-content}
.steps__ph{position:relative;aspect-ratio:4/4.6;border-radius:var(--r);overflow:hidden;background:#d9dee4}
.steps__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s ease,transform 1.6s var(--e1)}
.steps__ph img.is-on{opacity:1;transform:none}
.steps__bar{display:flex;gap:10px;margin-top:18px}
.steps__bar li{flex:1;position:relative;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--ink2);padding-top:12px;transition:color .4s}
.steps__bar li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.steps__bar li::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e1)}
.steps__bar li.is-on{color:var(--b)}
.steps__bar li.is-on::after{transform:scaleX(1)}
.step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.28;transition:opacity .7s var(--e2)}
.step.is-on{opacity:1}
.step__h{display:flex;align-items:center;gap:12px}
.step__no{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--b)}
.step__tag{display:inline-block;font-size:15px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--ink);padding:5px 14px;border-radius:var(--r);line-height:1.5}
.step__t{margin-top:22px;font-size:clamp(26px,2.5vw,36px);line-height:1.6;letter-spacing:.07em}
.step .txt{margin-top:22px;max-width:28em}
.step__ph{display:none}

/* 給与と賞与 */
.pay{background:var(--gray);padding:120px 0 120px;margin-top:80px}
.pay__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
.pay .h3{margin-top:18px}
.pay .txt{margin-top:22px}
.pay__fig{background:#fff;border-radius:var(--r-l);padding:40px 40px 26px}
.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;height:300px;align-items:end;border-bottom:1px solid var(--line)}
.bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.bar i{display:block;height:var(--h);background:var(--b-30);border-radius:var(--r) var(--r) 0 0;transform:scaleY(0);transform-origin:bottom;transition:transform 1.4s var(--e1)}
.bar--hi i{background:var(--b)}
.bar:nth-child(2) i{transition-delay:.2s}.bar:nth-child(3) i{transition-delay:.4s}
.pay__fig.is-visible .bar i{transform:none}
.bar__v{position:absolute;left:0;right:0;bottom:calc(var(--h) + 10px);text-align:center;font-weight:700;line-height:1.2;color:var(--ink);white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .8s var(--e1) .9s,transform .8s var(--e1) .9s}
.pay__fig.is-visible .bar__v{opacity:1;transform:none}
.bar__v b{font-size:clamp(26px,2.4vw,36px);letter-spacing:.02em}
.bar__v small{font-size:13px;margin:0 2px;letter-spacing:.04em}
.bar--hi .bar__v{color:var(--b)}
.bar__k{position:absolute;left:0;right:0;top:calc(100% + 12px);text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink2);line-height:1.5}
.bars{margin-bottom:46px}
.bars__note{font-size:13px;font-weight:700;color:var(--b);letter-spacing:.12em;margin-bottom:56px;display:flex;align-items:center;gap:10px}
.bars__note::before{content:"";width:16px;height:2px;background:var(--b)}

/* 撮影用（縦長ウィンドウ）：線を描き終えた状態で写す */
@media (min-height:2001px){ .people__fig::before{transform:none} }

.bonus{margin-top:64px;background:#fff;border-radius:var(--r-l);padding:12px 48px}
.bonus__row{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.bonus__row:last-child{border-bottom:0}
.bonus__row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--b);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e1)}
.bonus__row:last-child::after{display:none}
.bonus__row:hover::after{transform:scaleX(1)}
.bonus__k{display:flex;align-items:center;gap:16px;font-size:17px;font-weight:700;letter-spacing:.08em}
.bonus__k span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--b);color:var(--b);font-size:15px;letter-spacing:0;flex:none}
.bonus__v b{font-size:clamp(18px,1.6vw,22px);letter-spacing:.06em;line-height:1.6}
.bonus__v p{font-size:14px;color:var(--ink2);line-height:1.9;margin-top:4px}

/* 職場の雰囲気 */
.people{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,100px);align-items:center;padding-top:140px;padding-bottom:140px}
.people__fig{position:relative;z-index:0}
.people__fig::before{content:"";position:absolute;left:-28px;bottom:-28px;width:58%;height:64%;background:var(--b);border-radius:var(--r);z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--e3) .3s}
.people.is-in .people__fig::before{transform:none}
.people__ph{aspect-ratio:3/2.1}
.people .h3{margin-top:18px}
.people .txt{margin-top:24px}

/* 数字の帯（青） */
.num{background:var(--b);color:#fff;padding:96px 0 0;overflow:hidden}
.num__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.35)}
.num__it{padding:30px 24px 0}
.num__it:first-child{padding-left:0}
.num__it + .num__it{border-left:1px solid rgba(255,255,255,.35)}
.num__k{font-size:13px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.85)}
.num__n{font-size:clamp(40px,4.2vw,62px);font-weight:700;line-height:1.15;letter-spacing:0;white-space:nowrap;margin-top:6px}
.num__n small{font-size:.32em;letter-spacing:.06em;margin:0 4px}
.num__n small:first-child{margin-left:0}
.num__t{font-size:13px;line-height:1.85;margin-top:10px;color:rgba(255,255,255,.92)}
/* 冷媒配管の2本線（FVと同じモチーフ）：画面に入ると線が伸び、冷気の点線が流れ続ける */
.num{padding-bottom:36px}
.num__pipe{display:block;width:100%;height:40px;margin-top:72px;overflow:visible}
.num__pipe .p{fill:none;stroke:#fff;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--e1)}
.num__pipe .p--g{stroke-width:1.6;opacity:.62}
.num__pipe .p--l{stroke-width:1;opacity:.48;transition-delay:.15s}
.num__pipe .f{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:3 21;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:0;transition:opacity .8s ease 1.8s;animation:pflow 1.4s linear infinite}
.num__pipe.is-visible .p{stroke-dashoffset:0}
.num__pipe.is-visible .f{opacity:.85}

/* =========================================================
   ④ 募集要項：写真に、少し下げた白いカードを重ねる
   ========================================================= */
.req{background:var(--gray);padding:140px 0 130px}
.req__body{position:relative;display:grid;grid-template-columns:31% minmax(0,1fr);margin-top:72px;align-items:start}
.req__ph{aspect-ratio:450/600;border-radius:var(--r-l);position:relative;z-index:2;margin-right:-72px;position:sticky;top:calc(var(--hd) + 40px)}
.req__card{background:#fff;border-radius:var(--r-l);padding:52px 52px 40px calc(72px + 44px);margin-top:40px;position:relative;z-index:1}
.req__title{font-size:clamp(20px,1.8vw,24px);letter-spacing:.07em;line-height:1.6;margin:0 0 18px}
.req__tag{display:inline-block;margin-left:12px;font-size:13px;color:#fff;background:var(--b);padding:2px 10px;border-radius:var(--r);vertical-align:middle;letter-spacing:.08em}
.req dl{margin:0}
.req__row{display:grid;grid-template-columns:124px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid #dde1e6}
.req__row:last-child{border-bottom:0}
.req dt{font-size:14px;font-weight:700;color:var(--ink2);letter-spacing:.1em}
.req dd{margin:0;font-size:15px;font-weight:500;line-height:1.95}
.req dd b{font-size:19px;letter-spacing:.03em}
.req__cta{margin-top:60px;display:flex;justify-content:center}

/* =========================================================
   ⑤ よくある質問
   ========================================================= */
.faq{padding:140px 0}
.faq__grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq__head{position:sticky;top:calc(var(--hd) + 40px)}
.faq__head .h2{margin-top:16px}
.qa{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.qa__it{border-bottom:1px solid var(--line)}
.qa__q{width:100%;display:grid;grid-template-columns:44px 1fr 20px;gap:18px;align-items:center;padding:26px 4px;text-align:left;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:.08em;line-height:1.6;transition:color .3s}
.qa__q:hover{color:var(--b)}
.qa__b{width:44px;height:44px;border-radius:50%;background:var(--b);color:#fff;display:grid;place-items:center;font-size:17px;letter-spacing:0;transition:transform .4s var(--e2)}
.qa__q:hover .qa__b{transform:rotate(-12deg) scale(1.06)}
.qa__pm{position:relative;width:20px;height:20px}
.qa__pm::before,.qa__pm::after{content:"";position:absolute;left:0;top:9px;width:20px;height:2px;background:var(--b);transition:transform .35s var(--e2),opacity .35s}
.qa__pm::after{transform:rotate(90deg)}
.qa__it.is-open .qa__pm::after{transform:rotate(0);opacity:0}
.qa__a{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s var(--e2),opacity .4s var(--e2)}
.qa__it.is-open .qa__a{grid-template-rows:1fr;opacity:1}
.qa__a > div{overflow:hidden}
.qa__a p{padding:0 40px 30px 66px;font-size:15px;line-height:2.05}

/* =========================================================
   ご応募・お問い合わせ：写真（青をかける）の上に、白いフォームの面
   ========================================================= */
.entry{position:relative;padding:130px 0 140px;color:#fff;overflow:hidden}
.entry__bg{position:absolute;inset:0;z-index:0}
.entry__bg .swap{position:absolute;inset:0}
.entry__bg .swap img{animation:kbIn 16s linear infinite alternate}
.entry__bg::after{content:"";position:absolute;inset:0;background:var(--b);opacity:.86}
.entry__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.entry__head .h2{margin-top:18px}
.entry__head .txt{margin-top:24px}
.entry__tel{margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.4)}
.entry__tel small{display:block;font-size:13px;letter-spacing:.1em;opacity:.9}
.entry__tel a{display:inline-flex;align-items:center;gap:10px;font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:.04em;line-height:1.4}
.entry__tel svg{width:28px;height:28px}
.form{position:relative;background:#fff;color:var(--ink);border-radius:var(--r-l);padding:52px clamp(24px,4vw,56px) 44px}
.form__t{font-size:20px;font-weight:700;letter-spacing:.1em;padding-bottom:18px;border-bottom:2px solid var(--b)}
.f-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;margin-top:24px;align-items:start}
.f-row label{font-size:14px;font-weight:700;letter-spacing:.08em;padding-top:11px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rq{font-size:11px;background:var(--b);color:#fff;padding:0 7px;border-radius:2px;line-height:1.8}
.op{font-size:11px;background:#fff;color:var(--ink2);border:1px solid #c9ced4;padding:0 7px;border-radius:2px;line-height:1.7}
.f-row input,.f-row textarea{width:100%;font:inherit;font-size:16px;letter-spacing:.04em;height:50px;padding:0 16px;border:1px solid #d3d8de;border-radius:var(--r);background:var(--gray);transition:border-color .3s,box-shadow .3s,background-color .3s}
.f-row textarea{height:120px;padding:12px 16px;resize:vertical}
.f-row input:focus,.f-row textarea:focus{outline:0;border-color:var(--b);background:#fff;box-shadow:0 0 0 3px rgba(31,95,168,.15)}
.pp{margin-top:30px;height:110px;overflow:auto;background:var(--gray);border:1px solid #e1e5e9;border-radius:var(--r);padding:12px 14px;font-size:12px;line-height:1.85;color:var(--ink2)}
.agree{display:flex;align-items:center;gap:10px;font-size:14px;margin:16px 0 22px}
.agree input{width:18px;height:18px;accent-color:var(--b)}
.f-err{margin-top:18px;font-size:13px;font-weight:700;color:#c0392b;line-height:1.7}
.f-row.is-err input,.f-row.is-err textarea{border-color:#c0392b;background:#fff7f6}
.rc-note{margin-top:16px;font-size:11px;line-height:1.8;color:var(--ink2)}
.rc-note a{text-decoration:underline}
.grecaptcha-badge{visibility:hidden}   /* バッジを隠すかわりに、上の表記をフォームに置く（Google の規定どおり） */
.btn.is-sending{opacity:.6;pointer-events:none}

/* フッター（黒） */
.ft{background:var(--dark);color:rgba(255,255,255,.88);padding:90px 0 56px}
.ft__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:56px;align-items:start}
.logo__text--ft{color:#fff;font-size:24px}
.ft__tel{display:inline-block;margin-top:22px;font-size:26px;font-weight:700;letter-spacing:.04em}
.ft dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:10px 16px;font-size:14px;line-height:1.8}
.ft dt{color:rgba(255,255,255,.55);letter-spacing:.1em}
.ft dd{margin:0}
.ft__copy{margin-top:56px;font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.1em}

/* =========================================================
   広い画面（1920px〜）：文字を一段上げて間延びを防ぐ
   ========================================================= */
@media (min-width:1920px){
  :root{--max:1440px}
  .txt{font-size:17px}
  .hd__nav a{font-size:15px}
}

/* =========================================================
   タブレット（〜1200px）
   ========================================================= */
@media (max-width:1200px){
  .hd__nav{display:none}
}

/* =========================================================
   スマホ・タブレット縦（〜1023px）
   ========================================================= */
@media (max-width:1023px){
  :root{--hd:56px;--gut:16px;--cl:16px}
  .pc{display:none}.sp{display:inline}
  .hd{gap:10px}
  .hd--fv{position:relative;height:56px}
  .logo{flex-direction:row;align-items:center;gap:8px}
  .logo__text{font-size:16px;letter-spacing:.04em}
  .logo__sub{font-size:11px;padding-left:8px;border-left:1px solid currentColor;letter-spacing:.08em}
  .hd__tel,.hd__entry{display:none}
  .hd__icon{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--b);border-radius:var(--r);color:var(--b)}
  .hd__icon svg{width:19px;height:19px}

  /* 固定CTA：画面下の固定バー */
  .fixcta{left:0;right:0;bottom:0;gap:0;display:grid;grid-template-columns:1fr 1.7fr;transform:translateY(110%)}
  .fixcta.is-off{transform:translateY(110%)}
  .fixcta .btn{border-radius:0;min-height:60px;font-size:14px;padding:0 8px;gap:8px;box-shadow:none}
  .fixcta .btn--line{border-width:1px 0 0}
  body{padding-bottom:60px}

  /* FV（案Bのスマホ版：文字 → 写真（右に寄せて裁ち落とし）→ 条件の表 → ボタン） */
  .fv{height:auto;min-height:0}
  .fv__body{position:relative;left:auto;top:auto;bottom:auto;width:auto;display:block;padding:18px 16px 0}
  .fv__job{font-size:13px;gap:4px 10px;letter-spacing:.06em}
  .fv__job .en{font-size:11px;letter-spacing:.24em}
  .fv__job .en::after{width:14px;margin-left:10px}
  .fv__h{margin-top:12px;font-size:clamp(32px,9vw,48px);line-height:1.3}
  .fv__lead{margin-top:14px;font-size:16px;line-height:1.75;letter-spacing:.03em}
  .fv__lead span{display:inline}
  .fv__biz{margin-top:10px;font-size:14px}
  .fv__biz .pre{display:block;width:100%}
  .fv__biz .it{padding:0 10px}
  .fv__cta--pc{display:none}
  .fv__visual{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:34px 0 0 24px;height:clamp(196px,52vw,400px)}
  .prog{left:12px;right:auto;top:14px;gap:8px}
  .prog b{font-size:16px}
  .prog__bars i{width:18px}
  .fv__inset{right:16px;bottom:auto;top:-30px;width:120px;height:84px;border-width:4px}
  .fv__cond{position:relative;left:auto;bottom:auto;width:auto;margin:-36px 16px 0;padding:20px 16px 8px;border-radius:6px}
  .ruler{left:16px;width:calc(100% - 32px)}
  .cond{grid-template-columns:1fr 1fr}
  .cond > div{padding:12px 0;min-height:0;gap:10px;border-right:0!important}
  .cond > div:nth-child(1),.cond > div:nth-child(4){grid-column:1 / -1}
  .cond > div:nth-child(1){padding-top:4px}
  .cond > div:nth-child(n+2){border-top:1px solid var(--line)}
  .cond > div:nth-child(3){padding-left:14px;border-left:1px solid var(--line)}
  .cond dt{width:auto;min-width:40px;font-size:13px}
  .cond .n{font-size:28px}
  .cond .v .t{font-size:18px}
  .fv__cta--sp{display:flex;flex-direction:column;gap:8px;margin:0;padding:16px 16px 28px}
  .fv__cta--sp .btn{width:100%;min-height:58px}

  .h2{font-size:clamp(26px,7.4vw,34px)}
  .h2--xl{font-size:clamp(32px,9vw,44px)}
  .h3{font-size:clamp(22px,6.2vw,28px)}
  .h-en{font-size:52px}
  .txt{font-size:15px;line-height:2.05}
  .btn--l{min-height:60px;font-size:16px;padding:0 24px}

  .work{padding-top:90px}
  .tiles{grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:44px}
  .tile--a,.tile--b,.tile--c,.tile--d{grid-column:auto;grid-row:auto;margin-top:0}
  .tile--a,.tile--d{grid-column:1 / -1}
  .tile--a .tile__ph{aspect-ratio:4/3}
  .tile--b .tile__ph,.tile--c .tile__ph{aspect-ratio:1/1}
  .tile--c{margin-top:28px}
  .tile--d .tile__ph{aspect-ratio:16/9}
  .tile__cap{margin:-30px 0 0 12px;padding:14px 14px 0 0}
  .tile__cap::before{left:-12px;width:12px;height:30px}
  .tile__t{font-size:16px}
  .tile__cap p{font-size:13px}

  .route{margin-top:80px;padding:70px 0}
  .route__grid{grid-template-columns:1fr;gap:30px}
  .line__name{font-size:15px}
  .line__sub{font-size:12px}
  .pband{padding-top:40px}
  .pband img{height:170px}
  .pband img.t{height:130px}
  .movie{margin-top:70px;padding:80px 0 90px}
  .movie__frame{margin-top:36px;border-radius:var(--r)}
  .movie__play{width:70px;height:70px;margin:-35px 0 0 -35px}
  .movie__play svg{width:22px;height:22px}
  .movie__branch{bottom:12px;gap:8px}
  .movie__branch span{font-size:12px;padding:4px 12px}

  .why__hero{height:auto;min-height:480px;padding:100px 0 120px}
  .why__arc{height:70px}
  .steps{grid-template-columns:1fr;gap:0;padding-top:10px}
  .steps__stick{display:none}
  .step{min-height:0;opacity:1;padding:34px 0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
  .step__ph{display:block;aspect-ratio:16/10;margin-bottom:22px}
  .step__t{font-size:clamp(22px,6.2vw,28px);margin-top:16px}
  .step .txt{margin-top:14px}
  .pay{padding:80px 0;margin-top:40px}
  .pay__grid{grid-template-columns:1fr;gap:34px}
  .pay__fig{padding:28px 16px 18px}
  .bars{height:230px;gap:10px}
  .bar__v b{font-size:24px}
  .bar__v small{font-size:11px}
  .bar__k{font-size:12px}
  .bar--hi .bar__v{font-size:.82em}
  .bonus{margin-top:40px;padding:6px 20px}
  .bonus__row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .bonus__k span{width:44px;height:44px;font-size:13px}
  .people{grid-template-columns:1fr;gap:44px;padding-top:90px;padding-bottom:90px}
  .people__ph::before{left:-12px;bottom:-14px}
  .num{padding-top:70px}
  .num__grid{grid-template-columns:1fr 1fr}
  .num__it{padding:22px 12px 22px 0!important;border-left:0!important;border-bottom:1px solid rgba(255,255,255,.35)}
  .num__it:nth-child(even){padding-left:16px!important;border-left:1px solid rgba(255,255,255,.35)!important}
  .num__n{font-size:clamp(32px,9vw,44px)}
  .num__t{font-size:12px}
  .num__pipe{margin-top:44px}

  .req{padding:90px 0 80px}
  .req__body{grid-template-columns:1fr;margin-top:40px}
  .req__ph{position:relative;top:auto;width:76%;margin:0 auto -60px;aspect-ratio:4/4.4}
  .req__card{margin-top:0;padding:84px 20px 24px}
  .req__row{grid-template-columns:1fr;gap:2px;padding:14px 0}
  .req__cta .btn{width:100%}

  .faq{padding:90px 0}
  .faq__grid{grid-template-columns:1fr;gap:28px}
  .faq__head{position:relative;top:auto}
  .qa__q{grid-template-columns:36px 1fr 16px;gap:12px;padding:20px 0}
  .qa__b{width:36px;height:36px;font-size:15px}
  .qa__a p{padding:0 8px 24px 48px}

  .entry{padding:90px 0 90px}
  .entry__grid{grid-template-columns:1fr;gap:36px}
  .form{padding:32px 18px 28px}
  .f-row{grid-template-columns:1fr;gap:6px;margin-top:18px}
  .f-row label{padding-top:0}
  .ft{padding:64px 0 40px}
  .ft__grid{grid-template-columns:1fr;gap:30px}
  .ft dl{grid-template-columns:80px 1fr;font-size:13px}
}
@media (max-width:767px){
  .fixcta .btn{font-size:14px}
}
@media (max-width:374px){
  .fv__h{font-size:30px}
  .logo__text{font-size:15px}
}

/* 動きを減らす設定 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important;scroll-behavior:auto!important}
  .fade{opacity:1;transform:none}
  .mask{clip-path:none}
  .mask img{transform:none}
  .h2 .ln > span,.h3 .ln > span{transform:none}
  .step{opacity:1}
  .line__runner{display:none}
  .pband__track,.num__pipe .f{animation:none}
}
@supports not (word-break:auto-phrase){ .h2,.h3,.txt{word-break:normal} }

/* =========================================================
   修正 v5（2026-10-21 制作担当「レスポンシブ時、要素がつめ詰めの印象」）
   スマホの左右の余白・ブロックの間・見出しと本文の間を広げる
   ========================================================= */
@media (max-width:1023px){
  :root{--gut:22px;--cl:22px}
  .txt{line-height:2.1}
  .sec-h .h2{margin-top:16px}
  .sec-h__txt{margin-top:24px}

  /* FV */
  .fv__body{padding:24px var(--cl) 0}
  .fv__h{margin-top:16px}
  .fv__lead{margin-top:18px}
  .fv__biz{margin-top:14px}
  .fv__visual{margin:44px 0 0 30px}
  .fv__inset{right:var(--cl)}
  .fv__cond{margin:-32px var(--cl) 0;padding:24px 18px 10px}
  .cond > div{padding:14px 0}
  .fv__cta--sp{gap:12px;padding:24px var(--cl) 40px}

  /* ② 仕事内容：タイルは1列にし、左右に少しずつずらして並べる */
  .work{padding-top:100px}
  .tiles{grid-template-columns:1fr;gap:56px;margin-top:52px}
  .tile--a,.tile--b,.tile--c,.tile--d{grid-column:1 / -1;margin-top:0}
  .tile:nth-child(odd){margin-right:32px}
  .tile:nth-child(even){margin-left:32px}
  .tile .tile__ph,.tile--a .tile__ph,.tile--b .tile__ph,.tile--c .tile__ph,.tile--d .tile__ph{aspect-ratio:16/10.5}
  .tile__cap{margin:-36px 0 0 16px;padding:18px 18px 0 0}
  .tile__cap::before{left:-16px;width:16px;height:36px}
  .tile__t{font-size:18px;margin-top:8px}
  .tile__cap p{font-size:14px;margin-top:8px}

  .route{margin-top:100px;padding:84px 0}
  .route__grid{gap:40px}
  .route .txt{margin-top:20px}
  .line{margin-top:40px}
  .pband{padding-top:56px}
  .movie{margin-top:90px;padding:96px 0 100px}
  .movie__head .txt{margin-top:20px}
  .movie__frame{margin-top:44px}

  /* ③ 働く魅力 */
  .why__hero{padding:110px 0 130px}
  .steps{padding-top:24px}
  .step{padding:44px 0}
  .step__ph{margin-bottom:28px}
  .step__t{margin-top:18px}
  .step .txt{margin-top:18px}
  .pay{padding:96px 0;margin-top:48px}
  .pay__grid{gap:44px}
  .pay__fig{padding:32px 20px 22px}
  .bonus{margin-top:48px;padding:10px 24px}
  .bonus__row{gap:12px;padding:26px 0}
  .people{gap:56px;padding-top:110px;padding-bottom:110px}
  .people .txt{margin-top:22px}
  .num{padding-top:84px}
  .num__it{padding:26px 14px 26px 0!important}
  .num__it:nth-child(even){padding-left:18px!important}

  /* ④ 募集要項 */
  .req{padding:100px 0 96px}
  .req__body{margin-top:48px}
  .req__card{padding:88px 24px 28px}
  .req__row{padding:18px 0;gap:6px}
  .req__cta{margin-top:48px}

  /* ⑤ よくある質問・応募 */
  .faq{padding:100px 0}
  .faq__grid{gap:36px}
  .qa__q{padding:24px 0}
  .entry{padding:100px 0}
  .entry__grid{gap:44px}
  .entry__head .txt{margin-top:22px}
  .entry__tel{margin-top:32px}
  .form{padding:36px 22px 32px}
  .f-row{margin-top:22px;gap:8px}
  .ft{padding:72px 0 44px}
  .ft__grid{gap:36px}
}
/* 修正 v6（2026-10-21 制作担当）
   ・写真の帯：縦長の写真だけ小さく見える → すべて同じ高さにし、横長／縦長の比率だけを変える
   ・③の弧の下端に細い線が見える → 弧の下に白い面を少し重ねて継ぎ目を消す */
.pband img,.pband img.t{height:260px}
.pband img.t{aspect-ratio:4/5}
.why__arc{bottom:-2px}
.why__hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#fff;z-index:4}
@media (max-width:1023px){ .pband img,.pband img.t{height:180px} }
/* 修正 v7（2026-10-21 制作担当）
   ・仕事のタイル：説明の白い面が写真の欠けに見える → 左右を写真の内側に入れた「重なるカード」にし、上に青の線・細い枠を付ける
   ・募集要項の給与：2行の位置をそろえる（ラベルの列の幅を固定）
   ・応募の背景とフッターの境目がちらつく → 背景写真の拡大の動きを止め、フッターを1px重ねる
   ・タブレット：FVの小さい写真が小さすぎる → 画面幅に合わせて大きく
   ・仕事内容の本文：横幅を広げ、「、」のあとで改行 */
.tile__cap{margin:-48px 20px 0;max-width:none;padding:22px 26px 20px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--b);border-radius:var(--r)}
.tile__cap::before{display:none}
.tile__no{line-height:1.2}
@media (max-width:1023px){
  .tile__cap{margin:-40px 14px 0;padding:18px 18px 16px}
}
.pay-rows{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline;margin-bottom:6px}
.pay-rows span{font-size:15px;font-weight:500;white-space:nowrap}
.pay-rows b{white-space:nowrap}
@media (max-width:1023px){ .pay-rows{gap:2px 14px} .pay-rows span{font-size:14px} .pay-rows b{font-size:17px} }
.entry__bg .swap img{animation:none}
.entry__bg{backface-visibility:hidden}
.ft{position:relative;z-index:1;margin-top:-1px}
@media (min-width:600px) and (max-width:1023px){
  .fv__visual{height:clamp(300px,56vw,520px)}
  .fv__inset{width:clamp(160px,30vw,280px);height:auto;aspect-ratio:3/2;top:-44px;border-width:5px}
}
.sec-h__txt{max-width:none}/* 弧の下の線：白い面を写真の内側（下端から4px）に重ね、確実に隠す */
.why__hero::after{bottom:0;height:4px;z-index:5}
.why__arc{bottom:2px}
/* 修正 v8（2026-10-21 制作担当「一行にする。ほかの箇所も」）
   2行に分けていた見出しを1行に。PCで1行に収まるよう、列の幅に合わせて文字の大きさを調整（スマホは文節の切れ目で自然に折り返す） */
.step__t{font-size:clamp(21px,1.8vw,26px);line-height:1.6}
.pay .h3{font-size:clamp(22px,2vw,30px)}
.entry__head .h2{font-size:clamp(26px,2.5vw,38px)}
.sec-h .h2,.why__hero .h2{white-space:nowrap}
@media (max-width:1023px){
  .sec-h .h2,.why__hero .h2{white-space:normal}
  .step__t{font-size:clamp(20px,5.6vw,24px)}
}
/* 修正 v9（2026-10-21 制作担当「まだ線がある」）：③の弧の下の線
   写真と青の層を、見出しの面の下端から6px上で止める（下端の6pxは常に白地）。弧は下端ぴったりに置く */
.why__media{position:absolute;left:0;right:0;top:0;bottom:6px;overflow:hidden}
.why__hero::after{display:none}
.why__arc{bottom:0}
/* 「3〜4か月」などを途中で改行させない */
.nw{white-space:nowrap}

/* 住所のGoogleマップへのリンク */
.maplink{display:inline-flex;align-items:center;gap:4px;margin-left:12px;font-size:13px;font-weight:700;color:var(--b);border-bottom:1px solid currentColor;line-height:1.5;white-space:nowrap}
.maplink::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:2px}
.ft .maplink{color:#fff}