@charset "UTF-8";

/* ----------------------
    赤ボタンの設定
--------------------- */
.btn01 a{
    display: block;
    position: relative;
	margin:0 auto;
    width: 100%;
	max-width:450px;
    text-align:center;
    text-decoration: none;
    font-weight: bold;
    font-size: 30px;
    line-height: 1;
    color: #fff;
    text-shadow: 2px 2px 0 #bf0100;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #999;
    /* 背景色 */
    background: #f46d14;
    background: -moz-linear-gradient(top, #f46d14 0%, #f46d14 25%, #f3cbb1 50%, #f46d14 75%, #f46d14 100%);
    background: -webkit-linear-gradient(top, #f46d14 0%,#f46d14 25%,#f3cbb1 50%,#f46d14 75%,#f46d14 100%);
    background: linear-gradient(to bottom, #f46d14 0%,#f46d14 25%,#f3cbb1 50%,#f46d14 75%,#f46d14 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f46d14', endColorstr='#f46d14',GradientType=0 );
    /* アニメーション */
    -webkit-animation: button-bounce 2200ms forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-animation: button-bounce 2200ms forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: button-bounce 2200ms forwards infinite cubic-bezier(0.165, 0.84, 0.44, 1);
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.btn01 a:after {
    background-color: #CD597A;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -webkit-animation: button-blip 2200ms forwards infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: button-blip 2200ms forwards infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: button-blip 2200ms forwards infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@-webkit-keyframes button-bounce {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.96);
    }
    20% {
        transform: scale(1.04);
    }
    52%,
    100% {
        transform: scale(1);
    }
}
@-moz-keyframes button-bounce {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.96);
    }
    20% {
        transform: scale(1.04);
    }
    52%,
    100% {
        transform: scale(1);
    }
}
@keyframes button-bounce {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(0.96);
    }
    20% {
        transform: scale(1.04);
    }
    52%,
    100% {
        transform: scale(1);
    }
}
@-webkit-keyframes button-blip {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
    10% {
        transform: scaleX(1) scaleY(1);
        opacity: .7;
    }
    30%,
    99% {
        transform: scaleX(1.08) scaleY(1.35);
        opacity: 0;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
}
@-moz-keyframes button-blip {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
    10% {
        transform: scaleX(1) scaleY(1);
        opacity: .7;
    }
    30%,
    99% {
        transform: scaleX(1.08) scaleY(1.35);
        opacity: 0;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
}
@keyframes button-blip {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
    10% {
        transform: scaleX(1) scaleY(1);
        opacity: .7;
    }
    30%,
    99% {
        transform: scaleX(1.08) scaleY(1.35);
        opacity: 0;
    }
    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 0;
    }
}

/* ----------------------
    緑ボタンの設定
--------------------- */
.btn02 a{
    display: block;
    margin:0 auto;
    width: 100%;
    max-width:450px;
    text-align:center;
    text-decoration: none;
    font-size: 30px;
    line-height: 1;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 0 #0f3a6e;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #999;
    /* 背景色 */
    background: #2662ab;
    background: -moz-linear-gradient(top, #2662ab 0%, #2662ab 25%, #b6cfec 50%, #2662ab 75%, #2662ab 100%);
    background: -webkit-linear-gradient(top, #2662ab 0%,#2662ab 25%,#b6cfec 50%,#2662ab 75%,#2662ab 100%);
    background: linear-gradient(to bottom, #2662ab 0%,#2662ab 25%,#b6cfec 50%,#2662ab 75%,#2662ab 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2662ab', endColorstr='#2662ab',GradientType=0 );
    /* アニメーション */
    animation: prun 2.2s ease-in infinite;
    -webkit-animation: prun 2.2s ease-in infinite;
    -moz-animation: prun 2.2s ease-in infinite;
    -o-animation: prun 2.2s ease-in infinite;
    -ms-animation: prun 2.2s ease-in infinite;
}
@keyframes prun {
    48%, 62% {transform: scale(1.0, 1.0)}
    50% {transform: scale(1.1, 0.9)}
    56% {transform: scale(0.9, 1.1) translate(0, -5px)}
    59% {transform: scale(1.0, 1.0) translate(0, -3px)}
}


p[class^="btn"] a span.text_s{
    font-size: 14px;
    text-shadow: none;
}
p[class^="btn"] a span.bold{
    font-size: 1em;
    color: #ffd202;
    border-bottom: none;
}

/* SP（幅狭いデバイス） */
@media screen and (max-width: 320px) {
    p[class^="btn"] a{ font-size: 28px;}
}