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

  2018/10/05 326_sakaguchi 
------------------------------------------------------------------ */
body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#wrapper {
  width: 100%;
}

#contents {
  margin: 0 auto;
  max-width: 1000px;
  padding-top: 1em;
  width: 100%;
}

#contents img {
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-backface-visibility: hidden;
}

h1 {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.txt_lead {
  margin: 1em auto 1.5em;
  width: calc( 705 / 1000 * 100% );
}

@media screen and (max-width: 736px) {
  #contents {
    padding-top: 0;
  }
  h1 {
    margin-bottom: 3%;
  }

  .txt_lead {
    text-align: justify;
    word-break: break-all;
    width: 95%;
  }
}

/*=========================================

                .con_map

==========================================*/
.con_map {
  display: -webkit-box; /*Android4.3*/
    display: -moz-box;    /*Firefox21*/
    display: -ms-flexbox; /*IE10*/
    display: -webkit-flex; /*PC-Safari,iOS8.4*/
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  height: 330px;
  overflow: hidden;
  width: 100%;
}

.con_map .box_map {
  position: relative;
  width: calc( 564 / 1000 * 100% );
}

.con_map .box_map .inner {
  height: 330px;
  position: relative;
}
.con_map .box_map #map {
  height: 100%!important;
  position: absolute;
  top: 0;
  width: 100%!important;
}

.con_map .box_map .btn {
  background: #fff;
  bottom: 5%;
  position: absolute;
  right: 1%;
  width: 10em;
}

.con_map .box_map .btn span {
  background: #AC2630;
  display: block;
  padding: 1px;
}

.con_map .box_map .btn span:hover {
  opacity: .8;
  transition: .5s all;
}

.con_map .box_map .btn a {
  border: 1px solid #fff;
  color: #fff;
  display: block;
  font-size: 85%;
  padding: 1%;
  position: relative;
  text-align: center;
}

.con_map .box_map .btn a:before {
  border: 5px solid transparent;
  border-left: 5px solid #fff;
  box-sizing: border-box;
  content: "";
  display: inline-block;
  height: 5px;
  left: 0;
  width: 4px;
}

.con_map .box_map .btn a:hover {
  text-decoration: none;
}

@media screen and (max-width: 736px) {
  .con_map {
    display: block;
    height: auto;
    margin: 0 auto 10%;
    width: 98%;
  }
  .con_map .box_map {
    margin-bottom: 3%;
    width: 100%;
  }

}

.con_map .box_lead {
  background: #EFECE5;
  width: calc( 430 / 1000 * 100% );
}

.con_map .box_lead .inner {
  background: url(../image/bg-map.png) no-repeat;
  background-size: contain;
  height: 330px;
  position: relative;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_map .box_lead .inner {
    background-size: 90%
  }
}

.con_map .box_lead .inner p {
  bottom: 15%;
  font-size: 110%;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: calc( 345 / 440 * 100% );
}

