/* ===== Recruit（Figma 14511:47958）1440×1024 / base3 / 下160pxはContactが重なる ===== */
.recruit{position:relative;width:100%;height:1024px;margin-bottom:-160px;overflow:hidden;background:var(--c-base3)}
.recruit__bg{position:absolute;inset:0;pointer-events:none}
/* 同心円4つ（multiply / 中心 50%, 373px）とオブジェクト（darken / 中心 50%, 378px） */
.recruit__ring{position:absolute;left:50%;top:373px;transform:translate(-50%,-50%);mix-blend-mode:multiply;max-width:none}
.recruit__ring--4{width:1300px;height:1300px}.recruit__ring--3{width:972.727px;height:972.727px}.recruit__ring--2{width:660px;height:660px}.recruit__ring--1{width:400px;height:400px}
.recruit__objects{position:absolute;left:50%;top:378px;width:1100px;height:1100px;transform:translate(-50%,-50%);mix-blend-mode:darken;max-width:none}
/* 装飾の平行四辺形4つ（ぼかし付きSVG。回転ボックス内に inset 配置） */
.recruit__deco{position:absolute;display:flex;align-items:center;justify-content:center}
.recruit__deco-inner{position:relative;flex:none}
.recruit__deco-inner img{position:absolute;max-width:none}
.recruit__deco--1{left:calc(50% - 695px);top:596px;width:110px;height:63px}
.recruit__deco--1 .recruit__deco-inner{width:110px;height:63px}
.recruit__deco--1 img{left:-3.2%;top:-7.94%;width:106.4%;height:115.88%}
.recruit__deco--2{left:calc(50% + 584px);top:311px;width:162px;height:92px}
.recruit__deco--2 .recruit__deco-inner{width:162px;height:92px;transform:rotate(180deg) scaleY(-1)}
.recruit__deco--2 img{left:-4.02%;top:-8.7%;width:108.04%;height:117.4%}
.recruit__deco--3{left:calc(50% + 552.96px);top:27.96px;width:38.02px;height:66.05px}
.recruit__deco--3 .recruit__deco-inner{width:66.05px;height:38.02px;transform:rotate(90deg)}
.recruit__deco--3 img{left:-2.32%;top:-7.89%;width:104.64%;height:115.78%}
.recruit__deco--4{left:calc(50% - 404px);top:13px;width:46px;height:81px}
.recruit__deco--4 .recruit__deco-inner{width:81px;height:46px;transform:rotate(90deg) scaleY(-1)}
.recruit__deco--4 img{left:-4.33%;top:-10.87%;width:108.66%;height:121.74%}
/* 平行四辺形写真4枚：Figma書き出し2x（未マスク）＋マスクSVGのパスを clip-path 化。位置・倍率はFigma描画との突合で微調整 */
.recruit__photo{position:absolute}
/* picture を箱全体に広げ、その中で img を絶対配置する（picture に transform（出現演出）が掛かっても img の基準がずれないようにする） */
.recruit__photo picture{position:absolute;inset:0;display:block}
.recruit__photo img{position:absolute;display:block;max-width:none}   /* 写真の矩形は Figma の Mask group 内の配置（rel transform）をそのまま置く */
/* 4枚の写真: Figma「Mask group」(14669:31745/31748/31751/31755) を実測どおりに再現（2026-09-15 作り直し）。
   箱＝グループのbbox、clip-path＝回転した平行四辺形マスク（fillGeometry×relativeTransform）、img＝マスク内の写真矩形（レタッチ込みノード書き出し・枠外は透過）。
   1440幅で画面外に出る右下(1)・左上(2)は min()/max() で画面内に寄せる（Figma原寸は 50%+279.3px / 50%-760px）。 */
