header {
	max-width: 1200px;
	margin: auto;
}
.header-container {
	background-color: #FFF;
	z-index: 1;
}
main {
	background: url(img/bg.gif) center;
	background-repeat: repeat;     /* 縦方向に繰り返す */
	background-position: top left;
	padding-bottom: 50px;
}
/* ***************************************************  */
/* トップイメージ  */
#top {
	display: flex;
	max-width: 1100px;
	text-align: center;
	align-items: center;
	margin: auto;
}
#topimage {
	flex: 1; /* 画像エリアを柔軟に */
	max-width: 60%; /* 幅の上限を設定 */
	padding: 20px 0px;
}
#toptitle {
	flex: 1; /* タイトルエリアを柔軟に */
	max-width: 40%; /* 幅の上限を設定 */
	text-align: left;
	background-color: rgba(255, 255, 255, 0.7);
	padding: 30px 0px 30px 10px;
}
#toptitle h1 {
	font-size: 20px;
	width: 100%;
	line-height: 50px;
	margin-bottom:40px;
}
.h1s {
	color: rgb(50,140,30);
	font-weight: bold;
	font-size: 30px;
}
.h1b {
	display: block;
	color: rgb(50,140,30);
	font-weight: bold;
	font-size: 50px;
}
#toptitle ul {
	width:100%;
}
#toptitle ul li {
	position: relative;
	padding: 0.5em 1em 0.5em 2.3em;
	margin-bottom:5px;
	color: rgb(50,140,30);
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid rgba(50, 140, 30, 0.5);
}
#toptitle ul li:after, #toptitle ul li:before {
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#toptitle ul li:before {
	top: 0.7em;
	left: 0.2em;
	width: 14px;
	height: 14px;
	border:2px solid rgba(50, 140, 30, 0.5);
}
#toptitle ul li:after {
	top: 0.9em;
	left: 0.7em;
	width: 16px;
	height: 16px;
	background: rgba(50, 140, 30, 0.3);
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}


/* タブレット用のスタイル */
@media (max-width: 900px) {
#top {
 padding-top: 10%;
}
#topimage {
 max-width: 100%; /* 幅の上限を設定 */
}
#toptitle {
 max-width: 100%; /* 幅の上限を設定 */
 line-height: 22px;
}
#toptitle h1 {
 margin-bottom:10px;
}
.h1s {;
 font-size: 24px;
}
.h1b {
 font-size: 40px;
}
}

