/**
 * 採用情報（/recruit）— Figma MF_Web Recruitment
 */

.recruit-page__eyebrow {
  margin: 0;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.25em;
}

/* ----- PageHero（DSC_7124 相当 · 377.5px） ----- */
.page-hero--recruit .page-hero__overlay-v {
  background: linear-gradient(
    0deg,
    rgba(13, 13, 26, 0.7),
    rgba(0, 0, 0, 0) 50%,
    rgba(13, 13, 26, 0.2)
  );
}

.page-hero--recruit .page-hero__overlay-h {
  background: linear-gradient(
    90deg,
    rgba(13, 13, 26, 0.4),
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0)
  );
}

.page-hero--recruit .page-hero__bottom-rule {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(237, 187, 5, 0.5) 50%,
    transparent
  );
}

.page-hero--recruit .page-hero__media-img--recruit {
  inset: auto;
  top: clamp(-10rem, -28vw, -14.2rem);
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(28rem, 85vw, 58.4rem);
  max-width: none;
  object-fit: cover;
  object-position: center center; /* [r-hero] React準拠（旧: 継承で center 22% になっていた） */
}

@media (max-width: 1023px) {
  .page-hero--recruit .page-hero__media-img--recruit {
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ----- Our Culture 見出し（72px 2行） ----- */
.recruit-page__culture-display {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--space-8);
}

.recruit-page__culture-display-line {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.5rem, calc(1.5rem + 4vw), 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.recruit-page__culture-display-line--accent {
  color: var(--brand-primary);
}

/* ----- Culture 行：番号 ----- */
.recruit-page__reason-num {
  font-family: var(--font-en);
  font-size: clamp(2.5rem, calc(1.5rem + 4vw), 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--brand-primary);
}

.recruit-page__reason-title-en {
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.recruit-page__reason-title-en--secondary {
  font-family: var(--font-en-body, var(--font-en));
  font-weight: 700;
  letter-spacing: 0.12em;
}

.recruit-page__interview-label {
  margin: 0;
  font-family: var(--font-en-body, var(--font-en));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--brand-secondary);
}

/* ----- The People 見出し（TOP Three Drivers / business-overview 準拠） ----- */
.recruit-page__people-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.recruit-page__people-header-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.recruit-page__people-display {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.recruit-page__people-display-line {
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.5rem, calc(1.5rem + 4vw), 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.0167em;
  color: var(--ink-900);
}

.recruit-page__people-display-line + .recruit-page__people-display-line {
  margin-top: var(--space-2);
}

.recruit-page__people-display-line--accent {
  color: var(--brand-primary);
}

.recruit-page__people-intro {
  margin: 0;
  max-width: 24.1875rem; /* 387px · Figma .paragraph */
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink-500);
}

@media (min-width: 1024px) {
  .recruit-page__people-head {
    gap: 32px;
  }

  .recruit-page__people-header-grid {
    position: relative;
    min-height: 149px;
    display: block;
  }

  .recruit-page__people-display-line {
    /* font-size は --fs-display-en-xl（Our Culture / Beyond Boundaries）を継承＝Our Culture と一致 */
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .recruit-page__people-display-line + .recruit-page__people-display-line {
    margin-top: 5px;
  }

  .recruit-page__people-intro {
    position: absolute;
    top: 41px;
    right: 0;
    width: min(387px, 32%);
    max-width: 387px;
    margin: 0;
  }
}

.recruit-page__join-label {
  margin: 0 0 var(--space-6);
  font-family: var(--font-en-body, var(--font-en));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* ----- MESSAGE（CEO） ----- */
.recruit-page__message {
  background: #fff;
}

.recruit-page__message-inner {
  display: grid;
  max-width: 1401px;
  margin: 0 auto;
  gap: var(--space-6);
 padding: var(--space-16) var(--space-10);
}

.recruit-page__message-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 567 / 729;   /* [r58] React準拠: 縦横比維持で縦縮み防止 */
}

.recruit-page__message-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 38% 22%;   /* [r59] React準拠: 顔が見える位置 */
}

.recruit-page__message-label {
  margin: 0 0 var(--space-2);
  font-family: var(--font-en);
  font-size: 13px; /* [r-fs] React message-head 13px に一致 */
  font-weight: 900;
  letter-spacing: 0.25em;
  line-height: 1.5;
  color: var(--brand-primary);
  text-transform: uppercase;
}

.recruit-page__message-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.25rem + 1.2vw), 32px); /* [r-fs] React message-title に一致 */
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.recruit-page__message-byline {
  margin: 0 0 var(--space-10);
  font-family: var(--font-jp);
  font-size: 13px; /* [r-fs] React message-byline 13px（fs-h4=18pxで過大だった） */
  font-weight: 700;
  line-height: 19.5px;
  letter-spacing: 0.0325rem;
  color: var(--ink-500);
}

