/**
 * Mejiro → SNS（下から覆いかぶさるストーリーズ風トランジション）
 */

.front-sns-stories {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #f0f4fa;
}

.front-sns-stories__backdrop {
	position: relative;
	z-index: 1;
	width: 100%;
}

.site-main--front .front-sns-stories__backdrop {
	border-top: none;
}

.site-main--front .front-sns-stories__backdrop.front-mejiro {
	overflow: hidden;
	background: #f0f4fa;
}

/* SNS パネル: top:0 の absolute — y:100% → y:0 で Mejiro を覆う */
.front-sns-stories > #section-sns {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	min-height: 100vh;
	min-height: 100dvh;
	align-items: flex-start;
	justify-content: flex-start;
	padding: clamp( 2.75rem, 7vw, 4.5rem ) clamp( 1rem, 4vw, 2rem ) clamp( 3rem, 8vw, 5rem );
	background-color: var( --fs-surface-b, #ffffff );
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
	box-shadow: 0 -10px 40px rgba( 0, 0, 0, 0.25 );
	overflow-x: clip;
	will-change: transform;
}

.site-main--front .front-sns-stories > #section-sns {
	background-color: var( --fs-surface-b, #ffffff );
}

/* ScrollTrigger pin-spacer の白い隙間対策 */
div.pin-spacer:has( > .front-sns-stories ) {
	background-color: #f0f4fa !important;
}

.front-sns-stories__progress {
	position: absolute;
	top: clamp( 1rem, 3vw, 1.25rem );
	left: 50%;
	transform: translateX( -50% );
	width: min( 90%, 36rem );
	height: 4px;
	background: rgba( 26, 43, 72, 0.1 );
	border-radius: 2px;
	z-index: 11;
	pointer-events: none;
}

.front-sns-stories__progress-bar {
	width: 0;
	height: 100%;
	background: var( --fs-heading, #1a2b48 );
	border-radius: 2px;
}

.front-sns-stories__stack {
	position: relative;
	z-index: 1;
	width: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	.front-sns-stories > #section-sns {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		will-change: auto;
		transform: none !important;
		margin-top: -2.5rem;
	}

	.front-sns-stories__progress-bar {
		width: 100%;
	}
}