/* ====================================================================
   TripClear — 採用マーケティング支援ページ専用レイヤ（/sns/recruit/）
   sns.css / pov.css / service-page.css のトークンを前提に、
   このページにしか出てこないセクションだけを .rc- prefix で足す。

   守っていること（.claude/skills/design-fb/SKILL.md）:
     - グラデーションは --tc-grad のみ。新しい紫を増やさない
     - 角丸は --radius-sm / md / lg のみ。生の px を増やさない
       （ピル型の 999px だけは既存コンポーネントと同じ扱い）
     - ダーク面は --home-*、ライト面は --tc-light-* を再利用
     - 比較は双方に背景色、自社側だけ枠線＋影で強調
     - スマホ（〜600px）は PC の縮小ではなく縦積み専用レイアウト
   ==================================================================== */

/* ==========================================================================
   共通：セクション末尾の締めの帯（Why / Cost）
   ========================================================================== */
/* 帯の左に --tc-grad の細いバーを立てて、締めの一文であることを示す */
/* 囲まずに、引用文のように左のグラデ縦線だけで締める */
.rc-band {
  position: relative;
  margin-top: 56px;
  padding: 6px 0 6px 26px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: 0.005em;
  font-feature-settings: 'palt' 1;
  color: var(--home-ink);
  max-width: 30em;
}
.rc-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: var(--tc-grad);
}
.rc-band--light { color: var(--tc-light-ink); }

/* ==========================================================================
   S1.5 ONE-STOP — 戦略〜LINE運用設計までの一気通貫パイプライン（ライト面）
   PC: 横一列のカード＋円形番号ノード＋背面を貫く --tc-grad のライン
   〜1000px: 2×2（ライン・矢印は隠す）／〜600px: 左に縦ラインのタイムライン
   使用トークンは --tc-light-* / --tc-grad / --radius-* のみ
   ========================================================================== */
.rc-chain-badge-row { margin-top: 26px; }
.rc-chain-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--tc-grad);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.rc-chain {
  --rc-chain-gap: 24px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rc-chain-gap);
  align-items: stretch;
  margin-top: 18px;
}
/* 4つのノード中心を貫く1本のグラデーションライン（背面） */
.rc-chain::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 20.5px;
  left: calc((100% - 3 * var(--rc-chain-gap)) / 8);
  right: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--tc-grad);
}
/* ラインの右端の矢じり */
.rc-chain::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 12px;
  right: 0;
  width: 20px;
  height: 20px;
  background: var(--tc-grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 4 17 12 9 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 4 17 12 9 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rc-chain-step {
  position: relative;
  z-index: 1;
  margin-top: 30px;
  padding: 30px 20px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--tc-light-line);
  background: #fff;
  text-align: center;
}
/* カード間の小さな進行方向マーク（ラインと二重に流れを示す） */
.rc-chain-step + .rc-chain-step::before {
  content: "";
  position: absolute;
  top: calc(50% - 6px);
  left: calc(-1 * (var(--rc-chain-gap) / 2) - 6px);
  width: 12px;
  height: 12px;
  background: #7b6bff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 4 17 12 9 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 4 17 12 9 20'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 円形の番号ノード。カード枠から上へ少し飛び出させる */
.rc-chain-num {
  position: absolute;
  z-index: 2;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--tc-grad);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.rc-chain-title {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--tc-light-ink);
  margin-bottom: 8px;
}
.rc-chain-desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--tc-light-ink-2);
}
.rc-onestop-note {
  margin-top: 34px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  color: var(--tc-light-ink);
  max-width: 52em;
}

/* タブレット：2×2。背面ラインと進行マークは隠し、番号ノードは残す */
@media (max-width: 1000px) {
  .rc-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; margin-top: 12px; }
  .rc-chain::before,
  .rc-chain::after,
  .rc-chain-step + .rc-chain-step::before { display: none; }
}

