@charset "UTF-8";
/* =========================================================
　◆Base Style
========================================================= */
html { font-size: 62.5%; }

body { background: #000; line-height: 1.7; font-size: 13px; font-size: 1.3rem; }

#Wrap { position: relative; overflow: hidden; background: url(../images/main_bg.gif) center top repeat-y; z-index: 1; }

#Wrap img { vertical-align: top; display: block; }

/* clear */
.clear { clear: both !important; }

/* clearfix */
.cFix:after { content: ""; clear: both; display: block; }

/* =========================================================
　◆Link Style
========================================================= */
body { min-width: 1000px; }

a:link, a:visited, a:active { color: #666666; text-decoration: none; }
a:hover { color: #e62e8b; text-decoration: underline; }

img.rollover2 { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) !important; opacity: 1.0 !important; }

input [type=image]:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body.index .gnav_btn_home, body.index #Gnav ul .gnav_btn_home a, #Gnav ul .gnav_btn_home body.index a { background-position: left bottom; }

body.characters .gnav_btn_characters, body.characters #Gnav ul .gnav_btn_characters a, #Gnav ul .gnav_btn_characters body.characters a { background-position: left bottom; }

/* =========================================================
　◆Head
========================================================= */
#Head { background-color: rgba(4, 20, 60, 0.6); position: absolute; width: 100%; left: 0; top: 0; z-index: 20; }
#Head > .inner { width: 1000px; margin: 0 auto; position: relative; }

/* =========================================================
　◆Gnav
========================================================= */
#Gnav { width: 661px; float: left; }
#Gnav ul li { float: left; }
#Gnav ul li a { text-indent: -9999px; display: block; overflow: hidden; }
#Gnav ul li a:hover, #Gnav ul li a.btn_current { background-position: left bottom; }
#Gnav ul li span { text-indent: -9999px; display: block; overflow: hidden; }
#Gnav ul .gnav_btn_home, #Gnav ul .gnav_btn_home a { width: 62px; height: 63px; }
#Gnav ul .gnav_btn_home a { background: url(../images/gnav_01.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_world, #Gnav ul .gnav_btn_world a { width: 92px; height: 63px; }
#Gnav ul .gnav_btn_world a { background: url(../images/gnav_02.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_characters, #Gnav ul .gnav_btn_characters a { width: 152px; height: 63px; }
#Gnav ul .gnav_btn_characters a { background: url(../images/gnav_03.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_battle, #Gnav ul .gnav_btn_battle a { width: 96px; height: 63px; }
#Gnav ul .gnav_btn_battle a { background: url(../images/gnav_04.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_system, #Gnav ul .gnav_btn_system a, #Gnav ul .gnav_btn_system span { width: 98px; height: 63px; }
#Gnav ul .gnav_btn_system a, #Gnav ul .gnav_btn_system span { background: url(../images/gnav_05.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_spec, #Gnav ul .gnav_btn_spec a { width: 65px; height: 63px; }
#Gnav ul .gnav_btn_spec a { background: url(../images/gnav_06.png) 0 0 no-repeat; }
#Gnav ul .gnav_btn_special, #Gnav ul .gnav_btn_special a { width: 96px; height: 63px; }
#Gnav ul .gnav_btn_special a { background: url(../images/gnav_07.png) 0 0 no-repeat; }

/* =========================================================
　◆Bgm_module
========================================================= */
#Bgm_module { width: 256px; height: 37px; float: right; position: relative; background: url(../images/bgm_bg.png) 0 0 no-repeat; margin: 13px 6px 0 0; }
#Bgm_module #Bgm_status { width: 77px; height: 48px; position: absolute; left: -4px; top: -4px; text-indent: -9999px; cursor: pointer; overflow: hidden; background: url(../images/bgm_status_off.png) 0 0 no-repeat; }
#Bgm_module #Bgm_status.on { background: url(../images/bgm_status_on.png) 0 0 no-repeat; }
#Bgm_module #Bgm_status:hover { background-position: left bottom; }
#Bgm_module #Bgm_title ul li { width: 120px; height: 36px; position: absolute; left: 70px; top: 0px; text-indent: -9999px; overflow: hidden; }
#Bgm_module #Bgm_title ul li:nth-child(1) { background: url(../images/bgm_title_01.png) 0 0 no-repeat; }
#Bgm_module #Bgm_title ul li:nth-child(2) { background: url(../images/bgm_title_02.png) 0 0 no-repeat; display: none; }
#Bgm_module #Bgm_title ul li:nth-child(3) { background: url(../images/bgm_title_03.png) 0 0 no-repeat; display: none; }
#Bgm_module #Bgm_title ul li:nth-child(4) { background: url(../images/bgm_title_04.png) 0 0 no-repeat; display: none; }
#Bgm_module .bgm_select a { display: block; text-indent: -9999px; overflow: hidden; position: absolute; }
#Bgm_module .bgm_select #Bgm_prev { width: 41px; height: 45px; background: url(../images/bgm_prev.png) 0 0 no-repeat; right: 36px; top: -4px; }
#Bgm_module .bgm_select #Bgm_next { width: 40px; height: 45px; background: url(../images/bgm_next.png) 0 0 no-repeat; right: 3px; top: -4px; }
#Bgm_module .bgm_select a:hover { background-position: left bottom; }

/* =========================================================
　◆Motion_bg
========================================================= */
#Motion_bg { position: absolute; top: 0; left: 50%; width: 1920px; height: 100%; margin-left: -960px; }
#Motion_bg #Base_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bace_bg.jpg) center top no-repeat; }
#Motion_bg #Base_bg #Index_bg { display: none; }
#Motion_bg #Base_bg #Star_01 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star01.png) center top repeat; display: none; }
#Motion_bg #Base_bg #Star_02 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star02.png) left top repeat; display: none; }
#Motion_bg #Base_bg #Star_03 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star03.png) right top repeat; display: none; }
#Motion_bg #Base_bg #Star_04 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star04.png) center top repeat; display: none; }
#Motion_bg #Base_bg #Star_05 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star05.png) right top repeat; display: none; }
#Motion_bg #Base_bg #Star_06 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/star06.png) left top repeat; display: none; }
#Motion_bg .type_top { background: url(../images/cloud-top.png) 0 0 repeat; width: 100%; height: 865px; position: absolute; visibility: hidden; left: 0; }
#Motion_bg .type_bottom { background: url(../images/cloud-bottom.png) 0 0 repeat; width: 100%; height: 570px; position: absolute; visibility: hidden; left: 0; }
#Motion_bg .type_index { background: url(../images/cloud-index.png) 0 0 repeat; width: 100%; height: 826px; position: absolute; visibility: hidden; left: 0; }
#Motion_bg.battle .type_top { visibility: visible; top: 151px; }
#Motion_bg.spec .type_top { visibility: visible; top: -57px; }
#Motion_bg.special .type_top { visibility: visible; top: -145px; }
#Motion_bg.world .type_top { visibility: visible; top: -259px; }
#Motion_bg.character .type_bottom { visibility: visible; bottom: 151px; }
#Motion_bg.top #Base_bg #Index_bg { position: absolute; top: 0; left: 0; width: 100%; height: 811px; background: url(../images/bace_index.jpg) center top no-repeat; }
#Motion_bg.top .type_index { visibility: visible; top: 0; }

/* =========================================================
　◆Cont
========================================================= */
#Cont { opacity: 1; }
#Cont .cont_slide_item { min-height: 600px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; position: relative; }
#Cont .cont_slide_item .cont_bg { width: 100%; position: absolute; bottom: 0; left: 0; height: 100%; }
#Cont .cont_slide_item .cont_slide_item_inner { width: 100%; height: 100%; position: relative; }

/* =========================================================
　◆Load
========================================================= */
#Loading { width: 100%; position: fixed; left: 0; top: 50%; }
#Loading .loading_inner { margin: -36px auto 0; width: 72px; }

/* =========================================================
　◆Share_btns
========================================================= */
#Cat_tit { width: 231px; height: 44px; position: absolute; right: 92px; top: 65px; z-index: 20; background: url(../images/page_title.png) 0 0 no-repeat; text-indent: -9999px; overflow: hidden; }
#Cat_tit.sitetop { background-position: 0 0; }
#Cat_tit.page_world { background-position: 0 -44px; }
#Cat_tit.page_characters { background-position: 0 -88px; }
#Cat_tit.page_battle { background-position: 0 -132px; }
#Cat_tit.page_system { background-position: 0 -176px; }
#Cat_tit.page_spec { background-position: 0 -220px; }
#Cat_tit.page_special { background-position: 0 -264px; }

#Share_btns { width: 81px; position: absolute; right: 7px; top: 70px; z-index: 20; }
#Share_btns li { width: 35px; float: left; }
#Share_btns li:last-child { float: right; }
#Share_btns li a { display: block; }

/* =========================================================
　◆Main
========================================================= */
#Main { position: relative; }
#Main h1.logo { position: absolute; left: 16px; top: 77px; z-index: 20; }
#Main > .inner { width: 1000px; margin: 0 auto; padding: 20px 0; background: #e5e5e5; }

/* =========================================================
　◆contents_slide
========================================================= */
.contents_slide_nav { width: 100%; height: 100%; clear: both; position: absolute; left: 0; top: 0; }
.contents_slide_nav .contents_prev_btn { position: fixed; left: 0; top: 50%; text-indent: -9999px; width: 32px; height: 96px; background: url(../images/contents_slide_nav.png) left top no-repeat; cursor: pointer; margin-top: -48px; z-index: 50; overflow: hidden; }
.contents_slide_nav .contents_prev_btn:hover { background-position: left bottom; }
.contents_slide_nav .contents_next_btn { position: fixed; right: 0; top: 50%; text-indent: -9999px; width: 32px; height: 96px; background: url(../images/contents_slide_nav.png) right top no-repeat; cursor: pointer; margin-top: -48px; z-index: 50; overflow: hidden; }
.contents_slide_nav .contents_next_btn:hover { background-position: right bottom; }

/* =========================================================
　◆contents_cover
========================================================= */
#Contents_cover_left { top: 0; left: 0; height: 100%; position: fixed; background: #000000; z-index: 1; }
#Contents_cover_left .end { width: 164px; height: 100%; background: url(../images/cover_left.png) left top repeat-y; position: absolute; top: 0; right: -164px; }

#Contents_cover_right { top: 0; right: 0; height: 100%; position: fixed; background: #000000; z-index: 1; }
#Contents_cover_right .end { width: 164px; height: 100%; background: url(../images/cover_right.png) left top repeat-y; position: absolute; top: 0; left: -164px; }

/* =========================================================
　◆Foot
========================================================= */
#Foot { clear: both; }
#Foot > .inner { padding: 20px 0; width: 1000px; margin: 0 auto; background: #dddddd; }
#Foot .copy { display: block; text-align: center; }

#sqexFooter { position: relative; z-index: 1; }

#Modal_ov { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(9, 19, 54, 0.8); z-index: 9999; display: none; }
#Modal_ov .m_body { position: relative; margin: 0 auto; }
#Modal_ov .m_body img { width: 100%; height: 100%; }
#Modal_ov .m_body .m_load { background: url(../images/loading.gif) no-repeat center center; width: 70px; height: 70px; position: fixed; top: 50%; left: 50%; margin-left: -36px; }
#Modal_ov .m_body .m_close { position: absolute; right: 0; width: 50px; height: 50px; position: absolute; top: -73px; background: url(../images/close_cbox.png) no-repeat 0 0; cursor: pointer; background-position: 0px 0px; right: 0; }
#Modal_ov .m_body .m_close:hover { background-position: left bottom; }