@charset "UTF-8";

.vision_top {
    width: 100%;
    max-width: 1280px;
    padding: 80px 40px 0;
    margin: auto;
    position: relative;
    z-index: 1;
}


.vision_top .en {
    font-size: 20px;
    margin-bottom: 20px;
}

.vision_top .en::before {
    content: '';
    width: 12px;
    height: 12px;
    background: #246BA1;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

.vision_top .title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
}

.vision_top .title_sub {
    font-size: 16px;
    margin: auto auto 40px;
}

.vision_top .txt {
    font-size: 16px;
}

.vision_top .image {
    margin-top: 40px;
}

.vision_top .obj01 {
    width: 160px;
    position: absolute;
    z-index: 0;
    right: -180px;
    top: 210px;
}

.vision_top .obj02 {
    width: 170px;
    position: absolute;
    z-index: -1;
    right: -80px;
    top: 460px;
}


.vision_content01 {
    margin-top: 120px;
}

.vision_content01 .inner {
    width: 100%;
    max-width: 1280px;
    padding: 0 40px;
    margin: auto;
}

.vision_txt01 {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.vision_anime {
    position: relative;
    z-index: 1;
    margin: 160px auto 260px;
    width: 424px;
}

.vision_anime .abs {
    position: absolute;
    z-index: 1;
    width: 61.3%;
    opacity: 0;
    transition-duration: 1s;
}

.vision_anime .img01 {
    width: 100%;
    margin: auto;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition-duration: 1s;
    transition-delay: .5s;
}

.vision_anime .img02 {
    top: -30%;
    left: 20%;
    transition-delay: 1.5s;
}

.vision_anime .img03 {
    top: 20%;
    right: -45%;
    transition-delay: 2s;
}

.vision_anime .img04 {
    bottom: -30%;
    left: 20%;
    transition-delay: 2.5s;
}

.vision_anime .img05 {
    top: 20%;
    left: -45%;
    transition-delay: 3s;
}

.vision_anime.is-active .img01,
.vision_anime.is-active .abs {
    opacity: 1;
}

.vision_box01 {
    padding-bottom: 100px;
}


@media only screen and (max-width:768px) {

    .vision_top {
        max-width: 100%;
        padding: 15vw 5vw;
    }


    .vision_top .en {
        font-size: 4vw;
        margin-bottom: 4vw;
    }

    .vision_top .en::before {
        width: 1.6vw;
        height: 1.6vw;
        margin-right: 1.6vw;
        vertical-align: middle;
    }

    .vision_top .title {
        font-size: 6vw;
        margin-bottom: 2vw;
    }

    .vision_top .title_sub {
        font-size: 3.47vw;
        margin: auto auto 6vw;
    }

    .vision_top .txt {
        font-size: 3.47vw;
    }

    .vision_top .image {
        margin-top: 6vw;
    }

    .vision_top .obj01 {
        width: 21vw;
        position: absolute;
        z-index: -1;
        right: 5vw;
        top: 10vw;
    }

    .vision_top .obj02 {
        width: 22.6vw;
        position: absolute;
        z-index: -1;
        right: -8vw;
        top: 85vw;
    }


    .vision_content01 {
        margin-top: auto;
    }

    .vision_content01 .inner {
        max-width: 100%;
        padding: 0 5vw;
    }

    .vision_txt01 {
        font-size: 4vw;
    }

    .vision_anime {
        margin: 20vw auto 30vw;
        width: 47vw;
    }

    .vision_anime .abs {
        position: absolute;
        z-index: 1;
        width: 61.3%;
        opacity: 0;
        transition-duration: 1s;
    }


    .vision_box01 {
        padding-bottom: 10vw;
    }
    .vision_box01>div{
        margin-bottom: 4vw;
    }

}