@charset "UTF-8";

/* 紺 */
.btn {
	position: relative;
	display: inline-block;
	padding: .5em 4em;
	color: #3e4496;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	transition: all .5s;
}
.btn:before,
.btn:after {
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transition: all .5s;
}
.btn:before {
	top: 0;
	left: 0;
	border-top: 2px solid #3e4496;
	border-left: 2px solid #3e4496;
}
.btn:after {
	right: 0;
	bottom: 0;
	border-right: 2px solid #3e4496;
	border-bottom: 2px solid #3e4496;
}
.btn:hover {
	background-color: #3e4496;
	color: #fff;
	transition: all .7s;
}
.btn:hover:before,
.btn:hover:after {
	width: 0;
	height: 0;
	opacity: 0;
	transition: all .7s;
}

/* 白 */
.btn_fff {
	position: relative;
	display: inline-block;
	padding: .5em 4em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	transition: all .5s;
}
.btn_fff:before,
.btn_fff:after {
	position: absolute;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	transition: all .5s;
}
.btn_fff:before {
	top: 0;
	left: 0;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
}
.btn_fff:after {
	right: 0;
	bottom: 0;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}
.btn_fff:hover {
	background-color: #fff;
	color: #3e4496;
	transition: all .7s;
}
.btn_fff:hover:before,
.btn_fff:hover:after {
	width: 0;
	height: 0;
	opacity: 0;
	transition: all .7s;
}

/* sp */
@media screen and (max-width: 767px) {
	.btn ,.btn_fff {
		font-size: 1.2em;
	}
}