@charset "UTF-8";

/* ==========================================================
   株式会社 小保方建鐵工業 採用サイト（RECRUIT）
   Figmaデザイン（node 4224-980）準拠
   ・全体が青グラデーション背景の1ページLP
   ・色／フォント／.container／.sns 等は style.css の定義を再利用
   ========================================================== */

.page-recruit {
  background: var(--color-main);
}

/* 採用ページ全体：青→濃紺のグラデーション背景（TOP=/recruit/ のみ） */
.recruit {
  position: relative;
  background: linear-gradient(251deg, #0080FF 9.64%, #002A5A 98.78%);
  color: var(--color-white);
  overflow: hidden;
}

/* TOP以外の下層ページはベース背景を白に戻す。
   青グラデーションが必要な箇所は各セクション側で個別に指定する。 */
.recruit-about,
.recruit-person,
.recruit-work,
.recruit-job,
.recruit-faq {
  background: var(--color-white);
  color: var(--color-text);
}

/* 背景動画：画面に固定して追従。FVと各不透明セクションの“下”に敷き、
   透過セクション（ABOUT/MESSAGE/PALSON 等）でだけ20%で透けて見える。 */
.recruit-bgvideo {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* r-banner（ENTRY/CONTACT）に差し掛かったら背景動画を止める（非表示に） */
.recruit-bgvideo.is-hidden {
  opacity: 0;
}

.recruit-bgvideo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 全セクションを背景動画より前面に */
.recruit > section {
  position: relative;
  z-index: 1;
}

/* フッターも背景動画（position:fixed）より前面に。
   これがないとENTRYバナー通過後（フッター到達時）に動画が再表示され、フッターに透けて見える */
.footer {
  position: relative;
  z-index: 1;
}

/* SNSセクション：採用ページでは背景なし（白背景・装飾を消して青地に透過） */
.recruit .sns-section {
  background: transparent;
}

.recruit .sns-section .sns-squares {
  display: none;
}

/* セクション共通の上下余白：コーポレートTOP（.about / .sns-section）と同じリズムに統一 */
.recruit-section {
  padding-block: clamp(72px, 11vw, 168px) clamp(56px, 6vw, 84px);
}

/* ---------- 共通：見出し（EN大文字＋日本語サブ） ---------- */
.r-head {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
}

.r-head--right {
  align-items: flex-end;
  text-align: right;
}

/* 見出し（EN）：トップ内では白ベタ＋白線アウトラインを少しずらして重ねる */
.r-head__en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(46px, 6.2vw, 80px);
  line-height: 0.98;
  letter-spacing: 0.06em;
  color: var(--color-white);
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* アウトライン複製：SVGマスクでストロークの内側半分を消し、
   文字の外側だけに線を出す（stroke-width 4px = 見た目2px） */
.r-head__en-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate(8px, 6px);
  z-index: -1;
  pointer-events: none;
}

.r-head__en-stroke text {
  dominant-baseline: central;
}

.r-head__en-stroke mask text {
  fill: #000;
}

.r-head__en-stroke > text {
  fill: none;
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.r-head__ja {
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: 0.04em;
  color: var(--color-white);
}

/* recruit トップでは全見出し共通 */
.recruit .r-head__ja {
  font-weight: 700;
}

.r-head--blue .r-head__en {
  color: var(--color-white);
}

.r-head--blue .r-head__ja {
  color: var(--color-white);
}

/* MESSAGE / WORKS：塗り・アウトラインとも青グラデーション
   （線側は functions.php が出力する SVG linearGradient #r-en-grad-navy を参照） */
.r-head__en.r-head__en--navy {
  background: linear-gradient(95deg, #002A5A 0.16%, #004CA3 99.84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.r-head__en--navy .r-head__en-stroke > text {
  stroke: url(#r-en-grad-navy);
}

/* MESSAGE（白カード上）：日本語見出しも青グラデに（白のままだと見えない） */
.r-message .r-head__ja {
  background: linear-gradient(109.87deg, #002A5A 0.16%, #004CA3 99.84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 共通：枠線ボタン（もっと知る等） ---------- */
.r-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--color-white);
}

/* タップ／クリック時に軽く沈む押し込みフィードバック */
.r-btn:active,
.r-banner__panel:active,
.rwplace__arrow:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 0.08s;
}

.r-btn__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 全ボタンを最長ラベル「詳しくはこちらから」(9文字) の幅で固定（文字数に合わせない・中央寄せ）。
     border-box なので 文字幅(約9.4em) + 左右padding/border(40px) ぶん。em指定でフォントに連動。 */
  width: calc(9.4em + 40px);
  min-height: 48px;
  padding: 8px 18px;
  border: 2px solid var(--color-white);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.04em;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.r-btn__icon {
  width: 52px;
  height: 52px;
  flex: none;
  transition: transform 0.3s ease;
}

.r-btn:hover .r-btn__label {
  background: var(--color-white);
  color: var(--color-main);
}

.r-btn:hover .r-btn__icon {
  transform: translateX(4px);
}

/* SPのボタン本体（枠付きラベル）は共通で 240×56 に統一
   （%指定は親がinline-flexだと内容幅に潰れるため固定値で指定） */
@media (max-width: 767px) {
  .r-btn__label {
    width: 240px;
    max-width: calc(100vw - 32px);
    min-height: 56px;
  }

  /* SPのボタンは画面センターに配置。上に24pxの余白 */
  .r-btn {
    width: fit-content;
    margin-inline: auto;
    margin-top: 24px;
  }

  .r-about__body .r-btn {
    align-self: center; /* PCの右下寄せを打ち消す */
    margin-bottom: 24px; /* 下の写真ギャラリーとの間に余白を確保 */
  }
}

/* ==========================================================
   FV（ファーストビュー）
   ========================================================== */
.rfv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--color-main);
}

.rfv__photos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.rfv__col {
  position: relative;
  overflow: hidden;
}

.rfv__col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 通常→作業中のクロスフェード。列ごとに --fv-col 分の時間差で発火し、
   01→04 へ波のように流れる。1サイクル(--fv-cycle)で元に戻り無限ループ。 */
.rfv__col-after {
  opacity: 0;
  animation: rfvCross var(--fv-cycle, 8s) ease-in-out infinite;
  /* --fv-start：初回のフェード開始までの待ち（初回のみ。以降のループは連続） */
  animation-delay: calc(var(--fv-start, 0.9s) + var(--fv-col, 0) * var(--fv-stagger, 0.55s));
}

@keyframes rfvCross {
  0% {
    opacity: 0;
  }
  16%,
  46% {
    opacity: 1;
  }
  62%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rfv__col-after {
    animation: none;
  }
}

/* 下部の暗がりグラデ（コピーの可読性確保） */
.rfv__shade {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.rfv__catch {
  position: absolute;
  left: clamp(20px, 2.8vw, 41px);
  bottom: clamp(96px, 16vw, 188px);
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.75);
}

/* 最小値はSP(390px)で「鉄の仕事は、かっこいい。」が1行に収まるサイズ */
.rfv__catch .lg {
  font-size: clamp(37px, 8.3vw, 120px);
}

.rfv__catch .md {
  font-size: clamp(29px, 6.2vw, 90px);
}

.rfv__catch .sm {
  font-size: clamp(24px, 5.3vw, 76px);
}

/* キャッチ：3スライスを上/中/下1/3だけ mask で切り出し、左右からスキューしながらスライドイン（spicato 06） */
.rfv__catch-slice {
  display: block;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: rfvSlice 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.rfv__catch-slice--2,
.rfv__catch-slice--3 {
  position: absolute;
  top: 0;
  left: 0;
}

.rfv__catch-slice--1 {
  -webkit-mask-image: linear-gradient(to bottom, #000 33.34%, transparent 33.34%);
  mask-image: linear-gradient(to bottom, #000 33.34%, transparent 33.34%);
  --tx: -110%;
  --sk: 28deg;
  animation-delay: 0.05s;
}

.rfv__catch-slice--2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 33.34%, #000 33.34%, #000 66.67%, transparent 66.67%);
  mask-image: linear-gradient(to bottom, transparent 33.34%, #000 33.34%, #000 66.67%, transparent 66.67%);
  --tx: 110%;
  --sk: -28deg;
  animation-delay: 0.14s;
}

.rfv__catch-slice--3 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 66.67%, #000 66.67%);
  mask-image: linear-gradient(to bottom, transparent 66.67%, #000 66.67%);
  --tx: -110%;
  --sk: 28deg;
  animation-delay: 0.23s;
}

@keyframes rfvSlice {
  from {
    transform: translateX(var(--tx)) skewX(var(--sk));
    opacity: 0;
  }
  to {
    transform: translateX(0) skewX(0);
    opacity: 1;
  }
}

.rfv__real {
  position: absolute;
  left: clamp(20px, 2.8vw, 41px);
  bottom: clamp(40px, 7vw, 86px);
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-main);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(22px, 4.4vw, 64px);
  letter-spacing: 0.08em;
  line-height: 1.3;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
}

/* 英語：キャッチ(約1s)の後に、バーが左→右に走り、通過後に文字をフェード表示（alfactory） */
.rfv__real-txt {
  position: relative;
  z-index: 0;
  opacity: 0;
  animation: rfvRealTxt 0.01s linear 0.78s both;
}

.rfv__real::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--grad-silver);
  z-index: 1;
  animation: rfvRealBar 0.55s ease 0.5s both;
}

@keyframes rfvRealBar {
  0% {
    left: 0;
    width: 0;
  }
  50%,
  51% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

@keyframes rfvRealTxt {
  to {
    opacity: 1;
  }
}

/* SPのFV：写真4枚を縦積み（横帯）にし、キャッチを3枚目の帯に重ねる。
   キャッチは <br class="br-sp"> で「鉄の仕事は、／かっこいい。」の2行に。
   文字サイズ・字間・配置は Figma node 5119-2659（685px幅）準拠 */
@media (max-width: 767px) {
  .rfv__photos {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }

  .rfv__catch {
    bottom: 29%;
    letter-spacing: 0.08em;
  }

  .rfv__catch .lg {
    font-size: 12.9vw;
  }

  .rfv__catch .md {
    font-size: 9.7vw;
  }

  .rfv__catch .sm {
    font-size: 8.2vw;
  }

  /* Figma準拠：紺帯×白文字（PCと同じ配色）。
     フォントサイズは「REAL SKILL. REAL PRIDE.」が画面内に収まる上限 */
  .rfv__real {
    /* キャッチコピーとの間に余白を確保するため少し下げる */
    bottom: 21%;
    font-size: 4.3vw;
    padding: 4px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rfv__catch-slice,
  .rfv__real-txt,
  .rfv__real::before {
    animation: none;
  }
  .rfv__catch-slice {
    transform: none;
    opacity: 1;
  }
  .rfv__real-txt {
    opacity: 1;
  }
  .rfv__real::before {
    display: none;
  }
}

/* ==========================================================
   ABOUT
   ========================================================== */
.r-about__top {
  display: flex;
  gap: clamp(40px, 7vw, 84px);
  align-items: flex-start;
}

.r-about__lead {
  flex: none;
}

.r-about__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.2vw, 42px);
  align-items: stretch;
  justify-content: center;
}

.r-about__text {
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.08em;
}

.r-about__text p {
  margin: 0;
}

/* 段落間の空き（Figmaの空行に相当） */
.r-about__text p + p {
  margin-top: 1.6em;
}

/* ボタンは本文ブロックの右下に配置 */
.r-about__body .r-btn {
  align-self: flex-end;
}

/* 写真コラージュ（4枚スタッガー）／画面幅いっぱいに展開 */
.r-about__gallery {
  margin-top: clamp(40px, 6vw, 80px);
  /* .container を抜けてビューポート全幅に広げる（フルブリード） */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* SPは .container の左右余白（16px）に合わせる */
  padding-inline: clamp(16px, 4vw, 80px);
  display: grid;
  grid-template-columns: 31% 22.5% 24.5% 19.5%;
  gap: clamp(12px, 1.6vw, 22px);
  align-items: start;
}

.r-about__gallery img {
  width: 100%;
  object-fit: cover;
  /* ふわふわ上下に浮かせる（画像ごとに後で時間差をつける）。
     transform ではなく position:relative + top で動かす。
     transform だと再生中に合成レイヤーへ分離され、画像の上辺が
     青背景に対してにじんで白い線が出てしまうため。 */
  position: relative;
  animation: r-about-float 6s ease-in-out infinite;
}

.r-about__gallery img:nth-child(1) {
  aspect-ratio: 406 / 404;
  margin-top: clamp(20px, 3vw, 40px);
  animation-duration: 6.5s;
  animation-delay: 0s;
}

.r-about__gallery img:nth-child(2) {
  aspect-ratio: 294 / 321;
  animation-duration: 5.5s;
  animation-delay: -0.8s;
}

.r-about__gallery img:nth-child(3) {
  aspect-ratio: 318 / 370;
  margin-top: clamp(36px, 5vw, 74px);
  animation-duration: 7s;
  animation-delay: -1.6s;
}

.r-about__gallery img:nth-child(4) {
  aspect-ratio: 257 / 370;
  animation-duration: 6s;
  animation-delay: -2.4s;
}

@keyframes r-about-float {
  0%,
  100% {
    top: 0;
  }
  50% {
    top: -12px;
  }
}

/* 動きを減らす設定の人にはアニメを止める */
@media (prefers-reduced-motion: reduce) {
  .r-about__gallery img {
    animation: none;
  }
}

@media (max-width: 767px) {
  .r-about__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .r-about__lead {
    padding-top: 0;
  }

  .r-head__en-stroke {
    transform: translate(5px, 4px);
  }

  .r-head__en-stroke > text {
    stroke-width: 3px; /* 見た目1.5px */
  }

  .r-about__gallery {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .r-about__gallery img:nth-child(1) {
    margin-top: 0;
  }

  /* 溶接写真（下段右）は下へずらす（左の工場台写真の下端より気持ち上） */
  .r-about__gallery img:nth-child(3) {
    margin-top: 36px;
  }

  /* 下段2枚（溶接・工場台）は左右を入れ替えて表示 */
  .r-about__gallery img:nth-child(1) { order: 1; }
  .r-about__gallery img:nth-child(2) { order: 2; }
  .r-about__gallery img:nth-child(3) { order: 4; }
  .r-about__gallery img:nth-child(4) { order: 3; }
}

/* ==========================================================
   MESSAGE
   ========================================================== */
/* 次のWORKS（斜めカット背景）との間は共通リズムの1.5倍あける */
.r-message {
  padding-bottom: clamp(84px, 9vw, 126px);
}

/* 明るいカード（右上・左下を青で面取りしたSVGを背景に敷く） */
.r-message__inner {
  display: flex;
  gap: clamp(40px, 6vw, 84px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  background-image: url(../images/top/message-bg.svg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.28));
  color: var(--color-text, #2a2c2d);
}

/* 左カラム：見出し＋ポートレート＋氏名 */
.r-message__card {
  flex: none;
  width: clamp(280px, 38%, 450px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vw, 21px);
}

.r-message__card .r-head {
  align-self: flex-start;
}

.r-message__portrait {
  width: 86%;
  max-width: 330px;
  aspect-ratio: 383 / 458;
  height: auto;
  object-fit: contain;
  margin-top: 4px;
}

.r-message__name {
  text-align: center;
}

.r-message__name-ja {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

.r-message__name-en {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: 0.04em;
  color: #b3b3b3;
  margin-top: 2px;
}

/* 右カラム：本文（明朝・太字・濃色） */
.r-message__text {
  flex: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: #2a2c2d;
}

.r-message__text p {
  margin: 0;
}

.r-message__text p + p {
  margin-top: 1.6em;
}

@media (max-width: 1023px) {
  .r-message__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .r-message__card {
    width: 100%;
  }

  .r-message__portrait {
    width: 230px;
  }

  .r-message__text {
    align-self: auto;
  }
}

@media (max-width: 767px) {
  /* SPは白カードを画面横幅いっぱいに広げる */
  .r-message > .container {
    width: 100%;
  }

  /* 背景SVG（青フチカード）をやめ、コーポレートTOPのWORKSと同じ
     カット角の白面に差し替える（角は右上と左下の2箇所） */
  .r-message__inner {
    background: #fff;
    background-image: none;
    clip-path: polygon(
      0 0,
      calc(100% - 48px) 0,
      100% 40px,
      100% 100%,
      48px 100%,
      0 calc(100% - 40px)
    );
    filter: none; /* clip-pathで影が切れるため無効化 */
    padding: 48px 16px 56px;
  }
}

/* ==========================================================
   WORKS（背景写真）
   ========================================================== */
.r-works {
  position: relative;
  /* ボタン下に余白を確保（PLACE はこの増加分を相殺するよう引き上げる） */
  padding-bottom: clamp(150px, 18vw, 280px);
}

/* 上下を平行な斜めカット（平行四辺形）にして背景画像を流し込む。傾きは上辺基準（--works-slant）。 */
.r-works__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.r-works__bg::before {
  --works-slant: clamp(36px, 6.5vw, 100px);
  content: "";
  position: absolute;
  inset: 0;
  /* Figma準拠：左から白のグラデーションで写真を明るくし、テキストは濃色で載せる */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.08) 100%),
    url("../images/recruit/works/recruit-works-bg.webp") center / cover no-repeat,
    var(--color-main);
  /* 上辺＝右へ下がる斜め（↘）／下辺＝逆向きで右へ上がる斜め（↗） */
  clip-path: polygon(
    0 0,
    100% var(--works-slant),
    100% calc(100% - var(--works-slant)),
    0 100%
  );
}

.r-works .container {
  position: relative;
  z-index: 1;
}

.r-works__body {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  align-items: flex-start;
}

.r-works__text {
  font-weight: 700;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 2;
  letter-spacing: 0.03em;
  color: #2A2C2D;
}

.r-works__text p + p {
  margin-top: 1.4em;
}

/* 見出し（日本語）も青グラデーション */
.r-works .r-head__ja {
  background: linear-gradient(109.87deg, #002A5A 0.16%, #004CA3 99.84%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ボタン：白背景＋青グラデーション枠＋ネイビー文字（明るい背景用）。
   グラデーション枠は border-box / padding-box の2層背景で表現 */
.r-works .r-btn {
  color: var(--color-main);
}

.r-works .r-btn__label {
  border-color: transparent;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    linear-gradient(251deg, #0080FF 9.64%, #002A5A 98.78%) border-box;
}

.r-works .r-btn:hover .r-btn__label {
  background:
    linear-gradient(251deg, #0080FF 9.64%, #002A5A 98.78%) padding-box,
    linear-gradient(251deg, #0080FF 9.64%, #002A5A 98.78%) border-box;
  color: var(--color-white);
}

/* ==========================================================
   PLACE（はたらく環境・コラージュ）
   ========================================================== */
.r-place {
  position: relative;
  /* WORKS の下余白増加分を相殺しつつ青い隙間をなくす（ボタン下余白は残る） */
  margin-top: calc(-1 * clamp(90px, 11vw, 180px));
}

/* 型（recruit-place-shape.webp）でマスクして背景画像を流し込む（WORKSと同じ方式・カット向き違い） */
.r-place__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.r-place__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("../images/recruit/place/recruit-place-bg.webp") center / cover no-repeat,
    var(--color-main);
  -webkit-mask: url("../images/recruit/place/recruit-place-shape.webp") center / 100% 100% no-repeat;
  mask: url("../images/recruit/place/recruit-place-shape.webp") center / 100% 100% no-repeat;
}

/* SP：斜め線をWORKSの斜め（右から左へ下がる＝左が低い・--works-slant）の角度・向きで統一。
   WORKSは台形→平行四辺形に、PLACEはマスク画像（縦横比で角度が急になる）をやめて同じclip-pathに */
@media (max-width: 767px) {
  /* 前のセクションとの間をもう少し空ける（透過部分には背景動画がのぞく） */
  .r-works {
    margin-top: 40px;
  }

  .r-works__bg::before {
    /* PC用画像は上下に紺帯が焼き込まれておりSPの縦長表示で黒い帯に見えるため、
       帯を切り落としたクリーン版（recruit-works-bg-sp.webp）に差し替える。
       縦長クロップでも人物（画像の右寄り）が入るよう横位置を72%に */
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0.08) 100%),
      url("../images/recruit/works/recruit-works-bg-sp.webp") 72% center / cover no-repeat,
      var(--color-main);
    clip-path: polygon(
      0 var(--works-slant),
      100% 0,
      100% calc(100% - var(--works-slant)),
      0 100%
    );
  }

  /* PLACEの斜めは左から右へ下がる向き（上下とも平行・角度はWORKSと同じ） */
  .r-place__bg::before {
    --works-slant: clamp(36px, 6.5vw, 100px);
    -webkit-mask: none;
    mask: none;
    clip-path: polygon(
      0 0,
      100% var(--works-slant),
      100% 100%,
      0 calc(100% - var(--works-slant))
    );
  }

  /* 「もっと知る」ボタンの下に余白を確保（下辺の斜めカット分も考慮して広めに） */
  .r-place {
    padding-bottom: 96px;
  }
}

.r-place .container {
  position: relative;
  z-index: 1;
}

.r-place__head {
  display: flex;
  justify-content: flex-end;
}

/* Figma準拠の散らし配置（コラージュ）。1312×618 の領域に各写真を絶対配置。 */
.r-place__grid {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  width: 100%;
  aspect-ratio: 1312 / 618;
}

.r-place__item {
  position: absolute;
  margin: 0;
  /* 位置は left/top で取るので transform は空いている → ふわふわ浮遊に使う。
     周期・遅延・振幅・回転を nth-child ごとに変え、バラバラに揺らす。 */
  animation: rPlaceFloat var(--fl-dur, 6s) ease-in-out var(--fl-delay, 0s) infinite;
  will-change: transform;
}

/* バラバラのふわふわ：中間で各自の方向へ漂って戻る */
@keyframes rPlaceFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, var(--fl-y, -12px), 0) rotate(var(--fl-rot, 0.6deg));
  }
}

/* カード全体を「仕事を知る」該当セクションへのリンクにする（画像＋ラベルを内包） */
.r-place__link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  color: var(--color-white);
  text-decoration: none;
}

