.home-hero {
  position: relative;
  display: flex;
  align-items: end;
  padding: 0 1.25rem 3rem 1.25rem;
  overflow: hidden;
  height: 37.5rem;
  z-index: 1;
  @media screen and (min-width: 768px) {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    height: calc(var(--vh, 1vh) * 100);
  }
  @media screen and (min-width: 1024px) {
    padding-right: 3.75rem;
    padding-left: 3.75rem;
  }
  @media screen and (min-width: 1200px) {
    padding-right: 5rem;
    padding-left: 5rem;
  }
  
  & .swiper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    
    &:not(.swiper-initialized) {
      & .swiper-wrapper {
        display: flex;
        overflow-x: auto;
      }
      & .swiper-slide {
        min-width: 100%;
      }
    }
    
    & .swiper-wrapper {
      height: 100%;
    }
    & .swiper-slide {
      height: 100%;
      & img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  
  & .home-hero__dec {
    position: absolute;
    & img {
      width: 100%;
    }
    &.home-hero__dec--tl {
      top: 3rem;
      bottom: auto;
      left: -3rem;
      width: 30.375%;
      max-width: 30.375rem;
      min-width: 12.5rem;
      opacity: 35%;
      @media screen and (min-width: 1024px) {
        top: 0;
        left: 0;
        transform: translate(-15.638%, -12.06%);
      }
    }
    &.home-hero__dec--br {
      right: -3.5rem;
      bottom: 6.75rem;
      left: auto; 
      width: 36.75%;
      max-width: 36.75rem;
      min-width: 13.75rem;
      opacity: 25%;
      @media screen and (min-width: 1024px) {
        right: 0;
        bottom: 0;
        transform: translate(-3.4%, 11.8%);
      }
    }
  }  
  & .home-hero__title {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: start;
    font-weight: 700;
    color: var(--snow);
    & .home-hero__title-en {
      padding: 0.75rem;
      background-image: var(--grad-brand-primary);
      letter-spacing: 0.24em;
      font-size: 2rem;
      line-height: 1;
    }
    & .home-hero__title-main {
      padding: 0.75rem;
      background-image: var(--grad-brand-primary);
      letter-spacing: 0.32em;
      font-size: 1.25rem;
      line-height: 1.25;
    }
    & .home-hero__title-sub {
      padding: 0.75rem;
      background-color: var(--ink);
      letter-spacing: 0.12em;
      font-size: 0.75rem;
      line-height: 1.5;
    }
    @media screen and (min-width: 768px) {
      & .home-hero__title-en {
        padding: 1rem;
        font-size: 3rem;
      }
      & .home-hero__title-main {
        padding: 1rem;
        font-size: 2rem;
      }
      & .home-hero__title-sub {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
        font-size: 1rem;
      }
    }
    @media screen and (min-width: 1024px) {
      & .home-hero__title-en {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        font-size: 4rem;
      }
      & .home-hero__title-main {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
        font-size: 2.5rem;
      }
      & .home-hero__title-sub {
        padding-right: 1rem;
        padding-left: 1rem;
        font-size: 1.25rem;
      }
    }
    @media screen and (min-width: 1200px) {
      & .home-hero__title-en {
        font-size: 5rem;
      }
      & .home-hero__title-main {
        font-size: 3rem;
      }
      & .home-hero__title-sub {
        font-size: 1.5rem;
      }
    }
  }
}

.home-intro-dec-hexagon {
  position: absolute;
  bottom: 0;
  right: 1.25rem;
  width: 54.44444%;
  max-width: 54.44444rem;
  min-width: 13.75rem;
  transform: translateY(36.81%);
  opacity: 25%;
  @media screen and (min-width: 768px) {
    right: auto;
    left: 0;
    transform: translate(-57.34767%, 38.348083%);
  }
  & img {
    width: 100%;
  }
}

.home-intro-image {
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  @media screen and (min-width: 768px) {
    width: 82.685185%;
    max-width: 82.685185rem;
    position: absolute;
    right: -2.5rem;
    bottom: 0;
    transform: translateY(40.850515%);
  }
  @media screen and (min-width: 1024px) {
    right: -3.5rem;
  }
  @media screen and (min-width: 1200px) {
    right: 0;
    transform: translate(27.771557%, 40.850515%);
  }
  & img {
    object-fit: cover;
    aspect-ratio: 893 / 776;
    width: 100%;
  }
}

.swiper.home-slider .swiper-wrapper {
  transition-timing-function: linear;
}