*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ice:#e8f4fc;--deep:#1a4d6e;--sky:#4a9fd4;--snow:#fff;
  --font-round:'Kosugi Maru',sans-serif;--font-sans:'Noto Sans JP',sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--ice);color:#1e3a4f;line-height:1.65}
img{max-width:100%;display:block;object-fit:cover}
a{color:var(--sky)}

.map-header{
  background:linear-gradient(135deg,var(--deep) 0%,#2d6a8f 100%);
  color:var(--snow);padding:1.25rem 2rem 1rem;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.logo-block{display:flex;align-items:center;gap:.75rem}
.snowflake{font-size:2rem;animation:spin 8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.logo-block h1{font-family:var(--font-round);font-size:1.3rem;line-height:1.2;font-weight:400}
.logo-block strong{font-size:1.5rem;font-weight:700}
.map-nav{display:flex;gap:1.5rem}
.map-nav a{color:rgba(255,255,255,.9);text-decoration:none;font-size:.9rem}
.map-nav a:hover{color:#fff}
.burger{display:none;background:rgba(255,255,255,.15);border:none;color:#fff;padding:.4rem .7rem;border-radius:4px;cursor:pointer;font-size:1.2rem}
.tagline{font-size:.85rem;opacity:.85;margin-top:.75rem;padding-left:3rem}

.polar-hero{
  display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;padding:2.5rem 2rem;max-width:1200px;margin:0 auto;align-items:center;
}
.hero-map-visual{position:relative;border-radius:12px;overflow:hidden;min-height:320px}
.hero-photo{width:100%;height:100%;min-height:320px;filter:saturate(1.1)}
.map-outline{
  position:absolute;inset:10%;border:2px dashed rgba(255,255,255,.5);
  border-radius:40% 60% 50% 45% / 55% 45% 55% 45%;pointer-events:none;
}
.region-pin{
  position:absolute;background:var(--snow);color:var(--deep);padding:.25rem .6rem;
  border-radius:4px;font-size:.75rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .2s;
}
.region-pin:hover{transform:scale(1.08)}
.pin-sapporo{top:35%;left:45%}
.pin-otaru{top:28%;left:38%}
.pin-kushiro{bottom:25%;right:20%}
.hero-cta h2{font-family:var(--font-round);font-size:clamp(1.6rem,4vw,2.2rem);margin-bottom:1rem;line-height:1.35}
.btn-ice{
  display:inline-block;margin-top:1rem;background:var(--sky);color:#fff;
  padding:.85rem 2rem;border-radius:6px;text-decoration:none;font-weight:600;
  transition:background .2s,transform .2s;
}
.btn-ice:hover{background:var(--deep);transform:translateY(-2px)}

.region-strip{padding:2rem;max-width:1100px;margin:0 auto}
.region-strip h2{text-align:center;margin-bottom:1.5rem;color:var(--deep);font-family:var(--font-round)}
.region-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.region-cards article{
  background:var(--snow);border-radius:10px;overflow:hidden;
  box-shadow:0 6px 20px rgba(26,77,110,.1);transition:transform .2s;
}
.region-cards article:hover{transform:translateY(-4px)}
.region-cards img{width:100%;aspect-ratio:16/10}
.region-cards h3{padding:.75rem 1rem 0;font-size:1rem;color:var(--deep)}
.region-cards p{padding:0 1rem 1rem;font-size:.85rem;opacity:.8}

.hex-shop{padding:3rem 1.5rem;max-width:1100px;margin:0 auto}
.hex-shop h2{text-align:center;margin-bottom:2rem;color:var(--deep);font-family:var(--font-round)}
.hex-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:900px;margin:0 auto;
}
.hex-item{
  width:160px;height:185px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  background:var(--deep);padding:3px;transition:transform .25s;
}
.hex-item:hover{transform:scale(1.05);z-index:2}
.hex-inner{
  width:100%;height:100%;clip-path:inherit;background:var(--snow);
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
}
.hex-inner img{width:100%;height:70px;object-fit:cover}
.hex-inner h4{font-size:.7rem;padding:.35rem .5rem 0;color:var(--deep);line-height:1.2}
.hex-inner span{font-weight:700;color:var(--sky);font-size:.85rem}
.hex-btn{
  margin:.4rem;background:var(--ice);border:1px solid var(--sky);color:var(--deep);
  padding:.25rem .6rem;font-size:.7rem;border-radius:4px;cursor:pointer;margin-top:auto;margin-bottom:.5rem;
}
.hex-btn:hover{background:var(--sky);color:#fff}

.season-timeline{padding:2rem;max-width:900px;margin:0 auto}
.season-timeline h2{text-align:center;margin-bottom:1.5rem;color:var(--deep)}
.timeline-track{
  display:flex;justify-content:space-between;position:relative;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;
}
.timeline-track::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:var(--sky);opacity:.3;z-index:0;
}
.tl-item{
  position:relative;z-index:1;background:var(--snow);padding:.75rem 1rem;border-radius:8px;
  text-align:center;box-shadow:0 2px 10px rgba(26,77,110,.1);flex:1;min-width:100px;
}
.tl-item time{display:block;font-weight:700;color:var(--sky);font-size:1.1rem}
.tl-item p{font-size:.8rem;margin-top:.25rem}
.tl-item.active{background:var(--deep);color:#fff}
.tl-item.active time{color:#a8d8f0}
.tl-banner{width:100%;border-radius:12px;max-height:280px;object-fit:cover}

.footer-ice{
  background:var(--deep);color:var(--snow);padding:2.5rem 2rem;margin-top:2rem;
}
.footer-cols{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;max-width:1000px;margin:0 auto;font-size:.88rem}
.footer-ice h3,.footer-ice h4{color:#a8d8f0;margin-bottom:.75rem}
.footer-ice a{color:#a8d8f0}
.copy{text-align:center;margin-top:2rem;opacity:.6;font-size:.8rem}

.region-tooltip{
  position:fixed;padding:.5rem 1rem;background:var(--deep);color:#fff;
  border-radius:4px;font-size:.85rem;pointer-events:none;opacity:0;transition:opacity .2s;z-index:50;
}
.region-tooltip.show{opacity:1}

.order-bar{
  position:fixed;bottom:0;left:0;right:0;background:var(--snow);
  border-top:2px solid var(--sky);padding:.75rem;text-align:center;font-weight:600;
  color:var(--deep);transform:translateY(100%);transition:transform .3s;z-index:40;
}
.order-bar.visible{transform:translateY(0)}

@media(max-width:800px){
  .map-nav{display:none;position:absolute;top:100%;right:1rem;background:var(--deep);
    flex-direction:column;padding:1rem;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
  .map-nav.open{display:flex}
  .burger{display:block}
  .map-header{position:relative}
  .tagline{padding-left:0}
  .polar-hero{grid-template-columns:1fr}
  .region-cards{grid-template-columns:1fr}
  .hex-item{width:140px;height:162px}
  .footer-cols{grid-template-columns:1fr}
  .timeline-track::before{display:none}
}