@charset "utf-8";

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





trailer-cp



style.css



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

#top{



}





	

.pc{display: block;}

.sp{display: none;}

	





/***********************

#header

***********************/

#header{

	width: 100%;

	height: 479px;

	background: url(../img/top/header.png) no-repeat top center;

	position: relative;

}





#social-container{

	position: absolute;

	z-index: 1;

	top: 20px;

	right: 10px;

}



/***********************

#contents

***********************/

#contents{

	

}





#btn-container{

	display: flex;

	margin: 40px auto;

}



.btn{

	position: relative;

	width: 460px;

	height: 184px;

	overflow: hidden;

}



.btn.fin{

  opacity:0.5;

}



.btn:first-child{

	margin: 0 auto;

}



.btn-base{

	

}





.btn:not(.fin):hover .btn-base{

	margin-top: -184px;

}





.btn:not(.fin):hover .btn-gif{

	display: block;

}





.btn-gif{

	position: absolute;

	z-index: 1;

	top: 20px;

	left: 7px;

	display: none;

	

}



#trailer-container{

	width: 980px;

	background: #e1212d;

	padding: 10px;

	border: 5px solid #fff;

	border-radius: 10px;

	overflow: hidden;

	box-sizing: border-box;

}





#trailer-ttl{

	text-align: center;

	color: #fff;

	padding: 10px 0 20px 0;

	

}



#trailer-box{

	line-height: 0em;

}



#trailer-navi{

	display: flex;

	padding: 10px 0 0 0;

	

}



#trailer-navi p{

	width: 470px;

	height: 75px;

	line-height: 75px;

	text-align: center;

	background: #fff;

	color: #e1212d;

	cursor: pointer;

    font-size: 24px;

    font-weight: bold;

}





#trailer-navi p.active,#trailer-navi p:hover{

	color: #fff;

	background: none;

}





#trailer-navi p:nth-child(1){

	margin: 0 10px 0 0;

	

}









/***********************

#footer

***********************/

#footer{

	width: 980px;

	margin: 100px auto 0 auto;

	background: #000;

	border-radius: 20px 20px 0 0;

	padding: 50px 0 0 0;

}





.footer-txt-block{

	width: 90%;

	margin: 0 auto 50px auto;

	font-feature-settings: "palt";

}





.footer-txt-block h3{

	font-size: 14px;

	font-weight: bold;

	padding: 0 0 5px 0;

}





.footer-txt-block ul{

	padding: 0 0 10px 0 ;

	

}



.footer-txt-block ul p{

    line-height: 1.4em;

    font-size: 11px;

}

.footer-txt-block ul li{

    text-indent: -1em;

    padding-left: 1em;

    line-height: 1.4em;

    font-size: 11px;

}





#official-banner{

	width: 380px;

	height: 100px;

	position: relative;

	margin: 0 auto;

}





#official-banner a{

	position: absolute;

	display: block;

	top: 0px;

	left: 0px;

	z-index: 1;

	-webkit-transition:all 0.1s ease;

	transition: all 0.1s ease;

}





#official-banner:hover a{

	top: 5px;

}





#official-banner:after{

	content: "";

	display: block;

	width: 380px;

	height: 100px;

	border-radius:10px;

	overflow: hidden;

	background: #af111b;

	position: absolute;

	z-index: 0;

	bottom:-5px;

	left: 0px;

}





.cc{

	text-align: center;

	padding: 40px 0 10px 0;

}



/***********************

#bg-container

***********************/

#bg-container{

	position: fixed;

	z-index: 0;

	background: #000;

	width: 100%;

	height: 100%;

	overflow: hidden;

	top: 0px;

	left: 0px;

	right: 0px;

	bottom: 0px;

}





#bg-container:after{

	content: "";

	display: block;

	width: 100%;

	height: 100%;

	position: absolute;

	z-index: 1;

	top: 0px;

	left: 0px;

	right: 0px;

	bottom: 0px;

	background: rgba(0,0,0,0.7) url(../img/top/bg/bg_pt.png) repeat;

}





#bg-container-inner{

	width: 100%;

	height: 100%;

}





.bg-line{

	width: 100%;

	height: 180px;

	animation-iteration-count: infinite;

	animation-timing-function: linear;

}





#line0,#line7{

	background: url(../img/top/bg/line0.jpg) repeat-x;

	background-position: 100px 0px;



	animation-name: line-animation0;

	animation-duration: 60s;

}





#line7{

	animation-name: line-animation1;

	animation-duration: 58s;

}





#line1,#line8{

	background: url(../img/top/bg/line1.jpg) repeat-x;

	background-position: -50px 0px;



	animation-name: line-animation1;

	animation-duration: 58s;



}





#line8{

	animation-name: line-animation2;

	animation-duration: 62s;

}





#line2,#line9{

	background: url(../img/top/bg/line2.jpg) repeat-x;

	background-position: 20px 0px;

	

	animation-name: line-animation2;

	animation-duration: 62s;

}





#line9{

	animation-name: line-animation3;

	animation-duration: 57s;

}





#line3,#line10{

	background: url(../img/top/bg/line3.jpg) repeat-x;

	background-position: -80px 0px;

	

	animation-name: line-animation3;

	animation-duration: 57s;



}