.r-place__item img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.r-place__link:hover img {
  transform: scale(1.05);
}

/* 安心の教育制度（左・縦長） */
.r-place__item:nth-child(1) {
  left: 0;
  top: 7.4%;
  width: 28.1%;
  height: 74.9%;
  --fl-dur: 6.6s;
  --fl-delay: -0.6s;
  --fl-y: -14px;
  --fl-rot: 0.8deg;
}
/* 福利厚生（上・中央寄り・横長） */
.r-place__item:nth-child(2) {
  left: 39.6%;
  top: 0;
  width: 29.3%;
  height: 40.9%;
  --fl-dur: 5.2s;
  --fl-delay: -2.4s;
  --fl-y: 12px;
  --fl-rot: -0.7deg;
}
/* 組織の雰囲気（下・中央寄り） */
.r-place__item:nth-child(3) {
  left: 34.1%;
  top: 57.1%;
  width: 28.7%;
  height: 42.9%;
  --fl-dur: 7.3s;
  --fl-delay: -1.1s;
  --fl-y: -16px;
  --fl-rot: -0.5deg;
}
/* キャリアステップ（右） */
.r-place__item:nth-child(4) {
  left: 74.8%;
  top: 22%;
  width: 25.2%;
  height: 54.2%;
  --fl-dur: 5.8s;
  --fl-delay: -3.2s;
  --fl-y: 13px;
  --fl-rot: 0.9deg;
}

