@charset "UTF-8";
/*
#overview
grid

グリッドレイアウト
*/
.parent-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}

.parent-block-no-justify {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
}

/*#styleguide
.parent-block.parent-block-col-2 - layout

PC - 横2段組レイアウト
Mobile - 段組みなし
```

<div class="parent-block parent-block-col-2">
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
</div>
```
*/
.parent-block-col-2 .unit {
  width: 100%;
  margin-bottom: 30px;
}

@media all and (min-width: 740px) {
  .parent-block-col-2 .unit {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
  }
}

.unit-right-margin {
  margin-right: 10px;
}

@media all and (min-width: 740px), print {
  .unit-right-margin {
    margin-right: 0;
  }
}

/*#styleguide
.parent-block.parent-block-col-3 - layout

PC - 横2段組レイアウト
Mobile - 段組みなし
```

<div class="parent-block parent-block-col-3">
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
</div>
```
*/
@media all and (min-width: 740px) {
  .parent-block-col-3 .unit {
    margin: 0 15px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
  }
}

/*#styleguide
.parent-block-no-justify.parent-block-col-4 - layout

PC - 横4段組レイアウト
Mobile - 横2段組レイアウト
```

<div class="parent-block-no-justify parent-block-col-4">
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
</div>
```
*/
.parent-block-col-4 .unit {
  width: calc(50% - 5px);
  margin-bottom: 25px;
  float: left;
}

.parent-block-col-4 .unit:nth-child(2n) {
  float: right;
}

@media all and (min-width: 740px) {
  .parent-block-col-4 .unit {
    width: 248px;
    height: auto;
    padding: 0;
    margin-right: 16px;
    margin-bottom: 20px;
    float: none;
  }
  .parent-block-col-4 .unit:nth-child(2n) {
    float: none;
    padding-left: 0;
  }
  .parent-block-col-4 .unit:nth-child(4n) {
    padding-right: 0;
    margin-right: 0;
  }
}

@media all and (min-width: 740px) {
  .parent-block.parent-block-no-justify {
    -ms-flex-pack: initial;
    justify-content: initial;
    -webkit-box-pack: initial;
    -webkit-justify-content: initial;
    -moz-justify-content: initial;
  }
}

.parent-block-col-4-sm-normal {
  display: block;
}

.parent-block-col-4-sm-normal .unit {
  margin-bottom: 10px;
}

@media all and (min-width: 740px) {
  .parent-block-col-4-sm-normal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .parent-block-col-4-sm-normal .unit {
    margin: 10px 20px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
  }
  .parent-block-col-4-sm-normal .unit:first-child {
    margin-left: 10px;
  }
  .parent-block-col-4-sm-normal .unit:last-child {
    margin-right: 10px;
  }
}

