.visit-surface { background: #f9f9ee; padding-bottom: clamp(64px, 9vw, 170px); }
.visit-hero { position: relative; display: grid; grid-template-columns: 32% 68%; height: 42vw; max-height: 810px; }
.visit-hero h1 { align-self: center; justify-self: center; margin: 60px 0 0; writing-mode: vertical-rl; color: var(--color-accent); font-size: clamp(20px, 2vw, 38px); font-weight: 500; letter-spacing: .15em; }
.visit-hero__photo { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.visit-hero__guide { position: absolute; width: 23%; left: 25%; bottom: -2%; }
.visit-intro, .visit-flow { margin-top: clamp(60px, 9vw, 170px); }
.visit-content h2 { text-align: center; margin: 0 0 5vw; font-size: clamp(18px, 1.6vw, 30px); line-height: 1.8; letter-spacing: .25em; }
.visit-content h2 > span { display: inline-block; padding-bottom: .25em; border-bottom: 4px solid var(--color-yellow); text-wrap: balance; }
.visit-intro__body { display: grid; grid-template-columns: 44% 44%; gap: 12%; align-items: center; width: 88%; margin-inline: auto; }
.visit-intro figure { margin: 0; }
.visit-intro figure img { width: 100%; }
.visit-intro figcaption { text-align: right; font-size: 11px; margin-top: 8px; }
.visit-intro p, .visit-steps p { font-size: clamp(14px, 1.1vw, 21px); line-height: 2; margin: 0; }
.visit-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6vw 3vw; list-style: none; margin: 0; padding: 2vw 0 0; }
.visit-steps img { width: 90%; margin-inline: auto; }
.visit-steps h3 { color: var(--color-yellow); text-align: center; font-size: clamp(18px, 1.6vw, 28px); letter-spacing: .12em; margin: 1.5vw 0 2vw; }
.visit-steps p { padding-inline: 8%; }
.visit-steps a { text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 767px) {
  .visit-hero { grid-template-columns: 28% 72%; height: 94vw; min-height: 340px; max-height: 440px; }
  .visit-hero h1 { font-size: 18px; margin-top: 44px; letter-spacing: .1em; }
  .visit-hero__guide { width: 35%; left: 23%; bottom: 0; }
  .visit-intro, .visit-flow { margin-top: 52px; }
  .visit-content h2 { font-size: 15px; letter-spacing: .1em; margin-bottom: 26px; }
  .visit-intro__body { width: 100%; grid-template-columns: 1fr; gap: 22px; }
  .visit-intro p, .visit-steps p { font-size: 14px; }
  .visit-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-top: 0; }
  .visit-steps h3 { font-size: 16px; margin: 14px 0; letter-spacing: .08em; }
  .visit-steps p { padding: 0; font-size: 13px; }
  .visit-steps img { width: 100%; }
}