body {
  background: #fff;
  margin: 0;
  padding: 0;
}

fieldset {
  border: none;
}

h1, h2, h3, h4, h5, h6, p, li, dt, dd, pre,
blockquote, ul, ol, dl, dd, form {
  margin: 0;
  padding: 0;
  font-size: 13px;
}

h1, h2, h3, h4, h5, h6, li, dt, dd, pre,
blockquote, ul, ol, dl, dd, form {
  line-height: 100%;
}

p {
  line-height: 150%;
}

br {
  letter-spacing: 0;
}

a {
  color: #0070bc;
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
}

img {
  margin: 0;
  padding: 0;
  vertical-align: top;
  border: none;
}

li img {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  font-weight: normal;
  text-align: left;
  padding: 0;
  margin: 0;
  line-height: 100%;
}

ul {
  list-style: none;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

address {
  font-style: normal;
}

html {
  background-color: #fff;
}

body {
  background-color: #fff;
  color: #000;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/*-------------------------------------------------------------------------------------------------------
 * CLEARFIX
 */
.clearfix, #header #navi_main, .page_story .s3, .page_story .s4, .page_story_solo #navi_story .s3, .page_story_solo #navi_story .s4, #character_solo, .cfx {
  *zoom: 1;
}
.clearfix:after, #header #navi_main:after, .page_story .s3:after, .page_story .s4:after, .page_story_solo #navi_story .s3:after, .page_story_solo #navi_story .s4:after, #character_solo:after, .cfx:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/*-------------------------------------------------------------------------------------------------------
 * LAYOUT
 */
.wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

/*-------------------------------------------------------------------------------------------------------
 * SPACER
 */
.inner {
  padding: 10px;
}

.spb {
  margin-bottom: 10px;
}

.spb2 {
  margin-bottom: 20px;
}

/*-------------------------------------------------------------------------------------------------------
 * FLOAT
 */
.fl_l {
  float: left;
}

.fl_r {
  float: right;
}

#main {
  position: relative;
  width: 100%;
  height: 850px;
  margin: 0 auto;
}

#mask {
  z-index: 1800;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0;
  background: #fff;
}

.mask_on {
  height: 100%;
}

#content {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/*-------------------------------------------------------------------------------------------------------
 * HEADER
 */
#header {
  position: relative;
  width: 970px;
  height: 65px;
  margin: 0 auto;
  z-index: 2000;
  background-image: url("../images/header/bg_navi_main.png");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
#header #navi_main {
  position: absolute;
  top: 0;
  left: 5px;
  width: 900px;
  height: 59px;
}
#header #navi_main dd {
  height: 59px;
  float: left;
  text-indent: -9999px;
  background-position: top;
}
#header #navi_main dd a {
  display: block;
  height: 59px;
}
#header #navi_main .active {
  background-position: bottom;
}
#header #navi_main .n1 {
  width: 90px;
  background-image: url(../images/header/bg_navi_main_1.png);
}
#header #navi_main .n2 {
  width: 120px;
  background-image: url(../images/header/bg_navi_main_2.png);
}
#header #navi_main .n3 {
  width: 150px;
  background-image: url(../images/header/bg_navi_main_3.png);
}
#header #navi_main .n4 {
  width: 120px;
  background-image: url(../images/header/bg_navi_main_4.png);
}
#header #navi_main .n5 {
  width: 150px;
  background-image: url(../images/header/bg_navi_main_5.png);
}
#header #navi_main .n6 {
  width: 180px;
  background-image: url(../images/header/bg_navi_main_6.png);
}
#header #navi_main .n7 {
  width: 90px;
  background-image: url(../images/header/bg_navi_main_7.png);
}
#header #navi_bgm {
  position: absolute;
  right: 10px;
  top: 35px;
  width: 50px;
  height: 15px;
}
#header #navi_bgm li {
  width: 25px;
  height: 15px;
  float: left;
  background-position: top;
  cursor: pointer;
}
#header #navi_bgm .active {
  background-position: bottom;
  cursor: auto;
}
#header #navi_bgm .bgm_on {
  background-image: url(../images/header/btn_bgm_on.gif);
}
#header #navi_bgm .bgm_off {
  background-image: url(../images/header/btn_bgm_off.gif);
}
#header #icon_bgm {
  position: absolute;
  right: 25px;
  top: 13px;
  width: 19px;
  height: 15px;
}
#header #icon_bgm span {
  width: 19px;
  height: 15px;
  display: block;
  background-position: top;
  background-image: url(../images/header/icon_bgm.png);
}
#header #icon_bgm .active {
  background-position: bottom;
}

