/* ==================================================
   富士梱包 RECRUIT PAGE STYLES
   デザインカンプ recruit.html（2026-07-07・実データ反映済み版）忠実実装
   カンプのクラス名はページ接頭辞 recruit- を付けて移植
   （.rv / .is-in / .cnt は recruit.js のフックとしてカンプのまま）
   ================================================== */

.recruit-page {
  /* カンプ（Figma準拠）のトークン。既存 :root に無いものだけ定義 */
  --rc-navy: #0a285b;   /* photo overlay / 暗色地 */
  --rc-ink:  #191a1b;   /* text */
  background: #fff;
  font-family: var(--font-ja);
  color: var(--rc-ink);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;
}

.recruit-page h1,
.recruit-page h2,
.recruit-page h3,
.recruit-page ol {
  margin: 0;
  padding: 0;
}
.recruit-page ol { list-style: none; }

.recruit-inner {
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- photo placeholder（穴あき運用: img を入れるだけで完成する構造） ---------- */
.recruit-ph {
  position: relative;
  background:
    repeating-linear-gradient(-45deg, rgba(10, 40, 91, .045) 0 10px, transparent 10px 20px),
    var(--color-bg-gray);
  overflow: hidden;
}
/* 2026-09-02：表示を "PHOTO" → 「準備中」に。サイト全体（事業内容の商品カード・設備一覧）で
   写真未支給の箇所は「準備中」に統一した。斜めストライプの地はこのページの意匠なので残す。 */
.recruit-ph::after {
  content: "準備中";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ja, 'Noto Sans JP', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  color: rgba(10, 40, 91, .42);
}
.recruit-ph img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==================================================
   PAGE HERO（下層ヘッダー）
   共通ヘッダー（fixed・高さ100px）の下に420px＝計520px
   ================================================== */
/* 帯の高さ・文字サイズは company / equipment / contact の見出しに合わせる
   （EN 60px・JA 16px・padding-top 100px・仕上がり254px）。
   他ページは content+padding で254pxになるが、採用はキャッチコピーが1行入るぶん
   下パディングを詰めており、min-height 側で同じ254pxを作っている。 */
.recruit-hero {
  position: relative;
  min-height: 254px;
  padding: 100px 40px 32px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}
.recruit-hero__photo {
  position: absolute;
  inset: 0;
}
.recruit-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-hero__photo::before { /* navy hard-light 相当 */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--rc-navy) 0%, rgba(10, 40, 91, .92) 42%, rgba(0, 80, 209, .55) 100%);
  z-index: 1;
}
.recruit-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.recruit-hero__en {
  font-family: var(--font-deco);
  font-weight: 500;
  font-size: 60px;
  letter-spacing: .02em;
  line-height: 1;
}
.recruit-hero__ja {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  gap: 14px;
}
.recruit-hero__ja::before {
  content: "";
  width: 40px;
  height: 4px;
  background: var(--color-red);
}
.recruit-hero__copy {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  opacity: .9;
}

/* ==================================================
   共通: セクション・見出し（Contents_title + bar）
   ================================================== */
.recruit-sec {
  padding: 110px 0;
  position: relative;
  overflow: hidden; /* 巨大英字ウォーターマークによる横スクロールを防ぐ */
}
.recruit-sec--feature { padding-top: 0; }

.recruit-sec-head { margin-bottom: 60px; }
.recruit-sec-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.recruit-sec-title__en {
  font-family: var(--font-deco);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .25em;
  color: var(--color-blue);
}
.recruit-sec-title__en--white { color: #fff; }
.recruit-sec-bar {
  margin-top: 16px;
  height: 5px;
  width: 100%;
  background: linear-gradient(90deg, var(--color-blue) 0 120px, var(--color-red) 120px 150px, rgba(10, 40, 91, .12) 150px 100%);
}

/* 巨大英字ウォーターマーク。
   2026-09-03：line-height:1 ＋ bottom:-6px だと、セクションの overflow:hidden で
   **ディセンダ（Entry の y、Requirements の q）の下が切れて**いた。
   SPでは文字が49pxしかないのに6px切られるので、"Entry" が "Entrv" に見えていた（ユーザー指摘）。
   このフォント（Helvetica Neue系）は ascent 48 + descent 12 = 60 で **1em(49px)より背が高い**ため、
   line-height:1 だとハーフレディングがマイナスになり、グリフが行ボックスからはみ出す。
   line-height:1.25（＝61.4px > 60px）にして行ボックスをフォントボックスより高くし、bottom を 0 に戻した。
   文字サイズに比例するので、どの幅でもディセンダが切れない。 */
.recruit-wm {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  font-family: var(--font-deco);
  font-weight: 500;
  line-height: 1.25;
  font-size: clamp(90px, 14vw, 200px);
  color: rgba(0, 80, 209, .05);
  white-space: nowrap;
  left: -10px;
  bottom: 0;
}
.recruit-on-dark .recruit-wm { color: rgba(255, 255, 255, .12); }

/* ==================================================
   ボタン（botton_normal 準拠・カンプ移植）
   ページ共通リセット（.top-page a）や :visited に負けないよう明示
   ================================================== */
.recruit-btn,
a.recruit-btn:link,
a.recruit-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 280px;
  height: 60px;
  padding: 0 20px 0 30px;
  border: 1px solid var(--color-blue);
  background: #fff;
  color: var(--color-blue);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .1em;
  transition: background .3s, color .3s;
  position: relative;
}
.recruit-btn__arw {
  width: 30px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform .3s;
}
.recruit-btn__arw::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
}
.recruit-btn:hover,
a.recruit-btn:hover {
  background: var(--color-blue);
  color: #fff;
}
.recruit-btn:hover .recruit-btn__arw { transform: translateX(4px); }
.recruit-btn--white,
a.recruit-btn--white:link,
a.recruit-btn--white:visited {
  border-color: #fff;
  background: transparent;
  color: #fff;
}
.recruit-btn--white:hover,
a.recruit-btn--white:hover {
  background: #fff;
  color: var(--color-blue);
}

