@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:300&subset=japanese');

/* clearfix */
.clearfix:after,
#feelherbTab ul:after,
#feelherbList li:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height: 0;}
* html .clearfix,
* html #feelherbTab ul,
* html #feelherbList li             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix,
*:first-child+html #feelherbTab ul,
*:first-child+html #feelherbList li { zoom: 1; } /* IE7 */


#feelherbToppage {width: 1024px; margin: 0 auto;}
@media only screen and (max-width: 1020px){
	#feelherbToppage {width: 750px;}
}
@media only screen and (max-width: 768px){
	#feelherbToppage {width: 420px;}
}
@media only screen and (max-width: 482px){
	#feelherbToppage {width: 300px;}
}


#feelherbTab {font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
#feelherbTab ul {
	position: relative; padding: 0; margin: 0;
	text-align: center;
	border-left: 1px solid #87b829;}
#feelherbTab li {
	position: relative; float: left; display: inline;
	width: 16.5%; margin: 0;
	border-right: 1px solid #87b829;}
#feelherbTab li a {display: block;
	border-top: 4px solid #87b829; color: #87b829; line-height: 56px; font-weight: bold; white-space: nowrap;}
#feelherbTab li a.current {border-top-color: #106546; color: #fff; background: #87b829;}
#feelherbTab li a span.blinking {padding-right: 0.5em;}

@media only screen and (max-width: 768px){
	#feelherbTab li {width: 33%;}
}
@media only screen and (max-width: 482px){
	#feelherbTab li {width: 32%;}
	#feelherbTab li:first-child a {padding: 8px 0; line-height: 20px;}
	#feelherbTab li a span.blinking {display: block; padding: 0;}
}


#feelherbList h1 {
	padding: 1.5em 0 1em; border-bottom: 1px solid #000; 
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight: normal; text-align: center;}
#feelherbList ul {list-style: none;}
#feelherbList li {padding-top: 20px; margin: 0;}
#feelherbList li a {display: block;}
#feelherbList li img {float: left; display: inline; margin: 0 40px 60px 0;}
#feelherbList li .text {overflow: hidden; zoom:1;}
#feelherbList li .cate {display: inline-block; padding: 0.2em 0; margin: 0 0 0.5em; width: 200px;
	color: #fff; text-align: center;
	background: #ffa5a5;}
	#feelherbList li .cate.new {background-color: #b62022; display: none;}
	#feelherbList li .cate.skincare {background-color: #d5848b;}
	#feelherbList li .cate.mudage {background-color: #c8d627;}
	#feelherbList li .cate.column {background-color: #e3ab30;}
	#feelherbList li .cate.kurashi {background-color: #7b9ad0;}
	#feelherbList li .cate.herb {background-color: #51a1a2;}
#feelherbList li h2 { font-size: 1.5em; line-height: 1.75; font-weight: normal;}
#feelherbList li h2 small {display: block; padding-top: 0.5em; font-size: 0.75em;}
#feelherbList li .more,
#feelherbList li .inner {position: relative; display: block;
	width: 260px; padding: 0.6em 1.5em; margin: 1.5em 0 0; border: 2px solid #f5b036;
	color: #f5b036;}
#feelherbList li .more .inner {position: absolute; left: 0; top: 0; margin: 0;
	color: #fff; background: #f5b036; border: none; opacity: 0;}

@media only screen and (max-width: 1020px){
	#feelherbList li .cate {width: 120px;}
}
@media only screen and (max-width: 768px){
	#feelherbList li {padding-top: 40px;}
	#feelherbList li img {float: none; display: block; width: 360px; margin: 0 auto 10px;}
	#feelherbList li h2 br {display: none;}
}


#feelherbDetail ol {list-style: none;}
#feelherbDetail li {padding-bottom: 10px; text-align: center;}
#feelherbDetail li img {position: relative; width: 100%; max-width: 800px; height: auto;}

.feelherbTaikenOutar {}
#feelherbTaiken .section,
#feelherbTaiken .bottom {
	font-size: 13px; letter-spacing: 0.1em; font-weight:normal;}
#feelherbTaiken .section {padding: 3em 0 1em; border-bottom: 1px solid #dbd5d4;}
#feelherbTaiken .section h2 {padding-bottom: 0.5em; color: #ee7728; line-height: 1.5; font-weight: normal; text-align: left; }
#feelherbTaiken .section h3 {padding-bottom: 0.5em; color: #ee7728; line-height: 1.5; font-weight: normal; text-align: left; }
#feelherbTaiken .section dl {overflow: hidden; zoom:1;}
#feelherbTaiken .section dt,
#feelherbTaiken .section dd {line-height: 2; text-align:justify; text-justify:inter-ideograph; }
#feelherbTaiken .section dt {color: #93766f; font-size: 14px; font-weight: normal; padding-bottom: 0.25em;}
#feelherbTaiken .section dd {padding:0 0 2em; margin: 0;}
#feelherbTaiken .section dd b {}
#feelherbTaiken .section img {max-width: 300px !important;}
#feelherbTaiken .bottom h3 img {width: auto !important; height: 400px !important;}
#feelherbTaiken .bottom p {overflow: hidden; zoom:1;
	color: inherit; line-height: 2; font-weight: normal; text-align: left;}
#feelherbTaiken .bottom strong {display: block; margin: 20px 0 0;
	color: #ee7728; font-size: 1.25em; line-height: 2.5; font-weight: normal; text-align: center;
	border: 3px dotted #ee7728; border-right: none; border-left: none;}

#feelherbTaiken small.notice {display: block; padding: 1em 0 0;
	color: #93766f; line-height: 2; text-align: left; letter-spacing: 0.1em;}

.feelherb1906 #feelherbTaiken .section h2,
.feelherb1906 #feelherbTaiken .section h3 {color: #ec7aa0;}
.feelherb1906 #feelherbTaiken .bottom strong {border-color: #ec7aa0; color: #ec7aa0;}
@media only screen and (min-width: 769px){
	#feelherbTaiken .section img {float: left; display: inline; margin: 0 30px 2em 0;}
	#feelherbTaiken .section:nth-child(2n) img {float: right; margin: 0 0 2em 30px;}
}