@charset "utf-8";


/*  ボタン
---------------------------------------------------------- */
@keyframes anime{
    10%{transform:scale(.95); opacity:1.5}
    80%{opacity:.1}to{transform:scale(1.2,1.2); opacity:0}
}

/* 波紋のアニメーション*/ 
@keyframes ripple {
    0% {
        transform: translateX(-50%) scale(0.9) scaleY(0.9);
        opacity: 1;
    }
    80% {
        opacity: 0.1;
    }
    100% {
        transform: translateX(-50%) scale(1.1) scaleY(1.2);
        opacity: 0;
    }
}

/*PC*/

.pulse-btn {
   
    display: flex;
    align-items: center;
    justify-content: center;
     /* ボタンの幅を調整 */
    height: auto; /* ボタンの高さを調整 */
    border-radius: 30px; /* ボタンの角を丸くする */
    text-align: center; /* テキストを中央揃えに設定 */
    cursor: pointer;
    overflow: visible; /* overflowをvisibleに設定して、波紋がボタンの外に出るようにする */
    z-index: 2; /* ボタンを波紋より前面に表示 */
    padding: 0;  
    vertical-align: top; 
      

}

.pulse-btn::before, .pulse-btn::after {
    content: "";
    position: absolute;
    z-index: -10; 
    width: 100%;
    height: 94%;
    margin-top: 0.5%;
    top: 0;
    left: 0;
    border-radius: 100px; /* 疑似要素の角を丸くする */
    background: rgba(255, 0, 0, 0.5); /* 波紋の色をボタンの赤色に合わせる */
}
.pulse-btn:before {animation: anime 2s ease-out infinite;}
.pulse-btn:after {animation: anime 2s ease-out 1s infinite;}

.pulse-btn button,
.pulse-btn img{
    vertical-align: bottom;
}

/* フォームのボタンのアニメーション
 */
 .btn-box{
	position: relative;
    top: 30px;
    margin-right: 0px;
    margin-bottom: 100px;
    display: inline-block;
    text-align: center; /* 中央揃えに設定 */
    z-index: 1000
    

}
.pulse-btn2 {
    position: relative;
    display: inline-block;
    width: auto; /* ボタンの幅を調整 */
    height: 169px; /* ボタンの高さを調整 */
    text-align: center; /* テキストを中央揃えに設定 */
    cursor: pointer;
    overflow: visible; /* overflowをvisibleに設定して、波紋がボタンの外に出るようにする */
    z-index: 2; /* ボタンを波紋より前面に表示 */
    
}

.pulse-btn2::before, .pulse-btn2::after {
    content: "";
    position: absolute;
    z-index: -10; 
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px; /* 疑似要素の角を丸くする */
    background: #fff100; /* 波紋の色をボタンの色に合わせる */
}
.pulse-btn2:before {animation: anime 2s ease-out infinite;}
.pulse-btn2:after {animation: anime 2s ease-out 1s infinite;}

.pulse-btn2 button,
.pulse-btn2 input{
    vertical-align: bottom;
}

#submitBtn.click{
    opacity: 0.1;
}



/* SP
 */
 @media screen and (max-width:640px){
 .pulse-btn {
   
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80%; /* ボタンの幅を調整 */
    height: auto; /* ボタンの高さを調整 */
    border-radius: 30px; /* ボタンの角を丸くする */
    text-align: center; /* テキストを中央揃えに設定 */
    cursor: pointer;
    overflow: visible; /* overflowをvisibleに設定して、波紋がボタンの外に出るようにする */
    z-index: 2; /* ボタンを波紋より前面に表示 */
}

.pulse-btn::before, .pulse-btn::after {
    content: "";
    position: absolute;
    z-index: -10; /* ボタンの背後に表示 */
    width: 96%;
    height: 94%;
    top: 0;
    left: 0;
    border-radius: 90px; /* 疑似要素の角を丸くする */
    background: rgba(255, 0, 0, 0.5); /* 波紋の色をボタンの赤色に合わせる */
}

.pulse-btn:before {animation: anime 2s ease-out infinite;}
.pulse-btn:after {animation: anime 2s ease-out 1s infinite;}



/* SPフォームのボタンのアニメーション
 */
 .btn-box{
	position: relative;
    top: 30px;
    margin-right: 0px;
    margin-bottom: 100px;
    display: inline-block;
    text-align: center; /* 中央揃えに設定 */
    z-index: 1

}
.pulse-btn2 {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90%; /* ボタンの幅を調整 */
    height: auto; /* ボタンの高さを調整 */
    border-radius: 30px; /* ボタンの角を丸くする */
    text-align: center; /* テキストを中央揃えに設定 */
    cursor: pointer;
    overflow: visible; /* overflowをvisibleに設定して、波紋がボタンの外に出るようにする */
    z-index: 2; /* ボタンを波紋より前面に表示 */
}

.pulse-btn2::before, .pulse-btn2::after {
    content: "";
    position: absolute;
    z-index: -10; /* ボタンの背後に表示 */
    width: 100%; /* 元のサイズより小さく */
    height:100%; /* 元のサイズより小さく */
    top: 0;
    border-radius: 100px; /* 疑似要素の角を丸くする */
    background: #fff100; /* 波紋の色をボタンの色に合わせる */
}
.pulse-btn2:before {animation: anime 2s ease-out infinite;}
.pulse-btn2:after {animation: anime 2s ease-out 1s infinite;}


}