@charset "UTF-8";
/* ============================================================
   sokujitsu-fuyouhin / トップページ

   FV（.opening）は元のデザインのままなので、この中では触らない。
   配色は参考画像から起こした色を .rc のトークンとして持ち、
   :root のサイト共通変数へ束ねている（下の対応表を参照）。

   [構成]
     - 参考画像の配色 → サイト共通変数への対応表
     - セクション見出し
     - ボタン（参考：出張買取をもっと見る／お見積り方法一覧へ）
     - 保証バナー（参考：濃色の実績ストリップ）
     - 料金プラン
     - お悩み → 解決（参考：課題パネル → 点線の矢印 → 解決の見出し）
     - 選ばれる理由（参考：「理由01」の円バッジがカード上端にまたがる）
     - 他社との比較（参考：自社列だけを持ち上げて枠で囲む見せ方）
     - 回収実績（参考：中央のスライドだけ手前に出るカルーセル）
     - お客様の声（参考：バイセル。上辺の色帯・アバターは見出しの左・点線区切り）
     - 利用の流れ（現状の見た目を維持。参考の STEP ピルを踏襲）
     - 処分できる不用品（タブ＋参考のアイコンタイル）
     - 注意喚起（参考：枠線カード＋濃色の見出しタブ＋チェックリスト）
     - 許可業者・加盟団体（参考：上部に円形アイコンの切り欠きを持つ実績パネル）
     - 補償体制（参考：ピル型バッジが白カードの上端にまたがる）
     - 対応エリア（参考：水色の角丸パネルに地図・白い凡例カード）
     - 記事セクション（本文はDB側なので、既存クラスのまま整える）
     - よくある質問（現状の見た目を維持）
     - 会社情報・代表挨拶（現状の見た目を維持）
     - TOPへ戻る
     - 旧CSSとの調整
     - レスポンシブ
     - 本文の装飾（参考：太字＋やわらかいマーカー、番号バッジ付きの見出し）
     - お悩み→解決セクションの調整
     - 記事セクション：旧CSSの上書き
     - 追加のご指摘対応
     - 選ばれる理由の調整
     - 記事セクションの目次と「もっと見る」
     - 折りたたみ本体
     - スマホ表示の調整
     - スマホの文字サイズ

   ※ 旧テーマのCSSを打ち消す指定は、詳細度と読み込み順の都合で
     ファイル後半にまとめてある。編集時はそちらも確認すること。
   ============================================================ */
:root {
  --hp-primary: #4c6cb3;
  --hp-primary-light: #e3f2fd;
  --hp-primary-dark: #3a5a95;
  --hp-accent: #ff6f00;
  --hp-text: #2d3436;
  --hp-muted: #636e72;
  --hp-bg: #f4f6f8;
  --hp-line: #e2e8ea;
  --hp-radius: 12px;
  --hp-radius-lg: 24px;
  --hp-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05);
  /* カラフルなアクセントプリセット（要所で使い分けること） */
  --wp--preset--color--pale-pink: #f78da7;
  --wp--preset--color--vivid-red: #cf2e2e;
  --wp--preset--color--luminous-vivid-orange: #ff6900;
  --wp--preset--color--luminous-vivid-amber: #fcb900;
  --wp--preset--color--vivid-green-cyan: #00d084;
  --wp--preset--color--vivid-cyan-blue: #0693e3;
  --wp--preset--color--vivid-purple: #9b51e0;
  /* グラデーション・影 */
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, rgb(252, 185, 0) 0%, rgb(255, 105, 0) 100%);
  --wp--preset--gradient--blush-light-purple: linear-gradient(135deg, rgb(255, 206, 236) 0%, rgb(152, 150, 240) 100%);
  --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 0.1);
}

/* ── 参考画像の配色 → サイト共通変数への対応表 ────────────
   navy   #1F3763 → --hp-primary-dark   見出し・バッジ・比較表の当社列
   blue   #4C6CB3 → --hp-primary        基調の青
   cyan   #29A9E8 → vivid-cyan-blue     帯見出し・下線
   amber  #FCE54D → luminous-vivid-amber 行ラベル・マーカー・番号
   orange #F5A623 → --hp-accent         ボタン・強調
   red    #E23B3B → vivid-red           価格・注意
   green  #2BA84A → vivid-green-cyan    チェックマーク
   cream  #FAF7F0 → --hp-bg             淡い面
   sky    #EAF4FD → --hp-primary-light  淡い青の面
   ──────────────────────────────────────────────────── */
.rc {
  --c-navy: var(--hp-primary-dark);
  --c-blue: var(--hp-primary);
  --c-cyan: var(--wp--preset--color--vivid-cyan-blue);
  --c-amber: var(--wp--preset--color--luminous-vivid-amber);
  --c-orange: var(--hp-accent);
  --c-red: var(--wp--preset--color--vivid-red);
  --c-pink: var(--wp--preset--color--pale-pink);
  --c-purple: var(--wp--preset--color--vivid-purple);
  --c-cream: var(--hp-bg);
  --c-sky: var(--hp-primary-light);
  --c-line: var(--hp-line);
  --c-ink: var(--hp-text);
  --c-muted: var(--hp-muted);
  --c-marker: color-mix(in srgb, var(--hp-accent) 26%, #fff);
  --c-on-amber: color-mix(in srgb, var(--hp-text) 78%, var(--wp--preset--color--luminous-vivid-amber));
  --c-other: color-mix(in srgb, var(--hp-primary) 45%, var(--hp-muted));
  --c-other-dk: color-mix(in srgb, var(--hp-primary-dark) 55%, var(--hp-muted));
  --c-off: color-mix(in srgb, var(--hp-line) 62%, var(--hp-muted));
  --c-red-15: color-mix(in srgb, var(--wp--preset--color--vivid-red) 30%, transparent);
  --c-ink-80: color-mix(in srgb, var(--hp-text) 82%, transparent);
  --c-blue-40: color-mix(in srgb, var(--hp-primary) 40%, transparent);
  /* 余白と角丸のスケール（全セクションで共通） */
  --pad-sec: 96px;
  --r-card: 16px;
  --r-panel: var(--hp-radius-lg);
  color: var(--c-ink);
  background: #fff;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  line-height: 1.85;
  overflow-x: clip;
}

.rc *,
.rc *::before,
.rc *::after {
  box-sizing: border-box;
}

.rc img {
  max-width: 100%;
  height: auto;
  display: block;
}

.rc p {
  margin: 0;
}

.rc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rc__wrap {
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}

.rc__wrap--narrow {
  width: min(880px, calc(100% - 40px));
  margin-inline: auto;
}

.rc__section {
  padding: var(--pad-sec) 0;
  position: relative;
}

.rc__section--cream {
  background: var(--c-cream);
}

.rc__section--sky {
  background: var(--c-sky);
}

.rc__section--tight {
  padding: 64px 0;
}

/* ── セクション見出し ─────────────────────────
   参考画像に合わせ、英字ラベル・下線・透かしは置かず、
   太い和文の一行だけで見出しとする。強調はマーカーで引く。 */
.rc-head {
  position: relative;
  padding-top: 38px;
  text-align: center;
  margin-bottom: 52px;
}

/* 背後に敷く大きな英字（参考画像の透かし） */
.rc-head__ghost {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -52%);
  font-size: clamp(3rem, 1.6rem + 5.6vw, 6rem);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  color: currentColor;
  opacity: .06;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.rc-head__title {
  position: relative;
  margin: 0;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--c-ink);
}

/* 強調はやわらかいマーカー（参考：本文のハイライト） */
.rc-head__title em,
.rc-mark {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .08em;
}

