.home-hero {
  position: relative;
  height: clamp(50rem, calc(var(--vh, 1vh) * 100), 80rem);
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
  padding: 10rem 1.25rem;
  @media (min-width: 768px) {
    padding: 7.5rem 2.5rem 15rem;
  }
  @media (min-width: 1024px) {
    padding: 7.5rem 3.75rem 20rem;
  }
  @media (min-width: 1200px) {
    padding: 15rem 5rem 10rem;
  }
  
  & .home-hero__content {
    position: relative;
    writing-mode: vertical-rl;
    display: flex;
    flex-direction: column;
    padding-right: 10%;
    gap: 1rem;
    width: 100%;
    @media (min-width: 768px) {
      padding-right: 0;
      justify-content: end;
      max-width: 20rem;
    }
    @media (min-width: 1024px) {
      max-width: 20rem;
    }
    @media (min-width: 1200px) {
      max-width: 32.5rem;
    }
    & .home-hero__title {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      & .home-hero__title-en {
        line-height: 1;
        letter-spacing: 0.32em;
        font-weight: 300;
        font-size: 0.625rem;
        margin-top: 0.25rem;
      }
      & .home-hero__title-ja {
        line-height: 1;
        letter-spacing: 0.15em;
        font-weight: 700;
        font-size: 1.5rem;
      }
    }
    & .home-hero-logo {
      width: 6rem;
      margin-top: 3rem;
      @media (min-width: 768px) {
        width: 8rem;
      }
    }
  }
  .home-hero__dec-cricle {
    pointer-events: none;
    position: absolute;
    inset: 0 0 auto 0;
    height: calc(100% + 10rem);
    overflow: hidden;
    &::before {
      opacity: 60%;
      content: "";
      aspect-ratio: 1 / 1;
      position: absolute;
      background-image: url(/system_panel/uploads/images/dec-circle.svg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      animation-name: rotation;
      animation-duration: 80s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      font-size: var(--content-width);
      width: var(--content-width);
      --content-width: 50rem;
      top: -0.1388888889em;
      right: -0.2407407407em;
      @media (min-width: 768px) {
        --content-width: 62rem;
      }
      @media (min-width: 1024px) {
        --content-width: 67.5rem;
      }
    }
  }
}

.performance-Information-button {
  position: sticky;
  top: calc(var(--vh, 1vh) * 100 - 20rem);
  z-index: 99;
  width: fit-content;
  height: 0;
  & a {
    display: block;
    width: 8rem;
    margin-left: 0.5rem;
    & img {
      width: 100%;
    }
  }
  & .performance-Information-button__close  {
    position: absolute;
    width: 18.8%;
    top: 0;
    right: 0;
    transform: translate(-21.2765957447%, 42.5531914894%);
  }
  &.close {
    display: none;
  } 
  @media (min-width: 768px) {
    & a {
      width: 13rem;
      margin-left: 1rem;
    }
  }
  @media (min-width: 1200px) {
    & a {
      width: 15.625rem;
      margin-left: 2rem;
    }
  }
}

.section-title {
  &.section-title--home-intro {
    & .section-title__ja {
      font-size: 1.25rem;
      @media (min-width: 768px) {
        font-size: 1.5rem;
      }
      @media (min-width: 1200px) {
        font-size: 1.75rem;
      }
    }
  }
}

.home-intro-images {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
  & img {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1 / 3;
    box-shadow: var(--elevation-1);
    &:nth-child(2) {
      margin-top: 3.75rem;
    }
    &:nth-child(3) {
      margin-top: 1.875rem;
    }
  }
  @media (min-width: 768px) {
    max-width: 35rem;
    margin-left: auto;
    & img {
      &:nth-child(2) {
        margin-top: 5rem;
      }
      &:nth-child(3) {
        margin-top: 3rem;
      }
    }
  }
  @media (min-width: 1024px) {
    position: absolute;
    bottom: 3rem;
    left: -3.5rem;
    max-width: 25rem;
    margin-left: 0;
    & img {
      &:nth-child(2) {
        margin-top: 3.75rem;
      }
      &:nth-child(3) {
        margin-top: 1.875rem;
      }
    }
  }
  @media (min-width: 1200px) {
    bottom: 4.375rem;
    left: -0.625rem;
    max-width: 42.125rem;
    & img {
      &:nth-child(2) {
        margin-top: 7.5rem;
      }
      &:nth-child(3) {
        margin-top: 3.75rem;
      }
    }
  }
}

.home-intro-dec-cricle {
  width: clamp(33.75rem, 49.25%, 49.25rem);
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate(-10.152284264%, -8.1218274112%);
  opacity: 20%;
  & img {
    width: 100%;
  }
  @media (min-width: 1200px) {
    opacity: 100%;
  }
}

.home-services-bg-image {
  position: absolute;
  inset: 0;
  &::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/system_panel/uploads/images/paper.jpg);
    mask-image: linear-gradient(180deg, #232B27 0%, rgba(35, 43, 39, 0.00) 20.67%, rgba(35, 43, 39, 0.00) 78.85%, #232B27 100%);
  }
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 25%;
  }
}

.home-news-list {
  --swiper-pagination-color: var(--snow);
  --swiper-pagination-progressbar-bg-color: hsl(0deg 0% 100% / 40%);
  & .swiper-pagination {
    position: static;
    margin: 2rem 0 0;
  }
}

.home-presence-image {
  margin-top: -0.4167em;
}

.home-presence--bg-dec {
  width: 134.1875%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  & img {
    width: 100%;
  }
}

.home-insta1 {
  width: 100%;
  opacity: 25%;
}

.home-insta-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}