@charset "UTF-8";

/* Loaded after main.css so hero fixes are not blocked by cached @import files. */
.hero__lead-break-pc-first {
  display: none;
}

.hero__reserve-break {
  display: block;
}

@media (max-width: 767.98px) {
  .hero--top .hero__lead {
    white-space: normal !important;
  }

  .hero__lead-break-pc {
    display: none !important;
  }

  .hero__lead-break-pc-first {
    display: none !important;
  }

  .hero__lead-break-sp {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .hero__lead-break-pc-first {
    display: block !important;
  }

  .hero__lead-break-pc {
    display: block !important;
  }

  .hero__lead-break-sp {
    display: none !important;
  }

  .hero--top .hero__reserve-title {
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero.hero--top .hero__copy {
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
  }

  .hero.hero--top .hero__title {
    width: fit-content !important;
    max-width: clamp(390px, 48vw, 520px) !important;
    margin-left: clamp(-12px, -1.6vw, -6px) !important;
    gap: 9px !important;
    font-size: clamp(2.4rem, 1.9rem + 1.1vw, 3rem) !important;
    line-height: 1.16 !important;
  }

  .hero.hero--top .hero__title-line {
    padding: 7px 12px !important;
    border-radius: 7px !important;
  }
}

@media (min-width: 1024px) and (max-width: 1599.98px) {
  .hero--top .hero__copy {
    max-width: none !important;
  }

  .hero--top .hero__lead {
    left: clamp(48px, 5vw, 104px) !important;
    right: auto !important;
    top: clamp(216px, calc(18vw + 20px), 292px) !important;
    width: min(calc(100vw - 220px), 940px) !important;
    max-width: none !important;
    font-size: clamp(2rem, 1.54rem + 0.56vw, 2.42rem) !important;
    line-height: 1.58 !important;
    white-space: normal !important;
    transform: none !important;
  }

  .hero--top .hero__reserve {
    top: clamp(92px, 10vw, 176px) !important;
  }
}

@media (min-width: 1600px) {
  .hero--top .hero__copy {
    max-width: none !important;
  }

  .hero--top .hero__lead {
    left: clamp(74px, 5vw, 120px) !important;
    right: auto !important;
    top: clamp(258px, 16vw, 312px) !important;
    width: min(calc(100vw - 320px), 1100px) !important;
    max-width: none !important;
    font-size: clamp(2.4rem, 2.08rem + 0.32vw, 2.82rem) !important;
    line-height: 1.54 !important;
    white-space: normal !important;
    transform: none !important;
  }
}