/* ==================================================
   MESSAGE（採用理念）
   ================================================== */
.recruit-message-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 70px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.recruit-message__catch {
  /* 上限42pxだと3行目「仲間を募集しています。」が幅494px／列幅505pxで余白6pxしかなく、
     フォントの読み込み状況や環境差で4行に割れて「す。」だけが残っていた（2026-09-02 修正）。
     文字数の決まった構成なので、上限を下げて確実に収まるようにしている。
     2026-09-25：受領原稿に差し替えて4行構成になった。38pxでは1行あたり約40pxなので
     列幅505pxに収まるのは12文字まで。テンプレート側の <br> はこの上限で割ってある。 */
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700; /* サイト標準（トップの最大見出しも700）。900はこのページだけ浮いていた */
  line-height: 1.6;
  letter-spacing: .06em;
}
.recruit-u {
  background: linear-gradient(transparent 68%, rgba(0, 80, 209, .18) 68%);
}
.recruit-message__lead {
  margin-top: 30px;
  color: #3a3d40;
}
.recruit-message-photo { position: relative; }
.recruit-message-photo__main {
  aspect-ratio: 4 / 3;
  width: 100%;
}
/* 重ねる小写真。2026-09-02：主写真の右側に写っている人の顔（縦48〜60%の位置）に
   かぶっていたので、少し小さくして下へずらし、顔の下を通るようにした。
   　旧: width 44% / bottom -14% → 小写真の上端が縦53%（＝顔の途中）
   　新: width 40% / bottom -20% → 上端が縦65%（＝顔より下・作業台のあたり）
   ※上端の位置は「100% + bottom - width×1.378」で決まる（主写真が4:3のため）。
   　写真を差し替えて顔の位置が変わったら、この式で bottom を決め直すこと。 */
.recruit-message-photo__sub {
  position: absolute;
  width: 40%;
  aspect-ratio: 1 / 1;
  right: -8%;
  bottom: -20%;
  border: 8px solid #fff;
}

/* ==================================================
   FEATURE（働く特徴・2×2番号付きカード）
   ================================================== */
.recruit-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  position: relative;
  z-index: 1;
}
/* 2026-09-03：枠線1本だけのカードで、他セクション（DATAの色付き上辺、VOICEの赤バッジ、
   ENVの白カード）に比べて明らかに弱く、4枚が同じ細枠の箱に見えていた（ユーザー指摘）。
   事業内容ページの「強み」カード（.business-strength-card）と同じ作りに揃える：
   白地＋やわらかい影＋大きめのゴースト数字。
   ※2026-09-03（2）上辺の青→赤4pxバーは削除（ユーザー判断）。
     青赤のアクセントはヘッダー下の見出しバー・DATAカード・VOICEバッジと
     ページ内で何度も出てくるので、ここにも足すと「しつこい」ため。 */
.recruit-feature-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(10, 40, 91, .08);
  border-radius: 4px;
  padding: 34px 30px 30px;
  box-shadow: 0 10px 30px rgba(10, 40, 91, .06);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease;
}
/* タッチ端末では :hover が残って浮いたまま固まるので、マウスがある環境だけに限定 */
@media (hover: hover) and (pointer: fine) {
  .recruit-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 46px rgba(10, 40, 91, .14);
  }
}
/* ⚠️ 番号は <p> なので、下の `.recruit-feature-card p`（詳細度0,2,0）に負ける。
   もとの実装は 15px・赤の指定が丸ごと効かず、ただの本文（13px・グレー）で出ていた。
   要素セレクタを足して詳細度を上げてある。 */
.recruit-feature-card p.recruit-feature-card__num {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: .04em;
  /* .16 だと白地に対するコントラスト比が約1.2で、ほぼ透けて読めなかった（ユーザー指摘）。
     赤や青のアクセントを足すと「しつこい」ので、色は増やさずネイビーの濃度だけ上げる。 */
  color: rgba(10, 40, 91, .3);
}
.recruit-feature-card h3 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .08em;
}
.recruit-feature-card p {
  font-size: 14px;
  line-height: 1.95;
  color: #3a3d40;
  margin-top: 10px;
}

/* ==================================================
   DATA（数字で見る）
   ================================================== */
.recruit-sec--data { background: var(--color-bg-gray); }
.recruit-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
}
.recruit-data-card {
  background: #fff;
  padding: 38px 24px 30px;
  text-align: center;
  border-top: 5px solid var(--color-blue);
  transition: transform .3s, box-shadow .3s;
}
/* タッチ端末では一度タップすると :hover が残り、カードが浮いたまま固まる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .recruit-data-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(10, 40, 91, .1);
  }
}
.recruit-data-card:nth-child(3) { border-top-color: var(--color-red); }
.recruit-data-card__label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--rc-navy);
}
.recruit-data-card__num {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 56px;
  line-height: 1.25;
  color: var(--color-blue);
  margin-top: 10px;
}
.recruit-data-card:nth-child(3) .recruit-data-card__num { color: var(--color-red); }
.recruit-data-card__num small {
  font-family: var(--font-ja);
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
}
.recruit-data-card__note {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
  letter-spacing: .06em;
}

/* ==================================================
   WORK（仕事を知る・2×2写真カード）
   ================================================== */
