@charset "utf-8";

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

/*-------------------------------------------------------------------------
  Title
/*-----------------------------------------------------------------------*/

#ttl .anm {
  width: 40.14%;
  position: absolute;
  top: 14%;
  right: 0;
}
#ttl.isCharacter .anm {
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
#ttl.isCharacter.show .anm {
  transition-delay:0s;
  transform: scale(1);
}


/*-------------------------------------------------------------------------
  Part 1
/*-----------------------------------------------------------------------*/

#part1 {
    margin-top: -9%;
    padding: 9% 0 7%;
    background: url(../img/part1/bg.png) no-repeat center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: relative;
}
    #part1 h2 {
        margin-left: 3.2%;
        width: 55.14%;
    }
    #part1 > .anm {
        display: inline-block;
        vertical-align: top;
    }
    #part1 #num00 {
        width: 23.96%;
        margin: 1% 0 0 5%;
    }
    #part1 #num02 {
        width: 13.26%;
        margin: 1% 0 0 -0.6%;
    }
    #part1 #slp {
        width: 10.97%;
        margin: -2% 0 0 -0.6%;
    }
    #part1 h3 {
        margin: 4% 0 0 10.4%;
        width: 33.82%;
    }
    #part1 .video,
    #part3 .video {
      width: 34.75%;
      margin: 1% 0 8% 10.4%;
      padding-bottom: 19.95%;
      border: solid 8px #ffe600;
      transform: skewY(-5deg);
      overflow: hidden;
      position: relative;
    }
      #part1 .video .inner,
      #part3 .video .inner {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: absolute;
        transform: skewY(5deg) rotate(-5deg) scale(1.06);
      }
    #part1 .txt {
        width: 41.46%;
        position: absolute;
        top: 43.4%;
        right: 10.4%;
    }
    #part1 #gunner {
        position: relative;
    }
        #part1 #gunner .thumbs {
            width: 25.00%;
            margin: -3% 0 0 36%;
        }
        #part1 #gunner .balloon {
            width: 18.47%;
            position: absolute;
            top: -17%;
            left: 23%;
        }
        #part1 #gunner .btn {
            width: 26.46%;
            margin-left: 35%;
        }
        #part1 #gunner .anm {
            position: absolute;
        }
        #part1 #gunner #sheep {
            width: 16.94%;
            right: 23%;
            bottom: 9%;
        }
        #part1 #gunner #mouce {
            width: 19.79%;
            left: 10%;
            bottom: -4%;
        }
        #part1 #gunner #bull {
            width: 20.14%;
            right: 7%;
            bottom: 10%;
        }

#part1 .isCharacter.anm,
#part1 #gunner.isCharacter .anm {
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
#part1 .isCharacter.show.anm,
#part1 #gunner.isCharacter.show .anm {
  transition-delay:0s;
  transform: scale(1);
}
  #part1 .isCharacter.show.anm#num00 {
    transition-delay: 1s;
  }
  #part1 .isCharacter.show.anm#num02 {
    transition-delay: .4s;
  }
  #part1 .isCharacter.show.anm#slp {
    transition-delay: .6s;
  }

  #part1 #gunner.isCharacter.show .anm#mouce {
    transition-delay: 1s;
  }
  #part1 #gunner.isCharacter.show .anm#bull {
    transition-delay: .4s;
  }
  #part1 #gunner.isCharacter.show .anm#sheep {
    transition-delay: .6s;
  }

/*-------------------------------------------------------------------------
  Part 2
/*-----------------------------------------------------------------------*/

