@charset "utf-8";

/* ================================================
 base
--------------------------------------------------- */
html {
	height: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	height: 100%;
	background-color: #000;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", arial, Meiryo, "メイリオ", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
}

h1,h2,h3,h4,h5,h6,ul,li,p {margin: 0; padding: 0;}
h2,h3 {text-align: center;}
img   {vertical-align: bottom;}
li    {list-style: none;}

#wrap {
	width: 100%; min-width: 1180px;
	position: relative;
	background-color: #001e66;
	background-image: url(../images/common/bg.gif);
	background-position: center 0;
	background-repeat: repeat-y;
}
#main {
	position: relative;
	overflow: hidden;
}
#container {
	position: relative;
}
#sqexFooter{
	position: relative; z-index: 100;
}
#wrap-overlay {
	width: 100%; height: 100%; z-index: 10000;
	position: fixed; left: 0; top: 0;
	background-color: #001e66;
}
#loading{
	width: 100%; height: 100%;
	position: fixed; left: 0; top: 0; z-index: 10001;
	display: none;
}
#loading div{
	width: 480px; height: 389px;
	margin: auto;
	position: absolute; left: 0; right: 0; top: 0; bottom: 0;
}
#loading div p:nth-child(1){
	width: 480px; height: 293px;
	background-image: url(../images/top/logo.png);
	background-position: center center;
	background-repeat: no-repeat;
}
#loading div p:nth-child(2){
	width: 480px; height: 96px;
	background-image: url(../images/loader.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 128px 96px;
}
.block{
	position: relative; z-index: 100;
}


/*=================================================
 header
--------------------------------------------------- */
#header {
	width: 100%; height: 116px;
	background-color: #001e66;
	background-image: url(../images/common/header/bg_center.gif);
	background-position: center top;
	background-repeat: no-repeat;
}
#header > div {
	width: 100%; height: 116px;
	position: relative; z-index: 100;
}
#header h1 {
	width: 152px;
	position: absolute; left: 0; top: 0;
}
#header .catch{
	width: 284px;
	padding-left: 106px;
}
#header .bnr{
	width: 280px; height: 62px;
	position: absolute; right: 120px; top: 8px;
	background-color: #fff;
}
#header .bnr a:hover{
	opacity: 0.85;
}

/* .mark
------------------------- */
#header .mark1{
	width: 160px; height: 78px;
	position: absolute; left: 50%; top: -78px;
	margin-left: -80px;
	background-image: url(../images/common/header/mark1.png);
	background-repeat: no-repeat;
}
#header .mark2{
	width: 170px; height: 30px;
	position: absolute; left: 50%; top: 24px;
	margin-left: -170px;
	opacity: 0;
}
#header .mark3{
	width: 170px; height: 30px;
	position: absolute; left: 50%; top: 24px;
	opacity: 0;
}
#header .mark2 img{
	position: absolute; left: -50px; top: 0;
}
#header .mark3 img{
	position: absolute; left: 50px; top: 0;
}

#header.change .mark1{
	-webkit-animation: mark1Anime 1s steps(33) 0s;
	animation: mark1Anime 1s steps(33) 0s;
}
@-webkit-keyframes mark1Anime{
	from{background-position: 0 0;}
	to  {background-position: 0 -2574px;}
}
@keyframes mark1Anime{
	from{background-position: 0 0;}
	to  {background-position: 0 -2574px;}
}

/* #nav
------------------------- */
#nav{
	width: 100%; height: 36px;
	padding: 1px 0;
	background-image: url(../images/common/header/bg_tile.gif);
	background-position: center bottom;
	background-repeat: repeat-x;
}
#nav .nav-main{
	width: 1179px; height: 36px;
	margin: 0 auto; padding: 0;
	border-left: #335c99 1px solid;
}
#nav .nav-main>li{
	width: 152px; height: 36px;
	margin: 0; padding: 0;
	position: relative;
	float: left;
	background-position: left bottom;
	border-right: #335c99 1px solid;
}
#nav .nav-main>li:nth-child(6){
	width: 152px;
	float: right;
	border-left: #335c99 1px solid;
}
#nav .nav-main>li>a{
	background-position: 0 0;
	display: block;
}
#nav .nav-main>li>a:hover{
	background-position: 0 -36px;
}

#nav .nav-main>li:nth-child(1)>a{background-image: url(../images/common/menu/top.gif);}
#nav .nav-main>li:nth-child(2)>a{background-image: url(../images/common/menu/story.gif);}
#nav .nav-main>li:nth-child(3)>a{background-image: url(../images/common/menu/system.gif);}
#nav .nav-main>li:nth-child(4)>a{background-image: url(../images/common/menu/chara.gif);}
#nav .nav-main>li:nth-child(5)>a{background-image: url(../images/common/menu/special.gif);}
#nav .nav-main>li:nth-child(6)>a{background-image: url(../images/common/menu/tvanime.gif);}

/* ---- new ---- */
/*ex.*/
/*#nav .nav-main>li:nth-child(5)>a{background-image: url(../images/common/menu/special_new.gif);}*/

/* ---- close ---- */
/*ex.*/
/*#nav .nav-main>li:nth-child(5) {
	background-image: url(../images/common/menu/special_new.gif);
	background-position: 0 -108px;
}*/

.hangyaku-top         #nav .nav-main>li:nth-child(1)>a,
.hangyaku-story       #nav .nav-main>li:nth-child(2)>a,
.hangyaku-system      #nav .nav-main>li:nth-child(3)>a,
.hangyaku-character   #nav .nav-main>li:nth-child(4)>a,
.hangyaku-special     #nav .nav-main>li:nth-child(5)>a {background-position: 0 -72px;}

