@charset "UTF-8";
/* ==========================================================================
   RECRUIT page
   ブレイクポイントは common.css / top.css に準拠
   - SP : max-width 749px
   - TAB: 750px〜959px（PCレイアウトを縮小調整）
   - PC : min-width 750px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
.rc {
  container-type: inline-size; /* 背景英字（.rc-bgword）の位置を cqw で算出するため。100vw と違いスクロールバー幅を含まない */
  --c-bg: #f7f7f7;
  --c-white: #fff;
  --c-grey100: #f9f9f9;
  --c-grey300: #d1d1d1;
  --c-grey400: #b6b6b6;
  --c-grey600: #6b6b6b; /* デザイン値 #777 は背景 #f7f7f7 上でコントラスト比 4.5:1 未満のため調整 */
  --c-grey700: #555;
  --c-grey800: #4d4d4d;
  --c-grey900: #111;
  --c-grey900b: #222;
  --c-rule: rgba(0, 0, 0, .1);
  /* 本文はWebフォントを読み込まず端末フォントを使用（Android は Noto Sans CJK JP が標準搭載） */
  --ff-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --ff-min: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ff-serif: "Noto Serif JP", "Noto Serif CJK JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --ff-en: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  display: block;
  background: var(--c-bg);
  color: var(--c-grey900);
  font-family: var(--ff-sans);
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .03em;
}

/* common.css の要素セレクタによる font-size / line-height 指定を打ち消す
   （:where で詳細度を要素セレクタ相当に抑え、各クラス指定を優先させる） */
:where(.rc) :is(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, table, th, td, figure, figcaption) {
  font-size: inherit;
  line-height: inherit;
}

.rc img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.rc a {
  color: inherit;
}

.rc button {
  font: inherit;
  color: inherit;
}

.rc [hidden] {
  display: none !important;
}

.rc :focus-visible {
  outline: 2px solid var(--c-grey900);
  outline-offset: 3px;
}

.rc [id] {
  scroll-margin-top: 16px;
}

/* アンカーリンクの着地位置：各セクション最上部の背景英字（.rc-bgword）の文字上端が
   画面上端から --anchor-gap の位置に揃うよう、セクションごとの「上端→文字上端」の距離（--anchor-ink）を差し引く
   ※ --anchor-ink はブラウザ実測値。セクションの padding-top / --bg-top / 背景英字の font-size を変えたら更新する */
.rc-sec[id] {
  --anchor-gap: 40px;
  scroll-margin-top: calc(var(--anchor-gap) - var(--anchor-ink, 0px));
}

.rc-message,
.rc-biz,
.rc-recruit {
  --anchor-ink: 36px;
}

.rc-interview {
  --anchor-ink: 88px;
}

.rc-member {
  --anchor-ink: 38px;
}

.rc-culture {
  --anchor-ink: 93px;
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-message,
  .rc-biz,
  .rc-recruit {
    --anchor-ink: 28px;
  }

  .rc-interview {
    --anchor-ink: 79px;
  }

  .rc-member {
    --anchor-ink: 29px;
  }

  .rc-culture {
    --anchor-ink: 85px;
  }
}

