.section-heading-row {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 32px;
}

.content-rail {
	--rail-stage-width: min(100vw, var(--figma-stage-max));
	--rail-inset: max(var(--page-gutter), calc((var(--rail-stage-width) - var(--content-max)) / 2));
	width: min(100%, var(--figma-stage-max));
	margin-inline: auto;
	margin-top: 72px;
	overflow-x: auto;
	padding-inline: var(--rail-inset);
	scroll-padding-inline-start: var(--rail-inset);
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.content-rail[data-loop-rail] {
	overscroll-behavior-inline: contain;
}

.content-rail::-webkit-scrollbar,
.creator-rail::-webkit-scrollbar {
	display: none;
}

.content-rail__track {
	display: flex;
	width: max-content;
	gap: 40px;
}

.content-rail__track::after {
	width: max(1px, calc((var(--rail-stage-width) - var(--content-max)) / 2 - 40px));
	content: "";
}

.content-rail__item {
	width: 640px;
	flex: none;
	scroll-snap-align: start;
}

.rail-controls {
	display: flex;
	gap: 12px;
}

.rail-control {
	display: grid;
	width: 52px;
	height: 52px;
	padding: 0;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease;
}

.rail-control:focus-visible {
	background: var(--color-text);
	color: var(--color-ink);
}

/* タッチ端末はタップ後に:hoverが残るため、ホバーできる入力に限定する。 */
@media (hover: hover) {
	.rail-control:hover {
		background: var(--color-text);
		color: var(--color-ink);
	}
}

@media (max-width: 899px) {
	.content-rail {
		margin-top: 48px;
	}

	.content-rail__track {
		gap: 20px;
	}

	.content-rail__item {
		width: 280px;
	}

	.rail-controls {
		display: none;
	}
}

/* 320px前後では36px見出しを縮めず、右側リンクだけ次の行へ送る。 */
@media (max-width: 340px) {
	.section-heading-row {
		flex-wrap: wrap;
	}

	.section-heading-row .view-more-link {
		margin-left: auto;
	}
}