@charset "utf-8";

#top strong.second_header {
  -webkit-transform: translate3d(0,-260px,0);
  transform: translate3d(0,-260px,0);
}

#top header {
  height: auto;
  padding: 0 0 220px;
}

#top header .package {
  top: 35px;
  width: 100%;
  margin: 0 auto 40px;
  height: 960px;
  -o-object-fit: cover;
  object-fit: cover;
}
#top header .release {
  right: 50%;
  width: 363px;
  height: 193px;
}
.release .release_txt,
.release .nice_meat {
  display: none;
}
#top header h1 {
  top: 464px;
  width: 430px;
}
#top header .catchcopy {
  position: absolute;
  top: 868px;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 150;
}
#arrow_btn, #package_btn {
  display: none;
}
.news_bg {
  width: 100%;
  height: 659px;
  margin: 0 0 12px;
  background: url(../img/sp/bg_news.png) 50% 0 no-repeat;
}
.news_bg .news {
  max-width: 810px;
  margin: 0 auto;
  padding: 130px 1em 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.news_bg .newsWrap {
  height: 15.5em;
}
.news_bg #newsList {
  line-height: 1.3;
}
.news_bg li {
  margin: 0 0 0.7em;
}
.news_bg .date {
  display: block;
}
.banner {
  width: -webkit-calc(496px * 1.48);
  width: calc(496px * 1.48);
}
.banner li {
  margin: 0 3px 6px;
}
.banner a {
  width: -webkit-calc(242px * 1.48);
  width: calc(242px * 1.48);
  height: -webkit-calc(78px * 1.48);
  height: calc(78px * 1.48);
  -webkit-background-size: -webkit-calc(242px * 1.48) -webkit-calc(156px * 1.48);
  background-size: calc(242px * 1.48) calc(156px * 1.48);
}
.banner a img {
  display: none;
}

.content {
  width: 100%;
  /*width: 750px;
  margin: 0 auto;*/
}
.landing .inner:first-of-type {
  margin: -220px 0 -35vw;
}
#top #system {
  width: 100%;
  height: 144.2vw;
  background-position: 0 -90px;
}
#top #system:before {
  top: 0;
  height: 220px;
  background-position: 50%;
}
.system_bg {
  top: -3vw;
  height: 122.5vw;
}
#top #system .content {
  padding: 10.5vw 0 0;
}
#top #system .img_top01 {
  left: 11%;
  width: 71%;
  margin: 0 0 5vw;
}
#top #system .img_top02 {
  left: 20%;
  width: 64%;
}
#top #system .txt_top01 {
  top: 31vw;
  left: 0%;
  width: 62%;
}
#top #system .txt_top02 {
  top: 54.5vw;
  left: 39.5%;
  width: 60%;
  z-index: 600;
}
#top #system .img_shielder {
  top: 0;
  left: 67%;
  width: 43%;
}
#top #system .img_hunter {
  top: 10.8vw;
  left: 56.5%;
  width: 42%;
}
#top #system .img_wizard {
  top: 51vw;
  left: -10vw;
  width: 46%;
}
#top #system .img_gunner {
  top: 67.5vw;
  left: -2.5vw;
  width: 41%;
}
#top #system .img_twincle {
  top: 41vw;
  left: 63%;
  width: 38%;
}
#top #system .img_gem01 {
  top: 29vw;
  left: 0.3%;
  width: 10.5%;
}
#top #system .img_gem02 {
  top: 76.3vw;
  left: 88%;
  width: 12%;
}
#top #system .img_gem03 {
  top: 84vw;
  left: 82%;
  width: 8.5%;
}
#top #system .system_btn {
  top: -5vw;
  left: 34vw;
  width: 40%;
  height: 10.2vw;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
.landing .inner:nth-of-type(2) {
  height: 124.6vw;
}
#top #character {
  width: 100%;
  height: 124.6vw;
}
.character_bg {
  height: 121.5vw;
}
#top #character .content {
  padding: 12vw 0 0;
}
#top #character .img_top03 {
  left: 16%;
  margin: 0 0 3.7%;
  width: 68%;
}
#top #character .img_top04 {
  left: 15%;
  width: 73%;
}
#top #character .txt_top03 {
  top: 31vw;
  left: 3.5%;
  width: 53%;
}
#top #character .txt_top04 {
  top: 71.5vw;
  left: 37%;
  width: 63%;
}
#top #character .img_necromancer {
  top: 28.8vw;
  left: 64%;
  width: 44%;
}
#top #character .img_destroyer {
  top: 54vw;
  left: 61.5%;
  width: 47%;
}
#top #character .img_bishop {
  top: 51.5vw;
  left: -20vw;
  width: 41%;
}
#top #character .img_maid {
  top: 82.5vw;
  left: -4vw;
  width: 45%;
}
#top #character .character_btn {
  top: -2vw;
  left: 41%;
  width: 43%;
  height: 11.8vw;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
.character_btn img,
.system_btn img {
  display: none;
}
#top .img_dango {
  top: 96vw;
  left: 62%;
  width: 36%;
}
#top .img_gem04 {
  top: 107.5vw;
  left: 1%;
  width: 22%;
}
.video_wrap {
  display: none;
}
#top #secondFrame {
  -webkit-transform: translate3d(0,-320px,0);
  transform: translate3d(0,-320px,0);
}

@media screen and (max-width: 750px) {
  #top #system,
  #top #character {
    min-width: 750px;
  }
/*  .system_bg,
  .system_bg g {
    height: 121vw;
    -webkit-clip-path: url("#path_sp");
    clip-path: url("#path_sp");
  }*/
/*  .character_bg,
  .character_bg g {
    -webkit-clip-path: url("#path2_sp");
    clip-path: url("#path2_sp");
  }*/
}
@media screen and (min-width: 751px) {
  #top header .package {
    -o-object-fit: scale-down;
    object-fit: scale-down;
  }
}