/* ==========================================================================
   NSK 採用サイト（/recruit/ 配下だけで読み込む）
   PCの値は Figma（1440幅）のpx値を calc(N * var(--rc-u)) で書く。
   --rc-u は 1440px以上で 1px、1439px以下で 1/1440 vw になり、全体が比例して縮む。
   SPデザインがある箇所だけ、767px以下で calc(N / 375 * 100vw) で上書きする。
   1. Variables
   2. Base
   3. Utility（pc, sp）
   4. Layout（loading, site-header, sp-menu, site-footer）
   5. Component（site-logo, btn, hover-slide, section-title, fadein）
   6. Section（TOP：mv, mv-collage, intro, president, about, system, faq ／ 下層：page-title, lower-photo, business, business-chart, philosophy, training, evaluation, career, benefits）
   ========================================================================== */

/* 1. Variables
   ========================================================================== */
@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

:root {
  --rc-color-primary: #182987;
  --rc-color-primary-light: #1653c6;
  --rc-gradient-primary: linear-gradient(to right, #1653c6, #182987);
  --rc-color-label: #00388d;
  --rc-color-text: #333;
  --rc-color-text-sub: #666;
  --rc-color-border: #d6d6d6;
  --rc-color-border-overlay: rgba(51, 51, 51, .2); /* 半透明の区切り線（白の上で #d6d6d6 と同じ色。下が青でも見える） */
  --rc-color-bg-light: #f5faff;
  --rc-color-white: #fff;
  --rc-color-white-a30: rgba(255, 255, 255, .3);
  --rc-color-shadow: rgba(0, 0, 0, .15); /* スクロール後のヘッダーの影 */
  --rc-color-white-a80: rgba(255, 255, 255, .8);
  --rc-color-primary-a60: rgba(24, 41, 135, .6);
  --rc-color-primary-a06: rgba(24, 41, 135, .06);
  --rc-color-primary-a04: rgba(24, 41, 135, .04);
  --rc-color-placeholder: #dfe6f3; /* 写真が届くまでの仮の背景 */
  --rc-color-mv-bg: #f1f6fb; /* MV上部の背景 */
  --rc-color-deco: #c4d3ff; /* 装飾（四角・ライン・ドット） */
  --rc-gradient-deco: linear-gradient(45deg, #103fb5 0%, #184ad3 50%, #3370e2 50.1%, #4cb9ff 100%); /* 装飾の四角 */
  --rc-font-base: "Noto Sans JP", sans-serif;
  --rc-font-en: "Alata", sans-serif;
  --rc-header-height: 62px;
  --rc-inner-width: 1180px;
  --rc-inner-width-n: 1180; /* --rc-u と掛け合わせる用 */

  /* 1440基準のpx値に掛ける単位 */
  --rc-u: 1px;

  /* MV 斜めスライダー（値は 1440幅の基準枠の中の px 値）
     並び：写真は「並びの座標」lx の上を一定の速さで進む。lx は x0 から 経路の長さ ぶん左へ動く
           lx での写真どうしの距離は、画面中央での距離（幅の半分の和 ＋ 間隔 40）
     大きさ：n ＝（lx − center）÷ range として、scale-min ＋（1 − scale-min）×（1 − n²）²
             画面の端と中央で変化の勢いが 0 になるので、拡大はゆっくり始まり、縮小はゆっくり止まる
     左右：画面上の x は、写真が小さい場所ほど lx の進みを縮めた位置（compress で強さを調整）。
           端で写真が小さくなっても、間隔が広がりすぎない
     上下：y = 基準 ＋ 傾き × dx ＋ 曲がり × dx²（dx は画面上の x の、基準枠の中央 720 からの距離）
     center / half：大きさと白のかぶりの基準。画面の中央の x と、中央から画面の端までの距離（PC は基準枠そのもの。SP は画面に見える範囲） */
  --rc-mv-x0: 2675;
  --rc-mv-length: 3910; /* 1周の長さ（写真2周分）。下の --start の決め方を参照 */
  --rc-mv-y: 324;
  --rc-mv-slope: .1919;
  --rc-mv-curve: .00012;
  --rc-mv-duration: 80s; /* 1周する時間（画面中央での速さ 約49px/秒） */
  --rc-mv-scale-min: .75; /* 両端での縮小率 */
  --rc-mv-title-glow: .85; /* キャッチの後ろの白いぼかしの濃さ（0〜1） */
  --rc-mv-fade-max: .6; /* 両端で写真に重ねる白の濃さ（0〜1）。大きさと同じカーブで、中央では 0 になる */
  --rc-mv-compress: .6; /* 写真が小さい場所で距離を縮める強さ（0：縮めない 〜 1：大きさと同じ割合で縮める） */
  --rc-mv-center: 720;
  --rc-mv-half: 720;

  /* MV コラージュ */
  --rc-collage-width: 1641; /* 1セットの幅（写真の並び 1601 ＋ セット間の余白 40） */
  --rc-collage-duration: 60s;
}
@media (max-width: 1439px) {
  :root {
    --rc-u: calc(1 / 1440 * 100vw); /* rule-ok 曲線の計算で単位を掛け合わせるため、1px相当を変数にしている */
  }
}

/* 2. Base
   ========================================================================== */
:where(.recruit) *,
:where(.recruit) *::before,
:where(.recruit) *::after {
  box-sizing: border-box;
}

.recruit {
  margin: 0;
  background: var(--rc-color-white);
  color: var(--rc-color-text);
  font-family: var(--rc-font-base);
  font-feature-settings: "palt"; /* 採用サイト全体で約物・かなを詰める */
  letter-spacing: .05em; /* palt で詰まった分の字間。字間を指定していないテキストに効く */
  overflow-x: hidden;
}

:where(.recruit) :is(h1, h2, h3, p, ul) {
  margin: 0;
}

:where(.recruit) ul {
  padding: 0;
  list-style: none;
}

:where(.recruit) a {
  color: inherit;
  text-decoration: none;
}

:where(.recruit) img {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.recruit) button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* 3. Utility
   ========================================================================== */
.pc {
  display: revert;
}
@media (max-width: 767px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media (max-width: 767px) {
  .sp {
    display: revert;
  }
}

/* 4. Layout
   ========================================================================== */

/* ローディング画面（Figma：loading 394:2817。TOP のみ）
   html に is-loading が付いているときだけ表示する。バーは決まった時間で伸ばす演出で、実際の読み込みの進み具合ではない
   閉じるときは .js-loading に is-loaded を付けて、その場で透明にして消す（ロゴは少し上へ浮かせる。js/script.js） */
.is-loading {
  overflow: hidden; /* 表示中は後ろのページをスクロールさせない */
}

.loading {
  display: none;
}

.is-loading .loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--rc-color-white);
  transition: opacity .8s ease;
}
@media (prefers-reduced-motion: reduce) {
  .is-loading .loading {
    transition: none;
  }
}

/* 背景：白の上にグラデーションを 4% で重ねる */
.loading::before {
  position: absolute;
  inset: 0;
  background: var(--rc-gradient-primary);
  opacity: .04;
  content: '';
}

.loading.is-loaded {
  opacity: 0;
}

.loading__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px; /* 細い線なので画面幅で縮めない */
  background: var(--rc-color-white);
}

.loading__bar-fill {
  display: block;
  height: 100%;
  background: var(--rc-gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  animation: loading-bar 1.2s cubic-bezier(.45, 0, .2, 1) .2s forwards;
}

@keyframes loading-bar {
  to {
    transform: scaleX(1);
  }
}

.loading__logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--rc-u));
  width: calc(276 * var(--rc-u));
  opacity: 0; /* Web フォントが届いたら表示する（is-font-ready は header.php のスクリプトで付ける） */
  transition: opacity .5s ease-out, transform .8s ease;
}
@media (max-width: 767px) {
  .loading__logo {
    gap: calc(14 / 375 * 100vw);
    width: calc(200 / 375 * 100vw);
  }
}

.loading.is-loaded .loading__logo {
  transform: translateY(calc(-16 * var(--rc-u)));
}
@media (max-width: 767px) {
  .loading.is-loaded .loading__logo {
    transform: translateY(calc(-12 / 375 * 100vw));
  }
}

.is-font-ready .loading__logo {
  opacity: 1;
}

.loading__logo-img {
  width: 100%;
}

.loading__logo-text {
  color: var(--rc-color-primary);
  font-family: var(--rc-font-en);
  font-size: calc(20 * var(--rc-u));
  line-height: calc(17.973 / 20);
  letter-spacing: .05em;
}
@media (max-width: 767px) {
  .loading__logo-text {
    font-size: calc(15 / 375 * 100vw);
  }
}

/* ヘッダー（Figma：Header pc_first / sp） */
/* 画面上部に固定。一定量スクロールしたら JS（js-header）で is-scrolled を付けて背景をぼかす */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: calc(48 * var(--rc-u));
  width: 100%;
  height: calc(62 * var(--rc-u));
  padding-left: calc(32 * var(--rc-u));
  background-color: var(--rc-header-bg);
  transition: background-color .3s, backdrop-filter .3s, box-shadow .3s;
  --rc-header-bg: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}
@media (max-width: 767px) {
  .site-header {
    justify-content: space-between;
    gap: 0;
    height: auto;
    padding: calc(14 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}

/* 最上部では背景を透明にし、スクロールしたら（is-scrolled）白の半透明にしてぼかし、影を付ける */
.site-header.is-scrolled {
  box-shadow: 0 4px 40px 0 var(--rc-color-shadow);
  backdrop-filter: blur(8px);
  --rc-header-bg: var(--rc-color-white-a30);
}

/* ログイン中は WordPress の管理バー（PC 32px / 782px以下 46px）の下に置く */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px; /* rule-ok WordPress 管理バーの切り替え幅 */
  }
}

.site-header__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: calc(36 * var(--rc-u));
  height: 100%;
}
@media (max-width: 767px) {
  .site-header__body {
    flex: none;
    gap: calc(6 / 375 * 100vw);
    height: auto;
  }
}

