@charset "UTF-8";

/*  TOP                                 
------------------------------------------- */

#top h1,#top h2,#top h3,#top h4,#top h5,#top h6,#top p{ display:none;}
#comBanner img{
	width:100%;
	height:auto;
}
@media screen and (min-width:1201px){
	#top{
		width:100%;
		height:895px;
		position:relative;
		background:#fff url("../images/main_pc.jpg") center top no-repeat;
		position:relative;
		
	}
	#comBanner{
		position:absolute;
		width:220px;
		top:500px;
		right:8%;
		background:none;
		opacity:1;
		display:block;
	}
}
@media screen and (min-width:769px) and (max-width:1200px){
	#top{
	width:100%;
	height:68vw;
	position:relative;
	background:#fff url("../images/main_pc.jpg") center top no-repeat;
	background-size:100% auto;
	}
	#comBanner{
		position:absolute;
		width:18vw;
		top:35vw;
		right:2vw;
		background:none;
		opacity:1;
		display:block;
	}
}
@media screen and (max-width:768px){
	#top{
	width:100%;
	min-height:210vw;
	padding-top:210vw !important;

	margin:0;
	overflow:hidden;
	position:relative;
	background:#fff url("../images/main_sp.jpg") left top no-repeat;
	background-size:100% auto;
	}
	#comBanner{
		display:none;
	}
	#comBanner2{
		width:80%;
		height:auto;
		max-width:350px;
		text-align:center;
		line-height:0;
		background:none;
		opacity:1;
		margin: 30px auto 0 auto;
		padding:0;
		position:relative;
		display:block;
	}
	#comBanner2 img{
		width:100%;
	}
}
#top #main h1,
#top #main h2,
#top #main h3,
#top #main h4,
#top #main h5,
#top #main h6{
	display:none;
}


/* TRAILER
----------------------------------------------------- */


@media screen and (min-width:769px){
	#trailer{
		background:#000 url(../images/trailer_bg.jpg) center top no-repeat;
		width:100%;
		text-align:center;
	}
	#trailer .content{
		margin-top:50px;
	}
	#trailerList{

	}
	#trailerList li{
		width:47%;
		float:left;
	}
	#trailerList li img{
		width:100%;
		border:5px solid #333;
	}
	#trailerList li:last-child{
		width:47%;
		float:right;

	}
	#trailerList p{
		color:#999;
		text-align:center;
	}
}
@media screen and (max-width:768px) {
	#trailer{
		background:#000 url(../images/trailer_bg.jpg) center top no-repeat;
		background-size:auto 100%;
		width:100%;
		text-align:center;
		line-height:1;
		padding-bottom:30px !important;
	}
	#trailer .content{
		margin-top:50px;
	}
	#trailerList{

	}
	#trailerList li{
		width:100%;
		margin-bottom:30px;
	}
	#trailerList li img{
		width:100%;
		border:5px solid #333;
	}
	
	#trailerList p{
		color:#999;
		margin-top:10px;
		text-align:center;
	}
}
/* trailer modal
----------------------------------------------------- */
@media screen and (min-width: 641px)  {
	#trailerBox.modal{
		width:100%;
		height:100%;
		background:#000;
		padding:0;
		margin:0;
	}
	#tabMenu{
		width:100%;
		height:50px;
		position:absolute;
		bottom:0;
		left:0;
	}
	#tabMenu a{
		width:50%;
		height:50px;
		display:block;
		text-align:center;
		padding:10px 0 0 0;
		float:left;
		color:#000;
		background:#ccc;
		cursor:pointer;
	}
	#tab01Btn.active,
	#tab02Btn.active{

		background:#b31d41;
		color:#ccc;
	}
	#tabArea{
		width:100%;
		height:450px;
		position:relative;
	}
	#tabArea iframe{
		width:100%;
		height:450px;
		position:absolute;
		top:0;
		left:0;
	}
	#tab01,
	#tab02{
		display:none;
	}
	.trailer01 #tab01,
	.trailer02 #tab02{
		display:block;
	}
}
@media screen and (max-width: 640px)  {
	#trailerBox.modal{
		width:100vw;
		height:100vh;
		background:#000;
		padding:0;
		margin:0;
		padding-top:40%;
	}
	
	#tabMenu{
		width:95%;
		height:40px;
		margin:0 auto;
		position:relative;
	}
	#tabMenu a{
		width:50%;
		height:40px;
		display:block;
		text-align:center;
		padding:8px 0 0 0;
		float:left;
		color:#000;
		background:#ccc;
	}
	a#tab01Btn.active,
	a#tab02Btn.active{

		background:#b31d41;
		color:#ccc;
	}
	#tabArea{
		width:95%;
		height:55vw;
		margin:0 auto;
		position:relative;
		display:block;
	}
	#tabArea iframe{
		width:100% !important;
		height:55vw !important;
		position:absolute;
		top:0;
		left:0;
	}
	#tab01,
	#tab02{
		display:none;
	}
	.trailer01 #tab01,
	.trailer02 #tab02{
		display:block;
	}
}

