@charset "utf-8";


body{
	color:#fff;
	background:#000;
	background-size:cover;
}

*,a{
	color:#fff;
	transition:.3s;
}
a:hover,
a:hover span{
	transition:.3s;
	color:#be9650;
}

@media screen and (max-width: 1080px) {
body{
	background: #000 url(../../images/index/bg.png) top center no-repeat;
	background-size:cover;
}
}

.bg{
	display:block;
	width:100%;
	height:100%;
	min-width:100%;
	background: url(../../images/index/bg.png) top center no-repeat;
	background-size:cover;
	transition:0s;
}
@media screen and (max-width: 1080px) {
.bg{
	display:none;
}
}
/*----------------------------------------------------------
heaad
----------------------------------------------------------*/
#header{
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	padding:18px 0 0;
}
#logo{
	display:block;
	width:64px;
	height:64px;
	margin:0 auto;
	position:relative;
	z-index:10001;
}
	#logo a{
		display:block;
	}
		#logo a img{
			width:100%;
		}
		
@media screen and (min-width: 1081px) {
.mo #logo{
	transition-property: opacity;
	transition-duration: 0.2s;
	opacity:0;
}
	.mo.ml #logo{
		transition-property: opacity;
		transition-duration: 0.4s;
		transition-timing-function:ease-out;
		opacity:1;
	}		

}


/*search*/
#search{
	display:block;
	width:430px;
	position:absolute;
	right:0;
	top:0;
	transition:.3s;
	z-index:10001;
	text-align:right;
	padding:31px 25px 0;
}
	#search.open{
	}
	#search .btn_search{
		display:block;
		width:25px;
		height:25px;
		text-align:center;
		position:absolute;
		right:24px;
		top:44px;
		transition:.3s;
		z-index:10003;
	}
		#search.open .btn_search{
			right:365px;
		}
		#search .btn_search a:hover{
			opacity:.7;
			transition:.3s;
		}
	#search input[type="text"]{
		width:0px;
		position:relative;
		height:48px;
		line-height:48px;
		color:#fff;
		text-align:left;
		background-color:#262626;
		z-index:10002;
	}
		#search.open input[type="text"]{
			width:100%;
			padding-left:50px;
		}
	#search input[type="submit"]{
		display:none;
	}
	
	#search #i_search_autocomplete{
		display:block;
		width:380px;
		background-color:#4d4d4d;
		overflow:hidden;
		height:0;
		margin-left:auto;
	}
		#search input[type="text"]:focus + #i_search_autocomplete{
			padding:15px 0 15px;
			height:auto;
			min-height:160px;
		}
			#search #i_search_autocomplete li a{
				display:block;
				text-align:left;
				cursor:pointer;
				line-height:28px;
				padding:0 50px
			}
				#search #i_search_autocomplete li a:hover{
					background-color:#333;
				}
	#search .search_x{
		display:none;
	}
		#search.open .search_x{
			display:block;
			position:absolute;
			right:37px;
			top:44px;
			font-size:24px;
			line-height:1;
			cursor:pointer;
			color:#fff;
			background:none;
			z-index:10003;
		}
	
.bg_search{
	display:block;
	min-width:100%;
	min-height:100%;
	position:fixed;
	left:0;
	top:0;
	background:rgba(0,0,0,0.6);	
	opacity:0;
	z-index:-1;
	transition:.3s;
}
	.bg_search.open{
		opacity:1;
		z-index:1000;
		transition:.3s;
	}


@media screen and (min-width: 1081px) {
.mo #search{
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity:0;
 }
.mo.ml #search{
  transition-property: opacity;
  transition-duration: 0.2s;
  opacity:1;
 }	
}

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

#header{
	position:static;
	padding:12px 0 0;
}
#logo{
	width:32px;
	height:32px;
}

#search{
	width:70px;
}
#search.open{
	width:100%;
	position:absolute;
	top:40px;
}
	#search .btn_search{
		width:20px;
		height:20px;
		right:12px;
		top:18px;
	}
	#search .btn_search img{
		width:100%;
	}
	#search input[type="text"]{
		width:0px;
		position:relative;
		font-size:13px;
		line-height:24px;
		padding-top:6px;
		padding-bottom:6px;
		height:36px;
		color:#fff;
		text-align:left;
		background-color:#262626;
		z-index:10002;
	}
		#search.open input[type="text"]{
			width:100%;
		}
		#search .btn_search{
			transition:0s;
		}
		#search.open .btn_search{
			right:auto;
			left:36px;
			top:36px;
			transition:0s;
		}
	#search #i_search_autocomplete{
		width:100%;
	}

}


/*----------------------------------------------------------
main
----------------------------------------------------------*/
h2{
	display:block;
	width:100%;
	text-align:center;
	position:absolute;
	top:25.7%;
}
	h2 .en{
		display:block;
		height:26px;
		margin-bottom:22px;
	}
		h2 .en img{
			height:26px;
		}
	h2 .jp{
		display:block;
		text-align:center;
		font-size:16px;
		color:#808080
	}
	
