/*web font*/
.wf-mplus1p { font-family: "Mplus 1p";font-weight: 900; }
 
/* yurabutton4 */
.yurabutton4 {
    display: block;
    width: 70%;
    margin: 20px auto;
    border-bottom: 8px solid #53A006;
    border-radius: 10px;
    
    background: #bfd255;
    background: -moz-linear-gradient(top, #bfd255 0%, #8eb92a 50%, #72aa00 51%, #9ecb2d 100%);
    background: -webkit-linear-gradient(top, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
    background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=0 );
 
    color: #ffffff;
    padding: 20px 5px;
    font-size:32px;
    text-align: center;
    text-decoration: none;
 
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: yurabutton4;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurabutton4 {
  0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  88% { transform: scale(1.0, 1.0) translate(0%, 0%); }
  90%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  92%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  94%  { transform: scale(1.0, 1.05) translate(0%, -3%); }
  96%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
  98%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
@media only screen and (max-width: 480px) {
.yurabutton4{
    width: 90%;
    font-size:24px;
    }
}
.yurearrow1{
    color:yellow;
    display: inline-block;
    padding-right:10px;
    position: relative;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: yurearrow1;
    animation-timing-function: ease;
    transform: scale(1);
    transform-origin: center bottom 0;
}
@keyframes yurearrow1{
        0% { left: 0px;}
        25% { left: 5px; }
        50% { left: 0px; }
        75% { left: 5px; }
        100% { left: 0px;}
}