/*----- bg ------*/
.bg {
  position: relative;
}

.bg::before {
  content: "";
  position: absolute;
  top: 1500px;
  left: 0;
  width: 100%;
  height: 3917px;
  background: url("../../assets/img/desgin-bg.png") no-repeat center bottom;
  background-size: cover;
  z-index: 10;
}

/*----- section_top -----*/
.section-top {
  background-color: #000000;
  position: relative;
  top: 0;
  left: 0;
}

.mainBg {
  position: relative;
}
.mainBg .rightBox {
  position: relative;
  z-index: 10;
  float: right;
}
.mainBg .rightBox .title, .mainBg .rightBox .yoyauBox {
  text-align: center;
}
.mainBg .rightBox .title {
  margin-top: 40px;
}
.mainBg .rightBox .yoyauBox {
  margin-top: 20px;
}
.mainBg .rightBox .title, .mainBg .rightBox .yoyauBox {
  text-align: center;
}
.mainBg .bannerBox .banner {
  float: left;
}
.mainBg .bannerBox .banner02 {
  margin-top: 28px;
}
.mainBg .bannerBox .banner03 {
  margin-top: 20px;
}

.mainBg:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -170px;
  width: 794px;
  height: 1048px;
  background: url("../../assets/img/main_visual.png") no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
}

.opacity.mainBg:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -170px;
  width: 794px;
  height: 1048px;
  background: url("../../assets/img/main_visual.png") no-repeat;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  -webkit-transition: opacity 0.6s ease-in-out;
  -moz-transition: opacity 0.6s ease-in-out;
  -ms-transition: opacity 0.6s ease-in-out;
}

.newsArea {
  position: relative;
  z-index: 20;
  margin-top: 40px;
  padding-bottom: 15px;
}
.newsArea .news {
  float: left;
  margin-top: 12px;
}
.newsArea .news .day {
  color: #f7e5bb;
}
.newsArea .news .text {
  margin-top: 10px;
  width: 425px;
}
.newsArea .news .text a {
  text-decoration: none;
  color: #ffffff;
}
.newsArea .news .day, .newsArea .news .text {
  font-size: 14px;
  line-height: 15px;
}
.newsArea .news li:nth-of-type(2) {
  margin: 20px 0;
}
.newsArea .news li:nth-of-type(4) {
  margin-top: 20px;
}
.newsArea .bannerBox {
  float: right;
}
.newsArea .bannerBox .banner01 {
  margin-bottom: 13px;
}
.newsArea .bannerBox .banner01, .newsArea .bannerBox .banner02 {
  display: inline-block;
  vertical-align: middle;
}
.newsArea .bannerBox .banner03 {
  margin-top: -10px;
}
.newsArea .bannerBox .banner04 {
  margin-top: 10px;
}

.movieArea {
  margin-right: 0;
  margin-top: 20px;
}
.movieArea .movieBox .movie {
  position: relative;
  top: 0;
  left: 0;
  float: left;
}
.movieArea .movieBox .newicon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 18px;
  margin-top: -7px;
  margin-left: 13px;
  background: url("../../assets/img/icon-new.png") no-repeat;
}
.movieArea .movieBox .movie1 {
  margin: 0 30px;
}
.movieArea .movieBox .movie .icon:before {
  content: "";
  width: 51px;
  height: 51px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20.5px;
  margin-top: -20.5px;
  background: url("../../assets/img/playback.png") no-repeat;
}
.movieArea .movieBox:nth-of-type(2) {
  width: 290px;
  margin: 0 auto;
}

/*----- section_story -----*/
.section-story {
  width: 100%;
  background-color: #000000;
  padding-bottom: 148px;
  padding-top: 90px;
}

.storyBg {
  position: relative;
}
.storyBg .textBox:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 158px;
  height: 280px;
  background: url("../../assets/img/story-title.png") no-repeat;
}
.storyBg .pictBox {
  margin-top: 90px;
  position: relative;
}
.storyBg .pictBox .pict {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  z-index: 10;
  position: relative;
}
.storyBg .pictBox .pict:nth-of-type(2) {
  margin: 0 15px;
}

.storyBg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 56%;
  background: url("../../assets/img/story-bg.png") no-repeat center top;
  background-size: cover;
}

