@charset "utf-8";

[class|="sp"] {
  display: none !important;
}
/*html.js {
height: 100%;
overflow: hidden;
}*/
#top {
  background: #000;
}
.news_bg,
.banner,
.review {
  opacity: 0;
  -webkit-transform: translate(0,20px);
  -ms-transform: translate(0,20px);
  transform: translate(0,20px);
}
#bgCover,
#headCover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 130vh;
  z-index: 5;
}
#top #bgCover,
#top #headCover {
  background: #000;
}
#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 h1 {
  position: absolute;
  top: 207px;
  right: 0%;
  left: 0%;
  width: 476px;
  height: 153px;
  margin: 0 auto;
  z-index: 10;
  -webkit-animation: h1_fadeIn 1s linear 1.1s backwards;
  animation: h1_fadeIn 1s linear 1.1s backwards;
}
header h1.noAnim {
  -webkit-transform: translate(0) scale(1);
  -ms-transform: translate(0) scale(1);
  transform: translate(0) scale(1);
  -webkit-animation: none;
  animation: none;
}
/*.js header h1 {
}*/
@-webkit-keyframes h1_fadeIn {
  0% { opacity: 0; -webkit-transform: translate(0,20px) scale(1); transform: translate(0,20px) scale(1);}
  100% { opacity: 1; -webkit-transform: translate(0,0px) scale(1); transform: translate(0,0px) scale(1);}
}
@keyframes h1_fadeIn {
  0% { opacity: 0; -webkit-transform: translate(0,20px) scale(1); transform: translate(0,20px) scale(1);}
  100% { opacity: 1; -webkit-transform: translate(0,0px) scale(1); transform: translate(0,0px) scale(1);}
}
header h1 img {
  width: 100%;
  height: auto;
}
.release {
  position: absolute;
  top: 356px;
  right: 0%;
  left: 0%;
  width: 271px;
  height: 47px;
  margin: 0 auto;
  z-index: 10;
  opacity: 1;
  -webkit-animation: releaseAnim 0.4s linear 4.5s both;
  animation: releaseAnim 0.4s linear 4.5s both;
}
.release:after {
  content: url(../img/release.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 271px;
  height: 47px;
  z-index: 7;
  opacity: 0;
  -webkit-animation: release_afterAnim 0.8s cubic-bezier(.02, .01, .47, 1) 5.3s forwards;
  animation: release_afterAnim 0.8s cubic-bezier(.02, .01, .47, 1) 5.3s forwards;
}
@-webkit-keyframes releaseAnim {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes releaseAnim {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@-webkit-keyframes release_afterAnim {
  0% { opacity: 0.3; -webkit-transform: scale(1); transform: scale(1);}
  100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2);}
}
@keyframes release_afterAnim {
  0% { opacity: 0.3; -webkit-transform: scale(1); transform: scale(1);}
  100% { opacity: 0; -webkit-transform: scale(2); transform: scale(2);}
}
header {
  position: relative;
  height: 800px;
  background: url(../img/bg2.png) 50% 0 no-repeat;
  /*background: url(../img/top_bg2.png) center 0 no-repeat;
  background: url(../img/top_bg.png) center 0 no-repeat;*/
  z-index: 30;
}
.header_bg {
  opacity: 0;
  -webkit-transform: translate(0,-40px);
  -ms-transform: translate(0,-40px);
  transform: translate(0,-40px);
}
.review {
  position: absolute;
  top: 554px;
  right: 0;
  left: 0;
  width: 942px;
  margin: 0 auto;
}
.review a,
.review a img {
  display: block;
  width: 195px;
  height: 128px;
  background: url(../img/banner_review.png) 0 0 no-repeat;
}
.review a img {
  opacity: 0;
  background-position: 0 100%;
  -webkit-transition: opacity 0.06s linear;
  transition: opacity 0.06s linear;
}
.review a:hover img {
  opacity: 1;
}
.news_bg {
  position: relative;
  top: 708px;
  left: 0;
  right: 0;
  width: 1016px;
  min-height: 82px;
  padding: 0 38px;
  margin: 0 auto;
  background: url(../img/news_frame.png) 0 0 no-repeat;
  z-index: 10;
}
.news {
  position: relative;
  top: 16px;
  width: 940px;
  min-height: 46px;
  padding: 2px 0 1px;
  margin: 0 auto;
  background: url(../img/news_frame_middle.png) 0 0 repeat
}
.news:before {
  content: url(../img/news_frame_header.png);
  position: absolute;
  top: -16px;
  left: 0;
  width: 940px;
}
.news:after {
  content: url(../img/news_frame_footer.png);
  position: absolute;
  bottom: -23px;
  left: 0;
  width: 940px;
}
.news h2 {
  position: relative;
  top: 0;
  padding: 0 0 0 22px;
  z-index: 1;
}
#newsTgl {
  position: absolute;
  top: 0px;
  right: 24px;
  width: 95px;
  height: 24px;
  background: url(../img/btn_open.png) no-repeat 100% 0;
  text-indent: -4444em;
  cursor: pointer;
  overflow: hidden;
  z-index: 2;
}
#newsTgl img {
  display: block;
  width: 95px;
  height: 24px;
  background: url(../img/btn_open.png) no-repeat 100% 100%;
  -webkit-transition: opacity 0.16s linear;
  transition: opacity 0.16s linear;
  opacity: 0;
}
#newsTgl.opened {
  background: url(../img/btn_close.png) no-repeat 100% 0;
}
#newsTgl.opened img {
  background: url(../img/btn_close.png) no-repeat 100% 100%;
}
#newsTgl:hover img {
  opacity: 1;
}
.news ul {
  height: 18px;
  color: #fff;
  font-size: 13rem;
  line-height: 1.3;
  padding: 2px 44px 0 24px;
  overflow: hidden;
  -webkit-transition: height 250ms ease-out;
  transition: height 250ms ease-out;
}
.news li {
  position: relative;
  margin: -1px 0 18px 0px;
}
.news li a {
  color: #f80;
  /*color: #e09;*/
  text-decoration: underline;
}
.news li em {
  color: #f50;
  font-weight: bold;
}
.news li a:hover {
  color: #f08;
  text-decoration: none;
}
.news .date {
  position: absolute;
  top: 0;
  left: -86px;
  display: block;
  width: 86px;

}
.banner {
  position: absolute;
  top: 724px;
  left: 0;
  right: 0;
  width: 950px;
  height: 116px;
  margin: 80px auto 0;
}
.banner li {
  position: relative;
  float: left;
  width: 306px;
  height: 87px;
  margin: 0 5px 10px;
}
.banner li.large {
  width: 465px;
  height: 93px;
}
.banner li.xlarge {
  width: 940px;
  height: 93px;
}
.banner li.large:nth-child(odd) {
}
.banner li.large:nth-child(even) {
  float: right;
}
.banner .new:after {
  content: url(../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: 1;
  -webkit-transition: opacity 0.16s linear;
  transition: opacity 0.16s linear;
}
.banner .limited,
.banner .limited img {
  width: 465px;
  height: 93px;
  background-image: url(../img/banner_limited.png);
}
.banner .twi_bnr,
.banner .twi_bnr img {
  width: 465px;
  height: 93px;
  background-image: url(../img/banner_twitter.png);
}
.banner .spcial_pgm,
.banner .spcial_pgm img {
  width: 961px;
  height: 93px;
  background-image: url(../img/banner_live.png);
}
.banner .live02,
.banner .live02 img {
  width: 940px;
  height: 93px;
  background-image: url(../img/banner_live02.png);
}
.banner .countdown,
.banner .countdown img {
  width: 940px;
  height: 93px;
  background-image: url(../img/banner_countdown.png);
}
.banner .information,
.banner .information img {
  width: 940px;
  height: 93px;
  background-image: url(../img/banner_information.png);
}
.banner .information02,
.banner .information02 img {
  width: 940px;
  height: 93px;
  background-image: url(../img/banner_information02.png);
}
.banner .banner_dlc,
.banner .banner_dlc img {
  width: 940px;
  height: 93px;
  background-image: url(../img/banner_information.png);
}
.banner a img:hover {
  opacity: 0;
}

/***********************************
コンテンツ
***********************************/
#top .wrap {
  position: relative;
  z-index: 10;
}
article {
  position: relative;
  margin: 0 auto;
  z-index: 12;
}
.detailBtn {
  position: absolute;
  left: 50%;
  width: 412px;
  height: 75px;
  background-position: 0 0;
  background-repeat: no-repeat;
  z-index: 15;
}
.detailBtn img {
  display: block;
  width: 412px;
  height: 75px;
  background-position: 0 bottom;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.detailBtn img:hover {
  opacity: 1;
}

/***********************************
ストーリー
***********************************/
#topWorld {
  padding: 200px 0 0;
}
#topWorld article {
  width: 1005px;
  height: 580px;
  padding: 105px 0 0 128px;
  background: url(../img/top_world_img01.png) 50% 50% no-repeat;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#topWorld .detailBtn {
  top: 678px;
  opacity: 0;
  -webkit-transform: translate(190px,0);
  -ms-transform: translate(190px,0);
  transform: translate(190px,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(210px,0);
  -ms-transform: translate(210px,0);
  transform: translate(210px,0);
}

