.cta-block {
    position: relative;
    width: 100%;
    overflow: hidden;
    color: var(--color-white);
    border-radius: 20px 20px 0 0;

    @media (width >= 768px) {
        border-radius: 40px 40px 0 0;
    }

    .background-full {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;

        .background-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .cta-button-appeal-label {
        margin-bottom: 0.5rem;
        font-size: var(--text-ja-18);

        .zero {
            font-size: var(--text-ja-32);
        }
    }
}

.cta-block-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    width: fit-content;
    width: 91%;
    max-width: 800px;
    padding: 64px 18px 40px;
    margin: 40px auto;
    text-align: center;
    background-color: #354841;
    border-radius: 12px;

    @media (width >= 768px) {
        padding: 64px 40px 40px;
        margin: 120px auto;
    }

    @media (width >= 1200px) {
        max-width: 1152px;
        padding: 6.5625rem 33.75rem 6.5625rem 10.6875rem;
        margin: 10rem auto 17.25rem;
        background-image: url('../../img/cta-block-bg.webp');
        background-position: center center;
        background-size: cover;
    }
}

.cta-block-top-message-image-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);
}

.cta-block-header {
    .en-label {
        font-size: clamp(0.938rem, 0.827rem + 0.47vw, 1.25rem); /* 15px 20px */
        letter-spacing: 0.36em;
    }

    .ja-label {
        font-size: clamp(0.938rem, 0.871rem + 0.28vw, 1.125rem); /* 15px 18px */
        font-weight: 600;
        letter-spacing: 0.24em;
    }
}

.image-container {
    width: 100%;
    max-width: 640px;

    @media (width >= 1200px) {
        position: absolute;
        top: 20%;
        right: 40px;
        width: 34.8%;
        height: 580px;
    }

    .image {
        width: 100%;
        height: auto;
        object-fit: contain;

        @media (width >= 1200px) {
            height: 100%;
            object-fit: cover;
        }
    }    
}

.cta-block-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;

    .cta-button-container {
        width: 100%;
    }
}

.cta-block-links-container{
    display: flex;
    flex-direction: row;
    gap: 1rem;
    margin-top: 1.25rem;
}

.cta-block-link {
    font-size: 0.6875rem;
    font-weight: 600;

    .icon {
        width: 20px;
    }

    .en-label {
        font-size: 0.8125rem;
        font-weight: 400;
    }
}