@charset "utf-8";

@import url("./reset.css");
@import url('./style.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');



#ssmark {
	font-family: "Noto Sans JP", sans-serif;
	background-color: #f1f6e3; 
}
#ssmark img { width: 100%; height: auto; }
/* --------------------------------------------------- */
/* ローディング */
/* --------------------------------------------------- */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  display: table;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
}
#loading .ld-loop {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 240px;
  height: 188px;
  transform: translate(-50%,-50%);
}
#loading .ld-loop div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  animation-duration: 4.0s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
#loading .ld-loop div:first-child {
  background-image: url('../image/common/ld01.png');
  top: 8%;
  opacity: 0.0;
  animation-name: rize;
}s
#loading .ld-loop div:nth-child(2) {
  background-image: url('../image/common/ld02.png');
  top: 10%;
  opacity: 0.0;
  animation-name: grow;
}
#loading .ld-loop div:nth-child(3) {
  background-image: url('../image/common/ld03.png');
  top: 5%;
  opacity: 0.0;
  animation-name: horizon;
}
#loading .ld-loop div:nth-child(4) {
  background-image: url('../image/common/ld04.png');
  top: 15%;
  opacity: 0.0;
  animation-name: shop;
}

@keyframes horizon {
	0% { opacity: 0.0; }
	10% { top: 0; opacity: 1.0; }
	75% { top: 0; opacity: 1.0; }
	90% { top: 0; opacity: 0.0; }
	100% {  top: 5%; opacity: 0.0; }
}
@keyframes rize {
	0% { opacity: 0.0; }
	10% { opacity: 0.0; }
	30% { top: 0; opacity: 1.0; }
	60% { top: 0; opacity: 1.0; }
	80% { top: 0; opacity: 0.0; }
	100% {  top: 8%; opacity: 0.0; }
}
@keyframes grow {
	0% { opacity: 0.0; }
	25% { opacity: 0.0; }
	35% { top: 0; opacity: 1.0; }
	60% { top: 0; opacity: 1.0; }
	80% { top: 0; opacity: 0.0; }
	100% {  top: 10%; opacity: 0.0; }
}
@keyframes shop {
	0% { opacity: 0.0; }
	35% { opacity: 0.0; }
	50% { top: 0; opacity: 1.0; }
	70% { top: 0; opacity: 1.0; }
	90% { top: 0; opacity: 0.0; }
	100% {  top: 15%; opacity: 0.0; }
}

@media screen and (max-width: 767px) {
  #loading .ld-loop {
    width: 160px;
    height: 125px;
  }
}
@media screen and (max-width: 419px) {
  #loading .ld-loop {
    width: 120px;
    height: 94px;
  }
}


/* --------------------------------------------------- */
/* レイアウト */
/* --------------------------------------------------- */
.wrap {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  background: #fff;
  overflow: hidden;
}
.wrap.fixed { position: fixed;}
main { flex: 1 0 auto; }

.contents {
  margin: 0 auto;
  width: 92%;
  max-width: 960px;
  box-sizing: border-box;
}




/* --------------------------------------------------- */
/* ヘッダー */
/* --------------------------------------------------- */
header {
	position: relative;
	width: 100%;
	z-index: 2;
	background-color: #f1f6e3; 
}
header .inblock {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 auto;
	padding: 0.8em 0;
	width: 92%;
}
header h1 {
	max-width: 212px;
	font-size: 2.1rem;
	font-weight: 600;
}
header .inblock > div {
	display: flex;
	gap: 0 2.0em;
}
header .inblock ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0 1.5em;
	font-size: 1.3rem;
}
header .inblock ul li a {
	position: relative;
	padding-left: 1.0em;
	color: #229360;
}
header .inblock ul li a::before {
	content: '▼';
	position: absolute;
	top: 0.1em;
	left: 0;
	font-size: 1.0rem;
	transform: rotate(-90deg) scale(0.66);
}
header .logo { margin: 0 0 0 auto; width: 96px; }

