/* ==============================================================
   すまいポート21 宇都宮本店 LP カスタムスタイル v3.0
   場所: WordPress「外観 > カスタマイズ > 追加CSS」に貼り付け
============================================================== */

/* ---- CSS変数 ---- */
:root {
  --sp21-orange: #FF6E00;
  --sp21-orange-d: #E55C00;
  --sp21-navy: #1C1C2E;
  --sp21-navy-m: #2D3A5E;
  --sp21-bg: #F8F7F5;
  --sp21-brd: #E8E8E8;
  --sp21-txt: #3A3A3A;
  --sp21-mut: #777;
  --sp21-sh: 0 3px 20px rgba(0,0,0,.08);
  --sp21-r: 10px;
  --sp21-r-sm: 6px;
  --sp21-inner: 1100px;
}

/* ---- ベース ---- */
#sp21lp-fv, #sp21lp { font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif !important; }
#sp21lp *, #sp21lp-fv * { box-sizing: border-box !important; }
#sp21lp a, #sp21lp-fv a { text-decoration: none !important; color: white !important; }
#sp21lp p { margin-bottom: 0 !important; }

/* ==============================================================
   FV：左テキスト ＋ 右写真の分割レイアウト
============================================================== */
#sp21lp-fv.eyecatch_inc.else.long {
  background: var(--sp21-navy) !important;
  padding: 0 !important;
  text-align: left !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 580px !important;
  display: flex !important;
  align-items: stretch !important;
}
#sp21lp-fv .sp21lp-fv-wrap {
  display: flex !important;
  width: 100% !important;
  min-height: 580px !important;
  align-items: stretch !important;
}
/* 左：テキスト */
#sp21lp-fv .sp21lp-fv-left {
  flex: 0 0 52% !important;
  background: linear-gradient(150deg, #1C1C2E 0%, #2D3A5E 100%) !important;
  padding: 72px 48px 64px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
}
/* 右：写真 */
#sp21lp-fv .sp21lp-fv-right {
  flex: 0 0 48% !important;
  position: relative !important;
  overflow: hidden !important;
  min-height: 500px !important;
}
#sp21lp-fv .sp21lp-fv-right img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
/* FV内テキスト */
.fv-kw-tag {
  display: inline-block !important;
  background: rgba(255,110,0,.18) !important;
  border: 1px solid rgba(255,110,0,.45) !important;
  color: #FFB380 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 20px !important;
  letter-spacing: .05em !important;
}
#sp21lp-fv h1 {
  color: #fff !important;
  font-size: clamp(26px, 2.8vw, 38px) !important;
  font-weight: 900 !important;
  line-height: 1.42 !important;
  margin-bottom: 18px !important;
  letter-spacing: -.01em !important;
}
.fv-sub {
  color: rgba(255,255,255,.78) !important;
  font-size: 14px !important;
  line-height: 1.85 !important;
  margin-bottom: 24px !important;
}
.fv-sub strong { color: #fff !important; }
/* FV trust badges */
.fv-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 28px !important;
}
.fv-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 30px !important;
}
.fv-badge i { color: #FFB380 !important; }
/* FV ボタン群 */
.sp21lp-fv-btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
}
.sp21lp-cta-main {
  display: block !important;
  background: var(--sp21-orange) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 17px 32px !important;
  border-radius: 4px !important;
  text-align: center !important;
  box-shadow: 0 4px 18px rgba(255,110,0,.35) !important;
  letter-spacing: .02em !important;
  border: none !important;
  text-decoration: none !important;
}
.sp21lp-cta-main::after { content: ' ›' !important; font-size: 1.1em !important; }
.sp21lp-fv-cta-sub {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
}
/* FV offer badge */
.sp21lp-fv-offer { margin-top: 4px !important; }
.sp21lp-offer {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  background: rgba(245,166,35,.15) !important;
  border: 1px solid rgba(245,166,35,.5) !important;
  border-radius: 8px !important;
  padding: 10px 18px !important;
}
.sp21lp-offer-icon { font-size: 20px !important; color: #F5A623 !important; flex-shrink: 0 !important; }
.sp21lp-offer-label {
  font-size: 10px !important; font-weight: 700 !important;
  color: #F5A623 !important; letter-spacing: .1em !important; display: block !important; margin-bottom: 2px !important;
}
.sp21lp-offer-val { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; display: block !important; }
.sp21lp-offer-val em { color: #FFD88A !important; font-style: normal !important; }
.sp21lp-offer.inv { background: rgba(255,255,255,.1) !important; border-color: rgba(245,166,35,.55) !important; }
.sp21lp-offer.inv .sp21lp-offer-label { color: #FFD88A !important; }
.sp21lp-offer.inv .sp21lp-offer-val { color: #fff !important; }
.sp21lp-offer.inv .sp21lp-offer-val em { color: #FFD88A !important; font-weight: 800;}

/* ==============================================================
   contents00 CTA bar（FV下のバー）
============================================================== */
#sp21lp-cta0.contents00 {
  background: #fff !important; text-align: center !important;
  padding: 24px 20px !important; border-bottom: 2px solid #F0F0F0 !important; margin: 0 !important;
}
#sp21lp-cta0.contents00 a,
#sp21lp-cta0.contents00 a.bold {
  display: inline-block !important; background: var(--sp21-orange) !important; color: #fff !important;
  font-weight: 800 !important; font-size: 17px !important; padding: 16px 52px !important;
  border-radius: 4px !important; text-decoration: none !important; margin: 0 !important;
  box-shadow: 0 4px 16px rgba(255,110,0,.3) !important;
}
.sp21lp-cta-sub-text {
  margin-top: 12px !important; font-size: 12px !important; color: #999 !important;
  letter-spacing: .04em !important; display: block !important;
}
.sp21lp-cta-sub-text span { margin: 0 8px !important; }

/* ==============================================================
   共通：左見出し ＋ 右コンテンツ のサイドレイアウト
============================================================== */
.sp21lp-side-layout {
  display: flex !important;
  align-items: flex-start !important;
  gap: 48px !important;
  max-width: var(--sp21-inner) !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.sp21lp-side-head {
  width: 210px !important;
  flex-shrink: 0 !important;
  padding-top: 6px !important;
}
.sp21lp-side-content { flex: 1 !important; min-width: 0 !important; }

/* ==============================================================
   セクション共通
============================================================== */
.sp21lp-sec-label {
  display: inline-block !important; background: var(--sp21-orange) !important; color: #fff !important;
  font-size: 11px !important; font-weight: 700 !important; padding: 4px 14px !important;
  border-radius: 30px !important; margin-bottom: 12px !important; letter-spacing: .1em !important;
}
.sp21lp-sec-label.light { background: rgba(255,110,0,.12) !important; color: var(--sp21-orange) !important; }
.sp21lp-sec-h2 {
  font-size: clamp(19px, 2.2vw, 26px) !important; font-weight: 900 !important;
  color: var(--sp21-navy) !important; line-height: 1.5 !important; margin: 0 0 0 0 !important;
}
.sp21lp-sec-h2 span { border-bottom: 3px solid var(--sp21-orange) !important; padding-bottom: 3px !important; font-weight: 800;}
.sp21lp-sec-h2-center { text-align: center !important; }
.sp21lp-sec-desc {
  margin-top: 14px !important; font-size: 14px !important; color: #666 !important; line-height: 1.85 !important;
}
/* 中央見出し用ラッパー */
.sp21lp-sec-header {
  text-align: center !important; margin-bottom: 40px !important;
}

/* ==============================================================
   共感ゾーン：左見出し ＋ 右2×2カードグリッド
============================================================== */
section.contents01#sp21lp-empathy {
  padding: 80px 0 !important; background: #fff !important; margin: 0 !important; max-width: none !important;
}
/* 共感ゾーン pain cards */
.sp21lp-pain-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important;
}
.sp21lp-pain-card {
  background: #fff !important; border: 1px solid var(--sp21-brd) !important;
  border-radius: var(--sp21-r) !important; overflow: hidden !important;
  box-shadow: var(--sp21-sh) !important; display: block !important; padding: 0 !important;
}
.sp21lp-pain-img-wrap { position: relative !important; }
.sp21lp-pain-img {
  width: 100% !important; height: 140px !important; object-fit: cover !important; display: block !important;
}
.sp21lp-pain-alpha {
  position: absolute !important; top: 10px !important; left: 10px !important;
  width: 28px !important; height: 28px !important; background: var(--sp21-navy) !important;
  color: #fff !important; border-radius: 50% !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-weight: 900 !important; font-size: 13px !important;
}
.sp21lp-pain-card-body {
  padding: 14px 16px 16px !important; font-size: 13px !important; line-height: 1.75 !important; color: var(--sp21-txt) !important;
}
.sp21lp-pain-card-body strong{
  font-weight: 800;
}
/* 共感ゾーンのブリッジ */
.sp21lp-bridge {
  margin-top: 32px !important; text-align: center !important;
  background: #FFF5EE !important; border: 2px solid var(--sp21-orange) !important;
  border-radius: var(--sp21-r) !important; padding: 20px 28px !important;
  max-width: var(--sp21-inner) !important; margin-left: auto !important; margin-right: auto !important;
}
.sp21lp-bridge-main {
  font-size: clamp(15px, 1.8vw, 18px) !important; font-weight: 800 !important;
  color: var(--sp21-navy) !important; line-height: 1.6 !important; margin-bottom: 8px !important;
}
.sp21lp-bridge-main em { color: var(--sp21-orange) !important; font-style: normal !important; font-weight: 800;}
.sp21lp-bridge-sub { font-size: 13px !important; color: #666 !important; line-height: 1.75 !important; }

/* ==============================================================
   安心ポイント：4カード横並び
============================================================== */
#sp21lp-safe {
  background: var(--sp21-bg) !important; padding: 80px 0 !important;
}
.sp21lp-safe-row {
  display: flex !important; gap: 16px !important; align-items: stretch !important;
}
.sp21lp-safe-card {
  flex: 1 !important; min-width: 0 !important;
  background: #fff !important; border-radius: var(--sp21-r) !important;
  box-shadow: var(--sp21-sh) !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; padding: 0 !important;
  position: relative !important; transition: transform .2s, box-shadow .2s !important;
}
.sp21lp-safe-card:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 28px rgba(0,0,0,.13) !important; }
.sp21lp-safe-card.star { border: 2px solid var(--sp21-orange) !important; }
.sp21lp-safe-card.star::before {
  content: 'イチオシ' !important; position: absolute !important; top: 14px !important; right: -26px !important;
  background: var(--sp21-orange) !important; color: #fff !important; font-size: 9px !important;
  font-weight: 700 !important; padding: 4px 36px !important; transform: rotate(45deg) !important;
  letter-spacing: .04em !important; z-index: 2 !important;
}
.sp21lp-safe-img {
  width: 100% !important; height: 140px !important; object-fit: cover !important;
  display: block !important; flex-shrink: 0 !important;
}
.sp21lp-safe-inner {
  padding: 16px 18px 20px !important; flex: 1 !important; display: flex !important;
  flex-direction: column !important;
}
.sp21lp-safe-num {
  font-size: 10px !important; font-weight: 700 !important; color: var(--sp21-orange) !important;
  letter-spacing: .12em !important; margin-bottom: 8px !important;
}
.sp21lp-safe-icon { font-size: 22px !important; color: var(--sp21-orange) !important; margin-bottom: 10px !important; display: block !important; }
.sp21lp-safe-title {
  font-size: clamp(13px, 1.2vw, 15px) !important; font-weight: 800 !important;
  color: var(--sp21-navy) !important; line-height: 1.5 !important; margin-bottom: 8px !important;
}
.sp21lp-safe-title em { color: var(--sp21-orange) !important; font-style: normal !important; font-weight: 800;}
.sp21lp-safe-body { font-size: 12px !important; color: #666 !important; line-height: 1.8 !important; }

/* ==============================================================
   中間CTA
============================================================== */
#sp21lp-midcta {
  background: var(--sp21-navy) !important; padding: 56px 24px !important; text-align: center !important;
}
.sp21lp-midcta-inner { max-width: 700px !important; margin: 0 auto !important; }
#sp21lp-midcta .sp21lp-midcta-text {
  color: #fff !important; font-size: clamp(17px, 2vw, 22px) !important;
  font-weight: 800 !important; margin-bottom: 8px !important; line-height: 1.6 !important;
}
#sp21lp-midcta .sp21lp-midcta-sub { color: rgba(255,255,255,.6) !important; font-size: 14px !important; margin-bottom: 24px !important; }
.sp21lp-cta-inv {
  display: inline-block !important; background: var(--sp21-orange) !important; color: #fff !important;
  font-weight: 800 !important; font-size: 16px !important; padding: 16px 52px !important;
  border-radius: 4px !important; box-shadow: 0 4px 20px rgba(255,110,0,.4) !important;
  text-decoration: none !important;
}
.sp21lp-cta-inv::after { content: ' ›' !important; font-size: 1.1em !important; }