.recruit-page__message-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

/* [r-fs] React message-body: 15px / line-height 36px に一致 */
.recruit-page__message-body p {
  font-size: 15px;
  line-height: 36px;
}

@media (min-width: 1024px) {
  .recruit-page__message-inner {
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    align-items: center; /* [r-msg] React: コピーを写真に対して縦中央 */
    gap: var(--space-10);
    padding: var(--space-32) var(--space-20);
  }

  /* [r-msg] React desktop と同じ写真サイズ/クロップ（高さ clamp・画像 118.125%・46% top） */
  .recruit-page__message-photo {
    aspect-ratio: auto;
    height: clamp(31.3125rem, 52.071vw, 45.5625rem);
  }
  .recruit-page__message-img {
    min-height: 0;
    width: 118.125%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 46% top;
  }

  .recruit-page__message-copy {
    padding-left: var(--space-16);
    max-width: 512px;
  }
}

/* ----- Our Culture（3バンド） ----- */
.recruit-page__culture-section {
  background: #fff;
  padding-bottom: var(--space-24);
}

.recruit-page__culture-head {
  max-width: 1401px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) 0;
}

.recruit-page__culture-eyebrow {
  margin: 0 0 var(--space-8);
  font-family: var(--font-en);
  font-size: 13px; /* [r-fs] React準拠: 各セクションeyebrowは13px（11pxで全体的に小さく見えていた） */
  font-weight: 900;
  letter-spacing: 0.2em;
  line-height: 1.5;
  color: var(--brand-primary);
}

.recruit-page__culture-eyebrow--narrow {
  letter-spacing: 0.08em;
}

.recruit-page__culture-band {
  display: grid;
  max-width: 1401px;
  margin: 0 auto;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-10) var(--space-6);
  align-items: center;
}

.recruit-page__culture-photo {
  position: relative;
  min-height: 240px;
}

.recruit-page__culture-photo-frame {
  position: relative;
  min-height: 240px;
  overflow: hidden;
}

.recruit-page__culture-img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  /* [r-culture] React ScrollRisePhoto と同じホバー拡大の遷移（The People と同挙動） */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* [r-culture] Our Culture 3バンド写真: マウスオーバーで scale(1.04)。frameは overflow:hidden でクリップ */
.recruit-page__culture-photo:hover .recruit-page__culture-img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .recruit-page__culture-img { transition: none; }
  .recruit-page__culture-photo:hover .recruit-page__culture-img { transform: none; }
}

.recruit-page__culture-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.recruit-page__culture-tagrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.recruit-page__culture-band .recruit-page__culture-num {
  font-family: var(--font-en);
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.875rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--brand-primary);
}

.recruit-page__culture-band--secondary .recruit-page__culture-num {
  color: var(--brand-secondary);
}

.recruit-page__culture-band--orange .recruit-page__culture-num {
  color: var(--brand-accent-orange);
}

.recruit-page__culture-en {
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  color: var(--brand-primary);
}

