.home-hero {
  position: relative;
  padding: 3.75rem 0.625rem 5rem;
  @media (min-width: 768px) {
    padding-inline: 2.5rem;
  }
  @media (min-width: 1024px) {
    padding-inline: 5rem;
  }
  @media (min-width: 1200px) {
    padding-inline: 10rem;
  }
  &::before {
    content: "";
    background-color: var(--navy);
    position: absolute;
    inset: 15rem 0 auto;
    height: 32.5rem;
    transform: skewY(6deg);
    @media (min-width: 1024px) {
      height: 35rem;
    }
    @media (min-width: 1200px) {
      height: 52.5rem;
    }
  }
  
  & .home-hero__logo {
    position: absolute;
    right: -6.25rem;
    bottom: -9.375rem;
    width: 40rem;
    opacity: 50%;
    & img {
      width: 100%;
    }
    @media (min-width: 1024px) {
      width: 60rem;
      right: -14rem;
      bottom: -10rem;
    }
    @media (min-width: 1200px) {
      width: 75rem;
      right: -12.5rem;
      bottom: -13.75rem;
    }
  }
  
  & .home-hero__content {
    position: relative;
  }
  
  & .home-hero__image {
    object-fit: cover;
    width: 100%;
    height: 30rem;
    border: 3px solid var(--ink);
    @media (min-width: 1024px) {
      height: 35rem;
    }
    @media (min-width: 1200px) {
      height: 50rem;
    }
  }
  
  & .home-hero__title {
    letter-spacing: 0;
    line-height: 1;
    font-weight: 900;
    font-size: 3.75rem;
    border: 3px solid var(--ink);
    background-color: var(--snow);
    position: absolute;
    left: -1rem;
    font-feature-settings: "palt";
    &.home-hero__title--1 {
      padding: 0.625rem 0.625rem 0.625rem 1rem;
      top: -2rem;
    }
    &.home-hero__title--2 {
      white-space: nowrap;
      writing-mode: vertical-rl;
      padding: 1.25rem 0.625rem 0 0;
      top: 4.5rem;
      height: calc((6em - 0.4em) + 1.25rem); /*（文字数 - 。の下を削る分 ）+ padding-top */
    }
    @media (min-width: 768px) {
      font-size: 4.5rem;
      left: -2rem;
      &.home-hero__title--2 {
        top: 5rem;
      }
    }
    @media (min-width: 1024px) {
      font-size: 5.25rem;
      left: -2rem;
      &.home-hero__title--2 {
        top: 6rem;
      }
    }
    @media (min-width: 1200px) {
      font-size: 7.5rem;
      &.home-hero__title--2 {
        top: 9rem;
      }
    }
  }
  
  & .home-hero__text {
    line-height: 2;
    font-size: 0.875rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--ink);
    background-color: var(--snow);
    width: 20rem;
    position: absolute;
    right: -0.625rem;
    bottom: -2.5rem;
    @media (min-width: 768px) {
      font-size: 1.125rem;
      width: 35rem;
      right: 0.625rem;
    }
  }
}

.home-services {
  position: relative;
  &::before {
    content: "";
    background-color: var(--navy);
    position: absolute;
    inset: -5rem 0;
    transform: skewY(-6deg);
    z-index: -1;
  }
}

.section-title.section-title--home-services {
  @media (min-width: 1024px) {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 1.5rem;
    &::after {
      content: "";
      display: block;
      height: calc(var(--title-size) * 0.75);
      width: 2px;
      background-color: var(--snow);
    }
    & .section-title__ja {
      order: 2;
    }
  }
}

.swiper:not(.swiper-initialized) {
  & .swiper-wrapper {
    display: flex;
    overflow: auto;
  }
  & .swiper-slide {
    min-width: 30%;
  }
}

.home-equipment-slider {
  width: 100%;
  overflow: visible;
  
  & .swiper-wrapper {
    transition-timing-function: linear;
  }
  
  & img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

.home-blog-list {
  --ink: var(--snow);
  display: contents;
  & .webgene-blog {
    display: contents;
  }
}

.home-recruit-bg-image {
  position: absolute;
  inset: 0;
  &::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--navy);
    opacity: 40%;
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}