@charset "utf-8";

body {
  overflow: hidden;
  background: url(../img/bg_footer_pattern.jpg) 50% 102% no-repeat, url(../img/bg.png) 50% 0;
  font: 10rem/1 "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
  color: #fff;
}
.loading body {
  height: 100vh;
}
.mac body, .safari body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; }

#wrapper {
  background: url(../img/bg_package.jpg) 50% 0 no-repeat;
}

#gloNav {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 85px;
  background: url(../img/bg_header.png) 50% 0 no-repeat;
  z-index: 1000;
  -webkit-transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.loading #gloNav {
  -webkit-transform: translate(0, -100px);
  -ms-transform: translate(0, -100px);
  transform: translate(0, -100px);
}
#gloNav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 960px;
  padding: 4px 0 0;
  margin: 0 auto;
}
#gloNav li {
  position: relative;
}
#gloNav li.new:after {
  position: absolute;
  top: -4px;
  right: -4px;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
}
/*#gloNav li.new:after {
  position: absolute;
  bottom: -20px;
  right: 0;
  left: 0;
  margin: 0 auto;
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}*/
#gloNav a {
  position: relative;
  display: block;
  height: 64px;
  background: 0 0 no-repeat;
}
#gloNav a img {
  height: 64px;
  opacity: 0;  
}
#gloNav a:hover {
  top: -2px;
  background-position: 0 100%;
}
#gloNav a.gray:hover {
  top: 0;
}
/*#gloNav a:hover img {
  opacity: 1;
}*/
#gloNav .top,
#gloNav .top img {
  width: 74px;
  background-image: url(../img/nav_top.png);
}
#gloNav .about,
#gloNav .about img {
  width: 121px;
  background-image: url(../img/nav_about.png);
}
#gloNav .story,
#gloNav .story img {
  width: 109px;
  background-image: url(../img/nav_story.png);
}
#gloNav .character,
#gloNav .character img {
  width: 186px;
  background-image: url(../img/nav_character.png);
}
#gloNav .system,
#gloNav .system img {
  width: 140px;
  height: 63px;
  background-image: url(../img/nav_system.png);
}
#gloNav .movie,
#gloNav .movie img {
  width: 118px;
  height: 63px;
  background-image: url(../img/nav_movie.png);
}
#gloNav .movie.gray {
  background-image: url(../img/nav_movie_gray.png);
}
#gloNav .sns_btn {
  position: absolute;
  top: 11px;
  left: -webkit-calc(50% + 490px);
  left: calc(50% + 490px);
}
#gloNav .sns_btn #tweet {
  margin: 0 0 2px;
}

