/* ===========================================================
   08-cta — 最終CTA（フッター直前）

   左に見出し＋本文、右に丸ボタン。
   カンプでは見出しがヒーローと同じくらい内側に入っている。

   全数値実測済み（Figma `Group 397` / 2026-08-05）:
     セクション  X=0 Y=6175 W=1366 H=453 / 塗りなし（地色 #EFF0EE を透かす）
     見出し      X=190 Y=6378 600 × 62   Bold 40 / 行間62 / 字間0 / #1A1A1A
     本文        X=190 Y=6459 600 × 63   Regular 15 / 行間31.5 / 字間0 / #4A5057
     丸ボタン    X=1046 Y=6389 141 × 141 塗りなし / 線 #000000 1px 内側
     ボタン中身  X=1068 Y=6443 96 × 57.76 縦Auto Layout 間隔21

   → padding-top    = 6378 - 6175 = 203
   → padding-bottom = 6628 - (6459 + 63) = 106
   → 見出し〜本文   = 6459 - (6378 + 62) = 19
   → 左インデント   = 190 - 42(ガター) = 148

   ボタンは上下中央ではない（ボタン中心6459.5 / 文字ブロック中心6450）ので、
   align-items: center ではなく実測どおり上端合わせ + オフセットで置く。
   =========================================================== */

.sec-cta {
  padding-block: 203px 106px;         /* 実測 */
}

.sec-cta__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  padding-left: 148px;                /* 実測: 見出し X=190 − ガター42 */
  padding-right: 137px;               /* 実測: ボタン右端1187 → コンテナ右端1324 まで137 */
}

.sec-cta__title {
  font-size: 40px;                    /* 実測 */
  font-weight: 700;
  line-height: calc(62 / 40);         /* 実測: 行間62 */
  letter-spacing: 0;
  color: #1a1a1a;                     /* 実測 */
}

.sec-cta__body {
  margin-top: 19px;                   /* 実測 */
  font-size: 15px;                    /* 実測（本文14pxとは別サイズ） */
  line-height: calc(31.5 / 15);       /* 実測: 行間31.5 */
  color: var(--text-muted);           /* #4A5057 */
}

.sec-cta__button {
  flex: none;
  margin-top: 11px;                   /* 実測: ボタン上端6389 − 見出し上端6378 */
}

@media (max-width: 1099px) {
  .sec-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  .sec-cta {
    padding-block: 96px 72px;
  }

  .sec-cta__button {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .sec-cta {
    padding-block: 64px;
  }

  .sec-cta__title {
    font-size: 22px;
  }

  .sec-cta__body {
    font-size: var(--sp-fs-body);
  }

  /* カンプのSPは丸ボタンではなく **黒塗りの全幅ボタン**。
     文字は中央、矢印は右端。角丸なし。ヒーローの黒ボタンと同じ扱い。
     左右はコンテナ幅ぴったりで、本文の左端と揃う。
     PROVISIONAL: 高さと文字サイズはカンプ画像からの目測。未実測。 */
  .sec-cta__button {
    position: relative;
    align-self: stretch;
    flex-direction: row;
    gap: 0;
    width: 100%;
    height: 63px;
    border: 0;
    border-radius: 0;
    background: #000;
    color: #fff;
    font-size: 16px;
  }


  /* 矢印だけ右端へ寄せる（文字は中央のまま）。 */
  .sec-cta__button > span[aria-hidden] {
    position: absolute;
    right: 20px;
  }

  /* カンプのSPは本文を折り返しで流している（PCの改行位置は使わない）。 */
  .sec-cta__body br {
    display: none;
  }
}