.dcp-hsn-btn {
    padding: 14px 20px;
    display: block; 
    justify-content: center;
    align-items: center;
/*    background-color: #f39800; */
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    line-height: normal;
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
    width: 60%;
    max-width: 800px;
    margin: 14px auto;
    font-size: 16px;
    text-align: center;
}

.dcp-hsn-btn:hover {
	text-decoration: none;
    color: #fff;
}



/* バウンド */
.dcp-hsn-btn-bound {
    animation: hsnboundbtn 3s ease-out 0s infinite; /* バウンドの頻度 */
}

@keyframes hsnboundbtn {
    0%, 10%, 20%, 100% {transform: translateY(0%);}
    5%, 15% {transform: translateY(-0.7em);} /* バウンドの高さ */
}

/* 点滅 */
@keyframes hsnblinkbtn {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.dcp-hsn-btn-blink {
	animation: hsnblinkbtn 1s ease-in-out infinite alternate;
}

/* きらり */
.dcp-hsn-btn-light::before {
    position: absolute;
    content: '';
    display: inline-block;
    top: -180px;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #b5e7ff;
    transition: 0.3s;
    animation: hsnlightbtn 2.5s ease-in-out infinite;   
}

.dcp-hsn-btn-light {
    overflow: hidden;
    transition: 0.3ms;
}

@keyframes hsnlightbtn {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(5) rotate(45deg); opacity: 1; }
    100% {transform: scale(100) rotate(45deg); opacity: 0; }
}

/*
.hsn-btn > img { float: left; }
.hsn-btn::after{ content: ''; clear: left; }
*/

/* ゆらゆら揺れる */
.dcp-hsn-btn-sway {

    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-duration:1s;
    animation-name: hsnswaybtn;
}

@keyframes hsnswaybtn {
    0%{ transform:rotate(0deg);}
    25%{ transform:rotate(1deg);}
    50%{ transform:rotate(0deg);}
    75%{ transform:rotate(-1deg);}
    100%{ transform:rotate(0deg);}
}

/* 拡大縮小 */

.dcp-hsn-btn-zooming {
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-name: hsnzoomingbtn;
    animation-duration:1.3s;
}
        
@keyframes hsnzoomingbtn {
    0%{ transform:scale(0.91);}
    40%{ transform:scale(1.05);}
    60%{ transform:scale(0.85);}
    80%{ transform:scale(1);}
    100%{ transform:scale(0.91);}
}

/* プルプル */
.dcp-hsn-btn-trembling {
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-duration:3s;
    animation-name: hsntremblingbtn;
}  
    
  @keyframes hsntremblingbtn {
    3% {transform: translateX(3px) rotate(2deg);}
    6% {transform: translateX(-3px) rotate(-2deg);}
    9% {transform: translateX(3px) rotate(2deg);}
    12% {transform: translateX(-3px) rotate(-2deg);}
    15% {transform: translateX(2px) rotate(1deg);}
    18% {transform: translateX(-2px) rotate(-1deg);}
    21% {transform: translateX(2px) rotate(1deg);}
    24% {transform: translateX(-2px) rotate(-1deg);}
    27% {transform: translateX(1px) rotate(0);}
    30% {transform: translateX(-1px) rotate(0);}
  }


/* ジャンプ */
.dcp-hsn-btn-jump {
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-name: hsnjumpbtn;
    animation-duration:1.4s;
}

@keyframes hsnjumpbtn {
    0%{ transform:translateY(0) scale(1.0); bottom:0;}
    20%{ transform:translateY(0) scale(1.0);bottom: 6px;}
    30%{ transform:translateY(-15%) scale(1.1);bottom: 7px;}
    40%{ transform:translateY(0%) scale(1.0);bottom: 7px;}
    50%{ transform:translateY(-15%) scale(1.2);bottom: 15px;}
    70%{ transform:translateY(0%) scale(1.0); bottom: 7px;}
    80%{ transform:translateY(-15%) scale(1.1); bottom: 7px;}
    90%{ transform:translateY(0%) scale(1.0); bottom:6px;}
    100%{ transform:translateY(0) scale(1.0); bottom:0;}
}

/* 波動 */

.dcp-hsn-btn-wave {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-name: hsnwavebtn;
    animation-duration:1s;
}
                            
@keyframes hsnwavebtn {
    0%{ transform:scale(0.9);box-shadow: 0 0 0 1px;opacity:0;}
    50%{ transform:scale(1);box-shadow: 0 0 0 10px;opacity:0.5;}
    100%{ transform:scale(1.1);box-shadow: 0 0 0 20px;opacity:0;}
}

/* 波紋 */
.dcp-hsn-btn-ripples::before, .dcp-hsn-btn-ripples::after  {
    content:"";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity:0;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-name: hsnripplesbtn;
    animation-duration:2s;
}

.dcp-hsn-btn-ripples::after  {
    animation-delay: 0.5s;
}  
                            
@keyframes hsnripplesbtn {
    0%{ transform:scale(1,1);box-shadow: 0 0 0 3px;opacity:1;}
    100%{ transform:scale(1.2,2);box-shadow: 0 0 0 3px;opacity:0;}
}

.arrow-clippath {
    position: relative;
    display: inline-block;
    width: 120px;
    height: 120px;    
    clip-path: polygon(25% 60%, 25% 0, 75% 0, 75% 60%, 100% 60%, 50% 100%, 0 60%);
    animation: hsnboundbtn 3s ease-out 0s infinite; /* ジャンプの頻度など */
  }