/*
 * 導入実績ロゴ：プラグインで新しく作った型だけのCSS。
 * ほかの型は、テーマのCSSをそのまま使う。
 */

/* ① サポート実績（6列の一覧） */
.ipe-logos-achievements {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 24px 16px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.ipe-logos-achievements__item {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0;
   list-style: none;
}

.ipe-logos-achievements__item img {
   display: block;
   width: 100%;
   box-sizing: border-box;
   padding: 12px 22px;
   height: auto !important;
   aspect-ratio: 7 / 4;
   object-fit: contain;
}

@media screen and (max-width: 767px) {
   .ipe-logos-achievements {
      grid-template-columns: repeat(3, 1fr);
      gap: 16px 12px;
   }
}

/* ② 2段で流れるロゴ（上の段は右へ、下の段は左へ） */
.ipe-logos-marquee__row {
   overflow: hidden;
   height: 88px;
}

.ipe-logos-marquee__track {
   display: flex;
   width: max-content;
   height: 100%;
   animation: ipe-logos-marquee var(--ipe-logos-marquee-duration, 80s) linear infinite;
}

.ipe-logos-marquee__row--right .ipe-logos-marquee__track {
   animation-direction: reverse;
}

.ipe-logos-marquee__list {
   display: flex;
   align-items: center;
   height: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
}

.ipe-logos-marquee__list li {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   height: 100%;
   margin: 0;
   padding: 0 20px;
   list-style: none;
}

.ipe-logos-marquee__list img {
   display: block;
   width: auto;
   max-width: 150px;
   height: 44px !important;
   object-fit: contain;
}

@media screen and (min-width: 768px) {
   .ipe-logos-marquee__row {
      height: 113px;
   }

   .ipe-logos-marquee__list li {
      padding: 0 28px;
   }

   .ipe-logos-marquee__list img {
      max-width: 170px;
      height: 48px !important;
   }
}

/* The list is rendered twice, so moving by half the track loops seamlessly. */
@keyframes ipe-logos-marquee {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(-50%);
   }
}

@media (prefers-reduced-motion: reduce) {
   .ipe-logos-marquee__track {
      animation: none;
   }
}