header {
  position: relative;
  width: 960px;
  height: 1320px;
  margin: 0 auto;
  padding: 502px 0 0;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
header h1 {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s;
}
header .release {
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;
}
.loading header h1 {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  opacity: 0;
}
.loading header .release {
  -webkit-transform: translate(0, 20px);
  -ms-transform: translate(0, 20px);
  transform: translate(0, 20px);
  opacity: 0;
}
header .catch {
  position: absolute;
  top: 396px;
  left: -126px;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.4s;
  -o-transition: all 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.4s;
  transition: all 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19) 2.4s;
  -webkit-transform-origin: -50% 83%;
  -ms-transform-origin: -50% 83%;
  transform-origin: -50% 83%;
}
.loading header .catch {
  opacity: 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
.banner {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 960px;
  margin: 0 auto 12px;
  z-index: 2;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 2.1s;
}
.loading header .banner {
  opacity: 0;
}
.banner li {
  position: relative;
  width: 320px;
  height: 97px;
  margin: 0 5px 10px;
}
.banner .new:after {
  content: url(../../psVita/img/common/new.png);
  position: absolute;
  top: -5px;
  left: -8px;
  -webkit-animation: blink 3.5s ease-in-out infinite;
  animation: blink 3.5s ease-in-out infinite;
  z-index: 100;
}
.banner a {
  display: block;
  width: 322px;
  height: 104px;
  background: 0 0 no-repeat;
}
.banner a img {
  display: block;
  width: 322px;
  height: 104px;
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.banner a img:hover {
  opacity: 1;
}
.banner .n1shop,
.banner .n1shop img {
  background-image: url(../img/bnr_n1shop.png);
}
.banner .rtcampaign,
.banner .rtcampaign img {
  background-image: url(../img/bnr_rtcampaign.png);
}
.amazon_bnr {
  position: absolute;
  top: 620px;
  right: -20px;
  display: block;
  width: 201px;
  height: 180px;
  background: url(../img/bnr_amazon.png) 0 0 no-repeat;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 50% 70%;
  -ms-transform-origin: 50% 70%;
  transform-origin: 50% 70%;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3s;
}
.amazon_bnr img {
  display: block;
  width: 201px;
  height: 180px;
  background: url(../img/bnr_amazon.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.amazon_bnr:hover img {
  opacity: 1;
}
.loading .amazon_bnr {
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
.bnr_15outgoing {
  position: absolute;
  top: 635px;
  left: -webkit-calc(50% - 500px);
  left: calc(50% - 500px);
  display: block;
  width: 191px;
  height: 159px;
  background: url(../../img/bnr_15outgoing.png) 0 0 no-repeat;
  z-index: 10;
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transform-origin: 50% 70%;
  -ms-transform-origin: 50% 70%;
  transform-origin: 50% 70%;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.6s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.6s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.6s;
}
.loading .bnr_15outgoing {
  opacity: 0;
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
.bnr_15outgoing img {
  width: 191px;
  height: 159px;
  background: url(../../img/bnr_15outgoing.png) 0 -158px no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.bnr_15outgoing:hover img {
  opacity: 1;
}
.arrow_down {
  display: block;
  width: 60px;
  margin: 0 auto;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
  -webkit-transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 3.9s;
  -o-transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 3.9s;
  transition: all 0.9s cubic-bezier(0.215, 0.61, 0.355, 1) 3.9s;
}
.loading .arrow_down {
  -webkit-transform: translate(0, -40px);
  -ms-transform: translate(0, -40px);
  transform: translate(0, -40px);
  opacity: 0;
}
.arrow_down:hover img {
  -webkit-filter: brightness(1.2);
  filter: brightness(1.2);
}
header #bgmVol {
  position: absolute;
  top: 75px;
  right: 0;
  width: 87px;
  height: 30px;
  background: url(../img/bgm_vol.png) 0 0 no-repeat;
  z-index: 100;
  -webkit-transition: opacity 0.6s linear;
  -o-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
}
.loading #bgmVol {
  opacity: 0;
}
header #bgmVol.small {
  background-position: 0 -30px;
}
header #bgmVol.middle {
  background-position: 0 -60px;
}
header #bgmVol.large {
  background-position: 0 -90px;
}
header #bgmVol .btnIcon {
  float: left;
  width: 57px;
  height: 30px;
}
header #bgmVol .volume {
  width: 30px;
  height: 30px;
}
#news_box {
  position: absolute;
  top: 155px;
  right: 0;
  width: 348px;
  height: 295px;
  overflow: hidden;
  z-index: 100;
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.3s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.3s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 3.3s;
}
.loading #news_box {
  opacity: 0;
  right: 40px;
}
#news_box .news {
  width: 348px;
  height: 295px;
  padding: 54px 14px 0 28px;
  background: url(../img/bg_news.png) 0 0 no-repeat;
  text-align: left;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-transform: translate(2px,0);
  -ms-transform: translate(2px,0);
  transform: translate(2px,0);
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
}
#news_box.close .news {
  -webkit-transform: translate(352px,0);
  -ms-transform: translate(352px,0);
  transform: translate(352px,0);
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#news_box .newsWrap {
  height: 220px;
}
#news_box #newsList li {
  margin: 0 0 0.9em;
  font-size: 14rem;
  line-height: 1.3;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
