/* ===========================================
 * SLIDER
 * ======================================== */

.slider {
  padding: 2rem 0;
  .slides {
    display: flex;
    overflow: hidden;
  }
  .slide {
    display: flex;
    align-items: center;
    animation: infinitescroll 55s linear infinite;
  }
  .item {
    white-space: nowrap;
    font-size: 2rem;
    color: var(--text-grayThin);
    letter-spacing: 1px;
    flex: 0 0 auto;
  }
  .item::after {
    content: "×";
    display: inline-block;
    padding: 0 1rem;
    font-size: 2.4rem;
    transform: translateY(-2px);
  }
}
@keyframes infinitescroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (min-width:769px) {
  .slider {
    position: relative;
    .title {
      font-family: "Roboto", "Yu Gothic Medium", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
      font-weight: 100;
      color: rgba(247, 247, 245, 0.57);
      position: absolute;
      z-index: -1;
      bottom: -15px;
      left: -4px;
      font-size: 10.175vw;
      line-height: 1;
      white-space: nowrap;
    }
  }
}

@media screen and (min-width:960px) {
  .slider {
    .title {
      bottom: -20px;
    }
    .item {
      font-size: 2.4rem;
    }
    .item::after {
      padding: 0 2.4rem;
    }
  }
}

@media screen and (min-width:1024px) {
  .slider {
    margin-top: 3.2rem;
    .title {
      bottom: -32px;
    }
  }
}

@media screen and (min-width:1280px) {
  .slider {
    padding: 2rem 0 clamp(1.5rem, 2.25vw, 12rem);
  }
}