/***********************************
キャラクター
***********************************/
#topCharacter {
  padding: 25px 0 0;
  margin: -25px 0 0;
}
#topCharacter article {
  position: relative;
  width: 100%;
  min-width: 1200px;
  height: 1093px;
}
#topCharacter article img {
  position: absolute;
  top: 0;
  left: 50%;
}
#topCharacter .amalie_bg {
  top: 311px;
  margin-left: 134px;
}
#topCharacter .chelka_bg {
  top: 506px;
  margin-left: -556px;
}
#topCharacter .amalie_n {
  top: 402px;
  margin-left: 262px;
  z-index: 2;
}
#topCharacter .chelka_n {
  top: 600px;
  margin-left: -446px;
  z-index: 2;
}
#topCharacter .amalie {
  top: 290px;
  margin-left: -78px;
}
#topCharacter .chelka {
  top: 393px;
  margin-left: -394px;
}
#topCharacter .amalie_s {
  top: 529px;
  margin-left: 232px;
}
#topCharacter .chelka_s {
  top: 721px;
  margin-left: -516px;
}
#topCharacter .detailBtn {
  top: 908px;
  margin-left: 62px;
}
#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) 50% 50% no-repeat;
  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: 1960px;
  padding: 100px 0 0;
  margin: 0 0 -100px;
}
#topSystem article > img {
  position: absolute;
  top: 0; left: 50%;
}
#topSystem .sys1_txt {
  top: 0;
  margin-left: -240px;
  z-index: 3;
}
#topSystem .sys1_ss {
  top: 84px;
  margin-left: -486px;
}
#topSystem .sys1_img {
  top: 90px;
  margin-left: -20px;
}
#topSystem .sys2_txt {
  top: 520px;
  margin-left: -460px;
}
#topSystem .sys2_ss {
  top: 630px;
  margin-left: -90px;
}
#topSystem .sys2_img {
  top: 570px;
  margin-left: -630px;
}
#topSystem .sys3_txt {
  top: 1050px;
  margin-left: -190px;
  z-index: 3;
}
#topSystem .sys3_ss {
  top: 1134px;
  margin-left: -502px;
}
#topSystem .sys3_img {
  top: 1108px;
  margin-left: 20px;
}
#topSystem .detailBtn {
  top: 1790px;
  margin-left: -380px;
  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);
}

/*.bgMC_wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}*/

.bgMC_wrap {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1920px;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
#bgMC {
  position: absolute;
  top: 0;
  right: -50vw;
  bottom: 0;
  left: -50vw;
  display: block;
  width: 177.778vh;
  height: 100vh;
  min-height: 56.25vw;
  margin: auto;
  opacity: 0;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
#bgMC.canplay {
  opacity: 1;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}
.mobile #bgMC {
  display: none;
}