@charset "utf-8";

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

/* 汎用ボタン */
.button
{
	-webkit-appearance:none;
	display:inline-block;
	
	overflow:hidden;
	
	border-radius:2em;
	border:1px solid #000000;
	font-weight:normal;
	line-height:1;
	
	transition-duration:0.3s;
	transition-property:color;
	transition-timing-function:ease;
	
	background-color:#FFFFFF;
	color:#000000;
	
	cursor:pointer;
	
	margin-bottom:0.0em;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button > span
{
	display:inline-block;
	padding:0.5em 1.0em;
	width:100%;
}
.button:hover,
.button.active
{
	text-decoration:none;
	background-color:#000000;
	color:#FFFFFF;
}
.button:hover > span
{
}
.button.button-left > span
{
	padding-left:2.0em
}
.button.button-left:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.30em);
	left:1.0em;
	
	width:0.6em;
	height:0.6em;
	
	transform:rotate(-45deg) skew(5deg, 5deg);
	
	border:0px solid transparent;
	border-left:1px solid #000000;
	border-top:1px solid #000000;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button.button-right > span
{
	padding-right:2.0em
}
.button.button-right:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.3em);
	right:1.0em;
	
	width:0.6em;
	height:0.6em;
	
	transform:rotate(-45deg) skew(5deg, 5deg);
	
	border:0px solid transparent;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button:hover.button-right:after
{
	border-right:1px solid #FFFFFF;
	border-bottom:1px solid #FFFFFF;
}
.button.button-ext > span
{
	padding-right:2.0em
}
.button.button-ext:after
{
	content:"";
	
	display:block;
	position:absolute;
	top:calc(50% - 0.5em);
	right:1.0em;
	
	width:1.0em;
	height:1.0em;
	
	background-image:url(../../../_img/icon/ext-link-b.svg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;

	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
.button.button-ext:hover:after
{
	background-image:url(../../../_img/icon/ext-link-w.svg);
}

/* == スマートフォンサイズ ==========================================================*/
@media screen and (max-width: 767px) {
	/* 汎用ボタン */
	.button
	{
		border-radius:2em;
	}
	.button > span
	{
		padding:1.2em 1.2em;
	}
	.button:hover
	{
	}
	.button:hover > span
	{
	}
	.button.button-left > span
	{
	}
	.button.button-left:after
	{
		border:0px solid transparent;
		transform:rotate(0deg) skew(0deg, 0deg);
		
		width:0.6em;
		height:0.6em;
		
		background-image:url(../../../_img/icon/button_arrow_left.svg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	.button:hover.button-left:after
	{
		border:0px solid transparent;
		background-image:url(../../../_img/icon/button_arrow_left-on.svg);
	}
	.button.button-right > span
	{
	}
	.button.button-right:after
	{
		border:0px solid transparent;
		transform:rotate(0deg) skew(0deg, 0deg);
		
		width:0.6em;
		height:0.6em;
		
		background-image:url(../../../_img/icon/button_arrow_right.svg);
		background-position:center center;
		background-repeat:no-repeat;
		background-size:contain;
	}
	.button:hover.button-right:after
	{
		border:0px solid transparent;
		background-image:url(../../../_img/icon/button_arrow_right-on.svg);
	}
}