/* =========================================================
   recruit.css ─ 採用まわり4ページの固有CSS
   /recruit/ ・ /recruit/requirements/ ・ /recruit/career/ ・ /recruit/faq/
   ★クラスは全部 rc- 接頭辞（既存の .rec-more / .iv-* と衝突させない）
   ★common.css → page.css → recruit.css の順で読む＝ここが最後に勝つ
   共通部品（.wrap/.s/.s-head/.eyebrow/.title/.lead/.btn/.pill-btn/.rec-more/
   .ph-in/.stat/.fact/.note）で足りるものは足していない
   ========================================================= */

/* ---------- ページヘッダーの巨大英字：文字列長ごとの下限 ----------
   .eyebrow.lg の既定は clamp(38px,6.95vw,100px)。長い文字列は版面を超えるので
   その instance だけ下限を下げる（#news の「NEWS & TOPICS」と同じ手当て）。
   ★下限は目分量でなく headless 実測から逆算した値（既定38px時の実測幅→比例計算）：
     REQUIREMENTS(12字) 38px=334px … 390の版面354はOKだが 360(324)/320(284) で超過 → 31px(=272px)
     CAREER PATH (11字) 38px=301px … 390/360 はOKだが 320(284) で超過        → 34px(=269px)
     Recruit(7字)=187px・FAQ(3字)=90px は 320 でも収まる＝下限を触らない
   ※既存 #news が390基準なのに対し、ここは 320 まで持たせている（実機の下限側に余裕を取る） */
.rc-hero-req .eyebrow.lg{font-size:clamp(31px,6.95vw,100px);}   /* REQUIREMENTS 12字 */
.rc-hero-car .eyebrow.lg{font-size:clamp(34px,6.95vw,100px);}   /* CAREER PATH 11字 */
/* セクション見出しの .eyebrow.lg も、12字前後の長い文字列は320で版面を超える（実測）。
   ★.eyebrow.lg の下限38pxを全体で下げると390（主要SP幅）まで小さくなってしまうので、
     長い文字列の instance だけスコープして下げる。下層ヒーローの手当てと同じ考え方。
     採用TOP #requirements「Requirements」12字 … 実測 -7〜327px
     IV詳細  #others      「Other Voices」12字 … 実測 -2〜322px */
#requirements .eyebrow.lg,
#others .eyebrow.lg{font-size:clamp(31px,6.95vw,100px);}

/* ---------- 未確定の印（事実・数値・待遇を発明しないための明示） ---------- */
.rc-tbd{color:var(--ink-3);font-size:.92em;font-weight:400;white-space:nowrap;}
.rc-tbd-box{margin:0;padding:clamp(20px,2.4vw,32px);border:1px dashed var(--line);border-radius:14px;
  background:var(--line-2);color:var(--ink-3);font-size:14px;line-height:2;letter-spacing:.04em;}

/* ---------- 白カードの縁（★地色が --paper のときに必要） ----------
   白カード(#fff)を --paper(#FBF9F6) に置くと差が4〜9しかなく、カードの輪郭が消える
   （--paper-2(#F2EEE7) の上なら塗りだけで成立する）。実測で確認済み。
   about.html は「白カードは paper-2 のセクションに置く」で回避しているが、
   ここは地色を交互にするため paper の上にもカードが載る。
   → 縁を1本入れる。--line-2 は paper-2 とほぼ同色＝paper-2 の上では見えない。
     つまり「paper では輪郭が立ち、paper-2 では塗りだけで成立する」1本で両立する。 */
.rc-card,.rc-step,.rc-req,.rc-faq-item{border:1px solid var(--line-2);}
/* 深緑パネルの中の白カードは地との差が十分＝縁は不要（緑に明るい線が浮く） */
.rc-panel .rc-step{border-color:transparent;}

/* ---------- ボタンの並び（中央・折返し） ---------- */
.rc-cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,1.2vw,16px);margin-top:clamp(32px,3.4vw,48px);}
.rc-cta-row.left{justify-content:flex-start;}
/* 幅の狭い版面用（FAQ・要項の本文） */
.rc-narrow{max-width:900px;margin-left:auto;margin-right:auto;}

/* =========================================================
   /recruit/ ── メインビジュアル（動画）
   ========================================================= */
.rc-mv .ph-in{aspect-ratio:21/9;border-radius:clamp(16px,2vw,26px);}

/* =========================================================
   /recruit/ ── 代表メッセージ（写真＋本文の2カラム）
   ========================================================= */
.rc-split{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(24px,3.4vw,60px);align-items:center;}
.rc-split .ph-in{aspect-ratio:3/4;}

/* =========================================================
   /recruit/ ── 働く人の声・職種紹介（白カードのグリッド）
   ★minmax(min(100%,240px),1fr)＝コンテナが240px未満でも溢れない
   ========================================================= */
.rc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:clamp(14px,1.6vw,26px);margin-top:clamp(40px,4.4vw,64px);}
.rc-card{background:#fff;color:var(--ink);border-radius:clamp(16px,1.6vw,22px);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s;}
a.rc-card:hover{transform:translateY(-5px);}
.rc-card .ph-in{border-radius:0;border:0;border-bottom:1px solid var(--line);}
.rc-card-bd{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1;}
/* 声カードはポートレート＝3/4 */
.rc-card.rc-voice .ph-in{aspect-ratio:3/4;}
/* 職種カードは現場＝16/9 */
.rc-card.rc-job .ph-in{aspect-ratio:16/9;}
.rc-tags{display:flex;flex-wrap:wrap;gap:6px;}
.rc-tag{font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:var(--paper);}
.rc-q{font-size:clamp(15px,1.2vw,17px);font-weight:700;line-height:1.75;margin:0;}
.rc-cat{font-family:var(--lt);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--accent);}
.rc-card-ttl{font-size:clamp(15px,1.2vw,17px);font-weight:700;line-height:1.7;margin:0;}
.rc-card-tx{color:var(--ink-2);font-size:14px;line-height:2;margin:0;}
/* カード内の矢印（声カード＝インタビューへ） */
.rc-card-ar{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lt);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--accent);}
.rc-card-ar svg{width:16px;height:auto;transition:transform .25s;}
a.rc-card:hover .rc-card-ar svg{transform:translateX(4px);}

/* =========================================================
   共通 ── ステップ（キャリア5段／選考4段／面談3段／入社後5段）
   ★列数はHTML側の style="--rc-n:5" で渡す。PCは必ず1行に収まる＝繋ぎの破線が破綻しない
   ========================================================= */
.rc-steps{display:grid;grid-template-columns:repeat(var(--rc-n,4),1fr);
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(40px,4.4vw,64px);}
/* ★color:var(--ink) は必須。深緑パネル(.rc-panel{color:#fff})の中でも使うので、
   白カード側で必ず文字色を戻さないと「白カードに白文字＝コントラスト1.0」で消える
   （.gn-link と同型の事故。実際 .rc-step-ttl が緑パネル内で消えていた） */
.rc-step{position:relative;background:#fff;color:var(--ink);border-radius:clamp(14px,1.4vw,20px);
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.4vw,20px);}
/* カード間の破線（.tl や .rec-more と同じ言語） */
.rc-step:not(:last-child)::after{content:"";position:absolute;top:50%;left:100%;
  width:clamp(12px,1.4vw,20px);height:1px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 4px,transparent 4px 8px);}
/* ★12→14px／字間1.9→1px／中央揃え */
.rc-step-no{display:block;text-align:center;font-family:var(--lt);font-size:14px;font-weight:600;letter-spacing:1px;
  color:var(--accent);margin-bottom:12px;}
/* ★15→20px（PC1440基準）／中央揃え */
.rc-step-ttl{text-align:center;font-size:clamp(16px,1.39vw,20px);font-weight:700;line-height:1.65;margin:0;}
/* ★中央揃え・墨色 */
.rc-step-tx{text-align:center;color:var(--ink);font-size:14px;line-height:1.9;margin:8px 0 0;}
@media(max-width:1000px){
  /* ★PCの列数のまま縮めると文字が潰れる＝縦積みへ。破線も縦に向け直す */
  .rc-steps{grid-template-columns:1fr;gap:clamp(10px,1.6vw,14px);}
  .rc-step:not(:last-child)::after{top:100%;left:clamp(28px,3vw,38px);
    width:1px;height:clamp(10px,1.6vw,14px);
    background:repeating-linear-gradient(180deg,var(--ink-3) 0 4px,transparent 4px 8px);}
}

/* =========================================================
   共通 ── 数字3枚（page.css の .stats は4カラム固定なので3カラムへ）
   ★page.css の @media(max-width:900px){.stats{2カラム}} は同特異度＝
     後から読む こちら が勝つ。SPの面倒は必ずこちらで見る
   ========================================================= */
.rc-stats3{grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){.rc-stats3{grid-template-columns:1fr;}}

/* =========================================================
   /recruit/ ── 5区分の比較表
   ★SPでは必ず崩れる＝横スクロールさせずカード積みに変える（thead を隠し
     td::before に見出しを出す）。table 要素は overflow:hidden で角丸に
     できないので、四隅のセルに個別に radius を当てる
   ========================================================= */
.rc-cmp{width:100%;border-collapse:separate;border-spacing:0;margin-top:clamp(40px,4.4vw,64px);
  box-shadow:0 0 0 1px var(--line);border-radius:clamp(14px,1.4vw,18px);}