.global-nav {
  margin-left: auto;
}
@media (max-width: 767px) {
  .global-nav {
    display: none;
  }
}

.global-nav__list {
  display: flex;
  align-items: center;
  gap: calc(28 * var(--rc-u));
}

/* 各項目の中身を上下中央に揃える（li の行の高さに引っぱられて、縮めたときにリンクが下にずれるため） */
.global-nav__item {
  display: flex;
  align-items: center;
}

.global-nav__link {
  display: block;
  color: var(--rc-color-text);
  font-size: calc(15 * var(--rc-u));
  font-weight: 700;
  line-height: calc(22.1 / 15);
  letter-spacing: .1em;
  white-space: nowrap;
}

.global-nav__sns {
  display: block;
}

.global-nav__sns img {
  display: block;
  width: calc(30 * var(--rc-u));
}

.site-header__entry {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(190 * var(--rc-u));
  height: 100%;
  background: var(--rc-gradient-primary);
  color: var(--rc-color-white);
  font-size: calc(18 * var(--rc-u));
  font-weight: 700;
  line-height: calc(16.2 / 18);
  letter-spacing: .1em;
}
@media (max-width: 767px) {
  .site-header__entry {
    width: auto;
    height: auto;
    padding: calc(8 / 375 * 100vw) calc(14 / 375 * 100vw);
    font-size: calc(11 / 375 * 100vw);
    line-height: calc(16.2 / 11);
  }
}

.site-header__menu {
  display: none;
}
@media (max-width: 767px) {
  .site-header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(32 / 375 * 100vw);
    height: calc(32 / 375 * 100vw);
  }
}

.site-header__menu-open {
  width: calc(22 / 375 * 100vw);
}

/* × は Figma の表示 20px に対して、線の太さ分はみ出す SVG（21.414px） */
.site-header__menu-close {
  display: none;
  width: calc(21.414 / 375 * 100vw);
}

/* SPのメニューを開いている間（html に is-menu-open。js/script.js）：ヘッダーを白にし、ボタンを × にする。後ろのページはスクロールさせない */
.is-menu-open {
  overflow: hidden;
}

.is-menu-open .site-header {
  background-color: var(--rc-color-white);
}

.is-menu-open .site-header__menu-open {
  display: none;
}

.is-menu-open .site-header__menu-close {
  display: block;
}

/* SPのメニュー（Figma：sp_menu 401:2887）
   ヘッダーの下に重ね、上にナビ、下にコーポレートサイトなどのリンクを置く
   開くときは背景がフェードインし、中身が下からふわっと上がる（is-open は js/script.js で付ける） */
.sp-menu {
  position: fixed;
  inset: 0;
  z-index: 29; /* ヘッダー（30）の下 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(61 / 375 * 100vw); /* ヘッダーの高さ */
  background: var(--rc-color-white-a80);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .sp-menu {
    transition: none;
  }
}

.sp-menu[hidden] {
  display: none;
}

.sp-menu.is-open {
  opacity: 1;
}

.admin-bar .sp-menu {
  top: 46px; /* rule-ok WordPress 管理バー（782px以下） */
}

.sp-menu__nav,
.sp-menu__bottom {
  transform: translateY(calc(20 / 375 * 100vw));
  transition: transform .5s cubic-bezier(.25, .6, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .sp-menu__nav,
  .sp-menu__bottom {
    transition: none;
  }
}

.sp-menu.is-open .sp-menu__nav,
.sp-menu.is-open .sp-menu__bottom {
  transform: none;
}

.sp-menu__nav {
  padding: calc(20 / 375 * 100vw) calc(30 / 375 * 100vw) 0;
}

.sp-menu__list li {
  padding: calc(8 / 375 * 100vw) 0;
  border-bottom: 1px solid var(--rc-color-border-overlay); /* メニューの背景は半透明なので、後ろが青くても見える色 */
}

.sp-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rc-color-text);
  font-size: calc(15 / 375 * 100vw);
  font-weight: 700;
  line-height: calc(22.1 / 15);
  letter-spacing: .1em;
}

/* 右の矢印（Figma：Frame 1000004445。32px の枠の中に矢印） */
.sp-menu__link::after {
  flex-shrink: 0;
  width: calc(32 / 375 * 100vw);
  height: calc(32 / 375 * 100vw);
  background: url('../img/icon-chevron.svg') no-repeat center / 100%;
  content: '';
}

.sp-menu__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(20 / 375 * 100vw) calc(30 / 375 * 100vw);
  border-top: 1px solid var(--rc-color-border-overlay);
}

.sp-menu__sub {
  display: flex;
  flex-direction: column;
  gap: calc(12 / 375 * 100vw);
}

.sp-menu__sub-link {
  display: block;
  color: var(--rc-color-text);
  font-size: calc(13 / 375 * 100vw);
  line-height: 1.45;
}

.sp-menu__sns img {
  width: calc(36 / 375 * 100vw);
}

/* インナー（コンテンツ幅 1180。1440 では左右 130 の余白） */
.inner {
  max-width: calc(var(--rc-inner-width-n) * var(--rc-u));
  margin-inline: auto;
}
@media (max-width: 767px) {
  .inner {
    max-width: none;
    padding-inline: calc(20 / 375 * 100vw);
  }
}

/* フッター（Figma：footer first / sp） */
.footer-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(622 * var(--rc-u));
  padding-top: calc(99 * var(--rc-u));
  background: var(--rc-color-bg-light) url('../img/bg_noise.jpg') repeat left top / 800px; /* 粒状の質感。乗算で薄い青の上に重ねる */
  background-blend-mode: multiply;
  overflow: hidden;
}
@media (max-width: 767px) {
  .footer-entry {
    height: auto;
    padding: calc(48 / 375 * 100vw) calc(24 / 375 * 100vw) calc(64 / 375 * 100vw);
  }
}

.footer-entry > :not(.footer-entry__bg) {
  position: relative;
}

.footer-entry .section-title {
  margin-bottom: calc(64 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-entry .section-title {
    margin-bottom: calc(32 / 375 * 100vw);
  }
}

.footer-entry__bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(219 * var(--rc-u));
  overflow: hidden;
  color: var(--rc-color-primary-a04);
  font-family: var(--rc-font-en);
  font-size: calc(228.162 * var(--rc-u));
  line-height: calc(390.24 / 228.162);
  letter-spacing: .04em;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .footer-entry__bg {
    top: calc(339 / 375 * 100vw);
    bottom: auto;
    left: calc(-184 / 375 * 100vw);
    width: auto;
    height: auto;
    overflow: visible;
    font-size: calc(120 / 375 * 100vw);
    line-height: normal;
    text-align: left;
  }
}

.footer-entry__bg-text {
  display: flex;
  width: max-content;
  margin-top: calc(-69.21 * var(--rc-u));
  animation: footer-bg-flow 40s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .footer-entry__bg-text {
    animation: none;
  }
}
@media (max-width: 767px) {
  .footer-entry__bg-text {
    margin: 0;
  }
}

/* 1つ分ごとに後ろに間隔を空けてつなげる */
.footer-entry__bg-item {
  padding-right: .3em;
}

@keyframes footer-bg-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.footer-entry__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(20 * var(--rc-u));
  width: calc(937 * var(--rc-u));
  margin-bottom: calc(63 * var(--rc-u));
  text-align: center;
}
@media (max-width: 767px) {
  .footer-entry__lead {
    gap: calc(20 / 375 * 100vw);
    width: 100%;
    margin-bottom: calc(32 / 375 * 100vw);
  }
}

.footer-entry__catch {
  color: var(--rc-color-primary);
  font-size: calc(34 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  white-space: nowrap; /* 末尾の字間（.18em）の分だけ幅を超えて折り返すため。Figma では1行 */
}
@media (max-width: 767px) {
  .footer-entry__catch {
    font-size: calc(22 / 375 * 100vw);
    white-space: normal;
  }
}

.footer-entry__text {
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .footer-entry__text {
    font-size: calc(16 / 375 * 100vw);
  }
}

.footer-main {
  display: flex;
  flex-direction: column;
  gap: calc(80 * var(--rc-u));
  padding: calc(120 * var(--rc-u)) calc(80 * var(--rc-u));
  background: var(--rc-color-white) url('../img/bg_noise.jpg') repeat left top / 800px; /* 粒状の質感 */
}
@media (max-width: 767px) {
  .footer-main {
    gap: calc(40 / 375 * 100vw);
    padding: calc(80 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}

.footer-main__top {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-main__top {
    gap: calc(32 / 375 * 100vw);
  }
}

.footer-main__row {
  display: flex;
  align-items: flex-start;
  gap: calc(92 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-main__row {
    flex-direction: column;
    gap: calc(32 / 375 * 100vw);
  }
}

.footer-main__logo {
  flex: 1;
}

.footer-nav {
  display: flex;
  gap: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-nav {
    flex-direction: column;
    gap: calc(16 / 375 * 100vw);
  }
}

.footer-nav__link {
  font-size: calc(15 * var(--rc-u));
  line-height: 1.65;
  letter-spacing: .08em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .footer-nav__link {
    font-size: calc(15 / 375 * 100vw);
  }
}

.footer-main__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-main__actions {
    justify-content: space-between;
    gap: 0;
  }
}

.footer-main__sns img {
  width: calc(46 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-main__sns img {
    width: calc(46 / 375 * 100vw);
  }
}

.footer-main__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(40 * var(--rc-u));
  border-top: 1px solid var(--rc-color-border);
  font-size: calc(15 * var(--rc-u));
  white-space: nowrap;
}
@media (max-width: 767px) {
  .footer-main__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 / 375 * 100vw);
    padding-top: calc(40 / 375 * 100vw);
    font-size: calc(13 / 375 * 100vw);
  }
}

.footer-main__links {
  display: flex;
  align-items: center;
  gap: calc(19.995 * var(--rc-u));
}
@media (max-width: 767px) {
  .footer-main__links {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 / 375 * 100vw);
  }
}

