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

/* ---------- cate1 ---------- */

.cate1 .box_wrap{
	gap: 50px;
	padding-bottom: 150px;
}
.cate1 .box_wrap .leftbox{
	width: calc(30% - 100px);
}
.cate1 .box_wrap .rightbox{
	position: relative;
	height: clamp(300px, 30vw, 800px);
	width: calc(35% - 100px);
	overflow: visible;
}
.cate1 .box_wrap .rightbox .img1{
	position: absolute;
	right: 0;
	top: 20%;
	width: 60%;
	
}
.cate1 .box_wrap .rightbox .img2{
	position: absolute;
	bottom:  -40%;
	left: 0;
	width: 40%;
	
}
.cate1 .box_wrap .centerbox{
	flex: 1;
	gap: 
}
.cate1 .box_wrap .centerbox .titlebox{
	gap: 20px;
}
.cate1 .box_wrap .centerbox .titlebox img{
	width: 46px;
}
/* ---------- cate2 ---------- */
.cate2 .box_wrap{
	gap: 40px;
}
.cate2 .box_wrap .boxitem{
	gap: 50px;
	width: 100%;
	align-items: flex-start;
}
.cate2 .box_wrap .boxitem .imgbox{
	width: calc(40% - 25px);
}
.cate2 .box_wrap .boxitem .txtbox{
	width: calc(60% - 25px);
}
.cate2 .box_wrap .boxitem .txtbox .txtitem{
	padding: 30px;
}
.cate2 .box_wrap .boxitem .txtbox .txtitem .address{
	margin-top: 20px;
	justify-content: flex-start;
	gap: 10px;
}
.cate2 .box_wrap .boxitem .txtbox h3{
	position: relative;
	padding-left: 20px;
}
.cate2 .box_wrap .boxitem .txtbox h3::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background-color: #7B882C;
    transform: translateY(-50%);
}
/* ---------- cate3 ---------- */

/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
  
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .box_wrap {
		flex-direction: column-reverse;
	}
	.cate1 .box_wrap .leftbox{
		display: none;
	}
	.cate1 .box_wrap .leftbox img{
		width: 100%;
		
	}
	.cate1 .box_wrap .rightbox{
		position: relative;
		height: clamp(150px, 30vw, 800px);
		width: 100%;
		overflow: visible;
		margin-right: auto;
	}
	.cate1 .box_wrap .rightbox .img1{
		position: absolute;
		left: 30%;
		top: -0%;
		width: 20%;
	}
	.cate1 .box_wrap .rightbox .img2{
		bottom:  -40%;
		left: 5%;
		width: 15%;
	}
	.cate1 .box_wrap .rightbox .img3{
		position: absolute;
		right: 3%;
		bottom:  -10%;
		width: 30%;
	}
	.cate1 .box_wrap {
		gap: 50px;
		padding-bottom: 100px;
	}
	.cate2 .box_wrap .boxitem {
		flex-direction: column;
		align-items: center;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: 50%;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: 80%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){

}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cate1 .box_wrap .rightbox .img1{
		top: -0%;
		left:20%;
		width: 28%;
	}
	.cate1 .box_wrap .rightbox .img2{
		left: 0%;
		width: 25%;
	}
	.cate1 .box_wrap .rightbox .img3{
		right: 0%;
		bottom:  -10%;
		width: 35%;
	}
	.cate1 .box_wrap .centerbox > p br {
		display: none;
	}
	.cate1 .box_wrap .centerbox .titlebox img {
		width: 36px;
	}
	.cate1 .box_wrap {
		padding-bottom: 80px;
	}
	.cate2 .box_wrap .boxitem {
		gap: 30px;
	}
	.cate2 .box_wrap .boxitem .txtbox .txtitem {
		padding: 20px;
	}
	.cate2 .box_wrap .boxitem .txtbox .txtitem .address {
		margin-top: 10px;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: 80%;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: 100%;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}