@charset "utf-8";

/* ================================================
 base
--------------------------------------------------- */
html {
	height: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}
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;
}
#main {
	position: relative;
	overflow: hidden;
}
#main:after {
	width: 100%; height: 1000px;
	position: absolute; left: 0; top: 0; z-index: -100;
	content: "";
	display: block;
	background-image: url(../images/common/bg.jpg);
	background-position: center 0;
	background-repeat: no-repeat;
}
#wrap-overlay {
	width: 100%; height: 100%; z-index: 10000;
	position: fixed; left: 0; top: 0;
	background-color: #000;
}
#loading {
	width: 100%; height: 100%;
	position: fixed; left: 0; top: 0; z-index: 10001;
	background-image: url(../images/loader.gif);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 128px 96px;
	display: none;
}
.tb #loading {
	background-size: 240px 180px;
}
#content .line {
	width: 100%; height: 61px;
	background-image: url(../images/common/line.png);
	background-position: center top;
	background-repeat: no-repeat;
	font-size: 0;
}
#content .line2 {
	width: 100%; height: 61px;
	background-image: url(../images/common/line2.png);
	background-position: center top;
	background-repeat: no-repeat;
	font-size: 0;
}
#container {
	position: relative;
}

/*=================================================
 header
--------------------------------------------------- */
#header {
	width: 100%; height: 116px;
	position: relative;
	background-color: #000;
	background-image: url(../images/common/head_bg.jpg);
	background-position: center top;
	background-repeat: no-repeat;
}
#header {
	width: 100%; height: 116px;
	position: relative;
}
#header h1 {
	width: 184px;
}
#header .symbol {
	width:124px; height: 123px;
	position: absolute; left: 50%; top: -123px; z-index: 9003;/*top: -38px;*/
	margin-left: -62px;
	display: block;
}
#header .title1 {
	width:160px; height: 30px;
	position: absolute; left: 50%; top: 25px; z-index: 9001;
	margin-left: -80px;/*margin-left: -160px;*/
	display: block;
}
#header .title2 {
	width:160px; height: 30px;
	position: absolute; left: 50%; top: 25px; z-index: 9002;
	margin-left: -80px;/*margin-left: 0;*/
	display: block;
}
#header .symbol img,
#header .title1 img,
#header .title2 img {
	display: none;
}
#header .symbol img {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
#header.change .symbol img {
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: -webkit-transform 0.5s linear;
	-moz-transition: -moz-transform 0.5s linear;
	-o-transition: -o-transform 0.5s linear;
	-ms-transition: -ms-transform 0.5s linear; 
	transition: transform 0.5s linear; 
}
#header.change .title1 img,
#header.change .title2 img {
	-webkit-animation: titleAanime 0.6s ease;
	-moz-animation: titleAanime 0.6s ease;
	-ms-animation: titleAanime 0.6s ease;
	animation: titleAanime 0.6s ease;
}
@-webkit-keyframes titleAanime {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-moz-keyframes titleAanime {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@-ms-keyframes titleAanime {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes titleAanime {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 1;}
}
#header .line {
	width: 100%; min-width: 1180px; height: 6px;
	position: absolute; left: 0; bottom: -6px; z-index: 1;
	background: url(../images/common/head_shadow.png);
	font-size: 0;
}
#header .pickup {
	width: 340px; height: 80px;
	position: absolute; right: 88px; top: 0;
}
#header .pickup a{
	width: 340px; height: 80px;
	display: block;
	background-repeat: no-repeat;
}
#header .pickup a:hover {
	background-position: left bottom;
}

#header .pickup_single {
	width: 340px; height: 80px;
	position: absolute; right: 88px; top: 0;
}
#header .pickup_single a{
	width: 340px; height: 80px;
	display: block;
	background: url(../images/pickup/maab-cs.png);
	background-repeat: no-repeat;
}
#header .pickup_single a:hover {
	background-position: left bottom;
}

/* #nav
------------------------- */
#nav {
	width: 100%; height: 36px;
	background-image: url(../images/common/head_line.gif);
}
#nav .nav-main {
	width: 1180px;; height: 36px;
	margin: 0 auto; padding: 0;
}
#nav .nav-main>li {
	width: 140px; height: 36px;
	margin: 0; padding: 0;
	float: left;
	background-position: left bottom;
	position: relative;
}
#nav .nav-main>li:nth-child(5),
#nav .nav-main>li:nth-child(6),
#nav .nav-main>li:nth-child(7) {
	width: 160px;
}
#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/about.gif);}
#nav .nav-main>li:nth-child(3)>a{ background-image: url(../images/common/menu/story.gif);}
#nav .nav-main>li:nth-child(4)>a{ background-image: url(../images/common/menu/system.gif);}
#nav .nav-main>li:nth-child(5)>a{ background-image: url(../images/common/menu/chara.gif);}
#nav .nav-main>li:nth-child(6)>a{ background-image: url(../images/common/menu/guide.gif);}
#nav .nav-main>li:nth-child(7)>a{ background-image: url(../images/common/menu/info_new.gif);}
#nav .nav-main>li:nth-child(8)>a{ background-image: url(../images/common/menu/special.gif);}

