@charset "utf-8";

.js header h1,
.js .news_bg,
.js .banner {
  opacity: 0;
  -webkit-transform: translate(0,20px);
  -ms-transform: translate(0,20px);
  transform: translate(0,20px);
}
.js #bgCover,
.js #headCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 130vh;
  background: #000;
  z-index: 5;
}
#bgCover.fadeOut {
  -webkit-animation: fade-out 1s linear 4.5s both;
  animation: fade-out 1s linear 4.5s both;
}
#headCover.fadeOut {
  -webkit-animation: fade-out 1s linear 2.7s both;
  animation: fade-out 1s linear 2.7s both;
}
header {
  position: relative;
  /*background: url(../img/top_bg.png) center 0 no-repeat;*/
  z-index: 30;
  max-width: 640px;
  margin: 0 auto;
}

#top header.sub_header {
  display: none;
}
.sp-top {
  margin: 0 0 -40px;
}
.news_bg {
  max-width: 640px;
  margin: 0 auto 2em;
  background: rgba(7,0,20,0.8);
  padding: 0em 0 1.6em;
}
.news {
}
.news h2 {
  width: 100%;
  height: 102px;
  background: url(../sp/img/news.png) 0 65% no-repeat;
  background-size: 100% auto;
}
.news h2 img {
  visibility: hidden;
}
#newsList {
  margin: 0 7%;
  /*background: rgba(0,0,0,0.6);
  padding: 0.5em 0.5em 0.6em;*/
  font-size: 20rem;
  line-height: 1.4;
}
#newsList li {
  margin: 0 0 1em;
}
#newsList li:nth-child(3) {
  margin: 0;
}
#newsList li:nth-child(n+4) {
  display: none;
}
#newsList li .date {
  display: block;
}
.news li em {
  color: #f50;
  font-weight: bold;
  font-style: normal;
}
.news li a {
  color: #f80;
}
.banner {
  width: 638px;
  margin: 0 auto;
}
.banner li {
  position: relative;
  float: left;
  width: 301px;
  height: 87px;
  margin: 0 9px 7px;
}
.banner li.xlarge,
.banner li.large {
  width: 621px;
  height: 93px;
  float: none;
}
.banner .new:after,
.review.new:after {
  content: url(../sp/img/new.png);
  position: absolute;
  top: -7px;
  right: -16px;
  -webkit-animation: blink 2.4s ease-in-out infinite;
  animation: blink 2.4s ease-in-out infinite;
  z-index: 100;
}
.banner a {
  display: block;
  width: 301px;
  height: 87px;
  background-position: 0 0;
  background-repeat: no-repeat;
}
.banner a img {
  display: block;
  width: 301px;
  height: 87px;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.16s linear;
  transition: opacity 0.16s linear;
}
.banner .limited,
.banner .limited img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_limited.png);
}
.banner .twi_bnr,
.banner .twi_bnr img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_twitter.png);
}
.banner .spcial_pgm,
.banner .spcial_pgm img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_live.png);
}
.banner .live02,
.banner .live02 img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_live02.png);
}
.banner .countdown,
.banner .countdown img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_countdown.png);
}
.banner .information,
.banner .information img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_information.png);
}
.banner .information02,
.banner .information02 img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_information02.png);
}
.banner .banner_dlc,
.banner .banner_dlc img {
  width: 621px;
  height: 93px;
  background-image: url(../sp/img/banner_information.png);
}
.banner .review a,
.banner .review a img {
  width: 621px;
  height: 93px;
  opacity: 1;
}
.review {
  position: relative;
  width: 621px;
  height: 93px;
  margin: 0 auto 6px;
}
/***********************************
コンテンツ
***********************************/
#top .wrap {
  position: relative;
  z-index: 10;
}
article {
  position: relative;
  margin: 0 auto;
  z-index: 12;
}
.detailBtn {
  position: absolute;
  right: 4%;
  width: 309px;
  height: 57px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 15;
}
.detailBtn img {
  display: block;
  width: 309px;
  height: 57px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

/***********************************
ストーリー
***********************************/
#topWorld {
  padding: 160px 0 0;
}
#topWorld article {
  height: 52.23vw;
  padding: 44px 0 0;
  background: url(../img/top_world_img01.png) 50% 50% no-repeat;
  background-size: 100% auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#topWorld article #tpwdTxt {
  display: block;
  width: 77%;
  margin: 0 auto;
}
#topWorld .detailBtn {
  top: 91.5%;
  opacity: 0;
  -webkit-transform: translate(-10%,0);
  -ms-transform: translate(-10%,0);
  transform: translate(-10%,0);
  -webkit-transition: all 0.8s ease-out 1.8s;
  transition: all 0.8s ease-out 1.8s;
}
#topWorld .detailBtn,
#topWorld .detailBtn img {
  background-image: url(../img/top_world_btn.png);
}
.js #topWorld article,
.js #tpwdTxt,
.js #topWorld .detailBtn {
  opacity: 0;
}
#topWorld.view article {
  -webkit-animation: fadeIn 0.6s linear both;
  animation: fadeIn 0.6s linear both;
}
#topWorld.view #tpwdTxt {
  -webkit-animation: fadeIn 1s linear 1s both;
  animation: fadeIn 1s linear 1s both;
}
#topWorld.view .detailBtn {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}