@media (prefers-reduced-motion: reduce) {
  .r-place__item {
    animation: none;
  }
}

.r-place__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.r-place__label::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #0084FF;
}

.r-place__more {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: flex-end;
}

/* タブレット以下：散らしをやめて素直な2列／1列に */
@media (max-width: 1023px) {
  .r-place__grid {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 2vw, 22px);
  }

  /* nth-child の絶対配置（left/top/width/height）を打ち消す。
     nth-child と同じ詳細度で列挙して確実に上書きする */
  .r-place__item,
  .r-place__item:nth-child(1),
  .r-place__item:nth-child(2),
  .r-place__item:nth-child(3),
  .r-place__item:nth-child(4) {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  .r-place__item img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .r-place__label {
    left: 12px;
    bottom: 10px;
  }
}

@media (max-width: 600px) {
  .r-place__grid {
    grid-template-columns: 1fr;
  }
}

/* SP：少し小さめのカードをランダム風にバランスよく散らすコラージュ配置
   （タブレットの整列グリッドを打ち消して絶対配置に戻す） */
@media (max-width: 767px) {
  .r-place__grid {
    display: block;
    position: relative;
    aspect-ratio: 39 / 50;
  }

  .r-place__item,
  .r-place__item:nth-child(1),
  .r-place__item:nth-child(2),
  .r-place__item:nth-child(3),
  .r-place__item:nth-child(4) {
    position: absolute;
  }

  .r-place__item img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* 安心の教育制度（左上・縦長） */
  .r-place__item:nth-child(1) {
    left: 0;
    top: 6%;
    width: 46%;
    height: 40%;
  }

  /* 福利厚生（右上・横長） */
  .r-place__item:nth-child(2) {
    left: 52%;
    top: 8%;
    width: 48%;
    height: 30%;
  }

  /* 組織の雰囲気（右中・少し下げてジグザグを強調） */
  .r-place__item:nth-child(3) {
    left: 50%;
    top: 52%;
    width: 50%;
    height: 34%;
  }

  /* キャリアステップ（左下） */
  .r-place__item:nth-child(4) {
    left: 0;
    top: 52%;
    width: 44%;
    height: 40%;
  }
}

/* ==========================================================
   PALSON（はたらく人：主役大カード＋小カード列・Figma node 4224-1010 準拠）
   ========================================================== */
.r-palson__head {
  display: flex;
}

/* 主役カード（左・大）＋サイド（右：矢印＋小カード列） */
.r-palson__stage {
  margin-top: clamp(32px, 4vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 35px);
  /* 左＝.container 基準のまま／右だけビューポート端まで突き抜けさせ、
     小カード列を画面いっぱいに流して右の青い余白をなくす。 */
  margin-right: calc(50% - 50vw);
}

.r-palson__side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(24px, 3vw, 42px);
}

/* 矢印（枠付き四角＋三角） */
.r-palson__nav {
  display: flex;
  gap: clamp(16px, 2vw, 40px);
  /* 小カード列は画面端まで流すが、矢印は元の .container 右端に揃える
     （656px = コンテナ最大幅 1312px の半分）。 */
  margin-right: max(40px, calc(50vw - 656px));
}

.r-palson__arrow {
  position: relative;
  width: clamp(44px, 4vw, 52px);
  height: clamp(44px, 4vw, 52px);
  border: 1px solid var(--color-light-gray);
  background: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.r-palson__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--color-white);
  transform: translate(-50%, -50%);
}

.r-palson__arrow--prev::before {
  border-width: 7px 11px 7px 0;
  border-color: transparent var(--color-white) transparent transparent;
}

.r-palson__arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

/* 主役カード（大）の窓：はみ出しをクリップし、中で現在＝次のカードを横スライドさせる。
   影は窓側に出す（中身を overflow:hidden で切るため）。 */
.r-palson__featured {
  flex: 0 0 clamp(280px, 30vw, 425px);
  aspect-ratio: 425 / 725;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.6);
}

/* 主役カードは窓いっぱいに重ねて配置（JSが2枚並べてスライド） */
.r-palson__featured .r-person--featured {
  position: absolute;
  inset: 0;
  flex: none;
  box-shadow: none;
  will-change: transform;
}

/* 小カード列の窓：はみ出しをクリップ。中の .r-palson__strip がトラック */
.r-palson__strip-view {
  width: 100%;
  overflow: hidden;
}

/* 小カード列（トラック：JSが transform で1枚ずつ横へ流す） */
.r-palson__strip {
  display: flex;
  gap: clamp(20px, 2.6vw, 44px);
  padding-bottom: 4px;
  will-change: transform;
}

/* 人物カード共通 */
.r-person {
  position: relative;
  flex: 0 0 clamp(240px, 24vw, 319px);
  aspect-ratio: 425 / 725;
  overflow: hidden;
  scroll-snap-align: start;
  color: var(--color-white);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.55);
}

.r-person--featured {
  flex: 0 0 clamp(280px, 30vw, 425px);
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.6);
}

/* カード全体を該当インタビュー（/recruit-person/?member=...）へのリンクにする */
.r-person__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.r-person__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下の黒グラデ（氏名を見やすく） */
.r-person::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* 縦書きキャッチ（左上） */
.r-person__vtext {
  position: absolute;
  top: clamp(20px, 3vw, 40px);
  left: clamp(22px, 2.2vw, 32px);
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 20px);
  /* 縦書きなので letter-spacing = 文字の上下間隔。詰めて間延びを抑える。 */
  letter-spacing: 0.02em;
  text-shadow: 0 0 9px rgba(0, 0, 0, 0.35);
}

.r-person--featured .r-person__vtext {
  font-size: clamp(20px, 2.2vw, 26px);
}

/* フッター：［役職 → 氏名 → 入社年］ */
.r-person__foot {
  position: absolute;
  left: clamp(22px, 2.2vw, 32px);
  right: clamp(16px, 1.8vw, 24px);
  bottom: clamp(20px, 2.4vw, 30px);
  z-index: 1;
}

.r-person__year {
  display: block;
  font-size: clamp(12px, 1.1vw, 13px);
  letter-spacing: 0.04em;
  margin-top: clamp(8px, 1vw, 13px);
}

.r-person--featured .r-person__year {
  font-size: clamp(14px, 1.4vw, 18px);
}

.r-person__id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 0.5vw, 8px);
}

.r-person__role {
  flex: none;
  font-weight: 500;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.04em;
}

.r-person--featured .r-person__role {
  font-size: clamp(16px, 1.6vw, 22px);
}

