@charset "UTF-8";

/* ----------------------------------------------------
 * SYSTEM
 * ---------------------------------------------------- */
.noise-bg {
	background-image: url(/assets/img/bg_noise_kotei.png); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/bg_noise_kotei.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/bg_noise_kotei.webp) type("image/webp"),
		url(/assets/img/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/bg_noise_sp_kotei.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/bg_noise_sp_kotei.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/bg_noise_sp_kotei.webp) type("image/webp"),
			url(/assets/img/bg_noise_sp_kotei.png) type("image/png")
		);
	}


}

.system__title {
	width: 37%;
	margin: 5% auto 5%;

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

.box-shadow {
	box-shadow: 7px 7px rgba(175, 133, 82, 0.7);

	@media (max-width: 750px) {
		box-shadow: 5px 5px rgba(175, 133, 82, 0.7);
	}
}

.system__container {
	width: 73%;
	margin: 0 auto 4vw;
	display: flex;
	flex-direction: column;
	gap: 0;
##	background: #8a2be238;

	@media (max-width: 750px) {
		width: 87%;
		margin: 0 auto 18vw;
		gap: 20vw;
		padding: 10% 0;
	}

	.system__box {
		display: flex;
#		align-items: center;
		align-items: self-start;
#		width: 87%;
		margin-left: 0;
		margin-right: auto;

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

		.system__box-image {
#		        width: 55%;
			position: relative;

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

		.system__box-info {
			flex: 1;
			background: #f3efe6;
#			padding: 0.5% 0 0.5% 0.5%;
			padding: 0.5% 0.5% 0.5% 0;
			position: relative;

			@media (max-width: 750px) {
				width: 85%;
				padding: 1% 1% 1% 1%;
				margin-left: auto;
				margin-right: 0;
				order: 2;
			}

			p {
				position: relative;
				padding: 10% 3% 10% 18%;
				border-top: 1px solid #c7b299;
				border-bottom: 1px solid #c7b299;
				border-left: none;
				border-right: 1px solid #c7b299;
				font-size: min(calc(24 * 100vw / 1920),24px);
				color: #42210b;
				font-family: "Noto Serif JP", "源ノ明朝", serif;
				font-weight: 900;
				line-height: 1.7;
				letter-spacing: 0.1em;

				@media (max-width: 750px) {
					width: 100%;
					padding: 10% 0.5% 10% 10%;
					font-size: min(calc(23 * 100vw / 750),23px);
					letter-spacing: 0.3em;
					border-left: 1px solid #c7b299;
					border-right: 1px solid #c7b299;
				}
			}

			.number {
				position: absolute;
#				top: -20%;
#				left: 6%;
				transform: translate(-50%, -50%);
				width: 27%;

				@media (max-width: 750px) {
					top: 30%;
					left: -4%;
					width: 27%;
				}
			}
		}
	}

	.system__box.box1 {
		width: 87%;

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

		.system__box-image {
		        width: 55%;

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

		.system__box-info {
			margin-top: 3%;

			@media (max-width: 750px) {
				margin-top: 0;
			}

			/* 751px以上だけ */
			@media (min-width: 751px) {
				.number {
					top: 10%;
					left: 6%;
				}
			}
		}
	}

	.system__box.box2 {
		width: 90%;

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

		.system__box-image {
		        width: 52%;

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

		.system__box-info {
			margin-top: 8%;

			@media (max-width: 750px) {
				margin-top: 0;
			}

			/* 751px以上だけ */
			@media (min-width: 751px) {
				.number {
					top: 20%;
					left: 6%;
				}
			}
		}
	}

	.system__box.box3 {
		width: 87%;

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

		.system__box-image {
		        width: 55%;

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

		.system__box-info {
			margin-top: 5%;

			@media (max-width: 750px) {
				margin-top: 0;
			}

			/* 751px以上だけ */
			@media (min-width: 751px) {
				.number {
					top: 20%;
					left: 6%;
				}
			}
		}
	}

	.system__box.box4 {
		width: 85%;
		transform: translateX(1%);

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

		.system__box-image {
		        width: 56%;

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

		.system__box-info {
			margin-top: 12%;

			@media (max-width: 750px) {
				margin-top: 0;
			}

			/* 751px以上だけ */
			@media (min-width: 751px) {
				.number {
					top: 15%;
					left: 6%;
					width: 30%;
				}
			}
		}
	}

	.system__box.right {
		margin-left: auto;
		margin-right: 0;
#		margin-bottom: 4vw;
#		width: 90%;

		@media (max-width: 750px) {
#			margin-bottom: 0;
		}

		.system__box-image {
			order: 2;
#		        width: 52%;

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

		.system__box-info {
			order: 1;
			padding: 0.5% 0 0.5% 0.5%;
			margin-left: 0;
			margin-right: auto;

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

			p {
				border-left: 1px solid #c7b299;
				border-right: none;

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

			.number {

				@media (max-width: 750px) {
					top: 30%;
					left: 103%;
					width: 27%;
				}
			}
		}
	}
}
.system__container > *:nth-child(2) {
	margin-bottom: 6vw;
}


.action__bg-kawa {
	background-image: url('/assets/img/system/system_kawa_bg.png'); /* fallback */
	background-image: -webkit-image-set(
		url(/assets/img/system/system_kawa_bg.webp) type("image/webp"),
		url(/assets/img/system/system_kawa_bg.png) type("image/png")
	);
	background-image: image-set(
		url(/assets/img/system/system_kawa_bg.webp) type("image/webp"),
		url(/assets/img/system/system_kawa_bg.png) type("image/png")
	);
	background-position: 80% bottom;
	background-size: 119% auto;
	background-repeat: no-repeat;
	padding-bottom: 4%;

#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/system/system_kawa_bg_sp.png); /* fallback */
		background-image: -webkit-image-set(
			url(/assets/img/system/system_kawa_bg_sp.webp) type("image/webp"),
			url(/assets/img/system/system_kawa_bg_sp.png) type("image/png")
		);
		background-image: image-set(
			url(/assets/img/system/system_kawa_bg_sp.webp) type("image/webp"),
			url(/assets/img/system/system_kawa_bg_sp.png) type("image/png")
		);
		background-position: center bottom;
		background-size: cover;
		background-repeat: no-repeat;
		padding-bottom: 25%;
		padding-top: 0%;
	}
}

.system__box-other {
	width: 56%;
	margin: auto;
	display: flex;
	flex-direction: column;

	@media (max-width: 750px) {
		width: 95%;
		margin: 0 auto 18vw;
	}

	.phrase {
		position: relative;
		width: 82%;

		@media (max-width: 750px) {
			order: 2;
			width: 80.5%;
			margin: -4% 0 0 auto;
			z-index: 1;
		}
	}

	.number {
		position: absolute;
		top: 23%;
		left: -1%;
		transform: translate(-50%, -50%);
		width: 18%;

		@media (max-width: 750px) {
			top: 38%;
			left: -6%;
			width: 29%;
		}
	}

	.image {
		width: 90%;
		margin: -3.5% auto 0;
		position: relative;

		@media (max-width: 750px) {
			order: 1;
			margin: 0 auto;

		}
	}
}

.system__area {
	width: 70.5%;
	margin: 5% auto 0;
	text-align: center;
	color: #42210b;
	font-family: "Noto Serif JP", "源ノ明朝", serif;
	font-weight: 900;
	line-height: 1.7;

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

	.system__area-image {
		display: flex;
		justify-content: space-between;
		margin: 3% auto 5%;

		picture {
			width: 49.1%;

		}
	}


	.system__area-text1 {
		font-size: min(calc(33 * 100vw / 1920),33px);
		letter-spacing: 0.1em;

		@media (max-width: 750px) {
			font-size: calc(32 * 100vw / 750);
			letter-spacing: 0.12em;
		}
	}

	.system__area-text2 {
		font-size: min(calc(23 * 100vw / 1920),23px);
		letter-spacing: 0.11em;

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

.system__footer {
	position: relative;
	margin-top: -2%;

	@media (max-width: 750px) {
		margin-top: -5%;
	}

	.mask {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 63%;
	}


	.image {
		position: absolute;
		top: 32%;
		left: 38.5%;
		width: 43%;
		transform: translate(-50%, -50%);

		@media (max-width: 750px) {
			top: 82%;
			left: 50%;
			width: 73%;
		}
	}
}