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


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

/* ---------- cate2 ---------- */
.cate2 .topbox{
	gap: 70px;
}
.cate2 .topbox .imgbox{
	width: calc(50% - 45px);
}
.cate2 .topbox .txtbox{
	width: calc(50% - 45px);
	align-items: flex-start;
}
.cate2 .topbox .txtbox .more_wrap{
	gap: 10px;
	align-items: flex-start;
}
.cate2 .topbox .txtbox .imgitem{
	width: 220px;
	margin-top: 40px;
	margin-left: auto;
}
.cate2 .topbox .txtbox .imgitem img{
	border-radius: 200px;
}

.cate2 .middlebox{
	gap: 120px;
}
.cate2 .middlebox .txtbox{
	width: calc(50% - 60px);
}
.cate2 .middlebox .imgbox{
	position: relative;
	width: calc(50% - 60px);
	aspect-ratio: 1 / 1;
}
.cate2 .middlebox .imgbox .item{
	position: absolute;
	width: 230px;
	transform: translate(-50%, -50%);
	z-index: 1;
}
.cate2 .middlebox .imgbox .item img{
	width: 100%;
	height: auto;
	display: block;
}
.cate2 .middlebox .imgbox .item1{
	top: 28%;
	left: 50%;
}

.cate2 .middlebox .imgbox .item2{
	top: 50%;
	left: 28%;
}

.cate2 .middlebox .imgbox .item3{
	top: 50%;
	left: 72%;
}

.cate2 .middlebox .imgbox .item4{
	top: 72%;
	left: 50%;
}
.cate2 .middlebox .imgbox .item .itemtxt{
	position: absolute;
	inset: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	pointer-events: none; 
}

.cate2 .middlebox2{
	gap: 20px;
	align-items: flex-start;
}
.cate2 .middlebox2 .box-item{
	gap: 80px;
	width: 100%;
}
.cate2 .middlebox2 .box-item .imgbox{
	width: calc(30% - 45px);
}
.cate2 .middlebox2 .box-item .txtbox{
	width: calc(70% - 45px);
	text-align: left;
}
.cate2 .middlebox2 .box-item .txtbox .titlebox{
	gap: 15px;
	align-items: center;
	justify-content: flex-start;
}
.cate2 .middlebox2 .box-item .txtbox .titlebox .line{
	position: relative;
	width: 1px;
	height: 22px;
}
.cate2 .middlebox2 .box-item .txtbox .titlebox .line::after{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 22px;
	background-color: #A78834;
}
.cate2 .middlebox2 .box-item .txtbox .titlebox .num{
	font-family: "Libre Caslon Text",  sans-serif;
	font-size: 22px;
	color: #A78834;
}

.cate2 .bottombox{
	gap: 70px;
}
.cate2 .bottombox .txtbox{
	width: calc(50% - 45px);
}
.cate2 .bottombox .imgbox{
	width: calc(50% - 45px);
}
/* ---------- cate3 ---------- */
.cate3{
	position: relative;
}
.cate3 .txtbox{
	position: relative;
	gap: 30px;
	z-index: 3;
}
body.on .cate3::after  {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(41, 48, 65, 0.55);
    mix-blend-mode: multiply;
    z-index: 2;
}
/* ---------- cate4 ---------- */
/* -
.cate4 .box_wrap{
	gap: 60px;
}
.cate4 .box_wrap .box-item{
	position: relative;
	background-color: #fff;
	padding: 20px;
	width: calc(50% - 30px);
	border-radius: 4px;
}
.cate4 .box_wrap .box-item1::after{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 30px;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	right: -30px;
}
.cate4 .box_wrap .box-item1::before{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 11px;
	height: 11px;
	border-radius: 200px;
	top: 50%;
	transform: translateY(-50%);
	right: -35px;
}
.cate4 .box_wrap .box-item2::after{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 30px;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	left: -30px;
}
.cate4 .box_wrap .box-item2::before{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 11px;
	height: 11px;
	border-radius: 200px;
	top: 50%;
	transform: translateY(-50%);
	left: -35px;
}
-- */
.cate4 .box_wrap{
	position: relative;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 0px;
	margin-top: 50px;

	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	/*
	grid-template-columns: 1fr 60px 1fr;
	*/
	row-gap: 40px;
	column-gap: 0;
}

.cate4 .box_wrap::before{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	background: rgba(0,0,0,0.2);
}

