@charset "utf-8";

main h2 { font-size: min(calc((24 / var(--width)) * 100vw), 2.4rem); margin-bottom: 16px; }
main h2.prain::before { background: url("../img/access/icon_plane.png") center center no-repeat; background-size: contain; width: 40px; height: 40px; display: inline-block; content: ''; vertical-align: middle; margin-right: 12px; }
main h2.train::before { background: url("../img/access/icon_train.png") center center no-repeat; background-size: contain; width: 24px; height: 24px; display: inline-block; content: ''; vertical-align: middle; margin-right: 12px; }
main h2.car::before { background: url("../img/access/icon_car.png") center center no-repeat; background-size: contain; width: 32px; height: 32px; display: inline-block; content: ''; vertical-align: middle; margin-right: 12px; }
main h3 { font-size: 20px; margin-bottom: 8px; }

.section { max-width: 900px; margin-left: auto; margin-right: auto; }
.section:not(:last-child) { margin-bottom: 40px; }
.root__wrap { display: flex; align-items: center; padding: 16px; background-color: #f1f1f1; }
.start, .station, .goal { text-align: center; width: 20%; font-size: 1.6rem; line-height: 1; }
.start { background: linear-gradient(-135deg, rgba(255,  157, 57, 0.7) 0%, rgba(251, 217, 87, 0.7) 100%); border-radius: 3px; color: #fff; padding: 15px; height: 100%; text-align: center; }
.start > span { font-size: 70%; }
.root { width: 30%; }
.root dl { text-align: center; }
.root dl dt { font-size: 1.2rem; }
.root dl dd { font-size: 1.2rem; padding: 0 16px; }
.root dl dd > span { color: #63B5B1; font-size: 16px; font-weight: bold; margin: 0 4px; display: inline-block; }
.station { background-color: #fff; border: 1px solid #333; border-radius: 3px; color: #333; padding: 16px; height: 100%; }
.goal { background-color: var(--ac); border-radius: 3px; color: #fff; padding: 16px; height: 100%; }
@media screen and (min-width: 641px) {
  .root dl dt { border-bottom: 1px solid #333; padding: 0 16px 4px; }
}
@media screen and (max-width: 640px) {
  .root__wrap { flex-wrap: wrap; }
  .root__wrap:not(:last-child) { margin-bottom: 4%; }
  .start, .station, .goal, .root { width: 100%; }
  .root dl { display: flex; align-items: center; height: 100%; }
  .root dl dt, .root dl dd { width: 100%; padding: 16px 0; }
  .root dl dt { border-right: 1px solid #333; text-align: right; padding-right: 10px; }
  .root dl dd { text-align: left; padding-left: 10px; }
}

.root dl dt::before { content: ''; display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 4px; }
.car::before { background: url("../img/access/icon_car.png") center center no-repeat; background-size: contain; }
.train::before { background: url("../img/access/icon_train.png") center center no-repeat; background-size: contain; }
.prain::before { background: url("../img/access/icon_plane.png") center center no-repeat; background-size: contain; }
.fune::before { background: url("../img/access/icon_fune.png") center center no-repeat; background-size: contain; width: 20px; height: 20px; }

.maps { display: flex; flex-wrap: wrap; align-items: center; height: 400px; background: linear-gradient(-135deg, rgba(255,  157, 57, 0.7) 0%, rgba(251, 217, 87, 0.7) 100%); margin-top: 80px; }
.maps #map { width: 50%; height: 100%; }
.maps #map iframe { width: 100%; height: 100%; }
.maps .maps__txt { font-size: 1.6rem; line-height: 1.5; width: 50%; padding: 32px; color: #fff; box-sizing: border-box; }
.maps .maps__txt strong { font-size: min(calc((24 / var(--width)) * 100vw), 2.4rem); line-height: 1.3; }
.maps .maps__txt strong > small { font-size: 70%; font-weight: normal; }
.maps .maps__txt address { margin-top: 16px; font-style: normal; padding: 16px; border: 1px solid #fff; }
@media screen and (max-width: 640px) {
  .maps { height: auto; }
  .maps #map, .maps .maps__txt { width: 100%; }
  .maps #map { height: 240px; }
}