@charset "UTF-8";
/*----------------------------------------

	- page title
	- contents
		- map
		- button

-----------------------------------------*/

#contents {
	/* max-width: 1000px; */
	max-width: unset;
}

@media screen and (max-width: 767px) {
	#contents {
		width: 100%;
	}
}

.con_wrap {
	padding-block: 5vw 12vw;
}

@media screen and (max-width: 768px) {
	.con_wrap {
		padding-block: 10vw 20vw;
		margin-block: 5vw;
	}
}

/* button */
#contents .btnBox {}

@media screen and (max-width: 768px) {
	#contents .btnBox {
		margin: 10.67vw auto 0;
	}

	#contents .btn a {
		height: 12vw;
		font-size: 1.4rem;
	}
}

/* 以下追記 */

.facade_wrap {
	padding-top: 0;
}

.facade_wrap .imgBox {
	position: relative;
	width: 100%;
	margin-left: min(0px, calc(50% - 50cqi));
	margin-right: min(0px, calc(50% - 50cqi));
	margin-top: 5vw;
}

.material_wrap {
	padding-block: 0;
}

.material_wrap::before {
	background-color: #c2c2c287;
}

.material_wrap .flexBox {
	align-items: stretch;
	justify-content: center;
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	position: relative;
	margin-top: 3vw;
}

.material_wrap .flexBox .box_1 {
	width: 50%;
}

.material_wrap .flexBox .box_2 {
	width: 50%;
	background-color: rgb(80, 60, 61, .7);
	display: flex;
	align-items: center;
	align-items: flex-end;
	color: #fff;
}

.material_wrap .flexBox .box_2 .box_inner {
	width: 90%;
	max-width: 500px;
	margin-left: 10%;
	margin-bottom: 10%;
}

.material_wrap .flexBox .box_2 .box_inner .flexBox {
	width: 100%;
	align-items: center;
	justify-content: flex-start;
	margin: 0 auto;
}

.material_wrap .flexBox .box_2 .box_inner .textBox_1 {
	width: 50%;
	margin-right: 10%;
}

.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p1 {
	font-size: clamp(1rem, 3vw, 4rem);
	color: #C8C9CA;
	margin-bottom: 2vw;
}

.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p2 {
	font-size: 1.5rem;
	white-space: nowrap;
	line-height: 1.5;
}

.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p2 .big {
	font-size: clamp(10px, 2.2vw, 25px);
	/* margin-left: 1rem; */
}

.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p2 .small {
	font-size: 1.2rem;
}

.material_wrap .flexBox .box_2 .box_inner .imgBox {
	/* width: 50%; */
	/* width: 30%;
	max-width: 150px; */
	width: max(90px, 25%);
}

.material_wrap .flexBox .box_2 .box_inner .textBox_2 {
	width: 100%;
	margin-top: 3vw;
}

.material_wrap .flexBox .box_2 .box_inner .textBox_2 .p1 {
	/* font-size: 2rem; */
	font-size: clamp(16px, 11.429px + 0.595vw, 20px);
}

.material_wrap .flexBox .box_2 .box_inner .textBox_2 .p2 {
	/* font-size: 1.5rem; */
	font-size: clamp(12px, 8.571px + 0.446vw, 15px);
	margin-top: 1vw;
}


@media screen and (max-width: 1100px) {}

@media screen and (max-width: 768px) {
	.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p2 .big {
		font-size: clamp(10px, 6vw, 25px);
		/* margin-left: 1rem; */
	}

	.material_wrap .flexBox {
		margin-top: 3vw;
	}

	.material_wrap .flexBox .box_1 {
		width: 100%;
	}

	.material_wrap .flexBox .box_2 {
		width: 100%;
		padding-block: 10vw;
	}

	.material_wrap .flexBox .box_2 .box_inner {
		width: 90%;
		margin: 0 auto;
	}

	.material_wrap .flexBox .box_2 .box_inner .textBox_1 {
		width: 100%;
	}

	.material_wrap .flexBox .box_2 .box_inner .textBox_1 .p1 {
		font-size: 3.5rem;
		margin-bottom: 2vw;
	}

	.material_wrap .flexBox .box_2 .box_inner .imgBox {
		width: 30%;
		margin-top: 5vw;
	}

	.material_wrap .flexBox .box_2 .box_inner .textBox_2 {
		margin-top: 4vw;
	}

	.material_wrap .flexBox .box_2 .box_inner .textBox_2 .p2 {
		font-size: 1.3rem;
		margin-top: 3vw;
	}
}

.layout_wrap {
	padding-bottom: 5vw;
}

.layout_wrap .imgBox {
	max-width: 800px;
	width: 90%;
	margin-inline: auto;
}

.planting_wrap {}

.planting_wrap::before {
	background-color: #c2c2c287;
}

.planting_wrap .flexBox {
	width: 100%;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	justify-content: space-between;
	margin-top: 3vw;
}

.planting_wrap .flexBox .imgBox {
	width: calc(95%/4);
}

.planting_wrap .flexBox .imgBox .imgText {
	text-align: right;
	font-size: 1.5rem;
	margin-top: 1rem;
	margin-right: 5px;
}

@media screen and (max-width: 768px) {
	.planting_wrap .flexBox {
		width: 90vw;
		margin-top: 5vw;
	}

	.planting_wrap .flexBox .imgBox {
		width: calc(95%/2);
	}

	.planting_wrap .flexBox .imgBox:nth-child(n+3) {
		margin-top: 3vw;
	}

	.planting_wrap .flexBox .imgBox .imgText {
		font-size: 1.2rem;
	}
}