/* ==========================================================================
   CTA セクション（フッター直前）
   SP は 1 列（見出し → 本文 → 写真 → 丸 → ボタン → キャラクター）。
   写真＋本文の 2 列が 1024 コンテナに収まるのは lg 以上のため、md〜lg は本文幅の 1 列
   ========================================================================== */

.c-cta {
    background-color: var(--color-bg);
}

.c-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-4);
    padding-top: var(--section-pad);
}

/* 行の高さはカンプ実測（SP 1.5 / PC 1.7） */
.c-cta__title {
    margin: 0;
    /* SP は見出しを少し小さくする（h2 の 24px → lead の 20px）。md 以上は h2 */
    font-size: var(--text-lead);
    font-weight: var(--weight-bold);
    line-height: var(--leading-card);
    color: var(--color-text);
}

.c-cta__title-line {
    display: block;
}

.c-cta__title em {
    font-style: normal;
    color: var(--color-accent);
}

.c-cta__text {
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-body);
}

.c-cta__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--cta-photo-ratio);
    object-fit: cover;
    border-radius: var(--radius-md);
}

.c-cta__points {
    display: grid;
    grid-template-columns: repeat(2, var(--cta-point));
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-cta__point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: var(--cta-point);
    height: var(--cta-point);
    background-color: var(--color-bg);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-pill);
}

.c-cta__point-label {
    font-size: var(--text-label);
    font-weight: var(--weight-medium);
    line-height: var(--leading-card);
    text-align: center;
}

.c-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* 下端はフッターに接して切れるデザインのため、セクションの下余白は取らない */
.c-cta__chara {
    display: block;
    justify-self: center;
    width: var(--cta-chara-w);
    height: auto;
    margin-top: var(--space-4);
}

@media (min-width: 768px) {
    .c-cta__title {
        font-size: var(--text-h2);
    }

    .c-cta__inner {
        grid-template-columns: minmax(0, calc(var(--cta-point) * 4 + var(--space-3) * 3));
        justify-content: center;
    }

    .c-cta__points {
        grid-template-columns: repeat(4, var(--cta-point));
        justify-content: start;
    }

    .c-cta__buttons {
        flex-direction: row;
        gap: var(--space-3);
    }

    .c-cta__chara {
        justify-self: start;
    }
}

@media (min-width: 1024px) {
    .c-cta__inner {
        grid-template-columns: minmax(0, var(--cta-photo-w)) calc(var(--cta-point) * 4 + var(--space-3) * 3);
        column-gap: var(--space-7);
        row-gap: 0;
        padding-top: var(--space-8);
    }

    /* PC はカンプの改行位置（「〜を」の後）に合わせ、1・2 行目をつなげる */
    .c-cta__title {
        line-height: var(--leading-body);
    }

    .c-cta__title-line:nth-child(-n + 2) {
        display: inline;
    }

    .c-cta__title,
    .c-cta__text,
    .c-cta__points,
    .c-cta__buttons {
        grid-column: 2;
    }

    .c-cta__text {
        margin-top: var(--space-3);
    }

    .c-cta__points,
    .c-cta__buttons {
        margin-top: var(--space-5);
    }

    .c-cta__buttons {
        margin-bottom: var(--space-8);
    }

    .c-cta__photo {
        grid-column: 1;
        grid-row: 1 / 4;
        align-self: start;
    }

    .c-cta__chara {
        grid-column: 1;
        grid-row: 3 / 5;
        align-self: end;
        margin-top: 0;
    }
}