.header {
  justify-content: end;
  padding-top: 1.875rem;  
  & .header__logo {
    display: none;
  }
}

.home-hero {
  position: relative;
  overflow: hidden;
  height: 50rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 2rem;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(180deg, rgba(0, 30, 67, 0.00) 0%, rgba(0, 30, 67, 0.47) 76.44%, #001E43 100%);
    pointer-events: none;
    z-index: 2;
  }
  @media (min-width: 768px) {
    padding-bottom: 3rem;
    height: clamp(800px, calc(var(--vh, 1vh) * 100), 1200px);
  }
  @media (min-width: 1200px) {
    padding-right: 7.5rem;
    padding-left: 7.5rem;
  }
  
  & .home-hero__bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 45%;
  }
  
  & .home-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    @media (min-width: 768px) {
      padding-right: 2.5rem;
      padding-left: 2.5rem;
    }
    @media (min-width: 1024px) {
      padding-right: 3.75rem;
      padding-left: 3.75rem;
    }
    @media (min-width: 1200px) {
      padding-right: 0;
      padding-left: 0;
    }
    
    & .home-hero__title {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      letter-spacing: 0;
      font-family: var(--font-serif);
      & .home-hero__title-en {
        line-height: 1;
        color: var(--light-gray);
        font-size: 1.25rem;
        @media (min-width: 768px) {
          font-size: 2.5rem;
        }
        @media (min-width: 1024px) {
          font-size: 3rem;
        }
      }
      & .home-hero__title-ja {
        line-height: 1.15;
        color: var(--pale-gold);
        font-size: 1.25rem;
        @media (min-width: 768px) {
          font-size: 3rem;
        }
        @media (min-width: 1024px) {
          font-size: 4rem;
        }
      }
    }
  }
  
  .home-blog {
    position: relative;
    z-index: 3;
    padding: 1.5rem 1.25rem;
    gap: 0.625rem;
    border: 1px solid hsl(0 0 100 / 25%);
    background-color: hsl(0 0 100 / 1%);
    backdrop-filter: blur(8px);
    @media (min-width: 768px) {
      width: 25rem;
      align-self: end;
    }
    @media (min-width: 1200px) {
      position: absolute;
      right: 2.5rem;
      bottom: 2.5rem;
    }
  }
  
  .home-hero__text {
    position: absolute;
    z-index: 1;
    &.home-hero__text--musubu {
      width: 10.5625rem;
      top: -0.375rem;
      left: -0.625rem;
    }
    &.home-hero__text--hodoku {
      width: 9.9375rem;
      top: 2.75rem;
      left: 10.625rem;
    }
    @media (min-width: 768px) {
      &.home-hero__text--musubu {
        width: 15rem;
      }
      &.home-hero__text--hodoku {
        width: 15rem;
        top: 4.625rem;
        left: 17rem;
      }
    }
    @media (min-width: 1024px) {
      &.home-hero__text--musubu {
        width: 19.625rem;
      }
      &.home-hero__text--hodoku {
        width: 19.625rem;
        left: 24.375rem;
      }
    }
    @media (min-width: 1200px) {
      z-index: 0;
    }
  }
  
  .home-hero__mv {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    @media (min-width: 1200px) {
      left: auto;
      gap: 3rem;      
    }
    
    & .home-hero__image {
      object-fit: cover;
      width: 100%;
      height: 100%;
      @media (min-width: 1200px) {
        width: 46.875rem; 
      }
      object-position: bottom;
      @media (min-width: 768px) {
        object-position: center;
      }
    }
    
    & .home-hero__side-text {
      font-family: var(--font-serif);
      width: 2.25rem;
      & > p {
        transform: rotate(90deg);
        line-height: 1;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
      }
      @media (min-width: 768px) {
        width: 5rem;
      }
      @media (min-width: 1024px) {
        width: 6.5rem;
      }
      @media (min-width: 1200px) {
        width: 7.5rem;
      }
    }
  }
}

.home-services-bg-text {
  display: none;
  writing-mode: vertical-rl;
  position: absolute;
  top: 50%;
  left: -3rem;
  line-height: 1;
  letter-spacing: 0;
  font-family: var(--font-serif);
  font-size: 20rem;
  color: var(--pale-gold);
  transform: translateY(-50%) scale(-1);
  transform-origin: center;
  @media (min-width: 1200px) {
    display: block;
  }
}

.home-dialogue-bg-image {
  position: absolute;
  inset: 0;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: hsl(0 0 0 / 55%);
    pointer-events: none;
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.swiper:not(.swiper-initialized) {
  &.home-dialogue-slider, &.home-introduction-slider {
    & .swiper-wrapper {
      & .swiper-slide {
        min-width: 30%;
      }
    }
  }
}
.swiper.home-dialogue-slider, .swiper.home-introduction-slider {
  & .swiper-wrapper{
    transition-timing-function: linear;
  }
}

.home-insta1 .webgene-blog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  & .webgene-no-items {
    grid-column: span 2 / span 2;
  }
  @media (min-width: 768px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    & .webgene-no-items {
      grid-column: span 4 / span 4;
    }
  }
}