.visual{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background: url(/_images/visual/visual_2018.jpg) no-repeat 30% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
@media (min-width: 481px) {
    .visual {
        background: url(/_images/visual/visual_2018.jpg) no-repeat 30% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
}
@media (min-width: 992px) {
    .visual {
        background: url(/_images/visual/visual_2018.jpg) no-repeat 50% 50%;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
}

.visual_2018{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background:#fff url(/_images/visual/visual_2018_2.png) no-repeat 50% 50%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
}
@media (min-width: 481px) {
    .visual_2018 {
        background:#fff url(/_images/visual/visual_2018_2.png) no-repeat 50% 50%;
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        background-size: 100%;
        -o-background-size: 100%;
    }
}
@media (min-width: 992px) {
    .visual_2018 {
        background:#fff url(/_images/visual/visual_2018_2.png) no-repeat 50% 50%;
        -webkit-background-size: 50%;
        -moz-background-size: 50%;
        background-size: 50%;
        -o-background-size: 50%;
    }
}
.visual_2020{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background:#fff url(/_images/visual/visual_2020.png) no-repeat 50% 30%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
}
@media (min-width: 481px) {
    .visual_2020 {
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        background-size: 100%;
        -o-background-size: 100%;
    }
}
@media (min-width: 992px) {
    .visual_2020 {
        -webkit-background-size: 50%;
        -moz-background-size: 50%;
        background-size: 50%;
        -o-background-size: 50%;
    }
}
.visual_2022{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background:#fff url(/_images/visual/visual_2022.png) no-repeat 50% 35%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
}
@media (min-width: 481px) {
    .visual_2022 {
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        background-size: 100%;
        -o-background-size: 100%;
    }
}
@media (min-width: 992px) {
    .visual_2022 {
        -webkit-background-size: 50%;
        -moz-background-size: 50%;
        background-size: 50%;
        -o-background-size: 50%;
    }
}
.visual_2022 .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:10%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding:0 20px;
}
/* 2023 */
.visual_2023{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background:#fff url(/_images/visual/visual_2023.png) no-repeat 50% 50%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
}
@media (min-width: 481px) {
    .visual_2023 {
        -webkit-background-size: 45%;
        -moz-background-size: 45%;
        background-size: 45%;
        -o-background-size: 45%;
    }
}
@media (min-width: 992px) {
    .visual_2023 {
        -webkit-background-size: 30%;
        -moz-background-size: 30%;
        background-size: 30%;
        -o-background-size: 30%;
    }
}
.visual_2023 .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:10%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding:0 20px;
}
/* 2023 */

/* 2025 */
.visual_2025{
    position: relative;
    width: 100%;
    min-height: 100vh;
    text-align: center;
    color: #fff;
    background:#fff url(/_images/visual/visual_2025.png) no-repeat 50% 50%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
    -o-background-size: 100%;
}
@media (min-width: 481px) {
    .visual_2025 {
        -webkit-background-size: 45%;
        -moz-background-size: 45%;
        background-size: 45%;
        -o-background-size: 45%;
    }
}
@media (min-width: 992px) {
    .visual_2025 {
        -webkit-background-size: 30%;
        -moz-background-size: 30%;
        background-size: 30%;
        -o-background-size: 30%;
    }
}
.visual_2025 .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:10%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding:0 20px;
}
/* 2025 */

.visual-container {
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
}


.visual .content-top {
    position: absolute;
    /*width:100%;*/
    top: 15%;
    left:1%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.visual .content-img {
    position: absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    top: 40%;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*padding-bottom:5px;*/
    /*display: block;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
}


.visual .content-01 {
    position: absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*padding-bottom:5px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.visual .content-02 {
    position: absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*padding-bottom:5px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.visual .content-03 {
    position: absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    /*padding-bottom:5px;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.visual .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:1%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.visual_2018 .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:1%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.visual_2020 .content-bottom {
    position:absolute;
    text-align: center;
    vertical-align: center;
    width:100%;
    bottom:10%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding:0 20px;
}


@media (max-height: 414px) and (max-width: 767px) {

    .visual .content-01 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 35%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-02 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 56%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-03 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        /*width:100%;*/ 
        top: 78%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

}

@media (min-height: 500px) and (max-width: 767px) {

    .visual .content-01 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 35%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-02 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 56%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-03 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        /*width:100%;*/
        top: 78%;
        left:0%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-img {
        top: 35%;
    }

    .visual .content-img img {
        width:90%;
    }

    .visual .content-01 img {
        width:30%;
    }

    .visual .content-02 img {
        width:30%;
    }

    .visual .content-03 img {
        width:25%;
    }

}

@media (min-width: 767px) {

    .visual .content-01 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 40%;
        left:-20%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-02 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 47%;
        left:1%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-03 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        /*width:100%;*/
        top: 42%;
        left:21%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }
    .visual .content-img img {
        width:60%;
    }

    .visual .content-01 img {
        width:30%;
    }

    .visual .content-02 img {
        width:30%;
    }

    .visual .content-03 img {
        width:25%;
    }

}


@media (min-width: 768px) and (max-width:991px) {

    .visual .content-top {
        position: absolute;
        width:100%;
        top: 21%;
        left:1%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
}

@media (min-width: 992px) {

    .visual .content-01 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 40%;
        left:-20%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-02 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        width:100%;
        top: 49%;
        left:1%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }

    .visual .content-03 {
        position: absolute;
        text-align: center;
        vertical-align: center;
        /*width:100%;*/
        top: 42%;
        left:21%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        /*padding-bottom:5px;*/
    }
    .visual .content-img img {
        width:60%;
    }

    .visual .content-01 img {
        width:30%;
    }

    .visual .content-02 img {
        width:30%;
    }

    .visual .content-03 img {
        width:25%;
    }
}