@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
/* CSS Document */

.bg_img::before {
	background-image: url("https://ecosunfarm.jp/system_panel/uploads/images/pagetitle3.jpg");
}
.pagetitle .titlebox {
	background-color: #95CA66;
}
/* ---------- main ---------- */
.cate1 .box_wrap {
	gap: 100px;
}
.cate1 .box_wrap .txtbox{
	width: 40%;
}

.cate1 .box_wrap .imgbox{
	position: relative;
	width: 40%;
}
.cate1 .box_wrap .imgbox .character{
	position: absolute;
	bottom: -15%;
	right: -10%;
	z-index: 2;
	width: 25%;
}


.cate2 .box_wrap{
	gap: 15px;
	align-items: stretch;
}
.cate2 .boxitem{
	width: 30%;
	flex-direction: column;
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 40px;
}
.cate2 .boxitem .iconbox{
	width: 20%;
}
.cate3 .box_wrap{
	background-color: #fff;
	border-radius: 20px; 
	padding: 80px;
	flex-direction: row-reverse;
	align-items: flex-start;
}

.cate3 .box_wrap .title_wrap{
	width: 20%;
	height: auto;
	justify-content: flex-start;
	align-items: flex-start;
	letter-spacing: 4px;
	padding-left: 50px;
	flex-direction: row-reverse;
	gap: 20px;
}
.cate3 .box_wrap .boxitem_wrap{
	width: 80%;
}
.cate3 .box_wrap .boxitem{
	width: 30%;
}
.title_wrap .titlelabel{
	flex-direction: column;
	background-color: #95C966;
	border-radius: 0 50px 50px 50px;
	padding: 20px 10px;
	color: #fff;
	gap: 10px;
}
.title_wrap .titlelabel img{
	width: 60%;
}
.cate3 .box_wrap .boxitem .price-tag{
	width: fit-content;
	background-color: #F7F6F4;
	padding: 5px 20px;
	margin: 0 auto;
}
.cate3 .box_wrap .linebox{
	display: flex;
	padding-bottom: 60px;
	margin-bottom: 40px;
	border-bottom: 3px dotted #E3E3E3;
	gap: 20px;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
} 
.cate4{
	position: relative;
}
.cate4 .box_wrap{
	background-color: #fff;
	border-radius: 20px; 
	padding: 50px;
	align-items: flex-start;
	gap: 50px;
	
}
.cate4 .boxitem{
	gap: 30px;
}
.cate4 .titlebox{
	background-color: #1AAB79;
	position: absolute;
	top: -30px;
	padding: 10px 70px;
	border-radius: 10px; 
}
.cate4 .box_wrap .imgbox{
	width: 20%;
}
.cate4 .box_wrap .txtbox{
	width: 70%;
}
.cate5{
	position: relative;
	background: #EACF00;
}
.cate5 .title_wrap{
	position: relative;
}
.cate5 .titlebox{
	flex-direction: column;
	position: relative;
	z-index: 2;
}

