.categoryHeader {
  margin-top: -116px;
  position: relative; }
  .categoryHeader img {
    width: 100%;
    height: auto; }
  .categoryHeader .note {
    position: absolute;
    right: 10px;
    bottom: 10px;
    color: #fff; }

#mainVisual {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap; }
  #mainVisual .station {
    position: relative;
    width: 33.33%; }
    #mainVisual .station .note {
      color: #fff; }
  @media screen and (max-width: 480px) {
    #mainVisual .station {
      width: 50%; } }

#areaMap {
  background-color: #d2e2ec;
  margin-top: 80px;
  padding: 20px 0 120px; }
  #areaMap .main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    position: relative; }
    #areaMap .main .note {
      position: absolute;
      right: 10%;
      bottom: 10%; }
  #areaMap img {
    width: 100%;
    height: auto; }

.categoryMain {
  padding-top: 50px; }

#train .categoryMain {
  background-color: #e6e6e6;
  padding-bottom: 160px; }
#train .figure {
  margin: 40px auto 0;
  max-width: 886px; }
  #train .figure img {
    width: 100%;
    height: auto; }
  #train .figure .note {
    text-align: right; }
#train .fromStation {
  margin-top: 20px; }
  #train .fromStation .title {
    border-left: 4px #27acb8 solid;
    padding-left: 15px; }
  #train .fromStation .stationList {
    font-size: 0;
    text-align: left; }
    #train .fromStation .stationList li {
      display: inline-block;
      vertical-align: top;
      max-width: 300px;
      width: 30%;
      margin-top: 15px;
      margin-right: 5%; }
      #train .fromStation .stationList li:nth-child(3n) {
        margin-right: 0; }
      #train .fromStation .stationList li img {
        width: 100%;
        height: auto; }
      @media screen and (max-width: 768px) {
        #train .fromStation .stationList li {
          display: block;
          margin-right: 0%; } }
#train .note:last-child {
  margin-top: 60px; }

#bus .categoryMain {
  padding-bottom: 160px; }
#bus .figure {
  margin: 40px auto 0; }
  #bus .figure img {
    width: 100%;
    height: auto; }
#bus .note {
  margin-top: 40px; }

#taxi .categoryMain {
  background-color: #e6e6e6;
  padding-bottom: 160px; }
#taxi .taxiPrice .title {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  margin-top: 50px; }
  #taxi .taxiPrice .title .text {
    font-size: 32px;
    margin-left: 10px;
    font-feature-settings: "palt";
    letter-spacing: 0.02em; }
#taxi .taxiPrice .priceList {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  margin-top: 40px; }
  #taxi .taxiPrice .priceList div {
    width: 33.25%; }
    #taxi .taxiPrice .priceList div img {
      width: 100%;
      height: auto; }
#taxi .note {
  margin-top: 40px; }

#car .figure {
  margin-top: 50px; }
  #car .figure img {
    width: 100%;
    height: auto; }
#car .note {
  margin-top: 40px; }

@media screen and (max-width: 768px) {
  #areaMap {
    margin-top: 30px; }

  .categoryMain {
    padding-top: 30px; }

  #train .figure .note {
    margin-top: 0; }
  #train .fromStation {
    margin-top: 40px;
    border-left: 2px #27acb8 solid;
    padding-left: 15px; }
    #train .fromStation .title {
      border: 0;
      padding: 0; }
    #train .fromStation .stationList {
      display: block; }
      #train .fromStation .stationList li {
        width: 100%; }

  #taxi .taxiPrice .title {
    margin-top: 30px; }
    #taxi .taxiPrice .title img {
      height: 40px;
      width: auto; }
    #taxi .taxiPrice .title .text {
      font-size: 26px; }
  #taxi .taxiPrice .priceList {
    margin-top: 20px; } }
@media screen and (max-width: 480px) {
  #taxi .taxiPrice .priceList {
    display: block; }
    #taxi .taxiPrice .priceList div {
      width: 100%;
      margin-top: 20px; } }