@charset "utf-8";
/* CSS Document */

/*----------------------*/

#modalArea_Movie{
	position: fixed;
	width:100%;
	height:100%;
	z-index:500;
	top:0;
	left:0;
}

#modalArea_Movie .modal_Main {
	display:none;
	position:fixed;
	z-index: 2;
 width: 90%;
	max-width: 740px;
	margin:0;
	top:0;
	left:50%;
 transform: translateX(-50%);
}

#modalArea_Movie .modal_Main .movie_wrap{
	line-height:0;
	font-size:0;
}

#modalArea_Movie .modal_Main .movie_wrap .youtube {
	position:relative;
	width:100%;
	height: 0;
	overflow: hidden;
	padding-top: 56.25%;
	box-sizing: border-box;
}

#modalArea_Movie .modal_Main .movie_wrap .youtube iframe{
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	box-sizing: border-box;
}

#modalArea_Movie .modal_Main .movie_wrap .closeBtn {
 display:block;
 position: absolute;
 z-index:2;
 right: 0;
 top:-62px;
 width: 50px;
 height: 50px;
 text-decoration: none;
 text-align: center;
 cursor: pointer;
 text-indent: -999px;
 overflow: hidden;
}

#modalArea_Movie .modal_Main .movie_wrap .closeBtn:hover {
  opacity: 1;
}

#modalArea_Movie .modal_Main .movie_wrap .closeBtn:before, .closeBtn:after {
 position: absolute;
 left: 50%;
 top: 0;
 content: ' ';
 height: 100%;
 width: 2px;
 background-color: #ffffff;
}

#modalArea_Movie .modal_Main .movie_wrap .closeBtn:before {
  transform: rotate(45deg);
}

#modalArea_Movie .modal_Main .movie_wrap .closeBtn:after {
  transform: rotate(-45deg);
}

#modalArea_Movie .modal_BK {
	display: none;
  position:fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.8;
  filter: alpha(opacity=80);
}

/*----------------------------*/


/* 横長画面の場合 */

@media screen and (max-width: 1040px) and (orientation:landscape){
 
 #modalArea_Movie .modal_Main {
  width: 60%;
 }

 #modalArea_Movie .modal_Main .movie_wrap .closeBtn {
  right: 0;
  top:-30px;
  width: 20px;
  height: 20px;
 }
 
}
/*----- END : @media screen and (orientation:landscape) -----*/