@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
html {
  font-size: 62.5%;
}

html, body, p, div, img, a {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*:before, *:after {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  color: #333;
  font-family: Verdana, "メイリオ", Meiryo, Droid Sans, HiraKakuProN-W3, HiraKakuPro-W3, "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a, a:hover, a:visited, a:link, a:active {
  color: #FFF;
  text-decoration: none;
}

html, body {
  -webkit-overflow-scrolling: auto;
}

img {
  line-height: 0;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  width: 100%;
}

* {
  outline: none;
}

html {
  overflow: auto;
}

body {
  overflow: hidden;
  background: #000;
}

.wrap {
  background: #f1dfc0;
}

.main {
  width: 100%;
  position: relative;
}

.spin {
  -webkit-animation: spin 80s linear infinite;
          animation: spin 80s linear infinite;
  width: 100%;
  margin-left: -18%;
  margin-top: -28%;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.hit_txt {
  position: absolute;
  width: 58.93%;
  top: 14%;
  left: 3%;
}

.miss_txt {
  position: absolute;
  width: 40.4%;
  top: 24%;
  left: 11%;
}

.fadein {
  opacity: 0;
}

.fadein_after {
  opacity: 1;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}

.hit_gara {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
}

.free_sample {
  position: relative;
  width: 95%;
  margin: 10% auto 5%;
}

.txt {
  font-size: 3rem;
  width: 100%;
  padding: 4%;
}

.ct_area {
  margin-top: 5%;
}

footer {
  margin: 0;
  text-align: center;
  background: #000000;
  margin: auto;
  height: 300px;
}

.f_Nvi {
  font-size: 3rem;
  position: relative;
}

.list {
  position: absolute;
  padding-top: 2%;
  margin: auto;
  display: block;
  width: 100%;
  color: #FFF;
}

.cop {
  margin-top: 5%;
  font-size: 2rem;
}

/*//////////////////　 
     ボール　
/////////////////////// */
.ball {
  position: absolute;
  top: 15%;
  right: 32%;
  width: 8.53%;
  opacity: 0;
}

.ball_after {
  position: absolute;
  width: 8.53%;
  top: 15%;
  right: 32%;
  -webkit-animation: ball 1.7s 1 linear alternate;
  animation: ball 1.7s 1 linear alternate;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  opacity: 1;
}

@-webkit-keyframes ball {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  10% {
    -webkit-transform: translate(-100%, 350%);
            transform: translate(-100%, 350%);
  }
  20% {
    -webkit-transform: translate(-140%, 530%);
            transform: translate(-140%, 530%);
  }
  30% {
    -webkit-transform: translate(-180%, 420%);
            transform: translate(-180%, 420%);
  }
  40% {
    -webkit-transform: translate(-220%, 540%);
            transform: translate(-220%, 540%);
  }
  50% {
    -webkit-transform: translate(-260%, 480%);
            transform: translate(-260%, 480%);
  }
  60% {
    -webkit-transform: translate(-280%, 550%);
            transform: translate(-280%, 550%);
  }
  65% {
    -webkit-transform: translate(-290%, 540%);
            transform: translate(-290%, 540%);
  }
  70% {
    -webkit-transform: translate(-300%, 560%);
            transform: translate(-300%, 560%);
  }
  75% {
    -webkit-transform: translate(-310%, 550%);
            transform: translate(-310%, 550%);
  }
  80% {
    -webkit-transform: translate(-315%, 570%);
            transform: translate(-315%, 570%);
  }
  85% {
    -webkit-transform: translate(-320%, 560%);
            transform: translate(-320%, 560%);
  }
  90% {
    -webkit-transform: translate(-325%, 580%);
            transform: translate(-325%, 580%);
  }
  95% {
    -webkit-transform: translate(-330%, 570%);
            transform: translate(-330%, 570%);
  }
  100% {
    -webkit-transform: translate(-335%, 580%) rotate(-15deg);
            transform: translate(-335%, 580%) rotate(-15deg);
  }
}

@keyframes ball {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  10% {
    -webkit-transform: translate(-100%, 350%);
            transform: translate(-100%, 350%);
  }
  20% {
    -webkit-transform: translate(-140%, 530%);
            transform: translate(-140%, 530%);
  }
  30% {
    -webkit-transform: translate(-180%, 420%);
            transform: translate(-180%, 420%);
  }
  40% {
    -webkit-transform: translate(-220%, 540%);
            transform: translate(-220%, 540%);
  }
  50% {
    -webkit-transform: translate(-260%, 480%);
            transform: translate(-260%, 480%);
  }
  60% {
    -webkit-transform: translate(-280%, 550%);
            transform: translate(-280%, 550%);
  }
  65% {
    -webkit-transform: translate(-290%, 540%);
            transform: translate(-290%, 540%);
  }
  70% {
    -webkit-transform: translate(-300%, 560%);
            transform: translate(-300%, 560%);
  }
  75% {
    -webkit-transform: translate(-310%, 550%);
            transform: translate(-310%, 550%);
  }
  80% {
    -webkit-transform: translate(-315%, 570%);
            transform: translate(-315%, 570%);
  }
  85% {
    -webkit-transform: translate(-320%, 560%);
            transform: translate(-320%, 560%);
  }
  90% {
    -webkit-transform: translate(-325%, 580%);
            transform: translate(-325%, 580%);
  }
  95% {
    -webkit-transform: translate(-330%, 570%);
            transform: translate(-330%, 570%);
  }
  100% {
    -webkit-transform: translate(-335%, 580%) rotate(-15deg);
            transform: translate(-335%, 580%) rotate(-15deg);
  }
}