@charset "UTF-8";

.pc {
  display: block;
}
.sm {
  display: none;
}


.pagetop {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 100px;
}
.pagetop a {
    display: block;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 20px 10px;
}
 
.pagetop a:hover {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:20px 10px;
}




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

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

/*波形の設定*/
.btnripple3:hover::before {
    content: '';
    /*絶対配置で波形の位置を決める*/
    position: absolute;
    left:30%;
    top:50px;
    /*波形の形状*/
    border: 1px solid #333;
    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;
	}
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝responsive＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media (max-width:414px) {
	  .pc {
    display: none;
  }
  .sm {
    display: block;
  }
	.pagetop {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 290px;
}
	/*== 波紋がふわっと広がる */

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

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

}