/* ============================================
   c-btn-03 - Back to Top (トップへ戻るボタン)
   ============================================ */
.c-btn-03 {
  position: fixed;
  /* スティッキーCTAの実測高に追従し、比較パターンの高さが変わっても重ならない */
  bottom: calc(var(--sticky-cta-current-height, var(--space-7-xl)) + var(--space-lg));
  right: var(--space-lg);
  z-index: 80;
  width: 4rem;
  height: 4rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-white, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.c-btn-03 .material-icons {
  font-size: var(--font-size-2-xl);
}

.c-btn-03--visible {
  opacity: 1;
  visibility: visible;
}

.c-btn-03:hover {
  opacity: 0.85;
}

/* --- Responsive --- */
@media (max-width: 767px) {
  .c-btn-03 {
    right: var(--space-2-xl);
  }
}