@charset "UTF-8";

/* ============================================================
   ロゴマーキー 共通パーツ
   ------------------------------------------------------------
   ・CSS のみで動作（JS 不要）
   ・同じ画像を 1 行あたり 4 枚並べ、translateX(-25%)（= 画像1枚分）
     だけ動かして無限ループさせる
   ・画像の実寸を CSS に書かないので、画像を差し替えても
     この CSS は修正不要（各行とも同じサイズの画像を使うこと）
   ・行間は gap の値と、画像に入っている上下の余白の合計で決まる。
     現在の画像は上下に10pxずつ余白があり、表示時は上下8pxずつになるため、
     gap 14px + 8px + 8px = 見た目の行間 30px

   調整はすべて下記の CSS 変数で行う
     --logo-marquee-height   … 画像1枚の表示高さ
     --logo-marquee-gap      … 行と行の間隔（画像の上下余白のぶん、見た目はこれより広くなる）
     --logo-marquee-duration … 画像1枚分を流しきる時間

   流れる向きは行に --left / --right を付けて指定する
   外側の余白はページ側のクラス（例: .sec01__marquee）で指定する
   ============================================================ */

/* ------------------------------------------------------------
   全体
   ------------------------------------------------------------ */
.logo-marquee {
  --logo-marquee-height: min(calc(56 / 1080 * 100vw), 56px);
  --logo-marquee-gap: min(calc(14 / 1080 * 100vw), 14px);
  --logo-marquee-duration: 20s;
  display: flex;
  flex-direction: column;
  gap: var(--logo-marquee-gap);
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .logo-marquee {
    --logo-marquee-height: calc(56 / 750 * 100vw);
    --logo-marquee-gap: calc(17 / 750 * 100vw);
  }
}

/* ------------------------------------------------------------
   行
   ------------------------------------------------------------ */
.logo-marquee__row {
  overflow: hidden;
}

/* ------------------------------------------------------------
   流れる帯
   ------------------------------------------------------------ */
.logo-marquee__wrapper {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  will-change: transform;
  animation: logo-marquee-scroll var(--logo-marquee-duration) linear infinite;
}

/* 左へ流れる */
.logo-marquee__row.--left .logo-marquee__wrapper {
  animation-direction: normal;
}

/* 右へ流れる */
.logo-marquee__row.--right .logo-marquee__wrapper {
  animation-direction: reverse;
}

/* ------------------------------------------------------------
   画像
   ------------------------------------------------------------ */
.logo-marquee__img {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: var(--logo-marquee-height);
}

/* 画像4枚のうち1枚分だけ動かす */
@keyframes logo-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}

/* ------------------------------------------------------------
   動きを減らす設定の環境では停止する
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee__wrapper {
    animation: none;
  }
}