/* スマホ用のスタイル */
@media (max-width: 600px) {
 #top {
 flex-direction: column-reverse; /* 要素の順番を逆に */
 margin: auto 0%;
 padding-top: 10%;
}
#toptitle {
 margin-left: 3%; /* 幅の上限を設定 */
}
}
 @media (min-width: 769px) {
#top {
 padding-top: 10%;
}
}
@media (min-width: 1025px) {
#top {
 padding-top: 0;
}
}
/* ***************************************************  */
/* 共通  */
.container {
	max-width: 1100px;
	text-align: center;
}
.container dl, .text {
	text-align: left;
	margin: 10px 0px;
}
/* ***************************************************  */
/* はじめに  */
#message {
	padding: 10px;
}
#message .container {
	background-color: #FFF;  /* 緑色（好みに応じて変更可能） */
	border-radius: 15px;        /* 角の丸み。数値を大きくするとより丸くなる */
	padding: 20px;              /* 内側の余白（テキストが見やすくなる） */
	color: #000;               /* 文字色（背景とのコントラスト用） */
	max-width: 1000px;
	border: 5px solid #5AB661;
	margin: 20px auto 50px;
}
#message h2 {
	font-size: 1.5rem;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 1em; /* テキストとの間隔調整 */
}
#message h2::before, #message h2::after {
 content: "";
 width: 50px;            /* 線の長さを固定する（好みに応じて調整） */
 height: 1px;
 background-color: #333; /* 線の色 */
}
.nayami {
	margin: auto;
	text-align: center;
	width: 85%;
}
.nayami h3 {
	font-size: 1.2rem;
	margin: 10px auto;
	color: #449B4A;
	font-weight: bold;
}
.grid-dl {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.grid-dl .item {
	width: calc(33.333% - 10px); /* 3つ並ぶように幅を調整 */
	box-sizing: border-box;
}
.grid-dl dd {
	width:15em
}
/* ***************************************************  */
/* よもぎ乳酸菌とは  */
#yomogi {
	background-color: #DDF4DF;
	border-top: 5px solid #FFF;
	padding-bottom: 30px;
}
#yomogi .container {
	padding: 20px;               /* 文字色（背景とのコントラスト用） */
	max-width: 1000px;
	margin: auto;
}
#yomogi h2 {
	border-radius: 15px;        /* 角の丸み。数値を大きくするとより丸くなる */
	padding: 0px 40px;              /* 内側の余白（テキストが見やすくなる） */
	border: 5px solid #FFF;
	margin: 30px auto 40px;
	max-width: 520px;
	background: #FFF;
}
#yomogi h3 {
	font-size: 1.5rem;
	position: relative;
	padding-left: 25px;
	margin-bottom: 20px;
	text-align: left;
	color: #246F29;
}
#yomogi h3:before {
	position: absolute;
	content: '';
	bottom: -6px;
	left: 0;
	width: 0;
	height: 0;
	border: none;
	border-left: solid 15px transparent;
	border-bottom: solid 15px #246F29;
}
#yomogi h3:after {
	position: absolute;
	content: '';
	bottom: -6px;
	left: 10px;
	width: 100%;
	border-bottom: 2px solid #246F29;
}
.column {
	display: flex;
	align-items: flex-start;
	gap: 20px; /* テキストと画像の間隔 */
}
.desc {
	flex: 1; /* テキストは残りのスペースを埋める */
}
.sayo {
	border-radius: 15px;        /* 角の丸み。数値を大きくするとより丸くなる */
	padding: 0px 40px;              /* 内側の余白（テキストが見やすくなる） */
	border: 5px solid #FFF;
	margin: 20px auto;
	max-width: 750px;
	background: #FFF;
}
/* アコーディオンボックス  */
.acbox-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* 2列 */
	gap: 20px;
}
.acbox {
	width: auto;
	font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
	margin:0 10px; /* ボックス全体の位置調整 */
}
.acbox label {
	width: auto;
	font-size: 1rem; /* ラベルの文字サイズ */
	font-weight: bold;
	text-align: center;
	background: #6CB73C; /* ラベルの背景色 */
	position: relative;
	display: block;
	padding:8px;
	border-radius: 4px; /* ラベルの角の丸み */
	cursor: pointer;
	color: #fff;
}
.acbox label:hover {
	background: #80C651; /* ラベルにマウスを乗せた時の背景色 */
}
.acbox input {
	display: none;
}
.acbox label:after {
	color: #fff;
	content:"＋";
	; /* ラベルのアイコン */
	position: absolute;
	top: 50%;
	right: 15px;
	margin-top: -14px;
	font-size: 1.3rem; /* ラベルの文字サイズ */
}
 .acbox input:checked ~ label::after {
 content:"－"; /* ラベルをクリックした後のアイコン */
}
.acbox div {
	height: 0px;
	overflow: hidden;
	opacity: 0;
	transition: 0.15s; /* 開閉スピードの設定 */
}
 .acbox input:checked ~ div {
 height: auto;
 padding: 18px; /* 開いた部分の枠内の余白 */
 border-radius: 0px;
 background: #F3F4F5; /* 開いた部分の背景色 */
 opacity: 1;
}
 .acbox input:checked ~ label {
 background: #6CB73C; /* クリック後のラベルの背景色 */
}
.acbox-under {
	font-size: 15px; /* 開いた部分の文字サイズ */
	color: #555555; /* 開いた部分の文字色 */
}
/* ***************************************************  */
/* 検証結果  */
#kensyo {
	background: #FFF;
	padding-bottom: 50px;
}
#kensyo .container {
	margin: auto;
	max-width: 1300px;
}
#kensyo h2 {
	font-size: 1.6rem;
	margin: auto;
	padding-top: 50px;
	color: #246F29;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 1em; /* テキストとの間隔調整 */
}
#kensyo h2::before, #kensyo h2::after {
 content: "";
 width: 50px;            /* 線の長さを固定する（好みに応じて調整） */
 height: 1px;
 background-color: #246F29; /* 線の色 */
}
#kensyo h3 {
	font-size: 1.6rem;
	margin: 40px auto 10px;
	width: 22rem;
	font-weight: bold;
	height: 4rem;
	padding-top: 20px;
	padding-left: 50px;
}
.box-container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;        /* 中央寄せ */
	padding: 10px;
	box-sizing: border-box;
}
.box {
	border-radius: 10px;
	box-sizing: border-box;
	max-width: 580px;          /* 2つ並べたら約1040px＋gapで1100pxに収まる */
	text-align: left;
}
.box_head {
	color: #ffffff;                     /* 白文字 */
	padding: 10px 15px;
	border-radius: 6px 6px 0 0;
}
.box .text {
	margin: auto;
	padding: 20px;
}
.box h4 {
	font-size: 1.2rem;
}
.box img {
	margin: 10px auto;
}
.box h5 {
	color: #4CAF50;
	font-size: 1rem;
	font-weight: bold;
	margin-top: 1rem;
}
/* 鶏  */
.tori h3 {
	color: #C60;
	background: url(img/s_tori.gif) no-repeat 30px;
}
.tori .box {
	border: 2px solid #C60;
}
.tori .box_head {
	background-color: #C60;
}
.tori .box_head span {
	font-size: 1rem;
	margin-left: 0.5rem;
}
.tori .box h5 {
	color: #C60;
}
.tori .ap {
	font-size: 1.2rem;
	margin: 10px 10px 0px;
	line-height: 1.5em;
}
.tori .ap span {
	font-size: 1.8rem;
	color: #C60;
	font-weight: bold;
}
.tori .umami {
	padding: 0px 20px;
}
/* 豚  */
.buta h3 {
	color: #538B2D;
	background: url(img/s_buta.gif) no-repeat 20px;
}
.buta .box {
	border: 2px solid #538B2D;
}
.buta .box_head {
	background-color: #538B2D;
}
.buta .box h5 {
	color: #538B2D;
}
#kensyo ul {
	padding-left: 1rem;
	position: relative;
}
#kensyo ul li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f101";     /*アイコンの種類*/
	position: absolute;
	left : 0rem;     /*左端からのアイコンまでの距離*/
	color: #538B2D;     /*アイコン色*/
}
/* 牛  */
.ushi h3 {
	color: #29529E;
	background: url(img/s_ushi.gif) no-repeat 10px;
}
.ushi .box {
	border: 2px solid #29529E;
}
.ushi .box_head {
	background-color: #29529E;
}
.ushi .box h5 {
	color: #29529E;
}
/* ***************************************************  */
/* 使用例  */
#siyo {
	text-align: center;
	padding: 0px 10px;
}
#siyo .container {
	background-color: #FFF;  /* 緑色（好みに応じて変更可能） */
	border-radius: 15px;        /* 角の丸み。数値を大きくするとより丸くなる */
	padding: 20px;              /* 内側の余白（テキストが見やすくなる） */
	color: #000;               /* 文字色（背景とのコントラスト用） */
	max-width: 1000px;
	border: 5px solid #5AB661;
	margin: 50px auto;
}
#siyo h2 {
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	gap: 1em;
	margin-top: 20px;
	margin-bottom: 30px;
}
#siyo h2::before, #siyo h2::after {
 content: "";
 width: 50px;            /* 線の長さを固定する（好みに応じて調整） */
 height: 1px;
 background-color: #333; /* 線の色 */
}
#siyo h3 {
	font-size: 1.2rem;
	padding: 0.5em;/*文字周りの余白*/
	background: #E3F1D6;/*背景色*/
	border-left: 5px solid #76C144;/*左線（実線 太さ 色）*/
	text-align: left;
	margin-top: 30px;
}
#siyo h3 span {
	font-size: 1rem;
	margin-left: 1rem;
}
.siyo_wrap {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;        /* 中央寄せ */
	padding: 10px;
}
#siyo .text {
	flex: 1; /* タイトルエリアを柔軟に */
	max-width: 30%;  /*幅の上限を設定 */
	text-align: left;
}
#siyo .image {
	flex: 1; /* 画像エリアを柔軟に */
	max-width: 70%;  /*幅の上限を設定 */
}
/* ***************************************************  */
/* 問い合わせ  */

