/* A connected school atlas, using the approved Rakuraku palette. */
.home-page .school-map-variant {
  --atlas-surface:#f0f5f7; --atlas-line:#aabac5; --atlas-muted:#52667a;
  background:#fff;
}
.home-page .school-map-variant .section-header { align-items:center; margin-bottom:36px; }
.home-page .school-map-variant .section-header .lead { max-width:620px; font-size:15px; }
.home-page .atlas-shell { display:grid; grid-template-columns:46% 54%; overflow:hidden; border:1px solid #e0e8ec; border-radius:16px; background:var(--atlas-surface); }
.home-page .atlas-navigation { position:relative; display:flex; flex-direction:column; min-width:0; padding:26px 22px 14px; }
.home-page .atlas-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 8px; color:var(--atlas-muted); font-size:11px; }
.home-page .atlas-topline span { color:var(--ink); font-size:12px; letter-spacing:.12em; font-weight:700; }
.home-page .atlas-canvas { position:relative; width:100%; aspect-ratio:560/640; }
.home-page .atlas-map-art { position:absolute; inset:0; pointer-events:none; }
.home-page .atlas-map-art>img { position:absolute; left:7%; top:2%; width:90%; max-width:none; height:auto; opacity:.87; }
.home-page .atlas-dot { position:absolute; width:7px; height:7px; border:1px solid #fff; border-radius:50%; background:#61778a; transform:translate(-50%,-50%); box-shadow:0 0 0 3px rgba(255,255,255,.8); transition:background .18s ease,box-shadow .18s ease; }
.home-page .atlas-dot.is-active { background:var(--red); box-shadow:0 0 0 5px rgba(215,25,32,.12),0 0 0 1px #fff; }
.home-page .atlas-dot-ibaraki { left:68.2%; top:54.2%; }
.home-page .atlas-dot-shizuoka { left:55.6%; top:62%; }
.home-page .atlas-dot-oita { left:25.9%; top:68.1%; }
.home-page .atlas-map-label { display:none; }
.home-page .atlas-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.home-page .atlas-leaders path { fill:none; stroke:var(--atlas-line); stroke-width:1; vector-effect:non-scaling-stroke; stroke-linejoin:round; transition:stroke .18s ease; }
.home-page .atlas-leaders path.is-active { stroke:var(--red); stroke-width:1.25; }
.home-page .atlas-region { position:absolute; z-index:2; }
.home-page .atlas-region-ibaraki { left:2%; top:18%; width:42%; }
.home-page .atlas-region-shizuoka { left:53%; top:74%; width:45%; }
.home-page .atlas-region-oita { left:2%; top:79%; width:38%; }
.home-page .atlas-region h3 { display:flex; align-items:center; gap:7px; margin:0 0 7px; color:var(--atlas-muted); font-family:var(--font); font-size:11px; line-height:1.5; letter-spacing:.11em; font-weight:600; text-transform:uppercase; }
.home-page .atlas-region h3:before { content:''; display:block; width:17px; height:1px; background:var(--atlas-line); }
.home-page .atlas-region.is-active h3 { color:var(--red-dark); }
.home-page .atlas-region.is-active h3:before { background:var(--red); }
.home-page .atlas-school-choice { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-height:48px; padding:9px 8px; margin:0 0 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--ink); font-family:var(--font); font-size:13px; font-weight:500; line-height:1.45; text-align:left; cursor:pointer; touch-action:manipulation; transition:color .18s ease,background .18s ease; }
.home-page .atlas-school-choice .atlas-choice-arrow { flex-shrink:0; opacity:0; color:var(--red); font-size:17px; }
.home-page .atlas-school-choice:hover { background:rgba(255,255,255,.65); }
.home-page .atlas-school-choice.is-active { background:#fff; color:var(--red-dark); font-weight:600; box-shadow:0 2px 7px rgba(11,33,75,.04); }
.home-page .atlas-school-choice.is-active .atlas-choice-arrow { opacity:1; }
.home-page .atlas-school-choice:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.home-page .atlas-school-choice:active { background:#e7eef2; }
.home-page .atlas-map-note { margin:auto 8px 0; padding-top:14px; color:var(--atlas-muted); font-size:11px; line-height:1.6; }
.home-page .atlas-back { display:none; }
.home-page .atlas-detail { display:flex; flex-direction:column; min-width:0; background:#fff; border-left:1px solid #e0e8ec; scroll-margin-top:20px; }
.home-page .atlas-panel { flex:1; min-height:0; }
.home-page .atlas-panel[hidden] { display:none; }
.home-page .atlas-photo { position:relative; aspect-ratio:1.65; margin:0; overflow:hidden; background:#e4ecf0; }
.home-page .atlas-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.home-page .atlas-panel[data-panel='oisca-hamamatsu'] .atlas-photo img { width:181%; max-width:none; object-position:left 27%; }
.home-page .atlas-panel[data-panel='meikei-gakuen'] .atlas-photo img { object-position:center 40%; }
.home-page .atlas-panel[data-panel='mito-kiryo'] .atlas-photo img { object-fit:contain; }
.home-page .atlas-panel[data-panel='yanagigaura'] .atlas-photo img { object-position:center 40%; }
.home-page .atlas-copy { padding:30px 38px 34px; }
.home-page .atlas-location { display:flex; align-items:center; gap:9px; margin:0 0 13px; color:var(--red-dark); font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
.home-page .atlas-location:before { content:''; width:6px; height:6px; border-radius:50%; background:var(--red); }
.home-page .atlas-copy h3 { max-width:560px; margin:0 0 16px; color:var(--ink); font-family:'Noto Serif',Georgia,serif; font-size:clamp(25px,2.15vw,30px); font-weight:600; line-height:1.35; }
.home-page .atlas-description { min-height:52px; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.home-page .atlas-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 25px; margin-top:26px; padding-top:24px; border-top:1px solid #e8edf0; }
.home-page .atlas-actions .button { min-height:46px; padding:12px 18px; font-size:12px; white-space:nowrap; }
.home-page .atlas-official { display:inline-flex; align-items:center; gap:7px; min-height:46px; color:var(--ink); font-size:12px; font-weight:600; white-space:nowrap; text-decoration:none; }
.home-page .atlas-official:hover { text-decoration:underline; text-underline-offset:5px; }
.home-page .atlas-panel.is-entering { animation:atlas-reveal .18s ease-out both; }
@keyframes atlas-reveal { from { opacity:.4; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:1400px) { .home-page .atlas-navigation { padding-inline:26px; } .home-page .atlas-school-choice { font-size:14px; } }
@media (min-width:821px) and (max-width:1080px) {
  .home-page .atlas-navigation { padding:24px 12px 18px; }
  .home-page .atlas-school-choice { font-size:11px; min-height:44px; padding:8px 4px; }
  .home-page .atlas-region-ibaraki { top:14%; }
  .home-page .atlas-region-shizuoka { top:72%; }
  .home-page .atlas-region-oita { top:77%; }
  .home-page .atlas-copy { padding:26px 28px; }
  .home-page .atlas-copy h3 { font-size:25px; }
  .home-page .atlas-description { font-size:13px; }
  .home-page .atlas-actions { gap:4px; flex-direction:column; align-items:flex-start; }
  .home-page .atlas-map-note { padding-top:45px; }
}
@media (max-width:820px) {
  .home-page .atlas-shell { grid-template-columns:1fr; border-radius:12px; }
  .home-page .atlas-navigation { padding:22px 20px; }
  .home-page .atlas-topline { margin:0; }
  .home-page .atlas-canvas { display:grid; grid-template-columns:1fr; aspect-ratio:auto; padding-top:8px; }
  .home-page .atlas-map-art { position:relative; inset:auto; width:260px; max-width:100%; aspect-ratio:560/640; margin:0 auto 10px; }
  .home-page .atlas-map-label { display:block; position:absolute; color:var(--atlas-muted); font-size:10px; font-weight:600; line-height:1; }
  .home-page .atlas-map-label-ibaraki { left:73%; top:53%; }
  .home-page .atlas-map-label-shizuoka { left:59%; top:65%; }
  .home-page .atlas-map-label-oita { left:8%; top:72%; }
  .home-page .atlas-leaders { display:none; }
  .home-page .atlas-region { position:static; width:100%; display:grid; grid-template-columns:78px minmax(0,1fr); column-gap:10px; padding-top:12px; border-top:1px solid #dce5e9; }
  .home-page .atlas-region h3 { grid-column:1; grid-row:1 / span 2; align-self:start; padding-top:13px; margin:0; font-size:10px; letter-spacing:.05em; }
  .home-page .atlas-region h3:before { display:none; }
  .home-page .atlas-school-choice { grid-column:2; font-size:14px; padding:10px 12px; margin-bottom:8px; }
  .home-page .atlas-map-note { margin:0; padding-top:10px; font-size:10px; }
  .home-page .atlas-back { display:flex; align-items:center; width:100%; min-height:48px; padding:12px 22px; border:0; border-bottom:1px solid #e0e8ec; background:#fff; color:var(--ink); font-size:12px; font-weight:600; text-align:left; cursor:pointer; }
  .home-page .atlas-back:hover { color:var(--red-dark); }
  .home-page .atlas-detail { border-left:0; border-top:1px solid #e0e8ec; }
  .home-page .atlas-photo { aspect-ratio:1.5; }
  .home-page .atlas-copy { padding:28px; }
}
@media (max-width:540px) {
  .home-page .school-map-variant .section-header .lead { font-size:14px; }
  .home-page .atlas-navigation { padding:20px 16px; }
  .home-page .atlas-map-art { width:235px; margin-bottom:4px; }
  .home-page .atlas-topline { font-size:10px; }
  .home-page .atlas-topline span { font-size:11px; }
  .home-page .atlas-region { grid-template-columns:66px minmax(0,1fr); column-gap:6px; }
  .home-page .atlas-school-choice { font-size:13px; }
  .home-page .atlas-copy { padding:25px 22px 28px; }
  .home-page .atlas-copy h3 { font-size:25px; }
  .home-page .atlas-description { min-height:0; font-size:14px; }
  .home-page .atlas-actions { flex-direction:column; align-items:stretch; gap:8px; margin-top:22px; padding-top:20px; }
  .home-page .atlas-actions .button,.home-page .atlas-official { width:100%; justify-content:center; min-height:48px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-page .atlas-school-choice,.home-page .atlas-dot,.home-page .atlas-leaders path { transition:none; }
  .home-page .atlas-panel.is-entering { animation:none; }
}

.home-page .school-map-variant .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
