.hero-lowerPage {
    background-color: var(--primary-bland-color);
    color: var(--white);
    display: grid;
    place-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
    position: relative;
    width: 100%;

    .hero-lowerPage--inner {
        width: 100%;
        max-width: var(--inner-medium);
        display: grid;
        row-gap: 16px;
        align-items: center;
    }

    .hero-lowerPage--title {
        font-size: var(--fontsize-xlarge);
        font-weight: bold;
        text-align: center;
    }

    .hero-lowerPage--summary {
        font-size: var(--fontsize-medium);
        color: var(--white);
        text-align: center;
    }
}

@media screen and (max-width: 599px) {
    .hero-lowerPage {

        .hero-lowerPage--title {
            font-size: var(--fontsize-xmedium);
        }

        .hero-lowerPage--summary {
            font-size: var(--fontsize-medium);
        }
    }
}

.ctaSection {
    /* background-color: var(--primary-bland-color); */
    /* color: var(--white); */
    background-color: var(--cta-bg-color);
    display: grid;
    place-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
    position: relative;
    width: 100%;

    .cta-bg-subTitle {
        background-color: var(--black);
        color: var(--white);
        padding: 8px;
        margin-right: 4px;
    }

    .ctaSection--subTitle {
        font-size: 32px;
        letter-spacing: 2px;
        text-align: left;
    }

    .ctaSection--title {
        font-size: 56px;
        text-align: left;
    }

    .font-emphasis {
        color: var(--secondary-bland-color);
    }

    .media {
        width: 100%;
        max-width: 1020px;
        column-gap: 28px;
        align-items: center;
    }

    .media--imgBox {
        width: 320px;
    }

    .media--img {
        width: 100%;
    }

    .media--body {
        background-color: transparent;
        flex: 1 0;
    }

    .lineButton {
        margin-top: 48px;

        .lineButton--text {
            font-size: var(--fontsize-xlarge);
        }
    }

    .mailFormButton {
        margin-top: 12px;

        .mailFormButton--text {
            font-size: var(--fontsize-xlarge);
        }
    }

}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    .ctaSection {

        .media {
            column-gap: 16px;
        }

        .media--imgBox {
            width: 240px;
        }

        .ctaSection--subTitle {
            font-size: var(--fontsize-large);
        }

        .ctaSection--title {
            font-size: var(--fontsize-xlarge);
        }

        .lineButton {
            margin-top: 48px;
            padding: 12px 18px;

            .lineButton--text {
                font-size: var(--fontsize-large);
            }

            .lineButton--fukidashi {
                font-size: var(--fontsize-xmedium);
            }
        }

        .mailFormButton {
            margin-top: 12px;
            padding: 12px 18px;
            .mailFormButton--text {
                font-size: var(--fontsize-large);
            }
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .ctaSection {

        padding-top: 16px;
        padding-bottom: 16px;

        .media {
            column-gap: 0;
        }

        .media--imgBox {
            z-index: 0;
        }

        .media--body {
            z-index: 1;
            background-color: transparent;
            padding: 0;
        }

        .media--img {
            position: absolute;
            top: 0;
            left: 3%;
            transform: translateY(-50%);
            width: 80px;
            /* filter: opacity(0.75); */
        }

        .ctaSection--subTitle {
            font-size: var(--fontsize-xmedium);
            text-align: center;
        }

        .cta-bg-subTitle {
            padding: 4px;
            margin-right: 2px;
        }

        .ctaSection--title {
            font-size: var(--fontsize-large);
            text-align: center;
            z-index: 3;
        }

        .lineButton {
            margin-top: 32px;
            padding: 8px 12px;

            .lineButton--text {
                font-size: var(--fontsize-xmedium);
            }

            .lineButton--fukidashi {
                font-size: var(--fontsize-medium);
            }
        }

        .mailFormButton {
            margin-top: 4px;
            padding: 8px 12px;
            .mailFormButton--text {
                font-size: var(--fontsize-xmedium);
            }
        }
    }
}

.ctaSection .ctaSection--bottom {
    width: 100%;
    padding-top: 112px;
    padding-bottom: 64px;
    display: grid;
    place-items: center;

    .grid-col2 {
        column-gap: 48px;
        width: 100%;
        max-width: var(--inner-medium);
    }

    .mailFormButton--previewText {
        color: var(--black);
    }
}

@media screen and (max-width: 1024px) {
    /* 1024pxまでの幅の場合に適応される */
    
    .ctaSection .ctaSection--bottom {
        padding-left: 5%;
        padding-right: 5%;

        .grid-col2 {
            grid-template-columns: repeat(1, 1fr);
            row-gap: 74px;
        }

        .lineButton {
            /* padding: 8px 16px; */
        }

        .lineButton--text {
            /* font-size: 20px; */
        }
    }
}

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    
    .ctaSection .ctaSection--bottom {

        padding-top: 64px;
        padding-bottom: 32px;

        .grid-col2 {
            row-gap: 56px;
        }

        .lineButton {
            padding: 8px 16px;
        }

        .lineButton--fukidashi {
            font-size: 16px;
        }

        .lineButton--text {
            font-size: 16px;
        }

        .lineButton--iconBox {
            padding: 6px;
        }

        .lineButton--icon {
            width: 20px;
            height: 20px;
        }

        .lineButton--arrow {
            width: 28px;
            height: 26px;
        }

        .mailFormButton {
            padding: 8px 16px;
        }

        .mailFormButton--previewText {
            font-size: 16px;
            padding-bottom: 4px;
        }

        .mailFormButton--text {
            font-size: 16px;
        }

        .mailFormButton--iconBox {
            padding: 6px;
        }

        .mailFormButton--icon {
            width: 20px;
            height: 20px;
        }

        .mailFormButton--arrow {
            width: 28px;
            height: 26px;
        }
    }
}