@charset "UTF-8";
/*　//////////////////////////////////////////////////
　インポート設定
//////////////////////////////////////////////////　*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*　//////////////////////////////////////////////////
　共通スタイル
//////////////////////////////////////////////////　*/
* {
  box-sizing: border-box; }

h1, h2, h3, h4, h5, h6, p {
  margin: 0 0 1.5em; }

h1 {
  font-size: 1.728rem; }

h2 {
  font-size: 1.44rem; }

h3 {
  font-size: 1.2rem; }

h4 {
  font-size: 1rem; }

em {
  font-style: normal;
  font-weight: bold; }

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto; }

/*　//////////////////////////////////////////////////
　 便利クラス > 非表示
//////////////////////////////////////////////////　*/
/*
---
name: 非表示（ビジュアル・スクリーンリーダーとも）
category:
  - 'helperClass/visibility'
---

非表示にします（ビジュアル・スクリーンリーダーとも）。

```html
<p class="hidden">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.hidden {
  display: none !important; }

/*
---
name: 非表示（ビジュアルは非表示、読み上げは対応）
category:
  - 'helperClass/visibility'
---

ビジュアルを非表示にします（スクリーンリーダーなどでは読み上げられます）。

```html
<p class="visuallyhidden">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
---
name: 非表示（ビジュアル・スクリーンリーダーとも、スペースは残る）
category:
  - 'helperClass/visibility'
---

非表示にします（ビジュアル・スクリーンリーダーとも）。ただし、レイアウト上は空白スペースとして残ります。

```html
<p class="invisible">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.invisible {
  visibility: hidden; }

/*　//////////////////////////////////////////////////
　 フォントサイズ調整
//////////////////////////////////////////////////　*/
/*
---
name: テキスト > 文字サイズ 120%
category:
  - 'helperClass/text'
---

```html
<p><span class="font-size120">吾輩いは猫である。</span>名前はまだ無い。</p>
```
*/
.font-size120 {
  font-size: 120%; }

/*
---
name: テキスト > 文字サイズ 145%
category:
  - 'helperClass/text'
---

```html
<p><span class="font-size145">吾輩いは猫である。</span>名前はまだ無い。</p>
```
*/
.font-size145 {
  font-size: 145%; }

/*
---
name: テキスト > 文字サイズ 170%
category:
  - 'helperClass/text'
---

```html
<p><span class="font-size170">吾輩いは猫である。</span>名前はまだ無い。</p>
```
*/
.font-size170 {
  font-size: 170%; }

/*
---
name: テキスト > 文字サイズ 70%
category:
  - 'helperClass/text'
---

```html
<p><span class="font-size70">吾輩いは猫である。</span>名前はまだ無い。</p>
```
*/
.font-size70 {
  font-size: 70%; }

/*　//////////////////////////////////////////////////
　 テキスト配置
//////////////////////////////////////////////////　*/
/*
---
name: テキスト > 中央寄せ
category:
  - 'helperClass/text-align'
---

インライン要素（フレージング・コンテンツ）を中央寄せ

```html
<p class="text-center">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.text-center {
  text-align: center !important;
  /*
  img {
      margin: auto;
  }
  */ }

/*
---
name: テキスト > 左寄せ
category:
  - 'helperClass/text-align'
---

インライン要素（フレージング・コンテンツ）を左寄せ

```html
<p class="text-left">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.text-left {
  text-align: left !important; }

/*
---
name: テキスト > 右寄せ
category:
  - 'helperClass/text-align'
---

インライン要素（フレージング・コンテンツ）を右寄せ

```html
<p class="text-right">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.text-right {
  text-align: right !important; }

/*　//////////////////////////////////////////////////
　 便利クラス > 余白調整
//////////////////////////////////////////////////　*/
.padding-top-0 {
  padding-top: 0 !important; }

/*
---
name: マージン調整 > 上マージン 0
category:
  - 'helperClass/margin'
---

※ 左右・下マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-top-0">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-top-0 {
  margin-top: 0 !important; }

/*
---
name: マージン調整 > 上マージン 10px
category:
  - 'helperClass/margin'
---

※ 左右・下マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-top-10">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-top-10 {
  margin-top: 10px !important; }

/*
---
name: マージン調整 > 上マージン 20px
category:
  - 'helperClass/margin'
---

※ 左右・下マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-top-20">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-top-20 {
  margin-top: 20px !important; }

/*
---
name: マージン調整 > 上マージン 30px
category:
  - 'helperClass/margin'
---

※ 左右・下マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-top-30">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-top-30 {
  margin-top: 30px !important; }

/*
---
name: マージン調整 > 下マージン 0
category:
  - 'helperClass/margin'
---

※ 左右・上マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-bottom-0">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-bottom-0 {
  margin-bottom: 0 !important; }

/*
---
name: マージン調整 > 下マージン 10px
category:
  - 'helperClass/margin'
---

※ 左右・上マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-bottom-10">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-bottom-10 {
  margin-bottom: 10px !important; }

/*
---
name: マージン調整 > 下マージン 20px
category:
  - 'helperClass/margin'
---

※ 左右・上マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-bottom-20">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-bottom-20 {
  margin-bottom: 20px !important; }

/*
---
name: マージン調整 > 下マージン 30px
category:
  - 'helperClass/margin'
---

※ 左右・上マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-bottom-30">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-bottom-30 {
  margin-bottom: 30px !important; }

/*
---
name: マージン調整 > 下マージン 50px
category:
  - 'helperClass/margin'
---

※ 左右・上マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-bottom-30">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-bottom-50 {
  margin-bottom: 50px !important; }

/*
---
name: マージン調整 > 左マージン 0
category:
  - 'helperClass/margin'
---

※ 上下・右マージンには影響なし  
※ !important で強制適用しています

```html
<p class="margin-left-0">吾輩いは猫である。名前はまだ無い。</p>
```
*/
.margin-left-0 {
  margin-left: 0 !important; }

/*
---
name: 左フロート
category:
  - 'helperClass/float'
---

```html
<p class="clearfix"><img src="/corporate/images/KESLogo.gif" alt="KES・環境マネンジメントシステム・スタンダード ステップ2登録" class="float-left">横河ディジタルコンピュータ株式会社は、地球環境の保全が人類共通の最重要課題の一つであることを認識し、全組織を挙げて環境負荷の低減及び環境保護に努力します。</p>
```
*/
.float-left {
  display: block;
  margin: 0 auto 1rem; }
  @media (min-width: 768px) {
    .float-left {
      float: left;
      margin-right: 1rem;
      overflow: hidden; } }

/*
---
name: 右フロート
category:
  - 'helperClass/float'
---

```html
<p class="clearfix"><img src="/corporate/images/KESLogo.gif" alt="KES・環境マネンジメントシステム・スタンダード ステップ2登録" class="float-right">横河ディジタルコンピュータ株式会社は、地球環境の保全が人類共通の最重要課題の一つであることを認識し、全組織を挙げて環境負荷の低減及び環境保護に努力します。</p>
```
*/
.float-right {
  display: block;
  margin: 0 auto 1rem; }
  @media (min-width: 768px) {
    .float-right {
      float: right;
      margin-left: 1rem;
      overflow: hidden; } }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table; }
  .clearfix:after {
    clear: both; }

/*　//////////////////////////////////////////////////
　ヘッダー
//////////////////////////////////////////////////　*/
.l-header {
  *zoom: 1;
  max-width: 1142px;
  width: 100%;
  margin: auto;
  height: 45px;
  position: relative;
  z-index: 19999; }
  .l-header:before, .l-header:after {
    content: " ";
    display: table; }
  .l-header:after {
    clear: both; }
  @media (min-width: 768px) {
    .l-header {
      padding: 0 1rem; } }
  @media (min-width: 768px) {
    .l-header {
      height: 100px; } }

.header-logo {
  line-height: 1;
  background: white;
  padding: 10px 0 0 15px;
  margin: 0; }
  @media (min-width: 768px) {
    .header-logo {
      padding: 20px 0 0;
      float: left; } }
  .header-logo a {
    line-height: 1px; }
  .header-logo object,
  .header-logo img {
    width: 100px; }
    @media (min-width: 768px) {
      .header-logo object,
      .header-logo img {
        width: 160px;
        padding-top: 0.5rem; } }
    @media (min-width: 810px) {
      .header-logo object,
      .header-logo img {
        width: 200px;
        padding-top: 0; } }