.rc-cmp th,.rc-cmp td{text-align:left;padding:clamp(14px,1.5vw,20px) clamp(12px,1.4vw,22px);
  font-size:15px;line-height:1.8;border-bottom:1px solid var(--line-2);background:#fff;}
.rc-cmp thead th{background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;
  letter-spacing:.08em;border-bottom:0;white-space:nowrap;}
.rc-cmp tbody th{font-weight:700;color:var(--ink);white-space:nowrap;}
.rc-cmp tbody td{color:var(--ink-2);}
.rc-cmp tbody tr:last-child th,.rc-cmp tbody tr:last-child td{border-bottom:0;}
.rc-cmp thead th:first-child{border-top-left-radius:clamp(14px,1.4vw,18px);}
.rc-cmp thead th:last-child{border-top-right-radius:clamp(14px,1.4vw,18px);}
.rc-cmp tbody tr:last-child th{border-bottom-left-radius:clamp(14px,1.4vw,18px);}
.rc-cmp tbody tr:last-child td:last-child{border-bottom-right-radius:clamp(14px,1.4vw,18px);}
@media(max-width:760px){
  .rc-cmp{box-shadow:none;border-radius:0;display:block;}
  .rc-cmp thead{display:none;}
  .rc-cmp tbody,.rc-cmp tr,.rc-cmp th,.rc-cmp td{display:block;}
  .rc-cmp tr{background:#fff;border-radius:16px;padding:clamp(16px,3vw,22px);margin-bottom:12px;}
  .rc-cmp tr:last-child{margin-bottom:0;}
  .rc-cmp th,.rc-cmp td{background:transparent;border-bottom:0;padding:0;}
  .rc-cmp tbody th{font-size:16px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line-2);white-space:normal;}
  .rc-cmp tbody td{display:flex;gap:10px;font-size:14px;padding:5px 0;}
  .rc-cmp tbody td::before{content:attr(data-lb);flex:none;width:5.6em;color:var(--ink-3);font-weight:500;}
  .rc-cmp tbody tr:last-child th{border-radius:0;border-bottom:1px solid var(--line-2);}
}

/* =========================================================
   /recruit/ ── カジュアル面談＝深緑パネル（主CTAの着地）
   ★採用は最優先KPI。ページ内で唯一の濃いブロックにして重心を置く
   ★白地に白ピルは消える。緑地なので白ピル＝.rc-panel-btn が正
   ========================================================= */
.rc-panel{position:relative;background:var(--green);color:#fff;border-radius:clamp(24px,3vw,44px);
  padding:clamp(44px,5.6vw,88px) clamp(24px,4vw,72px);overflow:hidden;}
.rc-panel .eyebrow{color:#fff;opacity:.72;}
.rc-panel .title{color:#fff;}
.rc-panel .lead{color:rgba(255,255,255,.84);}
.rc-panel .note{color:rgba(255,255,255,.6);text-align:center;}
/* 緑地のうえの補足行 */
.rc-panel-tx{color:rgba(255,255,255,.84);font-size:15px;line-height:2;margin:clamp(28px,3vw,40px) 0 0;text-align:center;}
/* 緑地のうえ＝白ピル（.pt-btn と同じ反転） */
.rc-panel-btn{background:#fff;color:var(--ink);}
.rc-panel-btn .cir{background:var(--green);color:#fff;}
/* 緑地のうえの控えめボタン：既定の .btn は墨枠＝緑地で沈むので白枠へ */
.rc-panel .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff;}
.rc-panel .btn.ghost:hover{background:#fff;border-color:#fff;color:var(--ink);}
/* パネル内の小見出し（面談の流れ） */
.rc-panel-sub{text-align:center;margin:clamp(44px,5vw,72px) 0 0;}
.rc-panel-sub .eyebrow{margin-bottom:0;}

/* =========================================================
   /recruit/ ── カジュアル面談の4つの利点（緑地のうえの白カード）
   ========================================================= */
.rc-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,4vw,56px);}
/* ★.rc-step と同じ理由で color を戻す（緑パネルの中の白カード） */
.rc-benefit{background:#fff;color:var(--ink);border-radius:clamp(14px,1.4vw,20px);padding:clamp(20px,2.2vw,30px) clamp(16px,1.6vw,24px);}
.rc-benefit .rc-cat{display:block;margin-bottom:12px;}
.rc-benefit-ttl{font-size:15px;font-weight:700;line-height:1.65;margin:0 0 10px;color:var(--ink);}
.rc-benefit-tx{color:var(--ink-2);font-size:14px;line-height:1.9;margin:0;}

/* =========================================================
   /recruit/requirements/ ── 区分ごとの条件カード
   ★<table> でなく <dl>：SPで dt/dd が素直に縦積みになり横スクロールが出ない
   ========================================================= */
.rc-reqs{display:grid;gap:clamp(16px,1.8vw,26px);margin-top:clamp(40px,4.4vw,64px);}
.rc-req{background:#fff;border-radius:clamp(16px,1.6vw,22px);padding:clamp(24px,2.8vw,44px);}
.rc-req-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(10px,1.2vw,18px);
  padding-bottom:clamp(18px,2vw,26px);margin-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--line);}
.rc-req-no{font-family:var(--lt);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--accent);}
.rc-req-ttl{font-size:clamp(19px,1.8vw,26px);font-weight:700;line-height:1.4;margin:0;}
.rc-req-tx{font-size:14px;font-weight:500;color:var(--ink-2);margin:0;letter-spacing:.02em;}
.rc-dl{margin:0;}
.rc-dl-row{display:grid;grid-template-columns:clamp(110px,13vw,168px) minmax(0,1fr);
  gap:clamp(12px,1.6vw,24px);padding:clamp(12px,1.3vw,17px) 0;border-bottom:1px dashed var(--line);}
.rc-dl-row:last-child{border-bottom:0;padding-bottom:0;}
.rc-dl-row:first-child{padding-top:0;}
.rc-dl dt{font-size:14px;font-weight:700;color:var(--ink);line-height:1.9;margin:0;}
.rc-dl dd{font-size:16px;color:var(--ink-2);line-height:1.9;margin:0;}
@media(max-width:640px){
  .rc-dl-row{grid-template-columns:1fr;gap:4px;}
  .rc-dl dt{font-size:12px;letter-spacing:.08em;color:var(--ink-3);}
  .rc-dl dd{font-size:15px;}
}

/* =========================================================
   /recruit/faq/ ── アコーディオン（<details>＝JSなしで開閉する）
   ========================================================= */
.rc-faq{display:grid;gap:10px;margin-top:clamp(32px,3.6vw,50px);}
.rc-faq-item{background:#fff;border-radius:clamp(12px,1.2vw,16px);overflow:hidden;}
.rc-faq-q{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,16px);
  padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,26px);
  font-size:16px;font-weight:700;line-height:1.7;transition:color .2s;}
.rc-faq-q::-webkit-details-marker{display:none;}
.rc-faq-q::marker{content:"";}
.rc-faq-q:hover{color:var(--accent);}
.rc-faq-badge{flex:none;font-family:var(--lt);font-size:15px;font-weight:600;line-height:1.75;color:var(--accent);}
.rc-faq-badge.a{color:var(--ink-3);}
/* ＋ → × に回る印 */
.rc-faq-mk{flex:none;position:relative;width:16px;height:16px;margin-left:auto;margin-top:6px;}
.rc-faq-mk::before,.rc-faq-mk::after{content:"";position:absolute;background:var(--accent);border-radius:2px;
  transition:transform .25s;}
.rc-faq-mk::before{left:0;top:7px;width:16px;height:2px;}
.rc-faq-mk::after{left:7px;top:0;width:2px;height:16px;}
.rc-faq-item[open] .rc-faq-mk::after{transform:rotate(90deg);}
.rc-faq-a{display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,16px);
  margin:0 clamp(16px,1.8vw,26px);
  padding:clamp(18px,2vw,24px) 0 clamp(20px,2.2vw,28px);
  border-top:1px dashed var(--line);}
/* ★回答本文は墨色（全ページ） */
.rc-faq-a p{color:var(--ink);font-size:16px;line-height:2;margin:0;}
.rc-faq-a p + p{margin-top:12px;}

/* ---------- Responsive（ページ共通分） ---------- */
@media(max-width:900px){
  .rc-split{grid-template-columns:1fr;gap:clamp(22px,4vw,34px);}
  .rc-split .ph-in{aspect-ratio:4/3;}
  .rc-mv .ph-in{aspect-ratio:16/9;}
}


/* =========================================================
   淡いグラデ地 ／ 角丸写真タイル3枚 ／ 各タイルから斜め下へ伸びるグラデの帯 ／
   左のコピーはキーフレーズだけグラデの塗り箱＋白ヌキ
   ★.page-hero は使わない（このページだけ左寄せ・非対称レイアウトのため）
   ========================================================= */
/* ===== 採用エリアの地 .rc-bg =====
   ヒーローの「淡いグラデ＋グレイン」を採用配下の全セクションの基本地にする。
   紙(--paper)と一段落とした紙(--paper-2)の交互だった従来のリズムを、
   同じ色相の中の【濃(is-deep)／淡(is-soft)】の交互に置き換えたもの。
   ★overflow は .rc-bg には付けない。カードのはみ出し演出を切ってしまうため、
     帯を持つ .rc-mv2 / .rc-cc だけが個別に overflow:hidden を持つ。 */
