#container {
  max-width: 2660px;
  margin: 0 auto;
}

#container .mv {
  overflow: hidden;
  background: url(../images/mv_bg.jpg) top center no-repeat;
}

@media print, screen and (max-width: 1600px) {
  #container .mv {
    background-size: auto 100%;
  }
}

@media screen and (max-width: 749px) {
  #container .mv {
    background: url(../images/mv_bg_sp.jpg) top center/100% no-repeat;
  }
}

#container .mv__inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 749px) {
  #container .mv__inner {
    height: 153.06667vw;
  }
}

@media print, screen and (min-width: 750px) {
  #container .mv__inner::after {
    content: "";
    width: 100%;
    padding-top: 65.625%;
    display: block;
    height: auto;
  }
}

@media screen and (min-width: 750px) and (max-width: 749px) {
  #container .mv__inner::after {
    padding-top: 186.667%;
  }
}

#container .mv__inner > * {
  position: absolute;
}

#container .mv__ttl {
  width: 34.625%;
  top: 16.95238%;
  left: 32.5%;
  z-index: 3;
}

@media screen and (max-width: 749px) {
  #container .mv__ttl {
    width: 74.13333vw;
    top: 36vw;
    left: 17.33333vw;
  }
}

#container .mv__lead {
  width: 46.25%;
  top: 69.90476%;
  left: 20%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: translateY(19.04762%);
          transform: translateY(19.04762%);
}

@media screen and (max-width: 749px) {
  #container .mv__lead {
    width: 61.2vw;
    top: 140vw;
    left: 1.33333vw;
  }
}

#container .mv__date {
  width: 26.125%;
  top: 85.42857%;
  left: 22.3125%;
  z-index: 3;
  opacity: 0;
  -webkit-transform: translateY(19.04762%);
          transform: translateY(19.04762%);
}

@media screen and (max-width: 749px) {
  #container .mv__date {
    width: 63.86667vw;
    top: 166.26667vw;
    left: 3.06667vw;
  }
}

#container .mv__logo {
  width: 4.75%;
  top: 3.61905%;
  left: 2.25%;
  z-index: 4;
}

@media screen and (max-width: 749px) {
  #container .mv__logo {
    width: 8.26667vw;
    top: auto;
    bottom: 3.73333vw;
    left: 4vw;
  }
}

#container .mv__heroes {
  width: 66.75%;
  top: 0%;
  right: -20.625%;
  z-index: 2;
  opacity: 0;
  -webkit-transform: translate(6.25%, 1.90476%);
          transform: translate(6.25%, 1.90476%);
}

@media screen and (max-width: 749px) {
  #container .mv__heroes {
    width: 100%;
    left: 0;
    top: auto;
    bottom: 0;
  }
}

#container .mv__villains {
  width: 80.75%;
  top: -7.2381%;
  left: -29.4375%;
  z-index: 2;
  opacity: 0;
  -webkit-transform: translate(-6.25%, -1.90476%);
          transform: translate(-6.25%, -1.90476%);
}

@media screen and (max-width: 749px) {
  #container .mv__villains {
    width: 100%;
    left: 0;
    top: 0;
  }
}

#container .mv__stars {
  width: 100%;
  top: -1.90476%;
  left: -1.125%;
  z-index: 1;
}

@media screen and (max-width: 749px) {
  #container .mv__stars {
    width: 100%;
    left: 0;
    top: 0;
  }
}

#container .mv__ttl {
  opacity: 0;
  -webkit-transform: scale(2);
          transform: scale(2);
}

#container .mv__stars {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#container .mv.is-animated .mv__heroes {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .mv.is-animated .mv__villains {
  opacity: 1;
  -webkit-transform: translate(0);
          transform: translate(0);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .mv.is-animated .mv__ttl {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0.4s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
  transition: opacity 0.2s ease 0.4s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, opacity 0.2s ease 0.4s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s, opacity 0.2s ease 0.4s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s;
}

#container .mv.is-animated .mv__stars {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0.5s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
  transition: opacity 0.2s ease 0.5s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s, opacity 0.2s ease 0.5s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s, opacity 0.2s ease 0.5s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}

#container .mv.is-animated .mv__lead,
#container .mv.is-animated .mv__date {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.6s ease 0.8s, -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s;
  transition: opacity 0.6s ease 0.8s, -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s, opacity 0.6s ease 0.8s;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s, opacity 0.6s ease 0.8s, -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s;
}

#container .intro {
  background: url(../images/intro_bg.jpg) top center no-repeat #f9bf30;
  position: relative;
  padding: 100px 0 0 0;
  min-height: 1234px;
}

@media screen and (max-width: 749px) {
  #container .intro {
    background: url(../images/intro_bg_sp.jpg) top center/100% no-repeat #f9bf30;
    padding: 3.6vw 0 0;
    min-height: 184vw;
  }
}

@media screen and (max-width: 749px) {
  #container .intro__lead {
    width: 92.93333vw;
    margin: 0 auto;
  }
}

#container .intro__date {
  width: 63.86667vw;
  margin: 0.66667vw auto 0;
}

#container .lead {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 749px) {
  #container .lead {
    margin-top: 6.66667vw;
  }
}

#container .lead__ttl {
  text-align: center;
}

@media screen and (max-width: 749px) {
  #container .lead__ttl {
    width: 84.8vw;
    margin: 0 auto;
  }
}

#container .lead__txt {
  margin: 35px 0 0 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  text-align: center;
  color: #fff;
}

@media screen and (max-width: 749px) {
  #container .lead__txt {
    margin: 4.8vw auto 0;
    text-align: center;
    font-size: 3.73333vw;
    line-height: 1.7;
  }
}

#container .lead__txt a {
  display: inline-block;
  color: #fff;
  border-bottom: 1px solid #fff;
  line-height: 1.5;
}

@media print, screen and (min-width: 750px) {
  #container .lead__txt a {
    transition: all 0.15s ease;
    -webkit-transition: all 0.15s ease;
  }
  #container .lead__txt a:hover {
    border-color: #000;
    color: #000;
  }
}

