@charset "utf-8";

body:not(#top) #contents {
  position: relative;
  padding: 80px 0 0;
  width: 973px;
  min-height: 600px;
  margin: 0 auto 324px;
  z-index: 7;
}
body#movie #contents {
  margin: 0 auto 232px;
}

#contents .frame {
  position: relative;
  width: 973px;
  padding: 311px 0 0;
  margin: 0;
  background: url(../img/frame_header.png) 0 0 no-repeat;
  z-index: 7;
}
#contents .frame .inner {
  position: relative;
  background: url(../img/frame_middle.png) 0 0 repeat-y;
  z-index: 1;
}
#contents .frame:after {
  content: url(../img/frame_footer.png);
  position: absolute;
  top: 100%;
  left: 0;
  width: 973px;
  height: 324px;
}
#subNav {
  position: absolute;
  top: -73px;
  left: 20px;
  width: 230px;
}
#subNav li {
  position: relative;
  width: 230px;
  height: 59px;
  margin: 0 0 -8px;
  padding: 0 0 0 1px;
  -webkit-animation: subNavSlideAnim 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s both;
  animation: subNavSlideAnim 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.4s both;
}
#subNav li:nth-child(2) { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
#subNav li:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
#subNav li:nth-child(4) { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
#subNav li:nth-child(5) { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
#subNav li:nth-child(6) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
#subNav li:nth-child(7) { -webkit-animation-delay: 1.0s; animation-delay: 1.0s; }
#subNav li:nth-child(8) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
#subNav li:nth-child(9) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
#subNav li:nth-child(10) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
#subNav li:nth-child(11) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }

#subNav li.third {
  width: 195px;
  height: 28px;
  padding: 5px 0 0 14px;
  background: none;
}
#subNav li.third.t_first {
  padding: 9px 0 0 14px;
}
#subNav li.third.t_last {
  padding: 5px 0 3px 14px;
}
#subNav li a {
  position: relative;
  display: block;
  background: 0 0 no-repeat;
  cursor: pointer;
  -webkit-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#subNav li a:before {
  content: url(../img/subnavi_icon.png);
  position: absolute;
  bottom: -7px;
  left: -92px;
  display: block;
  width: 81px;
  height: 40px;
  -webkit-transform: rotate(-7deg);
  -ms-transform: rotate(-7deg);
  transform: rotate(-7deg);
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
#subNav li.third a:before {
  top: -1px;
  left: -8px;
}
#subNav li.new a:after {
  content: url(../img/new.png);
  position: absolute;
  top: -14px;
  right: -2px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: rotate(-6deg) scale(0.5);
  -ms-transform: rotate(-6deg) scale(0.5);
  transform: rotate(-6deg) scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#subNav li a img {
  display: block;
  background-position: 0 100%;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
#subNav li.third a,
#subNav li.third a img {
  width: 195px;
  height: 28px;
}
#subNav li.third a.open {
  padding: 0 0 0 4px;
  background-position: 4px 0;
}
#subNav li a.open:before {
  opacity: 1;
}
#subNav li a:hover {
  opacity: 1;
}
#subNav li a:not(.open):hover:before {
  opacity: 1;
  -webkit-animation: navArrowAnim 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
  animation: navArrowAnim 0.25s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite alternate;
}
#subNav li.third a.open:before {
}
#subNav li a:hover img,
#subNav li a.open img,
#subNav li a.clicked img {
  opacity: 1;
}
.pop_images {
  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 6px;
}
#contents main section > section .pop_images {
  margin: 0;
}
.pop_images li {
  position: relative;
  text-align: center;
}

.pop_images.images4 li:nth-child(n+3) {
  margin: 14px 0 0;
}
.pop_images.arrow {
  margin: 0 4px 0 -2px;
}
.pop_images.arrow li:not(:last-child):after {
  content: url(../img/img_arrow.png);
  position: absolute;
  top: 28px;
  right: -32px;
  z-index: 10;
}
.pop_images.arrow2 {
  margin: 0 8px 0 4px;
}
.pop_images.arrow2 li:not(:last-child):after {
  content: url(../img/img_arrow.png);
  position: absolute;
  top: 56px;
  right: -38px;
  z-index: 10;
}
a.pop.txt {
  display: block;
  margin: 0 0 2px;
}
a.pop img {
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
a.pop:hover img {
  opacity: 0.75;
}
p.point_serif {
  text-align: center;
  margin: 32px 0;
}
#contents main {
  position: relative;
  top: -78px;
  width: 973px;
  margin: 0 0 -160px;
  font-size: 16rem;
}
#system  main article,
#special main article {
  display: none;
}
#contents section {
  position: relative;
}
#contents section.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: 30px;
  left: -30px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 3.2s ease-in-out infinite;
  animation: blink 3.2s ease-in-out infinite;
}
section h2 {
  margin: 0 0 8px;
  -webkit-transform-origin: 20% 100%;
  -ms-transform-origin: 20% 100%;
  transform-origin: 20% 100%;
}