.recruit-page__culture-band--secondary .recruit-page__culture-en {
  color: var(--brand-secondary);
}

.recruit-page__culture-band--orange .recruit-page__culture-en {
  color: var(--brand-accent-orange);
}

.recruit-page__culture-en--ss3 {
  font-family: var(--font-en-body, var(--font-en));
  font-weight: 700;
}

.recruit-page__culture-body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2.14;
  color: var(--ink-500);
  max-width: 26.25rem;
}

@media (min-width: 1024px) {
  .recruit-page__culture-head {
    padding-left: var(--space-20);
    padding-right: var(--space-20);
  }

  /* Figma .recruitpage2 — 行内 1240px（723 写真 + 95 gap + 422 テキスト） */
  .recruit-page__culture-band {
    max-width: 77.5rem; /* 1240px */
    gap: 0;
    padding: var(--space-20) var(--space-20) 0;
    min-height: 452px;
    box-sizing: border-box;
  }

  /* 01 NURTURE · 03 PASSION — 写真左・コピー右 */
  .recruit-page__culture-band--photo-first {
    grid-template-columns: minmax(0, 723px) minmax(0, 422px);
    column-gap: 95px;
    justify-content: start;
  }

  /* 02 BORDERLESS — コピー左・写真右（container11 @ left 516.66px） */
  .recruit-page__culture-band--text-first {
    grid-template-columns: minmax(0, 517px) minmax(0, 723px);
    column-gap: 0;
    justify-content: start;
  }

  .recruit-page__culture-band--text-first .recruit-page__culture-photo {
    order: 2;
  }

  .recruit-page__culture-band--text-first .recruit-page__culture-copy {
    order: 1;
    max-width: 517px;
  }

  .recruit-page__culture-photo,
  .recruit-page__culture-photo-frame {
    min-height: 452px;
    height: 452px;
    overflow: hidden;
  }

  /* [r-culture] crop有効化: 旧セレクタは .scroll-rise-photo__zoom（WP DOMに無し）を要求し未適用だった。
     WP実DOM（.recruit-page__culture-img）へ向け直し、Figmaクロップ（被写体寄せ）を効かせる。 */
  .recruit-page__culture-band .recruit-page__culture-img {
    position: absolute;
    inset: auto;
    display: block;
    width: auto;
    height: auto;
    min-height: 0;
    max-width: none;
    object-fit: cover;
  }

  /* 01 · dsc-7698 */
  .recruit-page__culture-band--01 .recruit-page__culture-img {
    top: -214.5px;
    left: -53.99%;
    right: -55.61%;
    width: 209.59%;
    height: 1010px;
  }

  /* 02 · a61b59 */
  .recruit-page__culture-band--02 .recruit-page__culture-img {
    top: -119.58px;
    left: -42.16px;
    width: 560px;
    height: 618px;
  }

  /* 03 · dsc-6973 */
  .recruit-page__culture-band--03 .recruit-page__culture-img {
    top: -29.66px;
    left: -2.97%;
    right: -20.35%;
    width: 123.32%;
    height: 594px;
  }

  .recruit-page__culture-band--01 .recruit-page__culture-copy,
  .recruit-page__culture-band--03 .recruit-page__culture-copy {
    padding-top: 110px;
  }

  .recruit-page__culture-band--02 .recruit-page__culture-copy {
    padding-top: 114px;
  }
}

/* ----- Interviews（理念 .philosophy-pillar 同型 · 700+700 @ 1400 上限） ----- */
.recruit-page__interviews {
  background: #fff;
}

.recruit-page__interviews-head {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.recruit-page__interview-pillar {
  border: none;
}

.recruit-page__interview-split {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: var(--layout-frame);
  margin-inline: auto;
  min-height: 280px;
}

.recruit-page__interview-media {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  background-color: #fff;
  border: none;
  box-shadow: none;
}

.recruit-page__interview-media::before,
.recruit-page__interview-media::after {
  display: none;
  content: none;
}

.recruit-page__interview-media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  line-height: 0;
  border: none;
  box-shadow: none;
}

