/* ==========================================
     画像の繋ぎ目のちらつきを抑える
========================================== */

.slider-track {
  display: flex;
  width: max-content;
  animation: scrollR 20s linear infinite;
  
  /* ↓ ここを追加・強化 ↓ */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 2000px;
}
  /* ==========================================
     【大改造】ドライブシミュレーションエリア
     ========================================== */
  .stage-container {
    position: relative;
    width: 100%;  /* ステージ全体の幅 */
    height:820px; /* ステージ全体の高さ */
    background-color: #E4C687;
    overflow:hidden;  /*スライド左右を拡大(画面が動くのでNG)　overflow: hidden; */
	z-index: 60;
  }

.yunokaze-mark img{
	position: absolute;
	width: 100%;
    height:auto; /* イラストと文字 */
    top: 500px;
	margin-bottom: 00px;/* 下からの位置調整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;     /* 背景より手前に配置 */
    pointer-events: none; /* クリックなどの邪魔をしない */
}


  /* ① 背景スライダー（右に高速で流す） */
  .infinite-slider {
    position: absolute;
    top: 0;
    left: 0;
    height: 60%;/*  背景スライダー高さの割合 */
	padding-bottom: 0px;
    display: flex;
    align-items: center;
    z-index: 50;
  }
  .slider-inner {
    display: flex;
    width: max-content;
  }
  .slide-group {
   display: flex;
    /* 背景の流れややゆったりで12秒で1ループ（数字を小さくするとより速くなります） */
   animation: scroll-bg-right 22s linear infinite;
   will-change: transform;
   transform: translate3d(0, 0, 0);
   backface-visibility: hidden;
   perspective: 100px;  /*2000px*/
  }


  .slide-group img {
    width: 600px;    /* 600背景写真の横幅 */
    height: 250px;   /* ステージの高さに合わせる */
    object-fit: cover;
    filter: blur(0px) brightness(1.0); /* わずかにぼかして速度感と主役の車を引き立てる */
  }

  /* 背景を右に流すアニメーション（シームレス） */
  @keyframes scroll-bg-right {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(-0%); }
  }

  /* ② 手前に静止（固定）配置する切り抜き車 */
  .car-wrapper {
    position: absolute;
    top: 250px;
	margin-bottom: 300px;/* 下からの位置調整 */
    left: 50%; /* バスの左右位置 */
    transform: translateX(-50%);
    z-index: 9999;     /* 背景より手前に配置 */
    pointer-events: none; /* クリックなどの邪魔をしない */

	  
    /* 車体をガタガタ揺らすアニメーション（0.15sで微振動） */
    animation: car-vibration 0.9s linear infinite;
  }
  .car-wrapper img {
    width: 320px;    /* スマホ基準の車のサイズ */
    height: auto;
    display: block;
	z-index: 9999;     /* 背景より手前に配置 */
  }

  /* 車の微振動アニメーション（上下に1px、角度をわずかに変える） */
  @keyframes car-vibration {
    0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
    25% { transform: translateX(-50%) translateY(-1px) rotate(0.1deg); }
    50% { transform: translateX(-50%) translateY(1px) rotate(-0.1deg); }
    75% { transform: translateX(-50%) translateY(-0.5px) rotate(0deg); }
    100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  }

 /* 画面幅が狭いとき ------------------------------------------*/
@media (min-width: 200px)and (max-width: 500px) {
	.stage-container { height: 700px; }
	.car-wrapper img {
	width: 80vw;       /* ブラウザーの幅の70% */
    max-width: 600px;   /* ブラウザー幅が画像の本来のサイズより狭い場合は縮小する */
    height: auto;    
    margin:-50px 30px 0 -20px; 
    display: block;
	z-index: 9999;     /* 背景より手前に配置 */
  }
	.car-wrapper{
		text-align: center; /* 親要素に指定する */
		left: 55%; /* バスの左右位置 */
	}
	
	
	.menu-list {
  white-space:normal;
  display: flex; /* 横並びにする */
  flex-wrap: nowrap; /* 折り返しを禁止する */
  list-style: none;
  padding: 0;
  margin: 20px;
}
	
	
}




  /* 画面幅が広いとき（PCなど）は車を少し大きくする ------------------------------------------*/
  @media (min-width: 900px) {
    .stage-container { height: 950px; }
    .slide-group img { height: 400px; width: 800px; }
    .car-wrapper img { width: 600px; } /* 車を大きく */
    .car-wrapper { bottom: 100px; }
	  
	.yunokaze-mark img{
	 position: absolute;
	width: 800px;
    height:auto; /* イラストと文字 */
    top: 590px;
	  margin-bottom: 00px;/* 下からの位置調整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;     /* 背景より手前に配置 */
    pointer-events: none; /* クリックなどの邪魔をしない */
}  
	  
	  
  }






/* 桶の中のお湯の色を変える */
.thumbnail{
 flex: 1; /* 木枠の中にいっぱい広げる */
 border-radius: 60px; /* 内側の角も少し丸める */

 background: linear-gradient(45deg,  #feb47b, #86e3ce, #d6e4f0);
 background-size: 400% 400%;
 animation: gradientAnimation 15s ease infinite;
}

/* アニメーションの定義（前回と同じ） */
@keyframes gradientAnimation {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

/* ここまで　おけの「ふち（木枠）」の設定 ---------------------------------*/


/* 写真が流れていく　コンテナの設定 -----------------------------*/
.slider {
  overflow: hidden; /* 画面外にはみ出た写真を隠す */
  width: 100%;      /* 表示領域の幅 */
}

/* 写真を横並びにして動かすトラック */
.slider-track {
  display: flex;
  width: max-content;
  animation: scroll 15s linear infinite; /* 移動時間、イージング、無限ループ */
}

/* 写真のサイズ設定 */
.slider-track img {
  width: 20px; /* 例：写真の幅 */
  height: auto;
}

/* アニメーションの定義 */
@keyframes scroll {
  0% {
    transform: translateX(50%);
  }
  100% {
    transform: translateX(-50%); /* 写真2枚分の半分（1枚分）左に移動する */
  }
}
/* ここまで　写真が流れていく　コンテナの設定 -----------------------------*/