/* スマホ：左に縦のグラデーションラインを通したタイムライン型 */
@media (max-width: 600px) {
  .rc-chain-badge-row { margin-top: 22px; }
  .rc-chain {
    --rc-chain-gap: 22px;
    display: flex;
    flex-direction: column;
    gap: var(--rc-chain-gap);
    margin-top: 18px;
    padding-left: 58px;
  }
  .rc-chain-step {
    margin-top: 0;
    padding: 18px 16px 16px;
    border-radius: var(--radius-sm);
    text-align: left;
  }
  .rc-chain-num { top: 14px; left: -58px; transform: none; width: 42px; height: 42px; font-size: 14px; }
  /* ノード同士を縦のグラデーションラインでつなぐ */
  .rc-chain-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -38.5px;
    top: 56px;
    bottom: calc(-1 * (var(--rc-chain-gap) + 14px));
    width: 3px;
    border-radius: 2px;
    background: var(--tc-grad);
  }
  /* カード間の進行マークは下向きに */
  .rc-chain-step + .rc-chain-step::before {
    display: block;
    top: calc(-1 * (var(--rc-chain-gap) / 2) - 6px);
    left: calc(50% - 6px);
    transform: rotate(90deg);
  }
  .rc-chain-title { font-size: 15.5px; }
  .rc-chain-desc { font-size: 12.5px; }
  .rc-onestop-note { margin-top: 26px; font-size: 13.5px; line-height: 1.85; }
}

/* ==========================================================================
   S2 WHY — 労働人口の層別ボリューム（ダーク面）
   ========================================================================== */
.rc-layers {
  margin: 0;
  padding: 0;
}
/* --- ドーナツ（inline SVG）＋ 凡例 --- */
.rc-donut-wrap {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: center;
}
.rc-donut {
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.rc-donut svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 中央の数字は SVG の <text> ではなく HTML で重ねて、サイト共通のフォント指定を効かせる */
.rc-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 22%;
}
.rc-donut-num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.rc-donut-num em {
  font-style: normal;
  font-size: 0.42em;
  font-weight: 700;
  margin-left: 3px;
}
.rc-donut-cap {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--home-ink-2);
}

.rc-legend-head {
  font-family: var(--font-body-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--home-ink-3);
  margin-bottom: 16px;
}
.rc-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rc-legend-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--home-line);
}
.rc-legend-item:last-child { padding-bottom: 0; border-bottom: none; }
.rc-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  align-self: center;
}
.rc-legend-dot--muted { background: rgba(255, 255, 255, 0.22); }
.rc-legend-dot--mid { background: #7b6bff; }
.rc-legend-dot--grad { background: var(--tc-grad); }
.rc-legend-name {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--home-ink);
}
.rc-legend-pct {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: transparent;
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.rc-legend-pct--muted {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--home-ink-3);
}
.rc-legend-tag {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--home-ink-2);
}
.rc-legend-desc {
  grid-column: 2 / -1;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--home-ink-3);
}
.rc-legend-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--home-line);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.85;
  color: var(--home-ink-2);
}

.rc-layers-source {
  margin-top: 20px;
  font-size: 11.5px;
  color: var(--home-ink-3);
}

/* スクロールで到達した時（.rc-layers に .is-revealed が付いた時）に弧が描かれる。
   JS 無効時は data-reveal が効かないので、素の stroke-dasharray がそのまま出る。
   （動きを抑える設定では静止） */
@media (prefers-reduced-motion: no-preference) {
  .rc-layers.is-revealed .rc-donut-seg { animation: rcDonut1 1.1s var(--ease-out-expo) both; }
  .rc-layers.is-revealed .rc-donut-seg--2 { animation-name: rcDonut2; animation-delay: 0.12s; }
  .rc-layers.is-revealed .rc-donut-seg--3 { animation-name: rcDonut3; animation-delay: 0.24s; }
}
@keyframes rcDonut1 { from { stroke-dasharray: 0 502.65; } to { stroke-dasharray: 27.16 475.5; } }
@keyframes rcDonut2 { from { stroke-dasharray: 0 502.65; } to { stroke-dasharray: 87.48 415.18; } }
@keyframes rcDonut3 { from { stroke-dasharray: 0 502.65; } to { stroke-dasharray: 379.02 123.64; } }

