
@media screen and (max-width:3000px){
/* スライダー全体 */
    .gsap-horizon {
  position: relative;
  width: 100%;
  aspect-ratio: 3000/1688;
  overflow: hidden;
  background-color: #000; /* 黒背景 */
}

/* 各スライド（全て重ね合わせ） 初期状態は透明で、背景画像を設定 */
.horizon {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
}

/* 背景画像（パスは適宜変更してください） */
.sample01 {
  background: url("../img/index01_LL.jpg") no-repeat center center;
  background-size: 100%;
}

.sample02 {
  background: url("../img/index02_LL.jpg") no-repeat center center;
  background-size: 100%;
}

.sample03 {
  background: url("../img/index03_LL.jpg") no-repeat center center;
  background-size: 100%;
}

.sample04 {
  background: url("../img/index04_LL.jpg") no-repeat center center;
  background-size: 100%;
}

/* テキスト：初期は下寄せ＆非表示、中央寄せ */
.horizon-text {width:100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff; 
  font-size: 3em;*/
}


}

@media screen and (max-width:767px){
/* スライダーコンテナ */ 
.gsap-horizon {
  position: relative;
  width: 100%;
  aspect-ratio: 800/1000;
  overflow: hidden;
  background-color: #000; /* 黒背景 */
}

/* 各スライド（全て重ね合わせ） 初期状態は透明で、背景画像を設定 */
.horizon {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  opacity: 0;
}
    
    /* 背景画像（※適宜パスを変更してください） */
    .sample01 {
      background: url("../img/index01_s.jpg") no-repeat;aspect-ratio:800/1000;background-size: 100%;
    }
    
    .sample02 {
      background: url("../img/index02_s.jpg") no-repeat;aspect-ratio:800/1000;background-size: 100%;
    }
    
    .sample03 {
      background: url("../img/index03_s.jpg") no-repeat;aspect-ratio:800/1000;background-size: 100%;
    }
    .sample04 {
      background: url("../img/index04_s.jpg") no-repeat;aspect-ratio:800/1000;background-size: 100%;
    }
    /* テキスト：初期は下寄せ＆非表示、中央寄せ */
   .horizon-text {width:100vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff; 
  font-size: 3em;*/
}


}