@media screen and (max-width: 749px) {
  .rc-sec[id] {
    --anchor-gap: 24px;
  }

  .rc-message {
    --anchor-ink: 24px;
  }

  .rc-biz {
    --anchor-ink: 48px;
  }

  .rc-interview {
    --anchor-ink: 65px;
  }

  .rc-member {
    --anchor-ink: 1px;
  }

  .rc-culture,
  .rc-recruit {
    --anchor-ink: 64px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.rc-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a.rc-skip {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2000;
  padding: 8px 16px;
  background: #111;
  color: #fff;
  font-size: 1.4rem;
}

a.rc-skip:focus {
  top: 8px;
}

.rc-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rc-sp {
  display: none;
}

@media screen and (max-width: 749px) {
  .rc-pc {
    display: none;
  }

  .rc-sp {
    display: inline;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.rc-sec {
  position: relative;
  overflow: hidden;
}

.rc-container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
}

@media screen and (max-width: 749px) {
  .rc-container {
    width: calc(100% - 40px);
  }
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
/* 背景の大きな英字（装飾） */
/* 背景英字：文字の左端を KV の一番左（最大 1440px で中央寄せのステージ左端 = .rc-kv__blur-left の左端）に揃える
   親の .rc-container（中央寄せ）の左端ぶんを差し引き、DM Sans の左サイドベアリング（約 .045em）を詰める */
.rc-bgword {
  position: absolute;
  top: var(--bg-top, 0);
  left: calc(max(0px, (100cqw - 1440px) / 2) - (100cqw - min(1180px, 100cqw - 80px)) / 2 - .045em);
  z-index: 0;
  color: var(--c-white);
  font-family: var(--ff-en);
  font-weight: 200;
  font-size: 15.6rem;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.rc-bgword::before {
  content: attr(data-word);
}

.rc-bgword--light {
  color: var(--c-grey100);
  font-weight: 300;
}

/* 見出しの出現演出（せり上がり。参考：UNIDGE「私たちについて」の見出しの動き）
   行ごとに overflow: hidden の枠（.rc-rise__line）で切り抜き、中の文字（.rc-rise__text）を
   「下にずらし、縦に 15° 傾け、透明」の状態から元に戻す。
   .is-hidden は recruit.js が「JS 有効かつ視差効果を減らす設定でない」場合にだけ付けるため、それ以外は最初から表示 */
.rc-rise__line {
  display: block;
  width: fit-content;
  overflow: hidden;
}

.rc-rise__text {
  display: block;
  transform-origin: 0 0;
}

.rc-reveal.is-hidden .rc-rise__text {
  opacity: 0;
  transform: skewY(15deg);
  translate: 0 .6em;
}

@media (prefers-reduced-motion: no-preference) {
  .rc-reveal.is-armed .rc-rise__text {
    transition-property: opacity, transform, translate;
    transition-duration: .9s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--rc-line, 0) * .1s);
  }
}

/* PC と SP で改行位置が違う見出し（事業概要のキャッチ）：PC は --pc の行、SP は --sp の行ごとに動かす。
   使わない側は枠と動きを外す（PC の --sp は行内の文字に戻し、SP の --pc は display: contents で枠を消す）。行は中央揃え */
.rc-vision__catch .rc-rise__line {
  margin-inline: auto;
}

@media screen and (min-width: 750px) {
  .rc-rise__line--sp,
  .rc-rise__text--sp,
  .rc-reveal.is-hidden .rc-rise__text--sp,
  .rc-reveal.is-armed .rc-rise__text--sp {
    display: inline;
    overflow: visible;
    opacity: 1;
    transition: none;
  }
}

@media screen and (max-width: 749px) {
  .rc-rise__line--pc,
  .rc-rise__text--pc {
    display: contents;
  }
}

.rc-head {
  position: relative;
  padding-top: 48px;
}

.rc-head--lg {
  padding-top: 64px;
}

.rc-head__label {
  color: var(--c-grey600);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0;
}

.rc-h2 {
  position: relative;
  color: var(--c-grey900b);
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 5.6rem;
  line-height: 1.8;
  letter-spacing: .03em;
}

.rc-h3 {
  position: relative;
  padding-top: 64px;
  color: var(--c-grey900);
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

.rc-h3--center {
  text-align: center;
}

/* PC（750px 以上）では見出し（.rc-h2 / .rc-h3）の文字サイズを画面幅で変えない。背景英字は装飾のため縮小する */
@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-bgword {
    font-size: 12rem;
  }
}

@media screen and (max-width: 749px) {
  .rc-bgword {
    position: relative;
    top: -8px;
    left: -22px;
    display: block;
    height: 47px;
    margin-bottom: 0;
    font-weight: 300;
    font-size: 6.4rem;
    line-height: 1;
  }

  .rc-head,
  .rc-head--lg {
    padding-top: 0;
  }

  .rc-head__label {
    font-size: 1.2rem;
  }

  .rc-h2 {
    color: var(--c-grey900);
    font-size: 3rem;
    line-height: 1.6;
    letter-spacing: .04em;
  }

  .rc-h3 {
    padding-top: 0;
    font-family: var(--ff-serif);
    font-size: 2.4rem;
    line-height: 1.35;
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   Link
   -------------------------------------------------------------------------- */
.rc .rc-link {
  color: var(--c-grey900);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: opacity .2s;
}

.rc .rc-link:hover {
  opacity: .6;
}

/* アイコンの中心を文字（和文の字面）の中心に揃える。字面の中心はベースラインの約 .38em 上 */
.rc .rc-link__icon {
  display: inline-block;
  margin-left: 4px;
  vertical-align: -.47em; /* 外部リンク（24px 枠の中央に 12px の図形） */
}

/* .rc img { vertical-align: top } より詳細度を上げる。位置情報（12×16px、枠いっぱいの図形） */
.rc img.rc-link__icon {
  vertical-align: -.19em;
}

/* --------------------------------------------------------------------------
   KV
   -------------------------------------------------------------------------- */
.rc-kv {
  position: relative;
  background: linear-gradient(#fff, var(--c-bg));
}

.rc-kv__stage {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  aspect-ratio: 1440 / 763;
  overflow: hidden;
}

.rc .rc-kv__img {
  position: absolute;
  display: block;
  max-width: none;
}

.rc-kv__blur-left {
  top: 54.915%;
  left: 0;
  z-index: 1;
  width: 20.139%;
}

.rc-kv__tile {
  top: 12.713%;
  left: 82.708%;
  z-index: 1;
  width: 16.736%;
}

.rc-kv__tile-blur {
  top: 36.304%;
  left: 72.083%;
  z-index: 1;
  width: 13.472%;
}

.rc-kv__main {
  top: 0;
  left: 9.028%;
  z-index: 2;
  width: 66.25%;
}

.rc-kv__sign {
  top: 76.147%;
  left: 54.028%;
  z-index: 3;
  width: 13.125%;
}

.rc-kv__boy {
  top: 66.317%;
  left: 76.667%;
  z-index: 3;
  width: 23.333%;
}

/* コピー：Figma 3942:9344 の枠（1440×763 基準 x111 y298.73 w699.04 h267.72）とドロップシャドウ（黒50%・ぼかし32px） */
.rc-kv__catch {
  position: absolute;
  top: 39.152%;
  left: 7.708%;
  z-index: 4;
  width: 48.544%;
  aspect-ratio: 699.04 / 267.72;
  /* Figma: グループ全体に DROP_SHADOW 32px / 50%（1440px 基準。ステージ幅に追従）。
     drop-shadow() の第3値は標準偏差（box-shadow の半分）なので Figma の値 ÷ 2 を指定する */
  filter: drop-shadow(0 0 min(1.1111vw, 16px) rgba(0, 0, 0, .5));
}

/* Figma の変形（skewX(-12deg) + 縦 cos12° 縮小）を再現。
   枠内に収まるよう、傾き分（高さ×tan12° = 幅の 8.141%）だけ右にずらして配置 */
.rc-kv__catch-box {
  position: absolute;
  top: 0;
  left: 8.141%;
  width: 91.859%;
  height: 102.234%;
  transform: skewX(-12deg) scaleY(.97815);
  transform-origin: 0 0;
}

/* SVG は線のはみ出し分（上 2.79% / 右 2.72% / 下 7.28%）だけグループ枠より大きい */
.rc-kv__catch-svg {
  position: absolute;
  top: -2.79%;
  left: 0;
  width: 102.72%;
  height: 110.07%;
  overflow: visible;
}

/* Figma では「さ・を・語・れ・。」の各グリフに個別の DROP_SHADOW（20px / 紺）が重ねて掛かっている。
   SVG 要素への filter はユーザー座標系（viewBox 基準）で解釈されるため、値はそのまま拡縮に追従する（同じく Figma ÷ 2） */
.rc-kv__catch-line--1 path:nth-child(3) { filter: drop-shadow(0 4px 10px rgba(14, 51, 73, .06)); }
.rc-kv__catch-line--1 path:nth-child(4) { filter: drop-shadow(0 0 10px rgba(14, 51, 73, .25)); }
.rc-kv__catch-line--2 path:nth-child(4),
.rc-kv__catch-line--2 path:nth-child(5),
.rc-kv__catch-line--2 path:nth-child(6) { filter: drop-shadow(0 0 10px rgba(14, 51, 73, .2)); }

.rc-kv__label {
  position: absolute;
  top: 3.8%;
  left: 10.625%;
  z-index: 4;
  color: var(--c-grey900);
}

.rc-kv__label-en {
  display: block;
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: clamp(1.3rem, 1.389vw, 2rem);
  line-height: 1.3;
  letter-spacing: 0;
}

.rc-kv__label-ja {
  display: block;
  font-weight: 500;
  font-size: clamp(1rem, .833vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: .06em;
}

@media screen and (max-width: 749px) {
  /* Figma SP: HeroSection は高さ 520（KV 390×638 の上部 520px でクリップ）。
     以下の top は 638px 基準の値 × 638/520 で換算 */
  .rc-kv__stage {
    aspect-ratio: 390 / 520;
  }

  .rc-kv__main {
    top: 0;
    left: 0;
    width: 91.026%;
  }

  .rc-kv__tile-blur {
    top: 47.044%;
    left: 74.26%;
    width: 24.05%;
  }

  .rc-kv__boy {
    top: 74.3%;
    left: 48.974%;
    width: 51.026%;
  }

  /* Figma 3942:11303（390×638 基準 x0 y140.36 w325.01 h124.47） */
  .rc-kv__catch {
    top: 26.991%;
    left: 0;
    width: 83.336%;
    aspect-ratio: 325.01 / 124.47;
    filter: drop-shadow(0 0 1.9077vw rgba(0, 0, 0, .6));  /* Figma 14.88px @390 ÷ 2 */
  }

  .rc-kv__blur-left {
    top: 79.808%;
    left: 0;
    width: 18.3%;
  }

  .rc-kv__tile {
    top: 57.186%;
    left: 5.128%;
    width: 41.538%;
  }

  /* .rc .rc-kv__img { display: block } より詳細度を上げて非表示にする */
  .rc .rc-kv__sign {
    display: none;
  }

  .rc-kv__label {
    top: 2.761%;
    left: 4.872%;
  }

  .rc-kv__label-en {
    font-size: 4.359vw;
  }

  .rc-kv__label-ja {
    font-size: 2.564vw;
  }
}

/* --------------------------------------------------------------------------
   KV インタラクション（PC / SP 共通。SPは配置のみ異なる）
   1) 入場：メイン写真は奥→手前、周囲の写真はふわっと、コピーは1文字ずつ右→左
      ※ JS を待たず CSS アニメーションで開始（LCP を遅らせないため）
   2) アンビエント：各写真を別カット（kv2-*）へ時間差でクロスフェード（recruit.js）
   -------------------------------------------------------------------------- */
/* 切替後レイヤー（recruit.js が生成）。
   切替前後で枠がずれないよう、すべて「元画像と同一の枠」に固定し、
   書き出しサイズの差（Figma の親フレームによるクリップ位置の差）は object-fit で吸収する。
   切替は「上に重ねた切替後レイヤーをフェード」させ、元画像はフェード完了後（transitionend）に
   recruit.js がフェードアウトさせる（両方を同時にフェードすると中間で背景が透けて白っぽくなるため）。
   元に戻すときは逆順（元画像をフェードイン → 切替後レイヤーをフェードアウト） */
.rc .rc-kv__layer-b {
  opacity: 0;
  pointer-events: none;
  object-fit: cover;
  transition: opacity 4.5s ease;
}

.rc .rc-kv__layer-b.is-on {
  opacity: 1;
}

/* 元画像も切替時はフェードさせる（切替後の画像が半透明だと、瞬時に消すと透けていた元画像が急に消えて見えるため）。
   時間は recruit.js の BASE_FADE と合わせる */
.rc .rc-kv__img:not(.rc-kv__layer-b) {
  transition: opacity 1.5s ease;
}

.rc .rc-kv__img.is-off {
  opacity: 0;
}

.rc-kv__main-b {
  top: 0;
  left: 9.028%;
  z-index: 2;
  width: 66.25%;
  aspect-ratio: 954 / 552;
  object-position: 50% 100%;
}

.rc-kv__tile-b {
  top: 12.713%;
  left: 82.708%;
  z-index: 1;
  width: 16.736%;
  aspect-ratio: 241 / 166;
}

.rc-kv__blur-left-b {
  top: 54.915%;
  left: 0;
  z-index: 1;
  width: 20.139%;
  aspect-ratio: 290 / 244;
}

.rc-kv__tile-blur-b {
  top: 36.304%;
  left: 72.083%;
  z-index: 1;
  width: 13.472%;
  aspect-ratio: 194 / 137;
}

.rc-kv__sign-b {
  top: 76.147%;
  left: 54.028%;
  z-index: 3;
  width: 13.125%;
  aspect-ratio: 189 / 135;
}

.rc-kv__boy-b {
  top: 66.317%;
  left: 76.667%;
  z-index: 3;
  width: 23.333%;
  aspect-ratio: 336 / 251;
  object-position: 0 0;
}

/* SP：切替後レイヤーも「切替前の枠」に固定（Figma 3942:11287 の配置は切替前とほぼ同一） */
@media screen and (max-width: 749px) {
  .rc-kv__main-b {
    left: 0;
    width: 91.026%;
    aspect-ratio: 355 / 261;
    object-position: 50% 50%;
  }

  /* kv2-tile-blur-sp.webp（204×146）は周囲に透明の余白（左右 8px・上下 7px。写真部分 188×132）を含むため、
     写真部分が切替前の枠（x289.6 y244.6 w93.8）とちょうど重なるよう、余白の分だけ外側へ広げて配置する
     （Figma 4046:7558 も 94×66 で切替前とほぼ同じ大きさ） */
  .rc-kv__tile-blur-b {
    top: 46.372%;
    left: 73.237%;
    width: 26.097%;
    aspect-ratio: 204 / 146;
  }

  .rc-kv__boy-b {
    top: 74.3%;
    left: 48.974%;
    width: 51.026%;
    aspect-ratio: 199 / 134;
    object-position: 50% 50%;
  }

  .rc-kv__blur-left-b {
    top: 79.808%;
    width: 18.3%;
    aspect-ratio: 290 / 244;
  }

  .rc-kv__tile-b {
    top: 57.186%;
    left: 5.128%;
    width: 41.538%;
  }

  .rc .rc-kv__sign-b {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* fill-mode: backwards … 終了後は通常スタイルに戻し、切替時の opacity トランジションを効かせる */
  .rc-kv__main {
    animation: rc-kv-main 6.3s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .rc-kv__blur-left,
  .rc-kv__tile,
  .rc-kv__tile-blur,
  .rc-kv__sign,
  .rc-kv__boy {
    animation: rc-kv-orbit 3.6s cubic-bezier(.16, 1, .3, 1) backwards;
  }

  .rc-kv__blur-left { animation-delay: 1.05s; }
  .rc-kv__boy { animation-delay: 1.2s; }
  .rc-kv__tile { animation-delay: 1.35s; }
  .rc-kv__sign { animation-delay: 1.5s; }
  .rc-kv__tile-blur { animation-delay: 1.65s; }

  /* コピーは見出し（.rc-rise__*）と同じせり上がり：行ごとに枠で切り抜き、
     「下にずらし、縦に 15° 傾け、透明」から戻す。切り抜き（clipPath）は動いている間だけ掛け、
     終了後は外して行の境目で文字の影が切れないようにする */
  .rc-kv__catch-text {
    animation: rc-kv-rise .9s cubic-bezier(.22, 1, .36, 1) 2.4s backwards;
    transform-box: fill-box;
    transform-origin: 0 0;
  }

  .rc-kv__catch-line--2 .rc-kv__catch-text { animation-delay: 2.5s; }

  .rc-kv__catch-line--1 { animation: rc-kv-clip-1 3.3s linear backwards; }
  .rc-kv__catch-line--2 { animation: rc-kv-clip-2 3.4s linear backwards; }

  .rc-kv__label {
    animation: rc-kv-fade 2s ease 3.2s backwards;
  }
}

@keyframes rc-kv-main {
  /* opacity を 0 にすると LCP（最初の描画）として計測されず遅れるため、見た目上ほぼ透明な .01 から開始 */
  from {
    opacity: .01;
    transform: scale(.55);
    filter: blur(12px);
  }

  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes rc-kv-orbit {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* 見出しの「translate: 0 .6em + skewY(15deg)」を、画面上で同じ見え方になるように掛ける。
   コピーは .rc-kv__catch-box の skewX(-12deg) scaleY(.97815)（＝ A）の内側にあるため、そのまま掛けると
   縦移動が斜めになり傾きも変わる。そこで A⁻¹ · skewY(15deg) · A で打ち消し、移動量も A⁻¹ で戻す
   （画面上で真下に 75 ＝ 1 行の字高 約 125 の .6 倍。単位は viewBox）。
   from / to を同じ関数の並びにして、skewY と translate だけが補間されるようにする */
@keyframes rc-kv-rise {
  from {
    opacity: 0;
    transform: translate(15.94px, 76.68px) scaleY(1.02234) skewX(12deg) skewY(15deg) skewX(-12deg) scaleY(.97815);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scaleY(1.02234) skewX(12deg) skewY(0deg) skewX(-12deg) scaleY(.97815);
  }
}

@keyframes rc-kv-clip-1 {
  from, to { clip-path: url(#rc-kv-catch-clip-1); }
}

@keyframes rc-kv-clip-2 {
  from, to { clip-path: url(#rc-kv-catch-clip-2); }
}

@keyframes rc-kv-fade {
  from {
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Anchor navigation
   -------------------------------------------------------------------------- */
.rc-anchor {
  padding: 40px 0;
}

.rc-anchor .rc-container {
  width: min(1200px, calc(100% - 80px));
}

.rc-anchor__list {
  display: flex;
  border-left: 1px solid var(--c-grey300);
}

.rc-anchor__item {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--c-grey300);
}

.rc .rc-anchor__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 90px;
  padding: 12px 8px;
  color: var(--c-grey900);
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .03em;
  text-align: center;
  transition: opacity .2s;
}

.rc .rc-anchor__link:hover {
  opacity: .6;
}

.rc-anchor__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc .rc-anchor__link {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 749px) {
  .rc-anchor {
    padding: 32px 0;
  }

  .rc-anchor .rc-container {
    width: calc(100% - 40px);
  }

  .rc-anchor__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 0;
  }

  .rc-anchor__item {
    border-right: 0;
  }

  .rc-anchor__item:nth-child(odd) {
    border-right: 1px solid var(--c-grey300);
  }

  .rc-anchor__item:nth-child(-n+4) {
    border-bottom: 1px solid var(--c-grey300);
  }

  .rc .rc-anchor__link {
    flex-direction: row;
    justify-content: center;
    height: auto;
    padding: 24px 16px;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .rc-anchor__text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rc-anchor__icon {
    width: 10px;
    height: 10px;
  }
}

/* --------------------------------------------------------------------------
   Message
   -------------------------------------------------------------------------- */
.rc-message {
  padding: 120px 0;
  --bg-top: -120px;
}

.rc-message__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 392px);
  gap: 32px;
  margin-top: 32px;
  color: var(--c-grey900b);
}

.rc-message__title {
  font-family: var(--ff-min);
  /* Figma の指定は Medium(500) だが、同じ 500 でも Figma の描画はブラウザより細く出るため
     見た目を合わせて 400 にする（インク量：Figma 21.7 / 500 は 26.2 / 400 は 23.4） */
  font-weight: 400;
  /* 上限は Figma（PC 1440px アートボード）の 56px。それ以上は拡大せず、狭い幅では 34px まで縮小 */
  font-size: clamp(3.4rem, 3.889vw, 5.6rem);
  line-height: 1.6;
  letter-spacing: 0;
}

.rc-message__text {
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .03em;
  text-align: justify;
}

.rc-message__text p + p {
  margin-top: 28px;
}

.rc-message__sign {
  margin-top: 32px;
  text-align: right;
}

.rc-message__role {
  display: block;
  margin-bottom: -6px;
  font-size: 1.4rem;
  line-height: 2;
}

.rc-message__name {
  display: block;
  font-family: var(--ff-min);
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.6;
  letter-spacing: .04em;
}

/* 写真ループ */
.rc-photos {
  --gap: 16px;
  --tall-w: 326px;
  --tall-h: 488px;
  --wide-w: 490px;
  --wide-h: 326px;
  margin-top: 40px;
}

.rc-photos__viewport {
  overflow: hidden;
}

.rc-photos__track {
  display: flex;
  width: max-content;
  animation: rc-marquee 90s linear infinite;
}

.rc-photos__set {
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding-right: var(--gap);
}

.rc-photos__item img {
  display: block;
  object-fit: cover;
}

.rc-photos__item--tall img {
  width: var(--tall-w);
  height: var(--tall-h);
}

.rc-photos__item--wide img {
  width: var(--wide-w);
  height: var(--wide-h);
}

.is-offscreen .rc-photos__track {
  animation-play-state: paused;
}

@keyframes rc-marquee {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-message__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  }
}

@media screen and (max-width: 749px) {
  .rc-message {
    padding: 24px 0 48px;
  }

  .rc-message__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    margin-top: 32px;
    color: var(--c-grey900);
  }

  .rc-message__title {
    font-weight: 600;
    font-size: min(3rem, 7.6vw);
    letter-spacing: .02em;
  }

  .rc-message__sign {
    margin-top: 24px;
  }

  .rc-message__role {
    margin-bottom: 0;
    font-size: 1.2rem;
    line-height: 1.8;
    letter-spacing: 0;
  }

  .rc-message__name {
    font-size: 2.8rem;
  }

  .rc-photos {
    --gap: 6px;
    --tall-w: 135px;
    --tall-h: 202px;
    --wide-w: 203px;
    --wide-h: 135px;
    margin-top: 72px; /* Figma: gap 32 + Container padding-top 40 */
  }
}

/* --------------------------------------------------------------------------
   Business
   -------------------------------------------------------------------------- */
.rc-biz {
  padding-bottom: 120px;
  background: var(--c-white);
}

.rc-vision {
  position: relative;
  padding: 120px 0 184px;
  --bg-top: -120px;
}

/* PC は 50px 固定。1 行目「ヘルス＆ビューティー事業を通して」（約 15.6em）が
   .rc-container（100cqw - 80px）に収まらない幅（約 860px 未満）でだけ、収まるぎりぎりまで縮める */
.rc-vision__catch {
  margin-top: 32px;
  color: var(--c-grey900b);
  font-family: var(--ff-min);
  /* Figma の指定は Medium(500) だが、同じ 500 でも Figma の描画はブラウザより細く出るため
     見た目を合わせて 400 にする（.rc-message__title と同じ調整） */
  font-weight: 400;
  font-size: min(5rem, (100cqw - 80px) / 15.7);
  line-height: 1.6;
  letter-spacing: -.01em;
  text-align: center;
}

.rc-vision__amp {
  font-size: .72em;
}

.rc-vision__text {
  margin-top: 32px;
  color: var(--c-grey900b);
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .02em;
  text-align: center;
}

.rc-vision__text p + p {
  margin-top: 2.2em;
}

@media screen and (max-width: 749px) {
  .rc-vision__text p + p {
    margin-top: 2em;
  }
}

.rc-vision__deco {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 1440px;
  margin-left: -720px;
  pointer-events: none;
}

.rc-vision__deco img {
  position: absolute;
  display: block;
}

/* Figma 3942:9572 / 3942:9565。ぼかしは画像に焼き込まず、スクロール連動で解く（.rc-focus） */
.rc-vision__deco-haircare {
  top: 319px;
  left: 48px;
  width: 221px;
  --rc-blur: 9.16px;
}

/* 上の写真（エッセンス）を下の写真（シルカウラ）より手前に重ねる */
.rc-vision__deco-essense {
  z-index: 1;
  top: 440px;
  left: 1101px;
  width: 320px;
}

.rc-vision__deco-silkaura {
  top: 631px;
  left: 1033px;
  width: 200px;
  --rc-blur: 8px;
}

/* 画面内の所定位置に達したら一度だけピントが合う画像。
   JS が is-ready（ぼけた初期状態）→ is-focus（ピント合わせ開始）→ is-done（完了）を付ける。
   JS 無効時はぼかさない（is-ready が付かない） */
.rc-focus.is-ready {
  filter: blur(var(--rc-blur));
  will-change: filter;
}

.rc-focus.is-focus {
  filter: blur(0);
  transition: filter 1.4s cubic-bezier(.25, .1, .25, 1);
}

.rc-focus.is-done {
  filter: none;
  will-change: auto;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .rc-focus.is-ready {
    filter: none;
    will-change: auto;
  }
}

.rc-vision__deco-dermalink {
  top: 919px;
  left: 24px;
  width: 337px;
}

@media screen and (max-width: 749px) {
  .rc-biz {
    padding-bottom: 0;
  }

  .rc-vision {
    padding: 48px 0 180px;
  }

  .rc-vision__catch {
    margin-top: 80px;
    font-family: var(--ff-min);
    font-weight: 600;
    font-size: 2.8rem;
    letter-spacing: .04em;
  }

  .rc-vision__amp {
    font-family: var(--ff-serif);
    font-size: 2rem;
    line-height: 1.55;
  }

  .rc-vision__text {
    margin-top: 40px;
    color: var(--c-grey900);
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .03em;
    text-align: justify;
  }

  .rc-vision__deco {
    left: 0;
    width: 100%;
    margin-left: 0;
  }

  /* SP は画像サイズを固定（Figma 390px 時の値）。画面幅に比例して拡大すると本文に重なるため。
     右側の画像は右端基準で配置し、広い画面でも端からの位置を保つ */
  .rc-vision__deco-haircare {
    top: 34px;
    right: -12px;
    left: auto;
    width: 77px;
    --rc-blur: 3.19px;
  }

  .rc-vision__deco-essense {
    top: 83px;
    right: 7px;
    left: auto;
    width: 119px;
  }

  .rc-vision__deco-silkaura {
    top: auto;
    right: 20px;
    bottom: 81px;
    left: auto;
    width: 119px;
    --rc-blur: 5.16px;
  }

  .rc-vision__deco-dermalink {
    top: auto;
    bottom: 8px;
    left: 29px;
    width: 143px;
  }
}

/* JPSLABの2つの信念 */
.rc-value {
  position: relative;
  padding-bottom: 120px;
}

.rc-value__head {
  padding-top: 64px;
  text-align: center;
}

.rc-value__lead {
  color: var(--c-grey600);
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: .03em;
}

.rc-value__head .rc-h3 {
  padding-top: 0;
}

.rc-value__stage {
  position: relative;
  aspect-ratio: 1180 / 597;
  container-type: inline-size;
}

.rc-value__circle {
  position: absolute;
  top: -.17%;
  width: 50.678%;
}

.rc-value__circle--l {
  left: -4.746%;
}

.rc-value__circle--r {
  left: 52.542%;
}

.rc-value__item {
  position: absolute;
  width: 32.966%;
  color: var(--c-grey900b);
}

.rc-value__item--l {
  top: 30.151%;
  left: 7.458%;
}

.rc-value__item--r {
  top: 28.811%;
  left: 62.288%;
}

.rc-value__title {
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: max(2rem, 3.178cqw);
  line-height: 1.15;
  letter-spacing: .02em;
  white-space: nowrap;
}

.rc-value__text {
  margin-top: max(16px, 3.05cqw);
  font-size: max(1.2rem, 1.186cqw);
  line-height: 2;
  letter-spacing: .03em;
}

.rc-value__text p + p {
  margin-top: max(8px, 1.356cqw);
}

/* × の中心を左右の円の中心の中点（1180×597 基準 x581 y298）に合わせる。
   円はステージに対して左右対称ではない（左 -56〜542・右 620〜1218）ため、ステージ中央（x590）ではなく円の中点に置く */
.rc-value__x {
  position: absolute;
  top: 38.207%;
  left: 43.066%;
  width: 12.34%;
}

@media screen and (max-width: 749px) {
  .rc-value {
    margin-top: 80px;
    padding-bottom: 0;
    overflow-x: clip; /* 右の円はステージ右端から 55px はみ出す（Figma でもフレーム外）。横スクロールを出さない */
  }

  .rc-value__head {
    padding-top: 0;
  }

  .rc-value__lead {
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: 0;
  }

  .rc-value__head .rc-h3 {
    margin-top: 4px;
  }

  /* Figma SP 3942:10475（value-bg 350×735 基準）。--u は設計上の 1px。
     390px 幅（ステージ 350px）で等倍、狭い端末は構図ごと縮小（改行位置も維持）、広い端末は 350px で中央寄せ */
  .rc-value__stage {
    --u: calc(100cqw / 350);
    width: 100%;
    max-width: 350px;
    height: auto;
    margin: 24px auto 0;
    aspect-ratio: 350 / 735;
  }

  /* .rc img { max-width: 100% } より詳細度を上げて 388px（ステージより大きい）を許可 */
  .rc .rc-value__circle {
    width: calc(388 * var(--u));
    max-width: none;
  }

  .rc-value__circle--l {
    top: calc(.5 * var(--u));
    left: calc(-54 * var(--u));
  }

  .rc-value__circle--r {
    top: calc(346.5 * var(--u));
    left: calc(17 * var(--u));
  }

  .rc-value__item--l {
    top: calc(90.38 * var(--u));
    left: calc(23.5 * var(--u));
    width: calc(294 * var(--u));
  }

  .rc-value__item--r {
    top: calc(429.38 * var(--u));
    left: calc(82 * var(--u));
    width: calc(275 * var(--u));
  }

  /* Figma の行送りは px 切り捨て（24px×135%→32px、14px×160%→22px） */
  .rc-value__title {
    font-family: var(--ff-serif);
    font-size: calc(24 * var(--u));
    line-height: calc(32 * var(--u));
    letter-spacing: 0;
    white-space: normal;
  }

  .rc-value__text {
    margin-top: calc(23.94 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(22 * var(--u));
    text-spacing-trim: space-all; /* 」・「 を詰めない（Figma の組版と改行位置を合わせる） */
  }

  .rc-value__text p + p {
    margin-top: calc(10.64 * var(--u));
  }

  .rc-value__item--r .rc-value__text {
    margin-top: calc(24.32 * var(--u));
  }

  .rc-value__item--r .rc-value__text p + p {
    max-width: calc(261 * var(--u));
    margin-top: calc(10.81 * var(--u));
  }

  /* × の中心を上下の円の中心（140, 194.5）と（211, 540.5）の中点（175.5, 367.5）に合わせる */
  .rc-value__x {
    top: calc(331.04 * var(--u));
    left: calc(137.5 * var(--u));
    width: calc(76 * var(--u));
  }
}

/* 表示演出：円が左右からフェードイン → × → タイトルが下から → 本文（recruit.js が .is-in-l / .is-in-r を付与）
   .is-ready は JS 有効時のみ付くため、JS 無効・視差効果を減らす設定では最初から表示される */
@media (prefers-reduced-motion: no-preference) {
  /* 初期状態（非表示）への切替は即時。transition は表示側のルールにだけ持たせる */
  .rc-value__stage.is-ready .rc-value__circle,
  .rc-value__stage.is-ready .rc-value__x,
  .rc-value__stage.is-ready .rc-value__title,
  .rc-value__stage.is-ready .rc-value__text {
    opacity: 0;
  }

  .rc-value__stage.is-ready .rc-value__circle--l {
    transform: translateX(-16%);
  }

  .rc-value__stage.is-ready .rc-value__circle--r {
    transform: translateX(16%);
  }

  .rc-value__stage.is-ready .rc-value__x {
    transform: scale(.6);
  }

  .rc-value__stage.is-ready .rc-value__title {
    transform: translateY(24px);
  }

  .rc-value__stage.is-ready .rc-value__text {
    transform: translateY(16px);
  }

  .rc-value__stage.is-in-l .rc-value__circle--l,
  .rc-value__stage.is-in-r .rc-value__circle--r,
  .rc-value__stage.is-in-l.is-in-r .rc-value__x,
  .rc-value__stage.is-in-l .rc-value__item--l :is(.rc-value__title, .rc-value__text),
  .rc-value__stage.is-in-r .rc-value__item--r :is(.rc-value__title, .rc-value__text) {
    opacity: 1;
    transform: none;
  }

  /* 1. 円：左右から（0s〜） */
  .rc-value__stage.is-in-l .rc-value__circle--l,
  .rc-value__stage.is-in-r .rc-value__circle--r {
    transition: opacity 1s cubic-bezier(.25, .1, .25, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1);
  }

  /* 2. ×：円が重なり終わる頃（.9s〜） */
  .rc-value__stage.is-in-l.is-in-r .rc-value__x {
    transition: opacity .6s ease-out .9s, transform .8s cubic-bezier(.16, 1, .3, 1) .9s;
  }

  /* 3. タイトル：下から上へ（1s〜） */
  .rc-value__stage.is-in-l .rc-value__item--l .rc-value__title,
  .rc-value__stage.is-in-r .rc-value__item--r .rc-value__title {
    transition: opacity .8s ease-out 1s, transform .9s cubic-bezier(.16, 1, .3, 1) 1s;
  }

  /* 4. 本文：タイトルから少し遅れて（1.5s〜） */
  .rc-value__stage.is-in-l .rc-value__item--l .rc-value__text,
  .rc-value__stage.is-in-r .rc-value__item--r .rc-value__text {
    transition: opacity .8s ease-out 1.5s, transform .9s cubic-bezier(.16, 1, .3, 1) 1.5s;
  }
}

/* ブランド一覧 */
.rc-brands {
  position: relative;
  padding-bottom: 64px;
}

/* カラム数は PC（3カラム）と SP（1カラム）の 2 段階のみ。タブレット幅での 2 カラムは設けない */
.rc-brands__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 16px;
  padding-top: 50px;
}

.rc .rc-brand__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  transition: opacity .2s;
}

.rc .rc-brand__link:hover {
  opacity: .7;
}

.rc-brand__photo {
  display: block;
  width: 100%;
  aspect-ratio: 383 / 206;
  object-fit: cover;
}

.rc-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
}

.rc-brand__logo img {
  max-height: 42px;
  width: auto;
}

.rc-brand__sns {
  display: flex;
  justify-content: center;
  padding-top: 24px;
}

.rc .rc-brand__sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -7px 0;
  color: #747474;
  transition: opacity .2s;
}

.rc .rc-brand__sns a:hover {
  opacity: .6;
}

.rc-brand__sns svg {
  width: 40px;
  height: 40px;
}

@media screen and (max-width: 749px) {
  .rc-brands {
    margin-top: 80px;
    padding-bottom: 0;
  }

  .rc-brands__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 48px;
  }

  .rc .rc-brand__link {
    gap: 16px;
  }
}

/* 会社情報 */
.rc-company {
  position: relative;
}

.rc-company__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 48px;
}

.rc-company__table {
  flex: 0 0 min(570px, 48%);
  border-collapse: collapse;
  border-bottom: 1px solid var(--c-rule);
  table-layout: fixed;
}

.rc-company__table th,
.rc-company__table td {
  padding: 18px 16px 44px;
  border-top: 1px solid var(--c-rule);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .03em;
  text-align: left;
  vertical-align: top;
}

.rc-company__table th {
  width: 38.4%;
  color: var(--c-grey600);
}

.rc-company__table td {
  padding-left: 0;
  color: #1e1e1e;
}

.rc-company__photo {
  flex: 1 1 auto;
  min-width: 0;
  height: 466px;
  margin-right: calc((100% - 100vw) / 2);
  overflow: hidden;
}

.rc-company__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-company__body {
    flex-direction: column;
    align-items: stretch;
  }

  .rc-company__table {
    flex-basis: auto;
    width: 100%;
  }

  .rc-company__photo {
    height: auto;
    margin-right: 0;
  }
}

@media screen and (max-width: 749px) {
  .rc-company {
    margin-top: 80px;
  }

  .rc-company__body {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 24px;
  }

  .rc-company__table,
  .rc-company__table tbody,
  .rc-company__table tr,
  .rc-company__table th,
  .rc-company__table td {
    display: block;
    width: 100%;
  }

  .rc-company__table {
    border-bottom: 0;
  }

  .rc-company__table tr {
    padding: 12px 16px;
    border-bottom: 1px solid #ebebeb;
  }

  .rc-company__table th,
  .rc-company__table td {
    padding: 0;
    border-top: 0;
  }

  .rc-company__table th {
    font-size: 1.2rem;
    line-height: 1.8;
    letter-spacing: 0;
  }

  .rc-company__table td {
    color: var(--c-grey900);
  }

  .rc-company__photo {
    height: auto;
    margin: 0 -20px;
    padding-top: 31px;
  }
}

/* --------------------------------------------------------------------------
   Interview
   -------------------------------------------------------------------------- */
.rc-interview {
  padding: 120px 0 32px;
  --bg-top: -70px;
}

.rc-slider {
  margin-top: 32px;
}

.rc-slider__viewport {
  margin-right: calc((100% - 100vw) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.rc-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* ビューポートは矢印キーで横スクロールさせるため tabindex="0"。画面幅いっぱいの枠線（フォーカスリング）は出さない */
.rc .rc-slider__viewport:focus-visible {
  outline: none;
}

.rc-slider__track {
  display: flex;
  gap: 16px;
  width: max-content;
  padding-right: 40px;
}

.rc-card {
  display: flex;
  flex: 0 0 340px;
  flex-direction: column;
  gap: 8px;
  width: 340px;
  scroll-snap-align: start;
  cursor: pointer; /* カード全体がモーダルを開くクリック範囲（recruit.js） */
}

/* PC：左へスクロールしたカードも消さずに表示する。
   ビューポートをウインドウ左端まで広げ、同じ量の内側余白で開始位置・スナップ位置はコンテンツ枠の左端に保つ
   （100cqw = .rc-slider ＝コンテンツ枠の幅）。枠より左に出たカードは半透明（recruit.js が .is-outside を付与） */
@media screen and (min-width: 750px) {
  .rc-slider {
    container-type: inline-size;
  }

  .rc-slider__viewport {
    margin-left: calc((100cqw - 100vw) / 2);
    padding-left: calc((100vw - 100cqw) / 2);
    scroll-padding-left: calc((100vw - 100cqw) / 2);
  }

  .rc-card.is-outside {
    opacity: .5;
  }

  /* SP のループ用の複製（recruit.js） */
  .rc-card.is-clone {
    display: none;
  }
}

@media screen and (min-width: 750px) and (prefers-reduced-motion: no-preference) {
  .rc-card {
    transition: opacity .3s ease;
  }
}

.rc-card__photo {
  position: relative;
  aspect-ratio: 340 / 478;
  overflow: hidden;
  background: linear-gradient(to left, #d1dbd3 43.692%, #dbdfdd 96.91%);
}

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

/* ホバー時の別カット（PC のみ） */
.rc-card__photo > .rc-card__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s;
}

/* 白 / 黒のグラデーションを重ねておき、ホバーで不透明度を入れ替える（グラデーションは transition できないため） */
.rc-card__cover {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  isolation: isolate;
  padding: 74px 16px 56px;
  color: var(--c-grey900);
  transition: color .4s;
}

.rc-card__cover::before,
.rc-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity .4s;
}

.rc-card__cover::before {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9) 44.712%, #fff);
}

.rc-card__cover::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000);
  opacity: 0;
}

.rc-card--dark .rc-card__cover {
  color: var(--c-white);
}

.rc-card--dark .rc-card__cover::before {
  opacity: 0;
}

.rc-card--dark .rc-card__cover::after {
  opacity: 1;
}

.rc-card__quote {
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.55;
  letter-spacing: .055em;
}

.rc .rc-card__more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 16px;
  background: var(--c-grey900);
  color: var(--c-white);
  font-family: var(--ff-en);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0;
  border: 0;
  cursor: pointer;
  transition: background-color .4s, color .4s;
}

.rc-card__more svg {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

/* PC：通常時が暗いカバーで、ホバー時に白グラデーション＋黒ボタンへ切り替わるカード（社員紹介 3・5 番目）は、
   通常時の Read More を白地・黒文字にする（暗いカバー上で黒ボタンが埋もれないよう）。ホバーで黒地・白文字に反転（下のホバー規則） */
@media screen and (min-width: 750px) {
  .rc .rc-card--hover-light .rc-card__more {
    background: var(--c-white);
    color: var(--c-grey900);
  }
}

/* PC ホバー（キーボード操作時は Read More のフォーカスで同じ表示）：
   写真を別カットに切替、Read More を白地に反転。
   白地の Read More が埋もれないよう、明るいカードはグラデーションを暗く反転する
   （暗いカードは暗いまま。デザインでは明るく反転するが、白いボタンが背景と同化するため） */
@media (hover: hover) and (min-width: 750px) {
  .rc-card:hover .rc-card__hover,
  .rc-card:has(.rc-card__more:focus-visible) .rc-card__hover {
    opacity: 1;
  }

  .rc-card:hover .rc-card__cover,
  .rc-card:has(.rc-card__more:focus-visible) .rc-card__cover {
    color: var(--c-white);
  }

  .rc-card:hover .rc-card__cover::before,
  .rc-card:has(.rc-card__more:focus-visible) .rc-card__cover::before {
    opacity: 0;
  }

  .rc-card:hover .rc-card__cover::after,
  .rc-card:has(.rc-card__more:focus-visible) .rc-card__cover::after {
    opacity: 1;
  }

  .rc .rc-card:hover .rc-card__more,
  .rc .rc-card:has(.rc-card__more:focus-visible) .rc-card__more {
    background: var(--c-white);
    color: var(--c-grey900);
  }

  /* ホバー時も白グラデーション＋黒文字・黒ボタンにするカード（Figma 3942:15575：社員紹介3番目、3942:15577：5番目） */
  .rc-card.rc-card--hover-light:hover .rc-card__cover,
  .rc-card.rc-card--hover-light:has(.rc-card__more:focus-visible) .rc-card__cover {
    color: var(--c-grey900);
  }

  .rc-card.rc-card--hover-light:hover .rc-card__cover::before,
  .rc-card.rc-card--hover-light:has(.rc-card__more:focus-visible) .rc-card__cover::before {
    opacity: 1;
  }

  .rc-card.rc-card--hover-light:hover .rc-card__cover::after,
  .rc-card.rc-card--hover-light:has(.rc-card__more:focus-visible) .rc-card__cover::after {
    opacity: 0;
  }

  .rc .rc-card.rc-card--hover-light:hover .rc-card__more,
  .rc .rc-card.rc-card--hover-light:has(.rc-card__more:focus-visible) .rc-card__more {
    background: var(--c-grey900);
    color: var(--c-white);
  }
}

.rc-card__profile {
  padding-bottom: 16px;
}

.rc-card__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .02em;
}

.rc-card__initial {
  color: var(--c-grey900b);
  font-family: var(--ff-min);
  font-weight: 400;
  font-size: 3.2rem;
  line-height: 1.6;
  letter-spacing: .04em;
}

.rc-card__san {
  margin-left: -6px;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: .03em;
}

.rc-card__career {
  margin-top: 4px;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.55;
  letter-spacing: .06em;
}

.rc-slider__nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

/* スクロールバー：つまみのドラッグ・バーのクリックで横スクロール（recruit.js） */
.rc-slider__bar {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--c-grey300);
  cursor: pointer;
  touch-action: pan-y;
}

.rc-slider__thumb {
  position: absolute;
  top: -.5px;
  left: 0;
  width: 40%;
  height: 3px;
  background: var(--c-grey700);
  cursor: grab;
}

/* 見た目は細いまま、マウスで掴みやすいよう上下に操作範囲を広げる */
.rc-slider__bar::before,
.rc-slider__thumb::before {
  content: "";
  position: absolute;
  inset: -14px 0;
}

.rc-slider.is-dragging,
.rc-slider.is-dragging .rc-slider__bar,
.rc-slider.is-dragging .rc-slider__thumb,
.rc-slider.is-dragging .rc-card {
  cursor: grabbing;
  user-select: none;
}

/* カードをマウスでドラッグして横スクロールするため、画像自体のドラッグを無効化 */
.rc-slider__track img {
  -webkit-user-drag: none;
}

/* ドラッグ中はスナップを止め、指の動きにそのまま追従させる（離すと再びスナップ） */
.rc-slider.is-dragging .rc-slider__viewport {
  scroll-snap-type: none;
}

.rc-slider__btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 1px solid var(--c-grey400);
  border-radius: 50%;
  background: var(--c-white);
  cursor: pointer;
  transition: opacity .2s;
}

