.hero {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  align-items: center;
  gap: 64px;
  padding-block: 56px 88px;
}

.hero__content { min-width: 0; padding-left: 28px; }
.hero__title { font-size: clamp(40px, 4.65vw, 72px); font-weight: 700; letter-spacing: 0.015em; line-height: 1.43; }
.hero__title span { display: block; white-space: nowrap; }

.hero__description { margin-top: 42px; font-size: clamp(16px, 1.65vw, 24px); font-weight: 500; line-height: 1.9; }
.hero__description::before { display: block; width: 72px; height: 5px; margin-bottom: 36px; background: var(--color-accent); content: ""; }
.hero__description span { display: block; }
.hero__button { margin-top: 56px; font-size: clamp(16px, 1.65vw, 24px); }
.hero__button svg { width: 32px; height: 20px; flex-shrink: 0; }
.hero__visual { min-width: 0; }
.hero__visual img { width: 100%; height: auto; aspect-ratio: 1.02; object-fit: cover; }

@media (max-width: 1200px) {
  .hero { gap: 40px; padding-block: 40px 72px; }
  .hero__content { padding-left: 0; }
  .hero__description { margin-top: 30px; }
  .hero__description::before { margin-bottom: 26px; }
  .hero__button { gap: 18px; margin-top: 36px; padding: 18px 26px; }
}

@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 48px; padding-block: 32px 56px; }
  .hero__title { font-size: 52px; }
  .hero__description { font-size: 19px; }
  .hero__button { font-size: 19px; }
  .hero__visual img { aspect-ratio: 1.2; }
}

@media (max-width: 600px) {
  .hero { gap: 40px; padding-top: 30px; }
  .hero__title { font-size: clamp(32px, 8.8vw, 48px); line-height: 1.48; letter-spacing: 0; }
  .hero__description { margin-top: 26px; font-size: 15px; line-height: 2; }
  .hero__description::before { width: 48px; height: 4px; margin-bottom: 24px; }
  .hero__button { max-width: 100%; gap: 18px; margin-top: 32px; padding: 18px 24px; font-size: 16px; }
  .hero__button svg { width: 26px; }
  .hero__visual img { aspect-ratio: 1; }
}

/* 高さが低いPCでも、主な案内と予約ボタンを最初の画面に収める。 */
@media (min-width: 801px) and (max-height: 820px) {
  .hero { padding-block: 24px 40px; }
  .hero__title { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.4; }
  .hero__description { margin-top: 24px; }
  .hero__description::before { margin-bottom: 24px; }
  .hero__button { margin-top: 32px; padding-block: 18px; }
  .hero__visual img { max-height: calc(100svh - 184px); }
}

/* 最終更新: 2026-11-03 20:22 */