@charset "utf-8";

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

/* 汎用ボタン */
.button
{
	-webkit-appearance:none;
	display:inline-block;
	
	overflow:hidden;
	
	border:1px solid;
	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);
	
	cursor:pointer;
	
	margin-bottom:0.5em;
}
.button.button-notice
{
	font-weight:normal;
}
.button > span
{
	display:inline-block;
	padding:0.8em 1.5em;
	width:100%;
}
.button:hover
{
	text-decoration:none;
}
.button:hover > span
{
}
.button::before
{
	content:"";
	display:inline-block;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	
	width:100%;
	
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button:hover::before
{
	filter:alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}
.button.button-left > span
{
	padding-left:2.0em
}
.button.button-left:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.35em);
	left:0.5em;
	
	width:0.8em;
	height:0.8em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}
.button.button-right > span
{
	padding-right:2.0em
}
.button.button-right:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.35em);
	right:0.5em;
	
	width:0.8em;
	height:0.8em;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
}

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

/* == タブレットサイズ ==========================================================*/
@media screen and (max-width: 1200px) {
}
/* == スマートフォンサイズ ==========================================================*/
@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
	{
	}
	.button.button-small:hover
	{
	}
	.button.button-small > span
	{
		font-size:1.6rem;
	}
	.button.button-small::before
	{
	}
	.button.button-small:hover::before
	{
	}
}