@charset "UTF-8";
/* ページトップ（肉球）。PC の幅（900px 以上）だけ。紹介ページ・新着情報・届けの手続き・同行避難・個人情報の守り方で共通（2026-10-15 kawabe さん） */

.pagetop {
  display: none;
}

@media (min-width: 900px) {
  .pagetop {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 2px solid #5a3a26;
    border-radius: 50%;
    background: #fffdf9;
    box-shadow: 0 4px 0 #5a3a26;
    color: #8b4a26;
    cursor: pointer;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .3s, transform .3s, visibility .3s, background-color .2s;
  }
  .pagetop.is_show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .pagetop:hover {
    background: #fdf1e6;
  }
  .pagetop:active {
    box-shadow: 0 1px 0 #5a3a26;
    transform: translateY(3px);
  }
  .pagetop:focus-visible {
    outline: 3px solid #c97a55;
    outline-offset: 3px;
  }
  .pagetop_paw {
    width: 34px;
    height: 34px;
    transform-origin: 50% 80%;
  }
  .pagetop_text {
    font-family: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    color: #5a3a26;
    white-space: nowrap;
  }

  /* ギミック1：近づくと、肉球が手をふる */
  .pagetop:hover .pagetop_paw {
    animation: pagetop_wave .8s ease-in-out;
  }
  /* ギミック2：押すと、ぴょんと跳ねて、足あとが上へ歩いていく */
  .pagetop.is_jump .pagetop_paw {
    animation: pagetop_jump .6s cubic-bezier(.3, 1.6, .5, 1);
  }
  .pagetop_step {
    position: fixed;
    z-index: 49;
    width: 34px;
    height: 34px;
    color: #b5643d;
    pointer-events: none;
    opacity: 0;
    animation: pagetop_step 1.1s ease-out forwards;
  }
  .pagetop_step svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

@keyframes pagetop_wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-16deg); }
  50% { transform: rotate(12deg); }
  75% { transform: rotate(-8deg); }
}
@keyframes pagetop_jump {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-12px) scale(1.1); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes pagetop_step {
  0% { opacity: 0; transform: scale(.4) rotate(var(--r, 0deg)); }
  25% { opacity: .9; transform: scale(1) rotate(var(--r, 0deg)); }
  100% { opacity: 0; transform: scale(1) rotate(var(--r, 0deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .pagetop,
  .pagetop:hover .pagetop_paw,
  .pagetop.is_jump .pagetop_paw {
    transition: none;
    animation: none;
  }
  .pagetop_step {
    display: none;
  }
}