.r-person__name {
  font-weight: 500;
  font-size: clamp(22px, 2.3vw, 33px);
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.r-person--featured .r-person__name {
  font-size: clamp(28px, 3vw, 44px);
}

/* タブレット以下：主役カードを少し抑える */
@media (max-width: 1023px) {
  .r-palson__stage {
    gap: 20px;
  }
}

/* SP専用：全員を横並び・1枚ずつスワイプで見るリスト（PCでは非表示） */
.r-palson__sp-list {
  display: none;
}

/* スマホ：主役の拡大表示（カルーセル）は使わず、
   全員を横並びスクロール（スナップで1画面1枚ずつ）で見せる */
@media (max-width: 767px) {
  .r-palson__stage {
    display: none;
  }

  .r-palson__sp-list {
    display: flex;
    gap: 16px;
    margin-top: 24px;
    /* 右は .container の余白(16px)を打ち消して画面端までブリード */
    margin-right: -16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* 影の逃げ */
    padding-block: 8px;
    /* スクロールバーは隠す（スワイプ操作前提） */
    scrollbar-width: none;
  }

  .r-palson__sp-list::-webkit-scrollbar {
    display: none;
  }

  /* 1枚がほぼ一画面。右端に次のカードが少し見えてスワイプできると分かる */
  .r-palson__sp-list .r-person {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
}

.r-palson__more {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================
   SNS（既存 .sns コンポーネントを再利用：青背景に馴染ませる微調整のみ）
   ========================================================== */
.recruit .sns {
  margin-top: 0;
}

/* ==========================================================
   Q&A
   ========================================================== */
.r-qa {
  position: relative;
  margin-top: clamp(56px, 8vw, 120px);
  background: var(--color-main);
}

.r-qa__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.r-qa__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.r-qa__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(2, 14, 36, 0.78);
}

.r-qa .container {
  position: relative;
  z-index: 1;
}

.r-qa__head {
  display: flex;
  justify-content: flex-end;
}

.r-qa__list {
  margin-top: clamp(36px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.r-faq {
  background: var(--color-white);
  border: 1px solid var(--color-main);
  color: var(--color-text);
  border-radius: 2px;
  overflow: hidden;
}

.r-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: clamp(16px, 1.6vw, 21px);
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
}

.r-faq__mark {
  width: 21px;
  height: auto;
  flex: none;
}

.r-faq__qtext {
  flex: 1;
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.r-faq__toggle {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
}

.r-faq__toggle::before,
.r-faq__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--color-main);
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.r-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.r-faq.is-open .r-faq__toggle::after {
  opacity: 0;
}

.r-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.r-faq.is-open .r-faq__a {
  grid-template-rows: 1fr;
}

.r-faq__a-inner {
  overflow: hidden;
}

.r-faq__a-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0 clamp(16px, 1.6vw, 21px) clamp(16px, 1.6vw, 21px);
}

.r-faq__a-text {
  flex: 1;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.r-qa__more {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex;
  justify-content: flex-end;
}

/* SPは「もっと見る」ボタンまわりの余白を広めに */
@media (max-width: 767px) {
  .r-qa {
    padding-bottom: 96px;
  }

  /* 最後の質問とボタンの間 */
  .r-qa__more {
    margin-top: 44px;
  }
}

/* 回答内の関連リンク（FAQページの「詳しくはこちら」など） */
.r-faq__link {
  margin-top: 4px;
}

.r-faq__link a {
  color: var(--color-link, #0059ff);
  font-weight: 700;
  text-decoration: none;
}

.r-faq__link a:hover {
  text-decoration: underline;
}

.r-faq__link-arrow {
  font-size: 0.8em;
  margin-left: 6px;
}

/* ==========================================================
   よくあるご質問ページ（/recruit-faq/）専用ラッパー
   ヒーローは .rabout-hero、各設問は .r-faq を流用。
   背景は recruit-job（.rjob__bg）と同じ淡いグレーのグラデーション。
   ========================================================== */
.rfaq {
  position: relative;
  padding-block: clamp(56px, 9vw, 126px);
}

.rfaq__bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/recruit/common/recruit-facet-bg.webp") top center / 100% auto no-repeat,
    radial-gradient(120% 80% at 85% 0%, #eef1f5 0%, #ffffff 55%),
    radial-gradient(120% 80% at 0% 100%, #eef1f5 0%, #ffffff 55%),
    #ffffff;
  pointer-events: none;
}

.rfaq .container {
  position: relative;
  z-index: 1;
}

.rfaq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 21px);
}

/* ==========================================================
   ENTRY / CONTACT バナー
   ========================================================== */
.r-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.r-banner__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.4vw, 35px);
  padding: clamp(40px, 5vw, 64px) 24px;
  min-height: clamp(220px, 23vw, 333px);
  overflow: hidden;
  text-align: center;
}

.r-banner__panel--entry {
  background: #06C755;
  color: var(--color-white);
}

.r-banner__panel--entry .r-banner__bg {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.r-banner__panel--contact {
  background: var(--grad-silver);
  color: var(--color-main);
}

.r-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.r-banner__char {
  position: absolute;
  left: -1.5%;
  bottom: 0;
  width: clamp(140px, 15vw, 210px);
  aspect-ratio: 111 / 142;
  height: auto;
  object-fit: cover;
  object-position: 50% top;
  z-index: 1;
}

.r-banner__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.r-banner__icon {
  width: clamp(44px, 5.5vw, 80px);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
}

.r-banner__en {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.r-banner__lead {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}

.r-banner__lead p {
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.r-banner__arrow {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
}

.r-banner__panel--entry .r-banner__arrow {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
}

.r-banner__panel--entry .r-banner__arrow::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #06C755;
}

.r-banner__panel--contact .r-banner__arrow {
  border: 2px solid var(--color-main);
}

.r-banner__panel--contact .r-banner__arrow::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--color-main);
}

.r-banner__panel:hover .r-banner__arrow {
  transform: translateX(3px);
  transition: transform 0.3s ease;
}

@media (max-width: 767px) {
  .r-banner {
    grid-template-columns: 1fr;
  }

  /* テキストの右横に小さめの四角矢印を並べる */
  .r-banner__lead {
    gap: 16px;
  }

  .r-banner__arrow {
    width: 40px;
    height: 40px;
  }

  .r-banner__panel--entry .r-banner__arrow::before,
  .r-banner__panel--contact .r-banner__arrow::before {
    border-width: 6px 0 6px 9px;
  }

  .r-banner__char {
    width: clamp(110px, 30vw, 150px);
  }

  /* ENTRYはキャラクターと文字が被らないよう、
     キャラクターの右側スペース内でテキスト＋矢印をセンタリング */
  .r-banner__panel--entry .r-banner__title,
  .r-banner__panel--entry .r-banner__lead {
    align-self: flex-end;
    width: calc(100% - clamp(84px, 23vw, 120px));
    justify-content: center;
  }

  /* 「共に働く仲間を募集しています」が途中で折り返さないサイズに */
  .r-banner__panel--entry .r-banner__lead p {
    font-size: 13px;
  }
}

/* ==========================================================
   フェードイン（style.css の .fade-up と同じ挙動）
   ========================================================== */
.recruit .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fd, 0s); /* 同時に入った要素のスタッガー用（JSが付与） */
}

.recruit .fade-up.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .recruit .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   追従CTA（LINEから応募受付中）：全採用ページに固定表示
   ========================================================== */
.recruit-cta-float {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 80;
  width: 30vw;
  min-width: 200px;
  max-width: 420px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.28));
  /* 初期は非表示。タイトルが出終わった後に is-visible でふわっとフェードイン（JSで付与） */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.3s ease;
}

.recruit-cta-float.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* r-banner（ENTRY/CONTACT）に入ったら、is-visible より優先してフェードアウト */
.recruit-cta-float.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.recruit-cta-float img {
  width: 100%;
  height: auto;
}

.recruit-cta-float.is-visible:hover {
  transform: translateY(-4px);
}

@media (max-width: 767px) {
  .recruit-cta-float {
    width: 65vw;
    min-width: 160px;
    right: 0;
    bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-cta-float {
    transition: opacity 0.4s ease;
    transform: none;
  }

  .recruit-cta-float.is-visible {
    transform: none;
  }
}

/* ==========================================================
   採用「私たちについて」下層ページ（page-recruit-about.php）
   Figmaデザイン（node 4224-2196）準拠。
   専用ヘッダー（.rheader）＋ hero / POINT / WORKS / SCHEDULE。
   SNS・r-banner・フッターは既存定義を再利用する。
   ========================================================== */

/* 採用下層ページの body 背景（フッター下まで濃紺で繋ぐ） */
.page-template-page-recruit-about {
  background: var(--color-main);
}

/* ---------- 採用特設サイト ヘッダー ---------- */
.rheader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* コーポレートヘッダーと同じく背景は常に透過。スクロールしても背景は敷かない。 */

.rheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 90%;
  margin-inline: auto;
  min-height: 72px;
  padding-block: 14px;
}

.rheader__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.rheader__logo img {
  display: block;
  height: clamp(30px, 3.4vw, 40px);
  width: auto;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.35));
}

.rheader__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px solid var(--color-white);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.rheader__nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2vw, 28px);
}

.rheader__menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 21px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.rheader__menu a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.rheader__menu a:hover {
  opacity: 0.7;
}

/* PCでは実メニューはレイアウト確保とクリック用に残しつつ透明化。
   見た目は body 直下の .nav-blend--recruit（差分合成）で描画する（コーポレートと同仕様） */
@media (min-width: 1024px) {
  .rheader__menu a {
    opacity: 0;
    text-shadow: none;
  }
}

/* 差分合成メニューの採用サイト版：実メニュー(.rheader__menu)と同じ字面・間隔に合わせる */
.nav-blend--recruit ul {
  gap: clamp(14px, 1.6vw, 21px);
}

.nav-blend--recruit a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.rheader__corp-arrow {
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.rheader__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 150px;
  height: 42px;
  padding-right: 14px;
  background: var(--grad-silver);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  color: var(--color-main);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: 0.3s ease;
}

.rheader__cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.75s ease;
}

.rheader__cta img {
  width: 24px;
  height: 24px;
}

.rheader__cta:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.rheader__cta:hover::after {
  left: 150%;
}

/* ハンバーガー（SPのみ表示） */
.rheader__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  /* flexで縮んでタップ領域が狭くならないようにする */
  flex: none;
}

.rheader__toggle span {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  /* 通常時は透明。見た目は body 直下の .toggle-blend（差分合成）が描画する */
  background: transparent;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* メニューを開いている間はドロワーの上に×を白で描く */
.rheader.is-menu-open .rheader__toggle span {
  background: var(--color-white);
}

/* ---------- HERO（ABOUT） ---------- */
.rabout-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(280px, 38vw, 350px);
  padding: clamp(28px, 4vw, 56px);
  overflow: hidden;
}

.rabout-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.rabout-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 16, 40, 0.45) 0%, rgba(7, 16, 40, 0.15) 40%, rgba(7, 16, 40, 0.35) 100%),
    rgba(0, 92, 168, 0.28);
}

