/* Hirata Office common TOP button
   Put these four files in the same folder:
   topbutton.css / topbutton.js / topbutton.png / topbutton1.png
*/
#hirata-common-topbutton {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99990;
  display: block;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(12px) scale(.92);
  transform: translateY(12px) scale(.92);
  -webkit-transition: opacity .32s ease, -webkit-transform .36s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
  transition: opacity .32s ease, transform .36s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
  -webkit-filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
  -webkit-tap-highlight-color: transparent;
}

/* Images are resolved relative to this CSS file, so page depth does not matter. */
#hirata-common-topbutton::before,
#hirata-common-topbutton::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  -webkit-transition: opacity .18s ease;
  transition: opacity .18s ease;
}

#hirata-common-topbutton::before {
  background-image: url("topbutton1.png");
  opacity: 1;
}

#hirata-common-topbutton::after {
  background-image: url("topbutton.png");
  opacity: 0;
}

#hirata-common-topbutton.is-visible {
  opacity: .92;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0) scale(1);
  transform: translateY(0) scale(1);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

#hirata-common-topbutton.is-visible:hover,
#hirata-common-topbutton.is-visible:focus,
#hirata-common-topbutton.is-returning {
  opacity: 1;
}

#hirata-common-topbutton.is-visible:hover::before,
#hirata-common-topbutton.is-visible:focus::before,
#hirata-common-topbutton.is-returning::before {
  opacity: 0;
}

#hirata-common-topbutton.is-visible:hover::after,
#hirata-common-topbutton.is-visible:focus::after,
#hirata-common-topbutton.is-returning::after {
  opacity: 1;
}

#hirata-common-topbutton.is-visible:hover,
#hirata-common-topbutton.is-visible:focus {
  -webkit-transform: translateY(-3px) scale(1.055);
  transform: translateY(-3px) scale(1.055);
  -webkit-filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.34));
  outline: none;
}

/* Small press only, matching the approved version. */
#hirata-common-topbutton.is-pressed,
#hirata-common-topbutton.is-visible:active {
  -webkit-transform: translateY(2px) scale(.96);
  transform: translateY(2px) scale(.96);
  -webkit-filter: drop-shadow(0 1px 3px rgba(0,0,0,.24));
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.24));
  -webkit-transition-duration: .07s;
  transition-duration: .07s;
}

@supports (bottom: env(safe-area-inset-bottom)) {
  #hirata-common-topbutton { bottom: calc(18px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  #hirata-common-topbutton {
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
  }
  @supports (bottom: env(safe-area-inset-bottom)) {
    #hirata-common-topbutton { bottom: calc(12px + env(safe-area-inset-bottom)); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #hirata-common-topbutton,
  #hirata-common-topbutton::before,
  #hirata-common-topbutton::after {
    -webkit-transition-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}