@charset "utf-8";

body:not(#top) .gloNav_bg {
  position: fixed;
  top: 0; right: 0; left: 0;
  width: 100%;
  max-width: 1267px;
  height: 179px;
  margin: 0 auto;
  z-index: 300;
}
body:not(#top) #gloNav {
  width: 100%;
  height: 180px;
  padding: 115px 0 0;
  background: url(../img/bg_second_glonav.png) 50% 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body:not(#top).loaded #gloNav {
  -webkit-animation: easeOutBounce 1.3s both 0.6s;
  animation: easeOutBounce 1.3s both 0.6s;
}
body:not(#top).loaded #gloNav.frameOut {
  -webkit-animation: slide-up 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  animation: slide-up 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
body:not(#top) #gloNav:before {
  position: absolute;
  top: 16px; right: 0; left: 0;
  width: 369px;
  height: 123px;
  margin: 0 auto;
  z-index: 320;
  pointer-events: none;
}
#story #gloNav:before     { content: url(../img/cap_glonav_story.png); }
#character #gloNav:before { content: url(../img/cap_glonav_character.png); }
#system #gloNav:before    { content: url(../img/cap_glonav_system.png); }
#gallery #gloNav:before   { content: url(../img/cap_glonav_gallery.png); }
#special #gloNav:before   { content: url(../img/cap_glonav_special.png); }

body:not(#top) #gloNav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 938px;
  margin: 0 auto;
}
body:not(#top) #gloNav ul li {
  position: relative;
  margin: 0 2px 0 0;
}
body:not(#top) #gloNav ul li.new:after {
  top: -5px;
  width: 50px;
  height: 25px;
}
body:not(#top) #gloNav ul li:nth-child(1) {
}
body:not(#top) #gloNav ul li:nth-child(2) {
  padding: 4px 0 0;
}
body:not(#top) #gloNav ul li:nth-child(3) {
  padding: 3px 0 0;
}
body:not(#top) #gloNav ul li:nth-child(4) {
  padding: 2px 0 0;
}
body:not(#top) #gloNav ul li:nth-child(5) {
  padding: 4px 0 0;
}
body:not(#top) #gloNav ul li:nth-child(6) {
  padding: 4px 0 0;
}
body:not(#top) #gloNav ul li a,
body:not(#top) #gloNav ul li span {
  display: block;
  background: 0 0 no-repeat;
}
body:not(#top) #gloNav ul li a img {
  display: block;
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
body:not(#top) #gloNav ul li a.top,
body:not(#top) #gloNav ul li a.top img {
  width: 90px;
  height: 46px;
  background-image: url(../img/nav_top.png);
}
body:not(#top) #gloNav ul li a.story,
body:not(#top) #gloNav ul li a.story img {
  width: 149px;
  height: 42px;
  background-image: url(../img/nav_story.png);
}
body:not(#top) #gloNav ul li a.character,
body:not(#top) #gloNav ul li a.character img {
  width: 203px;
  height: 43px;
  background-image: url(../img/nav_character.png);
}
body:not(#top) #gloNav ul li a.system,
body:not(#top) #gloNav ul li a.system img {
  width: 135px;
  height: 44px;
  background-image: url(../img/nav_system.png);
}
body:not(#top) #gloNav ul li a.gallery,
body:not(#top) #gloNav ul li a.gallery img {
  width: 163px;
  height: 43px;
  background-image: url(../img/nav_gallery.png);
}
body:not(#top) #gloNav ul li a.special,
body:not(#top) #gloNav ul li a.special img {
  width: 172px;
  height: 43px;
  background-image: url(../img/nav_special.png);
}

body:not(#top) #gloNav ul li span.gallery {
  width: 163px;
  height: 43px;
  background-image: url(../img/nav_gallery_gray.png);
}
body:not(#top) #gloNav ul li span.special {
  width: 172px;
  height: 43px;
  background-image: url(../img/nav_special_gray.png);
}
body:not(#top) #gloNav ul li a:not(.selected):hover {
  -webkit-animation: hoverAnim 0.22s ease infinite alternate both;
  animation: hoverAnim 0.22s ease infinite alternate both;
}
body:not(#top) #gloNav ul li a.selected:hover {
  cursor: default;
}
body:not(#top) #gloNav ul li a:not(.selected):hover img {
  opacity: 1;
}
body:not(#top) #bgmBox {
  top: 63px;
  right: -webkit-calc(50% - 490px);
  right: calc(50% - 490px);
}

main {
  position: relative;
  width: 1098px;
  padding: 228px 0 160px;
  margin: 0 auto;
}

body:not(#top) main h1 {
  display: none;
  /*position: fixed;
  top: 16px; right: 0; left: 0;
  text-align: center;
  z-index: 8000;
  pointer-events: none;*/
}

body:not(#top).loaded #secondFrame .frame_wrap {
  opacity: 1;
  -webkit-animation: 0.7s scaleBounce 0.6s both;
  animation: 0.7s scaleBounce 0.6s both
}
body:not(#top).loaded #secondFrame.frameOut .frame_wrap {
  -webkit-animation: 0.5s frameOut 0.4s both;
  animation: 0.5s frameOut 0.4s both;
}
body:not(#top).loaded #secondFrame #canteraLeft .cantera {
  -webkit-animation: 1.05s canteraLeftBounce 0.6s both;
  animation: 1.05s canteraLeftBounce 0.6s both;
}
body:not(#top).loaded #secondFrame #canteraRight .cantera {
  -webkit-animation: 1.05s canteraRightBounce 0.6s both;
  animation: 1.05s canteraRightBounce 0.6s both;
}
/* ---------------------------------
  サブナビ
---------------------------------- */
#contents #subNavWrap {
  position: fixed;
  top: 0;
  left: -webkit-calc(50% - 549px);
  left: calc(50% - 549px);
  width: 344px;
  height: 526px;
  z-index: 10;
}
#contents #subNav {
  display: block;
  width: 344px;
  height: 526px;
  background: url(../img/bg_subnav.png) 0 0 no-repeat;
}
body:not(#top).loaded #contents #subNav {
  -webkit-animation: easeOutBounce 1.3s both 0.8s;
  animation: easeOutBounce 1.3s both 0.8s;
}
body:not(#top).loaded #contents #subNav.frameOut {
  -webkit-animation: slide-up 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
  animation: slide-up 0.7s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
}
#contents #subNav ul {
  padding: 276px 60px 0;
}
#contents #subNav li {
  position: relative;
  text-align: center;
}
#contents #subNav li a {
  display: inline-block;
  background: 0 0 no-repeat;
  cursor: pointer;
}
#contents #subNav li a img {
  display: inline-block;
  background: 0 100% no-repeat;
  opacity: 0;
}
#contents #subNav li a[data-open] img {
  opacity: 1;
}
#contents #subNav li a:hover:before {
  content: url(../img/subnav_arrow.png);
  position: absolute;
  top: -19px; left: -36px;
  -webkit-animation: subNavArrow 0.45s ease both infinite;
  animation: subNavArrow 0.45s ease both infinite;
}
/* ---------------------------------
  シングルボックス
---------------------------------- */
#contents #singleBox {
  position: relative;
  right: 0;
  margin: 0 auto;
  width: 100%;
  min-width: 960px;
  max-width: 1086px;
  z-index: 3;
}
#contents #singleBox .frame {
  position: relative;
  width: 100%;
  min-width: 960px;
  max-width: 1086px;
  padding: 340px 0 0;
  margin: 0 0 312px;
  background: url(../img/bg_content_wideframe_header.png) 0 0 no-repeat;
}
#contents #singleBox .frame:after {
  content: url(../img/bg_content_wideframe_footer.png);
  position: absolute;
  top: -webkit-calc(100% - 56px);
  top: calc(100% - 56px);
  left: 0;
  width: 100%;
  min-width: 960px;
  max-width: 1086px;
  height: 350px;
}
#contents #singleBox .frame .middle {
  padding: 0 6px 0 0;
  margin: 0 0 0;
  background: url(../img/bg_content_wideframe_middle.png) 0 0 repeat-y;
}
#contents #singleBox .frame .inner {
  position: relative;
  top: -272px;
  width: 932px;
  margin: 0 auto -420px;
  z-index: 1;
}
.frame .inner.new:after {
  right: auto;
  top: -84px;
  left: -56px;
}
#contents #singleBox .frame .inner > *:last-child {
  margin-bottom: 0 !important;
}
#contents #singleBox article h2,
#contents #singleBox .frame h2,
#contents #mainBox .frame h2 {
  background: url(../img/bg_h2.png) 50% 100% / 578px auto no-repeat;
  padding: 0 0 10px;
  margin: 0 0 20px;
  text-align: center;
}
#contents #singleBox .img_right img {
  width: 388px;
}
#contents #singleBox .pop_images {
  margin: 0 28px 30px;
}
#contents #singleBox .pop_images li .pop img {
  width: 422px;
}
#singleBox hr {
  width: 923px;
  background: url(../img/line_wide.png) 0 0 no-repeat;
}
/* ---------------------------------
  メインボックス
---------------------------------- */
#contents #mainBox {
  position: relative;
  right: 0;
  margin: 0 0 0 auto;
  width: 754px;
  z-index: 5;
}
#contents #mainBox button {
  display: none;
}
#contents #mainBox .frame {
  position: relative;
  width: 754px;
  padding: 340px 0 0;
  margin: 0 0 312px;
  background: url(../img/bg_content_frame_header.png) 0 0 no-repeat;
}
#contents #mainBox .frame:after {
  content: url(../img/bg_content_frame_footer.png);
  position: absolute;
  top: -webkit-calc(100% - 56px);
  top: calc(100% - 56px);
  left: 0;
  width: 754px;
  height: 350px;
}
#contents #mainBox .frame .middle {
  padding: 0 6px 0 0;
  margin: 0 0 0;
  background: url(../img/bg_content_frame_middle.png) 0 0 repeat-y;
}
#contents #mainBox .frame .inner {
  position: relative;
  top: -272px;
  width: 600px;
  margin: 0 auto -420px;
  z-index: 1;
}
#contents #mainBox .frame .inner *:last-child {
  margin-bottom: 0 !important;
}
hr {
  width: 599px;
  height: 16px;
  margin: 0 0 14px;
}