.rabout-hero__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1440px - 112px);
  margin-inline: auto;
}

.rabout-hero__en {
  font-family: var(--font-en);
  font-weight: 800;
  /* 最小値はSP(390px)で最長の「RECRUITMENT」が収まるサイズ */
  font-size: clamp(34px, 8vw, 80px);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin: 0;
}

.rabout-hero__ja {
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.04em;
  color: var(--color-white);
  margin-top: 4px;
}

/* ---------- 共通：小ラベル見出し（EN小・グレー＋日本語大） ---------- */
.r-head--label {
  gap: clamp(14px, 2vw, 21px);
}

.r-head--label .r-head__en {
  font-size: clamp(20px, 2.3vw, 24px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gray);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.r-head--label .r-head__en::after {
  content: none;
}

.r-head--label .r-head__ja {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--color-white);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ---------- POINT：仕事の特徴 ---------- */
.rpoint {
  position: relative;
  color: var(--color-text);
  background: #ffffff;
  overflow: hidden;
}

/* 薄いグレーのフェード（Figmaのファセット背景の代替） */
.rpoint__bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/recruit/common/recruit-facet-bg.webp") top center / 100% auto no-repeat,
    radial-gradient(120% 90% at 80% 0%, #eef1f5 0%, #ffffff 60%),
    linear-gradient(180deg, #f4f6f9 0%, #ffffff 70%);
  pointer-events: none;
}

.rpoint .container {
  position: relative;
  z-index: 1;
}

.rpoint__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(40px, 6vw, 84px);
}

.rpoint__head .r-head__ja {
  color: transparent;
  background-image: linear-gradient(241deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rpoint__text {
  margin-top: clamp(24px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text);
}

.rpoint__text p {
  margin: 0;
}

/* POINT：仕事の特徴の図版（3円ベン図／画像1枚） */
.rpoint__venn-img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin-inline: auto;
}

/* ---------- WORKS：主な業務内容 ---------- */
.rworks {
  background: linear-gradient(257deg, #0084ff 4%, #001e40 105%);
  color: var(--color-white);
  padding-block: clamp(72px, 10vw, 120px);
}

.rworks__head {
  margin-bottom: clamp(32px, 4vw, 48px);
}

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

.rworks__tabs {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
  margin-left: auto;
}

.rworks__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(96px, 8.5vw, 128px);
  min-height: 36px;
  padding: 8px 14px 9px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.rworks__tab-text {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rworks__tab.is-active {
  background: var(--color-white);
  color: #24364f;
}

.rworks__panels {
  min-width: 0;
}

.rworks__panel {
  display: flex;
  align-items: stretch;
  height: 340px;
  background: var(--color-white);
  color: var(--color-text);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(5, 22, 52, 0.14);
}

.rworks__panel[hidden] {
  display: none;
}

.rworks__photo {
  flex: none;
  width: min(100%, 42%);
  height: 100%;
  overflow: hidden;
}

.rworks__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rworks__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(16px, 2vw, 24px) clamp(20px, 2.4vw, 32px);
  background:
    radial-gradient(120% 120% at 100% 50%, rgba(0, 128, 255, 0.08) 0%, rgba(0, 128, 255, 0) 48%),
    linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
}

.rworks__title {
  font-weight: 900;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  color: transparent;
  background-image: linear-gradient(229deg, #0080ff 10%, #002a5a 99%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
}

.rworks__lead {
  width: 100%;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: #2b2b2b;
}

.rworks__lead p {
  margin: 0;
}

/* ---------- SCHEDULE：社員の1日の流れ ---------- */
.rschedule {
  position: relative;
  padding-block: clamp(56px, 8vw, 84px);
  color: var(--color-white);
  overflow: hidden;
}

.rschedule__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rschedule__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.9) 80%);
}

.rschedule .container {
  position: relative;
  z-index: 1;
}

.rschedule__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  max-width: 760px;
}

.rschedule__list {
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.rschedule__items {
  list-style: none;
  margin: 0;
  padding: 21px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rschedule__item {
  display: flex;
  align-items: center;
  gap: 38px;
  padding-left: 14px;
}

.rschedule__time {
  flex: none;
  width: 80px;
  border: 1px solid var(--color-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-align: center;
}

.rschedule__task {
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 20px);
  letter-spacing: 0.08em;
}

.rschedule__note {
  font-size: 16px;
  line-height: 2;
  margin: 0;
}

/* ==========================================================
   レスポンシブ（採用 ABOUT）
   ========================================================== */
@media (max-width: 1023px) {
  .rpoint__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .rpoint__venn-img {
    width: min(100%, 420px);
  }

  .rworks__panel {
    min-height: 0;
    height: 300px;
  }

  .rworks__photo {
    width: 46%;
  }
}

/* ヘッダーをハンバーガーに切り替えるブレイクポイント（コーポレート header と同じ 750px） */
@media (max-width: 750px) {
  .rheader__toggle {
    display: flex;
    /* 開いたドロワー（.header__nav の z-index:90）より前面に置き、×ボタンとして押せるようにする */
    position: relative;
    z-index: 95;
  }

  .rheader__nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 28px 40px;
    background: rgba(7, 16, 40, 0.97);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
  }

  .rheader__nav.is-open {
    transform: translateX(0);
  }

  .rheader__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .rheader__menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .rheader__menu a {
    padding: 16px 4px;
    font-size: 16px;
  }

  .rheader__cta {
    margin-top: 24px;
    width: 100%;
    height: 56px; /* ハンバーガーメニュー内のCTAは高さ56px */
  }

  /* メニュー開時：ハンバーガーを×に */
  .rheader.is-menu-open .rheader__toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .rheader.is-menu-open .rheader__toggle span:nth-child(2) {
    opacity: 0;
  }

  .rheader.is-menu-open .rheader__toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* SPヘッダー：左右余白を20pxに詰め、ロゴ・バッジを縮小して
   ブランド＋ハンバーガーが画面内に収まるようにする */
@media (max-width: 767px) {
  .rheader__inner {
    /* 左右余白は .container と同じ16pxに統一 */
    width: min(100% - 32px, 100%);
    gap: 12px;
    /* SPはヘッダー上の余白を20pxに（min-heightの中央寄せを解除して確実に20pxにする） */
    min-height: 0;
    padding-block: 20px 14px;
  }

  .rheader__brand {
    gap: 10px;
    min-width: 0;
  }

  .rheader__logo img {
    width: clamp(120px, 40vw, 180px);
    height: auto;
  }

  .rheader__badge {
    /* SPは上下パディングなしでコンパクトに */
    padding: 0 8px;
    font-size: 11px;
  }
}

@media (max-width: 767px) {
  .rworks__tabs {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    margin-left: 0;
  }

  .rworks__tab {
    flex: 0 1 calc(50% - 4px);
    min-width: 0;
    border-radius: 0; /* SPは角丸なしの四角 */
    padding: 10px 10px;
  }

  .rworks__panel {
    flex-direction: column;
    height: auto;
  }

  .rworks__photo {
    width: 100%;
    height: clamp(160px, 44vw, 220px);
  }

  .rschedule__item {
    gap: 20px;
  }

  .rschedule__time {
    width: 68px;
    font-size: 17px;
  }

  /* SPは背景写真を人物中心の縦構図で見せ、全体を暗めに落として文字を立たせる */
  .rschedule__bg {
    object-position: 62% center;
    filter: brightness(0.55);
  }

  .rschedule__overlay {
    background: rgba(0, 0, 0, 0.45);
  }

  /* 時間と内容のテキストは14pxに */
  .rschedule__time {
    width: 62px;
    font-size: 14px;
  }

  .rschedule__task {
    font-size: 14px;
  }
}


/* ==========================================================
   採用「仕事を知る」下層ページ（page-recruit-work.php）
   Figmaデザイン（node 4224-2403）準拠。
   hero は ABOUT の .rabout-hero を流用。
   SNS・r-banner・フッターは既存定義を再利用する。
   ========================================================== */

/* フッター下まで濃紺で繋ぐ */
.page-template-page-recruit-work {
  background: var(--color-main);
}

/* セクション共通の上下余白 */
.rwsec {
  padding-block: clamp(56px, 8vw, 96px);
}

/* ---------- POINT：安心の教育制度（白背景＋ローポリ） ---------- */
.rwedu {
  position: relative;
  background: var(--color-white);
  color: var(--color-text);
  overflow: hidden;
}

/* 白地のローポリ（多角形）テクスチャ */
/* ヒーロー直下：他の下層ページ（about/person/job/faq）と同じ白地ファセット背景 */
.rwedu__bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/recruit/common/recruit-facet-bg.webp") top center / 100% auto no-repeat,
    radial-gradient(120% 90% at 80% 0%, #eef1f5 0%, #ffffff 60%),
    linear-gradient(180deg, #f4f6f9 0%, #ffffff 70%);
  pointer-events: none;
}

.rwedu .container {
  position: relative;
  z-index: 1;
}

.rwedu__head {
  margin-bottom: clamp(28px, 4vw, 42px);
}

/* 白背景なので日本語見出しは紺青グラデへ */
.rwedu__head .r-head__ja {
  color: transparent;
  background-image: linear-gradient(241deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rwedu__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.rwedu__sub {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-text);
}

.rwedu__text {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-text);
}

.rwedu__text p {
  margin: 0;
}

.rwedu__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(10, 22, 64, 0.16);
  display: block;
}

/* ---------- 自社の作業練習場を完備（青帯＋スライダー） ---------- */
.rwplace {
  background: linear-gradient(257deg, #0084ff 4%, #001e40 105%);
  color: var(--color-white);
}

.rwplace__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.rwplace__title {
  margin: 0 0 clamp(16px, 2vw, 24px);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.5;
}

.rwplace__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
  line-height: 2;
}

.rwplace__text p {
  margin: 0;
}

.rwplace__slider {
  position: relative;
  /* 矢印を画像の外（左右の余白）に置くためのスペース */
  padding-inline: clamp(34px, 4.4vw, 62px);
}

.rwplace__viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.rwplace__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.rwplace__slide.is-active {
  opacity: 1;
}

.rwplace__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(40px, 4vw, 50px);
  height: clamp(40px, 4vw, 50px);
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
  z-index: 1;
}

.rwplace__arrow img {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.rwplace__arrow--prev {
  left: 0;
}

.rwplace__arrow--prev img {
  transform: rotate(180deg);
}

.rwplace__arrow--next {
  right: 0;
}

.rwplace__arrow:hover {
  opacity: 0.82;
}

.rwplace__arrow--prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.rwplace__arrow--next:hover {
  transform: translateY(-50%) translateX(3px);
}

/* ---------- STEP：未経験から職人になるまで（白背景） ---------- */
.rwstep {
  background: var(--color-white);
  color: var(--color-text);
}

/* 全体を1枚の枠付きカードに。左＝4ステップ／右＝作業リーダー（青グラデ） */
.rwstep__card {
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-main);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* ---------- 左：4ステップ ---------- */
.rwstep__main {
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(28px, 4vw, 56px);
}

.rwstep__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 35px);
}

