@charset "utf-8";

/*
************************************************************************
* ボタン・リンク
* @copyright Revolme Inc.
************************************************************************
*/

/* 汎用ボタン */
.button
{
	-webkit-appearance:none;
	display:inline-block;
	
	border:2px solid #0a8228;
	color:#0a8228;
	font-weight:bold;
	line-height:1;
	
	transition-duration:0.3s;
	transition-property:color;
	transition-timing-function:ease;
	
	box-shadow:2px 2px 2px 0px rgba(0,0,0,0.3);
	background-color:#FFFFFF;
	
	cursor:pointer;
}
.button:hover
{
	text-decoration:none;
	color:#FFFFFF;
}
.button span
{
	display:inline-block;
	padding:0.5em 1.0em;
	width:100%;
}
.button::before
{
	content:"";
	display:inline-block;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	
	width:0%;
	
	background-color:#0a8228;
	
	transition-duration:0.3s;
	transition-property:width;
	transition-timing-function:ease;
}
.button:hover::before
{
	width:100%;
}

/* 汎用ボタン (小) */
.button.button-small
{
}
.button.button-small:hover
{
}
.button.button-small span
{
	padding:0.3em 0.5em;
	font-size:1.2rem;
}
.button.button-small::before
{
}
.button.button-small:hover::before
{
}

/* 汎用ボタン (グレー) */
.button.button-gray
{
	border:2px solid #999999;
	color:#999999;
}
.button.button-gray:hover
{
	color:#FFFFFF;
}
.button.button-gray span
{
}
.button.button-gray::before
{
	background-color:#999999;
}
.button.button-gray:hover::before
{
}


/* 汎用ボタン (赤) */
.button.button-warning
{
	border:2px solid #f45342;
	color:#f45342;
}
.button.button-warning:hover
{
	color:#FFFFFF;
}
.button.button-warning span
{
}
.button.button-warning::before
{
	background-color:#f45342;
}
.button.button-warning:hover::before
{
}

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1400px) {
}
/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 640px) {
	/* 汎用ボタン */
	.button
	{
		width:auto;
		margin-bottom:0.2em;
	}
	.button.no-resize
	{
		width:auto;
	}
	.button:hover
	{
	}
	.button span
	{
	}
	.button span::after
	{
		top:calc(50% - 0.78125vw);
		right:calc(0.5em);
		
		width:1.5625vw;
		height:1.5625vw;
	}
	.button:hover span::after
	{
	}
	.button::before
	{
	}
	.button:hover::before
	{
	}
	.button.button-small span
	{
		padding:0.3em 0.5em;
		font-size:0.8em;
	}
}