/* 聖ちぃ巡礼マップ - トップページ */
:root{
  --plum:#5a4560;
  --pink:#ff8fb8;
  --pink-d:#d94b86;
  --line:#ffd3e4;
  --soft:#fff3f8;
  --lav:#c9b6ff;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html{background:#fdf0ff}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  color:var(--plum);
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  line-height:1.6;
  background:linear-gradient(180deg,#fff2f8 0%,#fdf0ff 55%,#eef6ff 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}
body::before{ /* 水玉 */
  content:"";position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,170,205,.22) 2px,transparent 2.5px);
  background-size:26px 26px;
}

/* 背景の肉球 */
.bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.bgpaw{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:#ffb5cf;opacity:.38;
  transform:rotate(var(--r));animation:floaty 5s ease-in-out var(--d) infinite alternate}
.bgpaw svg{width:100%;height:100%;fill:currentColor;display:block}
@keyframes floaty{from{transform:translateY(0) rotate(var(--r))}to{transform:translateY(-12px) rotate(var(--r))}}

.page{position:relative;z-index:1;max-width:460px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 16px calc(env(safe-area-inset-bottom,0px) + 36px)}

/* ヘッダー */
.hero{text-align:center}
.title-badge{position:relative;display:inline-block;isolation:isolate;margin-top:18px;
  padding:13px 24px 11px;background:#fff;border:3px solid var(--line);border-radius:32px;
  box-shadow:0 5px 0 var(--line),0 14px 26px rgba(255,143,184,.25)}
.ear{position:absolute;top:-19px;width:36px;height:32px;z-index:-1;background:var(--line);
  clip-path:polygon(50% 0,0 100%,100% 100%)}
.ear::after{content:"";position:absolute;left:9px;right:9px;top:9px;bottom:0;background:#ffb9d2;
  clip-path:polygon(50% 0,0 100%,100% 100%)}