.rwstep__item {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 35px);
}

/* ステップ間の区切り線 */
.rwstep__item + .rwstep__item {
  border-top: 1px solid #ddd;
  padding-top: clamp(24px, 3vw, 35px);
}

/* 番号：STEP ラベル＋大きな数字（薄いグレー） */
.rwstep__num {
  flex: 0 0 auto;
  width: clamp(88px, 11vw, 150px);
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 1vw, 16px);
  line-height: 1.2;
}

.rwstep__num-label {
  font-family: var(--font-en);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ddd;
}

.rwstep__num-fig {
  font-family: var(--font-en);
  font-size: clamp(60px, 9vw, 120px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #ddd;
  -webkit-text-fill-color: #ddd;
}

/* テキスト */
.rwstep__body {
  flex: 1 1 0;
  min-width: 0;
}

/* タイトル：青グラデーション文字 */
.rwstep__title {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background: linear-gradient(213deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.rwstep__text {
  display: flex;
  flex-direction: column;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.rwstep__text p {
  margin: 0;
}

/* ---------- 右：作業リーダー（青グラデ＋斜めカット＋吹き出し） ---------- */
.rwstep__aside {
  position: relative;
  flex: 0 0 clamp(280px, 40%, 506px);
  align-self: stretch;
  min-height: clamp(460px, 52vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 1.6vw, 18px);
  padding: clamp(20px, 2.6vw, 40px);
  overflow: hidden;
  background: linear-gradient(259deg, #0080ff 10%, #002a5a 99%);
}

/* 人物写真：左上角を頂点に、左端が上0%→下74.2%の直線で斜めにカットされた帯。
   （Figmaのマスク画像 Rectangle49 の実測値）残りにパネル地の紺グラデが見える */
.rwstep__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 横長写真の中央にいる人物を、斜めクリップで見える右側の帯に合わせる */
  object-position: 40% top;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 74.2% 100%);
}

.rwstep__person {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-white);
}

.rwstep__role {
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
}

.rwstep__name {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* 吹き出し：白地＋上向きの三角（Figma: 387px幅・中央寄せ・20px Medium） */
.rwstep__bubble {
  position: relative;
  z-index: 2;
  width: min(387px, 88%);
  align-self: center;
  background: var(--color-white);
  color: #2A2C2D;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 20px);
  text-align: left;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.rwstep__bubble::before {
  content: "";
  position: absolute;
  top: -13px;
  left: clamp(24px, 9%, 64px);
  border: 13px solid transparent;
  border-top: 0;
  border-bottom-color: var(--color-white);
}

.rwstep__bubble p {
  margin: 0;
}

/* タブレット・SP：カードを縦積みに（斜めカット・青グラデ地はPCと同じデザインを維持） */
@media (max-width: 860px) {
  .rwstep__card {
    flex-direction: column;
  }

  .rwstep__aside {
    flex: 0 0 auto;
    width: 100%;
    min-height: clamp(460px, 92vw, 620px);
  }

  .rwstep__person {
    margin-bottom: 0;
  }
}

/* ---------- POINT：キャリアステップ（写真背景＋濃紺オーバーレイ） ---------- */
.rwcareer {
  position: relative;
  color: var(--color-white);
  overflow: hidden;
}

.rwcareer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rwcareer__overlay {
  position: absolute;
  inset: 0;
  /* Figma準拠：左を黒く落として右へ抜ける（写真が見える明るさ） */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(102, 102, 102, 0) 100%);
}

.rwcareer .container {
  position: relative;
  z-index: 1;
}

.rwcareer__head {
  margin-bottom: clamp(24px, 3vw, 32px);
}

.rwcareer__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin-bottom: clamp(36px, 5vw, 56px);
  font-size: 16px;
  line-height: 2;
}

.rwcareer__text p {
  margin: 0;
}

.rwcareer__image {
  max-width: 721px;
}

/* 「キャリアイメージ」ラベル：中央寄せ＋左右いっぱいの装飾ライン */
.rwcareer__image-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(24px, 3vw, 35px);
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.04em;
  color: var(--color-white);
  white-space: nowrap;
}

.rwcareer__image-label::before,
.rwcareer__image-label::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--color-white);
}

/* キャリアバー：Figmaのシェブロン型プレート（SVG）を背景に敷き、8pxずつ重ねる */
.rwcareer__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.rwcareer__bar {
  position: relative;
  width: 100%;
  /* 固定高だと文章が長いときにはみ出すため min-height にして内容に応じて伸ばす */
  min-height: clamp(132px, 12.5vw, 152px);
  box-sizing: border-box;
  padding: clamp(14px, 1.8vw, 16px) clamp(20px, 3.2vw, 35px) clamp(28px, 3.8vw, 36px);
  background: url("../images/recruit/works/recruit-career-bar-1.svg") 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.25));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rwcareer__bar + .rwcareer__bar {
  margin-top: -8px;
}

.rwcareer__bar:nth-child(2) {
  background-image: url("../images/recruit/works/recruit-career-bar-2.svg");
}

.rwcareer__bar:nth-child(3) {
  background-image: url("../images/recruit/works/recruit-career-bar-3.svg");
}

.rwcareer__term {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.rwcareer__desc {
  margin: 0;
  font-weight: 700;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-white);
}

.rwcareer__image::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: clamp(24px, 3vw, 35px);
  border-top: 1px solid var(--color-white);
}

/* ---------- 社内の雰囲気（白背景） ---------- */
.rwatmos {
  background: #ffffff;
  color: var(--color-text);
}

.rwatmos__head {
  margin-bottom: clamp(20px, 3vw, 28px);
}

/* 白背景セクションの日本語見出しは濃紺グラデへ */
.rwatmos__head .r-head__ja {
  color: transparent;
  background-image: linear-gradient(241deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.rwatmos__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 920px;
  margin-bottom: clamp(32px, 4vw, 48px);
  font-size: 16px;
  line-height: 2;
}

.rwatmos__text p {
  margin: 0;
}

.rwatmos__marquee {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

.rwatmos__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 2.2vw, 36px);
  width: max-content;
  animation: rwatmos-marquee 52s linear infinite;
}

.rwatmos__item {
  flex: none;
  margin: 0;
  overflow: hidden;
  background: #f5f5f5;
}

.rwatmos__item--portrait-lg {
  width: clamp(260px, 27vw, 370px);
  height: clamp(220px, 23vw, 320px);
  margin-top: clamp(18px, 1.8vw, 26px);
}

.rwatmos__item--portrait-md {
  width: clamp(180px, 19vw, 255px);
  height: clamp(180px, 19vw, 270px);
  margin-top: clamp(54px, 5vw, 72px);
}

.rwatmos__item--landscape-lg {
  width: clamp(340px, 34vw, 470px);
  height: clamp(220px, 23vw, 320px);
  margin-top: clamp(8px, 1vw, 16px);
}

.rwatmos__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes rwatmos-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - clamp(9px, 0.9vw, 14px)));
  }
}

/* ---------- BENEFIT：福利厚生（青グラデ背景） Figma 4295-2317 ---------- */
.rwbenefit {
  background: linear-gradient(264deg, #0084ff 3.7%, #001e40 104.72%);
  color: var(--color-white);
  padding-block: clamp(56px, 8vw, 84px) clamp(72px, 10vw, 126px);
}

.rwbenefit__head {
  margin-bottom: clamp(24px, 3.4vw, 42px);
}

.rwbenefit__lead {
  margin: 0 0 clamp(36px, 4.6vw, 64px);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
}

.rwbenefit__lead p {
  margin: 0;
}

/* 大きめカード：白枠2px・左テキスト／右写真（フルブリード） */
.rwbenefit__cards {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4.6vw, 64px);
}

.rwben-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--color-white);
}

.rwben-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(32px, 4.4vw, 63px) clamp(24px, 3vw, 42px);
}