@media screen and (max-width: 767px) {
	header h1 { max-width: 160px; }
	header .inblock > div { gap: 0 1.0em; }
	header .logo { margin: 0 0 0 auto; width: 80px; }

}
@media screen and (max-width: 480px) {
	header .inblock {
		flex-direction: column;
		gap: 0.5em 0;
		padding: 1.0em 0;
	}
	header .inblock > div { width: 100%; }

}






/* --------------------------------------------------- */
/* フッター */
/* --------------------------------------------------- */
footer { padding: 0; }
footer .tagline {
	margin: 0 auto;
	padding: 128px 0;
	width: 75%;
	max-width: 360px;
	background-color: #fff;
}
footer > div { padding: 32px 0; background-color: #f1f6e3; }
footer .signboard {
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 0 3%;
  box-sizing: border-box;
}
footer .signboard > div {
  width: 50%;
  vertical-align: bottom;
}
footer .logo {
  margin: 0 auto 1.0em 0;
  width: 288px;
}
footer h4 {
	margin: 0 0 0 auto;
	padding: 0.25em 0;
	width: 256px;
	background-color: #229360;
	border-radius: 128px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: 600;
	text-align: center;
}
footer h4 + p {
	margin: 0.5em 0 0 auto;
	width: 256px;
	text-align: center;
}
footer h4 + p a {
	color: #229360;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.2;
}
footer h4 + p a::before {
	content: 'TEL.';
	font-size: 60%;
}
footer h4 + p::after {
	content: '平日 9：00〜17：00';
	display: block;
	font-size: 1.4rem;
}
footer .signboard + p { padding: 0 3%; font-size: 1.0rem; }
footer .credit {
  display: block;
  padding: 12px;
  background-color: #e7f1cc;
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.2rem;
  font-size: 200;
  text-align: center;
}

@media screen and (max-width: 767px) {
	footer .signboard {
		flex-direction: column;
		gap: 1.0em 0;
	}
	footer .signboard > div { width: 100%; }
	footer .logo {
		margin: 0 auto 1.0em auto;
		width: 86%;
		max-width: 256px;
	}
	footer h4 { margin: 0 auto; }
	footer h4 + p {
		margin: 0.5em auto 0;
		width: 256px;
	}
	footer h4 + p::after {
		font-size: 1.3rem;
	}
	footer .signboard + p { margin-top: 1.5em; text-align: center; }
	footer .credit { font-size: 1.1rem; }
}
@media screen and (max-width: 480px) {
	footer .tagline {
		padding: 96px 0;
		width: 66.66%;
	}
	footer > div { padding: 24px 0; }
	footer .credit { font-size: 1.0rem; }
}

/* --------------------------------------------------- */
/* 皆様へ */
/* --------------------------------------------------- */
section.forsides {
	position: relative;
	z-index: 2;
	border-bottom: 1px solid #229360;
	padding: 0 5%;
}
section#farmer.forsides {border-top: 1px solid #229360; }
.forsides .outblock {
	display: flex;
}
.forsides  h2 {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	padding: 80px 2.0em 80px 0;
	width: 18%;
	border-right: 1px solid #229360;
}
.forsides h2 span {
	writing-mode: vertical-rl;
	font-family: "Noto Serif JP", sans-serif;
	color: #229360;
	font-size: 3.6rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}
.forsides .outblock > div {
	box-sizing: border-box;
	padding: 80px 0 80px 2.0em;
	width: 82%;

}
.forsides h3 {
	margin-bottom: 0.5em;
	color: #229360;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.5;
}
.forsides h4 {
	margin-top: 1.5em;
	color: #229360;
	font-size: 1.8rem;
	font-weight: 600;
}
.forsides p { font-size: 1.6rem; }
.forsides p em { color: #19b56a; font-weight: 600; }
.forsides ul { font-size: 1.6rem; }
.forsides ul li {
	position: relative;
	margin-top: 0.5em;
	padding-left: 1.25em;
}
.forsides ul li::before {
	content: '';
	position: absolute;
	top: 0.4em;
	left: 0;
	display: block;
	width: 8px;
	height: 8px;
	border: 4px solid #19b56a;
	border-radius: 50%;
}
.forsides ul li p {
	color: #19b56a;
	font-weight: 600;
}
.forsides .w-mark {
	margin: 1.0em auto;
	width: 80%;
	max-width: 480px;
}

@media screen and (max-width: 767px) {
	.forsides  h2 {
		padding: 64px 1.0em 64px 0;
		width: 16%;
	}
	.forsides h2 span {
		font-size: 3.2rem;
	}
	.forsides .outblock > div {
		padding: 56px 0 64px 1.5em;
		width: 84%;
	}
	.forsides h3 { font-size: 2.4rem; }
}
@media screen and (max-width: 480px) {
	.forsides .outblock {
		flex-direction: column;
	}
	.forsides  h2 {
		justify-content: flex-start;
		padding: 48px 0 0.3em;
		width: 100%;
		border-right: none;
		text-align: center;
	}
	.forsides h2 span {
		margin: 0 auto;
		writing-mode: horizontal-tb;
		font-size: 2.8rem;
		border-bottom: 1px solid #229360;
		text-align: center;
	}
	.forsides .outblock > div {
		padding: 32px 0 64px;
		width: 100%;
	}
	.forsides h3 { font-size: 2.1rem; }
}


/* --------------------------------------------------- */
/* お知らせ */
/* --------------------------------------------------- */
#haedline {
  background-color: #e7f1cc;
  padding: 0.7em 5%;
}
#haedline dl {
	display: flex;
}
#haedline dl dt {
	width: 224px;
	display: flex;
	align-items: center;
}
#haedline dl dt::before {
	display: inline-block;
	margin-right: 0.75em;
	border-radius: 4px;
	width: 72px;
	color: #fff;
	font-size: 1.1rem;
	text-align: center;
}
#haedline dl dt[data-cat="認定"]::before { content: '認定'; background-color: #229360;  }
#haedline dl dt[data-cat=認定解除]::before { content: '認定解除'; background-color: #999; }
#haedline dl dt[data-cat=お知らせ]::before { content: 'お知らせ'; background-color: #0279c3; }
#haedline dl dt[data-cat=重要]::before { content: '重要'; background-color: #d00; }
#haedline dl dt p { display: inline-block; font-size: 1.4rem; line-height: 1.5; }
#haedline dl dd { width: calc(100% -224px); }

