@charset "utf-8";
/* CSS Document */
/*=============================================================
 04_modules, Diagnocine
=============================================================*/
.fn-container {
  overflow: auto;
}

/*!  tit
================================================ */
.mod_inner01 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: 15px;
  padding-left: 15px;
}

@media all and (min-width: 600px) {
  .mod_inner01 {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }
}
/*
#styleguide
mod_inner01

SP：両端の余白paddingで15px
PC：1200pxでセンタリング
```
<section id="hoge">
	<div class="hogeIn mod_inner01">
		<h2 class="tit mod_tit01">What is Lorem Ipsum?</h2>
		<p class="txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
	</div>
</section>
<!-- /#hoge -->
```
*/
/*!  button
================================================ */
.mod_btns01Wrap {
  margin-left: -9px;
}

@media all and (min-width: 600px) {
  .mod_btns01Wrap {
    margin-left: 0;
    padding: 29px 27px 8px;
    border: 1px solid #dcdcdc;
  }

  .mod_btns01Wrap.is_noBrdr {
    border: 0;
  }
}
.mod_btns01 {
  overflow: hidden;
}

.mod_btns01 .item {
  float: left;
  margin: 0 0 20px 9px;
}

.mod_btns01 .item a {
  display: block;
  line-height: 1.23;
  padding: 8px 17px;
  border: 2px solid #1681ad;
  border-radius: 25px;
  color: #1681ad;
  font-weight: normal;
  font-size: 1.3rem;
  text-align: center;
}

