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

body{
	background-color: #fffcf0;
}

#wrap{
	margin: 0 auto;
	overflow: hidden;
	width: 1920px;
	height: auto;
}
@media screen and (max-width: 767px){
	#wrap{
		width: 90%;
	}
}

h2{
	text-align: center;
	margin-bottom: 50px;
}

span{
  	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 18px;
	color: #073c2f;
	line-height: 1.5;
}

p{
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 18px;
	color: #073c2f;
	line-height: 1.5;
}

#reason,#review,#farmer,#trial{
	padding: 65px 0;
}
/*******************header setting*************************/
header{
	padding: 0 100px;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 150px;
}
@media screen and (max-width: 767px){
	header{
		padding: 0;
	}
}

h1 img{
	margin: 15px 0;	
}

#g_nav{
	margin: 46px 0;
}

.g_nav_item{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	color: #073c2f;
	line-height: 57px;
	height: 57px;
	list-style-type: none;
	margin-right: 100px;
	display: inline-block;
}

.g_nav_item:last-child{
	margin-right: 0;
	text-align: center;
	color: #fff;
	background: #073c2f;
	width: 284px;
}

.g_nav_item:not(.trial_btn) a{
	position: relative;
}

.g_nav_item:not(.trial_btn) a::after{
	content: "";
	position: absolute;
	left: 0;
	top: 38px;
	width: 100%;
	height: 2px;
	background: #073c2f;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/
}

.g_nav_item:not(.trial_btn) a:hover::after{
	transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

#mv{
	margin-bottom: 65px; 
	background: url("../images/mv_img01.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
}
/**********************************************************/
/*******************footer setting*************************/
footer{
	background: #073c2f;
	width: 100%;
}

footer p{
	color:#fff;
}

#footer_inner{
	margin: 0 auto;
	width: 1120px;
}

#footer_menu{
	margin: 0 auto 50px 90px;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	width: 850px;
}

.footer_menu_item a{
	display: flex;
	position: relative;
}

.footer_menu_item a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 30px;
	width: 100%;
	height: 2px;
	background: #fff;
	transform: scale(0, 1);
	transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
	transition: transform 0.3s;   /*変形の時間*/

}

a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}

.triangle{
	margin-top: 7px;
	border-top: 7px solid #fff;
	border-right: 7px solid #fff;
	border-left: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-radius: 2px;
	transform: rotate(45deg);
	width: 0;
	height: 0;
}

#atention{
	margin: 0 auto;
	text-align: center;
	width: 350px;
}

#atention small p:nth-child(1){
	font-size: 14px;
	color: #f00;
}

#atention small p:nth-child(2){
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 14px;
	color: #fff;
}

/**********************************************************/
/***********************top page↓*************************/
/*#about setting*/
#about{
	margin: 0 auto;
	background: url("../images/about_bg.png") no-repeat;
	width: 1392px;
	height: 953px;
	text-align: center;
	position: relative;
}

#about h2{
	padding-top: 65px;
}

#about p{
	/*font-size: 22px;*/
}

#about p:nth-child(2){
	top: 300px;
	left: -50px;
	width: 450px;
	position: absolute;
}

#about p:nth-child(3){
	top: 450px;
	left: 980px;
	width: 468px;
	position: absolute;
}

#about p:nth-child(5){
	font-size: 24px;
	top: 700px;
	left: 608px;
	position: absolute;
}

#about p:nth-child(6){
	top: 800px;
	left: 488px;
	position: absolute;
}

#about p{
  transition: 1s;
  opacity: 0;
  transform: translateY(20px);
  display: block;
}
#about p:nth-child(2) {
	animation: catch_anime 1.4s forwards 1.0s;
}
#about p:nth-child(3) {
  animation: catch_anime 1.4s forwards 2.0s;
}
#about p:nth-child(5) {
  animation: catch_anime 1.4s forwards 3.0s;
}
#about p:nth-child(6) {
  animation: catch_anime 1.4s forwards 3.0s;
}

@keyframes catch_anime {
  0% {
    transform: translateY(20px);
  }
   100% {
    opacity: 1;
    transform: translateY(0);
}}

#about_img{
	background: url("../images/about_mainimg.jpg") no-repeat;
	width: 410px;
	height: 507px;
	margin: 0 auto;
}

#decoration01{
	top: 464px;
	left: -400px;
	background: url("../images/carrot.png") no-repeat;
	width: 422px;
	height: 599px;
	position: absolute;
	animation: floating-y 3.0s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

#decoration02{
	top: 50px;
	left: -100px;
	background: url("../images/eggplant.png") no-repeat;
	width: 201px;
	height: 210px;
	position: absolute;
}

