/* ===========================================
   Layout Overrides - LP テーマと共存させるための補正 (v2)
   =========================================== */

/* 1) ヘッダー: 白い帯（背景）の高さを LP/TOP と統一。記事系ページでは
       lp/styles.css の単純化バージョンが使われていて header.height が 88px に
       なってしまうので、133px に強制（ロゴ＋ナビ＋CTAは133px必要）。
       コンテナは max-width 1440 で中央寄せ。
       transform transition は auto-hide-on-scroll 用。 */
#header.header {
  height: 133px !important;
  min-height: 133px !important;
  transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
  will-change: transform;
}
#header.header.is-hidden {
  transform: translateY(-100%) !important;
}
#header .header__container {
  width: 100% !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
#header .header__top-row,
#header .header__right-side,
#header .header__nav,
#header .header__actions {
  max-width: 100%;
  box-sizing: border-box;
}

/* 2) wrapper: 中央寄せされないよう */
.lp-content { display: block; width: 100%; }

/* 3) ヘッダー高さ分の本文オフセット — 自前テンプレ（記事一覧/詳細）のみ。
       LP ページ（wrapLpHtml）はインナー <main class="main"> が WP CSS で
       margin-top:133px を持っているので、ここで重ねて padding-top を入れると
       hero の上に巨大な空白ができる。LP は対象から除外する。 */
body > .lp-content > .newsListMain,
body > .lp-content > .newsDetailMain {
  padding-top: 100px;
}

/* 4) 記事詳細：自動ヘッダー（日付＋h1）の見栄え調整
       ・装飾オレンジバー（::before/::after）を消してタイトルを読みやすく
       ・中央揃え＋余白整理 */
.newsDetailHeader {
  position: relative;
  text-align: center;
  padding: 28px 16px 16px;
  background: transparent;
  border: none;
}
.newsDetailHeader::before,
.newsDetailHeader::after,
.newsDetailHeader > *::before,
.newsDetailHeader > *::after {
  content: none !important;
  background: none !important;
  border: none !important;
}
.newsDetailHeader > * {
  background: transparent !important;
}
.newsDetailHeader h1 {
  font-size: 22px;
  font-weight: 700;
  margin: 8px auto 0;
  line-height: 1.6;
  color: #222;
  background: none;
  padding: 0;
  border: none;
  max-width: 800px;
}
.newsDetailTime {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}

/* 5) サムネイル：中央配置 */
.newsDetailThumbnail {
  display: block;
  margin: 16px auto 24px;
  text-align: center;
}
.newsDetailThumbnail img {
  max-width: 480px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: inline-block;
}

/* 6) 一覧ページのカードもタイトルが読みやすくなるよう */
.article-card .article-card__title { font-weight: 700; }

/* 7) サムネイルがネガティブマージンでヘッダーに被るのを防ぐ */
.newsDetailThumbnail {
  margin-top: 16px !important;
}

/* 8) 現在ページのナビをマウスオーバーと同じ色でハイライト
       LP用 (.header__nav-link) と シンプル用 (.headerNavListLink) の両方に対応 */
.header__nav-link.is-active,
.headerNavListLink.is-active,
.mobile-menu__link.is-active {
  color: var(--color-primary) !important;
}

/* 8b) ヘッダー右側: CTA ボタンを上、ナビを下に並べ替え（中庭さんのご要望）
       元の HTML 順は nav→actions だが、column-reverse で逆転表示。 */
#header .header__right-side {
  flex-direction: column-reverse !important;
}

/* 8c) CTA ボタン: 両方同サイズで揃える＋縦 28px / フォント 13px。
       注意: lp/styles.css 側に min-height:48px が入っているのでそれも上書き必須。 */
#header .header__actions .btn--cta3d,
#header .header__actions .btn--cta3d.btn--cta3d-teacher,
#header .header__actions a.btn--cta3d {
  width: 170px !important;
  min-width: 170px !important;
  max-width: 170px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 13px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
