@charset "UTF-8";

/* スクロールテキストを表示させたいセクション（デフォルト：スマホ用） */
section.ugokumoji {
  position: relative;
  height: 20vw;
  margin: 0;
  padding: 0;
  background-color: #eee;
  z-index: -99;
}

.scroll_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;  /* セクションの高さに合わせる */
  overflow: hidden;
  z-index: -99;
}

.scroll_text {
  display: flex;
  width: 200%; /* 複数枚分の横幅。スクロールに合わせて調整 */
  animation: scroll 30s linear infinite;
}

/* 画像の高さはセクションと同じ */
.scroll_text img {
  width: auto;
  height: 20vw;
}

/* アニメーション設定 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (min-width: 768px) {
  section.ugokumoji {
    height: 10vw;
  }
  .scroll_text img {
    height: 10vw;
  }
}
