/* The photograph-free illustrated band and its colour belong to the selected municipality. */
#main .sr-city[data-municipality="sapporo"] {--city-tint:#dcebe5;--city-ink:#18483d;--city-accent:#337c65}
#main .sr-city[data-municipality="mito"] {--city-tint:#f3e8e4;--city-ink:#623649;--city-accent:#9d556b}
#main .sr-city[data-municipality="aomori"] {--city-tint:#dfeaf1;--city-ink:#274860;--city-accent:#33748c}
html[data-nlive-tone="night"] #main .sr-city[data-municipality] {--city-tint:#1d3540;--city-ink:#e0f0eb;--city-accent:#a8d5d0}
#main .sr-city .sr-hero {
  border-top:4px solid var(--city-accent);border-color:color-mix(in srgb,var(--city-accent) 55%,var(--city-art-accent));background:var(--city-tint);
  background-image:repeating-linear-gradient(0deg,transparent 0 25px,color-mix(in srgb,var(--city-accent) 8%,transparent) 25px 26px);
}
#main .sr-city .sr-city-name {color:var(--city-ink);font-size:.83em;line-height:1.24}
#main .sr-city .sr-lead h1 {font-size:clamp(1.68rem,5.7cqw,2.88rem)}
#main .sr-city .sr-banner {background:var(--city-tint);position:relative;isolation:isolate}
#main .sr-city .sr-banner img {display:block;width:100%;height:auto;aspect-ratio:24/13;object-fit:cover;object-position:var(--city-art-focus,50% 50%)}
#main .sr-city .sr-banner figcaption {
  position:absolute;inset:auto auto .5rem .55rem;margin:0;padding:.18rem .53rem;color:#fff;
  font-size:.76rem;line-height:1.55;letter-spacing:.02em;background:#162d33e6;border-radius:2px;
}
@container nliveCity (min-width:650px){
  #main .sr-city .sr-hero {grid-template-columns:minmax(0,54%) minmax(0,46%)}
  #main .sr-city .sr-banner {min-height:0;aspect-ratio:24/13;width:100%;align-self:stretch}
  #main .sr-city .sr-banner img {width:100%;height:100%;position:absolute;inset:0}
  #main .sr-city .sr-lead {padding:1.05rem clamp(12px,2.8cqw,36px)}
  #main .sr-city .sr-lead h1 {font-size:clamp(1.65rem,3.25cqw,2.85rem)}
  #main .sr-city .sr-banner figcaption {inset:auto auto .65rem .72rem}
}
html[data-nlive-tone="night"] #main .sr-city[data-municipality="sapporo"] {--city-tint:#203d36;--city-ink:#daf3e6;--city-accent:#a0cdb6}
html[data-nlive-tone="night"] #main .sr-city[data-municipality="mito"] {--city-tint:#3c3038;--city-ink:#ffe5ed;--city-accent:#daacbe}
html[data-nlive-tone="night"] #main .sr-city[data-municipality="aomori"] {--city-tint:#243d4c;--city-ink:#e5f2ff;--city-accent:#a0d1e1}