#contact {
	text-align: center;
	margin: 80px auto 30px;
}
.toi {
	margin-right: 1em;
}
.btn {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 0.9;
	position: relative;
	display: inline-block;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1rem;
	color: #212529;
	border-radius: 0.5rem;
}
a.btn-c {
	font-size: 1.8rem;
	position: relative;
	padding: 0rem 2rem 1rem;
	color: #fff;
	background: #e94919;
	-webkit-box-shadow: 0 5px 0 #d44114;
	box-shadow: 0 5px 0 #d44114;
}
.btn-s {
	font-size: 1.3rem;
	width: 18em;
	position: absolute;
	top: -1.25rem;
	left: calc(50% - 9em);
	display: block;
	padding: 0.4rem 0;
	color: #d44114;
	border: 2px solid #d44114;
	border-radius: 100vh;
	background: #fff;
	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
.btn-s:before, .btn-s:after {
	position: absolute;
	left: calc(50% - 10px);
	content: "";
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
.btn-s:before {
	bottom: -10px;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #d44114 transparent transparent transparent;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
.btn-s:after {
	bottom: -7px;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #fff transparent transparent transparent;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
a.btn-c i {
	margin-right: 1rem;
}
a.btn-c:hover {
	-webkit-transform: translate(0, 3px);
	transform: translate(0, 3px);
	color: #fff;
	background: #EE734F;
	-webkit-box-shadow: 0 2px 0 #d44114;
	box-shadow: 0 2px 0 #d44114;
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}
/* ***************************************************  */
/* フッター  */
footer {
	background-color: #DDF4DF;
	border-top: 5px solid #FFF;
}
footer .container {
	display: flex;
	max-width: 1100px;
	margin: auto;
	padding: 20px;
}
.foot_logo {
	flex: 1; /* 画像エリアを柔軟に */
	background-color: #FFF;  /* 緑色（好みに応じて変更可能） */
	border-radius: 10px;        /* 角の丸み。数値を大きくするとより丸くなる */
	padding: 5px;              /* 内側の余白（テキストが見やすくなる） */
	color: #000;
	margin: 20px 50px 20px 0px;
	max-width: 250px;
}
.info {
	flex: 1; /* 画像エリアを柔軟に */
	text-align: left;
	margin: 20px 50px 20px 0px;
}
.company {
	font-size: 1.3rem;
	margin-bottom: 5px;
}
.copyright {
	text-align: center;
	padding: 10px;
}