@charset "UTF-8";
/* ==========================================================================
   札幌予備車検場 — Figma デザインデータ準拠スタイル
   基準キャンバス: 1920px / セクション余白 160px / ヘッダー 106px
   ========================================================================== */
:root {
  /* colors — すべて Figma の fill 値 */
  --navy: #172d4a;
  --navy-dark: #0a1b33;
  --navy-darker: #15295b;
  --navy-panel: #162942;
  --navy-panel2: #1f2b3a;
  --blue: #1f4e8c;
  --yellow: #f9e040;
  --yellow-dark: #ffc629;
  --gold: #e8ac00;

  --text-body: #152238;
  --text-main: #0a1b33;
  --text-muted: #5c6c82;
  --text-dark: #1a1700;
  --text-on-navy: #eaeff6;
  --text-on-navy-muted: #b9c7dc;
  --text-on-navy-faint: #8fa3c0;
  --text-on-navy-copyright: #7c8ca3;

  --bg-page: #fbfbfb;
  --bg-soft: #eff3f6;
  --bg-soft2: #f8f8f8;
  --bg-cta: #f2f2f2;
  --bg-photo: #dadada;

  --border-soft: #abbbd1;
  --border-gray: #b6bec9;
  --border-navy-10: rgba(255, 255, 255, 0.1);

  /* 連番バッジ色 (Figma) */
  --step-01: #becce8;
  --step-02: #bcbfe4;
  --step-03: #a1a6da;
  --step-04: #565fa5;
  --step-05: #172d4a;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;

  --container: 1160px;
  --container-pad: clamp(20px, 4vw, 24px);
  --section-pad-y: clamp(64px, 10vw, 160px);
  --header-h: 106px;

  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-display: "Zen Kaku Gothic New", var(--font-jp), sans-serif;
  --font-mono: "Roboto Mono", monospace;
  --font-round: "Varela Round", var(--font-jp), sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
.br-sp { display: none; }
.br-pc { display: inline; }

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal--visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; }
}

.hero__content {
  animation: hero-content-in 0.9s ease-out 0.15s both;
}
@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__content { animation: none; }
}
.merit-rows-section { padding-top: 160px; padding-bottom: 160px; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-jp);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
/* Figma: ご利用の流れセクションはコンテンツ幅1080px（w-[1088px]相当） */
.container--narrow { max-width: calc(1080px + var(--container-pad) * 2); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ==========================================================================
   セクションラベル（小見出し＋大きな英字ウォーターマーク）
   Figma: eyebrow 14.5px/#5c6c82, watermark Zen Kaku Bold 74px/#172d4a
   ========================================================================== */
.section-label { margin-bottom: 56px; }
.section-label__eyebrow {
  font-size: 14.5px;
  line-height: 26.1px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.section-label--on-dark .section-label__eyebrow { color: #fff; }
.section-label__watermark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.68px;
  font-size: clamp(38px, 5.2vw, 74px);
  line-height: 1;
  color: var(--navy);
}
.section-label--on-dark .section-label__watermark { color: #fff; }

/* Figma: 見出し 30px Black / leading 54px / tracking 0.3px */
.section-heading {
  position: relative;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.8;
  letter-spacing: 0.3px;
  color: var(--navy);
  margin-bottom: 16px;
}
/* Figma: 一部セクションは 34px / leading 61.2px */
.section-heading--lg { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: 0.34px; }
.section-heading--on-dark { color: #fff; }
/* Figma: 見出し背面の黄色い装飾バー (bg-#f9e040) */
.section-heading mark {
  background: none;
  color: inherit;
  position: relative;
  z-index: 1;
}
.section-heading mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6px; height: 19px;
  background: var(--yellow);
  z-index: -1;
}

/* Figma: 本文 16.5px / #5c6c82 / leading 27.9px */
.section-desc {
  font-size: 16.5px;
  line-height: 27.9px;
  color: var(--text-muted);
  max-width: 558px;
}
/* Figma: 本文中の黄色いハイライトバー (bg#f9e040 / h10px) */
.section-desc mark { background: none; color: inherit; position: relative; z-index: 1; }
.section-desc mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 3px; height: 10px;
  background: var(--yellow);
  z-index: -1;
}
.section-desc--on-dark { color: var(--text-on-navy); }

/* Figma: Roboto Mono Bold 12px / #ffc629 + 22×2px の #e8ac00 ディバイダ */
.eyebrow-small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.68px;
  line-height: 21.6px;
  text-transform: uppercase;
  color: var(--yellow-dark);
  margin-bottom: 16px;
}
.eyebrow-small::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--gold);
  display: inline-block;
}
/* 明るい背景（下層ページの各セクション）: ディバイダなし・#1f4e8c */
.eyebrow-small--light { color: var(--blue); }
.eyebrow-small--light::before { display: none; }

/* ==========================================================================
   ボタン
   Figma: 濃紺 bg#172d4a / radius 10px / 15.5px Bold、黄 bg#ffc629 / #172d4a
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 26.1px;
  text-align: center;
  border-radius: 10px;
  padding: 16px 40px;
  border: 1px solid transparent;
  transition: opacity .15s ease;
  white-space: nowrap;
}
.btn:hover { opacity: .88; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-yellow { background: var(--yellow-dark); color: var(--navy); font-size: 14.5px; }
/* Figma: パディング込みで幅282px固定 */
.btn-service { width: 282px; }

/* ==========================================================================
   SERVICE 帯（Figma: bg#172d4a / py80 / 背景に薄い写真(opacity10%)）
   ========================================================================== */
.service-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding: 80px 0;
}
.service-band__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.1;
  pointer-events: none;
}
/* SERVICE + サービス・料金 のテキスト列と、その右にバッジ写真を縦中央揃えで配置 */
.service-band__title-row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
/* Figma: d865b164-... バッジ写真 90×60 */
.service-band__icon { width: 90px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Figma CTA: bg#1f4e8c / radius 7px / 14px / tracking 1.12px */
.btn-blue {
  background: var(--blue); color: #fff; border-color: var(--blue);
  border-radius: 7px;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1.12px;
  line-height: 26.6px;
  padding: 15.5px 34px 16px;
}
.btn-arrow::after { content: "\FF1E"; font-size: 10.5px; }

/* ==========================================================================
   ヘッダー（Figma: 高さ106px / 背景透過 / pl-120px・pr-0）
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
/* FV通過後のみ背景ぼかし */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 12px rgba(23, 45, 74, 0.08);
}
.site-header.is-scrolled .site-nav__list a { color: var(--navy); }
.site-header.is-scrolled .site-nav__list a[aria-current="page"] { color: var(--blue); }
.site-header.is-scrolled .site-nav__list a:hover { color: var(--blue); }
.site-header.is-scrolled .nav-toggle span { background: var(--navy); }

/* 採用ページのFVは明るい背景(#f5f8fc)のため、白文字前提のヘッダーだと
   スクロール前（is-scrolled が付く前）は文字が見えなくなる。常に濃色にする */
.site-header--on-light:not(.is-scrolled) .site-nav__list a { color: var(--navy); }
.site-header--on-light:not(.is-scrolled) .site-nav__list a[aria-current="page"] { color: var(--blue); }
.site-header--on-light:not(.is-scrolled) .nav-toggle span { background: var(--navy); }

/* 下層ページ（about/service/flow）のFV時：
   画面幅1584px以下ではTOPリンクを#15295bに、それより広い場合は白のまま
   画面幅1379px以下では「ユーザー車検とは」リンクも同様に#15295bに */
