@charset "UTF-8";

/* mapArea
---------------------------------------------- */
.mapArea {
	padding-block: clamp(50px, 0.85rem + 9.71vw, 200px);
}

.mapImg {
	max-width: 1200px;
	margin-top: 90px;
}

.mapBtn {
	max-width: 370px;
	margin-top: 100px;
}

.mapBtn__btn {
	height: auto;
	background-color: var(--color-orange85);
	font-size: 18px;
	letter-spacing: 0.05em;
	padding: 1em;
}

.galleryMap {
	max-width: 800px;
	margin-top: 100px;
}

.mapModal .modal__container {
	max-width: 800px;
	padding: 0;
}

@media screen and (min-width: 769px) {
	.tapAttention {
		position: relative;
		background-color: #666;
		color: #fff;
		font-size: 20px;
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.4;
		padding: 0.8em;
		text-align: center;
		z-index: 0;
	}
	.tapAttention::after {
		content: '';
		position: absolute;
		bottom: -3px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		width: 27px;
		aspect-ratio: 1;
		background-color: #666;
		z-index: -1;
	}

	.tapAttention + * {
		margin-top: 30px;
	}
}

@media screen and (max-width: 768px) {
	.mapImg {
		margin-top: 40px;
	}

	.mapBtn {
		max-width: 280px;
		margin-top: 40px;
	}

	.mapBtn__btn {
		font-size: 15px;
	}

	.mapBtn__btn::before {
		width: 15px;
		height: 23px;
	}

	.galleryMap {
		max-width: 560px;
		margin-top: 60px;
	}
}