/* ============================================================
   [CD/AD監修] TOP MV・promises ／ 症状ページMV 大画面レイアウト最終調整
   独立CSS（style.css の後に読み込む）
   ============================================================ */

.hero { min-height: auto; }
.hero > .container { max-width: 1360px; }
.promises > .container { max-width: 1200px; }

@media (min-width: 1024px) {
  .hero {
    padding-top: clamp(144px, 9vw, 172px);
    padding-bottom: clamp(76px, 6vw, 104px);
  }
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
  }
  .hero-text { max-width: 600px; padding: 0; }
  .hero-image {
    width: 100%;
    max-width: 600px;
    justify-self: end;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: visible;
  }
  .hero-image-inner { width: 100%; height: 100%; }
  .hero-image .ph { width: 100%; height: 100%; min-height: 0; max-height: none; }
  .hero-image .location-card { position: absolute; right: 16px; bottom: 16px; margin: 0; }
  .promises-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(32px, 3.5vw, 56px);
  }
  .promise p { max-width: 34em; }
}

@media (min-width: 1440px) {
  .hero-inner { max-width: 1320px; }
  .promises > .container { max-width: 1200px; }
}

@media (min-width: 1800px) {
  .hero { padding-top: 168px; padding-bottom: 112px; }
  .hero-inner { max-width: 1360px; gap: 80px; }
}

/* ============================================================
   症状ページMV：TOPと揃えた大画面レイアウト
   ============================================================ */
.symptom-hero > .container { max-width: 1360px; }

@media (min-width: 1024px) {
  .symptom-hero {
    padding-top: clamp(144px, 9vw, 172px);
    padding-bottom: clamp(72px, 6vw, 96px);
  }
  .symptom-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(440px, 1.06fr);
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
  }
  .symptom-hero-text { max-width: 600px; padding: 0; }
  .symptom-hero-image {
    width: 100%;
    max-width: 600px;
    justify-self: end;
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .symptom-hero-image .ph { width: 100%; height: 100%; min-height: 0; max-height: none; }
}

@media (min-width: 1440px) {
  .symptom-hero-inner { max-width: 1320px; }
}

@media (min-width: 1800px) {
  .symptom-hero { padding-top: 168px; padding-bottom: 104px; }
  .symptom-hero-inner { max-width: 1360px; gap: 80px; }
}