@charset "utf-8";

/* Splide 基本スタイル
--------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .splide__list {
    transition: transform .6s ease !important;
  }
}


/* - スライドが全枚表示されており、カルーセルページャーが非表示の時は矢印も削除する */
.splide:not(.is-overflow) .splide__arrows {
  display: none;
}


/* Splide カルーセル型 - 右側だけはみ出る
--------------------------------------------------------------- */

/* 親コンテナを超えてブラウザ幅100% */
.overtrack-container {
  overflow: hidden;
  margin-inline: calc(50% - (50vw - 8.5px));

  /* -- インナーをコンテナ幅に戻す */
  .overtrack-container__inner {
    position: relative;
    max-width: var(--baseinr);
    margin-inline: auto;
  }

  /* -- インナーからはみ出た右側を表示 */
  .splide__track {
    overflow: visible;
  }

  /* -- 矢印 */
  .splide__arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    min-width: 0;
    aspect-ratio: 1/1;
    background: #00B4E6 url(./arrow.svg) center center / 19% auto no-repeat;
    border: 1px solid #fff;
    border-radius: 100vmax;
    margin: auto;
    cursor: pointer;

    &.splide__arrow--prev {
      display: none;
      transform: scaleX(-1);
    }

    &.splide__arrow--next {
      right: 0;

      &:disabled {
        display: none;
      }
    }
  }

}

@media print,
screen and (max-width:1023px) {

  @media (prefers-reduced-motion: reduce) {
    .splide__list {
      transition: transform .3s ease !important;
    }
  }

  /* SP Splide カルーセル型 - 右側だけはみ出る
--------------------------------------------------------------- */

  /* SP 親コンテナを超えてブラウザ幅100% */
  .overtrack-container {
    margin-inline: calc(-1 * var(--sp-padding));

    /* -- SP インナーをコンテナ幅に戻す */
    .overtrack-container__inner {
      /*max-width: 314px;*/
      padding-inline: 12.08vw;
      /* ※矢印をコンテナ内に収めないと、枚数計算が反応しない */
      margin-inline: auto;
    }

    /* -- SP 矢印 */
    .splide__arrow {
      &.splide__arrow--next {
        right: -9.66vw;
      }
    }

  }

}