/**
 * リッチカラム右カラム クロスフェードレール
 * 900px 以上でのみ有効。
 */

@media (min-width: 900px) {

	/* 元の右カラムはレイアウト幅を保ったまま非表示 */
	.swell-block-column.is-rail-hidden {
		visibility: hidden !important;
	}

	/* 固定レールコンテナ */
	#bandRailStack {
		position: absolute;
		top: 0;
		z-index: 100;
		pointer-events: none;
		box-sizing: border-box;
	}

	/* 本体から 2vw 左に区切り線 */
	#bandRailStack::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: -2vw;
		width: 1px;
		background-color: var(--color_border, #e5e5e5);
		pointer-events: none;
	}

	#bandRailStack .rail-card {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		transition: opacity 0.6s ease;
		pointer-events: none;
	}

	/* 最初のカードだけ relative にしてコンテナの高さを確保 */
	#bandRailStack .rail-card:first-child {
		position: relative;
	}

	#bandRailStack .rail-card.active {
		opacity: 1;
		pointer-events: auto;
	}
}

/* 900px 未満ではレールを無効化（JS 側でも teardown するが保険） */
@media (max-width: 899px) {
	#bandRailStack {
		display: none !important;
	}

	.swell-block-column.is-rail-hidden {
		visibility: visible !important;
	}
}