@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 850px){
	html {
		font-size: 8px;
	}
	body {
		max-width: 850px;
	}
	.fs18 {
		font-size: 16px;
	}
	.fs24 {
		font-size: 18px;
	}
	.fs40 {
		font-size: 30px;
	}
	.fs28 {
		font-size: 22px;
	}
	.ttl01 {
		width: 90%;
		margin: auto;
		padding-top: 4rem;
		position: relative;
	}
	.ttl01 span {
		position: absolute;
		top:-2rem;
		left: 50%;
		transform: translate(-50%);
		z-index: -1;
		font-size: 80px;
		text-align: center;
		font-style: oblique;
		letter-spacing: 10px;
		color: rgba(176,235,190,0.3);
	}
	.ttl01 h4 {
		text-align: center;
		color: #3C6445;
		z-index: 2;
	}
	
	/*--- header ---*/
	#header .inner {
		width: 98%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}
	.head-left {
		align-items: baseline;
		gap:3rem;
	}
	.head-left h1 a {
		display: block;
		font-size: 40px;
		color: #333;
	}
	.head-nav ul {
		gap:2rem;
	}
	.head-nav ul li a {
		display: block;
		color: #333;
	}
	.head-nav ul li:hover a {
		color: #707070;
	}
	.btn {
		background: #EFD17D;
		border-radius: 5rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.contact-btn {
		width: 180px;
		border-radius: 5rem;
		padding: 1rem 0;
	}
	.btn:hover {
		box-shadow: none;
	}
	.btn a {
		display: block;
		text-align: center;
	}
	/*========= 上部固定させるためのCSS ===============*/
	#header{
		height: 55px;/*高さ指定*/
		width:100%;/*横幅指定*/
		/*以下はレイアウトのためのCSS*/
		background:#AFF2B3;
		padding: 2rem 0;
	}

	/*JSを使いfixedクラスが付与された際の設定*/
	#header.fixed{
		position: fixed;/*fixedを設定して固定*/
		z-index: 999;/*最前面へ*/
		top:0;/*位置指定*/
		left:0;/*位置指定*/
	}

	
	/*mainvisual*/
	.mainvisual {
		height: 50vh;
		background: url("../img/mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.catch-copy {
		background: #fff;
		padding: 4rem 7rem 4rem 3rem;
		box-sizing: border-box;
		position: absolute;
		bottom: 5rem;
		right: 5rem;
	}
	.catch-copy h2,
	.catch-copy h3 {
		text-align: center;
	}
	.catch-copy h2 {
		font-size: 40px;
		margin-bottom: 1rem;
		position: relative;
	}
	.catch-copy h2::before {
		content:"";
		width: 90px;
		height: 90px;
		background: url("../img/deco01.png");
		background-size: cover;
		position: absolute;
		bottom: -8rem;
		right: -7rem;
	}
	.catch-copy h3 {
		font-size: 24px;
	}


	/*greeting*/
	#greeting {
		margin-top: 0rem;
		padding: 8rem 0;
	}
	#greeting .inner {
		width: 95%;
		margin: 12rem auto 5rem auto;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	#greeting .inner .img {
		width: 40%;
		z-index: 1;
		margin-left: auto;
	}
	#greeting .inner .txt {
		position: absolute;
		width: 65%;
		background: rgba(236, 246,232,0.5);
		box-sizing: border-box;
		padding:10rem  3rem;
		border-radius: 5px;
		z-index: 2;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
	#greeting .inner .txt p {
		line-height: 2;
	}
	#greeting .inner .txt p span {
		color: #3C6445;
	}


	/*product*/
	#product {
		padding: 5rem 0;
		position: relative;
	}
	#product::after {
		content: "";
		width: 100%;
		height: 100%;
		background: #F1F6F3;
		position: absolute;
		top:0;
		left: 0;
		z-index: -2;
	}
	#product .inner {
		width: 95%;
		margin: 5rem auto 0 auto;
		justify-content: space-between;
		align-items: center;
	}
	#product .inner .item {
		width: 30%;
		background: #fff;
		padding: 3rem 0;
		border-radius: 1rem;
	}
	#product .inner .item  .item-img,
	#product .inner .item  .item-name{
		width: 90%;
		margin:auto; 
	}
	#product .inner .item  .item-name {
		margin-top: 1rem;
	}
	.item-btn {
		margin: 3rem auto 0 auto;
		width: 250px;
		border-radius: 3rem;
		padding: 1rem 0;
	}


	/*company*/
	#company {
		padding: 8rem 0;
	}
	.company-link {
		width: 600px;
		margin: auto;
		padding: 10rem 0;
		background: url("../img/bg-pagelink.jpg");
		background-size: cover;
		background-position: center;
	}
	.company-link a {
		display: block;
		text-align: center;
		font-size: 40px;
	}

	/*info*/
	#info {
		padding: 5rem 0;
	}
	.infottl {
		text-align: center;
		color: #3C6445;
	}
	#info dl {
		width: 600px;
		margin: 3rem auto;
		justify-content: space-between;
	}
	#info dl dt {
		width: 20%;
		text-align: center;
		border-bottom: 1px solid #203B22;
		color: #3C6445;
	}
	#info dl dd {
		width: 80%;
		border-bottom: 1px solid #203B22;
	}

	/*link*/
	#link {
		padding: 5rem 0 8rem 0;
	}
	.linkttl {
		text-align: center;
		color: #3C6445;
	}
	#link ul {
		width: 600px;
		margin: auto;
		flex-direction: column;
		gap: 3rem;
	}
	#link ul li {
		padding-bottom: 0.5rem;
		border-bottom: 1px solid #ccc;
	}
	.link-company a {
		display: block;
		text-align: center;
	}
	.sns-link {
		justify-content: center;
		gap:2rem;
	}
	.sns-link a {
		display: block;
		color: #333;
	}

	/*contact*/
	#contact {
		padding: 8rem 0;
		border-top: 1px solid #0E8A23;
	}
	#contact .inner {
		width: 95%;
		margin: 5rem auto 0 auto;
		align-items: center;
		justify-content: center;
		gap:5rem;
	}
	.btn02 {
		width: 350px;
		padding: 1.5rem 0;
		background: rgba(200,236,216,0.6);
	}
	.btn02 a {
		display: block;
		text-align: center;
		font-style: oblique;
		color: #333;
		font-weight: lighter;
	}
	.btn02 a i {
		margin: 1rem;
	}



	/*footer*/
	#footer {
		padding-top: 5rem;
		background: #AFF2B3;
	}
	#footer h1 {
		font-size: 50px;
		text-align: center;
		margin-bottom: 2rem;
	}
	.foot-adress {
		text-align: center;
	}
	.foot-nav {
		width: 900px;
		padding: 2rem 0 2rem 0;
		margin: 3rem auto 0 auto;
		border-top: 1px solid #ccc;
	}
	.foot-nav ul {
		justify-content: center;
		gap:3rem;
	}
	.foot-nav ul li a {
		display: block;
		color: #333;
	}
	.copy {
		text-align: center;
		font-size: 12px;
	}


	/*--- 下層 ---*/
	/*mainvisual*/
	.s-mainvisual {
		height: 40vh;
		background: url("../img/s-mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.page-ttl {
		width: 600px;
		background: #fff;
		padding: 4rem 7rem 4rem 3rem;
		box-sizing: border-box;
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 60px;
	}

	/*companyinfo*/
	#comany-info {
		padding: 8rem 0;
	}
	#comany-info .inner {
		width: 600px;
		margin: 5rem auto;
	}

	#comany-info .inner ul {
		flex-direction: column;
		gap:3rem;

	}
	#comany-info .inner ul li {
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #A4B5CF;
		padding: 1rem 0;
	}
	#comany-info .inner ul li .dt {
		width: 20%;
		background: #3C6445;
		padding: 0.5rem 0;
	}
	#comany-info .inner ul li .dt p {
		text-align: center;
	}
	#comany-info .inner ul li .dd {
		width: 80%;
		padding-left: 1rem;
		box-sizing: border-box;
	}

	
	/*フォーム*/
	#contact-f {
		padding: 8rem 0;
	}
	.contact-form {
		width: 90%;
		margin: 8rem  auto 0 auto;
		font-size: 16px;
		background: #fff;
		box-shadow: 2px 2px 6px #ccc;
		padding: 5rem 0;
	}
	
	
	
	/*zeroagri*/
	#zeroagri {
		padding: 8rem 0;
	}
	#zeroagri .inner {
		width: 80%;
		margin: 3rem auto;
		justify-content: space-between;
		align-items: center;
	}
	#zeroagri .inner .img,
	#zeroagri .inner .txt {
		width: 45%;
	}
	#zeroagri .inner .txt p {
		font-size: 16px;
		line-height: 2;
	}
	#zeroagri .inner .txt .link {
		width: 250px;
		padding: 1rem 0;
		border: 1px solid#333;
		margin-top: 2rem;
	}
	#zeroagri .inner .txt .link a {
		display: block;
		text-align: center;
		font-size: 16px;
		clip-path: #333;
	}
	
}