/***********************************
キャラクター
***********************************/
#topCharacter {
  padding: 50px 0 0;
  margin: 0;
}
#topCharacter article {
  position: relative;
  width: 100%;
  height: 116vw;
}
#topCharacter article img {
  position: absolute;
  top: 0;
  left: 50%;
}
#topCharacter .amalie_bg {
  top: 31.5%;
  margin-left: 13.1%;
  width: 45vw;
  height: auto;
}
#topCharacter .chelka_bg {
  top: 46.3%;
  margin-left: -59%;
  width: 54.7vw;
  height: auto;
}
#topCharacter .amalie_n {
  top: 39.6%;
  margin-left: 26.4%;
  z-index: 2;
  width: 21.6vw;
  height: auto;
}
#topCharacter .chelka_n {
  top: 54.8%;
  margin-left: -46%;
  z-index: 2;
  width: 18.7vw;
  height: auto;
}
#topCharacter .amalie {
  top: 28%;
  margin-left: -8%;
  width: 41.7vw;
  height: auto;
}
#topCharacter .chelka {
  top: 37%;
  margin-left: -39%;
  width: 52.58vw;
  height: auto;
}
#topCharacter .amalie_s {
  top: 54.8%;
  margin-left: 22%;
  width: 30.2vw;
  height: auto;
}
#topCharacter .chelka_s {
  top: 71.5%;
  margin-left: -49.5%;
  width: 39.5vw;
  height: auto;
}
#topCharacter .detailBtn {
  top: 85%;
  margin-left: 20%;
}
#topCharacter .detailBtn,
#topCharacter .detailBtn img {
  background-image: url(../img/top_character_btn.png);
}

#topCharacter article #tcBg {
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/top_character_bg.png) 45% 50% no-repeat;
  background-size: 150% auto;
  z-index: -1;
}
.js #topCharacter #tcBg {
  opacity: 0;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95);
  -webkit-transform-origin: 50% 70%;
  -ms-transform-origin: 50% 70%;
  transform-origin: 50% 70%;
}

