@charset "utf-8";

/*矢印が右に移動して背景がつく*/

.btnarrow5{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    padding-top: 12px;
    padding-right: 80px;
    padding-left: 20px;
    padding-bottom: 12px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    border-radius: 1.5em;
    /*アニメーションの指定*/
    transition: all .15s linear;
    font-size: 15px;
    background-color: #DCDDDD;
}

.btnarrow5:hover{
  background:#eee;

}

/*矢印と下線の形状*/
.btnarrow5::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:30px;
    /*下線の形状*/
  width:40px;
  height:1px;
  background:#333;
    /*アニメーションの指定*/
    transition: all .15s linear;
}

.btnarrow5::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 28.5%;
    right: 34px;
    /*矢印の形状*/
  width:1px;
  height:9px;
  background:#333;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .15s linear;
}

/*hoverした際の移動*/
.btnarrow5:hover::before{
  right:10px;

}

.btnarrow5:hover::after{
  right:15px;
    
}


/*矢印が左に移動して背景がつく*/

.btnarrow4{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    padding-top: 8px;
    padding-right: 20px;
    padding-left: 80px;
    padding-bottom: 8px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    border-radius: 1em;
    /*アニメーションの指定*/
    transition: all .15s linear;
    font-size: 16px;
    background-color: #DCDDDD;
}

.btnarrow4:hover{
  background:#eee;

}

/*矢印と下線の形状*/
.btnarrow4::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  left:30px;
    /*下線の形状*/
  width:40px;
  height:1px;
  background:#333;
    /*アニメーションの指定*/
    transition: all .15s linear;
}

.btnarrow4::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 28.5%;
    left: 34px;
    /*矢印の形状*/
  width:1px;
  height:7px;
  background:#333;
    transform:skewX(-45deg);
    /*アニメーションの指定*/
    transition: all .15s linear;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
  left:10px;

}

.btnarrow4:hover::after{
  left:15px;
    
}


/*準備中　矢印なし*/

.btnarrow3{
    /*矢印の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    padding-top: 12px;
    padding-right: 80px;
    padding-left: 80px;
    padding-bottom: 12px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    border-radius: 1.5em;
    font-size: 15px;
    background-color: #F1F1F1;
}

.onlinestore_banner .btnarrow5{background:#fff;}
.onlinestore_banner .btnarrow5:hover{background:#E4DAEA;}