.separator-withoutLocalNav {
  width: 100%;
  height: 1px;
  background: #ececec; }

/*　//////////////////////////////////////////////////
　フッター
//////////////////////////////////////////////////　*/
.l-footer {
  background: #c0153f; }

.footer-wrapper {
  max-width: 1142px;
  width: 100%;
  margin: auto;
  padding: 20px 0 23px;
  margin: auto; }
  @media (min-width: 768px) {
    .footer-wrapper {
      padding: 0 1rem; } }
  @media (min-width: 768px) {
    .footer-wrapper {
      padding: 37px 1rem 60px; } }

.nav-footer__wrapper {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  margin: 0 1rem 9px; }
  @media (min-width: 768px) {
    .nav-footer__wrapper {
      display: block;
      text-align: center;
      margin: 0 0 37px; } }

.nav-footer__item {
  font-size: 0.75rem;
  padding: 0 0 1em; }
  @media (min-width: 768px) {
    .nav-footer__item {
      font-size: 0.875rem;
      display: inline-block;
      padding-left: 1.6rem;
      padding-bottom: 0; } }
  .nav-footer__item.link-regal {
    width: 58%;
    -ms-flex-order: 1;
        order: 1; }
    @media (min-width: 768px) {
      .nav-footer__item.link-regal {
        width: auto; } }
  .nav-footer__item.link-termOfUse {
    width: 58%;
    -ms-flex-order: 3;
        order: 3; }
    @media (min-width: 768px) {
      .nav-footer__item.link-termOfUse {
        width: auto;
        -ms-flex-order: initial;
            order: initial; } }
  .nav-footer__item.link-privacy {
    width: 58%;
    -ms-flex-order: 5;
        order: 5; }
    @media (min-width: 768px) {
      .nav-footer__item.link-privacy {
        width: auto;
        -ms-flex-order: initial;
            order: initial; } }
  .nav-footer__item.link-socialmedia {
    width: 42%;
    -ms-flex-order: 2;
        order: 2; }
    @media (min-width: 768px) {
      .nav-footer__item.link-socialmedia {
        width: auto;
        -ms-flex-order: initial;
            order: initial; } }
  .nav-footer__item.link-sitemap {
    width: 42%;
    -ms-flex-order: 4;
        order: 4; }
    @media (min-width: 768px) {
      .nav-footer__item.link-sitemap {
        width: auto;
        -ms-flex-order: initial;
            order: initial; } }
  .nav-footer__item.link-inquiry {
    width: 42%;
    -ms-flex-order: 6;
        order: 6; }
    @media (min-width: 768px) {
      .nav-footer__item.link-inquiry {
        width: auto;
        -ms-flex-order: initial;
            order: initial; } }
  @media (min-width: 768px) {
    .nav-footer__item:first-child {
      padding-left: 0;
      -ms-flex-order: initial;
          order: initial; } }
  .nav-footer__item a,
  .nav-footer__item a:hover,
  .nav-footer__item a:visited {
    color: white;
    text-decoration: none; }
  .nav-footer__item a:hover {
    text-decoration: underline; }

.footer-logo {
  text-align: center;
  margin: 0 0 17px; }
  @media (min-width: 768px) {
    .footer-logo {
      margin-bottom: 32px; } }
  .footer-logo img {
    width: 126px;
    height: auto; }
    @media (min-width: 768px) {
      .footer-logo img {
        width: 183px; } }

.copyright {
  color: white;
  font-family: "arial";
  font-size: 0.625rem;
  line-height: 1;
  text-align: center;
  margin: 0; }

/*　//////////////////////////////////////////////////
　グローバルナビ
//////////////////////////////////////////////////　*/
.nav-extend {
  width: 30px;
  height: 30px;
  background: center center no-repeat;
  background-size: auto 16px;
  border: none 0;
  position: absolute;
  top: 10px;
  right: 10px; }
  .nav-extend.is-closed {
    background-image: url(/common/images/nav-extend-open.png); }
  .nav-extend.is-opened {
    background-image: url(/common/images/nav-extend-close.png); }
  @media (min-width: 768px) {
    .nav-extend {
      display: none; } }

.nav-global__wrapper {
  display: none;
  width: 100%;
  background: white;
  padding: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999;
  /*
  &.is-closed {
      //display: none;
      //height: 0;
      transition-property: height;
      transition-duration: 0.5s;
      transition-timing-function: ease-in;
    @media (min-width: 768px) {
        height: auto;
    }
  }
  */ }
  @media (min-width: 768px) {
    .nav-global__wrapper {
      display: block;
      width: auto;
      background: none;
      padding-top: 2.25rem;
      position: static;
      top: auto;
      left: auto;
      float: right; } }

.nav-main__wrapper {
  list-style: none;
  padding: 0;
  margin: 0; }
  @media (min-width: 768px) {
    .nav-main__wrapper {
      *zoom: 1; }
      .nav-main__wrapper:before, .nav-main__wrapper:after {
        content: " ";
        display: table; }
      .nav-main__wrapper:after {
        clear: both; } }

.nav-main__item,
.nav-main__item2 {
  font-size: 0.6rem;
  padding: 0 1rem 0;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .nav-main__item,
    .nav-main__item2 {
      padding: 0px 0px 0px 5px;
      border: none;
      float: left; } }
  @media (min-width: 810px) {
    .nav-main__item,
    .nav-main__item2 {
      font-size: 0.65rem;
      letter-spacing: 0.0625em;
      padding: 0px 0px 0px 10px; } }
  @media (min-width: 1000px) {
    .nav-main__item,
    .nav-main__item2 {
      font-size: 0.9rem;
      letter-spacing: 0.0625em;
      padding: 0px 0px 0px 10px; } }
  @media (min-width: 768px) {
    .nav-main__item.link-home {
      display: none; } }
  @media (min-width: 768px) {
    .nav-main__item:first-child {
      padding-left: 0; } }
  .nav-main__item img,
  .nav-main__item object {
    vertical-align: middle; }
  .nav-main__item > a,
  .nav-main__item > a:hover,
  .nav-main__item > a:visited,
  .nav-main__item2 > a,
  .nav-main__item2 > a:hover,
  .nav-main__item2 > a:visited {
    color: #333333;
    text-decoration: none;
    display: block;
    padding: 0.6875rem 0;
    margin: 0; }
    @media (min-width: 768px) {
      .nav-main__item > a,
      .nav-main__item > a:hover,
      .nav-main__item > a:visited,
      .nav-main__item2 > a,
      .nav-main__item2 > a:hover,
      .nav-main__item2 > a:visited {
        display: inline-block;
        margin-bottom: 0; } }
    .nav-main__item > a.is-current, .nav-main__item > a.is-parentsLink,
    .nav-main__item > a:hover.is-current,
    .nav-main__item > a:hover.is-parentsLink,
    .nav-main__item > a:visited.is-current,
    .nav-main__item > a:visited.is-parentsLink {
      color: #c0153f; }
    .nav-main__item > a.is-closed span,
    .nav-main__item > a:hover.is-closed span,
    .nav-main__item > a:visited.is-closed span {
      background: url(/common/images/nav-mobile-closed.png) center right no-repeat;
      background-size: 9px auto;
      padding-right: 1em; }
      @media (min-width: 768px) {
        .nav-main__item > a.is-closed span,
        .nav-main__item > a:hover.is-closed span,
        .nav-main__item > a:visited.is-closed span {
          background: none;
          padding: 0; } }
    .nav-main__item > a.is-opened span,
    .nav-main__item > a:hover.is-opened span,
    .nav-main__item > a:visited.is-opened span {
      color: #c0153f;
      background: url(/common/images/nav-mobile-opened.png) center right no-repeat;
      background-size: 9px auto;
      padding-right: 1em; }
      @media (min-width: 768px) {
        .nav-main__item > a.is-opened span,
        .nav-main__item > a:hover.is-opened span,
        .nav-main__item > a:visited.is-opened span {
          background: none;
          padding: 0; } }
    .nav-main__item > a.is-home,
    .nav-main__item > a:hover.is-home,
    .nav-main__item > a:visited.is-home {
      background: none !important;
      color: #333333 !important; }
  @media (min-width: 768px) {
    .nav-main__item > a:hover {
      color: #c0153f; } }

/*　//////////////////////////////////////////////////
　メガメニュー / ドロワーメニュー
//////////////////////////////////////////////////　*/
.megaMenu-bg {
  display: none; }
  @media (min-width: 768px) {
    .megaMenu-bg {
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 10999;
      position: absolute;
      top: 100px;
      left: 0; } }

.nav-2ndLv {
  display: none;
  background: #eeeeee;
  padding: 0;
  margin: 0 -1rem; }
  @media (min-width: 768px) {
    .nav-2ndLv {
      width: 100%;
      background: white;
      padding: 0 1.875rem 0.625rem;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0; } }

.nav-2ndLv__wrapper {
  list-style: none;
  padding: 0;
  border-top: 1px solid #cccccc;
  margin: 0; }
  @media (min-width: 768px) {
    .nav-2ndLv__wrapper {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding-top: 0.9375rem; } }

.nav-2ndLv__item {
  font-size: 0.8125rem;
  padding: 11px 1em 11px 2em;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .nav-2ndLv__item {
      font-size: 1rem;
      width: 25%;
      padding: 0 0 0.9375rem;
      border-bottom: solid 1px #cccccc;
      margin: 0 0 0.9375rem; }
      .nav-2ndLv__item .nav-2ndLv__itemInner {
        width: 100%;
        height: 100%;
        background: url(/common/images/nav-2ndLv-bullet.png) 1.25rem 0.45em no-repeat;
        padding: 0 1.25rem 0 2rem;
        border-right: solid 1px #cccccc; } }
  .nav-2ndLv__item.is-rightEnd .nav-2ndLv__itemInner {
    border-right: none 0; }
  @media (min-width: 768px) {
    .nav-2ndLv__item.is-lowerEnd {
      border-bottom: none 0;
      margin-bottom: 0; } }
  @media (max-width: 767px) {
    .nav-2ndLv__item:last-child {
      border: none 0; } }
  @media (min-width: 768px) {
    .nav-2ndLv__item.is-2column {
      width: 50%; } }

.nav-2ndLv__itemInner > a,
.nav-2ndLv__itemInner > a:hover,
.nav-2ndLv__itemInner > a:visited {
  color: #333333;
  text-decoration: none;
  display: block; }
  @media (min-width: 768px) {
    .nav-2ndLv__itemInner > a,
    .nav-2ndLv__itemInner > a:hover,
    .nav-2ndLv__itemInner > a:visited {
      color: #c0153f;
      display: inline; } }
  .nav-2ndLv__itemInner > a.is-current, .nav-2ndLv__itemInner > a.is-parentsLink,
  .nav-2ndLv__itemInner > a:hover.is-current,
  .nav-2ndLv__itemInner > a:hover.is-parentsLink,
  .nav-2ndLv__itemInner > a:visited.is-current,
  .nav-2ndLv__itemInner > a:visited.is-parentsLink {
    color: #c0153f; }
    @media (min-width: 768px) {
      .nav-2ndLv__itemInner > a.is-current, .nav-2ndLv__itemInner > a.is-parentsLink,
      .nav-2ndLv__itemInner > a:hover.is-current,
      .nav-2ndLv__itemInner > a:hover.is-parentsLink,
      .nav-2ndLv__itemInner > a:visited.is-current,
      .nav-2ndLv__itemInner > a:visited.is-parentsLink {
        text-decoration: underline; } }
  @media (min-width: 768px) {
    .nav-2ndLv__itemInner > a.no-parentsLink.is-parentsLink,
    .nav-2ndLv__itemInner > a:hover.no-parentsLink.is-parentsLink,
    .nav-2ndLv__itemInner > a:visited.no-parentsLink.is-parentsLink {
      text-decoration: none; } }

.nav-2ndLv__itemInner > a:hover {
  text-decoration: underline; }

.nav-3rdLv {
  display: none;
  margin: 0 -1em; }
  @media (min-width: 768px) {
    .nav-3rdLv {
      background: white;
      margin: 0;
      position: absolute;
      top: 100%;
      left: 0; } }

.nav-3rdLv__wrapper {
  display: none;
  list-style: none;
  padding: 0;
  border-top: 1px solid #cccccc;
  margin: 11px 0 0 -0.75rem; }
  @media (min-width: 768px) {
    .nav-3rdLv__wrapper {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      border: none 0;
      margin-top: 0; } }

.nav-3rdLv__item {
  font-size: 0.8125rem;
  padding: 11px 1em 11px 2em;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .nav-3rdLv__item {
      font-size: 0.8125rem;
      width: 100%;
      background: url(/common/images/nav-2ndLv-bullet.png) 0.75rem 0.45em no-repeat;
      padding: 0 0 0 1.5rem;
      margin-top: 0.125rem;
      border: none;
      float: left; } }
  .is-2column .nav-3rdLv__item {
    width: 50%; }
    @media (min-width: 768px) {
      .is-2column .nav-3rdLv__item:nth-child(2) {
        margin-top: 0; } }
  @media (min-width: 768px) {
    .nav-3rdLv__item:first-child {
      margin-top: 0; } }
  .nav-3rdLv__item:last-child {
    padding-bottom: 0;
    border: none 0; }
  @media (min-width: 768px) {
    .nav-3rdLv__item.is-2column {
      width: 50%; } }
  .nav-3rdLv__item a,
  .nav-3rdLv__item a:visited {
    color: #333333;
    text-decoration: none; }
    .nav-3rdLv__item a.is-current, .nav-3rdLv__item a.is-parentsLink,
    .nav-3rdLv__item a:visited.is-current,
    .nav-3rdLv__item a:visited.is-parentsLink {
      color: #c0153f; }
  .nav-3rdLv__item a:hover {
    color: #c0153f;
    text-decoration: underline; }

/*　//////////////////////////////////////////////////
　サイト内検索フォーム
//////////////////////////////////////////////////　*/
.link-search .link-search__btnExtend {
  display: none; }
  @media (min-width: 768px) {
    .link-search .link-search__btnExtend {
      display: block; } }

.nav-main__siteSearch {
  padding: 0.6875rem 0; }
  @media (min-width: 768px) {
    .nav-main__siteSearch {
      display: none;
      width: 400px;
      padding: 0;
      position: absolute;
      top: 85%;
      right: 0; } }
  .nav-main__siteSearch form {
    position: relative; }

.nav-main-siteSearch__input {
  font-size: 16px;
  box-sizing: border-box !important;
  width: 100%;
  height: 35px;
  padding: 0 35px 0 0.5em;
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 1px gray inset; }

.nav-main-siteSearch__btn {
  color: white;
  width: 35px;
  height: 35px;
  background: #c0153f url(/common/images/nav-searchBtn_white.png) center center no-repeat;
  background-size: 17px;
  border: none;
  border-radius: 0 4px 4px 0;
  position: absolute;
  top: 0;
  right: 0; }

/*　//////////////////////////////////////////////////
　言語変更ナビ
//////////////////////////////////////////////////　*/
.nav-lang__wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden; }
  @media (min-width: 768px) {
    .nav-lang__wrapper {
      display: block;
      width: 89px;
      height: 26px;
      background: #c0153f;
      position: absolute;
      top: 0;
      right: 0; } }

.nav-lang__item {
  font-size: 0.875rem;
  text-transform: uppercase;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .nav-lang__item {
      font-size: 0.75rem;
      text-align: center;
      padding: 0;
      border: none; } }
  body.lang-en .nav-lang__item.lang-en,
  body.lang-ja .nav-lang__item.lang-ja {
    display: none; }
  .nav-lang__item a,
  .nav-lang__item a:hover,
  .nav-lang__item a:visited {
    color: #333333;
    text-decoration: none;
    display: block; }
    @media (min-width: 768px) {
      .nav-lang__item a,
      .nav-lang__item a:hover,
      .nav-lang__item a:visited {
        color: white;
        line-height: 26px;
        display: inline-block;
        height: 26px;
        background: url(/common/images/nav-lang-bullet.png) 0 47% no-repeat;
        padding-left: 0.65em; } }

/*　//////////////////////////////////////////////////
　ローカル（カテゴリー）ナビ
//////////////////////////////////////////////////　*/
.nav-local-Lv1,
.nav-local-Lv2 {
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 9999; }
  .nav-local-Lv1.is-fixed,
  .nav-local-Lv2.is-fixed {
    position: fixed;
    top: 0; }

.nav-local-Lv1 {
  background: #ececec;
  top: 2.8125rem;
  z-index: 9999; }
  @media (min-width: 768px) {
    .nav-local-Lv1 {
      top: 6.25rem; } }

.nav-local-Lv2 {
  background: rgba(0, 0, 0, 0.6);
  top: 5.3125rem;
  z-index: 8999; }
  @media (min-width: 768px) {
    .nav-local-Lv2 {
      top: 9.3125rem; } }

.nav-local__container,
.nav-local-Lv2__container {
  max-width: 1142px;
  width: 100%;
  margin: auto;
  width: auto;
  margin: 0 auto; }
  @media (min-width: 768px) {
    .nav-local__container,
    .nav-local-Lv2__container {
      padding: 0 1rem; } }
  @media (min-width: 768px) {
    .nav-local__container,
    .nav-local-Lv2__container {
      display: -ms-flexbox;
      display: flex; } }

.nav-local__expander,
.nav-local-Lv2__expander {
  font-size: 0.75rem;
  font-weight: bold;
  text-decoration: none !important;
  white-space: nowrap;
  display: block;
  padding: 0.6875rem 0;
  margin: 0 1rem; }
  @media (min-width: 768px) {
    .nav-local__expander,
    .nav-local-Lv2__expander {
      color: #333333;
      font-size: 0.875rem;
      font-weight: normal;
      display: inline-block;
      padding: 0.875rem 0;
      margin: 0 2em 0 0; } }
  .nav-local__expander.is-closed,
  .nav-local-Lv2__expander.is-closed {
    background: url(/common/images/nav-mobile-closed.png) center right no-repeat;
    background-size: 9px auto; }
    @media (min-width: 768px) {
      .nav-local__expander.is-closed,
      .nav-local-Lv2__expander.is-closed {
        background: none; } }
  .nav-local__expander.is-opened,
  .nav-local-Lv2__expander.is-opened {
    background: url(/common/images/nav-mobile-opened.png) center right no-repeat;
    background-size: 9px auto; }
    @media (min-width: 768px) {
      .nav-local__expander.is-opened,
      .nav-local-Lv2__expander.is-opened {
        background: none; } }

.nav-local__expander,
.nav-local__expander:visited {
  color: #333333; }

.nav-local__expander:hover,
.nav-local__expander.is-onlyLink,
.nav-local__expander.is-current {
  color: #c0153f; }

.nav-local-Lv2__expander,
.nav-local-Lv2__expander:hover,
.nav-local-Lv2__expander:visited {
  color: white; }
  @media (min-width: 768px) {
    .nav-local-Lv2__expander,
    .nav-local-Lv2__expander:hover,
    .nav-local-Lv2__expander:visited {
      padding: 1.25rem 0;
      margin: 0 1.875rem 0 0; } }
  .nav-local-Lv2__expander.is-closed,
  .nav-local-Lv2__expander:hover.is-closed,
  .nav-local-Lv2__expander:visited.is-closed {
    background: url(/common/images/nav-mobile-closed_white.png) center right no-repeat;
    background-size: 9px auto; }
    @media (min-width: 768px) {
      .nav-local-Lv2__expander.is-closed,
      .nav-local-Lv2__expander:hover.is-closed,
      .nav-local-Lv2__expander:visited.is-closed {
        background: none; } }
  .nav-local-Lv2__expander.is-opened,
  .nav-local-Lv2__expander:hover.is-opened,
  .nav-local-Lv2__expander:visited.is-opened {
    background: url(/common/images/nav-mobile-opened_white.png) center right no-repeat;
    background-size: 9px auto; }
    @media (min-width: 768px) {
      .nav-local-Lv2__expander.is-opened,
      .nav-local-Lv2__expander:hover.is-opened,
      .nav-local-Lv2__expander:visited.is-opened {
        background: none; } }

.nav-local-Lv2__name {
  padding: 0.46875rem 0.9375rem 0.46875rem 0;
  border-right: solid 1px rgba(255, 255, 255, 0.3); }
  @media (min-width: 768px) {
    .nav-local-Lv2__name {
      padding: 1.1875rem 1.875rem 1.1875rem 0;
      font-size: 1.25rem; } }

.nav-local-Lv2__page {
  padding-left: 1rem;
  font-weight: normal; }
  @media (min-width: 768px) {
    .nav-local-Lv2__page {
      display: none; } }

.nav-local__wrapper,
.nav-local-Lv2__wrapper {
  display: none;
  list-style: none;
  width: 100%;
  background: #ececec;
  padding: 0;
  border-top: 1px solid #cccccc;
  margin: 0;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 9999; }
  @media (min-width: 768px) {
    .nav-local__wrapper,
    .nav-local-Lv2__wrapper {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -ms-flex-line-pack: center;
          align-content: center;
      -ms-flex-align: center;
          align-items: center;
      border: none 0;
      position: relative;
      left: auto;
      top: auto; } }

.nav-local-Lv2__wrapper {
  background: rgba(0, 0, 0, 0.6); }
  @media (min-width: 768px) {
    .nav-local-Lv2__wrapper {
      background: none; } }

.nav-local__item,
.nav-local-Lv2__item {
  font-size: 0.8125rem;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .nav-local__item,
    .nav-local-Lv2__item {
      font-size: 0.875rem;
      margin: 0 2em 0 0;
      border: none; } }
  .nav-local__item a,
  .nav-local__item a:hover,
  .nav-local__item a:visited,
  .nav-local-Lv2__item a,
  .nav-local-Lv2__item a:hover,
  .nav-local-Lv2__item a:visited {
    color: #333333;
    text-decoration: none;
    display: block;
    padding: 11px 0; }
    @media (min-width: 768px) {
      .nav-local__item a,
      .nav-local__item a:hover,
      .nav-local__item a:visited,
      .nav-local-Lv2__item a,
      .nav-local-Lv2__item a:hover,
      .nav-local-Lv2__item a:visited {
        padding: 0; } }

.nav-local__item {
  padding: 0 1rem 0 2rem; }
  @media (min-width: 768px) {
    .nav-local__item {
      padding: 0; } }
  .nav-local__item a.is-parentsLink.is-noParentsLink,
  .nav-local__item a.is-current.is-noParentsLink {
    color: #333333; }
  .nav-local__item a.is-parentsLink,
  .nav-local__item a.is-current {
    color: #c0153f; }
  .nav-local__item a:hover {
    color: #c0153f !important; }

.nav-local-Lv2__item {
  padding: 0 1rem; }
  @media (min-width: 768px) {
    .nav-local-Lv2__item {
      padding: 0; } }
  .nav-local-Lv2__item:last-child {
    margin-right: 0; }
  .nav-local-Lv2__item a,
  .nav-local-Lv2__item a:visited,
  .nav-local-Lv2__item a.is-parentsLink.is-noParentsLink,
  .nav-local-Lv2__item a.is-brothersLink.is-noParentsLink {
    color: #cccccc;
    font-weight: normal; }
  .nav-local-Lv2__item a.is-current,
  .nav-local-Lv2__item a.is-current.is-noParentsLink,
  .nav-local-Lv2__item a.is-parentsLink,
  .nav-local-Lv2__item a.is-brothersLink {
    color: white;
    font-weight: bold; }
  .nav-local-Lv2__item a:hover {
    color: white !important;
    font-weight: bold !important; }

/*
---
name: ローカルナビ Lv3（navbar外）
category:
  - components/navigation
---

```html
<ul class="nav-local-Lv3">
  <li class="nav-local-Lv3__item"><a href="/product/ice-jtag/adviceluna2/package/index.html">アヴネット製評価ボード付</a></li>
  <li class="nav-local-Lv3__item"><a href="/product/ice-jtag/adviceluna2/package/index2.html">アルテラ製評価ボード付</a></li>
  <li class="nav-local-Lv3__item"><a href="/product/ice-jtag/adviceluna2/package/index3.html">アルティマ製評価ボード付</a></li>
  <li class="nav-local-Lv3__item"><a href="/product/ice-jtag/adviceluna2/package/index4.html">ザイリンクス製評価ボード付</a></li>
  <li class="nav-local-Lv3__item"><a href="/product/ice-jtag/adviceluna2/package/index5.html">東京エレクトロンデバイス製評価ボード付</a></li>
</ul>
```
*/
.nav-local-Lv3 {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  margin: 0 -0.8125rem 1.5rem; }
  @media (min-width: 768px) {
    .nav-local-Lv3 {
      margin-top: 2rem;
      margin-bottom: 3rem; } }

.nav-local-Lv3__item {
  width: 50%;
  padding: 0 0.8125rem;
  margin: 1.25rem 0 0; }
  @media (min-width: 768px) {
    .nav-local-Lv3__item {
      width: 25%; } }
  .nav-local-Lv3__item:nth-child(1), .nav-local-Lv3__item:nth-child(2) {
    margin-top: 0; }
  @media (min-width: 768px) {
    .nav-local-Lv3__item:nth-child(1), .nav-local-Lv3__item:nth-child(2), .nav-local-Lv3__item:nth-child(3), .nav-local-Lv3__item:nth-child(4) {
      margin-top: 0; } }
  .nav-local-Lv3__item a,
  .nav-local-Lv3__item a.is-parentsLink.is-noParentsLink,
  .nav-local-Lv3__item a.is-brothersLink.is-noParentsLink {
    color: #c0153f;
    text-align: center;
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    padding: 0.5rem 0.5rem;
    margin: 0;
    border: 1px solid #c0153f; }
    @media (min-width: 768px) {
      .nav-local-Lv3__item a,
      .nav-local-Lv3__item a.is-parentsLink.is-noParentsLink,
      .nav-local-Lv3__item a.is-brothersLink.is-noParentsLink {
        padding-right: 1.25rem;
        padding-left: 1.25rem; } }
  .nav-local-Lv3__item a.is-current,
  .nav-local-Lv3__item a.is-current.is-noParentsLink,
  .nav-local-Lv3__item a.is-parentsLin,
  .nav-local-Lv3__item a.is-parentsLink {
    color: white;
    text-decoration: none;
    background: #c0153f; }
  .nav-local-Lv3__item a:hover {
    color: white !important;
    text-decoration: none !important;
    background: #c0153f !important; }

/*　//////////////////////////////////////////////////
　サイドバー > ローカルナビ
//////////////////////////////////////////////////　*/
/*
---
name: サイドバー > ローカルナビ
category:
  - components/navigation
  - components/sidebar
---

```html
<ul class="nav-sidebar__wrapper">
  <li class="nav-sidebar__item"><a href="">FAQ</a></li>
  <li class="nav-sidebar__item"><a href="">スタートアップガイド / ドキュメント / その他のツール</a></li>
  <li class="nav-sidebar__item"><a href="">ご購入後、初回のインストール方法</a></li>
</ul>
```
*/
.nav-sidebar__wrapper {
  list-style: none;
  padding: 0;
  margin: 0; }

.nav-sidebar__item {
  background: url(/common/images/ProductList-heading-bullet.png) 0 1.45em no-repeat;
  background-size: 6px auto;
  padding: 0.9375rem 0 0.9375rem 0.9em;
  border-bottom: solid 1px #dedede; }

/*　//////////////////////////////////////////////////
　ユーティリティナビ
//////////////////////////////////////////////////　*/
.nav-utility-topicPath {
  position: relative; }

.nav-utility {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  left: 0;
  top: 0; }
  .nav-utility.is-hide {
    opacity: 0; }
  .nav-utility.is-fixed {
    position: fixed;
    left: 0;
    top: auto;
    bottom: 0; }

.nav-utility__container {
  max-width: 1142px;
  width: 100%;
  margin: auto;
  width: auto;
  margin: 0 auto;
  position: relative; }
  @media (min-width: 768px) {
    .nav-utility__container {
      padding: 0 1rem; } }

.nav-utility__wrapper {
  list-style: none;
  padding: 0.4375rem 1rem;
  margin: 0; }
  @media (min-width: 768px) {
    .nav-utility__wrapper {
      text-align: center;
      padding: 0.8125rem 0; } }

.nav-utility__item {
  display: inline-block;
  background: url(/common/images/nav-utility-bullet.png) 0 45% no-repeat;
  padding: 0 0 0 0.5rem;
  margin: 0 1.5rem 0 0; }
  @media (min-width: 768px) {
    .nav-utility__item {
      padding-left: 0.75rem; } }
  .nav-utility__item a,
  .nav-utility__item a:hover,
  .nav-utility__item a:visited {
    color: white;
    text-decoration: none; }
  .nav-utility__item a:hover {
    font-weight: bold; }

.link-pageTop {
  line-height: 1px;
  margin: 0;
  position: absolute;
  right: 1rem;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%); }
  @media (min-width: 768px) {
    .link-pageTop {
      right: 0; } }
  .link-pageTop img {
    width: 0.875rem;
    height: auto; }
    @media (min-width: 768px) {
      .link-pageTop img {
        width: 100%; } }

/*　//////////////////////////////////////////////////
　パンくずナビ
//////////////////////////////////////////////////　*/
.topicPath {
  border-top: solid 1px #dedede; }

.topicPath__wrapper {
  max-width: 1142px;
  width: 100%;
  margin: auto;
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: auto;
  padding: 0.6875rem 0;
  margin: 0 1rem; }
  @media (min-width: 768px) {
    .topicPath__wrapper {
      padding: 0 1rem; } }
  @media (min-width: 768px) {
    .topicPath__wrapper {
      font-size: 0.8125rem;
      padding: 0.875rem 1rem;
      margin: 0 auto; } }

.topicPath__item {
  color: #c0153f;
  padding: 0 0.5rem 0 0; }
  .topicPath__item::after {
    color: #999999;
    content: ">";
    padding: 0 0 0 0.5rem; }
  .topicPath__item:last-child {
    padding-right: 0; }
    .topicPath__item:last-child::after {
      content: none;
      padding-right: 0; }
  .topicPath__item a,
  .topicPath__item a:visited {
    color: #333333; }
  .topicPath__item a:hover {
    text-decoration: none; }

/*　//////////////////////////////////////////////////
　メインコンテンツ
//////////////////////////////////////////////////　*/
body {
  color: #333333;
  font-family: "arial", sans-serif;
  line-height: 1.57143;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  min-width: 100%;
  min-height: 100vh;
  padding: 0;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-x: hidden; }
  @media (min-width: 768px) {
    body {
      letter-spacing: 0;
      line-height: 1.5; } }
  body.page-home {
    padding-top: 0; }
  body.noscroll {
    position: fixed; }

p {
  font-size: 0.9375rem;
  letter-spacing: 0.1em; }

/*
---
name: テキスト > サイズ大（18px）
category:
  - components/text
---

```html
<p class=" is-fontSize18">adviceLUNAII <a href="foo.html">ライセンス概要と適用方法について【 PDF 】</a></p>
```
*/
.is-fontSize18 {
  font-size: 1.125rem; }

/*
---
name: テキストリンク
category:
  - components/button_link
---

```html
<p>保守契約の再加入をお勧めします。保守加入のお申し込みは<a href="foo.html">こちら</a>。</p>
```
*/
a,
a:visited,
a:hover {
  color: #c0153f;
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

/*
---
name: ルビ
category:
  - components/text
---

```html
<p>代表取締役　<ruby>古田<rt>ふるた</rt></ruby>　<ruby>豊彦<rt>とよひこ</rt></ruby></p>
```
*/
rt {
  font-size: 0.5rem; }

/*　//////////////////////////////////////////////////
　セクション : 共通
//////////////////////////////////////////////////　*/
.l-main {
  -ms-flex: 1 0 auto;
      flex: 1 0 auto;
  overflow: hidden;
  max-width: 1142px;
  width: 100%;
  margin: auto;
  padding: 1rem 1rem 0;
  margin: 0 auto; }
  @media (min-width: 768px) {
    .l-main {
      padding: 0 1rem; } }
  @media (min-width: 768px) {
    .l-main {
      padding: 1rem 1rem 0; } }
  .nav-local-Lv1 + .l-main {
    margin-top: 40px; }
    @media (min-width: 768px) {
      .nav-local-Lv1 + .l-main {
        margin-top: 49px; } }
  .nav-local-Lv2 + .l-main {
    margin-top: 80px; }
    @media (min-width: 768px) {
      .nav-local-Lv2 + .l-main {
        margin-top: 119px; } }

.l-section {
  margin: 0 0 2.5rem; }
  @media (min-width: 768px) {
    .l-section {
      margin: 0 0 4.375rem; } }
  .l-section > *:last-child {
    margin-bottom: 0; }

.sepatator {
  padding: 0 0 1.25rem;
  border-bottom: solid 1px #cccccc;
  margin: 0 0 1.25rem; }
  @media (min-width: 768px) {
    .sepatator {
      padding: 0 0 2.1875rem;
      margin: 0 0 2.1875rem; } }
  .sepatator:nth-of-type(1) {
    padding-top: 1.25rem;
    border-top: solid 1px #cccccc; }
    @media (min-width: 768px) {
      .sepatator:nth-of-type(1) {
        padding-top: 2.1875rem; } }
  .sepatator > *:last-child {
    margin-bottom: 0; }

/*
---
name: 見出し Lv1
category:
  - components/heading
---

コメントコメントコメント

```html
<h1 class="heading-Lv1">ICE/JTAG</h1>
<p class="heading-Lv1__caption">adviceシリーズは、多機能、高性能なハイエンドモデルからシンプルなモデルまで、幅広いラインアップを有する、国内販売台数No.1の実績を持つJTAG ICEです。<br>
  マルチコアやLinux/Androidを搭載した高機能製品からOSを搭載しない製品まで、幅広く対応します。<br>
  ARMコアを始め、Super Hファミリ、RH850ファミリ、Qorivvaファミリ、Xtensaなど多くのマイコン/LSIをサポートしています。</p>
```
*/
.heading-Lv1 {
  font-size: 1.5rem;
  padding: 0;
  margin: 0 0 0.625rem; }
  @media (min-width: 768px) {
    .heading-Lv1 {
      font-size: 2.25rem;
      line-height: 1;
      margin: 2rem 0 2.6875rem; } }

@media (min-width: 768px) {
  .heading-Lv1__caption {
    margin-bottom: 4.375rem; } }

/*
---
name: 見出し Lv2
category:
  - components/heading
---

コメントコメントコメント


```html
<h2 class="heading-Lv2">製品ラインナップ</h2>
<p class="heading-Lv2__caption">adviceLUNAⅡは、adviceLUNAの解析/分析機能を充実させ、さらに進化させたJTAGエミュレータ
です。</p>
```
*/
.heading-Lv2 {
  font-size: 1.125rem;
  font-weight: normal;
  padding: 0 0 0.2em;
  border-bottom: 1px solid #c0153f;
  margin: 0 0 1.375rem; }
  @media (min-width: 768px) {
    .heading-Lv2 {
      font-size: 1.5rem;
      margin-bottom: 2.375rem; } }

.heading-Lv2__subTitle {
  color: #888888;
  font-family: "arial";
  font-size: 0.625rem;
  font-weight: bold;
  padding: 0 0 0 0.5rem; }
  @media (min-width: 768px) {
    .heading-Lv2__subTitle {
      font-size: 0.75rem;
      padding-left: 1rem; } }

.heading-Lv2__caption {
  color: #c0153f;
  font-size: 0.875rem; }
  @media (min-width: 768px) {
    .heading-Lv2__caption {
      font-size: 1.125rem; } }

/*
---
name: 見出し Lv3
category:
  - components/heading
---

```html
<h3 class="heading-Lv3">製品ラインナップ</h3>
```
*/
.heading-Lv3 {
  color: #c0153f;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.33333;
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.25em no-repeat;
  background-size: 6px auto;
  padding: 0 0 0 0.75em;
  margin: 1rem 0 0.3125rem; }
  @media (min-width: 768px) {
    .heading-Lv3 {
      font-size: 1.125rem;
      background-position-y: 0.2em;
      background-size: auto;
      padding-left: 1em;
      margin-bottom: 0.5625rem; } }
  .heading-Lv3:first-child {
    margin-top: 0; }
  .heading-Lv3 a,
  .heading-Lv3 a:hover,
  .heading-Lv3 a:visited {
    color: #c0153f; }

/*
---
name: 見出し Lv3（ビュレットなし）
category:
  - components/heading
---

```html
<h3 class="heading-Lv3 is-noBullet">製品ラインナップ</h3>
```
*/
.heading-Lv3.is-noBullet {
  background: none;
  padding-left: 0; }

/*
---
name: 見出し Lv3（ビュレットなし・コメント付き）
category:
  - components/heading
---

```html
<h3 class="heading-Lv3 is-noBullet">Development Tools　<span class="heading-Lv3__note">※8051,C166,および251プロセッサファミリ向けにフローティングライセンスもご用意しております。</span></h3>
```
*/
.heading-Lv3 .heading-Lv3__note {
  font-size: 76.92308%; }

/*
---
name: 見出し Lv4
category:
  - components/heading
---

```html
<h4 class="heading-Lv4">main( )先頭自動ブレーク</h4>
```
*/
.heading-Lv4 {
  font-size: 0.75rem;
  margin: 1rem 0  0.5em; }
  @media (min-width: 768px) {
    .heading-Lv4 {
      font-size: 0.875rem; } }

p,
li,
dt,
dd,
div,
section {
  font-size: 0.75rem; }
  @media (min-width: 768px) {
    p,
    li,
    dt,
    dd,
    div,
    section {
      font-size: 0.875rem; } }

@media (min-width: 768px) {
  .is-rightEnd.is-margin_1block {
    margin-right: 75%; } }

@media (min-width: 768px) {
  .is-rightEnd.is-margin_2blocks {
    margin-right: 50%; } }

@media (min-width: 768px) {
  .is-rightEnd.is-margin_3blocks {
    margin-right: 25%; } }

/*
---
name: 見積もりシステム > 見出し
category:
  - components/heading
---

```html
<p class="heading-estimation">選択したデバイスベンダー : ABOV Semiconductor</p>
```
*/
.heading-estimation {
  color: #c0153f;
  font-size: 1.375rem;
  font-weight: bold; }
  @media (min-width: 768px) {
    .heading-estimation {
      margin-left: 1rem; } }
  .heading-estimation span {
    display: inline-block; }

/*
---
name: 注意文
category:
  - components/text
---

```html
<p class="caution">保守期限が切れているため、ログインできません。保守加入のお申し込みは<a href="">こちら</a>。</p>
```
*/
.caution {
  color: #ff0000;font-weight:bold; }
  .caution a {
    text-decoration: underline;
    padding: 0 0.25em; }

/*　//////////////////////////////////////////////////
　製品詳細 > ヘディング
//////////////////////////////////////////////////　*/
/*
---
name: ページタイトル > 製品詳細ページ
category:
  - components/heading
---

コメントコメントコメント


```html
<div class="main-heading">
  <div class="main-heading__text">
    <h1 class="heading-Lv1">adviceLUNAⅡ</h1>
    <p class="heading-Lv1__caption">ソフトウェアの動きが分かる<br>
      ボトルネックが特定できる<br>
      テスト結果を記録できる デバッグツール</p>
  <!--/.main-heading__text--></div>
  <div class="main-heading__img">
    <img src="/product/images/adviceLUNA2-img.jpg" alt="">
  <!--/.main-heading__img--></div>
<!--/.main-heading--></div>
```
*/
.main-heading {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  margin: -1rem 0 0; }
  @media (min-width: 768px) {
    .main-heading {
      margin-bottom: 3.4375rem;
      -ms-flex-direction: row;
          flex-direction: row; } }

.main-heading__text {
  color: #c0153f;
  margin: 0 0 2.5rem; }
  @media (min-width: 768px) {
    .main-heading__text {
      color: white;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
          flex-direction: column;
      -ms-flex-pack: center;
          justify-content: center;
      background: #c0153f;
      width: 48.82883%;
      padding: 0 0 0 3.125rem;
      margin: 0; } }
  @media (min-width: 768px) {
    .main-heading__text .heading-Lv1 {
      font-size: 2.25rem;
      line-height: 1.1;
      margin: 0 0 1.75rem; } }
  .main-heading__text .heading-Lv1__caption {
    font-size: 0.9375rem;
    font-weight: bold;
    margin: 0; }
    @media (min-width: 768px) {
      .main-heading__text .heading-Lv1__caption {
        font-size: 1.125rem;
        font-weight: normal; } }

.main-heading__img {
  line-height: 1px;
  margin: 0 -1rem 0.625rem; }
  @media (min-width: 768px) {
    .main-heading__img {
      width: 51.17117%;
      margin: 0; } }

/*　//////////////////////////////////////////////////
　メイン > リスト
//////////////////////////////////////////////////　*/
/*
---
name: リスト（レギュラー）
category:
  - components/list
---

```html
<ul class="list-arrow">
  <li class="list-arrow__item">すぐに使えるUIデザイン</li>
  <li class="list-arrow__item">マルチコア構成のデバッグ</li>
  <li class="list-arrow__item">活線挿抜機能とスナップショットツール</li>
</ul>
```
*/
.list-arrow {
  list-style: none;
  padding: 0;
  margin: 0 0 2.1875rem 1em; }

.list-arrow__item {
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.25em no-repeat;
  background-size: 5px auto;
  padding: 0 0 0 0.75em;
  margin-bottom: 0.6em; }
  @media (min-width: 768px) {
    .list-arrow__item {
      background-position-y: 0.4em; } }

/*
---
name: リスト（下向きビュレット）
category:
  - components/list
---

```html
<ul class="list-arrow-bottom">
  <li class="list-arrow-bottom__item">すぐに使えるUIデザイン</li>
  <li class="list-arrow-bottom__item">マルチコア構成のデバッグ</li>
  <li class="list-arrow-bottom__item">活線挿抜機能とスナップショットツール</li>
</ul>
```
*/
.list-arrow-bottom {
  list-style: none;
  padding: 0;
  margin: 0 0 2.1875rem 1em; }

.list-arrow-bottom__item {
  background: url(/common/images/bullet-arrow-bottom.png) 0 0.5em no-repeat;
  background-size: 10px auto;
  padding: 0 0 0 1.2em;
  margin-bottom: 0.6em; }
  @media (min-width: 768px) {
    .list-arrow-bottom__item {
      background-size: 12px auto;
      background-position-y: 0.5em; } }

/*
---
name: リスト（中黒点）
category:
  - components/list
---

```html
<ul class="list-disc">
  <li class="list-disc__item">評価機のお貸出しはご購入を検討されている法人ユーザー様を対象としたサービスです。</li>
  <li class="list-disc__item">弊社では、評価機のご使用によって生じたお客様のいかなる損害に対しても、いっさいの責任を負いかねます。
  </li>
  <li class="list-disc__item">評価機の状況や結果などの確認を目的として、弊社から連絡させていただく場合がございます。
    <ul class="list-disc-2ndLv">
      <li class="list-disc-2ndLv__item">サイマル/非サイマルを上位制御により判別</li>
      <li class="list-disc-2ndLv__item">サイマル中は映像/音声のみならず字幕も比較監視可能</li>
    </ul>
  </li>
</ul>
```
*/
.list-disc {
  list-style: none;
  padding: 0;
  margin: 0 0 2.1875rem 1.25em; }

.list-disc__item {
  background: url(/common/images/list-bullet.png) 0.1em 0.45em no-repeat;
  padding: 0 0 0 1.2em;
  margin-bottom: 0.8em; }
  .list-disc__item:last-child {
    margin-bottom: 0; }

.list-disc-2ndLv {
  list-style: disc;
  padding: 0;
  margin: 0 0 0 1.75em; }

.list-disc-2ndLv__item {
  background-size: 5px auto;
  padding: 0;
  margin-bottom: 0; }

/*
---
name: リスト（ニュースリスト）
category:
  - components/list
---

```html
<ul class="list-news">
  <li class="list-news__item">adviceLUNAII サポートサイトを公開しました。</li>
  <li class="list-news__item">adviceLUNAII サポートのご案内を掲載しました。</li>
</ul>
```
*/
.list-news {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem; }

.list-news__item {
  padding: 1.125rem 0;
  border-bottom: 1px solid #dedede;
  margin: 0; }
  .list-news__item:first-child {
    padding-top: 0; }

/*
---
name: 役員リスト（DLリスト）
category:
  - components/list
---

```html
<dl class="list-officer">
  <dt class="list-officer__post">代表取締役社長</dt>
    <dd class="list-officer__name">古田  豊彦</dd>
  <dt class="list-officer__post">取締役</dt>
    <dd class="list-officer__name">安藤  裕一</dd>
</dl>
```
*/
.list-officer {
  list-style: none;
  padding: 0;
  margin: 0; }

.list-officer__post {
  width: 8.5em;
  padding: 0;
  margin: 0;
  float: left; }

.list-officer__name {
  padding: 0;
  margin: 0; }

/*
---
name: 会社情報 > 事業拠点 > 住所・連絡先（DLリスト）
category:
  - components/list
---

```html
<dl class="list-office">
  <dt class="list-office__title">所在地</dt>
    <dd class="list-office__data">〒151-0053<br>
      東京都渋谷区代々木4-30-3 新宿MIDWESTビル</dd>
  <dt class="list-office__title">連絡先</dt>
    <dd class="list-office__data">TEL: 052-972-7200<br>
      FAX: 052-972-7222</dd>
</dl>
```
*/
.list-office {
  list-style: none;
  padding: 0;
  margin: 0; }

.list-office__title {
  display: none; }

.list-office__data {
  padding: 0;
  margin: 0 0 1rem; }

/*
---
name: 番号付きリスト（条文）
category:
  - components/list
---

```html
<ol class="list-provisions">
  <li class="list-provisions__item">当社の活動、製品及びサービスに係わる環境影響を常に認識し、環境汚染の予防及び環境保護を推進するとともに、環境マネジメント活動の継続的改善を図ります。</li>
  <li class="list-provisions__item">当社の活動、製品及びサービスに係わる環境関連の法的及びその他の要求事項を順守します。</li>
  <li class="list-provisions__item">当社の活動、製品及びサービスに係わる環境影響のうち、以下の項目を環境管理重点テーマとして取り組みます。
    <ol class="list-provisions-Lv2">
      <li class="list-provisions-Lv2__item">電力使用量の節減</li>
      <li class="list-provisions-Lv2__item">事務用紙使用量の削減</li>
      <li class="list-provisions-Lv2__item">品質不良管理の徹底</li>
    </ol>
  </li>
</ol>
```
*/
.list-provisions {
  padding: 0;
  margin: 0 0 1.5rem 1.25em; }

.list-provisions__item {
  margin: 0.5em 0; }

.list-provisions-Lv2 {
  padding: 0;
  margin: 0 0 0 2em; }

.list-provisions-Lv2__item {
  margin: 0.5em 0; }

/*
---
name: コメントリスト（※付きリスト）
category:
  - components/list
---

```html
<ul class="list-note">
  <li class="list-note__item">どちらの仕事も、まずは先輩からのサポートを貰いつつ仕事に慣れていき、それぞれの専門知識の習得をして頂きます。</li>
  <li class="list-note__item">学生時代の専攻や男女など一切問いません。やる気があれば、誰でも活躍できる職場です！</li>
</ul>
```
*/
.list-note {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem; }

.list-note__item {
  margin: 0.25em 0 0.25em 1.4em;
  position: relative; }
  .list-note__item::before {
    content: "※";
    position: absolute;
    top: 0;
    left: -1.3em; }

/*
---
name: アルファベットリスト
category:
  - components/list
---

```html
<ul class="list-alphabet">
  <li><a href="javascript:void(0);">a</a></li>
  <li><a href="javascript:void(0);">b</a></li>
  <li><a href="javascript:void(0);">c</a></li>
  <li><a href="javascript:void(0);">d</a></li>
  <li><a href="javascript:void(0);">e</a></li>
  <li><a href="javascript:void(0);">f</a></li>
  <li><a href="javascript:void(0);">g</a></li>
</ul>
```
*/
.list-alphabet {
  list-style: none;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 0;
  margin: 0 0 1.875rem; }
  .list-alphabet li {
    line-height: 1;
    text-align: center;
    border: solid 1px #c0153f;
    border-radius: 2px;
    margin: 0 0 1rem 0.75rem; }
  .list-alphabet a {
    display: block;
    min-width: 1.6rem;
    padding: 0.3rem; }
  .list-alphabet a:hover {
    color: white;
    text-decoration: none;
    background: #c0153f; }

/*
---
name: FAQリスト（DLリスト）
category:
  - components/list
---

```html
<dl class="faq">
  <dt class="faq__question"><a href="javascript:void(0);">ハンディターミナルの防水、防滴、防塵はどうなのでしょうか？</a></dt>
    <dd class="faq__answer">防滴・防塵（IP54準拠）、防水ではありません。</dd>
  <dt class="faq__question"><a href="javascript:void(0);">ハンディターミナルの耐衝撃性能はどうなのでしょうか？</a></dt>
    <dd class="faq__answer">本体の落下強度1.5mです。</dd>
</dl>
```
*/
.faq .faq__question {
  margin: 1rem 0 0 2rem;
  position: relative; }
  .faq .faq__question::before {
    content: "Q.";
    display: block;
    position: absolute;
    top: 0;
    left: -1.5rem; }

.faq .faq__answer {
  display: none;
  margin: 0 0 0 2rem;
  position: relative; }
  .faq .faq__answer::before {
    content: "A.";
    display: block;
    position: absolute;
    top: 0;
    left: -1.4rem; }
  .faq .faq__answer ul {
    padding: 0;
    margin: 0 0 0 1.4em; }

/*
---
name: イベントリスト（）
category:
  - components/list
---

```html
<div class="l-main">
  <ul>
    <li>すぐに使えるUIデザイン</li>
    <li>マルチコア構成のデバッグ</li>
    <li>活線挿抜機能とスナップショットツール
      <ul>
        <li>すぐに使えるUIデザイン</li>
        <li>マルチコア構成のデバッグ</li>
      </ul>
    </li>
  </ul>
</div>
```
*/
.event__date {
  display: block; }

.event__name {
  display: block; }

/*
---
name: リスト（classなし）
category:
  - components/list
---

※ .l-main ブロック内に限定

```html
<div class="l-main">
  <ul>
    <li>すぐに使えるUIデザイン</li>
    <li>マルチコア構成のデバッグ</li>
    <li>活線挿抜機能とスナップショットツール
      <ul>
        <li>すぐに使えるUIデザイン</li>
        <li>マルチコア構成のデバッグ</li>
      </ul>
    </li>
  </ul>
</div>
```
*/
/*
---
name: olリスト（classなし）
category:
  - components/list
---

※ .l-main ブロック内に限定

```html
<div class="l-main">
  <ol>
    <li>すぐに使えるUIデザイン</li>
    <li>マルチコア構成のデバッグ</li>
    <li>活線挿抜機能とスナップショットツール
      <ol>
        <li>すぐに使えるUIデザイン</li>
        <li>マルチコア構成のデバッグ</li>
        <li>活線挿抜機能とスナップショットツール</li>
      </ol>
    </li>
  </ol>
</div>
```
*/
/*
---
name: dlリスト（classなし）
category:
  - components/list
---

※ .l-main ブロック内に限定

```html
<div class="l-main">
  <dl>
    <dt>すぐに使えるUIデザイン</dt>
    <dd>マルチコア構成のデバッグ</dd>
    <dd>活線挿抜機能とスナップショットツール</dd>
  </dl>
</div>
```
*/
.l-main dd {
  margin: 0 0 0 0.5em; }

/*　//////////////////////////////////////////////////
　メイン > テーブル
//////////////////////////////////////////////////　*/
/*
---
name: スペック表（2列 / 幅→33%:67% ）
category:
  - components/table
---

セルの幅、最初のセル → 33%, 2番目のセル → 67%

```html
<div class="spec-table__wrapper">
  <table class="spec-table is-column2">
    <tr class="spec-table__heading">
      <th scope="col">プロセッサ</th>
      <th scope="col">コア</th>
    </tr>
    <tr>
      <th scope="row">Cortex-A</th>
      <td>Cortex-A57<br>
        Cortex-A53<br>
        Cortex-A15<br>
        Cortex-A9<br>
        Cortex-A8<br>
        Cortex-A7<br>
        Cortex-A5
      </td>
    </tr>
  </table>
<!--/.spec-table__wrapper--></div>
```
*/
/*
---
name: スペック表（3列 / 等幅）
category:
  - components/table
---

各セルの幅 → 33%

```html
<div class="spec-table__wrapper">
  <table class="spec-table is-column3">
    <tr class="spec-table__heading">
      <th scope="col">プロセッサ</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
    </tr>
    <tr>
      <th scope="row">Cortex-A</th>
      <td>Cortex-A57<br>
        Cortex-A53<br>
        Cortex-A15<br>
        Cortex-A9<br>
        Cortex-A8<br>
        Cortex-A7<br>
        Cortex-A5
      </td>
      <td></td>
    </tr>
  </table>
<!--/.spec-table__wrapper--></div>
```
*/
/*
---
name: スペック表（3列 / 幅→3:2:5）
category:
  - components/table
---

各セルの幅 → 33% : 20% : 47%

```html
<div class="spec-table__wrapper">
  <table class="spec-table is-column3__3-2-5">
    <tr class="spec-table__heading">
      <th scope="col">プロセッサ</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
    </tr>
    <tr>
      <th scope="row">Cortex-A</th>
      <td>Cortex-A57<br>
        Cortex-A53<br>
        Cortex-A15<br>
        Cortex-A9<br>
        Cortex-A8<br>
        Cortex-A7<br>
        Cortex-A5
      </td>
      <td></td>
    </tr>
  </table>
<!--/.spec-table__wrapper--></div>
```
*/
/*
---
name: スペック表（4列 / 等幅）
category:
  - components/table
---

各セルの幅 → 25%

```html
<div class="spec-table__wrapper">
  <table class="spec-table is-column4">
    <tr class="spec-table__heading">
      <th scope="col">プロセッサ</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
    </tr>
    <tr>
      <th scope="row">Cortex-A</th>
      <td>Cortex-A57<br>
        Cortex-A53<br>
        Cortex-A15<br>
        Cortex-A9<br>
        Cortex-A8<br>
        Cortex-A7<br>
        Cortex-A5
      </td>
      <td></td>
      <td></td>
    </tr>
  </table>
<!--/.spec-table__wrapper--></div>
```
*/
/*
---
name: スペック表（5列 / 等幅）
category:
  - components/table
---

各セルの幅 → 20%

```html
<div class="spec-table__wrapper">
  <table class="spec-table is-column5">
    <tr class="spec-table__heading">
      <th scope="col">プロセッサ</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
      <th scope="col">コア</th>
    </tr>
    <tr>
      <th scope="row">Cortex-A</th>
      <td>Cortex-A57<br>
        Cortex-A53<br>
        Cortex-A15<br>
        Cortex-A9<br>
        Cortex-A8<br>
        Cortex-A7<br>
        Cortex-A5
      </td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
<!--/.spec-table__wrapper--></div>
```
*/
.spec-table__wrapper {
  width: 100%;
  position: relative;
/*  overflow-x: scroll;*/
  overflow-x: auto;
  
 }

.spec-table {
  border-collapse: collapse;
  border: solid 1px #cccccc;
  margin: 0 auto 1.25rem; }
  @media (min-width: 768px) {
    .spec-table {
      width: 100%; } }
  .spec-table.is-column2 tr > *:first-child {
    width: 33.33%; }
  .spec-table.is-column2 tr > *:nth-child(2) {
    width: 66.66%; }
  .spec-table.is-column3 th,
  .spec-table.is-column3 td {
    width: 33.333%; }
  .spec-table.is-column3__3-2-5 tr > *:first-child {
    width: 33.33%; }
  .spec-table.is-column3__3-2-5 tr > *:nth-child(2) {
    width: 20%; }
  .spec-table.is-column3__3-2-5 tr > *:nth-child(3) {
    width: 46.66%; }
  .spec-table.is-column4 th,
  .spec-table.is-column4 td {
    width: 25%; }
  .spec-table.is-column5 th,
  .spec-table.is-column5 td {
    width: 20%; }
  .spec-table.is-column6 th,
  .spec-table.is-column6 td {
    width: 16.66%; }

  .spec-table.is-column7 tr > *:first-child {
    width: 40%; }
  .spec-table.is-column7 tr > *:nth-child(2) {
    width: 10%; }
  .spec-table.is-column7 tr > *:nth-child(3) {
    width: 10%; }
  .spec-table.is-column7 tr > *:nth-child(4) {
    width: 10%; }
  .spec-table.is-column7 tr > *:nth-child(5) {
    width: 10%; }
  .spec-table.is-column7 tr > *:nth-child(6) {
    width: 10%; }
  .spec-table.is-column7 tr > *:nth-child(7) {
    width: 10%; }

 .column8w10{
    width: 10%; }
 .column8w15{
    width: 15%; }
 .column8w20{
    width: 20%; }
 .column8w25{
    width: 25%; }

  @media (min-width: 768px) {
    .spec-table.is-staticToolSpec td {
      width: 50%; } }
  .spec-table th,
  .spec-table td {
    font-size: 0.875rem;
    font-weight: normal;
    text-align: left;
    vertical-align: middle;
    padding: 0.5625rem 1rem;
    border: solid 1px #cccccc;
    white-space: nowrap; }
    @media (min-width: 768px) {
      .spec-table th,
      .spec-table td {
        white-space: normal; } }
    .spec-table th span,
    .spec-table td span {
      display: inline-block; }
  .spec-table th,
  .spec-table .is-bg_lightgray {
    background: #eeeeee; }
  .spec-table.is-recruit td {
    vertical-align: top; }
  .spec-table.is-recruit th,
  .spec-table.is-recruit td:last-child {
    white-space: nowrap; }

.spec-table__heading th {
  color: white;
  background: #333333;
  text-align: center; }

.spec-table__heading2 th {
  color: white;
  background: #888888;
  text-align: center; }

.icon-dragable {
  width: 50px;
  height: 20px;
  background-image: url(/common/images/icon-drugable.png);
  background-size: contain;
  position: absolute;
  top: 3px;
  right: 3px; }

.spec-table.is-estimation {
  width: 100%;
  border: none;
  border-bottom: solid 1px #cccccc; }
  .spec-table.is-estimation tr {
    border-top: solid 1px #cccccc; }
  .spec-table.is-estimation th,
  .spec-table.is-estimation td {
    display: block;
    width: 100%;
    padding-top: 0.75em;
    padding-bottom: 0.75em;
    border: none; }
    @media (min-width: 768px) {
      .spec-table.is-estimation th,
      .spec-table.is-estimation td {
        display: table-cell;
        padding-top: 1rem;
        padding-bottom: 1rem; } }
  .spec-table.is-estimation th {
    white-space: normal;
    width: auto;
    background: none;
    padding-bottom: 0; }
    @media (min-width: 768px) {
      .spec-table.is-estimation th {
        padding-bottom: 1rem; } }
  .spec-table.is-estimation td {
    text-align: right;
    padding-top: 0; }
    @media (min-width: 768px) {
      .spec-table.is-estimation td {
        width: 12em;
        padding-top: 1rem; } }
  .spec-table.is-estimation .mitsumori_num {
    width: 3em; }

/*　//////////////////////////////////////////////////
　メイン > ボタン
//////////////////////////////////////////////////　*/
/*
---
name: ボタン（レギュラー）
category:
  - components/button_link
---

```html
<p class="btn-regular">
  <a href="foo.html">お申込みはこちら</a>
</p>
```
*/
.btn-regular {
  text-align: center;
  margin: 3.125rem 0 0; }
  .btn-regular a,
  .btn-regular a:hover,
  .btn-regular a:visited {
    color: white !important;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    max-width: 12.125rem;
    background: #c0153f;
    padding: 0.625rem 0.5em;
    border-radius: 4px; }
    .btn-regular a.is-witdh100per,
    .btn-regular a:hover.is-witdh100per,
    .btn-regular a:visited.is-witdh100per {
      max-width: none; }

/*
---
name: ボタン（サブ）
category:
  - components/button_link
---

```html
<p class="btn-sub">
  <a href="foo.html">お申込みはこちら</a>
</p>
```
*/
.btn-sub {
  text-align: center;
  margin: 3.125rem 0 0; }
  .btn-sub a,
  .btn-sub a:hover,
  .btn-sub a:visited {
    color: white !important;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    width: 100%;
    max-width: 12.125rem;
    background: #4a8b5b;
    padding: 0.625rem 0;
    border-radius: 4px; }
    .btn-sub a.is-witdh100per,
    .btn-sub a:hover.is-witdh100per,
    .btn-sub a:visited.is-witdh100per {
      max-width: none; }

/*　//////////////////////////////////////////////////
　メイン > リンク
//////////////////////////////////////////////////　*/
/*
---
name: アウターリンク
category:
  - components/button_link
---

```html
<a href="foo.html" class="link-outer">メーカー製品ページへ</a>
```
*/
.link-outer,
.link-outer:hover,
.link-outer:visited {
  color: #c0153f;
  text-decoration: none;
  display: inline-block;
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.25em no-repeat;
  background-size: 5px auto;
  padding: 0 0 0 0.75em; }
  @media (min-width: 768px) {
    .link-outer,
    .link-outer:hover,
    .link-outer:visited {
      background-position-y: 0.4em; } }

.link-outer:hover {
  text-decoration: underline; }

.link-outer::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(/common/images/link-outer.svg) center center no-repeat; }

/*　//////////////////////////////////////////////////
　メイン > 評価キットパッケージ
//////////////////////////////////////////////////　*/
/*
---
name: 評価キットパッケージ
category:
  - components/block
---



```html
<section class="package">
  <div class="package__text">
    <h3 class="heading-Lv3 is-noBullet">MicroZed評価キット（Zynq-7000 All Programmable SoC搭載）</h3>
    <p>MicroZed&trade;は、ザイリンクス Zynq&reg;-7000 All Programmable SoC 搭載の低コスト開発ボードです。ユニークなデザインにより、基本的なSoC実験用のスタンドアローン評価ボードとして、また、組み込みシステム・オン・モジュール（SOM）としてキャリアカードと接続しても利用できます。</p>
    <p><a href="foo.html" class="link-outer">メーカー製品ページへ</a></p>
  </div>
  <div class="package__image">
    <img src="/product/ice-jtag/adviceluna2/package/images/microZed.jpg" alt=""/>
  </div>
</section>
```
*/
.package {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 0 2.1875rem; }
  @media (min-width: 768px) {
    .package {
      -ms-flex-direction: row;
          flex-direction: row;
      margin-bottom: 5rem; } }

.package__text {
  -ms-flex-order: 2;
      order: 2; }
  @media (min-width: 768px) {
    .package__text {
      width: 61.26126%;
      -ms-flex-order: 1;
          order: 1; }
      .package__text > *:last-child {
        margin-bottom: 0; } }

.package__image {
  text-align: center;
  margin-bottom: 1rem;
  -ms-flex-order: 1;
      order: 1; }
  @media (min-width: 768px) {
    .package__image {
      width: 38.73874%;
      padding-left: 3.125rem;
      margin-bottom: 0;
      -ms-flex-order: 2;
          order: 2; } }

/*　//////////////////////////////////////////////////
　メイン > RAMScope用packagelr
//////////////////////////////////////////////////　*/
/*
---
name: RAMScope用packagelr
category:
  - components/block
---



```html
<section class="packagelr">
  <div class="packagelr__image">
    <img src="/product/ice-jtag/adviceluna2/packagelr/images/microZed.jpg" alt=""/>
  </div>
  <div class="packagelr__text">
    <h3 class="heading-Lv3 is-noBullet">MicroZed評価キット（Zynq-7000 All Programmable SoC搭載）</h3>
    <p>MicroZed&trade;は、ザイリンクス Zynq&reg;-7000 All Programmable SoC 搭載の低コスト開発ボードです。ユニークなデザインにより、基本的なSoC実験用のスタンドアローン評価ボードとして、また、組み込みシステム・オン・モジュール（SOM）としてキャリアカードと接続しても利用できます。</p>
    <p><a href="foo.html" class="link-outer">メーカー製品ページへ</a></p>
  </div>
</section>
```
*/
.packagelr {
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  -ms-flex-direction: column;
      flex-direction: column;
  margin: 0 0 2.1875rem; }
  @media (min-width: 768px) {
    .packagelr {
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
      margin-bottom: 5rem; } }

.packagelr__text {
  -ms-flex-order: 2;
      order: 2; }
  @media (min-width: 768px) {
    .packagelr__text {
      width: 50%;
      -ms-flex-order: 1;
          order: 1; }
      .packagelr__text > *:last-child {
        margin-bottom: 0; } }

.packagelr__image {
  text-align: center;
  margin-bottom: 1rem;
  -ms-flex-order: 1;
      order: 1; }
  @media (min-width: 768px) {
    .packagelr__image {
      width: 50%;
      margin-bottom: 0;
      -ms-flex-order: 2;
          order: 2; } }
	  
/*　//////////////////////////////////////////////////
　メイン > 製品 > ダウンロードフォーム
//////////////////////////////////////////////////　*/
/*
---
name: ダウンロードフォーム > 希望資料選択
category:
  - components/form
---

```html
<div class="form-document__item">
  <label class="form-document__label"><input type="checkbox" name="foo" value="adviceLUNAⅡ 製品カタログ"><span></span>adviceLUNAⅡ 製品カタログ</label>
  <div class="form-document__wrapper">
    <div class="form-document__wrapper-image"><img src="/product/ice-jtag/adviceluna2/download/images/adviceLuna2-catalog.png" alt=""></div>
    <div class="form-document__wrapper-text">
      <p>デバッグから、計測・分析まで一台のツールで完結。組込みシステム開発を、より効率的に。</p>
      <p>14/10 [3.3MB]</p>
    </div>
  </div>
</div>
```
*/
.form-document__item {
  border: 1px solid #cccccc;
  margin-bottom: 1.5rem; }

.form-document__label {
  color: white;
  display: block;
  background: #c0153f;
  padding: 0.5rem 0 0.5rem 0.5625rem; }
  .form-document__label input[type=checkbox] {
    vertical-align: middle;
    display: none;
    border: none 0;
    outline: none 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; }
    .form-document__label input[type=checkbox] + span {
      vertical-align: middle;
      display: inline-block;
      width: 22px;
      height: 22px;
      background-color: white;
      margin-right: 0.625rem;
      border-radius: 2px;
      -webkit-transform: translateY(-1px);
              transform: translateY(-1px); }
    .form-document__label input[type=checkbox]:checked + span {
      background-image: url(/common/images/input-checked.png);
      background-position: center center;
      background-repeat: no-repeat; }

.form-document__wrapper {
  display: -ms-flexbox;
  display: flex;
  padding: 1.375rem; }

.form-document__wrapper-image {
  width: 27.98354%;
  padding-right: 1.375rem; }

.form-document__wrapper-text {
  width: 72.01646%;
  position: relative; }
  .form-document__wrapper-text > *:last-child {
    margin-bottom: 0;
    position: absolute;
    left: 0;
    bottom: 0; }

/*
---
name: ダウンロードフォーム > 情報入力
category:
  - components/form
---

コメントコメントコメント

```html
<table class="form-input">
  <tr>
    <th class="form-input__heading">会社名<span class="form-input__ruquired">*</span></th>
    <td class="form-input__input-field">
      <input type="text" name="dat[company]" class="form-input__input-full">
    </td>
  </tr>
  <tr>
    <th class="form-input__heading">ご担当者名<span class="form-input__ruquired">*</span></th>
    <td class="form-input__input-field">
      <input type="text" name="dat[name]" placeholder="姓" class="form-input__input-half">
      <input type="text" name="dat[name]" placeholder="名" class="form-input__input-half">
    </td>
  </tr>
  <tr>
    <th class="form-input__heading">都道府県<span class="form-input__ruquired">*</span></th>
    <td class="form-input__input-field">
      <select name="dat[address1]"  class="form-input__input-pref">
        <option value="" selected>選択してください</option>
        <optgroup label="▼北海道・東北">
          <option value="北海道">北海道</option>
          <option value="青森">青森</option>
          <option value="岩手">岩手</option>
          <option value="秋田">秋田</option>
          <option value="山形">山形</option>
          <option value="宮城">宮城</option>
          <option value="福島">福島</option>
        </optgroup>
        <optgroup label="▼甲信越・北陸">
          <option value="新潟">新潟</option>
          <option value="長野">長野</option>
          <option value="富山">富山</option>
          <option value="福井">福井</option>
          <option value="石川県">石川県</option>
          <option value="山梨">山梨</option>
        </optgroup>
      </select>
    </td>
  </tr>
  <tr>
    <th class="form-input__heading">ご希望される対応（複数可）</th>
    <td class="form-input__input-field">
      <label class="form-input__input-label is-full"><input type="checkbox"><span></span>製品カタログ/資料を送って欲しい</label>
      <label class="form-input__input-label is-full"><input type="checkbox"><span></span>訪問説明をして欲しい</label>
      <label class="form-input__input-label is-full"><input type="checkbox"><span></span>デモンストレーションが見たい</label>
      <label class="form-input__input-label is-full"><input type="checkbox"><span></span>概算予算が知りたい</label>
    </td>
  </tr>
  <tr>
    <th class="form-input__heading">製品の使用先</th>
    <td class="form-input__input-field">
      <label class="form-input__input-label"><input type="radio" name="dat[user]"><span></span>自社での使用</label>
      <label class="form-input__input-label"><input type="radio" name="dat[user]"><span></span>他社への提案</label></td>
  </tr>
  <tr>
    <th class="form-input__heading">その他、お問い合わせ内容を自由にご記入ください</th>
    <td class="form-input__input-field">
      <textarea name="dat[note]" class="form-input__input-full"></textarea>
    </td>
  </tr>
  <tr>
    <th class="form-input__heading">アプリケーションノートのサポート範囲</th>
    <td class="form-input__input-field">
      ・ARM純正ツール アプリケーションノートのサポート範囲<br>
      <a href="foo.html">こちらのリンク先ページ</a>の記載内容をご確認いただき、同意の上、ダウンロードへお進みください。
    </td>
  </tr>
</table>
```
*/
.form-input {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #cccccc; }

.form-input__heading {
  font-size: 0.875rem;
  font-weight: normal;
  text-align: left;
  display: block;
  padding-top: 0.9375rem;
  padding-right: 1.25rem; }
  @media (min-width: 768px) {
    .form-input__heading {
      display: table-cell;
      width: 24.5283%;
      padding-top: 0;
      border-bottom: 1px solid #cccccc; } }

.form-input__input-field {
  font-size: 0.875rem;
  display: block;
  padding: 0.5rem 0 0.9375rem;
  border-bottom: 1px solid #cccccc; }
  @media (min-width: 768px) {
    .form-input__input-field {
      display: table-cell;
      width: 75.4717%;
      padding-top: 0.9375rem; } }
  .form-input__input-field input,
  .form-input__input-field select,
  .form-input__input-field textarea {
    font-size: 1rem;
    padding: 0.625rem;
    border: 1px solid #cccccc;
    border-radius: 2px;
    outline: none 0; }
    @media (min-width: 768px) {
      .form-input__input-field input,
      .form-input__input-field select,
      .form-input__input-field textarea {
        font-size: 0.875rem; } }
    .form-input__input-field input:focus,
    .form-input__input-field select:focus,
    .form-input__input-field textarea:focus {
      border-color: #333333; }
    .form-input__input-field input.is-error,
    .form-input__input-field select.is-error,
    .form-input__input-field textarea.is-error {
      background: #f7e4e7;
      border-color: #c0153f; }
  .form-input__input-field input[type=checkbox] {
    vertical-align: middle;
    display: none;
    border: none 0;
    outline: none 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; }
    .form-input__input-field input[type=checkbox] + span {
      vertical-align: middle;
      display: inline-block;
      width: 22px;
      height: 22px;
      background-color: white;
      border: 1px solid #cccccc;
      border-radius: 2px;
      margin-right: 0.625rem;
      margin-bottom: 2px;
      -webkit-transform: translateY(-1px);
              transform: translateY(-1px); }
    .form-input__input-field input[type=checkbox]:checked + span {
      background-image: url(/common/images/input-checked.png);
      background-position: center center;
      background-repeat: no-repeat; }
  .form-input__input-field input[type=radio] {
    display: none;
    background: none;
    border: none 0;
    border-radius: 50%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: none 0; }
    .form-input__input-field input[type=radio] + span {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: white;
      border: 1px solid #cccccc;
      border-radius: 50%;
      margin-right: 0.625rem;
      -webkit-transform: translateY(4px);
              transform: translateY(4px); }
    .form-input__input-field input[type=radio]:checked + span {
      border: 2px solid #c0153f; }
  .form-input__input-field input[name="dat[zip1]"] {
    max-width: 4.875em; }
  .form-input__input-field input[name="dat[zip2]"] {
    max-width: 5.25em; }
  .form-input__input-field textarea {
    height: 150px; }
  .form-input__input-field a,
  .form-input__input-field a:hover,
  .form-input__input-field a:visited {
    color: #c0153f; }

.form-input__ruquired {
  color: #c0153f; }

.form-input__input-full {
  width: 100%; }

.form-input__input-half {
  width: 45%; }

.form-input__input-pref {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 10.375rem;
  background: white url(/common/images/bullet-arrow-bottom.png) 8.8125rem center no-repeat;
  background-size: auto 8px;
  border: 1px solid #cccccc;
  border-radius: 2px; }

.form-input__input-label + .form-input__input-label {
  margin-left: 2em; }

.form-input__input-label.is-full {
  display: block;
  margin-top: 1rem;
  margin-left: 0; }
  .form-input__input-label.is-full:first-child {
    margin-top: 0; }

.form-input__input-label input {
  margin: 0 0.3rem 0 0; }

.captcha__wrapper {
  display: -ms-flexbox;
  display: flex;
  margin: 0 0 0.5rem; }

.captcha__change-image {
  color: white !important;
  text-decoration: none !important;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-align: center;
      align-items: center;
  background: #4d4d4d;
  padding: 0 1.5em;
  margin: 0 0 0 0.5em; }
  .captcha__change-image:hover {
    background: #666666; }

/*
---
name: ボタン
category:
  - components/form
  - components/button_link
---

```html
<input type="submit" value="入力内容を確認する" class="form-input__btn-submit">
```
*/
.form-input__btn-submit {
  color: white;
  font-size: 1rem;
  text-align: center;
  display: block;
  width: 100%;
  background: #c0153f;
  padding: 0.75rem 0;
  border: none 0;
  border-radius: 4px;
  margin: 1.875rem auto 0; }
  @media (min-width: 768px) {
    .form-input__btn-submit {
      max-width: 640px; } }
  .form-input__btn-submit:hover {
    color: white; }

.form-input__error {
  color: #c0153f;
  margin: 0.375rem 0 0; }

/*　//////////////////////////////////////////////////
　サイドバー > ローカルナビ
//////////////////////////////////////////////////　*/
/*
---
name: サイドバー > ローカルナビ > 見出し
category:
  - components/sidebar
  - components/heading
---

```html
<hgroup class="heading-sidebar__wrapper">
  <h2 class="heading-sidebar__Lv1">advice/TRQer サポート</h2>
  <h3 class="heading-sidebar__Lv2">adviceLUNAⅡ</h3>
</hgroup>
```
*/
.heading-sidebar__wrapper {
  margin: 2rem 0 0; }

.heading-sidebar__Lv1 {
  color: white;
  font-size: 1.125rem;
  font-weight: normal;
  background: #c0153f;
  padding: 0.625rem 0 0.625rem 0.8125rem;
  margin: 0; }

.heading-sidebar__Lv2 {
  font-size: 1rem;
  font-weight: normal;
  padding: 0.5rem 0 0.5rem 0.8125rem;
  border: solid 1px #c0153f;
  margin: 0; }

/* ナビゲーション本体 → _nav.scss */
/*　//////////////////////////////////////////////////
　メイン > カラム
//////////////////////////////////////////////////　*/
/*
---
name: PC→4カラム / SP→2カラム
category:
  - layout
---

カラムは、レイアウト用にカラム設定のみを行います。中央寄せなどは、適宜classを追加して適用します。

- PCビューでは4カラム（3カラム以下の場合も、幅25%を維持します）
- スマホビューでは2カラム（1カラムのみ使用の場合も、幅50%を維持します）
- カラム数が多い場合は、自動的に段落ちします
- flexbox使用（.main-column__wrapper → display: flex; flex-wrap: wrap;）

```html
<div class="main-column__wrapper is-4column">
  <div class="main-column__item">
    カラム1
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム2
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム3
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム4
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム5
  <!--/.main-column__item--></div>
<!--/.main-column__wrapper--></div>
```
*/
/*
---
name: PC→3カラム / SP→1カラム
category:
  - layout
---

カラムは、レイアウト用にカラム設定のみを行います。中央寄せなどは、適宜classを追加して適用します。

- PCビューでは3カラム（2カラム以下の場合も、幅33%を維持します）
- スマホビューでは1カラム
- カラム数が多い場合は、自動的に段落ちします
- flexbox使用（.main-column__wrapper → display: flex; flex-wrap: wrap;）

```html
<div class="main-column__wrapper is-3column">
  <div class="main-column__item">
    カラム1
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム2
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム3
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム4
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム5
  <!--/.main-column__item--></div>
<!--/.main-column__wrapper--></div>
```
*/
/*
---
name: PC→2カラム / SP→1カラム
category:
  - layout
---

カラムは、レイアウト用にカラム設定のみを行います。中央寄せなどは、適宜classを追加して適用します。

- PCビューでは2カラム（1カラムのみ使用の場合も、幅50%を維持します）
- スマホビューでは1カラム
- カラム数が多い場合は、自動的に段落ちします
- flexbox使用（.main-column__wrapper → display: flex; flex-wrap: wrap;）

```html
<div class="main-column__wrapper is-2column">
  <div class="main-column__item">
    カラム1
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム2
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム3
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム4
  <!--/.main-column__item--></div>
  <div class="main-column__item">
    カラム5
  <!--/.main-column__item--></div>
<!--/.main-column__wrapper--></div>
```
*/
.main-column__wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 768px) {
    .main-column__wrapper.is-gutter30 {
      margin: 0 -0.9375rem; }
    .main-column__wrapper.is-gutter40 {
      margin: 0 -1.25rem; }
    .main-column__wrapper.is-gutter50, .main-column__wrapper.is-padding50 {
      margin: 0 -1.5625rem; } }
  .main-column__wrapper.is-centered {
    -ms-flex-pack: center;
        justify-content: center; }
    .main-column__wrapper.is-centered .main-column__item {
      width: 100%; }
      @media (min-width: 768px) {
        .main-column__wrapper.is-centered .main-column__item {
          width: auto; } }

@media (min-width: 768px) {
  .is-gutter30 .main-column__item {
    padding: 0 0.9375rem; } }

@media (min-width: 768px) {
  .is-gutter40 .main-column__item {
    padding: 0 1.25rem; } }

@media (min-width: 768px) {
  .is-gutter50 .main-column__item,
  .is-padding50 .main-column__item {
    padding: 0 1.5625rem; } }

.is-4column .main-column__item {
  width: 50%; }
  @media (min-width: 768px) {
    .is-4column .main-column__item {
      width: 25%; } }

.is-3column .main-column__item {
  width: 100%; }
  @media (min-width: 768px) {
    .is-3column .main-column__item {
      width: 33.333%; } }

.is-2column .main-column__item {
  width: 100%; }
  @media (min-width: 768px) {
    .is-2column .main-column__item {
      width: 50%; } }

@media (min-width: 768px) {
  .main-column__item.is-mainColumn {
    width: 74.77477%;
    -ms-flex-order: 2;
        order: 2; } }

@media (min-width: 768px) {
  .main-column__item.is-sidebar {
    width: 25.22523%;
    -ms-flex-order: 1;
        order: 1; } }

.main-column__item.list-arrow__item {
  padding-right: 1rem; }

@media (min-width: 768px) {
  .is-eventList .main-column__item {
    border-right: solid 1px #dddddd; }
    .is-eventList .main-column__item:last-of-type {
      border: none; } }

.is-eventList .main-column__item .heading-Lv3 {
  text-align: center; }

.is-eventList .main-column__item .list-arrow {
  margin-left: 0; }

.add-arrow {
  position: relative; }
  @media (min-width: 768px) {
    .add-arrow {
      margin: 0 5rem 0 0; } }
  .add-arrow::after {
    content: "▼";
    color: #c0153f;
    display: block;
    padding: 1rem 0; }
    @media (min-width: 768px) {
      .add-arrow::after {
        content: "▶";
        padding: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: -3rem; } }

.staticTool-question {
  color: white;
  font-size: 1.5em;
  background: #c0153f;
  padding: 0.6rem 0.5rem 0.5rem 2.5em;
  border-radius: 2px;
  position: relative; }

.staticTool-question__firstLetter {
  display: block;
  color: #c0153f;
  background: white;
  padding: 0 0.3em;
  border-radius: 2px;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem; }

.taticTool-answer {
  *zoom: 1; }
  .taticTool-answer:before, .taticTool-answer:after {
    content: " ";
    display: table; }
  .taticTool-answer:after {
    clear: both; }

.taticTool-answer__heading {
  color: #c0153f;
  font-size: 1.5em;
  padding: 0 1rem 0.5rem 0;
  float: left; }

.taticTool-answer__firstLetter {
  color: white;
  display: inline-block;
  background: #c0153f;
  padding: 0 0.4em;
  margin: 0 0 0 0.5rem;
  border-radius: 2px; }

.dynamic_tool-trqeram__orange {
  color: #ef7601; }

.iframe__wrapper {
  height: 300px;
  height: 70vh;
  padding: 1rem;
  border: 1px solid #cccccc;
  margin: 0 1rem;
  overflow: scroll; }
  @media (min-width: 768px) {
    .iframe__wrapper {
      height: 300px;
      height: 30vh; } }
  .iframe__wrapper iframe {
    width: 100%;
    height: 100%; }

@media (min-width: 768px) {
  .is-corporate_president-text.main-column__item {
    width: 50%; } }

@media (min-width: 768px) {
  .is-corporate_president-photo.main-column__item {
    text-align: right;
    width: 50%; } }

.is-corporate_president-photo.main-column__item span {
  display: inline-block; }

.is-corporate_president-photo__photo {
  text-align: center; }
  @media (min-width: 768px) {
    .is-corporate_president-photo__photo {
      text-align: right; } }
  .is-corporate_president-photo__photo span {
    max-width: 240px; }
  .is-corporate_president-photo__photo img {
    width: auto;
    max-width: 200px; }
    @media (min-width: 768px) {
      .is-corporate_president-photo__photo img {
        max-width: 100%; } }

/*　//////////////////////////////////////////////////
　トップページ用スタイル > キービジュアル（スライダー）
//////////////////////////////////////////////////　*/
/*
.l-heroImage {
    width: 100%;
    //height: 200px;
    padding: 0;
    overflow: hidden;
  @media (min-width: 768px) {
      //height: auto;
  }
}
.heroimage__item {
    max-width: 1110px;
}
.heroImage__wrapper {
    @include clearfix;
    list-style: none;
    width: 9999px;
    padding: 0;
    margin: 0;
}
.heroimage__item {
    float: left;
  img {
      display: block;
      max-width: none;
      width: auto;
      max-height: 200px;
      height: auto;
    @media (min-width: 768px) {
        max-width: 100%;
        max-height: none;
    }
  }
}
*/
.sp-buttons {
  line-height: 1px;
  text-align: center;
  list-style: none;
  padding: 1.25rem 0 0rem;
  margin: 0; }
  @media (min-width: 768px) {
    .sp-buttons {
      padding-bottom: 1.25rem; } }

.sp-button {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #cccccc;
  border: none;
  border-radius: 50%;
  margin: 0 10px 0rem; }
  @media (min-width: 768px) {
    .sp-button {
      width: 10px;
      height: 10px;
      margin-bottom: 0; } }
  .sp-button.sp-selected-button {
    background: #c0153f; }

.sp-arrows {
  max-width: 1142px;
  width: 100%;
  margin: auto;
  max-width: 1310px;
  left: 50% !important;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0); }
  @media (min-width: 768px) {
    .sp-arrows {
      padding: 0 1rem; } }
  .sp-arrows .sp-previous-arrow {
    left: 0.625rem;
    background: url(/common/images/home/slider-btn-prev.png) 0 center no-repeat; }
    @media (min-width: 768px) {
      .sp-arrows .sp-previous-arrow {
        left: 1.25rem; } }
  .sp-arrows .sp-next-arrow {
    right: 0.625rem;
    background: url(/common/images/home/slider-btn-prev.png) 0 center no-repeat; }
    @media (min-width: 768px) {
      .sp-arrows .sp-next-arrow {
        right: 1.25rem; } }

.sp-arrow {
  width: 15px;
  height: 29px; }
  @media (min-width: 768px) {
    .sp-arrow {
      width: 30px;
      height: 57px; } }
  .sp-arrow .sp-previous-arrow {
    left: 0.625rem;
    background: url(/common/images/home/slider-btn-prev.png) 0 center no-repeat; }
    @media (min-width: 768px) {
      .sp-arrow .sp-previous-arrow {
        left: 1.25rem; } }
  .sp-arrow .sp-next-arrow {
    right: 0.625rem;
    background: url(/common/images/home/slider-btn-prev.png) 0 center no-repeat; }
    @media (min-width: 768px) {
      .sp-arrow .sp-next-arrow {
        right: 1.25rem; } }

.heroImg-video__wrapper {
  padding-top: 46.84685%;
  overflow: hidden;
  position: relative; }
  @media (min-width: 768px) {
    .heroImg-video__wrapper {
      width: 100%;
      padding-top: 40.625%;
      margin-bottom: 1.25rem; } }

.heroImg-video__video {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0; }
  @media (min-width: 768px) {
    .heroImg-video__video {
      max-width: none;
      width: 100%; } }

.heroImg-video__preview {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  right: 0; }
  @media (min-width: 768px) {
    .heroImg-video__preview {
      max-width: none;
      width: 100%; } }

.heroImg-video__text-wrapper {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0; }

.heroImg-video__text {
  font-family: "メイリオ", Meiryo, sans-serif;
  max-width: 1142px;
  width: 100%;
  margin: auto; }
  @media (min-width: 768px) {
    .heroImg-video__text {
      padding: 0 1rem; } }

.heroImg-video__text-1stLine,
.heroImg-video__text-2ndLine {
  font-size: 1rem;
  text-align: right;
  margin: 1rem 0 1rem; }
  @media (min-width: 768px) {
    .heroImg-video__text-1stLine,
    .heroImg-video__text-2ndLine {
      font-size: 2.25rem;
      margin: 2rem 0 0; } }
  .heroImg-video__text-1stLine span,
  .heroImg-video__text-2ndLine span {
    color: white;
    line-height: 1;
    display: inline-block;
    background: rgba(192, 21, 63, 0.85);
    padding: 0.4rem 0.3rem 0.4rem 0.5rem; }

@media (min-width: 768px) {
  .heroImg-video__text-2ndLine {
    margin: 1.4rem 0 0; } }

/* 文言変更に伴い削除
  .heroImg-video__text-1stLine {
      font-size: (14/16)*1rem;
      margin: 1rem 0 1rem;
    @media (min-width: 768px) {
        font-size: (26/16)*1rem;
        margin: 1.5rem 0 1.8rem;
    }
  }
  .heroImg-video__text-2ndLine {
      font-size: (18/16)*1rem;
      margin: 0;
    @media (min-width: 768px) {
        font-size: (45/16)*1rem;
    }
  }
  */

/* 画面幅追従仕様変更(2017/12/21) */
    .heroImg-video__wrapper{padding-top:0 !important;text-align:center;background:rgba(211,90,120,0.1);}
    .heroImg-video__wrapper .heroImg-video__video,
    .heroImg-video__wrapper .heroImg-video__preview{position:relative;max-width:1110px;width:100%;display:inline-block;vertical-align:top;}
    .heroImg-video__wrapper .heroImg-video__preview{display:none !important;}
    @media screen and (min-width: 1110px) {
        .heroImg-video__link-wrapper{right:calc(50% - 555px + 10px) !important;}
        #sliderArea>ul.slider{padding:0;background:rgba(211,90,120,0.1);}
        #sliderArea>ul.slider>div.slick-list{width:1110px;margin:0 auto;padding:10px 0;background:#D35A78;}
    }

/*　//////////////////////////////////////////////////
　トップページ > 製品リスト
//////////////////////////////////////////////////　*/
.ProductList__wrapper {
  list-style: none;
  padding: 0;
  margin: 0 -10px 1.875rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 768px) {
    .ProductList__wrapper {
      margin: 0 -1rem 2.5rem; } }

.ProductList__item {
  width: 50%;
  padding: 0.5rem 10px 0; }
  @media (min-width: 768px) {
    .ProductList__item {
      width: 25%;
      padding: 2.5rem 1rem 0; } }
  .ProductList__item:nth-child(1), .ProductList__item:nth-child(2) {
    padding-top: 0; }
  @media (min-width: 768px) {
    .ProductList__item:nth-child(1), .ProductList__item:nth-child(2), .ProductList__item:nth-child(3), .ProductList__item:nth-child(4) {
      padding-top: 0; } }
  .ProductList__item a:hover {
    text-decoration: none; }
    .ProductList__item a:hover .ProductList__heading {
      text-decoration: underline; }

.ProductList__heading {
  color: #c0153f;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.33333;
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.25em no-repeat;
  background-size: 6px auto;
  padding: 0 0 0 0.75em;
  margin: 1rem 0 0.3125rem; }
  @media (min-width: 768px) {
    .ProductList__heading {
      font-size: 1.125rem;
      background-position-y: 0.2em;
      background-size: auto;
      padding-left: 1em;
      margin-bottom: 0.5625rem; } }
  .ProductList__heading:first-child {
    margin-top: 0; }

.ProductList__descWrapper {
  padding: 0; }
  @media (min-width: 768px) {
    .ProductList__descWrapper {
      min-height: 71px;
      padding-left: 5rem; }
      .is-OSCARator .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-OSCARator.jpg) 0 0 no-repeat; }
      .is-sifive .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-sifive.jpg) 0 0 no-repeat; }
      .is-lis .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-lsi.jpg) 0 0 no-repeat; }
      .is-evrica .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-evrica.jpg) 0 0 no-repeat; }
      .is-rezolver .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-ReZolver.jpg) 0 0 no-repeat; }
      .is-ice_jtag .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-ice_jtag.jpg) 0 0 no-repeat; }
      .is-arm_tool .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-arm_tool.jpg) 0 0 no-repeat; }
      .is-netimpress .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-netimpress.jpg) 0 0 no-repeat; }
      .is-automotive .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-automotive.jpg) 0 0 no-repeat; }
      .is-dynamic .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-dynamic.jpg) 0 0 no-repeat; }
      .is-static .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-static.jpg) 0 0 no-repeat; }
      .is-eps .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-eps.jpg) 0 0 no-repeat; }
      .is-tcs .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-tcs.jpg) 0 0 no-repeat; }
      .is-lap .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-lap.jpg) 0 0 no-repeat; }
      .is-middleware .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-middleware.jpg) 0 0 no-repeat; }
      .is-entrusted .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-entrusted.jpg) 0 0 no-repeat; }
      .is-ts .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-ts.jpg) 0 0 no-repeat; }
      .is-isdb .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-isdb.jpg) 0 0 no-repeat; }
      .is-satellite_area_prus .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-satellite_area_prus.jpg) 0 0 no-repeat; }
      .is-mpeg2_ts .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-mpeg2_ts.jpg) 0 0 no-repeat; }
      .is-ippat .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-ippat.jpg) 0 0 no-repeat; }
      .is-dde .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-dde.jpg) 0 0 no-repeat; }
      .is-TRQerS .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-TRQerS.jpg) 0 0 no-repeat; }
      .is-NETIMPRESS_next .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-NETIMPRESS_next.jpg) 0 0 no-repeat; }
      .is-G-NETIMPRESS .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-G-NETIMPRESS.jpg) 0 0 no-repeat; }
      .is-RAM_monitor_for_automotive .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-RAM_monitor_for_automotive.jpg) 0 0 no-repeat; } }
      .is-NETIMPRESS_avant .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-NETIMPRESS_avant.jpg) 0 0 no-repeat; }
      .is-NETIMPRESS_air .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-NETIMPRESS_air.jpg) 0 0 no-repeat; }
      .is-microTRACER .ProductList__descWrapper {
        background: url(/common/images/home/ProductList-microtracer.jpg) 0 0 no-repeat; }