@media all and (min-width: 600px) {
  .mod_btns01 .item {
    margin: 0 0 10px 10px;
  }

  .mod_btns01 .item a {
    line-height: 1.38;
    padding: 7px 20px;
    border-radius: 30px;
    font-size: 1.6rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btns01 .item a:hover {
    background: #1681ad;
    color: #fff;
  }
}
/*  .c-btn01
================================================== */
.c-btn01 {
  width: 220px;
  max-width: 100%;
  margin: 20px auto 0;
}
.c-btn01__link {
  display: block;
  line-height: 1.23;
  padding: 8px 17px;
  border: 2px solid #1681ad;
  border-radius: 25px;
  color: #1681ad;
  font-weight: normal;
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
}
.c-btn01__wrap {
  padding: 27px 10px 33px;
  border-top: 2px solid #dcdcdc;
}
.c-btn01__wrap .c-btn01 {
  margin-top: 0;
}
@media all and (min-width: 600px) {
  .c-btn01 {
    width: 290px;
    margin: 33px auto 0;
  }
  .c-btn01__link {
    line-height: 1.38;
    padding: 11px 10px;
    font-size: 1.8rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .c-btn01__link:hover {
    background: #1681ad;
    color: #fff;
  }
  .c-btn01__wrap {
    padding: 30px 10px 45px;
    border-top: 1px solid #dcdcdc;
  }
}

/*
#styleguide
mod_btns01

mod_btns01

```
<div class="btnsWrap mod_btns01Wrap">
	<ul class="btns mod_btns01">
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCRPCRPCRPCRPCRPCRPCRPCR</a></li>
	</ul>
</div>
外枠のグレーボーダーが不要の場合は mod_btns01Wrapに is_noBrdrをつける
<div class="btnsWrap mod_btns01Wrap is_noBrdr">
	<ul class="btns mod_btns01">
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCR</a></li>
		<li class="item"><a href="#">PCRPCRPCRPCRPCRPCRPCRPCR</a></li>

	</ul>
</div>
```
*/
.mod_btn01 {
  width: 130px;
  margin: 0 auto;
}

.mod_btn01 a {
  display: block;
  line-height: 1.23;
  padding: 8px 17px;
  border: 2px solid #1681ad;
  border-radius: 25px;
  color: #1681ad;
  font-weight: normal;
  font-size: 1.3rem;
  text-align: center;
}

@media all and (min-width: 600px) {
  .mod_btn01 {
    width: 230px;
    height: 40px;
  }

  .mod_btn01 a {
    line-height: 1.38;
    padding: 7px 10px;
    font-size: 1.6rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btn01 a:hover {
    background: #1681ad;
    color: #fff;
  }
}
/*
#styleguide
mod_btn01

SP : witdh130px
PC : width230px

```
<p class="btn mod_btn01"><a href="#">DUMMY</a></p>
```
*/
.mod_btn02 {
  width: 220px;
  height: 40px;
  margin: 0 auto;
}

.mod_btn02 a {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  line-height: 1.23;
  padding: 8px 17px;
  border: 2px solid #82daf6;
  border-radius: 25px;
  background: #82daf6;
  color: #1681ad;
  font-weight: bold;
  font-size: 1.6rem;
  text-align: center;
}

@media all and (min-width: 600px) {
  .mod_btn02 {
    width: 290px;
    height: 45px;
  }

  .mod_btn02 a {
    line-height: 1.38;
    padding: 10px;
    font-size: 1.8rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btn02 a:hover {
    border-color: #1681ad;
    background: #fff;
  }
}
/*
#styleguide
mod_btn02


```
<p class="btn mod_btn01"><a href="#">CONTACT FORM</a></p>
```
*/
.mod_btns02Wrap {
  margin-top: 30px;
}

@media all and (min-width: 600px) {
  .mod_btns02Wrap {
    margin-top: 40px;
  }
}
.mod_btns02 {
  overflow: hidden;
  padding: 20px 0;
  background: #dff0f9;
}

.mod_btns02 .item {
  width: 225px;
  height: 35px;
  margin: 0 auto;
}

.mod_btns02 .item a {
  display: block;
  line-height: 1.23;
  padding: 8px 17px;
  border: 2px solid #1681ad;
  border-radius: 25px;
  background: #fff;
  color: #1681ad;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
}

.mod_btns02 .item + .item {
  margin: 15px auto 0;
}

@media all and (min-width: 600px) {
  .mod_btns02 {
    overflow: hidden;
    padding: 32px 80px;
  }

  .mod_btns02 .item {
    float: left;
    width: 360px;
    height: 45px;
    margin: 0;
  }

  .mod_btns02 .item a {
    line-height: 1.38;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 1.8rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btns02 .item a:hover {
    background: #1681ad;
    color: #fff;
  }

  .mod_btns02 .item + .item {
    margin: 0;
  }

  .mod_btns02 .item:nth-child(2n) {
    float: right;
  }
}
/*
#styleguide
mod_btns02

mod_btns02
コンテンツ下部にあります

```
<div class="mod_btns02Wrap">
	<ul class="btn mod_btns02">
		<li class="item"><a href="/seihin/xr/lifescience/products/">TOP OF PRODUCTS PAGE</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/technology/">TOP OF TECHNOLOGY PAGE</a></li>
	</ul>
</div>
```
*/
.mod_btns03 {
  margin-bottom: 15px;
}

.mod_btns03 .item a {
  display: block;
  position: relative;
  line-height: 1.36;
  padding: 11px 35px 11px 12px;
  border: 2px solid #dcdcdc;
  background: #f5f9fd;
  color: #1681ad;
  font-size: 1.4rem;
}

.mod_btns03 .item a:before {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: url(../img/common/ico_arrow04_blue.png) no-repeat;
  background-size: 100%;
  content: "";
}

.mod_btns03 .item span.is_noLink {
  display: block;
  position: relative;
  line-height: 1.36;
  padding: 11px 35px 11px 12px;
  border: 2px solid #dcdcdc;
  background: #f5f9fd;
  color: #1681ad;
  font-size: 1.4rem;
}

.mod_btns03 .item + .item {
  margin: 10px 0 0;
}

.mod_btns03Wrap {
  margin: 12px 0 20px;
  padding: 19px 14px 4px;
  border: 1px solid #dcdcdc;
}

.mod_btns03Wrap .mod_btns03 .item a {
  border-width: 1px;
}

.mod_btns03Wrap .mod_btns03 .item span.is_noLink {
  border-width: 1px;
}

@media all and (min-width: 600px) {
  .mod_btns03 {
    overflow: hidden;
    margin-bottom: 20px;
  }

  .mod_btns03Wrap {
    margin: 20px 0 40px;
    padding: 19px 17px 9px;
  }

  .mod_btns03Wrap.is_floatPrint {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .mod_btns03Wrap.is_floatPrint .mod_btns03 {
    float: left;
    width: 600px;
  }

  .mod_btns03Wrap.is_floatPrint .mod_print01 {
    float: right;
  }

  .mod_btns03 .item {
    float: left;
    width: 290px;
    margin: 0 10px 10px 0;
  }

  .mod_btns03 .item a {
    line-height: 1.4;
    padding: 14px 60px 13px 21px;
    border-width: 1px;
    font-size: 1.5rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btns03 .item a:before {
    right: 19px;
    width: 40px;
    height: 8px;
    margin-top: -4px;
  }

  .mod_btns03 .item a:hover {
    border-color: #1681ad;
    background: #1681ad;
    color: #fff;
  }

  .mod_btns03 .item a:hover:before {
    background-image: url(../img/common/ico_arrow04_white.png);
  }

  .mod_btns03 .item span.is_noLink {
    line-height: 1.4;
    padding: 14px 60px 13px 21px;
    border-width: 1px;
    font-size: 1.5rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btns03 .item + .item {
    margin: 0 10px 10px 0;
  }

  .mod_btns03 .item:nth-child(3n) {
    margin-right: 0;
  }

  .mod_btns03.is_5col .item {
    width: 232px;
    margin: 0 10px 0 0;
  }

  .mod_btns03.is_5col .item:nth-child(3n) {
    margin: 0 10px 0 0;
  }

  .mod_btns03.is_5col .item:nth-child(5n) {
    margin-right: 0;
  }
}
/*
#styleguide
mod_btns03

mod_btns03Wrap is_floatPrintでボタン群とプリントを囲うとプリントボタンの回り込みができます。

```
<ul class="mod_btns03">
	<li class="item"><a href="/seihin/xr/lifescience/technology/">TECHNOLOGY</a></li>
	<li class="item"><a href="/seihin/xr/lifescience/support/manual.html">MANUAL</a></li>
	<li class="item"><a href="/seihin/xr/lifescience/support/faq.html">FAQ</a></li>
	<li class="item"><a href="/seihin/xr/lifescience/support/msds.html">SDS</a></li>
</ul>

Wrapあり
<div class="mod_btns03Wrap">
	<ul class="btns01 mod_btns03">
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#pcr">PCR</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#realtime">Realtime PCR</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#cdna">cDNA synthesis kits</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#modifying">Modifying Enzyme</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#nucleic">Nucleic Acid Purification</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#cloning">Cloning &amp; Gene Analysis</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/msds.html#protein">Protein Research</a></li>
	</ul>
</div>

is_floatPrintあり
<div class="mod_btns03Wrap is_floatPrint">
	<ul class="mod_btns03">
		<li class="item"><a href="/seihin/xr/lifescience/technology/">TECHNOLOGY</a></li>
		<li class="item"><a href="/seihin/xr/lifescience/support/manual.html">MANUAL</a></li>
	</ul>
	<p class="mod_print01" onclick="window.print();">PRINT</p>
</div>

```
*/
.mod_print01 {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 88px;
  height: 35px;
  line-height: 1;
  margin-bottom: 25px;
  margin-left: auto;
  padding-top: 11px;
  color: #1681ad;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: right;
}

.mod_print01:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  background: url(../img/common/ico_print01_blue.png) no-repeat;
  background-size: 100%;
  content: "";
}

@media all and (min-width: 600px) {
  .mod_print01 {
    width: 111px;
    height: 44px;
    margin-bottom: 50px;
    padding-top: 14px;
    font-size: 1.7rem;
    cursor: pointer;
  }

  .mod_print01:before {
    width: 44px;
    height: 44px;
  }

  .mod_print01:hover:before {
    background-image: url(../img/common/ico_print01_white.png);
  }
}
/*
#styleguide
mod_print01

mod_btns03と一緒に使う

```
<ul class="mod_btns03">
	<li class="item"><a href="/seihin/xr/lifescience/technology/">TECHNOLOGY</a></li>
	<li class="item"><a href="/seihin/xr/lifescience/support/manual.html">MANUAL</a></li>
	<li class="item"><a href="/seihin/xr/lifescience/support/faq.html">FAQ</a></li>
</ul>
<p class="mod_print01" onclick="window.print();">PRINT</p>
```
*/
.mod_btns04 {
  margin-bottom: 15px;
}

.mod_btns04 .item a {
  display: block;
  position: relative;
  line-height: 1.36;
  padding: 11px 35px 11px 36px;
  border: 2px solid #dcdcdc;
  background: #f5f9fd;
  color: #1681ad;
  font-size: 1.4rem;
}

.mod_btns04 .item a:before {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 20px;
  height: 4px;
  margin-top: -2px;
  background: url(../img/common/ico_arrow04_blue.png) no-repeat;
  background-size: 100%;
  content: "";
}

.mod_btns04 .item a:after {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 18px;
  height: 20px;
  margin-top: -10px;
  background: url(../img/common/ico_pdf01.png) no-repeat;
  background-size: 100%;
  content: "";
}

.mod_btns04 .item span.is_noLink {
  display: block;
  position: relative;
  line-height: 1.36;
  padding: 11px 35px 11px 12px;
  border: 2px solid #dcdcdc;
  background: #f5f9fd;
  color: #1681ad;
  font-size: 1.4rem;
}

.mod_btns04 .item + .item {
  margin: 10px 0 0;
}

@media all and (min-width: 600px) {
  .mod_btns04 {
    overflow: hidden;
    margin-bottom: 20px;
  }

  .mod_btns04 .item {
    float: left;
    width: 290px;
    margin: 0 10px 10px 0;
  }

  .mod_btns04 .item a {
    line-height: 1.4;
    padding: 14px 60px 13px 51px;
    border-width: 1px;
    font-size: 1.5rem;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }

  .mod_btns04 .item a:before {
    right: 19px;
    width: 40px;
    height: 8px;
    margin-top: -4px;
  }

  .mod_btns04 .item a:after {
    left: 17px;
    width: 22px;
    height: 25px;
    margin-top: -12px;
  }

  .mod_btns04 .item a:hover {
    border-color: #1681ad;
    background: #1681ad;
    color: #fff;
  }

  .mod_btns04 .item a:hover:before {
    background-image: url(../img/common/ico_arrow04_white.png);
  }

  .mod_btns04 .item span.is_noLink {
    border-width: 1px;
  }

  .mod_btns04 .item + .item {
    margin: 0 10px 10px 0;
  }

  .mod_btns04 .item:nth-child(3n) {
    margin-right: 0;
  }

  .mod_btns04 .item:nth-child(3n+1) {
    clear: both;
  }
}
/*
#styleguide
mod_btns04

高さ揃えお忘れなく。$footer_codeに
<script src="/seihin/xr/lifescience/lib/jquery-match-height/jquery.matchHeight-min.js"></script>
<script>
	$('.js-match-height-list li').matchHeight();
</script>
```
<ul class="mod_btns04 js-match-height-list">
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
	<li class="item"><a href="#" target="_blank" rel="noopener noreferrer">Dummy Dummy </a></li>
</ul>
```
*/
/*!  pager
================================================ */
/*
#styleguide
mod_pagination01

pager

```
<div class="mod_pagination01">
	<ul class="links">
		<li class="prev"><a href="">前へ</a></li>
		<li><a href="">1</a></li>
		<li class="current"><span>2</span></li>
		<li><a href="">3</a></li>
		<li class="next"><a href="">次へ</a></li>
	</ul>
</div>
```
*/
/*!  tit
================================================ */
.mod_tit01 {
  line-height: 1.54;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: 2.6rem;
  text-align: center;
}

@media all and (min-width: 600px) {
  .mod_tit01 {
    line-height: 1.3;
    margin-bottom: 56px;
    font-size: 4.6rem;
  }
}
/*
#styleguide
mod_tit01

SP：26px、line-height40px、下部マージン15px
PC：46px、line-height60px、下部マージン56px

```
<h2 class="tit mod_tit01">TECHNOLOGY LIST</h2>
```
*/
.mod_tit02 {
  line-height: 1.16;
  margin-bottom: 20px;
  padding: 12px 15px;
  border-top: 2px solid #1681ad;
  border-bottom: 1px solid #dcdcdc;
  font-weight: bold;
  font-size: 1.9rem;
  text-transform: uppercase;
}
.mod_tit02 .is-normal {
  text-transform: none;
}

.mod_tit02.is_gray {
  border-top-color: #dcdcdc;
}

@media all and (min-width: 600px) {
  .mod_tit02 {
    margin-bottom: 30px;
    padding: 23px 0;
    border-top-width: 3px;
    font-size: 2.6rem;
  }
}
/*
#styleguide
mod_tit02 mod_tit02.is_gray


is_grayで上ボーダーがグレー
SP: margin-bottom: 20px;
PC: margin-bottom: 40px;
```
<h2 class="tit mod_tit02">DUMMY</h2>
<br><br>
<h2 class="tit mod_tit02 is_gray">DUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMYDUMMY-DUMMYDUMMYDUMMYDUMMYDUMMY</h2>
```
*/
.mod_tit03 {
  line-height: 1.2;
  margin-bottom: 10px;
  padding: 9px 13px;
  background: #238cb6;
  color: #fff;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_tit03 span {
  font-weight: normal;
  font-size: 1rem;
}

@media all and (min-width: 600px) {
  .mod_tit03 {
    margin-bottom: 25px;
    padding: 15px 20px;
    font-size: 2.2rem;
  }

  .mod_tit03 span {
    font-size: 1.6rem;
  }
}
/*
#styleguide
mod_tit03

SP：16px、下部マージン10px
PC：22px、下部マージン25px

```
<h2 class="tit mod_tit03">PCR</h2>
<h2 class="tit mod_tit03">PCR <span>span挟むと</span></h2>
```
*/
.mod_tit04 {
  line-height: 1.19;
  margin-bottom: 14px;
  padding: 8px 12px;
  border: 1px solid #dcdcdc;
  background: #f9f9f9;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_tit04 span {
  display: inline-block;
  margin-right: 6px;
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_tit04 {
    line-height: 1.56;
    margin-bottom: 30px;
    padding: 10px 15px;
    font-size: 1.8rem;
  }
}
/*
#styleguide
mod_tit04

SP：16px、下部マージン14px
PC：22px、下部マージン30px

```
<h3 class="mod_tit04"><span>Example 1.</span>Amplification of a GC-rich target</h3>
```
*/
/*!  txt
================================================ */
.mod_txt01 {
  line-height: 1.5;
  font-size: 1.4rem;
}

.mod_txt01 a {
  text-decoration: underline;
}

.mod_txt01.is_bold,
.mod_txt01 .is_bold {
  font-weight: bold;
}

.mod_txt01 + .mod_txt01 {
  margin-top: 10px;
}

@media all and (min-width: 600px) {
  .mod_txt01 {
    line-height: 1.56;
    font-size: 1.8rem;
  }

  .mod_txt01 a:hover {
    text-decoration: none;
  }

  .mod_txt01 + .mod_txt01 {
    margin-top: 24px;
  }
}
/*
#styleguide
mod_txt01

SP：14px
PC：18px
is_boldで太字

```
<p class="mod_txt01"><a href="#">In parallel with the study</a> of the activities of KOD DNA polymerase, neutralization antibodies for the polymerase and proofreading activities were developed (2). These antibodies can be applied to the "hot start PCR technology" using KOD DNA polymerase.</p>
<p class="mod_txt01"><span class="is_bold">In parallel with the study</span> of the activities of KOD DNA polymerase, neutralization antibodies for the polymerase and proofreading activities were developed (2). These antibodies can be applied to the "hot start PCR technology" using KOD DNA polymerase.</p>
<p class="mod_txt01 is_bold">The 3-D structure of DNA polymerase was characterized in 2003 (Fig. 5) (3). </p>
```
*/
.mod_txt02 {
  line-height: 1.4;
  font-size: 1.2rem;
}


.mod_txt02 a {
  text-decoration: underline;
}

.mod_txt02.is_bold,
.mod_txt02 .is_bold {
  font-weight: bold;
}

@media all and (min-width: 600px) {
  .mod_txt02 {
    line-height: 1.5;
    font-size: 1.4rem;
  }

  .mod_txt02 a:hover {
    text-decoration: none;
  }
}
/*
#styleguide
mod_txt02

SP：12px
PC：14px

```
<p class="mod_txt02"><a href="#">In parallel with the study</a> of the activities of KOD DNA polymerase, neutralization antibodies for the polymerase and proofreading activities were developed (2). <span class="is_bold">These antibodies can be applied</span> to the "hot start PCR technology" using KOD DNA polymerase.</p>
<p class="mod_txt02">The 3-D structure of DNA polymerase was characterized in 2003 (Fig. 5) (3). </p>
```
*/
/*!  list
================================================ */
.mod_list01 .item {
  overflow: hidden;
}

.mod_list01 .item .areaImg {
  float: left;
  width: 147px;
}

.mod_list01 .item .areaTxt {
  padding: 5px 0 0 162px;
}

.mod_list01 .item .areaTxt .txt {
  line-height: 1.19;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_list01 .item .areaTxt .txt span {
  color: #1681ad;
}

.mod_list01 .item + .item {
  margin: 25px 0 0;
}

@media all and (min-width: 600px) {
  .mod_list01 {
    line-height: 1.56;
    overflow: hidden;
    font-size: 1.8rem;
  }

  .mod_list01 .item {
    float: left;
    width: 293px;
  }

  .mod_list01 .item .areaImg {
    float: none;
    width: 100%;
  }

  .mod_list01 .item .areaTxt {
    padding: 0;
  }

  .mod_list01 .item .areaTxt .txt {
    line-height: 1.56;
    font-size: 1.8rem;
  }

  .mod_list01 .item + .item {
    margin: 0;
  }
}
/*
#styleguide
mod_list01

SP:デフォㇽトの画像幅は294px
PC:各itemの横幅にばらつきがあるので、横幅はitem01等をつけて都度指定。

```
<ul class="list01 mod_list01">
	<li class="item">
		<div class="areaImg">
			<div class="img"><img src="https://placehold.jp/294x200.png" alt=""></div>
		</div>
		<div class="areaTxt">
			<p class="txt"><span>Fig. 1.</span> Thermococcus kodakaraensis KOD1</p>
		</div>

	</li>
	<li class="item">
		<div class="areaImg">
			<div class="img"><img src="https://placehold.jp/294x200.png" alt=""></div>
		</div>
		<div class="areaTxt">
			<p class="txt"><span>Fig. 2.</span> Solfatara (Kodakara island, Japan)</p>
		</div>
	</li>
	<li class="item">
		<div class="areaImg">
			<div class="img"><img src="https://placehold.jp/294x200.png" alt=""></div>
		</div>
		<div class="areaTxt">
			<p class="txt"><span>Fig. 3.</span> Kodakara island (Kagoshima prefecture, Japan)</p>
		</div>
	</li>
</ul>
```
*/
.mod_listReferences01 {
  padding: 17px 20px 17px 14px;
  border: 1px solid #dcdcdc;
  background: #f9f9f9;
  counter-reset: num;
}

.mod_listReferences01 .item {
  position: relative;
  line-height: 1.36;
  padding: 0 0 0 25px;
  font-size: 1.4rem;
  counter-increment: num;
}

.mod_listReferences01 .item:before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  letter-spacing: 0;
  content: counter(num) ")";
}

.mod_listReferences01 .item + .item {
  margin: 5px 0 0;
}

@media all and (min-width: 600px) {
  .mod_listReferences01 {
    padding: 25px 30px;
  }

  .mod_listReferences01 .item {
    line-height: 1.71;
    padding: 0 0 0 16px;
  }

  .mod_listReferences01 .item:before {
    font-weight: normal;
  }

  .mod_listReferences01 .item + .item {
    margin: 0;
  }
}
/*
#styleguide
mod_listReferences01

```
<section id="references">
	<h3 class="tit mod_tit02 is_gray">REFERENCES</h3>
	<ul class="list mod_listReferences01">
		<li class="item">Takagi M, Nishioka M, Kakihara H, Kitabayashi M, Inoue H, Kawakami B, Oka M, and Imanaka T.,<br>Appl Environ Microbiol., 63: 4504-10 (1997)</li>
		<li class="item">Mizuguchi H, Nakatsuji M, Fujiwara S, Takagi M and Imanaka T, J Biochem., 126: 762-8 (1999)</li>
		<li class="item">Hashimoto H, Nishioka M, Fujiwara S, Takagi M, Imanaka T, Inoue T and Kai Y, J Mol Biol., 306: 469-77 (2001)</li>
	</ul>
</section>
<!-- /#references -->
```
*/
.mod_listReferences02 {
  padding: 0 14px;
  counter-reset: num;
}

.mod_listReferences02 .item {
  position: relative;
  line-height: 1.36;
  padding: 0 0 0 24px;
  font-size: 1.4rem;
  counter-increment: num;
}

.mod_listReferences02 .item:before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  letter-spacing: 0;
  content: counter(num) ")";
}

.mod_listReferences02 .item + .item {
  margin: 5px 0 0;
}

@media all and (min-width: 600px) {
  .mod_listReferences02 {
    padding: 0;
  }

  .mod_listReferences02 .item {
    line-height: 1.56;
    padding: 0 0 0 36px;
    font-size: 1.8rem;
  }

  .mod_listReferences02 .item + .item {
    margin: 15px 0 0;
  }
}
/*
#styleguide
mod_listReferences01

```
<ul class="list mod_listReferences02">
	<li class="item">M. Takagi, M. Nishioka, H. Kakihara, M. Kitabayashi, H. Inoue, B. Kawakami, M. Oka, and T. Imanaka, Characterization of DNA polymerase from Pyrococcus sp. strain KOD1 and its application to PCR. Appl Environ Microbiol., 63: 4504-10 (1997)</li>
	<li class="item">H. Hashimoto, M. Nishioka, S. Fujiwara, M. Takagi, T. Imanaka, T. Inoue and Y. Kai, Crystal structure of DNA polymerase from hyperthermophilic archaeon Pyrococcus kodakaraensis KOD1. J Mol Biol., 306: 469-77 (2001)</li>
	<li class="item">H. Mizuguchi, M. Nakatsuji, S. Fujiwara, M. Takagi and T. Imanaka, Characterization and application to hot start PCR of neutralizing monoclonal antibodies against KOD DNA polymerase. J Biochem., 126: 762-8 (1999)</li>
	<li class="item">S. Fujii, M. Akiyama, K. Aoki, Y. Sugaya, K. Higuchi, M. Hiraoka, Y. Miki, N. Saitoh, K. Yoshiyama,K. Ihara , M. Seki, E. Ohtsubo and H. Maki, DNA replication errors produced by the replicative apparatus of Escherichia coli. J. Mol. Biol., 289: 835-850 (1999)</li>
</ul>
```
*/
/*!  table
================================================ */
.mod_table01 {
  width: 890px;
  border: 1px solid #dcdcdc;
}

.mod_table01Wrap {
  margin: 25px 0;
}

.mod_table01Wrap > .tit {
  line-height: 1.19;
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_table01Wrap > .tit span {
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_table01Wrap {
    margin: 35px 0;
  }

  .mod_table01Wrap > .tit {
    line-height: 1.5;
    margin-bottom: 11px;
    font-size: 1.8rem;
  }
}
.mod_table01Scroll {
  overflow-y: scroll;
  margin-right: -15px;
  -webkit-overflow-scrolling: touch;
}

@media all and (min-width: 600px) {
  .mod_table01Scroll {
    overflow: hidden;
    margin-right: 0;
  }
}
.mod_table01 th,
.mod_table01 td {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.3;
  padding: 16px 8px 15px;
  border: 1px solid #dcdcdc;
  font-size: 1.4rem;
  vertical-align: middle;
}

.mod_table01 th sup,
.mod_table01 td sup {
  display: inline-block;
  position: relative;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.mod_table01 thead th {
  background: #90abb0;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.mod_table01 thead td {
  text-align: center;
}

.mod_table01 thead td.is_highlight {
  color: #90abb0;
  font-weight: bold;
}

.mod_table01 tbody th {
  background: #f9f9f9;
  text-align: left;
}

.mod_table01 tbody th.is_highlight {
  color: #90abb0;
}

.mod_table01 tbody td {
  text-align: center;
}

.mod_table01 tbody td.is_highlight a {
  color: #90abb0;
  font-weight: bold;
  text-decoration: underline;
}

.mod_table01 .is_tal {
  text-align: left;
}

.mod_table01 .is_highlight {
  background: #f5f9fd;
}

.mod_table01 .is_tBlack {
  color: #333;
}

.mod_table01 .is_bgGray {
  background: #f9f9f9;
}

.mod_table01 .is_fBold {
  font-weight: bold;
}

.mod_table01 .is_fNormal {
  font-weight: normal;
}

/*
#styleguide
mod_table01


基本　theadのth,tdとtbodyのtdはtext-align: center; tbodyのthはtext-align: left;
セル幅は各cssで指定。
セルにクラスをつけてスタイルを変更可。

is_bgGray -> 背景グレー
is_highlight -> 背景薄水色
is_fBold -> font-weight: bold;
is_fNormal -> font-weight: normal;
is_tBlack - > color: $clr_black(#333);
is_tal -> text-align: left;
```
<div class="mod_table01Wrap">
	<h3 class="tit"><span>Table 1.</span>Properties of thermostable DNA polymerases</h3>
	<div class="mod_table01Scroll">
		<table class="mod_table01">
			<thead>
				<tr>
					<th class="is_tal is_bgGray is_fNormal is_tBlack" rowspan="2">Proterty</th>
					<th colspan="3">Value for indicated DNA polymerase</th>
				</tr>
				<tr>
					<td class="is_highlight">KOD DNA polymerase</td>
					<td class="is_fNormal">Pfu DNA polymerase</td>
					<td class="is_fNormal">Taq DNA polymerase</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Origin</th>
					<td>Archaea</td>
					<td>Archaea</td>
					<td>Bacteria</td>
				</tr>
				<tr>
					<th>Deduced molecular mass (kDa)</th>
					<td>90.0</td>
					<td>90.1</td>
					<td>93.9</td>
				</tr>
				<tr>
					<th>Optimum temperature (ºC)</th>
					<td>75</td>
					<td>75</td>
					<td>75</td>
				</tr>
				<tr>
					<th>Optimum pH at 75ºC</th>
					<td>6.5</td>
					<td>6.5</td>
					<td>8.0-8.5</td>
				</tr>
				<tr>
					<th>Thermostability (half-life)</th>
					<td class="is_highlight">95ºC,12 h; 100oC,3.0h</td>
					<td>95ºC, 6h; 100oC, 2.9h</td>
					<td>95ºC, 1.6h</td>
				</tr>
				<tr>
					<th>5'→3' exonuclease activity</th>
					<td>-</td>
					<td>-</td>
					<td>-</td>
				</tr>
				<tr>
					<th>3'→5' exonuclease activity</th>
					<td class="is_highlight">+</td>
					<td>+</td>
					<td>-</td>
				</tr>
				<tr>
					<th>Terminal transferase activity</th>
					<td>-</td>
					<td>-</td>
					<td>-</td>
				</tr>
				<tr>
					<th>Processivity (bases)</th>
					<td class="is_highlight">&gt;300</td>
					<td>&lt;20</td>
					<td>ND</td>
				</tr>
				<tr>
					<th>Elongation rate (bases/s)</th>
					<td class="is_highlight">106-138</td>
					<td>25</td>
					<td>61</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<div class="mod_table01Wrap">
	<h3 class="tit"><span>Table 1.</span>Properties of thermostable DNA polymerases</h3>
	<div class="mod_table01Scroll">
		<table class="mod_table01">
			<thead>
				<tr>
					<th>AAA</th>
					<th>BBB</th>
					<th>CCC</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>Origin</th>
					<td>Archaea</td>
					<td>Archaea</td>
				</tr>
				<tr>
					<th>Deduced molecular mass (kDa)</th>
					<td>90.0</td>
					<td>90.1</td>
				</tr>
				<tr>
					<th>Optimum temperature (ºC)</th>
					<td>75</td>
					<td>75</td>
				</tr>
				<tr>
					<th>Optimum pH at 75ºC</th>
					<td>6.5</td>
					<td>6.5</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
```
*/
.mod_table02 {
  width: 890px;
  border: 1px solid #dcdcdc;
}

.mod_table02Wrap {
  margin: 25px 0;
}

.mod_table02Wrap > .tit {
  line-height: 1.19;
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_table02Wrap > .tit span {
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_table02Wrap {
    margin: 35px 0;
  }

  .mod_table02Wrap > .tit {
    line-height: 1.5;
    margin-bottom: 11px;
    font-size: 1.8rem;
  }
}
.mod_table02Scroll {
  overflow-y: scroll;
  margin-right: -15px;
  -webkit-overflow-scrolling: touch;
}

@media all and (min-width: 600px) {
  .mod_table02Scroll {
    overflow: hidden;
    margin-right: 0;
  }
}
.mod_table02 th,
.mod_table02 td {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.3;
  padding: 16px 19px 15px;
  border: 1px solid #dcdcdc;
  font-size: 1.4rem;
  text-align: left;
  vertical-align: middle;
}

.mod_table02 th sup,
.mod_table02 td sup {
  display: inline-block;
  position: relative;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.mod_table02 thead th:nth-child(1) {
  background: #f5f9fd;
  font-weight: bold;
}

.mod_table02 thead th:nth-child(2) {
  background: none;
}

.mod_table02 tbody th {
  background: #f5f9fd;
  color: #90abb0;
}

.mod_table02 tbody th a {
  color: #90abb0;
  font-weight: bold;
  text-decoration: underline;
}

.mod_table02 tbody td.is_highlight a {
  color: #90abb0;
  font-weight: bold;
  text-decoration: underline;
}

.mod_table02 .is_tal {
  text-align: left;
}

.mod_table02 .is_highlight {
  background: #f5f9fd;
}

.mod_table02 .is_tBlack {
  color: #333;
}

.mod_table02 .is_bgGray {
  background: #f9f9f9;
}

.mod_table02 .is_fBold {
  font-weight: bold;
}

.mod_table02 .is_fNormal {
  font-weight: normal;
}

/*
#styleguide
mod_table02

mod_table01のようにクラス付加でスタイル変更はできない
セル幅は各cssで指定。
```

<div class="mod_table02Wrap">
	<div class="mod_table02Scroll">
		<table class="table01 mod_table02">
			<thead>
				<tr>
					<th>Product Name</th>
					<th>Remarks</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th><a href="pcr_010.html">Anti-Taq high</a></th>
					<td>Anti-Taq DNA polymerase neutralization antibody for hot start</td>
				</tr>
				<tr>
					<th><a href="#">Deoxyribonucleotide<br>triphosphate(dNTPs)</a></th>
					<td>Anti-Taq DNA polymerase neutralization antibody for hot start</td>
				</tr>
				<tr>
					<th><a href="#">RNase Inhibitor</a></th>
					<td>Highly purified RNase inhibitor for reverse transcription</td>
				</tr>
				<tr>
					<th><a href="#">RNase Inhibitor</a></th>
					<td>Highly purified RNase inhibitor for reverse transcription</td>
				</tr>
				<tr>
					<th><a href="#">TArget Clone™ </a></th>
					<td>TA cloning of PCR products having overhanged dA at the 3'-ends. PCR products from Taq DNA polymerase, Blend Taq® [Code No. BTQ-101], Blend Taq® -Plus- [Code No. BTQ-201] or KOD Dash [Code No. LDP-101] are available</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
```
*/
.mod_table03 {
  width: 890px;
  border: 1px solid #dcdcdc;
}

.mod_table03Wrap {
  margin: 25px 0;
}

.mod_table03Wrap > .tit {
  line-height: 1.19;
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_table03Wrap > .tit span {
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_table03Wrap {
    margin: 35px 0;
  }

  .mod_table03Wrap > .tit {
    line-height: 1.5;
    margin-bottom: 11px;
    font-size: 1.8rem;
  }
}
.mod_table03Scroll {
  overflow-y: scroll;
  margin-right: -15px;
  -webkit-overflow-scrolling: touch;
}

@media all and (min-width: 600px) {
  .mod_table03Scroll {
    overflow: hidden;
    margin-right: 0;
  }
}
.mod_table03 th,
.mod_table03 td {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.3;
  padding: 16px 20px 15px;
  border: 1px solid #dcdcdc;
  font-size: 1.4rem;
  vertical-align: middle;
}

.mod_table03 th sup,
.mod_table03 td sup {
  display: inline-block;
  position: relative;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.mod_table03 tbody th {
  background: #90abb0;
  color: #fff;
  font-weight: bold;
}

.mod_table03 tbody .width01 {
  width: 150px;
}

.mod_table03 tbody .width02 {
  width: 295px;
}

.mod_table03 tbody .width03 {
  width: 150px;
}

.mod_table03 tbody .width04 {
  width: 295px;
}

/*
#styleguide
mod_table03

mod_table01のようにクラス付加でスタイル変更はできない
セル幅は各cssで指定。
```
<div class="mod_table03Wrap">
	<h3 class="tit"><span>Table 1.</span>Properties of thermostable DNA polymerases</h3>
	<div class="mod_table03Scroll">
		<table class="mod_table03">
			<tbody>
				<tr>
					<th class="width01" rowspan="7">Applied<br>Biosystems</th>
					<td class="width02">ABI PRISM® 7000</td>
					<th class="width03" rowspan="3">Roche<br>Diagnostics</th>
					<td class="width04">LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<th rowspan="2">Bio-Rad / MJ</th>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<th>Agilent<br>Technologies</th>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
				<tr>
					<td>LightCycler® 1.x / 2.0</td>
					<th>TaKaRa</th>
					<td>LightCycler® 1.x / 2.0</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
```
*/
.mod_table04 {
  width: 890px;
  border: 1px solid #dcdcdc;
}

.mod_table04Wrap {
  margin: 25px 0;
}

.mod_table04Wrap > .tit {
  line-height: 1.19;
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_table04Wrap > .tit span {
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_table04Wrap {
    margin: 35px 0;
  }

  .mod_table04Wrap > .tit {
    line-height: 1.5;
    margin-bottom: 11px;
    font-size: 1.8rem;
  }
}
.mod_table04Scroll {
  overflow-y: scroll;
  margin-right: -15px;
  -webkit-overflow-scrolling: touch;
}

@media all and (min-width: 600px) {
  .mod_table04Scroll {
    overflow: hidden;
    margin-right: 0;
  }
}
.mod_table04 th,
.mod_table04 td {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.3;
  padding: 16px 18px 15px;
  border: 1px solid #dcdcdc;
  font-size: 1.4rem;
  vertical-align: middle;
}

.mod_table04 th sup,
.mod_table04 td sup {
  display: inline-block;
  position: relative;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.mod_table04 thead {
  background: #90abb0;
  color: #fff;
  font-weight: bold;
}

.mod_table04 thead tr .width01 {
  width: 40px;
}

.mod_table04 thead tr .width02 {
  width: 126px;
}

.mod_table04 thead tr .width03 {
  width: 138px;
}

.mod_table04 thead tr .width04 {
  width: 141px;
}

.mod_table04 thead tr .width05 {
  width: 445px;
}

.mod_table04 thead th {
  text-align: center;
}

.mod_table04 tbody th {
  background: #90abb0;
  color: #fff;
  font-weight: bold;
}

.mod_table04 tbody td {
  text-align: center;
}

.mod_table04 tbody td.num {
  padding-right: 0;
  padding-left: 0;
  background: #f9f9f9;
}

.mod_table04 tbody td.name {
  background: #f5f9fd;
}

.mod_table04 tbody td.is_tal {
  text-align: left;
}

/*
#styleguide
mod_table04

mod_table01のようにクラス付加でスタイル変更はできない
セル幅は各cssで指定。
```
<div class="mod_table04Scroll">
	<table class="mod_table04">
		<thead>
			<tr>
				<th class="width01"></th>
				<th class="width02">Call Name</th>
				<th class="width03">Adherent/<br>Non-adherent</th>
				<th class="width04">Species</th>
				<th class="width05">Remarks</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="num">1</td>
				<td class="name">A431</td>
				<td>Adherent</td>
				<td>H.sapiens</td>
				<td class="is_tal">epidermoid carcinoma cell line</td>
			</tr>
			<tr>
				<td class="num">1</td>
				<td class="name">A431</td>
				<td>Adherent</td>
				<td>H.sapiens</td>
				<td class="is_tal">epidermoid carcinoma cell line</td>
			</tr>
			<tr>
				<td class="num">1</td>
				<td class="name">A431</td>
				<td>Adherent</td>
				<td>H.sapiens</td>
				<td class="is_tal">epidermoid carcinoma cell line</td>
			</tr>
			<tr>
				<td class="num">1</td>
				<td class="name">A431</td>
				<td>Adherent</td>
				<td>H.sapiens</td>
				<td class="is_tal">epidermoid carcinoma cell line</td>
			</tr>
		</tbody>
	</table>
</div>
</div>
```
*/
/*!  box
================================================ */
.mod_sec01 {
  margin-bottom: 37px;
}

.mod_sec01 .leadTit {
  margin-bottom: 15px;
}

@media all and (min-width: 600px) {
  .mod_sec01 {
    margin-bottom: 45px;
  }

  .mod_sec01 .leadTit {
    margin-bottom: 22px;
  }
}
/*
#styleguide
mod_sec01


```
<section id="description" class="mod_sec01">
	<h2 class="leadTit mod_tit02">DESCRIPTION</h2>
	<p class="mod_txt01">KOD -Plus- is based on DNA polymerase from the hyperthermophilic Archaeon Thermococcus kodakaraensis KOD1(1)(2) KOD -Plus- exhibits excellent high PCR fidelity and efficiency. The enzyme solution of KOD -Plus- contains two types of anti-KOD DNA polymerase antibodies that inhibit polymerase and 3'→5' exonuclease activity, thus allowing for Hot Start PCR(3). KOD -Plus- generates blunt-end PCR products, due to 3'→5' exonuclease (proof-reading) activity.</p>
</section>
<section id="description" class="mod_sec01">
	<h2 class="leadTit mod_tit02">DESCRIPTION</h2>
	<p class="mod_txt01">KOD -Plus- is based on DNA polymerase from the hyperthermophilic Archaeon Thermococcus kodakaraensis KOD1(1)(2) KOD -Plus- exhibits excellent high PCR fidelity and efficiency. The enzyme solution of KOD -Plus- contains two types of anti-KOD DNA polymerase antibodies that inhibit polymerase and 3'→5' exonuclease activity, thus allowing for Hot Start PCR(3). KOD -Plus- generates blunt-end PCR products, due to 3'→5' exonuclease (proof-reading) activity.</p>
</section>
<!-- /#description -->
```
*/
.mod_boxImg01 {
  margin: 20px 0;
}

.mod_boxImg01 .areaImg {
  margin: 0 0 10px;
}

.mod_boxImg01 .areaTxt .tit {
  line-height: 1.19;
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 1.6rem;
}

.mod_boxImg01 .areaTxt .tit span {
  color: #1681ad;
}

@media all and (min-width: 600px) {
  .mod_boxImg01 {
    overflow: hidden;
    margin: 25px 0;
  }

  .mod_boxImg01 .areaImg {
    float: left;
    margin: 0 30px 0 0;
  }

  .mod_boxImg01 .areaImg .img img {
    width: auto;
    max-width: 100%;
  }

  .mod_boxImg01 .areaTxt .tit {
    line-height: 1.56;
    font-size: 1.8rem;
  }
}
/*
#styleguide
mod_boxImg01

SP： 上に画像、下にテキスト。
PC： 左に画像、右にテキスト。上下余白25px画像の横幅指定は不要。PC/SPそれぞれ画像をスライスすること。

```
<div class="mod_boxImg01">
	<div class="areaImg">
		<div class="img"><img src="https://placehold.jp/30/e0e0e0/ffffff/490x240.png?text=Image" alt=""></div>
	</div>
	<div class="areaTxt">
		<p class="tit"><span>Fig. 4.</span> Comparison of elongation rates of KOD Pfu and Taq DNA polymerase.</p>
		<p class="txt mod_txt01">The elongation rate was measured according to the length of synthesized DNA, using M13 ssDNA as the template at 75ºC.</p>
	</div>
</div>
```
*/
.mod_box01 {
  margin: 16px 0 0;
}

@media all and (min-width: 600px) {
  .mod_box01 {
    margin: 0;
  }
}
.mod_box01 .list .item {
  position: relative;
  line-height: 1.36;
  padding-left: 19px;
  font-size: 1.4rem;
}

.mod_box01 .list .item:before {
  position: absolute;
  top: 7px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #333;
  content: "";
}

@media all and (min-width: 600px) {
  .mod_box01 .list .item {
    line-height: 1.56;
    padding-left: 24px;
    font-size: 1.8rem;
  }

  .mod_box01 .list .item:before {
    top: 11px;
    left: 5px;
  }
}
.mod_box01 .list02 {
  margin: 5px 5px 5px 30px;
}

.mod_box01 .description {
  overflow: hidden;
  margin: 17px 0 12px;
  padding: 15px;
  background: #f9f9f9;
}

.mod_box01 .description .areaImg {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 80px;
  margin: 0 15px 15px 0;
  border: 1px solid #dcdcdc;
  background: #fff;
}

.mod_box01 .description .areaImg img {
  display: block;
}

.mod_box01 .description .areaImg02 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 80px;
  margin: 0 15px 15px 0;
  border: 1px solid #dcdcdc;
  background: #fff;
}

.mod_box01 .description .areaImg02 img {
  display: block;
}

.mod_box01 .description .areaTxt .listTags dt {
  display: inline-block;
  line-height: 1.2;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 2px;
  background: #1681ad;
  color: #fff;
  font-size: 1.4rem;
}

.mod_box01 .description .areaTxt .listTags dd {
  line-height: 1.4;
  font-size: 1.4rem;
}

.mod_box01 .description .areaTxt .listTags dd + dt {
  margin-top: 12px;
}

@media all and (min-width: 600px) {
  .mod_box01 .description .areaTxt .listTags {
    overflow: hidden;
  }

  .mod_box01 .description .areaTxt .listTags dt {
    padding: 4px 15px;
    font-size: 1.6rem;
  }

  .mod_box01 .description .areaTxt .listTags dd {
    line-height: 28/18;
    font-size: 1.8rem;
  }

  .mod_box01 .description .areaTxt .listTags dd img {
    width: auto;
  }
}
.mod_box01 .description .areaTxt .listTags02 {
  display: block;
}

.mod_box01 .description .areaTxt .listTags02 dt {
  display: inline-block;
  line-height: 1.2;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 2px;
  background: #1681ad;
  color: #fff;
  font-size: 1.4rem;
}

.mod_box01 .description .areaTxt .listTags02 dd {
  line-height: 1.4;
  margin-bottom: 10px;
  font-size: 1.4rem;
}

@media all and (min-width: 600px) {
  .mod_box01 .description .areaTxt .listTags02 {
    display: inline-block;
    margin: 9px 146px 0 0;
    padding-left: 10px;
    vertical-align: top;
  }

  .mod_box01 .description .areaTxt .listTags02 dt {
    padding: 4px 15px;
    font-size: 1.6rem;
  }

  .mod_box01 .description .areaTxt .listTags02 dd {
    line-height: 28/18;
    margin-top: 10px;
    font-size: 1.4rem;
  }

  .mod_box01 .description .areaTxt .listTags02 dd img {
    width: auto;
  }
}
@media all and (min-width: 600px) {
  .mod_box01 .description {
    margin: 23px 0 12px;
    padding: 20px;
  }

  .mod_box01 .description .areaImg {
    width: 160px;
    margin: 0 29px 29px 0;
  }
}
.mod_box01 .notes .item {
  line-height: 1.42;
  font-size: 1.2rem;
}

@media all and (min-width: 600px) {
  .mod_box01 .notes .item {
    line-height: 1.6;
    font-size: 1.4rem;
  }
}
.mod_box01 .btn {
  margin-top: 15px;
}

@media all and (min-width: 600px) {
  .mod_box01 .btn {
    margin-top: 30px;
  }
}
/*
#styleguide
mod_box01

画像幅はSP 80px, PC 160pxとしていますが、入る画像によってかわるので都度クラスをつけてサイズ調整してください

```
<h3 class="tit mod_tit03">KOD -Plus- <span>High fidelity PCR polymerase</span></h3>
<div class="mod_box01">
	<ul class="list">
		<li class="item">The PCR error ratio of KOD -Plus- is approx. 80 times less than Taq DNA polymerase.</li>
		<li class="item">Hot Start technology results in highly efficient amplification.</li>
		<li class="item">KOD -Plus- enables the following amplifications (maximum): 21 kb from lambda phage DNA, 12 kb from human genomic DNA, and 7 kb from cDNA.</li>
	</ul>
	<div class="description">
		<div class="areaImg"><img src="../img/common/img_dummy01.png" alt=""></div>
		<div class="areaTxt">
			<dl class="listTags">
				<dt>Target</dt>
				<dd>Lipase gene (Pseudomonas sp.) [GC=70%]</dd>
				<dt>Reaction condition</dt>
				<dd>see typical reaction setup</dd>
				<dt>Sample</dt>
				<dd>Plasmid clone 10 ng / 50 μl reaction</dd>
			</dl>
			<p class="mod_txt01">KOD -Plus- is based on DNA polymerase from the hyperthermophilic Archaeon Thermococcus kodakaraensis KOD1. KOD -Plus- exhibits excellent high PCR fidelity and efficiency. The enzyme solution of KOD -Plus- contains two types of anti-KOD DNA polymerase antibodies that inhibit polymerase and 3'→5' exonuclease activity, thus allowing for Hot Start PCR. KOD -Plus- generates blunt-end PCR products, due to 3'→5' exonuclease (proof-reading) activity.</p>
		</div>
	</div>
	<ul class="notes">
		<li class="item">Code No. NTP-201 2 μmoles/1 ml (2 mM)</li>
		<li class="item">Code No. NTP-301 2 μmoles/0.2 ml (10 mM)</li>
	</ul>
	<p class="btn mod_btn01"><a href="#">MORE DETAIL</a></p>
</div>
```
*/
.mod_box02 > .tit {
  margin-bottom: 0;
}

.mod_box02 .areaDetail {
  padding: 11px 15px;
  border: 1px solid #dcdcdc;
  border-top: 0;
}

.mod_box02 .areaDetail .list .item {
  position: relative;
  line-height: 1.5;
  padding-left: 12px;
  font-size: 1.4rem;
}

.mod_box02 .areaDetail .list .item:before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #238cb6;
  content: "";
}

.mod_box02 .areaDetail .list .item a {
  text-decoration: underline;
}

@media all and (min-width: 600px) {
  .mod_box02 .areaDetail {
    padding: 18px 30px;
  }

  .mod_box02 .areaDetail .list .item {
    line-height: 2.11;
    padding-left: 20px;
    font-size: 1.8rem;
  }

  .mod_box02 .areaDetail .list .item:before {
    top: 15px;
    width: 5px;
    height: 5px;
  }

  .mod_box02 .areaDetail .list .item a:hover {
    text-decoration: none;
  }
}
/*
#styleguide
mod_box02

```
<div class="mod_box02">
	<h2 class="tit mod_tit03">PCR</h2>
	<div class="areaDetail">
		<ul class="list">
			<li class="item">KOD -Plus-</li>
			<li class="item"><a href="#">KOD -Plus- Ver.2</a></li>
			<li class="item">KOD -Plus- Neo</li>
			<li class="item"><a href="#">KOD FX</a></li>
			<li class="item">Dummy</li>
			<li class="item">Dummy</li>
			<li class="item">Dummy</li>
			<li class="item">Dummy</li>
			<li class="item">Dummy</li>
		</ul>
	</div>
</div>
```
*/
/*!  other
================================================ */
.mod_hr01 {
  height: 1px;
  margin: 20px 0;
  border-top: 2px solid #dcdcdc;
}

@media all and (min-width: 600px) {
  .mod_hr01 {
    margin: 30px 0;
    border-top-width: 1px;
  }
}
/*
#styleguide
mod_hr01

hr。
SP： 上下margin 20px
PC： 上下margin 30px

```
↓
<hr class="mod_hr01">
↑
```
*/