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

/* ---------- cate1 ---------- */
.cate1{
	padding-left: 0;
}
.cate1 .box_wrap{
	gap: 100px;
}
.cate1 .box_wrap .imgbox{
	position: relative;
	width: calc(50% - 50px);
}
.cate1 .box_wrap .imgbox img{
	border-radius: 0 50px 50px 0;
}
.cate1 .box_wrap .txtbox{
	position: relative;
	width: calc(50% - 50px);
	flex-direction: column;
	gap: 50px;
	align-items: flex-start;
}
.cate1 .box_wrap .txtbox .titlebox{
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}
.cate1 .box_wrap .imgbox::after {
	content: "";
	position: absolute;
	right: -35px;
	bottom: -25px;
	width: clamp(60px, 7vw, 160px);
	height: clamp(60px, 7vw, 160px);
	background: url(https://peacebodycare.com/system_panel/uploads/images/top_deco2.png) no-repeat center center / contain;
	z-index: 2;
	pointer-events: none;
}
.cate1 .box_wrap .txtbox::after {
	content: "";
	position: absolute;
	right: 40px;
	top: -20px;
	width: clamp(60px, 8vw, 160px);
	height: clamp(60px, 8vw, 160px);
	background: url(https://peacebodycare.com/system_panel/uploads/images/top_deco1.png) no-repeat center center / contain;
	z-index: -1;
	pointer-events: none;
}
/* ---------- cate2 ---------- */
.cate2{
	position: relative;
	flex-direction: column;
	gap: 40px;
}
.cate2 .box_wrap{
	background-color: #fff;
	padding: 60px;
	border-radius: 40px;
	gap: 40px;
	flex-direction: column;
	z-index: 2;
}
.cate2 .box_wrap .boxitem{
	gap: 40px;
	width: 100%;
}
.cate2 .box_wrap .boxitem .imgbox{
	width: calc(40% - 20px);
}
.cate2 .box_wrap .boxitem .imgbox img{
	border-radius: 20px;
	width: 100%;
}
.cate2 .box_wrap .boxitem .txtbox{
	width: calc(60% - 20px);
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}
.cate2 .box_wrap .boxitem .txtbox h3{
	padding-bottom: 13px;
	border-bottom: #D0D0D0 solid 1px;
	width: 100%;
}
.cate2::before{
    content: "";
    position: absolute;
    left: 10%;
    top: 210px;
    width: clamp(90px, 13vw, 320px);
    height: clamp(90px, 13vw,320px);
    background: url(https://peacebodycare.com/system_panel/uploads/images/about_deco1.png) no-repeat center / contain;
    z-index: 0;
    pointer-events: none;
}
.cate2::after{
    content: "";
    position: absolute;
    right: 10%;
    bottom: -30px;
    width: clamp(90px, 13vw, 180px);
    height: clamp(90px, 13vw, 180px);
    background: url(https://peacebodycare.com/system_panel/uploads/images/about_deco2.png) no-repeat center / contain;
    z-index: 0;
    pointer-events: none;
}


/* ---------- cate4 ---------- */
.cate4 .box_wrap{
	gap: 60px 40px;
	align-items: flex-start;
}
.cate4 .box_wrap .boxitem{
	gap: 15px;
	flex-direction: column;
	width: calc((100% - 80px)/3);
}
.cate4 .box_wrap .boxitem .imgbox img{
	border-radius: 20px;
}
/* ---------- cate5 ---------- */


/* ---------- 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 {
		gap: 50px;
		flex-direction: column;
	}
	.cate1 .box_wrap .imgbox {
		width: 60%;
	}
	.cate1 .box_wrap .txtbox {
		width: 60%;
	}
	.cate1 .box_wrap .imgbox img{
		border-radius: 30px;
	}
	.cate1 {
		padding-left: 60px;
	}
	.cate2 .box_wrap .boxitem{
		flex-direction: column;
		width: 100%;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: 60%;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: 80%;
	}
	.cate4 .box_wrap .boxitem{
		gap: 15px;
		flex-direction: column;
		width: calc((100% - 40px)/2);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	
	.cate1 .box_wrap .imgbox {
		width: 80%;
	}
	.cate1 .box_wrap .txtbox {
		width: 80%;
		gap: 30px;
	}
	.cate1 .box_wrap .txtbox .titlebox {
		gap: 20px;
	}
	.cate1 {
		padding-left: 50px;
	}
  	.cate2 .box_wrap .boxitem .imgbox{
		width: 70%;
	}
	.cate2 .box_wrap .boxitem .txtbox{
		width: 100%;
	}  
	.cate2 .box_wrap .boxitem .imgbox img {
		border-radius: 10px;
	}
	.cate2 .box_wrap {
		padding: 40px 30px;
		border-radius: 20px;
	}
	.cate2 .box_wrap .boxitem {
		gap: 20px;
	}
	.cate2 .box_wrap .boxitem .txtbox {
		gap: 10px;
	}
	.cate4 .box_wrap .boxitem .imgbox img {
		border-radius: 10px;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	
	.cate1 .box_wrap .imgbox {
		width: 80%;
	}
	.cate1 .box_wrap .txtbox {
		width: 100%;
	}
	.cate1 {
		padding-left: 20px;
	}
    .cate1 .box_wrap .imgbox img {
        border-radius: 10px;
	}
	.cate2 .box_wrap .boxitem .imgbox{
		width: 80%;
	}
	.cate2 .box_wrap {
		padding: 30px 20px;
		border-radius: 10px;
	}
	.cate4 .box_wrap .boxitem{
		width: 80%;
	}
	.cate4 .box_wrap {
		gap: 30px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}