.rc-why-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 64px;
}
.rc-why-card {
  padding: 24px 0 0;
  border-top: 1px solid var(--home-line);
}
.rc-why-ico {
  display: inline-flex;
  margin-bottom: 16px;
  color: var(--home-accent-2);
}
.rc-why-ico svg { width: 24px; height: 24px; }
.rc-why-card-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--home-ink);
  margin-bottom: 6px;
}
.rc-why-card-lead {
  font-size: 13px;
  font-weight: 700;
  color: var(--home-accent-2);
  margin-bottom: 10px;
}
.rc-why-card-desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--home-ink-2);
}

/* ==========================================================================
   S3 APPROACH — 求人媒体 vs 採用マーケティング支援 の比較（ライト面）
   design-fb「比較は背景色で構造を見せる／自社側を枠線・影で目立たせる」
   ========================================================================== */
.rc-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.rc-compare-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border-radius: var(--radius-lg);
  background: #fff;
}
.rc-compare-card--own {
  border: 1.5px solid #7b6bff;
  box-shadow: 0 18px 44px rgba(123, 107, 255, 0.16);
}
.rc-compare-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--tc-light-ink-3);
  margin-bottom: 6px;
}
.rc-compare-card--own .rc-compare-eyebrow {
  color: transparent;
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.rc-compare-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--tc-light-ink);
  margin-bottom: 18px;
}
.rc-compare-figure {
  /* 2枚のカードは高さが揃うので、図の面を伸ばして「図の下に空白だけが残る」のを防ぐ */
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  padding: 20px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius-md);
  background: var(--tc-light-bg);
}
.rc-compare-desc {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--tc-light-ink-2);
  margin-top: auto;
}

/* --- 左：横並びに比較される求人票のミニ図 --- */
.rc-joblist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.rc-jobcard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tc-light-line);
  background: #fff;
}
.rc-jobcard-name {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--tc-light-ink);
}
.rc-jobcard-row {
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 23, 46, 0.1);
}
.rc-jobcard-row--short { width: 62%; }
.rc-jobcard-meta {
  font-size: 9.5px;
  line-height: 1.5;
  color: var(--tc-light-ink-3);
}

/* --- 右：比較対象のない縦型動画1枚のミニ図 --- */
.rc-vertical { display: flex; justify-content: center; width: 100%; }
.rc-vertical-frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  width: 96px;
  aspect-ratio: 9 / 16;
  padding: 12px 11px;
  border-radius: var(--radius-sm);
  background: var(--tc-grad);
}
.rc-vertical-label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}
.rc-vertical-row {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
}
.rc-vertical-row--short { width: 58%; }

/* 仕組みカード（既存 .sns-plans-grid を流用）の上余白 */
.rc-approach-cards { margin-top: 44px; }
/* Reach のカードは4枚。3カラムだと1枚余るので、この grid だけ 2×2 にする
   （カードの区切りは border-top なので 2×2 でも各行の頭に線が入り破綻しない） */
.rc-reach .sns-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 法令まわりの注記はカード内で一段落として扱う */
.rc-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--tc-light-line);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--tc-light-ink-3);
}

/* ==========================================================================
   S3 APPROACH / Follow — Lステップ・Liny を活用した候補者フォロー（ライト面）
   上段＝問題提起カード3枚／下段＝4ステップの横並びフロー
   ========================================================================== */
.rc-follow-head {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--tc-light-ink);
}
.rc-follow-head--solution {
  margin-top: 52px;
  padding-top: 40px;
  border-top: 1px solid var(--tc-light-line);
}
.rc-follow-lead {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--tc-light-ink-2);
  max-width: 46em;
}

