.home-hero {
  padding-right: 30px;
  padding-left: 30px;
}

.home-hero-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-height: 820px;
  aspect-ratio: 1860 / 820;
  overflow: hidden;
  border-radius: 40px;
}

.home-hero-container .home-hero-body {
    position: absolute;
    inset: 0;
    display: grid;
  }

.home-hero-container .home-hero-body::before {
    position: absolute;
    inset: 0;
    display: grid;
    content: '';

    /* background: rgb(52 52 52 / 70%); */
  }

.home-hero-container .home-hero-movie > video {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

/* PC用動画：デスクトップサイズで表示 */

.home-hero-container .home-hero-movie > .pc-video {
      display: block;
    }

/* SP用動画：デスクトップサイズで非表示 */

.home-hero-container .home-hero-movie > .sp-video {
      display: none;
    }

.home-hero-container .hero-image-container {
    height: 820px;
  }

.home-hero-container .hero-image-container > picture {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.home-hero-container .hero-image-container .hero-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.home-hero-container .home-hero-catchphrase {
    position: absolute;
    top: 50%;
    left: 60%;
    width: calc((500 / 1860) * 100%);
    transform: translate(0, calc(-30% - 50px));
  }

.home-hero-container .home-hero-catchphrase > img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

.home-hero-container .scroll {
    position: absolute;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-auto-rows: auto;
    justify-items: center;
    width: 100%;
    height: 100px;
  }

.home-hero-container .scroll > p {
      font-size: 16px;
      font-weight: 700;
      line-height: 2;
      color: #fff;
    }

.home-hero-container .scroll > i:nth-of-type(1) {
      flex-shrink: 0;
      width: 10px;
      height: 10px;
      background: var(--color-primary-base);
      border-radius: 9999px;
    }

.home-hero-container .scroll > i:nth-of-type(2) {
      width: 2px;
      height: 72px;
      background: #fff;
    }

@media all and (max-width: 1079.98px) {
  .home-hero {
    padding-right: 20px;
    padding-left: 20px;
  }

  .home-hero-container {
    /* max-height: 484px; */

    /* aspect-ratio: 335 / 484; */
    max-height: 520px;
    aspect-ratio: 335 / 520;
    border-radius: 30px;

    /* SP用動画表示切り替え */
  }
      /* PC用動画：モバイルサイズで非表示 */
      .home-hero-container .home-hero-movie > .pc-video {
        display: none;
      }

      /* SP用動画：モバイルサイズで表示 */
      .home-hero-container .home-hero-movie > .sp-video {
        display: block;
      }

    .home-hero-container .scroll {
      display: none;
    }

    /* .home-hero-catchphrase {
      top: 50%;
      left: 50%;
      width: calc(100% - 100px);
      transform: translate(-60%, -50%);
    } */

    .home-hero-container .home-hero-catchphrase {
      /* inset: auto 7vw 7vw auto; */
      inset: auto auto 9% 8%;
      width: 75%;
      transform: none;
    }

    .home-hero-container .hero-image-container {
      height: 484px;
    }

      .home-hero-container .hero-image-container > picture {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .home-hero-container .hero-image-container .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
}

/* ----- */

/* .base-content-card-type-03 */

.base-content-card[data-card-type='03'] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.base-content-card[data-card-type='03'] .card-catchphrase {
    padding-right: 2em;
    font-size: 36px;
    line-height: 1.7;
  }

.base-content-card[data-card-type='03'] .card-body {
    display: grid;
    grid-auto-rows: max-content;
    gap: 40px 0;
  }

@media all and (max-width: 1079.98px) {
  /* .base-content-card-type-03 */
  .base-content-card[data-card-type='03'] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 20px;
  }

    .base-content-card[data-card-type='03'] .card-catchphrase {
      padding-right: 0;
      font-size: 24px;
      line-height: 1.7;
    }

    .base-content-card[data-card-type='03'] .card-body {
      display: grid;
      grid-auto-rows: max-content;
      gap: 20px 0;
    }

    .base-content-card[data-card-type='03'] .card-link {
      justify-self: flex-end;
    }
}