.home-hero {
  position: relative;
  overflow: hidden;
  height: 40rem;
  padding: 10rem 0.625rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  &::before {
    background-image: var(--bg-circuit);
  }
  &::after {
    background-color: hsl(from var(--blue) h s l / 50%);
    backdrop-filter: blur(2px);
  }
  
  & h1 {
    line-height: 1.1;
    --tracking: -0.04em;
    font-weight: 900;
    font-size: 3.25rem;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.08)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
    color: var(--snow);
    position: relative;
    z-index: 2;
  }
  
  & .home-hero__bar {
    position: absolute;
    z-index: 2;
    opacity: 0.8;
    &::before,
    &::after {
      height: 2.5rem;
    }
    &::before {
      background-color: var(--light-blue);
    }
    &::after {
      background-color: var(--blue);
    }
    &.home-hero__bar--1 {
      display: flex;
      flex-direction: column;
      top: 9.25rem;
      left: -1.25rem;
      &::before,
      &::after {
        content: "";
      }
      &::before {
        width: 5rem;
      }
      &::after {
        width: 12.5rem;
        margin-left: 2rem;
      }
    }
    &.home-hero__bar--2 {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      top: 15.5rem;
      right: -11.25rem;
      &::before,
      &::after {
        content: "";
      }
      &::before {
        width: 6.25rem;
      }
      &::after {
        width: 10rem;
        margin-left: 7.5rem;
      }
    }
    &.home-hero__bar--3 {
      height: 2.5rem;
      width: 15rem;
      background-color: var(--blue);
      bottom: 0;
      left: 0;
    }
    &.home-hero__bar--4 {
      bottom: 0;
      left: 58%;
      display: none;
      &::before,
      &::after {
        content: "";
      }
      &::before {
        width: 2.5rem;
      }
      &::after {
        width: 12.5rem;
      }
    }
    &.home-hero__bar--5 {
      display: flex;
      flex-direction: column;
      bottom: 5.625rem;
      right: -13.75rem;
      &::before,
      &::after {
        content: "";
      }
      &::before {
        width: 7.5rem;
      }
      &::after {
        width: 15rem;
        margin-left: 5rem;
      }
    }
  }
  
  @media (min-width: 768px) {
    height: 45rem;
    padding-inline: 2.5rem;
    & h1 {
      font-size: 5rem;
    }
    & .home-hero__bar {
      &.home-hero__bar--4 {
        display: flex;
      }
    }
  }
  @media (min-width: 1024px) {
    padding-inline: 3.75rem;
    & h1 {
      font-size: 6rem;
    }
    & .home-hero__bar {
      &.home-hero__bar--1 {
        left: 3rem;
      }
      &.home-hero__bar--2 {
        right: 4.5rem;
      }
      &.home-hero__bar--5 {
        right: 0;
      }
    }
  }
  @media (min-width: 1200px) {
    height: clamp(50rem, 100dvh, 60rem);
    padding-inline: 5rem;
    & h1 {
      font-size: 8rem;
    }
  }
}

.home-intro-image {
  object-fit: cover;
  aspect-ratio: 4 / 3;
  max-width: none;
  position: absolute;
  &.home-intro-image--1 {
    width: 17.5rem;
    filter: blur(6px);
    top: 1.25rem;
    left: -4.375rem;
  }
  &.home-intro-image--2 {
    width: 35rem;
    filter: blur(4px);
    top: -17.5rem;
    right: -31.875rem;
  }
  &.home-intro-image--3 {
    width: 20rem;
    filter: blur(8px);
    bottom: -6.875rem;
    right: 9.375rem;
  }
  @media (min-width: 768px) {
    &.home-intro-image--2 {
      top: -13.125rem;
      right: -25rem;
    }
  }
  @media (min-width: 1024px) {
    &.home-intro-image--1 {
      left: 5rem;
    }
    &.home-intro-image--2 {
      right: -17.5rem;
    }
  }
  @media (min-width: 1200px) {
    &.home-intro-image--3 {
      bottom: -2.5rem;
      right: 12.5rem;
    }
  }
}

.home-service-bar {
  position: absolute;
  opacity: 0.8;
  &::before,
  &::after {
    height: 2.5rem;
  }
  &::before {
    background-color: var(--light-mustard);
  }
  &::after {
    background-color: var(--mustard);
  }
  &.home-service-bar--1 {
    display: flex;
    flex-direction: column;
    top: 2.5rem;
    right: 2.5rem;
    &::before,
    &::after {
      content: "";
    }
    &::before {
      width: 7.5rem;
    }
    &::after {
      width: 15rem;
      margin-left: 5rem;
    }
  }
  &.home-service-bar--2 {
    display: flex;
    bottom: 0;
    left: 0;
    &::before,
    &::after {
      content: "";
    }
    &::before {
      width: 2.5rem;
      order: 1;
    }
    &::after {
      width: 12.5rem;
    }
  }
  &.home-service-bar--3 {
    width: 10rem;
    height: 2.5rem;
    background-color: var(--mustard);
    bottom: 0;
    left: 50%;
    display: none;
  }
  &.home-service-bar--blue {
    &::before {
      background-color: var(--light-blue);
    }
    &::after {
      background-color: var(--blue);
    }
    &.home-service-bar--1 {
      top: auto;
      right: auto;
      left: 0;
      bottom: 0;
    }
    &.home-service-bar--2 {
      bottom: auto;
      left: auto;
      top: 0;
      right: 1rem;
    }
    &.home-service-bar--3 {
      bottom: auto;
      left: 40%;
      top: 0;
      background-color: var(--blue);
    }
  }
  @media (min-width: 768px) {
    &.home-service-bar--3 {
      display: block;
    }
  }
}

.home-service-bg-images {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0.125rem;

  & img {
    width: 0;
    height: 100%;
    object-fit: cover;
    transition: flex-grow ease 200ms;
    /* デフォルトの比率は 1 */
    flex-grow: 1;

    /* 初期状態（ホバーしていない時）：1枚目のみ比率を 3 に設定 */
    &:first-child {
      flex-grow: 3;
    }
  }

  /* コンテナ全体にホバーがある場合 */
  &:hover img {
    /* 一旦全画像の比率を 1 にリセット（1枚目の :first-child も上書き） */
    flex-grow: 1;

    /* その中でホバーされている画像のみ比率を 3 にする */
    &:hover {
      flex-grow: 3;
    }
  }
}