@media screen and (min-width: 1081px) {
.mo h2{
  transition-property: opacity;
  transition-duration: 1s;
  opacity:0;
}
	.mo.ml h2{
		transition-property: opacity;
		transition-duration: 1.25s;
		transition-timing-function:ease-out;
		opacity:1;
	}
}
@media screen and (max-width: 1080px) {
h2{
	position:static;
	margin:30px 0;
}
h2 .en{
	margin-bottom:5px;
}
	h2 .en img{
		height:16px;
	}
h2 .jp{
	font-size:10px;
}
}

	

@media screen and (min-width: 1081px) {
	
.navi{
	position:absolute;
	width:1040px;
	top:47.1%;
	left:50%;
	margin-left:-520px;
	z-index:2;
}
.navi:after{
	content:"";
	clear:both;
	display:block;
}
.navi > *{
	display:block;
	float:left;
	vertical-align:top;
	padding:0 16px;
}

.navi a{
	display:block;
	width:228px;
	height:228px;
	border:none;
	border-radius:50%;
	overflow:hidden;
	position:relative;
	top:0;
}

.navi a p{
	display:none;
}


.navi #movie a{background:url(../../images/index/menu01.png) center center no-repeat; background-size:contain;}
.navi #anime a{background:url(../../images/index/menu02.png) center center no-repeat; background-size:contain;}
.navi #stage a{background:url(../../images/index/menu03.png) center center no-repeat; background-size:contain;}
.navi #company a{background:url(../../images/index/menu04.png) center center no-repeat; background-size:contain;}

.navi a:hover span{color:#fff;}
.navi #movie a:hover{background:url(../../images/index/menu01_hover.png) center center no-repeat; background-size:contain;}
.navi #anime a:hover{background:url(../../images/index/menu02_hover.png) center center no-repeat; background-size:contain;}
.navi #stage a:hover{background:url(../../images/index/menu03_hover.png) center center no-repeat; background-size:contain;}
.navi #company a:hover{background:url(../../images/index/menu04_hover.png) center center no-repeat; background-size:contain;}

.mo .navi li{
  position: relative;
  transition-property: top;
  transition-duration: 0.4s;
  transition-delay: 0.2s;
  top: 50px;
  opacity:0;
}
.mo.ml .navi li{
  position: relative;
  transition-property: top,opacity;
  transition-duration: 0.4s;
  transition-timing-function:ease-out;
  top: 0;
  opacity:1;
}



}



@media screen and (max-width: 1080px) {
.navi{
	display:block;
}
.navi li{
	padding:0 20px;
}
.navi li a{
	display:block;
	width:100%;
	padding:30px 10px 30px 50px;
	text-align:left;
	border-bottom:1px solid #808080;
	background:rgba(0,0,0,0.6);
	position:relative;
}
.navi > li:first-child a{
	border-top:1px solid #808080;
}
.navi li a:after{
	content:">";
	font-family: 'Raleway', sans-serif;
	display:block;
	font-weight:bold;
	position:absolute;
	font-size:16px;
	line-height:16px;
	top:50%;
	right:10px;
	margin-top:-8px;
}

.navi a p span.en{
	display:inline-block;
	height:20px;
	margin-right:10px;
	position:relative;
}
.navi a p span.en img{
	height:20px;
	vertical-align:middle;
}
.navi a p span.jp{
	font-size:12px;
	position:relative;
	top:2px;
	color:#808080;
}
.navi a:hover p span.jp{
	color:#997a1f;
}


.navi a:before{
	content:"";
	position:absolute;
	width:30px;
	height:30px;
	left:10px;
	top:50%;
	margin-top:-15px;
}
.navi #movie a:before{background:url(../../images/index/icon_movie_sp.png); background-size:100%;}
.navi #anime a:before{background:url(../../images/index/icon_anime_sp.png); background-size:100%;}
.navi #stage a:before{background:url(../../images/index/icon_stage_sp.png); background-size:100%;}
.navi #company a:before{background:url(../../images/index/icon_company_sp.png); background-size:100%;}
.navi #movie a:hover:before{background:url(../../images/index/icon_movie_sp_hover.png); background-size:100%;}
.navi #anime a:hover:before{background:url(../../images/index/icon_anime_sp_hover.png); background-size:100%;}
.navi #stage a:hover:before{background:url(../../images/index/icon_stage_sp_hover.png); background-size:100%;}
.navi #company a:hover:before{background:url(../../images/index/icon_company_sp_hover.png); background-size:100%;}



.navi a:hover .en img{opacity:0; transition:.3s;}
.navi a .en:before{content:""; display:block; height:20px; width:100%; position:absolute; left:0; top:3px; transition:.3s; opacity:0;}
.navi a:hover .en:before{transition:.3s; opacity:1;}
.navi #movie a .en:before{background:url(../../images/index/sp_movie_hover.png) center left no-repeat; background-size:100%;}
.navi #anime a .en:before{background:url(../../images/index/sp_anime_hover.png) center left no-repeat; background-size:100%;}
.navi #stage a .en:before{background:url(../../images/index/sp_stage_hover.png) center left no-repeat; background-size:100%;}
.navi #company a .en:before{background:url(../../images/index/sp_company_hover.png) center left no-repeat; background-size:100%;}


}
/*----------------------------------------------------------
footer
----------------------------------------------------------*/
#footer{
	display:block;
	width:100%;
	position:fixed;
	left:0;
	bottom:0;
	text-align:center;
	font-size:12px;
	padding:10px 25px 20px;
	background:rgba(0,0,0,0.4);
	box-shadow:0 -5px 10px 5px rgba(0,0,0,0.4);
}
#footer #copyright img{
	height:12px;
}



