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


#Movies h2{
	background-image: url(../03img/h2_line.gif),url(../03img/autoplay.gif);
	background-repeat: no-repeat;
	background-position: left bottom,right 20px;
	color: #000;
	font-size: 26px;
	margin-top:60px;
	padding-bottom: 4px;
	margin-bottom: 40px;
	}
	
#MainContents #Movies #Light{
	margin-top:20px;
	}

#Movies h2:first-letter{
	font-size:44px;
}

#Movies .sp_only{
	display: none;
	}

#Movies .details{
	clear: both;
	margin-top: 40px;
	}
	
	
#Movies h3 {
	background-image: url(../03img/h3_icon.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 28px;
	color: #000;
	font-size: 20px;
	text-decoration: none;
	}
	
	
.text ul li{
	background-image: url(../03img/check.gif);
	background-repeat: no-repeat;
	background-position: left 4px;
	padding-left: 20px;
	margin-bottom: 12px;
	font-size: 14px;
	font-weight: bold;
	color: #2A2A2A;
	}
	
.text p{
	padding:12px;
	background: -moz-linear-gradient(left, #efece8 50%, #FFF);
	background: -webkit-linear-gradient(left, #efece8 50%, #FFF);
	background: linear-gradient(to right, #efece8 50%, #FFF);
	font-weight:normal;
	color:#000;
	margin-top:20px;
  }
  
 .text .jump{
	text-align: right;
	margin-top: 8px;
	background-image: url(../03img/arw.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 16px;
	font-size: 14px;
	 }

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

.box{
	margin-bottom: 40px;
	display: flex;
	display: -webkit-flex;
	padding: 12px;
}

.text{
	width: 300px;
	margin-left: 20px;
	padding-top: 12px;
}
.douga{
	width: 350px;
	height:198px;
	padding: 0;
}
.douga iframe{
	width: 350px;
	height:198px;
	padding: 0;
	margin: 0;
	border:none;
    -webkit-transition:0.2s linear;
    transition: 0.2s linear;
    -webkit-transform-origin: left top 0;
    transform-origin: left top 0;
	position: relative;
}
#Box01 iframe{
	z-index: 12	
}
#Box02 iframe{
	z-index: 11
}
#Box03 iframe{
	z-index: 10
}
#Box04 iframe{
	z-index: 9
}
#Box05 iframe{
	z-index: 8
}

#Box06 iframe{
	z-index: 7
}

#Box07 iframe{
	z-index: 6
}

#Box08 iframe{
	z-index: 5
}

#Box09 iframe{
	z-index: 4
}

#Box10 iframe{
	z-index: 3
}

#Box11 iframe{
	z-index: 2
}

#Box12 iframe{
	z-index: 1
}

.douga .hover{
	width: 688px;
	height: 386px

}
}

@media screen and (max-width: 953px){
	#MainContents h2{
	background-image: url(../03img/h2_line.gif),none;
	margin-bottom:20px;
	}
	}


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


#MainContents h2{
	background-image: url(../03img/h2_line.gif),none;
	margin-bottom:20px;
	}
	
#Movies h2:first-letter{
	font-size:26px;
}
	
#Movies h3{
	margin-bottom:12px;
	font-size: 16px;	
	}
	

.sp_only{
	display: block;
	float: right;
	}


.douga {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.douga iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% ;
	height: 100% ;
	border: 1px solid #CCC;
}

.text p{
  margin-top:0px;

  
  }
  
 .text ul{
	margin-top: 16px;
	 }
	 
	  .text .jump{
	margin-bottom: 40px;
	 }
	
#Box12{
	margin-top: 20px;
	margin-bottom: 60px;
	}



	
}