body {
  justify-content: flex-start;
}

.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: color-mix(in srgb, var(--color-white) 100%, transparent);
  padding: 16px 64px;
  backdrop-filter: blur(4px);
  display: grid;
  gap: 6px;
}

.nav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  scroll-target-group: auto;

  &::after {
    /* バスのアイコンを表示 */
    content: "";
    position: absolute;
    top: anchor(top);
    right: anchor(right);
    height: anchor-size(height);
    width: calc(anchor-size(width) + 24px);
    position-anchor: --current-city;
    transition:
      right 0.3s,
      width 0.3s;
    z-index: -1;
    background-image: url("../images/bus.svg");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
  }
}

.nav__item {
  display: grid;
  gap: 2px;
  justify-items: center;

  /* 現在表示中 */
  &:has(.nav__link:target-current) {
    border-bottom: 1px solid var(--color-border);
  }

  /* スクロール未到達 */
  &:has(.nav__link:target-after) {
    border-bottom: 1px solid var(--color-border);
  }
}

.nav__link {
  font-weight: bold;
  color: var(--color-text);
  font-size: 16px;
  padding: 4px 16px;

  /* スクロール通過ずみ */
  &:target-before {
    color: var(--color-text-muted);
  }

  /* 現在表示中 */
  &:target-current {
    color: var(--color-primary);
    /* 現在表示中の要素をアンカーとして指定。バスのアイコンを移動させる */
    anchor-name: --current-city;
  }
}

.main {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.city {
  width: 100vw;
  min-width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  scroll-snap-align: start;
}

.city__image-wrapper {
  height: 100%;
}

.city__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.city__content {
  padding: 40px;
  width: 100%;
  height: 100%;
  display: grid;
  align-content: start;
  padding-top: 98px;
}

.city__name {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: -0.05rem;
  margin-bottom: 16px;
}

.city__description {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 24px;
}

.city__schedule {
  font-size: 14px;
  line-height: 1.1;
  display: grid;
  gap: 8px;
}

@media (max-width: 640px) {
  .nav {
    padding: 24px;
  }
  .nav__list {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 8px;
  }
  .city {
    grid-template-columns: 1fr;
    grid-template-rows: 50% 50%;
    align-items: start;
  }
  .city__content {
    padding: 24px;
  }
  .city__image {
    object-fit: contain;
  }
  .city__description {
    margin-bottom: 24px;
  }
}