.footer-main__copyright {
  color: inherit;
}
@media (max-width: 767px) {
  .footer-main__copyright {
    color: var(--rc-color-text-sub);
    font-size: calc(12 / 375 * 100vw);
  }
}

.footer-main__copyright small {
  font-size: inherit;
}

/* 5. Component
   ========================================================================== */

/* ロゴ（Figma：logo PC） */
.site-logo {
  display: flex;
  align-items: center;
  gap: calc(23 * var(--rc-u));
  width: fit-content;
}
@media (max-width: 767px) {
  .site-header .site-logo {
    gap: calc(12.543 / 375 * 100vw);
  }

  .footer-main .site-logo {
    gap: calc(18.881 / 375 * 100vw);
  }
}

.site-logo__img {
  width: calc(164 * var(--rc-u));
}
@media (max-width: 767px) {
  .site-header .site-logo__img {
    width: calc(89.434 / 375 * 100vw);
  }

  .footer-main .site-logo__img {
    width: calc(134.627 / 375 * 100vw);
  }
}

.site-logo__text {
  color: var(--rc-color-primary);
  font-family: var(--rc-font-en);
  font-size: calc(20 * var(--rc-u));
  line-height: calc(17.973 / 20);
  letter-spacing: .05em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .site-header .site-logo__text {
    font-size: calc(10.91 / 375 * 100vw);
  }

  .footer-main .site-logo__text {
    font-size: calc(16.42 / 375 * 100vw);
  }
}

/* ボタン（Figma：button blue・white・line / middle・small） */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(306 * var(--rc-u));
  padding: calc(24 * var(--rc-u)) calc(32 * var(--rc-u));
  background: var(--rc-gradient-primary);
  color: var(--rc-color-white);
  font-size: calc(20 * var(--rc-u));
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .05em;
}

/* 白いボタン（Figma：button white） */
.btn--white {
  background: var(--rc-color-white);
  color: var(--rc-color-primary);
}

/* 線のボタン（Figma：button line）。白地に 1px の紺の枠 */
.btn--line {
  border: 1px solid var(--rc-color-primary);
  background: var(--rc-color-white);
  color: var(--rc-color-primary);
}

/* small サイズ（Figma：button blue / small） */
.btn--small {
  width: calc(200 * var(--rc-u));
  padding: calc(16 * var(--rc-u)) calc(24 * var(--rc-u));
  font-size: calc(16 * var(--rc-u));
}

.btn--small .btn__icon {
  width: calc(6 * var(--rc-u));
  height: calc(12 * var(--rc-u));
}

.btn--small .btn__icon::before {
  width: calc(7.707 * var(--rc-u));
  height: calc(14 * var(--rc-u));
  -webkit-mask-image: url('../img/icon-arrow-white-small.svg');
  mask-image: url('../img/icon-arrow-white-small.svg');
}

/* SPのときだけ small サイズ（Figma：button blue / small）。幅は置き場所ごとに Figma の値 */
@media (max-width: 767px) {
  .btn--sp-small {
    padding: calc(16 / 375 * 100vw) calc(24 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
  }

  .btn--sp-small .btn__icon {
    width: calc(6 / 375 * 100vw);
    height: calc(12 / 375 * 100vw);
  }

  .btn--sp-small .btn__icon::before {
    width: calc(7.707 / 375 * 100vw);
    height: calc(14 / 375 * 100vw);
    -webkit-mask-image: url('../img/icon-arrow-white-small.svg');
    mask-image: url('../img/icon-arrow-white-small.svg');
  }

  .footer-entry .btn--sp-small {
    width: calc(185 / 375 * 100vw);
  }

  .footer-main__actions .btn--sp-small {
    width: calc(170 / 375 * 100vw);
  }
}

.btn__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(8 * var(--rc-u));
  height: calc(16 * var(--rc-u));
}

/* 矢印（Figma の Vector 1）。SVG の形で切り抜き、文字と同じ色で塗る */
.btn__icon::before {
  position: absolute;
  top: calc(-1 * var(--rc-u));
  left: calc(-1 * var(--rc-u));
  width: calc(9.707 * var(--rc-u));
  height: calc(18 * var(--rc-u));
  background-color: currentColor;
  -webkit-mask: url('../img/icon-arrow-white.svg') no-repeat center / 100% 100%;
  mask: url('../img/icon-arrow-white.svg') no-repeat center / 100% 100%;
  content: '';
}

/* 区切り線（1px・#d6d6d6） */
.divider {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rc-color-border);
}

/* セクションのリード（見出し 24px ＋ 本文 18px・中央ぞろえ。Figma：研修制度 300:10864 / 評価制度 300:10900） */
.section-lead__title {
  margin-bottom: calc(8 * var(--rc-u));
  color: var(--rc-color-primary);
  font-size: calc(24 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .1em;
  text-align: center;
}
@media (max-width: 767px) {
  .section-lead__title {
    margin-bottom: calc(8 / 375 * 100vw);
    font-size: calc(18 / 375 * 100vw);
  }
}

.section-lead__text {
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
  text-align: center;
}
@media (max-width: 767px) {
  .section-lead__text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
    text-align: justify;
  }
}

/* ドット柄（直径3のドット11個の行を11行。Figma：Dot Grid）
   位置は 1440幅の基準枠の中の座標（--l / --t）で、親の section の上端・基準枠の左端から指定する */
.deco-dots {
  position: absolute;
  top: calc(var(--t) * var(--rc-u));
  left: calc(50% - 720 * var(--rc-u) + var(--l) * var(--rc-u));
  width: calc(100 * var(--rc-u));
  height: calc(99 * var(--rc-u));
  background: url('../img/deco-dots.svg') repeat-y left top / 100% calc(9 * var(--rc-u));
  pointer-events: none;
}

/* セクション見出し（英字ラベル＋和文） */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--rc-u));
  text-align: center;
}
@media (max-width: 767px) {
  .section-title {
    gap: calc(12 / 375 * 100vw);
  }
}

.section-title__en {
  color: var(--rc-color-label);
  font-family: var(--rc-font-en);
  font-size: calc(12 * var(--rc-u));
  line-height: calc(20.4 / 12);
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .section-title__en {
    font-size: calc(12 / 375 * 100vw);
  }
}

.section-title__ja {
  color: var(--rc-color-primary);
  font-size: calc(34 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .section-title__ja {
    font-size: calc(22 / 375 * 100vw);
  }
}

.section-title__ja--small {
  font-size: calc(24 * var(--rc-u));
}
@media (max-width: 767px) {
  .section-title__ja--small {
    font-size: calc(18 / 375 * 100vw);
  }
}

/* ホバー：10時の方向（左上）から、斜めの境目で色がスライドしてくる（ボタン・ヘッダーのエントリー・リンクのカード）
   ::before に変わったあとの見た目を重ね、clip-path の三角形を左上の角から広げて見せる
   三角形の斜辺は 60°（10時→4時の向きに直角）。大きさの違う要素でも同じ角度になるよう px で指定している
   ・青いボタン、リンクのカード → 白背景＋紺の枠・紺の文字
   ・白いボタン、線のボタン → 青背景・白の文字
   ・枠の有無はモディファイアで変える：btn--hover-borderless（枠なし。ヘッダーのエントリーも同じ）／ btn--hover-bordered（白いボタンに白の枠）
   タッチ端末ではタップ後に色が残らないよう、ホバーできる端末だけで動かす */
.btn,
.link-card,
.site-header__entry {
  position: relative;
  isolation: isolate; /* ::before（z-index: -1）を背景より前・文字より後ろに置くため */
  transition: color .3s;
}

.btn::before,
.link-card::before,
.site-header__entry::before {
  position: absolute;
  inset: -1px; /* 端に元の色が細く残らないよう、1px 外側まで覆う */
  z-index: -1;
  background: var(--rc-color-white);
  box-shadow: inset 0 0 0 1px var(--rc-color-primary); /* 青いボタンのホバー時の紺の枠 */
  clip-path: polygon(0 0, 0 0, 0 0);
  transition: clip-path .5s cubic-bezier(.45, 0, .55, 1);
  content: '';
}
@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .link-card::before,
  .site-header__entry::before {
    transition: none;
  }
}

.btn--white::before,
.btn--line::before {
  background: var(--rc-gradient-primary);
  box-shadow: none;
}

.btn--hover-borderless::before,
.site-header__entry::before {
  box-shadow: none;
}

.btn--hover-bordered::before {
  box-shadow: inset 0 0 0 1px var(--rc-color-white);
}

@media (hover: hover) {
  .btn:hover::before,
  .link-card:hover::before,
  .site-header__entry:hover::before {
    clip-path: polygon(0 0, 600px 0, 0 1039px); /* 1039 ＝ 600 × tan60°。幅500px程度までの要素を覆える */
  }

  .btn:hover,
  .link-card:hover,
  .site-header__entry:hover {
    color: var(--rc-color-primary);
  }

  .btn--white:hover,
  .btn--line:hover {
    color: var(--rc-color-white);
  }
}

/* テキストリンク・Instagram のアイコン・ロゴのホバー：ふわっと薄くする（ヘッダー・フッター・SPのメニュー）
   タッチ端末ではタップ後に薄いまま残らないよう、ホバーできる端末だけで動かす */
.global-nav__link,
.footer-nav__link,
.footer-main__link,
.sp-menu__link,
.sp-menu__sub-link,
.global-nav__sns,
.footer-main__sns,
.sp-menu__sns,
.site-logo {
  transition: opacity .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .global-nav__link,
  .footer-nav__link,
  .footer-main__link,
  .sp-menu__link,
  .sp-menu__sub-link,
  .global-nav__sns,
  .footer-main__sns,
  .sp-menu__sns,
  .site-logo {
    transition: none;
  }
}

@media (hover: hover) {
  .global-nav__link:hover,
  .footer-nav__link:hover,
  .footer-main__link:hover,
  .sp-menu__link:hover,
  .sp-menu__sub-link:hover,
  .global-nav__sns:hover,
  .footer-main__sns:hover,
  .sp-menu__sns:hover,
  .site-logo:hover {
    opacity: .7;
  }
}

