.accessDetail{
  color: var(--color-ink);
  background: var(--color-paper);
}
.accessRouteNav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7vw;
  width: 70vw;
  margin: 0 auto 3.2vw;
}
.accessRouteNav a{
  display: inline-flex;
  align-items: center;
  min-height: 3vw;
  padding: 0.72vw 1.2vw;
  color: var(--color-button-dark);
  font-family: var(--font-sans);
  font-size: 0.9vw;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
  background: var(--color-white);
  border: 0.07vw solid color-mix(in srgb, var(--color-gold) 52%, transparent);
  border-radius: 999vw;
}
.accessRouteNav a::after{
  display: inline-block;
  width: 0.45vw;
  height: 0.45vw;
  margin-left: 0.64vw;
  content: "";
  border-right: 0.12vw solid currentColor;
  border-bottom: 0.12vw solid currentColor;
  transform: rotate(45deg) translateY(-0.1vw);
}
.accessRouteNav a[href="#hankyu-route-title"]{
  color: var(--color-paper);
  background: #7fbe32;
  border-color: #7fbe32;
}
.accessRouteNav a[href="#jr-route-title"]{
  color: var(--color-paper);
  background: #318eb9;
  border-color: #318eb9;
}
.accessRoute{
  padding: 0 0 7vw;
}
.accessRoute + .accessRoute{
  padding-top: 1.6vw;
}
.accessRouteInner{
  position: relative;
  width: 70vw;
  margin: 0 auto;
  padding: 4.1vw 3.4vw 3.4vw;
  border: 0.07vw solid color-mix(in srgb, var(--color-gold) 46%, transparent);
}
.accessRouteInner::after{
  position: absolute;
  inset: 0.62vw;
  z-index: 1;
  content: "";
  border: 0.07vw solid color-mix(in srgb, var(--color-gold-soft) 58%, transparent);
  pointer-events: none;
}
.accessRouteTitle{
  position: relative;
  z-index: 2;
  margin: 0 0 3.2vw;
  font-family: var(--font-display);
  font-size: 2.36vw;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: 0.08em;
  text-align: center;
}
.accessRouteStepList{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.4vw 2.6vw;
}
.accessRouteStepList article{
  position: relative;
  overflow: hidden;
  background: var(--color-paper);
  border-radius: 0.55vw;
  box-shadow: 0 0.35vw 1vw color-mix(in srgb, var(--color-button-dark) 5%, transparent);
}
.accessRouteStepList span{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 3.15vw;
  height: 3.15vw;
  padding-bottom: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.45vw;
  font-weight: 800;
  line-height: 1;
  background: var(--color-gold);
}
.accessDetail[data-shop="takatsuki"] .accessRouteStepList article:nth-child(3n + 1) span{
  background: #7fbe32;
}
.accessDetail[data-shop="takatsuki"] .accessRouteStepList article:nth-child(3n + 2) span{
  background: #f19b00;
}
.accessDetail[data-shop="takatsuki"] .accessRouteStepList article:nth-child(3n) span{
  background: #318eb9;
}
.accessDetail[data-shop="takatsuki"] .accessRoute[aria-labelledby="hankyu-route-title"] .accessRouteInner{
  border-color: #7fbe32;
}
.accessDetail[data-shop="takatsuki"] .accessRoute[aria-labelledby="hankyu-route-title"] .accessRouteInner::after{
  border-color: color-mix(in srgb, #7fbe32 58%, transparent);
}
.accessDetail[data-shop="takatsuki"] .accessRoute[aria-labelledby="jr-route-title"] .accessRouteInner{
  border-color: #318eb9;
}
.accessDetail[data-shop="takatsuki"] .accessRoute[aria-labelledby="jr-route-title"] .accessRouteInner::after{
  border-color: color-mix(in srgb, #318eb9 58%, transparent);
}
.accessRouteStepList figure{
  position: relative;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  background: var(--color-paper-deep);
}
.accessRouteStepList figure img{
  display: block;
  width: 100%;
  aspect-ratio: 1.42 / 1;
  object-fit: cover;
}
.accessRouteStepList article > div{
  position: relative;
  z-index: 2;
  min-height: 5.8vw;
  padding: 1.35vw 1.15vw 1.5vw;
  background: var(--color-paper);
  border-top: 0.07vw solid color-mix(in srgb, var(--color-gold) 36%, transparent);
}
.accessRouteStepList article > div p{
  margin: 0;
  color: var(--color-muted);
  font-size: 1.02vw;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 1480px){
  .accessRouteNav{
    gap: 0.6475rem;
    width: 64.75rem;
    margin-bottom: 2.96rem;
  }
  .accessRouteNav a{
    min-height: 2.775rem;
    padding: 0.666rem 1.11rem;
    font-size: 0.8325rem;
    border-width: 0.0648rem;
  }
  .accessRouteNav a::after{
    width: 0.4163rem;
    height: 0.4163rem;
    margin-left: 0.592rem;
    border-right-width: 0.111rem;
    border-bottom-width: 0.111rem;
    transform: rotate(45deg) translateY(-0.0925rem);
  }
  .accessRoute{
    padding-bottom: 6.475rem;
  }
  .accessRoute + .accessRoute{
    padding-top: 1.48rem;
  }
  .accessRouteInner{
    width: 64.75rem;
    padding: 3.7925rem 3.145rem 3.145rem;
    border-width: 0.0648rem;
  }
  .accessRouteInner::after{
    inset: 0.5735rem;
    border-width: 0.0648rem;
  }
  .accessRouteTitle{
    margin-bottom: 2.96rem;
    font-size: 2.183rem;
  }
  .accessRouteStepList{
    gap: 3.145rem 2.405rem;
  }
  .accessRouteStepList span{
    top: 0;
    left: 0;
    width: 2.9138rem;
    height: 2.9138rem;
    padding-bottom: 0;
    font-size: 1.3413rem;
  }
  .accessRouteStepList article > div{
    min-height: 5.365rem;
    padding: 1.2488rem 1.0638rem 1.3875rem;
    border-top-width: 0.0648rem;
  }
  .accessRouteStepList article{
    border-radius: 0.5088rem;
    box-shadow: 0 0.3238rem 0.925rem color-mix(in srgb, var(--color-button-dark) 5%, transparent);
  }
  .accessRouteStepList article > div p{
    font-size: 0.9435rem;
  }
}
@media screen and (max-width: 768px){
  .accessRouteNav{
    gap: 2vw;
    width: 100%;
    margin-bottom: 7vw;
  }
  .accessRouteNav a{
    min-height: 10vw;
    padding: 2.4vw 3.5vw;
    font-size: 3vw;
    border-width: 0.2vw;
  }
  .accessRouteNav a::after{
    width: 1.5vw;
    height: 1.5vw;
    margin-left: 1.9vw;
    border-right-width: 0.35vw;
    border-bottom-width: 0.35vw;
    transform: rotate(45deg) translateY(-0.35vw);
  }
  .accessRoute{
    padding-bottom: 16vw;
  }
  .accessRoute + .accessRoute{
    padding-top: 3vw;
  }
  .accessRouteInner{
    width: 94vw;
    padding: 9vw 5.5vw 7vw;
    border-width: 0.2vw;
  }
  .accessRouteInner::after{
    inset: 1.3vw;
    border-width: 0.2vw;
  }
  .accessRouteTitle{
    margin-bottom: 8vw;
    font-size: 5.8vw;
  }
  .accessRouteStepList{
    grid-template-columns: 1fr;
    gap: 8vw;
  }
  .accessRouteStepList span{
    top: 0;
    left: 0;
    width: 9.5vw;
    height: 9.5vw;
    padding-bottom: 0;
    font-size: 4vw;
  }
  .accessRouteStepList figure img{
    aspect-ratio: 1.34 / 1;
  }
  .accessRouteStepList article > div{
    min-height: 18vw;
    padding: 4.5vw 3.8vw 5vw;
    border-top-width: 0.2vw;
  }
  .accessRouteStepList article{
    border-radius: 1.6vw;
    box-shadow: 0 1vw 3vw color-mix(in srgb, var(--color-button-dark) 5%, transparent);
  }
  .accessRouteStepList article > div p{
    font-size: 3.35vw;
    line-height: 1.8;
  }
}