@charset"utf-8";

/*=======================================
 common
----------------------------------------- */
*{
	background-color:transparent;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
	-webkit-text-size-adjust:100%;
}
body {
	font-family: Hiragino Kaku Gothic ProN;
	color:#FFF;
	background:#000;
}
pre,code,kbd,samp,tt {
	font-family:monospace;
}
footer,header,nav,h2,h3 {
	display: block;
}
h2,h3 {
	font-size:0; line-height:0;
}
a{
	text-decoration:none;
	outline: none;
}
div {
	font-size:0;
}

#woff-wrapper-sp {
	width:100%;
	background-image:url(../images/common/bg.jpg);
	background-repeat:repeat-y;
	background-size:100% auto;
	background-color:#f0f2f5;
}
#woff-wrapper-sp img {
	width:100%;
	vertical-align:bottom;
}
#woff-wrapper-sp .line {
	width:100%; height:0;
	padding-top:0.3125%;
	font-size:0;
	background-image:url(../images/common/line.jpg);
	background-repeat:no-repeat;
	background-size:100% auto;
}
#woff-wrapper-sp .line30 {
	width:100%; height:0;
	padding-top:9.6875%;
	font-size:0;
	background-image:url(../images/common/line30.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}
#woff-wrapper-sp .space20 {
	width:100%; height:0;
	padding-top:3.125%;
}
#woff-wrapper-sp .space30 {
	width:100%; height:0;
	padding-top:4.6875%;
}
#woff-wrapper-sp .space40 {
	width:100%; height:0;
	padding-top:6.25%;
}

/*=======================================
 nav
----------------------------------------- */
nav ul {
	width:100%;
	background-image:url(../images/common/menu_bg.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
	font-size:0px;
}
nav ul:after {
	display: block;
	clear: both;
	content: "";
}
nav li {
	width:20%;
	float:left;
}
nav li img {
	width:100%;
}
.woff-page-story .n1 {
	background-image:url(../images/common/menu_in_story.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}
.woff-page-world .n2 {
	background-image:url(../images/common/menu_in_world.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}
.woff-page-character .n3 {
	background-image:url(../images/common/menu_in_chara.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}
.woff-page-mirage .n4 {
	background-image:url(../images/common/menu_in_mirage.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}
.woff-page-system .n5 {
	background-image:url(../images/common/menu_in_system.gif);
	background-repeat:no-repeat;
	background-size:100% auto;
}

/*=======================================
 footer
----------------------------------------- */
.woff-twitter {
	width:100%; height:0;
	/* padding-top:17.1875%; */
	padding-top:15%;
	position:relative;
	background-image:url(../images/common/foot_bnr_bg.jpg);
	background-position:center top;
	background-size:100% auto;
}
.woff-twitter img {
	width:62.5% !important;
	position:absolute; left:18.75%; top:0;
}
.woff-vita {
	width:100%; height:0;
	/* padding-top:17.1875%; */
	padding-top:15%;
	position:relative;
	background:#dce0e7;
}
.woff-vita img {
	width:62.5% !important;
	position:absolute; left:18.75%; top:0;
}
.woff-orochi {
	width:100%; height:0;
	padding-top:17.1875%;
	position:relative;
	background:#dce0e7;
}
.woff-orochi img {
	/* width:47.8125% !important; */
	width:62.5% !important;
	/* position:absolute; left:26.09375%; top:0; */
	position:absolute; left:18.75%; top:0;
}
.woff-manual {
	width:100%; height:0;
	padding-top:15.625%;
	position:relative;
	background:#dce0e7;
}
.woff-manual .btn1 {
	width:43.125% !important;
	position:absolute; left:5%; top:0;	
}
.woff-manual .btn2 {
	width:43.125% !important;
	position:absolute; right:5%; top:0;	
}
.woff-bnr1 {
	width:100%; height:0;
	/* padding-top:17.1875%; */
	padding-top:15%;
	position:relative;
	background:#dce0e7;
}
.woff-bnr1 img {
	width:62.5% !important;
	position:absolute; left:18.75%; top:0;
}
.woff-bnr2 {
	width:100%; height:0;
	padding-top:17.1875%;
	position:relative;
	background:#dce0e7;
}
.woff-bnr2 img {
	width:62.5% !important;
	position:absolute; left:18.75%; top:0;
}
.woff-jumptop {
	width:100%;
	background:#dce0e7;
}
.woff-jumptop div {
	width:12.5%;
	margin:0 auto;
}

/*=======================================

/* Colorbox Core Style: */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* User Style: */
#cboxOverlay{background:#000; opacity: 0.8; filter: alpha(opacity = 80);}
#colorbox{outline:0;}
#cboxClose {
	width:100%; max-width:640px; height:29px;
	position:absolute; left:0; bottom:-29px;
	background-image:url(../images/zoom_close.gif);
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	text-indent:-9999px;
	border-style:none;
	display:block;
}