.parent-block-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media all and (min-width: 740px), print {
  .parent-block-wrap {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

.parent-block-wrap .wrap-unit {
  width: 48%;
  margin: 0 0 40px;
}

@media all and (min-width: 740px), print {
  .parent-block-wrap .wrap-unit {
    width: calc(33% - 30px);
    margin: 0 15px 40px;
  }
}

.parent-block-wrap.with-image-frame .wrap-unit img {
  border: 1px solid #d8d8d8;
  padding: 5px;
}

/*#styleguide
.parent-block.parent-block-col-5 - layout

PC - 横5段組レイアウト
Mobile - 横2段組レイアウト
```

<div class="parent-block parent-block-col-5">
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
  <div class="unit">
    <p>inner text. innert text. inner text. innert text. inner text. innert text. inner text. innert text.</p>
  </div>
</div>
```
*/
.parent-block-col-5 .unit {
  width: 48.5%;
}

@media all and (min-width: 740px) {
  .parent-block-col-5 .unit {
    width: 19%;
  }
}

/*
テスト用のコメントです。
部品単位で分割したものはmodule以下に配置
*/
/*
#overview
heading

見出しのスタイル
*/
/*#styleguide
.heading-01 - title

PC, Mobileとも - レベル1見出し
```

<h1 class="heading-01">PRODUCTS</h1>
```
 */
.heading-01 {
  padding-top: 16px;
  padding-bottom: 8px;
  line-height: 1.5;
  font-size: 2rem;
  margin-bottom: 20px;
  border-bottom: 1px solid red;
}

.heading-01 i {
  font-style: italic;
}

@media all and (min-width: 740px) {
  .heading-01 {
    padding-top: 0px;
    padding-bottom: 20px;
    line-height: 1.3333;
    font-size: 3.6rem;
  }
}

/*#styleguide
.heading-01 .list-heading - icon, layout, title

PC - 機能別リンクリスト付きのレベル1見出し
Mobile - レベル1見出し（機能別リンクリストは非表示）
```

<h1 class="heading-01">
  PRODUCTS
  <ul class="list-in-heading">
    <li><a href="/an/contact/"><i class="custom-icon icon-contact"></i><span class="list-in-heading-link-text">CONTACT SEARCH</span></a></li>
    <li><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_quotation"><i class="custom-icon icon-quotation"></i><span class="list-in-heading-link-text">QUOTATION</span></a></li>
    <li><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_product_Information"><i class="custom-icon icon-inquiry"></i><span class="list-in-heading-link-text">INQUIRY</span></a></li>
  </ul>
</h1>
```
 */
.list-in-heading {
  display: none;
}

@media all and (min-width: 740px), print {
  .list-in-heading {
    display: block;
    padding-bottom: 10px;
    text-align: right;
    position: relative;
    z-index: 99;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading li {
    display: inline-block;
    line-height: 1;
    letter-spacing: 0;
    font-size: 1.2rem;
    font-weight: 600;
    margin-left: 30px;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading a {
    text-decoration: none;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading a:hover .list-in-heading-link-text {
    text-decoration: none;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading a:hover .custom-icon {
    text-decoration: none;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading a .custom-icon {
    font-size: 20px;
    margin-right: 8px;
    vertical-align: -6px;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading .list-scrollable-trigger {
    text-decoration: none;
    cursor: pointer;
  }
}

.list-in-heading .list-scrollable-trigger-wrap {
  position: relative;
}

@media all and (min-width: 740px), print {
  .list-in-heading .list-scrollable-trigger:hover .list-in-heading-link-text {
    text-decoration: none;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading .list-scrollable-trigger:hover .custom-icon {
    text-decoration: none;
  }
}

@media all and (min-width: 740px), print {
  .list-in-heading .list-scrollable-trigger .custom-icon {
    font-size: 20px;
    margin-right: 8px;
    vertical-align: -6px;
  }
}

.list-in-heading-list-scrollable {
  position: absolute;
  left: -10px;
  display: none;
  width: 130px;
  background-color: #fff;
  padding: 0 10px 10px;
  z-index: 99;
}

.list-in-heading-list-scrollable li {
  text-transform: none;
  text-align: left;
  margin: 12px 0 0;
  display: block;
}

.list-in-heading-list-scrollable li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.list-in-heading-list-scrollable li a .custom-icon {
  font-size: 20px;
  margin-right: 8px;
}

.list-in-heading-list-scrollable li a:hover {
  text-decoration: none;
}

.list-in-heading-list-scrollable li a:hover span {
  text-decoration: underline;
}

/*#styleguide
.h2Style - title

PC, Mobileとも - レベル2見出し
```

#topMain.for_shortHeight-topVi .container .heading-02.heading-featured:first-child {
  padding-top: 0;
}

/*#styleguide
.heading-featured - title

PC, Mobileとも - 中央寄せのレベル2見出し
```

<h2 class="heading-02 heading-featured">Featured Article</h2>
```
*/
.heading-featured {
  padding-bottom: 10px;
  text-align: center;
  font-size: 1.8rem;
}

@media all and (min-width: 740px) {
  .heading-featured {
    padding-bottom: 20px;
    margin-bottom: 30px;
    font-size: 3.2rem;
  }
}

/*#styleguide
.heading-with-module.heading-with-accordion - icon, title

PC, Mobileとも - アコーディオンリスト開閉機能付きのレベル2見出し
トリガーとなる要素に'js-accordion-trigger', 表示非表示の対象となる要素に'js-accordion-target'を付与することで、アコーディオン操作が可能になります。
```

<h2 class="heading-with-module heading-with-accordion js-accordion-trigger active">News &amp; Events<i class="custom-icon icon-chevron-down"></i></h2>
<div class="js-accordion-target">
  <dl class="list list-with-date">
    <dt>Oct 26, 2015</dt>
    <dd><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></dd>
    <dt>Oct 26, 2015</dt>
    <dd><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></dd>
    <dt>Oct 26, 2015</dt>
    <dd><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></dd>
    <dt>Oct 26, 2015</dt>
    <dd><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></dd>
    <dt>Oct 26, 2015</dt>
    <dd><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></dd>
  </dl>
  <p class="text-right"><a href="#" class="btn btn-primary">See All</a></p>
</div>
```
*/
.heading-with-module {
  padding: 20px 60px 20px 10px;
  line-height: 1;
  font-size: 1.6rem;
  margin-top: -1px;
  margin-bottom: 20px;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  background-color: whitesmoke;
}

@media all and (min-width: 740px) {
  .heading-with-module {
    padding: 18px 80px 18px 15px;
  }
}

.heading-with-accordion {
  position: relative;
}

.heading-with-accordion .custom-icon {
  top: 50%;
  right: 20px;
  margin-top: -10px;
  display: none;
  position: absolute;
  font-size: 20px;
}

.heading-with-accordion.active .icon-chevron-down-fat {
  display: none;
}

/*#styleguide
.heading-with-module .list-left-align - block, icon, list

PC - カラムが横並びのリンクリスト
Mobile - カラムが縦並びのリンクリスト
```

<section class="heading-with-module heading-with-anchor-link">
  <ul class="list-left-align">
    <li><a href="#ancNews"><i class="custom-icon icon-triangle-down"></i>News &amp; Events</a></li>
    <li><a href="#ancRelated"><i class="custom-icon icon-triangle-down"></i>Related Products</a></li>
  </ul>
</section>

<section class="heading-with-module heading-with-anchor-link heading-with-anchor-link-with-icon">
  <ul class="list-left-align">
    <li><a href="#"><span>link text</span></a></li>
    <li><a href="#"><span>link text</span></a></li>
    <li><a href="#"><span>link text</span></a></li>
  </ul>
</section>

```
 */
.heading-with-anchor-link {
  padding: 13px 15px 4px;
}

.heading-with-anchor-link-with-icon li a:before {
  margin-right: 6px;
  font-size: 12px;
}

@media all and (min-width: 740px) {
  .heading-with-anchor-link {
    margin-right: auto;
    margin-left: auto;
    padding: 11px 15px 4px;
  }
}

.heading-with-anchor-link .icon-triangle-down,
.heading-with-anchor-link .heading-with-anchor-link-with-icon li a,
.heading-with-anchor-link-with-icon li .heading-with-anchor-link a {
  margin-right: 6px;
  font-size: 12px;
}

@media all and (min-width: 740px) {
  .heading-with-anchor-link .icon-triangle-down,
  .heading-with-anchor-link .heading-with-anchor-link-with-icon li a,
  .heading-with-anchor-link-with-icon li .heading-with-anchor-link a {
    margin-right: 10px;
    position: relative;
    top: 2px;
    font-size: 14px;
  }
  .heading-with-anchor-link li a:before {
    margin-right: 10px;
    position: relative;
    top: 2px;
    font-size: 14px;
  }
  .heading-with-anchor-link li a span:hover {
    text-decoration: underline;
  }
}

/*#styleguide
.heading-03 - title

PC, Mobileとも - レベル3見出し
```

<h3 class="heading-03">Products</h3>
```
*/
.heading-03 {
  padding: 20px 0px 4px;
  line-height: 1.6666;
  font-size: 1.2rem;
  margin-bottom: 20px;
  border-bottom-color: red;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

@media all and (min-width: 740px) {
  .heading-03 {
    line-height: 1.5;
    padding-top: 30px;
    padding-bottom: 6px;
    font-size: 2rem;
  }
}

/*#styleguide
.heading-03 - layout, list, title

PC - レベル3見出しとリンクリスト
Mobile - レベル3見出し（押下でリンクリスト部分の表示非表示切り替え）
```

<h3 class="heading-03 js-accordion-list-trigger">Products<i class="icon icon-chevron-down"></i></h3>
<div class="js-accordion-list-target parent-block parent-block-col-3 block block-with-gray-background font-color-pale">
  <ul class="unit list-with-hyphen list-with-link">
    <li><a href="/an/gc/">Gas Chromatography</a></li>
    <li><a href="/an/hplc/">Liquid Chromatography</a></li>
    <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
    <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry</a></li>
    <li><a href="/an/system-gc/">System GC</a></li>
    <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
  </ul>
  <ul class="unit list-with-hyphen list-with-link">
    <li><a href="/an/ms/">Mass Spectrometry</a></li>
    <li><a href="/an/molecular_spectro/">Molecular Spectroscopy</a></li>
    <li><a href="/an/elemental/">Elemental Analysis</a></li>
    <li><a href="/an/consum/">Columns and Consumables</a></li>
    <li><a href="/an/surface/">Surface Analysis</a></li>
    <li><a href="/an/lifescience/">Life Science Lab Instruments</a></li>
    <li><a href="/an/toc/">Total Organic Carbon Analysis</a></li>
  </ul>
  <ul class="unit list-with-hyphen list-with-link">
    <li><a href="/an/monitoring/">Continuous Monitoring Analysis</a></li>
    <li><a href="/an/thermal/">Thermal Analysis</a></li>
    <li><a href="/an/powder/">Particle Size Analysis</a></li>
    <li><a href="/an/test/">Materials Testing &amp; Inspection</a></li>
    <li><a href="/an/ndi/">Non-Destructive Testing</a></li>
    <li><a href="/an/balance/">Balances</a></li>
  </ul>
</div>
```
*/
.js-accordion-list-trigger {
  position: relative;
}

.js-accordion-list-trigger .icon {
  right: 10px;
  bottom: 8px;
  display: block;
  position: absolute;
}

@media all and (min-width: 740px) {
  .js-accordion-list-trigger .icon {
    display: none;
  }
}

/*#styleguide
.productVi - layout, title

PC, Mobile - 装飾なしの見出し
```

<h2 class="heading-normal">High Sensitivity Gas Chromatograph System</h2>
```
*/
.heading-normal {
  line-height: 1.25;
  font-size: 1.6rem;
  margin-bottom: 1em;
}

.heading-normal-with-number-indent {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

@media all and (min-width: 740px) {
  .heading-normal {
    font-size: 2.4rem;
    margin-bottom: 1.5em;
  }
}

.block .heading-normal,
.webform-client-form .heading-normal {
  margin-bottom: 0.5em;
  margin-top: 1em;
}

/*#styleguide
アイコン付きの見出し

```
<h4 class="heading-with-icon heading-with-icon-icon-quotation">見出しテキスト</h4>
<h4 class="heading-with-icon heading-with-icon-icon-inquiry">見出しテキスト</h4>
<h4 class="heading-with-icon heading-with-icon-icon-wrench">見出しテキスト</h4>
<h4 class="heading-with-icon heading-with-icon-icon-training">見出しテキスト</h4>
<h4 class="heading-with-icon heading-with-icon-icon-plans">見出しテキスト</h4>
<h4 class="heading-with-icon heading-with-icon-icon-signin">見出しテキスト</h4>
```
*/
.heading-with-icon {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.42857;
  position: relative;
  padding-left: 26px;
  margin-bottom: 1em;
}

@media all and (min-width: 740px), print {
  .heading-with-icon {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    padding-left: 33px;
  }
}

.heading-with-icon:before {
  font-size: 16px;
  position: absolute;
  left: 0;
  top: 2px;
}

@media all and (min-width: 740px), print {
  .heading-with-icon:before {
    font-size: 18px;
    top: -3px;
  }
}

@media all and (min-width: 740px), print {
  .heading-with-icon-icon-inquiry:before {
    font-size: 20px;
  }
}

@media all and (min-width: 740px), print {
  .heading-with-icon-icon-wrench:before {
    font-size: 19px;
  }
}

.heading-normal-for-label {
  font-size: 12px;
}

@media all and (min-width: 740px), print {
  .heading-normal-for-label {
    font-size: 20px;
  }
}

@media all and (min-width: 740px), print {
  .js-accordion-list-trigger .custom-icon {
    display: none;
  }
}

@media all and (min-width: 740px), print {
  .js-accordion-trigger#ancNews {
    cursor: pointer;
  }
}

.js-accordion-trigger#ancNews .custom-icon {
  display: inline-block;
}

.heading-with-accordion .custom-icon {
  display: inline-block;
}

@media all and (min-width: 740px), print {
  .heading-with-accordion .custom-icon {
    display: none;
  }
}

#newsTop .heading-with-accordion.active .icon-chevron-down-fat {
  display: inline-block;
}

@media all and (min-width: 740px), print {
  #newsTop .heading-with-accordion {
    cursor: pointer;
  }
}

#newsTop .heading-with-accordion .custom-icon {
  display: inline-block;
}

/*
#overview
list

リスト
*/
/*#styleguide
.list.list-with-date

```
<ul class="list list-with-date">
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-category">What's New</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
  </li>
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-category">What's New</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
  </li>
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-category">What's New</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
  </li>
</ul>
```
*/
.list-with-date li {
  margin-bottom: 1.75em;
}

.list-with-date-item {
  display: inline-block;
}

@media all and (min-width: 740px), print {
  .list-with-date-item {
    margin-left: 20px;
  }
}

.list-with-date-item-category {
  background-color: #333;
  width: 98px;
  text-align: center;
  font-size: 9px;
  font-size: 0.9rem;
  line-height: 1;
  color: white;
  padding: 4px 3px 5px;
  vertical-align: top;
}

@media all and (min-width: 740px), print {
  .list-with-date-item-category {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

.list-with-date-item-text {
  font-size: 10px;
  font-size: 1rem;
  line-height: 1.8;
}

@media all and (min-width: 740px), print {
  .list-with-date-item-text {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.57143;
    width: 845px;
    display: inline-block;
    vertical-align: top;
  }
}

.list-with-date-top .list-with-date-item-text {
  vertical-align: top;
  width: 63%;
  margin-left: 2%;
}

@media all and (min-width: 740px), print {
  .list-with-date-top .list-with-date-item-text {
    width: 725px;
    margin-left: 20px;
  }
}

.list-with-date-top .list-with-date-item-category {
  width: 14%;
  padding: 4px 1% 5px;
}

@media all and (min-width: 740px), print {
  .list-with-date-top .list-with-date-item-category {
    width: 98px;
    padding: 4px 3px 5px;
  }
}

.list-with-date-date {
  color: #777;
  font-size: 1rem;
  line-height: 1;
}

@media all and (min-width: 740px), print {
  .list-with-date-date {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.42857;
    width: 175px;
    display: inline-block;
    vertical-align: top;
    float: left;
  }
}

.list-with-date-top .list-with-date-date {
  line-height: 1.8;
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

@media all and (min-width: 740px), print {
  .list-with-date-top .list-with-date-date {
    line-height: 1.42857;
    width: 175px;
  }
}

.list-with-date-description {
  overflow-wrap: break-word;
}

@media all and (min-width: 740px), print {
  .list-with-date-description {
    margin-top: 5px;
    line-height: 1.4;
    margin-left: 185px;
  }
}

ul.list-with-date-top {
  width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media all and (min-width: 740px), print {
  ul.list-with-date-top {
    width: auto;
  }
}

/*#styleguide
.list.list-with-date.list-with-date-archive

```
<ul class="list list-with-date list-with-date-archive">
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    <div class="list-with-date-description">BfS Type approval gives <a href="http://aaa">EDX-7000P/8000P</a> plug &amp; play status foobar</div>
  </li>
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    <div class="list-with-date-description">BfS Type approval gives <a href="http://aaa">EDX-7000P/8000P</a> plug &amp; play status foobar</div>
  </li>
  <li>
    <span class="list-with-date-date">Oct 26, 2015</span>
    <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    <div class="list-with-date-description">BfS Type approval gives <a href="http://aaa">EDX-7000P/8000P</a> plug &amp; play status foobar</div>
  </li>
</ul>
```
*/
.list-with-date-archive .list-with-date-date,
.list-with-date-archive .list-with-date-item-text {
  font-weight: 600;
}

@media all and (min-width: 740px), print {
  .list-with-date-archive .list-with-date-item {
    margin-left: 10px;
  }
}

/*#styleguide
.list-left-align - block, icon, list

PC, Mobileとも - カラムが横並びのリスト
```
<ul class="list-left-align">
  <li><a href="#ancNews">News &amp; Events</a></li>
  <li><a href="#ancRelated">Related Products</a></li>
</ul>
```
 */
.list-left-align li {
  margin: 0px 15px 10px 0px;
  line-height: 1.5;
  font-size: 1.2rem;
  display: inline-block;
  position: relative;
}

.list-left-align li:last-child {
  margin-right: 0px;
}

.list-left-align li a {
  text-decoration: none;
}

.list-left-align-for-bridge {
  padding: 10px 15px 10px;
}

.list-left-align-for-bridge li {
  font-size: 14px;
}

.list-left-align-for-bridge li a {
  text-decoration: underline;
}

.list-left-align-for-bridge li a:hover {
  text-decoration: none;
}

@media all and (min-width: 740px) {
  .list-left-align li {
    margin: 0px 30px 10px 0px;
    font-size: 1.6rem;
  }
  .list-left-align li:hover {
    text-decoration: underline;
  }
  .list-left-align-for-bridge li {
    font-size: 14px;
  }
  .list-left-align-for-bridge li a {
    text-decoration: underline;
  }
  .list-left-align-for-bridge li a:hover {
    text-decoration: none;
  }
}

/*#styleguide
.list-with-hyphen - list

PC, Mobileとも - ハイフンマーカーリスト
```
<ul class="list-with-hyphen">
  <li><a href="/an/gc/">Gas Chromatography</a></li>
  <li><a href="/an/hplc/">Liquid Chromatography</a></li>
  <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
  <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry</a></li>
  <li><a href="/an/system-gc/">System GC</a></li>
  <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
</ul>
```
*/
.list-with-hyphen li {
  line-height: 1.3333;
  padding-left: 1em;
  font-size: 1.2rem;
  margin-bottom: 1.4em;
  position: relative;
}

@media all and (min-width: 740px) {
  .list-with-hyphen li {
    line-height: 1.4285;
    font-size: 1.4rem;
    margin-bottom: 0.75em;
    text-indent: -8px;
    padding-left: 16px;
  }
}

.list-with-hyphen li::before {
  left: 0px;
  display: inline-block;
  position: absolute;
  content: "-";
}

@media all and (min-width: 740px), print {
  .list-with-hyphen li::before {
    position: static;
    margin-right: 8px;
  }
}

/*#styleguide
.list-with-link - list

Mobile時にリンクデコレーションなしのスタイル。ul以外でも親要素に指定すれば配下のaに適用。
```
<ul class="list-with-link">
  <li><a href="/an/gc/">Gas Chromatography</a></li>
  <li><a href="/an/hplc/">Liquid Chromatography</a></li>
  <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
  <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry</a></li>
  <li><a href="/an/system-gc/">System GC</a></li>
  <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
</ul>
```
*/
.list-with-link a {
  text-decoration: none;
}

@media all and (min-width: 740px) {
  .list-with-link a {
    text-decoration: underline;
  }
  .list-with-link a:hover {
    text-decoration: none;
  }
}

/*#styleguide
.

PC - ハイフンマーカー付きリンクリストを3カラムで表示
Mobile - 非表示
```
<div class="list-category-link">
  <div class="parent-block parent-block-3-col block block-with-gray-background font-color-pale">
    <ul class="unit list-with-hyphen">
      <li><a href="/an/gc/">Gas Chromatography</a></li>
      <li><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/system-gc/">System GC</a></li>
      <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
    </ul>
    <ul class="unit list-with-hyphen">
      <li><a href="/an/ms/">Mass Spectrometry</a></li>
      <li><a href="/an/molecular_spectro/">Molecular Spectroscopy</a></li>
      <li><a href="/an/elemental/">Elemental Analysis</a></li>
      <li><a href="/an/consum/">Columns and Consumables</a></li>
      <li><a href="/an/surface/">Surface Analysis</a></li>
      <li><a href="/an/lifescience/">Life Science Lab Instruments</a></li>
      <li><a href="/an/toc/">Total Organic Carbon Analysis</a></li>
    </ul>
    <ul class="unit list-with-hyphen">
      <li><a href="/an/monitoring/">Continuous Monitoring Analysis</a></li>
      <li><a href="/an/thermal/">Thermal Analysis</a></li>
      <li><a href="/an/powder/">Particle Size Analysis</a></li>
      <li><a href="/an/test/">Materials Testing &amp; Inspection</a></li>
      <li><a href="/an/ndi/">Non-Destructive Testing</a></li>
      <li><a href="/an/balance/">Balances</a></li>
    </ul>
  </div>
</div>
```
*/
.list-category-link {
  margin-bottom: 40px;
}

@media all and (min-width: 740px) {
  .list-category-link {
    display: block;
    padding-bottom: 0px;
  }
  .list-category-link .unit {
    margin: 0 15px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
  }
}

/*#styleguide
.virtualAdvisorList - block, layout, link

PC - テキストリンクを4カラムで表示
Mobile - テキストリンクを2カラムで表示
```
<section class="list-virtual-advisor">
  <ul class="parent-block parent-block-col-4-sm-normal list-with-hyphen font-color-pale">
    <li class="unit"><a href="https://nexerava.ssi.shimadzu.com/">UHPLC VIRTUAL ADVISOR</a></li>
    <li class="unit"><a href="https://prominenceva.ssi.shimadzu.com/">HPLC, LCMS VIRTUAL ADVISOR</a></li>
    <li class="unit"><a href="https://tocvva.ssi.shimadzu.com/">TOC VIRTUAL ADVISOR</a></li>
    <li class="unit"><a href="https://toclva.ssi.shimadzu.com/">TOC-L VIRTUAL ADVISOR</a></li>
  </ul>
</section>
```
*/
.list-virtual-advisor {
  margin-bottom: 20px;
}

@media all and (min-width: 740px) {
  .list-virtual-advisor li {
    line-height: 2.1428;
  }
}

/*#styleguide
.softwares - link, list

PC, Mobileとも - 折り返し字下げのリスト
```
<section class="list-softwares">
  <ul class="list-text-indent-small font-color-pale">
    <li><a href="/an/data-net/labsolutions/labsol-1.html">LabSolutions</a> : Analysis Data System Compliant with ER/ES Regulations Progress Configuration of LabSolutions System</li>
    <li><a href="/an/data-net/class-agent/agent.html">CLASS-Agent</a> : Analysis Data System Compliant with ER/ES Regulations Progress Configuration of LabSolutions System</li>
    <li><a href="/an/data-net/limssolution/limssolution.html">LIMSsolution</a> : Analysis Data System Compliant with ER/ES Regulations Progress Configuration of LabSolutions System</li>
    <li><a href="/an/data-net/cr8a.html">C-R8A</a> : Analysis Data System Compliant with ER/ES Regulations Progress Configuration of LabSolutions System</li>
    <li><a href="/an/data-net/empower/gcdriver.html">Waters Empower<sup>TM</sup> Shimadzu GC Driver Version 2</a></li>
    <li><a href="/an/data-net/empower/gcdriver.html">OpenLAB CDS EZChrom Edition GC Driver for Ver. 1.00</a></li>
  </ul>
</section>
```
*/
.list-softwares {
  padding-bottom: 20px;
}

@media all and (min-width: 740px) {
  .list-softwares {
    padding-bottom: 40px;
  }
}

.list-text-indent-small li {
  line-height: 1.6666;
  text-indent: -1em;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
  margin-left: 1em;
}

.list-text-indent-small li a {
  color: #464646;
}

@media all and (min-width: 740px) {
  .list-text-indent-small {
    margin: 0px 15px;
  }
  .list-text-indent-small li {
    line-height: 1.5;
    font-size: 1.4rem;
  }
}

/*#styleguide
.noBullets - link

PC, Mobileとも - マーカーなしリスト
```
<ul class="list-with-no-marker">
  <li><a href="/an/literature/test/jpi715005.html">Observation of Bending Fatigue Testing of Metal Plate at Ultrasonic Frequency</a></li>
  <li><a href="/an/literature/test/jpi715004.html">High-Speed Imaging of Laser Ablation Process</a></li>
  <li><a href="/an/literature/etc/jpz14001.html">Shimadzu Analytical and Measuring Instruments</a></li>
</ul>
```
*/
.list-with-no-marker {
  padding: 10px 0px 30px;
}

.list-with-no-marker li {
  line-height: 1.6666;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

@media all and (min-width: 740px) {
  .list-with-no-marker {
    margin: 0px 15px;
  }
  .list-with-no-marker li {
    line-height: 1.5;
    font-size: 1.4rem;
  }
}

/*#styleguide
.relatedContents - link

PC - 右寄せのテキストリンク
Mobile - 一行ごとに開業された右寄せのテキストリンク
```
<section class="list-related">
  <ul class="list-align-right">
    <li><a href="https://solutions.shimadzu.co.jp/an/procedure/app/signature_signin.faces?return=http%3A%2F%2Fsearch1.shimadzu.co.jp%2Fsearch%3Fsite%3DEM0AJRZ6%26design%3D2%26group%3D1"><i class="custom-icon icon-signin"></i><span class="link-text">SIGN IN</span></a> | <a href="https://solutions.shimadzu.co.jp/an/procedure/app/tempRegistration.faces?return=http%3A%2F%2Fsearch1.shimadzu.co.jp%2Fsearch%3Fsite%3DEM0AJRZ6%26design%3D2%26group%3D1"><span class="link-text">REGISTER</span></a></li>
    <li><a href="/an/gc-datasheet.html"><span class="link-text">GC Application Data Sheet</span></a></li>
  </ul>
</section>
```
*/
.list-related {
  padding-bottom: 10px;
}

.list-align-right {
  text-align: right;
}

.list-align-right li {
  margin: 0px 0px 0.5em 30px;
  text-align: right;
  line-height: 1.5;
  font-size: 1.4rem;
  display: inline-block;
}

.list-align-right li .custom-icon {
  margin-right: 5px;
  position: relative;
  top: 2px;
  font-size: 18px;
}

.list-align-right li a {
  text-decoration: none;
}

@media all and (min-width: 740px) {
  .list-align-right li {
    line-height: 1.5;
    font-size: 1.6rem;
    margin-bottom: 0.75em;
  }
  .list-align-right li .custom-icon {
    margin-right: 10px;
    top: 2px;
    font-size: 20px;
  }
  .list-align-right li a:hover .link-text {
    text-decoration: underline;
  }
}

.state-signin {
  padding-top: 30px;
  position: relative;
}

.state-signin.list-align-right li .custom-icon {
  top: 4px;
  right: -10px;
}

.user-name-area {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
}

/*#styleguide
.list-with-arrow - list

PC, Mobileとも - 赤矢印付きリスト
```
<ul class="list-with-arrow">
  <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/data-net/">Data Management &amp; Software</a></li>
</ul>
```
*/
.list-with-arrow {
  padding-left: 15px;
}

.list-with-arrow li {
  margin-bottom: 12px;
  text-indent: -15px;
  line-height: 1.66667;
  font-size: 1.2rem;
  font-weight: 600;
}

.list-with-arrow li a {
  text-decoration: none;
}

.list-with-arrow li.current-editting,
.list-with-arrow li.not-published {
  text-indent: 0;
}

@media all and (min-width: 740px) {
  .list-with-arrow li {
    line-height: 1.5;
    font-size: 1.4rem;
  }
  .list-with-arrow li a:hover {
    text-decoration: underline;
  }
}

/*#styleguide
.list-with-children - list

PC, Mobileとも - 親子関係のあるリスト
```
<ul class="list-with-arrow list-with-children">
  <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/data-net/">Data Management &amp; Software</a></li>
</ul>
<ul class="list-with-arrow list-with-children">
  <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
  <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
  <li>
    <ul class="list-with-hyphen font-color-pale">
      <li><a href="/an/gc/">Gas Chromatography</a></li>
      <li><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/system-gc/">System GC</a></li>
      <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
    </ul>
  </li>
</ul>
<ul class="list-with-arrow list-with-children">
  <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
  <li>
    <ul class="list-with-hyphen font-color-pale">
      <li><a href="/an/gc/">Gas Chromatography</a></li>
      <li><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
      <li><a href="/an/system-gc/">System GC</a></li>
      <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
    </ul>
  </li>
</ul>
```
*/
.list-with-children {
  margin-bottom: 42px;
}

.list-with-children .list-with-hyphen {
  padding-left: 8px;
}

.list-with-children .list-with-hyphen li {
  text-indent: -8px;
  margin-bottom: 4px;
  padding-left: 15px;
  line-height: 2;
  font-weight: normal;
}

.list-with-children .list-with-hyphen li:before {
  margin-right: 0;
}

/*#styleguide
.list-with-children - list

PC, Mobileとも - 親子関係のあるリスト（PCでは3段組表示）
```
<div class="parent-block parent-block-col-3">
  <div class="unit">
    <ul class="list-with-arrow list-with-children">
      <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/data-net/">Data Management &amp; Software</a></li>
    </ul>
    <ul class="list-with-arrow list-with-children">
      <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
      <li>
        <ul class="list-with-hyphen font-color-pale">
          <li><a href="/an/gc/">Gas Chromatography</a></li>
          <li><a href="/an/hplc/">Liquid Chromatography</a></li>
          <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/system-gc/">System GC</a></li>
          <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="unit">
   <ul class="list-with-arrow list-with-children">
      <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
      <li>
        <ul class="list-with-hyphen font-color-pale">
          <li><a href="/an/gc/">Gas Chromatography</a></li>
          <li><a href="/an/hplc/">Liquid Chromatography</a></li>
          <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/system-gc/">System GC</a></li>
          <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
        </ul>
      </li>
    </ul>
    <ul class="list-with-arrow list-with-children">
      <li class="list-with-arrow-list-child"><a href="/an/gc/">Gas Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/hplc/">Liquid Chromatography</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
      <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
      <li>
        <ul class="list-with-hyphen font-color-pale">
          <li><a href="/an/gc/">Gas Chromatography</a></li>
          <li><a href="/an/hplc/">Liquid Chromatography</a></li>
          <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/system-gc/">System GC</a></li>
          <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="unit">
    <ul class="list-with-arrow list-with-children">
      <li class="list-with-arrow-list-child"><a href="/an/system-gc/">System GC</a></li>
      <li>
        <ul class="list-with-hyphen font-color-pale">
          <li><a href="/an/gc/">Gas Chromatography</a></li>
          <li><a href="/an/hplc/">Liquid Chromatography</a></li>
          <li><a href="/an/gcms/">Gas Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/lcms/">Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry Liquid Chromatograph-Mass Spectrometry</a></li>
          <li><a href="/an/system-gc/">System GC</a></li>
          <li><a href="/an/data-net/">Data Management &amp; Software</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
```
*/
/*#styleguide
.noBullets - link

PC, Mobileとも - 数字リスト
```
<ol class="list-with-number">
  <li><a href="/an/literature/test/jpi715005.html">Observation of Bending Fatigue Testing of Metal Plate at Ultrasonic Frequency</a></li>
  <li><a href="/an/literature/test/jpi715004.html">High-Speed Imaging of Laser Ablation Process</a></li>
  <li><a href="/an/literature/etc/jpz14001.html">Shimadzu Analytical and Measuring Instruments</a></li>
</ol>
```
*/
.list-with-number {
  padding: 10px 0 30px 2.4rem;
  overflow: visible;
}

.list-with-number li {
  line-height: 1.6666;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
  list-style: decimal;
  overflow: visible;
}

@media all and (min-width: 740px) {
  .list-with-number {
    padding: 10px 0 30px 2.8rem;
  }
  .list-with-number li {
    line-height: 1.5;
    font-size: 1.4rem;
  }
  .image-set-image-pull-left ~ .list-with-number {
    list-style: decimal;
    padding: 10px 0 30px;
    text-indent: -2.2em;
    list-style-position: inside;
  }
  .image-set-image-pull-left ~ .list-with-number li {
    list-style: inherit;
  }
}

.list-item-with-icon {
  position: relative;
}

.list-item-with-icon .custom-icon {
  position: absolute;
  left: 10px;
  font-size: 16px;
}

@media all and (min-width: 740px), print {
  .list-item-with-icon .custom-icon {
    left: 14px;
    font-size: 20px;
  }
}

.list-description {
  line-height: 1.4;
  margin-bottom: 10px;
}

.list-description dt,
.list-description dd {
  display: inline;
}

.list-description dt {
  font-weight: bold;
  font-weight: 600;
  margin-right: 10px;
}

.heading-with-anchor-link .list-left-align li:hover {
  text-decoration: none;
}

.heading-with-anchor-link .list-left-align a:hover {
  text-decoration: none;
}

.heading-with-anchor-link .list-left-align .link-text:hover {
  text-decoration: underline;
}

.list-for-bridge {
  line-height: 1.4;
}

.list-for-bridge a {
  display: inline-block;
  padding-top: 10px;
}

.list-for-bridge ul {
  padding-left: 10px;
}

.list-with-disc {
  padding-left: 20px;
}

.list-with-disc li {
  list-style: disc;
  line-height: 1.8;
}

.list-with-asterisk,
.list-with-asterisk-and-number,
.list-with-string {
  margin-bottom: 1.4em;
}

@media all and (min-width: 740px), print {
  .list-with-asterisk,
  .list-with-asterisk-and-number,
  .list-with-string {
    margin-bottom: 0.75em;
  }
}

.list-with-asterisk.is_textSmall,
.list-with-asterisk-and-number.is_textSmall,
.list-with-string.is_textSmall {
  font-size: 10px;
}

.list-with-asterisk li,
.list-with-asterisk-and-number li,
.list-with-string li {
  line-height: 1.3;
  margin-bottom: 1.4em;
}

.list-with-asterisk {
  padding-left: 10px;
  text-indent: -10px;
}

.list-with-asterisk.is_textSmall {
  padding-left: 7px;
  text-indent: -7px;
}

.list-with-asterisk li:before {
  content: "*";
}

.list-with-asterisk-and-number {
  counter-reset: number;
  padding-left: 32px;
  text-indent: -32px;
}

.list-with-asterisk-and-number.is_textSmall {
  padding-left: 25px;
  text-indent: -25px;
}

.list-with-asterisk-and-number li:before {
  counter-increment: number;
  content: "*" counter(number) ")";
  margin-right: 5px;
}

.list-with-string li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.list-with-string-prefix {
  width: 20%;
}

@media all and (min-width: 740px), print {
  .list-with-string-prefix {
    width: 7%;
  }
}

.list-with-string-text {
  width: 80%;
}

@media all and (min-width: 740px), print {
  .list-with-string-text {
    width: 93%;
  }
}

.list-with-string.is_textSmall .list-with-string-prefix {
  width: 16%;
}

@media all and (min-width: 740px), print {
  .list-with-string.is_textSmall .list-with-string-prefix {
    width: 5%;
  }
}

.list-with-string.is_textSmall .list-with-string-text {
  width: 84%;
}

@media all and (min-width: 740px), print {
  .list-with-string.is_textSmall .list-with-string-text {
    width: 95%;
  }
}

/*
#overview
btn

ボタン
*/
/*#styleguide
.btn.btn-primary

```

<p><a href="#" class="btn btn-primary">See All<i class="icon-chevron-right custom-icon"></i></a></p>
```
*/
.btn,
.webform-next,
.webform-previous,
.webform-submit {
  margin: auto;
  padding: 12px 10px;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  position: relative;
  border: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}

.btn.btn-download,
.btn-download.webform-next,
.btn-download.webform-previous,
.btn-download.webform-submit {
  font-size: 1.2rem;
  padding: 5px 8px;
}

.btn.btn-download .custom-icon,
.btn-download.webform-next .custom-icon,
.btn-download.webform-previous .custom-icon,
.btn-download.webform-submit .custom-icon {
  font-size: 16px;
  margin-right: 8px;
  position: relative;
  top: 1px;
}

.btn.btn-download.is_wide,
.btn-download.is_wide.webform-next,
.btn-download.is_wide.webform-previous,
.btn-download.is_wide.webform-submit {
  font-size: 14px;
  padding: 10px 15px;
}

.btn.btn-download.is_wide .custom-icon,
.btn-download.is_wide.webform-next .custom-icon,
.btn-download.is_wide.webform-previous .custom-icon,
.btn-download.is_wide.webform-submit .custom-icon {
  font-size: 16px;
  margin-right: 10px;
}

@media all and (min-width: 740px) {
  .btn,
  .webform-next,
  .webform-previous,
  .webform-submit {
    padding: 11px 40px;
    -webkit-transition: 0.12s linear;
    transition: 0.12s linear;
    line-height: 1;
    font-size: 1.3rem;
  }
  .btn.btn-download,
  .btn-download.webform-next,
  .btn-download.webform-previous,
  .btn-download.webform-submit {
    font-size: 1.4rem;
    padding: 7px 8px;
  }
  .btn.btn-download.is_wide,
  .btn-download.is_wide.webform-next,
  .btn-download.is_wide.webform-previous,
  .btn-download.is_wide.webform-submit {
    font-size: 1.6rem;
    padding: 12px 18px;
  }
  .btn.btn-download.is_wide .custom-icon,
  .btn-download.is_wide.webform-next .custom-icon,
  .btn-download.is_wide.webform-previous .custom-icon,
  .btn-download.is_wide.webform-submit .custom-icon {
    font-size: 18px;
    margin-right: 10px;
  }
}

.btn-primary,
.webform-next,
.webform-previous,
.webform-submit {
  color: #fff;
  background-color: #000;
  text-align: center;
}

.btn-primary .custom-icon,
.webform-next .custom-icon,
.webform-previous .custom-icon,
.webform-submit .custom-icon {
  margin-left: 8px;
  color: #ad0000;
}

.btn-primary:hover .custom-icon,
.webform-next:hover .custom-icon,
.webform-previous:hover .custom-icon,
.webform-submit:hover .custom-icon {
  color: #fff;
}

@media all and (min-width: 740px) {
  .btn-primary,
  .webform-next,
  .webform-previous,
  .webform-submit {
    -moz-transition: all 0.12s linear;
    -o-transition: all 0.12s linear;
    -webkit-transition: all 0.12s linear;
    padding: 12px 15px 12px 40px;
  }
  .btn-primary:hover,
  .webform-next:hover,
  .webform-previous:hover,
  .webform-submit:hover {
    background-color: #ff0000;
  }
  .btn-primary .custom-icon,
  .webform-next .custom-icon,
  .webform-previous .custom-icon,
  .webform-submit .custom-icon {
    margin-left: 15px;
    font-size: 12px;
    position: relative;
    top: 2px;
  }
}

/*#styleguide
.btn.btn-default

```

<p><a href="#" class="btn btn-default">See All<i class="icon-chevron-right custom-icon"></i></a></p>
```
*/
.btn-default {
  border: 1px solid #cccccc;
  color: #000;
  padding: 8px 20px;
  font-size: 1.4rem;
}

@media all and (min-width: 740px), print {
  .btn-default {
    padding: 12px 15px 12px 40px;
  }
}

.btn-default .custom-icon {
  margin-left: 8px;
}

@media all and (min-width: 740px), print {
  .btn-default .custom-icon {
    margin-left: 15px;
    font-size: 12px;
    position: relative;
    top: 2px;
  }
}

.btn-light-gray {
  background-color: #666;
  color: #fff;
}

.btn-light-gray:hover {
  background-color: #ff0000;
}

/*#styleguide
.btn.btn-search

```

<p><a href="#" class="btn btn-search">SEARCH<i class="custom-icon icon-contact"></i></a></p>
```
*/
.btn-search {
  background-color: #000;
  -webkit-transition: all 0.1s linear;
  -webkit-transition: 0.1s linear;
  transition: 0.1s linear;
  padding: 8px 35px 9px 15px;
  line-height: 1;
  font-size: 1rem;
  color: #fff;
}

.btn-search:hover {
  background-color: #ff0000;
}

@media all and (min-width: 740px), print {
  .btn-search {
    padding: 12px 60px 11px 40px;
    font-size: 1.4rem;
  }
}

.btn-search .icon-contact,
.btn-search .icon-close,
.btn-search header #head .container #headHamb.on,
header #head .container .btn-search #headHamb.on {
  position: absolute;
}

.btn-search .icon-contact {
  right: 14px;
  top: 28%;
  font-size: 12px;
}

@media all and (min-width: 740px), print {
  .btn-search .icon-contact {
    right: 30px;
    top: 9px;
    font-size: 19px;
  }
}

.btn-search .icon-close,
.btn-search header #head .container #headHamb.on,
header #head .container .btn-search #headHamb.on {
  right: 20px;
  top: 8px;
  font-size: 11px;
}

@media all and (min-width: 740px), print {
  .btn-search .icon-close,
  .btn-search header #head .container #headHamb.on,
  header #head .container .btn-search #headHamb.on {
    right: 38px;
    top: 13px;
    font-size: 12px;
  }
}

/*
#overview
block

ブロックのスタイル調整(CKEditor用)
*/
.webform-client-form {
  padding: 0;
}

.u-ckeditor .block {
  padding: 15px 10px 10px;
}

@media all and (min-width: 740px), print {
  .block.is_wide,
  .is_wide.webform-client-form {
    padding: 30px 30px 10px;
  }
}

/*#styleguide
.block-with-gray-background
```
<div class="block block-with-gray-background">text text text <a href="#">link text</a></div>
```
*/
.block-with-gray-background,
.webform-client-form {
  background-color: whitesmoke;
}

/*#styleguide
.toLiterature - block, icon, link

PC, Mobileとも - アイコン付きのテキストリンク
```
<section class="block-with-dark-border block-with-link block-with-link-with-icon">
  <i class="custom-icon icon-book"></i><a href="/an/literature/gc/jpc113002.html">High Sensitivity Gas Chromatograph System Tracera Brochure</a>
</section>
```
*/
.block-with-light-gray-border {
  border: 1px solid #bababa;
}

.block-with-dark-border {
  border: 1px solid #464646;
}

.block-with-link {
  margin: 20px 0px 5px;
  padding: 12px 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
}

.block-with-link a {
  display: block;
  line-height: 1.5;
  font-size: 1.4rem;
}

@media all and (min-width: 740px) {
  .block-with-link {
    margin: 30px 0px 15px;
    padding: 40px 55px;
  }
  .block-with-link a {
    line-height: 1.5;
    font-size: 1.6rem;
  }
}

.block-with-link-with-icon .custom-icon {
  font-size: 25px;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-right: 26px;
}

@media all and (min-width: 740px), print {
  .block-with-link-with-icon .custom-icon {
    font-size: 66px;
    margin-right: 55px;
  }
}

/*
Todo: 整理する
<div class="block block-with-gray-background">
          <p><a href="/an/n9j25k00000mry72.html">Note on the Use of Windows 10</a></p>
        </div>
*/
#main .noteOnWin10 {
  padding: 13px 10px 3px;
  margin-right: -10px;
  margin-bottom: 20px;
  margin-left: -10px;
  background-color: whitesmoke;
}

@media all and (min-width: 740px) {
  #main .noteOnWin10 {
    margin-right: auto;
    margin-left: auto;
  }
}

@media all and (min-width: 740px) {
  #main .noteOnWin10 {
    padding: 12px 15px 0px;
  }
}

#main .noteOnWin10 p {
  line-height: 1.6666;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  #main .noteOnWin10 p {
    line-height: 1.5;
    font-size: 1.6rem;
  }
}

#main .catLead p {
  line-height: 1.5;
  font-size: 1.4rem;
}

@media all and (min-width: 740px) {
  #main .catLead p {
    line-height: 1.5;
    font-size: 1.6rem;
  }
}

.block-with-thin-dark-border {
  border: 2px solid #bababa;
  padding: 0 10px;
}

.user-loggedin,
.not-published,
.current-editting {
  position: relative;
  padding: 30px 10px 10px;
}

.user-loggedin:after,
.not-published:after,
.current-editting:after {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: bold;
}

.not-published {
  background-color: #f7f1f3;
  border: 1px solid #d2b0be;
}

.not-published:after {
  content: "Private";
  border-bottom: 1px solid #d2b0be;
  border-right: 1px solid #d2b0be;
  color: #94556f;
  background-color: #e5d0d9;
}

.current-editting {
  background-color: #fbf8e3;
  border: 1px solid #ede38b;
}

.current-editting:after {
  content: "Editting";
  border-bottom: 1px solid #ede38b;
  border-right: 1px solid #ede38b;
  color: #c1b01e;
  background-color: #f4eeb7;
}

.with-mobile-container {
  margin-right: 10px;
  margin-left: 10px;
}

@media all and (min-width: 740px), print {
  .with-mobile-container {
    margin-right: auto;
    margin-left: auto;
  }
}

.footer-PDF-download {
  background-color: #ddd;
  margin-bottom: 100px;
  padding: 10px;
}

.footer-PDF-download:after {
  content: " ";
  display: block;
  clear: both;
}

.footer-PDF-download .PDF-baner {
  float: left;
  margin-right: 10px;
}

.footer-PDF-download .PDF-text {
  overflow: hidden;
}

/*
#overview
lead

テキストのレイアウト調整
*/
/*#styleguide
.lead - text

PC - 左右の余白・フォントサイズの拡大で他の文章と区別
Mobile - フォントサイズの縮小で他の文章と区別
```
<div id="topMain">
  <div class="container">
    <p class="lead">
      Shimadzu provides a broad range of analytical instruments indispensable for research, development, and quality control in a variety of fields. Our high - level, sophisticated instruments include chromatographs , spectrometers, and elemental and surfaceanalysis systems. We also provide a broad range of high-precision physical testing and measuring technology that is essential for product development and quality assurance.
    </p>
  </div>
</div>
```
*/
.lead {
  margin: 0 0 35px;
  line-height: 1.6666;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .lead {
    margin: 0 130px 55px;
    line-height: 1.5;
    font-size: 1.6rem;
  }
}

/*
#overview
table

Todo: jsの調整とスタイルの適用確認

表組みのスタイル
*/
/*#styleguide
.table .table-basic - table

PC - 表組み
Mobile - 表を別ウインドウで表示するリンク
```

<div class="table-area js-table-popup">
  <table class="table table-basic">
    <colgroup>
      <col width="50%">
      <col width="50%">
    </colgroup>
    <tr>
      <th>Detector Type</th>
      <th>Detectable Compounds</th>
    </tr>
    <tr>
      <td>Barrier discharge ionization detector (BID)</td>
      <td>All, except He and Ne</td>
    </tr>
    <tr>
      <td>Thermal conductivity detector (TCD)</td>
      <td>All, except carrier gas</td>
    </tr>
    <tr>
      <td>Flame ionization detector (FID)</td>
      <td>Organic compounds, except formaldehyde and formic acid</td>
    </tr>
  </table>
  <p class="btn"><a href="javascript:void(0);" class="openWin"><img src="./images/open_table.png" alt="Open the table In a new window"></a></p>
</div>
```
*/
.table-area {
  padding-bottom: 25px;
  overflow-x: auto;
}

@media all and (min-width: 740px), print {
  .table-area {
    overflow: auto;
  }
}

.table {
  width: 100%;
}

.table th,
.table td {
  vertical-align: top;
}

.table th {
  padding: 6px 8px;
  line-height: 1.6666;
  font-size: 1.2rem;
}

.table td {
  padding: 6px 8px;
  line-height: 1.6666;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .table {
    display: table;
  }
  .table th {
    padding: 12px 18px;
    line-height: 1.5;
    font-size: 1.6rem;
    font-weight: 600;
  }
  .table td {
    padding: 16px 18px;
    line-height: 1.4285;
    font-size: 1.4rem;
  }
}

.table-basic {
  border-top-color: #bababa;
  border-left-color: #bababa;
  border-top-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-left-style: solid;
}

.table-basic th {
  background: #dddddd;
  border-right-color: #bababa;
  border-bottom-color: #bababa;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
}

.table-basic td {
  border-right-color: #bababa;
  border-bottom-color: #bababa;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-right-style: solid;
  border-bottom-style: solid;
}

.table-basic.table-basic-col-narrow th,
.table-basic.table-basic-col-narrow td {
  padding: 16px 6px;
}

.table-area .btn,
.table-area .webform-next,
.table-area .webform-previous,
.table-area .webform-submit {
  padding-bottom: 0px;
  text-align: center;
}

.table-area .btn img,
.table-area .webform-next img,
.table-area .webform-previous img,
.table-area .webform-submit img {
  width: 100%;
  height: auto;
  max-width: 300px;
}

@media all and (min-width: 740px) {
  .table-area .btn,
  .table-area .webform-next,
  .table-area .webform-previous,
  .table-area .webform-submit {
    display: none;
  }
}

/*#styleguide
.table .table-basic - table

Mobile - ポップアップ時のテーブル
```

<div class="tableStyle01">
<table class="table table-basic">
    <colgroup>
      <col width="50%">
      <col width="50%">
    </colgroup>
    <tbody><tr>
      <th>Detector Type</th>
      <th>Detectable Compounds</th>
    </tr>
    <tr>
      <td>Barrier discharge ionization detector (BID)</td>
      <td>All, except He and Ne</td>
    </tr>
    <tr>
      <td>Thermal conductivity detector (TCD)</td>
      <td>All, except carrier gas</td>
    </tr>
    <tr>
      <td>Flame ionization detector (FID)</td>
      <td>Organic compounds, except formaldehyde and formic acid</td>
    </tr>
  </tbody></table>
</div>
</p>
<p class="text-center table-btn-area"><a href="javascript:window.close();" class="btn btn-default"><i class="icon icon-close"></i>close</a>
</p>
```
*/
.table-btn-area {
  margin-top: 15px;
}

.table-btn-area .icon {
  position: relative;
  top: 2px;
  margin-right: 10px;
}

table.layout {
  line-height: 1.6;
  margin-bottom: 20px;
}

table.layout th,
table.layout td {
  vertical-align: top;
  padding-right: 10px;
}

.text-attention {
  line-height: 1.5;
  font-size: 1rem;
}

@media all and (min-width: 740px) {
  .text-attention {
    line-height: 1.7142;
    font-size: 1.4rem;
  }
}

.text-lead {
  line-height: 1.5;
  font-size: 1.6rem;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
#overview
tag

タグ
*/
/*#styleguide
.tag-success

```
<span class="tag tag-success">タグ</span>
<span class="tag tag-danger">タグ</span>
<span class="tag tag-disable">タグ</span>
<span class="tag tag-new">NEW</span>
```
*/
.tag {
  padding: 3px 12px;
  display: inline-block;
  line-height: 1;
  font-size: 10px;
  background-color: #fff;
  text-indent: 0;
}

@media (min-width: 740px) {
  .tag {
    font-size: 12px;
  }
}

.tag-success {
  border: 1px solid #000;
  color: #000;
}

.tag-danger {
  border: 1px solid red;
  color: red;
}

.tag-disable {
  border: 1px solid #777;
  color: #777;
}

.tag-new {
  background: #000;
  color: #fff;
}

.heading-normal .tag {
  position: relative;
  top: -3px;
  margin-left: 5px;
}

@media (min-width: 740px) {
  .heading-normal .tag {
    top: -5px;
  }
}

.list-with-arrow .tag,
.list-with-hyphen .tag {
  margin-left: 8px;
}

/*
テスト用のコメント_02です。
複数のmoduleを組み合わせて成立しており、使用箇所によってレイアウトに手を加えてあるスタイルをcomponentとして扱っています。
*/
/*
#overview
topVi

トップメインビジュアルスライド部分
*/
/*#styleguide
.topVi

```

// TODO: プレビューの修正。
<section class="topVi">
  <ul class="slider">
    <li><a href="#"><img src="./images/vi_01_sp.jpg" alt=""></a></li>
    <li><a href="#"><img src="./images/vi_01_sp.jpg" alt=""></a></li>
    <li><a href="#"><img src="./images/vi_01_sp.jpg" alt=""></a></li>
  </ul>
  <ul class="sliderPC">
    <li style="background-image:url('../images/vi_01.jpg');"><a href="#"></a></li>
    <li style="background-image:url('../images/vi_01.jpg');"><a href="#"></a></li>
    <li style="background-image:url('../images/vi_01.jpg');"><a href="#"></a></li>
  </ul>
  <section class="info">
    <div class="ticker">
      <div class="slide">
        <div class="unit">
          <span class="date">Oct 26, 2016</span>
          <span class="cat">News</span>
          <a href="#">FTIR TALK LETTER Vol. 24 is now available.</a>
        </div>
        <div class="unit">
          <span class="date">Oct 26, 2016</span>
          <span class="cat">News</span>
          <a href="#">FTIR TALK LETTER Vol. 24 is now available.</a>
        </div>
        <div class="unit">
          <span class="date">Oct 26, 2016</span>
          <span class="cat">News</span>
          <a href="#">FTIR TALK LETTER Vol. 24 is now available.</a>
        </div>
      </div>
    </div>
    <a href="/an/news-events/" class="more">Read More</a>
  </section>
</section>

```
*/
.topVi {
  margin-top: 68px;
  position: relative;
}

@media (min-width: 740px), print {
  .topVi {
    margin-top: 151px;
    height: 480px;
  }
}

@media print {
  .topVi {
    margin-top: 0;
  }
}

@media (min-width: 740px), print {
  .topVi .slider {
    display: none;
  }
}

.topVi .slider li a {
  display: block;
}

.topVi .slider li a img {
  width: 100%;
  height: auto;
}

.topVi .sliderPC {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 480px;
}

@media (min-width: 740px), print {
  .topVi .sliderPC {
    display: block;
  }
}

.topVi .sliderPC .slick-list li {
  background-size: cover;
  background-position: center center;
}

.topVi .sliderPC .slick-list li a {
  display: block;
  height: 480px;
  width: 100%;
}

.topVi .thumbWrap {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  border-bottom: 1px solid #ddd;
}

@media (min-width: 740px), print {
  .thumbWrapWrapper {
    background-color: rgba(255, 255, 255, 0.6);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .topVi .thumbWrap {
    width: 1040px;
    margin: 0 auto;
    border-top: 1px solid #ddd;
    -ms-flex-wrap: none;
    flex-wrap: nowrap;
  }
}

.topVi .thumbWrap li {
  width: 34% !important;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  justify-content: center;
  min-height: 55px;
  left: 0 !important;
  text-align: center;
  float: none;
  outline: none;
  height: auto;
  background-color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1.18182;
  padding: 8px 6px;
  text-align: center;
  text-decoration: none;
  border-top: 1px solid #ddd;
}

@media (min-width: 740px), print {
  .topVi .thumbWrap li {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.25;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0 auto;
    padding: 8px 3px;
    min-height: 0;
    border-top: none;
    width: auto !important;
    height: 56px;
    cursor: pointer;
  }
}

.topVi .thumbWrap li:nth-child(3n),
.topVi .thumbWrap li:nth-child(3n-1) {
  width: 33% !important;
}

@media (min-width: 740px), print {
  .topVi .thumbWrap li:nth-child(3n),
  .topVi .thumbWrap li:nth-child(3n-1) {
    width: auto !important;
  }
}

.topVi .thumbWrap li.slick-active {
  background-color: #ff0000;
  color: white;
}

.topVi .thumbWrap li.pr {
  background-color: rgba(221, 221, 221, 0.6);
}

.topVi .thumbWrap li.pr.slick-active {
  background-color: #ff0000;
}

.slick-dots-status {
  display: none;
}

.display-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight {
    height: 350px;
    background-color: white;
  }
}

.topVi.for_shortHeight .slider .slick-list .slick-track .slick-slide {
  background-color: #ebebeb;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .sliderPC {
    height: 350px;
    position: static;
    border-right: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
  }
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .sliderPC .slick-list li .sliderPC-link {
    height: 350px;
    position: relative;
    z-index: 999;
  }
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .sliderPC .slick-list .slick-active {
    height: 350px;
  }
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText,
  .topVi.for_shortHeight .sliderPC .sliderText {
    position: absolute;
    width: 100%;
  }
}

.topVi.for_shortHeight .slider .sliderText-item,
.topVi.for_shortHeight .sliderPC .sliderText-item {
  padding: 20px 10px 40px;
  background-color: #ebebeb;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText-item,
  .topVi.for_shortHeight .sliderPC .sliderText-item {
    padding: 30px 30px 56px;
    width: 1040px;
    margin: 0 auto;
    background-color: transparent;
  }
}

.topVi.for_shortHeight .slider .sliderText-item-heading,
.topVi.for_shortHeight .sliderPC .sliderText-item-heading {
  font-size: 1.8rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText-item-heading,
  .topVi.for_shortHeight .sliderPC .sliderText-item-heading {
    font-size: 3rem;
  }
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText-item-description,
  .topVi.for_shortHeight .sliderPC .sliderText-item-description {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

.topVi.for_shortHeight .slider .sliderText-item-button,
.topVi.for_shortHeight .sliderPC .sliderText-item-button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText-item-button,
  .topVi.for_shortHeight .sliderPC .sliderText-item-button {
    display: block;
    z-index: 1000;
    position: relative;
  }
}

.topVi.for_shortHeight .slider .sliderText-item-button-link,
.topVi.for_shortHeight .sliderPC .sliderText-item-button-link {
  width: 49%;
  margin: 0 0 5px;
  margin-right: 2%;
  height: auto;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .slider .sliderText-item-button-link,
  .topVi.for_shortHeight .sliderPC .sliderText-item-button-link {
    width: auto;
    display: inline-block;
  }
}

.topVi.for_shortHeight .slider .sliderText-item-button-link:nth-child(2n),
.topVi.for_shortHeight .sliderPC .sliderText-item-button-link:nth-child(2n) {
  margin-right: 0;
}

.topVi.for_shortHeight .thumbWrapWrapper {
  margin: 0 auto;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
}

@media all and (min-width: 740px), print {
  .topVi.for_shortHeight .thumbWrapWrapper {
    bottom: 0;
  }
}

.topVi.for_shortHeight .thumbWrapWrapper .thumbWrap.hidden-pc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom: none;
}

.topVi.for_shortHeight .thumbWrapWrapper .thumbWrap.hidden-pc li {
  text-indent: -9999px;
  width: 10% !important;
  padding: 0;
  min-height: 5px;
  height: 5px;
  margin-right: 5px;
  background-color: #c2c2c2;
}

.topVi.for_shortHeight .thumbWrapWrapper .thumbWrap.hidden-pc li.slick-active {
  background-color: #ff0000;
}

.topVi.for_shortHeight .thumbWrapWrapper .thumbWrap.hidden-sp li {
  overflow: hidden;
}

.prVi {
  margin-bottom: 60px;
}

.pr-slider {
  padding-bottom: 30px;
  position: relative;
}

.pr-slider li:not(:first-child) {
  display: none;
}

.pr-slider li.slick-slide {
  display: block;
}

.pr-slider .slick-dots {
  text-align: center;
  margin-top: 15px;
}

@media all and (min-width: 740px), print {
  .pr-slider .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
  }
}

