/* アプデ人事LP：FV直下の導入企業ロゴ帯（上下2列を左右反対にゆっくり流す）
   ------------------------------------------------------------------
   マークアップは views/partials/hr_sponsors.php。読み込みは router.php の /update-hr ルート。
   参考は NP掛け払い（np-kakebarai.com）のFV下のロゴ帯。

   ★ ループの仕掛け（PHP側のコメントと対）
     1列ぶんを **5セット**並べ、トラックを 0% → **-20%**（＝1セットぶん）動かす。
     ちょうど1セット進んだ時点で見た目が開始位置と同じなので、そこで巻き戻せば継ぎ目が出ない。
     ⚠️ セット数とこのパーセントは**必ず対**（5セットなら1/5）。PHP側を変えたらここも直す。
     （2026-10-02 に7社＝4社＋3社へ減らした際、3セット→5セットに増やした。理由はPHP側）
     ⚠️ **`gap` を使ってはいけない。** `gap` は要素と要素の「間」にしか入らないので、
        繰り返しの1単位が `セル幅 + すきま` にならず、**-20% がセットの境目に着地しない**
        （数pxずれて、1周ごとにカクッと飛ぶ）。すきまは**全セルの margin-right** で作る＝
        1単位がきっちり `セル幅 + すきま` になる。

   ★ 1周の時間 = 1社あたりの時間（--sp-per）× その列の社数（--sp-n。PHPが列ごとに書く）。
     社数が違う列どうしでも流れる速さ（px/秒）が揃う。
   ★ 動かすのは transform だけ（レイアウトも再描画も起こさない）。
   ★ `prefers-reduced-motion: reduce` では止める。

   /css/style.css はビルド済みTailwindで新規クラスを足せないため、このファイルに独立して書く。 */

.sponsors {
  /* ★ 大きさは --sp-cell だけで決まる。
     画像は全社が同じ 480x140 のカンバスに中央配置してあるので、セル幅を変えれば
     **面積で揃えたバランスを保ったまま**全部が相似形で拡縮する。
     ⚠️ ここで max-height を使ってはいけない。背の高いロゴだけ余分に縮んでバランスが崩れる。 */
  --sp-cell: 230px;      /* ロゴ1枚ぶんの枠の幅（枠の高さは 140/480 倍で決まる） */
  --sp-gap: 8px;
  --sp-per: 10.6667s;    /* 1社ぶん進むのにかける時間。長いほどゆっくり（旧: 6社で64s と同じ速さ） */

  position: relative;
  z-index: 1;
  background: #fff;
  padding: 34px 0 38px;
  overflow: hidden;
}

.sponsors-label {
  margin: 0 0 20px;
  padding: 0 24px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-align: center;
  color: #8a99a3;
}

/* 1列ぶんの窓。左右の端はフェードで消す（画面端でロゴが切れると雑に見える）。
   ⚠️ mask は -webkit- 付きも書く。Safariが素の mask-image をまだ拾わないことがある。 */
.sponsors-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.sponsors-row + .sponsors-row {
  margin-top: 14px;
}

.sponsors-track {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  width: max-content;   /* 中身なりに伸ばす。これが無いと -20% がずれる */
  will-change: transform;
  animation: sponsors-slide calc(var(--sp-per) * var(--sp-n, 6)) linear infinite;
}

/* 下の列は逆向き。`animation-direction: reverse` だと開始位置が端になって
   最初の一瞬だけ空白が見えるので、専用のキーフレームで -20% から始める */
.sponsors-row--right .sponsors-track {
  animation-name: sponsors-slide-rev;
}

@keyframes sponsors-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-20%, 0, 0); }
}

@keyframes sponsors-slide-rev {
  from { transform: translate3d(-20%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* ⚠️ ホバーで止めない（2026-09-11 に入れて、同日ユーザー指摘で外した）。
   「読みたいときに止まる」つもりだったが、**ロゴ帯はリンクでも操作対象でもない**ので
   カーソルがたまたま乗っただけで止まり、故障に見える。
   止めるのは prefers-reduced-motion（OS設定でアニメーションを減らしている人）だけにする。 */

@media (prefers-reduced-motion: reduce) {
  .sponsors-track {
    animation: none;
  }
}

.sponsors-item {
  flex: 0 0 var(--sp-cell);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  /* ⚠️ gap ではなく margin。最後の1枚にも付くことで、繰り返しの1単位が
     きっちり「セル幅 + すきま」になる（上のコメント参照） */
  margin-right: var(--sp-gap);
}

.sponsors-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 1280px) {
  .sponsors {
    --sp-cell: 290px;
    --sp-gap: 12px;
    padding: 44px 0 50px;
  }

  .sponsors-row + .sponsors-row {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1023px) {
  .sponsors {
    --sp-cell: 210px;
    --sp-gap: 8px;
  }
}

/* SPも2列のまま流す（折り返して行数を増やさない＝ユーザー指示）。
   セルを詰めるだけで、構造は同じ。 */
@media screen and (max-width: 767px) {
  .sponsors {
    --sp-cell: 168px;
    --sp-gap: 4px;
    --sp-per: 7.6667s;   /* 幅が狭いぶん1周が短くなるので、速く見えないよう合わせて縮める（旧: 6社で46s） */
    padding: 26px 0 30px;
  }

  .sponsors-label {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .sponsors-row + .sponsors-row {
    margin-top: 10px;
  }
}