.top_slide {
  position: relative;
  display: block;
}
.top_slide_title {
  max-width: var(--site-width);
  padding: 0 var(--space-l) var(--space-l) var(--space-l);
  position: relative;
  z-index: 2;
  margin: auto;
}

.top_slide_img {
  position: absolute;
  top: 0;
  left: var(--space-m);
  aspect-ratio: 731 / 240;
}

.top_bnr {
  margin: 0 auto;
  position: relative;
  top: -20vh;
  margin-bottom: -20vh;
  z-index: 10;
  ul {
    display: flex;
    list-style: none;
    li {
      width: calc((100% - (var(--space-m) * 2)) / 2);
      margin-right: var(--space-m);
      margin-bottom: var(--space-m);
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.top_section {
  position: relative;
  padding: var(--space-ll) 0;
  .top_section_title {
    margin: 0 auto;
    max-width: 493px;
  }
}

.top_intro_text {
  display: flex;
  margin-top: var(--space-l);
  div {
    width: calc(100% - var(--space-m) / 2);
    margin-right: var(--space-m);
  }
}

.top_intro_img {
  margin-bottom: var(--space-m);
  position: relative;
  img:nth-child(2),
  img:nth-child(3),
  img:nth-child(4),
  img:nth-child(5),
  img:nth-child(6),
  img:nth-child(7),
  img:nth-child(8) {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.top_center_img_sm {
  display: none;
}

.top_partner_text {
  padding: var(--space-m) 0 0;
  font-size: var(--fs-s);
  word-break: keep-all;
  overflow-wrap: anywhere; /* 追加：どうしても収まらない場合だけ強制改行 */
}

.top_bottom_bnr {
  position: relative;
  margin-top: var(--space-l);
  ul {
    display: flex;
    list-style: none;
    li {
      width: calc((100% - (var(--space-m) * 2)) / 2);
      margin-right: var(--space-m);
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.top_bottom_slider {
  padding: var(--space-m) 0;
}

/* アニメーション */
/* 動かしたい要素に共通で付与するクラス */
.animation {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  will-change: transform;
}

.animation-float-01 {
  animation-name: animation-float-01-keyframes;
  animation-duration: 3.5s;
  animation-timing-function: ease-in-out;
  animation-delay: -1.2s;
  animation-direction: alternate;
}

.animation-float-02 {
  animation-name: animation-float-02-keyframes;
  animation-duration: 4.8s;
  animation-timing-function: ease-in-out;
  animation-delay: -3.4s;
  animation-direction: alternate;
}

.animation-float-03 {
  animation-name: animation-float-03-keyframes;
  animation-duration: 6.4s;
  animation-timing-function: ease-in-out;
  animation-delay: -0.5s;
  animation-direction: alternate;
}

.animation-float-04 {
  animation-name: animation-float-04-keyframes;
  animation-duration: 3.9s;
  animation-timing-function: ease-in-out;
  animation-delay: -4.6s;
  animation-direction: alternate;
}

@keyframes animation-float-01-keyframes {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
}

@keyframes animation-float-02-keyframes {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
}

@keyframes animation-float-03-keyframes {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
}

@keyframes animation-float-04-keyframes {
  0%,
  100% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(10px);
  }
}

/* 動きを止めたい場合 */
.animation.is-paused {
  animation-play-state: paused;
}

@media screen and (max-width: 999px) {
  .top_bnr {
    top: -12vh;
    margin-bottom: -12vh;
  }
}

@media screen and (max-width: 767px) {
  .top_bnr {
    top: 0;
    margin-bottom: var(--space-l);
    ul {
      flex-direction: column;

      li {
        width: 100%;
        margin-right: 0;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .top_section {
    padding: var(--space-l) 0 0;
    .top_section_title {
      max-width: 100%;
    }
  }

  .top_intro_text {
    flex-direction: column;
    div {
      width: 100%;
      margin-right: 0;
    }
  }

  .top_center_img_sm {
    display: block;
    position: relative;
    img:nth-child(2),
    img:nth-child(3),
    img:nth-child(4) {
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  .top_partner_text {
    padding: var(--space-m) 0;
  }

  .top_bottom_slider {
    .universal-slider__control-image {
      max-width: 20px;
      width: 20px;
    }
    .universal-slider__button {
      background-color: transparent;
      width: 40px;
      height: 40px;
    }
    .top_bottom_slider_slides {
      max-width: 92%;
      margin: auto;
      article {
        padding: 0 var(--space-m);
      }
    }
  }
}

@media screen and (max-width: 480px) {
  .top_bnr {
    ul {
      li {
        margin-bottom: var(--space-s);
      }
    }
  }

  .top_bottom_slider {
    .universal-slider__button {
      width: 20px;
      height: 20px;
    }
  }
}