.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6.25rem 0 2.5rem 1.25rem;
  @media screen and (min-width: 768px) {
    padding-top: 7.5rem;
    padding-left: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    padding-top: 10rem;
  }
  
  & .home-hero__slide.swiper {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 20rem;
    @media screen and (min-width: 768px) {
      height: 30rem;
    }
    @media screen and (min-width: 1024px) {
      height: 38rem;
    }
    @media screen and (min-width: 1200px) {
      height: 43.75rem;
    }
    & .swiper-wrapper, & .swiper-slide {
      height: 100%;
    }
    & .swiper-slide {
      border-radius: 2.5rem;
      overflow: hidden;
      position: relative;
      &::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background-color: hsl(0 0 0 / 25%);
        pointer-events: none;
      }
      & img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }
  }
  
  & .home-hero__title {
    position: absolute;
    bottom: 1.25rem;
    left: 0.625rem;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--snow);
    @media screen and (min-width: 768px) {
      bottom: 1.5rem;
      left: 1.5rem;
    }
    @media screen and (min-width: 1024px) {
      bottom: 2.5rem;
      left: 2.5rem;
    }
    & .home-hero__title-en {
      font-family: var(--font-display);
      line-height: 1.1;
      letter-spacing: 0.04em;
      font-size: 1.5rem;
      text-shadow: var(--elevation-1);
      @media screen and (min-width: 768px) {
        font-size: 2.5rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 3.25rem;
      }
      @media screen and (min-width: 1200px) {
        font-size: 3.75rem;
      }
    }
    & .home-hero__title-ja {
      line-height: 1.25;
      letter-spacing: 0.04em;
      font-weight: 700;
      font-size: 1.125rem;
      text-shadow: var(--elevation-1);
      @media screen and (min-width: 768px) {
        font-size: 1.5rem;
      }
      @media screen and (min-width: 1024px) {
        font-size: 1.75rem;
      }
      @media screen and (min-width: 1200px) {
        font-size: 2rem;
      }
    }    
  }
}

.section-title.section-title--vertical {
  gap: 3rem;
  writing-mode: vertical-rl;
  & .section-title__main {
    padding: 0.75rem 0.75rem 0.75rem  0.5rem;
    line-height: 1;
    letter-spacing: 0.32em;
  }
  & .section-title__sub {
    line-height: 1.8;
    letter-spacing: 0.24em;
  }
  @media screen and (min-width: 768px) {
    gap: 4rem;
  }
  @media screen and (min-width: 1024px) {
    gap: 5rem;
  }
  @media screen and (min-width: 1200px) {
    gap: 6.25rem;
  }
}

.home-about-dec {
  position: absolute;
  min-width: 24.125rem;
  max-width : 31.25rem;
  width: 54.3478%;
  right: -3.125rem;
  bottom: -13.75rem;
  & img {
    width: 100%;
  }
}

.section-dec-text.section-dec-text--home-about {
  font-size: 3rem;
  text-align: center;
  @media screen and (min-width: 768px) {
    font-size: 5rem;
    top: -0.15em;
    left: -2rem;
  }
  @media screen and (min-width: 1024px) {
    font-size: 7.5rem;
    left: -3rem;
  }
  @media screen and (min-width: 1200px) {
    font-size: 10rem;
    left: -10rem;
  }
}

.swiper.home-services-slide .swiper-pagination, .swiper.home-news-slide .swiper-pagination {
  position: relative;
  border-radius: 9999px;
  overflow: hidden;
  height: 0.5rem;
  & .swiper-pagination-progressbar-fill {
    background-color: var(--logo-blue);
  }
}
.swiper.home-services-slide .swiper-pagination {
  margin-top: 1.5rem;
}
.swiper.home-services-slide .swiper-pagination {
  flex: 1 1 0%;
}

.swiper.home-news-slide {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-right: calc(-1 * var(--shift-width));
  width: calc(100% + var(--shift-width));
  --shift-width: 1.25rem;
  @media screen and (min-width: 768px) {
    --shift-width: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    --shift-width: 3.75rem;
  }
  @media screen and (min-width: 1200px) {
    --shift-width: 5rem;
    flex: 1 1 0%;
  }
  & .swiper-nav-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: calc(100% - var(--shift-width));
  }
  & .swiper-button-next, & .swiper-button-prev {
    position: relative;
    inset: 0;
    margin-top: 0;
    height: 3rem;
    width: 3rem;
    background-image: url(/system_panel/uploads/images/circle-chevron-right.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &::after {
      content: none;
    }
  }
  & .swiper-button-prev {
    transform: scaleX(-1);
  }
  & .webgene-blog {
    flex: 1 1 0%;
  }
}

.section-dec-text.section-dec-text--home-services {
  color: var(--ink);
  position: absolute;
  white-space: nowrap;
  top: 3.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.875rem;
  @media screen and (min-width: 768px) {
    font-size: 6rem;
  }
  @media screen and (min-width: 1024px) {
    top: 2.5rem;
    font-size: 8rem;
  }
  @media screen and (min-width: 1200px) {
    top: 1.25rem;
    font-size: 12.5rem;
  }
}

.section-dec-text.section-dec-text--home-news {
  white-space: nowrap;
  font-size: 3rem;
  @media screen and (min-width: 768px) {
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    font-size: 6rem;
  }
  @media screen and (min-width: 1024px) {
    top: 2rem;
    left: 2.5rem;
    font-size: 8rem;
  }
  @media screen and (min-width: 1200px) {
    top: 2.5rem;
    font-size: 10rem;
  }
}

.home-service-dec-image {
  position: absolute;
  top: 1.25rem;
  right: 0;
  width: 26.25%;
  max-width: 26.35rem;
  min-width: 13.75rem;
  @media screen and (min-width: 768px) {
    top: 1.5rem;
    right: 2.5rem;
  }
  @media screen and (min-width: 1024px) {
    font-size: 8rem;
    right: 3.75rem;
  }
  @media screen and (min-width: 1200px) {
    top: 2.5rem;
    right: 9.375rem;
  }
}