/**
 * ドクターエコ｜地域LP 共通スタイル（dreco-city-lp.css）
 * 全エリアのLPで共用。HTML側は一番外側を <div class="dreco-city-lp"> で囲むだけ。
 *
 * テーマCSSを遮断する仕組み
 *   1) .dreco-city-lp の中の全要素を all: revert でブラウザ初期値に戻す
 *   2) その上に、このファイルのデザインだけを重ねる（#main#main で詳細度を上げ、旧CSSやテーマに必ず勝つ）
 *   3) プラグイン出力（スライダー・FAQ等）は .dreco-clp-keep で囲めばリセット対象外
 *
 * クラス名の規則：外枠は dreco-city-lp、中の部品はすべて dreco-clp- で始まる
 * ※ タグページ用の dreco-area-lp.css / dreco-area-lp.php とは別物。名前が重ならないよう city に分けている
 */

/* ============================================================
   0. LPページではテーマ標準の投稿タイトルを隠す
   ============================================================ */
.single:has(.dreco-city-lp) .entry-title,
.page:has(.dreco-city-lp) .entry-title {
  display: none !important;
}

/* ============================================================
   1. テーマCSSの遮断
   ============================================================ */
#main .dreco-city-lp :where(*:not(.dreco-clp-keep, .dreco-clp-keep *, .toc, .toc *, .blogcard-wrap, .blogcard-wrap *)) {
  all: revert !important;
  box-sizing: border-box !important;
}
#main .dreco-city-lp :where(*:not(.dreco-clp-keep, .dreco-clp-keep *, .toc, .toc *, .blogcard-wrap, .blogcard-wrap *))::before,
#main .dreco-city-lp :where(*:not(.dreco-clp-keep, .dreco-clp-keep *, .toc, .toc *, .blogcard-wrap, .blogcard-wrap *))::after {
  content: none !important;
}

/* WordPressの自動整形が差し込む <p> と <br> を無効化 */
#main#main .dreco-city-lp p:not([class]):not(.dreco-clp-keep *) { display: contents !important; }
#main#main .dreco-city-lp br:not([class]):not(.dreco-clp-keep *) { display: none !important; }

/* ============================================================
   2. 土台
   ============================================================ */
#main#main .dreco-city-lp {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  text-align: left !important;
  -webkit-font-smoothing: antialiased !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp strong:not(.dreco-clp-keep *) {
  font-weight: 800 !important;
  color: #1e3a5f !important;
}

/* ============================================================
   3. セクション見出し（上下ライン＋緑の小ラベル）
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-section {
  display: block !important;
  margin: 56px 0 0 !important;
  scroll-margin-top: 90px !important;
}
#main#main .dreco-city-lp .dreco-clp-section-head {
  margin: 0 0 22px !important;
  padding: 18px 0 16px !important;
  border-top: 2px solid #2e5380 !important;
  border-bottom: 2px solid #2e5380 !important;
}
/* 見出し枠に、テーマやプラグインが自動挿入したブロック（最初のh2の直前に入るCTAなど）が紛れ込んでも表示しない */
#main#main .dreco-city-lp .dreco-clp-section-head > :not(.dreco-clp-eyebrow, h2, .dreco-clp-sec-lead, p:not([class])),
#main#main .dreco-city-lp .dreco-clp-section-head > p:not([class]):not(:has(.dreco-clp-eyebrow)):not(.dreco-clp-keep *) {
  display: none !important;
}
#main#main .dreco-city-lp .dreco-clp-eyebrow {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  line-height: 1.5 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-section-head h2 {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #1e3a5f !important;
  text-wrap: balance !important;
  word-break: auto-phrase !important;
}
#main#main .dreco-city-lp .dreco-clp-sec-lead {
  margin: 10px 0 0 !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}