@media (max-width: 1584px) {
  .site-header--sub:not(.is-scrolled) .site-nav__list li:first-child a { color: #15295b; }
}
@media (max-width: 1379px) {
  .site-header--sub:not(.is-scrolled) .site-nav__list li:nth-child(2) a { color: #15295b; }
}

.site-header__inner {
  margin: 0;
  padding-left: clamp(24px, 6vw, 120px);
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
@media (min-width: 1025px) {
  .site-header__inner { height: 68px; }
}
/* Figma: Noto Sans JP Black 16.5px / #000 / leading 29.7px、左に22pxのオフセット */
.site-logo {
  display: flex;
  align-items: center;
}
.site-logo img { height: 72px; width: auto; object-fit: contain; }
.site-nav-actions { display: flex; align-items: stretch; gap: clamp(16px, 3vw, 40px); height: 100%; }
.site-nav { display: flex; align-items: center; }
/* Figma: gap 30px / 16px Medium / rgba(255,255,255,.88) / leading 25.2px */
.site-nav__list { display: flex; gap: 30px; }
.site-nav__list a {
  font-size: 16px;
  font-weight: 500;
  line-height: 25.2px;
  color: rgba(255, 255, 255, 0.88);
  padding: 2px 0 0.8px;
  transition: color .25s ease;
}
.site-nav__list a[aria-current="page"] { color: var(--yellow); font-weight: 700; }
.site-nav__list a:hover { color: var(--yellow); }

/* Figma: 高さ106px のフルハイトボタン、右端フラッシュ、角丸なし */
.header-cta { display: flex; align-items: stretch; height: 100%; }
.header-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 26.1px;
  height: 100%;
}
.header-cta a:first-child { background: var(--navy); color: #fff; width: 166px; padding: 12px 26px 13.09px; }
.header-cta a:last-child { background: var(--yellow); color: var(--text-main); width: 166px; padding: 12px 26px 13.09px; }
.header-cta a:first-child img { width: 30px; height: 30px; object-fit: contain; }
.header-cta a:last-child img { width: 28px; height: 28px; object-fit: contain; }

/* ハンバーガーメニュー内のCTAボタン（PC時は非表示、is-open時のみ表示） */
.site-nav__actions-mobile { display: none; }

.nav-toggle {
  display: none;
  align-self: center;
  width: 40px; height: 40px;
  margin-right: 24px;
  border: none; background: none;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; display: block; transition: .2s; }
/* ナビ項目+CTAが1126px幅などで折り返し重なるため、980pxより広い1180pxからハンバーガーに切り替える */
@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .site-logo { padding-left: 0; }
  .site-logo img { height: 35px; }
  .site-header--sub .site-header__inner { background: #fff; }
  .site-header--sub .nav-toggle span { background: var(--navy); }
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-header.is-open .site-nav {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; padding: 20px 24px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .site-header.is-open .site-nav__list { flex-direction: column; gap: 16px; }
  .site-header.is-open .site-nav__list a { color: var(--navy); }
  .site-header.is-open .site-nav__list a[aria-current="page"] { color: var(--blue); }
  .site-header.is-open .site-nav__actions-mobile {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
  }
  .site-header.is-open .site-nav__actions-mobile a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-jp);
    font-weight: 700;
    font-size: 14.5px;
    padding: 14px;
    border-radius: 8px;
  }
  .site-header.is-open .site-nav__actions-mobile a:first-child { background: var(--navy); color: #fff; }
  .site-header.is-open .site-nav__actions-mobile a:last-child { background: var(--yellow); color: var(--text-main); }
  .site-header.is-open .site-nav__actions-mobile img { width: 22px; height: 22px; object-fit: contain; }
}

/* ==========================================================================
   ヒーロー（トップ）
   Figma: 1920×1080 / 内側1460pxのボックス中央寄せ・テキスト左寄せ
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  padding-top: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy-darker);
}
@media (min-width: 641px) {
  .hero { aspect-ratio: 1744 / 951; height: auto; }
}
.hero__bg {
  position: absolute;
  top: 0;
  left: 56px;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 56pxはデスクトップ(1920px想定)向けの微調整オフセット。
   モバイルは縦長専用画像(fv_sp.png)に差し替わるため、オフセットなしの等倍covérで表示する */
@media (max-width: 640px) {
  .hero__bg { left: 0; width: 100%; top: 0; }
  .hero__title {
    position: absolute;
    writing-mode: vertical-rl;
    top: 35px;
    right: 24px;
    height: 42vh;
  }
}
/* Figma: #15295b を multiply / opacity 31% + セクション自体の rgba(0,0,0,.14) */
.hero__scrim {
  position: absolute; inset: 0;
  background: rgba(21, 41, 91, 0.31);
  mix-blend-mode: multiply;
}
.hero__scrim::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.09);
}
/* Figma: Vector 90/91/92（左上の斜めウェーブ装飾） */
.hero__vectors {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.hero__vector {
  position: absolute;
  left: -4.5%;
  top: 0%;
  height: auto;
  max-width: none;
}
.hero__vector--92 { width: 75vw;   height: 59vw; opacity: 0.4; display: none; }
.hero__vector--91 { width: 64.2vw; height: 61vw; opacity: 1; display: none; }
.hero__vector--90 { width: 38.7%; height: 102.2%; left: 0; display: none; }
.hero__vector-sp {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
}
.hero__vector-pc {
  display: block;
  position: absolute;
  left: 0;
  top: 0%;
  width: 70%;
  height: auto;
  max-width: none;
}
@media (max-width: 640px) {
  .hero__vector--90, .hero__vector--91, .hero__vector--92 { display: none; }
  .hero__vector-pc { display: none; }
  .hero__vector-sp { display: block; }
}

/* Figma: 1920px幅で左端254px（=13.23vw）に text 開始。
   固定max-widthだとブレークポイントで位置が不連続にジャンプするため、
   clamp()で常に画面幅に比例した左右パディングに置き換え、連続的に変動させる。 */
.hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  width: 100%;
  padding: 0 clamp(24px, 13.23vw, 254px);
  color: #fff;
}
@media (max-width: 640px) {
  .hero__content { height: 100vh; padding-top: 53vh; }
}
/* Figma: 58px Bold / leading 82.5px / tracking 0.5px、「確かな検査」= #f9e040 */
/* 白背景のベクター装飾に重なっても視認できるようドロップシャドウを付与 */
.hero__title {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.42;
  letter-spacing: 0.5px;
  margin-bottom: 40.3px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5);
}
.hero__title .accent { color: var(--yellow); }
/* Figma: 33px Bold / leading 30.6px */
.hero__lead {
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 33px);
  line-height: 1.35;
  margin-bottom: 25px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .5);
}
/* Figma: 18px Medium / leading 27px / text-shadow 0 0 2px rgba(0,0,0,.25) */
.hero__desc {
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 27px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45), 0 0 2px rgba(0, 0, 0, .5);
}

/* ==========================================================================
   下層ページのヒーロー
   Figma: 高さ556px / テキストは左 x=104・上 y=172 / 幅466px
   ========================================================================== */
.hero-simple {
  position: relative;
  min-height: 278px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-darker);
  color: #fff;
  text-align: left;
}
.hero-simple__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-simple__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21, 41, 91, .82) 0%, rgba(21, 41, 91, .55) 45%, rgba(21, 41, 91, .25) 100%);
}
.hero-simple__inner {
  position: relative; z-index: 2;
  flex: 0 0 33.333%;
  width: 33.333%;
  align-self: stretch;
  background: #fff;
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 40px) clamp(24px, 5.4vw, 64px) 40px;
}
.hero-simple__inner .hero-simple__label { color: #172d4a; }
.hero-simple__inner .hero-simple__title { color: #172d4a; }
.hero-simple__inner .hero-simple__desc { color: #152238; }
/* テキストエリア（白ボックス）の左隣に、通常のflow（flex）で隣接配置する装飾ベクター画像 */
.hero-simple__vector {
  position: relative; z-index: 2;
  order: 1;
  align-self: stretch;
  height: auto;
  width: 277px;
  margin-left: -2px;
  flex: 0 0 auto;
  pointer-events: none;
}
.hero-simple__iphone { display: none; }
.hero-simple__vector-img--90 { position: absolute; inset: 0; width: 108%; height: 100%; max-width: none; z-index: 3; }
.hero-simple__vector-img--91 { position: absolute; inset: 0; width: 140%; height: 100%; max-width: none; z-index: 2; opacity: 0.6; }
.hero-simple__vector-img--92 { position: absolute; inset: 0; width: 173%; height: 100%; max-width: none; opacity: 0.6; }
/* Figma: 小見出し 15.5px / 白、SERVICE ページのみ 22×2px のディバイダあり */
.hero-simple__label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 15.5px;
  line-height: 27px;
  color: #fff;
  margin-bottom: 8px;
}
.hero-simple__label--divider::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--yellow-dark);
}
/* ABOUT ページは英字が先・小見出しが後 */
.hero-simple__label--after { margin-top: 24px; margin-bottom: 0; }
/* Figma: Zen Kaku Gothic New Bold 74px / leading 74px */
.hero-simple__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.68px;
  font-size: 47px;
  line-height: 1;
  margin-bottom: 16px;
}
/* Figma: 本文 466px 幅 */
.hero-simple__desc {
  font-size: 15.5px;
  line-height: 30px;
  max-width: 466px;
  color: #fff;
}