.recruit-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  position: relative;
  z-index: 1;
}
.recruit-work-card {
  background: #fff;
  border: 1px solid rgba(10, 40, 91, .12);
  transition: box-shadow .3s, transform .3s;
  display: flex;
  flex-direction: column;
}
/* タッチ端末では一度タップすると :hover が残ったままになる。
   マウスがある環境だけに限定する（2026-09-01・お客様の声と同じ対応をサイト全体へ）。 */
@media (hover: hover) and (pointer: fine) {
  .recruit-work-card:hover {
    box-shadow: 0 16px 34px rgba(10, 40, 91, .12);
    transform: translateY(-4px);
  }
}
/* 2026-09-25：WORK は写真なしの構成にした（6部門のうち2部門が未支給で、
   「準備中」が混ざるより文字だけで揃えたほうがよいとのユーザー判断）。
   この指定は写真を戻すとき用に残してある（テンプレート側の復帰手順もコメント済み）。 */
.recruit-work-card__img { aspect-ratio: 16 / 10; }
.recruit-work-card__body {
  /* 写真が無くなったぶん、上を少し広げて文字が枠に詰まって見えないようにする */
  padding: 32px 30px 34px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 2026-09-25：部門ごとに雇用形態が最大3つ付くので、タグはラッパーに入れて折り返す。
   1つしか無い部門でも見え方は従来と変わらない。 */
.recruit-work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.recruit-work-card__tag {
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
  padding: 3px 12px;
}
/* 写真が無いぶん、部門名の下に細い罫を1本引いて「見出し／本文」の切れ目を作る。
   FEATURE のカード（白地・影・ゴースト数字）と見分けがつくようにするための差で、
   罫線だけで組むのはインタビュー詳細ページで既に使っている作法。色は足していない。 */
.recruit-work-card h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 40, 91, .14);
}
.recruit-work-card__body > p {
  font-size: 14px;
  color: #3a3d40;
  flex: 1;
}
.recruit-work-card__more,
a.recruit-work-card__more:link,
a.recruit-work-card__more:visited {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: .14em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.recruit-work-card__more::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-blue);
  transition: width .3s;
}
.recruit-work-card:hover .recruit-work-card__more::after { width: 40px; }

/* ==================================================
   VOICE（はたらく人の声・ネイビー地＋白カード＋赤バッジ）
   ================================================== */
.recruit-sec--voice {
  background: var(--rc-navy);
  color: #fff;
}
.recruit-sec--voice .recruit-sec-title { color: #fff; }
.recruit-sec--voice .recruit-sec-bar {
  background: linear-gradient(90deg, #fff 0 120px, var(--color-red) 120px 150px, rgba(255, 255, 255, .2) 150px 100%);
}
.recruit-voice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  position: relative;
  z-index: 1;
}
.recruit-voice-card {
  background: #fff;
  color: var(--rc-ink);
  /* 写真なし構成。バッジ(top:-16px)の下端を避けるため上を厚めに取る */
  padding: 34px 24px 30px;
  position: relative;
}
.recruit-voice-card__badge {
  position: absolute;
  top: -16px;
  left: -12px;
  z-index: 2;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-deco);
  font-size: 13px;
  letter-spacing: .2em;
  padding: 8px 18px;
  font-weight: 700;
}
.recruit-voice-card__meta {
  font-size: 12px;
  color: #777;
  letter-spacing: .1em;
}
.recruit-voice-card h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  margin: 6px 0 10px;
}
.recruit-voice-card p {
  font-size: 14px;
  color: #3a3d40;
}

/* ==================================================
   INTERVIEW（働く人を知る・雑誌風の左右交互）
   ================================================== */
.recruit-itv {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.recruit-itv + .recruit-itv { margin-top: 110px; }
.recruit-itv--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.recruit-itv--rev .recruit-itv__photo { order: 2; }
.recruit-itv__photo { position: relative; }
.recruit-itv__main {
  aspect-ratio: 4 / 3;
  width: 100%;
}
.recruit-itv__sub {
  position: absolute;
  width: 38%;
  aspect-ratio: 1 / 1;
  left: -8%;
  bottom: -12%;
  border: 8px solid #fff;
}
.recruit-itv--rev .recruit-itv__sub {
  left: auto;
  right: -8%;
}
.recruit-itv__num {
  position: absolute;
  top: -48px;
  right: -6px;
  z-index: 2;
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 120px;
  line-height: 1;
  color: rgba(0, 80, 209, .12);
  pointer-events: none;
}
.recruit-itv__tag {
  display: inline-block;
  background: var(--color-red);
  color: #fff;
  font-family: var(--font-deco);
  font-size: 12px;
  letter-spacing: .25em;
  font-weight: 700;
  padding: 5px 16px;
  margin-bottom: 20px;
}
.recruit-itv__quote {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; /* サイト標準（トップの最大見出しも700）。900はこのページだけ浮いていた */
  line-height: 1.7;
  letter-spacing: .06em;
  position: relative;
  padding-left: 24px;
}
.recruit-itv__quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 5px;
  background: linear-gradient(180deg, var(--color-blue) 0 62%, var(--color-red) 62% 100%);
}
.recruit-itv__meta {
  margin-top: 16px;
  font-size: 13px;
  color: #777;
  letter-spacing: .12em;
}
.recruit-itv__body {
  margin-top: 20px;
  font-size: 15px;
  color: #3a3d40;
}
.recruit-itv__link {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  color: var(--color-blue);
  letter-spacing: .14em;
}
.recruit-itv__link::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--color-blue);
  transition: width .3s;
}
.recruit-itv__link:hover::after { width: 54px; }
/* 2026-09-08：詳細ページ（page-interview.php）ができたので <span> → <a> に変更した。
   .top-page a { color: inherit } の方が詳細度が高く青が消えるため、ここで明示する。 */