/* 濃い面に載せる白抜きの箱（参考：「そのお悩み、○○で解決！」） */
.rc-box {
  display: inline-block;
  padding: .1em .5em;
  background: var(--c-navy);
  color: #fff;
  font-style: normal;
}

.rc-head__lead {
  position: relative;
  margin-top: 16px;
  color: var(--c-muted);
  font-size: .95rem;
}

/* ── ボタン（参考：出張買取をもっと見る／お見積り方法一覧へ） ── */
.rc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 44px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  background: #fff;
  color: var(--c-navy);
  border: 2px solid var(--c-navy);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.rc-btn:hover {
  background: var(--c-navy);
  color: #fff;
  transform: translateY(-2px);
}

.rc-btn--accent {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}

.rc-btn--accent:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
}

.rc-btn__arrow {
  font-size: .8em;
}

.rc-btn-row {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

/* ============================================================
   保証バナー（参考：濃色の実績ストリップ）
   ============================================================ */
.rc-assure {
  padding: 72px 0;
}

.rc-assure__pics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: center;
  margin-bottom: 40px;
}

.rc-strip {
  display: block;
  position: relative;
  border-radius: var(--r-panel);
  background: var(--c-navy);
  color: #fff;
  text-decoration: none;
  padding: 34px 32px 30px;
  transition: transform .2s ease;
}

.rc-strip:hover {
  transform: translateY(-3px);
}

/* \ …… / のリボン見出し */
.rc-strip__ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-amber);
}

.rc-strip__ribbon::before {
  content: "\\";
}

.rc-strip__ribbon::after {
  content: "/";
}

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

.rc-strip__foot + .rc-strip__foot {
  margin-top: 6px;
}

.rc-strip__label {
  display: block;
  margin-bottom: 4px;
  font-size: .82rem;
  opacity: .85;
}

.rc-strip__value {
  display: block;
  font-size: clamp(1.15rem, .9rem + 1.2vw, 1.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.3;
}

.rc-strip__em {
  color: var(--c-amber);
  font-size: 1.25em;
}

.rc-strip__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 22px auto 0;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--c-orange);
  font-weight: 800;
}

/* ============================================================
   料金プラン
   ============================================================ */
/* 安い3つの理由（参考：大きな番号＋blob背景のイラスト＋赤い0円） */
.rc-why {
  margin-bottom: 72px;
}

.rc-why__title {
  margin: 0 0 44px;
  text-align: center;
  font-size: clamp(1.25rem, .95rem + 1.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.55;
}

.rc-why__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

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

.rc-why__no {
  display: block;
  font-size: 2.6rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--c-amber);
  letter-spacing: .02em;
}

.rc-why__label {
  margin: 6px 0 18px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-navy);
}

.rc-why__figure {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 168px;
}

/* イラストの背後に敷く有機的な形（参考：査定料0円のblob） */
.rc-why__figure::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 168px;
  aspect-ratio: 1;
  background: var(--c-sky);
  border-radius: 50%;
}

.rc-why__illust {
  position: relative;
  max-height: 118px;
  width: auto;
}

.rc-why__price {
  position: relative;
  font-size: 3.4rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--c-red);
}

.rc-why__price small {
  font-size: .34em;
  margin-left: 2px;
}

.rc-why__arrow {
  display: grid;
  place-items: center;
  margin-top: 34px;
  font-size: 1.5rem;
  color: var(--c-blue);
  opacity: .5;
}

/* プランカード（参考：シアンの帯見出しカード） */
.rc-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.rc-plan {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.rc-plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--crisp);
}

.rc-plan__cap {
  padding: 13px 16px;
  background: var(--c-navy);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.55;
}

.rc-plan__save {
  padding: 12px 16px;
  background: var(--c-sky);
  text-align: center;
  line-height: 1.5;
}

.rc-plan__save-pre {
  display: block;
  font-size: .74rem;
  color: var(--c-muted);
}

.rc-plan__save-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-red);
}

.rc-plan__name {
  padding: 18px 16px 4px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
}

.rc-plan__name span {
  font-size: .6em;
  margin-left: 4px;
  color: var(--c-muted);
}

.rc-plan__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20px 26px;
  text-align: center;
}

.rc-plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  margin-top: auto;
}

.rc-plan__tax {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-cream);
  font-size: .66rem;
  color: var(--c-muted);
  font-weight: 700;
}

.rc-plan__amount {
  font-size: 1.95rem;
  font-weight: 900;
  color: var(--c-red);
}

.rc-plan__amount--quote {
  font-size: 1.3rem;
}

.rc-plan__suffix {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--c-red);
}

.rc-plan__regular {
  margin-top: 5px;
  font-size: .76rem;
  color: var(--c-muted);
}

/* 追加パック＋コミコミ（参考：入れ子パネルと丸い「+」コネクタ） */
.rc-option {
  margin-top: 72px;
}

.rc-option__box {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding: 30px clamp(22px, 4vw, 44px);
  border-radius: var(--r-card);
  background: #fff;
  border: 2px solid var(--c-sky);
}

.rc-option__badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}

.rc-option__title {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.4;
}

.rc-option__title em {
  font-style: normal;
  color: var(--c-orange);
}

.rc-option__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-red);
  line-height: 1.1;
}

.rc-option__tax {
  padding: 2px 8px;
  margin-right: 7px;
  border-radius: 4px;
  background: #fff;
  font-size: .58rem;
  vertical-align: middle;
  color: var(--c-muted);
  font-weight: 700;
}

.rc-option__note {
  font-size: .86rem;
  color: var(--c-muted);
}

.rc-option__pic {
  width: 132px;
}

/* 丸い「+」でパネル同士をつなぐ */
.rc-option__plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 18px auto;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 900;
}

.rc-inclusive {
  padding: 36px 32px;
  border-radius: var(--r-card);
  background: var(--c-sky);
}

.rc-inclusive__banner {
  max-width: 660px;
  margin: 0 auto 30px;
  padding: 18px 24px;
  border-radius: var(--hp-radius);
  background: #fff;
  text-align: center;
  border: 2px solid var(--c-navy);
}

.rc-inclusive__pre {
  font-size: .88rem;
  color: var(--c-muted);
}

.rc-inclusive__main {
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.65rem);
  font-weight: 900;
}

.rc-inclusive__main em {
  font-style: normal;
  color: var(--c-navy);
  font-size: 1.1em;
}

.rc-inclusive__lead {
  text-align: center;
  font-weight: 700;
  color: var(--c-muted);
}

.rc-inclusive__zero {
  display: block;
  margin: 2px 0 26px;
  text-align: center;
  font-size: clamp(3rem, 2rem + 4.2vw, 5rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--c-red);
}

/* 参考：4つの基本補償のミニカード（濃紺の見出し＋イラスト） */
.rc-inclusive__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.rc-inclusive__item {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
}

.rc-inclusive__tag {
  display: block;
  padding: 8px 6px;
  background: var(--c-navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

.rc-inclusive__item img {
  height: 66px;
  width: auto;
  margin: 12px auto;
  object-fit: contain;
}

/* ============================================================
   お悩み → 解決（参考：課題パネル → 点線の矢印 → 解決の見出し）
   ============================================================ */
.rc-issue {
  background: none;
}

.rc-issue__head {
  margin-bottom: 44px;
}

/* 課題パネル。イラストは枠の外側にはみ出させる */
.rc-issue__panel {
  position: relative;
  padding: 44px clamp(24px, 5vw, 72px) 40px;
  border-radius: var(--r-panel);
  background: var(--c-sky);
}

.rc-issue__pic {
  position: absolute;
  bottom: -8px;
  width: clamp(96px, 11vw, 140px);
}

.rc-issue__pic--l {
  left: -46px;
}

.rc-issue__pic--r {
  right: -46px;
}

.rc-issue__badge-row {
  text-align: center;
  margin-bottom: 26px;
}

.rc-issue__badge {
  display: inline-block;
  padding: 8px 30px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.rc-issue__list {
  display: grid;
  max-width: 820px;
  margin: 0 auto;
}

.rc-issue__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--c-line);
}

.rc-issue__item:last-child {
  border-bottom: 0;
}

.rc-issue__check {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: .82rem;
}

.rc-issue__copy {
  font-size: clamp(1rem, .92rem + .35vw, 1.18rem);
  font-weight: 700;
  line-height: 1.7;
}

/* 強調はやわらかいマーカー（参考：本文のハイライト） */
.rc-issue__copy em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .06em;
}

