@charset "UTF-8";
/* ボタン - 基本 */
.button-simple {
    position: relative;
    font-weight: bold;
    padding: 5px 15px;
    margin: 0px 5px;
    border-radius: 30px;/*角の丸み*/
    font-size: 18px;/*文字サイズ*/
    background-color: #00a41a;/*背景色*/
    color: #fff;/*文字色*/
    display: inline-block;
    text-shadow: 1px 1px 0px rgb(0, 0, 0, 0.3);
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
a:hover .button-simple {
    background-color: #cc0000;/*触れたときの背景色*/
    color: #fff;/*触れたときの文字色*/
    box-shadow: 0 0px 0 rgb(0, 0, 0, 0.3);
    animation-play-state: paused;
    top: 3px;
}

/* ボタン動き - ぺこぺこ */
.pekopeko {
    animation: pekopeko 2s infinite;
    box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
}
@keyframes pekopeko {
    0% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    10% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    20% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
    30% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }
    40% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
}

/* ボタン光る - shiny */
.shiny:hover {
    text-decoration: none;
    color: #fff;
    box-shadow: none;
    -webkit-transform: translateY(3px);
}
.shiny::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    transition: 0.2s;
    animation: shiny 2.5s ease-in-out infinite;
}
@-webkit-keyframes shiny {
    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; }
}