/*ex.*/
/*#nav .nav-sub {
	width: 160px; height: 0;
	position: absolute; left: 0; top: 36px; z-index: 10;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.nav-character-open #nav .nav-sub {
	height: 102px;
}
#nav .nav-sub ul {width: 160px; height: 102px;}
#nav .nav-sub li a {display: block;}
#nav .nav-sub li:nth-child(1) a {background-image: url(../images/common/menu/chara_ply_new.png);}
#nav .nav-sub li:nth-child(2) a {background-image: url(../images/common/menu/chara_spt_new.png);}
#nav .nav-sub li:nth-child(3) a {background-image: url(../images/common/menu/chara_close.png);}
#nav .nav-sub li a:hover {background-position: left bottom;}*/

/* #bgm
------------------------- */
#bgm {
	width :80px; height: 16px;
	position: absolute; right: 16px; top: 50px;
	cursor: pointer;
	background-image: url(../images/common/bgm/btn.png);
}
#bgm p{
	width: 100%; height: 100%;
}
#bgm.on p{
	background-image: url(../images/common/bgm/btn_anime.gif);
}
#bgm:hover {
	background-position: left bottom;
}

/* #header-sns
------------------------- */
#header-sns{
	position: absolute; right: 16px; top: 16px;
	font-size: 0;
}
#header-sns li{
	width: 24px; height: 22px;
	margin-left: 8px;
	display: inline-block;
	list-style: none;
}
#header-sns li a{
	width: 100%; height: 100%;
	display: block;
}
#header-sns li a:hover{
	background-position: left bottom;
}
#header-sns li:nth-child(1) a{background-image: url(../images/common/sns/facebook.png);}
#header-sns li:nth-child(2) a{background-image: url(../images/common/sns/twitter.png);}
#header-sns li:nth-child(3) a{background-image: url(../images/common/sns/line.png);}

/*=================================================
 footer
--------------------------------------------------- */
#footer {
	background-image: url(../images/common/foot_bg_tile.png);
	background-position: center top;
	background-repeat: repeat-x;
}
#footer div{
	padding: 24px 0;
	position: relative; z-index: 100;
}
#footer .spec{
	padding-bottom: 20px;
	font-size: 13px; line-height: 1.5; color: #fff; text-align: center;
	text-shadow: 0 0 5px #0033b4, 0 0 8px #0033b4;
}
#footer .spec span{
	color: #8299cc;
}
#footer .app{
	width: 346px; height: 53px;
	margin: 0 auto; padding: 0 32px 24px 0;
	font-size: 0;
	position: relative;
}
#footer .app p:nth-child(1){float: left;}
#footer .app p:nth-child(2){float: right;}
#footer .app p a{
	opacity: 0.8;
}
#footer .app p a:hover{
	opacity: 1;
}


#footer .bnr{
	width: 100%;
	font-size: 0; text-align: center;
}
#footer .bnr li{
	margin: 0 6px;
	display: inline-block;
}
#jumptop {
	position: fixed; right: 20px; /*bottom: 186px;*/bottom: 250px; z-index: 100;
	display: none;
}
#jumptop a {
	width: 32px; height: 32px;
	display: block;
	overflow: hidden;
}
#jumptop a:hover img{
	transform: translateY(-32px);
}

/* .bnr
------------------------- */
#footer .bnr ul{
	width: 100%;
	padding-bottom: 30px;
	position: relative; z-index: 3000;
}
#footer .bnr ul{
	width: 100%;
	font-size: 0; text-align: center;
}
#footer .bnr li{
	width: 166px; height: 58px;
	margin: 0 6px;
	display: inline-block; vertical-align: top;
}
#footer .bnr li a{
	width: 166px; height: 58px;
	display: block;
	background-size: 100% auto;
}
#footer .bnr li a:hover{
	background-position: left -58px;
}
#footer .bnr li:nth-child(1) a{background-image: url(../images/bnr/maportal.png);}
#footer .bnr li:nth-child(2) a{background-image: url(../images/bnr/kairi2.png);}
#footer .bnr li:nth-child(3) a{background-image: url(../images/bnr/koukyou.png);}
#footer .bnr li:nth-child(4) a{background-image: url(../images/bnr/maab.png);}


/* Colorbox Core Style:
------------------------- */
#colorbox, #cboxWrapper{position:absolute; top:0; left:0; z-index:30001;}
#cboxOverlay{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* User Style: */
#cboxOverlay{background:#000; z-index:30000;}
#colorbox{outline:0;}
	#cboxError{padding:50px; border:1px solid #ccc;}
	#cboxClose {
		width:55px; height:55px;
		position:absolute; top:-55px; right:0px;
		display:block;
		border: 0;
		background:url(../images/common/zoom_close.gif) no-repeat top center;
		text-indent:-9999px;
		opacity: 0.7;
	}
	#cboxClose:hover {
		opacity: 1;
	}

/* winbox
------------------------- */
#winbox-overlay {
	width: 100%; height: 100%;
	position: fixed; left: 0; top: 0; z-index: 30000;
	display: none;
}
#winbox-overlay .inner{
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0.85;
}
#winbox-content {
	position: absolute; left: 0; top: 0; z-index: 30001;
	display: none;
}
#winbox-content img {
	width: 100%; height: auto; max-width: 100%;
}
#winbox-close {
	width: 64px; height: 64px;
	position: absolute; right: 0; top: 0;
	cursor: pointer;
	opacity: 0.7;
	background-image: url(../images/common/zoom_close.png);
}
#winbox-close:hover {
	opacity: 1;
}