:root {
	--bg-gray  :#D8DBD9;
}

/* Base Set */
html {
	height: 100%;
	font-size: 62.5%;
}
body {
	height: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-feature-settings: "palt" 1;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 1.5;
}
@media screen and (min-width:500px) {
	body {
		font-size: 1.6rem;
	}
}

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	transition: all .3s ease;
}

main {
	background-color: var(--bg-gray);
}

/* component */
.button {
	position: absolute;

	/* ✅ CTAが大画面で拡大し続けないよう上限を付ける */
	width: 90%;
	max-width: 420px;

	bottom: 2.5%;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 5px 10px rgba(0,0,0,0.5);
	border-radius: 999px;
	animation: fuwafuwa 3s infinite;
}
.button--top {
	bottom: 12%;
}
.button--fit {
	bottom: 7.5%;
}

/* CTA画像は枠に追従 */
.button img{
	width: 100%;
	height: auto;
	display: block;
}

@keyframes fuwafuwa {
	0% {
		transform: translate(-50%,0);
	}
	50% {
		transform: translate(-50%,-15%);
	}
	100% {
		transform: translate(-50%,0);
	}
}

/* ---layout--- */
.lp {
	width: 100%;
	height: 100svh;
}

/* =========================================================
   A: Scroll Snap化（Swiper不使用で②の挙動に寄せる）
   ========================================================= */

/* bodyのスクロールを止めて、.lpだけがスクロールする */
/* html, body { height: 100%; } */
body { overflow: hidden; }

/* スクロールコンテナ */
.lp{
	height: 100svh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: y mandatory;
	overscroll-behavior-y: contain;
	scroll-behavior: smooth; /* 任意 */
	touch-action: pan-y;
}

/* Swiper由来のflex/transform前提を無効化 */
.swiper-wrapper{
	display: block !important;
	height: auto !important;
	transform: none !important;
}

/* スナップ単位 */
.swiper-slide.slide{
	height: auto !important;
	min-height: 100svh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	display: grid;
	place-items: center;
}

/* =========================================================
   画像を「最大1080×1920」で固定（それ以上拡大しない）
   ========================================================= */
.slide__frame{
	position: relative;
	aspect-ratio: 9 / 16;

	/* ✅ 画面に合わせて縮むが、最大は 1080×1920 */
	/* width: 100vw;
	max-width: 1080px; */
	height: 100svh;
	max-height: 1920px;
	/* width: min(100vw, 1080px);
	height: min(100svh, 1920px); */
}

.slide__image{
	width: 100%;
	height: 100%;
}

.slide__image img{
	width: 100%;
	height: 100%;
	object-fit: contain;

	user-select: none;
	-webkit-user-drag: none;
}

/* =========================================================
   地図：元の位置関係＋拡大抑制
   ========================================================= */
.access__map {
	/* ✅ 地図が大画面で拡大し続けないよう上限を付ける */
	width: min(87%, 380px);

	aspect-ratio: 1 / 1;
	position: absolute;
	bottom: 20.5%;
	left: 50%;
	transform: translateX(-50%);

	overflow: hidden;
	border-radius: 12px;
}
.access__map iframe{
	width: 100%;
	height: 100%;
}

/* =========================================================
   C: iframe地図のタッチ奪取対策（カバー＋切替）
   ========================================================= */
.access__map .map-cover{
	position: absolute;
	inset: 0;
	background: transparent;
	z-index: 2;
	pointer-events: auto;
	touch-action: pan-y;
}

.access__map .map-toggle{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;

	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(0,0,0,.65);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
}

.access__map.map-interactive .map-cover{
	pointer-events: none;
}

.access__map.map-interactive .map-toggle{
	top: auto;
	bottom: 10px;
	transform: translateX(-50%);
	background: rgba(0,0,0,.55);
}