.client-logos {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 8px 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
	mask-image: linear-gradient( to right, transparent, #000 5%, #000 95%, transparent );
}

.client-logos__row {
	overflow: hidden;
}

.client-logos__track {
	display: flex;
	align-items: center;
	gap: 48px;
	width: max-content;
	animation: client-logos-scroll 40s linear infinite;
}

.client-logos__row--b .client-logos__track {
	animation-direction: reverse;
}

.client-logos__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
}

.client-logos__item img {
	height: 100%;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

@keyframes client-logos-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

/* アニメーションを好まない設定のユーザー向けに、自動スクロールを止めて
   横スクロールで手動閲覧できるようにする */
@media ( prefers-reduced-motion: reduce ) {
	.client-logos__track {
		animation: none;
	}

	.client-logos__row {
		overflow-x: auto;
	}
}

@media ( max-width: 600px ) {
	.client-logos {
		gap: 16px;
	}

	.client-logos__track {
		gap: 32px;
	}

	.client-logos__item {
		height: 40px;
	}

	.client-logos__item img {
		max-width: 110px;
	}
}