/* --- 上段：問題提起カード3枚 --- */
.rc-follow-issues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 36px;
}
.rc-follow-issue {
  padding: 22px 0 0;
  border-top: 1px solid var(--tc-light-line);
}
.rc-follow-issue-ico {
  display: inline-flex;
  margin-bottom: 14px;
  color: #7b6bff;
}
.rc-follow-issue-ico svg { width: 24px; height: 24px; }
.rc-follow-issue-title {
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--tc-light-ink);
  margin-bottom: 8px;
}
.rc-follow-issue-desc {
  font-size: 13px;
  line-height: 1.9;
  color: var(--tc-light-ink-2);
}

/* --- 下段：4ステップの横並びフロー（PC 横4列 ＋ 矢印） --- */
.rc-follow-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.rc-follow-step {
  min-width: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--tc-light-line);
}
.rc-follow-step-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: transparent;
  background: var(--tc-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
.rc-follow-step-title {
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--tc-light-ink);
}
/* キーワードはチップにせず、区切り付きのテキスト行に */
.rc-follow-step-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  margin: 8px 0 0;
  padding: 0;
}
.rc-follow-step-chips li {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--tc-light-ink-3);
}
.rc-follow-step-chips li + li::before {
  content: "/";
  margin: 0 8px;
  font-weight: 400;
  color: var(--tc-light-line);
}
.rc-follow-step-desc {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--tc-light-ink-2);
}
.rc-follow-arrow { display: none; }
.rc-follow-arrow svg { width: 18px; height: 18px; }

/* 対応ツールのチップ（ヒーローの .svcp-hero-tags をライト面用に上書き） */
.rc-follow-tools { margin-top: 28px; }
.rc-follow-tools .svcp-hero-tags-label { color: var(--tc-light-ink-3); }
.rc-follow-tools li {
  background: #fff;
  color: var(--tc-light-ink);
}
.rc-follow-note {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--tc-light-ink-3);
}

/* ==========================================================================
   S4 COST — 中間コストの比較（ダーク面）
   ========================================================================== */
