@charset "utf-8";
/* CSS Document */

body {
  width: 100%;
  margin: 0 auto;
  font-family: Verdana, Geneva, sans-serif;
  position: relative;
  background: #FFF;
}

.jpn {
  font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.eng {
  letter-spacing: 0.05em;
}

.switch {
  visibility: hidden;
}

img {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}

#container {
  width: 100%;
  height: auto;
}

.tlogo {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 35%;
  height: auto;
}

#main {
  width: auto;
  height: auto;
}

.cpn {
  position: relative;
  width: 100%;
}

.exp {
  margin: 2% auto;
  font-size: 14px;
  text-align: center;
}

.qr {
  width: 50%;
  height: auto;
  margin: 2% 25% 0;
}

.region {
  width: 90%;
  margin: 5% auto;
  background: #fff;
}

.region a:link {
  font-size: 14px;
  text-decoration: none;
  color: #00b0e9;
}

ul.accordionBox li {
  margin: 3% 0;
}

ul.subMenu, ul.targetMenu {
  border: 1px solid #CCC;
  margin: 3% 0;
  padding: 0 3%;
}

ul.subList {
  margin-bottom: 5%;
}

ul.subList li {
  min-height: 28px;
  padding: 7px 0 7px 58px;
  line-height: 1em;
  border-bottom: 1px solid #f2f2f2;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: -ms-box;
  display: box;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-box-align: center;
  box-align: center;
}

ul.subList li a {
  display: block;
}

.train {
  background: url(../common/icon_train.png) no-repeat;
}

.bus {
  background: url(../common/icon_bus.png) no-repeat;
}

.bat {
  background: url(../common/icon_bus_train.png) no-repeat;
}

.train, .bus, .bat {
  background-size: 53px 25px;
  background-position: left center;
}

.orange, .blue, .pink {
  padding: 2% 0 2.5%;
  font-size: 16px;
  text-align: center;
  color: #fff;
}

.orange {
  background-color: #f5a200;
}

.blue {
  background-color: #0862a9;
}

.pink {
  background-color: #c74168;
}

p.area {
  width: 100%;
  padding-bottom: 3%;
  text-align: center;
  font-size: 20px;
  color: #00b0e9;
  border-bottom: 3px solid #00b0e9;
}

p.tp {
  font-size: 16px;
  padding: 1.5% 0;
}

#footer {
  width: auto;
  height: auto;
  margin: 4% 0 0;
  background-color: #e7e7e6;
}

#footer>p {
  padding: 6% 0;
  font-size: 0.75em;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.brhd {
  display: none;
}

.brsp {
  display: none;
}

@media all and (min-width: 450px){
  .brsp {
    display: inherit;
  }
}

@media all and (min-width: 500px) {
  .exp {
    font-size: 16px;
  }
}

@media all and (min-width: 641px) {
  #container {
    width: 100%;
    max-width: 980px;
    height: auto;
    margin: 0 auto;
  }

  .tlogo {
    width: 18.4%;
    top: 9%;
    left: 6.9%;
    transform: translateX(0);
  }

  #main {
    width: 100%;
    height: auto;
  }

  .exp {
    margin-top: 4%;
    letter-spacing: 0.05em;
  }

  .qr {
    width: 31%;
    max-width: 304px;
    height: auto;
    margin: 2% 34.5% 0;
  }

  .region {
    width: 95%;
    margin: 3% 0 3% 2.8%;
    display: block;
  }

  .region a:link {
    font-size: 15px;
  }

  ul.accordionBox>li {
    width: 32%;
    padding: 0.5%;
    display: inline-block;
    float: left;
  }

  ul.targetMenu {
    width: 97.1%;
    margin: 0.5%;
    padding: 0 0.25%;
  }

  ul.subMenu {
    width: 303%;
    padding: 0 1%;
  }

  ul.subMenu>li, ul.targetMenu>li {
    width: 33.3%;
    display: inline-block;
    float: left;
    margin: 1% 0;
  }

  ul.accessMenu {
    width: 300%;
    margin-left: -1%;
    padding: 0 1%;
  }

  ul.accessMenu>li {
    width: 33.3%;
    display: inline-block;
    margin: 2% 0 0;
    float: left;
  }

  ul.subList {
    margin: 0 3%;
  }

  ul.subList li {
    min-height: 32px;
  }

  ul.center {
    margin-left: -103.2%;
  }

  ul.right {
    margin-left: -206.4%;
  }

  .orange, .blue, .pink {
    margin: 0 2%;
  }

  p.area {
    width: 296%;
    margin: 0 2%;
  }

  p.tp {
    margin-left: 2%;
    padding: 3% 0 0;
  }

  #footer {
    margin-top: 5%;
  }

  #footer p {
    padding: 2.5% 0;
    letter-spacing: 0.12em;
  }

  .brhd {
    display: inherit;
  }

  .pchd {
    display: none;
  }
}

@media all and (min-width: 800px){
  .brhd {
    display: none;
  }
}

img.access_banner {
  width: 100%;
  display:block;
  margin: auto;
}

@media all and (min-width: 641px) {
  img.access_banner {
    width: min(910px, 91.3vw);
    max-width: none;
  }
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.access_pc { display: block !important; }
.access_sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 640px) {
  .access_pc { display: none !important; }
  .access_sp { display: block !important; }
}