#header .header__actions .btn__icon--arrow {
  width: 8px !important;
  height: auto !important;
}

/* 8d) ナビ: モダンなベンチャースタイル（Linear/Vercel/Stripe ライク）
       - 装飾は最小限、タイポと余白で勝負
       - 通常: ミディアム/チャコール、active: 黒×太字×アンダーバー
       - hover: 透明度シフト＋スライドイン下線
       - ドットなし、グラデーションなし、シンプル */
#header .header__nav-list {
  font-size: 15px !important;
  gap: 24px !important;
  align-items: center !important;
}
#header .header__nav-link {
  position: relative !important;
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: #1a1a1a !important;
  padding: 6px 2px !important;
  transition: color 0.18s ease, opacity 0.18s ease !important;
}
#header .header__nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
#header .header__nav-link:hover {
  color: var(--color-primary) !important;
  opacity: 1 !important;
}
#header .header__nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
  background: var(--color-primary);
}
#header .header__nav-link.is-active {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}
#header .header__nav-link.is-active::after {
  transform: scaleX(1);
  background: var(--color-primary);
}

/* 9) 記事系（newsListMain/newsDetailMain/privacyMain など固定ページ系）も
       LP と同じ 133px 高ヘッダーで動かすため、本文の上余白を 133px ぴったりに。 */
body > .lp-content > .newsListMain,
body > .lp-content > .newsDetailMain,
body > .lp-content > .privacyMain,
body > .lp-content > .contactMain,
body > .lp-content > .supportMain,
body > .lp-content > .companyMain {
  padding-top: 133px;
}

/* 10) 記事一覧/詳細のグレー枠内の上余白を圧縮（lp/styles.css のデフォルトが
       64px+64px=128px もあって h1 の上に余白が出すぎていた）。 */
.newsListMain .newsListMainInner,
.newsDetailMain .newsDetailMainInner {
  padding-top: 24px !important;
}
.newsListMain .newsListSection,
.newsDetailMain .newsDetailSection {
  padding-top: 24px !important;
}

/* 11) /news/ のような privacyMain 系（白い楕円ページ）の余白を圧縮。
       privacyMainBg の上下 padding 128px が大きすぎるので 24px に縮小。
       楕円自体（privacyArticle）の縦 padding も 64px→32px に圧縮。 */
.privacyMain .privacyMainBg {
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}
.privacyMain .privacyArticle {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* 12) 「ダウンロードはこちら」ボタンを画面右下に floating で常時表示。
       元はフッター内にあって埋まっていたのを取り出す（position:fixed）。 */
.footer__download-button {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 9999 !important;
  margin: 0 !important;
}
.footer-download-btn,
#download-modal-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #F34109 !important;
  color: #fff !important;
  border: none !important;
  padding: 14px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  /* 注目を引くため bobbing + glow pulse のアニメーション */
  animation: dlbtn-float 2.6s ease-in-out infinite, dlbtn-glow 2.6s ease-in-out infinite !important;
}
.footer-download-btn:hover,
#download-modal-trigger:hover {
  animation-play-state: paused !important;
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 14px 32px rgba(243, 65, 9, 0.55) !important;
}
.footer-download-btn .btn__icon--arrow {
  width: 12px !important;
  height: auto !important;
  transition: transform 0.2s ease;
}
.footer-download-btn:hover .btn__icon--arrow,
#download-modal-trigger:hover .btn__icon--arrow {
  transform: translateX(3px) !important;
}

@keyframes dlbtn-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes dlbtn-glow {
  0%, 100% { box-shadow: 0 6px 20px rgba(243, 65, 9, 0.30); }
  50%      { box-shadow: 0 14px 32px rgba(243, 65, 9, 0.55); }
}

/* ==================================================================
   13) LP Hero セクション: 控えめにサイズアップ＋デバイスのふわふわ動き
   元のレイアウト・余白は壊さない方針。文字とデバイス画像だけ少し大きく。
   ================================================================== */
