@media only screen and (min-width: 768px) {
  .access-introduction {
    padding: 160px 0;
  }
}
@media only screen and (max-width: 767px) {
  .access-introduction {
    padding: calc(80 / 375 * 100vw) 0;
  }
}

@media only screen and (min-width: 768px) {
  .access-train {
    padding: 160px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .access-train {
    padding: calc(120 / 375 * 100vw) 0 0;
  }
}

@media only screen and (min-width: 768px) {
  .access-route {
    padding: 160px 0 0;
  }
}
@media only screen and (max-width: 767px) {
  .access-route {
    padding: calc(120 / 375 * 100vw) 0 0;
  }
}

@media only screen and (min-width: 768px) {
  .access-other {
    padding: 160px 0;
  }
}
@media only screen and (max-width: 767px) {
  .access-other {
    padding: calc(120 / 375 * 100vw) 0;
  }
}

.introSect__head {
  text-align: center;
}
.introSect__visual {
  width: calc(100vw - var(--scrollbar));
}
@media only screen and (min-width: 768px) {
  .introSect__visual {
    margin-left: calc((100% - 100vw + var(--scrollbar)) / 2);
  }
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
  .introSect__visual {
    margin-left: 0;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__visual {
    margin-left: calc(-16 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .introSect__visual {
    padding: 0 50px;
    margin-top: 80px;
  }
}
@media print, screen and (min-width: 768px) and (max-width: 960px) {
  .introSect__visual {
    padding: 0;
    max-width: 0;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__visual {
    margin-top: calc(64 / 375 * 100vw);
  }
}
@media only screen and (max-width: 767px) {
  .introSect__visual .cap {
    padding: 0 calc(16 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .introSect__visual .photo + .cap {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__visual .photo + .cap {
    margin-top: calc(10 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .introSect__cont {
    width: 703px;
    margin: 80px auto 0;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__cont {
    margin: calc(64 / 375 * 100vw) calc(-16 / 375 * 100vw) 0;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__cont .cap {
    padding: 0 calc(16 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .introSect__cont .photo + .cap {
    margin-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .introSect__cont .photo + .cap {
    margin-top: calc(10 / 375 * 100vw);
  }
}

@media only screen and (min-width: 768px) {
  .trainSect__head {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__head {
    padding: 0 calc(24 / 375 * 100vw);
  }
}
.trainSect__head .headingLv3 {
  white-space: nowrap;
}
.trainSect__cont {
  width: calc(100vw - var(--scrollbar));
}
@media only screen and (min-width: 768px) {
  .trainSect__cont {
    margin-left: calc((100% - 100vw + var(--scrollbar)) / 2);
  }
}
@media only screen and (min-width: 768px) and (max-width: 960px) {
  .trainSect__cont {
    margin-left: 0;
    width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__cont {
    margin-left: calc(-16 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .trainSect__cont {
    margin-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__cont {
    margin-top: calc(120 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .trainSect__bottom {
    margin-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__bottom {
    margin-top: calc(64 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .trainSect__bottom .zoomFigure + .cap {
    margin-top: 32px;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__bottom .zoomFigure + .cap {
    margin-top: calc(40 / 375 * 100vw);
  }
}
.trainSect__heading {
  display: flex;
  gap: 8px;
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
  color: #222222;
}
@media only screen and (min-width: 768px) {
  .trainSect__heading {
    align-items: center;
    font-size: 18px;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__heading {
    align-items: flex-start;
    margin-left: calc(14 / 375 * 100vw);
    font-size: calc(18 / 375 * 100vw);
  }
}
.trainSect__heading:before {
  content: "";
  aspect-ratio: 1/1;
  width: 1em;
  background-color: #666666;
}
.trainSect__heading .inner {
  display: block;
  flex: 1;
  line-height: calc(1.8);
}
.trainSect__heading .inner:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.8) * 0.5em);
}
.trainSect__heading .inner:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
@media only screen and (min-width: 768px) {
  .trainSect__heading + .zoomFigure {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .trainSect__heading + .zoomFigure {
    margin-top: calc(40 / 375 * 100vw);
  }
}

@media only screen and (min-width: 768px) {
  .routeSect:not(:first-child) {
    margin-top: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect:not(:first-child) {
    margin-top: calc(120 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .routeSect__head + .routeSect__cont {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__head + .routeSect__cont {
    margin-top: calc(64 / 375 * 100vw);
  }
}
.routeSect__heading {
  letter-spacing: 0.1em;
  position: relative;
  z-index: 1;
  color: #222222;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media only screen and (min-width: 768px) {
  .routeSect__heading {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__heading {
    margin-left: calc(14 / 375 * 100vw);
    font-size: calc(15 / 375 * 100vw);
  }
}
.routeSect__heading:before {
  content: "";
  aspect-ratio: 1/1;
  width: 1em;
  background-color: #EDC525;
}
.routeSect__heading .inner {
  line-height: calc(1.8);
}
.routeSect__heading .inner:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-top: calc((1 - 1.8) * 0.5em);
}
.routeSect__heading .inner:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  margin-bottom: calc((1 - 1.8) * 0.5em);
}
.routeSect__heading .inner {
  display: block;
  flex: 1;
}
.routeSect__heading--asakusa:before {
  background-color: #D05B90;
}
@media only screen and (min-width: 768px) {
  .routeSect__heading + .swipeFigure {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__heading + .swipeFigure {
    margin-top: calc(32 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .routeSect__block:not(:first-child) {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__block:not(:first-child) {
    margin-top: calc(64 / 375 * 100vw);
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__block .swipeFigure {
    margin-left: calc(-16 / 375 * 100vw);
    width: calc(100vw - var(--scrollbar));
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__block .swipeFigure__inner {
    height: calc(200 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .routeSect__block .swipeFigure + .cap {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__block .swipeFigure + .cap {
    margin-top: calc(64 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .routeSect__note {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .routeSect__note {
    margin-top: calc(16 / 375 * 100vw);
  }
}

.otherSect {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .otherSect {
    gap: 24px 36px;
  }
}
@media only screen and (max-width: 767px) {
  .otherSect {
    flex-direction: column;
    gap: calc(60 / 375 * 100vw);
    padding: 0 calc(24 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__taxi {
    width: 448px;
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__taxi .headingLv4 + .photo {
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .otherSect__taxi .photo {
    margin: calc(40 / 375 * 100vw) calc(-24 / 375 * 100vw) 0;
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__taxi .cap {
    margin-top: 5px;
  }
}
@media only screen and (max-width: 767px) {
  .otherSect__taxi .cap {
    margin-top: calc(5 / 375 * 100vw);
  }
}
.otherSect__list {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .otherSect__list {
    gap: 16px;
    margin-top: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .otherSect__list {
    gap: calc(40 / 375 * 100vw);
    flex-direction: column;
    margin-top: calc(40 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__item {
    width: calc(50% - 8px);
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__airport {
    width: 476px;
  }
}
@media only screen and (min-width: 768px) {
  .otherSect__cap {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .photo + .accessCard__desc {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .photo + .accessCard__desc {
    margin-top: calc(24 / 375 * 100vw);
  }
}
.accessCard__ttl {
  display: flex;
  color: #222222;
  flex-direction: column;
  letter-spacing: 0.05em;
}
@media only screen and (min-width: 768px) {
  .accessCard__ttl {
    gap: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .accessCard__ttl {
    gap: calc(16 / 375 * 100vw);
  }
}
.accessCard__ttl .small {
  display: block;
  line-height: 1.8;
  text-box: trim-both text;
}
@media only screen and (min-width: 768px) {
  .accessCard__ttl .small {
    font-size: 13px;
  }
}
@media only screen and (max-width: 767px) {
  .accessCard__ttl .small {
    font-size: calc(13 / 375 * 100vw);
  }
}
.accessCard__ttl .main {
  display: block;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .accessCard__ttl .main {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .accessCard__ttl .main {
    font-size: calc(18 / 375 * 100vw);
  }
}
@media only screen and (min-width: 768px) {
  .accessCard__ttl + .cap {
    margin-top: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .accessCard__ttl + .cap {
    margin-top: calc(24 / 375 * 100vw);
  }
}