#line10{

	animation-name: line-animation4;

	animation-duration: 61s;

}





#line4,#line11{

	background: url(../img/top/bg/line4.jpg) repeat-x;

	background-position: 150px 0px;

	

	animation-name: line-animation4;

	animation-duration: 61s;



}





#line11{

	animation-name: line-animation5;

	animation-duration: 59s;

}





#line5,#line12{

	background: url(../img/top/bg/line5.jpg) repeat-x;

	background-position: -120px 0px;



	animation-name: line-animation5;

	animation-duration: 59s;

}



#line12{

	animation-name: line-animation6;

	animation-duration: 63s;

}





#line6,#line13{

	background: url(../img/top/bg/line6.jpg) repeat-x;

	background-position: 0px 0px;

	

	animation-name: line-animation6;

	animation-duration: 63s;

}





#line13{

	animation-name: line-animation2;

	animation-duration: 62s;

}





@keyframes line-animation0 {

	from{background-position: 100px 0px;}

	to{background-position: 2020px 0px;}

}





@keyframes line-animation1 {

	from{background-position: -50px 0px;}

	to{background-position: -1970px 0px;}

}





@keyframes line-animation2 {

	from{background-position: 20px 0px;}

	to{background-position: 1940px 0px;}

}





@keyframes line-animation3 {

	from{background-position: -80px 0px;}

	to{background-position: -2000px 0px;}

}



@keyframes line-animation4 {

	from{background-position: 150px 0px;}

	to{background-position: 2070px 0px;}

}





@keyframes line-animation5 {

	from{background-position: -120px 0px;}

	to{background-position: -2040px 0px;}

}





@keyframes line-animation6 {

	from{background-position: -0 0px;}

	to{background-position: 1920px 0px;}

}







/***********************



@sp



***********************/

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

	

	.pc{display: none;}

	.sp{display: block;}

	

	#header{

		width: 100%;

		height: 250px;

		background-size: auto 200px;

		background-position: top center;

	}

	

	#social-container {

		padding: 200px 0;

		position: initial;

		display: flex;

		flex-wrap: wrap;

		display: -webkit-flex; /* Safari */

		-webkit-flex-wrap: wrap; /* Safari */

	  -webkit-justify-content: center; /* Safari */

	  justify-content:         center;

	}

	

	#gaiyou img{

		width: 100%;

	}

	

	#btn-container{

		display: block;

	}

	

	.btn{

		width: 300px;

		height: 120px;

		margin: 0 auto;

	}

	

	.btn:first-child{

		margin: 0 auto 15px auto;

	}

	

	.btn:hover .btn-base{

		margin: 0;

	}

	

	.btn:hover .btn-gif{

		display: none;

	}



	

	.btn-gif{

		display: none;

	}

	

	.btn-base{

		width: 100%;

	}

	

	#trailer-container{

		width: 100%;

		background: #e1212d;

		padding: 10px;

		border: 5px solid #fff;

		border-radius: 10px;

		overflow: hidden;

		box-sizing: border-box;

	}





	#trailer-ttl{

		text-align: center;

		color: #fff;

		padding: 0px 0 10px 0;

	}

	

	#trailer-ttl img{

		width: 60%;

		max-width: 415px;

	}





	#trailer-box{

		width: 100%;

		position: relative;

		line-height: 0em;

	}

	#trailer-box:before{

		content: "";

		display: block;

		padding-top: 56.25%;

	}

	

	#trailer-box iframe{

		width: 100%;

		height: 100%;

		position: absolute;

		top: 0px;

		left: 0px;

	}



	#trailer-navi{

		display: flex;

		padding: 10px 0 0 0;



	}



	#trailer-navi p{

		width: 50%;

		height: 50px;

		line-height: 50px;

		text-align: center;

		background: #fff;

		color: #e1212d;

		cursor: pointer;

		font-size: 18px;

		font-weight: bold;

	}





	#trailer-navi p.active,#trailer-navi p:hover{

	}





	#trailer-navi p:nth-child(1){



	}

	

	#footer{

		width: 100%;

		margin: 100px auto 0 auto;

		background: #000;

		border-radius: 20px 20px 0 0;

		padding: 50px 0 0 0;

	}



	.footer-txt-block{

		width: 90%;

		margin: 0 auto 50px auto;

	}





	.footer-txt-block h3{

		font-size: 16px;

		font-weight: bold;

		padding: 0 0 5px 0;

	}





	.footer-txt-block ul{



	}





	.footer-txt-block ul li{



	}





	#official-banner{

		width: 300px;

		height: 79px;

		position: relative;

		margin: 0 auto;

	}





	#official-banner a{

		position: absolute;

		display: block;

		top: 0px;

		left: 0px;

		z-index: 1;

		-webkit-transition:all 0.1s ease;

		transition: all 0.1s ease;

	}

	

	#official-banner a img{

		width: 300px;

		height: 79px;

	}





	#official-banner:hover a{

		top: 5px;

	}





	#official-banner:after{

		content: "";

		display: block;

		width: 300px;

		height: 79px;

		border-radius:10px;

		overflow: hidden;

		background: #af111b;

		position: absolute;

		z-index: 0;

		bottom:-5px;

		left: 0px;

	}





	.cc{

		text-align: center;

		padding: 40px 0 10px 0;

	}



}