.pr-slider .slick-dots li {
  position: static;
  margin: 0 10px;
  padding: 0;
  width: auto;
  display: inline-block;
}

.pr-slider .slick-dots li button {
  padding: 0;
  border-radius: 5px;
  border: currentColor;
  -o-border-image: none;
  border-image: none;
  width: 8px;
  height: 8px;
  color: transparent;
  background-color: #b2b2b2;
}

@media all and (min-width: 740px), print {
  .pr-slider .slick-dots li button {
    width: 10px;
    height: 10px;
    cursor: pointer;
  }
}

.pr-slider .slick-dots li.slick-active button {
  background-color: red;
}

/*
#overview
gateways

大カテゴリの誘導用ナビゲーション
*/
/*#styleguide
.gateways - block, icon, layout, link

PC,Mobileとも - アイコン付きリンクブロックを3カラムで表示
```
<ul class="gateways">
  <li><a href="#"><i class="custom-icon icon-building"></i>About Shimadzu</a></li>
  <li><a href="#"><i class="custom-icon icon-contact"></i>Contact Search</a></li>
  <li><a href="#"><i class="custom-icon icon-earth"></i>Global Links</a></li>
</ul>
<ul class="gateways">
  <li><a href="#"><i class="custom-icon icon-inquiry"></i>お問い合わせ</a></li>
  <li><a href="#"><i class="custom-icon icon-tel"></i>営業連絡窓口</a></li>
  <li><a href="#"><i class="custom-icon icon-wrench"></i>修理・点検・保守</a></li>
</ul>
```
*/
.gateways {
  margin-bottom: 50px;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  justify-content: center;
}

@media (min-width: 740px), print {
  .gateways {
    margin-bottom: 38px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -moz-justify-content: space-between;
    justify-content: space-between;
  }
}

.gateways li {
  margin: 0 4px;
}

@media (min-width: 740px), print {
  .gateways li {
    border: 1px solid #999;
  }
}

.gateways li a {
  width: 94px;
  height: 94px;
  border: 1px solid #ccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  text-align: center;
  padding: 30px 0 0;
  font-size: 10px;
  text-decoration: none;
  line-height: 1.4;
}

.gateways li a .custom-icon {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  font-size: 16px;
  color: #000;
  text-align: center;
}

@media (min-width: 740px), print {
  .gateways li a {
    width: 336px;
    height: auto;
    border: none;
    font-size: 18px;
    padding: 14px 20px 14px 0;
  }
  .gateways li a:hover {
    color: #ff0000;
  }
  .gateways li a .custom-icon {
    position: static;
    font-size: 30px;
    margin-right: 30px;
  }
  .gateways li a:hover .custom-icon {
    color: #ff0000;
  }
}

/*
#overview
featured article

アイコン
*/
/*#styleguide
.featured-article - block, label, layout, link

PC - 横方向に、1カラム・2カラム * 2行で1セットの、画像つきリンクブロックを表示
Mobile - 縦方向の、1カラム・2カラム * 2行で1セットの、画像つきリンクブロックを表示
```
<section class="featured-article">
  <div class="featured-article-main">
    <a href="#">
      <i class="featured-article-label">Movie</i>
      <figure class="featured-article-image"><img src="./images/top_feature_01.jpg" alt=""></figure>
      <figcaption class="featured-article-text">
        <h3 class="featured-article-caption">140TH ANNIVERSARY VIDEO</h3>
      </figcaption>
    </a>
  </div>
  <ul class="featured-article-sub">
    <li>
      <a href="#">
        <i class="featured-article-label">Products</i>
        <figure class="featured-article-image"><img src="./images/top_feature_02.jpg" alt=""></figure>
        <figcaption class="featured-article-text">
          <h3 class="featured-article-caption">i-Series</h3>
          <p class="featured-article-describe">New Industry Standard HPLCs</p>
        </figcaption>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="featured-article-label">Products</i>
        <figure class="featured-article-image"><img src="./images/top_feature_03.jpg" alt=""></figure>
        <figcaption class="featured-article-text">
          <h3 class="featured-article-caption">GCMS-TQ8040</h3>
          <p class="featured-article-describe">New Smart GCMS</p>
        </figcaption>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="featured-article-label">Other</i>
        <figure class="featured-article-image"><img src="./images/top_feature_04.jpg" alt=""></figure>
        <figcaption class="featured-article-text">
          <h3 class="featured-article-caption">LabTotal Vial</h3>
          <p class="featured-article-describe">Mass Spec Sample Vials</p>
        </figcaption>
      </a>
    </li>
    <li>
      <a href="#">
        <i class="featured-article-label">User's Voice</i>
        <figure class="featured-article-image"><img src="./images/top_feature_05.jpg" alt=""></figure>
        <figcaption class="featured-article-text">
          <h3 class="featured-article-caption">CONNECT WITH US</h3>
        </figcaption>
      </a>
    </li>
  </ul>
</section>
```
*/
.featured-article {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
}

@media all and (min-width: 740px), print {
  .featured-article {
    margin-bottom: 80px;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-flex-direction: row;
  }
}

.featured-article-main {
  margin-bottom: 15px;
}

.featured-article-sub li {
  width: 50%;
  padding-right: 5px;
  margin-bottom: 15px;
  float: left;
}

.featured-article-sub li:nth-child(2n) {
  padding-right: 0px;
  padding-left: 5px;
}

.featured-article a {
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
}

@media all and (min-width: 740px), print {
  .featured-article a .featured-article-label {
    transition: background 0.2s linear;
    top: 5px;
    line-height: 1;
    font-size: 1.3rem;
    -moz-transition: background 0.2s linear;
    -o-transition: background 0.2s linear;
    -webkit-transition: background 0.2s linear;
  }
}

@media all and (min-width: 740px), print {
  .featured-article a:hover .featured-article-label {
    background-color: #999999;
  }
}

@media all and (min-width: 740px), print {
  .featured-article a:hover .featured-article-caption {
    text-decoration: none;
  }
}

.featured-article-label {
  padding: 5px 10px;
  left: -3px;
  top: 3px;
  color: white;
  line-height: 1;
  letter-spacing: 0px;
  font-size: 0.9rem;
  display: inline-block;
  position: absolute;
  background-color: #2e2d32;
  z-index: 1;
}

.featured-article-image {
  margin-bottom: 5px;
}

@media all and (min-width: 740px), print {
  .featured-article-image {
    margin-bottom: 8px;
  }
}

.featured-article-image img {
  width: 100%;
  height: auto;
}

.featured-article-caption {
  line-height: 1.25;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: underline;
}

@media all and (min-width: 740px), print {
  .featured-article-caption {
    font-size: 1.6rem;
  }
}

.featured-article-describe {
  color: #777777;
  line-height: 1.75;
  font-size: 0.8rem;
}

@media all and (min-width: 740px), print {
  .featured-article-describe {
    line-height: 1.4285;
    font-size: 1.4rem;
  }
}

@media all and (min-width: 740px), print {
  .featured-article-sub {
    width: 512px;
  }
}

@media all and (min-width: 740px), print {
  .featured-article-sub li {
    margin: 0px;
    padding: 0px;
    min-height: 236px;
  }
}

@media all and (min-width: 740px), print {
  .featured-article-sub li .featured-article-image img {
    width: 248px;
  }
}

.breadcrumbs {
  border-bottom-color: #dddddd;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  display: none;
  position: relative;
  background-color: whitesmoke;
}

.breadcrumbs::before {
  left: 0px;
  top: 0px;
  right: 50%;
  bottom: 0px;
  margin-right: 520px;
  display: block;
  position: absolute;
  content: "";
  background-color: #d7d7d7;
}

@media all and (min-width: 740px), print {
  .breadcrumbs {
    display: block;
  }
}

.breadcrumbs ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 1040px;
}

.breadcrumbs li {
  line-height: 1;
  font-size: 1.3rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
}

.breadcrumbs li a {
  padding: 10px 22px 0px 14px;
  height: 34px;
  text-decoration: none;
  display: block;
}

.breadcrumbs li a.active {
  background-color: #fff;
  background-image: none;
}

.breadcrumbs li a:hover {
  text-decoration: underline;
}

