@charset "UTF-8";
/*== 無限に波紋が広がる */

.btnripple2{
    /*波紋の基点とするためrelativeを指定*/
	position: relative;
    /*波紋の形状*/
	display:inline-block;
    background-color:  rgba(255, 255, 255, 0.7);
	background-color:  rgb(122, 44, 43);
	width:60px;
	height:60px;
	border-radius: 50%;
	color:#ccc;
    outline: none;
    /*アニメーションの設定*/
    transition: all .3s;
}

/*hoverした際の背景色の設定*/
.btnripple2:hover{
	background:#ffffff;	
    background:rgb(196, 75, 73);
}	

/*波形を2つ設定*/
.btnripple2::after,
.btnripple2::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left: -25%;
    top: -25%;
    /*波形の形状*/
    border: 1px solid #ffffff;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    /*はじめは不透明*/
    opacity: 1;
    /*ループするアニメーションの設定*/
    animation:1s circleanime linear infinite;
}

/*波形の2つ目は0.5秒遅らせてアニメーション*/
.btnripple2::before {
    animation-delay:.5s; 
}

/*波形のアニメーション*/
@keyframes circleanime{
	0%{
	  transform: scale(0.68);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}

/*中央矢印*/
.btnripple2 span::after {
    content: none;
    /*絶対配置で矢印の位置を決める*/
    position: absolute;
    top: 38%;
    left: 45%;
    /*矢印の形状*/
    border: 14px solid transparent;
    border-top-width: 10px;
    border-bottom-width: 10px;
    border-left-color: #fff;
}


.btnripple2 span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 12px;
  color: #444;
  color: #fff;
  z-index: 1;
}