.home-hero {
  position: relative;
  overflow: hidden;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 85rem);
  @media (min-width: 1200px) {
    padding-right: 5rem;
    padding-left: 5rem;
  }
  
  & .home-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    mask-image: url("/system_panel/uploads/images/wave.png");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    &.home-hero__wave--paper-red {
      height: 17.5rem;
      mask-image: url("/system_panel/uploads/images/wave-reverse.png");
      background-image: url("/system_panel/uploads/images/paper-red.jpg");
    }
    &.home-hero__wave--paper-green {
      height: 5.5rem;
      background-image: url("/system_panel/uploads/images/paper-green.jpg");
    }
    @media (min-width: 1200px) {
      &.page-hero__wave--paper-cream {
        height: 10rem;
      }
      &.page-hero__wave--paper-green {
        height: 10rem;
      }
    }
  }
  
  & .home-hero__image {
    position: absolute;
    inset: 0;
    &::after {
      pointer-events: none;
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(180deg, rgba(64, 49, 40, 0.35) 0%, rgba(64, 49, 40, 0.35) 15.23%, rgba(64, 49, 40, 0.00) 25.96%, rgba(64, 49, 40, 0.00) 100%);
    }
    & img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
  
  & .home-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    line-height: 1.25;
    text-align: center;
    color: var(--snow);
    text-shadow: var(--text-shadow);
    & .home-hero__title-heading {
      letter-spacing: 0.24em;
      font-family: var(--font-serif);
      font-size: 1.5rem;
    }
    & .home-hero__title-text {
      letter-spacing: 0.12em;
      font-weight: 500;
      font-family: var(--font-display-ja);
      font-size: 0.75rem;
    }
    @media (min-width: 768px) {
      & .home-hero__title-heading {
        font-size: 3rem;
      }
      & .home-hero__title-text {
        font-size: 1rem;
      }
    }
    @media (min-width: 1024px) {
      & .home-hero__title-heading {
        font-size: 3.5rem;
      }
      & .home-hero__title-text {
        font-size: 1.5rem;
      }
    }
    @media (min-width: 1200px) {
      & .home-hero__title-heading {
        font-size: 4rem;
      }
      & .home-hero__title-text {
        font-size: 1.5rem;
      }
    }
  }
  
  & .home-hero__news {
    position: absolute;
    bottom: 4.375rem;
    left: 0;
    width: 100%;
    background-color: var(--snow);
    box-shadow: var(--elevation-1);
    @media (min-width: 768px) {
      left: 2.5rem;
      width: 22.5rem;
    }
    @media (min-width: 1200px) {
      left: 7.5rem;
    }
  }
}

.title-bg-typo.title-bg-typo--concept {
  color: var(--dark-red);
  top: 5rem;
  right: -2rem;
  @media (min-width: 768px) {
    top: 10rem;
    right: 2rem;
  }
  @media (min-width: 1024px) {
    top: 15rem;
    right: -2rem;
  }
}

.home-concept-images {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 2fr 3fr;
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    ". a"
    "b a"
    "b a"
    "c a"
    "c a";
  height: 17.5rem;
  @media (min-width: 768px) {
    height: 40rem;
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    &:first-child {
      grid-area: a;
    }
    &:nth-child(2) {
      grid-area: b;
    }
    &:last-child {
      grid-area: c;
    }
  }
}