/* =========================================================================
   共通CTA部品 sc-cta — 唯一の正本（template-parts/sc-cta.php 専用）
   --------------------------------------------------------------------------
   部品を使う全ページ（front-page.php / page-about.php 等）が、各ページ本体CSSの
   「後」に必ずこの1ファイルを読み込むこと。
   余白・サイズが「ページによって変わらない」ことを保証するため、すべて .sc-cta
   スコープの高詳細度(0,2,0)で固定し、各ページ本体CSS（suwa-christy.css / about.css）
   側に残る .sc-btn-g / .sc-cta__sub 等の差異（padding 46px↔40px、sub padding 20px 等）を
   確実に打ち消す。CTAの見た目を直すときは「このファイルだけ」を編集すればよい。
   使用変数（--c-sub / --c-green / --c-green-d / --ease / --maxw）は各ページ :root 定義を共用。
   ========================================================================= */
.sc-cta{ background:var(--c-sub); padding:clamp(80px,11vw,130px) 0; text-align:center; }
.sc-cta .sc__inner{ display:flex; flex-direction:column; align-items:center; }
.sc-cta .sc-label{ margin:0 0 24px; text-align:center; }
.sc-cta .sc-cta__title{ font-weight:300; font-size:clamp(1.6rem,3.6vw,2.5rem); line-height:1.5; margin:6px 0 20px; }
.sc-cta .sc-cta__sub{ color:#666; font-size:1rem; line-height:1.9; max-width:560px; margin:0 auto 36px; padding:0; }
.sc-cta .sc-cta__btns{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.sc-cta .sc-btn-g{ display:inline-flex; align-items:center; gap:12px; background:var(--c-green); color:#fff; font-weight:600; font-size:1.02rem; padding:18px 46px; border-radius:999px; transition:background .35s var(--ease),gap .3s; }
.sc-cta .sc-btn-g:hover{ background:var(--c-green-d); gap:18px; }

@media (max-width:768px){
  .sc-cta{ text-align:left; }
  .sc-cta .sc__inner{ align-items:flex-start; }
  .sc-cta .sc-label{ text-align:left; }
  .sc-cta .sc-cta__sub{ max-width:none; margin-left:0; margin-right:0; }
}