#container .movie {
  margin: 60px 0 0;
}

@media screen and (max-width: 749px) {
  #container .movie {
    margin: 5.33333vw 2.66667vw 0;
  }
}

#container .movie__ttl {
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 749px) {
  #container .movie__ttl {
    width: 63.06667vw;
    margin: 0 auto;
  }
}

#container .movie__box {
  position: relative;
  z-index: 1;
  height: 548px;
  border: 10px solid #000;
  margin-top: -30px;
  background: #fff;
  cursor: pointer;
}

@media screen and (max-width: 749px) {
  #container .movie__box {
    height: auto;
    border-width: 5px;
    margin-top: -3.33333vw;
  }
  #container .movie__box::before {
    content: "";
    width: 100%;
    padding-top: 56.25%;
    display: block;
  }
}

#container .movie__box::after {
  content: "";
  width: 108px;
  height: 108px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -75%);
          transform: translate(-50%, -75%);
  z-index: 3;
  background: url(../images/icon_youtube.png) 0 0 no-repeat;
}

@media screen and (max-width: 749px) {
  #container .movie__box::after {
    width: 12vw;
    height: 12vw;
    background-size: 100%;
  }
}

#container .movie__box .ytPlayerWrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#container .movie__box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#container .movie__box > img {
  position: relative;
  z-index: 2;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

@media screen and (max-width: 749px) {
  #container .movie__box > img {
    position: absolute;
    top: 0;
    left: 0;
  }
}

@media print, screen and (min-width: 750px) {
  #container .movie__box:hover img {
    opacity: 0.7;
  }
}

#container .movie__box.is-active img {
  display: none;
}

#container .movie__box.is-active::after {
  content: none;
}

@media print, screen and (min-width: 750px) {
  #container .movie__box.is-active::before {
    content: none;
  }
}

#container .story {
  position: relative;
  background: url(../images/story_bg.png) top center no-repeat;
  z-index: 2;
  margin-top: -234px;
  padding: 205px 0 0;
  min-height: 2510px;
}

@media screen and (max-width: 749px) {
  #container .story {
    background: url(../images/story_bg_sp.png) top center/100% no-repeat;
    margin-top: -7.6vw;
    padding: 14.66667vw 0 0;
    min-height: 316.93333vw;
  }
}

#container .story::before {
  content: "";
  width: 280px;
  height: 141px;
  position: absolute;
  background: url(../images/star_01.png) 0 0/100% no-repeat;
  top: 51px;
  right: 50%;
}

@media print, screen and (min-width: 750px) {
  #container .story::before {
    margin-right: -752px;
  }
}

@media screen and (max-width: 749px) {
  #container .story::before {
    width: 24vw;
    top: -2.66667vw;
    right: 0vw;
  }
}

#container .story__ttl {
  position: relative;
  z-index: 2;
  text-align: center;
}

@media screen and (max-width: 749px) {
  #container .story__ttl {
    width: 95.73333vw;
    margin: 0 0 0 -6vw;
  }
}

#container .story__sec {
  position: relative;
}

@media screen and (max-width: 749px) {
  #container .story__sec {
    width: 84vw;
    margin: 0 auto;
  }
}

#container .story__sec--01 {
  z-index: 1;
}

#container .story__sec--01 .story__img {
  margin-top: -45px;
}

@media screen and (max-width: 749px) {
  #container .story__sec--01 .story__img {
    margin-top: -4.66667vw;
  }
}

#container .story__sec--02 {
  margin-top: 50px;
}

@media screen and (max-width: 749px) {
  #container .story__sec--02 {
    margin-top: 9.33333vw;
  }
}

#container .story__sec--02 .story__img {
  margin-top: -146px;
}

@media screen and (max-width: 749px) {
  #container .story__sec--02 .story__img {
    margin-top: -17.33333vw;
  }
}

@media print, screen and (min-width: 750px) {
  #container .story__img {
    width: 973px;
    margin-left: -7px;
  }
}

#container .story__cmt {
  position: absolute;
  font-size: 20px;
  line-height: 1.4;
  z-index: 3;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100%;
  text-align: center;
  font-weight: 900;
  letter-spacing: -0.08em;
}

@media screen and (max-width: 749px) {
  #container .story__cmt {
    font-size: 3.73333vw;
  }
}

#container .story__cmt--01 {
  width: 216px;
  height: 166px;
  background-image: url(../images/story_pop_bg_01.png);
  top: 130px;
  left: -118px;
  padding: 31px 0 0 13px;
}

#container .story__cmt--01 span {
  margin-left: -1em;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--01 {
    width: 36vw;
    height: 28.8vw;
    top: 22.66667vw;
    left: -8vw;
    background-image: url(../images/story_pop_bg_01_sp.png);
    padding: 4.66667vw 0 0 1.06667vw;
    letter-spacing: -0.1em;
  }
}

#container .story__cmt--02 {
  width: 403px;
  height: 99px;
  background-image: url(../images/story_pop_bg_02.png);
  top: 439px;
  right: -29px;
  padding: 21px 0 0 15px;
  letter-spacing: 0;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--02 {
    width: 69.86667vw;
    height: 17.2vw;
    top: 91.46667vw;
    right: -7.6vw;
    background-image: url(../images/story_pop_bg_02_sp.png);
    padding: 3.46667vw 0 0 2vw;
  }
}

#container .story__cmt--03 {
  width: 307px;
  height: 105px;
  background-image: url(../images/story_pop_bg_03.png);
  top: 658px;
  left: -38px;
  padding: 26px 0 0 8px;
  letter-spacing: 0;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--03 {
    width: 50.93333vw;
    height: 17.6vw;
    top: 129.33333vw;
    left: -4.4vw;
    background-image: url(../images/story_pop_bg_03_sp.png);
    padding: 3.73333vw 0 0 2vw;
    font-size: 3.46667vw;
  }
}