.ear-l{left:20px;transform:rotate(-14deg)}
.ear-r{right:20px;transform:rotate(14deg)}
.title{margin:0;font-size:clamp(25px,7.6vw,33px);font-weight:700;letter-spacing:.04em;line-height:1.35;
  color:var(--pink-d);text-shadow:2px 2px 0 #ffe2ee}
.subtitle{margin:20px 0 0;display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:clamp(15px,4.4vw,18px);font-weight:700;color:#8a5b94}
.pico{width:18px;height:18px;fill:#ffa9c8;flex:none}
.pico:last-child{transform:rotate(18deg)}
.pico:first-child{transform:rotate(-18deg)}

/* カード */
.card{position:relative;margin-top:34px;background:rgba(255,255,255,.82);border:3px solid var(--line);
  border-radius:32px;box-shadow:0 6px 0 var(--line),0 16px 28px rgba(255,143,184,.18)}
.pill{position:absolute;left:50%;top:-17px;transform:translateX(-50%);margin:0;white-space:nowrap;
  padding:5px 20px;border-radius:999px;background:var(--pink);color:#fff;font-size:15px;font-weight:700;
  letter-spacing:.06em;box-shadow:0 3px 0 #f06fa0}
.pill-lav{background:var(--lav);box-shadow:0 3px 0 #a892f0}
.map-card{padding:24px 8px 8px}
.map{display:block;width:100%;height:auto}

/* 地図の各地方 */
.region{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;transition:transform .2s ease}
.region .shape{fill:var(--c);stroke:#fff;stroke-width:2.5;stroke-linejoin:round;transition:fill .2s ease}
.region.is-active{transform:translateY(-2px)}
.region.is-active .shape{fill:var(--c-hi)}
.region:focus-visible .shape{stroke:var(--pink-d);stroke-width:3.5}
.lbl{font-family:inherit;font-weight:700;fill:var(--plum);paint-order:stroke;stroke:#fff;stroke-width:3px;
  stroke-linejoin:round;pointer-events:none}
[data-region="hokkaido"],.r-hokkaido{--c:#cfe6ff;--c-hi:#b3d5fb}
[data-region="tohoku"],.r-tohoku{--c:#d6f0d0;--c-hi:#bde5b4}
[data-region="kanto"],.r-kanto{--c:#ffd4e3;--c-hi:#ffb9d2}
[data-region="chubu"],.r-chubu{--c:#fff0b5;--c-hi:#ffe58f}
[data-region="kinki"],.r-kinki{--c:#e4d3ff;--c-hi:#d1b9ff}
[data-region="chugoku-shikoku"],.r-chugoku-shikoku{--c:#ffdcc4;--c-hi:#ffc8a3}
[data-region="kyushu-okinawa"],.r-kyushu-okinawa{--c:#c6f0ec;--c-hi:#a6e5df}

/* ねこ */
.cat-bob{animation:bob 3.2s ease-in-out infinite alternate}
.tail{transform-box:fill-box;transform-origin:0% 100%;animation:wag 1.8s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes wag{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}

/* 地方リスト */
.list-card{padding:30px 14px 16px}
.rlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rlist li:last-child{grid-column:1/-1}
.rbtn{display:flex;align-items:center;gap:8px;min-height:58px;padding:9px 10px;border-radius:22px;
  background:#fff;border:3px solid var(--line);box-shadow:0 4px 0 var(--line);color:var(--plum);
  text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap;-webkit-tap-highlight-color:transparent;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.rbtn .dot{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.rbtn .dot svg{width:18px;height:18px;fill:#fff;filter:drop-shadow(0 1px 0 rgba(90,69,96,.18))}
.rbtn .name{line-height:1.25}
.rbtn .arrow{margin-left:auto;font-size:20px;line-height:1;color:#e0a7c1}
.rbtn.is-active,.rbtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--line);border-color:var(--c-hi)}
.rbtn:focus-visible{outline:3px solid var(--pink-d);outline-offset:2px}

/* フッター */
.foot{margin-top:30px;text-align:center;font-size:12.5px;color:#a58aa9}
.foot p{margin:0}
.paws{font-size:15px;letter-spacing:.3em;margin-bottom:4px!important;opacity:.7}

/* タップ時の肉球 */
.paw-pop{position:fixed;z-index:20;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;
  fill:#ff8fb8;animation:pop .6s ease-out forwards}
@keyframes pop{0%{transform:scale(.3) rotate(-20deg);opacity:0}30%{opacity:1}100%{transform:scale(1.5) translateY(-14px) rotate(14deg);opacity:0}}

@media (max-width:359px){
  .title{font-size:6.2vw}
  .title-badge{padding:12px 16px 10px}
  .rlist{gap:10px}
  .rbtn{font-size:14px;gap:6px;padding:8px}
  .rbtn .dot{width:28px;height:28px}
  .rbtn .dot svg{width:16px;height:16px}
  .rbtn .arrow{display:none}
}
@media (min-width:480px){
  .page{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

[hidden]{display:none!important}
/* ================= 地方ページ ================= */
.rp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.back{display:inline-flex;align-items:center;gap:4px;min-height:42px;padding:6px 16px 6px 10px;border-radius:999px;background:#fff;
  border:3px solid var(--line);box-shadow:0 3px 0 var(--line);color:var(--plum);text-decoration:none;font-weight:700;font-size:14px;
  -webkit-tap-highlight-color:transparent}
.back .chev{font-size:22px;line-height:1;color:var(--pink)}
.back:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.back:focus-visible,.btn:focus-visible,.lb:focus-visible{outline:3px solid var(--pink-d);outline-offset:2px}
.brand{font-size:13px;font-weight:700;color:#a37cae;text-decoration:none;white-space:nowrap}
.rp-head{text-align:center;margin-top:12px}
.rp-head .title{font-size:clamp(28px,8.4vw,36px)}
.prefs{margin:16px 6px 0;font-size:13px;line-height:1.7;color:#8a5b94}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.stats li{padding:4px 14px;border-radius:999px;background:#fff;border:2px solid var(--line);font-size:13px;font-weight:700}
.stats b{color:var(--pink-d);font-size:15px;font-variant-numeric:tabular-nums}

.mini{display:block;width:100%;height:auto;border-radius:22px;background:linear-gradient(#e9f6ff,#f6efff)}
.mini .shape{fill:#fff;fill-opacity:.92;stroke:#ffe0ec;stroke-width:1.5px;stroke-linejoin:round}
.mini .shape.cur{fill:var(--c);fill-opacity:1;stroke:#fff;stroke-width:2.5px}
.mini .inset{fill:#fff;fill-opacity:.7;stroke:#ffc9dc;stroke-width:2px;stroke-dasharray:5 4}
.mini .pref-l{fill:none;stroke:#fff;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round;pointer-events:none}
.mini .pref-t{font-family:inherit;font-weight:700;fill:var(--plum);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-opacity:.85;stroke-linejoin:round;pointer-events:none}
.mini .lake{fill:#e3f3ff;stroke:#fff;stroke-width:.3px;stroke-linejoin:round}
.mini .note{font-family:inherit;font-weight:700;fill:var(--plum);text-anchor:middle}
.pin-c{fill:var(--pink-d);stroke:#fff}
.pin-p{fill:#fff}
.pref-hit{fill:#fff;fill-opacity:0;stroke:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pref-hit:hover{fill-opacity:.22}
.pref-hit.is-on{fill:#fff;fill-opacity:.0;stroke:#ff8fb8;stroke-width:3px;vector-effect:non-scaling-stroke}
.mini.zoomed .pref-hit:not(.is-on){fill:#fff;fill-opacity:.0}
.mini{transition:none}
.prefbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 2px 2px;padding:0;list-style:none}
.pchip{appearance:none;font:inherit;font-size:14px;font-weight:700;color:var(--pink-d);background:#fff;border:2.5px solid var(--line);border-radius:999px;padding:6px 12px;min-height:40px;cursor:pointer;box-shadow:0 3px 0 var(--line);display:inline-flex;align-items:center;gap:6px}
.pchip b{font-size:12px;background:#ffe3ee;border-radius:999px;padding:1px 7px;font-variant-numeric:tabular-nums}
.pchip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:0 3px 0 #f06fa0}
.pchip[aria-pressed="true"] b{background:#fff;color:var(--pink-d)}
.pchip:focus-visible{outline:3px solid var(--pink-d);outline-offset:2px}
.pchip.is-empty:not([aria-pressed="true"]){opacity:.65}
.pin{cursor:pointer;outline:none}
.pin-hit{fill:transparent;stroke:none}
.pin-ring{fill:none;stroke:#ffd23f;stroke-width:1.4px;opacity:0;pointer-events:none}
.pin.is-done .pin-c{fill:#4fc3a8}
.pin.is-sel .pin-c{fill:#ffb020}
.pin.is-sel .pin-p{fill:#fff}
.pin.is-sel .pin-body{transform:scale(1.5);transform-box:fill-box;transform-origin:center;animation:pinhop .5s ease-out}
.pin.is-sel .pin-ring{opacity:.9;animation:pinring 1.4s ease-out infinite}
.pin:focus-visible .pin-c{stroke:#5a4560}
@keyframes pinhop{0%{transform:scale(1) translateY(0)}40%{transform:scale(1.6) translateY(-3px)}100%{transform:scale(1.5)}}
@keyframes pinring{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.pin-ring{transform-box:fill-box;transform-origin:center}
.spot{cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}
.spot.is-sel{border-color:#ffb020;box-shadow:0 4px 0 #ffd98a;transform:translateY(-2px)}
.spot:focus-visible{outline:3px solid var(--pink-d);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pin.is-sel .pin-body,.pin.is-sel .pin-ring{animation:none}}

.spots{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.spots-card{padding:30px 14px 18px}
.spot{display:grid;gap:10px;padding:16px;background:#fff;border:3px solid var(--line);border-radius:26px;box-shadow:0 4px 0 var(--line)}
.spot h3{margin:0;font-size:18px;line-height:1.45;overflow-wrap:anywhere}
.tag{justify-self:start;display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 14px 4px 9px;border-radius:999px;background:var(--c);
  font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.tag svg{flex:none;width:15px;height:15px;fill:#fff;filter:drop-shadow(0 1px 0 rgba(90,69,96,.2))}
.addr{margin:0;font-size:13.5px;color:#8a7490;overflow-wrap:anywhere}
.note-t{margin:0;font-size:14.5px;overflow-wrap:anywhere}
.act{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;
  border:3px solid var(--line);background:#fff;color:var(--plum);font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;
  box-shadow:0 3px 0 var(--line);-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.btn-visit{border-color:var(--pink);color:var(--pink-d);box-shadow:0 3px 0 #ffc2d8}
.btn-visit.is-done{background:var(--pink);color:#fff;box-shadow:0 3px 0 #f06fa0}
.phs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.phs button{flex:none;padding:0;border:0;background:none;cursor:zoom-in;border-radius:16px}
.phs img{display:block;height:150px;width:auto;max-width:none;border-radius:16px;border:3px solid var(--line)}
.lb{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:16px;border:0;
  background:rgba(60,40,70,.82);cursor:zoom-out}
.lb img{max-width:100%;max-height:100%;border-radius:18px}

.empty{padding:32px 18px 24px;text-align:center}
.empty svg{width:150px;height:auto;max-width:60%}
.empty p{margin:6px 0 0}
.empty .big{font-size:17px;font-weight:700;color:var(--pink-d)}
.empty .small{font-size:13.5px;color:#8a7490}
.more{padding:30px 14px 16px}
.more .rlist li:last-child{grid-column:auto}
.noscript{margin:18px 0 0;padding:12px 16px;border-radius:18px;background:#fff;border:2px dashed var(--pink);text-align:center;font-size:14px}