.recruit-page a.recruit-itv__link,
.recruit-page a.recruit-itv__link:link,
.recruit-page a.recruit-itv__link:visited { color: var(--color-blue); }

/* ==================================================
   ENVIRONMENT（働く環境・制度）
   2026-09-03：白地の3列カードから「ネイビー〜青のグラデ地＋不透明の白カード」に変更。
   白地のままだと前後の INTERVIEW（白）と REQUIREMENTS（グレー）に挟まれて埋もれていた。
   カードは VOICE と同じ「濃色地に白・角0」に揃えてあり、新しい語彙は足していない。
   ※すりガラス案（背後に工場写真＋backdrop-filter）も実装して比較したが、
     サイト内でここだけガラス＋角丸12pxになること、backdrop-filter 非対応環境で
     ぼけずに半透明の箱になること、背景写真がヒーローと重複することから見送った。
   ================================================== */
.recruit-sec--env {
  background: linear-gradient(160deg, var(--rc-navy) 0%, rgba(10, 40, 91, .95) 45%, rgba(0, 80, 209, .72) 100%);
}
.recruit-sec--env .recruit-sec-title { color: #fff; }
.recruit-sec--env .recruit-sec-bar {
  background: linear-gradient(90deg, #fff 0 120px, var(--color-red) 120px 150px, rgba(255, 255, 255, .2) 150px 100%);
}
/* ウォーターマークの白抜きは section の .recruit-on-dark が持つ（VOICE と共通） */
.recruit-env-grid {
  /* 制度5枠。4列だと最終行が1枠だけ左に残るため、3列＋端数行センター寄せで組む */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 1;
}
.recruit-env-item {
  flex: 0 1 calc((100% - 48px) / 3);
  background: #fff;
  border: none;
  padding: 34px 22px;
  text-align: center;
}
.recruit-env-item__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(0, 80, 209, .08);
  display: grid;
  place-items: center;
  color: var(--color-blue);
}
/* 中身は 24x24 のインラインSVG（線画）。色は上の color を継承する */
.recruit-env-item__icon svg {
  width: 34px;
  height: 34px;
}
.recruit-env-item h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
}
.recruit-env-item p {
  font-size: 13px;
  color: #3a3d40;
  margin-top: 8px;
  text-align: left; /* 受領済みの説明文は長文のため左揃え */
}

/* ---------- 社員旅行ギャラリー（2026-09-25 支給写真）----------
   制度カードの「社員旅行」の実物を見せるブロック。ENVIRONMENT の濃色地の上に
   写真を等間隔で並べるだけにして、新しい色・角丸・影は足していない。 */
.recruit-trip {
  margin-top: 56px;
  position: relative;
  z-index: 1;
}
.recruit-trip__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 18px;
}
/* .top-page p { margin: 0 } と同じ詳細度になるよう要素セレクタを添えてある */
p.recruit-trip__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
}
p.recruit-trip__note {
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .7);
}
.recruit-trip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.recruit-trip__grid figure { margin: 0; }
/* 写真は 1200x900（4:3）で書き出してある */
.recruit-trip__img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}
.recruit-trip__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) and (pointer: fine) {
  .recruit-trip__item:hover .recruit-trip__img img { transform: scale(1.05); }
}
.recruit-trip__cap {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .8);
}
.recruit-trip__year {
  font-family: var(--font-deco);
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  margin-right: 8px;
}

/* ==================================================
   REQUIREMENTS（募集要項・タブ＋テーブル）
   ================================================== */
.recruit-sec--req { background: var(--color-bg-gray); }
/* 2026-09-01：職種が5つになったため折り返しを許可。min-width で
   「総務・営業・場内管理」がタブ内で潰れないようにしている */
/* 職種チップの見出し。PCはタブが1列に並んでいて自明なので隠し、SPでのみ出す */
.recruit-req-tabs-label { display: none; }
.recruit-req-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  z-index: 1;
}
.recruit-req-tab {
  flex: 1 1 auto;
  min-width: 160px;
  text-align: center;
  padding: 18px 10px;
  font-weight: 700;
  letter-spacing: .14em;
  cursor: pointer;
  background: #e2e4e8;
  color: #666;
  border: none;
  font-size: 16px;
  font-family: var(--font-ja);
  transition: background .3s, color .3s;
}
.recruit-req-tab[aria-selected="true"] {
  background: var(--color-blue);
  color: #fff;
}
.recruit-req-table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  position: relative;
  z-index: 1;
}
.recruit-req-table th,
.recruit-req-table td {
  padding: 22px 28px;
  font-size: 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(10, 40, 91, .1);
}
.recruit-req-table th {
  width: 200px;
  background: rgba(0, 80, 209, .05);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--rc-navy);
  white-space: nowrap;
}
.recruit-req-note {
  margin-top: 24px;
  font-size: 14px;
  letter-spacing: .08em;
  position: relative;
  z-index: 1;
}
.recruit-req-note a,
.recruit-req-note a:link,
.recruit-req-note a:visited {
  color: var(--color-blue);
  font-weight: 700;
}

/* ==================================================
   FLOW（選考の流れ・4ステップ）
   ================================================== */
