/* =========================================================================
   service.css — ビズ採用 サービス（service.html 専用）
   依存: tokens.css → style.css（reset / .rx-btn / ヘッダー / フッター / FAB / .rx-anim）の後に読み込む
   構成（2026-10-06 に提案書 最終版・26ページに合わせて組み直し）:
     ヒーロー(p9) / 01 なぜ今(#why p4〜p6・中) / 02 4つの対策(#creative p2・p3・p10・p13・強) /
     03 採用AIO(#aio p14・p16〜p18・弱・別サービス) / 04 体制と違い(#team p19・p20・p22・p23・中) / 最終CTA(p26・強)
   見た目は 2026-09-27 デザイン案のホームに合わせる:
     見出し＝Zen Kaku Gothic Antique 900（明朝は使わない）／
     ラベル＝「01 つくる」＋横罫（`--rx-accent-hover`。白背景での小さいピンクのコントラスト確保）／
     セクション背景＝白と `--sv-alt` の交互＋淡いピンクの斜め面（clip-path）
   ブレークポイント（DEVICE-RULES §3）: SP ≤768 / TAB 769–1024 / PC ≥1025
   ========================================================================= */

.rx-svc {
  --sv-sans:  'Zen Kaku Gothic Antique', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  --sv-num:   'Inter', 'Helvetica Neue', Arial, sans-serif;
  --sv-ink:   #0a0a0c;
  --sv-muted: #6e7280;
  --sv-line:  #e7e7eb;
  --sv-alt:   #fafafa;
  --sv-pink-soft: #fdf0f6;
  --sv-pink-line: rgba(var(--rx-accent-rgb), .22);
  --sv-navy:  #101c4d;                                  /* ホーム（--hm-navy）と同じ濃紺。表の見出し・本文の強調に使う */
  font-family: var(--sv-sans);
  color: var(--sv-ink);
  /* 全体の .rx-jp-body は keep-all だが、句読点のない和文が1語扱いになり
     不自然な改行が出るため、本文は通常改行に戻す（home.css と同じ扱い） */
  word-break: normal;
}
@supports (word-break: auto-phrase) {
  .rx-svc :is(h1, h2, h3, h4) { word-break: auto-phrase; text-wrap: balance; }
}

/* ボタン内の矢印（スプライトは線画のため塗りを消して線で描く） */
.rx-svc .rx-btn__chevron {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* アイコンスプライト本体は描画しない（<use> の参照元） */
.rx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ページ内アンカーは固定ヘッダーのぶんだけ手前で止める（tokens.css --rx-header-h・§13） */
.rx-svc [id] { scroll-margin-top: calc(var(--rx-header-h) + 16px); }

/* 線画アイコンの共通指定（このページのアイコンはすべて currentColor の線画） */
.rx-svc svg:not(.rx-btn__chevron) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------------------------------------------------------- 共通 */
.rx-svc__inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}
@media (min-width: 1440px) { .rx-svc__inner { max-width: 1280px; } }
@media (min-width: 1920px) { .rx-svc__inner { max-width: 1400px; } }

.rx-svc-sec {
  position: relative;
  overflow: clip;
  background: #fff;
  padding: clamp(84px, 10vw, 156px) 0;
}
.rx-svc-sec--alt { background: var(--sv-alt); }

/* 背景の淡いピンクの斜め面（ホームと同じ作法・不透明度3.5%） */
.rx-svc-sec__deco,
.rx-svc-hero__deco { position: absolute; inset: 0; z-index: var(--z-base); pointer-events: none; }
.rx-svc-sec__shape {
  position: absolute;
  left: -10%; right: -10%; bottom: -26%;
  height: 62%;
  background: rgba(var(--rx-accent-rgb), .035);
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 100%);
}
/* 「強」のセクションは斜め面を濃くする（ホームの強＝5.5% に合わせる） */
.rx-svc-creative .rx-svc-sec__shape { background: rgba(var(--rx-accent-rgb), .055); }
.rx-svc-sec__inner,
.rx-svc-hero__inner,
.rx-svc-cta__inner {
  position: relative;
  z-index: var(--z-elevated);
  --svc-cw: 1200px;
  width: min(100%, var(--svc-cw));
}
@media (min-width: 1440px) { .rx-svc-sec__inner, .rx-svc-hero__inner, .rx-svc-cta__inner { --svc-cw: 1280px; } }
@media (min-width: 1920px) { .rx-svc-sec__inner, .rx-svc-hero__inner, .rx-svc-cta__inner { --svc-cw: 1400px; } }

