@charset "utf-8";

@import "../../../common/css/layout.css";

/*-------------------------------------------------------------------------
  Key Visual
/*-----------------------------------------------------------------------*/

#kv {
}
img {
  width: 100%;
  height: auto;
}

#container {
  position: relative;
}

.logo-3ds {
  width: 34.13%;
  position: absolute;
  top: 0.42%;
  right: 2%;
  z-index: 10;
}

#key-visual {
  position: relative;
}
  #key-visual .badge {
    position: absolute;
    bottom: 2%;
    right: 2%;
    width: 35.33%;
    z-index: 15;
  }

/*-------------------------------------------------------------------------
  title01
/*-----------------------------------------------------------------------*/
#title01 .parts01 .anm img{
  position: relative;
}
  #title01 .parts01 .anm img{
    transition: all 0.3s ease-out;
    width: 43%;
    top: -142vw;
    right: -115%;
  }
  #title01 .show .parts01 img{
    right: -58%;
  }
  #title01 .parts01 .title{
    position: relative;
    width: 70%;
    top: -193vw;
  }

#title01 .parts02{
  margin-top: -150vw;
}
#title01 .parts02 .anm img{
  position: relative;
}
  #title01 .parts02 .anm img{
    transition: all 0.3s ease-out;
    width: 43%;
    top: 0vw;
  }
  #title01 .parts02 .chara00.anm img{
    transition: all 0.3s ease-out;
    width: 30%;
    top: 0vw;
    transform: scale(0);
    left: 10%;
    transition-delay: 1.1s;
  }
    #title01 .parts02 .chara01.anm img{
    transition: all 0.3s ease-out;
    width: 29%;
    top: -24vw;
    transform: scale(0);
    left: 42%;
    transition-delay: 0.5s;
  }
    #title01 .parts02 .chara02.anm img{
    transition: all 0.3s ease-out;
    width: 26%;
    top: -67vw;
    transform: scale(0);
    left: 73%;
    transition-delay: 0.8s;
  }
  #title01 .show .parts02 .chara00 img,
  #title01 .show .parts02 .chara01 img,
  #title01 .show .parts02 .chara02 img{
    transform: scale(1);
  }

#title01 .parts03{
  margin-top: -58.7vw;
}


#title01 .rotate_frame  {
    width: 80%;
    top: -64vw;
    position: relative;
    left: 13%;
}
    #title01 .video {
      width: 93.96%;
      border: solid 8px #ffe600;
      transform: skewY(-5deg);
      overflow: hidden;
      height: 45vw;
    }
      #title01 .video iframe {
        transform: skewY(5deg) rotate(-5deg) scale(1.1);
      }

#title01 .parts04{
margin-top: -45.5vw;
}
#title01 .parts04 .chara00.anm img,
#title01 .parts04 .chara01.anm img,
#title01 .parts04 .chara02.anm img{
  position: relative;
}
  #title01 .parts04 .chara00.anm img{
      transition: all 0.3s ease-out;
      width: 25%;
      top: -44vw;
      transform: scale(0);
      left: 0;
      transition-delay: 1.1s;
  }
    #title01 .parts04 .chara01.anm img{
      transition: all 0.3s ease-out;
      width: 29%;
      top: -80vw;
      transform: scale(0);
      left: 56%;
      transition-delay: 0.5s;
          z-index: 1;
  }
    #title01 .parts04 .chara02.anm img{
      transition: all 0.3s ease-out;
      width: 26%;
      top: -130vw;
      transform: scale(0);
      left: 74%;
      transition-delay: 0.8s;
  }
  #title01 .show .parts04 .chara00 img,
  #title01 .show .parts04 .chara01 img,
  #title01 .show .parts04 .chara02 img{
    transform: scale(1);
  }
#title01 .btn{
    width: 64%;
    margin-left: 18%;
    margin-top: -133vw;
    position: relative;
    z-index: 2;
    margin-bottom: 1vw;     
}

