/*

******************************************************************

* movie

******************************************************************/

.movie {

    position: relative;

    padding: 3.47vw 20px 11.94vw;

	/*background: rgb(4,4,19);*/

	/*background: linear-gradient(180deg, rgba(4,4,19,1) 0%, rgba(4,4,19,1) 82%, rgba(0,0,0,1) 100%);*/

    background: url(../img/bg_movie.png) no-repeat center top;

    background-size: cover;

}

.movie__inner {

    width: 100%;

    max-width: 1256px;

    height: 100%;

    margin: 0 auto;

    padding: 0 30px;

}

.movie-title {

    display: -ms-grid;

    display: grid;

    justify-items: center;

    margin-bottom: 3.82vw;

    gap: 4px;

    text-align: center

}

.movie-content {

	position: relative;

    padding-top: 57.107%;

    width: 100%;

    height: 0;

}

.movie-content.bg_pv{

    background: url(../img/bg_pv.png) no-repeat top center;

    background-size: 100%;

}

.movie-content.bg_cm{

    background: url(../img/bg_cm.png) no-repeat top center;

    background-size: 100%;

    margin-top: 40px;

}

.movie-content.bg_story{

    background: url(../img/bg_story.png) no-repeat top center;

    background-size: 100%;

    margin-top: 40px;

}

.movie-content .c-h3__title {

    width: 8.47vw;

    max-width: 122px;

    text-align: center;

    margin-bottom: 0.76vw;

}

.movie-content__list{

    display: flex;

    justify-content: center;

    gap: 2.08vw;

    position: absolute;

    top: calc(50% + 2.78vw);

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    padding: 0 8.528428%;

}

.movie-content.bg_pv .movie-content__list{

    top: 50%;

}

.movie-content.bg_story .movie-content__list{

    padding: 0 18.9597315%;

}



.promotion-inner {

	position: relative;

	top: 0;

	right: 0;

	width: 100%;

	cursor: pointer;

	transition: opacity .2s linear;

    display: block;

}

.promotion-inner img {

	width: 100%;

}



.modal-video {

    background-color: rgba(0,0,0,0.8);

}

.modal-video-movie-wrap {

    margin-top: 56px;

}

.modal-video-close-btn {

	display: block;

	position: absolute;

	top: -56px;

	right: 0;

	z-index: 2;

	width: 179px;

	height: 50px;

	text-indent: -9999px;

	background: url(../img/v_close.png) no-repeat;

	background-size: 100%;

	cursor: pointer;

    transition: opacity .2s linear;

}



.modal-video-close-btn:before,

.modal-video-close-btn:after {

	content: none;

}



.js-target.movie-slideIn .movie-content{

	transform: translate(0, 200px);

	transition: all 0.5s ease;

}

.js-target.is-active.movie-slideIn .movie-content{

	opacity: 1;

	transform: translate(0, 0);

}



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

    .promotion-inner:hover {

        opacity: 0.8;

    }

    .modal-video-close-btn:hover {

        opacity: .8;

    }

}



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

    .movie__inner {

        padding: 0 2%;

    }

    .movie-title {

        margin-bottom: 20px;

    }

    .movie-content.bg_cm, .movie-content.bg_story{

        margin-top: 20px;

    }

}