@charset "utf-8";
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 100;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 200;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 300;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: 400;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}
::selection {
	background: #000;
	color: #fff;
}
::-moz-selection {
 background: #000;
 color:#fff;
}
* { outline: none; }
body {
	font-family: "Yu Gothic", YuGothic, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #000;
	background-color: #fff;
}
a { color: #000; }
a:hover { text-decoration: none; }
.sp { display: none; }
#fullWrap {
	width: 100%;
	height: 100%;
	min-height: 620px;
	min-width: 1200px;
	position: absolute;
}
header {
	background: rgba(0,0,0,1);
	position: absolute;
	width: 200px;
	left: 0px;
	top: 0px;
	bottom: 0px;
}
header h1 {
	height: 36px;
	width: 162px;
	margin-top: -18px;
	margin-left: -81px;
	position: absolute;
	z-index: 9999;
	left: 50%;
	top: 50%;
	background: url(../images/logo.png);
}

#menuOnImage {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: calc(50% + 40px);
	background-size: auto;
	overflow: hidden;
}
header nav {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 41px;
}
header nav h2 {
	background: url(../images/menu_h2.png) no-repeat 20px top;
	height: 20px;
}
header nav li {
	height: 33px;
	position: relative;
}

header nav li a {
	height: 33px;
	background-position: 20px center;
	background-repeat: no-repeat;
	display: block;
	position: relative;
	
}
header nav li a:before {
	content:'';
	position:absolute;
	pointer-events:none;
	left:0;
	top:0;
	bottom:0;
	width:0;
	background-color:#FFF;
	background-position:20px center;
	background-repeat:no-repeat;
	transition:all 0.6s ease;

}
#nav1 a { background-image: url(../images/nav1.png); }
#nav2 a { background-image: url(../images/nav2.png); }
#nav3 a { background-image: url(../images/nav3.png); }
#nav4 a { background-image: url(../images/nav4.png); }
#nav1 a:before {
	background-image: url(../images/nav1_k.png);
}
#nav2 a:before {
	background-image: url(../images/nav2_k.png);
}
#nav3 a:before {
	background-image: url(../images/nav3_k.png);
}
#nav4 a:before {
	background-image: url(../images/nav4_k.png);
}
header nav li a:hover:before {
	width:100%;
	transition:all 0.3s ease;
}
#mm {
	height: 74px;
	position: relative;
}
#mm a {
	height: 74px;
	display: block;
	background-position: 20px 11px, 21px 37px;
	background-image: url(../images/nav5.png), url(../images/nav5s.png);
	background-repeat: no-repeat;
	position: relative;
	z-index:2;
}
#mm:before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 55px;
	background-color: rgba(34,34,34,1);
}
#mm:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 55px;
	background-color: rgba(99,99,99,1);
	transition:all 0.6s ease;
	pointer-events:none;
}
#mm.hover:after {
	width:100%;
	transition:all 0.3s ease;
}
#menuOnImage.n1 {
	background:url(../images/menu_game.jpg) no-repeat center top / cover;
}
#menuOnImage.n2 {
	background:url(../images/menu_anime.jpg) no-repeat center center / cover;
}
#menuOnImage.n3 {
	background:url(../images/menu_comic.jpg) no-repeat center top / cover;
}
#menuOnImage.n4 {
	background:url(../images/menu_novel.jpg) no-repeat center top / cover;
}
@keyframes storm {
	0%,100% {
		transform:translate(0,0);
	}
	25% {
		transform:translate(5px,3px);
	}
	50% {
		transform:translate(-5px,-2px);
	}
	75% {
		transform:translate(3px,-5px);
	}
}
/*#menuOnImage span {
	position: absolute;
	left: -10px;
	top: -10px;
	right: -10px;
	bottom: -10px;
	background: url(../images/storm.png);
	display: block;
	animation:storm 0.1s infinite steps(2);
}*/
#copyright {
	font-size: 10px;
	line-height: 36px;
	color: #6e6e6e;
	position: absolute;
	height: 36px;
	left: 0px;
	right: 0px;
	bottom: 5px;
	text-align: center;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
}
#newsTopics {
	background: #222;
	height: 36px;
	padding-right: 15px;
	padding-left: 60px;
	position: absolute;
	left: 200px;
	right: 110px;
	top: 0px;
}
#newsTopics h2 {
	background: url(../images/topics_h2.png) no-repeat 14px center;
	height: 36px;
	width: 60px;
	position: absolute;
	left: 0px;
	top: 0px;
	bottom: 0px;
}
#newsTopics ul {
	overflow:hidden;
	height:36px;
	width:100%;
}
#newsTopics li {
	height: 36px;
	float: left;
	width: 100%;
}
#newsTopics li a {
	line-height: 36px;
	color: rgba(255,255,255,1);
	display: block;
	height: 36px;
	padding-right: 15px;
	box-sizing:border-box;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
	font-weight:500;
}
#share {
	height: 60px;
	width: 110px;
	position: absolute;
	right: 0px;
	background: rgba(0,0,0,1);
	top: 0px;
}
#share li {
	float: left;
	height: 60px;
	width: 60px;
}
#share li:nth-child(2){
	margin-left:-5px;
}
#share li:nth-child(1){
	margin-right:-5px;
}
#share li a {
	display:block;
	height:60px;
	position:relative;
	background-position:center center;
	background-repeat:no-repeat;
}
#share li a:before {
	content:'';
	position:absolute;
	left:10px;
	top:10px;
	opacity:0;
	box-sizing:border-box;
	border-top:1px solid #FFF;
	border-left:1px solid #FFF;
	width:0;
	height:0;
	transition:all 0.6s ease;
}
#share li a:after {
	content:'';
	position:absolute;
	right:10px;
	bottom:10px;
	opacity:0;
	box-sizing:border-box;
	border-bottom:1px solid #FFF;
	border-right:1px solid #FFF;
	width:0;
	height:0;
	transition:all 0.6s ease;
}
#share li a:hover:before,
#share li a:hover:after {
	width:20px;
	height:20px;
	opacity:1;
	transition:all 0.3s ease;
}
#tw a {
	background-image:url(../images/icon_twitter.png);
}
#fb a {
	background-image:url(../images/icon_facebook.png);
}