/* タイトルは白地チップ＋青グラデ文字 */
.rwben-card__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.rwben-card__title-sub,
.rwben-card__title-main {
  display: inline-block;
  padding: 2px 14px;
  background: var(--color-white);
  font-size: clamp(20px, 2.3vw, 32px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.rwben-card__title-grad {
  color: #005bb1;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rwben-card__title-grad {
    background-image: linear-gradient(225deg, #0084ff 0%, #001e40 105%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.rwben-card__text {
  display: flex;
  flex-direction: column;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
}

.rwben-card__text p {
  margin: 0;
}

.rwben-card__media {
  margin: 0;
  position: relative;
}

.rwben-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 制度アイコン一覧（白枠タイル・丸ラインアイコン・5列×2行） */
.rwbenefit__icons {
  list-style: none;
  margin: clamp(36px, 4.6vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}

.rwben-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.2vw, 14px);
  min-height: clamp(170px, 15vw, 210px);
  padding: 20px 8px;
  border: 2px solid var(--color-white);
  color: var(--color-white);
  text-align: center;
}

/* アイコンSVG自体に丸枠が含まれる（Figma書き出し） */
.rwben-icon__mark {
  display: block;
  width: clamp(72px, 7.3vw, 104px);
  height: clamp(72px, 7.3vw, 104px);
}

.rwben-icon__mark img {
  width: 100%;
  height: 100%;
  display: block;
}

.rwben-icon__label {
  font-weight: 700;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.6;
}

.rwben-icon__note {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

/* ==========================================================
   レスポンシブ（採用 WORK）
   ========================================================== */
@media (max-width: 1023px) {
  .rwedu__grid,
  .rwplace__grid {
    grid-template-columns: 1fr;
  }

  .rwatmos__track {
    gap: 20px;
    animation-duration: 42s;
  }
}

@media (max-width: 767px) {
  /* SPでは本文の任意改行を無効化し自然な折り返しに */
  .rwedu__text br {
    display: none;
  }

  /* 作業練習場スライダー：本文との間に余白を足して写真を下げる。
     矢印は小さくし、画像の外側（左右余白の中）に完全に出す */
  .rwplace__slider {
    margin-top: 32px;
    padding-inline: 36px;
  }

  .rwplace__arrow {
    width: 28px;
    height: 28px;
  }

  .rwatmos__track {
    gap: 14px;
    animation-duration: 36s;
  }

  .rwatmos__item--portrait-lg {
    width: min(62vw, 250px);
    height: min(72vw, 280px);
    margin-top: 12px;
  }

  .rwatmos__item--portrait-md {
    width: min(42vw, 170px);
    height: min(52vw, 210px);
    margin-top: 34px;
  }

  .rwatmos__item--landscape-lg {
    width: min(72vw, 300px);
    height: min(54vw, 210px);
    margin-top: 4px;
  }

  /* SPはテキストが画面幅いっぱいに広がるため、全面を暗くして可読性を確保 */
  .rwcareer__overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.45) 100%);
  }

  .rwcareer__image-label {
    font-size: 16px;
    letter-spacing: 0.06em;
  }

  .rwcareer__bar {
    padding: 16px 18px 30px;
  }

  .rwcareer__bar + .rwcareer__bar {
    margin-top: -6px;
    padding-top: 20px;
  }

  .rwben-card {
    grid-template-columns: 1fr;
  }

  .rwben-card__media {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .rwben-card__body {
    padding: 24px 20px 28px;
  }

  .rwbenefit__icons {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rwben-icon {
    min-height: 150px;
    padding: 16px 8px;
  }

  .rwben-icon__mark {
    width: 64px;
    height: 64px;
  }
}

/* ==========================================================
   PERSON（社員インタビュー）  page-recruit-person.php
   一覧 Figma 4224-2480 / 詳細 4299-2550
   ※このページだけ青グラデ背景ではなく白基調（.recruit の既定を上書き）
   ========================================================== */
.recruit-person {
  background: var(--color-white);
  color: var(--color-text);
}

/* ヒーロー直下のセクション上部に白地ローポリ背景を敷く
   （Figma node 4769-3229 書き出しの recruit-facet-bg.webp。
     横幅いっぱい・比率固定（2880:1132）で全体を表示） */
.rperson-list,
.rperson-detail {
  overflow: hidden;
}

.rperson-list::before,
.rperson-detail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  aspect-ratio: 2880 / 1132;
  background: url("../images/recruit/common/recruit-facet-bg.webp") top center / 100% auto no-repeat;
  pointer-events: none;
}

.rperson-list .container,
.rperson-detail .container {
  position: relative;
  z-index: 1;
}

/* ---------- 一覧：見出し（EN小グレー＋日本語紺・左寄せ） ---------- */
.rperson-list__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.rperson-head__en {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 16px);
  letter-spacing: 0.16em;
  color: var(--color-gray);
}

.rperson-head__ja {
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: var(--color-main);
}

/* ---------- 一覧：カードグリッド ---------- */
.rperson-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}

/* 写真を背景にし、上にキャッチ／プロフィールを重ねるカード
   Figma 4763-2646 準拠（608x413 / 下部15px青ボーダー / 下から暗幕 /
   縦書き明朝キャッチ＝中央やや左 / 右下に年＋職長名） */
.rperson-card {
  position: relative;
  display: block;
  aspect-ratio: 608 / 413;
  overflow: hidden;
  border-bottom: clamp(10px, 1.4vw, 15px) solid transparent;
  border-image: linear-gradient(251deg, #0080FF 9.64%, #002A5A 98.78%) 1;
  color: var(--color-white);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.30);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.rperson-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* 下から立ち上がる暗幕（プロフィールの可読性確保。design: 下55%・最大0.7） */
.rperson-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}

.rperson-card:hover {
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.40);
}

.rperson-card:hover .rperson-card__photo {
  transform: scale(1.05);
}

/* キャッチ：縦書き・明朝・中央やや右に縦長で配置 */
.rperson-card__catch {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translate(50%, -50%);
  z-index: 2;
  writing-mode: vertical-rl;
  white-space: nowrap; /* 1列固定（2列に折り返さない） */
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(14px, 1.9vw, 24px);
  line-height: 1.05; /* 文字間（縦の余白）を詰める */
  letter-spacing: 0.02em;
  text-shadow: 0 0 7px rgba(0, 0, 0, 0.35);
}

/* プロフィール：左下。ブロックは内容幅に縮み左端を基準とし、
   左揃え（items-start）で「2018年入社」が「職長」の左端に揃う */
.rperson-card__foot {
  position: absolute;
  left: clamp(14px, 5%, 28px);
  bottom: clamp(14px, 5%, 22px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(7px, 0.9vw, 8px);
  text-align: left;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.45);
}

.rperson-card__year {
  font-size: clamp(11px, 1.3vw, 13.5px);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.rperson-card__id {
  display: flex;
  align-items: flex-end;
  gap: clamp(7px, 0.9vw, 13px);
}

.rperson-card__role {
  font-size: clamp(13px, 1.6vw, 16.5px);
  font-weight: 500;
  line-height: 1.6;
}

.rperson-card__name {
  font-size: clamp(22px, 3.3vw, 33px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ==========================================================
   PERSON 詳細（インタビュー）Figma node 4299-2554 準拠
   ========================================================== */
/* ---------- ヒーロー写真（縦書きキャッチ＋名前を重ねる） ---------- */
.rperson-hero {
  position: relative;
  aspect-ratio: 805 / 461;
  margin-bottom: clamp(48px, 6.6vw, 96px);
  overflow: hidden;
}

.rperson-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 左下の白文字が写真に埋もれないよう薄い暗幕を敷く */
.rperson-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent 45%);
  pointer-events: none;
}

/* 縦書きキャッチ：右上に白箱を1行1箱で並べる（右から読む） */
.rperson-hero__catch {
  position: absolute;
  top: clamp(16px, 4.5vw, 65px);
  right: clamp(16px, 4vw, 56px);
  z-index: 1;
  display: flex;
  flex-direction: row-reverse; /* lead[0] が右端＝読み始めに来る */
  align-items: flex-start; /* 白帯の高さは各行の文字の縦幅に合わせる（stretchで揃えない） */
  gap: clamp(10px, 1.7vw, 25px);
  margin: 0;
}

.rperson-hero__catch span {
  display: block;
  writing-mode: vertical-rl;
  /* 左右2pxで帯を文字幅ぎりぎりの細さにする */
  padding: clamp(12px, 1.5vw, 21px) 2px;
  background: var(--color-white);
  font-family: var(--font-serif); /* 一覧カードのキャッチと同じ明朝体 */
  font-weight: 700;
  font-size: clamp(22px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-main);
}

/* 役職・名前・入社年：左下、白の下線で区切る */
.rperson-hero__id {
  position: absolute;
  left: clamp(20px, 2.8vw, 41px);
  bottom: clamp(20px, 3vw, 44px);
  z-index: 1;
  color: var(--color-white);
}

.rperson-hero__title {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.1vw, 16px);
  margin: 0;
  padding-bottom: clamp(10px, 1.1vw, 16px);
  border-bottom: 1px solid var(--color-white);
  font-weight: 700;
  white-space: nowrap;
}

.rperson-hero__role {
  font-size: clamp(14px, 1.7vw, 24px);
  letter-spacing: 0.04em;
}

.rperson-hero__name {
  font-size: clamp(26px, 3.3vw, 48px);
  letter-spacing: 0.08em;
}

.rperson-hero__year {
  margin: clamp(8px, 1.1vw, 16px) 0 0;
  font-weight: 700;
  font-size: clamp(13px, 1.7vw, 24px);
  letter-spacing: 0.04em;
}

/* ---------- Q&A ---------- */
.rqa {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 84px);
}

.rqa-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
}

/* 偶数項目（reverse）は図版を左・本文を右に */
.rqa-item--reverse .rqa-body {
  order: 2;
}

.rqa-item--reverse .rqa-figure {
  order: 1;
}

.rqa-q {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.7vw, 24px);
  margin: 0 0 clamp(12px, 1.5vw, 21px);
  font-weight: 700;
  font-size: clamp(15px, 1.7vw, 24px);
  letter-spacing: 0.04em;
  color: #b3b3b3;
}

.rqa-q__num {
  font-family: var(--font-en);
  font-weight: 700;
}

/* A. 回答見出し：青グラデの文字（Figma: #0080FF → #002A5A） */
.rqa-a {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.7vw, 24px);
  margin: 0 0 clamp(14px, 1.5vw, 21px);
  font-size: clamp(22px, 3.3vw, 48px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  background: linear-gradient(100deg, #0080ff 10%, #002a5a 99%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rqa-a__mark {
  font-family: var(--font-en);
}

.rqa-text {
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* 図版：本文と同じ高さまで伸ばすグレー面（写真差し込み想定） */
.rqa-figure {
  align-self: stretch;
  min-height: 200px;
  background: #b3b3b3 center / cover no-repeat;
}

/* ---------- 締めの全幅写真（Q&Aの後・任意） ---------- */
.rperson-close-photo {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  margin-top: clamp(48px, 6vw, 80px);
}

/* ---------- 一覧へ戻る（白背景用の濃色ボタン） ---------- */
.rperson-detail__back {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 6vw, 80px);
}

.r-btn--dark {
  color: var(--color-main);
}

.r-btn--dark .r-btn__label {
  border-color: var(--color-main);
  background: var(--color-white);
}

.r-btn--dark:hover .r-btn__label {
  background: var(--color-main);
  color: var(--color-white);
}

/* 紺の角箱＋白▶の矢印（応募するボタン用。PC/SP共通） */
.r-btn__square {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-main);
  transition: transform 0.3s ease;
}

.r-btn__square::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent var(--color-white);
}

.r-btn:hover .r-btn__square {
  transform: translateX(4px);
}

/* 応募するボタン：他のボタンと同じサイズ（幅いっぱいにしない）。
   青グラデ枠ラベル＋青グラデの角箱矢印。右寄せは .rjob-item__apply 側で行う */
.r-btn--apply {
  gap: 14px;
}

