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

body, header, footer, h1, div, p, section, article{
	margin:0;
	padding:0;
}
body{
	font:13px/1.3 "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	background:#000;
	color:#FFF;
}
section:last-child{
	margin-top:2em;
	width:100%;
}
a{
	text-decoration:none;
	color:#FFF;
}
img{
	width:100%;
	display:block;
}
#site_logo{
	width: 40%;
	max-width:293px;
	position:absolute;
	z-index:1000;
}
#picup-sites, .inner span, .inner a{
	display:block;
	overflow:hidden;
}
#loading{
	text-align:center;
	font-size:1.5em;
}
#link_for_mobile{
	display:block;
	overflow:hidden;
	position:relative;
}
#link_for_mobile:before{
	content:"+";
	border-radius:50px;
	background:#39C;
	display:block;
	position:absolute;
	z-index:3000;
	font-size:1.5em;
	padding-left:30px;
	width:55px;
	height:60px;
	top:calc( 50% - 40px );
	right:-40px;
	padding-left:15px;
	line-height:60px;
}
#fukidashi{
	display:none;
}

#fukidashi a{
	display:block;
	margin:10px 20px;
}	
#fukidashi a p{
	display:block;
	font-size:1.2em;
}
#fukidashi a p.camp {
	font-size:2em;
}
#fukidashi a p:after{
	display:block;
	text-align:right;
	content:"..... つづく。";
	color: #ff0;
	font-weight:bold;
}
#fukidashi a p.camp:after{
	content:"詳細はコチラ>>";
}
#fukidashi a h2{
	display:none;
	color:#666;
	margin:1.5em 1.5em 0;
	font-size:2em;
	line-height:1.2;
	padding:0 0 0.5em;
	margin-bottom:0;
}
#fukidashi a h2.camp {
	margin: 0;
	padding: 0;
	display:inline-block;
	color:#ff007f;
	font-size:3em;
}
	
.content-slider{
	list-style: none outside none;
	padding-left: 0;
	margin: 0 auto;
}
.content-slider li{	
	color:#eee;
	display:inline-block;
	vertical-align:top;
	background:#000;
	border-radius:3px;
	box-sizing:border-box;
	margin:5px;
	width:calc(100% - 5px);
}
.inner h3{
	height: 3.7em;
	line-height:1.2;
	overflow:hidden;
	padding:10px 5px 0;
	margin:0;
	font-weight:normal;
	}
.inner a{
	padding:5px 10px 0;
	border:1px solid #222;
}
.inner a:after{
	content:"詳細表示 +";
	color:#ff0;
	opacity:0.6;
	text-align:right;
	display:block;
	margin-bottom:10px;
}
.inner a:hover:after{
	opacity:1;
}
.release-date{
	font: 16px/1 'Jura', sans-serif;
	color:#999;
	padding:0 0 10px 0;
	text-align:right;
	font-weight:bold;
}
.release-date:before{
	content:"+ Release";
	padding-right:0.2em;
}
.thum{
	position:relative;
	min-height:100px;
}
.thum img{
	opacity:0.6;
}

.thum:hover img{
	opacity:1;
}
.thum:before{
	content:"▲";
	color:#FFF;
	background:#000;
	padding:5px 5px 0;
	width:20px;
	height:30px;
	border-radius:5px;
	transform: rotate(90deg);
	font-size:20px;
	opacity:0.7;
	position:absolute;
	z-index:2000;
	top:35%;
	left:40%;
}
.actress{	
	color: #999;
}
.actress:before{
	content:"出演：";
	padding-left:0.3em;
}

.content-slider li.movieplay{
	display:none;
	background:#C03;
	position:relative;
}
.content-slider li.movieplay .thum img{
	opacity:1;
}
.content-slider li.movieplay .release-date, .content-slider li.movieplay .actress{
	color:#FFF;
}
.content-slider li.movieplay .thum:before{
	display:none;
}
.content-slider li.movieplay:before{
	content:"再生中";
	font-size:1.2em;
	display:block;
	position:absolute;
	background:#000;
	padding:5px;
	top:15px;
	z-index:1000;
}
@media screen and (min-width: 400px) {	
.content-slider li.movieplay{
	display:inline-block;
}
#fukidashi{
	display:block;
	}
.content-slider li{	
	width:calc(100% / 2 - 10px);
}
}
@media screen and (min-width: 640px) {	
#link_for_mobile:before{
	width:72px;
	height:90px;
	top: calc(50% - 45px);
	right:-45px;
	font-size:2em;
	line-height:90px;
	padding-left:18px;
}

.content-slider li{	
	width:calc(100% / 3 - 10px);
}
}

@media screen and (min-width: 1200px) {
body{		
	overflow:hidden;
}
#link_for_mobile{
	position:inherit;
}
video{
	position:absolute;
	top:0;
	left:0;
}
			
section{
	position:absolute;
	z-index:2000;
	width:100%;
}
#fukidashi{
	top:80px;
}
#bottom{
	width:96%;
	left:2%;
	bottom:30px;
}
.content-slider li{
	width:auto;
	margin:0;
}
#fukidashi a{
	background:url(../img/ukidashi.png) no-repeat;
	width:450px;
	height:447px;
	position:relative;
	padding:30px 80px 0 90px;
	margin-top:10px;
	display:block;
	overflow:hidden;
}	
#fukidashi a p{
	color:#000;
	display:block;
	font-size:1.5em;
	line-height:1.4;
}
#fukidashi a p.camp {
	color: #484848;
	font-size:2.9em;
}
#fukidashi a h2{
	display:block;
}
#fukidashi a h2.camp{
	margin: .6em .6em 0;
	font-size: 5.2em;
}
#fukidashi a p:after{
	font-size:1.3em;
	color: #0364F9;
	display:inline-block;
	text-align:left;
	padding-left:0.5em;
}
#fukidashi a{
	-webkit-animation: buruburu 700ms ease-out;
	-moz-animation: buruburu 700ms ease-out;
}
@-webkit-keyframes buruburu {
100%, 15%, 40%, 75% {
 -webkit-transform-origin:center center
}
0%{
	opacity:0;
	margin-top:400px;
 -webkit-transform:scale(0, 0);
 -moz-transform:scale(0, 0);
}
15% {
	opacity:0.25;
	margin-top:300px;
 -webkit-transform:scale(0.25, 0.25);
 -moz-transform:scale(0.25, 0.25);
}
40% {
	opacity:0.5;
	margin-top:200px;
 -webkit-transform:scale(0.5, 0.5);
 -moz-transform:scale(0.5, 0.5);
}
75% {
	opacity:0.75;
	margin-top:100px;
 -webkit-transform:scale(0.75, 0.75);
 -moz-transform:scale(0.75, 0.75);
}
100% {
	opacity:1;
	margin-top:0;
 -webkit-transform:scale(1, 1);
 -moz-transform:scale(1, 1);
}
}
}

@media screen and (min-width: 1400px) {
#bottom{
	width:80%;
	left:10%;
}
}