@charset "utf-8";

/*
************************************************************************
* ボタン類
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.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: 1 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:inline-block;
	border-radius:0.0em;
	border:0px solid transparent;
	background-color:transparent;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
	
	vertical-align: bottom;
}
.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.button-small
{
	font-size:0.8em;
}
.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;
    
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
	
	color:var(--accent-font-color);
}
.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);
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {


}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
}