#decoration03{
	top: -200px;
	right: -600px;
	background: url("../images/cucumber.png") no-repeat;
	width: 926px;
	height: 832px;
	position: absolute;
	animation: floating-y 4.0s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

#decoration04{
	top: 700px;
	right: -100px;
	background: url("../images/bellpepper.png") no-repeat;
	width: 170px;
	height: 181px;
	position: absolute;
}

#decoration05{
	top: 540px;
	left: 130px;
	background: url("../images/shishitopepper.png") no-repeat;
	width: 190px;
	height: 199px;
	position: absolute;
}
/*************************/

/*#reason setting*/
#reason_wrap{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	width: 1620px;
}

.reason_3col{
	width: 450px;
	text-align: center;
}

#reason h3{
	margin: 0 0 30px -31px;
}

#reason h3::before{
	margin-right: 5px;
	display: inline-block;
	content: url("../images/checkmark.png");
	width: 31px;
	height: 26px;
}


#reason_img01{
	margin-bottom: 30px;
	background: url("../images/reason_img01.jpg") no-repeat;
	width: 450px;
	height: 451px;
}

#reason_img02{
	margin-bottom: 30px;
	background: url("../images/reason_img02.jpg") no-repeat;
	width: 450px;
	height: 451px;
}

#reason_img03{
	margin-bottom: 30px;
	background: url("../images/reason_img03.jpg") no-repeat;
	width: 450px;
	height: 451px;
}
/*************************/

/*#review setting*/
#review h2{
	margin: 30px 0 0 0;
}

#review_wrap{
	margin: 0 auto;
	width: 1120px;
}

.voice{
	width: 800px;
	margin: auto 0;
	
}

#review h3{
	margin-bottom: 30px;
	text-align: center;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: 24px;
	color: #073c2f;
}

#review span{
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 18px;
	color: #073c2f;
}

.img_age{
	width: 290px;
	text-align: center;
}

#customer_woman{
	background: url("../images/womans_review.png") no-repeat;
	width: 282px;
	height: 337px;
	margin-bottom: 5px;
}

#customer_man{
	background: url("../images/mans_review.png") no-repeat;
	width: 286px;
	height: 338px;
	margin-bottom: 5px;
}

#customer_cauple{
	background: url("../images/cauple_review.png") no-repeat;
	width: 284px;
	height: 260px;
	margin-bottom: 5px;
}

.review_flex{
	margin-bottom: 30px;
	display: flex;
	justify-content: space-between;
}
/*************************/

/*#farmer setting*/
.farmer_wrap{
	margin: 0 auto 60px auto;
	width: 1120px;
}

.farmer_wrap p{
	margin: 0 auto;
	width: 762px;
}

#farmer_img01{
	margin: 0 auto 30px auto;
	background: url("../images/mans_farmer.png") no-repeat;
	width: 354px;
	height: 311px;
}

#farmer_img02{
	margin: 0 auto 30px auto;
	background: url("../images/cauple_farmer.png") no-repeat;
	width: 302px;
	height: 278px;
}
/*************************/

/*#trial setting*/
#trial{
	margin: 0 auto;
	background: url("../images/traial_bd.png") no-repeat;
	width: 1298px;
	height: 850px;
	position: relative;
}

#trial_intro{
	margin: 0 auto;
	width: 1120px;
	position: relative;
}

.deg{
	transform: rotate(-15deg);
	display: block;
	width: 216px;
	height: 50px;
}

#trial_intro .deg:nth-child(1){
	width: 108px;
	height: 26px;
}

#trial_intro .deg:nth-child(2){
	margin-left: -35px;
}

#fukidashi{
	position: absolute;
	top: 10px;
	left: 467px;
	background: url("../images/fukidashi.png") center bottom no-repeat;
	width: 144px;
	height: 48px;
}

#trial_2col_flex{
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	width: 940px;
}

.trial_2col{
	width: 450px;
	font-size: 24px;
	position: relative;
}

.trial_2col p{
	font-size: 24px;
}

.trial_contents{
	margin: 30px auto 40px;
	width: 300px;
}

.trial_contents:nth-child(2){
	text-align: center;
}

.price_flex{
	display: flex;
	justify-content: space-between;
	width: 300px;
}

.price{
	font-family: "Oswald", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: 700 !important;
	font-style: normal;
}

#button_1980 a,#button_2480 a{
	display: inline-block;
	padding: 0 auto;
	transition: 0.3s ease-in-out;
    font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 18px;
	color: #fff;
	line-height: 50px;
	text-align: center;
    text-decoration: none;
	background: #073c2f;
	width: 150px;
	height: 50px;
	border-radius: 50px;
}

#button_1980 a:hover,#button_2480 a:hover{
    background: #fff;
    color: #073c2f;
	border: 2px solid #073c2f;
}

#button_1980,#button_2480{
	position: absolute;
	left: 150px;
}

