/* この部品だけに適用し、フッターで使っている旧expTopBoxのレイアウトを維持する。 */
.top-experiences-viewport {
	--experiences-edge-fade: 64px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 0;
	/* バーだけを非表示にし、指操作・ホイール・キーボードの横移動は維持する。 */
	scrollbar-width: none;
	/* 端のロゴを徐々に透過させ、背景から急に出現・消失する見え方を防ぐ。
	 * 白い要素を重ねる方式と異なり、背景色に依存せずリンク操作も妨げない。 */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--experiences-edge-fade), #000 calc(100% - var(--experiences-edge-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--experiences-edge-fade), #000 calc(100% - var(--experiences-edge-fade)), transparent);
	/* ネイティブの指操作を使用し、ページの縦スクロールも妨げない。 */
	touch-action: pan-x pan-y;
	scroll-behavior: auto;
	/* 自動送り中にブラウザのスクロール位置補正が介入することを防ぐ。 */
	overflow-anchor: none;
}

/* Safari・Chromium系でもスクロールバーを表示しない。 */
.top-experiences-viewport::-webkit-scrollbar {
	display: none;
}

/* JSのドラッグ操作が使えるときだけ、画像や文字の選択を抑えて操作を案内する。 */
.top-experiences-viewport.is-draggable {
	-webkit-user-select: none;
	user-select: none;
}

.top-experiences-viewport.is-draggable,
.top-experiences-viewport.is-draggable .top-experiences-card {
	cursor: grab;
}

.top-experiences-viewport.is-dragging,
.top-experiences-viewport.is-dragging .top-experiences-card {
	cursor: grabbing;
}

.top-experiences-track {
	display: flex;
	width: max-content;
}

.top-experiences-list {
	display: flex;
	flex: 0 0 auto;
	gap: 20px;
	width: max-content;
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
}

.top-experiences-item {
	flex: 0 0 200px;
	width: 200px;
}

.top-experiences-card {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 132px;
	padding: 20px;
	/* ロゴだけが流れる見え方にし、カードの外枠・背景は付けない。 */
	color: #333;
	text-align: center;
}

.top-experiences-card:hover {
	color: #333;
}

/* 画像の縦横比を維持する。固定サイズのカードなので画像読込後もループ幅は変わらない。 */
.top-experiences-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 90px;
	object-fit: contain;
}

.top-experiences-name {
	font-size: 15px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.top-experiences-more {
	margin-top: 16px;
	text-align: right;
}

/* 通常時は枠なし。キーボード操作時だけ現在のリンクを識別できるようにする。 */
.top-experiences-card:focus-visible,
.top-experiences-viewport:focus-visible {
	outline: 2px solid #467c00;
	outline-offset: -3px;
}

@media (max-width: 767px) {
	/* この欄だけ余白を詰め、見出しとロゴ列をスマホの1画面内に収めやすくする。
	 * containerとの組合せで指定し、後から読み込む共通CSSの余白より優先する。 */
	.top-experiences.container {
		margin-top: 24px;
		padding-right: 8px;
		padding-left: 8px;
	}

	.top-experiences .headline {
		margin-bottom: 12px;
		padding-bottom: 0;
	}

	.top-experiences .headline h2 {
		margin-top: 0;
	}

	/* フェードを残しつつ、端のロゴが薄くなる範囲と上下の余白を小さくする。 */
	.top-experiences-viewport {
		--experiences-edge-fade: 16px;
		padding: 4px 0;
	}

	.top-experiences-list {
		gap: 12px;
		/* リスト末尾も同じ間隔にし、複製列とのつなぎ目に広い空白を作らない。 */
		padding-right: 12px;
	}

	/* カード内の余白も減らし、ロゴ自体を極端に小さくせず表示件数を増やす。 */
	.top-experiences-item {
		flex-basis: 120px;
		width: 120px;
	}

	.top-experiences-card {
		height: 88px;
		padding: 6px;
	}

	.top-experiences-logo {
		max-height: 64px;
	}

	.top-experiences-more {
		margin-top: 8px;
	}
}