/*========= 流れるテキスト ===============*/

/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
}

.slide-in_inner {
  display: inline-block;
  width: 100%;
}

/* アニメーション前の状態 */
.rightAnime {
  opacity: 0; /* 事前に透過0にして消しておく */
  transform: translateX(100%); /* 右にずらす */
  display: none; /* 読み込み時に非表示にしておく */
}

/* 右から左へスライドするアニメーション */
.slideAnimeRightLeft {
  animation-name: slideTextXRightToLeft;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  display: block; /* アニメーション開始時に表示 */
}

@keyframes slideTextXRightToLeft {
  from {
    transform: translateX(100%); /* 右の枠外に配置 */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* 元の位置に移動 */
    opacity: 1;
  }
}

/* 左から右へスライドするアニメーション（逆向き） */
.slideAnimeLeftRight {
  animation-name: slideTextXLeftToRight;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

@keyframes slideTextXLeftToRight {
  from {
    transform: translateX(-100%); /* 左の枠外に配置 */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* 元の位置に移動 */
    opacity: 1;
  }
}