@charset "utf-8";

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

.btn span {
	position: relative;
	z-index: 3;
	color:#01AC4F;
}

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

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

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

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

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