#main .sr-city {
  --ng-teal:#176c69; --ng-bright:#388783; --ng-amber:#da9f51;
  --ng-rule:#c2d4cf; --ng-face:#f2f7f3; --ng-warm:#f7efdc; --ng-number:#164a4f;
}
html[data-nlive-tone="night"] #main .sr-city {
  --ng-teal:#68bcb1; --ng-bright:#87cbbd; --ng-amber:#dfa95f;
  --ng-rule:#47666a; --ng-face:#1c383e; --ng-warm:#393b36; --ng-number:#b0e4d9;
}
#main .sr-city .ng-graph-board {
  display:grid; gap:0; overflow:hidden; margin:1rem 0 .55rem;
  border:1px solid var(--ng-rule); border-radius:8px; background:var(--ng-face);
}
#main .sr-city .ng-graph-board[hidden] { display:none; }
#main .sr-city .ng-graph-board figure { display:flex; flex-direction:column; gap:.8rem; padding:clamp(.85rem,2cqw,1.45rem); min-width:0; }
#main .sr-city .ng-graph-board figcaption { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; margin:0; color:var(--sr-ink); }
#main .sr-city .ng-graph-board figcaption h3,
#main .sr-city :is(.ng-pay-list,.ng-route) h3 { margin:0; font-size:1.03rem; line-height:1.55; color:var(--sr-ink); }
#main .sr-city .ng-graph-board figcaption>span { color:var(--sr-muted); font-size:.77rem; white-space:nowrap; }
#main .sr-city .ng-plot { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.36rem; align-items:stretch; }
#main .sr-city .ng-axis { display:flex; flex-direction:column; justify-content:space-between; margin:1.26rem 0 1.56rem; font:inherit; color:var(--sr-muted); font-size:.71rem; line-height:1; text-align:right; font-variant-numeric:tabular-nums; }
#main .sr-city .ng-columns { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin:0; padding:0; background:linear-gradient(var(--ng-rule),var(--ng-rule)) left 0 top 1.55rem / 100% 1px no-repeat,linear-gradient(var(--ng-rule),var(--ng-rule)) left 0 top calc(50% - .04rem) / 100% 1px no-repeat,linear-gradient(var(--ng-rule),var(--ng-rule)) left 0 bottom 1.55rem / 100% 1px no-repeat; }
#main .sr-city .ng-columns li { display:grid; grid-template-rows:1.55rem 5.5rem 1.55rem; align-items:center; justify-items:center; gap:0; }
#main .sr-city .ng-columns li b { font-variant-numeric:tabular-nums; font-size:clamp(.64rem,2cqw,.85rem); color:var(--ng-number); }
#main .sr-city .ng-columns li em { color:var(--sr-ink); font-size:.81rem; font-style:normal; }
#main .sr-city .ng-rail { height:100%; display:flex; align-items:flex-end; justify-content:center; width:100%; }
#main .sr-city .ng-rail i { width:min(53%,1.56rem); display:block; background:var(--ng-teal); border-radius:3px 3px 0 0; }
#main .sr-city .ng-breakdown { border-top:1px solid var(--ng-rule); }
#main .sr-city .ng-ring-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-evenly; gap:.65rem 1rem; margin:auto 0; }
#main .sr-city .ng-ring { display:grid; position:relative; place-items:center; width:clamp(90px,26cqw,123px); aspect-ratio:1; flex:0 0 auto; border-radius:50%; background:conic-gradient(from -90deg,var(--ng-teal) var(--ng-share),var(--ng-amber) var(--ng-share)); }
#main .sr-city .ng-ring.ng-empty { background:var(--ng-rule); }
#main .sr-city .ng-ring>span { display:grid; align-content:center; text-align:center; width:68%; aspect-ratio:1; border-radius:50%; background:var(--ng-face); line-height:1.4; }
#main .sr-city .ng-ring small { font-size:.67rem; color:var(--sr-muted); }
#main .sr-city .ng-ring b { font-size:1.12rem; color:var(--ng-number); }
#main .sr-city .ng-key { min-width:9.3rem; }
#main .sr-city .ng-key>div { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.06rem .55rem; padding:.23rem 0; }
#main .sr-city .ng-key dt {display:flex;align-items:center;gap:.4rem;font-size:.78rem;line-height:1.5;color:var(--sr-muted);font-weight:400;}
#main .sr-city .ng-key dd {font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:700;line-height:1.5;}
#main .sr-city .ng-key :is(.ng-stream-key,.ng-prep-key) dt::before { content:'';display:block;width:.6rem;height:.6rem;border-radius:2px;background:var(--ng-teal); }
#main .sr-city .ng-key .ng-prep-key dt::before { background:var(--ng-amber); }
#main .sr-city .ng-key .ng-total-key { border-top:1px solid var(--ng-rule);margin-top:.25rem; }
#main .sr-city .ng-planner-note { margin:.4rem 0 .75rem;font-size:.85rem; }
#main .sr-city .ng-editor { border:1px solid var(--ng-rule); border-radius:5px; padding:0; box-shadow:none; background:var(--sr-paper); }
#main .sr-city .ng-editor summary { min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.55rem .8rem;color:var(--sr-link);font-size:.92rem;cursor:pointer; }
#main .sr-city .ng-editor summary::-webkit-details-marker {display:none}
#main .sr-city .ng-editor summary::after {content:'＋';flex:none}
#main .sr-city .ng-editor[open] summary::after {content:'−'}
#main .sr-city .ng-fields {padding:0 .8rem .85rem}
#main .sr-city .ng-fields fieldset { border:0; margin:0; min-width:0; padding:0; }
#main .sr-city .ng-fields legend,#main .sr-city .ng-prep-field { color:var(--sr-ink);font-size:.88rem;font-weight:700;margin:.25rem 0 .4rem; }
#main .sr-city .ng-days {display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:.4rem .5rem;}
#main .sr-city .ng-days label { color:var(--sr-muted);font-size:.81rem; }
#main .sr-city .ng-days label span,#main .sr-city .ng-prep-field span {display:flex;align-items:center;gap:.18rem;}
#main .sr-city .ng-fields input {width:4.2rem;max-width:100%;min-height:44px;padding:.24rem .26rem;border:1px solid var(--sr-muted);border-radius:3px;color:var(--sr-ink);background:var(--sr-paper);font-family:inherit;font-size:1rem;text-align:center;}
#main .sr-city .ng-prep-field {display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .65rem;margin:.75rem 0 .3rem;}
#main .sr-city .ng-fields p {margin:.4rem 0 0;font-size:.78rem;color:var(--sr-muted);}
#main .sr-city .ng-pay-list {display:grid;border-block:1px solid var(--ng-rule);padding:0;margin:.8rem 0;}
#main .sr-city .ng-pay-list li {display:flex;align-items:baseline;gap:.65rem;padding:.75rem .55rem;}
#main .sr-city .ng-pay-list li+li {border-top:1px solid var(--ng-rule);}
#main .sr-city .ng-step {display:inline-grid;place-items:center;flex:none;width:1.55rem;aspect-ratio:1;border:1px solid var(--ng-rule);border-radius:50%;color:var(--ng-number);font:700 .85rem/1 'NLive JP',sans-serif;background:var(--ng-face);}
#main .sr-city :is(.ng-pay-list,.ng-route) p {margin:.28rem 0 0;color:var(--sr-muted);font-size:.91rem;line-height:1.7;}
#main .sr-city a.ng-text-link {display:inline-flex;align-items:center;gap:.4rem;min-height:44px;color:var(--sr-link);font-size:.9rem;font-weight:700;}
#main .sr-city a.ng-text-link::after {content:'→';text-decoration:none;}
#main .sr-city .ng-route {display:grid;gap:0;margin:.8rem 0 .25rem;padding:0;}
#main .sr-city .ng-route li {display:flex;position:relative;align-items:flex-start;gap:.7rem;padding:0 0 .9rem;isolation:isolate;}
#main .sr-city .ng-route li:not(:last-child)::before {position:absolute;content:'';top:.8rem;left:.91rem;bottom:0;width:2px;background:var(--ng-rule);z-index:-1;}
#main .sr-city .ng-route li>span {flex:none;display:grid;width:1.95rem;aspect-ratio:1;place-items:center;border-radius:50%;background:var(--ng-warm);border:1px solid var(--sr-gold);color:var(--sr-ink);font-size:.91rem;font-weight:700;}
@container nliveCity (min-width:680px) {
  #main .sr-city .ng-graph-board {grid-template-columns:minmax(0,1fr) minmax(0,.96fr)}
  #main .sr-city .ng-breakdown {border-top:0;border-left:1px solid var(--ng-rule)}
  #main .sr-city .ng-pay-list {grid-template-columns:repeat(3,minmax(0,1fr));}
  #main .sr-city .ng-pay-list li {display:block;padding:.9rem 1rem;}
  #main .sr-city .ng-pay-list li+li {border-top:0;border-left:1px solid var(--ng-rule);}
  #main .sr-city .ng-pay-list .ng-step {margin-bottom:.45rem;}
  #main .sr-city .ng-route {grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;}
  #main .sr-city .ng-route li {display:block;}
  #main .sr-city .ng-route li>span {margin-bottom:.5rem;}
  #main .sr-city .ng-route li:not(:last-child)::before {top:.91rem;left:1.8rem;right:-1.25rem;bottom:auto;width:auto;height:2px;}
}