.recruit__photo--1{left:min(calc(50% + 279.3px), calc(100% - 541px));top:240.0px;width:541.7px;height:662.5px;clip-path:path("M3.48 139.02C1.94 138.88 0.82 140.46 1.48 141.86L162.34 486.84C162.64 487.49 163.26 487.92 163.97 487.99L538.20 523.45C539.74 523.60 540.85 522.02 540.20 520.61L379.33 175.63C379.03 174.99 378.41 174.55 377.71 174.49L3.48 139.02Z");-webkit-clip-path:path("M3.48 139.02C1.94 138.88 0.82 140.46 1.48 141.86L162.34 486.84C162.64 487.49 163.26 487.92 163.97 487.99L538.20 523.45C539.74 523.60 540.85 522.02 540.20 520.61L379.33 175.63C379.03 174.99 378.41 174.55 377.71 174.49L3.48 139.02Z")}
.recruit__photo--1 img{left:-23.3px;top:117.3px;width:643.16px;height:428.71px}
.recruit__photo--2{left:max(calc(50% - 760px), 0px);top:9.0px;width:449.4px;height:326.0px;clip-path:path("M260.01 34.84L-0.00 104.51L188.15 291.49L449.37 221.49L260.01 34.84Z");-webkit-clip-path:path("M260.01 34.84L-0.00 104.51L188.15 291.49L449.37 221.49L260.01 34.84Z")}
.recruit__photo--2 img{left:0.5px;top:23.5px;width:462.07px;height:308.01px}
.recruit__photo--3{left:calc(50% - 616px);top:346.0px;width:373.0px;height:383.9px;clip-path:path("M220.50 299.25L372.99 129.89L153.19 83.89L-0.00 254.03L220.50 299.25Z");-webkit-clip-path:path("M220.50 299.25L372.99 129.89L153.19 83.89L-0.00 254.03L220.50 299.25Z")}
.recruit__photo--3 img{left:1.0px;top:72.8px;width:423.40px;height:282.52px}
.recruit__photo--4{left:calc(50% + 222.6px);top:77.9px;width:267.8px;height:164.2px;clip-path:path("M85.85 12.01L257.54 -0.00L182.71 152.14L10.22 164.20L85.85 12.01Z");-webkit-clip-path:path("M85.85 12.01L257.54 -0.00L182.71 152.14L10.22 164.20L85.85 12.01Z")}
.recruit__photo--4 img{left:-30.3px;top:-3.7px;width:309.38px;height:206.23px}
/* 中央テキストブロック: 中心 (50%+34px, 50%-153px) / gap56 */
.recruit__content{position:absolute;left:calc(50% + 34px);top:calc(50% - 153px);transform:translate(-50%,-50%)}
.recruit__content-inner{display:flex;flex-direction:column;align-items:flex-start;gap:56px}
.recruit__intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-lead)}
.recruit__text{width:100%;font-size:var(--fs-body-m);font-weight:400;line-height:1.6;letter-spacing:.16px;white-space:nowrap}
/* 右下の写真: Figma原寸（643×429・left 50%+256）では右端が1440幅から179px外にはみ出て平行四辺形の右辺が切れる（Figma上も同様）。
   菊池さん指示（2026-09-15）で見切れを解消: 0.86倍に縮小し40px左へ寄せ、右辺が画面内（1440時 右端1394px）に収まるようにした。比率は維持 */

/* ===== スクロール連動の浮遊（あおさん指示 A-4。js/main.js「Recruit 浮遊」ブロックが --float-y を書く） =====
   菱形のあしらい（.recruit__deco）と菱形マスクの写真（.recruit__photo）を、セクションが画面を通過する間に上下 8〜16px だけ動かす
   （じっくり見ないと分からない量。data-float の振幅 × 通過進捗 -1〜1）。
   写真は js-reveal と transform を取り合うため、出現時の「24px下から上へ」は内側の <picture> に移し、外側の transform を浮遊専用にする */
.recruit__deco,.recruit__photo{transform:translate3d(0,var(--float-y,0px),0);will-change:transform}
.js .recruit .recruit__photo.js-reveal{transform:translate3d(0,var(--float-y,0px),0);transition:opacity .8s var(--ease-out-quint);transition-delay:var(--reveal-delay,0s)}
.js .recruit__photo.js-reveal picture{transform:translateY(24px);transition:transform .8s var(--ease-out-quint);transition-delay:var(--reveal-delay,0s)}
.js .recruit__photo.js-reveal.is-inview picture{transform:none}
@media (prefers-reduced-motion:reduce){
  .recruit__deco,.recruit__photo,.js .recruit .recruit__photo.js-reveal{transform:none!important;will-change:auto}
  .js .recruit__photo.js-reveal picture{transform:none!important;transition:none!important}
}

/* ===== SP（Figma SP-TOP Recruit 14600:69555）375×1024 ＋ 下48pxの帯（base3・Contactとの間隔） =====
   中心テキスト303幅（中心 50%, 50%-112px）／同心円は中心(50%-.5px, 419)／写真4枚はFigmaのマスク矩形に合わせた2x切り出し＋clip-path。
   写真の左右位置は 50% 起点（375幅で Figma と一致、広い端末では中央寄せを維持）。位置・サイズは整数px（Figma値を四捨五入。1x画像を再サンプリングさせない）。 */
