/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/


/* ボタンの動き
-------------------------------------------- */

/*ボタンをバウンドさせる*/

.bound {
  -webkit-animation: 'bound' 4s ease-in 0s infinite;
}
@-webkit-keyframes 'bound' {
  0%{ -webkit-transform: scale(1, 1); }
  48%{ -webkit-transform: scale(1, 1); }
  50%{ -webkit-transform: scale(1.1, 0.9); }
  53%{ -webkit-transform: scale(0.9, 1.1) translate(0, -3px); }
  57.5%{ -webkit-transform: scale(1, 1) translate(0, -1px); }
  59%{ -webkit-transform: scale(1, 1) translate(0, 0px); }
  100% { -webkit-transform: scale(1, 1); }
}


/*ボタンを光らせる*/

.button-block.flash {
  overflow: hidden;
}
.flash a:after {
  -moz-animation: flash 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: flash 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: flash 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: flash 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: flash 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}

.flash + .flash a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

@keyframes flash {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}

@-webkit-keyframes flash {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}