#news_box #newsTgl {
  position: absolute;
  top: 0; right: 4px;
  display: block;
  width: 230px;
  height: 62px;
  -webkit-transform: translate(350px,0);
  -ms-transform: translate(350px,0);
  transform: translate(350px,0);
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#news_box.close #newsTgl {
  -webkit-transform: translate(0px,0);
  -ms-transform: translate(0px,0);
  transform: translate(0px,0);
  -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
  -o-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
  transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0.75s;
}
#news_box #newsTgl img {
  display: block;
  width: 230px;
  height: 62px;
  background: url(../img/btn_news_tgl.png) 0 0 no-repeat;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
#news_box #newsTgl:hover img {
  -webkit-filter: brightness(1.3);
  filter: brightness(1.3);
}
#news_box b {
  color: #e60012;
}

.content {
  padding: 280px 0 0;
}
.content > div {
  position: relative;
  width: 960px;
  margin: 0 auto 250px;
  text-align: center;
}
.content section {
  position: relative;
  z-index: 50;
}
.content section h2 {
  width: 363px;
  margin: 0 0 2px;
}
.content section h2.new:after {
  top: -16px;
  left: 300px;
}
.content section h2 img {
  height: 92px;
}
.content #about {
}
.content #about .pop {
  position: absolute;
  top: 412px; left: 0; right: 0;
  width: 528px;
  margin: 0 auto;
}
.right_back,
.left_back {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
}
.visible .right_back,
.visible .left_back {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.right_back, .left_back {
  -webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.content #about p img {
  height: 662px;
}
.content #about .right_back {
  position: absolute;
  top: -132px;
  left: -webkit-calc(50% + 104px);
  left: calc(50% + 104px);
  width: 908px;
  height: 954px;
  background: url(../img/bg_ink_fix01.png) 0 0 no-repeat;
  -webkit-transform-origin: -20% 50%;
  -ms-transform-origin: -20% 50%;
  transform-origin: -20% 50%;
}
.content #about .right_back img.facet {
  position: relative;
  top: -150px;
  left: -51px;
  width: 797px;
  height: 884px;
}
.content #about .left_back {
  position: absolute;
  top: 340px;
  right: -webkit-calc(50% + 326px);
  right: calc(50% + 326px);
  width: 992px;
  height: 957px;
  background: url(../img/bg_ink_fix02.png) 0 0 no-repeat;
  -webkit-transform-origin: 120% 50%;
  -ms-transform-origin: 120% 50%;
  transform-origin: 120% 50%;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.content #about .left_back img.facet {
  position:  relative;
  top: -141px;
  left: 142px;
  width: 803px;
  height: 928px;
}
.content #story p img {
  height: 632px;
}
.content #story .right_back {
  position: absolute;
  top: 200px;
  left: -webkit-calc(50% + 150px);
  left: calc(50% + 150px);
  width: 1038px;
  height: 979px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 60% 100%;
  -ms-transform-origin: 60% 100%;
  transform-origin: 60% 100%;
}
.content #story .right_back img.facet {
  position: relative;
  top: -420px;
  left: -45px;
  display: block;
  width: 601px;
  height: 866px;
}
.content #story .left_back {
  position: absolute;
  top: 432px;
  right: -webkit-calc(50% + 340px);
  right: calc(50% + 340px);
  width: 833px;
  height: 951px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 30% 100%;
  -ms-transform-origin: 30% 100%;
  transform-origin: 30% 100%;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.content #story .left_back img.facet {
  position:  relative;
  top: -50px;
  left: 332px;
  display: block;
  width: 776px;
  height: 844px;
}
.content #character section h2 {
  margin: 0 0 -7px;
}
.content #character .character_img {
  position: relative;
  height: 805px;
  z-index: 10;
}
.content #character p {
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  margin: 0;
}
.content #character p img {
  display: block;
  position: absolute;
  opacity: 1;
  -webkit-transition: all 0.7s linear;
  -o-transition: all 0.7s linear;
  transition: all 0.7s linear;
  opacity: 0;
  -webkit-filter: brightness(0.5) contrast(2);
  filter: brightness(0.5) contrast(2);
}
.content #character.visible p img {
  opacity: 1;
  -webkit-filter: brightness(1) contrast(1);
  filter: brightness(1) contrast(1);
}
.content #character p img.txt_chara01 {
  top: 214px;
  right: -webkit-calc(50% - 36px);
  right: calc(50% - 36px);
  height: 174px;
}
.content #character p img.txt_chara02 {
  top: 381px;
  left: -webkit-calc(50% + 77px);
  left: calc(50% + 77px);
  height: 210px;
  -webkit-transition-delay: 0.75s;
  -o-transition-delay: 0.75s;
  transition-delay: 0.75s;
}
.content #character p img.txt_chara03 {
  top: 600px;
  left: -webkit-calc(50% + 60px);
  left: calc(50% + 60px);
  height: 196px;
  -webkit-transition-delay: 1.5s;
  -o-transition-delay: 1.5s;
  transition-delay: 1.5s;
}
.content #system > section > div {
  position: relative;
  margin: 0 0 40px;
}
.content #system > section > div.new:after {
  top: -4px;
  left: 88px;
}
.content #system .doll p img {
  height: 487px;
}
.content #system .pop_images {
  position: absolute;
  left: 0; right: 0;
  width: 692px;
  margin: 0 auto;
}
.content #system .doll .pop_images {
  top: 252px;
}
.content #system .rekitei_skill .pop_images {
  top: 460px;
}
.content #system .rekitei_skill .pop.skill03 {
  position: absolute;
  top: 688px;
  left: 490px;
}
.content #system .treasure .pop_images {
  top: 413px;
}
.content #system .right_back {
  position: absolute;
  top: -128px;
  left: -webkit-calc(50% + 293px);
  left: calc(50% + 293px);
  width: 794px;
  height: 1015px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 60% 60%;
  -ms-transform-origin: 60% 60%;
  transform-origin: 60% 60%;
}
.content #system .right_back img.facet {
  position: relative;
  top: -184px;
  left: -125px;
  width: 666px;
  height: 944px;
}
.content #system .left_back {
  position: absolute;
  top: 62px;
  right: -webkit-calc(50% + 282px);
  right: calc(50% + 282px);
  width: 891px;
  height: 858px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 50% 40%;
  -ms-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.content #system .left_back img.facet {
  position: relative;
  top: 148px;
  left: 88px;
  width: 598px;
  height: 877px;
}
.content #system .right_back2 {
  position: absolute;
  top: 1122px;
  left: -webkit-calc(50% + 325px);
  left: calc(50% + 325px);
  width: 736px;
  height: 906px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 60% 60%;
  -ms-transform-origin: 60% 60%;
  transform-origin: 60% 60%;
}
.content #system .right_back2 img.facet {
  position: relative;
  top: -84px;
  left: -125px;
  width: 617px;
  height: 899px;
}
.content #system .left_back2 {
  position: absolute;
  top: 1378px;
  right: -webkit-calc(50% + 282px);
  right: calc(50% + 282px);
  width: 840px;
  height: 930px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 50% 40%;
  -ms-transform-origin: 50% 40%;
  transform-origin: 50% 40%;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.content #system .left_back2 img.facet {
  position:  relative;
  top: 148px;
  left: 168px;
  width: 699px;
  height: 948px;
}
#movie {
  height: 780px;
}
.mv_list li {
  position: absolute;
  width: 564px;
}
#movie .mv_list li:first-child {
  top: 110px;
  right: 0;
  opacity: 0;
  -webkit-transform: perspective(1000px) scale(0.9) translate3d(-1200px,-120px,-1000px) rotateX(4deg) rotateY(-25deg) rotateZ(5deg);
  transform: perspective(1000px) scale(0.9) translate3d(-1200px,-120px,-1000px) rotateX(4deg) rotateY(-25deg) rotateZ(5deg);
  -webkit-transition: all 0.6s ease 0.8s;
  -o-transition: all 0.6s ease 0.8s;
  transition: all 0.6s ease 0.8s;
}
#movie.visible .mv_list li:first-child {
  opacity: 1;
  -webkit-transform: perspective(1000px) scale(0.9) rotateX(4deg) rotateY(-25deg) rotateZ(5deg);
  transform: perspective(1000px) scale(0.9) rotateX(4deg) rotateY(-25deg) rotateZ(5deg);
}
#movie .mv_list li:nth-child(2) {
  top: 440px;
  left: 0;
  opacity: 0;
  -webkit-transform: perspective(1000px) scale(0.9) translate3d(1200px,-20px,-700px) rotateX(4deg) rotateY(23deg) rotateZ(-2deg);
  transform: perspective(1000px) scale(0.9) translate3d(1200px,-20px,-700px) rotateX(4deg) rotateY(23deg) rotateZ(-2deg);
  -webkit-transition: all 0.6s ease 1.3s;
  -o-transition: all 0.6s ease 1.3s;
  transition: all 0.6s ease 1.3s;
}
#movie.visible .mv_list li:nth-child(2) {
  opacity: 1;
  -webkit-transform: perspective(1000px) scale(0.9) rotateX(4deg) rotateY(23deg) rotateZ(-2deg);
  transform: perspective(1000px) scale(0.9) rotateX(4deg) rotateY(23deg) rotateZ(-2deg);
}
.mv_list li.new:after {
  content: url(../img/new.png);
  position: absolute;
  top: -14px;
  right: 11px;
  display: block;
  width: 55px;
  height: 26px;
  -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;
  z-index: 100;
}
.content .mv_list h3 {
  height: 59px;
  text-align: center;
}
.content .mv_list h3 img {
  width: auto;
  height: 54px;
}
.mv_list .play_btn {
  position: relative;
  display: block;
}
.mv_list .play_btn:after {
  content: url(../img/movie_on.png);
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 560px;
  height: 315px;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.mv_list .mv_obj {
  width: 560px;
  height: 315px;
  border: 2px solid #e60012;
  background: #000 url(../img/loading.gif) 50% 50% no-repeat;
  -webkit-box-shadow: 3px 3px 10px 3px rgba(122,76,28,0.5);
  box-shadow: 3px 3px 10px 3px rgba(122,76,28,0.5);
}
.content #movie .right_back {
  position: absolute;
  top: 348px;
  right: -webkit-calc(50% + 182px);
  right: calc(50% + 182px);
  width: 1014px;
  height: 919px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: 120% 60%;
  -ms-transform-origin: 120% 60%;
  transform-origin: 120% 60%;
}
.content #movie .right_back img.facet {
  position: relative;
  top: -554px;
  left: -35px;
  width: 602px;
  height: 1000px;
}
.content #movie .left_back {
  position: absolute;
  top: 272px;
  left: -webkit-calc(50% - 66px);
  left: calc(50% - 66px);
  width: 908px;
  height: 752px;
  background: 0 0 no-repeat;
  -webkit-transform-origin: -20% 20%;
  -ms-transform-origin: -20% 20%;
  transform-origin: -20% 20%;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.content #movie .left_back img.facet {
  position:  relative;
  top: -212px;
  left: 258px;
  width: 729px;
  height: 767px;
}