/* ==========================================================================
   ADVANTAGE ストリップ（濃紺帯・4カード）
   Figma: bg#172d4a / py80 / gap28、カード幅244・gap32、アイコン155pxの白円SVG
   ========================================================================== */
.advantage {
  background: var(--navy);
  padding: 80px 100px;
}
/* Figma: 34px Black / #fff / leading 61.2px / tracking 0.34px */
.advantage__heading {
  text-align: center;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(24px, 2.7vw, 34px);
  line-height: 1.8;
  letter-spacing: 0.34px;
  max-width: 640px;
  margin: 0 auto 28px;
}
.advantage__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-content: center;
  gap: 32px 24px;
}
.advantage__card {
  width: 100%;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.4px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: opacity .2s ease;
}
.advantage__card:hover { opacity: .85; }
/* Figma: Varela Round 32px / #fff / padding 10px */
.advantage__num {
  font-family: var(--font-round);
  font-size: 32px;
  line-height: normal;
  color: #fff;
  padding: 10px;
}
.advantage__body { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Figma: 155×155 の白円SVG（02〜04はアイコン内包、01は円＋79pxアイコン） */
.advantage__icon {
  position: relative;
  width: 155px; height: 155px;
  flex-shrink: 0;
}
.advantage__icon > img { width: 155px; height: 155px; }
.advantage__icon .advantage__glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 79px; height: 79px;
}
.advantage__card:nth-child(1) .advantage__glyph { transform: translate(-50%, -50%) scaleY(-1); }
.advantage__text-group { display: flex; flex-direction: column; gap: 12px; width: 100%; }
/* Figma: 20.5px Bold / #fff / leading 29.7px / tracking 0.165px（04のみ18.5px） */
.advantage__title {
  font-weight: 700;
  font-size: 20.5px;
  line-height: 29.7px;
  letter-spacing: 0.165px;
}
.advantage__card:nth-child(4) .advantage__title { font-size: 18.5px; }
/* Figma: 15.5px Regular / #fff / leading 24.3px */
.advantage__text { font-size: 14.5px; line-height: 24.3px; color: #fff; }

/* ==========================================================================
   汎用セクション（Figma: py160）
   ========================================================================== */
.section { padding: var(--section-pad-y) 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); }
.section--white { background: var(--bg-page); }

.split {
  display: grid;
  grid-template-columns: minmax(280px, 558px) 1fr;
  gap: 60px;
  align-items: center;
}
.split > * { min-width: 0; }
/* Figma: 画像パネル radius 12px */
.split__media img { width: 100%; height: auto; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 3/2; }

/* about.html「WHAT IS IT」専用レイアウト（.split は index.html 等でも使う共有クラスのため、
   ここだけの見た目は .split--about に閉じ込める） */
.split--about {
  position: relative;
  display: flex;
  align-items: center;
  gap: 130px;
}
.container:has(> .split--about) { max-width: none; width: fit-content; }
.split--about .split__media { flex: 0 0 629px; width: 629px; height: 462px; }
.split--about .split__text { flex: 0 0 431px; width: 431px; }
.split--about .split__media img { width: 100%; height: 100%; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: auto; }
/* テキスト列は左の画像に対して上揃え。アクセント画像(269×189)は split 直下、テキスト列の右下に絶対配置し、白い箱で囲む */
.split__accent-box {
  align-self: flex-end;
  background: #fff;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-md);
}
.split__accent {
  display: block;
  width: 269px;
  height: 189px;
  object-fit: cover;
  border-radius: calc(var(--radius-md) - 4px);
}

/* ==========================================================================
   MERIT セクション（フルブリード・テキストの背後に画像が重なる構成）
   Figma (1924px基準): pl 423px(21.98%) / pr 90px(4.68%)
   画像パネル(Group 170): left 828px(43.03%) / width 1006px(52.29%) / height 678px
   テキストは通常フローで手前（positioned）、画像は absolute で背後
   ========================================================================== */
.merit-overlap { position: relative; overflow: hidden; }
.merit-overlap__inner {
  position: relative;
  max-width: 1924px;
  margin: 0 auto;
  padding: var(--section-pad-y) 4.68% var(--section-pad-y) 21.98%;
  display: flex;
  align-items: center;
  min-height: 35.24vw; /* 678/1924 の比率で画像高さ相当を確保 */
}
.merit-overlap__text {
  position: relative;
  z-index: 1;
  max-width: 558px;
}
.merit-overlap__media {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 4.68%;
  width: 52.29%;
  aspect-ratio: 1006 / 678;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.merit-overlap__media img { width: 100%; height: 100%; object-fit: cover; padding-left: 1px; }
/* Figma: 画像左端をセクション背景色(#eff3f6)へフェードさせ、テキストとの重なりを馴染ませる。
   黒(#000)への着色・mix-blend-modeには頼らず、背景色→透明の単純なフェードのみを使用
   （黒背景に見えてしまう問題を解消） */
.merit-overlap__media::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-top: 1px;
  background: linear-gradient(90deg, #eff3f6 0%, rgba(239, 243, 246, 0) 60%);
  pointer-events: none;
}
@media (max-width: 1024px) {
  .merit-overlap__inner {
    flex-direction: column;
    align-items: stretch;
    padding: 64px 24px;
    min-height: 0;
  }
  /* display:contents で .merit-overlap__text の子要素を .merit-overlap__inner の
     直接の flex item にし、section-label の直後に画像(merit-overlap__media)が
     来るよう order で並び替える */
  .merit-overlap__text { display: contents; max-width: none; }
  .merit-overlap .section-label { order: 1; margin-bottom: 0; }
  .merit-overlap__media {
    order: 2;
    position: static;
    transform: none;
    width: 100%;
    margin: 40px 0 32px;
  }
  .merit-overlap .section-heading { order: 3; }
  .merit-overlap .section-desc { order: 4; }
  .merit-overlap p[style*="height:80px"] { display: none; }
  .merit-overlap .btn { order: 5; margin-top: 32px; }
  /* SPではバッジ写真をタイトルの横ではなく下に配置 */
  .service-band__title-row { flex-direction: column; gap: 16px; }
  /* SPでは画像がテキストと重ならないため、背景色へのグラデーションフェードは不要 */
  .merit-overlap__media::before { display: none; }
}

/* ==========================================================================
   REASON カード（Figma: 背景・影なし / gap58 / 画像 radius12・bg#dadada）
   ========================================================================== */
.reason-list { display: flex; flex-direction: column; gap: 80px; margin-top: 44px; }
.reason-card {
  display: flex;
  align-items: center;
  gap: 58px;
  border-radius: var(--radius-xl);
}
/* Figma: POINT 01/03 = テキスト左・画像右／POINT 02/04 = 画像左・テキスト右 */
.reason-card:nth-child(odd) { flex-direction: row-reverse; }
/* overflow:hidden はここには付けない（装飾スクエア／黄色ボックスが画像の外へはみ出す必要があるため）。
   角丸・クリップは img 自身に持たせ、img に z-index を与えて重なり順を制御する。 */
.reason-card__media {
  position: relative;
  flex: 0 1 606px;
  min-width: 260px;
}
.reason-card__media img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%; max-height: 441px;
  object-fit: cover; object-position: 50% 15%;
  border-radius: var(--radius-md);
  display: block;
}
.reason-card:nth-child(even) .reason-card__media { flex-basis: 517px; }
/* Figma: 画像背後の装飾スクエア 444×383 / #f4f4f4、画像の水平方向の中間を基準に外側へ配置。
   z-index:0（img=1 より下）にして、重なる部分だけ画像の下に隠れるようにする。
   （z-index:-1 だとページ背景の裏まで回り込み見えなくなるため使わない） */
.reason-card__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  transform: translateY(-38%);
  width: 444px;
  height: 383px;
  background: #f4f4f4;
}
/* テキスト左・画像右のカード（01/03）→ 画像は右側 → スクエアは画像中央より右へ、色は#eff3f6 */
.reason-card:nth-child(odd) .reason-card__media::before { left: 50%; background: var(--bg-soft); }
/* 画像左・テキスト右のカード（02/04）→ 画像は左側 → スクエアは画像中央より左へ */
.reason-card:nth-child(even) .reason-card__media::before { right: 50%; }

/* Figma: 黄色いアクセントボックス 50×40 / #f9e040、画像下端の角に半分かかるように配置。
   img(z-index:1) より上に置き、overflow で隠れないようにする */
