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

.main-wrap {
    overflow: hidden;
}

/* ---------- cate1 ---------- */
.cate1 .box_wrap{
	width: 90%;
	gap: 100px;
	margin-left: auto;
}
.cate1 .box_wrap .txtbox{
	width: calc(50% - 50px);
}
.cate1 .box_wrap .imgbox{
	position: relative;
	width: calc(50% - 50px);
}
.cate1 .box_wrap .imgbox .img1{
	position: relative;
	width: clamp(260px, 32vw, 350px);
	z-index: 2;
}
.cate1 .box_wrap .imgbox .img2{
	width: clamp(180px, 22vw, 260px);
	position: absolute;
	top: -50px;
	right: -10px;
	z-index: 1;
	opacity: 0.6;
}
/* --
.cate1 .box_wrap .txtbox .titlebox{
	position: relative;
}
.cate1 .box_wrap .txtbox .titlebox::after {
    content: "";
    position: absolute;
    top: -50px;
    left: 50px;
    width: clamp(260px, 40vw, 600px);
    aspect-ratio: 4 / 1;
    background-image: url("https://bamboograss-group.com/system_panel/uploads/images/txt-philosophy.svg");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
- */
.deco-rotate--about0 {
  display: none;
}
/* ---------- cate2 ---------- */
.cate2 .box_wrap{
	gap: 100px;
}
.cate2 .box_wrap .txtbox{
	width: calc(70% - 50px);
}
.cate2 .box_wrap .imgbox{
	width: calc(30% - 50px);
}
.cate2 .box_wrap .txtbox .titlebox{
	position: relative;
}
.cate2 .box_wrap .txtbox .titlebox::after {
    content: "";
    position: absolute;
    top: -50px;
    left: 50px;
    width: clamp(260px, 40vw, 600px);
    aspect-ratio: 4 / 1;
    background-image: url("https://bamboograss-group.com/system_panel/uploads/images/txt-topmessage.svg");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.cate2 .namelabel{
	justify-content: flex-end;
}
/* ---------- cate3 ---------- */
.cate3 .box_wrap{
	gap: 80px;
}
.cate3 .box_wrap .txtbox{
	width: calc(60% - 40px);
}
.cate3 .box_wrap .imgbox{
	position: relative;
	width: calc(40% - 40px);
	aspect-ratio: 1 / 1;
}
.cate3 .box_wrap .imgbox .item{
	position: absolute;
	width: 230px;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.cate3 .box_wrap .imgbox .item1{
	top: 5%; 
	left: 50%;
}
.cate3 .box_wrap .imgbox .item2{
	top: 72.5%; 
	left: 11%;  
}
.cate3 .box_wrap .imgbox .item3{
	top: 72.5%;
	left: 89%; 
}
.cate3 .box_wrap .imgbox::before{
	content: "";
	position: absolute;
	inset: 5%; 
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid #fff;
	background: transparent;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
	z-index: 0;
}
.cate3 .box_wrap .imgbox .item .itemtxt{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none; 
}
.cate3 .box_wrap .imgbox .item1{
	top: 5%; 
	left: 50%;
}
.cate3 .box_wrap .imgbox .item2{
	top: 72.5%; 
	left: 11%; 
}
.cate3 .box_wrap .imgbox .item3{
	top: 72.5%;
	left: 89%; 
}
/* ---------- cate4 ---------- */
.cate4{
	position: relative;
}
.cate4 > .width-1280-max{
	position: relative;
	z-index: 1;
}
.cate4 .box_wrap{
	flex-direction: column;
	gap: 20px;
}
.cate4 .box_wrap .boxitem{
	position: relative;
	width: 80%;
	margin-left: auto;
	padding: 80px 50px;
	border-radius: 10px;
	overflow: hidden;
}
.cate4 .box_wrap .boxitem::after{
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.5); 
	border-radius: inherit;
	z-index: 0;
}
.cate4 .box_wrap .boxitem .txtbox{
	position: relative;
	z-index: 1;
}
.cate4 .box_wrap .boxitem .txtbox .titlebox{
	gap:10px;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
}
.cate4 .box_wrap .boxitem .txtbox .titlebox p{
	width: 40px;
	line-height: 1;
}
.cate4 .box_wrap .boxitem .txtbox .titlebox h3{
	flex: 1;
	line-height: 1;
}
.deco-rotate--about1 {
  top: -20px;
  right: -60px;
  width: 300px;
}
}
/* ---------- cate5 ---------- */
.cate5{
	position: relative;
	overflow: hidden; 
}
.deco-rotate--about2 {
  bottom: 50px;
  left: -180px;
  width: 500px;
}
/* ---------- cate6 ---------- */