/* スクロールで出す（ふわっと下から）。JS が付ける is-inview で表示する（js/script.js）
   同時に画面に入った要素は、JS が --fadein-delay で少しずつずらす
   has-js（header.php で描画前に付ける）が無い環境・視差効果を減らす設定では、最初から表示 */
.has-js .fadein {
  opacity: 0;
  transform: translateY(calc(30 * var(--rc-u)));
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.25, .6, .3, 1);
  transition-delay: var(--fadein-delay, 0s);
}
@media (max-width: 767px) {
  .has-js .fadein {
    transform: translateY(calc(20 / 375 * 100vw));
  }
}
@media (prefers-reduced-motion: reduce) {
  .has-js .fadein {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.has-js .fadein.is-inview {
  opacity: 1;
  transform: none;
}

/* 6. Section
   ========================================================================== */

/* MV の登場：ローディング画面が消えたあと（出さないときは読み込み後すぐ）、JS が html に is-mv-shown を付ける（js/script.js）
   写真 → コラージュ → キャッチ → 手書き風の英字 の順に、少しずつ遅らせて出す。背景と装飾は最初から表示 */
.has-js .mv-slider,
.has-js .mv-collage,
.has-js .mv__under-txt {
  opacity: 0;
}

.has-js .mv__title {
  opacity: 0;
  transform: translateY(calc(20 * var(--rc-u)));
}

.is-mv-shown .mv-slider {
  opacity: 1;
  transition: opacity 1.2s ease-out .1s;
}

.is-mv-shown .mv-collage {
  opacity: 1;
  transition: opacity 1.2s ease-out .4s;
}

.is-mv-shown .mv__title {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease-out .7s, transform 1s cubic-bezier(.25, .6, .3, 1) .7s;
}

.is-mv-shown .mv__under-txt {
  opacity: 1;
  transition: opacity 1.2s ease-out 1.1s;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .mv-slider,
  .has-js .mv-collage,
  .has-js .mv__under-txt,
  .has-js .mv__title {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* MV */
.mv {
  position: relative;
  height: calc(839 * var(--rc-u));
  overflow-x: clip; /* 下端は .mv__under-txt がコラージュまではみ出すので、横だけ切り取る */
}
@media (max-width: 767px) {
  /* Figma top_sp：写真・装飾は PC の配置を 0.5 倍し、左に 212px ずらした位置 */
  .mv {
    --rc-u: calc(1 / 750 * 100vw); /* PC の 1px ＝ SP の 0.5px */
    --rc-mv-y: 392; /* 写真の通り道を SP の 34px（PC の単位で 68）下げる */
    --rc-mv-center: 799; /* SP の画面中央 187.5px ＝ PC の座標 799 */
    --rc-mv-half: 375; /* SP の画面の半分 187.5px ＝ PC の単位で 375 */
    height: calc(495 / 375 * 100vw); /* Figma 635。キャッチを 140 上げたのに合わせて縮めている */
  }
}

/* MV の重なり順（Figma のレイヤー順）
   背景 → 装飾（後ろ） → 写真 → 装飾（前） → 手書き風の英字・Line 17 → コラージュ → キャッチ → ヘッダー */
.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(555 * var(--rc-u));
  background: var(--rc-color-mv-bg);
}
@media (max-width: 767px) {
  .mv__bg {
    height: calc(323 / 375 * 100vw); /* Figma 463 から 140 上げている */
  }
}

/* 装飾。位置は 1440幅の基準枠の中の座標（--l / --t）で指定し、広い画面では中央に寄る */
.mv-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mv-deco--front {
  z-index: 2;
}

.mv-deco__square,
.mv-deco__line,
.mv-deco__dots {
  position: absolute;
  top: calc(var(--t) * var(--rc-u));
  left: calc(50% - 720 * var(--rc-u) + var(--l) * var(--rc-u));
}

.mv-deco__square {
  width: calc(var(--size) * var(--rc-u));
  height: calc(var(--size) * var(--rc-u));
  background: var(--rc-color-deco);
}

.mv-deco__square--gradient {
  background: var(--rc-gradient-deco);
}

/* SP の Figma に無い装飾 */
@media (max-width: 767px) {
  .mv-deco__square--01,
  .mv-deco__square--02,
  .mv-deco__square--03,
  .mv-deco__square--08,
  .mv-deco__line,
  .mv-deco__dots--01 {
    display: none;
  }
}

.mv-deco__square--01 {
  --l: 436;
  --t: -9;
  --size: 21;
}

.mv-deco__square--02 {
  --l: 709;
  --t: 617;
  --size: 21;
}

.mv-deco__square--03 {
  --l: 1267;
  --t: 872;
  --size: 36;
}

.mv-deco__square--04 {
  --l: 1282;
  --t: 169;
  --size: 21;
}
@media (max-width: 767px) {
  .mv-deco__square--04 {
    top: calc(250.5 / 375 * 100vw);
    left: calc(295 / 375 * 100vw);
  }
}

.mv-deco__square--05 {
  --l: 1383;
  --t: 106;
  --size: 24;
}
@media (max-width: 767px) {
  .mv-deco__square--05 {
    top: calc(219 / 375 * 100vw);
    left: calc(345.5 / 375 * 100vw);
  }
}

.mv-deco__square--06 {
  --l: 36;
  --t: 387;
  --size: 27;
}
@media (max-width: 767px) {
  .mv-deco__square--06 {
    top: calc(466 / 375 * 100vw);
    left: calc(15 / 375 * 100vw);
  }
}

.mv-deco__square--07 {
  --l: 55;
  --t: 359;
  --size: 36;
}
@media (max-width: 767px) {
  .mv-deco__square--07 {
    top: calc(452 / 375 * 100vw);
    left: calc(24.5 / 375 * 100vw);
  }
}

.mv-deco__square--08 {
  --l: 883;
  --t: 1151;
  --size: 24;
}

/* ライン：Figma では 138×91 の範囲に収まる右上がりの線（長さ 165.303、角度 atan(91 / 138) ≒ 33.4°）
   --l / --t は範囲の左下（線の始点） */
.mv-deco__line {
  width: calc(165.303 * var(--rc-u));
  height: 2px;
  margin-top: -1px;
  background: var(--rc-color-deco);
  transform: rotate(-33.4deg);
  transform-origin: left center;
}

.mv-deco__line--01 {
  --l: 611;
  --t: 60;
}

/* Line 17：コラージュの上端。手書き風の英字より前、コラージュより後ろ */
.mv-deco__line--02 {
  --l: 659;
  --t: 930;
  z-index: 15;
}

/* ドット柄：1行分（直径3のドット11個）を縦に11行くり返す */
.mv-deco__dots {
  width: calc(100 * var(--rc-u));
  height: calc(99 * var(--rc-u));
  background: url('../img/deco-dots.svg') repeat-y left top / 100% calc(9 * var(--rc-u));
}

.mv-deco__dots--01 {
  --l: 301;
  --t: 93;
}

.mv-deco__dots--02 {
  --l: 421;
  --t: 708;
}
@media (max-width: 767px) {
  .mv-deco__dots--02 {
    top: calc(432 / 375 * 100vw);
    left: calc(312 / 375 * 100vw);
  }
}

.mv__under-txt {
  position: absolute;
  top: calc(634 * var(--rc-u));
  left: calc(50% - 720 * var(--rc-u));
  z-index: 15;
  width: calc(1440 * var(--rc-u));
  max-width: none;
  mix-blend-mode: hard-light; /* Figma の描画モード。SVG 内の指定は画像の外に効かないため、要素にも付ける */
  pointer-events: none;
}
@media (max-width: 767px) {
  .mv__under-txt {
    top: calc(365 / 375 * 100vw);
    left: calc(-3 / 375 * 100vw);
    width: calc(387 / 375 * 100vw);
  }
}

.mv__title {
  position: absolute;
  top: calc(445 * var(--rc-u));
  left: calc(50% - 720 * var(--rc-u) + 81 * var(--rc-u)); /* 1440幅の中で left 81。広い画面では中央に寄る */
  z-index: 20;
  width: calc(548 * var(--rc-u));
}
@media (max-width: 767px) {
  .mv__title {
    top: calc(256 / 375 * 100vw); /* Figma は 396。写真に重ねて上に詰めるため 140 上げている（下の要素も同じだけ上げている） */
    left: calc(20 / 375 * 100vw);
    width: calc(316 / 375 * 100vw);
  }
}

/* キャッチの後ろの白いぼかし（写真と重なったときに読みやすくするため。Figma には無い追加要素） */
.mv__title::before {
  content: '';
  position: absolute;
  inset: calc(-24 * var(--rc-u)) calc(-40 * var(--rc-u));
  z-index: -1;
  border-radius: calc(80 * var(--rc-u));
  background: var(--rc-color-white);
  opacity: var(--rc-mv-title-glow);
  filter: blur(calc(60 * var(--rc-u)));
  pointer-events: none;
}

/* MV 斜めスライダー
   --p（0→1）を動かし、位置と大きさを計算する。式は :root の --rc-mv-* のコメントを参照
   写真ごとの値（.mv-slider__item--NN）
   ・--start：止まっているときの位置（0〜1）
   ・--w：画面中央での幅（Figma の幅）/ --ar：縦横比
   ・--ox / --oy：経路からのずらし量（大きさに合わせて縮む）。縦に並べる写真は --start を同じにして --oy で上下に分ける

   --start の決め方（写真同士を左右に重ねないため）
   ・並びの座標 lx での、隣り合う列の中心の距離 ＝ 両方の幅の半分の和 ＋ 間隔 40。縦並びの列は広い方の幅で計算する
   ・画面上では、写真が小さい場所ほどこの距離が縮む（--rc-mv-compress）
   ・1周分（Figma の4列 1955px）を2周つなげて --rc-mv-length = 3910
   ・--start ＝（--rc-mv-x0 − 止まっているときの lx）÷ --rc-mv-length。2周目は --lap2 で .5 ずらす
   ・写真を増やす・幅や間隔を変えるときは、--rc-mv-length と --rc-mv-x0（＝ 720 ＋ 長さの半分）、--start を計算し直す */
/* 1440幅の基準枠を画面中央に置く。広い画面でも写真が画面外から入ってくるようにするため */
.mv-slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 720 * var(--rc-u));
  z-index: 1;
  width: calc(1440 * var(--rc-u));
  clip-path: inset(0 -100vw); /* 写真が MV の上下にはみ出さないよう、上下だけ切り取る（左右は .mv で切り取る） */
}
@media (max-width: 767px) {
  .mv-slider {
    left: calc(-212 / 375 * 100vw);
  }
}

.mv-slider__item {
  --lap: 0;
  --p: mod(calc(var(--start) + var(--lap)), 1); /* アニメーションを止めたときの位置 */
  /* 画面の端（center ± half）でちょうど scale-min になる lx の範囲。scale-min と compress から自動で決まる */
  --range: calc(var(--rc-mv-half) / (1 - var(--rc-mv-compress) * (1 - var(--rc-mv-scale-min)) * 7 / 15));
  --n: calc((var(--rc-mv-x0) - var(--rc-mv-length) * var(--p) - var(--rc-mv-center)) / var(--range));
  --nc: clamp(-1, var(--n), 1); /* 画面外は端の値のまま */
  --e: calc(1 - var(--nc) * var(--nc)); /* 画面内で 1→0、画面外は 0 */
  --s: calc(var(--rc-mv-scale-min) + (1 - var(--rc-mv-scale-min)) * var(--e) * var(--e));
  --fade: calc(var(--rc-mv-fade-max) * (1 - var(--e) * var(--e))); /* 白の濃さ：端で fade-max、中央で 0 */
  /* 画面上の位置：1 − compress ×（1 − --s）を lx で積分した値（（1 − n²）² の積分は n − 2n³/3 ＋ n⁵/5） */
  --dx: calc(var(--range) * (var(--n) - var(--rc-mv-compress) * (1 - var(--rc-mv-scale-min)) * (var(--n) - (var(--nc) - 2 * var(--nc) * var(--nc) * var(--nc) / 3 + var(--nc) * var(--nc) * var(--nc) * var(--nc) * var(--nc) / 5))));
  --x: calc(var(--rc-mv-center) + var(--dx));
  --sx: calc(var(--x) - 720); /* 基準枠の中央からの距離（上下の位置の計算用） */
  --y: calc(var(--rc-mv-y) + var(--rc-mv-slope) * var(--sx) + var(--rc-mv-curve) * var(--sx) * var(--sx) + var(--oy) * var(--s));
  --ox: 0;
  --oy: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--w) * var(--rc-u));
  aspect-ratio: var(--ar);
  background: var(--rc-color-placeholder);
  transform: translate(calc((var(--x) + var(--ox) * var(--s)) * var(--rc-u)), calc(var(--y) * var(--rc-u))) translate(-50%, -50%) scale(var(--s));
  /* 動きは js/script.js が付ける。--p を CSS アニメーションで動かすと、Safari で毎フレーム描画し直してメモリが増え続け、
     iPhone ではページが落ちるため（2026-10-30 確認）。JS はここの式から1周分の transform を読み取り、transform のアニメーションにする */
}

