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

#equipment #mainWrap {
	position: relative;
}
#equipment #mainWrap h3 {
	position: absolute;
	color: #fff;
	font-size: 20px;
	left: 5%;
	top: 3%;
}
#equipment #mainWrap h3 span {
	display: block;
	width: 100%;
	border-bottom: #fff solid 1px;
	font-size: 120%;
	padding-bottom: 0.3em;
	margin-bottom: 0.3em;
}
#sec01 {
	border-bottom: #000 solid 1px;
}
#sec01 .flex1 {
	padding: 3% 0 0;
}
#sec01 .flex1 .leftBox {
	width: 49%;
}
#sec01 .flex1 .leftBox .imgBox {
	width: 50%;
	position: relative;
}
#sec01 .flex1 .leftBox .imgBox .rinnai {
	position: absolute;
	width: 34%;
	left: 3%;
	top: 3%;
}
#sec01 .flex1 .leftBox .imgBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	
}
#sec01 .flex1 .leftBox .txtBox {
	width: 50%;
	background-color: #1d4f64;
	color: #fff;
	padding: 15px;
		position: relative;
}
#sec01 .flex1 .leftBox .txtBox .deliImg {
	position: absolute;
	width: 20%;
	right: 2%;
	top: 100%;
	transform: translateY(-15%);
}
#sec01 .flex1 .leftBox .txtBox .deliImg::after {
	content: "image";
	position: absolute;
	font-size: 10px;
	right: 102%;
	bottom: 0;
	color: #000;
}
#sec01 .flex1 .leftBox .txtBox p {
	width: 60%;
	margin: 0 auto;
}
#sec01 .flex1 .leftBox .txtBox > dl {

}
#sec01 .flex1 .leftBox .txtBox > dl dt {
	font-size: 18px;
	padding: 0.3em 0 0.1em;
}
#sec01 .flex1 .leftBox .txtBox > dl dd,
#sec01 .flex1 .rightBox .leftBox p {
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: -0.03em;
}
#sec01 .flex1 .leftBox dl.auto {
	width: 80%;
}

#sec01 .flex1 .rightBox {
	width: 49%;
}
#sec01 .flex1 .rightBox .leftBox {
	width: 29%;
}
#sec01 .flex1 .rightBox .leftBox p {
	padding-top: 1em;
}

#sec01 .flex1 .rightBox .rightBox {
	width: 68%;
}
#sec01 .flex2 {
	padding: 3% 0;
}
#sec01 .flex2 .itemBox {
	width: 24%;
	background-color: #eaedf0;
	font-size: 12px;
	display: flex;
justify-content: space-between;
	align-items: center;

}
#sec01 .flex2 .itemBox .imgBox {
	width: 50%;
}
#sec01 .flex2 .itemBox p {
	width: 50%;
	padding: 0.5em 1em;
	line-height: 1.2;
}

#sec02 {}
#sec02 .flex3 {
	padding-top: 3%;
}
#sec02 .flex3 .itemBox {
	width: 19%;
	max-width: 220px;
}

#sec02 .flex3 .itemBox .caption {
	padding-top: 0.2em;
	font-size: 10px;
}

#sec02 .flex4 {
	padding-top: 3%;
}
#sec02 .flex4 .leftBox {
	width: 59%;
	background-color: #e4edec;
	border: #000 solid 1px;
	padding: 20px;
}
#sec02 .flex4 .leftBox .imgBox {
	width: 47%;
	max-width: 310px;
}
#sec02 .flex4 .leftBox dl {
	width: 50%;
}
#sec02 .flex4 .leftBox dl dt {
	font-size: 16px;
	padding-bottom: 0.3em;
}
#sec02 .flex4 .leftBox dl dd {
	font-size: 13px;
}
#sec02 .flex4 .leftBox dl dd .imgBox {
	float: right;
	width: 52%;
	max-width: 170px;
	margin-left: 1em;
}
#sec02 .flex4 .rightBox  {
	width: 39%;
}
#sec02 .flex4 .rightBox dt  {
	height: 1.8em;
}