.hero .hero__subtitle {
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
}
.hero .hero__visual img {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12));
  animation: hero-device-float 5.5s ease-in-out infinite;
}
@keyframes hero-device-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ==================================================================
   14) FAQ アコーディオン
   ================================================================== */
.supportFaqList {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 0 !important;
  border-top: 1px solid #eee;
}
.supportFaqItem {
  border-bottom: 1px solid #eee;
}
.supportFaqQ {
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  padding: 22px 56px 22px 4px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease;
}
.supportFaqQ:hover { background: rgba(243, 65, 9, 0.04); }
.supportFaqQLabel {
  color: #F34109;
  font-weight: 900;
  margin-right: 12px;
  flex: 0 0 auto;
}
.supportFaqQText { flex: 1 1 auto; }
.supportFaqIcon {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}
.supportFaqIcon::before,
.supportFaqIcon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #F34109;
  border-radius: 2px;
}
.supportFaqIcon::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.supportFaqIcon::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}
.supportFaqQ[aria-expanded="true"] .supportFaqIcon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.supportFaqA {
  padding: 0 4px 24px 36px;
  color: #333;
  font-size: 15px;
  line-height: 1.8;
  animation: faq-slide-down 0.25s ease-out;
}
.supportFaqA[hidden] { display: none; }
.supportFaqALabel {
  color: #175192;
  font-weight: 900;
  margin-right: 8px;
}
.supportFaqAText {
  display: inline;
}
.supportFaqAText > *:first-child { margin-top: 0; }
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==================================================================
   15) モバイルメニュー: ハンバーガークリックで開く動作を全ページに付与
   原本 lp/styles.css は .header__mobile-menu を opacity:0 + visibility:hidden +
   translateY(-100%) でオフスクリーンに置いているが、.is-open 時の「画面に出す」
   状態が定義されていないので staging で開かなかった。.is-open 用の表示状態を
   ここで強制定義し、TOP/elementary/column/blog 等すべてで動かす。
   ================================================================== */
.header__mobile-menu {
  transition: transform 0.4s cubic-bezier(.4,0,.2,1),
              opacity 0.3s ease,
              visibility 0.3s ease !important;
}
.header__mobile-menu.is-open {
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* メニュー開時にページ背後をスクロール禁止扱いにする（JS 側で body.style.overflow も切替） */

/* ハンバーガーボタン: 開時に × アイコンへアニメ変化 */
.header__menu-btn .hamburger {
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.header__menu-btn.is-open .hamburger:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.header__menu-btn.is-open .hamburger:nth-child(2) {
  opacity: 0;
}
.header__menu-btn.is-open .hamburger:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==================================================================
   16) ロゴ width:0 対策
   原本 lp/styles.css の影響で .header__logo img が width:0 になり
   ヘッダー左がスカスカに見える事故が起きていた。明示的に width:auto を
   付与してロゴが見える状態に固定する。
   ================================================================== */
#header .header__logo img {
  width: auto !important;
  height: 48px !important;
  max-width: none !important;
  display: block !important;
}

/* ==================================================================
   17) SP（〜1024px）でハンバーガーを表示し PC ナビを隠す
   原本 lp/styles.css のメディアクエリが staging 環境で効いていないため、
   ここで明示的に切替える。1024px 以下はタブレット縦・スマホ表示。
   ================================================================== */
@media (max-width: 1024px) {
  #header .header__right-side { display: none !important; }
  #header .header__menu-btn { display: flex !important; }
}
@media (min-width: 1025px) {
  #header .header__menu-btn { display: none !important; }
  #header .header__mobile-menu { display: none !important; }
}

/* ==================================================================
   18) 共通ヘッダー (.nav / .drawer)
   lp_preview と同じデザインを全ページで使う。_lp_header.php が出力する
   HTML に対応。原本 lp/styles.css の `.header` 系は使わない（旧）。
   ================================================================== */
