/* Match the desktop artwork's proportions instead of the viewport height. */
@media (min-width: 769px) {
  .l-main > .l-hero {
    width: 100%;
    max-width: 1440px;
    height: auto;
    min-height: 0;
    aspect-ratio: 2880 / 1612;
    margin-inline: auto;
    background-size: 100% auto;
    background-position: center top;
  }

  .l-hero .l-hero-txtbox {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    gap: clamp(12px, 1.25vw, 18px);
  }
  .l-hero .l-hero-txtbox__intro {
    width: min(46.8rem, 65%);
    height: auto;
    min-height: 28px;
  }
  .l-hero .l-hero-txtbox__intro p { font-size: clamp(14px, 1.39vw, 20px); }
  .l-hero .l-hero-txtbox__intro p span { font-size: clamp(19px, 1.875vw, 27px); }
  .l-hero .l-hero-txtbox__msg { font-size: clamp(26px, 3.333vw, 48px); }
  .l-hero .l-hero-txtbox__msg span { font-size: clamp(36px, 4.722vw, 68px); }
  .l-hero .l-hero-txtbox__h1 { font-size: clamp(12px, 1.18vw, 17px); }

  .l-hero .l-hero__figure01 {
    left: 4%;
    bottom: 4%;
    width: 38.125%;
  }
  .l-hero .hero-payment { width: 100%; }
  .l-hero .l-hero__figure02 {
    right: 4%;
    bottom: 4%;
    width: 32.083333% !important;
  }
  .l-hero .l-hero__figure02 img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }
}