@media screen and (max-width : 959px ){
	#equipment #mainWrap {
		position: relative;
	}
	#equipment #mainWrap h3 {
		font-size: clamp(18px, 2.5vw, 20px);
		left: 1em;
		top: 1em;
	}

	#sec01 .flex1 {
		max-width: 550px;
		margin: 0 auto;
	}
	#sec01 .flex1 .leftBox,
	#sec01 .flex1 .rightBox
	{
		width: 100%;
		padding: 15px 0;
	}
	#sec01 .flex2 .itemBox {
		display: block;
}
	#sec01 .flex2 .itemBox .imgBox {
		width: 100%;
	}
	#sec01 .flex2 .itemBox p {
		width: 100%;
		padding: 1em 1em;
		line-height: 1.2;
	}
	#sec02 .flex3 {
		gap:10px 5%;
		justify-content: center;
	}
	#sec02 .flex3 .itemBox {
			width: 30%;
			max-width: 220px;
	}
	#sec02 .flex4 .leftBox {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
		margin-bottom: 20px;
	}
	#sec02 .flex4 .leftBox .imgBox {
    width: 100%;
    max-width: 310px;
		margin: 0 auto;
	}
	#sec02 .flex4 .leftBox dl {
    width: 100%;
		padding-top: 10px;
	}
	#sec02 .flex4 .rightBox {
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
	}

}
@media screen and (max-width : 599px ){
	#equipment #pageTit .engTxt {
    text-align: center;
	}
	#equipment #mainWrap h3 {
		font-size: 4vw;
		width: 90%;
	}
	#equipment #mainWrap h3 span {
		font-size: 100%;
	}
	#sec01 .flex1 .leftBox .imgBox {
    width: 100%;
    position: relative;
	}
	
	#sec01 .flex1 .leftBox .txtBox {
    width: 100%;
	}
	#sec01 .flex1 .leftBox .txtBox p {
			max-width: 200px;
	}
	#sec01 .flex1 .leftBox .txtBox > dl {
		width: 75%;
}
	#sec01 .flex1 .leftBox .txtBox > dl dt {
    font-size: 16px;
	
	}
	#sec01 .flex1 .leftBox .txtBox .deliImg {
    width: 20%;
		max-width: 80px;
    right: 3%;
    top: 100%;
    transform: translateY(-115%);
	}
	#sec01 .flex1 .leftBox .txtBox .deliImg::after {
    right: auto;
		left: 0;
    bottom: -1.5em;
    color: #fff;
	}
	#sec01 .flex1 .leftBox dl.auto {
    width: 100%;
		padding-top: 20px;
	}
	#equipment dt {
    text-align: center;
		font-size: 4.3vw;
		font-size: clamp(15px, 4.3vw, 17px);
	}
	#sec01 .flex1 .rightBox .leftBox {
    width: 100%;
	}
	#sec01 .flex1 .rightBox .leftBox img {
		display: block;
		max-width: 300px;
		margin: 0 auto;
	}
	#sec01 .flex1 .rightBox .rightBox {
    width: 100%;
	}
	#sec01 .flex2 {
    max-width: 400px;
		margin: 0 auto;
	}
	#sec01 .flex2 .itemBox {
    width: calc(50% - 5px);
		margin-bottom: 10px;
	}
	#sec02 .flex3 {
		max-width: 400px;
		margin: 0 auto;
	}
	#sec02 .flex3 .itemBox {
    width:100%;
    max-width: 100%;
		padding: 5px 0;
		
  }
	#sec02 .flex3 .itemBox .imgBox {
		max-width: 300px;
		margin: 0 auto;
	}
	#sec02 .flex4 .leftBox dl dt {
    line-height: 1.3;
		padding-bottom: 0.3em;
}
	#sec02 .flex4 .leftBox dl dd {
		line-height: 1.4;
	}
	#sec02 .flex4 .rightBox {
		width: 90%;
		margin: 0 auto;
	}
	#sec02 .flex4 .rightBox .imgBox {
		max-width: 300px;
		margin: 0 auto;
	}
	
	
}