@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600&family=Noto+Serif+JP:wght@300;600&display=swap");
.map-contents { margin: 8rem 0 4rem; margin-inline: auto; }

.page-name { position: relative; font-family: 'EB Garamond', serif; font-weight: 300; font-style: normal; letter-spacing: 0.05em; -webkit-font-smoothing: antialiased; font-size: clamp(38px, calc(2vw + 32px), 50px); color: #3D3F54; width: fit-content; margin-inline: auto; }
.page-name .icon { position: absolute; width: clamp(40px, calc(10vw + 4px), 109px); translate: -110% -55%; }

.main-copy { font-feature-settings: "palt"; font-size: clamp(24px, calc(1vw + 19px), 34px); text-align: center; line-height: 1.6; margin-top: 2rem; }

[class$="-map"] { margin-top: 8rem; }
[class$="-map"] .name { font-feature-settings: "palt"; letter-spacing: 0.2em; color: #3D3F54; font-size: clamp(22px, calc(1vw + 19px), 28px); text-align: center; }
[class$="-map"] .img { margin-top: 3rem; }

.car-information { color: #fff; padding: 1.5rem 5rem; background: #3D3F54; background: linear-gradient(90deg, #3d3f54 0%, #6c9cb8 50%, #3d3f54 100%); text-align: center; margin-top: 4rem; }
.car-information .title { display: flex; justify-content: center; align-items: center; column-gap: 1.5rem; font-size: 2rem; }
.car-information .title .icon { max-width: 44px; }
.car-information .address { font-size: 2.8rem; font-weight: bold; border-top: 1px solid #fff; padding-top: 1rem; margin-top: 1rem; letter-spacing: 0.1em; }

.utility-nav { margin-top: 4rem; max-width: 840px; margin-inline: auto; }
.utility-nav ul { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }
.utility-nav ul li { font-size: 2rem; font-feature-settings: "palt"; letter-spacing: 0.1em; text-align: center; }
.utility-nav ul li a { border: 2px solid #3D3F54; padding: 1.5rem 1rem; display: block; }
.utility-nav ul li a:hover { opacity: .8; }
.utility-nav ul li.googlemap a { color: #3D3F54; }
.utility-nav ul li.print a { background-color: #3D3F54; color: #fff; }

@media screen and (max-width: 930px) { .utility-nav ul { column-gap: 2rem; } }
@media screen and (max-width: 640px) { .map-contents { margin-top: 3rem; }
  [class$="-map"] { margin-top: 4rem; }
  [class$="-map"] .title { font-size: 1.8rem; }
  [class$="-map"] .img { margin-top: 1rem; }
  .car-information { color: #fff; padding: 1rem 2rem; }
  .car-information .title { font-size: 1.8rem; column-gap: 1rem; }
  .car-information .title .icon { max-width: 34px; }
  .car-information .address { font-size: 2.4rem; }
  .utility-nav { margin-top: 2rem; }
  .utility-nav ul { grid-template-columns: 1fr; row-gap: 1rem; }
  .utility-nav ul li { font-size: 1.8rem; } }