/* ============================================================
   4. ファーストビュー
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-hero {
  display: block !important;
  padding: 40px 36px 34px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfe 55%, #eef4f9 100%) !important;
  box-shadow: 0 10px 30px rgba(30, 58, 95, .06) !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__authority {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  line-height: 1.7 !important;
  color: #27802f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__divider {
  margin: 0 .5em !important;
  color: #b9c7d5 !important;
  font-weight: 400 !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__headline {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__headline::after {
  content: "" !important;
  display: block !important;
  width: 70px !important;
  height: 3px !important;
  margin-top: 18px !important;
  border-radius: 2px !important;
  background: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__catch {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__main {
  display: block !important;
  margin-top: 6px !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__sub {
  display: block !important;
  margin-top: 4px !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
}
#main#main .dreco-city-lp .dreco-clp-hero__lead {
  margin: 20px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-hero-assurances {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 20px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#main#main .dreco-city-lp .dreco-clp-hero-assurances li {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: #334155 !important;
  white-space: nowrap !important;
}
#main#main .dreco-city-lp .dreco-clp-check-mark {
  margin-right: 5px !important;
  font-weight: 900 !important;
  color: #27802f !important;
}

/* ボタン（Web＝紺 ／ 電話＝緑） */
#main#main .dreco-city-lp .dreco-clp-hero-buttons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 20px 0 0 !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-navy,
#main#main .dreco-city-lp .dreco-clp-btn-green {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 14px 13px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-navy {
  background: #2e5380 !important;
  box-shadow: 0 8px 18px rgba(46, 83, 128, .25) !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-green {
  background: linear-gradient(to bottom, #489b41, #35802e) !important;
  box-shadow: 0 8px 18px rgba(53, 128, 46, .28) !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-navy:hover,
#main#main .dreco-city-lp .dreco-clp-btn-green:hover {
  transform: translateY(-2px) !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-sub {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  opacity: 1 !important;
}
#main#main .dreco-city-lp .dreco-clp-btn-main {
  display: block !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}

/* ============================================================
   5. 状況別カード（2列）
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-jump-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 22px 20px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .04) !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-area {
  align-self: flex-start !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  margin-top: 12px !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17.5px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-title .dreco-clp-situation { display: block !important; }
#main#main .dreco-city-lp .dreco-clp-jump-title .dreco-clp-solution {
  display: block !important;
  margin-top: 6px !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
  color: #27802f !important;
  word-break: auto-phrase !important;
  overflow-wrap: normal !important;
  text-wrap: pretty !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-desc {
  margin: 12px 0 16px !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-badge {
  margin-top: auto !important;
  padding-top: 12px !important;
  border-top: 1px dashed #dbe5ee !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-btn {
  display: block !important;
  margin-top: 14px !important;
  padding: 10px 12px !important;
  border: 1.5px solid #2e5380 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-jump-btn:hover {
  background: #2e5380 !important;
  color: #ffffff !important;
}

/* ============================================================
   6. 実例カード
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-case-card {
  margin: 0 0 24px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .04) !important;
  overflow: hidden !important;
  scroll-margin-top: 90px !important;
}
#main#main .dreco-city-lp .dreco-clp-case-price-bar {
  padding: 14px 16px !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f6f9fc !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
#main#main .dreco-city-lp .dreco-clp-case-price-label {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
#main#main .dreco-city-lp .dreco-clp-case-price-val {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #1e3a5f !important;
}
#main#main .dreco-city-lp .dreco-clp-case-price-tax {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-case-content {
  padding: 20px 22px 22px !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-case-specs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  padding: 12px 4px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  text-align: center !important;
}
#main#main .dreco-city-lp .dreco-clp-spec-item + .dreco-clp-spec-item {
  border-left: 1px solid #e2e8f0 !important;
}
#main#main .dreco-city-lp .dreco-clp-spec-label {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-spec-val {
  font-size: 16.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
  white-space: nowrap !important;
}
#main#main .dreco-city-lp .dreco-clp-case-desc {
  margin: 16px 0 0 !important;
  font-size: 15.5px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-case-link-btn {
  display: inline-block !important;
  margin-top: 14px !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #2e5380 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* ============================================================
   7. 対応エリア
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-area-box {
  margin: 56px 0 0 !important;
  padding: 26px 24px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 18px !important;
  background: #f6f9fc !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-area-title {
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-area-lead {
  margin: 10px 0 18px !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-area-list {
  display: grid !important;
  gap: 10px !important;
}
#main#main .dreco-city-lp .dreco-clp-area-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
#main#main .dreco-city-lp .dreco-clp-area-tag {
  flex: none !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
  white-space: nowrap !important;
}
#main#main .dreco-city-lp .dreco-clp-area-towns {
  font-size: 14.5px !important;
  line-height: 1.8 !important;
  color: #334155 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-area-note {
  margin-top: 14px !important;
  font-size: 13.5px !important;
  line-height: 1.7 !important;
  color: #475569 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}

/* ============================================================
   8. 行政回収との比較（2列・チェックリスト）
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-compare-wrap {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-card {
  padding: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-pro {
  border: 1.5px solid #2e5380 !important;
  background: #ffffff !important;
  box-shadow: 0 8px 20px rgba(46, 83, 128, .1) !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-lead {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-pro .dreco-clp-compare-lead {
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-title {
  margin: 6px 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-card ul {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-card li {
  position: relative !important;
  padding-left: 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-card li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 2px !important;
  top: 0 !important;
  font-weight: 900 !important;
  color: #94a3b8 !important;
}
#main#main .dreco-city-lp .dreco-clp-compare-pro li::before {
  color: #27802f !important;
}

/* ============================================================
   9. 見積もり前チェック
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-check-list {
  display: grid !important;
  gap: 12px !important;
}
#main#main .dreco-city-lp .dreco-clp-check-item {
  padding: 18px 20px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}
#main#main .dreco-city-lp .dreco-clp-check-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  background: #2e5380 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  vertical-align: middle !important;
}
#main#main .dreco-city-lp .dreco-clp-check-title {
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
  vertical-align: middle !important;
}
#main#main .dreco-city-lp .dreco-clp-check-desc {
  margin: 10px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}

/* ============================================================
   10. 最終CTA
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-final-cta {
  margin: 56px 0 0 !important;
  padding: 38px 30px 34px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #ffffff 0%, #fbfcfe 55%, #eef4f9 100%) !important;
  box-shadow: 0 10px 30px rgba(30, 58, 95, .06) !important;
  text-align: center !important;
}
#main#main .dreco-city-lp .dreco-clp-final-cta-label {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  line-height: 1.5 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-final-cta h2 {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #1e3a5f !important;
  text-wrap: balance !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-final-cta-line {
  display: block !important;
}
#main#main .dreco-city-lp .dreco-clp-final-cta-desc {
  margin: 16px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  text-align: left !important;
  padding: 0 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-final-cta .dreco-clp-hero-buttons {
  margin-top: 22px !important;
}

/* ============================================================
   11. タグ記事カード＋残り記事のリンク一覧（[dreco_tag_cards] の出力）
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-cards {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#main#main .dreco-city-lp .dreco-clp-card {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .04) !important;
  overflow: hidden !important;
  color: #334155 !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(30, 58, 95, .1) !important;
}
#main#main .dreco-city-lp .dreco-clp-card-thumb {
  display: block !important;
  aspect-ratio: 16 / 10 !important;
  background: #eef2f6 !important;
  overflow: hidden !important;
}
#main#main .dreco-city-lp .dreco-clp-card-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
}
#main#main .dreco-city-lp .dreco-clp-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 16px 18px 18px !important;
}
#main#main .dreco-city-lp .dreco-clp-card-title {
  display: block !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #1e3a5f !important;
  word-break: auto-phrase !important;
}
#main#main .dreco-city-lp .dreco-clp-card-desc {
  display: block !important;
  margin-top: 8px !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-card-more {
  display: block !important;
  margin-top: auto !important;
  padding-top: 12px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-card-arrow {
  margin-left: .5em !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest {
  display: block !important;
  margin: 22px 0 0 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-summary {
  display: block !important;
  position: relative !important;
  padding: 15px 52px 15px 22px !important;
  list-style: none !important;
  cursor: pointer !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-summary::-webkit-details-marker {
  display: none !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-summary::after {
  content: "" !important;
  position: absolute !important;
  right: 24px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  margin-top: -8px !important;
  border: solid #2e5380 !important;
  border-width: 0 2.5px 2.5px 0 !important;
  transform: rotate(45deg) !important;
  transition: transform .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest[open] .dreco-clp-cards-rest-summary::after {
  margin-top: -2px !important;
  transform: rotate(-135deg) !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-count {
  margin-left: .3em !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 22px 10px !important;
  border-top: 1px solid #e2e8f0 !important;
  list-style: none !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px dashed #dbe5ee !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list li:last-child {
  border-bottom: 0 !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list a {
  display: block !important;
  position: relative !important;
  padding: 12px 0 12px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.7 !important;
  color: #1e3a5f !important;
  text-decoration: none !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list a::before {
  content: "›" !important;
  position: absolute !important;
  left: 2px !important;
  top: 11px !important;
  font-weight: 900 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-rest-list a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-more {
  margin: 22px 0 0 !important;
  text-align: center !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-more-btn {
  display: inline-block !important;
  min-width: 220px !important;
  padding: 13px 28px !important;
  border-radius: 999px !important;
  background: #2e5380 !important;
  box-shadow: 0 8px 18px rgba(46, 83, 128, .25) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: transform .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-cards-more-btn:hover {
  transform: translateY(-2px) !important;
}

/* ============================================================
   12. 追加ブロック（エリアによって使うもの）
   ============================================================ */

/* 相談内容カード（2列） */
#main#main .dreco-city-lp .dreco-clp-needs-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#main#main .dreco-city-lp .dreco-clp-needs-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .04) !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-needs-badge {
  align-self: flex-start !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-needs-title {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  font-size: 17.5px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-needs-desc {
  margin: 10px 0 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}

/* 状況別カードのすぐ下に相談内容カードを続ける場合の間隔 */
#main#main .dreco-city-lp .dreco-clp-jump-grid + .dreco-clp-needs-grid {
  margin-top: 16px !important;
}

/* 実例へのジャンプナビ（2列） */
#main#main .dreco-city-lp .dreco-clp-pill-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#main#main .dreco-city-lp .dreco-clp-pill-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 18px 15px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 16px !important;
  background: #f6f9fc !important;
  color: #334155 !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: transform .15s ease, background .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-pill-item:hover {
  background: #eef5f9 !important;
  transform: translateY(-2px) !important;
}
#main#main .dreco-city-lp .dreco-clp-pill-area {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-pill-action {
  display: block !important;
  margin-top: 2px !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-pill-price {
  display: block !important;
  margin-top: 4px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
}