@media screen and (max-width: 640px) {
	#haedline dl { flex-direction: column; gap: 0.25em 0 ; }
}

/* --------------------------------------------------- */
/* 認証制度について */
/* --------------------------------------------------- */
#about {
	position: relative;
	padding: 96px 0;
	background-color: #f9f9f9;
}
#about .inblock {
	margin: 0 auto;
	width: 90%;
	max-width: 1280px;
}
#about h2 {
	color: #229360;
	font-size: 3.2rem;
	font-weight: 600;
}
#about h2 + p {
	font-size: 1.4rem;
}
#about .box {
	margin: 2.0em auto 0;
	width: 100%;
	max-width: 960px;
}
#about .box p { font-size: 1.8rem; }
#about .box ul { font-size: 1.6rem; }
#about .box ul h4 {
	margin-top: 1.5em;
	font-size: 1.8rem;
	font-weight: 600;
}
#about .box ul h4::before {
	content: attr(data-num)'';
	display: inline-block;
	margin-right: 0.5em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #229360;
	color: #fff;
	font-size:1.6rem;
	text-align: center;
	line-height: 24px;
}
#about .box ul p { margin-top: 0.75em; border-bottom: 1px solid #eee;}

@media screen and (max-width: 767px) {
	#about { padding: 72px 0; }
	#about h2 { font-size: 2.8rem; }
}
@media screen and (max-width: 480px) {
	#about { padding: 64px 0; }
	#about h2 { font-size: 2.4rem; }
}