.recruit-flow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  position: relative;
  z-index: 1;
  counter-reset: step;
}
.recruit-flow-item {
  position: relative;
  padding: 0 26px;
  border-left: 1px solid rgba(10, 40, 91, .15);
}
.recruit-flow-item:first-child {
  border-left: none;
  padding-left: 0;
}
/* STEP 0N のラベル。事業内容ページの .business-flow-item__num と同じ扱い（2026-09-02）。
   見出しの「FLOW」ラベルと同じ青に変更。セレクタを2クラスにしているのは、
   下の `.recruit-flow-item p`（詳細度0-1-1・かつ後方）に単体クラス（0-1-0）が負けて
   色指定が効いていなかったため（以前の赤は画面に出ていなかった）。 */
.recruit-flow-item .recruit-flow-item__num {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--color-blue);
}
.recruit-flow-item__num::before {
  counter-increment: step;
  content: "STEP 0" counter(step);
}
.recruit-flow-item h3 {
  font-size: 19px;
  font-weight: 700;
  margin: 10px 0 8px;
  letter-spacing: .08em;
}
.recruit-flow-item p {
  font-size: 13.5px;
  color: #3a3d40;
}
.recruit-flow-item::after {
  content: "";
  position: absolute;
  top: 8px;
  right: -13px;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--color-blue);
  border-right: 2px solid var(--color-blue);
  transform: rotate(45deg);
}
.recruit-flow-item:last-child::after { display: none; }

/* ==================================================
   ENTRY CTA（RECRUITバンド準拠）
   ================================================== */
.recruit-entry {
  position: relative;
  color: #fff;
  overflow: hidden;
  padding: 130px 0;
}
.recruit-entry__bg {
  position: absolute;
  inset: 0;
}
.recruit-entry__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit-entry__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--rc-navy) 0%, rgba(10, 40, 91, .94) 55%, rgba(0, 80, 209, .6) 100%);
}
.recruit-entry .recruit-wm {
  font-size: clamp(110px, 16vw, 220px);
  color: rgba(255, 255, 255, .12);
  z-index: 2;
}
.recruit-entry__inner {
  position: relative;
  z-index: 3;
}
.recruit-entry h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700; /* サイト標準（トップの最大見出しも700）。900はこのページだけ浮いていた */
  letter-spacing: .1em;
  line-height: 1.7;
}
.recruit-entry__inner > p {
  margin: 20px 0 40px;
  font-size: 15px;
  opacity: .92;
  max-width: 620px;
}
.recruit-entry__btns {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* ==================================================
   SP追従エントリーバー（採用ページのみ・900px以下で表示）
   ================================================== */
.recruit-sp-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: none;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  box-shadow: 0 -8px 24px rgba(10, 40, 91, .2);
  padding-bottom: env(safe-area-inset-bottom);
  background: #fff;
  transform: translateY(0);
  transition: transform .35s;
}
.recruit-sp-cta.hide { transform: translateY(110%); }
.recruit-sp-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .12em;
}
.recruit-sp-cta__entry,
a.recruit-sp-cta__entry:link,
a.recruit-sp-cta__entry:visited {
  background: var(--color-blue);
  color: #fff;
}
.recruit-sp-cta__entry::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.recruit-sp-cta__tel,
a.recruit-sp-cta__tel:link,
a.recruit-sp-cta__tel:visited {
  background: #fff;
  color: var(--color-blue);
  border-top: 2px solid var(--color-blue);
}

/* ==================================================
   アニメーション
   ================================================== */

/* ヒーロー登場（背景ズームイン＋英字/日本語/コピーの時間差フェードアップ） */
@keyframes recruitHeroUp {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes recruitHeroZoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
.recruit-hero__photo { animation: recruitHeroZoom 2.2s cubic-bezier(.22, 1, .36, 1) both; }
.recruit-hero__en    { animation: recruitHeroUp .9s .15s cubic-bezier(.22, 1, .36, 1) both; }
.recruit-hero__ja    { animation: recruitHeroUp .9s .35s cubic-bezier(.22, 1, .36, 1) both; }
.recruit-hero__copy  { animation: recruitHeroUp .9s .55s cubic-bezier(.22, 1, .36, 1) both; }

/* スクロールフェードアップ（recruit.js が .is-in を付与） */
.recruit-page .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.recruit-page .rv.is-in {
  opacity: 1;
  transform: none;
}

/* reduced-motion では全アニメーションを無効化 */
@media (prefers-reduced-motion: reduce) {
  .recruit-page .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .recruit-hero__photo,
  .recruit-hero__en,
  .recruit-hero__ja,
  .recruit-hero__copy {
    animation: none;
  }
  .recruit-sp-cta { transition: none; }
}

/* ==================================================
   RESPONSIVE（カンプのブレークポイント 900px / 700px に準拠）
   ================================================== */
@media (max-width: 900px) {
  .recruit-message-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 50px;
  }
  .recruit-message-photo__sub { right: 0; }
  /* 1列になる幅では写真の下がそのまま次のセクションなので、
     小写真が主写真の下に20%はみ出すぶんの余白を確保する
     （2026-09-02：はみ出しを14%→20%に増やした結果、768pxで次の見出しとの間隔が6pxしか無くなっていた） */
  .recruit-message-photo { margin-bottom: 40px; }

  /* 2026-09-03：900pxで1列にすると、601〜900pxでカードが678〜797px幅になり、
     1行しかない本文に対して間延びしていた。2列のまま持たせて600pxで1列に切り替える。 */
  .recruit-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruit-work-grid { grid-template-columns: minmax(0, 1fr); }
  .recruit-voice-grid { grid-template-columns: minmax(0, 1fr); }
  .recruit-env-item { flex-basis: calc((100% - 24px) / 2); }

  .recruit-itv,
  .recruit-itv--rev {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }
  .recruit-itv--rev .recruit-itv__photo { order: 0; }
  .recruit-itv + .recruit-itv { margin-top: 90px; }
  .recruit-itv__num {
    font-size: 80px;
    top: -36px;
  }

  /* 1列になる幅では「縦タイムライン」に（2026-09-02 ユーザー指示）。
     事業内容ページの .business-flow-item / 企業情報ページの沿革と同じ見せ方に揃えている。
     ※:first-child / :last-child の基本指定（詳細度0-2-0）は明示的に打ち消す必要がある */
  .recruit-flow-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .recruit-flow-item,
  .recruit-flow-item:first-child {
    position: relative;
    margin-left: 7px;
    padding: 0 0 28px 32px;
    border-left: 2px solid rgba(0, 80, 209, .18);
  }
  /* 最後のステップの下は線を伸ばさない */
  .recruit-flow-item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
  }
  /* 縦線の上に乗る丸バッジ */
  .recruit-flow-item::before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    left: -9px;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--color-blue);
    box-shadow: 0 0 0 5px rgba(0, 80, 209, .1);
  }
  /* PCのステップ間の矢印はこの幅では使わない */
  .recruit-flow-item::after { display: none; }

  .recruit-flow-item .recruit-flow-item__num { font-size: 13px; }
  .recruit-flow-item h3 { margin: 4px 0 6px; font-size: 18px; }

  /* SP追従エントリーバー（バーの高さ分だけページ下部に余白を確保） */
  .recruit-sp-cta { display: grid; }
  /* バーの高さ分の余白はフッター最下部に移した（top.css FOOTER・2026-10-07）。body に付けるとフッターの下に地色の帯が出る */
}

