/* =========================================================
   横スワイプLP (Template Name: 横スワイプLP) — モバイルファースト
   基準＝スマホ（指スワイプ前提）。min-width で PC 操作を追加。
   ========================================================= */

/* 基準＝スマホ：dvhで全画面、ヘッダーぶんを差し引く */
.lp-swipe {
	--lp-header: 65px;
	position: relative;
	width: 100%;
	height: calc(100dvh - var(--lp-header));
	overflow: hidden;
	background: var(--wd-base);
}

/* 横スクロール＋スナップのトラック（指スワイプ対応） */
.lp-swipe__track {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.lp-swipe__track::-webkit-scrollbar { display: none; }

/* 各スライド = 全画面 */
.lp-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	padding: 1.5rem 1.2rem;
}
.lp-slide__inner {
	width: 100%;
	max-width: var(--wd-max);
	margin: 0 auto;
	text-align: center;
}
.lp-slide__inner > * { margin-top: 1.2em; }
.lp-slide__inner > *:first-child { margin-top: 0; }

.lp-slide__inner h1 { font-size: clamp(2rem, 9vw, 3.4rem); }
.lp-slide__inner h2 { font-size: clamp(1.6rem, 7vw, 2.6rem); }

/* 矢印：基準＝スマホでは非表示（指スワイプ前提） */
.lp-swipe__arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	background: rgba(255,255,255,.85);
	color: var(--wd-primary);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,.12);
	transition: .2s;
}
.lp-swipe__arrow:hover { background: var(--wd-primary); color: #fff; }
.lp-swipe__arrow--prev { left: 1rem; }
.lp-swipe__arrow--next { right: 1rem; }
.lp-swipe__arrow[disabled] { opacity: .3; cursor: default; }

/* ドット（タップしやすいサイズ） */
.lp-swipe__dots {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: .6rem;
}
.lp-swipe__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 0;
	background: rgba(58,54,51,.25);
	cursor: pointer;
	transition: .2s;
	padding: 0;
}
.lp-swipe__dot.is-active { background: var(--wd-primary); transform: scale(1.3); }

/* 進捗バー */
.lp-swipe__progress {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: rgba(58,54,51,.1);
	z-index: 10;
}
.lp-swipe__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wd-primary);
	transition: width .25s ease;
}

/* 予約CTA：基準＝スマホは下部中央 */
.lp-swipe__cta {
	position: absolute;
	bottom: 3.4rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}

/* ---------- タブレット以上（min-width: 681px）：PC操作を追加 ---------- */
@media (min-width: 681px) {
	.lp-swipe { --lp-header: 73px; height: calc(100vh - var(--lp-header)); }
	.lp-slide { padding: 2rem 1.2rem; }
	.lp-swipe__arrow { display: block; }   /* 矢印を表示 */
	.lp-swipe__dots { bottom: 1.6rem; }
	.lp-swipe__dot { width: 10px; height: 10px; }
	.lp-swipe__cta { bottom: auto; top: 1rem; left: auto; right: 1rem; transform: none; }
}