.recruit-page__interview-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  vertical-align: top;
  padding: var(--space-2) var(--space-10);
  /* [hover] React ScrollRisePhoto と同じホバー拡大の遷移 */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* [hover] Behind Our Culture（インタビュー写真）: マウスオーバーで scale(1.04)。
   .recruit-page__interview-media は overflow:hidden のため拡大分はクリップされる。 */
.recruit-page__interview-media:hover .recruit-page__interview-img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .recruit-page__interview-img { transition: none; }
  .recruit-page__interview-media:hover .recruit-page__interview-img { transform: none; }
}

.recruit-page__interview-panel {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: var(--space-12) var(--space-10);
}

.recruit-page__interview-content {
  width: 100%;
  max-width: 32rem; /* 512px · Figma .container3 */
}

.recruit-page__interview-title {
  margin: 0 0 var(--space-8);
  padding-bottom: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5; /* 36px @ 24px */
  color: var(--ink-900);
}

/* 装飾下線なし（.h2-section の縁ラインを付けない） */
.recruit-page__interview-title::after {
  display: none;
  content: none;
}

.recruit-page__interview-byline {
  margin: 0 0 var(--space-3);
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5; /* 19.5px */
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

.recruit-page__interview-body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2.142857; /* 30px */
  color: var(--ink-500);
  max-width: 32rem;
  white-space: pre-line;
}

/* スマホ — 常に写真 → テキスト（デスクトップの左右交互は 1024px+ の DOM 順） */
@media (max-width: 1023px) {
  .recruit-page__interview-media {
    order: 1;
    /* [r58] React ≤1023: 横全幅・固定バンド高で縦縮み/左右の隙間を解消 */
    height: clamp(14rem, 45vw, 20rem);
    min-height: clamp(14rem, 45vw, 20rem);
  }

  /* [r59] 顔が見えるように: React row02(=photo-first/永瀬) と同じ被写体位置 */
  .recruit-page__interview-pillar--photo-first .recruit-page__interview-img {
    object-position: center 28%;
  }

  .recruit-page__interview-panel {
    order: 2;
  }
}

@media (min-width: 1024px) {
  .recruit-page__interview-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 30.71875rem; /* 491.5px */
  }

  .recruit-page__interview-media {
    min-height: 30.71875rem;
    height: 100%;
    max-width: 43.75rem; /* 700px */
    width: 100%;
    border-bottom: none;
  }

  .recruit-page__interview-pillar + .recruit-page__interview-pillar {
    border-top: none;
  }

  .recruit-page__interview-split {
    align-items: stretch;
  }

  .recruit-page__interview-panel {
    min-height: 30.71875rem;
    max-width: 43.75rem;
    padding: 0 var(--space-10) 0 var(--space-20); /* 80px left · Figma .container2 */
  }

  .recruit-page__interview-pillar--photo-first .recruit-page__interview-panel {
    padding: 0 var(--space-20) 0 var(--space-16); /* 64px left · Figma .container6 */
  }

  .recruit-page__interview-title {
    font-size: 24px;
    line-height: 1.5;
  }
}

/* ----- STAFF VOICES ----- */
.recruit-page__staff {
  background: #fff;
}

.recruit-page__staff-inner {
  max-width: 1401px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-10) var(--space-20);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.recruit-page__staff-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* mf-recycle-band__inner と同じ段間 */
}

.recruit-page__staff-head .recruit-page__culture-eyebrow,
.recruit-page__positions-head .recruit-page__culture-eyebrow {
  margin-bottom: 0;
}

.recruit-page__section-title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(1.5rem, calc(1.5rem + 0.5vw), 2rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.recruit-page__staff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.recruit-page__staff-card {
  position: relative;
  min-height: 236px;
}

.recruit-page__staff-quote-mark {
  position: absolute;
  left: -0.5rem;
  top: -1.5rem;
  font-family: var(--font-en);
  font-size: 7.5rem;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--ink-900) 4%, transparent);
  pointer-events: none;
}