/* 実例カードの見出し（スライダーの上に置く場合） */
#main#main .dreco-city-lp .dreco-clp-case-title {
  margin: 0 !important;
  padding: 18px 22px 16px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

/* カード一覧の下の注記 */
#main#main .dreco-city-lp .dreco-clp-more-cases-note {
  margin: 14px 0 0 !important;
  padding: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
}

/* 信頼性ブロック（追加請求ゼロの理由など） */
#main#main .dreco-city-lp .dreco-clp-trust-box {
  margin: 56px 0 0 !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 18px !important;
  background: #f6f9fc !important;
  overflow: hidden !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-header {
  padding: 16px 24px !important;
  background: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-title {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  text-wrap: balance !important;
  word-break: auto-phrase !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-body {
  padding: 22px 24px 24px !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-desc {
  margin: 0 0 16px !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-list {
  display: grid !important;
  gap: 10px !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-item {
  padding: 14px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-item-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-tag {
  flex: none !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
  white-space: nowrap !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-item-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-item-text {
  display: block !important;
  margin-top: 6px !important;
  font-size: 14.5px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  text-wrap: pretty !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 20px !important;
  margin-top: 16px !important;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  background: #eef5f9 !important;
}
#main#main .dreco-city-lp .dreco-clp-trust-badge-item {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #1e3a5f !important;
  white-space: nowrap !important;
}

/* 比較カードの補足文 */
#main#main .dreco-city-lp .dreco-clp-compare-note {
  margin: 14px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px dashed #dbe5ee !important;
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  color: #475569 !important;
  text-wrap: pretty !important;
}

/* 補足ボックス（判断の目安・現場メモ・公式情報など） */
#main#main .dreco-city-lp .dreco-clp-note-box {
  margin: 16px 0 0 !important;
  padding: 18px 20px 20px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 16px !important;
  background: #f6f9fc !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-note-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  line-height: 1.5 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-note-text {
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #334155 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}
#main#main .dreco-city-lp .dreco-clp-link-list {
  display: grid !important;
  gap: 8px !important;
  margin: 14px 0 0 !important;
}
#main#main .dreco-city-lp .dreco-clp-link-list a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 11px 16px !important;
  border: 1px solid #dbe5ee !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #2e5380 !important;
  text-decoration: none !important;
  transition: background .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-link-list a::after {
  content: "›" !important;
  flex: none !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #27802f !important;
}
#main#main .dreco-city-lp .dreco-clp-link-list a:hover {
  background: #eef5f9 !important;
}

/* 最終CTA内の安心ポイントは中央寄せ */
#main#main .dreco-city-lp .dreco-clp-final-cta .dreco-clp-hero-assurances {
  justify-content: center !important;
}

/* 段落を2つ続ける場合の間隔 */
#main#main .dreco-city-lp .dreco-clp-hero__lead + .dreco-clp-hero__lead,
#main#main .dreco-city-lp .dreco-clp-final-cta-desc + .dreco-clp-final-cta-desc {
  margin-top: 10px !important;
}

/* ============================================================
   12b. 「任せられる根拠」ブロック（実績タイル・対応力・見積もり）
   ============================================================ */
#main#main .dreco-city-lp .dreco-clp-proof-block {
  margin: 28px 0 0 !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-h3 {
  display: flex !important;
  align-items: center !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-tiles {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-tile {
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 95, .04) !important;
  overflow: hidden !important;
  color: #334155 !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 22px rgba(30, 58, 95, .1) !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-thumb {
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  background: #eef2f6 !important;
  overflow: hidden !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-body {
  display: block !important;
  padding: 12px 14px 14px !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-area {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-title {
  display: block !important;
  margin-top: 6px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #1e3a5f !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-price {
  display: block !important;
  margin-top: 4px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-price small {
  margin-left: 2px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-rows {
  display: grid !important;
  gap: 10px !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-row {
  padding: 14px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  text-align: left !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-label {
  display: inline-block !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #eef5f9 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  line-height: 1.5 !important;
  color: #2e5380 !important;
}
#main#main .dreco-city-lp .dreco-clp-proof-text {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  text-wrap: pretty !important;
  line-break: strict !important;
}

/* ファーストビューから施工事例へ飛ぶテキストリンク */
#main#main .dreco-city-lp .dreco-clp-hero-jump {
  display: block !important;
  margin: 16px 0 0 !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  line-height: 1.6 !important;
  color: #2e5380 !important;
  text-align: center !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* 汎用：上に間隔を空ける */
#main#main .dreco-city-lp .dreco-clp-mt {
  margin-top: 22px !important;
}

/* ============================================================
   13. スマホ（600px以下）
   ============================================================ */
@media screen and (max-width: 600px) {
  #main#main .dreco-city-lp .dreco-clp-section,
  #main#main .dreco-city-lp .dreco-clp-area-box,
  #main#main .dreco-city-lp .dreco-clp-final-cta { margin-top: 44px !important; }
  #main#main .dreco-city-lp .dreco-clp-section-head h2 { font-size: 21px !important; }

  #main#main .dreco-city-lp .dreco-clp-hero { padding: 28px 20px 24px !important; border-radius: 18px !important; }
  #main#main .dreco-city-lp .dreco-clp-hero__headline { font-size: 25px !important; }
  #main#main .dreco-city-lp .dreco-clp-hero__lead { font-size: 15.5px !important; }
  #main#main .dreco-city-lp .dreco-clp-hero-assurances { flex-direction: column !important; gap: 4px !important; }
  #main#main .dreco-city-lp .dreco-clp-btn-main { font-size: 15.5px !important; }
  #main#main .dreco-city-lp .dreco-clp-hero__sub { font-size: 17px !important; }
  #main#main .dreco-city-lp br.dreco-clp-pc-only { display: none !important; }

  #main#main .dreco-city-lp .dreco-clp-hero-buttons,
  #main#main .dreco-city-lp .dreco-clp-jump-grid,
  #main#main .dreco-city-lp .dreco-clp-needs-grid,
  #main#main .dreco-city-lp .dreco-clp-pill-nav,
  #main#main .dreco-city-lp .dreco-clp-cards,
  #main#main .dreco-city-lp .dreco-clp-compare-wrap { grid-template-columns: minmax(0, 1fr) !important; }

  #main#main .dreco-city-lp .dreco-clp-case-content { padding: 16px 16px 18px !important; }
  #main#main .dreco-city-lp .dreco-clp-proof-tiles { gap: 10px !important; }
  #main#main .dreco-city-lp .dreco-clp-proof-body { padding: 10px 11px 12px !important; }
  #main#main .dreco-city-lp .dreco-clp-proof-title { font-size: 14px !important; }
  #main#main .dreco-city-lp .dreco-clp-proof-price { font-size: 16.5px !important; }
  #main#main .dreco-city-lp .dreco-clp-proof-h3 { font-size: 17px !important; }
  #main#main .dreco-city-lp .dreco-clp-case-title { padding: 16px 16px 14px !important; }
  #main#main .dreco-city-lp .dreco-clp-trust-box { margin-top: 44px !important; }
  #main#main .dreco-city-lp .dreco-clp-trust-header { padding: 14px 16px !important; }
  #main#main .dreco-city-lp .dreco-clp-trust-body { padding: 18px 16px 20px !important; }
  #main#main .dreco-city-lp .dreco-clp-trust-badges { flex-direction: column !important; gap: 4px !important; }
  #main#main .dreco-city-lp .dreco-clp-case-specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 10px !important; }
  #main#main .dreco-city-lp .dreco-clp-spec-item:nth-child(odd) { border-left: 0 !important; }
  #main#main .dreco-city-lp .dreco-clp-case-price-val { font-size: 25px !important; }

  #main#main .dreco-city-lp .dreco-clp-area-box { padding: 22px 16px !important; }
  #main#main .dreco-city-lp .dreco-clp-area-item { flex-direction: column !important; gap: 6px !important; }
  #main#main .dreco-city-lp .dreco-clp-area-tag { align-self: flex-start !important; }

  #main#main .dreco-city-lp .dreco-clp-final-cta { padding: 30px 20px 26px !important; border-radius: 18px !important; }
  #main#main .dreco-city-lp .dreco-clp-final-cta h2 { font-size: 19px !important; }
  #main#main .dreco-city-lp .dreco-clp-final-cta-line { display: inline !important; }

}