/* ストーりー */
#story main {
  padding: 0 0 19px;
}
#story main p {
  margin: 0;
  text-align: center;
}
#story main .chara01 {
  position: absolute;
  top: -100px;
  left: -40px;
  -webkit-animation: storyCharaAnim 0.25s linear 0.3s both;
  animation: storyCharaAnim 0.25s linear 0.3s both;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#story main .chara02 {
  position: absolute;
  top: -100px;
  right: -37px;
  -webkit-animation: storyCharaAnim 0.25s linear 0.4s both;
  animation: storyCharaAnim 0.25s linear 0.4s both;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#story main .chara03 {
  position: absolute;
  top: 340px;
  left: -39px;
  -webkit-animation: storyCharaAnim 0.25s linear 0.5s both;
  animation: storyCharaAnim 0.25s linear 0.5s both;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#story main .chara04 {
  position: absolute;
  top: 338px;
  right: -80px;
  -webkit-animation: storyCharaAnim 0.25s linear 0.6s both;
  animation: storyCharaAnim 0.25s linear 0.6s both;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
#contents .frame.multi_end {
  margin: 250px 0 0;
}
#story .frame.multi_end main {
  padding: 24px 0 0;
  height: 1169px;
}
#contents .frame.multi_end.new main:after {
  content: url(../img/new.png);
  position: absolute;
  top: -138px;
  left: -10px;
  display: block;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
/* キャラクター */
.knight_btn {
  position: absolute;
  top: -75px;
  right: 38px;
  display: block;
  width: 357px;
  height: 111px;
  background: url(../img/character/btn_knight.png) 0 0 no-repeat;
  z-index: 20;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-animation: charaTxtPopIn 0.6s linear 2.6s both;
  animation: charaTxtPopIn 0.6s linear 2.6s both;
}
.knight_btn img {
  display: block;
  width: 357px;
  height: 111px;
  background: url(../img/character/btn_knight.png) 0 100% no-repeat;
  opacity: 0;
}
.knight_btn:hover img {
  opacity: 1;
}
.knight_btn.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: 8px;
  right: 26px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character section {
  margin: -109px 13px 0;
  padding: 78px 0 0;
  height: 936px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#character section.sub_character {
  position: relative;
  margin: 0 13px 0;
  padding: 288px 0 0;
  height: 1364px;
  text-align: center;
}
#character section.sub_character .new1 {
  content: url(../img/new.png);
  position: absolute;
  top: 358px;
  left: 26px;
  display: block;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character section.sub_character .new2 {
  content: url(../img/new.png);
  position: absolute;
  top: 858px;
  right: 36px;
  display: block;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character section h2 {
  margin: 0 0 20px;
  text-align: center;
  -webkit-animation: h2_slideIn 0.3s linear 0.3s both;
  animation: h2_slideIn 0.3s linear 0.3s both;
}
#character section dl {
  position: relative;
  padding: 0 0 0 506px;
}
#character section dl dt {
  position: relative;
  margin: 0 0 -20px;
  z-index: 5;
  -webkit-transform-origin: 50% 80%;
  -ms-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  -webkit-animation: charaNamePopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 1.8s both;
  animation: charaNamePopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 1.8s both;
}
#character section dl .chara_img {
  margin: 0 0 0 14px;
  -webkit-transform-origin: 50% 93%;
  -ms-transform-origin: 50% 93%;
  transform-origin: 50% 93%;
  -webkit-animation: charaPopIn 0.6s linear 0.9s both;
  animation: charaPopIn 0.6s linear 0.9s both;
}
#character section dl img.txt {
  position: absolute;
  top: 53px;
  left: 7px;
  -webkit-transform-origin: 130% 110%;
  -ms-transform-origin: 130% 110%;
  transform-origin: 130% 110%;
  -webkit-animation: charaTxtPopIn 0.6s linear 1.5s both;
  animation: charaTxtPopIn 0.6s linear 1.5s both;
}
#character section dl .style_btn {
  position: absolute;
  top: 512px;
  left: 614px;
  display: block;
  width: 222px;
  height: 64px;
  background: url(../img/character/btn_battle_style.png) 0 0 no-repeat;
  cursor: pointer;
  -webkit-animation: fadeIn 0.6s linear 2.6s both;
  animation: fadeIn 0.6s linear 2.6s both;
}
#character section.lliaty dl .style_btn {
  top: 556px;
  left: 602px;
}