#main .sr-city .ae-s-grid-layout {display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
#main .sr-city .ae-s-figure {padding:1rem;border:1px solid var(--sr-line);background:var(--sr-paper)}
#main .sr-city .ae-s-figure figcaption {margin:0 0 1rem}
#main .sr-city .ae-s-figure h3 {font-size:1.15rem;color:var(--sr-ink);line-height:1.45}
#main .sr-city .ae-s-figure p {margin:.25rem 0;font-size:.85rem;color:var(--sr-muted)}
#main .sr-city .ae-s-bars {display:grid;gap:.65rem}
#main .sr-city .ae-s-bars>div {display:grid;grid-template-columns:1fr auto;gap:.12rem .7rem;align-items:baseline}
#main .sr-city .ae-s-bars dt,#main .sr-city .ae-s-bars dd {font-size:.87rem;line-height:1.5}
#main .sr-city .ae-s-bars dd {display:contents}
#main .sr-city .ae-s-track {grid-column:1/-1;display:block;height:.52rem;background:var(--sr-wash)}
#main .sr-city .ae-s-track i {display:block;height:100%;background:var(--sr-deep)}
#main .sr-city .ae-s-activity {grid-column:1/-1}
#main .sr-city .ae-s-source {border-top:1px solid var(--sr-line);margin:1rem 0 0;padding-top:.65rem;font-size:.76rem}
#main .sr-city .ae-s-hours {position:relative;padding-left:2.6rem}
#main .sr-city .ae-s-axis {position:absolute;top:0;left:0;font-size:.77rem}
#main .sr-city .ae-s-hours::after {content:"0%";position:absolute;left:0;bottom:1.7rem;font-size:.77rem}
#main .sr-city .ae-s-hours svg {width:100%;height:8rem;display:block}
#main .sr-city .ae-s-grid {stroke:var(--sr-line);fill:none;vector-effect:non-scaling-stroke}
#main .sr-city .ae-s-line {stroke:var(--sr-deep);stroke-width:3;fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#main .sr-city .ae-s-axis-hours {display:flex;justify-content:space-between;font-size:.75rem}
#main .sr-city .ae-s-figure summary {display:flex;align-items:center;min-height:44px;color:var(--sr-link);text-decoration:underline}
#main .sr-city .ae-s-figure table {border-collapse:collapse;width:100%;max-width:32rem;font-variant-numeric:tabular-nums}
#main .sr-city .ae-s-figure :is(td,th) {text-align:end;padding:.35rem .5rem;border-bottom:1px solid var(--sr-line)}
#main .sr-city .ae-s-figure :is(caption,th:first-child) {text-align:start}