body#access section#fv {
  background-color: var(--expcolor);
}

body#access section#cfa {
  background-color: var(--expcolor);
}

body#access section#train {
  & > figure {
    .title {
      position: absolute;
      left: 50%;
      top: -.5em;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: RGBA(255,255,255,.4);
      transform: translateX(-50%);
    }
  }
  .map {
    position: relative;
    h3 {
      position: absolute;
      left: 4rem;
      top: 8rem;
    }
    figure {
      margin: 5rem 0;
    }
    figcaption {
      position: relative;
      right: 0;
      bottom: 4rem;
      text-align: right;
      color: var(--maincolor);
    }
  }
  .station {
    margin: 2rem auto;
    ol {
      display: flex;
      figure {
        figcaption {
          font-size: 2.5rem;
          n {
            font-family: "EB Garamond", serif;
            font-size: 200%;
          }
          span {
            font-size: 80%;
          }
        }
      }
      & > li {
        & > figure {
        }
        &:nth-child(1) {
          width: 35.93%;
          figure {
            figcaption {
              right: unset;
              bottom: unset;
              left: 10px;
              top: 10px;
            }
          }
        }
        &:nth-child(2) {
          display: flex;
          flex-wrap: wrap;
          width: 64.07%;
          figure {
            width: 50%;
          }
        }
      }
    }
    .annotation {
      margin-top: .5rem;
      text-align: right;
    }
  }

}

body#access section#taxi {
  margin-top: 10rem;
  & > figure {
    .title {
      position: absolute;
      left: 2%;
      bottom: -.5em;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: RGBA(255,255,255,.4);
    }
  }
  .bg {
    padding: 8rem 0;
    color: var(--expcolor);
    background-image: url(../img/access/taxi_bg.webp);
    .simulation {
      margin-top: 4rem;
      h3 {
        position: relative;
        font-size: clamp(0.8rem, 0.267rem + 1.11vw, 1.6rem);
        text-align: left;
        &::before {
          position: absolute;
          right: 0;
          top: 50%;
          content: "";
          width: calc(100% - 32rem);
          height: 1px;
          background-color: var(--expcolor);
        }
      }
      ol {
        display: flex;
        gap: 2rem;
        margin-top: 2rem;
        li {
          width: calc(25% - 1.5rem);
          .name {
            font-size: 2.4rem;
            text-align: center;
          }
          .spec {
            font-size: 1.8rem;
            text-align: center;
            border-bottom: var(--expcolor) solid 1px;
            n {
              font-family: "EB Garamond", serif;
              font-size: 250%;
            }
            span {
              font-size: 65%;
            }
          }
          .fare {
            margin-top: .8rem;
            font-size: 110%;
            text-align: center;
          }
        }
      }
      .annotation {
        margin-top: 2rem;
        span {
          display: block;
          margin-left: 1em;
          text-indent: -1em;
        }
      }
    }
  }
}

body#access section#bus {
  padding-bottom: 10rem;
  color: var(--bodycolor);
  background-color: var(--expcolor);
  & > figure {
    .title {
      position: absolute;
      right: 5%;
      bottom: -.5em;
      z-index: 2;
      font-family: 'Cormorant Garamond', serif;
      font-size: 10rem;
      letter-spacing: .6rem;
      color: RGBA(255,255,255,.4);
      transform: translateX(-50%);
    }
  }
  h2 {
    margin-top: 8rem;
  }
  .route {
    display: flex;
    gap: 4rem;
    margin-top: 5rem;
    figure {
      &:nth-child(1) {
        width: calc(47.5% - 2rem);
      }
      &:nth-child(2) {
        width: calc(52.5% - 2rem);
      }
    }
  }

}



@media all and (min-width: 769px) and (max-width: 1000px) {


}



@media all and (max-width: 768px) {

  body#access section#train {
    & > figure {
      .title {
        font-size: 20vw;
      }
    }
    .map {
      h3 {
        top: 2rem;
        left: 0;
      }
      figure {
        margin: 5rem 0 3rem;
        width: 150%;
      }
      figcaption {
        bottom: 2rem;
      }
    }
    .station {
      ol {
        figure {
          figcaption {
            font-size: 1.5rem;
            n {
            }
            span {
            }
          }
        }
        & > li {
          & > figure {
          }
          &:nth-child(1) {
            figure {
              figcaption {
              }
            }
          }
          &:nth-child(2) {
            figure {
            }
          }
        }
      }
    }

  }

  body#access section#taxi {
    margin-top: 8rem;
    & > figure {
      .title {
        font-size: 20vw;
      }
    }
    .bg {
      padding: 4rem 0;
      h2 {
        font-size: 4vw;
        line-height: 2rem;
      }
      .simulation {
        margin-top: 2rem;
        h3 {
          font-size: 3vw;
          text-align: center;
          &::before {
             display: none;
          }
        }
        ol {
          flex-wrap: wrap;
          li {
            width: calc(50% - 1.5rem);
            .name {
            }
            .spec {
              n {
              }
              span {
              }
            }
            .fare {
            }
          }
        }
        .annotation {
          span {
          }
        }
      }
    }
  }

  body#access section#bus {
    padding-bottom: 5rem;
    & > figure {
      .title {
        right: unset;
        left: 50%;
        font-size: 20vw;
      }
    }
    h2 {
      font-size: 4vw;
      line-height: 2rem;
    }
    .route {
      flex-direction: column;
      gap: 2rem;
      margin-top: 3rem;
      figure {
        width: 100% !important;
      }
    }
  }

}