/* =========================================================
   CTA ボタン（吹き出し付き）
   ---------------------------------------------------------
   .cta--trial … 今すぐ無料で試す（オレンジ）
   .cta--doc   … 資料ダウンロード（白）
   .cta-group      … 2つを横並びにするラッパー
   .cta-group--lg  … 大サイズ（最終 CTA 用。Figma 比 1.4325 倍）
   ========================================================= */
.cta-group { display: flex; align-items: flex-end; gap: 15px; flex-wrap: wrap; }

/* 幅が基準（通常 330px・大サイズ 473px）より狭くなったら、中身を幅に比例して縮める。
   ボタンだけを縮めると吹き出しとの比率が崩れ、PC と見え方が変わってしまうため、
   吹き出し・余白・アイコン・文字をまとめて同じ比率で縮める（比率は下の --u） */
.cta {
  position: relative;
  width: 330px;
  max-width: 100%;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
}
/* --u：拡大率つきの 1px。CTA が基準幅のときは 1px（＝PCと同じ寸法）、
   狭くなるとその割合だけ小さくなる。以降の寸法は「Figma の px 値 × --u」で書く */
.cta__balloon,
.cta__btn { --u: min(1px, calc(100cqw / 330)); }

.cta__balloon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: calc(48 * var(--u));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.cta__balloon-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 113%;
}
/* 吹き出し本体（しっぽ・影を除いた白い部分）の上下中央にテキストを置く。
   本体は吹き出し枠の高さに対して top 4.1% / 高さ 76.5%（4つのSVGで共通） */
.cta__balloon-text {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 4.1%;
  height: 76.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text);
}
/* 大きい「5秒」「無料プレゼント」に行の高さが引っ張られ、通常サイズの文字が下寄りに見えるため少し持ち上げる */
.cta__balloon-text > span { transform: translateY(-.15em); }
/* 資料ダウンロードの吹き出しは持ち上げない */
.cta--doc .cta__balloon-text > span { transform: none; }
.cta__balloon-text em { font-style: normal; color: var(--accent); }
.cta__balloon-text .num { font-size: calc(20 * var(--u)); letter-spacing: .05em; }
.cta__balloon-text .unit { font-size: calc(17.19 * var(--u)); }
.cta__balloon-text .present { font-size: calc(16 * var(--u)); letter-spacing: .03em; }

.cta--trial .cta__balloon { width: 95.5%; }
.cta--doc .cta__balloon { width: 82%; }

.cta__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(33 * var(--u));
  gap: calc(14 * var(--u));
  height: calc(80 * var(--u));
  padding: 15px calc(25 * var(--u));
  border-radius: 10px;
  filter: drop-shadow(var(--shadow-btn));
  transition: transform .2s, filter .2s;
}
.cta__btn:hover { transform: translateY(-3px); filter: drop-shadow(0 7px 4px rgba(0, 0, 0, .25)); }
.cta__icon { width: calc(50 * var(--u)); height: calc(50 * var(--u)); flex-shrink: 0; }
.cta__arrow { width: calc(45 * var(--u)); height: calc(45 * var(--u)); flex-shrink: 0; }
.cta__label {
  font-size: calc(20 * var(--u));
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: .05em;
  white-space: nowrap;
}
.cta--trial .cta__btn { background: var(--accent); }
.cta--trial .cta__label { color: var(--bg); }
.cta--doc .cta__btn { background: var(--bg); }
.cta--doc .cta__label { color: var(--main); }

/* ---- 大サイズ（最終 CTA） ---- */
/* .cta が幅を測れるよう（container-type: inline-size のため）、グループ側に幅を持たせる */
.cta-group--lg { width: 100%; gap: 21px; justify-content: center; }
.cta-group--lg .cta { width: 473px; }
.cta-group--lg .cta__balloon,
.cta-group--lg .cta__btn { --u: min(1px, calc(100cqw / 473)); }
.cta-group--lg .cta__balloon { height: calc(68 * var(--u)); }
/* 文字を大きくした分、資料DLの吹き出しを広げて両端に余白を確保 */
.cta-group--lg .cta--doc .cta__balloon { width: 88%; }
.cta-group--lg .cta__balloon-text { font-size: calc(20 * var(--u)); letter-spacing: 0; }
.cta-group--lg .cta__balloon-text .num,
.cta-group--lg .cta__balloon-text .unit,
.cta-group--lg .cta__balloon-text .present { font-size: calc(24 * var(--u)); letter-spacing: 0; }
.cta-group--lg .cta__btn { margin-top: calc(47 * var(--u)); height: calc(115 * var(--u)); padding: 21px calc(36 * var(--u)); gap: calc(20 * var(--u)); }
.cta-group--lg .cta__icon { width: calc(71.6 * var(--u)); height: calc(71.6 * var(--u)); }
.cta-group--lg .cta__arrow { width: calc(64.5 * var(--u)); height: calc(64.5 * var(--u)); }
.cta-group--lg .cta__label { font-size: calc(28 * var(--u)); letter-spacing: .05em; }

/* ---- Responsive ---- */
@media (max-width: 1280px) {
  .cta { width: min(330px, calc(50% - 8px)); }
}

@media (max-width: 980px) {
  .cta-group { justify-content: center; }
  .cta { width: min(330px, 100%); }
  .cta-group--lg .cta { width: min(473px, 100%); }
}