#character section.alpana dl .style_btn {
  top: 542px;
  left: 602px;
}
#character section dl .style_btn.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -14px;
  right: -10px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character section dl .style_btn img {
  display: block;
  width: 222px;
  height: 64px;
  background: url(../img/character/btn_battle_style.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#character section dl .cast_btn {
  position: absolute;
  top: 130px;
  left: 803px;
  display: block;
  width: 140px;
  height: 42px;
  background: url(../img/character/btn_cast_cmnt.png) 0 0 no-repeat;
  cursor: pointer;
  z-index: 20;
  -webkit-transform-origin: 50% 80%;
  -ms-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  -webkit-animation: charaNamePopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 1.8s both;
  animation: charaNamePopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 1.8s both;
}
#character section dl .cast_btn.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -20px;
  right: 8px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character section dl .cast_btn img {
  display: block;
  width: 140px;
  height: 42px;
  background: url(../img/character/btn_cast_cmnt.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#character section dl .style_btn:hover img,
#character section dl .cast_btn:hover img {
  opacity: 1;
}
#character section dl .serif {
  position: absolute;
  top: 402px;
  left: 15px;
  -webkit-transform-origin: 130% 0;
  -ms-transform-origin: 130% 0;
  transform-origin: 130% 0;
  -webkit-animation: charaSerifPopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.2s both;
  animation: charaSerifPopIn 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.2s both;
}
#stb_wrap {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 80;
}
#stb_wrap.lliaty,
#stb_wrap.veronica,
#stb_wrap.monomaria,
#stb_wrap.alpana {
  pointer-events: auto;
  visibility: visible;
}
#character .style_box {
  position: absolute;
  top: 80px;
  right: 2px;
  left: 0;
  margin: 0 auto;
  width: 802px;
  height: 852px;
  padding: 32px 35px;
  z-index: 200;
  background: url(../img/character/style_pop_bg.png) 0 0 no-repeat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#stb_wrap.lliaty .style_box.lliaty,