@media (max-width: 767px) {
  /* SPも他ページ（company / equipment / contact）の204pxに揃える。
     採用はキャッチコピー1行ぶん中身が高いので、上下パディングを詰めて吸収する */
  .recruit-hero {
    min-height: 204px;
    padding: 84px 20px 22px;
  }
  .recruit-hero__en { font-size: 40px; }
  .recruit-hero__copy { margin-top: 6px; font-size: 12px; }

  /* セクション上下余白: SP 64px 目安（指示書§2-3） */
  .recruit-sec { padding: 64px 0; }
  .recruit-sec--feature { padding-top: 0; }
  .recruit-sec-head { margin-bottom: 40px; }
  .recruit-entry { padding: 90px 0; }

  /* ENTRY（最後のCTA）：ボタンを1列の全幅にする（2026-09-03。装飾の四角は 2026-10-07 に全幅で削除）
     ・.recruit-deco-sq は 300x250 / 300x200 の半透明の四角。PCでは写真の右側の
       余白に浮く装飾だが、390px幅では見出しと本文の上に丸ごと重なり、
       文字の途中で四角の輪郭が横切って読みにくくなっていた（ユーザー指摘）。
       装飾なので、幅が足りないSPでは出さない。
     ・ボタンは幅280px固定で、本文ブロック（338px）と右端が揃っていなかった。
       全幅にして縦に積むと、テキストとボタンの左右が1本の線に揃う。 */
  .recruit-entry__btns {
    flex-direction: column;
    gap: 12px;
  }
  .recruit-entry .recruit-btn,
  .recruit-entry a.recruit-btn:link,
  .recruit-entry a.recruit-btn:visited {
    width: 100%;
    /* 767px近くでは全幅だと677pxの帯のようになるので上限を切る */
    max-width: 420px;
  }

  /* 働く環境・制度：SPは白カードを1列に積み、中身は横組みにする（2026-09-03）
     旧: flex 2列。5枠が 1枚/2枚/2枚 とバラバラに折り返し、1枚目だけ中央に浮いていた。
     高さも 328/378/378/476/254px とガタガタで、本文幅157px＝1行11文字で7行に折れていた。
     ・1列にしてアイコン(48px)を左、見出し＋本文を右に置く
     ・本文幅は157px→約262px（1行11文字→19文字）になる
     ・PC の72pxアイコンは1列だと大きすぎるので48pxに落とす */
  .recruit-env-grid { display: block; }
  .recruit-env-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 18px;
    text-align: left;
  }
  .recruit-env-item + .recruit-env-item { margin-top: 12px; }
  .recruit-env-item__icon {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    margin: 0;
  }
  .recruit-env-item__icon svg { width: 24px; height: 24px; }
  .recruit-env-item h3 {
    grid-column: 2;
    align-self: center;
    font-size: 15px;
  }
  .recruit-env-item p {
    grid-column: 2;
    margin-top: 6px;
    line-height: 1.85;
  }

  /* 社員旅行ギャラリー：4列だと1枚80px程度になって何も見えないので2列に */
  .recruit-trip { margin-top: 40px; }
  .recruit-trip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .recruit-trip__cap { font-size: 11px; }

  /* 職種タブ：SPでは2列のチップに組み替える（2026-09-03）
     旧実装は flex 2列・gap 0・全タブ同じ #e2e4e8 で、未選択の4枚が
     1枚のグレーの塊に見え、どこが区切りか・押せるのかが分からなかった。
     ・gap 8px で1枚ずつ独立させ、白地＋枠線で「押せるもの」だと分かるようにする
     ・letter-spacing を .14em → .02em に詰めて「総務・営業・場内管理」の2行折り返しを解消
       （チップ幅165px・内側149pxに対し .14em では約160px必要で溢れていた）
     ・grid-auto-rows: 1fr で3行の高さを揃える（旧: 55px / 81px / 55px とバラバラ）
     ・5枚目（奇数個の余り）は grid-column: 1 / -1 で横いっぱいに伸ばす */
  .recruit-req-tabs-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--rc-navy);
    margin-bottom: 10px;
  }
  .recruit-req-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }
  .recruit-req-tab {
    min-width: 0;
    min-height: 48px;
    padding: 12px 6px;
    font-size: 14px;
    letter-spacing: .02em;
    background: #fff;
    color: #4a5568;
    border: 1px solid rgba(10, 40, 91, .18);
    border-radius: 4px;
  }
  /* 2026-09-25：タブが5枚（奇数）から6枚（偶数）になった。
     余り1枚が出るときだけ全幅にする。偶数なら2列のまま揃う。 */
  .recruit-req-tab:nth-child(odd):last-child { grid-column: 1 / -1; }
  .recruit-req-tab[aria-selected="true"] { border-color: var(--color-blue); }
}

