/* HIMAWARI Scroll Top Button */
.hm-scroll-top {
  position: fixed !important;
  z-index: 999990 !important;
  width: var(--hm-st-desktop-size, 46px) !important;
  height: var(--hm-st-desktop-size, 46px) !important;
  min-width: var(--hm-st-desktop-size, 46px) !important;
  min-height: var(--hm-st-desktop-size, 46px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: var(--hm-st-radius, 10px) !important;
  background: var(--hm-st-bg, #071229) !important;
  color: var(--hm-st-icon, #c7a34a) !important;
  box-shadow: 0 10px 24px rgba(7, 18, 41, 0.20) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(12px) !important;
  transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.hm-scroll-top--bottom-right {
  right: var(--hm-st-desktop-gap, 24px) !important;
  bottom: var(--hm-st-desktop-gap, 24px) !important;
}

.hm-scroll-top--bottom-left {
  left: var(--hm-st-desktop-gap, 24px) !important;
  bottom: var(--hm-st-desktop-gap, 24px) !important;
}

.hm-scroll-top.hm-scroll-top--visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.hm-scroll-top:hover,
.hm-scroll-top:focus,
.hm-scroll-top:active {
  background: var(--hm-st-bg, #071229) !important;
  color: var(--hm-st-icon, #c7a34a) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 10px 24px rgba(7, 18, 41, 0.20) !important;
}

.hm-scroll-top__arrow {
  width: 21px !important;
  height: 21px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

.hm-scroll-top__arrow svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.hm-scroll-top--shortcode {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  .hm-scroll-top {
    width: var(--hm-st-tablet-size, 44px) !important;
    height: var(--hm-st-tablet-size, 44px) !important;
    min-width: var(--hm-st-tablet-size, 44px) !important;
    min-height: var(--hm-st-tablet-size, 44px) !important;
  }

  .hm-scroll-top--bottom-right {
    right: var(--hm-st-tablet-gap, 20px) !important;
    bottom: var(--hm-st-tablet-gap, 20px) !important;
  }

  .hm-scroll-top--bottom-left {
    left: var(--hm-st-tablet-gap, 20px) !important;
    bottom: var(--hm-st-tablet-gap, 20px) !important;
  }
}

@media (max-width: 480px) {
  .hm-scroll-top {
    width: var(--hm-st-mobile-size, 42px) !important;
    height: var(--hm-st-mobile-size, 42px) !important;
    min-width: var(--hm-st-mobile-size, 42px) !important;
    min-height: var(--hm-st-mobile-size, 42px) !important;
    border-radius: 9px !important;
  }

  .hm-scroll-top--bottom-right {
    right: var(--hm-st-mobile-gap, 16px) !important;
    bottom: var(--hm-st-mobile-gap, 16px) !important;
  }

  .hm-scroll-top--bottom-left {
    left: var(--hm-st-mobile-gap, 16px) !important;
    bottom: var(--hm-st-mobile-gap, 16px) !important;
  }

  .hm-scroll-top__arrow {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-scroll-top {
    transition: none !important;
  }
}