@charset "UTF-8";
/* ============================================================
   sokujitsu-fuyouhin / 下層ページ

   トップで組んだ体系（rich-top.css の rc- 系）を、
   下層ページの既存マークアップに当てるための対応表。
   マークアップは触らず、クラス名の対応だけでトーンを揃えている。

   [構成]
     - 面と余白
     - 見出し（トップと同じ：背後に英字の透かし＋太い和文）
     - ボタン
     - 利用の流れ（トップの STEP カードに合わせる）
     - 実績のタイル（回収件数など）
     - 料金プラン（トップのプランカードに合わせる）
     - よくある質問（トップの開閉と同じ見た目）
     - お客様の声（トップのカードと同じ構造・見た目）
     - 選ばれる理由（下層はカード型で揃える）
     - エリアのチップ
     - 回収実績カード（トップの事例カードと同じ見た目）
     - 表（自治体一覧・会社概要など）
     - レスポンシブ
     - 旧CSSとの調整
     - 下層ページの記事ブロック
     - お悩み → 解決（エリアページ。トップと同じ見せ方に揃える）
     - 「安い3つの理由」（料金ページ。トップと同じ見せ方に揃える）
     - お客様の声 一覧ページのヒーロー
     - フッター（全ページ共通。淡い緑をベース色に戻す）
     - 表（hp-grid / versus-grid はいずれも table）
     - スマホの文字サイズの底上げ（下層の取りこぼし分）
     - 追加の調整
     - エリアページの細部（トップに合わせる）
     - 追加の調整
     - 追加パック・コミコミ（トップと同じ組み方）
     - さらに調整
     - CTAバナーの電話番号

   ※ 旧テーマのCSSを打ち消す指定は、詳細度と読み込み順の都合で
     ファイル後半にまとめてある。編集時はそちらも確認すること。
   ============================================================ */
/* ── 面と余白 ───────────────────────────── */
.rc .block,
.rc .hp-sec {
  padding: var(--pad-sec) 0;
  position: relative;
}

.rc .hp-sec + .hp-sec {
  padding-top: 24px;
}

.rc .block.bg-gray,
.rc .hp-sec:nth-of-type(even) {
  background: var(--c-cream);
}

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

/* 装飾の波は使わない */
.rc .wave-shape-upper,
.rc .wave-shape-lower {
  display: none;
}

/* ── 見出し（トップと同じ：背後に英字の透かし＋太い和文） ── */
.rc .block-top {
  position: relative;
  /* 透かしの英字を内側に収めるため、上に余白を取る */
  padding-top: 52px;
  text-align: center;
  margin-bottom: 52px;
}

.rc .block-en {
  position: absolute;
  left: 50%;
  top: 0;
  /* 上のセクションにはみ出さないよう、見出しブロックの中に収める */
  transform: translateX(-50%);
  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 .block-head {
  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);
  background: none;
  padding: 0;
  border: 0;
}

.rc .block-head span,
.rc .block-head em {
  font-style: normal;
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .08em;
  color: inherit;
}

.rc .hp-sec__intro,
.rc .guide-intro-copy {
  position: relative;
  max-width: 820px;
  margin: 0 auto 40px;
  text-align: center;
  color: var(--c-muted);
  font-size: .95rem;
  line-height: 1.95;
}

.rc .hp-sec__extra {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.rc .hp-remark {
  margin-top: 16px;
  font-size: .82rem;
  color: var(--c-muted);
}

/* ── ボタン ─────────────────────────────── */
.rc .hp-btn,
.rc .btn.btn-white {
  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) !important;
  border: 2px solid var(--c-navy);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

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

.rc .util-copy-center {
  display: flex;
  justify-content: center;
}

/* ── 利用の流れ（トップの STEP カードに合わせる） ───────── */
.rc .step-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.rc .step-box {
  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 .step-box: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 .step-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 .step-pic {
  height: 96px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 14px;
}

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

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

/* ── 実績のタイル（回収件数など） ─────────────────── */
.rc .hp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
}

.rc .hp-tile {
  position: relative;
  padding: 30px 18px 24px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
  text-align: center;
}

.rc .hp-tile__k {
  display: block;
  font-size: .85rem;
  font-weight: 800;
  color: var(--c-muted);
  margin-bottom: 6px;
}

.rc .hp-tile__v {
  font-size: 2.2rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-navy);
  line-height: 1.1;
}

.rc .hp-tile__u {
  font-size: .8rem;
  font-weight: 800;
  color: var(--c-muted);
  margin-left: 3px;
}

.rc .hp-tile__n {
  font-size: .78rem;
  color: var(--c-muted);
}

.rc .hp-no {
  display: inline-block;
  margin-bottom: 10px;
  font-size: .9rem;
  font-weight: 900;
  font-style: italic;
  color: var(--c-orange);
  letter-spacing: .04em;
}

/* ── 料金プラン（トップのプランカードに合わせる） ───────── */
.rc .planlist-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.rc .sizepack-set-block {
  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 .sizepack-set-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--crisp);
}

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

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

.rc .sizepack-set-discount-copy {
  display: block;
  font-size: .74rem;
  color: var(--c-muted);
}

.rc .sizepack-set-discount-plan {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--c-red);
  background: none;
  padding: 0;
}

.rc .sizepack-set-head {
  padding: 18px 16px 4px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--c-ink);
}

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

.rc .sizepack-set-white-bg {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 20px 26px;
  text-align: center;
  background: #fff;
}

.rc .sizepack-set-cart-mark {
  height: 155px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 14px;
}

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

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

.rc .sizepack-set-plan-core {
  font-size: 1.95rem;
  font-weight: 900;
  color: var(--c-red);
}

.rc .sizepack-set-plan-suffix {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--c-red);
}

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

/* ── よくある質問（トップの開閉と同じ見た目） ────────── */
.rc .qa-set {
  display: grid;
  gap: 14px;
  max-width: 900px;
  margin: 0 auto;
}

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

.rc .qa-question {
  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 .qa-question:hover {
  background: var(--c-sky);
}

.rc .qa-q-mark,
.rc .qa-a-mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: .88rem;
  font-weight: 900;
}