#decoration06{
	top: 45px;
	left: -650px;
	background: url("../images/greenpepper.png") no-repeat;
	width: 673px;
	height: 699px;
	position: absolute;
	animation: floating-y 2.5s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(-5%);
  }
}

#decoration07{
	top: 600px;
	left: -20px;
	background: url("../images/poteto.png") no-repeat;
	width: 142px;
	height: 134px;
	position: absolute;
}

#decoration08{
	top: 0;
	right: -80px;
	background: url("../images/sweetpoteto.png") no-repeat;
	width: 263px;
	height: 249px;
	position: absolute;
}

#decoration09{
	bottom: -100px;
	right: -600px;
	background: url("../images/tomato.png") no-repeat;
	width: 769px;
	height: 689px;
	position: absolute;
	animation: floating-y 4.0s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(2%);
  }
}
/***********************top page↑*************************/
/***********************plan page↓************************/
#plan_page header{
	border-bottom: 2px solid #073c2f;
	margin-bottom: 65px;
}

#service{
	margin: 0 auto 65px auto;
	display: flex;
	justify-content: space-between;
	width: 1120px;
	height: 490px;
}

#light_plan,#basic_plan,#premium_plan{
	display:flex;
	flex-flow: column;
	justify-content: space-between; 
	width: 360px;
	height: 446px;
}

.caption{
	text-align: center;
}

#basic_plan .caption{
	margin-top: -10px;
	position: relative;
	z-index: 10;
}

#crown{
	background: url("../images/crown.png") no-repeat;
	width: 70px;
	height: 70px;
	top: 180px;
	left: 995px;
	position: absolute;
}

.plan_name{
	text-align: center;
	line-height: 80px;
	font-size: 20px;
	background: #F16D6D;
	border-radius: 10px;
	display: inline-block;
	width: 360px;
	height: 80px;
}

.plan_name span{
	color: #fff;
}

.plan_content,.plan_price{
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	color: #073C2F;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 10px;
	display: inline-block;
	width: 360px;
	height: 100px;
}

.plan_delivery{
	text-align: center;
	line-height: 100px;
	font-size: 20px;
	color: #073C2F;
	background: #fff;
	border: 2px solid #ccc;
	border-radius: 10px;
	display: inline-block;
	width: 360px;
	height: 100px;
	position: relative;
}

.plan_delivery span:nth-child(1){
	top: 26px;
	left: 143px;
	position: absolute;
}

.plan_delivery span:nth-child(1)::after{
	content: "";
	border: 1px solid #073C2F;
	transform: rotate(125deg);
	top: 25px;
	left: 1px;
	position: absolute;
	width: 50px;
}

.plan_delivery span:nth-child(2){
	top: 45px;
	left: 173px;
	position: absolute;
}

.plan_price span{
	font-family: "Oswald", sans-serif !important;
	font-optical-sizing: auto !important;
	font-weight: 700 !important;
	font-style: normal;
	font-size: 22px;
}

#flow{
	margin: 0 auto;
	padding-left: 150px;
	display:flex;
	flex-flow: column;
	justify-content: space-between;
	width: 1120px;
	height: 972px;
	position: relative;
}

#dotline{
	border: 2px solid #ccc;
	transform: rotate(90deg);
	top: 500px;
	left: -270px;
	position: absolute;
	width: 900px;
	opacity: 0.5;
}

#flow span{
	fon-size: 24px;
	color: #F16D6D;
	position: relative;
}

#flow p{
	padding: 35px 20px 35px 120px;
	overflow-wrap: break-word;
	background: #fff;
	border-radius: 50px;
	box-shadow: 2px 2px 10px #ccc;
	width: 980px;
}

#flow_01 span::before{
	content: "";
	top: 35px;
	left: -45px;
	position: absolute;
	background: url("../images/pc_sp_icon.png") top 9px left 10px no-repeat,#F16D6D;
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

#flow_02 span::before{
	content: "";
	top: 35px;
	left: -45px;
	position: absolute;
	background: url("../images/track_icon.png") top 30px left 25px no-repeat,#F16D6D;
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

#flow_03 span::before{
	content: "";
	top: 35px;
	left: -45px;
	position: absolute;
	background: url("../images/wallet_icon.png") top 30px left 25px no-repeat,#F16D6D;
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

#flow_04 span::before{
	content: "";
	top: 35px;
	left: -45px;
	position: absolute;
	background: url("../images/tomato.icon.png") top 30px left 25px no-repeat,#F16D6D;
	border-radius: 50%;
	width: 150px;
	height: 150px;
}

#plan_page footer{
	margin-top: 65px;
	position: relative;
}

#decoration10{
	top: -200px;
	left: 0;
	position: absolute;
	background: url("../images/whiteradish.png") no-repeat;
	width: 184px;
	height: 200px;
}