/* ==============================================================
   ステップ：左見出し ＋ 右3ステップ横並び
============================================================== */
#sp21lp-flow { background: #fff !important; padding: 80px 0 !important; }
.sp21lp-steps {
  display: flex !important; align-items: stretch !important; gap: 0 !important;
}
.sp21lp-step {
  flex: 1 !important; padding: 0 !important; text-align: center !important;
  border: 1.5px solid var(--sp21-brd) !important; border-radius: var(--sp21-r) !important;
  margin: 0 6px !important; background: #fff !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  transition: border-color .2s !important;
}
.sp21lp-step:hover { border-color: var(--sp21-orange) !important; }
.sp21lp-step-img {
  width: 100% !important; height: 140px !important; object-fit: cover !important;
  display: block !important; flex-shrink: 0 !important;
}
.sp21lp-step-inner {
  padding: 18px 16px 20px !important; flex: 1 !important; display: flex !important;
  flex-direction: column !important; align-items: center !important;
}
.sp21lp-step-badge {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 36px !important; height: 36px !important; background: var(--sp21-orange) !important;
  color: #fff !important; font-weight: 900 !important; border-radius: 50% !important;
  font-size: 16px !important; margin: 0 auto 12px !important;
}
.sp21lp-step-title {
  font-size: 15px !important; font-weight: 800 !important; color: var(--sp21-navy) !important;
  margin-bottom: 4px !important; line-height: 1.4 !important;
}
.sp21lp-step-time {
  display: inline-block !important; background: var(--sp21-bg) !important;
  color: #888 !important; font-size: 11px !important; padding: 3px 10px !important;
  border-radius: 20px !important; margin-bottom: 10px !important;
}
.sp21lp-step-body { font-size: 12px !important; color: #666 !important; line-height: 1.75 !important; }
.sp21lp-arrow {
  display: flex !important; align-items: center !important; color: var(--sp21-orange) !important;
  font-size: 18px !important; padding: 0 2px !important; flex-shrink: 0 !important; margin-top: 80px !important;
}
.sp21lp-flow-note {
  text-align: center !important; margin-top: 20px !important;
  font-size: 12px !important; color: #bbb !important;
}
.sp21lp-flow-note i { color: var(--sp21-orange) !important; }

/* ==============================================================
   社会的証明
============================================================== */
#sp21lp-proof { background: var(--sp21-bg) !important; padding: 80px 24px !important; }
.sp21lp-inner { max-width: var(--sp21-inner) !important; margin: 0 auto !important; }
.sp21lp-numbers {
  display: grid !important; grid-template-columns: repeat(3,1fr) !important;
  gap: 20px !important; margin-bottom: 52px !important;
}
.sp21lp-num-card {
  background: #fff !important; text-align: center !important; padding: 28px 16px !important;
  border-radius: var(--sp21-r) !important; box-shadow: var(--sp21-sh) !important;
  border-top: 4px solid var(--sp21-orange) !important;
}
.sp21lp-num-val {
  font-size: clamp(34px,4.5vw,46px) !important; font-weight: 900 !important;
  color: var(--sp21-orange) !important; line-height: 1 !important;
  margin-bottom: 8px !important; display: block !important;
}
.sp21lp-num-val span { font-size: 58% !important; }
.sp21lp-num-label { font-size: 12px !important; color: #888 !important; line-height: 1.6 !important; }
/* 声カード：横並び（写真左＋テキスト右） */
.sp21lp-voice-grid {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px !important;
}
.sp21lp-voice-card {
  background: #fff !important; border-radius: var(--sp21-r) !important;
  box-shadow: var(--sp21-sh) !important; overflow: hidden !important;
  display: flex !important; align-items: stretch !important;
}
.sp21lp-voice-photo {
  flex: 0 0 130px !important; overflow: hidden !important;
}
.sp21lp-voice-photo img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
}
.sp21lp-voice-body {
  flex: 1 !important; padding: 20px 20px 18px !important; display: flex !important;
  flex-direction: column !important; justify-content: space-between !important;
}
.sp21lp-voice-case {
  display: inline-block !important; background: #FFF0E0 !important; color: var(--sp21-orange) !important;
  font-size: 10px !important; font-weight: 700 !important; padding: 3px 10px !important;
  border-radius: 20px !important; margin-bottom: 10px !important; letter-spacing: .04em !important;
}
.sp21lp-voice-text { font-size: 13px !important; line-height: 1.85 !important; color: #444 !important; flex: 1 !important; }
.sp21lp-voice-meta { font-size: 11px !important; color: #bbb !important; margin-top: 12px !important; }

/* ==============================================================
   FAQ
============================================================== */
#sp21lp-faq { background: #fff !important; padding: 80px 24px !important; }
.sp21lp-faq-inner { max-width: 820px !important; margin: 0 auto !important; }
.sp21lp-faq-list { list-style: none !important; padding: 0 !important; }
.sp21lp-faq-item { border-bottom: 1px solid var(--sp21-brd) !important; }
.sp21lp-faq-item:first-child { border-top: 1px solid var(--sp21-brd) !important; }
.sp21lp-faq-q {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  padding: 20px 0 !important;
}
.sp21lp-faq-q-badge {
  flex-shrink: 0 !important; width: 26px !important; height: 26px !important;
  background: var(--sp21-orange) !important; color: #fff !important;
  border-radius: var(--sp21-r-sm) !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-weight: 800 !important; font-size: 12px !important; margin-top: 2px !important;
}
.sp21lp-faq-q-text {
  font-size: 14px !important; font-weight: 700 !important; color: var(--sp21-navy) !important;
  line-height: 1.65 !important; flex: 1 !important;
}
.sp21lp-faq-a {
  display: flex !important; align-items: flex-start !important; gap: 12px !important;
  padding: 0 0 20px !important; font-size: 13px !important; color: #666 !important; line-height: 1.85 !important;
}
.sp21lp-faq-a-badge {
  flex-shrink: 0 !important; width: 26px !important; height: 26px !important;
  border: 1px solid var(--sp21-orange) !important; color: var(--sp21-orange) !important;
  border-radius: var(--sp21-r-sm) !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
  font-weight: 800 !important; font-size: 12px !important; margin-top: 2px !important;
  background: transparent !important;
}

/* ==============================================================
   最終CTA：左テキスト ＋ 右ボタン2つ縦並び
============================================================== */
section#sp21lp-finalcta.contents05 { padding: 0 !important; background: none !important; }
.sp21lp-finalcta-split {
  background: linear-gradient(135deg, var(--sp21-navy) 0%, var(--sp21-navy-m) 100%) !important;
  display: flex !important; align-items: center !important;
  padding: 56px 48px !important; gap: 48px !important;
}
.sp21lp-finalcta-txt {
  flex: 1 !important;
}
.sp21lp-finalcta-txt h2 {
  color: #fff !important; font-size: clamp(19px, 2.2vw, 26px) !important;
  font-weight: 900 !important; line-height: 1.5 !important; margin-bottom: 12px !important;
}
.sp21lp-finalcta-txt p {
  color: rgba(255,255,255,.78) !important; font-size: 14px !important; line-height: 1.85 !important;
}
.sp21lp-finalcta-btns {
  flex: 0 0 280px !important; display: flex !important; flex-direction: column !important; gap: 12px !important;
}
.sp21lp-btn-white {
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--sp21-orange) !important; color: #fff !important;
  font-weight: 800 !important; font-size: 15px !important; padding: 16px 24px !important;
  border-radius: 4px !important; text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255,110,0,.35) !important;
}
.sp21lp-btn-white::after { content: ' ›' !important; font-size: 1.1em !important; margin-left: 2px !important; }
.sp21lp-btn-outline {
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 8px !important; background: transparent !important; color: #fff !important;
  font-weight: 700 !important; font-size: 14px !important; padding: 14px 24px !important;
  border-radius: 4px !important; border: 1.5px solid rgba(255,255,255,.55) !important;
  text-decoration: none !important;
}

/* ==============================================================
   contents02 リセット
============================================================== */
section.contents02 { padding: 0 !important; background: none !important; max-width: none !important; width: 100% !important; }

/* ==============================================================
   レスポンシブ（モバイル）
============================================================== */
@media (max-width: 767px) {
  /* FV */
  #sp21lp-fv .sp21lp-fv-wrap { flex-direction: column !important; min-height: auto !important; }
  #sp21lp-fv.eyecatch_inc.else.long { min-height: auto !important; }
  #sp21lp-fv .sp21lp-fv-left { flex: none !important; width: 100% !important; padding: 44px 20px 36px !important; }
  #sp21lp-fv .sp21lp-fv-right { flex: none !important; width: 100% !important; height: 220px !important; min-height: 220px !important; }
  #sp21lp-fv h1 { font-size: 26px !important; }
  .sp21lp-fv-btns .sp21lp-cta-main, .sp21lp-fv-btns .sp21lp-fv-cta-sub { padding: 15px 24px !important; font-size: 14px !important; }
  /* 共感 */
  section.contents01#sp21lp-empathy { padding: 52px 0 !important; }
  .sp21lp-side-layout { flex-direction: column !important; gap: 24px !important; padding: 0 16px !important; }
  .sp21lp-side-head { width: 100% !important; }
  .sp21lp-pain-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  /* 安心 */
  #sp21lp-safe { padding: 52px 0 !important; }
  .sp21lp-safe-row { flex-wrap: wrap !important; gap: 12px !important; }
  .sp21lp-safe-card { flex: 0 0 calc(50% - 6px) !important; }
  .sp21lp-safe-card.star::before { display: none !important; }
  /* ステップ */
  #sp21lp-flow { padding: 52px 0 !important; }
  .sp21lp-steps { flex-direction: column !important; }
  .sp21lp-arrow { transform: rotate(90deg) !important; margin: 4px auto !important; margin-top: 4px !important; }
  .sp21lp-step { margin: 4px 0 !important; }
  /* 証明 */
  #sp21lp-proof { padding: 52px 16px !important; }
  .sp21lp-numbers { grid-template-columns: 1fr 1fr !important; }
  .sp21lp-voice-grid { grid-template-columns: 1fr !important; }
  .sp21lp-voice-photo { flex: 0 0 110px !important; }
  /* FAQ */
  #sp21lp-faq { padding: 52px 16px !important; }
  /* 最終CTA */
  .sp21lp-finalcta-split { flex-direction: column !important; padding: 44px 20px !important; gap: 28px !important; }
  .sp21lp-finalcta-btns { flex: none !important; width: 100% !important; }
  /* 中間CTA */
  #sp21lp-midcta { padding: 44px 16px !important; }
}

/* ==============================================================
   CVR改善 追加スタイル（2026-07）
   施策②：予約の軽さ注記　施策④：共感ゾーン直後CTA
============================================================== */

/* ---- 予約の軽さ注記 ---- */
.sp21lp-cta-ease {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.65) !important;
  letter-spacing: .03em !important;
  margin: 8px 0 4px !important;
  text-align: center !important;
  line-height: 1.6 !important;
}
/* 白背景セクション内では暗い色に */
#sp21lp-empathy .sp21lp-cta-ease,
#sp21lp-cta0 .sp21lp-cta-ease {
  color: #999 !important;
}
/* 中間CTA・最終CTA（ネイビー背景）用 */
.sp21lp-cta-ease.inv {
  color: rgba(255,255,255,.6) !important;
}

/* ---- 共感ゾーン直後のミニCTA ---- */
.sp21lp-bridge-cta {
  margin-top: 20px !important;
  padding-top: 20px !important;
  border-top: 1px dashed rgba(255,110,0,.35) !important;
  text-align: center !important;
}
.sp21lp-bridge-cta .sp21lp-cta-main {
  max-width: 380px !important;
  margin: 0 auto !important;
}
.sp21lp-bridge-cta .sp21lp-cta-ease {
  color: #999 !important;
  margin-top: 10px !important;
}

/* FV内の軽さ注記の位置調整 */
.sp21lp-fv-btns .sp21lp-cta-ease {
  margin: -4px 0 4px !important;
}

@media (max-width: 767px) {
  .sp21lp-cta-ease { font-size: 10.5px !important; }
  .sp21lp-bridge-cta .sp21lp-cta-main { width: 100% !important; }
}
