@charset "utf-8";

.modal-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background:rgba(0,0,0,0.8); z-index:999; }
.modal { position:absolute; top:50%; left:50%; width:1080px; transform:translate(-50%, -50%); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }

.movie-close { font-size:0; line-height:0; text-align: right; }
.movie { overflow: hidden; position: relative; width: 100%; height: 600px; margin-top: 20px; border-radius: 20px; border: 2px solid #808080; }
.movie video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); z-index: 111; }

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

	.modal { width:750px; }
	.movie { height: 430px; }
}

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

	.modal { left: 20px; right: 20px; width:auto; transform:translate(0, -50%); }
	.movie-close img { height: 40px; }
	.movie { height: auto; margin-top: 10px; aspect-ratio: 5/3; }
}

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

}