.rc-cost-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
  align-items: stretch;
}
.rc-cost-col {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.04);
}
.rc-cost-col--own {
  border: 1.5px solid rgba(163, 136, 255, 0.6);
  background: rgba(163, 136, 255, 0.09);
  box-shadow: 0 18px 44px rgba(123, 107, 255, 0.22);
}
.rc-cost-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--home-ink-2);
  margin-bottom: 20px;
}
.rc-cost-col--own .rc-cost-eyebrow { color: var(--home-accent-2); }
.rc-cost-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.rc-cost-node {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.09);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--home-ink);
  text-align: center;
}
.rc-cost-node--you {
  background: var(--tc-grad);
  color: #fff;
}
.rc-cost-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0 10px 14px;
}
.rc-cost-arrow-mark {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--home-accent-2);
}
.rc-cost-arrow-mark svg { width: 20px; height: 20px; }
.rc-cost-arrow-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--home-ink-3);
}
.rc-cost-arrow-note b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--home-ink);
}
.rc-cost-total {
  margin-top: auto;
  padding-top: 22px;
}
.rc-cost-sum-lead {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--home-ink-3);
  margin-bottom: 12px;
}
.rc-cost-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.rc-cost-chip {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.09);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--home-ink);
}
.rc-cost-chip--own {
  background: var(--tc-grad);
  color: #fff;
}
.rc-cost-plus {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--home-ink-3);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 900px) {
  .rc-why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-why-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rc-compare { grid-template-columns: minmax(0, 1fr); }
  /* 900px 以下は既存の .sns-plans-grid（1カラム）に戻す */
  .rc-reach .sns-plans-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-cost-grid { grid-template-columns: minmax(0, 1fr); }
  .rc-donut-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: center; }
  .rc-legend { width: 100%; }
  /* 4列のままだと1列が細くなりすぎるので 2×2 に折り返す（矢印は隠す） */
  .rc-follow-issues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-follow-issue:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .rc-follow-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 600px) {
  /* design-fb④: スマホは PC の縮小ではなく縦積み専用。余白を詰めて間延びを防ぐ */
  .rc-band {
    margin-top: 36px;
    padding: 4px 0 4px 18px;
    font-size: 16px;
    line-height: 1.7;
  }

  .rc-donut-wrap { gap: 22px; }
  .rc-donut { width: 100%; max-width: 280px; }
  .rc-donut-num { font-size: 46px; }
  .rc-donut-cap { font-size: 10.5px; margin-top: 6px; }
  .rc-legend-head { font-size: 10.5px; margin-bottom: 14px; }
  .rc-legend-item {
    grid-template-columns: 12px minmax(0, 1fr);
    row-gap: 6px;
  }
  .rc-legend-name { font-size: 14px; }
  .rc-legend-pct { font-size: 20px; }
  /* タグは行頭に折り返す（右端に置くと幅が足りず改行事故になる） */
  .rc-legend-tag { grid-column: 2; grid-row: auto; justify-self: start; white-space: normal; font-size: 10.5px; }
  .rc-legend-desc { font-size: 12px; }
  .rc-legend-note { font-size: 12.5px; margin-top: 16px; padding-top: 14px; }
  .rc-layers-source { margin-top: 16px; font-size: 11px; }

  .rc-why-cards { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 40px; }
  .rc-why-card { padding: 18px 0 0; }
  .rc-why-card-title { font-size: 16px; }
  .rc-why-card-desc { font-size: 13px; }

  .rc-compare { gap: 12px; margin-top: 24px; }
  .rc-compare-card { padding: 20px 18px; border-radius: var(--radius-md); }
  .rc-compare-title { font-size: 17px; margin-bottom: 14px; }
  .rc-compare-figure { min-height: 0; padding: 16px 14px; border-radius: var(--radius-sm); }
  .rc-compare-desc { font-size: 13px; }
  .rc-jobcard { padding: 10px 8px; }
  .rc-jobcard-meta { font-size: 9px; }
  .rc-approach-cards { margin-top: 32px; }

  .rc-follow-head { font-size: 16.5px; }
  .rc-follow-head--solution { margin-top: 34px; padding-top: 28px; }
  .rc-follow-lead { font-size: 13.5px; line-height: 1.9; }
  .rc-follow-issues { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; }
  .rc-follow-issue { padding: 18px 0 0; }
  .rc-follow-issue-title { font-size: 15.5px; }
  .rc-follow-issue-desc { font-size: 12.5px; }
  /* 横4列は縦積みに（番号が順序を示すので矢印は不要） */
  .rc-follow-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 24px; }
  .rc-follow-step { padding: 18px 0 0; }
  .rc-follow-step-num { font-size: 28px; margin-bottom: 10px; }
  .rc-follow-step-title { font-size: 15px; }
  .rc-follow-step-chips li { font-size: 11px; }
  .rc-follow-step-desc { font-size: 12.5px; }
  .rc-follow-tools { margin-top: 20px; }
  .rc-follow-note { font-size: 11px; }

  .rc-cost-grid { gap: 12px; margin-top: 24px; }
  .rc-cost-col { padding: 20px 18px; border-radius: var(--radius-md); }
  .rc-cost-node { padding: 12px 14px; font-size: 13.5px; border-radius: var(--radius-sm); }
  .rc-cost-arrow { gap: 10px; padding: 8px 0 8px 8px; }
  .rc-cost-arrow-note { font-size: 11.5px; }
  .rc-cost-arrow-note b { font-size: 12.5px; }
  .rc-cost-total { padding-top: 18px; }
  .rc-cost-sum-lead { font-size: 11.5px; margin-bottom: 10px; }
  .rc-cost-sum { gap: 8px; }
  .rc-cost-chip { padding: 9px 14px; font-size: 13px; }
}