/* ============================================================
   TOPボタン
   ------------------------------------------------------------
   初期状態：
   ・右下
   ・画面外
   ・透明
   ・クリック不可

   show：
   ・右下に表示
============================================================ */

#back-to-top {

  position: fixed !important;

  right: 20px !important;

  left: auto !important;

  bottom: -90px;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 58px;

  height: 58px;

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  border-radius: 18px;

  background:
    rgba(255, 255, 255, 0.72);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  border:
    1px solid rgba(255, 255, 255, 0.72);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18);

  color:
    #64748b;

  text-decoration: none;

  font-size: 13px;

  font-weight: 700;

  line-height: 1;

  text-align: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  cursor: pointer;

  transform:
    translateY(10px);

  transition:
    bottom 0.45s cubic-bezier(.77,.2,.05,1),
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.25s ease;

}


/* ============================================================
   表示
============================================================ */

#back-to-top.show {

  right: 20px !important;

  left: auto !important;

  bottom: 20px;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0);

}


/* ============================================================
   ホバー
============================================================ */

#back-to-top:hover {

  transform:
    translateY(-4px);

  background:
    rgba(255, 255, 255, 0.92);

}


/* ============================================================
   押した時
============================================================ */

#back-to-top:active {

  transform:
    scale(0.96);

}


/* ============================================================
   スマートフォン
============================================================ */

@media (
  max-width: 768px
) {

  #back-to-top {

    right: 14px !important;

    left: auto !important;

    width: 52px;

    height: 52px;

    border-radius: 15px;

    font-size: 12px;

  }


  #back-to-top.show {

    right: 14px !important;

    left: auto !important;

    bottom: 14px;

  }

}