.rc-bg{position:relative;isolation:isolate;
  background:linear-gradient(105deg,#DCEBEE 0%,#F4FAFA 52%,var(--paper) 100%);}
.rc-bg.is-soft{background:linear-gradient(105deg,#F4FAFA 0%,#FAFCFB 46%,var(--paper) 100%);}
.rc-bg.is-deep{background:linear-gradient(105deg,#E1EEF0 0%,#EFF7F6 52%,#F5F1E9 100%);}
/* グレインも地とセットで継ぐ */
.rc-bg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}
/* 中身はグレインより前に */
.rc-bg > *{position:relative;z-index:3;}

/* ★ヒーローのグラデの帯を下のセクションでも使う。
   1セクションおき・左右交互に入れる（全部に入れると賑やかになりすぎる）。
   形はヒーローと同じ六角形（正方形を斜めに掃いた Minkowski 和）。
   ★はみ出しを切るので overflow は has-ray を付けたセクションだけに限定する
     （.rc-bg 全体に付けるとカードのはみ出し演出まで切ってしまう）。 */
.rc-bg.has-ray{overflow:hidden;}
.rc-bg.has-ray::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(90px,10vw,190px));right:calc(-1 * clamp(50px,6vw,120px));
  width:clamp(260px,34vw,560px);aspect-ratio:1;
  background:linear-gradient(135deg,
    rgba(17,135,157,.12) 0%, rgba(171,219,133,.14) 40%, rgba(237,188,55,.11) 66%, rgba(237,188,55,0) 100%);
  clip-path:polygon(0 0, 50% 0, 100% 50%, 100% 100%, 50% 100%, 0 50%);}
/* 左から差し込む版（鏡像にして下寄せ） */
.rc-bg.has-ray.is-left::before{top:auto;right:auto;
  bottom:calc(-1 * clamp(90px,10vw,190px));left:calc(-1 * clamp(50px,6vw,120px));
  transform:scaleX(-1);}

.rc-mv2{
  --g1:#11879D; --g2:#ABDB85; --g3:#EDBC37;
  position:relative; isolation:isolate;   /* ← 帯の z-index:-1 を地の上に留める */
  overflow:hidden;
  background:linear-gradient(105deg,#DCEBEE 0%,#F4FAFA 52%,var(--paper) 100%);
  padding:calc(72px + clamp(28px,3.2vw,54px)) 0 clamp(40px,4.4vw,72px);
}
/* ★もう少し迫力を。写真を一回り大きくし、コピーは版面の垂直中央に置く。
   タイルは absolute＝flow に参加しないので、flex の中央寄せはコピーだけに効く。 */
/* ★写真を大きくすると、左下タイル(t2)がコピーの足元に食い込む。
   下パディングでコンテンツ領域を上げ、その中で中央寄せする＝
   「コピーは中央、写真は原寸のまま」を両立させる。
   絶対配置の t2 は padding box の下端(=セクション下端)基準なので動かない。 */
/* ★左右の余白はヘッダーに合わせる。
   ヘッダーは <div class="wrap head-in"> で .wrap のガターを打ち消しているので、
   ロゴの左端＝版面の端、採用情報ボタンの右端＝版面の端。ヒーローも同じにする。
   ただし ≤560 は common.css の @media で .wrap 自体が 18px になり、
   ヘッダーもそれに従う（.head-in の padding:0 より後に来るので勝つ）＝こちらも18pxで揃える。 */
/* ===== ヒーローを貫く1本の帯 =====
   ★以前は「写真1枚ごとに、その写真から右下へ帯が生えている」形だった。
     正しくは【グラデーションが先にあり、その途中に写真が置かれている】絵。
   → 帯は .rc-mv2::before に1本だけ置き、写真はその上に重ねる。
     形は「右上 → 画面下中央 → 折り返して左辺（下から60%）へ」のV字ポリライン。
     太さは縦方向で測っているので、45度の斜め部分は平行四辺形になる（既存の帯と同じ作法）。
   ★1本の要素＝1つのグラデーションなので、斜め部分と水平部分で色がつながる。 */
.rc-mv2::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(215deg,
    rgba(17,135,157,.30) 0%, rgba(171,219,133,.32) 38%, rgba(237,188,55,.26) 66%, rgba(237,188,55,.10) 100%);
  /* 頂点は 上辺(右上→折れ点→左辺) → 下辺(左辺→折れ点→右上) の順。
     斜めの下辺は上辺を縦に26%ずらした平行線＝帯の太さが一定に見える。
     ★折れ点は画面下中央（x=50%・帯の下端が98%＝ぎりぎり内側）。
       完全に下辺の外へ出すと折り返しが切れて「2本の帯」に見えるので内側に留める。
     ★左辺に当たる位置は「下から60%」＝上から40%が帯の中心（27%〜53%）。 */
  clip-path:polygon(112% -25%, 50% 72%, -5% 27%, -5% 53%, 50% 98%, 112% 1%);}
/* 写真とコピーは帯の上（＝帯の途中に写真がある絵になる） */
.rc-mv2-in{z-index:2;}
@media(max-width:900px){
  /* 縦積みになると同じ形では成立しないので、折り返しを浅くして画面内に収める */
  .rc-mv2::before{clip-path:polygon(115% -20%, 52% 68%, -5% 30%, -5% 50%, 52% 88%, 115% 0%);}
}

.rc-mv2-in{padding-left:0;padding-right:0;}
@media(min-width:901px){.rc-mv2-in{padding-left:var(--gut);}} /* コピーの頭をヘッダーロゴ左に揃える */
@media(max-width:560px){ .rc-mv2-in{padding-left:18px;padding-right:18px;} }

.rc-mv2-in{position:relative;min-height:clamp(640px,72vw,1040px);
  padding-bottom:clamp(120px,15vw,220px);
  display:flex;flex-direction:column;justify-content:center;}

/* 実体は約104×100pxの極小ノイズタイル（alpha 0〜36＝最大14%）。素材＝img/tex/grain.png。
   ★pointer-events:none 必須（CTA2本とパンくずがこの下にある）。
   ::after は子より後に描かれるので z-index:2（コピーと同値）でも最前面に乗る。 */
.rc-mv2::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}

.rc-mv2-crumb{justify-content:flex-start;margin:0 0 clamp(18px,2.4vw,34px);position:relative;z-index:3;}

/* ---------- コピー ---------- */
.rc-mv2-copy{position:relative;z-index:2;width:min(600px,52%);}
/* ★ヒーローの eyebrow を大きく・筆記体・-5度。
   Homemade Apple は head で既に読んでいる（TOPの手書き見出しと同じ書体）。
   回転させると行ボックスに収まらないので inline-block ＋ transform-origin を左下に。
   .eyebrow の既定 letter-spacing:.22em は筆記体だと崩れるので戻す。 */
.rc-mv2-copy .eyebrow{display:inline-block;font-family:"Homemade Apple",var(--lt);
  font-size:clamp(20px,2.2vw,32px);letter-spacing:.02em;text-transform:none;
  /* ★-5度に傾けると箱の左上が約5px 外へ出る。ヒーローの左余白を0にしたことで
     1440では「Recruit」の頭が切れていた（実測 -5px）。回転の原点をどこにしても
     箱の左端は必ず外へ出るので、文字自体を padding で内側へ逃がす。
     実測：padding-left:8px で文字の左端は +2.9px＝切れない。 */
  transform:rotate(-5deg);transform-origin:0 100%;padding-left:8px;
  margin-bottom:clamp(14px,1.6vw,22px);}
.rc-mv2-h1{margin:0;font-size:clamp(28px,4.5vw,60px);font-weight:700;line-height:1.5;letter-spacing:.02em;}
.rc-mv2-h1 .l{display:block;}
/* キーフレーズ＝グラデの塗り箱＋白ヌキ。display:inline だと行またぎで箱が割れるので inline-block */
.rc-mv2-h1 .mk{display:inline-block;padding:.04em .22em .1em;border-radius:5px;color:#fff;
  background:linear-gradient(100deg,var(--g1) 14%,var(--g2) 73%,var(--g3) 100%);}
/* ★17px→22px／行間34px→40px(=1.82)。
   px指定はPC(1440)基準＝1440でちょうど22pxになる vw で組み、上限22pxで頭打ちにする。 */
/* ★22→16px・墨色・上マージン28→20px（全ページ）。 */
.rc-mv2-sub{margin:clamp(14px,1.4vw,20px) 0 0;color:var(--ink);
  font-size:16px;font-weight:500;line-height:1.82;letter-spacing:.04em;}
.rc-mv2-cta{margin-top:clamp(24px,2.8vw,40px);}

/* ---------- 写真タイル ---------- */
.rc-mv2-t{position:absolute;margin:0;aspect-ratio:1/1;border-radius:clamp(14px,1.8vw,26px);}
.rc-mv2-t img{width:100%;height:100%;object-fit:cover;border-radius:inherit;
  box-shadow:0 18px 44px rgba(35,32,25,.10);}
/* ★スライド化した枠は全画像を重ねる。枠の高さは aspect-ratio が決めているので
   中身が全部 absolute でも潰れない。影は枠側に移す（重ねた画像それぞれに影が
   付くと、フェード中に影が二重に濃くなる）。 */
.rc-mv2-t.is-slides{box-shadow:0 18px 44px rgba(35,32,25,.10);}
.rc-mv2-t.is-slides img{position:absolute;inset:0;box-shadow:none;
  transition:opacity 1.2s ease-in-out;}


/* ★right/left は .wrap の padding box 基準＝padding込み。版面に収めるには --gut を足す */
.rc-mv2-t1{width:clamp(360px,44vw,660px);top:clamp(56px,6.4vw,100px);right:0;}
.rc-mv2-t2{width:clamp(210px,24vw,360px);left:0;bottom:0;}
/* ★t1 を 660px まで大きくしたので、t3 の left は t1 の左端(=1440時 700px)より
   手前で終わるように詰める。29vw のままだと重なる。 */
.rc-mv2-t3{width:clamp(150px,17vw,255px);top:0;left:clamp(230px,27vw,390px);}

.rc-mv2-note{margin:clamp(22px,2.4vw,34px) auto 0;max-width:var(--wrap);
  padding:0 var(--gut);position:relative;z-index:2;}

/* ---------- ~1100：大タイルが版面に食い込むので寄せ直す ---------- */
/* ---------- 901〜1100：大タイルを44vwにしたぶん版面が足りない ----------
   ★実測：1100で t1 の左端561px に対し h1 の行が575pxまで伸びて14px重なっていた。
     この帯だけ「コピーを細く・t1を小さく」して逃がす（900以下は縦積みなので無関係）。 */
@media(max-width:1100px){
  .rc-mv2-copy{width:min(460px,48%);}
  .rc-mv2-t1{width:clamp(300px,34vw,660px);}
  /* ★901実測：t3 の左端424px に対しコピーが432pxまで伸びて8px重なる。30vwまで寄せる。 */
  .rc-mv2-t3{left:auto;right:clamp(230px,30vw,420px);}
}

/* ---------- ~900：絶対配置をやめて12列グリッドに（写真同士は重ねない） ----------
   ★流し込みの負マージンで重ねるとDOM順(t1→t2→t3)に依存して崩れる。
     グリッドで列を明示すれば順序に依存しない。 */
@media(max-width:900px){
  .rc-mv2{padding-top:calc(64px + 26px);}
  /* ★1fr は min-content 下限を持つ＝コピーの最小幅でグリッドごと膨らみ、
     320で7px横スクロールが出た（実測）。minmax(0,1fr) で潰す。 */
  .rc-mv2-in{min-height:0;padding-bottom:0;display:grid;justify-content:stretch;grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(8px,2vw,16px);}
  .rc-mv2-crumb,.rc-mv2-copy{grid-column:1/-1;}
  .rc-mv2-copy{width:100%;}
  /* ★static だと is-slides の absolute 画像が枠を飛び出して祖先基準になる。
     relative にして枠自身を基準に保つ（PCは absolute なので元から基準になっている）。 */
  .rc-mv2-t{position:relative;}
  .rc-mv2-t1{grid-column:3/13;margin-top:clamp(26px,6vw,44px);}
  .rc-mv2-t2{grid-column:1/8;margin-top:clamp(10px,2.4vw,18px);}
  .rc-mv2-t3{grid-column:8/13;margin-top:clamp(10px,2.4vw,18px);align-self:start;}
}


/* =========================================================
   採用コンセプト .rc-cc（ヒーロー直下・ヒーローから「連動」させる）
   連動のさせ方は3つ：
     ① 地：ヒーロー終端の色から続けて --paper に着地させる＝境界を作らない
     ② グレイン：ヒーローと同じ grain.png を同じ等倍リピートで継ぐ
     ③ グラデ：ヒーローは「塗り箱＋白ヌキ」→ ここは「文字そのものをグラデ」。
        同じ3色を使い、見せ方だけ変える（同じ表現の反復は野暮になる）
   ========================================================= */
.rc-cc{--g1:#11879D; --g2:#ABDB85; --g3:#EDBC37;
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(105deg,#F1F8F8 0%,#F8FBFA 46%,var(--paper) 100%);
  /* 上＝ヒーローと地続き（詰める）／下＝次が paper-2 で色が変わる（大きく空ける） */
  padding:clamp(52px,7vw,86px) 0 clamp(100px,10.4vw,150px);}
/* ヒーローと同じグレイン */
.rc-cc::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}
/* ヒーローの帯を1本だけ引き継ぐ（右上から左下へ抜ける） */
.rc-cc::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:calc(-1 * clamp(120px,14vw,220px));right:calc(-1 * clamp(60px,8vw,140px));
  width:clamp(300px,42vw,620px);aspect-ratio:1/1;
  background:linear-gradient(135deg,
    rgba(17,135,157,.14) 0%, rgba(171,219,133,.16) 40%, rgba(237,188,55,.13) 66%, rgba(237,188,55,0) 100%);
  clip-path:polygon(0 0, 50% 0, 100% 50%, 100% 100%, 50% 100%, 0 50%);}

/* ★eyebrow・キャッチ・本文を中央揃えへ。
   中央揃えなのでブロック自体も版面中央に置く（左寄せのまま text-align だけ変えると
   max-width の右側に寄って見える）。 */
.rc-cc-in{position:relative;z-index:1;text-align:center;}
/* ★ヒーローの eyebrow と同じ扱い（筆記体・大きく・-5度）にし、
   下の見出しとの間に余白を取る。中央揃えなので transform-origin は中央下。 */
.rc-cc-in .eyebrow{display:inline-block;font-family:"Homemade Apple",var(--lt);
  font-size:clamp(20px,2.2vw,32px);letter-spacing:.02em;text-transform:none;
  transform:rotate(-5deg);transform-origin:50% 100%;
  margin-bottom:clamp(14px,1.4vw,20px);}   /* ★44→20px */
.rc-cc-catch,.rc-cc-body{max-width:900px;margin-left:auto;margin-right:auto;}

/* ★margin:0 が後から margin-left/right:auto を打ち消していて、キャッチだけ左に寄っていた
   （実測 left=72px／本文は 310px で中央）。auto を含む一括指定に直す。 */
.rc-cc-catch{margin:0 auto;text-wrap:balance;font-size:clamp(28px,4.9vw,64px);font-weight:700;line-height:1.55;letter-spacing:.02em;}
/* ★グラデ文字：background-clip:text は色を透明にするので、対応していない環境では
   文字が消える。@supports で囲み、既定は通常色にしておく。 */
.rc-cc-catch .g{color:var(--g1);}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .rc-cc-catch .g{background:linear-gradient(100deg,var(--g1) 8%,var(--g2) 62%,var(--g3) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;}
}

.rc-cc-body{margin-top:clamp(22px,2.6vw,36px);}
.rc-cc-body p{margin:0 auto;max-width:42em;text-wrap:pretty;color:var(--ink-2);font-size:clamp(16px,1.32vw,19px);line-height:2.1;letter-spacing:.03em;}
.rc-cc-body p + p{margin-top:clamp(16px,1.6vw,24px);}
/* ★1段落目だけリード扱い（24px / 700 / 行間40px / 墨色）。
   px指定はPC1440基準＝1440でちょうど24px・40pxになる vw で組む。 */
/* ★(1段落目)・(2段落目)＝コンセプト本文は両方ともリード扱い。
   「この要素だけ」指定が2つ揃ったので、結果として .rc-cc-body p 全体に効かせている。 */
.rc-cc-body p{font-size:clamp(18px,1.67vw,24px);font-weight:700;
  line-height:1.67;color:var(--ink);max-width:36em;}
.rc-cc-cta{margin-top:clamp(28px,3.2vw,44px);}

@media(max-width:900px){
  .rc-cc{padding:clamp(40px,7vw,60px) 0 clamp(80px,12vw,100px);}
  .rc-cc-body p{font-size:16px;line-height:2;}
  /* PC用の改行は SP では潰す（狭い幅だと不自然な位置で切れる） */
  .rc-cc-body br,.rc-mv2-sub br{display:none;}
}


/* ---------- 下層ヒーロー .rc-mv2.is-sub（採用トップと同じ形式・背は低く） ---------- */
.rc-mv2.is-sub{padding:calc(72px + clamp(24px,2.8vw,44px)) 0 clamp(34px,3.8vw,58px);}
.rc-mv2.is-sub .rc-mv2-in{min-height:clamp(340px,34vw,500px);}
.rc-mv2.is-sub .rc-mv2-copy{width:min(620px,54%);}
/* 下層の h1 は下層共通の .title と同じ大きさに（トップだけを一番大きく保つ） */
.rc-mv2.is-sub .rc-mv2-h1{font-size:clamp(24px,3.4vw,44px);}
.rc-mv2.is-sub .rc-mv2-t1{width:clamp(220px,25vw,360px);top:clamp(46px,5.4vw,86px);right:0;}
/* ★t1 の左端は右から (--gut + t1幅)。t3 の right はそれより大きく取らないと
   2枚が重なる（1440実測で15px重なっていた）。29vw で 57px の間を確保。 */
.rc-mv2.is-sub .rc-mv2-t3{width:clamp(110px,12vw,175px);top:0;
  left:auto;right:clamp(230px,29vw,420px);}
/* 下層はパンくずが残る＝コピーとの間を詰める */
.rc-mv2.is-sub .rc-mv2-crumb{margin-bottom:clamp(12px,1.6vw,22px);}
.rc-mv2.is-sub .ar-hero-meta{margin-bottom:clamp(10px,1.2vw,16px);}
.rc-mv2.is-sub .ar-note{margin-top:clamp(14px,1.6vw,22px);}

@media(max-width:900px){
  .rc-mv2.is-sub .rc-mv2-copy{width:100%;}
  .rc-mv2.is-sub .rc-mv2-t1{grid-column:5/13;margin-top:clamp(22px,5vw,36px);}
  .rc-mv2.is-sub .rc-mv2-t3{grid-column:1/5;align-self:end;margin-top:clamp(22px,5vw,36px);}
}


/* ---------- 代表メッセージ（#message） ---------- */
.rc-portrait{margin:0;border-radius:clamp(14px,1.8vw,26px);overflow:hidden;
  aspect-ratio:4/5;box-shadow:0 18px 44px rgba(35,32,25,.10);}
.rc-portrait img{width:100%;height:100%;object-fit:cover;}
.rc-msg-body{margin-top:clamp(22px,2.4vw,32px);}
/* ★代表の言葉なので墨色で（本文グレーだと引きが弱い） */
.rc-msg-body p{margin:0;color:var(--ink);font-size:16px;line-height:2.1;letter-spacing:.03em;}
/* ★署名は右寄せ */
.rc-msg-sign{margin-top:clamp(20px,2.2vw,30px) !important;display:flex;align-items:baseline;justify-content:flex-end;gap:14px;}
.rc-msg-sign b{font-size:clamp(17px,1.4vw,20px);color:var(--ink);letter-spacing:.06em;}
.rc-msg-sign span{font-size:13px;color:var(--ink-3);}

/* 器の高さ 297px=枠の1.2倍／弧の高低差 33px。弧は画面幅いっぱいに1つ。
   ★動き方が肝：写真は「弧の上を旅する」。右端では低く+6deg、中央で最も高く0deg、
     左端でまた低く-6deg。トラックごと平行移動させると各写真の高さが変わらず、
     “弧が横滑りするだけ”になって別物に見える（前版はこれで差し戻しになった）。
   → 全アイテムに同じ keyframes を当て、負の animation-delay で 1/6 周期ずつずらす。
     6枚 × ピッチ20vw = 120vw ＝ 1周期の移動距離。keyframes は1つで足りる。 */
.rc-arc{--it:17vw; --rise:13%;
  position:relative;overflow:hidden;
  margin-top:clamp(56px,6vw,96px);
  height:calc(var(--it) * 1.24);}
.rc-arc-track{position:absolute;inset:0;margin:0;padding:0;list-style:none;}
.rc-arc-item{position:absolute;top:0;left:0;width:var(--it);aspect-ratio:1;margin:0;
  border-radius:clamp(10px,1.1vw,16px);overflow:hidden;
  box-shadow:0 12px 30px rgba(35,32,25,.10);
  animation:rc-arc-run 30s linear infinite;}
.rc-arc-item img{width:100%;height:100%;object-fit:cover;display:block;}
/* 1/6周期ずつ前倒し＝等間隔（20vw）に並ぶ */
.rc-arc-item:nth-child(1){animation-delay:0s;}
.rc-arc-item:nth-child(2){animation-delay:-5s;}
.rc-arc-item:nth-child(3){animation-delay:-10s;}
.rc-arc-item:nth-child(4){animation-delay:-15s;}
.rc-arc-item:nth-child(5){animation-delay:-20s;}
.rc-arc-item:nth-child(6){animation-delay:-25s;}
/* 右端(103vw)から左端(-17vw)まで120vw を移動しながら、高さと傾きで弧を描く */
@keyframes rc-arc-run{
  0%  {transform:translateX(103vw) translateY(var(--rise)) rotate(6deg);}
  25% {transform:translateX(73vw)  translateY(calc(var(--rise) * .28)) rotate(3deg);}
  50% {transform:translateX(43vw)  translateY(0) rotate(0deg);}
  75% {transform:translateX(13vw)  translateY(calc(var(--rise) * .28)) rotate(-3deg);}
  100%{transform:translateX(-17vw) translateY(var(--rise)) rotate(-6deg);}
}
@media(max-width:560px){
  
  .rc-arc{--it:36vw;}
}
@media(prefers-reduced-motion:reduce){ .rc-arc-item{animation:none;} }


/* =========================================================
   写真 → 白ブロックで見出しを重ねる → 職種｜氏名 ＋ 角形の矢印ボタン。
   カードに枠や影は付けず、列の間を1本の縦罫で仕切る。
   ========================================================= */
/* ★版面を広げる（--wrap 1440 → 1680）。このセクションだけ */
#voice > .wrap{max-width:1680px;}
/* ★カードは隙間なく突き合わせ、角は丸めない。
   隣り合う枠線が2本重なって太く見えるので、2枚目以降を1px 左へ寄せて重ねる。 */
.rc-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:clamp(30px,3.4vw,48px);}