.storyBg:after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: 0;
  width: 720px;
  height: 460px;
  background: url("../../assets/img/design-story.png") no-repeat;
}

/*----- section_adv -----*/
.section-adv {
  width: 100%;
  background-color: #000000;
  padding-bottom: 275px;
}

.advBg {
  position: relative;
}
.advBg .textBox {
  padding-top: 100px;
}
.advBg .textBox:before {
  content: "";
  position: absolute;
  top: 100px;
  left: -389px;
  width: 158px;
  height: 277px;
  background: url("../../assets/img/adv-title.png") no-repeat;
}
.advBg .pictBox {
  margin-top: 100px;
  position: relative;
}
.advBg .pictBox .pict {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  z-index: 10;
  position: relative;
}
.advBg .pictBox .pict:nth-of-type(1) {
  margin-right: 5px;
}
.advBg .pictBox:after {
  content: "";
  position: absolute;
  bottom: -271px;
  left: -295px;
  width: 1600px;
  height: 460px;
  background: url("../../assets/img/design-adv.png") no-repeat;
}

.advBg:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 55%;
  background: url("../../assets/img/adv-bg.png") no-repeat center top;
  background-size: cover;
}

/*----- section_battle -----*/
.section-battle {
  width: 100%;
  background-color: #000000;
  padding-bottom: 148px;
}
.section-battle .battleBg {
  background: url("../../assets/img/battle-bg.png") no-repeat center top;
}

.battleBg .textBox {
  padding-top: 80px;
}
.battleBg .textBox:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 161px;
  height: 280px;
  background: url("../../assets/img/battle-title.png") no-repeat;
}
.battleBg .pictBox {
  margin-top: 90px;
  position: relative;
}
.battleBg .pictBox .pict {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  z-index: 10;
  position: relative;
}
.battleBg .pictBox .pict:nth-of-type(2) {
  margin: 0 15px;
}
.battleBg .pictBox:after {
  content: "";
  position: absolute;
  top: 29px;
  right: -286px;
  width: 708px;
  height: 460px;
  background: url("../../assets/img/design-battle.png") no-repeat;
}

/*----- section_cast -----*/
.section-cast {
  width: 100%;
  background-color: #000000;
}
.section-cast .castBg {
  background: url("../../assets/img/cast-bg.png") no-repeat center top;
}

.castBg .textBox {
  padding-top: 380px;
  padding-bottom: 97px;
  position: relative;
}
.castBg .textBox:before {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  width: 161px;
  height: 272px;
  background: url("../../assets/img/cast-title.png") no-repeat;
}
.castBg .textBox:after {
  content: "";
  position: absolute;
  top: -70px;
  right: -180px;
  width: 865px;
  height: 1021px;
  background: url("../../assets/img/chara.png") no-repeat;
}
.castBg .pictBox {
  margin-top: 100px;
  position: relative;
}

/*---- togher ------*/
.textBox {
  position: relative;
  z-index: 10;
}
.textBox .textArea .text {
  margin-top: 25px;
  color: #ffffff;
  font-size: 18px;
  line-height: 36px;
}
.textBox .textArea:nth-of-type(2) {
  margin-top: 55px;
}
.textBox .btn {
  margin-top: 40px;
}

/*----- section_spec -----*/
.section-spec {
  width: 100%;
  background-color: #f5f5f5;
  position: relative;
  z-index: 10;
  padding-top: 100px;
  padding-bottom: 55px;
}
.section-spec .spec {
  position: relative;
  top: 0;
  left: 0;
}
.section-spec .spec li {
  font-size: 16px;
  line-height: 31px;
}
.section-spec .spec .float {
  float: left;
}
.section-spec .spec .specList {
  margin-left: 24px;
}
.section-spec .spec:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 161px;
  height: 561px;
  background: url("../../assets/img/spec-title.png") no-repeat;
}
.section-spec .limitArea {
  margin-top: 80px;
}

/*----- steam_banner -----*/
.bannerArea {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 900;
}
.bannerArea__close-btn {
  cursor: pointer;
  margin-left: auto;
  margin-bottom: 2px;
  width: 30px;
}
.bannerArea__image {
  display: block;
  width: 100%;
}

.bannerArea-contents {
  width: 460px;
}

