@charset "UTF-8";

.btn,
a.btn,
button.btn,
.button,
a.button,
button.button
{

	font-size: 1.2em;
	font-weight: 700;
	/*line-height: 1.2em;*/
	position: relative;
	display: inline-block;
	/*padding: 1em 1em;*/
	padding: 0.2em 0.6em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.2em;
	color: #505050;
	border-radius: 0.3em;
	margin: 0.2em 0.1em;
}


/* 小さい */

.btn--sm,
a.btn--sm,
button.btn--sm,
.button-small,
a.button-small,
button.button-small
{

	font-size: 1.0em;
	/*line-height: 1.0em;*/
	letter-spacing: 0.1em;

}


/* 一番小さい */

.btn--ssm,
a.btn--ssm,
button.btn--ssm,
.button-tiny,
a.button-tiny,
button.button-tiny
{

	font-size: 0.7em;
	/*line-height: 0.7em;*/
	letter-spacing: 0;

}


/* 大きい */

.btn--lg,
a.btn--lg,
button.btn--lg,
.button-lg,
a.button-lg,
button.button-lg
{

	font-size: 1.6em;
	line-height: 1.6em;
	letter-spacing: 0.6em;

}



/* 影 */

.btn--shadow,
a.btn--shadow,
button.btn--shadow
{

	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 2px 2px rgba(0, 0, 0, .2);

}


/* デフォルト/スタンダード */

.btn--std,
a.btn--std,
button.btn--std,
.button-highlight,
a.button-highlight,
button.button-highlight,
.button-normal,
a.button-normal,
button.button-normal
{

	color: #000;
	background-color: #e0e0e0;
	border: 0;
	border-bottom: 0.2em solid #c0c0c0;

}

.btn--std:hover,
a.btn--std:hover,
button.btn--std:hover,
.button-highlight:hover,
a.button-highlight:hover,
button.button-highlight:hover,
.button-normal:hover,
a.button-normal:hover,
button.button-normal:hover
{

	margin-top: 0.3em;
	color: #000;
	background: #f0f0f0;
	border-bottom: 0.1em solid #c0c0c0;

}


/* 確認/実行 */

.btn--primary,
a.btn--primary,
button.btn--primary,
.button-action,
a.button-action,
button.button-action
{

	color: #fff;
	background-color: #006DD9;
	border: 0;
	border-bottom: 0.2em solid #0059B2;

}

.btn--primary:hover,
a.btn--primary:hover,
button.btn--primary:hover,
.button-action:hover,
a.button-action:hover,
button.button-action:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #0080FF;
	border-bottom: 0.1em solid #0059B2;

}


/* secondary */

.btn--secondary,
a.btn--secondary,
button.btn--secondary,
.button-secondary,
a.button-secondary,
button.button-secondary
{

	color: #fff;
	background-color: #999999;
	border: 0;
	border-bottom: 0.2em solid #777777;

}

.btn--secondary:hover,
a.btn--secondary:hover,
button.btn--secondary:hover,
.button-secondary:hover,
a.button-secondary:hover,
button.button-secondary:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #BBBBBB;
	border-bottom: 0.1em solid #777777;

}


/* success */

.btn--success,
a.btn--success,
button.btn--success,
.button-success,
a.button-success,
button.button-success
{

	color: #fff;
	background-color: #008C00;
	border: 0;
	border-bottom: 0.2em solid #006000;

}

.btn--success:hover,
a.btn--success:hover,
button.btn--success:hover,
.button-success:hover,
a.button-success:hover,
button.button-success:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #00B200;
	border-bottom: 0.1em solid #006000;

}


/* danger,caution */

.btn--danger,
a.btn--danger,
button.btn--danger,
.button-caution,
a.button-caution,
button.button-caution
{

	color: #fff;
	background-color: #D90000;
	border: 0;
	border-bottom: 0.2em solid #8C0000;

}

.btn--danger:hover,
a.btn--danger:hover,
button.btn--danger:hover,
.button-caution:hover,
a.button-caution:hover,
button.button-caution:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #FF0000;
	border-bottom: 0.1em solid #8C0000;

}


/* warning */

.btn--warning,
a.btn--warning,
button.btn--warning,
.button-warning,
a.button-warning,
button.button-warning
{

	color: #fff;
	background-color: #eb6100;
	border: 0;
	border-bottom: 0.2em solid #b84c00;

}

.btn--warning:hover,
a.btn--warning:hover,
button.btn--warning:hover,
.button-warning:hover,
a.button-warning:hover,
button.button-warning:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #FF8C37;
	border-bottom: 0.1em solid #b84c00;

}



/* info */

.btn--info,
a.btn--info,
button.btn--info,
.button-info,
a.button-info,
button.button-info
{

	color: #fff;
	background-color: #00A3D9;
	border: 0;
	border-bottom: 0.2em solid #00698C;

}

.btn--info:hover,
a.btn--info:hover,
button.btn--info:hover,
.button-info:hover,
a.button-info:hover,
button.button-info:hover
{

	margin-top: 0.3em;
	color: #fff;
	background: #00BFFF;
	border-bottom: 0.1em solid #00698C;

}