/* 点線＋矢印のつなぎ */
.rc-issue__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 34px 0 30px;
}

.rc-issue__link span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
  opacity: .5;
}

.rc-issue__link i {
  font-size: 1.7rem;
  color: var(--c-blue);
  opacity: .6;
  margin-top: -2px;
}

/* 解決の見出し */
.rc .rc-solve__head {
  text-align: center;
  margin: 0 0 64px;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.05rem);
  font-weight: 900;
  line-height: 1.6;
}

/* 「全て解決」は参考のロゼット（ギザギザの円）で囲む */
.rc-solve__seal {
  place-items: center;
  margin: 0 .12em;
  background: var(--c-orange);
  color: #fff;
  font-weight: 900;
  text-align: center;
}

.rc-solve__panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 34px clamp(22px, 4vw, 44px);
  border-radius: var(--r-panel);
  background: var(--c-sky);
}

.rc-solve__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.rc-solve__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 8px;
  background: #ffffff;
  color: var(--c-navy);
  font-size: .92rem;
  font-weight: 800;
}

.rc-solve__tag i {
  color: var(--c-orange);
  font-size: .9em;
}

.rc-solve__mascot {
  width: 150px;
}

/* ============================================================
   選ばれる理由（参考：「理由01」の円バッジがカード上端にまたがる）
   ============================================================ */
.rc-reason {
  background: var(--c-cream);
}

.rc-reason__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 46px 28px;
}

.rc-reason__card {
  position: relative;
  padding: 56px clamp(24px, 4vw, 52px) 40px;
  border-radius: var(--r-panel);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

.rc-reason__no {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
  align-content: center;
}

.rc-reason__no b {
  display: block;
  font-size: 1.7rem;
  font-weight: 900;
}

.rc-reason__title {
  margin: 0 0 18px;
  text-align: center;
  font-size: clamp(1.15rem, .95rem + 1vw, 1.65rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-navy);
}

/* 参考：見出しの下の点線 */
.rc-reason__divider {
  border: 0;
  border-top: 2px dashed var(--c-blue);
  opacity: .45;
  margin: 0 0 28px;
}

.rc-reason__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.rc-reason__label {
  margin-bottom: 12px;
  padding: 5px 18px;
  border-radius: 999px;
  background: var(--c-sky);
  color: var(--c-navy);
  font-size: .78rem;
  font-weight: 800;
}

.rc-reason__figure {
  position: relative;
  display: grid;
  place-items: center;
}

.rc-reason__figure {
  order: -1;
}

.rc-reason__figure::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  background: var(--c-sky);
  border-radius: 50%;
}

.rc-reason__pic {
  position: relative;
  max-height: 132px;
  width: auto;
}

/* ============================================================
   他社との比較（参考：自社列だけを持ち上げて枠で囲む見せ方）
   ============================================================ */
.rc-versus__mascot-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 44px;
}

.rc-versus__mascot {
  width: 82px;
}

.rc-versus__caption {
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
  font-size: .96rem;
}

.rc-versus__scroll {
  overflow-x: auto;
  padding: 4px 0 6px;
}

/* border-collapse: collapse だと角丸の角が欠けるため separate で組む。
   罫線は右下だけに入れて、隣り合うセルで二重にならないようにしている。 */
.rc-versus__table {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.rc-versus__table th,
.rc-versus__table td {
  padding: 16px 14px;
  text-align: center;
  font-size: .93rem;
  background: #fff;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.rc-versus__table tr > *:first-child {
  border-left: 1px solid var(--c-line);
}

.rc-versus__table thead th {
  border-top: 1px solid var(--c-line);
}

/* 左上の空セルは枠も地も持たせない */
.rc-versus__table thead th:first-child {
  background: none;
  border: 0;
}

/* 行の見出し */
.rc-versus__table th.rc-versus__row-label {
  width: 20%;
  background: var(--c-cream);
  color: var(--c-ink);
  font-weight: 800;
}

.rc-versus__table tbody tr:first-child th.rc-versus__row-label {
  border-top-left-radius: 10px;
}

.rc-versus__table tbody tr:last-child th.rc-versus__row-label {
  border-bottom-left-radius: 10px;
}

/* 自社列：濃紺の枠で囲んだ1枚のカードとして見せる */
.rc-versus__table .rc-versus__col-us {
  border-left: 3px solid var(--c-navy);
  border-right: 3px solid var(--c-navy);
  font-weight: 800;
  color: var(--c-navy);
}

.rc-versus__table td.rc-versus__col-us {
  background: none;
}

.rc-versus__table thead .rc-versus__col-us {
  padding: 24px 14px;
  background: var(--c-navy);
  color: #fff;
  border-top: 3px solid var(--c-navy);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.rc-versus__table tbody tr:last-child .rc-versus__col-us {
  border-bottom: 3px solid var(--c-navy);
  border-radius: 0 0 12px 12px;
}

.rc-versus__us-logo {
  display: block;
  font-size: 1.02rem;
  line-height: 1.5;
}

.rc-versus__us-logo i {
  display: block;
  font-size: 1.5rem;
  color: var(--c-amber);
  margin-bottom: 4px;
}

/* 自社セルの頭に印を付けて優位であることを示す */
.rc-versus__table tbody .rc-versus__col-us::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 7px;
  color: var(--c-orange);
  font-size: .9em;
}

/* 他社列は白地・グレー文字で控えめに */
.rc-versus__table .rc-versus__col-other {
  color: var(--c-muted);
}

.rc-versus__table thead .rc-versus__col-other {
  background: var(--c-cream);
  color: var(--c-ink);
  font-weight: 800;
}

.rc-versus__table thead th:nth-child(3) {
  border-top-left-radius: 10px;
}

.rc-versus__table thead th:last-child {
  border-top-right-radius: 10px;
}

.rc-versus__table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}

/* ============================================================
   回収実績（参考：中央のスライドだけ手前に出るカルーセル）
   ============================================================ */
.rc-works {
  background: var(--c-blue);
  color: #fff;
  padding: var(--pad-sec) 0;
}

.rc-works .rc-head__title {
  color: #fff;
}

.rc-works .rc-head__ghost {
  color: #fff;
  opacity: .13;
}

.rc-works .rc-head__lead {
  color: rgba(255, 255, 255, .88);
}

.rc-works__stage {
  position: relative;
  padding: 0 clamp(16px, 5vw, 72px);
}

.rc-works .swiper {
  padding-bottom: 56px;
  overflow: hidden;
}

.rc-works .swiper-slide {
  height: auto;
  width: 450px;
  /* 画面が狭いときは 82vw で頭打ちにして、スライドが見切れないようにする */
  max-width: 82vw;
  transition: opacity .4s ease, transform .4s ease;
}

/* 中央以外は不透明度を落として奥に見せる（中央判定は page-top.php のスクリプト） */
.rc-works .swiper-slide {
  opacity: .42;
  transform: scale(.94);
}

