@charset "UTF-8";

/*------------------------------------------------------
  光るボタン
------------------------------------------------------*/
.shiny-btn {
  position: relative;
  overflow: hidden;
}
.shiny-btn::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 8.4%;
  height: 100%;
  transform: scale(2) rotate(20deg) translate3d(0, 0, 0);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  /* アニメーション */
  -webkit-animation-name: shiny;
  animation-name: shiny;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* アニメーション */
@-webkit-keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}
@keyframes shiny {
  0% {
    left: -20%;
  }
  10% {
    left: 120%;
  }
  100% {
    left: 120%;
  }
}

/*------------------------------------------------------
  フワフワボタン
------------------------------------------------------*/
.updown {
  -webkit-animation-name: updown;
  animation-name: updown;
  /* アニメーション名の指定 */
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  /* アニメーションの開始時間指定 */
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  /* アニメーション動作時間の指定 */
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  /* アニメーションの動き指定（徐々に早く）*/
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes updown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes updown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0);
  }
}