.rc-slider__btn:disabled {
  opacity: .3;
  cursor: default;
}

.rc-slider__btn svg {
  width: 32px;
  height: 32px;
}

.rc-slider__btn--prev svg {
  transform: scaleX(-1);
}

@media screen and (max-width: 749px) {
  .rc-interview {
    padding: 64px 0;
  }

  .rc-slider {
    margin-top: 64px;
    padding-bottom: 40px; /* Figma: container padding-bottom 40 */
  }

  /* Figma 3942:10663：カード（275px）を画面中央に置き、左右に隣のカードを少し覗かせる。
     トラック左右に「画面幅の半分 − カード幅の半分」の余白を取り、中央でスナップさせる
     （100cqw = .rc ＝画面幅。スクロールバー幅を含まない） */
  .rc-slider__viewport {
    margin-left: -20px;
    margin-right: -20px;
  }

  .rc-slider__track {
    padding: 0 calc(50cqw - 137.5px);
  }

  .rc-card {
    flex-basis: 275px;
    width: 275px;
    scroll-snap-align: center;
  }

  .rc-card__cover {
    padding: 74px 12px 56px;
  }

  /* SP はホバー用画像を描画しない（遅延読み込みの対象外にして転送もしない） */
  .rc-card__photo > .rc-card__hover {
    display: none;
  }

  .rc-card__quote {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.8;
    letter-spacing: 0;
  }

  /* SP はループするためスクロールバーを出さず、前後ボタンのみ中央に置く */
  .rc-slider__nav {
    justify-content: center;
    margin-top: 20px; /* Figma: カード下端(510px)からページネーションまで 20px */
  }

  .rc-slider__bar {
    display: none;
  }
}