.rc-works .swiper-slide.is-center {
  opacity: 1;
  transform: scale(1);
}

.rc-work {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  color: var(--c-ink);
  box-shadow: var(--wp--preset--shadow--natural);
}

.rc-work__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  background: var(--c-navy);
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
}

.rc-work__head i {
  color: var(--c-amber);
}

.rc-work__shots {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  padding: 16px;
  background: var(--c-cream);
}

.rc-work__shot {
  position: relative;
}

.rc-work__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.rc-work__tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 800;
  color: #fff;
}

.rc-work__tag--before {
  background: var(--c-ink-80);
}

.rc-work__tag--after {
  background: #ff6f00;
}

.rc-work__arrow {
  color: var(--c-blue);
  font-size: 1.1rem;
}

.rc-work__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}

.rc-work__name {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-navy);
  margin-bottom: 12px;
}

.rc-work__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.rc-work__meta-row {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--c-cream);
}

.rc-work__meta-row--full {
  grid-column: 1 / -1;
}

.rc-work__meta-tag {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  color: var(--c-blue);
}

.rc-work__meta-val {
  font-size: .86rem;
  font-weight: 700;
}

.rc-work__comment {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: var(--hp-radius);
  background: var(--c-sky);
  font-size: .84rem;
  line-height: 1.75;
}

/* アイコンは本文の上に重ねず、見出し行に並べる */
.rc-work__comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .76rem;
  font-weight: 800;
  color: var(--c-navy);
}

.rc-work__comment-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

/* 円形の矢印とドット */
.rc-works .swiper-button-prev,
.rc-works .swiper-button-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  box-shadow: var(--hp-shadow);
}

.rc-works .swiper-button-prev::after,
.rc-works .swiper-button-next::after {
  font-size: 1rem;
  font-weight: 900;
}

.rc-works .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .5);
  opacity: 1;
}

.rc-works .swiper-pagination-bullet-active {
  background: var(--c-amber);
}

.rc-works .rc-btn {
  background: #fff;
  border-color: #fff;
  color: var(--c-navy);
}

.rc-works .rc-btn:hover {
  background: var(--c-amber);
  border-color: var(--c-amber);
  color: var(--c-on-amber);
}

/* ============================================================
   お客様の声（参考：バイセル。上辺の色帯・アバターは見出しの左・点線区切り）
   ============================================================ */
.rc-voice__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.rc-voice__card {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 22px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

/* アバターと見出しを横並びに */
.rc-voice__top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.rc-voice__avatar {
  flex-shrink: 0;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-sky);
}

.rc-voice__avatar--woman {
  background: var(--c-pink);
}

.rc-voice__avatar--man {
  background: var(--c-navy);
}

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

.rc-voice__title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--c-ink);
  line-height: 1.55;
}

.rc-voice__body {
  font-size: .92rem;
  line-height: 1.95;
  color: var(--c-ink);
}

.rc-voice__ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 8px;
  font-size: .74rem;
}

.rc-voice__rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc-voice__rating-label {
  color: var(--c-muted);
}

.rc-voice__stars {
  color: var(--wp--preset--color--luminous-vivid-orange);
  letter-spacing: 1px;
}

/* 点線の区切りと所在地のピン */
.rc-voice__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 2px dotted var(--c-line);
  font-size: .78rem;
  color: var(--c-muted);
}

.rc-voice__foot::before {
  content: "";
}

.rc-voice__foot i {
  color: var(--c-navy);
}

/* ============================================================
   利用の流れ（現状の見た目を維持。参考の STEP ピルを踏襲）
   ============================================================ */
.rc-flow {
  background: var(--c-cream);
}

.rc-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.rc-flow__step {
  position: relative;
  padding: 32px 20px 24px;
  border-radius: var(--r-panel);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
  text-align: center;
}

.rc-flow__step:not(:last-child)::after {
  content: "\f054";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  font-size: 1.1rem;
  color: var(--c-blue);
  opacity: .5;
  z-index: 1;
}

.rc-flow__no {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 20px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.rc-flow__pic {
  margin: 0 auto 14px;
}

.rc-flow__title {
  margin: 0 0 6px;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--c-navy);
}

.rc-flow__desc {
  font-size: .85rem;
  color: var(--c-muted);
}

/* ============================================================
   処分できる不用品（タブ＋参考のアイコンタイル）
   ============================================================ */
.rc-items__panel {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

.rc-items__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 24px;
  color: #fff;
}

.rc-items__banner i {
  font-size: 1.5rem;
  color: var(--c-amber);
}

.rc-items__banner h2 {
  margin: 0;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem);
  font-weight: 900;
}

.rc-items__tabs {
  display: flex;
  gap: 8px;
  padding: 16px 16px 0;
  overflow-x: auto;
}

.rc-items__tab {
  flex: 1 0 auto;
  min-width: 118px;
  padding: 13px 18px;
  border-radius: 8px 8px 0 0;
  background: var(--c-cream);
  color: var(--c-muted);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.rc-items__tab:hover {
  background: var(--c-sky);
  color: var(--c-navy);
}

.rc-items__tab.active {
  color: #fff;
}

.rc-items__panes {
  padding: 0 16px 16px;
}

.rc-items__pane {
  display: none;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: center;
  padding: 26px;
  border-radius: 0 0 8px 8px;
}

.rc-items__pane.active {
  display: grid;
}

.rc-items__pane-pic {
  border-radius: var(--hp-radius);
  overflow: hidden;
}

/* 参考：白いアイコンタイルを並べる見せ方 */
.rc-items__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rc-items__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: .88rem;
  font-weight: 700;
}

.rc-items__chip::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .82rem;
}

/* ============================================================
   注意喚起（参考：枠線カード＋濃色の見出しタブ＋チェックリスト）
   共通コンポーネントとして NG品目と悪徳業者の両方で使う
   ============================================================ */
.rc-notice {
  padding: 40px clamp(22px, 4vw, 48px) 36px;
  border-radius: var(--r-panel);
}

.rc-notice__title {
  margin: 0 0 26px;
  font-size: clamp(1.2rem, .95rem + 1.1vw, 1.75rem);
  font-weight: 900;
  line-height: 1.5;
}

.rc-notice__title em {
  font-style: normal;
  display: block;
  color: var(--c-red);
}

.rc-notice__inner {
  position: relative;
  margin-top: 34px;
  padding: 38px clamp(18px, 3vw, 34px) 28px;
  border-radius: var(--hp-radius);
  background: var(--c-cream);
}

/* 見出しタブ（下向きの切り欠き付き） */
.rc-notice__tab {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 26px;
  border-radius: 6px;
  background: var(--c-navy);
  color: #fff;
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
}

.rc-notice__tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--c-navy);
  border-bottom: 0;
}

.rc-notice__body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
}

.rc-notice__pic {
  width: 100%;
}

.rc-notice__list {
  display: grid;
  gap: 12px;
}

.rc-notice__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .94rem;
  font-weight: 700;
}

.rc-notice__row::before {
  content: "\f14a";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  flex-shrink: 0;
  margin-top: .2em;
  color: var(--c-navy);
}

.rc-notice__note {
  margin-top: 22px;
  font-size: .92rem;
  line-height: 1.95;
  color: var(--c-muted);
}

.rc-notice__note + .rc-notice__note {
  margin-top: 14px;
}

.rc-notice__foot {
  margin-top: 8px;
}

/* ============================================================
   許可業者・加盟団体（参考：上部に円形アイコンの切り欠きを持つ実績パネル）
   ============================================================ */
.rc-license {
  background: #fff;
}

.rc .rc-license__lead {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
  color: var(--c-muted);
}

