/* 想いの物語「弐 これから」: 摂津から全国へ広がる点描の地図（canvas。about-map.js が描く）→ 循環を一周する。
   舞台の共通（.st・.sc）は about-story.css */
.st-vision { height: 780svh; }
.s-vs { background: var(--paper-2); }
.vs0 { flex-direction: row; gap: clamp(40px, 6vw, 110px); text-align: left; padding-left: calc(var(--g) + 70px); }
.vs0-tx { width: min(36vw, 540px); }
.vs0 .chno { justify-content: flex-start; }
.vs0 h2 { font-size: clamp(32px, 4.2vw, 64px); letter-spacing: .12em; line-height: 1.5; margin-top: 14px; }
.vs0 .ab-eb { margin-top: 30px; }
.vs0 .lead2 { margin-top: 22px; font-size: clamp(13px, 1.1vw, 15px); line-height: 2.15; color: var(--ink-2); }

/* 日本の点描の地図 */
.jp { position: relative; width: min(72svh, 44vw); aspect-ratio: 1; flex: none; }
.jp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.jp-pin { position: absolute; left: var(--px); top: var(--py); width: 0; height: 0; }
.jp-pin::before, .jp-pin::after { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--nasu); }
.jp-pin::after { animation: ab-pin 2.4s var(--ease) infinite; }
@keyframes ab-pin { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.jp-pin span { position: absolute; right: 16px; top: -12px; font-family: var(--f-min); font-weight: 600; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .2em; white-space: nowrap; color: var(--nasu); }

/* 循環を一周する */
.vs1 { flex-direction: row; gap: clamp(40px, 6vw, 110px); padding-left: calc(var(--g) + 70px); }
.cy { width: min(70svh, 44vw); aspect-ratio: 1; flex: none; position: relative; }
.cy-svg { width: 100%; height: 100%; overflow: visible; }
.cy-svg .t { fill: none; stroke: var(--rule); stroke-width: 1.2; }
.cy-svg .f { fill: none; stroke: var(--moss); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--k, 0)); transition: filter .8s; }
.cy.closed .cy-svg .f { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--moss) 60%, transparent)); }
.cy-svg .arc { fill: none; }
.cy-svg .al { font-family: var(--f-sans); font-size: 17px; letter-spacing: .16em; fill: var(--moss); opacity: 0; transition: opacity .7s; }
.cy-svg .al.on { opacity: 1; }
.nd circle { fill: var(--paper-2); stroke: var(--moss); stroke-width: 1.4; transition: fill .5s; }
.nd text { font-family: var(--f-min); font-size: 18px; fill: var(--moss); text-anchor: middle; dominant-baseline: central; transition: fill .5s; }
.nd.on circle { fill: var(--moss); }
.nd.on text { fill: var(--surface); }
.cy-dot { fill: var(--nasu); }
.cy-halo { fill: color-mix(in srgb, var(--nasu) 16%, transparent); }
.cy-panel { position: relative; width: min(34vw, 460px); height: min(60svh, 420px); text-align: left; }
.cp { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + var(--dy, 18px))); opacity: 0; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.cp.on { opacity: 1; --dy: 0px; }
.cp .n { font-family: var(--f-min); font-size: 14px; letter-spacing: .24em; color: var(--moss); }
.cp h3 { font-size: clamp(26px, 2.6vw, 40px); letter-spacing: .12em; line-height: 1.5; margin-top: 8px; }
.cp p { margin-top: 16px; font-size: 15px; line-height: 2.1; color: var(--ink-2); }
.cp .two { display: grid; gap: 10px; margin-top: 16px; }
.cp .c { padding: 20px 22px; background: var(--paper); border: 1px solid var(--rule); font-size: 14px; line-height: 2; }
.cp .c.ec { background: var(--nasu); color: var(--surface); border-color: var(--nasu); }
.cp .c .bg { display: inline-block; font-size: 10px; letter-spacing: .2em; padding: 0 10px; border: 1px solid currentColor; margin-bottom: 6px; opacity: .85; }
.cp.ret p { font-family: var(--f-min); font-size: clamp(20px, 2vw, 30px); line-height: 1.8; color: var(--ink); margin-top: 10px; }
.cp.ret strong { color: var(--moss); }

@media (max-width: 899px) {
  .vs0 { flex-direction: column; justify-content: flex-start; gap: 22px; text-align: center; padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 4svh) var(--gr) 20px var(--g); }
  .vs0-tx { width: auto; }
  .vs0 .chno { justify-content: center; }
  .vs0 .ab-eb { margin-top: 18px; }
  .vs0 h2 { font-size: 28px; }
  .jp { width: min(84vw, 40svh); }
  .vs1 { flex-direction: column; justify-content: flex-start; gap: 14px; padding: calc(var(--hd) + env(safe-area-inset-top, 0px) + 18px) var(--gr) 20px var(--g); }
  .cy { width: min(80vw, 42svh); }
  .cy-svg .al { font-size: 30px; }
  .nd text { font-size: 26px; }
  .cy-panel { width: 100%; height: auto; flex: 1; min-height: 0; }
  .cp { top: 0; transform: translateY(var(--dy, 18px)); }
  .cp h3 { font-size: 22px; }
  .cp p { font-size: 14px; margin-top: 8px; }
  .cp .c { padding: 12px 16px; font-size: 13px; }
  .cp.ret p { font-size: 19px; }
}