#part2 {
    margin-top: -9%;
    padding: 9% 0;
    background: url(../img/part2/bg.png) no-repeat center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: relative;
    z-index: 1
}
    #part2 h2 {
        width: 45.49%;
        margin-left: 2%;
    } 
    #part2 .thumbs {
        width: 49.44%;
        margin: -.5% 0 0 10.4%;
    }
    #part2 .slider {
        width: 37.50%;
        margin-top: 4%;
        background: #000;
        transform: skewY(-5deg);
        position: relative;
        left: 23%;
    }
        #part2 .slider .ttl {
          margin: 0 auto;
          padding-top: 3%;
          transform: skewY(5deg);
        }
        #part2 .slider .txt {
          margin: 0 auto;
          padding: 0 0 1%;
          transform: skewY(5deg);
        }
        #part2 .slider .box {
            width: 87.04%;
            margin: 0 auto;
            padding-top: 48.96%;
            transform: skewY(0deg);
            overflow: hidden;
            position: relative;
        }
          #part2 .slider .box iframe {
            transform: skewY(5deg) rotate(-5deg) scale(1.14);
          }
        #part2 .slider .slide01 .ttl {
            width: 43.15%;
        }
        #part2 .slider .slide01 .txt {
            width: 50.74%;
        }
        #part2 .slider .slide02 .ttl {
            width: 42.59%;
        }
        #part2 .slider .slide02 .txt {
            width: 61.48%;
        }
        #part2 .slider .slide03 .ttl {
            width: 33.33%;
        }
        #part2 .slider .slide03 .txt {
            width: 61.30%;
        }
        #part2 .slider .slide04 .ttl {
            width: 38.33%;
        }
        #part2 .slider .slide04 .txt {
            width: 57.59%;
        }
        #part2 .slider .slide05 .ttl {
            width: 43.52%;
        }
        #part2 .slider .slide05 .txt {
            width: 66.11%;
        }
        #part2 .slider .slide06 .ttl {
            width: 37.78%;
        }
        #part2 .slider .slide06 .txt {
            width: 74.81%;
        }
        #part2 .slider .slide07 .ttl {
            width: 52.96%;
        }
        #part2 .slider .slide07 .txt {
            width: 54.07%;
        }
        #part2 .slider .slide08 .ttl {
            width: 44.26%;
        }
        #part2 .slider .slide08 .txt {
            width: 94.07%;
        }


  #part2 .slick-next,
  #part2 .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;
  }

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

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

  #part2 .ttl02 {
    width: 26.67%;
    position: absolute;
    bottom: 18%;
    right: 5%;
  }
  #part2 .anm {
    position: absolute;
  }
  #part2 #chara01 {
    width: 44.24%;
    top: 4%;
    right: 0;
  }
  #part2 #enemy01 {
    width: 22.57%;
    bottom: 31%;
    left: 0;
  }
  #part2 #enemy02 {
    width: 18.33%;
    bottom: 10%;
    left: 0;
  }
  #part2 #enemy03 {
    width: 17.36%;
    bottom: 9%;
    right: 1%;
  }

#part2 .isCharacter.anm {
  opacity: 0;
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
  #part2 .isCharacter.show.anm {
    opacity: 1;
    transition: all .5s ease-out;
    transform: scale(1);
  }
  #part2 .isCharacter.anm#chara01,
  #part2 .isCharacter.anm#enemy03 {
    right: -100%;
  }
  #part2 .isCharacter.anm#enemy01,
  #part2 .isCharacter.anm#enemy02 {
    left: -100%;
  }
  #part2 .isCharacter.show.anm#chara01 {
    right: 0;
  }
  #part2 .isCharacter.show.anm#enemy01,
  #part2 .isCharacter.show.anm#enemy02 {
    left: 0;
  }
  #part2 .isCharacter.show.anm#enemy03 {
    right: 1%;
  }



/*-------------------------------------------------------------------------
  Part 3
/*-----------------------------------------------------------------------*/

#part3 {
    margin-top: -9%;
    padding: 5% 0 3%;
    background: url(../img/part3/bg.jpg) no-repeat center top;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: relative;
    z-index: 0;
}
    #part3 h2 {
        width: 87.15%;
        margin-left: 2%;
    } 
    #part3 .video {
      margin: 0 0 3% 32%;
    }
    #part3 .copy {
        width: 33.82%;
        margin-left: 32%;
    } 
  #part3 .anm {
    position: absolute;
  }
  #part3 #dillon {
    width: 33.13%;
    top: 24%;
    right: 0;
  }
  #part3 #enemy04 {
    width: 30.90%;
    bottom: 3%;
    left: 1%;
  }

#part3.isCharacter .anm {
  opacity: 0;
  transform: scale(0);
  transition: transform .5s;
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.650);
}
  #part3.isCharacter.show .anm {
    opacity: 1;
    transition: all .5s ease-out;
    transform: scale(1);
  }
  #part3.isCharacter .anm#dillon {
    right:  -100%;
  }
  #part3.isCharacter .anm#enemy04 {
    left: -100%;
  }
  #part3.isCharacter.show .anm#dillon {
    right: 0;
  }
  #part3.isCharacter.show .anm#enemy04 {
    left: 1%;
    transition-delay: .3s;
  }