/* Shared Mihara contents component: source web/src/assets/css/site.css. */
.toc{--sky:#63c5e8;--citrus:#ffe156;--gutter:48px;--toc-item:304px;--toc-gap:32px;--font-en:"Barlow Condensed","Arial Narrow",sans-serif}
@media(max-width:899px){.toc{--gutter:24px;--toc-item:256px}}
.toc { background: var(--sky); }
.toc-inner { padding: 24px var(--gutter) 32px; }
.toc-eyebrow { margin: 0; font-size: 14px; font-weight: 700; line-height: 21px; }
.toc-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; }
.toc-heading { margin: 0; font-size: 36px; font-weight: 900; line-height: 46.8px; }
.toc-top-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 21px; text-decoration: underline; text-underline-offset: 4px; }
.toc-top-link:hover { text-decoration-thickness: 2px; }
.toc-viewport { margin-top: 29px; height: 200px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; }
.toc-viewport::-webkit-scrollbar { display: none; }
.toc-track { position: relative; width: calc(11 * var(--toc-item) + 10 * var(--toc-gap)); height: 190px; }
.toc-route { position: absolute; left: 22px; top: 108px; width: calc(100% - 34px); height: 49px; pointer-events: none; }
.toc-route img { width: 100%; height: 100%; }
.toc-bike { position: absolute; left: 240px; top: 76px; width: 84px; height: 78px; pointer-events: none; }
.toc-list { position: relative; display: flex; gap: var(--toc-gap); margin: 0; padding: 0; list-style: none; }
.toc-item { position: relative; flex: 0 0 var(--toc-item); height: 160px; scroll-snap-align: start; }
.toc-link { display: flex; align-items: center; gap: 16px; width: calc(var(--toc-item) - 32px); height: 78px; margin: 16px 0 0 16px; text-decoration: none; color: var(--ink); }
.toc-no { flex: 0 0 55px; font-family: var(--font-en); font-weight: 700; font-size: 52px; line-height: 58px; }
.toc-title { position: relative; flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 24px; word-break: keep-all; overflow-wrap: anywhere; }
.toc-status { position: absolute; left: 0; top: calc(100% + 4px); padding: 0 6px; border: 1px solid var(--ink); font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; }
a.toc-link:hover .toc-title, a.toc-link:focus-visible .toc-title { text-decoration: underline; text-underline-offset: 4px; }
.toc-dot { position: absolute; left: 16px; top: 102px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--citrus); background: transparent; }
.toc-item.is-published .toc-dot { background: var(--citrus); }
.toc-controls { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.toc-hint { margin: 12px 0 0; font-size: 12px; font-weight: 700; line-height: 18px; }
.toc-arrows { display: flex; gap: 8px; }
.toc-arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 22px; cursor: pointer; }
.toc-arrow[aria-disabled='true'] { opacity: 0.35; cursor: default; }
@media (max-width: 899px) {
  .toc-heading-row { display: block; }
  .toc-top-link { margin-top: 8px; }
  .toc-heading { font-size: 26px; line-height: 33.8px; }
  .toc-viewport { margin-top: 28px; }
  .toc-bike { left: 220px; top: 93px; width: 66px; height: 61px; }
  .toc-inner { padding-bottom: 8px; }
  .toc-controls { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 26px; }
  .toc-hint { margin-top: 0; }
  .toc-arrows { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-viewport { scroll-behavior: auto; }
}


@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("assets/toc-barlow-700.woff2") format("woff2")}