.con_map .box_lead .inner .btn {
  background: #da315c; /* Old browsers */
  background: -moz-linear-gradient(top, #da315c 0%, #d85b7a 4%, #da315c 17%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #da315c 0%,#d85b7a 4%,#da315c 17%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #da315c 0%,#d85b7a 4%,#da315c 17%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 1px solid #D12651;
  border-radius: 3px;
  bottom: 3%;
  width: 45%;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_map .box_lead .inner .btn {
    width: 65%;
  }
}

.con_map .box_lead .inner .btn:hover {
  opacity: .8;
  transition: .5s all;
}

.con_map .box_lead .inner .btn a {
  color: #fff;
  display: block;
  font-size: 85%;
  padding: 2% 0 2% 3.5em;
  position: relative;
}

.con_map .box_lead .inner .btn a:before {
  background: url(../image/ico-facirity.png) center center no-repeat;
  background-size: 2em;
  bottom: 0;
  content: "";
  display: block;
  left: 0.8em;
  position: absolute;
  top: 0;
  width: 2em;
}

.con_map .box_lead .inner .btn a:hover {
  text-decoration: none;
}

@media screen and (max-width: 736px) {
  .con_map .box_lead {
    height: auto;
    width: 100%;
  }

  .con_map .box_lead .inner {
    background-size: 100%;
    height: auto;
    padding-top: 78%;
    width: 100%;
  }

  .con_map .box_lead .inner p {
    bottom: 23%;
    font-size: 4vw;
    width: 95%;
  }

  .con_map .box_lead .inner .btn {
    bottom: 5%;
    width: 80%;
  }

  .con_map .box_lead .inner .btn a {
    font-size: 5vw;
    padding: 3% 0 3% 2.5em;
    text-align: center;
  }

  .con_map .box_lead .inner .btn a:before {
    left: 1em;
  }
}


/*=========================================

                .con_access

==========================================*/
.con_access {
  margin: 0 auto;
  overflow: hidden;
  width: calc( 910 / 1000 * 100% );
}

@media screen and (max-width: 736px) {
  .con_access {
    width: 98%;
  }
}

/*------------------------------------
      #train
------------------------------------*/
.con_access #train {
  margin-bottom: 7%;
}

.con_access #train h2 {
  margin-bottom: 2%;
}

.con_access #train p {
  margin: 0 auto 3%;
  width: 85%;
}


@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #train p {
    width: 80%;
  }
}

@media screen and (max-width: 736px) {
  .con_access #train {
    margin-bottom: 10%;
  }

  .con_access #train h2 {
    margin-bottom: 5%;
  }

  .con_access #train p {
    width: 90%;
  }
}

.con_access #train .box_detail {
  margin: 0 auto;
  overflow: hidden;
  width: calc( 872 / 910 * 100% );
}

.con_access #train .box_detail figure {
  float: left;
  width: calc( 530 / 872 * 100% );
}

@media screen and (max-width: 736px) {
  .con_access #train .box_detail figure {
    float: none;
    margin: 0 auto 5%;
    width: 95%;
  }
}

.con_access #train .box_detail .time {
  background: #EEF9FF;
  float: right;
  width:  calc( 320 / 872 * 100% );
}

.con_access #train .box_detail .time h3 {
  background: #174F8E;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 115%;
  font-weight: bold;
  margin-bottom: 2%;
  padding: 2% 0;
  text-align: center;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #train .box_detail .time h3 {
    font-size: 2vw;
  }
}

.con_access #train .box_detail .time ul {
  margin: 0 auto;
  width: calc( 290 / 320 * 100% );
}

.con_access #train .box_detail .time ul li {
  border-bottom: 1px solid #174F8E;
  font-family: 'Noto Serif TC', serif;
  padding: 1em 0;
}

.con_access #train .box_detail .time ul li:last-child {
  border-bottom: none;
}

.con_access #train .box_detail .time ul li small {
  display: block;
}

.con_access #train .box_detail .time ul li small span {
  display: inline-block;
  height: 1em;
  margin-right: 0.3em;
  width: 1em;
}

.con_access #train .box_detail .time ul li small .orange {
  background: #F1AB3E;
}

.con_access #train .box_detail .time ul li small .purple {
  background: #705EA7;
}

.con_access #train .box_detail .time ul li small .sky {
  background: #2BA1D3;
}

.con_access #train .box_detail .time ul li p {
  margin: 0;
  font-feature-settings: "palt";
  font-size: 120%;
  letter-spacing: 0.1em;
  line-height: 1.3em;
  margin-top: 0.3em;
  width: 100%;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #train .box_detail .time ul li p{
    font-size: 2vw;
  }
}

.con_access #train .box_detail .time ul li p a:hover {
  border-bottom: 1px solid #4659D7;
  padding-bottom: 1px;
  text-decoration: none;
}

.con_access #train .box_detail .time ul li p .txt_blue {
  color: #4659D7;
  font-weight: bold;
}