/*-------------------------------------------------------------------------
  title02
/*-----------------------------------------------------------------------*/
#title02 .parts01 .anm img{
  position: relative;
}
  #title02 .parts01 .chara00.anm img{
    transition: all 0.3s ease-out;
    width: 49%;
    top: -115vw;
    right: -115%;
    transition-delay: 0.7s;
  }
  #title02 .show .parts01 .chara00 img{
    right: -51%;
  }

  #title02 .parts01 .chara01.anm img{
    transition: all 0.3s ease-out;
    width: 39%;
    top: -109vw;
    left: -115%;
    transition-delay: 0.5s;
  }
  #title02 .show .parts01 .chara01 img{
    left: 0%;
  }
#title02 .parts02{
  margin-top: -120vw;
}

#title02 .slide_frame{
  width: 100%;
  margin-top: -89vw;
}

#title02 .rotate_frame  {
    width: 77%;
    top: -57vw;
    position: relative;
    left: 14%;
    z-index: 2;
}
    #title02 .video {
      width: 93.96%;
      border: solid 8px #000;
      transform: skewY(-5deg);
      overflow: hidden;
      height: 39vw;
    }
      #title02 .video iframe {
        transform: skewY(5deg) rotate(-5deg) scale(1.1);
      }
.slick-dots{
    position: relative !important;
    top: -53vw;
    transform: rotate(-5deg);
}
  .slick-dots li{
      width: 4vw !important;
      height: 4vw  !important;
      border-radius: 50px  !important;
      background-color: #000  !important;
      border: 4px solid #000 !important;
  }
    .slick-dots li button{
      display: none !important;
    }
    .slick-dots li.slick-active{
        background-color: yellow  !important;
    }
.prev-arrow{
    left: 1%;
    width: 8%;
    position: relative;
    top: 46vw;
    z-index: 1;
}
.next-arrow{
    width: 8%;
    position: relative;
    left: 91%;
    top: -85vw;
    z-index: 1;
}
@keyframes arrow-move-right {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  70% {
    -webkit-transform: translate3d(-10%, 0, 0);
            transform: translate3d(-10%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes arrow-move-left {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  70% {
    -webkit-transform: translate3d(10%, 0, 0);
            transform: translate3d(10%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
  .next-arrow{
  -webkit-animation: arrow-move-right 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: arrow-move-right 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
  .prev-arrow{
  -webkit-animation: arrow-move-left  0.7s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  animation: arrow-move-left  0.7s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  }
/*-------------------------------------------------------------------------
  title03
/*-----------------------------------------------------------------------*/

#title03{
  margin-top: -61vw;
}

#title03 .rotate_frame  {
    width: 80%;
    top: -97vw;
    position: relative;
    left: 13%;
}
    #title03 .video {
      width: 93.96%;
      border: solid 8px #ffe600;
      transform: skewY(-5deg);
      overflow: hidden;
      height: 45vw;
    }
      #title03 .video iframe {
        transform: skewY(5deg) rotate(-5deg) scale(1.1);
      }

#title03 .isCharacter{
  margin-top: -200vw;
}
#title03 .chara01.anm img{
  position: relative;
}
  #title03 .chara01.anm img{
    transition: all 0.3s ease-out;
    width: 58%;
    top: -0vw;
    right: -150%;
  }
  #title03 .show .chara01 img{
    right: -44%;
  }


#title03 .chara02.anm img{
  position: relative;
}
  #title03 .chara02.anm img{
    transition: all 0.3s ease-out;
    width: 56%;
    top: 39vw;
    transform: scale(0);
  }
  #title03 .show .chara02 img{
    transform: scale(1);
  }

#title03 .title{
  position: relative;
  top: -130vw;
  width: 91%;
}
#title03 .copy{
    position: relative;
    top: -34vw;
    width: 56%;
    left: 44%;
}

/*-------------------------------------------------------------------------
  footer_nav
/*-----------------------------------------------------------------------*/

#footer_nav {
  margin-top:-47vw
}