.rc-license__logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.rc-license__logo {
  position: relative;
  padding: 40px 20px 24px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--c-line);
  display: grid;
  place-items: center;
}

.rc-license__logo::before {
  content: "\f559";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-amber);
  font-size: .95rem;
}

.rc-license__logo img {
  max-height: 84px;
  width: auto;
  object-fit: contain;
}

/* ============================================================
   補償体制（参考：ピル型バッジが白カードの上端にまたがる）
   ============================================================ */
.rc-guard__panel {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 28px;
  padding: 52px clamp(24px, 4vw, 52px) 40px;
  border-radius: var(--r-panel);
  background: #fff;
  border: 2px solid var(--c-sky);
  box-shadow: var(--hp-shadow);
}

.rc-guard__ribbon {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 34px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.rc-guard__pic {
  width: 200px;
  border-radius: var(--hp-radius);
  background: var(--c-cream);
  padding: 14px;
}

.rc-guard__title {
  margin: 0 0 14px;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  font-weight: 900;
  color: var(--c-navy);
}

.rc-guard__copy {
  font-size: .94rem;
  line-height: 1.95;
  color: var(--c-muted);
}

/* ============================================================
   対応エリア（参考：水色の角丸パネルに地図・白い凡例カード）
   ============================================================ */
.rc-area__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: center;
}

.rc-area__title {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.05rem);
  font-weight: 900;
  line-height: 1.5;
}

.rc-area__title em {
  font-style: normal;
}

.rc-area__note {
  color: var(--c-muted);
  margin-bottom: 24px;
  font-size: .94rem;
}

.rc-area__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rc-area__tag {
  padding: 8px 18px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

a.rc-area__tag:hover {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
}

/* 地図パーシャル（zone-map-pic は JS のフックなので構造は触らない） */
.rc-area__map {
  position: relative;
  padding: 24px;
  border-radius: var(--r-panel);
  background: var(--c-sky);
}

.rc-area__map .zone-map-outer {
  position: relative;
}

.rc-area__map .zone-map-pic {
  width: 100%;
  height: auto;
}

.rc-area__map .zone-map-mascot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 88px;
}

.rc-area__map .zone-map-remark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #fff;
  font-size: .8rem;
  color: var(--c-muted);
  box-shadow: var(--hp-shadow);
}

.rc-area__map .zone-map-legend {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  margin-left: 10px;
}

.rc-area__map .zone-map-legend--on {
  background: var(--c-blue);
}

.rc-area__map .zone-map-legend--off {
  background: var(--c-off);
}

/* ============================================================
   記事セクション（本文はDB側なので、既存クラスのまま整える）
   ============================================================ */
.rc-guide {
  background: var(--c-cream);
}

.rc .rc-guide .guide-article-body {
  display: grid;
  gap: 28px;
}

.rc .rc-guide .guide-sec,
.rc .rc-guide .guide-subsec {
  padding: 34px clamp(20px, 3vw, 40px);
  border-radius: var(--r-panel);
  background: #fff;
  box-shadow: var(--hp-shadow);
}

.rc .rc-guide .guide-sec-h3 {
  background: none;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  border-radius: 0;
  margin: 0 0 20px;
  padding: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-navy);
  line-height: 1.55;
}

.rc .rc-guide .guide-sec-body,
.rc .rc-guide .guide-subsec-body,
.rc .rc-guide .normal-copy {
  font-size: .94rem;
  line-height: 1.95;
  color: var(--c-muted);
}

.rc .rc-guide .guide-subsec-h4 {
  background: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--c-ink);
}

.rc .rc-guide .guide-subsec-h4::before {
  content: "";
  position: static;
  flex-shrink: 0;
  width: 5px;
  height: 1.2em;
  margin-top: .2em;
  border-radius: 3px;
  background: var(--c-orange);
}

.rc .rc-guide .guide-subsec-panel {
  margin-top: 20px;
  border-radius: var(--hp-radius);
  overflow: hidden;
  border: 1px solid var(--c-line);
}

.rc .rc-guide .guide-subsec-panel-top {
  padding: 12px 18px;
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
}

.rc .rc-guide .guide-subsec-panel-body {
  padding: 20px;
  background: #fff;
  max-width: 100%;
}

.rc .rc-guide .guide-points {
  display: grid;
}

.rc .rc-guide .guide-points li {
  display: flex;
  align-items: flex-start;
  font-size: .93rem;
  line-height: 1.85;
}

.rc .rc-guide .guide-points li::before {
  margin-top: .22em;
}

.rc .rc-guide .guide-versus-outer {
  overflow-x: auto;
  margin-top: 20px;
  max-width: 100%;
}

.rc .rc-guide .guide-cmp-grid {
  width: 100%;
  min-width: 520px;
  border-collapse: separate;
  border-spacing: 6px;
}

.rc .rc-guide .guide-cmp-grid th,
.rc .rc-guide .guide-cmp-grid td {
  padding: 13px 12px;
  font-size: .88rem;
  text-align: center;
  border-radius: 6px;
}

.rc .rc-guide .guide-cmp-grid thead th {
  font-weight: 800;
}

.rc .rc-guide .guide-cmp-th-private {
  background: var(--c-amber);
  color: var(--c-on-amber);
  font-weight: 800;
}

.rc .rc-guide .guide-cmp-th-public {
  background: var(--c-cream);
  font-weight: 800;
}

.rc .rc-guide .guide-cmp-row {
  background: #fff;
}

.rc .rc-guide .guide-cmp-cell {
  background: #fff;
}

.rc .rc-guide .guide-cmp-bg-symbol {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--c-blue);
}

.rc .rc-guide .guide-cmp-bg-symbol[data-rating="2"],
.rc .rc-guide .guide-cmp-bg-symbol[data-rating="1"] {
  color: var(--wp--preset--color--luminous-vivid-orange);
}

.rc .rc-guide .guide-cmp-note {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--c-muted);
}

.rc .rc-guide .wave-shape-upper,
.rc .rc-guide .wave-shape-lower {
  display: none;
}

/* ============================================================
   よくある質問（現状の見た目を維持）
   ============================================================ */
.rc-faq__list {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

.rc-faq__row {
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

.rc-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-ink);
  transition: background-color .2s ease;
}

.rc-faq__q:hover {
  background: var(--c-sky);
}

.rc-faq__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
}

.rc-faq__q-copy {
  flex: 1;
  line-height: 1.6;
}

.rc-faq__toggle {
  flex-shrink: 0;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--c-blue);
  transition: transform .3s ease;
}

.rc-faq__a {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  background: var(--c-cream);
  transition: max-height .35s ease, padding .35s ease;
}

.rc-faq__a-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-orange);
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
}

.rc-faq__a p {
  font-size: .92rem;
  line-height: 1.9;
  color: var(--c-muted);
}

.rc-faq__row.active .rc-faq__a {
  max-height: 40rem;
  padding: 18px 20px;
}

.rc-faq__row.active .rc-faq__toggle {
  transform: rotate(45deg);
}

/* ============================================================
   会社情報・代表挨拶（現状の見た目を維持）
   ============================================================ */
.rc-company {
  background: var(--c-cream);
}

.rc-company__table-wrap {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

.rc-company__caption {
  padding: 16px 24px;
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
}

.rc-company__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.rc-company__table th,
.rc-company__table td {
  padding: 15px 24px;
  font-size: .92rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}

.rc-company__table th {
  width: 190px;
  background: var(--c-cream);
  font-weight: 800;
  color: var(--c-navy);
}

.rc-company__table tr:last-child th,
.rc-company__table tr:last-child td {
  border-bottom: 0;
}

.rc-greeting {
  margin-top: 72px;
}

.rc-greeting__panel {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--hp-shadow);
}

