@charset "utf-8";
/* CSS Document */
.cate1 .title-style1,
.cate2 .title-style1,
.cate4 .title-style1{
	padding-bottom: 30px;
	border-bottom: #E6E6E6 1px solid;
	width: 100%;
}
.cate1 .box_wrap{
	gap: 80px;
}
.cate1 .box_wrap .box-item{
	gap: 50px;
	align-items: flex-start;
}
.cate1 .box_wrap .box-item .numbox{
	width: 52px;
	flex: 0 0 52px;
	justify-content: center;  
    align-items: flex-start;
	height: 100%;
}
.cate1 .box_wrap .box-item .imgbox{
	flex: 1;
}
.cate1 .box_wrap .box-item .txtbox{
	flex: 3;
}

.cate2 .box_wrap .box-item{
	gap: 80px;
}
.cate2 .box_wrap .box-item .imgbox{
	width: calc(40% - 40px);
}
.cate2 .box_wrap .box-item .txtbox{
	width: calc(60% - 40px);
}
.cate2 .box_wrap .box-item .imgbox .topbox{
	gap: 20px;
	align-items: flex-start;
	align-items: stretch;
}
.cate2 .box_wrap .box-item .imgbox .topbox .namebox{
	width: 40px;
	flex: 0 0 40px;
	
}
.cate2 .box_wrap .box-item .imgbox .topbox img{
	width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    flex: 1 1 0;
    min-width: 0;
}
.cate2 .box_wrap .box-item .imgbox .bottombox{
	width: 100%;
}

.cate3 .cate3-box{
	gap:150px;
	width: 100%;
	align-items: flex-start;
}
.cate3 .cate3-box .title-style1{
	width: 250px;
	flex: 0 0 250px;
}
.cate3 .cate3-box .company_a{
	flex: 1;
}
.cate4 .cate4-box .gridbox{
    display: grid;
    gap: 20px;
}
.cate4 .cate4-box .gridbox .lightbox-link{
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.cate4 .cate4-box .gridbox .lightbox-link img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.cate4 .cate4-box .gridbox .lightbox-link p{
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: 0;
    line-height: 1;
}
.cate4 .cate4-box .gridbox .grid-top{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}
.cate4 .cate4-box .gridbox .grid-top .img1{
    grid-row: 1 / 3;
    height: 400px;
}
.cate4 .cate4-box .gridbox .grid-top .img2,
.cate4 .cate4-box .gridbox .grid-top .img3{
    height: calc((400px - 20px) / 2);
}
.cate4 .cate4-box .gridbox .grid-mid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cate4 .cate4-box .gridbox .grid-mid .lightbox-link{
    height: 400px;
}
.cate4 .cate4-box .gridbox .img6{
    height: 400px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate1 .box_wrap .box-item .numbox{
		width: 48px;
		flex: 0 0 48px;
	}
	.cate1 .box_wrap .box-item .imgbox{
		flex: 2;
	}
	.cate1 .box_wrap .box-item .txtbox{
		flex: 3;
	}
	.cate3 .cate3-box {
		flex-direction: column;
	}
	.cate3 .cate3-box {
		gap: 50px;
	}
	.cate3 .cate3-box .title-style1 {
		width: auto;
        flex: initial;
	}
	.cate4 .cate4-box .gridbox .grid-top .img1,
    .cate4 .cate4-box .gridbox .grid-mid .lightbox-link,
    .cate4 .cate4-box .gridbox .img6{
        height: 350px;
    }

    .cate4 .cate4-box .gridbox .grid-top .img2,
    .cate4 .cate4-box .gridbox .grid-top .img3{
        height: calc((350px - 20px) / 2);
    }
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	
	.cate1 .box_wrap .box-item {
		flex-direction: column;
		    gap: 30px;
	}
	.cate1 .box_wrap .box-item {
		gap: 20px;
		align-items: center;
	}
	.cate1 .box_wrap .box-item .numbox{
		width: 100%;
		height: auto;
		flex: 0 0 26px;
	}
	.cate1 .box_wrap .box-item .imgbox{
		width: 50%;
	}
	.cate1 .box_wrap .box-item .txtbox{
		width: 80%;
	}
	.cate1 .box_wrap{
		gap: 50px;
	}
	
	.cate2 .box_wrap .box-item {
		flex-direction: column-reverse;
	}
	.cate2 .box_wrap .box-item .imgbox{
		width: 50%;
	}
	.cate2 .box_wrap .box-item .txtbox{
		width: 80%;
	}
	.cate2 .box_wrap .box-item {
		gap: 50px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap .box-item .txtbox{
		width: 100%;
	}
 	.cate2 .box_wrap .box-item .imgbox{
		width: 60%;
	}
	.cate2 .box_wrap .box-item .txtbox{
		width: 100%;
	}
	.cate2 .box_wrap .box-item {
		gap: 30px;
	}
    .cate3 .cate3-box {
        gap: 30px;
    }
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .box_wrap .box-item .imgbox{
		width: 80%;
	}

	.cate1 .box_wrap{
		gap: 30px;
	}
	.cate1 .title-style1,
	.cate2 .title-style1,
	.cate4 .title-style1 {
		padding-bottom: 10px;
	}
	 .cate2 .box_wrap .box-item .imgbox{
		width: 80%;
	}
	.cate2 .box_wrap .box-item .imgbox .topbox {
		gap: 5px;
	}
	.cate2 .box_wrap .box-item .imgbox .topbox .namebox {
		width: 20px;
		flex: 0 0 20px;
	}
    .cate2 .box_wrap .box-item .txtbox h3{
        font-size: 19px;
    }
    .cate1 .box_wrap .box-item .txtbox h3{
        font-size: 19px;
    }
    .cate3 .cate3-box {
        gap: 20px;
    }
	.cate4 .cate4-box .gridbox{
        gap: 14px;
    }
    .cate4 .cate4-box .gridbox .grid-top,
    .cate4 .cate4-box .gridbox .grid-mid{
        grid-template-columns: 1fr;
    }
    .cate4 .cate4-box .gridbox .lightbox-link{
        height: 170px !important;
    }
	.cate4 .cate4-box .gridbox .lightbox-link img{
        width: 100%;
        height: 100% !important;   
        object-fit: cover;
        display: block;
    }
    .cate4 .cate4-box .gridbox .grid-top .img1{
        grid-row: auto;
    }
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}