@charset "UTF-8";

.btn {
	display: block;
	position: relative;
	overflow: hidden;
	max-width: 415px;
	padding: 15px 30px;
	line-height: 1.5;
	background: #e45d8e;
	color: #fff!important;
	font-weight: bold;
	border-radius: 40px;
	text-decoration: none!important;
	text-align: center;
	box-sizing: border-box;
	z-index: 1;
	margin: 0 auto;
}

.btn:hover {
	opacity: 1;
}

.btn::before {
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 0;
	height: 100%;
	content: "";
	background: #c63d6e;
	transition: 0.3s ease-out;
}

.btn:hover::before {
	width: 100%;
}

.btn::after {
	position: absolute;
	right: 20px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	content: "";
	transform:  translateY(-50%) rotate(45deg);
	transition: 0.2s linear;
}

.btn:hover::after {
	right: 17px;
}

/* FOR smartphone landscape
***************************************************************************/
@media screen and (max-width:899px) {
	.btn {
		display: block;
		position: relative;
		max-width: none;
		margin: 0 10px;
		padding: 10px 40px;
		line-height: 1.5;
		background: #e45d8e;
		color: #fff;
		font-weight: bold;
		border-radius: 50px;
		text-decoration: none;
		text-align: center;
		font-size: 1.071rem;
		box-sizing: border-box;
	}

	.btn::after {
		position: absolute;
		right: 28px;
		top: 50%;
		width: 8px;
		height: 8px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		content: "";
		transform:  translateY(-50%) rotate(45deg);
	}
	
	.btn:hover::after {
		right: 22px;
	}
}