@media (max-width:768px){
  .recruit{height:1072px;margin-bottom:0;border-bottom:48px solid var(--c-base3)} /* border-box: 1024＋帯48 */
  .recruit__ring{left:calc(50% - .5px);top:419px}
  .recruit__ring--4{width:838px;height:838px}.recruit__ring--3{width:627.035px;height:627.035px}.recruit__ring--2{width:425.446px;height:425.446px}.recruit__ring--1{width:257.846px;height:257.846px}
  .recruit__objects{left:calc(50% - .5px);top:-8px;width:858px;height:858px;transform:translateX(-50%)}
  /* 装飾4つ（Figma Rectangle34/35/36/37。回転はPCと同じ向き） */
  .recruit__deco--1{left:calc(50% - 189.5px);top:619px;width:77px;height:44px}
  .recruit__deco--1 .recruit__deco-inner{width:77px;height:44px}
  .recruit__deco--1 img{left:-4.57%;top:-11.36%;width:109.14%;height:122.72%}
  .recruit__deco--2{left:calc(50% + 92.5px);top:797px;width:119px;height:68px}
  .recruit__deco--2 .recruit__deco-inner{width:119px;height:68px}
  .recruit__deco--2 img{left:-1.28%;top:-4.41%;width:102.56%;height:108.82%}
  .recruit__deco--3{left:calc(50% + 77.5px);top:82px;width:28px;height:47px}
  .recruit__deco--3 .recruit__deco-inner{width:47px;height:28px}
  .recruit__deco--3 img{left:-1.26%;top:-7.14%;width:102.52%;height:114.28%}
  .recruit__deco--4{left:calc(50% - 170.5px);top:104px;width:29px;height:51px}
  .recruit__deco--4 .recruit__deco-inner{width:51px;height:29px}
  .recruit__deco--4 img{left:-1%;top:-6.9%;width:102%;height:113.8%}
  /* 写真: --1=ロボット(0117) --2=左上(0145・マスクは回転した平行四辺形) --3=左中(0067・同じく回転マスク) --4=右上(0053) */
  .recruit__photo picture{position:static}
  .recruit__photo img{position:static;left:auto;top:auto;width:100%;height:auto;margin:0}
  .recruit__photo--1{left:calc(50% - 100.5px);top:812px;width:293px;height:209px;clip-path:polygon(0 0,66.72% 0,100% 100%,33.26% 100%);-webkit-clip-path:polygon(0 0,66.72% 0,100% 100%,33.26% 100%)}
  .recruit__photo--2{left:calc(50% - 208.5px);top:2px;width:194px;height:111px;clip-path:polygon(57.93% 0,100% 72.95%,42.07% 100%,0 27.05%);-webkit-clip-path:polygon(57.93% 0,100% 72.95%,42.07% 100%,0 27.05%)}
  .recruit__photo--3{left:calc(50% - 211.5px);top:622px;width:259px;height:150px;clip-path:polygon(40.2% 0,100% 21.1%,59.8% 100%,0 78.9%);-webkit-clip-path:polygon(40.2% 0,100% 21.1%,59.8% 100%,0 78.9%)}
  .recruit__photo--4{left:calc(50% + 47.5px);top:101px;width:148px;height:98px;clip-path:polygon(33.33% 0,100% 0,66.97% 100%,0 100%);-webkit-clip-path:polygon(33.33% 0,100% 0,66.97% 100%,0 100%)}
      /* 中央テキスト */
  .recruit__content{left:50%;top:calc(50% - 112px);width:303px}
  .recruit__content-inner{gap:40px;width:100%}
  .recruit__intro{width:100%}
  .recruit .sec-title{gap:4px}
  .recruit .sec-title__label{gap:6px}
  .recruit .sec-title__label img{width:13px;height:9px}
  .recruit__text{white-space:normal;letter-spacing:.15px}
  .recruit__text p:last-child br{display:none}
  /* ボタン（Figma 14600:69649）: w199 / pl20 pr12 py10 / gap24 */
  .recruit .btn{width:199px;gap:24px;padding:10px 12px 10px 20px}
  .recruit .btn__label{flex:1 0 0;min-width:1px}
}