@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;
  }

#key-visual .parts01 .anm img{
  position: relative;
}
  #key-visual .parts01 .anm img{
    transition: all 0.3s ease-out;
    width: 47%;
    top: -75vw;
    right: -115%;
  }
  #key-visual .show .parts01 img{
    right: -50%;
  }

/*-------------------------------------------------------------------------
  settlement
/*-----------------------------------------------------------------------*/
#settlement{
  margin-top: -50.5vw;
}
#settlement p:nth-of-type(3){
  margin-top: -0.5vw;
}
/*-------------------------------------------------------------------------
  settlement
/*-----------------------------------------------------------------------*/
#gunner{
  margin-top: -0.5vw;
}
#gunner p:nth-of-type(2){
  margin-top: -0.5vw;
}

#gunner .mb-adjust{
  margin-bottom: -125vw;
}
#gunner .parts001 .anm img{
  position: relative;
}
  #gunner .parts001 .anm img{
    transition: all 0.3s ease-out;
    width: 36%;
    top: -59vw;
    right: -115%;
    transition-delay: 0.4s;
  }
  #gunner.show .parts001 img{
    right: -47%;
  }

#gunner .parts002 .anm img{
  position: relative;
}
  #gunner .parts002 .anm img{
    transition: all 0.3s ease-out;
    width: 29%;
    top: -97vw;
    right: -115%;
  }
  #gunner.show .parts002 img{
    right: -67%;
    transition-delay: 0.2s;
  }

#gunner .parts003 .anm img{
  position: relative;
}
  #gunner .parts003 .anm img{
    transition: all 0.3s ease-out;
    width: 35%;
    top: -125vw;
    right: -115%;
  }
  #gunner.show .parts003 img{
    right: -34%;
  }




#gunner .slide_frame{
  margin-top: -84vw;
}

#gunner .slick-dots{
    position: relative !important;
    top: -14vw;
    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: 3.5%;
    width: 8%;
    position: relative;
    top: 42vw;
    z-index: 1;
}
.next-arrow{
    width: 8%;
    position: relative;
    left: 89%;
    top: -45vw;
    z-index: 1;
}
.prev-arrow{
  }
#gunner .gunner_arrange{
  margin-top: -74vw;
}

#gunner .parts01 .anm img{
  position: relative;
}
  #gunner .parts01 .anm img{
    transition: all 0.3s ease-out;
    width: 38%;
    top: -26vw;
    left: -115%;
  }
  #gunner .show .parts01 img{
    left: 0%;
  }

#gunner .gunner_balance{
  margin-top: 0vw;
}

@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;
  }




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

#footer_nav {
  margin-top:-24vw
}