/* 〜389px：チップ幅が151px以下になり「総務・営業・場内管理」（10文字）が
   2行に割れるので、文字を1px詰めて字間も0にする。
   320px以下は詰めても入らず2行になるが、grid-auto-rows: 1fr で
   5枚とも同じ高さになるため崩れては見えない。 */
@media (max-width: 389px) {
  .recruit-req-tab {
    font-size: 13px;
    padding: 12px 4px;
    letter-spacing: 0;
  }
}

@media (max-width: 700px) {
  /* 募集要項テーブル: th/td をブロック化して縦積み */
  .recruit-req-table th,
  .recruit-req-table td {
    display: block;
    width: 100%;
  }
  .recruit-req-table th { padding-bottom: 6px; }
  .recruit-req-table td { padding-top: 0; }
}

/* ==================================================
   モバイル改修 v3（2026-09-02）
   飾り英字・インタビュー写真・番号が画面外にはみ出して切れていたのを修正。
   PC(768px超)の見た目は変更しない。
   ================================================== */
@media (max-width: 767px) {
  /* 飾り英字。clamp の下限90pxが効くため、最長の "Requirements" が
     幅603pxになり画面外へ大きくはみ出していた。
     最長語が390px幅に収まるサイズまで下げ、left のマイナスも0にする。 */
  .recruit-wm {
    font-size: clamp(42px, 11.5vw, 90px);
    left: 0;
  }
  .recruit-entry .recruit-wm { font-size: clamp(46px, 12.5vw, 110px); }

  /* インタビューの重ね写真。left/right の -8% が画面端を越えて切れていた */
  .recruit-itv__sub { left: 0; }
  .recruit-itv--rev .recruit-itv__sub {
    left: auto;
    right: 0;
  }
  /* 大きな連番。right:-6px で右端が切れていた */
  .recruit-itv__num {
    right: 0;
    top: -30px;
    font-size: 64px;
  }
}

/* ==================================================
   数字で見る富士梱包（DATA）：SPのラベルを1行に収める（2026-09-03・ユーザー指摘）
   「社員旅行の実績地」（8文字）だけが2行に折り返し、同じ行に並ぶ「雇用形態」と
   **大きい数字の高さが27pxずれて**いた（393px幅で実測）。
   カードの左右paddingを詰めて（24px→14px）中身を112px→132pxに広げ、
   ラベルも1px小さく字間を詰めて、4枚とも1行に収まるようにする。
   ================================================== */
@media (max-width: 767px) {
  .recruit-data-card { padding: 30px 14px 26px; }
  .recruit-data-card__label {
    font-size: 13px;
    letter-spacing: .02em;
  }
}

/* 〜359px：カードが130pxまで痩せて「社員旅行の実績地」が入り切らないので、もう1px詰める
   （13px×8文字＝106px > 中身102px。12px・字間0なら96pxで収まる） */
@media (max-width: 359px) {
  .recruit-data-card__label {
    font-size: 12px;
    letter-spacing: 0;
  }
}

/* 富士梱包で働く特徴：1列に切り替えるのは600px以下。
   （900pxで切り替えると 601〜900px でカードが678〜797px幅になり、
     1行しかない本文に対して横に間延びして見えていた） */
@media (max-width: 600px) {
  .recruit-feature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================
   総点検 2026-10-07
   ・見出し部品：サイズ・字間を他ページの .section-heading と同じ値に揃えた
     （採用理念の見出しはグリッドの外＝全幅に出したので、下線の長さも他と同じになった）
   ・ヒーローは共通ページヘッダー（top.css .page-head--photo）。旧 .recruit-hero 系は未使用
   ・採用理念：キャッチと本文の間を空け、マーカーが折り返しても文字に沿うように
   ・働く環境カード：半端な段も左から詰め、カード内は左揃え（事業内容のタブ・カードと同じ扱い）
   ================================================== */
.recruit-sec-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.1;
  gap: 16px;
}
.recruit-sec-title__en {
  font-size: 13px;
  letter-spacing: .28em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .recruit-sec-title {
    font-size: 22px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
  }
  .recruit-sec-title__en { order: -1; line-height: 1; }
}