.con_access #train .box_detail .time ul li p .txt_red {
  color: #BA2828;
  font-weight: bold;
}

.con_access #train .box_detail .time ul li p .txt_big {
  font-size: 150%;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #train .box_detail .time ul li p .txt_big {
    font-size: 2.5vw;
  }
}

@media screen and (max-width: 736px) {
  .con_access #train .box_detail .time {
    float: none;
    margin: 0 auto;
    width: 90%;
  }

  .con_access #train .box_detail .time h3 {
    font-size: 5vw;
  }

  .con_access #train .box_detail .time ul li p {
    font-size: 5vw;
  }

  .con_access #train .box_detail .time ul li p .txt_big {
    font-size: 6.5vw;
  }
}


/*------------------------------------
      #bus
------------------------------------*/
.con_access #bus {
  margin-bottom: 5%;
}

.con_access #bus h2 {
  margin-bottom: 2%;
}

@media screen and (max-width: 736px) {
  .con_access #bus h2 {
    margin-bottom: 5%;
  }
}

/*  .box_lead  */
.con_access #bus .box_lead {
  margin: 0 auto 5%;
  overflow: hidden;
  width: calc( 850 / 910 * 100% );
}

.con_access #bus .box_lead figure {
  float: left;
  width: calc( 512 / 872 * 100% );
}

@media screen and (max-width: 736px) {
  .con_access #bus .box_lead {
    margin-bottom: 7%;
  }

  .con_access #bus .box_lead figure {
    float: none;
    margin-bottom: 3%;
    width: 100%;
  }
}

.con_access #bus .box_lead .lead {
  float: right;
  width:  calc( 320 / 872 * 100% );
}

.con_access #bus .box_lead .lead p {
  margin-bottom: 10%;
}

.con_access #bus .box_lead .lead table {
  border: 1px solid #0084C1;
  border-collapse: collapse;
  margin: 0 auto;
  width:  calc( 280 / 315 * 100% );
}

.con_access #bus .box_lead .lead table th {
  background: #EEF9FF;
  border: 1px solid #0084C1;
  padding: 3% 0;
  width: 20%;
}

.con_access #bus .box_lead .lead table th img {
  width: calc( 17 / 55 * 100%);
}

.con_access #bus .box_lead .lead table td {
  border: 1px solid #0084C1;
  padding-left: 2em; 
  vertical-align: middle;
}

@media screen and (max-width: 736px) {
  .con_access #bus .box_lead .lead {
    float: none;
    margin-bottom: 5%;
    width: 100%;
  }

  .con_access #bus .box_lead .lead p {
    margin-bottom: 3%;
    padding: 0 0.5em;
  }
}

/*  .box_busstop  */
.box_busstop {
  margin: 0 auto 5%;
  width: calc( 800 / 910 * 100% );
}

@media screen and (max-width: 736px) {
  .box_busstop {
    margin-bottom: 10%;
  }
}

.box_busstop .ttl {
  background: #EDF6FF;
  border: 1px solid #174F8E;
  margin-bottom: 0.5em;
  position: relative;
}

.box_busstop.box_red .ttl {
  background: #FFF1F1;
  border: 1px solid #C83535;
}

.box_busstop .ttl span {
  background: #174F8E;
  color: #fff;
  display: inline-block;
  font-size: 110%;
  font-weight: bold;
  padding: 1% 0 1% 3em;
  position: relative;
  width: 16em;
}

.box_busstop.box_red .ttl span {
  background: #C83535;
}

.box_busstop .ttl span:before {
  background: url(../image/ico-white-no1.png) center center no-repeat;
  background-size: 1.7em;
  bottom: 0;
  content: "";
  display: block;
  left: 0.7em;
  position: absolute;
  top: 0;
  width: 1.7em;
}

.box_busstop .ttl span.ico_no2:before {
  background: url(../image/ico-white-no2.png) center center no-repeat;
  background-size: 1.7em;
  bottom: 0;
  content: "";
  display: block;
  left: 0.7em;
  position: absolute;
  top: 0;
  width: 1.7em;
}