.r-btn--apply .r-btn__label {
  border: 2px solid #0080ff;
  border-image: linear-gradient(90deg, #002a5a 0%, #0080ff 100%) 1;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.r-btn--apply .r-btn__square {
  background: linear-gradient(135deg, #0080ff 0%, #002a5a 100%);
}

.r-btn--apply:hover .r-btn__label {
  background: linear-gradient(135deg, #0080ff 0%, #002a5a 100%);
  color: var(--color-white);
}

/* SPは中央寄せ */
@media (max-width: 767px) {
  .rjob-item__apply {
    justify-content: center;
  }

  .r-btn--apply .r-btn__label {
    width: 240px;
    min-height: 56px;
  }
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 767px) {
  .rperson-grid {
    grid-template-columns: 1fr;
  }

  /* SPは写真を少し縦長にして縦書きキャッチの収まりを確保 */
  .rperson-hero {
    aspect-ratio: 4 / 3;
  }

  .rperson-hero__catch span {
    font-size: clamp(18px, 5.4vw, 22px);
  }

  .rqa-item {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* SPでは常に「本文→図版」の縦並びに揃える */
  .rqa-item--reverse .rqa-body,
  .rqa-item--reverse .rqa-figure {
    order: 0;
  }

  /* stretch では高さが出ないため SP は比率固定 */
  .rqa-figure {
    align-self: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
  }
}

/* ==========================================================
   募集要項（JOB）ページ  page-recruit-job.php
   Figmaデザイン（node 4225-1325）準拠。
   募集要項はカスタム投稿タイプ recruit_job から差し込む。
   1件 = 番号＋職種名＋カード（左:写真/概要/おすすめタグ・右:タブ7項目）＋応募ボタン。
   ========================================================== */
.rjob {
  position: relative;
  color: var(--color-text);
  background: #ffffff;
  padding-block: clamp(56px, 8vw, 84px) clamp(72px, 11vw, 168px);
  overflow: hidden;
}

/* 薄いグレーのファセット風背景（Figmaの金属テクスチャの代替・画像なしでも崩れない） */
.rjob__bg {
  position: absolute;
  inset: 0;
  background:
    url("../images/recruit/common/recruit-facet-bg.webp") top center / 100% auto no-repeat,
    radial-gradient(120% 80% at 85% 0%, #eef1f5 0%, #ffffff 55%),
    radial-gradient(120% 80% at 0% 100%, #eef1f5 0%, #ffffff 55%),
    #ffffff;
  pointer-events: none;
}

.rjob .container {
  position: relative;
  z-index: 1;
}

.rjob__empty {
  font-size: 16px;
  line-height: 2;
  color: var(--color-muted, #666);
  text-align: center;
}

/* 募集要項 1件 */
.rjob-item + .rjob-item {
  margin-top: clamp(64px, 9vw, 112px);
}

/* 番号＋タイトル */
.rjob-item__head {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 21px);
  margin-bottom: clamp(28px, 3.6vw, 40px);
}

.rjob-item__no {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 24px);
  letter-spacing: 0.04em;
  color: var(--color-gray);
}

.rjob-item__title {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: transparent;
  background-image: linear-gradient(241deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* カード本体 */
.rjob-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
  padding: clamp(20px, 3vw, 35px);
}

.rjob-card__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 50px);
  align-items: stretch;
}

/* ---- 左カラム：写真・概要・おすすめ ---- */
.rjob-card__left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 21px);
}

.rjob-card__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.rjob-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rjob-card__desc {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-muted, #555);
  text-align: justify;
}

/* こんな方におすすめ */
.rjob-rec {
  margin-top: auto;
  border: 1px solid #0084ff;
}

.rjob-rec__head {
  margin: 0;
  padding: 6px 14px;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--color-white);
  background-image: linear-gradient(201deg, #0084ff 4%, #001e40 105%);
}

.rjob-rec__tags {
  list-style: none;
  margin: 0;
  padding: 16px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 7px;
  justify-content: center;
}

.rjob-rec__tag {
  padding: 3px 14px;
  border: 2px solid #0080ff;
  border-radius: 100px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: transparent;
  background-image: linear-gradient(227deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- 右カラム：タブ（7項目） ---- */
.rjob-card__right {
  display: flex;
}

.rjob-tabs {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  width: 100%;
}

.rjob-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}

.rjob-tab {
  padding: 1px 10px;
  border: 1px solid #0084ff;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
  /* 文字は青グラデ（おすすめタグと同じクリップテキスト） */
  color: transparent;
  background-image: linear-gradient(227deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

/* 背景色ホバーはクリップテキストと両立しないため、薄くする表現に */
.rjob-tab:hover {
  opacity: 0.65;
}

.rjob-tab.is-active {
  font-weight: 700;
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
  background-image: linear-gradient(253deg, #0084ff 4%, #001e40 105%);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  border-color: #0084ff;
}

.rjob-tab.is-active:hover {
  opacity: 1;
}

.rjob-tabs__panels {
  flex: 1;
  display: flex;
}

.rjob-panel {
  flex: 1;
  width: 100%;
  padding: clamp(16px, 2vw, 21px) clamp(14px, 1.6vw, 18px);
  border: 1px solid var(--color-gray);
  background: var(--color-white);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.rjob-panel[hidden] {
  display: none;
}

/* ---- 応募ボタン（採用サイト共通 .r-btn--dark を流用して統一） ---- */
.rjob-item__apply {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(20px, 2.6vw, 28px);
}

/* ---- レスポンシブ ---- */
@media (max-width: 900px) {
  .rjob-card__grid {
    grid-template-columns: 1fr;
  }

  .rjob-rec {
    margin-top: 8px;
  }
}

@media (max-width: 767px) {
  .rjob-tab {
    font-size: 14px;
  }

  .rjob-card__desc,
  .rjob-panel {
    font-size: 15px;
  }

  /* ＼こんな方におすすめ／：帯の文字14px・上下パディング2px、タグは0.75rem */
  .rjob-rec__head {
    font-size: 14px;
    padding-block: 2px;
  }

  .rjob-rec__tag {
    font-size: 0.75rem;
    border-width: 1px;
  }

  /* タグは左詰め・行間はやや開ける */
  .rjob-rec__tags {
    gap: 8px 7px;
    justify-content: flex-start;
  }

  /* 「こんな方におすすめ」セクションの下に区切りライン */
  .rjob-card__left:has(.rjob-rec) {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-light-gray);
  }
}

/* ==========================================================
   SPタイポグラフィ統一スケール
   14px（基本・1rem） / 18 / 21 / 24 / 28 / 32px
   既存ルールのSP実効値をスケールへスナップする上書きレイヤー。
   SPの文字サイズを変えたいときは、まずこのブロックを調整する。
   （ヒーロー等の特大ディスプレイ文字と11px以下の極小ラベルは対象外）
   ========================================================== */
@media (max-width: 767px) {
  .r-head__ja {
    font-size: 14px;
  }

  .r-btn__label {
    font-size: 14px;
  }

  .rfv__real {
    font-size: 18px;
  }

  .r-about__text {
    font-size: 14px;
  }

  .r-works__text {
    font-size: 14px;
  }

  .r-place__label {
    font-size: 14px;
  }

  .r-person__vtext {
    font-size: 18px;
  }

  .r-person--featured .r-person__vtext {
    font-size: 21px;
  }

  .r-person__year {
    font-size: 14px;
  }

  .r-person__role {
    font-size: 14px;
  }

  .r-person--featured .r-person__role {
    font-size: 18px;
  }

  .r-person__name {
    font-size: 21px;
  }

  .r-faq__qtext {
    font-size: 18px;
  }

  /* Q&A：SPは内側の余白を8pxに詰める */
  .r-faq__q {
    padding: 8px;
  }

  .r-faq__a-row {
    padding: 0 8px 8px;
  }

  .r-banner__en {
    font-size: 32px;
  }

  .rheader__cta {
    font-size: 18px;
  }

  /* SPの下層ヒーローは高さ220pxに */
  .rabout-hero {
    min-height: 220px;
  }

  .rabout-hero__en {
    font-size: 32px;
  }

  .rabout-hero__ja {
    font-size: 14px;
  }

  .r-head--label .r-head__en {
    font-size: 21px;
  }

  /* 本文（段落テキスト）はSP基本の14pxに統一 */
  .rpoint__text {
    font-size: 14px;
  }

  .rworks__tab-text {
    font-size: 18px;
  }

  .rworks__lead {
    font-size: 14px;
  }

  .rschedule__task {
    font-size: 14px;
  }

  .rschedule__note {
    font-size: 14px;
  }

  .rheader__menu a {
    font-size: 18px;
  }

  .rschedule__time {
    font-size: 14px;
  }

  .rwedu__sub {
    font-size: 21px;
  }

  .rwedu__text {
    font-size: 14px;
  }

  .rwplace__text {
    font-size: 14px;
  }

  .rwstep__num-label {
    font-size: 14px;
  }

  /* SPは番号（STEP 01）と本文の間を詰める */
  .rwstep__item {
    gap: 8px;
  }

  .rwstep__title {
    font-size: 18px;
  }

  .rwstep__role {
    font-size: 14px;
  }

  .rwstep__name {
    font-size: 21px;
  }

  .rwcareer__text {
    font-size: 14px;
  }

  .rwatmos__text {
    font-size: 14px;
  }

  .rwbenefit__lead {
    font-size: 14px;
  }

  .rwben-card__title-sub,
.rwben-card__title-main {
    font-size: 21px;
  }

  .rwben-card__text {
    font-size: 14px;
  }

  .rwben-icon__label {
    font-size: 14px;
  }

  .rwben-icon__note {
    font-size: 14px;
  }

  .rwcareer__image-label {
    font-size: 18px;
  }

  .rperson-head__en {
    font-size: 14px;
  }

  .rperson-card__role {
    font-size: 14px;
  }

  .rperson-card__name {
    font-size: 21px;
  }

  .rperson-hero__name {
    font-size: 28px;
  }

  .rperson-hero__year {
    font-size: 14px;
  }

  .rqa-q {
    font-size: 14px;
  }

  .rqa-a {
    font-size: 21px;
  }

  .rjob__empty {
    font-size: 18px;
  }

  .rjob-item__no {
    font-size: 21px;
  }

  .rjob-item__title {
    font-size: 28px;
  }

  .rjob-card__desc {
    font-size: 18px;
  }

  .rjob-panel {
    font-size: 18px;
  }

  .rjob-card__desc,
  .rjob-panel {
    font-size: 14px;
  }
}