.rc .qa-q-mark {
  background: var(--c-navy) !important;
}

.rc .qa-a-mark {
  background: var(--c-orange) !important;
}

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

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

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

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

.rc .qa-row.active .qa-answer {
  padding: 18px 20px;
}

.rc .qa-row.active .qa-toggle {
  transform: rotate(45deg);
}

/* ── お客様の声（トップのカードと同じ構造・見た目） ────── */
.rc .feedback-set {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.rc .feedback-box {
  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 .feedback-top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

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

.rc .feedback-mark-pic.mark-bg-pink {
  background: var(--c-pink) !important;
}

.rc .feedback-mark-pic.mark-bg-blue {
  background: var(--c-navy) !important;
}

.rc .feedback-mark-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc .feedback-head {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 900;
  color: var(--c-ink) !important;
  line-height: 1.55;
  background: none;
}

.rc .feedback-ratings-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 8px;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: .74rem;
}

.rc .feedback-rating-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rc .feedback-rating-line > span:first-child {
  color: var(--c-muted);
}

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

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

/* 所在地はカードの一番下に、点線区切り＋ピンで置く */
.rc .feedback-user-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 2px dotted var(--c-line);
  font-size: .78rem;
  color: var(--c-muted);
  text-align: left;
}

.rc .feedback-user-detail i {
  color: var(--c-navy);
}

.rc .feedback-meta {
  display: none;
}

/* ── 選ばれる理由（下層はカード型で揃える） ───────────── */
.rc .quality-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

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

.rc .quality-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 18px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
}

.rc .quality-pic {
  height: 118px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 14px;
}

.rc .quality-box h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--c-navy);
}

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

/* ── エリアのチップ ─────────────────────── */
.rc .zone-chip {
  display: inline-block;
  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;
}

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

/* ── 回収実績カード（トップの事例カードと同じ見た目） ───── */
.rc .result-box {
  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);
}

.rc .result-box-top {
  padding: 13px 18px;
  background: var(--c-navy) !important;
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
}

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

.rc .result-pic-outer {
  position: relative;
}

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

.rc .result-pic-tag.tag-before {
  background: rgba(45, 52, 54, .82) !important;
}

.rc .result-pic-tag.tag-after {
  background: #ff6f00 !important;
}

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

.rc .result-box-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px;
}

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

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

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

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

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

.rc .result-detail-amount {
  font-size: .86rem;
  font-weight: 700;
}

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

.rc .result-crew-comment-panel {
  background: none !important;
  padding: 0 !important;
  color: inherit !important;
}

.rc .result-crew-comment-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: .76rem;
  font-weight: 800;
  color: var(--c-navy) !important;
  background: none !important;
}

/* ── 表（自治体一覧・会社概要など） ───────────────── */
.rc .hp-table-wrap {
  overflow-x: auto;
}

.rc .hp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #fff;
}

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

.rc .hp-table thead th {
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
}

.rc .hp-table tbody th {
  background: var(--c-cream);
  font-weight: 800;
  color: var(--c-navy);
}

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

/* ── レスポンシブ ───────────────────────── */
@media (max-width: 1024px) {
  .rc .step-cols { grid-template-columns: repeat(2, 1fr);
  }
  .rc .step-box: nth-child(2n)::after { display: none;
  }
  .rc .planlist-cols,
  .rc .quality-cols { grid-template-columns: repeat(2, 1fr);
  };
}

@media (max-width: 768px) {
  .rc .container,
  .rc .hp-frame {
    width: calc(100% - 32px);
  }

  .rc .block-top {
    margin-bottom: 36px;
  }

  .rc .block-en {
    font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem);
  }

  .rc .step-cols,
  .rc .planlist-cols,
  .rc .quality-cols,
  .rc .feedback-set {
    grid-template-columns: 1fr;
  }

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

  .rc .result-detail-cols {
    grid-template-columns: 1fr;
  }

  .rc .feedback-box {
    padding: 22px 18px 18px;
  }

  .rc .feedback-mark-pic {
    width: 54px;
    height: 54px;
  }

  .rc .feedback-head {
    font-size: 1rem;
  }

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

  .rc .sizepack-set-cart-mark {
    height: 132px;
  }

  /* 下層でも小さすぎる文字を底上げする（トップと同じ3段階） */
  .rc .hp-tile__k,
  .rc .hp-remark,
  .rc .feedback-user-detail,
  .rc .feedback-ratings-panel,
  .rc .quality-tag,
  .rc .step-no {
    font-size: .8125rem;
  }

  .rc .step-remark,
  .rc .quality-box p,
  .rc .feedback-copy,
  .rc .hp-sec__intro,
  .rc .guide-intro-copy,
  .rc .result-detail-amount {
    font-size: .875rem;
  }

  .rc .result-detail-tag,
  .rc .result-pic-tag,
  .rc .sizepack-set-plan-tax {
    font-size: .75rem;
  }

}

/* ── 旧CSSとの調整 ─────────────────────────
   アンカー用に残している id セレクタが、旧スタイルシート側で
   背景や配置を持っているため打ち消す。 */
.rc .block#step,
.rc .hp-sec#step,
.rc section#step {
  background: var(--c-cream);
}

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

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

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

/* ステップ番号は旧CSSで絶対配置。通常フローのピルに戻す */
.rc .step-no {
  position: static !important;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
}

/* ── 下層ページの記事ブロック ─────────────────────
   トップの記事セクションと同じ見た目にする。
   （トップ側は .rc .rc-guide … でより詳細に指定してあるので影響しない） */
.rc .guide-sec,
.rc .guide-subsec {
  padding: 34px clamp(20px, 3vw, 40px);
  border-radius: var(--r-panel);
  background: #fff;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
}

.rc .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 .guide-sec-body,
.rc .guide-subsec-body,
.rc .normal-copy {
  font-size: .94rem;
  line-height: 1.95;
  color: var(--c-muted);
}

.rc .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 .guide-subsec-h4::before {
  content: "";
  position: static;
  flex-shrink: 0;
  width: 5px;
  height: 1.2em;
  border-radius: 3px;
  background: var(--c-orange);
}