.box_busstop .ttl span.ico_no3:before {
  background: url(../image/ico-white-no3.png) center center no-repeat;
  background-size: 1.7em;
  bottom: 0;
  content: "";
  display: block;
  left: 0.7em;
  position: absolute;
  top: 0;
  width: 1.7em;
}

.box_busstop .ttl span:after {
  background: url(../image/deco-ttl-busstop-blue.png) center center no-repeat;
  background-size: 85%;
  bottom: 0;
  content: "";
  display: block;
  right: -9%;
  position: absolute;
  top: 0;
  width: 10%;
}

.box_busstop.box_red .ttl span:after {
  background: url(../image/deco-ttl-busstop-red.png) center center no-repeat;
  background-size: 85%;
}

.box_busstop .ttl h3 {
  display: inline-block;
  font-size: 110%;
  padding-left: 2em;
}

.box_busstop .ttl .btn {
  background: #2471c8; /* Old browsers */
  background: -moz-linear-gradient(top, #2471c8 0%, #013e84 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #2471c8 0%,#013e84 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #2471c8 0%,#013e84 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 2px solid #01418A;
  border-radius: 5px;
  margin: 0;
  right: 2%;
  position: absolute;
  top: 15%;
  width: 8em;
}

.box_busstop.box_red .ttl .btn {
  background: #AE0000; /* Old browsers */
  background: -moz-linear-gradient(top, #DE3A3A 0%, #AE0000 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #DE3A3A 0%,#AE0000 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #DE3A3A 0%,#AE0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border: 2px solid #BA2828;
}

.box_busstop .ttl .btn:hover {
  opacity: .8;
  transition: .5s all;
}

.box_busstop .ttl .btn a {
  color: #fff;
  font-size: 100%;
  display: block;
  position: relative;
  text-align: center;
}

.box_busstop .ttl .btn a:before {
  border: 0.3em solid transparent;
  border-left: 0.3em solid #fff;
  box-sizing: border-box;
  content: "";
  display: inline-block;
  left: 1em;
  height: 0.7em;
  margin-top: -0.35em;
  position: absolute;
  top: 50%;
  width: 0.7em;
}

.box_busstop .ttl .btn a:hover {
  text-decoration: none;
}

@media screen and (max-width: 736px) {
  .box_busstop .ttl {
    display: block;
    overflow: hidden;
    padding-bottom: 2%;
  }
  .box_busstop .ttl span {
    font-size: 4.5vw;
    margin-bottom: 2%;
    padding: 2% 0 2% 3em;
    width: 100%;
  }
  .box_busstop .ttl span:after {
    display: none;
  }

  .box_busstop .ttl h3 {
    font-size: 5vw;
    padding-left: 0.5em; 
  }

  .box_busstop .ttl .btn {
    display: inline-block;
    float: right;
    margin: 0;
    position: relative;
    width: 35vw;
  }
  .box_busstop .ttl .btn a {
    font-size: 4vw;
  }
}

.box_busstop p {
  margin: 0 auto 0.7em;
  width: calc( 670 / 800 * 100% );
}

@media screen and (max-width: 736px) {
  .box_busstop p {
    width: 90%;
  }
}


/*table*/
.box_busstop table {
  border: 2px solid #174F8E;
  border-collapse: collapse;
  margin: 0 auto 1%;
  vertical-align: middle;
  width: calc( 775 / 800 * 100% );
}

.box_busstop.box_red table {
  border: 2px solid #B23C3C;
}

.box_busstop table tr {
  width: 100%;
}

.box_busstop table th,
.box_busstop table td {
  box-sizing: border-box;
  padding: 1% 0.5em;
}

.box_busstop table thead th {
  background: #2969B1;
  border-right: 1px solid #fff;
  color: #fff;
  font-size: 110%;
  padding: 7px 0.3em;
  text-align: center;
  width: calc( 150 / 775 * 100%);
}

.box_busstop.box_red table thead th {
  background: #C74F4F;
}

.box_busstop table thead th:nth-of-type(2) {
  width: calc( 167 / 775 * 100% );
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .box_busstop table thead th:nth-of-type(2) {
    width: calc( 220 / 775 * 100% );
  }
}

.box_busstop table thead th:last-of-type {
  width: calc( 458 / 775 * 100% );
}

.box_busstop table tbody {
  text-align: left;
}

.box_busstop table tbody th {
  border-top: 1px solid #174F8E;
  font-weight: normal;
  vertical-align: middle;
  text-align: center;
}

.box_busstop.box_red table tbody th {
  border-top: 1px solid #B23C3C;
}

.box_busstop table tbody tr:last-of-type th {
  border-bottom: 1px solid #174F8E;
}

.box_busstop.box_red table tbody tr:last-of-type th {
  border-top: 1px solid #B23C3C;
}

.box_busstop table tbody tr td {
  border: 1px solid #174F8E;
  vertical-align: middle;
}

.box_busstop.box_red table tbody tr td {
  border: 1px solid #B23C3C;
}

.box_busstop table tbody tr td:first-of-type {
  text-align: center;
}

.box_busstop table tbody tr td.destination {
  font-feature-settings: "palt";
  font-size: 95%;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .box_busstop table tbody tr td.destination {
    font-size: 2vw;
  }
}

.box_busstop table tbody tr td.stopping {
  font-size: 90%;
  padding: 1% 1em;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .box_busstop table tbody tr td.stopping {
    font-size: 2vw;
  }
}


@media screen and (max-width: 740px) {
  .box_busstop table {
    border: none;
  }

  .box_busstop.box_red table {
    border: none;
  }

  .box_busstop table tr {
    display: block;
    width: 100%;
  }

  .box_busstop table thead {
    display: none;
  }

  .box_busstop table tbody {
    display: block;
    overflow: hidden;
    width: 100%;
  }
  .box_busstop table tbody th,
  .box_busstop table tbody td {
    display: block;
    padding: 0;
    overflow: hidden;
    width: 100%;
  }

  .box_busstop table tbody th {
    border: 1px solid #174F8E;
    padding: 0 0 1.5%;
    text-align: center;
  }

  .box_busstop.box_red table tbody th {
    border: 1px solid #B23C3C;
  }

  .box_busstop table tbody th:before {
    background: #174F8E;
    content: "线路名称";
    color: #fff;
    font-size: 5vw;
    display: block;
    margin-bottom: 1.5%;
    padding: 1% 0;
    width: 100%;
  }

  .box_busstop.box_red table tbody th:before {
    background: #B23C3C;
  }

  .box_busstop table tbody tr:last-of-type th {
    border-bottom: none;
  }

  .box_busstop table tbody tr td {
    border-top: none;
    padding-bottom: 1%; 
  }

  .box_busstop table tbody tr td:last-of-type {
    border-bottom: none;
  }

  .box_busstop table tbody tr td.destination:before {
    background: #174F8E;
    content: "终点站";
    color: #fff;
    font-size: 5vw;
    display: block;
    margin-bottom: 1.5%;
    padding: 1% 0;
    width: 100%;
  }

  .box_busstop.box_red table tbody tr td.destination:before {
    background: #B23C3C;
  }

  .box_busstop table tbody tr td.stopping {
    border-bottom: 1px solid #174F8E;
    margin-bottom: 5%;
    padding: 0;
  }

  .box_busstop.box_red table tbody tr td.stopping {
    border-bottom: 1px solid #B23C3C;
  }

  .box_busstop table tbody tr td.stopping:before {
    background: #174F8E;
    content: "停靠站";
    color: #fff;
    font-size: 5vw;
    display: block;
    margin-bottom: 1.5%;
    padding: 1% 0;
    text-align: center;
    width: 100%;
  }

  .box_busstop.box_red table tbody tr td.stopping:before {
    background: #B23C3C;
  }

  .box_busstop table tbody tr td span {
    display: block;
    padding: 0 1em 2% 1em;
  }
}

.box_busstop small {
  display: block;
  font-size: 90%;
  text-align: right;
}

@media screen and (max-width: 740px) {
  .box_busstop small {
    padding-left: 1em;
    text-align: left;
    text-indent: -1em;
  }
}



/*------------------------------------
      #car
------------------------------------*/
.con_access #car {
  margin-bottom: 5%;
}

.con_access #car h2 {
  margin-bottom: 2%;
}