/* ---------------------------------
  ストーリー
---------------------------------- */
#story #singleBox article#summary {
  width: 100%;
  min-width: 960px;
  max-width: 1086px;
  height: 691px;
  padding: 64px 0 0;
  background: url(../img/story/bg_frame.png) 50% 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#story #singleBox article#summary p {
  width: 786px;
  margin: 0 auto;
}

/* ---------------------------------
  キャラクター
---------------------------------- */
#character .img_right {
  top: 186px; right: 40px;
}
#character #singleBox .txt01 {
  min-height: 121px;
    margin: 0 0 96px;
    margin-left: 29px;
    margin-top: 51px;
}
#character #jobs section .pop,
#character #jobs section .pop img {
  width: 385px;
}
#jobs {
  height: 800px;
}
#jobs .jobNav li:nth-child(1) button,
#jobs .jobNav li:nth-child(1) button img {
  width: 129px;
  height: 172px;
}
#jobs .jobNav li:nth-child(2) button,
#jobs .jobNav li:nth-child(2) button img {
  width: 130px;
  height: 157px;
}
#jobs .jobNav li:nth-child(3) button,
#jobs .jobNav li:nth-child(3) button img {
  width: 130px;
  height: 148px;
}
#jobs .jobNav li:nth-child(4) button,
#jobs .jobNav li:nth-child(4) button img {
  width: 111px;
  height: 160px;
}
#jobs .jobNav li:nth-child(5) button,
#jobs .jobNav li:nth-child(5) button img {
  width: 114px;
  height: 163px;
}
#jobs .jobNav li:nth-child(6) button,
#jobs .jobNav li:nth-child(6) button img {
  width: 107px;
  height: 161px;
}
#jobs .jobNav li:nth-child(7) button,
#jobs .jobNav li:nth-child(7) button img {
  width: 109px;
  height: 168px;
}
#jobs .jobNav li:nth-child(8) button,
#jobs .jobNav li:nth-child(8) button img {
  width: 110px;
  height: 164px;
}
#jobs section {
  height: 545px;
}