.content > div.detail_btn {
  margin: -120px auto 180px;
}
.detail_btn a {
  display: block;
  width: 466px;
  height: 155px;
  margin: 0 auto;
  background: url(../img/btn_detail.png) 0 0 no-repeat;
}
.detail_btn img {
  display: block;
  width: 466px;
  height: 155px;
  background: url(../img/btn_detail.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
.detail_btn:hover img {
  opacity: 1;
}

#pagetop {
  position: fixed;
  right: auto;
  left: 50%;
  margin-left: 490px;
  bottom: -1000px;
  width: 140px;
  height: 175px;
  background: url(../img/btn_to_top.png) no-repeat 0 0;
  color: transparent;
  text-indent: -4444em;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: opacity 500ms linear, bottom 10ms linear 510ms;
  -o-transition: opacity 500ms linear, bottom 10ms linear 510ms;
  transition: opacity 500ms linear, bottom 10ms linear 510ms;
  z-index: 100;
}
#pagetop.show {
  opacity: 1;
  bottom: 40px;
  -webkit-transition: opacity 500ms linear, bottom 10ms linear;
  -o-transition: opacity 500ms linear, bottom 10ms linear;
  transition: opacity 500ms linear, bottom 10ms linear;
}
#pagetop.show.bottom {
  position: absolute;
}
#pagetop img {
  display: block;
  width: 140px;
  height: 175px;
  background: url(../img/btn_to_top.png) no-repeat 0 100%;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
