/* ============================================================
 * 企業ロゴ無限スクロール
 *
 * 出力HTML構造（手書きラッパー＋ショートコード出力直挿し）：
 *   <section class="p-companies">
 *     <div class="p-companies__track">
 *       <div class="infiniteslide2"><ul>...</ul></div>
 *       <span class="-1"></span>
 *       <div class="infiniteslide"><ul>...</ul></div>
 *       <span class="-1"></span>
 *       <div class="infiniteslide2"><ul>...</ul></div>
 *       <span class="-1"></span>
 *       <div class="infiniteslide"><ul>...</ul></div>
 *     </div>
 *   </section>
 *
 * companies.js が以下を実行：
 *   1. 各 <ul> を最長レーン基準で複製（行ずれ防止）
 *   2. ループ用にさらに2倍複製
 *   3. 全要素の幅を px で固定（iOS Safari の max-content ブレ対策）
 *   4. @keyframes を px 単位で動的生成（% 計算を排除）
 *   5. .p-companies に .is-ready クラスを付与（フェードイン）
 *
 * ブレークポイント方針（_form.scss と同じ三段階）：
 *   - PC基準 1440px : 固定値
 *   - lg  (max-width: 1439px) : calc(値 / 1440 * 100vw) で比例縮小
 *   - md  (max-width:  767px) : calc(SP値 / 375 * 100vw) で比例縮小
 * ============================================================ */

/* JS の幅計算が終わるまでは非表示（バタバタ防止）。
   .is-ready が付いたらフェードインで表示。 */
.p-companies {
  overflow: hidden;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.p-companies.is-ready {
  opacity: 1;
}

/* ショートコードが挿入する <span class="-1"> 区切りは表示しない */
.p-companies span.-1 {
  display: none;
}

/* 4レーンを縦並びにする外側 track。ここで全レーン同期のアニメを動かす。 */
.p-companies__track {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: max-content;
  animation: p-companies-scroll 80s linear infinite;
  will-change: transform;
}
@media (max-width: 767px) {
  .p-companies__track {
    animation-duration: 40s;
  }
}

/* 各レーンのコンテナ */
.p-companies .infiniteslide,
.p-companies .infiniteslide2 {
  width: max-content;
  overflow: visible;
  min-width: 0;
}

/* <ul> を flex 横並びに（animation はここでは付けない、外側 track に集約） */
.p-companies .infiniteslide ul,
.p-companies .infiniteslide2 ul {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-companies .infiniteslide li,
.p-companies .infiniteslide2 li {
  flex-shrink: 0;
  margin-right: 24px;
  list-style: none;
}
@media (max-width: 1439px) {
  .p-companies .infiniteslide li,
  .p-companies .infiniteslide2 li {
    margin-right: calc(24 / 1440 * 100vw);
  }
}
@media (max-width: 767px) {
  .p-companies .infiniteslide li,
  .p-companies .infiniteslide2 li {
    margin-right: calc(16 / 375 * 100vw);
  }
}

.p-companies .infiniteslide a,
.p-companies .infiniteslide2 a {
  display: block;
}

.p-companies .infiniteslide img,
.p-companies .infiniteslide2 img {
  display: block;
  height: 72px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 1439px) {
  .p-companies .infiniteslide img,
  .p-companies .infiniteslide2 img {
    height: calc(72 / 1440 * 100vw);
  }
}
@media (max-width: 767px) {
  .p-companies .infiniteslide img,
  .p-companies .infiniteslide2 img {
    height: calc(40 / 375 * 100vw);
  }
}

/* @keyframes p-companies-scroll は companies.js が px 単位で動的生成する。
   JS実行前のフォールバック用にここでも一応定義しておく。 */
@keyframes p-companies-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}