:root {
  --teach-nav-orange: #F34109;
  --teach-nav-orange-d: #AC2828;
  --teach-nav-ink: #0A0A0A;
  --teach-nav-paper: #FBF8F2;
  --teach-nav-gray-1: #F6F4EF;
  --teach-nav-gray-2: #E9E5DC;
  --teach-nav-gray-3: #9A958B;
  --teach-nav-mono: 'Geist Mono', ui-monospace, monospace;
  --teach-nav-pill: 999px;
  --teach-nav-pad: clamp(20px, 4vw, 56px);
}

/* ----- 旧 header.header を完全に隠す (lp_preview を除く) ----- */
body:not(.lp):not(.es):not(.jh):not(.hs) header.header#header { display: none !important; }

/* ----- nav (PC) ----- */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--teach-nav-pad);
  /* 初期から白半透明（ヒーロー背景に同化して見えなくなる事故を防ぐ） */
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
  border-bottom: 1px solid rgba(233, 229, 220, .6);
}
header.nav.is-scrolled {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--teach-nav-gray-2);
}
header.nav.is-hidden { transform: translateY(-110%); }
.nav__logo { display: flex; align-items: center; gap: 10px; }
.nav__logo img { height: 42px; width: auto; display: block; }
.nav__links { display: flex; gap: 6px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav__link {
  padding: 8px 12px; border-radius: var(--teach-nav-pill);
  font-size: 13px; font-weight: 700; color: var(--teach-nav-ink);
  text-decoration: none;
  transition: color .2s, background .2s;
}
.nav__link:hover { color: var(--teach-nav-ink); background: var(--teach-nav-gray-1); }
.nav__link.is-active { color: var(--teach-nav-orange); font-weight: 900; }
.nav__cta { display: flex; gap: 8px; align-items: center; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: var(--teach-nav-pill);
  font-size: 13px; font-weight: 700;
  background: var(--teach-nav-ink); color: #fff;
  text-decoration: none;
  transition: transform .2s, background .2s;
}
.nav__btn:hover { background: var(--teach-nav-orange); transform: translateY(-1px); color: #fff; }
.nav__btn .arrow { display: inline-block; }
.nav__btn--ghost { background: transparent; color: var(--teach-nav-ink); border: 1px solid var(--teach-nav-gray-2); }
.nav__btn--ghost:hover { background: var(--teach-nav-ink); color: #fff; border-color: var(--teach-nav-ink); }
.nav__burger {
  display: none; width: 40px; height: 40px; border-radius: var(--teach-nav-pill);
  background: var(--teach-nav-ink); color: #fff;
  align-items: center; justify-content: center; border: 0; cursor: pointer;
}
.nav__burger span { position: relative; width: 16px; height: 1.5px; background: #fff; display: inline-block; }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: #fff;
  transition: transform .3s;
}
.nav__burger span::before { top: -5px; }
.nav__burger span::after { top: 5px; }

/* ----- nav (SP) ----- */
@media (max-width: 1024px) {
  .nav__links, .nav__cta { display: none !important; }
  .nav__burger { display: inline-flex !important; }
}

/* ----- DRAWER (SP) ----- */
.drawer {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--teach-nav-ink); color: #fff;
  transform: translateY(-100%); visibility: hidden; opacity: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s, visibility .3s;
  padding: 18px var(--teach-nav-pad) 32px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.drawer.is-open { transform: translateY(0); visibility: visible; opacity: 1; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 0 0 8px; }
.drawer__logo img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.drawer__close {
  position: relative; width: 40px; height: 40px; border-radius: var(--teach-nav-pill);
  background: rgba(255,255,255,.1); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer__close span { position: absolute; width: 18px; height: 1.5px; background: #fff; }
.drawer__close span:first-child { transform: rotate(45deg); }
.drawer__close span:last-child { transform: rotate(-45deg); }
.drawer__nav { display: flex; flex-direction: column; gap: 0; flex: 1; justify-content: center; padding: 8px 0; }
.drawer__link {
  position: relative; display: flex; align-items: baseline; gap: 14px;
  padding: 14px 0; color: #fff; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(8px);
}
.drawer.is-open .drawer__link {
  opacity: 1; transform: translateY(0);
  transition: opacity .5s, transform .5s, color .25s, padding .25s;
}
.drawer.is-open .drawer__link:nth-child(1) { transition-delay: .12s; }
.drawer.is-open .drawer__link:nth-child(2) { transition-delay: .16s; }
.drawer.is-open .drawer__link:nth-child(3) { transition-delay: .20s; }
.drawer.is-open .drawer__link:nth-child(4) { transition-delay: .24s; }
.drawer.is-open .drawer__link:nth-child(5) { transition-delay: .28s; }
.drawer.is-open .drawer__link:nth-child(6) { transition-delay: .32s; }
.drawer.is-open .drawer__link:nth-child(7) { transition-delay: .36s; }
.drawer.is-open .drawer__link:nth-child(8) { transition-delay: .40s; }
.drawer.is-open .drawer__link:nth-child(9) { transition-delay: .44s; }
.drawer__link::before {
  content: attr(data-num);
  font-family: var(--teach-nav-mono); font-size: 11px; color: var(--teach-nav-orange);
  font-weight: 900; min-width: 24px; letter-spacing: .06em;
}
.drawer__link-jp { font-size: 18px; font-weight: 900; flex: 1; }
.drawer__link-en { font-family: var(--teach-nav-mono); font-size: 10.5px; color: var(--teach-nav-gray-3); letter-spacing: .14em; text-transform: uppercase; }
.drawer__link.is-active .drawer__link-jp { color: var(--teach-nav-orange); }
.drawer__link:hover { padding-left: 10px; color: var(--teach-nav-orange); }
.drawer__cta { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.drawer__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 900;
  text-decoration: none;
}
.drawer__btn--primary { background: var(--teach-nav-orange); color: #fff; }
.drawer__btn--primary:active { transform: translateY(2px); }
.drawer__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.drawer__foot {
  display: flex; justify-content: space-between; font-family: var(--teach-nav-mono);
  font-size: 11px; color: var(--teach-nav-gray-3); padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ----- 旧 LP 内では .nav は LP 独自のスタイルを優先（lp_preview*.php が body class に lp/es/jh/hs を持つ） ----- */
/* （上記 body セレクタで隠した header.header だけ抑止し、.nav の挙動は LP ファイル内の CSS で上書き可能） */

/* ----- sticky CTA (アプリをDL 追従ボタン) -----
   旧 wp_zuccini styles.css の .sticky-cta は「画面下部に青いフルワイドバー」
   として定義されていて、新デザインの「画面右下のピル型」とぶつかる。
   ここで強制的にピル型レイアウトに戻す（!important で source order に勝つ）。
*/
.sticky-cta {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  display: block !important;
  z-index: 60 !important;
  pointer-events: none !important;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.sticky-cta.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.sticky-cta__btn,
.sticky-cta .btn--sticky,
.sticky-cta a {
  pointer-events: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: #F34109 !important;
  color: #fff !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 16px 36px -10px rgba(243, 65, 9, .55), 0 4px 12px -2px rgba(0, 0, 0, .18) !important;
  transition: transform .2s, box-shadow .2s;
}
.sticky-cta__btn:hover,
.sticky-cta .btn--sticky:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -10px rgba(243, 65, 9, .65), 0 6px 16px -2px rgba(0, 0, 0, .2) !important;
}
@media (max-width: 760px) {
  .sticky-cta {
    right: 14px !important;
    bottom: 14px !important;
  }
  .sticky-cta__btn,
  .sticky-cta .btn--sticky,
  .sticky-cta a {
    padding: 14px 22px !important;
    font-size: 14px;
  }
}