.recruit-page__staff-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-top: var(--space-8);
}

.recruit-page__staff-quote {
  font-family: var(--font-jp); /* Safari で明朝体(serif)に落ちるのを防ぐ・global voices と同じサンセリフに統一 */
  color: var(--ink-900);
}

.recruit-page__staff-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 67px;
  border-top: 1px solid color-mix(in srgb, var(--ink-900) 6%, transparent);
  padding-top: var(--space-4);
}

.recruit-page__staff-role {
  margin: 0;
  font-family: var(--font-en-body, var(--font-en));
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
}

@media (min-width: 1024px) { /* [admin] グローバル(voices-grid)と同じ1024起点に。768〜1023は1列 */
  .recruit-page__staff-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .recruit-page__staff-inner {
    padding-left: 150px;
    padding-right: 150px;
  }
}

/* [admin] 768〜1023 は確実に1列（採用スタッフの声＝グローバルに合わせる・競合/キャッシュ対策の明示指定） */
@media (min-width: 768px) and (max-width: 1023px) {
  .recruit-page__staff-grid { grid-template-columns: 1fr; }
}

/* ----- POSITIONS（Figma アコーディオン） ----- */
.recruit-page__positions {
  background: #fff;
  padding: var(--space-32) var(--space-10) var(--space-24);
}

.recruit-page__positions-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.recruit-page__positions-list {
  max-width: 58.25rem; /* 932px */
  margin: 0 auto;
}

.recruit-page__position-item {
  border-top: 1px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.recruit-page__position-item:last-of-type {
  border-bottom: 1px solid color-mix(in srgb, var(--ink-900) 8%, transparent);
}

.recruit-page__position-item--open {
  background: color-mix(in srgb, var(--surface-paper) 80%, transparent);
}

/* デスクトップ — 基盤事業ストリップ同様ホバーで詳細を開く */
.recruit-page__position-item--hover:hover:not(.recruit-page__position-item--open) {
  background: color-mix(in srgb, var(--surface-paper) 45%, transparent);
}

.recruit-page__position-row {
  width: 100%;
}

.recruit-page__position-item:not(.recruit-page__position-item--hover) .recruit-page__position-row[role="button"] {
  cursor: pointer;
}

.recruit-page__position-item--hover .recruit-page__position-row {
  cursor: default;
}

.recruit-page__position-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: var(--space-8) var(--space-4);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.recruit-page__position-trigger:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.recruit-page__position-role {
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-900);
}

.recruit-page__position-item--open .recruit-page__position-role {
  color: var(--brand-primary);
}

.recruit-page__position-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.recruit-page__position-loc {
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2.14;
  color: var(--ink-500);
}

.recruit-page__position-chevron {
  display: flex;
  justify-content: flex-end;
  color: var(--ink-500);
  transition: transform 0.25s var(--anim-ease-out);
}

.recruit-page__position-chevron--open {
  transform: rotate(180deg);
}

/* [r20] 募集要項ドロワー: hidden属性での瞬間表示を、grid-template-rows による
   滑らかな高さアニメに変更（React版の開閉感に合わせる）。JS側で hidden を使わず
   --open クラスで制御する。 */
.recruit-page__position-panel-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s var(--anim-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.recruit-page__position-item--open .recruit-page__position-panel-wrap {
  grid-template-rows: 1fr;
}

.recruit-page__position-panel {
  min-height: 0;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .recruit-page__position-panel-wrap { transition: none; }
}

.recruit-page__position-panel-inner {
  position: relative; /* [r9] 応募リンクの絶対配置基準（React .position-panel-body 準拠） */
  padding: var(--space-1) var(--space-4) 44px; /* [r9] 下44px=React panel-body の応募リンク確保分 */
  border-top: 1px solid var(--line-border);
}

.recruit-page__position-desc {
  margin: var(--space-6) 0 var(--space-5);
  font-family: var(--font-jp);
  font-size: 14px;
  line-height: 2;
  color: var(--ink-700);
}

.recruit-page__position-specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-8);
  margin: 0; /* [r9] 下余白撤去・応募リンク領域は panel-inner の下paddingで確保（React準拠） */
}

