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

.cate1 .box_wrap{
	flex-direction: column;
	gap: 20px;
	
}
.cate1 .box_wrap .boxitem{
	gap: 40px;
	padding: 40px;
	border: #84A837 1px solid;
	border-radius: 10px;
	 width: 100%;
}
.cate1 .box_wrap .boxitem .imgbox{
	width: calc(50% - 20px);
}
.cate1 .box_wrap .boxitem .txtbox{
	width: calc(50% - 20px);
	flex-direction: column;
	gap: 30px;
	align-items: flex-start;
}
.cate1 .box_wrap .boxitem .txtbox h3{
	padding-bottom: 20px;
	border-bottom: #BFBFBF 1px solid;
	width: 100%;
}
.cate1 .box_wrap .boxitem .txtbox .price span{
	font-size: 22px;
}
.cate1 .box_wrap .boxitem .imgbox img{
	border-radius: 10px;
}

/* ---------- cate2 ---------- */
.cate2 .box_wrap{
	flex-direction: column;
	gap: 40px;
	width: 100%;
}
.cate2 .box_wrap .title{
	flex-direction: column;
	gap: 5px;
	width: 100%;
	align-items: flex-start;
}
.cate2 .box_wrap .menu_box{
	flex-direction: column;
	gap: 20px;
	width: 100%;
}
.cate2 .box_wrap .menu_box .boxitem{
	width: 100%;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 30px;
	border-bottom: #BFBFBF 1px dotted;
	align-items: flex-start;
}
.cate2 .box_wrap .menu_box .boxitem .topbox{
	width: 100%;
	justify-content: space-between;
}
.cate2 .box_wrap .menu_box .boxitem > p{
    color: #9A9A9A;
}
.cate2 .box_wrap .menu_box .boxitem .topbox p span{
	font-size: clamp(16px,2.0vw,22px);
	padding-right: 5px;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	
	.cate1 .box_wrap .boxitem {
		flex-direction: column;
		padding: 40px 20px;
	}
	.cate1 .box_wrap .boxitem .imgbox {
		width: 60%;
	}
	.cate1 .box_wrap .boxitem .txtbox {
		width: 80%;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap .boxitem .imgbox {
		width: 80%;
	}
	.cate1 .box_wrap .boxitem .txtbox {
		width: 100%;
	}
	.cate1 .box_wrap .boxitem {
		gap: 20px;
	}
	.cate1 .box_wrap .boxitem .txtbox {
		gap: 20px;
	}
}

/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.cate1 .box_wrap .boxitem .imgbox img {
		border-radius: 5px;
	}
	.more_bt{
		margin: 0 auto;
	}
}

/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}