#character .sub02 {
  position: relative;
  width: 49%;
  height: 600px;
  padding: 300px 0 0 234px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#character .sub02 .balloon {
  position: absolute;
  top: 110px;
  left: 4px;
}
#character .sub03 {
  position: absolute;
  top: 620px;
  right: 0;
  width: 50.5%;
  height: 600px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#character .sub03 .subimg {
  position: absolute;
  top: 180px;
  left: 0px;
  z-index: 2;
}
#character .sub03 .balloon {
  position: absolute;
  top: 0;
  right: 0;
}

/* ---------------------------------
  システム
---------------------------------- */
#system #subNav li a.gamesystem,
#system #subNav li a.gamesystem img {
  width: 168px;
  height: 35px;
  background-image: url(../img/system/subnav_gamesystem.png);
}
#system #subNav li a.stage,
#system #subNav li a.stage img {
  width: 168px;
  height: 35px;
  background-image: url(../img/system/subnav_stage.png);
}
#system #subNav li a.treasure,
#system #subNav li a.treasure img {
  width: 168px;
  height: 35px;
  background-image: url(../img/system/subnav_treasure.png);
}
#system #subNav li a.route,
#system #subNav li a.route img {
  width: 168px;
  height: 36px;
  background-image: url(../img/system/subnav_route.png);
}
#system #subNav li a.monster,
#system #subNav li a.monster img {
  width: 168px;
  height: 38px;
  background-image: url(../img/system/subnav_monster.png);
}
#system #subNav li a.basesystem,
#system #subNav li a.basesystem img {
  width: 168px;
  height: 38px;
  background-image: url(../img/system/subnav_basesystem.png);
}

