@layer page {
  .ir-slide-wrap {
    margin-bottom: 5rem;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-wrap {
      margin-bottom: 12.8205128205vw;
    }
  }

  #ir-splide {
    border: solid 1px #C9CACE;
    max-width: 700px;
    margin: 0 auto;
  }

  #ir-splide .splide__slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* コントロールバー */
  .ir-slide-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.25rem;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-controls {
      gap: 3.5897435897vw;
      margin-top: 3.5897435897vw;
      justify-content: space-between;
    }
  }

  /* 矢印ボタンペア */
  .ir-slide-controls__arrows {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
    margin-right: 1rem;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-controls__arrows {
      gap: 2.5vw;
      margin-right: 0;
    }
  }

  .ir-slide-controls__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    border: none;
    background: linear-gradient(to bottom, #0280ff 0%, #004ecb 100%);
    cursor: pointer;
    transition: opacity 0.25s;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-controls__btn {
      width: 10vw;
      height: 10vw;
    }
  }
  .ir-slide-controls__btn svg {
    width: 0.875rem;
    height: auto;
    fill: #fff;
  }
  @media (hover: hover) {
    .ir-slide-controls__btn:hover {
      opacity: 0.8;
    }
  }

  /* カウンター */
  .ir-slide-counter {
    font-size: 1.3rem;
    font-family: var(--en-sans);
    color: #050C1F;
    flex-shrink: 0;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-counter {
      font-size: 5vw;
    }
  }

  /* ページネーションドット */
  .ir-slide-controls__dots {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-controls__dots {
      gap: 2.5vw;
    }
  }

  .ir-slide-controls__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #E8E9ED;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
  }
  @media screen and (max-width: 767px) {
    .ir-slide-controls__dot {
      width: 2vw;
      height: 2vw;
    }
  }
  .ir-slide-controls__dot.is-active {
    background: #B2B6C3;
  }
  @media (hover: hover) {
    .ir-slide-controls__dot:hover {
      background: #B2B6C3;
    }
  }
}