.mv-slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 写真に重ねる白。写真が小さいほど濃くなる（動きは js/script.js） */
.mv-slider__fade {
  position: absolute;
  inset: 0;
  background: var(--rc-color-white);
  opacity: var(--fade);
  pointer-events: none;
}

/* 右端（mv-photo-05）。止まっているときの lx 1562.5 */
.mv-slider__item--01 {
  --start: .2845;
  --w: 639;
  --ar: 1278 / 1034;
  --oy: -60;
}

/* 中央・大（mv-photo-01）。止まっているときの lx 955 */
.mv-slider__item--02 {
  --start: .4399;
  --w: 496;
  --ar: 992 / 1150;
}

/* 縦並びの列・下（mv-photo-02）。止まっているときの lx 501.5 */
.mv-slider__item--03 {
  --start: .5559;
  --w: 331;
  --ar: 662 / 594;
  --oy: 178;
}

/* 縦並びの列・上（mv-photo-03 カメラ）。下の写真と右端をそろえる（（331 − 221）÷ 2 ＝ 55） */
.mv-slider__item--04 {
  --start: .5559;
  --w: 221;
  --ar: 442 / 334;
  --ox: 55;
  --oy: -87;
}

/* 左上（mv-photo-04）。止まっているときの lx 131.5 */
.mv-slider__item--05 {
  --start: .6505;
  --w: 329;
  --ar: 658 / 596;
  --oy: -38;
}

/* 2周目 */
.mv-slider__item--lap2 {
  --lap: .5;
}

/* MV コラージュ（左から右へ流れ続ける）。Figma：Group 149（328:3885）
   写真は Figma で見えている範囲だけを切り抜いて書き出している（recruit/img/mv-collage-NN.jpg）
   写真ごとの値（--l・--t：セット内の位置 / --w：幅 / --ar：縦横比）は .mv-collage__item--NN で指定する */
.mv-collage {
  position: relative;
  z-index: 16;
  height: calc(438 * var(--rc-u));
  overflow: hidden;
}
@media (max-width: 767px) {
  .mv-collage {
    --rc-u: calc(1 / 750 * 100vw); /* PC の配置を 0.5 倍（Figma top_sp） */
  }
}

.mv-collage__track {
  display: flex;
  width: max-content;
  animation: collage-flow var(--rc-collage-duration) linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .mv-collage__track {
    animation: none;
  }
}

.mv-collage__set {
  position: relative;
  flex-shrink: 0;
  width: calc(var(--rc-collage-width) * var(--rc-u));
  height: calc(438 * var(--rc-u));
}

.mv-collage__item {
  position: absolute;
  top: calc(var(--t) * var(--rc-u));
  left: calc(var(--l) * var(--rc-u));
  width: calc(var(--w) * var(--rc-u));
  aspect-ratio: var(--ar);
  background: var(--rc-color-placeholder);
}

.mv-collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mv-collage__item--01 {
  --l: 0;
  --t: 171;
  --w: 283;
  --ar: 283 / 267;
}

.mv-collage__item--02 {
  --l: 130;
  --t: 0;
  --w: 200;
  --ar: 200 / 184;
  opacity: .3; /* Figma：30%の濃さ */
}

.mv-collage__item--03 {
  --l: 374;
  --t: 51;
  --w: 499;
  --ar: 499 / 321;
}

.mv-collage__item--04 {
  --l: 914;
  --t: 152;
  --w: 258;
  --ar: 258 / 172;
  opacity: .3; /* Figma：30%の濃さ */
}

.mv-collage__item--05 {
  --l: 1008;
  --t: 11;
  --w: 283;
  --ar: 283 / 201;
}

.mv-collage__item--06 {
  --l: 1150;
  --t: 148;
  --w: 451;
  --ar: 451 / 290;
}

@keyframes collage-flow {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

/* イントロ（Figma：PC 333:4785 / SP 361:6986） */
.intro {
  padding: calc(81 * var(--rc-u)) 0 calc(106 * var(--rc-u));
}
@media (max-width: 767px) {
  .intro {
    padding: calc(29 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
  }
}

.intro__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .intro__inner {
    flex-direction: column;
    gap: calc(32 / 375 * 100vw);
  }
}

.intro__title {
  width: fit-content;
  background: var(--rc-gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: calc(34 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .intro__title {
    font-size: calc(26 / 375 * 100vw);
  }
}

.intro__body {
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--rc-u));
  width: calc(652 * var(--rc-u));
}
@media (max-width: 767px) {
  .intro__body {
    gap: calc(22 / 375 * 100vw);
    width: 100%;
  }
}

.intro__text {
  font-size: calc(20 * var(--rc-u));
  line-height: 2.25;
  letter-spacing: .05em;
}
@media (max-width: 767px) {
  .intro__text {
    font-size: calc(14 / 375 * 100vw);
  }
}

/* 社長メッセージ（Figma：PC 333:4249 / 333:4670、SP 367:7074 / 367:7079）
   PC：横幅いっぱいの写真の下端に、メッセージのボックスを 185 重ねる。ボックスは基準枠の x134 から画面の右端まで */
.president {
  padding-bottom: calc(102 * var(--rc-u));
}
@media (max-width: 767px) {
  .president {
    padding-bottom: calc(60 / 375 * 100vw);
  }
}

.president__photo {
  display: block;
}

.president__photo img {
  width: 100%;
}

.president__box {
  position: relative;
  margin-top: calc(-185 * var(--rc-u));
  margin-left: calc(50% - 720 * var(--rc-u) + 134 * var(--rc-u));
  padding: calc(80 * var(--rc-u)) calc(100 * var(--rc-u));
  background: var(--rc-gradient-primary);
  color: var(--rc-color-white);
}
@media (max-width: 767px) {
  .president__box {
    margin: 0;
    padding: calc(60 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}

.president__inner {
  display: flex;
  align-items: flex-start;
  gap: calc(80 * var(--rc-u));
  max-width: calc(1110 * var(--rc-u));
}
@media (max-width: 767px) {
  .president__inner {
    flex-direction: column;
    gap: calc(32 / 375 * 100vw);
    max-width: none;
  }
}

.president__head {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: calc(34 * var(--rc-u));
  width: calc(359 * var(--rc-u));
}
@media (max-width: 767px) {
  .president__head {
    gap: calc(12 / 375 * 100vw);
    width: calc(253 / 375 * 100vw);
  }
}

.president__label {
  font-family: var(--rc-font-en);
  font-size: calc(12 * var(--rc-u));
  line-height: calc(20.4 / 12);
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .president__label {
    font-size: calc(12 / 375 * 100vw);
  }
}

.president__title {
  font-size: calc(34 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .president__title {
    font-size: calc(24 / 375 * 100vw);
  }
}

.president__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(24 * var(--rc-u));
}
@media (max-width: 767px) {
  .president__body {
    gap: calc(24 / 375 * 100vw);
  }
}

.president__block {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--rc-u));
}
@media (max-width: 767px) {
  .president__block {
    gap: calc(4 / 375 * 100vw);
  }
}

.president__heading {
  font-size: calc(18 * var(--rc-u));
  font-weight: 700;
  line-height: 2.05;
}
@media (max-width: 767px) {
  .president__heading {
    font-size: calc(16 / 375 * 100vw);
  }
}

.president__text {
  font-size: calc(14 * var(--rc-u));
  line-height: 2.05;
  letter-spacing: .05em;
}
@media (max-width: 767px) {
  .president__text {
    font-size: calc(13 / 375 * 100vw);
  }
}

/* 会社について（Figma：PC 333:4659 / 333:4683 / 333:4686、SP 367:7157 / 367:7206）
   PC：写真とカードを横に並べる。カードは写真より 10 上から始まり、下端をそろえる */
.about {
  position: relative;
  padding-bottom: calc(131 * var(--rc-u));
}
@media (max-width: 767px) {
  .about {
    padding-bottom: calc(60 / 375 * 100vw);
  }
}

.about__dots--01 {
  --l: -15;
  --t: -100;
}

.about__dots--02 {
  --l: 356;
  --t: -7;
}

/* SP の Figma にドット柄は無い */
@media (max-width: 767px) {
  .about__dots {
    display: none;
  }
}

.about__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .about__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(24 / 375 * 100vw);
  }
}

