@charset "utf-8";
/* CSS Document */

.morebtn {
	background: #111;	color: #fff;}
.morebtn a {  color:#fff !important; text-decoration:none;}
.morebtn :hover ,.morebtn a:hover {
	background: #333;	color:#fff !important;}


.morebtn_border {
	background: #f7f7f7;	color: #0799ff; border:1px solid #999;}
.morebtn_border a {  color:#0799ff !important; text-decoration:none;}
.morebtn_border :hover ,.morebtn_border a:hover {
	background: #ccc;	color:#000 !important;}



.morebtn_red {
	background: #eb0000;	color: #fff;}
.morebtn_red a {  color:#fff !important; text-decoration:none;}
.morebtn_red :hover ,.morebtn_red a:hover {
	background: #9d0000;	color:#fff !important;}


.morebtn_white {
	background: #fff;	color: #333;}
.morebtn_white a {  color:#333 !important;}
.morebtn_white :hover ,.morebtn_white a:hover {
	background: #ddd;	color:#333 !important;}


.morebtn_green {
	background: #7cb300;	color: #fff;}
.morebtn_green a {  color:#fff !important}
.morebtn_green :hover ,.morebtn_green a:hover {
	background: #666;	color:#fff !important;}

.morebtn,.morebtn_border,.morebtn_red, .morebtn_white, .morebtn_gray, .morebtn_black, .morebtn_black_left, .morebtn_green {
	max-width:360px;
	text-align:center;
	margin:10px auto ;
	padding:0 ;
	line-height:3.0;
	display:block;
	border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.1);
}


.morebtn a,.morebtn_border a,.morebtn_red a, .morebtn_white a, .morebtn_gray a, .morebtn_green a { 
    text-align:center;
	padding:0 !important;
	margin:0 !important;
	position: relative;
	display:block;
	text-decoration:none !important;
    font-size:16px;
    font-weight:bold;
	border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	/*box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.1);*/
}

.morebtn a:hover, .morebtn_border a:hover, .morebtn_red a:hover, .morebtn_white a:hover, .morebtn_green a:hover {
	display:block;
	padding:0 !important;
	margin:0 !important;
	/*box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.1);*/
}

.morebtn :hover,.morebtn_border :hover,.morebtn_red :hover, .morebtn_white :hover, .morebtn_green :hover {
	display:block;
	padding:0 !important;
	margin:0 !important;
	/*box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.1);*/
}




@media screen and (min-width : 781px) {
/*　   黒色ボタン 白色「＞」アイコン表示 */
.morebtn a:before {         
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #fff;
}

.morebtn a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 30px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #111;
	
}
.morebtn a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #333;
}
/*　//黒色ボタン白色「＞」アイコン表示　 */

/*　ボタン 「＞」アイコン表示   黒色ボタン 白色「＞」アイコン表示 */
.morebtn_border a:before {         
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 20px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #0799ff;
}

.morebtn_border a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 23px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #f7f7f7;
	
}
.morebtn_border a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #ccc;
}
/*　//黒色ボタン白色「＞」アイコン表示「＞」アイコン表示 */

	
	
/*　赤ボタン 白色「＞」アイコン表示 */
.morebtn_red a:before {         
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #fff;
}

.morebtn_red  a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 30px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #eb0000;
	
}
.morebtn_red  a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #9d0000;
}
/*　//赤ボタン白色「＞」アイコン表示 */


/*　白色ボタン黒色「＞」アイコン表示 */
.morebtn_white a:before {         
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #333;
}

.morebtn_white  a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 30px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #fff;
	
}
.morebtn_white  a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #ddd;
}
/*　//白色ボタン黒色「＞」アイコン表示 */
	
	
/*　緑色ボタン 白色「＞」アイコン表示 */
.morebtn_green a:before {         
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 25px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #f5ec00;
}

.morebtn_green  a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 30px;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	background: #7cb300;
	
}
.morebtn_green  a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	background: #666;
}
/*　//緑色ボタン白色「＞」アイコン表示 */