/* 社員紹介モーダル（<dialog>） */
html:has(.rc-modal[open]) {
  overflow: hidden;
}

.rc-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-grey900);
  /* スクロールは内側の .rc-modal__scroll に持たせる。
     <dialog> 自体をスクロール領域にすると、内容がダイアログより高いときに
     ブラウザによって上下中央寄せになり、上端（× とパネル上部）に戻せなくなるため */
  overflow: hidden;
}

/* モバイルは URL バーの分だけ表示領域が変わるため、実際に見えている高さに合わせる
   （inset: 0 で上端は固定されるので、下端が URL バーの裏に潜らないようにする） */
@supports (height: 100dvh) {
  .rc-modal {
    height: 100dvh;
  }
}

.rc-modal[open] {
  display: block;
}

/* スクロール領域。× はこの要素基準の absolute なのでパネルと一緒にスクロールする */
.rc-modal__scroll {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* フォーカス移動などブラウザ側のスクロールでも上の余白を残す（× が画面外に出ないように） */
  scroll-padding-top: 40px;
}

.rc-modal::backdrop {
  background: rgba(51, 51, 51, .5);
}

@media (prefers-reduced-motion: no-preference) {
  .rc-modal[open],
  .rc-modal[open]::backdrop {
    animation: rc-modal-in .3s ease-out;
  }
}