@media screen and (min-width: 1081px) {
#footer ul{
	display:inline-block;
	padding-left:25px;
	position:absolute;
	left:0;
}

#footer ul > li{
	display:inline-block;
}
#footer ul > li:before{
	content:"|";
	display:inline-block;
	color:#808080;
	font-size:16px;
	line-height:16px;
	padding:0 5px 0 0;
}
#footer ul > li:first-child:before{
	content:"";
	padding:0;
}

#footer ul > li a{
	display:inline-block;
	font-size:10px;
	line-height:16px;
}
}
@media screen and (max-width: 1080px) {
#footer{
	position:static;
	padding:10px 10px 20px;
}
#footer ul{
	display:block;
	width:100%;
	max-width:400px;
	padding:15px 0;
	margin:0 auto;
}
#footer ul:after{
	content:"";
	clear:both;
	display:block;
}

#footer ul li{
	display:inline-block;
}
#footer ul li a{
	display:block;
	font-size:10px;
	padding:2px 5px;
}


#footer ul > li:nth-child(3){
	border-left:1px solid #808080;
	border-right:1px solid #808080;
	padding:0 5px;
}
#footer #copyright{
	font-size:12px;
}
}

.go_top{
	display:block;
	width:52px;
	height:52px;
	border:1px solid #404040;
	position:fixed;
	right:20px;
	bottom:80px;
	overflow:hidden;
	background-color:#000;
	text-indent:-9999px;
}
	.go_top:before{
		content:"";
		border:6px solid transparent;
		border-bottom-color:#fff;
		position:absolute;
		top:16px;
		left:20px;
	}
	.go_top:after{
		content:"";
		border:6px solid transparent;
		border-bottom-color:#000;
		position:absolute;
		top:17px;
		left:20px;
	}
	.go_top:hover{
		opacity:.7;
	}
@media screen and (max-width: 1080px) {
.go_top{
	display:none;
}
}

#video_box{
    display: none;
}



@media screen and (min-width: 1081px) {
.mo #video_box{
    display: block;
    position: absolute;
    top: 27%;
    left: 50%;
	width:40%;
	height:auto;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	overflow:hidden;
	opacity:1;
	z-index:1;
}

#video_box .video_inner{
	position: relative;
	height: 100%;
	overflow:hidden;
}

#video_box .video_inner video{
    display: block;
	width: 100% !important;
/*	position:absolute;
	left:0;
top:0;*/
}
.mo.ml #video_box{
	transition-property:opacity;
	transition-duration: 0.5s;
	transition-timing-function:ease-out;
	opacity:0;
}

.mo .dk{
	display:block;
	width:100%;
	height:100%;
	position:fixed;
	background:#000;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function:ease-out;
	opacity:1;
	top:0;
	left:0;
	z-index:5;
}

.mo.ml .dk{
	transition-property: opacity;
	transition-duration: 1s;
	opacity:0;
}
}

@media screen and (max-width: 1080px) {
.dk,
#video_box{
	display:none !important;
}
.sp_none{
	display:none !important;
}
}
	
@media screen and (min-width: 1081px) {
.mo .dk,
.mo.ml .dk{
	transition-delay: 0s;
}	
.mo.ml #video_box{
	transition-delay: 1s;
}
.mo #logo,
.mo.ml #logo{
	transition-delay: 1.5s;
}		

.mo h2,
.mo.ml h2{
	transition-delay: 1.8s;
}
.mo.ml .navi #movie{
	transition-delay:2.5s;
}
.mo.ml .navi #anime{
	transition-delay:2.7s;
}
.mo.ml .navi #stage{
	transition-delay:2.9s;
}
.mo.ml .navi #company{
	transition-delay:3.1s;
}
.mo #search,
.mo.ml #search{
	transition-delay: 4s;
}	
}