.rc-vo{position:relative;display:flex;flex-direction:column;color:inherit;
  background:#fff;border:1px solid var(--line);border-radius:0;
  padding:clamp(18px,1.8vw,28px);
  transition:border-color .25s,z-index 0s;}
.rc-vo + .rc-vo{margin-left:-1px;}
/* ★マウスオンの線は10px。
   border-width を10pxにすると内側の幅が変わって中身が動くので、
   レイアウトに影響しない outline を内側に引く（offset を負にして枠内に収める）。 */
.rc-vo:hover{border-color:var(--accent);z-index:1;
  outline:10px solid var(--accent);outline-offset:-10px;}

/* 角は丸めない（カードに合わせる） */
.rc-vo-ph{margin:0;overflow:hidden;}
/* ★height="600" などのHTML属性は presentational hint として効くので、
   aspect-ratio だけ指定しても属性の高さが勝って縦長になる。height:auto が要る（実測で判明）。 */
.rc-vo-ph img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block;}   /* ★縦長に */
.rc-vo-ph .ph-in{aspect-ratio:3/4;margin:0;border-radius:0;background:var(--line-2);}


/* ★右の逃げを12%→6%に。12%だと3列時の1行が約307pxの見出しに対して幅が足りず、
   「頑張りが、ちゃ／んと役職になった」のように語中で折れていた（実測）。 */
