/* HARITA ドット動物のナビ（サイト全体） */
#hpg{position:fixed;left:14px;bottom:84px;z-index:70;display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none}
#hpg .hpg__b{pointer-events:auto;position:relative;max-width:238px;background:#fff;border:1px solid var(--pc,#6B7280);border-radius:13px;padding:8px 12px;font-size:12px;font-weight:700;color:#33423a;line-height:1.65;letter-spacing:.01em;box-shadow:0 8px 22px rgba(24,40,32,.16);opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}
#hpg.is-on .hpg__b{opacity:1;transform:translateY(0)}
#hpg.is-min .hpg__b{display:none}
#hpg .hpg__b::after{content:"";position:absolute;left:16px;bottom:-6px;width:9px;height:9px;background:#fff;border-right:1px solid var(--pc,#6B7280);border-bottom:1px solid var(--pc,#6B7280);transform:rotate(45deg)}
#hpg .hpg__k{display:block;font-size:10.5px;font-weight:800;color:var(--pc,#6B7280);letter-spacing:.06em;margin:0 0 1px}
#hpg .hpg__x{pointer-events:auto;position:absolute;top:-8px;right:-8px;width:19px;height:19px;line-height:17px;text-align:center;border-radius:50%;border:1px solid #d8e0dc;background:#fff;color:#7d8b84;font-size:12px;font-weight:700;cursor:pointer;padding:0;box-shadow:0 2px 6px rgba(24,40,32,.14)}
#hpg .hpg__x:hover{color:#33423a;border-color:#b9c5bf}
#hpg .hpg__a{pointer-events:auto;display:block;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;image-rendering:pixelated;filter:drop-shadow(0 2px 3px rgba(30,40,34,.2));opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease}
#hpg.is-on .hpg__a{opacity:1;transform:translateY(0)}
#hpg .hpg__a svg{display:block;width:100%;height:100%}
#hpg .hpg__a.is-hop{animation:hpghop .5s ease}
@keyframes hpghop{0%{transform:translateY(0)}30%{transform:translateY(-5px)}55%{transform:translateY(0)}75%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@media (max-width:820px){
  #hpg{left:10px;bottom:72px;gap:4px}
  #hpg .hpg__b{max-width:min(62vw,230px);font-size:11.5px;padding:7px 10px;border-radius:12px}
  #hpg .hpg__a{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  #hpg .hpg__b,#hpg .hpg__a{transition:none}
  #hpg .hpg__a.is-hop{animation:none}
}
@media print{#hpg{display:none!important}}