/* ============================================================
recruit.css — 採用ページ専用（/recruit/ とインタビュー詳細だけに読み込む）
Figma: nPRrygpkMmrkuAdtzdifmi / 採用トップ 55:893（PC 1440）
※ 法人側の共通CSSは変更しない。共通部品（.btn / .mv__en / .breadcrumb）は再利用し、
採用固有の上書きは必ず .recruit-* を親にしてスコープする。
※ SP（375）カンプはFigmaに無い（2026-09-16確認）。767px以下はPC構造の縦積み補完。
※ リキッド方針: Figma(1440)の px は 768px で約55%になるよう clamp(min, px/14.4 vw, px)。
16px以下の文字は固定。767px以下は 375 基準の % / clamp で補完。
============================================================ */
:root {
--recruit-blue: #005EAC; /* Figma RECRUT/main */
--recruit-blue-light: #B2CEE6; /* Figma RECRUT/right */
/* 流体トークン（Figma 1440 の px → 768 で約55%） */
--r-pad-80: clamp(40px, 5.556vw, 80px);
--r-gap-80: clamp(40px, 5.556vw, 80px);
--r-gap-36: clamp(20px, 2.5vw, 36px);
--r-gap-32: clamp(20px, 2.222vw, 32px);
--r-gap-24: clamp(16px, 1.667vw, 24px);
--r-gap-16: clamp(12px, 1.111vw, 16px);
--r-sp-140: clamp(72px, 9.722vw, 140px);
--r-sp-180: clamp(80px, 12.5vw, 180px);
--r-radius-20: 20px; /* 2026-09-18: clamp(12px,1.389vw,20px) をやめた。767→768 で 20→12px と縮む逆転があったため（1440 は 20px のまま） */
--r-radius-45: clamp(24px, 3.125vw, 45px);
--r-fs-18: clamp(15px, 1.25vw, 18px);
--r-fs-20: clamp(16px, 1.389vw, 20px);
--r-fs-24: clamp(18px, 1.667vw, 24px);
--r-fs-28: clamp(20px, 1.944vw, 28px);
--r-fs-30: clamp(22px, 2.083vw, 30px);
--r-fs-32: clamp(24px, 2.222vw, 32px);
--r-fs-120: clamp(60px, 8.333vw, 120px);
--r-fs-180: clamp(60px, 12.5vw, 180px);
/* 1023px 以下でヘッダー直下に居座る追従バー（.recruit-navbar）の高さ。
目次から飛んだときにセクション見出しがバーの裏に入らないよう、アンカー余白に足す。 */
--r-navbar-h: 0px;
}
@media (max-width: 1179px) {
:root { --r-navbar-h: 64px; }
}
/* ============================================================
FV（Figma 55:895 MV 1440×600）
------------------------------------------------------------
外枠: padding 36/36/20/80・列gap 16（本体514 + パンくず14）
本体: 左カラム990（見出し行238 + gap36 + 大写真240）/ gap36 / 右パネル298
高さは中身から決まる（1440で 36+238+36+240+16+14+20 = 600）
============================================================ */
.recruit-fv {
display: flex;
flex-direction: column;
gap: var(--r-gap-16);
padding: var(--r-gap-36) var(--r-gap-36) clamp(16px, 1.389vw, 20px) var(--r-pad-80);
background: #fff;
}
.recruit-fv__inner {
display: flex;
gap: var(--r-gap-36);
width: 100%;
/* 2026-09-19: 1324 → 1600。他の下層ページ（私たちについて / 施工実績 / お知らせ）は
1440 超で MV の写真も器も画面幅なりに伸びる（写真 720→960→1280）のに、
採用の FV だけ 1324 で固まり、同じページの本文（1046→1286→1606）と食い違っていた。
上限を 1600 で止めているのは大写真の素材が 1445px しかないため（下のコメント参照）。
より大きい原本を受領できたらこの上限は外せる。 */
max-width: 1600px;
margin-inline: auto;
}
.recruit-fv__main {
display: flex;
flex-direction: column;
gap: var(--r-gap-36);
flex: 1 1 auto;
min-width: 0;
}
/* 見出し行: 「RECRUIT / 採用情報」と小写真234×238を上下中央で両端揃え（1440: 735 + 21 + 234 = 990） */
.recruit-fv__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(12px, 1.458vw, 21px);
flex: 1 1 auto; /* 右パネルが高いときの余り高さはここで吸収（中身は上下中央のまま） */
min-height: 0;
}
/* Title/M（.mv__en 180px #D9D9D9 / .mv__ja 32px navy）を共通CSSから継承。page-title の上余白24 */
.recruit-fv__title { padding-top: var(--r-gap-24); flex-shrink: 0; min-width: 0; }
/* 英字の行ボックスは144px（180×0.8）だがFigmaの描画高は139.72（scaleY .97）。
見出しブロック全体をFigmaの194.72pxに合わせるため下マージンを -44.28 に（共通MVは -40）。
フォントサイズに追従させるため em 指定（44.28/180 = 0.246em） */
.recruit-fv .mv__en { margin-bottom: -0.246em; letter-spacing: -0.0111em; } /* -2px/180px。共通の固定-2pxだとSPで字間がきつくなる */
.recruit-fv__photo {
position: relative;
overflow: hidden;
border-radius: var(--r-radius-20);
background: var(--color-gray-200);
}
.recruit-fv__photo img { position: absolute; max-width: none; }
/* 小写真（55:904）: Figma は枠いっぱいに引き伸ばして描画している（object-fit 指定なし）。
素材を枠比率へ引き伸ばして書き出してあるので cover で同じ絵になる（design/recruit-src/fv/README-tone.txt）
幅は 234/1440 = 16.25vw */
.recruit-fv__photo--s { width: clamp(140px, 16.25vw, 283px); aspect-ratio: 234 / 238; flex-shrink: 0; } /* 上限は器に合わせて 234→283（1440 では 16.25vw=234 のままで不変） */
.recruit-fv__photo--s img { position: static; width: 100%; height: 100%; object-fit: cover; }
/* 大写真（55:905）。素材は 1445x864 が原本で、990px 表示で 1.46 倍。
FV の器を 1600 で止めているのはこの写真のため（1600 のとき約 1266px = 1.14 倍）。
上限を外すと 1920 で 1470px = 0.98 倍になり、高精細画面で目に見えて甘くなる。
Figma design context の実測値（縦に伸ばしたクロップ。照合差分3.7で一致）
比率 990:240 を常に維持する（flex: none）。右パネルの方が高いぶんは見出し行が吸収する
（以前は flex:1 で伸び、1024〜1383px で写真だけが縦に潰れていた） */
.recruit-fv__photo--l { flex: none; width: 100%; aspect-ratio: 990 / 240; }
.recruit-fv__photo--l img { width: 100%; height: 264.39%; left: -0.05%; top: -67.46%; }
/* ---- 右パネル（55:906）: 298×514・#005EAC・角丸20・padding 32/24・列gap16。内側250は 17.36vw で追従 ---- */
.recruit-fv__side {
/* Figma 250。1440 超は器（.recruit-fv__inner）に合わせて 302 まで。縮めると文言が語中で折れるため下限は 250 で固定。
2026-09-19: 係数を 17.36vw から器の止まり方に合わせ直した。器は vw−72 で伸びて 1600px で止まる（＝vw 1672 で頭打ち）が、
17.36vw だと右パネルだけ vw 1740 まで伸び続けるため、1680〜1740 で「画面を広げたのに左の主柱が 10px 縮む」逆転が出ていた。
1440 で 250 / 1672 で 302 に着地する直線にして、器が止まると同時にパネルも止まるようにする。 */
--r-side-inner: clamp(250px, calc(250px + (100vw - 1440px) * 0.2241), 302px);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--r-gap-16);
flex-shrink: 0;
padding: var(--r-gap-32) var(--r-gap-24);
border-radius: var(--r-radius-20);
background: var(--recruit-blue);
color: var(--color-font-white);
}
.recruit-pickup { display: flex; flex-direction: column; gap: var(--r-gap-16); width: var(--r-side-inner); }
.recruit-pickup__head { display: flex; flex-direction: column; gap: 2px; width: 100%; } /* Figmaは198px幅。左寄せのため250pxに広げても見た目は同じ */
.recruit-pickup__en { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; }
.recruit-pickup__ja { font-size: var(--r-fs-18); line-height: 1.6; font-weight: 500; letter-spacing: 0.111em; white-space: nowrap; } /* 2px/18px。198px幅で折り返さないよう1行固定 */
/* カード全体が1リンク（写真 → INTERVIEW 01 → 名前行） */
/* 写真 → ラベル → 氏名行の間隔。1440 は Figma の 4px、375 は 12px。
2026-09-18: 767→768 で 12→4px と一段で詰まっていたのを、幅に沿って連続的に狭まる式にした。 */
.recruit-pickup__card { display: flex; flex-direction: column; gap: max(4px, 12px - (100vw - 375px) * 0.00752); width: 100%; color: inherit; }
.recruit-pickup__media {
display: block;
position: relative;
aspect-ratio: 250 / 157;
border-radius: var(--r-radius-20);
overflow: hidden;
background: var(--color-gray-200);
}
/* 55:912: 小写真と同じく Figma は枠いっぱいに引き伸ばして描画している。素材を枠比率へ引き伸ばして書き出し済み */
.recruit-pickup__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
/* 高さは番号の大きさなり（固定にすると番号を変えたとき下線の位置がずれる） */
.recruit-pickup__label { display: flex; align-items: flex-end; gap: 4px; height: auto; }
.recruit-pickup__label-en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding-bottom: 3px;
border-bottom: 1px solid #fff;
}
/* 番号（01）。1440 で Figma の 30px、それ以下は 24px で下げ止まり。
2026-09-18: --r-fs-30 だと 768〜1024 で 22px まで落ち、EN（16px 固定）との比が 1.38 まで平坦になっていた。
24px 止まりにすると全幅で 1.50〜1.88 に収まり、SP で狙った見え方が中間幅でも保てる。 */
.recruit-pickup__num { font-family: var(--font-en); font-weight: 600; font-size: clamp(24px, 2.083vw, 30px); line-height: 1; }
.recruit-pickup__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 29px; }
.recruit-pickup__text { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--r-gap-16); transition: opacity 0.25s ease; } /* 1440では1行。内側が狭い幅では年次だけ折り返す */
.recruit-pickup__name { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; font-weight: 500; letter-spacing: 0.111em; white-space: nowrap; } /* 1440 で 18px、それ以下は 16px。--r-fs-18 だと中間幅で 15px に落ちていた */
.recruit-pickup__year { font-size: 14px; line-height: 1; white-space: nowrap; }
.recruit-pickup__arrow { width: 8.24px; height: 8.47px; flex-shrink: 0; color: #fff; transition: transform 0.4s var(--ease-bounce); }
.recruit-fv__divider { width: var(--r-side-inner); height: 0; margin: 0; border: 0; border-top: 1px solid #fff; }
.recruit-fv__entry { display: flex; flex-direction: column; gap: 12px; width: var(--r-side-inner); }
.recruit-fv__entry-text { font-size: 16px; line-height: 1.6; font-weight: 700; }
/* CTA-White 250×79: 共通 .btn--white を幅いっぱいに（.btn の min-width 287 と gap 62 を解除。space-between なので見た目は同じ） */
.recruit-fv__entry-btn { width: 100%; min-width: 0; gap: 12px; }
.recruit-fv__breadcrumb { width: 100%; max-width: 1600px; margin-inline: auto; }
/* パンくずのホームアイコンは共通部品では 14×14 で、タップ領域が WCAG 2.5.8 の 24×24 に足りない。
共通CSSは触らず、採用ページ内だけ余白で当たり判定を広げる（見た目は変わらない） */
.recruit .breadcrumb__home { padding: 5px; margin: -5px; }
/* 1441px超: 1324幅の中身を真に中央へ（1440までは Figma どおり左80/右36の非対称） */
@media (min-width: 1441px) {
.recruit-fv { padding-inline: 36px; }
}
/* ---- ホバー/フォーカス
写真 scale(1.03)・文字 opacity 0.6 は docs/spec/hover-animation.html のカード標準。
矢印の translateX はカード標準には無く、同書の news-link（単独矢印）の値 6px を 4px に縮めて流用。
※ 採用カンプに個別指定は無い。サイト共通のカード演出を適用（レビューで不要ならこのブロックごと削除） ---- */
.recruit-pickup__card:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 4px; border-radius: 4px; }
.recruit-pickup__card:focus-visible .recruit-pickup__img { transform: scale(1.03); }
.recruit-pickup__card:focus-visible .recruit-pickup__text { opacity: 0.6; }
.recruit-pickup__card:focus-visible .recruit-pickup__arrow { transform: translateX(4px); }
@media (hover: hover) and (pointer: fine) {
.recruit-pickup__card:hover .recruit-pickup__img { transform: scale(1.03); }
.recruit-pickup__card:hover .recruit-pickup__text { opacity: 0.6; }
.recruit-pickup__card:hover .recruit-pickup__arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.recruit-pickup__img, .recruit-pickup__text, .recruit-pickup__arrow { transition: none; }
}
/* 1024–1439: 2カラム維持。見出し英字は小写真（16.25vw）と重ならない上限で縮小
main幅 = 100vw − 5.556vw(左pad) − 2.5vw(右pad) − 2.5vw(gap) − 298(右パネル) = 86.888vw − 298
必要条件 4.069×fs + 1.458vw(gap) + 16.25vw(小写真) ≤ main幅 → fs ≤ 17.0vw − 73px（1439で180・1024で101） */
@media (min-width: 1024px) and (max-width: 1439px) {
.recruit-fv .mv__en { font-size: clamp(60px, 17vw - 73px, 180px); }
}
/* 768–1023: 右パネルを下段に回し、PICK UPとENTRYを横並び */
@media (min-width: 768px) and (max-width: 1023px) {
/* 2026-09-18: 縦積み（見出し → 大写真 → 青パネルを左右2列）をやめ、
PC と同じ「左に写真、右に青パネル（PICK UP の上に ENTRY）」の2カラムに戻した。
青パネルを横に割ると PICK UP と ENTRY が対等に並んでしまい、
カードとボタンという性格の違う2つが同じ重みに見えていたため。
共通の 12.5vw だと 1023→1024 で 128→101px と逆に小さくなるので、英字だけ式を変える。 */
.recruit-fv .mv__en { font-size: clamp(60px, 10vw, 180px); }
.recruit-fv__inner { gap: var(--r-gap-24); }
.recruit-fv__main { gap: var(--r-gap-24); }
/* 青パネルは PC と同じ縦並び。内側は 250 固定だと左カラムが痩せるので少し詰める */
.recruit-fv__side { --r-side-inner: clamp(180px, 24vw, 250px); padding: var(--r-gap-24) var(--r-gap-16); }
.recruit-fv__entry-text { font-size: 15px; text-wrap: balance; } /* 「ます」だけの2行目を避ける */
/* ENTRY ボタン。PC の寸法（左 padding 54・丸 55・高さ 79）のままだと
768px で内容が 188px 必要になり、パネル内側 184px に収まらず丸が枠の外へ出ていた。
パネルが細いぶんボタンも一回り小さくする（高さ 79 → 60）。
丸を縮めたら矢印も同じ寸法・同じ右位置に合わせること（共通 .btn の矢印は絶対配置） */
.recruit-fv__entry-btn {
padding: 8px 10px 8px 28px;
gap: 8px;
border-radius: 40px;
}
.recruit-fv__entry-btn .btn__circle { width: 44px; height: 44px; }
.recruit-fv__entry-btn .btn__arrow { width: 44px; height: 44px; margin-top: -22px; right: 10px; }
.recruit-fv__entry-btn .btn__label { font-size: 18px; }
}
/* 767以下（SP・案A）: 他の下層ページ（共通MV .mv）と同じ見せ方に寄せる。
グレー地の上に、英字（背面）＋和文（前面）＋右端フラッシュの写真。
採用固有の青パネル（PICK UP + ENTRY）はその直後に置き、FV の導線という位置づけを保つ。 */
@media (max-width: 767px) {
.recruit-fv { gap: 24px; padding: 32px 16px 20px; background: var(--color-bg-gray); overflow: hidden; } /* 右端フラッシュの写真がはみ出さないよう共通MVと同じく clip */
.recruit-fv__inner { position: relative; flex-direction: column; gap: 24px; }
.recruit-fv__main { display: contents; }
.recruit-fv__head { display: contents; }
/* 写真（280px）と重なる高さを見出し側で確保する */
.recruit-fv__title { order: 1; padding-top: 0; min-height: 376px; /* 写真 top96 + 高さ280 */ }
.recruit-fv .mv__en { font-size: clamp(56px, 21.33vw, 80px); margin-bottom: -0.5em; font-weight: 700; }
.recruit-fv .mv__ja { position: relative; z-index: 1; padding: 10px 16px; font-size: 24px; }
/* 共通MVと同じ 310×280・右端フラッシュ・左角丸のみ。親の左右padding 16 を負の right で打ち消す */
.recruit-fv__photo--s {
position: absolute;
right: -16px;
top: 96px;
width: min(310px, 88%);
height: 280px;
aspect-ratio: auto;
border-radius: 20px 0 0 20px;
}
/* 横長の大写真は SP の帯に収まらないため出さない（PC・タブレットのみ） */
.recruit-fv__photo--l { display: none; }
.recruit-fv__side { order: 2; --r-side-inner: 100%; width: 100%; padding: 24px 16px; border-radius: 20px; }
.recruit-pickup__media { border-radius: 20px; }
.recruit-pickup, .recruit-fv__divider, .recruit-fv__entry { max-width: 420px; margin-inline: auto; }
/* PICK UP カード（2026-09-18）
SP はカードが 256〜420px、写真が 161〜264px と PC（250×157）より大きくなるのに、
ラベルと名前は共通トークンの下限（番号 22px・氏名 15px）で止まり、写真との間も 4px のままだった。
写真ばかりが大きく、文字が写真に貼り付いて見えるので、文字を写真の大きさに追従させ、間も空ける。
PC（768 以上）は Figma どおりの 250×157・番号 22〜30px なので触らない。 */
.recruit-pickup__meta { gap: 12px; }
}
/* ============================================================
本文2カラム（Figma 55:948 RECRUIT-Contents 1440×8150）
------------------------------------------------------------
背景 #F0F0F0・上角丸45・padding-top 140 / bottom 80・横gap 80
左: 目次ナビ 314（x0 左端フラッシュ・追従）/ 右: main-contents 1046（縦 gap 180）
ナビ内部と各セクションの中身は template-parts/recruit/*.php と recruit-parts/*.css
============================================================ */
.recruit-contents {
display: flex;
align-items: flex-start;
gap: var(--r-gap-80);
padding: var(--r-sp-140) 0 var(--r-pad-80);
background: var(--color-gray-200);
border-radius: var(--r-radius-45) var(--r-radius-45) 0 0;
}
.recruit-contents__main {
display: flex;
flex-direction: column;
gap: var(--r-sp-180);
flex: 1 1 auto;
min-width: 0;
/* 各セクションは「画面幅」ではなく「本文カラムの実幅」で組み替える。
1180 で目次ナビが横に入ると本文は 1179→812px と一気に狭まるため、
ビューポート基準のままだと、広い画面なのに窮屈な組版になる帯ができる。 */
container-type: inline-size;
container-name: main;
}
/* 1440超: 中身は1440幅の中央に（ナビは左端フラッシュのまま伸ばさない） */
@media (min-width: 1441px) {
.recruit-contents { padding-right: calc(50% - 720px); }
}
@media (max-width: 1179px) {
.recruit-contents { flex-direction: column; gap: var(--r-gap-32); }
/* 縦積みでは align-items: flex-start により幅が内容依存になるが、
main は container-type: inline-size で内容から幅を決められないので明示する（でないと幅 0 になる） */
.recruit-contents__main { width: 100%; }
}
@media (max-width: 767px) {
.recruit-contents { padding: 56px 0 40px; border-radius: 24px 24px 0 0; gap: 32px; }
.recruit-contents__main { gap: 64px; }
}
/* 追従ヘッダー分のアンカー余白（overrides.css の section[id] = --header-h に 16px 足したもの） */
/* 追従バーが出ている幅では、その高さ（--r-navbar-h）も逃がす。
2026-09-18: バー導入直後はこれが無く、320〜1023 で飛んだ先の EN ラベルが 100%、
h2 が 86〜89% バーの裏に隠れていた（不透明な青なので本文途中に着地したように見える）。 */
.recruit-contents [id] { scroll-margin-top: calc(var(--header-h) + var(--r-navbar-h) + 16px); }
/* ===== 以下、セクション別CSS（recruit-parts から結合） ===== */
/* ---------- 02-message.css ---------- */
/* ============================================================
recruit-parts/02-message.css — MESSAGE（応募を検討されている方へ）+ 帯文字マーキー
Figma: nPRrygpkMmrkuAdtzdifmi / 55:933 MESSAGE（1440×1405）・55:934 帯文字
仕様: docs/recruit-spec/02-message.md
------------------------------------------------------------
1440: padding 140/80/200/80。中央カラム 740（x350〜1090）= タイトル群65 + gap80 + 本文920。
absolute: 帯文字(-531,1165) / 写真A(-125,121 475×567) / ウォーターマーク(445,90) / 写真B(1141,669 357×346)
リキッド: Figma(1440)の px は 768 で約55%（clamp(min, px/14.4 vw, px)）。文字は 16px 以下固定・18px 以上 clamp。
1440超（案A）: 中身は中央、写真は画面端に接し続ける（1440 と同じはみ出し量）。
SP（767 以下）: カンプ無し。写真をインフロー化・
解除・帯文字 60px 系の補完値。中身は 480px で頭打ち（--r-msg-sp-w）。
※ .recruit-marquee* はインタビュー詳細（55:2167）でも再利用する共通部品。位置決めは呼び出し側のクラスで行う。
============================================================ */
/* ---- ルート（55:933） ----
--r-msg-col: 本文カラム幅。1440 で 740（= 20px × 37字。最長行「今度は私が、…応援します。」）。
本文は clamp(16px, 1.389vw, 20px) で追従するため、37字が折り返さないよう 51.7vw（1.389vw×37 = 51.39vw に約0.3vw の余裕）、
下限は 16px×37 = 592 に余裕を足した 600（768 でも 768 − 2×42.7 = 682 の内側に収まる） */
.recruit-message {
--r-msg-col: clamp(600px, 51.7vw, 740px);
position: relative;
isolation: isolate;
overflow: hidden;
padding: var(--r-sp-140) var(--r-pad-80) clamp(110px, 13.889vw, 200px);
background: var(--color-bg-white);
}
/* 中央カラム（55:935 → 55:936）: タイトル群 + gap80 + 本文。帯文字（z0）より前面 */
.recruit-message__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--r-gap-80);
width: min(var(--r-msg-col), 100%);
margin-inline: auto;
}
/* ---- タイトル群（55:937 358×65）: EN 16px lh1 + gap4 + JA 28px lh1.6 ls2px ---- */
.recruit-message__head {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
.recruit-message__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
.recruit-message__ja {
font-size: var(--r-fs-28);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.0714em; /* 2px / 28px */
padding-left: 0.0714em; /* ブラウザは末尾にも字間 +2px を付けて box が Figma(358)より広くなり、中央揃えで字が 1px 左に寄るため補正 */
color: var(--color-font-black);
}
/* ---- ウォーターマーク "MESSAGE"（55:946）: Figtree 600 / 120px / lh1 / ls-2px / #005EAC 10%
box x445 y90（中央 719.5）。Figma の描画は縦 97%（1:1 スクショの大文字高 82px = 120×0.7×0.97）→ 共通 .mv__en と同じ scaleY(.97)。
Figma のレイヤー順ではタイトル群より前面だが不透明度 10% で見た目の差は無いため、読み上げ・選択の邪魔にならない背面に置く */
.recruit-message__watermark {
position: absolute;
left: 50%;
top: clamp(50px, 6.25vw, 90px);
z-index: 0;
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-120);
line-height: 1;
letter-spacing: -0.0167em; /* -2px / 120px */
padding-right: 0.0167em; /* 末尾の字間 -2px 分 box が Figma(549)より狭くなり字が 1px 右に寄るため補正 */
white-space: nowrap;
color: rgba(0, 94, 172, 0.1);
transform: translateX(-50%) scaleY(0.97);
transform-origin: top center;
pointer-events: none;
user-select: none;
}
/* ---- 本文（55:938 740×920）: 段落 gap32・20px・lh2・中央揃え。強調行は Bold #005EAC ---- */
.recruit-message__body {
display: flex;
flex-direction: column;
gap: var(--r-gap-32);
width: 100%;
text-align: center;
}
.recruit-message__p {
font-size: var(--r-fs-20);
line-height: 2;
letter-spacing: 0;
font-weight: 400;
color: var(--color-font-black);
}
.recruit-message__em { font-weight: 700; font-style: normal; color: var(--recruit-blue); }
/* ---- 写真（55:945 / 55:947）: 角丸20・枠外へはみ出す absolute 配置。
画像は仕様 §4 の実測クロップ（±1〜3px 詰め）＋ Figma のレイヤー側の明るさ補正を LUT で焼き込んだものを
枠の比率どおり 2 倍サイズで書き出し済み（design/recruit-src/message/README-tone.txt）。
よって CSS 側の % クロップは不要で cover のままでよい ---- */
.recruit-message__photo {
position: absolute;
z-index: 2;
overflow: hidden;
border-radius: var(--r-radius-20);
background: var(--color-gray-200);
}
.recruit-message__photo img { width: 100%; height: 100%; object-fit: cover; }
/* 写真A 55:945（rect 475×567 abs(-125,121)）
rect の左 25px は画像で覆われない透明部分（仕様 §4-A・常に枠外）なので、画像で覆われる 450×567（abs x -100〜350）だけを枠にする。
右端は本文カラム左端に接する（1440: 350）。1440 超は 350px 固定 = 画面左端に接し続ける（案A）。幅 450/1440 = 31.25vw */
.recruit-message__photo--a {
/* 幅 = 本文カラム左端までの距離 + 画面外へ逃がす 100px。
1440 でちょうど Figma の 450px（本文カラムに接して左へ 100px はみ出す）に着地する。
2026-09-19: 以前は幅 450px・右端 350px で頭打ちだったため、1440 を超えると本文だけが
中央へ離れ、1920 で 240px・2560 で 560px の空きができて「本文を挟む」構図が崩れていた。
上限 690px は 1920 で本文に接する幅。それ以上の画面では画面端に張り付いたままにする。 */
--r-msg-photo-w: clamp(248px, calc(50% - var(--r-msg-col) / 2 + 100px), 690px);
top: clamp(67px, 8.403vw, 121px); /* 121 = padding-top 140 の 19px 上 */
left: min(calc(50% - var(--r-msg-col) / 2 - var(--r-msg-photo-w)), -100px);
width: var(--r-msg-photo-w);
aspect-ratio: 450 / 567;
}
/* 写真B 55:947（357×346 abs(1141,669)。右 58px が枠外）
左端 = 本文カラム右端 + 51（1440: 1090+51）。1440 超は右端のはみ出し 58px を保って画面右端に接し続ける（案A） */
.recruit-message__photo--b {
/* 写真A と同じ考え方。幅 = 本文カラム右端から画面右端までの距離 + はみ出し 58px。
1440 で Figma の 357px（本文との間隔 51px・右へ 58px はみ出す）に着地する。
上限 600px を超える画面では、左端の式ではなく右端の式が効いて画面端に張り付く。 */
--r-msg-photo-w: clamp(196px, calc(50% - var(--r-msg-col) / 2 + 7px), 600px);
top: clamp(368px, 46.458vw, 669px);
left: max(50% + var(--r-msg-col) / 2 + clamp(28px, 3.542vw, 51px), 100% - var(--r-msg-photo-w) + clamp(32px, 4.028vw, 58px));
width: var(--r-msg-photo-w);
aspect-ratio: 357 / 346;
}
/* ---- 帯文字の位置（55:934 box y1165 / 高さ 144 = 180×0.8）: 区画下端から 96px（1405 − 1165 − 144）。
.recruit-marquee の下パディング 0.12em（コンマの下端が overflow で切れないための余白）分だけ差し引く ---- */
.recruit-message__marquee {
position: absolute;
left: 0;
right: 0;
bottom: calc(clamp(53px, 6.667vw, 96px) - 0.12em);
z-index: 0;
}
/* ============================================================
帯文字マーキー（共通部品・template-parts/recruit/marquee.php）
Figtree 600 / 180px / lh 0.8 / ls -2px。色は --recruit-marquee-color（既定 #F0F0F0）。
Figma の描画は縦 97%（1:1 スクショの大文字高 122px = 180×0.7×0.97）→ 共通 .mv__en と同じ scaleY(.97)。
動き（実装ブリーフ §5・仮値）: 左方向・等速 linear・無限ループ・1周 約40s。
同じ文字列を 2 回並べ、1本分（文字列 + 後ろの余白 0.5em）= track の 50% を translateX。
開始位置は Figma の静止位置（先頭 -2.95em = 1440 で -531px。"OLOGY & TRUST," が見える）。
prefers-reduced-motion: reduce はその位置で静止。JS 不要。
============================================================ */
.recruit-marquee {
--recruit-marquee-offset: -2.95em; /* 531px / 180px */
overflow: hidden;
padding-bottom: 0.12em; /* コンマの下端（行ボックス下端より約 0.06em 下）を切らない */
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-180);
line-height: 0.8;
letter-spacing: -0.0111em; /* -2px / 180px */
white-space: nowrap;
color: var(--recruit-marquee-color, var(--color-gray-200));
transform: scaleY(0.97);
transform-origin: top left;
pointer-events: none;
user-select: none;
}
.recruit-marquee__track {
display: flex;
width: max-content;
transform: translateX(var(--recruit-marquee-offset));
animation: recruit-marquee-scroll 40s linear infinite;
}
.recruit-marquee__text { display: block; flex: none; padding-right: 0.5em; } /* 文字列間の余白（仮値・レビューで確定） */
@keyframes recruit-marquee-scroll {
from { transform: translateX(var(--recruit-marquee-offset)); }
to { transform: translateX(calc(-50% + var(--recruit-marquee-offset))); }
}
@media (prefers-reduced-motion: reduce) {
.recruit-marquee__track { animation: none; }
}
/* ============================================================
1023 以下（SP・タブレット。カンプ無し・補完値）
タイトル群 → 写真A → 本文 → 写真B の縦積み。段落は PC 用の
を外して流し込み（空行の
は残す）。
写真は 4:3 の全幅（PC のクロップ画像を object-position で焦点近似）。帯文字は --r-fs-180 の下限 60px。
2026-09-18: 768〜1023 もここに含めた。それまでは PC と同じ絶対配置のままで、本文カラムが 600px を
占めるぶん写真が画面外へ押し出され、768px では写真A が 248px 中 84px、写真B が 196px 中 56px しか
見えていなかった（意図した「はみ出し」ではなく破片に見える状態）。縦積みなら全体が見える。
768〜1023 固有の値は直後のブロックで上書きする。
============================================================ */
@media (max-width: 1179px) {
/* --r-msg-sp-w: 1 カラムの中身の上限。375 の全幅（343）を基準に、480〜767 でも本文・写真が
画面いっぱいに伸びて 768 以上の PC 版より大きく見えてしまう（767 で写真 735×551 → 768 で 248×312）
破綻を防ぐための頭打ち。他区画の SP 上限（400 / 420）と同種の扱い。 */
.recruit-message { padding: 64px 16px 88px; --r-msg-sp-w: 520px; } /* 2026-09-18: 480px だと 600〜767px で段落の最終行が1文字だけになるため 520px に */
/* 中央カラムを解いて、写真を見出しと本文の間・本文の後に差し込む */
.recruit-message { display: flex; flex-direction: column; align-items: center; gap: 32px; }
/* インフローの子はすべて --r-msg-sp-w で頭打ちにして中央寄せ（375 以下は全幅のまま） */
.recruit-message__head,
.recruit-message__body,
.recruit-message__photo { width: 100%; max-width: var(--r-msg-sp-w); }
.recruit-message__inner { display: contents; }
.recruit-message__head { order: 0; position: relative; z-index: 1; }
.recruit-message__photo--a { order: 1; }
/* 流し込みにすると中央揃えでは行末の短い孤立行（「す。」等）が目立つため、本文だけ左揃え（見出し・写真は中央のまま） */
.recruit-message__body { order: 2; position: relative; z-index: 1; gap: 24px; text-align: left; }
.recruit-message__photo--b { order: 3; }
.recruit-message__p { text-wrap: pretty; } /* 「す。」だけの孤立行を避ける（balance は日本語の長め段落で逆に短い行を作った） */
.recruit-message__p br { display: none; }
.recruit-message__p br.recruit-message__blank { display: inline; }
.recruit-message__watermark { top: 40px; } /* 60px 字。見出し上端（64）の 24px 上 = PC の比率（50/120 字）と同程度 */
.recruit-message__photo {
position: static;
aspect-ratio: 343 / 257;
border-radius: 20px;
}
.recruit-message__photo--a img { object-position: 50% 45%; } /* 人物と分電盤が入る帯 */
.recruit-message__photo--b img { object-position: 50% 50%; }
/* 帯文字 60px（行ボックス 48）。本文/写真B の下 88px のうち、下 24px を空けて置く */
.recruit-message__marquee { bottom: calc(24px - 0.12em); }
}
/* 768〜1023: 縦積みは上のブロックのまま、寸法だけ 1024 以上と地続きになるよう戻す。
本文カラムは 1024 以上と同じ 600px（--r-msg-col の下限）なので、文字組みは境目で変わらない。 */
@media (min-width: 768px) and (max-width: 1179px) {
.recruit-message {
--r-msg-sp-w: 600px;
/* --r-gap-36 は 768px で 20px まで落ちるため、767 の 32px から詰まって見えた */
gap: clamp(32px, 2.5vw, 36px);
padding: var(--r-sp-140) var(--r-pad-80) clamp(110px, 13.889vw, 200px);
}
.recruit-message__photo { aspect-ratio: 16 / 9; }
.recruit-message__watermark { top: clamp(40px, 5.5vw, 56px); }
.recruit-message__marquee { bottom: calc(40px - 0.12em); }
}
/* ---------- 03-nav.css ---------- */
/* ============================================================
recruit-parts/03-nav.css — 目次ナビ（Figma 55:949 nav / 左カラム・追従）
------------------------------------------------------------
1440: 314×517・bg #005EAC・角丸 右上20/右下20（左端は画面端フラッシュ）・padding 32・縦gap 35・内側250
見出しブロック 266 = CONTENTS(16/lh1) + gap20 + リスト230(26×7 + gap8×6)
区切り線 1px #fff / CTA 117 = 文言26 + gap12 + CTA-White 79
追従: position sticky（top = ヘッダー高 + 24）。親 .recruit-contents（align-items:flex-start）の範囲で自然解除。
カレントの黄ドット（10px #EEE306）は recruit-parts/03-nav.js の scrollspy が aria-current を付け替えて動かす。
1023px以下: 非固定・本文の上に全幅バンド（CONTENTS + 横並びチップ + ENTRY）。※SP/タブレットのカンプは無く補完値。
リキッド: 余白・角丸は --r-* トークン（1024で 22.75 → 1440で 32）。内側幅 --r-side-inner は 250 固定
（「あなたの応募をお待ちしています」15文字×16px=240 が1行で収まり、CTA-White 250×79 を保つ最小幅。
FV 右パネルの clamp(220px…) だと 1024〜1279 で文言が2行に折れるため、ナビは 250 を下限にする）。
→ ナビ幅は 1024で 295.5 / 1440で 314、残りが main-contents。
============================================================ */
.recruit-nav {
--r-side-inner: 250px;
--recruit-nav-top: calc(var(--header-h) + 24px);
position: sticky;
top: var(--recruit-nav-top);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 2.431vw, 35px);
flex: 0 0 auto;
width: calc(var(--r-side-inner) + var(--r-gap-32) * 2);
/* ナビ高さ517より低いビューポートでも ENTRY に届くよう、はみ出す分だけナビ内でスクロール（仮値・通常の高さでは無効） */
max-height: calc(100vh - var(--recruit-nav-top));
max-height: calc(100dvh - var(--recruit-nav-top));
padding: var(--r-gap-32);
overflow-y: auto;
border-radius: 0 var(--r-radius-20) var(--r-radius-20) 0;
background: var(--recruit-blue);
color: var(--color-font-white);
}
/* overflow:auto の縦flexで中身（ボタン等）が潰れないように */
.recruit-nav > * { flex-shrink: 0; }
/* ---- 見出し + リスト（55:950 250×266） ---- */
.recruit-nav__body {
display: flex;
flex-direction: column;
gap: clamp(12px, 1.389vw, 20px);
width: var(--r-side-inner);
}
.recruit-nav__title { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; } /* EN/16 */
.recruit-nav__list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
/* 項目 250×26（ドット10 + gap10 + 文字230）。Figmaの行高26に合わせて min-height（16×1.6=25.6 の切上） */
.recruit-nav__link {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 26px;
font-size: 16px;
line-height: 1.6;
font-weight: 700;
color: inherit;
}
/* ドット: 非カレントも 10px の枠を占有（Figma: opacity 0 のまま配置・文字左端を揃える） */
.recruit-nav__dot {
width: 10px;
height: 10px;
flex-shrink: 0;
border-radius: 50%;
background: var(--color-yellow-dusty);
opacity: 0;
}
.recruit-nav__link[aria-current="true"] .recruit-nav__dot { opacity: 1; }
.recruit-nav__text { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; transition: opacity 0.3s ease; }
/* ---- 区切り線（55:961 250×0・stroke 1px #fff）: 1pxぶん下に食い込ませて合計高さ517を維持（線は y=333 行） ---- */
.recruit-nav__divider { width: var(--r-side-inner); height: 0; margin: 0 0 -1px; border: 0; border-top: 1px solid #fff; }
/* ---- CTA（55:962 250×117） ---- */
.recruit-nav__cta { display: flex; flex-direction: column; gap: 12px; width: var(--r-side-inner); }
.recruit-nav__cta-text { min-height: 26px; font-size: 16px; line-height: 1.6; font-weight: 700; } /* Figma 55:963 の高さ26（16×1.6=25.6 の切上）で合計517に */
/* CTA-White 250×79: 共通 .btn--white を幅いっぱいに（.btn の min-width 287 と gap 62 を解除。space-between なので見た目は同じ） */
.recruit-nav__btn { width: 100%; min-width: 0; gap: 12px; }
/* ---- ホバー/フォーカス: サイト共通のテキストリンク（opacity 1→0.6・0.3s ease、フォーカスリング黄2px）
※ Figma に記載なし。ENTRY は共通 .btn の確定ホバーをそのまま継承 ---- */
.recruit-nav__link:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 2px; border-radius: 2px; }
.recruit-nav__link:focus-visible .recruit-nav__text { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
.recruit-nav__link:hover .recruit-nav__text { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.recruit-nav__text { transition: none; }
}
/* ============================================================
1023px以下: 2カラムが縦積み（recruit.css）になるため、ナビは非固定の全幅バンドに。
※ SP/タブレットのカンプは無い（補完値）。項目は横並びのチップ（タップ領域44px以上）、ENTRY は右下（SPは全幅）。
============================================================ */
@media (max-width: 1179px) {
.recruit-nav {
--r-side-inner: 100%;
position: static;
align-items: stretch;
gap: 20px;
width: 100%;
max-height: none;
padding: 24px var(--r-pad-80);
overflow: visible;
border-radius: 0;
}
.recruit-nav__body { gap: 12px; }
.recruit-nav__list { flex-direction: row; flex-wrap: wrap; gap: 8px 10px; }
/* チップ: ドット枠（8px）は常に確保し、カレント切替で幅・折返しが変わらないようにする */
.recruit-nav__link {
width: auto;
min-height: 44px;
gap: 8px;
padding: 8px 16px 8px 12px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 22px;
}
.recruit-nav__dot { width: 8px; height: 8px; }
.recruit-nav__text { flex: none; }
.recruit-nav__divider { margin: 0; }
.recruit-nav__cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.recruit-nav__btn { width: 250px; max-width: 100%; }
}
/* ============================================================
追従バー（.recruit-navbar・1023px 以下だけ）
1023 以下では目次本体が position:static になり、スクロールすると画面外に出てしまう。
本体を sticky にすると 375px で高さ 382px（画面の 6 割）を占めてしまい使い物にならないので、
目次項目だけを持つ細い帯を別に用意し、本体が画面から出たら上から降ろす。
position:fixed なので本文のレイアウトには一切影響しない（本体を縮める方式だと、
縮んだぶん下の内容が跳ね上がってしまう）。
チップの見た目は本体と同じ .recruit-nav__link / __dot / __text をそのまま使う。
============================================================ */
.recruit-navbar { display: none; }
@media (max-width: 1179px) {
.recruit-navbar {
display: block;
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
z-index: 190; /* ヘッダー（z-index 210）より下 */
background: var(--recruit-blue);
color: var(--color-font-white);
box-shadow: 0 2px 8px rgba(26, 43, 81, 0.18);
transform: translateY(-100%);
visibility: hidden; /* 隠れている間はタブ順からも外す */
transition: transform 0.3s var(--ease-slide), visibility 0.3s;
}
.recruit-navbar.is-visible { transform: none; visibility: visible; }
/* チップ（左・横スクロール）と応募ボタン（右・固定）を1行に */
.recruit-navbar__inner { display: flex; align-items: center; gap: 8px; padding-right: var(--r-pad-80); }
/* 応募ボタン。サイト共通の .btn--small + .btn--white をそのまま使う
（ラベル＋黄丸＋矢印の組み立て・ホバー・フォーカスは共通側の定義に乗る）。
バー（64px）に収まるよう左 padding と最小幅だけ詰める。縮まないのでチップ側が譲る */
.recruit-navbar__entry {
flex: none;
min-width: 0;
gap: 8px;
padding-left: 20px;
}
.recruit-navbar__entry .btn__label { font-size: 14px; }
/* 1行固定で横スクロール。折り返すと帯が厚くなって画面を食うため。
スクロールバーは隠しているので、続きがあることは端のフェードで示す。
どちら側に続きがあるかは JS が .has-left / .has-right で伝える（recruit.js） */
.recruit-navbar__list {
--navbar-fade-l: 0px;
--navbar-fade-r: 0px;
mask-image: linear-gradient(to right, transparent 0, #000 var(--navbar-fade-l), #000 calc(100% - var(--navbar-fade-r)), transparent 100%);
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 0;
/* 右 padding はフォーカスリング（outline 2px + offset 2px）の逃げ。
0 だと最後のチップにタブで入ったときリングの右側が overflow で切れる */
padding: 10px 16px 10px var(--r-pad-80);
flex: 1 1 auto;
min-width: 0;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.recruit-navbar__list::-webkit-scrollbar { display: none; }
.recruit-navbar__list.has-left { --navbar-fade-l: 32px; }
.recruit-navbar__list.has-right { --navbar-fade-r: 32px; }
/* タブで入っているあいだは端のフェードを外す。
フォーカス中のチップが半透明になると「今どこにいるか」が見えなくなるため
（横位置のセンタリングは recruit.js の focusin ハンドラが行う） */
.recruit-navbar__list:focus-within {
--navbar-fade-l: 0px;
--navbar-fade-r: 0px;
}
.recruit-navbar__item { flex: none; }
.recruit-navbar .recruit-nav__link { white-space: nowrap; }
}
@media (max-width: 767px) {
.recruit-navbar__list { padding: 10px 0 10px 16px; }
.recruit-navbar__inner { padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.recruit-navbar { transition: none; }
}
@media (max-width: 767px) {
.recruit-nav { padding: 24px 16px; }
.recruit-nav__cta { flex-direction: column; align-items: stretch; }
/* 400px 頭打ちは法人側 SP の .btn（overrides.css / page-about.css の `width:100%; max-width:400px`）と同型。
上限なしだと 480〜767 で Figma の 250 に対しボタンだけ 448〜735px まで伸び、
ENTRY と丸矢印が極端に離れる（同ページの .recruit-flow__btn / .recruit-interview__btn も 400 で頭打ち）。
中央寄せはしない: バンド内の CONTENTS・チップ・文言が左揃えのため、ボタンも左端を揃える */
.recruit-nav__btn { width: 100%; max-width: 400px; }
}
/* ============================================================
1023px 以下: ラベルが短いボタンのラベルを空き幅の中央に置く（2026-09-18）
.btn は justify-content: space-between・左 padding 54（small は 32）なので、
幅いっぱいに伸びると短いラベルと丸矢印が離れる。375px の実測で
ENTRY（ラベル 63px）は 343px のボタンの中で 167px、READ MORE（89px）は 311px の中で 158px 空いていた。
法人ページの .btn は「気軽に相談してみる」「詳しく見る」のように文言が長く、今のままで釣り合っているので触らない。
auto マージンは justify-content より先に空き幅を食うため、丸矢印の位置は変わらない。
対象は「その幅で実際に伸びているボタン」だけ。ナビ ENTRY と READ MORE は
768〜1023 では Figma どおりの 250 / 219 に収まっているので 767 以下だけ、
FV の ENTRY は 768〜1023 でも青パネルの列幅いっぱい（316〜430）に伸びるので 1023 以下。
PC（1024 以上）はいずれも Figma どおりの幅なので対象外。
============================================================ */
@media (max-width: 767px) {
.recruit-nav__btn .btn__label,
.recruit-interview__btn .btn__label,
.recruit-entry__btn .btn__label,
.recruit-flow__btn .btn__label { margin-inline: auto; }
}
@media (max-width: 1023px) {
.recruit-fv__entry-btn .btn__label { margin-inline: auto; }
}
/* ---------- 04-whyus.css ---------- */
/* ============================================================
04-whyus.css — 採用トップ「小竹電気商会で働く6つの魅力」（Figma 55:966 WhyUs 1046×705）
------------------------------------------------------------
root: 縦並び gap 64 / padding-right 80 → 内側 966
見出し 420×61（WHY US 16 + 和文見出し 45）/ カード 306×266 ×6（列gap 24・段gap 48）
card: 白 #FEFEFE 角丸20 overflow clip / 写真 306×172 / タイトル領域 70（padding-top 12）/ padding-bottom 24
バッジ 63×63（左-15・上-8 にはみ出し）/ 回転アイコン白丸 32（right 11 / bottom 12）
裏面: card(detail) 55:1136 = 同じ白カードに padding 24 で 16px/1.6 の詳細文を上下中央
------------------------------------------------------------
リキッド: Figma(1440) の px を上限、768 で約 55% を下限とする clamp（px×0.55, px/14.4vw, px）
767px以下は SP カンプ無しのため補完（1列。裏面の 16px 文字が収まる幅を優先）
------------------------------------------------------------
※ 見出しの「6」（Zen Kaku Gothic New Black 900）は inc/assets.php の共通 Google Fonts URL
（Zen+Kaku+Gothic+New:wght@400;500;700;900）に含まれているため、このファイルでの追加読み込みは不要。
以前あった @import は重複要求で、かつ recruit.css へ結合すると規格上（他の規則より後ろの @import）
無効になって落ちるため削除した（2026-09-17 レビュー）。
============================================================ */
.recruit-whyus {
--whyus-gap-64: clamp(35px, 4.444vw, 64px); /* 見出し→カード群 */
--whyus-gap-48: clamp(26px, 3.333vw, 48px); /* 段間 */
--whyus-badge: clamp(35px, 4.375vw, 63px); /* バッジ径 */
--whyus-flip-duration: 0.5s; /* 反転 0.5s（ブリーフ §5 確定）。イージングは仮値 */
display: flex;
flex-direction: column;
gap: var(--whyus-gap-64);
padding-right: var(--r-pad-80);
}
/* ---- 見出しブロック（55:967 420×61）---- */
.recruit-whyus__head { display: flex; flex-direction: column; }
.recruit-whyus__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
/* 55:969: 28px/1.6・字間 2px（0.0714em）・#4B5663。箱は高さ45固定で「6」（64px）は上下にはみ出す。
Figma と同じく行ボックス内で「6」とベースラインを揃え（1行の行高 = 64×1.6 = 102.4）、
行ボックスと 44.8（28×1.6）の差分 57.6 の半分を上下の負マージンで吸収して 45 相当を占有させる。
-0.8em × (64/28 − 1) = -1.0286em。font-size に追従するので幅が変わっても同じ関係を保つ */
.recruit-whyus__title {
font-size: var(--r-fs-28);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0714em;
color: #4B5663;
margin-block: -1.0286em;
white-space: nowrap;
}
.recruit-whyus__title-num {
font-size: 2.2857em; /* 64/28 */
font-weight: 900;
letter-spacing: 0.03125em; /* 2px/64 */
color: var(--recruit-blue);
}
.recruit-whyus__title-accent { color: var(--recruit-blue); }
/* ---- カード群（55:970 966×580 / 3列×2段）---- */
/* 列数はカードの最小幅から決める（画面幅ではなくリスト幅で切る）。
2026-09-18: 以前はビューポート 1279px で 2/3 列を切り替えていたため、
目次ナビが入った 1280px（本文 902px）でカードが 263px まで痩せていた。
2026-09-19: minmax の下限を 300px 固定にしていたが、それだと
(a) リスト幅 947→948 と 2051→2052 の 2 か所でカードが 461→300 / 408→300 と縮む逆転ができ、
(b) 2052px 以上はカード 6 枚が 4+2 の変則行になっていた（Figma は 3 列×2 段）。
下限を「3 列に割ったときの幅」そのものにすると、4 列は数式上どう広げても入らない
（4m + 3g ≦ C を満たす C が存在しない）ので、上側は常に 3 列で滑らかに伸びる。
3 列だとカードが 280px を割る幅（＝裏面の 16px 本文が窮屈になる幅）でだけ 2 列に落ちる。
切り替えは 1 か所だけになり、その位置も承認幅 1440 から十分離れる。
（max 側は 1fr のまま。定寸を入れると auto-fit の繰り返し回数がそちらで決まってしまい、
1440 でも 2 列になる）
320〜2560 の実測: 列が変わるのは 599/600・981/982・1343/1344 の 3 か所だけで、
4 列は一度も出ない。同じ列数のまま縮む区間は無し。1440 は従来どおり 3 列×306px。 */
.recruit-whyus__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, (100% - var(--r-gap-24) * 2) / 3)), 1fr));
gap: var(--whyus-gap-48) var(--r-gap-24);
}
/* li: バッジのはみ出し先・3D の視点。フォーカスリングもここに描く（反転中でも輪郭が見えるように） */
.recruit-whyus__item {
position: relative;
display: grid;
perspective: 1200px;
border-radius: var(--r-radius-20);
}
/* 反転する本体（表・裏を重ねる）。高さは aspect-ratio 306:266 で確定（裏面が長くても伸びない。裏面の収まりは §裏面のコメント参照） */
.recruit-whyus__card {
position: relative;
display: grid;
aspect-ratio: 306 / 266;
transform-style: preserve-3d;
transition: transform var(--whyus-flip-duration) var(--ease-slide);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.recruit-whyus__card.is-open { transform: rotateY(180deg); }
.recruit-whyus__front,
.recruit-whyus__back {
grid-area: 1 / 1;
position: relative; /* 裏面の回転アイコン（表に戻す手がかり）を裏面基準で右下に置くため */
border-radius: var(--r-radius-20);
background: var(--color-bg-white);
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* ---- 表面（= button）---- */
.recruit-whyus__front {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0 0 clamp(13px, 1.667vw, 24px);
border: 0;
appearance: none;
-webkit-appearance: none;
font: inherit;
color: var(--color-font-black);
text-align: center;
cursor: pointer;
}
.recruit-whyus__photo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 306 / 172;
overflow: hidden;
background: var(--color-gray-400);
}
/* 写真は 6 枚とも Figma のフィル画像から「箱 306:172 に焼き込み済み」の 612×344（2x）で書き出してある
（仕様書 §4 の実測クロップと、デザイナーがフィル画像に掛けたトーン補正を画像側に反映済み。
2026-09-17 の再書き出し。パラメータは design/recruit-src/whyus/whyus-export-params.json）。
そのため CSS 側のクロップ（旧 .recruit-whyus__img--02/03/04 の % 指定）は不要で、cover のみでよい。
箱の比は PC/SP とも 306:172 固定なので、どの幅でも書き出し画像が過不足なく収まる。
※ img 自身に backface-visibility:hidden を付けると Chromium で描画されない事例があるので付けない */
.recruit-whyus__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transition: transform 0.4s ease;
}
/* タイトル領域（Paragraph 306×70・padding-top 12・flex 1・中央） */
.recruit-whyus__body {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
padding: clamp(7px, 0.833vw, 12px) 8px 0;
}
.recruit-whyus__name {
font-size: var(--r-fs-18);
line-height: 1.6;
font-weight: 400;
letter-spacing: 0;
transition: opacity 0.25s ease;
}
/* 回転アイコン白丸（I55:97x;639:22858 32×32・right 11 / bottom 12・影 0 1 4 .15）+ Icon 16 #005EAC */
.recruit-whyus__icon {
position: absolute;
right: 11px;
bottom: 12px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
color: var(--recruit-blue);
}
.recruit-whyus__icon-svg { display: block; width: 16px; height: 16px; }
/* ---- 裏面（card(detail) 55:1136: padding 24・258×156 の詳細文を上下中央）----
閉じている間は absolute（高さに寄与させない＝カード比 306:266 を保つ）。開いている間と閉じアニメ中は
グリッドに戻す。
※ カードは aspect-ratio で高さが決まるため、裏面が長くてもカードは伸びない（2026-09-17 実測で確認）。
代わりに詳細文が padding 領域へ食い込む。320〜1920 の全幅で border-box 内に収まり、
overflow:hidden での切れは発生しないことを確認済み（最悪は 1280 の 3 列で上下 約9.5px 食い込み）。 */
.recruit-whyus__back {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 1.667vw, 24px);
transform: rotateY(180deg);
cursor: pointer;
}
.recruit-whyus__card.is-open .recruit-whyus__back,
.recruit-whyus__card.is-closing .recruit-whyus__back { position: relative; inset: auto; }
.recruit-whyus__detail {
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: var(--color-font-black);
text-align: center;
}
/* 左上の番号バッジ（不透明な黄・カードの外にはみ出して載る）を本文に回り込ませる。
2026-09-18: 560〜600px と 1440px で、1行目の先頭 1 文字がバッジに 45〜100% 隠れていた。
上下に余白を足す方式だと本文がカードから溢れて上下が切れるため、
バッジが食い込む分だけ 1 行目を短くする float を置く（行数とカード高さは変わらない）。 */
.recruit-whyus__detail::before {
content: '';
float: left;
width: calc(var(--whyus-badge) * 0.42);
height: calc(var(--whyus-badge) * 0.52);
}
/* 青太字（55:1123 のインスタンス上書き: Bold 700 + #005EAC） */
.recruit-whyus__em { font-weight: 700; color: var(--recruit-blue); }
/* ---- バッジ（Group 9292 63×63・左-15 上-8・#EEE306・数字 Figtree 600 30px）---- */
.recruit-whyus__badge {
position: absolute;
left: calc(var(--whyus-badge) * -0.2381); /* -15/63 */
top: calc(var(--whyus-badge) * -0.127); /* -8/63 */
z-index: 2;
display: grid;
place-items: center;
width: var(--whyus-badge);
height: var(--whyus-badge);
border-radius: 50%;
background: var(--color-yellow-dusty);
font-family: var(--font-en);
font-weight: 600;
font-size: clamp(16px, 2.083vw, 30px); /* 30px。768 で 16px（バッジ径 35 に対し Figma と同じ約 0.47 倍） */
line-height: 1;
color: var(--color-font-black);
pointer-events: none;
}
/* ---- フォーカス（フォーカスリングは消さない）/ ホバー（サイト共通のカード演出: 写真 1.03・文字 1→0.6）---- */
.recruit-whyus__front:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 4px; }
/* :has 対応ブラウザでは li に描く（反転して表面が裏向きでも輪郭が見える）。非対応環境は上の button 側が残る */
.recruit-whyus__item:has(.recruit-whyus__front:focus-visible) { outline: 2px solid var(--color-yellow-dusty); outline-offset: 4px; }
.recruit-whyus__item:has(.recruit-whyus__front:focus-visible) .recruit-whyus__front { outline: none; }
.recruit-whyus__front:focus-visible .recruit-whyus__img { transform: scale(1.03); }
.recruit-whyus__front:focus-visible .recruit-whyus__name { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
.recruit-whyus__card:not(.is-open):hover .recruit-whyus__img { transform: scale(1.03); }
.recruit-whyus__card:not(.is-open):hover .recruit-whyus__name { opacity: 0.6; }
}
/* reduced-motion: 反転もホバーの変化も即時 */
@media (prefers-reduced-motion: reduce) {
.recruit-whyus__card,
.recruit-whyus__img,
.recruit-whyus__name { transition: none; }
}
/* ---- 768–1279: 2列 ----
実測: 3列のままだと 1024 でカード 193px・1180 で 236px になり、タイトル（15〜16px）が3行になって
回転アイコンに重なり、裏面の 16px 文も 306:266 に収まらない。カード幅 ≥ 263（1280）から3列にする */
/* ---- 1023以下: 本文2カラム（.recruit-contents）が縦積みになるため左余白を自前で持つ（統合時に共通側で持つなら削除）---- */
@media (max-width: 1179px) {
.recruit-whyus { padding-left: var(--r-pad-80); }
}
/* ---- 767以下（SP 補完・カンプ無し）: 余白 16、見出し 20px、カード 1 列（裏面の文章が収まる幅を優先）---- */
@media (max-width: 767px) {
.recruit-whyus { gap: 32px; padding-inline: 16px; }
/* 320px でも1行に収まるよう 18→20px（320→375）で追従。それ以下の幅は折り返しを許可（横スクロールを出さない） */
.recruit-whyus__title { font-size: clamp(18px, 3.636vw + 6.36px, 20px); white-space: normal; }
.recruit-whyus__list { grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* 452〜559px では列幅 > 420 になるため、左寄せで右に大きな余白が空かないよう中央に置く */
.recruit-whyus__item { max-width: 420px; margin-inline: auto; }
.recruit-whyus { --whyus-badge: 48px; } /* 裏面の padding もこの径を見るので、バッジ側ではなくセクションに置く */
.recruit-whyus__badge { font-size: 24px; }
}
/* 600–767 は 2 列でも裏面が収まるので 2 列に戻す。
2026-09-18: 下限を 560 → 600 に上げた。560〜599 はカードが 256〜275px しかなく、
裏面の 16px 本文が 14px はみ出して上下が切れていた（overflow:hidden のため気づきにくい）。 */
@media (min-width: 600px) and (max-width: 767px) {
.recruit-whyus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 16px; }
.recruit-whyus__item { max-width: none; }
}
/* ---------- 05-job.css ---------- */
/* ============================================================
05-job.css — 具体的な仕事内容（JOB DETAILS）
Figma: nPRrygpkMmrkuAdtzdifmi / 55:979「JOB DETAILS 」1046×1596（PC 1440）
仕様: docs/recruit-spec/05-job.md ／ 実装記録: docs/recruit-spec/05-job.impl.md
------------------------------------------------------------
構成: 見出しブロック 966×125 → gap64 → カード4枚（2列×2行・幅430・列間106・行間80）
→ gap100 → MESSAGE 02 ボックス 966×353（#FEFEFE・角丸10・padding 40/60）
ルート 1046 のうち右 80 は padding（内容幅 966）。自身の塗りは無し（地色は親 .recruit-contents の #F0F0F0）。
静的セクション: リンク・ボタン・動きの指定が Figma に無いため、ホバー演出・アニメーションは付けない。
リキッド: Figma 1440 の px を上限に clamp(px×0.55, px/14.4 vw, px)。16px 以下の文字は固定、行間・字間は em。
SP（767 以下）カンプは Figma に無い → 1列縦積みの補完レイアウト（値はすべて補完値）。
============================================================ */
.recruit-job {
display: flex;
flex-direction: column;
gap: clamp(35px, 4.444vw, 64px); /* 55:979 col gap 64 */
padding-right: var(--r-pad-80); /* 1046 − 80 = 内容幅 966 */
/* Figma（＝JIS 準拠の厳格禁則）と同じ改行位置にするため。ブラウザ既定の normal は
行頭の小書き仮名（っ ゃ など）を許すため 55:1002 の 2〜4 行目が Figma より 1 字ずれる */
line-break: strict;
}
/* ---- 見出しブロック（55:980 966×125: 見出しコンポーネント 55:981 + gap8 + リード） ---- */
.recruit-job__head { display: flex; flex-direction: column; gap: 8px; }
.recruit-job__title { display: flex; flex-direction: column; gap: 4px; }
/* EN/16: Figtree SemiBold 16 / lh1 / RECRUT main */
.recruit-job__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
/* Heading/Large: ZKGN Medium 28 / lh1.6 / 字間2px（2/28 = 0.0714em） */
.recruit-job__ja {
font-size: var(--r-fs-28);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0714em;
color: var(--color-font-black);
}
/* Body/Small: 16 / lh1.6。1440 では改行
で 2 行（各行は 966 に収まる） */
.recruit-job__lead { font-size: 16px; line-height: 1.6; color: var(--color-font-black); }
/* ---- 本体（55:983: カードグリッド + gap100 + MESSAGE） ---- */
.recruit-job__body { display: flex; flex-direction: column; gap: clamp(55px, 6.944vw, 100px); }
/* カードグリッド（55:984 966×954）: 2 列 430、列間 106 は justify-between の結果 → 列間を % で再現（106/966） */
.recruit-job__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 10.973%;
row-gap: var(--r-gap-80);
align-items: start;
}
/* カード（55:985 ほか 430×411/437）: 写真 211 + gap16 + テキスト群 */
.recruit-job__card { display: flex; flex-direction: column; gap: var(--r-gap-16); min-width: 0; }
/* 写真枠 430×211・角丸20。
トリミング（55:986/995 の FILL 中央合わせ、55:1004 の FILL、55:1013 の CROP 実値）と
カード1・3 の明るさ補正は 860×422 の書き出し側に焼き込み済み
（design/recruit-src/job/export-photos.py）。枠と同じ比率なので CSS は cover だけでよい。 */
.recruit-job__media {
position: relative;
overflow: hidden;
aspect-ratio: 430 / 211;
border-radius: var(--r-radius-20);
background: var(--color-gray-400);
}
.recruit-job__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
/* テキスト群（55:987 ほか）: バッジ2段 + gap16 + 説明 */
.recruit-job__text { display: flex; flex-direction: column; gap: var(--r-gap-16); }
/* 見出し = 白バッジ2段（55:988: col gap6・各バッジは hug）
Heading/Medium: ZKGN Medium 24 / lh1.6 / 字間2px（2/24 = 0.0833em） */
.recruit-job__heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
font-size: var(--r-fs-24);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0833em;
color: var(--color-font-black);
}
/* バッジ（55:989 ほか）: #FEFEFE・角丸4・padding 2px 8px。
ブラウザは末尾文字にも字間（2px）を付けるため、右 padding から 1 字間分（0.0833em）を引いて Figma の幅に合わせる */
.recruit-job__badge {
display: inline-block;
padding: 2px calc(8px - 0.0833em) 2px 8px;
border-radius: 4px;
background: var(--color-bg-white);
}
/* 説明文（55:993 ほか）: Body/Small 16 / lh1.6 / Gray 900 */
.recruit-job__desc { font-size: 16px; line-height: 1.6; color: var(--color-gray-900); }
/* 右列カード（55:996 / 55:1014）はテキスト枠が 460 でカード幅 430 を 30px 超える（Figma 実値・折返し位置を一致させるため再現）。
460/430 = 106.977%。はみ出し先はセクションの右 padding 内に収まる。不揃いを揃える判断になればこの 1 行を削除する */
/* Figma は右列カードの説明文だけ 460px（カード幅 430 を 30px 超過）で置いているが、
親要素をはみ出す実装は健全でないため幅を揃えた。折返し位置が Figma と1〜2文字ずれるが行数は同じ4行。
Figma どおりに戻すなら width: 106.977% に（2026-09-17 判断・docs/recruit-spec/05-job.impl.md） */
/* ---- MESSAGE 02 ボックス（55:1021 point-contents 966×353）: #FEFEFE・角丸10・padding 40/60・col gap23 ---- */
.recruit-job__message {
position: relative;
isolation: isolate; /* 透かしを z-index:-1 でボックス背景より前・文字より後ろに置く */
display: flex;
flex-direction: column;
gap: clamp(13px, 1.597vw, 23px);
padding: clamp(22px, 2.778vw, 40px) clamp(33px, 4.167vw, 60px);
border-radius: 10px;
background: var(--color-bg-white);
}
/* 透かし「MESSAGE」（55:1022）: EN/120 Figtree SemiBold・字間 -2px（-2/120）・#005EAC の 10%。
left 0 / top -32（-32/120 = -0.2667em）でボックス上端から 32px はみ出す → 親に overflow:hidden を付けない。
design context の scale-y-97（実測高 116.43 = 120×0.97）を transform で再現 */
.recruit-job__message-bg {
position: absolute;
left: 0;
top: -0.2667em;
z-index: -1;
margin: 0;
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-120);
line-height: 1;
letter-spacing: -0.0167em;
white-space: nowrap;
color: rgba(0, 94, 172, 0.1);
transform: scaleY(0.97);
transform-origin: 0 0;
pointer-events: none;
user-select: none;
}
/* 「MESSAGE 02」（55:1023）: EN/16 */
.recruit-job__message-en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
/* 本文（55:1024 846×234）: Body/Small 16 / lh1.6。段落間の空行 1 行（Figma は改行 1 つ）を gap 1.6em で再現 */
.recruit-job__message-text {
display: flex;
flex-direction: column;
gap: 1.6em;
font-size: 16px;
line-height: 1.6;
color: var(--color-font-black);
}
/* 部分スタイル: ZKGN Bold + #005EAC（下線・マーカーなし） */
.recruit-job__message-text strong { font-weight: 700; color: var(--recruit-blue); }
/* ---- 1365 以下: Figma の強制改行（リード 2 行・MESSAGE 本文 9 行）は 1440 の行幅（最長行 47 字 = 752px）が前提。
幅が足りない帯域では折返し直後に改行が入り「ます。」だけの行ができるため、自然折返しに切り替える
（1366 で MESSAGE 内側 802px ≥ 752px、1280 では 752.0px で境界ぎりぎりのため 1366 を境にした） ---- */
@media (max-width: 1365px) {
.recruit-job__br { display: none; }
}
/* ---- 1023 以下: 目次ナビが上段に回り main が全幅になる帯域（recruit.css）。
左右余白は本来 .recruit-contents__main 側で持つのが筋。統合時に共通化するまでセクション側で仮に持つ ---- */
@media (max-width: 1179px) {
.recruit-job { padding-inline: var(--r-pad-80); }
}
/* ---- 767 以下（SP）: カンプ無し。1 列縦積みの補完値 ----
余白 16px・縦 gap は PC の約半分・強制改行は解除して自然折返し・写真角丸は FV の SP と同じ 20px */
@media (max-width: 767px) {
.recruit-job { gap: 32px; padding-inline: 16px; }
.recruit-job__body { gap: 48px; }
/* 1 列。max-width 430 は 462px 以上の帯域でカードが親幅いっぱいに伸び、写真が Figma の
430×211 を大きく超えて（600px 時に 568×279）2 列に戻る 768 の 304px と不連続に
なるのを防ぐための頭打ち。462 未満は親幅の方が狭いので効かない */
.recruit-job__list { grid-template-columns: minmax(0, 1fr); row-gap: 40px; max-width: 430px; }
.recruit-job__media { border-radius: 20px; }
/* 1 列ではカード幅いっぱい（460 の再現は 2 列時のみ） */
.recruit-job__card--wide .recruit-job__desc { width: auto; }
.recruit-job__message { padding: 24px 16px; }
}
/* ---------- 06-interview-list.css ---------- */
/* ============================================================
06 社員インタビュー導線（Figma 55:1025 INTERVIEW 1046×460.578）
------------------------------------------------------------
仕様: docs/recruit-spec/06-interview-list.md
1440: 幅1046（右パディング80・内側966）/ 縦gap 64
見出しブロック 966×99（EN16 + gap4 + JA28×1.6 / gap8 / リード16×1.6）
カード行 966×297.578 = 467 + 32 + 467
カード: #FEFEFE・角丸10・padding 20 16・縦gap16
引用文 18px / 写真200×200 角丸20 / 情報列 219（gap16: ラベル行30・氏名32・タグ58・CTA-small 44.578）
リキッド: Figma(1440)の px を上限、768 で約55% を下限とする clamp（recruit.css の --r-* を優先）。
SP（767px以下）: SPカンプ無し → 375 基準の補完値（コメントに明記）。
※ 共有ファイル（recruit.css / components.css）は触らない。上書きは .recruit-interview 配下に限定。
============================================================ */
.recruit-interview {
/* 写真 200 → 768 で 110。カードが広い（1列になった）ときは内側幅の 30% まで戻し、上限は Figma の 200。
情報列（ラベル/氏名/タグ/ボタン）の最小幅は確保し、足りない分だけ写真が縮む（grid-template-columns 参照） */
--ri-photo: clamp(110px, 13.889vw, 200px);
--ri-photo-max: 200px;
--ri-info-min: 168px; /* CTA-small の最小幅 32 + 89(READ MORE) + 4 + 32.58 + 8 = 165.6 に余裕 */
--ri-card-px: var(--r-gap-16); /* カード左右 padding 16 */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(35px, 4.444vw, 64px);
width: 100%;
padding-right: var(--r-pad-80); /* Figma: AL padding 0 80 0 0（内側 966） */
}
/* ---- 見出しブロック（55:1026 966×99: gap 8） ---- */
.recruit-interview__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: clamp(4px, 0.556vw, 8px);
width: 100%;
}
/* 55:1027: EN 16 + gap 4 + JA。gap 4 は微小値のため固定 */
.recruit-interview__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; white-space: nowrap; }
.recruit-interview__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
/* Heading/Large: 28px / 1.6 / letter-spacing 2px（= 0.0714em） */
.recruit-interview__title {
font-size: var(--r-fs-28);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.0714em;
color: var(--color-font-black);
}
/* Body/Small: 16px / 1.6（16px 以下は固定） */
.recruit-interview__lead { width: 100%; font-size: 16px; line-height: 1.6; color: var(--color-font-black); }
/* ---- カード行（55:1029: 横 gap 32・各カード flex 1 → 467） ----
最小カード幅 340（2列に収まらない幅では自動で1列）。
Figma の items-start は 1440 では 2枚とも同じ高さ（297.578）なので stretch と同値。
2列時に引用文やタグの折り返し行数が左右で違うと白パネルの高さと READ MORE の位置がずれるため、
セルを stretch させてカードの高さを揃える（余った高さは引用文の行＝1fr が吸収する。.recruit-interview__card 参照） */
.recruit-interview__list {
display: grid;
/* 列数は「入れ子の実幅」で決まる。
2026-09-18: 最小幅を 340 → 320px に下げ、768px 以上では必ず 2 列以上になるようにした。
340 のままだと 768〜787 と 1024〜1131 で 1 列に落ち、カードが 700px まで広がって
READ MORE の右に 245px の空きが出たうえ、写真が 200 → 110px（−45%）と落差を作っていた。 */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: var(--r-gap-32);
align-items: stretch;
width: 100%;
}
/* li 自身を grid にして、中のカード（）をセルの高さいっぱいに伸ばす */
.recruit-interview__item { display: grid; min-width: 0; }
/* 2026-09-19: ここにあった @container (min-width: 600px) の写真拡大ルールを削除した。
768〜787 と 1024〜1131 で1列に落ちる帯を想定した回避策だったが、同じ日に最小トラックを
340 → 320px へ下げたことでその帯自体が無くなり（768 以上は常に 2 列）、
カードが 600px を超える 2200/2560 では既定側が上限 200px に張り付いているため値も変わらない。
768〜2560 の全幅で写真幅が 1px も動かないことを実測で確認したうえで、
このルールと、そのために付けていた container-type / justify-self の回避策をまとめて外した。 */
/* ---- カード（55:1030 / 55:1031: 467×297.578・#FEFEFE・角丸10・padding 20 16） ----
カード全体が1リンク。中身は grid: 1行目=引用文（全幅）、2〜5行目=左列 写真（4行ぶち抜き・上下中央）/ 右列 ラベル・氏名・タグ・ボタン
row-gap 16 = Figma のカード縦gap16 と 情報列gap16 の両方に一致する */
.recruit-interview__card {
display: grid;
grid-template-columns: min(var(--ri-photo-max), max(var(--ri-photo), 30%), calc(100% - var(--ri-info-min) - var(--r-gap-16))) minmax(0, 1fr);
/* 1行目（引用文）だけ 1fr。カードが隣のカードに合わせて伸ばされたぶんの高さをここが吸収し、
写真・情報列・READ MORE は 2枚のカードで同じ位置に揃う（伸ばされていなければ 1fr = 内容高さで変化なし） */
grid-template-rows: 1fr auto auto auto auto;
column-gap: var(--r-gap-16);
row-gap: var(--r-gap-16);
align-items: start;
width: 100%;
padding: clamp(11px, 1.389vw, 20px) var(--ri-card-px);
border-radius: 10px; /* 2026-09-18: 中間幅で 6px に縮む逆転をなくした */
background: var(--color-bg-white);
color: var(--color-font-black);
}
/* Heading/XS: 18px / 1.6 / letter-spacing 2px（0.111em）/ #005EAC。
Figma ではカード02の引用文（446px）が引用文枠（435px）を 11px はみ出して右 padding に食い込んでいる（仕様書 §9-4）。
同じ見え方にするため行ボックスを右 padding ぶん広げる（1440 で 451px）。それより狭い幅では自然に折り返す */
.recruit-interview__quote {
grid-column: 1 / -1;
align-self: start;
margin-right: calc(-1 * var(--ri-card-px));
font-size: var(--r-fs-18);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.111em;
color: var(--recruit-blue);
transition: opacity 0.25s ease;
}
/* mv-img 200×200・角丸20。写真は行（情報列 212.578）の上下中央（Figma y 6.289） */
.recruit-interview__media {
grid-column: 1;
grid-row: 2 / span 4;
align-self: center;
display: block;
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--r-radius-20);
overflow: hidden;
background: var(--color-gray-200);
}
.recruit-interview__img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-width: none;
transition: transform 0.4s ease;
}
/* カード01: CROP（拡大トリミング）。仕様書 §4 の export 照合値をそのまま使う（object-fit は使わない）。
写真のトーンを ref に合わせた後（impl.md レビュー対応 1）にこの4値を総当たりで再導出したが、
最良は width145 / height193.4 / left-30.5 / top-8.5（差分2.91）で、下記の仕様書値は差分3.11。
差 0.2/255 は照合スクリプトの再サンプラ差以下なので仕様書の値を維持する */
.recruit-interview__card--01 .recruit-interview__img { width: 143.5%; height: 191.5%; left: -29.5%; top: -8%; }
/* カード02: FILL（cover・中央）。4:3 画像の左右 16.7% が切れる（仕様書 §4） */
.recruit-interview__card--02 .recruit-interview__img { object-fit: cover; object-position: 50% 50%; }
/* ラベル行（549:15360: 横 gap 4・下揃え・h30） */
.recruit-interview__label {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: flex-end;
gap: 4px;
color: var(--recruit-blue);
transition: opacity 0.25s ease;
}
/* EN/16 + 文字下 3px + 下線 1px #005EAC（549:15367） */
.recruit-interview__label-en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
/* EN/30 */
.recruit-interview__num { font-family: var(--font-en); font-weight: 600; font-size: var(--r-fs-30); line-height: 1; }
/* Heading/Small: 20px / 1.6 / letter-spacing 2px（0.1em） */
.recruit-interview__name {
grid-column: 2;
grid-row: 3;
font-size: var(--r-fs-20);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.1em;
transition: opacity 0.25s ease;
}
/* タグ3行（549:15260: 縦 gap 8 / UI-tag 14px lh1 #444） */
.recruit-interview__tags {
grid-column: 2;
grid-row: 4;
display: flex;
flex-direction: column;
gap: clamp(4px, 0.556vw, 8px);
color: var(--color-gray-900);
transition: opacity 0.25s ease;
}
/* 1行時の箱は Figma どおり 14px（lh1.4 = 19.6 − 上下 0.2em）。狭い幅で2行に折り返したときだけ行間 1.4 が効く */
/* 3行目は 1440 で 2 行に折り返す。既定の和文改行は文字単位なので「電気工事／士」のように
語の途中で切れる。auto-phrase で文節の切れ目を優先させる（非対応ブラウザは従来どおりの改行） */
.recruit-interview__tag { display: block; margin-block: -0.2em; font-size: 14px; line-height: 1.4; word-break: auto-phrase; }
/* CTA-small（549:15267）: 共通 .btn--small（padding 6 8 6 32・角丸29.617・円32.58・ラベル16）を採用色で。幅は情報列いっぱい（1440 で 219）
gap 32 → 4: justify-content space-between なので 1440 の見た目は同じ。狭い幅で最小幅だけ下げる。
情報列が 219 より広くなる幅（1列時・1440超）では Figma のボタン幅 219 で頭打ち（法人側の .btn が固定幅なのと同じ考え方） */
.recruit-interview__btn {
grid-column: 2;
grid-row: 5;
justify-self: start;
width: 100%;
max-width: 219px;
gap: 4px;
background: var(--recruit-blue);
}
/* 矢印色: Figma どおり カード01 #005EAC / カード02 #1A2B51（共通 .btn__arrow は navy）。仕様書 §9-2 要確認 */
.recruit-interview__card--01 .btn__arrow { color: var(--recruit-blue); }
.recruit-interview__card--02 .btn__arrow { color: var(--color-navy); }
/* ---- ホバー/フォーカス（docs/spec/hover-animation.html のカード標準 = .work-card と同じ組み合わせ）
写真 scale(1.03)（親 overflow:hidden）/ 文字 opacity 1→0.6 / CTA-small は押し込み＋円1.05＋矢印スライド4px。
※ Figma にホバー指定は無い（仕様書 §6 §7）。サイト共通のカード演出を適用 ---- */
.recruit-interview__card:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 3px; }
.recruit-interview__card:focus-visible .recruit-interview__img { transform: scale(1.03); }
.recruit-interview__card:focus-visible .recruit-interview__quote,
.recruit-interview__card:focus-visible .recruit-interview__label,
.recruit-interview__card:focus-visible .recruit-interview__name,
.recruit-interview__card:focus-visible .recruit-interview__tags { opacity: 0.6; }
.recruit-interview__card:focus-visible .btn--small {
transform: scale(0.99);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
}
.recruit-interview__card:focus-visible .btn--small .btn__circle { transform: scale(1.05); }
.recruit-interview__card:focus-visible .btn--small .btn__arrow { transform: translateX(4px) scale(1.05); }
@media (hover: hover) and (pointer: fine) {
.recruit-interview__card:hover .recruit-interview__img { transform: scale(1.03); }
.recruit-interview__card:hover .recruit-interview__quote,
.recruit-interview__card:hover .recruit-interview__label,
.recruit-interview__card:hover .recruit-interview__name,
.recruit-interview__card:hover .recruit-interview__tags { opacity: 0.6; }
.recruit-interview__card:hover .btn--small {
transform: scale(0.99);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .15), 0 2px 4px rgba(26, 43, 81, .1);
}
.recruit-interview__card:hover .btn--small .btn__circle { transform: scale(1.05); }
.recruit-interview__card:hover .btn--small .btn__arrow { transform: translateX(4px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.recruit-interview__img,
.recruit-interview__quote,
.recruit-interview__label,
.recruit-interview__name,
.recruit-interview__tags,
.recruit-interview .btn,
.recruit-interview .btn__circle,
.recruit-interview .btn__arrow { transition: none; }
}
/* ---- 1023px 以下: 本文2カラムが縦積み（recruit.css）になり main が全幅になるため、左にも同じ余白を足す。
※ 共有側（.recruit-contents__main）で左右余白を持たせる場合はここを削除する（統合担当へ申し送り） ---- */
@media (max-width: 1179px) {
.recruit-interview { padding-inline: var(--r-pad-80); }
}
/* ---- 767px 以下（SP）: SPカンプ無し。375 基準の補完値 ----
余白16 / カード1列・全幅・padding 16 / 写真は左列 110〜160（32%）/ ボタンは写真行の下に全幅（タップしやすさ優先） */
@media (max-width: 767px) {
.recruit-interview {
--ri-photo: clamp(110px, 32%, 160px);
--ri-info-min: 130px; /* ボタンが右列から出るので ラベル行(128) が入る幅で足りる */
--ri-card-px: 16px;
gap: 32px;
padding-inline: 16px;
}
.recruit-interview__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* 1列なので幅なりに伸ばすと 767px でカードが 703px になり、READ MORE（400px 上限）の右に
303px の空きが出て左寄りに見える。他区画の SP 上限（魅力 420 / MESSAGE 520）と同じ扱いで頭打ちにする。
写真の 787→788 の落差も 200→110px から 140→110px に縮む。 */
.recruit-interview__item { width: 100%; max-width: 520px; margin-inline: auto; }
/* SP は引用文がどのみち2行に折り返すので、行ボックスを右 padding に食い込ませる意味がない。
食い込ませたままだと折り返し1行目が枠に寄る（375 でカード02の右余白 4.5px）ため SP では戻す。
行数・カード高さは変わらない（320/375 とも2行・317.4px） */
.recruit-interview__quote { margin-right: 0; }
/* カード幅で効く container query（PC の1カラム帯向け）は SP のカードにも掛かってしまうので打ち消す。
打ち消さないと 632〜767px で写真が 170〜200px まで育ち、情報列より背高になって行間が開く。 */
.recruit-interview__card { --ri-photo: clamp(110px, 32%, 140px); --ri-photo-max: 140px; padding: 16px; border-radius: 10px; column-gap: 12px; row-gap: 12px; }
.recruit-interview__media { grid-row: 2 / span 3; border-radius: 20px; }
/* ボタンはカード幅いっぱい（375 で 311）。広い SP 幅では 400 で頭打ち（法人側 SP の .btn { width:100%; max-width:400px } と同型） */
.recruit-interview__btn { grid-column: 1 / -1; grid-row: 5; max-width: 400px; margin-top: 4px; }
.recruit-interview__tags { gap: 6px; }
}
/* ---------- 07-schedule.css ---------- */
/* ============================================================
07-schedule.css — 採用トップ SCHEDULE「一日の流れ」（Figma 55:1032 / 1046×1133）
------------------------------------------------------------
ルート: 縦積み gap64・padding-right 80 → 内容幅 966（自身に塗りなし。地色 #F0F0F0 は .recruit-contents）
見出し 55:1033（SCHEDULE 16px ＋ 一日の流れ 28px ＋ リード 16px）h99
本体 55:1036（966×970）: 左 text-group 603（padding-right 60 → 543）／ gap23 ／ 右 写真列 340
時点 6 件 55:1038〜1043（各 543×104・最終 130）を縦 gap64。
各時点 = 頭部（丸 17×17 + gap23 + [時刻 24px → gap4 → 白バッジ 24px]）→ gap8 → 説明 16px（左 40 字下げ）
丸は時刻行（24px）の上端から 6px。縦線 1px #EEE306 は最初の丸中心（x8.5 / y+14.5）から最後の丸中心まで
写真列 340×970: padding 20/0・gap40・4 枚が flex:1 → 各 340×202.5・角丸20
リキッド: Figma 1440 の px を上限、768 で約55% を下限とする clamp（実装ブリーフ §3）。
列幅は %（603 : 23 : 340 = 62.42 : 2.381 : 35.197 % of 966）。
写真は aspect-ratio 340/202.5 で比率を固定（トリミング % を歪ませないため）。写真列は本文列の高さいっぱいに伸び、
余りは写真間に配分（space-between）。1440 では Figma の flex:1 配分と同値（gap 40）。
SP（375）カンプは Figma に無い。767px 以下の値はすべて補完値。
============================================================ */
.recruit-schedule {
--recruit-schedule-gap-64: clamp(35px, 4.444vw, 64px); /* 見出し→本体、時点間 */
--recruit-schedule-gap-40: clamp(22px, 2.778vw, 40px); /* 写真間の最小 gap */
--recruit-schedule-pad-20: clamp(11px, 1.389vw, 20px); /* 写真列の上下 padding */
--recruit-schedule-indent: clamp(22px, 2.778vw, 40px); /* 丸 17 + gap 23 = 文字の開始位置 40 */
--recruit-schedule-dot: 17px;
--recruit-schedule-dot-top: calc(var(--r-fs-24) * 0.25); /* 丸ラッパー上余白 6 = 時刻行（24px）の 1/4。時刻の縮小に追従 */
display: flex;
flex-direction: column;
gap: var(--recruit-schedule-gap-64);
padding-right: var(--r-pad-80);
}
/* ---- 見出し 55:1033: [SCHEDULE → gap4 → 一日の流れ] → gap8 → リード ---- */
.recruit-schedule__head { display: flex; flex-direction: column; gap: 8px; }
.recruit-schedule__title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* EN/16: Figtree SemiBold 16 / lh1 / RECRUT main */
.recruit-schedule__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
/* Heading/Large: Zen Kaku Medium 28 / lh1.6 / ls2 */
.recruit-schedule__ja {
font-size: var(--r-fs-28);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.0714em; /* 2px / 28px */
color: var(--color-font-black);
}
/* Body/Small: 16 / 1.6 */
.recruit-schedule__lead { font-size: 16px; line-height: 1.6; color: var(--color-font-black); }
/* ---- 本体 55:1036: 左タイムライン（伸縮）／ gap 23 ／ 右写真列 340 ---- */
.recruit-schedule__body {
display: flex;
align-items: stretch;
gap: 2.381%; /* 23 / 966 */
}
/* text-group 55:1037: padding-right 60（= 6.211% of 966）→ 内容幅 543 */
.recruit-schedule__timeline {
display: flex;
flex-direction: column;
gap: var(--recruit-schedule-gap-64);
flex: 1 1 auto;
min-width: 0;
padding-right: 6.211%;
}
/* schedule インスタンス: 頭部 → gap8 → 説明 */
.recruit-schedule__item {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
}
/* Vector 15: 1px 黄線。各時点の ::before を自分の丸中心から次の時点の丸中心（= 自身の高さ + 時点間 gap）まで縦に引く。
最初の丸中心〜最後の丸中心（1440 で 840）に一致し、説明文の行数が変わっても追従する。線は丸（z-index 1）の下 */
.recruit-schedule__item:not(:last-child)::before {
content: '';
position: absolute;
left: calc(var(--recruit-schedule-dot) / 2 - 0.5px); /* 8px: 丸中心 8.5 に 1px 線の中心を合わせる */
top: calc(var(--recruit-schedule-dot-top) + var(--recruit-schedule-dot) / 2);
height: calc(100% + var(--recruit-schedule-gap-64));
border-left: 1px solid var(--color-yellow-dusty);
pointer-events: none;
}
/* Frame 427319148: 丸（17×29 枠）→ gap23 → 時刻/バッジ。上端揃え */
.recruit-schedule__item-head {
display: flex;
align-items: flex-start;
gap: calc(var(--recruit-schedule-indent) - var(--recruit-schedule-dot));
}
/* Ellipse 4: 17×17 #EEE306。ラッパーの上余白 6 を margin-top で再現 */
.recruit-schedule__dot {
position: relative;
z-index: 1;
display: block;
flex-shrink: 0;
width: var(--recruit-schedule-dot);
height: var(--recruit-schedule-dot);
margin-top: var(--recruit-schedule-dot-top);
border-radius: 50%;
background: var(--color-yellow-dusty);
}
/* Frame 427319155: 時刻（h24）→ gap4 → 白バッジ（h42）。h3 は箱としてだけ使う */
.recruit-schedule__heading {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: 16px;
font-weight: 500;
}
/* 時刻: Figtree SemiBold 24 / lh1 / RECRUT main（ローカル指定・スタイル名なし） */
.recruit-schedule__time {
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-24);
line-height: 1;
color: var(--recruit-blue);
white-space: nowrap;
}
/* Frame 1321318361: 白バッジ #FEFEFE・角丸4・padding 2/8。文字 Zen Kaku Medium 24 / lh1.6 / Navy */
.recruit-schedule__label {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
background: var(--color-bg-white);
font-size: var(--r-fs-24);
line-height: 1.6;
font-weight: 500;
color: var(--color-navy);
white-space: nowrap;
}
/* Frame 427319150: 説明 Body/Small 16/1.6 Gray900・左 40 字下げ（幅 503 で自動折返し。ハード改行なし） */
.recruit-schedule__desc {
padding-left: var(--recruit-schedule-indent);
font-size: 16px;
line-height: 1.6;
color: var(--color-gray-900);
}
/* ---- 写真列 55:1045: 340（35.197%）・padding 20/0・写真間 gap40（最小）。本文列と同じ高さに伸び、余りは写真間へ ---- */
.recruit-schedule__photos {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--recruit-schedule-gap-40);
flex: 0 0 35.197%;
padding: var(--recruit-schedule-pad-20) 0;
}
/* mv-img: 340×202.5・角丸20・overflow hidden。比率固定（flex: none で縮めない＝トリミング % を歪ませない） */
.recruit-schedule__photo {
position: relative;
flex: none;
aspect-ratio: 340 / 202.5;
overflow: hidden;
border-radius: var(--r-radius-20);
background: var(--color-gray-400);
}
/* 写真は Figma の可視範囲だけを枠と同じ比率（680×405 = 表示 340×202.5 の 2 倍）で書き出してあるため、
CSS 側のトリミング % は不要（object-fit: cover が枠比と一致＝無変形）。書き出しの内訳は 07-schedule.md §4-1 の
Figma 実測値（枠1・2 = FILL 中央 / 枠3 = CROP 127.94% 161.07% -2.5% -16.17% / 枠4 = CROP 120.54% 151.75% -2.85% -15.44%）で、
枠4 の exposure +0.17 も画像に焼き込み済み。再書き出しは design/recruit-src/schedule/export-photos-20260917.py。
差し替え時は同スクリプトで枠比 680×405 に書き出す（CSS の変更は不要） */
.recruit-schedule__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
/* ---- 1023 以下: 目次ナビが上段に回り main-contents が左端まで来るため、右余白と同じ左余白を補う
（補完値。共有ラッパー .recruit-contents__main 側で持つことになれば削除） ---- */
@media (max-width: 1179px) {
.recruit-schedule { padding-left: var(--r-pad-80); }
}
/* ---- 767 以下（SP・カンプ無しの補完値）: 1 カラム。タイムライン（線は左）→ 写真 2×2 グリッド
余白 16 / 見出し→本体 32 / 時点間 32 / 字下げ 32（丸 17 + 15）/ 写真間 12 ---- */
@media (max-width: 767px) {
.recruit-schedule {
--recruit-schedule-gap-64: 32px;
--recruit-schedule-indent: 32px;
gap: 32px;
padding: 0 16px;
}
.recruit-schedule__body { flex-direction: column; gap: 32px; }
.recruit-schedule__timeline { padding-right: 0; }
/* max-width 500 は写真 1 枚を (500 − 12) / 2 = 244px で頭打ちにするための上限。
無いと 767px で 1 枚 361.5px（Figma 実寸 340 超）まで育ち、768px の PC 版 240.3px へ
121px 一気に縮む段差になる。244 ≒ 240.3 なのでブレークポイントを跨いでもほぼ連続。
375/414 など実機幅では 500 に届かないのでこの上限は効かない（従来どおり画面幅いっぱい） */
.recruit-schedule__photos {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
flex: none;
max-width: 500px;
padding: 0;
}
.recruit-schedule__photo { border-radius: 12px; }
}
/* ---------- 08-requirements.css ---------- */
/* ============================================================
08 募集要項（REQUIREMENTS） — Figma nPRrygpkMmrkuAdtzdifmi / 55:1050（1046×1165）
------------------------------------------------------------
見出し 55:1051（EN 16px #005EAC + JA 28px, gap 4）
↓ gap 64
本体 55:1052（padding-top 20 / padding-left 120）
├ 写真カード 55:1062: 400×600・角丸20・padding16・絶対配置（本体の左上 = セクション y129）
│ └ バッジ 55:1063: 白・角丸8・padding 2/16・24px Medium
└ 白パネル 55:1053: #FEFEFE・角丸 45 0 0 45（main-contents の右端にフラッシュ）
padding 40/40/80/300（左 300 = 写真の重なり 280 + 20）
└ テーブル 55:1054: 586 幅・7 行（ラベル 180 固定 + 内容 fill）
行 = padding 20/10/20/20 + border-bottom 1px #F0F0F0（最終行も）
リンク・ボタン・動きは無い静的セクション（ホバー仕様の対象外）。
------------------------------------------------------------
リキッド: Figma 1440 の px を上限、768 で約55%を下限とする clamp（px×0.55, px/14.4 vw, px）。
1179px 以下: 写真カードをテーブルの上に通常配置（重ね無し。内容列が細るのを避ける）。
767px 以下: SP カンプ無し → 375 基準の補完値（余白16・写真は上限 400px のまま）。
479px 以下: ラベルと内容を縦積み・写真は正方形（いずれも補完値）。
============================================================ */
.recruit-requirements {
/* --- 流体トークン（セクション固有。共通は recruit.css の --r-*） --- */
--rq-gap-64: clamp(35px, 4.444vw, 64px); /* 見出し → 本体 */
--rq-sp-20: clamp(11px, 1.389vw, 20px); /* 写真上端→パネル上端 / 行 padding 上・下・左 */
--rq-sp-10: clamp(6px, 0.694vw, 10px); /* 行 padding 右 */
--rq-sp-40: clamp(22px, 2.778vw, 40px); /* パネル padding 上・右 */
--rq-panel-left: clamp(66px, 8.333vw, 120px); /* パネル左端 = 写真幅 400 − 重なり 280 */
--rq-panel-pl: clamp(165px, 20.833vw, 300px); /* パネル padding-left = 重なり 280 + 20 */
--rq-photo-w: clamp(220px, 27.778vw, 400px); /* 写真カード幅（高さは aspect-ratio 2:3） */
--rq-label-w: clamp(120px, 12.5vw, 180px); /* ラベル列。下限は 55% の 99 ではなく「待遇・福利厚生」が 15px で折り返さない 120 */
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--rq-gap-64);
width: 100%;
}
/* ---- 見出し 55:1051（122×65 = EN16 + gap4 + JA 44.8） ---- */
.recruit-requirements__head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.recruit-requirements__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
letter-spacing: 0;
color: var(--recruit-blue);
white-space: nowrap;
}
.recruit-requirements__ja {
font-size: var(--r-fs-28);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0714em; /* 2px / 28px */
color: var(--color-font-black);
white-space: nowrap;
}
/* ---- 本体 55:1052: 写真の絶対配置の基準。pt20 でパネルを写真より 20px 下げ、pl120 でパネル左端を写真の内側に ---- */
.recruit-requirements__body {
position: relative;
padding: var(--rq-sp-20) 0 0 var(--rq-panel-left);
}
/* ---- 写真カード 55:1062（400×600・角丸20・padding16・最前面） ---- */
.recruit-requirements__photo {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
width: var(--rq-photo-w);
aspect-ratio: 400 / 600;
margin: 0;
padding: var(--r-gap-16);
border-radius: var(--r-radius-20);
overflow: hidden;
background: var(--color-gray-200);
}
/* 画像フィルは FILL（cover・中央）。Figma のフィル画像（= design/recruit-src/requirements/worker-photo-4032x3024.jpg。
download_assets の rawImages と md5 一致）の中央 2:3（x1008〜3024・全高）を 800×1200 に書き出したもの
＝ Figma の切り出しそのもの。表示 400×600 の 2 倍なので、素材は既に枠の比率どおり＝CSS 側の % クロップは不要（cover のままでよい）。
※ 2026-09-17 に Figma のノード書き出し（400×600 PNG）と照合。引き伸ばし（FV のフィルの描き方）だと差分 67.8 で
cover 中央が 5.5 と決着。トーン補正は無し（ヒストグラムマッチの LUT がほぼ恒等）。
479px 以下の正方形表示では cover が上下を切り、見えるのは素材の中央 800×800（= 表示 400×400 の 2 倍）になる */
.recruit-requirements__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: 50% 50%;
}
/* バッジ 55:1063（286×42 = padding 2/16 + 24px×1.6） */
.recruit-requirements__badge {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px var(--r-gap-16);
border-radius: 8px;
background: var(--color-font-white);
font-size: var(--r-fs-24);
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.0833em; /* 2px / 24px */
color: var(--color-font-black);
white-space: nowrap;
}
/* ---- 白パネル 55:1053（926×1016・左だけ角丸45・右端フラッシュ） ---- */
.recruit-requirements__panel {
position: relative;
z-index: 0;
padding: var(--rq-sp-40) var(--rq-sp-40) var(--r-pad-80) var(--rq-panel-pl);
border-radius: var(--r-radius-45) 0 0 var(--r-radius-45);
background: var(--color-bg-white);
}
/* ---- テーブル 55:1054（586×896）: dl の UA マージンを消す ---- */
.recruit-requirements__table {
margin: 0;
width: 100%;
}
/* 行 Line ×7: padding 20/10/20/20 + 下ボーダー 1px = Figma の行高（pb 21 は内側ストローク込みの表記）。最終行にもボーダーあり */
.recruit-requirements__row {
display: flex;
align-items: flex-start;
padding: var(--rq-sp-20) var(--rq-sp-10) var(--rq-sp-20) var(--rq-sp-20);
border-bottom: 1px solid var(--color-gray-200);
}
/* ラベル列 Time（180 固定・Heading/XS 18px Medium・ls 2px） */
.recruit-requirements__label {
flex: 0 0 var(--rq-label-w);
width: var(--rq-label-w);
font-size: var(--r-fs-18);
font-weight: 500;
line-height: 1.611; /* Figma は 18×1.6=28.8 を 29px に丸めて描画（行高 70/128/…・6行 174 = 29×6）。行の累積ずれ（7行で 4px）を無くすため 29/18 */
letter-spacing: 0.111em; /* 2px / 18px */
color: var(--color-font-black);
}
/* 内容列（fill・Body/Medium 18px Regular）。dd の UA margin-inline-start 40px を消す。
折り返しは Figma と同じ自然折返し（禁則なしの break-word 相当）。数字・英字の長い連続でも 320px ではみ出さないよう anywhere */
.recruit-requirements__content {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: var(--r-fs-18);
font-weight: 400;
line-height: 1.611; /* ラベルと同じ理由で 29/18（Figma の描画行高に合わせる） */
letter-spacing: 0;
color: var(--color-font-black);
overflow-wrap: anywhere;
}
/* ============================================================
本文カラムが 1000px 未満: 写真カードの重ねを解除し、テーブルの上に通常配置（重ね無し）にする。
2026-09-18: 判定をビューポートから本文カラム幅（container main）に変えた。
ビューポート基準だと、目次ナビが横に入った 1180px（本文 812px）で重ねが復活し、
内容列が 263px まで細って住所が「渋/谷」で割れていた。
重ねたままだと目次ナビ（314 + gap 80）に横幅を取られた 1024〜1179px で
内容列が 195〜263px まで細り、住所が番地の途中で折れる（レビュー指摘）。
1180px 以上は Figma どおりの重ねレイアウト。
============================================================ */
@container main (max-width: 999px) {
/* 2026-09-18: 縦積みのときは右余白も左と同じにする。
1179px 以下では他の7セクション（働く魅力・仕事内容・社員インタビュー・一日の流れ・
選考の流れ・FAQ・ENTRY）がすべて左右対称の余白を持っており、
募集要項だけが右端まで抜けて 1 セクションぶんズレて見えていた。
右端フラッシュ＋左だけ角丸は、写真がパネルに重なる PC（1440）の構図あってのものなので、
重ねが解ける幅では他セクションに揃える。 */
.recruit-requirements { padding-right: var(--r-main-inset, var(--r-pad-80)); }
/* 重なりが無いので左だけ角丸にする理由も無い。両側を丸める */
.recruit-requirements__panel { border-radius: var(--r-radius-45); }
.recruit-requirements__body {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--rq-sp-20);
padding: 0;
}
/* 写真カードはテーブルの上に左寄せで置く。
static にすると絶対配置の img の包含ブロックが __body に変わり写真がパネル全体に広がるので relative のまま通常フローに戻す。
2026-09-18: 重ねを解いた状態で 2:3 のままだと 400×600 の縦長が本文の前に立ちはだかり、
カラムが広い幅（600〜1000px）では写真だけが左に取り残されて見えた。
requirements.php 側で 3:2 の横長素材（元画像 4032×3024 から起こしたもの）に差し替え、
帯として全幅に敷く。人物は全身が入る。media との対応は requirements.php のコメント参照。 */
.recruit-requirements__photo {
position: relative;
top: auto;
left: auto;
width: 100%;
aspect-ratio: 3 / 2;
}
/* 写真の重なりが無くなるので左 padding は右と同じ 40 に（補完値） */
.recruit-requirements__panel { align-self: stretch; padding-left: var(--rq-sp-40); }
}
/* ============================================================
1023px 以下: 目次ナビが上に回り main-contents が画面端まで広がるため、左余白をこのセクション側で確保する。
※ .recruit-contents__main には現状 左右の余白が無い。
統合時に main 側で余白を持たせる場合は .recruit-contents__main { --r-main-inset: 0px } で打ち消せる。
============================================================ */
@media (max-width: 1179px) {
.recruit-requirements { padding-left: var(--r-main-inset, var(--r-pad-80)); }
}
/* ============================================================
767px 以下（SP 補完・カンプ無し）: 余白 16。数値はすべて補完値。
写真は 2:3・上限 400px（Figma 実寸）のまま。上限を外すと 480〜767px で
写真だけが 735px まで肥大するため（レビュー指摘）、必ず 400px で頭打ちにする。
============================================================ */
@media (max-width: 767px) {
.recruit-requirements { gap: 32px; padding-inline: var(--r-main-inset, 16px); }
.recruit-requirements__body { gap: 16px; }
/* 2026-09-18: 400px 上限と 2:3 をやめ、縦積みの全幅で共通の 3:2 帯に揃えた（横長素材に差し替え済み）
2026-09-19: 幅を calc(100% - 16px) から 100% に戻した。16px 引いていたのは 400px 上限が
あった頃に右余白を作るための式で、上限を外した時点で前提が消えていた。
引いたままだと写真だけ右端が 16px 手前で終わり、下の白パネルと右端が揃わない
（実測 375px: 写真 343 / パネル 359。768px では 725.3 で一致するので 767→768 で段が付いていた）。 */
.recruit-requirements__photo {
width: 100%;
padding: 12px;
border-radius: 20px;
}
.recruit-requirements__badge { padding: 2px 12px; border-radius: 6px; }
/* 1179px 以下は他セクションと同じ左右対称なので、角丸も両側（24） */
.recruit-requirements__panel { padding: 24px 16px 40px; border-radius: 24px; }
.recruit-requirements__row { padding: 16px 4px; }
}
/* ============================================================
479px 以下（SP 補完・カンプ無し）: 内容列が 190px を割って潰れるのでラベルと内容を縦積みにし、
写真も 2:3 のままだと画面の 6 割を占めるので正方形にする（元画像は中央寄りの切り出しで欠けない）。
480〜767px はラベル横並び・写真 2:3 のままで 768px 以上と地続きにする。
============================================================ */
@media (max-width: 479px) {
.recruit-requirements__row { flex-direction: column; align-items: stretch; gap: 4px; }
.recruit-requirements__label { flex: none; width: auto; }
}
/* ---------- 09-flow.css ---------- */
/* ============================================================
09-flow.css — 採用トップ FLOW「応募から入社までの流れ」（Figma 55:1065 / 1046×610.578）
------------------------------------------------------------
ルート: 縦積み gap64・padding-right 80 → 内容幅 966
見出し 55:1066（FLOW 16px ＋ 和文 28px）h65
タイムライン 55:1067（横4列・列gap48・各列 205.5）h311.578
ノートバー 55:1073（白 #FEFEFE・角丸10・padding 40/60・gap23）h106
リキッド: Figma 1440 の px を上限、768 で約55% を下限とする clamp（実装ブリーフ §3）。
列数: セクション自身の内容幅で決める（container query）。800px超=4列 / 800px以下=2列 / 767px以下=1列（縦タイムライン）。
※ ビューポート幅ではなくセクション幅で切る理由: 4列に必要な幅は「main-contents の残り幅」で決まり、それは
左の目次ナビ（他担当 03-nav.css・幅 = 250 + --r-gap-32×2）の寸法に左右される。ビューポート境界だと
ナビが数px変わるだけで判定がずれるため、セクション自身を container にして自動追従させる。
（2026-09-17 レビュー指摘で、1400px のビューポート境界 → 内容幅 800px の container query に変更）
※ 800px の根拠: 4列の列幅 = (内容幅 − 列gap×3) / 4。内容幅 800 で列幅 ≒ 169px。
実測（Playwright）— 1280 → 内容幅 830.9（4列・列幅175.7）/ 1260 → 814.0（4列）/ 1240 → 797.1（2列）/ 1180 → 746.5（2列）。
つまり 1024〜1240 が2列、1260 以上が4列。1280・1366 という最も一般的なノートPC幅でカンプどおりの
「黄線で4ステップを一直線に結ぶ」4列タイムラインを保つことを優先した。
※ その代償として、4列の狭い帯では CTA-small が列幅を最大 24px ほど超えて列gap側へはみ出す（.recruit-flow__btn 参照）。
SP（375）カンプは Figma に無い。767px 以下の値はすべて補完値。
============================================================ */
.recruit-flow {
/* 列数の判定基準（冒頭コメント参照）。セクションの内容box幅 = タイムラインが使える幅 */
container-type: inline-size;
--recruit-flow-col-gap: clamp(26px, 3.333vw, 48px); /* Figma 列 gap 48 */
--recruit-flow-row-gap: clamp(26px, 3.333vw, 48px); /* 2列時の行 gap（補完値。列 gap と同値） */
display: flex;
flex-direction: column;
gap: clamp(35px, 4.444vw, 64px);
padding-right: var(--r-pad-80);
}
/* ---- 見出し 55:1066（gap4。FLOW = EN/16、和文 = Heading/Large 28/1.6/ls2） ---- */
.recruit-flow__title { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.recruit-flow__en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
color: var(--recruit-blue);
}
.recruit-flow__ja {
font-size: var(--r-fs-28);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.0714em; /* 2px / 28px */
color: var(--color-font-black);
}
/* ---- タイムライン 55:1067: 4列グリッド（各列 flex 1 = (966 − 48×3) / 4 = 205.5） ---- */
.recruit-flow__steps {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: var(--recruit-flow-row-gap) var(--recruit-flow-col-gap);
}
/* schedule インスタンス: 縦積み gap8（見出しブロック121 → 説明文 → CTA） */
.recruit-flow__step {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
/* ドットを結ぶ 1px 黄線（Vector 15 55:1072・y 14.42）。
各列の ::before を「自列のドット中心（x8.5）→ 次列のドット中心」まで伸ばし、行内の最終列には出さない。
線の両端はドット（z-index 1）の下に隠れる */
.recruit-flow__step:not(:last-child)::before {
content: '';
position: absolute;
left: 8px;
top: 14px;
width: calc(100% + var(--recruit-flow-col-gap));
height: 0;
border-top: 1px solid var(--color-yellow-dusty);
pointer-events: none;
}
/* Frame 427319148: ドット（17×29 枠）→ gap16 → ラベル群 */
.recruit-flow__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-gap-16); }
/* Ellipse 4: 17×17 #EEE306。上下6pxの余白付き枠（17×29）を margin で再現 */
.recruit-flow__dot {
position: relative;
z-index: 1;
display: block;
width: 17px;
height: 17px;
margin: 6px 0;
border-radius: 50%;
background: var(--color-yellow-dusty);
flex-shrink: 0;
}
/* Frame 1321318330: STEP番号行（h30）→ gap4 → 白チップ（hug 幅） */
.recruit-flow__label { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* Frame 1321318322: 「STEP」（16px・下線）と番号（30px）を下端揃え・gap4 */
.recruit-flow__no {
display: flex;
align-items: flex-end;
gap: 4px;
font-family: var(--font-en);
font-weight: 600;
line-height: 1;
color: var(--recruit-blue);
}
/* Frame 1321318323: h20 = 文字16 + padding-bottom 3 + 下線1（装飾。リンクではない） */
.recruit-flow__no-en { font-size: 16px; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.recruit-flow__no-num { font-size: var(--r-fs-30); }
/* Frame 1321318362: 白チップ #FEFEFE・角丸4・padding 2/8・min-width 74（= 3.083em @24px）。
文字 24px/1.6 Medium Navy・中央揃え。内容が広ければ伸びる（書類選考 = 112） */
.recruit-flow__name {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.083em;
padding: 2px 8px;
border-radius: 4px;
background: var(--color-bg-white);
font-size: var(--r-fs-24);
line-height: 1.6;
font-weight: 500;
color: var(--color-navy);
text-align: center;
}
/* 説明文: Body/Small 16/1.6 Gray900（幅 205.5 で自動折返し。ハード改行なし） */
.recruit-flow__desc { font-size: 16px; line-height: 1.6; color: var(--color-gray-900); }
/* CTA-small「エントリーフォーム」（I55:1068;555:15961）: 205.5×44.578・#005EAC・角丸29.617・padding 6/8/6/24
共通 .btn--small を採用色に。ラベル 14px Bold、円 32.58・矢印 #005EAC は共通部品の値をそのまま使う。
gap は space-between の下限（Figma のラベル→アイコン間は 14.92）。
min-width: max-content はラベルを絶対に欠けさせないための下限。CTA の最小幅 = 左pad clamp(16,1.667vw,24)
+ ラベル126 + gap8 + 円32.58 + 右pad8 ≒ 190〜198px。4列の狭い帯（内容幅 800〜930）では列幅がこれを下回り、
pill が列gap側へはみ出す（実測: 1280 で +20.2px / 列gap 42.7、1260 で +23.6px / 列gap 42.0 → 最悪でも
次の列の左端まで 18px 残る）。CTA は STEP01 の最下段にしかなく、その高さでは 02〜04 列は空のため、
はみ出しても他の内容には重ならない。左padを詰める／円を縮める案は Figma 比率（24 : 205.5）と
共通部品 .btn--small の寸法を崩すため採らなかった（判断の詳細は 09-flow.impl.md「レビュー対応」）。 */
.recruit-flow__btn {
width: 100%;
min-width: max-content;
gap: 8px;
padding: 6px 8px 6px clamp(16px, 1.667vw, 24px);
background: var(--recruit-blue);
color: var(--color-font-white);
}
/* 1439px 以下では列幅（1280で176px）が CTA の内容幅（約196px）より狭くなり、
max-content の下限のままだと列の外へ 6〜20px はみ出す。
space-between なのでラベルと円が寄るだけで、文字は欠けない（1440 は影響なし） */
@media (max-width: 1439px) {
.recruit-flow__cta .btn, .recruit-flow .btn--small { min-width: 0; }
}
/* 列が狭い帯（901〜925 / 1244〜1399）でボタンの中身が入りきらず、
flex アイテムの丸が潰れて縦線になったり枠外へ出たりしていた。丸は縮ませない。 */
.recruit-flow__btn .btn__circle { flex: none; }
.recruit-flow__btn .btn__label { font-size: 14px; }
.recruit-flow__btn .btn__arrow { color: var(--recruit-blue); }
/* ---- ノートバー 55:1073: 白 #FEFEFE・角丸10・padding 40/60・横並び gap23・上下中央 ---- */
.recruit-flow__note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px clamp(13px, 1.597vw, 23px);
padding: clamp(22px, 2.778vw, 40px) clamp(33px, 4.167vw, 60px);
border-radius: 10px;
background: var(--color-bg-white);
font-size: 16px;
line-height: 1.6;
color: var(--color-font-black);
}
.recruit-flow__note-title { font-weight: 700; color: var(--recruit-blue); white-space: nowrap; }
/* ---- 内容幅 900px 未満: 2列（01・02 / 03・04）。線は各行の先頭列（奇数番）だけ
（ビューポートではなくセクション幅で判定。根拠は冒頭コメント）
2026-09-18: しきい値を 800 → 899 に上げた（内容ボックス基準）。800 のままだと内容幅 870〜1008px で
4列になり、列が 169〜198px まで細って CTA の黄丸が枠外へ 5〜18px はみ出していた。
4列にするのは 1列 190px 以上を確保できる内容幅（≒900px）からにする。1440 は内容 966px で Figma どおり 4列×205.5px。 ---- */
@container (max-width: 899px) {
.recruit-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.recruit-flow__step:not(:last-child)::before { content: none; }
.recruit-flow__step:nth-child(odd):not(:last-child)::before { content: ''; }
/* 行の右端（偶数番）で線が唐突に途切れ、02 から 03 へ続いている感じが出ないので、
行末からは列の右端まで線を伸ばし、端を透明にフェードさせて「次の行へ続く」ことを示す。
border では階調を付けられないので、この一本だけ背景のグラデーションで描く。 */
.recruit-flow__step:nth-child(even):not(:last-child)::before {
content: '';
width: calc(100% - 8px);
height: 1px;
border-top: 0;
background: linear-gradient(90deg, var(--color-yellow-dusty) 45%, transparent 100%);
}
}
/* ---- 1023 以下: 目次ナビが上段に回り main-contents が左端まで来るため、右余白と同じ左余白を補う
（補完値。共有ラッパー .recruit-contents__main 側で持つことになれば削除） ---- */
@media (max-width: 1179px) {
.recruit-flow { padding-left: var(--r-pad-80); }
}
/* ---- 767 以下（SP・カンプ無しの補完値）: 1列の縦タイムライン
ドットを STEP 行の左に置き（法人TOPの SP FLOW と同じ構造）、説明文・CTA はドット幅17 + 16 = 33px 字下げ。
線は自ドット中心から次ステップのドット中心まで縦に引く ---- */
@media (max-width: 767px) {
.recruit-flow {
--recruit-flow-row-gap: 32px;
gap: 32px;
padding: 0 16px;
}
.recruit-flow__steps { grid-template-columns: minmax(0, 1fr); }
.recruit-flow__step {
display: grid;
grid-template-columns: 17px minmax(0, 1fr);
column-gap: 16px;
row-gap: 8px;
}
/* ドットとラベル群を step のグリッドに直接参加させる */
.recruit-flow__head { display: contents; }
.recruit-flow__dot { grid-column: 1; grid-row: 1; }
.recruit-flow__label { grid-column: 2; grid-row: 1; }
.recruit-flow__desc,
.recruit-flow__btn { grid-column: 2; }
.recruit-flow__btn { width: 100%; max-width: 400px; padding-left: 24px; }
/* 1列なので線は縦。2列用の指定（横線・行末のフェード）をすべて打ち消す。
偶数番のセレクタも並べておくこと: :nth-child(even):not(:last-child) は
:not(:last-child) より詳細度が高く、書く順番だけでは上書きできない（2026-09-18 の不具合）。 */
.recruit-flow__step:not(:last-child)::before,
.recruit-flow__step:nth-child(odd):not(:last-child)::before,
.recruit-flow__step:nth-child(even):not(:last-child)::before {
content: '';
left: 8px;
top: 14.5px;
bottom: calc(-1 * (var(--recruit-flow-row-gap) + 14.5px));
width: 0;
height: auto;
border-top: 0;
border-left: 1px solid var(--color-yellow-dusty);
background: none;
}
.recruit-flow__note { padding: 20px 16px; border-radius: 10px; }
}
/* ---------- 10-faq.css ---------- */
/* ============================================================
10-faq.css — よくある質問（Figma 55:1076・レイヤー名「FLOW」/ 部品 QA v2 55:1142）
------------------------------------------------------------
section 1046 = 白カード 966 + 右余白 80
白カード: #FEFEFE・角丸10・padding 40/40/80 → 内側 886
見出し: EN 16 Figtree600 lh1 #005EAC + gap4 + 和文 28 Zen Kaku500 lh1.6 ls2 → 65
gap 64 → Q&A 群（縦 gap 40）
1項目: Q行 63（バッジ63 + gap16 + 質問 + アイコン枠40右端）→ 15 + 線1 = 79
開: + 16 + A行（バッジ63 + gap16 + 本文807）+ 39 + 線1（55:1082 の一般化）= 415
1440 で 40 + 65 + 64 + 931 + 80 = 1180
※ Figma の区切線は高さ0のベクター（stroke 1px が y=79 をまたぐ）。実装は 1px border を
その直上の行に置く（padding 15 + border 1 = 16、padding 39 + border 1 = 40）ので
各要素の y は Figma と同じ、線だけ 0.5px 上。
※ リキッド: 1440 の値を上限に clamp(round(px×0.55), px/14.4 vw, px)。共通トークン優先。
※ SP（767以下）カンプは無い。375 基準の補完値（コメントで明記）。
※ 動き: 高さ遷移 0.3s（grid-template-rows 0fr→1fr）のみ（ブリーフ §5）。アイコン +/− は即時切替。
ホバー・フォーカスは Figma に定義なし → サイト共通（文字 opacity 1→0.6・黄フォーカスリング）。
============================================================ */
.recruit-faq { padding-right: var(--r-pad-80); }
.recruit-faq__inner {
--faq-pad: clamp(22px, 2.778vw, 40px); /* 40 */
--faq-badge: clamp(44px, 4.375vw, 63px); /* 63。下限は SP(40px) 以上に置く（768〜1005 で 44 固定）*/
--faq-icon: clamp(26px, 2.778vw, 40px); /* 40。同上（SP 24px より小さくしない）*/
--faq-bar: clamp(12px, 1.111vw, 16px); /* 16。同上（SP 12px より小さくしない）*/
display: flex;
flex-direction: column;
gap: clamp(35px, 4.444vw, 64px);
padding: var(--faq-pad) var(--faq-pad) var(--r-pad-80);
border-radius: 10px;
background: var(--color-bg-white);
color: var(--color-font-black);
}
/* ---- 見出し（55:1079: EN + 和文、gap 4） ---- */
.recruit-faq__head { display: flex; flex-direction: column; gap: 4px; }
.recruit-faq__en { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; color: var(--recruit-blue); }
.recruit-faq__title { font-size: var(--r-fs-28); line-height: 1.6; font-weight: 500; letter-spacing: 0.0714em; white-space: nowrap; } /* 2px/28px */
/* ---- Q&A 群（55:1080: 縦 gap 40） ---- */
.recruit-faq__list { display: flex; flex-direction: column; gap: clamp(24px, 2.778vw, 40px); }
/* ---- Q 行（QA v2 > Q 886×63）+ 直下の区切線（Vector 27） ---- */
.recruit-faq__q {
font: inherit;
padding-bottom: clamp(11px, 1.042vw, 15px); /* 16 − 線1。下限は SP(11px) と同値 */
border-bottom: 1px solid var(--recruit-blue-light);
}
/* Q 行全体がトグルボタン（Figma にボタン定義は無い。行 886×63 をクリック領域にする） */
.recruit-faq__trigger {
display: flex;
align-items: center;
gap: var(--r-gap-16);
width: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* Q / A バッジ（63×63 正円・EN/30 Figtree600・中央揃え） */
.recruit-faq__badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--faq-badge);
height: var(--faq-badge);
border-radius: 999px;
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-30);
line-height: 1;
}
.recruit-faq__badge--q { background: var(--recruit-blue-light); color: var(--recruit-blue); }
.recruit-faq__badge--a { background: var(--recruit-blue); color: var(--color-bg-white); }
/* 質問文（Heading/Small 20/1.6/ls2）。Figma は nowrap だが長文・狭幅で欠けないよう折返し可（1440 では1行で同じ見た目） */
.recruit-faq__question {
flex: 1 1 auto;
min-width: 0;
font-size: var(--r-fs-20);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.1em;
transition: opacity 0.3s ease;
}
/* +/− アイコン枠 40×40（Q 行右端・垂直中央）。棒は 16×2 #005EAC を枠中央に。開いている時は縦棒を消して「−」 */
.recruit-faq__icon { position: relative; flex-shrink: 0; width: var(--faq-icon); height: var(--faq-icon); }
.recruit-faq__icon::before,
.recruit-faq__icon::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: var(--recruit-blue);
transform: translate(-50%, -50%);
}
.recruit-faq__icon::before { width: var(--faq-bar); height: 2px; }
/* 縦棒。開くと 90deg 回って横棒にぴったり重なり、+ から − へ変わる。
長さ・太さが ::before と同値なので、回りきると見た目は「−」そのものになる。
2026-09-18: それまでは display:none で瞬時に消えており、切り替わりが唐突だった。
時間とイージングは回答パネルの高さ遷移と同じ 0.3s / --ease-slide に合わせている。 */
.recruit-faq__icon::after {
width: 2px;
height: var(--faq-bar);
transition: transform 0.3s var(--ease-slide);
}
.recruit-faq__trigger[aria-expanded="true"] .recruit-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* ---- 回答パネル（QA v2 > A）: hidden 切替 + 高さ遷移 0.3s（grid-template-rows 0fr→1fr） ---- */
.recruit-faq__panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s var(--ease-slide);
}
.recruit-faq__item.is-open .recruit-faq__panel { grid-template-rows: 1fr; }
.recruit-faq__panel-inner { min-height: 0; overflow: hidden; }
/* A 行: 上 16（線との間隔）/ 下 39 + 線1（開いた項目の下の線 55:1082 を「回答の下 40 に線」と一般化） */
.recruit-faq__a {
display: flex;
align-items: flex-start;
gap: var(--r-gap-16);
padding-top: var(--r-gap-16);
padding-bottom: clamp(23px, 2.708vw, 39px); /* 40 − 線1。下限は SP(23px) と同値 */
border-bottom: 1px solid var(--recruit-blue-light);
}
/* 回答の列 807 幅（残り幅いっぱい）。導線を持つ項目だけ本文の下にリンクが付き、
持たない項目は本文のみ = 従来と同じ配置（Figma 実測 x=119 / 807 を維持） */
.recruit-faq__body {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--r-gap-16);
}
/* 回答本文。明示改行は
、それ以外は自動折返し（1440 で 10 行 = 320） */
.recruit-faq__answer {
font-size: var(--r-fs-20);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.1em;
}
/* 本文で触れた社員インタビューへの導線（Figma に無い。2026-09-18 追加）。
サイト既存のテキストリンク .access__map-link（私たちについて/アクセス）に合わせた:
inline-flex・gap 10px・下線・ホバーは opacity 0.6 を 0.3s ease。
アイコンだけ先頭ではなく末尾の小矢印にしている（別ページへ送る導線のため。
FV の PICK UP カードが同じ interview-01 へ同じ矢印で送っているのに合わせた）。
色は採用ページの基調色。--color-navy は採用ページでほぼ使っていないため。 */
.recruit-faq__link {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--r-fs-18);
line-height: 1.6;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--recruit-blue);
text-decoration: underline;
}
.recruit-faq__link-arrow { width: 8.24px; height: 8.47px; flex-shrink: 0; color: currentColor; }
/* 349〜365px では「女性社員のインタビューを読」＋「む」と1文字だけ落ちていた。
字間 0.1em（14文字で約19px）を詰めれば 244px の枠に 1 行で収まる。 */
@media (max-width: 420px) {
.recruit-faq__link { letter-spacing: 0; }
}
/* .access__map-link はフォーカスリングを定義していないが、CLAUDE.md の規約に従いここでは付ける */
.recruit-faq__link:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 2px; border-radius: 4px; }
/* ---- フォーカス / ホバー（Figma に定義なし → サイト共通: 文字 opacity 1→0.6、黄リング。リングは消さない） ---- */
.recruit-faq__trigger:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 2px; border-radius: 4px; }
.recruit-faq__trigger:focus-visible .recruit-faq__question { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) {
.recruit-faq__trigger:hover .recruit-faq__question { opacity: 0.6; }
.recruit-faq__link { transition: opacity 0.3s ease; }
.recruit-faq__link:hover { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.recruit-faq__panel, .recruit-faq__question, .recruit-faq__link { transition: none; }
.recruit-faq__icon::after { transition: none; }
}
/* ---- 1023 以下: 2カラムが解けて main が左端フラッシュになるため、右余白と同じ左余白を付ける ---- */
@media (max-width: 1179px) {
.recruit-faq { padding-left: var(--r-pad-80); }
}
/* ---- 767 以下（SP・カンプ無し・375 基準の補完値）: 余白16、カード padding 24/16/40、バッジ40、アイコン24、文字16 ---- */
@media (max-width: 767px) {
.recruit-faq { padding: 0 16px; }
.recruit-faq__inner {
--faq-pad: 16px;
--faq-badge: 40px;
--faq-icon: 24px;
--faq-bar: 12px;
gap: 32px;
padding: 24px var(--faq-pad) 40px;
}
.recruit-faq__list { gap: 24px; }
.recruit-faq__trigger, .recruit-faq__a { gap: 12px; }
.recruit-faq__badge { font-size: 20px; }
.recruit-faq__question, .recruit-faq__answer { font-size: 16px; }
.recruit-faq__q { padding-bottom: 11px; } /* 12 − 線1 */
.recruit-faq__a { padding-top: 12px; padding-bottom: 23px; } /* 24 − 線1 */
}
/* ---------- 11-entry.css ---------- */
/* ============================================================
11 ENTRY CTA-group（Figma 55:1087 CTA-group 1440×773 / 仕様 docs/recruit-spec/11-entry.md）
------------------------------------------------------------
外枠: padding 64 40・bg #F0F0F0
パネル 55:1088: 1360×645・#005EAC・角丸45・overflow clip（＝スライダーの窓）
左 WhyUs 55:1090: 幅710・padding 80 64 – 40。Title/S（ENTRY 120/エントリー 32）→ 109.57 → コピー24 → 16 → CTA-White 387×79（右寄せ）
ボタン下端 = パネル上端から 520（Figma は高さ440固定＋space-between。ここでは margin-top:auto で再現）
背景 55:1089「JOIN US」: 180px/0.8/−2px・白20%・left 40 / 描画下端はパネル下端の 8.44 上
右 55:1097: 列幅305×2・列gap 20・枠右padding 20・タイル 305×365 r20・縦gap 24（ピッチ 389）
左列(下方向) タイル上端 = パネル上端から −443.5 → 位相 −1.140103 ピッチ
右列(上方向) タイル上端 = パネル上端から −218.5 → 位相 −0.561697 ピッチ
リキッド: Figma 1440 の px を上限、768 で約55% を下限とする clamp（例 40 → clamp(22px, 2.778vw, 40px)）。
パネル高は 1360:645 を「最小高さ」として追従（::before の % パディング）。中身（Title/S〜ボタン）が
その高さを超える幅では パネルが伸びる → ボタンとパネル左下の角丸が切れない。タイルは枠幅から % で決まる。
動き（実装ブリーフ §5）: 等速 linear・1周 約30s・無限ループ・列ごとに4枚を2回並べて translateY(±50%)・
ホバー停止なし・prefers-reduced-motion は静止（カンプの配置）。JS 不要。
SP（767px以下）のカンプは無い。数値はすべて補完値（CSS コメントに明記）。
============================================================ */
.recruit-entry {
--r-entry-pad-x: clamp(22px, 2.778vw, 40px); /* 外枠 左右 40 */
--r-entry-pad-y: clamp(35px, 4.444vw, 64px); /* 外枠 上下 64 */
--r-entry-col-gap: clamp(11px, 1.389vw, 20px); /* 列間 20 */
--r-entry-pad-r: clamp(11px, 1.389vw, 20px); /* スライダー枠の右 padding 20 */
--r-entry-tile-gap: var(--r-gap-24); /* タイル縦 gap 24 */
padding: var(--r-entry-pad-y) var(--r-entry-pad-x);
background: var(--color-gray-200);
}
/* パネル 55:1088。overflow hidden + 角丸45 でスライダーをクリップ（グラデーション・マスクは無い） */
.recruit-entry__panel {
position: relative;
display: flex;
align-items: stretch;
isolation: isolate; /* 角丸クリップと transform 子要素の重なり順を閉じる（Safari 対策も兼ねる） */
overflow: hidden;
width: 100%;
/* 2026-09-19: 1360 → 1600。FV・本文・インタビュー詳細を 1600 上限で伸ばすようにしたので、
ここだけ 1360 で止まると最後のブロックだけ一回り小さく見える。
上限 1600 は写真タイルの素材（610×730）に合わせた値で、1.18 倍に広げても 1.70 倍を保つ。
外枠の #F0F0F0 は従来どおり画面端まで。 */
max-width: 1600px;
margin-inline: auto;
border-radius: var(--r-radius-45);
background: var(--recruit-blue);
color: var(--color-font-white);
}
/* パネル高 645/1360 = 47.4265% は「最小高さ」。aspect-ratio で固定すると、リキッドで縮んだパネル高より
中身（Title/S + コピー + ボタン + 下 padding）の方が高くなる 768〜1439px でボタンと左下の角丸が切れる。
幅0のフレックスアイテムの % パディング（= フレックスコンテナの内容幅基準）で下限だけを与え、
超える幅ではパネルが伸びるようにする。中身が下限に満たない幅（1440〜）は従来どおり 645 のまま。
→ どの幅でも「ボタン下端 + 下padding = パネル下端」（= Figma の space-between の見え方）になる。 */
.recruit-entry__panel::before {
content: "";
flex: none;
width: 0;
padding-top: 47.4265%;
}
/* ---- 左カラム WhyUs 55:1090（710 = 49.306vw。中身 606） ---- */
.recruit-entry__body {
position: relative;
z-index: 1; /* JOIN US（z0）の上、スライダー（z2）の下 */
display: flex;
flex-direction: column;
align-items: flex-start;
flex: 0 0 auto;
width: clamp(390px, 49.306vw, 836px); /* 上限は 710 → 836（パネル 1600 に対する比率 52.2% を 1440 と同じに保つ）。1440 では 49.306vw=710 のままで不変 */
/* 上80 / 右64 / 下125（= ボタン下端520 → パネル下端645） / 左40 */
padding: var(--r-pad-80) clamp(35px, 4.444vw, 64px) clamp(69px, 8.681vw, 125px) var(--r-entry-pad-x);
}
/* Title/S（55:1092）: EN/120 + Heading/XL。法人 .cta-card__en と同じ数値・同じ scaleY(.97) 処理 */
.recruit-entry__title {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.recruit-entry__en {
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-120);
line-height: 1;
letter-spacing: -0.0167em; /* −2px / 120px */
white-space: nowrap;
/* Figma: margin-bottom −8 に加え、行箱120 と描画高116.435（scaleY .97）の差 3.565 を吸収 → (8 + 3.565) / 120 */
margin-bottom: -0.0964em;
transform: scaleY(0.97);
transform-origin: top left;
}
.recruit-entry__ja {
font-size: var(--r-fs-32);
line-height: 1.6;
font-weight: 500;
}
/* コピー＋ボタン（55:1093 縦gap16）。Figma の space-between（高さ440固定）を margin-top:auto で再現。
padding-top は Title/S との最小間隔（1440 では auto 余りが 109.57 になるよう 108 に留める） */
.recruit-entry__group {
display: flex;
flex-direction: column;
gap: var(--r-gap-16);
width: 100%;
margin-top: auto;
padding-top: clamp(32px, 7.5vw, 108px);
}
.recruit-entry__text {
font-size: var(--r-fs-24);
line-height: 1.6;
}
/* 55:1095 items-end → ボタンを行の右端へ */
.recruit-entry__btn-wrap {
display: flex;
justify-content: flex-end;
width: 100%;
}
/* CTA-White 387×79（hover-animation.html の .btn--white 幅387）。.btn の min-width 287 / gap 62 を解除して
狭い幅では行幅いっぱいまで縮む（space-between なので見た目は同じ） */
.recruit-entry__btn {
width: min(387px, 100%);
min-width: 0;
gap: 12px;
}
.recruit-entry__btn .btn__circle { flex-shrink: 0; }
/* ---- 背景文字「JOIN US」55:1089（最背面）。描画下端 = パネル下端 − 8.44。
scaleY(.97)・origin 上左 なので行箱の下端は描画より 144×0.03 = 4.32 下 → bottom 4.12 ---- */
.recruit-entry__join {
position: absolute;
z-index: 0;
left: var(--r-entry-pad-x);
bottom: clamp(2px, 0.286vw, 4.12px);
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-180);
line-height: 0.8;
letter-spacing: -0.0111em; /* −2px / 180px */
white-space: nowrap;
color: rgba(255, 255, 255, 0.2);
transform: scaleY(0.97);
transform-origin: top left;
pointer-events: none;
}
/* ---- 写真2列スライダー 55:1097（枠 650 = パネル − 710。枠自体はクリップしない） ---- */
.recruit-entry__slider {
position: relative;
z-index: 2; /* 左列がJOIN USの「S」右端に被る（カンプどおり） */
flex: 1 1 auto;
min-width: 0;
align-self: stretch;
}
/* 列: 幅 = (枠幅 − 列gap − 右padding) / 2（1440 で 305）。位相は自身の高さ（= 8 ピッチ）に対する % */
.recruit-entry__col {
position: absolute;
top: 0;
width: calc((100% - var(--r-entry-col-gap) - var(--r-entry-pad-r)) / 2);
}
.recruit-entry__col--down { left: 0; transform: translateY(-14.2513%); } /* −1.140103 / 8 */
.recruit-entry__col--up { right: var(--r-entry-pad-r); transform: translateY(-7.0212%); } /* −0.561697 / 8 */
/* トラック: 4枚×2 を縦に並べる。末尾にも gap を置いて高さ = 8 ピッチ → translateY(−50%) がちょうど 1 周 */
.recruit-entry__track {
display: flex;
flex-direction: column;
gap: var(--r-entry-tile-gap);
padding-bottom: var(--r-entry-tile-gap);
will-change: transform;
}
/* 静止時（reduced-motion / アニメ開始前）の配置 = カンプ。下方向の列は 2 周目の先頭がカンプ位置 */
.recruit-entry__col--down .recruit-entry__track { transform: translateY(-50%); }
.recruit-entry__tile {
aspect-ratio: 305 / 365;
overflow: hidden;
border-radius: var(--r-radius-20);
background: var(--color-gray-400); /* 55:1099 等のプレースホルダ色。画像読み込み前の下地 */
}
/* 画像はタイル比 305:365 でクロップ済み（仕様 §4-3 の % は書き出し時に適用。11-entry.impl.md 参照） */
.recruit-entry__tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---- 動き: 等速・約30s/周・無限。右列は上へ（0 → −50%）、左列は下へ（−50% → 0） ---- */
@keyframes recruit-entry-up {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@keyframes recruit-entry-down {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
.recruit-entry__col--up .recruit-entry__track { animation: recruit-entry-up 30s linear infinite; }
.recruit-entry__col--down .recruit-entry__track { animation: recruit-entry-down 30s linear infinite; }
/* 静止（詳細度をアニメ指定と揃える）。位置は上の静止配置 = カンプの見え方 */
@media (prefers-reduced-motion: reduce) {
.recruit-entry__col--up .recruit-entry__track,
.recruit-entry__col--down .recruit-entry__track { animation: none; will-change: auto; }
}
/* ============================================================
767px 以下（SP 補完。SP カンプは無い → 375 基準の補完値）
2026-09-18 ユーザー承認: 見出し → 写真スライダー帯 → コピー＋応募ボタン。
写真は全幅・高さ 64vw 上限360。動きは同じ・タイルは小さく。
写真2列はパネル幅に追従（固定幅の中央寄せにしない）。
============================================================ */
@media (max-width: 767px) {
.recruit-entry {
--r-entry-col-gap: 12px;
--r-entry-pad-r: 0px;
--r-entry-tile-gap: 12px;
/* 2026-09-18: 上限 360px だと 646px 以上でタイル（列幅×365/305）が帯を超え、
どの写真も上下が切れて1枚も全体が見えなくなる。767px のタイル 433px が収まる 460px まで上げる。 */
--r-entry-band-h: clamp(200px, 64vw, 460px);
padding: 40px 16px;
}
.recruit-entry__panel {
flex-direction: column;
border-radius: 24px;
}
/* 縦積みでは最小高さのスペーサーは不要（縦方向の % パディングは幅基準なので巨大な空白になる） */
.recruit-entry__panel::before { content: none; }
/* 意味を持たないラッパーのみ透過し、見出しとコピーをパネルの子として配置。
PC の HTML / 左右カラムは変更しない。写真は aria-hidden の装飾なので読み上げ順も維持。 */
.recruit-entry__body { display: contents; }
.recruit-entry__title {
padding: 32px 16px 24px;
}
.recruit-entry__group {
position: relative;
z-index: 1;
order: 2;
margin-top: 0;
/* ボタン下に JOIN US のスペースを確保。JOIN US は --r-fs-180（12.5vw）で伸びるので
56px 固定だと 545px 以上で足りず、透かし文字の上がボタンに切り取られていた。 */
padding: 24px 16px clamp(56px, 11vw, 100px);
}
/* 387 幅は入らないので行幅いっぱい。左 padding と gap を詰めて 320px でも収める */
.recruit-entry__btn { width: min(400px, 100%); padding-left: 24px; gap: 8px; } /* 全幅だと 767px で 735px まで伸び、ラベルと丸が離れる */
/* JOIN US はパネル最下部。応募ボタン・本文とは重ねない。 */
/* 2026-09-18: ボタン下端と JOIN US の行箱が 545px 以上で重なり、透かし文字の上が
ボタンに横一直線で切り取られていた。行箱ぶん下げて重なりを解く。 */
.recruit-entry__join {
left: 16px;
bottom: 2px;
}
/* 帯自体でクリップする（PC はパネルの clip だけで足りるが、縦積みでは列のはみ出しが本文に被るため） */
.recruit-entry__slider {
order: 1;
flex: none;
align-self: auto;
width: 100%;
height: var(--r-entry-band-h);
overflow: hidden;
}
/* 2026-09-18: 最大200pxを撤廃。画面幅が広がっても左右に空白を作らず、2列で帯を満たす。 */
.recruit-entry__col { width: calc((100% - var(--r-entry-col-gap)) / 2); }
.recruit-entry__col--down { left: 0; right: auto; }
.recruit-entry__col--up { left: auto; right: 0; }
.recruit-entry__tile { border-radius: 12px; }
}
/* 359px 以下: ボタン文字を 16px に（「エントリーフォーム」9字 + 円55 が 320px の行幅 256 に収まるように） */
@media (max-width: 359px) {
.recruit-entry__btn .btn__label { font-size: 16px; }
}
/* ---------- 12-interview-page.css ---------- */
/* ============================================================
12-interview-page.css — 社員インタビュー詳細
Figma: nPRrygpkMmrkuAdtzdifmi / 55:2112（INTERVIEW 01・1440×4428）／ 55:2220（INTERVIEW 02・1440×4339）
ルート: main.recruit-interview-page（page-recruit-interview.php）
構成: ヒーロー 55:2115 ＋ 帯文字 55:2167 ／ RECRUIT-Contents 55:2138 ／ 前後ナビ 55:2168 ／ CTA-group は entry.php（11-entry.css）
※ SP（375）カンプは Figma に無い。767px 以下の値はすべて補完値（PC 構造の縦積み）。
※ リキッド: Figma 1440 の px を上限に clamp(px×0.55, px/14.4 vw, px)。写真は % 幅 ＋ aspect-ratio、
クロップは仕様書 §4 の % 値を ![]()
で渡す（object-fit: cover に頼らない）。
============================================================ */
.recruit-interview-page {
--ri-blue: var(--recruit-blue); /* #005EAC RECRUT/main */
--ri-blue-light: var(--recruit-blue-light); /* #B2CEE6 RECRUT/right */
--ri-pad-100: clamp(55px, 6.944vw, 100px);
--ri-pad-156: clamp(86px, 10.833vw, 156px);
--ri-pad-160: clamp(88px, 11.111vw, 160px);
--ri-gap-120: clamp(66px, 8.333vw, 120px);
--ri-gap-64: clamp(35px, 4.444vw, 64px);
--ri-pad-60: clamp(33px, 4.167vw, 60px);
--ri-pad-40: clamp(22px, 2.778vw, 40px);
--ri-radius-10: 10px; /* 同上（767→768 で 10→6px の逆転） */
--ri-circle: clamp(44px, 4.375vw, 63px); /* 63。下限は SP(40px) 以上に置く（768 で縮まないように）。トップの --faq-badge と同形 */
/* 帯文字 55:2167 / 55:2275 の位置。ヒーロー下端（page y 700）から上に何 px か。
A = 32（abs y 668）／ B = 37（abs y 663）。B は下の --interview-02 で上書き */
--ri-band-offset: clamp(18px, 2.222vw, 32px);
/* 前後ナビ「INTERVIEW 0X」の色。Figma 55:2190 / 55:2191 は #FEFEFE だが、
背景 #F8F8F9 上でコントラスト比 1.05:1 となり実測で判読不能だった。
2026-09-18: 読めないという指摘を受けて採用基調色に変更（WCAG AA を満たす）。
Figma の配色ミスと判断している。戻す場合は var(--color-bg-white) に。 */
--ri-pager-label: var(--ri-blue);
background: var(--color-bg-white); /* ヒーロー地色 #FEFEFE（角丸 45 の外側にも見える） */
color: var(--color-font-black);
}
/* B（55:2220）の帯文字は abs y=663（A は 668）。5px の差は Figma 実測どおり（impl.md「要判断」に記録） */
.recruit-interview-page--interview-02 {
--ri-band-offset: clamp(20px, 2.569vw, 37px);
}
/* CTA-group 55:2199（A）/ 55:2307（B）の外枠は #F8F8F9。採用トップ 55:1087 の #F0F0F0 とは異なるため、
共有部品 entry.php / 11-entry.css は触らず、このページだけ背景を上書きして前後ナビとの段差を消す */
.recruit-interview-page .recruit-entry {
background: var(--color-bg-gray);
}
/* ---- 写真枠（共通）: 枠は % 幅 ＋ aspect-ratio、中の img は仕様書 §4 の % クロップ ---- */
.recruit-interview-photo {
position: relative;
overflow: hidden;
border-radius: var(--r-radius-20);
background: var(--color-gray-400);
}
.recruit-interview-photo__img {
position: absolute;
max-width: none;
width: var(--crop-w, 100%);
height: var(--crop-h, 100%);
left: var(--crop-x, 0);
top: var(--crop-y, 0);
}
/* ============================================================
ヒーロー（55:2115 MESSAGE 1440×600）
padding 100 / 80 / 156 / 80。内側 1280 = 主写真 475 ＋ gap 64 ＋ テキスト列 741
============================================================ */
.recruit-interview-hero {
position: relative; /* 帯文字の基準 */
z-index: 1; /* 帯文字を後続の灰パネルより前に描く */
padding: var(--ri-pad-100) var(--r-pad-80) var(--ri-pad-156);
background: var(--color-bg-white);
}
.recruit-interview-hero__inner {
display: flex;
align-items: flex-start;
gap: 5%; /* 64 / 1280 */
/* 2026-09-19: 1280 → 1600。他の下層ページと採用トップの FV に合わせ、1440 超でも
画面幅なりに伸ばす（1440 以下は 1280 のままで不変）。上限 1600 は本文写真の素材に合わせた値で、
1.25 倍まで広げても 1.60 倍を保てる（素材 930×697 に対し表示 575px）。 */
max-width: 1600px;
margin-inline: auto;
}
/* パンくず（カンプには無い。他の下層ページに合わせて 2026-09-19 に追加）。
本文と同じ幅で中央寄せし、ヒーロー下端の帯文字と重ならないよう上に余白を取る */
.recruit-interview-hero__breadcrumb {
width: 100%;
max-width: 1600px;
margin: var(--r-gap-24) auto 0;
}
/* 55:2120 主写真 475×344（37.109% of 1280） */
.recruit-interview-hero__photo--main { flex: 0 0 37.109%; width: 37.109%; aspect-ratio: 475 / 344; }
/* 55:2121 テキスト列 741（flex 1）: 見出しブロック → gap 32 → プロフィール */
.recruit-interview-hero__text {
display: flex;
flex-direction: column;
gap: var(--r-gap-32);
flex: 1 1 auto;
min-width: 0;
color: var(--ri-blue);
}
.recruit-interview-hero__head { display: flex; flex-direction: column; gap: 8px; }
/* 55:2123 INTERVIEW（16px・下線 1px・pb 3）＋ 01（30px）を下揃え。行高 30 */
.recruit-interview-hero__label { display: flex; align-items: flex-end; gap: 4px; height: var(--r-fs-30); }
.recruit-interview-hero__label-en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
.recruit-interview-hero__num { font-family: var(--font-en); font-weight: 600; font-size: var(--r-fs-30); line-height: 1; }
/* 55:2127 キャッチ: Heading/XL 32 / 1.6 / Medium / #005EAC */
.recruit-interview-hero__catch { font-size: var(--r-fs-32); line-height: 1.6; font-weight: 500; }
/* 55:2128 プロフィール 741×140（名前 45 ＋ gap 8 ＋ 3 行 87）。副写真の絶対配置の基準 */
.recruit-interview-hero__profile {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
color: var(--color-font-black);
}
/* 55:2131 Heading/Large 28 / 1.6 / ls 2px */
.recruit-interview-hero__name { font-size: var(--r-fs-28); line-height: 1.6; font-weight: 500; letter-spacing: 0.0714em; }
/* 55:2133-2135 Body/Medium 18 / 1.6 / #444
副写真は同じ枠に絶対配置されている（下の --sub）。本文は全幅に流れるため、
写真の幅ぶんを右に空けておかないと 768〜1099px で文字が写真の下に潜って読めなくなる
（文字は --r-fs-18 の下限 15px で止まるのに、枠は vw で縮み続けるため）。
写真と同じ 41.296% ＋ 間隔を padding-right で確保する。1440 では文字が
この幅に収まっているので、Figma どおりの見た目は変わらない。 */
.recruit-interview-hero__facts {
font-size: var(--r-fs-18);
line-height: 1.6;
color: var(--color-gray-900);
padding-right: calc(41.296% + var(--r-gap-16));
}
/* 55:2137 副写真 306×252: プロフィール枠の右端・上 80（306 / 741 = 41.296%） */
.recruit-interview-hero__photo--sub {
position: absolute;
right: 0;
top: var(--r-pad-80);
width: 41.296%;
aspect-ratio: 306 / 252;
}
/* 55:2167（A）/ 55:2275（B）帯文字: ヒーロー下端の --ri-band-offset 上（A = page y 668 / B = 663）から灰パネルの上に重なる。
中身は marquee.php（message と共通部品） */
.recruit-interview-hero__band {
position: absolute;
left: 0;
right: 0;
top: calc(100% - var(--ri-band-offset));
overflow: hidden;
pointer-events: none;
}
/* 55:2167 は x=0 から始まる（メインページ 55:934 の -531px とは位相が違う）。静止位置と reduced-motion の停止位置を Figma に合わせる */
.recruit-interview-hero__band .recruit-marquee { --recruit-marquee-offset: 0em; }
/* ============================================================
RECRUIT-Contents（55:2138 1440×2468 / 2379）
bg #F8F8F9・上角丸 45・pt 160 pb 80・縦 gap 120
============================================================ */
.recruit-interview-body {
display: flex;
flex-direction: column;
gap: var(--ri-gap-120);
padding: var(--ri-pad-160) 0 var(--r-pad-80);
background: var(--color-bg-gray);
border-radius: var(--r-radius-45) var(--r-radius-45) 0 0;
}
/* ---- 1) 個別の写真＋コメント（55:2139 main-contents・px 120・内側 1200×567）---- */
.recruit-interview-body__story { padding-inline: var(--ri-gap-120); }
.recruit-interview-story { display: flex; flex-direction: column; max-width: 1500px; margin-inline: auto; } /* 1200 → 1500（ヒーロー 1600 と同じ 1.25 倍） */
.recruit-interview-story__row { display: flex; align-items: flex-start; }
/* 上段 55:2141: 本文 680（56.667%）＋ gap 64（5.333%）＋ 写真 460×349（38.333%）。合計 1204 で Figma どおり右へ 4px はみ出す。
次段と 34px 重ねる（写真 349 − 本文 320 の差を詰める margin-bottom −34） */
.recruit-interview-story__row--1 { gap: 5%; margin-bottom: clamp(-34px, -2.361vw, -19px); } /* 56.667+38.333+5=100。5.333%だと4pxはみ出す */
.recruit-interview-story__row--1 .recruit-interview-story__text { flex: 0 0 56.667%; width: 56.667%; }
.recruit-interview-story__row--1 .recruit-interview-story__photo { flex: 0 0 38.333%; width: 38.333%; aspect-ratio: 460 / 349; }
/* 下段 55:2145: 写真 455×252（37.917%）と 本文 600（50%・padding-top 80）を両端寄せ */
.recruit-interview-story__row--2 { justify-content: space-between; }
.recruit-interview-story__row--2 .recruit-interview-story__photo { flex: 0 0 37.917%; width: 37.917%; aspect-ratio: 455 / 252; }
.recruit-interview-story__row--2 .recruit-interview-story__text { flex: 0 0 50%; width: 50%; padding-top: var(--r-pad-80); }
/* Body/Large‐200% 20 / 2.0。Figma の改行・行末スペース・先頭スペース（02 の下段）をそのまま出すため pre-wrap */
.recruit-interview-story__text { font-size: var(--r-fs-20); line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ---- 2) 3) 白カード（point-contents 1280・#FEFEFE・r10）---- */
.recruit-interview-body__card { padding-inline: var(--r-pad-80); }
.recruit-interview-body__card-inner {
display: flex;
flex-direction: column;
max-width: 1600px;
margin-inline: auto;
padding: var(--ri-pad-40) var(--ri-pad-60);
border-radius: var(--ri-radius-10);
background: var(--color-bg-white);
}
/* 55:2151 Q&A カード: padding 40 60 80 60・見出しと QAgroup の gap 64 */
.recruit-interview-body__card-inner--qa { gap: var(--ri-gap-64); padding-bottom: var(--r-pad-80); }
/* 55:2164 メッセージカード: padding 40 60・gap 23 */
.recruit-interview-body__card-inner--message { gap: clamp(13px, 1.597vw, 23px); }
/* 見出し部品 546:14741 / 14742（EN 16 #005EAC ＋ JA 28 Medium ls2、gap 4 → 高さ 65） */
.recruit-interview-body__title { display: flex; flex-direction: column; gap: 4px; }
.recruit-interview-body__title-en { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; color: var(--ri-blue); }
.recruit-interview-body__title-ja { font-size: var(--r-fs-28); line-height: 1.6; font-weight: 500; letter-spacing: 0.0714em; color: var(--color-font-black); }
/* 55:2166 メッセージ本文 20 / 2.0 */
.recruit-interview-body__message-text { font-size: var(--r-fs-20); line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ---- QA 部品（55:2155: Q 行 63 ＋ gap 24 ＋ A 行、QA 間は gap 40 ＋ 区切り線 1px #B2CEE6 ＋ gap 40）---- */
.recruit-interview-qa { margin: 0; }
.recruit-interview-qa__item { display: flex; flex-direction: column; gap: var(--r-gap-24); }
/* 区切り線は前後 40px（線の 1px 分を padding 側から引いて QA の間隔を 80 に保つ） */
.recruit-interview-qa__item + .recruit-interview-qa__item {
margin-top: var(--ri-pad-40);
padding-top: calc(var(--ri-pad-40) - 1px);
border-top: 1px solid var(--ri-blue-light);
}
.recruit-interview-qa__q,
.recruit-interview-qa__a { display: flex; gap: var(--r-gap-16); margin: 0; }
.recruit-interview-qa__q { align-items: center; }
.recruit-interview-qa__a { align-items: flex-start; }
/* 丸 63（padding 12 ＋ 文字ボックス 39）: Q = #B2CEE6 地に #005EAC、A = #005EAC 地に #FEFEFE。EN/30 */
.recruit-interview-qa__mark {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--ri-circle);
height: var(--ri-circle);
border-radius: 50%;
font-family: var(--font-en);
font-weight: 600;
font-size: var(--r-fs-30);
line-height: 1;
}
.recruit-interview-qa__mark--q { background: var(--ri-blue-light); color: var(--ri-blue); }
.recruit-interview-qa__mark--a { background: var(--ri-blue); color: var(--color-bg-white); }
/* Heading/Small 20 / 1.6 / Medium / ls 2px */
.recruit-interview-qa__q-text,
.recruit-interview-qa__a-text { font-size: var(--r-fs-20); line-height: 1.6; font-weight: 500; letter-spacing: 0.1em; }
.recruit-interview-qa__a-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* ============================================================
前後ナビ（55:2168 1440×157）
px 80・カード 485×157（37.89% of 1280）×2 を両端寄せ・border 1px #005EAC・r20・padding 32 24
============================================================ */
.recruit-interview-pager { padding: 0 var(--r-pad-80); background: var(--color-bg-gray); }
.recruit-interview-pager__inner {
display: flex;
align-items: stretch;
justify-content: space-between;
gap: var(--r-gap-24);
max-width: 1600px;
margin-inline: auto;
}
/* カード全体が 1 リンク */
.recruit-interview-pager__card {
display: flex;
flex-direction: column;
/* 2026-09-18: 37.89% 固定 ＋ 1023px 以下だけ等分、という切替をやめた。
1023→1024 で 446→345px と、広げたのに 101px 縮む逆転が起きていたため。
残り幅を等分しつつ Figma 1440 の 485px で頭打ちにすると、全幅で連続して伸びる。 */
flex: 1 1 0;
max-width: 485px;
min-height: clamp(86px, 10.903vw, 157px);
padding: var(--r-gap-32) var(--r-gap-24);
border: 1px solid var(--ri-blue);
border-radius: var(--r-radius-20);
color: var(--ri-blue);
}
/* 内側 435×91: 見出し行（47）を上、行（14 / 30）を下に */
.recruit-interview-pager__body {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
flex: 1 1 auto;
transition: opacity 0.25s ease;
}
.recruit-interview-pager__head { display: flex; flex-direction: column; gap: 2px; }
.recruit-interview-pager__en { font-family: var(--font-en); font-weight: 600; font-size: 16px; line-height: 1; }
/* Heading/XS 18 / 1.6 / Medium / ls 2px */
.recruit-interview-pager__ja { font-size: var(--r-fs-18); line-height: 1.6; font-weight: 500; letter-spacing: 0.111em; }
.recruit-interview-pager__row { display: flex; align-items: center; }
/* 左カード下段 55:2175: ←矢印（左端）と UI/tag 14 の補足（右端） */
.recruit-interview-pager__row--back { justify-content: space-between; gap: 16px; color: var(--color-font-black); }
.recruit-interview-pager__note { font-size: 14px; line-height: 1.4; text-align: right; text-wrap: balance; } /* 937〜968px で最終行が「れ」1文字だけになるのを避ける */ /* 2026-09-18: line-height:1 だと2行になる幅で行矩形が 6px 重なっていた */
/* 矢印 8.24×8.47（svg-defs #icon-arrow-recruit）。左カードは左右反転（Figma: rotate 180 + scaleY −1） */
.recruit-interview-pager__arrow { width: 14px; height: 14.4px; flex-shrink: 0; color: var(--color-gray-900); transition: transform 0.4s var(--ease-bounce); } /* 2026-09-18: 8.24px は小さすぎるとの指摘。比率はそのままに拡大 */
.recruit-interview-pager__arrow--back { color: var(--color-font-black); transform: scaleX(-1); }
/* 右カード下段 55:2186: INTERVIEW 0X（123×30）＋ gap 16 ＋ 名前・入社年・→矢印（flex 1） */
.recruit-interview-pager__row--other { gap: var(--r-gap-16); color: var(--color-gray-900); }
.recruit-interview-pager__label { display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0; height: var(--r-fs-30); color: var(--ri-pager-label); }
.recruit-interview-pager__label-en {
font-family: var(--font-en);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
.recruit-interview-pager__num { font-family: var(--font-en); font-weight: 600; font-size: var(--r-fs-30); line-height: 1; }
.recruit-interview-pager__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; min-width: 0; }
.recruit-interview-pager__person { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--r-gap-16); }
.recruit-interview-pager__name { font-size: var(--r-fs-18); line-height: 1.6; font-weight: 500; letter-spacing: 0.111em; white-space: nowrap; }
.recruit-interview-pager__year { font-size: 14px; line-height: 1; white-space: nowrap; }
/* ---- ホバー / フォーカス（docs/spec/hover-animation.html のカード標準: 文字 1→0.6・矢印スライド。写真は無い）
カンプに個別指定は無いのでサイト共通の演出のみ。フォーカスリングは消さない ---- */
.recruit-interview-pager__card:focus-visible { outline: 2px solid var(--color-yellow-dusty); outline-offset: 3px; }
.recruit-interview-pager__card:focus-visible .recruit-interview-pager__body { opacity: 0.6; }
.recruit-interview-pager__card:focus-visible .recruit-interview-pager__arrow { transform: translateX(4px); }
.recruit-interview-pager__card:focus-visible .recruit-interview-pager__arrow--back { transform: scaleX(-1) translateX(4px); }
@media (hover: hover) and (pointer: fine) {
.recruit-interview-pager__card:hover .recruit-interview-pager__body { opacity: 0.6; }
.recruit-interview-pager__card:hover .recruit-interview-pager__arrow { transform: translateX(4px); }
.recruit-interview-pager__card:hover .recruit-interview-pager__arrow--back { transform: scaleX(-1) translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
.recruit-interview-pager__body,
.recruit-interview-pager__arrow { transition: none; }
}
/* ============================================================
768–1179（タブレット・カンプ無し）: PC 構造のまま clamp で縮む。破綻しやすい 2 点だけ補正
============================================================ */
@media (max-width: 1179px) {
/* 上段の本文（01 は 8 行）が縮んだ写真より長くなり −34 の重ねで次段の写真と衝突する（実測: 1024 で本文 288 > 写真 248）ため、
負マージンをやめて通常の間隔に。1180 以上は写真の方が高い（1180: 286 > 229） */
.recruit-interview-story__row--1 { margin-bottom: var(--r-gap-24); }
}
/* ============================================================
767 以下（SP・カンプ無し・375 基準の補完値）
ヒーロー: 見出し → 主写真（全幅）→ 名前・プロフィール → 副写真（右寄せ 70%）の縦積み
本文: 文と写真を縦積み（写真は全幅）／ カードは padding 24 16 ／ 前後ナビは 1 列
============================================================ */
@media (max-width: 767px) {
.recruit-interview-hero { padding: 32px 16px 40px; }
/* align-items は PC の flex-start を必ず戻す。column 方向の flex-start は交差軸を fit-content にするため、
見出し・プロフィール・副写真が本文幅より狭く縮んでしまう（副写真の右寄せ 70% が効かなくなる） */
.recruit-interview-hero__inner { flex-direction: column; align-items: stretch; gap: 16px; }
/* テキスト列を解体して、見出し・主写真・プロフィールを同じ縦並びに */
.recruit-interview-hero__text { display: contents; }
.recruit-interview-hero__head { order: 0; color: var(--ri-blue); }
.recruit-interview-hero__photo--main { order: 1; flex: none; width: 100%; }
.recruit-interview-hero__profile { order: 2; margin-top: 8px; }
/* 副写真を通常フローへ。static にすると中の絶対配置 img の基準が外れて枠外にはみ出す（横スクロールの原因）ので relative のまま */
.recruit-interview-hero__photo--sub { position: relative; top: auto; right: auto; width: 100%; margin: 16px 0 0; } /* 2026-09-18: 70%・右寄せだと直上の全幅写真に対して位置が中途半端なので幅を揃えた */
.recruit-interview-hero__catch { font-size: 22px; }
.recruit-interview-hero__name { font-size: 20px; }
/* SP は副写真が通常フローに落ちるので、PC 用に空けていた写真ぶんの右 padding は不要。
残したままだと文字が使える幅が 320px で 131px、767px で 316px も削られる（2026-09-18 の入れ忘れ）。 */
.recruit-interview-hero__facts { font-size: 15px; padding-right: 0; }
.recruit-interview-body { gap: 48px; padding: 56px 0 40px; border-radius: 24px 24px 0 0; }
.recruit-interview-body__story { padding-inline: 16px; }
.recruit-interview-story__row { flex-direction: column; gap: 16px; }
/* 2行目は PC では「写真→文」だが、SP でそのまま縦積みすると
1行目の写真と続いて写真が2枚並んでしまう。2行目だけ順序を返して
文→写真→文→写真のリズムにする。 */
.recruit-interview-story__row--2 { flex-direction: column-reverse; }
.recruit-interview-story__row--1 { margin-bottom: 32px; }
.recruit-interview-story__row--1 .recruit-interview-story__text,
.recruit-interview-story__row--1 .recruit-interview-story__photo,
.recruit-interview-story__row--2 .recruit-interview-story__photo,
.recruit-interview-story__row--2 .recruit-interview-story__text { flex: none; width: 100%; }
.recruit-interview-story__row--2 .recruit-interview-story__text { padding-top: 0; }
.recruit-interview-story__text { font-size: 16px; line-height: 1.8; }
.recruit-interview-body__card { padding-inline: 16px; }
.recruit-interview-body__card-inner { padding: 24px 16px; border-radius: 10px; }
.recruit-interview-body__card-inner--qa { gap: 32px; padding-bottom: 32px; }
.recruit-interview-body__card-inner--message { gap: 16px; }
.recruit-interview-body__title-ja { font-size: 20px; }
.recruit-interview-body__message-text { font-size: 16px; line-height: 1.8; }
.recruit-interview-qa__item { gap: 12px; }
.recruit-interview-qa__item + .recruit-interview-qa__item { margin-top: 24px; padding-top: 23px; }
.recruit-interview-qa__q,
.recruit-interview-qa__a { gap: 12px; }
.recruit-interview-qa__mark { width: 40px; height: 40px; font-size: 20px; }
.recruit-interview-qa__q-text,
.recruit-interview-qa__a-text { font-size: 16px; letter-spacing: 0.05em; }
.recruit-interview-photo { border-radius: 20px; }
.recruit-interview-pager { padding: 0 16px; }
.recruit-interview-pager__inner { flex-direction: column; gap: 16px; }
.recruit-interview-pager__card { flex: none; width: 100%; min-height: 0; padding: 20px 16px; border-radius: 20px; }
.recruit-interview-pager__body { gap: 16px; }
/* 320px級では「INTERVIEW 0X」とプロフィールが1行に収まらず枠をはみ出すため、
折り返しを許し flex アイテムの既定 min-width:auto を解除する（カンプ無しの補完） */
.recruit-interview-pager__row--other { flex-wrap: wrap; }
.recruit-interview-pager__meta { min-width: 0; flex-wrap: wrap; }
.recruit-interview-pager__person { min-width: 0; }
/* 2026-09-18: SP だけ 30px に上書きしていたのを削除。
767→768 で 30→22 と縮む逆転が起きており、同じページのヒーロー（__num）も
採用トップの一覧（.recruit-interview__num）も SP から一貫して --r-fs-30 のため。 */
}