/* 見出し＝写真の下端に食い込む白い札。
   ★角丸なし（カードに合わせる）。★上下に余白を持たせて札として成立させる
     （padding-bottom が無いと文字の下が切り落とされたように見えて中途半端だった）。
   ★word-break:auto-phrase で日本語を文節で折る（非対応ブラウザは従来どおり）。 */
.rc-vo-q{position:relative;z-index:1;margin:clamp(-84px,-6.5vw,-52px) 14% 0 0;
  background:#fff;padding:clamp(16px,1.6vw,22px) clamp(14px,1.4vw,20px) 0 0;
  word-break:auto-phrase;
  border-top-right-radius:clamp(12px,1.4vw,20px);   /* ★右上だけ角丸 */
  font-size:clamp(16px,1.32vw,19px);font-weight:700;line-height:1.7;letter-spacing:.01em;
  color:var(--ink);text-wrap:balance;min-height:calc(1.7em * 2 + clamp(16px,1.6vw,22px));}
/* ★職種は見出しの上に置く（札の中で「職種 → 見出し」の順に読ませる）
   ★14px・墨色 */
.rc-vo-q .rc-vo-role{display:block;margin-bottom:clamp(6px,.7vw,10px);
  font-size:14px;font-weight:400;line-height:1.6;letter-spacing:.04em;color:var(--ink);}

.rc-vo-ft{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:auto;padding-top:clamp(18px,2vw,28px);}
.rc-vo-who{margin:0;}
.rc-vo-role{font-size:14px;color:var(--ink);letter-spacing:.04em;line-height:1.6;}
.rc-vo-who b{font-size:clamp(16px,1.25vw,18px);letter-spacing:.08em;color:var(--ink);}

.rc-vo-ar{flex:none;display:grid;place-items:center;width:clamp(40px,3.2vw,46px);aspect-ratio:1;
  background:var(--accent);color:#fff;transition:background .25s,transform .25s;}
.rc-vo-ar svg{width:16px;height:14px;}
.rc-vo:hover .rc-vo-ar{background:var(--accent-d);transform:translateX(3px);}

@media(max-width:900px){
  .rc-voices{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:560px){
  .rc-voices{grid-template-columns:minmax(0,1fr);}
}


/* ---------- キャリアパスのSTEP：キャラクターで表現 ---------- */
.rc-step-ch{display:block;width:clamp(52px,5.4vw,78px);margin:0 auto clamp(8px,1vw,14px);}
.rc-step-ch svg{width:100%;height:auto;display:block;overflow:visible;}
/* 数字の桁が動くカウンターは、等幅にしないと文字送りでガタつく */
.stat-num b[data-count]{font-variant-numeric:tabular-nums;}


.rc-job-ph{margin:0;overflow:hidden;}
.rc-job-ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}


/* ---------- カジュアル面談セクションの文字 ---------- */
.rc-cat{display:block;text-align:center;font-size:14px !important;letter-spacing:1px !important;color:var(--ink-3) !important;}  
.rc-benefit-ttl{text-align:center;font-size:20px !important;}                                     
.rc-benefit-tx{text-align:center;color:var(--ink) !important;}                                    
/* ★ は「.eyebrow 全ページ」と書かれているが .eyebrow は全ページ共通の汎用クラス。
   そのまま当てると全ページの小見出しが20pxになるので、この節の instance にスコープする。 */
.rc-panel-sub .eyebrow{font-size:20px;}
/* ★面談パネルの巨大英字「MEETING」を30%に落とす。
   見出しと重なって読みづらかったのが解消する。 */
#casual .s-head .eyebrow.lg{opacity:.3;}

/* ---------- キャラクターが出会って跳ねる ---------- */
.rc-meet{position:relative;height:clamp(78px,8vw,112px);
  margin-top:clamp(26px,3vw,42px);overflow:hidden;}
.rc-meet-ch{position:absolute;bottom:0;width:clamp(46px,4.6vw,68px);
  animation:rc-meet-walk 11s ease-in-out infinite;}
.rc-meet-ch svg{width:100%;height:auto;display:block;overflow:visible;
  transform-origin:50% 100%;
  animation:rc-meet-hop 11s linear infinite;}
/* 出会う位置（中央に4体が寄る） */
.rc-meet-ch.is-l1{left:calc(50% - clamp(112px,11vw,168px));}
.rc-meet-ch.is-l2{left:calc(50% - clamp(58px,5.6vw,86px));}
.rc-meet-ch.is-r1{left:calc(50% + clamp(4px,.4vw,6px));}
.rc-meet-ch.is-r2{left:calc(50% + clamp(58px,5.6vw,86px));}
/* 左の2体は左から、右の2体は右から歩いてくる（内側の子ほど少し遅れて着く） */
.rc-meet-ch.is-l1{--from:-62vw;}
.rc-meet-ch.is-l2{--from:-74vw;}
.rc-meet-ch.is-r1{--from:74vw;}
.rc-meet-ch.is-r2{--from:62vw;}

@keyframes rc-meet-walk{
  0%       {transform:translateX(var(--from));opacity:0;}
  4%       {opacity:1;}
  34%,88%  {transform:translateX(0);opacity:1;}
  96%,100% {transform:translateX(0);opacity:0;}   /* 消えてから初期位置へ戻す＝瞬間移動が見えない */
}
@keyframes rc-meet-hop{
  /* 0〜34%＝歩き：小刻みに上下 */
  0%,4%,8%,12%,16%,20%,24%,28%,32%,34%{transform:translateY(0) scaleY(1);}
  2%,6%,10%,14%,18%,22%,26%,30%       {transform:translateY(-16%) scaleY(1);}
  /* 34〜42%＝出会って一拍おく */
  42%{transform:translateY(0) scaleY(.92);}
  /* 42〜72%＝3回跳ねる（着地でつぶれる） */
  48%{transform:translateY(-72%) scaleY(1.06);}
  54%{transform:translateY(0) scaleY(.9);}
  60%{transform:translateY(-72%) scaleY(1.06);}
  66%{transform:translateY(0) scaleY(.9);}
  70%{transform:translateY(-44%) scaleY(1.04);}
  74%,100%{transform:translateY(0) scaleY(1);}
}
/* 内側の子ほど半歩ずらす＝一斉に動かないので生きて見える */
.rc-meet-ch.is-l2 svg,.rc-meet-ch.is-r1 svg{animation-delay:-.35s;}
@media(prefers-reduced-motion:reduce){
  .rc-meet-ch,.rc-meet-ch svg{animation:none;}
  .rc-meet-ch{transform:translateX(0);opacity:1;}
}


/* =========================================================
   背景グラデーションの動き .rc-glow（採用配下の全セクション）
   ★方式：ぼかした色の塊を2つ置き、transform（translate/scale）だけで動かす。
     background-position を動かす方式は大面積で再描画が走り、特にSPでカクつく。
     transform ならコンポジタに乗るので地に敷いても軽い。
   ★重なり順：地 → rc-glow(0) → 帯(-1は.rc-mv2内) → グレイン(::after=2) → 中身(3)
     ＝グレインは動かないので「紙の上で光がゆっくり回る」ように見える。
   ========================================================= */
.rc-bg,.rc-mv2{overflow-x:clip;}          /* 塊が横に溢れて横スクロールを作らないように */
.rc-glow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.rc-glow span{position:absolute;display:block;border-radius:50%;
  width:min(78vw,900px);aspect-ratio:1;
  will-change:transform;}
.rc-glow span:nth-child(1){
  top:-24%;left:-10%;
  background:radial-gradient(circle at 50% 50%, rgba(17,135,157,.30) 0%, rgba(17,135,157,.12) 42%, rgba(17,135,157,0) 70%);
  animation:rc-glow-a 15s ease-in-out infinite alternate;}
.rc-glow span:nth-child(2){
  bottom:-30%;right:-14%;
  background:radial-gradient(circle at 50% 50%, rgba(171,219,133,.34) 0%, rgba(237,188,55,.16) 44%, rgba(237,188,55,0) 72%);
  animation:rc-glow-b 19s ease-in-out infinite alternate;}
/* 動きは「はっきり分かる」強さ＝選択。移動量は画面幅比で持つ */
@keyframes rc-glow-a{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(34vw,12vw,0) scale(1.18);}
}
@keyframes rc-glow-b{
  from{transform:translate3d(0,0,0) scale(1.1);}
  to  {transform:translate3d(-30vw,-10vw,0) scale(.92);}
}
/* ヒーローは地が最も濃いので、塊も少し強めに出す */
.rc-mv2 .rc-glow span{width:min(88vw,1040px);}
@media(prefers-reduced-motion:reduce){ .rc-glow span{animation:none;} }


