@charset "UTF-8";

#head {
  background: #4c5868;
}
.head-box {
  width: 1600px;
  margin: 0 auto;
  padding: 20px 10px;
}
.main-box {
  padding: 80px 0;
  background: url(../images/back-blue2.jpg) left bottom repeat-x, url(../images/back-white.jpg) left top repeat;
}
.main-content {
  width: 1600px;
  margin: 0 auto 100px auto;
  padding: 0 2%;
  color: #001730;
}
h3 {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}
h3::after {
  width: 0;
  height: 0;
}
.border-t {
  border-top: solid 1px #001730;
}
.border-b {
  border-bottom: solid 1px #001730;
}
summary {
  position: relative;
  padding: 20px 0;
  font-size: 20px;
  font-weight: bold;
}
details summary span {
  position: absolute; top: 20px; right: 0;
  color: #001730;
  font-size: 30px;
  text-align: center;
}
summary span:before {
  content: "+";
}
details[open] summary span:before,
summary details[open] summary span:before {
  content: "−";
}
.access-content {
  width: 1600px;
  margin: 0 auto;
  padding: 0 2%;
  color: #001730;
}
.route-box {
  justify-content: space-around;
}
.access-route {
  margin: 0 10px 40px 10px;
  flex-grow: 1;
  text-align: center;
}
.start, .point, .goal {
  padding: 20px;
}
.start {
  background: #fff;
  border: solid 1px #8b9faa;
}
.time {
  min-width: 160px;
  padding: 40px 0;
  background: url(../images/access/line.jpg) center top repeat-y;
}
.time p {
  margin: 0; padding: 0;
  background: #fff;
}
.point {
  background: #677e8c;
  color: #fff;
}
.goal {
  background: #00293f;
  color: #fff;
}

@media screen and (max-width:1600px) {
  .head-box { width: 100%; }
  .main-content, .access-content { width: 100%; }
  iframe { height: 400px; }
}


@media screen and (max-width:1200px) {
}


@media screen and (max-width:1023px) { /* Tablet */
}


@media screen and (max-width:959px) { /* SP */
}