/* ラベル（ホームの `__eyebrow` と同じ表現。小さいピンク文字はコントラスト確保のため accent-hover） */
.rx-svc-eyebrow {
  display: flex;
  align-items: center;
  gap: .9em;
  font-weight: 700;
  font-size: clamp(.8125rem, .78rem + .2vw, .9375rem);
  letter-spacing: .08em;
  line-height: 1.6;
  color: var(--rx-accent-hover);
}
.rx-svc-eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: clamp(28px, 5vw, 72px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.rx-svc-title {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  font-size: clamp(1.5rem, .9rem + 2.1vw, 2.875rem);     /* 24 → 46px */
  line-height: 1.34;
  letter-spacing: .01em;
  text-wrap: wrap;
  color: var(--sv-ink);
}
.rx-svc-subtitle {
  font-weight: 900;
  font-size: clamp(1.1875rem, .95rem + 1vw, 1.75rem);    /* 19 → 28px */
  line-height: 1.45;
  letter-spacing: .01em;
  text-wrap: wrap;
  color: var(--sv-ink);
}
.rx-svc-accent { color: var(--rx-accent); }

.rx-svc-lead {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(.875rem, .84rem + .25vw, 1rem);
  line-height: 2.1;
  color: var(--rx-text-muted);
}
.rx-svc-lead--left { max-width: 44em; }

.rx-svc-more { margin-top: clamp(28px, 3.4vw, 44px); }

.rx-svc-textlink {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;                                      /* タップ領域（§12） */
  font-weight: 700;
  font-size: .9375rem;
  color: var(--sv-ink);
  transition: color .2s ease, gap .2s ease;
}
.rx-svc-textlink::after {
  content: "";
  width: .42em;
  height: .42em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.rx-svc-textlink:hover,
.rx-svc-textlink:focus-visible { color: var(--rx-accent); gap: .8em; }

/* 指定改行: PCだけ / SPだけ有効 */
.rx-svc .rx-br-pc { display: none; }
@media (min-width: 769px) {
  .rx-svc .rx-br-pc { display: inline; }
  .rx-svc .rx-br-sp { display: none; }
}

/* =========================================================================
   ヒーロー
   ========================================================================= */
.rx-svc-hero {
  --svch-pt: calc(var(--rx-header-h) + clamp(36px, 5vw, 84px));
  --svch-pb: clamp(48px, 6vw, 96px);
  position: relative;
  overflow: clip;
  background: #fff;
  padding: var(--svch-pt) 0 var(--svch-pb);
}
.rx-svc-hero__shape {
  position: absolute;
  left: 52%; right: -14%; top: -34%;
  height: 104%;
  background: rgba(var(--rx-accent-rgb), .055);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
/* 既定（≤1024px）は コピー → 写真 → 目次 の縦積み。PCは下の min-width:1025px で全面敷きに切り替える */
.rx-svc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "copy"
    "visual"
    "toc";
  row-gap: clamp(24px, 3.2vw, 40px);
}
.rx-svc-hero__copy { grid-area: copy; min-width: 0; }
.rx-svc-hero__visual {
  grid-area: visual;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(20px, 2.4vw, 32px);
}
.rx-svc-hero__visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 38%;      /* 4:3 素材を 16:10 で使うため上下が切れる。顔の位置に合わせて上を見せる */
}
/* 見出し → サブ → 説明文 の3段。強さの差はホームのヒーローに合わせる */
.rx-svc-hero__title {
  margin-top: clamp(14px, 1.6vw, 22px);
  font-weight: 900;
  /* 2行目「採用のすべての場面へ。」＝11文字。PCは下の min() で上書きする */
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3.75rem);       /* 32 → 60px */
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: wrap;
}
.rx-svc-hero__title-line { display: block; }
.rx-svc-hero__sub {
  margin-top: clamp(14px, 1.8vw, 24px);
  font-weight: 700;
  font-size: clamp(1.0625rem, .86rem + .9vw, 1.625rem);  /* 17 → 26px（PCは下の min() で上書き） */
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--sv-ink);
}
.rx-svc-hero__lead {
  max-width: 34em;
  margin-top: clamp(12px, 1.4vw, 18px);
  font-size: clamp(.9375rem, .9rem + .2vw, 1rem);
  line-height: 2;
  color: var(--rx-text-muted);
}

