/* 参考: https://thesaibase.com/design/css-cv-buttons */

.btn-cv-apply .btn-cv-text {
    height: 60px;
    width: 230px;
    font-size: 20px;
    /* cursor: pointer; */
}

.btn-cv-apply-sp .btn-cv-text {
    height: 100px;
    width: 540px;
    font-size: 36px;
    /* cursor: pointer; */
}

.btn-cv-text-last-sp {
    padding-left: 145px !important;
}

.btn-cv-text-main,
.btn-cv-text-sub {
    display: block;
    text-align: left;
}
.btn-cv-text-main {
    font-size: .75em;
}
.btn-cv-text-sub {
    font-size: .5em;
}
.btn-cv-text-sub-adjust {
    margin-top: -2.5px;
}
.btn-cv-text-sub-adjust-sp {
    margin-top: -5px;
}

/* 
 * コンバージョンボタン
 */
.btn-cv {
    padding: .5em 0;
    overflow: hidden;
    position: relative;
}
.btn-cv .btn-cv-text {
    /* border: solid #fff 3px; */
    border-radius: 10px;
    /* box-shadow: 1px 1px 10px 0 #a1a1a1; */
    color: #fff;
    display: block;
    /* font-size: 1.6em; */
    font-weight: bold;
    /* line-height: 1.3; */
    /* margin: 2em auto; */
    padding: .65em 2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    /* vertical-align: middle; */
    /* width: 59%; */
}

/* ボタン内のアイコン */
.btn-cv .btn-cv-text:before {
    font-family: "Font Awesome 5 Free";
    content: "\f054";
    margin-top: -.6em;
    position: absolute;
    top: 50%;
    right: 15px;
}
/* オン */
.on > .btn-cv .btn-cv-text:hover {
    /* box-shadow: 1px 1px 2px 0 #a1a1a1; */
    filter: alpha(opacity=70);
    opacity: .7;
}

/* オレンジボタン（オン） */
.on > .btn-cv .btn-cv-text {
    background: #f66;
    background: -webkit-linear-gradient(#f66, #f33);
    background: linear-gradient(#f66, #f33);
    /* text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1); */
}

/* オレンジボタン（オフ） */
.btn-cv .btn-cv-text {
    background: #ccc;
    background: -webkit-linear-gradient(#ccc, #999);
    background: linear-gradient(#ccc, #999);
    /* text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1); */
}

/* ボタンの光沢 */
.is-reflection .btn-cv-text {
    overflow: hidden;
}
.is-reflection .btn-cv-text:after {
    -moz-animation: is-reflection 4s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -ms-animation: is-reflection 4s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -o-animation: is-reflection 4s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -webkit-animation: is-reflection 4s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    animation: is-reflection 4s ease-in-out infinite;
    background-color: #fff;
    content: " ";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: -180px;
    transform: rotate(45deg);
    width: 30px;
}
/* アニメーションを遅延させる */
.is-reflection + .is-reflection .btn-cv-text:after {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
@keyframes is-reflection {
    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 is-reflection {
    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; }
}

/* CVボタン矢印揺れ */
.is-trembling .btn-cv-text:before {
    -webkit-animation-name:is-trembling;
    -webkit-animation-duration:.8s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:ease;
    -moz-animation-name:is-trembling;
    -moz-animation-duration:1s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
    0% {-webkit-transform:translate(-3px, 0);}
    100% {-webkit-transform:translate(0, 0);}
}

/* ボタンをバウンドさせる */
.is-bounce {
    animation: bounce 4s infinite;
    -moz-animation: bounce 4s infinite;
    -webkit-animation: bounce 4s infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
@-webkit-keyframes bounce {
    0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
    5% {-webkit-transform: translateY(-6px);}
    12% {-webkit-transform: translateY(-4px);}
}
@keyframes bounce {
    20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
    25% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
    32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}
/* アニメーションを遅延させる */
.is-bounce + .is-bounce {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