.breadcrumbs li span {
  padding: 10px 22px 0px 37px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.breadcrumbs li a,
.breadcrumbs li span {
  display: block;
}

.breadcrumbs li a:before,
.breadcrumbs li a:after,
.breadcrumbs li span:before,
.breadcrumbs li span:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.breadcrumbs li + li a:hover {
  background-color: #fff;
}

.breadcrumbs li + li a,
.breadcrumbs li + li span {
  margin-left: 1px;
  padding-bottom: 4px;
}

.breadcrumbs li + li a:before,
.breadcrumbs li + li span:before {
  left: 0;
  top: 0;
  border-top: 17px solid transparent;
  border-left: 17px solid #d7d7d7;
  border-bottom: 17px solid transparent;
}

.breadcrumbs li + li a.breadcrumb-item-with-no-link:after,
.breadcrumbs li + li span.breadcrumb-item-with-no-link:after {
  z-index: 1;
  right: -16px;
  top: 0;
  border-top: 17px solid transparent;
  border-left: 17px solid whitesmoke;
  border-bottom: 17px solid transparent;
}

.breadcrumbs li:not(:last-child) a {
  padding-left: 37px;
}

.breadcrumbs li:not(:last-child) a:after {
  z-index: 1;
  right: -16px;
  top: 0;
  border-top: 17px solid transparent;
  border-left: 17px solid whitesmoke;
  border-bottom: 17px solid transparent;
}

.breadcrumbs li:not(:last-child) a:hover:after {
  border-left: 17px solid #fff;
}

.breadcrumbs li:not(:last-child) a.active:after {
  border-left: 17px solid #fff;
}

.breadcrumbs li:first-child a {
  background-color: #d7d7d7;
}

.breadcrumbs li:first-child a:after {
  border-left: 17px solid #d7d7d7;
}

.breadcrumbs li:first-child a:hover:after {
  border-left: 17px solid #d7d7d7;
}

.breadcrumbs li:last-child {
  width: 100%;
  overflow: hidden;
}

.breadcrumbs li.breadcrumb-item-ellipsis {
  width: 150px;
}

.breadcrumbs li.breadcrumb-item-ellipsis a {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ie .breadcrumbs li.breadcrumb-item-ellipsis {
  width: 420px;
}

/*
#overview
news

新着情報一覧
*/
/*#styleguide
.news - button, layout, list, title

PC - リンクリストを2カラムで表示
Mobile - リンクリストを1カラムで表示
```

<section class="parent-block news">
  <h2 class="heading-02 heading-featured">What's New<a href="#" class="btn btn-primary">More<i class="custom-icon icon-chevron-right"></i></a></h2>
  <ul class="list list-with-date">
    <li>
      <span class="list-with-date-date">Oct 26, 2015</span>
      <span class="list-with-date-item list-with-date-item-category">What's New</span>
      <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    </li>
    <li>
      <span class="list-with-date-date">Oct 26, 2015</span>
      <span class="list-with-date-item list-with-date-item-category">What's New</span>
      <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    </li>
    <li>
      <span class="list-with-date-date">Oct 26, 2015</span>
      <span class="list-with-date-item list-with-date-item-category">What's New</span>
      <span class="list-with-date-item list-with-date-item-text"><a href="#">FTIR TALK LETTER Vol. 24 is now available.</a></span>
    </li>
</ul>
</section>
```
*/
.news {
  position: relative;
  margin-bottom: 50px;
  padding-bottom: 45px;
}

@media all and (min-width: 740px), print {
  .news {
    margin-bottom: 65px;
    padding-bottom: 0;
  }
}

.news .heading-featured {
  width: 100%;
}

@media all and (min-width: 740px), print {
  .news .heading-featured {
    padding-top: 0;
    font-size: 3.2rem;
    text-align: center;
  }
}

.news .btn,
.news .webform-next,
.news .webform-previous,
.news .webform-submit {
  position: absolute;
  width: 150px;
  padding-left: 19px;
  right: 0;
  bottom: 0;
  left: 0;
}

@media all and (min-width: 740px), print {
  .news .btn,
  .news .webform-next,
  .news .webform-previous,
  .news .webform-submit {
    width: auto;
    bottom: auto;
    left: auto;
    top: 0;
    right: 0;
  }
}

.news .btn .custom-icon,
.news .webform-next .custom-icon,
.news .webform-previous .custom-icon,
.news .webform-submit .custom-icon {
  position: relative;
  top: 2px;
}

/*
#overview
form

*/
/*#styleguide
.form

フォームのパーツ
```

<input class="search-area-input form-text-input" type="text" id="edit-query" name="query" maxlength="100" placeholder="Search Literature">


<dl class="form-set">
  <dt class="form-set-head"><input class="search-area-input form-text-input" type="text" id="edit-query" name="query" maxlength="100" placeholder="Search Literature"></dt>
  <dd class="form-set-content"><button type="submit" name="submit" id="input2_name" class="btn btn-search form-submit">SEARCH<i class="custom-icon icon-contact"></i></button></dd>
</dl>


<label for="pt" class="form-select-wrapper">
  <i class="custom-icon icon-triangle-down-small"></i>
  <select id="pt" name="pt" class="form-select">
    <option value="0" selected="selected">All</option>
    <option value="1">Gas Chromatography</option>
    <option value="3">Liquid Chromatography</option>
    <option value="2">Gas Chromatograph-Mass Spectrometry</option>
    <option value="4">Liquid Chromatograph-Mass Spectrometry</option>
    <option value="5">Data Management &amp; Software</option>
    <option value="19">Mass Spectrometry</option>
    <option value="6">Molecular Spectroscopy</option>
    <option value="7">Elemental Analysis</option>
    <option value="8">Surface Analysis</option>
    <option value="9">Life Science Lab Instruments</option>
    <option value="10">Total Organic Carbon Analysis</option>
    <option value="11">Continuous Monitoring Analysis</option>
    <option value="12">Thermal Analysis</option>
    <option value="13">Particle Size Analysis</option>
    <option value="14">Materials Testing &amp; Inspection</option>
    <option value="15">Non-Destructive Testing</option>
    <option value="16">Balances</option>
    <option value="17">Fragrance &amp; Flavor Analysis</option>
    <option value="18">Functional Near Infrared Imaging</option>
  </select>
</label>

```
*/
input {
  border-radius: 0;
}

header .util .form-set {
  margin: 0 10px 10px;
  position: relative;
}

@media all and (min-width: 740px), print {
  header .util .form-set {
    margin: 0;
    position: relative;
    float: right;
    width: 400px;
    display: block;
  }
}

header .util .form-set .search-area-input {
  width: 100%;
  padding: 15px 10px;
  font-size: 16px;
  line-height: 0.875;
}

@media all and (min-width: 740px), print {
  header .util .form-set .search-area-input {
    font-size: inherit;
    line-height: inherit;
    padding: 0 8px;
    height: 34px;
  }
}

header .util .form-set .form-set-content {
  position: absolute;
  right: 0;
  top: 7px;
  border: none;
}

@media all and (min-width: 740px), print {
  header .util .form-set .form-set-content {
    top: 0;
    width: 34px;
    height: 34px;
  }
}

header .util .form-set .form-set-content .form-submit {
  width: 34px;
  height: 34px;
  background-color: transparent;
  color: #000;
}

@media all and (min-width: 740px), print {
  header .util .form-set .form-set-content .form-submit {
    padding: 0;
    background-color: #000;
    color: #fff;
  }
}

@media all and (min-width: 740px), print {
  header .util .form-set .form-set-content .form-submit:hover {
    background-color: #ff0000;
  }
}

header .util .form-set .form-set-content .form-submit .custom-icon {
  font-size: 20px;
  top: 6px;
  right: 5px;
}

@media all and (min-width: 740px), print {
  header .util .form-set .form-set-content .form-submit .custom-icon {
    color: #fff;
  }
}

header.on .fixNav {
  float: left;
  margin-right: 30px;
  padding-top: 6px;
}

header.on .fixNav a:hover span {
  text-decoration: underline;
}

header.on form {
  float: right;
}

header.on .form-set {
  width: 212px;
}

.form-text-input {
  -webkit-appearance: none;
  border: 1px solid black;
  background-color: white;
  padding: 8px;
  -o-border-image: none;
  border-image: none;
  width: 100%;
  line-height: 1;
  font-size: 1.2rem;
}

@media all and (min-width: 740px), print {
  .form-text-input {
    padding-top: 12px;
    padding-bottom: 11px;
  }
}

.form-select-wrapper {
  width: 100%;
  overflow: hidden;
  display: block;
  position: relative;
  cursor: pointer;
  background-color: #fff;
}

.form-select-wrapper:after {
  top: 0;
  width: 30px;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  z-index: 0;
  content: "";
  background-color: black;
}

.form-select-wrapper .icon-triangle-down-small {
  background-position: 0px -286px;
  top: 42%;
  width: 8px;
  height: 6px;
  right: 14px;
  margin-top: -3px;
  display: block;
  position: absolute;
  z-index: 1;
  content: "";
  background-color: black;
  color: #fff;
}

.form-select,
.webform-component select {
  z-index: 2;
  width: 105%;
  color: #6b6b6b;
  line-height: 1;
  font-size: 1.2rem;
  white-space: nowrap;
  cursor: pointer;
  padding: 7px 5px;
  border: 1px solid black;
  -o-border-image: none;
  border-image: none;
  position: relative;
  background-color: transparent;
}

@media all and (min-width: 740px), print {
  .form-select,
  .webform-component select {
    width: 110%;
    outline: none;
  }
  select.form-select,
  .webform-component select {
    background-color: transparent;
  }
  select:focus::-ms-value {
    background: transparent;
    color: #464646;
  }
  .ie .form-select,
  .ie .webform-component select,
  .webform-component .ie select {
    width: 120%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  select::-ms-expand {
    display: none;
  }
}

/*#styleguide
.form-set

PC, Mobileとも - 検索フォーム
```

<section class="form block-with-gray-background">
  <form action="http://search1.shimadzu.co.jp/search" method="get" id="SS_searchForm1" accept-charset="UTF-8">
    <input type="hidden" name="ig" value="1">
    <input type="hidden" name="site" value="EM0AJRZ6">
    <input type="hidden" name="charset" value="UTF-8">
    <input type="hidden" name="group" value="1">
    <input type="hidden" name="design" value="2">
    <input type="hidden" name="sb" value="1">
    <dl class="form-set">
      <dt class="form-set-head"><input class="search-area-input form-text-input" type="text" id="edit-query" name="query" maxlength="100" placeholder="Search Literature"></dt>
      <dd class="form-set-content"><button type="submit" name="submit" id="input2_name" class="btn btn-search form-submit">SEARCH<i class="custom-icon icon-contact"></i></button></dd>
    </dl>
  </form>
</section>
```
*/
.form,
.webform-client-form {
  margin-bottom: 20px;
  padding: 20px 10px;
  background-color: whitesmoke;
}

@media all and (min-width: 740px), print {
  .form,
  .webform-client-form {
    padding: 40px 88px 40px;
  }
}

.form-set {
  -o-border-image: none;
  border-image: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.form-set-head {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

.form-set-head .form-text-input {
  border-right: none;
}

.form-set-content {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  overflow: hidden;
}

@media all and (min-width: 740px), print {
  .form-set-content {
    -webkit-box-flex: initial;
    -ms-flex-positive: initial;
    flex-grow: initial;
    width: 160px;
  }
}

.form-set-content .btn,
.form-set-content .webform-next,
.form-set-content .webform-previous,
.form-set-content .webform-submit {
  padding-top: 9px;
  border: none;
  display: block;
  width: 100%;
  font-size: 1.2rem;
}

@media all and (min-width: 740px), print {
  .form-set-content .btn,
  .form-set-content .webform-next,
  .form-set-content .webform-previous,
  .form-set-content .webform-submit {
    padding-top: 11px;
    padding-bottom: 10px;
    border: 1px solid black;
    font-size: 1.4rem;
    cursor: pointer;
  }
}

@media all and (min-width: 740px), print {
  .form-set-content .btn:hover,
  .form-set-content .webform-next:hover,
  .form-set-content .webform-previous:hover,
  .form-set-content .webform-submit:hover {
    border: 1px solid red;
  }
}

.form-set-content .icon {
  position: absolute;
  right: 16px;
  top: 26%;
}

@media all and (min-width: 740px), print {
  .form-set-content .icon {
    margin-bottom: -9px;
  }
}

/*#styleguide
.literatureSearchFull - button, block, form, icon

PC, Mobileとも - 検索フォーム（カテゴリ絞込つき）
```

<div class="form block-with-gray-background">
  <form name="SS_searchForm1" id="SS_searchForm1" class="SS_searchForm" action="/search" method="get">
    <input type="hidden" name="site" value="EM0AJRZ6" id="SS_site1">
    <input type="hidden" name="design" value="2" id="SS_design1">
    <input type="hidden" name="group" id="SS_group1" value="1">
    <input type="hidden" name="charset" value="UTF-8" id="SS_charset1">
    <input type="hidden" name="sb" value="1">

    <div class="form-literature-set">
      <div class="form-item-set form-label-set-wrapper">
        <div class="form-item">
        <dl class="form-label-set">
          <dt class="form-label-set-head"><label class="form-label">Product Type</label></dt>
          <dd class="form-label-set-content">
            <label for="pt" class="form-select-wrapper">
              <i class="custom-icon icon-triangle-down-small"></i>
              <select id="pt" name="pt" class="form-select">
                <option value="0" selected="selected">All</option>
                <option value="1">Gas Chromatography</option>
                <option value="3">Liquid Chromatography</option>
                <option value="2">Gas Chromatograph-Mass Spectrometry</option>
                <option value="4">Liquid Chromatograph-Mass Spectrometry</option>
                <option value="5">Data Management &amp; Software</option>
                <option value="19">Mass Spectrometry</option>
                <option value="6">Molecular Spectroscopy</option>
                <option value="7">Elemental Analysis</option>
                <option value="8">Surface Analysis</option>
                <option value="9">Life Science Lab Instruments</option>
                <option value="10">Total Organic Carbon Analysis</option>
                <option value="11">Continuous Monitoring Analysis</option>
                <option value="12">Thermal Analysis</option>
                <option value="13">Particle Size Analysis</option>
                <option value="14">Materials Testing &amp; Inspection</option>
                <option value="15">Non-Destructive Testing</option>
                <option value="16">Balances</option>
                <option value="17">Fragrance &amp; Flavor Analysis</option>
                <option value="18">Functional Near Infrared Imaging</option>
              </select>
            </label>
          </dd>
        </dl>
        </div>
        <div class="form-item">
        <dl class="form-label-set">
          <dt class="form-label-set-head"><label class="form-label">Industry Group</label></dt>
          <dd class="form-label-set-content">
            <label for="ig" class="form-select-wrapper">
              <i class="custom-icon icon-triangle-down-small"></i>
              <select id="ig" name="ig" class="form-select">
                <option value="0" selected="selected">All</option>
                <option value="1">Ceramics,Metals,Mining</option>
                <option value="2">Clinical,Forensics</option>
                <option value="3">Electronics,Electronic</option>
                <option value="4">Environment</option>
                <option value="5">Food,Beverages</option>
                <option value="6">Machinery,Automotive</option>
                <option value="7">Petrochemical,Chemical</option>
                <option value="8">Pharmaceutical,Life Science</option>
                <option value="9">Others</option>
              </select>
            </label>
          </dd>
        </dl>
        </div>
        <div class="form-item">
        <dl class="form-label-set">
          <dt class="form-label-set-head"><label class="form-label">Content Type</label></dt>
          <dd class="form-label-set-content">
            <label for="ct" class="form-select-wrapper">
              <i class="custom-icon icon-triangle-down-small"></i>
              <select id="ct" name="ct" class="form-select">
                <option value="0" selected="selected">All</option>
                <option value="1">Application</option>
                <option value="2">Brochure</option>
                <option value="3">Paper</option>
                <option value="4">Journal</option>
                <option value="5">Others</option>
              </select>
            </label>
          </dd>
        </dl>
        </div>
      </div>
      <div class="form-set-horizontal">
        <div class="form-item-set form-set-horizontal-item form-set-horizontal-item-input">
          <div class="form-item">
            <input name="query" type="text" id="SS_searchQuery1" placeholder="Keyword" maxlength="100" class="form-text-input">
          </div>
        </div>
        <div class="form-item form-set-horizontal-item form-set-horizontal-item-button"><button type="submit" id="input2_name" name="submit" class="btn btn-search form-submit">SEARCH<i class="custom-icon icon-contact"></i></button></div>
      </div>
    </div>
  </form>
</div>
```
*/
@media all and (min-width: 740px), print {
  .form-label-set,
  .webform-component {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
  }
}

.form-label-set-head,
.webform-component label {
  line-height: 1;
  font-size: 1.2rem;
  margin-bottom: 8px;
}

@media all and (min-width: 740px), print {
  .form-label-set-head,
  .webform-component label {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 175px;
    line-height: 1;
    font-size: 1.6rem;
    margin-bottom: 0px;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -moz-flex: 0 0 auto;
  }
}

@media all and (min-width: 740px), print {
  .form-label-set-content {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
  }
}

.form-item-set {
  margin-bottom: 40px;
}

.form-item-set .form-item:last-child {
  margin-bottom: 0;
}

.form-item {
  margin-bottom: 20px;
}

@media all and (min-width: 740px), print {
  .form-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
  }
}

.form-item .btn-search {
  padding: 10px 32px 11px 18px;
  width: 150px;
}

@media all and (min-width: 740px), print {
  .form-item .btn-search {
    width: 160px;
  }
}

.form-item .btn-search .icon-contact {
  right: 40px;
}

.form-item.form-item-imce {
  display: block;
}

.form-item.form-item-imce .description {
  margin: 5px 0 !important;
  max-width: 40vw;
  min-width: 310px;
}

.form-set-content .btn-search .icon-contact {
  right: 10px;
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set-wrapper {
    margin-bottom: 15px;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set-wrapper .form-item {
    width: 275px;
    display: inline-block;
    padding-bottom: 0;
    margin-right: 13px;
    margin-bottom: 0;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set-wrapper .form-item:last-child {
    margin-right: 0;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set,
  .form-literature-set .webform-component {
    display: block;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set-head,
  .form-literature-set .webform-component label,
  .webform-component .form-literature-set label {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-label-set-content {
    display: block;
    width: 100%;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal {
    margin-bottom: 0;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal-item {
    display: inline-block;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal-item-input {
    width: 690px;
    margin-right: 13px;
    float: left;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal-item-input .form-text-input {
    padding: 9px;
  }
}

.form-literature-set .form-set-horizontal-item-button {
  text-align: center;
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal-item-button {
    width: 150px;
    text-align: left;
    float: left;
  }
}

@media all and (min-width: 740px), print {
  .form-literature-set .form-set-horizontal-item-button .custom-icon {
    right: 32px;
  }
}

@media all and (min-width: 740px), print {
  .ff .form-text-input {
    padding: 7px 9px 8px;
    line-height: 1.7;
  }
}

.form-set-with-radio-button {
  padding-top: 30px;
  padding-bottom: 5px;
}

@media all and (min-width: 740px), print {
  .form-set-with-radio-button {
    padding: 40px 120px;
  }
}

@media all and (min-width: 740px), print {
  .form-set-with-radio-button .heading-normal-for-label {
    float: left;
    position: relative;
    top: 20px;
    color: #464646;
  }
  .form-set-with-radio-button form {
    float: right;
    width: 570px;
  }
}

.form-set-with-radio-button .form-label-set-head,
.form-set-with-radio-button .webform-component label,
.webform-component .form-set-with-radio-button label {
  display: inline-block;
  margin-bottom: 15px;
}

@media all and (min-width: 740px), print {
  .form-set-with-radio-button .form-label-set-head,
  .form-set-with-radio-button .webform-component label,
  .webform-component .form-set-with-radio-button label {
    float: left;
    width: auto;
    margin-right: 15px;
    font-size: 14px;
    color: #464646;
  }
}

@media all and (min-width: 740px), print {
  .form-set-with-radio-button .form-literature-set .form-label-set-wrapper .form-item {
    width: 100%;
  }
}

.form-select-product {
  display: none;
}

.js-content-product {
  display: none;
}

.form-item-button-wrapper {
  text-align: center;
}

@media all and (min-width: 740px), print {
  .form-item-button-wrapper {
    text-align: right;
    vertical-align: bottom;
  }
}

@media all and (min-width: 740px), print {
  .form-item-button-wrapper .form-submit {
    vertical-align: bottom;
  }
}

.bridge_content .image-col-set-description {
  margin-left: 0px;
}

@media all and (min-width: 740px), print {
  .bridge_content .image-col-set-description {
    margin-bottom: 20px;
    margin-left: 268px;
  }
}

.bridge_content .image-col-set-description p {
  display: flow-root;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.bridge_content .image-col-set-description p a {
  display: block;
}

@media all and (min-width: 740px), print {
  .bridge_content .image-col-set-description p a {
    display: inline;
  }
}

.bridge_content .image-col-set {
  display: block;
}

.bridge_content .image-col-set-image {
  float: left;
  margin-right: 10px;
}

.bridge_content .image-col-set .block,
.bridge_content .image-col-set .webform-client-form {
  float: right;
  width: 775px;
}

.form-set-for-product-search .form-item {
  vertical-align: top;
}

.form-set-for-product-search .form-label-set-head,
.form-set-for-product-search .webform-component label,
.webform-component .form-set-for-product-search label {
  text-indent: -28px;
  padding-left: 28px;
}

.form-set-for-product-search .form-label-set-head input,
.form-set-for-product-search .webform-component label input,
.webform-component .form-set-for-product-search label input,
.form-set-for-product-search .form-label-set-head label,
.form-set-for-product-search .webform-component label label,
.webform-component .form-set-for-product-search label label {
  display: inline;
  line-height: 1.6;
}

.form-set-with-under-buttons.form-set {
  margin-bottom: 20px;
}

.form-set-with-under-buttons .form-set-head .form-text-input {
  border-right: 1px solid #000;
}

.form_error_message {
  background-color: #ffccd6;
  border: 1px solid #ff0000;
  color: #ff0000;
  font-weight: 800;
  margin-bottom: 14px;
  padding: 10px;
  position: relative;
}

.form_error_message p:last-child {
  padding-bottom: 0;
}

.form_error_message ul {
  list-style: disc;
  list-style-position: inside;
}

.form_error_message li {
  line-height: 1.3;
  margin-bottom: 5px;
}

.form_error_message li:last-child {
  margin-bottom: 0;
}

/*
#overview
list support

灰色背景色のアイコン付きリスト（サポートページでの表示）
*/
/*#styleguide
.supportList - block, icon, layout, list

PC - アイコン付きリンクリストを4カラムで表示
Mobile - アイコン付きリンクリストを2カラムで表示
```

<section class="list-support block block-with-gray-background">
  <ul class="parent-block parent-block-col-2">
    <li class="unit"><a href="/an/service/map.html"><i class="custom-icon icon-map"></i>Global Service Map</a></li>
    <li class="unit"><a href="/an/service/plan.html"><i class="custom-icon icon-plans"></i>Global Service Agreement Plans</a></li>
    <li class="unit"><a href="/an/service/vendor.html"><i class="custom-icon icon-multi"></i>Multi-vendor Service</a></li>
    <li class="unit"><a href="/an/service/validation.html"><i class="custom-icon icon-validation"></i>Validation Support</a></li>
    <li class="unit"><a href="/an/service/caring.html"><i class="custom-icon icon-caring"></i>Japanese Caring Service</a></li>
    <li class="unit"><a href="/an/service/lab.html"><i class="custom-icon icon-lab"></i>Lab Relocation Service</a></li>
    <li class="unit"><a href="/an/service/training.html"><i class="custom-icon icon-training"></i>Customer Training</a></li>
    <li class="unit"><a href="/an/service/supply.html"><i class="custom-icon icon-supply"></i>Consumables Supply</a></li>
  </ul>
</section>
```
 */
.list-support {
  margin-right: -10px;
  margin-bottom: 30px;
  margin-left: -10px;
}

.list-support.block,
.list-support.webform-client-form {
  padding: 26px 0px 5px;
}

.list-support .unit {
  padding: 0px 10px;
  width: 50%;
  line-height: 1.6666;
  font-size: 1.2rem;
  margin-bottom: 25px;
  float: left;
}

.list-support .unit a {
  padding-left: 26px;
  display: block;
  position: relative;
}

.list-support .unit .custom-icon {
  font-size: 16px;
  left: 10px;
  top: 2px;
  position: absolute;
}

@media all and (min-width: 740px) {
  .list-support {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px;
  }
  .list-support.block,
  .list-support.webform-client-form {
    padding: 36px 0px 24px;
  }
  .list-support .unit {
    padding: 0px 15px;
    margin-right: 0;
    margin-left: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
    height: auto;
    line-height: 1.4285;
    font-size: 1.4rem;
    margin-bottom: 20px;
    float: none;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -moz-box-flex: 0;
    -moz-flex: 0 0 auto;
  }
  .list-support .unit a {
    padding-left: 33px;
  }
  .list-support .unit .custom-icon {
    font-size: 19px;
    left: 15px;
  }
}

/*
#overview
list sns

SNSボタンのリスト
*/
/*#styleguide
.list-sns

PC - SNSリンクボタン
Mobile - 非表示
```

<ul class="list-sns">
  <li class="unit"><a href="#"><i class="icon icon-facebook">facebook</i></a></li>
  <li class="unit"><a href="#"><i class="icon icon-twitter">twitter</i></a></li>
  <li class="unit"><a href="#"><i class="icon icon-google">google plus</i></a></li>
  <li class="unit"><a href="#"><i class="icon icon-yahoo">yahoo</i></a></li>
  <li class="unit"><a href="#"><i class="icon icon-hatena">hatena</i></a></li>
  <li class="unit"><a href="#"><i class="icon icon-plus">plus</i></a></li>
</ul>
```
*/
.list-sns {
  text-align: center;
  margin: 20px 0 80px;
}

.list-sns-icon {
  display: inline-block;
}

.list-sns-icon.facebook {
  position: relative;
  top: -2px;
}

.list-sns-icon.linkedin {
  position: relative;
  top: -2.5px;
}

.list-sns .fb_reset {
  display: none;
}

.ie .list-sns-icon.facebook {
  top: 0;
}

.ie .list-sns-icon.linkedin {
  top: -10.2px;
}

@media all and (min-width: 740px) {
  .list-sns {
    text-align: right;
  }
  .list-sns-icon.facebook {
    top: -2.5px;
  }
  .list-sns-icon.linkedin {
    top: -2.5px;
  }
  .ie .list-sns-icon.linkedin {
    top: -10px;
  }
  .ie .list-sns-icon.linkedin {
    top: -10px;
  }
}

/*
#overview
local nav

下層ページへのリンクリスト
*/
/*#styleguide
.anchorLink - block, icon, list

PC - カラムが横並びのリンクリスト
Mobile - カラムが縦並びのリンクリスト
```

<nav class="local-nav">
  <h2 class="local-nav-heading">Tracera<i class="custom-icon icon-chevron-down-fat"></i></h2>
  <div class="block block-with-gray-background">
    <dl class="local-nav-list">
      <dt class="local-nav-list-heading"><a href="/an/gc/tracera/index.html" class="current"><i class="custom-icon icon-triangle-right"></i>Tracera TOP<i class="custom-icon icon-chevron-right"></i></a></dt>
      <dd class="local-nav-list-links">
        <ul>
          <li class="local-nav-list-links-item"><a href="/an/gc/tracera2.html"><i class="custom-icon icon-triangle-right"></i>High Sensitivity<i class="custom-icon icon-chevron-right"></i></a></li>
          <li class="local-nav-list-links-item"><a href="/an/gc/tracera3.html"><i class="custom-icon icon-triangle-right"></i>Novel Universal Detector<i class="custom-icon icon-chevron-right"></i></a></li>
          <li class="local-nav-list-links-item"><a href="/an/gc/tracera4.html"><i class="custom-icon icon-triangle-right"></i>Long-Term Stability<i class="custom-icon icon-chevron-right"></i></a></li>
          <li class="local-nav-list-links-item"><a href="/an/gc/tracera5.html"><i class="custom-icon icon-triangle-right"></i>Application<i class="custom-icon icon-chevron-right"></i></a></li>
        </ul>
      </dd>
    </dl>
  </div>
</nav>
```
*/
.local-nav-heading {
  padding: 15px 65px 13px 10px;
  line-height: 1.5;
  font-size: 2rem;
  border-left-color: #ff0000;
  border-left-width: 3px;
  border-left-style: solid;
  position: relative;
  background-color: #f5f5f5;
}

.local-nav-heading .custom-icon {
  top: 50%;
  right: 25px;
  margin-top: -5px;
  position: absolute;
  line-height: 1;
}

.local-nav .block,
.local-nav .webform-client-form {
  display: none;
  padding-top: 0;
}

.local-nav-list-heading {
  line-height: 1;
  font-size: 1.2rem;
  margin-top: 1px;
  border-top: 1px solid #fff;
}

.local-nav-list-heading a {
  padding: 25px 45px;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
  background-color: #f5f5f5;
}

.local-nav-list-heading a .custom-icon {
  top: 42%;
  right: 20px;
  margin-top: -7px;
  position: absolute;
}

.local-nav-list-links-item {
  border-top: 1px solid #fff;
  line-height: 1;
  font-size: 1.2rem;
  margin-top: 1px;
}

.local-nav-list-links-item a {
  padding: 25px 45px;
  text-align: center;
  text-decoration: none;
  display: block;
  position: relative;
  background-color: #f5f5f5;
}

.local-nav-list-links-item a .custom-icon {
  top: 50%;
  right: 20px;
  margin-top: -7px;
  position: absolute;
}

.local-nav .icon-triangle-right {
  display: none;
}

@media all and (min-width: 740px) {
  .local-nav {
    margin-bottom: 20px;
  }
  .local-nav-heading {
    display: none;
  }
  .local-nav .block,
  .local-nav .webform-client-form {
    display: block;
    border-left-color: #ff0000;
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0;
  }
  .local-nav-list {
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
  }
  .local-nav-list-heading {
    line-height: 1.2857;
    font-size: 1.4rem;
    width: auto;
    border-top: none;
    position: relative;
    display: inline-block;
  }
  .local-nav-list-heading a {
    padding: 8px 10px 10px 30px;
    text-decoration: underline;
    background-color: transparent;
  }
  .local-nav-list-heading a .custom-icon {
    left: 13px;
    top: 48%;
    margin-top: -5px;
    position: absolute;
    font-size: 11px;
  }
  .local-nav-list-heading a.current {
    text-decoration: none;
  }
  .local-nav-list-heading a.current .icon-triangle-right {
    background-position: 0px -3789px;
    color: #ff0000;
  }
  .local-nav-list-links-item {
    width: auto;
    text-align: center;
    display: inline-block;
    position: relative;
    border-top: none;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    line-height: 1.2857;
    font-size: 1.4rem;
  }
  .local-nav-list-links-item::after {
    left: 0;
    top: 8px;
    width: 2px;
    bottom: 8px;
    display: block;
    position: absolute;
    content: "";
    background-color: #d7d7d7;
  }
  .local-nav-list-links-item:last-child::before {
    right: 0;
    top: 8px;
    width: 2px;
    bottom: 8px;
    display: block;
    position: absolute;
    content: "";
    background-color: #d7d7d7;
  }
  .local-nav-list-links-item a {
    padding: 8px 15px 10px 30px;
    background-color: transparent;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    text-decoration: underline;
    text-align: left;
  }
  .local-nav-list-links-item a .custom-icon {
    left: 13px;
    top: 48%;
    margin-top: -5px;
    position: absolute;
    text-align: left;
    font-size: 11px;
  }
  .local-nav-list-links-item a:hover {
    text-decoration: none;
  }
  .local-nav-list-links-item a.current {
    text-decoration: none;
  }
  .local-nav-list-links-item a.current .icon-triangle-right {
    background-position: 0px -3789px;
    color: #ff0000;
  }
  .local-nav .icon-triangle-right {
    display: block;
    text-align: left;
  }
  .local-nav .icon-chevron-down,
  .local-nav .icon-chevron-right,
  .local-nav footer .container .links li a,
  footer .container .links li .local-nav a {
    display: none;
  }
}

/*
#overview
list columned

4カラム（Mobile時は2カラム）のカラムレイアウトのblock
*/
/*#styleguide
.image-col-set - block, layout, link, list

PC, Mobile - サムネイル画像付きのリンクリストを2カラムで表示
```
<div class="unit image-col-set">
  <figure class="image-col-set-image"><a href="#"><img src="./support/images/index_bridge_01.jpg" alt=""></a></figure>
  <figcaption class="image-col-set-description">
    <h3 class="image-col-set-description-title"><a href="#">Tracera</a></h3>
    <p class="image-col-set-description-text">This system utilizes the new Barrier Discharge Ionization Detector technology coupled with a GC-2010...</p>
  </figcaption>
</div>
```
*/
.image-col-set {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 10px;
}

.image-col-set-image {
  margin-right: 10px;
}

.image-col-set-image-inner,
.image-col-set-image a {
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
  width: 145px;
  height: 120px;
  border: 1px solid #bababa;
}

.image-col-set-image img {
  max-width: 99px;
  max-height: 52px;
}

.image-col-set-image-inner img {
  max-width: none;
  max-height: none;
  width: 100%;
  height: auto;
}

.image-col-set-description-title {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.42857;
  margin-bottom: 0.5em;
}

.image-col-set-description-text {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.66667;
  color: #777;
}

@media (min-width: 740px) {
  .image-col-set-image {
    margin-right: 15px;
  }
  .image-col-set-image-inner,
  .image-col-set-image a {
    width: 248px;
    height: 130px;
  }
  .image-col-set-image img {
    max-width: 198px;
    max-height: 104px;
  }
  .image-col-set-image a img {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    -webkit-backface-visibility: hidden;
  }
  .image-col-set-image a img:hover {
    opacity: 0.5;
    text-decoration: inherit;
  }
  .image-col-set-image-inner img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
  }
  .image-col-set-description-title {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 1.25em;
  }
  .image-col-set-description-text {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.42857;
  }
}

/*#styleguide
.link-col-set - block, layout, link, list

PC, Mobile - サムネイル画像付きのリンクリストを2カラムで表示
```
<div class="link-col-set">
  <div class="link-col-set-col">
    <a class="block-with-thin-dark-border" href="#">text  <strong>text text</strong></a>
  </div>
  <div class="link-col-set-col">
    <a class="block-with-thin-dark-border" href="#">text  <strong>text text</strong></a>
  </div>
  <div class="link-col-set-col">
    <a class="block-with-thin-dark-border" href="#">text  <strong>text text</strong></a>
  </div>
</div>
```
*/
.link-col-set-col {
  margin-bottom: 10px;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.42857;
  text-align: center;
}

.link-col-set-col a {
  height: 80px;
  display: -webkit-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-justify-content: center;
  justify-content: center;
  text-decoration: none;
}

.link-col-set-col strong {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.25;
}

@media (min-width: 740px) {
  .link-col-set {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .link-col-set-col {
    width: 336px;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.25;
    margin-right: 16px;
  }
  .link-col-set-col:nth-child(3n) {
    margin-right: 0;
  }
  .link-col-set-col a {
    height: 100px;
  }
  .link-col-set-col a:hover {
    text-decoration: underline;
  }
  .link-col-set-col strong {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.11111;
  }
}

/*#styleguide
.parent-block-no-justify.parent-block-col-4 - block, layout, link, list

PC - サムネイル画像付きのリンクリストを4カラムで表示
Mobile - サムネイル画像付きのリンクリストを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent">
  <div class="unit">
    <figure class="col-image col-image-full-width"><a href="#"><img src="./support/images/index_bridge_01.jpg" alt=""></a></figure>
    <p class="col-text"><a href="#">The Challenge of Discovery and Development of Pharmaceutical Products Using Imaging Mass Spectrometry: iMScope TRIO</a></p>
  </div>
  <div class="unit">
    <figure class="col-image col-image-full-width"><a href="#"><img src="./support/images/index_bridge_02.jpg" alt=""></a></figure>
    <p class="col-text"><a href="#">High Performance Liquid Chromatography: Prominence-i</a></p>
  </div>
  <div class="unit">
    <figure class="col-image col-image-full-width"><a href="#"><img src="./support/images/index_bridge_03.jpg" alt=""></a></figure>
    <p class="col-text"><a href="#">TOC Analyzer: TOC-L</a></p>
  </div>
  <div class="unit">
    <figure class="col-image col-image-full-width"><a href="#"><img src="./support/images/index_bridge_04.jpg" alt=""></a></figure>
    <p class="col-text"><a href="#">Prominence-i High-Performance Liquid Chromatograph</a></p>
  </div>
</section>
```
*/
.col-image {
  border: 1px solid #bababa;
  margin-bottom: 10px;
}

.col-image-full-width img {
  min-width: auto;
  min-width: initial;
  min-height: auto;
  min-height: initial;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

@media all and (min-width: 740px) {
  .col-image-full-width img {
    width: 246px;
    height: auto;
  }
}

.col-image-with-caption {
  margin-bottom: 2px;
}

@media all and (min-width: 740px) {
  .col-image a img {
    transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -webkit-backface-visibility: hidden;
  }
  .col-image a img:hover {
    text-decoration: inherit;
    opacity: 0.5;
  }
}

.col-text {
  padding: 5px 7px;
  color: #777777;
  line-height: 1.5;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .col-text {
    padding: 0px 15px 13px;
    line-height: 1.4285;
    font-size: 1.4rem;
  }
}

.col-caption {
  margin-bottom: 8px;
}

.col-caption a,
.col-caption span {
  display: block;
  padding: 3px 8px 6px;
  line-height: 1.4285;
  font-size: 1.4rem;
  text-decoration: none;
}

.col-caption .list-with-hyphen {
  padding-top: 13px;
}

.col-caption .list-with-hyphen a {
  padding-left: 0;
}

@media all and (min-width: 740px) {
  .col-caption {
    margin-bottom: 16px;
  }
  .col-caption a,
  .col-caption span {
    padding: 3px 15px 4px;
    line-height: 1.1538;
    font-size: 1.3rem;
  }
  .col-caption a {
    transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -webkit-backface-visibility: hidden;
  }
  .col-caption a:hover {
    text-decoration: inherit;
    opacity: 0.5;
  }
}

/*#styleguide
.productCatList - block, layout, link, list

PC - サムネイル画像付きのリンクリストを4カラムで表示
Mobile - サムネイル画像付きのリンクリストを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent">
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/gc/"><img src="./products/images/products_top_01.jpg" alt=""></a></figure>
    <figcaption class="col-caption"><a href="/an/gc/" class="col-caption-dark-background">Gas Chromatography</a></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/gc/tracera/index.html">Tracera</a></li>
      <li><a href="/an/gc/2010plus.html">GC-2010 Plus</a></li>
      <li><a href="/an/gc/gc2014.html">GC-2014</a></li>
      <li><a href="/an/gc/gc2025.html">GC-2025</a></li>
      <li><a href="/an/gc/gc8a.html">GC-8A</a></li>
      <li><a href="/an/gc/hs-10/hs-10.html">HS-10</a></li>
    </ul>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/hplc/"><img src="./products/images/products_top_02.jpg" alt=""></a></figure>
    <figcaption class="col-caption"><a href="/an/hplc/" class="col-caption-dark-background">Liquid Chromatography</a></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/hplc/x2-1.html">Nexera X2</a></li>
      <li><a href="/an/hplc/prominence/lc20.html">Prominence</a></li>
      <li><a href="/an/hplc/i-series/index.html">i-Series</a></li>
      <li><a href="/an/hplc/appli_system.html">Application Systems</a></li>
      <li><a href="/an/hplc/nexera/e_index.html">Comprehensive 2D-LC</a></li>
      <li><a href="/an/hplc/nexera_uc/index.html">Nexera UC</a></li>
    </ul>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/gcms/"><img src="./products/images/products_top_03.jpg" alt=""></a></figure>
    <figcaption class="col-caption"><a href="/an/gcms/" class="col-caption-dark-background">Gas Chromatograph-Mass Spectrometry</a></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/gcms/8040/8040_index.html">GCMS-TQ8040</a></li>
      <li><a href="/an/gcms/8050/index.html">GCMS-TQ8050</a></li>
      <li><a href="/an/gcms/qp2020/index.html">GCMS-QP2020</a></li>
      <li><a href="/an/gcms/qp2010se.html">GCMS-QP2010 SE</a></li>
      <li><a href="/an/gcms/gcgc.html">Comprehensive GCxGC  System</a></li>
      <li><a href="/an/gcms/off-flavor/index.html">GC/MS Off-Flavor Analyzer</a></li>
    </ul>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/lcms/"><img src="./products/images/products_top_04.jpg" alt=""></a></figure>
    <figcaption class="col-caption"><a href="/an/lcms/" class="col-caption-dark-background">Liquid Chromatograph-Mass Spectrometry</a></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/lcms/8060/index.html">LCMS-8060</a></li>
      <li><a href="/an/lcms/8050/8050_index.html">LCMS-8050</a></li>
      <li><a href="/an/lcms/8045/">LCMS-8045</a></li>
      <li><a href="/an/lcms/8040/8040_index.html">LCMS-8040</a></li>
      <li><a href="/an/lcms/lcms2020/2020.html">LCMS-2020</a></li>
      <li><a href="/an/lcms/lcmsittof/ittof.html">LCMS-IT-TOF</a></li>
    </ul>
  </div>
</section>
```
 */
.col-image-basic a,
.col-image-basic span {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
}

.col-image-basic img {
  width: 100%;
  height: auto;
}

.col-image-basic.col-image-fluid-height a,
.col-image-basic.col-image-fluid-height span {
  padding: 10px 0;
}

.col-image-basic.col-image-fluid-height img {
  width: auto;
}

@media all and (min-width: 740px) {
  .col-image-basic a,
  .col-image-basic span {
    width: auto;
    height: 127px;
  }
  .col-image-basic.col-image-fluid-height img {
    max-height: 140px;
    max-width: 240px;
    width: auto;
  }
  .col-image-basic.col-image-fluid-height a,
  .col-image-basic.col-image-fluid-height span {
    width: 248px;
    padding-top: 20px;
  }
}

.col-caption-dark-background {
  color: white;
  background-color: #2e2d32;
}

.list-with-hyphen.col-text li {
  line-height: 1.6666;
  padding-left: 1em;
  font-size: 1.2rem;
  margin-bottom: 0.5em;
}

.list-with-hyphen.col-text li a {
  text-decoration: none;
}

@media all and (min-width: 740px) {
  .list-with-hyphen.col-text li {
    line-height: 1.5;
    font-size: 1.4rem;
    margin-bottom: 0.6em;
  }
  .list-with-hyphen.col-text li a {
    text-decoration: underline;
  }
  .list-with-hyphen.col-text li a:hover {
    text-decoration: none;
  }
}

/*#styleguide
.productCatList - block, layout, link, list

PC - サムネイル画像付きのリンクリストを4カラムで表示
Mobile - サムネイル画像付きのリンクリストを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent">
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./support/images/index_list_01.jpg" alt=""></span></figure>
    <figcaption class="col-caption"><span class="col-caption-light-background">HPLC</span></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/hplc/support/faq/">Tips for Daily Analysis</a></li>
      <li><a href="/an/hplc/support/faq/prep/">Preparative HPLC</a></li>
      <li><a href="/an/hplc/support/lclc/">Tips (LCxLC) of carotenoid analysis</a></li>
      <li><a href="/an/hplc/support/faq/ic/">Ion Chromatography</a></li>
      <li><a href="/an/hplc/support/faq/basic/">A Basic Knowledge of Analysis</a></li>
      <li><a href="/an/hplc/support/faq/tech/">Technical Review of Products</a></li>
      <li><a href="/an/hplc/support/lc/ap/">Applications</a></li>
    </ul>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./support/images/index_list_02.jpg" alt=""></span></figure>
    <figcaption class="col-caption"><span class="col-caption-light-background">LC-MS</span></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/lcms/support/faq/ms/lcms-intro.html">Introduction to LC-MS</a></li>
      <li><a href="/an/lcms/support/faq/ms/lcms-tips.html">Tips for Daily Analysis LCMS</a></li>
    </ul>
  </div><div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./support/images/index_list_03.jpg" alt=""></span></figure>
    <figcaption class="col-caption"><span class="col-caption-light-background">GC</span></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/gc/support/faq/bombe/bombe1.html">Gas Chromatograph Hydrogen Gas Safety</a></li>
    </ul>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./support/images/index_list_04.jpg" alt=""></span></figure>
    <figcaption class="col-caption"><span class="col-caption-light-background">GCMS</span></figcaption>
    <ul class="col-text list-with-hyphen font-color-pale">
      <li><a href="/an/gcms/support/fundamentals/">Fundamentals of GC/MS</a></li>
      <li><a href="/an/gcms/support/faq/">Frequently Asked Questions</a></li>
    </ul>
  </div>
</section>
```
 */
.col-caption-light-background {
  color: iniherit;
  background-color: #d7d7d7;
}

.col-caption-transparent {
  background: transparent;
  border: 1px solid #999;
}

/*#styleguide
.productsLineupList - block, layout

PC - サムネイル画像リンクとサマリー情報を4カラムで表示
Mobile - サムネイル画像リンクとサマリー情報を2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent js-adjust-inner-height-parent col-with-border">
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/gc/tracera/"><img src="./products/images/category_top_01.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/gc/tracera/" class="col-caption-soft-dark-background">Tracera</a></h3>
      <p class="col-caption-text font-color-pale">This system utilizes the new Barrier Discharge Ionization Detector technology coupled with a GC-2010...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption col-caption-block"><a href="/an/gc/2010plus.html"><img src="./products/images/category_top_02.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/gc/2010plus.html" class="col-caption-soft-dark-background">GC-2010 Plus High-end GC</a></h3>
      <p class="col-caption-text font-color-pale">The GC-2010 Plus enables reliable, high-precision trace analysis with high repeatability, utilizing ...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/gc/gc2014.html"><img src="./products/images/category_top_03.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/gc/gc2014.html" class="col-caption-soft-dark-background">GC-2014 Standard Capillary and Packed GC</a></h3>
      <p class="col-caption-text font-color-pale">Get the high performance of the GC-2010 now also for your routine work. Based on the successful desi...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/gc/an/gc/gc2025.html"><img src="./products/images/category_top_04.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/gc/an/gc/gc2025.html" class="col-caption-soft-dark-background">Eco-Friendly GC-2025</a></h3>
      <p class="col-caption-text font-color-pale">Shimadzu’s new-generation GC-2025 capillary gas chromatograph minimizes environmental impact by redu...</p>
    </figcaption>
  </div>
</section>
```
*/
.col-with-border .unit {
  margin-bottom: 0;
}

.col-caption-block {
  border: 1px solid #bababa;
}

.col-caption-soft-dark-background {
  color: white;
  background-color: #999999;
}

.col-caption-text {
  padding: 28px 7px 25px;
  line-height: 1.6666;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .col-caption-text {
    padding: 15px 13px 25px;
    line-height: 1.4285;
    font-size: 1.4rem;
  }
}

/*#styleguide
.productsLineupList.bgDark - block, layout

PC - サムネイル画像リンクとサマリー情報を4カラムで表示
Mobile - サムネイル画像リンクとサマリー情報を2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent js-adjust-inner-height-parent col-with-border">
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/industry/ceramicsmetalsmining/"><img src="./industry/images/index_01.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/industry/ceramicsmetalsmining/" class="col-caption-light-dark-background">Ceramics, Metals, Mining</a></h3>
      <p class="col-caption-text font-color-pale">Non-organic materials such as metals, ceramics, glasses and carbon nanotubes are widely used not onl...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/industry/clinicalforensics/"><img src="./industry/images/index_02.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/industry/clinicalforensics/" class="col-caption-light-dark-background">Clinical research, Forensics</a></h3>
      <p class="col-caption-text font-color-pale">Whether working with drugs of abuse, pharmacokinetics or trace residues from a crime scene, confiden...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/industry/electronicselectronic/"><img src="./industry/images/index_03.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/industry/electronicselectronic/" class="col-caption-light-dark-background">Electronics, Electronic</a></h3>
      <p class="col-caption-text font-color-pale">Electronic devices and semiconductor technologies supports a variety of industries and add comfort t...</p>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><a href="/an/industry/environment/"><img src="./industry/images/index_04.jpg" alt=""></a></figure>
    <figcaption class="col-caption col-caption-block">
      <h3><a href="/an/industry/environment/" class="col-caption-light-dark-background">Environment</a></h3>
      <p class="col-caption-text font-color-pale">To protect the world's most vital resources requires instruments, accessories and software that can ...</p>
    </figcaption>
  </div>
</section>
```
*/
.col-caption-light-dark-background {
  color: white;
  background-color: #666666;
}

/*#styleguide
.technicalDocuments - block, icon, layout, link

PC - サムネイル画像とアイコン付きリンクリストを4カラムで表示
Mobile - サムネイル画像とアイコン付きリンクリストを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent js-adjust-inner-height-parent col-with-border">
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./literature/images/index_documents_01.jpg" alt=""></span></figure>
    <figcaption class="col-caption col-caption-block">
      <h3 class="col-caption-title col-caption-light-background">Gas Chromatography</h3>
      <ul class="col-caption-list">
        <li><a href="/an/gc-datasheet.html"><i class="custom-icon icon-paper-board"></i>Application Data Sheet</a></li>
        <li></li>
      </ul>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./literature/images/index_documents_02.jpg" alt=""></span></figure>
    <figcaption class="col-caption col-caption-block">
      <h3 class="col-caption-title col-caption-light-background">Liquid Chromatography</h3>
      <ul class="col-caption-list">
        <li><a href="/an/lc-datasheet.html"><i class="custom-icon icon-paper-board"></i>Application Data Sheet</a></li>
        <li><a href="/an/tec-rep.html"><i class="custom-icon icon-note"></i>Technical Report</a></li>
      </ul>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./literature/images/index_documents_03.jpg" alt=""></span></figure>
    <figcaption class="col-caption col-caption-block">
      <h3 class="col-caption-title col-caption-light-background">Gas Chromatograph-Mass Spectrometry</h3>
      <ul class="col-caption-list">
        <li><a href="/an/gcms-datasheet.html"><i class="custom-icon icon-paper-board"></i>Application Data Sheet</a></li>
        <li><a href="/an/gcms_tech-report.html"><i class="custom-icon icon-note"></i>Technical Report</a></li>
      </ul>
    </figcaption>
  </div>
  <div class="unit">
    <figure class="col-image col-image-basic col-image-with-caption"><span><img src="./literature/images/index_documents_04.jpg" alt=""></span></figure>
    <figcaption class="col-caption col-caption-block">
      <h3 class="col-caption-title col-caption-light-background">Liquid Chromatograph-Mass Spectrometry</h3>
      <ul class="col-caption-list">
        <li></li>
        <li><a href="/an/tec-rep.html"><i class="custom-icon icon-note"></i>Technical Report</a></li>
      </ul>
    </figcaption>
  </div>
</section>
```
*/
.col-caption-title {
  padding: 3px 8px 6px;
  margin: -1px;
  line-height: 1.4285;
  font-size: 1.4rem;
}

.col-caption-title a {
  text-decoration: none;
}

.col-caption-title a:hover {
  text-decoration: underline;
}

.col-caption-list li {
  padding: 12px 10px;
  color: #777777;
  line-height: 1.6666;
  font-size: 1.2rem;
  border-bottom: 1px solid #e5e5e5;
  min-height: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
}

.col-caption-list li:last-child {
  border-bottom: none;
}

.col-caption-list li a {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 19px;
  display: block;
  position: relative;
  line-height: inherit;
  font-size: inherit;
  text-decoration: underline;
}

.col-caption-list li a .custom-icon {
  font-size: 18px;
  position: absolute;
  left: -4px;
  top: 50%;
  margin-top: -10px;
}

@media all and (min-width: 740px) {
  .col-caption-list li {
    line-height: 1.4285;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 1.4rem;
    min-height: 46px;
  }
  .col-caption-list li a {
    padding-left: 24px;
  }
  .col-caption-list li a .custom-icon {
    left: -3px;
    margin-top: -9px;
  }
}

/*#styleguide
.utilBoxes - block, layout, link

PC - サムネイル画像とリンクを4カラムで表示
Mobile - サムネイル画像とリンクを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 js-adjust-height-parent col-with-border-under-margin">
  <div class="unit col-caption-block">
    <figure class="col-image-basic col-image-fluid-height col-image-with-caption"><a href="/an/gc/dst/dst_index.html"><img src="./products/images/category_package_01.jpg" alt=""></a></figure>
    <h3 class="col-text"><a href="/an/gc/dst/dst_index.html">Simulated Distillation Analysis</a></h3>
    </div>
  <div class="unit col-caption-block">
    <figure class="col-image-basic col-image-fluid-height col-image-with-caption"><a href="/an/gc/method_optimization.html"><img src="./products/images/category_package_02.jpg" alt=""></a></figure>
    <h3 class="col-text"><a href="/an/gc/method_optimization.html">Method Optimization System</a></h3>
  </div>
  <div class="unit col-caption-block">
    <figure class="col-image-basic col-image-fluid-height col-image-with-caption"><a href="/an/gc/advflowtech/bflush.html"><img src="./products/images/category_package_03.jpg" alt=""></a></figure>
    <h3 class="col-text"><a href="/an/gc/advflowtech/bflush.html">Backflushing System</a></h3>
  </div>
  <div class="unit col-caption-block">
    <figure class="col-image-basic col-image-fluid-height col-image-with-caption"><a href="/an/gc/advflowtech/dswitch.html"><img src="./products/images/category_package_04.jpg" alt=""></a></figure>
    <h3 class="col-text"><a href="/an/gc/advflowtech/dswitch.html">Detector Switching System</a></h3>
  </div>
</section>
```
*/
.col-image-no-border {
  margin-bottom: 10px;
}

.col-with-border-under-margin .unit {
  margin-bottom: 10px;
}

@media (min-width: 740px) {
  .col-with-border-under-margin .unit {
    margin-bottom: 20px;
  }
  .col-image-fluid-height a {
    height: auto;
    padding: 20px;
  }
}

/*#styleguide
.smallBoxes - block, layout, link

PC - テキストリンクを4カラムで表示
Mobile - テキストリンクを2カラムで表示
```
<section class="parent-block parent-block-no-justify parent-block-col-4 col-with-border-under-margin js-adjust-height-parent">
  <div class="unit col-caption-block">
    <h3 class="col-text col-text-with-padding font-color-pale"><a href="/an/gc/age-1000.html">Air Gas Purifier for Gas Chromatograph</a></h3>
  </div>
  <div class="unit col-caption-block">
    <h3 class="col-text col-text-with-padding font-color-pale"><a href="/an/gc/hs-10/hs-10.html">Headspace Sampler HS-10</a></h3>
  </div>
  <div class="unit col-caption-block">
    <h3 class="col-text col-text-with-padding font-color-pale"><a href="/an/gc/age-1000.html">Air Gas Purifier for Gas Chromatograph</a></h3>
  </div>
  <div class="unit col-caption-block">
    <h3 class="col-text col-text-with-padding font-color-pale"><a href="/an/gc/hs-10/hs-10.html">Headspace Sampler HS-10</a></h3>
  </div>
</section>
```
*/
.col-text-with-padding {
  padding: 18px 7px;
}

@media (min-width: 740px) {
  .col-text-with-padding {
    padding: 13px 15px;
  }
}

/*#styleguide
.smallBoxes - block, layout, link

PC - テキストリンクを4カラムで表示
Mobile - テキストリンクを2カラムで表示
```
<dl class="list list-with-date list-schedule">
  <dt>開催日</dt>
  <dd>2017年01月17日（火）～2017年01月19日（木）</dd>
  <dt>会場</dt>
  <dd>滋賀会場  <a href="#" class="btn btn-primary">申し込み画面へ</a></dd>
</dl>
```
*/
.heading-list-schedule {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  position: relative;
  padding-bottom: 40px;
}

@media all and (min-width: 740px), print {
  .heading-list-schedule {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    position: static;
    padding-bottom: 0;
  }
}

.heading-list-schedule .btn-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media all and (min-width: 740px), print {
  .heading-list-schedule .btn-wrapper {
    margin-left: 20px;
    float: right;
    position: static;
    bottom: auto;
    right: auto;
  }
}

.heading-list-schedule-title {
  overflow: hidden;
}

.heading-list-schedule-text {
  display: block;
  overflow: hidden;
}

.list-schedule-wrapper {
  margin-bottom: 40px;
}

.list-schedule-inner {
  padding-bottom: 5px;
  margin-bottom: 30px;
  margin-top: 30px;
  border-bottom: 1px solid #ddd;
}

.list-schedule-inner:first-child {
  border-top: 1px solid #ddd;
  padding-top: 30px;
}

.list-schedule {
  padding: 0 0 20px 0;
}

@media all and (min-width: 740px), print {
  .list-schedule {
    display: inline-block;
    width: 48%;
    vertical-align: top;
  }
}

@media all and (min-width: 740px), print {
  .list-schedule:nth-child(even) {
    margin-left: 1%;
  }
}

@media all and (min-width: 740px), print {
  .list-schedule:nth-child(odd) {
    margin-right: 1%;
  }
}

.list-schedule dt {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.list-schedule dd {
  line-height: 1.6;
  font-size: 1.4rem;
}

.list-schedule dd .tag {
  position: relative;
  top: -2px;
}

@media all and (min-width: 740px), print {
  .list-schedule dd .tag {
    position: static;
    top: auto;
  }
}

.list-schedule-btn-wrapper {
  text-align: center;
  margin-top: 20px;
}

@media all and (min-width: 740px), print {
  .list-schedule-btn-wrapper {
    float: right;
    margin-top: 0;
  }
}

.list-schedule-for-page .heading-list-schedule {
  padding-bottom: 0;
}

.list-schedule-for-page .list-schedule-inner:first-child {
  border-top: none;
  padding-top: 0;
}

@media all and (min-width: 740px), print {
  .list-schedule-for-page .list-schedule-inner .list-schedule:nth-child(odd) {
    margin-right: 1%;
  }
}

@media all and (min-width: 740px), print {
  .list-schedule-for-page .list-schedule-inner .list-schedule:nth-child(even) {
    margin-left: 1%;
  }
}

.image-col-set-element-no-image {
  background-color: #999;
  color: #fff;
  text-decoration: none;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  text-align: center;
  line-height: 1.4;
}

.image-col-set-element-no-image:after {
  content: "Sorry this item has no image.";
}

.image-col-set-element-no-image:hover {
  text-decoration: none;
  opacity: 0.5;
}

.waSlideMenu-nav {
  position: relative;
  overflow: hidden;
}

.waSlideMenu-wrapper {
  left: 0;
  position: relative;
  top: 0;
}

.waSlideMenu-menu {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: inherit;
  left: 0;
}

.waSlideMenu-inheritedmenu {
  position: absolute;
  left: 100%;
  top: 0;
}

.list-wa-slide-unit {
  position: relative;
}

.list-wa-slide-unit .col-image {
  margin-bottom: 0;
  padding: 0 2px;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-unit .col-image {
    padding: 0;
  }
}

.list-wa-slide-unit .col-image-basic img {
  max-height: 90px;
  max-width: 180px;
  width: auto;
  height: 90px;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-unit .col-image-basic img {
    max-height: 140px;
    max-width: 240px;
    height: auto;
  }
}

.list-wa-slide-unit .col-image-basic a,
.list-wa-slide-unit .col-image-basic span {
  height: 100px;
  overflow: hidden;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-unit .col-image-basic a,
  .list-wa-slide-unit .col-image-basic span {
    width: 248px;
    height: 150px;
  }
}

.list-wa-slide .col-caption-title {
  position: relative;
  margin: 0;
  padding-right: 25px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media all and (min-width: 740px), print {
  .list-wa-slide .col-caption-title {
    cursor: pointer;
    padding-right: 30px;
  }
}

.list-wa-slide .col-caption-title .custom-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  font-size: 12px;
}

.list-wa-slide .col-caption-title.col-caption-title-fat {
  padding: 30px 22px 30px 8px;
}

@media all and (min-width: 740px), print {
  .list-wa-slide .col-caption-title.col-caption-title-fat {
    font-size: 16px;
  }
}

.list-wa-slide-list {
  position: absolute;
  left: 10px;
  right: 0;
  z-index: 10;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list {
    left: 15px;
  }
}

.list-wa-slide-list ul {
  padding: 7px 0;
  border-top: none;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list ul {
    padding: 10px 0;
  }
}

.list-wa-slide-list li {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.66667;
  color: #808080;
  border-bottom: none;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.71429;
    color: #464646;
  }
}

.list-wa-slide-list li a {
  position: relative;
  display: block;
  padding: 2px 5px 2px 21px;
  color: inherit;
  font-size: 13px;
  line-height: inherit;
  text-decoration: none;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li a {
    padding: 2px 5px 2px 26px;
    text-decoration: underline;
    font-size: 14px;
  }
}

.list-wa-slide-list li a:hover {
  text-decoration: none;
}

.list-wa-slide-list li a .custom-icon {
  position: absolute;
  left: 9px;
  top: 5px;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li a .custom-icon {
    left: 13px;
  }
}

.list-wa-slide-list li .waSlideMenu-back a {
  color: #fff;
  background-color: #000;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li .waSlideMenu-back a {
    text-decoration: none;
    padding: 2px 5px 2px 26px;
  }
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li .waSlideMenu-back a:hover {
    text-decoration: underline;
  }
}

.list-wa-slide-list li .waSlideMenu-back a .custom-icon {
  position: absolute;
  left: 5px;
  top: 6px;
  font-size: 11px;
  color: #ad0000;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list li .waSlideMenu-back a .custom-icon {
    left: 10px;
    top: 9px;
    color: #de0000;
  }
}

.list-wa-slide-list-btn-to-child {
  position: relative;
  display: block;
  padding: 2px 5px 2px 21px;
  font-size: 13px;
  line-height: inherit;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list-btn-to-child {
    padding: 2px 5px 2px 26px;
    color: #464646;
    cursor: pointer;
    font-size: 14px;
  }
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list-btn-to-child:hover {
    text-decoration: underline;
  }
}

.list-wa-slide-list-btn-to-child .custom-icon {
  position: absolute;
  left: 6px;
  top: 0;
  margin-top: 6px;
  font-size: 11px;
}

@media all and (min-width: 740px), print {
  .list-wa-slide-list-btn-to-child .custom-icon {
    margin-top: 8px;
    left: 10px;
    font-size: 13px;
  }
}

.js-accordion-toggle-target {
  display: none;
}

.list-wa-slide ul.col-caption-list {
  padding: 0;
}

.list-wa-slide .col-caption-list li {
  padding: 0;
  color: #777;
  line-height: 1.6666;
  font-size: 1.2rem;
  border-bottom: 1px solid #e5e5e5;
  min-height: 58px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.list-wa-slide .col-caption-list li:last-child {
  border-bottom: none;
}

@media all and (min-width: 740px), print {
  .list-wa-slide .col-caption-list li {
    line-height: 1.4285;
    padding-left: 12px;
    padding-right: 12px;
  }
}

.list-wa-slide .col-caption-list li a {
  padding: 13px 10px 13px 28px;
}

.list-wa-slide .col-caption-list li a .custom-icon {
  font-size: 18px;
  left: 6px;
  top: 24px;
  color: #000;
}

@media all and (min-width: 740px), print {
  .list-wa-slide .col-caption-list li a .custom-icon {
    left: 0;
  }
}

/*
#overview
local link set

3カラム横並びのリンクリスト（モバイル時は画像の右に文章回り込み）
*/
/*#styleguide
.localLinkSet - block, layout, link

PC - サムネイル画像付きのリンクと説明文を3カラムで表示
Mobile - サムネイル画像の右にリンクと説明文を表示
```

```
<section class="parent-block parent-block-col-3 local-link-set">
  <div class="unit">
    <a class="local-link-set-inner" href="#">
      <figure class="col-image col-image-basic"><img src="./images/dammy_02.jpg" alt="High Sensitivity"></figure>
      <figcaption class="local-link-set-caption">
        <h3 class="local-link-set-caption-title">High Sensitivity</h3>
        <p class="font-color-pale local-link-set-caption-text">Detection Sensitivity over 100x Higher than TCD, 2x Higher than FID</p>
      </figcaption>
    </a>
  </div>
  <div class="unit">
    <a class="local-link-set-inner" href="#">
      <figure class="col-image col-image-basic"><img src="./images/dammy_03.jpg" alt="Novel Universal Detector"></figure>
      <figcaption class="local-link-set-caption">
        <h3 class="local-link-set-caption-title">Novel Universal Detector</h3>
        <p class="font-color-pale local-link-set-caption-text">Single Detector Approach for Your Complex Analyses</p>
      </figcaption>
    </a>
  </div>
  <div class="unit">
    <a class="local-link-set-inner" href="#">
      <figure class="col-image col-image-basic"><img src="./images/dammy_04.jpg" alt="Long-Term Stability"></figure>
      <figcaption class="local-link-set-caption">
        <h3 class="local-link-set-caption-title">Long-Term Stability</h3>
        <p class="font-color-pale local-link-set-caption-text">Long-Term Stability with New Discharge Design</p>
      </figcaption>
    </a>
  </div>
</section>
```
*/
.local-link-set {
  padding-bottom: 20px;
}

.local-link-set .col-image {
  margin-bottom: 0;
  padding: 20px 10px;
  width: 48%;
  text-align: center;
  -ms-flex-item-align: start;
  align-self: flex-start;
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
}

.local-link-set .col-image img {
  max-width: 100%;
}

.local-link-set-inner {
  text-decoration: none;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
}

.local-link-set-caption {
  width: 48%;
}

.local-link-set-caption-title {
  line-height: 1.4285;
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: underline;
  margin-bottom: 1em;
}

.local-link-set-caption-text {
  line-height: 1.6666;
  padding-bottom: 0px;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .local-link-set .unit {
    width: 336px;
    margin: 0;
    -ms-flex: initial;
    flex: initial;
    -webkit-box-flex: initial;
    -webkit-flex: initial;
    -moz-box-flex: initial;
    -moz-flex: initial;
  }
  .local-link-set .col-image {
    padding: 10px;
    width: auto;
  }
  .local-link-set-inner {
    display: block;
  }
  .local-link-set-caption {
    padding: 10px 15px;
    width: auto;
  }
  .local-link-set-caption-title {
    line-height: 1.5;
    font-size: 1.6rem;
    margin-bottom: 0.5em;
  }
  .local-link-set-caption-text {
    line-height: 1.7142;
    font-size: 1.4rem;
  }
}

/*
#overview
visual set

主に製品紹介などで使用する、画像つきのファーストビュー領域
*/
/*#styleguide
.productVi - layout, title

PC - 見出しと説明文に右寄せ画像をセットで表示
Mobile - 見出しの下に画像と説明文をセットで表示
```

<section class="visual-set">
  <div class="visual-set-image visible-pc"><img src="./images/dammy_01.jpg" alt=""></div>
  <div class="visual-set-description">
    <h2 class="heading-normal">HIGH SENSITIVITY GAS CHROMATOGRAPH SYSTEM</h2>
    <div class="visual-set-image visible-mobile"><img src="./images/dammy_01.jpg" alt=""></div>
    <p class="visual-set-description-text">The new Tracera GC System is now ready to solve your trace analysis needs. This system utilizes the new Barrier Discharge Ionization Detector technology coupled with a GC-2010 Plus capillary gas chromatograph to create a GC system that makes it possible to reveal trace components that are difficult to see by other GC detectors.</p>
  </div>
</section>
```
*/
.visual-set-image {
  text-align: center;
  margin-bottom: 20px;
}

.visual-set-image img {
  max-height: 280px;
  max-width: 100%;
}

.visual-set-description-text {
  line-height: 1.6666;
  padding-bottom: 1em;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  .visual-set {
    margin-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
  }
  .visual-set-image {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    margin-bottom: 0px;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -moz-order: 1;
  }
  .visual-set-image img {
    max-height: 330px;
  }
  .visual-set-description {
    -ms-flex: 1 1 0px;
    flex: 1 1 0px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -moz-flex: 1;
  }
  .visual-set-description-text {
    line-height: 1.5;
    font-size: 1.6rem;
  }
}

/*
#overview
video set

動画再生エリア
*/
/*#styleguide
.video-set

```

<section class="video-set">
  <script type="text/javascript" charset="UTF-8" src="https://ssl-cache.stream.ne.jp/www50/eqb774lloz/jmc_pub/jmc_swf/player/t3/if.js"></script>
  <script type="text/javascript">
  	jstream_t3.PlayerFactoryIF.create({
  	b:"eqb774lloz.eq.webcdn.stream.ne.jp/www50/eqb774lloz/jmc_pub/jmc_swf/player/",
  	c:"MjE1Mw==",
  	m:"MzYx",
  	s:{
  		el:"off",
  		hp:180,
  		rp:"fit",
  		sn:"",
  		tg:"off",
  		wp:320
  	}
  });
  </script>
  <noscript>
  <div>Please enable JavaScript to watch this content.</div>
  </noscript>
</section>
```
*/
.video-set {
  width: 100%;
  padding-bottom: 56.25%;
  margin-bottom: 20px;
  position: relative;
}

.video-set iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.parent-block-col-2 .unit .video-set {
  margin-bottom: 0;
}

@media all and (min-width: 740px) {
  .video-set {
    margin-bottom: 30px;
  }
  .video-set.featured-article-image {
    width: auto;
    padding-bottom: 0;
    position: static;
    margin-bottom: 8px;
  }
  .video-set.featured-article-image iframe {
    position: static;
    top: auto;
    right: auto;
    width: 512px !important;
    height: 400px !important;
  }
  .featured-article-sub .video-set.featured-article-image iframe {
    width: 256px !important;
    height: 168px !important;
  }
}

/*
#overview
image set

画像とテキストのレイアウト
*/
/*#styleguide
.imgSet - layout, title

PC - 説明文に右寄せ画像をセットで表示します。
Mobile - 画像の下に説明文をセットで表示します。
```
```
<section class="image-set">
  <figure class="image-set-image image-set-image-pull-right"><img src="./images/dammy_05.jpg" alt=""></figure>
  <p>The barrier discharge ionization detector (BID) is a highly sensitive device that creates ionization from a Helium-based, dielectric barrier discharge plasma. A 17.7eV plasma is generated by applying a high voltage to a quartz dielectric chamber, in the presence of helium at a relatively low temperature.<br>Compounds that elute from the GC column are ionized by this He plasma energy and then detected by the collection electrode and processed as peaks.</p>
  <p>The BID was developed thru collaborative research with Dr. Katsuhisa Kitano, Center forAtomic and Molecular Technologies, Graduate School of Engineering, Osaka University, resulting in 3 U.S. patents and 4 patents pending.</p>
</section>
```
*/
.image-set {
  margin-bottom: 20px;
  overflow: hidden;
}

.image-set-image {
  text-align: center;
  margin-bottom: 5px;
  padding-bottom: 15px;
}

@media all and (min-width: 740px), print {
  .image-set-image {
    display: table;
    width: 160px;
  }
  .image-set-image img {
    max-width: none;
  }
}

@media all and (min-width: 740px), print {
  .image-set-image-pull-right {
    margin-left: 30px;
    float: right;
  }
}

@media all and (min-width: 740px), print {
  .image-set-image-pull-left {
    margin-right: 30px;
    float: left;
  }
}

@media all and (min-width: 740px), print {
  .image-set-image a img {
    position: relative;
    z-index: 1;
  }
}

.image-set-caption {
  line-height: 1.6666;
  font-size: 1.2rem;
}

/*#styleguide
.image-set

PC - 見出しと説明文に右寄せ画像をセットで表示
Mobile - 画像の下に見出しと説明文をセットで表示
```

<section class="image-set image-set-with-heading">
  <figure class="image-set-image image-set-image-pull-right"><img src="./support/images/index_01.jpg" alt=""></figure>
  <h3 class="heading-normal">Your satisfaction is our motivation!</h3>
  <p class="image-set-lead">We are Shimadzu Service experts focused on customer care.<br>
  -Trained and certified according to Shimadzu High Quality Standards<br>
  -Educated with "Hands on Training" and Theory in our Training Centers<br>
  -Access to Technical Database for on-going Learning and Updates</p>
  <p class="image-set-lead">Anywhere, anytime we are at your service to make sure that you achieve results you can rely on.</p>
</section>
```
*/
@media all and (min-width: 740px), print {
  .image-set-with-heading {
    margin-top: 30px;
  }
}

.image-set-with-heading .heading-normal {
  line-height: 1.5;
}

@media all and (min-width: 740px), print {
  .image-set-with-heading .heading-normal {
    line-height: 1.25;
    margin-bottom: 1em;
  }
}

/*
#overview
image with caption

画像とテキストのレイアウト
*/
/*#styleguide
.img with caption

```

<div class="image-with-caption">
  <div class="image-with-caption-inner">
    <img src="/an/sites/shimadzu.com.an/files/images/product/n9j25k000000tq1u.jpg" alt="" width="147" height="80">
    <p class="image-with-caption-caption-text">C：頑丈な部分に固定（AA-7000 右 側面。 黒色シャーシ部分に固定）</p>
  </div>
</div>
<div class="image-with-caption">
  <div class="image-with-caption-inner">
      <img src="http://prod.an.shimadzu.co.jp/sites/default/files/ckeditor/support/safe/c6nq2v000000q6n1-img/c6nq2v000000sils.jpg" alt="" width="550" height="400">
    <p class="image-with-caption-caption-text">C：頑丈な部分に固定（AA-7000 右 側面。 黒色シャーシ部分に固定）</p>
  </div>
</div>
```
*/
@media all and (min-width: 740px), print {
  .image-with-caption {
    display: inline-block;
  }
}

.image-with-caption-inner {
  text-align: center;
}

@media all and (min-width: 740px), print {
  .image-with-caption-inner {
    display: table;
    width: 160px;
  }
  .image-with-caption-inner img {
    max-width: none;
  }
}

.image-with-caption-caption-text {
  margin-top: 10px;
}

/*
#overview
image with caption

画像とテキストのレイアウト
*/
/*#styleguide
.img with caption

```
<div class="text-center">
<div class="image-with-caption">
  <div class="image-with-caption-inner">
    <img src="/an/sites/shimadzu.com.an/files/images/product/n9j25k000000tq1u.jpg" alt="" width="147" height="80">
    <p class="image-with-caption-caption-text">C：頑丈な部分に固定（AA-7000 右 側面。 黒色シャーシ部分に固定）</p>
  </div>
</div>
<div class="image-with-caption">
  <div class="image-with-caption-inner">
    <img src="/an/sites/shimadzu.com.an/files/images/product/n9j25k000000tq1u.jpg" alt="" width="147" height="80">
    <p class="image-with-caption-caption-text">C：頑丈な部分に固定（AA-7000 右 側面。 黒色シャーシ部分に固定）</p>
  </div>
</div>
</div>

```
*/
/*
#overview
page top

ページヘッダへのスクロールナビゲーション
*/
/*
```

<p class="page-top-area"><a href="javascript:void(0);" class="btn-page-top"><i class="icon icon-arrow-page-top">Top of This Page</i></a></p>
```
*/
.page-top-area {
  padding-bottom: 35px;
}

.page-top-area .icon {
  margin: 0 auto;
  text-indent: 100%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
}

.page-top-area.for_fixed {
  transition: opacity 0.2s linear;
  right: 20px;
  bottom: 86px;
  padding-bottom: 0px;
  position: fixed;
  opacity: 0;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
}

@media all and (min-width: 740px) {
  .page-top-area.for_fixed {
    right: auto;
    left: 50%;
    bottom: 90px;
    margin-left: 570px;
  }
}

.page-top-area.for_fixed.on {
  bottom: 86px;
  position: fixed;
  opacity: 0.8;
}

@media all and (min-width: 740px) {
  .page-top-area.for_fixed.on {
    bottom: 90px;
    opacity: 1;
  }
}

.page-top-area.for_fixed .icon {
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
}

@media all and (min-width: 740px) {
  .page-top-area.for_fixed .icon:hover {
    text-decoration: inherit;
    opacity: 0.7;
  }
}

@media all and (min-width: 740px) {
  .page-top-area {
    transition: opacity 0.2s linear;
    left: 50%;
    bottom: 90px;
    padding-bottom: 0px;
    margin-left: 570px;
    position: fixed;
    opacity: 0;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
  }
  .page-top-area.on {
    bottom: 90px;
    position: fixed;
    opacity: 1;
  }
  .page-top-area .icon {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .page-top-area .icon:hover {
    text-decoration: inherit;
    opacity: 0.7;
  }
}

/*
#overview
foot util

ユーザー誘導用ナビゲーション
*/
/*#styleguide
.foot-util - block, icon, layout, link

PC - アイコン付きリンクブロックを1カラム＋4カラムで表示
Mobile - アイコン付きリンクブロックを1カラム＋2カラムで表示
```

<nav class="foot-util">
  <div class="container">
    <div class="foot-util-item foot-util-item-contact"><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_product_Information"><span>Contact Us</span></a></div>
    <div class="foot-util-item foot-util-item-search"><a href="/an/contact/"><span>Contact Search</span></a></div>
    <ul class="foot-util-list">
      <li class="foot-util-item foot-util-item-quotation"><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_quotation"><span>Quotation</span></a></li>
      <li class="foot-util-item foot-util-item-info"><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_product_Information"><span>Products Information</span></a></li>
      <li class="foot-util-item foot-util-item-tech"><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_technical_inquiry"><span>Technical Inquiry</span></a></li>
      <li class="foot-util-item foot-util-item-other"><a href="https://solutions.shimadzu.co.jp/cgi-bin/MailDeliver.cgi?CFGFILE=g-lab_other_inquiry"><span>Other Inquiry</span></a></li>
    </ul>
  </div>
</nav>
```
*/
.foot-util {
  margin: 0 10px;
}

.foot-util-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.foot-util-item {
  margin-bottom: 10px;
}

@media all and (min-width: 740px), print {
  .foot-util-item {
    margin-bottom: 16px;
  }
}

.foot-util-item a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #999;
  text-decoration: none;
  height: 60px;
  padding: 0 10px 0 20px;
  line-height: 1.4;
  font-size: 10px;
}

@media all and (min-width: 740px), print {
  .foot-util-item a {
    font-size: 16px;
    height: 120px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item a:hover {
    color: #ff0000;
  }
}

.foot-util-item a .custom-icon {
  margin-right: 5px;
  font-size: 18px;
}

@media all and (min-width: 740px), print {
  .foot-util-item a .custom-icon {
    font-size: 30px;
  }
}

.foot-util-item a .custom-icon.icon-inquiry,
.foot-util-item a .custom-icon.heading-with-icon-icon-inquiry {
  font-size: 16px;
}

@media all and (min-width: 740px), print {
  .foot-util-item a .custom-icon.icon-inquiry,
  .foot-util-item a .custom-icon.heading-with-icon-icon-inquiry {
    font-size: 30px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item a.foot-util-item-inner-vertical-center-wrap {
    display: block;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-inner-vertical-center {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-inner-vertical-center .custom-icon {
    position: absolute;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-quotation .foot-util-item-inner-vertical-center {
    padding-left: 56px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-quotation .foot-util-item-inner-vertical-center .custom-icon {
    top: -5px;
    left: 16px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-information .foot-util-item-inner-vertical-center {
    padding-left: 55px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-information .foot-util-item-inner-vertical-center .custom-icon {
    top: 5px;
    left: 15px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-inquiry .foot-util-item-inner-vertical-center {
    padding-left: 62px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-inquiry .foot-util-item-inner-vertical-center .custom-icon {
    top: 5px;
    left: 20px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-other .foot-util-item-inner-vertical-center {
    padding-left: 45px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-item-other .foot-util-item-inner-vertical-center .custom-icon {
    top: -5px;
    left: 2px;
  }
}

.foot-util-item-contact {
  margin-bottom: 20px;
}

@media all and (min-width: 740px), print {
  .foot-util-item-contact {
    display: none;
  }
}

.foot-util-item-contact a {
  border: none;
  font-size: 14px;
  color: #fff;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #ff0000;
}

@media all and (min-width: 740px), print {
  .foot-util-item-contact a:hover {
    color: #fff;
  }
}

.foot-util-item-col-1 a {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.foot-util-item-col-2 {
  margin-right: 5px;
  width: 50%;
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-2 {
    width: 25%;
    margin-right: 15px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.foot-util-item-col-2:nth-child(2n) {
  margin-right: 0;
  margin-left: 5px;
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-2:nth-child(2n) {
    margin-right: 15px;
    margin-left: 0;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-2:nth-child(2n):last-child {
    margin-right: 0;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-2 a {
    padding-right: 40px;
    padding-left: 40px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-2 a .custom-icon {
    margin-right: 15px;
  }
}

.foot-util-item-col-3 {
  margin-right: 15px;
  width: 33.333333%;
}

.foot-util-item-col-3 a {
  display: block;
  position: relative;
  text-align: center;
  padding: 0;
}

.foot-util-item-col-3 a .custom-icon {
  margin-right: 0;
  display: inline-block;
  font-size: 20px;
  position: relative;
  top: 15px;
}

.foot-util-item-col-3 a .custom-icon.icon-inquiry,
.foot-util-item-col-3 a .custom-icon.heading-with-icon-icon-inquiry {
  font-size: 20px;
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-3 a .foot-util-item-inner-vertical-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-top: 10px;
  }
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-3 a .foot-util-item-inner-vertical-center .custom-icon {
    font-size: 30px;
    margin-right: 15px;
    position: relative;
    top: -5px;
  }
}

.foot-util-item-col-3 .foot-util-item-inner-text {
  position: absolute;
  bottom: 5px;
  right: 0;
  left: 0;
  display: block;
}

@media all and (min-width: 740px), print {
  .foot-util-item-col-3 .foot-util-item-inner-text {
    position: static;
    display: inline-block;
  }
}

.foot-util-item-col-3:last-child {
  margin-right: 0;
}

.webform-progressbar-outer {
  border: 1px solid #464646;
}

.webform-progressbar-inner {
  background-color: #464646;
}

.webform-progressbar-page {
  border: 1px solid #464646;
}

.webform-progressbar-page.completed,
.webform-progressbar-page.current {
  background-color: #464646;
}

.webform-client-form {
  margin-left: 0;
  margin-right: 0;
}

.webform-client-form .form-actions {
  text-align: center;
}

.webform-client-form.preview .form-item {
  font-weight: 800;
}

.webform-client-form.preview .form-item label {
  font-weight: normal;
}

.webform-client-form .captcha {
  margin-bottom: 20px;
}

@media all and (min-width: 740px), print {
  .webform-client-form .captcha {
    margin-bottom: 30px;
  }
}

.webform-component {
  display: block;
}

@media all and (min-width: 740px), print {
  .webform-component {
    width: 100%;
    display: block;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
  }
}

.webform-component .description {
  line-height: 1.3;
  margin: 10px 0;
}

.webform-component .form-textarea {
  border: 1px solid #000;
  padding: 10px 8px 11px;
}

.webform-component label {
  display: block;
  margin-bottom: 15px;
  width: auto;
}

.webform-component label.option {
  margin-bottom: 0;
  width: 100%;
}

.webform-component input {
  border: 1px solid #000;
  display: block;
  font-size: 1.2rem;
  padding: 9px;
  width: 100%;
}

.webform-component input.form-checkbox,
.webform-component input.form-radio {
  margin-top: 0;
  margin-bottom: 2px;
  margin-left: 0;
  margin-right: 10px;
  padding: 0;
  width: auto;
}

.webform-component select {
  z-index: 0;
  background-color: #fff;
  padding: 9px;
  width: 100%;
}

.webform-component .form-item.form-type-checkbox,
.webform-component .form-item.form-type-radio {
  background-color: #ececec;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 16px;
}

.webform-component .form-item.form-type-checkbox.active,
.webform-component .form-item.form-type-radio.active {
  background-color: #dcdcdc;
}

.webform-component-fieldset {
  margin-top: 20px;
}

@media all and (min-width: 740px), print {
  .webform-component-fieldset {
    margin-top: 35px;
  }
}

.webform-component-fieldset .fieldset-legend {
  font-size: 1.4rem;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 20px;
}

@media all and (min-width: 740px), print {
  .webform-component-fieldset .fieldset-legend {
    font-size: 1.8rem;
  }
}

.webform-component.webform-component-number input[readonly="readonly"],
.webform-component.webform-component-textfield input[readonly="readonly"],
.webform-component.webform-component-email input[readonly="readonly"] {
  background-color: #d7d7d7;
}

.webform-component.webform-component-textarea textarea[readonly="readonly"] {
  background-color: #d7d7d7;
}

.webform-component.webform-component-textarea .form-textarea {
  resize: none;
}

.webform-component.webform-component-checkboxes .form-checkboxes .form-item.form-type-checkbox .form-checkbox {
  margin-bottom: 0;
  margin-right: 0;
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

@media all and (min-width: 740px), print {
  .webform-component.webform-component-checkboxes .form-checkboxes .form-item.form-type-checkbox .form-checkbox {
    margin-right: 10px;
  }
}

.webform-component.webform-component-checkboxes .form-checkboxes .form-item.form-type-checkbox label.option {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  line-height: 1.2;
  display: inline;
  width: auto;
}

.webform-component.webform-component-date .form-type-select,
.webform-component.webform-component-date .form-type-textfield {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 5px;
}

.webform-component.webform-component-date .form-type-select .year.form-text,
.webform-component.webform-component-date .form-type-textfield .year.form-text {
  display: inline-block;
  line-height: 1.3;
}

.webform-component.webform-component-date .webform-calendar {
  display: block;
}

.webform-component.webform-component-time .webform-container-inline .form-type-select {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 10px;
}

@media all and (min-width: 740px), print {
  .webform-component.webform-component-time .webform-container-inline .form-type-select {
    margin-bottom: 16px;
  }
}

.webform-component.webform-component-time .webform-container-inline .form-radios {
  display: block;
}

@media all and (min-width: 740px), print {
  .webform-component.webform-component-time .webform-container-inline .form-radios {
    display: inline-block;
  }
}

.webform-component.webform-component-time .webform-container-inline .form-radios .form-type-radio {
  display: inline-block;
  margin-top: 0;
}

.webform-component.webform-component-grid .webform-grid {
  width: 100%;
}

.webform-component.webform-component-grid .webform-grid tr th {
  font-weight: bold;
}

.webform-component.webform-component-grid .webform-grid tr th.webform-grid-question,
.webform-component.webform-component-grid .webform-grid tr th.webform-grid-option {
  border-bottom: 3px solid #ccc;
  padding-right: 1em;
  text-align: left;
}

.webform-component.webform-component-grid .webform-grid tr th.checkbox {
  text-align: center;
}

.webform-component.webform-component-grid .webform-grid tr.odd,
.webform-component.webform-component-grid .webform-grid tr.even {
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  padding: 0.1em 0.6em;
}

.webform-component.webform-component-grid .webform-grid-option .form-type-radio {
  margin-top: 0;
  margin-bottom: 0;
}

.webform-component.webform-component-grid .webform-grid-option .form-type-radio .form-radio {
  margin: 0 auto;
}

.webform-component .form-radios .form-item.form-type-radio input.form-radio {
  margin-bottom: 0;
  margin-right: 0;
  display: inline-block;
  width: auto;
  vertical-align: middle;
}

@media all and (min-width: 740px), print {
  .webform-component .form-radios .form-item.form-type-radio input.form-radio {
    margin-right: 10px;
  }
}

.webform-component .form-radios .form-item.form-type-radio label.option {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  line-height: 1.2;
  display: inline;
  width: auto;
}

.webform-next,
.webform-previous,
.webform-submit {
  cursor: pointer;
  width: 150px;
}

@media all and (min-width: 740px), print {
  .webform-next,
  .webform-previous,
  .webform-submit {
    padding-left: 0;
    padding-right: 0;
    width: 160px;
  }
}

.webform-previous {
  margin-right: 10px;
}

.webform-container-inline div.form-item {
  display: block;
}

@media all and (min-width: 740px), print {
  .webform-container-inline div.form-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.webform-note-message {
  margin: 0 0 1em;
  padding: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #d8d8d8;
}

.webform-note-message > p {
  margin: 0;
  padding-bottom: 1em;
}

.webform-note-message > p:last-child {
  padding-bottom: 0;
}

.webform-error-message {
  margin: 0 0 1em;
  padding: 1em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px red;
}

.webform-error-message > p {
  color: red;
  font-weight: bold;
  margin: 0;
  padding-bottom: 1em;
}

.webform-error-message > p:last-child {
  padding-bottom: 0;
}

.ie .webform-component select,
.webform-component .ie select {
  width: 100%;
}

.ie .webform-component select::-ms-expand,
.webform-component .ie select::-ms-expand {
  display: block;
}

.footerUtilNav {
  position: fixed;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  background-color: #ebebeb;
  width: 100%;
  border-top: #b3b2b2 solid 1px;
  padding: 11px 10px 12px;
}

@media all and (min-width: 740px), print {
  .footerUtilNav {
    display: none;
  }
}

.footerUtilNav li {
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.75;
  letter-spacing: 0px;
  font-size: 0.8rem;
  border-left: #b3b2b2 solid 1px;
}

.footerUtilNav li:first-child {
  border-left: none;
  -o-border-image: none;
  border-image: none;
}

.footerUtilNav li a {
  color: #464646;
  padding-bottom: 3px;
  text-decoration: none;
  display: block;
}

.footerUtilNav li a .custom-icon {
  margin: 5px auto 0;
  display: block;
  font-size: 17px;
}

.footerUtilNav li a .custom-icon.icon-quotation,
.footerUtilNav li a .custom-icon.heading-with-icon-icon-quotation {
  margin-bottom: 2px;
}

.image_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 50px;
}

@media all and (min-width: 740px), print {
  .image_link {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}

.image_link-item {
  margin-bottom: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 0%;
}

@media all and (min-width: 740px), print {
  .image_link-item {
    margin-right: 40px;
    margin-bottom: 35px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 228px;
  }
}

.image_link-item-title {
  line-height: 1.4;
  margin-bottom: 10px;
  -ms-flex-item-align: auto;
  align-self: auto;
}

.image_link-item-image {
  -ms-flex-item-align: center;
  align-self: center;
  width: 100%;
  min-height: 0%;
  overflow: hidden;
  border: 1px solid #bababa;
}

@media all and (min-width: 740px), print {
  .image_link-item-image {
    height: 136px;
  }
}

.image_link-item-image img {
  width: 100%;
  display: block;
}

@media all and (min-width: 740px), print {
  .image_link-item-image img {
    width: 228px;
    height: 136px;
  }
}

@media all and (min-width: 740px), print {
  .image_link-item:nth-child(4n) {
    margin-right: 0;
  }
}

.image_link-item:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 740px), print {
  .image_link-item:last-child {
    margin-bottom: 35px;
  }
}

.prBanner {
  margin: 0 -10px 20px;
}

@media (min-width: 740px), print {
  .prBanner {
    margin: 0 0 20px;
  }
}

.prBanner img {
  width: 100%;
  height: auto;
}

.relationContents {
  padding-bottom: 20px;
}

@media (min-width: 740px), print {
  .relationContents {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 20px;
    padding-bottom: 40px;
  }
}

.relationContents figure {
  margin-bottom: 10px;
}

@media (min-width: 740px), print {
  .relationContents figure {
    margin-bottom: 0px;
    margin-right: 30px;
  }
}

.relationContents figure a {
  display: block;
  width: 145px;
  border: 1px solid #bababa;
}

@media (min-width: 740px), print {
  .relationContents figure a {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    width: 336px;
    height: 130px;
  }
}

.relationContents figure a img {
  max-width: 143px;
  vertical-align: bottom;
}

@media (min-width: 740px), print {
  .relationContents figure a img {
    max-width: 334px;
    max-height: 128px;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    -webkit-backface-visibility: hidden;
  }
  .relationContents figure a img:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
    text-decoration: inherit;
  }
}

.relationContents figcaption h2 {
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.42857;
  margin-bottom: 0.5em;
}

@media (min-width: 740px), print {
  .relationContents figcaption h2 {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    margin-bottom: 1.25em;
  }
}

.relationContents figcaption p {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.66667;
  color: #777;
}

@media (min-width: 740px), print {
  .relationContents figcaption p {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.42857;
  }
}

.bridgeCustomer {
  border: 1px solid #bababa;
  margin-bottom: 20px;
  padding: 15px;
}

@media (min-width: 740px), print {
  .bridgeCustomer {
    width: 80%;
    margin: 0 auto 20px;
    padding: 20px 50px;
  }
}

.bridgeCustomer h2 {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.25;
  text-transform: uppercase;
  margin-bottom: 1em;
  text-align: center;
}

@media (min-width: 740px), print {
  .bridgeCustomer h2 {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 1.25;
  }
}

@media (min-width: 740px), print {
  .bridgeCustomer .bridgeCustomer__body {
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
  }
}

.bridgeCustomer .bridgeCustomer__note {
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.66667;
  text-indent: -1em;
  padding-left: 1em;
  margin-top: 15px;
}

.bridgeCustomer figure {
  margin-bottom: 1em;
  margin-right: 0;
  text-align: center;
}

@media (min-width: 740px), print {
  .bridgeCustomer figure {
    margin-right: 50px;
  }
}

.margin-top-0 {
  margin-top: 0px;
}

.margin-top-5 {
  margin-top: 5px;
}

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

.margin-top-15 {
  margin-top: 15px;
}

.margin-top-20 {
  margin-top: 20px;
}

.margin-top-25 {
  margin-top: 25px;
}

.margin-top-30 {
  margin-top: 30px;
}

.margin-top-35 {
  margin-top: 35px;
}

.margin-top-40 {
  margin-top: 40px;
}

.margin-top-45 {
  margin-top: 45px;
}

.margin-top-50 {
  margin-top: 50px;
}

.margin-top-55 {
  margin-top: 55px;
}

.margin-top-60 {
  margin-top: 60px;
}

.margin-top-65 {
  margin-top: 65px;
}

.margin-top-70 {
  margin-top: 70px;
}

.margin-top-75 {
  margin-top: 75px;
}

.margin-top-80 {
  margin-top: 80px;
}

.margin-top-85 {
  margin-top: 85px;
}

.margin-top-90 {
  margin-top: 90px;
}

.margin-top-95 {
  margin-top: 95px;
}

.margin-top-100 {
  margin-top: 100px;
}

.margin-right-0 {
  margin-right: 0px;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-right-10 {
  margin-right: 10px;
}

.margin-right-15 {
  margin-right: 15px;
}

.margin-right-20 {
  margin-right: 20px;
}

.margin-right-25 {
  margin-right: 25px;
}

.margin-right-30 {
  margin-right: 30px;
}

.margin-right-35 {
  margin-right: 35px;
}

.margin-right-40 {
  margin-right: 40px;
}

.margin-right-45 {
  margin-right: 45px;
}

.margin-right-50 {
  margin-right: 50px;
}

.margin-right-55 {
  margin-right: 55px;
}

.margin-right-60 {
  margin-right: 60px;
}

.margin-right-65 {
  margin-right: 65px;
}

.margin-right-70 {
  margin-right: 70px;
}

.margin-right-75 {
  margin-right: 75px;
}

.margin-right-80 {
  margin-right: 80px;
}

.margin-right-85 {
  margin-right: 85px;
}

.margin-right-90 {
  margin-right: 90px;
}

.margin-right-95 {
  margin-right: 95px;
}

.margin-right-100 {
  margin-right: 100px;
}

.margin-bottom-0 {
  margin-bottom: 0px;
}

.margin-bottom-5 {
  margin-bottom: 5px;
}

.margin-bottom-10 {
  margin-bottom: 10px;
}

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

.margin-bottom-20 {
  margin-bottom: 20px;
}

.margin-bottom-25 {
  margin-bottom: 25px;
}

.margin-bottom-30 {
  margin-bottom: 30px;
}

.margin-bottom-35 {
  margin-bottom: 35px;
}

.margin-bottom-40 {
  margin-bottom: 40px;
}

.margin-bottom-45 {
  margin-bottom: 45px;
}

.margin-bottom-50 {
  margin-bottom: 50px;
}

.margin-bottom-55 {
  margin-bottom: 55px;
}

.margin-bottom-60 {
  margin-bottom: 60px;
}

.margin-bottom-65 {
  margin-bottom: 65px;
}

.margin-bottom-70 {
  margin-bottom: 70px;
}

.margin-bottom-75 {
  margin-bottom: 75px;
}

.margin-bottom-80 {
  margin-bottom: 80px;
}

.margin-bottom-85 {
  margin-bottom: 85px;
}

.margin-bottom-90 {
  margin-bottom: 90px;
}

.margin-bottom-95 {
  margin-bottom: 95px;
}

.margin-bottom-100 {
  margin-bottom: 100px;
}

.margin-left-0 {
  margin-left: 0px;
}

.margin-left-5 {
  margin-left: 5px;
}

.margin-left-10 {
  margin-left: 10px;
}

.margin-left-15 {
  margin-left: 15px;
}

.margin-left-20 {
  margin-left: 20px;
}

.margin-left-25 {
  margin-left: 25px;
}

.margin-left-30 {
  margin-left: 30px;
}

.margin-left-35 {
  margin-left: 35px;
}

.margin-left-40 {
  margin-left: 40px;
}

.margin-left-45 {
  margin-left: 45px;
}

.margin-left-50 {
  margin-left: 50px;
}

.margin-left-55 {
  margin-left: 55px;
}

.margin-left-60 {
  margin-left: 60px;
}

.margin-left-65 {
  margin-left: 65px;
}

.margin-left-70 {
  margin-left: 70px;
}

.margin-left-75 {
  margin-left: 75px;
}

.margin-left-80 {
  margin-left: 80px;
}

.margin-left-85 {
  margin-left: 85px;
}

.margin-left-90 {
  margin-left: 90px;
}

.margin-left-95 {
  margin-left: 95px;
}

.margin-left-100 {
  margin-left: 100px;
}

.padding-top-0 {
  padding-top: 0px;
}

.padding-top-5 {
  padding-top: 5px;
}

.padding-top-10 {
  padding-top: 10px;
}

.padding-top-15 {
  padding-top: 15px;
}

.padding-top-20 {
  padding-top: 20px;
}

.padding-top-25 {
  padding-top: 25px;
}

.padding-top-30 {
  padding-top: 30px;
}

.padding-top-35 {
  padding-top: 35px;
}

.padding-top-40 {
  padding-top: 40px;
}

.padding-top-45 {
  padding-top: 45px;
}

.padding-top-50 {
  padding-top: 50px;
}

.padding-top-55 {
  padding-top: 55px;
}

.padding-top-60 {
  padding-top: 60px;
}

.padding-top-65 {
  padding-top: 65px;
}

.padding-top-70 {
  padding-top: 70px;
}

.padding-top-75 {
  padding-top: 75px;
}

.padding-top-80 {
  padding-top: 80px;
}

.padding-top-85 {
  padding-top: 85px;
}

.padding-top-90 {
  padding-top: 90px;
}

.padding-top-95 {
  padding-top: 95px;
}

.padding-top-100 {
  padding-top: 100px;
}

.padding-right-0 {
  padding-right: 0px;
}

.padding-right-5 {
  padding-right: 5px;
}

.padding-right-10 {
  padding-right: 10px;
}

.padding-right-15 {
  padding-right: 15px;
}

.padding-right-20 {
  padding-right: 20px;
}

.padding-right-25 {
  padding-right: 25px;
}

.padding-right-30 {
  padding-right: 30px;
}

.padding-right-35 {
  padding-right: 35px;
}

.padding-right-40 {
  padding-right: 40px;
}

.padding-right-45 {
  padding-right: 45px;
}

.padding-right-50 {
  padding-right: 50px;
}

.padding-right-55 {
  padding-right: 55px;
}

.padding-right-60 {
  padding-right: 60px;
}

.padding-right-65 {
  padding-right: 65px;
}

.padding-right-70 {
  padding-right: 70px;
}

.padding-right-75 {
  padding-right: 75px;
}

.padding-right-80 {
  padding-right: 80px;
}

.padding-right-85 {
  padding-right: 85px;
}

.padding-right-90 {
  padding-right: 90px;
}

.padding-right-95 {
  padding-right: 95px;
}

.padding-right-100 {
  padding-right: 100px;
}

.padding-bottom-0 {
  padding-bottom: 0px;
}

.padding-bottom-5 {
  padding-bottom: 5px;
}

.padding-bottom-10 {
  padding-bottom: 10px;
}

.padding-bottom-15 {
  padding-bottom: 15px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.padding-bottom-25 {
  padding-bottom: 25px;
}

.padding-bottom-30 {
  padding-bottom: 30px;
}

.padding-bottom-35 {
  padding-bottom: 35px;
}

.padding-bottom-40 {
  padding-bottom: 40px;
}

.padding-bottom-45 {
  padding-bottom: 45px;
}

.padding-bottom-50 {
  padding-bottom: 50px;
}

.padding-bottom-55 {
  padding-bottom: 55px;
}

.padding-bottom-60 {
  padding-bottom: 60px;
}

.padding-bottom-65 {
  padding-bottom: 65px;
}

.padding-bottom-70 {
  padding-bottom: 70px;
}

.padding-bottom-75 {
  padding-bottom: 75px;
}

.padding-bottom-80 {
  padding-bottom: 80px;
}

.padding-bottom-85 {
  padding-bottom: 85px;
}

.padding-bottom-90 {
  padding-bottom: 90px;
}

.padding-bottom-95 {
  padding-bottom: 95px;
}

.padding-bottom-100 {
  padding-bottom: 100px;
}

.padding-left-0 {
  padding-left: 0px;
}

.padding-left-5 {
  padding-left: 5px;
}

.padding-left-10 {
  padding-left: 10px;
}

.padding-left-15 {
  padding-left: 15px;
}

.padding-left-20 {
  padding-left: 20px;
}

.padding-left-25 {
  padding-left: 25px;
}

.padding-left-30 {
  padding-left: 30px;
}

.padding-left-35 {
  padding-left: 35px;
}

.padding-left-40 {
  padding-left: 40px;
}

.padding-left-45 {
  padding-left: 45px;
}

.padding-left-50 {
  padding-left: 50px;
}

.padding-left-55 {
  padding-left: 55px;
}

.padding-left-60 {
  padding-left: 60px;
}

.padding-left-65 {
  padding-left: 65px;
}

.padding-left-70 {
  padding-left: 70px;
}

.padding-left-75 {
  padding-left: 75px;
}

.padding-left-80 {
  padding-left: 80px;
}

.padding-left-85 {
  padding-left: 85px;
}

.padding-left-90 {
  padding-left: 90px;
}

.padding-left-95 {
  padding-left: 95px;
}

.padding-left-100 {
  padding-left: 100px;
}

.w5 {
  width: 5%;
}

.w10 {
  width: 10%;
}

.w15 {
  width: 15%;
}

.w20 {
  width: 20%;
}

.w23 {
  width: 23%;
}

.w25 {
  width: 25%;
}

.w30 {
  width: 30%;
}

.w33 {
  width: 33%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w66 {
  width: 66%;
}

.w70 {
  width: 70%;
}

.w75 {
  width: 75%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w95 {
  width: 95%;
}

.vT {
  vertical-align: top !important;
}

.vM {
  vertical-align: middle !important;
}

.vB {
  vertical-align: bottom !important;
}

.text-center {
  text-align: center;
}

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

.text-right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

.uppercase {
  text-transform: uppercase;
}

.txtB {
  font-weight: bold;
}

/*
#overview
font color

文字色の調整
*/
/*#styleguide
.font-color-pale - font
```
<p class="font-color-pale">text text text <a href="#">link text</a></p>
```
*/
.font-color-pale {
  color: #777777;
}

.font-color-pale a {
  color: #777777;
}

/*
解像度による表示非表示の切り替え。
Todo: 最終的にこのクラスが当たっているものを、Drupal側での出力切り替えで対応すること。
不必要になれば消す。
*/
.visible-pc {
  display: none;
}

@media all and (min-width: 740px) {
  .visible-pc {
    display: block;
  }
}

.visible-mobile {
  display: block;
}

@media all and (min-width: 740px) {
  .visible-mobile {
    display: none;
  }
}

@media all and (min-width: 740px) {
  .hidden-pc {
    display: none;
  }
  .hidden-pc.thumbWrap {
    display: none !important;
  }
}

@media all and (max-width: 740px) {
  .hidden-sp {
    display: none;
  }
  .hidden-sp.thumbWrap {
    display: none !important;
  }
}

.justify-flex-start {
  -webkit-box-pack: start !important;
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}

.justify-flex-start.parent-block-col-4 {
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}

@media all and (min-width: 740px), print {
  .justify-flex-start.parent-block-col-4 {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
}

.image-config-inner-image-width-100percent img {
  width: 100%;
  height: auto;
}

.literature-abstract ul {
  list-style: disc;
  line-height: 1.6;
  padding-left: 20px;
}

.literature-abstract b {
  font-weight: bold;
}

.literature-abstract i {
  font-style: italic;
}

@media print {
  body.fixed {
    position: relative;
    width: auto;
    height: auto;
  }
  #wrapper {
    width: 1080px;
  }
  #main {
    margin-top: 30px;
  }
  #main .container {
    margin-left: 20px;
    margin-right: 0;
  }
  header {
    position: relative;
  }
  header #gnav {
    display: block !important;
  }
  .foot-util {
    margin-left: 0;
    margin-right: 0;
  }
  footer .container .links {
    margin-left: 10px;
  }
  footer .container .copyright {
    margin-right: 10px;
  }
  .page-top-area {
    display: none;
  }
  .topVi {
    margin-top: 0;
  }
  #columns .container {
    margin-left: 20px;
    margin-right: 0;
  }
  #catLinks .container {
    margin-left: 20px;
    margin-right: 0;
  }
}

.slick-slider {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -ms-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
  display: block;
  position: relative;
}

.dragging.slick-list {
  cursor: pointer;
}

.slick-slider .slick-track {
  transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.slick-slider .slick-list {
  transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
}

.slick-track {
  left: 0px;
  top: 0px;
  display: block;
  position: relative;
}

.slick-track::before {
  display: table;
  content: "";
}

.slick-track::after {
  display: table;
  content: "";
}

.slick-track::after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  height: 100%;
  float: left;
  display: none;
  min-height: 1px;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-loading.slick-slide img {
  display: none;
}

.dragging.slick-slide img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  border: 1px solid transparent;
  -o-border-image: none;
  border-image: none;
  height: auto;
  display: block;
}

.slick-hidden.slick-arrow {
  display: none;
}

#topMain .container .industries {
  padding: 0px 0px 45px;
  margin-bottom: 50px;
}

@media all and (min-width: 740px) {
  #topMain .container .industries {
    padding: 0px 0px 100px;
    margin-bottom: 0px;
  }
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit {
    margin: 0px 8px;
    width: 336px;
  }
}

#topMain .container .industries .unit figure {
  margin-bottom: 9px;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit figure {
    margin-bottom: 17px;
  }
}

#topMain .container .industries .unit figure img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit figure img {
    transition: opacity 0.2s linear;
    width: auto;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -webkit-transition: opacity 0.2s linear;
    -webkit-backface-visibility: hidden;
  }
  #topMain .container .industries .unit figure img:hover {
    text-decoration: inherit;
    opacity: 0.5;
  }
}

#topMain .container .industries .unit figcaption h3 {
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25em;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit figcaption h3 {
    line-height: 1.5;
    font-size: 1.6rem;
    margin-bottom: 0.75em;
  }
}

#topMain .container .industries .unit figcaption h3 a {
  text-decoration: none;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit figcaption h3 a:hover {
    text-decoration: underline;
  }
}

#topMain .container .industries .unit figcaption p {
  line-height: 1.5;
  font-size: 1.2rem;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .unit figcaption p {
    line-height: 1.4285;
    font-size: 1.4rem;
  }
}

#topMain .container .industries .slick-dots {
  left: 0px;
  text-align: center;
  right: 0px;
  bottom: -1px;
  position: absolute;
}

#topMain .container .industries .slick-dots li {
  margin: 0px 10px;
  padding: 0px;
  width: auto;
  display: inline-block;
}

#topMain .container .industries .slick-dots li button {
  padding: 0px;
  border-radius: 5px;
  border: currentColor;
  -o-border-image: none;
  border-image: none;
  width: 8px;
  height: 8px;
  color: transparent;
  cursor: pointer;
  background-color: #b2b2b2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#topMain .container .industries .slick-dots li.slick-active button {
  background-color: red;
}

@media all and (min-width: 740px) {
  #topMain .container .industries .slick-dots {
    text-align: center;
    bottom: 45px;
  }
  #topMain .container .industries .slick-dots li {
    margin: 0px 10px;
    padding: 0px;
    width: auto;
    display: inline-block;
  }
  #topMain .container .industries .slick-dots li button {
    padding: 0px;
    border-radius: 5px;
    border: currentColor;
    -o-border-image: none;
    border-image: none;
    width: 10px;
    height: 10px;
    color: transparent;
    cursor: pointer;
    background-color: #b2b2b2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
  }
  #topMain .container .industries .slick-dots li.slick-active button {
    background-color: red;
  }
}

/*!
 * baguetteBox.js
 * @author  feimosi
 * @version %%INJECT_VERSION%%
 * @url https://github.com/feimosi/baguetteBox.js
 */
#baguetteBox-overlay {
  display: none;
  opacity: 0;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#baguetteBox-overlay.visible {
  opacity: 1;
}

#baguetteBox-overlay .full-image {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

#baguetteBox-overlay .full-image figure {
  display: inline;
  margin: 0;
  height: 100%;
}

#baguetteBox-overlay .full-image img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

#baguetteBox-overlay .full-image figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1.8;
  white-space: normal;
  color: #ccc;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: sans-serif;
}

#baguetteBox-overlay .full-image:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}

#baguetteBox-slider {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  -webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
}

#baguetteBox-slider.bounce-from-right {
  -webkit-animation: bounceFromRight 0.4s ease-out;
  animation: bounceFromRight 0.4s ease-out;
}

#baguetteBox-slider.bounce-from-left {
  -webkit-animation: bounceFromLeft 0.4s ease-out;
  animation: bounceFromLeft 0.4s ease-out;
}

@-webkit-keyframes bounceFromRight {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes bounceFromRight {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
  100% {
    margin-left: 0;
  }
}

@-webkit-keyframes bounceFromLeft {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
  100% {
    margin-left: 0;
  }
}

@keyframes bounceFromLeft {
  0% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
  100% {
    margin-left: 0;
  }
}

.baguetteBox-button#next-button,
.baguetteBox-button#previous-button {
  top: 50%;
  top: calc(50% - 30px);
  width: 44px;
  height: 60px;
}

.baguetteBox-button {
  position: absolute;
  cursor: pointer;
  outline: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 15%;
  background-color: #323232;
  background-color: rgba(50, 50, 50, 0.5);
  color: #ddd;
  font: 1.6em sans-serif;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.baguetteBox-button:focus,
.baguetteBox-button:hover {
  background-color: rgba(50, 50, 50, 0.9);
}

.baguetteBox-button#next-button {
  right: 2%;
}

.baguetteBox-button#previous-button {
  left: 2%;
}

.baguetteBox-button#close-button {
  top: 20px;
  right: 2%;
  right: calc(2% + 6px);
  width: 30px;
  height: 30px;
}

.baguetteBox-button svg {
  position: absolute;
  left: 0;
  top: 0;
}

/*
    Preloader
    Borrowed from http://tobiasahlin.com/spinkit/
*/
.baguetteBox-spinner {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

.baguetteBox-double-bounce1,
.baguetteBox-double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.baguetteBox-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounce {
  0%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.baguette-box-gallery-link {
  display: inline-block;
  margin: 5px;
  text-align: center;
}

.baguette-box-gallery-link a {
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.baguette-box-gallery-link a:first-child:before {
  color: #000;
  position: absolute;
  z-index: 100;
  font-size: 30px;
  bottom: 1px;
  right: 1px;
}

.baguette-box-gallery-link a:first-child:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 40px;
  height: 40px;
  display: block;
  background-color: #92c87a;
  border-radius: 40px 0 0 0;
}

.baguette-box-gallery-link a img {
  vertical-align: bottom;
}

.baguette-box-gallery-link.baguette-box-gallery-multiple-with-multi-thumbnail a {
  margin-bottom: 10px;
  margin-left: 5px;
  margin-right: 5px;
}

.baguette-box-gallery-link.baguette-box-gallery-multiple-with-multi-thumbnail a:before {
  color: #000;
  position: absolute;
  z-index: 100;
  font-size: 30px;
  bottom: 1px;
  right: 1px;
}

.baguette-box-gallery-link.baguette-box-gallery-multiple-with-multi-thumbnail a:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 40px;
  height: 40px;
  display: block;
  background-color: #92c87a;
  border-radius: 40px 0 0 0;
}

.baguette-box-gallery-link {
  text-align: center;
}

.baguette-box-gallery-image {
  max-width: 100%;
  height: auto;
}

.confirmation_button {
  width: 130px;
  margin: 5px;
  padding: 6px 7px;
  border-radius: 0px;
  color: #000000;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  vertical-align: middle;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 750px) {
  .confirmation_button {
    width: 150px;
    margin: 10px;
    padding: 12px 14px;
  }
}

.confirmation_button:hover {
  border-top-color: #dfe7ed;
  background: #dfe7ed;
  color: #000000;
}

.confirmation_button:active {
  border-top-color: #dfe7ed;
  background: #dfe7ed;
}

.page_opaque {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10000;
  background-color: #fff;
  opacity: 0.8;
}

.med_confirm {
  position: absolute;
  top: 150px;
  left: 0;
  right: 0;
  opacity: 0.9;
  z-index: 11000;
  text-align: center;
  width: 310px;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 750px) {
  .med_confirm {
    width: 400px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  }
}

.med_confirm table a {
  text-decoration: none;
}

.med_confirm table td.med_what {
  height: 43px;
  padding-top: 20px;
  font-weight: bold;
  font-size: 20px;
}

.med_confirm table td.med_btn {
  height: 90px;
  padding: 20px 0 15px;
}

.med_confirm table td.med_txt {
  font-size: 14px;
  padding: 0 15px 15px;
  color: #333;
  line-height: 1.6;
}

.page_opaque {
  display: none;
}

.med_confirm {
  display: none;
}

.med_confirm select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  z-index: 2;
}

.page_opaque.is_active {
  display: block;
}

.med_confirm.is_active {
  display: block;
}

.med_confirm.is_active table td.med_txt {
  padding-top: 15px;
}

.med_select {
  border: 1px solid #b9b9b9;
  display: inline-block;
  position: relative;
  text-align: center;
}

.med_select select {
  display: inline-block;
  padding: 10px;
  text-align: left;
  width: 200px;
}

.med_select:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 6px 0 6px;
  border-color: #000000 transparent transparent transparent;
  position: absolute;
  top: 35%;
  z-index: 0;
  right: 10px;
}

.no-script-msg {
  border: 2px solid #d8d8d8;
  margin-top: 68px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: -60px;
  padding: 8px;
}

@media all and (min-width: 750px), print {
  .no-script-msg {
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: -200px;
    width: 1040px;
  }
}

.no-script-msg.is_potal {
  margin-top: 0px;
  margin-bottom: 20px;
}

.no-script-msg p {
  color: #808080;
  padding-bottom: 0em;
  font-size: 12px;
}

.no-script-msg .is_red {
  color: #ff0000;
}

.section {
  border-bottom: 1px solid #d8d8d8;
  padding: 25px 20px;
}

@media all and (min-width: 750px), print {
  .section {
    padding: 60px 0;
  }
}

.section:first-child {
  padding-top: 0;
}

.section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.index_number {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 30px;
  padding-bottom: 10px;
  position: relative;
}

.index_number:before {
  content: "Parts No.";
}

.index_number:after {
  background-color: #000;
  bottom: 0;
  content: "";
  display: block;
  height: 5px;
  left: 0;
  position: absolute;
  width: 50px;
}

.quick-menu-wrap {
  position: relative;
  height: 430px;
  overflow: hidden;
  margin-left: -10px;
  margin-right: -10px;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap {
    margin-left: 0;
    margin-right: 0;
  }
}

.quick-menu-wrap .quick_menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 25px 20px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick_menu {
    padding: 50px 20px;
    min-height: 400px;
    margin-left: 0;
    margin-right: 0;
  }
}

.quick-menu-wrap .quick_menu h2 {
  padding-bottom: 0;
  color: #c2c2c2;
  text-align: center;
  font-size: 30px;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick_menu h2 {
    font-size: 33px;
    padding-top: 35px;
    margin-bottom: 45px;
  }
}

.quick-menu-wrap .quick_menu .unit {
  color: #c2c2c2;
  border: 1px solid #c2c2c2;
  min-height: 90px;
  background-color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  -webkit-transition: background-color, 0.3s ease;
  transition: background-color, 0.3s ease;
  margin-bottom: 15px;
  padding: 5px;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick_menu .unit {
    min-height: 140px;
  }
}

.quick-menu-wrap .quick_menu .unit a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: color, 0.3s ease;
  transition: color, 0.3s ease;
  color: #c2c2c2;
  text-decoration: none;
}

.quick-menu-wrap .quick_menu .unit a:hover {
  color: black;
}

.quick-menu-wrap .quick_menu .unit:hover {
  background-color: white;
}

.quick-menu-wrap .quick_menu .unit p {
  margin: 0;
  padding-bottom: 0;
  font-size: 16px;
  max-width: 100%;
  height: 100%;
  line-height: 1.4;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick_menu .unit p {
    font-size: 18px;
  }
}

.quick-menu-wrap .quick-menu-img-mb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick-menu-img-mb {
    display: none;
  }
}

.quick-menu-wrap .quick-menu-img-pc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}

@media all and (min-width: 750px), print {
  .quick-menu-wrap .quick-menu-img-pc {
    display: block;
  }
}

/*RW*/
@font-face {
  font-family: "NotoSans-Light";
  src: url("../../shimadzu_an/fonts/NotoSans-Light.woff2") format("woff2"), url("../../shimadzu_an/fonts/NotoSans-Light.woff") format("woff"), url("../../shimadzu_an/fonts/NotoSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "NotoSans-LightItalic";
  src: url("../../shimadzu_an/fonts/NotoSans-LightItalic.woff2") format("woff2"), url("../../shimadzu_an/fonts/NotoSans-LightItalic.woff") format("woff"), url("../../shimadzu_an/fonts/NotoSans-LightItalic.ttf") format("truetype");
}

@font-face {
  font-family: "NotoSans-Regular";
  src: url("../../shimadzu_an/fonts/NotoSans-Regular.woff2") format("woff2"), url("../../shimadzu_an/fonts/NotoSans-Regular.woff") format("woff"), url("../../shimadzu_an/fonts/NotoSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "NotoSans-Bold";
  src: url("../../shimadzu_an/fonts/NotoSans-Bold.woff2") format("woff2"), url("../../shimadzu_an/fonts/NotoSans-Bold.woff") format("woff"), url("../../shimadzu_an/fonts/NotoSans-Bold.ttf") format("truetype");
}

/*from _base.scss*/
.article-set {
  margin-bottom: 50px;
}

/* fix in RW */
p.paragraph + p {
  margin-top: 0;
}

.paragraph {
  margin-bottom: 14px;
}

.text-right > p {
  text-align: right;
}

.text-center > p {
  text-align: center;
}

/* add current anchorLink class*/
.anchorLink {
  cursor: default;
  display: block;
}

.anchorLink:before {
  content: "";
  display: block;
  padding-top: 78px;
  margin-top: -78px;
}

@media screen and (min-width: 768px), print {
  .anchorLink:before {
    padding-top: 85px;
    margin-top: -85px;
  }
}

/*modify current link*/
.list-with-arrow-list-child {
  text-decoration: none;
}

.list-with-arrow-list-child:before {
  color: #dd0000;
  font-size: 1.4rem;
  vertical-align: top;
  width: auto;
  height: calc(1.4rem * 1.75);
  margin-right: 3px;
  line-height: 1.75;
  font-weight: 400;
}

@media screen and (min-width: 768px), print {
  .list-with-arrow-list-child:before {
    font-size: 1.6rem;
    width: auto;
    height: 16px;
    height: calc(1.6rem * 1.75);
  }
}

.list-with-arrow-list-child > a {
  font-size: 1.4rem;
  font-family: "NotoSans-Regular";
  color: #333333;
  text-decoration: none;
  line-height: 1.75;
  font-weight: normal;
  cursor: pointer;
}

@media screen and (min-width: 768px), print {
  .list-with-arrow-list-child > a {
    font-size: 1.6rem;
  }
}

.list-with-arrow-list-child > a:hover, .list-with-arrow-list-child > a:active {
  text-decoration: underline;
}

/*modify current btn*/
a.btn.btn-primary {
  background-color: #ffffff;
  border-radius: 30px;
  border: solid 1px #6e6e6e;
  color: #333333;
  vertical-align: middle;
  font-family: "NotoSans-Regular";
  font-size: 1.4rem;
  min-height: 50px;
  margin-top: 30px;
  padding: 5px 20px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  width: 295px;
  line-height: 1.5;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 768px), print {
  a.btn.btn-primary {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    width: 230px;
    padding: 5px 35px;
    margin-top: 40px;
  }
}

a.btn.btn-primary:hover, a.btn.btn-primary:active, a.btn.btn-primary:focus, a.btn.btn-primary.is-active {
  color: #ffffff;
  border: solid 1px #6e6e6e;
  background-color: #6e6e6e;
}

a.btn.btn-primary > i {
  display: none;
}

a.btn.btn-primary + a.btn.btn-primary {
  margin-top: 20px;
}

@media screen and (min-width: 768px), print {
  a.btn.btn-primary + a.btn.btn-primary {
    margin-top: 40px;
    margin-left: 20px;
  }
}
/*# sourceMappingURL=../maps/d7_style.css.map */