#stb_wrap.veronica .style_box.veronica,
#stb_wrap.monomaria .style_box.monomaria,
#stb_wrap.alpana .style_box.alpana {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#character .style_box:after {
  -webkit-animation: charaSlideOut 0.2s linear 1s both;
  animation: charaSlideOut 0.2s linear 1s both;
  z-index: 100;
}
#character #stb_wrap.lliaty  .style_box.lliaty:after,
#character #stb_wrap.veronica .style_box.veronica:after,
#character #stb_wrap.monomaria .style_box.monomaria:after,
#character #stb_wrap.alpana .style_box.alpana:after {
  -webkit-animation: charaSlideIn 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.6s both;
  animation: charaSlideIn 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0.6s both;
}
#character .style_box.lliaty:after {
  position: absolute;
  top: -19px;
  right: 66px;
  content: url(../img/character/lliaty_style_img.png);
}
#character .style_box.veronica:after {
  position: absolute;
  top: -26px;
  right: 100px;
  content: url(../img/character/veronica_style_img.png);
}
#character .style_box.monomaria:after {
  position: absolute;
  top: -26px;
  right: 78px;
  content: url(../img/character/monomaria_style_img.png);
}
#character .style_box.alpana:after {
  position: absolute;
  top: -32px;
  right: 80px;
  content: url(../img/character/alpana_style_img.png);
}
#character .style_box h3,
#character .style_box p {
  margin: 0 0 14px;
}
#character .style_box .close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: block;
  width: 62px;
  height: 64px;
  background: url(../img/character/btn_close.png) 0 0 no-repeat;
  cursor: pointer;
  z-index: 300;
}
#character .style_box .close img {
  display: block;
  width: 62px;
  height: 64px;
  background: url(../img/character/btn_close.png) 0 100% no-repeat;
}
#character .style_box .close img {
  display: block;
  width: 62px;
  height: 64px;
  background: url(../img/character/btn_close.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#character .style_box .close:hover img {
  opacity: 1;
}
#character .style_box .pop_images {
  position: relative;
  z-index: 10;
}
#character .style_box .pop_images li {
  margin: 0 0 13px;
}
#character section.lliaty {
  height: 1119px;
  margin: -102px 13px 0;
  background: url(../img/character/lliaty_bg.png) 0 0 no-repeat;
}
#character section.veronica {
  height: 1119px;
  background: url(../img/character/veronica_bg.png) 0 0 no-repeat;
}
#character section.veronica dl dt {
  margin: 0 0 -96px;
}
#character section.monomaria {
  height: 1119px;
  background: url(../img/character/monomaria_bg.png) 0 0 no-repeat;
}
#character section.monomaria dl dt {
  margin: 0 0 -22px;
}
#character section.alpana {
  height: 1138px;
  margin: -109px 13px -282px;
  padding: 52px 0 0;
  background: url(../img/character/alpana_bg.png) 0 0 no-repeat;
}
#character section.alpana dl dt {
  margin: 0 0 -64px;
}
#character section.alpana .chara_img {
  margin: 0 0 0 -28px;
}
#character .play_btn {
  position: absolute;
  top: 557px;
  left: 122px;
  display: block;
  width: 376px;
  height: 216px;
  padding: 2px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/character/bg_chara_mv.png) 0 0 no-repeat;
  -webkit-animation: fadeIn 0.6s linear 3s both;
  animation: fadeIn 0.6s linear 3s both;
}
#character .play_btn.new:before {
  content: url(../img/new.png);
  position: absolute;
  top: -20px;
  right: 8px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
