@charset "UTF-8";
@font-face {
  font-family: "PT Sans";
  font-weight: 400;
  font-style: normal;
  src: url("../font/PT_Sans-Web-Regular.woff2") format("woff2"), url("../font/PT_Sans-Web-Regular.woff") format("woff");
}

/* #base
   -------------------------------------------------------------------------- */
html {
  font-size: 100%;
  line-height: 1.6;
}

body {
  background-color: #fff;
  color: #000;
}

main {
  overflow-x: hidden;
}

/**
 * `dt`と`dd`の左端を揃えます。
 */
dd {
  margin-left: 0;
}

/* #Icon
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont.eot");
  src: url("../font/iconfont.eot?#iefix") format("eot"), url("../font/iconfont.woff") format("woff"), url("../font/iconfont.ttf") format("truetype"), url("../font/iconfont.svg#iconfont") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* 汎用的なアイコンフォントです。 */
.sw-Icon {
  display: inline-block;
}

.sw-Icon:before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
}

.sw-Icon-arrow_drop_down:before {
  content: "\EA01";
}

.sw-Icon-arrow_left:before {
  content: "\EA02";
}

.sw-Icon-arrow_right:before {
  content: "\EA03";
}

.sw-Icon-calender:before {
  content: "\EA04";
}

.sw-Icon-chevron-down:before {
  content: "\EA05";
}

.sw-Icon-chevron-left:before {
  content: "\EA06";
}

.sw-Icon-chevron-right:before {
  content: "\EA07";
}

.sw-Icon-chevron-up:before {
  content: "\EA08";
}

.sw-Icon-circle_arrow:before {
  content: "\EA09";
}

.sw-Icon-close:before {
  content: "\EA0A";
}

.sw-Icon-cloud-download:before {
  content: "\EA0B";
}

.sw-Icon-external-link:before {
  content: "\EA0C";
}

.sw-Icon-filter_none:before {
  content: "\EA0D";
}

.sw-Icon-fullscreen:before {
  content: "\EA0E";
}

.sw-Icon-fullscreen_exit:before {
  content: "\EA0F";
}

.sw-Icon-instagram:before {
  content: "\EA10";
}

.sw-Icon-link:before {
  content: "\EA11";
}

.sw-Icon-mail:before {
  content: "\EA12";
}

.sw-Icon-mail2:before {
  content: "\EA13";
}

.sw-Icon-pause:before {
  content: "\EA14";
}

.sw-Icon-pdf:before {
  content: "\EA15";
}

.sw-Icon-pin:before {
  content: "\EA16";
}

.sw-Icon-play_arrow:before {
  content: "\EA17";
}

.sw-Icon-search:before {
  content: "\EA18";
}

.sw-Icon-slide_arrow_left:before {
  content: "\EA19";
}

.sw-Icon-slide_arrow_right:before {
  content: "\EA1A";
}

.sw-Icon-slider-bar:before {
  content: "\EA1B";
}

.sw-Icon-sphere:before {
  content: "\EA1C";
}

.sw-Icon-triangle:before {
  content: "\EA1D";
}

.sw-Icon-volume_down:before {
  content: "\EA1E";
}

.sw-Icon-volume_mute:before {
  content: "\EA1F";
}

.sw-Icon-volume_off:before {
  content: "\EA20";
}

.sw-Icon-volume_up:before {
  content: "\EA21";
}

/* グローバルテンプレートのスタイル（/_assets/css/template.css）を上書きします。 */
/*
 * IEのバグ対応のため指定していたが、SVGだけ拡大されてしまうためリセットする。
 * 一定の条件下ではアスペクト比が崩れる崩れるおそれがある。
 * https://hail2u.net/blog/webdesign/max-width-and-svg-on-ie11-and-below.html
 */
main [src$=".svg"],
main [data$=".svg"] {
  width: auto;
}

.st-SearchButton:focus,
.st-GlobalNav_SearchClose:focus,
.st-GlobalSiteNav_Link:focus {
  outline: 0;
  box-shadow: none;
}

.st-SearchButton.focus-ring:focus,
.st-GlobalNav_SearchClose.focus-ring:focus,
.st-GlobalSiteNav_Link.focus-ring:focus {
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-Breadcrumb_List {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.st-Breadcrumb_Item {
  float: none;
  white-space: nowrap;
}

.st-Breadcrumb_Item:last-child {
  overflow: hidden;
  padding-right: 12.5rem;
  text-overflow: ellipsis;
}

.st-GlobalNav_Area,
.st-GlobalSiteNav_SubArea {
  z-index: 10000;
}

.st-GlobalNav_NavClose[aria-hidden="false"],
.st-GlobalNav_SearchClose {
  z-index: 100000;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalHeader_Buttons-devision {
    width: 600px !important;
  }
}

.st-GlobalSiteNav_SubLinkTitle:not(a):hover,
.st-GlobalSiteNav_SubLinkTop:not(a):hover {
  text-decoration: none;
}

.st-GlobalSiteNav_SubLinkTitle {
  font-weight: 600;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_SubLinkTitle + .st-GlobalSiteNav_SubLinkTitle {
    margin-top: 2.125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav .st-GlobalSiteNav_SubList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: -1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-products + .st-GlobalSiteNav_SubArea .l-Grid_Item-9of12Lg .st-GlobalSiteNav_SubItem,
  [id="st-DropNav1"] .l-Grid_Item:nth-of-type(2) .st-GlobalSiteNav_SubItem {
    width: 33.33333%;
  }
  .st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-company + .st-GlobalSiteNav_SubArea .st-GlobalSiteNav_SubItem {
    width: 33.33333%;
  }
  .st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-news + .st-GlobalSiteNav_SubArea .st-GlobalSiteNav_SubItem {
    width: 25%;
  }
  .st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-inquiry + .st-GlobalSiteNav_SubArea .l-Grid_Item-9of12Lg .st-GlobalSiteNav_SubItem {
    width: 33.33333%;
  }
  .st-GlobalSiteNav_SubItem::before {
    font-size: 10px;
    -webkit-transform: scale3d(0.9, 0.9, 1) translate3d(5px, 5px, 0);
            transform: scale3d(0.9, 0.9, 1) translate3d(5px, 5px, 0);
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubList {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: -1.875rem;
    margin-left: 0;
  }
  [id="st-DropNav2"] .st-DropNav_SubList {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: -2.8125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav {
    margin-left: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav .st-DropNav_SubItem {
    padding-left: 0.9375rem;
  }
  [id="st-DropNav1"] .l-Grid_Item:nth-of-type(2) .st-DropNav_SubItem {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  [id="st-DropNav2"] .l-Grid_Item:nth-of-type(2) .st-DropNav_SubItem {
    width: auto;
  }
  .st-DropNav_SubItem::before {
    font-size: 10px;
    -webkit-transform: scale3d(0.7, 0.7, 1) translate3d(7px, 7px, 0);
            transform: scale3d(0.7, 0.7, 1) translate3d(7px, 7px, 0);
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubList {
    margin-left: 0;
    padding-left: 0 !important;
  }
}

@media print, screen and (min-width: 1024px) {
  [id="st-DropNav2"] .st-DropNav_SubLink {
    margin-right: 3.75rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_PcButtonArea.st-DropNav_PcButton-devider::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 19px;
    margin-right: 14px;
    margin-left: 20px;
    background-color: #e6e6e6;
  }
}

.st-GlobalNav_Area {
  overflow-x: hidden;
}

.st-GlobalNav_Area {
  height: 100vh;
}

.st-GlobalSiteNav_SubLinkExternalA,
.st-DropNav_SubLinkExternalA,
.st-DrawerNav_TriggerExternalA,
.st-DrawerNav_DrawerIconExternalA {
  display: inline-block;
  vertical-align: middle;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-GlobalSiteNav_SubLinkExternalA::before,
.st-DropNav_SubLinkExternalA::before,
.st-DrawerNav_TriggerExternalA::before,
.st-DrawerNav_DrawerIconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

@media print, screen and (min-width: 768px) {
  .st-GlobalSiteNav_SubLinkExternalA::before,
  .st-DropNav_SubLinkExternalA::before,
  .st-DrawerNav_TriggerExternalA::before,
  .st-DrawerNav_DrawerIconExternalA::before {
    top: -0.4em;
  }
}

.st-GlobalSiteNav_SubLinkExternalB,
.st-DropNav_SubLinkExternalB,
.st-DrawerNav_TriggerExternalB,
.st-DrawerNav_DrawerIconExternalB {
  display: inline-block;
  vertical-align: middle;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-GlobalSiteNav_SubLinkExternalB::before,
.st-DropNav_SubLinkExternalB::before,
.st-DrawerNav_TriggerExternalB::before,
.st-DrawerNav_DrawerIconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

@media print, screen and (min-width: 768px) {
  .st-GlobalSiteNav_SubLinkExternalB::before,
  .st-DropNav_SubLinkExternalB::before,
  .st-DrawerNav_TriggerExternalB::before,
  .st-DrawerNav_DrawerIconExternalB::before {
    top: -0.4em;
  }
}

.st-DrawerNav_TriggerExternalA,
.st-DrawerNav_TriggerExternalB {
  margin-left: 0.3125rem;
}

.st-DrawerNav_DrawerIconExternalA,
.st-DrawerNav_DrawerIconExternalB {
  margin-left: 0.375rem;
}

.st-GlobalSiteNav_SubAreaInner {
  display: block !important;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_SubLinkTop {
    height: 6.125rem;
    line-height: 6.125rem;
  }
}

.st-GlobalNav_NavClose[aria-hidden="false"] {
  top: 119px;
}

.st-GlobalNav_RegionClose {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav_RegionClose {
    display: none;
  }
  .st-GlobalNav_RegionClose[aria-hidden="false"] {
    display: block;
    position: absolute;
    top: 7.4375rem;
    right: 15px;
    z-index: 100000;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
}

.st-GlobalNav_RegionCloseIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
}

:root .st-GlobalNav_RegionCloseIcon {
  top: -0.5px\0;
  left: -0.5px\0;
}

.st-GlobalNav_RegionCloseIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  display: block;
  position: relative;
  font-size: 0.75rem;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .st-AllowCookie_Show .st-GlobalFooter_PageTop:not(.st-GlobalFooter_PageTop-static) {
    bottom: 170px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Show .st-GlobalFooter_PageTop:not(.st-GlobalFooter_PageTop-static) {
    bottom: 100px;
  }
}

@media print, screen and (min-width: 768px) {
  .st-AllowCookie_Show .st-GlobalFooter_PageTop.st-GlobalFooter_PageTop-static {
    bottom: 256px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Show .st-GlobalFooter_PageTop.st-GlobalFooter_PageTop-static {
    bottom: 100px;
  }
}

/**
 * sw-(SiteWide)...サイト共通の小さなパーツ
 * st-(Structure)...サイト共通のレイアウト
 */
/*
---
name: sw-AccordionA
namespace: sw-
category: InteractiveComponent
id: ACC-1
---

<span class="sw-Label">ACC-1</span>

```jade
.sw-AccordionA
  button.sw-AccordionA_Tab(type="button")
    | Belgium
    span.sw-AccordionA_TabIcon(aria-hidden="true")
  .sw-AccordionA_Panel
    ul.office-BoxA
      li.office-BoxA_Item
        h2.office-BoxA_Country Great Britain
        p.office-BoxA_CompanyName KYOCERA Fineceramics Ltd.
        p.office-BoxA_Text
          | Prospect House, Archipelago

          br
          | Lyon Way, Frimley

          br
          | Surrey GU16 7ER
        p.office-BoxA_Text
          | Phone: +44 (0)1276 - 69 34 50
          br
          | Fax: +44 (0)1276 - 69 34 60
        a.office-BoxA_Link(href="#") http://www.xxxx.com/hogehoge/hogehoge/hogehoge/hogehoge/hogehoge
          span.office-BoxA_IconExternal(aria-hidden="true")
        a.office-BoxA_Mail(href="mailto:salessupport@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText salessupport@kyocera.de/hogehoge/hogehoge/hogehoge/hogehoge
        p.office-BoxA_Text Contact person: Jens Wittau
  button.sw-AccordionA_Tab(type="button")
    | Finland
    span.sw-AccordionA_TabIcon(aria-hidden="true")
  .sw-AccordionA_Panel
    ul.office-BoxA
      li.office-BoxA_Item
        h2.office-BoxA_Country Germany
        p.office-BoxA_CompanyName KYOCERA Fineceramics GmbH
        ul.office-BoxA_Grid
          li.office-BoxA_GridItem
            p.office-BoxA_Text
              | Fritz-Müller-Straße 27
              br
              | 73730 Esslingen
            p.office-BoxA_Text
              | Phone: +49 (0)711 - 93 93 4-0
              br
              | Fax: +49 (0)711 - 93 93 4-950
            a.office-BoxA_Link(href="#" target="_blank") http://www.xxxx.com
              span.office-BoxA_IconExternalB(aria-hidden="true")
            a.office-BoxA_Mail(href="mailto:info@kyocera.de")
              span.office-BoxA_MailIcon(aria-hidden="true")
              span.office-BoxA_MailText info@kyocera.de
            p.office-BoxA_Text Contact person: Jens Wittau
          li.office-BoxA_GridItem
            p.office-BoxA_Text
              | Hammfelddamm 6
              br
              | 41460 Neuss
            p.office-BoxA_Text
              | Phone: +49 (0)2131 - 16 37-0
              br
              | Fax: +49 (0)2131 - 16 37-150
            a.office-BoxA_Link(href="#") http://www.xxxx.com
            a.office-BoxA_Mail(href="mailto:info@kyocera.de")
              span.office-BoxA_MailIcon(aria-hidden="true")
              span.office-BoxA_MailText info@kyocera.de
            p.office-BoxA_Text Contact person: Jens Wittau
```
*/
.sw-AccordionA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.sw-AccordionA_Tab {
  display: block;
  vertical-align: middle;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 1.375rem 2.125rem 1.25rem 2rem;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition-duration: 0.3s;
  transition-property: background-color;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media print, screen and (min-width: 768px) {
  .sw-AccordionA_Tab {
    padding: 1.6875rem 3.25rem 1.5625rem 3rem;
    font-size: 1.25rem;
  }
}

.sw-AccordionA_Tab[type="button"], .sw-AccordionA_Tab[type="reset"], .sw-AccordionA_Tab[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-AccordionA_Tab:focus {
  outline: 0;
  box-shadow: 0;
}

.sw-AccordionA_Tab.focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

@media print, screen and (min-width: 1024px) {
  .sw-AccordionA_Tab:hover {
    background-color: #fbf2f1;
  }
}

.sw-AccordionA_Tab[aria-expanded="true"] {
  border-bottom-color: transparent;
}

.sw-AccordionA_Panel[aria-hidden="false"] + .sw-AccordionA_Tab {
  margin-top: 2.5rem;
}

.sw-AccordionA_Panel[aria-hidden="true"] + .sw-AccordionA_Tab {
  border-top-color: transparent;
}

.sw-AccordionA_Tab::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.625rem;
  width: 0.6875rem;
  height: 0.0625rem;
  margin: auto;
  border-top: 1px solid #df0523;
}

@media print, screen and (min-width: 768px) {
  .sw-AccordionA_Tab::before {
    left: 1.6875rem;
  }
}

.sw-AccordionA_TabIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  right: 0.5rem;
  bottom: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
  font-size: 0.5em;
  border: 1px solid #dadada;
  border-radius: 50%;
  background-color: #fff;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .sw-AccordionA_TabIcon {
    right: 1.3125rem;
    width: 1.9375rem;
    height: 1.9375rem;
  }
}

.sw-AccordionA_Tab[aria-expanded="true"] .sw-AccordionA_TabIcon {
  background-color: #f2f4f6;
}

.sw-AccordionA_TabIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .sw-AccordionA_TabIcon::before {
    font-size: 0.6em;
  }
}

.sw-AccordionA_Tab[aria-expanded="true"] .sw-AccordionA_TabIcon::before {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.sw-AccordionA_Panel {
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-property: margin;
}

.sw-AccordionA_Panel[aria-hidden="true"] {
  visibility: hidden;
  overflow: hidden;
  height: 0;
  margin-top: -0.625rem;
  padding-top: 0.625rem;
}

.sw-AccordionA_Panel[aria-hidden="false"] {
  visibility: visible;
  overflow: visible;
  height: auto;
  margin-top: 0.625rem;
  padding: 0 0 0 2.1875rem;
}

@media print, screen and (min-width: 768px) {
  .sw-AccordionA_Panel[aria-hidden="false"] {
    padding-left: 5rem;
  }
}

.sw-AccordionA_Panel > :last-child {
  margin-bottom: 0;
}

/*
---
name: sw-Bold
namespace: sw-
category: Text
id: TXT-6
---

<span class="sw-Label">TXT-6</span>

`<b>`で使うスタイルです。注意だけを引きたい場合に使うキーワードや製品名などに使用します。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from
  b.sw-Bold  the vehicle’s main wiring harness.
```
*/
.sw-Bold {
  font-weight: 700;
}

/*
---
name: sw-Box
namespace: sw-
category: Block
id: BOX-1
---

<span class="sw-Label">BOX-1</span>

背景色ありBOX


```jade
.sw-Box
  | 背景色ありBOX
```
*/
.sw-Box {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding: 1.875rem 2.5rem;
  background-color: #f2f4f6;
}

/*
---
name: sw-BoxA
namespace: sw-
category: Block
id: [BOX-4A, BOX-4B]
---

<span class="sw-Label">BOX-4A</span>

Productsで使用される製品リストです。

- ボタンでページに遷移します（クリック範囲はボタンのみ）

横幅はタブレットから以下のパターンで変更できます。

- `.sw-BoxA-col1to11`
- `.sw-BoxA-col2to10`
- `.sw-BoxA-col3to9`
- `.sw-BoxA-col4to8`
- `.sw-BoxA-col5to7`
- `.sw-BoxA-col6to6`
- `.sw-BoxA-col7to5`
- `.sw-BoxA-col8to4`
- `.sw-BoxA-col9to3`
- `.sw-BoxA-col10to2`
- `.sw-BoxA-col11to1`

```jade
ul.sw-BoxA.sw-BoxA-col6to6
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading Automotive
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Kyocera have been developing and manufacturing photovoltaic modules for nearly 45 years. Our modules
        ul.sw-BoxA_ListUnorder
          li Head light, daytime running light
          li Back light, turning light
        a.sw-BoxA_more(href="/products/semiconductor_components/led_lighting/automotive_led.html") More Details
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading General lighting
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Kyocera have been developing and manufacturing photovoltaic modules for nearly 45 years. Our modules
        ul.sw-BoxA_ListUnorder
          li Street light
          li Flash light
          li Indoor lighting
          li Stage lighting
        a.sw-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
          span.sw-BoxA_moreExternal(aria-hidden="true")
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading UV lighting
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Kyocera have been developing and manufacturing photovoltaic modules for nearly 45 years. Our modules
        p.sw-BoxA_Text Kyocera have been developing and manufacturing
          a.sw-BoxA_Link(href="#")  photovoltaic modules
            span.sw-BoxA_LinkExternalA(aria-hidden="true")
          |  for nearly 45 years. Our modules
        p.sw-BoxA_Text Kyocera have been developing and manufacturing
          a.sw-BoxA_Link(href="#")  photovoltaic modules
            span.sw-BoxA_LinkExternalB(aria-hidden="true")
          |  for nearly 45 years. Our modules
        p.sw-BoxA_Text Kyocera have been developing and manufacturing
          a.sw-BoxA_Link(href="#")  photovoltaic modules
          |  for nearly 45 years. Our modules
        ul.sw-BoxA_ListUnorder
          li UV hardening (printing industry)
          li Purification
          li Sensing
          li Sterilization
        a.sw-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
          span.sw-BoxA_moreExternalB(aria-hidden="true")
```

<span class="sw-Label">BOX-4B</span>

```jade
ul.sw-BoxA.sw-BoxA-col4to8
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading Glow Plugs
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Heating devices used to aid the starting of diesel engines
        ul.sw-BoxA_ListUnorder
          li Rapid heat up
          li High temperature durability
          li High operating temperature range
          li Long lifetime
          li Robust
        a.sw-BoxA_more(href="/products/semiconductor_components/led_lighting/automotive_led.html") More Details
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading Igniters for Cabin Heaters
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Ignition heaters and flame sensors are used for cabin heaters in cold climates
        ul.sw-BoxA_ListUnorder
          li Rapid heat up
          li High temperature durability
          li High operating temperature range
          li Long lifetime
          li Robust
        a.sw-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
          span.sw-BoxA_moreExternal(aria-hidden="true")
  li.sw-BoxA_Item
    .sw-BoxA_Box
      .sw-BoxA_Head
        span.sw-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt="")
      .sw-BoxA_Body
        h3.sw-BoxA_Heading Heaters for Oxygen Sensors
        p.sw-BoxA_Lead A good choice from all points of view
        p.sw-BoxA_Text Can activate oxygen sensors immediately after the engine starts, which detect oxygen concentration in the exhaust gas of vehicles
        ul.sw-BoxA_ListUnorder
          li Rapid heat up
          li High temperature durability
          li High operating temperature range
          li Long lifetime
          li Robust
        a.sw-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
          span.sw-BoxA_moreExternalB(aria-hidden="true")
```
*/
.sw-BoxA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

.sw-BoxA_Item {
  padding-bottom: 1.875rem;
}

.sw-BoxA_Item:nth-of-type(n + 2) {
  padding-top: 1.875rem;
  border-top: 1px solid #dadada;
}

.sw-BoxA_Box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -2.125rem;
}

.sw-BoxA_Head {
  width: 100%;
  padding-left: 2.125rem;
}

@media print, screen and (min-width: 768px) {
  .sw-BoxA-col1to11 .sw-BoxA_Head {
    width: 8.33333%;
  }
  .sw-BoxA-col2to10 .sw-BoxA_Head {
    width: 16.66667%;
  }
  .sw-BoxA-col3to9 .sw-BoxA_Head {
    width: 25%;
  }
  .sw-BoxA-col4to8 .sw-BoxA_Head {
    width: 33.33333%;
  }
  .sw-BoxA-col5to7 .sw-BoxA_Head {
    width: 41.66667%;
  }
  .sw-BoxA-col6to6 .sw-BoxA_Head {
    width: 50%;
  }
  .sw-BoxA-col7to5 .sw-BoxA_Head {
    width: 58.33333%;
  }
  .sw-BoxA-col8to4 .sw-BoxA_Head {
    width: 66.66667%;
  }
  .sw-BoxA-col9to3 .sw-BoxA_Head {
    width: 75%;
  }
  .sw-BoxA-co10to2 .sw-BoxA_Head {
    width: 83.33333%;
  }
  .sw-BoxA-col11to1 .sw-BoxA_Head {
    width: 91.66667%;
  }
}

.sw-BoxA_Image {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.sw-BoxA_Image > img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.sw-BoxA_Body {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0.8125rem;
  padding-left: 2.125rem;
}

@media print, screen and (min-width: 768px) {
  .sw-BoxA_Body {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-top: 0;
  }
}

.sw-BoxA_Body::after {
  content: "";
  clear: both;
  display: block;
}

.sw-BoxA_Heading {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

.sw-BoxA_Lead {
  margin-bottom: 1.0625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #000;
}

.sw-BoxA_Text {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .sw-BoxA_Text {
    margin-bottom: 1.125rem;
  }
}

.sw-BoxA_Link {
  text-decoration: underline;
  color: #df0523;
}

.sw-BoxA_Link:hover {
  text-decoration: none;
}

.sw-BoxA_LinkExternalA,
.sw-BoxA_LinkExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.sw-BoxA_LinkExternalA::before,
.sw-BoxA_LinkExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.1em;
}

.sw-BoxA_LinkExternalA::before {
  content: "";
}

.sw-BoxA_LinkExternalB::before {
  content: "";
}

.sw-BoxA_ListUnorder {
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
}

.sw-BoxA_ListUnorder > li {
  position: relative;
  margin-bottom: 0.3125rem;
}

.sw-BoxA_ListUnorder > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5625rem;
  left: -0.9375rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 2.5px solid #fc9898;
  border-radius: 50%;
}

.sw-BoxA_ListUnorder > :last-child {
  margin-bottom: 0;
}

.sw-BoxA_more {
  display: block;
  width: 100%;
  max-width: 60.28986%;
  margin: 1.25rem auto 0;
  padding: 0.625rem 0.9375rem 0.75rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1px solid #df0523;
  border-radius: 4px;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .sw-BoxA_more {
    float: right;
    width: auto;
    max-width: none;
    margin-right: 0;
  }
}

.sw-BoxA_more:hover {
  background-color: #df0523;
  color: #fff;
}

.sw-BoxA_moreExternal {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_moreExternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.sw-BoxA_moreExternalB {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_moreExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

/*
---
name: sw-Br
namespace: sw-
category: Text
---

`<br>`タグに指定をして、改行をブレイクポイントごとにコントロールします。

```jade
.l-Wrapper
  p.sw-Text 常に改行
    br
    | されます
  p.sw-Text ブレイクポイント（`md`）以降に改行
    br.sw-BrShowMd
    | されます。
  p.sw-Text ブレイクポイント（`md`）以降は改行
    br.sw-HideMd
    | されません。
```
*/
.sw-BrShowSm {
  display: none;
}

@media print, screen and (min-width: 375px) {
  .sw-BrShowSm {
    display: inline;
  }
}

.sw-BrShowMd {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .sw-BrShowMd {
    display: inline;
  }
}

.sw-BrShowLg {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .sw-BrShowLg {
    display: inline;
  }
}

.sw-BrShowXl {
  display: none;
}

@media print, screen and (min-width: 1230px) {
  .sw-BrShowXl {
    display: inline;
  }
}

.sw-BrHideSm {
  display: inline;
}

@media print, screen and (min-width: 375px) {
  .sw-BrHideSm {
    display: none;
  }
}

.sw-BrHideMd {
  display: inline;
}

@media print, screen and (min-width: 768px) {
  .sw-BrHideMd {
    display: none;
  }
}

.sw-BrHideLg {
  display: inline;
}

@media print, screen and (min-width: 1024px) {
  .sw-BrHideLg {
    display: none;
  }
}

.sw-BrHideXl {
  display: inline;
}

@media print, screen and (min-width: 1230px) {
  .sw-BrHideXl {
    display: none;
  }
}

/*
---
name: sw-Button
namespace: sw-
category: Button
id: [BTN-1, BTN-2, BTN-2A, BTN-2B, BTN-4]
---

<span class="sw-Label">BTN-1</span>

ボタンのデフォルトスタイルです。

```jade
div
  a.sw-Button(href="#") Primary Button
  a.sw-Button.sw-Button-disabled(href="#" tabindex="-1") Primary Button
div
  button.sw-Button#foo(type="button") Primary Button
  button.sw-Button(disabled type="button") Primary Button
div
  input.sw-Button(type="button" value="Primary Button")
  input.sw-Button(type="button" value="Primary Button" disabled)
```

<span class="sw-Label">BTN-2</span>

アイコンを付けます。

```jade
a.sw-Button.sw-Button-icon(href="#") Primary Button
  span.sw-Button_External(aria-hidden="true")
```

<span class="sw-Label">BTN-2A</span>

Primary Button
Small

```jade
a.sw-Button.sw-Button-small(href="#") Small Primary
```

<span class="sw-Label">BTN-2B</span>

Primary Button
Small Icon

```jade
a.sw-Button.sw-Button-smallIcon(href="#") Button
  span.sw-Button_External(aria-hidden="true")
```

<span class="sw-Label">BTN-4</span>

サブで使用するボタン

```jade
a.sw-Button.sw-Button-danger(href="#") Danger Button
a.sw-Button.sw-Button-danger.sw-Button-disabled(href="#" tabindex="-1") Danger Button
```

<span class="sw-Label"></span>

全幅

```jade
a.sw-Button.sw-Button-full(href="#") Primary Button
a.sw-Button.sw-Button-icon.sw-Button-full(href="#") Primary Button
  span.sw-Button_External(aria-hidden="true")
a.sw-Button.sw-Button-small.sw-Button-full(href="#") Small Primary
a.sw-Button.sw-Button-smallIcon.sw-Button-full(href="#") Button
  span.sw-Button_External(aria-hidden="true")
a.sw-Button.sw-Button-danger.sw-Button-full(href="#") Primary Button
```
*/
.sw-Button {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-Button:hover, .sw-Button:active, .sw-Button:focus {
  text-decoration: none;
}

.sw-Button[type="button"], .sw-Button[type="reset"], .sw-Button[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-Button:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.sw-Button:disabled, .sw-Button-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.sw-Button-disabled {
  pointer-events: none;
}

.sw-Button:not(.sw-Button-disabled):not(:disabled):hover {
  background-color: #df0523;
  color: #fff;
}

.sw-Button.swm-LinkIconA, .sw-Button.swm-LinkIconB, .sw-Button.swm-LinkIconPdf, .sw-Button.swm-LinkIconArrow {
  padding: 0.75rem 1.25rem 0.6875rem 1.5rem;
}

.sw-Button-icon {
  padding: 0.75rem 1.25rem 0.6875rem 1.5rem;
}

.sw-Button-small {
  padding: 0.75rem 0.9375rem 0.6875rem;
  font-size: 0.8125rem;
  border-radius: 0.23077em;
}

.sw-Button-smallIcon {
  padding: 0.75rem 0.9375rem 0.6875rem 1.25rem;
  font-size: 0.8125rem;
  border-radius: 0.23077em;
}

.sw-Button_External {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.sw-Button_External::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.sw-Button-danger {
  padding: 0.6875rem 0.9375rem 0.625rem;
  font-weight: 600;
  background-color: #df0523;
  color: #fff;
}

.sw-Button-danger:not(.sw-Button-disabled):not(:disabled):hover {
  border-color: #b80f26;
  background: #b80f26;
}

.sw-Button-danger.sw-Button-disabled {
  border-color: #bcbcbc;
  background-color: #bcbcbc;
}

.sw-Button-full {
  width: 100%;
  max-width: none;
}

/*
---
name: sw-ButtonContact
namespace: sw-
category: Button
id: BTN-3
---

<span class="sw-Label">BTN-3</span>

問い合わせボタン

```jade
a.sw-ButtonContact(href="#")
  span.sw-ButtonContact_Icon(aria-hidden="true")
  span.sw-ButtonContact_Text Inquiry Form
```
*/
.sw-ButtonContact {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 10.625rem;
  padding: 0.625rem 1.875rem;
  text-align: center;
  white-space: nowrap;
  font-weight: 600;
  border: 1px solid #dadada;
  background: #fff;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.sw-ButtonContact:hover, .sw-ButtonContact:active, .sw-ButtonContact:focus {
  text-decoration: none;
}

.sw-ButtonContact[type="button"], .sw-ButtonContact[type="reset"], .sw-ButtonContact[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-ButtonContact:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.sw-ButtonContact:disabled, .sw-ButtonContact-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.sw-ButtonContact-disabled {
  pointer-events: none;
}

.sw-ButtonContact:not(.sw-Button-disabled):not(:disabled):hover {
  border-color: #df0523;
  background-color: #df0523;
  color: #fff;
}

.sw-ButtonContact_Icon {
  position: relative;
  height: 0.8125rem;
  font-size: 1rem;
}

.sw-ButtonContact_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.sw-ButtonContact_Text {
  display: inline-block;
  margin-left: 0.625rem;
  font-size: 0.8125rem;
}

/*
---
name: sw-Caption
namespace: sw-
category: Image
id: [IMG-2A, IMG-2B, IMG-2C]
---

<span class="sw-Label">IMG-2A</span>

画像にキャプション（短い説明文）をつけます。キャプションは画像の横幅を基準に折り返されます。

ベーシックなスタイルです。

```jade
figure.sw-Caption
  span.sw-Caption_Image
    img(src="/assets/img/common/img_290_180.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```

```jade
figure.sw-Caption
  span.sw-Caption_Image
    img(src="/assets/img/common/img_290_180.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
figure.sw-Caption
  span.sw-Caption_Image
    img(src="/assets/img/common/img_290_180.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```

画像の横並びは、2つ並べた画像を用意します。

```jade
figure.sw-Caption
  span.sw-Caption_Image
    img(src="/assets/img/common/img_710_230.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```

<span class="sw-Label">IMG-2B</span>

```jade
figure.sw-Caption.sw-Caption-Bg
  span.sw-Caption_Image
    img(src="/assets/img/common/img_290_180.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```

<span class="sw-Label">IMG-2C</span>

```jade
figure.sw-Caption.sw-Caption-center
  span.sw-Caption_Image
    img(src="/assets/img/common/img_290_180.jpg" alt="")
  figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```
*/
/**
 * 1. キャプションの最小幅です。
 *    画像が指定幅以下になってもキャプションの幅はそれ以上小さくなりません。
 */
.sw-Caption {
  display: table;
  min-width: 100px;
  /* 1 */
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.sw-Caption.sw-Caption-full {
  width: 100%;
}

.sw-Caption.sw-Caption-Bg {
  padding: 0.625rem;
  padding-bottom: 0;
  background-color: #f2f4f6;
}

.l-MediaA_Image .sw-Caption {
  display: block;
  min-width: auto;
}

/* CMSの仕様のためimgにクラス名をつけれない */
.sw-Caption_Image {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.sw-Caption-full .sw-Caption_Image > img {
  width: 100%;
  max-width: none;
}

.sw-Caption-center {
  margin-right: auto;
  margin-left: auto;
}

/**
 * 1. キャプションは常に画像の下に配置します
 */
.sw-Caption_Text {
  display: table-caption;
  padding-top: 0.625rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #444;
  caption-side: bottom;
  /* 1 */
}

.sw-Caption-Bg .sw-Caption_Text {
  padding: 0.625rem 0.625rem 0.9375rem;
  background-color: #f2f4f6;
}

.l-MediaA_Image .sw-Caption_Text {
  display: block;
}

/*
---
name: sw-Delimiter
namespace: sw-
category: Text
---

途中で改行をさせたくないフレーズやキーワードに指定します。囲まれた範囲（Delimiter）がまとまって改行されます。

```jade
p.sw-Text テキストは基本的にスペースや役物を基準に改行されますが、
  span.sw-Delimiter この部分はまとめて改行されます。
  | ここは通常のテキストです。
```
*/
.sw-Delimiter {
  display: inline-block;
}

/*
---
name: sw-Emphasis
namespace: sw-
category: Text
id: TXT-7
---

<span class="sw-Label">TXT-7</span>

`<em>`で使われるスタイルです。アクセントをつけたい単語や短い文章で使用し、強調や重要性を示しません。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from
  em.sw-Emphasis  the vehicle’s main wiring harness.
```
*/
.sw-Emphasis {
  font-weight: 400;
  font-style: italic;
}

/* CMS対応 */
.news-Body em {
  font-weight: 400;
  font-style: italic;
}

.l-DetailTemplate em {
  font-weight: 400;
  font-style: italic;
}

/*
---
name: sw-FormRadio
namespace: sw-
category: Form
id: FO-2
---

<span class="sw-Label">FO-2</span>

`type="radio"`のデフォルトスタイルです。

```jade
input.sw-FormRadio(type="radio" id="radio1" name="radio1" value="0" checked)
label(for="radio1")
  span Radio label
input.sw-FormRadio(type="radio" id="radio2" name="radio1" value="1")
label(for="radio2")
  span Radio labelRadio labelRadio labelRadio labelRadio labelRadio label
```
*/
.sw-FormRadio {
  /* デフォルトのラジオボタンを非表示にする。 */
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.sw-FormRadio + label {
  display: inline-block;
  position: relative;
  padding-left: 1.6875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
  cursor: pointer;
}

.sw-FormRadio + label::before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  position: absolute;
  top: 1px;
  left: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin: auto;
  border: 1px solid #dadada;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-size: contain;
  background-repeat: no-repeat;
}

.sw-FormRadio:focus + label::before {
  border-color: #1589ee;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px #1589ee;
}

.sw-FormRadio:focus:not(.focus-ring) + label::before {
  border-color: #767676;
  box-shadow: none;
}

.sw-FormRadio:checked + label::before {
  border: 0;
  background-image: url("../img/common/icon_radio_on.svg");
}

.sw-FormRadio:disabled,
.sw-FormRadio + label[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
---
name: sw-Heading2A
namespace: sw-
category: Heading
id: HD-2
---

<span class="sw-Label">HD-2</span>

ベーシックなh2コンポーネントです。

```jade
h2.sw-Heading2A H2 Title name
```
*/
.sw-Heading2A {
  margin-top: 1.5625rem;
  margin-bottom: 1.5625rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .sw-Heading2A {
    font-size: 1.5rem;
  }
}

.sw-Heading2A + * {
  margin-top: 0 !important;
}

/*
---
name: sw-Heading2B
namespace: sw-
category: Link
id: LINK-1
---

<span class="sw-Label">LINK-1</span>

リンクとアイコン付きのh2コンポーネントです。

```jade
h2.sw-Heading2B
  a.sw-Heading2B_Link(href="#")
    | Products
    span.sw-Heading2B_Icon(aria-hidden="true")
```
*/
.sw-Heading2B {
  margin-top: 1.5625rem;
  margin-bottom: 1.5625rem;
}

.sw-Heading2B_Link {
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .sw-Heading2B_Link {
    font-size: 1.5rem;
    line-height: 1.3;
  }
  .sw-Heading2B_Link:hover {
    text-decoration: underline;
    color: #df0523;
  }
}

.sw-Heading2B_Icon {
  height: 1.5rem;
  margin-left: 0.25rem;
  font-size: 0.75rem;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

@media print, screen and (min-width: 1024px) {
  .sw-Heading2B_Icon {
    height: 0.875rem;
    font-size: 0.875rem;
  }
}

.sw-Heading2B_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.sw-Heading2B_Link:hover .sw-Heading2B_Icon {
  color: #df0523;
}

/*
---
name: sw-Heading3A
namespace: sw-
category: Heading
id: HD-3
---

<span class="sw-Label">HD-3</span>

ベーシックなh3コンポーネントです。

```jade
h3.sw-Heading3A H3 Title name
```
*/
.sw-Heading3A {
  margin-top: 1.875rem;
  margin-bottom: 0.9375rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

.sw-Heading3A + * {
  margin-top: 0 !important;
}

.swm-BoxA + .sw-Heading3A {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

/*
---
name: sw-Heading4A
namespace: sw-
category: Heading
id: HD-4
---

<span class="sw-Label">HD-4</span>

ベーシックなh4コンポーネントです。

```jade
h3.sw-Heading4A H4 Title name
```
*/
.sw-Heading4A {
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  color: #444;
}

.sw-Heading4A + * {
  margin-top: 0 !important;
}

/*
---
name: sw-HeroA
namespace: sw-
category: Image
id: CT-2
---

下層ページのメインビジュアルです。

- `.st-ContentsHeader`内に配置します
- メインコンテンツとサイドバーより前に記述します
- ブラウザ幅100%の要素内に配置してください（`max-width`の中は禁止）
- Pugでは`+picture()`と`+source()`を使用します

```scss
header.st-ContentsHeader
  .st-ContentsHeader_Hero
    .sw-HeroA
      +picture("/assets/img/products/semiconductor_components/hero_sp.jpg", "").sw-HeroA_Image
        +source(md, "/assets/img/products/semiconductor_components/hero_pc.jpg")
```

```jade
header.st-ContentsHeader
  .st-ContentsHeader_Hero
    .sw-HeroA
      picture.sw-HeroA_Image.
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(min-width: 768px)" srcset="/careers/uploads/us/image02.jpg">
        <!--[if IE 9]></video><![endif]-->
        <img src="/careers/uploads/us/image01.jpg" alt="">
```
*/
/*
---
name: sw-HeroA
namespace: sw-
category: Image
id: CT-3
---

`.sw-HeroA.sw-HeroA-small`とすることで、タブレット時のサイズを調整できます。`/carrer/`以下で使用しています。

```scss
header.st-ContentsHeader
  .st-ContentsHeader_Hero
    .sw-HeroA.sw-HeroA-small
      +picture("/careers/uploads/us/image01.jpg", "").sw-HeroA_Image
        +source(md, "/careers/uploads/us/image02.jpg")
```

```jade
header.st-ContentsHeader
  .st-ContentsHeader_Hero
    .sw-HeroA
      picture.sw-HeroA_Image.
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(min-width: 768px)" srcset="/careers/uploads/us/image02.jpg">
        <!--[if IE 9]></video><![endif]-->
        <img src="/careers/uploads/us/image01.jpg" alt="">
```
*/
.sw-HeroA {
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .sw-HeroA {
    overflow: hidden;
    height: 350px;
  }
}

.sw-HeroA::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.375rem;
  background-image: linear-gradient(0deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.15) 98%);
}

@media print, screen and (min-width: 768px) {
  .sw-HeroA.sw-HeroA-small {
    height: 200px;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-HeroA.sw-HeroA-small {
    height: 350px;
  }
}

.sw-HeroA_Image > img {
  display: block;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .sw-HeroA_Image > img {
    position: relative;
    left: 50%;
    min-height: 350px;
    min-width: 1920px;
    margin-left: -960px;
  }
}

@media print, screen and (min-width: 1920px) {
  .sw-HeroA_Image > img {
    left: 50vw;
    min-width: 100vw;
    margin-left: -50vw;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-HeroA-small .sw-HeroA_Image > img {
    min-height: 200px;
    min-width: 1097.14286px;
    margin-left: -548.57143px;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-HeroA-small .sw-HeroA_Image > img {
    min-height: 350px;
    min-width: 1920px;
    margin-left: -960px;
  }
}

@media print, screen and (min-width: 1920px) {
  .sw-HeroA-small .sw-HeroA_Image > img {
    left: 50vw;
    min-width: 100vw;
    margin-left: -50vw;
  }
}

.sw-HeroA_Bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  margin: auto;
  background-image: url("../img/common/bg_heroA_sp.svg");
  background-position: left bottom;
  background-size: contain;
  background-repeat: no-repeat;
}

@media print, screen and (min-width: 1024px) {
  .sw-HeroA_Bg {
    position: absolute;
    left: 50%;
    min-height: 350px;
    min-width: 1920px;
    margin-left: -960px;
    background-image: url("../img/common/bg_heroA_pc.svg");
  }
}

@media print, screen and (min-width: 1920px) {
  .sw-HeroA_Bg {
    left: 50vw;
    min-width: 100vw;
    margin-left: -50vw;
  }
}

.sw-HeroA_Body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: calc(100vw - 70px);
  max-width: 1170px;
  margin: auto;
}

@media print, screen and (min-width: 375px) {
  .sw-HeroA_Body {
    width: calc(100vw - 60px);
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-HeroA_Body {
    padding: 0 6.25rem;
  }
}

.sw-HeroA_Title {
  text-transform: uppercase;
  letter-spacing: 0.14583em;
  font-family: "PT sans", sans-serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .sw-HeroA_Title {
    letter-spacing: 0.15625em;
    font-size: 2rem;
  }
}

/*
---
name: sw-Image
namespace: .sw-
category: Image
id: [IMG-1, IMG-8A, IMG-8B, IMG-8C]
---

<span class="sw-Label">IMG-1</span>

```jade
.sw-Image
  img(src="/assets/img/common/img_290_180.jpg" alt)
```

<span class="sw-Label">IMG-8A</span>

画像をセンタリングします。画像のサイズはなりゆきです。

```jade
.sw-Image.sw-Image-center
  img(src="/assets/img/common/img_870_280.jpg" alt)
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-Image.sw-Image-center
  img(src="/assets/img/common/img_290_180.jpg" alt)
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
```

<span class="sw-Label">IMG-8B</span>

画像を左寄せにします。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-Image.sw-Image-left
  img(src="/assets/img/common/img_290_180.jpg" alt)
```

<span class="sw-Label">IMG-8C</span>

画像を右寄せにします。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-Image.sw-Image-right
  img(src="/assets/img/common/img_290_180.jpg" alt)
```
*/
.sw-Image {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .sw-Image {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
}

.cms-Component_Block .sw-Image > img {
  max-width: 100%;
}

.sw-Image-full > img {
  width: 100%;
  max-width: none;
}

.sw-Image-center {
  text-align: center;
}

.sw-Image-left {
  text-align: left;
}

.sw-Image-right {
  text-align: right;
}

/*
---
name: sw-ImageB
namespace: sw-
category: Image
id: IMG-7
---

<span class="sw-Label">IMG-7</span>

- 画像を中央揃えにします
- タブレット以降で画面幅50%で表示します
- 画像自体はなりゆきです
- キャプションは<a href="/styleguide/id/IMG-2A/index.html">IMG-2A</a>と似ていますが、コードは違うので注意してください

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-ImageB
  img.sw-ImageB_Image(src="/assets/img/common/img_690_296.jpg" alt="")
```

- キャプションあり

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-ImageB
  figure.sw-ImageB_Figure
    img.sw-ImageB_Image(src="/assets/img/common/img_690_296.jpg" alt="")
    figcaption.sw-ImageB_Caption Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```

- キャプションあり
- 背景色あり

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronicshas created new demand for connectors that can
.sw-ImageB
  figure.sw-ImageB_Figure.sw-ImageB_Figure-bg
    img.sw-ImageB_Image(src="/assets/img/common/img_690_296.jpg" alt="")
    figcaption.sw-ImageB_Caption Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```
*/
.sw-ImageB {
  width: 100%;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .sw-ImageB {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
    padding: 0 25%;
  }
}

.sw-ImageB_Figure-bg {
  padding: 0.625rem;
  background-color: #f2f4f6;
}

.sw-ImageB_Image {
  display: block;
  width: 100%;
  margin: auto;
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.sw-ImageB_Image > img {
  display: block;
  width: 100%;
  margin: auto;
}

.sw-ImageB_Caption {
  display: block;
  margin: auto;
  padding-top: 0.625rem;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #444;
}

.sw-ImageB_Caption.sw-ImageB-bg {
  padding: 0.625rem 0.625rem 0.9375rem;
  background-color: #f2f4f6;
}

.sw-Label {
  display: inline-block;
  margin-right: 0.375rem;
  padding: 0.3125rem 1.375rem;
  font-size: 0.75rem;
  line-height: 1;
  background-color: #5cb2f1;
  color: #fff;
}

/*
---
name: sw-LeadA
namespace: sw-
category: Text
id: TXT-1
---

<span class="sw-Label">TXT-1</span>

リード文です。見出しではなく`p`を使います。

```jade
p.sw-LeadA Kyocera - your partner for semiconductor packaging solutions
```
*/
.sw-LeadA {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.4;
  border-bottom: 1px solid #d8d8d8;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .sw-LeadA {
    margin-bottom: 1.875rem;
    padding-bottom: 1.875rem;
    font-size: 1.75rem;
  }
}

.sw-LeadB + .sw-LeadA {
  margin-top: 0 !important;
}

/*
---
name: sw-LeadB
namespace: sw-
category: Text
id: [TXT-2A, TXT-2B]
---

<span class="sw-Label">TXT-2A</span>

リード文です。見出しではなく`p`を使います。

```jade
p.sw-LeadB Kyocera supplies a wide range of products for automotive applications that require extreme reliability. Our products support the rapid advancement of in-vehicle electronics, making cars smarter, safer, cleaner and more comfortable.
```

<span class="sw-Label">TXT-2B</span>

下余白狭め

```jade
p.sw-LeadB.sw-LeadB-small Kyocera supplies a wide range of products for automotive applications that require extreme reliability. Our products support the rapid advancement of in-vehicle electronics, making cars smarter, safer, cleaner and more comfortable.
```

テキストを中央揃え、右揃え、左揃えに指定できます。

- `.sw-LeadB-center`
- `.sw-LeadB-centerSm`
- `.sw-LeadB-centerMd`
- `.sw-LeadB-centerLg`
- `.sw-LeadB-centerXl`
- `.sw-LeadB-right`
- `.sw-LeadB-rightSm`
- `.sw-LeadB-rightMd`
- `.sw-LeadB-rightLg`
- `.sw-LeadB-rightXl`
- `.sw-LeadB-left`
- `.sw-LeadB-leftSm`
- `.sw-LeadB-leftMd`
- `.sw-LeadB-leftLg`
- `.sw-LeadB-leftXl`

```jade
p.sw-LeadB.sw-LeadB-center A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
p.sw-LeadB.sw-LeadB-right right A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```
*/
.sw-LeadB {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.sw-LeadA + .sw-LeadB {
  margin-top: 0 !important;
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB-small {
    margin-bottom: 1.5625rem;
  }
}

.sw-LeadB-center {
  text-align: center;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadB-centerSm {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB-centerMd {
    text-align: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadB-centerLg {
    text-align: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadB-centerXl {
    text-align: center;
  }
}

.sw-LeadB-right {
  text-align: right;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadB-rightSm {
    text-align: right;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB-rightMd {
    text-align: right;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadB-rightLg {
    text-align: right;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadB-rightXl {
    text-align: right;
  }
}

.sw-LeadB-left {
  text-align: left;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadB-leftSm {
    text-align: left;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB-leftMd {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadB-leftLg {
    text-align: left;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadB-leftXl {
    text-align: left;
  }
}

/*
---
name: sw-LeadC
namespace: sw-
category: Text
id: TXT-12
---

<span class="sw-Label">TXT-12</span>

Careerで使用されます。

```jade
p.sw-LeadC At Kyocera, we’re committed to building a better future through technology
```

テキストを中央揃え、右揃え、左揃えに指定できます。

- `.sw-LeadC-center`
- `.sw-LeadC-centerSm`
- `.sw-LeadC-centerMd`
- `.sw-LeadC-centerLg`
- `.sw-LeadC-centerXl`
- `.sw-LeadC-right`
- `.sw-LeadC-rightSm`
- `.sw-LeadC-rightMd`
- `.sw-LeadC-rightLg`
- `.sw-LeadC-rightXl`
- `.sw-LeadC-left`
- `.sw-LeadC-leftSm`
- `.sw-LeadC-leftMd`
- `.sw-LeadC-leftLg`
- `.sw-LeadC-leftXl`

```jade
p.sw-LeadC At Kyocera, we’re committed to building a better future through technology
p.sw-LeadC.sw-LeadC-center At Kyocera, we’re committed to building a better future through technology
p.sw-LeadC.sw-LeadC-right At Kyocera, we’re committed to building a better future through technology
```
*/
.sw-LeadC {
  margin-top: 1.5625rem;
  margin-bottom: 1.5625rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .sw-LeadC {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    font-size: 1.875rem;
  }
}

.sw-LeadC-center {
  text-align: center;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadC-centerSm {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadC-centerMd {
    text-align: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadC-centerLg {
    text-align: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadC-centerXl {
    text-align: center;
  }
}

.sw-LeadC-right {
  text-align: right;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadC-rightSm {
    text-align: right;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadC-rightMd {
    text-align: right;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadC-rightLg {
    text-align: right;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadC-rightXl {
    text-align: right;
  }
}

.sw-LeadC-left {
  text-align: left;
}

@media print, screen and (min-width: 375px) {
  .sw-LeadC-leftSm {
    text-align: left;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-LeadC-leftMd {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-LeadC-leftLg {
    text-align: left;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-LeadC-leftXl {
    text-align: left;
  }
}

/*
---
name: sw-Link
namespace: sw-
category: Link
id: LINK-2
---

<span class="sw-Label">LINK-2</span>

テキストリンクのデフォルトスタイルです。

```jade
p.sw-Text
  | Kyocera designed
  a.sw-Link(href="#")  the Sheltap branch connector series
  |  to provide a high level of waterproof functionality and reliability.
```

別窓リンク

```jade
p.sw-Text
  | Kyocera designed
  a.sw-Link(href="#")  the Sheltap branch connector series
    span.sw-Link_ExternalA(aria-hidden="true")
  |  to provide a high level of waterproof functionality and reliability.
```

外部リンク

```jade
p.sw-Text
  | Kyocera designed
  a.sw-Link(href="#")  the Sheltap branch connector series
    span.sw-Link_ExternalB(aria-hidden="true")
  |  to provide a high level of waterproof functionality and reliability.
```
*/
.sw-Link {
  text-decoration: underline;
  color: #df0523;
  /* CMS対応 */
}

.sw-Link:hover {
  text-decoration: none;
}

.news-Body .sw-Link {
  font-weight: 400;
}

.news-Body .sw-Link:hover {
  text-decoration: none;
}

.l-DetailTemplate .sw-Link {
  font-weight: 400;
}

.l-DetailTemplate .sw-Link:hover {
  text-decoration: none;
}

.sw-Text a:not(.sw-Button) {
  text-decoration: underline;
  color: #df0523;
  /* CMS対応 */
}

.sw-Text a:not(.sw-Button):hover {
  text-decoration: none;
}

.news-Body .sw-Text a:not(.sw-Button) {
  font-weight: 400;
}

.news-Body .sw-Text a:not(.sw-Button):hover {
  text-decoration: none;
}

.l-DetailTemplate .sw-Text a:not(.sw-Button) {
  font-weight: 400;
}

.l-DetailTemplate .sw-Text a:not(.sw-Button):hover {
  text-decoration: none;
}

.sw-Link_ExternalA,
.sw-Link_ExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.sw-Link_ExternalA::before,
.sw-Link_ExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.1em;
}

.sw-Link_ExternalA::before {
  content: "";
}

.sw-Link_ExternalB::before {
  content: "";
}

/*
---
name: sw-LinkArrow
namespace: sw-
category: Link
id: LINK-7
---

<span class="sw-Label">LINK-7</span>

矢印付きのテキストリンクです。

```jade
a.sw-LinkArrow(href="#")
  | Contact Us
  span.sw-LinkArrow_Icon(aria-hidden="true")
```

別窓リンク

```jade
a.sw-LinkArrow(href="#")
  | Contact Us
  span.sw-LinkArrow_IconExternalA(aria-hidden="true")
```

外部リンク

```jade
a.sw-LinkArrow(href="#")
  | Contact Us
  span.sw-LinkArrow_IconExternalB(aria-hidden="true")
```
*/
.sw-LinkArrow {
  display: block;
  position: relative;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .sw-LinkArrow:hover {
    text-decoration: underline;
    color: #df0523;
  }
}

.sw-LinkArrow_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.75rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.sw-LinkArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow_Icon {
  color: #df0523;
}

.sw-LinkArrow_IconExternalA {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkArrow_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow_IconExternalA {
  color: #df0523;
}

.sw-LinkArrow_IconExternalB {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkArrow_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow_IconExternalB {
  color: #df0523;
}

/*
---
name: sw-LinkDownload
namespace: sw-
category: Link
id: LINK-3
---

<span class="sw-Label">LINK-3</span>

ファイルをダウンロードするためのリンクであることを示す場合に使います。

```jade
p.sw-Text
  span.sw-LinkDownload
    span.sw-LinkDownload_Icon(aria-hidden="true")
    span.sw-LinkDownload_Text
      a.sw-LinkDownload_Link(href="#") Multi Layer - Open tooled package list Multi Layer - Open tooled package list
      span.sw-LinkDownload_Size  (50.30 KB)
```
*/
.sw-LinkDownload {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #df0523;
}

.sw-LinkDownload_Icon {
  width: 2rem;
  height: 1.375rem;
  font-size: 1.375rem;
  color: #df0523;
}

.sw-LinkDownload_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.sw-LinkDownload_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  padding-top: 0.1875rem;
}

.sw-LinkDownload:hover .sw-LinkDownload_Text {
  text-decoration: none;
}

.sw-LinkDownload_Link {
  text-decoration: none;
  color: #df0523;
  transition-duration: 0.3s;
}

.sw-LinkDownload_Link:hover {
  text-decoration: underline;
}

.sw-LinkDownload_Size {
  color: #999;
}

/*
---
name: sw-LinkIcon
namespace: sw-
category: Link
id: LINK-6
---

<span class="sw-Label">LINK-6</span>

リンク＋アイコン(後付き)

```jade
a.sw-LinkIcon(href="#")
  | asia.kyocera.com/uploads/KAP01022018.pdf
  span.sw-LinkIcon_Pdf(aria-hidden="true")
```

```jade
a.sw-LinkIcon(href="#")
  | global.kyocera.com/inamori/management/
  span.sw-LinkIcon_ExternalA(aria-hidden="true")
```

```jade
a.sw-LinkIcon(href="#")
  | global.kyocera.com/inamori/management/
  span.sw-LinkIcon_ExternalB(aria-hidden="true")
```
*/
.sw-LinkIcon {
  text-decoration: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #df0523;
  transition-duration: 0.3s;
}

.sw-LinkIcon:hover {
  text-decoration: underline;
}

.sw-LinkIcon_Pdf,
.sw-LinkIcon_ExternalA,
.sw-LinkIcon_ExternalB {
  display: inline-block;
  vertical-align: baseline;
}

.sw-LinkIcon_Pdf::before,
.sw-LinkIcon_ExternalA::before,
.sw-LinkIcon_ExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.3em;
}

.sw-LinkIcon_Pdf {
  height: 0.9375rem;
  margin-left: 0.375rem;
  font-size: 0.9375rem;
}

.sw-LinkIcon_Pdf::before {
  content: "";
}

.sw-LinkIcon_ExternalA {
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkIcon_ExternalA::before {
  content: "";
}

.sw-LinkIcon_ExternalB {
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkIcon_ExternalB::before {
  content: "";
}

/*
---
name: sw-LinkInstagram
namespace: sw-
category: Link
id: LINK-12
---

<span class="sw-Label">LINK-12</span>

公式Instagramへのリンクです。レイアウトは<a href="/styleguide/category/Global/index.html#st-RelatedB">st-RelatedB</a>を参照してください。


```jade
a.sw-LinkInstagram(href="#")
  .sw-LinkInstagram_Icon(aria-hidden="true")
  span.sw-LinkInstagram_Text Follow us Instagram
```
*/
.sw-LinkInstagram {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #444;
  transition-duration: 0.3s;
}

.sw-LinkInstagram:hover {
  text-decoration: underline;
  color: #df0523;
}

.sw-LinkInstagram_Icon {
  width: 2.25rem;
  height: 1.625rem;
  font-size: 1.625rem;
  color: #e4405f;
}

.sw-LinkInstagram_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.24em;
}

.sw-LinkInstagram_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/*
---
name: sw-LinkMail
namespace: sw-
category: Link
id: [LINK-4, LINK-5]
---

<span class="sw-Label">LINK-4</span>

メールへのリンクであることを示す場合に使います。

```jade
.sw-LinkMail
  span.sw-LinkMail_Icon(aria-hidden="true")
  a.sw-LinkMail_Link(href="mailto:webmaster.pressglwebmaster.pressglwebmaster.pressgl@kyocera.jp") webmaster.pressglwebmaster.pressglwebmaster.pressgl@kyocera.jp
```

入れ子にする場合は、`.sw-LinkMail`を`span`にしても構いません。

```jade
p.sw-Text
  | Phone: +49 6074 48 510
  br
  span.sw-LinkMail
    span.sw-LinkMail_Icon(aria-hidden="true")
    a.sw-LinkMail_Link(href="mailto:info@kyocera-display.eu") info@kyocera-display.eu
```

<span class="sw-Label">LINK-5</span>

サイズを小さくします。

```jade
.sw-LinkMail.sw-LinkMail-small
  span.sw-LinkMail_Icon(aria-hidden="true")
  a.sw-LinkMail_Link(href="mailto:webmaster.pressglwebmaster.pressglwebmaster.pressgl@kyocera.jp") webmaster.pressglwebmaster.pressglwebmaster.pressgl@kyocera.jp
```

*/
.sw-LinkMail {
  display: block;
  position: relative;
  margin-left: 1.6875rem;
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #df0523;
}

.sw-LinkMail-small {
  font-size: 0.8125rem;
}

.sw-LinkMail_Icon {
  position: absolute;
  top: 0.3125rem;
  left: -1.6875rem;
  height: 0.75rem;
  font-size: 1.0625rem;
}

.sw-LinkMail-small .sw-LinkMail_Icon {
  font-size: 1rem;
}

.sw-LinkMail_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.35em;
}

.sw-LinkMail_Link {
  text-decoration: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: #df0523;
  transition-duration: 0.3s;
}

.sw-LinkMail_Link:hover {
  text-decoration: underline;
}

.sw-LinkMail_Size {
  color: #999;
}

/*
---
name: sw-ListAnnotation
namespace: sw-
category: List
id: TXT-10
---

<span class="sw-Label">TXT-10</span>

注釈用のリストです。米印やアスタリスクが表示されます。

```jade
ul.sw-ListAnnotation
  li Japanese Automotive Standards Organization
  li Additional fees may apply
```
*/
.sw-ListAnnotation {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: 0.8125rem;
  padding-left: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #444;
  list-style-type: none;
}

.sw-ListAnnotation > li {
  position: relative;
  margin-bottom: 0.625rem;
  font-style: italic;
}

.sw-ListAnnotation > li::before {
  content: "*";
  position: absolute;
  top: 0;
  left: -0.75rem;
}

.sw-ListAnnotation > :last-child {
  margin-bottom: 0;
}

/*
---
name: sw-ListArrow
namespace: sw-
category: List
id: LINK-8
---

<span class="sw-Label">LINK-8</span>

矢印付きのリンクリストです。

```jade
ul.sw-ListArrow
  li.sw-ListArrow_Item
    span.sw-ListArrow_Icon
    a.sw-ListArrow_Link(href="#") Terms of use
  li.sw-ListArrow_Item
    span.sw-ListArrow_Icon
    a.sw-ListArrow_Link(href="#") Data Privacy Notice
  li.sw-ListArrow_Item
    span.sw-ListArrow_Icon
    a.sw-ListArrow_Link(href="#") Imprint
  li.sw-ListArrow_Item
    span.sw-ListArrow_Icon
    a.sw-ListArrow_Link(href="#") Modern Slavery ActModern Slavery ActModern Slavery ActModern Slavery ActModern Slavery Act
      span.sw-ListArrow_ExternalIconA(aria-hidden="true")
  li.sw-ListArrow_Item
    span.sw-ListArrow_Icon
    a.sw-ListArrow_Link(href="#") Tax Strategy Statement
      span.sw-ListArrow_ExternalIconB(aria-hidden="true")

```
*/
.sw-ListArrow {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  list-style-type: none;
}

.sw-ListArrow > :last-child {
  margin-bottom: 0;
}

.sw-ListArrow_Item {
  position: relative;
  margin-bottom: 0.9375rem;
  padding-left: 1rem;
}

.sw-ListArrow_Icon {
  display: block;
  position: absolute;
  top: 0.25rem;
  left: 0.125rem;
  height: 1rem;
  margin: auto;
  font-size: 1rem;
  color: #df0523;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}

.sw-ListArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.sw-ListArrow_ExternalIconA {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_ExternalIconA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-ListArrow_ExternalIconB {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_ExternalIconB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-ListArrow_Link {
  text-decoration: none;
  color: #444;
}

.sw-ListArrow_Link:hover {
  text-decoration: underline;
  color: #df0523;
}

/*
---
name: sw-ListArrowB
namespace: sw-
category: List
id: LINK-13
---

<span class="sw-Label">LINK-13</span>

矢印付きのリンクリストです。

```jade
ul.sw-ListArrowB
  li.sw-ListArrowB_Item
    span.sw-ListArrowB_Icon(aria-hidden="true")
    a.sw-ListArrowB_Company(href="http://ca.kyoceramita.com/KMCAGlobalpub/jsp/Kyocera/home.jsp" target="_blank")
      b KYOCERA Document Solutions Canada, Ltd.
      span.sw-ListArrowB_ExternalIconA(aria-hidden="true")
  li.sw-ListArrowB_Item
    span.sw-ListArrowB_Icon(aria-hidden="true")
    a.sw-ListArrowB_Company(href="http://mx.kyoceramita.com/KMMXGlobalpub/jsp/Kyocera/home.jsp" target="_blank")
      b KYOCERA Document Solutions Mexico, S.A. de C.V.
      span.sw-ListArrowB_ExternalIconA(aria-hidden="true")
  li.sw-ListArrowB_Item
    span.sw-ListArrowB_Icon(aria-hidden="true")
    a.sw-ListArrowB_Company(href="http://br.kyoceramita.com/KMBRGlobalpub/jsp/Kyocera/home.jsp" target="_blank")
      b KYOCERA Document Solutions Brazil Ltda.
      span.sw-ListArrowB_ExternalIconA(aria-hidden="true")
  li.sw-ListArrowB_Item
    span.sw-ListArrowB_Icon(aria-hidden="true")
    a.sw-ListArrowB_Company(href="http://www.kdsda.com/" target="_blank")
      b KYOCERA Document Solutions Development America, Inc.
      span.sw-ListArrowB_ExternalIconA(aria-hidden="true")
    p.sw-ListArrowB_Text Concord, California
Develops printing software for Kyocera Document Solutions family of digital printers and copiers.
  li.sw-ListArrowB_Item
    span.sw-ListArrowB_Icon(aria-hidden="true")
    a.sw-ListArrowB_Company(href="https://global.kyocera.com/prdct/printing-devices/index.html?_ga=2.94084189.1737095979.1551417166-969523987.1542871067" target="_blank")
      b Printing Device Sales Division
      span.sw-ListArrowB_ExternalIconA(aria-hidden="true")
    p.sw-ListArrowB_Text Vancouver, WA
      br
      a.sw-ListArrowB_Link(href="https://global.kyocera.com/prdct/printing-devices/thermal-printheads/?_ga=2.163706879.1737095979.1551417166-969523987.1542871067" target="_blank") Thermal
      | ,
      a.sw-ListArrowB_Link(href="https://global.kyocera.com/prdct/printing-devices/inkjet-printheads/index.html?_ga=2.163706879.1737095979.1551417166-969523987.1542871067" target="_blank") Inkjet
      | ,
      a.sw-ListArrowB_Link(href="https://global.kyocera.com/prdct/printing-devices/electrophotography/index.html?_ga=2.163706879.1737095979.1551417166-969523987.1542871067" target="_blank") LED printheads
      |  and
      a.sw-ListArrowB_Link(href="https://global.kyocera.com/prdct/printing-devices/led-uv/index.html?_ga=2.163706879.1737095979.1551417166-969523987.1542871067" target="_blank") UV-LED devices
      |  for digital printing and curing applications.
```
*/
.sw-ListArrowB {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  list-style-type: none;
}

.sw-ListArrowB > :last-child {
  margin-bottom: 0;
}

.sw-ListArrowB_Item {
  position: relative;
  margin-bottom: 0.75rem;
  padding-left: 1.125rem;
}

@media print, screen and (min-width: 768px) {
  .sw-ListArrowB_Item {
    margin-bottom: 1.25rem;
  }
}

.sw-ListArrowB_Icon {
  display: block;
  position: absolute;
  top: 0.375rem;
  left: 0.125rem;
  height: 1rem;
  margin: auto;
  font-size: 1rem;
  color: #df0523;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}

.sw-ListArrowB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.sw-ListArrowB_ExternalIconA {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
  color: #a5a5a5;
}

.sw-ListArrowB_ExternalIconA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-ListArrowB_ExternalIconB {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
  color: #a5a5a5;
}

.sw-ListArrowB_ExternalIconB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-ListArrowB_Company {
  color: #444;
}

a.sw-ListArrowB_Company {
  text-decoration: none;
}

a.sw-ListArrowB_Company:hover {
  text-decoration: underline;
  color: #df0523;
}

.sw-ListArrowB_Text {
  color: #444;
}

.sw-ListArrowB_Link {
  text-decoration: underline;
  color: #df0523;
}

.sw-ListArrowB_Link:hover {
  text-decoration: none;
  color: #df0523;
}

/*
---
name: sw-ListDefinition
namespace: sw-
category: List
id: LIST-4
---

<span class="sw-Label">LIST-4</span>

定義リストです。

```jade
dl.sw-ListDefinition
  dt About Sheltap<sup class="sw-Sup">®</sup>
  dd Kyocera’s Sheltap series of branch-style electronic connectors are engineered for automotive use. The clamshell design allows Sheltap connectors to branch and distribute electricity easily and with long-term reliability, even in harsh environments. Sheltap is registered trademarks of Kyocera in Japan, U.S.A., China, and Europe
```
*/
.sw-ListDefinition {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  color: #444;
}

.sw-ListDefinition dt {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.sw-ListDefinition dd {
  margin-top: 0.4375rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/*
---
name: sw-ListDownload
namespace: sw-
category: List
id: LINK-10
---

<span class="sw-Label">LINK-10</span>

ダウンロードリスト

```jade
ul.sw-ListDownload
  li.sw-ListDownload_Item
    a.sw-ListDownload_Link(href="#")
      span.sw-ListDownload_DownloadIcon(aria-hidden="true")
      span.sw-ListDownload_Text Multi Layer - Open tooled package listMulti Layer - Open tooled package list
        span.sw-ListDownload_Size  (50.30 KB)
  li.sw-ListDownload_Item
    a.sw-ListDownload_Link(href="#")
      span.sw-ListDownload_DownloadIcon(aria-hidden="true")
      span.sw-ListDownload_Text Single Layer - Open tooled package list
        span.sw-ListDownload_Size  (52.61 KB)
```
*/
.sw-ListDownload {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  border-top: 1px solid #dadada;
  list-style-type: none;
}

.sw-ListDownload_Item {
  border-bottom: 1px solid #dadada;
}

.sw-ListDownload_Link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.9375rem 0 0.9375rem 1.25rem;
  text-decoration: none;
  color: #df0523;
  transition-duration: 0.3s;
}

.sw-ListDownload_Link:hover {
  text-decoration: none;
  background-color: #fbf2f1;
}

.sw-ListDownload_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.sw-ListDownload_DownloadIcon {
  width: 2rem;
  height: 1.375rem;
  font-size: 1.375rem;
  color: #df0523;
}

.sw-ListDownload_DownloadIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.sw-ListDownload_Size {
  color: #999;
}

/*
---
name: sw-ListFootnote
namespace: sw-
category: List
id: LIST-3
---

<span class="sw-Label">LIST-3</span>

注釈用のリストです。米印やアスタリスクが表示されます。

```jade
ul.sw-ListFootnote
  li Japanese Automotive Standards Organization
  li Japanese Additional fees may apply
```

リストを2から始める場合はstart属性を`start="2"`のように指定します。CSSで表示する順序も属性値によって変更されます。

```jade
ul.sw-ListFootnote(start="2")
  li Japanese Automotive Standards Organization
  li Japanese Additional fees may apply
```
*/
.sw-ListFootnote {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #444;
  list-style-type: none;
  counter-reset: footnote 0;
}

.sw-ListFootnote > li {
  position: relative;
  margin-bottom: 0.625rem;
  font-style: italic;
  counter-increment: footnote;
}

.sw-ListFootnote > li:target {
  background-color: lightgray;
}

.sw-ListFootnote > li::before {
  content: "*" counter(footnote);
  position: absolute;
  top: 0;
  left: -1.1875rem;
}

.sw-ListFootnote[start="2"] {
  counter-reset: footnote 1;
}

.sw-ListFootnote[start="3"] {
  counter-reset: footnote 2;
}

.sw-ListFootnote[start="4"] {
  counter-reset: footnote 3;
}

.sw-ListFootnote[start="5"] {
  counter-reset: footnote 4;
}

.sw-ListFootnote[start="6"] {
  counter-reset: footnote 5;
}

.sw-ListFootnote[start="7"] {
  counter-reset: footnote 6;
}

.sw-ListFootnote[start="8"] {
  counter-reset: footnote 7;
}

.sw-ListFootnote[start="9"] {
  counter-reset: footnote 8;
}

.sw-ListFootnote[start="10"] {
  counter-reset: footnote 9;
}

.sw-ListFootnote > :last-child {
  margin-bottom: 0;
}

/*
---
name: sw-ListLowerAlpha
namespace: sw-
category: List
id: LIST-5
---

<span class="sw-Label">LIST-5</span>

入れ子に対応した順序リストです。

```jade
ul.sw-ListLowerAlpha
  li Ordered nested list level 1
  li Ordered nested list level 1
    ul.sw-ListLowerAlpha_Child
      li Ordered nested list level 2 Ordered nested list level 2 Ordered nested list level 2
      li Ordered nested list level 2
  li Ordered nested list level 1 Ordered nested list level 1 Ordered nested list level 1
```

リストを2から始める場合はstart属性を`start="2"`のように指定します。CSSで表示する順序も属性値によって変更されます。

```jade
ul.sw-ListLowerAlpha(start="2")
  li Ordered nested list level 1
  li Ordered nested list level 1
    ul.sw-ListLowerAlpha_Child
      li Ordered nested list level 2 Ordered nested list level 2 Ordered nested list level 2
      li Ordered nested list level 2
  li Ordered nested list level 1 Ordered nested list level 1 Ordered nested list level 1
```
*/
.sw-ListLowerAlpha {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: 1.4375rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
  counter-reset: lower-alpha;
}

.sw-ListLowerAlpha[start="2"] {
  counter-reset: lower-alpha 1;
}

.sw-ListLowerAlpha[start="3"] {
  counter-reset: lower-alpha 2;
}

.sw-ListLowerAlpha[start="4"] {
  counter-reset: lower-alpha 3;
}

.sw-ListLowerAlpha[start="5"] {
  counter-reset: lower-alpha 4;
}

.sw-ListLowerAlpha[start="6"] {
  counter-reset: lower-alpha 5;
}

.sw-ListLowerAlpha[start="7"] {
  counter-reset: lower-alpha 6;
}

.sw-ListLowerAlpha[start="8"] {
  counter-reset: lower-alpha 7;
}

.sw-ListLowerAlpha[start="9"] {
  counter-reset: lower-alpha 8;
}

.sw-ListLowerAlpha[start="10"] {
  counter-reset: lower-alpha 9;
}

.sw-ListLowerAlpha > li {
  position: relative;
  margin-bottom: 0.3125rem;
  counter-increment: lower-alpha;
}

.sw-ListLowerAlpha > li::before {
  content: counters(lower-alpha, "-", lower-alpha) ".";
  display: block;
  position: absolute;
  top: 0;
  left: -1.4375rem;
  white-space: nowrap;
}

.sw-ListLowerAlpha > :last-child {
  margin-bottom: 0;
}

.sw-ListLowerAlpha_Child {
  margin-top: 0.3125rem;
  padding-left: 0;
  list-style-type: none;
}

.sw-ListLowerAlpha_Child > li {
  position: relative;
  margin-bottom: 0.3125rem;
  margin-left: 1rem;
}

.sw-ListLowerAlpha_Child > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.625rem;
  left: -1rem;
  width: 0.5rem;
  margin: auto;
  border-top: 1px solid #a5a5a5;
}

/*
---
name: sw-ListOrderA
namespace: sw-
category: List
id: LIST-2A
---

<span class="sw-Label">LIST-2A</span>

入れ子に対応した順序リストです。

```jade
ol.sw-ListOrderA
  li Ordered nested list level 1
  li Ordered nested list level 1
    ol.sw-ListOrderA_Child
      li Ordered nested list level 2 Ordered nested list level 2 Ordered nested list level 2
      li Ordered nested list level 2
  li Ordered nested list level 1 Ordered nested list level 1 Ordered nested list level 1
```

リストを2から始める場合はstart属性を`start="2"`のように指定します。CSSで表示する順序も属性値によって変更されます。

```jade
ol.sw-ListOrderA(start="2")
  li Ordered nested list level 1
  li Ordered nested list level 1
    ol.sw-ListOrderA_Child
      li Ordered nested list level 2 Ordered nested list level 2 Ordered nested list level 2
      li Ordered nested list level 2
  li Ordered nested list level 1 Ordered nested list level 1 Ordered nested list level 1
```
*/
.sw-ListOrderA {
  display: block;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: 1.375rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
  counter-reset: orderA;
}

.sw-ListOrderA[start="2"] {
  counter-reset: orderA 1;
}

.sw-ListOrderA[start="3"] {
  counter-reset: orderA 2;
}

.sw-ListOrderA[start="4"] {
  counter-reset: orderA 3;
}

.sw-ListOrderA[start="5"] {
  counter-reset: orderA 4;
}

.sw-ListOrderA[start="6"] {
  counter-reset: orderA 5;
}

.sw-ListOrderA[start="7"] {
  counter-reset: orderA 6;
}

.sw-ListOrderA[start="8"] {
  counter-reset: orderA 7;
}

.sw-ListOrderA[start="9"] {
  counter-reset: orderA 8;
}

.sw-ListOrderA[start="10"] {
  counter-reset: orderA 9;
}

.sw-ListOrderA > li {
  display: block;
  position: relative;
  margin-bottom: 0.3125rem;
  counter-increment: orderA;
}

.sw-ListOrderA > li::before {
  content: "";
  content: counters(orderA, "-") ".";
  display: block;
  position: absolute;
  top: 0;
  left: -1.375rem;
  white-space: nowrap;
}

.sw-ListOrderA > :last-child {
  margin-bottom: 0;
}

.sw-ListOrderA_Child {
  margin-top: 0.3125rem;
  padding-left: 0;
  list-style-type: none;
  counter-reset: orderA;
}

.sw-ListOrderA_Child > li {
  position: relative;
  margin-bottom: 0.3125rem;
  margin-left: 1rem;
  counter-increment: order;
}

.sw-ListOrderA_Child > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.625rem;
  left: -1rem;
  width: 0.5rem;
  margin: auto;
  border-top: 1px solid #a5a5a5;
}

/*
---
name: sw-ListOrderB
namespace: sw-
category: List
id: LIST-2B
---

<span class="sw-Label">LIST-2B</span>

契約内容の確認リストです。
https://europe.kyocera.com/index/products/lcds_glass_glass_touch_panels/general_terms_and.html

```jade
ol.sw-ListOrderB
  li.sw-ListOrderB_Item
    span.sw-ListOrderB_Number 1.1
    span.sw-ListOrderB_Text Our offers are non-binding. Technical data in our general product information is indicative only and not binding, unless expressly confirmed by us.
  li.sw-ListOrderB_Item
    span.sw-ListOrderB_Number 1.2
    span.sw-ListOrderB_Text The prices in our quotations or order acknowledgements are net prices excluding Value Added Tax. The prices for custom-made products are based on the specifications and quantities agreed with the customer. In case of subsequent requests for modification, we are entitled to alter the price according to the additional costs. We will mutually discuss adjustments based on changes in foreign exchange rates, increases in material costs, inflation, increases in labor or other production and supply costs, or any other event affecting the price or availability of the Products.
  li.sw-ListOrderB_Item
    span.sw-ListOrderB_Number 1.3
    span.sw-ListOrderB_Text Orders placed by the customer shall only be deemed accepted when confirmed by a written order acknowledgement. Any modifications of orders must be confirmed by us in writing.
  li.sw-ListOrderB_Item
    span.sw-ListOrderB_Number 2
    span.sw-ListOrderB_Text Delivery dates are only binding when expressly confirmed by us in writing.
  li.sw-ListOrderB_Item
    span.sw-ListOrderB_Number 2.1
    span.sw-ListOrderB_Text The delivery is subject to the correct and punctual supply to us. Deviations from the quantity ordered by the customer within the common industrial range and partial deliveries shall be accepted if this is reasonable for the customer. We shall be entitled to assign the rights and obligations under the present Contract to a third party,including the execution of its Performance.
      br
      br
      | Where Performance is to be executed pursuant to a request by the Customer, the Customer shall be obliged to make that request to us in writing, giving an exact description of the Performance and the date of Performance, not less than four weeks prior to the execution of Performance.
```
*/
.sw-ListOrderB {
  display: block;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
}

.sw-ListOrderB > :last-child {
  margin-bottom: 0;
}

.sw-ListOrderB_Item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1.25rem;
}

.sw-ListOrderB_Number {
  width: 2.0625rem;
}

.sw-ListOrderB_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

/*
---
name: sw-ListUnorder
namespace: sw-
category: List
id: LIST-1
---

<span class="sw-Label">LIST-1</span>

順序をもたない並列なリストです。

```jade
ul.sw-ListUnorder
  li Unordered nested list level 1
  li Unordered nested list level 1
    ul.sw-ListUnorder_Child
      li Unordered nested list level 1 Unordered nested list level 1 Unordered nested list level 1
      li Unordered nested list level 1 Unordered nested list level 1 Unordered nested list level 1
  li Unordered nested list level 1 Unordered nested list level 1 Unordered nested list level 1
```
*/
.sw-ListUnorder {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
}

.sw-ListUnorder > li {
  position: relative;
  margin-bottom: 0.3125rem;
}

.sw-ListUnorder > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5625rem;
  left: -0.9375rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 2.5px solid #fc9898;
  border-radius: 50%;
}

.sw-ListUnorder > :last-child {
  margin-bottom: 0;
}

.sw-ListUnorder_Child {
  margin-top: 0.625rem;
  padding-left: 0;
  list-style-type: none;
}

.sw-ListUnorder_Child > li {
  position: relative;
  margin-bottom: 0.3125rem;
  margin-left: 1rem;
}

.sw-ListUnorder_Child > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.625rem;
  left: -1rem;
  width: 0.5rem;
  margin: auto;
  border-top: 1px solid #a5a5a5;
}

/*
---
name: sw-NavA
namespace: sw-
category: Navigation
---

Productsページで使用されるナビゲーションです。グリッドレイアウトも含んでいます。

```jade
ul.sw-NavA
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/fc/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_industrial-ceramics.png" alt)
      .sw-NavA_Body
        | Industrial Ceramics
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="/sc/")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_semiconductor-packaging.png" alt)
      .sw-NavA_Body
        | Semiconductor Packaging
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/electro/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_electronic-components.png" alt)
      .sw-NavA_Body
        | Electronic Components
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/printing-devices/led-uv/index.html" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_uv-led-curingsystem.png" alt)
      .sw-NavA_Body
        | UV-LED Curing System
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/printing-devices/thermal-printheads/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_thermal-printheads.png" alt)
      .sw-NavA_Body
        | Thermal Printheads
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/printing-devices/inkjet-printheads/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_inkjet-printheads.png" alt)
      .sw-NavA_Body
        | Inkjet Printheads
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="http://www.kyocera-display.com/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_liquid-crystal-displays.png" alt)
      .sw-NavA_Body
        | Liquid Crystal Displays
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/optec/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_lens-components.png" alt)
      .sw-NavA_Body
        | Lens Components
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://www.kyocera-medical.com/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_medical-products.png" alt)
      .sw-NavA_Body
        | Medical Products
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="http://www.kyoceramicrotools.com/indexable/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_cutting-tool-Indexable.png" alt)
      .sw-NavA_Body
        | Cutting Tool – Indexable
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="http://www.kyoceramicrotools.com/micro/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_cutting-tool-solid-round.png" alt)
      .sw-NavA_Body
        | Cutting Tool - Solid Round
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="http://www.kyoceramicrotools.com/pcb/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_cutting-tool-printed-circuit-board.png" alt)
      .sw-NavA_Body
        | Cutting Tool - Printed Circuit Board
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://global.kyocera.com/prdct/chem/", target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_organic-chemical-materials.png" alt)
      .sw-NavA_Body
        | Organic Chemical Materials
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://www.kyocerasolar.com/business/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_solar-solutions-for-business.png" alt)
      .sw-NavA_Body
        | Solar Solutions for Business
        span.sw-NavA_Icon(aria-hidden="true")
  li.sw-NavA_Item
    a.sw-NavA_Link(href="https://interfocus.us/" target="_blank")
      .sw-NavA_Head
        img.sw-NavA_Thumbnail(src="/assets/img/index/image_information-communication-and-security-technology.jpg" alt)
      .sw-NavA_Body
        | Endpoint Security Software
        span.sw-NavA_IconExternalA(aria-hidden="true")
```
*/
.sw-NavA {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.3125rem;
  padding-left: 0;
  list-style-type: none;
}

.sw-NavA_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  padding-left: 0.3125rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavA_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
}

.sw-NavA_Item:nth-of-type(n + 3) {
  margin-top: 0.3125rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Item:nth-of-type(n + 3) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Item:nth-of-type(n + 4) {
    margin-top: 0.3125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavA_Item:nth-of-type(n + 4) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavA_Item:nth-of-type(n + 5) {
    margin-top: 0.75rem;
  }
}

.sw-NavA_Link {
  display: block;
  height: 100%;
  text-align: center;
  text-decoration: none;
  background-image: linear-gradient(-180deg, #f1f4f6 0%, #dde1e5 100%);
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Link {
    background: #f2f4f6;
  }
}

.sw-NavA_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Head {
    background-image: linear-gradient(-180deg, #f1f4f6 0%, #dde1e5 100%);
  }
}

.sw-NavA_Thumbnail {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.sw-NavA_Body {
  padding: 0.875rem 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.28;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Body {
    padding: 1.25rem 0.9375rem;
    font-size: 0.9375rem;
    line-height: 1.38;
    background: #f2f4f6;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavA_Body {
    padding: 1.25rem 0.625rem;
  }
}

.sw-NavA_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.0625rem;
  height: 1rem;
  font-size: 1rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Icon {
    height: 0.625rem;
    font-size: 0.625rem;
  }
}

.sw-NavA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.25rem;
  color: #df0523;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
}

@media print, screen and (min-width: 768px) {
  .sw-NavA_Icon::before {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: inherit;
        -ms-transform-origin: inherit;
            transform-origin: inherit;
  }
}

.sw-NavA_IconExternalA {
  position: relative;
  font-size: 0.6875rem;
}

.sw-NavA_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavA_IconExternalB {
  position: relative;
  font-size: 0.6875rem;
}

.sw-NavA_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

/*
---
name: sw-NavB
namespace: sw-
category: Navigation
id: [CARD-2A, CARD-2B]
---

<span class="sw-Label">CARD-2A</span>

Productsページで使用されるナビゲーションです。

スマホ1カラム、タブレット2カラム

```jade
ul.sw-NavB.sw-NavB-col2Md
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        <span class="sw-Delimiter">Automotive<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | LED <span class="sw-Delimiter">Lighting<span aria-hidden="true" class="sw-NavB_IconExternalA"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Camera Image <span class="sw-Delimiter">Sensors<span aria-hidden="true" class="sw-NavB_IconExternalB"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Power - AMB <span class="sw-Delimiter">Substrates<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | MEMS Sensors <span class="sw-Delimiter">Packaging<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Network / <span class="sw-Delimiter"><span class="sw-Delimiter">Multifunctionals<span aria-hidden="true" class="sw-NavB_Icon"></span></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Fiber <span class="sw-Delimiter">Optics<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
```

```jade
ul.sw-NavB.sw-NavB-col2Md
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        <span class="sw-Delimiter">Automotive<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
      .sw-NavB_Foot Alumina is the most widely used material among fine ceramics, and has the same sintered crystal structure (α-Al2O3) as sapphire and ruby. Its application is diverse due to its superb properties such as high insulation, high strength, high wear resistance and chemical resistance.
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | LED <span class="sw-Delimiter">Lighting<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
      .sw-NavB_Foot Silicon nitride (Si3N4) exceeds other ceramics in thermal shock resistance. As its strength does not deteriorate at elevated temperatures, it is appropriate material for automotive engine and gas turbine parts, including turbo-charger rotors, diesel engine glow plugs and hot plugs.
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Camera Image <span class="sw-Delimiter">Sensors<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
      .sw-NavB_Foot Silicon carbide retains its strength at elevated temperatures as high as 1,400°C and features high corrosion resistance in fine ceramic materials. Applications include mechanical seals and pump parts.
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Power - AMB <span class="sw-Delimiter">Substrates<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
      .sw-NavB_Foot Zirconia ceramic offers high strength and toughness at room temperature in engineering ceramics. Before zirconia, ceramics were considered impractical for scissors or knife applications. With its excellent surface smoothness, zirconia is also used for pump parts.
```

<span class="sw-Label">CARD-2B</span>

スマホ1カラム、タブレット3カラム

```jade
ul.sw-NavB.sw-NavB-col3Md
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        <span class="sw-Delimiter">Automotive<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | LED <span class="sw-Delimiter">Lighting<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Camera Image <span class="sw-Delimiter">Sensors<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Power - AMB <span class="sw-Delimiter">Substrates<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | MEMS Sensors <span class="sw-Delimiter">Packaging<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Network / <span class="sw-Delimiter"><span class="sw-Delimiter">Multifunctionals<span aria-hidden="true" class="sw-NavB_Icon"></span></span></span>
  li.sw-NavB_Item
    a.sw-NavB_Box(href="#")
      .sw-NavB_Head
        img.sw-NavB_Thumbnail(src="/assets/img/common/img_690_224.jpg" alt)
      .sw-NavB_Body
        | Fiber <span class="sw-Delimiter">Optics<span aria-hidden="true" class="sw-NavB_Icon"></span></span>
```
*/
.sw-NavB {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB {
    margin-left: -1.875rem;
  }
}

.sw-NavB_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
  /* 1 Column */
}

@media print, screen and (min-width: 768px) {
  .sw-NavB_Item {
    padding-left: 1.875rem;
  }
}

.sw-NavB_Item:nth-of-type(n + 2) {
  margin-top: 0.9375rem;
}

/* 2 Columns */
.sw-NavB-col2 > .sw-NavB_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
}

.sw-NavB-col2 > .sw-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.sw-NavB-col2 > .sw-NavB_Item:nth-of-type(n + 3) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB-col2Md > .sw-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .sw-NavB-col2Md > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col2Md > .sw-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavB-col2Lg > .sw-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .sw-NavB-col2Lg > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col2Lg > .sw-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-NavB-col2Xl > .sw-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .sw-NavB-col2Xl > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col2Xl > .sw-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

/* 3 Columns */
.sw-NavB-col3 > .sw-NavB_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.sw-NavB-col3 > .sw-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.sw-NavB-col3 > .sw-NavB_Item:nth-of-type(n + 4) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB-col3Md > .sw-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .sw-NavB-col3Md > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col3Md > .sw-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavB-col3Lg > .sw-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .sw-NavB-col3Lg > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col3Lg > .sw-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-NavB-col3Xl > .sw-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .sw-NavB-col3Xl > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col3Xl > .sw-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

/* 4 Columns */
.sw-NavB-col4 > .sw-NavB_Item {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}

.sw-NavB-col4 > .sw-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.sw-NavB-col4 > .sw-NavB_Item:nth-of-type(n + 5) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB-col4Md > .sw-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .sw-NavB-col4Md > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col4Md > .sw-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavB-col4Lg > .sw-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .sw-NavB-col4Lg > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col4Lg > .sw-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-NavB-col4Xl > .sw-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .sw-NavB-col4Xl > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col4Xl > .sw-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

/* 5 Columns */
.sw-NavB-col5 > .sw-NavB_Item {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-width: 20%;
}

.sw-NavB-col5 > .sw-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.sw-NavB-col5 > .sw-NavB_Item:nth-of-type(n + 6) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB-col5Md > .sw-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .sw-NavB-col5Md > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col5Md > .sw-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-NavB-col5Lg > .sw-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .sw-NavB-col5Lg > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col5Lg > .sw-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-NavB-col5Xl > .sw-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .sw-NavB-col5Xl > .sw-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .sw-NavB-col5Xl > .sw-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

.sw-NavB_Box {
  display: block;
  height: 100%;
  text-decoration: none;
  transition-duration: 0.3s;
}

.sw-NavB_Box:hover {
  text-decoration: none;
  opacity: 0.7;
}

.cms-Component_Editor .sw-NavB_Box {
  height: auto;
}

.sw-NavB_Thumbnail {
  display: block;
  width: 100%;
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.sw-NavB_Thumbnail > img {
  display: block;
  width: 100%;
}

.sw-NavB_Body {
  padding: 1rem 0.9375rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.375;
  background: #f2f4f6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB_Body {
    font-size: 1rem;
  }
}

.sw-NavB_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 0.75rem;
  margin-left: 0.1875rem;
  font-size: 0.75rem;
}

.sw-NavB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  color: #df0523;
}

.sw-NavB_IconExternalA {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_IconExternalB {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_Foot {
  margin-bottom: 0.625rem;
  padding-top: 0.9375rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .sw-NavB_Foot {
    margin-bottom: 0;
    padding-top: 1.25rem;
  }
}

/*
---
name: sw-PageNavA
namespace: sw-
category: Navigation
id: CTL-2
---

<span class="sw-Label">CTL-2</span>

Productsページで使用されるページ内リンクです。

- `.sw-PageNavA`内のh2タグから自動生成され、`.sw-PageNavA`の最初の子要素として出力されます

```jade
.sw-PageNavA
  ul.sw-PageNavA_List
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Automotive Applications
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Industrial Heater Applications
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Water-Heating Applications
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Kerosene, Gas & Pellet Appliances / Consumer Electronic
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Medical Applications
    li.sw-PageNavA_Item
      a.sw-PageNavA_Link(href="#")
        span.sw-PageNavA_Icon(aria-hidden="true")
        | Water-Heating Applications
```
*/
.sw-PageNavA > :first-child {
  margin-top: 0;
}

.sw-PageNavA > :last-child {
  margin-bottom: 0;
}

.sw-PageNavA_List {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 1.625rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .sw-PageNavA_List {
    margin-bottom: 2.5rem;
  }
}

.sw-PageNavA_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  border-left: 1px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .sw-PageNavA_Item {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    max-width: none;
    margin-right: 0;
    margin-bottom: 0.3125rem;
  }
  .sw-PageNavA_Item:last-of-type {
    border-right: 1px solid #dadada;
  }
}

.sw-PageNavA_Link {
  display: block;
  position: relative;
  padding: 0.5625rem 0 0.5625rem 2.125rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .sw-PageNavA_Link {
    padding: 0.5625rem 1.5rem 0.5625rem 2rem;
    border: 0;
  }
}

.sw-PageNavA_Link:hover {
  text-decoration: underline;
  color: #df0523;
}

.sw-PageNavA_Icon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 1.14em;
  color: #df0523;
}

.sw-PageNavA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

/*
---
name: sw-Pager
namespace: sw-
category: Navigation
id: CTL-5
---

<span class="sw-Label">CTL-5</span>

ページネーション。戻る進むリンクと、ブレイクポイント(md)以降はcurrentとその前後のリンク、以前はcurrent表示。

```jade
nav.sw-Pager
  p.sw-Pager_Prev
    a.sw-Pager_PrevLink(href="#" aria-disabled="true")
      span.sw-Pager_PrevIcon(aria-label="Previous")
  p.sw-Pager_Location
    span.sw-Pager_LocationItem 1
    span.sw-Pager_LocationItem of
    span.sw-Pager_LocationItem 10
  ol.sw-Pager_List
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#" aria-current="page") 1
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 2
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 3
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 4
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 5
  p.sw-Pager_Next
    a.sw-Pager_NextLink(href="#")
      span.sw-Pager_NextIcon(aria-label="Next")
```

```jade
nav.sw-Pager
  p.sw-Pager_Prev
    a.sw-Pager_PrevLink(href="#")
      span.sw-Pager_PrevIcon(aria-label="Previous")
  p.sw-Pager_Location
    span.sw-Pager_LocationItem 2
    span.sw-Pager_LocationItem of
    span.sw-Pager_LocationItem 10
  ol.sw-Pager_List
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 1
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#" aria-current="page") 2
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 3
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 4
    li.sw-Pager_Item
      a.sw-Pager_Link(href="#") 5
  p.sw-Pager_Next
    a.sw-Pager_NextLink(href="#")
      span.sw-Pager_NextIcon(aria-label="Next")
```
*/
.sw-Pager {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0.625rem 0 0;
}

.sw-Pager-hidden {
  /* cms: 初期表示OFF、ページ番号調整後に表示。 */
  /* hack: ariaにすべきか */
  visibility: hidden;
}

@media print, screen and (min-width: 768px) {
  .sw-Pager {
    padding: 1.4375rem 0 0.625rem;
  }
}

.js-Pager[aria-hidden="true"] {
  display: none;
}

.sw-Pager_Location {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .sw-Pager_Location {
    display: none;
  }
}

.sw-Pager_LocationItem {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  font-weight: 600;
  box-shadow: 0 -1px 0 0 #e9e9e9 inset;
  color: #666;
}

.sw-Pager_LocationItem:first-child {
  color: #df0523;
}

.sw-Pager_LocationItem:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #df0523;
  pointer-events: none;
}

.sw-Pager_List {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .sw-Pager_List {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-Pager_Item {
    list-style: none;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-Pager_Link {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: relative;
    width: 3rem;
    height: 2.8125rem;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 -1px 0 0 #e9e9e9 inset;
    color: #666;
    transition-duration: 0.3s;
  }
  .sw-Pager_Link:hover {
    color: #df0523;
  }
  .sw-Pager_Link[aria-current="page"] {
    color: #df0523;
    pointer-events: none;
  }
  .sw-Pager_Link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #df0523;
    pointer-events: none;
  }
}

.sw-Pager_PrevLink,
.sw-Pager_NextLink {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 2.8125rem;
  color: #999;
}

@media print, screen and (min-width: 768px) {
  .sw-Pager_PrevLink,
  .sw-Pager_NextLink {
    transition-duration: 0.3s;
  }
  .sw-Pager_PrevLink:hover,
  .sw-Pager_NextLink:hover {
    color: #df0523;
  }
}

.sw-Pager_PrevLink[aria-disabled],
.sw-Pager_NextLink[aria-disabled] {
  opacity: 0;
  pointer-events: none;
}

.sw-Pager_PrevIcon::before,
.sw-Pager_NextIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  font-size: 1.5rem;
}

.sw-Pager_PrevIcon::before {
  content: "";
}

.sw-Pager_NextIcon::before {
  content: "";
}

.sw-Pager_PrevLink,
.sw-Pager_NextLink {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  text-decoration: none;
}

/*
---
name: sw-SearchBoxA
namespace: sw-
category: Form
id: [FO-1A, FO-1B]
---

<span class="sw-Label">FO-1A</span>

コンテンツ内に設置する検索ボックスです。
パラメータによって検索条件を変更することができます。


```jade
.sw-SearchBoxA
  p.sw-SearchBoxA_Text Kyocera is active worldwide in a wide range of sectors.Kyocera uses highly sophisticated materials to produce extremely reliable products both for the major global industries as well as its end consumers.
  form.sw-SearchBoxA_Form#SS_searchForm(action="https://search.kyocera.co.jp/search" method="get" name="gs" enctype="application/x-www-form-urlencoded")
    input(type="hidden" name="site" value="ZHS4H5NP")
    input(type="hidden" name="charset" value="UTF-8")
    input(type="hidden" name="group" value="19" id="SS_group")
    input(type="hidden" name="design" value="58")
    .sw-SearchBoxA_Search
      span.sw-SearchBoxA_SearchIcon(aria-hidden="true")
      input.sw-SearchBoxA_SearchInput#SS_searchQuery(name="query" type="text" placeholder="Product name, Keywords" size="44" value="" maxlength="100" autocomplete="off")
      button.sw-SearchBoxA_SearchSubmit#SS_searchSubmit(type="submit" tabindex="-1") Search
```
*/
.sw-SearchBoxA {
  margin-bottom: 1.875rem;
}

.sw-SearchBoxA_Text {
  margin-bottom: 1.875rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.5;
}

.sw-SearchBoxA_Form {
  display: block;
}

.sw-SearchBoxA_Search {
  position: relative;
  max-width: 23.125rem;
  margin-right: 0;
  margin-left: auto;
}

.sw-SearchBoxA_SearchIcon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.75rem;
  height: 1.5rem;
  margin: auto;
  font-size: 1.5rem;
  color: #444;
}

.sw-SearchBoxA_SearchIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.4em;
}

.sw-SearchBoxA_SearchInput {
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  height: 3.125rem;
  padding: 0 0.625rem;
  font-size: 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  background-color: #fff;
  box-shadow: 1px 1px 6px -3px #9e9e9e inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**
   * Normalize.cssのリセットをします。
   */
  padding-left: 2.75rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  border: 1px solid #e9e9e9;
  border-radius: 0.1875rem;
  background: #f5f5f5;
  box-shadow: none;
  color: #000;
}

.sw-SearchBoxA_SearchInput[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.sw-SearchBoxA_SearchInput::-webkit-input-placeholder {
  color: #999;
}

.sw-SearchBoxA_SearchInput:-ms-input-placeholder {
  color: #999;
}

.sw-SearchBoxA_SearchInput::-ms-input-placeholder {
  color: #999;
}

.sw-SearchBoxA_SearchInput::placeholder {
  color: #999;
}

.sw-SearchBoxA_SearchInput:focus {
  outline-width: 0;
  border-color: #1589ee;
  box-shadow: 0 0 6px 3px #1589ee;
}

.sw-SearchBoxA_SearchInput-error {
  background-color: #ffecec;
}

.sw-SearchBoxA_SearchInput:disabled {
  background-color: #ddd;
  opacity: 0.5;
  cursor: not-allowed;
}

.sw-SearchBoxA_SearchSubmit {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/*
---
name: sw-SocialList
namespace: sw-
category: Block
id: BOX-10
---

<span class="sw-Label">BOX-10</span>


```jade
section.sw-SocialList
  h2.sw-SocialList_Heading KYOCERA International, Inc. - Corporate
  ul.sw-SocialList_List
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://www.linkedin.com/company/kyocera-north-america/?viewAsMember=true " target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-linkedin.svg" alt="LinkedIn")

section.sw-SocialList
  h2.sw-SocialList_Heading KYOCERA International, Inc. - Communications Equipment Group
  ul.sw-SocialList_List
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://www.linkedin.com/company/kyoceramobile/" target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-linkedin.svg" alt="LinkedIn")
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://www.instagram.com/kyoceramobile/" target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-instagram.svg" alt="Instagram")
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://www.facebook.com/KyoceraMobile/" target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-facebook.svg" alt="Facebook")
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://twitter.com/kyoceramobile/" target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-twitter.svg" alt="Twitter")
    li.sw-SocialList_Item
      a.sw-SocialList_Link(href="https://www.youtube.com/user/kyoceramobilephones/" target="_blank")
        img.sw-SocialList_Icon(src="/assets/img/common/icon_sns-youtube.svg" alt="YouTube")
```
*/
.sw-SocialList {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

@media print, screen and (min-width: 768px) {
  .sw-SocialList {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

.sw-SocialList > :first-child {
  margin-top: 0;
}

.sw-SocialList > :last-child {
  margin-bottom: 0;
}

.sw-SocialList::after {
  content: "";
  display: block;
  padding-bottom: 1.875rem;
  border-bottom: 1px solid #e9e9e9;
}

@media print, screen and (min-width: 768px) {
  .sw-SocialList::after {
    padding-bottom: 2.5rem;
  }
}

.sw-SocialList_Heading {
  font-size: 1rem;
  font-weight: 700;
  color: #444;
}

.sw-SocialList_List {
  padding-left: 0;
  list-style-type: none;
}

.sw-SocialList_Item {
  display: inline-block;
  vertical-align: middle;
  margin-top: 1.5625rem;
  margin-right: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .sw-SocialList_Item {
    margin-right: 1.875rem;
  }
}

.sw-SocialList_Link {
  display: block;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .sw-SocialList_Link:hover {
    opacity: 0.7;
  }
}

.sw-SocialList_Icon {
  display: block;
  width: 1.875rem !important;
  height: auto;
}

/*
---
name: sw-Strong
namespace: sw-
category: Text
id: TXT-8
---

<span class="sw-Label">TXT-8</span>

`<strong>`で使われるスタイルです。重要性や緊急性・深刻性があることを示します。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from
  strong.sw-Strong  the vehicle’s main wiring harness.
```
*/
.sw-Strong {
  font-weight: 700;
}

/* CMS対応 */
.news-Body strong {
  font-weight: 700;
}

.l-DetailTemplate strong {
  font-weight: 700;
}

/*
---
name: sw-Sub
namespace: sw-
category: Text
id: TXT-11
---

<span class="sw-Label">TXT-11</span>

化学式や変数、脚注などで使用する下付き文字です。

```jade
p.sw-Text Alumina is the most widely used material among fine ceramics, and has the same sintered crystal structure (α-Al<sub class="sw-Sub">2</sub>O<sub class="sw-Sub">3</sub>) as sapphire and ruby. Its application is diverse due to its superb properties such as high insulation, high strength, high wear resistance and chemical resistance.
```
*/
.sw-Sub {
  bottom: 0;
  font-size: 0.75em;
}

/* CMS対応 */
.news-Body sub {
  bottom: 0;
  font-size: 0.75em;
}

.l-DetailTemplate sub {
  bottom: 0;
  font-size: 0.75em;
}

/*
---
name: sw-Sup
namespace: sw-
category: Text
id: [TXT-9, LINK-11]
---

<span class="sw-Label">TXT-9</span>

登録商標（アールマーク）や著作権（マルシーマーク）などに使う上付き文字です。

```jade
p.sw-Text Other highlights in the display segment are 3D head-up displays (HUD) in the ADAS segment and the patented Haptivity<sup class="sw-Sup">®</sup> technology integrated in a 7-inch display. Additionally.
```

<span class="sw-Label">LINK-11</span>

注釈リンクです。

```jade
p.sw-Text Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO<sup class="sw-Sup"><a class="sw-Link" href="#ref01">*1</a></sup> D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.

ul.sw-ListFootnote
  li#ref01 Japanese Automotive Standards Organization
  li#ref02 Japanese Additional fees may apply
  li#ref03 Additional fees may applyAdditional fees may applyAdditional fees may applyAdditional fees may applyAdditional fees  may applyAdditional fees may applyAdditional fees may applyAdditional fees may applyAdditional fees may apply
```
*/
.sw-Sup {
  vertical-align: super;
  position: static;
  font-size: 0.75em;
}

/* CMS対応 */
.news-Body sup {
  vertical-align: super;
  position: static;
  font-size: 0.75em;
}

.l-DetailTemplate sup {
  vertical-align: super;
  position: static;
  font-size: 0.75em;
}

/*
---
name: sw-TableA
namespace: .sw-
category: List
id: [TBL-1, TBL-2, TBL-3, TBL-4]
---

<span class="sw-Label">TBL-1</span>

ベーシックなテーブルです。横幅は100%で、`th`と`td`の幅はなりゆきです。

```jade
.sw-TableA.sw-TableA-typeA
  table
    caption Tabletitle
    tbody
      tr
        th Applicable wire
        td Copper: AVSS0.5, CAVS0.5, CIVUS0.5<br>Aluminum: ALVUS0.75, ALVUS0.5, ALVSSH0.5
      tr
        th Rated current
        td Copper: AC/DC 9A/Contact (Copper Wire 0.5mm2, Aluminum Wire 0.75 mm2)<br>AC/DC 8A/Contact (Aluminum Wire 0.5 mm2)
      tr
        th Rated voltage
        td AC/DC 125V Contact
      tr
        th D.W. Voltage
        td AC 1,000Vrms/min.
      tr
        th Operating temperature range
        td -40 to +85 °C (185 °F)
  p.sw-TableA_Note
    em The values are typical material properties and may vary according to product configuration and manufacturing process.
** temperature dependency graph see above
```

<span class="sw-Label">TBL-2</span>

- `thead`あり

```jade
.sw-TableA.sw-TableA-typeA
  table
    thead
      tr
        th Product
        th Blade length
        th.sw-TableA_Emphasis Product name
        th Unit Price
    tbody
      tr
        td Cooking knive
        td 18㎝
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
      tr
        td Santoku Knive
        td 16㎝
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
      tr
        td Santoku Knive
        td 14㎝
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
      tr
        td Universal Knivee
        td 13㎝
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
      tr
        td Fluit and vegetable Knivee
        td 11㎝
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
      tr
        td Shin gift set, comprised of ZK-160BK-BK and ZK-110BK-BK
        td ----
        td.sw-TableA_Emphasis FK-110WH-BK
        td 39,00€
  p.sw-TableA_Note
    em The values are typical material properties and may vary according to product configuration and manufacturing process.
** temperature dependency graph see above
```

<span class="sw-Label">TBL-3</span>

- `.sw-TableA_Scroll`でラップすると横スクロールになります。

```jade
.sw-TableA.sw-TableA-typeB
  .sw-TableA-scroll
    table
      thead
        tr
          th Size
          th Resolution
          th Part Number
          th.IF
          th Outline Dimensions
          th.sw-TableA_Right Brightness<br>(cd/m²)
          th.sw-TableA_Right Viewing Angle<br>(U/D/L/R)
          th.sw-TableA_Right Lifetime<br>(hrs)
      tbody
        tr
          th(rowspan="4") 3.5"
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,200
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,000
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 50,000
        tr
          td QVGA
          td TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          th(rowspan="2") 4.3"
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,200
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 100,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 100,000
        tr
          th(rowspan="6") 5.7"
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,200
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,000
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 50,000
        tr
          td QVGA
          td TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 400
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 60,000
        tr
          td QVGA
          td: a(href="#") TG035QVLQAANN-GN00
          td CMOS+SPI
          td 76.9×63.9×4.9
          td.sw-TableA_Right 1,000
          td.sw-TableA_Right 70/60/80/80
          td.sw-TableA_Right 50,000
  p.sw-TableA_Note
    em The values are typical material properties and may vary according to product configuration and manufacturing process.
** temperature dependency graph see above
```

<span class="sw-Label">TBL-4</span>

```jade
.sw-TableA.sw-TableA-typeC
  table
    tbody
      tr
        th Managing Directors
        td Shoichi Aoki
<br>Masafumi Ikeuchi<br>
Ken Ishii<br>
Koichi Kano
<br>Shigeru Koyama<br>
Yusuke Mizukami
<br>Rafael Schroeer
<br>Hideo Tanimoto<br>
Goro Yamaguchi
      tr
        th Registered Office
        td Amtsgericht Stuttgart, Germany
      tr
        th Registration Number
        td HRB 210 334
      tr
        th Register Court
        td Esslingen am Neckar
      tr
        th VAT Number
        td DE 145350234
```
*/
.sw-TableA {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.sw-TableA table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: #fff;
}

.sw-TableA caption {
  margin-bottom: 1.25rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.sw-TableA th,
.sw-TableA td {
  vertical-align: top;
  padding: 0.9375rem 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  border: 1px solid #dadada;
  border-right-width: 0;
  border-left-width: 0;
  background-color: transparent;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA th,
  .sw-TableA td {
    padding: 0.9375rem 1.25rem;
  }
}

.sw-TableA th {
  font-weight: 600;
  line-height: 1.3;
}

.sw-TableA td {
  line-height: 1.4;
}

.sw-TableA a {
  text-decoration: underline;
  color: #df0523;
}

.sw-TableA a:hover {
  text-decoration: none;
}

.sw-TableA_Emphasis {
  color: #df0523 !important;
}

.sw-TableA_Note {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA_Note {
    margin-top: 1.5rem;
  }
}

.sw-TableA_Note > * {
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.3;
}

.sw-TableA_Note + .sw-TableA_Note {
  margin-top: 0.625rem;
}

.sw-TableA .sw-TableA_Center {
  text-align: center;
}

.sw-TableA .sw-TableA_Right {
  text-align: right;
}

.sw-TableA-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.sw-TableA-scroll th,
.sw-TableA-scroll td {
  white-space: nowrap;
}

.sw-TableA-typeA thead th,
.sw-TableA-typeA thead td {
  padding: 0.9375rem 0.625rem;
  border-bottom-width: 2px;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA-typeA thead th,
  .sw-TableA-typeA thead td {
    padding: 0.9375rem 1.25rem;
  }
}

.sw-TableA-typeA tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

.sw-TableA-typeA tbody tr:nth-of-type(even) {
  background-color: transparent;
}

.sw-TableA-typeB thead tr {
  background-color: #f5f5f5;
}

.sw-TableA-typeB thead th,
.sw-TableA-typeB thead td {
  padding: 0.75rem 0.9375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.sw-TableA-typeB tbody tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

.sw-TableA-typeB tbody tr:nth-of-type(even) {
  background-color: transparent;
}

.sw-TableA-typeB tbody th {
  background-color: #fff;
}

.sw-TableA-typeC th,
.sw-TableA-typeC td {
  padding: 0.9375rem;
  border-right-width: 1px;
  border-left-width: 1px;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA-typeC th,
  .sw-TableA-typeC td {
    padding: 1.25rem;
  }
}

.sw-TableA-typeC th {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA-typeC th {
    font-size: 1rem;
  }
}

.sw-TableA-typeC td {
  font-size: 1rem;
  line-height: 1.6;
}

.sw-TableA_Hint {
  margin-bottom: 0.9375rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .sw-TableA_Hint {
    margin-bottom: 1.25rem;
  }
}

.sw-TableA_HintSp,
.sw-TableA_HintPc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #666;
}

.sw-TableA_IconLeft {
  margin-right: 0.625rem;
}

.sw-TableA_IconRight {
  margin-left: 0.625rem;
}

/*
---
name: sw-Text
namespace: sw-
category: Text
id: TXT-3
---

<span class="sw-Label">TXT-3</span>

基本のテキストスタイルです。

```jade
p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```

テキストを中央揃え、右揃え、左揃えに指定できます。

- `.sw-Text-center`
- `.sw-Text-centerSm`
- `.sw-Text-centerMd`
- `.sw-Text-centerLg`
- `.sw-Text-centerXl`
- `.sw-Text-right`
- `.sw-Text-rightSm`
- `.sw-Text-rightMd`
- `.sw-Text-rightLg`
- `.sw-Text-rightXl`
- `.sw-Text-left`
- `.sw-Text-leftSm`
- `.sw-Text-leftMd`
- `.sw-Text-leftLg`
- `.sw-Text-leftXl`

```jade
p.sw-Text.sw-Text-center A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-Text.sw-Text-right A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```
*/
.sw-Text {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.sw-Text-center {
  text-align: center;
}

@media print, screen and (min-width: 375px) {
  .sw-Text-centerSm {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-Text-centerMd {
    text-align: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-Text-centerLg {
    text-align: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-Text-centerXl {
    text-align: center;
  }
}

.sw-Text-right {
  text-align: right;
}

@media print, screen and (min-width: 375px) {
  .sw-Text-rightSm {
    text-align: right;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-Text-rightMd {
    text-align: right;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-Text-rightLg {
    text-align: right;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-Text-rightXl {
    text-align: right;
  }
}

.sw-Text-left {
  text-align: left;
}

@media print, screen and (min-width: 375px) {
  .sw-Text-leftSm {
    text-align: left;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-Text-leftMd {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-Text-leftLg {
    text-align: left;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-Text-leftXl {
    text-align: left;
  }
}

/*
---
name: sw-TextSmall
namespace: sw-
category: Text
id: TXT-4
---

<span class="sw-Label">TXT-4</span>

基本より小さめのテキストスタイルです。

```jade
p.sw-TextSmall A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-TextSmall A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```

テキストを中央揃え、右揃え、左揃えに指定できます。

- `.sw-TextSmall-center`
- `.sw-TextSmall-centerSm`
- `.sw-TextSmall-centerMd`
- `.sw-TextSmall-centerLg`
- `.sw-TextSmall-centerXl`
- `.sw-TextSmall-right`
- `.sw-TextSmall-rightSm`
- `.sw-TextSmall-rightMd`
- `.sw-TextSmall-rightLg`
- `.sw-TextSmall-rightXl`
- `.sw-TextSmall-left`
- `.sw-TextSmall-leftSm`
- `.sw-TextSmall-leftMd`
- `.sw-TextSmall-leftLg`
- `.sw-TextSmall-leftXl`

```jade
p.sw-TextSmall.sw-TextSmall-center A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-TextSmall.sw-TextSmall-right A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```
*/
.sw-TextSmall {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

.sw-TextSmall-center {
  text-align: center;
}

@media print, screen and (min-width: 375px) {
  .sw-TextSmall-centerSm {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextSmall-centerMd {
    text-align: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextSmall-centerLg {
    text-align: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextSmall-centerXl {
    text-align: center;
  }
}

.sw-TextSmall-right {
  text-align: right;
}

@media print, screen and (min-width: 375px) {
  .sw-TextSmall-rightSm {
    text-align: right;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextSmall-rightMd {
    text-align: right;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextSmall-rightLg {
    text-align: right;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextSmall-rightXl {
    text-align: right;
  }
}

.sw-TextSmall-left {
  text-align: left;
}

@media print, screen and (min-width: 375px) {
  .sw-TextSmall-leftSm {
    text-align: left;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextSmall-leftMd {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextSmall-leftLg {
    text-align: left;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextSmall-leftXl {
    text-align: left;
  }
}

/*
---
name: sw-TextXSmall
namespace: sw-
category: Text
id: TXT-5
---

<span class="sw-Label">TXT-5</span>

基本より小さいテキストスタイルです。

```jade
p.sw-TextXSmall A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-TextXSmall A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```

テキストを中央揃え、右揃え、左揃えに指定できます。

- `.sw-TextXSmall-center`
- `.sw-TextXSmall-centerSm`
- `.sw-TextXSmall-centerMd`
- `.sw-TextXSmall-centerLg`
- `.sw-TextXSmall-centerXl`
- `.sw-TextXSmall-right`
- `.sw-TextXSmall-rightSm`
- `.sw-TextXSmall-rightMd`
- `.sw-TextXSmall-rightLg`
- `.sw-TextXSmall-rightXl`
- `.sw-TextXSmall-left`
- `.sw-TextXSmall-leftSm`
- `.sw-TextXSmall-leftMd`
- `.sw-TextXSmall-leftLg`
- `.sw-TextXSmall-leftXl`

```jade
p.sw-TextSmall.sw-TextXSmall-center A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
.sw-TextSmall.sw-TextXSmall-right A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics
```
*/
.sw-TextXSmall {
  margin-top: 1.25rem;
  margin-bottom: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #444;
}

.sw-TextXSmall-center {
  text-align: center;
}

@media print, screen and (min-width: 375px) {
  .sw-TextXSmall-centerSm {
    text-align: center;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextXSmall-centerMd {
    text-align: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextXSmall-centerLg {
    text-align: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextXSmall-centerXl {
    text-align: center;
  }
}

.sw-TextXSmall-right {
  text-align: right;
}

@media print, screen and (min-width: 375px) {
  .sw-TextXSmall-rightSm {
    text-align: right;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextXSmall-rightMd {
    text-align: right;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextXSmall-rightLg {
    text-align: right;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextXSmall-rightXl {
    text-align: right;
  }
}

.sw-TextXSmall-left {
  text-align: left;
}

@media print, screen and (min-width: 375px) {
  .sw-TextXSmall-leftSm {
    text-align: left;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-TextXSmall-leftMd {
    text-align: left;
  }
}

@media print, screen and (min-width: 1024px) {
  .sw-TextXSmall-leftLg {
    text-align: left;
  }
}

@media print, screen and (min-width: 1230px) {
  .sw-TextXSmall-leftXl {
    text-align: left;
  }
}

/*
---
name: sw-VideoA
namespace: sw-
category: Media
id: VID-1
---

<span class="sw-Label">VID-1</span>

- `controls` 操作パネルを表示する
- `muted` 無音で再生する
- `autoplay` 自動再生する（Safariは無効）
- `loop` 繰り返し再生する
- `preload` 再生する前に読み込む（`autoplay`指定時は無効）
  - `preload="none"` 再生してから読み込む
  - `preload="metadata"` メタデータ（動画のサイズ、トラックリスト、再生時間など）を事前に読み込む
  - `preload="auto"` 動画データ全体を事前に読み込む
- `poster="image.png"` ファイルの読み込み前や動画が再生できない場合に表示する画像を指定する
- `playsinline`  iOSでインライン再生する（iOS10以降、`muted`も必要）
    `playsinline muted`
- `<video src="movie.mp4#t=[starttime][,endtime]"></video>` 再生反映を指定する（IEとEdgeは未対応）
  - `movie.mp4#t=5,10` 5秒から10秒の範囲を再生
  - `movie.mp4#t=,8` 始点から8秒の範囲を再生
  - `movie.mp4#t=,01:30:00` 始点から1時間30分の範囲を再生
  - `movie.mp4#t=5` 5秒から最後まで再生

[video.js](https://videojs.com/)を使用しています。

- `<video>`にid属性を指定してください
- `<video>`に`.video-js.vjs-default-skin.vjs-16-9`を指定してください
- `controls data-setup='{}'`は必須です
- `<source>`にmp4のパスを指定してください
- JSが無効の環境では`.vjs-no-js`が表示されます

```jade
ul.sw-VideoA
  li.sw-VideoA_Item
    h3.sw-VideoA_Heading Kyocera ceramic knives
    p.sw-VideoA_Text Super sharp blade for a perfect cut
    .sw-VideoA_Video.
      <video id="my-video1" class="video-js vjs-default-skin vjs-16-9" poster="https://placehold.jp/720x405.png" controls preload="metadata" data-setup="{}">
        <source src="/index/products/kitchen_products/Videos.-cps-73202-File.cpsVideoPlayerComponent.tmp/English.mp4" type='video/mp4'>
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
      </video>
  li.sw-VideoA_Item
    h3.sw-VideoA_Heading Kyocera ceramic knives
    p.sw-VideoA_Text Super sharp blade for a perfect cut
    .sw-VideoA_Video.
      <video id="my-video2" class="video-js vjs-default-skin vjs-16-9" poster="https://placehold.jp/720x405.png" controls preload="metadata" data-setup="{}">
        <source src="/index/products/kitchen_products/Videos.-cps-73202-File.cpsVideoPlayerComponent.tmp/English.mp4" type='video/mp4'>
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
      </video>
  li.sw-VideoA_Item
    h3.sw-VideoA_Heading Kyocera ceramic knives
    p.sw-VideoA_Text Super sharp blade for a perfect cut
    .sw-VideoA_Video.
      <video id="my-vide3" class="video-js vjs-default-skin vjs-16-9" poster="https://placehold.jp/720x405.png" controls preload="metadata" data-setup="{}">
        <source src="/index/products/kitchen_products/Videos.-cps-73202-File.cpsVideoPlayerComponent.tmp/English.mp4" type='video/mp4'>
        <p class="vjs-no-js">
          To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
      </video>
```
*/
.sw-VideoA {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .sw-VideoA {
    margin-left: -1.875rem;
  }
}

.sw-VideoA_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sw-VideoA_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
    padding-left: 1.875rem;
  }
}

.sw-VideoA_Item:nth-of-type(n + 2) {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .sw-VideoA_Item:nth-of-type(n + 2) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .sw-VideoA_Item:nth-of-type(n + 3) {
    margin-top: 3.75rem;
  }
}

.sw-VideoA_Heading {
  margin-bottom: 0.9375rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

.sw-VideoA_Text {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/* stylelint-disable */
.sw-VideoA_Video {
  /*
      Player Skin Designer for Video.js
      http://videojs.com

      To customize the player skin edit
      the CSS below. Click "details"
      below to add comments or questions.
      This file uses some SCSS. Learn more
      at http://sass-lang.com/guide)

      This designer can be linked to at:
      https://codepen.io/heff/pen/EarCt/left/?editors=010
    */
  /* The "Big Play Button" is the play button that shows before the video plays.
       To center it set the align values to center and middle. The typical location
       of the button is the center, but there is trend towards moving it to a corner
       where it gets out of the way of valuable content in the poster image. */
  /* The default color of control backgrounds is mostly black but with a little
       bit of blue so it can still be seen on all-black video frames, which are common. */
  /* Slider - used for Volume bar and Progress bar */
  /* The slider bar color is used for the progress bar and the volume bar
       (the first two can be removed after a fix that's coming) */
  /* The main progress bar also has a bar that shows how much has been loaded. */
  /* The load progress bar also has internal divs that represent
       smaller disconnected loaded time ranges */
}

@media print {
  .sw-VideoA_Video .video-js > *:not(.vjs-tech):not(.vjs-poster) {
    visibility: hidden;
  }
}

.sw-VideoA_Video .vjs-control.vjs-playing .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-control.vjs-ended .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-control.vjs-paused .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-control.vjs-vol-3 .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-control.vjs-mute-control .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-control.vjs-fullscreen-control .vjs-icon-placeholder::before {
  font-size: 0.75rem !important;
  line-height: 1.875rem !important;
}

.sw-VideoA_Video .video-js .vjs-big-play-button > .vjs-icon-placeholder::before {
  font-size: 1.1875rem !important;
  line-height: 2.8125rem !important;
}

.sw-VideoA_Video .video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-button > .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js .vjs-modal-dialog,
.sw-VideoA_Video .vjs-modal-dialog .vjs-modal-dialog-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sw-VideoA_Video .video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .vjs-button > .vjs-icon-placeholder::before {
  text-align: center;
}

.sw-VideoA_Video .vjs-icon-play,
.sw-VideoA_Video .video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js .vjs-play-control .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-play::before,
.sw-VideoA_Video .video-js .vjs-big-play-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js .vjs-play-control .vjs-icon-placeholder::before {
  content: "\f101";
  content: "";
}

.sw-VideoA_Video .vjs-icon-play-circle {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-play-circle::before {
  content: "\f102";
}

.sw-VideoA_Video .vjs-icon-pause,
.sw-VideoA_Video .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-pause::before,
.sw-VideoA_Video .video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder::before {
  content: "\f103";
  content: "";
}

.sw-VideoA_Video .vjs-icon-volume-mute,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-volume-mute::before,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder::before {
  content: "\f104";
  content: "";
}

.sw-VideoA_Video .vjs-icon-volume-low,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-volume-low::before,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder::before {
  content: "\f105";
  content: "";
}

.sw-VideoA_Video .vjs-icon-volume-mid,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-volume-mid::before,
.sw-VideoA_Video .video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder::before {
  content: "\f106";
  content: "";
}

.sw-VideoA_Video .vjs-icon-volume-high,
.sw-VideoA_Video .video-js .vjs-mute-control .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-volume-high::before,
.sw-VideoA_Video .video-js .vjs-mute-control .vjs-icon-placeholder::before {
  content: "\f107";
  content: "";
}

.sw-VideoA_Video .vjs-icon-fullscreen-enter,
.sw-VideoA_Video .video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-fullscreen-enter::before,
.sw-VideoA_Video .video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
  content: "\f108";
  content: "";
}

.sw-VideoA_Video .vjs-icon-fullscreen-exit,
.sw-VideoA_Video .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-fullscreen-exit::before,
.sw-VideoA_Video .video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder::before {
  content: "\f109";
  content: "";
}

.sw-VideoA_Video .vjs-icon-square {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-square::before {
  content: "\f10a";
}

.sw-VideoA_Video .vjs-icon-spinner {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-spinner::before {
  content: "\f10b";
}

.sw-VideoA_Video .vjs-icon-subtitles,
.sw-VideoA_Video .video-js .vjs-subtitles-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-subtitles::before,
.sw-VideoA_Video .video-js .vjs-subtitles-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js .vjs-subs-caps-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder::before {
  content: "\f10c";
}

.sw-VideoA_Video .vjs-icon-captions,
.sw-VideoA_Video .video-js .vjs-captions-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.sw-VideoA_Video .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-captions::before,
.sw-VideoA_Video .video-js .vjs-captions-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder::before,
.sw-VideoA_Video .video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder::before {
  content: "\f10d";
}

.sw-VideoA_Video .vjs-icon-chapters,
.sw-VideoA_Video .video-js .vjs-chapters-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-chapters::before,
.sw-VideoA_Video .video-js .vjs-chapters-button .vjs-icon-placeholder::before {
  content: "\f10e";
}

.sw-VideoA_Video .vjs-icon-share {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-share::before {
  content: "\f10f";
}

.sw-VideoA_Video .vjs-icon-cog {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-cog::before {
  content: "\f110";
}

.sw-VideoA_Video .vjs-icon-circle,
.sw-VideoA_Video .video-js .vjs-play-progress,
.sw-VideoA_Video .video-js .vjs-volume-level,
.sw-VideoA_Video .vjs-seek-to-live-control .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-circle::before,
.sw-VideoA_Video .video-js .vjs-play-progress::before,
.sw-VideoA_Video .video-js .vjs-volume-level::before,
.sw-VideoA_Video .vjs-seek-to-live-control .vjs-icon-placeholder::before {
  content: "\f111";
  content: "";
}

.sw-VideoA_Video .vjs-icon-circle-outline {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-circle-outline::before {
  content: "\f112";
}

.sw-VideoA_Video .vjs-icon-circle-inner-circle {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-circle-inner-circle::before {
  content: "\f113";
}

.sw-VideoA_Video .vjs-icon-hd {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-hd::before {
  content: "\f114";
}

.sw-VideoA_Video .vjs-icon-cancel,
.sw-VideoA_Video .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-cancel::before,
.sw-VideoA_Video .video-js .vjs-control.vjs-close-button .vjs-icon-placeholder::before {
  content: "\f115";
}

.sw-VideoA_Video .vjs-icon-replay,
.sw-VideoA_Video .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-replay::before,
.sw-VideoA_Video .video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder::before {
  content: "\f116";
  content: "";
}

.sw-VideoA_Video .vjs-icon-facebook {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-facebook::before {
  content: "\f117";
}

.sw-VideoA_Video .vjs-icon-gplus {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-gplus::before {
  content: "\f118";
}

.sw-VideoA_Video .vjs-icon-linkedin {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-linkedin::before {
  content: "\f119";
}

.sw-VideoA_Video .vjs-icon-twitter {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-twitter::before {
  content: "\f11a";
}

.sw-VideoA_Video .vjs-icon-tumblr {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-tumblr::before {
  content: "\f11b";
}

.sw-VideoA_Video .vjs-icon-pinterest {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-pinterest::before {
  content: "\f11c";
}

.sw-VideoA_Video .vjs-icon-audio-description,
.sw-VideoA_Video .video-js .vjs-descriptions-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-audio-description::before,
.sw-VideoA_Video .video-js .vjs-descriptions-button .vjs-icon-placeholder::before {
  content: "\f11d";
}

.sw-VideoA_Video .vjs-icon-audio,
.sw-VideoA_Video .video-js .vjs-audio-button .vjs-icon-placeholder {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-audio::before,
.sw-VideoA_Video .video-js .vjs-audio-button .vjs-icon-placeholder::before {
  content: "\f11e";
}

.sw-VideoA_Video .vjs-icon-next-item {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-next-item::before {
  content: "\f11f";
}

.sw-VideoA_Video .vjs-icon-previous-item {
  font-family: "iconfont";
  font-weight: normal;
  font-style: normal;
}

.sw-VideoA_Video .vjs-icon-previous-item::before {
  content: "\f120";
}

.sw-VideoA_Video .video-js {
  display: block;
  vertical-align: top;
  position: relative;
  box-sizing: border-box;
  word-break: initial;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  background-color: #000;
  color: #fff;
}

.sw-VideoA_Video .video-js:-moz-full-screen {
  position: absolute;
}

.sw-VideoA_Video .video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
}

.sw-VideoA_Video .video-js[tabindex="-1"] {
  outline: none;
}

.sw-VideoA_Video .video-js *,
.sw-VideoA_Video .video-js *::before,
.sw-VideoA_Video .video-js *::after {
  box-sizing: inherit;
}

.sw-VideoA_Video .video-js ul {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  list-style-position: outside;
}

.sw-VideoA_Video .video-js.vjs-fluid,
.sw-VideoA_Video .video-js.vjs-16-9,
.sw-VideoA_Video .video-js.vjs-4-3 {
  width: 100%;
  max-width: 100%;
  height: 0;
}

.sw-VideoA_Video .video-js.vjs-16-9 {
  padding-top: 56.25%;
}

.sw-VideoA_Video .video-js.vjs-4-3 {
  padding-top: 75%;
}

.sw-VideoA_Video .video-js.vjs-fill {
  width: 100%;
  height: 100%;
}

.sw-VideoA_Video .video-js .vjs-tech {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sw-VideoA_Video body.vjs-full-window {
  height: 100%;
  margin: 0;
  padding: 0;
}

.sw-VideoA_Video .vjs-full-window .video-js.vjs-fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
}

.sw-VideoA_Video .video-js.vjs-fullscreen {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important;
}

.sw-VideoA_Video .video-js.vjs-fullscreen.vjs-user-inactive {
  cursor: none;
}

.sw-VideoA_Video .vjs-hidden {
  display: none !important;
}

.sw-VideoA_Video .vjs-disabled {
  opacity: 0.5;
  cursor: default;
}

.sw-VideoA_Video .video-js .vjs-offscreen {
  position: absolute;
  top: 0;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.sw-VideoA_Video .vjs-lock-showing {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

.sw-VideoA_Video .vjs-no-js {
  width: 300px;
  height: 150px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  background-color: #000;
  color: #fff;
}

.sw-VideoA_Video .vjs-no-js a,
.sw-VideoA_Video .vjs-no-js a:visited {
  color: #66a8cc;
}

.sw-VideoA_Video .video-js .vjs-big-play-button {
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 3em;
  height: 1.5em;
  padding: 0;
  font-size: 3em;
  line-height: 1.5em;
  border: 0.06666em solid #fff;
  border-radius: 0.3em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
  opacity: 1;
  cursor: pointer;
  transition: all 0.4s;
}

.sw-VideoA_Video .vjs-big-play-centered .vjs-big-play-button {
  top: 50%;
  left: 50%;
  margin-top: -0.75em;
  margin-left: -1.5em;
}

.sw-VideoA_Video .video-js:hover .vjs-big-play-button,
.sw-VideoA_Video .video-js .vjs-big-play-button:focus {
  border-color: #fff;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  transition: all 0s;
}

.sw-VideoA_Video .vjs-controls-disabled .vjs-big-play-button,
.sw-VideoA_Video .vjs-has-started .vjs-big-play-button,
.sw-VideoA_Video .vjs-using-native-controls .vjs-big-play-button,
.sw-VideoA_Video .vjs-error .vjs-big-play-button {
  display: none;
}

.sw-VideoA_Video .vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
  display: block;
}

.sw-VideoA_Video .video-js button {
  display: inline-block;
  text-decoration: none;
  text-transform: none;
  font-size: inherit;
  line-height: inherit;
  border: none;
  background: none;
  color: inherit;
  transition: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.sw-VideoA_Video .vjs-control .vjs-button {
  width: 100%;
  height: 100%;
}

.sw-VideoA_Video .video-js .vjs-control.vjs-close-button {
  position: absolute;
  top: 0.5em;
  right: 0;
  z-index: 2;
  height: 3em;
  cursor: pointer;
}

.sw-VideoA_Video .video-js .vjs-modal-dialog {
  overflow: auto;
  background: rgba(0, 0, 0, 0.8);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0));
}

.sw-VideoA_Video .video-js .vjs-modal-dialog > * {
  box-sizing: border-box;
}

.sw-VideoA_Video .vjs-modal-dialog .vjs-modal-dialog-content {
  z-index: 1;
  padding: 20px 24px;
  font-size: 1.2em;
  line-height: 1.5;
}

.sw-VideoA_Video .vjs-menu-button {
  cursor: pointer;
}

.sw-VideoA_Video .vjs-menu-button.vjs-disabled {
  cursor: default;
}

.sw-VideoA_Video .vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
  display: none;
}

.sw-VideoA_Video .vjs-menu .vjs-menu-content {
  display: block;
  overflow: auto;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.sw-VideoA_Video .vjs-menu .vjs-menu-content > * {
  box-sizing: border-box;
}

.sw-VideoA_Video .vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu {
  display: none;
}

.sw-VideoA_Video .vjs-menu li {
  margin: 0;
  padding: 0.2em 0;
  text-align: center;
  text-transform: lowercase;
  font-size: 1.2em;
  line-height: 1.4em;
  list-style: none;
}

.sw-VideoA_Video .vjs-menu li.vjs-menu-item:focus,
.sw-VideoA_Video .vjs-menu li.vjs-menu-item:hover,
.sw-VideoA_Video .js-focus-visible .vjs-menu li.vjs-menu-item:hover {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.sw-VideoA_Video .vjs-menu li.vjs-selected,
.sw-VideoA_Video .vjs-menu li.vjs-selected:focus,
.sw-VideoA_Video .vjs-menu li.vjs-selected:hover,
.sw-VideoA_Video .js-focus-visible .vjs-menu li.vjs-selected:hover {
  background-color: #fff;
  color: #2b333f;
}

.sw-VideoA_Video .vjs-menu li.vjs-menu-title {
  margin: 0 0 0.3em 0;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  font-weight: bold;
  line-height: 2em;
  cursor: default;
}

.sw-VideoA_Video .vjs-menu-button-popup .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: -3em;
  width: 10em;
  height: 0;
  margin-bottom: 1.5em;
  border-top-color: rgba(43, 51, 63, 0.7);
}

.sw-VideoA_Video .vjs-menu-button-popup .vjs-menu .vjs-menu-content {
  position: absolute;
  bottom: 1.5em;
  width: 100%;
  max-height: 15em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.sw-VideoA_Video .vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu,
.sw-VideoA_Video .vjs-menu-button-popup .vjs-menu.vjs-lock-showing {
  display: block;
}

.sw-VideoA_Video .video-js .vjs-menu-button-inline {
  overflow: hidden;
  transition: all 0.4s;
}

.sw-VideoA_Video .video-js .vjs-menu-button-inline::before {
  width: 2.222222222em;
}

.sw-VideoA_Video .video-js .vjs-menu-button-inline:hover,
.sw-VideoA_Video .video-js .vjs-menu-button-inline:focus,
.sw-VideoA_Video .video-js .vjs-menu-button-inline.vjs-slider-active,
.sw-VideoA_Video .video-js.vjs-no-flex .vjs-menu-button-inline {
  width: 12em;
}

.sw-VideoA_Video .vjs-menu-button-inline .vjs-menu {
  position: absolute;
  top: 0;
  left: 4em;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.4s;
}

.sw-VideoA_Video .vjs-menu-button-inline:hover .vjs-menu,
.sw-VideoA_Video .vjs-menu-button-inline:focus .vjs-menu,
.sw-VideoA_Video .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  display: block;
  opacity: 1;
}

.sw-VideoA_Video .vjs-no-flex .vjs-menu-button-inline .vjs-menu {
  display: block;
  position: relative;
  width: auto;
  opacity: 1;
}

.sw-VideoA_Video .vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
.sw-VideoA_Video .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
.sw-VideoA_Video .vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  width: auto;
}

.sw-VideoA_Video .vjs-menu-button-inline .vjs-menu-content {
  overflow: hidden;
  width: auto;
  height: 100%;
  margin: 0;
}

.sw-VideoA_Video .video-js .vjs-control-bar {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.sw-VideoA_Video .vjs-has-started .vjs-control-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  visibility: visible;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s;
}

.sw-VideoA_Video .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.sw-VideoA_Video .vjs-controls-disabled .vjs-control-bar,
.sw-VideoA_Video .vjs-using-native-controls .vjs-control-bar,
.sw-VideoA_Video .vjs-error .vjs-control-bar {
  display: none !important;
}

.sw-VideoA_Video .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
  visibility: visible;
  opacity: 1;
}

.sw-VideoA_Video .vjs-has-started.vjs-no-flex .vjs-control-bar {
  display: table;
}

.sw-VideoA_Video .video-js .vjs-control {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  position: relative;
  width: 4em;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.sw-VideoA_Video .vjs-button > .vjs-icon-placeholder::before {
  font-size: 1.8em;
  line-height: 1.67;
}

.sw-VideoA_Video .video-js .vjs-control:focus::before,
.sw-VideoA_Video .video-js .vjs-control:hover::before,
.sw-VideoA_Video .video-js .vjs-control:focus {
  text-shadow: 0 0 1em white;
}

.sw-VideoA_Video .video-js .vjs-control-text {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
}

.sw-VideoA_Video .vjs-no-flex .vjs-control {
  display: table-cell;
  vertical-align: middle;
}

.sw-VideoA_Video .video-js .vjs-custom-control-spacer {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-progress-control {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
  min-width: 4em;
  cursor: pointer;
  -ms-touch-action: none;
      touch-action: none;
}

.sw-VideoA_Video .video-js .vjs-progress-control.disabled {
  cursor: default;
}

.sw-VideoA_Video .vjs-live .vjs-progress-control {
  display: none;
}

.sw-VideoA_Video .vjs-liveui .vjs-progress-control {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.sw-VideoA_Video .vjs-no-flex .vjs-progress-control {
  width: auto;
}

.sw-VideoA_Video .video-js .vjs-progress-holder {
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
  height: 0.3em;
  transition: all 0.2s;
}

.sw-VideoA_Video .video-js .vjs-progress-control .vjs-progress-holder {
  margin: 0 10px;
}

.sw-VideoA_Video .video-js .vjs-progress-control:hover .vjs-progress-holder {
  font-size: 1.666666666666666666em;
}

.sw-VideoA_Video .video-js .vjs-progress-control:hover .vjs-progress-holder.disabled {
  font-size: 1em;
}

.sw-VideoA_Video .video-js .vjs-progress-holder .vjs-play-progress,
.sw-VideoA_Video .video-js .vjs-progress-holder .vjs-load-progress,
.sw-VideoA_Video .video-js .vjs-progress-holder .vjs-load-progress div {
  display: block;
  position: absolute;
  width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
}

.sw-VideoA_Video .video-js .vjs-play-progress {
  background-color: #fff;
}

.sw-VideoA_Video .video-js .vjs-play-progress::before {
  position: absolute;
  top: -0.333333333333333em;
  right: -0.5em;
  z-index: 1;
  font-size: 0.9em;
}

.sw-VideoA_Video .video-js .vjs-load-progress {
  background: rgba(115, 133, 159, 0.5);
}

.sw-VideoA_Video .video-js .vjs-load-progress div {
  background: rgba(115, 133, 159, 0.75);
}

.sw-VideoA_Video .video-js .vjs-time-tooltip {
  visibility: hidden;
  float: right;
  position: absolute;
  top: -3.4em;
  z-index: 1;
  padding: 6px 8px 8px 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  border-radius: 0.3em;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  pointer-events: none;
}

.sw-VideoA_Video .video-js .vjs-progress-holder:focus .vjs-time-tooltip {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-progress-control:hover .vjs-time-tooltip,
.sw-VideoA_Video .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip {
  display: block;
  visibility: visible;
  font-size: 0.6em;
}

.sw-VideoA_Video .video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip {
  font-size: 1em;
}

.sw-VideoA_Video .video-js .vjs-progress-control .vjs-mouse-display {
  display: none;
  position: absolute;
  z-index: 1;
  width: 1px;
  height: 100%;
  background-color: #000;
}

.sw-VideoA_Video .vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  z-index: 0;
}

.sw-VideoA_Video .video-js .vjs-progress-control:hover .vjs-mouse-display {
  display: block;
}

.sw-VideoA_Video .video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
  visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s;
}

.sw-VideoA_Video .video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
  display: none;
}

.sw-VideoA_Video .vjs-mouse-display .vjs-time-tooltip {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

.sw-VideoA_Video .video-js .vjs-slider {
  position: relative;
  margin: 0 0.45em 0 0.45em;
  padding: 0;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  cursor: pointer;
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari */
  -webkit-user-select: none;
  /* Konqueror HTML */
  /* Firefox */
  -moz-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  user-select: none;
}

.sw-VideoA_Video .video-js .vjs-slider.disabled {
  cursor: default;
}

.sw-VideoA_Video .video-js .vjs-slider:focus {
  text-shadow: 0 0 1em white;
  box-shadow: 0 0 1em #fff;
}

.sw-VideoA_Video .video-js .vjs-mute-control {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  cursor: pointer;
}

.sw-VideoA_Video .video-js .vjs-volume-control {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 1em;
  cursor: pointer;
}

.sw-VideoA_Video .video-js .vjs-volume-control.vjs-volume-horizontal {
  width: 5em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control {
  visibility: visible;
  width: 1px;
  height: 1px;
  margin-left: -1px;
  opacity: 0;
}

.sw-VideoA_Video .video-js .vjs-volume-panel {
  transition: width 1s;
}

.sw-VideoA_Video .video-js .vjs-volume-panel:hover .vjs-volume-control,
.sw-VideoA_Video .video-js .vjs-volume-panel:active .vjs-volume-control,
.sw-VideoA_Video .video-js .vjs-volume-panel:focus .vjs-volume-control,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:hover,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:active,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active {
  visibility: visible;
  position: relative;
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
}

.sw-VideoA_Video .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
  width: 5em;
  height: 3em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-vertical,
.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical {
  left: -3.5em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.sw-VideoA_Video .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.sw-VideoA_Video .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
  width: 9em;
  transition: width 0.1s;
}

.sw-VideoA_Video .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only {
  width: 4em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  left: -3000em;
  width: 3em;
  height: 8em;
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
}

.sw-VideoA_Video .video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  transition: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
}

.sw-VideoA_Video .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
  visibility: visible;
  position: relative;
  width: 5em;
  height: 3em;
  opacity: 1;
  transition: none;
}

.sw-VideoA_Video .video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
.sw-VideoA_Video .video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
  position: absolute;
  bottom: 3em;
  left: 0.5em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.sw-VideoA_Video .video-js .vjs-volume-bar {
  margin: 1.35em 0.45em;
}

.sw-VideoA_Video .vjs-volume-bar.vjs-slider-horizontal {
  width: 5em;
  height: 0.3em;
}

.sw-VideoA_Video .vjs-volume-bar.vjs-slider-vertical {
  width: 0.3em;
  height: 5em;
  margin: 1.35em auto;
}

.sw-VideoA_Video .video-js .vjs-volume-level {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

.sw-VideoA_Video .video-js .vjs-volume-level::before {
  position: absolute;
  font-size: 0.9em;
}

.sw-VideoA_Video .vjs-slider-vertical .vjs-volume-level {
  width: 0.3em;
}

.sw-VideoA_Video .vjs-slider-vertical .vjs-volume-level::before {
  top: -0.5em;
  left: -0.3em;
}

.sw-VideoA_Video .vjs-slider-horizontal .vjs-volume-level {
  height: 0.3em;
}

.sw-VideoA_Video .vjs-slider-horizontal .vjs-volume-level::before {
  top: -0.3em;
  right: -0.5em;
}

.sw-VideoA_Video .video-js .vjs-volume-panel.vjs-volume-panel-vertical {
  width: 4em;
}

.sw-VideoA_Video .vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
  height: 100%;
}

.sw-VideoA_Video .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
  width: 100%;
}

.sw-VideoA_Video .video-js .vjs-volume-vertical {
  bottom: 8em;
  width: 3em;
  height: 8em;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.7);
}

.sw-VideoA_Video .video-js .vjs-volume-horizontal .vjs-menu {
  left: -2em;
}

.sw-VideoA_Video .vjs-poster {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #000;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.sw-VideoA_Video .vjs-has-started .vjs-poster {
  display: none;
}

.sw-VideoA_Video .vjs-audio.vjs-has-started .vjs-poster {
  display: block;
}

.sw-VideoA_Video .vjs-using-native-controls .vjs-poster {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-live-control {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
  font-size: 1em;
  line-height: 3em;
}

.sw-VideoA_Video .vjs-no-flex .vjs-live-control {
  display: table-cell;
  width: auto;
  text-align: left;
}

.sw-VideoA_Video .video-js:not(.vjs-live) .vjs-live-control,
.sw-VideoA_Video .video-js.vjs-liveui .vjs-live-control {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-seek-to-live-control {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  width: auto;
  height: 100%;
  min-width: 4em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  font-size: 1em;
  line-height: 3em;
  cursor: pointer;
}

.sw-VideoA_Video .vjs-no-flex .vjs-seek-to-live-control {
  display: table-cell;
  width: auto;
  text-align: left;
}

.sw-VideoA_Video .video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,
.sw-VideoA_Video .video-js:not(.vjs-live) .vjs-seek-to-live-control {
  display: none;
}

.sw-VideoA_Video .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge {
  cursor: auto;
}

.sw-VideoA_Video .vjs-seek-to-live-control .vjs-icon-placeholder {
  margin-right: 0.5em;
  color: #888;
}

.sw-VideoA_Video .vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder {
  color: red;
}

.sw-VideoA_Video .video-js .vjs-time-control {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  width: auto;
  min-width: 2em;
  padding-right: 1em;
  padding-left: 1em;
  font-size: 1em;
  line-height: 3em;
}

.sw-VideoA_Video .vjs-live .vjs-time-control {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-current-time,
.sw-VideoA_Video .vjs-no-flex .vjs-current-time {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-duration,
.sw-VideoA_Video .vjs-no-flex .vjs-duration {
  display: none;
}

.sw-VideoA_Video .vjs-time-divider {
  display: none;
  line-height: 3em;
}

.sw-VideoA_Video .vjs-live .vjs-time-divider {
  display: none;
}

.sw-VideoA_Video .video-js .vjs-play-control {
  cursor: pointer;
}

.sw-VideoA_Video .video-js .vjs-play-control .vjs-icon-placeholder {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
}

.sw-VideoA_Video .vjs-text-track-display {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 3em;
  left: 0;
  pointer-events: none;
}

.sw-VideoA_Video .video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
  bottom: 1em;
}

.sw-VideoA_Video .video-js .vjs-text-track {
  margin-bottom: 0.1em;
  text-align: center;
  font-size: 1.4em;
}

.sw-VideoA_Video .vjs-subtitles {
  color: #fff;
}

.sw-VideoA_Video .vjs-captions {
  color: #fc6;
}

.sw-VideoA_Video .vjs-tt-cue {
  display: block;
}

.sw-VideoA_Video video::-webkit-media-text-track-display {
  -webkit-transform: translateY(-3em);
  transform: translateY(-3em);
}

.sw-VideoA_Video .video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
  -webkit-transform: translateY(-1.5em);
  transform: translateY(-1.5em);
}

.sw-VideoA_Video .video-js .vjs-fullscreen-control {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  cursor: pointer;
}

.sw-VideoA_Video .vjs-playback-rate > .vjs-menu-button,
.sw-VideoA_Video .vjs-playback-rate .vjs-playback-rate-value {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sw-VideoA_Video .vjs-playback-rate .vjs-playback-rate-value {
  text-align: center;
  font-size: 1.5em;
  line-height: 2;
  pointer-events: none;
}

.sw-VideoA_Video .vjs-playback-rate .vjs-menu {
  left: 0;
  width: 4em;
}

.sw-VideoA_Video .vjs-error .vjs-error-display .vjs-modal-dialog-content {
  text-align: center;
  font-size: 1.4em;
}

.sw-VideoA_Video .vjs-error .vjs-error-display::before {
  content: "X";
  vertical-align: middle;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -0.5em;
  text-align: center;
  text-shadow: 0.05em 0.05em 0.1em #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 4em;
  line-height: 1;
  color: #fff;
}

.sw-VideoA_Video .vjs-loading-spinner {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  text-align: left;
  border: 6px solid rgba(43, 51, 63, 0.7);
  border-radius: 25px;
  background-clip: padding-box;
  opacity: 0.85;
}

.sw-VideoA_Video .vjs-seeking .vjs-loading-spinner,
.sw-VideoA_Video .vjs-waiting .vjs-loading-spinner {
  display: block;
  -webkit-animation: 0s linear 0.3s forwards vjs-spinner-show;
  animation: 0s linear 0.3s forwards vjs-spinner-show;
}

.sw-VideoA_Video .vjs-loading-spinner::before,
.sw-VideoA_Video .vjs-loading-spinner::after {
  content: "";
  position: absolute;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  margin: -6px;
  border: inherit;
  border-color: transparent;
  border-top-color: white;
  border-radius: inherit;
  opacity: 1;
}

.sw-VideoA_Video .vjs-seeking .vjs-loading-spinner::before,
.sw-VideoA_Video .vjs-seeking .vjs-loading-spinner::after,
.sw-VideoA_Video .vjs-waiting .vjs-loading-spinner::before,
.sw-VideoA_Video .vjs-waiting .vjs-loading-spinner::after {
  -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
  animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
}

.sw-VideoA_Video .vjs-seeking .vjs-loading-spinner::before,
.sw-VideoA_Video .vjs-waiting .vjs-loading-spinner::before {
  border-top-color: white;
}

.sw-VideoA_Video .vjs-seeking .vjs-loading-spinner::after,
.sw-VideoA_Video .vjs-waiting .vjs-loading-spinner::after {
  border-top-color: white;
  -webkit-animation-delay: 0.44s;
  animation-delay: 0.44s;
}

.sw-VideoA_Video .vjs-chapters-button .vjs-menu ul {
  width: 24em;
}

.sw-VideoA_Video .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: -0.1em;
}

.sw-VideoA_Video .video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder::before {
  content: "\f10d";
  font-family: "iconfont";
  font-size: 1.5em;
  line-height: inherit;
}

.sw-VideoA_Video .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: -0.1em;
}

.sw-VideoA_Video .video-js .vjs-audio-button + .vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder::before {
  content: " \f11d";
  font-family: "iconfont";
  font-size: 1.5em;
  line-height: inherit;
}

.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
  display: block;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
}

.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer {
  width: auto;
}

.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-panel,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subs-caps-button,
.sw-VideoA_Video .video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button {
  display: none;
}

.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-panel,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subs-caps-button,
.sw-VideoA_Video .video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button {
  display: none;
}

.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-panel,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button,
.sw-VideoA_Video .video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-audio-button {
  display: none;
}

.sw-VideoA_Video .vjs-modal-dialog.vjs-text-track-settings {
  height: 70%;
  background-color: #2b333f;
  background-color: rgba(43, 51, 63, 0.75);
  color: #fff;
}

.sw-VideoA_Video .vjs-text-track-settings .vjs-modal-dialog-content {
  display: table;
}

.sw-VideoA_Video .vjs-text-track-settings .vjs-track-settings-colors,
.sw-VideoA_Video .vjs-text-track-settings .vjs-track-settings-font,
.sw-VideoA_Video .vjs-text-track-settings .vjs-track-settings-controls {
  display: table-cell;
}

.sw-VideoA_Video .vjs-text-track-settings .vjs-track-settings-controls {
  vertical-align: bottom;
  text-align: right;
}

.sw-VideoA_Video .vjs-track-setting > select {
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.sw-VideoA_Video .vjs-text-track-settings fieldset {
  margin: 5px;
  padding: 3px;
  border: none;
}

.sw-VideoA_Video .vjs-text-track-settings fieldset span {
  display: inline-block;
}

.sw-VideoA_Video .vjs-text-track-settings fieldset span > select {
  max-width: 7.3em;
}

.sw-VideoA_Video .vjs-text-track-settings legend {
  margin: 0 0 5px 0;
  color: #fff;
}

.sw-VideoA_Video .vjs-text-track-settings .vjs-label {
  display: block;
  position: absolute;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  margin: 0 0 5px 0;
  padding: 0;
  border: 0;
}

.sw-VideoA_Video .vjs-track-settings-controls button:focus,
.sw-VideoA_Video .vjs-track-settings-controls button:active {
  outline-width: medium;
  outline-style: solid;
  background-image: linear-gradient(0deg, #fff 88%, #73859f 100%);
}

.sw-VideoA_Video .vjs-track-settings-controls button:hover {
  color: rgba(43, 51, 63, 0.75);
}

.sw-VideoA_Video .vjs-track-settings-controls button {
  border-radius: 2px;
  background-color: #fff;
  background-image: linear-gradient(-180deg, #fff 88%, #73859f 100%);
  color: #2b333f;
  cursor: pointer;
}

.sw-VideoA_Video .vjs-track-settings-controls .vjs-default-button {
  margin-right: 1em;
}

.sw-VideoA_Video .vjs-resize-manager {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
  width: 100%;
  height: 100%;
  border: none;
}

.sw-VideoA_Video .js-focus-visible .video-js *:focus:not(.focus-visible) {
  outline: none;
  background: none;
}

.sw-VideoA_Video .video-js *:focus:not(.focus-ring),
.sw-VideoA_Video .video-js .vjs-menu *:focus:not(.focus-ring) {
  outline: none;
  background: none;
}

.sw-VideoA_Video .video-js {
  /* The base font size controls the size of everything, not just text.
         All dimensions use em-based sizes so that the scale along with the font size.
         Try increasing it to 15px and see what happens. */
  font-size: 10px;
  /* The main font color changes the ICON COLORS as well as the text */
  color: #fff;
}

.sw-VideoA_Video .vjs-default-skin .vjs-big-play-button {
  /* We're using SCSS vars here because the values are used in multiple places.
         Now that font size is set, the following em values will be a multiple of the
         new font size. If the font-size is 3em (30px), then setting any of
         the following values to 3em would equal 30px. 3 * font-size. */
  /* 1.5em = 45px default */
  width: 3em;
  height: 1.5em;
  /* The font size is what makes the big play button...big.
         All width/height values use ems, which are a multiple of the font size.
         If the .video-js font-size is 10px, then 3em equals 30px. */
  font-size: 3em;
  line-height: 1.5em;
  /* 0.06666em = 2px default */
  border: 0.06666em solid #fff;
  /* 0.3em = 9px default */
  border-radius: 0.3em;
  /* Align center */
  left: 50%;
  top: 50%;
  margin-left: -1.5em;
  margin-top: -0.75em;
}

.sw-VideoA_Video .video-js .vjs-control-bar,
.sw-VideoA_Video .video-js .vjs-big-play-button,
.sw-VideoA_Video .video-js .vjs-menu-button .vjs-menu-content {
  /* IE8 - has no alpha support */
  background-color: #2b333f;
  /* Opacity: 1.0 = 100%, 0.0 = 0% */
  background-color: rgba(43, 51, 63, 0.7);
}

.sw-VideoA_Video .video-js .vjs-slider {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.sw-VideoA_Video .video-js .vjs-volume-level,
.sw-VideoA_Video .video-js .vjs-play-progress,
.sw-VideoA_Video .video-js .vjs-slider-bar {
  background: #fff;
}

.sw-VideoA_Video .video-js .vjs-load-progress {
  /* For IE8 we'll lighten the color */
  background: #bfc7d3;
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(115, 133, 159, 0.5);
}

.sw-VideoA_Video .video-js .vjs-load-progress div {
  /* For IE8 we'll lighten the color */
  background: white;
  /* Otherwise we'll rely on stacked opacities */
  background: rgba(115, 133, 159, 0.75);
}

@font-face {
  .sw-VideoA_Video {
    font-family: "iconfont";
    font-weight: normal;
    font-style: normal;
    src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABBIAAsAAAAAGoQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV3RY21hcAAAAYQAAADQAAADIjn098ZnbHlmAAACVAAACv4AABEIAwnSw2hlYWQAAA1UAAAAKwAAADYV1OgpaGhlYQAADYAAAAAbAAAAJA4DByFobXR4AAANnAAAAA8AAACE4AAAAGxvY2EAAA2sAAAARAAAAEQ9NEHGbWF4cAAADfAAAAAfAAAAIAEyAIFuYW1lAAAOEAAAASUAAAIK1cf1oHBvc3QAAA84AAABDwAAAZ5AAl/0eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGQ7xTiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGBHcRdyA4RZgQRAC4HCwEAAHic7dFprsIgAEXhg8U61XmeWcBb1FuQP4w7ZQXK5boMm3yclFDSANAHmuKviBBeBPQ8ymyo8w3jOh/5r2ui5nN6v8sYNJb3WMdeWRvLji0DhozKdxM6psyYs2DJijUbtuzYc+DIiTMXrty4k8oGLb+n0xCe37ekM7Z66j1DbUy3l6PpHnLfdLO5NdSBoQ4NdWSoY9ON54mhdqa/y1NDnRnq3FAXhro01JWhrg11Y6hbQ90Z6t5QD4Z6NNSToZ4N9WKoV0O9GerdUJORPqkhTd54nJ1YDXBU1RV+576/JBs2bPYPkrDZt5vsJrv53V/I5mclhGDCTwgGBQQSTEji4hCkYIAGd4TGIWFAhV0RQTpWmQp1xv6hA4OTOlNr2zFANbHUYbq2OtNCpViRqsk+e+7bTQAhzti8vPfuPffcc88959zznbcMMPjHD/KDDGEY0ABpYX384NhlomIYlo4JISGEY9mMh2FSidYiqkEUphtNYDSY/dXg9023l4DdxlqUl0chuZRhncJKrsCQHIwcGuwfnhMIzBnuH4Sym+1D2zaGjheXlhYfD238z80mKYMmvJ5XeOTzd8z9eujbMxJNhu4C9xPE/bCMiDuSNIWgkTQwBE55hLSAE7ZwhrHLnAHZOGV/kmBGTiNjZxzI77Hb7Hqjz68TjT6vh+5JT/cCIkqS0D6CqPf5jX4Qjdx5j6vlDfZM4aZFdbVXIxtOlJaP/WottMnH6CJQ3bTiue3PrY23HjnChtuamxwvvzFjxkPrNj3z0tG9T561HDYf6OgmRWvlY3JQHoQb8ltV2Yet7YfWctEjR1AtxS/cSX6U4alf6NJEBQ7YKg9wrXQKd0IeZCb2ux75Uhh1Un+Nz+9LTOE7PK777nN5xqdTneTBhCbx446mZrhnUkrCz2YhA9dSMxaG0SYmT8hi9ZPu1E94PJYQSH6LRmhxec7Q7ZeXntgQuVpbh+a4qWNsckVyTdn0P7o7DpgPW84+uRcq0BITflBikGdUjAZ9wYBVI3mtrNvr9kpg1UsaK6t3690aoorC1lg0GpMH2HAMtkZjsSi5Ig9ESVosOh7GQfLjKNLvKpMKkLSKNFAka710GdgSi8oDMSoNhqjkKBXTgn3swtaxyzGkUzIzae9RtLdWkSlZ1KDX6EzgllzV4NV4SoDFSOGD4+HCeQUF8wrZ5Hs8zIb5EaVxy8DYFTbMCJPnLIWZxugZE2NlivC0gc1qEQUR8jEKgZcAXeH18BiCgl5nlHh0CrjB4Hb5fX4gb0J7c9PuHVsfgkx2n/vTY/JV8kn8PGxf7faOZ8qX8JVByuIf4whk9sqXli2hvPJV9hrp0hY7l8r2x37ydaVsb4xvXv/47v2NjfCl8m5oRDJclFMoE1yk0Uh1Te4/m8lFXe9qBZD0EkheicebXvzI2PLCuoKCukLuhPIeKwaHPEouxw3kMqaIUXDQ1p0mip+MyCORSCQaoUsnY1VZ38nUTrG21WvVo4f1OsEJFhvSfAFwGfT8VHRMeAVUpwLOoLzjT/REIj3O3FhuURE+nERF+0pTId5Fyxv5sfwGyg4O+my4vZv0sZm7oeQlFZORiB+tG0MweVNraeitl7yxiPIHTk4/diVxs94o5lEYishB2iAtkchEnsActoEpx44Fo8XnsQMaA22BlqC20RmhBKzYojZyYaxg+JggMc4HHY2m+L9EkWSYljirOisrO7d3VorxzyZ6Vc4lJqITAu1b2wOBdrLElAP+bFc2eGaZFVbkmJktv5uT6Jlz5D/MnBFor6ig/JPnRViBsV3LNKGGqB1ChJ0tgQywlVLFJIuQgTFttwkiKxhyQdAZMdMYtSaoAewqfvXVYPAbDT6/1mez85YS8FSDywQ6NfAnef6FNEGMilnppyvn5rB6tTyq1pOceRWnp2WJEZFXHeX5oyoem1nTTgdqc4heDY7bOeKz63vnz+/dRx+s31Ht2JGanQ5seirfWJL9tjozU/12TnEjn5oux9OzU3ckGbBzBwNOyk69JykKH0n/0LM9A72tuwM3zQpIRu4AxiToseEpgPOmbROyFe9/X2yeUvoUsCyEvjcgs7fpWP3/aKlFN0+6HFUe6D9HFz/XPwBlN9tTqNyZjFJ8UO2RUT5/h4CptCctEyeisnOyXjALEp7dXKaQKf6O7IMnGjNNACRMLxqdYJX8eMLvmmd68D+ayBLyKKYZwYxDt/GNhzETDJ05Qxlyi3pi3/Z93ndYVSumgj0V/KkIFlO6+1K3fF2+3g0q+YtuSIf0bvmLqV09nnobI6hwcjIP8aPCKayjsF5JBY3LaKAeRLSyYB1h81oTwe9SlPMkXB7G0mfL9q71gaqqwPqu67QRKS1+ObTx+sbQy9QV2OQHEScGkdFBeT7v7qisqqrs6N52i78/R+6S0qQONVj26agOVoswCyQWIV5D86vH53bxNUeXV0K+XZaHv/nm/KsHhOvylwsWnJX/HE8l/4WCv5x+l5n08z6UU8bUMa3MBpSmM7F63AxntdC9eBCKEZW9Hr+ABNqtxgAQrSbMtmrW7lKQuoSgBhSrTazWVU2QAKWY8wiiuhqFmQgWJBgoXiuWIm42N7hqZbBsgXz52O5P5uSvaNgFGnOuvsRw8I8Laha91wMvDuxqWFheN7/8GVtTltdS83DQsXRmqc5ZtcJXEVrlV2doTWk5+Yunm71dG5f55m/qY0MjI93vv9/NfpxXV9sUXrxy2fbNy1or65cOlDRnOoKFeeXcbw42H/bNDT5Qs3flgs31gWC1lD1nfUV/X7NdCnSUdHY2e8afzfKsqZ5ZljfDqjLOmk3UebNXB+aHArPYDRs+/HDDxeT5DiP+sFg7OpRaVQMGBV89PpeBdj22hCE0Uub0UqwLrNWsG0cuyadgLXTeR5rbO4+3c/vl15cur2nRq+TXCQDcS3SO+s6ak+e5/eMS+1dw3btu3YG2tvFL8XdIZvdjdW6TO/4B7IdrZWVPmctm5/59AgsPItTSbCiIBr2OqIGzmu20SMKAS7yqwGBUfGfgjDYlLLDeF0SfcLB2LSx8flT+08/kzz6yOj96rft4rpTjdPQcmLd47uKibbDq7ZSz/XtbH2nN717Nd62rU+c8Icevvv7I09wA6WvjVcafb+FsbNG+ZQ80Rn6ZZsvrP7teP2dzTdoETvNhjCmsr8FID2sJ69VYvdUcxk4AzYRlKcaE38eXNRlfW9H1as9i6acLHp1XpuNB5K7DIvkX08y1ZYvh3KfWaiCzH+ztrSDmD7LuX73x/mJelB8Yj39t8nhNQJJ2CAthpoFGLsGgtSOCJooCGoaJAMTjSWHVZ08YAa1Fg9lPI5U6DOsGVjDasJeZZ+YyhfCwfOzCxlBA69M9XLXtza7H/rav+9Tjq5xNi0wpKQIRNO4Lrzz7yp5QVYM6Jd/oc1Uvn/mQhhuWh6ENXoS2YTZ8QT42bF5d/559zp5r0Uff2VnR2tdf2/WCOd2cO0Mw6qpWPnvxpV0nrt5fZd2yItc199GWe8vlNfNDq+CH/7yAAnB9hn7T4QO4c1g9ScxsZgmzntnE/IDGndtHMw69lFwoCnYsMGx+rBp8JSBqdLzBr9QRPq/PbhWMWFtQZp1xguy/haw3TEHm3TWAnxFWQQWgt7M5OV0lCz1VRYucpWliy7z6Zd4urwPIyeZQqli2Lgg7szJV09PysATbOQtYIrB2YzbkJYkGgJ0m4AjPUap1pvYu1K9qr97z0Yl3p332b2LYB78ncYIlRkau/8GObSsOlZancACE5d5ily+c2+7h5Yj4lqhVmXXB+iXLfvdqSgqfKtQvfHDV0OnvQR1qhw42XS/vkvsh/hXcrDFP0a+SJNIomEfD1nsrYGO+1bgTOJhM8Hv6ek+7vVglxuSRwoKn17S937bm6YJCeSSG0Op1n+7tE37tcZ/p7dsTv4EUrGpDbWueKigsLHhqTVsoEj+JU0kaSjnj9tz8/gryQWwJ9BcJXBC/7smO+I/IFURJetFPrdt5WcoL6DbEJaygI8CTHfQTjf40ofD+DwalTqIAAHicY2BkYGAA4gDud4bx/DZfGbjZGUDg+q1z05BpdkawOAcDE4gCAB45CXEAeJxjYGRgYGcAARD5/z87IwMjAypQBAAtgwI4AHicY2BgYGAfYAwAOkQA4QAAAAAAAA4AaAB+AMwA4AECAUIBbAGYAcICGAJYArQC4AMwA7AD3gQwBJYE3AUkBWYFigYgBmYGtAbqB1gIEghYCG4IhHicY2BkYGBQZChlYGcAASYg5gJCBob/YD4DABfTAbQAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2PyXLCMBBE3YCNDWEL2ffk7o8S8oCnkCVHC5C/jzBQlUP6IHVPzYyekl5y0iL5X5/ooY8BUmQYIkeBEca4wgRTzDDHAtdY4ga3uMM9HvCIJzzjBa94wzs+8ImvZNAq8TM+HqVkKxWlrQiOxjujQkNlEzyNzl6Z/cU2XF06at7U83VQyklLpEvSnuzsb+HAPnPfQVgaupa1Jlu4sPLsFblcitaz0dHU0ZF1qatjZ1+aTXYCmp6u0gSvWNPyHLtFZ+ZeXWVSaEkqs3T8S74WklbGbNNNq4LL4+CWKtZDv2cfX8l8aFbKFhEnJnJ+IULFpqwoQnNHlHaVQtPBl+ypmbSWdmyC61KS/AKZC3Y+AA==) format("woff");
  }
}

@keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}

@-webkit-keyframes vjs-spinner-show {
  to {
    visibility: visible;
  }
}

@keyframes vjs-spinner-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes vjs-spinner-spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}

@-webkit-keyframes vjs-spinner-fade {
  0% {
    border-top-color: #73859f;
  }
  20% {
    border-top-color: #73859f;
  }
  35% {
    border-top-color: white;
  }
  60% {
    border-top-color: #73859f;
  }
  100% {
    border-top-color: #73859f;
  }
}

@supports (display: grid) {
  .sw-VideoA_Video .vjs-text-track-settings .vjs-modal-dialog-content {
    display: grid;
    padding: 20px 24px 0 24px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  .sw-VideoA_Video .vjs-track-settings-controls .vjs-default-button {
    margin-bottom: 20px;
  }
  .sw-VideoA_Video .vjs-text-track-settings .vjs-track-settings-controls {
    grid-column: 1 / -1;
  }
  .sw-VideoA_Video .vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .sw-VideoA_Video .vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content,
  .sw-VideoA_Video .vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content {
    grid-template-columns: 1fr;
  }
}

/* stylelint-enable */
.sw-VideoA_VideoIcon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 3.125rem;
  height: 3.125rem;
  margin: auto;
  pointer-events: none;
}

/*
---
name: swm-AccordionA
namespace: swm-
category: InteractiveComponent
id: M_ACC-1
---

<span class="sw-Label">M_ACC-1</span>

- swm-AccordionA_Tabの間の要素がアコーディオンの要素になります

```jade
a.swm-AccordionA_Tab(role="button")
  | Belgium
  span.swm-AccordionA_TabIcon(aria-hidden="true")

ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Great Britain
    p.office-BoxA_CompanyName KYOCERA Fineceramics Ltd.
    p.office-BoxA_Text
      | Prospect House, Archipelago

      br
      | Lyon Way, Frimley

      br
      | Surrey GU16 7ER
    p.office-BoxA_Text
      | Phone: +44 (0)1276 - 69 34 50
      br
      | Fax: +44 (0)1276 - 69 34 60
    a.office-BoxA_Link(href="#") http://www.xxxx.com/hogehoge/hogehoge/hogehoge/hogehoge/hogehoge
      span.office-BoxA_IconExternal(aria-hidden="true")
    a.office-BoxA_Mail(href="mailto:salessupport@kyocera.de")
      span.office-BoxA_MailIcon(aria-hidden="true")
      span.office-BoxA_MailText salessupport@kyocera.de/hogehoge/hogehoge/hogehoge/hogehoge
    p.office-BoxA_Text Contact person: Jens Wittau

p
  a.swm-AccordionA_Tab(role="button")
    | Germany
    span.swm-AccordionA_TabIcon(aria-hidden="true")

ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Germany
    p.office-BoxA_CompanyName KYOCERA Fineceramics GmbH
    ul.office-BoxA_Grid
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Fritz-Müller-Straße 27
          br
          | 73730 Esslingen
        p.office-BoxA_Text
          | Phone: +49 (0)711 - 93 93 4-0
          br
          | Fax: +49 (0)711 - 93 93 4-950
        a.office-BoxA_Link(href="#" target="_blank") http://www.xxxx.com
          span.office-BoxA_IconExternalB(aria-hidden="true")
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Hammfelddamm 6
          br
          | 41460 Neuss
        p.office-BoxA_Text
          | Phone: +49 (0)2131 - 16 37-0
          br
          | Fax: +49 (0)2131 - 16 37-150
        a.office-BoxA_Link(href="#") http://www.xxxx.com
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau

a.swm-AccordionA_Tab(role="button")
  | Finland
  span.swm-AccordionA_TabIcon(aria-hidden="true")

ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Germany
    p.office-BoxA_CompanyName KYOCERA Fineceramics GmbH
    ul.office-BoxA_Grid
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Fritz-Müller-Straße 27
          br
          | 73730 Esslingen
        p.office-BoxA_Text
          | Phone: +49 (0)711 - 93 93 4-0
          br
          | Fax: +49 (0)711 - 93 93 4-950
        a.office-BoxA_Link(href="#" target="_blank") http://www.xxxx.com
          span.office-BoxA_IconExternalB(aria-hidden="true")
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Hammfelddamm 6
          br
          | 41460 Neuss
        p.office-BoxA_Text
          | Phone: +49 (0)2131 - 16 37-0
          br
          | Fax: +49 (0)2131 - 16 37-150
        a.office-BoxA_Link(href="#") http://www.xxxx.com
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
```

- swm-AccordionA_TabEndで、最後のアコーディオンの範囲を指定できます。
※わかりにくいですが、"Test"の前に`swm-AccordionA_TabEnd`があります。

```jade
a.swm-AccordionA_Tab(role="button")
  | Belgium
  span.swm-AccordionA_TabIcon(aria-hidden="true")

ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Great Britain
    p.office-BoxA_CompanyName KYOCERA Fineceramics Ltd.
    p.office-BoxA_Text
      | Prospect House, Archipelago

      br
      | Lyon Way, Frimley

      br
      | Surrey GU16 7ER
    p.office-BoxA_Text
      | Phone: +44 (0)1276 - 69 34 50
      br
      | Fax: +44 (0)1276 - 69 34 60
    a.office-BoxA_Link(href="#") http://www.xxxx.com/hogehoge/hogehoge/hogehoge/hogehoge/hogehoge
      span.office-BoxA_IconExternal(aria-hidden="true")
    a.office-BoxA_Mail(href="mailto:salessupport@kyocera.de")
      span.office-BoxA_MailIcon(aria-hidden="true")
      span.office-BoxA_MailText salessupport@kyocera.de/hogehoge/hogehoge/hogehoge/hogehoge
    p.office-BoxA_Text Contact person: Jens Wittau

a.swm-AccordionA_Tab(role="button")
  | Finland
  span.swm-AccordionA_TabIcon(aria-hidden="true")

ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Germany
    p.office-BoxA_CompanyName KYOCERA Fineceramics GmbH
    ul.office-BoxA_Grid
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Fritz-Müller-Straße 27
          br
          | 73730 Esslingen
        p.office-BoxA_Text
          | Phone: +49 (0)711 - 93 93 4-0
          br
          | Fax: +49 (0)711 - 93 93 4-950
        a.office-BoxA_Link(href="#" target="_blank") http://www.xxxx.com
          span.office-BoxA_IconExternalB(aria-hidden="true")
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Hammfelddamm 6
          br
          | 41460 Neuss
        p.office-BoxA_Text
          | Phone: +49 (0)2131 - 16 37-0
          br
          | Fax: +49 (0)2131 - 16 37-150
        a.office-BoxA_Link(href="#") http://www.xxxx.com
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
.swm-AccordionA_TabEnd(aria-hidden)
p
  | Test
```

CMSでの表示。

```jade
.cms-Component_Editor
  a.swm-AccordionA_Tab(role="button")
    | Belgium
    span.swm-AccordionA_TabIcon(aria-hidden="true")
  
  ul.office-BoxA
    li.office-BoxA_Item
      h2.office-BoxA_Country Great Britain
      p.office-BoxA_CompanyName KYOCERA Fineceramics Ltd.
      p.office-BoxA_Text
        | Prospect House, Archipelago

        br
        | Lyon Way, Frimley

        br
        | Surrey GU16 7ER
      p.office-BoxA_Text
        | Phone: +44 (0)1276 - 69 34 50
        br
        | Fax: +44 (0)1276 - 69 34 60
      a.office-BoxA_Link(href="#") http://www.xxxx.com/hogehoge/hogehoge/hogehoge/hogehoge/hogehoge
        span.office-BoxA_IconExternal(aria-hidden="true")
      a.office-BoxA_Mail(href="mailto:salessupport@kyocera.de")
        span.office-BoxA_MailIcon(aria-hidden="true")
        span.office-BoxA_MailText salessupport@kyocera.de/hogehoge/hogehoge/hogehoge/hogehoge
      p.office-BoxA_Text Contact person: Jens Wittau
  .swm-AccordionA_TabEnd(aria-hidden)
  p
    | Test
```
*/
.swm-AccordionA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.swm-AccordionA_Tab {
  display: block;
  vertical-align: middle;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 1.375rem 2.125rem 1.25rem 2rem;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  border: none;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  border-radius: 0;
  background-color: #fff;
  color: #000;
  cursor: pointer;
  transition-duration: 0.3s;
  transition-property: background-color;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@media print, screen and (min-width: 768px) {
  .swm-AccordionA_Tab {
    padding: 1.6875rem 3.25rem 1.5625rem 3rem;
    font-size: 1.25rem;
  }
}

.swm-AccordionA_Tab[role="button"], .swm-AccordionA_Tab[type="button"], .swm-AccordionA_Tab[type="reset"], .swm-AccordionA_Tab[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swm-AccordionA_Tab:focus {
  outline: 0;
  box-shadow: 0;
}

.swm-AccordionA_Tab.focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

@media print, screen and (min-width: 1024px) {
  .swm-AccordionA_Tab:hover {
    background-color: #fbf2f1;
  }
}

.swm-AccordionA_Tab[aria-expanded="true"] {
  border-bottom-color: transparent;
}

.swm-AccordionA_Panel[aria-hidden="false"] + .swm-AccordionA_Tab {
  margin-top: 2.5rem;
}

.swm-AccordionA_Panel[aria-hidden="true"] + .swm-AccordionA_Tab {
  border-top-color: transparent;
}

.swm-AccordionA_Tab::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.625rem;
  width: 0.6875rem;
  height: 0.0625rem;
  margin: auto;
  border-top: 1px solid #df0523;
}

@media print, screen and (min-width: 768px) {
  .swm-AccordionA_Tab::before {
    left: 1.6875rem;
  }
}

.cms-Component_Editor .swm-AccordionA_Tab {
  pointer-events: none;
}

.swm-AccordionA_TabIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 0;
  right: 0.5rem;
  bottom: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: auto;
  font-size: 0.5em;
  border: 1px solid #dadada;
  border-radius: 50%;
  background-color: #fff;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-AccordionA_TabIcon {
    right: 1.3125rem;
    width: 1.9375rem;
    height: 1.9375rem;
  }
}

.swm-AccordionA_Tab[aria-expanded="true"] .swm-AccordionA_TabIcon {
  background-color: #f2f4f6;
}

.swm-AccordionA_TabIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .swm-AccordionA_TabIcon::before {
    font-size: 0.6em;
  }
}

.swm-AccordionA_Tab[aria-expanded="true"] .swm-AccordionA_TabIcon::before {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.swm-AccordionA_Panel {
  transition-timing-function: ease;
  transition-duration: 0.3s;
  transition-property: margin;
}

.swm-AccordionA_Panel[aria-hidden="true"] {
  visibility: hidden;
  overflow: hidden;
  height: 0;
  margin-top: -0.625rem;
  padding-top: 0.625rem;
}

.swm-AccordionA_Panel[aria-hidden="false"] {
  visibility: visible;
  overflow: visible;
  height: auto;
  margin-top: 0.625rem;
  padding: 0 0 0 2.1875rem;
}

@media print, screen and (min-width: 768px) {
  .swm-AccordionA_Panel[aria-hidden="false"] {
    padding-left: 5rem;
  }
}

.swm-AccordionA_Panel > :last-child {
  margin-bottom: 0;
}

.swm-AccordionA_TabEnd {
  display: none;
  height: 0;
}

.cms-Component_Editor .swm-AccordionA_TabEnd {
  display: block;
  width: 100%;
  height: 40px;
  margin: 20px 0;
  line-height: 20px;
  background: #ccc;
  text-align: center;
  font-size: 1rem;
}

.cms-Component_Editor .swm-AccordionA_TabEnd::before {
  display: inline-block;
  line-height: 40px;
  content: "M_ACC-1_END";
}

/*
---
name: swm-BoxA
namespace: swm-
category: Block
id: [M_BOX-4A, M_BOX-4B]
---

<span class="sw-Label">M_BOX-4A</span>

Productsで使用される製品リストです。

- ボタンでページに遷移します（クリック範囲はボタンのみ）
- ボタンに.swm-LinkIcon~を付けるとリンクアイコンを表示します

```jade
.swm-BoxA.swm-BoxA-col6to6
  .swm-BoxA_Item
    .swm-BoxA_Box
      .swm-BoxA_Head
        span.swm-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt)
      .swm-BoxA_Body
        h3.swm-BoxA_Heading UV lighting
        p.swm-BoxA_Lead A good choice from all points of view
        p.swm-BoxA_Text Kyocera have been developing and manufacturing photovoltaic modules for nearly 45 years. Our modules
        p.swm-BoxA_Text Kyocera have been developing and manufacturing
          a.swm-BoxA_Link(href="#")  photovoltaic modules
            span.swm-BoxA_LinkExternalA(aria-hidden="true")
          |  for nearly 45 years. Our modules
        p.swm-BoxA_Text Kyocera have been developing and manufacturing
          a.swm-BoxA_Link(href="#")  photovoltaic modules
            span.swm-BoxA_LinkExternalB(aria-hidden="true")
          |  for nearly 45 years. Our modules
        p.swm-BoxA_Text Kyocera have been developing and manufacturing
          a.swm-BoxA_Link(href="#")  photovoltaic modules
          |  for nearly 45 years. Our modules
        ul.swm-BoxA_ListUnorder
          li UV hardening (printing industry)
          li Purification
          li Sensing
          li Sterilization
        a.swm-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
```

<span class="sw-Label">M_BOX-4B</span>

```jade
.swm-BoxA.swm-BoxA-col4to8
  .swm-BoxA_Item
    .swm-BoxA_Box
      .swm-BoxA_Head
        span.swm-BoxA_Image
          img(src="/assets/img/common/img_690_296.jpg" alt)
      .swm-BoxA_Body
        h3.swm-BoxA_Heading Heaters for Oxygen Sensors
        p.swm-BoxA_Lead A good choice from all points of view
        p.swm-BoxA_Text Can activate oxygen sensors immediately after the engine starts, which detect oxygen concentration in the exhaust gas of vehicles
        ul.swm-BoxA_ListUnorder
          li Rapid heat up
          li High temperature durability
          li High operating temperature range
          li Long lifetime
          li Robust
        a.swm-BoxA_more(href="/products/automotive_components/heaters/automotive_led.html")
          | SN Header
```
*/
.swm-BoxA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

.swm-BoxA_Item {
  padding-bottom: 1.875rem;
}

.swm-BoxA_Item:nth-of-type(n + 2) {
  padding-top: 1.875rem;
  border-top: 1px solid #dadada;
}

.swm-BoxA_Item:last-of-type {
  padding-bottom: 1.875rem;
  border-bottom: 1px solid #dadada;
}

.swm-BoxA_Box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -2.125rem;
}

.swm-BoxA_Head {
  width: 100%;
  padding-left: 2.125rem;
}

@media print, screen and (min-width: 768px) {
  .swm-BoxA-col1to11 .swm-BoxA_Head {
    width: 8.33333%;
  }
  .swm-BoxA-col2to10 .swm-BoxA_Head {
    width: 16.66667%;
  }
  .swm-BoxA-col3to9 .swm-BoxA_Head {
    width: 25%;
  }
  .swm-BoxA-col4to8 .swm-BoxA_Head {
    width: 33.33333%;
  }
  .swm-BoxA-col5to7 .swm-BoxA_Head {
    width: 41.66667%;
  }
  .swm-BoxA-col6to6 .swm-BoxA_Head {
    width: 50%;
  }
  .swm-BoxA-col7to5 .swm-BoxA_Head {
    width: 58.33333%;
  }
  .swm-BoxA-col8to4 .swm-BoxA_Head {
    width: 66.66667%;
  }
  .swm-BoxA-col9to3 .swm-BoxA_Head {
    width: 75%;
  }
  .swm-BoxA-co10to2 .swm-BoxA_Head {
    width: 83.33333%;
  }
  .swm-BoxA-col11to1 .swm-BoxA_Head {
    width: 91.66667%;
  }
}

.swm-BoxA_Image {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.swm-BoxA_Image > img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.swm-BoxA_Body {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  width: 100%;
  max-width: 100%;
  margin-top: 0.8125rem;
  padding-left: 2.125rem;
}

@media print, screen and (min-width: 768px) {
  .swm-BoxA_Body {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-top: 0;
  }
}

.swm-BoxA_Body::after {
  content: "";
  clear: both;
  display: block;
}

.swm-BoxA_Heading {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

.swm-BoxA_Lead {
  margin-bottom: 1.0625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.6;
  color: #000;
}

.swm-BoxA_Text {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-BoxA_Text {
    margin-bottom: 1.125rem;
  }
}

.swm-BoxA_Link {
  text-decoration: underline;
  color: #df0523;
}

.swm-BoxA_Link:hover {
  text-decoration: none;
}

.swm-BoxA_LinkExternalA,
.swm-BoxA_LinkExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.swm-BoxA_LinkExternalA::before,
.swm-BoxA_LinkExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.1em;
}

.swm-BoxA_LinkExternalA::before {
  content: "";
}

.swm-BoxA_LinkExternalB::before {
  content: "";
}

.swm-BoxA_ListUnorder {
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
}

.swm-BoxA_ListUnorder > li {
  position: relative;
  margin-bottom: 0.3125rem;
}

.swm-BoxA_ListUnorder > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5625rem;
  left: -0.9375rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 2.5px solid #fc9898;
  border-radius: 50%;
}

.swm-BoxA_ListUnorder > :last-child {
  margin-bottom: 0;
}

.swm-BoxA_more {
  display: block;
  width: 100%;
  max-width: 60.28986%;
  margin: 1.25rem auto 0;
  padding: 0.625rem 0.9375rem 0.75rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1px solid #df0523;
  border-radius: 4px;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .swm-BoxA_more {
    float: right;
    width: auto;
    max-width: none;
    margin-right: 0;
  }
}

.swm-BoxA_more:hover {
  background-color: #df0523;
  color: #fff;
}

.swm-BoxA_moreExternal {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.swm-BoxA_moreExternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.swm-BoxA_moreExternalB {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.swm-BoxA_moreExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

/*
---
name: swm-Button
namespace: swm-
category: Button
id: [M_BTN-1, M_BTN-2, M_BTN-2A, M_BTN-2B, M_BTN-4]
---

<span class="sw-Label">M_BTN-1</span>
```jade
div.l-ButtonC
  a.swm-Button(href="#") Button
```
<span class="sw-Label">M_BTN-1-C</span>
```jade
div.l-ButtonC.l-ButtonC-center
  a.l-ButtonC_Item.swm-Button(href="#") Button
```
<span class="sw-Label">M_BTN-1-R</span>
```jade
div.l-ButtonC.l-ButtonC-right
  a.l-ButtonC_Item.swm-Button(href="#") Button
```

<span class="sw-Label">M_BTN-2A</span>
```jade
div.l-ButtonC
  a.swm-Button.swm-Button-small(href="#") Button
```
<span class="sw-Label">M_BTN-2A-C</span>
```jade
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-small(href="#") Button
```
<span class="sw-Label">M_BTN-2A-R</span>
```jade
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-small(href="#") Button
```

<span class="sw-Label">M_BTN-4</span>
```jade
div.l-ButtonC
  a.swm-Button.swm-Button-danger(href="#") Button
```
<span class="sw-Label">M_BTN-4-C</span>
```jade
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-danger(href="#") Button
```
<span class="sw-Label">M_BTN-4-R</span>
```jade
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-danger(href="#") Button
```

*/
.swm-Button {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swm-Button:hover, .swm-Button:active, .swm-Button:focus {
  text-decoration: none;
}

.swm-Button[type="button"], .swm-Button[type="reset"], .swm-Button[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.swm-Button:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.swm-Button:disabled, .swm-Button-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.swm-Button-disabled {
  pointer-events: none;
}

.swm-Button:not(.swm-Button-disabled):not(:disabled):hover {
  background-color: #df0523;
  color: #fff;
}

.swm-Button.swm-LinkIconA, .swm-Button.swm-LinkIconB, .swm-Button.swm-LinkIconPdf, .swm-Button.swm-LinkIconArrow {
  padding: 0.75rem 1.25rem 0.6875rem 1.5rem;
}

.swm-Button-small {
  padding: 0.75rem 0.9375rem 0.6875rem;
  font-size: 0.8125rem;
  border-radius: 0.23077em;
}

.swm-Button-danger {
  padding: 0.6875rem 0.9375rem 0.625rem;
  font-weight: 600;
  background-color: #df0523;
  color: #fff;
}

.swm-Button-danger:not(.swm-Button-disabled):not(:disabled):hover {
  border-color: #b80f26;
  background: #b80f26;
}

.swm-Button-danger.swm-Button-disabled {
  border-color: #bcbcbc;
  background-color: #bcbcbc;
}

/*
---
name: swm-LinkIcon
namespace: swm-
category: Link
id: M_LINK_ICON
---

<span class="sw-Label">M_LINK_ICON</span>

swm-LinkIconA, B, Pdf, Arrowクラスをつけた要素の中の末尾にアイコンがつきます。  
html要素はjsで追加されます。

**クラス名とアイコンの意味**

クラス名 | 意味
--- | ---
swm-LinkIconA | ExternalA（グループ内サイト別窓）  
swm-LinkIconB | ExternalB（グループ外別窓）  
swm-LinkIconPdf | Pdf（PDFアイコン）  
swm-LinkIconArrow | Arrow（ > アイコン）  

以下、各ID内で使用した時の表示。

** LINK-2 **

```jade
a.sw-Link.swm-LinkIconA(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-Link.swm-LinkIconB(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-Link.swm-LinkIconPdf(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-Link.swm-LinkIconArrow(href="#")
  | global.kyocera.com/inamori/management/
br
```

** LINK-6 **

```jade
a.sw-LinkIcon.swm-LinkIconA(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-LinkIcon.swm-LinkIconB(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-LinkIcon.swm-LinkIconPdf(href="#")
  | global.kyocera.com/inamori/management/
br
a.sw-LinkIcon.swm-LinkIconArrow(href="#")
  | global.kyocera.com/inamori/management/
```

** LINK-7 **

```jade
a.sw-LinkArrow.swm-LinkIconA(href="#")
  | Contact Us
br
a.sw-LinkArrow.swm-LinkIconB(href="#")
  | Contact Us
br
a.sw-LinkArrow.swm-LinkIconPdf(href="#")
  | Contact Us
br
a.sw-LinkArrow.swm-LinkIconArrow(href="#")
  | Contact Us
```

** contact-BoxA **  
対応するIDなし

```jade
a.contact-BoxA_Link.swm-LinkIconA(href="http://www.kyoceradocumentsolutions.eu/" target="_blank")
  | Website
a.contact-BoxA_Link.swm-LinkIconB(href="http://www.kyoceradocumentsolutions.eu/" target="_blank")
  | Website
a.contact-BoxA_Link.swm-LinkIconPdf(href="http://www.kyoceradocumentsolutions.eu/" target="_blank")
  | Website
a.contact-BoxA_Link.swm-LinkIconArrow(href="http://www.kyoceradocumentsolutions.eu/" target="_blank")
  | Website
```

** BOX-4A, BOX-4B **

```jade
.dummy(style="position: relative;height: 70px;")
  a.sw-BoxA_more.swm-LinkIconA(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.sw-BoxA_more.swm-LinkIconB(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.sw-BoxA_more.swm-LinkIconPdf(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.sw-BoxA_more.swm-LinkIconArrow(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
```

** M_BOX-4A, M_BOX-4B **

```jade
.dummy(style="position: relative;height: 70px;")
  a.swm-BoxA_more.swm-LinkIconA(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.swm-BoxA_more.swm-LinkIconB(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.swm-BoxA_more.swm-LinkIconPdf(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
.dummy(style="position: relative;height: 70px;")
  a.swm-BoxA_more.swm-LinkIconArrow(href="/products/automotive_components/heaters/automotive_led.html")
    | SN Header
```

** BOX-5 **

```jade
a.event-BoxA_ContentLink.swm-LinkIconA(href="https://electronica.de/" target="_blank") https://electronica.de/
br
a.event-BoxA_ContentLink.swm-LinkIconB(href="https://electronica.de/" target="_blank") https://electronica.de/
br
a.event-BoxA_ContentLink.swm-LinkIconPdf(href="https://electronica.de/" target="_blank") https://electronica.de/
br
a.event-BoxA_ContentLink.swm-LinkIconArrow(href="https://electronica.de/" target="_blank") https://electronica.de/
```

** M_BOX-5A **

```jade
a.eventm-BoxA_ContentLink.swm-LinkIconA(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
br
a.eventm-BoxA_ContentLink.swm-LinkIconB(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
br
a.eventm-BoxA_ContentLink.swm-LinkIconPdf(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
br
a.eventm-BoxA_ContentLink.swm-LinkIconArrow(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
```

** M_BOX-5B **

```jade
a.eventm-BoxB_Link.swm-LinkIconA(href="https://ambiente.messefrankfurt.com/frankfurt/en.html") https://ambiente.messefrankfurt.com/frankfurt/en.html
br
a.eventm-BoxB_Link.swm-LinkIconB(href="https://ambiente.messefrankfurt.com/frankfurt/en.html") https://ambiente.messefrankfurt.com/frankfurt/en.html
br
a.eventm-BoxB_Link.swm-LinkIconPdf(href="https://ambiente.messefrankfurt.com/frankfurt/en.html") https://ambiente.messefrankfurt.com/frankfurt/en.html
br
a.eventm-BoxB_Link.swm-LinkIconArrow(href="https://ambiente.messefrankfurt.com/frankfurt/en.html") https://ambiente.messefrankfurt.com/frankfurt/en.html
br
```

** BOX-6 **

```jade
a.office-BoxA_Link.swm-LinkIconA(href="#") http://www.xxxx.com
br
a.office-BoxA_Link.swm-LinkIconB(href="#") http://www.xxxx.com
br
a.office-BoxA_Link.swm-LinkIconPdf(href="#") http://www.xxxx.com
br
a.office-BoxA_Link.swm-LinkIconArrow(href="#") http://www.xxxx.com
```

** BOX-9 **

```jade
a.home-Events_EventLink.swm-LinkIconA(href="https://electronica.de/index.html" target="_blank") https://electronica.de/index.html
br
a.home-Events_EventLink.swm-LinkIconB(href="https://electronica.de/index.html" target="_blank") https://electronica.de/index.html
br
a.home-Events_EventLink.swm-LinkIconPdf(href="https://electronica.de/index.html" target="_blank") https://electronica.de/index.html
br
a.home-Events_EventLink.swm-LinkIconArrow(href="https://electronica.de/index.html" target="_blank") https://electronica.de/index.html
```

** BTN-1 **

```jade
div
  a.sw-Button.swm-LinkIconA(href="#") Primary Button
div
  a.sw-Button.swm-LinkIconB(href="#") Primary Button
div
  a.sw-Button.swm-LinkIconPdf(href="#") Primary Button
div
  a.sw-Button.swm-LinkIconArrow(href="#") Primary Button
```

** M_BTN-1 **

```jade
div.l-ButtonC
  a.swm-Button.swm-LinkIconA(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-LinkIconB(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-LinkIconPdf(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-LinkIconArrow(href="#") Button
```

** M_BTN-1-C **

```jade
div.l-ButtonC.l-ButtonC-center
  a.l-ButtonC_Item.swm-Button.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.l-ButtonC_Item.swm-Button.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.l-ButtonC_Item.swm-Button.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.l-ButtonC_Item.swm-Button.swm-LinkIconArrow(href="#") Button
```

** M_BTN-1-R **

```jade
div.l-ButtonC.l-ButtonC-right
  a.l-ButtonC_Item.swm-Button.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.l-ButtonC_Item.swm-Button.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.l-ButtonC_Item.swm-Button.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.l-ButtonC_Item.swm-Button.swm-LinkIconArrow(href="#") Button
```

** BTN-2 **

```jade
a.sw-Button.sw-Button-icon.swm-LinkIconA(href="#") Primary Button
a.sw-Button.sw-Button-icon.swm-LinkIconB(href="#") Primary Button
a.sw-Button.sw-Button-icon.swm-LinkIconPdf(href="#") Primary Button
a.sw-Button.sw-Button-icon.swm-LinkIconArrow(href="#") Primary Button
```

** BTN-2A **

```jade
a.sw-Button.sw-Button-small.swm-LinkIconA(href="#") Small Primary
a.sw-Button.sw-Button-small.swm-LinkIconB(href="#") Small Primary
a.sw-Button.sw-Button-small.swm-LinkIconPdf(href="#") Small Primary
a.sw-Button.sw-Button-small.swm-LinkIconArrow(href="#") Small Primary
```

** BTN-2B **

```jade
a.sw-Button.sw-Button-smallIcon.swm-LinkIconA(href="#") Button
a.sw-Button.sw-Button-smallIcon.swm-LinkIconB(href="#") Button
a.sw-Button.sw-Button-smallIcon.swm-LinkIconPdf(href="#") Button
a.sw-Button.sw-Button-smallIcon.swm-LinkIconArrow(href="#") Button
```

** M_BTN-2A **

```jade
div.l-ButtonC
  a.swm-Button.swm-Button-small.swm-LinkIconA(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-small.swm-LinkIconB(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-small.swm-LinkIconPdf(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-small.swm-LinkIconArrow(href="#") Button
```

** M_BTN-2A-C **

```jade
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-small.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-small.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-small.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-small.swm-LinkIconArrow(href="#") Button
```

** M_BTN-2A-R **

```jade
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-small.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-small.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-small.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-small.swm-LinkIconArrow(href="#") Button
```

** BTN-4 **

```jade
a.sw-Button.sw-Button-full.swm-LinkIconA(href="#") Primary Button
a.sw-Button.sw-Button-full.swm-LinkIconB(href="#") Primary Button
a.sw-Button.sw-Button-full.swm-LinkIconPdf(href="#") Primary Button
a.sw-Button.sw-Button-full.swm-LinkIconArrow(href="#") Primary Button
div(style="height: 40px;")
a.sw-Button.sw-Button-small.sw-Button-full.swm-LinkIconA(href="#") Small Primary
a.sw-Button.sw-Button-small.sw-Button-full.swm-LinkIconB(href="#") Small Primary
a.sw-Button.sw-Button-small.sw-Button-full.swm-LinkIconPdf(href="#") Small Primary
a.sw-Button.sw-Button-small.sw-Button-full.swm-LinkIconArrow(href="#") Small Primary
div(style="height: 40px;")
a.sw-Button.sw-Button-danger.sw-Button-full.swm-LinkIconA(href="#") Primary Button
a.sw-Button.sw-Button-danger.sw-Button-full.swm-LinkIconB(href="#") Primary Button
a.sw-Button.sw-Button-danger.sw-Button-full.swm-LinkIconPdf(href="#") Primary Button
a.sw-Button.sw-Button-danger.sw-Button-full.swm-LinkIconArrow(href="#") Primary Button
```

** M_BTN-4 **

```jade
div.l-ButtonC
  a.swm-Button.swm-Button-danger.swm-LinkIconA(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-danger.swm-LinkIconB(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-danger.swm-LinkIconPdf(href="#") Button
div.l-ButtonC
  a.swm-Button.swm-Button-danger.swm-LinkIconArrow(href="#") Button
```

** M_BTN-4-C **

```jade
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-danger.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-danger.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-danger.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-center
  a.swm-Button.swm-Button-danger.swm-LinkIconArrow(href="#") Button
```

** M_BTN-4-R **

```jade
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-danger.swm-LinkIconA(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-danger.swm-LinkIconB(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-danger.swm-LinkIconPdf(href="#") Button
div.l-ButtonC.l-ButtonC-right
  a.swm-Button.swm-Button-danger.swm-LinkIconArrow(href="#") Button
```

** LINK-8 **

```jade
a.sw-ListArrow_Link.swm-LinkIconA(href="#") Slavery ActModern Slavery Act
br
a.sw-ListArrow_Link.swm-LinkIconB(href="#") Slavery ActModern Slavery Act
br
a.sw-ListArrow_Link.swm-LinkIconPdf(href="#") Slavery ActModern Slavery Act
br
a.sw-ListArrow_Link.swm-LinkIconArrow(href="#") Slavery ActModern Slavery Act
```

** CARD-1A, CARD-1B **

```jade
.sw-NavA_Body.swm-LinkIconA
  | Fine Ceramic Components
br
.sw-NavA_Body.swm-LinkIconB
  | Fine Ceramic Components
br
.sw-NavA_Body.swm-LinkIconPdf
  | Fine Ceramic Components
br
.sw-NavA_Body.swm-LinkIconArrow
  | Fine Ceramic Components
```

** M_CARD-1A, M_CARD-1B **

```jade
.swm-NavA_Body.swm-LinkIconA
  | Fine Ceramic Components
br
.swm-NavA_Body.swm-LinkIconB
  | Fine Ceramic Components
br
.swm-NavA_Body.swm-LinkIconPdf
  | Fine Ceramic Components
br
.swm-NavA_Body.swm-LinkIconArrow
  | Fine Ceramic Components
```

** CARD-2A, CARD-2B **

```jade
.sw-NavB_Body.swm-LinkIconA
  | Camera Image Sensors
br
.sw-NavB_Body.swm-LinkIconB
  | Camera Image Sensors
br
.sw-NavB_Body.swm-LinkIconPdf
  | Camera Image Sensors
br
.sw-NavB_Body.swm-LinkIconArrow
  | Camera Image Sensors
```

** M_CARD-2A, M_CARD-2B **

```jade
.swm-NavB_Body.swm-LinkIconA
  | Camera Image Sensors
br
.swm-NavB_Body.swm-LinkIconB
  | Camera Image Sensors
br
.swm-NavB_Body.swm-LinkIconPdf
  | Camera Image Sensors
br
.swm-NavB_Body.swm-LinkIconArrow
  | Camera Image Sensors
```

** CARD-3 **

```jade
.dummy(style="background-color: #ccc; position:relative; min-height: 50px;")
  p.home-RegionNav_Title.swm-LinkIconA
    | CSR Activities
.dummy(style="background-color: #ccc; position:relative; min-height: 50px;")
  p.home-RegionNav_Title.swm-LinkIconB
    | CSR Activities
.dummy(style="background-color: #ccc; position:relative; min-height: 50px;")
  p.home-RegionNav_Title.swm-LinkIconPdf
    | CSR Activities
.dummy(style="background-color: #ccc; position:relative; min-height: 50px;")
  p.home-RegionNav_Title.swm-LinkIconArrow
    | CSR Activities
```
*/
.sw-Link .swm-LinkIconA_Icon, .sw-Link
.swm-LinkIconB_Icon, .sw-Link
.swm-LinkIconPdf_Icon, .sw-Link
.swm-LinkIconArrow_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.sw-Link .swm-LinkIconA_Icon::before, .sw-Link
.swm-LinkIconB_Icon::before, .sw-Link
.swm-LinkIconPdf_Icon::before, .sw-Link
.swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.1em;
}

.sw-LinkIcon .swm-LinkIconA_Icon, .sw-LinkIcon
.swm-LinkIconB_Icon, .sw-LinkIcon
.swm-LinkIconPdf_Icon, .sw-LinkIcon
.swm-LinkIconArrow_Icon {
  display: inline-block;
  vertical-align: baseline;
}

.sw-LinkIcon .swm-LinkIconA_Icon::before, .sw-LinkIcon
.swm-LinkIconB_Icon::before, .sw-LinkIcon
.swm-LinkIconPdf_Icon::before, .sw-LinkIcon
.swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  top: -0.2em;
}

.sw-LinkArrow .swm-LinkIconA_Icon, .sw-LinkArrow
.swm-LinkIconB_Icon, .sw-LinkArrow
.swm-LinkIconPdf_Icon, .sw-LinkArrow
.swm-LinkIconArrow_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.75rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.sw-LinkArrow .swm-LinkIconA_Icon::before, .sw-LinkArrow
.swm-LinkIconB_Icon::before, .sw-LinkArrow
.swm-LinkIconPdf_Icon::before, .sw-LinkArrow
.swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow .swm-LinkIconA_Icon, .sw-LinkArrow_Link:hover .sw-LinkArrow
.swm-LinkIconB_Icon, .sw-LinkArrow_Link:hover .sw-LinkArrow
.swm-LinkIconPdf_Icon, .sw-LinkArrow_Link:hover .sw-LinkArrow
.swm-LinkIconArrow_Icon {
  color: #df0523;
}

.sw-Link .swm-LinkIconA_Icon::before {
  content: "";
}

.sw-LinkIcon .swm-LinkIconA_Icon {
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkIcon .swm-LinkIconA_Icon::before {
  content: "";
}

.sw-LinkArrow .swm-LinkIconA_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkArrow .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow .swm-LinkIconA_Icon {
  color: #df0523;
}

.sw-ListArrow_Link .swm-LinkIconA_Icon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_Link .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.contact-BoxA_Link .swm-LinkIconA_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.contact-BoxA_Link .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_Link .swm-LinkIconA_Icon {
  color: #df0523;
}

.sw-BoxA_more .swm-LinkIconA_Icon,
.swm-BoxA_more .swm-LinkIconA_Icon {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_more .swm-LinkIconA_Icon::before,
.swm-BoxA_more .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.event-BoxA_ContentLink .swm-LinkIconA_Icon,
.eventm-BoxA_ContentLink .swm-LinkIconA_Icon,
.eventm-BoxB_Link .swm-LinkIconA_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_ContentLink .swm-LinkIconA_Icon::before,
.eventm-BoxA_ContentLink .swm-LinkIconA_Icon::before,
.eventm-BoxB_Link .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Link .swm-LinkIconA_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_Link .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.home-Events_EventLink .swm-LinkIconA_Icon {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventLink .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-Button .swm-LinkIconA_Icon,
.swm-Button .swm-LinkIconA_Icon {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.sw-Button .swm-LinkIconA_Icon::before,
.swm-Button .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.swm-LinkIconA_Icon .sw-NavA_Body,
.swm-NavA_Body .swm-LinkIconA_Icon {
  position: relative;
  font-size: 0.6875rem;
}

.swm-LinkIconA_Icon .sw-NavA_Body::before,
.swm-NavA_Body .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_Body .swm-LinkIconA_Icon,
.swm-NavB_Body .swm-LinkIconA_Icon {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_Body .swm-LinkIconA_Icon::before,
.swm-NavB_Body .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.home-RegionNav_Title .swm-LinkIconA_Icon {
  position: relative;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-RegionNav_Title .swm-LinkIconA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.sw-Link .swm-LinkIconB_Icon::before {
  content: "";
}

.sw-LinkIcon .swm-LinkIconB_Icon {
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkIcon .swm-LinkIconB_Icon::before {
  content: "";
}

.sw-LinkArrow .swm-LinkIconB_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkArrow .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow .swm-LinkIconB_Icon {
  color: #df0523;
}

.sw-ListArrow_Link .swm-LinkIconB_Icon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_Link .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.contact-BoxA_Link .swm-LinkIconB_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.contact-BoxA_Link .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_Link .swm-LinkIconB_Icon {
  color: #df0523;
}

.sw-BoxA_more .swm-LinkIconB_Icon,
.swm-BoxA_more .swm-LinkIconB_Icon {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_more .swm-LinkIconB_Icon::before,
.swm-BoxA_more .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.event-BoxA_ContentLink .swm-LinkIconB_Icon,
.eventm-BoxA_ContentLink .swm-LinkIconB_Icon,
.eventm-BoxB_Link .swm-LinkIconB_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_ContentLink .swm-LinkIconB_Icon::before,
.eventm-BoxA_ContentLink .swm-LinkIconB_Icon::before,
.eventm-BoxB_Link .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Link .swm-LinkIconB_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_Link .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.home-Events_EventLink .swm-LinkIconB_Icon {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventLink .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-Button .swm-LinkIconB_Icon,
.swm-Button .swm-LinkIconB_Icon {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.sw-Button .swm-LinkIconB_Icon::before,
.swm-Button .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.sw-NavA_Body .swm-LinkIconB_Icon,
.swm-NavA_Body .swm-LinkIconB_Icon {
  position: relative;
  font-size: 0.6875rem;
}

.sw-NavA_Body .swm-LinkIconB_Icon::before,
.swm-NavA_Body .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_Body .swm-LinkIconB_Icon,
.swm-NavB_Body .swm-LinkIconB_Icon {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_Body .swm-LinkIconB_Icon::before,
.swm-NavB_Body .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.home-RegionNav_Title .swm-LinkIconB_Icon {
  position: relative;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-RegionNav_Title .swm-LinkIconB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.sw-Link .swm-LinkIconPdf_Icon::before {
  content: "";
}

.sw-LinkIcon .swm-LinkIconPdf_Icon {
  height: 0.9375rem;
  margin-left: 0.375rem;
  font-size: 0.9375rem;
}

.sw-LinkIcon .swm-LinkIconPdf_Icon::before {
  content: "";
}

.sw-LinkArrow .swm-LinkIconPdf_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkArrow .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow .swm-LinkIconPdf_Icon {
  color: #df0523;
}

.sw-ListArrow_Link .swm-LinkIconPdf_Icon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_Link .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.contact-BoxA_Link .swm-LinkIconPdf_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.contact-BoxA_Link .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_Link .swm-LinkIconPdf_Icon {
  color: #df0523;
}

.sw-BoxA_more .swm-LinkIconPdf_Icon,
.swm-BoxA_more .swm-LinkIconPdf_Icon {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_more .swm-LinkIconPdf_Icon::before,
.swm-BoxA_more .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.event-BoxA_ContentLink .swm-LinkIconPdf_Icon,
.eventm-BoxA_ContentLink .swm-LinkIconPdf_Icon,
.eventm-BoxB_Link .swm-LinkIconPdf_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_ContentLink .swm-LinkIconPdf_Icon::before,
.eventm-BoxA_ContentLink .swm-LinkIconPdf_Icon::before,
.eventm-BoxB_Link .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Link .swm-LinkIconPdf_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_Link .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.home-Events_EventLink .swm-LinkIconPdf_Icon {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventLink .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-Button .swm-LinkIconPdf_Icon,
.swm-Button .swm-LinkIconPdf_Icon {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.sw-Button .swm-LinkIconPdf_Icon::before,
.swm-Button .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.sw-NavA_Body .swm-LinkIconPdf_Icon,
.swm-NavA_Body .swm-LinkIconPdf_Icon {
  position: relative;
  font-size: 0.6875rem;
}

.sw-NavA_Body .swm-LinkIconPdf_Icon::before,
.swm-NavA_Body .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_Body .swm-LinkIconPdf_Icon,
.swm-NavB_Body .swm-LinkIconPdf_Icon {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_Body .swm-LinkIconPdf_Icon::before,
.swm-NavB_Body .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.home-RegionNav_Title .swm-LinkIconPdf_Icon {
  position: relative;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-RegionNav_Title .swm-LinkIconPdf_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.sw-Link .swm-LinkIconArrow_Icon::before {
  content: "";
}

.sw-LinkIcon .swm-LinkIconArrow_Icon {
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.sw-LinkIcon .swm-LinkIconArrow_Icon::before {
  content: "";
}

.sw-LinkArrow .swm-LinkIconArrow_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.75rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.sw-LinkArrow .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .sw-LinkArrow .swm-LinkIconArrow_Icon {
  color: #df0523;
}

.sw-ListArrow_Link .swm-LinkIconArrow_Icon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.sw-ListArrow_Link .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.contact-BoxA_Link .swm-LinkIconArrow_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.contact-BoxA_Link .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_Link .swm-LinkIconArrow_Icon {
  color: #df0523;
}

.sw-BoxA_more .swm-LinkIconArrow_Icon,
.swm-BoxA_more .swm-LinkIconArrow_Icon {
  position: relative;
  margin-left: 0.3125rem;
  font-size: 0.8em;
}

.sw-BoxA_more .swm-LinkIconArrow_Icon::before,
.swm-BoxA_more .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.event-BoxA_ContentLink .swm-LinkIconArrow_Icon,
.eventm-BoxA_ContentLink .swm-LinkIconArrow_Icon,
.eventm-BoxB_Link .swm-LinkIconArrow_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_ContentLink .swm-LinkIconArrow_Icon::before,
.eventm-BoxA_ContentLink .swm-LinkIconArrow_Icon::before,
.eventm-BoxB_Link .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Link .swm-LinkIconArrow_Icon {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_Link .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.home-Events_EventLink .swm-LinkIconArrow_Icon {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventLink .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.sw-Button .swm-LinkIconArrow_Icon,
.swm-Button .swm-LinkIconArrow_Icon {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.sw-Button .swm-LinkIconArrow_Icon::before,
.swm-Button .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.sw-NavA_Body .swm-LinkIconArrow_Icon,
.swm-NavA_Body .swm-LinkIconArrow_Icon {
  position: relative;
  font-size: 0.6875rem;
}

.sw-NavA_Body .swm-LinkIconArrow_Icon::before,
.swm-NavA_Body .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.5em;
  color: #df0523;
}

.sw-NavB_Body .swm-LinkIconArrow_Icon,
.swm-NavB_Body .swm-LinkIconArrow_Icon {
  position: relative;
  font-size: 0.875rem;
}

.sw-NavB_Body .swm-LinkIconArrow_Icon::before,
.swm-NavB_Body .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.home-RegionNav_Title .swm-LinkIconArrow_Icon {
  position: relative;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-RegionNav_Title .swm-LinkIconArrow_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

/*
---
name: swm-ListDownload
namespace: swm-
category: List
id: [M_LINK-10]
---

ダウンロードリスト

<span class="sw-Label">M_LINK-10</span>

```jade
.swm-ListDownload_Item
  a.swm-ListDownload_Link(href="#")
    span.swm-ListDownload_DownloadIcon(aria-hidden="true")
    span.swm-ListDownload_Text Multi Layer - Open tooled package listMulti Layer - Open tooled package list
      span.swm-ListDownload_Size  (50.30 KB)
```

並べた例

```jade
.swm-ListDownload_Item
  a.swm-ListDownload_Link(href="#")
    span.swm-ListDownload_DownloadIcon(aria-hidden="true")
    span.swm-ListDownload_Text Multi Layer - Open tooled package listMulti Layer - Open tooled package list
      span.swm-ListDownload_Size  (50.30 KB)
.swm-ListDownload_Item
  a.swm-ListDownload_Link(href="#")
    span.swm-ListDownload_DownloadIcon(aria-hidden="true")
    span.swm-ListDownload_Text Single Layer - Open tooled package list
      span.swm-ListDownload_Size  (52.61 KB)
```

*/
.swm-ListDownload {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  font-size: 0.9375rem;
  line-height: 1.3;
  list-style-type: none;
}

.swm-ListDownload_Item {
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
  margin-top: -1px;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.swm-ListDownload_Link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0.9375rem 0 0.9375rem 1.25rem;
  text-decoration: none;
  color: #df0523;
  transition-duration: 0.3s;
}

.swm-ListDownload_Link:hover {
  text-decoration: none;
  background-color: #fbf2f1;
}

.swm-ListDownload_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.swm-ListDownload_DownloadIcon {
  width: 2rem;
  height: 1.375rem;
  font-size: 1.375rem;
  color: #df0523;
}

.swm-ListDownload_DownloadIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.swm-ListDownload_Size {
  color: #999;
}

/*
---
name: swm-ListOrderA
namespace: swm-
category: List
id: [M_LIST-2A]
---

<span class="sw-Label">M_LIST-2A</span>

入れ子に対応した順序リストです。

```jade
ol.swm-ListOrderA
  li Ordered nested list level 1
  li Ordered nested list level 1
  li Ordered nested list level 1 Ordered nested list level 1 Ordered nested list level 1
```
*/
.swm-ListOrderA {
  margin-left: 1.25rem;
  padding-left: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
  list-style-type: none;
}

.swm-ListOrderA > li {
  position: relative;
  margin-bottom: 0.3125rem;
}

.swm-ListOrderA > li::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5625rem;
  left: -0.9375rem;
  width: 0.3125rem;
  height: 0.3125rem;
  border: 2.5px solid #fc9898;
  border-radius: 50%;
}

.swm-ListOrderA > :last-child {
  margin-bottom: 0;
}

/*
---
name: swm-Margin
namespace: swm-
category: Block
id: [M_MARGIN-1, M_MARGIN-2, M_MARGIN-3, M_MARGIN-4, M_MARGIN-5]
---

<span class="sw-Label">M_MARGIN-A1</span>
<span class="sw-Label">M_MARGIN-A2</span>
<span class="sw-Label">M_MARGIN-A3</span>
<span class="sw-Label">M_MARGIN-A4</span>
<span class="sw-Label">M_MARGIN-A5</span>
<span class="sw-Label">M_MARGIN</span>

余白用のコンポーネントです。

```jade
.swm-Margin1(aria-hidden="true")
.swm-Margin2(aria-hidden="true")
.swm-Margin3(aria-hidden="true")
.swm-Margin4(aria-hidden="true")
.swm-Margin5(aria-hidden="true")
.swm-Margin(aria-hidden="true")
```

<span class="sw-Label">M_MARGIN-B1</span>
<span class="sw-Label">M_MARGIN-B2</span>
<span class="sw-Label">M_MARGIN-B3</span>
<span class="sw-Label">M_MARGIN-B4</span>
<span class="sw-Label">M_MARGIN-B5</span>
<span class="sw-Label">M_MARGIN</span>

罫線付き余白用のコンポーネントです。

```jade
.swm-Margin1(aria-hidden="true")
  .swm-Margin1_Line(aria-hidden="true")
.swm-Margin2(aria-hidden="true")
  .swm-Margin2_Line(aria-hidden="true")
.swm-Margin3(aria-hidden="true")
  .swm-Margin3_Line(aria-hidden="true")
.swm-Margin4(aria-hidden="true")
  .swm-Margin4_Line(aria-hidden="true")
.swm-Margin5(aria-hidden="true")
  .swm-Margin5_Line(aria-hidden="true")
```

CMSエディタ上での見え方

```jade
.cms-Component_Editor
  .swm-Margin1(aria-hidden="true")
  .swm-Margin2(aria-hidden="true")
  .swm-Margin3(aria-hidden="true")
  .swm-Margin4(aria-hidden="true")
  .swm-Margin5(aria-hidden="true")
  .swm-Margin(aria-hidden="true")
```

```jade
.cms-Component_Editor
  .swm-Margin1(aria-hidden="true")
    .swm-Margin1_Line(aria-hidden="true")
  .swm-Margin2(aria-hidden="true")
    .swm-Margin2_Line(aria-hidden="true")
  .swm-Margin3(aria-hidden="true")
    .swm-Margin3_Line(aria-hidden="true")
  .swm-Margin4(aria-hidden="true")
    .swm-Margin4_Line(aria-hidden="true")
  .swm-Margin5(aria-hidden="true")
    .swm-Margin5_Line(aria-hidden="true")
```
*/
.swm-Margin1 {
  display: block;
  width: 100%;
  padding: 0;
  height: 0rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin1 {
    height: 0.625rem;
  }
}

.sw-ListUnorder + .swm-Margin1 {
  height: 0rem;
}

.swm-Margin1 + * {
  margin-top: 0 !important;
}

.cms-Component_Editor .swm-Margin1 {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

.swm-Margin1_Line {
  display: block;
  width: 100%;
  padding: 0;
  height: 0rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin1_Line {
    height: 50%;
    border-bottom: 1px solid #e9e9e9;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
  }
}

.swm-Margin2 {
  display: block;
  width: 100%;
  padding: 0;
  height: 0.625rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin2 {
    height: 1.25rem;
  }
}

.sw-ListUnorder + .swm-Margin2 {
  height: 0.625rem;
}

.swm-Margin2 + * {
  margin-top: 0 !important;
}

.cms-Component_Editor .swm-Margin2 {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

.swm-Margin2_Line {
  display: block;
  width: 100%;
  padding: 0;
  height: 50%;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin2_Line {
    border-bottom: 1px solid #e9e9e9;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
  }
}

.swm-Margin3 {
  display: block;
  width: 100%;
  padding: 0;
  height: 1.25rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin3 {
    height: 1.875rem;
  }
}

.sw-ListUnorder + .swm-Margin3 {
  height: 1.25rem;
}

.swm-Margin3 + * {
  margin-top: 0 !important;
}

.cms-Component_Editor .swm-Margin3 {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

.swm-Margin3_Line {
  display: block;
  width: 100%;
  padding: 0;
  height: 50%;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin3_Line {
    border-bottom: 1px solid #e9e9e9;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
  }
}

.swm-Margin4 {
  display: block;
  width: 100%;
  padding: 0;
  height: 1.875rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin4 {
    height: 2.5rem;
  }
}

.sw-ListUnorder + .swm-Margin4 {
  height: 2.5rem;
}

.swm-Margin4 + * {
  margin-top: 0 !important;
}

.cms-Component_Editor .swm-Margin4 {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

.swm-Margin4_Line {
  display: block;
  width: 100%;
  padding: 0;
  height: 50%;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin4_Line {
    border-bottom: 1px solid #e9e9e9;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
  }
}

.swm-Margin5 {
  display: block;
  width: 100%;
  padding: 0;
  height: 2.5rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin5 {
    height: 3.125rem;
  }
}

.sw-ListUnorder + .swm-Margin5 {
  height: 3.125rem;
}

.swm-Margin5 + * {
  margin-top: 0 !important;
}

.cms-Component_Editor .swm-Margin5 {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

.swm-Margin5_Line {
  display: block;
  width: 100%;
  padding: 0;
  height: 50%;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin5_Line {
    border-bottom: 1px solid #e9e9e9;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #e9e9e9;
  }
}

.swm-Margin {
  display: block;
  width: 100%;
  padding: 0;
  height: 2.5rem;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .swm-Margin {
    height: 3.125rem;
  }
}

.swm-Margin + :not(.swm-Margin) {
  margin-top: 0 !important;
}

.sw-ListUnorder + .swm-Margin,
.swm-BoxA + .swm-Margin,
.eventm-BoxB_Item + .swm-Margin {
  margin-top: -1.875rem;
}

.sw-Text + .swm-Margin {
  margin-top: -1.25rem;
}

.sw-LeadB + .swm-Margin {
  margin-top: -1.875rem;
}

@media print, screen and (min-width: 768px) {
  .sw-LeadB + .swm-Margin {
    margin-top: -2.5rem;
  }
}

.cms-Component_Editor .swm-Margin {
  width: 100%;
  margin: 1.25rem 0 !important;
  border: dashed 2px #ccc;
}

/*
---
name: swm-NavB
namespace: swm-
category: Navigation
id: [M_CARD-2A, M_CARD-2B]
---

<span class="sw-Label">M_CARD-2A</span>

Productsページで使用されるナビゲーションです。

- ボタンに.swm-LinkIcon~を付けるとリンクアイコンを表示します

スマホ1カラム、タブレット2カラム

```jade
.swm-NavB.swm-NavB-col2Md
  .swm-NavB_Item
    a.swm-NavB_Box.swm-LinkIconArrow(href="#")
      .swm-NavB_Head
        span.swm-NavB_Thumbnail
          img(src="/assets/img/common/img_690_224.jpg" alt)
      .swm-NavB_Body.js-swmLinkIcon
        | Automotive
      .swm-NavB_Foot Alumina is the most widely used material among fine ceramics, and has the same sintered crystal structure (α-Al2O3) as sapphire and ruby. Its application is diverse due to its superb properties such as high insulation, high strength, high wear resistance and chemical resistance.
  .swm-NavB_Item
    a.swm-NavB_Box.swm-LinkIconArrow(href="#")
      .swm-NavB_Head
        span.swm-NavB_Thumbnail
          img(src="/assets/img/common/img_690_224.jpg" alt)
      .swm-NavB_Body.js-swmLinkIcon
        | LED Lighting
      .swm-NavB_Foot Silicon nitride (Si3N4) exceeds other ceramics in thermal shock resistance. As its strength does not deteriorate at elevated temperatures, it is appropriate material for automotive engine and gas turbine parts, including turbo-charger rotors, diesel engine glow plugs and hot plugs.
```

<span class="sw-Label">M_CARD-2B</span>

スマホ1カラム、タブレット3カラム

```jade
.swm-NavB.swm-NavB-col3Md
  .swm-NavB_Item
    a.swm-NavB_Box.swm-LinkIconArrow(href="#")
      .swm-NavB_Head
        span.swm-NavB_Thumbnail
          img(src="/assets/img/common/img_690_224.jpg" alt)
      .swm-NavB_Body.js-swmLinkIcon
        | Automotive
      .swm-NavB_Foot Alumina is the most widely used material among fine ceramics, and has the same sintered crystal structure (α-Al2O3) as sapphire and ruby. Its application is diverse due to its superb properties such as high insulation, high strength, high wear resistance and chemical resistance.
  .swm-NavB_Item
    a.swm-NavB_Box.swm-LinkIconA(href="#")
      .swm-NavB_Head
        span.swm-NavB_Thumbnail
          img(src="/assets/img/common/img_690_224.jpg" alt)
      .swm-NavB_Body.js-swmLinkIcon
        | LED Lighting
      .swm-NavB_Foot Silicon nitride (Si3N4) exceeds other ceramics in thermal shock resistance. As its strength does not deteriorate at elevated temperatures, it is appropriate material for automotive engine and gas turbine parts, including turbo-charger rotors, diesel engine glow plugs and hot plugs.
  .swm-NavB_Item
    a.swm-NavB_Box.swm-LinkIconB(href="#")
      .swm-NavB_Head
        span.swm-NavB_Thumbnail
          img(src="/assets/img/common/img_690_224.jpg" alt)
      .swm-NavB_Body.js-swmLinkIcon
        | Camera Image Sensors
      .swm-NavB_Foot Alumina is the most widely used material among fine ceramics, and has the same sintered crystal structure (α-Al2O3) as sapphire and ruby. Its application is diverse due to its superb properties such as high insulation, high strength, high wear resistance and chemical resistance.
```
*/
.swm-NavB {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB {
    margin-left: -1.875rem;
  }
}

.swm-NavB_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
  /* 1 Column */
}

@media print, screen and (min-width: 768px) {
  .swm-NavB_Item {
    padding-left: 1.875rem;
  }
}

.swm-NavB_Item:nth-of-type(n + 2) {
  margin-top: 0.9375rem;
}

/* 2 Columns */
.swm-NavB-col2 > .swm-NavB_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
}

.swm-NavB-col2 > .swm-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.swm-NavB-col2 > .swm-NavB_Item:nth-of-type(n + 3) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB-col2Md > .swm-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .swm-NavB-col2Md > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col2Md > .swm-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .swm-NavB-col2Lg > .swm-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .swm-NavB-col2Lg > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col2Lg > .swm-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .swm-NavB-col2Xl > .swm-NavB_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .swm-NavB-col2Xl > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col2Xl > .swm-NavB_Item:nth-of-type(n + 3) {
    margin-top: 1.5625rem;
  }
}

/* 3 Columns */
.swm-NavB-col3 > .swm-NavB_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.swm-NavB-col3 > .swm-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.swm-NavB-col3 > .swm-NavB_Item:nth-of-type(n + 4) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB-col3Md > .swm-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavB-col3Md > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col3Md > .swm-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .swm-NavB-col3Lg > .swm-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavB-col3Lg > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col3Lg > .swm-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .swm-NavB-col3Xl > .swm-NavB_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavB-col3Xl > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col3Xl > .swm-NavB_Item:nth-of-type(n + 4) {
    margin-top: 1.5625rem;
  }
}

/* 4 Columns */
.swm-NavB-col4 > .swm-NavB_Item {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}

.swm-NavB-col4 > .swm-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.swm-NavB-col4 > .swm-NavB_Item:nth-of-type(n + 5) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB-col4Md > .swm-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .swm-NavB-col4Md > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col4Md > .swm-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .swm-NavB-col4Lg > .swm-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .swm-NavB-col4Lg > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col4Lg > .swm-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .swm-NavB-col4Xl > .swm-NavB_Item {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .swm-NavB-col4Xl > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col4Xl > .swm-NavB_Item:nth-of-type(n + 5) {
    margin-top: 1.5625rem;
  }
}

/* 5 Columns */
.swm-NavB-col5 > .swm-NavB_Item {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-width: 20%;
}

.swm-NavB-col5 > .swm-NavB_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.swm-NavB-col5 > .swm-NavB_Item:nth-of-type(n + 6) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB-col5Md > .swm-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .swm-NavB-col5Md > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col5Md > .swm-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .swm-NavB-col5Lg > .swm-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .swm-NavB-col5Lg > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col5Lg > .swm-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .swm-NavB-col5Xl > .swm-NavB_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .swm-NavB-col5Xl > .swm-NavB_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .swm-NavB-col5Xl > .swm-NavB_Item:nth-of-type(n + 6) {
    margin-top: 1.5625rem;
  }
}

.swm-NavB_Box {
  display: block;
  height: 100%;
  text-decoration: none;
  transition-duration: 0.3s;
}

.swm-NavB_Box:hover {
  text-decoration: none;
  opacity: 0.7;
}

.cms-Component_Editor .swm-NavB_Box {
  height: auto;
}

.swm-NavB_Thumbnail {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.swm-NavB_Thumbnail > img {
  display: block;
  width: 100%;
}

.swm-NavB_Body {
  padding: 1rem 0.9375rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.375;
  background: #f2f4f6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB_Body {
    font-size: 1rem;
  }
}

.swm-NavB_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 0.75rem;
  margin-left: 0.1875rem;
  font-size: 0.75rem;
}

.swm-NavB_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  color: #df0523;
}

.swm-NavB_IconExternalA {
  position: relative;
  font-size: 0.875rem;
}

.swm-NavB_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.swm-NavB_IconExternalB {
  position: relative;
  font-size: 0.875rem;
}

.swm-NavB_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.swm-NavB_Foot {
  margin-bottom: 0.625rem;
  padding-top: 0.9375rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-NavB_Foot {
    margin-bottom: 0;
    padding-top: 1.25rem;
  }
}

/*
---
name: swm-NavC
namespace: swm-
category: Navigation
id: [M_CARD-3A]
---

<span class="sw-Label">M_CARD-3A</span>

Careersページで使用されるナビゲーションです。

スマホ1カラム、タブレット3カラム

```jade
.swm-NavC.swm-NavC-col3Md
  .swm-NavC_Item
    .swm-NavC_Head
      span.swm-NavC_Thumbnail
        img(src="/assets/img/common/img_690_224.jpg" alt)
    .swm-NavC_Foot
      ul.sw-ListArrow
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconA(href="#") Terms of use
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconB(href="#") Data Privacy Notice
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link(href="#") Modern Slavery ActModern Slavery ActModern Slavery ActModern Slavery ActModern Slavery Act
  .swm-NavC_Item
    .swm-NavC_Head
      span.swm-NavC_Thumbnail
        img(src="/assets/img/common/img_690_224.jpg" alt)
    .swm-NavC_Foot
      ul.sw-ListArrow
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconA(href="#") Terms of use
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconB(href="#") Data Privacy Notice
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link(href="#") Modern Slavery ActModern Slavery ActModern Slavery ActModern Slavery ActModern Slavery Act
  .swm-NavC_Item
    .swm-NavC_Head
      span.swm-NavC_Thumbnail
        img(src="/assets/img/common/img_690_224.jpg" alt)
    .swm-NavC_Foot
      ul.sw-ListArrow
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconA(href="#") Terms of use
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link.swm-LinkIconB(href="#") Data Privacy Notice
        li.sw-ListArrow_Item.swm-ListArrow_Item
          a.sw-ListArrow_Link(href="#") Modern Slavery ActModern Slavery ActModern Slavery ActModern Slavery ActModern Slavery Act
```
*/
.swm-NavC {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: -1.875rem;
  padding-left: 0;
  list-style-type: none;
}

.swm-NavC_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  /* 1 Column */
  margin-top: 0;
  padding-left: 2.8125rem;
  padding-right: 0.9375rem;
}

/* 3 Columns */
.swm-NavC-col3 > .swm-NavC_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.swm-NavC-col3 > .swm-NavC_Item:nth-of-type(n + 1) {
  margin-top: 0;
  padding-left: 1.875rem;
}

@media print, screen and (min-width: 768px) {
  .swm-NavC-col3Md > .swm-NavC_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavC-col3Md > .swm-NavC_Item:nth-of-type(n + 1) {
    margin-top: 0;
    padding-left: 1.875rem;
    padding-right: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .swm-NavC-col3Lg > .swm-NavC_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavC-col3Lg > .swm-NavC_Item:nth-of-type(n + 1) {
    margin-top: 0;
    padding-left: 1.875rem;
    padding-right: 0;
  }
}

@media print, screen and (min-width: 1230px) {
  .swm-NavC-col3Xl > .swm-NavC_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .swm-NavC-col3Xl > .swm-NavC_Item:nth-of-type(n + 1) {
    margin-top: 0;
    padding-left: 1.875rem;
    padding-right: 0;
  }
}

.swm-NavC_Box {
  display: block;
  height: 100%;
  text-decoration: none;
  transition-duration: 0.3s;
}

.swm-NavC_Box:hover {
  text-decoration: none;
  opacity: 0.7;
}

.cms-Component_Editor .swm-NavC_Box {
  height: auto;
}

.swm-NavC_Thumbnail {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.swm-NavC_Thumbnail > img {
  display: block;
  width: 100%;
}

.swm-NavC_Body {
  padding: 1rem 0.9375rem 1.25rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.375;
  background: #f2f4f6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-NavC_Body {
    font-size: 1rem;
  }
}

.swm-NavC_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 0.75rem;
  margin-left: 0.1875rem;
  font-size: 0.75rem;
}

.swm-NavC_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  color: #df0523;
}

.swm-NavC_IconExternalA {
  position: relative;
  font-size: 0.875rem;
}

.swm-NavC_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.swm-NavC_IconExternalB {
  position: relative;
  font-size: 0.875rem;
}

.swm-NavC_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
  left: 0.5em;
  color: #df0523;
}

.swm-NavC_Foot {
  margin-bottom: 0.625rem;
  padding-top: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .swm-NavC_Foot {
    margin-bottom: 0;
    padding-top: 0rem;
  }
}

/*
---
name: swmoffice-BoxA
namespace: office-
category: Block
id: M_BOX-6
---

<span class="sw-Label">M_BOX-6</span>

```jade
ul.swmoffice-BoxA
  li.swmoffice-BoxA_Item
    p.swmoffice-BoxA_CompanyNameB KYOCERA Fineceramics GmbH
    p.swmoffice-BoxA_Text
      | Fritz-Müller-Straße 27
      br
      | 73730 Esslingen
    p.swmoffice-BoxA_Text
      | Phone: +49 (0)711 - 93 93 4-0
      br
      | Fax: +49 (0)711 - 93 93 4-950
    a.swmoffice-BoxA_Mail(href="mailto:webmaster@kyocera.de")
      span.swmoffice-BoxA_MailIcon(aria-hidden="true")
      span.swmoffice-BoxA_MailText webmaster@kyocera.de
    p.sw-Text For any questions you may have regarding the processing of your personal data or data protection in general, please contact us as stated above or write an email at
      a.sw-Link(href="mailto:privacy@kyocera.de") privacy@kyocera.de.
```
*/
.swmoffice-BoxA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .swmoffice-BoxA {
    margin-top: 2.5rem;
  }
}

.swmoffice-BoxA > :last-child {
  margin-bottom: 0;
}

.cms-Component_Editor .swmoffice-BoxA {
  height: auto;
}

.swmoffice-BoxA_Item:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  margin-top: 1.875rem;
  padding-bottom: 1.875rem;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .swmoffice-BoxA_Item:nth-of-type(n + 2)::before {
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.swmoffice-BoxA_Item > :last-child {
  margin-bottom: 0;
}

.swmoffice-BoxA_Item > .sw-Image {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .swmoffice-BoxA_Item > .sw-Image {
    margin-top: 3.125rem;
  }
}

.swmoffice-BoxA_CompanyNameB {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #444;
}

.swmoffice-BoxA_Text {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.swmoffice-BoxA_Link {
  display: inline-block;
  margin-bottom: 0.3125rem;
  text-decoration: none;
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.4;
  color: #df0523;
}

.swmoffice-BoxA_Link:hover {
  text-decoration: underline;
}

.swmoffice-BoxA_Mail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1em;
  text-decoration: none;
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.2;
  color: #df0523;
}

.swmoffice-BoxA_Mail:hover {
  text-decoration: underline;
}

.swmoffice-BoxA_MailIcon {
  position: relative;
  height: 1rem;
  margin-top: 0.2em;
  margin-right: 0.375rem;
  font-size: 1rem;
}

.swmoffice-BoxA_MailIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

/*
---
name: swm-PageNavA
namespace: swm-
category: Navigation
id: M_CTL-2
---

<span class="sw-Label">M_CTL-2</span>

Productsページで使用されるページ内リンクです。

- ページのh2.sw-Heading2Aタグ、h2.sw-Heading2Bから自動生成され、`.swm-PageNavA`の最初の子要素として出力されます

**エディタ内の表示**

```jade
.cms-Component_Editor 
  .swm-PageNavA
    span Anchor Menu
```

**エディタ内ソース**

```jade
.swm-PageNavA
  span M_CTL-2
h2.sw-Heading2A Automotive Applications
h2.sw-Heading2A Industrial Heater Applications
h2.sw-Heading2A Water-Heating Applications
h2.sw-Heading2B Kerosene, Gas & Pellet Appliances / Consumer Electronic
h2.sw-Heading2B Medical Applications
h2.sw-Heading2B Water-Heating Applications
```

**js実行後ソース**

```jade
.swm-PageNavA
  ul.swm-PageNavA_List
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Automotive Applications
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Industrial Heater Applications
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Water-Heating Applications
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Kerosene, Gas & Pellet Appliances / Consumer Electronic
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Medical Applications
    li.swm-PageNavA_Item
      a.swm-PageNavA_Link(href="#")
        span.swm-PageNavA_Icon(aria-hidden="true")
        | Water-Heating Applications
```
*/
.swm-PageNavA > :first-child {
  margin-top: 0;
}

.swm-PageNavA > :last-child {
  margin-bottom: 0;
}

.cms-Component_Editor .swm-PageNavA {
  display: block;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  line-height: 100px;
  background: #ccc;
  text-align: center;
  font-size: 1.5rem;
}

.swm-PageNavA_List {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 1.625rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .swm-PageNavA_List {
    margin-bottom: 2.5rem;
  }
}

.swm-PageNavA_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  border-left: 1px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .swm-PageNavA_Item {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    max-width: none;
    margin-right: 0;
    margin-bottom: 0.3125rem;
  }
  .swm-PageNavA_Item:last-of-type {
    border-right: 1px solid #dadada;
  }
}

.swm-PageNavA_Link {
  display: block;
  position: relative;
  padding: 0.5625rem 0 0.5625rem 2.125rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .swm-PageNavA_Link {
    padding: 0.5625rem 1.5rem 0.5625rem 2rem;
    border: 0;
  }
}

.swm-PageNavA_Link:hover {
  text-decoration: underline;
  color: #df0523;
}

.swm-PageNavA_Icon {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 1.14em;
  color: #df0523;
}

.swm-PageNavA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

/*
---
name: stAllowCookie
namespace: st-
category: Global
---

Cookie取得の同意エリアです。利用者が許可をするまで画面下部に固定されます。

```jade
.st-AllowCookie#st-AllowCookie(role="alert")
  .st-AllowCookie_Inner
    .st-AllowCookie_Box
      .st-AllowCookie_Description
        p.st-AllowCookie_Text
          | Please be informed that subsequent use of this website imply the acceptance with respect to the use of cookies by KYOCERA. You can find further information - also regarding the revocation - in our
          a.st-AllowCookie_Link(href="#") Data Privacy Notice
          | .
      .st-AllowCookie_Agree
        button.st-AllowCookie_Button#st-AllowCookie_Button(type="button") Agree
```
*/
.st-AllowCookie {
  position: fixed;
  right: 0;
  bottom: -100%;
  left: 0;
  z-index: 1000;
  background: #444;
  transition-delay: 1s;
  transition-duration: 1s;
  transition-property: bottom;
}

.st-AllowCookie:focus {
  outline: none;
}

.st-AllowCookie_Inner {
  max-width: 1170px;
  margin: auto;
  padding: 1.125rem 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .st-AllowCookie_Inner {
    padding-right: 1.875rem;
    padding-left: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Inner {
    padding: 1.375rem 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-AllowCookie_Inner {
    padding-right: 0;
    padding-left: 0;
  }
}

.st-AllowCookie_Box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Box {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.st-AllowCookie_Description {
  width: 100%;
  margin-bottom: 1rem;
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Description {
    -webkit-flex-basis: 0;
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
    -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    margin-bottom: 0;
  }
}

.st-AllowCookie_Agree {
  width: 100%;
  text-align: center;
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Agree {
    width: 18.75rem;
    padding-left: 8.125rem;
  }
}

.st-AllowCookie_Text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #fff;
}

.st-AllowCookie_Link {
  color: #ff0021;
}

.st-AllowCookie_Button {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  background: #df0523;
  color: #fff;
}

.st-AllowCookie_Button:hover, .st-AllowCookie_Button:active, .st-AllowCookie_Button:focus {
  text-decoration: none;
}

.st-AllowCookie_Button[type="button"], .st-AllowCookie_Button[type="reset"], .st-AllowCookie_Button[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-AllowCookie_Button:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-AllowCookie_Button:disabled, .st-AllowCookie_Button-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.st-AllowCookie_Button-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .st-AllowCookie_Button {
    width: 33.33333%;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-AllowCookie_Button {
    width: 100%;
  }
}

/*
---
name: st-Breadcrumb
namespace: st-
category: Navigation
id: CTL-1
---

<span class="sw-Label">CTL-1</span>

パンくずリストです。

```jade
.st-Breadcrumb
  ol.st-Breadcrumb_List
    li.st-Breadcrumb_Item
      a.st-Breadcrumb_Link(href="#") home
     li.st-Breadcrumb_Item
      a.st-Breadcrumb_Link(href="#") news
    li.st-Breadcrumb_Item
      a.st-Breadcrumb_Link(href="#") 2018
    li.st-Breadcrumb_Item
      | KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive electronics conditions of automotive elect KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive electronics conditions of automotive elect
```
*/
.js-st-Breadcrumb_ItemNews-all[aria-hidden="true"] {
  display: none;
}

.js-st-Breadcrumb_ItemNews-yearmonth[aria-hidden="true"] {
  display: none;
}

.js-st-Breadcrumb_ItemNews-year[aria-hidden="true"] {
  display: none;
}

.js-st-Breadcrumb_ItemNews-month[aria-hidden="true"] {
  display: none;
}

.js-st-Breadcrumb_ItemNews-month1[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month2[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month3[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month4[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month5[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month6[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month7[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month8[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month9[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month10[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month11[aria-hidden="true"],
.js-st-Breadcrumb_ItemNews-month12[aria-hidden="true"] {
  display: none;
}

/*
---
name: st-CategoryNav
namespace: st-
category: Global
---

PC以外で表示するカテゴリのナビゲーションです。


```jade
.st-CategoryNav
  a.st-CategoryNav_Parent
    | LED Lighting
    span.st-CategoryNav_ParentIcon(aria-hidden="true")
  ul.st-CategoryNav_List
    li.st-CategoryNav_Item
      a.st-CategoryNav_Link(href="#")
        span.st-CategoryNav_Icon(aria-hidden="true")
        | menu 1-1
    li.st-CategoryNav_Item
      a.st-CategoryNav_Link(href="#")
        span.st-CategoryNav_Icon(aria-hidden="true")
        | UV LED Lighting
        span.st-CategoryNav_IconExternalA(aria-hidden="true")
    li.st-CategoryNav_Item
      a.st-CategoryNav_Link(href="#")
        span.st-CategoryNav_Icon(aria-hidden="true")
        | menu 1-2
        span.st-CategoryNav_IconExternalB(aria-hidden="true")
```
*/
@media print, screen and (min-width: 768px) {
  .st-CategoryNav {
    display: none;
  }
}

.st-CategoryNav_Parent {
  display: block;
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 0.875rem 1.875rem 0.875rem 0.9375rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  border-bottom: 1px solid #dadada;
  background-color: rgba(240, 243, 246, 0.8);
  color: #000;
}

.st-CategoryNav_Parent:hover {
  text-decoration: none;
}

.st-CategoryNav_Parent[aria-current="page"] {
  color: #df0523;
}

.st-CategoryNav_ParentIcon {
  position: absolute;
  top: 0;
  right: 0.875rem;
  bottom: 0;
  height: 0.875rem;
  margin: auto;
  font-size: 0.8em;
  color: #a5a5a5;
}

.st-CategoryNav_ParentIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-CategoryNav_List {
  padding-left: 0;
  list-style-type: none;
}

.st-CategoryNav_List > :last-child {
  margin-bottom: 0;
}

.st-CategoryNav_Item {
  margin-bottom: 1.125rem;
}

.st-CategoryNav_Link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}

.st-CategoryNav_Link:hover {
  text-decoration: underline;
}

.st-CategoryNav_Link[aria-current="page"] {
  color: #df0523;
}

.st-CategoryNav_Icon {
  position: relative;
  top: 0.25rem;
  width: 1.875rem;
  height: 1rem;
  padding-left: 0.9375rem;
  font-size: 1rem;
  color: #df0523;
}

.st-CategoryNav_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

.st-CategoryNav_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.st-CategoryNav_IconExternalA {
  height: 0.6875rem;
  margin-top: 0.375rem;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.st-CategoryNav_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.4em;
}

.st-CategoryNav_IconExternalB {
  height: 0.6875rem;
  margin-top: 0.375rem;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.st-CategoryNav_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.4em;
}

/*
---
name: st-CategoryNavNews
namespace: st-
category: Global
---

PC以外で表示するカテゴリのナビゲーションです。


```jade
.st-CategoryNavNews(aria-expanded="true")
  button.st-CategoryNavNews_Parent
    | Latest News
    span.st-CategoryNavNews_ParentIcon(aria-hidden="true")
    -
      var category = [
        {text: 'Latest News', href: '/news/'},
        {text: '2019', href: '/news/2019/'},
        {text: '2018', href: '/news/2018'},
      ];
  ul.st-CategoryNavNews_List(aria-hidden="false")
    each val in category
      li.st-CategoryNavNews_Item
        a.st-CategoryNavNews_Link('href'=val.href)=val.text

.st-CategoryNavNews(aria-expanded="true")
  button.st-CategoryNavNews_Parent
    | Select Category
    span.st-CategoryNavNews_ParentIcon(aria-hidden="true")
    -
      var category = [
        {text: 'Document Solutions - Printers & MFPs', href: 'document_solutions_printers_and_mfps'},
        {text: 'Smartphones & Feature Phones', href: 'smartphones_and_feature_phones'},
        {text: 'Ceramic Cutlery & Kitchen Tools', href: 'ceramic_cutlery_and_kitchen_tools'},
        {text: 'Industrial Ceramics', href: 'industrial_ceramics'},
        {text: 'Semiconductor Packaging', href: 'semiconductor_packaging'},
        {text: 'Electronic Components', href: 'electronic_components'},
        {text: 'UV LED Curing System', href: 'uv_led_curing_system'},
        {text: 'Thermal Printheads', href: 'thermal_printheads'},
        {text: 'Inkjet Printheads', href: 'inkjet_printheads'},
        {text: 'Liquid Crystal Displays', href: 'liquid_crystal_displays'},
        {text: 'Lens Components', href: 'lens_components'},
        {text: 'Medical Products', href: 'medical_products'},
        {text: 'Cutting Tool – Indexable', href: 'cutting_tool_indexable'},
        {text: 'Cutting Tool - Solid Round', href: 'cutting_tool_solid_round'},
        {text: 'Cutting Tool - Printed Circuit Board', href: 'cutting_tool_printed_circuit_board'},
        {text: 'Organic Chemical Materials', href: 'organic_chemical_materials'},
        {text: 'Solar Solutions', href: 'solar_solutions'},
        {text: 'Endpoint Security Software', href: 'endpoint_security_software'}
      ];
  ul.st-CategoryNavNews_List(aria-hidden="false")
    li.st-CategoryNavNews_Item
        a.st-CategoryNavNews_Link(href="/news/") All
    each val in category
      li.st-CategoryNavNews_Item
        a.st-CategoryNavNews_Link('href'='/news/' + val.href + '/')=val.text
```
*/
@media print, screen and (min-width: 1024px) {
  .st-CategoryNavNews {
    display: none;
  }
}

.st-CategoryNavNews + .st-CategoryNavNews {
  margin-top: 1.875rem;
}

.st-CategoryNavNews_Parent {
  display: block;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
  width: 100%;
  padding: 0.875rem 3rem 0.875rem 1.125rem;
  text-align: left;
  font-size: 1rem;
  line-height: 1.6;
  border: 1px solid #dadada;
  border-radius: 4px;
  background-color: #fff;
  color: #666;
}

.st-CategoryNavNews_ParentIcon {
  position: absolute;
  top: 0;
  right: 1.125rem;
  bottom: 0;
  height: 0.625rem;
  margin: auto;
  font-size: 0.625rem;
  color: #444;
}

.st-CategoryNavNews_ParentIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  color: #666;
}

.st-CategoryNavNews[aria-expanded="true"] .st-CategoryNavNews_ParentIcon::before {
  -webkit-transform: scale3d(1, -1, 1);
          transform: scale3d(1, -1, 1);
}

.st-CategoryNavNews_List {
  overflow: hidden;
  margin-top: 0.75rem;
  padding: 0.625rem;
  border: 1px solid #dadada;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
  color: #666;
  list-style-type: none;
}

.st-CategoryNavNews_List[aria-hidden="true"] {
  height: 0;
  margin: 0;
  padding: 0 0.625rem;
  border-width: 0 1px;
  box-shadow: none;
}

.st-CategoryNavNews_Item:first-child .st-CategoryNavNews_Link {
  font-weight: 700;
  color: #888;
}

.st-CategoryNavNews_Link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 3.125rem;
  padding: 0 1.25rem;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #444;
}

.st-CategoryNavNews_Link[aria-current="location"] {
  font-weight: 700;
  background-color: #f2f4f6;
  color: #444 !important;
}

/*
---
name: st-ContentsHeader
namespace: st-
category: Global
---

カテゴリトップや下層ページのコンテンツ内のヘッダーエリアです。

- パンくずリスト、ページタイトル、メインビジュアルが入ります。
- メインビジュアルがある場合は、タイトルエリアの影がなくなります

```jade
header.st-ContentsHeader
  .st-ContentsHeader_Breadcrumb
    .st-Breadcrumb
      ol.st-Breadcrumb_List
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/") Home
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/products/") Products
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/products/semiconductor_components/") Semiconductor Components
        li.st-Breadcrumb_Item LED Lighting
  .st-ContentsHeader_Title
    .st-TitleB
      .st-TitleB_Inner
        p.st-TitleB_Title Semiconductor Components
        a.st-TitleB_Inquiry(href="#")
          span.st-TitleB_InquiryIcon(aria-hidden="true")
          span.st-TitleB_InquiryText Inquiry Form
```

```jade
header.st-ContentsHeader
  .st-ContentsHeader_Breadcrumb
    .st-Breadcrumb
      ol.st-Breadcrumb_List
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/") Home
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/products/") Products
        li.st-Breadcrumb_Item
          a.st-Breadcrumb_Link(href="/products/semiconductor_components/") Semiconductor Components
        li.st-Breadcrumb_Item LED Lighting
  .st-ContentsHeader_Title
    .st-TitleB
      .st-TitleB_Inner
        p.st-TitleB_Title Semiconductor Components
        a.st-TitleB_Inquiry(href="#")
          span.st-TitleB_InquiryIcon(aria-hidden="true")
          span.st-TitleB_InquiryText Inquiry Form
  .st-ContentsHeader_Hero
    .sw-HeroA
      picture(src="/assets/img/products/semiconductor_components/hero_sp.jpg" alt).sw-HeroA_Image.
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source media="(min-width: 768px)" srcset="/careers/uploads/us/image02.jpg">
        <!--[if IE 9]></video><![endif]-->
        <img src="/careers/uploads/us/image01.jpg" alt="">
      .sw-HeroA_Bg
```
*/
.st-ContentsHeader {
  overflow: hidden;
}

@media print, screen and (min-width: 1230px) {
  .st-ContentsHeader {
    padding: 0;
  }
}

.st-ContentsHeader_Breadcrumb {
  display: none;
  max-width: 1170px;
  margin: auto;
  padding: 0 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .st-ContentsHeader_Breadcrumb {
    display: block;
    padding-right: 1.875rem;
    padding-left: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-ContentsHeader_Breadcrumb {
    padding-right: 0;
    padding-left: 0;
  }
}

.st-ContentsHeader_Title {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 0.9375rem 0.375rem;
}

@media print, screen and (min-width: 768px) {
  .st-ContentsHeader_Title {
    margin: 0 auto 0;
    padding-right: 1.875rem;
    padding-left: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-ContentsHeader_Title {
    padding-right: 0;
    padding-left: 0;
  }
}

.st-ContentsHeader_Title + .st-ContentsHeader_Hero {
  margin-top: -0.375rem;
}

.st-DrawerNav {
  display: block !important;
  max-width: 1170px;
  margin: auto;
  padding: 0 15px;
  list-style-type: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav {
    margin-top: 30px;
    line-height: 1.4;
  }
}

.st-GlobalSiteNav_SubLinkTop + .st-DrawerNav {
  margin-top: -1px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_SubLinkTop + .st-DrawerNav {
    margin-top: 30px;
  }
}

.st-DrawerNav_Item {
  position: relative;
  font-size: 1rem;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_Link + .st-GlobalSiteNav_SubArea .st-DrawerNav_Item {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: 30px;
    font-size: medium;
    font-size: 1rem;
  }
}

.st-DrawerNav_Item::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.4em;
  left: 0;
  width: 0;
  height: 0;
  border-width: 5px 0 5px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #df0523;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav_Item::before {
    top: 0.9em;
    left: calc(1em + 16px);
  }
}

.st-DrawerNav_Trigger {
  display: block;
  padding: 16px 0 16px 18px;
  text-decoration: none;
  border-top: 1px solid #727272;
  color: #ebebeb;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav_Trigger {
    padding: 8px 1em;
    font-size: 0.9375rem;
    line-height: 1.4;
    border-top: 0;
  }
  .st-DrawerNav_Trigger:hover {
    text-decoration: underline;
  }
}

.st-DrawerNav_Item:first-of-type .st-DrawerNav_Trigger {
  border-top: 0;
}

.st-DrawerNav_Drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100%;
  background: #616161;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  transition-timing-function: ease-in-out;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav_Drawer {
    display: none;
  }
}

.st-DrawerNav_Drawer[aria-hidden="true"] {
  opacity: 0;
  -webkit-transform: translate3d(100vw, 0, 0);
          transform: translate3d(100vw, 0, 0);
}

.st-DrawerNav_Drawer[aria-hidden="false"] {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.st-DrawerNav_DrawerHeading {
  display: block;
  padding: 16px 15px;
  text-decoration: none;
  font-size: 1rem;
  background-color: rgba(116, 116, 116, 0.9);
  color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav_DrawerHeading {
    height: 64px;
    padding: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 64px;
  }
  .st-DrawerNav_DrawerHeading:hover {
    text-decoration: underline;
  }
}

.st-DrawerNav_DrawerList {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 1170px;
  height: calc(100vh - 164px);
  margin: auto;
  padding: 0 0.9375rem 3.125rem;
  list-style-type: none;
}

.st-DrawerNav_Drawer[aria-hidden="true"] .st-DrawerNav_DrawerList {
  display: none;
}

.st-GlobalSiteNav_SubLinkTop + .st-DrawerNav_DrawerList {
  margin-top: -1px;
}

.st-DrawerNav_DrawerItem {
  position: relative;
  font-size: 1rem;
}

.st-DrawerNav_DrawerItem::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.4em;
  left: 0;
  width: 0;
  height: 0;
  border-width: 5px 0 5px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #df0523;
}

@media print, screen and (min-width: 1024px) {
  .st-DrawerNav_DrawerItem::before {
    top: 0.9em;
    left: calc(1em + 16px);
  }
}

.st-DrawerNav_DrawerLink {
  display: block;
  padding: 1rem 0.875rem;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.25;
  border-bottom: 1px solid #727272;
  color: #ebebeb;
}

.st-DrawerNav_DrawerBack {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 3.3125rem;
  margin: 0;
  padding: 1.25rem 0.875rem;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1;
  border: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: #4f4f4f;
  color: inherit;
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-DrawerNav_DrawerBack:hover, .st-DrawerNav_DrawerBack:active, .st-DrawerNav_DrawerBack:focus {
  text-decoration: none;
}

.st-DrawerNav_DrawerBack[type="button"], .st-DrawerNav_DrawerBack[type="reset"], .st-DrawerNav_DrawerBack[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-DrawerNav_DrawerBack:focus {
  outline: 0;
}

.st-DrawerNav_DrawerBackIcon {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.9375rem;
  height: 1.3125rem;
  margin: auto;
  font-size: 1.3125rem;
  color: #bcbcbc;
}

.st-DrawerNav_DrawerBackIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.st-DropNav {
  background-color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav {
    display: none;
    position: absolute;
    top: 85px;
    right: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    margin: auto;
    padding-bottom: 1.75rem;
    text-align: left;
    background-color: rgba(79, 79, 79, 0.95);
  }
  .st-DropNav[aria-hidden="false"] {
    top: 85px;
  }
  .st-GlobalNav-divition .st-DropNav[aria-hidden="false"] {
    display: none;
  }
}

.st-DropNav .st-GlobalSiteNav_SubLinkTitle {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .st-DropNav .st-GlobalSiteNav_SubLinkTitle {
    display: block;
  }
}

.st-DropNav .l-Grid {
  margin-bottom: 0;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_List {
    display: block !important;
  }
}

.st-DropNav_SpButton {
  display: block;
  position: relative;
  width: 100%;
  padding: 16px 15px;
  text-align: left;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  border: 0;
  border-bottom: 1px solid #dadada;
  background-color: #fff;
  color: #444;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SpButton {
    display: none;
  }
}

.st-DropNav_SpButton:focus {
  outline: none;
}

.st-DropNav_SpButton[aria-expanded="true"] {
  border-bottom: 0;
}

.st-DropNav_SpButtonInner {
  max-width: 1200px;
  margin: auto;
}

.st-DropNav_SpButton .st-DropNav_SpButtonIcon {
  position: absolute;
  top: 0;
  right: 0.9375rem;
  bottom: 0;
  width: 15px;
  height: 9px;
  margin: auto;
  font-size: 0.875rem;
}

.st-DropNav_SpButton .st-DropNav_SpButtonIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  color: currentColor;
}

.st-DropNav_SpButton[aria-expanded="true"] .st-DropNav_SpButtonIcon::before {
  top: -0.5em;
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.st-DropNav_Inner {
  max-width: 1170px;
  margin: auto;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Inner {
    margin-top: 30px;
    line-height: 1.4;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-DropNav_Inner {
    padding: 0;
  }
}

.st-GlobalSiteNav_SubLinkTop + .st-DropNav_Inner {
  margin-top: -1px;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_SubLinkTop + .st-DropNav_Inner {
    margin-top: 30px;
  }
}

.st-DropNav_List {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_List {
    display: block;
    max-width: 1170px;
    margin: auto;
    padding: 0 0.9375rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-DropNav_List {
    padding: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Item {
    display: inline-block;
    margin: 0 60px 0 0;
  }
  .st-DropNav_Item:last-child {
    margin-right: 0;
  }
  .st-DropNav_Item.st-DropGlobalNav_Item-Global {
    display: none;
  }
}

.st-DropNav_Link {
  display: block;
  position: relative;
  padding: 16px 0;
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid #dadada;
  background-color: #fff;
  color: #444;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Link {
    display: block;
    padding: 0;
    text-decoration: none;
    font-size: 0.9375rem;
    border: 0;
    background: transparent;
    color: #fff;
  }
  .st-DropNav_Link:hover {
    text-decoration: underline;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Link:not(:first-child) {
    margin-top: 60px;
    border-top: 0;
  }
}

.st-DropNav_Item:first-child .st-DropNav_Link {
  border-top: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Item:first-child .st-DropNav_Link {
    border-top: 0;
  }
}

.st-DropNav_Link[aria-expanded="true"] {
  border-bottom: 0;
}

.st-DropNav_Item-global .st-DropNav_Link {
  padding: 30px 0;
  text-transform: uppercase;
  font-size: 0.9375rem;
  border-bottom: 0;
  color: #8d8d8d;
}

.st-DropGlobalNav_Link .st-DropNav_LinkIcon-pc {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DropGlobalNav_Link .st-DropNav_LinkIcon-pc {
    display: inline;
  }
}

.st-DropNav_Close {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_Close {
    display: none;
  }
  .st-DropNav_Close[aria-hidden="false"] {
    display: block;
    position: absolute;
    top: 7.4375rem;
    right: 15px;
    z-index: 100000;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: transparent;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }
}

.st-DropNav_SubLinkTitle {
  display: none;
  padding: 16px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLinkTitle {
    display: block;
    margin-bottom: 18px;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 700;
  }
}

.st-DropNav_SubLinkTitle:not(:first-child) {
  border-top: 1px solid #727272;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLinkTitle:not(:first-child) {
    margin-top: 60px;
    border-top: 0;
  }
}

.st-Grid_Item:not(:first-of-type) .st-DropNav_SubLinkTitle {
  border-top: 1px solid #727272;
}

@media print, screen and (min-width: 1024px) {
  .st-Grid_Item:not(:first-of-type) .st-DropNav_SubLinkTitle {
    border-top: 0;
  }
}

a.st-DropNav_SubLinkTitle {
  text-decoration: none;
}

a.st-DropNav_SubLinkTitle:hover {
  text-decoration: underline;
}

.st-DropNav_CloseIcon {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  top: -1px;
  left: -1px;
  width: 32px;
  height: 32px;
}

:root .st-DropNav_CloseIcon {
  top: -0.5px\0;
  left: -0.5px\0;
}

.st-DropNav_CloseIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  display: block;
  position: relative;
  font-size: 0.75rem;
  color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DropGlobalNav_Link .st-GlobalSiteNav_SubLinkTitleIcon {
    display: none;
  }
}

span.st-DropGlobalNav_LinkIcon-pc {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  span.st-DropGlobalNav_LinkIcon-pc {
    display: inline;
  }
  span.st-DropGlobalNav_LinkIcon-pc::before {
    font-family: "iconfont";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    speak: none;
    content: "";
    margin: -0.25rem 0 0;
    font-size: 1.25rem;
    color: #fff;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

.st-DropNav_PcButtonArea {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_PcButtonArea {
    display: inline;
  }
  .st-DropNav_PcButtonArea:nth-of-type(n + 2) {
    margin-left: 1.25rem;
  }
}

.st-DropNav_PcButton {
  display: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_PcButton {
    display: inline-block;
    position: relative;
    top: -3px;
    z-index: 1;
    width: auto;
    height: auto;
    padding-left: 1.25rem;
    font-size: 0.75rem;
    line-height: 1;
    color: #666;
  }
  .st-DropNav_PcButton:hover {
    color: #df0523;
  }
  .st-DropNav_PcButton:active::before {
    position: relative;
  }
}

.st-DropNav_PcButton:focus {
  outline: 0;
  box-shadow: none;
}

.st-DropNav_PcButton.focus-ring:focus {
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-DropNav_PcButtonIcon {
  display: block;
  position: absolute;
  top: 0.25rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  margin: auto;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_PcButtonIcon {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.125rem;
    width: 18px;
    height: 18px;
    margin: auto 0;
    font-size: 1.125rem;
    pointer-events: none;
  }
  [lang="ja"] .st-DropNav_PcButtonIcon {
    left: -75px;
  }
  [lang="zh-cn"] .st-DropNav_PcButtonIcon {
    left: -75px;
  }
}

.st-DropNav_PcButtonIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.05em;
  color: #df0523;
  transition-duration: 0.3s;
  -webkit-transform: rotate(0deg) scale3d(0.5, 0.5, 1);
          transform: rotate(0deg) scale3d(0.5, 0.5, 1);
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_PcButton:hover .st-DropNav_PcButtonIcon::before {
    color: currentColor;
  }
}

.st-DropNav_PcButton[aria-expanded="true"] .st-DropNav_PcButtonIcon::before {
  -webkit-transform: scale3d(0.8, 0.8, 1) rotate(-190deg);
          transform: scale3d(0.8, 0.8, 1) rotate(-190deg);
  -webkit-transform: rotate(-180deg) scale3d(0.5, 0.5, 1);
          transform: rotate(-180deg) scale3d(0.5, 0.5, 1);
}

.st-DropNav_SubLinkTop {
  display: none;
  padding: 16px 15px;
  text-decoration: none;
  font-size: 1rem;
  background-color: rgba(116, 116, 116, 0.9);
  color: #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLinkTop {
    display: block;
    height: 6.125rem;
    padding: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 6.125rem;
  }
  .st-DropNav_SubLinkTop:hover {
    text-decoration: underline;
  }
}

.st-DropNav_SubLinkTopInner {
  max-width: 1170px;
  margin: auto;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLinkTopInner {
    padding: 0 15px;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-DropNav_SubLinkTopInner {
    padding: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLinkTopIcon {
    position: relative;
    top: -0.1em;
    left: 0.375rem;
    font-size: 0.8em;
  }
  .st-DropNav_SubLinkTopIcon::before {
    font-family: "iconfont";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    vertical-align: middle;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    speak: none;
    content: "";
  }
}

.st-DropNav_SubList {
  padding: 0 0.9375rem;
  list-style-type: none;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_Link + .st-GlobalSiteNav_SubArea .st-DropNav_SubList {
    display: block;
    margin-left: -30px;
    margin-left: 0;
    padding-left: 0;
    font-size: 0;
    list-style-type: none;
  }
}

.st-DropNav_SubItem {
  position: relative;
  font-size: 1rem;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_Link + .st-GlobalSiteNav_SubArea .st-DropNav_SubItem {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    padding-left: 30px;
    font-size: medium;
    font-size: 1rem;
  }
}

.st-DropNav_SubItem::before {
  content: "";
  display: none;
  position: absolute;
  top: 1.4em;
  left: 0;
  width: 0;
  height: 0;
  border-width: 5px 0 5px 8px;
  border-style: solid;
  border-color: transparent transparent transparent #fff;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubItem::before {
    display: block;
    top: 0.9em;
    left: -0.5em;
  }
}

.st-DropNav_SubLink {
  display: block;
  padding: 16px 0 16px 0;
  text-decoration: none;
  border-top: 1px solid #dadada;
  color: #ebebeb;
}

@media print, screen and (min-width: 1024px) {
  .st-DropNav_SubLink {
    padding: 8px 1em;
    padding-left: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    border-top: 0;
  }
  .st-DropNav_SubLink:hover {
    text-decoration: underline;
  }
}

.st-GlobalNav-divition .st-DropNav_SubLink {
  color: #444;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav-divition .st-DropNav_SubLink {
    color: #fff;
  }
}

.st-DropNav_List[aria-hidden="true"] .st-DropNav_SubLink {
  border-color: transparent;
}

.st-DropNav_IconExternalA {
  display: inline-block;
  vertical-align: middle;
  height: 1.125rem;
  font-size: 1.125rem;
  color: #a5a5a5;
}

.st-DropNav_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.st-DropNav_IconExternalB {
  display: inline-block;
  vertical-align: middle;
  height: 1.125rem;
  font-size: 1.125rem;
  color: #a5a5a5;
}

.st-DropNav_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

/*
---
name: st-GlobalHeader1
namespace: st-
category: Global
id: GH1
---

```jade
header.st-GlobalHeader
  .st-GlobalHeader_Inner
    .st-GlobalHeader_CloseButtonArea
      // Close Button
      button.st-GlobalNav_NavClose(type="button" aria-label="Close")
        span.st-GlobalNav_NavCloseIcon(aria-hidden="true")
      button.st-GlobalNav_SearchClose(type="button" aria-label="Close")
        span.st-GlobalNav_SearchCloseIcon(aria-hidden="true")
      // / Close Button

    .st-GlobalHeader_Logo
      .st-Logo
        a.st-Logo_Main(href="/")
          picture
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            source(media="(min-width: 768px)" srcset="/_assets/img/common/logo.svg")
            <!--[if IE 9]></video><![endif]-->
            img(src="/_assets/img/common/logo_statement.svg" alt="Kyocera")
        p.st-Logo_Sub Europe

    .st-GlobalHeader_Buttons
      // Search Button
      button.st-SearchButton#st-SearchButton(type="button" aria-controls="st-SearchForm" aria-expanded="false")
        span.st-SearchButton_Icon(aria-hidden="true" aria-label="Search")
        //- | Search
      // / Search Button

      // Toggle Button
      button.st-ToggleButton(type="button" aria-controls="st-GlobalNav_Area" aria-expanded="false")
        span.st-ToggleButton_Icon(aria-hidden="true" aria-label="Navigation Open")
      // / Toggle Button

      // Global Link
      a.st-GlobalLink(href="https://global.kyocera.com/")
        span.st-GlobalLink_Icon(aria-hidden="true")
        | Global
      // / Global Link

    // Navigation Wrap Area
    nav.st-GlobalNav.st-GlobalNav-categoryFirst#st-GlobalNav

      // Search Form Area
      .st-SearchForm#st-SearchForm(aria-hidden="true")
        form.st-SearchForm_Form#SS_searchForm(action='https://search.kyocera.co.jp/search', method='get', name='gs', enctype="application/x-www-form-urlencoded")
          input(type='hidden', name='site', value='ZHS4H5NP')
          input(type='hidden', name='charset', value='UTF-8')
          input(type='hidden', name='group', value="19", id='SS_group')
          input(type='hidden', name='design', value="98")
          .st-SearchForm_Field
            // Search Icon
            .st-SearchForm_Icon(aria-hidden="true")
            input.st-SearchForm_Input#SS_searchQuery(name='query' type='text' placeholder="Search" size='44' value='' maxlength='100' autocomplete='off')
            button.st-SearchForm_Submit#SS_searchSubmit(type="submit" tabindex="-1") Search
      // / Search Form Area

      .st-GlobalNav_Area#st-GlobalNav_Area
              // Main Navigation
              .st-GlobalSiteNav
                ul.st-GlobalSiteNav_List

                  li.st-GlobalSiteNav_Item
                    a.st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-company(href="/company/") About
                      span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
                    .st-GlobalSiteNav_SubArea
                      a.st-GlobalSiteNav_SubLinkTop(href="/company/")
                        .st-GlobalSiteNav_SubLinkTopInner
                          | About Top
                          span.st-GlobalSiteNav_SubLinkTopIcon(aria-hidden="true")
                      .st-GlobalSiteNav_SubAreaInner
                        ul.st-GlobalSiteNav_SubList
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="/company/asiapacific/") About Kyocera EU
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/company/summary/index.html") Europe Network
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/company/division/index.html") About the KYOCERA Group
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/company/movie/index.html") Business Segments
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/ecology/index.html") KYOCERA Corporate Profile Video
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/company/location/index.html") Corporate Social Responsibility
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://global.kyocera.com/company/location/index.html") Global Network

                  li.st-GlobalSiteNav_Item

                    a.st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-products(href="/products/") Products
                      span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
                    .st-GlobalSiteNav_SubArea
                      a.st-GlobalSiteNav_SubLinkTop(href="/products/")
                        .st-GlobalSiteNav_SubLinkTopInner
                          | Products Top
                          span.st-GlobalSiteNav_SubLinkTopIcon(aria-hidden="true")
                      .st-GlobalSiteNav_SubAreaInner
                        .l-Grid
                          .l-Grid_Item.l-Grid_Item-9of12Lg
                            p.st-GlobalSiteNav_SubLinkTitle Business to Business
                            ul.st-GlobalSiteNav_SubList
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="http://www.kyoceradocumentsolutions.eu/" target="_blank") Printers / Multifunctionals
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/fineceramic_components/") Fine Ceramic Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/semiconductor_components/") Semiconductor Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/automotive_components/") Automotive Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/cutting_tools/") Cutting Tools
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/electronic_components/") Electronic Components &amp; Devices
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/printing_devices/") Printing Devices
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/lcds_glass_glass_touch_panels/") LCDs and Touch Solutions
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/organic_materials/") Organic Materials
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/solar_electric_systems/") Solar Electric Systems
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/watch-_and_jewelry/") Watch and Jewelry Industry

                          .l-Grid_Item.l-Grid_Item-3of12Lg
                            p.st-GlobalSiteNav_SubLinkTitle Consumer
                            ul.st-GlobalSiteNav_SubList
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/kitchen_products/") Kitchen Products
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/solar_electric_systems/") Solar Electric Systems
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="/products/office_products/") Office Products

                  li.st-GlobalSiteNav_Item
                    a.st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-news(href="/news/") News
                      span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
                    .st-GlobalSiteNav_SubArea
                      a.st-GlobalSiteNav_SubLinkTop(href="/news/")
                        .st-GlobalSiteNav_SubLinkTopInner
                          | News Top
                          span.st-GlobalSiteNav_SubLinkTopIcon(aria-hidden="true")
                      .st-GlobalSiteNav_SubAreaInner
                        ul.st-GlobalSiteNav_SubList
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="/news/2019/") 2019
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="/news/2018/") 2018

                  li.st-GlobalSiteNav_Item
                    a.st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-career(href="/careers/") Careers
                      span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
                    .st-GlobalSiteNav_SubArea
                      a.st-GlobalSiteNav_SubLinkTop(href="/careers/")
                        .st-GlobalSiteNav_SubLinkTopInner
                          | Careers Top
                          span.st-GlobalSiteNav_SubLinkTopIcon(aria-hidden="true")
                      .st-GlobalSiteNav_SubAreaInner
                        ul.st-GlobalSiteNav_SubList
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://usa.kyoceradocumentsolutions.com/en/about-us/careers.html" target="_blank") KYOCERA Document Solutions America, Inc.
                              span.st-GlobalSiteNav_SubLinkIconInternal(aria-hidden="true")
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="/careers/kii/") KYOCERA International, Inc.
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://recruiting2.ultipro.com/KYO1000KYO/JobBoard/76b8c73c-befd-f875-1815-e0b7a1f6e65f/?q=&o=postedDateDesc" target="_blank") KYOCERA Precision Tools, Inc.
                              span.st-GlobalSiteNav_SubLinkIconInternal(aria-hidden="true")
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="https://www.kyocera-sgstool.com/about/careers" target="_blank") KYOCERA SENCO Industrial Tools, Inc.
                              span.st-GlobalSiteNav_SubLinkIconInternal(aria-hidden="true")
                          li.st-GlobalSiteNav_SubItem
                            a.st-GlobalSiteNav_SubLink(href="/news/archive/") KYOCERA SGS Precision Tools, Inc.
                              span.st-GlobalSiteNav_SubLinkIconInternal(aria-hidden="true")

                  li.st-GlobalSiteNav_Item
                    a.st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-inquiry(href="/contact/") Contact
                      span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
                    .st-GlobalSiteNav_SubArea
                      a.st-GlobalSiteNav_SubLinkTop(href="/contact/")
                        .st-GlobalSiteNav_SubLinkTopInner
                          | Contact Top
                          span.st-GlobalSiteNav_SubLinkTopIcon(aria-hidden="true")
                      .st-GlobalSiteNav_SubAreaInner

                        .l-Grid
                          .l-Grid_Item.l-Grid_Item-9of12Lg
                            p.st-GlobalSiteNav_SubLinkTitle Business to Business
                            ul.st-GlobalSiteNav_SubList
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Printers / Multifunctionals
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Fine Ceramic Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Semiconductor Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Automotive Components
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Cutting Tools
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Electronic Components &amp; Devices
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Printing Devices
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") LCDs and Touch Solutions
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Organic Materials
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Solar Electric Systems
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Watch and Jewelry Industry

                          .l-Grid_Item.l-Grid_Item-3of12Lg
                            ap.st-GlobalSiteNav_SubLinkTitle Consumer
                            ul.st-GlobalSiteNav_SubList
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Kitchen Products
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Solar Electric Systems
                              li.st-GlobalSiteNav_SubItem
                                a.st-GlobalSiteNav_SubLink(href="#") Office Products

                a.st-GlobalSiteNav_GlobalLink(href="https://global.kyocera.com/")
                  span.st-GlobalSiteNav_GlobalLinkIcon(aria-hidden="true")
                  | Global

              // / Main Navigation

    // / Navigation Wrap Area

    // statement
    .st-GlobalHeader_StatementArea
      .st-GlobalHeader_Statement
        img.st-GlobalHeader_StatementImage(src="/_assets/img/common/statement.svg" alt="THE NEW VALUE FRONTIER")
    // / statement
```
*/
/*
---
name: st-GlobalHeader2
namespace: st-
category: Global
id: GH2
---

```jade
//- グローバルヘッダー
header.st-GlobalHeader
  .st-GlobalHeader_Inner
    .st-GlobalHeader_CloseButtonArea
      // Close Button
      button.st-DropNav_Close#st-DropNav_Close(type="button" aria-label="Close")
        span.st-DropNav_CloseIcon(aria-hidden="true")
      button.st-GlobalNav_SearchClose(type="button" aria-label="Close")
        span.st-GlobalNav_SearchCloseIcon(aria-hidden="true")
      // / Close Button

    .st-GlobalHeader_Logo
      .st-Logo
        a.st-Logo_Main(href="/")
          picture
            <!--[if IE 9]><video style="display: none;"><![endif]-->
            source(media="(min-width: 768px)" srcset="/_assets/img/common/logo.svg")
            <!--[if IE 9]></video><![endif]-->
            img(src="/_assets/img/common/logo_statement.svg" alt="Kyocera")
        p.st-Logo_Sub Europe

    .st-GlobalHeader_Buttons.st-GlobalHeader_Buttons-devision

      // Gnav Button1
      .st-DropNav_PcButtonArea
        button.st-DropNav_PcButton#st-DropNav_PcButton1(aria-expanded="false" aria-controls="st-DropNav1")
          span.st-DropNav_PcButtonIcon(aria-hidden="true" aria-label="All Products")
          | All Products
      // / Gnav Button1

      // Gnav Button2
      .st-DropNav_PcButtonArea.st-DropNav_PcButton-devider
        button.st-DropNav_PcButton#st-DropNav_PcButton2(aria-expanded="false" aria-controls="st-DropNav2")
          span.st-DropNav_PcButtonIcon(aria-hidden="true" aria-label="All Products")
          | About Kyocera
      // / Gnav Button2

      // Search Button
      button.st-SearchButton#st-SearchButton(type="button" aria-controls="st-SearchForm" aria-expanded="false")
        span.st-SearchButton_Icon(aria-hidden="true" aria-label="Search")
      // / Search Button

      // Toggle Button
      button.st-ToggleButton(type="button" aria-controls="st-GlobalNav_Area" aria-expanded="false")
        span.st-ToggleButton_Icon(aria-hidden="true" aria-label="Navigation Open")
      // / Toggle Button

      // Global Link
      .st-GlobalRegionPc
        button.st-GlobalRegionPc_Toggle.js-documentClose#st-GlobalRegionPc_Toggle(type="button" aria-controls="st-GlobalRegionPc_SubArea" aria-expanded="false")
          span.st-GlobalRegionPc_Region
            img(src="/assets/img/common/region_eu.svg" alt)
          | EU
      // / Global Link


    // Navigation Wrap Area
    nav.st-GlobalNav.st-GlobalNav-divition#st-GlobalNav

      // Search Form Area
      .st-SearchForm#st-SearchForm(aria-hidden="true")
        form.st-SearchForm_Form#SS_searchForm(action='https://search.kyocera.co.jp/search', method='get', name='gs', enctype="application/x-www-form-urlencoded")
          input(type='hidden', name='site', value='ZHS4H5NP')
          input(type='hidden', name='charset', value='UTF-8')
          input(type='hidden', name='group', value="19", id='SS_group')
          input(type='hidden', name='design', value="98")
          .st-SearchForm_Field
            // Search Icon
            .st-SearchForm_Icon(aria-hidden="true")
            input.st-SearchForm_Input#SS_searchQuery(name='query' type='text' placeholder="Search" size='44' value='' maxlength='100' autocomplete='off')
            button.st-SearchForm_Submit#SS_searchSubmit(type="submit" tabindex="-1") Search
      // / Search Form Area

      .st-GlobalRegionPc_SubArea.js-documentClose#st-GlobalRegionPc_SubArea(aria-hidden="true" aria-labelledby="st-GlobalRegionPc_Toggle")
        .st-GlobalSiteNav_SubLinkTop
          .st-GlobalSiteNav_SubLinkTopInner
            | Select Your Region
        .st-GlobalSiteNav_SubAreaInner
          a.st-GlobalSiteNav_SubLinkTitle(href="https://global.kyocera.com/") Kyocera Global
            span.st-GlobalSiteNav_SubLinkTitleIcon(aria-hidden="true")
          a.st-GlobalSiteNav_SubLinkTitle(href="/") Europe
            span.st-GlobalSiteNav_SubLinkTitleIcon(aria-hidden="true")
          ul.st-GlobalRegionPc_RegionList
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://austria.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_austria.svg" alt)
                span.st-GlobalRegionPc_RegionText Austria
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://denmark.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_denmark.svg" alt)
                span.st-GlobalRegionPc_RegionText Denmark
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://finland.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_finland.svg" alt)
                span.st-GlobalRegionPc_RegionText Finland
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://france.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_france.svg" alt)
                span.st-GlobalRegionPc_RegionText France
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://germany.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_germany.svg" alt)
                span.st-GlobalRegionPc_RegionText Germany
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://italy.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_italy.svg" alt)
                span.st-GlobalRegionPc_RegionText Italy
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://netherlands.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_netherlands.svg" alt)
                span.st-GlobalRegionPc_RegionText Netherlands
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://norway.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_norway.svg" alt)
                span.st-GlobalRegionPc_RegionText Norway
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://portugal.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_portugal.svg" alt)
                span.st-GlobalRegionPc_RegionText Portugal
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://russia.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_russia.svg" alt)
                span.st-GlobalRegionPc_RegionText Russia
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://spain.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_spain.svg" alt)
                span.st-GlobalRegionPc_RegionText Spain
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://sweden.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_sweden.svg" alt)
                span.st-GlobalRegionPc_RegionText Sweden
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://switzerland.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_switzerland.svg" alt)
                span.st-GlobalRegionPc_RegionText Switzerland
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://southafrica.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_south-africa.svg" alt)
                span.st-GlobalRegionPc_RegionText South Africa
            li.st-GlobalRegionPc_RegionItem
              a.st-GlobalRegionPc_RegionLink(href="https://uk.kyocera.com/")
                span.st-GlobalRegionPc_RegionImage
                  img(src="/assets/img/common/region_united-kingdom.svg" alt)
                span.st-GlobalRegionPc_RegionText United Kingdom


      .st-GlobalNav_Area.js-documentClose#st-GlobalNav_Area
        // Main Navigation
        .st-GlobalSiteNav
          ul.st-GlobalSiteNav_List
            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_DivisionTitle(href="#") Dummy

            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_Link(href="/") Top
                span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")

            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_Link(href="/products/") Products
                span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
              .st-GlobalSiteNav_SubArea
                ul.st-DrawerNav.js-documentClose
                  li.st-DrawerNav_Item
                    //- idは`st-DrawerNav_Trigger-` + ディレクトリ名
                    a.st-DrawerNav_Trigger.js-documentClose#st-DrawerNav_Trigger-aaa(href="/products/xxx/prd/aaa/" aria-expanded="false" aria-controls="st-DrawerNav_Drawer-aaa")
                      | Child A
                      span.st-DrawerNav_TriggerExternalA(aria-hidden="true")
                  li.st-DrawerNav_Item
                    a.st-DrawerNav_Trigger.js-documentClose#st-DrawerNav_Trigger-bbb(href="/products/xxx/prd/bbb/" aria-expanded="false" aria-controls="st-DrawerNav_Drawer-bbb")
                      | Child B
                      span.st-DrawerNav_TriggerExternalB(aria-hidden="true")
                  li.st-DrawerNav_Item
                    a.st-DrawerNav_Trigger.js-documentClose#st-DrawerNav_Trigger-ccc(href="/products/xxx/prd/ccc/" aria-expanded="false" aria-controls="st-DrawerNav_Drawer-ccc")
                      | Child C

            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_Link(href="/products/xxx/news/") News
                span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_Link(href="/products/xxx/contact/") Sales Office
                span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")
            li.st-GlobalSiteNav_Item
              a.st-GlobalSiteNav_Link(href="/products/xxx/events/") Events
                span.st-GlobalSiteNav_LinkIcon(aria-hidden="true")

        // / Main Navigation

        // Sub Navigation1
        .st-DropNav#st-DropNav1(aria-hidden="true" aria-labelledby="st-DropNav_PcButton1")
          button.st-DropNav_SpButton#st-DropNav_SpButton1(aria-expanded="false" aria-controls="st-DropNav_List1")
            .st-DropNav_SpButtonInner
              | All Products
              span.st-DropNav_SpButtonIcon(aria-hidden="true")
          a.st-DropNav_SubLinkTop(href="/products/")
            .st-DropNav_SubLinkTopInner
              | Products Top
              span.st-DropNav_SubLinkTopIcon(aria-hidden="true")
          .st-DropNav_Inner
            .st-DropNav_List#st-DropNav_List1(aria-hidden="true" aria-labelledby="st-DropNav_SpButton1")
              .l-Grid
                .l-Grid_Item.l-Grid_Item-9of12Lg
                  p.st-DropNav_SubLinkTitle Business to Business
                  ul.st-DropNav_SubList
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="https://www.kyoceradocumentsolutions.eu/") Printers / Multifunctionals
                        span.st-DropNav_SubLinkExternalA(aria-hidden="true")
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/fineceramic_components/") Fine Ceramic Components
                        span.st-DropNav_SubLinkExternalB(aria-hidden="true")
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/semiconductor_components/") Semiconductor Components
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/automotive_components/") Automotive Components
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/industrial_tools/") Industrial Tools
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/electronic_components/") Electronic Components &amp; Devices
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/printing_devices/") Printing Devices
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/lcds_glass_glass_touch_panels/") LCDs and Touch Solutions
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/organic_materials/") Organic Materials
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/solar_electric_systems/") Solar Electric Systems
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/watch_and_jewelry/") Watch and Jewelry Industry

                .l-Grid_Item.l-Grid_Item-3of12Lg
                  p.st-GlobalSiteNav_SubLinkTitle Consumer
                  ul.st-DropNav_SubList
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/kitchen_products/") Kitchen Products
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/solar_electric_systems/") Solar Electric Systems
                    li.st-DropNav_SubItem
                      a.st-DropNav_SubLink(href="/products/office_products/") Office Products
        // / Sub Navigation1


        // Sub Navigation2
        .st-DropNav#st-DropNav2(aria-hidden="true" aria-labelledby="st-DropNav_PcButton2")
          button.st-DropNav_SpButton#st-DropNav_SpButton1(aria-expanded="false" aria-controls="st-DropNav_List2")
            .st-DropNav_SpButtonInner
              | About Kyocera
              span.st-DropNav_SpButtonIcon(aria-hidden="true")
          .st-DropNav_Inner
            .st-DropNav_List#st-DropNav_List2(aria-hidden="true" aria-labelledby="st-DropNav_SpButton2")
              ul.st-DropNav_SubList
                li.st-DropNav_SubItem
                  a.st-DropNav_SubLink(href="/products/") Products
                li.st-DropNav_SubItem
                  a.st-DropNav_SubLink(href="/company/") About
                li.st-DropNav_SubItem
                  a.st-DropNav_SubLink(href="/news/") News
                li.st-DropNav_SubItem
                  a.st-DropNav_SubLink(href="/contact/") Contact
        // / Sub Navigation2

        .st-GlobalRegionSp
          button.st-GlobalRegionSp_Toggle.js-documentClose#st-GlobalRegionSp_Toggle(type="button" aria-controls="st-GlobalRegionSp_SubArea" aria-expanded="false")
            span.st-GlobalRegionSp_Region
              img(src="/assets/img/common/region_eu.svg" alt)
            span.st-GlobalRegionSp_Text EU
            span.GloablRegion_Icon(aria-hidden="true")
          .st-GlobalRegionSp_SubArea.js-documentClose#st-GlobalRegionSp_SubArea(aria-hidden="true" aria-labelledby="st-GlobalRegionSp_Toggle")
            a.st-GlobalRegionSp_Heading(href="https://global.kyocera.com/")
              | Kyocera Global
              span.st-GlobalRegionSp_HeadingIcon(aria-hidden="true")
            a.st-GlobalRegionSp_Heading(href="/")
              | Europe
              span.st-GlobalRegionSp_HeadingIcon(aria-hidden="true")
            ul.st-GlobalRegionSp_RegionList
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://austria.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_austria.svg" alt)
                  span.st-GlobalRegionSp_RegionText Austria
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://denmark.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_denmark.svg" alt)
                  span.st-GlobalRegionSp_RegionText Denmark
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://finland.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_finland.svg" alt)
                  span.st-GlobalRegionSp_RegionText Finland
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://france.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_france.svg" alt)
                  span.st-GlobalRegionSp_RegionText France
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://germany.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_germany.svg" alt)
                  span.st-GlobalRegionSp_RegionText Germany
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://italy.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_italy.svg" alt)
                  span.st-GlobalRegionSp_RegionText Italy
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://netherlands.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_netherlands.svg" alt)
                  span.st-GlobalRegionSp_RegionText Netherlands
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://norway.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_norway.svg" alt)
                  span.st-GlobalRegionSp_RegionText Norway
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://portugal.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_portugal.svg" alt)
                  span.st-GlobalRegionSp_RegionText Portugal
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://russia.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_russia.svg" alt)
                  span.st-GlobalRegionSp_RegionText Russia
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://spain.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_spain.svg" alt)
                  span.st-GlobalRegionSp_RegionText Spain
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://sweden.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_sweden.svg" alt)
                  span.st-GlobalRegionSp_RegionText Sweden
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://switzerland.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_switzerland.svg" alt)
                  span.st-GlobalRegionSp_RegionText Switzerland
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://southafrica.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_south-africa.svg" alt)
                  span.st-GlobalRegionSp_RegionText South Africa
              li.st-GlobalRegionSp_RegionItem
                a.st-GlobalRegionSp_RegionLink(href="https://uk.kyocera.com/")
                  span.st-GlobalRegionSp_RegionImage
                    img(src="/assets/img/common/region_united-kingdom.svg" alt)
                  span.st-GlobalRegionSp_RegionText United Kingdom


        .st-DrawerNav_Drawer.js-documentClose#st-DrawerNav_Drawer-bbb(aria-hidden="true" aria-labelledby="st-DrawerNav_Trigger-bbb")
          button.st-DrawerNav_DrawerBack(type="button" aria-label="Back")
            span.st-DrawerNav_DrawerBackIcon(aria-hidden="true")
          a.st-DrawerNav_DrawerHeading(href="/products/xxx/bbb/") Child B
          ul.st-DrawerNav_DrawerList.js-documentClose
            li.st-DrawerNav_DrawerItem
              a.st-DrawerNav_DrawerLink(href="/products/xxx/prd/bbb/000.html")
                span.st-DrawerNav_DrawerIcon(aria-hidden="true")
                | Grandchild 0
                span.st-DrawerNav_DrawerIconExternalA(aria-hidden="true")
            li.st-DrawerNav_DrawerItem
              a.st-DrawerNav_DrawerLink(href="/products/xxx/prd/bbb/111.html")
                span.st-DrawerNav_DrawerIcon(aria-hidden="true")
                | Grandchild 1
                span.st-DrawerNav_DrawerIconExternalB(aria-hidden="true")
            li.st-DrawerNav_DrawerItem
              a.st-DrawerNav_DrawerLink(href="/products/xxx/prd/bbb/222.html")
                span.st-DrawerNav_DrawerIcon(aria-hidden="true")
                | Grandchild 2

    // / Navigation Wrap Area

    // statement
    .st-GlobalHeader_StatementArea
      .st-GlobalHeader_Statement
        img.st-GlobalHeader_StatementImage(src="/_assets/img/common/statement.svg" alt="THE NEW VALUE FRONTIER")


    // / statement
```
*/
/*
---
name: st-GlobalNav
namespace: sw-
category: Navigation
---

ホームページとカテゴリトップページで使用するナビゲーションです。


```jade
```
*/
.st-GlobalRegionPc {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalRegionPc {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
  }
}

.st-GlobalRegionPc_Toggle {
  display: inline-block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1;
  border: none;
  background-color: transparent;
  color: #666;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalRegionPc_Toggle {
    vertical-align: middle;
    width: auto;
  }
}

.st-GlobalRegionPc_Toggle::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 19px;
  margin-right: 1.25rem;
  margin-left: 0.875rem;
  background-color: #e6e6e6;
}

.st-GlobalRegionPc_Toggle[type="button"], .st-GlobalRegionPc_Toggle[type="reset"], .st-GlobalRegionPc_Toggle[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-GlobalRegionPc_Toggle:focus {
  outline: 0;
  box-shadow: none;
}

.st-GlobalRegionPc_Toggle.focus-ring:focus {
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-GlobalRegionPc_Region {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_Region > img {
  vertical-align: middle;
  position: relative;
  top: -0.0625rem;
  width: 1.5rem !important;
  height: 1.5rem;
  margin-right: 0.375rem;
}

.st-GlobalRegionPc_Region > img[src*="region_global"] {
  width: 1.1875rem !important;
  height: 1.1875rem;
}

.st-GlobalRegionPc_SubArea {
  display: none;
  position: absolute;
  top: 64px;
  left: 0;
  z-index: 10000;
  width: 100%;
  padding-bottom: 2.875rem;
  text-align: left;
  background-color: rgba(79, 79, 79, 0.9);
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalRegionPc_SubArea {
    top: 84px;
  }
}

.st-GlobalRegionPc_Heading {
  display: block;
  margin-bottom: 1.875rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  color: #fff;
}

.st-GlobalRegionPc_Heading:hover {
  text-decoration: underline;
}

.st-GlobalRegionPc_HeadingIcon {
  position: relative;
  top: -0.1em;
  margin-left: 0.25rem;
  font-size: 0.8em;
}

.st-GlobalRegionPc_HeadingIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.st-GlobalRegionPc_RegionList {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_RegionList > img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 2.1875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

.st-GlobalRegionPc_RegionItem {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_RegionItem > img {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 1230px) {
  .st-GlobalRegionPc_RegionItem > img {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
}

.st-GlobalRegionPc_RegionItem > img:nth-of-type(n + 5) {
  margin-top: 1.5rem;
}

@media print, screen and (min-width: 1230px) {
  .st-GlobalRegionPc_RegionItem > img:nth-of-type(n + 5) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-GlobalRegionPc_RegionItem > img:nth-of-type(n + 7) {
    margin-top: 1.5rem;
  }
}

.st-GlobalRegionPc_RegionLink {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_RegionLink > img {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #ebebeb;
}

.st-GlobalRegionPc_RegionLink > img:hover {
  text-decoration: underline;
}

.st-GlobalRegionPc_RegionText {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_RegionImage {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-GlobalRegionPc_RegionImage > img {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

.st-GlobalRegionSp {
  display: block;
  padding: 1.25rem 0.9375rem 0;
  background-color: #4f4f4f;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalRegionSp {
    display: none;
  }
}

.st-GlobalNav-divition .st-GlobalRegionSp {
  background-color: transparent;
}

.st-GlobalRegionSp_Toggle {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0.625rem 0;
  text-align: left;
  text-decoration: none;
  text-transform: uppercase;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  background-color: transparent;
  color: #bcbcbc;
}

.st-GlobalNav-divition .st-GlobalRegionSp_Toggle {
  color: #8d8d8d;
}

.st-GlobalRegionSp_Toggle[type="button"], .st-GlobalRegionSp_Toggle[type="reset"], .st-GlobalRegionSp_Toggle[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-GlobalRegionSp_Toggle:focus {
  outline: 0;
}

.st-GlobalRegionSp_Region {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

.GloablRegion_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.2em;
  margin-left: 0.625rem;
  font-size: 0.5rem;
  color: #bcbcbc;
}

.st-GlobalNav-divition .GloablRegion_Icon {
  color: #666;
}

.GloablRegion_Icon::after {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.st-GlobalRegionSp_Toggle[aria-expanded="true"] .GloablRegion_Icon::after {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.st-GlobalRegionSp_SubArea {
  padding: 1.4375rem 1.25rem 0;
}

.st-GlobalRegionSp_SubArea[aria-hidden="true"] {
  display: none;
}

.st-GlobalRegionSp_SubArea[aria-hidden="false"] {
  display: block;
}

.st-GlobalRegionSp_Heading {
  display: block;
  margin-bottom: 1.875rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  color: #fff;
}

.st-GlobalNav-divition .st-GlobalRegionSp_Heading {
  color: #444;
}

.st-GlobalRegionSp_Heading:hover {
  text-decoration: underline;
}

.st-GlobalRegionSp_HeadingIcon {
  position: relative;
  top: -0.2em;
  margin-left: 0.25rem;
  font-size: 0.75rem;
}

.st-GlobalRegionSp_HeadingIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.st-GlobalRegionSp_RegionList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 2.1875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

.st-GlobalRegionSp_RegionItem {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  padding-left: 0.9375rem;
}

.st-GlobalRegionSp_RegionItem:nth-of-type(n + 3) {
  margin-top: 1.875rem;
}

.st-GlobalRegionSp_RegionLink {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #ebebeb;
}

.st-GlobalNav-divition .st-GlobalRegionSp_RegionLink {
  color: #444;
}

.st-GlobalRegionSp_RegionLink:hover {
  text-decoration: underline;
}

.st-GlobalRegionSp_RegionImage {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

.st-PrivacyNotice {
  height: 2.375rem;
  position: relative;
  z-index: 0;
  border-bottom: 1px solid #e6e6e6;
}

.st-PrivacyNotice_Inner {
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 0.9375rem;
  text-align: right;
}

@media print, screen and (min-width: 768px) {
  .st-PrivacyNotice_Inner {
    margin: 0 auto;
    padding: 0 0.75rem;
  }
}

@media print, screen and (min-width: 1194px) {
  .st-PrivacyNotice_Inner {
    max-width: 1170px;
    padding-right: 0;
    padding-left: 0;
  }
}

.st-PrivacyNotice_Link {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 0.75rem;
  line-height: 1.42;
  color: #df0523;
  text-decoration: none;
}

@media print, screen and (min-width: 768px) {
  .st-PrivacyNotice_Link {
    font-size: 0.875rem;
    line-height: 1.36;
  }
}

.st-PrivacyNotice_Link:hover {
  text-decoration: underline;
  color: #df0523;
}

.st-PrivacyNotice_LinkIcon {
  margin-left: 0.25rem;
  font-size: 0.625rem;
}

@media print, screen and (min-width: 768px) {
  .st-PrivacyNotice_LinkIcon {
    margin-left: 0.375rem;
  }
}

.st-PrivacyNotice_LinkIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  color: currentColor;
}

/*
---
name: st-RegionSelect
namespace: st-
category: Global
---

グローバルフッターで地域の切り替えをします。

- スマホではselectタグになります
- PCでは要素を生成してulタグになります


```jade
.st-Sitemap_Region
  .st-RegionSelect
    button.st-RegionSelect_Button(type="button" data-toggle="0")
      span.st-RegionSelect_Region Europe
      span.st-RegionSelect_Icon(aria-hidden="true")
    select#st-RegionSelect_Select.st-RegionSelect_Select
      option(value="0") Europe
      option(value="1") Austria
      option(value="2") Denmark
      option(value="3") Finland
      option(value="4") France
      option(value="5") Germany
      option(value="6") Italy
      option(value="7") Netherlands
      option(value="8") Norway
      option(value="9") Portugal
      option(value="10") Russia
      option(value="11") Spain
      option(value="12") Sweden
      option(value="13") Switzerland
      option(value="14") South Africa
      option(value="15") United Kingdom
  a.st-Sitemap_GlobalLink(href="#")
    span.st-Sitemap_GlobalIcon(aria-hidden="true")
    | Global
```
*/
.st-RegionSelect {
  display: inline-block;
  position: relative;
}

[lang="nl-NL"] .st-RegionSelect {
  width: 9.875rem;
}

[lang="de-CH"] .st-RegionSelect {
  width: 9.5625rem;
}

[lang="en-ZA"] .st-RegionSelect {
  width: 9.8125rem;
}

[lang="en-GB"] .st-RegionSelect {
  width: 11.5rem;
}

.st-RegionSelect_Button {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: auto;
  height: 42px;
  padding: 0 0.625rem 0 0.75rem;
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 42px;
  white-space: nowrap;
  border: none;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13);
  color: #000;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media print, screen and (min-width: 1024px) {
  .st-RegionSelect_Button {
    position: relative;
    left: -4px;
    width: auto;
    text-align: left;
    line-height: 1;
  }
}

.st-RegionSelect_Button:not(.focus-ring) {
  outline: none;
}

.st-RegionSelect_Select {
  position: relative;
  width: auto;
  height: 42px;
  text-align: center;
  text-indent: 0.01px;
  text-overflow: "";
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
  border: none;
  background-color: transparent;
  color: #000;
  color: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media print, screen and (min-width: 1024px) {
  .st-RegionSelect_Select {
    display: none;
  }
}

.st-RegionSelect_Select::-ms-expand {
  display: none;
}

.st-RegionSelect_Mock {
  display: none;
  position: absolute;
  z-index: 10;
  overflow: auto;
  min-width: 11.25rem;
  margin: 0.5rem 0;
  padding: 0.8125rem 0.6875rem;
  font-size: 0.8125rem;
  font-weight: normal;
  line-height: 1;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.33);
  list-style-type: none;
  pointer-events: none;
}

@media print, screen and (min-width: 1024px) {
  .st-RegionSelect_Button[data-toggle] ~ .st-RegionSelect_Mock {
    display: none;
    pointer-events: none;
  }
  .st-RegionSelect_Button[data-toggle="1"] ~ .st-RegionSelect_Mock {
    display: inherit;
    pointer-events: auto;
  }
  .st-RegionSelect_Button[data-position="0"] ~ .st-RegionSelect_Mock {
    bottom: 100%;
  }
  .st-RegionSelect_Button[data-position="1"] ~ .st-RegionSelect_Mock {
    top: 100%;
  }
  .st-RegionSelect_Select[data-selected="0"] ~ .st-RegionSelect_Mock li:nth-child(1) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="0"] li:nth-child(1) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="0"]::before {
    -webkit-transform: translate3d(0, 0%, 0);
            transform: translate3d(0, 0%, 0);
  }
  .st-RegionSelect_Select[data-selected="1"] ~ .st-RegionSelect_Mock li:nth-child(2) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="1"] li:nth-child(2) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="1"]::before {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  .st-RegionSelect_Select[data-selected="2"] ~ .st-RegionSelect_Mock li:nth-child(3) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="2"] li:nth-child(3) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="2"]::before {
    -webkit-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0);
  }
  .st-RegionSelect_Select[data-selected="3"] ~ .st-RegionSelect_Mock li:nth-child(4) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="3"] li:nth-child(4) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="3"]::before {
    -webkit-transform: translate3d(0, 300%, 0);
            transform: translate3d(0, 300%, 0);
  }
  .st-RegionSelect_Select[data-selected="4"] ~ .st-RegionSelect_Mock li:nth-child(5) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="4"] li:nth-child(5) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="4"]::before {
    -webkit-transform: translate3d(0, 400%, 0);
            transform: translate3d(0, 400%, 0);
  }
  .st-RegionSelect_Select[data-selected="5"] ~ .st-RegionSelect_Mock li:nth-child(6) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="5"] li:nth-child(6) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="5"]::before {
    -webkit-transform: translate3d(0, 500%, 0);
            transform: translate3d(0, 500%, 0);
  }
  .st-RegionSelect_Select[data-selected="6"] ~ .st-RegionSelect_Mock li:nth-child(7) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="6"] li:nth-child(7) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="6"]::before {
    -webkit-transform: translate3d(0, 600%, 0);
            transform: translate3d(0, 600%, 0);
  }
  .st-RegionSelect_Select[data-selected="7"] ~ .st-RegionSelect_Mock li:nth-child(8) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="7"] li:nth-child(8) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="7"]::before {
    -webkit-transform: translate3d(0, 700%, 0);
            transform: translate3d(0, 700%, 0);
  }
  .st-RegionSelect_Select[data-selected="8"] ~ .st-RegionSelect_Mock li:nth-child(9) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="8"] li:nth-child(9) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="8"]::before {
    -webkit-transform: translate3d(0, 800%, 0);
            transform: translate3d(0, 800%, 0);
  }
  .st-RegionSelect_Select[data-selected="9"] ~ .st-RegionSelect_Mock li:nth-child(10) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="9"] li:nth-child(10) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="9"]::before {
    -webkit-transform: translate3d(0, 900%, 0);
            transform: translate3d(0, 900%, 0);
  }
  .st-RegionSelect_Select[data-selected="10"] ~ .st-RegionSelect_Mock li:nth-child(11) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="10"] li:nth-child(11) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="10"]::before {
    -webkit-transform: translate3d(0, 1000%, 0);
            transform: translate3d(0, 1000%, 0);
  }
  .st-RegionSelect_Select[data-selected="11"] ~ .st-RegionSelect_Mock li:nth-child(12) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="11"] li:nth-child(12) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="11"]::before {
    -webkit-transform: translate3d(0, 1100%, 0);
            transform: translate3d(0, 1100%, 0);
  }
  .st-RegionSelect_Select[data-selected="12"] ~ .st-RegionSelect_Mock li:nth-child(13) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="12"] li:nth-child(13) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="12"]::before {
    -webkit-transform: translate3d(0, 1200%, 0);
            transform: translate3d(0, 1200%, 0);
  }
  .st-RegionSelect_Select[data-selected="13"] ~ .st-RegionSelect_Mock li:nth-child(14) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="13"] li:nth-child(14) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="13"]::before {
    -webkit-transform: translate3d(0, 1300%, 0);
            transform: translate3d(0, 1300%, 0);
  }
  .st-RegionSelect_Select[data-selected="14"] ~ .st-RegionSelect_Mock li:nth-child(15) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="14"] li:nth-child(15) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="14"]::before {
    -webkit-transform: translate3d(0, 1400%, 0);
            transform: translate3d(0, 1400%, 0);
  }
  .st-RegionSelect_Select[data-selected="15"] ~ .st-RegionSelect_Mock li:nth-child(16) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="15"] li:nth-child(16) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="15"]::before {
    -webkit-transform: translate3d(0, 1500%, 0);
            transform: translate3d(0, 1500%, 0);
  }
  .st-RegionSelect_Select[data-selected="16"] ~ .st-RegionSelect_Mock li:nth-child(17) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="16"] li:nth-child(17) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="16"]::before {
    -webkit-transform: translate3d(0, 1600%, 0);
            transform: translate3d(0, 1600%, 0);
  }
  .st-RegionSelect_Select[data-selected="17"] ~ .st-RegionSelect_Mock li:nth-child(18) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="17"] li:nth-child(18) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="17"]::before {
    -webkit-transform: translate3d(0, 1700%, 0);
            transform: translate3d(0, 1700%, 0);
  }
  .st-RegionSelect_Select[data-selected="18"] ~ .st-RegionSelect_Mock li:nth-child(19) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="18"] li:nth-child(19) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="18"]::before {
    -webkit-transform: translate3d(0, 1800%, 0);
            transform: translate3d(0, 1800%, 0);
  }
  .st-RegionSelect_Select[data-selected="19"] ~ .st-RegionSelect_Mock li:nth-child(20) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="19"] li:nth-child(20) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="19"]::before {
    -webkit-transform: translate3d(0, 1900%, 0);
            transform: translate3d(0, 1900%, 0);
  }
  .st-RegionSelect_Select[data-selected="20"] ~ .st-RegionSelect_Mock li:nth-child(21) {
    font-weight: bold;
    background-color: #f5f5f5;
  }
  .st-RegionSelect_Mock[data-cursor="20"] li:nth-child(21) {
    color: #df0523;
  }
  .st-RegionSelect_Mock[data-cursor="20"]::before {
    -webkit-transform: translate3d(0, 2000%, 0);
            transform: translate3d(0, 2000%, 0);
  }
}

.st-RegionSelect_Mock::-webkit-scrollbar {
  width: 4px;
}

.st-RegionSelect_Mock::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.26);
}

.st-RegionSelect_Mock::before {
  content: "";
  display: block;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  height: 40px;
  color: #df0523;
}

.st-RegionSelect_Mock li {
  position: relative;
  height: 40px;
  margin: 0;
  padding: 0 0.625rem;
  white-space: nowrap;
  line-height: 40px;
  cursor: pointer;
  transition: background 0.2s;
}

.st-RegionSelect_Icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2.625rem;
  font-size: 10px;
  color: #666;
  -webkit-transform: scale3d(0.8, 0.8, 1);
          transform: scale3d(0.8, 0.8, 1);
}

.st-RegionSelect_Icon::after {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: 0;
}

.st-RegionSelect_Region {
  display: inline-block;
  vertical-align: middle;
}

/*
---
name: st-RelatedA
namespace: st-
category: Global
id: [LINK-9, BOX-3]
---

<span class="sw-Label">LINK-9</span><span class="sw-Label">BOX-3</span>

サイドバーに配置する関連情報です。

```jade
.l-DetailTemplate_related
  .st-RelatedA
    p.st-RelatedA_Heading Download
    ul.st-RelatedA_List
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_DownloadIcon(aria-hidden="true")
          span.st-RelatedA_Text Multi Layer - Open tooled package list
            span.st-RelatedA_Size  (50.30 KB)
            span.st-RelatedA_ExternalAIcon(aria-hidden="true")
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_DownloadIcon(aria-hidden="true")
          span.st-RelatedA_Text Single Layer - Open tooled package list
            span.st-RelatedA_Size  (52.61 KB)
            span.st-RelatedA_ExternalBIcon(aria-hidden="true")
.l-DetailTemplate_related
  .st-RelatedA
    p.st-RelatedA_Heading Related Links
    ul.st-RelatedA_List
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_RelatedIcon(aria-hidden="true")
          span.st-RelatedA_Text Organic Packages (Global Website)
            span.st-RelatedA_ExternalAIcon(aria-hidden="true")
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_RelatedIcon(aria-hidden="true")
          span.st-RelatedA_Text Semiconductor Components (Global Website)
            span.st-RelatedA_ExternalBIcon(aria-hidden="true")
```
*/
.st-RelatedA {
  padding-top: 0.625rem;
  padding-bottom: 1.875rem;
  border-top: 2px solid #dadada;
}

.st-RelatedA_Heading {
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.08333em;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #444;
}

.st-RelatedA_List {
  padding-left: 0;
  list-style-type: none;
}

.st-RelatedA_List > :last-child {
  margin-bottom: 0;
}

.st-RelatedA_Item {
  margin-bottom: 0.625rem;
}

.st-RelatedA_Link {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #444;
  transition-duration: 0.3s;
}

.st-RelatedA_Link:hover {
  text-decoration: underline;
  color: #df0523;
}

.st-RelatedA_Text {
  -webkit-flex-basis: 0;
      -ms-flex-preferred-size: 0;
          flex-basis: 0;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 0.8125rem;
}

.st-RelatedA_DownloadIcon {
  width: 1.4375rem;
  height: 1rem;
  font-size: 1rem;
  color: #df0523;
}

.st-RelatedA_DownloadIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-RelatedA_RelatedIcon {
  width: 1.6875rem;
  padding-left: 0.25rem;
  font-size: 0.75rem;
  color: #df0523;
}

.st-RelatedA_RelatedIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: 0.1em;
}

.st-RelatedA_ExternalAIcon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-RelatedA_ExternalAIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.st-RelatedA_ExternalBIcon {
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-RelatedA_ExternalBIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.st-RelatedA_Size {
  color: #999;
  transition-duration: 0.3s;
}

.st-RelatedA_Link:hover .st-RelatedA_Size {
  color: #df0523;
}

/*
---
name: st-RelatedB
namespace: st-
category: Global
---

サイドバーに配置する関連情報です。


```jade
.l-DetailTemplate_related
  .st-RelatedB
    a.sw-LinkInstagram(href="#")
      .sw-LinkInstagram_Icon(aria-hidden="true")
      span.sw-LinkInstagram_Text Follow us Instagram
```

Instagramのリンクは最後に配置します。Instagramの上余白が追加されます。

```jade
.l-DetailTemplate_related
  .st-RelatedA
    p.st-RelatedA_Heading Download
    ul.st-RelatedA_List
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_DownloadIcon(aria-hidden="true")
          span.st-RelatedA_Text Multi Layer - Open tooled package list
            span.st-RelatedA_Size  (50.30 KB)
            span.st-RelatedA_ExternalAIcon(aria-hidden="true")
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_DownloadIcon(aria-hidden="true")
          span.st-RelatedA_Text Single Layer - Open tooled package list
            span.st-RelatedA_Size  (52.61 KB)
            span.st-RelatedA_ExternalBIcon(aria-hidden="true")
.l-DetailTemplate_related
  .st-RelatedA
    p.st-RelatedA_Heading Related Links
    ul.st-RelatedA_List
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_RelatedIcon(aria-hidden="true")
          span.st-RelatedA_Text Organic Packages (Global Website)
            span.st-RelatedA_ExternalAIcon(aria-hidden="true")
      li.st-RelatedA_Item
        a.st-RelatedA_Link(href="#")
          span.st-RelatedA_RelatedIcon(aria-hidden="true")
          span.st-RelatedA_Text Semiconductor Components (Global Website)
            span.st-RelatedA_ExternalBIcon(aria-hidden="true")
.l-DetailTemplate_related
  .st-RelatedB
    a.sw-LinkInstagram(href="#")
      .sw-LinkInstagram_Icon(aria-hidden="true")
      span.sw-LinkInstagram_Text Follow us Instagram
```
*/
.st-RelatedB {
  padding-bottom: 1.875rem;
}

.l-DetailTemplate_related + .l-DetailTemplate_related .st-RelatedB {
  padding-top: 1.875rem;
}

/*
---
name: st-SideNav
namespace: st-
category: Navigation
---

下層ページのサイドバーにあるナビゲーションです。

- Productsはドロップダウンで、Products内では最初から開きます
- スマホでは非表示になり、`.st-CategoryNav`が代わりに表示されます
- 3つの階層でカレント表示されます

```jade
main
  .l-DetailTemplate
    .l-DetailTemplate_Wrapper
      .l-DetailTemplate_Main
      .l-DetailTemplate_Sub
        nav.l-DetailTemplate_SubNav
          ul.st-SideNav
            li.st-SideNav_Item
              a.st-SideNav_Link(href="/")
                | Top
                span.st-SideNav_Icon(aria-hidden="true")
            li.st-SideNav_Item
              button.st-SideNav_Toggle#st-SideNav_Toggle(type="button" aria-expanded="false" aria-controls="st-SideNav_Parent")
                | Products
                span.st-SideNav_ToggleIcon(aria-hidden="true")
              ul.st-SideNav_Parent#st-SideNav_Parent(aria-hidden="true")
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") Automotive
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="/products/semiconductor_components/led_lighting/") LED Lighting
                  ul.st-SideNav_Child
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/products/semiconductor_components/led_lighting/general.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span General LED Lighting
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/products/semiconductor_components/led_lighting/uv_led.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span UV LED Lighting
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/products/semiconductor_components/led_lighting/automotive_led.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span Automotive LED Lighting
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") Camera Image Sensors
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") Power - AMB Substrates
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") MEMS Sensors Packaging
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") Network / Infrastructure
                    span.st-SideNav_ParentExternalA(aria-hidden="true")
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="#") Fiber Optics
                    span.st-SideNav_ParentExternalB(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="/news/")
                | News
                span.st-SideNav_Icon(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="#")
                | Sales Office
                span.st-SideNav_IconExternalA(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="#")
                | Events
                span.st-SideNav_IconExternalB(aria-hidden="true")
```

各階層はドロップダウンで、もしくはページの階層に応じて開閉されます。
以下はHTML側で最下層まで開いた状態にしたものです（USのCarrerを流用）。

```jade
main
  .l-DetailTemplate
    .l-DetailTemplate_Wrapper
      .l-DetailTemplate_Main
      .l-DetailTemplate_Sub
        nav.l-DetailTemplate_SubNav
          ul.st-SideNav
            li.st-SideNav_Item
              a.st-SideNav_Link(href="/careers/")
                | Careers
                span.st-SideNav_Icon(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="https://usa.kyoceradocumentsolutions.com/en/about-us/careers.html" target="_blank") KYOCERA Document Solutions America, Inc.
                span.st-SideNav_IconExternalA(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="/careers/kii/")
                | KYOCERA International, Inc.
                span.st-SideNav_Icon(aria-hidden="true")
              ul.st-SideNav_Parent#st-SideNav_SubCarrer
                li.st-SideNav_ParentItem
                  a.st-SideNav_ParentLink(href="https://recruiting2.ultipro.com/KYO1000KYO/JobBoard/76b8c73c-befd-f875-1815-e0b7a1f6e65f/?q=&o=postedDateDesc" target="_blank")
                    | Kyocera International, Inc.
 Career Opportunities
                    span.st-SideNav_ChildIconExternalA(aria-hidden="true")
                  a.st-SideNav_ParentLink(href="/careers/kii/why-kyocera/")
                    | Why Kyocera?
                    span.st-SideNav_Icon(aria-hidden="true")
                  ul.st-SideNav_Child
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/careers/kii/why-kyocera/at-a-glance.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span At a Glance
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/careers/kii/why-kyocera/csr.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span Corporate Social Responsibility
                    li.st-SideNav_ChildItem
                      a.st-SideNav_ChildLink(href="/careers/kii/why-kyocera/culture.html")
                        span.st-SideNav_ChildIcon(aria-hidden="true")
                        span Company Culture
                  a.st-SideNav_ParentLink(href="/careers/kii/benefits/")
                    | Benefits
                    span.st-SideNav_Icon(aria-hidden="true")

            li.st-SideNav_Item
              a.st-SideNav_Link(href="KYOCERA Precision Tools, Inc." target="_blank") KYOCERA Precision Tools, Inc.
                span.st-SideNav_IconExternalA(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="https://www.kyocera-sgstool.com/about/careers" target="_blank") KYOCERA SGS Precision Tools, Inc.
                span.st-SideNav_IconExternalA(aria-hidden="true")
            li.st-SideNav_Item
              a.st-SideNav_Link(href="https://www.senco.com/company/careers" target="_blank") KYOCERA SENCO Industrial Tools, Inc.
                span.st-SideNav_IconExternalA(aria-hidden="true")
```
*/
.st-SideNav {
  padding-left: 0;
  border-bottom: 1px dotted #979797;
  list-style-type: none;
}

.st-SideNav_Link {
  display: block;
  position: relative;
  padding: 0.9375rem 1.625rem 0.9375rem 0.625rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  border-top: 1px dotted #979797;
  color: #000;
  transition-duration: 0.3s;
}

.st-SideNav_Link:hover {
  text-decoration: none;
  color: #df0523;
}

.st-SideNav_Link[aria-current="location"], .st-SideNav_Link[aria-current="page"], .st-SideNav_Link[aria-current="true"] {
  background-color: #f2f4f6;
  color: #df0523;
}

.st-SideNav_Icon {
  position: absolute;
  top: 0;
  right: 0.5rem;
  bottom: 0;
  height: 0.75rem;
  margin: auto;
  font-size: 0.75rem;
  color: #666;
}

.st-SideNav_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.st-SideNav_IconExternalA {
  position: absolute;
  top: 0;
  right: 0.5625rem;
  bottom: 0;
  height: 0.6875rem;
  margin: auto;
  font-size: 0.6875rem;
  color: #666;
}

.st-SideNav_IconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-SideNav_IconExternalB {
  position: absolute;
  top: 0;
  right: 0.5625rem;
  bottom: 0;
  height: 0.6875rem;
  margin: auto;
  font-size: 0.6875rem;
  color: #666;
}

.st-SideNav_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-SideNav_Toggle {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.625rem 0.75rem 0.625rem;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  border: none;
  border-top: 1px dotted #979797;
  background-color: transparent;
  color: #000;
  transition-duration: 0.3s;
  transition-property: color;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-SideNav_Toggle[type="button"], .st-SideNav_Toggle[type="reset"], .st-SideNav_Toggle[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-SideNav_Toggle:focus {
  outline: 0;
}

.st-SideNav_Toggle.focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-SideNav_Toggle:hover {
  text-decoration: none;
  color: #df0523;
}

.st-SideNav_Toggle[aria-expanded="true"] {
  border-bottom-width: 0;
}

.st-SideNav_ToggleIcon {
  position: absolute;
  top: 0;
  right: 0.4375rem;
  bottom: 0;
  height: 0.75rem;
  margin: auto;
  font-size: 0.75rem;
  color: #666;
}

.st-SideNav_ToggleIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-SideNav_Toggle-onAnimation .st-SideNav_ToggleIcon::before {
  transition-duration: 0.3s;
}

.st-SideNav_Toggle[aria-expanded="true"] .st-SideNav_ToggleIcon::before {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.st-SideNav_Parent {
  margin-bottom: 0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

.st-SideNav_Parent[aria-current="location"], .st-SideNav_Parent[aria-current="page"] {
  background-color: #f5f5f5;
}

.st-SideNav_Parent[aria-hidden="true"] {
  display: none;
}

.st-SideNav_Parent[aria-hidden="false"] {
  display: block;
}

.st-SideNav_ParentLink {
  display: block;
  padding: 0.5625rem 1.25rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #666;
  transition-duration: 0.3s;
}

.st-SideNav_ParentLink:hover {
  text-decoration: underline;
  color: #df0523;
}

.st-SideNav_ParentLink[aria-current="location"] {
  background-color: #f0f3f6;
  color: #000;
}

.st-SideNav_ParentLink[aria-current="page"] {
  background-color: #f0f3f6;
  color: #df0523;
}

.st-SideNav_ParentExternalA {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-SideNav_ParentExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.st-SideNav_ParentExternalB {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-SideNav_ParentExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.st-SideNav_Child {
  display: none;
  padding: 0.75rem 0.5rem 1.25rem 1.4375rem;
  background-color: #f0f3f6;
  list-style-type: none;
}

.st-SideNav_ParentLink[aria-current] + .st-SideNav_Child {
  display: block;
}

.st-SideNav_Child > :last-child {
  margin-bottom: 0;
}

.st-SideNav_ChildItem {
  margin-bottom: 0.6em;
}

.st-SideNav_ChildLink {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 1.3;
  color: #555;
  transition-duration: 0.3s;
}

.st-SideNav_ChildLink:hover {
  text-decoration: none;
  color: #df0523;
}

.st-SideNav_ChildLink[aria-current] {
  color: #df0523;
}

.st-SideNav_ChildIcon {
  position: relative;
  margin-right: 0.125rem;
  margin-left: -0.125rem;
  font-size: 0.8em;
  color: #df0523;
}

.st-SideNav_ChildIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: 0.15em;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
}

.st-SideNav_ChildIconExternalA {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-SideNav_ChildIconExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.st-SideNav_ChildIconExternalB {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-SideNav_ChildIconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

/*
---
name: st-SideNavNews
namespace: st-
category: Navigation
---

News下層ページのサイドバーにあるナビゲーションです。

- スマホでは非表示になり、`.st-CategoryNavNews`が代わりに表示されます
- 表示中ページがカレント表示されます

```jade
ul.st-SideNavNews
  li.st-SideNavNews_Item
    a.st-SideNavNews_Link(href="/news/" aria-current="location")
      | Latest News
      span.st-SideNavNews_Icon(aria-hidden="true")
    ul.st-SideNavNews_Parent
      li.st-SideNavNews_ParentItem
        a.st-SideNavNews_ParentLink(href="/news/2019/") 2019
      li.st-SideNavNews_ParentItem
        a.st-SideNavNews_ParentLink(href="/news/2018/") 2018
  li.st-SideNavNews_Item
    span.st-SideNavNews_Text Category
    ul.st-SideNavNews_Parent
      each str in ['Printers / Multifunctionals', 'Fine Ceramic Components', 'Semiconductor Components', 'Automotive Components', 'Cutting Tools', 'Electronic Components & Devices', 'Printing Devices', 'LCDs and Touch Solutions', 'Organic Materials', 'Solar Electric Systems', 'Watch and Jewelry Industry', 'Kitchen Products', 'Office Products']
        li.st-SideNavNews_ParentItem
          a.st-SideNavNews_ParentLink(href='"/news/" + str')= str
```
*/
.st-SideNavNews {
  padding-left: 0;
  border-top: 1px dotted #979797;
  list-style-type: none;
}

.st-SideNavNews_Item {
  padding-bottom: 0.875rem;
  border-bottom: 1px dotted #979797;
}

.st-SideNavNews_Text {
  display: block;
  position: relative;
  padding: 0.75rem 0.625rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: #000;
}

.st-SideNavNews_Link {
  display: block;
  position: relative;
  padding: 0.75rem 0.625rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: #000;
  transition-duration: 0.3s;
}

.st-SideNavNews_Link:hover {
  text-decoration: none;
  color: #df0523;
}

.st-SideNavNews_Link[aria-current="location"] {
  background-color: #f2f4f6;
  color: #df0523;
}

.st-SideNavNews_Icon {
  position: absolute;
  top: 0;
  right: 0.6875rem;
  bottom: 0;
  height: 1rem;
  margin: auto;
  font-size: 0.7em;
  color: #666;
}

.st-SideNavNews_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.st-SideNavNews_Parent {
  padding-left: 0;
  list-style-type: none;
}

.st-SideNavNews_Parent[aria-current="location"] {
  background-color: #f5f5f5;
}

.st-SideNavNews_ParentLink {
  display: block;
  padding: 0.5625rem 1.25rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: #666;
  transition-duration: 0.3s;
}

.st-SideNavNews_ParentLink:hover {
  text-decoration: underline;
  color: #df0523;
}

.st-SideNavNews_ParentLink[aria-current="location"] {
  background-color: #f0f3f6;
  color: #df0523;
}

/*
---
name: st-Sitemap
namespace: st-
category: Global
---

グローバルフッターでカテゴリのリンクへナビゲートします。

- 項目はMTから出力・出しわけされます
- ホームページとカテゴリトップのレイアウトです

```jade
footer.st-Sitemap
  .st-Sitemap_Inner
    .st-Sitemap_Items
      .st-Sitemap_Item
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/products/") Products
            span.st-Sitemap_HeadingIcon(aria-hidden="true")
        p.st-Sitemap_SubHeading Business to Business
        ul.st-Sitemap_Nav
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Printers / Multifunctionals
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Fine Ceramic Components
              span.st-Sitemap_NavLinkExternalA(aria-hidden="true")
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Semiconductor Components
              span.st-Sitemap_NavLinkExternalB(aria-hidden="true")
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Automotive Components
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Cutting Tools
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Electronic Components &amp; Devices
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Printing Devices
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") LCDs and Touch Solutions
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Organic Materials
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Solar Electric Systems
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Watch and Jewelry Industry

      .st-Sitemap_Item.st-Sitempa_Item-offset
        p.st-Sitemap_SubHeading Consumer
        ul.st-Sitemap_Nav
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Kitchen Products
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Solar Electric Systems
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Office Products

      .st-Sitemap_Item
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/company/") About
            span.st-Sitemap_HeadingIcon(aria-hidden="true")
        ul.st-Sitemap_Nav
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="/company/asiapacific/") About Kyocera EU
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") Europe Network
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="https://global.kyocera.com/company/summary/index.html") About the KYOCERA Group
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="https://global.kyocera.com/company/division/index.html") Business Segments
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="https://global.kyocera.com/company/movie/index.html") KYOCERA Corporate Profile Video
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="https://global.kyocera.com/ecology/index.html") Corporate Social Responsibility
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="https://global.kyocera.com/company/location/index.html") Global Network

      .st-Sitemap_Item
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/news/") News
            span.st-Sitemap_HeadingIcon(aria-hidden="true")
        ul.st-Sitemap_Nav
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="/news/") 2019
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") 2018
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="/index/news/previous_news.na-y-2017.html") Archive(~2017)

        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/inquiry/") Contact
            span.st-Sitemap_HeadingIcon(aria-hidden="true")

    .st-Sitemap_Region
      .st-RegionSelect
        button.st-RegionSelect_Button(type="button" data-toggle="0")
          span.st-RegionSelect_Region Europe
          span.st-RegionSelect_Icon(aria-hidden="true")
        select#st-RegionSelect_Select.st-RegionSelect_Select
          option(value="0") Europe
          option(value="1") Austria
          option(value="2") Denmark
          option(value="3") Finland
          option(value="4") France
          option(value="5") Germany
          option(value="6") Italy
          option(value="7") Netherlands
          option(value="8") Norway
          option(value="9") Portugal
          option(value="10") Russia
          option(value="11") Spain
          option(value="12") Sweden
          option(value="13") Switzerland
          option(value="14") Africa
          option(value="15") United Kingdom
      a.st-Sitemap_GlobalLink(href="#")
        span.st-Sitemap_GlobalIcon(aria-hidden="true")
        | Global
```

Productsの下層ページで使用するサイトマップです。
「Semiconductor Components」と「Products」はカテゴリによって変更します。

- ProductsエリアはPC未満でトグルになります。

```jade
footer.st-Sitemap.st-Sitemap-products
  .st-Sitemap_Inner
    .st-Sitemap_Items
      .st-Sitemap_Item
        h3.st-Sitemap_HeadingB
          a.st-Sitemap_HeadingBLink(href="/products/") Semiconductor <br class="sw-BrShowLg">Components
            span.st-Sitemap_HeadingBIcon(aria-hidden="true")
      .st-Sitemap_Item
        button.st-Sitemap_Toggle#st-Sitemap_Toggle(type="button" aria-expanded="false" aria-controls="st-SideNav_Parent")
          | Products
          span.st-Sitemap_ToggleIcon(aria-hidden="true")
        ul.st-Sitemap_Products#st-Sitemap_Products(aria-hidden="true")
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") Automotive
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") LED Lighting
              span.st-Sitemap_NavLinkExternalA(aria-hidden="true")
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") Camera Image Sensors
              span.st-Sitemap_NavLinkExternalB(aria-hidden="true")
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") Power - AMB Substrates
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") MEMS Sensors Packaging
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") Network / Infrastructure
          li.st-Sitemap_ProductsItem
            a.st-Sitemap_ProductsLink(href="#") Fiber Optics

      .st-Sitemap_Item
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/news/") News
            span.st-Sitemap_HeadingIcon(aria-hidden="true")
        ul.st-Sitemap_Nav
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="/news/") 2019
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="#") 2018
          li.st-Sitemap_NavItem
            a.st-Sitemap_NavLink(href="/index/news/previous_news.na-y-2017.html") Archive(~2017)

      .st-Sitemap_Item
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/news/") Sales Office
            span.st-Sitemap_HeadingIcon(aria-hidden="true")
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="#") Menu
            span.st-Sitemap_HeadingIconExternalA(aria-hidden="true")
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="#") Menu
            span.st-Sitemap_HeadingIconExternalB(aria-hidden="true")
        .st-Sitemap_Demiliter
        h3.st-Sitemap_Heading
          a.st-Sitemap_HeadingLink(href="/news/") All Products
            span.st-Sitemap_HeadingIcon(aria-hidden="true")

    .st-Sitemap_Region
      .st-RegionSelect
        button.st-RegionSelect_Button(type="button" data-toggle="0")
          span.st-RegionSelect_Region Europe
          span.st-RegionSelect_Icon(aria-hidden="true")
        select#st-RegionSelect_Select.st-RegionSelect_Select
          option(value="0") Europe
          option(value="1") Austria
          option(value="2") Denmark
          option(value="3") Finland
          option(value="4") France
          option(value="5") Germany
          option(value="6") Italy
          option(value="7") Netherlands
          option(value="8") Norway
          option(value="9") Portugal
          option(value="10") Russia
          option(value="11") Spain
          option(value="12") Sweden
          option(value="13") Switzerland
          option(value="14") Africa
          option(value="15") United Kingdom
      a.st-Sitemap_GlobalLink(href="#")
        span.st-Sitemap_GlobalIcon(aria-hidden="true")
        | Global
```
*/
.st-Sitemap {
  padding-bottom: 0.625rem;
  background-color: #f2f4f6;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap {
    padding: 2.5rem 1.875rem 1.25rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-Sitemap {
    padding-right: 0;
    padding-left: 0;
  }
}

.st-Sitemap_Inner {
  max-width: 1170px;
  margin: auto;
}

.st-Sitemap_Items {
  border-top: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Items {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    border-top: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Item {
    width: 100%;
    padding-right: 0.9375rem;
  }
  .st-Sitemap_Item:nth-of-type(1), .st-Sitemap_Item:nth-of-type(2) {
    width: 25%;
  }
  .st-Sitemap_Item:nth-of-type(3) {
    width: 32.22222%;
  }
  .st-Sitemap_Item:nth-of-type(4) {
    width: 17.77778%;
  }
  .st-Sitemap_Item.st-Sitempa_Item-offset {
    margin-top: 2.1875rem;
  }
  .st-Sitemap-products .st-Sitemap_Item {
    padding-right: 1.875rem;
  }
  .st-Sitemap-products .st-Sitemap_Item:nth-of-type(1) {
    width: 25.64103%;
  }
  .st-Sitemap-products .st-Sitemap_Item:nth-of-type(2) {
    width: 25.64103%;
  }
  .st-Sitemap-products .st-Sitemap_Item:nth-of-type(3) {
    width: 25.64103%;
  }
  .st-Sitemap-products .st-Sitemap_Item:nth-of-type(4) {
    width: 23.07692%;
    padding-right: 0;
  }
}

.st-Sitemap_Heading, .st-Sitemap_HeadingB {
  border-bottom: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Heading, .st-Sitemap_HeadingB {
    margin-bottom: 0.9375rem;
    border-bottom: 0;
  }
  .st-Sitemap_Heading:nth-of-type(n + 2), .st-Sitemap_HeadingB:nth-of-type(n + 2) {
    margin-top: 1.125rem;
  }
  .st-Sitemap_Nav + .st-Sitemap_Heading, .st-Sitemap_Nav + .st-Sitemap_HeadingB {
    margin-top: 15px;
  }
}

.st-Sitemap_HeadingLink, .st-Sitemap_HeadingBLink {
  display: block;
  position: relative;
  padding: 0.875rem 0.9375rem;
  padding: 0.875rem 1.625rem 0.875rem 0.9375rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.875;
  color: #000;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingLink, .st-Sitemap_HeadingBLink {
    padding: 0;
    line-height: 1.3;
  }
  .st-Sitemap_HeadingLink:hover, .st-Sitemap_HeadingBLink:hover {
    text-decoration: underline;
    color: #df0523;
  }
}

.st-Sitemap_HeadingIcon, .st-Sitemap_HeadingIconExternalA, .st-Sitemap_HeadingIconExternalB, .st-Sitemap_HeadingBIcon {
  position: absolute;
  top: 0;
  right: 0.9375rem;
  bottom: 0;
  height: 1.0625rem;
  margin: auto;
  font-size: 1.0625rem;
  color: #a5a5a5;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingIcon, .st-Sitemap_HeadingIconExternalA, .st-Sitemap_HeadingIconExternalB, .st-Sitemap_HeadingBIcon {
    position: relative;
    top: -0.1em;
    right: auto;
    left: 0.5rem;
    height: 0.5625rem;
    font-size: 0.5625rem;
    color: #e00f2c;
  }
}

.st-Sitemap_HeadingIcon::before, .st-Sitemap_HeadingIconExternalA::before, .st-Sitemap_HeadingIconExternalB::before, .st-Sitemap_HeadingBIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.5em;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingIcon::before, .st-Sitemap_HeadingIconExternalA::before, .st-Sitemap_HeadingIconExternalB::before, .st-Sitemap_HeadingBIcon::before {
    top: -0.1em;
    height: 1.125rem;
    font-size: 1.125rem;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
  }
}

.st-Sitemap_HeadingIconExternalA {
  right: 1.125rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 768px) {
  .st-Sitemap_HeadingIconExternalA {
    right: 0;
    left: 0.25rem;
    height: 0.6875rem;
    font-size: 0.6875rem;
  }
}

.st-Sitemap_HeadingIconExternalA::before {
  content: "";
  top: -0.5em;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingIconExternalA::before {
    top: -0.1em;
    height: 0.6875rem;
    font-size: 0.6875rem;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}

.st-Sitemap_HeadingIconExternalB {
  right: 1.125rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 768px) {
  .st-Sitemap_HeadingIconExternalB {
    right: 0;
    left: 0.25rem;
    height: 0.6875rem;
    font-size: 0.6875rem;
  }
}

.st-Sitemap_HeadingIconExternalB::before {
  content: "";
  top: -0.5em;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingIconExternalB::before {
    top: -0.1em;
    height: 0.6875rem;
    font-size: 0.6875rem;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
  }
}

.st-Sitemap_HeadingB {
  border-bottom: 1px solid #dadada !important;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingB {
    border-bottom: none !important;
  }
}

.st-Sitemap_HeadingBLink {
  padding: 1.5rem 1.0625rem;
  font-size: 1.25rem;
  line-height: 1.17;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_HeadingBLink {
    padding: 0;
  }
}

.st-Sitemap_HeadingBIcon {
  position: relative;
  right: auto;
  left: 0.125rem;
  font-size: 0.5em;
}

@media print, screen and (min-width: 768px) {
  .st-Sitemap_HeadingBIcon {
    left: 0;
  }
}

.st-Sitemap_HeadingBIcon::before {
  top: -0.2em;
  left: 2px;
  font-size: 0.8125rem;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .st-Sitemap_HeadingBIcon::before {
    font-size: 1.625rem;
  }
}

.st-Sitemap_SubHeading {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_SubHeading {
    display: block;
    margin-bottom: 0.9375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.6;
    color: #666;
  }
}

.st-Sitemap_Nav {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Nav {
    display: block;
    padding-left: 0;
    list-style-type: none;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_NavItem + .st-Sitemap_NavItem {
    margin-top: 0.75rem;
  }
}

.st-Sitemap_NavLink {
  display: block;
  text-decoration: none;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #666;
}

.st-Sitemap_NavLink:hover {
  text-decoration: underline;
  color: #df0523;
  transition-duration: 0.3s;
}

.st-Sitemap_NavLinkExternalA {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-Sitemap_NavLinkExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.st-Sitemap_NavLinkExternalB {
  display: inline-block;
  height: 0.6875rem;
  margin-left: 0.1875rem;
  font-size: 0.6875rem;
  color: #a5a5a5;
}

.st-Sitemap_NavLinkExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.st-Sitemap_SmallLink {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.st-Sitemap_NavIconExternal::before,
.st-Sitemap_NavIconInternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  margin-top: -0.1em;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
  color: #444;
}

.st-Sitemap_NavIconExternal::before {
  content: "";
}

.st-Sitemap_NavIconInternal::before {
  content: "";
}

.st-Sitemap_Region {
  padding-top: 0.625rem;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Region {
    margin-top: 2.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-Sitemap_Region {
    padding: 0;
  }
}

.st-Sitemap_GlobalLink {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  height: 42px;
  margin-left: 1.375rem;
  text-decoration: none;
  font-size: 0.875rem;
  line-height: 42px;
  color: #444;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_GlobalLink {
    margin-left: 1.75rem;
  }
}

.st-Sitemap_GlobalLink:hover {
  text-decoration: underline;
  color: #df0523;
  transition-duration: 0.3s;
}

.st-Sitemap_GlobalIcon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  font-size: 1.4em;
  color: #a5a5a5;
  transition-duration: 0s;
}

.st-Sitemap_GlobalLink:hover .st-Sitemap_GlobalIcon {
  color: #df0523;
  transition-duration: 0.3s;
}

.st-Sitemap_GlobalIcon::after {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.st-Sitemap_Demiliter {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Demiliter {
    display: block;
    width: 100%;
    height: 1px;
    margin: 1.1875rem 0;
    border-top: 1px solid #dadada;
  }
}

.st-Sitemap_Toggle {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0.875rem 2.25rem 0.8125rem 0.9375rem;
  text-align: left;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.875;
  border: none;
  background-color: transparent;
  color: #000;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Toggle {
    margin-bottom: 1.125rem;
    padding: 0;
    line-height: 1.3;
  }
}

.st-Sitemap_Toggle[type="button"], .st-Sitemap_Toggle[type="reset"], .st-Sitemap_Toggle[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.st-Sitemap_Toggle[tabindex="-1"] {
  pointer-events: none;
}

.st-Sitemap_Toggle:focus {
  outline: 0;
}

.st-Sitemap_Toggle.focus-ring:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.st-Sitemap_Toggle[aria-expanded="false"] {
  border-bottom: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Toggle[aria-expanded="false"] {
    border-bottom: none;
  }
}

.st-Sitemap_Toggle[aria-expanded="true"] {
  border-bottom: none;
}

.st-Sitemap_ToggleIcon {
  position: absolute;
  top: 0;
  right: 0.9375rem;
  bottom: 0;
  height: 1.0625rem;
  margin: auto;
  font-size: 1.0625rem;
  color: #a5a5a5;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_ToggleIcon {
    display: none;
  }
}

.st-Sitemap_ToggleIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  transition-duration: 0.3s;
}

.st-Sitemap_Toggle[aria-expanded="true"] .st-Sitemap_ToggleIcon::before {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.st-Sitemap_Products {
  padding: 0 0.9375rem;
  list-style-type: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Products {
    padding: 0;
  }
}

.st-Sitemap_Products[aria-hidden="true"] {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Products[aria-hidden="true"] {
    display: block;
  }
}

.st-Sitemap_Products[aria-hidden="false"] {
  display: block;
  border-bottom: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_Products[aria-hidden="false"] {
    display: block;
    border-bottom: none;
  }
}

.st-Sitemap_Products > :last-child {
  margin-bottom: 0;
}

.st-Sitemap_ProductsItem {
  border-top: 1px solid #dadada;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_ProductsItem {
    margin-bottom: 0.9375rem;
    border-top: none;
  }
}

.st-Sitemap_ProductsLink {
  display: block;
  padding: 0.9375rem 0;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.375;
  color: #444;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap_ProductsLink {
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.15;
  }
}

.st-Sitemap_ProductsLink:hover {
  text-decoration: underline;
  color: #df0523;
}

/*
---
name: st-SubNav
namespace: sw-
category: Navigation
---

下層ページで使用するナビゲーションです。

`a.st-SideNav_Link + ul.st-Sidトグル操作しないサブナビがある場合、eNav_Parent#st-SideNav_SubService`のようにすると、サブナビの表示ができます。

`#st-SideNav_SubService`は`Service`の部分をカテゴリによって、以下のように変更します（SideNav.jsの`includedCategories`で定義）。

- `#st-SideNav_SubNews`
- `#st-SideNav_SubEvents`
- `#st-SideNav_Subcontact`
- `#st-SideNav_SubService`
- `#st-SideNav_SubDownload`


```jade
ul.st-SideNav
  li.st-SideNav_Item
    a.st-SideNav_Link(href="/products/solar_electric_systems/")
      | Top
      span.st-SideNav_Icon(aria-hidden="true")
  li.st-SideNav_Item
    button.st-SideNav_Toggle#st-SideNav_Toggle(type="button" aria-expanded="false" aria-controls="st-SideNav_Parent")
      | Products
      span.st-SideNav_ToggleIcon(aria-hidden="true")
    ul.st-SideNav_Parent#st-SideNav_Parent(aria-hidden="true")
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/prd/solar_modules/index.html") Solar Modules
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/prd/battery_systems/index.html") Battery Systems
  li.st-SideNav_Item
    a.st-SideNav_Link(href="/products/solar_electric_systems/service/")
      | Service
      span.st-SideNav_Icon(aria-hidden="true")
    ul.st-SideNav_Parent#st-SideNav_SubService(aria-hidden="true")
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/yield_check/") PV System and Yield Check
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/maintenance/") Maintenance
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/pv_reports/") PV Expert Reports
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/repowering/") Repowering
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/inverter_service/") Fronius &amp; SMA Inverter Service
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/service/test_methods/") Test Methods
  li.st-SideNav_Item
    a.st-SideNav_Link(href="/products/solar_electric_systems/news/")
      | News
      span.st-SideNav_Icon(aria-hidden="true")
    ul.st-SideNav_Parent#st-SideNav_SubNews(aria-hidden="true")
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/news/2019/") 2019
      li.st-SideNav_ParentItem
        a.st-SideNav_ParentLink(href="/products/solar_electric_systems/news/2018/") 2018
  li.st-SideNav_Item
    a.st-SideNav_Link(href="/products/solar_electric_systems/contact/")
      | Sales Office
      span.st-SideNav_Icon(aria-hidden="true")
```
*/
/*
---
name: st-TitleA
namespace: sw-
category: Heading
id: CT-1A
---

<span class="sw-Label">CT-1A</span>

カテゴリトップページやNewsカテゴリで使用するタイトルです。

- ページの構造によって`.st-TitleA`は`h1`と`p`を使い分けてください
- テキストだけのシンプルなコンポーネントです


```jade
.st-ContentsHeader_Title
  h1.st-TitleA Title
```
*/
.st-TitleA {
  position: relative;
  padding: 0.9375rem 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .st-TitleA {
    font-size: 1.375rem;
  }
}

.st-TitleA::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.375rem;
  left: 0;
  width: 100vw;
  height: 0.375rem;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  background-image: linear-gradient(0deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.15) 98%);
}

/*
---
name: st-TitleB
namespace: sw-
category: Heading
id: CT-1B
---

<span class="sw-Label">CT-1B</span>

`.st-TitleA`にお問い合わせボタンが付いたコンポーネントです。

- 画面上部に固定表示されます
- ページの構造によって`.st-TitleB_Title`は`h1`と`p`を使い分けてください


```jade
header.st-ContentsHeader
  .st-ContentsHeader_Title
    .st-TitleB
      .st-TitleB_Inner
        h1.st-TitleB_Title Division Title
        a.st-TitleB_Inquiry(href="#")
          span.st-TitleB_InquiryIcon(aria-hidden="true")
          span.st-TitleB_InquiryText Inquiry Form
```
*/
.st-TitleB {
  position: relative;
}

.st-TitleB::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -0.375rem;
  left: 0;
  width: 100vw;
  height: 0.375rem;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  background-image: linear-gradient(0deg, rgba(102, 102, 102, 0) 0%, rgba(102, 102, 102, 0.15) 98%);
}

.st-TitleB.st-TitleB-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding: 0 0.9375rem;
  background-color: #fff;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB.st-TitleB-fixed {
    padding: 0 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .st-TitleB.st-TitleB-fixed {
    padding-right: 0;
    padding-left: 0;
  }
}

.st-TitleB_Inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.st-TitleB-fixed > .st-TitleB_Inner {
  max-width: 1170px;
  margin: auto;
}

.st-TitleB_Title {
  position: relative;
  width: 100%;
  padding: 0.9375rem 0;
  padding-right: 1em;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.2;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB_Title {
    width: auto;
    font-size: 1.375rem;
  }
}

.st-TitleB_Inquiry {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20px;
  text-decoration: none;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB_Inquiry {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
    padding: 0.5rem 1.75rem;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #dadada;
    border-radius: 0.1875rem;
    background: #fff;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.1);
  }
}

.st-TitleB_Inquiry:hover {
  text-decoration: none;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB_Inquiry:hover {
    border-color: #df0523;
    background-color: #df0523;
    color: #fff;
  }
}

.st-TitleB_InquiryIcon {
  position: relative;
  height: 1rem;
  font-size: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB_InquiryIcon {
    height: 0.8125rem;
    font-size: 1.0625rem;
  }
}

.st-TitleB_InquiryIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.5em;
}

.st-TitleB_InquiryText {
  display: none;
  font-size: 0.8125rem;
  font-weight: 600;
}

@media print, screen and (min-width: 768px) {
  .st-TitleB_InquiryText {
    display: inline-block;
    margin-left: 0.375rem;
  }
}

/*
---
name: st-TitleC
namespace: sw-
category: Heading
id: [HD-1C, HD-1A, HD-1B]
---

<span class="sw-Label">HD-1C</span><span class="sw-Label">HD-1A</span><span class="sw-Label">HD-1B</span>

下層ページで使用されるタイトルです。

- `.st-TitleC_Parent`には親カテゴリが入ります（任意）※使用しなくなりました
- `.st-TitleC_Title`にはページタイトルが入ります
- `.st-TitleC_Hero`にはメインビジュアルが入ります（任意）

```jade
.st-TitleC
  p.st-TitleC_Parent LED Lighting
  h1.st-TitleC_Title General LED Lighting
  .st-TitleC_Hero
    img.st-TitleC_Image(src="/assets/img/common/img_870_280.jpg" alt)
```

```jade
.st-TitleC
  h1.st-TitleC_Title LED Lighting
```

<span class="sw-Label">HD-1A</span>

ページタイトル + 親カテゴリ

```jade
.st-TitleC
  p.st-TitleC_Parent LED Lighting
  h1.st-TitleC_Title General LED Lighting
```

<span class="sw-Label">HD-1B</span>

ページタイトル

```jade
.st-TitleC
  h1.st-TitleC_Title General LED Lighting
```
*/
.st-TitleC {
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .st-TitleC {
    margin-bottom: 1.5625rem;
  }
}

.st-TitleC_Parent {
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  color: #666;
}

@media print, screen and (min-width: 768px) {
  .st-TitleC_Parent {
    font-size: 0.875rem;
    line-height: 1.2;
  }
}

.st-TitleC_Title {
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .st-TitleC_Title {
    font-size: 2.25rem;
    line-height: 1.2;
  }
}

.st-TitleC_Hero {
  width: 100vw;
  margin-top: 1.5625rem;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
}

@media print, screen and (min-width: 768px) {
  .st-TitleC_Hero {
    width: 100%;
    margin-top: 1.875rem;
    margin-right: 0;
    margin-left: 0;
  }
}

.st-TitleC_Title + .st-TitleC_Hero {
  margin-top: 1.5625rem;
  margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {
  .st-TitleC_Title + .st-TitleC_Hero {
    margin-top: 1.875rem;
    margin-bottom: 0;
  }
}

.st-TitleC_Image {
  display: block;
  width: 100%;
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.st-TitleC_Image > img {
  display: block;
  width: 100%;
}

.js-st-TitleC_TitleNews-all[aria-hidden="true"] {
  display: none;
}

.js-st-TitleC_TitleNews-yearmonth[aria-hidden="true"] {
  display: none;
}

/*
---
name: cms-Component
namespace: cms-
category: MovableType
---

MovableTypeのRichEditorをラップするクラスです。
多数あるため、cms-Component内における各コンポーネントのCSSは、各CSSで定義します。

<span class="sw-Label" id="M_TOP-PRODUCT">M_TOP-PRODUCT</span>

トップページの製品一覧出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-top-product data-cms-component-area)
    | Product
```

<span class="sw-Label" id="M_TOP-NEWS">M_TOP-NEWS</span>

トップページのニュース出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-top-news data-cms-component-area)
    | News
```

<span class="sw-Label" id="M_TOP-NEWS">M_TOP-EVENT</span>

トップページのイベント出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-top-event data-cms-component-area)
    | Event
```

<span class="sw-Label" id="M_CAREER-PAGE">M_PRODUCT-NEWS</span>

製品ページのニュース出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-product-news data-cms-component-area)
    | News
```

<span class="sw-Label" id="M_PRODUCT-SALESOFFICE">M_PRODUCT-SALESOFFICE</span>

製品ページのセールスオフィス出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-product-salesoffice data-cms-component-area)
    | SalesOffice
```

<span class="sw-Label" id="M_PRODUCT-VIDEO">M_PRODUCT-VIDEO</span>

製品ページのビデオ出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-product-video data-cms-component-area)
    | Video
```

<span class="sw-Label" id="M_CAREER_HERO-VIDEO">M_CAREER-HERO</span>

CarrersページのHero画像出力エリアを示します。

```jade
.cms-Component_Editor
  div(data-cms-component-career-hero data-cms-component-area)
    | Hero
```
*/
.cms-Component_Editor {
  padding: 0.625rem;
}

.cms-Component_Editor-en {
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

.cms-Component_Block {
  margin: 0;
  padding: 0;
  border: none;
}

.cms-Component_Editor .cms-Component_Block {
  display: block;
  margin: 0.625rem;
  padding: 0.625rem;
  border: dashed 0.125rem #a5a5a5;
}

.cms-Component_Editor .cms-Component_Block-inline {
  display: inline-block;
}

.cms-Component_Block-inlinefull {
  max-width: 100%;
}

.cms-Component_Editor .cms-Component_Block-inlinefull {
  display: inline-block;
  width: 100%;
}

/**
 * CMSの都合上、属性セレクタを利用
 *
 * CMS都合: HTML出力時、クラス名を含むと正常に出力できない可能性がある
 */
[data-cms-component-top-product],
[data-cms-component-top-news],
[data-cms-component-top-event],
[data-cms-component-product-salesoffice],
[data-cms-component-product-news],
[data-cms-component-product-video],
[data-cms-component-career-hero],
[data-cms-component-career-page] {
  display: none;
}

.cms-Component_Editor [data-cms-component-top-product], .cms-Component_Editor
[data-cms-component-top-news], .cms-Component_Editor
[data-cms-component-top-event], .cms-Component_Editor
[data-cms-component-product-salesoffice], .cms-Component_Editor
[data-cms-component-product-news], .cms-Component_Editor
[data-cms-component-product-video], .cms-Component_Editor
[data-cms-component-career-hero], .cms-Component_Editor
[data-cms-component-career-page] {
  display: block;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  line-height: 100px;
  background: #ccc;
  text-align: center;
  font-size: 1.5rem;
}

/*
---
name: contact-BoxA
namespace: contact-
category: Block
---

Support / Contactページで使用する一覧です。

```jade
section.l-Section2
  h2.sw-Heading2A#btob Components / Industrial
  ul.l-Grids.l-Grids-col3Md.contact-Content
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_industrial-ceramics.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Industrial Ceramics
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/gl/cera/input.html", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_semiconductor-packaging.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Semiconductor Packaging
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/us/sc/input.html")
            | Contact
            span.contact-BoxA_Icon(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_electronic-components.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Electronic Components
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/gl/elect/input.html", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_uv-led-curingsystem.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title UV-LED Curing System
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/us/pd/input.html")
            | Contact
            span.contact-BoxA_Icon(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_thermal-printheads.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Thermal Printheads
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/us/pd/input.html")
            | Contact
            span.contact-BoxA_Icon(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_inkjet-printheads.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Inkjet Printheads
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/us/pd/input.html")
            | Contact
            span.contact-BoxA_Icon(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_liquid-crystal-displays.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Liquid Crystal Displays
          a.contact-BoxA_Link(href="http://www.kyocera-display.com/contacts/corp.asp", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_lens-components.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Lens Components
          a.contact-BoxA_Link(href="https://global.kyocera.com/prdct/optec/contact.html", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_medical-products.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Medical Products
          a.contact-BoxA_Link(href="https://www.kyocera-medical.com/contact-us-2/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_cutting-tool-Indexable.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Cutting Tool – Indexable
          a.contact-BoxA_Link(href="http://www.kyoceraprecisiontools.com/contact/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_cutting-tool-solid-round.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Cutting Tool - Solid Round
          a.contact-BoxA_Link(href="http://www.kyoceraprecisiontools.com/contact/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_cutting-tool-printed-circuit-board.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Cutting Tool - Printed Circuit Board
          a.contact-BoxA_Link(href="http://www.kyoceraprecisiontools.com/contact/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_organic-chemical-materials.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Organic Chemical Materials
          a.contact-BoxA_Link(href="https://contact.kyocera.co.jp/inquiry/us/sc/input.html")
            | Contact
            span.contact-BoxA_Icon(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_solar-solutions-for-business.png" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Solar Solutions for Business
          a.contact-BoxA_Link(href="https://www.kyocerasolar.com/contact/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
    li.l-Grids_Item
      .contact-BoxA
        .contact-BoxA_Media
          img.contact-BoxA_Thumbnail(src="/assets/img/index/image_information-communication-and-security-technology.jpg" alt)
        .contact-BoxA_Body
          h3.contact-BoxA_Title Endpoint Security Software
          a.contact-BoxA_Link(href="https://interfocus.us/", target="_blank")
            | Contact
            span.contact-BoxA_ExternalA(aria-hidden="true")
```
*/
.contact-BoxA {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  padding-bottom: 1.875rem;
  border-bottom: 1px solid #dadada;
}

.l-Grids_Item:nth-of-type(n + 2) .contact-BoxA {
  padding-top: 1.125rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids_Item:nth-of-type(n + 2) .contact-BoxA {
    padding-top: 0;
  }
}

.contact-BoxA_Media {
  -webkit-flex-basis: 31.88406%;
      -ms-flex-preferred-size: 31.88406%;
          flex-basis: 31.88406%;
  max-width: 31.88406%;
}

@media print, screen and (min-width: 768px) {
  .contact-BoxA_Media {
    -webkit-flex-basis: 40.54054%;
        -ms-flex-preferred-size: 40.54054%;
            flex-basis: 40.54054%;
    max-width: 40.54054%;
  }
}

.contact-BoxA_Thumbnail {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.contact-BoxA_Body {
  -webkit-flex-basis: 68.11594%;
      -ms-flex-preferred-size: 68.11594%;
          flex-basis: 68.11594%;
  max-width: 68.11594%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .contact-BoxA_Body {
    -webkit-flex-basis: 59.45946%;
        -ms-flex-preferred-size: 59.45946%;
            flex-basis: 59.45946%;
    max-width: 59.45946%;
  }
}

.contact-BoxA_Body > :last-child {
  margin-bottom: 0;
}

.contact-BoxA_Title {
  margin-bottom: 1.125rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .contact-BoxA_Title {
    margin-bottom: 1.25rem;
  }
}

.contact-BoxA_Link {
  display: block;
  position: relative;
  margin-bottom: 0.625rem;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  color: #df0523;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 1024px) {
  .contact-BoxA_Link:hover {
    text-decoration: underline;
    color: #df0523;
  }
}

.contact-BoxA_Icon {
  display: inline-block;
  vertical-align: baseline;
  height: 0.75rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

.contact-BoxA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_Icon {
  color: #df0523;
}

.contact-BoxA_ExternalA {
  display: inline-block;
  vertical-align: baseline;
  height: 0.875rem;
  margin-left: 0.3125rem;
  font-size: 0.875rem;
}

.contact-BoxA_ExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.sw-LinkArrow_Link:hover .contact-BoxA_ExternalA {
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .contact-Content {
    padding-top: 1.875rem;
  }
}

/*
---
name: event-BoxA
namespace: event-
category: Block
id: BOX-5
---

<span class="sw-Label">BOX-5</span>

Productsのイベント一覧です。

- 画像、罫線、テキストを追加することができます


```jade
ul.event-BoxA
  li.event-BoxA_Item
    .event-BoxA_Body
      .event-BoxA_Content
        .event-BoxA_Time
          span.event-BoxA_TimeIcon(aria-hidden="true")
          span.event-BoxA_TimeText October 17-19, 2018
        p.event-BoxA_Heading ChipEXPO 2018
        p.event-BoxA_ContentText
          | Expocentre, pavilion "Forum"
          br
          |
Booth # B15
          br
          a.event-BoxA_ContentLink(href="www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
      .event-BoxA_Image
        img.event-BoxA_ImageThumbnail(src="/assets/img/common/img_690_296.jpg" alt="")
  li.event-BoxA_Item
    .event-BoxA_Body
      .event-BoxA_Content
        .event-BoxA_Time
          span.event-BoxA_TimeIcon(aria-hidden="true")
          span.event-BoxA_TimeText October 17-19, 2018
        p.event-BoxA_Heading electronica 2018
        p.event-BoxA_ContentText
          | Messe München
          br
          |
Hall B6, Booth # 536
          br
          a.event-BoxA_ContentLink(href="https://electronica.de/" target="_blank") https://electronica.de/
            span.event-BoxA_IconExternal(aria-hidden="true")
      .event-BoxA_Image
        img.event-BoxA_ImageThumbnail(src="/assets/img/common/img_690_296.jpg" alt="")
  li.event-BoxA_Item
    .event-BoxA_Body
      .event-BoxA_Content
        .event-BoxA_Time
          span.event-BoxA_TimeIcon(aria-hidden="true")
          span.event-BoxA_TimeText October 17-19, 2018
        p.event-BoxA_Heading TheIJC.com - 4th Annual InkJet Conference
        p.event-BoxA_ContentText
          | Düsseldorf

          br
          | Booth # D13
          br
          a.event-BoxA_ContentLink(href="www.theijc.com/" target="_blank") www.theijc.com/
            span.event-BoxA_IconExternalB(aria-hidden="true")
      .event-BoxA_Image
        img.event-BoxA_ImageThumbnail(src="/assets/img/common/img_690_296.jpg" alt="")
  li.event-BoxA_Item
    .event-BoxA_Body
      .event-BoxA_Content
        .event-BoxA_Time
          span.event-BoxA_TimeIcon(aria-hidden="true")
          span.event-BoxA_TimeText October 17-19, 2018
        p.event-BoxA_Heading ChipEXPO 2018
        p.event-BoxA_ContentText
          | Messe München
          br
          |
Hall B6, Booth # 536
          br
          a.event-BoxA_ContentLink(href="https://electronica.de/" target="_blank") https://electronica.de/
      .event-BoxA_Image
        img.event-BoxA_ImageThumbnail(src="/assets/img/common/img_690_296.jpg" alt="")
    .event-BoxA_Foot
      .event-BoxA_FootImage
        img(src="/assets/img/common/img_690_296.jpg" alt="")
      hr.event-BoxA_FootDelimiter
      p.event-BoxA_FootText Furthermore, we will be participating in trade fairs in practically all foreign and regional markets in cooperation with our distributors. For dates, please contact your local sales partners.
```
*/
.event-BoxA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA {
    margin-top: 2.5rem;
  }
}

.event-BoxA_Item:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  margin-top: 1.875rem;
  padding-bottom: 1.875rem;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Item:nth-of-type(n + 2)::before {
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: -1.875rem;
  }
}

.event-BoxA_Time {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Time {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
}

.event-BoxA_TimeIcon {
  position: relative;
  width: 1.875rem;
  height: 1.1875rem;
  font-size: 1.1875rem;
  color: #666;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_TimeIcon {
    width: 1.625rem;
  }
}

.event-BoxA_TimeIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.35em;
}

.event-BoxA_TimeText {
  width: 100%;
  font-weight: 600;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Content {
    -webkit-flex-basis: 60.34483%;
        -ms-flex-preferred-size: 60.34483%;
            flex-basis: 60.34483%;
    max-width: 60.34483%;
    padding-left: 1.875rem;
  }
}

.event-BoxA_Heading {
  margin-bottom: 1.0625rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Heading {
    margin-bottom: 1.3125rem;
    font-size: 1.5rem;
    line-height: 1.375;
  }
}

.event-BoxA_ContentText {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

.event-BoxA_ContentText:nth-of-type(n + 2) {
  margin-top: 0.3125rem;
}

.event-BoxA_ContentLink {
  text-decoration: none;
  color: #df0523;
  transition: 0.3s;
}

.event-BoxA_ContentLink:hover {
  text-decoration: underline;
}

.event-BoxA_IconExternal {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_IconExternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.event-BoxA_IconExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.event-BoxA_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.event-BoxA_Image {
  margin-top: 1.25rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Image {
    -webkit-flex-basis: 39.65517%;
        -ms-flex-preferred-size: 39.65517%;
            flex-basis: 39.65517%;
    max-width: 39.65517%;
    margin-top: 0;
    padding-left: 1.875rem;
  }
}

.event-BoxA_Foot {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_Foot {
    margin-top: 2.5rem;
  }
}

.event-BoxA_FootImage {
  text-align: center;
}

.event-BoxA_FootDelimiter {
  margin: 1.875rem 0;
  border: 0;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .event-BoxA_FootDelimiter {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
}

.event-BoxA_FootText {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  color: #444;
}

.event-BoxA_FootText:nth-of-type(n + 2) {
  margin-top: 1.875rem;
}

/*
---
name: eventm-BoxA
namespace: eventm-
category: Block
id: M_BOX-5A
---

<span class="sw-Label">M_BOX-5A</span>

Products（Kitchen除く）のイベント一覧です。

```jade
.eventm-BoxA_Item
  .eventm-BoxA_Body
    .eventm-BoxA_Content
      .eventm-BoxA_Time
        span.eventm-BoxA_TimeIcon(aria-hidden="true")
        span.eventm-BoxA_TimeText October 17-19, 2018
      p.eventm-BoxA_Heading ChipEXPO 2018
      p.eventm-BoxA_ContentText
        | Expocentre, pavilion "Forum"
        br
        |
Booth # B15
        br
        a.eventm-BoxA_ContentLink(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
    .eventm-BoxA_Image
      span.eventm-BoxA_ImageThumbnail
        img(src="/assets/img/common/img_690_296.jpg" alt="")
```

続けると罫線を表示します。

```jade
.eventm-BoxA_Item
  .eventm-BoxA_Body
    .eventm-BoxA_Content
      .eventm-BoxA_Time
        span.eventm-BoxA_TimeIcon(aria-hidden="true")
        span.eventm-BoxA_TimeText October 17-19, 2018
      p.eventm-BoxA_Heading ChipEXPO 2018
      p.eventm-BoxA_ContentText
        | Expocentre, pavilion "Forum"
        br
        |
Booth # B15
        br
        a.eventm-BoxA_ContentLink(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
    .eventm-BoxA_Image
      span.eventm-BoxA_ImageThumbnail
        img(src="/assets/img/common/img_690_296.jpg" alt="")
.eventm-BoxA_Item
  .eventm-BoxA_Body
    .eventm-BoxA_Content
      .eventm-BoxA_Time
        span.eventm-BoxA_TimeIcon(aria-hidden="true")
        span.eventm-BoxA_TimeText October 17-19, 2018
      p.eventm-BoxA_Heading ChipEXPO 2018
      p.eventm-BoxA_ContentText
        | Expocentre, pavilion "Forum"
        br
        |
Booth # B15
        br
        a.eventm-BoxA_ContentLink(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
    .eventm-BoxA_Image
      span.eventm-BoxA_ImageThumbnail
        img(src="/assets/img/common/img_690_296.jpg" alt="")
.eventm-BoxA_Item
  .eventm-BoxA_Body
    .eventm-BoxA_Content
      .eventm-BoxA_Time
        span.eventm-BoxA_TimeIcon(aria-hidden="true")
        span.eventm-BoxA_TimeText October 17-19, 2018
      p.eventm-BoxA_Heading ChipEXPO 2018
      p.eventm-BoxA_ContentText
        | Expocentre, pavilion "Forum"
        br
        |
Booth # B15
        br
        a.eventm-BoxA_ContentLink(href="http://www.chipexpo.ru/en/exhibitors" target="_blank") www.chipexpo.ru/en/exhibitors
    .eventm-BoxA_Image
      span.eventm-BoxA_ImageThumbnail
        img(src="/assets/img/common/img_690_296.jpg" alt="")
```
*/
.eventm-BoxA_Item + .eventm-BoxA_Item::before {
  content: "";
  display: block;
  margin-top: 1.875rem;
  padding-bottom: 1.875rem;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Item + .eventm-BoxA_Item::before {
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: -1.875rem;
  }
}

.eventm-BoxA_Time {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1.375rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.375;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Time {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
  }
}

.eventm-BoxA_TimeIcon {
  position: relative;
  width: 1.875rem;
  height: 1.1875rem;
  font-size: 1.1875rem;
  color: #666;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_TimeIcon {
    width: 1.625rem;
  }
}

.eventm-BoxA_TimeIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.35em;
}

.eventm-BoxA_TimeText {
  width: 100%;
  font-weight: 600;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Content {
    -webkit-flex-basis: 60.34483%;
        -ms-flex-preferred-size: 60.34483%;
            flex-basis: 60.34483%;
    max-width: 60.34483%;
    padding-left: 1.875rem;
  }
}

.eventm-BoxA_Heading {
  margin-bottom: 1.0625rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Heading {
    margin-bottom: 1.3125rem;
    font-size: 1.5rem;
    line-height: 1.375;
  }
}

.eventm-BoxA_ContentText {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

.eventm-BoxA_ContentText:nth-of-type(n + 2) {
  margin-top: 0.3125rem;
}

.eventm-BoxA_ContentLink {
  text-decoration: none;
  color: #df0523;
  transition: 0.3s;
}

.eventm-BoxA_ContentLink:hover {
  text-decoration: underline;
}

.eventm-BoxA_IconExternal {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.eventm-BoxA_IconExternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.eventm-BoxA_IconExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.eventm-BoxA_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.eventm-BoxA_Image {
  margin-top: 1.25rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxA_Image {
    -webkit-flex-basis: 39.65517%;
        -ms-flex-preferred-size: 39.65517%;
            flex-basis: 39.65517%;
    max-width: 39.65517%;
    margin-top: 0;
    padding-left: 1.875rem;
  }
}

/*
---
name: eventm-BoxB
namespace: eventm-
category: Block
id: M_BOX-5B
---

<span class="sw-Label">M_BOX-5B</span>

Products（Kitchen）のイベント一覧です。

```jade
.eventm-BoxB_Item
  .eventm-BoxB_Image
    .eventm-BoxB_ImageThumbnail
      img(src="/assets/img/common/img_690_296.jpg" alt="")
  .eventm-BoxB_Body
    p.eventm-BoxB_Text February 8 - 12, 2019
    p.eventm-BoxB_Text Frankfurt Fair<br>Hall 3.1, Booth # A40</p>
    p.eventm-BoxB_Text
      a.eventm-BoxB_Link(href="https://ambiente.messefrankfurt.com/frankfurt/en.html")
        | https://ambiente.messefrankfurt.com/frankfurt/en.html
```

続けると罫線を表示します。

```jade
.eventm-BoxB_Item
  .eventm-BoxB_Image
    .eventm-BoxB_ImageThumbnail
      img(src="/assets/img/common/img_690_296.jpg" alt="")
  .eventm-BoxB_Body
    p.eventm-BoxB_Text February 8 - 12, 2019
    p.eventm-BoxB_Text Frankfurt Fair<br>Hall 3.1, Booth # A40</p>
    p.eventm-BoxB_Text
      a.eventm-BoxB_Link(href="https://ambiente.messefrankfurt.com/frankfurt/en.html")
        | https://ambiente.messefrankfurt.com/frankfurt/en.html
.eventm-BoxB_Item
  .eventm-BoxB_Image
    .eventm-BoxB_ImageThumbnail
      img(src="/assets/img/common/img_690_296.jpg" alt="")
  .eventm-BoxB_Body
    p.eventm-BoxB_Text February 8 - 12, 2019
    p.eventm-BoxB_Text Frankfurt Fair<br>Hall 3.1, Booth # A40</p>
    p.eventm-BoxB_Text
      a.eventm-BoxB_Link(href="https://ambiente.messefrankfurt.com/frankfurt/en.html")
        | https://ambiente.messefrankfurt.com/frankfurt/en.html
```
*/
.eventm-BoxB_Item {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.eventm-BoxB_Item::after {
  content: "";
  clear: both;
  display: block;
}

.eventm-BoxB_Item + .eventm-BoxB_Item::before {
  content: "";
  display: block;
  margin-top: 1.875rem;
  padding-bottom: 1.875rem;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxB_Item + .eventm-BoxB_Item::before {
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.eventm-BoxB_Body > :first-child {
  margin-top: 0;
}

.eventm-BoxB_Body > :last-child {
  margin-bottom: 0;
}

.eventm-BoxB_Image {
  width: 41.66667%;
  text-align: center;
  float: right;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxB_Image {
    padding-left: 1.875rem;
  }
}

.eventm-BoxB_Image > :first-child {
  margin-top: 0;
}

.eventm-BoxB_Image > :last-child {
  margin-bottom: 0;
}

.eventm-BoxB_ImageThumbnail {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .eventm-BoxB_ImageThumbnail {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
  }
}

.cms-Component_Block .eventm-BoxB_ImageThumbnail > img {
  max-width: 100%;
}

.eventm-BoxB_Text {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.eventm-BoxB_Link {
  text-decoration: underline;
  color: #df0523;
  /* CMS対応 */
}

.eventm-BoxB_Link:hover {
  text-decoration: none;
}

.news-Body .eventm-BoxB_Link {
  font-weight: 400;
}

.news-Body .eventm-BoxB_Link:hover {
  text-decoration: none;
}

.l-DetailTemplate .eventm-BoxB_Link {
  font-weight: 400;
}

.l-DetailTemplate .eventm-BoxB_Link:hover {
  text-decoration: none;
}

@-webkit-keyframes home-Carousel {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes home-Carousel {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.home-Carousel {
  position: relative;
  margin-bottom: 1.25rem;
  -webkit-animation-name: home-Carousel;
          animation-name: home-Carousel;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel {
    margin-bottom: 0;
  }
}

.home-Carousel_Head {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1170px;
  height: auto;
  min-width: 100%;
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_Inner {
    height: 320px;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Carousel_Inner {
    height: 500px;
  }
}

.home-Carousel_Items {
  padding-left: 0;
  list-style-type: none;
}

.home-Carousel_Item:nth-of-type(n + 2) {
  display: none;
}

.home-Carousel_Foot {
  position: absolute;
  right: 0;
  bottom: -1.6875rem;
  z-index: 100;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_Foot {
    bottom: 1.25rem;
    padding: 0 3.125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Carousel_Foot {
    bottom: 1rem;
  }
}

.home-Carousel_Thumbnails {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 1170px;
  margin: auto;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_Thumbnails {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.home-Carousel_ThumbnailLink {
  display: block;
  position: relative;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.625rem;
  border-radius: 0.375rem;
  background-color: #dadada;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_ThumbnailLink {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 0.4375rem;
  }
}

.home-Carousel_ThumbnailLink.active {
  background-color: #df0523;
}

.home-Carousel_ThumbnailProgress {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
}

.home-Carousel_ThumbnailLink .home-Carousel_ThumbnailProgress::after {
  content: "";
  display: none;
  width: 0;
  height: 100%;
  background-color: #e10320;
  transition-timing-function: linear;
  transition-property: width;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_ThumbnailLink .home-Carousel_ThumbnailProgress::after {
    display: block;
  }
}

.home-Carousel_ThumbnailLink.active .home-Carousel_ThumbnailProgress::after {
  width: 100%;
  transition-duration: 4s;
}

.home-Carousel_Control {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  width: 1410px;
  margin: auto;
  padding-left: 0;
  list-style-type: none;
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .home-Carousel_Control {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    padding: 0 1.875rem;
  }
}

@media print, screen and (min-width: 1440px) {
  .home-Carousel_Control {
    width: 1410px;
    padding: 0;
  }
}

.home-Carousel_ControlPrev {
  pointer-events: auto;
}

.home-Carousel_ControlPrev > .bx-prev {
  display: block;
  width: 1.6875rem;
  height: 2.6875rem;
  background-image: url("../img/index/icon_arrow-prev.svg");
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
}

.home-Carousel_ControlNext {
  margin-left: 0.9375rem;
  pointer-events: auto;
}

.home-Carousel_ControlNext > .bx-next {
  display: block;
  width: 1.6875rem;
  height: 2.6875rem;
  background-image: url("../img/index/icon_arrow-next.svg");
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
}

/*
---
name: home-Events
namespace: home-
category: Block
id: BOX-9
---

<span class="sw-Label">BOX-9</span>

ホームページのEventsエリアです。

```jade
main
  .home-Products_Wrapper
    .home-Events
      h2.home-Heading2: span Events
      ul.home-Events_Events
        li.home-Events_Event
          .home-Events_EventBox
            h3.home-Events_EventTitle electronica 2018
            p.home-Events_EventDate November 13 - 16, 2018
            p.home-Events_EventText
              | Messe München
Hall<br>B6, Booth # 536
            a.home-Events_EventLink(href="https://electronica.de/index.html" target="_blank") https://electronica.de/index.html
              span.home-Events_EventExternalA(aria-hidden="true")
        li.home-Events_Event
          .home-Events_EventBox
            h3.home-Events_EventTitle TheIJC.com - 4th Annual InkJet Conference
            p.home-Events_EventDate October 24 - 25, 2017
            p.home-Events_EventText
              | Düsseldorf
<br>Booth # D13
            a.home-Events_EventLink(href="http://www.theijc.com/" target="_blank") www.theijc.com/
              span.home-Events_EventExternalA(aria-hidden="true")
        li.home-Events_Event
          .home-Events_EventBox
            h3.home-Events_EventTitle INPRINT 2017
            p.home-Events_EventDate November 14 - 16, 2017
            p.home-Events_EventText
              | Düsseldorf
<br>Booth # D13
              a.home-Events_EventLink(href="http://www.inprintshow.com/germany/2017/english/" target="_blank") www.inprintshow.com/germany/2017/english/
                span.home-Events_EventExternalB(aria-hidden="true")
```
*/
.home-Events {
  width: 100vw;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  padding: 2.5rem calc(50vw - 50%) 3.75rem;
  background: #f2f4f6;
}

@media print, screen and (min-width: 1024px) {
  .home-Events {
    padding-top: 3.75rem;
  }
}

.home-Events_Events {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-Events_Events {
    margin-left: -0.375rem;
  }
}

.home-Events_Event {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .home-Events_Event {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
    padding-left: 0.375rem;
  }
}

.home-Events_Event:nth-of-type(n + 2) {
  margin-top: 0.625rem;
}

@media print, screen and (min-width: 768px) {
  .home-Events_Event:nth-of-type(n + 2) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .home-Events_Event:nth-of-type(n + 4) {
    margin-top: 0.375rem;
  }
}

.home-Events_EventBox {
  height: 100%;
  padding: 2.1875rem 1.875rem;
  background: #fff;
}

.home-Events_EventTitle {
  position: relative;
  margin-bottom: 0.9375rem;
  padding-bottom: 0.9375rem;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

.home-Events_EventTitle::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.875rem;
  height: 0.0625rem;
  border-top: 1px solid #bcbcbc;
}

.home-Events_EventDate {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.114;
  color: #444;
}

.home-Events_EventText {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .home-Events_EventText {
    margin-bottom: 0.375rem;
  }
}

.home-Events_EventLink {
  display: block;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #df0523;
}

.home-Events_EventLink:hover {
  text-decoration: underline;
}

.home-Events_EventExternalA {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventExternalA::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.home-Events_EventExternalB {
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
}

.home-Events_EventExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.1em;
}

.home-Heading2 {
  margin-bottom: 1.125rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.17875em;
  font-family: "PT sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.3;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .home-Heading2 {
    margin-bottom: 1.875rem;
    letter-spacing: 0.17867em;
    font-size: 1.875rem;
    color: #000;
  }
}

.home-Heading2 > span {
  display: inline-block;
  width: auto;
  padding: 0 0.375rem 0.5rem;
  border-bottom: 3px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .home-Heading2 > span {
    padding: 0 0 0.5rem;
  }
}

@media print, screen and (min-width: 768px) {
  .home-HeroA {
    height: 320px;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA {
    height: 500px;
  }
}

.home-HeroA_Image img {
  display: block;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .home-HeroA_Image img {
    position: relative;
    left: 50%;
    min-height: 320px;
    min-width: 1228.8px;
    margin-left: -614.4px;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Image img {
    min-height: 500px;
    min-width: 1920px;
    margin-left: -960px;
  }
}

@media print, screen and (min-width: 1920px) {
  .home-HeroA_Image img {
    left: 50vw;
    min-width: 100vw;
    margin-left: -50vw;
  }
}

.home-HeroA_Bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  margin: auto;
  background-image: url("../img/index/bg_hero.svg");
  background-position: left -210px bottom;
  background-size: 1919px auto;
  background-size: cover;
  background-repeat: no-repeat;
}

@media print, screen and (min-width: 375px) {
  .home-HeroA_Bg {
    background-position-x: -200px;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Bg {
    height: 500px;
    background-position-x: -360px;
  }
}

@media print, screen and (min-width: 1230px) {
  .home-HeroA_Bg {
    background-position-x: 53%;
  }
}

.home-HeroA_Body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  right: 0;
  bottom: 117px;
  left: 0;
  z-index: 50;
  width: calc(100vw - 30px);
  max-width: 1170px;
  margin: auto;
}

@media print, screen and (min-width: 375px) {
  .home-HeroA_Body {
    width: calc(100vw - 60px);
  }
}

@media print, screen and (min-width: 768px) {
  .home-HeroA_Body {
    bottom: 120px;
    height: auto;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Body {
    bottom: 172px;
  }
}

.home-HeroA_Body .bx-viewport {
  height: 130px !important;
}

@media print, screen and (min-width: 375px) {
  .home-HeroA_Body .bx-viewport {
    height: 152px !important;
  }
}

@media print, screen and (min-width: 768px) {
  .home-HeroA_Body .bx-viewport {
    height: 320px !important;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Body .bx-viewport {
    height: 500px !important;
  }
}

.home-HeroA_Title {
  margin-bottom: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08621em;
  font-family: "PT sans", sans-serif;
  font-size: 1.8125rem;
  line-height: 1;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .home-HeroA_Title {
    letter-spacing: 0.05em;
    font-size: 2.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Title {
    letter-spacing: 0.07018em;
    font-size: 3.5625rem;
  }
}

.home-HeroA_Title > span {
  opacity: 0.7;
}

.home-HeroA_Description {
  margin-top: 6px;
  letter-spacing: 0.07692em;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .home-HeroA_Description {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-HeroA_Description {
    margin-top: 1.4375rem;
    letter-spacing: 0.091em;
    font-size: 1.25rem;
  }
}

.home-Lead {
  max-width: 970px;
  margin: auto;
  text-align: center;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .home-Lead {
    text-align: center;
    font-size: 1rem;
    color: #000;
  }
}

.home-News {
  margin-top: 3.75rem;
}

@media print, screen and (min-width: 768px) {
  .home-News {
    margin-top: 5.625rem;
  }
}

.home-News_Body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-left: -0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .home-News_Body {
    margin-top: 2.375rem;
    margin-left: -3.125rem;
  }
}

.home-News_Box {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  margin-top: 1.875rem;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .home-News_Box {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
    margin-top: 0;
    padding-left: 3.125rem;
  }
}

.home-News_List {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .home-News_List {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
    padding-left: 3.125rem;
  }
}

.home-News_Foot {
  margin-top: 1.875rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .home-News_Foot {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-News_Foot {
    margin-top: 3.375rem;
  }
}

.home-News_FootButton {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  max-width: none;
  transition-duration: 0.3s;
}

.home-News_FootButton:hover, .home-News_FootButton:active, .home-News_FootButton:focus {
  text-decoration: none;
}

.home-News_FootButton[type="button"], .home-News_FootButton[type="reset"], .home-News_FootButton[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.home-News_FootButton:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.home-News_FootButton:disabled, .home-News_FootButton-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.home-News_FootButton-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .home-News_FootButton {
    max-width: 50%;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-News_FootButton:hover {
    background-color: #df0523;
    color: #fff;
  }
}

.home-NewsBox {
  padding-left: 0;
  list-style-type: none;
}

.home-NewsBox_Link {
  display: block;
  position: relative;
  padding: 0 1.875rem 0.9375rem 0.9375rem;
  text-decoration: none;
  background-color: #f2f4f6;
  transition-duration: 0.3s;
}

.home-NewsBox_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.home-NewsBox_Thumbnail {
  display: block;
  min-width: calc(100% + 45px);
  margin: 0 -0.9375rem 0.9375rem;
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.home-NewsBox_Thumbnail > img {
  display: block;
  width: 100%;
  margin-bottom: 0.9375rem;
}

.home-NewsBox_Title {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .home-NewsBox_Title {
    font-size: 1.25rem;
  }
}

.home-NewsBox_PostDate {
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.114285714;
  color: #df0523;
}

.home-NewsBox_Text {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

.home-NewsBox_Categories {
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 1024px) {
  .home-NewsBox_Categories {
    display: inline-block;
  }
}

.home-NewsBox_Category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #444;
}

.home-NewsBox_Category:nth-of-type(n + 2)::before {
  content: "/";
  margin-right: 0.25rem;
  font-weight: 300;
}

.home-NewsBox_Icon {
  position: absolute;
  right: 0.9375rem;
  bottom: 1.125rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 768px) {
  .home-NewsBox_Icon {
    bottom: 0.9375rem;
    height: 0.875rem;
    font-size: 0.875rem;
  }
}

.home-NewsBox_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-NewsBox_Icon::before {
    top: -0.35em;
  }
}

.home-NewsBox_IconTextPC {
  font-size: 0.875rem;
  font-weight: bold;
  line-height: 1.2;
}

.home-NewsBox_IconPc {
  position: relative;
  top: -0.1em;
  font-size: 0.8em;
}

.home-NewsBox_IconPc::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  color: #df0523;
}

.home-NewsList {
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Item:first-of-type::before {
    display: none;
  }
}

.home-NewsList_Item::after {
  content: "";
  display: block;
  width: 100vw;
  height: 1px;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  border-bottom: 1px solid #e9e9e9;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Item::after {
    width: 100%;
    margin: 0;
  }
}

.home-NewsList_Link {
  display: block;
  position: relative;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  text-decoration: none;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Link {
    padding-right: 1.875rem;
  }
  .home-NewsList_Item:first-of-type .home-NewsList_Link {
    padding-top: 0;
  }
}

.home-NewsList_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.home-NewsList_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.home-NewsList_Title {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Title {
    margin-bottom: 0.375rem;
    font-size: 1.25rem;
  }
}

.home-NewsList_PostDate {
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.114285714;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_PostDate {
    display: inline-block;
    position: relative;
    margin-right: 1.5rem;
  }
  .home-NewsList_PostDate::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -0.75rem;
    bottom: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid #dadada;
  }
}

.home-NewsList_Categories {
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Categories {
    display: inline-block;
  }
}

.home-NewsList_Category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #444;
}

.home-NewsList_Category:nth-of-type(n + 2)::before {
  content: "/";
  margin-right: 0.25rem;
  font-weight: 300;
}

.home-NewsList_Icon {
  position: absolute;
  right: 0.3125rem;
  bottom: 1.25rem;
  height: 0.875rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Icon {
    top: 0;
    right: 0.25rem;
    bottom: 0;
    height: 1rem;
    margin: auto;
    font-size: 1rem;
  }
}

.home-NewsList_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-NewsList_Icon::before {
    position: relative;
    top: -0.3em;
  }
}

.home-Products_Wrapper {
  max-width: 1170px;
  margin: 2.5rem auto 0;
  padding: 0 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .home-Products_Wrapper {
    margin-top: 3.75rem;
    padding: 0 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .home-Products_Wrapper {
    padding: 0;
  }
}

.home-Products_Section2:nth-of-type(n + 2) {
  margin-top: 4.5rem;
}

.home-Products_Grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 2.375rem;
}

@media print, screen and (min-width: 768px) {
  .home-Products_Grid {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_Grid {
    margin-top: 3.125rem;
  }
}

.home-Products_GridItem {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(1) {
    -webkit-flex-basis: 23.76068%;
        -ms-flex-preferred-size: 23.76068%;
            flex-basis: 23.76068%;
    max-width: 23.76068%;
  }
  .home-Products_GridItem:nth-of-type(2) {
    -webkit-flex-basis: 72.39316%;
        -ms-flex-preferred-size: 72.39316%;
            flex-basis: 72.39316%;
    max-width: 72.39316%;
  }
}

.home-Products_GridItem:nth-of-type(2) .home-Products_Section3 {
  margin-top: 1.875rem;
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(2) .home-Products_Section3 {
    margin-top: 1.25rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(2) .home-Products_Section3 {
    margin-top: 0;
  }
}

.home-Products_Heading3 {
  position: relative;
  margin-bottom: 1.875rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.13333em;
  font-size: 0.9375rem;
  font-weight: bold;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-Products_Heading3 {
    letter-spacing: 0.06667em;
  }
}

.home-Products_Heading3::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  border-top: 1px dotted currentColor;
}

.home-Products_Heading3 > span {
  display: inline-block;
  position: relative;
  width: auto;
  padding: 0 0.5rem;
  background-color: #fff;
}

@media print, screen and (min-width: 768px) {
  .home-Products_Heading3 > span {
    padding: 0 0.625rem;
  }
}

.home-Products_List {
  position: relative;
  width: 100vw;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
}

@media print, screen and (min-width: 768px) {
  .home-Products_List {
    width: 100%;
    margin: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(2) .home-Products_List::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -2.73484%;
    width: 1px;
    height: 100%;
    border-left: 1px solid #e6e6e6;
  }
}

.home-ProductsList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.3125rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList {
    margin-left: -0.375rem;
  }
}

.home-ProductsList_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  padding-left: 0.3125rem;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Item {
    padding-left: 0.375rem;
  }
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%;
    margin-top: 0.3125rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item:nth-of-type(n + 2) {
    margin-top: 0.75rem;
  }
}

.home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item:nth-of-type(n + 3) {
  margin-top: 0.3125rem;
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item:nth-of-type(n + 3) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Products_GridItem:nth-of-type(1) .home-ProductsList_Item:nth-of-type(n + 3) {
    margin-top: 0.75rem;
  }
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(2) .home-ProductsList_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.home-Products_GridItem:nth-of-type(2) .home-ProductsList_Item:nth-of-type(n + 3) {
  margin-top: 0.3125rem;
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(2) .home-ProductsList_Item:nth-of-type(n + 3) {
    margin-top: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .home-Products_GridItem:nth-of-type(2) .home-ProductsList_Item:nth-of-type(n + 4) {
    margin-top: 0.75rem;
  }
}

.home-ProductsList_Link {
  display: block;
  height: 100%;
  text-align: center;
  text-decoration: none;
  background-image: linear-gradient(-180deg, #f1f4f6 0%, #dde1e5 100%);
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Link {
    background: #f2f4f6;
  }
}

.home-ProductsList_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Head {
    background-image: linear-gradient(-180deg, #f1f4f6 0%, #dde1e5 100%);
  }
}

.home-ProductsList_Body {
  padding: 0.875rem 0.625rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.28;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Body {
    padding: 1.25rem 0.9375rem;
    font-size: 0.9375rem;
    line-height: 1.38;
    background: #f2f4f6;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-ProductsList_Body {
    padding: 1.25rem 0.625rem;
  }
}

.home-ProductsList_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.0625rem;
  height: 1rem;
  font-size: 1rem;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Icon {
    top: 0;
    height: 0.625rem;
    font-size: 0.625rem;
  }
}

.home-ProductsList_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
  left: 0.25rem;
  color: #df0523;
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transform-origin: center left;
      -ms-transform-origin: center left;
          transform-origin: center left;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_Icon::before {
    left: 0.125rem;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: inherit;
        -ms-transform-origin: inherit;
            transform-origin: inherit;
  }
}

.home-ProductsList_ExternalIcon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 0.625rem;
  font-size: 0.625rem;
}

@media print, screen and (min-width: 768px) {
  .home-ProductsList_ExternalIcon {
    height: 0.75rem;
    font-size: 0.75rem;
  }
}

.home-ProductsList_ExternalIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
  left: 5px;
  color: #df0523;
}

.home-Region {
  padding-top: 3.75rem;
  padding-bottom: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .home-Region {
    padding-top: 5.625rem;
    padding-bottom: 3.75rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Region {
    padding-bottom: 5.625rem;
  }
}

.home-Region_List {
  margin-top: 2.375rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .home-Region_List {
    margin-top: 1.25rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Region_List {
    margin-top: 2.375rem;
  }
}

.home-Region_Nav {
  margin-top: 1.75rem;
}

@media print, screen and (min-width: 768px) {
  .home-Region_Nav {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .home-Region_Nav {
    margin-top: 1.25rem;
  }
}

.home-RegionList {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .home-RegionList {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin-top: 0;
  }
  .home-RegionList:nth-of-type(n + 2) {
    border-left: 1px solid #d8d8d8;
  }
}

.home-RegionList_Item {
  display: inline-block;
  vertical-align: middle;
}

.home-RegionList_Item:nth-of-type(n + 2) {
  border-left: 1px solid #d8d8d8;
}

.home-RegionList_Link {
  padding: 0 1.125rem;
  text-align: center;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-RegionList_Link {
    padding: 0 1.375rem;
    font-size: 0.875rem;
    line-height: 1.8;
  }
}

.home-RegionList_Link:hover {
  text-decoration: underline;
}

.home-RegionList_Video {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -0.0625rem;
  height: 0.875rem;
  margin-right: 0.5rem;
  font-size: 0.875rem;
}

@media print, screen and (min-width: 768px) {
  .home-RegionList_Video {
    top: -0.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
  }
}

.home-RegionList_Video::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.35em;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .home-RegionList_Video::before {
    top: -0.5em;
  }
}

.home-RegionNav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.375rem;
  padding-left: 0;
  list-style-type: none;
}

.home-RegionNav_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.375rem;
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.home-RegionNav_Item:nth-of-type(n + 2) {
  margin-top: 0.625rem;
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Item:nth-of-type(n + 2) {
    margin-top: 0;
  }
}

.home-RegionNav_Link {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition-duration: 0.3s;
}

.home-RegionNav_Link::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5.75rem;
  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 98%);
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Link::before {
    height: 6.375rem;
  }
}

.home-RegionNav_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.home-RegionNav_Title {
  position: absolute;
  bottom: 0.625rem;
  left: 0.9375rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Title {
    bottom: 0.9375rem;
    font-size: 1rem;
    line-height: 1.6;
  }
}

.home-RegionNav_Icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 0.75rem;
  margin-left: 0.375rem;
  font-size: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Icon {
    height: 0.8125rem;
    margin-left: 0.25rem;
    font-size: 0.8125rem;
  }
}

.home-RegionNav_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

@media print, screen and (min-width: 768px) {
  .home-RegionNav_Icon::before {
    top: -0.4em;
  }
}

.home-RegionNav_Thumbnail {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

/*
---
name: l-Article
namespace: l-
category: Layout
---

h1相当の見出しをラップするarticleの余白を指定します。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  article.l-Article
    header.news-Header
      h1.news-Header_Title
      | しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```
*/
.l-Article {
  margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {
  .l-Article {
    margin-bottom: 3.125rem;
  }
}

/*
---
name: l-BlockA
namespace: l-
category: Layout
id: BOX-7
---

<span class="sw-Label">BOX-7</span>

コンポーネント同士を縦に並べます。

```jade
.l-BlockA
  .l-BlockA_Item
    .l-MediaA.l-MediaA-right
      .l-MediaA_Image
        .sw-Image
          img(src="/assets/img/common/image_708_440.jpg" alt)
      .l-MediaA_Body
        p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow throughgies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-BlockA_Item
    .l-MediaA.l-MediaA-right
      .l-MediaA_Image
        .sw-Image
          img(src="/assets/img/common/image_708_440.jpg" alt)
      .l-MediaA_Body
        p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992
```

`.l-BlockA-divider`をつけるとボーダーが付きます。

```jade
.l-BlockA.l-BlockA-divider
  .l-BlockA_Item
    .l-MediaA.l-MediaA-right
      .l-MediaA_Image
        .sw-Image
          img(src="/assets/img/common/image_708_440.jpg" alt)
      .l-MediaA_Body
        p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow throughgies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-BlockA_Item
    .l-MediaA.l-MediaA-right
      .l-MediaA_Image
        .sw-Image
          img(src="/assets/img/common/image_708_440.jpg" alt)
      .l-MediaA_Body
        p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992
```
*/
.l-BlockA {
  display: block;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

.l-BlockA > :last-child {
  margin-bottom: 0;
}

.l-BlockA_Item {
  margin-bottom: 1.875rem;
}

.l-BlockA-divider .l-BlockA_Item:nth-of-type(n + 2) {
  content: "";
  display: block;
  padding-top: 1.875rem;
  border-top: 1px solid #e9e9e9;
}

.l-BlockA_Item > :first-child {
  margin-top: 0;
}

.l-BlockA_Item > :last-child {
  margin-bottom: 0;
}

/*
---
name: l-ButtonA
namespace: l-
category: Layout
id: [BTN-5A, BTN-5B, BTN-5B]
---

スマホでは縦並び、タブレット以降で横並び（横幅は均等）になります。

<span class="sw-Label">BTN-5A</span>

```jade
ul.l-ButtonA
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```

<span class="sw-Label">BTN-5B</span>

```jade
ul.l-ButtonA
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```

<span class="sw-Label">BTN-5B</span>

```jade
ul.l-ButtonA
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonA_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```
*/
.l-ButtonA {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonA {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    margin-left: -1.875rem;
  }
}

.l-ButtonA > :last-child {
  margin-bottom: 0;
}

.l-ButtonA_Item {
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonA_Item {
    margin-bottom: 0;
    padding-left: 1.875rem;
  }
}

/*
---
name: l-ButtonB
namespace: l-
category: Layout
id: [BTN-6A, BTN-6B]
---

全デバイスで50%幅になります。

<span class="sw-Label">BTN-6A</span>

```jade
ul.l-ButtonB
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```

<span class="sw-Label">BTN-6B</span>

```jade
ul.l-ButtonB
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```

3カラム以上にも対応しています。

```jade
ul.l-ButtonB
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
  li.l-ButtonB_Item
    a.sw-Button.sw-Button-full(href="#") Primary Button
```
*/
.l-ButtonB {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonB {
    margin-left: -1.875rem;
  }
}

.l-ButtonB > :last-child {
  margin-bottom: 0;
}

.l-ButtonB_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonB_Item {
    margin-bottom: 0;
    padding-left: 1.875rem;
  }
}

.l-ButtonB_Item:nth-of-type(n + 3) {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonB_Item:nth-of-type(n + 3) {
    margin-top: 1.875rem;
  }
}

/*
---
name: l-ButtonC
namespace: l-
category: Layout
id: BTN-7A
---

全デバイスでなりゆきです。

<span class="sw-Label">BTN-7A</span>

```jade
ul.l-ButtonC
  li.l-ButtonC_Item
    a.sw-Button(href="#") More
  li.l-ButtonC_Item
    a.sw-Button(href="#") More Details
  li.l-ButtonC_Item
    a.sw-Button(href="#") Button with Long Name
```

センター揃えにします。

- `.l-ButtonC-center`
- `.l-ButtonC-centerSm`
- `.l-ButtonC-centerMd`
- `.l-ButtonC-centerLg`
- `.l-ButtonC-centerXl`

```jade
ul.l-ButtonC.l-ButtonC-center
  li.l-ButtonC_Item
    a.sw-Button(href="#") More
  li.l-ButtonC_Item
    a.sw-Button(href="#") More Details
  li.l-ButtonC_Item
    a.sw-Button(href="#") Button with Long Name
```

右揃えにします。

- `.l-ButtonC-right`
- `.l-ButtonC-rightSm`
- `.l-ButtonC-rightMd`
- `.l-ButtonC-rightLg`
- `.l-ButtonC-rightXl`

```jade
ul.l-ButtonC.l-ButtonC-right
  li.l-ButtonC_Item
    a.sw-Button(href="#") More
  li.l-ButtonC_Item
    a.sw-Button(href="#") More Details
  li.l-ButtonC_Item
    a.sw-Button(href="#") Button with Long Name
```
*/
.l-ButtonC {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: -1.25rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

.l-ButtonC > :last-child {
  margin-bottom: 0;
}

.l-ButtonC_Item {
  -webkit-flex-grow: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  margin-top: 1.25rem;
  margin-right: 0.625rem;
}

.l-ButtonC-center {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 375px) {
  .l-ButtonC-centerSm {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 768px) {
  .l-ButtonC-centerMd {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-ButtonC-centerLg {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-ButtonC-centerXl {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.l-ButtonC-right {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media print, screen and (min-width: 375px) {
  .l-ButtonC-rightSm {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media print, screen and (min-width: 768px) {
  .l-ButtonC-rightMd {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-ButtonC-rightLg {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-ButtonC-rightXl {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

/*
---
name: l-ButtonD
namespace: l-
category: Layout
id: BTN-7B
---

全デバイスでなりゆきです。スマホでは最小幅60%です。

<span class="sw-Label">BTN-7B</span>

```jade
ul.l-ButtonD
  li.l-ButtonD_Item
    a.sw-Button.sw-Button-full(href="#") More
  li.l-ButtonD_Item
    a.sw-Button.sw-Button-full(href="#") More Details
  li.l-ButtonD_Item
    a.sw-Button.sw-Button-full(href="#") Button with Long Long Name
```
*/
.l-ButtonD {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 1.25rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonD {
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.l-ButtonD > :last-child {
  margin-bottom: 0;
}

.l-ButtonD_Item {
  min-width: 60%;
  margin-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-ButtonD_Item {
    min-width: auto;
    margin-right: 0.625rem;
    margin-bottom: 0;
  }
}

/*
---
name: l-DetailTemplate
namespace: l-
category: Layout
---

下層ページの2カラムテンプレートです。

- PCではサイドバーが左になります

```jade
.l-DetailTemplate
  .l-DetailTemplate_Wrapper
    .l-DetailTemplate_Main
      p Main

    .l-DetailTemplate_Sub
      p Sub
```
*/
.l-DetailTemplate {
  max-width: 1170px;
  margin: auto;
  margin-top: 1.875rem;
  padding: 0 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate {
    margin-top: 3.75rem;
    margin-bottom: 5.625rem;
    padding: 0 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-DetailTemplate {
    padding: 0;
  }
}

.l-DetailTemplate.l-DetailTemplate-News {
  margin-top: 1.375rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate.l-DetailTemplate-News {
    margin-top: 3.75rem;
  }
}

.l-DetailTemplate_Wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media print, screen and (min-width: 1024px) {
  .l-DetailTemplate_Wrapper {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.l-DetailTemplate_Main {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 1024px) {
  .l-DetailTemplate_Main {
    -webkit-flex-basis: 74.35897%;
        -ms-flex-preferred-size: 74.35897%;
            flex-basis: 74.35897%;
    max-width: 74.35897%;
  }
}

.l-DetailTemplate_Main > :first-child {
  margin-top: 0;
}

.l-DetailTemplate_Main > :last-child {
  margin-bottom: 0 !important;
}

.l-DetailTemplate_Sub {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 1024px) {
  .l-DetailTemplate_Sub {
    -webkit-flex-basis: 20.51282%;
        -ms-flex-preferred-size: 20.51282%;
            flex-basis: 20.51282%;
    max-width: 20.51282%;
    margin-top: 0;
  }
}

.l-DetailTemplate_SubNav {
  display: none;
}

@media print, screen and (min-width: 1024px) {
  .l-DetailTemplate_SubNav {
    display: block;
  }
}

.l-DetailTemplate_SubNav.l-DetailTemplate_SubNav-showAlways {
  display: block;
  padding-bottom: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_SubNav.l-DetailTemplate_SubNav-showAlways {
    padding-bottom: 0;
  }
}

.l-DetailTemplate_SubNavSp {
  display: block;
  margin-bottom: 3.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_SubNavSp {
    display: none;
  }
}

.l-DetailTemplate_CategoryNavSp {
  display: block;
  margin-bottom: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_CategoryNavSp {
    display: none;
  }
}

.l-DetailTemplate_SubNavSp + .l-DetailTemplate_related,
.l-DetailTemplate_SubNav + .l-DetailTemplate_related {
  margin-top: 3.75rem;
}

.l-DetailTemplate_SubNav-showAlways + .l-DetailTemplate_related {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_SubNav-showAlways + .l-DetailTemplate_related {
    margin-top: 3.75rem;
  }
}

.l-DetailTemplate_ProductsOffice {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_ProductsOffice {
    margin-top: 1.875rem;
  }
}

.l-DetailTemplate_office {
  margin: 0 0 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .l-DetailTemplate_office {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 -0.9375rem;
  }
  .l-DetailTemplate_office .office-BoxC {
    width: calc(50% - 15px);
    margin: 0 0.9375rem 3.75rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-DetailTemplate_office {
    display: block;
    margin: 1.5625rem 0;
  }
  .l-DetailTemplate_office .office-BoxC {
    width: auto;
    margin: inherit;
  }
}

/*
---
name: l-Grid
namespace: l-
category: Layout
---

標準的なグリッドシステムです。カラムごとに任意の値を指定したい場合に使います。
カラム間の余白は幅を`$l-grid-column-gap`で統一しています。

以下のような指定ができます。

- `.l-Grid_Item-8of12` カラム数の指定。
- `.l-Grid-reverse` カラムの反転。
- `.l-Grid-center` カラムのセンタリング。
- `.l-Grid-middle` カラムの垂直配置。

```jade
.l-Grid
  .l-Grid_Item.l-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
  .l-Grid_Item.l-Grid_Item-4of12Md
    .test-Box Two<br>1/1 → 4/12
```

```jade
.l-Grid.l-Grid-reversMd
  .l-Grid_Item.l-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
  .l-Grid_Item.l-Grid_Item-4of12Md
    .test-Box Two<br>1/1 → 4/12
```

```jade
.l-Grid.l-Grid-centerMd
  .l-Grid_Item.l-Grid_Item-8of12Md
    .test-Box One<br>1/1 → 8/12
```
*/
.l-Grid {
  -js-display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-Grid {
    margin-left: -1.875rem;
  }
}

.l-Grid_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grid_Item {
    padding-left: 1.875rem;
  }
}

.l-Grid_Item-1of12 {
  -webkit-flex-basis: 8.33333%;
      -ms-flex-preferred-size: 8.33333%;
          flex-basis: 8.33333%;
  max-width: 8.33333%;
}

.l-Grid_Item-2of12 {
  -webkit-flex-basis: 16.66667%;
      -ms-flex-preferred-size: 16.66667%;
          flex-basis: 16.66667%;
  max-width: 16.66667%;
}

.l-Grid_Item-3of12 {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}

.l-Grid_Item-4of12 {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.l-Grid_Item-5of12 {
  -webkit-flex-basis: 41.66667%;
      -ms-flex-preferred-size: 41.66667%;
          flex-basis: 41.66667%;
  max-width: 41.66667%;
}

.l-Grid_Item-6of12 {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
}

.l-Grid_Item-7of12 {
  -webkit-flex-basis: 58.33333%;
      -ms-flex-preferred-size: 58.33333%;
          flex-basis: 58.33333%;
  max-width: 58.33333%;
}

.l-Grid_Item-8of12 {
  -webkit-flex-basis: 66.66667%;
      -ms-flex-preferred-size: 66.66667%;
          flex-basis: 66.66667%;
  max-width: 66.66667%;
}

.l-Grid_Item-9of12 {
  -webkit-flex-basis: 75%;
      -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
  max-width: 75%;
}

.l-Grid_Item-10of12 {
  -webkit-flex-basis: 83.33333%;
      -ms-flex-preferred-size: 83.33333%;
          flex-basis: 83.33333%;
  max-width: 83.33333%;
}

.l-Grid_Item-11of12 {
  -webkit-flex-basis: 91.66667%;
      -ms-flex-preferred-size: 91.66667%;
          flex-basis: 91.66667%;
  max-width: 91.66667%;
}

.l-Grid_Item-12of12 {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-Grid_Item-1of12Md {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grid_Item-2of12Md {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grid_Item-3of12Md {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grid_Item-4of12Md {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grid_Item-5of12Md {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grid_Item-6of12Md {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grid_Item-7of12Md {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grid_Item-8of12Md {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grid_Item-9of12Md {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grid_Item-10of12Md {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grid_Item-11of12Md {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grid_Item-12of12Md {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid_Item-1of12Lg {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grid_Item-2of12Lg {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grid_Item-3of12Lg {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grid_Item-4of12Lg {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grid_Item-5of12Lg {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grid_Item-6of12Lg {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grid_Item-7of12Lg {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grid_Item-8of12Lg {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grid_Item-9of12Lg {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grid_Item-10of12Lg {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grid_Item-11of12Lg {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grid_Item-12of12Lg {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid_Item-1of12Xl {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grid_Item-2of12Xl {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grid_Item-3of12Xl {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grid_Item-4of12Xl {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grid_Item-5of12Xl {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grid_Item-6of12Xl {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grid_Item-7of12Xl {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grid_Item-8of12Xl {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grid_Item-9of12Xl {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grid_Item-10of12Xl {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grid_Item-11of12Xl {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grid_Item-12of12Xl {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
    max-width: 100%;
  }
}

/**
 * 要素の垂直位置を上寄せ。
 */
.l-Grid-top {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-topMd {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-topLg {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-topXl {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/**
 * 要素の垂直位置を真ん中寄せ。
 */
.l-Grid-middle {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-middleMd {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-middleLg {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-middleXl {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/**
 * 要素の垂直位置を下寄せ。
 */
.l-Grid--bottom {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-bottomMd {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-bottomLg {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-bottomXl {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

/**
 * 要素を中央寄せ、要素内は左寄せ。
 */
.l-Grid-center {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-centerMd {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-centerLg {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-centerXl {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/**
 * 要素を右寄せ、要素内は左寄せ。
 */
.l-Grid-right {
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-rightMd {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-rightLg {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-rightXl {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

/**
 * 要素の反転。
 */
.l-Grid-reverse {
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

@media print, screen and (min-width: 768px) {
  .l-Grid-reversMd {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grid-reverseLg {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grid-reverseXl {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

/*
---
name: l-Grids
namespace: l-
category: Layout
---

バリエーションの豊富なグリッドシステムです。親要素（`.l-Grids`）にクラスを追加することで、1/2や1/3のような均等なカラムや、8/12と4/12のようなカラムの指定ができます。

カラム間の余白は幅を`$l-grids-column-gap`、高さを`$l-grids-row-gap`で統一しています。

以下のような指定ができます。

- `.l-Grids-col2`のように1/2から1/5までの均等なカラム指定。
- `.l-Grids-col8to4`のように1/12と11/12から5/12と7/12、7/12と5/12から11/12と1/12までの合計10パターンのカラム指定。
- `.l-Grids-col2Md`のように`Md`、`Lg`、`Xl`を追加してブレイクポイントの指定。
- `.l-Grids-middle`のようにカラムの垂直位置を中央揃え。
- `.l-Grids-noGap`でカラム間のガターを0にする。
- `.l-Grids-narrow`でカラム間のガターを最小にする。

### 均等なカラム指定。

```jade
.l-Grids.l-Grids-col2Md
  .l-Grids_Item
    .test-Box One<br>1/1 → 1/2
  .l-Grids_Item
    .test-Box Two<br>1/1 → 1/2

.l-Grids.l-Grids-col2.l-Grids-col3Md
  .l-Grids_Item
    .test-Box One<br>1/2 → 1/3
  .l-Grids_Item
    .test-Box Two<br>1/2 → 1/3
  .l-Grids_Item
    .test-Box Three<br>1/2 → 1/3
  .l-Grids_Item
    .test-Box Four<br>1/2 → 1/3
```

### 8/12と4/12と4/12と8/12のカラム指定。

```jade
.l-Grids.l-Grids-col8to4Md
  .l-Grids_Item
    .test-Box One<br>1/1 → 8/12
  .l-Grids_Item
    .test-Box Two<br>1/1 → 4/12

.l-Grids.l-Grids-col4to8Md
  .l-Grids_Item
    .test-Box One <br>1/1 → 4/12
  .l-Grids_Item
    .test-Box Two<br>1/1 → 8/12
```

### 8/12と4/12のカラム指定かつ、`md`以上で要素を反転。

```jade
.l-Grids.l-Grids-col8to4Md.l-Grids-reversMd
  .l-Grids_Item
    .test-Box One<br>1/1 → 8/12
  .l-Grids_Item
    .test-Box Two<br>1/1 → 4/12
```

### カラムの垂直位置を中央揃え。

```jade
.l-Grids.l-Grids-middleMd.l-Grids-col2Md
  .l-Grids_Item
    .test-Box One<br>1/1 → 6/12<br>.l-Grids-middle<br>.l-Grids-middle
  .l-Grids_Item
    .test-Box Two<br>1/1 → 6/12
```

### カラム間のガターを0にします。

```jade
.l-Grids.l-Grids-col3Md.l-Grids-noGap
  .l-Grids_Item
    .test-Box One<br>1/1 → 1/3
  .l-Grids_Item
    .test-Box Two<br>1/1 → 1/3
  .l-Grids_Item
    .test-Box Three<br>1/1 → 1/3
```

### カラム間のガターを最小にします。

```jade
.l-Grids.l-Grids-col3Md.l-Grids-narrow
  .l-Grids_Item
    .test-Box One<br>1/1 → 1/3
  .l-Grids_Item
    .test-Box Two<br>1/1 → 1/3
  .l-Grids_Item
    .test-Box Three<br>1/1 → 1/3
```
*/
.l-Grids {
  -js-display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 0.75rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-Grids {
    margin-top: 1.5rem;
    margin-left: -1.875rem;
  }
}

.l-Grids_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
  /* 1 Column */
}

@media print, screen and (min-width: 768px) {
  .l-Grids_Item {
    padding-left: 1.875rem;
  }
}

.l-Grids_Item > :first-child {
  margin-top: 0;
}

.l-Grids_Item > :last-child {
  margin-bottom: 0;
}

.l-Grids_Item:nth-of-type(n + 2) {
  margin-top: 0.75rem;
}

/* 2 Columns */
.l-Grids-col2 > .l-Grids_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  /**
   * いったんすべての`margin-top`をリセットします。
   * `:nth-of-type(n+1)`は1つ目以降のすべての要素に適応されます。
   * リセット後に対象となる要素に`margin-top`を指定します。
   */
}

.l-Grids-col2 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col2 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col2Md > .l-Grids_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grids-col2Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col2Lg > .l-Grids_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grids-col2Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col2Xl > .l-Grids_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Grids-col2Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/* 3 Columns */
.l-Grids-col3 > .l-Grids_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.l-Grids-col3 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col3 > .l-Grids_Item:nth-of-type(n + 4) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col3Md > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col3Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3Md > .l-Grids_Item:nth-of-type(n + 4) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col3Lg > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col3Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3Lg > .l-Grids_Item:nth-of-type(n + 4) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col3Xl > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col3Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3Xl > .l-Grids_Item:nth-of-type(n + 4) {
    margin-top: 1.5rem;
  }
}

/* 4 Columns */
.l-Grids-col4 > .l-Grids_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 25%;
}

.l-Grids-col4 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col4 > .l-Grids_Item:nth-of-type(n + 5) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col4Md > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Grids-col4Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4Md > .l-Grids_Item:nth-of-type(n + 5) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col4Lg > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Grids-col4Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4Lg > .l-Grids_Item:nth-of-type(n + 5) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col4Xl > .l-Grids_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Grids-col4Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4Xl > .l-Grids_Item:nth-of-type(n + 5) {
    margin-top: 1.5rem;
  }
}

/* 5 Columns */
.l-Grids-col5 > .l-Grids_Item {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-width: 20%;
}

.l-Grids-col5 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col5 > .l-Grids_Item:nth-of-type(n + 6) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col5Md > .l-Grids_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Grids-col5Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5Md > .l-Grids_Item:nth-of-type(n + 6) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col5Lg > .l-Grids_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Grids-col5Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5Lg > .l-Grids_Item:nth-of-type(n + 6) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col5Xl > .l-Grids_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Grids-col5Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5Xl > .l-Grids_Item:nth-of-type(n + 6) {
    margin-top: 1.5rem;
  }
}

/**
 * カラム間のガターを0にします。
 */
.l-Grids-noGap {
  margin-left: 0;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-noGap {
    margin-left: 0;
  }
}

.l-Grids-noGap > .l-Grids_Item {
  padding-left: 0;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-noGap > .l-Grids_Item {
    padding-left: 0;
  }
}

/**
 * カラム間のガターを最小にします。
 */
.l-Grids-narrow {
  margin-left: -1px;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-narrow {
    margin-left: -1px;
  }
}

.l-Grids-narrow > .l-Grids_Item {
  padding-left: 1px;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-narrow > .l-Grids_Item {
    padding-left: 1px;
  }
}

/**
 * 要素の垂直位置を上寄せ。
 */
.l-Grids-top {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-topMd {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-topLg {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-topXl {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

/**
 * 要素の垂直位置を真ん中寄せ。
 */
.l-Grids-middle {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-middleMd {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-middleLg {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-middleXl {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

/**
 * 要素の垂直位置を下寄せ。
 */
.l-Grids-bottom {
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-bottomMd {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-bottomLg {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-bottomXl {
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

/**
 * `.l-Grids_Item`の表示順を逆にします。
 * A,B → B,A
 */
.l-Grids-reverse {
  -webkit-flex-direction: row-reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-reversMd {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-reverseLg {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-reverseXl {
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
}

/* 1/12 11/12, 11/12 1/12 */
.l-Grids-col1to11 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 8.33333%;
      -ms-flex-preferred-size: 8.33333%;
          flex-basis: 8.33333%;
  max-width: 8.33333%;
}

.l-Grids-col1to11 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 91.66667%;
      -ms-flex-preferred-size: 91.66667%;
          flex-basis: 91.66667%;
  max-width: 91.66667%;
}

.l-Grids-col1to11 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col1to11 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

.l-Grids-col11to1 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 91.66667%;
      -ms-flex-preferred-size: 91.66667%;
          flex-basis: 91.66667%;
  max-width: 91.66667%;
}

.l-Grids-col11to1 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 8.33333%;
      -ms-flex-preferred-size: 8.33333%;
          flex-basis: 8.33333%;
  max-width: 8.33333%;
}

.l-Grids-col11to1 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col11to1 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col1to11Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col1to11Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col1to11Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col1to11Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col11to1Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col11to1Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col11to1Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col11to1Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col1to11Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col1to11Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col1to11Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col1to11Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col11to1Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col11to1Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col11to1Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col11to1Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col1to11Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col1to11Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col1to11Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col1to11Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col11to1Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 91.66667%;
        -ms-flex-preferred-size: 91.66667%;
            flex-basis: 91.66667%;
    max-width: 91.66667%;
  }
  .l-Grids-col11to1Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 8.33333%;
        -ms-flex-preferred-size: 8.33333%;
            flex-basis: 8.33333%;
    max-width: 8.33333%;
  }
  .l-Grids-col11to1Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col11to1Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/* 2/12 10/12, 10/12 2/12 */
.l-Grids-col2to10 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 16.66667%;
      -ms-flex-preferred-size: 16.66667%;
          flex-basis: 16.66667%;
  max-width: 16.66667%;
}

.l-Grids-col2to10 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 83.33333%;
      -ms-flex-preferred-size: 83.33333%;
          flex-basis: 83.33333%;
  max-width: 83.33333%;
}

.l-Grids-col2to10 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col2to10 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

.l-Grids-col10to2 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 83.33333%;
      -ms-flex-preferred-size: 83.33333%;
          flex-basis: 83.33333%;
  max-width: 83.33333%;
}

.l-Grids-col10to2 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 16.66667%;
      -ms-flex-preferred-size: 16.66667%;
          flex-basis: 16.66667%;
  max-width: 16.66667%;
}

.l-Grids-col10to2 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col10to2 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col2to10Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col2to10Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col2to10Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2to10Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col10to2Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col10to2Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col10to2Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col10to2Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col2to10Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col2to10Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col2to10Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2to10Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col10to2Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col10to2Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col10to2Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col10to2Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col2to10Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col2to10Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col2to10Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col2to10Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col10to2Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
  .l-Grids-col10to2Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
  .l-Grids-col10to2Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col10to2Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/* 3/12 9/12, 9/12 3/12 */
.l-Grids-col3to9 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}

.l-Grids-col3to9 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 75%;
      -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
  max-width: 75%;
}

.l-Grids-col3to9 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col3to9 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

.l-Grids-col9to3 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 75%;
      -ms-flex-preferred-size: 75%;
          flex-basis: 75%;
  max-width: 75%;
}

.l-Grids-col9to3 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 25%;
      -ms-flex-preferred-size: 25%;
          flex-basis: 25%;
  max-width: 25%;
}

.l-Grids-col9to3 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col9to3 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col3to9Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col3to9Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col3to9Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3to9Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col9to3Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col9to3Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col9to3Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col9to3Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col3to9Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col3to9Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col3to9Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3to9Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col9to3Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col9to3Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col9to3Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col9to3Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col3to9Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col3to9Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col3to9Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col3to9Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col9to3Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
  .l-Grids-col9to3Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
  .l-Grids-col9to3Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col9to3Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/* 4/12 8/12, 8/12 4/12 */
.l-Grids-col4to8 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.l-Grids-col4to8 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 66.66667%;
      -ms-flex-preferred-size: 66.66667%;
          flex-basis: 66.66667%;
  max-width: 66.66667%;
}

.l-Grids-col4to8 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col4to8 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

.l-Grids-col8to4 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 66.66667%;
      -ms-flex-preferred-size: 66.66667%;
          flex-basis: 66.66667%;
  max-width: 66.66667%;
}

.l-Grids-col8to4 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.l-Grids-col8to4 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col8to4 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col4to8Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col4to8Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col4to8Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4to8Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col8to4Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col8to4Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col8to4Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col8to4Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col4to8Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col4to8Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col4to8Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4to8Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col8to4Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col8to4Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col8to4Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col8to4Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col4to8Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col4to8Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col4to8Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col4to8Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col8to4Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
  .l-Grids-col8to4Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Grids-col8to4Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col8to4Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/* 5/12 7/12, 7/12 5/12 */
.l-Grids-col5to7 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 41.66667%;
      -ms-flex-preferred-size: 41.66667%;
          flex-basis: 41.66667%;
  max-width: 41.66667%;
}

.l-Grids-col5to7 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 58.33333%;
      -ms-flex-preferred-size: 58.33333%;
          flex-basis: 58.33333%;
  max-width: 58.33333%;
}

.l-Grids-col5to7 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col5to7 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

.l-Grids-col7to5 > .l-Grids_Item:nth-of-type(odd) {
  -webkit-flex-basis: 58.33333%;
      -ms-flex-preferred-size: 58.33333%;
          flex-basis: 58.33333%;
  max-width: 58.33333%;
}

.l-Grids-col7to5 > .l-Grids_Item:nth-of-type(even) {
  -webkit-flex-basis: 41.66667%;
      -ms-flex-preferred-size: 41.66667%;
          flex-basis: 41.66667%;
  max-width: 41.66667%;
}

.l-Grids-col7to5 > .l-Grids_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Grids-col7to5 > .l-Grids_Item:nth-of-type(n + 3) {
  margin-top: 0.75rem;
}

@media print, screen and (min-width: 768px) {
  .l-Grids-col5to7Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col5to7Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col5to7Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5to7Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col7to5Md > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col7to5Md > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col7to5Md > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col7to5Md > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Grids-col5to7Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col5to7Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col5to7Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5to7Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col7to5Lg > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col7to5Lg > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col7to5Lg > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col7to5Lg > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Grids-col5to7Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col5to7Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col5to7Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col5to7Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
  .l-Grids-col7to5Xl > .l-Grids_Item:nth-of-type(odd) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
  .l-Grids-col7to5Xl > .l-Grids_Item:nth-of-type(even) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
  .l-Grids-col7to5Xl > .l-Grids_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Grids-col7to5Xl > .l-Grids_Item:nth-of-type(n + 3) {
    margin-top: 1.5rem;
  }
}

/*
---
name: l-Images
namespace: l-
category: Layout
id: [IMG-4A, IMG-4B, IMG-12A, IMG-12B, IMG-12C]
---

<span class="sw-Label">IMG-4A</span>

バリエーションの豊富なグリッドシステムです。親要素（`.l-Images`）にクラスを追加することで、1/2や1/3のような均等なカラムの指定ができます。

カラム間の余白は幅を`$l-images-column-gap`、高さを`$l-images-row-gap`で統一しています。

以下のような指定ができます。

- `.l-Images-col2`のように1/2から1/5までの均等なカラム指定。
- `.l-Images-col2Md`のように`Md`、`Lg`、`Xl`を追加してブレイクポイントの指定。

### 均等なカラム指定。

```jade
.l-Images.l-Images-col2Md
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
```

<span class="sw-Label">IMG-4B</span>

```jade
.l-Images.l-Images-col3Md
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
```

<span class="sw-Label">IMG-12A</span>


```jade
.l-Images.l-Images-col2
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
```

<span class="sw-Label">IMG-12B</span>


```jade
.l-Images.l-Images-col3
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
```

<span class="sw-Label">IMG-12C</span>


```jade
.l-Images.l-Images-col2.l-Images-col4Md
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
  .l-Images_Item
    figure.sw-Caption.sw-Caption-full
      span.sw-Caption_Image
        img(src="/assets/img/common/img_290_180.jpg" alt="")
      figcaption.sw-Caption_Text Size Caption Text
```

<span class="sw-Label">IMG-9A</span>

```jade
.l-Images.l-Images-col7to5Md
  .l-Images_Item
    p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronichas created new demand for connectors that can withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditions Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability
  .l-Images_Item
    .l-Images_Image
      img(src="/assets/img/common/image_708_440.jpg" alt="")
```

```jade
.l-Images.l-Images-col8to4Md
  .l-Images_Item
    p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronichas created new demand for connectors that can withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditions Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability
  .l-Images_Item
    .l-Images_Image
      img(src="/assets/img/common/image_708_440.jpg" alt="")
```

<span class="sw-Label">IMG-9B</span>

```jade
.l-Images.l-Images-col9to3Md
  .l-Images_Item
    p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronichas created new demand for connectors that can withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditions Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability
  .l-Images_Item
    .l-Images_Image
      img(src="/assets/img/common/image_708_440.jpg" alt="")
```

```jade
.l-Images.l-Images-col10to2Md
  .l-Images_Item
    p.sw-Text A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronichas created new demand for connectors that can withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditions Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability
  .l-Images_Item
    .l-Images_Image
      img(src="/assets/img/common/image_708_440.jpg" alt="")
```
*/
.l-Images {
  -js-display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.25rem;
  margin-bottom: 1.875rem;
  margin-left: -0.625rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-Images {
    margin-top: 1.875rem;
    margin-left: -1.875rem;
  }
}

.l-Images_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.625rem;
  /* 1 Column */
}

@media print, screen and (min-width: 768px) {
  .l-Images_Item {
    padding-left: 1.875rem;
  }
}

.l-Images_Item > :first-child {
  margin-top: 0;
}

.l-Images_Item > :last-child {
  margin-bottom: 0;
}

.l-Images_Item:nth-of-type(n + 2) {
  margin-top: 1.25rem;
}

.l-Images_Image {
  text-align: center;
}

/* 2 Columns */
.l-Images-col2 > .l-Images_Item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
  max-width: 50%;
  /**
   * いったんすべての`margin-top`をリセットします。
   * `:nth-of-type(n+1)`は1つ目以降のすべての要素に適応されます。
   * リセット後に対象となる要素に`margin-top`を指定します。
   */
}

.l-Images-col2 > .l-Images_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Images-col2 > .l-Images_Item:nth-of-type(n + 3) {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-Images-col2Md > .l-Images_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Images-col2Md > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col2Md > .l-Images_Item:nth-of-type(n + 3) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Images-col2Lg > .l-Images_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Images-col2Lg > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col2Lg > .l-Images_Item:nth-of-type(n + 3) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Images-col2Xl > .l-Images_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .l-Images-col2Xl > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col2Xl > .l-Images_Item:nth-of-type(n + 3) {
    margin-top: 1.875rem;
  }
}

/* 3 Columns */
.l-Images-col3 > .l-Images_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 33.33333%;
}

.l-Images-col3 > .l-Images_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Images-col3 > .l-Images_Item:nth-of-type(n + 4) {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-Images-col3Md > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Images-col3Md > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col3Md > .l-Images_Item:nth-of-type(n + 4) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Images-col3Lg > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Images-col3Lg > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col3Lg > .l-Images_Item:nth-of-type(n + 4) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Images-col3Xl > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .l-Images-col3Xl > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col3Xl > .l-Images_Item:nth-of-type(n + 4) {
    margin-top: 1.875rem;
  }
}

/* 4 Columns */
.l-Images-col4 > .l-Images_Item {
  -webkit-flex-basis: 33.33333%;
      -ms-flex-preferred-size: 33.33333%;
          flex-basis: 33.33333%;
  max-width: 25%;
}

.l-Images-col4 > .l-Images_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Images-col4 > .l-Images_Item:nth-of-type(n + 5) {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-Images-col4Md > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Images-col4Md > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col4Md > .l-Images_Item:nth-of-type(n + 5) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Images-col4Lg > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Images-col4Lg > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col4Lg > .l-Images_Item:nth-of-type(n + 5) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Images-col4Xl > .l-Images_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 25%;
  }
  .l-Images-col4Xl > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col4Xl > .l-Images_Item:nth-of-type(n + 5) {
    margin-top: 1.875rem;
  }
}

/* 5 Columns */
.l-Images-col5 > .l-Images_Item {
  -webkit-flex-basis: 20%;
      -ms-flex-preferred-size: 20%;
          flex-basis: 20%;
  max-width: 20%;
}

.l-Images-col5 > .l-Images_Item:nth-of-type(n + 1) {
  margin-top: 0;
}

.l-Images-col5 > .l-Images_Item:nth-of-type(n + 6) {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-Images-col5Md > .l-Images_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Images-col5Md > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col5Md > .l-Images_Item:nth-of-type(n + 6) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1024px) {
  .l-Images-col5Lg > .l-Images_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Images-col5Lg > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col5Lg > .l-Images_Item:nth-of-type(n + 6) {
    margin-top: 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Images-col5Xl > .l-Images_Item {
    -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
            flex-basis: 20%;
    max-width: 20%;
  }
  .l-Images-col5Xl > .l-Images_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .l-Images-col5Xl > .l-Images_Item:nth-of-type(n + 6) {
    margin-top: 1.875rem;
  }
}

/*
---
name: l-MediaA
namespace: l-
category: Layout
id: [IMG-5A, IMG-5B, IMG-5C, IMG-6A, IMG-6B, IMG-6C]
---

<span class="sw-Label">IMG-5A</span>

- 回り込みあり
- 画像は常に5/12幅
- 画像は右にフロート
- 画像にキャプションなし

```jade
.l-MediaA.l-MediaA-right
  .l-MediaA_Image
    .sw-Image
      img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

- 回り込みあり
- 画像は常に5/12幅
- 画像は右にフロート
- 画像にキャプションあり

```jade
.l-MediaA.l-MediaA-right
  .l-MediaA_Image
    figure.sw-Caption
      span.sw-Caption_Image
        img(src="/assets/img/common/image_708_440.jpg" alt="")
      figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

- 回り込みあり
- 画像は常に5/12幅
- 画像は右にフロート
- 画像に背景色付きのキャプションあり

```jade
.l-MediaA.l-MediaA-right
  .l-MediaA_Image
    figure.sw-Caption.sw-Caption-Bg
      span.sw-Caption_Image
        img(src="/assets/img/common/image_708_440.jpg" alt="")
      figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-5B</span>

- 回り込みあり
- 画像はスマホで5/12幅、タブレット以降で3/12幅
- 画像は右にフロート

```jade
.l-MediaA.l-MediaA-right.l-MediaA-small
  .l-MediaA_Image
    .sw-Image
      img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-5C</span>

- タブレット以降で回り込みあり
- 画像はスマホで12/12幅、タブレット以降で5/12幅
- 画像は右にフロート

```jade
.l-MediaA.l-MediaA-right.l-MediaA-stack
  .l-MediaA_Image
    .sw-Image
      img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-6A</span>

- 画像は常に5/12幅
- 画像は左にフロート

```jade
.l-MediaA.l-MediaA-left
  .l-MediaA_Image
    .sw-Image
      img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-6B</span>

- 画像はスマホで5/12幅、タブレット以降で3/12幅
- 画像は左にフロート

```jade
.l-MediaA.l-MediaA-left.l-MediaA-small
  .l-MediaA_Image
    figure.sw-Caption
      span.sw-Caption_Image
        img(src="/assets/img/common/image_708_440.jpg" alt="")
      figcaption.sw-Caption_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-6C</span>

- タブレット以降で回り込みあり
- 画像はスマホで12/12幅、タブレット以降で5/12幅
- 画像は左にフロート

```jade
.l-MediaA.l-MediaA-left.l-MediaA-stack
  .l-MediaA_Image
    .sw-Image
      img(src="/assets/img/common/img_290_180.jpg" alt)
  .l-MediaA_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```
*/
.l-MediaA {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.l-MediaA::after {
  content: "";
  clear: both;
  display: block;
}

@media print, screen and (max-width: 767px) {
  .l-MediaA-stack {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.l-MediaA_Body > :last-child {
  margin-bottom: 0;
}

.l-MediaA_Image {
  width: 41.66667%;
  padding-bottom: 0.9375rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .l-MediaA_Image {
    padding-bottom: 1.875rem;
  }
}

.l-MediaA-left .l-MediaA_Image {
  float: left;
  padding-right: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaA-left .l-MediaA_Image {
    padding-right: 1.875rem;
  }
}

.l-MediaA-right .l-MediaA_Image {
  float: right;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaA-right .l-MediaA_Image {
    padding-left: 1.875rem;
  }
}

.l-MediaA-small .l-MediaA_Image {
  width: 41.66667%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaA-small .l-MediaA_Image {
    width: 25%;
  }
}

@media print, screen and (max-width: 767px) {
  .l-MediaA-stack .l-MediaA_Image {
    width: 100%;
    padding-right: 0;
    padding-bottom: 1.25rem;
    padding-left: 0;
  }
}

.l-MediaA_Image > :first-child {
  margin-top: 0;
}

.l-MediaA_Image > :last-child {
  margin-bottom: 0;
}

/*
---
name: l-MediaB
namespace: l-
category: Layout
id: [IMG-9A, IMG-9B, IMG-10A, IMG-10B]
---

<span class="sw-Label">IMG-9A</span>

- 回り込みなし
- スマホで100%、タブレット以降でテキスト7/12画像、5/12幅
- 画像は右配置

```jade
.l-MediaB.l-MediaB-col7to5
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-MediaB_Image
    img(src="/assets/img/common/image_708_440.jpg" alt)
```

- 回り込みなし
- スマホで100%、タブレット以降でテキスト8/12、画像4/12幅
- 画像は右配置

```jade
.l-MediaB.l-MediaB-col8to4
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-MediaB_Image
    img(src="/assets/img/common/image_708_440.jpg" alt)
```

<span class="sw-Label">IMG-9B</span>

- 回り込みなし
- スマホでテキスト100%、画像4/12幅、タブレット以降でテキスト9/12、画像3/12幅
- 画像は右配置

```jade
.l-MediaB.l-MediaB-col9to3
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-MediaB_Image
    img(src="/assets/img/common/img_290_180.jpg" alt)
```

- 回り込みなし
- スマホでテキスト100%、画像4/12幅、タブレット以降でテキスト10/12、画像2/12幅
- 画像は右配置

```jade
.l-MediaB.l-MediaB-col10to2
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
  .l-MediaB_Image
    img(src="/assets/img/common/img_290_180.jpg" alt)
```

<span class="sw-Label">IMG-10A</span>

- 回り込みなし
- スマホで100%、タブレット以降でテキスト5/12、画像7/12幅
- 画像は左配置

```jade
.l-MediaB.l-MediaB-col5to7
  .l-MediaB_Image
    img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

- 回り込みなし
- スマホで100%、タブレット以降でテキスト4/12画像、8/12幅
- 画像は左配置

```jade
.l-MediaB.l-MediaB-col4to8
  .l-MediaB_Image
    img(src="/assets/img/common/image_708_440.jpg" alt)
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

<span class="sw-Label">IMG-10B</span>

- 回り込みなし
- スマホでテキスト100%、画像4/12幅、タブレット以降でテキスト3/12、画像9/12幅
- 画像は左配置

```jade
.l-MediaB.l-MediaB-col3to9
  .l-MediaB_Image
    img(src="/assets/img/common/img_290_180.jpg" alt)
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```

- 回り込みなし
- スマホでテキスト100%、画像4/12幅、タブレット以降でテキスト2/12、画像10/12幅
- 画像は左配置

```jade
.l-MediaB.l-MediaB-col2to10
  .l-MediaB_Image
    img(src="/assets/img/common/img_290_180.jpg" alt)
  .l-MediaB_Body
    p A branch connector is used to install electronic equipment, such as a navigation system or dashboard camera, by branching power from the vehicle’s main wiring harness. Since Kyocera introduced its original 9215 series branch connectors in 1992, the products have been lauded for providing reliable connections while streamlining assembly and installation workflow through their unique clamshell structure. In 2014, Kyocera became an early developer of connectors for aluminum wiring to support weight-saving initiatives among automakers. Rapid adoption of advanced driver assistance systems (ADAS) and other automotive electronics withstand harsh environments, including the vehicle exterior and direct exposure to the elements in all weather conditionsKyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality Kyocera designed the Sheltap branch connector series to provide a high level of waterproof functionality and reliability — successfully passing the high-pressure washing and high-temperature exposure testing of the JASO*1 D616 standards, which evaluate wire harness connectors with specially designed enclosures and sealant materials for automotive applications.  Kyocera’s Sheltap series connectors embody the company’s commitment to supporting the rapid advancement of electronic technologies in diverse markets, including automotive, shipping, and outdoor security / camera-monitoring applications.
```
*/
.l-MediaB {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB {
    margin-left: -1.875rem;
  }
}

.l-MediaB_Body {
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB_Body {
    padding-left: 1.875rem;
  }
}

.l-MediaB_Body > :first-child {
  margin-top: 0;
}

.l-MediaB_Body > :last-child {
  margin-bottom: 0;
}

.l-MediaB-col7to5 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col8to4 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col5to7 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col4to8 .l-MediaB_Image + .l-MediaB_Body {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col7to5 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col8to4 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col5to7 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col4to8 .l-MediaB_Image + .l-MediaB_Body {
    margin-top: 0;
  }
}

.l-MediaB-col9to3 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col10to2 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col3to9 .l-MediaB_Image + .l-MediaB_Body,
.l-MediaB-col2to10 .l-MediaB_Image + .l-MediaB_Body {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col9to3 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col10to2 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col3to9 .l-MediaB_Image + .l-MediaB_Body,
  .l-MediaB-col2to10 .l-MediaB_Image + .l-MediaB_Body {
    margin-top: 0;
  }
}

.l-MediaB_Image {
  padding-left: 0.9375rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB_Image {
    padding-left: 1.875rem;
  }
}

.l-MediaB_Image > :first-child {
  margin-top: 0;
}

.l-MediaB_Image > :last-child {
  margin-bottom: 0;
}

.l-MediaB-col7to5 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col8to4 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col5to7 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col4to8 .l-MediaB_Body + .l-MediaB_Image {
  margin-top: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col7to5 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col8to4 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col5to7 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col4to8 .l-MediaB_Body + .l-MediaB_Image {
    margin-top: 0;
  }
}

.l-MediaB-col9to3 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col10to2 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col3to9 .l-MediaB_Body + .l-MediaB_Image,
.l-MediaB-col2to10 .l-MediaB_Body + .l-MediaB_Image {
  margin-top: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col9to3 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col10to2 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col3to9 .l-MediaB_Body + .l-MediaB_Image,
  .l-MediaB-col2to10 .l-MediaB_Body + .l-MediaB_Image {
    margin-top: 0;
  }
}

.l-MediaB-col7to5 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col7to5 > :nth-of-type(odd) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
}

.l-MediaB-col7to5 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col7to5 > :nth-of-type(even) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
}

.l-MediaB-col5to7 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col5to7 > :nth-of-type(odd) {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
  }
}

.l-MediaB-col5to7 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col5to7 > :nth-of-type(even) {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
  }
}

.l-MediaB-col8to4 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col8to4 > :nth-of-type(odd) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
}

.l-MediaB-col8to4 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col8to4 > :nth-of-type(even) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.l-MediaB-col4to8 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col4to8 > :nth-of-type(odd) {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.l-MediaB-col4to8 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col4to8 > :nth-of-type(even) {
    -webkit-flex-basis: 66.66667%;
        -ms-flex-preferred-size: 66.66667%;
            flex-basis: 66.66667%;
    max-width: 66.66667%;
  }
}

.l-MediaB-col9to3 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col9to3 > :nth-of-type(odd) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
}

.l-MediaB-col9to3 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col9to3 > :nth-of-type(even) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
}

@media print, screen and (max-width: 767px) {
  .l-MediaB-col9to3 > .l-MediaB_Image {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.l-MediaB-col3to9 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col3to9 > :nth-of-type(odd) {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
    max-width: 25%;
  }
}

.l-MediaB-col3to9 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col3to9 > :nth-of-type(even) {
    -webkit-flex-basis: 75%;
        -ms-flex-preferred-size: 75%;
            flex-basis: 75%;
    max-width: 75%;
  }
}

@media print, screen and (max-width: 767px) {
  .l-MediaB-col3to9 > .l-MediaB_Image {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.l-MediaB-col10to2 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col10to2 > :nth-of-type(odd) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
}

.l-MediaB-col10to2 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col10to2 > :nth-of-type(even) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
}

@media print, screen and (max-width: 767px) {
  .l-MediaB-col10to2 > .l-MediaB_Image {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

.l-MediaB-col2to10 > :nth-of-type(odd) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col2to10 > :nth-of-type(odd) {
    -webkit-flex-basis: 16.66667%;
        -ms-flex-preferred-size: 16.66667%;
            flex-basis: 16.66667%;
    max-width: 16.66667%;
  }
}

.l-MediaB-col2to10 > :nth-of-type(even) {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .l-MediaB-col2to10 > :nth-of-type(even) {
    -webkit-flex-basis: 83.33333%;
        -ms-flex-preferred-size: 83.33333%;
            flex-basis: 83.33333%;
    max-width: 83.33333%;
  }
}

@media print, screen and (max-width: 767px) {
  .l-MediaB-col2to10 > .l-MediaB_Image {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
}

/*
---
name: l-MediaC
namespace: sw-
category: Image
id: IMG-11
---

<span class="sw-Label">IMG-11</span>

- 画像とテキストの中央揃えです
- 画像は拡大縮小されません

```jade
.l-MediaC
  span.l-MediaC_Image
    img(src="/assets/img/common/image_75_50.jpg" alt="")
  span.l-MediaC_Text Size comparison to AA batterySize comparison to AA batterySize comparison to AA battery
```
*/
.l-MediaC {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.l-MediaC_Image {
  /* CMSの仕様のためimgにクラス名をつけれない */
}

.l-MediaC_Image > img {
  margin-right: 0.625rem;
}

.l-MediaC_Image > img > :first-child {
  margin-top: 0;
}

.l-MediaC_Image > img > :last-child {
  margin-bottom: 0;
}

.l-MediaC_Text {
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

/*
---
name: l-RadioA
namespace: l-
category: Layout
id: FO-2
---

<span class="sw-Label">FO-2</span>

`.sw-FormRadio`のレイアウト1。

```jade
ul.l-RadioA
  li.l-RadioA_Item
    input.sw-FormRadio(type="radio" id="radio2-1" name="radio2" value="0" checked)
    label(for="radio2-1")
      span Radio label
  li.l-RadioA_Item
    input.sw-FormRadio(type="radio" id="radio2-2" name="radio2" value="1")
    label(for="radio2-2")
      span Radio label
```
*/
.l-RadioA {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .l-RadioA {
    margin-top: -0.625rem;
  }
}

.l-RadioA > :last-child {
  margin-bottom: 0;
}

.l-RadioA_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  margin-bottom: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-RadioA_Item {
    -webkit-flex-basis: auto;
        -ms-flex-preferred-size: auto;
            flex-basis: auto;
    max-width: none;
    margin-top: 0.625rem;
    margin-right: 0.9375rem;
    margin-bottom: 0;
  }
}

/*
---
name: l-Section2
namespace: l-
category: Layout
---

h2相当の見出しをラップするセクションの余白を指定します。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```

`.l-BlockA-divider`をつけるとボーダーが付きます。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section2.l-Section2-divider
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section2.l-Section2-divider
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```
*/
.l-Section2 {
  margin-top: 3.4375rem;
  margin-bottom: 3.4375rem;
}

@media print, screen and (min-width: 768px) {
  .l-Section2 {
    margin-top: 3.125rem;
    margin-bottom: 3.125rem;
  }
}

.l-Section2 > :first-child {
  margin-top: 0;
}

.l-Section2 > :last-child {
  margin-bottom: 0;
}

.sw-LeadA + .l-Section2,
.st-TitleC + .l-Section2 {
  margin-top: 0;
}

.l-Section2.l-Section2-divider {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}

.l-Section2.l-Section2-divider:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  padding-top: 1.875rem;
  border-top: 1px solid #e9e9e9;
}

.l-Section2-News {
  margin-bottom: 0;
}

@media print, screen and (min-width: 768px) {
  .l-Section2-News {
    margin-bottom: 3.125rem;
  }
}

/*
---
name: l-Section3
namespace: l-
category: Layout
---

h3相当の見出しをラップするセクションの余白を指定します。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section3
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section3
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```

`.l-BlockA-divider`をつけるとボーダーが付きます。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section3.l-Section3-divider
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。

  section.l-Section3.l-Section3-divider
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    p.sw-Text しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
```
*/
.l-Section3 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.l-Section3 > :first-child {
  margin-top: 0;
}

.l-Section3 > :last-child {
  margin-bottom: 0;
}

.sw-Heading2A + .l-Section3 {
  margin-top: 0;
}

.l-Section3.l-Section3-divider:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  padding-top: 2.5rem;
  border-top: 1px solid #e9e9e9;
}

/*
---
name: l-Section4
namespace: l-
category: Layout
---

h4相当の見出しをラップするセクションの余白を指定します。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section3
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    section.l-Section4
      h4.sw-Heading4A 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

  section.l-Section3
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

    section.l-Section4
      h4.sw-Heading4A 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    section.l-Section4
      h4.sw-Heading4A 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
```

`.l-BlockA-divider`をつけるとボーダーが付きます。

```jade
.l-Wrapper
  p.sw-Text 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

  section.l-Section3
    h3.sw-Heading3A 吾輩はここで始めて人間というものを見た。
    section.l-Section4.l-Section4-divider
      h4.sw-Heading4A 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
    section.l-Section4.l-Section4-divider
      h4.sw-Heading4A 吾輩はここで始めて人間というものを見た。
      p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
```
*/
.l-Section4 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.l-Section4 > :first-child {
  margin-top: 0;
}

.l-Section4 > :last-child {
  margin-bottom: 0;
}

.l-Section4.l-Section4-divider:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  padding-top: 1.25rem;
  border-top: 1px solid #e9e9e9;
}

/*
---
name: l-Wrapper
namespace: l-
category: Layout
---

コンテンツの横幅を制限します。左右のpaddingも入ります。

```jade
.l-Wrapper
  section.l-Section2
    h2.sw-Heading2 吾輩はここで始めて人間というものを見た。
    p.sw-Text しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
```
*/
.l-Wrapper {
  max-width: 1170px;
  margin: auto;
  padding: 0 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .l-Wrapper {
    padding: 0 1.875rem;
  }
}

@media print, screen and (min-width: 1230px) {
  .l-Wrapper {
    padding: 0;
  }
}

.l-Wrapper > :first-child {
  margin-top: 0;
}

.l-Wrapper > :last-child {
  margin-bottom: 0;
}

/*
---
name: news-Body
namespace: news-
category: Block
id: NL-2
---

<span class="sw-Label">NL-2</span>

News詳細の本文です。

```jade
.news-Body
  h2.news-Heading2 H2 Title heading
  h3.news-Heading3 H3 Title heading
  h4.news-Heading4 H4 Title heading

  p.news-Summary Kyoto/London – Kyocera today introduced a new clamshell-style branch connector for automotive electronics that features a unique locking structure for waterproof connections, ensuring reliability in harsh conditions. The new Sheltap 9715 Series Waterproof Electronic Branch Connector was shown for the first time at CEATEC JAPAN 2018 (Booth #H009), October 16-19. Samples are now available upon request.

  .news-Box
    dl.news-Definition
      dt About Sheltap<sup class="sw-Sup">®</sup>
      dd Kyocera’s Sheltap series of branch-style electronic connectors are engineered for automotive use. The clamshell design allows Sheltap connectors to branch and distribute electricity easily and with long-term reliability, even in harsh environments. Sheltap is registered trademarks of Kyocera in Japan, U.S.A., China, and Europe

  .news-Box.l-Grid
    .l-Grid_Item.l-Grid_Item-2of12Md
        img(src="/assets/img/common/image_600_400.png")
    .l-Grid_Item.l-Grid_Item-10of12Md
        dl.news-Definition
          dt About Sheltap<sup class="sw-Sup">®</sup>
          dd Kyocera’s Sheltap series of branch-style electronic connectors are engineered for automotive use. The clamshell design allows Sheltap connectors to branch and distribute electricity easily and with long-term reliability, even in harsh environments. Sheltap is registered trademarks of Kyocera in Japan, U.S.A., China, and Europe
```
*/
.news-Body {
  margin: 0 0 3.75rem;
  color: #444;
}

.news-Body a {
  text-decoration: underline;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .news-Body a:hover {
    text-decoration: none;
  }
}

.news-Body .news-Box {
  margin-bottom: 3.75rem;
}

.news-Body .news-Box::before, .news-Body .news-Box::after {
  content: "";
  clear: both;
  display: table;
}

.news-Body .news-Box p:not(:last-child) {
  margin-bottom: 1.25rem;
}

.news-Body p:not(:last-child) {
  margin-bottom: 1.25rem;
}

.news-Body [class*="news-Heading"] + [class*="news-Heading"] {
  margin-top: 1.875rem;
}

.news-Body .news-Heading2 {
  margin-bottom: 1.125rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .news-Body .news-Heading2 {
    margin-bottom: 1.25rem;
  }
}

.news-Body .news-Heading3 {
  margin-bottom: 1.125rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .news-Body .news-Heading3 {
    margin-bottom: 0.9375rem;
  }
}

.news-Body .news-Heading4 {
  margin-bottom: 1.125rem;
  font-family: 600;
  font-size: 1rem;
  line-height: 1.375;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .news-Body .news-Heading4 {
    margin-bottom: 0.9375rem;
  }
}

.news-Summary {
  margin-bottom: 3.75rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
}

.news-Definition {
  color: #444;
}

.news-Definition dt {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.news-Definition dd {
  margin-top: 0.3125rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.news-Body .news-TableA {
  width: 100%;
  max-width: 100%;
  margin-bottom: 3.75rem;
  border-collapse: collapse;
}

.news-Body .news-TableA caption {
  display: block;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.news-Body .news-TableA tr {
  border-bottom: 1px solid #dadada;
}

.news-Body .news-TableA tr:nth-of-type(odd) {
  background-color: #f5f5f5;
}

.news-Body .news-TableA tr:nth-of-type(even) {
  background-color: transparent;
}

.news-Body .news-TableA tr:nth-of-type(1) {
  border-top: 1px solid #dadada;
}

.news-Body .news-TableA th,
.news-Body .news-TableA td {
  vertical-align: top;
  padding: 0.9375rem 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.3;
  border-width: 0;
  color: #444;
}

.news-Body .news-TableA th {
  font-weight: 600;
}

.news-Box sup {
  vertical-align: super;
  position: static;
  font-size: 0.75em;
}

.news-Body sup {
  vertical-align: super;
  position: static;
  font-size: 0.75em;
}

/*
---
name: news-BoxA
namespace: news-
category: Block
id: NL-4
---

<span class="sw-Label">NL-4</span>

Newsのトップと一覧で使用する一覧です。


```jade
.news-BoxA
  .news-BoxA_Body
    ol.news-BoxA_List
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Introduces Fuji Ceramic Knives Just in Time for Holidays
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 October 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Kitchen Products
        .news-BoxA_ItemBody
          p.news-BoxA_Text Costa Mesa, Calif. – December 6, 2018 – Combining the high performance of zirconia ceramic blades with the beauty and serenity inspired by Japan’s Fuji Sanctuary, Kyocera has created a new line of Fuji Ceramic Knives just in time for the holidays. Innovative, durable …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image01.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Enters U.S. Cybersecurity Endpoint Management Market
        .news-BoxA_Meta
          p.news-BoxA_PostDate 2 October 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Endpoint Security Software
        p.news-BoxA_SubTitle Interfocus’ LanScope Cat Helps Small Businesses Manage Devices, Mitigate Cyber Risk; Free 14-day Trial
        .news-BoxA_ItemBody
          p.news-BoxA_Text Costa Mesa, Calif. – December 6, 2018 – Combining the high performance of zirconia ceramic blades with the beauty and serenity inspired by Japan’s Fuji Sanctuary, Kyocera has created a new line of Fuji Ceramic Knives just in time for the holidays. Innovative, durable …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image02.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Launches Rugged, Military-Grade, Waterproof DuraForce PRO 2 Smartphone with Verizon Wireless
        .news-BoxA_Meta
          p.news-BoxA_PostDate 20 september 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Smartphones &amp; Feature Phones
            li.news-BoxA_Category Semiconductor Components
            li.news-BoxA_Category Electronic Components &amp; Devices
        .news-BoxA_ItemBody
          p.news-BoxA_Text TIJUANA, MÈXICO – Kyocera has been awarded Mexico’s highest honor for environmental protection — the national “Recognition of Environmental Excellence” award — for the third consecutive year. Presented by Mexico’s Federal Environmental Protection Agency (PROFEPA), the …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image03.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Launches Rugged, Military-Grade, Waterproof DuraForce PRO 2 Smartphone with Verizon Wireless
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 July 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Smartphones &amp; Feature Phones
        .news-BoxA_ItemBody
          p.news-BoxA_Text TIJUANA, MÈXICO – Kyocera has been awarded Mexico’s highest honor for environmental protection — the national “Recognition of Environmental Excellence” award — for the third consecutive year. Presented by Mexico’s Federal Environmental Protection Agency (PROFEPA), the …
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title Mobile Industry Works Together to Deliver Complete 5G System Standard on Time
        .news-BoxA_Meta
          p.news-BoxA_PostDate 15 July 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Smartphones &amp; Feature Phones
        .news-BoxA_ItemBody
          p.news-BoxA_Text TIJUANA, MÈXICO – Kyocera has been awarded Mexico’s highest honor for environmental protection — the national “Recognition of Environmental Excellence” award — for the third consecutive year. Presented by Mexico’s Federal Environmental Protection Agency (PROFEPA), the …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image04.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA’s New Air-Cooled UV Curing Light is World’s Smallest, Lightest and Most Powerful
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 May 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Electronic Components &amp; Devices
        p.news-BoxA_SubTitle Supports UV ink printing, including billboard printing, as well as UV-cured coatings and adhesives
        .news-BoxA_ItemBody
          p.news-BoxA_Text Kyocera Corporation (President: Hideo Tanimoto) announced today that it has developed a new air-cooled UV-LED curing light that is not only the world’s most powerful*1, but also the world’s smallest*2. The new Kyocera G5A Series is ideal for use in industrial ultravio …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image05.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA to Exhibit Fine Ceramic Technologies at Materials Research Society’s Fall 2016 Meeting, Nov. 29 to Dec. 2 in Boston
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 May 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Electronic Components &amp; Devices
        p.news-BoxA_SubTitle Supports UV ink printing, including billboard printing, as well as UV-cured coatings and adhesives
        .news-BoxA_ItemBody
          p.news-BoxA_Text Kyocera Corporation (President: Hideo Tanimoto) announced today that it has developed a new air-cooled UV-LED curing light that is not only the world’s most powerful*1, but also the world’s smallest*2. The new Kyocera G5A Series is ideal for use in industrial ultravio …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image06.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Introduces Fuji Ceramic Knives Just in Time for Holidays
        .news-BoxA_Meta
          p.news-BoxA_PostDate 6 May 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Kitchen Products
        .news-BoxA_ItemBody
          p.news-BoxA_Text Costa Mesa, Calif. – December 6, 2018 – Combining the high performance of zirconia ceramic blades with the beauty and serenity inspired by Japan’s Fuji Sanctuary, Kyocera has created a new line of Fuji Ceramic Knives just in time for the holidays. Innovative, durable …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image01.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Enters U.S. Cybersecurity Endpoint Management Market
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 October 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Endpoint Security Software
        p.news-BoxA_SubTitle Interfocus’ LanScope Cat Helps Small Businesses Manage Devices, Mitigate Cyber Risk; Free 14-day Trial
        .news-BoxA_ItemBody
          p.news-BoxA_Text Costa Mesa, Calif. – December 6, 2018 – Combining the high performance of zirconia ceramic blades with the beauty and serenity inspired by Japan’s Fuji Sanctuary, Kyocera has created a new line of Fuji Ceramic Knives just in time for the holidays. Innovative, durable …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image02.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
      li.news-BoxA_Item
        p.news-BoxA_Title KYOCERA Launches Rugged, Military-Grade, Waterproof DuraForce PRO 2 Smartphone with Verizon Wireless
        .news-BoxA_Meta
          p.news-BoxA_PostDate 26 October 2018
          ul.news-BoxA_Categories
            li.news-BoxA_Category Smartphones &amp; Feature Phones
            li.news-BoxA_Category Semiconductor Components
            li.news-BoxA_Category Electronic Components &amp; Devices
        .news-BoxA_ItemBody
          p.news-BoxA_Text TIJUANA, MÈXICO – Kyocera has been awarded Mexico’s highest honor for environmental protection — the national “Recognition of Environmental Excellence” award — for the third consecutive year. Presented by Mexico’s Federal Environmental Protection Agency (PROFEPA), the …
          figure.news-BoxA_Figure
            img.news-BoxA_Image(src="/assets/img/news/image03.jpg" alt)
        a.news-BoxA_Link(href="#") Read more
    .news-BoxA_Footer
      nav.sw-Pager
        p.sw-Pager_Prev
          a.sw-Pager_PrevLink(href="#" aria-disabled="true")
            span.sw-Pager_PrevIcon(aria-label="Previous")
        p.sw-Pager_Location
          span.sw-Pager_LocationItem 1
          span.sw-Pager_LocationItem of
          span.sw-Pager_LocationItem 10
        ol.sw-Pager_List
          li.sw-Pager_Item
            a.sw-Pager_Link(href="index.html" aria-current="page") 1
          li.sw-Pager_Item
            a.sw-Pager_Link(href="index2.html") 2
          li.sw-Pager_Item
            a.sw-Pager_Link(href="index3.html") 3
          li.sw-Pager_Item
            a.sw-Pager_Link(href="index4.html") 4
          li.sw-Pager_Item
            a.sw-Pager_Link(href="index5.html") 5
        p.sw-Pager_Next
          a.sw-Pager_NextLink(href="index2.html")
            span.sw-Pager_NextIcon(aria-label="Next")
```
*/
.js-news-BoxA[aria-hidden="true"] {
  display: none;
}

.js-news-BoxA_Header[aria-hidden="true"] {
  display: none;
}

.news-BoxA_Body:first-child {
  margin-top: -0.875rem;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Body:first-child {
    margin-top: -1.5rem;
  }
}

.news-BoxA_List {
  padding-left: 0;
  list-style-type: none;
}

.news-BoxA_Item {
  position: relative;
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Item {
    min-height: 9.875rem;
    padding: 1.875rem 14.25rem 2rem 0;
  }
}

.news-BoxA_Item::after {
  content: "";
  display: block;
  position: absolute;
  right: -0.9375rem;
  bottom: 0;
  left: -0.9375rem;
  height: 1px;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  border-bottom: 1px solid #d2d2d2;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Item::after {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #e9e9e9;
  }
}

.news-BoxA_Title {
  margin-bottom: 0.625rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Title {
    margin-bottom: 0.9375rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.375;
  }
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Meta {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 0.625rem;
  }
}

.news-BoxA_PostDate {
  margin-bottom: 0.3125rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_PostDate {
    float: left;
    margin-right: 0.75rem;
    margin-bottom: 0;
    padding-right: 0.75rem;
    white-space: nowrap;
    line-height: 1.3;
    border-right: 1px solid #dadada;
  }
}

.news-BoxA_Categories {
  margin-bottom: 0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Categories {
    margin-bottom: 0;
    line-height: 1;
  }
}

.news-BoxA_Category {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #444;
}

.news-BoxA_Category::after {
  content: "/";
  vertical-align: middle;
  margin-left: 0.25rem;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1;
  color: #dadada;
}

.news-BoxA_Category:last-child::after {
  content: none;
}

.news-BoxA_SubTitle {
  margin-bottom: 0.3125rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.3;
  color: #666;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_SubTitle {
    margin-bottom: 0.8125rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }
}

.news-BoxA_ItemBody {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  margin: 0.4375rem 0 1.375rem;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_ItemBody {
    display: block;
    margin: 0 0 1.375rem;
  }
}

.news-BoxA_Sumally {
  display: -webkit-box;
  overflow: hidden;
  margin-bottom: 1.375rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Sumally {
    display: block;
    overflow: visible;
    margin-bottom: 1.375rem;
    font-size: 0.9375rem;
  }
}

.news-BoxA_Text {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #666;
  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Text {
    font-size: 0.9375rem;
    -webkit-line-clamp: 3;
  }
}

.news-BoxA_Figure {
  height: 5.75rem;
  min-width: 8.125rem;
  margin: 0.5rem 0 0 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Figure {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 12.1875rem;
    height: 8.625rem;
    margin: 0 0 0 1.875rem;
  }
}

.news-BoxA_Link {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  max-width: none;
  transition-duration: 0.3s;
}

.news-BoxA_Link:hover, .news-BoxA_Link:active, .news-BoxA_Link:focus {
  text-decoration: none;
}

.news-BoxA_Link[type="button"], .news-BoxA_Link[type="reset"], .news-BoxA_Link[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.news-BoxA_Link:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.news-BoxA_Link:disabled, .news-BoxA_Link-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.news-BoxA_Link-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Link {
    width: 9.375rem;
    max-width: 50%;
  }
  .news-BoxA_Link:hover {
    background-color: #df0523;
    color: #fff;
  }
}

.news-BoxA_LinkIcon {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.news-BoxA_LinkIconExternalA, .news-BoxA_LinkIconExternalB {
  display: inline-block;
  position: relative;
  height: 0.6875rem;
  margin-left: 0.3125rem;
  font-size: 0.6875rem;
}

.news-BoxA_LinkIconExternalA::before, .news-BoxA_LinkIconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.25em;
}

.news-BoxA_LinkIconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
}

.news-BoxA_Foot {
  margin-top: 1.25rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Foot {
    margin-top: 1.875rem;
  }
}

.news-BoxA_Button {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  max-width: 10.125rem;
  transition-duration: 0.3s;
}

.news-BoxA_Button:hover, .news-BoxA_Button:active, .news-BoxA_Button:focus {
  text-decoration: none;
}

.news-BoxA_Button[type="button"], .news-BoxA_Button[type="reset"], .news-BoxA_Button[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.news-BoxA_Button:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.news-BoxA_Button:disabled, .news-BoxA_Button-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.news-BoxA_Button-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .news-BoxA_Button {
    max-width: 41.66667%;
  }
}

@media print, screen and (min-width: 1024px) {
  .news-BoxA_Button:hover {
    background-color: #df0523;
    color: #fff;
  }
}

/*
---
name: news-Header
namespace: news-
category: Block
id: NT-1
---

<span class="sw-Label">NT-1</span>

News詳細のタイトル部分です。


```jade
header.st-TitleC.news-Header
  h1.news-Header_Title
    | KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive electronics
  p.news-Header_Lead
    | Sheltap&reg; clamshell-style connector is designed to withstand water-pressure and extreme temperature; helps streamline auto assembly workflow
  .news-Header_Meta
    .news-Header_PostDate
      | 26 October 2018
    ul.news-Header_Categories
      li.news-Header_Category Semiconductor Components
```
*/
.news-Header {
  margin-bottom: 1.875rem;
  padding-bottom: 1.6875rem;
  border-bottom: 1px solid #e9e9e9;
}

@media print, screen and (min-width: 768px) {
  .news-Header {
    padding-bottom: 1.9375rem;
  }
}

.news-Header_Title {
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .news-Header_Title {
    font-size: 2.25rem;
    line-height: 1.2;
  }
}

.news-Header_Lead {
  margin: 0.9375rem 0;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3;
  color: #666;
}

@media print, screen and (min-width: 768px) {
  .news-Header_Lead {
    margin: 0.875rem 0 1.5625rem;
    font-size: 1.5rem;
    line-height: 1.4;
  }
}

@media print, screen and (min-width: 768px) {
  .news-Header_Meta {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 0.625rem;
  }
}

.news-Header_PostDate {
  display: block;
  white-space: nowrap;
  font-size: 0.875rem;
  line-height: 1.114285714;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .news-Header_PostDate {
    display: inline-block;
    line-height: 1.3;
  }
  .news-Header_PostDate::after {
    content: "";
    width: 0;
    height: 1.25rem;
    margin: 0 0.75rem;
    border-left: 1px solid #dadada;
  }
}

.news-Header_Categories {
  display: block;
  padding: 0.1875rem 0 0 0;
  list-style: none;
}

@media print, screen and (min-width: 768px) {
  .news-Header_Categories {
    display: inline-block;
    margin-top: -0.3125rem;
    padding: 0;
  }
}

.news-Header_Category {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  color: #444;
}

.news-Header_Category::after {
  content: "/";
  vertical-align: middle;
  margin-left: 0.25rem;
  font-size: 1.1875rem;
  font-weight: 300;
  line-height: 1;
  color: #dadada;
}

.news-Header_Category:last-child::after {
  content: none;
}

/*
---
name: news-Lead
namespace: news-
category: Block
id: NT-2
---

<span class="sw-Label">NT-2</span>

News詳細のリード部分です。


```jade
p.news-Lead
  | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```
*/
.news-Lead {
  margin: 0 0 3.75rem;
}

/*
---
name: news-NavA
namespace: news-
category: Navigation
---

Productsのカテゴリトップページで使用するNews一覧です。MTで、該当するカテゴリのNewsだけが出力されます。


```jade
.news-NavA
  .news-NavA_Body
    ol.news-NavA_List
      li.news-NavA_Item
        a.news-NavA_Link(href="#")
          p.news-NavA_Title KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive
          p.news-NavA_PostDate 26 October 2018
          ul.news-NavA_Categories
            li.news-NavA_Category Corporate
            li.news-NavA_Category Management
          span.news-NavA_Icon(aria-hidden="true")
      li.news-NavA_Item
        a.news-NavA_Link(href="#")
          p.news-NavA_Title KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive
          p.news-NavA_PostDate 26 October 2018
          ul.news-NavA_Categories
            li.news-NavA_Category Corporate
            li.news-NavA_Category Management
          span.news-NavA_Icon(aria-hidden="true")
      li.news-NavA_Item
        a.news-NavA_Link(href="#")
          p.news-NavA_Title KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive
          p.news-NavA_PostDate 26 October 2018
          ul.news-NavA_Categories
            li.news-NavA_Category Corporate
            li.news-NavA_Category Management
          span.news-NavA_Icon(aria-hidden="true")
      li.news-NavA_Item
        a.news-NavA_Link(href="#")
          p.news-NavA_Title KYOCERA introduces reliable, Waterproof Branch Connector for harsh conditions of automotive
          p.news-NavA_PostDate 26 October 2018
          ul.news-NavA_Categories
            li.news-NavA_Category Corporate
            li.news-NavA_Category Management
          span.news-NavA_Icon(aria-hidden="true")
  .news-NavA_Foot
    a.news-NavA_Button(href="#") More News
```
*/
.news-NavA_List {
  margin-top: -0.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_List {
    margin-top: -1.5rem;
  }
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Item:first-of-type::before {
    display: none;
  }
}

.news-NavA_Item::after {
  content: "";
  display: block;
  width: 100vw;
  height: 1px;
  margin-right: calc(-50vw + 50%);
  margin-left: calc(-50vw + 50%);
  border-bottom: 1px solid #e9e9e9;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Item::after {
    width: 100%;
    margin: 0;
  }
}

.news-NavA_Link {
  display: block;
  position: relative;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  text-decoration: none;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Link {
    padding-top: 1.5rem;
    padding-right: 1.875rem;
    padding-bottom: 1.125rem;
  }
  .home-NewsList_Item:first-of-type .news-NavA_Link {
    padding-top: 0;
  }
}

.news-NavA_Link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.news-NavA_Title {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Title {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
  }
}

.news-NavA_IconExternalA, .news-NavA_IconExternalB {
  display: inline-block;
  height: 0.875rem;
  margin-left: 0.25rem;
  font-size: 0.875rem;
  color: #a5a5a5;
}

.news-NavA_IconExternalA::before, .news-NavA_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.15em;
}

.news-NavA_IconExternalB::before {
  content: "";
}

.news-NavA_PostDate {
  margin-bottom: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.114285714;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_PostDate {
    display: inline-block;
    position: relative;
    margin-right: 1.5rem;
    font-size: 0.875rem;
  }
  .news-NavA_PostDate::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -0.75rem;
    bottom: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid #dadada;
  }
}

.news-NavA_Categories {
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Categories {
    display: inline-block;
  }
}

.news-NavA_Category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #444;
}

.news-NavA_Category:nth-of-type(n + 2)::before {
  content: "/";
  margin-right: 0.25rem;
}

.news-NavA_Icon {
  position: absolute;
  right: 0.3125rem;
  bottom: 1.25rem;
  font-size: 0.8em;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Icon {
    top: 0;
    right: 0.25rem;
    bottom: 0;
    height: 1.8em;
    margin: auto;
    font-size: 0.95em;
  }
}

.news-NavA_Icon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  color: #df0523;
}

.news-NavA_Foot {
  margin-top: 1.25rem;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Foot {
    margin-top: 1.875rem;
  }
}

.news-NavA_Button {
  display: inline-block;
  margin: 0;
  padding: 0.75rem 1.5625rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  border: none;
  border: 1px solid #df0523;
  border-radius: 0.21429em;
  background: transparent;
  background-color: #fff;
  color: #df0523;
  cursor: pointer;
  transition-duration: 0.3s;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  max-width: 10.125rem;
  transition-duration: 0.3s;
}

.news-NavA_Button:hover, .news-NavA_Button:active, .news-NavA_Button:focus {
  text-decoration: none;
}

.news-NavA_Button[type="button"], .news-NavA_Button[type="reset"], .news-NavA_Button[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.news-NavA_Button:focus {
  outline: 0;
  box-shadow: 0 0 6px 3px #1589ee;
}

.news-NavA_Button:disabled, .news-NavA_Button-disabled {
  border-color: #bcbcbc;
  color: #bcbcbc;
  cursor: not-allowed;
}

.news-NavA_Button-disabled {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .news-NavA_Button {
    max-width: 41.66667%;
  }
}

@media print, screen and (min-width: 1024px) {
  .news-NavA_Button:hover {
    background-color: #df0523;
    color: #fff;
  }
}

/*
---
name: office-BoxA
namespace: office-
category: Block
id: BOX-6
---

<span class="sw-Label">BOX-6</span>

ProductsのSales Office一覧です。Productsのカテゴリ内のSales Officeトップページで使用しています。

- オフィスごとに複数人が入る場合があります

```jade
ul.office-BoxA
  li.office-BoxA_Item
    h2.office-BoxA_Country Great Britain
    p.office-BoxA_CompanyName KYOCERA Fineceramics Ltd.
    p.office-BoxA_Text
      | Prospect House, Archipelago

      br
      | Lyon Way, Frimley

      br
      | Surrey GU16 7ER
    p.office-BoxA_Text
      | Phone: +44 (0)1276 - 69 34 50
      br
      | Fax: +44 (0)1276 - 69 34 60
    a.office-BoxA_Link(href="#") http://www.xxxx.com
      span.office-BoxA_IconExternal(aria-hidden="true")
    a.office-BoxA_Mail(href="mailto:salessupport@kyocera.de")
      span.office-BoxA_MailIcon(aria-hidden="true")
      span.office-BoxA_MailText salessupport@kyocera.de
    p.office-BoxA_Text Contact person: Jens Wittau
  li.office-BoxA_Item
    h2.office-BoxA_Country France
    p.office-BoxA_CompanyName KYOCERA Fineceramics SAS
    p.office-BoxA_Text
      | Parc Icade Orly - Rungis
      br
      | 21 rue de Villeneuve
      br
      | 94150 Rungis
    p.office-BoxA_Text
     | Phone: +33 (0)1 41 73 73 30
     br
     | Fax: +33 (0)1 41 73 73 59
    a.office-BoxA_Link(href="#") http://www.xxxx.com
      span.office-BoxA_IconExternalB(aria-hidden="true")
    a.office-BoxA_Mail(href="mailto:sales.france@kyocera.de")
      span.office-BoxA_MailIcon(aria-hidden="true")
      span.office-BoxA_MailText sales.france@kyocera.de
    p.office-BoxA_Text Contact person: Jens Wittau
  li.office-BoxA_Item
    h2.office-BoxA_Country Germany
    p.office-BoxA_CompanyName KYOCERA Fineceramics GmbH
    ul.office-BoxA_Grid
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Fritz-Müller-Straße 27
          br
          | 73730 Esslingen
        p.office-BoxA_Text
          | Phone: +49 (0)711 - 93 93 4-0
          br
          | Fax: +49 (0)711 - 93 93 4-950
        a.office-BoxA_Link(href="#") http://www.xxxx.com
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
      li.office-BoxA_GridItem
        p.office-BoxA_Text
          | Hammfelddamm 6
          br
          | 41460 Neuss
        p.office-BoxA_Text
          | Phone: +49 (0)2131 - 16 37-0
          br
          | Fax: +49 (0)2131 - 16 37-150
        a.office-BoxA_Link(href="#") http://www.xxxx.com
        a.office-BoxA_Mail(href="mailto:info@kyocera.de")
          span.office-BoxA_MailIcon(aria-hidden="true")
          span.office-BoxA_MailText info@kyocera.de
        p.office-BoxA_Text Contact person: Jens Wittau
```

`.sw-Heading3A`の入れ子になっている場合は、`.office-BoxA_CompanyNameB`を使用することもできます。

```jade
section.l-Section3
  h3.sw-Heading3A I. Controller/Contact
  p.sw-Text Controller, according to the applicable data protection law, is
  ul.office-BoxA
    li.office-BoxA_Item
      p.office-BoxA_CompanyNameB KYOCERA Fineceramics GmbH
      p.office-BoxA_Text
        | Fritz-Müller-Straße 27
        br
        | 73730 Esslingen
      p.office-BoxA_Text
        | Phone: +49 (0)711 - 93 93 4-0
        br
        | Fax: +49 (0)711 - 93 93 4-950
      a.office-BoxA_Mail(href="mailto:webmaster@kyocera.de")
        span.office-BoxA_MailIcon(aria-hidden="true")
        span.office-BoxA_MailText webmaster@kyocera.de
      p.sw-Text Handelsregisternummer: HRB 210 334
      p.sw-Text Geschäftsführer: Shoichi Aoki, Masafumi Ikeuchi, Ken Ishii, Koichi Kano, Shigeru Koyama, Yusuke Mizukami, Rafael Schroeer, Hideo Tanimoto, Goro Yamaguchi
      p.sw-Text For any questions you may have regarding the processing of your personal data or data protection in general, please contact us as stated above or write an email at
        a.sw-Link(href="mailto:privacy@kyocera.de") privacy@kyocera.de.
```
*/
.office-BoxA {
  height: 100%;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA {
    margin-top: 2.5rem;
  }
}

.office-BoxA > :last-child {
  margin-bottom: 0;
}

.cms-Component_Editor .office-BoxA {
  height: auto;
}

.office-BoxA_Item:nth-of-type(n + 2)::before {
  content: "";
  display: block;
  margin-top: 1.875rem;
  padding-bottom: 1.875rem;
  border-top: 1px solid #d8d8d8;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA_Item:nth-of-type(n + 2)::before {
    margin-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

.office-BoxA_Item > :last-child {
  margin-bottom: 0;
}

.office-BoxA_Item > .sw-Image {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA_Item > .sw-Image {
    margin-top: 3.125rem;
  }
}

.office-BoxA_Country {
  margin-bottom: 1.875rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

.office-BoxA_CompanyName {
  position: relative;
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #df0523;
}

.office-BoxA_CompanyNameB {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  color: #444;
}

.office-BoxA_Grid {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA_Grid {
    margin-left: -1.875rem;
  }
}

.office-BoxA_GridItem {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA_GridItem {
    padding-left: 1.875rem;
  }
  .office-BoxA_GridItem:nth-of-type(odd) {
    -webkit-flex-basis: 47.1555%;
        -ms-flex-preferred-size: 47.1555%;
            flex-basis: 47.1555%;
    max-width: 47.1555%;
  }
  .office-BoxA_GridItem:nth-of-type(even) {
    -webkit-flex-basis: 52.8445%;
        -ms-flex-preferred-size: 52.8445%;
            flex-basis: 52.8445%;
    max-width: 52.8445%;
  }
}

.office-BoxA_GridItem:nth-of-type(n + 2) {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .office-BoxA_GridItem:nth-of-type(n + 2) {
    margin-top: 0;
  }
}

.office-BoxA_GridItem > :last-child {
  margin-bottom: 0;
}

.office-BoxA_Text {
  margin-bottom: 0.625rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #444;
}

.office-BoxA_Link {
  display: inline-block;
  margin-bottom: 0.3125rem;
  text-decoration: none;
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.4;
  color: #df0523;
}

.office-BoxA_Link:hover {
  text-decoration: underline;
}

.office-BoxA_IconExternal {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_IconExternal::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_IconExternalB {
  display: inline;
  margin-left: 0.25rem;
  font-size: 0.6875rem;
}

.office-BoxA_IconExternalB::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Mail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 1em;
  text-decoration: none;
  word-break: break-all;
  font-size: 1rem;
  line-height: 1.2;
  color: #df0523;
}

.office-BoxA_Mail:hover {
  text-decoration: underline;
}

.office-BoxA_MailIcon {
  position: relative;
  height: 1rem;
  margin-top: 0.2em;
  margin-right: 0.375rem;
  font-size: 1rem;
}

.office-BoxA_MailIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxA_Form {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1em;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: #df0523;
}

.office-BoxA_Form:hover {
  text-decoration: underline;
}

.office-BoxA_FormIcon {
  position: relative;
  margin-left: 0.4375rem;
  font-size: 0.75rem;
}

.office-BoxA_FormIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

/*
---
name: office-BoxB
namespace: office-
category: Block
id: BOX-1A
---

<span class="sw-Label">BOX-1A</span>

ProductsのSales Office一覧です。

- オフィスごとに複数人が入る場合があります


```jade
ul.l-Grids.l-Grids-col2Lg
  li.l-Grids_Item
    .office-BoxB
      p.office-BoxB_Country Great Britain
      h3.office-BoxB_CompanyName KYOCERA Fineceramics Ltd.
      p.office-BoxB_Text
        | Prospect House, Archipelago
        br
        | Lyon Way, Frimley
        br
        | Surrey GU16 7ER
      p.office-BoxB_Text
        | Phone: +44 (0)1276 - 69 34 50
        br
        | Fax: +44 (0)1276 - 69 34 60
      a.office-BoxB_Mail(href="mailto:salessupport@kyocera.de")
        span.office-BoxB_MailIcon(aria-hidden="true")
        span.office-BoxB_MailText salessupport@kyocera.de
  li.l-Grids_Item
    .office-BoxB
       p.office-BoxB_Country France
       h3.office-BoxB_CompanyName KYOCERA Fineceramics SAS
       p.office-BoxB_Text
         | Parc Icade Orly - Rungis

         br
         | 21 rue de Villeneuve
         br
         | 94150 Rungis
       p.office-BoxB_Text
         | Phone: +33 (0)1 41 73 73 30
         br
         | Fax: +33 (0)1 41 73 73 59
       a.office-BoxB_Mail(href="mailto:sales.france@kyocera.de")
         span.office-BoxB_MailIcon(aria-hidden="true")
         span.office-BoxB_MailText sales.france@kyocera.de
ul.l-Grids
  li.l-Grids_Item
    .office-BoxB
       p.office-BoxB_Country Germany
       h3.office-BoxB_CompanyName KYOCERA Fineceramics GmbH
       ul.office-BoxB_List
         li.office-BoxB_Item
           p.office-BoxB_Text
             | Fritz-Müller-Straße 27
             br
             | 73730 Esslingen
           p.office-BoxB_Text
            | Phone: +33 (0)1 41 73 73 30
            br
            | Fax: +33 (0)1 41 73 73 59
           a.office-BoxB_Mail(href="mailto:info@kyocera.de")
             span.office-BoxB_MailIcon(aria-hidden="true")
             span.office-BoxB_MailText info@kyocera.de
         li.office-BoxB_Item
           p.office-BoxB_Text
             | Hammfelddamm 6
             br
             | 41460 Neuss
           p.office-BoxB_Text
             | Phone: +49 (0)2131 - 16 37-0
             br
             | Fax: +49 (0)2131 - 16 37-150
           a.office-BoxB_Form(href="#")
             span.office-BoxB_FormText Contact Us
             span.office-BoxB_FormIcon(aria-hidden="true")
```
*/
.office-BoxB {
  height: 100%;
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
  padding: 1.875rem 2.5rem;
  background: #f2f4f6;
}

@media print, screen and (min-width: 768px) {
  .office-BoxB {
    padding: 2rem 2.5rem 1.875rem;
  }
}

.office-BoxB > :last-child {
  margin-bottom: 0;
}

.office-BoxB_Country {
  margin-bottom: 0.4375rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: #888;
}

.office-BoxB_CompanyName {
  position: relative;
  margin-bottom: 0.9375rem;
  padding-bottom: 0.9375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  color: #444;
}

.office-BoxB_CompanyName::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 1px;
  border-top: 1px solid #bcbcbc;
}

.office-BoxB_List {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

.office-BoxB_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 1024px) {
  .office-BoxB_Item:nth-of-type(odd) {
    -webkit-flex-basis: 47.1555%;
        -ms-flex-preferred-size: 47.1555%;
            flex-basis: 47.1555%;
    max-width: 47.1555%;
  }
  .office-BoxB_Item:nth-of-type(even) {
    -webkit-flex-basis: 52.8445%;
        -ms-flex-preferred-size: 52.8445%;
            flex-basis: 52.8445%;
    max-width: 52.8445%;
  }
}

.office-BoxB_Item:nth-of-type(n + 2) {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 1024px) {
  .office-BoxB_Item:nth-of-type(n + 2) {
    margin-top: 0;
  }
}

.office-BoxB_Text {
  margin-bottom: 1em;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #444;
}

.office-BoxB_Mail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1em;
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #df0523;
}

.office-BoxB_Mail:hover {
  text-decoration: underline;
}

.office-BoxB_MailIcon {
  position: relative;
  height: 1.0625rem;
  margin-right: 0.4375rem;
  font-size: 1.0625rem;
}

.office-BoxB_MailIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxB_Form {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1em;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #df0523;
}

.office-BoxB_Form:hover {
  text-decoration: underline;
}

.office-BoxB_FormIcon {
  position: relative;
  height: 0.75rem;
  margin-left: 0.4375rem;
  font-size: 0.75rem;
}

.office-BoxB_FormIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

/*
---
name: office-BoxC
namespace: office-
category: Block
id: [BOX-1B, BOX-2B]
---

<span class="sw-Label">BOX-1B</span><span class="sw-Label">BOX-2B</span>

サイドナビ用のSales Office一覧です。


```jade
.office-BoxC
  h3.office-BoxC_CompanyName Contact for journalists
  p.office-BoxC_Text
   | Daniela Faust
   br
   |
Manager Corporate
   br
   | Communications
  a.office-BoxC_Mail(href="mailto:daniela.faust@kyocera.de")
    span.office-BoxC_MailIcon(aria-hidden="true")
    span.office-BoxC_MailText daniela.faust@kyocera.de

.office-BoxC
  h3.office-BoxC_CompanyName Contact for journalists
  a.office-BoxC_Form(href="https://contact.kyocera.co.jp/inquiry/us/others/input.html")
    span.office-BoxB_FormText Inquiries by E-mail
    span.office-BoxC_FormIcon(aria-hidden="true")
```
*/
.office-BoxC {
  margin-top: 0.9375rem;
  margin-bottom: 0.9375rem;
  padding: 1.5625rem 1.25rem;
  background: #f2f4f6;
}

@media print, screen and (min-width: 1024px) {
  .office-BoxC {
    margin-top: 1.625rem;
    margin-bottom: 1.625rem;
  }
}

.office-BoxC > :last-child {
  margin-bottom: 0;
}

.office-BoxC_CompanyName {
  position: relative;
  margin-bottom: 0.9375rem;
  padding-bottom: 0.9375rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.375;
  color: #444;
}

.office-BoxC_CompanyName::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 1px;
  border-top: 1px solid #bcbcbc;
}

.office-BoxC_Text {
  margin-bottom: 1em;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
  color: #444;
}

.office-BoxC_Mail {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: #df0523;
}

.office-BoxC_Mail:hover {
  text-decoration: underline;
}

.office-BoxC_MailIcon {
  position: relative;
  height: 0.8125rem;
  margin-right: 0.375rem;
  font-size: 1rem;
}

.office-BoxC_MailIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.2em;
}

.office-BoxC_Form {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 1em;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #df0523;
}

.office-BoxC_Form:hover {
  text-decoration: underline;
}

.office-BoxC_FormIcon {
  position: relative;
  height: 0.75rem;
  margin-left: 0.4375rem;
  font-size: 0.75rem;
}

.office-BoxC_FormIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.3em;
}

.office-BoxC_MailText {
  word-break: break-all;
}

/*
---
name: product-BoxA
namespace: product-
category: Block
id: [BOX-8A, BOX-8B, BOX-8C]
---

Products Box

<span class="sw-Label">BOX-8A</span>

- タブレット以降で横並びになります

```jade
ul.product-BoxA
  li.product-BoxA_Item
    .product-BoxA_Box.product-BoxA-BoxMediaMd
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_426.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading BB-100
        p.product-BoxA_Text Flexible cutting board,<br>
plastics<br>
Size: 37 x 25 x 0.2 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
```

<span class="sw-Label">BOX-8B</span>

```jade
ul.product-BoxA.product-BoxA-col2Md
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_426.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading BB-100
        p.product-BoxA_Text Flexible cutting board,<br>
plastics<br>
Size: 37 x 25 x 0.2 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_426.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading BB-100
        p.product-BoxA_Text Flexible cutting board,<br>
plastics<br>
Size: 37 x 25 x 0.2 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
```

<span class="sw-Label">BOX-8C</span>

```jade
ul.product-BoxA.product-BoxA-col3Md
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-50-CF
        p.product-BoxA_Text Multi-purpose ceramic mill;
adjustable ceramic grinding gear, with aroma lid, grinds wet salt<br><br>Height: 17 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-40
        p.product-BoxA_Text Ceramic slim coffee grinder;
adjustable ceramic grinding gear, with a two-piece cover for easy filling<br><br>Height: 19.5 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-25D-BK
        p.product-BoxA_Text Ceramic dual mill;
adjustable ceramic grinding gear, grinds wet salt <br>
SHeight: 20 cm
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-50-CF
        p.product-BoxA_Text Multi-purpose ceramic mill;
adjustable ceramic grinding gear, with aroma lid, grinds wet salt<br><br>Height: 17 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-40
        p.product-BoxA_Text Ceramic slim coffee grinder;
adjustable ceramic grinding gear, with a two-piece cover for easy filling<br><br>Height: 19.5 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
  li.product-BoxA_Item
    .product-BoxA_Box
      .product-BoxA_Head
        span.product-BoxA_Image
          img(src="/assets/img/common/img_690_690.png" alt)
      .product-BoxA_Body
        h3.product-BoxA_Heading CM-25D-BK
        p.product-BoxA_Text Ceramic dual mill;
adjustable ceramic grinding gear, grinds wet salt <br>
SHeight: 20 cm
        ul.product-BoxA_Colors
          li.product-BoxA_Color
            span.product-BoxA_ColorBlack(aria-label="Black")
          li.product-BoxA_Color
            span.product-BoxA_ColorRed(aria-label="Red")
          li.product-BoxA_Color
            span.product-BoxA_ColorGreen(aria-label="Green")
          li.product-BoxA_Color
            span.product-BoxA_ColorOrange(aria-label="Orange")
          li.product-BoxA_Color
            span.product-BoxA_ColorWhite(aria-label="White")
          li.product-BoxA_Color
            span.product-BoxA_ColorGray(aria-label="Gray")
          li.product-BoxA_Color
            span.product-BoxA_ColorPink(aria-label="Pink")
```
*/
.product-BoxA {
  -js-display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-top: 2.5rem;
  margin-bottom: 1.875rem;
  margin-left: -0.9375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .product-BoxA {
    margin-top: 3.75rem;
    margin-left: -1.875rem;
  }
}

.product-BoxA_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
  /* 1 Column */
}

@media print, screen and (min-width: 768px) {
  .product-BoxA_Item {
    padding-left: 1.875rem;
  }
}

.product-BoxA_Item > :first-child {
  margin-top: 0;
}

.product-BoxA_Item > :last-child {
  margin-bottom: 0;
}

.product-BoxA_Item:nth-of-type(n + 2) {
  margin-top: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .product-BoxA-col2Md > .product-BoxA_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
  }
  .product-BoxA-col2Md > .product-BoxA_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .product-BoxA-col2Md > .product-BoxA_Item:nth-of-type(n + 3) {
    margin-top: 3.75rem;
  }
  .product-BoxA-col3Md > .product-BoxA_Item {
    -webkit-flex-basis: 33.33333%;
        -ms-flex-preferred-size: 33.33333%;
            flex-basis: 33.33333%;
    max-width: 33.33333%;
  }
  .product-BoxA-col3Md > .product-BoxA_Item:nth-of-type(n + 1) {
    margin-top: 0;
  }
  .product-BoxA-col3Md > .product-BoxA_Item:nth-of-type(n + 4) {
    margin-top: 3.75rem;
  }
}

.product-BoxA_Box {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media print, screen and (min-width: 768px) {
  .product-BoxA-BoxMediaMd {
    margin-left: -1.875rem;
  }
}

.product-BoxA_Head {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
}

@media print, screen and (min-width: 768px) {
  .product-BoxA-BoxMediaMd .product-BoxA_Head {
    -webkit-flex-basis: 58.33333%;
        -ms-flex-preferred-size: 58.33333%;
            flex-basis: 58.33333%;
    max-width: 58.33333%;
    padding-left: 1.875rem;
  }
}

.product-BoxA_Body {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding: 0.625rem 1.25rem 0;
}

@media print, screen and (min-width: 768px) {
  .product-BoxA_Body {
    padding: 0.625rem 0 0;
  }
}

@media print, screen and (min-width: 768px) {
  .product-BoxA-BoxMediaMd .product-BoxA_Body {
    -webkit-flex-basis: 41.66667%;
        -ms-flex-preferred-size: 41.66667%;
            flex-basis: 41.66667%;
    max-width: 41.66667%;
    margin-top: 0;
    padding: 0 1.25rem 0 1.875rem;
  }
}

.product-BoxA_Heading {
  margin-bottom: 0.625rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: #df0523;
}

.product-BoxA_Text {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
}

.product-BoxA_Colors {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-left: 0;
  list-style-type: none;
}

.product-BoxA_Color {
  margin-right: 0.4375rem;
}

.product-BoxA_ColorBlack, .product-BoxA_ColorRed, .product-BoxA_ColorGreen, .product-BoxA_ColorOrange, .product-BoxA_ColorGray, .product-BoxA_ColorPink, .product-BoxA_ColorWhite {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border: 9px solid #000;
  border-radius: 50%;
}

.product-BoxA_ColorRed {
  border-color: #c2100d;
}

.product-BoxA_ColorGreen {
  border-color: #859953;
}

.product-BoxA_ColorOrange {
  border-color: #f4961a;
}

.product-BoxA_ColorGray {
  border-color: #bcbcbc;
}

.product-BoxA_ColorPink {
  border-color: #f1add2;
}

.product-BoxA_ColorWhite {
  position: relative;
  width: 1.0625rem;
  height: 1.0625rem;
  margin-top: 0.0625rem;
  border: 8.5px solid #000;
  border-color: #fff;
  box-shadow: 0 0 0 1px #dadada;
}

.result-Contents {
  padding-bottom: 2.5rem;
}

@media print, screen and (min-width: 768px) {
  .result-Contents {
    padding-top: 0.9375rem;
    padding-bottom: 3.75rem;
  }
}

.result-Contents_Item {
  padding: 1.25rem 0;
  border-bottom: 1px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .result-Contents_Item {
    padding: 2.1875rem 0;
  }
}

@media print, screen and (min-width: 768px) {
  .result-Contents_Item:after {
    content: "";
    display: block;
    clear: both;
  }
}

.result-Contents_Image {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .result-Contents_Image {
    display: block;
    float: left;
    width: 12.5rem;
    padding-right: 1.875rem;
  }
}

.result-Contents_Image img {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .result-Contents_body {
    overflow: hidden;
  }
}

.result-Contents_Title {
  margin-bottom: 0.3125rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000;
}

@media print, screen and (min-width: 768px) {
  .result-Contents_Title {
    font-size: 1.25rem;
  }
}

.result-Contents_Title .SS_highlight {
  font-weight: 700;
}

.result-Contents_Link {
  margin-bottom: 0.625rem;
}

.result-Contents_Link a {
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #df0523;
}

@media print, screen and (min-width: 768px) {
  .result-Contents_Link a {
    line-height: 1.5;
  }
}

.result-Contents_Link a:hover {
  text-decoration: underline;
}

.result-Contents_Link a .SS_highlight {
  font-weight: 700;
}

.result-Contents_Link a[href*=".pdf"]::after {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  height: 0.9375rem;
  margin-left: 0.375rem;
  font-size: 0.9375rem;
}

.result-Contents_Summary {
  margin-bottom: 0.625rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #666;
}

.result-Contents_Summary::after {
  content: "…";
}

.result-Contents_Summary .SS_highlight {
  font-weight: 700;
}

.result-Contents_LastModified {
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #666;
}

.result-Footer {
  padding-top: 1.5rem;
}

@media print, screen and (min-width: 768px) {
  .result-Footer {
    padding-top: 2.5rem;
  }
}

.result-Footer_Inner {
  margin: auto;
}

.result-NoResult {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media print, screen and (min-width: 768px) {
  .result-NoResult {
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
  }
}

.result-NoResult > :first-child {
  margin-top: 0;
}

.result-NoResult > :last-child {
  margin-bottom: 0;
}

.result-Pager_Sp {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .result-Pager_Sp {
    display: none;
  }
}

.result-Pager_Pc {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .result-Pager_Pc {
    display: block;
  }
}

.result-Pager_Prev,
.result-Pager_Next {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  text-align: center;
}

.result-Pager_Prev a,
.result-Pager_Next a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 3rem;
  height: 2.8125rem;
  font-size: 0;
  color: #999;
}

@media print, screen and (min-width: 768px) {
  .result-Pager_Prev a,
  .result-Pager_Next a {
    transition-duration: 0.3s;
  }
  .result-Pager_Prev a:hover,
  .result-Pager_Next a:hover {
    color: #df0523;
  }
}

.result-Pager_Prev a[aria-disabled],
.result-Pager_Next a[aria-disabled] {
  opacity: 0;
  pointer-events: none;
}

.result-Pager_PrevIcon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.375rem;
  margin: auto;
  font-size: 1.375rem;
  color: #999;
}

.result-Pager_PrevIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.4em;
}

.result-Pager_PrevDisabled + .result-Pager_PrevIcon {
  display: none;
}

.result-Pager_NextIcon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.375rem;
  margin: auto;
  font-size: 1.375rem;
  color: #999;
}

.result-Pager_NextIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.4em;
}

.result-Pager_NextDisabled + .result-Pager_NextIcon {
  display: none;
}

.result-Pager_PrevDisabled,
.result-Pager_NextDisabled {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.result-Pager_Location {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.result-Pager_LocationItem {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  font-weight: 600;
  box-shadow: 0 -1px 0 0 #e9e9e9 inset;
}

.result-Pager_LocationItem:first-child {
  color: #df0523;
}

.result-Pager_LocationItem:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #df0523;
  pointer-events: none;
}

.result-Pager_List {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .result-Pager_List {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.result-Pager_List > li {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  font-weight: 600;
  box-shadow: 0 -1px 0 0 #e9e9e9 inset;
  list-style: none;
}

.result-Pager_List > li.current::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #df0523;
  pointer-events: none;
}

.result-Pager_List a {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #666;
  transition-duration: 0.3s;
}

.result-Pager_List a:hover {
  text-decoration: none;
  color: #df0523;
}

.result-Pager_List .result-Pager_ListPrev,
.result-Pager_List .result-Pager_ListNext {
  box-shadow: 0 -1px 0 0 transparent inset;
}

.result-Pager_List .result-Pager_ListPrev a,
.result-Pager_List .result-Pager_ListNext a {
  position: relative;
  font-size: 0;
}

.result-Pager_ListPrev a::before,
.result-Pager_ListNext a::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: relative;
  position: absolute;
  top: -0.4em;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.375rem;
  margin: auto;
  text-align: center;
  font-size: 1.375rem;
  color: #999;
  transition-duration: 0.3s;
}

.result-Pager_ListPrev a:hover::before,
.result-Pager_ListNext a:hover::before {
  color: #df0523;
}

.result-Pager_ListPrev a::before {
  content: "";
}

.result-Pager_ListNext a::before {
  content: "";
}

.results-Result {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  padding-bottom: 1.3125rem;
  text-align: center;
  border-bottom: 1px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .results-Result {
    padding-bottom: 0.625rem;
    text-align: left;
  }
}

.results-Result_Hits {
  width: 100%;
  margin-bottom: 1em;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: #444;
}

@media print, screen and (min-width: 768px) {
  .results-Result_Hits {
    width: auto;
    margin-right: auto;
    margin-bottom: 0;
    padding-right: 2.5rem;
  }
}

.results-Result_Hits > strong {
  font-size: 1rem;
  line-height: 1.3125;
}

.results-Result_PerPage {
  display: none;
}

@media print, screen and (min-width: 768px) {
  .results-Result_PerPage {
    display: block;
    padding-right: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.3;
  }
}

.results-Result_PerPage span {
  color: #999;
}

.results-Result_PerPage a {
  text-decoration: none;
  color: #df0523;
}

.results-Result_PerPage a:hover {
  text-decoration: underline;
}

.results-Result_Sort {
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #999;
}

@media print, screen and (min-width: 768px) {
  .results-Result_Sort {
    width: auto;
  }
}

.results-Result_Sort a {
  text-decoration: none;
  color: #df0523;
}

.results-Result_Sort a:hover {
  text-decoration: underline;
}

.results-Search {
  padding-top: 0.875rem;
  padding-bottom: 1.5rem;
}

@media print, screen and (min-width: 768px) {
  .results-Search {
    padding-top: 2.75rem;
    padding-bottom: 2.5rem;
  }
}

.results-Search_Form {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media print, screen and (min-width: 768px) {
  .results-Search_Form {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.results-Search_Query {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  position: relative;
  max-width: 100%;
  margin-bottom: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .results-Search_Query {
    -webkit-flex-basis: 68.37607%;
        -ms-flex-preferred-size: 68.37607%;
            flex-basis: 68.37607%;
    max-width: 68.37607%;
    margin-bottom: 0;
    padding-right: 1.875rem;
  }
}

.results-Search_Query > input {
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  height: 3.125rem;
  padding: 0 0.625rem;
  font-size: 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.1875rem;
  background-color: #fff;
  box-shadow: 1px 1px 6px -3px #9e9e9e inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /**
   * Normalize.cssのリセットをします。
   */
  padding-left: 2.75rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  border: 1px solid #e9e9e9;
  background: #f8f8f8;
}

.results-Search_Query > input[type="search"] {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.results-Search_Query > input::-webkit-input-placeholder {
  color: #999;
}

.results-Search_Query > input:-ms-input-placeholder {
  color: #999;
}

.results-Search_Query > input::-ms-input-placeholder {
  color: #999;
}

.results-Search_Query > input::placeholder {
  color: #999;
}

.results-Search_Query > input:focus {
  outline-width: 0;
  border-color: #1589ee;
  box-shadow: 0 0 6px 3px #1589ee;
}

.results-Search_Query > input-error {
  background-color: #ffecec;
}

.results-Search_Query > input:disabled {
  background-color: #ddd;
  opacity: 0.5;
  cursor: not-allowed;
}

.results-Search_QueryIcon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.75rem;
  height: 1.5rem;
  margin: auto;
  font-size: 1.5rem;
  color: #444;
}

.results-Search_QueryIcon::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  content: "";
  position: relative;
  top: -0.35em;
}

.results-Search_Query .Search_SubmitButton {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.results-Search_Category {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .results-Search_Category {
    -webkit-flex-basis: 31.62393%;
        -ms-flex-preferred-size: 31.62393%;
            flex-basis: 31.62393%;
    max-width: 31.62393%;
    text-align: left;
  }
}

.results-Search_Category > input {
  /* デフォルトのラジオボタンを非表示にする。 */
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.results-Search_Category > input + label {
  display: inline-block;
  position: relative;
  padding-left: 1.6875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
  cursor: pointer;
}

.results-Search_Category > input + label::before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  position: absolute;
  top: 1px;
  left: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin: auto;
  border: 1px solid #dadada;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-size: contain;
  background-repeat: no-repeat;
}

.results-Search_Category > input:focus + label::before {
  border-color: #1589ee;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px #1589ee;
}

.results-Search_Category > input:focus:not(.focus-ring) + label::before {
  border-color: #767676;
  box-shadow: none;
}

.results-Search_Category > input:checked + label::before {
  border: 0;
  background-image: url("../img/common/icon_radio_on.svg");
}

.results-Search_Category > input:disabled,
.results-Search_Category > input + label[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.results-Search_Category > label {
  margin-right: 0.9375rem;
}

.sitemap-Layout {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-left: -0.9375rem;
  padding-top: 1.125rem;
  padding-bottom: 4.375rem;
  padding-left: 0;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .sitemap-Layout {
    margin-left: -1.875rem;
    padding-top: 3.625rem;
    padding-bottom: 5.625rem;
  }
}

.sitemap-Layout_Item {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  max-width: 100%;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  .sitemap-Layout_Item {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    max-width: 50%;
    padding-left: 1.875rem;
  }
}

.sitemap-Layout_Item:first-of-type::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin: 1.875rem 0;
  border-top: 1px solid #dadada;
}

@media print, screen and (min-width: 768px) {
  .sitemap-Layout_Item:first-of-type::after {
    display: none;
  }
}

.sitemap-Layout_Item > :first-child {
  margin-top: 0;
}

.sitemap-Layout_Item > :last-child {
  margin-bottom: 0;
}

.ss-group-field {
  margin: 0;
  padding: 0;
  border: none;
}

.results-Search_Category input {
  /* デフォルトのラジオボタンを非表示にする。 */
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.results-Search_Category input + label {
  display: inline-block;
  position: relative;
  padding-left: 1.6875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #444;
  cursor: pointer;
}

.results-Search_Category input + label::before {
  content: "";
  display: inline-block;
  vertical-align: text-bottom;
  position: absolute;
  top: 1px;
  left: 0;
  width: 1.1875rem;
  height: 1.1875rem;
  margin: auto;
  border: 1px solid #dadada;
  border-radius: 50%;
  background-color: #f5f5f5;
  background-size: contain;
  background-repeat: no-repeat;
}

.results-Search_Category input:focus + label::before {
  border-color: #1589ee;
  border-radius: 50%;
  box-shadow: 0 0 6px 3px #1589ee;
}

.results-Search_Category input:focus:not(.focus-ring) + label::before {
  border-color: #767676;
  box-shadow: none;
}

.results-Search_Category input:checked + label::before {
  border: 0;
  background-image: url("../img/common/icon_radio_on.svg");
}

.results-Search_Category input:disabled,
.results-Search_Category input + label[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.results-Search_Category label {
  margin-right: 1.125rem;
}

.results-Result_Hits strong {
  font-size: 1rem;
  line-height: 1.3125;
}

.results-Result_PerPage .SS_hitCount {
  display: inline;
}

.results-Result_PerPage input {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.results-Result_PerPage label {
  position: relative;
  text-decoration: none;
  color: #df0523;
}

.results-Result_PerPage label:not(:last-child) {
  padding-right: 1em;
}

.results-Result_PerPage label:not(:last-child)::after {
  position: absolute;
  right: 0.25em;
  content: "|";
  display: inline;
  color: #000;
}

.results-Result_PerPage input:checked + label {
  color: #999;
}

.results-Result_PerPage input:not(:checked) + label {
  cursor: pointer;
}

.results-Result_PerPage input:not(:checked) + label:hover {
  text-decoration: underline;
}

.results-Result_PerPage input.focus-ring + label {
  box-shadow: 0 0 6px 3px #1589ee;
}

.results-Result_Sort :not(.selected) {
  text-decoration: none;
  color: #df0523;
  cursor: pointer;
}

.results-Result_Sort :not(.selected):hover {
  text-decoration: underline;
}

.results-Result_Sort #ss-sort-match,
.results-Result_Sort #ss-sort-date {
  display: inline !important;
}

[id="ss-result"] {
  padding-right: 0.9375rem;
  padding-bottom: 2.5rem;
  padding-left: 0.9375rem;
}

@media print, screen and (min-width: 768px) {
  [id="ss-result"] {
    padding-top: 0.9375rem;
    padding-bottom: 3.75rem;
  }
}

.result-Contents_Title .ss-highlight,
.result-Contents_Link .ss-highlight,
.result-Contents_Summary .ss-highlight {
  font-weight: 700;
}

.ss-pagination {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 1.5rem;
  padding-left: 0;
  text-align: center;
  list-style-type: none;
}

@media print, screen and (min-width: 768px) {
  .ss-pagination {
    padding-top: 2.5rem;
  }
}

.ss-pagination .ss-page {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  font-weight: 600;
  box-shadow: 0 -1px 0 0 #e9e9e9 inset;
  cursor: pointer;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .ss-pagination .ss-page:hover {
    color: #df0523;
  }
}

.ss-pagination .ss-page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-bottom: 2px solid transparent;
  pointer-events: none;
}

.ss-pagination .ss-page.ss-select-page {
  pointer-events: none;
}

@media print, screen and (min-width: 768px) {
  .ss-pagination .ss-page.ss-select-page:hover {
    color: #df0523;
  }
}

.ss-pagination .ss-page.ss-select-page::before {
  border-bottom-color: #df0523;
}

.ss-pagination .ss-page-prev,
.ss-pagination .ss-page-next {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 3rem;
  height: 2.8125rem;
  font-weight: 600;
  color: transparent;
  cursor: pointer;
  transition-duration: 0.3s;
}

@media print, screen and (min-width: 768px) {
  .ss-pagination .ss-page-prev:hover::before,
  .ss-pagination .ss-page-next:hover::before {
    color: #df0523;
  }
}

.ss-pagination .ss-page-prev::before,
.ss-pagination .ss-page-next::before {
  font-family: "iconfont";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  speak: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.375rem;
  margin: auto;
  font-size: 1.375rem;
  color: #999;
}

.ss-pagination .ss-page-prev::before {
  content: "";
}

.ss-pagination .ss-page-next::before {
  content: "";
}

/*
---
name: top-Inner
namespace: top-
category: Layout
---

トップページ系の上下の余白を管理します。


```jade
.l-Wrapper
  .top-Inner
    p Contents
```
*/
.top-Inner {
  padding-top: 1.875rem;
  padding-bottom: 3.75rem;
}

@media print, screen and (min-width: 768px) {
  .top-Inner {
    padding-top: 3.125rem;
    padding-bottom: 5.625rem;
  }
}

.top-Inner > :first-child {
  margin-top: 0;
}

.top-Inner > :last-child {
  margin-bottom: 0;
}

/**
 * EUのスタイルを一部だけ上書きしたい場合に使う
 * us/Structure/_ModuleName.scss のように作成する
 */
@media print, screen and (min-width: 1024px) {
  .st-GlobalHeader_Logo {
    width: 314px;
  }
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalNav {
    width: calc(100% - 314px - 234px);
  }
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalSiteNav_Link.st-GlobalSiteNav_Link-career + .st-GlobalSiteNav_SubArea .st-GlobalSiteNav_SubItem {
    width: 33.33333%;
  }
}

.home-Events {
  margin-top: 3.75rem;
}

.st-GlobalFooter {
  border-top-width: 0;
}

@media print, screen and (min-width: 1024px) {
  .st-GlobalFooter {
    border-top-width: 1px;
  }
}

.st-Sitemap {
  padding-bottom: 0;
}

@media print, screen and (min-width: 1024px) {
  .st-Sitemap {
    padding-bottom: 2.5rem;
  }
}

/*# sourceMappingURL=site.css.map */