@charset "UTF-8";
.accessLead {
  color: #464646;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .accessLead {
    padding: 0 20px;
  }
}

.accessLead__heading {
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
  .accessLead__heading {
    font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .accessLead__heading {
    font-size: 22px;
  }
}

.accessLead__txt {
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.9;
}

@media print, screen and (min-width: 768px) {
  .accessLead__txt {
    margin-top: 30px;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .accessLead__txt {
    margin-top: 20px;
    font-size: 14px;
    text-align: left;
  }
}

.busAccess {
  color: #464646;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* SP: divider line + blue accent + eyebrow moved above the image */
}

@media print, screen and (min-width: 768px) {
  .busAccess {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .busAccess {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0 calc(60 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .busAccess__fig {
    width: 47%;
  }
}

.busAccess__fig .photo__image {
  display: block;
  width: 100%;
}

.busAccess__body {
  border-top: 1px solid #ececec;
  position: relative;
  /* short blue accent over the divider line (PC only; on SP it moves to __head) */
}

@media print, screen and (min-width: 768px) {
  .busAccess__body {
    padding-top: 16px;
    width: 47%;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__body {
    border-top: none;
    margin-top: calc(48 / 750 * 100vw);
    padding-top: 0;
  }
}

.busAccess__body:before {
  background-color: #5f94b6;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
}

@media print, screen and (min-width: 768px) {
  .busAccess__body:before {
    width: 51px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__body:before {
    display: none;
  }
}

.busAccess__head {
  border-top: 1px solid #ececec;
  position: relative;
}

@media screen and (max-width: 768px) {
  .busAccess__head {
    margin-bottom: calc(40 / 750 * 100vw);
    padding-top: calc(24 / 750 * 100vw);
  }
}

.busAccess__head:before {
  background-color: #5f94b6;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: -1px;
}

@media screen and (max-width: 768px) {
  .busAccess__head:before {
    width: calc(80 / 750 * 100vw);
  }
}

.busAccess__eyebrow {
  color: #5f94b6;
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: .1em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .busAccess__eyebrow {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__eyebrow {
    font-size: calc(40 / 750 * 100vw);
  }
}

.busAccess__heading {
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.4;
  /* CB: SPは（約230m）を「徒歩3分」の真下へ。.walk を inline-block（top揃え）で
       幅を縮め、内側の .dist を block 化して左端を「徒歩3分」に合わせる（PCは1行のまま） */
}

@media print, screen and (min-width: 768px) {
  .busAccess__heading {
    font-size: 24px;
    margin-top: 28px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__heading {
    font-size: calc(40 / 750 * 100vw);
    margin-top: calc(36 / 750 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .busAccess__heading .walk {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
  }
}

@media print, screen and (min-width: 768px) {
  .busAccess__heading .dist {
    font-size: 13px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__heading .dist {
    display: block;
    font-size: calc(22 / 750 * 100vw);
  }
}

.busAccess__desc {
  letter-spacing: .12em;
  line-height: 1.75;
}

@media print, screen and (min-width: 768px) {
  .busAccess__desc {
    font-size: 16px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__desc {
    font-size: calc(28 / 750 * 100vw);
    margin-top: calc(28 / 750 * 100vw);
  }
}

.busAccess__note {
  letter-spacing: .06em;
  line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
  .busAccess__note {
    font-size: 10px;
    margin-top: 22px;
  }
}

@media screen and (max-width: 768px) {
  .busAccess__note {
    font-size: calc(20 / 750 * 100vw);
    margin-top: calc(32 / 750 * 100vw);
  }
}

.carAccess {
  /* text overlay */
  /* car route map — natural 784px width (centered) on PC, full-bleed 100vw on SP */
}

@media screen and (max-width: 768px) {
  .carAccess {
    padding: 0 calc(60 / 750 * 100vw);
  }
}

.carAccess__banner {
  position: relative;
}

.carAccess__banner .photo__image {
  display: block;
  width: 100%;
}

.carAccess__head {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: 0;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  left: 0;
  position: absolute;
  right: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
  top: 0;
  z-index: 2;
}

@media print, screen and (min-width: 768px) {
  .carAccess__head {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-left: 50px;
  }
}

@media screen and (max-width: 768px) {
  .carAccess__head {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.carAccess__headInner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .carAccess__headInner {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
}

@media screen and (max-width: 768px) {
  .carAccess__headInner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.carAccess__ttl {
  font-family: "Cinzel", serif;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .carAccess__ttl {
    font-size: 32px;
    margin-right: 40px;
  }
}

@media screen and (max-width: 768px) {
  .carAccess__ttl {
    font-size: calc(50 / 750 * 100vw);
  }
}

.carAccess__lead {
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: .12em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .carAccess__lead {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .carAccess__lead {
    font-size: calc(26 / 750 * 100vw);
    margin-top: calc(28 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .carAccess__map {
    margin: 40px auto 0;
    max-width: 784px;
  }
}

@media screen and (max-width: 768px) {
  .carAccess__map {
    margin-left: calc(50% - 50vw);
    margin-top: calc(100 / 750 * 100vw);
    width: 100vw;
  }
}

.carAccess__map .photo__image {
  display: block;
  width: 100%;
}

.cityAccess {
  display: grid;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

@media print, screen and (min-width: 768px) {
  .cityAccess {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .cityAccess {
    grid-template-columns: repeat(2, 1fr);
    margin-left: calc(50% - 50vw);
    width: 100vw;
  }
}

.cityAccess__item {
  position: relative;
}

.cityCard {
  color: #ffffff;
  position: relative;
  /* CB: 駅名が1行でも2行でも .time がカード間で水平に揃うよう、
     駅名の下端と .time の上端をカード中央からのオフセットで固定する */
}

.cityCard__visual {
  position: relative;
}

.cityCard__visual:after {
  background-color: rgba(20, 45, 86, 0.42);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.cityCard__visual .pic--cityCard {
  display: block;
}

.cityCard__visual .pic--cityCard .pic__image {
  display: block;
  height: auto;
  width: 100%;
}

.cityCard__label {
  inset: 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.cityCard__label .en {
  font-family: 'Cormorant Garamond', serif;
  left: 0;
  line-height: 1.15;
  position: absolute;
  right: 0;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .en {
    bottom: calc(50% + 24px);
    font-size: 34px;
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .en {
    bottom: calc(50% + (25 / 750 * 100vw));
    font-size: calc(43 / 750 * 100vw);
    letter-spacing: 0;
  }
}

.cityCard__label .time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Cinzel", serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .time {
    top: calc(50% + 6px);
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .time {
    top: calc(50% + (5 / 750 * 100vw));
  }
}

.cityCard__label .num {
  line-height: .8;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .num {
    font-size: 72px;
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .num {
    font-size: calc(86 / 750 * 100vw);
  }
}

.cityCard__label .timeUnit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: left;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .timeUnit {
    margin-left: 6px;
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .timeUnit {
    margin-left: calc(10 / 750 * 100vw);
  }
}

.cityCard__label .unit {
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .unit {
    font-size: 36px;
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .unit {
    font-size: calc(43 / 750 * 100vw);
  }
}

.cityCard__label .note {
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  letter-spacing: 0;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .cityCard__label .note {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .cityCard__label .note {
    font-size: calc(14 / 750 * 100vw);
  }
}

.cityCard__cap {
  bottom: 8px;
  font-size: 10px;
  line-height: 1;
  position: absolute;
  right: 8px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.commuteAccess {
  color: #464646;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* ---- 通勤シミュレーション heading ---- */
  /* ---- footnote ---- */
  /* ---- swipeable figures (contained, PSD swipe icon, built-in caption hidden) ---- */
}

@media screen and (max-width: 768px) {
  .commuteAccess {
    padding: 0 calc(60 / 750 * 100vw);
  }
}

.commuteAccess__ttl {
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.4;
}

@media print, screen and (min-width: 768px) {
  .commuteAccess__ttl {
    margin-top: 97px;
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .commuteAccess__ttl {
    margin-top: calc(90 / 750 * 100vw);
    font-size: calc(36 / 750 * 100vw);
  }
}

.commuteAccess__note {
  letter-spacing: .06em;
  line-height: 1.8;
}

@media print, screen and (min-width: 768px) {
  .commuteAccess__note {
    margin-top: 18px;
    font-size: 10px;
  }
}

@media screen and (max-width: 768px) {
  .commuteAccess__note {
    margin-top: calc(28 / 750 * 100vw);
    font-size: calc(20 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .commuteAccess__fig {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .commuteAccess__fig {
    margin-top: calc(36 / 750 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .commuteAccess__fig .touchFigure {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
}

@media screen and (max-width: 768px) {
  .commuteAccess__fig .touchFigure--swipe {
    height: 40vh;
  }
}

@media print, screen and (min-width: 768px) {
  .commuteAccess__fig .touchFigure__image {
    display: block;
    width: 100%;
  }
}

.commuteAccess__fig .touchFigure__capOut {
  display: none;
}

@media screen and (max-width: 768px) {
  .commuteAccess__fig .touchFigure__spIcon {
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-image: url("../imgs/icon-swipe.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
}

.commuteAccess__fig .touchFigure__spIcon .swipeSVG {
  display: none;
}

.icAccess {
  color: #464646;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* CB: 距離の起点ラベル。上下余白は旧 __list の margin-top を引き継ぐ */
}

@media screen and (max-width: 768px) {
  .icAccess {
    padding: 0 calc(60 / 750 * 100vw);
  }
}

.icAccess__from {
  font-family: "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

@media print, screen and (min-width: 768px) {
  .icAccess__from {
    font-size: 16px;
    margin: 32px 0 16px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__from {
    font-size: calc(26 / 750 * 100vw);
    margin: calc(40 / 750 * 100vw) 0 calc(24 / 750 * 100vw);
  }
}

.icAccess__list {
  display: grid;
}

@media print, screen and (min-width: 768px) {
  .icAccess__list {
    grid-template-columns: repeat(4, 1fr);
    -webkit-column-gap: 50px;
       -moz-column-gap: 50px;
            column-gap: 50px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__list {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(48 / 750 * 100vw) calc(40 / 750 * 100vw);
  }
}

.icAccess__item {
  text-align: center;
}

.icAccess__fig .photo__image {
  display: block;
  width: 100%;
}

.icAccess__label {
  letter-spacing: .12em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .icAccess__label {
    margin-top: 16px;
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__label {
    margin-top: calc(24 / 750 * 100vw);
    font-size: calc(26 / 750 * 100vw);
  }
}

.icAccess__dist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #cc5277;
  letter-spacing: .06em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .icAccess__dist {
    margin-top: 10px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__dist {
    margin-top: calc(16 / 750 * 100vw);
  }
}

.icAccess__num {
  font-family: "Cinzel", serif;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .icAccess__num {
    font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__num {
    font-size: calc(52 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .icAccess__unit {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .icAccess__unit {
    font-size: calc(26 / 750 * 100vw);
  }
}

.routeMap {
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* swipe touchFigure: contained, PSD swipe icon, built-in caption hidden */
}

@media screen and (max-width: 768px) {
  .routeMap .touchFigure {
    margin: 0;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .routeMap .touchFigure--swipe {
    height: calc(800 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .routeMap .touchFigure__image {
    display: block;
    width: 100%;
  }
}

.routeMap .touchFigure__capOut {
  display: none;
}

@media screen and (max-width: 768px) {
  .routeMap .touchFigure__spIcon {
    background-image: url("../imgs/icon-swipe.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 40px;
    left: 0;
    top: 0;
    width: 40px;
  }
}

.routeMap .touchFigure__spIcon .swipeSVG {
  display: none;
}

.routeMap__cap {
  color: #464646;
  font-size: 10px;
  line-height: 1;
  text-align: right;
}

@media print, screen and (min-width: 768px) {
  .routeMap__cap {
    margin-top: 8px;
  }
}

@media screen and (max-width: 768px) {
  .routeMap__cap {
    margin-top: 8px;
    padding: 0 20px;
  }
}

.trainAccess {
  color: #464646;
  font-family: "YakuHanMP", "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  /* ---- station rows ---- */
  /* opening bracket raised to align with the taller station name */
  /* ---- footnote paragraph ---- */
}

@media screen and (max-width: 768px) {
  .trainAccess {
    padding: 0 calc(60 / 750 * 100vw);
  }
}

.trainAccess__list {
  display: grid;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__list {
    -webkit-column-gap: 48px;
       -moz-column-gap: 48px;
            column-gap: 48px;
    grid-template-columns: 1fr 1fr;
    margin-top: 40px;
    row-gap: 38px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__list {
    grid-template-columns: 1fr;
    margin-top: calc(48 / 750 * 100vw);
    row-gap: calc(62 / 750 * 100vw);
  }
}

.trainAccess__head {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  border-bottom: 1px solid #949da9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__head {
    padding-bottom: 9px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__head {
    border-bottom-color: #c1c1c2;
    padding-bottom: calc(16 / 750 * 100vw);
  }
}

.trainAccess__item--accent .trainAccess__head {
  border-bottom-color: #908352;
}

.trainAccess__name {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__name {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__name {
    font-size: calc(40 / 750 * 100vw);
    letter-spacing: .06em;
  }
}

.trainAccess__mark {
  display: inline-block;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__mark {
    -webkit-transform: translateY(-0.75em);
            transform: translateY(-0.75em);
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__mark {
    -webkit-transform: translateY(-0.35em);
            transform: translateY(-0.35em);
  }
}

@media print, screen and (min-width: 768px) {
  .trainAccess__station {
    font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__station {
    font-size: calc(56 / 750 * 100vw);
  }
}

.trainAccess__time {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  letter-spacing: .12em;
  line-height: 1;
  margin-left: auto;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .trainAccess__time {
    letter-spacing: .06em;
  }
}

.trainAccess__direct {
  color: #cc5277;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__direct {
    font-size: 20px;
    margin-right: 3px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__direct {
    font-size: calc(40 / 750 * 100vw);
    margin-right: calc(6 / 750 * 100vw);
  }
}

.trainAccess__num {
  color: #cc5277;
  font-family: "Cinzel", serif;
  letter-spacing: .04em;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__num {
    font-size: 40px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__num {
    font-size: calc(64 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .trainAccess__unit {
    font-size: 16px;
    margin-left: 2px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__unit {
    font-size: calc(40 / 750 * 100vw);
    margin-left: calc(4 / 750 * 100vw);
  }
}

.trainAccess__sub {
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__sub {
    font-size: 14px;
    margin-left: 4px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__sub {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    font-size: calc(20 / 750 * 100vw);
    margin-top: calc(6 / 750 * 100vw);
    text-align: right;
  }
}

.trainAccess__cap {
  letter-spacing: .06em;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__cap {
    font-size: 13px;
    margin-top: 13px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__cap {
    font-size: calc(20 / 750 * 100vw);
    letter-spacing: .04em;
    margin-top: calc(16 / 750 * 100vw);
  }
}

.trainAccess__note {
  letter-spacing: .06em;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
  .trainAccess__note {
    font-size: 12px;
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .trainAccess__note {
    font-size: calc(20 / 750 * 100vw);
    letter-spacing: .04em;
    margin-top: calc(56 / 750 * 100vw);
  }
}

.trainAccess__noteLabel {
  color: #307bab;
  font-weight: 700;
}

/* Background band (#f6f6f7): from the middle of the route map down to just
   before BUS ACCESS — spans the routeMap (bottom half), trainAccess and
   commuteAccess sections, full-bleed. */
.access-transit {
  position: relative;
  z-index: 0;
}

.access-transit:before {
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 100vw;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #f6f6f7;
  content: '';
}

@media print, screen and (min-width: 768px) {
  .access-transit:before {
    top: 235px;
    bottom: -142px;
  }
}

@media screen and (max-width: 768px) {
  .access-transit:before {
    top: 20vh;
    bottom: calc(-142 / 750 * 100vw);
  }
}

/* ===========================================================================
   Section wrappers: access-{sectionName}
   Each section is <div class="access-{name}"><div class="wrap">…</div></div>.
   The access-{name} wrapper owns the vertical rhythm (margin / padding)
   BETWEEN sections; components style only their own internals.
   =========================================================================== */
@media print, screen and (min-width: 768px) {
  .access-accessLead {
    margin-top: 112px;
  }
}

@media screen and (max-width: 768px) {
  .access-accessLead {
    margin-top: 60px;
  }
}

@media print, screen and (min-width: 768px) {
  .access-cityAccess {
    margin-top: 55px;
  }
}

@media screen and (max-width: 768px) {
  .access-cityAccess {
    margin-top: 30px;
  }
}

@media print, screen and (min-width: 768px) {
  .access-routeMap {
    margin-top: 77px;
  }
}

@media screen and (max-width: 768px) {
  .access-routeMap {
    margin-top: 40px;
  }
}

@media print, screen and (min-width: 768px) {
  .access-trainAccess {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .access-trainAccess {
    margin-top: calc(80 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .access-commuteAccess {
    margin-top: 99px;
  }
}

@media screen and (max-width: 768px) {
  .access-commuteAccess {
    margin-top: calc(90 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .access-busAccess {
    margin-top: 278px;
  }
}

@media screen and (max-width: 768px) {
  .access-busAccess {
    margin-top: calc(278 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .access-carAccess {
    margin-top: 99px;
  }
}

@media screen and (max-width: 768px) {
  .access-carAccess {
    margin-top: calc(90 / 750 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .access-icAccess {
    margin-top: 60px;
    padding-bottom: 120px;
  }
}

@media screen and (max-width: 768px) {
  .access-icAccess {
    margin-top: calc(70 / 750 * 100vw);
    padding-bottom: calc(120 / 750 * 100vw);
  }
}