/**
 * トップページ — スマートフォン向けレイアウト調整（767px 以下）
 * PC（768px 以上）は既存 CSS のまま。
 */

@media ( max-width: 767px ) {
	/* ── 横スクロール防止 ── */
	html:has( .site-main--front ) {
		overflow-x: clip;
	}

	.site-main--front,
	.entry--front,
	.site-main--front .front-scroll {
		overflow-x: clip;
		max-width: 100%;
	}

	/* 固定キャラの顔出しは SP では無効（毎スクロール計測＋fixed レイヤー） */
	.site-main--front .peek-chars {
		display: none !important;
	}

	/* 下層セクションは画面外で描画スキップ */
	.site-main--front .front-section--library,
	.site-main--front .front-used-sax-marquee,
	.site-main--front .front-section--used,
	.site-main--front .front-section--services,
	.site-main--front .front-section--online {
		content-visibility: auto;
		contain-intrinsic-size: 1px 800px;
	}

	/* ── セクション: 無理な 100vh をやめつつ十分な余白を確保 ── */
	.site-main--front .front-scroll .front-section:not( .front-section--store ) {
		min-height: auto;
		align-items: stretch;
		justify-content: flex-start;
		padding-block: clamp( 3.5rem, 10vw, 5rem );
	}

	.site-main--front .front-scroll > .front-section--about:last-child {
		min-height: auto;
		padding-block: clamp( 5rem, 15vw, 8rem );
		align-items: stretch;
	}

	/* 丘〜地面 SVG との継ぎ目 */
	.site-main--front .front-scroll {
		margin-top: calc( 1224.35 / 1280 * 100vw - 2px );
	}

	body.mouton-front-hero-temp .site-main--front .front-scroll {
		margin-top: 0;
	}

	/* ── ヒーロー・イントロ ── */
	.hero__reveal-title {
		font-size: clamp( 1.2rem, 5.2vw, 1.55rem );
		line-height: 1.75;
	}

	.hero__reveal-title-line:first-child {
		white-space: normal;
	}

	.hero__reveal-char {
		width: clamp( 7.5rem, 34vw, 11rem );
		max-height: min( 42vh, 16rem );
	}

	.hero__reveal-open {
		width: 2.75rem;
		height: 2.75rem;
		right: 0.85rem;
		bottom: 0.85rem;
	}

	.hero-room-card--br {
		right: 0.75rem;
		bottom: 0.75rem;
	}

	/* ── 覗きキャラ（重なり軽減） ── */
	.peek-chars__img {
		width: clamp( 56px, 13vw, 80px );
		top: 58vh;
	}

	/* ── About: SP 用に余白と要素サイズを最適化 ── */
	.front-about {
		gap: clamp( 1.5rem, 5vw, 2.5rem );
		/* 縦書き「About us」用の左ガターを確保（padding-inline で潰さない） */
		padding-top: 0;
		padding-right: clamp( 1rem, 4vw, 1.5rem );
		padding-bottom: 0;
		padding-left: clamp( 2.85rem, 12vw, 3.75rem );
	}

	.front-about__label {
		left: clamp( 0.55rem, 2.8vw, 0.9rem );
		top: 0.15rem;
	}

	.front-about__label-text {
		font-size: 1rem;
		letter-spacing: 0.1em;
	}

	.front-about__label-line {
		height: clamp( 80px, 16vh, 140px );
	}

	.front-about__title {
		font-size: clamp( 1.35rem, 5.5vw, 1.9rem );
		margin-bottom: 1rem;
		white-space: normal;
	}

	.front-about__text {
		font-size: 0.9rem;
		line-height: 1.9;
	}

	.front-about__btn {
		margin-top: 1.25rem;
		min-width: min( 100%, 18rem );
	}

	/* ── Store Books: sticky アニメーションを解除して静的レイアウト ── */
	.front-store-books__sticky {
		position: relative !important;
		height: auto !important;
		overflow: visible !important;
	}

	.front-store-books__stage {
		position: relative !important;
		inset: auto !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		padding: clamp( 2rem, 6vw, 3rem ) clamp( 0.75rem, 3vw, 1.25rem ) !important;
	}

	.front-store-books__rail {
		display: none !important;
		height: 0 !important;
	}

	.front-store-books__arch {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		visibility: visible !important;
		margin-bottom: 0.75rem;
		min-height: 0;
		overflow: hidden;
	}

	.front-store-books__next {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		width: 100% !important;
		padding: 1.5rem 0.5rem;
		margin-bottom: 1rem;
	}

	.front-store-books__next-link {
		opacity: 1 !important;
	}

	.front-store-books__next-logo-wrap > .front-store-books__next-logo {
		opacity: 1 !important;
	}

	.front-store-books__ui {
		position: relative !important;
		width: 100% !important;
		opacity: 1 !important;
	}

	.front-store-books__carousel-outer {
		grid-template-columns: 36px minmax( 0, 1fr ) 36px !important;
		column-gap: 8px !important;
		padding-inline: 0 !important;
		width: 100% !important;
	}

	.front-store-books__carousel {
		height: clamp( 200px, 50vw, 260px ) !important;
	}

	.front-store-books .front-library-carousel__item {
		visibility: visible !important;
	}

	.front-store-books__iris,
	.front-store-books__iris-panel,
	.front-store-books__iris-brand,
	.front-store-books__iris-title,
	.front-store-books__iris-tiles {
		display: none !important;
	}

	/* ── Store → Library: 縁・帯なしで断面を直結 ── */
	.site-main--front .front-section--store {
		min-height: 0;
		padding: 0;
		margin: 0;
		border: 0;
		background: transparent;
	}

	.site-main--front .front-section--store::after {
		display: none;
	}

	.site-main--front .front-section--library {
		margin: 0;
		border: 0;
	}

	/* Used サックス帯〜本体: 紺固定・全幅 */
	.front-used-sax-marquee {
		--used-mix: 1;
		padding-block: clamp( 1.25rem, 3vw, 2rem );
		background-color: var( --fs-navy, #1a2b48 );
		border: 0;
	}

	.front-used-sax-marquee::before {
		opacity: 1;
	}

	.site-main--front .front-section--used.front-section--band-b {
		--used-mix: 1;
		background: var( --fs-navy, #1a2b48 );
		padding-block: clamp( 3.5rem, 10vw, 5rem );
		border: 0;
		margin: 0;
	}

	.site-main--front .front-section--used.front-section--band-b::before {
		opacity: 1;
	}

	.site-main--front .front-section--used {
		padding-block: clamp( 3.5rem, 10vw, 5rem );
	}

	.front-used__ghost {
		will-change: auto;
		transform: translate3d( -8vw, -50%, 0 );
	}

	/* ── Services: 左右に余白・タイトルを画面端から離す ── */
	.site-main--front .front-section.front-section--services {
		padding-block: clamp( 3.5rem, 10vw, 5rem );
		padding-inline: clamp( 1.35rem, 6vw, 2rem );
	}

	.site-main--front .front-section.front-section--services.front-section--band-a {
		padding-inline: clamp( 1.35rem, 6vw, 2rem );
	}

	.front-section--services .front-section__title {
		font-size: clamp( 2.35rem, 10.5vw, 3.35rem );
		-webkit-text-stroke: 2.5px #111111;
		text-shadow: 5px 5px 0 #111111;
		margin: 0 0.15rem 1.75rem;
		line-height: 0.95;
		max-width: 100%;
		box-sizing: border-box;
	}

	.front-section--services .front-services__lead {
		font-size: 0.95rem;
		padding: 1.1rem;
		box-shadow: 4px 4px 0 #111111;
		margin-bottom: 1.5rem;
	}

	.front-section--services .front-section__media {
		height: clamp( 200px, 52vw, 260px );
		box-shadow: 6px 6px 0 #111111;
	}

	.front-section--services .front-section__media::after {
		font-size: 0.85rem;
		padding: 8px 14px;
		top: -14px;
		right: -10px;
	}

	.front-section--services .front-services__list {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.front-section--services .front-services__item {
		transform: none !important;
	}

	.front-section--services .front-section__link--primary {
		margin-top: 2.5rem;
		padding: 1rem 1.75rem;
		font-size: 1.15rem;
		box-shadow: 6px 6px 0 #111111;
		width: 100%;
		max-width: 20rem;
		text-align: center;
		box-sizing: border-box;
	}

	/* ── Used → Services: スライド pin をやめ通常縦並び ── */
	.used-services-wrapper {
		height: auto !important;
		overflow: visible !important;
	}

	.used-services-wrapper > #section-services {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		transform: none !important;
		will-change: auto;
	}

	div.pin-spacer:has( > .used-services-wrapper ) {
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
	}

	/* ── Mejiro: ロゴを中央揃え ── */
	.front-mejiro__inner {
		align-items: center;
		text-align: center;
	}

	.front-mejiro__logo {
		margin-inline: auto;
	}

	.front-mejiro__copy {
		align-items: center;
		text-align: center;
	}

	.front-mejiro__btn {
		justify-content: center;
	}

	/* ── Mejiro / SNS ストーリーズ ── */
	.front-sns-stories {
		height: auto !important;
	}

	.front-sns-stories__backdrop.front-mejiro {
		min-height: clamp( 22rem, 72vh, 36rem );
	}

	.front-sns-stories > #section-sns {
		position: relative;
		top: auto;
		left: auto;
		min-height: auto;
		transform: none !important;
		will-change: auto;
		margin-top: -1.25rem;
		padding: clamp( 3rem, 8vw, 4rem ) clamp( 0.85rem, 4vw, 1.25rem ) clamp( 3.5rem, 9vw, 4.5rem );
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.12 );
	}

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

	/* SNS ギャラリー: 100vw による横スクロール防止 */
	.front-section__sns-gallery-wrap {
		width: 100%;
		margin-left: 0;
	}

	.front-section__sns-marquee,
	.front-section__sns-marquee-view {
		mask-image: none;
		-webkit-mask-image: none;
	}

	.front-section__sns-gallery-item {
		width: clamp( 160px, 42vw, 240px );
	}

	.front-section__sns-gallery-item--vertical {
		width: clamp( 120px, 28vw, 168px );
	}

	/* ── Online Store: キャラ非表示＋通常ボタン ── */
	.front-section--online {
		padding-block: clamp( 5rem, 16vw, 8rem );
	}

	.front-section--online .front-section__title--online {
		font-size: clamp( 1.5rem, 6.5vw, 2.2rem );
		margin-bottom: 0.5rem;
	}

	.front-section--online .front-section__eyebrow--ja {
		margin-bottom: 1rem;
	}

	.front-section--online .front-section__lead--center {
		font-size: 0.9rem;
		line-height: 1.85;
		margin-bottom: 1.5rem;
		padding-inline: clamp( 0.5rem, 2vw, 1rem );
	}

	[data-front-online-reveal] .front-online-reveal__stack {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	.front-online-reveal__mascot {
		display: none;
	}

	.front-online-reveal__cta {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-top: 1.5rem;
	}

	.split-gate {
		display: none;
	}

	.front-online-reveal__cta-sp {
		display: flex;
	}

	/* pin-spacer による余白を抑える */
	div.pin-spacer:has( > [data-front-online-reveal] ) {
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
	}

	div.pin-spacer:has( > .front-sns-stories ) {
		min-height: 0 !important;
		height: auto !important;
		padding: 0 !important;
	}
}

@media ( max-width: 480px ) {
	.hero__reveal-char {
		width: clamp( 6.5rem, 30vw, 9rem );
		max-height: min( 36vh, 13rem );
	}

	.front-used__item-media {
		height: 300px;
	}
}