#character .play_btn:after {
  content: url(../img/movie/on.png);
  position: absolute;
  top: 24px;
  left: 40px;
  display: block;
  width: 296px;
  height: 167px;
  opacity: 0;
}
#character .play_btn:hover:after {
  opacity: 1;
}
#character .mv_obj {
  width: 368px;
  height: 207px;
  background: url(../img/loading.gif) 50% 50% no-repeat;
}
/* システム */
#system #subNav li:nth-child(2) {
  margin: 0 0 -2px;
}
#system #subNav li:nth-child(4) {
  padding: 6px 0 0;
  margin: 0 0 -15px;
}
#system #subNav li:nth-child(5) {
  margin: 0 0 -16px;
}
#system #subNav li:nth-child(6) {
  margin: 0;
}
#subNav a.summary,
#subNav a.summary img {
  width: 150px;
  height: 52px;
  background-image: url(../img/system/sub_navi_summary.png);
}
#subNav a.guidance,
#subNav a.guidance img {
  width: 179px;
  height: 54px;
  background-image: url(../img/system/sub_navi_guidance.png);
}
#subNav a.action,
#subNav a.action img {
  width: 150px;
  height: 50px;
  background-image: url(../img/system/sub_navi_action.png);
}
#subNav a.mode,
#subNav a.mode img {
  width: 94px;
  height: 43px;
  background-image: url(../img/system/sub_navi_mode.png);
}
#subNav a.training,
#subNav a.training img {
  width: 123px;
  height: 49px;
  background-image: url(../img/system/sub_navi_training.png);
}
#subNav a.worldmap,
#subNav a.worldmap img {
  width: 205px;
  height: 58px;
  background-image: url(../img/system/sub_navi_worldmap.png);
}
#subNav a.mission,
#subNav a.mission img {
  width: 150px;
  height: 48px;
  background-image: url(../img/system/sub_navi_mission.png);
}
#subNav a.knight,
#subNav a.knight img {
  width: 122px;
  height: 49px;
  background-image: url(../img/system/sub_navi_knight.png);
}
#subNav a.diary,
#subNav a.diary img {
  width: 123px;
  height: 49px;
  background-image: url(../img/system/sub_navi_diary.png);
}
#system main h2 {
  opacity: 0;
}
#system main p,
#system main .pop_images {
  opacity: 0;
}
#system .summary #summary h2,
#system .guidance #guidance h2,
#system .action #action h2,
#system .mode #mode h2,
#system .training #training h2,
#system .worldmap #worldmap h2,
#system .mission #mission h2,
#system .knight #knight h2,
#system .diary #diary h2 {
  opacity: 1;
  -webkit-animation: h2_slideIn 0.3s linear 0.3s both;
  animation: h2_slideIn 0.3s linear 0.3s both;
}
#system .summary #summary p,
#system .summary #summary .pop_images,
#system .guidance #guidance p,
#system .guidance #guidance .pop_images,
#system .guidance #guidance h3,
#system .guidance #guidance .point_serif,
#system .action #action h3,
#system .action #action p,
#system .action #action .pop_images,
#system .action #action .right_image,
#system .action #action .left_image,
#system .action #action .img01,
#system .action #action .img02,
#system .mode #mode h3,
#system .mode #mode p,
#system .mode #mode .pop_images,
#system .mode #mode .right_image,
#system .mode #mode .point_serif,
#system .training #training h3,
#system .training #training p,
#system .training #training .pop_images,
#system .worldmap #worldmap h3,
#system .worldmap #worldmap p,
#system .worldmap #worldmap .pop_images,
#system .worldmap #worldmap .pop01,
#system .worldmap #worldmap .img01,
#system .worldmap #worldmap .img02,
#system .worldmap #worldmap .img03,
#system .mission #mission h3,
#system .mission #mission p,
#system .mission #mission .pop_images,
#system .knight #knight p,
#system .knight #knight .pop_images,
#system .knight #knight .right_image,
#system .knight #knight .point_serif,
#system .diary #diary p,
#system .diary #diary .pop_images,
#system .diary #diary .point_serif {
  opacity: 1;
  -webkit-animation: fadeIn 0.5s linear 0.8s both;
  animation: fadeIn 0.5s linear 0.8s both;
}
#system #contents main {
  top: -146px;
  width: 708px;
  margin: 0 0 -160px 245px;
}
#system #contents main article#summary {
  height: 1709px;
}
#contents.guidance main article#guidance {
  height: 1966px;
}
#contents.action main article#action {
  height: 8331px;
}
#contents.mode main article#mode {
  height: 2139px;
}
#contents.training main article#training {
  height: 1708px;
}
#contents.worldmap main article#worldmap {
  height: 3772px;
}
#contents.mission main article#mission {
  height: 1708px;
}
#contents.knight main article#knight {
  height: 4460px;
}
#contents.diary main article#diary {
  height: 676px;
}
#contents.summary main article#summary,
#contents.guidance main article#guidance,
#contents.action main article#action,
#contents.mode main article#mode,
#contents.training main article#training,
#contents.worldmap main article#worldmap,
#contents.mission main article#mission,
#contents.knight main article#knight,
#contents.diary main article#diary {
  display: block;
}
#system #contents main section:not(:last-child) {
  margin: 0 0 30px;
}
#system #contents main section > section:not(:last-child) {
  position: relative;
  margin: 0 15px 30px;
}
#system #contents main section > section:last-child {
  margin: 0 15px;
}
#system #contents main section > section h3 {
  margin: 0 -13px;
}
.right_image {
  float: right;
  margin: 0 4px 0 0;
  position: relative;
  z-index: 10;
}
article#action .img01 {
  position: relative;
  left: -30px;
  margin: 20px 0 0;
}
article#action .img02 {
  position: absolute;
  top: 160px;
  right: -10px;
}
.action_img03 {
  margin: -10px 0 30px -18px;
}
article#action .action02 .point_serif {
  margin: 60px 0 0;
}
.action_txt11,
.action_txt12,
.action_txt13 {
  position: relative;
}
.action_txt11 .pop {
  position: absolute;
  top: 60px;
  right: 7px;
}
.action_txt12 .pop {
  position: absolute;
  top: 60px;
  left: 2px;
}
.action_txt13 .pop {
  position: absolute;
  top: 60px;
  right: 7px;
}
.relic01 {
  position: absolute;
  top: 40px;
  left: -15px;
  z-index: 10;
}
.relic02 {
  position: absolute;
  top: 90px;
  left: -30px;
  z-index: 10;
}
.relic03 {
  position: absolute;
  top: 46px;
  left: -25px;
  z-index: 10;
}
#system #training a[class^="link"] {
  position: absolute;
  display: block;
  background: 0 0 no-repeat;
  cursor: pointer;
}
#system #training a[class^="link"] img {
  opacity: 0;
  background-position: 0 100%;
}
#system #training a[class^="link"]:hover img {
  opacity: 1;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
