/* =========================================================
   recruit.css — Employment / Recruit Production Runtime v1
   正本: pt07-employment-layout-refined-v4.html（Yu Decision 2026-07-16）
   統合元: pt07-employment.css（base）＋ pt07-employment-layout-refined-v1.css（Refined VL）の2枚のみ。
           v2 / v3 CSS は取り込まない（100% MESSAGE 専用 Override・v4 で原本復元により撤去済み）。
   スコープ: 全ルールを .recruit 配下へ限定（.section / .en-label / .card / .cta 等の汎用 class が
            common.css・他ページへ波及しないため）。cascade 順は base → v1（v1 が後勝ち）で Mock と一致。
   RULE-01/03/04: 面・DOM・interaction を増減しない忠実 Runtime 化。Business/UX/Visual 改善は Polish Program。
   ========================================================= */

/* =========================================================
   A) base — pt07-employment.css（原本ページスタイル）
   ========================================================= */
.recruit a { color: var(--blue-600); text-decoration: none; }

.recruit .narrow { max-width: 880px; }
.recruit .en-label { font-family: var(--font-en); font-weight: 700; color: var(--blue-500); letter-spacing: .1em; font-size: 14px; }
.recruit .btn--white { background: #fff; color: var(--navy-900); }
.recruit .btn--primary { color: var(--white); }  /* 通常時も白文字。specificity 0,2,0 で広域 .recruit a(0,1,1) に勝ち、青on青の同化を解消。背景(blue-600)/hover/focus は不変 */

.recruit .section { padding: 80px 0; }
.recruit .section--gray { background: var(--gray-50); }
.recruit .section--navy { background: var(--navy-900); color: #fff; }
.recruit .sec-head { margin-bottom: 40px; }
.recruit .sec-head h2 { font-size: 30px; font-weight: 700; line-height: 1.4; margin-top: 4px; }
.recruit .section--navy .en-label { color: var(--blue-400); }
.recruit .lead-lg { font-size: 18px; color: var(--gray-700); }
.recruit .message blockquote { font-size: 19px; line-height: 2; font-weight: 500; color: var(--navy-900); border-left: 3px solid var(--blue-500); padding-left: 20px; margin: 0 0 16px; }
.recruit .quote-small { color: var(--text-muted); font-size: 14px; margin-top: 10px; }
.recruit .grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.recruit .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .recruit .grid3, .recruit .grid2 { grid-template-columns: 1fr; } }
.recruit .card { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.recruit .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.recruit .card .num { font-family: var(--font-en); font-weight: 800; font-size: 22px; color: var(--blue-500); }
.recruit .card h3 { font-size: 18px; color: var(--navy-900); margin: 6px 0 8px; }
.recruit .card p { color: var(--gray-700); font-size: 15px; }
.recruit .cul { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 24px; }
.recruit .cul h3 { font-size: 17px; color: #fff; margin-bottom: 6px; }
.recruit .cul p { color: #b9c9de; font-size: 14px; }
.recruit .envphoto { position: relative; aspect-ratio: 16/10; background: var(--gray-100); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.recruit .envphoto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* jobs */
.recruit .job { display: flex; justify-content: space-between; align-items: center; gap: 20px; background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 24px 28px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.recruit .job h3 { font-size: 20px; color: var(--navy-900); }
.recruit .job .loc { font-family: var(--font-en); font-weight: 700; color: var(--blue-600); font-size: 14px; }
.recruit .job .meta { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
@media (max-width: 640px) { .recruit .job { flex-direction: column; align-items: flex-start; } }
/* flow */
.recruit .flow { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; counter-reset: step; }
@media (max-width: 700px) { .recruit .flow { grid-template-columns: 1fr; } }
.recruit .flow .step { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); position: relative; }
.recruit .flow .step .n { font-family: var(--font-en); font-weight: 800; font-size: 15px; color: #fff; background: var(--navy-800); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.recruit .flow .step h3 { margin: 12px 0 6px; color: var(--navy-900); font-size: 17px; }
.recruit .flow .step p { color: var(--gray-700); font-size: 14px; }
/* faq */
.recruit .faq__item { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.recruit .faq__item h3 { font-size: 16px; color: var(--navy-900); margin-bottom: 6px; }
.recruit .faq__item h3::before { content: "Q. "; font-family: var(--font-en); color: var(--blue-500); font-weight: 800; }
.recruit .faq__item p { color: var(--gray-700); font-size: 15px; }
.recruit .tag-tbc { display: inline-block; background: #fff7e6; border: 1px solid #ffd98a; color: #8a6d00; font-size: 11px; padding: 1px 8px; border-radius: 999px; margin-left: 6px; }
.recruit .tbc { color: var(--text-muted); font-size: 13px; }
.recruit .cta { background: radial-gradient(ellipse at top right, rgba(12,127,217,.3), transparent 55%), var(--navy-900); color: #fff; border-radius: var(--radius-lg); padding: 48px; text-align: center; }
.recruit .cta h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.recruit .cta p { color: #cfe0f2; margin-bottom: 24px; }
.recruit .cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 560px) { .recruit .cta__btns .btn { width: 100%; } }

/* =========================================================
   B) Refined VL — pt07-employment-layout-refined-v1.css（base の後に適用・後勝ち）
   TOP v2 / PT-04 v5 と同一 Visual Language（radius:0 角ばり + Editorial Canvas Rhythm）。
   radius 変数は :root ではなく .recruit へスコープ（global 非波及）。
   ========================================================= */
.recruit { --radius-sm: 0; --radius-md: 0; --radius-lg: 0; }

/* Editorial tempo：会社ページ v5 と同じ 120/76 */
.recruit .section { padding: 120px 0; }
@media (max-width: 768px) { .recruit .section { padding: 76px 0; } }

/* squared button */
.recruit .btn { border-radius: 0; letter-spacing: 0.06em; }

/* 見出しブロック：tracked EN ラベル + 大きな見出し + hairline bar */
.recruit .sec-head { margin-bottom: 52px; }
.recruit .en-label { letter-spacing: 0.24em; font-size: 12px; text-transform: uppercase; font-weight: 700; }
.recruit .sec-head h2 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.5; letter-spacing: 0.04em; }
.recruit .sec-head h2::after { content: ""; display: block; width: 44px; height: 2px; background: var(--blue-600); margin-top: 22px; }
.recruit .section--navy .sec-head h2::after { background: var(--blue-400); }

/* HERO：lhero は共通 base（common.css）へ統合（LHero Pattern 1 Consolidation v1）。
   padding/H1/lead の override は廃止し base 回帰。eyebrow のみ一般 `.recruit .en-label`
   （セクション見出し用・不変）が base を source-order で上書きするため、lhero スコープで base 値へ一致させる。 */
.recruit .lhero .en-label { letter-spacing: 0.1em; font-size: 14px; color: var(--blue-400); text-transform: none; }

/* 2. MESSAGE — v1 の CV-03 Split Override。v4 は原本 .message 構造へ復元済みのため
   以下 .rc-message__* は v4 の DOM に一切マッチせず不活性（Mock v4 と同一挙動）。
   統合元 v1 を選択編集せず忠実に取り込むため、非マッチのまま保持する。 */
.recruit .rc-message__split { display: grid; grid-template-columns: 46% 54%; align-items: stretch; background: var(--gray-50); }
.recruit .rc-message__media { position: relative; min-height: 480px; background: var(--gray-200) repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(13,43,78,0.03) 14px, rgba(13,43,78,0.03) 28px); overflow: hidden; }
.recruit .rc-message__media::after { content: "画像（DUMMY・働く人／現場・公開前に追加予定）"; position: absolute; left: 20px; bottom: 16px; font-size: 12px; letter-spacing: 0.04em; color: var(--gray-500); }
.recruit .rc-message__panel { display: flex; align-items: center; background: var(--white); padding-inline: clamp(48px, 5vw, 80px); }
.recruit .rc-message__inner { max-width: 580px; padding-block: clamp(56px, 6vw, 88px); }
.recruit .rc-message__inner blockquote { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.95; font-weight: 500; color: var(--navy-900); letter-spacing: 0.02em; border-left: 3px solid var(--blue-500); padding-left: 22px; margin: 0 0 22px; }
.recruit .rc-message__inner p { color: var(--gray-700); margin: 0 0 8px; }
.recruit .rc-message__inner .quote-small { color: var(--text-muted); font-size: 14px; margin-top: 14px; }
@media (max-width: 900px) {
  .recruit .rc-message__split { grid-template-columns: 1fr; }
  .recruit .rc-message__media { min-height: 260px; }
  .recruit .rc-message__panel { padding-inline: 0; }
  .recruit .rc-message__inner { max-width: none; padding: 44px 24px 48px; }
}

/* 3. WHY WORK HERE — boxless(hairline) grid */
.recruit .rc-why .grid3 { gap: 48px 40px; }
.recruit .rc-why .card { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 28px 0 0; }
.recruit .rc-why .card:hover { transform: none; box-shadow: none; }
.recruit .rc-why .card .num { font-size: 26px; }
.recruit .rc-why .card h3 { font-size: 19px; margin: 12px 0 10px; }

/* 4. OUR CULTURE — 紺面上の boxless(hairline) grid */
.recruit .rc-culture .grid3 { gap: 48px 40px; }
.recruit .rc-culture .cul { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,0.18); border-radius: 0; padding: 28px 0 0; }
.recruit .rc-culture .cul h3 { font-size: 18px; margin-bottom: 10px; }

/* 5. ENVIRONMENT — S-06 Split Feature（大面＋補助面） */
.recruit .rc-env__feature { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.recruit .rc-env .envphoto { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 3; min-height: 360px; }
.recruit .rc-env__feature > div:last-child { align-self: center; }
@media (max-width: 900px) {
  .recruit .rc-env__feature { grid-template-columns: 1fr; gap: 24px; }
  .recruit .rc-env .envphoto { aspect-ratio: 16 / 10; min-height: 220px; }
}

/* 6. JOBS — CV-02 Full-Width BG + Contained */
.recruit .rc-jobs { background: var(--gray-100); }
.recruit .rc-jobs .container::before { content: ""; display: block; width: 100%; height: 2px; background: var(--navy-900); margin-bottom: 44px; }
.recruit .rc-jobs .job { background: transparent; border: 0; border-top: 1px solid var(--gray-300); border-radius: 0; box-shadow: none; padding: 26px 0; margin-bottom: 0; }
.recruit .rc-jobs .job:last-of-type { border-bottom: 1px solid var(--gray-300); }
.recruit .rc-jobs .tbc { margin-top: 16px; }

/* 7. VOICES — 編集的な引用（箱なし・青の細罫） */
.recruit .rc-voices .lead-lg { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.9; font-weight: 500; color: var(--navy-900); letter-spacing: 0.02em; border-left: 3px solid var(--blue-500); padding-left: 22px; max-width: 46ch; }
.recruit .rc-voices .lead-lg + p { margin-top: 18px; }

/* 8. FLOW — boxless 番号 editorial */
.recruit .rc-flow .flow { gap: 40px; }
.recruit .rc-flow .flow .step { background: transparent; border: 0; border-top: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 26px 0 0; }
.recruit .rc-flow .flow .step .n { border-radius: 0; }

/* 9. FAQ — hairline editorial */
.recruit .rc-faq .faq__item { background: transparent; border: 0; border-bottom: 1px solid var(--gray-200); border-radius: 0; box-shadow: none; padding: 24px 0; margin-bottom: 0; }
.recruit .rc-faq .faq__item:first-of-type { border-top: 1px solid var(--gray-200); }

/* 10. 終盤 CTA — 角ばりで VL 統一 */
.recruit .cta { border-radius: 0; }
.recruit .cta__btns .btn { border-radius: 0; }