@charset "utf-8";

/*== 波紋がふわっと広がる */



.btnripple3{
    /*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*リンクの形状*/
	display:inline-block;
    text-decoration: none;
    color: #bdc0ba;
    outline: none;
}

/*波形の設定*/
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:30%;
    top:0;
    /*波形の形状*/
    border: 1px solid #bdc0ba;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /*はじめは不透明*/
	opacity:1;
    /*アニメーションの設定*/
    animation:1s circleanime2 forwards;
}



/*波形が広がるアニメーション*/
@keyframes circleanime2{
	0%{
	  transform: scale(0);
	}
	100%{
		transform:scale(2);
		opacity: 0;
	}
}