@charset "utf-8";



/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
    outline: none;
}


a:hover{
	color:#ccc;
}



/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';

    /*絶対配置で下線の位置を決める*/
    position: absolute;
    bottom:-11px;
    left:15%;


    /*下線の形状*/    
    width: 99%;
    height: 2px;
  background:#f3f3f3;

    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    bottom:-3px;
    right:-19px;


    /*矢印の形状*/    
    width: 30px;
    height:3px;
    background:#f3f3f3;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:30%;
}

.btnarrow4:hover::after{
    right:-29%;
}