/* 採用ページ（/recruit/・新卒・中途）だけの見た目。頭は rq-。site.css の上に重ねる
   方向（2026-10-21 茗荷さん決定、concepts/recruit/v5 の案 X）：
   - 紙色と方眼、明るく。見出しは普通の文字。手書き（紺のサインペン、画像生成）は 1 画面に 1 か所
   - オレンジは数字・番号・ボタンだけ。写真は「写真はイメージ」と明記
   - 節の見せ方を 3 回続けない：図の帯 → 線の道筋 → 写真と左右の比較 → 数字の表 → 札と囲み → 年表 → 職種のカード → 工程
   - ?cms=1 を付けると、CMS で変えられる所に印が出る（data-cms） */

/* 最初の画面 */
.rq-hero{padding:clamp(100px,8.6vw,124px) 0 clamp(48px,5vw,72px)}
.rq-hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.85fr);gap:clamp(36px,4.6vw,64px);align-items:center}
.rq-hero .crumb,.rq-sub-head .crumb{margin-bottom:24px}
.rq-h1{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(36px,4.3vw,60px);line-height:1.32;letter-spacing:-.025em}
.rq-hand{display:block;width:auto;max-width:100%;transform:rotate(-1.5deg);transform-origin:left center}
.rq-hero .rq-hand{height:clamp(30px,2.9vw,42px);margin:14px 0 0 2px}
.rq-lead{margin:22px 0 0;max-width:560px;color:#3f4a5e;line-height:1.95}
.rq-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.rq-entry{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;color:#5c667a;font-size:13.5px}
.rq-entry a{color:#0b2560;font-weight:700;border-bottom:1px solid currentColor}.rq-entry a:hover{color:#c23f1f}
.rq-tmp{display:block;margin-top:10px;color:#8a93a5;font-size:11.5px}
.rq-themes{display:grid;grid-template-columns:repeat(5,auto);justify-content:start;gap:0;margin:30px 0 0;padding:0;list-style:none;border-top:1px solid rgba(11,37,96,.14)}
.rq-themes li{padding:12px 16px 0 0;font-size:13px;font-weight:700;line-height:1.5}
.rq-themes a{color:#0b2560}.rq-themes a:hover{color:#c23f1f}
.rq-themes b{display:block;margin-bottom:2px;color:#dd4f28;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.04em}
.rq-photo{position:relative;margin:0;aspect-ratio:1/1;border-radius:3px;overflow:hidden;background:#efe9df}
.rq-photo img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.rq-note{position:absolute;right:10px;bottom:8px;padding:2px 8px;border-radius:2px;background:rgba(255,255,255,.88);color:#5c667a;font-size:11px}

/* 最初の画面（2026-10-22 茗荷さんの見本「オレンジ × ネイビー」）
   右に図（RecruitFvArt.astro の SVG）、左に文字。右端に縦に積んだ英語（LEAD THE NEXT STANDARD など。読み上げない飾り） */
.rq-fv{position:relative;display:flex;overflow:hidden;min-height:clamp(640px,100svh,1080px);padding:clamp(100px,8.6vw,124px) 0 clamp(56px,6vw,96px);background:#faf8f4} /* 画面の高さいっぱい */
/* 図は FV 全体に敷き、右下を基準に足りない側を切る（preserveAspectRatio="xMaxYMax slice"）。帯の根元は FV の下の線に乗る */
.rq-art{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:hidden;pointer-events:none}
/* パンくずは他の下層ページと同じ位置に置き、見出しから下は残りの高さの真ん中に */
.rq-fv-in{position:relative;z-index:1;display:flex;flex-direction:column;width:100%}
.rq-fv-copy{position:relative;margin-block:auto}
/* 左の余白に縦の英字（読み上げない飾り）。文字のかたまりの下端から上へ読む。左の余白のまん中に置く */
.rq-fv-side{position:absolute;bottom:-10px;left:calc((max(0px,(100vw - 1296px) / 2) + clamp(20px,4vw,48px)) / -2 - 6px);display:flex;align-items:center;gap:16px;margin:0;writing-mode:vertical-rl;rotate:180deg;color:rgba(11,37,96,.6);font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.36em;white-space:nowrap}
.rq-fv-side::after{content:"";width:1px;height:clamp(60px,8vw,120px);background:rgba(11,37,96,.35)}
.rq-fv .crumb{margin-bottom:24px}
.rq-fv-h1{margin:0;color:#0b2560;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(40px,6.4vw,100px);line-height:1.18;letter-spacing:-.03em}
.rq-fv-h1 .nb{display:block}
.rq-fv-h1.is-img img{display:block;width:clamp(300px,46vw,760px);max-width:100%;height:auto}
.rq-fv-sub.is-img img{display:block;width:clamp(260px,30vw,500px);max-width:100%;height:auto}
/* 手書きはペンで書くように左から出す（見出しが出たあと） */
.rq-fv-sub.is-img img{animation:rqs-write 1.12s cubic-bezier(.45,0,.2,1) 0.49s both}
@keyframes rqs-write{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
.rq-fv-sub{margin:28px 0 0;color:#3f4a5e;font-size:clamp(18px,1.75vw,26px);font-weight:500;line-height:1.5;letter-spacing:.02em}
@media (max-width:1199px){.rqa-en{display:none}} /* 小さい幅では英語が読めない大きさになる */
/* 次の段とのつなぎ：下の段の上の縁をゆるい円弧にする（右の円と形をそろえる）。開いたときは見せない（FV が画面の高さちょうどなので、FV の中に置くと最初から見えてしまう）
   スクロールすると円弧が深くなって白い紙が FV にかぶさり、図は遅れて沈み、見出しは上へ逃げながら薄くなる（scroll-driven animations。対応しないブラウザは形だけ） */
.rq-fv{--arc:clamp(40px,4.4vw,96px);--arc-h:calc(var(--arc) * 2.78)} /* 円弧の高さ（真ん中がこの分だけ盛り上がり、画面の左右の端で FV の下の線に戻る） */
/* 図は円弧の高さ分だけ上へ。帯の根元が円弧の頂上に乗り、帯と紺の円は円弧の下まで続く（SVG の外も描く） */
.rq-fv .rq-art{top:0;bottom:auto;height:calc(100% - var(--arc));overflow:visible}
/* 円弧の面：形は mask で切り、中は下の道（.rq-way）と同じ紙色・粒子・縦線。FV の左の縦の英字の線が、円弧を通って道へつながる */
.rq-fv{--x:calc((max(0px,(100vw - 1296px) / 2) + clamp(20px,4vw,48px)) / 2)}
.rq-fv::after{content:"";position:absolute;left:0;right:0;top:calc(100% - var(--arc));z-index:2;height:calc(var(--arc-h) + 70vh);pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(rgba(11,37,96,.28),rgba(11,37,96,.28)) var(--x) calc(var(--arc-h) * .35)/1px 100% no-repeat,#faf8f4;
  -webkit-mask:radial-gradient(65% 100% at 50% 100%,#000 calc(100% - 1.5px),transparent 100%) top/100% var(--arc-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--arc-h) - 3px)/100% 100% no-repeat;
  mask:radial-gradient(65% 100% at 50% 100%,#000 calc(100% - 1.5px),transparent 100%) top/100% var(--arc-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--arc-h) - 3px)/100% 100% no-repeat;
  display:none}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:700px) and (min-aspect-ratio:1/1){
    .rq-fv::after{display:block;animation:rqs-arc linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .rq-art,.rq-dust{animation:rqs-sink linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    .rq-fv-copy{animation:rqs-lift linear both;animation-timeline:scroll(root);animation-range:0 70vh}
  }
}
@keyframes rqs-arc{0%{transform:translateY(calc(var(--arc-h) + 2px))}5%{transform:none}100%{transform:translateY(-16vh)}} /* 開いたときは FV の下の外に隠れ、スクロールし始めると下からせり上がって、同じ形のまま FV を覆う */
@keyframes rqs-sink{to{transform:translateY(22%) scale(1.04);opacity:.55}}
@keyframes rqs-lift{to{transform:translateY(-56px);opacity:0}}
/* スマホと縦長の画面は別の作り：夕景の写真に後ろ姿の人物、上は紙色でぼかして見出しを読ませ、下に職種へのボタン（2026-10-22 茗荷さんの B 案）
   写真・人物・光は CSS の背景で読み込む（パソコンの画面では読み込まない） */
.rq-sp-bg{display:none}
/* 光の粒（src/scripts/recruit-dust.ts）。図の上、文字の下。スマホは写真に光として重ねる */
.rq-dust{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
@media (max-width:699px),(max-aspect-ratio:1/1){
  .rq-fv{flex-direction:column;min-height:max(100svh,640px);padding:clamp(84px,24vw,104px) 0 calc(24px + env(safe-area-inset-bottom));background:#2a3566}
  .rq-fv::before{z-index:1}
  .rq-fv-in{flex:1}
  .rq-fv-copy{margin:0}
  .rq-art{display:none}
  .rq-fv::after{display:none}
  .rq-dust{mix-blend-mode:screen}
  .rq-sp-bg{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
  .rq-sp-bg i{position:absolute;inset:0;background-repeat:no-repeat}
  .rq-sp-bg .sky{background-image:url(/assets/recruit/sp/fv-sky.webp);background-size:cover;background-position:center 78%}
  /* 上は紙色で写真を薄め、見出しと手書きを読ませる。下は紺で締めてボタンを浮かせる */
  .rq-sp-bg::before,.rq-sp-bg::after{content:"";position:absolute;inset:0;z-index:2}
  .rq-sp-bg::before{background:linear-gradient(180deg,rgba(250,248,244,.97) 0%,rgba(250,248,244,.9) 30%,rgba(250,248,244,.45) 46%,rgba(250,248,244,0) 60%)}
  .rq-sp-bg::after{z-index:4;background:linear-gradient(180deg,rgba(11,37,96,0) 62%,rgba(11,37,96,.5) 84%,rgba(8,26,70,.85) 100%)}
  .rq-sp-bg .flare{z-index:3;background-image:url(/assets/recruit/sp/fv-flare.webp);background-size:78% auto;background-position:right 30%;mix-blend-mode:screen;opacity:.75}
  .rq-sp-bg .person{z-index:3;background-image:url(/assets/recruit/sp/fv-person.webp);background-size:auto min(54%,calc(100% - 405px));background-position:58% 100%;filter:brightness(.88) saturate(.9)} /* 逆光の空になじませるため少し落とす。高さは文字の下に残る分まで（背の低い画面で頭が手書きに重ならない） */
  .rq-fv-h1.is-img img{width:min(100%,560px)}
  .rq-fv-sub{margin-top:18px}
  .rq-fv-sub.is-img img{width:min(68%,280px)}
  .rq-fv-side{font-size:9px;letter-spacing:.3em;gap:12px}
  /* 動き：写真が寄って止まり、そのあともゆっくり寄ったり引いたりを続ける。人物は下から上がり、スクロールで背景より遅れて動く（--py、recruit/index.astro の script）。光はゆっくり明るさを変える */
  .rq-sp-bg .sky{animation:rqs-sky 1.26s cubic-bezier(.19,1,.22,1) both,rqs-drift 22s ease-in-out 1s infinite alternate}
  .rq-sp-bg .person{translate:0 var(--py,0px);animation:rqs-up 0.98s cubic-bezier(.19,1,.22,1) 0.21s both}
  .rq-sp-bg .flare{transform-origin:100% 30%;animation:rqa-fade 0.84s ease-out 0.56s both,rqs-glow 7s ease-in-out 1s infinite alternate}
  /* 手書きは 1 行目を書いてから 2 行目（2 行の画像を多角形で切って順に見せる） */
  .rq-fv-sub.is-img img{animation:rqs-write2 1.54s cubic-bezier(.45,0,.2,1) 0.49s both}
}
@keyframes rqs-sky{from{transform:scale(1.08)}to{transform:none}}
@keyframes rqs-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes rqs-drift{from{transform:none}to{transform:scale(1.06) translate(-1.5%,-1%)}}
@keyframes rqs-glow{from{opacity:.75;transform:none}to{opacity:.45;transform:rotate(-4deg) scale(1.05)}}
@keyframes rqs-write2{0%{clip-path:polygon(0 -10%,0 -10%,0 50%,0 50%,0 110%,0 110%)}55%{clip-path:polygon(0 -10%,100% -10%,100% 50%,0 50%,0 110%,0 110%)}100%{clip-path:polygon(0 -10%,100% -10%,100% 50%,100% 50%,100% 110%,0 110%)}}
@keyframes rqs-shine{0%{left:-40%}35%,100%{left:120%}}
@keyframes rqs-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.rq-fv::after{animation:none!important}.rq-sp-bg i,.rq-fv-sub.is-img img{animation:none!important}.rq-sp-bg .person{translate:none}}

/* 質感：紙の地にもごく弱い粒子。図の面の粒子は SVG の中（.rqa-grain） */
.rq-fv::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.rqa-grain{opacity:.18}
/* 動き：読み込み時に図を組み立てる（線を引く → 面が入る → 粒が出る）。文字は下から順に */
.rqa-l{will-change:translate}
.rqa-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:rqa-draw 0.84s cubic-bezier(.19,1,.22,1) 0.49s forwards}
.rqa-circle{animation-duration:1.26s;animation-delay:0.35s}
.rqa-fade{opacity:0;animation:rqa-fade 0.56s ease-out 0.77s forwards}
.rqa-d2{animation-delay:0.63s}
.rqa-d3{animation-delay:1.05s}
.rqa-ribbon{clip-path:inset(0 100% 0 0);animation:rqa-wipe 0.77s cubic-bezier(.19,1,.22,1) 0.14s forwards}
.rqa-prism{opacity:0;transform:translateY(-48px);animation:rqa-in 0.7s cubic-bezier(.19,1,.22,1) 0.42s forwards}
.rqa-navy{opacity:0;transform:translate(80px,80px);animation:rqa-in 0.84s cubic-bezier(.19,1,.22,1) 0.28s forwards}
.rq-fv-in>.crumb,.rq-fv-copy>:not(.rq-fv-side){opacity:0;transform:translateY(14px);animation:rqa-in 0.7s cubic-bezier(.19,1,.22,1) forwards}
.rq-fv-copy>:nth-child(1){animation-delay:0.06s}.rq-fv-copy>:nth-child(2){animation-delay:0.14s}.rq-fv-copy>:nth-child(3){animation-delay:0.28s}
.rq-fv-side{opacity:0;animation:rqa-fade 0.56s ease-out 0.98s forwards}
.rqa-en{opacity:0;animation:rqa-fade 0.56s ease-out 0.98s forwards}
@keyframes rqa-draw{to{stroke-dashoffset:0}}
@keyframes rqa-fade{to{opacity:1}}
@keyframes rqa-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes rqa-in{to{opacity:1;transform:none}}
/* CTA の帯も、見えたときに入ってくる */
@media (prefers-reduced-motion:reduce){
  .rqa-draw,.rqa-fade,.rqa-ribbon,.rqa-prism,.rqa-navy,.rq-fv-in>.crumb,.rq-fv-copy>*,.rqa-en{animation:none;opacity:1;transform:none;clip-path:none;stroke-dashoffset:0}
}

/* 数字（04 の節で使う。FV の段と同じ形） */
.rq-fv-nums{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1fr;margin:0}
.rq-th-nums{margin-top:30px;padding:24px 0;border-top:1px solid rgba(11,37,96,.14);border-bottom:1px solid rgba(11,37,96,.14)}
.rq-fv-nums .s{white-space:nowrap}
.rq-fv-nums>div{padding:0 clamp(18px,2.6vw,40px);border-left:1px solid rgba(11,37,96,.16)}
.rq-fv-nums>div:first-child{padding-left:0;border-left:0}
.rq-fv-nums dt{color:#0b2560;font-size:13.5px;font-weight:700}
.rq-fv-nums dd{margin:4px 0 0}
.rq-fv-nums .v{display:block;color:#dd4f28;font:700 clamp(26px,2.65vw,38px)/1.15 'DM Sans',sans-serif;letter-spacing:-.02em;white-space:nowrap}
.rq-fv-nums .v small{margin-left:4px;color:#dd4f28;font:700 15px 'Noto Sans JP',sans-serif}
.rq-fv-nums .s{display:block;margin-top:4px;color:#5c667a;font-size:13px}
/* ページ全体：地の方眼をやめ、FV と同じ平らな紙色と白を交互に。CTA の右下に FV の帯と円弧を小さく */
.rq-page .bg-paper{background-image:none;background-color:#faf8f4}
.rq-cta{position:relative;overflow:hidden}
.rq-cta .wrap{position:relative;z-index:1}

/* 数字の帯 */
.rq-nums{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;border-top:1px solid rgba(11,37,96,.14);border-bottom:1px solid rgba(11,37,96,.14)}
.rq-num{padding:24px 22px;border-left:1px solid rgba(11,37,96,.14)}.rq-num:first-child{border-left:0;padding-left:0}
.rq-num dt{color:#5c667a;font-size:13px}
.rq-num dd{margin:6px 0 0}
.rq-num .v{display:block;color:#dd4f28;font:700 clamp(30px,3.2vw,46px)/1.15 'DM Sans',sans-serif;letter-spacing:-.02em}
.rq-num .v small{margin-left:4px;color:#0b2560;font:700 .38em 'Noto Sans JP',sans-serif}
.rq-num .s{display:block;margin-top:4px;color:#5c667a;font-size:13px}

/* 5 テーマの節（共通の頭） */
.rq-th{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.rq-th-head{display:flex;flex-direction:column;gap:10px}
.rq-th-no{color:#dd4f28;font:700 64px/1 'DM Sans',sans-serif;letter-spacing:-.03em}
.rq-th-key{color:#0b2560;font:900 20px/1.5 'Zen Kaku Gothic New',sans-serif}
.rq-th-sub{margin:0 0 10px;color:#3f4a5e;font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:.02em}
.rq-th-body .h2{max-width:760px}
.rq-th-body .txt{margin-top:18px;max-width:700px;font-size:17px;line-height:1.95}
.rq-cap{margin:14px 0 0;color:#5c667a;font-size:15px;line-height:1.85}
.rq-need{color:#b0123a;font-size:.92em}

/* 01 上流：工程の帯 */
.rq-proc{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:32px 0 0;padding:0;list-style:none}
.rq-proc li{padding:16px 6px;font-size:15px !important;background:#fff;border:1px solid rgba(11,37,96,.14);color:#5c667a;font-size:13.5px;font-weight:700;text-align:center}
.rq-proc li.up{background:#0b2560;border-color:#0b2560;color:#fff}
.rq-ppl{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.rq-ppl > div{padding:20px 22px;background:#fff;border:1px solid rgba(11,37,96,.14)}
.rq-ppl b{color:#0b2560}.rq-ppl p{margin:8px 0 0;color:#3f4a5e;font-size:15px;line-height:1.8}

/* 02 リーダー：線の道筋 */
.rq-path{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin:36px 0 0;padding:0;list-style:none}
.rq-path::before{content:"";position:absolute;left:9px;right:9px;top:9px;height:2px;background:#d8d2c6}
.rq-path li{position:relative;padding:34px 12px 0 0}
.rq-path li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:#faf8f4;border:3px solid #0b2560}
.rq-path li:last-child::before{background:#0b2560}
.rq-path b{display:block;color:#dd4f28;font:700 13px 'DM Sans','Noto Sans JP',sans-serif}
.rq-path span{color:#0b2560;font:900 clamp(14px,1.25vw,16px)/1.45 'Zen Kaku Gothic New',sans-serif}

/* 03 AI：写真の帯と、左右の比較 */
.rq-two{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:30px;border:1px solid rgba(11,37,96,.14);background:#fff}
.rq-two > div{padding:24px 26px}
.rq-two > div + div{border-left:1px solid rgba(11,37,96,.14);background:#f2f5fa}
.rq-two h3{margin:0 0 12px;color:#0b2560;font:900 21px 'Zen Kaku Gothic New',sans-serif}
.rq-two ul{margin:0;padding:0;list-style:none}
.rq-two li{padding:9px 0;border-top:1px dashed rgba(11,37,96,.14);color:#0b2560;font-size:17px;font-weight:700}
.rq-two > div{position:relative}.rq-two > div + div::before{content:"→";position:absolute;left:-17px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%;background:#0b2560;color:#fff;font:700 15px/32px 'DM Sans';text-align:center}.rq-two li:first-child{border-top:0}

/* 04 キャリア：表 */
.rq-tbl{margin:30px 0 0;border-top:1px solid #d8d2c6}
.rq-tbl > div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid rgba(11,37,96,.14)}
.rq-tbl dt{color:#0b2560;font-weight:700;font-size:15.5px}.rq-tbl dd{margin:0;color:#3f4a5e;font-size:15.5px}

/* 02：仕事の例（事例のコラムへ） */
.rq-cases{margin-top:28px;border-top:1px solid #d8d2c6}
.rq-cases-t{margin:14px 0 4px;color:#5c667a;font-size:13px;font-weight:700}
.rq-cases a{display:grid;grid-template-columns:170px minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(11,37,96,.14);color:#3f4a5e}
.rq-cases a::after{content:"→";color:#0b2560;font-family:'DM Sans'}
.rq-cases a:hover{color:#0b2560}
.rq-cases b{color:#0b2560;font-size:16px}
.rq-cases a{font-size:16px;padding:18px 0}
.rq-cases span{text-wrap:pretty}
.rq-work{margin-top:28px}.rq-work p{margin:0;color:#3f4a5e;font-size:15.5px;line-height:1.85}
.rq-work > div + div::before{display:none}
.rq-flow-s{display:block;margin-top:6px;color:#5c667a;font-size:12.5px;font-weight:500;line-height:1.6}
/* 04：評価から昇格・昇給・賞与までの流れ */
.rq-cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:30px 0 0;padding:0;list-style:none;counter-reset:c}
.rq-cycle li{position:relative;padding:18px 22px 16px;background:#fff;border:1px solid rgba(11,37,96,.14);margin-left:-1px}
.rq-cycle li + li::before{content:"";position:absolute;left:-8px;top:50%;width:14px;height:14px;margin-top:-7px;border-top:1px solid rgba(11,37,96,.14);border-right:1px solid rgba(11,37,96,.14);background:#fff;transform:rotate(45deg)}
.rq-cycle b{display:block;color:#dd4f28;font:700 13px 'DM Sans','Noto Sans JP',sans-serif}
.rq-cycle li{padding:22px 22px 20px}.rq-cycle span{display:block;margin-top:6px;color:#0b2560;font:900 17px/1.55 'Zen Kaku Gothic New',sans-serif}
.rq-shot{margin:26px 0 0;border:1px solid rgba(11,37,96,.14);background:#fff;padding:14px}
.rq-shot img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)} /* 見本の途中で切っているので、下を薄くして切り抜きだと分かるように */
.rq-shot figcaption{margin-top:10px;color:#5c667a;font-size:13px}
/* 05 挑戦：言葉と札と、足したい材料の枠 */
.rq-value{margin:26px 0 0;padding:22px 26px;border-left:3px solid #0b2560;background:#fff}
.rq-value p{margin:0;color:#0b2560;font:900 clamp(22px,2.2vw,28px)/1.5 'Zen Kaku Gothic New',sans-serif}
.rq-value small{display:block;margin-top:6px;color:#5c667a;font-size:13px}
.rq-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.rq-chips li{padding:8px 16px;border:1px solid #d8d2c6;border-radius:999px;background:#fff;color:#0b2560;font-size:14px;font-weight:700}
.rq-todo{margin-top:22px;padding:18px 22px;border:1.5px dashed #d9a0b0;background:#fff7f9}
.rq-todo b{color:#b0123a;font-size:14px}.rq-todo p{margin:6px 0 0;color:#3f4a5e;font-size:14px;line-height:1.8}

/* なぜ今：年表 */
.rq-tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:36px 0 0;padding:0;list-style:none;border-top:2px solid #0b2560}
.rq-tl li{padding:18px 16px 0 0}
.rq-tl b{display:block;color:#dd4f28;font:700 20px 'DM Sans','Noto Sans JP',sans-serif}
.rq-tl span{color:#0b2560;font-size:14.5px;font-weight:700;line-height:1.6}

/* 募集職種：カード */
.rq-jobs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rq-job{display:flex;flex-direction:column;padding:30px 30px 26px;background:#fff;border:1px solid rgba(11,37,96,.14);color:inherit;transition:box-shadow .3s}
.rq-job:hover{color:inherit;box-shadow:0 14px 40px rgba(11,37,96,.08)}
.rq-job .k{color:#5c667a;font:700 12px 'DM Sans',sans-serif;letter-spacing:.16em}
.rq-job h3{margin:8px 0 0;color:#0b2560;font:900 26px/1.4 'Zen Kaku Gothic New',sans-serif}
.rq-job p{margin:10px 0 0;color:#3f4a5e;line-height:1.8}
.rq-job .pay{display:block;margin-top:16px;color:#dd4f28;font-weight:700;font-size:17px}
.rq-job .gap{flex:1 0 20px}.rq-job .more{align-self:flex-start}

/* 選考の流れ：工程 */
.rq-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0 0;padding:0;list-style:none;counter-reset:f}
.rq-flow li{position:relative;padding:18px 18px 16px;background:#fff;border:1px solid rgba(11,37,96,.14);color:#0b2560;font-weight:700;line-height:1.6}
.rq-flow li b{display:block;color:#dd4f28;font:700 13px 'DM Sans',sans-serif}
.rq-flow li.opt{border-style:dashed;background:transparent}

/* 締めの帯の代表のサイン */
.rq-sign{display:flex;align-items:center;gap:12px;margin-top:22px;color:rgba(255,255,255,.75);font-size:13px}
.rq-sign img{height:50px;width:auto;filter:invert(1) brightness(2)}

/* 新卒・中途：募集要項 */
.rq-sub-head{padding:clamp(100px,8.6vw,124px) 0 clamp(36px,4vw,52px)}
.rq-sub-head .rq-h1{font-size:clamp(34px,3.8vw,52px)}
.rq-sub-lead{margin:18px 0 0;max-width:720px;color:#3f4a5e;line-height:1.95}
.rq-jd{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,56px)}
.rq-after{padding:28px 0 0}.rq-after h2{font-size:20px}
.rq-jd + .rq-jd{margin-top:clamp(48px,5vw,64px)}
.rq-jd h2{margin:0;color:#0b2560;font:900 22px/1.5 'Zen Kaku Gothic New',sans-serif}
.rq-jd h2 b{display:block;margin-bottom:8px;color:#dd4f28;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.16em}
.rq-req{margin:0;background:#fff;border:1px solid rgba(11,37,96,.14)}
.rq-req > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;padding:16px 22px;border-top:1px solid #ece7dd}
.rq-req > div:first-child{border-top:0}
.rq-req dt{color:#0b2560;font-weight:700}
.rq-req dd{margin:0;color:#3f4a5e;font-size:15.5px;line-height:1.85}
.rq-req dd span{display:block}
.rq-steps{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.rq-steps li{padding:12px 18px;background:#fff;border:1px solid rgba(11,37,96,.14);color:#0b2560;font-weight:700}
.rq-steps b{margin-right:8px;color:#dd4f28;font-family:'DM Sans',sans-serif}
.rq-docs{margin:0;color:#3f4a5e}
.rq-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:32px}

/* CMS で変えられる所の印（?cms=1） */
.cms-on [data-cms]{outline:1.5px dashed #2e7bd6;outline-offset:4px;position:relative}
.cms-on [data-cms]::after{content:"CMS: " attr(data-cms);position:absolute;left:0;top:-22px;z-index:3;padding:1px 6px;background:#2e7bd6;color:#fff;font:600 10.5px/1.6 'DM Sans',sans-serif;letter-spacing:.02em;white-space:nowrap}

@media (max-width:899px){
  .rq-fv-nums{grid-template-columns:1fr 1fr;row-gap:20px}
  .rq-fv-nums>div:nth-child(3){padding-left:0;border-left:0}
  .rq-fv-nums .v,.rq-fv-nums .s{white-space:normal}
  .rq-hero-grid{grid-template-columns:1fr}
  .rq-photo{aspect-ratio:4/3}
  .rq-th,.rq-jd{grid-template-columns:1fr;gap:16px}
  .rq-th-head{flex-direction:row;align-items:baseline;gap:14px}
  .rq-th-no{font-size:44px}
  .rq-nums{grid-template-columns:1fr 1fr}
  .rq-num:nth-child(3){border-left:0;padding-left:0}
  .rq-num:nth-child(n+3){border-top:1px solid rgba(11,37,96,.14)}
  .rq-proc{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rq-tl{grid-template-columns:1fr 1fr 1fr}
  .rq-flow{grid-template-columns:1fr 1fr}
  .rq-cycle{grid-template-columns:1fr 1fr}.rq-cycle li + li::before{display:none}
}
@media (max-width:699px){
  .rq-fv-h1{font-size:clamp(34px,9.6vw,44px)}
  .rq-cycle{grid-template-columns:1fr}.rq-cycle li{display:grid;grid-template-columns:4em minmax(0,1fr);align-items:baseline;gap:12px;margin:-1px 0 0;padding:16px 18px}.rq-cycle span{margin-top:0;font-size:16px} /* スマホは 1 列。左に項目、右に中身（2×2 だと括弧の途中で折り返す） */
  .rq-themes{grid-template-columns:1fr 1fr}
  .rq-ppl,.rq-two,.rq-jobs{grid-template-columns:1fr}
  .rq-two > div + div{border-left:0;border-top:1px solid rgba(11,37,96,.14)}
  .rq-two > div + div::before{left:50%;top:-16px;margin:0 0 0 -16px;content:"↓"}
  .rq-path{grid-template-columns:1fr 1fr;row-gap:24px}.rq-path::before{display:none}
  .rq-tl{grid-template-columns:1fr 1fr}
  .rq-tbl > div,.rq-req > div{grid-template-columns:1fr;gap:4px}
  .rq-cases a{grid-template-columns:1fr;gap:4px}.rq-cases a::after{display:none}
  .rq-num{padding:18px 12px 18px 0}
  .rq-hero{padding:88px 0 40px}.rq-sub-head{padding:88px 0 32px}.rq-hero .crumb,.rq-sub-head .crumb{margin-bottom:24px}.rq-hero .eyebrow{margin-bottom:12px}
  .rq-lead{margin-top:16px}.rq-acts{margin-top:22px}.rq-acts .btn{width:100%}
}

/* 下へのスクロールを促す印（読み上げない飾り）：下の真ん中に SCROLL の横文字と下向きの山形
   FV の動きが落ち着いてから（3.2 秒後）字間を締めながら出る。山形は上から下へ流れて消え、間を置いてまた流れる。文字は動かさない。スクロールし始めたら消す */
.rq-scroll{position:absolute;z-index:3;left:50%;bottom:clamp(18px,3vh,34px);translate:-50% 0;pointer-events:none;color:#fff;filter:drop-shadow(0 1px 6px rgba(8,26,70,.4))}
.rq-scroll span{display:block;font:600 10px/1 'DM Sans',sans-serif;letter-spacing:.32em;padding-left:.32em;animation:rqsc-in 1.2s cubic-bezier(.19,1,.22,1) 3.2s both}
.rq-scroll i{position:relative;display:block;width:12px;height:22px;margin:6px auto 0;overflow:hidden}
.rq-scroll i::after{content:"";position:absolute;left:1px;top:0;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;opacity:0;animation:rqsc-flow 2.8s cubic-bezier(.45,0,.25,1) 3.7s infinite}
@keyframes rqsc-in{from{opacity:0;letter-spacing:.7em;padding-left:.7em}to{opacity:1}}
@keyframes rqsc-flow{0%{translate:0 -10px;opacity:0}18%{opacity:1}45%{translate:0 10px;opacity:0}100%{translate:0 10px;opacity:0}}
@supports (animation-timeline:scroll()){
  .rq-scroll{animation:rqsc-out linear both;animation-timeline:scroll(root);animation-range:0 12vh}
}
@keyframes rqsc-out{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.rq-scroll span,.rq-scroll i::after{animation:none!important;opacity:1}.rq-scroll i::after{translate:0 4px}}

/* テーマの道（01〜）：紙色の地に、FV の左の縦の英字と同じ位置から紺の細い線が下へ続き、各テーマはその線に掛かる宣言
   点は段が画面の中ほどに来たら（.is-in）オレンジに灯る。右にはオレンジの帯の欠片が、先のテーマほど高く・角度を立てて差し込む（上へ登っていく流れ） */
.rq-way{position:relative;--x:calc((max(0px,(100vw - 1296px) / 2) + clamp(20px,4vw,48px)) / 2);--ease:cubic-bezier(.19,1,.22,1);background:#faf8f4;overflow:clip} /* hidden だと中の sticky が効かない */
.rq-way::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.rq-way::after{content:"";position:absolute;left:var(--x);top:0;bottom:0;width:1px;background:rgba(11,37,96,.28)}
.rq-step{position:relative;padding:clamp(96px,11vw,170px) 0}
.rq-step:first-of-type{padding-top:clamp(24px,2.5vw,40px)}
.rq-step:first-of-type::before{top:calc(clamp(24px,2.5vw,40px) + 6px)}.rq-step:first-of-type::after{top:calc(clamp(24px,2.5vw,40px) + 12px)}
.rq-step>.wrap{position:relative;z-index:1}
/* 道の点 */
.rq-step::before{content:"";position:absolute;z-index:2;left:calc(var(--x) - 6px);top:calc(clamp(96px,11vw,170px) + 6px);width:13px;height:13px;border-radius:50%;background:#faf8f4;border:1.5px solid #0b2560;transition:background .5s ease-out,border-color .5s ease-out,box-shadow .8s var(--ease)}
.rq-step.is-in::before{background:#dd4f28;border-color:#dd4f28;box-shadow:0 0 0 8px rgba(221,79,40,.12)}
/* 点から番号へ伸びる細い線 */
.rq-step::after{content:"";position:absolute;z-index:1;left:var(--x);top:calc(clamp(96px,11vw,170px) + 12px);width:calc(max(0px,(100vw - 1296px) / 2) + clamp(20px,4vw,48px) - var(--x) - 10px);height:1px;background:#dd4f28;transform-origin:0 50%;scale:0 1;transition:scale .6s var(--ease) .15s}
.rq-step.is-in::after{scale:1 1}
.rq-step-no{display:flex;align-items:baseline;gap:16px;margin:0;color:#0b2560;font:900 clamp(17px,1.4vw,20px)/1 'Zen Kaku Gothic New',sans-serif;letter-spacing:.06em}
.rq-step-no span{color:#dd4f28;font:700 clamp(15px,1.2vw,17px)/1 'DM Sans',sans-serif;letter-spacing:.08em}
.rq-step-hand{margin:clamp(28px,3vw,40px) 0 0}
.rq-step-hand img{display:block;width:clamp(200px,20vw,300px);height:auto}
.rq-step-hand.is-text{color:#0b2560;font-size:clamp(18px,1.6vw,22px)}
.rq-step-h{max-width:18em;margin:clamp(18px,2vw,28px) 0 0;color:#0b2560;font:900 clamp(26px,3.2vw,46px)/1.4 'Zen Kaku Gothic New',sans-serif;letter-spacing:-.015em;text-wrap:balance}
.rq-step-txt{max-width:34em;margin:clamp(22px,2.4vw,32px) 0 0;color:#3f4a5e;font-size:clamp(16px,1.3vw,18px);line-height:1.95}
/* 宣言は点が灯るのに合わせて下から出る */
.rq-step .wrap>*{opacity:0;translate:0 18px;transition:opacity .8s ease-out,translate 1s var(--ease)}
.rq-step.is-in .wrap>*{opacity:1;translate:none}
.rq-step.is-in .wrap>:nth-child(2){transition-delay:.08s}.rq-step.is-in .wrap>:nth-child(3){transition-delay:.16s}.rq-step.is-in .wrap>:nth-child(4){transition-delay:.24s}.rq-step.is-in .wrap>:nth-child(5){transition-delay:.32s}
/* 右の形の変わる図：道（.rq-way）の高さいっぱいの枠の中で、画面の中ほどに留まる（sticky）。形と色は recruit-morph.ts が変える */
.rq-morph{position:absolute;top:0;bottom:0;right:0;width:min(38vw,560px);pointer-events:none;z-index:0;opacity:.6} /* 文字より目立たせない */
.rq-morph-in{position:sticky;top:calc(50vh - min(38vw,560px) * .62);width:100%}
.rq-morph svg{display:block;width:100%;height:auto;overflow:visible}
.rq-step>.wrap{z-index:1}
/* 文字は右の図の左までに収める（図と重ねない） */
@media (min-width:900px){.rq-step>.wrap>*{max-width:calc(100vw - min(38vw,560px) - max(0px,(100vw - 1296px) / 2) - clamp(20px,4vw,48px) - 24px)}}
/* スマホ：画面が狭く文字と重なるので、右下に小さく薄く、文字の後ろに置く */
@media (max-width:899px){
  .rq-morph{width:40vw;opacity:.35}
  .rq-morph-in{top:calc(100svh - 40vw * 1.25 - 12px)}
}
/* 補足（02 のキャリアの例・仕事の例、03 の AI と人の分担）は宣言の下に控えめに */
.rq-step-more{max-width:900px;margin-top:clamp(48px,5vw,72px)}
/* 補足は宣言を邪魔しない静かな作り：箱や地の色をやめ、細い線と文字だけ。小見出しはオレンジの小さな文字 */
.rq-step-more>*:first-child{margin-top:0}
.rq-step-more .rq-cap{font-size:14px}
.rq-step-more .rq-path::before{background:rgba(11,37,96,.2);height:1px;top:10px}
.rq-step-more .rq-path li::before{width:14px;height:14px;top:3px;border-width:1.5px;background:#faf8f4}
.rq-step-more .rq-path li:last-child::before{background:#dd4f28;border-color:#dd4f28}
.rq-step-more .rq-cases,.rq-step-more .rq-tbl{border-top-color:rgba(11,37,96,.2)}
.rq-step-more .rq-cases-t{color:#dd4f28;font-size:12.5px;letter-spacing:.08em}
.rq-step-more .rq-two{gap:clamp(24px,4vw,56px);border:0;background:none}
.rq-step-more .rq-two>div{padding:0;background:none!important;border:0!important;border-top:1px solid rgba(11,37,96,.2)!important}
.rq-step-more .rq-two>div::before{display:none}
.rq-step-more .rq-two h3{margin:16px 0 6px;color:#dd4f28;font:700 13px 'Noto Sans JP',sans-serif;letter-spacing:.08em}
.rq-step-more .rq-two li{border-top:1px solid rgba(11,37,96,.1);font-size:16px}
.rq-step-more .rq-two li:first-child{border-top:0}
.rq-step-more .rq-th-nums{padding:28px 0;border-color:rgba(11,37,96,.2)}
.rq-step-more .rq-cycle{gap:0}
.rq-step-more .rq-cycle li{background:none;border:0;border-left:1px solid rgba(11,37,96,.2);margin:0;padding:6px 20px 6px}
.rq-step-more .rq-cycle li:first-child{border-left:0;padding-left:0}
.rq-step-more .rq-cycle li::before{display:none}
.rq-step-more .rq-value{padding:0 0 0 20px;border-left:2px solid #dd4f28;background:none}
.rq-step-more .rq-shot{padding:0;border:0;background:none}
.rq-step-more .rq-shot img{border:1px solid rgba(11,37,96,.14)}
.rq-step-more .rq-chips li{background:none;border-color:rgba(11,37,96,.25)}
.rq-step-more>*+*{margin-top:clamp(32px,3.5vw,48px)}
@media (max-width:699px){
  .rq-way{--x:10px}
  .rq-step{padding:88px 0 96px}
  .rq-step::before{top:94px}
  .rq-step::after{top:100px}
  .rq-step>.wrap{padding-left:36px}
  .rq-step{padding-bottom:140px}
}
@media (prefers-reduced-motion:reduce){
  .rq-step .wrap>*,.rq-step::before,.rq-step::after{transition:none!important}
  .rq-step .wrap>*{opacity:1;translate:none}.rq-step::after{scale:1 1}
}
@media (max-width:699px){
  .rq-step-more .rq-cycle li{border-left:0;border-top:1px solid rgba(11,37,96,.2);padding:12px 0}
  .rq-step-more .rq-cycle li:first-child{border-top:0}
}