/* =========================================================
   見出し＋角形の矢印ボタン → 見出し下の罫 → 1行に2リンク（間は破線の縦罫）
   → 行ごとに細い罫。カードでも枠でもなく「罫だけで組む」のがこのデザインの肝。
   ========================================================= */

#openings .s-head{text-align:left;}
.rc-idx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px);margin-top:clamp(30px,3.4vw,48px);}

.rc-idx-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:clamp(14px,1.6vw,22px);border-bottom:1px solid var(--ink);}
.rc-idx-ttl{margin:0;font-size:clamp(20px,1.94vw,28px);font-weight:700;letter-spacing:.04em;line-height:1.3;}

.rc-idx-btn{flex:none;display:grid;place-items:center;
  width:clamp(52px,4.4vw,64px);height:clamp(38px,3.2vw,46px);
  background:var(--c,var(--accent));color:var(--ink);
  transition:filter .25s,transform .25s;}
.rc-idx-btn svg{width:18px;height:15px;}
.rc-idx-btn:hover{filter:brightness(.92);transform:translateX(3px);}

/* ★罫は --line(#e7e1d6) だと、動くグラデ地の上でほとんど見えなかった。
   地の明度が場所によって変わるので、固定色ではなく墨の透過で引く（どの明度でも同じだけ沈む）。 */
.rc-idx-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-bottom:1px solid rgba(35,32,25,.34);}

.rc-idx-row > .rc-idx-link:nth-child(2){
  border-left:1px dashed rgba(35,32,25,.30);padding-left:clamp(14px,1.6vw,24px);}

.rc-idx-link{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:clamp(16px,1.8vw,24px) 0;color:var(--ink);
  font-size:clamp(14px,1.11vw,16px);letter-spacing:.04em;line-height:1.5;
  transition:color .25s;}
.rc-idx-link svg{flex:none;width:17px;height:14px;transition:transform .25s;}
.rc-idx-link:hover{color:var(--accent);}
.rc-idx-link:hover svg{transform:translateX(4px);}

@media(max-width:1100px){
  .rc-idx{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:640px){
  .rc-idx{grid-template-columns:minmax(0,1fr);gap:clamp(24px,6vw,36px);}
  /* 狭い画面で2列のままだと「募集要項」が折り返すので1行1リンクに畳む */
  .rc-idx-row{grid-template-columns:minmax(0,1fr);}
  .rc-idx-row > .rc-idx-link:nth-child(2){border-left:0;padding-left:0;
    border-top:1px dashed rgba(35,32,25,.30);}
}


/* ---------- FAQ：ヒーローと次のセクションを1つの地に載せる ----------
   ★2つのセクションにそれぞれ同じグラデを敷いても、105deg には縦成分があるので
     境目で必ず段差が出る。地・グレイン・帯は親（.rc-join）に1つだけ持たせて、
     中の2セクションは透明にする＝境目が物理的に存在しなくなる。 */
.rc-join{position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(105deg,#DCEBEE 0%,#F4FAFA 52%,var(--paper) 100%);}
.rc-join::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}
/* ★中身は必ずグレイン(::after=2)より上に。1のままだとグレインがカードや文字の上に乗り、
   キャリア・働き方のカードだけ白がくすんで見えていた（.rc-bg では > * を 3 に上げて同じことをしている）。 */
.rc-join > section{position:relative;z-index:3;background:transparent;isolation:auto;}
.rc-join > section::after{display:none;}       /* 各セクションのグレインは親に一本化 */
.rc-join .rc-glow{z-index:0;}
/* ★FAQの #career は上パディングを0に。
   ヒーローと地を共有しているので、上に余白があると「別セクションが始まった」ように見える。 */
/* ★地を共有しているので、続くセクションの上余白は0にする
   （余白があると「別セクションが始まった」ように見えて連続感が切れる）。全ページ共通に。 */
.rc-join > section + section{padding-top:0;}

/* 写真なしのヒーロー（FAQ） */
.rc-mv2.is-nophoto .rc-mv2-in{min-height:clamp(220px,22vw,330px);padding-bottom:0;}
.rc-mv2.is-nophoto .rc-mv2-copy{width:min(720px,100%);}
/* 帯は .rc-join 側に出す（ヒーローだけで切れると連続して見えない） */
.rc-join .rc-mv2::before{display:none;}
.rc-join::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  /* 2セクション分の高さに渡るので、ヒーロー単体より面積が大きい＝濃度は落とす */
  background:linear-gradient(215deg,
    rgba(17,135,157,.20) 0%, rgba(171,219,133,.22) 38%, rgba(237,188,55,.18) 66%, rgba(237,188,55,.06) 100%);
  clip-path:polygon(112% -14%, 50% 40%, -5% 16%, -5% 30%, 50% 54%, 112% 0%);}


/* 社員インタビュー：働く人の声カードを縦1列で並べる（横は写真＋テキストの2分割） */
.rc-voices.is-stack{grid-template-columns:minmax(0,1fr);}
@media(min-width:641px){
  /* ★align-content:start が無いと、写真(2行ぶち抜き)の高さで行が引き伸ばされ、
     見出しと氏名の間に大きな空きができる（実測）。行は上に詰める。 */
  .rc-voices.is-stack .rc-vo{display:grid;grid-template-columns:minmax(0,32%) minmax(0,1fr);
    column-gap:clamp(20px,2.4vw,40px);align-items:start;align-content:start;}
  .rc-voices.is-stack .rc-vo-ph{grid-row:1 / span 2;}
  /* 横並びでは写真に見出しを重ねない（重ねると写真が細く見える） */
  .rc-voices.is-stack .rc-vo-q{margin:0;padding:0;min-height:0;}
  .rc-voices.is-stack .rc-vo-ft{margin-top:clamp(18px,2vw,28px);}
}

/* ★入社後の流れ・勤務地制度のリード文を墨色に */
#onboarding .lead,#workstyle .lead{color:var(--ink);}


/* =========================================================
   小ラベル＋巨大英字＋パンくず → 大きな写真に「黒帯の見出し／タグ／氏名」を重ねる
   ========================================================= */
.iv-hero{position:relative;isolation:isolate;
  background:linear-gradient(105deg,#DCEBEE 0%,#F4FAFA 52%,var(--paper) 100%);
  padding-top:calc(72px + clamp(24px,2.8vw,44px));}
.iv-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}
.iv-hero > *{position:relative;z-index:3;}

.iv-hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:clamp(20px,2.4vw,34px);}
.iv-hero-sub{margin:0;font-size:clamp(13px,1.05vw,15px);font-weight:700;letter-spacing:.1em;color:var(--ink);}
/* 巨大英字は採用エリアの筆記体に揃える（-5度） */
.iv-hero-en{display:inline-block;margin:clamp(6px,.8vw,12px) 0 0;padding-left:10px;
  font-family:"Homemade Apple",var(--lt);font-size:clamp(36px,5.6vw,80px);line-height:1.1;
  letter-spacing:.02em;color:var(--ink);
  transform:rotate(-5deg);transform-origin:0 100%;}
