.mv_section {
    max-width: calc(1280 / var(--base) * 100vw);
    margin: calc(100 / var(--base) * 100vw) auto 0;
    padding: 0 calc(20 / var(--base) * 100vw);

    .mv_title {
        padding: 0 calc(20 / var(--base) * 100vw);

        h1 {
            font-family: var(--font-en);
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: calc(0.8 / var(--base) * 100vw);
            line-height: calc(50 / var(--base) * 100vw);
            color: #000;
            text-align: center;


            span {
                font-weight: 300;
                color: var(--green);
                font-size: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
                display: block;
            }
        }
    }
}



.service_contents {
    width: 100%;
    background-color: #ffffff;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    margin: calc(28 / var(--base) * 100vw) 0;

    &:last-of-type {
        margin-bottom: 0;
    }

    .service_container {
        max-width: calc(1280 / var(--base) * 100vw);
        margin: 0 auto;
        display: flex;
        align-items: center;
        position: relative;
        padding: calc(60 / var(--base) * 100vw) 0;


        &:before {
            content: "";
            position: absolute;
            top: 0;
            right: -50vw;
            bottom: 0;
            left: 28%;
            background-color: #f0fafd;
            z-index: 1;
        }

        .service__images {
            position: relative;
            z-index: 2;
            width: 45%;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            transform: translateX(calc(100 / var(--base) * 100vw));

            .image img {
                width: calc(576 / var(--base) * 100vw);
                height: auto;
                display: block;
            }
        }

        .service__content {
            position: relative;
            z-index: 2;
            width: 55%;
            padding: calc(40 / var(--base) * 100vw) 0 calc(40 / var(--base) * 100vw) calc(100 / var(--base) * 100vw);
            color: #333333;

            h2 {
                font-size: calc(20 / var(--base) * 100vw);
                font-weight: bold;
                margin-bottom: calc(35 / var(--base) * 100vw);
                letter-spacing: 0.05em;
                font-family: var(--font-en);

                span {
                    font-size: calc(28 / var(--base) * 100vw);
                    color: #00a0b0;
                    margin-bottom: calc(10 / var(--base) * 100vw);
                    display: block;
                    font-weight: 300;
                }
            }

            h3 {
                font-size: calc(18 / var(--base) * 100vw);
                font-weight: bold;
                margin-bottom: calc(20 / var(--base) * 100vw);
                letter-spacing: 0.03em;
            }

            p {
                font-size: calc(15 / var(--base) * 100vw);
                line-height: 1.7;
                margin-bottom: calc(30 / var(--base) * 100vw);
                max-width: calc(520 / var(--base) * 100vw);
            }

            ul {
                list-style: none;

                li {
                    font-size: calc(15 / var(--base) * 100vw);
                    position: relative;
                    padding-left: calc(30 / var(--base) * 100vw);
                    margin-bottom: calc(15 / var(--base) * 100vw);
                    font-weight: 500;
                    line-height: 1.6
                        /* display: flex;
                    align-items: center;
                    height: calc(24 / var(--base) * 100vw); */
                }

                li::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: calc(2 / var(--base) * 100vw);
                    width: calc(20 / var(--base) * 100vw);
                    height: calc(20 / var(--base) * 100vw);
                    background-color: #00b5cc;
                    border-radius: 50%;
                }

                li::after {
                    content: "";
                    position: absolute;
                    left: calc(7 / var(--base) * 100vw);
                    top: calc(6 / var(--base) * 100vw);
                    width: calc(5 / var(--base) * 100vw);
                    height: calc(9 / var(--base) * 100vw);
                    border-right: calc(2 / var(--base) * 100vw) solid #ffffff;
                    border-bottom: calc(2 / var(--base) * 100vw) solid #ffffff;
                    transform: rotate(45deg);
                }
            }
        }
    }


    &.is-reverse {

        .service_container {
            &:before {
                right: 28%;
                left: -50vw;
            }

            .service__content {
                padding: calc(40 / var(--base) * 100vw) calc(40 / var(--base) * 100vw) calc(40 / var(--base) * 100vw) 0;

                p {
                    max-width: calc(550 / var(--base) * 100vw);
                }
            }


            .service__images {
                justify-content: flex-start;
                padding-right: 0;
                transform: translateX(calc(-95 / var(--base) * 100vw));
            }
        }
    }
}

@media (max-width: 768px) {

    .mv_section {
        margin: calc(50 / var(--base) * 100vw) auto 0;

        .mv_title {
            h1 {
                line-height: calc(50 / var(--base) * 100vw);

                span {
                    font-size: calc(43 / var(--base) * 100vw);
                    font-weight: 300;
                }
            }
        }
    }

    .service_contents {

        .service_container {
            padding: calc(50 / var(--base) * 100vw) calc(20 / var(--base) * 100vw);
            flex-direction: column-reverse;

            &:before {
                left: 0;
                right: 0;
            }

            .service__content {
                padding: 0;
                width: 100%;

                ul {
                    li {
                        margin-bottom: calc(20 / var(--base) * 100vw);
                        height: auto;
                    }

                    li::before {
                        top: calc(2 / var(--base) * 100vw);
                    }

                    li::after {
                        top: calc(6 / var(--base) * 100vw);
                        transform: rotate(45deg);
                    }
                }
            }

            .service__images {
                justify-content: center;
                transform: unset;

                .image img {
                    width: calc(370 / var(--base) * 100vw);
                }
            }
        }

        &.is-reverse {
            .service_container {
                flex-direction: column;

                &:before {
                    right: 0;
                }

                .service__content {
                    padding: 0;
                    width: 100%;

                    /* ul {
                        li::after {
                            top: 50%;
                            transform: translateY(-50%) rotate(45deg);
                        }
                    } */
                }

                .service__images {
                    justify-content: center;
                    transform: unset;
                }
            }
        }
    }
}