/* hs-cta-style.css … HubSpot のボタン（旧CTA）をサイトのボタンの決まりにそろえる（parts/hs-cta-style.php・2026-11-08）。
   ⚠️ HubSpot の CTA には「a#cta_button_… { … !important }」と ID と !important の両方で見た目を書いたものがある。それに勝つため、各指定に :is(#gr-cta, *) を付けて ID と同じ強さにしている（:is() は中の一番強いものの強さになる。* なので必ず当たる）。
   HubSpot は a#cta_button_<番号> の ID 付きで見た目を差し込むので、!important で上書きする。役割のクラス（gr-cta-primary／second／nav）は同じファイルの小さなスクリプトが文字から付ける。
   形はサイトのボタンと同じ端の丸いもの。大きさは HubSpot のまま広げすぎない（高さ 44px 前後）。動きはサイトの他のボタンと同じく、乗せると色が満ちる（ここは単純に色を入れ替える） */
.hs-cta-wrapper a.cta_button.gr-cta-primary:is(#gr-cta, *),
.hs-cta-wrapper a.cta_button.gr-cta-second:is(#gr-cta, *),
.hs-cta-wrapper a.cta_button.gr-cta-nav:is(#gr-cta, *) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 216px !important; min-height: 44px !important; padding: 10px 28px !important; box-sizing: border-box !important;
  border-radius: 999px !important; box-shadow: none !important; text-shadow: none !important;
  font-family: inherit !important; font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .04em !important;
  text-decoration: none !important; transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}
/* 1. 一番押してほしい＝グラデ */
.hs-cta-wrapper a.cta_button.gr-cta-primary:is(#gr-cta, *) { background: linear-gradient(45deg, var(--c-blue), var(--c-teal)) !important; color: #fff !important; border: 0 !important; }
/* 2. 並びの2番目＝黒 */
.hs-cta-wrapper a.cta_button.gr-cta-second:is(#gr-cta, *) { background: #000 !important; color: #fff !important; border: 0 !important; }
/* 3. ページを移る＝白地に黒線 */
.hs-cta-wrapper a.cta_button.gr-cta-nav:is(#gr-cta, *) { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; }
@media (hover: hover) {
  .hs-cta-wrapper a.cta_button.gr-cta-primary:is(#gr-cta, *):hover { background: #fff !important; color: #000 !important; box-shadow: inset 0 0 0 1.5px #000 !important; }
  .hs-cta-wrapper a.cta_button.gr-cta-second:is(#gr-cta, *):hover,
  .hs-cta-wrapper a.cta_button.gr-cta-nav:is(#gr-cta, *):hover { background: linear-gradient(45deg, var(--c-blue), var(--c-teal)) !important; color: #fff !important; border-color: transparent !important; }
}
.hs-cta-wrapper a.cta_button:focus-visible { outline: 2px solid var(--c-blue) !important; outline-offset: 3px !important; }
@media (max-width: 750px) {
  .hs-cta-wrapper a.cta_button.gr-cta-primary:is(#gr-cta, *), .hs-cta-wrapper a.cta_button.gr-cta-second:is(#gr-cta, *), .hs-cta-wrapper a.cta_button.gr-cta-nav:is(#gr-cta, *) { min-width: 235px !important; font-size: 1.4rem !important; }
}