/* fv */
.fv{
    background: url(../img/top/bg_fv.png) #FFF no-repeat;
    background-size: cover;
    background-position: center top;
    padding: 1.5% 0 28%;
}

.fv .txt_fv{
    width: 76vw;
    margin: 31% auto 0;
    font-size: 2vw;
    text-align: center;
    line-height: 1.8;
}
.fv .img_fv{
    width: 78vw;
    margin: 4% auto 0;
}

@media screen and (max-width: 768px){
    .fv{
        background: url(../img/top/bg_fv_sp.png) #FFF no-repeat;
        background-size: cover;
        background-position: center top;
        padding: 5% 0 76.4%;
    }
    .fv .txt_fv{
        width: 92vw;
        margin: 68% auto 0;
        font-size: 4.4vw;
        line-height: 1.7;
    }
    .fv .img_fv{
        width: 90vw;
        margin: 4% auto 0;
    }
    .fv .img_fv{
        width: 86vw;
        margin: 4% auto 0;
    }
}

/* step */
.step{
    margin: -13% 0 0;
    padding: 0 0 13%;
    background: url(../img/top/bg_step.png) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}

.step .step_gallery{
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .step{
        margin: -48% 0 0;
        padding: 0 0 27%;
        background: url(../img/top/bg_step_sp.png) no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
    }
    
    .step .step_gallery{
        width: 100%;
        margin: 0 auto;
    }
}

/* recommend */
.recommend{   
    margin: -0.1% 0 0;
    padding: 2% 0 15%;
    background: #FBF4EB;
    background: url(../img/top/bg_news.png) #FBF4EB no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
}

.recommend h2{
    width: 28vw;
    margin: 0 auto 2%;
}

.recommend .recommend_gallery{
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .recommend{
        padding: 10% 0 26%;
        background: #FBF4EB;
        background: url(../img/top/bg_news_sp.png) #FBF4EB no-repeat;
        background-size: 100% auto;
        background-position: center bottom;
    }
    
    .recommend h2{
        width: 60vw;
        margin: 0 auto 5%;
    }
    
    .recommend .recommend_gallery{
        width: 100%;
        margin: 0 auto;
    }
    
}

/* news */
.news{
    margin: -0.2% 0 0;
    padding: 2% 0 15%;
    background: url(../img/top/bg_color.png) #FBF4EB repeat-y;
    background-size: 100% auto;
}

.news h2{
    width: 22vw;
    margin: 0 auto 2%;
}

.news .news_gallery{
    width: 100%;
    margin: 0 auto;
}

.news .news_gallery li{
    margin: 0 1%;
}

.news .news_gallery .slick-dots li{
    margin: 5px;
}

@media screen and (max-width: 768px){
    .news{
        margin: -0.2% 0 0;
        padding: 8% 0 20%;
        background: url(../img/top/bg_color_sp.png) #FFF repeat-y;
        background-size: 100% auto;
    }
    .news h2{
        width: 54vw;
        margin: 0 auto 5%;
    }
    .news .news_gallery li{
        margin: 0 0.7%;
    }   
    .news .news_gallery .slick-next{
        right:3%;
    }
    .news .news_gallery .slick-prev{
        left:3%;
    }
}

/* movie */
.bg_movie{
    width: 100%;
    margin: -11% 0 0;
}
.movie{
    padding: 3% 0 10%;
    background: #C2E1D2;
}

.movie h2{
    width: 26vw;
    margin: 0 auto 2%;
}
.movie .movie_gallery{
    width: 64%;
    margin: 0 auto;
}
.movie .movie_gallery li{
    margin: 0;
}
.movie .movie_gallery li img{
    width: 100%;
    height: auto;
    opacity: .3;
    transform: scale(.8);
    transition: opacity .5s, transform .5s;
}

.movie .movie_gallery li.slick-center img{
    opacity: 1;
    transform: scale(1);
}

.movie .movie_gallery .slick-next{
    top:46%;
    right:-3%;
}
.movie .movie_gallery .slick-prev{
    top:46%;
    left:-3%;
}

.movie .movie_gallery .slick-dots li{
    margin: 5px;
}

.movie .movie_gallery .slick-dots{
    bottom:-46px;
}

.movie .btn_movie{
    width: 24vw;
    margin: 5% auto 2%;
}
@media screen and (max-width: 768px){
    .bg_movie{
        margin: -27% 0 0;
    }
    .movie{
        margin: -1% 0 0;
        padding: 10% 0 10%;
        background: #C2E1D2;
    }
    .movie h2{
        width: 60vw;
        margin: 0 auto 6%;
    }
    .movie .movie_gallery{
        width: 98%;
        margin: 0 auto;
    }
    .movie .movie_gallery .slick-next{
        right:6%;
    }
    .movie .movie_gallery .slick-prev{
        left:6%;
    }
    .movie .movie_gallery .slick-dots{
        margin: 0 1%;
    }
    .movie .btn_movie{
        width: 56vw;
        margin: 16% auto 2%;
    }
}