.rc-greeting__figure {
  position: relative;
}

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

.rc-greeting__cursive {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.35rem;
  color: rgba(255, 255, 255, .85);
}

.rc-greeting__body {
  padding: 38px clamp(24px, 3vw, 44px);
  background: var(--c-navy);
  color: #fff;
}

.rc-greeting__title {
  display: block;
  margin-bottom: 16px;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem);
  font-weight: 900;
  line-height: 1.5;
}

.rc-greeting__copy {
  font-size: .92rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .9);
}

/* ── TOPへ戻る ───────────────────────── */
.rc-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--c-navy);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--wp--preset--shadow--natural);
  transition: background-color .2s ease, transform .2s ease;
  z-index: 9999;
}

.rc-totop:hover {
  background: var(--c-blue);
  transform: translateY(-3px);
}

.rc-totop.show {
  display: grid;
}

/* ============================================================
   旧CSSとの調整
   ============================================================ */
.rc-flow#step {
  background: var(--c-cream);
}

#step .rc-flow__title {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--c-navy);
}

#step .rc-flow__desc {
  font-size: .85rem;
  line-height: 1.8;
  color: var(--c-muted);
}

#step .rc-head__title {
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.45rem);
  color: var(--c-ink);
}

.rc-assure#trouble-block {
  padding: 72px 0;
}

/* CTAパーシャルは Bootstrap の .row（左右 -12px）を使うのでガターを戻す */
.rc .container {
  padding-left: 12px;
  padding-right: 12px;
}

/* グリッドの子は既定の min-width:auto で中身の最大幅まで広がるため 0 に戻す */
.rc .rc-guide .guide-article-body > *,
.rc .rc-guide .guide-points > li,
.rc-voice__grid > *,
.rc-work__meta > *,
.rc-reason__body > *,
.rc-plans > *,
.rc-flow__grid > *,
.rc-inclusive__grid > *,
.rc-area__inner > *,
.rc-greeting__panel > *,
.rc-notice__body > *,
.rc-license__logos > *,
.rc-items__pane > *,
.rc-why__list > * {
  min-width: 0;
}

/* .rc img の height:auto より後に効かせる必要がある画像の高さ指定 */
.rc .rc-plan__pic {
  height: 155px;
  object-fit: contain;
  margin-bottom: 14px;
}

.rc .rc-flow__pic {
  height: 96px;
  object-fit: contain;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1024px) {
  .rc { --pad-sec: 76px;
  }
  .rc-plans,
  .rc-license__logos { grid-template-columns: repeat(2, 1fr);
  }
  .rc-flow__grid { grid-template-columns: repeat(2, 1fr);
  }
  .rc-flow__step: nth-child(2n)::after { display: none;
  }
  .rc-inclusive__grid { grid-template-columns: repeat(2, 1fr);
  };
}

