@charset "utf-8";

.topage-top {
  display: block;
  width: 50px;
  visibility: hidden;
  position: fixed;
  z-index: 1000;
  right: 20px;
  bottom: 20px;
  opacity: 0;
  /* visibility は 0s だが .2s 遅延（表示へ切替時は 0.2s 後に visible になる） */
  transition: opacity .2s ease, visibility 0s linear .2s, transform .2s ease;
  pointer-events: none;


  @media (min-width:769px) {
    width: 64px;
  }

  @media (min-width:1280px) {
    right: 40px;
    bottom: 80px;
  }

  img {
    width: 100%;
    height: auto;
    transition: transform .2s ease;
  }

  &:hover {
    img {
      transform: translateY(-1rem)
    }
  }
}

[data-footer-visible=true] .topage-top {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* visibility は即時切替（非表示へ切替時は即座に hidden になる） */
  transition: opacity .2s ease, visibility 0s linear 0s, transform .2s ease;
}

html.is-drawer-open .topage-top {
  display: none;
}

:has(.bottom-banner) .topage-top {
  bottom: 90px;
}