@charset "utf-8";
.wrap{
	.contents{
		.detail_box.sec{
			margin-top: 40px;
			border: 1px solid #9a9a9a;
			background-color: #ffffff;
			&.afterh3{
				margin-top: 0;
			}
			.detail_inbox{
				padding: 30px;
			}
			.img{
				text-align: center;
				img{
					margin-bottom: 0;
				}
			}
			h4{
				background: linear-gradient(90deg, rgba(83, 163, 183, 1) 0%, rgba(142, 202, 217, 1) 100%);
				padding: 0.4em 0 0.5em 1em;
				color:#ffffff;
				font-size:2.0rem;
				line-height: 1.3;
				margin-bottom: 0;
				&::after{
					display: none;
				}
			}
			h5{
				color:#098EC7;
				line-height: 1.4;
				font-size:1.9rem;
				text-align: left;
				margin-bottom: 0.5em;
			}
			h6{
				color:#ffffff;
				font-size:1.7rem;
				margin-bottom: 1em;
				text-align: left;
				line-height: 1.5;
				padding: 0.3em 1em 0.4em;
				background-color: #85bc6e; 
			}
			ul.square{
				li{
					margin-bottom: 0.5em;
					line-height: 1.5;
					position: relative;
					margin-left: 1.5em;
					&::before{
						content:"";
						background-color: #85bc6e;
						position: absolute;
						top:.3em;
						left:0;
						width: 1em;
						height: 1em;
						margin-left: -1.5em;
					}	
				}
			}
			ul.daiya{
				li{
					margin-bottom: 0.5em;
					line-height: 1.5;
					position: relative;
					margin-left: 1.5em;
					color: #cf2b2b;
					&::before{
						content:"";
						background-color: #cf2b2b;
						position: absolute;
						top:.5em;
						left:0;
						width: 0.7em;
						height: 0.7em;
						margin-left: -1.1em;
						transform: rotate(45deg);
					}	
				}
			}
		}	
		.end{
			margin-top: 30px;
		}
		.under{
			margin-bottom: 30px;
		}
		p.under{
			margin-bottom: 50px;
		}
		.red{
			color: #cf2b2b;
		}
		p.big{
			font-size: 2rem;
		}
	}
}
#eco_01{
	.wrap{
		.contents{
			h2{
				display: grid;
				grid-template-columns: auto 100px;
				justify-content: start;
				align-items: center;
				grid-column-gap: 30px;
			}
			.detail_inbox{
				.detail{
					dl{
						margin-bottom: 20px;
						dt{
							font-weight: 600;
							line-height: 1.5;
							color:#233f3e;
							margin-bottom: 0.5em;
						}
						dd{
							line-height: 1.5;
						}
					}
				}
				.contents_inner{
					display: grid;
					&.type1{
						grid-template-columns: 45% 52%;
						grid-column-gap: 3%;
						margin: 30px 0 50px;
						.img{
							display: grid;
							grid-row-gap: 40px;
							position: relative;
							margin-bottom: 10px;
							&::after{
								content:'';
								top:48%;
								left:50%;
								transform: translate(-50%, -50%);
								position: absolute;
								background-image:url(../img/equipment/eco/icon_arrow.png);
								width: 60px;
								height: 40px;
								background-repeat: no-repeat;
								background-size: cover;
								background-position: center center;
							}
						}
						p.red{
							text-align: center;
						}
					}
					&.type2{
						grid-template-columns: 45% 50%;
						grid-column-gap: 5%;
						margin-top: 30px;
						.left_box{
							.img{
								display: grid;
								grid-row-gap: 20px;
								justify-items: center;
								img{
									width: 80%;
								}
							}
						}
						.right_box{
							.img{
								display: grid;
								grid-template-columns: 65% 30%;
								grid-column-gap: 5%;
							}
						}
					}
					&.type3{
						grid-template-columns: 55% 42%;
						grid-column-gap: 3%;
						margin-top: 30px;
						.detail:first-child{
							margin-bottom: 30px;
						}
					}
					&.type4{
						grid-template-columns: 55% 42%;
                        grid-column-gap: 3%;
                        margin-top: 50px;
						.left_box{
							img{
								width: 50%;
								margin-top: 20px;
							}
						}
					}
				}
			}
			
		}
	}
}
#eco_02{
	.wrap{
		.contents{
			.contents_inner{
				display: grid;
				&.type1{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 50px;
					margin-bottom: 20px;
					.img{
						display: grid;
						grid-template-columns: 38% 35% 23%;
						grid-column-gap: 2%;
						align-items: center;
						margin: 30px 0;
					}
				}
				&.type2{
					grid-template-columns: repeat(3, 1fr);
					grid-column-gap: 30px;
					margin-bottom: 20px;
					dl{
						border: 1px solid #9a9a9a;
						margin-top: 30px;
						dt{
							background-color: #708b98;
							padding: 0.5em 1em 0.6em;
							color: #ffffff;
							line-height: 1.5;
							span{
								font-size: 0.7em;
							}
						}
						dd{
							padding: 15px 20px 0;
							line-height: 1.5;
						}
						dd.img{
							padding-bottom: 20px;
						}
						&:first-child{
							.img{
								img{
									width: 70%;
								}
							}
						}
						&:nth-child(2) dt{
							background-color: #9c838f;
							
						}
						&:last-child{
							dt{
							background-color: #aaa893;
							}
							.img{
								img{
									width: 40%;
								}
							}
						}
					}
				}
				&.type3{
					margin-top: 20px;
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 50px;
					align-items: start;
					img{
						width: 50%;
					}
					.red{
						font-size: 2rem;
					}
					.big{
						font-size: 2em;
						padding-left: 0.2em;
					}
					.middle{
						font-size: 1.2em;
					}
					ul.square{
						li{
							&:first-child{
								margin-bottom: 0;
								&::before{
									top:2em;
								}
							}
						}
					}
				}
				&.type4{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 50px;
					margin-top: 30px;
					align-items: start;
					.red{
						font-size: 2rem;
					}
					.big{
						font-size: 2em;
					}
					.middle{
						font-size: 1.2em;
					}
					.left_box{
						display: grid;
						.price{
							display: grid;
							grid-template-columns: auto 1px auto;
							justify-content: center;
							grid-column-gap: 50px;
							margin-top: 10px;
							p{
								line-height: 1;
							}
							.line{
								border: 1px solid #9a9a9a;
							}
						}
					}
					.right_box{
						display: grid;
						grid-row-gap: 30px;
					}
				}
			}
		}
	}
}
#eco_03{
	.wrap{
		.contents{
			h5.icon{
				display: grid;
				grid-template-columns: 120px auto;
				grid-column-gap: 30px;
				align-items: center;
			}
			.contents_inner{
				display: grid;
				&.type1{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 30px;
					.img{
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-column-gap: 30px;
					}
				}
				&.type2{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 30px;
					margin-top: 30px;
					.detail{
						display: grid;
						grid-template-columns: repeat(2, 1fr);
						grid-column-gap: 20px;
					}
				}
				&.type3{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 30px;
					margin-top: 30px;
					.left_box{
						.inner_box{
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							grid-column-gap: 20px;
							.img{
								img{
									margin-top: 20px;
								}
							}
							.red{
								font-size: 1.1em;
								text-align: center;
								padding: 0.3em 0.5em;
								border: 1px solid #cf2b2b;
								margin-bottom: 10px;
								.big{
									font-size: 1.5em;
								}
							}
						}
					}
					.right_box{
						display: grid;
						grid-row-gap: 30px;
						.inner_box{
							display: grid;
							grid-template-columns: 63% 35%;
							grid-column-gap: 2%;
						}
					}
				}
				&.type4{
					grid-template-columns: 58% 40%;
					grid-column-gap: 2%;
					margin: 10px 0 20px;
					align-items: end;
					img{
						margin-bottom: 0;
					}
					.img{
						display: grid;
						grid-template-columns: 45% 53%;
						grid-column-gap: 2%;
						align-items: end;
					}
				}
			}
		}
	}
}
#eco_04{
	.wrap{
		&.last {
			&::after {
				clip-path: polygon(0% 80%, 100% 70%, 100% 100%, 0% 100%);
			}
		}
		.contents{
			.img{
				&.small1{
					img{
						width: 80%;
					}
				}
			}
			.contents_inner{
				display: grid;
				&.type1{
					grid-template-columns: 40% 58%;
					grid-column-gap: 2%;
					align-items: start;
					.img{
						display: grid;
						grid-template-columns: 39% 58%;
						grid-column-gap: 3%;
						align-items: start;
					}
				}
				&.type2{
					grid-template-columns: 37% 60%;
					grid-column-gap: 3%;
					align-items: start;
					.left_box{
						display: grid;
						grid-template-columns: 65% 30%;
						grid-column-gap: 5%;
						align-items: start;
					}
					.right_box{
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-column-gap: 20px;
						align-items: start;
					}
					dl{
						margin-bottom: 20px;
						&.line{
							border-bottom: 1px solid #9a9a9a;
							padding-bottom: 20px;
						}
						dt{
							font-weight: 600;
							line-height: 1.5;
							color:#233f3e;
							margin-bottom: 0.7em;
							font-size: 1.7rem;
						}
						dd{
							line-height: 1.5;
							font-size: 1.5rem;
						}
					}
				}
				&.type3{
					grid-template-columns: 70% 27%;
					grid-column-gap: 3%;
					margin-bottom: 30px;
				}
				&.type4{
					grid-template-columns: 72% 23%;
					grid-column-gap: 5%;
					align-items: start;
					.img{
						grid-area: 1 / 2 / 3 / 3;
					}
					.inner_box{
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						grid-column-gap: 20px;
						h6{
							text-align: center;
							padding:1em 1.5em;
							margin-top: 30px;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1200px) {
	.wrap{
		.contents{
			h3{
				font-size:2.2rem;
			}
			.detail_box.sec{
				margin-top: 30px;
				&.afterh3{
					margin-top: 30px;
				}
				.detail_inbox{
					padding: 20px;
				}
				img{
					&.small{
						width: 80%;
					}
				}
				h4{
					font-size:1.8rem;
				}
				h5{
					font-size:1.8rem;
				}
				h6{
					font-size:1.6rem;
				}
				p.service{
					font-size: 1.6rem;
				}
			}	
			.end{
				margin-top: 20px;
			}
		}
	}
	#eco_01{
		.wrap{
			.contents{
				.detail_inbox{
					.detail{
						dl{
							dd{
								font-size: 1.4rem;
							}
						}
					}
				}

			}
		}
	}
	#eco_04{
		.wrap{
			.contents{
				.contents_inner{
					&.type2{
						dl{
							dd{
								font-size: 1.4rem;
							}
						}
					}
				}
			}
		}
	}
}


@media screen and (max-width:1024px) {
	.wrap{
		.contents{
			h3{
				font-size:2.0rem;
			}
			.detail_box.sec{
				margin-top: 30px;
				margin-bottom: 0;
				&.afterh3{
					margin-top: 20px!important;
				}
				.detail_inbox{
					padding: 15px;
				}
				h4{
					font-size:1.6rem;
				}
				h5{
					font-size:1.6rem;
				}
				h6{
					font-size:1.5rem;
				}
				P{
					font-size:1.4rem;
				}
				p.service{
					font-size: 1.5rem;
					padding-bottom: 15px;
				}
				.outbox {
					padding: 15px;
					grid-column-gap: 5px;
					grid-row-gap: 5px;
				}
				ul.square{
					li{
						font-size: 1.4rem;
						&::before{
							top:.4em;
							left:0;
							width: 0.8em;
							height: 0.8em;
							margin-left: -1.3em;
						}	
					}
				}
				ul.daiya{
					li{
						font-size: 1.5rem;
						&::before{
							width: 0.6em;
							height: 0.6em;
						}	
					}
				}
			}	
			.end{
				margin-top: 20px;
			}
			p.under{
				margin-bottom: 30px;
			}
			p.big{
				font-size: 1.8rem!important;
			}
		}
	}
	#eco_01{
		.wrap{
			.contents{
				h2{
					grid-column-gap: 20px;
				}
				.detail_inbox{
					.detail.separate{
						display: grid;
						grid-template-columns: 1fr 1fr;
						grid-column-gap: 20px;
						h6{
							grid-area: 1/1/2/3;
						}
					}
					.contents_inner{
						&.type1{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 20px;
							margin: 15px 0 15px;
							.img{
								width: 80%;
								justify-self:center;
							}
							dl{
								margin-bottom: 0;
							}
						}
						&.type2{
							grid-template-columns: 1fr 1fr;
							grid-column-gap: 20px;
							margin-top: 20px;
							.left_box{
								.img{

									grid-row-gap: 10px;
									img{
										width: 90%;
									}
								}
							}
						}
						&.type3{
							grid-template-columns: 55% 42%;
							grid-column-gap: 3%;
							margin-top: 30px;
							.detail:first-child{
								margin-bottom: 30px;
							}
						}
						&.type4{
							margin-top: 20px;
						}
					}
				}

			}
		}
	}
	#eco_02{
		.wrap{
			.contents{
				.contents_inner{
					display: grid;
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						margin-bottom: 15px;
						.img{
							width: 60%;
							justify-self:center;
							margin: 0 0 20px;
						}
						.right_box{
							text-align: center;
							img{
								width: 70%;
								margin-top: 15px;
							}
						}
					}
					&.type2{
						grid-column-gap: 15px;
						margin-bottom: 10px;
						dl{
							margin-top: 15px;
							dt{
								padding: 0.5em 0.5em 0.6em;
								font-size: 1.5rem;
							}
							dd{
								padding: 10px 10px 0;
								font-size: 1.4rem;
							}
							dd.img{
								padding-bottom: 10px;
							}
							&:first-child{
								.img{
									img{
										width: 80%;
									}
								}
							}
							&:last-child{
								.img{
									img{
										width: 40%;
									}
								}
							}
						}
					}
					&.type3{
						margin-top: 10px;
						grid-template-columns: 32% 65%;
						grid-column-gap: 3%;
						align-items: center;
						img{
							width: 100%;
						}
						.red{
							font-size: 1.8rem;
						}
						.big{
							font-size: 2em;
							padding-left: 0.2em;
						}
						.middle{
							font-size: 1.2em;
						}
						ul.square{
							li{
								font-size: 1.6rem;
								&::before{
										top:0.5em;
									}
								&:first-child{
									margin-bottom: 0;
									&::before{
										top:1.9em;
									}
								}
							}
						}
					}
					&.type4{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						margin-top: 30px;
						align-items: start;
						.red{
							font-size: 2rem;
						}
						.big{
							font-size: 2em;
						}
						.middle{
							font-size: 1.2em;
						}
						.left_box{
							display: grid;
							margin-bottom: 20px;
							grid-column-gap: 20px;
							h6{
								grid-area: 1 / 1 / 2 / 3;
							}
							.price{
								display: grid;
								grid-template-columns: auto 1px auto;
								justify-content: center;
								grid-column-gap: 20px;
								margin-top: 10px;
								p{
									line-height: 1;
								}
								.line{
									border: 1px solid #9a9a9a;
								}
							}
						}
						.right_box{
							display: grid;
							grid-template-columns: 1fr 1fr;
							grid-row-gap: inherit;
							grid-column-gap: 20px;
						}
					}
				}
			}
		}
	}
	#eco_03{
		.wrap{
			.contents{
				h5.icon{
					grid-template-columns: 80px auto;
					grid-column-gap: 10px;
				}
				.contents_inner{
					display: grid;
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 15px;
						.img{
							width: 80%;
							justify-self:center;
						}
					}
					&.type2{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 20px;
						margin-top: 20px;
						.detail{
							grid-template-columns: 60% 37%;
							grid-column-gap: 3%;
						}
						.right_box{
							img{
								width: 80%;
								margin-bottom: 10px;
							}
						}
					}
					&.type3{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 30px;
						margin-top: 30px;
						.left_box{
							.inner_box{
								.img{
									img{
										width: 80%;
									}
								}
							}
						}
						.right_box{
							grid-row-gap: 30px;
							.inner_box{
								grid-template-columns: 73% 25%;
								grid-column-gap: 2%;
							}
						}
					}
				}
			}
		}
	}
	#eco_04{
		.wrap{
			&.last {
				&::after {
					clip-path: polygon(0% 93%, 100% 90%, 100% 100%, 0% 100%);
				}
			}
			.contents{
				.img{
					&.small1{
						img{
							width: 100%;
						}
					}
				}
				.contents_inner{
					display: grid;
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 10px;
						.img{
							width: 90%;
							justify-self:center;
						}
					}
					&.type2{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 30px;
						.left_box{
							display: grid;
							grid-template-columns: 80% 18%;
							grid-column-gap: 2%;
							align-items: start;
							img{
								aspect-ratio: 4 / 5;
								object-fit: cover;
								width: 100%; 
								display: block;
								object-position: right 32%;
							}
						}
						dl{
							dt{
								margin-bottom: 0.5em;
								font-size: 1.5rem;
							}
							dd{
								font-size: 1.4rem;
							}
						}
					}
					&.type3{
						grid-template-columns: 70% 27%;
						grid-column-gap: 3%;
						margin-bottom: 30px;
					}
					&.type4{
						grid-template-columns: 72% 23%;
						grid-column-gap: 5%;
						align-items: start;
						.img{
							grid-area: 1 / 2 / 2 / 2;
						}
						.inner_box{
							grid-area: 2 / 1 / 3 / 3;
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							grid-column-gap: 20px;
							h6{
								text-align: center;
								padding:1em 1.5em;
								margin-top: 30px;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px) {
		.wrap{
		.contents{
			h3{
				font-size:1.8rem;
			}
			.detail_box.sec{
				margin-top: 20px;

				p.service{
					font-size: 1.4rem;
					text-align: left;
					padding: 15px;
				}
				.outbox {
					grid-template-columns: 1fr;
					padding: 15px;
					grid-row-gap: 15px;

				}
				ul.square{
					li{
						font-size: 1.4rem;
						margin-left: 0.8em;
						&::before{
							top:.5em;
							left:0;
							width: 0.6em;
							height: 0.6em;
							margin-left: -0.8em;
						}	
					}
				}
				ul.daiya{
					li{
						font-size: 1.4rem;
						margin-left: 0.9em;
						&::before{
							width: 0.5em;
							height: 0.5em;
							margin-left: -0.8em;
						}	
					}
				}
			}	
			.end{
				margin-top: 10px;
			}
			p.big {
                font-size: 1.6rem !important;
            }
			 .under {
				margin-bottom: 20px;
			}
		}
	}
	#eco_01{
		.wrap{
			.contents{
				h2{
					grid-column-gap: 20px;
				}
				.detail_inbox{
					.detail.separate{
						display: grid;
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						h6{
							grid-area: inherit;
						}
					}
					.contents_inner{
						&.type1{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: inherit;
							margin: 20px 0 20px;
							.img{
								width: 100%;
								margin-bottom: 5px;
								&::after {
									width: 45px;
									height: 30px;
								}
							}
							dl{
								margin-bottom: 15px;
								dt{
									font-size: 1.5rem;
								}
							}
						}
						&.type2{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 20px;
							.left_box{
								.img{
									grid-row-gap: 10px;
									img{
										width: 100%;
									}
								}
							}
						}
						&.type3{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 10px;
							margin-top: 20px;
							.detail:first-child{
								margin-bottom: 20px;
							}
						}
						&.type4{
							margin-top: 20px;
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 20px;
							& .left_box {
								img {
									width: 80%;
									margin-top: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
	#eco_02{
		.wrap{
			.contents{
				.contents_inner{
					display: grid;
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						margin-bottom: 15px;
						.img{
							width: 100%;
							margin: 0 0 20px;
						}
						.right_box{
							img{
								width: 100%;
								margin-top: 10px;
							}
						}
					}
					&.type2{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						margin-bottom: 10px;
						dl{
							margin-top: 15px;
							dt{
								padding: 0.5em 0.5em 0.6em;
								font-size: 1.5rem;
							}
							dd{
								padding: 10px 10px 0;
								font-size: 1.4rem;
							}
							dd.img{
								padding-bottom: 10px;
							}
							&:first-child{
								.img{
									img{
										width: 80%;
									}
								}
							}
							&:last-child{
								.img{
									img{
										width: 40%;
									}
								}
							}
						}
					}
					&.type3{
						margin-top: 10px;
						grid-template-columns: 1fr;
						grid-column-gap: 3%;
						align-items: center;
						img{
							width: 80%;
						}
						.red{
							font-size: 1.8rem;
						}
						.big{
							font-size: 2em;
							padding-left: 0.2em;
						}
						.middle{
							font-size: 1.2em;
						}
						ul.square{
							li{
								font-size: 1.6rem;
								line-height: 1.3;
								margin-bottom: 0.8em;
								&::before{
										top:0.5em;
										margin-left: -0.9em;
									}
								&:first-child{
									margin-bottom: 0.5em;
									&::before{
										top:1.8em;
									}
								}
							}
						}
					}
					&.type4{
						.red{
							font-size: 1.8rem;
						}
						.big{
							font-size: 2em;
						}
						.middle{
							font-size: 1.2em;
						}
						.left_box{
							h6{
								grid-area: inherit;
							}
							.price{
								grid-column-gap: 15px;
							}
						}
						.right_box{
							grid-template-columns: 1fr;
							grid-row-gap: 10px;
							grid-column-gap: inherit;
						}
					}
				}
			}
		}
	}
	#eco_03{
		.wrap{
			.contents{
				h5.icon{
					grid-template-columns: 1fr;
					grid-column-gap: inherit;
					img{
						width: 120px;
						justify-self:center;
					}
				}
				.contents_inner{
					&.type1{
						.img{
							grid-template-columns: 100%;
						}
					}
					&.type2{
						.detail{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 15px;
						}
						.right_box{
							img{
								width: 100%;
							}
						}
					}
					&.type3{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 20px;
						margin-top: 20px;
						.left_box{
							.inner_box{
								grid-template-columns: 1fr;
								grid-row-gap: 20px;
								.img{
									img{
										width: 80%;
									}
								}
							}
						}
						.right_box{
							grid-row-gap: 20px;
							.inner_box{
								grid-template-columns: 1fr;
								grid-column-gap: inherit;
								grid-row-gap: 15px;
								img{
									width: 60%;
									justify-self:center;
								}
							}
						}
					}
					&.type4{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 15px;
						margin: 20px 0 20px;
					}
				}
			}
		}
	}
	#eco_04{
		.wrap{
			.contents{
				.img{
					&.small1{
						img{
							width: 100%;
						}
					}
				}
				.contents_inner{
					&.type1{
						margin-bottom: 20px;
						.img{
							grid-template-columns: 1fr;
							grid-row-gap: 15px;
							width: 100%;
							img.img1{
								width: 70%;
								justify-self:center;
							}
						}
					}
					&.type2{
						grid-row-gap: 20px;
						.left_box{
							grid-template-columns: 1fr 1fr;
							grid-column-gap: 15px;
							img{
								aspect-ratio: 3 / 5;
							}
						}
						.right_box {
							grid-template-columns: 1fr;
						}
					}
					&.type3{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 15px;
						margin-bottom: 20px;
					}
					&.type4{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 15px;
						align-items: start;
						.img{
							grid-area: inherit;
							width: 80%;
							justify-self:center;
						}
						.inner_box{
							grid-area: inherit;
							display: grid;
							grid-template-columns: 1fr;
							grid-column-gap: 10px;
							h6{
								text-align: center;
								padding:0.7em 1.5em;
								margin-top: 5px;
							}
						}
					}
				}
			}
		}
	}
}