#jqueryBgm {
  height: 0px;
}

/*-------------------------------------------------------------------------------------------------------
 * TOP
 */
.page_top {
  background-image: url("../images/top/bg_top.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
  height: 950px;
}
.page_top .wrapper {
  position: relative;
}
.page_top #logo {
  text-align: center;
  padding-top: 230px;
}
.page_top .free {
  position: absolute;
  left: 86px;
  top: 532px;
}
.page_top .music {
  position: absolute;
  left: 715px;
  top: 460px;
}
.page_top .free_jp {
  position: absolute;
  left: 96px;
  top: 435px;
}
.page_top .movie_jp {
  position: absolute;
  left: 67px;
  top: 575px;
}
.page_top .movie_en {
  position: absolute;
  left: 715px;
  top: 540px;
}

/*-------------------------------------------------------------------------------------------------------
 * INTRODUCTION
 */
.page_introduction #content .wrapper {
  height: 890px;
  background-image: url("../images/introduction/bg_introduction.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
.page_introduction #txt {
  text-align: center;
  padding-top: 184px;
}
.page_introduction #txt_en {
  text-align: center;
  padding-top: 205px;
}

/*-------------------------------------------------------------------------------------------------------
 * ABOUT
 */
.page_about #content .wrapper {
  height: 1060px;
  width: 800px;
}

/*-------------------------------------------------------------------------------------------------------
 * STORY
 */
.page_story #content .wrapper {
  margin-top: 65px;
  height: 1450px;
  background-image: url("../images/story/bg_story.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
.page_story .s1, .page_story .s2, .page_story .s3, .page_story .s4, .page_story .s5, .page_story .st1, .page_story .st2, .page_story .st3, .page_story .st1_en, .page_story .st2_en, .page_story .st3_en {
  position: absolute;
}
.page_story .s1 {
  top: 95px;
  left: 250px;
}
.page_story .s2 {
  top: 356px;
  left: 250px;
}
.page_story .s3 {
  top: 635px;
  left: 20px;
}
.page_story .s4 {
  top: 936px;
  left: 20px;
}
.page_story .s5 {
  top: 1216px;
  left: 250px;
}
.page_story .s3 dd, .page_story .s4 dd {
  float: left;
  margin: 0 5px;
}
.page_story .st1 {
  top: 54px;
  left: 425px;
}
.page_story .st2 {
  top: 315px;
  left: 385px;
}
.page_story .st3 {
  top: 1177px;
  left: 385px;
}
.page_story .st1_en {
  top: 54px;
  left: 410px;
}
.page_story .st2_en {
  top: 315px;
  left: 395px;
}
.page_story .st3_en {
  top: 1177px;
  left: 402px;
}
.page_story .btn_story {
  cursor: pointer;
}

.page_story_solo #content .wrapper {
  height: 750px;
}
.page_story_solo #story_solo_content {
  height: 750px;
  width: 960px;
}
.page_story_solo #story_solo_content .story_solo_mask {
  height: 750px;
  width: 960px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