@keyframes rc-modal-in {
  from {
    opacity: 0;
  }
}

/* PC：左に見出し・プロフィール・本文、右に写真（グレー帯からはみ出す） */
.rc-modal__panel {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 31px 326px 89px;
  grid-template-rows: 46px minmax(92px, auto) 20px auto 45px 28px minmax(172px, auto) 28px auto 42px;
  width: 100%;
  max-width: 1026px;
  margin: auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-white);
}

.rc-modal__panel:focus {
  outline: none;
}

/* 上部のグレー帯（見出し〜プロフィールの高さに追従） */
.rc-modal__panel::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / 6;
  background: #f6f7f7;
}

.rc-modal__catch {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 3rem;
  line-height: 47px;
  letter-spacing: 0;
}

.rc-modal__catch > span {
  display: block;
  width: fit-content;
  margin-left: -5px;
  padding: 0 5px;
  background: var(--c-white);
}

.rc-modal__photo {
  grid-column: 4;
  grid-row: 2 / 8;
  align-self: start;
  aspect-ratio: 326 / 450;
  overflow: hidden;
  background: linear-gradient(to left, #d1dbd3 43.692%, #dbdfdd 96.91%);
}

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

.rc-modal__prof {
  display: flex;
  grid-column: 2;
  grid-row: 4;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  border-left: 2px solid var(--c-grey300);
}

.rc-modal__name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .02em;
}