.con_access #car p {
  margin: 0 auto 3%;
  width: 85%;
}

.con_access #car figure {
  margin: 0 auto 3%;
  width: calc( 800 / 910 * 100%);
}

@media screen and (max-width: 736px) {
  .con_access #car h2 {
    margin-bottom: 5%;
  }
  .con_access #car {
    margin-bottom: 10%;
  }

  .con_access #car p {
    width: 90%;
  }

  .con_access #car figure {
    margin-bottom: 10%;
    width: 95%;
  }
}

.con_access #car .box_ic {
  background: #EEF9FF;
  margin: 0 auto;
  width: calc( 665 / 910 * 100%);
}

.con_access #car .box_ic h3 {
  background: #174F8E;
  color: #fff;
  font-family: 'Noto Serif TC', serif;
  font-size: 150%;
  font-weight: normal;
  padding: 1% 1em;
}

.con_access #car .box_ic ul li {
  font-family: 'Noto Serif TC', serif;
  font-size: 110%;
  line-height: 1.5em;
  padding: 3% 0 3% 5em;
  position: relative;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #car .box_ic ul li {
    font-size: 2vw;
  }
}

.con_access #car .box_ic ul li:before {
  background: url(../image/ico-red-no1.png) center center no-repeat;
  background-size: 2.5em;
  bottom: 0;
  content: "";
  display: block;
  left: 1.5em;
  position: absolute;
  top: 0;
  width: 3em;
}