#container .story__cmt--04 {
  width: 578px;
  height: 134px;
  background-image: url(../images/story_pop_bg_04.png);
  top: 706px;
  left: 221px;
  padding: 43px 0 0 17px;
  font-size: 34px;
  letter-spacing: 0;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--04 {
    width: 73.73333vw;
    height: 15.86667vw;
    top: 142.66667vw;
    left: 7.2vw;
    background-image: url(../images/story_pop_bg_04_sp.png);
    padding: 5.06667vw 0 0 2vw;
    font-size: 4.26667vw;
  }
}

#container .story__cmt--05 {
  width: 539px;
  height: 132px;
  background-image: url(../images/story_pop_bg_05.png);
  top: 508px;
  left: -56px;
  padding: 34px 0 0 12px;
  font-size: 23px;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--05 {
    width: 78vw;
    height: 18.13333vw;
    top: 49.86667vw;
    left: -7.06667vw;
    background-image: url(../images/story_pop_bg_05_sp.png);
    padding: 4.66667vw 0 0 1.33333vw;
    font-size: 3.33333vw;
  }
}

#container .story__cmt--06 {
  width: 782px;
  height: 118px;
  background-image: url(../images/story_pop_bg_06.png);
  color: #fff;
  top: 792px;
  left: 220px;
  padding: 37px 0 0 27px;
  font-size: 30px;
  letter-spacing: 0;
}

@media screen and (max-width: 749px) {
  #container .story__cmt--06 {
    width: 72.26667vw;
    height: 19.6vw;
    top: 85.33333vw;
    left: 18.13333vw;
    background-image: url(../images/story_pop_bg_06_sp.png);
    padding: 4vw 0 0 1.33333vw;
    font-size: 4vw;
  }
}

#container .story__main-txt {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 1075px;
  margin-left: -60px;
}

@media screen and (max-width: 749px) {
  #container .story__main-txt {
    width: 100vw;
    margin-left: -7.33333vw;
  }
}

#container .story__cmt {
  opacity: 0;
}

#container .story__cmt--01 {
  -webkit-transform: translate(-30px, 0);
          transform: translate(-30px, 0);
}

#container .story__cmt--02 {
  -webkit-transform: translate(30px, 0);
          transform: translate(30px, 0);
}

#container .story__cmt--03 {
  -webkit-transform: translate(-30px, 0);
          transform: translate(-30px, 0);
}

#container .story__cmt--04 {
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}

#container .story__cmt--05 {
  -webkit-transform: translate(-30px, 0);
          transform: translate(-30px, 0);
}

#container .story__cmt--06 {
  -webkit-transform: translate(0, 30px);
          transform: translate(0, 30px);
}

#container .story__main-txt {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#container .story .story__cmt.is-animated {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s ease 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

#container .story .story__main-txt.is-animated {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .charactor {
  background: url(../images/charactor_bg.png) top center no-repeat;
  padding: 230px 0 0;
  min-height: 2729px;
  position: relative;
  z-index: 3;
  margin-top: -230px;
}

@media screen and (max-width: 749px) {
  #container .charactor {
    background: url(../images/charactor_bg_sp.png) top center/100% no-repeat;
    padding: 14.4vw 0 0;
    min-height: 608vw;
    margin-top: -8.66667vw;
  }
}

#container .charactor::before {
  content: "";
  width: 287px;
  height: 146px;
  position: absolute;
  background: url(../images/star_02.png) 0 0/100% no-repeat;
  top: 39px;
  left: 50%;
}

@media print, screen and (min-width: 750px) {
  #container .charactor::before {
    margin-left: -741px;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor::before {
    width: 24vw;
    left: 0;
    top: -2vw;
  }
}

#container .charactor__ttl {
  text-align: center;
}

@media screen and (max-width: 749px) {
  #container .charactor__ttl {
    width: 85.6vw;
    margin: 0 auto;
  }
}

#container .charactor__lead {
  color: #000;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  margin-top: 17px;
  line-height: 1.9;
}

@media screen and (max-width: 749px) {
  #container .charactor__lead {
    font-size: 3.33333vw;
    margin-top: 2.66667vw;
    line-height: 1.5;
  }
}

#container .charactor-lineup {
  position: relative;
}

#container .charactor-lineup__ttl {
  position: absolute;
  z-index: 5;
}

#container .charactor-lineup__arrow {
  position: absolute;
  z-index: 6;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  cursor: pointer;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__arrow {
    width: 12.66667vw;
  }
}

#container .charactor-lineup__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#container .charactor-lineup__arrow--prev {
  left: -50px;
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__arrow--prev:hover {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__arrow--prev {
    left: 2.66667vw;
  }
}

#container .charactor-lineup__arrow--next {
  right: -90px;
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__arrow--next:hover {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__arrow--next {
    right: 2.66667vw;
  }
}

#container .charactor-lineup__list {
  position: relative;
  width: 100%;
  height: 100%;
}

#container .charactor-lineup__item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

#container .charactor-lineup__item.is-active {
  opacity: 1;
  pointer-events: visible;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__img-wrp {
    position: relative;
  }
}

#container .charactor-lineup__img {
  position: absolute;
}

#container .charactor-lineup__img--01 {
  z-index: 2;
}

#container .charactor-lineup__img--02 {
  z-index: 1;
}

#container .charactor-lineup__info {
  width: 560px;
  text-align: center;
  position: relative;
  z-index: 5;
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__info {
    padding-top: 140px;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__info {
    width: 100%;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__name {
    position: absolute;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__name {
    width: 63.46667vw;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
}

#container .charactor-lineup__txt {
  margin-top: 15px;
  color: #000;
  font-size: 20px;
  font-weight: 900;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__txt {
    font-size: 3.46667vw;
    height: 10.66667vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

#container .charactor-lineup__skill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 626px;
  margin: 10px 0 0 -30px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__skill {
    display: block;
    margin: 2.66667vw 0 0 8vw;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__skill li {
    width: 72.4vw;
  }
}

#container .charactor-lineup__skill li:nth-child(2) {
  padding-top: 20px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__skill li:nth-child(2) {
    padding: 0;
    margin: 2.66667vw 0 0 10.66667vw;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__skill li a img {
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
  }
  #container .charactor-lineup__skill li a:hover img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__skill li a {
    pointer-events: none;
  }
}

#container .charactor-lineup__switch {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 461px;
  z-index: 3;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__switch {
    width: auto;
    position: relative;
    margin-top: 2vw;
  }
}

#container .charactor-lineup__btn {
  width: 147px;
  height: 163px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top center;
  font-size: 0;
  cursor: pointer;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn {
    width: 24.66667vw;
    height: 27.6vw;
  }
}

#container .charactor-lineup__btn::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: bottom center;
  opacity: 0;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup__btn:hover::after {
    opacity: 1;
  }
}

