/*
	modal
-----------------------------------------------------------------------------------------------*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	height: 100%;
	z-index: 5000;
}
.modalOpen__box{
    min-width: 400px;
	padding: 50px;
	height: 100vh;
	overflow-x: scroll;
}
.modal__picture{
	display: flex;
}
[class^="js-movie-modal-open"],
[class^="js-modal-open"] {
    position: relative;
	z-index: 100;
}
[class^="js-modal-open"] {
	width: 100%;
	display: flex;
	overflow: hidden;
	align-items: center;
}
.js-movie-modal-open{
	height: auto;
}
[class^="js-modal-open"]::before {
	content: "";
    background: url(../images/ico_zoom_01.svg) no-repeat center center / 17px #1E467D;
    bottom: 0;
    content: '';
    height: 25px;
    position: absolute;
    right: 0;
    width: 25px;
	z-index: 2;
}
.modal__bg{
    background: rgba(0,0,0,0.7);
    /* height: 100vh; */
    position: absolute;
    width: 100%;
	height: 100%;
}
.modalOpen__box{
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}
.modalOpen__picture{
	position: relative;
	display: flex;
	width: 100%;
    justify-content: center;
    margin: 0 auto;
}
.modalOpen__picture img{
	width: 100%;
}
.close{
    background: #000;
    cursor: pointer;
    height: 40px;
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
}
.close::before, 
.close::after {
    background: #fff;
    content: ' ';
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 20px;
}
.close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.close::after {
    transform: translate(-50%, -50%) rotate(135deg);
}
[class^="modal__picture"] {
	transition: .3s;
}
[class^="modal__picture"]:hover {
	transform: scale(1.05);
    opacity: 0.7;
}
@media screen and (max-width:897px){
	[class^="js-modal-open"] {
		width: 100%;
	}
	.modalOpen__box {
		width: 100%;
		min-width: auto;
	}
	.modalOpen__picture {
		width: 100%;
		max-width: 550px;
	}
}

/* movie　modal
==================================== */
[class^="modal_open"]{
	overflow: hidden;
	position: relative;
    border-radius: 10px;
}
.modal_open::before {
	content: "";
    width: 72px;
    height: 72px;
	background: url(../images/icon_movie_01.svg) no-repeat center center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
	margin-left: 3px;
	z-index: 2;
}
.movie__link {
    transition: .3s;
}
.movie__link:hover {
    opacity: 0.7;
}
.movie__link::before {
    content: none;
}
.modal_box{
	display: none;
	width: 90%;
	max-width: 1200px;
	margin: 0;
    position: fixed;
    z-index: 7777;
}
.modal_ctsArea{
	position: relative;
}
.modal_ctsArea::-webkit-scrollbar{
	display: none;
}
[class^="modal_phMovie"] {
	max-width: 100%;
}
/* modal_open */
.modal_open:hover{
	cursor: pointer;
}
/* modal_close */
.modal_close {
	background: #000;
    cursor: pointer;
    height: 40px;
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
	cursor: pointer;
}
.modal_close::before,
.modal_close::after{
	content: '';
	width: 1px;
	height: 20px;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
}
.modal_close::after{
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* modal_bg */
.modal_bg {
	display: none;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
	opacity: 0.98;
}
.play__btn{
	width: 10%;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	cursor: pointer;
}
.play__btn.play__active{
	display:none;
}
	
@media screen and (max-width:897px){
    /* modal
    ==================================== */
	.modal_open::before {
		width: 50px;
		height: 50px;
	}
    .modal_box {
        max-width: 500px;
    }
	.modal_close {
		right: -10px;
		top: -10px;
	}
    .modal_close::before,
    .modal_close::after{
        height: 15px;
    }
}