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


#mainWrap {
	position: relative;
	
}
#mainWrap .mainImg {
	position: absolute!important;
	top: 0;
	left: 0;
	width: calc(50% + 50px);
	height: 100%;
}
#mainWrap .mainImg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#sec01 {}
#sec01 .flex1 {
	width: 40%;
	margin-left: 60%;
	padding-top: 50px;
	gap: 20px 0;
}
#sec01 .flex1 .itemBox {
	width: 48%;
	max-width: 220px;
}

#sec02 {}
#sec02 .flex2 {
	padding-top: 3%;
	flex-direction: row-reverse;
}
#sec02 .flex2 .jozu {
	width: 37%;
	background-color: #e4edec;
	padding: 3% 2%;
}
#sec02 .flex2 .itemWrap {
	width: 60%;
	gap:20px 0;
	padding-bottom: 20px;
}
#sec02 .flex2 .itemWrap .item2 {
	width: 65%;
}
#sec02 .flex2 .itemWrap .item2 .itemBox {
	width: 48%;
}
#sec02 .flex2 .itemWrap .item1 {
	width: 31%;
}
#sec02 .flex2 .itemWrap .item2 .item22 {
	width: 100%;
}

#sec02 .flex3 {
	background-color: #e4edec;
	padding: 3% 2% 2%;
}
#sec02 .flex3 .leftBox {
	width: 36%;
}
#sec02 .flex3 .leftBox > p  {
	font-size: 14px;
	padding: 1.5em 0;
}
#sec02 .flex3 .leftBox .itemBox {}
#sec02 .flex3 .leftBox .itemBox .imgBox {
	width: 40%;
}
#sec02 .flex3 .leftBox .itemBox dl {
	width: 55%;
}
#sec02 .flex3 .rightBox {
	width: 61%;
	max-width: 700px;
}


@media screen and (max-width : 959px ){
	#mainWrap .mainImg {
		position: relative!important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#equipment #mainWrap h3 {
		font-size: clamp(18px, 2.5vw, 20px);
		left: 1em;
		top: 1em;
	}
	#sec01 .flex1 {
    width: 100%;
    margin-left: 0%;
    padding-top: 50px;
    gap: 20px 0px;
		gap: 10px 5%;
		justify-content: center;
	}
	#sec01 .flex1 .itemBox,
	#sec02 .flex2 .itemWrap .itemBox{
		width: 30%;
	}
	
	#sec02 .flex2 {
		padding-top: 3%;
		flex-direction: row;
	}
	#sec02 .flex2 .itemWrap {
    width: 100%;
		max-width: 750px;
    margin: 0 auto;
    gap: 20px 0;
    padding-bottom: 20px;
	}
	#sec02 .flex2 .jozu,#sec02 .flex3 {
    width: 100%;
		max-width: 500px;
		margin: 0 auto;
    padding: 3% 2%;
	}

#sec02 .flex3 .leftBox {
	width: 100%;
	margin-top: 30px;
}
#sec02 .flex3 .leftBox > p  {
	font-size: 14px;
	padding: 1.5em 0;
}
#sec02 .flex3 .leftBox .itemBox {}
#sec02 .flex3 .leftBox .itemBox .imgBox {
	width: 40%;
}
#sec02 .flex3 .leftBox .itemBox dl {
	width: 55%;
}
#sec02 .flex3 .rightBox {
	width: 100%;
	padding-top: 20px;
}
}

@media screen and (max-width : 599px ){
	#sec01 .flex1 {
		max-width: 400px;
		margin: 0 auto;
	}
	#sec01 .flex1 .itemBox,
	#sec02 .flex2 .itemWrap .itemBox,
	#sec02 .flex2 .itemWrap .item2
	{
    width:90%;
    max-width: 400px;
		padding: 5px 0;
		margin: 0 auto;
		
  }
	#sec02 .flex2 .itemWrap .item2 .itemBox {
    width: 100%;
}
	#sec01 .flex1 .itemBox .imgBox,
	#sec02 .flex2 .itemWrap .itemBox .imgBox {
		max-width: 300px;
		margin: 0 auto;
	}
	.capbath::after {
		bottom: 51%;
	}
	#sec02 {
		width: 100%;
}
  #sec02 .flex2 .jozu, #sec02 .flex3 .leftBox {
	 width: 100%;
	}
	#sec02 .flex3 .leftBox {
	 width: 94%;
		margin: 0 auto;
	}
	#sec02 .flex3 .leftBox .itemBox .imgBox {
		margin: 0 auto;
	}
	#sec02 .flex3 .leftBox .itemBox dl {
      width: 100%;
 	}
}


