/* =================================================================
 * c-page-top-btn — ページ先頭へ戻るボタン
 * Figma: 3321:74833 (FooterPc) 内の PageTop 子要素
 *        5824:95706（Wireframe-18「フッター」canonical / 追従・停止仕様の正）
 *
 * 仕様（Figma 5824:95706 準拠）:
 *   - position: fixed で常に画面右下に追従
 *   - 既定は非表示（opacity 0 / pointer-events:none）
 *   - JS で .is-visible を付与して表示（一定スクロール以降）
 *   - クリックで window.scrollTo({ top:0, behavior:'smooth' })
 *   - サイズ: PC 72×72 / SP 56×56
 *   - 背景 #FF6243 角丸 50%、白矢印は SVG ファイルから
 *
 * 配置ルール:
 *   - スクロールに追従するが、フッター位置より下には移動しない
 *   - 短いページや邪魔になる場合は追従させず、フッター位置に固定表示も可
 * =================================================================*/

.c-page-top-btn {
  position: fixed;
  right: 24rem;
  bottom: 24rem;
  z-index: 200; /* footer-z (10) より上、modal 用に余裕 */
  width: 72rem;
  height: 72rem;
  padding: 0;
  border: 0;
  border-radius: 50%; /* ボタンを円形にして hover の box-shadow を円に沿わせる（四角い枠の防止） */
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8rem);
  transition:
    opacity var(--duration-base) var(--easing-default),
    visibility var(--duration-base) var(--easing-default),
    transform var(--duration-base) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
  /* タップハイライト除去 */
  -webkit-tap-highlight-color: transparent;
}

/* スクロールで表示 */
.c-page-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* hover / focus */
.c-page-top-btn:hover {
  transform: translateY(-2rem);
  box-shadow: var(--shadow-menu);
}

.c-page-top-btn:focus-visible {
  outline: 2rem solid var(--color-key);
  outline-offset: 4rem;
}

.c-page-top-btn:active {
  transform: translateY(0);
}

/* アイコン本体（SVG 画像、72×72 で角丸+橙背景+白矢印を一体表示） */
.c-page-top-btn__icon {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

/* =================================================================
 * SP（≤1023.98px）
 * =================================================================*/
@media (max-width: 1023.98px) {
  .c-page-top-btn {
    /* 旧: 390px 中央カラム右端基準 max(16px, calc(50vw-179px)) だったが、
       広い SP 帯（〜765px 等）でボタンが中央寄りに浮く（左に寄りすぎる）ため、
       常にビューポート右下隅（16rem 内側）に固定する。 */
    right: 16rem;
    bottom: 16rem;
    width: 56rem;
    height: 56rem;
  }
}

/* prefers-reduced-motion で transform 無効化 */
@media (prefers-reduced-motion: reduce) {
  .c-page-top-btn {
    transition: opacity var(--duration-fast) var(--easing-default),
                visibility var(--duration-fast) var(--easing-default);
    transform: none !important;
  }
}