.rc .guide-points {
  display: grid;
  gap: 0;
  margin-top: 6px;
}

.rc .guide-points li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-cream);
  border-bottom: 2px solid #fff;
  border-radius: 6px;
  font-size: .93rem;
  line-height: 1.85;
}

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

.rc .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: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-navy);
  font-size: .85rem;
  line-height: 1;
}

.rc .guide-points li a {
  color: var(--c-blue);
  font-weight: 700;
}

.rc .guide-points li a:hover {
  text-decoration: underline;
}

/* ── お悩み → 解決（エリアページ。トップと同じ見せ方に揃える） ── */
.rc .concern-block,
.rc .answer-block {
  background: none !important;
  padding: var(--pad-sec) 0;
}

.rc .answer-block {
  padding-top: 0;
}

.rc .answer-bg-mark {
  display: none;
}

.rc .concern-en {
  text-align: center;
  margin-bottom: 12px;
}

.rc .concern-head {
  text-align: center;
  margin: 0 0 44px;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-ink) !important;
  background: none;
}

.rc .concern-head .highlight,
.rc .concern-copy .highlight {
  background: linear-gradient(transparent 58%, var(--c-marker) 58%) !important;
  color: inherit !important;
  padding: 0 .08em;
}

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

.rc .concern-set {
  display: grid;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(0px, 7vw, 104px);
}

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

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

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

.rc .concern-copy {
  font-size: clamp(1rem, .92rem + .35vw, 1.18rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-ink) !important;
}

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

.rc .concern-pic-lhs {
  left: -46px;
}

.rc .concern-pic-rhs {
  right: -46px;
}

/* 点線＋矢印のつなぎ */
.rc .concern-arrow {
  display: grid;
  place-items: center;
  margin: 34px 0 0;
  font-size: 1.7rem;
  color: var(--c-blue);
  opacity: .55;
}

.rc .answer-subtitle {
  text-align: center;
  font-size: .88rem;
  font-weight: 800;
  color: var(--c-orange);
  margin-bottom: 8px;
  background: none;
}

.rc .answer-head {
  text-align: center;
  margin: 0 0 40px;
  font-size: clamp(1.3rem, 1rem + 1.5vw, 2.05rem);
  font-weight: 900;
  line-height: 1.6;
  color: var(--c-ink) !important;
  background: none;
}

.rc .answer-tags-zone {
  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) !important;
}

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

.rc .answer-chip {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 8px;
  background: #fff !important;
  color: var(--c-navy) !important;
  border: 0 !important;
  font-size: .92rem;
  font-weight: 800;
}

.rc .answer-cat {
  width: 150px;
}

@media (max-width: 1180px) {
  .rc .concern-pic-lhs {
    left: 0;
  }

  .rc .concern-pic-rhs {
    right: 0;
  }

}

@media (max-width: 768px) {
  .rc .concern-box {
    padding: 36px 18px 128px;
  }

  .rc .concern-set {
    padding: 0;
    position: relative;
    z-index: 2;
  }

  .rc .concern-row {
    padding: 14px 2px;
  }

  .rc .concern-check {
    width: 26px;
    height: 26px;
    font-size: .74rem;
  }

  .rc .concern-pic-lhs,
  .rc .concern-pic-rhs {
    width: 74px;
    bottom: 8px;
    z-index: 1;
  }

  .rc .concern-pic-lhs {
    left: 10px;
  }

  .rc .concern-pic-rhs {
    right: 10px;
  }

  .rc .concern-copy {
    font-size: .92rem;
  }

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

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

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

}

/* ── 「安い3つの理由」（料金ページ。トップと同じ見せ方に揃える） ── */
.rc .basis-zone {
  margin-bottom: 72px;
}

.rc .basis-head {
  margin: 0 0 44px;
  text-align: center;
  font-size: clamp(1.25rem, .95rem + 1.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.55;
  color: var(--c-ink);
  background: none;
}

.rc .basis-head span {
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .08em;
  color: inherit;
}

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

.rc .basis-pic-outer {
  background: none !important;
  border: 0;
  box-shadow: none;
  height: auto !important;
  min-height: 0;
  overflow: visible !important;
}

.rc .basis-box-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto !important;
  min-height: 0;
  padding: 0;
  background: none !important;
  border-radius: 0;
  color: var(--c-ink) !important;
  text-align: center;
  overflow: visible;
}

.rc .basis-box-tag,
.rc .basis-box-tag--stack {
  position: static !important;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  order: 1;
  margin: 0 0 18px;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--c-navy) !important;
  background: none !important;
}

/* イラストは正円の下地に載せる（旧CSSが絶対配置なので通常フローに戻す） */
.rc .basis-box-illust,
.rc .basis-box-illust--truck,
.rc .basis-box-illust--calc {
  position: static !important;
  order: 2;
  width: 138px;
  height: 138px;
  max-width: none;
  padding: 20px;
  border-radius: 50%;
  background: var(--c-sky);
  object-fit: contain;
  margin: 0 auto;
  inset: auto;
  transform: none;
}

.rc .basis-box-amount {
  order: 3;
  position: relative;
  margin: 8px 0 0;
  font-size: 3.4rem;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: var(--c-red) !important;
  background: none !important;
}

.rc .basis-box-spark {
  display: none;
}

/* ── お客様の声 一覧ページのヒーロー ─────────────── */
.rc .feedback-archive-opening {
  background: var(--c-sky) !important;
  color: var(--c-ink) !important;
  padding: 64px 0 56px;
}

.rc .feedback-archive-opening h1 {
  margin: 0;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-ink) !important;
}

.rc .feedback-archive-opening h1 i {
  color: var(--c-navy);
}

.rc .feedback-archive-opening p {
  margin-top: 14px !important;
  color: var(--c-muted) !important;
  font-size: .95rem;
}

.rc .feedback-archive-body {
  padding: var(--pad-sec) 0;
}

@media (max-width: 768px) {
  .rc .basis-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px;
  }

  .rc .basis-box-illust,
  .rc .basis-box-illust--truck,
  .rc .basis-box-illust--calc {
    width: 116px;
    height: 116px;
    padding: 16px;
  }

  .rc .basis-box-amount {
    font-size: 2.8rem;
  }

  .rc .feedback-archive-opening {
    padding: 44px 0 40px;
  }

}

