/* Recruitment: a field notebook for building a career. */
.rj { padding-top:60px; --or:#EA5504; --ink:#262A2E; background:#FAF8F5; }
.rj .inner { max-width:1440px; padding-left:clamp(24px,6vw,88px); padding-right:clamp(24px,6vw,88px); }
.rj .sec { background:#FAF8F5; scroll-margin-top:90px; }
.rj .sec::before { opacity:.22; }
.rj .head { gap:20px; align-items:flex-start; }
.rj h2[id] { scroll-margin-top:90px; }
.rj .num { font:500 14px/1.3 monospace; border:1px solid currentColor; padding:8px; margin-top:5px; }
.rj .h-main { display:block; font-size:clamp(28px,3vw,44px); font-weight:900; line-height:1.45; letter-spacing:.02em; }
.rj .h-sub { font:600 11px/1.5 monospace; letter-spacing:.2em; margin-top:14px; color:var(--or); }
.rj .p-main { font-size:16px; line-height:2.1; }
.rj .p-sub { font-size:14px; line-height:2; }
.rj .hexph { clip-path:none; border-radius:0; }
.rj [class*="deco-"], .rj-hero__tri, .rj-hero__tri2, .rj-hero__hex, .rj-hero__hex2, .rj-hero__glow, .rj-hero__script, .rj-hero__hand { display:none; }
.rj-hero { min-height:760px; }
.rj-hero__photo { top:48px; right:0; width:47%; height:calc(100% - 100px); clip-path:polygon(10% 0,100% 0,100% 100%,0 100%,0 12%); object-position:50% 50%; filter:saturate(.7); }
.rj-hero__text { width:58%; padding:76px 0 82px; }
.rj-hero__lbl { font:600 12px/1.5 monospace; letter-spacing:.2em; }
.rj-hero__h1 { font-size:clamp(48px,5.3vw,80px); line-height:1.24; letter-spacing:-.055em; margin-top:26px; }
.rj-hero__h1 em { font-style:normal; color:var(--or); }
.rj-hero__ja { margin-top:24px; background:transparent; color:var(--ink); border-left:3px solid var(--or); padding:0 12px; }
.rj-hero__lead { max-width:440px; font-size:15px; margin-top:28px; }
.rj-hero__lead-ja { max-width:430px; font-size:13px; }
.rj-hero__actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:32px; }
.rj-entry { display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:18px 24px; background:var(--or); color:white; font-size:14px; font-weight:700; text-decoration:none; }
.rj-entry:hover { background:#C4400A; }
.rj-text-link { font-size:13px; font-weight:700; text-underline-offset:6px; text-decoration:underline; }
.rj-index { position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:0; padding:20px 24px; background:#262A2E; color:#fff; }
.rj-index a { padding:10px 24px; font-size:12px; letter-spacing:.05em; border-right:1px solid #ffffff30; }
.rj-index a:last-child { border:0; }
.rj-index a:hover { color:#ffac7e; }
.rj-two .inner { padding-top:100px; padding-bottom:100px; gap:64px; align-items:center; }
.rj-two .rj-body { padding-left:0; margin-top:28px; }
.rj-02 .inner { grid-template-columns:1fr 1fr; }
.rj-02__fig { margin:0; height:440px; }
.rj-02__fig img { width:100%; height:100%; clip-path:none; }
.rj-02__hex { display:flex; top:auto; bottom:-24px; right:-16px; width:auto; height:auto; padding:24px 32px; clip-path:none; background:var(--or); transform:rotate(-3deg); }
.rj-02__hex p { font-size:20px; }
.rj .rj-03 { background:#262A2E; color:#FAF8F5; }
.rj-03 .inner { grid-template-columns:1fr 1fr; }
.rj-03 .h-main { color:#FAF8F5; font-size:clamp(28px,3vw,44px); white-space:normal; }
.rj-03 .p-main { color:#eee9e2; }
.rj-03 .p-sub { color:#c8c6c2; }
.rj-03 .hexph { aspect-ratio:1; margin:0; border:1px solid #ffffff26; transform:rotate(-3deg); }
.rj-03 .hexph img { object-fit:cover; }
.rj-growth { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; padding-top:24px; border-top:1px solid #ffffff30; }
.rj-growth span { font-size:12px; color:#fff; padding:8px 12px; border:1px solid #ffffff40; }
.rj-growth b { color:#ffad7f; padding-right:8px; }
.rj-04 .inner { grid-template-columns:1fr 1fr; }
.rj-04 .hexph { aspect-ratio:1.15; margin:0; padding:12px 12px 48px; background:white; transform:rotate(3deg); box-shadow:0 12px 30px #262a2e12; }
.rj-04 .hexph::after { content:"ONE TEAM.  /  Ti-Steel"; position:absolute; bottom:16px; left:20px; font:12px monospace; letter-spacing:.12em; }
.rj-05 { border-top:1px solid #d8d4cc; }
.rj-05 .inner,.rj-06 .inner { padding-top:90px; padding-bottom:90px; }
.rj-05__cols { gap:16px; margin-top:44px; }
.rj-05__col { padding:28px 22px; background:#fff; border:1px solid #dedad2; border-top:3px solid var(--or); }
.rj-05__col + .rj-05__col { border-left:1px solid #dedad2; }
.rj-05__col svg { width:44px; height:44px; }
.rj-05__col h3 { font-size:18px; }
.rj-05__col .p-main { font-size:14px; line-height:1.9; }
.rj-05__col .p-sub { font-size:12px; }
.rj .rj-06 { background:#eeeae2; }
.rj-06__steps { margin-top:50px; gap:20px; }
.rj-06__steps::before { top:36px; background:#b9b3a9; }
.rj-06__icon { width:72px; height:72px; background:#eeeae2; border:1px solid #b9b3a9; border-radius:0; transform:rotate(45deg); }
.rj-06__icon svg { transform:rotate(-45deg); }
.rj-06__n { margin-top:30px; color:#C4400A; font:14px monospace; }
.rj-06__t { font-size:16px; margin-top:8px; }
.rj-06__d { font-size:13px; }
.rj-07 .inner { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start; }
.rj-07__dl,.rj-07__note { margin-left:0; }
.rj-07__dl { margin-top:36px; }
.rj-07__row { padding:20px 0; grid-template-columns:100px minmax(0,1fr); }
.rj-07__row dt { font-size:13px; }
.rj-07__row dd { font-size:14px; }
.rj-07 .hexph { aspect-ratio:.7; margin-top:90px; }
.rj-07 .rj-07__btn { margin-left:0; font-size:15px; padding:20px 24px; }
.rj-cta { position:relative; background:#EA5504; overflow:hidden; }
.rj-cta::before { content:"NEXT"; position:absolute; right:-12px; bottom:-50px; color:#ffffff14; font:900 clamp(140px,24vw,360px)/1 sans-serif; letter-spacing:-.08em; pointer-events:none; }
.rj-cta .inner { padding-top:80px; padding-bottom:80px; }
.rj-cta h2 { font-size:clamp(30px,3.5vw,50px); line-height:1.45; max-width:680px; }
.rj-cta p { font-size:14px; line-height:1.9; }
.rj-cta__btn { background:#262A2E; font-size:15px; padding:24px 30px; }
.rj-cta__btn:hover { background:#16181c; }
.rj a:focus-visible { outline:3px solid #c4400a; outline-offset:5px; }
.rj-cta a:focus-visible,.rj-index a:focus-visible { outline-color:white; }
@media(max-width:1100px) {
 .rj-hero__text { width:59%; }
 .rj-hero__lead,.rj-hero__lead-ja { max-width:360px; }
 .rj-two .inner { gap:36px; }
 .rj-05__cols { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:767px) {
 .rj-hero { display:flex; flex-direction:column; min-height:0; }
 .rj-hero > .inner { order:0; width:100%; }
 .rj-hero__text { width:100%; padding:48px 0 36px; }
 .rj-hero__h1 { font-size:clamp(39px,8.5vw,62px); }
 .rj-hero__lead,.rj-hero__lead-ja { max-width:none; }
 .rj-hero__photo { position:relative; order:1; top:auto; width:calc(100% - 24px); height:320px; margin-left:24px; clip-path:polygon(9% 0,100% 0,100% 100%,0 100%,0 12%); }
 .rj-index { justify-content:flex-start; padding:16px; }
 .rj-index a { width:50%; padding:12px 8px; border:0; }
 .rj-two .inner,.rj-02 .inner,.rj-03 .inner,.rj-04 .inner,.rj-07 .inner { grid-template-columns:1fr; padding-top:64px; padding-bottom:64px; gap:36px; }
 .rj-02__fig { height:320px; margin-bottom:20px; }
 .rj-02__hex { display:flex; right:0; padding:20px; }
 .rj-03 .hexph { aspect-ratio:1.4; order:2; }
 .rj-04 .hexph { aspect-ratio:1.2; }
 .rj-05 .inner,.rj-06 .inner { padding-top:64px; padding-bottom:64px; }
 .rj-05__cols { grid-template-columns:1fr; gap:14px; margin-top:30px; }
 .rj-05__col { padding:24px; }
 .rj-05__col h3 { margin-top:16px; }
 .rj-06__steps { grid-template-columns:1fr; text-align:left; gap:0; margin-top:32px; }
 .rj-06__steps::before { display:block; top:16px; bottom:32px; height:auto; width:1px; left:30px; right:auto; }
 .rj-06__step { padding:0 0 30px 88px; min-height:130px; }
 .rj-06__icon { position:absolute; left:7px; top:10px; width:48px; height:48px; }
 .rj-06__n { margin-top:0; }
 .rj-06__d { margin-top:10px; }
 .rj-07 .hexph { display:none; }
 .rj-07__row { grid-template-columns:80px minmax(0,1fr); gap:12px; }
 .rj-cta .inner { padding-top:60px; padding-bottom:60px; }
 .rj-cta__btn { width:100%; justify-content:center; }
}
@media(min-width:768px) and (max-width:1023px) {
 .rj-hero__photo { position:absolute; height:calc(100% - 100px); }
 .rj-hero__text { padding-top:64px; padding-bottom:64px; }
 .rj-hero__h1 { font-size:48px; }
 .rj-06__steps { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
 .rj-06__t { font-size:13px; }
 .rj-06__d { font-size:12px; }
}

/* ══ ヒーロー（images/recruit/recruit_demo.png の再現）══════════════════
   1672px 幅のデモを基準に、各層の位置を % で追従させる。文字は左 42%、右に切り出し画像を重ねる。 */
.rj .rj-hero { position:relative; overflow:hidden; min-height:clamp(560px,56.3vw,940px); background:#F6F3EF; }
.rj-hero__stage { position:absolute; inset:0; pointer-events:none; }
.rj-hero__stage img { position:absolute; display:block; max-width:none; }
.rj-hero__streaks { left:28%; top:0; width:72%; height:100%; object-fit:cover; object-position:left center; }
.rj-hero__letters { left:37%; top:9%; width:59%; }
.rj-hero__script  { left:72.5%; top:1.5%; width:21%; }
.rj-hero__rebar   { right:-2%; top:0; height:100%; width:auto; }
/* 1440px を超える画面では .inner が中央寄せになるので、職人の位置もその分だけ右へずらして文字との間隔を保つ */
.rj .rj-hero__worker { position:absolute; z-index:2; left:calc(max(0px, (100% - 1440px) / 2) + 38%); bottom:0; height:auto; width:34%; max-width:none; }
.rj .rj-hero > .inner { position:relative; z-index:3; }
.rj .rj-hero__text { width:36%; min-width:0; padding:clamp(40px,4.2vw,70px) 0 clamp(40px,4vw,68px); }
.rj .rj-hero__h1 { font-size:clamp(34px,5.6vw,94px); line-height:1.18; letter-spacing:-.04em; white-space:nowrap; margin-top:22px; }
.rj .rj-hero__ja { font-size:clamp(15px,1.4vw,24px); margin-top:22px; }
/* 見出しは 42% 幅いっぱいに、本文とボタンは職人（左 35%〜）に掛からない幅に抑える */
.rj .rj-hero__lead, .rj .rj-hero__lead-ja, .rj .rj-hero__actions { max-width:min(520px, 28.5vw); }
.rj .rj-hero__lead { font-size:clamp(13px,1vw,16px); margin-top:26px; }
.rj .rj-hero__lead-ja { font-size:clamp(12px,.85vw,14px); }
@media(max-width:767px) {
 .rj .rj-hero { display:flex; flex-direction:column; min-height:0; padding-bottom:0; }
 .rj .rj-hero > .inner { order:0; width:100%; }
 .rj .rj-hero__text { width:100%; padding:44px 0 24px; }
 .rj .rj-hero__lead, .rj .rj-hero__lead-ja, .rj .rj-hero__actions { max-width:none; }
 .rj .rj-hero__h1 { font-size:clamp(36px,9.6vw,44px); }
 /* スマホ：本文の下に、RECRUIT の文字と職人をまとめた絵をつくる */
 .rj-hero__stage { order:1; position:relative; inset:auto; height:300px; }
 .rj-hero__streaks { left:0; width:100%; }
 .rj-hero__rebar { right:-6%; }
 .rj-hero__letters { left:2%; top:10%; width:80%; }
 .rj-hero__script { left:auto; right:14%; top:2%; width:42%; }
 .rj .rj-hero__worker { left:auto; right:8%; bottom:0; width:56%; height:auto; }
}

/* 見出し「その手で、未来を組もう。」と「未経験から、一級技能士まで。」はデモの文字画像をそのまま使う
   （images/recruit/hero/headline.webp / tagline.webp）。alt に本文を入れてあるので読み上げ・検索は文字として扱われる */
.rj .rj-hero__h1 { margin-top:26px; font-size:0; line-height:0; letter-spacing:0; white-space:normal; }
.rj .rj-hero__h1 img { display:block; width:min(100%, 33vw); max-width:none; height:auto; }
.rj .rj-hero__ja { display:block; margin-top:22px; padding:0; border:0; background:transparent; font-size:0; line-height:0; }
.rj .rj-hero__ja img { display:block; width:min(100%, 23.5vw); max-width:none; height:auto; }
@media(max-width:767px) {
 .rj .rj-hero__h1 img { width:100%; }
 .rj .rj-hero__ja img { width:84%; }
}

/* ══ 06 応募の流れ：順番に現れるアニメーション ══════════════════════════
   セクションが画面に入ったら（JS で .rj-06 に .is-visible）、つなぐ線が伸び、
   「応募する」→「こちらからご連絡」→…→「入社」の順に 1 つずつ浮かび上がる。 */
.rj-06__steps::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s cubic-bezier(.16,1,.3,1) .1s; }
.rj-06.is-visible .rj-06__steps::before { transform: scaleX(1); }
.rj-06__step { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 260ms + 250ms); }
.rj-06__step .rj-06__icon { transform: rotate(45deg) scale(.7); transition: transform .6s cubic-bezier(.34,1.5,.64,1); transition-delay: calc(var(--i) * 260ms + 350ms); }
.rj-06.is-visible .rj-06__step { opacity: 1; transform: none; }
.rj-06.is-visible .rj-06__step .rj-06__icon { transform: rotate(45deg) scale(1); }
.rj-06__step:nth-child(1) { --i: 0; } .rj-06__step:nth-child(2) { --i: 1; } .rj-06__step:nth-child(3) { --i: 2; }
.rj-06__step:nth-child(4) { --i: 3; } .rj-06__step:nth-child(5) { --i: 4; }
@media (max-width: 767px) {
  /* スマホは縦並びなので、線は上から下へ伸びる */
  .rj-06__steps::before { transform: scaleY(0); transform-origin: top center; }
  .rj-06.is-visible .rj-06__steps::before { transform: scaleY(1); }
  .rj-06__step { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .rj-06__steps::before, .rj-06__step, .rj-06__step .rj-06__icon { transition: none; }
  .rj-06__steps::before { transform: none; } .rj-06__step { opacity: 1; transform: none; } .rj-06__step .rj-06__icon { transform: rotate(45deg); }
}