@media (min-width: 768px) {
  .recruit-page__position-specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recruit-page__position-spec-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0;
}

.recruit-page__position-spec-label {
  flex: 0 0 4.5rem;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-500);
}

.recruit-page__position-spec-value {
  margin: 0;
  flex: 1;
  font-family: var(--font-jp);
  font-size: 13px;
  line-height: 2;
  color: var(--ink-900);
}

/* [r9] 応募するリンク: React .recruit-page__position-apply に一致。
   panel-inner を基準に右下へ絶対配置（right=左右padding16pxで本文右端に揃え, bottom:4px）。
   テキストはブランド色・700・字間、ホバーでアイコン余白拡大。 */
.recruit-page__position-apply {
  position: absolute;
  right: var(--space-4);
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  min-width: 60px;
  min-height: 18px;
  font-family: var(--font-en-body, var(--font-en));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09rem;
  line-height: 18px;
  color: var(--brand-primary, #283594);
  text-decoration: none;
  transition: gap 0.2s ease;
}
.recruit-page__position-apply:hover { gap: var(--space-2, 8px); }

@media (min-width: 1024px) {
  .recruit-page__positions {
    padding-left: 250px;
    padding-right: 250px;
  }
}

@media (max-width: 639px) {
  .recruit-page__position-trigger {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    row-gap: var(--space-2);
  }

  .recruit-page__position-role {
    grid-column: 1 / -1;
  }

  .recruit-page__position-type {
    grid-row: 2;
    justify-self: start;
  }

  .recruit-page__position-loc {
    grid-row: 2;
    grid-column: 1;
    padding-left: 0;
  }

  .recruit-page__position-chevron {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }

  .recruit-page__position-apply {
    margin-left: 0;
  }
}

/* ----- JOIN US ----- */
.recruit-page__join {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.recruit-page__join-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.recruit-page__join-img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.recruit-page__join-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--ink-900) 60%, transparent);
}

.recruit-page__join-inner {
  position: relative;
  z-index: 2;
  max-width: 442px; /* [r-join] 左右padding24px込みで本文394px=React join-stack幅。leadの変な折返しを解消 */
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.recruit-page__join-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-jp);
  font-size: clamp(26px, 5vw, 36px); /* [r-fs] React join-title に一致（旧 fs-h2-md は最大28pxで過小） */
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink-inv-900);
}

.recruit-page__join-lead {
  margin: 0 0 var(--space-10);
  font-family: var(--font-jp);
  font-size: 15px; /* [r-join] React join-lead 15px（fs-lead=20pxで過大・段落が崩れて見えていた） */
  line-height: 33px;
  color: var(--ink-inv-700);
}

.recruit-page__join-rule {
  width: var(--space-10);
  height: 1px;
  margin-bottom: var(--space-10);
  background: rgba(255, 255, 255, 0.2);
}

.recruit-page__join-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  text-decoration: none;
}

@media (min-width: 1024px) {
  .recruit-page__join {
    min-height: 577px;
  }

  .recruit-page__join-img {
    min-height: 577px;
  }
}

/* ===== 1024px+ Figma 1400 固定値 ===== */
/**
 * 採用ページ — 1400px 基準
 * PageHero は page-hero-layout.css
 */

/* ===========================================================
   POSITIONS 見出しの位置をリストと揃える + アコーディオン内CSS追加
   =========================================================== */

/* 見出し (POSITIONS / 募集要項) もリストと同じ幅で中央寄せ */
.recruit-page__positions-head {
  max-width: 58.25rem; /* 932px - positions-list と同じ */
  margin-left: auto;
  margin-right: auto;
}