@media screen and (max-width: 1024px) {
  .sp-none {
    display: none;
  }
  .section-top {
    z-index: 50;
  }
  .mainBg {
    position: relative;
  }
  .mainBg .rightBox {
    position: relative;
    z-index: 0;
    float: none;
    padding-top: 79%;
    margin: 0 auto;
    width: 88%;
  }
  .mainBg .rightBox .title, .mainBg .rightBox .yoyauBox {
    margin-top: 0;
    text-align: center;
  }
  .mainBg .rightBox .title, .mainBg .rightBox .yoyauBox {
    text-align: center;
  }
  .mainBg .rightBox .title img, .mainBg .rightBox .yoyauBox img {
    width: 100%;
  }
  .mainBg .rightBox .yoyauBox {
    width: 82%;
    margin: 0 auto;
  }
  .mainBg .rightBox .bannerBox .banner {
    float: none;
    width: 100%;
  }
  .mainBg .rightBox .bannerBox .banner img {
    width: 100%;
  }
  .mainBg .rightBox .bannerBox .banner02 {
    margin-top: 2%;
  }
  .mainBg .rightBox .bannerBox .banner03 {
    margin-top: 4%;
  }
  .mainBg:before {
    content: "";
    position: absolute;
    top: -1%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 160%;
    background: url("../../assets/img/main_visual.png") no-repeat center;
    background-size: cover;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    -webkit-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -ms-transition: opacity 0.6s ease-in-out;
  }
  .opacity.mainBg:before {
    content: "";
    position: absolute;
    top: -1%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 160%;
    background: url("../../assets/img/main_visual.png") no-repeat center;
    background-size: cover;
    transition: opacity 0.6s ease-in-out;
    -webkit-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -ms-transition: opacity 0.6s ease-in-out;
    opacity: 1;
  }
  .newsArea {
    position: relative;
    z-index: 20;
    margin-top: 4%;
    padding-bottom: 15%;
  }
  .newsArea .bannerBox {
    float: none;
  }
  .newsArea .bannerBox .banner {
    width: 90%;
    margin: 0 auto;
  }
  .newsArea .bannerBox .banner img {
    width: 100%;
  }
  .newsArea .bannerBox .banner01 {
    margin-bottom: 0;
  }
  .newsArea .bannerBox .banner01, .newsArea .bannerBox .banner02 {
    margin-bottom: 2%;
    display: block;
    vertical-align: middle;
  }
  .newsArea .bannerBox .banner02 {
    margin-bottom: 4%;
  }
  .newsArea .bannerBox .banner04 {
    margin-top: 4%;
  }
  .news {
    float: none;
    margin-top: 3%;
    margin: 3% 3% 0 6%;
  }
  .news .text_new {
    width: 50%;
    margin-left: -3%;
  }
  .news .text_new img {
    width: 100%;
  }
  .news .day {
    color: #f7e5bb;
  }
  .news .text {
    margin-top: 2%;
  }
  .news .text a {
    text-decoration: none;
    color: #ffffff;
  }
  .news .day, .news .text {
    font-size: 3.5vw;
    line-height: 4vw;
  }
  .news li:nth-of-type(1n + 2) {
    margin-top: 3%;
  }
  .movieArea {
    margin-right: 0;
  }
  .movieArea .movieBox .movie {
    position: relative;
    top: 0;
    left: 0;
    float: none;
    width: 90%;
    margin: 0 auto;
  }
  .movieArea .movieBox .movie img {
    width: 100%;
  }
  .movieArea .movieBox .movie1 {
    margin: 3% auto;
  }
  .movieArea .movieBox .movie .icon:before {
    content: "";
    width: 15%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -7%;
    margin-top: -7%;
    background: url("../../assets/img/playback.png") no-repeat;
    background-size: 100%;
    padding-top: 15%;
  }
  .movieArea .movieBox .newicon:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20%;
    height: 0;
    margin-top: -4%;
    margin-left: 4%;
    background: url("../../assets/img/icon-new.png") no-repeat;
    background-size: 100%;
    padding-top: 7%;
  }
  .movieArea .movieBox:nth-of-type(2) {
    width: 290px;
    margin: 0 auto;
  }
  /*----- section_story -----*/
  .section-story {
    width: 100%;
    background-color: #000000;
    padding-bottom: 14%;
    padding-top: 1%;
  }
  .storyBg {
    background: none;
    position: relative;
    top: 0;
    left: 0;
  }
  .storyBg .textBox {
    margin: 33% 3% 0 3%;
  }
  .storyBg .textBox .textArea:nth-of-type(1) .title {
    width: 30%;
  }
  .storyBg .textBox .textArea:nth-of-type(2) .title {
    width: 50%;
  }
  .storyBg .textBox .btn {
    width: 50%;
  }
  .storyBg .textBox .btn img {
    width: 100%;
  }
  .storyBg .textBox:before {
    content: "";
    position: absolute;
    top: -30%;
    left: 0;
    width: 15.42%;
    height: 0;
    padding-top: 27%;
    background: url("../../assets/img/story-title.png") no-repeat;
    background-size: 100%;
  }
  .storyBg .pictBox {
    position: relative;
    margin: 9% 3% 0 3%;
  }
  .storyBg .pictBox .pict {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 10;
    position: relative;
    width: 31.7%;
  }
  .storyBg .pictBox .pict img {
    width: 100%;
  }
  .storyBg .pictBox .pict:nth-of-type(2) {
    margin: 0 1.5%;
  }
  .storyBg .pictBox:after {
    content: "";
    position: absolute;
    top: 29px;
    left: -286px;
    width: 720px;
    height: 460px;
    background: none;
  }
  .storyBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url("../../assets/img/story-bg.png") no-repeat center top;
    background-size: cover;
  }
  /*---- togher ------*/
  .textBox .textArea .title img {
    width: 100%;
  }
  .textBox .textArea .text {
    margin-top: 25px;
    color: #ffffff;
    font-size: 2.8vw;
    line-height: 4.5vw;
  }
  .textBox .textArea:nth-of-type(2) {
    margin-top: 55px;
  }
  .textBox .btn {
    margin-top: 40px;
  }
  /*----- section_adv -----*/
  .section-adv {
    width: 100%;
    background-color: #000000;
    padding-bottom: 27%;
  }
  .advBg {
    position: relative;
    top: 0;
    left: 0;
  }
  .advBg .textBox {
    padding-top: 30%;
    margin: 0 3%;
  }
  .advBg .textBox:before {
    content: "";
    position: absolute;
    top: -5%;
    left: 0;
    width: 15.42%;
    height: 0;
    padding-top: 36%;
    background: url("../../assets/img/adv-title.png") no-repeat;
    background-size: 100%;
  }
  .advBg .textBox img {
    width: 100%;
  }
  .advBg .pictBox {
    position: relative;
    margin: 10% 3% 0 3%;
  }
  .advBg .pictBox .pict {
    width: 49%;
  }
  .advBg .pictBox .pict img {
    width: 100%;
  }
  .advBg .pictBox .pict:nth-of-type(1) {
    margin-right: 5px;
  }
  .advBg .textArea .title {
    width: 70%;
  }
  .advBg .textArea .title img {
    width: 100%;
  }
  .advBg .btn {
    width: 50%;
  }
  .advBg .pictBox:after {
    content: "";
    position: absolute;
    bottom: -57%;
    left: -4%;
    width: 100%;
    height: 0;
    padding-top: 31%;
    background: url("../../assets/img/design-adv.png") no-repeat;
    background-size: cover;
  }
  .advBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url("../../assets/img/adv-bg.png") no-repeat center top;
    background-size: cover;
  }
  /*----- section_battle -----*/
  .section-battle {
    width: 100%;
    background-color: #000000;
    padding-bottom: 148px;
  }
  .battleBg {
    position: relative;
    top: 0;
    left: 0;
    background: none;
  }
  .battleBg .textBox {
    padding-top: 15%;
    margin: 0 3%;
  }
  .battleBg .textBox .textArea .title {
    width: 80%;
  }
  .battleBg .textBox .textArea .title img {
    width: 100%;
  }
  .battleBg .textBox .btn {
    width: 50%;
  }
  .battleBg .textBox .btn img {
    width: 100%;
  }
  .battleBg .textBox:before {
    content: "";
    position: absolute;
    top: -13%;
    left: 0;
    width: 15.42%;
    height: 0;
    padding-top: 36%;
    background: url("../../assets/img/battle-title.png") no-repeat;
    background-size: 100%;
  }
  .battleBg .pictBox {
    margin: 9% 3% 0 3%;
    position: relative;
  }
  .battleBg .pictBox .pict {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 10;
    position: relative;
    width: 31.5%;
  }
  .battleBg .pictBox .pict img {
    width: 100%;
  }
  .battleBg .pictBox .pict:nth-of-type(2) {
    margin: 0 1%;
  }
  .battleBg .pictBox:after {
    content: "";
    position: absolute;
    top: 29px;
    right: -286px;
    width: 708px;
    height: 460px;
    background: none;
  }
  .battleBg:before {
    content: "";
    position: absolute;
    top: -5.2%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url("../../assets/img/battle-bg.png") no-repeat center top;
    background-size: cover;
  }
  /*----- section_cast -----*/
  .section-cast {
    width: 100%;
    background-color: #000000;
  }
  .section-cast .castBg {
    background: none;
    position: relative;
  }
  .section-cast .castBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url("../../assets/img/cast-bg.png") no-repeat center top;
    background-size: cover;
  }
  .castBg .textBox {
    padding-top: 38%;
    padding-bottom: 9.7%;
    position: relative;
    margin: 0 3%;
  }
  .castBg .textBox .textArea .text {
    position: relative;
    z-index: 10;
    width: 60%;
  }
  .castBg .textBox .textArea .text img {
    width: 100%;
  }
  .castBg .textBox .btn {
    width: 50%;
    position: relative;
    z-index: 10;
  }
  .castBg .textBox .btn img {
    width: 100%;
  }
  .castBg .textBox:before {
    content: "";
    position: absolute;
    top: 6%;
    left: 0;
    width: 15.42%;
    height: 0;
    padding-top: 36%;
    background: url("../../assets/img/cast-title.png") no-repeat;
    background-size: 100%;
  }
  .castBg .textBox:after {
    content: "";
    position: absolute;
    top: -7%;
    right: -18%;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: url("../../assets/img/chara.png") no-repeat;
    background-size: 100%;
  }
  .castBg .pictBox {
    margin-top: 100px;
    position: relative;
  }
  /*----- section_spec -----*/
  .section-spec {
    width: 100%;
    background-color: #f5f5f5;
    position: relative;
    z-index: 10;
    padding-top: 10%;
    padding-bottom: 0;
  }
  .section-spec .spec {
    position: relative;
    top: 0;
    left: 35%;
  }
  .section-spec .spec li {
    font-size: 2.8vw;
    line-height: 3.5vw;
  }
  .section-spec .spec .float {
    float: none;
  }
  .section-spec .spec .minLogo {
    width: 50%;
  }
  .section-spec .spec .minLogo img {
    width: 100%;
  }
  .section-spec .spec .specList {
    margin-left: 24px;
  }
  .section-spec .spec:before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 15.42%;
    height: 0;
    padding-top: 70%;
    background: url("../../assets/img/spec-title.png") no-repeat;
    background-size: 100%;
  }
  .section-spec .limitArea {
    margin-top: 8%;
    width: 100%;
  }
  .section-spec .limitArea p {
    font-size: 0;
  }
  .section-spec .limitArea img {
    width: 100%;
  }
  /*----- steam_banner -----*/
  .bannerArea {
    position: fixed;
    right: 2.5%;
    bottom: 2.5%;
    width: 95%;
    z-index: 2;
  }
  .bannerArea__close-btn {
    cursor: pointer;
    margin-left: auto;
    margin-bottom: 2.5%;
    width: 10%;
  }
  .bannerArea-contents {
    width: 100%;
  }
}
@media screen and (max-width: 640px) {
  .news {
    position: relative;
    z-index: 20;
    margin-top: 4%;
    padding-bottom: 7%;
  }
  .news .leftBox {
    float: none;
    position: absolute;
    top: 62%;
    left: 0;
    width: 100%;
    margin: 0 3%;
  }
  .news .leftBox img {
    width: 50%;
  }
  .news .leftBox .day {
    color: #f7e5bb;
  }
  .news .leftBox .text {
    margin-top: 10px;
    color: #ffffff;
  }
  .news .leftBox .day, .news .leftBox .text {
    font-size: 3vw;
    line-height: 4vw;
  }
  .news .leftBox li:nth-of-type(2) {
    margin: 20px 0;
  }
  .news .rightBox {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .news .rightBox .movieBox {
    margin: 0 3%;
  }
  .news .rightBox .movieBox .movie {
    position: relative;
    top: 0;
    left: 0;
    float: left;
    width: 100%;
  }
  .news .rightBox .movieBox .movie img {
    width: 100%;
  }
  .news .rightBox .movieBox .movie1 {
    margin-right: 1%;
  }
  .news .rightBox .movieBox .movie .icon:before {
    content: "";
    width: 12%;
    height: 0;
    padding-top: 12%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -4.05%;
    margin-top: -4.05%;
    background: url("../../assets/img/playback.png") no-repeat;
    background-size: 100%;
  }
  /*----- section_story -----*/
  .section-story {
    width: 100%;
    background-color: #000000;
    padding-bottom: 14%;
    padding-top: 53%;
  }
  .storyBg {
    background: none;
    position: relative;
    top: 0;
    left: 0;
  }
  .storyBg .textBox {
    margin-top: 30%;
    margin: 0% 3% 0 3%;
  }
  .storyBg .textBox .textArea:nth-of-type(1) .title {
    width: 40%;
  }
  .storyBg .textBox .textArea:nth-of-type(2) .title {
    width: 90%;
  }
  .storyBg .textBox .btn {
    width: 50%;
  }
  .storyBg .textBox .btn img {
    width: 100%;
  }
  .storyBg .textBox:before {
    content: "";
    position: absolute;
    top: -31%;
    left: 0;
    width: 25.42%;
    height: 0;
    padding-top: 45%;
    background: url("../../assets/img/story-title.png") no-repeat;
    background-size: 100%;
  }
  .storyBg .pictBox {
    position: relative;
    margin: 9% 3% 0 3%;
  }
  .storyBg .pictBox .pict {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 10;
    position: relative;
    width: 31.6%;
  }
  .storyBg .pictBox .pict img {
    width: 100%;
  }
  .storyBg .pictBox .pict:nth-of-type(2) {
    margin: 0 1%;
  }
  .storyBg:before {
    content: "";
    position: absolute;
    top: -25%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 141%;
    background: url("../../assets/img/story-bg_sp.png") no-repeat center top;
    background-size: cover;
  }
  .storyBg:after {
    content: "";
    position: absolute;
    bottom: -200px;
    left: 0;
    width: 720px;
    height: 460px;
    background: none;
  }
  /*---- togher ------*/
  .textBox .textArea .title img {
    width: 100%;
  }
  .textBox .textArea .text {
    margin-top: 25px;
    color: #ffffff;
    font-size: 4vw;
    line-height: 5.5vw;
  }
  .textBox .textArea:nth-of-type(2) {
    margin-top: 55px;
  }
  .textBox .btn {
    margin-top: 40px;
  }
  /*----- section_adv -----*/
  .section-adv {
    width: 100%;
    background-color: #000000;
    padding-bottom: 27%;
  }
  .advBg {
    position: relative;
    top: 0;
    left: 0;
  }
  .advBg .textBox {
    padding-top: 50%;
    margin: 0 3%;
  }
  .advBg .textBox:before {
    content: "";
    position: absolute;
    top: 0%;
    left: 0;
    width: 25.42%;
    height: 0;
    padding-top: 45%;
    background: url("../../assets/img/adv-title.png") no-repeat;
    background-size: 100%;
  }
  .advBg .textBox img {
    width: 100%;
  }
  .advBg .pictBox {
    position: relative;
    margin: 10% 3% 0 3%;
  }
  .advBg .pictBox .pict {
    width: 48%;
  }
  .advBg .pictBox .pict img {
    width: 100%;
  }
  .advBg .pictBox .pict:nth-of-type(1) {
    margin-right: 1%;
  }
  .advBg .textArea .title {
    width: 90%;
  }
  .advBg .textArea .title img {
    width: 100%;
  }
  .advBg .btn {
    width: 50%;
  }
  .advBg .pictBox:after {
    content: "";
    position: absolute;
    bottom: -57%;
    left: -4%;
    width: 100%;
    height: 0;
    padding-top: 31%;
    background: url("../../assets/img/design-adv.png") no-repeat;
    background-size: cover;
  }
  .advBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 171%;
    background: url("../../assets/img/adv-bg_sp.png") no-repeat center top;
    background-size: cover;
  }
  /*----- section_battle -----*/
  .section-battle {
    width: 100%;
    background-color: #000000;
    padding-bottom: 39%;
  }
  .battleBg {
    position: relative;
    top: 0;
    left: 0;
    background: none;
  }
  .battleBg .textBox {
    padding-top: 50%;
    margin: 0 3%;
  }
  .battleBg .textBox .textArea .title {
    width: 100%;
  }
  .battleBg .textBox .textArea .title img {
    width: 100%;
  }
  .battleBg .textBox .btn {
    width: 50%;
  }
  .battleBg .textBox .btn img {
    width: 100%;
  }
  .battleBg .textBox:before {
    content: "";
    position: absolute;
    top: -3%;
    left: 0;
    width: 25.42%;
    height: 0;
    padding-top: 45%;
    background: url("../../assets/img/battle-title.png") no-repeat;
    background-size: 100%;
  }
  .battleBg .pictBox {
    margin: 9% 3% 0 3%;
    position: relative;
  }
  .battleBg .pictBox .pict {
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    z-index: 10;
    position: relative;
    width: 31.5%;
  }
  .battleBg .pictBox .pict img {
    width: 100%;
  }
  .battleBg .pictBox .pict:nth-of-type(2) {
    margin: 0 1%;
  }
  .battleBg .pictBox:after {
    content: "";
    position: absolute;
    top: 29px;
    right: -286px;
    width: 708px;
    height: 460px;
    background: none;
  }
  .battleBg:before {
    content: "";
    position: absolute;
    top: -5.2%;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 212%;
    background: url("../../assets/img/battle-bg_sp.png") no-repeat center top;
    background-size: cover;
  }
  /*----- section_cast -----*/
  .section-cast {
    width: 100%;
    background-color: #000000;
  }
  .section-cast .castBg {
    background: none;
    position: relative;
  }
  .section-cast .castBg:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background: none;
    background-size: cover;
  }
  .castBg .textBox {
    padding-top: 42%;
    padding-bottom: 9.7%;
    position: relative;
    margin: 0 3%;
  }
  .castBg .textBox .textArea .text {
    position: relative;
    z-index: 10;
    width: 60%;
  }
  .castBg .textBox .textArea .text img {
    width: 100%;
  }
  .castBg .textBox .btn {
    width: 50%;
    position: relative;
    z-index: 10;
  }
  .castBg .textBox .btn img {
    width: 100%;
  }
  .castBg .textBox:before {
    content: "";
    position: absolute;
    top: -7%;
    left: 0;
    width: 25.42%;
    height: 0;
    padding-top: 45%;
    background: url("../../assets/img/cast-title.png") no-repeat;
    background-size: 100%;
  }
  .castBg .textBox:after {
    content: "";
    position: absolute;
    top: -23%;
    right: -4%;
    width: 90%;
    height: 0;
    padding-top: 139%;
    background: url("../../assets/img/chara_sp.png") no-repeat;
    background-size: 100%;
  }
  .castBg .pictBox {
    margin-top: 100px;
    position: relative;
  }
  /*----- section_spec -----*/
  .section-spec {
    width: 100%;
    background-color: #f5f5f5;
    position: relative;
    z-index: 10;
    padding-top: 10%;
    padding-bottom: 0;
  }
  .section-spec .spec {
    position: relative;
    top: 0;
    left: 35%;
  }
  .section-spec .spec li {
    font-size: 2.8vw;
    line-height: 4vw;
    font-weight: bold;
  }
  .section-spec .spec .float {
    float: none;
  }
  .section-spec .spec .minLogo {
    width: 50%;
  }
  .section-spec .spec .minLogo img {
    width: 100%;
  }
  .section-spec .spec .specList {
    margin-left: 24px;
  }
  .section-spec .spec:before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 15.42%;
    height: 0;
    padding-top: 70%;
    background: url("../../assets/img/spec-title.png") no-repeat;
    background-size: 100%;
  }
  .section-spec .limitArea {
    margin-top: 8%;
    width: 100%;
  }
  .section-spec .limitArea p {
    font-size: 0;
  }
  .section-spec .limitArea img {
    width: 100%;
  }
}/*# sourceMappingURL=index.css.map */