.page_story_solo #story_solo_content .mask_loading_on {
  background-image: url("../images/story/icon_loading.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
}
.page_story_solo #story_solo_content .illust {
  position: absolute;
  right: 0px;
  top: 0;
}
.page_story_solo #story_solo_content .txt {
  position: absolute;
  left: 20px;
  top: 150px;
}
.page_story_solo #story_solo_content .images {
  position: absolute;
  left: 20px;
  top: 450px;
  width: 470px;
  height: 140px;
}
.page_story_solo #story_solo_content .images div {
  background-image: url("../images/story/bg_story_solo_img.png");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
  float: left;
  width: 222px;
  height: 140px;
  margin-right: 10px;
}
.page_story_solo #story_solo_content .images dl {
  margin: 6px 0 0 6px;
  width: 210px;
  height: 140px;
  overflow: hidden;
  position: relative;
}
.page_story_solo #story_solo_content .images dd {
  position: absolute;
  top: 140px;
}
.page_story_solo #story_solo_content .images dd.active {
  top: 0px;
}
.page_story_solo #btn_story_back {
  position: absolute;
  top: 80px;
  left: 19px;
  z-index: 1110;
}
.page_story_solo #navi_story {
  width: 960px;
  height: 81px;
  position: absolute;
  z-index: 1100;
  background-image: url("../images/story/bg_navibottom.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
  bottom: 0;
  left: 0;
}
.page_story_solo #navi_story .wrap_posi {
  position: relative;
}
.page_story_solo #navi_story .s1, .page_story_solo #navi_story .s2, .page_story_solo #navi_story .s3, .page_story_solo #navi_story .s4, .page_story_solo #navi_story .s5 {
  position: absolute;
  top: 10px;
}
.page_story_solo #navi_story .s1 {
  left: 79px;
}
.page_story_solo #navi_story .s2 {
  left: 169px;
}
.page_story_solo #navi_story .s3 {
  left: 260px;
}
.page_story_solo #navi_story .s4 {
  left: 545px;
}
.page_story_solo #navi_story .s5 {
  left: 829px;
}
.page_story_solo #navi_story .s3 dd, .page_story_solo #navi_story .s4 dd {
  float: left;
  margin: 0 3px 0 0;
}

/*-------------------------------------------------------------------------------------------------------
 * CHARACTER
 */