/* アコーディオン内: パネル */
.recruit-page__position-panel-wrap[hidden] {
  display: none !important;
}

/* [r-band] ENJOY FREE STYLE 帯の本文折返しを React に一致。
   WPは width:min(49.5rem,100%) で親content(640px=80px padding)に縮められ「待っています。」が
   余計に折返していた。React は body-wrap に 792px を明示し padding を越えて表示するため、
   recruit帯のみ本文幅を 792px に固定する。 */
@media (min-width: 1024px) {
  .mf-recycle-band--recruit .mf-recycle-band__body {
    width: 792px;
    max-width: 792px;
  }
}

/* [r-anim] ScrollRisePhoto（React移植）: 出現時にせり上がり＋フェード。
   実際の translateY / opacity は main.js が data-rise を見てインライン付与する。
   位置決め（grid item / absolute）は各セクションの既存CSSが担う。 */
.scroll-rise-photo {
  will-change: transform, opacity;
}

/* [r-tablet] 768〜1023px: 社長/カルチャー写真をグローバル工場写真(16/10)に合わせる */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 代表メッセージ写真（縦長 567/729 で巨大化していたのを16/10に） */
  .recruit-page__message-photo {
    aspect-ratio: 16 / 10;
    height: auto;
  }
  /* Our Culture 3バンドの写真 */
  .recruit-page__culture-photo,
  .recruit-page__culture-photo-frame {
    aspect-ratio: 16 / 10;
    min-height: 0;
    height: auto;
  }
  .recruit-page__culture-img { min-height: 0; }
}

/* ==========================================================
   [追加修正 2026-06] クライアント指摘 row67 / row90 / 左右パディング段差
   ※ 1023/1024 等の境界は .98px でサブピクセルのすき間を塞ぐ
   ========================================================== */

/* --- row67: Our Culture と The People の間の大きな空き（≤1023）を圧縮 ---
   culture-section の下96px + interviews-head の上128px = 約224px が縦積みで開きすぎ。 */
@media (max-width: 1023.98px) {
  .recruit-page__culture-section { padding-bottom: var(--space-12); } /* 96px → 48px */
  .recruit-page__interviews-head { padding-top: var(--space-8); }    /* 128px → 64px */
}

/* --- 左右パディングのタブレット段(768–1023)を追加してビジネスと同じ 24/48/80 の3段階に ---
   culture は 24→80 で中間48pxが抜けていた（タブレットで端に詰まる）。48pxを補う。
   ※ staff(150)/positions(250)/join(442) は内容幅に合わせた意図的な値のため対象外。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .recruit-page__culture-head,
  .recruit-page__culture-band {
    padding-left: var(--space-12);   /* 48px */
    padding-right: var(--space-12);
  }
}

/* --- row90: 02 BORDERLESS の写真が右端に張り付いて右寄りに見える件 ---
   ミラー配置(テキスト左/写真右)はFigma準拠だが、写真を右端から内側へ少し引いて中央寄りに。
   寄せ量は margin-right の値で調整可（0〜80px）。 */
@media (min-width: 1024px) {
  .recruit-page__culture-band--02 .recruit-page__culture-photo {
    margin-right: 56px;
  }
}

/* ============================================================
   Safari対策: var(--font-*) が適用されず日本語が明朝に落ちる現象。
   該当セクションの見出し/本文まで、英語(DM Sans)を保ったまま
   明示スタックで上書き（!important で個別指定にも勝つ）。
   ※ English→DM Sans / 日本語→Noto Sans JP・ヒラギノ角ゴ の順で解決。
   ============================================================ */
.recruit-page__message, .recruit-page__message *,
.recruit-page__culture, .recruit-page__culture *,
.recruit-page__culture-section, .recruit-page__culture-section *,
.recruit-page__interviews, .recruit-page__interviews *,
.recruit-page__interview, .recruit-page__interview * {
  font-family: "DM Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif !important;
}