@charset "utf-8";

/* ボタン共通設定 */
.btn06{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	background:#333;
	color:#fff;
    padding: 10px;
    text-align: center;
    outline: none;
	width:100%;
    /*アニメーションの指定*/
/*    transition: ease .2s;*/
    transition: ease .2s;
}

.btn06:hover{
	background:#555;
}


/* 矢印が右に移動 */

.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:42%;
    right: 50px;
    /*矢印の形状*/
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    /*アニメーションの指定*/
/*    transition: all .3s;*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after{
    right: 15px;
}



/*-------------------------------------

--------------------------------------*/
.contactBox .btn06 {
	padding: 15px;
	margin: 10px 0 0 0;
	font-size: 2.8rem;
	font-weight: 700;
/*	background:#0000ff;*/
	color:#fff;
}

.contactBox .btn06:hover{
	background:#0000ff;
	color: #ffffff;
}
.contactBox .btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:42%;
    right: 50px;
    /*矢印の形状*/
    width: 20px;
    height: 20px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
.contactBox .btnarrow1:hover::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}