/* ==========================================================================
   c-cta — Figma: CTA (24672:103244) ページ下部の共通 CTA
   PC: 2 カラム（530px・間隔 48px）/ SP: 縦積み（間隔 32px）
   イラストはカード上端に重ねる（PC: 210px の枠のうち 78px が重なる / SP: 147px 枠・72px）
   ========================================================================== */

.c-cta {
  padding: var(--space-96) var(--layout-gutter);
  background-color: var(--color-purple-400); /* semantic に該当なし（Figma: purple/400） */
}

.c-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-48);
  max-width: 1108px; /* Figma 固有寸法: 530 × 2 + 48 */
  margin-inline: auto;
}

.c-cta__title {
  color: var(--color-text-inverse);
  text-align: center;
}

/* PC は 1 行。SP のみ「方は」の後で改行（静的HTML の c-cta-section__heading-break と同じ） */
.c-cta__title-break {
  display: none;
}

@media (max-width: 1023px) {

  .c-cta__title-break {
    display: inline;
  }
}

.c-cta__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-48);
  width: 100%;
}

.c-cta__item {
  display: flex;
  flex-direction: column;
}

.c-cta__illust {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 210px;        /* Figma 固有寸法 */
  margin-bottom: -78px; /* Figma 固有寸法: カードとの重なり */
}

.c-cta__illust-image {
  max-height: 100%;
  width: auto;
}

.c-cta__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-96) var(--space-32) var(--space-32);
  border-radius: var(--radius-4);
  background-color: var(--color-bg-base);
  text-align: center;
}

.c-cta__card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.c-cta__card-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.c-cta__card-title::after {
  content: "";
  width: 120px; /* Figma 固有寸法: 下線 120×4px */
  height: 4px;
  background: var(--gradient-primary);
}

.c-cta__button {
  min-width: 300px; /* Figma 固有寸法 */
  margin-top: auto;
  padding-inline: var(--space-24);
}

@media (min-width: 1024px) and (max-width: 1339px) {

  .c-cta__list {
    gap: var(--space-24);
  }
}

@media (max-width: 1023px) {

  .c-cta {
    padding: var(--space-64) var(--space-16);
  }

  .c-cta__title {
    font-size: 2rem; /* SP: renewal/JP/32/Bold（tokens.css .t-jp-32-bold） */
    line-height: calc(48 / 32);
  }

  .c-cta__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-32);
  }

  .c-cta__illust {
    height: 147px;        /* Figma 固有寸法（SP） */
    margin-bottom: -72px; /* Figma 固有寸法: カードとの重なり（SP） */
  }

  .c-cta__card {
    gap: var(--space-24);
    padding: var(--space-80) var(--space-24) var(--space-24);
  }

  .c-cta__card-title-text {
    font-size: 1.25rem; /* SP: renewal/JP/20/Bold（tokens.css .t-jp-20-bold） */
    line-height: calc(32 / 20);
  }

  .c-cta__card-desc {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（tokens.css .t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .c-cta__button {
    min-width: 0;
  }
}

@media (max-width: 1023px) {

  .c-cta__illust-image {
    width: 70%; /* Figma SP: 365→255.5px / 323→226px（PC の 70%） */
  }
}