@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;
} */

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

@media screen and (max-width: 768px) {
    .mv {
        width: 100%;
        padding: calc((100vw / var(--vw-small))*80) 0 calc((100vw / var(--vw-small))*40);
        margin: 0 auto;
    }
}


/* concept */

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

    .flex {
        width: calc((100vw / var(--vw-large))*1200);
        margin: 0 auto;

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

        .description {
            text-align: left;
            width: calc((100vw / var(--vw-large))*552);

            h2 {
                letter-spacing: 0;
                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);
            }
        }
    }
}

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

        .flex {
            flex-direction: column-reverse;
            width: calc((100vw / var(--vw-small))*360);

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

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

                h2 {
                    letter-spacing: 0;
                    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);
                }
            }
        }
    }
}

/* worries */

.worries {
    padding: calc((100vw / var(--vw-large))*50) 0 0;

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

        .img {
            display: inline-block;
            width: calc((100vw / var(--vw-large))*220);
            margin: 0 auto calc((100vw / var(--vw-large))*8);
        }

        h2 {
            font-size: calc((100vw / var(--vw-large))*40);
        }
    }

    ul {
        width: calc((100vw / var(--vw-large))*553);
        margin: 0 auto;

        li {
            gap: calc((100vw / var(--vw-large))*8);
            justify-content: center;
            margin: 0 auto calc((100vw / var(--vw-large))*24);

            &:last-child {
                margin: 0;
            }

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

            p {
                font-size: calc((100vw / var(--vw-large))*22);
                letter-spacing: calc((100vw / var(--vw-large))*-2);
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .worries {
        padding: calc((100vw / var(--vw-small))*50) 0 0;

        .title-wrap {
            margin: 0 auto calc((100vw / var(--vw-small))*16);

            .img {
                display: inline-block;
                width: calc((100vw / var(--vw-small))*184);
                margin: 0 auto calc((100vw / var(--vw-small))*8);
            }

            h2 {
                font-size: calc((100vw / var(--vw-small))*32);
            }
        }

        ul {
            width: calc((100vw / var(--vw-small))*322);
            margin: 0 auto;

            li {
                gap: calc((100vw / var(--vw-small))*8);
                margin: 0 auto calc((100vw / var(--vw-small))*16);

                &:last-child {
                    margin: 0;
                }

                img {
                    width: calc((100vw / var(--vw-small))*24);
                }

                p {
                    font-size: calc((100vw / var(--vw-small))*18);
                    letter-spacing: calc((100vw / var(--vw-small))*-2);
                    text-align: left;
                    line-height: 133%;
                }
            }
        }
    }

}

/* reason */

.reason {
    margin: calc((100vw / var(--vw-large))*-43) auto 0;

    .reason-top {
        margin: calc((100vw / var(--vw-large))*-56) auto 0;
        padding: 0 0 calc((100vw / var(--vw-large))*100);

        ul {
            width: calc((100vw / var(--vw-large))*960);
            margin: 0 auto;

            li {
                width: calc((100vw / var(--vw-large))*300);
            }
        }
    }

    .reason-bottom {
        ul {
            margin: calc((100vw / var(--vw-large))*80) auto 0;
            padding: 0 0 calc((100vw / var(--vw-large))*100);

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

                &:nth-of-type(2n) {
                    margin: 0 auto 0 0;

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

                    }
                }

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

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

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

                    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))*76);
                        opacity: 0.2;
                        position: relative;
                        left: calc((100vw / var(--vw-large))*-20);
                        bottom: calc((100vw / var(--vw-large))*-20);
                    }
                }
            }
        }
    }
}

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

        .reason-top {
            margin: 0 auto;
            padding: calc((100vw / var(--vw-small))*24) 0 calc((100vw / var(--vw-small))*40);

            ul {
                width: initial;
                margin: 0 auto;

                li {
                    width: initial;
                }
            }
        }

        .reason-bottom {
            ul {
                margin: 0 auto 0;
                padding: calc((100vw / var(--vw-small))*80) 0 calc((100vw / var(--vw-small))*60);

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

                    &:first-child {
                        padding-top: 0;
                    }

                    &:last-child {
                        padding-bottom: 0;
                    }

                    &:nth-of-type(2n) {
                        flex-direction: column-reverse;
                        margin: 0 0 0 auto;

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

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

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

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

                        h2 {
                            margin: 0 auto calc((100vw / var(--vw-small))*24);
                            width: 100%;
                        }

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

                        .number {
                            font-size: calc((100vw / var(--vw-small))*76);
                            left: calc((100vw / var(--vw-small))*-6);
                            bottom: calc((100vw / var(--vw-small))*-20);
                        }
                    }
                }
            }
        }
    }

}

/* flow */

.flow {
    padding: calc((100vw / var(--vw-large))*100) 0;
    background-color: #F6F9FF;

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

        h2 {
            font-size: calc((100vw / var(--vw-large))*56);
            margin: 0 auto calc((100vw / var(--vw-large))*16);
            display: inline-block;
            line-height: 85.714%;
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -16px;
                /*線の上下位置*/
                display: inline-block;
                width: calc((100vw / var(--vw-large))*40);
                /*線の長さ*/
                height: calc((100vw / var(--vw-large))*4);
                /*線の太さ*/
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                /*位置調整*/
                background-color: #083191;
                /*線の色*/
            }
        }

        span {
            margin: calc((100vw / var(--vw-large))*16) auto 0;
            display: block;
        }
    }

    img {
        width: calc((100vw / var(--vw-large))*988);
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .flow {
        padding: calc((100vw / var(--vw-small))*60) 0 calc((100vw / var(--vw-small))*100);

        .title-wrap {
            margin: 0 auto calc((100vw / var(--vw-small))*24);

            h2 {
                font-size: calc((100vw / var(--vw-small))*40);
                margin: 0 auto calc((100vw / var(--vw-small))*16);

                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    bottom: calc((100vw / var(--vw-small))*-16);
                    /*線の上下位置*/
                    display: inline-block;
                    width: calc((100vw / var(--vw-small))*40);
                    /*線の長さ*/
                    height: calc((100vw / var(--vw-small))*4);
                    /*線の太さ*/
                    -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
                    /*位置調整*/
                    background-color: #083191;
                    /*線の色*/
                }
            }

            span {
                margin: calc((100vw / var(--vw-small))*16) auto 0;
                display: block;
            }
        }

        img {
            width: 100%;
            margin: 0 auto;
        }

    }

}

.bnr {
    padding: calc((100vw / var(--vw-large))*80) 0;
    display: inline-block;

    .img {
        width: calc((100vw / var(--vw-large))*840);
        margin: 0 auto;
        display: inline-block;
    }
}

@media screen and (max-width: 768px) {
    .bnr {
        padding: calc((100vw / var(--vw-small))*40) 0 calc((100vw / var(--vw-small))*40);

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

}