/* --------------------------------------------------- */
/* 認証制度について */
/* --------------------------------------------------- */
#system { position: relative; padding-top: 96px; }
#system .ball {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 640px;
	height: 640px;
	background-color: #f8fcee;
	border-radius: 50%;
	transform: translate(-15%, -4%);
}
#system .inblock {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: 90%;
}
#system h2 {
	color: #229360;
	font-size: 3.2rem;
	font-weight: 600;
}
#system .box {
	margin: 2.0em auto 0;
	width: 100%;
	max-width: 960px;
}
#system .box p {
	font-size: 1.6rem;
	line-height: 2.2;
}
#system .box p + p { margin-top: 1.0em; }
#system .box ul { font-size: 1.6rem; }
#system .box ul h4 {
	margin-top: 1.5em;
	font-size: 1.8rem;
	font-weight: 600;
}
#system .box ul h4::before {
	content: attr(data-num)'';
	display: inline-block;
	margin-right: 0.5em;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-color: #229360;
	color: #fff;
	font-size:1.6rem;
	text-align: center;
	line-height: 24px;
}
#system .box ul p { margin-top: 0.75em; border-bottom: 1px solid #eee;}
#system .box ul p a {
	position: relative;
	padding-left: 1.5em;
	color: #229360;
	display: inline-block;
}
#system .box ul p a::before {
	content: '';
	position: absolute;
	top: 0.95em;
	left: 0.60em;
	display: block;
	width: 0.001px;
	height: 0.001px;
	border-bottom: 3px solid #229360;
	border-right: 3px solid #229360;
	border-top: 3px solid transparent;
	border-left: 3px solid transparent;
	transform: rotate(-45deg);
}
#system .scrtbl {
	display: block;
	margin-top: 3.0em;
	width: 100%;
	overflow-x: auto;
}
#system .scrtbl table { width: 100%; }
#system table thead tr th:first-child { width: 20%; }
#system table thead tr th:nth-child(2),
#system table thead tr th:last-child { width: 40%; }
#system table thead tr th:not(:first-child),
#system table tbody tr td {
	border-left: 1px solid #ddd;
}
#system table thead tr th { background-color: #f6f6f6; border-top: 1px solid #ddd;}
#system table tbody th {
	font-size: 1.2rem;
	text-align: left;
}
#system table th, #system table td {
	padding: 0.75em 0;
	border-bottom: 1px solid #ddd;
	vertical-align: middle;
}
#system table h5 { color: #0279c3; font-weight: 500; }
#system table h4 { font-weight: 600; text-align: center; }
#system table h4 em { color: #0279c3; }
#system p.note {
	margin-top: 1.0em;
	padding-left: 1.0em;
	text-indent: -1.0em;
	font-size: 1.3rem;
	line-height: 1.6;
}
#system p.note + p.note { margin-top: 0.0em; }
#system p.note a { color: #229360; }


@media screen and (max-width: 767px) {
	#system .ball {
		width: 480px;
		height: 480px;
	}
	#system h2 { font-size: 2.8rem; }
	#system .scrtbl table { width: 880px; }
}
@media screen and (max-width: 480px) {
	#system .ball {
		width: 420px;
		height: 420px;
	}
	#system .scrtbl table { width: 720px; }
}

