/*Button Pack6 　CSS*/

/*　　骨格部分 　*/
.button{
    text-decoration: none;
    font: bold 1.2em "MS UI Gothic",'Arial';
    display: inline-block;
    text-align: left;
    border: 1px solid #9c9c9c; /* Fallback style */
    border: 1px solid rgba(0, 0, 0, 0.5);           
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .1em rgba(0,0,0,0.4);
    border-radius: 5px;
    position:relative;
}
.button span {
	border:0.5em black solid;
	display:inline-block;
	position:absolute;
	top:0.5em;
	right:0.5em;
}
.button:hover span {
	border-top:0.5em transparent solid;
	border-right:0.5em transparent solid;
	border-bottom:0.5em transparent solid;
	position:absolute;
	top:0.5em;
	right:0em;
}
.button:hover{
    box-shadow: 0 .1em .5em rgba(0,0,0,0.2);
    -moz-box-shadow: 0 .1em .5em rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 .1em .5em rgba(0,0,0,0.2);
    margin-left:0;
}
.button:active{
    position: relative;
    top: 1px;
}

/*------- ボタンの大きさを変えるとき　-------*/
.button {
	width:220px;         /* 幅を変更するとき、数値 */
	padding:0.5em 1em;   /* 文字の上下と左右の値 */
	font-size:inherit;   /* 文字の大きさを変えるとき、inheritに代えて数値 */
}

/*------  ここから　ボタンの色　---------*/
/*   ボタンの色　茶   */ 
.btn-brown{
    background: #dec79b;
    color:#5a3a23;
}
.btn-brown span {
	border-color: #d7aa84;
}
.btn-brown:hover{
    background: #f2ebd1;
}
.btn-brown:hover span{
	border-left:1em #c68751 solid;
}
.btn-brown:active{
    background: #f2ebd1;
}
/*   茶　終わり　　　　*/

/*   ボタンの色　桜   */ 
.btn-cherry{
    background: #f7d3d6;
    color:#5a3a23;
}
.btn-cherry span {
	border-color: #e07384;
}
.btn-cherry:hover{
    background: #fda8b6;
}
.btn-cherry:hover span{
	border-left:1em #c32b43 solid;	
	
}
.btn-cherry:active{
    background: #fda8b6;
}
/*   桜　終わり　　　　*/

/*   自分の色   */ 
.btn-mycolor{
    background: #f7d3d6;
    color:#5a3a23;
}
.btn-mycolor span {
	border-color: #e07384;
}
.btn-mycolor:hover{
    background: #fda8b6;
}
.btn-mycolor:hover span{
	border-color: #992235;
}
.btn-mycolor:active{
    background: #fda8b6;
}
/*   自分色　終わり　　　　*/