@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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & Inspection</option>
<option value="15">Non-Destructive Testing</option>
<option value="16">Balances</option>
<option value="17">Fragrance & 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 & 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 & Inspection</option>
<option value="15">Non-Destructive Testing</option>
<option value="16">Balances</option>
<option value="17">Fragrance & 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 */