/* ── フッター（全ページ共通。淡い緑をベース色に戻す） ───── */
#foot {
  background: var(--hp-bg, #f4f6f8) !important;
  border-top: 1px solid var(--hp-line, #e2e8ea);
  color: var(--hp-text, #2d3436);
}

#foot a {
  color: var(--hp-muted, #636e72);
}

#foot a:hover {
  color: var(--hp-primary, #4c6cb3);
}

/* ── 表（hp-grid / versus-grid はいずれも table） ────── */
.rc .hp-grid-outer,
.rc .versus-outer {
  overflow-x: auto;
}

.rc .hp-grid,
.rc .versus-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #fff;
}

.rc .hp-grid caption {
  caption-side: top;
  padding: 12px 16px;
  background: var(--c-cream);
  font-size: .9rem;
  font-weight: 800;
  color: var(--c-navy);
  text-align: left;
}

.rc .hp-grid th,
.rc .hp-grid td,
.rc .versus-grid th,
.rc .versus-grid td {
  padding: 13px 14px;
  font-size: .9rem;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}

.rc .hp-grid thead th,
.rc .versus-grid thead th {
  background: var(--c-navy);
  color: #fff;
  font-weight: 800;
  text-align: center;
}

.rc .hp-grid tbody th {
  background: var(--c-cream);
  font-weight: 800;
  color: var(--c-navy);
}

/* 表の数値セルに付く .hp-no に上の .rc .hp-no（inline-block・余白・斜体など）が当たると、
   セルが表の列から外れて列幅と背景が崩れる。表の中ではすべて打ち消す。 */
.rc .hp-grid .hp-no {
  display: table-cell;
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-align: right;
  font-style: normal;
  color: inherit;
}
/* 見出し行は紺地に白文字。color: inherit で表の文字色に戻されないようにする */
.rc .hp-grid thead th.hp-no { color: #fff; font-weight: 800; text-align: center; }

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

/* 自治体との比較表は自社列を強調 */
.rc .versus-grid .comp-column-our {
  text-align: center;
}

.rc .versus-grid .comp-column-other,
.rc .versus-grid .comp-data-other {
  text-align: center;
}

/* ── スマホの文字サイズの底上げ（下層の取りこぼし分） ──── */
@media (max-width: 768px) {
  .rc .suffix,
  .rc .hp-checked,
  .rc .nofee-tag,
  .rc .result-box-top .hp-result__date { font-size: .75rem;
  }
  .rc .sizepack-set-discount-copy,
  .rc .feedback-chip,
  .rc .nofee-intro { font-size: .8125rem;
  }
  .rc .hp-grid th,
  .rc .hp-grid td,
  .rc .versus-grid th,
  .rc .versus-grid td { font-size: .8125rem;
  padding: 11px 10px;
  };
}

/* ── 追加の調整 ───────────────────────────── */
/* 処分できない不用品：スマホでは見出しタブと中身が近すぎるので余白を足す */
@media (max-width: 768px) {
  .rc-notice__inner .rc-notice__body { margin-top: 30px;
  };
}

/* 下層のお客様の声も、評価は見出しの直下・本文の前に置く */
.rc .feedback-ratings-panel {
  margin-top: 0;
  margin-bottom: 8px;
}

.rc .feedback-head {
  margin-bottom: 8px;
}

/* ── エリアページの細部（トップに合わせる） ────────── */
/* 「お悩み」は、トップと同じ濃紺のピルバッジにする */
.rc .concern-en {
  display: block;
  width: fit-content;
  margin: 0 auto 26px;
  padding: 8px 30px;
  border-radius: 999px;
  background: var(--c-navy) !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .1em;
}

/* 事例カードの写真は枠いっぱいに広げ、大きさを揃える */
.rc .result-pic-outer {
  width: 100% !important;
  max-width: none;
}

.rc .result-pic-outer img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

/* 担当者コメント：吹き出しの三角は使わず、アイコンを頭に置く */
.rc .result-crew-comment {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.rc .result-crew-comment-panel {
  flex: 1;
  min-width: 0;
}

.rc .result-crew-comment-panel::after,
.rc .result-crew-comment-panel::before {
  display: none !important;
}

.rc .result-crew-mark-pic {
  order: -1;
  flex-shrink: 0;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  position: static !important;
  inset: auto !important;
  margin: 2px 0 0;
}

/* 特徴タグの三角を、タグの色に合わせる */
.rc .quality-tag::after {
  border-top-color: var(--c-navy) !important;
}

/* 会社情報・代表挨拶（トップと同じ組み方に揃える） */
.rc .corp-detail-unit {
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--hp-shadow);
  background: #fff;
}

.rc .corp-detail-top {
  padding: 16px 24px;
  background: var(--c-navy) !important;
  color: #fff !important;
  font-weight: 800;
  font-size: 1rem;
}

.rc .corp-detail-body {
  padding: 0;
  background: #fff;
}

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

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

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

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

.rc .message-block-top {
  margin: 64px 0 32px;
  text-align: center;
}

.rc .message-block-head {
  margin: 0;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  color: var(--c-ink);
  background: none;
}

.rc .corp-message-unit {
  display: grid;
  grid-template-columns: 280px 1fr;
  border-radius: var(--r-panel);
  overflow: hidden;
  box-shadow: var(--hp-shadow);
  background: none !important;
  padding: 0 !important;
}

.rc .corp-message-shot-column {
  position: relative;
}

.rc .corp-message-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rc .corp-message-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 .corp-message-copy-column {
  padding: 38px clamp(24px, 3vw, 44px);
  background: var(--c-navy);
  color: #fff;
}

.rc .corp-message-head {
  display: block;
  margin-bottom: 16px;
  font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem);
  font-weight: 900;
  line-height: 1.5;
  color: #fff !important;
  background: none;
}

.rc .corp-message-copy {
  font-size: .92rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 768px) {
  .rc .corp-grid th,
  .rc .corp-grid td {
    display: block;
    width: auto;
    padding: 12px 18px;
  }

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

  .rc .corp-message-unit {
    grid-template-columns: 1fr;
  }

  /* 代表挨拶の写真だけは、スマホで切り取らずに全体を見せる。
     幅いっぱいに引き伸ばすと顔が大きく切れるため、
     比率を保ったまま収め、余白は本文と同じ濃紺で埋める。 */
  .rc .corp-message-shot-column {
    background: var(--c-navy);
  }

  .rc .corp-message-shot {
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
  }

  .rc .corp-message-copy-column {
    padding: 28px 20px;
  }

  .rc .message-block-top {
    margin: 48px 0 26px;
  }

  .rc .concern-en {
    font-size: .92rem;
    padding: 7px 24px;
  }

}

/* ── 追加の調整 ───────────────────────────── */
/* よくある質問：page-questions.php のインラインJSが max-height を直接書き込み、
   余白を含まない高さで止まってしまうため、開いた状態はCSS側で確保する */
.rc .qa-row.active .qa-answer {
  max-height: 40rem !important;
}

/* 作業実績の一覧は2カラムで置く */
.rc .hp-results__set {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* 実績ページの担当者コメントは影を付けない */
/* .hp-results は .rc と同じ要素なので、子孫ではなく複合セレクタで指定する */
.rc.hp-results .result-crew-comment-panel,
.rc.hp-results .result-crew-comment {
  box-shadow: none !important;
}

/* ── 追加パック・コミコミ（トップと同じ組み方） ─────────── */
.rc .planlist-foot-pictures {
  margin-top: 72px;
}

.rc .plan-add-banner {
  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 !important;
  border: 2px solid var(--c-sky);
  margin-bottom: 0;
}

.rc .plan-add-badge {
  justify-self: start;
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 20px;
  border-radius: 999px;
  background: var(--c-orange) !important;
  color: #fff !important;
  font-size: .8rem;
  font-weight: 800;
}

.rc .plan-add-head {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.rc .plan-add-panel {
  width: 132px;
  height: auto;
  position: static !important;
  inset: auto !important;
}

.rc .plan-add-caption {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--c-ink) !important;
  background: none !important;
}

.rc .plan-add-em {
  color: var(--c-orange) !important;
  background: none !important;
}

.rc .plan-add-body {
  background: none !important;
  padding: 0 !important;
  border-radius: 0;
}

.rc .plan-add-plan {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--c-red) !important;
  line-height: 1.1;
}

.rc .plan-add-tax {
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--c-cream) !important;
  font-size: .58rem;
  color: var(--c-muted) !important;
  font-weight: 700;
}