.ProductList__descText {
  color: #333333;
  margin: 0; }

/*　//////////////////////////////////////////////////
　トップページ > ソリューションリスト
//////////////////////////////////////////////////　*/
.SolutionList__wrapper {
  list-style: none;
  padding: 0;
  margin: 0 -0.8125rem 0.9375rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
  @media (min-width: 768px) {
    .SolutionList__wrapper {
      margin-bottom: 2.3125rem; } }

.SolutionList__item {
  width: 50%;
  padding: 0.9375rem 0.8125rem 0; }
  @media (min-width: 768px) {
    .SolutionList__item {
      width: 25%;
      padding-top: 2.3125rem; } }
  .SolutionList__item:nth-child(1), .SolutionList__item:nth-child(2) {
    padding-top: 0; }
  @media (min-width: 768px) {
    .SolutionList__item:nth-child(1), .SolutionList__item:nth-child(2), .SolutionList__item:nth-child(3), .SolutionList__item:nth-child(4) {
      padding-top: 0; } }
  .SolutionList__item a:hover {
    text-decoration: none; }
    .SolutionList__item a:hover .SolutionList__heading {
      text-decoration: underline; }

.SolutionList__heading {
  color: #c0153f;
  font-size: 0.875rem;
  font-weight: normal;
  line-height: 1.33333;
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.25em no-repeat;
  background-size: 6px auto;
  padding: 0 0 0 0.75em;
  margin: 1rem 0 0.3125rem; }
  @media (min-width: 768px) {
    .SolutionList__heading {
      font-size: 1.125rem;
      background-position-y: 0.2em;
      background-size: auto;
      padding-left: 1em;
      margin-bottom: 0.5625rem; } }
  .SolutionList__heading:first-child {
    margin-top: 0; }

.SolutionList__img {
  margin: 0 0 0.25rem; }
  @media (min-width: 768px) {
    .SolutionList__img {
      margin-bottom: 0.6em; } }

.SolutionList__descText {
  color: #333333;
  margin: 0; }

/*　//////////////////////////////////////////////////
　トップページ > ニュース・お知らせ
//////////////////////////////////////////////////　*/
.NewsList__wrapper {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem; }
  @media (min-width: 768px) {
    .NewsList__wrapper {
      margin-bottom: 2.5rem; } }

.NewsList__item {
  padding: 0 0 0.625rem;
  border-bottom: 1px solid #dedede;
  margin: 0 0 0.6875rem; }
  .NewsList__item a:hover .NewsList__desc {
    color: #c0153f;
    text-decoration: underline; }

.NewsList__date {
  color: #333333;
  display: inline-block;
  width: 90px;
  padding: 5px 0 0; }
  @media (min-width: 768px) {
    .NewsList__date {
      display: block;
      width: 109px;
      float: left; } }

.NewsList__tag {
  color: white;
  font-size: 0.6875rem;
  text-align: center;
  display: inline-block;
  width: 165px;
  background: #c0153f;
  padding: 2px 0; }
  @media (min-width: 768px) {
    .NewsList__tag {
      font-size: 0.75rem;
      display: block;
      width: 149px;
      padding: 5px 0;
      float: left; } }

.NewsList__desc {
  color: #333333;
  display: block;
  width: 100%;
  padding: 5px 0 0;
  margin: 0; }
  @media (min-width: 768px) {
    .NewsList__desc {
      width: auto;
      margin-left: 288px; } }

.NewsLink__wrapper {
  text-align: center;
  padding: 0;
  margin: 0; }

a.NewsLink__btn {
  color: #c0153f;
  display: inline-block;
  width: 100%;
  padding: 0.4375rem 0;
  border: 1px solid #c6c6c6;
  margin: 0 0 1.375rem; }
  @media (min-width: 768px) {
    a.NewsLink__btn {
      width: 542px;
      padding: 0.5rem 0;
      margin-bottom: 2.5rem; } }

.NewsLink__btn-bullet {
  background: url(/common/images/ProductList-heading-bullet.png) 0 0.2em no-repeat;
  background-size: 5px auto;
  padding: 0 0 0 0.75em; }
  @media (min-width: 768px) {
    .NewsLink__btn-bullet {
      background-position-y: 0.22em;
      background-size: 6px auto;
      padding-left: 1em; } }

.home-message {
  color: #c0153f;
  font-size: 1rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  padding: 0.8rem;
  border: solid 2px #c0153f;
  margin-bottom: 2.8125rem; }
  @media (min-width: 768px) {
    .home-message {
      font-size: 1.1875rem;
      letter-spacing: 0;
      line-height: 1.5;
      text-align: center; } }
  @media (min-width: 768px) {
    .home-message span {
      display: inline-block; } }

.home-message2 {
  font-size: 1rem;
  letter-spacing: 0.05rem;
  line-height: 1.4;
  padding: 0.8rem;
  border: solid 2px #c0153f;
  margin-bottom: 2.8125rem; }
  @media (min-width: 768px) {
    .home-message {
      letter-spacing: 0;
      line-height: 1.5;
      text-align: center; } }
  @media (min-width: 768px) {
    .home-message span {
      display: inline-block; } }


.home-message2 span{
  font-size: 1.3rem; 
  font-weight: bold;}




/*　//////////////////////////////////////////////////
　トップページ > 受託開発 > IoTデバイス開発支援ソリューション
//////////////////////////////////////////////////　*/
.iotcolumn{
     width: 100%;
     margin: 0 auto;
     padding: 0;
 }
 .iotcolumn .iotbox{
     width: 24%;
     float: left;
     padding: 0;
     margin: 0 5px;
 }
 .iotcolumn .iotwrap{
     padding: 10px;
 }

 .iotcolumn .iotmidashi{
     font-weight: bold;
     text-align: center;
     padding: 5px 0;
     margin: 0 0 5px 0;
     height: 4em;
     vertical-align: middle;
 }
.iotcolumn .iotmidashi2{
     font-size: 1.3em;
     font-weight: bold;
     text-align: center;
     color: #ffffff;
     padding: 5px 0;
     margin: 0;
 }
 .iotcr01{
     background-color: #d0e7f8;
 }
 .iotcr02{
     background-color: #fce3c6;
 }
 .iotcr03{
     background-color: #cce6cf;
 }
 .iotcr04{
     background-color: #9acef0;
 }
 .iotcr05{
     background-color: #21ade5;
 }
 .iotcr06{
     background-color: #f8c389;
 }
 .iotcr07{
     background-color: #f39938;
 }
 .iotcr08{
     background-color: #8fcb9c;
 }
 .iotcr09{
     background-color: #0ba95f;
 }
 .iotcolumn .iotwrap ul{
     list-style-type: none;
     height: 10em;
     padding: 0;
 }
 .iotcolumn .iotwrap li{
     font-size: 1.2em;
 }
 .iotcolumn .iotwrap li::before {
  content: '\2022';
  color: #727171;
  padding: 0 8px 0 0;
}
@media screen and (min-width: 769px) and (max-width: 1050px) {
    .iotcolumn{
	 width: 100%;
     }
     .iotcolumn .iotbox{
	 width: 23%;
     }
}
@media (max-width: 768px) {
    .iotcolumn .iotbox{
	 width: 100%;
	 margin-bottom: 10px;
     }
     .iotcolumn .iotwrap img{
	 width: 100%;
     }
}


/*　//////////////////////////////////////////////////
　タグライン表示用メイリオフォント指定
//////////////////////////////////////////////////　*/

/*
---
name: 一時的なメイリオフォントの使用
---

```html
<p class="tagline-meiryo">Our insight, your value</p>
```
*/
p.tagline-meiryo {font-family: "メイリオ", Meiryo, sans-serif; }

/*　//////////////////////////////////////////////////
　地図googole map用　事業拠点
//////////////////////////////////////////////////　*/
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/*　//////////////////////////////////////////////////
　topics
//////////////////////////////////////////////////　*/

.topics {

}

.topics_one, .topics_two, .topics_three {
  margin-top: 20px;
  width: 22%;
  float: left;
  margin-right: 4%;
}

.topics_four {
  margin-top: 20px;
  width: 22%;
  float: left;
  margin-right: 0;
}

@media (max-width: 768px) {
.topics_one, .topics_three {
  width: 48%;
  margin-right: 4%; }
.topics_two, .topics_four {
  width: 48%;
  margin-right: 0; }
}

@media (max-width: 500px) {
.topics_one, .topics_two, .topics_three, .topics_four {
  width: 100%;
  margin-right: 0; }
}

#TopicsArea h4 {
  margin: 10px 0;
}

#TopicsArea a:hover img {
  opacity: 0.7;
}

#TopicsArea p {
  margin-bottom: 10px;
}



/*　//////////////////////////////////////////////////
　動画見せ方変更（20/06/05）
.heroImg-video__wrapper を　.heroImg-video__wrapper2 に変更
.heroImg-video__video を　.heroImg-video__video2 に変更
//////////////////////////////////////////////////　*/



.heroImg-video__wrapper2 {
  padding-top:0 !important;
  width: 100%;
  height: 525px;
  overflow: hidden;
  position: relative;
  text-align:center;
  background:rgba(211,90,120,0.1); }

.heroImg-video__video2 {
  width:100%;
  height: auto;
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  margin: 0 auto; }

  @media (max-width: 1110px) {
.heroImg-video__video2 {
  width:1110px; } }