.scrolling-section {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 0;
  background: #000;
  padding: 20px 0;
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

.scrolling-track {
  display: flex;
  width: calc(10 * 52vw); /* 52vw = 60vw - 8vw */
  animation: scroll-left 18s linear infinite;
}

.slide {
  width: 60vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -8vw;
}

.image-mask {
  width: 100%;
  aspect-ratio: 1 / 0.55;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
  overflow: hidden;
}

.image-mask img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.text-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 10px 5px;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.4;
}

.text-box .name {
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 2px;
}

.text-box .company {
  font-size: 1.3rem;
  margin-bottom: 2px;
}

.text-box .title {
  font-size: 1.2rem;
  color: #ccc;
}

/* アニメーションは共通で -50% にする */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* PC 表示 */
@media screen and (min-width: 769px) {
  .scrolling-track {
    width: calc(10 * 23vw); /* 25vw - 2vw */
    animation: scroll-left 40s linear infinite;
  }

  .slide {
    width: 25vw;
    margin-left: -2vw;
  }
}