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


.cate1{
	position: relative;
	background: #F35122;
	background: linear-gradient(0deg, rgba(243, 81, 34, 1) 1%, rgba(239, 163, 2, 1) 66%, rgba(239, 165, 1, 1) 100%);
	overflow: hidden;
}

.cate1 .en_title{
	color: rgba(255, 255, 255, 0.2);
	white-space: nowrap;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.cate1 .top_boxwrap1 p,.cate1 .top_boxwrap1 h2,.cate1 .top_boxwrap1 h3{
	color: #fff;
}

.top_boxwrap1 .box{
	width: calc(100% / 5);
	padding: 0 20px;
	gap: 15px;
	flex-direction: column;
	justify-content: flex-start;
	border-right: 2px dotted #FFFFFF;
}
.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0.2s;}
.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0.3s;}
.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0.4s;}
.top_boxwrap1 .box:last-of-type{
	border-right: none;
}
.top_boxwrap1 .box .imgbox,.top_boxwrap1 .box h3,.top_boxwrap1 .box p{
	transition: ease 0.3s;
}
.top_boxwrap1 .box:hover .imgbox,.top_boxwrap1 .box:hover h3,.top_boxwrap1 .box:hover p{
	opacity: 0.5;
}
.top_boxwrap1 .box .price{
	gap: 5px;
}
.top_boxwrap1 .box .price p{
	line-height: 1;
}

.cate2 .boxwrap{
	gap: 80px;
}
.cate2 .boxwrap .box{
	width: 100%;
	gap: 50px;
}
.cate2 .boxwrap .box:nth-of-type(even){
	flex-direction: row-reverse;
}
.cate2 .boxwrap .box .imgbox{
	width: calc(30% - 50px /2);
}
.cate2 .boxwrap .box .txtbox{
	width: calc(70% - 50px /2);
}
.cate2 .boxwrap .box .txtbox .num{
	justify-content: flex-start;
	margin-bottom: 10px;
	gap: 10px;
}
.cate2 .boxwrap .box .num .en_title{
	font-size: clamp(30px,4vw,38px);
}

.cate2 .boxwrap .box .txtbox .num p{
	color: #F35122;
}

.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){
	.cate2 .boxwrap .box{
		gap: 40px;
	}
	.cate2 .boxwrap .box:nth-of-type(even){
		flex-direction: row-reverse;
	}
	.cate2 .boxwrap .box .imgbox{
		width: calc(30% - 40px /2);
	}
	.cate2 .boxwrap .box .txtbox{
		width: calc(70% - 40px /2);
	}
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.top_boxwrap1{
		gap: 50px 0;
	}
	.top_boxwrap1 .box{
		width: calc(100% / 3);
		padding: 0 20px;
		gap: 15px;
	}
	.top_boxwrap1 .box:nth-of-type(3){border-right: none;}
	.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0.2s;}
	.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0s;}
	.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0.1s;}
	.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){
	.top_boxwrap1 .box{
		width: calc(100% / 2);
		padding: 0 15px;
		gap: 15px;
	}
	.top_boxwrap1 .box:nth-of-type(3){border-right: 2px dotted #FFFFFF;}
	.section03 .top_boxwrap1 .box:nth-of-type(3){border-right: 2px dotted #B2B2B2;}
	.top_boxwrap1 .box:nth-of-type(odd){padding-left: 0;}
	.top_boxwrap1 .box:nth-of-type(even){border-right: none;padding-right: 0;}
	.top_boxwrap1 .box:nth-of-type(2){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(3){animation-delay: 0s;}
	.top_boxwrap1 .box:nth-of-type(4){animation-delay: 0.1s;}
	.top_boxwrap1 .box:nth-of-type(5){animation-delay: 0s;padding: 0 7.5px;}
	
	
	.cate2 .boxwrap .box .txtbox h3{
		padding-bottom: 10px;
		margin-bottom: 10px;
	}

	.cate2 .boxwrap{
		gap: 50px;
	}
	.cate2 .boxwrap .box{
		width: 100%;
		gap: 0px;
		display: block;
	}
	.cate2 .boxwrap .box:nth-of-type(even){
		flex-direction: row-reverse;
	}
	.cate2 .boxwrap .box .imgbox{
		width: 100%;
		margin-bottom: 20px;
	}
	.cate2 .boxwrap .box .txtbox{
		width: 100%;
	}
	.cate2 .boxwrap .box .txtbox .num{
		justify-content: flex-start;
		margin-bottom: 0px;
	}
	.cate2 .boxwrap .box .txtbox .num p{
		color: #F35122;
	}

	
	.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){
}