#container .charactor-lineup__btn + .charactor-lineup__btn {
  margin-left: 10px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn + .charactor-lineup__btn {
    margin-left: 2vw;
  }
}

#container .charactor-lineup__btn.is-active::after {
  opacity: 1;
}

#container .charactor-lineup__btn--batgirl, #container .charactor-lineup__btn--batgirl::after {
  background-image: url(../images/batgirl_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--batgirl, #container .charactor-lineup__btn--batgirl::after {
    background-image: url(../images/batgirl_btn_sp.png);
  }
}

#container .charactor-lineup__btn--wonderwoman, #container .charactor-lineup__btn--wonderwoman::after {
  background-image: url(../images/wonderwoman_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--wonderwoman, #container .charactor-lineup__btn--wonderwoman::after {
    background-image: url(../images/wonderwoman_btn_sp.png);
  }
}

#container .charactor-lineup__btn--supergirl, #container .charactor-lineup__btn--supergirl::after {
  background-image: url(../images/supergirl_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--supergirl, #container .charactor-lineup__btn--supergirl::after {
    background-image: url(../images/supergirl_btn_sp.png);
  }
}

#container .charactor-lineup__btn--catwoman, #container .charactor-lineup__btn--catwoman::after {
  background-image: url(../images/catwoman_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--catwoman, #container .charactor-lineup__btn--catwoman::after {
    background-image: url(../images/catwoman_btn_sp.png);
  }
}

#container .charactor-lineup__btn--harley-quinn, #container .charactor-lineup__btn--harley-quinn::after {
  background-image: url(../images/harley-quinn_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--harley-quinn, #container .charactor-lineup__btn--harley-quinn::after {
    background-image: url(../images/harley-quinn_btn_sp.png);
  }
}

#container .charactor-lineup__btn--star-sapphire, #container .charactor-lineup__btn--star-sapphire::after {
  background-image: url(../images/star-sapphire_btn.png);
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__btn--star-sapphire, #container .charactor-lineup__btn--star-sapphire::after {
    background-image: url(../images/star-sapphire_btn_sp.png);
  }
}

#container .charactor-lineup--hero {
  height: 840px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero {
    margin-top: 4vw;
    height: 241.33333vw;
  }
}

#container .charactor-lineup--hero .charactor-lineup__ttl {
  bottom: -48px;
  left: 58px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero .charactor-lineup__ttl {
    width: 53.06667vw;
    left: 4.26667vw;
    bottom: 0;
  }
}

#container .charactor-lineup--hero .charactor-lineup__arrow {
  top: 294px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero .charactor-lineup__arrow {
    top: 53.33333vw;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero .charactor-lineup__list {
    height: 198vw;
  }
}

#container .charactor-lineup--hero .charactor-lineup__item::after {
  content: "";
  position: absolute;
}

#container .charactor-lineup--hero .charactor-lineup__info {
  margin: 50px 0 0 auto;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero .charactor-lineup__info {
    margin: 72vw 0 0;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup--hero .charactor-lineup__name {
    top: 57px;
    right: 56px;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--hero .charactor-lineup__txt {
    text-shadow: 1px 1px 0 #f9b939, -1px -1px 0 #f9b939, -1px 1px 0 #f9b939, 1px -1px 0 #f9b939, 0px 1px 0 #f9b939, 0 -1px 0 #f9b939, -1px 0 0 #f9b939, 1px 0 0 #f9b939;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup--hero .charactor-lineup__switch {
    bottom: 140px;
    right: 40px;
  }
}

#container .charactor-lineup__item--batgirl::after {
  width: 302px;
  height: 264px;
  top: -46px;
  right: -218px;
  background: url(../images/batgirl_obj.png) 0 0 no-repeat;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--batgirl::after {
    width: 89.73333vw;
    height: 8.93333vw;
    background: url(../images/batgirl_obj_sp.png) 0 0/100% no-repeat;
    top: 20.66667vw;
    left: 4.66667vw;
    right: auto;
  }
}

#container .charactor-lineup__item--batgirl .charactor-lineup__img--01 {
  top: -35px;
  left: 15px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--batgirl .charactor-lineup__img--01 {
    width: 63.06667vw;
    top: 21.33333vw;
    left: auto;
    right: 0.93333vw;
  }
}

#container .charactor-lineup__item--batgirl .charactor-lineup__img--02 {
  top: 200px;
  left: -122px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--batgirl .charactor-lineup__img--02 {
    width: 89.06667vw;
    top: 20vw;
    left: 0.66667vw;
  }
}

#container .charactor-lineup__item--wonderwoman::after {
  width: 156px;
  height: 152px;
  top: -15px;
  right: -138px;
  background: url(../images/wonderwoman_obj.png) 0 0 no-repeat;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--wonderwoman::after {
    width: 86vw;
    height: 14.8vw;
    background: url(../images/wonderwoman_obj_sp.png) 0 0/100% no-repeat;
    top: 20.53333vw;
    left: 9.33333vw;
    right: auto;
  }
}

#container .charactor-lineup__item--wonderwoman .charactor-lineup__img--01 {
  top: 98px;
  left: 140px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--wonderwoman .charactor-lineup__img--01 {
    width: 63.06667vw;
    top: 22.4vw;
    left: 43.06667vw;
  }
}

#container .charactor-lineup__item--wonderwoman .charactor-lineup__img--02 {
  top: -118px;
  left: -302px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--wonderwoman .charactor-lineup__img--02 {
    width: 56.66667vw;
    top: 18.66667vw;
    left: -7.33333vw;
  }
}

