@charset "UTF-8";
/* CSS Document */
#billboard {overflow: hidden;position: relative;padding-top: 16em;}
#billboard::after {display: block;content: '';width: 100%;height: 100%;background: teal url("../img/common/bg01_pc.webp") no-repeat 100% 0 / cover;background-blend-mode: soft-light;position: absolute;top: 0;left: 0;z-index: 1;pointer-events: none;}
#billboard h2 {position: absolute;bottom: 1.5em;left: 0;right: 0;z-index: 2;text-align: center;font-weight: 600;font-size: 150%;letter-spacing: 0.15em;color: #fff;}
#billboard h2 small {display: block;font-weight: 500;font-size: 133.33%;opacity: 0.5;}

.block-access-01 h2 {margin-bottom: 1em;text-align: center;font-size: 200%;font-weight: 800;letter-spacing: 0.15em;color: #006463;}
.block-access-01 h2 + p {text-align: center;line-height: 2;font-size: 137.5%;letter-spacing: 0.15em;}
.block-access-01 h2 + p strong {line-height: 1;font-weight: 500;font-size: 150%;color: #006463;}
.block-access-01 .ruby {margin-top: 1em;text-align: center;line-height: 2;letter-spacing: 0.15em;opacity: 0.6;}
.block-access-01 .ruby strong {display: block;margin-bottom: 0.5em;font-size: 125%;color: #006463;opacity: 0.8;}
.block-access-01 .map {position: relative;margin-top: 5em;padding-top: 50%;}
.block-access-01 .map iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.block-access-01 .grid-list > div figcaption {margin-top: 0.5em;}
.block-access-01 .grid-list > div span {display: block;white-space: nowrap;}
.block-access-01 .grid-list > div span strong {font-size: 125%;color: #006463;}
.block-access-01 .grid-list > div span small {font-size: 75%;}
.block-access-01 .grid-list > div span small::before {content: " / ";}
.block-access-01 .container {width: calc(100% - 4em);max-width: 1200px;margin: 0 auto;padding: 5em 0;}

@media only screen and (min-width: 768px) {
  .block-access-01 .grid-list {display: flex;flex-wrap: wrap;justify-content: space-between;}
  .block-access-01 .grid-list > div {width: calc(20% - 1em);margin-top: 2em;}
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .block-access-01 .grid-list > div {width: calc(25% - 1em);}
  .block-access-01 .grid-list::after {content: "";display: block;width: calc(25% - 1em);}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .block-access-01 .grid-list > div {width: calc(33.33% - 1em);}
  .block-access-01 .grid-list::after {display: none;}
}
@media only screen and (max-width: 767px) {
  .block-access-01 h2 {font-size: 150%;}
  .block-access-01 h2 + p {font-size: 125%;letter-spacing: 0;}
  .block-access-01 .map {padding-top: 150%;}
  .block-access-01 .grid-list > div {margin-top: 2em;}
}
@media only screen and (max-width: 767px) and (orientation: landscape) {}