/* シンプルなボタン */
.linkButton {
	display: block;
	width: 300px;
	height: 60px;
	border-radius: 5px;
	background-color: #008dd7;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 25px;
	text-align: center;
	line-height: 60px;
	margin-left: auto;
	margin-right: auto;
}

/** 立体ボタン */
.squareBtn {
	display: block;
	cursor: pointer;
	width: 300px;
	height: 40px;
    padding: 0.5em 1em;
    text-decoration: none;
    background-color: #668ad8;
    color: #FFF;
    border-bottom: solid 4px #627295;
	border-radius: 3px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	text-align: center;
	font-size: 25px;
	line-height: 40px;
	margin-left: auto;
	margin-right: auto;
}
.squareBtn:active {
	/*ボタンを押したとき*/
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	border-bottom: none;/*線を消す*/
	margin-bottom: 4px;
}

/* ボタンカラー系 */
.btncolor-important {
	background-color: #d8668a;
	border-bottom: solid 4px #956272;
}
.btncolor-inactive {
	background-color: #999999;
	border-bottom: solid 4px #5a5a5a;
}

/* ボタンサイズ系 */
.btnsize-small {
	width: 150px;
	height: 20px;
	font-size: 12px;
	line-height: 20px;
}

/*　エフェクト系　*/

/* ボタンを光らせる効果を付加 */
.brilliantButton:after {
	position: absolute;
    left: 0;
    width: 1%;
    height: 100%;
    transform: rotate(45deg);
    background-color: #fff;
    animation: shiny 3s ease-in-out infinite;
    content: " ";
    opacity: 0;
}
@keyframes shiny{
	0%{
		transform: scale(0) rotate(45deg);
		opacity: 0;
	}
	60%{
		transform:scale(0) rotate(45deg);
		opacity:0.5;
	}
	61%{
		transform:scale(5) rotate(45deg);
		opacity:0.9;
	}
	100%{
		transform:scale(65) rotate(45deg);
		opacity:0;
	}
}
.brilliantButton:active:after {
    animation: none;
}

@media screen and (max-width:780px){
	.squareBtn {
		box-sizing: border-box;
		width: 280px;
		height: 65px;
		font-size: 20px;
	}
}