.city-index{position:relative;scroll-margin-top:90px;background:#0b0c0d}
.city-index__hint{margin-top:14px;color:var(--gold);font-size:12px;letter-spacing:.18em}
.city-index__map{position:relative;width:min(1440px,100%);margin:auto}
.city-index__labels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 var(--pad)}
.city-index__label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:66px;
  padding:9px 16px;border:1px solid #9b7845;color:#e5c78b;background:rgba(8,10,11,.91);
  box-shadow:inset 0 0 0 4px #0b0c0d,inset 0 0 0 5px #584729;transition:color .2s,background .2s,box-shadow .2s}
.city-index__name{font-family:var(--font-en);font-size:20px;letter-spacing:.075em;white-space:nowrap}
.city-index__name>span{margin-right:8px;font-variant-numeric:tabular-nums}
.city-index__ja{font-size:11px;letter-spacing:.14em}
.city-index__label:hover,.city-index__label:focus-visible,.city-index__label.is-hovered{color:#fff0cb;background:#292015;outline:2px solid #e7c98f;outline-offset:4px;box-shadow:0 0 22px #bd944536}
.city-index.is-ready{height:180vh;padding:0;background:transparent;pointer-events:none}
.city-index.is-ready .city-index__overlay{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:0;visibility:hidden}
.city-index.is-ready .city-index__overlay>.wrap{position:absolute;top:calc(var(--head-h) + 22px);left:clamp(24px,6vw,100px);margin:0;padding:0;max-width:min(600px,calc(100% - 48px));width:auto;z-index:2}
.city-index.is-ready .sect__head{margin:0;opacity:1;transform:none}
.city-index.is-ready .h-section{font-size:clamp(22px,2.4vw,34px)}
.city-index.is-ready .lead{font-size:14px}
.city-index.is-ready .city-index__map{position:absolute;inset:0;width:100%;max-width:none;margin:0}
.city-index__scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.city-index__lines,.city-index__pins{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.city-index__lines line{stroke:#c49a52;stroke-width:1;opacity:.75}
.city-index__lines circle{fill:#e7c98f}
.city-index.is-ready .city-index__labels{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.city-index.is-ready .city-index__label{position:absolute;min-width:160px;transform:translate(-50%,-50%);pointer-events:none}
.city-index.is-map-active .city-index__label{pointer-events:auto}
.city-index__pin{display:none}
.city-index__curtain{position:fixed;inset:0;z-index:1000;pointer-events:none;background:#0b0c0d;opacity:0;display:grid;place-items:center;color:#e7c98f;font-family:var(--font-en);font-size:25px;letter-spacing:.16em}
.city-index.is-entering .city-index__labels,.city-index.is-entering .city-index__lines,.city-index.is-entering .city-index__pins,.city-index.is-entering .city-index__overlay>.wrap{opacity:0;pointer-events:none;transition:opacity .2s}
.city-index.is-entering .city-index__label{pointer-events:none}
.city-index.is-entering .city-index__curtain{pointer-events:auto}
@media(max-width:760px){
  .city-index__labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px}
  .city-index__label{padding:6px;min-height:48px;height:48px;gap:3px}
  .city-index__name{font-size:14px;line-height:1.15;letter-spacing:.025em}
  .city-index__name>span{margin-right:3px}
  .city-index__ja{font-size:10px;line-height:1.15;letter-spacing:.025em}
  .city-index.is-ready .city-index__overlay>.wrap{top:calc(var(--head-h) + 14px);left:20px;right:20px}
  .city-index.is-ready .city-index__overlay .eyebrow{margin-bottom:8px}
  .city-index.is-ready .lead{font-size:12px}
  .city-index.is-ready .city-index__hint{font-size:11px;margin-top:9px}
  .city-index.is-ready .city-index__labels{position:absolute;inset:auto 0 16px;display:grid;padding:0 16px}
  .city-index.is-ready .city-index__label{position:relative;left:auto!important;top:auto!important;transform:none;min-width:0}
  .city-index__lines{display:none}
  .city-index__pin{display:grid;position:absolute;place-items:center;transform:translate(-50%,-50%);width:32px;height:32px;
    border:1px solid #d1ad68;background:#14120de8;color:#f4d391;font-size:11px;pointer-events:none;box-shadow:0 0 12px #b9914130}
  .city-index.is-map-active .city-index__pin{pointer-events:auto}
  .city-index__pin.is-hovered{background:#6a4c20;outline:2px solid #f4d391}
}
@media(prefers-reduced-motion:reduce){.city-index *{transition:none!important}}