/* ページ内目次 */
.rx-svc-toc { grid-area: toc; margin-top: clamp(30px, 3.6vw, 48px); }
.rx-svc-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rx-svc-toc__list a {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--sv-pink-line);
  border-radius: var(--rx-radius-pill);
  background: #fff;
  font-size: .875rem;
  font-weight: 700;
  color: var(--sv-ink);
  transition: background .2s ease, border-color .2s ease;
}
.rx-svc-toc__no {
  font-family: var(--sv-num);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--rx-accent);
}
.rx-svc-toc__list a:hover,
.rx-svc-toc__list a:focus-visible {
  background: var(--sv-pink-soft);
  border-color: rgba(var(--rx-accent-rgb), .5);
}

@media (max-width: 1199px) {
  .rx-svc-hero__visual img { aspect-ratio: 16 / 9; object-position: 62% 50%; }
  .rx-svc-toc { margin-top: clamp(8px, 1.2vw, 16px); }
}
@media (max-width: 768px) {
  .rx-svc-hero__shape { left: 24%; }
}
@media (max-width: 480px) {
  /* 2行目「採用のすべての場面へ。」＝11文字。320〜480px でも1行に収まるところまで落とす
     （折れると強調の意図が崩れる。ホームのヒーローと同じ扱い） */
  .rx-svc-hero__title { font-size: clamp(1.5rem, 1.1rem + 2.1vw, 1.875rem); }
}

/* ============================ PC: 写真をヒーロー全面に敷く ============================
   素材（service-hero.webp）は左3割が白の余白・右に主題という構図なので、
   右カラムに押し込めると余白ぶん主題が小さくなる。ホームのヒーローと同じ扱いにする。
   ⚠️ 1200px 未満では見出しが写真に重なって読めないため、この扱いは 1200px 以上だけ。
      それ未満は コピー → 写真 → 目次 の縦積みに任せる */
@media (min-width: 1200px) {
  .rx-svc-hero__inner {
    grid-template-areas:
      "copy"
      "toc";
  }
  /* 見出しは列幅ではなく画面幅で決める。写真側へ少しはみ出すが、
     はみ出す先は下の ::after で白に溶けている帯なので読みにくくならない（ホームと同じ作法） */
  .rx-svc-hero__title { font-size: min(4.4vw, 4.5rem); }       /* 53 → 72px */
  .rx-svc-hero__title-line { white-space: nowrap; }
  .rx-svc-hero__sub   { font-size: min(2.1vw, 1.875rem); }     /* 25 → 30px */
  .rx-svc-hero__lead  { font-size: 1rem; max-width: 30em; }
  .rx-svc-hero__copy { max-width: 52%; }
  .rx-svc-hero__copy,
  .rx-svc-toc { position: relative; z-index: var(--z-elevated); }
  .rx-svc-hero__shape { display: none; }        /* 写真が入るので斜め面は出さない */

  .rx-svc-hero__visual {
    position: absolute;
    top: calc(-1 * var(--svch-pt));
    bottom: calc(-1 * var(--svch-pb));
    /* 素材は16:9。箱が縦長だと左右が切れて右の4パネルが欠けるため、
       コピーの下まで大きく回り込ませて箱の比率を素材に近づける（読みやすさは下の白グラデで確保） */
    left: 16%;
    /* コンテナの右端から画面の右端まで伸ばす（ヒーローの overflow: clip で切り取る） */
    right: min(0px, calc((var(--svc-cw) - 100vw) / 2));
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    z-index: var(--z-base);
  }
  .rx-svc-hero__photo {
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% center;
  }
  /* 白 → 透明。素材側の白フェードだけだと画面幅によって文字に写真がかかるため重ねる */
  .rx-svc-hero__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      /* 下端: 写真がここで切れるので、次のセクションの白へ溶かす */
      linear-gradient(to top,
        #fff 0 1%,
        rgba(255, 255, 255, 0) 16%),
      /* 左: コピーの下地。素材自体が左4割を白で抜いてあるので、ここは薄く重ねるだけでよい。
         濃く広げると素材の4パネル（漫画・動画・記事・掲載ページ）まで白で消えてしまう */
      linear-gradient(96deg,
        #fff 0 18%,
        rgba(255, 255, 255, .88) 28%,
        rgba(255, 255, 255, .45) 38%,
        rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
  }
}

