/*=================================
ボタン枠。
===============
====================================================*/
/*-------------------------
ボタンのド基礎コード。
------------------------------*/
.button{
	/*display:inline-block;*/
	/*outline:none;*/
	text-align:center;
	text-decoration:none;
	user-select:none;
	font-family:arial, sans-serif;
	position:relative;
	cursor:pointer;
}
.button a{
	text-decoration:none;

}
/*=================================
大型ボタン枠。
===============
====================================================*/
/*-------------------------
大ボタン。
------------------------------*/
.-button-big{
	font-size:16px;
	font-weight:normal;
	word-spacing:0px;
	padding: 16px 0 17px 0;
}


/*=================================
補足型ボタン枠。
===============
====================================================*/
/*-------------------------
補足枠ボタン青色。
------------------------------*/
.-button-supplement{
	font-size:14px;
	font-weight:normal;
	word-spacing:-2px;
	padding:14px 0 14px 0;
}

/*-------------------------
ボタン背景｜青色。
------------------------------*/
.button-base-blue{
	background-color:#125CAF;
}
.-button-blue{
	color:#E1F4FD;
	text-shadow:-1px -1px 1px #307bc5;
	/*border:solid 1px #348adb;*/
	background:#539EEA;
	background:-webkit-linear-gradient(#6bafeb,#1B79D8);
	background:-o-linear-gradient(#6bafeb,#1B79D8);
	background:linear-gradient(#6bafeb,#1B79D8);
	position:relative;
	top:-3px;
}
.-button-blue a, .-button-blue:link, .-button-blue:visited{
	color:#E1F4FD;
	text-shadow:-1px -1px 1px #166ABE;
}

/*-------------------------
ボタン背景｜緑色。
------------------------------*/
.button-base-green{
	background-color:#0a574a;
}
.-button-green{
	color:#e1fde9;
	text-shadow:-1px -1px 1px #0f774c;
	/*border:solid 1px #10772a;*/
	background:#10772a;
	background:-webkit-linear-gradient(#1b8b6f,#0f774c);
	background:-o-linear-gradient(#1b8b6f,#0f774c);
	background:linear-gradient(#1b8b6f,#0f774c);
	position:relative;
	top:-3px;
}
.-button-green a, .-button-green:link, .-button-green:visited{
	color:#e1fde9;
	text-shadow:-1px -1px 1px #0f774c;
}

/*-------------------------
ボタン背景｜蜜柑色。
------------------------------*/
.button-base-orange{
	background-color:#8d5000;
}
.-button-orange{
	color:#fdf8e1;
	text-shadow:-1px -1px 1px #ad7100;
	/*border:solid 1px #dd9613;*/
	background:#ff8e0d;
	background:-webkit-linear-gradient(#ff8e0d,#db7c00);
	background:-o-linear-gradient(#ff8d0b,#db7c00);
	background:linear-gradient(#ff8d0b,#db7c00);
	position:relative;
	top:-3px;
}


.-button-orange a,.-button-orange:link,.-button-orange:visited{
	color:#fdf8e1;
	text-shadow:-1px -1px 1px #ad7100;
}

.button-base-blue a,.button-base-green a,.button-base-orange a{
	display:block;
}
.button-base-blue span,.button-base-green span,.button-base-orange span{
	display:block;
}
.-button-green:active,.-button-blue:active,.-button-orange:active{
	position:relative;
	top:-2px;
}


/*=================================
ボタン型。
===============
====================================================*/

/*-------------------------
ボタン背景の型。
------------------------------*/
.-button-base-width-100percent{
	width:100%;
}
.-button-base-width-100percent-top-bottom-4radius{
	width:100%;
	border-radius:4px;
}
.-button-base-width-100percent-bottom-7radius{
	width:100%;
	border-radius:7px;
}
.-button-base-width-48percent{
	width:48.5%;
	border-radius:4px;
}

/*-------------------------
ボタン表面の型。
------------------------------*/
.-button-width-100percent{
	width:100%;
}
.-button-width-100percent-top-bottom-4radius{
	width:100%;
	border-radius:4px;
}
.-button-width-100percent-bottom-7radius{
	width:100%;
	border-radius:0 0 7px 7px;
}
.-button-width-48percent{
	border-radius:4px;
}


/*=================================
ボタン光沢効果。
===============
====================================================*/
.-button-blue,.-button-green,.-button-orange{
	overflow:hidden;
}
.-button-blue::before,.-button-green::before,.-button-orange::before{
	content: "";	/* 文字は表示しないので中身無しを指定 */

	position: absolute;	/* ボタンの位置を基準に絶対値指定する */
	display: block;	/* 形式はblock */

	/*background: blue;*/	/* 背景色は分かりやすく青色にしておく */
	width: 50px;	/* 横幅 */
	height: 50px;	/* 縦幅 */

	top: -120px;	/* ボタン左上を基準に上へ60pxの位置 */
	left: -60px;	/* ボタン左上を基準に左へ60pxの位置 */
	animation-name:shine-run;   /* アニメーション名の指定 */
	animation-delay:2s;   /* アニメーションの開始時間指定 */
	animation-duration: 3.5s;   /* アニメーション動作時間の指定 */
	animation-timing-function: ease-in;
	/* アニメーションの動き指定（徐々に早く）*/
	animation-iteration-count: infinite; 
	/* アニメーションの無限繰り返しの指定 */
	/*background:white;*/
	background: linear-gradient(to right,rgba(255,255,255,0), rgba(255,255,255,0.4));
}
/* アニメーションのタイミングとボックスの拡大率、角度、透過率の指定*/
@keyframes shine-run {
	0% {
		transform: scale(0) rotate(50deg);
		/* アニメ開始時は大きさ0、50度の傾き */
		
		opacity: 0;
		/* アニメ開始時は全透過 */
	}

	20% {
		transform: scale(1) rotate(50deg);
		/* 40%まで進む間に大きさを等倍に。傾きは50度のまま*/
		
		opacity: 1;
		/* 透過しない（しっかり表示される）ように1を設定 */
	}

	50% {
		transform: scale(250) rotate(50deg);
		/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/

		opacity: 0;
		/* 全透過になるようにして、徐々に消えるような変化を付ける */
	}
	100% {
		transform: scale(250) rotate(50deg);
		/* 最後は元の大きさの250倍になるようにする。傾きは50度のまま*/

		opacity: 0;
		/* 全透過になるようにして、徐々に消えるような変化を付ける */
	}
}