.reason-card__media::after {
  content: "";
  position: absolute;
  z-index: 2;
  bottom: 0;
  width: 50px;
  height: 40px;
  background: var(--yellow);
}
/* 画像が右側（01/03）→ 左下の角に配置 */
.reason-card:nth-child(odd) .reason-card__media::after { left: 0; transform: translate(-50%, 50%); }
/* 画像が左側（02/04）→ 右下の角に配置 */
.reason-card:nth-child(even) .reason-card__media::after { right: 0; transform: translate(50%, 50%); }
.reason-card__body { flex: 1 1 284px; min-width: 240px; }
/* Figma: 107×49 / radius 8px / 背景なし */
.reason-card__point {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 107px; height: 49px;
  border-radius: var(--radius-sm);
  margin-bottom: 40px;
}
/* Figma: Varela Round 120px、カードごとに色違い */
.reason-card__num {
  position: absolute;
  left: 19px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-round);
  font-size: 120px;
  line-height: 23.4px;
  z-index: 0;
}
.reason-card:nth-child(1) .reason-card__num { color: var(--step-01); }
.reason-card:nth-child(2) .reason-card__num { color: var(--step-02); }
.reason-card:nth-child(3) .reason-card__num { color: var(--step-03); }
.reason-card:nth-child(4) .reason-card__num { color: var(--step-04); }
/* Figma: Roboto Mono Bold 13px / #172d4a */
.reason-card__point span:last-child {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  line-height: 23.4px;
  color: var(--navy);
}
/* Figma: 30px Bold / #172d4a / leading 28.8px / tracking 0.16px */
.reason-card__title {
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: 0.16px;
  color: var(--navy);
  margin-bottom: 24px;
}
/* Figma: 16.5px / #5c6c82 / leading 24.3px */
.reason-card__text { color: var(--text-muted); font-size: 16.5px; line-height: 24.3px; }

/* ==========================================================================
   ステップカード（Figma: w200 / border#b6bec9 / radius12 / 円84px bg#f8f8f8）
   ========================================================================== */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 60px 22px;
  margin-top: 76px;
}
/* 1080pxコンテンツ幅で01-05が確実に1列に横並びになるよう5列固定 */
@media (min-width: 860px) {
  .step-grid { grid-template-columns: repeat(5, 1fr); }
}
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-md);
  padding: 44px 24px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Figma: 64px / radius 70px / Varela Round 20px / 白文字 */
.step-card__badge {
  position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: 64px; height: 64px; border-radius: 70px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-round); font-size: 20px;
}
.step-card:nth-child(1) { border-color: #ABBEE5; }
.step-card:nth-child(1) .step-card__icon img { transform: scaleY(-1); }
.step-card:nth-child(1) .step-card__badge { background: var(--step-01); }
.step-card:nth-child(2) .step-card__badge { background: var(--step-02); }
.step-card:nth-child(3) .step-card__badge { background: var(--step-03); }
.step-card:nth-child(4) .step-card__badge { background: var(--step-04); }
.step-card:nth-child(5) .step-card__badge { background: var(--step-05); }
.step-card:nth-child(6) .step-card__badge { background: var(--navy-dark); }
.step-card__icon {
  width: 84px; height: 84px; border-radius: 102px;
  background: var(--bg-soft2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.step-card__icon img { width: 44px; height: 44px; object-fit: contain; }
/* Figma: 20px Bold / #1a1700 */
.step-card__title { font-weight: 700; font-size: 20px; line-height: normal; color: var(--text-dark); }
/* Figma: 14px / #5c6c82 / leading 21.6px */
.step-card__text { font-size: 14px; line-height: 21.6px; color: var(--text-muted); }

/* ==========================================================================
   FAQ 上部：見出しテキスト＋右上のイラスト（人物2人で合計264px幅）
   イラストの上端は「質問」ラベル（section-label__eyebrow）の高さに揃え、
   コンテンツ幅の右端に配置する。
   ========================================================================== */
.faq-intro-wrap { position: relative; }
.faq-intro { max-width: 600px; }
.faq-illustration {
  position: absolute;
  top: 0;
  right: var(--container-pad);
  display: flex;
  width: 264px;
}
.faq-illustration img { width: 50%; height: auto; object-fit: contain; display: block; }
@media (max-width: 900px) {
  /* absoluteのままタイトルの横に、SPでは幅だけ縮小して配置 */
  .faq-illustration {
    width: 140px;
  }
}

/* ==========================================================================
   FAQ（Figma: border-b #abbbd1 / py18 px4 / ？ 28.5px #e8ac00）
   ========================================================================== */
.faq-list { margin-top: 80px; }
.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 18px 4px;
  text-align: left;
}
.faq-item__q-text { display: flex; align-items: center; gap: 10px; }
.faq-item__mark {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 28.5px;
  line-height: 27.9px;
  color: var(--gold);
}
/* Figma: 18.5px Bold / #0a1b33 / leading 27.9px */
.faq-item__q-label {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 27.9px;
  color: var(--text-main);
}
.faq-item__chevron { width: 22px; height: 22px; flex-shrink: 0; color: var(--navy); transition: transform .2s ease; }
.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }
/* Figma: 14.5px / #5c6c82 / leading 26.1px / pl30 pt13 */
.faq-item__a {
  padding: 13px 4px 4.09px 30px;
  max-width: 640px;
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 26.1px;
}
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   テーブル
   ========================================================================== */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border-top-left-radius: 0; border: 1px solid var(--border-gray); }
table.data-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
.highlight-yellow { background: #fff3a0; padding: 0 2px; color: #E92E2F; }
.data-table th, .data-table td { padding: 17px 20px; text-align: left; font-size: 15px; border-bottom: 1px solid #ecebeb; }
.data-table thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 15px; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) { background: #fafbfc; }
.data-table .num-col { text-align: center; color: var(--text-muted); width: 64px; }
.data-table .total-col { font-weight: 700; color: var(--navy); }

.price-table td.yen { text-align: left; font-family: var(--font-jp); font-size: 14px; }
.price-table td.yen::after { content: "円"; margin-left: 6px; color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   注記・コールアウト
   ========================================================================== */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  flex-wrap: wrap;
}
.callout__icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--blue);
}
.callout__title { font-weight: 700; font-size: 18px; color: var(--text-main); margin-bottom: 6px; }
.callout__text { color: var(--text-muted); font-size: 14.5px; }
.callout__action { margin-left: auto; }

.note-list { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.note-list li { display: flex; gap: 12px; padding: 16px 19px; font-size: 15.5px; line-height: 25px; color: var(--text-body); align-items: flex-start; }
.note-list li::before {
  content: "!"; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px;
}

/* ==========================================================================
   アクセス（Figma: 背景・影なし / 画像パネル340px bg#162942 / 幅540px）
   ========================================================================== */
/* 1fr でカード（画像）自体をコンテナ幅いっぱいまで拡大し、
   実際の隙間が gap:24px ちょうどになるようにする（space-between だと余白が隙間に回り広がりすぎる） */
.access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 44px;
}
@media (max-width: 900px) {
  .access-grid { grid-template-columns: 1fr; }
}
.access-card { display: flex; flex-direction: column; gap: 10px; }
.access-card__media { height: 340px; background: var(--navy-panel); overflow: hidden; }
.access-card:nth-child(2) .access-card__media { background: var(--navy-panel2); }
.access-card__media img { width: 100%; height: 100%; object-fit: cover; }
.access-card__body { padding: 24px 0; display: flex; flex-direction: column; gap: 18px; }
/* Figma: bg#172d4a / px18 py12 / Roboto Mono Bold 16px / tracking .36px / 角丸なし */
.access-card__tag {
  align-self: flex-start;
  background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 16px; line-height: 21.6px; letter-spacing: 0.36px;
  padding: 12px 18px;
}
/* Figma: 24px Bold / #172d4a / leading 30.6px */
.access-card__title { font-weight: 700; font-size: 24px; line-height: 30.6px; letter-spacing: 0.17px; color: var(--navy); }
/* Figma: 15.5px / #0a1b33 / leading 24.3px */
.access-card__meta { display: flex; flex-direction: column; font-size: 15.5px; line-height: 24.3px; color: var(--text-main); }
.access-card__meta b { font-weight: 700; margin-right: 6px; }
/* Figma: 14px / #1f4e8c / leading 19.8px */
.access-card__note { font-size: 14px; line-height: 19.8px; color: var(--blue); }