/* =========================================================================
   共通の部品（26ページ版で使う：タグ・バッジ・注記・まとめの帯・表）
   ========================================================================= */
.rx-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 小見出しの頭に付ける区分（「採用動画」「漫画」） */
.rx-svc-tag {
  display: inline-block;
  padding: 4px 13px;
  border-radius: var(--rx-radius-pill);
  background: var(--sv-pink-soft);
  color: var(--rx-accent-hover);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  vertical-align: middle;
}
/* 「別サービス」（採用AIO）。資料と同じく、採用AIO が出てくる場所には必ず付ける */
.rx-svc-badge {
  display: inline-block;
  margin-left: .6em;
  padding: 2px 10px;
  border: 1px solid rgba(var(--rx-accent-rgb), .45);
  border-radius: var(--rx-radius-pill);
  background: #fff;
  color: var(--rx-accent-hover);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
.rx-svc-note {
  margin-top: 12px;
  font-size: .75rem;
  line-height: 1.85;
  color: var(--rx-text-muted);
}
.rx-svc-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rx-svc-note a:hover,
.rx-svc-note a:focus-visible { color: var(--rx-accent-hover); }
/* 資料の各スライド下にある「ひとことのまとめ」を、ピンクの縦線つきの帯で再現 */
.rx-svc-summary {
  margin-top: clamp(20px, 2.4vw, 30px);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 26px);
  border-left: 4px solid var(--rx-accent);
  border-radius: 0 12px 12px 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .05);
  font-weight: 700;
  font-size: clamp(.875rem, .84rem + .25vw, 1rem);
  line-height: 1.85;
  color: var(--sv-navy);
}
/* 保証しない旨の注記。読み飛ばされないよう太字＋ピンクの縦線にする */
.rx-svc-caution {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--rx-accent);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.85;
  color: var(--sv-ink);
}
/* セクション内の小ブロック（罫線で区切る） */
.rx-svc-block {
  margin-top: clamp(64px, 7.5vw, 112px);
  padding-top: clamp(48px, 5.6vw, 80px);
  border-top: 1px solid var(--sv-line);
}
.rx-svc-block--first {
  margin-top: clamp(36px, 4.4vw, 56px);
  padding-top: 0;
  border-top: 0;
}
.rx-svc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 52px);
}

/* --- 表（資料の比較表・マトリクスを再現）---
   スマホでは表の中だけ横にスクロールする（ページ全体は横スクロールさせない・DEVICE-RULES §8。
   ホームのフェーズ対応表と同じ扱い） */
.rx-svc-table-wrap {
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--sv-line);
  border-radius: var(--rx-radius-lg);
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rx-svc-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.6;
}
.rx-svc-table-wrap thead th,
.rx-svc-table-wrap thead td {
  padding: 14px 10px;
  background: var(--sv-navy);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  text-align: center;
  vertical-align: middle;
}
.rx-svc-table-wrap thead small {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  font-size: .6875rem;
  opacity: .78;
}
.rx-svc-table-wrap tbody th,
.rx-svc-table-wrap tbody td {
  padding: 14px 12px;
  border-top: 1px solid var(--sv-line);
  vertical-align: middle;
}
.rx-svc-table-wrap tbody th {
  font-weight: 700;
  text-align: left;
  color: var(--sv-navy);
}
.rx-svc-table-wrap tbody td { text-align: center; }

