@charset "UTF-8";

#future{
    position: relative;
    z-index: 1;
    margin-top: 107px;

    @media screen and (max-width: 767px){
        margin-top: 50px;
    }

    .common-title.type02{
        margin: 0 auto 61px auto;

        @media screen and (max-width: 767px){
            margin-bottom: 25px;
        }
    }

    .text{
        margin: 0 auto;

        .main{
            font-family: "Noto Sans JP";
            font-weight: 900;
            font-size: 48px;
            letter-spacing: 0.05em;
            line-height: 60px;
            text-align: center;
            color: #000;

            @media screen and (max-width: 950px){
                font-size: 38px;
                line-height: 48px;
            }

            @media screen and (max-width: 767px){
                font-size: 24px;
                line-height: 36px;
                text-align: left;
            }
        }

        .sub{
            margin-top: 49px;
            font-family: "Noto Sans JP";
            font-weight: 500;
            font-size: 20px;
            letter-spacing: 0.05em;
            line-height: 30px;
            text-align: center;
            color: #000;

            &:nth-child(n + 3){
                margin-top: 20px;
            }

            @media screen and (max-width: 950px){
                font-size: 18px;
                line-height: 26px;
            }

            @media screen and (max-width: 840px){
                margin-top: 25px;
                font-size: 16px;
                line-height: 24px;
            }

            @media screen and (max-width: 767px){
                text-align: left;

                &:nth-child(n + 3){
                    margin-top: 15px;
                }
            }
        }
    }

    .contents{
        display: flex;
        justify-content: flex-start;
        margin-top: 74px;
        padding: 80px 62px 80px 66px;
        border: 1px solid #000;

        @media screen and (max-width: 767px){
            margin-top: 50px;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 25px 20px;
        }

        .img{
            flex-shrink: 0;
            width: 30%;
            max-width: 313px;
            min-width: 250px;
            height: auto;

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

        .content{
            flex-grow: 1;
            margin-left: 44px;
            width: 100%;

            @media screen and (max-width: 767px){
                flex-grow: 0;
                margin-left: 0;
            }

            & ul{
                & li{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;


                    &:not(:first-child){
                        padding-top: 42px;
                        border-top: 1px solid #000;
                    }

                    &:not(:last-child){
                        padding-bottom: 44px;
                    }

                    @media screen and (max-width: 767px){
                        padding-top: 20px;

                        &:not(:last-child){
                            padding-top: 20px;
                            padding-bottom: 20px;
                        }

                        &:last-child{
                            padding-top: 20px;
                        }
                    }

                    .main{
                        font-family: "Noto Sans JP";
                        font-weight: 900;
                        font-size: 28px;
                        letter-spacing: 0.05em;
                        line-height: 36px;
                        text-align: left;
                        color: #198ec5;

                        @media screen and (max-width: 767px){
                            font-size: 20px;
                            line-height: 26px;
                        }
                    }

                    .sub{
                        margin-top: 17px;
                        font-family: "Noto Sans JP";
                        font-weight: 500;
                        font-size: 20px;
                        letter-spacing: 0.05em;
                        line-height: 26px;
                        text-align: left;
                        color: #000;

                        @media screen and (max-width: 767px){
                            margin-top: 8px;
                            font-size: 16px;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
}

#feature{
    position: relative;
    z-index: 1;
    margin-top: 144px;

    @media screen and (max-width: 767px){
        margin-top: 50px;
    }

    .common-title.type02{
        margin: 0 auto 64px auto;

        @media screen and (max-width: 767px){
            margin-bottom: 25px;
        }
    }

    .contents-title{
        display: flex;
        justify-content: flex-start;

        @media screen and (max-width: 767px){
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .content{
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            transition: opacity 0.3s ease;
            padding-bottom: 20px;
            width: calc((100% - (30px * 2)) / 3);

            &.type01{
                border: 2px solid #01BDCF;
            }
            &.type02{
                border: 2px solid #379AC4;
            }
            &.type03{
                border: 2px solid #1E5198;
            }


            &:not(:first-child){
                margin-left: 30px;
            }

            @media screen and (max-width: 767px){
                width: 100%;
                max-width: 500px;

                &:not(:first-child){
                    margin-left: 0;
                    margin-top: 20px;
                }
            }

            .number{
                font-family: Roboto;
                font-weight: 900;
                font-style: italic;
                font-size: 55px;
                line-height: 68px;
                text-align: center;

                @media screen and (max-width: 767px){
                    font-size: 38px;
                    line-height: 50px;
                }

                &.type01{
                    color: #01bdcf;
                }
                &.type02{
                    color: #379AC4;
                }
                &.type03{
                    color: #1E5198;
                }
            }

            .title{
                margin-bottom: 19px;
                font-family: "Noto Sans JP";
                font-weight: bold;
                font-size: 20px;
                letter-spacing: 0.05em;
                line-height: 26px;
                text-align: center;
                color: #000;

                @media screen and (max-width: 767px){
                    font-size: 16px;
                    line-height: 24px;
                }
            }

            .img{
                width: 50%;
                max-width: 102px;
                height: auto;
            }

            .mark{
                position: absolute;
                bottom: 0;
                right: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 42px;
                height: 42px;

                &.type01{
                    background-color: #01bdcf;
                }
                &.type02{
                    background-color: #379AC4;
                }
                &.type03{
                    background-color: #1E5198;
                }

                &::after{
                    content: "";
                    width: 7px;
                    height: 7px;
                    transform: rotate(135deg);
                    border-top: 2px solid #fff;
                    border-right: 2px solid #fff;
                }
            }
        }

        @media (hover: hover) and (pointer: fine){
            .content:hover{
                opacity: 0.5;
                transition: opacity 0.3s ease;
            }
        }
    }

    .contents-detail{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        margin-top: 161px;

        @media screen and (max-width: 767px){
            margin-top: 50px;
        }

        .content{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            margin-top: -100px;
            padding-top: 100px;
            width: 100%;

            &:not(:first-child){
                margin-top: 168px;
            }

            @media screen and (max-width: 767px){
                &:not(:first-child){
                    margin-top: 50px;
                }
            }

            .with-img{
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                width: 100%;

                @media screen and (max-width: 1180px){
                    flex-direction: column-reverse;
                    align-items: flex-start;
                }

                .img{
                    position: relative;
                    flex-grow: 1;
                    height: calc(100 *var(--vw) * 427 / 1920);
                    min-height: 300px;
                    max-height: 427px;

                    @media screen and (max-width: 1240px){
                        min-width: 530px;
                    }

                    @media screen and (max-width: 1180px){
                        display: flex;
                        justify-content: center;
                        margin-top: 70px;
                        width: 100%;
                        height: auto;
                        min-width: 0;
                        min-height: 0;
                        max-height: 100vh;
                    }

                    @media screen and (max-width: 767px){
                        margin-top: 30px;
                    }

                    .number{
                        position: absolute;
                        top: -89px;
                        right: -42px;
                        z-index: 1;
                        font-family: Roboto;
                        font-weight: 900;
                        font-style: italic;
                        font-size: 129px;
                        line-height: 168px;
                        text-align: center;

                        @media screen and (max-width: 767px){
                            top: -40px;
                            right: -25px;
                            font-size: 50px;
                            line-height: 80px;
                        }

                        &.type01{
                            color: #01bdcf;
                        }
                        &.type02{
                            color: #379AC4;
                        }
                        &.type03{
                            color: #1E5198;
                        }
                    }

                    .wrapper{
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        overflow: hidden;
                        width: calc(100 *var(--vw) * 782 / 1920);
                        min-width: 550px;
                        max-width: 782px;
                        height: calc(100 *var(--vw) * 427 / 1920);
                        min-height: 300px;
                        max-height: 427px;
                        border-radius: 0px 0px 80px 0px;

                        @media screen and (max-width: 1180px){
                            position: relative;
                            width: 70%;
                            height: auto;
                            min-width: 0;
                            max-width: 100vw;
                            min-height: 0;
                            max-height: 100vh;
                            border-radius: 10px;
                        }

                        @media screen and (max-width: 767px){
                            width: 100%;
                            max-width: 500px;

                        }

                        & img{
                            width: 100%;
                        }
                    }
                }

                .text{
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    width: 57%;
                    max-width: 677px;
                    margin-left: 101px;

                    @media screen and (max-width: 1180px){
                        width: 100%;
                        max-width: 100vw;
                        margin-left: 0;
                    }

                    .sp-with-number{
                        width: 100%;

                        @media screen and (max-width: 1180px){
                            display: flex;
                            align-items: flex-end;
                            justify-content: flex-start;

                            .sp-number{
                                flex-shrink: 0;
                                font-family: Roboto;
                                font-weight: 900;
                                font-style: italic;
                                font-size: 90px;
                                line-height: 96px;
                                text-align: center;

                                &.type01{
                                    color: #01bdcf;
                                }
                                &.type02{
                                    color: #379AC4;
                                }
                                &.type03{
                                    color: #1E5198;
                                }
                            }

                            .main{
                                padding-left: 15px;
                                flex-grow: 1;
                            }
                        }

                        @media screen and (max-width: 767px){
                            .sp-number{
                                font-size: 50px;
                                line-height: 46px;
                            }

                            .main{
                                margin-left: 10px;
                                padding-left: 10px;
                            }
                        }

                        @media screen and (max-width: 582px){
                            .sp-number{
                                &.type01{
                                    line-height: 70px;
                                }
                            }
                        }
                        @media screen and (max-width: 455px){
                            .sp-number{
                                &.type02{
                                    line-height: 70px;
                                }
                            }
                        }
                        @media screen and (max-width: 392px){
                            .sp-number{
                                &.type03{
                                    line-height: 70px;
                                }
                            }
                        }
                    }

                    .main{
                        padding-bottom: 16px;
                        width: 100%;
                        font-family: "Noto Sans JP";
                        font-weight: bold;
                        font-size: 28px;
                        letter-spacing: 0.05em;
                        line-height: 33px;
                        text-align: left;
                        color: #000;

                        @media screen and (max-width: 767px){
                            padding-bottom: 10px;
                            font-size: 20px;
                            line-height: 28px;
                        }


                        &.type01{
                            border-bottom: 2px solid #01bdcf;
                        }
                        &.type02{
                            border-bottom: 2px solid #379AC4;
                        }
                        &.type03{
                            border-bottom: 2px solid #1E5198;
                        }
                    }

                    .sub-color{
                        margin-top: 50px;
                        margin-bottom: 28px;
                        font-family: "Noto Sans JP";
                        font-weight: bold;
                        font-size: 20px;
                        letter-spacing: 0.05em;
                        line-height: 28px;
                        text-align: left;

                        @media screen and (max-width: 767px){
                            margin-top: 20px;
                            margin-bottom: 20px;
                            font-size: 16px;
                            line-height: 24px;
                        }

                        &.type01{
                            color: #01bdcf;
                        }
                        &.type02{
                            color: #379AC4;
                        }
                        &.type03{
                            color: #1E5198;
                        }

                    }

                    .sub{
                        font-family: "Noto Sans JP";
                        font-weight: 500;
                        font-size: 16px;
                        letter-spacing: 0.05em;
                        line-height: 28px;
                        text-align: left;
                        color: #000;

                        @media screen and (max-width: 767px){
                            font-size: 14px;
                            line-height: 22px;
                        }
                    }
                }

                &.right{
                    flex-direction: row-reverse;
                    justify-content: flex-start;

                    .img{

                        .number{
                            right: auto;
                            left: -42px;

                            @media screen and (max-width: 767px){
                                left: -25px;
                            }
                        }

                        .wrapper{
                            right: auto;
                            left: 0;
                            border-radius: 0px 0px 0px 80px;

                            @media screen and (max-width: 1180px){
                                border-radius: 10px;
                            }

                        }
                    }

                    .text{
                        margin-left: 0;
                        margin-right: 101px;

                        @media screen and (max-width: 1180px){
                            margin-right: 0;
                        }
                    }
                }

                @media screen and (max-width: 1180px){
                    &.right{
                        flex-direction: column-reverse;
                        align-items: flex-end;
                    }
                }
            }

            .figure{
                &.type01{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-top: 98px;
                    padding: 32px 55px 36px 55px;
                    width: 100%;
                    background-color: #01BDCF;

                    @media screen and (max-width: 1180px){
                        margin-top: 50px;
                    }

                    @media screen and (max-width: 767px){
                        margin-top: 25px;
                        padding: 20px;
                    }

                    .text{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 100%;

                        &::before,
                        &::after{
                            content:"";
                            flex-grow: 1;
                            width: 100%;
                            height: 1px;
                            background-color: #fff;
                        }

                        .main{
                            flex-shrink: 0;
                            margin-left: 30px;
                            margin-right: 30px;
                            font-family: "Noto Sans JP";
                            font-weight: bold;
                            font-size: 20px;
                            letter-spacing: 0.05em;
                            line-height: 26px;
                            text-align: center;
                            color: #fff;

                            @media screen and (max-width: 767px){
                                margin-left: 10px;
                                margin-right: 10px;
                                font-size: 16px;
                                line-height: 24px;
                            }
                        }
                    }

                    & ul{
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;

                        @media screen and (max-width: 1240px){
                            padding-right: 9px;
                        }


                        & li{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            margin-top: 17px;
                            padding-top: 11px;
                            padding-bottom: 11px;
                            width: calc((100% - (9px * 5)) / 6);
                            min-width: 174px;
                            height: auto;
                            background-color: #fff;
                            border-radius: 24px;

                            &:not(:nth-child(6n + 1)){
                                margin-left: 9px;
                            }

                            @media screen and (max-width: 1240px){
                                margin-left: 9px;
                            }

                            @media screen and (max-width: 767px){
                                min-width: 130px;
                            }



                            & span{
                                font-family: "Noto Sans JP";
                                font-weight: bold;
                                font-size: 18px;
                                letter-spacing: 0.05em;
                                line-height: 26px;
                                text-align: center;
                                color: #000;

                                @media screen and (max-width: 767px){
                                    font-size: 14px;
                                    line-height: 22px;
                                }
                            }
                        }
                    }
                }
                &.type02{
                    margin-top: 68px;
                    width: 100%;
                    max-width: 788px;

                    @media screen and (max-width: 767px){
                        margin-top: 25px;
                        max-width: 319px;
                    }

                    & img{
                        width: 100%;
                        filter: drop-shadow(0 0 10px rgba(55,154,196,0.3));

                    }
                }
                &.type03{
                    margin-top: 87px;
                    width: 100%;

                    @media screen and (max-width: 767px){
                        display: flex;
                        justify-content: center;
                        margin-top: 25px;

                        & img{
                            margin: 0 auto;
                            width: 100%;
                            max-width: 239px;
                        }
                    }

                }
            }
        }
    }
}

#data{
    margin-top: 144px;
    padding-top: 144px;
    padding-bottom: 144px;
    background-color: #F2F3F5;

    @media screen and (max-width: 767px){
        margin-top: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .w1200.inner{
        position: relative;
        z-index: 1;
    }

    .common-title{
        margin-bottom: 72px;

        @media screen and (max-width: 767px){
            margin-bottom: 25px;
        }
    }

    .contents{
        .upper{
            display: flex;
            justify-content: center;

            @media screen and (max-width: 1240px){
                flex-wrap: wrap;
            }

            @media screen and (max-width: 570px){
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;
                justify-content: flex-start;
            }

            .content{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                padding: 29px 24px 31px 24px;
                width: calc((100% - (13px * 3)) / 4);
                background-color: #fff;

                &:not(:first-child){
                    margin-left: 13px;
                }

                @media screen and (max-width: 1240px){
                    width: calc((100% - 13px) / 2);

                    &:not(:first-child){
                        margin-left: 0;
                    }

                    &:nth-child(2n){
                        margin-left: 13px;
                    }

                    &:nth-child(n + 3){
                        margin-top: 15px;
                    }
                }

                @media screen and (max-width: 570px){
                    padding: 20px;
                    width: 100%;

                    &:not(:first-child){
                        margin-left: 0;
                        margin-top: 15px;
                    }
                }

                .name{
                    padding-left: 15px;
                    padding-right: 15px;
                    font-family: "Noto Sans JP";
                    font-weight: bold;
                    font-size: 20px;
                    letter-spacing: 0.05em;
                    line-height: 26px;
                    text-align: center;
                    color: #fff;
                    background-color: #000;

                    @media screen and (max-width: 767px){
                        font-size: 16px;
                        line-height: 24px;
                    }
                }

                .sub{
                    margin-top: 5px;
                    font-family: "Noto Sans JP";
                    font-weight: bold;
                    font-size: 16px;
                    letter-spacing: 0.05em;
                    line-height: 26px;
                    text-align: center;
                    color: #000;

                    @media screen and (max-width: 767px){
                        font-size: 14px;
                        line-height: 22px;
                    }
                }

                .number{
                    margin-top: 43px;
                    font-family: "Noto Sans JP";
                    font-weight: 900;
                    font-size: 29px;
                    letter-spacing: 0.05em;
                    line-height: 38px;
                    text-align: center;
                    color: #000;

                    &.with-sub{
                        margin-top: 33px;
                    }

                    @media screen and (max-width: 767px){
                        margin-top: 0;
                        font-size: 20px;
                        line-height: 28px;

                        &.with-sub{
                            margin-top: 0;
                        }
                    }

                    & span{
                        font-family: Roboto;
                        font-weight: bold;
                        font-size: 93px;
                        text-align: left;
                        color: #198ec5;

                        @media screen and (max-width: 767px){
                            font-size: 50px;
                            line-height: 65px;
                        }
                    }
                }

                .img{
                    margin-top: 26px;
                    width: 50%;
                    max-width: 97px;

                    &.with-sub{
                        margin-top: 6px;
                    }

                    @media screen and (max-width: 767px){
                        margin-top: 10px;

                        &with-sub{
                            margin-top: 0;
                        }
                    }
                }

                .text{
                    margin-top: 26px;
                    font-family: "Noto Sans JP";
                    font-weight: 500;
                    font-size: 16px;
                    letter-spacing: 0.05em;
                    line-height: 22px;
                    text-align: left;
                    color: #000;

                    @media screen and (max-width: 767px){
                        margin-top: 15px;
                        font-size: 14px;
                        line-height: 22px;
                    }

                }

            }
        }

        .under{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 14px;
            padding: 33px 102px 31px 102px;
            background-color: #fff;

            @media screen and (max-width: 767px){
                padding: 20px;
            }

            .name{
                margin-bottom: 31px;
                padding-left: 16px;
                padding-right: 16px;
                font-family: "Noto Sans JP";
                font-weight: bold;
                font-size: 20px;
                letter-spacing: 0.05em;
                line-height: 32px;
                text-align: center;
                color: #fff;
                background-color: #000;

                @media screen and (max-width: 767px){
                    margin-bottom: 20px;
                    font-size: 16px;
                    line-height: 24px;
                }
            }

            .lists{
                display: flex;

                @media screen and (max-width: 1240px){
                    flex-wrap: wrap;
                }

                @media screen and (max-width: 767px){
                    flex-wrap: nowrap;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: flex-start;
                    width: 100%;
                }

                .list{

                    &:not(:first-child){
                        padding-left: 59px;
                        border-left: 1px solid #198EC5;
                    }

                    &:not(:last-child){
                        padding-right: 59px;
                    }

                    @media screen and (max-width: 1240px){
                        width: 50%;

                        &:not(:first-child){
                            padding-left: 40px;
                        }

                        &:not(:last-child){
                            padding-right: 40px;
                        }

                        &:not(:first-child){
                            padding-left: 0;
                            border-left: none;
                        }

                        &:nth-child(2n){
                            padding-left: 40px;
                            border-left: 1px solid #198EC5;
                        }

                        &:nth-child(n + 3){
                            padding-top: 25px;
                            border-top: 1px solid #198EC5;
                        }

                        &:first-child,&:nth-child(2){
                            padding-bottom: 15px;
                        }
                    }

                    @media screen and (max-width: 767px){
                        width: 100%;

                        &:nth-child(n + 3){
                            border-top: none;
                        }

                        &:not(:first-child){
                            padding-left: 0;
                            padding-top: 10px;
                            border-left: none;
                        }

                        &:not(:last-child){
                            padding-bottom: 10px;
                            padding-right: 0;
                            border-bottom: 1px solid #198EC5;
                        }
                    }

                    .main{
                        font-family: "Noto Sans JP";
                        font-weight: bold;
                        font-size: 16px;
                        letter-spacing: 0.05em;
                        line-height: 22px;
                        text-align: left;
                        color: #000;

                        @media screen and (max-width: 767px){
                            font-size: 14px;
                            line-height: 22px;
                        }
                    }

                    & ul{
                        margin-top: 14px;

                        & li{
                            font-family: "Noto Sans JP";
                            font-weight: 500;
                            font-size: 16px;
                            letter-spacing: 0.05em;
                            line-height: 26px;
                            text-align: left;
                            color: #000;

                            @media screen and (max-width: 767px){
                                font-size: 14px;
                                line-height: 22px;
                            }
                        }
                    }
                }
            }

            .text{
                margin-top: 37px;
                font-family: "Noto Sans JP";
                font-weight: 500;
                font-size: 16px;
                letter-spacing: 0.05em;
                line-height: 22px;
                text-align: left;
                color: #198ec5;

                @media screen and (max-width: 767px){
                    margin-top: 25px;
                    font-size: 14px;
                    line-height: 22px;
                }
            }
        }
    }
}