@media screen and (max-width: 420px){
	html {
		font-size: 6px;
	}
	body {
		max-width: 420px;
	}
	.sp-only {
		display: block;
	}
	.fs16 {
		font-size: 12px;
	}
	.fs18 {
		font-size: 14px;
	}
	.fs24 {
		font-size: 16px;
	}
	.fs40 {
		font-size: 28px;
	}
	.fs28 {
		font-size: 18px;
	}
	.fs20 {
		font-size: 16px;
	}
	.ttl01 {
		width: 90%;
		margin: auto;
		padding-top: 4rem;
		position: relative;
	}
	.ttl01 span {
		position: absolute;
		top:-2rem;
		left: 50%;
		transform: translate(-50%);
		z-index: -1;
		font-size: 50px;
		text-align: center;
		font-style: oblique;
		letter-spacing: 10px;
		color: rgba(176,235,190,0.3);
	}
	.ttl01 h4 {
		text-align: center;
		color: #3C6445;
		z-index: 2;
	}
	
	/*--- header ---*/
	#header .inner {
		width: 98%;
		margin: auto;
		justify-content: space-between;
		align-items: center;
	}
	.head-left {
		align-items: baseline;
		gap:3rem;
	}
	.head-left h1 a {
		display: block;
		font-size: 30px;
		color: #333;
	}
	.head-nav {
		display: none;
	}
	.btn {
		background: #EFD17D;
		border-radius: 5rem;
		box-shadow: 2px 2px 5px #ccc;
	}
	.contact-btn {
		display: none;
	}
	.btn:hover {
		box-shadow: none;
	}
	.btn a {
		display: block;
		text-align: center;
	}
	/*========= 上部固定させるためのCSS ===============*/
	#header{
		height: 45px;/*高さ指定*/
		width:100%;/*横幅指定*/
		/*以下はレイアウトのためのCSS*/
		background:#AFF2B3;
		padding: 2rem 0;
	}

	/*JSを使いfixedクラスが付与された際の設定*/
	#header.fixed{
		position: fixed;/*fixedを設定して固定*/
		z-index: 999;/*最前面へ*/
		top:0;/*位置指定*/
		left:0;/*位置指定*/
	}

	
	/*mainvisual*/
	.mainvisual {
		height: 70vh;
		background: url("../img/mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.catch-copy {
		width: 95%;
		background: #fff;
		padding: 3rem 1rem;
		box-sizing: border-box;
		position: absolute;
		bottom: 45rem;
		left: 50%;
		transform: translate(-50%);
	}
	.catch-copy h2,
	.catch-copy h3 {
		text-align: center;
	}
	.catch-copy h2 {
		font-size: 24px;
		margin-bottom: 2rem;
		position: static;
	}
	.catch-copy h2::before {
		display: none;
	}
	.catch-copy h3 {
		font-size: 14px;
	}


	/*greeting*/
	#greeting {
		padding: 8rem 0;
	}
	#greeting .inner {
		width: 95%;
		margin: 12rem auto 5rem auto;
		flex-direction: column-reverse;
		gap:3rem;
		position: static;
	}
	#greeting .inner .img {
		width: 100%;
		z-index: 1;
		margin-left: auto;
		margin-right: auto;
	}
	#greeting .inner .txt {
		position:static;
		width: 100%;
		background: rgba(236, 246,232,0.5);
		box-sizing: border-box;
		padding:5rem  2rem;
		border-radius: 5px;
		z-index: 2;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
	}
	#greeting .inner .txt p {
		line-height: 2;
	}
	#greeting .inner .txt p span {
		color: #3C6445;
	}


	/*product*/
	#product {
		padding: 5rem 0;
		position: relative;
	}
	#product::after {
		content: "";
		width: 100%;
		height: 100%;
		background: #F1F6F3;
		position: absolute;
		top:0;
		left: 0;
		z-index: -2;
	}
	#product .inner {
		width: 95%;
		margin: 5rem auto 0 auto;
		flex-direction: column;
		gap:2rem;
	}
	#product .inner .item {
		width: 100%;
		background: #fff;
		padding: 3rem 0;
		border-radius: 1rem;
	}
	#product .inner .item  .item-img,
	#product .inner .item  .item-name{
		width: 90%;
		margin:auto; 
	}
	#product .inner .item  .item-name {
		margin-top: 1rem;
	}
	.item-btn {
		margin: 3rem auto 0 auto;
		width: 250px;
		border-radius: 3rem;
		padding: 1rem 0;
	}


	/*company*/
	#company {
		padding: 8rem 0;
	}
	.company-link {
		width: 350px;
		margin: auto;
		padding: 10rem 0;
		background: url("../img/bg-pagelink.jpg");
		background-size: cover;
		background-position: center;
	}
	.company-link a {
		display: block;
		text-align: center;
		font-size: 30px;
	}

	/*info*/
	#info {
		padding: 5rem 0;
	}
	.infottl {
		text-align: center;
		color: #3C6445;
	}
	#info dl {
		width: 350px;
		margin: 3rem auto;
		justify-content: space-between;
	}
	#info dl dt {
		width: 20%;
		text-align: center;
		border-bottom: 1px solid #203B22;
		color: #3C6445;
	}
	#info dl dd {
		width: 80%;
		border-bottom: 1px solid #203B22;
	}

	/*link*/
	#link {
		padding: 5rem 0 8rem 0;
	}
	.linkttl {
		text-align: center;
		color: #3C6445;
	}
	#link ul {
		width: 350px;
		margin: auto;
		flex-direction: column;
		gap: 3rem;
	}
	#link ul li {
		padding-bottom: 0.5rem;
		border-bottom: 1px solid #ccc;
	}
	.link-company a {
		display: block;
		text-align: center;
	}
	.sns-link {
		justify-content: center;
		gap:2rem;
	}
	.sns-link a {
		display: block;
		color: #333;
	}

	/*contact*/
	#contact {
		padding: 8rem 0;
		border-top: 1px solid #0E8A23;
	}
	#contact .inner {
		width: 95%;
		margin: 5rem auto 0 auto;
		align-items: center;
		justify-content: center;
		gap:5rem;
	}
	.btn02 {
		width: 350px;
		padding: 1.5rem 0;
		background: rgba(200,236,216,0.6);
	}
	.btn02 a {
		display: block;
		text-align: center;
		font-style: oblique;
		color: #333;
		font-weight: lighter;
	}
	.btn02 a i {
		margin: 1rem;
	}



	/*footer*/
	#footer {
		padding-top: 5rem;
		background: #AFF2B3;
	}
	#footer h1 {
		font-size: 50px;
		text-align: center;
		margin-bottom: 2rem;
	}
	.foot-adress {
		text-align: center;
	}
	.foot-nav {
		width: 350px;
		padding: 2rem 0 2rem 0;
		margin: 3rem auto 0 auto;
		border-top: 1px solid #ccc;
	}
	.foot-nav ul {
		justify-content: center;
		gap:3rem;
	}
	.foot-nav ul li a {
		display: block;
		color: #333;
	}
	.copy {
		text-align: center;
		font-size: 12px;
	}


	/*--- 下層 ---*/
	/*mainvisual*/
	.s-mainvisual {
		height: 70vh;
		background: url("../img/s-mainvisual.jpg");
		background-size: cover;
		background-position: center;
		position: relative;
	}
	.page-ttl {
		width: 350px;
		background: #fff;
		padding: 4rem 7rem 4rem 3rem;
		box-sizing: border-box;
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%);
	}
	.page-ttl h2 {
		text-align: center;
		font-size: 40px;
	}

	/*companyinfo*/
	#comany-info {
		padding: 8rem 0;
	}
	#comany-info .inner {
		width: 300px;
		margin: 5rem auto;
	}

	#comany-info .inner ul {
		flex-direction: column;
		gap:3rem;

	}
	#comany-info .inner ul li {
		flex-direction: column;
		gap: 1rem;
		border-bottom: 1px solid #A4B5CF;
		padding: 1rem 0;
	}
	#comany-info .inner ul li .dt {
		width: 100%;
		background: #3C6445;
		padding: 0.5rem 0;
	}
	#comany-info .inner ul li .dt p {
		text-align: center;
	}
	#comany-info .inner ul li .dd {
		width: 100%;
		padding-left: 1rem;
		text-align: center;
		box-sizing: border-box;
	}
	#comany-info .inner ul li .dd p {
		text-align: center;
	}
	
	/*フォーム*/
	#contact-f {
		padding: 8rem 0;
	}
	.contact-form {
		width: 90%;
		margin: 8rem  auto 0 auto;
		font-size: 16px;
		background: #fff;
		box-shadow: 2px 2px 6px #ccc;
		padding: 5rem 0;
	}
	.form-item ul {
		flex-direction: column;
		gap:1rem;
	}
	.form-item ul .form-label {
		width: 70%;
		line-height: 1.5;
	}
	.form-item ul .form-input {
		width: 100%;
	}
	.input_box {
		border: 1px solid #ccc;
		padding: 1rem 0;
		width: 100%;
	}
	.input_txtarea {
		border: 1px solid #ccc;
		padding: 1rem 0;
		width: 100%;
		height: 10em;
	}
	.submit-btn {
		width: 200px;
		margin: 3rem auto 0 auto;
	}
	
	.Form-Btn {
		background: linear-gradient(#11B10B,#92D595);
		padding: 2rem 0;
		text-align: center;
		color: #fff;
		width: 200px;
		border: none;
		font-size: 2.4rem;
	
	}
	
	
	/*zeroagri*/
	#zeroagri {
		padding: 8rem 0;
	}
	#zeroagri .inner {
		width: 90%;
		margin: 3rem auto;
		flex-direction: column;
		gap:3rem;
	}
	#zeroagri .inner .img,
	#zeroagri .inner .txt {
		width: 100%;
	}
	#zeroagri .inner .txt p {
		font-size: 16px;
		line-height: 2;
	}
	#zeroagri .inner .txt .link {
		width: 250px;
		padding: 1rem 0;
		border: 1px solid#333;
		margin-top: 2rem;
		margin-left: auto;
		margin-right: auto;
	}
	#zeroagri .inner .txt .link a {
		display: block;
		text-align: center;
		font-size: 16px;
		clip-path: #333;
	}
	
	
	
}