.rc-modal__career {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: .04em;
}

.rc-modal__text {
  grid-column: 2;
  grid-row: 7;
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: .03em;
}

.rc .rc-modal__close {
  grid-column: 1 / -1;
  grid-row: 9;
  justify-self: center;
  width: 190px;
  padding: 16px 20px;
  border: 1px solid var(--c-grey300);
  background: var(--c-white);
  color: #18203e;
  font-family: var(--ff-en);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 16px;
  letter-spacing: .05em;
  cursor: pointer;
  transition: opacity .2s;
}

.rc .rc-modal__close:hover {
  opacity: .7;
}

.rc .rc-modal__x {
  display: none;
}

/* タブレット・SP：1カラム（見出し → 写真 → プロフィール → 本文）、閉じるは右上の × */
@media screen and (max-width: 959px) {
  .rc-modal::backdrop {
    background: rgba(0, 0, 0, .5);
  }

  /* パネルと × は常に上揃え。flex の auto マージンで上下位置を決めると
     パネルがスクロール領域より高いときに中央寄せになり上端が切れるため、
     ブロックレイアウトにして横方向だけ中央寄せにする */
  .rc-modal__scroll {
    display: block;
    padding: 57px 20px 40px;
    scroll-padding-top: 57px;
  }

  .rc-modal__panel {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    grid-template-rows: 32px auto 16px auto 4px auto 24px 24px auto 40px;
    max-width: 560px;
    margin: 0 auto;
    container-type: inline-size;
  }

  .rc-modal__panel::before {
    grid-row: 1 / 8;
  }

  /* 1 行 16 文字がパネル幅に収まるよう、文字サイズをパネル幅に追従させ字間を詰める（デザイン値 1px）
     100cqi - 左右余白 48px - 白地の左右 8px を 16 文字分（字間込み）で割る */
  .rc-modal__catch {
    color: #333;
    font-family: var(--ff-serif);
    font-size: min(1.8rem, (100cqi - 56px) / 16.5);
    line-height: 32px;
    letter-spacing: .02em;
  }

  .rc-modal__catch > span {
    margin-left: 0;
    padding: 0 4px 1px;
  }

  /* Figma SP：パネル幅 350px に対して写真 194.88px（55.68%）。パネル（コンテナ）幅に比例して伸縮し、
     パネルが最大幅 560px で止まる広い画面では写真も止まる（高さは aspect-ratio 326/450） */
  .rc-modal__photo {
    grid-row: 4;
    grid-column: 2;
    justify-self: center;
    width: 55.68cqi;
  }

  .rc-modal__prof {
    grid-row: 6;
    gap: 2px;
  }

  .rc-modal__text {
    grid-row: 9;
    font-size: 1.4rem;
    line-height: 2;
  }

  .rc .rc-modal__close {
    display: none;
  }

  /* × はパネル右上に合わせる（Figma SP：タップ領域 44px の右端がパネル右端 +6px、上端がパネル上端 -45px）。
     パネル幅 = min(560px, ダイアログ幅 - 左右余白 40px) を中央寄せなので、右位置もそこから算出する。
     ダイアログ（スクロール領域）基準の absolute なので、パネルと一緒にスクロールする */
  .rc .rc-modal__x {
    position: absolute;
    top: 12px;
    right: calc(50% - min(280px, 50% - 20px) - 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--c-white);
    cursor: pointer;
  }

  .rc .rc-modal__x:focus-visible {
    outline-color: var(--c-white);
  }

  .rc-modal__x svg {
    width: 22px;
    height: 22px;
    overflow: visible;
  }
}


