@charset "UTF-8";

:root {
    --vw-large: 1360;
    /* PC */
    --vw-small: 390;
    /* SP */
}

/* main {
    background-image: url(../img/common/main-bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */

.h1-wrap {
    margin: 0 auto calc((100vw / var(--vw-large))*48);

    .main_title {
        padding: calc((100vw / var(--vw-large))*150) 0 calc((100vw / var(--vw-large))*48);
    }

    span {
        font-size: calc((100vw / var(--vw-large))*20);
        margin-top: calc((100vw / var(--vw-large))*16);
    }
}

@media screen and (max-width: 768px) {
    .h1-wrap {
        margin: 0 auto calc((100vw / var(--vw-small))*32);

        .main_title {
            padding: calc((100vw / var(--vw-small))*80) 0 calc((100vw / var(--vw-small))*8);
        }

        span {
            font-size: calc((100vw / var(--vw-small))*18);
            margin-top: calc((100vw / var(--vw-small))*8);
        }
    }

}

.mv {
    width: calc((100vw / var(--vw-large))*1260);
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .mv {
        width: 100%;
    }
}

/* service-wrap */

.service-wrap {
    ul {
        margin: calc((100vw / var(--vw-large))*80) auto 0;

        li {
            width: calc((100vw / var(--vw-large))*1280);
            height: calc((100vw / var(--vw-large))*624);

            &:nth-of-type(2n) {
                background-color: #fff;
                padding: 0 0 0 calc((100vw / var(--vw-large))*80);

                .en {
                    color: #EEEEEE;
                    left: calc((100vw / var(--vw-large))*-47) !important;
                    top: calc((100vw / var(--vw-large))*-47) !important;
                }

                .service-description {
                    margin: 0 calc((100vw / var(--vw-large))*40) 0 0;
                }

                p {
                    width: calc((100vw / var(--vw-large))*512);

                }

                .number {
                    color: #EEEEEE;
                    bottom: calc((100vw / var(--vw-large))*-20) !important;
                }
            }

            &:nth-of-type(3) {
                .number {
                    bottom: calc((100vw / var(--vw-large))*-40) !important;
                }
            }

            &:nth-of-type(4) {
                .number {
                    bottom: calc((100vw / var(--vw-large))*-70) !important;
                }
            }

            &:nth-of-type(6) {

                padding-bottom: calc((100vw / var(--vw-large))*80);

                .number {
                    bottom: calc((100vw / var(--vw-large))*-60) !important;
                }
            }



            .img {
                width: calc((100vw / var(--vw-large))*680);
            }

            .service-description {
                position: relative;
                text-align: left;
                width: calc((100vw / var(--vw-large))*552);
                margin: 0 auto 0 calc((100vw / var(--vw-large))*40);

                .en {
                    position: absolute;
                    font-size: calc((100vw / var(--vw-large))*76);
                    line-height: 84.211%;
                    left: calc((100vw / var(--vw-large))*-19);
                    top: calc((100vw / var(--vw-large))*-110);
                    z-index: 0;
                }

                h2 {
                    letter-spacing: 0;
                    position: relative;
                    margin: 0 auto calc((100vw / var(--vw-large))*24);
                }

                p {
                    font-size: calc((100vw / var(--vw-large))*18);
                    letter-spacing: calc((100vw / var(--vw-large))*0.8);
                    position: relative;
                    z-index: 2;

                }

                .number {
                    font-size: calc((100vw / var(--vw-large))*143);
                    position: absolute;
                    right: 0;
                    bottom: calc((100vw / var(--vw-large))*-70);
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .service-wrap {
        margin: 0 auto 0;

        ul {
            margin: 0 auto;

            li {
                width: calc((100vw / var(--vw-small))*360);
                height: initial;
                padding: calc((100vw / var(--vw-small))*80) 0 calc((100vw / var(--vw-small))*40);
                flex-direction: column;

                &:nth-of-type(2n + 1) {
                    flex-direction: column-reverse;
                    justify-content: flex-end;
                }

                &:nth-of-type(2n) {
                    background-color: #fff;
                    padding: calc((100vw / var(--vw-small))*80) calc((100vw / var(--vw-small))*24) calc((100vw / var(--vw-small))*40);

                    .en {
                        color: #EEEEEE;
                        left: calc((100vw / var(--vw-small))*-25) !important;
                        top: calc((100vw / var(--vw-small))*-55) !important;
                    }

                    .service-description {
                        margin: 0 auto calc((100vw / var(--vw-small))*40) 0;
                    }

                    p {
                        width: calc((100vw / var(--vw-small))*342);

                    }

                    .number {
                        color: #EEEEEE;
                        bottom: calc((100vw / var(--vw-small))*0) !important;
                    }

                    .img {
                        width: calc((100vw / var(--vw-small))*360);
                        position: relative;
                        left: calc((100vw / var(--vw-small))*-30);
                    }

                }

                &:nth-of-type(3) {
                    .number {
                        bottom: calc((100vw / var(--vw-small))*0) !important;
                    }
                }

                &:nth-of-type(4) {

                    .en {
                        top: calc((100vw / var(--vw-small))*-25) !important;
                    }

                    .number {
                        bottom: calc((100vw / var(--vw-small))*0) !important;
                    }
                }

                &:nth-of-type(6) {
                    padding-bottom: calc((100vw / var(--vw-small))*60);

                    .en {
                        top: calc((100vw / var(--vw-small))*-25) !important;
                    }

                    .number {
                        bottom: calc((100vw / var(--vw-small))*0) !important;
                    }
                }

                .img {
                    width: calc((100vw / var(--vw-small))*360);
                    position: relative;
                    right: calc((100vw / var(--vw-small))*-30);
                }

                .service-description {
                    position: relative;
                    text-align: left;
                    width: calc((100vw / var(--vw-small))*342);
                    margin: 0 auto calc((100vw / var(--vw-small))*40) calc((100vw / var(--vw-small))*24);

                    .en {
                        position: absolute;
                        font-size: calc((100vw / var(--vw-small))*58);
                        line-height: 84.211%;
                        left: calc((100vw / var(--vw-small))*-25);
                        top: calc((100vw / var(--vw-small))*-55);
                        z-index: 0;
                    }

                    h2 {
                        letter-spacing: 0;
                        position: relative;
                        margin: 0 auto calc((100vw / var(--vw-small))*24);
                    }

                    p {
                        font-size: calc((100vw / var(--vw-small))*14);
                        letter-spacing: calc((100vw / var(--vw-small))*0.6);
                        position: relative;
                        z-index: 2;
                    }

                    .number {
                        font-size: calc((100vw / var(--vw-small))*80);
                        position: absolute;
                        right: 0;
                        bottom: calc((100vw / var(--vw-small))*0);
                    }
                }
            }
        }
    }
}