/* スマホでは表の左端の列を固定し、横にスクロールしても何の行か見失わないようにする */
.rx-svc-table-wrap tbody th,
.rx-svc-table-wrap thead tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 1px 0 0 var(--sv-line);
}
.rx-svc-table-wrap tbody th { background: #fff; }
.rx-svc-table-wrap .rx-svc-matrix__row-ai th,
.rx-svc-table-wrap .rx-svc-steps-table__pick th { background: var(--sv-pink-soft); }
.rx-svc-table-wrap .rx-svc-steps-table__pick th { color: var(--rx-accent-hover); }

/* 横スクロールできることを知らせる一言（表がはみ出すスマホ幅だけ出す） */
.rx-svc-scroll-hint { display: none; }
@media (max-width: 768px) {
  .rx-svc-scroll-hint {
    display: block;
    margin-top: clamp(20px, 2.6vw, 28px);
    font-size: .75rem;
    font-weight: 700;
    color: var(--rx-text-muted);
  }
  .rx-svc-scroll-hint::before { content: "← "; color: var(--rx-accent); }
  .rx-svc-scroll-hint::after  { content: " →"; color: var(--rx-accent); }
  .rx-svc-scroll-hint + .rx-svc-table-wrap { margin-top: 8px; }
}

/* ◎○− と ●○− の記号 */
.rx-svc-mark { font-size: 1.125rem; color: var(--sv-muted); }
.rx-svc-mark--best { font-size: 1.375rem; font-weight: 700; color: var(--rx-accent); }
.rx-svc-mark--none { color: #c3c6cf; }
.rx-svc-dot { font-size: 1.125rem; color: #c3c6cf; }
.rx-svc-dot--main { color: var(--rx-accent); }

/* マトリクス（p3・p13・p22）。AI の列・行と、ビズ採用の列だけ色を変える */
.rx-svc-matrix { min-width: 680px; }
.rx-svc-matrix--place { min-width: 820px; }
.rx-svc-matrix--vs { min-width: 640px; }
.rx-svc-matrix tbody th { width: 22%; white-space: nowrap; }
.rx-svc-matrix--vs tbody th { width: 34%; white-space: normal; }
.rx-svc-matrix--vs tbody td { color: var(--sv-muted); font-size: 1rem; }
.rx-svc-table-wrap thead .rx-svc-matrix__ai,
.rx-svc-table-wrap thead .rx-svc-matrix__us { background: var(--rx-accent); }
.rx-svc-matrix__row-ai th,
.rx-svc-matrix__row-ai td,
.rx-svc-table-wrap tbody .rx-svc-matrix__us { background: var(--sv-pink-soft); }
.rx-svc-matrix__row-ai th .rx-svc-badge { margin-left: .5em; }

/* 比較表（p10）。採用アニメーションの列を推す */
.rx-svc-compare { min-width: 720px; }
.rx-svc-compare tbody th { width: 16%; white-space: nowrap; }
.rx-svc-compare tbody td {
  width: 28%;
  text-align: left;
  vertical-align: top;
  font-size: .8125rem;
  line-height: 1.85;
  color: var(--rx-text-muted);
}
.rx-svc-table-wrap thead .rx-svc-compare__pick { background: var(--rx-accent); }
.rx-svc-compare tbody .rx-svc-compare__pick {
  background: var(--sv-pink-soft);
  color: var(--rx-accent-hover);
  font-weight: 700;
}

/* =========================================================================
   01 なぜ今（提案書 最終版 p4〜p6）— 中。数字そのものを見せる（ホームの旧「実績」と同じ考え方）
   ========================================================================= */
.rx-svc-stats { margin-top: clamp(36px, 4.4vw, 56px); }
.rx-svc-stats + .rx-svc-stats { margin-top: clamp(48px, 5.6vw, 76px); }
.rx-svc-stats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-weight: 900;
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.375rem);
  line-height: 1.5;
  color: var(--sv-navy);
}
.rx-svc-stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(16px, 2vw, 24px);
}
.rx-svc-stat {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px) clamp(16px, 1.8vw, 22px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--rx-radius-lg);
}
.rx-svc-stat__num {
  font-family: var(--sv-num);
  font-weight: 700;
  font-size: clamp(2.375rem, 1.7rem + 2.4vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--rx-accent);
  white-space: nowrap;
}
.rx-svc-stat__num small {
  margin-left: .08em;
  font-family: var(--sv-sans);
  font-weight: 900;
  font-size: .42em;
  letter-spacing: 0;
}
.rx-svc-stat__label {
  margin-top: 12px;
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--sv-navy);
}
.rx-svc-stat__src {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--sv-line);
  font-size: .6875rem;
  line-height: 1.75;
  color: var(--rx-text-muted);
}
.rx-svc-stat__label + .rx-svc-stat__src { margin-top: auto; }
.rx-svc-stat__src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rx-svc-stat__src a:hover,
.rx-svc-stat__src a:focus-visible { color: var(--rx-accent-hover); }
/* 出典の手前に余白を確保（ラベルが短いカードでも罫線の位置がそろう） */
.rx-svc-stat__label { margin-bottom: 14px; }

