@charset "UTF-8";

/* animation */

@keyframes floatY {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes shake {
	0% {
		transform: translate(0, 0) rotate(0);
	}
	20% {
		transform: translate(-2px, 1px) rotate(-1deg);
	}
	40% {
		transform: translate(2px, -1px) rotate(1deg);
	}
	60% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	80% {
		transform: translate(1px, -2px) rotate(1deg);
	}
	100% {
		transform: translate(0, 0) rotate(0);
	}
}

/******************/
/* splide *********/

/* splide__arrow */

.splide__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0.5px solid var(--akamaru-color-navy_main);
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	transition: all 0.35s ease;
	z-index: 5;
}

.splide__arrow svg {
	width: 14px;
	height: 14px;
	fill: var(--akamaru-color-navy_main);
	opacity: 0.8;
	transition: transform 0.3s ease, fill 0.3s ease;
}

.splide__arrow:hover svg {
	fill: var(--akamaru-color-navy_main);
	transform: translateX(2px);
	opacity: 0.8;
}

.splide__arrow--prev {
	left: 5px;
}
.splide__arrow--next {
	right: 60px;
}

/* ▼768px以下でも左右中央に配置（下に行かない） */
@media screen and (max-width: 768px) {
	.splide__arrow {
		width: 36px;
		height: 36px;
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
		background-color: rgba(255, 255, 255, 0.85);
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	}

	.splide__arrow svg {
		width: 12px;
		height: 12px;
		opacity: 0.8;
	}

	.splide__arrow--prev {
		left: 10px;
	}

	.splide__arrow--next {
		right: 10px;
	}

	.splide__arrow:hover svg {
		transform: translateX(1px);
		fill: var(--akamaru-color-navy_main);
		opacity: 1;
	}
}

@media screen and (max-width: 500px) {
	.splide__arrow {
		width: 30px;
		height: 30px;
	}

	.splide__arrow svg {
		width: 10px;
		height: 10px;
	}

	.splide__arrow--prev {
		left: 5px;
	}

	.splide__arrow--next {
		right: 5px;
	}
}