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


/* ---------- cate01 ---------- */
.cate1 .txtbox p{
	letter-spacing: 0.1em;
	line-height: 3;
}
.cate1 .imgbox{
	gap: 30px;
	height: 50vh;
	overflow: hidden;
}
.cate1 .imgbox .img1{
	width: calc(40% - 15px);
	height: 100%;
	object-fit: cover;
}
.cate1 .imgbox .img2{
	width: calc(60% - 15px);
	height: 100%;
	object-fit: cover;
}
/* ---------- cate02 ---------- */
.cate2 .txt_wrap{
	gap: 80px;
}
.cate2 .txt_wrap .imgbox{
	width: calc(40% - 40px);
}
.cate2 .txt_wrap .txtbox{
	width: calc(40% - 40px);
}
.cate2 .more_wrap,
.cate3 .more_wrap{
	justify-content: flex-end;
}
/* ---------- cate03 ---------- */
.cate3 .more{
  margin-top: 40px;
}
.cate3 .process_box{
	gap: 80px;
}
.cate3 .process_box .process_item{
	position: relative;
	padding: 70px;
	width: 80vw;
	background-color: #fff;
	border: #C1C1C1 solid 1px;
}
.cate3 .process_box .process_item .step-label{
	position: absolute;
	top: -5%;
	left: 11%;
	background-color: #1A1A1A;
	width: 160px;
}
.cate3 .process_box .process_item .txt_wrap{
	gap: 80px;
}
.cate3 .process_box .process_item .txt_wrap .iconbox{
	width: calc(25% - 40px);
}
.cate3 .process_box .process_item .txt_wrap .iconbox img{
	width: 50%;
}
.cate3 .process_box .process_item .txt_wrap .txtbox{
	width: calc(75% - 40px);
}
.cate3 .more p{
 margin:0px;
}
/* ---------- cate04 ---------- */


/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	
	
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .imgbox {
		height: 25vh;
	}
	.cate2 .txt_wrap{
		flex-direction: column;
		gap:50px;
	}
	.cate2 .txt_wrap .imgbox{
		width: 60%;
	}
	.cate2 .txt_wrap .txtbox{
		width: 60%;
	}
	.cate2 .more,
	.cate3 .more{
		margin-top: 30px; 
	}

	.cate3 .process_box .process_item {
		padding: 50px 50px;
		width: 80vw;
	}
	.cate3 .process_box .process_item .txt_wrap {
		gap: 50px;
	}
	
	.cate3 .process_box .process_item .txt_wrap .iconbox {
		flex-direction: column;
		width: calc(40% - 25px);
	}
	.cate3 .process_box .process_item .txt_wrap .txtbox{
		width: calc(60% - 25px);
	}
	.cate3 .process_box .process_item .txt_wrap .iconbox img{
		width: 30%;
	}
	.cate3 .process_box .process_item .step-label{
		left: 50%;               
		transform: translateX(-50%); 
		top: -8%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate3 .process_box .process_item .txt_wrap{
		flex-direction: column;
		gap: 30px;
	}
	.cate3 .process_box .process_item{
        padding: 50px 30px;
        width: 60vw;
    }
	.cate3 .process_box .process_item .txt_wrap .iconbox {
		width: 80%;
	}
	.cate3 .process_box .process_item .txt_wrap .txtbox{
		width: 80%;
	}
	.cate3 .process_box .process_item .step-label{
		top: -5%;
	}
	.cate3 .process_box {
		gap: 50px;
	}
	
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .txtbox p {
		letter-spacing: 0.05em;
		line-height: 2;
      font-size:12px;
      text-align:left;
	}
	.cate1 .imgbox {
        flex-direction: column;
    }
	.cate1 .imgbox {
		gap: 15px;
        height: 15vh;
    }
	.cate2 .txt_wrap .imgbox{
		width: 80%;
	}
	.cate2 .txt_wrap .txtbox{
		width: 100%;
	}
	.cate2 .txt_wrap {
        gap: 30px;
    }
	.cate3 .process_box .process_item .txt_wrap .iconbox {
		width: 100%;
	}
	.cate3 .process_box .process_item .txt_wrap .txtbox{
		width: 100%;
	}
	.cate3 .process_box .process_item{
        padding: 40px 20px;
        width: 80vw;
    }
	.cate3 .process_box {
    gap: 30px;
}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}