@charset "utf-8";
#zeh_01{
	.wrap{
		background-image: url("../img/equipment/zeh/main.jpg");
		background-size:cover;
		background-repeat: no-repeat;
		background-position:center center;
		height: 1000px;
		display:grid;
		align-items: center;
		padding-bottom: 0;
		.contents{
			.img{
				margin-bottom: 50px;
			}
			.detail{
				margin-bottom: 90px;
				p{
					text-align:center;
					color:#333;
					text-shadow: 2px 2px 0 #D1EDF9;
				}
			}
		}
	}
}
#zeh_02{
	.wrap{
		.contents{
			h4{
				font-size: 2.6rem;
				margin-bottom: 40px;
				position: relative;
				text-indent: 1em;
				span{
					letter-spacing: 0.2em;
				}
				&::before{
					content:"";
					position: absolute;
					top:-2px;
					left:0;
					width: 5px;
					height: 1.4em;
					background-color: #098EC7;
				}
			}
			.contents_inner{
				display: grid;
				margin-bottom: 70px;
				.detail_box{
					border: 1px solid #9a9a9a;
					text-align: center;
					h5{
						font-size: 2.0rem;
						padding: 0.5em 0;
						/*background-color: #53A3B7;*/
						background: linear-gradient(90deg, rgba(83, 163, 183, 1) 0%, rgba(142, 202, 217, 1) 100%);
						color:#ffffff;
						margin-bottom: 1em;
					}
				}
				&.type1{
					grid-template-columns: 1fr 1fr;
					grid-column-gap: 50px;
					position: relative;
					img{
						width: 80%;
						padding: 30px 0;
					}
					p{
						font-size: 2rem;
						text-align: center;
					}
					&::after{
						content:"";
						background-image: url("../img/equipment/zeh/icon_arrow.png");
						background-size:cover;
						background-position:center center;
						position: absolute;
						bottom:-55px;
						left: 50%;
						transform: translateX(-50%);
						width: 100px;
						height: 39px;
						display: inline-block;
					}
					.detail_box{
						position: relative;
						&:first-child&::after{
							content:"";
							background-image: url("../img/equipment/zeh/icon_plus.png");
							background-size:cover;
							background-position:center center;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							right: -65px;
							width: 80px;
							height: 80px;
							display: inline-block;
							z-index: 2;
						}
					}
				}
				&.type2{
					grid-template-columns: repeat(3, 1fr);
					grid-column-gap: 30px;
					margin-bottom: 20px;
					h5{
						margin-bottom: 0;
					}
					img{
						margin-bottom: 0;
					}
				}
			}
		}
	}
}
#zeh_03{
	.wrap{
		background-color: #D1EDF9;
		.contents{
			.bels{
				display: grid;
				justify-items: center;
				margin: 0 auto 50px;
				width: 80%;
				p{
					margin-bottom: 30px;
					font-size: 2rem;
					line-height: 1.8;
				}
				img{
					width: 90%;
				}
			}
			.contents_inner{
				display: grid;
				&.type1{
					grid-template-columns: repeat(2, 1fr);
					grid-column-gap: 50px;
					grid-row-gap: 50px;
					.detail_box{
						background-color: #ffffff;
						border-radius: 20px;
						height: 300px;
						h5{
							/*background-color: #53A3B7;*/
							background: linear-gradient(90deg, rgba(83, 163, 183, 1) 0%, rgba(142, 202, 217, 1) 100%);
							color: #ffffff;
							font-size: 1.8rem;
							padding: 0.7em 0;
							border-radius: 20px 20px 0px 0px;
						}
						p{
							font-size: 1.6rem;
							padding: 20px 30px;
							line-height: 1.8;
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width:1200px) {
	#zeh_01{
		.wrap{
			height: 700px;
			.contents{
				.img{
					text-align: center;
					img{
						width: 90%;
					}
				}
				.detail{
					margin-bottom: 30px;
					p{
						font-size: 1.5rem;
						&.body{
							font-size: 2.2rem;
						}
					}
				}
			}
		}
	}
	#zeh_02{
		.wrap{
			.contents{
				h4{
					font-size: 2.3rem;
				}
				.contents_inner{
					.detail_box{
						h5{
							font-size: 1.8rem;
						}
					}
					&.type1{
						p{
							font-size: 1.8rem;
						}
					}
				}
			}
		}
	}
	#zeh_03{
		.wrap{
			.contents{
				.bels{
					width: 100%;
					p{
						font-size: 1.8rem;
					}
					img{
						width: 70%;
					}
				}
				.contents_inner{
					&.type1{
						grid-column-gap: 30px;
						grid-row-gap: 30px;
						.detail_box{
							height: auto;
							p{
								padding-bottom: 2em;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px) {
	#zeh_01{
		.wrap{
			height: 500px;
			.contents{
				.img{
					text-align: center;
					margin-bottom: 30px;
					img{
						width: 80%;
					}
				}
				.detail{
					margin-bottom: 0;
					p{
						font-size: 1.4rem;
						&.body{
							font-size: 2.0rem;
						}
					}
				}
			}
		}
	}
	#zeh_02{
		.wrap{
			.contents{
				h4{
					font-size: 2.0rem;
					margin-bottom: 20px;
				}
				p.body.eq {
					margin-bottom: 30px;
				}
				.contents_inner{
					.detail_box{
						h5{
							font-size: 1.6rem;
						}
					}
					&.type1{
						grid-column-gap: 30px;
						margin-bottom: 50px;
						p{
							font-size: 1.6rem;
						}
						.detail_box{
							&:first-child&::after{
								right: -45px;
								width: 60px;
								height: 60px;
							}
						}
						&::after{
							bottom:-40px;
							width: 80px;
							height: 29px;
						}
					}
					&.type2{
						grid-column-gap: 20px;
						margin-bottom: 10px;
					}
				}
			}
		}
	}
	#zeh_03{
		.wrap{
			.contents{
				.bels{
					margin-bottom: 30px;
					p{
						font-size: 1.6rem;
					}
					img{
						width: 80%;
					}
				}
				.contents_inner{
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 30px;
						.detail_box{
							height: auto;
							border-radius: 10px;
							h5{
								font-size: 1.6rem;
								border-radius: 10px 10px 0px 0px;
								text-align: left;
								padding-left: 1.5em;
							}
							p{
								font-size: 1.4rem;
								padding: 15px 20px;
							}
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:768px) {
	#zeh_01{
		.wrap{
			height: auto;
			padding: 50px 0;
			.contents{
				.img{
					img{
						width: 90%;
					}
				}
				.detail{
					p{
						&.body{
							font-size: 1.8rem;
						}
					}
				}
			}
		}
	}
	#zeh_02{
		.wrap{
			.contents{
				h4{
					font-size: 1.8rem;
				}
				.contents_inner{
					&.type1{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 50px;
						margin-bottom: 50px;
						p{
							font-size: 1.5rem;
						}
						.detail_box{
							&:first-child&::after{
								right: inherit;
								left: 50%;
								transform: translateX(-50%);
								top:inherit;
								bottom: -50px;
								width: 60px;
								height: 60px;
							}
							img{
								width: 100%;
								padding: 15px;
							}
						}
						&::after{
							bottom:-40px;
							width: 80px;
							height: 29px;
						}
					}
					&.type2{
						grid-template-columns: 1fr;
						grid-column-gap: inherit;
						grid-row-gap: 20px;
						img {
							display: block;
							aspect-ratio: 5 / 3;
							object-fit: cover;
							width: 100%;
						}
					}
				}
			}
		}
	}
	#zeh_03{
		.wrap{
			.contents{
				.bels{
					margin-bottom: 30px;
					p{
						font-size: 1.4rem;
						margin-bottom: 15px;
					}
					img{
						width: 100%;
					}
				}
				.contents_inner{
					&.type1{
						grid-row-gap: 20px;
						.detail_box{
							h5{
								font-size: 1.5rem;
								text-align: left;
								padding: 0.5em 0 0.5em 1.5em;
							}
							p{
								font-size: 1.3rem;
								padding: 15px;
								line-height: 1.6;
							}
						}
					}
				}
			}
		}
	}
}