/* ----------------------------------------------------------------------
 トップへ戻るボタン
---------------------------------------------------------------------- */
.head-floating-group {
  display: none;
}

@media (width < 767px) {
  .head-floating-group {
    /* 375px デザイン基準: right 7px / bottom 74px */
    --head-floating-gap: clamp(12px, 2.13svw, 16px);
    --head-floating-offset-inline-sp: calc(7 * 100svw / 375);
    --head-floating-offset-bottom-sp: calc(74 * 100svw / 375);
    box-sizing: border-box;
    position: fixed;
    bottom: calc(var(--head-floating-offset-bottom-sp) + env(safe-area-inset-bottom, 0px));
    right: var(--head-floating-offset-inline-sp);
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .head-floating-group.is-scroll-top-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .head-floating-group.is-scroll-top-shown .head-floating-scroll-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

@media (width >=768px) {
  .head-floating-group {
    /* 1440px デザイン基準: right / bottom 24px */
    --head-floating-offset-inline-pc: clamp(16px, calc(24 * 100vw / 1440), 24px);
    --head-floating-offset-bottom-pc: clamp(16px, calc(24 * 100vw / 1440), 24px);
    box-sizing: border-box;
    position: fixed;
    bottom: var(--head-floating-offset-bottom-pc);
    right: var(--head-floating-offset-inline-pc);
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    max-width: 264px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .head-floating-group.is-scroll-top-shown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.head-floating-scroll-top {
  --scroll-top-icon-color: #634f32;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 65px;
  aspect-ratio: 1;
  padding: 17px 0 13px;
  border: 2px solid #634f32;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 1px 1px 0.5px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: filter 0.3s ease;

  @media (any-hover: hover) {
    &:hover {
      filter: opacity(0.7);
    }
  }

  @media (width <=767px) {
    width: 38px;
    padding: 7px;
    border: none;
    --scroll-top-icon-color: #4CAF50;
    border-radius: 15%;
  }
}

@media (width >=768px) {
  .head-floating-group.is-scroll-top-shown .head-floating-scroll-top {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.head-floating-scroll-top__icon {
  display: block;
  flex-shrink: 0;
  width: 22px;
  height: 13px;
  background-color: var(--scroll-top-icon-color);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi41IDEzTDEzLjUgMkwyNC41IDEzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAyNyAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi41IDEzTDEzLjUgMkwyNC41IDEzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  @media (width <=767px) {
    width: 20px;
    height: 10px;
    background-color: #ff792eb5;
  }
}

.head-floating-scroll-top__label {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--scroll-top-icon-color);
  text-align: center;

  @media (width <=767px) {
    display: none;
  }
}