@charset "utf-8";

/*=======================================
 common
----------------------------------------- */
*{-webkit-text-size-adjust:100%;}
body {
	color:#333366;
	font-family: Meiryo, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:#000;
}
img {vertical-align:bottom;}

a {
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	outline:none;
}
a:link, a:visited {color:#333366; text-decoration:none;}
a:hover, a:active {color:#505ab4; text-decoration:none;}

.mgt10 {margin-top:10px;}
.pdt10 {padding-top:10px;}
.mgt17 {margin-top:17px;}
.pdt17 {padding-top:17px;}
.mgt20 {margin-top:20px;}
.mgt20 {padding-top:20px;}
.mgt30 {margin-top:30px;}
.mgt30 {padding-top:30px;}
.mgt40 {margin-top:40px;}
.mgt40 {padding-top:40px;}
.mgB10 {margin-bottom:10px;}
.pdB10 {padding-bottom:10px;}
.mgB15 {margin-bottom:15px;}
.pdB15 {padding-bottom:15px;}
.mgB17 {margin-bottom:17px;}
.pdB17 {padding-bottom:17px;}
.mgB20 {margin-bottom:20px;}
.pdB20 {padding-bottom:20px;}
.mgB30 {margin-bottom:30px;}
.pdB30 {padding-bottom:30px;}
.mgB35 {margin-bottom:35px;}
.pdB35 {padding-bottom:35px;}
.mgB40 {margin-bottom:40px;}
.pdB40 {padding-bottom:40px;}
.mgB45 {margin-bottom:45px;}
.pdB45 {padding-bottom:45px;}
.mgB50 {margin-bottom:50px;}
.pdB50 {padding-bottom:50px;}
.mgB60 {margin-bottom:60px;}
.pdB60 {padding-bottom:60px;}

/* woff-wrapper */
.woff-page-top {
	background-color:#98a5b9;
	background-image:url(../images/common/bg.jpg);
	background-position:center top;
	background-repeat:repeat-y;
}
.woff-page-story {
	background-color:#98a5b9;
	background-image:url(../images/story/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-world {
	background-color:#98a5b9;
	background-image:url(../images/world/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-character {
	background-color:#98a5b9;
	background-image:url(../images/character/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-mirage {
	background-color:#98a5b9;
	background-image:url(../images/mirage/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-system {
	background-color:#98a5b9;
	background-image:url(../images/system/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-special {
	background-color:#98a5b9;
	background-image:url(../images/special/bg.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}
.woff-page-special2,
.woff-page-special3,
.woff-page-special4,
.woff-page-special5,
.woff-page-special6,
.woff-page-special_live,
.woff-page-special_trial,
.woff-page-special_guideline,
.woff-page-special_marukame,
.woff-page-special_psvita_voice,
.woff-page-special_dlc,
.woff-page-special_patch {
	background-color:#98a5b9;
	background-image:url(../images/special/bg2.jpg), url(../images/common/bg.jpg);
	background-position:center 110px, center top;
	background-repeat:no-repeat, repeat-y;
}

/*=======================================
 header
----------------------------------------- */
#woff-header {
	width:100%; min-width:980px; height:110px;
	background-color:#98a5b9;
	background-image:url(../images/common/head_bg_center.png), url(../images/common/head_bg_tile.png), url(../images/common/bg.jpg);
	background-repeat:no-repeat, repeat-x, repeat-y;
	background-position:center top, center top, center top;
	position:absolute; left:0; top:38px; z-index:999;
	display:none;
}
#woff-header h1 {
	width:402px; height:70px;
	float:left;
}

/* #woff-bgm
------------------------*/
#woff-bgm {
	width:214px; height:26px;
	float:right;
}
#woff-bgm li {
	float:left;
	cursor:pointer;
}
#woff-bgm .bgm0 {
	width:71px;
	background:url(../images/common/head_bgm.gif) 0 -52px;
}
#woff-bgm .bgm1 {
	width:72px;
	background:url(../images/common/head_bgm.gif) -71px 0;
}
#woff-bgm .bgm2 {
	width:71px;
	background:url(../images/common/head_bgm.gif) -143px 0;
}
#woff-bgm .bgm1:hover {background-position:-71px -26px;}
#woff-bgm .bgm2:hover {background-position:-143px -26px;}

.playbgm1 #woff-bgm .bgm0,
.playbgm2 #woff-bgm .bgm0{background-position:0 0px;}
.playbgm1 #woff-bgm .bgm1 {background-position:-71px -52px;}
.playbgm2 #woff-bgm .bgm2 {background-position:-143px -52px;}

.playbgm1 #woff-bgm .bgm0:hover,
.playbgm2 #woff-bgm .bgm0:hover {background-position:0 -26px;}
.playbgm1 #woff-bgm .bgm1:hover {background-position:-71px -52px;}
.playbgm2 #woff-bgm .bgm2:hover {background-position:-143px 52px;}

/* #woff-nav
------------------------*/
#woff-nav {
	clear:both;
}
#woff-nav ul {
	width:980px; height:40px;
	margin:0 auto;
	background:url(../images/common/head_bg_grad.gif);
}
#woff-nav li {
	width:140px; height:40px;
	float:left;
}
#woff-nav li a {
	width:140px; height:40px;
	display:block;
}
#woff-nav .nav3 {background:url(../images/common/menu.png) -280px -120px;}
#woff-nav .nav6 {background:url(../images/common/menu.png) -700px -120px;}

#woff-nav .nav1 a {background:url(../images/common/menu.png) 0 0;}
#woff-nav .nav2 a {background:url(../images/common/menu.png) -140px 0;}
#woff-nav .nav3 a {background:url(../images/common/menu.png) -280px 0;}
#woff-nav .nav4 a {background:url(../images/common/menu.png) -420px 0;}
#woff-nav .nav5 a {background:url(../images/common/menu.png) -560px 0;}
#woff-nav .nav6 a {background:url(../images/common/menu.png) -700px 0;}
#woff-nav .nav7 a {background:url(../images/common/menu.png) -840px 0;}

/* new */
.new-story     #woff-nav .nav2 a {background:url(../images/common/menu_new.png) -140px 0;}
.new-world     #woff-nav .nav3 a {background:url(../images/common/menu_new.png) -280px 0;}
.new-character #woff-nav .nav4 a {background:url(../images/common/menu_new.png) -420px 0;}
.new-mirage    #woff-nav .nav5 a {background:url(../images/common/menu_new.png) -560px 0;}
.new-system    #woff-nav .nav6 a {background:url(../images/common/menu_new.png) -700px 0;}
.new-special   #woff-nav .nav7 a {background:url(../images/common/menu_new.png) -840px 0;}

/* tablet */
.tb #woff-nav .nav1 a {background:url(../images/common/menu_tab.png) 0 0;}
.tb #woff-nav .nav2 a {background:url(../images/common/menu_tab.png) -140px 0;}
.tb #woff-nav .nav3 a {background:url(../images/common/menu_tab.png) -280px 0;}
.tb #woff-nav .nav4 a {background:url(../images/common/menu_tab.png) -420px 0;}
.tb #woff-nav .nav5 a {background:url(../images/common/menu_tab.png) -560px 0;}
.tb #woff-nav .nav6 a {background:url(../images/common/menu_tab.png) -700px 0;}
.tb #woff-nav .nav7 a {background:url(../images/common/menu_tab.png) -840px 0;}

/* tablet new */
.tb .new-story     #woff-nav .nav2 a {background:url(../images/common/menu_tab_new.png) -140px 0;}
.tb .new-world     #woff-nav .nav3 a {background:url(../images/common/menu_tab_new.png) -280px 0;}
.tb .new-character #woff-nav .nav4 a {background:url(../images/common/menu_tab_new.png) -420px 0;}
.tb .new-mirage    #woff-nav .nav5 a {background:url(../images/common/menu_tab_new.png) -560px 0;}
.tb .new-system    #woff-nav .nav6 a {background:url(../images/common/menu_tab_new.png) -700px 0;}
.tb .new-special   #woff-nav .nav7 a {background:url(../images/common/menu_tab_new.png) -840px 0;}

/* hover */
#woff-nav .nav1 a:hover {background-position: 0 -40px;}
#woff-nav .nav2 a:hover {background-position: -140px -40px;}
#woff-nav .nav3 a:hover {background-position: -280px -40px;}
#woff-nav .nav4 a:hover {background-position: -420px -40px;}
#woff-nav .nav5 a:hover {background-position: -560px -40px;}
#woff-nav .nav6 a:hover {background-position: -700px -40px;}
#woff-nav .nav7 a:hover {background-position: -840px -40px;}

.new-story     #woff-nav .nav2 a:hover {background-position: -140px -40px;}
.new-world     #woff-nav .nav3 a:hover {background-position: -280px -40px;}
.new-character #woff-nav .nav4 a:hover {background-position: -420px -40px;}
.new-mirage    #woff-nav .nav5 a:hover {background-position: -560px -40px;}
.new-system    #woff-nav .nav6 a:hover {background-position: -700px -40px;}
.new-special   #woff-nav .nav7 a:hover {background-position: -840px -40px;}

/* in */
.woff-page-top       #woff-nav .nav1 a {background-position: 0 -80px;}
.woff-page-story     #woff-nav .nav2 a {background-position: -140px -80px;}
.woff-page-world     #woff-nav .nav3 a {background-position: -280px -80px;}
.woff-page-character #woff-nav .nav4 a {background-position: -420px -80px;}
.woff-page-mirage    #woff-nav .nav5 a {background-position: -560px -80px;}
.woff-page-system    #woff-nav .nav6 a {background-position: -700px -80px;}
.woff-page-special   #woff-nav .nav7 a,
.woff-page-special2  #woff-nav .nav7 a,
.woff-page-special3  #woff-nav .nav7 a,
.woff-page-special4  #woff-nav .nav7 a,
.woff-page-special5  #woff-nav .nav7 a,
.woff-page-special6  #woff-nav .nav7 a,
.woff-page-special_live  #woff-nav .nav7 a,
.woff-page-special_trial  #woff-nav .nav7 a,
.woff-page-special_guideline  #woff-nav .nav7 a,
.woff-page-special_marukame  #woff-nav .nav7 a,
.woff-page-special_psvita_voice  #woff-nav .nav7 a,
.woff-page-special_dlc  #woff-nav .nav7 a,
.woff-page-special_patch  #woff-nav .nav7 a {background-position: -840px -80px;}

.woff-page-story     .new-story     #woff-nav .nav2 a {background-position: -140px -80px;}
.woff-page-world     .new-world     #woff-nav .nav3 a {background-position: -280px -80px;}
.woff-page-character .new-character #woff-nav .nav4 a {background-position: -420px -80px;}
.woff-page-mirage    .new-mirage    #woff-nav .nav5 a {background-position: -560px -80px;}
.woff-page-system    .new-system    #woff-nav .nav6 a {background-position: -700px -80px;}
.woff-page-special   .new-special   #woff-nav .nav7 a,
.woff-page-special2  .new-special   #woff-nav .nav7 a,
.woff-page-special3  .new-special   #woff-nav .nav7 a,
.woff-page-special4  .new-special   #woff-nav .nav7 a,
.woff-page-special5  .new-special   #woff-nav .nav7 a,
.woff-page-special6  .new-special   #woff-nav .nav7 a,
.woff-page-special_live  .new-special   #woff-nav .nav7 a,
.woff-page-special_trial  .new-special   #woff-nav .nav7 a,
.woff-page-special_guideline  .new-special   #woff-nav .nav7 a,
.woff-page-special_marukame  .new-special   #woff-nav .nav7 a,
.woff-page-special_psvita_voice  .new-special   #woff-nav .nav7 a,
.woff-page-special_dlc  .new-special   #woff-nav .nav7 a,
.woff-page-special_patch  .new-special   #woff-nav .nav7 a {background-position: -840px -80px;}

/*=======================================
 contents
----------------------------------------- */
#woff-contents {
	width:100%; min-width:980px;
	position:relative;
	overflow:hidden;
}
#woff-container {
	width:100%; min-width:980px;
}
#woff-name {
	height:110px;
}
.woff-page-top #woff-name {
	display:none;
}
#woff-overlay {
	width:100%;
	position:absolute; left:0; top:38px; z-index:990;
	display:none;
	background:#FFF;
}
#woff-contents h2,
#woff-contents h3,
#woff-contents h4 {
	text-align:center;
}
#woff-contents .line {
	width:980px; height:1px;
	margin:0 auto;
	font-size:0;
	background:url(../images/common/line.png) no-repeat;
}