#system #training a.link01 {
  top: 202px;
  left: 457px;
}
#system #training a.link01,
#system #training a.link01 img {
  width: 164px;
  height: 29px;
  background-image: url(../img/system/training_link01.png);
}
#system #training a.link02 {
  top: 362px;
  left: 221px;
}
#system #training a.link02,
#system #training a.link02 img {
  width: 226px;
  height: 28px;
  background-image: url(../img/system/training_link02.png);
}
#system #training a.link03 {
  top: 363px;
  left: 453px;
}
#system #training a.link03,
#system #training a.link03 img {
  width: 223px;
  height: 28px;
  background-image: url(../img/system/training_link03.png);
}
#system #training a.link03:after {
  content: "";
  position: absolute;
  top: 32px;
  left: -440px;
  display: block;
  width: 223px;
  height: 28px;
  background: url(../img/system/training_link04.png) 0 0 no-repeat;
}
#system #training a.link03:hover:after {
  background: url(../img/system/training_link04.png) 0 100% no-repeat;
}
#system #worldmap .img01,
#system #worldmap .img02 {
  display: block;
  margin: 0 auto 15px;
}
#system #worldmap .txt01 {
  position: relative;
  margin: 0 22px 8px;
}
#system #worldmap .pop01 {
  position: absolute;
  top: 0;
  right: 0;
}
#system #worldmap .pop_text01 {
  position: absolute;
  top: 192px;
  right: 106px;
}
#system #worldmap .subcap01 {
  margin: 30px 0 4px;
}
#system #worldmap .img03 {
  display: block;
  margin: 0 auto 24px;
}
#system #mission section > section .pop_images {
  margin: 0 -8px;
}
#system .knight_txt01 {
  margin: -24px 0 20px 13px;
}
#system #knight .right_image {
  margin: 52px 5px 20px 0;
}
#system #mode .right_image {
  margin: 0 -8px 0 0;
}
#system #mode .txt03 {
  margin: 0 0 0 -6px;
}
#system #mode .pop_images {
  margin: 0 -8px 0 0;
}
#system #mode .commander .pop_images {
  margin: 54px -8px 0 0;
}