.con_access #car .box_ic ul li:nth-child(2):before {
  background: url(../image/ico-red-no2.png) center center no-repeat;
  background-size: 2.5em;
}

.con_access #car .box_ic ul li:last-child:before {
  background: url(../image/ico-red-no3.png) center center no-repeat;
  background-size: 2.5em;
}

.con_access #car .box_ic ul li .txt_big {
  font-size: 150%;
}

@media screen and (max-width: 900px) and (min-width: 737px) {
  .con_access #car .box_ic ul li .txt_big {
    font-size: 2.7vw;
  }
}

.con_access #car .box_ic ul li a:hover {
  border-bottom: 1px solid #1239CA;
  padding-bottom: 1px;
  text-decoration: none;
}

.con_access #car .box_ic ul li .txt_blue {
  color: #1239CA;
}


@media screen and (max-width: 736px) {
  .con_access #car .box_ic {
    width: 90%;
  }

  .con_access #car .box_ic h3 {
    font-size: 6vw;
  }

  .con_access #car .box_ic ul li {
    font-size: 4vw;
    padding-left: 12vw;
  }

  .con_access #car .box_ic ul li:before,
  .con_access #car .box_ic ul li:nth-child(2):before,
  .con_access #car .box_ic ul li:last-child:before {
    background-size: 7vw;
    left: 3%;
    width: 7vw;
  }

  .con_access #car .box_ic ul li .txt_big {
    font-size: 6vw;
  }
}


/*------------------------------------
      .bnr
------------------------------------*/
.bnr {
  margin: 0 auto 7%;
  width: calc( 780 / 1000 * 100% );
}

.bnr a {
  display: block;
}

.bnr a:hover {
  opacity: .8;
  transition: .5s all;
}

@media screen and (max-width: 736px) {
  .bnr {
    margin-bottom: 10%;
    width: 90%;
  }
}