/* ================================================================
   WORKS (TOP) — approved logo list
   ================================================================ */
.a010-works { padding-top: 120px; padding-bottom: 120px; }
.a010-works__lead {
  max-width: 48rem; margin: 28px 0 0;
  font-size: 1rem; line-height: 2; color: var(--g-60);
}
.a010-works__marquee {
  margin: 44px 0 0; overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.a010-works__track {
  display: flex; width: max-content; will-change: transform;
  animation: a010-works-slide 36s linear infinite;
}
.a010-works__marquee:hover .a010-works__track { animation-play-state: paused; }
.a010-works__note {
  margin: 14px 0 0; font-size: 0.6875rem; line-height: 1.7; color: var(--g-50);
}
.a010-works__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 180px;
  margin: 0; padding: 0; list-style: none;
}
.a010-works__item {
  display: grid; place-items: center; min-height: 96px; padding: 18px 28px;
}
.a010-works__item img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 32px;
  object-fit: contain;
}
.a010-works__item:nth-child(4) img { max-height: 42px; }
.a010-works__item:nth-child(6) img { max-height: 19px; }
.a010-works__item:nth-child(8) img,
.a010-works__item:nth-child(9) img { max-height: 25px; }

@keyframes a010-works-slide { to { transform: translateX(-50%); } }

@media (max-width: 720px) {
  .a010-works { padding-top: 72px; padding-bottom: 72px; }
  .a010-works__lead { margin-top: 22px; font-size: 0.9375rem; line-height: 1.9; }
  .a010-works__marquee { margin-top: 30px; }
  .a010-works__list { grid-auto-columns: 165px; }
  .a010-works__item { min-height: 76px; padding: 14px 20px; }
  .a010-works__item img { max-height: 23px; }
  .a010-works__item:nth-child(4) img { max-height: 30px; }
  .a010-works__item:nth-child(6) img,
  .a010-works__item:nth-child(8) img,
  .a010-works__item:nth-child(9) img { max-height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .a010-works__marquee {
    overflow-x: auto;
    mask-image: none; -webkit-mask-image: none;
  }
  .a010-works__track { animation: none; }
}