/*
 * reien-page-top.css
 * 霊園マッチング共通のページ上部へ戻るボタン。
 */

.reien-page-top {
  position: fixed;
  right: 24px;
  bottom: 102px;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: #29648D;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px);
  cursor: pointer;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s, filter 0.2s;
}

.reien-page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.reien-page-top:hover,
.reien-page-top:focus {
  background: #29648D;
  filter: brightness(0.7);
}

.reien-page-top-icon {
  display: block;
  width: 24px;
  height: 24px;
  background: center / 24px 24px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 15L12 9L6 15' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.reien-page-top:hover .reien-page-top-icon,
.reien-page-top:focus .reien-page-top-icon {
  transform: translateY(-1.5px);
}