@charset "UTF-8";
/*=============================================================
 04_modules
=============================================================*/
/*!  mod_column01
================================================ */
/*! lNav
---------------------------------------- */
/*! lNav01
------------------------------ */
.lNav01 { line-height: 1.6; margin: 0 -25px; padding: 25px 25px 40px; border-top: 4px solid #83942e; background: #fcf6e5; text-align: center; }
.lNav01 ul { overflow: hidden; border: 1px solid #4f6129; border-bottom: 0; }
.lNav01 li { border-bottom: 1px solid #4f6129; }
.lNav01 li a { display: block; position: relative; padding: 12px 0; color: #4f6129; font-size: 16px; text-decoration: none; }
.lNav01 li a:before { position: absolute; top: 50%; right: 14px; width: 13px; height: 13px; margin-top: -7px; border-top: 1px solid #4f6129; border-right: 1px solid #4f6129; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.lNav01 li.js-current { background: #9eb270; }
.lNav01 li.js-current a { color: #fff; }
.lNav01 li.js-current a:before { border-color: #fff; }
@media screen and (min-width: 769px) { .lNav01 { max-width: 900px; margin: 0; padding: 40px 75px 20px; }  .lNav01 ul { border: 0; }  .lNav01 li { float: left; width: 420px; margin: 0 0 20px; border: 1px solid #4f6129; }  .lNav01 li:nth-child(even) { float: right; }  .lNav01 li a { overflow: hidden; padding: 12px 0 13px; font-size: 18px; -webkit-transition: all .4s ease; transition: all .4s ease; }  .lNav01 li a span { position: relative; z-index: 4; }  .lNav01 li a:hover { color: #fff; }  .lNav01 li a:before { right: 14px; z-index: 3; width: 11px; height: 11px; margin-top: -6px; -webkit-transition: all .4s ease; transition: all .4s ease; }  .lNav01 li a:after { position: absolute; top: 0; left: -100%; z-index: 1; width: 100%; height: 100%; background: #9eb270; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .lNav01 li a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  .lNav01 li a:hover:after { left: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .lNav01 li.js-current { background: #4f6129; }  .lNav01 li.js-current a { background: #4f6129; cursor: default; }  .lNav01 li.js-current a:before , .lNav01 li.js-current a:after { content: none; } }
/*! lNav02
------------------------------ */
.lNav02 { position: relative; line-height: 1.6; overflow: hidden; margin: 0 -25px; padding: 30px 15px 25px; border-top: 4px solid #83942e; background: #fcf6e5; text-align: center; }
.lNav02 .tit { position: relative; z-index: 2; line-height: 1.0; margin: 0 0 25px; color: #4f6129; font-weight: normal; font-size: 20px; white-space: nowrap; }
.lNav02:before , .lNav02:after { display: block; position: absolute; z-index: 0; content: ""; }
.lNav02 ul { position: relative; z-index: 1; overflow: hidden; }
.lNav02 ul > li { display: inline-block; box-sizing: border-box; max-width: 325px; margin: 0 10px 15px; border: 1px solid #b9c0a9; }
.lNav02 ul > li a { display: block; position: relative; z-index: 2; background: #fff; text-decoration: none; }
.lNav02 ul > li a:after { position: absolute; right: -1px; bottom: -1px; z-index: 3; width: 0; height: 0; border-width: 0 0 18px 18px; border-style: solid; border-color: transparent transparent #4f6129 transparent; content: ""; }
.lNav02 ul > li a .img img { width: 100%; vertical-align: top; }
.lNav02 ul > li a p { line-height: 1.6; padding: 22px 20px; font-size: 18px; }
.lNav02 ul > li.js-current a { background: #f7ffe0; color: #4f6129; }
.lNav02 > p { margin: 8px 10px 14px; text-align: left; }
.lNav02 > p a { margin: 0; }
@media screen and (min-width: 769px) { .lNav02 { max-width: 960px; margin: 0; padding: 50px 40px 20px; }  .lNav02 .tit { margin: 0 0 46px; font-size: 28px; }  .lNav02 ul { margin: 0 -30px; border: 0; letter-spacing: -.5em; }  .lNav02 ul > li { box-sizing: border-box; width: 300px; max-width: auto; margin: 0 15px 30px; letter-spacing: 0; }  .lNav02 ul > li a:after { border-width: 0 0 22px 22px; -webkit-transition: border-color .2s ease; transition: border-color .2s ease; }  .lNav02 ul > li a:hover:after { border-color: transparent transparent #83942e transparent; }  .lNav02 ul > li a .img img { -webkit-transition: opacity .2s ease; transition: opacity .2s ease; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }  .lNav02 ul > li a:hover img { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .lNav02 ul > li a p { padding: 36px 10px; font-size: 22px; }  .lNav02 > p { margin: 0 0 20px; } }
/*! lNav03
------------------------------ */
.lNav03 { margin: 0 -10px; text-align: center; }
.lNav03 ul { overflow: hidden; }
.lNav03 ul > li { display: inline-block; box-sizing: border-box; max-width: 325px; margin: 0 10px 15px; border: 1px solid #b9c0a9; }
.lNav03 ul > li a { display: block; position: relative; z-index: 1; background: #fff; text-decoration: none; }
.lNav03 ul > li a:after { position: absolute; right: -1px; bottom: -1px; z-index: 2; width: 0; height: 0; border-width: 0 0 18px 18px; border-style: solid; border-color: transparent transparent #4f6129 transparent; content: ""; }
.lNav03 ul > li a .img img { width: 100%; vertical-align: top; }
.lNav03 ul > li a .tit { line-height: 1.4; margin: 20px 0 15px; padding: 0 20px; color: #4f6129; font-weight: normal; font-size: 18px; }
.lNav03 ul > li a p { line-height: 1.6; padding: 0 20px 20px; font-size: 13px; text-align: left; }
.lNav03 ul > li.js-current a { background: #f7ffe0; color: #4f6129; }
@media screen and (min-width: 769px) { .lNav03 { max-width: 1040px; margin: 0 auto; padding: 0; }  .lNav03 ul { overflow: hidden; margin: 0 -14px; border: 0; letter-spacing: -.5em; }  .lNav03 ul > li { display: inline-block; box-sizing: border-box; width: 328px; margin: 0 14px 30px; letter-spacing: 0; }  .lNav03 ul > li a:after { border-width: 0 0 22px 22px; -webkit-transition: border-color .2s ease; transition: border-color .2s ease; }  .lNav03 ul > li a:hover:after { border-color: transparent transparent #83942e transparent; }  .lNav03 ul > li a .img img { -webkit-transition: opacity .2s ease; transition: opacity .2s ease; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }  .lNav03 ul > li a:hover img { opacity: .7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }  .lNav03 ul > li a .tit { margin: 22px 0 20px; padding: 0 20px; font-size: 22px; }  .lNav03 ul > li a p { padding: 0 20px 24px; font-size: 16px; } }
/*! -------------------- */
/*! Anchor Link
---------------------------------------- */
/*! mod_pageNav01
------------------------------ */
.mod_pageNav01 { margin: 25px 0; }
.mod_pageNav01 ul { text-align: center; }
.mod_pageNav01 ul > li { margin: 1px 0 0; }
.mod_pageNav01 ul > li a { display: block; position: relative; box-sizing: border-box; width: 100%; min-height: 50px; line-height: 1.5; padding: 13px 17px; background: #4f6129; color: #fff; font-size: 16px; text-decoration: none; }
.mod_pageNav01 ul > li a:before { position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; margin-top: -10px; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
@media screen and (min-width: 769px) { 
.mod_pageNav01 { margin: 25px 0; }  .mod_pageNav01 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }  .mod_pageNav01 ul > li { margin: 0; -ms-flex-preferred-size: 250px; flex-basis: 250px; }  
.mod_pageNav01 ul > li a { z-index: 2; min-height: 55px; line-height: 1.4; overflow: hidden; padding: 14px 30px; font-size: 18px; -webkit-transition: all .4s ease; transition: all .4s ease; }  .mod_pageNav01 ul > li a span { position: relative; z-index: 4; }  
.mod_pageNav01 ul > li a:before { z-index: 3; -webkit-transition: all .4s ease; transition: all .4s ease; }  
.mod_pageNav01 ul > li a:after { position: absolute; top: -100%; left: 0; z-index: 1; width: 100%; height: 100%; background: #3b4c18; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  
.mod_pageNav01 ul > li a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  
.mod_pageNav01 ul > li a:hover:after { top: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  
.mod_pageNav01.column2 ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }  
.mod_pageNav01.column2 ul > li { margin: 0 25px; -ms-flex-preferred-size: 350px; flex-basis: 350px; }  
.mod_pageNav01.column3 ul > li { -ms-flex-preferred-size: 336px; flex-basis: 336px; }
 }
/*
#styleguide
lNav01

js-currentクラスは$page_slugで指定したスラッグと同じclassのリストに自動的に付加されます。

```
<nav class="lNav01">
	<ul>
		<li class="index"><a href="/shop/"><span>直営店舗情報へ</span></a></li>
		<li class="otaki js-current"><a href="/shop/otaki/"><span>王滝店</span></a></li>
		<li class="satomiya"><a href="/shop/satomiya/"><span>里宮店</span></a></li>
		<li class="narai"><a href="/shop/narai/"><span>奈良井店</span></a></li>
		<li class="ichiba"><a href="/shop/ichiba/"><span>木曽市場店</span></a></li>
		<li class="hyakurakuan"><a href="/shop/hyakurakuan/"><span>そば処百楽庵</span></a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
lNav02

js-currentクラスは$page_slugで指定したスラッグと同じclassのリストに自動的に付加されます。
タイトル部分の背景はそれぞれ指定してください。

```
<nav class="lNav02">
	<h2 class="tit">生薬製剤についてもっと知る</h2>
	<ul>
		<li class="index js-current"><a href="/crude_drug/">
			<div class="img"><img src="/img/crude_drug/img_lnav01.png" alt="生薬製剤とは"></div>
			<p>生薬製剤とは</p>
		</a></li>
		<li class="product"><a href="/crude_drug/product/">
			<div class="img"><img src="/img/crude_drug/img_lnav02.png" alt="日野製薬の作る生薬製剤"></div>
			<p>日野製薬の作る生薬製剤</p>
		</a></li>
		<li class="hyakuso"><a href="/crude_drug/hyakuso/">
			<div class="img"><img src="/img/crude_drug/img_lnav03.png" alt="百草について"></div>
			<p>百草について</p>
		</a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
lNav03



```
<nav class="lNav03">
	<ul>
		<li><a href="/crude_drug/">
			<div class="img"><img src="/img/crude_drug/img_lnav01.png" alt="百草丸とは…"></div>
			<h3 class="tit">百草丸とは…</h3>
			<p>オウバクエキスを中心に6種の生薬を配合した百草丸</p>
		</a></li>
		<li><a href="/crude_drug/">
			<div class="img"><img src="/img/crude_drug/img_lnav01.png" alt="百草丸とは…"></div>
			<h3 class="tit">百草丸とは…</h3>
			<p>オウバクエキスを中心に6種の生薬を配合した百草丸</p>
		</a></li>
		<li><a href="/crude_drug/">
			<div class="img"><img src="/img/crude_drug/img_lnav01.png" alt="百草丸とは…"></div>
			<h3 class="tit">百草丸とは…</h3>
			<p>オウバクエキスを中心に6種の生薬を配合した百草丸</p>
		</a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
pageNav01

ページ内アンカーリンクです。PCでのノーマルレイアウトは4カラムです。
.mod_pageNav01にそれぞれ.column2、.column3を付属すると2カラム、3カラムにできます。

```
<nav class="mod_pageNav01">
	<ul>
		<li><a href="#"><span>御嶽山整備事業</span></a></li>
		<li><a href="#"><span>企業研修の受け入れ</span></a></li>
		<li><a href="#"><span>キハダの植樹</span></a></li>
		<li><a href="#"><span>地域社会への貢献</span></a></li>
	</ul>
</nav>

<nav class="mod_pageNav01 column2">
	<ul>
		<li><a href="#"><span>新卒採用</span></a></li>
		<li><a href="#"><span>中途採用</span></a></li>
	</ul>
</nav>

<nav class="mod_pageNav01 column3">
	<ul>
		<li><a href="#"><span>御嶽山整備事業</span></a></li>
		<li><a href="#"><span>企業研修の受け入れ</span></a></li>
		<li><a href="#"><span>キハダの植樹</span></a></li>
	</ul>
</nav>
```
*/
/*!  mod_box01
================================================ */

/*! mod_pageNav02
------------------------------ */
 /* produnts hyakusogan百草丸ブランドページアンカー　小ボタン */
 .mod_pageNav02 { margin: 25px 0; }
.mod_pageNav02 ul { text-align: center; }
.mod_pageNav02 ul > li { margin: 1px 0 0; }
.mod_pageNav02 ul > li a { display: block; position: relative; box-sizing: border-box; width: 100%; min-height: 50px; line-height: 1.5; padding: 13px 10px; background: #4f6129; color: #fff; font-size: 14px; text-decoration: none; }
.mod_pageNav02 ul > li a:before { position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; margin-top: -10px; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.mod_pageNav022 { margin: 25px 0; }
.mod_pageNav022 ul { text-align: center; }
.mod_pageNav022 ul > li { margin: 1px 0 0; }
.mod_pageNav022 ul > li a { display: block; position: relative; box-sizing: border-box; width: 100%; min-height: 50px; line-height: 1.5; padding: 13px 10px; background: #4f6129; color: #fff; font-size: 14px; text-decoration: none; }
.mod_pageNav022 ul > li a:before { position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; margin-top: -10px; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; -webkit-transform: rotate(135deg); transform: rotate(135deg); }

/*add20200728*/
.pc_hidden { display: none; }
@media screen and (max-width: 769px) { 
	.mod_pageNav02 { display: none; }
	.sp_hidden { display: none; }
/*	#mainImg {height:450px;}*/
	#mainImg {height:150px;}
	#mainImg2 {height:130px;}
/*	#mainImgIn {height:450px;}*/
	#mainImgIn {height:150px;}
	#mainImgIn2 {height:130px;}
	.mfont {font-size:130%;}
	.pc_hidden { display: block; }
}
/*/add20200728*/

@media screen and (max-width: 480px) { 
	#mainImg {height:450px;}
	#mainImgIn {height:450px;}
	#mainImg2 {height:150px;}
	#mainImgIn2 {height:150px;}
}
	
@media screen and (min-width: 769px) { 
	.mod_pageNav02 { margin: 25px 0; }  
.mod_pageNav02 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }  
.mod_pageNav02 ul > li { margin: 0; -ms-flex-preferred-size: 170px; flex-basis: 170px; }  
.mod_pageNav02 ul > li a { z-index: 2; min-height: 45px; line-height: 1.4; overflow: hidden; /*padding: 14px 30px;*/ font-size: 14px; -webkit-transition: all .4s ease; transition: all .4s ease; }  .mod_pageNav02 ul > li a span { position: relative; z-index: 4; }  
.mod_pageNav02 ul > li a:before { z-index: 3; -webkit-transition: all .4s ease; transition: all .4s ease; }  
.mod_pageNav02 ul > li a:after { position: absolute; top: -100%; left: 0; z-index: 1; width: 100%; height: 100%; background: #3b4c18; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  
.mod_pageNav02 ul > li a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  
.mod_pageNav02 ul > li a:hover:after { top: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  


.mod_pageNav022 { margin: 25px 0; }  
.mod_pageNav022 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }  
/*.mod_pageNav022 ul > li { margin: 0; -ms-flex-preferred-size: 340px; flex-basis: 340px; }  */
.mod_pageNav022 ul > li { margin: 0; -ms-flex-preferred-size: 200px; flex-basis: 200px; }  
.mod_pageNav022 ul > li a { z-index: 2; min-height: 45px; line-height: 1.4; overflow: hidden; /*padding: 14px 30px;*/ font-size: 14px; -webkit-transition: all .4s ease; transition: all .4s ease; }  .mod_pageNav022 ul > li a span { position: relative; z-index: 4; }  
.mod_pageNav022 ul > li a:before { z-index: 3; -webkit-transition: all .4s ease; transition: all .4s ease; }  
.mod_pageNav022 ul > li a:after { position: absolute; top: -100%; left: 0; z-index: 1; width: 100%; height: 100%; background: #3b4c18; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  
.mod_pageNav022 ul > li a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  
.mod_pageNav022 ul > li a:hover:after { top: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  


}

 /*!  mod_box02
================================================ */
 
/*! mod-box
---------------------------------------- */
/*! mod_box01 */
.mod_box01 { margin: 20px 0 30px; }
.mod_box01 .imgR , .mod_box01 .imgL { margin: 0 0 16px; }
.mod_box01 .txt { margin: 20px 0; }
.mod_box01 p { line-height: 1.6; font-size: 14px; }
.mod_box01 p + p { margin: 10px 0 0; }
@media screen and (min-width: 769px) { .mod_box01 { overflow: hidden; margin: 40px 0 60px; }  .mod_box01 p { font-size: 16px; }  .mod_box01 p + p { margin: 20px 0 0; }  .mod_box01 .imgR , .mod_box01 .imgL { margin: 0; }  .mod_box01 .imgR { float: right; width: 480px; margin: 0; }  .mod_box01 .imgR img { width: 100%; }  .mod_box01 .txt { float: none; margin: 40px 0; }  .mod_box01 .txtL { float: left; width: 510px; }  .mod_box01 .imgL { float: left; width: 480px; }  .mod_box01 .imgL img { width: 100%; }  .mod_box01 .txtR { float: right; width: 510px; } }
/*! -------------------- */
/*! mod_table
---------------------------------------- */
/*! mod_table01 */
.mod_table01 { width: 100%; line-height: 1.6; border: 1px solid #e4e4e4; font-size: 14px; border-collapse: separate; border-spacing: 1px; }
.mod_table01 th , .mod_table01 td { display: block; box-sizing: border-box; padding: 12px 14px; text-align: left; }
.mod_table01 th { background: #d8e3c0; color: #4f6129; font-weight: bold; }
@media screen and (min-width: 769px) { .mod_table01 { display: table; border: none; border-top: 1px solid #e4e4e4; font-size: 16px; border-collapse: collapse; }  .mod_table01 th , .mod_table01 td { display: table-cell; padding: 17px 30px; border-bottom: 1px solid #e4e4e4; vertical-align: top; }  .mod_table01 th { width: 280px; background: #f0f6e0; } }
/*! mod_table02 */
.mod_table02 { width: 100%; }
.mod_table02 th , .mod_table02 td { display: block; box-sizing: border-box; text-align: left; }
.mod_table02 th { position: relative; padding: 0 0 4px; border-bottom: 1px solid #e4e4e4; font-weight: normal; }
.mod_table02 th span { position: relative; line-height: 1.4; padding: 0 0 0 10px; border-left: 5px solid #83942e; }
.mod_table02 td { padding: 10px 0 20px; }
@media screen and (min-width: 769px) { .mod_table02 { border-top: 1px solid #e4e4e4; }  .mod_table02 th , .mod_table02 td { display: table-cell; line-height: 1.6; padding: 17px 30px; border-bottom: 1px solid #e4e4e4; font-size: 16px; vertical-align: top; }  .mod_table02 th { width: 280px; background: #f0f6e0; color: #4f6129; font-weight: bold; }  .mod_table02 th span { line-height: 1.6; padding: 0; border: 0; } }
/*
#styleguide
mod_box01

画像・テキストのclassのLR指定で左右逆パターンにできます。
floatがない場合はdiv class="txt"で余白付きテキストブロックが作れます。

```
<div class="mod_box01">
	<div class="imgR">
		<img src="https://placehold.jp/650x401.png" alt="">
	</div>
	<div class="txtL">
		<h4 class="mod_tit02"><span>タイトル②</span></h4>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>
```
```
<div class="mod_box01">
	<div class="imgL">
		<img src="https://placehold.jp/650x401.png" alt="">
	</div>
	<div class="txtR">
		<h4 class="mod_tit02"><span>タイトル②</span></h4>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト<br>
		テキストテキストテキストテキストテキストテキストテキストテキスト</p>
		<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
</div>
```
*/
/*
#styleguide
mod_table01

通常のテーブルです。

```
<table class="mod_table01">
	<tr>
		<th>設立</th>
		<td>昭和22年2月</td>
	</tr>
	<tr>
		<th>代表者</th>
		<td>代表取締役　井原 正登</td>
	</tr>
	<tr>
		<th>資本金</th>
		<td>3,000万円</td>
	</tr>
	<tr>
		<th>従業員数</th>
		<td>40名</td>
	</tr>
	<tr>
		<th>事業内容</th>
		<td>
			<ol class="mod_ol01">
				<li>医薬品の製造及び販売</li>
				<li>医薬部外品の製造及び販売</li>
				<li>直営店舗の経営</li>
			</ol>
		</td>
	</tr>
	<tr>
		<th>本社所在地</th>
		<td>〒399-6201<br>
		長野県木曽郡王滝村211-6</td>
	</tr>
	<tr>
		<th>電話・FAX</th>
		<td>TEL：0264-36-3311<br>
		FAX：0264-36-3366</td>
	</tr>
</table>
```
*/
/*
#styleguide
mod_table02

SP表示時に表ではなくなるテーブルです。

```
<table class="mod_table02">
	<tr>
		<th><span>所在地</span></th>
		<td>〒397-0201 長野県木曽郡王滝村211-6</td>
	</tr>
	<tr>
		<th><span>電話番号</span></th>
		<td>0264-46-3132<br class="viewSp">
		<a href="#" class="btnCmn03 viewSp">タップするとお電話が掛けられます</a>
		</td>
	</tr>
	<tr>
		<th><span>FAX番号</span></th>
		<td>0264-46-3132</td>
	</tr>
	<tr>
		<th><span>営業時間</span></th>
		<td>8:00～17:00</td>
	</tr>
	<tr>
		<th><span>定休日</span></th>
		<td>毎週木曜日（1月・7月・8月は無休）</td>
	</tr>
</table>
```
*/
/*!  tit
================================================ */
/*! mod_tit
---------------------------------------- */
/*! mod_tit01 */
.mod_tit01 { position: relative; line-height: 1.3; margin: 0 0 20px; padding: 0 0 12px; font-weight: normal; font-size: 22px; text-align: center; }
.mod_tit01:before { position: absolute; bottom: 0; left: 50%; width: 50px; height: 3px; margin-left: -25px; background: #83942e; content: ""; }
@media screen and (min-width: 769px) { .mod_tit01 { line-height: 1.7; margin: 0 0 40px; padding: 0 0 15px; font-size: 30px; }  .mod_tit01:before { width: 80px; height: 4px; margin-left: -40px; } }
/*! mod_tit02 */
.mod_tit02 { line-height: 1.6; margin: 0 0 12px; color: #4f6129; font-weight: normal; font-size: 18px; }
@media screen and (min-width: 769px) { .mod_tit02 { line-height: 1.45; margin: 0 0 24px; font-size: 24px; } }
/*! mod_tit03 */
.mod_tit03 { position: relative; margin: 0 0 20px; color: #4f6129; font-weight: normal; font-size: 20px; text-align: center; }
.mod_tit03.mrl-25 { margin: 0 -25px 20px; }
.mod_tit03 + .mod_box01 { margin-top: -4px; }
.mod_tit03:before { display: block; position: absolute; top: 50%; width: 100%; height: 1px; border-top: solid 1px #83942e; content: ""; }
.mod_tit03 span { display: inline-block; position: relative; z-index: 1; padding: 0 10px; background: #fff; }
@media screen and (min-width: 769px) { .mod_tit03 { line-height: 1.4; margin: 0 0 36px; font-size: 26px; }  .mod_tit03.mrl-25 { margin: 0 0 36px; }  .mod_tit03 + .mod_box01 { margin-top: 0; }  .mod_tit03 span { padding: 0 20px; } }
/*! mod_tit04 */
.mod_tit04 { margin: 0 0 15px; padding: 14px 25px; border-bottom: 2px solid #83942e; background: #d8e3c0; color: #333; font-weight: normal; font-size: 19px; }
.mod_tit04 span { display: block; position: relative; line-height: 1.4; padding: 0 0 0 19px; }
.mod_tit04 span:before { position: absolute; left: 0; width: 7px; height: 100%; background: #fff; content: ""; }
@media screen and (min-width: 769px) { .mod_tit04 { margin: 40px 0 30px; padding: 12px 10px; font-size: 20px; }  .mod_tit04 span { line-height: 1.6; }  .mod_tit04 span:before { width: 6px; } }
/*! mod_tit05 */
.mod_tit05 { line-height: 1.5; margin: 0 0 15px; color: #436201; font-weight: bold; font-size: 19px; }
@media screen and (min-width: 769px) { .mod_tit05 { margin: 0 0 14px; font-size: 18px; } }
/*! -------------------- */
/*! mod_titimg
---------------------------------------- */
/*! mod_titImg01 */
.mod_titImg01 { margin: 0 -25px 36px; padding: 5px 0 32px; background: url(/img/common/bg_titimg01_sp.png) center bottom/768px 2px no-repeat; text-align: center; }
.mod_titImg01 img { width: auto !important; max-width: 100%; }
@media screen and (min-width: 769px) { .mod_titImg01 { margin: 0 0 80px; padding: 0 0 44px; background: url(/img/common/bg_titimg01_pc.png) center bottom/auto no-repeat; } }
/*
#styleguide
mod_tit01

タイトルパターン①

```
<h2 class="mod_tit01">タイトル①</h2>
```
*/
/*
#styleguide
mod_tit02

タイトルパターン②

```
<h3 class="mod_tit02">タイトル②</h3>
```
*/
/*
#styleguide
mod_tit03

タイトルパターン③
.mrl-25クラスを付加することでSP表示時に画面幅いっぱいになります

```
<h4 class="mod_tit03"><span>タイトル③</span></h4>
```
*/
/*
#styleguide
mod_tit04

タイトルパターン④

```
<h5 class="mod_tit04"><span>タイトル④</span></h5>
```
*/
/*
#styleguide
mod_tit05

タイトルパターン⑤

```
<h6 class="mod_tit05">タイトル⑤</h6>
```
*/
/*
#styleguide
mod_titImg01

画像明朝テキスト用⑤

```
<h2 class="mod_titImg01"><img src="/img/medicine/about/tit_about01_sp.svg" alt="自然の恵み「生薬」で作られた、化学合成をしない薬です。"></h2>
```
*/
/*! button
================================================ */
/*! btnCmn
---------------------------------------- */
/*! btnCmn01, btnCmn02 */
.btnCmn01 , .btnCmn02 { display: inline-block; position: relative; box-sizing: border-box; width: 100%; min-height: 50px; line-height: 1.5; padding: 13px 17px; font-size: 16px; text-decoration: none; text-align: center; }
.btnCmn01 { z-index: 2; border: 1px solid #436201; color: #436201; -webkit-transition: all .4s easeInOut; transition: all .4s easeInOut; }
.btnCmn01:before { position: absolute; top: 50%; right: 14px; z-index: 3; width: 10px; height: 10px; margin-top: -5px; border-top: 1px solid #4f6129; border-right: 1px solid #4f6129; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.btnCmn02 { background: #4f6129; color: #fff; }
.btnCmn02:before { position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; margin-top: -10px; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
@media screen and (min-width: 769px) { .btnCmn01 , .btnCmn02 { position: relative; z-index: 2; box-sizing: border-box; width: 350px; min-height: 55px; line-height: 1.4; overflow: hidden; padding: 14px 30px; font-size: 18px; text-align: center; -webkit-transition: all .4s ease; transition: all .4s ease; }  .btnCmn01 span , .btnCmn02 span { position: relative; z-index: 4; }  .btnCmn01:hover , .btnCmn02:hover { color: #fff; }  .btnCmn01:before , .btnCmn02:before { z-index: 3; -webkit-transition: all .4s ease; transition: all .4s ease; }  .btnCmn01:after , .btnCmn02:after { position: absolute; top: 0; left: -100%; z-index: 1; width: 100%; height: 100%; background: #9eb270; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .btnCmn01:hover:before , .btnCmn02:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  .btnCmn01:hover:after , .btnCmn02:hover:after { left: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .btnCmn01:before { right: 15px; }  .btnCmn02:after { background: #3b4c18; } }
/*! btnCmn03 */
.btnCmn03 { display: inline-block; width: 100%; padding: 11px 0; border-radius: 26px; background: #eba40b; color: #fff; font-size: 17px; text-decoration: none; text-align: center; }
/*
#styleguide
mod_button①

ボタンリンク①

```
<a href="#" class="btnCmn01"><span>ボタンリンク①</span></a>
```
*/
/*
#styleguide
mod_button②

ボタンリンク②

```
<a href="#" class="btnCmn02"><span>ボタンリンク②</span></a>
```
*/
/*! link
================================================ */
/*! mod_link
---------------------------------------- */
/*! mod_link01, mod_link02 */
.mod_link01 , .mod_link02 { display: inline-block; position: relative; padding: 0 0 0 22px; color: #333; vertical-align: baseline; }
.mod_link01:before , .mod_link02:before { display: inline-block; position: absolute; top: 4px; left: 0; height: 1em; line-height: 1.0; overflow-y: hidden; margin: 0 4px 0 0; color: #83942e; font-family: hinoseiyaku !important; text-decoration: none; vertical-align: baseline; content: "\e907"; }
/*! mod_link01 */
.mod_link01 { margin: 20px 0; font-size: 16px; }
/*! mod_link02 */
.mod_link02 { display: inline; margin: 0 3px; font-size: 14px; vertical-align: baseline; }
.mod_link02:before { left: 2px; vertical-align: baseline; }
@media screen and (min-width: 769px) { .mod_link01 , .mod_link02 { font-size: 16px; }  .mod_link01:before , .mod_link02:before { -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_link01:hover:before , .mod_link02:hover:before { left: 2px; }  .mod_link01 { margin: 40px 0; }  .mod_link02 { margin: 0 5px; }  .mod_link02:before { left: 0; } }
/*! 外部リンク */
.external:after { display: inline-block; height: 1em; line-height: 1.0; overflow-y: hidden; margin: -4px 0 0; padding-left: 5px; color: #83942e; font-family: hinoseiyaku !important; font-size: 12px; text-decoration: none; vertical-align: baseline; content: "\e909"; }
/*
#styleguide
mod_link

リンク①
.extarnal付加で外部リンクアイコンが付きます。

```
<a href="#" class="mod_link01">テキストリンク①</a>
<br>
<a href="#" class="mod_link01 external">テキストリンク①</a>
```
*/
/*
#styleguide
mod_link

テキスト内リンク②
.extarnal付加で外部リンクアイコンが付きます。

```
<p style="line-height:1.6;">テキストテキストテキストテキスト<a href="#" class="mod_link02">テキストリンク②</a>テキストテキストテキストテキストテキストテキスト</p>
<br>
<p style="line-height:1.6;">テキストテキストテキストテキスト<a href="#" class="mod_link02 external">テキストリンク②</a>テキストテキストテキストテキストテキストテキスト</p>
```
*/
/*! link
================================================ */
/*! mod_list
---------------------------------------- */
/*! ul List
------------------------------ */
/*! mod_ulList01, mod_ulList02 */
.mod_ulList01 , .mod_ulList02 { margin: 15px 0; }
.mod_ulList01 > li , .mod_ulList02 > li { position: relative; line-height: 1.6; margin: 0 0 10px; padding: 0 0 0 14px; font-size: 14px; }
.mod_ulList01 > li:before , .mod_ulList02 > li:before { display: inline-block; position: absolute; top: 6px; left: 0; width: 9px; height: 9px; border-radius: 4.5px; background: #4f6129; content: ""; }
@media screen and (min-width: 769px) { .mod_ulList01 > li , .mod_ulList02 > li { margin: 0 0 8px; padding: 0 0 0 16px; font-size: 16px; }  .mod_ulList01 > li:before , .mod_ulList02 > li:before { top: 7px; width: 10px; height: 10px; border-radius: 5px; } }
/*! mod_ulList02 */
.mod_ulList02 > li { margin: 0; }
/*! -------------------- */
/*! ol List
------------------------------ */
.mod_olList01 { margin: 15px 0; counter-reset: olList01; }
.mod_olList01 > li { position: relative; line-height: 1.6; padding: 0 0 0 2em; font-size: 14px; }
.mod_olList01 > li:before { display: inline-block; position: absolute; top: 0; left: 0; width: 1.6em; color: #83942e; text-align: right; content: counter(olList01) "."; counter-increment: olList01; }
@media screen and (min-width: 769px) { .mod_olList01 > li { font-size: 16px; } }
/*
#styleguide
mod_ulList01

アイコン付き箇条書きリスト①
（リスト同士にマージンがあります）

```
<ul class="mod_ulList01">
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
</ul>
```
*/
/*
#styleguide
mod_ulList02

アイコン付き箇条書きリスト②
（リスト同士のマージンなし）

```
<ul class="mod_ulList02">
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
</ul>
```
*/
/*
#styleguide
mod_olList01

自動カウントナンバリングリスト。2桁まではOK。
（リスト同士のマージンなし）

```
<ol class="mod_olList01">
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</li>
	<li>テキストテキストテキストテキストテキストテキスト</li>
</ol>
```
*/
/*!  pager
================================================ */
/*! mod_pagination01
---------------------------------------- */
.mod_pagination01 { display: block; margin: 40px 0; }
.mod_pagination01 ul { margin-bottom: -10px; text-align: center; letter-spacing: -.5em; }
.mod_pagination01 ul li { display: inline-block; min-width: 33px; height: 33px; line-height: 33px; margin: 0 5px 10px; font-size: 15px; letter-spacing: 0; }
.mod_pagination01 ul li.current { border: none; background: #4f6129; color: #fff; }
.mod_pagination01 ul li.prev { margin: 0 7px 10px 0; }
.mod_pagination01 ul li.next { margin: 0 0 10px 7px; }
.mod_pagination01 ul li.prev , .mod_pagination01 ul li.next { width: 33px; overflow: hidden; text-indent: 100%; white-space: nowrap; }
.mod_pagination01 ul li a { display: block; position: relative; z-index: 1; box-sizing: border-box; height: 33px; line-height: 31px; overflow: hidden; padding: 0 5px; border: 1px solid #e4e4e4; color: #4f6129; text-decoration: none; }
.mod_pagination01 ul li.prev a:before , .mod_pagination01 ul li.next a:before { position: absolute; top: 0; right: 0; bottom: 0; left: -6px; z-index: 3; width: 12px; height: 12px; margin: auto; border-top: 1px solid #4f6129; border-right: 1px solid #4f6129; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mod_pagination01 ul li.prev a:before { right: -6px; left: 0; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
@media screen and (min-width: 769px) { .mod_pagination01 { margin: 0 auto; }  .mod_pagination01 ul { margin: 0; }  .mod_pagination01 ul li { min-width: 30px; height: 30px; line-height: 30px; margin: 0 5px 0 0; font-size: 16px; }  .mod_pagination01 ul li.current { line-height: 32px; }  .mod_pagination01 ul li.prev , .mod_pagination01 ul li.next { width: 30px; }  .mod_pagination01 ul li.prev { margin: 0 10px 0 0; }  .mod_pagination01 ul li.next { margin: 0 0 0 5px; }  .mod_pagination01 ul li a { position: relative; height: 30px; padding: 0 3px; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination01 ul li a:hover { border: 1px solid #9eb270; color: #fff; }  .mod_pagination01 ul li a:after { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: #9eb270; opacity: 0; content: ""; -webkit-transition: all .2s ease; transition: all .2s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .mod_pagination01 ul li a:hover:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .mod_pagination01 ul li a span { position: relative; z-index: 3; }  .mod_pagination01 ul li.prev a:before , .mod_pagination01 ul li.next a:before { right: -5px; left: 0; width: 8px; height: 8px; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination01 ul li.next a:before { right: 0; left: -5px; }  .mod_pagination01 ul li.prev a:hover:before , .mod_pagination01 ul li.next a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } }
/*! mod_pagination02
---------------------------------------- */
nav.mod_pagination02 { margin: 0 0 40px; padding: 10px 0 0; border-top: 1px solid #e4e4e4; }
nav.mod_pagination02 ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
nav.mod_pagination02 ul li { position: relative; line-height: 1.0; padding: 0 20px 0 0; font-size: 16px; }
nav.mod_pagination02 ul li.prev { padding: 0 0 0 20px; }
nav.mod_pagination02 ul li:before { display: inline-block; position: absolute; top: 1px; right: 0; color: #83942e; font-family: hinoseiyaku !important; vertical-align: middle; content: "\e907"; }
nav.mod_pagination02 ul li.prev:before { right: auto; left: 0; content: "\e908"; }
@media screen and (min-width: 769px) { nav.mod_pagination02 { margin: 0 0 80px; padding: 30px 0 0; }  nav.mod_pagination02 ul li { position: relative; padding: 0 22px 0 0; }  nav.mod_pagination02 ul li.prev { padding: 0 0 0 22px; }  nav.mod_pagination02 ul li:before { right: 3px; font-size: 14px; content: "\e907"; -webkit-transition: all .2s ease; transition: all .2s ease; }  nav.mod_pagination02 ul li.prev:before { right: auto; left: 3px; }  nav.mod_pagination02 ul li:hover:before { right: 0; }  nav.mod_pagination02 ul li.prev:hover:before { right: auto; left: 0; } }
/*! mod_pagination03
---------------------------------------- */
.mod_pagination03 { display: block; margin: 25px 0 30px; }
.mod_pagination03 ul { text-align: center; letter-spacing: -.5em; }
.mod_pagination03 ul li { display: inline-block; width: 36px; height: 40px; line-height: 40px; overflow: hidden; margin: 0 3px; font-size: 13px; letter-spacing: 0; }
.mod_pagination03 ul li.current { width: auto; margin: 0 10px; }
.mod_pagination03 ul li.prev { float: left; margin: 0 6px 0 0; }
.mod_pagination03 ul li.next { float: right; margin: 0 0 0 6px; }
.mod_pagination03 ul li.prev , .mod_pagination03 ul li.next { overflow: hidden; background: #4f6129; text-indent: 100%; white-space: nowrap; }
.mod_pagination03 ul li a { display: block; position: relative; z-index: 1; box-sizing: border-box; height: 40px; line-height: 40px; overflow: hidden; padding: 0; border: 1px solid #4f6129; text-decoration: none; }
.mod_pagination03 ul li.prev a:before , .mod_pagination03 ul li.next a:before { position: absolute; top: 0; right: 0; bottom: 0; left: -4px; z-index: 3; width: 8px; height: 8px; margin: auto; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mod_pagination03 ul li.prev a:before { right: -4px; left: 0; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
@media screen and (min-width: 769px) { .mod_pagination03 { margin: 0 auto; }  .mod_pagination03 ul li { line-height: 40px; overflow: hidden; margin: 0 5px; font-size: 16px; }  .mod_pagination03 ul li.current { line-height: 42px; }  .mod_pagination03 ul li.prev , .mod_pagination03 ul li.next { width: 40px; }  .mod_pagination03 ul li.prev { margin: 0 20px 0 0; }  .mod_pagination03 ul li.next { margin: 0 0 0 20px; }  .mod_pagination03 ul li a { position: relative; box-sizing: border-box; width: 36px; height: 40px; padding: 0 5px; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination03 ul li a:hover { color: #fff; }  .mod_pagination03 ul li a:after { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background: #9eb270; opacity: 0; content: ""; -webkit-transition: all .2s ease; transition: all .2s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  .mod_pagination03 ul li a:hover:after { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  .mod_pagination03 ul li a span { position: relative; z-index: 3; }  .mod_pagination03 ul li.prev a , .mod_pagination03 ul li.next a { width: 40px; padding: 0; border: none; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination03 ul li.prev a:after , .mod_pagination03 ul li.next a:after { background: #3b4c18; }  .mod_pagination03 ul li.prev a:before , .mod_pagination03 ul li.next a:before { right: -5px; left: 0; width: 8px; height: 8px; -webkit-transition: all .2s ease; transition: all .2s ease; }  .mod_pagination03 ul li.next a:before { right: 0; left: -5px; }  .mod_pagination03 ul li.prev a:hover:before , .mod_pagination03 ul li.next a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } }
/*! mod_pagination04
---------------------------------------- */
nav.mod_pagination04 { margin: -20px 0 25px; }
nav.mod_pagination04 ul { overflow: hidden; }
nav.mod_pagination04 ul li { border: 1px solid #4f6129; text-align: center; }
nav.mod_pagination04 ul li + li { margin: -1px 0 0; }
nav.mod_pagination04 ul li a { display: block; position: relative; line-height: 1.6; padding: 12px 0; color: #4f6129; font-size: 16px; text-decoration: none; }
nav.mod_pagination04 ul li a:before { position: absolute; top: 50%; right: 14px; width: 13px; height: 13px; margin-top: -7px; border-top: 1px solid #4f6129; border-right: 1px solid #4f6129; content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
nav.mod_pagination04 ul li.prev a:before { right: auto; left: 14px; -webkit-transform: rotate(225deg); transform: rotate(225deg); }
@media screen and (min-width: 769px) { nav.mod_pagination04 { margin: 0 0 60px; }  nav.mod_pagination04 ul li { float: right; width: 320px; }  nav.mod_pagination04 ul li + li { margin: 0; }  nav.mod_pagination04 ul li a { overflow: hidden; padding: 12px 0 13px; font-size: 18px; -webkit-transition: all .4s ease; transition: all .4s ease; }  nav.mod_pagination04 ul li a span { position: relative; z-index: 4; }  nav.mod_pagination04 ul li a:hover { color: #fff; }  nav.mod_pagination04 ul li a:before { right: 14px; z-index: 3; width: 11px; height: 11px; margin-top: -6px; -webkit-transition: all .4s ease; transition: all .4s ease; }  nav.mod_pagination04 ul li a:after { position: absolute; top: 0; left: -100%; z-index: 1; width: 100%; height: 100%; background: #9eb270; opacity: 0; content: ""; -webkit-transition: all .4s ease; transition: all .4s ease; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }  nav.mod_pagination04 ul li a:hover:before { border-top: 1px solid #fff; border-right: 1px solid #fff; }  nav.mod_pagination04 ul li a:hover:after { left: 0; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }  nav.mod_pagination04 ul li.prev { float: left; }  nav.mod_pagination04 ul li.prev:before { right: auto; left: 14px; } }
/*
#styleguide
mod_pagination01

pager

```
<nav class="mod_pagination01">
	<ul>
		<li class="prev"><a href="">PREV</a></li>
		<li><a href=""><span>1</span></a></li>
		<li class="current">2</li>
		<li><a href=""><span>3</span></a></li>
		<li class="next"><a href="">NEXT</a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
mod_pagination02

pager （前の記事・次の記事）

```
<nav class="mod_pagination02">
	<ul>
		<li class="prev"><a href="">前の記事へ</a></li>
		<li class="next"><a href="">次の記事へ</a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
mod_pagination03

ブログ用pager

```
<nav class="mod_pagination03">
	<ul>
		<li class="prev"><a href="">PREV</a></li>
		<li><a href=""><span>1</span></a></li>
		<li class="current">2</li>
		<li><a href=""><span>3</span></a></li>
		<li><a href=""><span>4</span></a></li>
		<li><a href=""><span>5</span></a></li>
		<li class="next"><a href="">NEXT</a></li>
	</ul>
</nav>
```
*/
/*
#styleguide
mod_pagination04

コーポレートサイト・カテゴリ内誘導リンク

```
<nav class="mod_pagination04">
	<ul>
		<li class="prev"><a href=""><span>生薬製剤とは</span></a></li>
		<li class="next"><a href=""><span>百草について</span></a></li>
	</ul>
</nav>
```
*/

/*# sourceMappingURL=maps/modules.css.map */



/* ---------------------------------------- 
MT記事内商品リンクボタン
---------------------------------------- */

.products-link .inline-block {
  list-style-type: none;
  text-align: center;       /* inline-block を中央寄せ */
  font-size: 0;             /* for ギャップ削除 */
}
.products-link .inline-block li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;          /* for ギャップ削除 */
  padding:15px;
}
.products-link .inline-block li a span {
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    padding: 9px 18px 8px 28px;
    color: #fff;
    background-color: #4f6129;
    border-radius: 8px;
    border: solid 1px #fff;
}
.products-link a {
    text-decoration: none;
}
.products-link .inline-block li a:hover span {
    background-color: #83942e;
}