/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate1 .box_wrap {
		width: 100%;
		gap: 80px;
	}
	.cate1 .box_wrap .imgbox .img1{
		width: clamp(260px, 22vw, 350px);
	}
	.cate1 .box_wrap .imgbox .img2{
		width: clamp(180px, 18vw, 260px);
	}
	.cate1 .box_wrap .txtbox{
		width: calc(50% - 40px);
	}
	.cate1 .box_wrap .imgbox{
		position: relative;
		width: calc(50% - 40px);
	}
	/* -
	.cate1 .box_wrap .txtbox .titlebox::after {
		top: -10px;
		left: 30px;
	} */
	.cate2 .box_wrap .txtbox .titlebox::after {
		top: -10px;
		left: 30px;
	}
	.cate2 .box_wrap {
		gap: 50px;
	}
	.cate2 .box_wrap .txtbox{
		width: calc(60% - 50px);
	}
	.cate2 .box_wrap .imgbox{
		width: calc(40% - 50px);
	}
	.cate3 .br-hide br{
		display: none;
	}
	.deco-rotate--about1 {
	  top: -20px;
	  right: -60px;
	  width: 250px;
	}
	.deco-rotate--about2 {
	  bottom: 50px;
	  left: -180px;
	  width: 300px;
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1{
		position: relative;
		overflow: hidden; 
	}
    .cate1 .box_wrap {
		position: relative;
        flex-direction: column-reverse;
		gap: 40px; 
    }
    .cate1 .box_wrap .imgbox {
        width: 100%;
		aspect-ratio: 3 / 2;
        display: flex;             
        justify-content: center;  
        align-items: center;
        padding-right: 30px; 
        position: relative;
    }
	.cate1 .box_wrap .imgbox .img1{
		position: relative;
        width: 300px;
        z-index: 2;
    }
	.cate1 .box_wrap .imgbox .img2{
        position: absolute;
		top: -20px;
		right: 0px;
        width: 250px;
        z-index: 1;           
    }
    .cate1 .box_wrap .txtbox {
        width: 100%;
    }
	.deco-rotate--about0 {
	    display: block;
		bottom: 0px;
	    left: -200px;
	    width: 600px;
		opacity: 0.2;
	}
    .cate2 .box_wrap {
        flex-direction: column;
    }
    .cate2 .box_wrap .imgbox {
        width: 50%;
    }
    .cate2 .box_wrap .txtbox {
        width: 100%;
    }
	.cate3 .box_wrap {
		flex-direction: column-reverse;
	}
	.cate3 .box_wrap .txtbox{
		width: 100%;
	}
	.cate3 .box_wrap .imgbox{
		width: 50%;
	}
	.cate4 .box_wrap .boxitem {
		width: 100%;
		padding: 60px 50px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap .imgbox .img1{
        margin-right: -50px;
		padding-top: 30px;
    }
	.cate3 .box_wrap .imgbox .item{
		width: 180px;
	}
	.cate3 .box_wrap .imgbox{
		width: 60%;
	}
    .cate4 .box_wrap .boxitem {
        padding: 40px 30px;
    }
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){

	.cate1 .box_wrap .imgbox .img1{
        width: 150px;
        z-index: 2;
        margin-right: -20px;
		padding-top: 50px;
    }
	.cate1 .box_wrap .imgbox .img2{
        width: 100px;
    }
    .cate1 .box_wrap .imgbox {
        width: 100%;
        padding-right: 0px;
    }
    .cate2 .box_wrap .imgbox {
        width: 70%;
    }
	.cate3 .box_wrap .imgbox .item{
		width: 150px;
	}
	.cate3 .box_wrap .imgbox{
		width: 70%;
	}
	.cate3 .box_wrap {
		gap: 50px;
	}
	.cate4 .box_wrap .boxitem .txtbox .titlebox p{
		width: 30px;
		line-height: 1.5;
	}
	.cate4 .box_wrap .boxitem .txtbox .titlebox h3{
		line-height: 1.5;
	}
	.deco-rotate--about1 {
	  top: -20px;
	  right: -60px;
	  width: 200px;
	}
	.deco-rotate--about2 {
	  display: none;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}