@charset "utf-8";
/* CSS Document */
.cate_wrap{
	overflow: hidden;
}
.cate1 .swiper_a{
	overflow: inherit;
}
.cate1 .top_contents{
	align-items: flex-start;
	gap: 50px;
}
.cate1 .top_contents .titlebox{
	position: relative;
	width: 30%;
	max-width: 350px;
	padding: 20px;
	color: #fff;
}
.cate1 .top_contents .titlebox::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background-color: #F25122;
	clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
	z-index: 1;
}
.cate1 .top_contents .titlebox .title{
	position: relative;
	z-index: 2;
}
.cate1 .top_contents .txtbox{
	max-width: calc(70% - 50px);
}

.cate2{
	background-color: #F8F8F8;
}
.cate2 .boxwrap{
	gap: 60px;
}
.cate2 .boxwrap .box{
	background-color: #fff;
	border-top: 4px solid #414141;
	padding: 5%;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
}
.cate2 .boxwrap .box .num{
	max-width: 20%;
	flex-direction: column;
}
.cate2 .boxwrap .box .num p{
	text-align: center;
	color: #F35122;
}
.cate2 .boxwrap .box .num .en_title{
	font-size: clamp(30px,5vw,50px);
}
.cate2 .boxwrap .box .txtbox{
	width: 80%;
}
.cate2 .boxwrap .box .txtbox h3{
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #C4C4C4;
}

.cate3{
	background-color: #F5F3F0;
}
.cate3 > .flex{
	gap: 60px;
}
.cate3 > .flex > div{
	width: calc(50% - 60px / 2);
}
.cate3 > .flex .boxwrap{
	flex-direction: column;
	gap: 50px;
}
.cate3 > .flex .boxwrap .box{
	width: 100%;
	gap: 30px;
}
.cate3 > .flex .boxwrap .box > div{
	width: calc(50% - 30px / 2);
}
.cate3 > .flex .boxwrap .box .more_d a{
	min-width: 100px;
}
.cate3 > .flex .boxwrap .box .more_d a p{
	font-size: 14px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.cate1 .top_contents{
		gap: 30px;
	}
	.cate1 .top_contents .titlebox{
		width: 35%;
		max-width: 300px;
		padding: 10px;
	}
	.cate1 .top_contents .titlebox::after{
		width: 100%;
		height: 140px;
	}
	.cate1 .top_contents .txtbox{
		max-width: calc(65% - 30px);
	}
	.cate3 > .flex{
		gap: 80px;
	}
	.cate3 > .flex .topbox{
		width: 60%;
	}
	.cate3 > .flex .boxwrap{
		width: 100%;
		flex-direction: row;
		gap: 50px;
	}
	.cate3 > .flex .boxwrap .box{
		width: calc(50% - 50px / 2);
		gap: 20px;
	}
	.cate3 > .flex .boxwrap .box > div{
		width: calc(50% - 20px / 2);
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate3 > .flex .boxwrap .box{
		width: 60%;
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .top_contents{
		gap: 30px;
		justify-content: flex-start;
	}
	.cate1 .top_contents .titlebox{
		width: 60%;
		max-width: 300px;
		padding: 5px 10px;
	}
	.cate1 .top_contents .titlebox::after{
		width: 100%;
		height: 90px;
	}
	.cate1 .top_contents .txtbox{
		max-width: 100%;
	}
	.cate2 .boxwrap{
		gap: 50px;
	}
	.cate2 .boxwrap .box{border-top-width: 2px;padding: 20px;}
	.cate2 .boxwrap .box .num{
		max-width: 100%;
		width: 100%;
		margin-bottom: 10px;
	}
	.cate2 .boxwrap .box .txtbox{
		width: 100%;
	}
	.cate2 .boxwrap .box .txtbox h3{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}
	.cate3 > .flex{
		gap: 60px;
	}
	.cate3 > .flex .topbox{
		width: 100%;
	}
	.cate3 > .flex .boxwrap{
		width: 100%;
		flex-direction: row;
		gap: 50px;
	}
	.cate3 > .flex .boxwrap .box{
		width: 100%;
		gap: 20px;
	}
	.cate3 > .flex .boxwrap .box > div{
		width: 80%;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}