.page_character #content .wrapper {
  margin-top: 90px;
  height: 1300px;
}
.page_character #ch_cont1 {
  width: 960px;
  height: 358px;
  position: relative;
  background-image: url("../images/character/bg_character_index_1.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
.page_character #ch_cont2 {
  width: 960px;
  height: 440px;
  position: relative;
  background-image: url("../images/character/bg_character_index_2.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
.page_character #ch_cont3 {
  width: 960px;
  height: 500px;
  position: relative;
  background-image: url("../images/character/bg_character_index_3.jpg");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
.page_character .btn_character {
  position: absolute;
  width: 140px;
  height: 152px;
}
.page_character .btn_character a {
  position: relative;
  width: 140px;
  height: 152px;
  display: block;
}
.page_character .btn_character a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  background: #fff;
  display: block;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
}
.page_character .btn_character a img {
  position: absolute;
  top: 120px;
  left: 14px;
}
.page_character .ch1 {
  top: 20px;
  left: 90px;
}
.page_character .ch2 {
  top: 20px;
  left: 250px;
}
.page_character .ch3 {
  top: 190px;
  left: 90px;
}
.page_character .ch4 {
  top: 190px;
  left: 250px;
}
.page_character .ch5 {
  top: 20px;
  left: 570px;
}
.page_character .ch6 {
  top: 20px;
  left: 730px;
}
.page_character .ch7 {
  top: 190px;
  left: 570px;
}
.page_character .ch8 {
  top: 190px;
  left: 730px;
}
.page_character .ch9 {
  top: 92px;
  left: 10px;
}
.page_character .ch10 {
  top: 92px;
  left: 170px;
}
.page_character .ch11 {
  top: 92px;
  left: 330px;
}
.page_character .ch12 {
  top: 92px;
  left: 490px;
}
.page_character .ch13 {
  top: 92px;
  left: 650px;
}
.page_character .ch14 {
  top: 92px;
  left: 810px;
}
.page_character .ch15 {
  top: 262px;
  left: 90px;
}
.page_character .ch16 {
  top: 262px;
  left: 250px;
}
.page_character .ch17 {
  top: 262px;
  left: 410px;
}
.page_character .ch18 {
  top: 262px;
  left: 570px;
}
.page_character .ch19 {
  top: 262px;
  left: 730px;
}
.page_character .ch20 {
  top: 90px;
  left: 90px;
}
.page_character .ch21 {
  top: 90px;
  left: 250px;
}
.page_character .ch22 {
  top: 90px;
  left: 410px;
}
.page_character .ch23 {
  top: 90px;
  left: 570px;
}
.page_character .ch24 {
  top: 90px;
  left: 730px;
}
.page_character .ch25 {
  top: 260px;
  left: 90px;
}
.page_character .ch26 {
  top: 260px;
  left: 250px;
}
.page_character .ch27 {
  top: 260px;
  left: 410px;
}
.page_character .ch28 {
  top: 260px;
  left: 570px;
}
.page_character .ch29 {
  top: 260px;
  left: 730px;
}

#character_solo {
  width: 880px;
  height: 600px;
  padding: 20px;
  /*
  width: 860px;
  height: 600px;
  */
  background: #ffffff;
  position: relative;
}
#character_solo #txt {
  float: left;
  padding-top: 70px;
  padding-left: 40px;
}
#character_solo #bg {
  float: right;
}
#character_solo #images {
  position: absolute;
  left: 60px;
  top: 310px;
  width: 384px;
  height: 236px;
  background-image: url("../images/character/bg_character_images.gif");
  background-repeat: no-repeat;
  background-position: top;
  background-color: none;
}
#character_solo #images dl {
  margin: 6px 0 0 7px;
  float: left;
  width: 370px;
  height: 222px;
  overflow: hidden;
  position: relative;
  margin-right: 10px;
}
#character_solo #images dd {
  position: absolute;
  top: 222px;
}
#character_solo #images dd.active {
  top: 0px;
}

/*-------------------------------------------------------------------------------------------------------
 * JOB CHANGE
 */
.job_change #content .wrapper {
  height: 1370px;
  width: 960px;
}

/*-------------------------------------------------------------------------------------------------------
 * JOB
 */