/* --------------------------------------------------- */
/* よくあるご質問 */
/* --------------------------------------------------- */
#faq { position: relative; z-index: 1; }
#faq .inblock {
	margin: 0 auto;
	padding: 96px 0;
	width: 90%;
	max-width: 1280px;
	counter-reset: number 0;
}
#faq h2 {
	color: #111;
	font-size: 3.2rem;
	font-weight: 600;
}
#faq .qa {
	margin-top: 1.5em;
	padding: 3.0em 4.0em;
	background-color: #eee;
	counter-increment: number 1;
}
#faq .qa h3 {
	margin-bottom: 1.25em;
	font-size: 2.1rem;
	font-weight: 600;
}
#faq .qa h3::before {
	content: "Q" counter(number) "";
	display: block;
	font-size: 2.4rem;
}
#faq .qa h3 + p { font-size: 1.6rem; }
#faq .qa h3 + p::before {
	content: 'A';
	display: block;
	font-size: 2.4rem;
	font-weight: 600;
}
@media screen and (max-width: 767px) {
	#faq .inblock {
		padding: 80px 0;
		width: 90%;
	}
	#faq h2 { font-size: 2.8rem; }
	#faq .qa {
		margin-top: 1.25em;
		padding: 2.5em 5%;
	}

}
@media screen and (max-width: 480px) {
	#faq .inblock {
		padding: 64px 0;
		width: 90%;
	}
	#faq h2 { font-size: 2.4rem; }
	#faq .qa {
		margin-top: 1.25em;
		padding: 2.0em 5%;
	}
	#faq .qa h3 {
		margin-bottom: 1.0em;
		font-size: 1.8rem;
	}
	#faq .qa h3::before { font-size: 2.1rem; }
	#faq .qa h3 + p { font-size: 1.4rem; }
	#faq .qa h3 + p::before { font-size: 2.1rem; }

}



/* --------------------------------------------------- */
/* 認証作物 */
/* --------------------------------------------------- */
#attestation {
	padding: 0 5%;
	border-top: 1px solid #229360;
	border-bottom: 1px solid #229360;
}
#attestation .outblock {
	padding: 4.0em;
	border-left: 1px solid #229360;
	border-right: 1px solid #229360;
}
#attestation .inblock {
	display: flex;
	justify-content: space-between;
}
#attestation h2{
	width: 360px;
	color: #229360;
	font-size: 2.8rem;
	font-weight: 600;
	line-height: 1.4;
}
#attestation h2::after {
	content: 'Certified agricultural products.';
	display: block;
	margin-top: 1.5em;
	color: #111;
	font-size: 1.2rem;
	font-weight: 300;
}
#attestation h2 + div {
	width: calc(95% - 360px);
}
#attestation ul {
	border-bottom: 1px solid #eee;
}
#attestation ul li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 2.0em 0;
	border-top: 1px solid #eee;
	color: #229360;
	font-size: 1.6rem;

}
#attestation ul li::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	display: block;
	width: 160px;
	height: 1px;
	background-color: #229360;
}
#attestation ul li p:nth-child(odd) {
	width: 160px;
	text-align: center;
}
#attestation ul li p:nth-child(even) {
	width: calc(47% - 160px);
}
#attestation ul li .item {
	background-color: #229360;
	border-radius: 80px;
	color: #fff;
	font-weight: 600;
}

@media screen and (max-width: 1280px) {
	#attestation { padding: 0 4%; }
	#attestation .outblock { padding: 3.0em; }
	#attestation .inblock {
		flex-direction: column;
		gap: 2.0em 0;
	}
	#attestation h2{
		width: 100%;
		font-size: 2.8rem;
	}
	#attestation h2 + div { width: 100%; }

}
@media screen and (max-width: 767px) {
	#attestation { padding: 0 3%; }
	#attestation h2{ font-size: 2.4rem; }
	#attestation h2::after { font-size: 1.1rem; }
	#attestation ul li {
		padding: 1.75em 0;
		gap: 0.5em 0;
	}
	#attestation ul li p:nth-child(even) {
		width: calc(96% - 160px);
	}

}
@media screen and (max-width: 480px) {
	#attestation { padding: 0; }
	#attestation .outblock { padding: 2.0em 5%; border: none; }
	#attestation h2{ font-size: 2.1rem; }
	#attestation h2::after { font-size: 1.0rem; }
	#attestation ul li { font-size: 1.4rem; }
	#attestation ul li::after { width: 144px; }
	#attestation ul li p:nth-child(odd) { width: 144px; }
	#attestation ul li p:nth-child(even) { width: calc(97% - 144px); }

}



/* --------------------------------------------------- */
/* BasicBreakPoint */
/* --------------------------------------------------- */
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 480px) {
}