@charset "utf-8";
/* CSS Document */
/* ボタンに適用される基本スタイル */

.btn:hover {
  animation-play-state: running; /* ホバー時にアニメーションを再生状態にする */
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background-image: url(../fwpng/btnviewall.png);
    background-position: 50% 0%;
    background-size: auto 100%;
    background-repeat: no-repeat;
	animation: jiggle 20s infinite;
}

/* テキストの不規則なジグザグアニメーション */
@keyframes jiggle {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(-1px, 1px);
  }
  50% {
    transform: translate(0px, -0px);
  }
  75% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

/* ボタンにホバーエフェクトを適用 */
.btn2:hover {
  animation-play-state: paused; /* ホバー時にアニメーションを一時停止 */
}

.btn2 {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    animation: jiggle2 26s infinite;
}

/* テキストの不規則なジグザグアニメーション */
@keyframes jiggle2 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0px, 50px);
  }
  50% {
    transform: translate(0px, 50px);
  }
  75% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.btn3:hover {
  animation-play-state: paused; /* ホバー時にアニメーションを一時停止 */
}

.btn3 {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    animation: jiggle3 32s infinite;
}

/* テキストの不規則なジグザグアニメーション */
@keyframes jiggle3 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0px, 50px);
  }
  50% {
    transform: translate(0px, 50px);
  }
  75% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.btn4:hover {
  animation-play-state: paused; /* ホバー時にアニメーションを一時停止 */
}

.btn4 {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    animation: jiggle4 39s infinite;
}

/* テキストの不規則なジグザグアニメーション */
@keyframes jiggle4 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0px, 50px);
  }
  50% {
    transform: translate(0px, 50px);
  }
  75% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}
.btn5:hover {
  animation-play-state: paused; /* ホバー時にアニメーションを一時停止 */
}

.btn5 {
    display: inline-block;
    padding: 10px 20px;
    color: #ffffff;
    border: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    animation: jiggle4 35s infinite;
}

/* テキストの不規則なジグザグアニメーション */
@keyframes jiggle5 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(0px, 50px);
  }
  50% {
    transform: translate(0px, 50px);
  }
  75% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}