.arrow_button {
    display: inline-block;
    position: relative;
    padding: 10px 20px 10px 47px;
    background: #ffa899; /* デフォルトの背景色 */
    border-radius: 10px;
    color: #fff; /* テキストの色 */
    transition: background-color 1s, box-shadow 1.5s;
  }
   
  .arrow_button::before { /* 矢印の表示設定 */
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
  }
   
  .arrow_button::after { /* 矢印の丸枠の表示設定 */
    content: "";
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 13px;
    width: 23px;
    height: 23px;
    border: 3px solid #fff;
    border-radius: 50%;
  }
   
  .arrow_button:hover { /* マウスオーバー時のスタイル */
    background-color: #ff6347; /* マウスオーバー時の背景色 */
    box-shadow: 2px 3px 2px rgba(0,0,0,0.3) /* マウスオーバー時につける影 */
  }