@charset "UTF-8";

/* ----------------------------------------------------
 * ACTION
 * ---------------------------------------------------- */
.bg_noise {
	background-image: url('/assets/img/action/bg_noise_kotei.png'); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/action/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/action/bg_noise_kotei.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/action/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/action/bg_noise_kotei.png) type("image/png")
	);
	background-repeat: repeat-y;
	background-position: top center;
	background-size: 100% auto;
	padding-top: 7%;

	@media (max-width: 750px) {
		background-image: url(/assets/img/action/bg_noise_sp_kotei.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/action/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/action/bg_noise_sp_kotei.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/action/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/action/bg_noise_sp_kotei.png) type("image/png")
		);
		background-repeat: repeat-y;
		background-position: top center;
		background-size: 100% auto;
	}
}

.action__title {
	width: 80%;
	margin: 5% auto 5%;

	@media (max-width: 750px) {
		width: 85%;
		margin: 25% auto 8%;
	}
}

.action__slide-container {
	width: 63%;
	margin: 0 auto 5%;
	animation: fadeIn 1.5s ease-out forwards;
	opacity: 0;

	@media (max-width: 750px) {
		width: 88%;
	}

	.action__slide-item {
		display: flex;
#		gap: 2vw;
		justify-content: space-between;
		align-items: center;

		@media (max-width: 750px) {
			flex-direction: column;
			gap: 2vw;
		}

		.action__slide-image {
			width: 55%;

			@media (max-width: 750px) {
				width: 100%;
			}
		}
	}

	.action__slide-info {
		width: 45%;
		position: relative;

		@media (max-width: 750px) {
			width: 65%;
			text-align: center;
		}

		.action__slide-info-bg {
			width: 68%;
			margin: auto;

			@media (max-width: 750px) {
				width: 80%;
			}
		}

		.action__slide-info-text {
			width: 83%;
			position: absolute;
			top: 35%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-family: "Noto Serif JP", "源ノ明朝", serif;
			font-weight: 900;
			font-size: min(calc(20 * 100vw / 1920), 20px);
			letter-spacing: 0.18em;
			color: #42210b;
			display: flex;
			flex-direction: column;
			gap: 0.5vw;

			@media (max-width: 750px) {
				width: 100%;
				top: 42%;
				font-size: calc(23 * 100vw / 750);
				gap: 4vw;
			}

			.number {
				font-size: calc(80 * 100vw / 1920);
				color: #b2a188;
				line-height: 1;

				@media (max-width: 750px) {
					font-size: calc(80 * 100vw / 750);
				}
			}

			.txt {
				line-height: 2;

			}

		}
	}


}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


/** slider **/
.slider {
	margin: 0 auto;
}

.slider-img img {
	height: auto;
	width: 100%;
}

.slide-arrow {
	bottom: 0;
	cursor: pointer;
	margin: auto;
	position: absolute;
	top: 0;
	width: 7%;
}
.prev-arrow {
	left: -9%;
}
.next-arrow {
	right: -9%;
}

.slide-dots {
	padding: 0;
	text-align: center;

	width: 34%;
	margin: 5% auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	place-items: center;

	@media (max-width: 750px) {
		width: 62%;
		margin: 6% auto 0;
	}
}

.slide-dots li {
	display: inline-block;
	width: 100%;
}

.slide-dots li button {
	position: relative;
	text-indent: -9999px;
}

.slide-dots li button::before {
	background-image: url(/assets/img/action/indicator_off.png);
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	cursor: pointer;
	height: 13.5px;
	left: 50%;
	margin: auto;
	position: absolute;
	right: 0;
	top: 50%;
	width: 5vw;
	transform: translate(-50%, -50%);

	@media (max-width: 750px) {
		width: 13vw;
	}
}

.slide-dots li.slick-active button::before {
	background-image: url(/assets/img/action/indicator_on.png);
}

button {
	background: none;
	border: none;
	outline: none;
}


/** kawa **/
.action__bg-kawa {
	background-image: url('/assets/img/action/action_kawa_bg.png'); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/action/action_kawa_bg.webp) type("image/webp"),
		url(/assets/img/action/action_kawa_bg.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/action/action_kawa_bg.webp) type("image/webp"),
		url(/assets/img/action/action_kawa_bg.png) type("image/png")
	);
	background-position: 30% bottom;
	background-size: 115% auto;
	background-repeat: no-repeat;
	padding-bottom: 10%;

#clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
#transition: clip-path 3.5s ease-in-out;

	@media (max-width: 750px) {
		background-image: url(/assets/img/action/action_kawa_bg_sp.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/action/action_kawa_bg_sp.webp) type("image/webp"),
			url(/assets/img/action/action_kawa_bg_sp.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/action/action_kawa_bg_sp.webp) type("image/webp"),
			url(/assets/img/action/action_kawa_bg_sp.png) type("image/png")
		);
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
		padding-bottom: 15%;
		padding-top: 10%;
	}
}
/*
.action__bg-kawa.animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
*/
.action__list-container {
	display: flex;
	flex-direction: column;
	gap: 4vw;

	@media (max-width: 750px) {
		gap: 14vw;
	}

	.action__list-item {
		width: 73%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;

		@media (max-width: 750px) {
			width: 90%;
			flex-direction: column;
			gap: 7vw;
		}

		picture {
			width: 47.6%;

			@media (max-width: 750px) {
				width: 99%;
			}
		}

	}
	.action__list-item:nth-child(2) picture {
		order: 2;

		@media (max-width: 750px) {
			order: unset;
		}
	}

	.action__list-info {
		width: 50%;
		display: flex;
		flex-direction: column;
		gap: 2vw;

		@media (max-width: 750px) {
			width: 100%;
			padding-left: 2%;
		}

		h2 {
			width: 91%;

			@media (max-width: 750px) {
				width: 89%;
			}
		}

		p {
			font-family: "Noto Serif JP", "源ノ明朝", serif;
			font-weight: 900;
			font-size: min(calc(20 * 100vw / 1920), 20px);
			letter-spacing: 0.2em;
			line-height: 2;
			color: #42210b;

			@media (max-width: 750px) {
				font-size: calc(24 * 100vw / 750);
			}
		}
	}

	.action__list-bottom {
		display: flex;
		flex-direction: column;
		gap: 3vw;
		padding-top: 7%;

		@media (max-width: 750px) {
			padding-top: 10%;
			gap: 7vw;
		}

		.action__bottom-image {
			width: 65%;
			margin: auto;

			@media (max-width: 750px) {
				width: 71%;
			}
		}
	}

}


/** marquee **/
@keyframes marqueeRight {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes marqueeLeft {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}


.slider-wrapper {
	overflow: hidden;
	width: 100%;
}

.slider-track {
	display: flex;
	padding: 0;
	margin: 0;
	list-style: none;
	width: 200%;
#	animation: scroll 20s linear infinite;
}
.slider-track.right {
	animation: marqueeRight 20s linear infinite;
}
.slider-track.left {
	animation: marqueeLeft 20s linear infinite;
}

@media only screen and (max-width: 750px) {
	.slider-track {
		width: 500%;
#		animation: scroll 40s linear infinite;
	}
}

.slider-track li {
	width: 100%;
}

.slider-track img {
	width: 100%;
}

@keyframes scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}