.cate5 .title_wrap h2::before,
.cate5 .title_wrap h2::after{
	content: "";
	position: absolute;
	top: 50%;
	width: 60px;
	height: 8px;
	background-image: radial-gradient(#333 40%, transparent 41%);
	background-size: 8px 8px;
	background-repeat: repeat-x;
	transform: rotate(55deg);
}
.cate5 .title_wrap h2::before{
	left: -30%;
}
.cate5 .title_wrap h2::after{
	right: -30%;
	transform: rotate(-55deg);
}

.cate5 .box_wrap{
	width: 100%;
	gap: 80px;
}
.cate5 .box_wrap .boxitem{
	position: relative;
	width: 90%;
	background-color: #fff;
	padding: 20px 30px;
	border-radius: 10px;
}
.cate5 .box_wrap .boxitem:not(:last-of-type)::after{
	content: "";
	position: absolute;
	bottom: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 25px solid #fff;
}
.cate5 .box_wrap .step-label{
	width: 80px;
	height: 80px;
	position: absolute;
	background-color: #1AAB79;
	border-radius: 50%;
	flex-direction: column;
	top: -30px;
}
.cate5 .box_wrap .step-label p{
	font-family: "Josefin Sans",  sans-serif;
	font-weight: 700;
	line-height: 1;
	transform: translateY(3px);
}
.cate5 .box_wrap .txtbox{
	width: 70%;
}
.cate5 .box_wrap .iconbox{
	width: 15%;
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.cate3 .box_wrap .title_wrap{
		width: 20%;
		padding-left: 30px;
	}
	.cate3 .box_wrap .linebox{
		align-items: flex-start;
		gap: 50px;
		padding-bottom: 50px;
	}
	.cate3 .box_wrap .linebox .boxitem{
		width: calc(50% - 50px / 2);
	}
  .cate3 .box_wrap .linebox .boxitem .txtbox{padding-bottom: 0;}


	 .cate3 .box_wrap .linebox{
       justify-content: flex-start;
       flex-direction: row;
	} 
	.cate3 .box_wrap .linebox .boxitem .price-tag{
		margin-bottom: 20px;
	}
	.cate3 .box_wrap .boxitem_wrap{
		width: 80%;
	}

	.cate5 .box_wrap .step-label{
		width: 60px;
		height: 60px;
	}
	.cate5 .box_wrap .step-label .font-30{
		font-size: 20px;
	}
}

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

	.cate2 .title_wrap .characterbox{
		top: 0%;
		width: 75%;
	}
	.cate3 .box_wrap{
		padding: 50px;
	}
	.cate3 .box_wrap .boxitem_wrap{
		width: 70%;
	}
	.cate3 .box_wrap .linebox{
		align-items: flex-start;
		gap: 30px;
		padding-bottom: 30px;
	}
	.cate3 .box_wrap .linebox .boxitem{
		width: calc(50% - 30px / 2);
	}
  .cate3 .box_wrap .title_wrap{
		width: 25%;
	}

	.cate4 .boxitem .imgbox{
		width: 30%;
	}
	.cate4 .boxitem .txtbox{
		width: 60%;
	}

	.cate5 .box_wrap .boxitem{
		padding: 30px 30px;
	}
	.cate5 .box_wrap .boxitem .iconbox{
		width: 20%;
	}
	.title_wrap .titlelabel{
    padding: 20px 0px;
	}
}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.cate1 .box_wrap{
		flex-direction: column-reverse;
		gap: 50px;
	}
	.cate1 .box_wrap .imgbox .character {
		bottom: -10%;
		right: -5%;
		width: 20%;
	}
	.cate1 .box_wrap2{
		flex-direction: column;
	}
	.cate1 .box_wrap .imgbox{
		width: 80%;
	}
	.cate1 .box_wrap .txtbox{
		width: 80%;
	}
	.cate2 .box_wrap{
		flex-direction: column;
	}
	.cate2 .title_wrap .characterbox{
		top: 0%;
		width: 85%;
	}
	.cate2 .box_wrap .boxitem{
		width: 100%;
	}
	.cate2 .box_wrap .boxitem .iconbox{
		width: 8%;
	}

	.cate3 .box_wrap {
		padding: 40px;
	}
	.cate3 .title_wrap .titlelabel img{
		width: 50%;
	}
	.cate3 .box_wrap .title_wrap {
        width: 30%;
		padding-left: 0px;
    }
	.cate4 .boxitem{
		flex-direction: column;
	}
	.cate4 .boxitem .imgbox{
		width: 80%;
	}
	.cate4 .boxitem .txtbox{
		width: 100%;
	}
	
	.cate5 .box_wrap .boxitem .txt_wrap{
		flex-direction: column-reverse;
	}
	.cate5 .box_wrap .txtbox{
		width: 100%;
	}
	.cate5 .box_wrap .boxitem .iconbox {
        width: 40%;
		padding: 0px;
    }
	.cate5 .title_wrap h2::before{
		left: -15%;
	}
	.cate5 .title_wrap h2::after{
		right: -15%;
	}
	
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	
	.cate2 .title_wrap .characterbox{
		bottom: -10%;
		width: 70%;
	}
	.cate2 .title_wrap .characterbox img{
		width: 10%;
	}
	.cate2 .title_wrap h2::before,
	.cate2 .title_wrap h2::after{
		top: 80%;
		width: 60px;

	}
	.cate2 .title_wrap h2::before{
		left: -8%;
	}
	.cate2 .title_wrap h2::after{
		right: -8%;
	}
	.cate2 .box_wrap .boxitem .iconbox{
		width: 15%;
	}
	.cate3 .box_wrap .boxitem_wrap{
		width: 100%;
	}
	.cate3 .box_wrap .title_wrap {
        width: 100%;
		justify-content: center;
		padding-bottom: 50px;
    }
  .cate3 .box_wrap .linebox .boxitem{width: 100%;}
	.cate4 .box_wrap{
		padding: 30px;
	}
	.cate5 .box_wrap .boxitem .txt_wrap{
		flex-direction: column-reverse;
	}
	.cate5 .box_wrap .txtbox{
		width: 100%;
	}
	.cate5 .box_wrap .boxitem .iconbox {
        width: 60%;
		padding: 0px;
    }
	.cate5 .title_wrap h2::before{
		left: -15%;
	}
	.cate5 .title_wrap h2::after{
		right: -15%;
	}
	
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}