#system article#monster .img01 {
  margin: 0 0 0 -11px;
}

/* ---------------------------------
ギャラリー
---------------------------------- */
#gallery #subNav li a.movie,
#gallery #subNav li a.movie img {
  width: 107px;
  height: 34px;
  background-image: url(../img/gallery/subnav_movie.png);
}
.mv_list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 7px;
}
.mv_list li {
  width: 281px;
  margin: 0 0 14px;
}
.mv_list h3 {
  margin: 0 0 4px;
  text-align: center;
}
.mv_list h3 img {
  height: 31px;
}
.mv_list .play_btn,
.mv_list .mv_obj {
  width: 281px;
  height: 158px;
}
.mv_list .play_btn:after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 281px;
  height: 158px;
  background: rgba(255,146,1,0.15) url(../img/gallery/on.png) 50% 50% no-repeat;
  opacity: 0;
  z-index: 2;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}

/* ---------------------------------
  スペシャル
---------------------------------- */
#special .banner {
  width: 790px;
}
#special .banner li {
  /*margin: 0 10px 16px;*/
  margin: auto;
  opacity: 1;
  -webkit-transform: translate(0%,0);
  -ms-transform: translate(0%,0);
  transform: translate(0%,0);
}
#special .banner a:hover {
  -webkit-animation: none;
  animation: none;
}

@media screen and (min-width: 1280px) {
}

#monster .pop.boss {
    top: 310px;
    left: 310px;
    width: 281px;
    height: auto;
}

#monster .pop.boss img {
    width: 100%;
    height: auto;
}