@charset "utf-8";



/*

************************************************************************

* ボタン類

* @copyright Revolme Inc.

************************************************************************

*/



/* ################################################################################################ */

/* ## PC                         ################################################################## */

/* ################################################################################################ */

.button-category {

}


.button-list

{

	display: flex;

	flex-direction: row;

	justify-content: center;

	align-items: center;

	align-content: center;



	margin:-0.5em;

}

.button-list.button-list > .button

{

	margin:0.5em;

	flex: 0 1 auto;

}

.button-list.button-list > .button.button-default

{

	flex:0 1 auto;

}



button

{

	-webkit-appearance : none;

	-webkit-tap-highlight-color : rgba(0,0,0,0);



	display:block;

	border-radius:9999px;

	border:0px solid transparent;

	background-color:transparent;



	transition-duration:0.2s;

	transition-property:all;

	transition-timing-function:ease;

	max-width: 330px;
	width: 100%;
	margin: 0 auto;

	vertical-align: bottom;

}
button a {
	display: inline-block;
	padding: 1em 3em;
}
.button-category button a {
	padding: 1em 0;
}
button span {

	color: var(--color-white);
}

button.button-contact {
	background-color: var(--color-brown);
	border-color: transparent;
	margin-bottom: 3em;
}

button.button-contact:hover {
	border-color: var(--color-brown);
}


.button

{

	-webkit-appearance : none;

	-webkit-tap-highlight-color : rgba(0,0,0,0);



	transition-duration:0.2s;

	transition-property:all;

	transition-timing-function:ease;



	display: inline-flex;

	align-items: center;

	align-content: center;

	justify-content: center;



	border-radius:calc(var(--border-radius) / 2);

	border:1px solid var(--accent-frame-color);

	background-color:var(--accent-background-color);

	box-shadow: 3px 3px 2px 0px var(--color-gray-light);



	line-height:1;

}

.button > i.after

{

	position:absolute;

	right:0.25em;



	font-size:1.2em !important;

	color:var(--accent-icon-color);

}

.button > i.before

{

	position:absolute;

	left:0.25em;



	font-size:1.2em !important;

	color:var(--accent-icon-color);

}

.button > span

{

	display: inline-flex;

	align-items: center;

	align-content: center;


    padding:1.0em 2.0em;


	font-size: 1.4em;
	font-weight: bold;


	transition-duration:0.2s;

	transition-property:all;

	transition-timing-function:ease;



	color: var(--color-white);

}

.button > i.after + span

{

	padding-right:3.25em;

}

.button > i.before + span

{

	padding-left:3.25em;

}



.button > span > i

{

	color:var(--accent-icon-color);

}

.button:hover

{

	/* border:1px solid var(--accent-frame-color); */

	background-color:var(--body-background-color);

}

.button:hover > i

{

	color:var(--body-icon-color);

}

.button:hover > span

{

	color:var(--body-font-color);

}

.button:hover > span > i

{

	color:var(--body-icon-color);

}



.button.button-default

{

	border:1px solid #AAAAAA;

	background-color:#FFFFFF;

	color:#333333;

}

.button.button-default > i

{

	color:#666666;

}

.button.button-default > span

{

	color:#000000;

}

.button.button-default:hover

{

	background-color:#EFEFEF;

}



.button.button-warning

{

	border:1px solid #7d3631;

	background-color:#EFEFEF;

}

.button.button-warning > i

{

	color:#9e1309;

}

.button.button-warning > span

{

	color:#9e1309;

}

.button.button-warning:hover

{

	background-color:#FFFFFF;

}



/* ################################################################################################ */

/* ## TAB                        ################################################################## */

/* ################################################################################################ */

@media screen and (max-width:1040px) {





}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

@media screen and (max-width:640px) {
	button {
		width: 80%;
	}
	button.button-wide {
		width: 100%;
	}
	button a {

	}
	.button-category button {
		width: 100%;
	}
	.button-category button a {
		padding: 1em 0;
	}
}