/*=======================================
 fooer
----------------------------------------- */
#woff-footer {
	width:100%; min-width:980px; /*height:449px;*//*height:480px;*/height:496px;
	background-color:#98a5b9;
	background-image:url(../images/common/foot_bg_center.png), url(../images/common/foot_bg_tile.png), url(../images/common/bg.jpg);
	background-position:center top, left top, center top;
	background-repeat:no-repeat ,repeat-x ,repeat-y;
	position:relative;
}
#woff-footer .footer-block {
	display:none;
}
#woff-pagetop {
	width:980px; height:30px;
	margin:0 auto;
	background:url(../images/common/foot_bg_grad.gif);
}
#woff-pagetop div {
	width:50px; height:30px;
	float:right;
	overflow:hidden;
}
#woff-pagetop a {
	width:50px; height:30px;
	display:block;
}
#woff-pagetop a:hover {
	background:url(../images/common/foot_jumptop.gif) 0 -30px;
}
#woff-pagetop a:hover img {
	display:none;
}

#woff-footer .banner {
	width:980px;
	margin:0 auto;
	text-align:center;
	font-size:0;
}
#woff-footer .banner1 {
	padding-top:24px; height:62px;
	position:relative;
}
/* #woff-footer .woff-Vita {
	position:absolute; left:50%; top:24px;
	border:1px solid #f0f0f0;
	margin-left:-468px;
} */
#woff-footer .woff-twitter {
	position:absolute; left:50%; top:25px;
	/* margin-left:-150px; */
	/* margin-left:-308px; */
	margin-left:-304px;
}
#woff-footer .woff-orochi {
	position:absolute; left:50%; top:25px;
	/* margin-left:166px;*/
	/* margin-left:12px; */
	margin-left:5px;
}
#woff-footer .banner2 img,
#woff-footer .banner3 img {
	display:inline-block;
}
#woff-footer .banner2 {
	padding-top:19px;
}
#woff-footer .banner2 img {
	margin:0 4px 0 5px;
}
#woff-footer .banner3 {
	padding-top:10px;
}
#woff-footer .banner3 img {
	margin:0 4px 0 5px;
}
#woff-footer .banner4 {
	padding-top:25px;
}
#woff-footer .woff-Vita:hover,
#woff-footer .woff-orochi:hover,
#woff-footer .woff-twitter:hover,
#woff-footer .woff-manual-ps4:hover,
#woff-footer .woff-manual-vita:hover,
#woff-footer .woff-ost:hover,
#woff-footer .woff-strategy:hover,
#woff-footer .woff-static:hover {
	opacity:0.85;
}
/*#woff-footer .woff-spec:hover {
	opacity:0.75;
}*/

