【CSS/JAVA】予約ボタンを表示させたい

.reserve {
  position: fixed;
  bottom: 20vh;
  right: 0;
  writing-mode: vertical-lr;
  text-orientation: mixed;
  background-color: #AD3814;
  color: #fff;
  padding: 20px 10px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  z-index: 999 !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: opacity 0.3s;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease, visibility 0.6s;
}

.reserve:hover {
  opacity: 0.8;
}

[data-scrolled=true] .reserve {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .reserve {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    writing-mode: horizontal-tb; /* 横書きに戻す */
    text-orientation: mixed;
    transform: translateY(100%); /* 下から出る */
    padding: 15px;
    text-align: center;
    font-size: 18px;
    z-index: 9999 !important;
  }

  [data-scrolled=true] .reserve {
    transform: translateY(0); /* 下から表示 */
  }

  .p-fixBtnWrap{
    bottom:10% !important;
  }

  .reserve.hide-at-bottom {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
}

<script>
  function toggleReserveButton() {
    const reserveBtn = document.querySelector('.reserve');
    const scrollY = window.scrollY || window.pageYOffset;
    const windowH = window.innerHeight;
    const bodyH = document.body.offsetHeight;

    // フッター付近（画面の最下部）に来たらボタンを隠す
    if (scrollY + windowH >= bodyH - 50) {
      reserveBtn.classList.add('hide-at-bottom');
    } else {
      reserveBtn.classList.remove('hide-at-bottom');
    }
  }

  window.addEventListener('scroll', toggleReserveButton);
  window.addEventListener('resize', toggleReserveButton); // 画面サイズ変更時も考慮
  document.addEventListener('DOMContentLoaded', toggleReserveButton);
</script>