#container .charactor-lineup__item--supergirl::after {
  width: 225px;
  height: 178px;
  top: -20px;
  right: -177px;
  background: url(../images/supergirl_obj.png) 0 0 no-repeat;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--supergirl::after {
    width: 89.46667vw;
    height: 77.73333vw;
    background: url(../images/supergirl_obj_sp.png) 0 0/100% no-repeat;
    top: 14.66667vw;
    left: 5.86667vw;
    right: auto;
  }
}

#container .charactor-lineup__item--supergirl .charactor-lineup__img--01 {
  top: -97px;
  left: -125px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--supergirl .charactor-lineup__img--01 {
    width: 51.2vw;
    top: 16.66667vw;
    left: 10vw;
  }
}

#container .charactor-lineup__item--supergirl .charactor-lineup__img--02 {
  top: 116px;
  left: 164px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--supergirl .charactor-lineup__img--02 {
    width: 44vw;
    top: 20.4vw;
    left: 52.13333vw;
  }
}

#container .charactor-lineup--villan {
  height: 900px;
  margin-top: 80px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan {
    margin-top: 22.66667vw;
    height: auto;
    padding-top: 10.66667vw;
  }
}

#container .charactor-lineup--villan .charactor-lineup__ttl {
  top: 120px;
  right: 190px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan .charactor-lineup__ttl {
    width: 52.26667vw;
    right: 4vw;
    top: 0vw;
  }
}

#container .charactor-lineup--villan .charactor-lineup__arrow {
  top: 514px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan .charactor-lineup__arrow {
    top: 68.66667vw;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan .charactor-lineup__list {
    height: 205.33333vw;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup--villan .charactor-lineup__info {
    margin: 250px 0 0 50px;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan .charactor-lineup__info {
    margin: 78.66667vw 0 0;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup--villan .charactor-lineup__name {
    top: 252px;
    left: 85px;
  }
}

#container .charactor-lineup--villan .charactor-lineup__txt {
  color: #fff;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup--villan .charactor-lineup__txt {
    text-shadow: 1px 1px 0 #1c1d66, -1px -1px 0 #1c1d66, -1px 1px 0 #1c1d66, 1px -1px 0 #1c1d66, 0px 1px 0 #1c1d66, 0 -1px 0 #1c1d66, -1px 0 0 #1c1d66, 1px 0 0 #1c1d66;
  }
}

@media print, screen and (min-width: 750px) {
  #container .charactor-lineup--villan .charactor-lineup__switch {
    bottom: 0;
    left: 100px;
  }
}

#container .charactor-lineup__item--catwoman .charactor-lineup__img--01 {
  top: 214px;
  right: -22px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--catwoman .charactor-lineup__img--01 {
    width: 42.66667vw;
    top: 18.53333vw;
    right: auto;
    left: 8.4vw;
  }
}

#container .charactor-lineup__item--catwoman .charactor-lineup__img--02 {
  top: -170px;
  right: -490px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--catwoman .charactor-lineup__img--02 {
    width: 87.86667vw;
    top: 10.66667vw;
    right: -29.33333vw;
  }
}

#container .charactor-lineup__item--harley-quinn .charactor-lineup__img--01 {
  top: 232px;
  right: -75px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--harley-quinn .charactor-lineup__img--01 {
    width: 54.93333vw;
    top: 21.33333vw;
    right: auto;
    left: 2vw;
  }
}

#container .charactor-lineup__item--harley-quinn .charactor-lineup__img--02 {
  top: -133px;
  right: -264px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--harley-quinn .charactor-lineup__img--02 {
    width: 62vw;
    top: 20.13333vw;
    right: 1.86667vw;
  }
}

#container .charactor-lineup__item--star-sapphire .charactor-lineup__img--01 {
  top: 218px;
  right: -37px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--star-sapphire .charactor-lineup__img--01 {
    width: 52.8vw;
    top: 19.33333vw;
    right: 49.6vw;
  }
}

#container .charactor-lineup__item--star-sapphire .charactor-lineup__img--02 {
  top: -160px;
  right: -237px;
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup__item--star-sapphire .charactor-lineup__img--02 {
    width: 72.8vw;
    top: 22.4vw;
    right: -5.33333vw;
  }
}

@media screen and (max-width: 749px) {
  #container .charactor-lineup.is-arrow-fixed .charactor-lineup__arrow {
    position: fixed;
    top: 80vw;
  }
  #container .charactor-lineup.is-arrow-btm.charactor-lineup--hero .charactor-lineup__arrow {
    top: auto;
    bottom: 22vw;
  }
  #container .charactor-lineup.is-arrow-btm.charactor-lineup--villan .charactor-lineup__arrow {
    top: auto;
    bottom: 9vw;
  }
}

#container .charactor-lineup__item::after {
  opacity: 0;
}

#container .charactor-lineup__name {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#container .charactor-lineup__txt {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#container .charactor-lineup__skill li {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
}

#container .charactor-lineup__img {
  opacity: 0;
  -webkit-transform: scale(1.7) translateY(100px);
          transform: scale(1.7) translateY(100px);
}

#container .charactor-lineup__item.is-active::after {
  opacity: 1;
  -webkit-transition: opacity .2s ease-out;
  transition: opacity .2s ease-out;
}

#container .charactor-lineup__item.is-active .charactor-lineup__name {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, opacity 0.2s ease 0.2s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
}

#container .charactor-lineup__item.is-active .charactor-lineup__txt {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: opacity 0.2s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.2s ease 0.3s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, opacity 0.2s ease 0.3s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}

#container .charactor-lineup__item.is-active .charactor-lineup__img--01 {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  -webkit-transition: opacity 0.2s ease 0.6s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
  transition: opacity 0.2s ease 0.6s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s, opacity 0.2s ease 0.6s;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s, opacity 0.2s ease 0.6s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
}

#container .charactor-lineup__item.is-active .charactor-lineup__img--02 {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  -webkit-transition: opacity 0.2s ease 0.7s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
  transition: opacity 0.2s ease 0.7s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s, opacity 0.2s ease 0.7s;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s, opacity 0.2s ease 0.7s, -webkit-transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s;
}