.rc .plan-add-remark {
  margin-top: 6px;
  font-size: .86rem;
  color: var(--c-muted);
}

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

.rc .plan-include-intro {
  font-size: .88rem;
  color: var(--c-muted);
  margin: 0;
}

.rc .plan-include-core {
  margin: 0;
  font-size: clamp(1.15rem, .9rem + 1.1vw, 1.65rem);
  font-weight: 900;
  color: var(--c-ink);
  background: none !important;
}

.rc .plan-include-strong {
  color: var(--c-navy) !important;
  font-size: 1.1em;
  background: none !important;
}

/* 他社だとかかる費用も全て0円 */
.rc .nofee-unit {
  padding: 36px clamp(18px, 3vw, 32px);
  border-radius: var(--r-card);
  background: var(--c-sky) !important;
}

.rc .nofee-intro {
  text-align: center;
  font-weight: 700;
  color: var(--c-muted) !important;
  background: none !important;
}

.rc .nofee-plan {
  text-align: center;
}

.rc .nofee-spark {
  display: none;
}

.rc .nofee-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) !important;
  background: none !important;
}

.rc .nofee-line {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.rc .nofee-row {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-radius: 10px;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid var(--c-line);
}

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

.rc .nofee-row img {
  height: 66px;
  width: auto;
  object-fit: contain;
  margin: 12px auto;
  position: static !important;
  inset: auto !important;
}

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

}

