@charset "utf-8";

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


body {
    background: url(../img/bg.jpg) repeat-y center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
/*-------------------------------------------------------------------------
  Title
/*-----------------------------------------------------------------------*/

#ttl .anm {
  width: 38.40%;
  position: absolute;
  top: 6%;
  right: 5%;
}
#ttl.isCharacter .anm {
  opacity: 0;
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
  right: -100%;

}
#ttl.isCharacter.show .anm {
  opacity: 1;
  transition-delay:0s;
  transform: scale(1);
  transition: all .4s ease-out;
  right: 5%;
}


/*-------------------------------------------------------------------------
  Main
/*-----------------------------------------------------------------------*/

    #main .bln {
        width: 22.36%;
        margin-left: 4%;
        display: inline-block;
        vertical-align: top;
    }
    #main h2 {
        width: 28.26%;
        margin-top: 3%;
        display: inline-block;
        vertical-align: top;
    }
    #main .wrap {
        margin-top: -2%;
    }
    #main .settlement {
        width: 53.22%;
        float: left;
        margin-left: -2%;
    }
    #main .city {
        width: 48.23%;
        float: right;
        margin-top: -4.6%;
    }


/*-------------------------------------------------------------------------
  Gunner
/*-----------------------------------------------------------------------*/

#gunner {
    width: 100%;
    margin-top: -2%;
    overflow: hidden;
}
    #gunner .wrap {
        padding: 8% 0 11%;
        background: url(../img/gunner/bg.png) no-repeat center top;
        -webkit-background-size: 100% auto;
        background-size: 100% auto;
        position: relative;
    }
    #gunner .bln {
        width: 28.30%;
        margin-left: -4%;
    }
    #gunner h2 {
        width: 39.87%;
        position: absolute;
        top: 7%;
        left: 26%;
    }
    #gunner h3 {
        width: 43.25%;
        margin: -2% 0 2% 16%;
        display: inline-block;
        vertical-align: top;
    }

    #gunner .slider {
        width: 44%;
        margin-top: -3%;
        transform: skewY(-5deg);
        position: relative;
        left: 16%;
        z-index: 1;
    }
        #gunner .slider .weapon {
            width: 100%;
            transform: skewY(5deg);
        }
        #gunner .anm {
            position: absolute;
            z-index: 0;
        }
        #gunner #chara01 {
            width: 27.25%;
            right: 0;
            top: 12%;
        }
        #gunner #chara02 {
            width: 23.55%;
            right: 19%;
            top: 21%;
        }
        #gunner #chara03 {
            width: 28.05%;
            right: 4%;
            top: 35.5%;
        }


  #gunner .slick-next,
  #gunner .slick-prev {
    background-position: left top;
    background-repeat: no-repeat;
    width: 5vw;
    height: 8vw;
    text-indent: -9999px;
    z-index: 10;
    margin-top: -4%;
    background-size: 100%;
    transition: all .1s ease-out;
  }

  #gunner .slick-next {
    background-image: url(../img/gunner/slide/btn_next_off.png);
    animation: btnNext .8s ease infinite alternate;
    top: 45%;
    right: -18%;
  }
@keyframes btnNext {
  0% { transform: translateX(0); }
  16% { transform: translateX(8px);}
  32% { transform: translateX(0);}
  100% { transform: translateX(0);}
}
  #gunner .slick-prev {
    background-image: url(../img/gunner/slide/btn_prev_off.png);
    animation: btnPrev .8s ease infinite alternate;
    top: 45%;
    left: -18%;
  }
@keyframes btnPrev {
  0% { transform: translateX(0); }
  16% { transform: translateX(-8px);}
  32% { transform: translateX(0);}
  100% { transform: translateX(0);}
}

  #gunner .slick-next:hover {
    background-image: url(../img/gunner/slide/btn_next_on.png);
    animation-play-state: paused;
  }
  #gunner .slick-prev:hover {
    background-image: url(../img/gunner/slide/btn_prev_on.png);
    animation-play-state: paused;
  }
  #gunner .slick-list {
    margin-bottom: 1.5%;
    overflow: visible;
  }
  #gunner .slick-dots {
    bottom: -10px;
    transform: skewY(5deg) rotate(-5deg);
  }
  #gunner .slick-dots li {
    width: 1.2vw;
    height: 1.2vw;
    border-radius: 50px;
    background-color: #000;
    margin: 0 2%;
  }
    #gunner .slick-dots li button {
      display: none;
    }
  #gunner .slick-dots li.slick-active {
    background-color: #ffe600;
    border: solid 0.3vw #000;
  }

    #gunner h3.ttl02 {
        width: 72.83%;
        margin: 6% 0 0 22%;
        display: inline-block;
        vertical-align: top;
        position: relative;
        z-index: 1;
    }

     #gunner #thumbs {
        margin: 2% 0 0 6%;
        position: relative;
        z-index: 1;
     }
         #gunner #thumbs li {
            width: 30.22%;
            float: left;
            margin-right: 2%;
         }
         #gunner #thumbs li:nth-child(2) {
            margin-top: -2.8%;
         }
         #gunner #thumbs li:nth-child(3) {
            margin-top: -5.6%;
         }
         #gunner #thumbs li:last-child {
            margin-right: 0;
         }
    #gunner #chara05 {
        width: 28.70%;
        left: -4%;
        bottom: 25.6%;
        z-index: 0;
    }


#gunner .isCharacter.anm {
  opacity: 0;
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
  right: -100%;

}
#gunner .isCharacter.show.anm {
  opacity: 1;
  transform: scale(1);
  transition: all .4s ease-out;
}
#gunner .isCharacter.anm#chara01 {
    right: -30%;
}
#gunner .isCharacter.anm#chara02 {
    right: -11%;
}
#gunner .isCharacter.anm#chara03 {
    right: -26%;
}

#gunner .isCharacter.show.anm#chara01 {
    right: 0;
    transition-delay:0s;
}
#gunner .isCharacter.show.anm#chara02 {
    right: 19%;
    transition-delay:.2s;
}
#gunner .isCharacter.show.anm#chara03 {
    right: 4%;
    transition-delay:.3s;
}



#gunner .isCharacter.anm#chara05 {
    opacity: 0;
    left: 24%;
}
#gunner .isCharacter.show.anm#chara05 {
    opacity: 1;
    transition: all .5s ease-out;
    left: -4%;
}


/*-------------------------------------------------------------------------
  Footer
/*-----------------------------------------------------------------------*/
#footer {
  margin-top: -9%;
  width: 100%;
}