@charset "utf-8";

.btn2{
    position: relative;
	overflow: hidden;
    border-radius: 13px;
	text-decoration: none;    
    font-size: 19px;
	display: inline-block;
   	border: 2px solid #006CED;
    background:#FFF;
    padding: 20px 50px;
    text-align: center;
    outline: none;
    transition: ease .2s;
}

.btn2 span {
	position: relative;
	z-index: 3;
	color:#006CED;
}

.btn2:hover span{
	color:#FFF;
}

.bgskew2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -130%;
	background:#006CED;
	width:120%;
	height: 100%;
	transform: skewX(-25deg);
}

.bgskew2:hover::before {
	animation: skewanime .5s forwards;
}

@keyframes skewanime {
	100% {
		left:-10%;
	}
}

                                     /* pc */
@media (min-width: 900px){
.btn2{   
    position: relative;
	overflow: hidden;
	text-decoration: none;    
    font-size: 25px;
	display: inline-block;
   	border: 3px solid #006CED;
    padding: 20px 100px;
    text-align: center;
    outline: none;
    transition: ease 1s;    
}
}