.page_job #content .wrapper {
  margin-top: 110px;
  height: 1980px;
}
.page_job #content .wrapper dd {
  float: left;
  width: 220px;
  height: 305px;
  margin: 0 10px 20px 10px;
  background-repeat: no-repeat;
  background-position: top;
  cursor: pointer;
}
.page_job #content .wrapper dd p {
  background-repeat: no-repeat;
  background-position: top;
  width: 90px;
  height: 50px;
  margin: 50px auto 0 auto;
  text-indent: -9999px;
}
.page_job #content .wrapper dd .active {
  background-position: bottom;
}
.page_job #content .wrapper .v_en dd {
  height: 315px !important;
  margin-bottom: 15px;
}
.page_job #content .wrapper .j1 {
  background-image: url(../images/job/job_bg_suppin.gif);
}
.page_job #content .wrapper .j1 p {
  background-image: url(../images/job/job_suppin.gif);
  *background-image: url(../images/job/job_suppin_off.gif);
  width: 179px;
  height: 115px;
  margin-top: 72px;
}
.page_job #content .wrapper .j1 p.active {
  *background-image: url(../images/job/job_suppin.gif);
}
.page_job #content .wrapper .j2 {
  background-image: url(../images/job/job_bg_senshi.gif);
}
.page_job #content .wrapper .j2 p {
  background-image: url(../images/job/job_senshi.gif);
  *background-image: url(../images/job/job_senshi_off.gif);
}
.page_job #content .wrapper .j2 p.active {
  *background-image: url(../images/job/job_senshi.gif);
}
.page_job #content .wrapper .j3 {
  background-image: url(../images/job/job_bg_monk.gif);
}
.page_job #content .wrapper .j3 p {
  background-image: url(../images/job/job_monk.gif);
  *background-image: url(../images/job/job_monk_off.gif);
}
.page_job #content .wrapper .j3 p.active {
  background-image: url(../images/job/job_monk.gif);
}
.page_job #content .wrapper .j4 {
  background-image: url(../images/job/job_bg_shief.gif);
}
.page_job #content .wrapper .j4 p {
  background-image: url(../images/job/job_shief.gif);
  *background-image: url(../images/job/job_shief_off.gif);
}
.page_job #content .wrapper .j4 p.active {
  background-image: url(../images/job/job_shief.gif);
}
.page_job #content .wrapper .j5 {
  background-image: url(../images/job/job_bg_shiromado.gif);
}
.page_job #content .wrapper .j5 p {
  background-image: url(../images/job/job_shiromado.gif);
  *background-image: url(../images/job/job_shiromado_off.gif);
}
.page_job #content .wrapper .j5 p.active {
  background-image: url(../images/job/job_shiromado.gif);
}
.page_job #content .wrapper .j6 {
  background-image: url(../images/job/job_bg_kuromado.gif);
}
.page_job #content .wrapper .j6 p {
  background-image: url(../images/job/job_kuromado.gif);
  *background-image: url(../images/job/job_kuromado_off.gif);
}
.page_job #content .wrapper .j6 p.active {
  background-image: url(../images/job/job_kuromado.gif);
}
.page_job #content .wrapper .j7 {
  background-image: url(../images/job/job_bg_shokan.gif);
}
.page_job #content .wrapper .j7 p {
  background-image: url(../images/job/job_shokan.gif);
  *background-image: url(../images/job/job_shokan_off.gif);
}
.page_job #content .wrapper .j7 p.active {
  background-image: url(../images/job/job_shokan.gif);
}
.page_job #content .wrapper .j8 {
  background-image: url(../images/job/job_bg_akamado.gif);
}
.page_job #content .wrapper .j8 p {
  background-image: url(../images/job/job_akamado.gif);
  *background-image: url(../images/job/job_akamado_off.gif);
}
.page_job #content .wrapper .j8 p.active {
  background-image: url(../images/job/job_akamado.gif);
}
.page_job #content .wrapper .j9 {
  background-image: url(../images/job/job_bg_ryukishi.gif);
}
.page_job #content .wrapper .j9 p {
  background-image: url(../images/job/job_ryukishi.gif);
  *background-image: url(../images/job/job_ryukishi_off.gif);
}
.page_job #content .wrapper .j9 p.active {
  background-image: url(../images/job/job_ryukishi.gif);
}
.page_job #content .wrapper .j10 {
  background-image: url(../images/job/job_bg_ranger.gif);
}
.page_job #content .wrapper .j10 p {
  background-image: url(../images/job/job_ranger.gif);
  *background-image: url(../images/job/job_ranger_off.gif);
}
.page_job #content .wrapper .j10 p.active {
  background-image: url(../images/job/job_ranger.gif);
}
.page_job #content .wrapper .j11 {
  background-image: url(../images/job/job_bg_ginyu.gif);
}
.page_job #content .wrapper .j11 p {
  background-image: url(../images/job/job_ginyu.gif);
  *background-image: url(../images/job/job_ginyu_off.gif);
}
.page_job #content .wrapper .j11 p.active {
  background-image: url(../images/job/job_ginyu.gif);
}
.page_job #content .wrapper .j12 {
  background-image: url(../images/job/job_bg_ankoku.gif);
}
.page_job #content .wrapper .j12 p {
  background-image: url(../images/job/job_ankokukishi.gif);
  *background-image: url(../images/job/job_ankokukishi_off.gif);
}
.page_job #content .wrapper .j12 p.active {
  background-image: url(../images/job/job_ankokukishi.gif);
}
.page_job #content .wrapper .j13 {
  background-image: url(../images/job/job_bg_memolist.gif);
}
.page_job #content .wrapper .j13 p {
  background-image: url(../images/job/job_memolist.gif);
  *background-image: url(../images/job/job_memolist_off.gif);
}
.page_job #content .wrapper .j13 p.active {
  background-image: url(../images/job/job_memolist.gif);
}
.page_job #content .wrapper .j14 {
  background-image: url(../images/job/job_bg_odoriko.gif);
}
.page_job #content .wrapper .j14 p {
  background-image: url(../images/job/job_odoriko.gif);
  *background-image: url(../images/job/job_odoriko_off.gif);
}
.page_job #content .wrapper .j14 p.active {
  background-image: url(../images/job/job_odoriko.gif);
}
.page_job #content .wrapper .j15 {
  background-image: url(../images/job/job_bg_knight.gif);
}
.page_job #content .wrapper .j15 p {
  background-image: url(../images/job/job_knight.gif);
  *background-image: url(../images/job/job_knight_off.gif);
}
.page_job #content .wrapper .j15 p.active {
  background-image: url(../images/job/job_knight.gif);
}
.page_job #content .wrapper .j16 {
  background-image: url(../images/job/job_bg_ninja.gif);
}
.page_job #content .wrapper .j16 p {
  background-image: url(../images/job/job_ninja.gif);
  *background-image: url(../images/job/job_ninja_off.gif);
}
.page_job #content .wrapper .j16 p.active {
  background-image: url(../images/job/job_ninja.gif);
}
.page_job #content .wrapper .j17 {
  background-image: url(../images/job/job_bg_doushi.gif);
}
.page_job #content .wrapper .j17 p {
  background-image: url(../images/job/job_doushi.gif);
  *background-image: url(../images/job/job_doushi_off.gif);
}
.page_job #content .wrapper .j17 p.active {
  background-image: url(../images/job/job_doushi.gif);
}
.page_job #content .wrapper .j18 {
  background-image: url(../images/job/job_bg_majin.gif);
}
.page_job #content .wrapper .j18 p {
  background-image: url(../images/job/job_majin.gif);
  *background-image: url(../images/job/job_majin_off.gif);
}
.page_job #content .wrapper .j18 p.active {
  background-image: url(../images/job/job_majin.gif);
}