/* --------------------------------------------------------------------------
   Member
   -------------------------------------------------------------------------- */
.rc-member {
  padding: 64px 0 120px;
  --bg-top: -64px;
}

.rc-member__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 16px;
  margin-top: 32px;
}

.rc-mcard {
  min-height: 334px;
  padding: 32px 32px 48px;
  background: var(--c-white);
}

.rc-mcard__tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 4px 8px 4px 0;
}

.rc-mcard__tag img {
  flex: none;
  width: 28px;
  height: 28px;
}

.rc-mcard__tagtext {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: -.02em;
}

.rc-mcard__amp {
  color: var(--c-grey800);
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: .06em;
}

.rc-mcard__title {
  padding-bottom: 24px;
  font-family: var(--ff-serif);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: 0;
}

.rc-mcard__text {
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: .05em;
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-member__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rc-mcard {
    min-height: 0;
  }
}

@media screen and (max-width: 749px) {
  .rc-member {
    padding: 0 0 100px;
  }

  .rc-member__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
  }

  .rc-mcard {
    min-height: 0;
    padding: 32px 24px 40px;
  }

  .rc-mcard__tag {
    margin-bottom: 4px;
  }

  .rc-mcard__tagtext {
    font-size: 1.4rem;
    line-height: 25px;
  }

  .rc-mcard__amp {
    font-size: 1.2rem;
  }

  .rc-mcard__title {
    padding-bottom: 16px;
    font-size: 2rem;
    line-height: 1.55;
  }
}

/* --------------------------------------------------------------------------
   Culture
   -------------------------------------------------------------------------- */
.rc-culture {
  padding: 120px 0;
  background: var(--c-white);
  --bg-top: -63px;
}

.rc-culture__intro {
  margin-top: 32px;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .02em;
}

.rc-culture__points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.rc-culture__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.rc-culture__point img {
  width: 100%;
  max-width: 372px;
}

.rc-culture__cap {
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.4;
  letter-spacing: .04em;
  text-align: center;
}

/* 数字で見るJPSLAB */
.rc-num-sec {
  margin-top: 64px;
}

.rc-num__note {
  margin-top: 32px;
  color: var(--c-grey700);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: .05em;
}

.rc-num {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.rc-num__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.rc-num__fig {
  position: relative;
  width: 100%;
  height: 150px;
}

.rc .rc-num__fig img {
  position: absolute;
  left: 50%;
  max-width: none;
  transform: translateX(-50%);
}

.rc .rc-num__fig--age img {
  top: 21px;
  width: 206px;
}

.rc .rc-num__fig--gender .rc-num__donut {
  top: 3px;
  width: 137px;
}

.rc .rc-num__fig--gender .rc-num__line {
  top: 111px;
  width: 17px;
  transform: none;
}

.rc .rc-num__fig--gender .rc-num__line--l {
  left: calc(50% - 80px);
}

.rc .rc-num__fig--gender .rc-num__line--r {
  left: calc(50% + 62px);
}

.rc .rc-num__fig--holiday img {
  top: 1px;
  width: 130px;
}

.rc .rc-num__fig--overtime img {
  top: 0;
  width: 132px;
}

.rc-num__label {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: .03em;
}

.rc-num__value {
  font-family: var(--ff-min);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

.rc-num__big {
  font-size: min(8rem, 5.55vw);
}

.rc-num__unit {
  font-size: min(3.6rem, 2.5vw);
}

.rc-num__value--gender {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  margin-top: 22px;
}

.rc-num__g {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.rc-num__sex {
  margin-bottom: 4px;
  font-size: 2rem;
  line-height: 1.2;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.rc-num__g .rc-num__big {
  font-size: min(5.6rem, 3.9vw);
}

.rc-num__g .rc-num__unit {
  font-size: min(3.2rem, 2.2vw);
}

.rc-num__sub {
  margin-top: 4px;
  color: var(--c-grey700);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.65;
  letter-spacing: .05em;
}

/* 社内制度 */
.rc-priv {
  margin-top: 64px;
}

.rc-priv__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.rc-priv__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.rc-priv__item img {
  width: 100%;
  max-width: 271px;
}

.rc-priv__label {
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: .03em;
  text-align: center;
}

@media screen and (min-width: 750px) and (max-width: 959px) {
  .rc-culture__cap {
    font-size: 2rem;
  }

  .rc-num {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px;
  }

  .rc-num__big {
    font-size: 6.4rem;
  }

  .rc-num__unit {
    font-size: 2.8rem;
  }

  .rc-num__g .rc-num__big {
    font-size: 4.8rem;
  }

  .rc-num__g .rc-num__unit {
    font-size: 2.4rem;
  }
}

@media screen and (max-width: 749px) {
  .rc-culture {
    padding: 64px 0 100px;
  }

  .rc-culture__intro {
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .03em;
  }

  .rc-culture__points {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin-top: 24px;
  }

  .rc-culture__point {
    flex-direction: row;
    gap: 16px;
  }

  .rc-culture__point img {
    flex: none;
    width: 130px;
  }

  .rc-culture__cap {
    font-size: 1.8rem;
    line-height: 1.4;
    letter-spacing: .04em;
    text-align: left;
  }

  .rc-num-sec {
    margin-top: 56px;
  }

  .rc-num__note {
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 1.65;
    letter-spacing: .05em;
  }

  .rc-num {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 12px;
    margin-top: 24px;
  }

  .rc-num__fig {
    height: 78px;
  }

  .rc .rc-num__fig--age img {
    top: 11px;
    width: 119px;
  }

  .rc .rc-num__fig--gender .rc-num__donut {
    top: 0;
    width: 78px;
  }

  .rc .rc-num__fig--gender .rc-num__line {
    top: 58px;
    width: 10px;
  }

  .rc .rc-num__fig--gender .rc-num__line--l {
    left: calc(50% - 45px);
  }

  .rc .rc-num__fig--gender .rc-num__line--r {
    left: calc(50% + 35px);
  }

  .rc .rc-num__fig--holiday img {
    top: 0;
    width: 75px;
  }

  .rc .rc-num__fig--overtime img {
    top: -1px;
    width: 73px;
  }

  .rc-num__label {
    font-size: 1.4rem;
    line-height: 2;
  }

  .rc-num__big {
    font-size: 4.4rem;
  }

  .rc-num__unit {
    font-size: 2rem;
  }

  .rc-num__value--gender {
    gap: 10px;
    margin-top: 8px;
  }

  .rc-num__g {
    gap: 2px;
  }

  .rc-num__sex {
    font-size: 1.2rem;
  }

  .rc-num__g .rc-num__big {
    font-size: 3.2rem;
  }

  .rc-num__g .rc-num__unit {
    font-size: 1.6rem;
  }

  .rc-num__sub {
    margin-top: 0;
    font-size: 1.4rem;
    line-height: 1.65;
  }

  .rc-priv {
    margin-top: 56px;
  }

  .rc-priv__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 42px 12px; /* Figma: 行間48 − アイテムのはみ出し分 ≒ 42 */
    margin-top: 24px;
  }

  .rc-priv__item {
    gap: 0;
    padding: 0 12px;
  }

  .rc-priv__label {
    font-size: 1.4rem;
    line-height: 2;
  }
}

/* --------------------------------------------------------------------------
   Recruit
   -------------------------------------------------------------------------- */
.rc-recruit {
  --bg-top: -120px;
}

.rc-position {
  padding: 120px 0 54px;
}

/* アコーディオン（details / summary でキーボード・支援技術に対応） */
.rc-acc {
  margin-top: 28px;
  border-bottom: 1px solid var(--c-grey300);
}

.rc-acc__summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: 8px 96px;
  color: var(--c-grey900b);
  font-family: var(--ff-min);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0;
  list-style: none;
  cursor: pointer;
}

.rc-acc__summary::-webkit-details-marker {
  display: none;
}

.rc-acc__icon {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 68px;
  height: 68px;
  margin-top: -34px;
  border: 1.333px solid var(--c-grey300);
  border-radius: 50%;
  background: var(--c-white);
  transition: border-color .2s;
}

.rc-acc__summary:hover .rc-acc__icon {
  border-color: var(--c-grey700);
}

.rc-acc__icon::before,
.rc-acc__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1px;
  margin: -.5px 0 0 -9px;
  background: var(--c-grey900);
  transition: transform .25s;
}

.rc-acc__icon::after {
  transform: rotate(90deg);
}

.rc-acc[open] .rc-acc__icon::after {
  transform: rotate(0deg);
}

/* Figma 3942:15194：開いた状態は見出し行の下にも罫線 */
.rc-acc[open] > .rc-acc__summary {
  border-bottom: 1px solid var(--c-grey300);
}

.rc-acc__body {
  display: grid;
  gap: 40px;
  max-width: 1095px;
  margin-inline: auto;
  padding: 40px 0 64px;
}

/* 募集要項の項目一覧（dl）：グレー地に白い行を 4px 間隔で並べる */
.rc-spec {
  display: grid;
  gap: 24px;
}

.rc-spec__title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-grey800);
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: .03em;
}