@media (max-width: 768px) {
  .rc {
    --pad-sec: 58px;
  }

  .rc__wrap,
  .rc__wrap--narrow {
    width: calc(100% - 32px);
  }

  .rc__section--tight {
    padding: 44px 0;
  }

  .rc-head {
    margin-bottom: 36px;
  }

  .rc-assure,
  .rc-assure#trouble-block {
    padding: 48px 0;
  }

  .rc-assure__pics {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }

  .rc-strip {
    padding: 26px 18px 24px;
  }

  .rc-why__list {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .rc-plans {
    grid-template-columns: 1fr;
  }

  .rc-option__box {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rc-option__pic {
    width: 120px;
    margin: 0 auto;
  }

  .rc-inclusive {
    padding: 26px 16px;
  }

  .rc-inclusive__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rc-issue__panel {
    padding: 36px 18px 30px;
  }

  .rc-issue__pic {
    width: 82px;
    bottom: -6px;
  }

  .rc-issue__pic--l {
    left: -8px;
  }

  .rc-issue__pic--r {
    right: -8px;
  }

  .rc-issue__list {
    padding-bottom: 68px;
  }

  .rc-issue__copy {
    font-size: .92rem;
  }

  .rc-solve__panel {
    grid-template-columns: 1fr;
    padding: 26px 18px;
    gap: 20px;
  }

  .rc-solve__mascot {
    width: 120px;
    margin: 0 auto;
  }

  .rc-solve__tag {
    font-size: .84rem;
    padding: 9px 14px;
  }

  .rc-solve__head {
    margin-bottom: 26px;
  }

  .rc-reason__list {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .rc-reason__card {
    padding: 52px 20px 30px;
  }

  .rc-reason__no {
    width: 76px;
    height: 76px;
    top: -28px;
  }

  .rc-reason__no b {
    font-size: 1.45rem;
  }

  .rc-reason__figure {
    max-width: 230px;
    margin: 0 auto;
  }

  .rc-versus__mascot-row {
    flex-direction: column;
    gap: 12px;
  }

  .rc-versus__table thead .rc-versus__col-us {
    transform: none;
    border-radius: 12px 12px 0 0;
  }

  .rc-versus__scroll {
    padding-top: 4px;
  }

  .rc-works__stage {
    padding: 0 12px;
  }

  .rc-works .swiper-button-prev,
  .rc-works .swiper-button-next {
    display: none;
  }

  .rc-work__meta {
    grid-template-columns: 1fr;
  }

  .rc-voice__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .rc-voice__card {
    padding: 22px 18px 18px;
  }

  .rc-voice__avatar {
    width: 54px;
    height: 54px;
  }

  .rc-voice__title {
    font-size: 1rem;
  }

  .rc-flow__grid {
    grid-template-columns: 1fr;
  }

  .rc-flow__step::after {
    display: none !important;
  }

  .rc-items__tabs {
    padding: 12px 12px 0;
  }

  .rc-items__tab {
    min-width: 104px;
    padding: 11px 14px;
    font-size: .9rem;
  }

  .rc-items__panes {
    padding: 0 12px 12px;
  }

  .rc-items__pane {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }

  .rc-notice {
    padding: 30px 18px 28px;
  }

  .rc-notice__body {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .rc-notice__pic {
    max-width: 180px;
    margin: 0 auto;
  }

  .rc-notice__tab {
    font-size: .8rem;
    padding: 8px 18px;
    white-space: normal;
    text-align: center;
    width: max-content;
    max-width: calc(100% - 24px);
  }

  .rc-license__logos {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .rc-guard__panel {
    grid-template-columns: 1fr;
    padding: 48px 20px 32px;
    gap: 22px;
  }

  .rc-guard__pic {
    margin: 0 auto;
  }

  .rc-guard__ribbon {
    font-size: .88rem;
    padding: 8px 22px;
  }

  .rc-area__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rc-area__map {
    padding: 16px;
  }

  .rc-area__map .zone-map-mascot {
    width: 64px;
  }

  .rc-guide .guide-sec,
  .rc-guide .guide-subsec {
    padding: 24px 18px;
  }

  .rc-company__table th,
  .rc-company__table td {
    display: block;
    width: auto;
    padding: 12px 18px;
  }

  .rc-company__table th {
    border-bottom: 0;
    padding-bottom: 4px;
  }

  .rc-greeting {
    margin-top: 48px;
  }

  .rc-greeting__panel {
    grid-template-columns: 1fr;
  }

  .rc-greeting__figure img {
    max-height: 300px;
  }

  .rc-greeting__body {
    padding: 28px 20px;
  }

  .rc-btn {
    min-height: 54px;
    padding: 0 30px;
    font-size: .95rem;
  }

  .rc-btn-row {
    margin-top: 34px;
  }

  .rc-totop {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px;
  }

  .rc .rc-plan__pic {
    height: 132px;
  }

}

@media (max-width: 480px) {
  .rc-inclusive__item img {
    margin: 8px auto;
    height: 48px;
  }

  .rc-inclusive__tag {
    font-size: .72rem;
    padding: 7px 4px;
  }

  .rc-faq__q {
    padding: 14px 16px;
    font-size: .94rem;
    gap: 10px;
  }

  .rc-faq__row.active .rc-faq__a {
    padding: 14px 16px;
  }

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

}

@media (prefers-reduced-motion: reduce) {
  .rc *,
  .rc *::before,
  .rc *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

}

/* 解決パネル内の「\ サポート一覧 /」 */
.rc-solve__ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: .88rem;
  font-weight: 800;
  color: var(--c-red);
}

.rc-solve__ribbon::before {
  content: "\\";
}

.rc-solve__ribbon::after {
  content: "/";
}

/* 注意喚起セクションの細部 */
.rc-notice__x {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: .4em;
  border-radius: 50%;
  background: var(--c-red);
  color: #fff;
  font-size: .8em;
  vertical-align: middle;
}

.rc-notice__mascot {
  width: 110px;
  margin-top: 14px;
}

.rc-notice__body--wide {
  grid-template-columns: 200px 1fr;
}

.rc-notice__foot {
  font-size: .92rem;
  color: var(--c-muted);
  font-weight: 700;
}

/* .rc p { margin:0 } に負けるため、この2つは .rc を含めて指定する */
.rc .rc-option__plus {
  margin: 20px auto;
}

.rc .rc-notice__foot {
  margin-bottom: 10px;
}

/* 処分できない不用品：画像と説明のバランスを取る */
.rc-notice__inner .rc-notice__body {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.rc-notice__inner .rc-notice__pic {
  border-radius: var(--hp-radius);
}

.rc-notice__inner .rc-notice__mascot {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   本文の装飾（参考：太字＋やわらかいマーカー、番号バッジ付きの見出し）
   ============================================================ */
.rc .rc-guide .guide-sec-body strong,
.rc .rc-guide .guide-subsec-body strong,
.rc .rc-guide .normal-copy strong,
.rc-notice__note strong,
.rc-reason__desc em,
.rc-guard__copy strong {
  font-style: normal;
  font-weight: 800;
  color: var(--c-ink);
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .06em;
}

/* 記事の見出しに連番のバッジを付ける（参考：星形の番号） */
.rc .rc-guide .guide-article-body {
  counter-reset: rc-gsec;
}

.rc .rc-guide .guide-sec-h3 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.rc .rc-guide .guide-sec-h3::before {
  counter-increment: rc-gsec;
  content: counter(rc-gsec);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--c-navy);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
}

/* 箇条書きは細い罫線で区切る（参考：目次のような見せ方） */
.rc .rc-guide .guide-points {
  gap: 0;
}

/* ── お悩み→解決セクションの調整 ───────────────── */
.rc-issue__head {
  text-align: center;
}

/* キャラクターがリストに掛からないよう内側に余白を取る */
/* 左右のキャラクターにチェックが掛からないよう、リストの左右に余白を取る */
.rc .rc-issue__list {
  padding: 0 clamp(0px, 7vw, 104px);
}

/* 「全て解決」は小さすぎたのでピル型にして一行で読ませる */
.rc-solve__seal {
  display: inline-block;
  width: auto;
  height: auto;
  padding: .18em .7em;
  border-radius: 999px;
  font-size: .82em;
  line-height: 1.4;
  vertical-align: baseline;
}

.rc-solve__col {
  min-width: 0;
}

/* ── 記事セクション：旧CSSの上書き ─────────────────
   箇条書きの印が position:absolute で文字に重なっていたため、
   通常フローに戻してチェックマークに置き換える。 */
.rc .rc-guide .guide-points li {
  position: relative;
  padding-left: 0;
}

.rc .rc-guide .guide-points li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: static;
  flex-shrink: 0;
  width: auto;
  height: auto;
  margin: .22em 0 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-navy);
  font-size: .85rem;
  line-height: 1;
}

/* 比較表の見出しセルは旧CSSが !important で色を持っている */
.rc .rc-guide .guide-cmp-grid thead th {
  background: var(--c-navy) !important;
  color: #fff !important;
}

.rc .rc-guide .guide-cmp-grid thead th.guide-cmp-th-private {
  background: var(--c-navy) !important;
  color: #fff !important;
}

.rc .rc-guide .guide-cmp-grid thead th.guide-cmp-th-public {
  background: var(--c-navy) !important;
  color: #fff !important;
}

/* ── 追加のご指摘対応 ─────────────────────────── */
/* 解決パネルの下にも余白を取る */
.rc-solve__panel {
  margin-bottom: 8px;
}

/* 処分できる不用品：帯・タブ・パネルの青を1系統に揃える */
.rc-items__banner {
  background: var(--c-navy);
}

.rc-items__tab.active {
  background: var(--c-navy);
}

.rc-items__pane {
  background: var(--c-sky);
}

.rc-items__chip::before {
  color: var(--c-navy);
}

/* 記事の箇条書き：左右と行間の余白を整える */
.rc .rc-guide .guide-points {
  margin-top: 6px;
}

.rc .rc-guide .guide-points li {
  padding: 14px 18px;
  gap: 12px;
  background: var(--c-cream);
  border-bottom: 2px solid #fff;
  border-radius: 6px;
}

.rc .rc-guide .guide-points li:last-child {
  border-bottom: 0;
}

/* 記事の大見出しを、他セクションの見出しと同じ組み方に揃える */
.rc .rc-guide .guide-article-top {
  text-align: center;
  margin-bottom: 52px;
}

.rc .rc-guide .guide-article-intro {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--c-orange);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
}

.rc .rc-guide .guide-article-h2 {
  display: block;
  margin: 0;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--c-ink);
}

/* ── 選ばれる理由の調整 ─────────────────────────
   正円が上の点線に掛かっていたので小さくし、余白を確保。
   説明文は少し大きくして中央に寄せる。 */
.rc-reason__figure {
  margin-top: 10px;
  min-height: 156px;
}

.rc-reason__figure::before {
  width: 138px;
}

.rc .rc-reason__pic {
  max-height: 108px;
}

.rc-reason__label {
  display: block;
  width: fit-content;
  margin: 0 auto 14px;
}

.rc-reason__desc {
  font-size: 1rem;
  line-height: 1.9;
  text-align: center;
  color: var(--c-ink);
}

/* ============================================================
   記事セクションの目次と「もっと見る」
   JavaScript は使わず、チェックボックスと CSS だけで開閉する。
   折りたたんでいる間も本文は DOM に残る（display:none にしない）ので、
   クローラからは常に全文が読める。
   ============================================================ */
/* 目次は、アイコン付きのカードを並べる形にする */
.rc-toc {
  max-width: 100%;
  margin: 0 auto 48px;
}

.rc .rc-toc__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rc-toc__item {
  border: 0;
}

.rc-toc__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 26px 18px 22px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--c-line);
  color: var(--c-ink);
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.rc-toc__link:hover {
  transform: translateY(-3px);
  border-color: var(--c-navy);
  box-shadow: var(--hp-shadow);
  text-decoration: none;
}

.rc-toc__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--c-sky);
  overflow: hidden;
}

.rc .rc-toc__icon img {
  width: 74%;
  height: 74%;
  object-fit: contain;
}

.rc-toc__no {
  font-size: .78rem;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .06em;
  color: var(--c-orange);
}

.rc-toc__text {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.6;
}

/* 矢印で行き先を示す */
.rc-toc__link::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-top: auto;
  padding-top: 10px;
  font-size: .7rem;
  color: var(--c-navy);
  opacity: .5;
}

