/* リップルエフェクト用のCSS */
.ripple-marker {
	position: absolute;
	width: 12px;
	height: 12px;
	background-color: #ff6b6b;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
	/* 位置を固定 */
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
}

.ripple-marker::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: rgba(255, 107, 107, 0.6);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: ripple 2s ease-out;
	/* 位置を固定してアニメーション中に移動しないようにする */
	will-change: width, height, opacity;
}

@keyframes ripple {
	0% {
		width: 0;
		height: 0;
		opacity: 0.8;
	}
	50% {
		width: 40px;
		height: 40px;
		opacity: 0.4;
	}
	100% {
		width: 80px;
		height: 80px;
		opacity: 0;
	}
}

/* 複数のリップル効果（より豊かな表現） */
.ripple-marker.multi-ripple::before {
	animation: ripple 2s ease-out;
}

.ripple-marker.multi-ripple::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background-color: rgba(255, 107, 107, 0.4);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: ripple 2s ease-out 0.3s;
}

/* 遅延リップル（第2波） */
@keyframes ripple-delayed {
	0% {
		width: 0;
		height: 0;
		opacity: 0.6;
	}
	50% {
		width: 60px;
		height: 60px;
		opacity: 0.3;
	}
	100% {
		width: 120px;
		height: 120px;
		opacity: 0;
	}
}

/* パルスエフェクト（継続的な効果） */
.pulse-marker {
	position: relative;
	width: 12px;
	height: 12px;
	background-color: #ff6b6b;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
	}
	70% {
		box-shadow: 0 0 0 20px rgba(255, 107, 107, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
	}
}

/* ソナーエフェクト */
.sonar-marker {
	position: relative;
	width: 12px;
	height: 12px;
	background-color: #ff6b6b;
	border: 2px solid #ffffff;
	border-radius: 50%;
	cursor: pointer;
}

.sonar-marker::before,
.sonar-marker::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 107, 107, 0.8);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: sonar 3s infinite;
}

.sonar-marker::after {
	animation-delay: 1.5s;
}

@keyframes sonar {
	0% {
		width: 12px;
		height: 12px;
		opacity: 1;
	}
	100% {
		width: 100px;
		height: 100px;
		opacity: 0;
	}
}