.iv-hero-crumb{justify-content:flex-end;margin:0;flex:1 1 320px;}

/* 写真＝左にガターを残して右端まで抜く */
.iv-hero-main{position:relative;margin-left:var(--gut);}
.iv-hero-ph{margin:0;overflow:hidden;}
.iv-hero-ph img{width:100%;height:auto;aspect-ratio:1820/760;object-fit:cover;display:block;}

/* 黒帯の見出し：行ごとに帯が付くよう inline ＋ box-decoration-break */
.iv-hero-ov{position:absolute;left:clamp(16px,2.6vw,44px);top:clamp(18px,2.6vw,44px);
  right:clamp(16px,2.6vw,44px);}
.iv-hero-ttl{margin:0;font-size:clamp(17px,1.94vw,28px);font-weight:700;line-height:1.9;letter-spacing:.02em;}
/* ★display:table にすると「行ごとに、文字幅ぶんだけの黒帯」になる。
   inline だと2行が横に並び、inline-block だと帯が行の幅いっぱいに伸びる。 */
.iv-hero-ttl span{display:table;background:var(--ink);color:#fff;
  padding:.12em .5em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.iv-hero-ttl span + span{margin-top:.3em;}
.iv-tags{display:flex;flex-wrap:wrap;gap:8px 18px;margin:clamp(12px,1.4vw,20px) 0 0;padding:0;list-style:none;}
.iv-tags li{font-size:clamp(12px,1.04vw,15px);font-weight:700;color:var(--ink);
  text-shadow:0 1px 8px rgba(255,255,255,.85);}
.iv-tags li::before{content:"#";margin-right:.15em;}

/* 左下の氏名ブロック（縦罫＋部署／氏名／入社年）＝白い板に載せて写真の上でも読める */
.iv-hero-info{position:absolute;left:clamp(16px,2.6vw,44px);bottom:clamp(16px,2.4vw,40px);
  padding:clamp(12px,1.2vw,18px) clamp(14px,1.6vw,24px);
  background:rgba(255,255,255,.9);backdrop-filter:blur(6px);
  border-left:3px solid var(--accent);}
.iv-hero-info p{margin:0;}
.iv-hero-group{font-size:clamp(12px,1.04vw,14px);color:var(--ink-2);letter-spacing:.06em;}
.iv-hero-name{font-size:clamp(19px,1.67vw,24px);font-weight:700;letter-spacing:.1em;margin-top:4px !important;}
.iv-hero-year{font-size:12px;color:var(--ink-3);letter-spacing:.06em;margin-top:4px !important;}

/* プロフィール帯 */
.iv-profile{position:relative;isolation:isolate;
  background:linear-gradient(105deg,#DCEBEE 0%,#F4FAFA 52%,var(--paper) 100%);
  padding:clamp(34px,4vw,60px) 0 clamp(48px,5.4vw,80px);}
.iv-profile::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:url(../img/tex/grain.png) repeat;}
.iv-profile > *{position:relative;z-index:3;}
.iv-pf{display:grid;grid-template-columns:clamp(120px,13vw,190px) minmax(0,1fr);
  gap:clamp(20px,2.6vw,44px);align-items:start;
  padding:clamp(24px,2.6vw,40px) 0;
  border-top:1px solid rgba(35,32,25,.30);border-bottom:1px solid rgba(35,32,25,.30);}
.iv-pf-ph{margin:0;overflow:hidden;}
.iv-pf-ph img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;}
.iv-pf-name{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0;}
.iv-pf-name b{background:var(--ink);color:#fff;padding:.25em .7em;
  font-size:clamp(16px,1.32vw,19px);letter-spacing:.1em;}
.iv-pf-name span{font-family:var(--lt);font-size:clamp(13px,1.11vw,16px);font-weight:600;letter-spacing:.06em;}
.iv-pf-desc{margin:clamp(16px,1.6vw,24px) 0 0;padding-top:clamp(16px,1.6vw,24px);
  border-top:1px dashed rgba(35,32,25,.34);
  color:var(--ink);font-size:16px;line-height:2;letter-spacing:.03em;}


.ar-qa .ar-q{background:#fff;padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,26px);
  display:flex;align-items:center;gap:12px;}
.ar-qa .ar-q::before{content:"";flex:none;width:10px;height:10px;background:var(--accent);}

@media(max-width:900px){
  .iv-hero-main{margin-left:0;}
  .iv-hero-ph img{aspect-ratio:4/5;}
  .iv-hero-crumb{justify-content:flex-start;}
  .iv-pf{grid-template-columns:minmax(0,1fr);}
  .iv-pf-ph{max-width:180px;}
}


/* =========================================================
   2列・偶数番目を下にずらす／写真4:5＋左上に区分タグ／#タグ／2行で切る見出し／
   左にアクセント縦罫の氏名ブロック／各項目の下に破線。
   ★件数が増えても成立するようにグリッドで組む（3人固定の作りにしない）。
   ========================================================= */
.iv-arc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3.4vw,60px);row-gap:clamp(34px,4vw,64px);
  margin:clamp(30px,3.4vw,48px) 0 0;padding:0;list-style:none;}

.iv-arc-item:nth-child(even){margin-top:clamp(28px,4vw,80px);}
.iv-arc-in{display:grid;grid-template-columns:100%;row-gap:clamp(14px,1.6vw,22px);
  color:inherit;padding-bottom:clamp(20px,2.4vw,34px);
  border-bottom:1px dashed rgba(35,32,25,.42);}
.iv-arc-ph{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;}
.iv-arc-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.iv-arc-in:hover .iv-arc-ph img{transform:scale(1.05);}
/* 左上の区分タグ（黒地・白字の角タグ） */
.iv-arc-cat{position:absolute;top:10px;left:10px;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;
  padding:5px 10px;}
.iv-arc-tx{display:flex;flex-direction:column;gap:clamp(8px,1vw,14px);}
.iv-arc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;}
/* ★タグの地を白に。
   ただし採用エリアの地は淡いグラデ＝白だけだとタグの輪郭が消えて「ただの文字」に見えるので、
   細い罫を1本足して「タグである」ことは保つ（罫が不要なら1行外すだけ）。 */
.iv-arc-tags li{background:#fff;border:1px solid rgba(35,32,25,.22);
  font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px 3px;color:var(--ink);}
