.home-hero {
  position: relative;
  height: 56.25rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 2rem;
  padding-top: 10rem;
  &::before {
    content: "";
    aspect-ratio: 1600 / 438;
    width: 100%;
    position: absolute;
    top: calc(50% + 3.375rem);
    left: 0;
    transform: translateY(-50%);
    background-image: url("/system_panel/uploads/images/home-hero-wave.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  @media (min-width: 768px) {
    justify-content: center;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  @media (min-width: 1024px) {
    padding-left: 3.75rem;
    padding-right: 3.75rem;
  }
  @media (min-width: 1200px) {
    padding-left: 5rem;
    padding-bottom: 10rem;
    padding-right: 5rem;
  }
  
  & .home-hero__image {
    width: 25.5625rem;
    position: absolute;
    top: 5rem;
    right: -7rem;
    @media (min-width: 768px) {
      width: 30rem;
      top: -4rem;
    }
    @media (min-width: 1024px) {
      width: 34rem;
      top: -5rem;
    }
    @media (min-width: 1200px) {
      width: 51.0625rem;
      top: 1rem;
      right: -3.5rem;
    }
    & img {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1.1547;
      clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
      );
    }
    &::before {
      content: "";
      width: 95.3488372093%;
      aspect-ratio: 1 / 1.1547;
      clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
      );
      background-color: var(--light-gray);
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(-7.188703466%, -3.3370411568%);
    }
  }
  
  & .home-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    & .home-hero__title-catch {
      width: 98.8059701493%;
      transform: scale(0.99);
    }
    & .home-hero__title-text {
      width: 100%;
      max-width: 48.75rem;
      line-height: 2;
      font-size: 0.875rem;
    }
    @media (min-width :768px) {
      padding-left: 0;
      padding-right: 0;
      max-width: 35rem;
      & .home-hero__title-catch {
        width: 100%;
      }
      & .home-hero__title-text {
        font-size: 1.125rem;
      }
    }
    @media (min-width :1024px) {
      max-width: 40rem;
      & .home-hero__title-text {
        font-size: 1.25rem;
      }
    }
    @media (min-width :1200px) {
      max-width: 60rem;
      & .home-hero__title-text {
        font-size: 1.5rem;
      }
    }
  }
  
  & .home-hero__news {
    position: relative;
    background-color: var(--snow);
    width: 100%;
    &::before {
      content: "News";
      line-height: 1.25;
      letter-spacing: 0.16em;
      font-size: 1.5rem;
      color: var(--pale-light-blue);
      position: absolute;
      top: -0.875rem;
      left: -0.375rem;
    }
    @media (min-width: 768px) {
      position: absolute;
      bottom: 2.5rem;
      left: 2.5rem;
      width: 25rem;
    }
    @media (min-width: 1024px) {
      bottom: 3.75rem;
      left: 3.75rem;
    }
    @media (min-width: 1200px) {
      left: 5rem;
    }
  }
}

.home-intro-map {
  width: clamp(24.0625rem, 80.6481481481%, 54.4375rem);
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(47.4167623421%, -50.7115135834%);
}

.home-concept-illust {
  width: 100%;
  transform: scale(1.07);
}

.home-products-image-dec {
  position: absolute;
  &.home-products-image-dec--right {
    width: 6.9375%;
    right: 0;
    bottom: 0.375rem;
    transform: translateX(-207.2072072072%) scaleX(-1);
  }
  &.home-products-image-dec--left {
    width: 13.25%;
    bottom: 0;
    left: 0;
    transform: translate(127.358490566%, -58.064516129%);
  }
}

.home-business-images {
  position: relative;
  aspect-ratio: 679 / 698;
  width: 100%;
  max-width: 35rem;
  margin-left: auto;
  @media (min-width: 1024px) {
    position: absolute;
    max-width: 40rem;
    top: -8rem;
    right: -13.75rem;
  }
  @media (min-width: 1200px) {
    max-width: 42.4375rem;
    top: -11rem;
    right: -6.25rem;
  }
  & img {
    object-fit: cover;
    border-radius: 9999px;
    position: absolute;
    &:first-child {
      width: 71.1340206186%;
      top: 0;
      right: 0;
    }
    &:last-child {
      width: 57.4374079529%;
      bottom: 0;
      left: 0;
    }
  }
}

.home-business-hexagon {
  width: 40.8125rem;
  position: absolute;
  top: -7.5rem;
  right: -4.5rem;
  & img {
    width: 100%;
  }
}

.home-business-bee-path {
  width: 19.25rem;
  position: absolute;
  top: -13rem;
  right: -3.125rem;
  @media (min-width: 1024px) {
    top: -4.875rem;
    right: 26.8518518519%;
  }
}

.home-information-num {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.5rem 0.25rem;
  align-self: start;
  letter-spacing: 0.16em;;
  font-size: 1rem;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(circle, var(--ink) 1px, transparent 1px);
    background-position: bottom;
    background-size: 5px 1px;
    background-repeat: repeat-x;
  }
}

.home-insta1-hexagons {
  width: 54.4375rem;
  position: absolute;
  top: -1.875rem;
  right: 0;
  & img {
    width: 100%;
  }
}

.home-information-hexagons {
  width: 54.4375rem;
  position: absolute;
  top: -3.75rem;
  left: -6.875rem;
  & img {
    width: 100%;
  }
}