/* 見出しへ飛んだとき、上に少し余白を残す */
.rc .rc-guide .guide-sec {
  scroll-margin-top: 24px;
}

/* ── 折りたたみ本体 ───────────────────────── */
.rc-fold {
  position: relative;
}

/* チェックボックスは見せないが、キーボード操作のため画面外には出さない */
.rc-fold__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rc-fold__body {
  position: relative;
  max-height: 15.5em;
  overflow: hidden;
  transition: max-height .35s ease;
}

/* 折りたたみ中は下端をぼかして、続きがあることを示す */
.rc-fold__body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.5em;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 78%);
  pointer-events: none;
}

.rc-fold__toggle:checked ~ .rc-fold__body {
  max-height: 400em;
}

.rc-fold__toggle:checked ~ .rc-fold__body::after {
  opacity: 0;
}

.rc-fold__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 11px 30px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--c-navy);
  color: var(--c-navy);
  font-size: .92rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: background-color .2s ease, color .2s ease;
}

.rc-fold__btn::after {
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .78em;
  transition: transform .3s ease;
}

.rc-fold__btn:hover {
  background: var(--c-navy);
  color: #fff;
}

.rc-fold__less {
  display: none;
}

.rc-fold__toggle:checked ~ .rc-fold__btn .rc-fold__more {
  display: none;
}

.rc-fold__toggle:checked ~ .rc-fold__btn .rc-fold__less {
  display: inline;
}

.rc-fold__toggle:checked ~ .rc-fold__btn::after {
  transform: rotate(45deg);
}

/* キーボードで選んでいるときに分かるようにする */
.rc-fold__toggle:focus-visible ~ .rc-fold__btn {
  outline: 3px solid var(--c-orange);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .rc-toc {
    margin-bottom: 32px;
  }

  .rc .rc-toc__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rc-toc__link {
    padding: 20px 12px 18px;
    gap: 8px;
  }

  .rc-toc__icon {
    width: 58px;
    height: 58px;
  }

  .rc-toc__text {
    font-size: .88rem;
  }

  .rc-fold__body {
    max-height: 14em;
  }

}

/* ============================================================
   スマホ表示の調整
   ============================================================ */
@media (max-width: 768px) {
  /* お悩み：チェックとキャラクターが重なっていたので、
     リストの下にキャラクター分の余白を確保し、文字を絵の上に置く */
  .rc-issue__panel { padding-bottom: 128px;
  }
  .rc .rc-issue__list { position: relative;
  padding: 0;
  }
  .rc-issue__item { padding: 14px 2px;
  }
  .rc-issue__check { width: 26px;
  height: 26px;
  font-size: .74rem;
  }
  .rc-issue__pic { width: 74px;
  bottom: 8px;
  z-index: 1;
  }
  .rc-issue__pic--l { left: 10px;
  }
  .rc-issue__pic--r { right: 10px;
  /* 安い3つの理由：スマホでも3カラム。幅が足りなくなったら2つ→1つに落とす */
  }

  
  .rc-why__list {
    grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
  }
  .rc-why__no { font-size: 1.9rem;
  }
  .rc-why__label { font-size: .95rem;
  }
  .rc-why__figure { min-height: 104px;
  }
  .rc-why__figure: :before { width: 92px;
  }
  .rc .rc-why__illust { height: 52px;
  max-width: 78%;
  }
  .rc-why__price { font-size: 2rem;
  /* 悪徳業者への注意：見出しの下に本文、その下に画像の順にする */
  }

  
  .rc-notice__body--wide { display: flex;
  flex-direction: column;
  }
  .rc-notice__body--wide > div { order: 1;
  }
  .rc-notice__body--wide .rc-notice__pic { order: 2;
  width: 160px;
  margin: 6px auto 0;
  }
  .rc-notice__note { font-size: .9rem;
  line-height: 1.9;
  };
}

@media (max-width: 359px) {
  .rc-why__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .rc-why__figure::before {
    width: 104px;
  }

  .rc .rc-why__illust {
    height: 58px;
  }

}

@media (max-width: 299px) {
  .rc-why__list {
    grid-template-columns: 1fr;
  }

}

/* 画面幅に余裕がないときは、キャラクターを枠の外に出さない
   （外に出すと .rc の overflow-x: clip で切れてしまう） */
@media (max-width: 1180px) {
  .rc-issue__pic--l { left: 0;
  }
  .rc-issue__pic--r { right: 0;
  };
}

/* ============================================================
   スマホの文字サイズ
   10〜13pxの小さすぎる文字を、3段階のスケールに揃えて底上げする。
     12px … 補助的なラベル（税込・Before/After・項目名）
     13px … 小見出し・注記・番号
     14px … 説明文・値
   ============================================================ */
@media (max-width: 768px) {
  .rc-plan__tax,
  .rc-option__tax,
  .rc-work__tag,
  .rc-work__meta-tag { font-size: .75rem;
  }

  .rc-inclusive__tag,
  .rc-plan__save-pre,
  .rc-plan__regular,
  .rc-voice__rating-label,
  .rc-voice__ratings,
  .rc-voice__foot,
  .rc-reason__label,
  .rc-toc__no,
  .rc-flow__no,
  .rc-notice__tab,
  .rc-trust__label,
  .rc-guide .guide-article-intro,
  .rc-guide .guide-cmp-note { font-size: .8125rem;
  }

  .rc-strip__label,
  .rc-plan__cap,
  .rc-items__tab,
  .rc-solve__ribbon,
  .rc-notice__foot,
  .rc-area__tag { font-size: .85rem;
  }

  .rc-flow__desc,
  .rc-work__meta-val,
  .rc-reason__desc,
  .rc-head__lead,
  .rc-license__lead,
  .rc-guard__copy,
  .rc-notice__note,
  .rc-voice__body,
  .rc-area__note,
  .rc-option__note,
  .rc-guide .guide-sec-body,
  .rc-guide .guide-subsec-body,
  .rc-guide .normal-copy,
  .rc-guide .guide-points li,
  .rc-faq__a p { font-size: .875rem;
  /* 本文まわりの行間も合わせて少しゆるめる */
  }

  
  .rc-guide .guide-sec-body,
  .rc-guide .guide-subsec-body,
  .rc-guide .normal-copy,
  .rc-notice__note,
  .rc-voice__body { line-height: 1.9;
  };
}

/* style.css の li { padding: .5em .5em .5em 0 } が目次カードにも効いていたので、
   目次の li だけ打ち消す。コミコミなど他の li はそのまま。 */
.rc .rc-toc__item {
  padding: 0;
}

/* コミコミ一覧のタイルは、style.css の li { padding: .5em .5em .5em 0 } を効かせない */
.rc .rc-inclusive__item {
  padding: 0;
}

/* ------------------------------------------------------------
   Web割バナーと保証バナー
   どちらも PC / SP で画像を出し分ける。
   上流に .rc img { display: block } があるため、
   打ち消すには要素セレクタを含めて詳細度を上げる必要がある。
   角丸は他のパネルと同じ --r-panel に合わせる。
   ------------------------------------------------------------ */
.rc-strip--image {
  padding: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}

.rc img.rc-strip__pic {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel);
}

.rc img.rc-strip__pic--sp { display: none; }

.rc-assure__pics--single {
  display: block;
  grid-template-columns: none;
}

.rc img.rc-assure__pic {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.rc img.rc-assure__pic--sp { display: none; }

@media (max-width: 720px) {
  .rc-strip--image { padding: 0; }
  .rc img.rc-strip__pic--pc { display: none; }
  .rc img.rc-strip__pic--sp { display: block; }
  .rc img.rc-assure__pic--pc { display: none; }
  .rc img.rc-assure__pic--sp { display: block; }
}