.home-hero-typo {
  position: absolute;
  width: 8rem;
  top: 3.75rem;
  right: 1rem;
  z-index: 3;
  
  @media screen and (min-width: 768px) {
    width: 12rem;
    top: 5rem;
    right: 2rem;
  }
  @media screen and (min-width: 1024px) {
    width: 14rem;
    top: 5rem;
    right: 3rem;
  }
  @media screen and (min-width: 1200px) {
    right: 4rem;
  }
}

.home-hero-bg-image::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(180deg, rgba(39, 38, 37, 0.65) 0%, rgba(39, 38, 37, 0.20) 34.62%, rgba(39, 38, 37, 0.30) 65.87%, #272625 100%);
  pointer-events: none;
  z-index: 2;
}

.wadama-bg-image {
  opacity: 35%;
  position: absolute;
  display: none;
  
  @media screen and (min-width: 768px) {
    display: block;
  }
  
  & img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
  
  &.wadama-bg-image--tr {
    width: 45%;
    max-width: 45rem;
    top: 2.5rem;
    right: 0;
  }
  
  &.wadama-bg-image--bl {
    width: 37.5%;
    max-width: 37.5rem;
    bottom: 2.5rem;
    left: 0;
    transform: translateX(21.666%);
  }
}

.wadama-typo {
  align-self: center;
  width: 5rem;
  
  @media screen and (min-width: 1024px) {
    position: absolute;
    width: 8rem;
    top: -4rem;
    left: -3rem;
  }
  @media screen and (min-width: 1200px) {
    width: 13.75rem;
    top: -6.25rem;
    left: -5rem;
  }
}

.swiper.home-gallery {
  overflow: visible;
  height: 30rem;
  
  & .swiper-wrapper {
    transition-timing-function: linear;
    height: 100%;
  }
  
  & .swiper-slide {
    width: auto;
    height: 100%;
    
    & img {
      height: 100%;
    }
  }
}

.commitment-dec {
  position: absolute;
  mix-blend-mode: exclusion;
  height: 4rem;
  top: -2rem;
  
  &.commitment-dec--r {
    right: -2rem;
  }
  
  &.commitment-dec--l {
    left: -2rem;
  }
  
  @media screen and (min-width: 768px) {
    height: 8rem;
    top: -3.75rem;
    
    &.commitment-dec--r {
      right: -3.75rem;
    }
    
    &.commitment-dec--l {
      left: -3.75rem;
    }
  }
}

.products-image {
  & img {
    object-fit: cover;
    aspect-ratio: 4 / 3;
    width: 100%;
  }
  
  @media screen and (min-width: 1200px) {
    position: absolute;
    width: 56.25%;
    top: -7.5rem;
    right: -10.625rem;
  }
}

.konjac-button {
  width: 18.75rem;
  align-self: center;
  
  & img {
    width: 100%;
    transition: all ease 200ms;
    
    &:hover {
      opacity: 95%;
      transform: scale(1.2);
    }
  }
  
  @media screen and (min-width: 1400px) {
    position: absolute;
    right: 0;
    bottom: 1.25rem;
  }
}

.blog-list.blog-list--home {
  & .webgene-blog {
    display: flex;
    gap: 0;
  }
}