#pagetop:hover img {
  opacity: 1;
}

.footer_bg {
  position: relative;
  height: 430px;
  margin: -50px 0 0;
  z-index: 10;
  padding: 34px 0 0;
  background: url(../img/bg_footer.png) no-repeat 50% 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
footer {
  width: 960px;
  padding: 0 0 12px;
  margin: 0 auto;
}
.spec {
  width: 966px;
  margin: 0 -3px 20px;
  padding: 0 0 10px;
  text-align: center;
  border-bottom: 1px solid #fff;
}
.footer_bg .btns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.footer_bg .btns li {
  background: #fff;
  margin: 0 6px;
  line-height: 0;
  vertical-align: top;
}
.footer_bg li a:hover {
  opacity: 0.85;
}

footer .sns {
  margin: -8px 0 0 8px;
  float: left;
  height: 39px;
}
.footer_bg footer .sns li {
  float: left;
  height: 34px;
  margin: 0;
  padding: 5px 0 0;
}
footer .sns li:not(:last-child) {
  padding-right: 28px;
  background: url(../img/footer_navi_slash.png) 94% 5px no-repeat;
}
footer .sns a,
footer .sns a img {
  background-repeat: no-repeat;
}
footer .sns a {
  display: block;
  background-position: 0 0;
}
footer .sns a img {
  background-position: 0 100%;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
footer .sns a:hover img {
  opacity: 1;
}

footer .sns .blog a,
footer .sns .blog a img {
  width: 140px;
  height: 23px;
  background-image: url(../img/footer_navi_blog.png);
}
footer .sns .twitter a,
footer .sns .twitter a img {
  width: 171px;
  height: 19px;
  background-image: url(../img/footer_navi_twitter.png);
}
footer .sns .facebook a,
footer .sns .facebook a img {
  width: 197px;
  height: 19px;
  background-image: url(../img/footer_navi_facebook.png);
}

.copy {
  text-align: right;
  font-size: 12rem;
  line-height: 1.3;
  margin: 0;
}
.site_top_btn {
  float: left;
  display: block;
  width: 320px;
  height: 97px;
  background: url(../img/btn_portal.png) no-repeat 0 0;
  -webkit-tap-highlight-color: transparent;
}
.site_top_btn img {
  display: block;
  width: 320px;
  height: 97px;
  background: url(../img/btn_portal.png) no-repeat 0 100%;
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  -o-transition: opacity 0.1s linear;
  transition: opacity 0.1s linear;
}
.site_top_btn:hover img {
  opacity: 1;
}
.load_box {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #000;
  z-index: 10000;
  -webkit-transition: opacity 0.6s linear;
  -o-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
}
html:not(.loading) .load_box,
html.bgmCheck .load_box {
  pointer-events: none;
  opacity: 0;
}
.load_box:before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 105px;
  height: 179px;
  background: url(../img/loading.png) 0 0 no-repeat;
}
.load_box:after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 237px;
  height: 48px;
  background: url(../img/txt_loading.png) 0 0 no-repeat;
}
.load_box img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 105px;
  height: 179px;
  background: url(../img/loading.png) 0 100% no-repeat;
  opacity: 0;
  -webkit-animation: loadingAnim 1.2s ease-in-out infinite alternate both;
  animation: loadingAnim 1.2s ease-in-out infinite alternate both;
}
.bgm_check_box {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  padding: 42vh 0 0;
  opacity: 1;
}
html:not(.bgmCheck) .bgm_check_box {
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.6s linear;
  -o-transition: opacity 0.6s linear;
  transition: opacity 0.6s linear;
}
.bgm_check_box p {
  margin: 0 0 30px;
  text-align: center;
}
.bgm_check_box ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.bgm_check_box ul li {
  margin: 0 30px;
}
.bgm_check_box ul li a {
  display: block;
  width: 234px;
  height: 74px;
  background: 0 0 no-repeat;
  cursor: pointer;
}
.bgm_check_box ul li a img {
  display: block;
  width: 234px;
  height: 74px;
  background: 0 100% no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.bgm_check_box ul li a:hover img {
  opacity: 1;
}
.bgm_check_box ul li a#play,
.bgm_check_box ul li a#play img {
  background-image: url(../img/btn_play.png);
}
.bgm_check_box ul li a#notPlay,
.bgm_check_box ul li a#notPlay img {
  background-image: url(../img/btn_not_play.png);
}
/*===========================*/
@-webkit-keyframes loadingAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes loadingAnim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@-webkit-keyframes fade-out {
  0% { display: block; opacity: 1;}
  1% { display: block; opacity: 1;}
  100% { display: none; opacity: 0;}
}
@keyframes fade-out {
  0% { display: block; opacity: 1;}
  1% { display: block; opacity: 1;}
  100% { display: none; opacity: 0;}
}