.js #topCharacter .chelka_bg {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 80% 50%;
  -ms-transform-origin: 80% 50%;
  transform-origin: 80% 50%;
}
.js #topCharacter .chelka_n {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 65% 50%;
  -ms-transform-origin: 65% 50%;
  transform-origin: 65% 50%;
}
.js #topCharacter .amalie_bg {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 20% 50%;
  -ms-transform-origin: 20% 50%;
  transform-origin: 20% 50%;
}
.js #topCharacter .amalie_n {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 35% 50%;
  -ms-transform-origin: 35% 50%;
  transform-origin: 35% 50%;
}
.js #topCharacter .chelka {
  -webkit-transform: translate(40px,0);
  -ms-transform: translate(40px,0);
  transform: translate(40px,0);
  opacity: 0;
}
.js #topCharacter .amalie {
  -webkit-transform: translate(-40px,0);
  -ms-transform: translate(-40px,0);
  transform: translate(-40px,0);
  opacity: 0;
}
.js #topCharacter .chelka_s {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: 170% 50%;
  -ms-transform-origin: 170% 50%;
  transform-origin: 170% 50%;
  opacity: 0;
}
.js #topCharacter .amalie_s {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: -70% 50%;
  -ms-transform-origin: -70% 50%;
  transform-origin: -70% 50%;
  opacity: 0;
}
.js #topCharacter .detailBtn {
  opacity: 0;
  -webkit-transform: translate(-20px,0);
  -ms-transform: translate(-20px,0);
  transform: translate(-20px,0);
}

/***********************************
システム
***********************************/
#topSystem {
  height: 230vw;
  padding: 100px 0 0;
  margin: 0 0 -100px;
}
#topSystem article {
  height: 100%;
}
#topSystem article > img {
  display: block;
  position: absolute;
  top: 0; left: 50%;
}
#topSystem .sys1_txt {
  top: 0;
  margin-left: -23.3%;
  z-index: 3;
  width: 70vw;
}
#topSystem .sys1_ss {
  top: 4%;
  margin-left: -53.3%;
  width: 58vw;
}
#topSystem .sys1_img {
  top: 5.4%;
  margin-left: -2%;
  width: 65vw;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#topSystem .sys2_txt {
  top: 33%;
  margin-left: -46%;
  width: 70vw;
}
#topSystem .sys2_ss {
  top: 38.2%;
  margin-left: -7%;
  width: 55vw;
}
#topSystem .sys2_img {
  top: 34.3%;
  margin-left: -72%;
  width: 65vw;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#topSystem .sys3_txt {
  top: 64%;
  margin-left: -16%;
  z-index: 3;
  width: 58vw;
}
#topSystem .sys3_ss {
  top: 69%;
  margin-left: -48.5%;
  width: 54vw;
}
#topSystem .sys3_img {
  top: 68%;
  margin-left: 6%;
  width: 65vw;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
#topSystem .detailBtn {
  top: 92%;
  margin-left: -40%;
  z-index: 100;
}
#topSystem .detailBtn,
#topSystem .detailBtn img {
  background-image: url(../img/top_system_btn.png);
}
.js #topSystem .sys1_txt {
  -webkit-transform: translate(200%,66%);
  -ms-transform: translate(200%,66%);
  transform: translate(200%,66%);
  opacity: 0;
}
.js #topSystem .sys1_ss {
  -webkit-transform: translate(-200%,0) scale(1.8);
  -ms-transform: translate(-200%,0) scale(1.8);
  transform: translate(-200%,0) scale(1.8);
  -webkit-transform-origin: 50% 33%;
  -ms-transform-origin: 50% 33%;
  transform-origin: 50% 33%;
  opacity: 0;
}
.js #topSystem .sys2_txt {
  -webkit-transform: translate(-200%,10%);
  -ms-transform: translate(-200%,10%);
  transform: translate(-200%,10%);
  opacity: 0;
}
.js #topSystem .sys2_ss {
  -webkit-transform: translate(200%,0) scale(1.2);
  -ms-transform: translate(200%,0) scale(1.2);
  transform: translate(200%,0) scale(1.2);
  opacity: 0;
}
.js #topSystem .sys3_txt {
  -webkit-transform: translate(200%,20%);
  -ms-transform: translate(200%,20%);
  transform: translate(200%,20%);
  opacity: 0;
}
.js #topSystem .sys3_ss {
  -webkit-transform: translate(-200%,0) scale(1.2);
  -ms-transform: translate(-200%,0) scale(1.2);
  transform: translate(-200%,0) scale(1.2);
  opacity: 0;
}
.js #topSystem .detailBtn {
  opacity: 0;
  -webkit-transform: translate(-20px,0);
  -ms-transform: translate(-20px,0);
  transform: translate(-20px,0);
}