.iv-arc-tags li::before{content:"#";margin-right:1px;}
/* 見出しは2行で切る（件数が増えても高さが揃う） */
.iv-arc-head{margin:0;font-size:clamp(17px,1.53vw,22px);font-weight:700;line-height:1.6;
  letter-spacing:.02em;word-break:auto-phrase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.iv-arc-info{display:grid;gap:2px;padding-left:clamp(14px,1.6vw,24px);
  border-left:3px solid var(--accent);}
.iv-arc-name{margin:0;font-size:clamp(17px,1.53vw,22px);font-weight:700;letter-spacing:.1em;}
.iv-arc-group{margin:0;font-size:clamp(12px,1.04vw,14px);color:var(--ink-2);letter-spacing:.06em;}
.iv-arc-in:hover .iv-arc-head{color:var(--accent);}

@media(max-width:640px){
  .iv-arc{grid-template-columns:minmax(0,1fr);row-gap:clamp(28px,7vw,40px);}
  .iv-arc-item:nth-child(even){margin-top:0;}   /* 1列では千鳥にしない */
}


/* =========================================================
   ★採用配下の文字は黒。視認性の悪いグレーは使わない。
   個別に色を書き換えて回るのではなく、採用エリアの中で
   グレーの変数そのものを黒に潰す（新しく足す部品も自動で黒になる）。
   ★.rc-panel（深緑）の中は白系の実色で指定してあるので影響しない。
   ========================================================= */
body.rc{--ink:#000; --ink-2:#000; --ink-3:#000;}


/* 地の上でゴーストボタンの輪郭が沈む → 線と文字を本文色に上げる */
body.rc .btn.ghost{border-color:var(--ink);color:var(--ink);}
/* 募集要項 #employment の版面をヘッダーに揃える（この instance だけ） */
#employment > .wrap{padding-left:0;padding-right:0;}
/* ヒーローの筆記体の下余白 22→10px */
.rc-mv2-copy .eyebrow{margin-bottom:10px;}
/* ヒーローのパンくず下余白 22→60px */
.rc-mv2.is-sub .rc-mv2-crumb{margin-bottom:clamp(28px,4.2vw,60px);}
/* 記事の版面 左右280→100px */
.ar-narrow{max-width:none;margin-left:clamp(0px,7vw,100px);margin-right:clamp(0px,7vw,100px);}
/* 氏名ブロックの縦罫をなくす */
.iv-hero-info{border-left:0;}
/* 入社年 12→13px */
.iv-hero-year{font-size:13px;}
/* キャリアの STEP */
.ar-step-ttl{font-size:clamp(16px,1.32vw,19px);}
.ar-step-sub{font-size:13px;}
/* 「下に20pxの線を入れる」＝ラベルの下に長さ20pxの短い罫。
   ★border-bottom の値は「太さ」なので 20px にすると帯になる。長さは width で持つ。 */
.ar-step-no{font-size:13px;letter-spacing:1px;display:block;}
.ar-step-no::after{content:"";display:block;width:20px;height:2px;background:var(--accent);
  margin:10px 0 12px;}

/* ある1日のスケジュールの見出しに時計アイコン */
.ar-clock{width:1em;height:1em;margin-right:.35em;vertical-align:-.12em;color:var(--accent);}

/* Q&Aの途中に入れる写真 */
.ar-shot{margin:clamp(28px,3.4vw,52px) 0;}
.ar-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:clamp(10px,1.2vw,16px);}
.ar-shot figcaption{margin-top:10px;font-size:13px;color:var(--ink);letter-spacing:.04em;}

/* ほかのインタビュー＝採用トップのカードを2列で */
.rc-voices.is-2col{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:640px){ .rc-voices.is-2col{grid-template-columns:minmax(0,1fr);} }



/* ★ は「.eyebrow 全ページ」と書かれているが .eyebrow は全サイト共通の汎用クラス。
   記事内の instance（Q.01 / Message）にスコープする。巨大英字(.lg)は対象外。 */
body.rc .ar-qa > .eyebrow:not(.lg){font-size:30px;margin-bottom:20px;}
/* 写真キャプション 15px・中央 */
.ar-shot figcaption{font-size:15px;text-align:center;}
/* STEPラベルの下線は中央寄せ（.ar-step は中央揃えのカード） */
.ar-step-no::after{margin-left:auto;margin-right:auto;}
/* STEPの文字 */
.ar-step-sub{font-size:15px;}
.ar-step-ttl{font-size:clamp(18px,1.53vw,22px);}
/* 時計は各行の時刻の左へ */
.ar-day-row .ar-clock{width:16px;height:16px;margin-right:8px;vertical-align:-.18em;color:var(--accent);}
/* 氏名ブロックの縦罫と左パディングをなくす */
.iv-arc-info{padding-left:0;border-left:0;}
/* ★縦長カードの3列に戻す（版面は広げてよい）。
   千鳥（偶数を下げる）はやめる＝3列だと段差が揃わず読みにくいため。 */
.iv-arc{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(34px,4vw,60px);}
.iv-arc-item:nth-child(even){margin-top:0;}
#list > .wrap{max-width:1680px;}
#list .ar-mid{max-width:none;}   /* 記事用の狭い版面を解除して一覧を広く使う */
@media(max-width:1100px){ .iv-arc{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:640px){ .iv-arc{grid-template-columns:minmax(0,1fr);} }

/* ---------- 採用トップ ヒーロー（SP）＝テキストを大きく・写真は少し小さく ---------- */
@media(max-width:640px){
  .rc-mv2-h1{font-size:43px;line-height:1.35;}   /* 36px→1.2倍(43px) */
  .rc-mv2-sub{font-size:17px;}
  /* subの改行をSPでも表示（既定は≤900で display:none） */
  .rc-mv2-sub br{display:inline;}
  /* 大タイル(t1)を少し小さく（右寄せのまま左を詰める） */
  .rc-mv2-t1{grid-column:5/13;}
  /* ヒーローのコピー塊を40px下へ */
  .rc-mv2:not(.is-sub) .rc-mv2-copy{margin-top:40px;}
}
/* ---------- 採用配下の追従は「エントリー」FABのみ（帯なし・右下固定） ---------- */
@media(max-width:900px){
  body.rc{padding-bottom:0;}                       /* 帯用の下余白予約を解除 */
  body.rc .sp-cta{left:auto;right:16px;bottom:16px;width:auto;padding:0;gap:0;
    background:none;backdrop-filter:none;overflow:visible;}
  body.rc .sp-cta .btn{position:relative;flex:none;border-radius:999px;padding:15px 30px;font-size:15px;
    box-shadow:0 12px 30px -8px rgba(35,32,25,.5);overflow:visible;}
  /* エントリーボタンの上からキャラがはみ出して上下にバウンド */
  .rc-entry-ch{position:absolute;right:16px;top:-30px;width:46px;height:auto;pointer-events:none;z-index:1;
    filter:drop-shadow(0 5px 5px rgba(60,45,25,.22));
    animation:rcEntryBob 1.5s ease-in-out infinite;transform-origin:50% 100%;}
  @keyframes rcEntryBob{0%,100%{transform:translateY(0);}45%{transform:translateY(-9px);}}
}
@media(prefers-reduced-motion:reduce){ .rc-entry-ch{animation:none;} }

/* ---------- 採用トップ ---------- */
/* カジュアル面談カードのカテゴリに下線（PC/SP両方） */
#casual .rc-cat{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;}
/* 濃緑パネル上のゴーストボタンが body.rc の黒指定で沈む→白線・白文字で視認性UP */
#casual .rc-panel .btn.ghost{border-color:#fff;color:#fff;}
#casual .rc-panel .btn.ghost:hover{background:#fff;color:var(--ink);}
@media(max-width:640px){
  /* キャリアの見出し 26→30px/行間55px（#career限定・汎用.titleには当てない） */
  #career .title{font-size:30px;line-height:55px;}
  /* カジュアル面談の見出し 26→22px/行間40px（#casual限定） */
  #casual .title{font-size:22px;line-height:40px;}
  /* ステップ見出し 16→18px */
  .rc-step-ttl{font-size:18px;}
  /* 募集区分インデックスの間隔 24.8→60px */
  .rc-idx{gap:60px;}
  /* 各セクションの版面 左右18→30px（#section>.wrapにスコープ・グローバル.wrap不可） */
  #requirements > .wrap,#jobs > .wrap,#flow > .wrap{padding:0 30px;}
  /* キャリア/選考フローのステップを横スクロール1段に */
  #career .rc-steps,#flow .rc-steps{grid-template-columns:none;display:flex;overflow-x:auto;gap:14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:10px;}
  #career .rc-steps .rc-step,#flow .rc-steps .rc-step{flex:0 0 76%;scroll-snap-align:start;}
  /* 横スクロール時は縦の接続線(::after)を消す */
  #career .rc-step:not(:last-child)::after,#flow .rc-step:not(:last-child)::after{display:none;}
  /* メッセージ下の円弧写真が継ぎ目で重なる→タイルを縮小して重なり解消 */
  .rc-arc{--it:26vw;}
}

/* ---------- 採用トップ・SP ---------- */
@media(max-width:640px){
  /* 職種カードのカテゴリ 14→16px（.rc-catは!important指定のため合わせる） */
  #jobs .rc-cat{font-size:16px !important;}
  /* 職種カード見出し 15→18px */
  #jobs .rc-card-ttl{font-size:18px;}
  /* 職種カードの間隔 14→40px */
  #jobs .rc-cards{gap:40px;}
  /* キャリアの数字(rc-stats3)を3列表示に（≤640の1列指定を上書き）。
     等幅3列＋数字/余白を詰めて3桁でも均等に収める（minmax(0,1fr)で膨張防止）。 */
  #career .rc-stats3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  #career .rc-stats3 .stat{padding:clamp(22px,5vw,36px) 6px;}
  #career .rc-stats3 .stat-num b{font-size:34px;}
  #career .rc-stats3 .stat-num span{font-size:13px;}
}

/* ---------- 募集要項ページ・SP ---------- */
@media(max-width:640px){
  /* サブヒーロー(is-nophoto)の版面 左右→30px */
  .rc-mv2.is-nophoto .rc-mv2-in{padding-left:30px;padding-right:30px;}
  /* 募集要項 各セクションの版面 左右→30px（#employmentの左右0指定も上書き） */
  #openings > .wrap,#employment > .wrap,#workstyle > .wrap{padding-left:30px;padding-right:30px;}
}

/* ---------- 社員インタビュー一覧・SP ---------- */
@media(max-width:640px){
  /* 一覧セクションの上余白 72→0（★news #listと衝突するため body.rc にスコープ） */
  body.rc #list{padding-top:0;padding-bottom:100px;}
  /* インタビューカードのテキスト間隔 8→12px */
  .iv-arc-tx{gap:12px;}
  /* インタビューカードの下余白 20→40px */
  .iv-arc-in{padding-bottom:40px;}
}

/* ---------- インタビュー一覧/詳細・SP ---------- */
@media(max-width:640px){
  /* インタビュー一覧の版面 左右→30px（news #listと衝突回避のため body.rc） */
  body.rc #list > .wrap{padding-left:30px;padding-right:30px;}
  /* インタビュー詳細プロフィールの版面 左右→30px */
  .iv-profile > .wrap{padding-left:30px;padding-right:30px;}
  /* ある1日のスケジュールを「時計＋時刻」→改行→「内容」の2段に。
     時計は時刻と垂直中央（既定 align-items:baseline のズレを解消）。 */
  #aday .ar-day-row{align-items:center;flex-wrap:wrap;gap:6px 8px;}
  #aday .ar-day-x{flex-basis:100%;margin-left:30px;}   /* 24→30 */
  /* スケジュールの時刻 15→20px */
  #aday .ar-day-t{font-size:20px;}
}

/* ---------- キャリア/FAQページ・SP ---------- */
@media(max-width:640px){
  /* キャリアページ #path 見出しの行間 36.4→42px（この要素だけ） */
  #path .title{line-height:42px;}
  /* #career セクションの版面 左右→30px（FAQページ #career／採用トップ #career 共通） */
  #career > .wrap{padding-left:30px;padding-right:30px;}
}

/* 社員インタビュー詳細：Q.01の上のインタビュー動画（2026-10-17） */
.iv-movie{margin:0 0 clamp(40px,4.6vw,66px);}
.iv-movie video{width:100%;height:auto;aspect-ratio:16/9;display:block;background:#000;border-radius:clamp(8px,1vw,14px);}
.iv-movie figcaption{margin-top:10px;font-size:14px;text-align:center;letter-spacing:.04em;}
/* 社員インタビュー詳細：本文の段落間を詰める 1.9em→1em（2026-10-17） */
#qa .ar-body p,#future .ar-body p{margin-bottom:1em;}

/* 社員インタビュー詳細：プロフィール写真なし＝本文を全幅に */
.iv-pf.is-nophoto{grid-template-columns:minmax(0,1fr);}

/* キャリアの数字が2つのとき（2026-11-02） */
.rc-stats3.is-two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin-left:auto;margin-right:auto;}
#career .rc-stats3.is-two{grid-template-columns:repeat(2,minmax(0,1fr));}
/* 6段のときは職名を1行に収める（2026-11-02） */
@media(min-width:901px){.rc-steps[style*="--rc-n:6"] .rc-step-ttl{font-size:15px;white-space:nowrap;letter-spacing:.02em;}}