/* =====================================
   横スクロール全体
===================================== */

.flow-strip {
  width: 100%;
  overflow: hidden;

  padding: 70px 0 90px;

  background: none;
}


/* =====================================
   動くトラック
===================================== */

.flow-track {
  display: flex;

  width: max-content;

  will-change: transform;

  animation: marquee 24s linear infinite;
}


/* =====================================
   1セット
===================================== */

.flow-group {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  gap: 42px;

  /* 次セットとの間隔 */
  padding-right: 42px;
}


/* =====================================
   各要素
===================================== */

.flow-item {
  flex: 0 0 auto;
}


/* =====================================
   文字
===================================== */

.flow-text {
  font-size: clamp(54px, 8vw, 130px);

	font-family: 'Homemade Apple', cursive;

  font-weight: 800;

  letter-spacing: -0.055em;

  line-height: 0.9;

  white-space: nowrap;
}


/* =====================================
   画像共通
===================================== */

.photo {
  overflow: hidden;
}

.photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =====================================
   画像 1
===================================== */

.photo-a {
  width: clamp(200px, 22vw, 350px);

  aspect-ratio: 1 / 1;

  transform:
    translateY(-28px)
    rotate(-2deg);
}


/* =====================================
   画像 2
===================================== */

.photo-b {
  width: clamp(160px, 18vw, 290px);

  aspect-ratio: 1 / 1;

  transform:
    translateY(32px)
    rotate(2deg);
}


/* =====================================
   画像 3
===================================== */

.photo-c {
  width: clamp(190px, 20vw, 320px);

  aspect-ratio: 1 / 1;

  transform:
    translateY(-10px)
    rotate(1deg);
}


/* =====================================
   無限スクロール
===================================== */

/*
  同じ内容を4セット入れているので
  全体の25% = ちょうど1セット分。

  1セット移動したところで
  アニメーションが先頭へ戻る。

  その場所には同じセットがあるので
  見た目では切り替わりが分からない。
*/

@keyframes marquee {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-25%, 0, 0);
  }

}


/* =====================================
   スマートフォン
===================================== */

@media (max-width: 700px) {

  .flow-strip {
    padding: 55px 0 68px;
  }


  .flow-group {
    gap: 22px;

    padding-right: 22px;
  }


  .flow-text {
    font-size: 54px;
  }


  .photo {
    border-radius: 14px;
  }


  /* 画像1 */

  .photo-a {
    width: 190px;

    aspect-ratio: 1 / 1;

    transform:
      translateY(-18px)
      rotate(-2deg);
  }


  /* 画像2 */

  .photo-b {
    width: 150px;

    aspect-ratio: 1 / 1;

    transform:
      translateY(22px)
      rotate(2deg);
  }


  /* 画像3 */

  .photo-c {
    width: 175px;

    aspect-ratio: 1 / 1;

    transform:
      translateY(-8px)
      rotate(1deg);
  }

}