@media screen and (max-width: 1024px) {
  #gloNav .sns_btn {
    display: none;
  }
  header .catch {
    position: absolute;
    top: 396px;
    left: -9px;
  }
  .content #about .right_back {
    left: -webkit-calc(50% + 44px);
    left: calc(50% + 44px);
  }
  .content #about .left_back {
    right: -webkit-calc(50% + 256px);
    right: calc(50% + 256px);
  }
  .content #story .right_back {
    left: -webkit-calc(50% + 100px);
    left: calc(50% + 100px);
  }
  .content #story .left_back {
    right: -webkit-calc(50% + 190px);
    right: calc(50% + 190px);
  }
  .content #system .right_back {
    left: -webkit-calc(50% + 218px);
    left: calc(50% + 218px);
  }
  .content #system .left_back {
    right: -webkit-calc(50% + 228px);
    right: calc(50% + 228px);
  }
  .content #system .right_back2 {
    left: -webkit-calc(50% + 68px);
    left: calc(50% + 68px);
  }
  .content #system .right_back2 img.facet {
    position: relative;
  }
  .content #system .left_back2 {
    right: -webkit-calc(50% + 92px);
    right: calc(50% + 92px);
  }
  
  
  .content #movie .right_back {
    right: -webkit-calc(50% - 188px);
    right: calc(50% - 188px);
  }
  .content #movie .right_back img.facet {
    position: relative;
    top: -390px;
  }
  .content #movie .left_back {
    top: 140px;
    left: -webkit-calc(50% - 22px);
    left: calc(50% - 22px);
  }
  .content #movie .left_back img.facet {
    position: relative;
    top: 290px;
    left: -220px;
  }
  .footer_bg {
    height: 1128px;
    background: url(../img/sp/bg_footer.png) 0 0 no-repeat;
  }
  footer {
    padding: 648px 0 0;
  }
  .spec, .footer_bg .btns, footer .sns {
    display: none;
  }
  .sp_share {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 20px 42px;
    float: none;
    border-top: 2px solid #fff;
    padding: 48px 0 0;
  }
  .sp_share li {
    margin: 0 20px;
  }
  .sp_share a {
    display: block;
    overflow: hidden;
    border: 2px solid #fff;
    width: 210px;
    height: 72px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
  }
  .sp_share li img {
    position: relative;
    top: -4px;
    left: -7px;
    width: 225px;
  }
  .site_top_btn {
    float: none;
    margin: 0 auto 34px;
  }
  .copy {
    font-size: 24rem;
    text-align: center;
    line-height: 1.5;
  }
  .copy .ps_mark {
    height: 24px;
  }
  .copy .ps4logo {
    height: 18px;
  }
}

@media screen and (min-width: 1024px) {
  .sp {
    display: none;
  }
  .sp_share {
    display: none;
  }
  .mv_list .play_btn:hover:after {
    opacity: 1;
  }
}