@charset "utf-8";

/* ------------------------------
基本設定
------------------------------ */
* { padding: 0; margin: 0; box-sizing: border-box; }
html, body { color: #000; font-size: 16px; font-family: 'Noto Sans JP', sans-serif; width: 100%; height: 100%; background: #f0f0f0; }
ul { list-style: none; }
a { display: block; color: #333; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
table th { font-weight: normal; }
.indent { padding-left: 1px; text-indent: -1px; }
.emphasis-1 { color: #00f; font-size: 1.1rem; font-weight: bold; }
.emphasis-2 { font-size: 1.2rem; font-weight: bold; padding: 10px 0; }
.clearBoth { clear: both; }
/* Back To Top
------------------------------ */
.backToTop a { position: fixed; right: 50px; bottom: 40px; display: grid; place-items: center; color: #fff; font-size: 1.1rem; font-weight: bold; text-align: center; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #f0f0f0; background: rgb(203,175,128); transition: .6s ease-out; }
.backToTop a:hover { color: #000; border: 2px solid rgb(203,175,128); background: #f0f0f0; }
/* ------------------------------
共通
------------------------------ */
.sp { display: none; }
.contentsContainer { width: 1090px; margin: 0 auto; padding: 50px 0; }
.pageTitle { color: #888; font-size: 2rem; text-align: center; margin-bottom: 50px; }
.contentsTitle { color: #333; font-size: 1.6rem; font-weight: bold; text-align: center; padding: 1rem 0; margin: 50px 0; background: rgb(203,175,128); }
.pageImg img { margin: 0 auto 50px; }
/* ------------------------------
ホーム_(index.php)
------------------------------ */
#headerImg { width: 100%; margin: 0 auto; }
.topContainer { overflow: hidden; width: 1090px; margin: 0 auto; padding: 50px 0; }
.topContainer ul li { float: left; width: 350px; margin-bottom: 40px; border-radius: 6px; border: 6px solid #f0f0f0; transition: .3s ease-out; }
.topContainer ul li:nth-child(3n+2) { margin-left: 20px; margin-right: 20px; }
.topContainer ul li:hover { border: 6px solid rgb(203,175,128); }
.topContainer ul li a p:first-child { font-size: 1.2rem; }
.topContainer ul li a:hover p:last-child { color: #f00; }
.topContainer ul li a p:last-child { transition: .3s ease-out; }
.topContainer ul li p { text-align: center; padding: 6px 0; }
/* ------------------------------
ロゴ
------------------------------ */
#logo { font-size: 2rem; font-weight: bold; padding: 1rem; }
#logo a { display: inline; transition: .3s ease-out; }
#logo a:hover { opacity: .6; }
#logo .co { font-size: 1.2rem; }
/* ------------------------------
ご挨拶_(greeting.php)
------------------------------ */
.greetingBox { font-size: 18px; width: 80%; padding: 0 1rem; margin: 50px auto; }
.greetingBox p:last-child { text-align: right; padding-top: 1rem; }
/* ------------------------------
会社概要_(about_us.php)
------------------------------ */
table.aboutus { width: 550px; margin: 0 auto; }
table.aboutus th { vertical-align: top; text-align: right; padding: 1rem; border-bottom: 2px solid #fff; background: rgb(203,175,128); }
table.aboutus td { padding: 1rem; border-bottom: 2px solid rgb(203,175,128); }
table.aboutus tr:last-child th { border-bottom: 2px solid rgb(203,175,128); }
table.aboutus a { display: inline; color: #6af; transition: .3s ease-out; }
table.aboutus a:hover { color: #f00; }
/* ------------------------------
事業内容_(business_details.php)
------------------------------ */
.business_detailsBox { font-size: 18px; width: 80%; margin: 50px auto; }
.business_detailsBox p:nth-child(2) { font-size: 0.9rem; padding: 10px 0; }
.business_detailsBox img { width: 80%; margin: 2rem auto 0; }
/* ------------------------------
商品一覧_(product_list.php)
------------------------------ */
.product_listBox img { margin: 0 auto 1rem; }
.product_listBox { font-size: 18px; width: 80%; margin: 50px auto; }
.product_listBox dt { color: #f00; font-weight: bold; font-size: 1.6rem; margin-bottom: 1rem; }
.product_listBox p { margin-bottom: 2rem; }
.product_listBox p span { display: block; padding-top: 10px; }
.product_listBox ul { margin-bottom: 2rem; }
.product_listBox ul li:first-child { color: #666; font-size: 1.2rem; font-weight: bold;  margin-bottom: 6px; }
.product_listBox dl table th { vertical-align: top; width: 100px; }
.product_listBox dl table.first { margin: 1rem 0; }
/* ------------------------------
ご購入方法_(how_to_pruchase.php)
------------------------------ */
.how_to_purchaseBox { width: 850px; margin: 50px auto 0; }
.how_to_purchaseBox caption { text-align: left; margin-bottom: 2rem; }
.how_to_purchaseBox tr:nth-child(odd) { background: #ddd; }
.how_to_purchaseBox th { vertical-align: top; text-align: left; padding: 1rem; }
.how_to_purchaseBox td { padding: 1rem; }
/* ------------------------------
返品について_(return.php)
------------------------------ */
.returnBox { width: 850px; margin: 0 auto; }
.returnBox ul { margin-bottom: 30px; }
.returnBox ul li:first-child,
.returnBox dl dt { font-size: 1.2rem; font-weight: bold; }
.returnBox dl dd { padding-bottom: 1rem; }
.returnBox dl dd p { padding: 10px 0; }
/* ------------------------------
お問い合わせ_(.php)
------------------------------ */
/* ------------------------------
フッター
------------------------------ */
footer { font-size: 0.8em; padding: 30px 0; background: rgb(203,175,128); }
footer p { text-align: center; }
/* ------------------------------
高麗人参のすべて_(post-01.php)
------------------------------ */
.post-01Box { width: 850px; margin: 0 auto; }
.post-01Box ul.linkMenu { overflow: hidden; margin-bottom: 50px; }
.post-01Box ul.linkMenu li { float: left; width: 33.33333%; text-align: center; }
.post-01Box ul.linkMenu li { border: 1px solid #f0f0f0; }
.post-01Box ul.linkMenu li a { padding: 1rem 0; background: #ddd; transition: .3s ease-out; }
.post-01Box ul.linkMenu li a:hover { background: rgb(203,175,128); }
.post-01Box dl dt { font-weight: bold; font-size: 1.3rem; margin-bottom: 1rem; }
.post-01Box dl dd:not(:last-child) { margin-bottom: 50px; }
.post-01Box dd div img { float: left; margin: 0 10px 10px 0; }
.post-01Box dd p:not(:last-child) { padding-bottom: 10px; }
.post-01Box dl dd table { margin-top: 30px; }
.post-01Box dl dd table th { vertical-align: top; text-align: left; width: 30px; }
.post-01Box dl dd table td { padding-bottom: 10px; }
.post-01Box dl dd span { display: block; font-weight: bold; padding-bottom: 6px; }
/* ------------------------------
高麗人参農場へようこそ_(post-02.php)
------------------------------ */
.post-02Box .title { font-size: 1.2rem; font-weight: bold; }
.post-02Box ul {width: 80%; margin: 0 auto 10px; }
.post-02Box li { overflow: hidden; margin-bottom: 2rem; }
.post-02Box li img { float: left; width: 20%; }
.post-02Box li p { float: right; width: 79%; padding-left: 1rem; text-indent: -1rem; margin-left: 1%; }
/* ------------------------------
活性化ジンセノサイドとは_(post-03.php)
------------------------------ */
.post-03Box { width: 80%; margin: 0 auto; }
.post-03Box p { padding: 10px 1rem; }
.post-03Box dl dt { font-weight: bold; font-size: 1.3rem; margin-left: 1rem; }
.post-03Box dl dd p { padding: 10px 1rem; }
.post-03Box dl dd img { margin: 0 auto; }
/* ------------------------------
紅参発酵・紅参酢_(post-04.php)
------------------------------ */
.post-04Box .emphasis { font-size: 1.2rem; font-weight: bold; padding: 50px 0 20px; }
.post-04Box { width: 80%; margin: 0 auto; }
.post-04Box img { margin: 0 auto; }
.post-04Box ul { padding-top: 1rem; }
.post-04Box ul li:first-child { font-size: 1.1rem; }
.post-04Box div { text-align: center; }
.post-04Box dl dt { font-weight: bold; font-size: 1.3rem; margin: 2rem 0 10px; }
.post-04Box dl dd div { padding: 2rem 0; }
.post-04Box dl dd .font-01  { font-size: 1.1rem; font-weight: bold; }
.post-04Box dl dd .font-02 { color: #f00; font-size: 1.1rem; font-weight: bold; }
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
	/* ------------------------------
	共通
	------------------------------ */
	.contentsContainer { width: 720px; }
	/* ------------------------------
	ホーム_(index.php)
	------------------------------ */
	.topContainer { width: 720px; }
	.topContainer ul li:nth-child(3n+2) { margin-left: 0; margin-right: 0; }
	.topContainer ul li:nth-child(even) { margin-left: 20px; }
	/* ------------------------------
	ご挨拶_(greeting.php)
	------------------------------ */
	.greetingBox { width: 100%; }
	/* ------------------------------
	事業内容_(business_details.php)
	------------------------------ */
	.business_detailsBox { width: 100% }
	/* ------------------------------
	商品一覧_(product_list.php)
	------------------------------ */
	.product_listBox { width: 100%; }
	/* ------------------------------
	ご購入方法_(how_to_pruchase.php)
	------------------------------ */
	.how_to_purchaseBox { width: 58%; }
	.how_to_purchaseBox th,
	.how_to_purchaseBox td { display: block; width: 100%; }
	.how_to_purchaseBox th { padding-bottom: 0.5rem; }
	.how_to_purchaseBox td { padding-top: 0; }
	/* ------------------------------
	返品について_(return.php)
	------------------------------ */
	.returnBox { width: 100%; }
	/* ------------------------------
	高麗人参のすべて_(post-01.php)
	------------------------------ */
	.post-01Box { width: 100%; }
	/* ------------------------------
	高麗人参農場へようこそ_(post-02.php)
	------------------------------ */
	.post-02Box ul {width: 90%; }
	.post-02Box li img { width: 26%; }
	.post-02Box li p { width: 73%; }
	/* ------------------------------
	活性化ジンセノサイドとは_(post-03.php)
	------------------------------ */
	.post-03Box { width: 90%; }
	/* ------------------------------
	紅参発酵・紅参酢_(post-04.php)
	------------------------------ */
	.post-04Box { width: 90%; }
}
@media screen and (max-width: 812px) {}
@media screen and (max-width: 768px) {
	/* Back To Top
	------------------------------ */
	.backToTop a { bottom: 50px; right: 1rem; font-size: 0.9rem; width: 60px; height: 60px; }
	/* ------------------------------
	ロゴ
	------------------------------ */
	#logo { text-align: center; padding: 1rem 1rem 2rem; }
	/* ------------------------------
	高麗人参のすべて_(post-01.php)
	------------------------------ */
	.post-01Box ul.linkMenu li { width: 50%; }
}
@media screen and (max-width: 600px) {
	/* ------------------------------
	共通
	------------------------------ */
	.contentsContainer { width: 100%; }
	.pc { display: none; }
	/* ------------------------------
	ホーム_(index.php)
	------------------------------ */
	.topContainer { width: 100%; }
	.topContainer ul li { width: 49.75%; }
	.topContainer ul li:nth-child(even) { margin-left: 0.5%; }
	/* ------------------------------
	会社概要_(about_us.php)
	------------------------------ */
	table.aboutus { width: 96%; }
	table.aboutus th,
	table.aboutus td { display: block; border-bottom: none; }
	table.aboutus th { text-align: left; }
	table.aboutus td { padding: 1rem 1rem 2rem; }
	/* ------------------------------
	事業内容_(business_details.php)
	------------------------------ */
	.business_detailsBox { width: 96% }
	.business_detailsBox img { width: 96%; }
	/* ------------------------------
	商品一覧_(product_list.php)
	------------------------------ */
	.product_listBox { width: 96%; }
	.product_listBox dl table { width: 100%; }
	.product_listBox dl table th,
	.product_listBox dl table td { display: block; padding: 1rem 0; }
	.product_listBox dl table th { text-align: center; width: 100%; background: #ccc; }
	.product_listBox dl table td { padding: 1rem 1rem 2rem; }
	/* ------------------------------
	ご購入方法_(how_to_pruchase.php)
	------------------------------ */
	.how_to_purchaseBox { width: 70%; }
	/* ------------------------------
	返品について_(return.php)
	------------------------------ */
	.returnBox { width: 96%; }
	/* ------------------------------
	高麗人参のすべて_(post-01.php)
	------------------------------ */
	.post-01Box { width: 96%; margin: 0 auto; }
	.post-01Box dd div img { width: 40%; }
	.post-01Box dl dd table { width: 96%; margin: 30px auto 0; }
	/* ------------------------------
	高麗人参農場へようこそ_(post-02.php)
	------------------------------ */
	.post-02Box ul { font-size: 0.9rem; width: 96%; }
	.post-02Box li img { width: 28%; }
	.post-02Box li p { width: 71%; }
	/* ------------------------------
	活性化ジンセノサイドとは_(post-03.php)
	------------------------------ */
	.post-03Box dl dt { font-size: 1rem; }
}
@media screen and (max-width: 414px) {
	/* ------------------------------
	共通
	------------------------------ */
	.contentsContainer { font-size: 14px; }
	.pageTitle { font-size: 1.8rem; }
	.sp { display: block; }
	/* ------------------------------
	ホーム_(index.php)
	------------------------------ */
	.topContainer ul li { width: 49.825%; }
	.topContainer ul li:nth-child(even) { margin-left: 0.25%; }
	.topContainer ul li a p:first-child { font-size: 0.9rem; }
	.topContainer ul li a p:last-child { font-size: 0.9rem; }
	/* ------------------------------
	ご購入方法_(how_to_pruchase.php)
	------------------------------ */
	.how_to_purchaseBox { width: 96%; }
	/* ------------------------------
	高麗人参のすべて_(post-01.php)
	------------------------------ */
	.linkMenu li a { font-size: 12px; }
	/* ------------------------------
	高麗人参農場へようこそ_(post-02.php)
	------------------------------ */
	.post-02Box ul { font-size: 1rem; }
	.post-02Box li { overflow: initial; }
	.post-02Box li.title { font-size: 1.1rem; }
	.post-02Box li img { float: none; width: 100%; }
	.post-02Box li p { float: none; width: 100%; margin-left: 0; }
	.post-02Box .title { font-size: 1rem; }
	/* ------------------------------
	活性化ジンセノサイドとは_(post-03.php)
	------------------------------ */
	.post-03Box { width: 98%; }
	/* ------------------------------
	紅参発酵・紅参酢_(post-04.php)
	------------------------------ */
	.post-04Box { width: 96%; }
}