.about__content {
  display: flex;
  align-items: flex-end;
  width: calc(1175 * var(--rc-u));
  margin-inline: auto;
}
@media (max-width: 767px) {
  .about__content {
    flex-direction: column;
    align-items: stretch;
    width: auto;
    margin-inline: calc(20 / 375 * 100vw);
  }
}

.about__photo {
  display: block;
  flex-shrink: 0;
  width: calc(772 * var(--rc-u));
}
@media (max-width: 767px) {
  .about__photo {
    width: 100%;
  }
}

.about__photo img {
  width: 100%;
}

.about__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(40 * var(--rc-u));
  width: calc(403 * var(--rc-u));
  height: calc(400 * var(--rc-u));
  padding: calc(32 * var(--rc-u)) calc(70 * var(--rc-u));
  background: var(--rc-gradient-primary);
  color: var(--rc-color-white);
}
@media (max-width: 767px) {
  .about__card {
    align-items: center;
    gap: calc(20 / 375 * 100vw);
    width: 100%;
    height: auto;
    padding: calc(44 / 375 * 100vw) calc(30 / 375 * 100vw);
  }

  .about__card .btn--sp-small {
    width: calc(200 / 375 * 100vw);
  }
}

.about__card-head {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rc-u));
}
@media (max-width: 767px) {
  .about__card-head {
    align-items: center;
    gap: calc(6 / 375 * 100vw);
  }
}

.about__card-en {
  font-family: var(--rc-font-en);
  font-size: calc(12 * var(--rc-u));
  line-height: calc(20.4 / 12);
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .about__card-en {
    font-size: calc(12 / 375 * 100vw);
  }
}

.about__card-title {
  font-size: calc(20 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .about__card-title {
    font-size: calc(18 / 375 * 100vw);
  }
}

/* 制度リンク（Figma：PC 写真 333:4254・リンク 383:692、SP 写真 372:7207・リンク 333:4691）
   横幅いっぱいの写真の下端に、リンクのカードを重ねる（PC 37 / SP 20） */
.system {
  padding-bottom: calc(102 * var(--rc-u));
}
@media (max-width: 767px) {
  .system {
    padding-bottom: calc(60 / 375 * 100vw);
  }
}

.system__photo {
  display: block;
}

.system__photo img {
  width: 100%;
}

.system__list {
  position: relative;
  display: flex;
  gap: calc(12 * var(--rc-u));
  width: calc(1182 * var(--rc-u));
  margin: calc(-37 * var(--rc-u)) auto 0;
}
@media (max-width: 767px) {
  .system__list {
    flex-direction: column;
    gap: calc(12 / 375 * 100vw);
    width: auto;
    margin: calc(-20 / 375 * 100vw) calc(20 / 375 * 100vw) 0;
  }
}

.system__item {
  flex: 1;
}

/* リンクのカード（グラデーション背景＋英字ラベル＋見出し＋右矢印） */
.link-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: calc(32 * var(--rc-u)) calc(40 * var(--rc-u));
  background: var(--rc-gradient-primary);
  color: var(--rc-color-white);
}
@media (max-width: 767px) {
  .link-card {
    padding: calc(22 / 375 * 100vw) calc(30 / 375 * 100vw);
  }
}

.link-card__body {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rc-u));
  white-space: nowrap;
}
@media (max-width: 767px) {
  .link-card__body {
    gap: calc(4 / 375 * 100vw);
  }
}

.link-card__en {
  font-family: var(--rc-font-en);
  font-size: calc(12 * var(--rc-u));
  line-height: calc(20.4 / 12);
  letter-spacing: .22em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .link-card__en {
    font-size: calc(11 / 375 * 100vw);
    line-height: calc(20.4 / 11);
  }
}

.link-card__title {
  font-size: calc(20 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .link-card__title {
    font-size: calc(16 / 375 * 100vw);
  }
}

/* 矢印（8×16。SVG は線の太さぶん外側に 1px はみ出す） */
.link-card__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(8 * var(--rc-u));
  height: calc(16 * var(--rc-u));
}
@media (max-width: 767px) {
  .link-card__icon {
    width: calc(8 / 375 * 100vw);
    height: calc(16 / 375 * 100vw);
  }
}

/* 文字と同じ色で塗る（ホバーで文字色が変わると一緒に変わる） */
.link-card__icon::before {
  position: absolute;
  top: calc(-1 * var(--rc-u));
  left: calc(-1 * var(--rc-u));
  width: calc(9.707 * var(--rc-u));
  height: calc(18 * var(--rc-u));
  background-color: currentColor;
  -webkit-mask: url('../img/icon-arrow-white.svg') no-repeat center / 100% 100%;
  mask: url('../img/icon-arrow-white.svg') no-repeat center / 100% 100%;
  content: '';
}
@media (max-width: 767px) {
  .link-card__icon::before {
    top: calc(-1 / 375 * 100vw);
    left: calc(-1 / 375 * 100vw);
    width: calc(9.707 / 375 * 100vw);
    height: calc(18 / 375 * 100vw);
  }
}

/* よくあるご質問（Figma：PC 366:7025。SP は見出し 386:276 のみで、一覧は PC をもとに仮で組んでいる）
   開閉は js/script.js（.js-accordion）。開いている項目に is-open が付く */
.faq {
  padding-bottom: calc(186 * var(--rc-u));
}
@media (max-width: 767px) {
  .faq {
    padding-bottom: calc(60 / 375 * 100vw); /* SP の Figma に一覧が無いため仮 */
  }
}

.faq__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .faq__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(24 / 375 * 100vw); /* SP の Figma に一覧が無いため仮（会社についてと同じ） */
  }
}

.faq__list {
  border-bottom: 1px solid var(--rc-color-border);
}

.faq__item {
  padding: calc(26 * var(--rc-u)) 0;
  border-top: 1px solid var(--rc-color-border);
}
@media (max-width: 767px) {
  .faq__item {
    padding: calc(20 / 375 * 100vw) 0;
  }
}

.faq__question {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--rc-u));
  width: 100%;
  color: var(--rc-color-primary);
  font-size: calc(20 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  text-align: left;
}
@media (max-width: 767px) {
  .faq__question {
    gap: calc(8 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
  }
}

.faq__q {
  flex-shrink: 0;
  font-family: var(--rc-font-en);
  font-weight: 400;
}

.faq__q-text {
  flex: 1;
}

/* ＋／−：長さ 16・太さ 2 の線を2本重ね、開いたら縦の線を消す */
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: calc(34 * var(--rc-u));
  height: calc(33 * var(--rc-u));
}
@media (max-width: 767px) {
  .faq__icon {
    width: calc(34 / 375 * 100vw);
    height: calc(33 / 375 * 100vw);
    margin-top: calc((calc(16 / 375 * 100vw) * 1.65 - calc(33 / 375 * 100vw)) / 2); /* 1行目の文字の中央にそろえる */
  }
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: calc(16 * var(--rc-u));
  left: calc(9 * var(--rc-u));
  width: calc(16 * var(--rc-u));
  height: calc(2 * var(--rc-u));
  border-radius: calc(1 * var(--rc-u));
  background: var(--rc-color-primary);
  transition: transform .3s, opacity .3s;
}
@media (max-width: 767px) {
  .faq__icon::before,
  .faq__icon::after {
    top: calc(16 / 375 * 100vw);
    left: calc(9 / 375 * 100vw);
    width: calc(16 / 375 * 100vw);
    height: calc(2 / 375 * 100vw);
    border-radius: calc(1 / 375 * 100vw);
  }
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item.is-open .faq__icon::after {
  opacity: 0;
  transform: rotate(0deg);
}

.faq__answer {
  overflow: hidden;
  transition: height .3s ease; /* js/script.js の DURATION と合わせる */
}
@media (prefers-reduced-motion: reduce) {
  .faq__answer,
  .faq__icon::before,
  .faq__icon::after {
    transition: none;
  }
}

.faq__answer-body {
  padding-top: calc(11 * var(--rc-u));
}
@media (max-width: 767px) {
  .faq__answer-body {
    padding-top: calc(11 / 375 * 100vw);
  }
}

.faq__a-text {
  font-size: calc(15 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .faq__a-text {
    font-size: calc(14 / 375 * 100vw);
  }
}

/* ==========================================================================
   下層ページ
   ========================================================================== */

/* ページタイトル（Figma：PC 285:10478 / 300:10686、SP 386:2422）。PC はヘッダー（62）の下 89、SP はヘッダー（61）の下 40 から */
.page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--rc-u));
  margin-bottom: calc(51 * var(--rc-u));
  padding-top: calc(151 * var(--rc-u));
  text-align: center;
}
@media (max-width: 767px) {
  .page-title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(40 / 375 * 100vw);
    padding-top: calc(101 / 375 * 100vw);
  }
}