/* ==========================================================================
   ご利用フロー（6ステップ・タイムライン）
   ========================================================================== */
.flow-steps { position: relative; margin-top: 40px; }
/* step-card(ご利用フロー トップページ版)に合わせて、PC/SPともカードを横長(左アイコン・右テキスト)に統一 */
.flow-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 981px) {
  .flow-steps__grid { max-width: 760px; }
}
.flow-step {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  text-align: left;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 16px;
}
.flow-step__num {
  grid-column: 2; grid-row: 1;
  width: 26px; height: 26px; border-radius: 50%;
  padding: 18px;
  background: var(--step-01);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-round); color: #fff; font-size: 14px;
  margin-bottom: 0;
}
.flow-step:nth-child(2) .flow-step__num { background: var(--step-02); }
.flow-step:nth-child(3) .flow-step__num { background: var(--step-03); }
.flow-step:nth-child(4) .flow-step__num { background: var(--step-04); }
.flow-step:nth-child(5) .flow-step__num { background: var(--step-05); }
.flow-step:nth-child(6) .flow-step__num { background: var(--navy-dark); }
.flow-step__icon { grid-column: 1; grid-row: 1 / 4; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.flow-step__icon img { width: 26px; height: 26px; }
.flow-step:nth-child(1) .flow-step__icon img,
.flow-step:nth-child(6) .flow-step__icon img { transform: scaleY(-1); }
.flow-step__title { grid-column: 2; grid-row: 2; font-weight: 700; font-size: 15px; line-height: 27px; color: var(--text-main); margin-bottom: 0; }
.flow-step__text { grid-column: 2; grid-row: 3; font-size: 12.5px; line-height: 20px; color: var(--text-muted); }
.flow-step:not(:last-child)::after {
  content: "▼";
  position: absolute;
  left: 50%;
  bottom: -56px;
  transform: translateX(-50%);
  font-size: 34px;
  line-height: 1;
  color: var(--step-01);
  z-index: 2;
}
.flow-step:nth-child(2)::after { color: var(--step-02); }
.flow-step:nth-child(3)::after { color: var(--step-03); }
.flow-step:nth-child(4)::after { color: var(--step-04); }
.flow-step:nth-child(5)::after { color: var(--step-05); }

.reserve-box { background: var(--bg-soft); border-radius: var(--radius-md); padding: 32px 36px; margin-top: 160px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.reserve-box__title { font-weight: 700; font-size: 17px; line-height: 29.8px; color: var(--text-main); margin-bottom: 4px; }
.reserve-box__text { font-size: 14px; line-height: 24px; color: var(--text-muted); }
.reserve-box__links { display: flex; gap: 12px; flex-wrap: wrap; }
.reserve-box__links a { padding: 12px 23px; background: #fff; border: 1px solid var(--border-gray); border-radius: var(--radius-sm); font-size: 14.5px; font-weight: 700; line-height: 26px; color: var(--navy); }

.notice-box { border: 1px solid var(--border-gray); border-radius: var(--radius-md); padding: 33px 27px; margin-top: 24px; }
.notice-box strong { display: block; font-size: 16px; line-height: 27px; margin-bottom: 8px; color: var(--text-main); }
.notice-box p { font-size: 14.5px; line-height: 26px; color: var(--text-muted); }

/* ==========================================================================
   こんな方におすすめ
   ========================================================================== */
.recommend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 520px)); gap: 14px 40px; margin-top: 40px; }
.recommend-item { display: flex; align-items: center; gap: 14px; padding: 18px 21px; font-size: 17px; line-height: 27px; color: var(--text-main); }
.recommend-item__icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--blue); }

.compare-caption { font-weight: 700; font-size: 18px; line-height: 23px; color: var(--navy); margin: 80px 0 16px; }

/* ==========================================================================
   仕事内容カード
   ========================================================================== */
.job-grid { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 48px; column-gap: 24px; margin-top: 80px; }
.job-grid .job-card { flex: 0 1 calc(33.333% - 16px); min-width: 280px; }
/* 4枚のカードは横2×縦2 */
.job-grid--2col .job-card { flex: 0 1 calc(50% - 12px); }
.job-card { border-radius: var(--radius-md); overflow: hidden; }
.job-card__media { height: 220px; background: var(--bg-photo); }
.job-card__media img { width: 100%; height: 100%; object-fit: cover; }
.job-card__body { padding: 24px 24px 24px 0; }
.job-card__title { font-weight: 700; font-size: 20px; line-height: 29px; color: var(--navy); margin-bottom: 12px; }
.job-card__text { font-size: 14.5px; line-height: 24.5px; color: var(--text-muted); }

/* ==========================================================================
   募集要項タブ
   ========================================================================== */
.tabs { display: flex; gap: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.tabs button {
  border: 1px solid var(--border-gray); border-bottom: none;
  background: var(--bg-soft2); color: var(--text-muted);
  padding: 13px 22px; font-size: 14px; font-weight: 700;
  border-radius: 8px 8px 0 0;
}
.tabs button[aria-selected="true"] { background: #fff; color: var(--navy); }
.status-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--bg-soft2); border-radius: 6px; padding: 5px 16px; font-size: 14px; font-weight: 500; line-height: 22px; color: var(--navy); }
.status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3aa76d; }

/* ==========================================================================
   応募の流れ
   ========================================================================== */
.apply-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 211px)); justify-content: center; gap: 14px; margin-top: 44px; position: relative; }
.apply-flow::before { content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 2px; background: var(--border-gray); }
.apply-step { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.apply-step__num {
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border-gray);
  box-shadow: 0 6px 14px -6px rgba(23, 45, 74, .25);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 26px; color: var(--navy);
  margin-bottom: 14px; position: relative; z-index: 1;
}
.apply-step__title { font-size: 14.5px; line-height: 24px; font-weight: 700; color: var(--text-main); }

/* ==========================================================================
   スタッフの声
   ========================================================================== */