.cate4 .box_wrap .box-item{
	width: calc(50% - 30px);
	position: relative;
	background-color: #fff;
	padding: 20px;
	border-radius: 4px;
}
/*
.cate4 .box_wrap .box-item1{
	grid-column: 1 / 2;
}

.cate4 .box_wrap .box-item2{
	grid-column: 3 / 4;
}
*/
.cate4 .box_wrap .box-item1{
}
.cate4 .box_wrap .box-item2{
	margin-top: 80px;
	margin-bottom: -80px;
}

/* 接続線 + ドット（あなたのをそのまま） */
.cate4 .box_wrap .box-item1::after{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 30px;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	right: -30px;
}

.cate4 .box_wrap .box-item1::before{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 11px;
	height: 11px;
	border-radius: 200px;
	top: 50%;
	transform: translateY(-50%);
	right: -35px;
}

.cate4 .box_wrap .box-item2::after{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 30px;
	height: 1px;
	top: 50%;
	transform: translateY(-50%);
	left: -30px;
}

.cate4 .box_wrap .box-item2::before{
	position: absolute;
	content:"";
	background-color: #191919;
	width: 11px;
	height: 11px;
	border-radius: 200px;
	top: 50%;
	transform: translateY(-50%);
	left: -35px;
}

@media screen and (max-width: 576px){
	.cate4 .box_wrap::before{
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 15px;
		transform: translateX(0);
		width: 1px;
		background: rgba(0,0,0,0.2);
	}
	.cate4 .box_wrap .box-item{
		width: calc(100% - 50px);
		position: relative;
		background-color: #fff;
		padding: 20px;
		border-radius: 4px;
		margin-left: auto;
		margin-right: 0;
	}
	.cate4 .box_wrap .box-item1::before{
		left: -40px;
		right: auto;
	}
	.cate4 .box_wrap .box-item2::before{
		left: -40px;
	}
	.cate4 .box_wrap .box-item1::after{
		left: -30px;
		right: auto;
	}
.cate4 .box_wrap .box-item2{
	margin-top: 0px;
	margin-bottom: 0px;
}


}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate2 .topbox{
		flex-direction: column;
	}
	.cate2 .middlebox{
		flex-direction: column-reverse;
	}
	.cate2 .topbox .imgbox,
	.cate2 .middlebox .imgbox{
		width: 60%;
	}
	.cate2 .topbox .txtbox,
	.cate2 .middlebox .txtbox{
		width: 90%;
	}
	.cate2 .topbox .txtbox .imgitem {
		width: 190px;
		margin-top: -20px;
		margin-left: auto;
	}
	.cate2 .middlebox2 .box-item {
		flex-direction: column;
		gap: 30px;
	}
	.cate2 .middlebox2 .box-item .imgbox{
		width: 60%;
	}
	.cate2 .middlebox2 .box-item .txtbox{
		width: 90%;
	}
	.cate2 .topbox {
		gap: 30px;
	}
	.cate2 .middlebox {
		gap: 30px;
	}
	.cate2 .bottombox {
		gap: 30px;
		flex-direction: column-reverse;
	}
	.cate2 .bottombox .txtbox{
		width: 90%;
	}
	.cate2 .bottombox .imgbox{
		width: 80%;
	}
	
	

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate2 .middlebox,
	.cate2 .topbox{
		gap: 50px;
	}
	.cate2 .middlebox .imgbox{
		width: 80%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate2 .topbox .imgbox,
	.cate2 .middlebox .imgbox{
		width: 80%;
	}
	.cate2 .topbox .txtbox,
	.cate2 .middlebox .txtbox{
		width: 100%;
	}
	.cate2 .middlebox {
		gap: 50px;
	}
	.cate2 .middlebox .imgbox .item{
		width: 180px;
	}
	.cate2 .middlebox2 .box-item .imgbox{
		width: 80%;
	}
	.cate2 .middlebox2 .box-item .txtbox{
		width: 100%;
	}
	.cate2 .middlebox2 .box-item {
		gap: 30px;
	}
	.cate2 .bottombox .txtbox{
		width: 100%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate2 .middlebox .imgbox .item {
		width: 140px;
	}
	.cate2 .topbox .txtbox .imgitem {
		width: 120px;
		margin-top: -10px;
	}
	.cate2 .middlebox,
	.cate2 .topbox{
		gap: 30px;
	}
	.cate2 .middlebox .imgbox{
		width: 100%;
	}
    .cate2 .middlebox2 .box-item {
        gap: 30px;
    }
	.cate3 .txtbox{
		gap: 20px;
	}
  .font-20-sp{
		font-size: 19px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}