/*-------------------------------------------------------------------------------------------------------
 * FOOTER
 */
#footer {
  width: 100%;
  height: 90px;
  padding-top: 20px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  z-index: 1900;
  background-image: url("../images/footer/bg_footer.png");
  background-repeat: repeat-x;
  background-position: top;
  background-color: none;
}
#footer .wrapper {
  position: relative;
}
#footer .banner {
  width: 460px;
  height: 80px;
  position: relative;
  margin: 0 auto;
}
#footer .banner .app {
  position: absolute;
  top: 13px;
  left: 0;
}
#footer .banner .aniv {
  position: absolute;
  top: 10px;
  left: 260px;
}
#footer .banner_jp {
  width: 540px;
  height: 80px;
  position: relative;
  margin: 0 auto;
}
#footer .banner_jp .app {
  position: absolute;
  top: 13px;
  left: 0;
}
#footer .banner_jp .aniv {
  position: absolute;
  top: 10px;
  left: 260px;
}
#footer .banner_jp .market {
  position: absolute;
  right: 0;
  top: 13px;
}
#footer .information {
  width: 780px;
  margin: 0 auto;
  text-align: center;
}

/*-------------------------------------------------------------------------------------------------------
 * MASK
 */
#loading_bar {
  width: 5px;
  height: 2px;
  background: #ff0000;
  display: block;
  position: relative;
  overflow: hidden;
}
#loading_bar img {
  position: absolute;
  top: 0;
  left: 0;
}

#loading_wrap {
  width: 620px;
  height: 2px;
  margin: 300px auto 0 auto;
  background: #EFEFEF;
}