#container .charactor-lineup__item.is-active .charactor-lineup__skill li:first-child {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.1s ease 0.9s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
  transition: opacity 0.1s ease 0.9s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s, opacity 0.1s ease 0.9s;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s, opacity 0.1s ease 0.9s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.9s;
}

#container .charactor-lineup__item.is-active .charactor-lineup__skill li:last-child {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.1s ease 1s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transition: opacity 0.1s ease 1s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity 0.1s ease 1s;
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity 0.1s ease 1s, -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
}

#container .battle {
  background: url(../images/battle_bg.png) top center no-repeat;
  padding: 210px 0 0;
  min-height: 1393px;
  position: relative;
  z-index: 4;
  margin-top: -210px;
}

@media screen and (max-width: 749px) {
  #container .battle {
    background: url(../images/battle_bg_sp.png) top center/100% no-repeat;
    padding: 12vw 0 0;
    min-height: 129.86667vw;
    margin-top: -8.4vw;
  }
}

#container .battle::before {
  content: "";
  width: 190px;
  height: 167px;
  position: absolute;
  background: url(../images/star_03.png) 0 0/100% no-repeat;
  top: 29px;
  right: 50%;
}

@media print, screen and (min-width: 750px) {
  #container .battle::before {
    margin-right: -671px;
  }
}

@media screen and (max-width: 749px) {
  #container .battle::before {
    width: 16vw;
    right: 0.66667vw;
    top: -1.6vw;
  }
}

#container .battle__ttl {
  position: relative;
  z-index: 3;
  text-align: center;
}

@media screen and (max-width: 749px) {
  #container .battle__ttl {
    width: 73.33333vw;
    margin: 0 auto;
  }
}

#container .battle__charactor {
  position: absolute;
  z-index: 1;
}

#container .battle__charactor--batgirl {
  top: -167px;
  left: -527px;
}

@media screen and (max-width: 749px) {
  #container .battle__charactor--batgirl {
    width: 61.73333vw;
    top: -25.73333vw;
    left: -8.66667vw;
  }
}

#container .battle__charactor--catwoman {
  top: 390px;
  right: -330px;
}

@media screen and (max-width: 749px) {
  #container .battle__charactor--catwoman {
    width: 23.06667vw;
    top: 60.66667vw;
    right: -4.66667vw;
  }
}

#container .battle__charactor--batgirl {
  opacity: 0;
  -webkit-transform: scale(0) translateY(80px);
          transform: scale(0) translateY(80px);
}

#container .battle__charactor--batgirl.is-animated {
  opacity: 1;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .battle__charactor--catwoman {
  opacity: 0;
  -webkit-transform: scale(0) translateX(80px);
          transform: scale(0) translateX(80px);
}

#container .battle__charactor--catwoman.is-animated {
  opacity: 1;
  -webkit-transform: scale(1) translateX(0);
          transform: scale(1) translateX(0);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .battle-slide {
  position: relative;
  z-index: 2;
  margin-top: -73px;
}

@media screen and (max-width: 749px) {
  #container .battle-slide {
    width: 74.66667vw;
    margin: -4.66667vw auto 0;
  }
}

#container .battle-slide__item {
  position: relative;
}

#container .battle-slide__img {
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  line-height: 0;
  background: #000;
}

@media screen and (max-width: 749px) {
  #container .battle-slide__img {
    border-width: 5px;
  }
}

#container .battle-slide__txt {
  position: relative;
  width: 543px;
  height: 186px;
  text-align: center;
  background: url(../images/battle_txt_bg.png) 0 0 no-repeat;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  margin: -58px 0 0 210px;
  padding: 0 0 0 10px;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 749px) {
  #container .battle-slide__txt {
    width: 65.2vw;
    height: 22.93333vw;
    background: url(../images/battle_txt_bg_sp.png) 0 0/100% 100% no-repeat;
    font-size: 3.6vw;
    margin: -4vw 0 0 5.33333vw;
    padding: 0 0 0 2vw;
  }
}

#container .battle-slide__txt b {
  font-weight: 900;
  font-size: 41px;
}

@media screen and (max-width: 749px) {
  #container .battle-slide__txt b {
    font-size: 5.06667vw;
  }
}

#container .battle-slide__arrow {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  top: 225px;
}

@media screen and (max-width: 749px) {
  #container .battle-slide__arrow {
    width: 12.66667vw;
    top: 17.06667vw;
  }
}

#container .battle-slide__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#container .battle-slide__arrow--prev {
  left: -78px;
}

@media print, screen and (min-width: 750px) {
  #container .battle-slide__arrow--prev:hover {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}

@media screen and (max-width: 749px) {
  #container .battle-slide__arrow--prev {
    left: -10vw;
  }
}

#container .battle-slide__arrow--next {
  right: -78px;
}

@media print, screen and (min-width: 750px) {
  #container .battle-slide__arrow--next:hover {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

@media screen and (max-width: 749px) {
  #container .battle-slide__arrow--next {
    right: -10vw;
  }
}

#container .battle-thumb-slide {
  margin-top: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  z-index: 4;
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    margin-top: 4vw;
  }
}

#container .battle-thumb-slide__item {
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
  margin: 0 -12px;
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 750px) {
  #container .battle-thumb-slide__item {
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
  }
  #container .battle-thumb-slide__item:hover {
    opacity: .9;
  }
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide__item {
    margin: 0 -1.6vw;
  }
}

#container .battle-thumb-slide__item.is-active {
  z-index: 2;
  background-position: bottom left;
}

#container .battle-thumb-slide__item--01 {
  width: 172px;
  height: 111px;
  background-image: url(../images/battle_thumb_01.png);
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide__item--01 {
    width: 22.93333vw;
    height: 14.8vw;
  }
}

#container .battle-thumb-slide__item--02 {
  width: 164px;
  height: 100px;
  background-image: url(../images/battle_thumb_02.png);
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide__item--02 {
    width: 21.86667vw;
    height: 13.33333vw;
    -webkit-transform: translateY(3.1vw);
            transform: translateY(3.1vw);
  }
}

