@charset "utf-8";
.wrap{
	.contents{
		.detail_box.sec{
			margin-top: 40px;
			border: 1px solid #9a9a9a;
			background-color: #ffffff;
			.detail_inbox{
				padding: 30px;
			}
			.img{
				text-align: center;
				img{
					margin-bottom: 0;
					&.small{
						width: 90%;
						display: block;
						margin: 0 auto;
					}
					&.small45{
						width: 45%;
					}
					&.small50{
						width: 50%;
					}
					&.small60{
						width: 60%;
					}
					&.small70{
						width: 70%;
					}
					&.small80{
						width: 80%;
						margin-bottom: 10px;
					}
					&.small90{
						width: 90%;
					}
				}
			}
			h3{
				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;
				}
			}
			h4{
				color:#098EC7;
				line-height: 1.4;
			}
			h5{
				color:#233f3e;
				font-size:1.6rem;
				margin: 0 0 1em 1.5em;
				text-align: left;
				position: relative;
				&::before{
					content:"";
					background-color: #85bc6e; 
					width: 1em;
					height: 1em;
					position: absolute;
					left:0;
					top:0.2em;
					margin-left: -1.5em;
				}
			}
			p.service{
				text-align: center;
				padding-bottom: 20px;
				font-size: 1.8rem;
			}
			.outbox{
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 15px;
				grid-row-gap: 15px;
				padding: 20px;
				&.one{
					grid-template-columns: 1fr;
					grid-row-gap: 15px;
				}
			}
			.area{
				grid-area:2/1/3/3;
			}
		}	
		.end{
			margin-top: 30px;
		}
	}
}
#sec_01{
	.wrap{
		&.last {
			&::after {
				clip-path: polygon(0% 90%, 100% 85%, 100% 100%, 0% 100%);
			}
		}
		.contents{
			.detail_box{
				.contents_inner{
					display:grid;
					&.type1{
						grid-template-columns: 35% 60%;
						grid-column-gap: 5%;
						align-items: center;
						margin-bottom: 20px;
						.detail{
							display:grid;
							grid-row-gap: 30px;
						}
						.inbox{
							display:grid;
							grid-template-columns: 70% 27%;
							grid-column-gap: 3%;
						}
					}
					&.type2{
						grid-template-columns: 60% 35%;
						grid-column-gap: 5%;
						padding-top: 0;
						.detail{
							img{
								width: 85%;
								padding-top: 20px;
							}
						}
					}
					&.type3{
						grid-template-columns: repeat(3, 1fr);
						grid-column-gap: 30px;
						padding-top: 0;
						h4{
							font-size: 1.8rem;
							letter-spacing: -0.1em;
						}
					}
					&.type5{
						grid-template-columns: 37% 60%;
						grid-column-gap: 3%;
						.img_box{
							display: grid;
							grid-template-columns: 60% 35%;
							grid-column-gap: 5%;
							margin-top: 30px;
						}
					}
					&.type6{
						margin:0 auto;
						grid-template-columns:  repeat(3, auto);
						grid-column-gap: 50px;
						justify-content: center;
						padding-top: 0;
						h4{
							margin-bottom: 15px;
						}
						ul{
							li{
								text-align: 1.8;
								margin-bottom: 0.7em;
								position: relative;
								text-indent: 1em;
								&::before{
									content:"";
									background-color: #53A3B7;
									position: absolute;
									display: inline-block;
									top:4px;
									left:0;
									width: 10px;
									height: 10px;
								}
							}
						}
						img{
							width: 350px;
						}
					}
				}
			}
			.contents_inner.type4{
				display:grid;
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 30px;
				grid-row-gap: 40px;
				padding-top: 40px;
				h3{
					font-size: 1.8rem;
					margin-bottom: 0;
				}
				.detail_box.sec{
					margin-top: 0;
					.area{
						img{
							width: 60%;
						}
					}
				}
			}
		}
	}
}
#other_01{
	.wrap{
		&.last {
			&::after {
				clip-path: polygon(0% 90%, 100% 85%, 100% 100%, 0% 100%);
			}
		}
		.contents{
			h3{
				font-size: 1.8rem;
				margin-bottom: 0;
			}
			h4{
				font-size: 1.6rem;
				margin-bottom: 1em;
			}
			.img{
				img{
					&.img01{
					width: 80%;
				}
					&.img02{
						width: 60%;
					}
				}
			}
			.contents_inner{
				width: 100%;
				display:grid;
				&.type1{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 30px;
					grid-row-gap: 30px;
					padding-top: 40px;
					.detail_box.sec{
						margin-top: 0;
						.outbox{
							grid-template-columns: 60% 35%;
							grid-column-gap: 5%;
							&.oposit{
								grid-template-columns: 35% 60%;
							}
							&.half{
								grid-template-columns: repeat(2, 1fr);
							}
						}
					}
				}
				&.type2{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 20px;
					/*padding: 10px 30px 30px;*/
					align-items: center;
					&.al_top{
						align-items: flex-start;
						.outbox{
							.caption{
								grid-area: 2/1/3/3;
								padding-top: 0;
							}
							img{
								margin-bottom: 0;
							}
						}
					}
					.outbox{
						grid-template-columns: 60% 35%;
						grid-column-gap: 5%;
						padding: 0;
					}	
				}
				&.type3{
					grid-template-columns: 37% 60%;
					grid-column-gap: 3%;
					margin-top: 50px;
					padding-top: 30px;
					border-top: 1px solid #9a9a9a;
					h4{
						padding: 0 0 10px;
					}
					.right_box{
						border-left: 1px solid #9a9a9a;
						padding-left: 30px;
						display:grid;
						grid-row-gap: 10px;
						h4{
							display: grid;
							grid-template-columns: 1fr 150px;
							justify-content: space-between;
							align-items: center;
							padding: 0;
							margin: 0;
							img{
								margin-bottom: 0;
							}
						}
						.detail{
							display: grid;
							grid-template-columns: repeat(2,1fr);
							grid-column-gap: 30px;
						}
					}
					.outbox{
						grid-template-columns: 60% 35%;
						grid-column-gap: 5%;
						padding: 0;
					}
				}
				&.type4{
					grid-template-columns: 40% 57%;
					grid-column-gap: 3%;
					align-items: center;
					h4{
						padding: 0;
						margin-bottom: 1em;
						line-height: 1.5;
					}
				}
				&.type5{
					grid-template-columns: 50% 45%;
					grid-column-gap: 5%;
					grid-row-gap: 30px;
					align-items: start;
					h4{
						text-align: center;
					}
					.border{
						border: 2px solid #53A3B7;
						padding: 10px;
					}
					.op_01{
						img{
							width: 80%;
						}
					}
					.op_02{
						img{
							width: 60%;
						}
					}
					.op_03{
						img{
							width: 80%;
						}
					}
				}
			}
		}
	}
}
#eco_01{
	.wrap{
		.contents{
			.red{
				color: #cf2b2b;
			}
			.big{
				font-size: 1.4em;
			}
			.detail_inbox{
				padding: 30px;
				dl{
					margin-bottom: 1em;
					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% 50%;
						grid-column-gap: 5%;
						margin-top: 30px;
						.img{
							display: grid;
							grid-row-gap: 10px;
						}
					}
					&.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: 65% 30%;
						grid-column-gap: 5%;
						margin-top: 30px;
					}
				}
			}
			
		}
	}
}
@media screen and (max-width:1200px) {
	.wrap{
		.contents{
			.detail_box.sec{
				margin-top: 30px;
				.detail_inbox{
					padding: 20px;
				}
				img{
					&.small{
						width: 80%;
					}
				}
				h3{
					font-size:1.8rem;
				}
				p.service{
					font-size: 1.6rem;
				}
			}	
			.end{
				margin-top: 20px;
			}
		}
	}
	#sec_01{
		.wrap{
			&.last {
				&::after {
					clip-path: polygon(0% 90%, 100% 85%, 100% 100%, 0% 100%);
				}
			}
			.contents{
				.detail_box{
					.contents_inner{
						&.type1{
							margin-bottom: 10px;
						}
						&.type3{
							h4{
								font-size: 1.6rem;
							}
						}
						&.type5{
							grid-template-columns: 43% 55%;
							grid-column-gap: 2%;
							.img_box{
								margin-top: 20px;
							}
						}
						&.type6{
							h4{
								font-size: 1.6rem;
							}
							ul{
								li{
									font-size: 1.5rem;
									&::before{
										top:5px;
										width: 8px;
										height: 8px;
									}
								}
							}
							img{
								width: 300px;
							}
						}
					}
				}
				.contents_inner.type4{
					grid-column-gap: 20px;
					grid-row-gap: 30px;
					padding-top: 30px;
					h3{
						font-size: 1.6rem;
					}
				}
			}
		}
	}
	#other_01{
		.wrap{
			.contents{
				h3{
					font-size: 1.6rem;
				}
				h4{
					font-size: 1.6rem;
				}
				.img{
					img{
						&.img01{
						width: 90%;
					}
						&.img02{
							width: 70%;
						}
					}
				}
				.contents_inner{
					&.type1{
						grid-column-gap: 20px;
						padding-top: 30px;
					}
					&.type2{
						padding-bottom: 20px;
					}
					&.type3{
						margin-top: 30px;
						padding-top:20px;
					}
					&.type4{
						align-items: start;
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px) {
	.wrap{
		.contents{
			.detail_box.sec{
				margin-top: 20px;
				margin-bottom: 0;
				.detail_inbox{
					padding: 15px;
				}
				& .img {
					& img {
						&.small{
							width: 95%;
						}
						&.small45 {
							width: 75%;
						}
						&.small50 {
							width: 70%;
						}
						&.small60 {
							width: 80%;
						}
						&.small70 {
							width: 80%;
						}
						&.small80 {
							width: 90%;
						}
					}
				}
				h3{
					font-size:1.6rem;
				}
				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;
				}
			}	
			.end{
				margin-top: 20px;
			}
		}
	}
	#sec_01{
		.wrap{
			&.last {
				&::after {
					clip-path: polygon(0% 90%, 100% 85%, 100% 100%, 0% 100%);
				}
			}
			.contents{
				.detail_box{
					.contents_inner{
						&.type1{
							margin-bottom: 20px;
						}
						&.type2{
							grid-template-columns: 57% 40%;
							grid-column-gap: 3%;
							h4{
								text-align: left;
							}
						}
						&.type3{
							grid-column-gap: 20px;
							h4{
								font-size: 1.5rem;
							}
						}
						&.type6{
							grid-column-gap: 20px;
							h4{
								font-size: 1.6rem;
							}
							ul{
								li{
									font-size: 1.4rem;
									&::before{
										top:5px;
										width: 8px;
										height: 8px;
									}
								}
							}
							img{
								width: 300px;
							}
						}
					}
				}
				.contents_inner.type4{
					grid-column-gap: 15px;
					grid-row-gap: 20px;
					padding-top: 20px;
					h3{
						font-size: 1.4rem;
                        padding-left: 0.3em;
					}
					& .detail_box.sec {
						.area{
							img{
								width: 80%;
							}
						}
					}
				}
			}
		}
	}
	#other_01{
		.wrap{
			.contents{
				.img{
					img{
						&.img01{
						width: 100%;
					}
						&.img02{
							width: 90%;
						}
					}
				}
				h3{
					font-size: 1.6rem;
				}
				h4{
					font-size: 1.6rem;
				}
				.contents_inner{
					&.type1{
						grid-column-gap: 15px;
						grid-row-gap: 20px;
					}
					&.type3{
						margin-top: 30px;
					}
					&.type4{
						grid-template-columns: 1fr;
						img{
							margin-top: 20px;
						}
					}
					&.type5{
						align-items: start;
						grid-template-columns: 55% 40%;
						grid-column-gap: 5%;
						grid-row-gap: 20px;
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px) {
		.wrap{
		.contents{
			.detail_box.sec{
				margin-top: 20px;
				& .img {
					& img {
						&.small{
							width: 95%;
						}
						&.small45 {
							width: 50%;
						}
						&.small60 {
							width: 60%;
						}
						&.small50 {
							width: 90%;
						}
						&.small70 {
							width: 70%;
						}
						&.small80 {
							width: 80%;
						}
					}
				}
				h3{
					font-size:1.6rem;
				}
				p.service{
					font-size: 1.4rem;
					text-align: left;
					padding: 15px;
				}
				.outbox {
					grid-template-columns: 1fr;
					padding: 15px;
					grid-row-gap: 15px;

				}
			}	
			.end{
				margin-top: 10px;
			}
		}
	}
	#sec_01{
		.wrap{
			&.last {
				&::after {
					clip-path: polygon(0% 98%, 100% 97%, 100% 100%, 0% 100%);
				}
			}
			.contents{
				.detail_box{
					.contents_inner{
						&.type1{
							grid-template-columns: 1fr;
							.img{
								text-align: center;
								margin-bottom: 15px;
								img{
									width: 80%;
								}
							}
							.detail{
								grid-row-gap: 15px;
								.inbox{
									grid-template-columns: 1fr;
									img{
										width: 50%;
										margin: 0 auto;
									}
								}
							}
						}
						&.type2{
							grid-template-columns: 1fr;
							grid-row-gap: 15px;
							.img{
								img{
									width: 100%;
								}
							}

						}
						&.type3{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 15px;
							h4{
								font-size: 1.5rem;
							}
						}
						&.type5{
							grid-template-columns: 1fr;
							grid-row-gap: 30px;
						}
						&.type6{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							grid-row-gap: 15px;
							h4{
								font-size: 1.5rem;
								margin-bottom: 10px;
							}
							ul{
								li{
									font-size: 1.4rem;
									&::before{
										top:5px;
										width: 8px;
										height: 8px;
									}
								}
							}
							img{
								width: 100%;
							}
						}
					}
				}
				.contents_inner.type4{
					grid-template-columns: 1fr;
					grid-column-gap: inherit;
					grid-row-gap: 20px;
					padding-top: 20px;
					h3{
						font-size: 1.5rem;
                        padding-left: 1em;
					}
					& .detail_box.sec {
						.area{
							grid-area:inherit;
							img{
								width: 100%;
							}		
						}
					}
				}
			}
		}
	}
	#other_01{
		.wrap{
			&.last {
				&::after {
					clip-path: polygon(0% 98%, 100% 97%, 100% 100%, 0% 100%);
				}
			}
			.contents{
				img{
					img{
						&.img01{
						width: 100%;
					}
						&.img02{
							width: 100%;
						}
					}
				}
				h3{
					font-size: 1.5rem;
				}
				h4{
					font-size: 1.5rem;
				}
				.contents_inner{
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 20px;
						padding-top: 20px;
						.detail_box.sec{
							margin-top: 0;
							.outbox{
								grid-template-columns: 1fr;
								grid-column-gap: inherit;
								&.oposit{
									grid-template-columns: 1fr;
									img{
										width: 100%;
									}
								}
								&.half{
									grid-template-columns: 1fr;
								}
								img{
									width: 80%;
								}
							}
						}
					}
					&.type2{
						grid-template-columns: 1fr;
						grid-row-gap: 20px;
						margin-bottom: 20px;
						&.al_top{
						align-items: flex-start;
							.outbox{
								grid-template-columns: 1fr;
								grid-column-gap: inherit;
								justify-items: center;
								img{
									width: 80%;
								}
								.caption{
									grid-area: inherit;
									padding-top: 0;
								}
								img{
									margin-bottom: 0;
								}
							}
						}
						.outbox{
							grid-template-columns: 1fr;
							grid-column-gap: inherit;
							justify-items: center;
							img{
								width: 80%;
							}
						}
					}
					&.type3{
						grid-template-columns: 1fr;
						.right_box{
							border-left: none;
							padding-left: 0;
							h4{
								grid-template-columns: 1fr 100px;
							}
							.detail{
								grid-column-gap: 15px;
							}
						}

					}
					&.type4{
						grid-template-columns: 1fr;
						img{
							margin-top: 20px;
						}
					}
					&.type5{
						h4{
							margin-bottom: 10px;
						}
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 20px;
						.area{
							grid-area:inherit;
						}
						.border{
							width: 90%;
							margin: 0 auto;
						}
						.op_01{
							img{
								width: 100%;
							}
						}
						.op_02{
							img{
								width: 80%;
							}
						}
						.op_03{
							img{
								width: 100%;
							}
						}
					}
				}
			}
		}
	}

}