@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
.button-list
{
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	
	margin:-0.25em;
}
.button-list.button-list-left
{
	justify-content: flex-start;
}
.button-list.button-list-right
{
	justify-content: flex-end;
}
.button-list.button-list > .button
{
	margin:0.25em;
	flex:0 0 auto;
}

button
{
	-webkit-appearance : none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	border:0px solid transparent;
	background-color:transparent;
}
.button
{
	-webkit-appearance : none;
	-webkit-tap-highlight-color : rgba(0,0,0,0);
	
	display:inline-flex;
	display: inline-flex;
	align-items: center;
	align-content: center;
	
	border-radius:0.5em;
	border:1px solid #AAAAAA;
	background-color:#EEEEEE;
	box-shadow: 2px 2px 2px 0px #00000022;
	
	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
	
	padding:0.5em 1.0em;
	
	line-height:1;

	vertical-align: middle;
}
.button.button-wide
{
	width:100%;
}
.button > i
{
	font-size:1.6em !important;
	color:var(--main-color-01);
}
.button > span + i
{
	margin-left:0.25em;
}
.button > i + span
{
	margin-left:0.25em;
}
.button:hover
{
	text-decoration:none;
	background-color:#FFFFFF;
	box-shadow: 0px 0px 0px 0px #00000022;
}

.button.button-small
{
	font-size:0.9em;
	padding:0.4em 0.8em;
}

.button.button-default
{
	border:1px solid #AAAAAA;
	background-color:#FFFFFF;
	color:#333333;
}
.button.button-default > i
{
	color:#666666;
}
.button.button-default:hover
{
	background-color:#EEEEEE;
}

.button.button-success
{
	border:1px solid #6db381;
	background-color:#cbf2d6;
	color:#093b17;
}
.button.button-success > i
{
	color:#093b17;
}
.button.button-success:hover
{
	background-color:#FFFFFF;
}

.button.button-warning
{
	border:1px solid #7d3631;
	background-color:#e8ccca;
	color:#9e1309;
}
.button.button-warning > i
{
	color:#9e1309;
}
.button.button-warning:hover
{
	background-color:#FFFFFF;
}

.button.button-no-frame
{
	border:0px solid transparent;
	background-color:transparent !important;
	box-shadow:none;
	
	padding:0.25em 0.25em;

	text-shadow: 1px 1px 3px #00000044;
}

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


}

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

}