#container .battle-thumb-slide__item--03 {
  width: 164px;
  height: 106px;
  background-image: url(../images/battle_thumb_03.png);
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide__item--03 {
    width: 21.86667vw;
    height: 14.13333vw;
  }
}

#container .battle-thumb-slide__item--04 {
  width: 164px;
  height: 100px;
  background-image: url(../images/battle_thumb_04.png);
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}

@media screen and (max-width: 749px) {
  #container .battle-thumb-slide__item--04 {
    width: 21.86667vw;
    height: 13.33333vw;
    -webkit-transform: translateY(3.1vw);
            transform: translateY(3.1vw);
  }
}

#container .town {
  background: url(../images/town_bg.png) top center no-repeat;
  padding: 250px 0 0;
  min-height: 1535px;
  position: relative;
  z-index: 5;
  margin-top: -210px;
}

@media screen and (max-width: 749px) {
  #container .town {
    background: url(../images/town_bg_sp.png) top center/100% no-repeat;
    padding: 15.73333vw 0 0;
    min-height: 225.46667vw;
    margin-top: -8.66667vw;
  }
}

#container .town::before {
  content: "";
  width: 280px;
  height: 141px;
  position: absolute;
  background: url(../images/star_04.png) 0 0/100% no-repeat;
  top: 25px;
  left: 50%;
}

@media print, screen and (min-width: 750px) {
  #container .town::before {
    margin-left: -691px;
  }
}

@media screen and (max-width: 749px) {
  #container .town::before {
    width: 20.66667vw;
    top: -0.66667vw;
    left: 0.66667vw;
  }
}

@media screen and (max-width: 749px) {
  #container .town .inner {
    height: 209.73333vw;
  }
}

#container .town__ttl {
  width: 802px;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 749px) {
  #container .town__ttl {
    width: 65.2vw;
  }
}

#container .town__ttl h2 {
  position: relative;
  z-index: 1;
}

#container .town__cmt {
  position: absolute;
  z-index: 2;
}

#container .town__cmt--01 {
  top: -60px;
  left: -120px;
}

@media screen and (max-width: 749px) {
  #container .town__cmt--01 {
    width: 25.2vw;
    top: -6.26667vw;
    left: -14.4vw;
  }
}

#container .town__cmt--02 {
  top: -25px;
  right: -51px;
}

@media screen and (max-width: 749px) {
  #container .town__cmt--02 {
    width: 22.66667vw;
    top: -7.2vw;
    right: -12.4vw;
  }
}

#container .town__lead {
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 1.9;
  font-size: 20px;
  margin: 20px auto 0;
}

@media screen and (max-width: 749px) {
  #container .town__lead {
    font-size: 3.46667vw;
    margin: 1.73333vw 0 0;
  }
}

#container .town__charactor {
  position: absolute;
  z-index: 3;
}

#container .town__charactor--batgirl {
  top: 190px;
  left: -296px;
}

@media screen and (max-width: 749px) {
  #container .town__charactor--batgirl {
    width: 42.26667vw;
    top: auto;
    bottom: 0;
    left: 1.06667vw;
    z-index: 2;
  }
}

#container .town__charactor--wonderwoman {
  bottom: -254px;
  right: -344px;
  z-index: 4;
}

@media screen and (max-width: 749px) {
  #container .town__charactor--wonderwoman {
    width: 44vw;
    bottom: -11.2vw;
    right: -2.66667vw;
    z-index: 3;
  }
}

#container .town__charactor--supergirl {
  bottom: -300px;
  right: 0;
}

@media screen and (max-width: 749px) {
  #container .town__charactor--supergirl {
    width: 21.86667vw;
    bottom: 0;
    right: 38.4vw;
    z-index: 3;
  }
}

#container .town__cmt {
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}

#container .town__ttl.is-animated .town__cmt--01 {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s, opacity 0.2s ease 0s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

#container .town__ttl.is-animated .town__cmt--02 {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  transition: opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, opacity 0.2s ease 0.2s;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s, opacity 0.2s ease 0.2s, -webkit-transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
}

#container .town__charactor--batgirl {
  opacity: 0;
  -webkit-transform: translateY(-80px);
          transform: translateY(-80px);
}

#container .town__charactor--batgirl.is-animated {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.1s ease 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

#container .town__charactor--wonderwoman, #container .town__charactor--supergirl {
  opacity: 0;
  -webkit-transform: translateX(40px);
          transform: translateX(40px);
}

#container .town__charactor--wonderwoman.is-animated, #container .town__charactor--supergirl.is-animated {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.1s ease 0s;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s, opacity 0.1s ease 0s, -webkit-transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
}

#container .town-slide {
  position: relative;
  z-index: 5;
  width: 820px;
  margin: 35px auto 0;
}

@media screen and (max-width: 749px) {
  #container .town-slide {
    width: 74.66667vw;
    margin: 6vw auto 0;
  }
}

#container .town-slide .slick-list {
  overflow: visible;
}

#container .town-slide__item {
  position: relative;
}

#container .town-slide__img {
  position: relative;
  z-index: 1;
  border: 10px solid #000;
  line-height: 1;
  background: #000;
}

@media screen and (max-width: 749px) {
  #container .town-slide__img {
    border-width: 5px;
  }
}

#container .town-slide__txt {
  position: relative;
  width: 649px;
  height: 148px;
  text-align: center;
  background: url(../images/town_txt_bg.png) 0 0 no-repeat;
  font-size: 18px;
  font-weight: 700;
  margin: -37px auto 0;
  line-height: 1.7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-left: 20px;
  z-index: 2;
}

@media screen and (max-width: 749px) {
  #container .town-slide__txt {
    width: 80vw;
    height: 36.4vw;
    background: url(../images/town_txt_bg_sp.png) 0 0/100% no-repeat;
    font-size: 3.46667vw;
    margin: -3.06667vw 0 0 -2.26667vw;
    line-height: 1.6;
    padding-left: 0;
  }
}