.recruit-message__catch { margin: 0; }
.recruit-page .recruit-message__lead { margin-top: 32px; }
.recruit-u {
  background: linear-gradient(transparent 62%, rgba(0, 80, 209, .18) 62%, rgba(0, 80, 209, .18) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.recruit-env-grid { justify-content: flex-start; }
.recruit-env-item { text-align: left; }
.recruit-env-item__icon { margin: 0 0 18px; }

/* ---------- ENTRY帯：PCで大きく見えていた装飾を縮小（2026-10-07 ユーザー指摘） ----------
   見出し（34px）・本文・ボタンは他ページと同程度なので触らず、
   サイト内で最大だった「Entry」の大英字（220px）だけを約8割に（右の半透明の四角2枚は同日ユーザー指示で削除）。
   英字はトップの Information / Business と同じ比率（1920px で約163px）。位置関係は従来どおり。 */
@media (min-width: 1100px) {
  .recruit-entry .recruit-wm { font-size: clamp(120px, 8.5vw, 165px); }
}

/* ---------- セクションの大英字（Message・Data・Voice など）：PCのサイズを統一（2026-10-07） ----------
   トップの Information / Business・ENTRY帯の Entry と同じ比率（1920px で約163px／1440px で約122px）。
   位置は従来どおり。SP は従来の clamp のまま。 */
@media (min-width: 1100px) {
  .recruit-wm { font-size: clamp(120px, 8.5vw, 165px); }
}

/* ==================================================
   SP見直し 2026-10-07
   ・ページ内リンク（目次）：SPのみ。横にスクロールできるチップ列
   ・仕事を知る：説明文を3行に畳む（recruit.js が .is-collapsible と「続きを読む」ボタンを付ける）
   ・押せる範囲が小さかったリンク（募集要項を見る／インタビューを読む）を高さ44pxに
   ================================================== */
.recruit-pagenav { display: none; }
.recruit-sec { scroll-margin-top: 70px; }
@media (max-width: 767px) {
  .recruit-pagenav {
    display: block;
    background: #fff;
    border-bottom: 1px solid rgba(10, 40, 91, .1);
  }
  .recruit-pagenav ul {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 12px var(--gutter);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .recruit-pagenav ul::-webkit-scrollbar { display: none; }
  .recruit-pagenav a,
  .recruit-pagenav a:link,
  .recruit-pagenav a:visited {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(0, 80, 209, .35);
    color: var(--color-blue);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }

  .recruit-work-card.is-collapsible:not(.is-open) .recruit-work-card__body > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .recruit-work-card__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-blue);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
}
.recruit-work-card__more,
a.recruit-work-card__more:link,
a.recruit-work-card__more:visited,
.recruit-itv__link { min-height: 44px; }

/* コンテンツバーを Contents_bar.webp の形に統一（2026-10-07・定義は top.css の --cbar-*） */
.recruit-sec-bar {
  height: var(--cbar-red-h);
  margin-top: 16px;
  background:
    linear-gradient(var(--cbar-red), var(--cbar-red)) left bottom / var(--cbar-red-w) var(--cbar-red-h) no-repeat,
    linear-gradient(var(--cbar-line), var(--cbar-line)) left bottom / 100% 1px no-repeat;
}
.recruit-sec--voice .recruit-sec-bar,
.recruit-sec--env .recruit-sec-bar {
  background:
    linear-gradient(var(--cbar-red), var(--cbar-red)) left bottom / var(--cbar-red-w) var(--cbar-red-h) no-repeat,
    linear-gradient(var(--cbar-line-dark), var(--cbar-line-dark)) left bottom / 100% 1px no-repeat;
}

/* ---------- ENTRY CTA の色をCONTACT帯と同じ青一色に（2026-10-08 ユーザー指示） ----------
   以前は写真＋紺→青のグラデーション。写真は青を重ねて透かしとしてうっすら残す（ユーザー「写真の透かしはほしい」）。 */
.recruit-entry { background: var(--color-blue); }
.recruit-entry__bg::before { background: color-mix(in srgb, var(--color-blue) 85%, transparent); }

/* ---------- ボタンのホバーをデザイン（Figma botton_normal）に合わせる（2026-10-08） ----------
   白ボタン：白 → 青（#0040a7）＋白文字、矢印は白の輪郭のまま（以前は #0050d1 になり矢印が右へ動いていた） */
.recruit-btn:not(.recruit-btn--white):hover,
a.recruit-btn:not(.recruit-btn--white):hover {
  background: var(--color-blue-hover-2);
  border-color: var(--color-blue-hover-2);
  color: #fff;
}
.recruit-btn:hover .recruit-btn__arw { transform: none; }

/* ---- 先方指定の改行（"\n" → br.br-pc・2026-10-08）を、カード幅が足りる画面でだけ効かせる ----
   3列カードは 1199px 以下だと1行の幅が足りず、指定位置の手前で折れて「短い行」が挟まるため、
   それより狭い画面では指定の改行を出さず自然な折り返しにする。
   声カード（VOICE 03 の最長行「雰囲気なので、無理なく続けられています。」309px）が本文幅 300px に収まるよう、
   PCは左右の余白を 24→18px、字間を .6→.4px に。 */
@media (max-width: 1199px) {
  .recruit-voice-card br.br-pc,
  .recruit-env-item br.br-pc { display: none; }
}
@media (min-width: 1200px) {
  .recruit-voice-card { padding-left: 18px; padding-right: 18px; }
  .recruit-voice-card p { letter-spacing: .4px; }
}

/* ---- 「働く人を知る」の引用の左にあった青＋赤の縦線を削除（2026-10-08 ユーザー指示「青と赤の｜全部取って」） ----
   線のぶんの左余白（24px）も外して、引用の書き出しを本文・肩書きと揃える。 */
.recruit-itv__quote::before { display: none; }
.recruit-itv__quote { padding-left: 0; }