.page-title__en {
  color: var(--rc-color-label);
  font-family: var(--rc-font-en);
  font-size: calc(16 * var(--rc-u));
  line-height: calc(20.4 / 16);
  letter-spacing: .165em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .page-title__en {
    font-size: calc(12 / 375 * 100vw);
    line-height: calc(20.4 / 12);
  }
}

.page-title__ja {
  color: var(--rc-color-primary);
  font-size: calc(44 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .page-title__ja {
    font-size: calc(22 / 375 * 100vw);
  }
}

/* 下層ページの写真の帯（Figma：PC 285:10503・高さ 300 / SP 386:2423・高さ 200）。SP は <picture> で SP 用の切り抜きに切り替える */
.lower-photo {
  display: block;
}

.lower-photo img {
  width: 100%;
  height: calc(300 * var(--rc-u));
  object-fit: cover;
}
@media (max-width: 767px) {
  .lower-photo img {
    height: calc(200 / 375 * 100vw);
  }
}

/* 事業内容（Figma：PC 285:10557 / 285:10538、SP 386:2427） */
.business {
  padding-top: calc(91 * var(--rc-u));
}
@media (max-width: 767px) {
  .business {
    padding-top: calc(60 / 375 * 100vw);
  }
}

.business__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .business__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
  }
}

.business__lead {
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
  text-align: center;
}
@media (max-width: 767px) {
  .business__lead {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
    text-align: justify;
  }
}

/* 事業内容：区切り線・小見出し・ボタン（Figma：PC 328:4187 / 328:4189 / 285:10572、SP 386:2418） */
.business__divider {
  margin-top: calc(111 * var(--rc-u));
}
@media (max-width: 767px) {
  .business__divider {
    margin-top: calc(60 / 375 * 100vw);
  }
}

.business__subtitle {
  width: fit-content;
  margin: calc(70 * var(--rc-u)) auto 0;
  padding-bottom: calc(4 * var(--rc-u));
  border-bottom: 1px solid var(--rc-color-primary);
  color: var(--rc-color-primary);
  font-size: calc(24 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  text-align: center;
}
@media (max-width: 767px) {
  .business__subtitle {
    margin-top: calc(60 / 375 * 100vw);
    padding-bottom: calc(4 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
  }
}

.business__btn {
  display: flex;
  justify-content: center;
  margin-top: calc(31.5 * var(--rc-u));
}
@media (max-width: 767px) {
  .business__btn {
    margin-top: calc(41 / 375 * 100vw);
  }

  .business__btn .btn--sp-small {
    width: calc(200 / 375 * 100vw);
  }
}

.business__divider-bottom {
  margin-top: calc(126 * var(--rc-u));
}
@media (max-width: 767px) {
  .business__divider-bottom {
    margin-top: calc(60 / 375 * 100vw);
  }
}

/* 六角形の図（Figma：PC 386:2383（920×929.53）/ ロゴ 386:2382、SP 386:2401（335×338.47））
   六角形は背景画像（PC / SP で別画像。白地の JPEG。元の透過 PNG は _original/img/）、中央のロゴは画像、文字は HTML。
   PC：説明のリストを図の上に Figma の座標どおりに重ねる。SP：図の中に短い見出し（.sp）、図の下に説明のリストを並べる */
.business-chart {
  position: relative;
  width: calc(920 * var(--rc-u));
  margin: calc(51 * var(--rc-u)) auto 0;
}
@media (max-width: 767px) {
  .business-chart {
    width: calc(335 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
  }
}

.business-chart__figure {
  position: relative;
  aspect-ratio: 920 / 929.53;
  background: url('../img/business-chart-bg-pc.jpg') no-repeat center / 100% 100%;
}
@media (max-width: 767px) {
  .business-chart__figure {
    aspect-ratio: 335 / 338.47;
    background-image: url('../img/business-chart-bg-sp.jpg');
  }
}

.business-chart__logo {
  position: absolute;
  top: calc(388.07 * var(--rc-u));
  left: calc(368.23 * var(--rc-u));
  width: calc(183.54 * var(--rc-u));
}
@media (max-width: 767px) {
  .business-chart__logo {
    top: calc(132 / 375 * 100vw);
    left: calc(129 / 375 * 100vw);
    width: calc(78.46 / 375 * 100vw);
  }
}

/* SP の図の中の短い見出し（PC では .sp で非表示） */
.business-chart__label {
  position: absolute;
  top: var(--t);
  left: var(--l);
  color: var(--rc-color-primary);
  font-size: calc(15 / 375 * 100vw);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .1em;
  text-align: center;
  white-space: nowrap;
}

.business-chart__label--01 {
  --l: calc(127 / 375 * 100vw);
  --t: calc(47 / 375 * 100vw);
}

.business-chart__label--02 {
  --l: calc(18 / 375 * 100vw);
  --t: calc(217 / 375 * 100vw);
}

.business-chart__label--03 {
  --l: calc(202 / 375 * 100vw);
  --t: calc(217 / 375 * 100vw);
}

.business-chart__item {
  position: absolute;
  top: calc(var(--t) * var(--rc-u));
  left: calc(var(--l) * var(--rc-u));
  width: calc(var(--w) * var(--rc-u));
  text-align: center;
}
@media (max-width: 767px) {
  .business-chart__item {
    position: static;
    width: auto;
  }

  .business-chart__item + .business-chart__item {
    margin-top: calc(30 / 375 * 100vw);
    padding-top: calc(30 / 375 * 100vw);
    border-top: 1px solid var(--rc-color-border);
  }
}

.business-chart__item--01 {
  --l: 306;
  --t: 120;
  --w: 308;
}

.business-chart__item--02 {
  --l: 84;
  --t: 562;
  --w: 292;
}

.business-chart__item--03 {
  --l: 515;
  --t: 562;
  --w: 351;
}

@media (max-width: 767px) {
  .business-chart__list {
    margin-top: calc(41 / 375 * 100vw);
  }
}

.business-chart__heading {
  margin: 0 0 calc(8 * var(--rc-u));
  color: var(--rc-color-primary);
  font-size: calc(24 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .1em;
}
@media (max-width: 767px) {
  .business-chart__heading {
    margin-bottom: calc(8 / 375 * 100vw);
    font-size: calc(18 / 375 * 100vw);
  }
}

.business-chart__text {
  font-size: calc(14 * var(--rc-u));
  line-height: 2.05;
  letter-spacing: .1em;
}
@media (max-width: 767px) {
  .business-chart__text {
    font-size: calc(14 / 375 * 100vw);
  }
}

.business-chart__item--03 .business-chart__text {
  white-space: nowrap; /* Figma は折り返さない設定（3行目が幅 351 をわずかに超えるため） */
}
@media (max-width: 767px) {
  .business-chart__item--03 .business-chart__text {
    white-space: normal;
  }
}

.business-chart__text strong {
  color: var(--rc-color-primary);
  font-weight: 700;
}

/* 企業理念（Figma：PC 300:10906。SP はデザインが無いため、ほかの SP に合わせて組んでいる） */
.philosophy {
  padding: calc(120 * var(--rc-u)) 0 calc(159 * var(--rc-u));
}
@media (max-width: 767px) {
  .philosophy {
    padding: calc(60 / 375 * 100vw) 0;
  }
}

.philosophy__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .philosophy__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(24 / 375 * 100vw);
  }
}

.philosophy__catch {
  margin-bottom: calc(11 * var(--rc-u));
  color: var(--rc-color-primary);
  font-size: calc(30 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
  text-align: center;
}
@media (max-width: 767px) {
  .philosophy__catch {
    margin-bottom: calc(11 / 375 * 100vw);
    font-size: calc(20 / 375 * 100vw);
  }
}

.philosophy__text {
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
  text-align: center;
}
@media (max-width: 767px) {
  .philosophy__text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
    text-align: justify;
  }
}

.philosophy__photo {
  display: block;
  margin-top: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .philosophy__photo {
    margin-top: calc(30 / 375 * 100vw);
  }
}

.philosophy__photo img {
  width: 100%;
  height: calc(300 * var(--rc-u));
  object-fit: cover;
}
@media (max-width: 767px) {
  .philosophy__photo img {
    height: auto;
  }
}

/* MISSION / VISION / VALUE。PC は3列で縦の区切り線（左右 40）、SP は縦に並べて横の区切り線 */
.philosophy__list {
  display: flex;
  gap: calc(40 * var(--rc-u));
  margin: calc(60 * var(--rc-u)) 0 0;
}
@media (max-width: 767px) {
  .philosophy__list {
    flex-direction: column;
    gap: 0;
    margin-top: calc(30 / 375 * 100vw);
  }
}

.philosophy__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(11 * var(--rc-u));
}
@media (max-width: 767px) {
  .philosophy__item {
    gap: calc(6 / 375 * 100vw);
  }
}

.philosophy__item + .philosophy__item {
  padding-left: calc(40 * var(--rc-u));
  border-left: 1px solid var(--rc-color-border);
}
@media (max-width: 767px) {
  .philosophy__item + .philosophy__item {
    margin-top: calc(24 / 375 * 100vw);
    padding-top: calc(24 / 375 * 100vw);
    padding-left: 0;
    border-top: 1px solid var(--rc-color-border);
    border-left: 0;
  }
}

.philosophy__label {
  color: var(--rc-color-primary);
  font-family: var(--rc-font-en);
  font-size: calc(18 * var(--rc-u));
  line-height: 1.65;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .philosophy__label {
    font-size: calc(16 / 375 * 100vw);
  }
}

.philosophy__desc {
  margin: 0;
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .philosophy__desc {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
  }
}

/* ページ内リンクで飛んだとき、見出しが固定ヘッダーに隠れないようにする（PC はセクションの上の余白がヘッダーより大きいので SP のみ） */
@media (max-width: 767px) {
  .lower-page [id] {
    scroll-margin-top: calc(61 / 375 * 100vw);
  }
}

/* 研修制度（Figma：PC 300:10697 / 300:10864 / 300:10896。SP はデザインが無いため、ほかの SP に合わせて組んでいる） */
.training {
  padding: calc(91 * var(--rc-u)) 0 calc(120 * var(--rc-u));
}
@media (max-width: 767px) {
  .training {
    padding: calc(60 / 375 * 100vw) 0;
  }
}

.training__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .training__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
  }
}