@media (max-width: 1024px) { .rx-svc-stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .rx-svc-stats__list { grid-template-columns: 1fr; } }

/* =========================================================================
   02 4つの対策（提案書 最終版 p2・p3・p10・p13）— 強。成果物4枚の画像を一番大きく見せる
   ========================================================================= */
.rx-svc-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px clamp(14px, 1.8vw, 22px);
  margin-top: clamp(36px, 4.4vw, 60px);
}
/* 「人に見せる」は1〜3枚目の上、「AIに伝える」は4枚目の上に帯を出す（資料 p2 と同じ） */
.rx-svc-cards__group {
  grid-column: 1 / 4;
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--sv-navy);
  color: #fff;
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .04em;
}
.rx-svc-cards__group--ai { grid-column: 4; background: var(--rx-accent); }
.rx-svc-cards__list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  gap: inherit;
}
.rx-svc-card {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.6vw, 20px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--rx-radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px rgba(15, 23, 42, .05);
}
.rx-svc-card--ai { border-color: rgba(var(--rx-accent-rgb), .45); background: #fffafc; }
.rx-svc-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--rx-radius);
  background: var(--sv-pink-soft);
  overflow: hidden;
}
.rx-svc-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rx-svc-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: clamp(12px, 1.4vw, 16px);
  font-weight: 900;
  font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
  line-height: 1.4;
  color: var(--sv-navy);
}
.rx-svc-card__name .rx-svc-badge { margin-left: 0; }
.rx-svc-card__no {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--rx-accent);
  color: #fff;
  font-family: var(--sv-num);
  font-weight: 700;
  font-size: .8125rem;
}
.rx-svc-card__kind {
  margin-top: 4px;
  font-weight: 700;
  font-size: .8125rem;
  color: var(--rx-accent-hover);
}
.rx-svc-card__cap {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sv-line);
  font-size: .6875rem;
  color: var(--rx-text-muted);
}
.rx-svc-card__kind + .rx-svc-card__cap { margin-top: 14px; }
.rx-svc-card__what {
  margin-top: 4px;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--sv-navy);
}

@media (max-width: 1024px) {
  .rx-svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rx-svc-cards__group { display: none; }        /* 2列だと帯と列がずれるので出さない（4枚目は「別サービス」の印で区別できる） */
  .rx-svc-cards__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rx-svc-cards,
  .rx-svc-cards__list { grid-template-columns: 1fr; }
}

/* =========================================================================
   03 採用AIO（提案書 最終版 p14・p16〜p18）— 弱。別サービスなので、強い写真や大きなカードは使わない
   ========================================================================= */
.rx-svc-eyebrow .rx-svc-badge { margin-left: 2px; }

/* 質問の設計例（p16） */
.rx-svc-qs {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.rx-svc-qs__list { display: grid; gap: 12px; }
.rx-svc-q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
}
.rx-svc-q__icon {
  grid-row: 1 / 4;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sv-pink-soft);
  color: var(--rx-accent);
}
.rx-svc-q__icon svg { width: 22px; height: 22px; }
.rx-svc-q__type { font-weight: 900; font-size: .9375rem; color: var(--sv-navy); }
.rx-svc-q__ask { margin-top: 4px; font-weight: 700; font-size: .9375rem; line-height: 1.6; color: var(--rx-accent-hover); }
.rx-svc-q__info { margin-top: 6px; font-size: .75rem; line-height: 1.75; color: var(--rx-text-muted); }
.rx-svc-qs__diff {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 1.8vw, 22px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
}
.rx-svc-qs__diff-head { font-weight: 900; font-size: .9375rem; color: var(--sv-navy); }
.rx-svc-qs__case {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--sv-alt);
  font-size: .875rem;
  line-height: 1.75;
}
.rx-svc-qs__case--good { background: var(--sv-pink-soft); font-weight: 700; color: var(--sv-navy); }
.rx-svc-qs__case-cap { font-size: .75rem; font-weight: 700; color: var(--rx-text-muted); margin-bottom: 4px; }
.rx-svc-qs__case--good .rx-svc-qs__case-cap { color: var(--rx-accent-hover); }