/* ムービー */
#movie #contents .inner {
  height: 345px;
}
.mv_list {
  width: 932px;
  margin: 0 auto;
  padding: 20px 0 0;
}
.mv_list li {
  position: relative;
  float: left;
  margin: 0 1px 20px;
  -webkit-animation: fadeIn 0.5s linear 0.3s both;
  animation: fadeIn 0.5s linear 0.3s both;
}
.mv_list li:nth-child(3n+1) {
  clear: left;
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -14px;
  right: 11px;
  display: block;
  width: 55px;
  height: 21px;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-animation: blink 1.8s ease-in-out infinite;
  animation: blink 1.8s ease-in-out infinite;
  z-index: 100;
}
.mv_list h3 {
  margin: 0 0 2px;
  text-align: center;
}
.mv_list h3 img {
  position: relative;
  left: -2px;
}
.mv_list .play_btn {
  position: relative;
  display: block;
  width: 304px;
  height: 175px;
  padding: 2px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(../img/movie/bg.png) 0 0 no-repeat;
}
.mv_list .play_btn:after {
  content: url(../img/movie/on.png);
  position: absolute;
  top: 5px;
  left: 7px;
  display: block;
  width: 296px;
  height: 167px;
  opacity: 0;
}
.mv_list .play_btn:hover:after {
  opacity: 1;
}
.mv_list .mv_obj {
  width: 296px;
  height: 167px;
  background: url(../img/loading.gif) 50% 50% no-repeat;
}
/* スペシャル */
#special #subNav {
  top: -83px;
}
#special #subNav li:nth-child(3) {
  margin: 6px 0 0;
}
#special #subNav li:nth-child(4) {
  margin: -9px 0 0;
}
#special #subNav li:nth-child(5) {
  margin: -9px 0 0;
}
#special #subNav li:nth-child(6) {
  margin: -7px 0 0;
}
#special #subNav li:nth-child(7) {
  margin: -11px 0 0;
}
#subNav a.limited,
#subNav a.limited img {
  width: 212px;
  height: 59px;
  background-image: url(../img/special/sub_navi_limited.png);
}
#subNav a.n1shop,
#subNav a.n1shop img {
  width: 213px;
  height: 59px;
  background-image: url(../img/special/sub_navi_n1shop.png);
}
#subNav a.benefits,
#subNav a.benefits img {
  width: 179px;
  height: 55px;
  background-image: url(../img/special/sub_navi_benefits.png);
}
#subNav a.radio,
#subNav a.radio img {
  width: 204px;
  height: 57px;
  background-image: url(../img/special/sub_navi_radio.png);
}
#subNav a.cast_cmnt,
#subNav a.cast_cmnt img {
  width: 211px;
  height: 57px;
  background-image: url(../img/special/sub_navi_cast_cmnt.png);
}
#subNav a.rt_campaign,
#subNav a.rt_campaign img {
  width: 211px;
  height: 55px;
  background-image: url(../img/special/sub_navi_rt_campaign.png);
}
#subNav a.countdown,
#subNav a.countdown img {
  width: 212px;
  height: 59px;
  background-image: url(../img/special/sub_navi_countdown.png);
}
#special #contents main {
  top: -134px;
  width: 708px;
  margin: 0 0 -160px 245px;
}
#special main h2 {
  opacity: 0;
}
#special main p,
#special main .pop_images {
  opacity: 0;
}
#special .limited #limited h2,
#special .n1shop #n1shop h2,
#special .cast_comments #cast_comments h2 {
  opacity: 1;
  -webkit-animation: h2_slideIn 0.3s linear 0.3s both;
  animation: h2_slideIn 0.3s linear 0.3s both;
}
#special .limited #limited p,
#special .n1shop #n1shop p,
#special .cast_comments #cast_comments p,
#special .limited #limited .pop_images,
#special .n1shop #n1shop .pop_images {
  -webkit-animation: fadeIn 0.5s linear 0.8s both;
  animation: fadeIn 0.5s linear 0.8s both;
}
#special #contents main article#limited {
  height: 1019px;
}
#special #contents main article#n1shop {
  height: 1020px;
}
#special #contents main article#cast_comments {
  height: 3084px;
}
#contents.limited main #limited,
#contents.n1shop main #n1shop,
#contents.cast_comments main #cast_comments {
  display: block;
}
#special #contents main #limited .img01 {
  position: absolute;
  top: 176px;
  left: 66px;
}
#special #contents main #n1shop .img01 {
  position: absolute;
  top: 264px;
  right: 20px;
  width: 208px;
  height: 194px;
}
#special #contents main #n1shop .img02 {
  position: absolute;
  top: 478px;
  right: 20px;
}
.booking_btns {
  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;
  height: 64px;
  margin: 0 12px;
}
.booking_btns li {
  width: 222px;
  height: 64px;
}
.booking_btns li a,
.booking_btns li a img {
  display: block;
  width: 222px;
  height: 64px;
}
.booking_btns li a {
  background: 0 0 no-repeat;
}
.booking_btns li a img {
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.booking_btns li a:hover img {
  opacity: 1;
}
.booking_btns li a.ps4,
.booking_btns li a.ps4 img {
  background-image: url(../img/special/n1shop_btn01.png);
}
.booking_btns li a.psVita,
.booking_btns li a.psVita img {
  background-image: url(../img/special/n1shop_btn02.png);
}
.booking_btns li a.nSw,
.booking_btns li a.nSw img {
  background-image: url(../img/special/n1shop_btn03.png);
}
#special main p.cmnt01 {
  margin: 0 0 80px 5px;
}
#special main p.cmnt02 {
  margin: 0 0 50px 5px;
}
.rt_txt {
  margin: 0 0 0.5em;
  text-align: center;
  color: #ff2a48;
  font-weight: bold;
  font-size: 24rem;
  line-height: 1.4;
}
.rt_campaign_btn {
  display: block;
  width: 316px;
  height: 94px;
  margin: 0 auto;
  background: url(../img/banner_rt_campaign.png) 0 0 no-repeat;
}
.rt_campaign_btn img {
  display: block;
  width: 316px;
  height: 94px;
  background: url(../img/banner_rt_campaign.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.rt_campaign_btn:hover img {
  opacity: 1;
}
/* フッター */