.training__list {
  display: flex;
  gap: calc(40 * var(--rc-u));
  margin-top: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .training__list {
    flex-direction: column;
    gap: calc(40 / 375 * 100vw);
    margin-top: calc(30 / 375 * 100vw);
  }
}

.training__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(24 * var(--rc-u));
}
@media (max-width: 767px) {
  .training__item {
    gap: calc(16 / 375 * 100vw);
  }
}

.training__photo {
  aspect-ratio: 366.667 / 264.264;
  background: var(--rc-color-placeholder);
}

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

.training__item-title {
  margin: 0 0 calc(11 * var(--rc-u));
  color: var(--rc-color-primary);
  font-size: calc(18 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .training__item-title {
    margin-bottom: calc(8 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
  }
}

.training__item-text {
  font-size: calc(16 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .training__item-text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
  }
}

/* 評価制度（Figma：PC 300:10907。SP はデザインが無いため、ほかの SP に合わせて組んでいる）
   上の写真の帯は .lower-photo。下の区切り線（Line 17）まで */
.evaluation {
  padding-top: calc(120 * var(--rc-u));
}
@media (max-width: 767px) {
  .evaluation {
    padding-top: calc(60 / 375 * 100vw);
  }
}

.evaluation__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .evaluation__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(20 / 375 * 100vw);
  }
}

/* 3つの評価の仕組み。PC は3列で縦の区切り線（左右 40）、SP は縦に並べて横の区切り線 */
.evaluation__list {
  display: flex;
  gap: calc(40 * var(--rc-u));
  margin-top: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .evaluation__list {
    flex-direction: column;
    gap: 0;
    margin-top: calc(30 / 375 * 100vw);
  }
}

.evaluation__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(11 * var(--rc-u));
}
@media (max-width: 767px) {
  .evaluation__item {
    gap: calc(8 / 375 * 100vw);
  }
}

.evaluation__item + .evaluation__item {
  padding-left: calc(40 * var(--rc-u));
  border-left: 1px solid var(--rc-color-border);
}
@media (max-width: 767px) {
  .evaluation__item + .evaluation__item {
    margin-top: calc(24 / 375 * 100vw);
    padding-top: calc(24 / 375 * 100vw);
    padding-left: 0;
    border-top: 1px solid var(--rc-color-border);
    border-left: 0;
  }
}

.evaluation__item-title {
  margin: 0;
  color: var(--rc-color-primary);
  font-size: calc(18 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .evaluation__item-title {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: .1em;
  }
}

.evaluation__item-text {
  font-size: calc(16 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .evaluation__item-text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
  }
}

.evaluation__divider {
  margin-top: calc(110 * var(--rc-u));
}
@media (max-width: 767px) {
  .evaluation__divider {
    margin-top: calc(60 / 375 * 100vw);
  }
}

/* キャリアパス（Figma：PC 301:10986。SP はデザインが無いため、ほかの SP に合わせて組んでいる） */
.career {
  padding: calc(120 * var(--rc-u)) 0 calc(157 * var(--rc-u));
}
@media (max-width: 767px) {
  .career {
    padding: calc(60 / 375 * 100vw) 0;
  }
}

.career__title {
  margin-bottom: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .career__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(30 / 375 * 100vw);
  }
}

/* 写真＋リード文。PC は横並び（右側 100 は空き） */
.career__intro {
  display: flex;
  gap: calc(60 * var(--rc-u));
}
@media (max-width: 767px) {
  .career__intro {
    flex-direction: column;
    gap: calc(24 / 375 * 100vw);
  }
}

.career__photo {
  flex-shrink: 0;
  width: calc(460 * var(--rc-u));
  aspect-ratio: 460 / 276;
  background: var(--rc-color-placeholder);
}
@media (max-width: 767px) {
  .career__photo {
    width: 100%;
  }
}

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

.career__intro-body {
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--rc-u));
  width: calc(560 * var(--rc-u));
}
@media (max-width: 767px) {
  .career__intro-body {
    gap: calc(8 / 375 * 100vw);
    width: auto;
  }
}

.career__intro-title {
  color: var(--rc-color-primary);
  font-size: calc(24 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .career__intro-title {
    font-size: calc(18 / 375 * 100vw);
    letter-spacing: .1em;
  }
}

.career__intro-text {
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .career__intro-text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
    text-align: justify;
  }
}

.career__boxes {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--rc-u));
  margin-top: calc(80 * var(--rc-u));
}
@media (max-width: 767px) {
  .career__boxes {
    gap: calc(24 / 375 * 100vw);
    margin-top: calc(40 / 375 * 100vw);
  }
}

/* 薄い青の背景に粒状の質感（フッターのエントリーエリアと同じ重ね方） */
.career-box {
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--rc-u));
  padding: calc(60 * var(--rc-u));
  background: var(--rc-color-bg-light) url('../img/bg_noise.jpg') repeat left top / 800px;
  background-blend-mode: multiply;
}
@media (max-width: 767px) {
  .career-box {
    gap: calc(24 / 375 * 100vw);
    padding: calc(32 / 375 * 100vw) calc(20 / 375 * 100vw);
  }
}

.career-box__head {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--rc-u));
}

.career-box__title,
.career-box__examples-title {
  margin: 0;
  color: var(--rc-color-primary);
  font-size: calc(18 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .career-box__title,
  .career-box__examples-title {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: .1em;
  }
}

.career-box__text {
  font-size: calc(16 * var(--rc-u));
  line-height: 1.85;
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  .career-box__text {
    font-size: calc(14 / 375 * 100vw);
    letter-spacing: .05em;
    text-align: justify;
  }
}

.career-box__list {
  display: flex;
  gap: calc(16 * var(--rc-u));
  margin-top: calc(12 * var(--rc-u));
}
@media (max-width: 767px) {
  .career-box__list {
    flex-direction: column;
    gap: calc(12 / 375 * 100vw);
    margin-top: calc(12 / 375 * 100vw);
  }
}

/* キャリア例のカード。アイコン＋名前・本文 */
.career-example {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: calc(16 * var(--rc-u));
  padding: calc(32 * var(--rc-u)) calc(40 * var(--rc-u));
  background: var(--rc-color-white);
}
/* SP はアイコンの横に名前、本文はカードの幅いっぱい（横並びのままだと本文の幅が狭くなるため） */
@media (max-width: 767px) {
  .career-example {
    display: grid;
    grid-template-columns: calc(40 / 375 * 100vw) 1fr;
    align-items: center;
    gap: calc(10 / 375 * 100vw) calc(12 / 375 * 100vw);
    padding: calc(20 / 375 * 100vw);
  }
}

.career-example__body {
  flex: 1;
}
@media (max-width: 767px) {
  .career-example__body {
    display: contents;
  }
}

.career-example__icon {
  flex-shrink: 0;
  width: calc(50 * var(--rc-u));
  height: auto;
}
@media (max-width: 767px) {
  .career-example__icon {
    width: calc(40 / 375 * 100vw);
  }
}

.career-example__name {
  color: var(--rc-color-primary);
  font-size: calc(15 * var(--rc-u));
  font-weight: 700;
  line-height: 2.05;
  letter-spacing: .06em;
}
@media (max-width: 767px) {
  .career-example__name {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
  }
}

.career-example__text {
  font-size: calc(14 * var(--rc-u));
  line-height: 1.85;
  letter-spacing: .04em;
}
@media (max-width: 767px) {
  .career-example__text {
    grid-column: 1 / -1;
    font-size: calc(13 / 375 * 100vw);
    text-align: justify;
  }
}

/* 福利厚生（Figma：PC 333:4872。SP はデザインが無いため、ほかの SP に合わせて組んでいる）
   上の写真の帯は .lower-photo */
.benefits {
  padding: calc(120 * var(--rc-u)) 0;
}
@media (max-width: 767px) {
  .benefits {
    padding: calc(60 / 375 * 100vw) 0;
  }
}

.benefits__title {
  margin-bottom: calc(40 * var(--rc-u));
}
@media (max-width: 767px) {
  .benefits__title {
    gap: calc(6 / 375 * 100vw);
    margin-bottom: calc(30 / 375 * 100vw);
  }
}

/* 項目ごとに上の区切り線、最後の項目の下にも線 */
.benefits__list {
  border-bottom: 1px solid var(--rc-color-border);
}

.benefits__item {
  display: flex;
  gap: calc(40 * var(--rc-u));
  padding: calc(26 * var(--rc-u)) 0;
  border-top: 1px solid var(--rc-color-border);
}
@media (max-width: 767px) {
  .benefits__item {
    flex-direction: column;
    gap: calc(8 / 375 * 100vw);
    padding: calc(24 / 375 * 100vw) 0;
  }
}

.benefits__item-title {
  flex-shrink: 0;
  width: calc(220 * var(--rc-u));
  color: var(--rc-color-primary);
  font-size: calc(20 * var(--rc-u));
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: .18em;
}
@media (max-width: 767px) {
  .benefits__item-title {
    width: auto;
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: .1em;
  }
}

.benefits__item-text {
  flex: 1;
  font-size: calc(18 * var(--rc-u));
  line-height: 2.05;
}
@media (max-width: 767px) {
  .benefits__item-text {
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.85;
    letter-spacing: .05em;
    text-align: justify;
  }
}