/* CSS Document */
@charset "UTF-8";
button img {
	display: block;
	border: none;
	margin:0;
	padding:0;
	width: 100%;
	transition-duration:0.3s;
}
button:hover img { opacity: 0.7; }
button a { display: block; cursor: pointer; }
button {
	border-width:0px;
	position:relative;
	margin:4px auto;
	display:inline-block;
	padding:0;
	transition:all 0.3s ease-in-out;
	width: 70%;
}
button:before, button:after {
	content:'';
	display:block;
	position:absolute;
	border-color:#007fbb;
	box-sizing:border-box;
	border-style:solid;
	width:68px;
	height:22px;
	transition:all 0.3s ease-in-out;
}
button:before {
	top:0;
	left:0;
	border-width:1px 0 0 1px;
	z-index:5;
}
button:after {
	bottom:0;
	right:0;
	border-width:0 1px 1px 0;
	z-index:6;
}
button:hover:before, button:hover:after {
	width:calc(100%);
 	height:calc(100%);
	border-color:#007fbb;
}
button:hover {
	color:#007fbb;
	background-color:#007fbb;
	border-color:#007fbb;
}
.panel {
	max-width:960px;
	text-align:center;
	position:relative;
	margin: 0 auto;
	padding-bottom: 12px;
}

.blue button { border-color:#007fbb}
.blue button:before, .blue button:after  {border-color:#007fbb}
.blue button:hover:before, .blue button:hover:after {border-color:#007fbb;}
.blue button:hover {color:#007fbb;background-color:#007fbb;border-color:#007fbb;}
.blue .panel {max-width:960px;text-align:center;position:relative;margin:auto;}

/*===============================================
●tablet 画面の横幅が600px以上
===============================================*/
@media screen and (min-width: 600px){
	button {
		border-width:0px;
		position:relative;
		margin:4px;
		display:inline-block;
		padding:0;
		transition:all 0.3s ease-in-out;
		width: 218px;
	}
	.panel {
		padding-bottom: 32px;
	}
}
/*===============================================
●pc 画面の横幅が960px以上
===============================================*/
@media screen and (min-width: 960px){

}