/* --- 全体のレイアウト設定 --- */
.infinite-slider-container {
  overflow: hidden; /* 画面外にはみ出た画像を表示させない */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0px; /* 段と段の間の隙間 */
  padding: 0px 0;
  background-color: #fff;
}

.slider-row {
  width: 100%;
  overflow: hidden;
}

/* --- アニメーションが動くトラック --- */
.slider-track {
  display: flex;
  width: max-content; /* 中身（2つのブロック）の総幅に自動合わせする */
}

/* --- 画像を並べるコンテナ --- */
.slider-items {
  display: flex;
  /*gap: 0px; /* 画像と画像の間の隙間 */
  padding-right: 0px; /* 2つのブロックが繋がる部分の隙間を確保 */
}

.slider-items img {
  width: 1180px;         /* 画像の横幅（レスポンシブに合わせて調整可） */
  height: 200px;        /* 画像の縦幅 */
  object-fit: cover;    /* 画像の比率を崩さずトリミング */
  border-radius: 0px;  /* 画像の角を丸くする（おしゃれ用） */
}

/* --- レスポンシブ　--- */
@media screen and (max-width: 500px) {
  .slider-items img {
    width: 580px;         /* 画像の横幅（レスポンシブに合わせて調整可） */
    height: 100px;        /* 画像の縦幅 */
    object-fit: cover;    /* 画像の比率を崩さずトリミング */
    border-radius: 0px;  /* 画像の角を丸くする（おしゃれ用） */
  }
}

/* --- スピード調整（秒数が短いほど速い） --- */
.speed-fast .slider-track {
  animation: loop-left 60s linear infinite;
}

.speed-medium .slider-track {
  animation: loop-right 100s linear infinite;
}

.speed-slow .slider-track {
  animation: loop-left 120s linear infinite;
}

/* --- アニメーションの定義 --- */
@keyframes loop-left {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 全体の半分（1ブロック分）が左に流れた瞬間に位置を0%に戻す */
    transform: translateX(-50%);
  }
}

/* ★新しく追加する右流れ */
@keyframes loop-right {
  0% {
    /* 最初から半分（1ブロック分）左にズラした状態からスタート */
    transform: translateX(-50%);
  }
  100% {
    /* 元の位置に戻す */
    transform: translateX(0);
  }
}

/*  オプション：マウスホバー時に動きを止めたい場合 
.slider-track:hover {
  animation-play-state: paused;
}
*/


/* --- 親コンテナ（既存のコードに1行追加） --- */
.infinite-slider-container {
  position: relative; /* ★重要：タイトルの配置基準にするために追加 */
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding:0 0 5px 0;
  background-color: #fff; /* 背景を黒にすると画像の間が引き締まります */
}

/* --- ★追加：タイトル全体の配置と装飾 --- */
.slider-title-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 要素自体の中心を真ん中に合わせる */
  z-index: 10;                     /* 画像（デフォルトはz-index: 0）より前面に出す */
  text-align: center;
  width: 100%;                     /* テキスト中央揃えのため幅を100%に */
  pointer-events: none;            /* タイトル文字が画像へのマウスホバー（停止）を邪魔しないようにする */
}

.jamp_logo{
  margin:40px 10px;width:240px; opacity: 1.0!important;
}

.slider-back-overlay{
  background-color: #315499;
  opacity: 0.9;
  width: 420px;
  padding: 30px 10px;
}

/* --- レスポンシブ　--- */

@media screen and (max-width: 500px) {
.slider-back-overlay{
  background-color: #315499;
  opacity: 0.8;
  width: 80%;
  padding: 10px;
}
.jamp_logo{
  margin:10px 0px;width:140px; opacity: 1.0!important;
}
h1.main-title {
  font-size: 1.5em;
  line-height: 1.2em;
}
h2.title {
  font-size: 1.3rem;
}
h3 {
  font-size: 1.1rem;
}
}

/* タイトル文字（デザインはお好みで調整してください） */
.main-title {
  font-size: 2.0rem;
  font-weight: 800;
  color: #ffffff;
  margin: 20px 0;
  letter-spacing: 0.05em;
  /* 背景画像と重なっても文字を読みやすくするために影をつける 
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); */
}

.sub-title {
  font-size: 1.0rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.05em;
  text-align: center;
  /*text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);*/
}