@charset "utf-8";
:root {
	--c-nttblue: #0072BC;
	--c-lightblue: #F1F8FF;
	--c-darkblue: #005B97;
}

.p-slider {
	position: relative;
	padding-bottom: 48px;

	.splide__track {
		overflow: unset;
	}

	.splide__arrow {
		--arrow-size: 58px;
		--arrow-gap: 24px;
		--arrow-inset: calc((var(--arrow-size) + var(--arrow-gap)) / 2 * -1);

		appearance: none;
		width: var(--arrow-size);
		height: var(--arrow-size);
		border: 2px solid var(--c-nttblue);
		border-radius: 50%;
		background: #FFF no-repeat center;
		transition: opacity 0.3s ease;
		opacity: 1;

		@media (width <= 1378px) {
			--arrow-inset: calc(var(--arrow-gap) * -1);
		}

		@media (width <= 968px) {
			--arrow-size: 40px;
		}

		@media (width <= 767px) {
			--arrow-inset: calc(var(--arrow-gap) / 2 * -1);
		}

		&:hover:not(:disabled) {
			opacity: 1;
			background-color: var(--c-lightblue);
		}

		&:disabled {
			opacity: 0.3;
			cursor: not-allowed;
		}

		&.splide__arrow--prev {
			left: var(--arrow-inset);
			background-image: url(/cmn3/img/icon/ic_arrow_left.svg);
		}
		&.splide__arrow--next {
			right: var(--arrow-inset);
			background-image: url(/cmn3/img/icon/ic_arrow_right.svg);
		}
	}

	.splide__pagination {
		bottom: -48px;
		gap: 20px;
	}

	.splide__pagination__page {
		border: none;
		cursor: pointer;
		margin: 0;
		padding: 0;
		appearance: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		opacity: 1;
		transition: opacity 0.3s ease;
		background: transparent;

		&.is-active {
			transform: scale(1);

			&::after {
				width: 24px;
				height: 24px;
				background-color: #FFF;
				border: 2px solid var(--c-nttblue);
			}
		}

		&::after {
			content: '';
			display: block;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: var(--c-nttblue);
			transition: width 0.3s ease, height 0.3s ease;
		}

		&:hover {
			opacity: 0.5;
		}
	}
}