#decoration11{
	top: -320px;
	right: 0;
	position: absolute;
	background: url("../images/carrot02.png") no-repeat;
	width: 200px;
	height: 321px;
}
/***********************plan page↑************************/
/***********************faq page↓*************************/
#faq_page header{
	border-bottom: 2px solid #073c2f;
	margin-bottom: 65px;
}

.accordion_wrap{
	margin: 0 auto 50px auto;
	width: 1000px;
	box-shadow: 1px 1px 5px #ccc;
}

.accordion_content {
	display: none;
}

.accordion_header {
	height: 70px;
	background: #fff;
	border-bottom: 3px solid #fffcf0;
	transition: background .3s ease;
	position: relative;
	cursor: pointer;
}

.accordion_header:hover{
  background: #fafafa;
}

.accordion_content {
	background: #fff;
	box-shadow: 1px 1px 10px #ccc;
}

.accordion_header span{
	padding-left: 40px;
	line-height: 70px;
	font-size: 20px;
	position: relative;
}

.accordion_content p{
	margin: 0 auto;
	padding: 30px 0 30px 40px;
	position: relative;
	width: 960px;
}

.accordion_content span{
	border-bottom: 1px solid #f00;
	cursor: pointer;
}

.accordion_content span:hover{
	opacity: 0.3;
}

.accordion_header span::before{
	content:"Q";
	top: -22px;
	left: 5px;
	position: absolute;
	color: #F16D6D;
	font-size: 38px;
}

.accordion_content p:first-child::before{
	content:"A";
	top: 15px;
	left: 5px;
	position: absolute;
	color: #F16D6D;
	font-size: 38px;
}

.accordion_header::before,
.accordion_header::after{
	content:"";
	margin: auto;
	top: 2px;
	right: 25px;
	bottom: 0;
	width: 24px;
	height: 2px;
	background: #fff;
	position: absolute;
	z-index: 10;
}

.accordion_header::after{
	transform:rotate(-90deg);
	transition:transform 0.2s;
}

.accordion_header.active::after{
	transform:rotate(0deg);
}

.anwer_btn{
	top: 15px;
	right: 17px;
	border: 20px solid rgba(241,109,109,0.8);
	border-radius: 50%;
	width: 24px;
	height: 2px;
	position:absolute;
}

.accordion_header.active .anwer_btn{
	border: 20px solid #ccc;
}

#faq_page footer{
	margin-top: 130px;
	position: relative;
}
/***********************faq page↑*************************/
/***********************trialform page↓*******************/
#trial_form_page header{
	border-bottom: 2px solid #073c2f;
	margin-bottom: 65px;
}

#form{
	margin: 0 auto;
	width: 800px;
	padding-left: 200px;
}

.form_box dt{
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}

.form_box dd{
	margin-bottom: 30px;
}

.form_box span{
	margin-left: 10px;
	text-align: center;
	line-height: 24px;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 12px;
	color: #fff;
	background: #F16D6D;
	border-radius: 8px;
	width: 50px;
	height: 24px;
}

input[type="text"],input[type="email"]{
	padding-left: 20px;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 18px;
	color: #073c2f;
	border: 1px solid #ccc;
	background: #fff;
	width: 300px;
	height: 50px;
	box-shadow: 1px 1px 5px #ccc;
}

input::placeholder{
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 18px;
	color: #ccc;
}

select{
	padding-left: 20px;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 18px;
	color: #ccc;
	border: 1px solid #ccc;
	background: #fff;
	width: 300px;
	height: 50px;
	box-shadow: 1px 1px 5px #ccc;
}


.radio_input{
	appearance: none;
	position: absolute;
}

.radio_text::before {
	content: "";
	display: block;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	box-shadow: inset 1px 1px 3px #ccc;
}

.radio_input:checked+.radio_text::after {
	content: "";
	position: absolute;
	left: 4.5px;
	display: block;
	border-radius: 50%;
	background: #073C2F;
	opacity: 0.7;
	width: 14px;
	height: 14px;
}

.radio_text{
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	position: relative;
}

.entrybtns{
	width: 300px;
	display: flex;
	justify-content: space-between;
}

.entrybtns input:nth-child(1){
	text-align: center;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 18px;
	color: #073c2f;
	background: #eee;
	border-radius: 10px;
	width: 92px;
	height: 40px;
}

.entrybtns input:nth-child(2){
	text-align: center;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 18px;
	color: #fff;
	background: #F16D6D;
	border-radius: 10px;
	width: 56px;
	height: 40px;
}

/*ボタンにマウスが乗った時*/
.entrybtns input:hover {
	opacity: 0.5;
}

#trial_form_page footer{
	margin-top: 65px;
	position: relative;
}
/***********************trialform page↑*******************/