.hero-lowerPage {
    width: 100%;
    background-image: url(/img/bg-hero-business.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.serviceSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    background-color: var(--primary-bg-color);

    .grid-col2 {
        margin-top: 32px;
        column-gap: 48px;
        row-gap: 16px;
    }
    
    .media {
        margin-top: 32px;
        justify-content: space-between;
        column-gap: 32px;
    }

    .media--imgBox {
        width: 100%;
        max-width: 360px;
    }

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

    .media--body {
        flex: 1 0;
        padding: 16px 0;
    }

    .media--title {
        font-size: 2rem;
    }

    .media--textBox {
        margin-top: 16px;
    }
}

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

.dentRepairSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    background-color: var(--secondary-bg-color);

    .media {
        margin-top: 32px;
        justify-content: space-between;
        column-gap: 32px;
    }

    .media--textBox {
        margin-top: 16px;
    }

    .media--imgBox {
        width: 100%;
        max-width: 440px;
    }
    
    .media--img {
        width: 100%;
    }

    .media--body {
        flex: 1 0;
    }

    .media--text {
        text-align: justify;
    }
}

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

@media screen and (max-width: 599px) {
    /* 599pxまでの幅の場合に適応される */
    .dentRepairSection {
        .media {
            flex-direction: column;
            column-gap: 0;
            row-gap: 16px;
        }

        .media--imgBox {
            max-width: 100%;
        }
    }
}

.achievementsSection {
    padding: 40px 5%;
    background-color: var(--primary-bg-color);

    .flex-col2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 32px;
        column-gap: 32px;
        row-gap: 32px;
    }

    .content--imgBox {
        width: 100%;
        max-width: 456px;
        line-height: 0;
    }

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

    .content--figcaption {
        background-color: var(--figcaption-bg-color);
        font-size: 1.8rem;
        font-weight: bold;
        padding: 32px;
    }

    .splide {
        /* innerを無視して画面最大幅に表示する設定 */
        /* padding-left, padding-rightが設定されている親要素が２つ以上ある場合は */
        /* スマートフォン上の表示がおかしい事を確認したので注意 */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        margin-top: 32px;
    }

    .splide__slide img {
        width: 100%;
        height: auto;
    }
}

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

    .achievementsSection {

        .content--imgBox {
            max-width: 100%;
        }
    
        .content--img {
            width: 100%;
        }
    
        .content--figcaption {
            padding: 24px;
        }
        
    }
}

.repairFlowSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    background-color: var(--secondary-bg-color);
    

    .grid-col3 {
        margin-top: 32px;
        gap: 24px;
    }

    .media {
        margin-top: 32px;
        justify-content: space-between;
        column-gap: 32px;
    }

    .media--imgBox {
        width: 100%;
        max-width: 360px;
    }

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

    .media--body {
        flex: 1 0;
        padding: 16px 0;
    }

    .media--title {
        font-size: 2rem;
    }

    .media--textBox {
        margin-top: 16px;
    }
}

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

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

    .media {
        flex-direction: column-reverse;
    }
}


.qaSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    background-color: var(--primary-bg-color);

    .qaBox {
        /* background-color: var(--secondary-bg-color); */
        /* padding: 32px; */
        margin-top: 24px;
    }
    
    .qaBox--top {
        padding-left: 48px;
        padding-right: 16px;
        padding-top: 16px;
        padding-bottom: 16px;
        position: relative;
        background-color: var(--primary-bland-color);
    }
    
    .qaBox--top::before {
        position: absolute;
        content: "";
        left: 16px;
        width: 24px;
        height: 24px;
        background-image: url(/img/icon-q.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .qaBox--question {
        color: var(--white);
        font-size: 1.6rem;
    }
    
    .qaBox--bottom {
        border-top: 1px solid var(--separate-color-grey);
        padding-left: 48px;
        padding-top: 16px;
        padding-bottom: 16px;
        position: relative;
    }
    
    .qaBox--bottom::before {
        position: absolute;
        content: "";
        left: 16px;
        width: 24px;
        height: 24px;
        background-image: url(/img/icon-a.png);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    .qaBox--list {
        margin-top: 8px;
        line-height: 1.5;
    }

    .qaBox--listItem {
        font-size: 1.6rem;
        list-style: inside;
        padding-left: 6px;
    }

    .qaBox--answerBox {
        margin-top: 8px;
    }
}

.ctaSection {
    padding: 40px 5%;
    display: grid;
    place-items: center;
    /* background-color: var(--secondary-bg-color); */
}