/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
#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;}
#colorbox, #cboxContent, #cboxLoadedContent{}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{/*margin-top:20px;background:#000;*/}
        .cboxIframe{/*background:#fff;background:#000000;*/}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{/*border:5px solid #000; background:#fff;background:#000000;*/}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc; display:none!important;}
        #cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
		
        #cboxPrevious{position:absolute;
		top:50%; left:-65px; margin-top:-60px;
		background:url(../images/zoom_prev.gif) no-repeat top left;
		width:65px; height:120px;
		text-indent:-9999px;}
        #cboxPrevious:hover{background-position:0 -120px;}
		
		#cboxPrevious.noprev,
		#cboxPrevious.noprev:hover{background-position:0 -240px;}
        
		#cboxNext{position:absolute;
		top:50%; right:-65px; margin-top:-60px;
		background:url(../images/zoom_next.gif) no-repeat top right;
		width:65px; height:120px;
		text-indent:-9999px;}
        #cboxNext:hover{background-position:0 -120px;}
		
		#cboxNext.nonext,
		#cboxNext.nonext:hover{background-position:0 -240px;}
		
        #cboxClose{position:absolute; /*top:5px; right:5px;*/top:0px; right:0px; display:block; background:url(../images/common/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}
		
		#cboxClose.slideclose {
			top:auto;
			bottom:-55px;
			right:0;
			background:url(../images/common/zoom_close.gif) 0 0 no-repeat;
			width:25px;
			height:55px;
		}