@charset "utf-8";
/* CSS Document */

/* ベーススタイル
----------------------------------------------------*/
.button {
	display: inline-block;
	text-decoration: none;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

/* button1
----------------------------------------------------*/
.button1 {
	background-color: #fafafa;
	border: 3px solid #163152;
	color: #163152;
	line-height: 50px;
	width: 320px;
	font-weight: bolder;
}
.button1:hover {
	background-color: #163152;
	color: #fff;
	text-decoration: none;	
}
a.button1 {
	color: #163152;
}
.button1 span {
	background-image: url(../img/head01.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 15px;
}

/* button2
----------------------------------------------------*/
.button2 {
	width: 490px;
}
.button2:hover {
	background-color: #a3bbd9;
	color: #fff;
	text-decoration: none;	
}
a.button2 {
	color: #333;
}

/* button3
----------------------------------------------------*/
.button3 {
	border: 1px solid #fff;
	color: #fff;
	line-height: 50px;
	width: 340px;
	text-align: center;
	font-size: 130%;
	font-weight: bolder;
}
.button3:hover {
	background-color: #fff;
	color: #163152;
	text-decoration: none;	
}
a.button3 {
	color: #fff;
}
.button3 span {
	background-image: url(../img/head02.png);
	background-repeat: no-repeat;
	background-position: right center;
	padding-right: 15px;
}



/********************************************************************************************************************/
/****************************************** MEDIA QUERIES ***********************************************************/
/********************************************************************************************************************/


/*==================================== PHONES ====================================================*/

@media (max-width: 480px) {
	
/* button1
----------------------------------------------------*/
.button1 {
	width: 100%;
}
.button2 {
	width: 100%;
}
.button3 {
	width: 100%;
	font-size: 100%;
}


	
}