#mv {
	position: absolute;
	left: 200px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
#mvbg {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-size:100% auto;
	background-image:url(../images/mv_bg_c.jpg),url(../images/mv_bg_g.jpg);

}
#mvbg:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-color:rgba(0,0,0,0.5);
	opacity:0;
	transition:all 0.3s ease;
}
#mvbg.bo {
	background-image:url(../images/mv_bg_g.jpg);
}
#mvbg.bo:before {
	opacity:1;
}
.mvbginOv,.mvbginCl {
	position: absolute;
	height: 50%;
	width: 50%;
}
#tlOv,
#tlCl {
	left: 0px;
	top: 0px;
}
#trOv,
#trCl {
	top: 0px;
	right: 0px;
}
#blOv,
#blCl {
	left: 0px;
	bottom: 0px;
}
#brOv,
#brCl {
	right: 0px;
	bottom: 0px;
}
#scene {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}
#scene li {
	display: block;
	position: absolute;
	z-index: 6;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}
#mvt {
	position: absolute;
	left: 0;
	right: 0;
	background-size: 100%;
	pointer-events: none;
	background: url(../images/mv.png) no-repeat center top / 100% auto;
}
.mvbginOv {
	background-size:200% auto;
	background-image:url(../images/mv_bg_c.jpg);
	opacity:0;
	transition:opacity 0.5s ease;
}
/*.mvbginOv:before {
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	top:0;
	background-color:rgba(0,0,0,0.5);
}*/
.mvbginOv.hover {
	opacity:1;
}
.mvbginOv.bo {
	opacity:0;
}
#tlOv,#blOv {
	background-position-x:left;
}
#trOv,#brOv {
	background-position-x:right;
}
.mvbginCl a {
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
}
#loading {
	background: rgba(0,0,0,1) url(../images/header_logo.png) no-repeat center center;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index:20000;
}
.name {
	display:block;
	position:absolute;
}
#tlOv .name {
	bottom:30px;
	left:30px;
}
#trOv .name {
	bottom:30px;
	right:30px;
}
#blOv .name {
	top:30px;
	left:30px;
}
#brOv .name {
	top:30px;
	right:30px;
}
#mv h1 {
	background: url(../images/revisions_portal.png);
	position: absolute;
	height: 119px;
	width: 336px;
	left: 50px;
	bottom: 50px;
	z-index: 9999;
	pointer-events:none;
}