.testimonial-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 483px)); justify-content: center; gap: 8px; margin-top: 48px; background: #0270B6; }
/* testimonial-grid の背後に画面端まで広がるブルーのボックス（下に50pxずらして配置） */
.testimonial-grid__bg {
  position: absolute;
  bottom: 0;
  height: 50%;
  left: 50%;
  width: 100vw;
  transform: translate(-50%, 50px);
  background: #0270b6;
  z-index: 0;
}
.testimonial-card { position: relative; overflow: hidden; aspect-ratio: 483/656; }
.testimonial-card img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card__overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 40px 43px;
  background: linear-gradient(0deg, rgba(10, 20, 40, .92), rgba(10, 20, 40, .1));
  color: #fff;
}
.testimonial-card__quote { font-size: 14px; line-height: 24px; }
.testimonial-card__name { margin-bottom: 12px; font-size: 13px; font-weight: 700; color: #fff; }

/* ==========================================================================
   採用ページの交互レイアウト（Figma: 947px画像 + テキスト / 高さ404px）
   ========================================================================== */
.merit-row { position: relative; display: grid; grid-template-columns: 947fr 973fr; align-items: center; gap: 30px; min-height: 404px; }
.merit-row__media { position: relative; z-index: 1; align-self: end; height: 440px; overflow: visible; display: flex; justify-content: center; }
.merit-row__media img { width: auto; height: 100%; max-width: none; display: block; }
.merit-row__body { position: relative; z-index: 1; width: 466px; padding: 10px clamp(24px, 5vw, 60px); }
/* テキストがブルーのボックス側へ寄るよう、ボックスに近い側のパディングを詰める
   偶数行＝ボックス左（body右列）→ 左パディングを詰める／奇数行＝ボックス右（body左列）→ 右パディングを詰める */
.merit-row:nth-child(even) .merit-row__body { padding-left: 24px; justify-self: start; }
.merit-row:nth-child(odd) .merit-row__body { padding-right: 24px; justify-self: end; margin-left: -32px; }
.merit-row:nth-child(odd) .merit-row__eyebrow-en { text-align: right; margin-right: -24px; }
/* 最初の青いボックスの行のみ：body を内容幅にし、縦並びflexで子要素をすべて右寄せ */
.merit-row:nth-child(1) .merit-row__body {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.merit-row__eyebrow-en {
  font-family: var(--font-display);
  font-weight: 700;
  /* 画面幅1068pxで120pxがちょうど良い比率 → 120/1068=11.236vw で可変化し、120pxを上限に */
  font-size: min(11.236vw, 120px);
  letter-spacing: 1.68px;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #78a1d7;
  text-stroke: 1px #78a1d7;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: visible;
}
.merit-row__title { font-weight: 900; font-size: 38px; line-height: 41px; color: var(--navy); margin-bottom: 30px; }
.merit-row__text { font-size: 16px; line-height: 24px; color: var(--text-muted); max-width: 431px; }
.merit-row:nth-child(odd) .merit-row__media { order: 2; }
/* images/recruit-merit-4.png のコンテナのみ高さ調整 */
.merit-row:nth-child(4) .merit-row__media { height: 466px; justify-self: center; }
.merit-row:nth-child(4) .merit-row__body { width: 460px; }
/* merit-row__body の横に48vw幅の色ボックス（テキストと反対側＝画像側の端まで伸ばす）
   画像（merit-row__media, 高さ603px）の下端＝ボックス（高さ404px）の下端が揃うよう、両方を row の下端基準で配置 */
.merit-row::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 200px;
  width: 48vw;
  background: #f5f8fc;
  z-index: 0;
  left: 0;
}
.merit-row:nth-child(odd)::before { left: auto; right: 0; background: #0270b6; }
/* Vector 93：ブルーのボックス内、テキストに近い内側の端に配置し、上下いっぱいに埋める
   偶数行＝ボックス左（右端に配置）／奇数行＝ボックス右（左端に配置） */
.merit-row__vector {
  position: absolute;
  bottom: 0;
  height: 405px;
  width: auto;
  z-index: 0;
  pointer-events: none;
}
.merit-row:nth-child(even) .merit-row__vector { right: calc(100% - 48vw); margin-right: -1px; }
.merit-row:nth-child(odd) .merit-row__vector { left: calc(100% - 48vw); margin-left: -1px; transform: rotate(180deg); }

/* Figma: 採用ページのFVは他ページと異なる構成。
   1) 高さ100vh・背景#f5f8fcのテキストエリア（ヘッダー分だけ内側にパディング）
   2) その直下にキャラクター画像を左右中央・上余白68pxで配置 */
/* FV：100vh の空白エリア（背景色のみ、テキスト・画像は含まない） */
/* HERO 全体のラッパー。中に「100vh空白 → テキスト → 画像」を子要素として内包する */
/* FV：高さ100vhの空白エリア（背景色のみ） */
.recruit-hero {
  position: relative;
  height: 100vh;
  background: #f5f8fc;
  overflow: hidden;
}
/* Figma: 塗りなし・縁取り文字を3段複製。画面端から端まで、
   キャラクター画像の背後に絶対配置。--1（中央/元の位置）はそのまま、
   --2・--3 をその真上に209px間隔で積み重ね、色違いにする */
/* 右から左へ無限ループするマーキー。トラック内でフレーズを12回複製し、
   -50%（=前半6回ぶん）だけ動かして0%に戻すことで継ぎ目なくループさせる */
/* 画面幅1068pxで140pxがちょうど良い比率 → 140/1068 = 13.1086vw で可変化。
   font-size をラッパー(.recruit-hero__bgtext)側に持たせ、縦位置オフセットを em 指定にすることで
   フォントサイズが変わっても常に同じ比率を保つ */
.recruit-hero__bgtext {
  position: absolute;
  left: 0; right: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  font-size: 13.1086vw;
}
.recruit-hero__bgtext-track {
  display: inline-flex;
  width: max-content;
  white-space: nowrap;
  animation: recruit-marquee 180s linear infinite;
  will-change: transform;
}
.recruit-hero__bgtext-track span {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1em;
  line-height: 1;
  color: transparent;
  padding: 0 0.286em;
}
.recruit-hero__bgtext--1 { top: 60%; transform: translateY(-50%); }
.recruit-hero__bgtext--1 .recruit-hero__bgtext-track span { -webkit-text-stroke: 0.006em #0270b6; text-stroke: 0.006em #0270b6; }
.recruit-hero__bgtext--2 { top: calc(60% - 1.05em); transform: translateY(-50%); }
.recruit-hero__bgtext--2 .recruit-hero__bgtext-track span { -webkit-text-stroke: 0.006em #46a0da; text-stroke: 0.006em #46a0da; }
.recruit-hero__bgtext--3 { top: calc(60% - 2.1em); transform: translateY(-50%); }
.recruit-hero__bgtext--3 .recruit-hero__bgtext-track span { -webkit-text-stroke: 0.006em #ffc629; text-stroke: 0.006em #ffc629; }

@keyframes recruit-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.recruit-hero-image { position: relative; z-index: 1; }
/* 画面幅1068pxで240pxがちょうど良い比率 → 240/1068 = 22.4719vw で可変化。
   線の太さ(2px)も同じ比率(2/240=0.00833em)でフォントサイズに連動させる */
.recruit-hero__foottext {
  position: absolute;
  left: 0; right: 0; bottom: min(11.7978vw, 126px);
  z-index: 2;
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: min(22.4719vw, 240px);
  line-height: 1;
  color: #211715;
  -webkit-text-stroke: 0.03em #fff;
  text-stroke: 0.03em #fff;
  paint-order: stroke fill;
  pointer-events: none;
}
/* FV直下：テキストエリア */
.recruit-hero-text {
  background: #f5f8fc;
  padding: 24px 24px 0;
  text-align: center;
}
.recruit-hero__inner { max-width: 700px; margin: 0 auto; padding-top: 160px; padding-bottom: 160px; }
.recruit-hero__title { font-family: var(--font-jp); font-weight: 900; font-size: clamp(26px, 4vw, 40px); line-height: 1.4; color: #0270b6; margin-bottom: 30px; }
.recruit-hero__desc { max-width: 600px; margin: 0 auto; font-size: 16px; line-height: 30px; color: var(--text-muted); }

/* Figma: FV直下のキャラクター画像。上に約68pxの余白、左右中央
   コンテナ自体を100vhにし、画像は比率を保ったまま高さいっぱいまで拡大 */
.recruit-hero-image {
  height: 100vh;
  padding-top: 68px;
  display: flex;
  justify-content: center;
}
.recruit-hero-image img {
  width: auto;
  height: 100%;
  max-width: none;
  display: block;
}

/* ==========================================================================
   CTA（Figma: bg#f2f2f2 / py160 / CONTACT = Zen Kaku 80px / #172d4a）
   ========================================================================== */
.cta {
  background: var(--bg-cta);
  padding: var(--section-pad-y) 24px;
  text-align: center;
}
.cta__eyebrow {
  font-size: 12px;
  line-height: 12px;
  letter-spacing: 3.64px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}
.cta__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(44px, 5.6vw, 80px);
  line-height: 0.92;
  color: var(--navy);
  margin-bottom: 40px;
}
/* Figma: 30px Medium / #000 / tracking 1.2px / leading 45px */
.cta__heading { font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: 1.2px; line-height: 1.5; color: #000; margin-bottom: 40px; }
.cta__desc { font-size: 16px; line-height: 28px; color: var(--text-muted); max-width: 620px; margin: -16px auto 24px; }

/* ==========================================================================
   採用バナー（Figma: bg#172d4a / gap120 / ボタンなし）
   ========================================================================== */
/* Figma: セクションは items-end（右寄せ）。テキストは幅441px固定（折り返し防止のため縮めない）、
   画像エリアは右側の残り幅いっぱい〜ビューポート右端まで伸ばす */
.recruit-teaser {
  display: block;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: opacity .2s ease;
}
.recruit-teaser:hover { opacity: .92; }
/* パディングはテキスト側だけに持たせ、画像(.recruit-teaser__media)には一切かからないようにする。
   align-items:stretch で画像をセクションの高さいっぱいまで広げる */
.recruit-teaser__inner {
  display: flex;
  align-items: stretch;
  gap: 60px;
}
/* 画像コンテナは画面幅の50%固定。テキスト側は残り幅いっぱいを使い、不要な折り返しを防ぐ */
.recruit-teaser__text-col { flex: 1 1 auto; min-width: 0; padding: 76px 0 76px clamp(24px, 8vw, 180px); align-self: center; }
.recruit-teaser__tag { font-size: 14.5px; line-height: 26.1px; color: #fff; margin-bottom: 8px; }
.recruit-teaser__watermark {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, 5vw, 74px);
  line-height: 1; letter-spacing: 1.68px;
  text-transform: uppercase; margin-bottom: 56px;
  white-space: nowrap;
}
.recruit-teaser__title { font-weight: 900; font-size: clamp(21px, 2.7vw, 34px); line-height: 1.8; letter-spacing: 0.34px; margin-bottom: 16px; }
.recruit-teaser__text { font-size: 14.5px; line-height: 26.1px; color: var(--text-on-navy-muted); }
.recruit-teaser__media { flex: 0 0 50vw; width: 50vw; display: flex; overflow: hidden; min-width: 0; }
.recruit-teaser__media img { height: 100%; width: 100%; object-fit: cover; flex: 1; }

/* ==========================================================================
   フッター（Figma: bg#172d4a / pt60 pb26）
   ========================================================================== */
.site-footer { background: var(--navy); color: #fff; padding: 60px 24px 26px; }
.site-footer__top {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--border-navy-10);
  max-width: var(--container); margin: 0 auto;
}
.site-footer__brand-row { display: flex; align-items: center; gap: 10px; height: 100px; }
.site-footer__logo { height: 166px; width: auto; object-fit: contain; }
.site-footer__desc { color: var(--text-on-navy-faint); font-size: 13px; line-height: 23.4px; max-width: 320px; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 26px; }
.site-footer__nav a { color: var(--text-on-navy-muted); font-size: 13.5px; line-height: 24.3px; }
.site-footer__nav a:hover { color: #fff; }
.site-footer__bottom {
  max-width: var(--container); margin: 0 auto; padding-top: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 12px; line-height: 21.6px; color: var(--text-on-navy-copyright);
}
.site-footer__bottom a { color: var(--text-on-navy-copyright); }
.site-footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1200px) {
  .advantage { padding: 80px 40px; }
  /* グリッドではなくflexにして、1-3が1段目、4-5が2段目で中央寄せになるようにする */
  .advantage__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 32px; }
  .advantage__card { flex: 0 0 180px; width: 180px; }
  .advantage__text-group { width: 180px; }
  .advantage__icon { width: 120px; height: 120px; }
  .advantage__icon > img { width: 120px; height: 120px; }
  .advantage__icon .advantage__glyph { width: 62px; height: 62px; }
}
@media (max-width: 980px) {
  img[src*="white_sc"] { display: none; }
  .hero-simple__vector { height: 100px; }
  .hero-simple__inner { padding-bottom: 40px; }
  .job-card__media { height: auto; }
  .job-card__media img { height: auto; }
  .job-grid .job-card { flex: 0 1 100%; width: 100%; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split--about { flex-direction: column; gap: 40px; }
  .split--about .split__media { width: 100%; height: auto; aspect-ratio: 629 / 462; flex-basis: auto; order: 2; }
  /* split__media を section-heading の直下・section-desc の上に挟むため、
     split__text を display:contents にして中の要素を split--about 直下の flex item として order で並び替える */
  .split--about .split__text { display: contents; }
  .split--about .split__text .split__heading-group { order: 1; width: 100%; }
  .split--about .split__text .section-desc { order: 3; width: 100%; }
  .split--about .split__accent-box { display: none; }
  /* align-items:center はデスクトップの横並び用。column化した際にクロス軸(横方向)の
     センタリングとして効いてしまい、reason-card__body がコンテンツ幅で中央寄せされ、
     カードごとにテキスト量が違うため左端がバラバラになる。stretch で全幅に揃える */
  .reason-card, .reason-card:nth-child(odd), .reason-card:nth-child(even) { flex-direction: column; align-items: stretch; gap: 0; }
  .reason-card__media, .reason-card:nth-child(even) .reason-card__media { flex-basis: auto; width: 100%; }
  .reason-card__media::before, .reason-card__media::after { display: none; }
  /* 縦長写真（01など）はwidth:100%基準だと height:auto で441px近くまで伸びて大きすぎるため上限を下げる */
  .reason-card__media img { max-height: 260px; }
  /* flex:1 1 284px は横並び用の基準値。flex-direction:column では main-axis が縦になり
     284pxが「最小の高さ」として効いて余白が大きく空いてしまうため、モバイルでは解除する */
  .reason-card__body { flex: 0 1 auto; min-width: 0; }
  /* reason-card__point（POINTバッジ）を画像より上に表示するため、body を display:contents にして
     point/title/text を .reason-card の直接の flex item にし、order で並び替える */
  .reason-card__body { display: contents; }
  .reason-card__point { z-index: 10; order: 1; margin-bottom: -7px; }
  .reason-card__media { order: 2; margin-bottom: 24px; }
  .reason-card__title { order: 3; }
  .reason-card__text { order: 4; }
  .merit-row { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 20px; }
  .merit-row__media { order: 0 !important; height: 260px; align-self: auto; overflow: visible; }
  .merit-row__media img { width: auto; height: 100%; max-width: none; object-fit: unset; object-position: unset; }
  .merit-row:nth-child(4) .merit-row__media { height: 260px; }
  .merit-row__body,
  .merit-row:nth-child(1) .merit-row__body {
    display: block;
    padding: 0px 24px 80px;
    margin-left: 0;
    justify-self: stretch;
  }
  .merit-row:nth-child(odd) .merit-row__body,
  .merit-row:nth-child(even) .merit-row__body {
    margin-left: 0;
    width: auto;
    min-width: 0;
    justify-self: stretch;
  }
  .merit-row__eyebrow-en,
  .merit-row:nth-child(odd) .merit-row__eyebrow-en {
    overflow: hidden;
    text-overflow: clip;
    max-width: 100%;
    text-align: left;
    margin-right: 0;
  }
  .merit-row__title { margin-bottom: 0; font-weight: 900; font-size: 34px; }
  .merit-row__text { font-size: 14px; margin-top: 8px; }
  .merit-row:nth-child(odd) .merit-row__eyebrow-en { margin-right: 0; }
  /* SPでは merit-row が縦積みになり media が先頭(order:0)に来るため、
     vector・ボックス(::before)の基準も row の下端ではなく media の下端(=高さ260px)に合わせる */
  .merit-row__vector { top: 0; bottom: auto; height: 260px; z-index: 1; }
  .merit-row::before { top: 0; bottom: auto; height: 260px; width: 60%; }
  .merit-row:nth-child(odd)::before { left: auto; right: 0; }
  .merit-row:nth-child(even)::before { left: 0; right: auto; }
  .merit-row:nth-child(odd) .merit-row__media { justify-self: end; }
  .merit-row:nth-child(odd) .merit-row__vector { left: 40%; right: auto; margin-left: -1px; margin-top: -2px; }
  .merit-row:nth-child(even) .merit-row__vector { right: 40%; left: auto; margin-right: -1px; }
  .recruit-teaser__inner { flex-direction: column; align-items: stretch; gap: 0; }
  .recruit-teaser__text-col { flex-basis: auto; padding: 40px 24px; }
  /* デスクトップ用の flex:0 0 50vw / width:50vw が残っていると画像コンテナが画面幅の半分になり
     左寄せで表示されてしまうため、SPでは全幅にリセットする。
     画像(1774×887=2:1)に対し高さを固定すると縦横比が合わず左右が大きく切れるため、
     画像自体のアスペクト比に合わせて高さを自動算出する */
  .recruit-teaser__media { flex: 0 0 auto; width: 100%; height: auto; aspect-ratio: 1774 / 887; }
  .hero-simple { flex-direction: column; align-items: stretch; }
  .hero-simple__bg { display: none; }
  .hero-simple__scrim { display: none; }
  .hero-simple__inner { flex: 0 0 auto; width: 100%; padding-top: var(--header-h); background: none; }
  .hero-simple__inner .hero-simple__label,
  .hero-simple__inner .hero-simple__title,
  .hero-simple__inner .hero-simple__desc { color: #fff; }
  .hero-simple__label { margin-top: 24px; }
  .hero-simple__title { margin-bottom: 0; }
  .hero-simple__desc { margin-top: 8px !important; font-size: 12.5px; }
  .hero-simple__label.hero-simple__label--after { font-weight: 700; }
  .hero-simple__vector { display: none; }
  .hero-simple__iphone {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 140px;
    height: auto;
    margin-bottom: -2px;
    pointer-events: none;
  }
  .apply-flow::before { display: none; }
  /* ご利用フロー：SPではカード横長レイアウトを1列で縦積みに */
  .flow-steps__grid { grid-template-columns: 1fr; gap: 16px; }
  .apply-flow { grid-template-columns: repeat(3, 1fr); justify-items: center; gap: 24px; }
}
@media (max-width: 640px) {
  .br-sp { display: block; }
  .br-pc { display: none; }
  /* SPでは line-height:1.8 のまま単行見出しになると余白が過大になるため詰める。
     section-label の margin-bottom:56px も同様にSPではやりすぎなので縮小 */
  .section-label { margin-bottom: 24px; }
  .section-heading { font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
  /* 黄色マーカーが文字と同じ高さまで来て頭でっかちに見えるため、SPでは薄く・低い位置に調整 */
  .section-heading mark::after { height: 8px; bottom: 4px; }
  .section-desc mark::after { height: 6px; bottom: 2px; }
  .section-desc { font-size: 15.5px; }
  .advantage__heading { line-height: 1.3; margin-bottom: 20px; }
  .advantage { padding: 56px 24px; }
  /* 01/02、03/04がそれぞれ横並びの2列、05は単独で中央寄せになるようflexに */
  .advantage__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 16px; }
  .advantage__card { flex: 1 1 140px; width: 100%; max-width: 160px; }
  .advantage__icon { width: 100px; height: 100px; }
  .advantage__icon > img { width: 100px; height: 100px; }
  .advantage__icon .advantage__glyph { width: 52px; height: 52px; }
  .advantage__text-group { width: 100%; gap: 8px; }
  .advantage__title { font-size: 15.5px; line-height: 1.4; }
  .advantage__card:nth-child(4) .advantage__title { font-size: 14.5px; }
  .advantage__text { font-size: 12.5px; line-height: 1.5; }
  .advantage__num { font-size: 24px; padding: 4px; }
  /* ご利用の流れ：SPではカードを縦並び・横長にし、左に画像、右にタイトル＋本文を配置 */
  .step-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .step-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 4px;
    align-items: center;
    text-align: left;
    padding: 16px;
  }
  .step-card__badge {
    position: absolute;
    top: 6px; left: 6px; transform: none;
    width: 26px; height: 26px;
    font-size: 13px;
  }
  .step-card__icon { grid-column: 1; grid-row: 1 / 3; width: 64px; height: 64px; }
  .step-card__icon img { width: 32px; height: 32px; }
  .step-card__title { grid-column: 2; grid-row: 1; font-size: 16px; }
  .step-card__text { grid-column: 2; grid-row: 2; font-size: 13px; }
  .cta__title { font-size: 44px; }
  .testimonial-grid { grid-template-columns: 1fr; max-width: 280px; margin-left: auto; margin-right: auto; gap: 24px; }
  /* SPでは testimonial-grid を上下は少し囲み、左右は画面端まで伸ばす */
  .testimonial-grid__bg { top: -40px; bottom: -40px; left: 50%; right: auto; width: 100vw; height: auto; transform: translateX(-50%); }
  .testimonial-card__overlay { padding: 20px; }
  .section.section--white { padding-top: 100px; }
  .merit-rows-section { padding-top: 80px; padding-bottom: 80px; }
  .site-footer__logo { height: 141px; }
  /* 必要書類テーブル：min-width:640pxが横スクロールの原因のため解除し、画面幅に収まるようパディング・文字サイズを縮小 */
  table.data-table { min-width: 0; width: 100%; table-layout: fixed; }
  .data-table th, .data-table td { padding: 10px 8px; font-size: 12.5px; word-break: break-word; }
  .data-table thead th { font-size: 12.5px; }
  .data-table .num-col { padding-left: 4px; padding-right: 4px; }
  /* table-layout:fixed では列幅は1行目(th)で決まり、tbodyのtd(.num-col)側に幅指定しても効かないため、
     1列目のthに直接指定する */
  .data-table thead th:first-child { width: 50px !important; }
  /* デスクトップ用のth幅指定(inline style)が固定値のまま残ると、狭い画面で説明列がほぼ0幅になり
     1文字ずつ縦に折り返されてしまうため、SPでは無効化して残りの列に自動配分させる */
  .data-table th[style*="width"] { width: auto !important; }
  .callout__action { margin-left: auto; margin-right: auto; }
  /* 料金表(price-table)は入力欄付き6列で横スクロールが必要だったが、1画面に収めるため
     行(tr)を1枚のカードに、セル(td)は「ラベル：値」の横並びに組み替える */
  .price-table { overflow-x: visible; background: none; border: none; border-radius: 0; }
  .price-table table.data-table { background: none; }
  .price-table table.data-table,
  .price-table thead,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td { display: block; width: 100%; min-width: 0; }
  .price-table thead { display: none; }
  .price-table tbody tr {
    border: 1px solid var(--border-gray);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
  }
  .price-table tbody tr:last-child { margin-bottom: 0; }
  .price-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid #ecebeb;
  }
  .price-table td:first-child { background: var(--navy); color: #fff; font-weight: 700; }
  .price-table td:last-child { border-bottom: none; }
  .price-table td[data-label]::before { content: attr(data-label); width: 100px; flex: 0 0 100px; font-size: 12px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
  .price-table td:first-child::before { content: none; }
  .price-table td.total-col::before { color: rgba(255, 255, 255, .7); }
  .price-table td.total-col { background: var(--blue); color: #fff; font-weight: 700; }
  .price-table td.yen::after { margin-left: 4px; }
  /* SPでは幅が狭い分、340px固定の画像高さが縦長すぎるため縮小。カード間のGAPも広めに */
  .access-card__media { height: 200px; }
  .access-grid { gap: 40px; }
  /* 採用ページFV：「採用情報」の縦位置を、下からではなくFVの高さの5分の2の位置に */
  .recruit-hero-image { height: 84vh; }
  .recruit-hero__foottext { bottom: 5%; }
  .recruit-hero__inner { max-width: 700px; margin: 0 auto; padding-top: 80px; }
}

/* ==========================================================================
   お問い合わせページ
   ========================================================================== */
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.contact-info-card { border: 1px solid var(--border-gray); border-radius: var(--radius-md); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.contact-info-card__tag {
  align-self: flex-start;
  background: var(--navy); color: #fff;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 13px; letter-spacing: 0.3px;
  padding: 6px 14px;
}
.contact-info-card__title { font-weight: 700; font-size: 20px; color: var(--navy); }
.contact-info-card__meta { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; color: var(--text-main); }
.contact-info-card__meta b { font-weight: 700; margin-right: 6px; }
.contact-info-card__meta a { color: var(--blue); }
.contact-info-card__meta a:hover { text-decoration: underline; }

.contact-form {
  margin-top: 40px;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field[hidden] { display: none; }
.form-field label { font-weight: 700; font-size: 14.5px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.form-required { background: #e0563f; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-jp);
  font-size: 15px;
  padding: 12px 16px;
  border: 1px solid var(--border-gray);
  border-radius: 8px;
  color: var(--text-main);
  background: #fff;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
}
.form-field textarea { resize: vertical; }
.form-hint { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.form-checkbox { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--text-main); }
.form-checkbox input { width: 18px; height: 18px; flex-shrink: 0; }
.contact-form .btn { width: 240px; }

/* 募集停止中の拠点 */
.status-pill--closed { color: var(--text-muted); }
.status-pill--closed::before { background: #9aa5b1; }
@media (max-width: 980px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .contact-form { padding: 24px; }
}

/* ==========================================================================
   タブレット幅（641px〜1024px）専用の微調整
   スマホ用(980px/640px以下)のレイアウトは維持しつつ、その中でも
   タブレット相当の横幅だけ画像サイズ・余白がアンバランスに見える箇所を調整する。
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  /* 大きすぎる：幅いっぱいに広がっていた画像にキャップをかけて中央寄せ */
  .merit-overlap__media { max-width: 520px; margin-left: auto; margin-right: auto; }
  .reason-card__media { max-width: 520px; margin-left: auto; margin-right: auto; }
  .job-card__media { max-width: 520px; margin-left: auto; margin-right: auto; }

  /* 小さすぎる：高さ固定260pxのまま幅が縮んでいたのを、タブレットでは高さを増やして拡大 */
  .merit-row__media { height: 380px; }
  .merit-row:nth-child(4) .merit-row__media { height: 380px; }

  /* パディングが大きすぎる：スマホ用20pxとPC用40px/43pxの中間に調整 */
  .testimonial-card__overlay { padding: 28px; }

  /* merit-row__media・merit-row__vector・::before（色ボックス）は
     見た目上ひとかたまりのグループとして重なっているため、位置がズレないよう
     3つとも個別に動かさず、そのまま media の位置（上）で据え置く */
}