@charset "utf-8";
/* CSS Document */
.slider-container {
  width: 100%; /* 適切な幅に設定 */
  overflow: hidden;
  white-space: nowrap; /* スライドを横並びにする（Flexboxでも可）*/
  align-items: center;
    vertical-align: middle;	
}

.slider {
  display: flex; /* 子要素を横並びにする */
  animation: scroll-left 10s infinite linear; /* アニメーションの適用 */
}

.slide {
  flex: 0 0 auto; /* スライドの幅を固定し、伸縮させない */
  width: 484px; /* 各スライドの幅を適切に設定 */
  margin-right: 0; /* スライド間のスペース */
  display: flex;
  align-items: center;
  justify-content: center; /* 文字とアイコンを中央揃えにする */
}

.slide-yasukari{
	font-family: "Montserrat", sans-serif;
	font-size:clamp(32px, 4.5vw, 54px);
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.0;
}

/* アニメーションの定義 */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    /* スライドの幅の総量分だけ左に移動させる（ここでは例としてピクセル値）*/
    transform: translateX(-1500px); /* 適切な値に変更してください */
  }
}

/* マウスオーバー時にアニメーションを一時停止する（オプション）*/
.slider-container:hover .slider {
  animation-play-state: paused;
}

@media screen and (max-width: 768px) {

.slide {
  width: 300px; /* 各スライドの幅を適切に設定 */
  }	
}

@media screen and (max-width: 560px) {

.slide {
  width: 250px; /* 各スライドの幅を適切に設定 */
  }	
}