/* Banner Area 
----------------------------------------------------- */
@media screen and (max-width: 640px){
	#bannerArea{
		position:relative;
		margin:0 auto 2% auto;
		width:90%;
	}
	#bannerArea img{
		width:100%;
	}
	#bannerArea li{
		float:left;
		width:32%;
		margin-right:2%;
	}
	#bannerArea li:last-child{
		margin-right:0px;
	}
}
@media screen and (min-width: 981px){
	#bannerArea{
		width:140px;
		line-height:0;
	}
	#bannerArea img{
		width:140px;
		height:auto;
	}
	#bannerArea li{
		margin-bottom:5px;
	}
}
@media screen and (min-width: 641px) and (max-width:980px) {
	#bannerArea{
		width:14vw;
		line-height:0;
	}
	#bannerArea img{
		width:100%;
		height:auto;
	}
	#bannerArea li{
		margin-bottom:5px;
		float:left;
	}
}

/* SNS LINK
----------------------------------------------------- */
#twiBtn{
		width:250px;
		height:55px;
	display:block;
	margin:0 auto;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	transition: 0.2s;
	opacity:1;
	margin:10px auto;
}
#twiBtn:hover{
	opacity:0.8;
}
#twiBtn img{ width:100%; }
@media screen and (max-width:980px)  {
	#twiBtn{
	}
	
}

@media screen and (max-width: 776px) and (min-width: 640px) {
	#twiBtn{
		width:200px;
		height:45px;
	}
}
@media screen and (max-width:640px)  {
	#twiBtn{
		width:154px;
		height:25px;
	}
	
}


/* SOCIAL BOOKMARK
----------------------------------------------------- */
#socialBookmark{
	}
	#socialBookmark li{
		float:left;
		overflow:hidden;
		height:25px;
	}
	#socialBookmark li#tw {
		width:75px;
        
		}
	#socialBookmark li#fb {
		width:115px;
		}
	#socialBookmark li#line {
		width:84px;
		}
	#socialBookmark li#eigacom {
		width:110px;
		}
@media screen and (min-width: 1201px)  {
	#socialBookmark{
		position:absolute;
		top:738px;
		left:0;
		right:0;
		width:1160px;
		margin:0 auto;
	}
}
@media screen and (min-width: 769px) and (max-width:1200px){
	#socialBookmark{
		position:absolute;
		top:61vw;
		left:2vw;
		right:auto;
		width:80%;
		margin:0 ;
	}
}
@media screen and (max-width: 768px)  {
	#socialBookmark{
		position:absolute;
		top:197vw;
		left:2vw;
	}
}



/* Twitter BOX
---------------------------------------------------- */
@media screen and (min-width: 641px)  {
#twitterBox{
	width:300px;
	height:420px;
	padding:10px 0px 10px 10px;
	background:#000;
	position:fixed;
	right:-303px;
	bottom:10vH;
	z-index: 5000 !important;
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	}
	#twitterBox.active{
		right:0px;
	}
	.scrollPlus #twitterBox{
		display:none;
	}
}
@media screen and (max-width: 640px)  {
	#twitterBox{
	width:100%;
	height:530px;
	background:#cbdcdc !important;
	padding:30px 10px;
	background:none;
	position:relative;
	right:0px;
	top:0;
	z-index: 5000 !important;
	-moz-box-shadow: none;
	-webkit-box-shadow:  none;
	box-shadow: none;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	}
}

#twiArea{
background-color:#000;
width:290px;
height:400px;
overflow:hidden;
}
#twiBox{
	width:290px;
	height:400px;
	margin-top:-2px;
}
#twitterBoxBtn{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	position:absolute;
	bottom:0px;
	width:48px;
	height:auto;
	left:-48px;
	cursor:pointer !important;
}

	#twitterBoxBtn:hover{
	filter: alpha(opacity=100);
	-moz-opacity:1;
	opacity:1;
	
}

@media screen and (max-width: 640px)  {
	#twitterBox h3{
		height:50px;
		width:320px;
		font-size:18px;
		font-family:Georgia, 'Times New Roman', Times, serif;
		line-height:1;
		margin:0 auto;
		padding-top:6px;
		letter-spacing: 1px;;
	}
	#twitterBox h3 img{
		width:25px;
		float:left;
		margin:-6px 8px 0 0 ;
	}
	#twiArea{
		background:#cbdcdc;
		width:320px;
		margin:0 auto;
	}
	#twiBox{ width: 100%;}
	#twitterBoxBtn{ display:none;
	}
	#twitterBox.active #twitterBoxBtn{
	filter: alpha(opacity=100);
		-moz-opacity:1;
		opacity:1;
	cursor:pointer;
	}
}