@media (max-width: 768px) {
  .rc .hp-results__set {
    grid-template-columns: 1fr !important;
  }

  .rc .plan-add-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rc .plan-add-head {
    grid-column: 1;
    grid-row: 1;
  }

  .rc .plan-add-badge,
  .rc .plan-add-body {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .rc .plan-add-plan {
    justify-content: center;
  }

  .rc .plan-add-panel {
    margin: 0 auto;
    width: 120px;
  }

  .rc .nofee-unit {
    padding: 26px 16px;
  }

  .rc .nofee-row img {
    height: 48px;
    margin: 8px auto;
  }

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

}

/* 追加パック：見出し枠を透過させ、画像と文言を親のグリッドに直接並べる */
.rc .plan-add-head {
  display: contents;
}

.rc .plan-add-panel {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}

.rc .plan-add-badge {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin-bottom: 0;
}

.rc .plan-add-caption {
  grid-column: 2;
  grid-row: 2;
  margin: 8px 0 0;
}

.rc .plan-add-body {
  grid-column: 2;
  grid-row: 3;
  margin-top: 4px;
}

.rc .plan-add-badge::after,
.rc .plan-add-badge::before {
  display: none !important;
}

/* コミコミのタイル：見出しが絶対配置のままだと画像に重なる */
.rc .nofee-tag {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: none !important;
}

.rc .nofee-row {
  height: auto !important;
  min-height: 0;
}

@media (max-width: 768px) {
  .rc .plan-add-panel {
    grid-column: 1;
    grid-row: 1;
  }

  .rc .plan-add-badge {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .rc .plan-add-caption {
    grid-column: 1;
    grid-row: 3;
  }

  .rc .plan-add-body {
    grid-column: 1;
    grid-row: 4;
  }

}

/* 追加パックの価格行：旧CSSの白い箱と絶対配置を打ち消す */
.rc .plan-add-plan {
  position: relative;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: auto;
}

.rc .plan-add-tax {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.rc .plan-add-remark {
  position: static !important;
  text-align: left;
  background: none !important;
}

/* 追加パックの本体まわりに残っていた枠線と影を消す */
.rc .plan-add-body,
.rc .plan-add-plan,
.rc .plan-add-remark {
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* ── さらに調整 ─────────────────────────── */
/* 1) 声カードは縦積みなので、旧CSSの gap:30px は不要 */
.rc .feedback-box {
  gap: 0 !important;
}

/* 3) エリアページの事例カードもコメントの影を外す */
.rc .result-crew-comment-panel,
.rc .result-crew-comment {
  box-shadow: none !important;
}

/* 4) 「もっと見る」ボタンの上に余白を足す */
.rc .hp-loadmore {
  margin-top: 48px !important;
}

/* 2) 自治体との比較表を、トップの比較表と同じ組み方にする */
.rc .versus-top {
  text-align: center;
  margin-bottom: 40px;
}

.rc .versus-head-core {
  margin: 0 0 24px;
  font-size: clamp(1.55rem, 1.05rem + 2.1vw, 2.4rem);
  font-weight: 900;
  line-height: 1.5;
  color: var(--c-ink);
  background: none;
}

.rc .versus-head-core span {
  background: linear-gradient(transparent 58%, var(--c-marker) 58%);
  padding: 0 .08em;
  color: inherit;
}

.rc .versus-tag-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.rc .versus-figure-pic {
  width: 82px;
}

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

.rc .versus-bg-copy {
  display: none;
}

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

.rc .versus-grid {
  width: 100%;
  min-width: 660px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  overflow: visible;
  border: 0;
  background: none;
}

.rc .versus-grid th,
.rc .versus-grid 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-grid tr > *:first-child {
  border-left: 1px solid var(--c-line);
}

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

.rc .versus-grid thead th:first-child {
  background: none;
  border: 0;
}

/* 行の見出し */
.rc .versus-grid .comp-th-row {
  width: 22%;
  background: var(--c-cream) !important;
  color: var(--c-ink) !important;
  font-weight: 800;
  text-align: center;
}

.rc .versus-grid tbody tr:first-child .comp-th-row {
  border-top-left-radius: 10px;
}

.rc .versus-grid tbody tr:last-child .comp-th-row {
  border-bottom-left-radius: 10px;
}

/* 自社列は濃紺の枠で囲んだ1枚のカードに見せる */
.rc .versus-grid .comp-column-our {
  background: #fff !important;
  border-left: 3px solid var(--c-navy);
  border-right: 3px solid var(--c-navy);
  font-weight: 800;
  color: var(--c-navy) !important;
}

.rc .versus-grid thead .comp-column-our {
  padding: 24px 14px;
  background: var(--c-navy) !important;
  color: #fff !important;
  border-top: 3px solid var(--c-navy);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.rc .versus-grid tbody tr:last-child .comp-column-our {
  border-bottom: 3px solid var(--c-navy);
  border-radius: 0 0 12px 12px;
}

.rc .versus-grid .comp-our-logo {
  display: block;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #fff;
}

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

/* 自社セルの頭に印を付ける */
.rc .versus-grid tbody .comp-column-our::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 7px;
  color: var(--c-orange);
  font-size: .9em;
}

/* 他社（自治体）列は控えめに */
.rc .versus-grid .comp-column-other,
.rc .versus-grid .comp-data-other {
  color: var(--c-muted) !important;
  background: #fff !important;
}

.rc .versus-grid thead .comp-column-other {
  background: var(--c-cream) !important;
  color: var(--c-ink) !important;
  font-weight: 800;
  border-top-right-radius: 10px;
}

.rc .versus-grid tbody tr:last-child .comp-data-other {
  border-bottom-right-radius: 10px;
}

@media (max-width: 768px) {
  .rc .versus-tag-frame {
    flex-direction: row;
    gap: 12px;
  }

  .rc .versus-grid th,
  .rc .versus-grid td {
    font-size: .8125rem;
    padding: 12px 10px;
  }

  .rc .versus-grid thead .comp-column-our {
    padding: 18px 10px;
  }

}

/* ── CTAバナーの電話番号 ─────────────────────
   番号はバナー画像の上に重ねているが、位置と文字サイズが px 固定で、
   画像だけが可変幅のため中間の画面幅でずれていた。
   コンテナクエリ単位に置き換えて、画像幅に比例させる。 */
/* トップ以外のページ（.rc で囲っていないテンプレート）でも同じ位置に出るよう、
   .rc の入れ子をやめて CTA 専用クラスで指定する */
.cta-telblock {
  container-type: inline-size;
}

.upper-contactblock-tel-copy {
  left: 23.5cqw;
  bottom: 0.4cqw;
  font-size: 10cqw;
  white-space: nowrap;
  color: #fff;
  font-weight: 800;
  margin: 0;
  padding: 0;
}

/* スマホは別画像（1729x910）。フリーダイヤルのマークの右、
   高さの78%あたりに来るよう画像の実寸から算出した値 */
@media (max-width: 575.98px) {
  .upper-contactblock-tel-copy {
    left: 19.4cqw;
    bottom: 1.7cqw;
    font-size: 10.5cqw;
  }
}

/* 問い合わせCTA。トップ以外のページでも同じ見た目になるよう、
   new-top.css ではなく全ページで読み込むこの file に置く。 */
.web-copy-center,
.web-copy-center img {
  text-align: center;
  display: block;
  margin: 0 auto;
}

/* Web割バナー。サイト内の他のパネル（--r-panel: 24px）と角の丸みをそろえる。 */
.web-promo-pic {
  border-radius: 24px;
  overflow: hidden;
  /* .rc の外（サービス一覧やサイトマップ）では画像に最大幅の指定がなく、
     原寸1626pxのまま横にはみ出していたためここで抑える */
  max-width: 100%;
  height: auto;
}

/* スマホでの注記。new-top.css を読まないページでも同じ大きさにする */
@media (max-width: 768px) {
  .mob-small-copy { font-size: 15px; }
}

/* エリアページ「不用品回収と粗大ごみ収集を比較」の選び方ボックス。
   条件を1本の箇条書きに混ぜると、どちらの話か読み取れないため2つに分ける。 */
.rc .guide-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 1.4rem 0 1.8rem;
}

.rc .guide-choose__box {
  background: #fff;
  border: 1px solid #dde3ec;
  border-radius: var(--r-card);
  padding: 24px 26px;
}

.rc .guide-choose__box--ours {
  border-color: var(--c-navy, #1b3c7a);
  background: #f4f7fd;
}

.rc .guide-choose__head {
  margin: 0 0 .9rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-navy, #1b3c7a);
  padding-bottom: .6rem;
  border-bottom: 2px solid #e4e9f2;
}

.rc .guide-choose__box--ours .guide-choose__head {
  border-bottom-color: var(--c-navy, #1b3c7a);
}

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

.rc .guide-choose__list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: .7rem;
  line-height: 1.85;
}

.rc .guide-choose__list li:last-child { margin-bottom: 0; }

.rc .guide-choose__list li::before {
  content: '';
  position: absolute;
  left: .2em;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa8bf;
}

.rc .guide-choose__box--ours .guide-choose__list li::before {
  background: var(--c-navy, #1b3c7a);
}

@media (max-width: 768px) {
  .rc .guide-choose {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rc .guide-choose__box { padding: 20px; }
}

/* ¥0ブロックはPCで3個＋4個の2列組み。スマホで2列にすると
   1つ目の ul で3個目が余り、段の途中に空きができていた。
   ul を格子から外し、7個を続けて並べる。 */
@media (max-width: 768px) {
  .rc .nofee-unit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .rc .nofee-intro,
  .rc .nofee-plan {
    grid-column: 1 / -1;
  }

  .rc .nofee-line {
    display: contents;
  }

  .rc .nofee-row {
    margin: 0;
  }

  .rc .nofee-row img {
    height: 56px;
    margin: 10px auto;
  }
}

/* 「もっと見る（残り◯件）」だけは、アイコン用の gap を効かせない。
   .rc .hp-btn と詳細度が同じなので、必ずこちらを後ろに置く。 */
.rc .hp-loadmore__btn {
  gap: 0;
}

/* サービス一覧ページ。トップと同じ .quality-box を使いつつ、
   写真が大きく本文も長いので、2列組みと左寄せの本文にする。 */
.rc .offer-cols {
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.rc .offer-card {
  display: flex;
  flex-direction: column;
  padding: 34px 28px 28px;
}

.rc .offer-card__pic {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--r-card);
  margin: 6px 0 18px;
}

.rc .offer-card__body {
  flex: 1;
  margin: 0 0 20px;
  text-align: left;
  line-height: 1.9;
  color: var(--c-muted);
  font-size: .95rem;
}

.rc .offer-card__more {
  margin: 0;
}

/* 「どのサービスで頼めばよいか迷ったとき」 */
.rc .offer-guide {
  max-width: 820px;
  margin: 0 auto;
  /* 見出しが中央寄せのセクションに入るため、本文だけ左に戻す */
  text-align: left;
}

.rc .offer-guide__list {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  box-shadow: var(--hp-shadow);
  padding: 30px 34px;
  margin: 0 0 20px;
}

.rc .offer-guide__list dt {
  margin: 0;
  font-weight: 800;
  color: var(--c-navy);
  padding-left: 1.15em;
  position: relative;
}

.rc .offer-guide__list dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: .58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-navy);
}

.rc .offer-guide__list dd {
  margin: .4em 0 1.4em 1.15em;
  line-height: 1.9;
  color: var(--c-muted);
}

.rc .offer-guide__list dd:last-child { margin-bottom: 0; }

.rc .offer-guide__note {
  line-height: 1.9;
  color: var(--c-muted);
}

@media (max-width: 768px) {
  .rc .offer-cols {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .rc .offer-card { padding: 26px 20px 22px; }
  .rc .offer-card__pic { height: 190px; }
  .rc .offer-guide__list { padding: 22px 20px; }
}

/* ── エリアページの「粗大ごみ収集との違い」 ────────────
   旧テーマの .versus-figure-pic はキャラクターを絶対配置していたため、
   スマホで見出しに重なっていた。トップの「他社との比較」と同じく、
   吹き出しの左に横並びで置く。 */
.rc .versus-tag-frame {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 100%;
  margin: 28px auto 0;
}

.rc img.versus-figure-pic {
  position: static;
  width: 82px;
  height: auto;
  flex: 0 0 auto;
  filter: none;
  mix-blend-mode: normal;
}

.rc .versus-subtitle {
  flex: 0 1 auto;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 1rem;
  box-shadow: none;
  text-align: left;
}

.rc .versus-subtitle::after { display: none; }

/* 当社の列のヘッダー。旧CSSは padding:0 のうえ縦中央そろえで、
   屋号が縦に伸びて右で切れていた。トップと同じ横1行の見せ方にする。 */
.rc .versus-grid thead .comp-column-our.top-cell {
  padding: 18px 14px;
  vertical-align: middle;
}

.rc .comp-our-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
  white-space: nowrap;
}

.rc .comp-our-logo br { display: none; }

.rc .comp-our-logo strong {
  display: inline;
  font-size: .95rem;
  font-weight: 800;
}

/* 表は横スクロール。当社の列まではそのまま読めて、
   自治体の列はスクロールして見に行く形にする。 */
.rc .versus-grid {
  min-width: 620px;
}

.rc .versus-grid .comp-th-row { width: 34%; }
.rc .versus-grid .comp-column-our,
.rc .versus-grid .comp-data-other { width: 33%; }

@media (max-width: 768px) {
  .rc .versus-tag-frame { gap: 10px; }

  .rc img.versus-figure-pic { width: 62px; }

  .rc .versus-subtitle {
    padding: 12px 18px;
    font-size: .9rem;
  }

  /* 画面の幅いっぱいに「項目 ＋ 当社」が収まり、
     そこから横にスクロールすると自治体の列が出てくる幅にする。
     幅は cqw ではなく画面幅で決め、狭い端末でも当社の列が切れないようにする。 */
  /* 旧テーマの .versus-block が overflow:hidden で、
     表の横スクロールごと切り落としていた。 */
  .rc.versus-block,
  .rc .versus-block { overflow: visible; }

  /* 表を包む枠の実寸を基準に列幅を決める。
     「項目 ＋ 当社」までが画面に収まり、自治体の列はスクロールで見る。 */
  .rc .versus-outer {
    container-type: inline-size;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rc .versus-grid {
    min-width: 0;
    width: 142cqw;
    table-layout: fixed;
  }

  .rc .versus-grid .comp-th-row     { width: 38cqw; }
  .rc .versus-grid .comp-column-our { width: 62cqw; }
  .rc .versus-grid .comp-column-other,
  .rc .versus-grid .comp-data-other { width: 42cqw; }

  .rc .versus-grid thead .comp-column-our.top-cell { padding: 14px 10px; }
  .rc .comp-our-logo strong { font-size: .82rem; }
  .rc .comp-our-logo { gap: 6px; }
}

/* ── 自治体の受付方法の表 ───────────────────────
   6列あるため、スマホで横に並べると手数料の欄が1文字ずつ折り返して
   10行以上に伸びていた。狭い画面では自治体ごとのカードに組み替える。 */
.rc .hp-grid--muni { table-layout: fixed; }

.rc .hp-grid--muni th:first-child { width: 11%; }
.rc .hp-grid--muni thead th:nth-child(2) { width: 25%; }
.rc .hp-grid--muni thead th:nth-child(3) { width: 19%; }
.rc .hp-grid--muni thead th:nth-child(4) { width: 17%; }
.rc .hp-grid--muni thead th:nth-child(5) { width: 19%; }
.rc .hp-grid--muni thead th:last-child   { width: 9%; }

/* 出典のリンクは折り返さない */
.rc .hp-grid--muni td:last-child {
  text-align: center;
  white-space: nowrap;
}

.rc .hp-grid--muni td { line-height: 1.8; word-break: normal; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  /* 包み枠の横スクロールを止め、表を縦に積み直す */
  .rc .hp-municipal__panel .hp-grid-outer { overflow-x: visible; }

  .rc .hp-grid--muni,
  .rc .hp-grid--muni tbody,
  .rc .hp-grid--muni tr,
  .rc .hp-grid--muni th,
  .rc .hp-grid--muni td {
    display: block;
    width: auto !important;
    min-width: 0;
    max-width: none;
  }

  .rc .hp-grid--muni {
    table-layout: auto;
    border: 0;
    background: none;
  }

  .rc .hp-grid--muni thead { display: none; }

  .rc .hp-grid--muni tr {
    margin-bottom: 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    overflow: hidden;
    background: #fff;
  }

  .rc .hp-grid--muni tr:last-child { margin-bottom: 0; }

  /* 自治体名はカードの見出しにする */
  .rc .hp-grid--muni tbody th {
    padding: 12px 16px;
    background: var(--c-navy);
    color: #fff;
    font-size: .95rem;
    font-weight: 800;
    text-align: left;
    border: 0;
    /* 縦に1文字ずつ並ばないよう、幅の指定を打ち消す */
    white-space: nowrap;
  }

  /* 項目名と中身を、左右ではなく上下に置く */
  .rc .hp-grid--muni td {
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--c-line);
    text-align: left;
    font-size: .85rem;
  }

  .rc .hp-grid--muni td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: var(--c-navy);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
  }

  .rc .hp-grid--muni td:empty { display: none; }

  /* PC用の中央揃えを打ち消し、他の項目と行頭をそろえる */
  .rc .hp-grid--muni td:last-child { text-align: left; }
}


/* ==========================================================
   会社概要（/about/）の情報テーブル
   旧 seo/css/shiga-fixpage.css から移設。ほかの規則は未使用のため破棄した。
   ========================================================== */
.infobox-frame {
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.infobox-corp-head {
color: #0066FF;
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
letter-spacing: 0.05em;
}

.infobox-detail-grid {
width: 100%;
border-collapse: collapse;
}

.infobox-detail-grid th {
width: 120px;
background: #FFFFFF;
padding: 20px;
text-align: left;
font-weight: 600;
font-size: 14px;
border-bottom: 1px solid #E5E5E5;
vertical-align: top;
}

.infobox-detail-grid td {
padding: 20px;
font-size: 14px;
line-height: 1.6;
border-bottom: 1px solid #E5E5E5;
}

.infobox-aside-copy {
font-size: 12px;
color: #666;
margin-top: 4px;
}

.infobox-address {
margin-bottom: 16px;
}

.infobox-address:last-child {
margin-bottom: 0;
}

.infobox-business-set {
list-style: none;
padding: 0;
margin: 0;
}

.infobox-business-row {
position: relative;
padding-left: 16px;
margin-bottom: 8px;
}

.infobox-business-row:last-child {
margin-bottom: 0;
}

.infobox-business-row::before {
content: "・";
position: absolute;
left: 0;
}

@media (max-width: 600px) {
.infobox-detail-grid,
.infobox-detail-grid tbody,
.infobox-detail-grid tr,
.infobox-detail-grid th,
.infobox-detail-grid td {
display: block;
width: 100%;
}

.infobox-detail-grid th {
border-left: 4px solid #0066FF;
padding: 12px 8px;
}

.infobox-detail-grid td {
padding: 12px 8px 20px;
}
}

.infobox-news-frame {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.infobox-news-row {
padding: 24px 0;
border-bottom: 1px solid #E5E5E5;
}

.infobox-news-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}

.infobox-news-date {
color: #666;
font-size: 14px;
}

.infobox-news-category {
display: inline-block;
padding: 4px 12px;
font-size: 12px;
color: #FFF;
background: #333;
border-radius: 4px;
}

.infobox-news-category.press {
background: #2C5282;
}

.infobox-news-category.notice {
background: #666;
}

.infobox-news-category.release {
background: #38A169;
}

.infobox-news-head {
font-size: 18px;
font-weight: 600;
margin: 0 0 12px 0;
line-height: 1.5;
text-align: left;
}

.infobox-news-head a {
color: #1a365d;
text-decoration: none;
}

.infobox-news-head a:hover {
text-decoration: underline;
}

.infobox-news-excerpt {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
text-align: left;
}

@media (max-width: 600px) {
.infobox-news-frame {
padding: 16px;
}

.infobox-news-head {
font-size: 16px;
}
}