.maab-top         #nav .nav-main>li:nth-child(1)>a,
.maab-about       #nav .nav-main>li:nth-child(2)>a,
.maab-story       #nav .nav-main>li:nth-child(3)>a,
.maab-system      #nav .nav-main>li:nth-child(4)>a,
.maab-character   #nav .nav-main>li:nth-child(5)>a,
.maab-guide       #nav .nav-main>li:nth-child(6)>a,
.maab-information #nav .nav-main>li:nth-child(7)>a,
.maab-special     #nav .nav-main>li:nth-child(8)>a { background-position: 0 -72px;}
/*
#nav .nav-main>li:nth-child(6) { background-image: url(../images/common/menu/guide.gif);}
#nav .nav-main>li:nth-child(8) { background-image: url(../images/common/menu/special.gif);}
*/
#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.png);}
#nav .nav-sub li:nth-child(2) a {background-image: url(../images/common/menu/chara_spt.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 :84px; height: 26px;
	position: absolute; right: 0; top: 0;
	cursor: pointer;
	background-image: url(../images/common/bgm/off.gif);
}
#bgm.on {
	opacity: 1;
	background-image: url(../images/common/bgm/act.gif);
}
#bgm.pause {
	opacity: 1;
	background-image: url(../images/common/bgm/off.gif);
}
#bgm:hover {
	opacity: 1;
	background-position: left bottom;
}
#bgm.on:hover,
#bgm.pause:hover{
	background-position: left bottom;
}

/*=================================================
 footer
--------------------------------------------------- */
#footer {
	position: relative;
	background-color: #000;
	background-image: url(../images/common/foot_bg.jpg);
	background-position: center 30px;
	background-repeat: no-repeat;
	z-index: 10000;
}
#jumptop {
	height: 30px;
	background-image: url(../images/common/foot_line.gif);
}
#jumptop a {
	width: 64px; height: 30px;
	margin: 0 auto;
	display: block;
	background-image: url(../images/common/foot_jumptop.gif)
}
#jumptop a:hover {
	background-position: left bottom;
}
.tb #jumptop a:hover {
	background-position: left top;
}
#footer .spec {
	padding-bottom: 10px;
	text-align: center;
}
#footer .line {
	width: 100%; min-width: 1180px; height: 6px;
	position: absolute; left: 0; top: -6px;
	background: url(../images/common/foot_shadow.png);
	font-size: 0;
}

/* .sns
------------------------- */
#footer .sns {
	width: 120px;
	position: absolute; right: 10px; top: 44px;
	font-size: 0;
}
#footer .sns li {
	width: 32px; height: 32px;
	padding: 0 4px;
	display: inline-block; vertical-align: top;
}
#footer .sns li a {
	display: block;
}
#footer .sns li a:hover {
	background-position: left bottom;
}
#footer .sns li:nth-child(1) a { background-image: url(../images/common/sns/facebook.png);}
#footer .sns li:nth-child(2) a { background-image: url(../images/common/sns/twitter.png);}
#footer .sns li:nth-child(3) a { background-image: url(../images/common/sns/line.png);}

/* .bnr
------------------------- */
#footer .bnr,
#footer .bnr2  {
	width: 890px;
	margin: 0 auto; padding: 8px 0;
	text-align: center;
	font-size: 0;
}
#footer .bnr {
	padding-top: 0;
}
#footer .bnr li,
#footer .bnr2 li {
	/*padding: 10px 6px 0 6px;*/
	padding: 20px 6px 0 6px;
	display: inline-block; vertical-align: top;
}
#footer .bnr li a,
#footer .bnr2 li a{
	display: block;
}
#maabplayers      {background-image: url(../images/bnr/maabplayers_M.png); background-size: cover;}
#maab-cs          {background-image: url(../images/bnr/maab-cs_M.png); background-size: cover;}
#maportal           {background-image: url(../images/bnr/maportal.png); background-size: cover;}
#twitter_montandesu {background-image: url(../images/bnr/twitter_montandesu2.png); background-size: cover;}
#goziline			{background-image: url(../images/bnr/goziline.png); background-size: cover;}

#maabplayers:hover,
#maab-cs:hover,
#maportal:hover,
#twitter_montandesu:hover,
#goziline:hover {
	background-position: left bottom;
}

/* 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 div{
	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;
}
#winbox-close {
	width: 55px; height: 55px;
	position: absolute; right: 0; top: -55px;
	cursor: pointer;
	opacity: 0.7;
	background-image: url(../images/common/zoom_close.gif);
}
#winbox-close:hover {
	opacity: 1;
}