/* 5つのこと（p17） */
.rx-svc-steps-table { min-width: 640px; }
.rx-svc-steps-table thead th { text-align: left; padding-left: 16px; }
.rx-svc-steps-table tbody th { width: 26%; white-space: nowrap; }
.rx-svc-steps-table tbody th span {
  margin-right: 10px;
  font-family: var(--sv-num);
  color: var(--rx-accent);
}
.rx-svc-steps-table tbody td { text-align: left; font-size: .8125rem; line-height: 1.8; color: var(--rx-text-muted); }
.rx-svc-steps-table__pick th,
.rx-svc-steps-table__pick td { background: var(--sv-pink-soft); color: var(--rx-accent-hover); font-weight: 700; }

/* 毎月の進め方（p18） */
.rx-svc-months {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.rx-svc-month {
  position: relative;
  padding: clamp(18px, 2vw, 24px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
}
.rx-svc-month__when {
  display: inline-block;
  padding: 3px 14px;
  border-radius: var(--rx-radius-pill);
  background: var(--sv-navy);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}
.rx-svc-month__name { margin-top: 12px; font-weight: 900; font-size: 1.0625rem; line-height: 1.5; color: var(--sv-navy); }
.rx-svc-month ul { margin-top: 10px; }
.rx-svc-month li,
.rx-svc-report__list dd {
  position: relative;
  padding-left: 1.1em;
  font-size: .8125rem;
  line-height: 1.95;
  color: var(--rx-text-muted);
}
.rx-svc-month li::before {
  content: "";
  position: absolute;
  left: 0; top: .95em;
  width: .6em; height: 1px;
  background: rgba(var(--rx-accent-rgb), .5);
}
@media (min-width: 1025px) {
  .rx-svc-month + .rx-svc-month::before {          /* 初月 → 2〜3か月目 → 以降 のつなぎ */
    content: "";
    position: absolute;
    top: 50%;
    left: calc(clamp(16px, 2vw, 28px) / -2 - 5px);
    width: 10px; height: 10px;
    border-top: 2px solid rgba(var(--rx-accent-rgb), .55);
    border-right: 2px solid rgba(var(--rx-accent-rgb), .55);
    transform: translateY(-50%) rotate(45deg);
  }
}
.rx-svc-report {
  margin-top: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2.2vw, 28px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 14px;
}
.rx-svc-report__head { font-weight: 900; font-size: .9375rem; color: var(--rx-accent-hover); }
.rx-svc-report__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px clamp(16px, 2vw, 28px);
  margin: 12px 0 0;
}
.rx-svc-report__list dt { font-weight: 700; font-size: .875rem; color: var(--sv-navy); }
.rx-svc-report__list dt span { margin-right: 6px; font-family: var(--sv-num); color: var(--rx-accent); }
.rx-svc-report__list dd { margin: 4px 0 0; padding-left: 0; }

@media (max-width: 1024px) {
  .rx-svc-qs { grid-template-columns: 1fr; }
  .rx-svc-months { grid-template-columns: 1fr; }
  .rx-svc-report__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rx-svc-report__list { grid-template-columns: 1fr; }
}

/* =========================================================================
   04 体制と違い（提案書 最終版 p19・p20・p22・p23）— 中
   ========================================================================= */
.rx-svc-teams {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(36px, 4.4vw, 56px);
}
.rx-svc-teamcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 20px);
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: var(--rx-radius-lg);
  text-align: center;
}
.rx-svc-teamcard--base { border: 2px solid var(--rx-accent); }
.rx-svc-teamcard__no { font-size: .75rem; font-weight: 700; color: var(--rx-accent-hover); align-self: flex-start; }
.rx-svc-teamcard__icon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--sv-pink-soft);
  color: var(--rx-accent);
}
.rx-svc-teamcard__icon svg { width: 27px; height: 27px; }
.rx-svc-teamcard__name { margin-top: 12px; font-weight: 900; font-size: 1.125rem; line-height: 1.45; color: var(--sv-navy); }
.rx-svc-teamcard__name small { font-size: .75rem; font-weight: 700; color: var(--rx-text-muted); }
.rx-svc-teamcard__issue {
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: var(--rx-radius-pill);
  background: var(--sv-pink-soft);
  color: var(--rx-accent-hover);
  font-size: .75rem;
  font-weight: 700;
}
.rx-svc-teamcard__issue--base { background: var(--rx-accent); color: #fff; padding-inline: 22px; }
.rx-svc-teamcard__desc { margin-top: 12px; font-size: .875rem; line-height: 1.8; color: var(--sv-navy); }
.rx-svc-teamcard__kpi {
  margin-top: auto;
  padding-top: 14px;
  width: 100%;
  border-top: 1px solid var(--sv-line);
  font-size: .75rem;
  line-height: 1.75;
  color: var(--rx-text-muted);
}
.rx-svc-teamcard__desc + .rx-svc-teamcard__kpi { margin-top: auto; }
.rx-svc-teamcard__kpi span { display: block; font-weight: 700; color: var(--rx-accent-hover); }
.rx-svc-teamcard__desc { margin-bottom: 14px; }

/* 効果が出やすい課題（p23） */
.rx-svc-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px clamp(14px, 1.8vw, 22px);
  margin-top: clamp(22px, 2.6vw, 32px);
}
.rx-svc-checks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--sv-line);
  border-radius: 12px;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--sv-navy);
}
.rx-svc-checks li > svg {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  stroke-width: 2.6;
  color: var(--rx-accent);
}
.rx-svc-spot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(20px, 3vw, 48px);
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 34px);
  border-radius: var(--rx-radius);
  background: var(--sv-navy);
  color: #fff;
}
.rx-svc-spot__cap { font-size: .8125rem; font-weight: 700; opacity: .85; }
.rx-svc-spot__body { font-size: clamp(1rem, .95rem + .45vw, 1.25rem); font-weight: 700; line-height: 1.6; }
.rx-svc-spot__price { color: #ff8cc0; }               /* 濃紺の上の小さめのピンクは明るめにして読みやすくする */

@media (max-width: 1024px) { .rx-svc-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .rx-svc-checks { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .rx-svc-teams { grid-template-columns: 1fr; } }

/* =========================================================================
   最終CTA
   ========================================================================= */
/* 締めの帯＝「強」。ページで唯一、面全体に色を入れて終わりを作る。
   他セクションのような斜め面にすると境目が中央寄せの見出しを横切るため、ここだけ縦のグラデーション */
.rx-svc-cta {
  position: relative;
  overflow: clip;
  background: linear-gradient(180deg, #fff 0%, var(--sv-pink-soft) 42%, #fce3ef 100%);
  padding: clamp(96px, 11.5vw, 184px) 0;
}
.rx-svc-cta__inner { text-align: center; }
.rx-svc-cta__eyebrow { justify-content: center; }
.rx-svc-cta__eyebrow::before {                           /* 中央寄せなので横罫は両側に出す */
  content: "";
  flex: 0 0 auto;
  width: clamp(28px, 5vw, 72px);
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.rx-svc-cta__title {
  text-align: center;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.5rem);    /* 28 → 56px。ページで2番目に大きい */
}
.rx-svc-cta__lead {
  margin-inline: auto;
  max-width: 42em;
  font-size: clamp(.9375rem, .9rem + .3vw, 1.125rem);
}
.rx-svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(30px, 3.6vw, 48px);
}
.rx-svc-cta__btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 clamp(24px, 2.6vw, 38px);
  border: 1.5px solid var(--rx-accent);
  border-radius: var(--rx-radius-pill);
  background: #fff;
  color: var(--rx-accent-hover);
  font-weight: 700;
  font-size: .9375rem;
  transition: background .2s ease, border-color .2s ease;
}
.rx-svc-cta__btn-line:hover,
.rx-svc-cta__btn-line:focus-visible { background: var(--sv-pink-soft); border-color: var(--rx-accent-hover); }
.rx-svc-cta__note {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: .8125rem;
  color: var(--rx-text-muted);
}

/* フッター上余白はCTA帯と連続させる（home.css と同じ扱い） */
.rx-svc + .rx-footer { margin-top: 0; }