.rc-spec__title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 18px;
  background: #777;
}

.rc-spec__list {
  display: grid;
  gap: 4px;
}

.rc-spec__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  background: var(--c-white);
  color: var(--c-grey900);
  font-size: 1.6rem;
}

.rc-spec__row dt {
  flex: none;
  font-weight: 500;
  line-height: 2.2;
  letter-spacing: .02em;
  white-space: nowrap;
}

.rc-spec__row dd {
  flex: 0 1 812px;
  min-width: 0;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .06em;
}

.rc-spec__ul {
  padding-left: 24px;
}

.rc .rc-spec__ul > li {
  list-style: disc;
  font-size: inherit;
}

/* エントリー */
.rc-entry {
  padding-bottom: 64px;
}

.rc-entry__text {
  margin-top: 32px;
  font-size: 1.6rem;
  line-height: 2.2;
  letter-spacing: .02em;
}

/* 選考プロセス
   背景 SVG（Figma 3942:10272）は項目ごとに幅が違うため、項目幅を SVG の幅に比例させ（flex-grow = SVG 幅）、
   全項目を同じ倍率で拡縮する。先端・切り欠きの角度が全項目でそろう。
   重なり幅の % は、5 項目を並べた全体幅（SVG 幅の合計 1281.39 − 重なり 25.8 × 4 = 1178.19）に対する割合。
   文字は図形の重心に合わせる（2〜4 番目は SVG の中央とほぼ一致するので補正不要）。
   補正は padding だと flex の基準サイズに入って項目幅が崩れるため、疑似要素のスペーサー（項目自身の幅に対する %）で行う */
.rc-process {
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.rc-process__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 104px;
  margin-right: -2.19%; /* 25.8 / 1178.19 */
  background: no-repeat center / 100% 100%;
  color: var(--c-grey900);
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 25px;
  letter-spacing: 0;
  text-align: center;
}

.rc-process__item:last-child {
  margin-right: 0;
}

.rc-process__item:nth-child(1) {
  flex: 244.284 1 0;
  background-image: url("../img/process-1.svg");
}

/* Figma の文字位置（図形の重心より左寄り） */
.rc-process__item:nth-child(1)::after {
  content: "";
  flex: none;
  width: 13.55%;
}

.rc-process__item:nth-child(2) {
  flex: 275.884 1 0;
  background-image: url("../img/process-2.svg");
}

.rc-process__item:nth-child(3) {
  flex: 258.466 1 0;
  background-image: url("../img/process-3.svg");
}

.rc-process__item:nth-child(4) {
  flex: 258.466 1 0;
  background-image: url("../img/process-4.svg");
}

.rc-process__item:nth-child(5) {
  flex: 244.288 1 0;
  background-image: url("../img/process-5.svg");
}

/* 右辺が直線のため、図形の重心は中央より右 */
.rc-process__item:nth-child(5)::before {
  content: "";
  flex: none;
  width: 8.5%;
}

/* 写真帯 */
.rc-strip {
  overflow: hidden;
}

.rc-strip--pc {
  margin-top: 120px;
  padding-top: 33px;
}

.rc-strip__row {
  display: flex;
  gap: 8px;
}

/* PC：ウインドウ幅に連動して拡大・縮小
   基準は 1440px 幅（画像 323 + 371 + 371 + 350 ＋ 隙間 8px × 3 = 1439px / 高さ 248px）。
   行に aspect-ratio を与えて高さを幅から算出し、各画像は元幅の比率で flex-grow を配分する */
.rc-strip--pc .rc-strip__row {
  aspect-ratio: 1439 / 248;
  gap: calc(8 / 1439 * 100%);
}

.rc .rc-strip--pc img {
  flex: 323 1 0;
  min-width: 0;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rc .rc-strip--pc img:nth-child(2),
.rc .rc-strip--pc img:nth-child(3) {
  flex-grow: 371;
}

.rc .rc-strip--pc img:nth-child(4) {
  flex-grow: 350;
}

.rc-strip--sp {
  display: none;
}

@media screen and (max-width: 749px) {
  .rc-position {
    padding: 64px 0 48px;
  }

  .rc-position .rc-h3 {
    margin-top: 24px;
  }

  .rc-acc {
    margin-top: 16px;
  }

  .rc-acc__summary {
    min-height: 100px;
    padding: 0 72px;
    font-family: var(--ff-serif);
    font-size: 2rem;
    line-height: 1.55;
  }

  .rc-acc__icon {
    right: 0;
    width: 60px;
    height: 60px;
    margin-top: -30px;
    border: 1px solid var(--c-grey400);
  }

  .rc-acc__body {
    gap: 32px;
    padding: 24px 0 40px;
  }

  .rc-spec {
    gap: 16px;
  }

  .rc-spec__title {
    font-size: 1.6rem;
  }

  .rc-spec__title::before {
    height: 16px;
  }

  .rc-spec__row {
    display: block;
    padding: 16px;
    font-size: 1.4rem;
  }

  .rc-spec__row dt {
    line-height: 1.8;
    white-space: normal;
  }

  .rc-spec__row dd {
    margin-top: 4px;
    line-height: 1.7;
    letter-spacing: .04em;
  }

  .rc-spec__ul {
    padding-left: 20px;
  }

  .rc-entry {
    padding: 48px 0;
  }

  .rc-entry__text {
    margin-top: 24px;
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: .03em;
  }

  .rc-entry__text p + p {
    margin-top: 16px;
  }

  .rc-process-sec {
    padding-top: 48px;
  }

  .rc-process {
    flex-direction: column;
    align-items: stretch;
    padding-top: 32px;
  }

  .rc-process__item,
  .rc-process__item:nth-child(n) {
    flex: none;
    align-items: flex-start;
    height: 111px;
    margin: 0 0 -8px;
    padding: 0;
    background-image: url("../img/process-sp.svg");
    font-size: 1.6rem;
    line-height: 91px;
    letter-spacing: .02em;
  }

  .rc-process__item::before,
  .rc-process__item::after {
    display: none;
  }

  .rc-process__item:nth-child(1) { z-index: 5; }
  .rc-process__item:nth-child(2) { z-index: 4; }
  .rc-process__item:nth-child(3) { z-index: 3; }
  .rc-process__item:nth-child(4) { z-index: 2; }

  .rc-process__item:last-child {
    z-index: 1;
    height: 91px;
    margin: 0;
    background-image: linear-gradient(180deg, rgba(235, 235, 235, .35) 0%, #c8c8c8 99.9%);
  }

  .rc-strip--pc {
    display: none;
  }

  /* SP：ウインドウ幅に連動して拡大・縮小（基準 390px 幅のデザイン値を cqw に換算）
     100cqw = .rc（コンテンツ幅）。100vw と違いスクロールバー幅を含まない */
  .rc-strip--sp {
    position: relative;
    display: block;
    height: 82.5641cqw; /* 322 / 390 */
  }

  .rc-strip--sp .rc-strip__row {
    position: absolute;
    gap: .8641cqw; /* 3.37 / 390 */
  }

  .rc-strip--sp .rc-strip__row:nth-child(1) {
    top: 28.2051cqw; /* 110 / 390 */
    left: 0;
  }

  .rc-strip--sp .rc-strip__row:nth-child(2) {
    top: 55.8974cqw; /* 218 / 390 */
    left: 0;
  }

  .rc .rc-strip--sp img {
    flex: none;
    width: auto;
    height: 26.6667cqw; /* 104 / 390 */
    max-width: none;
    object-fit: cover;
  }
}