.button {
	position: relative;
	color:#444;
	cursor: pointer;
	display:inline-block;
	background: #FFF;
	padding: 4px 6px;
	border: 1px solid #BBB;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.button:active {
	background: #FFF;
}
a.button {
	color:#444;
}

.button_gray {
	position: relative;
	color:#666;
	cursor:pointer;
	display:inline-block;
	padding: 4px 6px;
	background: #FFF;
	border: solid 1px #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 0 rgba(204, 204, 204, 1);
	text-shadow: -1px 1px 0 rgba(204, 204, 204, 0.8);
	box-sizing: border-box;
	z-index:1;
	transition: background 0.3s;
}
.button_gray:hover {
	background: #EEEEEE;
	transition: background 0.3s;
}
.button_gray:active {
	background: #EFEFEF;
}
a.button_gray {
	color:#666;
}



.button_orange {
	position: relative;
	color:#FFF;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	background: #FFBC57;
	border: 1px solid #FFBC57;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	text-shadow: -1px 1px 0 rgba(184, 110, 0, 0.8);
	box-sizing: border-box;
	z-index:1;
	transition: all 0.3s;
}
.button_orange:hover {
	background: #FF9900;
	border: 1px solid #FF9900;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.45);
	transition: all 0.3s;
}
.button_orange:active {
	background: #FFBC57;
	border: 1px solid #FFBC57;
	transition: all 0.1s;
}
a.button_orange {
	color:#FFF;
}


.button_blue {
	position: relative;
	color:#FFF;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	background-color: #4376AB;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #4376AB;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	text-shadow: -1px 1px 0 rgba(7, 62, 119, 0.8);
	box-sizing: border-box;
	z-index:1;
	overflow: hidden;
	transition: all 0.3s;
}
.button_blue:hover {
	background-color: #0D58A6;
	border: 1px solid #0D58A6;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.45);
	transition: all 0.3s;
}
.button_blue:active {
	background: #A6BDD5;
	border: 1px solid #A6BDD5;
	transition: all 0.1s;
}
a.button_blue {
	color:#FFF;
}


.button_red {
	position: relative;
	color:#FFF;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	background: #CD4695;
	border: 1px solid #CD4695;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	text-shadow: -1px 1px 0 rgba(146, 0, 86, 0.8);
	box-sizing: border-box;
	z-index:1;
	transition: all 0.3s;
}
.button_red:hover {
	background: #CB0077;
	border: 1px solid #CB0077;
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.45);
	transition: all 0.3s;
}
.button_red:active {
	background: #E7B0D0;
	border: 1px solid #E7B0D0;
	transition: all 0.1s;
}
a.button_red {
	color:#FFF;
}

.button_disable {
	position: relative;
	color:#CCC;
	cursor:pointer;
	display:inline-block;
	padding: 4px 6px;
	background: #FFF;
	border: solid 1px #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
}

.button_social {
	text-align:center;
	padding:12px 0px;
	font-weight:bold;
	font-size:0.8em;
	display:block;
	cursor: pointer;
}

.button_signin {
	position: relative;
	color:#FFF;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	background-color: #4376AB;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	box-shadow: 0 3px 0 rgba(7, 62, 119, 1);
	text-shadow: -1px 1px 0 rgba(7, 62, 119, 0.8);
	box-sizing: border-box;
	z-index:1;
	opacity: 1;
	transition: opacity 0.3s;
}
.button_signin:hover {
	opacity: 0.8;
	transition: opacity 0.3s;
}

a.button_signin {
	color:#FFF;
}


.button_outlined_blue {
	position: relative;
	color:#4376AB;
	background-color: transparent;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	border: #4376AB 1px solid;
	z-index:1;
	overflow: hidden;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	transition: all 0.3s;
}
.button_outlined_blue:hover {
	color: #0D58A6;
	border: #0D58A6 1px solid;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	transition: all 0.3s;
}
.button_outlined_blue:active {
	transition: all 0.1s;
	background: #A6BDD5;
}
a.button_outlined_blue {
	color:#4376AB;
}

.button_outlined_red {
	position: relative;
	color:#CD4695;
	background-color: transparent;
	cursor:pointer;
	display:inline-block;
	padding: 6px 16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
	border: #CD4695 1px solid;
	z-index:1;
	overflow: hidden;
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	transition: all 0.3s;
}
.button_outlined_red:hover {
	color: #CB0077;
	border: #CB0077 1px solid;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
	transition: all 0.3s;
}
.button_outlined_red:active {
	background: #E7B0D0;
	transition: all 0.1s;
}
a.button_outlined_red {
	color:#CD4695;
}


.ripple {
    position: absolute;
    background-color: #CCC;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /*今回はアニメーションの名前，変化の時間，繰り返し回数*/
    animation: rippleEffect 1200ms 1;
    opacity: 0;
}
@keyframes rippleEffect {
    from {
        transform: scale(1);
        opacity: 0.45;
    }
    to {
        transform: scale(80);
        opacity: 0;
    }
}