@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
カルーセル
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/* 横に流れ続けるタイプ */
#marquee {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;

  &.marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .splide__track {
      overflow: visible;
      touch-action: pan-y;
    }
    /*--------------------*/
    /* 子供達 */
    &.childrens {
      margin-bottom: 11rem;
      @media screen and (max-width: 480px) {
        margin-bottom: 6rem;
      }
      .splide__list {
        height: 48rem;
        align-items: flex-start;
        @media screen and (max-width: 480px) {
          height: 23.3rem;
        }
        .splide__slide {
          width: 24.8rem;
          overflow: hidden;
          @media screen and (max-width: 480px) {
            width: 12rem;
          }
          &.img-02 {
            transform: translateY(45.2%);
          }
          &.img-03 {
            transform: translateY(20%);
          }
          &.img-04 {
            transform: translateY(57.3%);
          }
          &.img-05 {
            transform: translateY(38.6%);
          }
          &.img-06 {
            transform: translateY(7.5%);
          }
        }
      }
    }
  }
}

/* ステップで流れるタイプ */
#carousel {
  width: 100%;
  overflow: hidden;
  touch-action: pan-y;
  &.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .splide__track {
      overflow: visible;
      touch-action: pan-y;
    }
    /*--------------------*/
    /* ふきだし */
    &.voices {
      margin-top: 6rem;
      @media screen and (max-width: 480px) {
        margin-top: 3rem;
      }
      .splide__list {
        align-items: flex-start;

        .splide__slide {
          overflow: hidden;
          width: 33.8rem;
          @media screen and (max-width: 480px) {
          }
          &.img-02 {
            width: 35rem;
            margin-top: 12.6rem;
            @media screen and (max-width: 480px) {
              margin-top: 3rem;
            }
          }
          &.img-03 {
            width: 35.8rem;
            padding-right: 0.7rem;
            margin-top: 0.5rem;
            @media screen and (max-width: 480px) {
              margin-top: 0;
            }
          }
          &.img-04 {
            width: 30.6rem;
            margin-top: 5.5rem;
            padding-right: 2.3rem;
            @media screen and (max-width: 480px) {
              margin-top: 1.5rem;
            }
          }
          &.img-05 {
            width: 34.8rem;
            margin-top: 11rem;
            @media screen and (max-width: 480px) {
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}