#container .town-slide__txt span {
  display: block;
  font-size: 1.3rem;
  margin-top: 2px;
  font-weight: 500;
}

@media screen and (max-width: 749px) {
  #container .town-slide__txt span {
    font-size: 2.93333vw;
    margin-top: 0.26667vw;
  }
}

#container .town-slide__arrow {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
  top: 187px;
}

@media screen and (max-width: 749px) {
  #container .town-slide__arrow {
    width: 12.66667vw;
    top: 14.66667vw;
  }
}

#container .town-slide__arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#container .town-slide__arrow--prev {
  left: -78px;
}

@media print, screen and (min-width: 750px) {
  #container .town-slide__arrow--prev:hover {
    -webkit-transform: translateX(-10px);
            transform: translateX(-10px);
  }
}

@media screen and (max-width: 749px) {
  #container .town-slide__arrow--prev {
    left: -10vw;
  }
}

#container .town-slide__arrow--next {
  right: -78px;
}

@media print, screen and (min-width: 750px) {
  #container .town-slide__arrow--next:hover {
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
}

@media screen and (max-width: 749px) {
  #container .town-slide__arrow--next {
    right: -10vw;
  }
}

#container .town-thumb-slide {
  margin-top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    margin-top: 4vw;
  }
}

#container .town-thumb-slide__item {
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100%;
  font-size: 0;
  overflow: hidden;
  cursor: pointer;
  margin: 0 -12px;
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 750px) {
  #container .town-thumb-slide__item {
    -webkit-transition: opacity .2s ease-out;
    transition: opacity .2s ease-out;
  }
  #container .town-thumb-slide__item:hover {
    opacity: .9;
  }
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide__item {
    margin: 0 -1.6vw;
  }
}

#container .town-thumb-slide__item.is-active {
  z-index: 2;
  background-position: bottom left;
}

#container .town-thumb-slide__item--01 {
  width: 164px;
  height: 103px;
  background-image: url(../images/town_thumb_01.png);
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide__item--01 {
    width: 21.86667vw;
    height: 13.73333vw;
    -webkit-transform: translateY(3.3vw);
            transform: translateY(3.3vw);
  }
}

#container .town-thumb-slide__item--02 {
  width: 164px;
  height: 106px;
  background-image: url(../images/town_thumb_02.png);
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide__item--02 {
    width: 21.86667vw;
    height: 14.13333vw;
  }
}

#container .town-thumb-slide__item--03 {
  width: 164px;
  height: 100px;
  background-image: url(../images/town_thumb_03.png);
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide__item--03 {
    width: 21.86667vw;
    height: 13.33333vw;
    -webkit-transform: translateY(3.3vw);
            transform: translateY(3.3vw);
  }
}

#container .town-thumb-slide__item--04 {
  width: 164px;
  height: 106px;
  background-image: url(../images/town_thumb_04.png);
}

@media screen and (max-width: 749px) {
  #container .town-thumb-slide__item--04 {
    width: 21.86667vw;
    height: 14.13333vw;
  }
}

#movieOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 100000;
  display: none;
}

#modalMovie {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: 960px;
  max-height: 540px;
  bottom: 50%;
  right: 50%;
  -webkit-transform: translate(50%, 50%);
          transform: translate(50%, 50%);
  display: none;
  z-index: 110000;
}

@media screen and (max-width: 749px) {
  #modalMovie {
    padding: 0 5.333vw;
    height: auto;
    max-height: 100%;
  }
}

#modalMovie .movieBox {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

#modalMovie .movieBox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

#modalMovie .movieBox video {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

#modalMovie .movieBox .modalMovieClose {
  position: absolute;
  top: -40px;
  right: 0;
  width: 30px;
  height: 30px;
  font-size: 0;
  background: url(../images/close_icon.png) 0 0 no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

@media print, screen and (min-width: 750px) {
  #modalMovie .movieBox .modalMovieClose {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  #modalMovie .movieBox .modalMovieClose:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 749px) {
  #modalMovie .movieBox .modalMovieClose {
    top: -30px;
    width: 20px;
    height: 20px;
  }
}

.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  -webkit-transition: opacity .2s ease, visibility 0s .3s;
  transition: opacity .2s ease, visibility 0s .3s;
  pointer-events: none;
  visibility: hidden;
}

.popup.is-active {
  opacity: 1;
  pointer-events: visible;
  visibility: visible;
  -webkit-transition: opacity .2s ease .1s, visibility 0s;
  transition: opacity .2s ease .1s, visibility 0s;
}

.popup__overlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
}

.popup__contents {
  position: absolute;
  width: 1033px;
  height: 465px;
  background: url(../images/popup_bg.png) 0 0 no-repeat;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (max-width: 749px) {
  .popup__contents {
    width: 86.53333vw;
    height: 97.33333vw;
    background: url(../images/popup_bg_sp.png) 0 0/100% no-repeat;
    display: block;
    padding-top: 8.4vw;
  }
}

.popup__close {
  position: absolute;
  cursor: pointer;
  top: -93px;
  right: 3px;
  transition: all 0.15s ease;
  -webkit-transition: all 0.15s ease;
}

@media print, screen and (min-width: 750px) {
  .popup__close:hover {
    opacity: 0.7;
  }
}

@media screen and (max-width: 749px) {
  .popup__close {
    width: 12vw;
    top: -14vw;
    right: 0;
  }
}

.popup__logo {
  width: 267px;
}

@media screen and (max-width: 749px) {
  .popup__logo {
    width: 35.6vw;
    margin: 0 auto;
  }
}

.popup__txt {
  font-size: 21px;
  font-weight: 900;
  margin-left: 50px;
}

@media screen and (max-width: 749px) {
  .popup__txt {
    font-size: 3.73333vw;
    margin: 6vw 8vw 0 9.33333vw;
  }
}

#popup-skill .popup__contents {
  width: auto;
  height: auto;
  background: none;
  border: solid 10px #f9e947;
}

#popup-skill .popup__skill {
  width: 640px;
  height: 360px;
}