@charset "UTF-8";

/* mixins */

/*doc
---
title: Color
name: Color
category: base css
---


## 基本となるカラースキーム


<div class="cols">
<div class="cols__col cols__col--4" style="height: 200px; padding: 20px; background-color: #17184b; color: #fff;">
Key color
<!-- /cols__col --></div>
<div class="cols__col cols__col--4" style="height: 200px; padding: 20px; background-color: #17184b; color: #fff;">
Key color
<!-- /cols__col --></div>
<div class="cols__col cols__col--4" style="height: 200px; padding: 20px; background-color: #17184b; color: #fff;">
Key color
<!-- /cols__col --></div>
<!-- /cols --></div>

*/

/**
 * variables
 **/

/* base colors */

/*$red-default: #cc3d3d;*/

/*$red-light: #e56d45;*/

/**
 * initialize
 **/

/* default settings */

html {
  position: static;
  font-size: 16px;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

html.modalOpen,
html.mobileNavOpen {
  height: 100%;
  overflow: hidden;
}

body {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  -webkit-text-size-adjust: 100%;
  /*-webkit-font-smoothing: antialiased;*/
  position: relative;
  left: 0;
  height: 100%;
  color: #333;
  font-family: "DENSO W05 Light", "DENSO TP_2017 Light", Helvetica, Arial, sans-serif;
  line-height: 1.55556;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.modalOpen body,
.mobileNavOpen body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

img {
  max-width: 100%;
  vertical-align: top;
}

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

strong {
  color: #e1002a;
}

a {
  color: #4163b1;
  text-decoration: none;
}

a:visited {
  color: #7641b1;
}

a:hover {
  color: #4163b1;
  text-decoration: underline;
}

.hr01 {
  height: 1px;
  margin: 60px 0 0;
  padding: 0;
  border: none;
  background-color: #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.fa {
  /*@include font-size(16);*/
  padding-right: 8px;
  /*font-size: 88.89%;*/
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.fa.fa-external-link {
  padding-right: 0;
  padding-left: 5px;
}

.fa-lg {
  /*font-size: (4em / 3);*/
  font-size: 1.1em;
  line-height: 0.75em;
  vertical-align: -10%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

.fa-facebook-official {
  color: #3b5998;
}

.fa-twitter-square {
  color: #55acee;
}

.fa-google-plus-square {
  color: #dd4b39;
}

.fa-linkedin-square {
  color: #0073b2;
}

.fa-instagram {
  color: #000;
}

.fa-flickr {
  color: #000;
}

.fa-youtube-play {
  color: #cd201f;
}

.fa-rss-square {
  color: #ccc;
}

.noMobile {
  display: block;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

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

.addthis_sharing_toolbox {
  margin-top: 60px;
  text-align: right;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

/*doc
---
title: grid
name: grid
category: grid
---
 
ベースとなる978pxグリッド  
10カラムはレイアウトで使用するため、センター寄せとなる

```block
<div class="cols">
<div class="cols__col cols__col--12">
full column (978px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--7">
7 column (558px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--5">
5 column (390px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--6">
6 column (474px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--6">
6 column (474px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--4">
4 column (306px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--4">
4 column (306px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--4">
4 column (306px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--3">
3 column (222px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--3">
3 column (222px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--3">
3 column (222px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--3">
3 column (222px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<div class="cols__col cols__col--1">
1 column (54px)
<!-- /cols__col --></div>
<!-- /cols --></div>

<div class="cols">
<div class="cols__col cols__col--10">
10 column (center / 810px)
<!-- /cols__col --></div>
<!-- /cols --></div>
```
 
*/

.cols {
  *zoom: 1;
  position: relative;
  z-index: 1;
  clear: left;
  width: 100%;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols:before,
.cols:after {
  content: " ";
  display: table;
}

.cols:after {
  clear: both;
}

.cols--full {
  max-width: 100%;
  padding: 0;
}

.cols--expansion {
  max-width: 1600px;
  padding: 0;
}

.cols--emphasis {
  background-color: #f7f7f7;
  padding: 0;
}

.cols__col {
  position: relative;
  float: left;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cols__col--full {
  float: none;
  width: 100%;
  margin: 0;
}

.cols .cols {
  padding-right: 0;
  padding-left: 0;
}

.ie8 .cols {
  min-width: 978px;
}

.cols__col--1 {
  float: left;
  box-sizing: border-box;
  width: 5.52147%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--1:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--2 {
  float: left;
  box-sizing: border-box;
  width: 14.11043%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--2:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--3 {
  float: left;
  box-sizing: border-box;
  width: 22.69939%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--3:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--4 {
  float: left;
  box-sizing: border-box;
  width: 31.28834%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--4:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--5 {
  float: left;
  box-sizing: border-box;
  width: 39.8773%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--5:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--6 {
  float: left;
  box-sizing: border-box;
  width: 48.46626%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--6:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--7 {
  float: left;
  box-sizing: border-box;
  width: 57.05521%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--7:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--8 {
  float: left;
  box-sizing: border-box;
  width: 65.64417%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--8:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--9 {
  float: left;
  box-sizing: border-box;
  width: 74.23313%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--9:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 {
  float: left;
  box-sizing: border-box;
  width: 82.82209%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10:first-child {
  clear: left;
  margin-left: 0;
}

.ie8 .cols {
  min-width: 810px;
}

.cols__col--10 {
  *zoom: 1;
  float: none;
  /*width: $column-width;*/
  max-width: 810px;
  margin: 0 auto;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10:before,
.cols__col--10:after {
  content: " ";
  display: table;
}

.cols__col--10:after {
  clear: both;
}

.cols__col--10:first-child {
  margin: 0 auto;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--1 {
  width: 6.66667%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--1:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--2 {
  width: 17.03704%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--2:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--3 {
  width: 27.40741%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--3:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--4 {
  width: 37.77778%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--4:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--5 {
  width: 48.14815%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--5:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--6 {
  width: 58.51852%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--6:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--7 {
  width: 68.88889%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--7:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--8 {
  width: 79.25926%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--8:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--9 {
  width: 89.62963%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--9:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--10 {
  width: 100%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--10:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--11 {
  width: 110.37037%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--11:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--10 .cols {
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--12 {
  width: 120.74074%;
  margin-left: 3.7037%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .cols__col--12:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--11 {
  float: left;
  box-sizing: border-box;
  width: 91.41104%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--11:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--12 {
  float: left;
  box-sizing: border-box;
  width: 100%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--12:first-child {
  clear: left;
  margin-left: 0;
}

.cols__col--12 {
  margin: 0 auto;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

/*doc
---
title: accordionBlock01
name: accordionBlock01
category: accordions
---
 
products配下で使用するアコーディオンスタイル
 
```block
<div class="accordionBlock01">
<div class="accordionBlock01__col accordionBlock01__col--oddChild">
<div class="accordionBlock01__header">
<figure class="accordionBlock01__figure"><img alt="" src="http://placehold.it/159x98&amp;text=159 x 98" class="accordionBlock01__img">
</figure>
<h2 class="accordionBlock01__heading">Fuel Injection Electronic Control Unit for Motorcycles</h2>
<!-- /accordionBlock01__header --></div>
<div class="accordionBlock01__content">
<p class="accordionBlock01__text">Hybrid vehicles are driven by multiple power sources, such as an internal combustion engine and an electric motor. A combination of such power sources increases fuel efficiency. The Power Control Unit has an inverter and other devices to regulate the
current flow from the battery to the electric motor. The Power Control Unit is given instructions by the Hybrid Vehicle ECU on how to convert the direct current from the battery to alternating current of the optimal frequency and voltage.</p>
<!-- /accordionBlock01__content --></div>
<div class="accordionBlock01__footer">
<a href="#" class="accordionBlock01__button"><i class="fa fa-chevron-down" title="open"></i></a>
<!-- /accordionBlock01__footer --></div>
<!-- /accordionBlock01__col --></div>
<div class="accordionBlock01__col">
<div class="accordionBlock01__header">
<figure class="accordionBlock01__figure"><img alt="" src="http://placehold.it/159x98&amp;text=159 x 98" class="accordionBlock01__img">
</figure>
<h2 class="accordionBlock01__heading">Inverter (PCU Power Control Unit)</h2>
<!-- /accordionBlock01__header --></div>
<div class="accordionBlock01__content">
<p class="accordionBlock01__text">Hybrid vehicles are driven by multiple power sources, such as an internal combustion engine and an electric motor.</p>
<!-- /accordionBlock01__content --></div>
<div class="accordionBlock01__footer">
<a href="#" class="accordionBlock01__button"><i class="fa fa-chevron-down" title="open"></i></a>
<!-- /accordionBlock01__footer --></div>
<!-- /accordionBlock01 --></div>
```
 
*/

.accordionBlock01 {
  -webkit-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  position: relative;
  *zoom: 1;
  margin: 20px 0 0;
  padding: 0;
}

.accordionBlock01:before,
.accordionBlock01:after {
  content: " ";
  display: table;
}

.accordionBlock01:after {
  clear: both;
}

.accordionBlock01__col {
  -webkit-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /*position: absolute;*/
  float: left;
  width: 50%;
  margin: 0 0 0 -1px;
  padding: 20px 12px 0;
  border-bottom: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}

.accordionBlock01__col:nth-child(odd),
.accordionBlock01__col--oddChild {
  margin-left: 0;
  border-right: 1px solid #e5e5e5;
  border-left: none;
}

.accordionBlock01__col--open .accordionBlock01__content {
  opacity: 1;
  filter: alpha(opacity=100);
}

.accordionBlock01__col--open .accordionBlock01__button .fa {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.ie8 .accordionBlock01__col--open .accordionBlock01__button {
  background-position: 0 0;
}

.accordionBlock01__header {
  *zoom: 1;
  /*min-height: 98px;*/
}

.accordionBlock01__header:before,
.accordionBlock01__header:after {
  content: " ";
  display: table;
}

.accordionBlock01__header:after {
  clear: both;
}

.accordionBlock01__figure {
  float: right;
  width: 159px;
  margin: 0 0 0 12px;
  padding: 0;
}

.accordionBlock01__heading {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
  overflow: hidden;
}

.accordionBlock01__content {
  -webkit-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.accordionBlock01__text {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  margin-top: 16px;
  padding: 0;
}

.accordionBlock01__footer {
  height: 28px;
  margin: 12px 0 0;
  padding: 0;
  text-align: center;
}

.accordionBlock01__button {
  color: #999;
}

.accordionBlock01__button .fa {
  -webkit-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  -moz-transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition: all 0.2s cubic-bezier(0.6, 0.04, 0.98, 0.335);
  padding-right: 0;
}

.accordionBlock01__button:hover,
.accordionBlock01__button:visited {
  color: #999;
}

.accordionBlock01__button:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.ie8 .accordionBlock01__button {
  display: block;
  width: 21px;
  height: 13px;
  margin: 0 auto;
  background: url(/ja/assets/images/icon_arrow_01.png) no-repeat 0 -13px;
}

.ie8 .accordionBlock01__button .fa {
  display: none;
}

/*doc
---
title: carousel01
name: carousel01
category: carousel
---

carouselの基本的なスタイル  
modifier「--auto」を付与することで自動切り替え機能が追加になる。  
自動切り替えon時、インジケータ等をクリックすると、自動切り替え機能はoffになる。  
 
```block
<div class="carousel01">
<div class="carousel01__group">
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<!-- /carousel01__group --></div>
<!-- /carousel01 --></div>

<div class="carousel01 carousel01--auto">
<div class="carousel01__group">
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<div class="carousel01__unit">
<figure class="carousel01__figure">
<a href="/en__dummy__" class="carousel01__link"><img src="http://placehold.it/900x400&amp;text=any x any" alt="" class="carousel01__img">
</a>
</figure>
<div class="carousel01__content">
<h2 class="carousel01__heading">Lorem ipsum</h2>
<p class="carousel01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /carousel01__content --></div>
<!-- /carousel01__unit --></div>
<!-- /carousel01__group --></div>
<!-- /carousel01 --></div>
```
 
*/

.carousel01 {
  -webkit-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  margin: 32px 0 0;
  padding: 0;
  overflow: hidden;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.carousel01__group {
  *zoom: 1;
  -webkit-transition: margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: margin 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.carousel01__group:before,
.carousel01__group:after {
  content: " ";
  display: table;
}

.carousel01__group:after {
  clear: both;
}

.carousel01__unit {
  float: left;
}

.carousel01__figure {
  margin: 0;
  padding: 0;
}

.carousel01__link:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.carousel01__content {
  padding: 20px;
  background-color: #f7f7f7;
}

.carousel01__heading {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.carousel01__text {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  margin-top: 10px;
  padding: 0;
  line-height: 1.25;
}

.carousel01__indicators {
  position: absolute;
  width: 100%;
  text-align: center;
}

.carousel01__indicatorLink {
  display: inline-block;
  padding: 0 4px;
  color: #ccc;
}

.ie8 .carousel01__indicatorLink {
  width: 12px;
  height: 12px;
  background: url(../images/icon_indicator_01.png) no-repeat center center;
}

.ie8 .carousel01__indicatorLink .fa {
  display: none;
}

.carousel01__indicatorLink:hover,
.carousel01__indicatorLink:visited {
  color: #ccc;
}

.carousel01__indicatorLink:hover,
.carousel01__indicatorLink--current {
  color: #e1002a;
}

.carousel01__indicatorLink:hover:visited,
.carousel01__indicatorLink--current:visited {
  color: #e1002a;
}

.carousel01__indicatorLink--current {
  cursor: default;
}

.ie8 .carousel01__indicatorLink--current {
  background-image: url(../images/icon_indicator_01_c.png);
}

.carousel01__indicatorLink .fa {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  font-size: 14px;
}

.carousel01__arrowLink {
  position: absolute;
  top: 40%;
  width: 48px;
  height: 74px;
  margin-top: -37px;
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.7);
  color: #fff;
  text-align: center;
}

.carousel01__arrowLink .fa {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px 0 0 -6px;
}

.ie8 .carousel01__arrowLink .fa,
.ie9 .carousel01__arrowLink .fa {
  display: block;
}

.carousel01__arrowLink:hover,
.carousel01__arrowLink:visited {
  color: #fff;
}

.carousel01__arrowLink:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.carousel01__arrowLink:before,
.carousel01__arrowLink:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 15px;
  height: 3px;
  margin-left: -8px;
  background-color: #fff;
}

.ie8 .carousel01__arrowLink:before,
.ie9 .carousel01__arrowLink:before,
.ie8 .carousel01__arrowLink:after,
.ie9 .carousel01__arrowLink:after {
  display: none;
}

.carousel01__arrowLink:before {
  top: 31px;
}

.carousel01__arrowLink:after {
  top: 40px;
}

.carousel01__arrowLink--prev {
  left: 0;
}

.carousel01__arrowLink--prev:before {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.carousel01__arrowLink--prev:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.carousel01__arrowLink--next {
  right: 0;
}

.carousel01__arrowLink--next:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.carousel01__arrowLink--next:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.carousel01__arrowLink--hidden {
  opacity: 0.3;
  filter: alpha(opacity=30);
  cursor: default;
}

.carousel01__arrowLink--hidden:hover,
.carousel01__arrowLink--hidden:visited {
  opacity: 0.3;
  filter: alpha(opacity=30);
}

/*doc
---
title: box01
name: box01
category: boxes
---

ボックスのベーススタイル

```block
<div class="box01">
Lorem Ipsum
<!-- /box01 --></div>
```

*/

.box01 {
  margin: 12px 0 0;
  padding: 32px;
  border: 1px solid transparent;
  background-color: #f2f2f2;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.box01 > *:first-child {
  margin-top: 0;
}

.box01--alert {
  border-color: #c00;
  background-color: #f00;
}

.box01--warn {
  border-color: #cc0;
  background-color: #ff0;
}

.box01--border {
  padding: 12px;
  border: solid 1px #e5e5e5;
  background-color: #fff;
}

.box01--grayBorder {
  padding: 12px;
  border: solid 1px #e5e5e5;
  background-color: #fff;
  margin-top: 12px;
}

.box01--imagebox {
  padding: 10px;
  border: solid 1px #e5e5e5;
  background-color: #fff;
  margin-top: 5px;
  text-align: center;
}

.box01--adhere {
  margin-top: 8px;
}

/*doc
---
title: box02
name: box02
category: boxes
---

上にボーダーがついただけのボックスのベーススタイル

```block
<div class="box02">
Lorem Ipsum
<!-- /box02 --></div>
```

*/

.box02 {
  margin: 20px 0 0;
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.box02 > *:first-child {
  margin-top: 0;
}

/*doc
---
title: faqBlock01
name: faqBlock01
category: faq
---

FAQのベーススタイル

```block
<div class="faqBlock01">
<h1 class="faqBlock01__heading">h1〜h6まで利用可能</h1>
<div class="faqBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ol class="orderedList01">
<li class="orderedList01__item">list1</li>
<li class="orderedList01__item">list2</li>
<li class="orderedList01__item">list3</li>
<li class="orderedList01__item">list4</li>
</ol>
<!-- /faqBlock01__content --></div>
<!-- /faqBlock01 --></div>
```

*/

.faqBlock01 {
  margin: 12px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.faqBlock01__heading {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 0;
  padding: 0 0 0 1.5em;
}

.faqBlock01__heading:before {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  content: "Q.";
  position: absolute;
  left: 0;
  top: -2px;
  color: #333;
  font-weight: bold;
}

.faqBlock01__heading2 {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 0;
  padding: 0 0 0 1em;
}

.faqBlock01__heading2:before {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  content: "■";
  position: absolute;
  left: 0;
  top: -5px;
  color: #333;
  font-weight: bold;
}

.faqBlock01__content {
  margin: 6px 0 0;
  position: relative;
  padding-left: 1.5em;
}

.faqBlock01__content > *:first-child {
  margin-top: 0;
}

.faqBlock01__content:before {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  content: "A.";
  position: absolute;
  left: 0;
  top: -2px;
  color: #333;
  font-weight: bold;
}

.faqBlock01__content2 {
  margin: 6px 0 0;
  position: relative;
  padding-left: 1em;
}

.faqBlock01__content2 > *:first-child {
  margin-top: 0;
}

.faqBlock01__content2:before {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  content: "・";
  position: absolute;
  left: -4px;
  top: -3px;
  color: #333;
  font-weight: bold;
}

.faqBlock01__content3:before {
  color: red;
}

/*doc
---
title: figureBlock01
name: figureBlock01
category: figures
---

基本的なfigureブロック
captionは省略可能
レイアウトに[.cols](/styleguide/grid.html)を用いることで2〜4カラムで使用可能

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="cols">
<div class="cols__col cols__col--6">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--6">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>
<!-- /cols --></div>
```

```block
<div class="cols">
<div class="cols__col cols__col--4">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--4">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--4">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>
<!-- /cols --></div>
```

```block
<div class="cols">
<div class="cols__col cols__col--3">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--3">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--3">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>

<div class="cols__col cols__col--3">
<div class="figureBlock01">
<div class="figureBlock01__visuals">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<!-- figureBlock01 --></div>
<!-- /cols__col --></div>
<!-- /cols --></div>
```


左右回りこみfigureブロック
figureBlock01\_\_visualsに、modifire「--left」もしくは「--right」を追加
画像サイズは基本的には自由
captionは省略可能
回りこませたいテキストは、.figureBlock01\_\_content内に記載していく
figureBlock01\_\_visualsにmodifier「--40」「--17」を付与すれば画像エリアの場40%、17%が実現可能

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--left">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--left figureBlock01__visuals--44">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--left figureBlock01__visuals--17">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--right">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--right figureBlock01__visuals--44">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

```block
<div class="figureBlock01">
<div class="figureBlock01__visuals figureBlock01__visuals--right figureBlock01__visuals--17">
<figure class="figureBlock01__figure">
<img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="figureBlock01__img">
<figcaption class="figureBlock01__caption">Lorem ipsum</figcaption>
</figure>
<!-- figureBlock01__visuals --></div>
<div class="figureBlock01__content">
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- figureBlock01__content --></div>
<!-- figureBlock01 --></div>
```

*/

.figureBlock01 {
  *zoom: 1;
  margin: 20px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.figureBlock01:before,
.figureBlock01:after {
  content: " ";
  display: table;
}

.figureBlock01:after {
  clear: both;
}

.figureBlock01__visuals {
  margin: 0;
  padding: 0;
}

.figureBlock01__visuals > *:first-child {
  margin-top: 0;
}

.figureBlock01__visuals--center {
  text-align: center;
}

.figureBlock01__visuals--left {
  float: left;
  max-width: 48.46626%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0 30px 0px 0;
}

.cols__col--10 .figureBlock01__visuals--left {
  max-width: 48.14815%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.figureBlock01__visuals--left + .figureBlock01__content {
  margin-top: 0;
}

.figureBlock01__visuals--left + .figureBlock01__content .heading01--lv02 {
  margin-left: 41.5%;
}

.figureBlock01__visuals--left.figureBlock01__visuals--xSmall {
  margin: 0 20px 0px 0;
}

.figureBlock01__visuals--right {
  float: right;
  max-width: 48.46626%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0 0 0px 30px;
}

.cols__col--10 .figureBlock01__visuals--right {
  max-width: 48.14815%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.figureBlock01__visuals--right + .figureBlock01__content {
  margin-top: 0;
}

.figureBlock01__visuals--right.figureBlock01__visuals--xSmall {
  margin: 0 0 0px 20px;
}

.figureBlock01__visuals--large {
  max-width: 57.05521%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .figureBlock01__visuals--large {
  max-width: 58.51852%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.figureBlock01__visuals--small {
  width: 39.8773%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .figureBlock01__visuals--small {
  width: 37.77778%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.figureBlock01__visuals--xSmall {
  width: 138px;
}

.cols__col--10 .figureBlock01__visuals--xSmall {
  width: 138px;
}

.figureBlock01__visuals--noSpace {
  margin-bottom: 0;
}

.figureBlock01__visuals--onSpace {
  margin-top: 18px;
}

.figureBlock01__visuals--body {
  float: right;
}

.figureBlock01__figure {
  margin: 28px 0 0;
  padding: 0;
}

.figureBlock01__figure:first-child {
  margin-top: 0;
}

.figureBlock01__img {
  width: 100%;
}

.figureBlock01__img--border {
  border: 1px solid #e5e5e5;
}

.figureBlock01__caption {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 12px 0 0;
  padding: 0;
}

.figureBlock01__content {
  margin: 28px 0 0;
  padding: 0;
}

.figureBlock01__content:first-child {
  margin-top: 0;
}

.figureBlock01__content > *:first-child {
  margin-top: 0;
}

.figureBlock01__content--divide {
  overflow: hidden;
}

.figureBlock01__head {
  float: left;
}

.figureBlock01__head > *:first-child {
  margin-top: 0;
}

.cols__col--10 .figureBlock01__head {
  max-width: 58.51852%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

/*doc
---
title: button01
name: button01
category: form
---
 
 
```block
<button type="submit" class="button01">Search</button>
```
 
*/

.button01 {
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.select01 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-right: 6px;
  height: 40px;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border: 1px solid #e5e5e5;
  margin-top: 18px;
  padding: 0 30px 0 8px;
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  background: url(../images/form_bg_01.png) no-repeat #fff 95% 50%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.select01:before {
  content: "";
}

/*doc
---
title: heading01
name: heading01
category: headings
---

headingのベーススタイル
単体では使用せず、下記modifier付きのクラスと併用します

```block
<h1 class="heading01">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

.heading01 {
  margin: 0;
  padding: 0;
  line-height: 1.25;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.heading01__copy {
  display: block;
  margin: 0;
  padding: 0;
}

.heading01__copy--lead {
  margin-top: 12px;
}

.heading01--warn {
  color: #e1002a;
}

.heading01--center {
  text-align: center;
}

.heading01--categoryTitle {
  font-size: 56px;
  font-size: 3.5rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 60px;
  font-weight: normal;
  text-align: center;
}

.heading01--categoryTitle .heading01__copy--lead {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  font-weight: normal;
}

.heading01--normal {
  font-weight: normal;
}

.heading01--subTitle {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 20px;
  font-weight: normal;
}

.heading01--subTitle .heading01--shoulder {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #000;
  display: block;
  margin-bottom: 3px;
}

.heading01--lv01 {
  font-size: 22px;
  font-size: 1.375rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 16px;
}

.heading01--lv01 .heading01__copy--shoulder {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.heading01--lv01 .heading01__copy--lead {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.heading01--news {
  font-size: 30px;
  font-size: 1.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 56px;
}

.heading01--news .heading01__copy--shoulder {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.heading01--news .heading01__copy--lead {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.heading01--lv02 {
  font-size: 20px;
  font-size: 1.25rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 24px;
  border-left: solid 4px #e1002a;
  padding: 3px 0 0 10px;
}

.heading01--lv01 + .heading01--lv02 {
  margin-top: 16px;
  margin-bottom: 10px;
}

.heading01--lv03 {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 12px;
}

.heading01--lv04 {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 8px;
}

.heading01--lv05 {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 12px;
}

.heading01--lv06 {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 12px;
  color: #666;
}

.heading01--product {
  font-size: 26px;
  font-size: 1.625rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 22px;
}

/*doc
---
title: heading01--categoryTitle
name: heading01--categoryTitle
category: headings
parent: heading01
---

第二階層で使用するheading。
h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。
コピーを挿入することが可能です。

```block
<h1 class="heading01 heading01--categoryTitle">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
<span class="heading01__copy heading01__copy--lead">Lorem ipsum</span>
</h1>
```

*/

/*doc
---
title: heading01--center
name: heading01--center
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv01 heading01--center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>
```

*/

/*doc
---
title: heading01--warn
name: heading01--warn
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv01 heading01--warn">
Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>
```

*/

/*doc
---
title: heading01--lv01
name: heading01--lv01
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。
コピーを挿入することが可能です。

```block
<h1 class="heading01 heading01--lv01">
<span class="heading01__copy heading01__copy--shoulder">Lorem ipsum</span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit
<span class="heading01__copy heading01__copy--lead">Lorem ipsum</span>
</h1>

<h1 class="heading01 heading01--lv01">
<span class="heading01__copy heading01__copy--shoulder"><a href="#" class="linkText01">Lorem ipsum</a></span>
<a href="#" class="linkText01">Lorem ipsum dolor sit amet, consectetur adipisicing elit</a>
<span class="heading01__copy heading01__copy--lead">Lorem ipsum</span>
</h1>
```

*/

/*doc
---
title: heading01--lv02
name: heading01--lv02
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv02">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

/*doc
---
title: heading01--lv03
name: heading01--lv03
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv03">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

/*doc
---
title: heading01--lv04
name: heading01--lv04
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv04">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

/*doc
---
title: heading01--lv05
name: heading01--lv05
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv05">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

/*doc
---
title: heading01--lv06
name: heading01--lv06
category: headings
parent: heading01
---

h1〜h6まで利用可能です。
文脈に応じてh1〜h6を使用してください。

```block
<h1 class="heading01 heading01--lv06">Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
```

*/

/*doc
---
title: keyVisual01
name: keyVisual01
category: keyvisual
---

ページのキービジュアル用
.cols--expansion, .cols__col--full 内で使用する

```block
<div class="keyVisual01">
<figure class="keyVisual01__figure">
<img src="http://placehold.it/1600x450&text=1600 x 450" alt="dummy" class="keyVisual01__img">
<!-- /keyVisual01__figure --></figure>
<div class="keyVisual01__content">
<h2 class="keyVisual01__heading">Lorem ipsum</h2>
<p class="keyVisual01__text">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /keyVisual01__content --></div>
<!-- /keyVisual01 --></div>

<div class="keyVisual01">
<a href="__dummy__" class="keyVisual01__link">
<figure class="keyVisual01__figure">
<img src="http://placehold.it/1600x450&text=1600 x 450" alt="dummy" class="keyVisual01__img">
<!-- /keyVisual01__figure --></figure>
<div class="keyVisual01__content">
<h2 class="keyVisual01__heading">Lorem ipsum</h2>
<p class="keyVisual01__text">lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /keyVisual01__content --></div>
</a>
<!-- /keyVisual01 --></div>
```

*/

.keyVisual01 {
  position: relative;
  width: 100%;
  height: auto;
  margin: 32px auto 0;
  padding: 0;
  overflow: hidden;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.keyVisual01__link {
  /*@include transition(all .4s $easing-default);*/
  display: block;
  color: #333;
}

.keyVisual01__link:hover,
.keyVisual01__link:visited {
  color: #333;
}

.keyVisual01__link:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.keyVisual01__link:hover .keyVisual01__heading {
  text-decoration: underline;
}

.keyVisual01__figure {
  -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
}

.keyVisual01__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}

.keyVisual01__content {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  padding: 0;
  text-align: center;
}

.ie8 .keyVisual01__content {
  min-width: 978px;
}

.keyVisual01__content--white .keyVisual01__link,
.keyVisual01__content--white .keyVisual01__link:hover,
.keyVisual01__content--white .keyVisual01__link:visited,
.keyVisual01__content--white .keyVisual01__heading,
.keyVisual01__content--white .keyVisual01__text,
.keyVisual01__content--white .keyVisual01__button {
  color: #fff;
}

.keyVisual01__content--white .keyVisual01__button {
  border-color: #fff;
  background-color: rgba(51, 51, 51, 0.3);
}

.keyVisual01__content--white .keyVisual01__button--play {
  background-color: transparent;
}

.keyVisual01__content--left {
  text-align: left;
}

.keyVisual01__content--left .keyVisual01__heading,
.keyVisual01__content--left .keyVisual01__text,
.keyVisual01__content--left .keyVisual01__button {
  margin-right: 48.46626%;
  margin-left: 5.1124%;
}

.keyVisual01__content--right {
  text-align: left;
}

.keyVisual01__content--right .keyVisual01__heading,
.keyVisual01__content--right .keyVisual01__text,
.keyVisual01__content--right .keyVisual01__button {
  margin-right: 5.1124%;
  margin-left: 48.46626%;
}

.keyVisual01__heading {
  -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 34px;
  font-size: 2.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0 14.314%;
  padding: 0;
  color: #333;
  line-height: 1.25;
}

.keyVisual01__text {
  -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 12px 14.314% 0;
  padding: 0;
  color: #333;
  line-height: 1.25;
}

.keyVisual01__text .fa {
  font-size: 48px;
  font-size: 3rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.keyVisual01__button {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin: 28px 0 0;
  padding: 8px;
  border: 1px solid #333;
  background-color: rgba(255, 255, 255, 0.3);
  font-weight: bold;
  line-height: 1.1;
}

.keyVisual01__button--play {
  padding: 0;
  border: none;
  background-color: transparent;
}

.keyVisual01__button--play .fa {
  font-size: 58px;
  font-size: 3.625rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding-left: 0;
  vertical-align: top;
}

/*doc
---
title: linkText01
name: linkText01
category: links
---

ベースとなるリンクスタイル
アイコンは[fontawesome](http://fortawesome.github.io/Font-Awesome/)を利用

```block
<a href="#" class="linkText01">link</a>
```

*/

.linkText01 {
  position: relative;
  color: #4163b1;
}

.linkText01--aIcon {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
}

.linkText01--aIcon .fa {
  padding-right: 0;
  padding-left: 5px;
}

.ie8 .linkText01--aIcon {
  max-width: none;
}

.linkText01--bIcon {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  padding-left: 1.2em;
}

.linkText01--bIcon .fa {
  position: absolute;
  left: 0;
  top: 0.2em;
}

.ie8 .linkText01--bIcon {
  max-width: none;
}

/*doc
---
title: icon / external
name: external
category: links
parent: linkText01
---

外部リンク用のリンクスタイル
テキストの前にアイコンを置く場合はmodifier「--bIcon」、テキストの後ろに置く場合は「--aIcon」を付与する

```block
<a href="#" class="linkText01 linkText01--aIcon">link<i class="fa fa-external-link"></i></a>
```

*/

/*doc
---
title: icon /pdf
name: pdf
category: links
parent: linkText01
---

pdf用のリンクスタイル

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-file-pdf-o"></i>pdf (4pages / 2.1MB)</a>
```

*/

/*doc
---
title: icon / envelope
name: envelope
category: links
parent: linkText01
---

envelope用のリンクスタイル

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-envelope"></i>Contact</a>
```

*/

/*doc
---
title: icon / video
name: video
category: links
parent: linkText01
---

video用のリンクスタイル

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-video-camera"></i>link</a>
```

*/

/*doc
---
title: icon / ebook
name: ebook
category: links
parent: linkText01
---

e-book用のリンクスタイル

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-book"></i>link</a>
```

*/

/*doc
---
title: icon / angleUp
name: angleUp
category: links
parent: linkText01
---

ページ内アンカー用のリンクスタイル（上向き）

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-angle-up"></i>link</a>
```

*/

/*doc
---
title: icon / angleDown
name: angleDown
category: links
parent: linkText01
---

ページ内アンカー用のリンクスタイル（下向き）

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-angle-down"></i>link</a>
```

*/

/*doc
---
title: icon / rss
name: rss
category: links
parent: linkText01
---

RSS用のリンクスタイル

```block
<a href="#" class="linkText01 linkText01--bIcon"><i class="fa fa-rss-square"></i>RSS</a>
```

*/

/*doc
---
title: linkButton01
name: linkButton01
category: links
---

ベースとなるボタンスタイル

```block
<a href="#" class="linkButton01">Button</a>
```
*/

.linkButton01,
.button01 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin: 0;
  padding: 8px 32px;
  border: 1px solid #4163b1;
  background-color: #fff;
  color: #4163b1;
  font-weight: bold;
  text-align: center;
  line-height: 1.25;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.linkButton01:hover,
.button01:hover,
.linkButton01:visited,
.button01:visited {
  color: #4163b1;
  text-decoration: none;
}

.linkButton01:hover,
.button01:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.linkButton01--large,
.button01--large {
  width: 100%;
}

.linkButton01--emphasis,
.button01--emphasis {
  background-color: #4163b1;
  color: #fff;
}

.linkButton01--emphasis:hover,
.button01--emphasis:hover,
.linkButton01--emphasis:visited,
.button01--emphasis:visited {
  color: #fff;
}

.linkButton01--thick {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  line-height: 62px;
}

.linkButton01--ghost,
.button01--ghost {
  border-color: #333;
  background-color: transparent;
  color: #333;
}

.linkButton01--ghost:hover,
.button01--ghost:hover,
.linkButton01--ghost:visited,
.button01--ghost:visited {
  color: #333;
}

/*doc
---
title: linkButton01--large
name: linkButton01--large
category: links
parent: linkButton01
---

大きいボタンスタイル

```block
<a href="#" class="linkButton01 linkButton01--large">Button</a>
```
*/

/*doc
---
title: unorderedList01
name: unorderedList01
category: lists
---

基本的なリストスタイル
disc付きは&lt;i&gt;を挿入
入れ子にする場合は「--child」modifierを利用

```block
<ul class="unorderedList01">
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list1
<ul class="unorderedList01 unorderedList01--child">
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list1</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list2</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list3</li>
</ul>
</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list2</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list3</li>
</ul>
```

*/

.unorderedList01 {
  list-style: none;
  margin: 0;
  margin-top: 28px;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.unorderedList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 8px 0 0 0;
  padding: 0 0 0 1em;
}

.unorderedList01__item:first-child {
  margin-top: 0;
}

.unorderedList01 .fa-circle {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  position: absolute;
  left: 0;
  top: 0.6em;
  color: #ccc;
  font-size: 10px;
  vertical-align: middle;
}

.ie9 .unorderedList01 .fa-circle,
.ie8 .unorderedList01 .fa-circle {
  top: 0.7em;
  font-size: 8px;
}

.unorderedList01--noCircle > .unorderedList01__item {
  padding-left: 0;
}

.unorderedList01--horizontal {
  margin-bottom: -8px;
}

.unorderedList01--horizontal > .unorderedList01__item {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding-left: 0;
}

.unorderedList01--small {
  margin-top: 8px;
}

.unorderedList01--small > .unorderedList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 0;
}

.unorderedList01--small > .unorderedList01__item:first-child {
  margin-top: 0;
}

.unorderedList01--child {
  margin: 5px 0 0 20px;
}

.unorderedList01--2col {
  *zoom: 1;
}

.unorderedList01--2col:before,
.unorderedList01--2col:after {
  content: " ";
  display: table;
}

.unorderedList01--2col:after {
  clear: both;
}

.unorderedList01--2col .unorderedList01__item {
  float: left;
  box-sizing: border-box;
  width: 48.46626%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
}

.unorderedList01--2col .unorderedList01__item:nth-child(odd) {
  clear: left;
  margin-left: 0;
}

.unorderedList01--2col .unorderedList01__item--odd {
  clear: left;
  margin-left: 0;
}

.unorderedList01--2col .unorderedList01__item:nth-child(1),
.unorderedList01--2col .unorderedList01__item:nth-child(2) {
  margin-top: 0;
}

.ie8 .unorderedList01--2col .unorderedList01__item {
  margin-top: 8px;
}

.ie8 .unorderedList01--2col .unorderedList01__item--odd {
  clear: left;
  margin-left: 0;
}

.unorderedList01--news > .unorderedList01__item:before {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  content: "\f111";
  position: absolute;
  left: 0;
  top: 0.5em;
  color: #ccc;
  font-size: 10px;
  font-family: FontAwesome;
  vertical-align: middle;
}

.ie9 .unorderedList01--news > .unorderedList01__item:before,
.ie8 .unorderedList01--news > .unorderedList01__item:before {
  top: 0.6em;
  font-size: 8px;
}

/*doc
---
title: unorderedList01--noCircle
name: unorderedList01-noCircle
category: lists
parent: unorderedList01
---

バリエーション 'discなし'

```block
<ul class="unorderedList01 unorderedList01--noCircle">
<li class="unorderedList01__item">list1list1list <br>1list1list1list1list1list1list1list1l ist1</li>
<li class="unorderedList01__item">list2</li>
<li class="unorderedList01__item">list3</li>
<li class="unorderedList01__item">list4</li>
</ul>
```

*/

/*doc
---
title: unorderedList01--horizontal
name: unorderedList01-horizontal
category: lists
parent: unorderedList01
---

バリエーション '横並び'

```block
<ul class="unorderedList01 unorderedList01--horizontal">
<li class="unorderedList01__item">list1list1list <br>1list1list1list1list1list1list1list1l ist1</li>
<li class="unorderedList01__item">list2</li>
<li class="unorderedList01__item">list3</li>
<li class="unorderedList01__item">list4</li>
</ul>
```

*/

/*doc
---
title: unorderedList01--small
name: unorderedList01-small
category: lists
parent: unorderedList01
---

バリエーション '小さめ'

```block
<ul class="unorderedList01 unorderedList01--small">
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list1list1list1 <br>list1list1list1list1list1list1list1l ist1</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list2</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list3</li>
<li class="unorderedList01__item"><i class="fa fa-circle"></i>list4</li>
</ul>
```

バリエーション '2カラム'

```block
<ul class="unorderedList01 unorderedList01--2col unorderedList01--noCircle">
<li class="unorderedList01__item unorderedList01__item--odd">list1list1list1 <br>list1list1list1list1list1list1list1l ist1</li>
<li class="unorderedList01__item">list2</li>
<li class="unorderedList01__item unorderedList01__item--odd">list3</li>
<li class="unorderedList01__item">list4</li>
</ul>
```

*/

/*doc
---
title: orderedList01
name: orderedList01
category: lists
---

基本的な数字付きリスト
入れ子にする場合は「--child」modifierを利用

```block
<ol class="orderedList01">
<li class="orderedList01__item">list1</li>
<li class="orderedList01__item">list2
<ol class="orderedList01 orderedList01--child">
<li class="orderedList01__item">list1</li>
<li class="orderedList01__item">list2</li>
</ol>
</li>
<li class="orderedList01__item">list3</li>
<li class="orderedList01__item">list4</li>
</ol>
```

*/

.orderedList01 {
  list-style-type: decimal;
  margin: 0 0 0 30px;
  margin-top: 12px;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.orderedList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 8px 0 0 0;
  padding: 0;
}

.orderedList01--small {
  margin-top: 6px;
}

.orderedList01--small > .orderedList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 6px;
}

.orderedList01--child {
  margin: 5px 0 0 50px;
}

/*doc
---
title: orderedList01--small
name: orderedList01-small
category: lists
parent: orderedList01
---

バリエーション '小さめ'

```block
<ol class="orderedList01 orderedList01--small">
<li class="orderedList01__item">list1list1list <br>1list1list1list1list1list1list1list1l ist1</li>
<li class="orderedList01__item">list2</li>
<li class="orderedList01__item">list3</li>
<li class="orderedList01__item">list4</li>
</ol>
```

*/

/*doc
---
title: uniqueList01
name: uniqueList01
category: lists
---

基本的な独自マーカタイプのリスト
入れ子にする場合は「--child」modifierを利用

```block
<ul class="uniqueList01">
<li class="uniqueList01__item"><span class="uniqueList01__marker">a.</span>list1</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">b.</span>list2
<ul class="uniqueList01 uniqueList01--child">
<li class="uniqueList01__item"><span class="uniqueList01__marker">(1)</span>list1</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">(2)</span>list2</li>
</ul>
</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">c.</span>list3</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">d.</span>list4</li>
</ul>
```

*/

.uniqueList01 {
  list-style-type: none;
  margin: 0 0 0 2.5em;
  margin-top: 28px;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.uniqueList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 8px 0 0 0;
  padding: 0;
}

.uniqueList01__marker {
  position: absolute;
  right: 100%;
  width: 2em;
  padding-right: 0.5em;
  text-align: right;
}

.uniqueList01--small {
  margin-top: 7px;
}

.uniqueList01--small > .uniqueList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 6px;
}

.uniqueList01--child {
  margin-top: 0;
}

.uniqueList01--news {
  margin-left: 0;
}

/*doc
---
title: uniqueList01--small
name: uniqueList01-small
category: lists
parent: uniqueList01
---

バリエーション '小さめ'

```block
<ul class="uniqueList01 uniqueList01--small">
<li class="uniqueList01__item"><span class="uniqueList01__marker">*1</span>list1</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">*2</span>list2</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">*3</span>list3</li>
<li class="uniqueList01__item"><span class="uniqueList01__marker">*4</span>list4</li>
</ul>
```

*/

/*doc
---
title: alertList01
name: alertList01
category: lists
---

アラートリスト

```block
<ul class="alertList01">
<li class="alertList01__item"><i class="fa fa-exclamation-circle"></i>alert list</li>
<li class="alertList01__item"><i class="fa fa-exclamation-circle"></i>alert list</li>
<li class="alertList01__item"><i class="fa fa-exclamation-circle"></i>alert list</li>
<li class="alertList01__item"><i class="fa fa-exclamation-circle"></i>alert list</li>
</ul>
```

*/

.alertList01 {
  list-style: none;
  margin: 0;
  margin-top: 8px;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.alertList01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 8px 0 0 0;
  padding: 0 0 0 1em;
  color: #e1002a;
}

.alertList01 .fa-exclamation-circle {
  position: absolute;
  left: 0;
  top: 0.35em;
}

/*doc
---
title: definitionList01
name: definitionList01
category: lists
---

基本的な定義リストスタイル

```block
<dl class="definitionList01">
<dt class="definitionList01__term">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="definitionList01__term definitionList01__term--emphasis">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
```

*/

.definitionList01 {
  margin: 0;
  /*margin-top: 14px;*/
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.definitionList01__term {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  margin-top: 16px;
  padding: 0;
}

.definitionList01__term:first-child {
  margin-top: 0;
}

.definitionList01__term--emphasis {
  font-weight: bold;
}

.definitionList01__term--italic {
  font-style: italic;
}

.definitionList01__description {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  margin-top: 8px;
  padding: 0;
}

.definitionList01__description > *:first-child {
  margin-top: 0;
}

.definitionList01--horizontal {
  *zoom: 1;
}

.definitionList01--horizontal:before,
.definitionList01--horizontal:after {
  content: " ";
  display: table;
}

.definitionList01--horizontal:after {
  clear: both;
}

.definitionList01--horizontal .definitionList01__term {
  margin-top: 8px;
  clear: left;
  float: left;
  width: 7em;
}

.definitionList01--horizontal .definitionList01__term:first-child {
  margin-top: 0;
}

.definitionList01--horizontal .definitionList01__description {
  *zoom: 1;
  margin-top: 8px;
  padding: 0 0 0 8em;
}

.definitionList01--horizontal .definitionList01__description:before,
.definitionList01--horizontal .definitionList01__description:after {
  content: " ";
  display: table;
}

.definitionList01--horizontal .definitionList01__description:after {
  clear: both;
}

.definitionList01--horizontal .definitionList01__description:first-of-type {
  margin-top: 0;
}

.definitionList01--border {
  padding-bottom: 12px;
  /*border-bottom: 1px solid #e5e5e5;*/
}

.definitionList01--border .definitionList01__term {
  padding-top: 12px;
}

.definitionList01--border .definitionList01__description {
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
}

.definitionList01--small {
  margin-top: 16px;
}

.definitionList01--small .definitionList01__term {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 6px;
}

.definitionList01--small .definitionList01__term:first-child {
  margin-top: 0;
}

.definitionList01--small .definitionList01__description {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 0;
}

/*doc
---
title: definitionList01--horizontal
name: definitionList01--horizontal
category: lists
parent: definitionList01
---

横並び定義リストスタイル

```block
<dl class="definitionList01 definitionList01--horizontal">
<dt class="definitionList01__term">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="definitionList01__term definitionList01__term--emphasis">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
```

*/

/*doc
---
title: definitionList01--border
name: definitionList01--border
category: lists
parent: definitionList01
---

ボーダー付き定義リストスタイル

```block
<dl class="definitionList01 definitionList01--horizontal definitionList01--border">
<dt class="definitionList01__term">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="definitionList01__term definitionList01__term--italic">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
```

*/

/*doc
---
title: definitionList01--small
name: definitionList01--small
category: lists
parent: definitionList01
---

定義リストスタイル '小さめ'

```block
<dl class="definitionList01 definitionList01--small">
<dt class="definitionList01__term">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="definitionList01__term definitionList01__term--emphasis">Lorem ipsum</dt>
<dd class="definitionList01__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
```

*/

/*doc
---
title: menuBlock01
name: menuBlock01
category: menus
---

主にインデックスページで使用する基本的なメニューブロック
.menuBlock01__headingは必須、それ以外は省略可能
レイアウトに[.cols](/styleguide/grid.html)を用いることで2〜4カラムで使用可能
また、ベースレイアウトに[.cols](/styleguide/grid.html)の10カラムを用いる場合は、2カラム(5col)でのみ使用可能
.menuBlock01\_\_headingにmodifier「--small」を付与することにより、文字を小さくすることが可能
アイコンをつける際には
外部リンクアイコンの場合は.menuBlock01\_\_headingTextにmodifier「--aIcon」、それ以外には「--bIcon」を付与

```block
<div class="menuBlock01">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
```

### 10カラムをベースレイアウトに用いた場合

```block
<div class="cols">
<div class="cols__col--10">
<div class="cols">
<div class="cols__col--2">
<div class="menuBlock01">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--aIcon">h1〜h6まで利用可能<i class="fa fa-external-link"></i></span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col--2">
<div class="menuBlock01">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col--2">
<div class="menuBlock01">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col--2">
<div class="menuBlock01">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col--2">
<div class="menuBlock01">
<div class="menuBlock01__header menuBlock01__heading--small">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText">h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<!-- cols --></div>
<!-- cols__col --></div>
<!-- cols --></div>
```

主にインデックスページで使用する基本的なメニューブロックの画像左寄せレイアウト
.menuBlock\_\_titleは必須、それ以外は省略可能
レイアウトに[.cols](/styleguide/grid.html)を用いて2カラムまでレイアウト可能

```block
<div class="menuBlock01 menuBlock01--left">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
```

```block
<div class="cols">
<div class="cols__col cols__col--6">
<div class="menuBlock01 menuBlock01--left">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col cols__col--6">
<div class="menuBlock01 menuBlock01--left">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<!-- cols --></div>
```

```block
<div class="cols">
<div class="cols__col cols__col--10">
<div class="cols">
<div class="cols__col cols__col--5">
<div class="menuBlock01 menuBlock01--left">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="linkText01"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img menuBlock01__img--left"><span class="menuBlock01__headingText">h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<div class="cols__col cols__col--5">
<div class="menuBlock01 menuBlock01--left">
<div class="menuBlock01__header">
<h1 class="menuBlock01__heading menuBlock01__heading--small"><a href="__dummy__" class="linkText01"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img menuBlock01__img--left"><span class="menuBlock01__headingText">h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
<!-- cols__col --></div>
<!-- cols --></div>
<!-- cols__col --></div>
<!-- cols --></div>
```

主にインデックスページで使用する基本的なメニューブロックの画像右寄せレイアウト
.menuBlock\_\_titleは必須、それ以外は省略可能
レイアウトに[.cols](/styleguide/grid.html)を用いて2カラムまでレイアウト可能
また、ベースレイアウトに.colsの10カラムを用いる場合は、2カラム(5col)でのみ使用可能だが、.menuBlock\_\_figureにmodifier「--small」、.menuBlock__headingにmodifier「--small」を付与して使用すること

```block
<div class="menuBlock01">
<div class="menuBlock01__header menuBlock01__header--right">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
```

*/

.menuBlock01 {
  *zoom: 1;
  margin: 12px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01:before,
.menuBlock01:after {
  content: " ";
  display: table;
}

.menuBlock01:after {
  clear: both;
}

.menuBlock01--left .menuBlock01__img {
  width: 48.46626%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

.cols__col--10 .menuBlock01--left .menuBlock01__img {
  width: 48.14815%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--left .menuBlock01__headingText,
.menuBlock01--left .menuBlock01__content {
  margin-left: 51.53374%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .menuBlock01--left .menuBlock01__headingText,
.cols__col--10
.menuBlock01--left .menuBlock01__content {
  margin-left: 51.85185%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--left.menuBlock01--small .menuBlock01__headingText,
.menuBlock01--left.menuBlock01--small .menuBlock01__content {
  margin-left: 42.94479%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .menuBlock01--left.menuBlock01--small .menuBlock01__headingText,
.cols__col--10
.menuBlock01--left.menuBlock01--small .menuBlock01__content {
  margin-left: 41.48148%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--left.menuBlock01--xSmall .menuBlock01__headingText,
.menuBlock01--left.menuBlock01--xSmall .menuBlock01__content {
  margin-left: 158px;
}

.cols__col--10 .menuBlock01--left.menuBlock01--xSmall .menuBlock01__headingText,
.cols__col--10
.menuBlock01--left.menuBlock01--xSmall .menuBlock01__content {
  margin-left: 158px;
}

.menuBlock01--right .menuBlock01__img {
  width: 48.46626%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
}

.cols__col--10 .menuBlock01--right .menuBlock01__img {
  width: 48.14815%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--right .menuBlock01__headingText,
.menuBlock01--right .menuBlock01__content {
  margin-right: 51.53374%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .menuBlock01--right .menuBlock01__headingText,
.cols__col--10
.menuBlock01--right .menuBlock01__content {
  margin-right: 51.85185%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--right.menuBlock01--small .menuBlock01__headingText,
.menuBlock01--right.menuBlock01--small .menuBlock01__content {
  margin-right: 42.94479%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .menuBlock01--right.menuBlock01--small .menuBlock01__headingText,
.cols__col--10
.menuBlock01--right.menuBlock01--small .menuBlock01__content {
  margin-right: 41.48148%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--right.menuBlock01--xSmall .menuBlock01__headingText,
.menuBlock01--right.menuBlock01--xSmall .menuBlock01__content {
  margin-right: 158px;
}

.cols__col--10 .menuBlock01--right.menuBlock01--xSmall .menuBlock01__headingText,
.cols__col--10
.menuBlock01--right.menuBlock01--xSmall .menuBlock01__content {
  margin-right: 158px;
}

.menuBlock01--small {
  margin-top: 40px;
}

.menuBlock01--small .menuBlock01__img {
  width: 39.8773%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.cols__col--10 .menuBlock01--small .menuBlock01__img {
  width: 37.77778%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01--xSmall {
  margin-top: 24px;
}

.menuBlock01--xSmall .menuBlock01__img {
  width: 138px;
}

.cols__col--10 .menuBlock01--xSmall .menuBlock01__img {
  width: 138px;
}

.menuBlock01--border {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.menuBlock01__header {
  position: relative;
}

.menuBlock01__header + .menuBlock01__header {
  margin-top: 20px;
}

.menuBlock01__heading {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.menuBlock01__heading--small {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock01__img {
  display: block;
  padding-bottom: 8px;
}

.menuBlock01__img--close {
  padding-bottom: 5px;
}

.menuBlock01__img--noSpace {
  padding-bottom: 0;
}

.menuBlock01__headingLink:hover .menuBlock01__headingText {
  text-decoration: underline;
}

.menuBlock01__headingLink:hover .menuBlock01__img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.menuBlock01__headingLink:hover .menuBlock01__headingText {
  text-decoration: underline;
}

.menuBlock01__headingText {
  display: block;
  position: relative;
}

.menuBlock01__headingText--aIcon .fa {
  padding-right: 0;
  padding-left: 5px;
}

.menuBlock01__headingText--bIcon {
  padding-left: 1.2em;
}

.menuBlock01__headingText--bIcon .fa {
  position: absolute;
  left: 0;
  top: 0.05em;
}

.menuBlock01__content {
  margin: 4px 0 0;
  padding: 0;
  overflow: hidden;
}

.menuBlock01__content > *:first-child {
  margin-top: 0;
}

.menuBlock01__content + .menuBlock01__figure {
  margin-top: 12px;
}

.menuBlock01__text {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 12px 0 0;
  padding: 0;
}

.menuBlock01__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.menuBlock01__listItem {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 2px 0 0;
  padding: 0;
}

.menuBlock01__listItem:first-child {
  margin-top: 0;
}

/*doc

---
title: menuBlock01--border
name: menuBlock01-border
category: menus
parent: menuBlock01
---

```block
<div class="menuBlock01 menuBlock01--border">
<div class="menuBlock01__header menuBlock01__header--right">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>

<div class="menuBlock01 menuBlock01--border">
<div class="menuBlock01__header menuBlock01__header--right">
<h1 class="menuBlock01__heading"><a href="__dummy__" class="menuBlock01__headingLink"><img src="http://placehold.it/350x150&text=any x any" alt="" width="100%" height="auto" class="menuBlock01__img"><span class="menuBlock01__headingText menuBlock01__headingText--bIcon"><i class="fa fa-video-camera"></i>h1〜h6まで利用可能</span></a></h1>
<!-- menuBlock01__header --></div>
<div class="menuBlock01__content">
<p class="menuBlock01__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<ul class="menuBlock01__list">
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
<li class="menuBlock01__listItem"><a href="__dummy__" class="linkText01">Lorem ipsum</a></li>
</ul>
<!-- menuBlock01__content --></div>
<!-- menuBlock01 --></div>
```

*/

.menuBlockSet01 {
  margin: 32px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.keyVisual01 + .menuBlockSet01 {
  margin-top: 0;
}

.menuBlockSet01__cols {
  *zoom: 1;
  margin: 0;
  padding: 0;
}

.menuBlockSet01__cols:before,
.menuBlockSet01__cols:after {
  content: " ";
  display: table;
}

.menuBlockSet01__cols:after {
  clear: both;
}

.menuBlockSet01__col {
  overflow: hidden;
}

.menuBlockSet01__col:first-child {
  margin-left: 0;
}

.menuBlockSet01__col--1 {
  float: left;
  box-sizing: border-box;
  width: 33.12883%;
  margin: 0 0 0 0.30675%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlockSet01__col--2 {
  float: left;
  box-sizing: border-box;
  width: 66.56442%;
  margin: 0 0 0 0.30675%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlockSet01__block {
  *zoom: 1;
  -webkit-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  margin: 4px 0 0;
  padding: 0;
  background-color: #f2f2f2;
}

.menuBlockSet01__block:before,
.menuBlockSet01__block:after {
  content: " ";
  display: table;
}

.menuBlockSet01__block:after {
  clear: both;
}

.menuBlockSet01__link {
  display: block;
  height: 100%;
  /*color: #fff;*/
}

.menuBlockSet01__link:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
  text-decoration: none;
}

.menuBlockSet01__link:hover .menuBlockSet01__description {
  text-decoration: underline;
}

.menuBlockSet01__figure {
  margin: 0;
  padding: 0;
}

.menuBlockSet01__img {
  width: 100%;
}

.menuBlockSet01__content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
  color: #333;
}

.menuBlockSet01__figure + .menuBlockSet01__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.7);
  color: #fff;
}

.menuBlockSet01__figure + .menuBlockSet01__content .menuBlockSet01__description {
  color: #fff;
}

.menuBlockSet01__description {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  color: #4163b1;
  line-height: 1.25;
}

.menuBlockSet01__info {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 4px 0 0;
  padding: 0;
  line-height: 1.25;
}

.menuBlock02 {
  *zoom: 1;
  position: relative;
  margin: 4px 0 0;
  padding: 0;
  background-color: #f2f2f2;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.menuBlock02:before,
.menuBlock02:after {
  content: " ";
  display: table;
}

.menuBlock02:after {
  clear: both;
}

.menuBlock02__link {
  display: block;
  height: 100%;
  /*color: #fff;*/
}

.menuBlock02__figure {
  margin: 0;
  padding: 0;
}

.menuBlock02__img {
  width: 100%;
}

.menuBlock02__content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px;
}

.menuBlock02__figure + .menuBlock02__content {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.menuBlock02__description {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
  /*color: #fff;*/
}

.menuBlock02__info {
  margin: 10px 0 0;
  padding: 0;
  line-height: 1.25;
}

.modalWindow {
  -webkit-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  filter: alpha(opacity=0);
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  visibility: hidden;
  /*overflow: hidden;*/
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.modalWindow__cols {
  *zoom: 1;
  max-width: 978px;
  margin: 0 auto;
}

.modalWindow__cols:before,
.modalWindow__cols:after {
  content: " ";
  display: table;
}

.modalWindow__cols:after {
  clear: both;
}

.modalWindow__col {
  float: left;
  box-sizing: border-box;
  width: 100%;
  margin-left: 3.06748%;
  padding: 0;
  margin-left: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  float: none;
  max-width: 978px;
  /*height: 550px;*/
  margin: auto;
  padding: 0 20px;
  overflow: auto;
}

.modalWindow__col--typeText {
  float: left;
  box-sizing: border-box;
  width: 82.82209%;
  margin-left: 3.06748%;
  padding: 0;
  margin-left: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
  max-width: 810px;
  margin: auto;
  padding: 0 20px;
}

.modalWindow__col > *:first-child {
  margin-top: 0;
}

.modalWindow__close {
  float: none;
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.modalWindow__closeLink {
  display: block;
  /*position: relative;*/
  position: absolute;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
}

.modalWindow__closeLink:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.modalWindow__closeLink:before,
.modalWindow__closeLink:after {
  content: "";
  display: block;
  position: absolute;
  top: 8px;
  width: 22px;
  height: 4px;
  background-color: #ccc;
}

.modalWindow__closeLink:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: -2px;
}

.modalWindow__closeLink:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 0;
}

.ie8 .modalWindow__closeLink:before,
.ie8 .modalWindow__closeLink:after,
.ie9 .modalWindow__closeLink:before,
.ie9 .modalWindow__closeLink:after {
  display: none;
}

.modalWindow__closeLink .fa {
  display: none;
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding: 0;
  color: #ccc;
}

.ie8 .modalWindow__closeLink .fa,
.ie9 .modalWindow__closeLink .fa {
  display: inline-block;
}

.modalWindow__content {
  -webkit-transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%;
  margin: auto;
  overflow: auto;
}

.modalWindow__content > *:first-child {
  margin-top: 0;
}

.modalWindow--open {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 99;
  visibility: visible;
}

.modalWindow--open .modalWindow__col {
  -webkit-overflow-scrolling: touch;
}

.modalWindow--open .modalWindow__close {
  z-index: 99;
}

.modalWindow--open .modalWindow__content {
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 99;
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #333;
  opacity: 0;
  display: none;
}

.overlay--open {
  display: block;
  z-index: 2;
  opacity: 0.65;
  -ms-filter: "alpha(opacity=65)";
}

.pagination01 {
  text-align: center;
}

.pagination01__list {
  *zoom: 1;
  list-style: none;
  display: inline-block;
  margin: 60px 0 0;
  padding: 0;
}

.pagination01__list:before,
.pagination01__list:after {
  content: " ";
  display: table;
}

.pagination01__list:after {
  clear: both;
}

.pagination01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  float: left;
  margin: 12px 0 0;
  padding: 0 4px;
  border-left: 1px solid #e5e5e5;
}

.pagination01__item:first-child {
  border-left: none;
}

.pagination01__link {
  padding-right: 4px;
  padding-left: 4px;
}

.pagination01__link:hover {
  border-bottom: 1px solid #e1002a;
  text-decoration: none;
}

.pagination01__link--current {
  color: #333;
  border-bottom: 1px solid #e1002a;
}

/*doc
---
title: text01
name: text01
category: paragraphs
---

基本的なテキストスタイル

```block
<p class="text01">Lorem ipsum dolor <em>sit amet</em>, consectetur adipisicing elit, sed do <strong>eiusmod tempor</strong> incididunt ut <i>labore et</i> dolore magna aliqua.</p>
<p class="text01">Lorem ipsum dolor sit amet<sup>*</sup>, consectetur adipisicing elit, sed do eiusmod tempor incididunt<sub>2</sub> ut labore et dolore magna aliqua.</p>
```

*/

.text01 {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  margin-top: 14px;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.text01 + .text01 {
  margin-top: 24px;
}

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

.text01--center {
  text-align: center;
}

.text01--pagetop {
  text-align: right;
  margin-top: 28px;
}

.text01--lead {
  font-size: 30px;
  font-size: 1.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 28px;
  color: #e1002a;
  line-height: 1.25;
}

.text01--leadSmall {
  font-size: 22px;
  font-size: 1.375rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 29px;
  color: #e1002a;
  line-height: 1.25;
}

.text01--small {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 8px;
}

.text01--small + .text01 {
  margin-top: 28px;
}

.text01--xSmall {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 4px;
}

.text01--signature {
  margin-top: 24px;
}

/*doc
---
title: text01--small
name: text01--small
category: paragraphs
parent: text01
---

バリエーション '小さめ'

```block
<p class="text01 text01--small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01 text01--small">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

*/

/*doc
---
title: text01--right
name: text01--right
category: paragraphs
parent: text01
---

バリエーション '右寄せ'

```block
<p class="text01 text01--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01 text01--right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

*/

/*doc
---
title: text01--center
name: text01--center
category: paragraphs
parent: text01
---

バリエーション '中央寄せ'

```block
<p class="text01 text01--center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01 text01--center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

*/

/*doc
---
title: text01--lead
name: text01--lead
category: paragraphs
parent: text01
---

バリエーション 'リード文'

```block
<p class="text01 text01--lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text01 text01--lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

*/

/*doc
---
title: text01--signature
name: text01--signature
category: paragraphs
parent: text01
---

バリエーション '署名'
「--small」modifierを併用

```block
<p class="text01 text01--small text01--signature">Lorem ipsum dolor sit amet<br>consectetur adipisicing elit</p>
<p class="text01 text01--small text01--right text01--signature">Lorem ipsum dolor sit amet<br>consectetur adipisicing elit</p>
```

*/

/*doc
---
title: quotation01
name: quotation01
category: paragraphs
---

基本となる引用スタイル

```block
<blockquote class="quotation01">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
```

*/

.quotation01 {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

/*doc
---
title: relatedLinkBlock01
name: relatedLinkBlock01
category: relatedLinkBlock01
---

関連リンク  
 
```block
```
 
*/

.relatedLinkBlock01 {
  margin: 60px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.relatedLinkBlock01__parentTitle {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.relatedLinkBlock01__title {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  margin-top: 10px;
  padding: 0;
  line-height: 1.25;
}

.relatedLinkBlock01__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.relatedLinkBlock01__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: relative;
  margin: 4px 0 0;
  padding: 0;
  line-height: 1.25;
}

.relatedLinkBlock01__link {
  padding-left: 1.2em;
}

.relatedLinkBlock01__link .fa-circle {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
  position: absolute;
  left: 0;
  top: 8px;
  color: #ccc;
  font-size: 10px;
  vertical-align: middle;
}

.ie9 .relatedLinkBlock01__link .fa-circle,
.ie8 .relatedLinkBlock01__link .fa-circle {
  font-size: 8px;
}

.relatedLinkBlock01__link--current {
  color: #404040;
}

.relatedLinkBlock01__link--current:hover,
.relatedLinkBlock01__link--current:visited {
  color: #404040;
  text-decoration: none;
}

.relatedLinkBlock01__link--current .fa-circle {
  color: #e1002a;
}

/*doc
---
title: tab01
name: tab01
category: tabs
---

タブのベーススタイル

```block
<ul class="tab01">
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link tab01__link--current">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">Japan</a></li>
<li class="tab01__item"><a href="#" class="tab01__link">The Americas</a></li>
</ul>
```

*/

.tab01 {
  *zoom: 1;
  list-style: none;
  margin: 12px 0 0;
  padding: 0 10px;
  border-bottom: 2px solid #e5e5e5;
  background-color: #fff;
}

.tab01:before,
.tab01:after {
  content: " ";
  display: table;
}

.tab01:after {
  clear: both;
}

.tab01__item {
  position: relative;
  float: left;
  margin: 0;
  padding: 8px 0 0;
  font-weight: bold;
}

.tab01__item--different {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  position: absolute;
  right: 0;
  top: 38px;
}

.tab01__item--different .tab01__link {
  bottom: 0;
  padding: 0;
  border: none;
}

.tab01__item--different .tab01__link:hover {
  text-decoration: underline;
}

.tab01__item--different .tab01__link:hover:before,
.tab01__item--different .tab01__link:hover:after {
  display: none;
}

.tab01__item--different .tab01__link .fa {
  color: #4163b1;
}

.tab01__link {
  display: block;
  position: relative;
  bottom: -2px;
  padding: 6px;
  border: 1px solid transparent;
  border-bottom: none;
  overflow: hidden;
}

.tab01__link:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  content: "";
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-right: 6px solid #fff;
  border-left: 6px solid #fff;
}

.tab01__link:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  content: "";
  display: none;
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: 1;
  width: 100%;
  height: 2px;
  border-bottom: 2px solid #e1002a;
}

.tab01__link:hover {
  text-decoration: none;
  /*&:before,*/
}

.tab01__link:hover:after {
  display: block;
}

.tab01__link--current {
  border-color: #e5e5e5;
  background-color: #fff;
  color: #666;
}

.tab01__link--current:before,
.tab01__link--current:after {
  display: block;
}

.tab01__link--current:before {
  border-color: #fff;
}

.tab01__link--current:hover,
.tab01__link--current:visited {
  color: #666;
}

.tab01__border {
  padding-bottom: 3px;
  border-bottom: 2px solid #e1002a;
  font-weight: normal;
}

.tab02 {
  *zoom: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
  width: 100%;
  margin: 40px auto 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background-color: #f7f7f7;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02:before,
.tab02:after {
  content: " ";
  display: table;
}

.tab02:after {
  clear: both;
}

.tab02__item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  border-left: 1px solid #e5e5e5;
  text-align: center;
}

.tab02__item:first-child {
  border-left: none;
}

.tab02__item:first-child .tab02__link {
  border-radius: 5px 0 0 5px;
}

.tab02__item:last-child .tab02__link {
  border-radius: 0 5px 5px 0;
}

.tab02__item--1of2 {
  width: 50%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02__item--1of3 {
  width: 33.33333%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02__item--1of4 {
  width: 25%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02__item--1of5 {
  width: 20%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02__item--1of6 {
  width: 16.66667%;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tab02__link {
  display: block;
  width: 100%;
  padding: 5px 0;
  background-color: #f7f7f7;
}

/*doc
---
title: tag01
name: tag01
category: tags
---
 
tagのベーススタイル
 
```block
<span class="tag01">tag</span>
<span class="tag01 tag01--newsReleases">tag</span>
<span class="tag01 tag01--csr">tag</span>
<span class="tag01 tag01--ir">tag</span>
<span class="tag01 tag01--event">tag</span>
<span class="tag01 tag01--innovation">tag</span>
<span class="tag01 tag01--topics">tag</span>
```
 
*/

.tag01 {
  font-size: 11px;
  font-size: 0.6875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin: 2px 1px 0 0;
  padding: 3px 4px 2px;
  color: #fff;
  background-color: #000;
  font-weight: bold;
  line-height: 1.1;
  vertical-align: top;
}

.tag01--large {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.tag01--newsReleases {
  background-color: #bf8673;
}

.tag01--csr {
  background-color: #86bf73;
}

.tag01--ir {
  background-color: #ccbb45;
}

.tag01--event {
  background-color: #ac73bf;
}

.tag01--innovation {
  background-color: #73acbf;
}

.tag01--topics {
  background-color: #7386bf;
}

.tag01--job {
  background-color: #e1002a;
}

.tag01--job:first-child {
  margin-left: 0;
}

.newsTagList {
  padding-left: 4px;
}

/*doc
---
title: dataTable01
name: dataTable01
category: tables
---

### modifier
thead内のthに関しては .dataTable01\_\_cell--hTh
tbody内のthに関しては .dataTable01\_\_cell--bTh
tbody内のtdに関しては .dataTable01\_\_cell--bTd


### 省略可のmodifier
各セルに対して
- 強調 .dataTable01\_\_cell--emphasis
- センター寄せ .dataTable01\_\_cell--center
- 右寄せ .dataTable01\_\_cell--right


### その他
caption、infoは省略可
2つとも削除する場合はdataTable01\_\_headerを削除

```block
<div class="dataTable01">
<div class="dataTable01__header">
<p class="dataTable01__caption">Inquiries and comments regarding DENSO products</p>
<p class="dataTable01__info">(00 / 0)</p>
<!-- /dataTable01__header --></div>
<table class="dataTable01__table">
<thead>
<tr>
<th class="dataTable01__cell dataTable01__cell--emphasis dataTable01__cell--hTh">Content</th>
<th class="dataTable01__cell dataTable01__cell--center dataTable01__cell--hTh">Fiscal 2010</th>
<th class="dataTable01__cell dataTable01__cell--right dataTable01__cell--hTh">Fiscal 2011</th>
<th class="dataTable01__cell dataTable01__cell--hTh">Fiscal 2012</th>
<th class="dataTable01__cell dataTable01__cell--hTh">Fiscal 2013</th>
</tr>
</thead>
<tbody>
<tr>
<th class="dataTable01__cell dataTable01__cell--center dataTable01__cell--bTh">Car navigation system</th>
<td class="dataTable01__cell dataTable01__cell--center dataTable01__cell--bTd">56%</td>
<td class="dataTable01__cell dataTable01__cell--right dataTable01__cell--bTd">38%</td>
<td class="dataTable01__cell dataTable01__cell--bTd">39%</td>
<td class="dataTable01__cell dataTable01__cell--bTd">39%</td>
</tr>
<tr>
<th class="dataTable01__cell dataTable01__cell--right dataTable01__cell--bTh">Car navigation system</th>
<td class="dataTable01__cell dataTable01__cell--center dataTable01__cell--bTd">56%</td>
<td class="dataTable01__cell dataTable01__cell--right dataTable01__cell--bTd">38%</td>
<td class="dataTable01__cell dataTable01__cell--bTd">39%</td>
<td class="dataTable01__cell dataTable01__cell--bTd">39%</td>
</tr>
</tbody>
</table>
<!-- /dataTable01 --></div>
```

*/

.dataTable01 {
  margin: 12px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.dataTable01__header {
  display: table;
  width: 100%;
}

.dataTable01__caption {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: table-cell;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.dataTable01__info {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: right;
  line-height: 1.25;
  vertical-align: bottom;
  white-space: nowrap;
}

.dataTable01__table {
  width: 100%;
  margin: 0 0 0;
  padding: 0;
}

.dataTable01__cell {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 6px;
  border: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
}

.dataTable01__cell--emphasis {
  font-weight: bold;
}

.dataTable01__cell--center {
  text-align: center;
}

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

.dataTable01__cell--hTh {
  background-color: #f2f2f2;
}

.dataTable01__cell--bTh {
  background-color: #f7f7f7;
}

.dataTable01__cell--bTd > *:first-child {
  margin-top: 0;
}

/*doc
---
title: formatTable01
name: formatTable01
category: tables
---

### modifier
tbody内のthに関しては .formatTable01\_\_cell--bTh
tbody内のtdに関しては .formatTable01\_\_cell--bTd

### 省略可のmodifier
各セルに対して
- 強調 .formatTable01\_\_cell--emphasis
- センター寄せ .formatTable01\_\_cell--center
- 右寄せ .formatTable01\_\_cell--right

### その他
caption、infoは省略可
2つとも削除する場合はformatTable01\_\_headerを削除

```block
<div class="formatTable01">
<div class="formatTable01__header">
<p class="formatTable01__caption">Inquiries and comments regarding DENSO products</p>
<p class="formatTable01__info">(00 / 0)</p>
<!-- /foramtTable01__header --></div>
<table class="formatTable01__table">
<tbody>
<tr>
<th class="formatTable01__cell formatTable01__cell--bTh">Company name</th>
<td class="formatTable01__cell formatTable01__cell--bTd">DENSO CORPORATION</td>
</tr>
<tr>
<th class="formatTable01__cell formatTable01__cell--center formatTable01__cell--bTh">Net sales</th>
<td class="formatTable01__cell formatTable01__cell--center formatTable01__cell--bTd">consolidated basis ¥4,095.9 billion (US$39.8 billion)<br>non-consolidated basis ¥2,490.8 billion (US$24.2 billion)<br><from April 1, 2013 to March 31, 2014></td>
</tr>
<tr>
<th class="formatTable01__cell formatTable01__cell--right formatTable01__cell--bTh">Net sales</th>
<td class="formatTable01__cell formatTable01__cell--right formatTable01__cell--bTd">consolidated basis ¥4,095.9 billion (US$39.8 billion)<br>non-consolidated basis ¥2,490.8 billion (US$24.2 billion)<br><from April 1, 2013 to March 31, 2014></td>
</tr>
</tbody>
</table>
<!-- /formatTable01 --></div>
```

*/

.formatTable01 {
  margin: 12px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.formatTable01__header {
  display: table;
  width: 100%;
}

.formatTable01__caption {
  display: table-cell;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.formatTable01__info {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: right;
  line-height: 1.25;
  vertical-align: bottom;
  white-space: nowrap;
}

.formatTable01__table {
  width: 100%;
  margin: 0 0 0;
  padding: 0;
}

.formatTable01__cell {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 6px;
  border: 1px solid #e5e5e5;
  text-align: left;
  vertical-align: top;
}

.formatTable01__cell--emphasis {
  font-weight: bold;
}

.formatTable01__cell--center {
  text-align: center;
}

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

.formatTable01__cell--bTh {
  background-color: #f7f7f7;
}

.formatTable01__cell--bTd > *:first-child {
  margin-top: 0;
}

.with_img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 1em 0 0;
}

/*doc
---
title: videoBlock01
name: videoBlock0101
category: video
---

videoを表示するためのベーススタイル

```block
<div class="videoBlock01">
<div class="videoBlock01__content">
<script language="JavaScript" type="text/javascript" src="http://admin.brightcove.co.jp/js/BrightcoveExperiences.js"></script>
<object id="myExperience835091162002" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="408" />
<param name="height" value="230" />
<param name="playerID" value="797342306001" />
<param name="playerKey" value="AQ~~,AAAAuaxPi6E~,v28C-1DVou7M7fm6mQTAeyg7plawFo0O" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="@videoPlayer" value="835091162002" />
</object>
<script type="text/javascript">brightcove.createExperiences();</script>
<!-- /videoBlock01__content --></div>
<p class="videoBlock01__caption">Lorem ipsum </p>
<!-- /videoBlock01 --></div>
```

*/

.videoBlock01 {
  margin: 32px 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.videoBlock01__content {
  position: relative;
  margin: 0;
  padding: 0 0 56.25%;
  overflow: hidden;
}

.videoBlock01 object,
.videoBlock01 iframe,
.videoBlock01 embed {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.videoBlock01__caption {
  margin: 12px 0 0;
  padding: 0;
  text-align: center;
}

.videoBlock01__caption--emphasis {
  background-color: #404040;
  color: #fff;
}

/*doc
---
title: contactBlock01
name: contactBlock01
category: contact
---

Contactのベーススタイル

```block

```

*/

.contactBlock01 {
  margin-top: 8px;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.contactBlock01__contact {
  margin: 0;
}

.contactBlock01__contactBody {
  margin-left: 0;
}

.contactBlock01__contactTitle {
  line-height: 1;
}

.contactBlock01__contactCall {
  font-size: 30px;
  font-size: 1.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #e1002a;
  margin: 0;
  padding: 0;
  margin-top: 12px;
  line-height: 1;
}

.contactBlock01__contactCall small {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  font-weight: normal;
  white-space: nowrap;
}

.contactBlock01__contactHours {
  margin: 0;
  padding: 0;
}

.jumbotron {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.jumbotron__visual {
  margin-top: 12px;
  text-align: center;
}

.jumbotron__visual--ld {
  display: block;
}

.jumbotron__visual--sd {
  display: none;
}

.jumbotron__img:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.fa-excol {
  color: #ffb739;
}

audio {
  width: 100%;
}

.visible_sd {
  display: none;
}

/*@media only screen and (max-width : 640px) { @content; }*/

/*doc
---
title: breadcrumbs
name: breadcrumbs
category: breadcrumbs
---

パンくず

```block
<nav role="navigation" class="breadcrumbs">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item"><a href="/en/" class="breadcrumbs__link">Home</a></li>
<li class="breadcrumbs__item"><a href="/en/test/">test</a></li>
<li class="breadcrumbs__item"><a href="/en/test/test2" class="breadcrumbs__link">test2</a></li>
<li class="breadcrumbs__item"><em class="breadcrumbs__current">test3</em></li>
</ul>
</nav>
```

*/

.breadcrumbs {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  border-top: 1px solid #e5e5e5;
  background-color: #f2f2f2;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .breadcrumbs {
  min-width: 1018px;
}

.breadcrumbs__list {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  list-style: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ie8 .breadcrumbs__list {
  min-width: 978px;
}

.breadcrumbs__item {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.breadcrumbs__item:before {
  content: ">";
  position: relative;
  top: -1px;
  padding: 0 6px 0 3px;
  color: #ccc;
}

.breadcrumbs__item:first-child:before {
  content: "";
  display: none;
}

.breadcrumbs__item:first-child .breadcrumbs__link .fa {
  padding-right: 0;
}

.breadcrumbs__item:first-child .breadcrumbs__link:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.breadcrumbs__item:first-child .breadcrumbs__link:after {
  /*padding: 0 5px;*/
}

.breadcrumbs__item .fa {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.breadcrumbs__current {
  font-weight: normal;
}

.breadcrumbs__text {
  display: none;
}

/*doc
---
title: discoverMore
name: discoverMore
category: discoverMore
---
*/

.discoverMore {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  border-top: 1px solid #e5e5e5;
  background-color: #f7f7f7;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .discoverMore {
  min-width: 1018px;
}

.discoverMore__content {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding: 12px 20px 20px;
}

.ie8 .discoverMore__content {
  min-width: 978px;
}

.discoverMore__heading {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  line-height: 1.25;
}

.discoverMore__list {
  *zoom: 1;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.discoverMore__list:before,
.discoverMore__list:after {
  content: " ";
  display: table;
}

.discoverMore__list:after {
  clear: both;
}

.discoverMore__item {
  float: left;
  box-sizing: border-box;
  width: 22.69939%;
  margin-left: 3.06748%;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-top: 10px;
  padding: 0;
  line-height: 1.25;
}

.discoverMore__item:first-child {
  margin-left: 0;
}

.discoverMore__link {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: block;
}

.discoverMore__link:hover .discoverMore__img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.discoverMore__img {
  display: block;
  margin-bottom: 4px;
}

/*doc
---
title: globalHeader
name: globalHeader
category: header
---

ヘッダ

```block
<header class="gHeader">
<div class="gHeader__content">
<h1 class="gHeader__logo"><a href="/en/">Logo<span class="gHeader__country">Global</span></a></h1>
<nav class="gHeader__nav" role="navigation">
<ul class="gHeader__gNav">
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">About Us</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">Innovation</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">News</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">Careers</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">Products</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">CSR</span></a></li>
<li class="gHeader__gNavItem"><a href="__dummy__" class="gHeader__gNavLink"><span class="gHeader__gNavLinkText">Investors</span></a></li>
</ul>
<ul class="gHeader__infoNav">
<li class="gHeader__infoNavItem"><a href="__dummy__" class="gHeader__infoNavLink"><i class="fa fa-exclamation-circle"></i>Important Notice</a></li>
<li class="gHeader__infoNavItem"><a href="__dummy__" class="gHeader__infoNavLink"><i class="fa fa-envelope"></i>Contact Us</a></li>
<li class="gHeader__infoNavItem"><a href="__dummy__" class="gHeader__infoNavLink"><i class="fa fa-globe"></i>Country / Language</a></li>
<li class="gHeader__infoNavItem"><a href="#" class="gHeader__infoNavLink"><i class="fa fa-search"></i>Search</a></li>
</ul>
<!-- /gHeader__nav --></nav>
<!-- /gHeader__content --></div>
<!-- /gHeader --></header>
```

*/

.gHeader {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  z-index: 2;
  /*padding: 0 0 10px;*/
  background-color: #fff;
  box-shadow: 0 0 7px #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .gHeader {
  min-width: 1018px;
}

.ie8 .gHeader {
  border-bottom: 2px solid #ccc;
}

.gHeader__wig {
  height: 99px;
  padding: 0 20px;
}

.gHeader__wigInner {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  background-color: #f7f7f7;
}

.gHeader__wigLogo {
  height: 42px;
  left: 0;
  line-height: 30px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 28px;
  width: 124px;
}

.gHeader--global .gHeader__wigLogo {
  width: 136px;
  height: 52px;
  top: 26px;
}

.gHeader__wigLogo a {
  display: inline-block;
}

.gHeader__wigLogo a img {
  max-width: inherit;
}

.gHeader__wigNav {
  list-style: none;
  font-size: 0;
  position: absolute;
  right: 0;
  top: -57px;
  padding: 0;
  min-width: 290px;
  text-align: right;
}

.gHeader__wigNavItem {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin-left: .75em;
}

.gHeader__wigNavItem:first-child {
  border-right: solid 1px #ccc;
  padding-right: .75em;
}

.gHeader__content {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding-bottom: 10px;
}

.ie8 .gHeader__content {
  min-width: 978px;
}

.gHeader__logo {
  margin: 0;
  padding: 0;
  line-height: 1.1;
}

.gHeader__logoLink {
  color: #666;
  display: inline-block;
}

.gHeader__logoImg {
  max-width: 100%;
  height: auto;
}

.gHeader__country {
  font-size: 11px;
  font-size: 0.6875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  margin: 0;
  padding: 16px 0 0 20px;
  color: #666;
  vertical-align: top;
}

.gHeader__nav {
  clear: both;
  margin: 0;
  padding: 0;
}

.gHeader__gNav {
  *zoom: 1;
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
}

.gHeader__gNav:before,
.gHeader__gNav:after {
  content: " ";
  display: table;
}

.gHeader__gNav:after {
  clear: both;
}

.gHeader__gNavItem {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  text-align: center;
}

.gHeader__gNavItem:after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 1px;
  height: 1em;
  border-right: 1px solid #e5e5e5;
}

.gHeader__gNavItem:first-child {
  /*width: 138px;*/
}

.gHeader__gNavItem:first-child:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 1px;
  height: 1em;
  border-left: 1px solid #e5e5e5;
}

.gHeader__gNavLink {
  display: inline-block;
  margin: 0;
  padding: 0 15px 10px;
  color: #666;
}

.gHeader__gNavLink:visited {
  color: #666;
}

.gHeader__gNavLink:hover,
.gHeader__gNavLink--current,
.gHeader__gNavLink--open {
  color: #666;
  text-decoration: none;
}

.gHeader__gNavLink:hover .gHeader__gNavLinkText,
.gHeader__gNavLink--current .gHeader__gNavLinkText,
.gHeader__gNavLink--open .gHeader__gNavLinkText {
  border-bottom: 2px solid #e1002a;
}

.gHeader__gNavLinkText {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.gHeader__infoNav {
  list-style: none;
  position: absolute;
  display: inline-block;
  right: 20px;
  top: 0;
  padding: 0;
  margin: 0;
}

.gHeader__infoNavItem {
  display: inline-block;
  margin: 0 0 0 10px;
  padding: 0;
  line-height: 1.25;
}

.gHeader__infoNavItem--lang {
  float: left;
  margin: -3px 20px 0 0;
}

.gHeader__infoNavItem--wig {
  margin: 0;
}

.gHeader__infoNavLink {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #666;
}

.gHeader__infoNavLink:hover,
.gHeader__infoNavLink:visited {
  color: #666;
}

.gHeader__infoNavLink .fa {
  color: #ccc;
  font-size: 114.28%;
}

.gHeader__infoNavLink .fa-info-circle {
  color: #e1002a;
}

.gHeader__language {
  border: solid 1px #e5e5e5;
  border-radius: 3px;
  display: inline-block;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.gHeader__languageItem {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  border-left: solid 1px #e5e5e5;
  line-height: 1;
}

.gHeader__languageItem:first-child {
  border-left-width: 0;
}

.gHeader__languageLink {
  background-color: #f2f2f2;
  padding: .5em .75em;
  display: block;
}

.gHeader__languageLink--active,
.gHeader__languageLink--active:hover {
  background-color: #fff;
  color: #333;
}

.gHeader__search {
  *zoom: 1;
  -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  filter: alpha(opacity=0);
  display: block;
  position: absolute;
  right: 0;
  top: -80px;
  width: 261px;
  margin: 0;
  padding: 12px 35px 0 10px;
  background-color: #f2f2f2;
}

.gHeader__search:before,
.gHeader__search:after {
  content: " ";
  display: table;
}

.gHeader__search:after {
  clear: both;
}

.gHeader__search #___gcse_0,
.gHeader__search .gHeader__searchClose {
  display: none;
}

.gHeader__search--open {
  opacity: 1;
  filter: alpha(opacity=100);
  top: -65px;
}

.gHeader__search--open #___gcse_0,
.gHeader__search--open .gHeader__searchClose {
  display: block;
}

.gHeader__searchClose {
  position: absolute;
  right: 14px;
  top: 23px;
  width: 12px;
  height: 12px;
  margin: 0;
  padding: 0;
  line-height: 1.25;
  text-align: center;
}

.gHeader__searchCloseLink {
  display: block;
  width: 12px;
  height: 12px;
  color: #ccc;
}

.gHeader__searchCloseLink:before,
.gHeader__searchCloseLink:after {
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  width: 12px;
  height: 2px;
  background-color: #ccc;
}

.gHeader__searchCloseLink:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 0;
}

.gHeader__searchCloseLink:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 0;
}

.ie8 .gHeader__searchCloseLink:before,
.ie8 .gHeader__searchCloseLink:after,
.ie9 .gHeader__searchCloseLink:before,
.ie9 .gHeader__searchCloseLink:after {
  display: none;
}

.gHeader__searchCloseLink:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.gHeader__searchCloseLink:hover,
.gHeader__searchCloseLink:visited {
  color: #ccc;
}

.gHeader__searchCloseLink .fa {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: none;
  position: relative;
  top: -3px;
  padding: 0;
  vertical-align: top;
}

.ie8 .gHeader__searchCloseLink .fa,
.ie9 .gHeader__searchCloseLink .fa {
  display: inline-block;
}

.gHeader__searchText {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  float: left;
  width: 207px;
  height: 21px;
  margin: 3px 0 0;
  padding: 2px 5px;
  border: 1px solid #f2f2f2;
}

.gHeader__searchBtn {
  font-size: 10px;
  font-size: 0.625rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  float: left;
  width: 43px;
  height: 27px;
  margin: 3px 0 0 -1px;
  padding: 3px 15px;
  border: 1px solid #4163b1;
  border-left: none;
  background-color: #4163b1;
  color: #999;
  font-family: FontAwesome;
}

.gHeader .gsc-control-cse {
  padding: 0;
  border: none;
  background-color: transparent;
}

.gHeader form.gsc-search-box {
  margin-bottom: 0;
}

.gHeader .gsc-input {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding-right: 0 !important;
}

.gHeader input.gsc-input,
.gHeader .gsc-input-box,
.gHeader .gsc-input-box-hover,
.gHeader .gsc-input-box-focus {
  border-color: #e5e5e5;
  box-shadow: none;
}

.gHeader td.gsc-search-button {
  position: relative;
}

.gHeader input.gsc-search-button,
.gHeader input.gsc-search-button:hover,
.gHeader input.gsc-search-button:focus {
  margin-left: -1px;
  border-radius: 0;
  border-color: #4163b1;
  background-color: #4163b1;
}

.gHeader input.gsc-search-button:hover,
.gHeader input.gsc-search-button:focus {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.gHeader input.gsc-search-button-v2 {
  margin-top: 3px;
  padding: 6px 15px;
}

.gHeader .gsst_b {
  display: none !important;
  text-align: center;
}

.gHeader .gsst_a {
  width: 14px;
  height: 14px;
  margin: 6px 0 0;
  padding: 1px 0 0;
  background-color: #ccc;
  color: #f7f7f7;
  border-radius: 7px;
}

.gHeader .gsst_a .gscb_a {
  color: #fff;
  font-size: 16px;
  vertical-align: top;
}

.gHeader .gsst_a:hover {
  color: #f7f7f7;
}

.gHeader .gsst_a:hover .gscb_a {
  color: #f7f7f7;
}

.gHeader .mobile-gHeader__menu {
  display: none;
}

/*doc
---
title: localNavigation
name: localNavigation
category: localNavigation
---

ローカルナビ

```block
```

*/

.localNav {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  background-color: #f7f7f7;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .localNav {
  min-width: 1018px;
}

.localNav__list {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  list-style: none;
  padding-top: 10px;
  padding-bottom: 15px;
  background-color: #f7f7f7;
}

.ie8 .localNav__list {
  min-width: 978px;
}

.localNav__item {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: inline-block;
  position: relative;
  margin: 10px 5px 0 0;
  padding: 0 10px 0 0;
  border-right: 1px solid #e5e5e5;
  line-height: 1.25;
}

.localNav__item:first-child {
  padding-left: 1.2em;
  font-weight: bold;
}

.localNav__item:first-child .fa {
  position: absolute;
  left: 0;
  top: -0.05em;
}

.localNav__item:last-child {
  margin-right: 0;
  padding-right: 0;
  border: none;
}

.localNav__link {
  color: #666;
}

.localNav__link:visited {
  color: #666;
}

.localNav__link:hover {
  color: #666;
  border-bottom: 2px solid #e1002a;
  text-decoration: none;
}

.localNav__link--current {
  border-bottom: 2px solid #e1002a;
}

.localNav__link .fa {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.localNav .mobile-localNav__menu {
  display: none;
}

.localNav__list *:focus {
  outline: none;
}

.localNav__tmbItem {
  padding-right: 0;
}

.localNav__tmbLink {
  *zoom: 1;
  font-size: 13px;
  font-size: 0.8125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #000;
  display: block;
}

.localNav__tmbLink:before,
.localNav__tmbLink:after {
  content: " ";
  display: table;
}

.localNav__tmbLink:after {
  clear: both;
}

.localNav__tmbLink:visited {
  color: #000;
}

.localNav__tmbLink.localNav__tmbLink--current,
.localNav__tmbLink:hover {
  color: #000;
  text-decoration: none;
}

.localNav__tmbLink.localNav__tmbLink--current .localNav__tmbImg,
.localNav__tmbLink:hover .localNav__tmbImg {
  border: solid 2px #e01222;
  padding: 0;
}

.localNav__tmbImg {
  border: solid 1px #e5e5e5;
  float: left;
  padding: 1px;
  width: 45px;
}

.localNav__tmbTxt {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  width: 68%;
  padding-left: 15px;
}

.localNav--slide {
  background-color: #fff;
  border-bottom: solid 1px #e5e5e5;
}

.localNav--slide > .localNav__list {
  display: none;
}

.localNav__md {
  margin: 0 auto;
  max-width: 810px;
  padding: 14px 0;
  position: relative;
  width: 82.82209%;
}

.localNav__md .localNav__hdg {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  font-weight: normal;
  margin: 0 0 10px;
}

.localNav__md .localNav__list {
  padding: 0;
  background-color: #fff;
}

.localNav__md .slick-prev,
.localNav__md .slick-next {
  background-color: transparent;
  border-width: 0;
  cursor: pointer;
  display: block;
  height: 30px;
  margin-top: -15px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 30px;
}

.localNav__md .slick-prev .fa,
.localNav__md .slick-next .fa {
  font-size: 20px;
  font-size: 1.25rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #888;
  font-weight: bold;
}

.localNav__md .slick-prev.slick-disabled,
.localNav__md .slick-next.slick-disabled {
  cursor: default;
}

.localNav__md .slick-prev.slick-disabled .fa,
.localNav__md .slick-next.slick-disabled .fa {
  color: #e5e5e5;
}

.localNav__md .slick-prev {
  left: -40px;
}

.localNav__md .slick-next {
  right: -40px;
}

.ie8 .localNav__md .slick-next {
  right: 140px;
}

.localNav__md .localNav__item {
  margin: 0;
  border-right-width: 0;
  line-height: 1.5;
  margin-right: 3px;
}

.localNav__md .localNav__item:first-child {
  padding-left: 0;
  font-weight: normal;
}

.localNav__md .localNav__tmbItem {
  width: 25%;
  max-width: 205px;
}

/* Slider */

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.ie8 .slick-list {
  width: 810px;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.megaMenu {
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  width: 100%;
  height: 0;
  border-top: 1px solid #e5e5e5;
  background-color: #fff;
  box-shadow: 0 7px 7px -7px #e5e5e5;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .megaMenu {
  min-width: 1018px;
  border-bottom: 1px solid #e5e5e5;
}

.megaMenu__category {
  -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 0;
  filter: alpha(opacity=0);
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  visibility: hidden;
  overflow: hidden;
}

.megaMenu__category--open {
  -webkit-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
}

.megaMenu__content {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding: 25px 20px;
}

.ie8 .megaMenu__content {
  min-width: 978px;
}

.megaMenu__titleLink {
  font-size: 26px;
  font-size: 1.625rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  line-height: 1.25;
}

.megaMenu__cols {
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid #e5e5e5;
}

.megaMenu__nav {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.megaMenu__nav--1of2 {
  *zoom: 1;
  margin-top: 10px;
}

.megaMenu__nav--1of2:before,
.megaMenu__nav--1of2:after {
  content: " ";
  display: table;
}

.megaMenu__nav--1of2:after {
  clear: both;
}

.megaMenu__nav--1of2 .megaMenu__navItem {
  width: 48.46626%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin-left: 3.06748%;
  /*@media only screen and (max-width : 640px) { @content; }*/
  float: left;
}

.megaMenu__nav--1of2 .megaMenu__navItem:nth-child(odd),
.megaMenu__nav--1of2 .megaMenu__navItem--odd {
  clear: left;
  margin-left: 0;
}

.megaMenu__navItem {
  margin-top: 10px;
  padding: 0;
  line-height: 1.25;
}

.megaMenu__figureLink {
  display: block;
  margin: 25px 0 0;
  padding: 0;
}

.megaMenu__figureLinkFigure {
  margin: 0;
  padding: 0;
}

.megaMenu__figureLinkCaption {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 5px 0 0;
  padding: 0;
}

.megaMenu__news {
  margin: 25px 0 0;
  padding: 15px;
  background-color: #f7f7f7;
}

.megaMenu__newsTitle {
  font-size: 16px;
  font-size: 1rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.megaMenu__newsList {
  list-style: none;
  margin: 15px 0 0;
  padding: 15px;
  background-color: #fff;
}

.megaMenu__newsItem {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #e5e5e5;
}

.megaMenu__newsItem:first-child {
  margin-top: 0;
  padding-top: 0;
  border: none;
}

.megaMenu__newsDate {
  font-size: 11px;
  font-size: 0.6875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: block;
  line-height: 1.25;
}

.megaMenu__close {
  position: absolute;
  right: 20px;
  top: 30px;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  line-height: 1.25;
}

.megaMenu__closeLink {
  display: block;
  width: 20px;
  height: 20px;
  color: #ccc;
}

.megaMenu__closeLink:before,
.megaMenu__closeLink:after {
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  width: 22px;
  height: 3px;
  background-color: #ccc;
}

.megaMenu__closeLink:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: -2px;
}

.megaMenu__closeLink:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 0;
}

.ie8 .megaMenu__closeLink:before,
.ie8 .megaMenu__closeLink:after,
.ie9 .megaMenu__closeLink:before,
.ie9 .megaMenu__closeLink:after {
  display: none;
}

.megaMenu__closeLink:hover,
.megaMenu__closeLink:visited {
  color: #ccc;
}

.megaMenu__closeLink:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.megaMenu__closeLink .fa {
  font-size: 18px;
  font-size: 1.125rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  display: none;
  padding: 0;
}

.ie8 .megaMenu__closeLink .fa,
.ie9 .megaMenu__closeLink .fa {
  display: inline-block;
}

/*doc
---
title: doc
name: doc
category: doc
---

メインコンテンツ

```block
```

*/

.doc {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  z-index: 1;
  margin: 0;
  padding: 0;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .doc {
  min-width: 1018px;
}

.doc__content {
  padding: 0 0 40px;
}

/*doc
---
title: globalFooter
name: globalFooter
category: footer
---

フッタ

```block
<footer class="gFooter" role="contentinfo">
<div class="gFooter__content cols">
<nav class="gFooter__gNav cols__col cols__col--3">
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">About Us</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">DENSO at a Glance</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Philosophy &amp; Vision</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Facts &amp; Figures</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Business Field</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Our Strength</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Global Network</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Heritage</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Excective Management</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Corporate Brochure</a></li>
</ul>
</li>
</ul>
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Innovation</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Topics Story #1</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Topics Story #2</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Topics Story #3</a></li>
</ul>
</li>
</ul>
<!-- /gFooter__gNav --></nav>
<nav class="gFooter__gNav cols__col cols__col--3">
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">News</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">News Release</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Investors</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Events</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Innovation</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Topics</a></li>
</ul>
</li>
</ul>
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Products</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">OEM Automotive Systems and Components</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Automotive Service Parts and Accessories</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Industrial Systems</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Consumer Products</a></li>
</ul>
</li>
</ul>
<!-- /gFooter__gNav --></nav>
<nav class="gFooter__gNav cols__col cols__col--3">
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Careers</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">What We Do</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Life at DENSO</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Joining DENSO Team</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">People at DENSO</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Jobs &amp; Application</a></li>
</ul>
</li>
</ul>
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Aiming to be a trustworthy company in harmony with society</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Business Overview</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR Management</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Report on Social Responsibility</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Enviroment Report</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR Report</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR History</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Editorial Policy of CSR Information</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Financial Report</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">External Recognition for Social and Environmental Activities</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Glossary</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">CSR Movies</a></li>
</ul>
</li>
</ul>
<!-- /gFooter__gNav --></nav>
<nav class="gFooter__gNav cols__col cols__col--3">
<ul class="gFooter__gNavList">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Investors</a>
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Message from the President</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Financial Information</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">IR Library</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">IR Calendar</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Stock Information</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">Bonds Information</a></li>
<li class="gFooter__gNavItem"><a href="__dummy__" class="gFooter__gNavLink">FAQ</a></li>
</ul>
</li>
</ul>
<ul class="gFooter__gNavList gFooter__gNavList--follow">
<li class="gFooter__gNavItem">Follow Us
<ul class="gFooter__gNavList gFooter__gNavList--child">
<li class="gFooter__gNavItem gFooter__gNavItem--icon"><a href="__dummy__" class="gFooter__gNavLink"><i class="fa fa-facebook" title="Facebook"></i></a></li>
<li class="gFooter__gNavItem gFooter__gNavItem--icon"><a href="__dummy__" class="gFooter__gNavLink"><i class="fa fa-twitter" title="Twitter"></i></a></li>
<li class="gFooter__gNavItem gFooter__gNavItem--icon"><a href="__dummy__" class="gFooter__gNavLink"><i class="fa fa-google-plus" title="Google+"></i></a></li>
</ul>
</li>
</ul>
<!-- /gFooter__gNav --></nav>
<!-- /gFooter__content --></div>
<div class="gFooter__utility">
<div class="gFooter__content">
<ul class="gFooter__infoNav">
<li class="gFooter__infoNavItem"><a href="__dummy__" class="gFooter__infoNavLink">Conract Us</a></li>
<li class="gFooter__infoNavItem"><a href="__dummy__" class="gFooter__infoNavLink">Importance Notice</a></li>
<li class="gFooter__infoNavItem"><a href="__dummy__" class="gFooter__infoNavLink">Privacy Policy</a></li>
<li class="gFooter__infoNavItem"><a href="__dummy__" class="gFooter__infoNavLink">Terms of Use</a></li>
<li class="gFooter__infoNavItem"><a href="__dummy__" class="gFooter__infoNavLink">Procurement</a></li>
</ul>
<p class="gFooter__copyright"><small>Copyright (C) DENSO CORPORATION, All rights reserved.</small></p>
<!-- /gFooter__content --></div>
<!-- /gFooter__utility --></div>
<!-- /gFooter --></footer>
```

*/

.gFooter {
  position: relative;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 0;
  background-color: #404040;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.ie8 .gFooter {
  min-width: 1018px;
}

.gFooter__content {
  *zoom: 1;
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 0 20px;
  /*@media only screen and (max-width : 640px) { @content; }*/
  padding: 40px 20px;
}

.gFooter__content:before,
.gFooter__content:after {
  content: " ";
  display: table;
}

.gFooter__content:after {
  clear: both;
}

.ie8 .gFooter__content {
  min-width: 978px;
}

.gFooter__utility {
  border-top: 1px solid #666;
}

.gFooter__utility .gFooter__content {
  padding: 10px 20px;
}

.gFooter__cols {
  padding-right: 0;
  padding-left: 0;
}

.gFooter__gNavList {
  list-style: none;
  position: relative;
  margin: 40px 0 0;
  padding: 0;
}

.gFooter__gNavList:first-child {
  margin-top: 0;
}

.gFooter__gNavList--child {
  margin-top: 10px;
}

.gFooter__gNavList--child .gFooter__gNavItem {
  font-size: 12px;
  font-size: 0.75rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
}

.gFooter__gNavList--child .gFooter__gNavLink {
  color: #999;
}

.gFooter__gNavList--child .gFooter__gNavLink:hover,
.gFooter__gNavList--child .gFooter__gNavLink:visited {
  color: #999;
}

.gFooter__gNavList--follow {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #666;
}

.gFooter__gNavList--follow .gFooter__gNavItem--icon {
  display: inline-block;
  margin-right: 10px;
  text-align: center;
}

.gFooter__gNavList--follow .gFooter__gNavItem--icon .gFooter__gNavLink {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background-color: #999;
  color: #404040;
  vertical-align: middle;
}

.gFooter__gNavList--follow .gFooter__gNavItem--icon .gFooter__gNavLink:hover {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.gFooter__gNavList--follow .gFooter__gNavItem--icon .fa {
  font-size: 24px;
  font-size: 1.5rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  margin: 0;
  padding: 5px 0 0;
}

.gFooter__gNavList--follow .gFooter__gNavList--child {
  margin-top: 10px;
}

.gFooter__gNavItem {
  position: relative;
  margin: 4px 0 0;
  padding: 0;
  color: #fff;
  line-height: 1.25;
}

.gFooter__gNavLink {
  color: #fff;
}

.gFooter__gNavLink:hover,
.gFooter__gNavLink:visited {
  color: #fff;
}

.gFooter__gNavHiddenText {
  display: none;
}

.gFooter__login {
  border-top: 1px solid #666;
}

.gFooter__loginContent {
  position: relative;
  max-width: 978px;
  margin: 0 auto;
  padding: 10px 20px;
}

.gFooter__loginForm {
  margin: 0;
  padding: 0;
}

.gFooter__loginForm label {
  color: #fff;
}

.gFooter__loginForm * {
  -webkit-appearance: none;
}

.gFooter__loginInput {
  max-width: 195px;
  background-color: #4d4d4d;
  padding: 4px 10px;
  border-width: 0;
  margin-left: 10px;
}

.gFooter__loginInput:first-child {
  margin-left: 30px;
}

.gFooter__loginInput:focus {
  outline: dotted 1px #666;
}

.gFooter__loginButton {
  background-color: #999;
  border-width: 0;
  color: #333;
  margin-left: 10px;
  padding: 4px 16px;
}

.gFooter__loginButton:focus {
  outline: dotted 1px #666;
}

.gFooter__loginButton:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.gFooter__infoNav {
  float: left;
  margin: 0;
  padding: 0;
}

.gFooter__infoNavItem {
  display: inline-block;
  padding: 0 0 0 5px;
  line-height: 1.25;
}

.gFooter__infoNavItem:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 1px;
  width: 1px;
  height: 10px;
  margin: 0 10px 0 0;
  background-color: #fff;
}

.gFooter__infoNavItem:first-child {
  padding-left: 0;
  border-left: none;
}

.gFooter__infoNavItem:first-child:before {
  display: none;
}

.gFooter__infoNavLink {
  font-size: 10px;
  font-size: 0.625rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  color: #fff;
  vertical-align: middle;
}

.gFooter__infoNavLink:visited {
  color: #fff;
}

.gFooter__infoNavLink:hover {
  color: #fff;
}

.gFooter__infoNavLink .fa-external-link {
  padding: 0 0 0 4px;
}

.gFooter__copyright {
  font-size: 14px;
  font-size: 0.875rem;
  /*@media only screen and (max-width : 640px) { @content; }*/
  float: right;
  margin: 0;
  padding: 0;
  color: #999;
  line-height: 1.25;
}

.gFooter--tiny .gFooter__infoNav,
.gFooter--tiny .gFooter__copyright {
  float: none;
}

.gFooter--tiny .gFooter__gNav {
  float: right;
}

.gFooter--tiny .gFooter__gNavItem {
  margin-top: 2px;
}

.gFooter--tiny .gFooter__gNavList--follow {
  border-top-width: 0;
  padding-top: 0;
  margin-top: 0;
}

.gFooter--tiny .gFooter__gNavList--child {
  display: inline-block;
  margin: 0 0 0 20px;
}

@media only screen and (max-width: 1017px) {
  .cols {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 20px;
  }

  .cols--full {
    padding: 0;
  }

  .cols--expansion {
    padding: 0;
  }

  .cols--emphasis {
    padding: 0 20px;
  }

  .cols .cols {
    padding-right: 0;
    padding-left: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .accordionBlock01__col {
    position: relative !important;
    float: none;
    width: 100%;
    margin: 0;
    border-left: none;
  }

  .accordionBlock01__col:nth-child(odd),
  .accordionBlock01__col--oddChild {
    border-right: none;
  }

  .accordionBlock01__figure {
    width: 100px;
  }

  .button01 {
    margin-top: 18px;
  }

  .keyVisual01 {
    width: auto;
  }

  .keyVisual01__figure {
    margin: 0 -29%;
  }

  .menuBlockSet01__description {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .menuBlockSet01__info {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .menuBlockSet01 .text01--small {
    display: none;
  }

  .tab02__item {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .dataTable01 {
    overflow: auto;
    -webkit-overflow-scrolling: auto;
  }

  .dataTable01::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .dataTable01::-webkit-scrollbar:horizontal {
    height: 5px;
    background-color: #fff;
  }

  .dataTable01::-webkit-scrollbar-thumb:horizontal {
    background-color: #ccc;
    border-radius: 5px;
  }

  .gHeader__gNavItem {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .megaMenu__cols {
    padding: 0;
  }

  .doc__content {
    position: relative;
    max-width: 978px;
    margin: 0 auto;
    padding: 0 20px;
    /*@media only screen and (max-width : 640px) { @content; }*/
    max-width: 1018px;
    padding: 0 0 60px;
  }

  .ie8 .doc__content {
    min-width: 978px;
  }

  .gFooter__cols {
    padding-right: 0;
    padding-left: 0;
  }
}

@media only screen and (max-width: 1017px) and (max-width: 767px) {
  .menuBlockSet01__description {
    font-size: 1rem;
  }

  .menuBlockSet01__info {
    font-size: 0.85714rem;
  }

  .tab02__item {
    font-size: 1rem;
  }

  .gHeader__gNavItem {
    font-size: 1rem;
  }

  .doc__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  html {
    position: relative;
    font-size: 14px;
  }

  body {
    font-size: 1rem;
  }

  body {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .hr01 {
    margin: 30px 0 0;
  }

  .fa {
    /*@include font-size(14);*/
  }

  .noMobile {
    display: none !important;
  }

  .addthis_sharing_toolbox {
    margin-top: 30px;
  }

  .cols {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0 20px;
  }

  .cols--full {
    padding: 0;
  }

  .cols--expansion {
    padding: 0;
  }

  .cols--emphasis {
    padding: 0 20px;
  }

  .cols .cols {
    padding-right: 0;
    padding-left: 0;
  }

  .cols__col--1 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--2 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--3 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--4 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--5 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--6 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--7 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--8 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--9 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--10 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--10 {
    width: 100%;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--1 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--2 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--3 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--4 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--5 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--6 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--7 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--8 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--9 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--10 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--11 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--10 .cols {
    padding: 0;
  }

  .cols__col--10 .cols__col--12 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .cols__col--11 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--12 {
    float: none;
    margin: 0;
    width: 100%;
  }

  .cols__col--12 {
    width: 100%;
  }

  .cols__col--12 .cols {
    padding: 0;
  }

  .accordionBlock01__heading {
    font-size: 1.28571rem;
  }

  .accordionBlock01__text {
    font-size: 1rem;
  }

  .carousel01__heading {
    font-size: 1.28571rem;
  }

  .carousel01__text {
    font-size: 1rem;
  }

  .carousel01__arrowLink {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }

  .carousel01__arrowLink:before,
  .carousel01__arrowLink:after {
    width: 12px;
    height: 3px;
    margin-left: -6px;
    background-color: #fff;
  }

  .carousel01__arrowLink:before {
    top: 15px;
  }

  .carousel01__arrowLink:after {
    top: 22px;
  }

  .box01 {
    margin: 14px 0 0;
    padding: 14px;
  }

  .box01--border {
    padding: 12px;
  }

  .box02 {
    margin: 14px 0 0;
    padding: 14px 0;
  }

  .faqBlock01__heading {
    font-size: 1.14286rem;
  }

  .faqBlock01__heading:before {
    font-size: 1.28571rem;
  }

  .faqBlock01__content:before {
    font-size: 1.28571rem;
  }

  .faqBlock01__heading {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .faqBlock01__content {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .figureBlock01__visuals--left {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .figureBlock01__visuals--left {
    width: 100%;
    max-width: 100%;
  }

  .figureBlock01__visuals--right {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .figureBlock01__visuals--right {
    width: 100%;
    max-width: 100%;
  }

  .figureBlock01__visuals--large {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .figureBlock01__visuals--large {
    width: 100%;
    max-width: 100%;
  }

  .figureBlock01__visuals--small {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .figureBlock01__visuals--small {
    width: 100%;
    max-width: 100%;
  }

  .figureBlock01__caption {
    font-size: 1rem;
  }

  .cols__col--10 .figureBlock01__head {
    width: 100%;
    max-width: 100%;
  }

  .figureBlock01 {
    margin-top: 14px;
  }

  .figureBlock01__visuals--left {
    float: none;
    margin: 0;
  }

  .figureBlock01__visuals--left + .figureBlock01__content {
    margin-top: 14px;
  }

  .figureBlock01__visuals--left + .figureBlock01__content .heading01--lv02 {
    margin-left: 0;
  }

  .figureBlock01__visuals--left.figureBlock01__visuals--small {
    margin: 0;
  }

  .figureBlock01__visuals--left.figureBlock01__visuals--xSmall {
    float: left;
    width: 138px;
    margin: 0 10px 10px 0;
  }

  .figureBlock01__visuals--left.figureBlock01__visuals--xSmall + .figureBlock01__content {
    margin-top: 0;
  }

  .figureBlock01__visuals--left.figureBlock01__visuals--noSpace {
    margin-bottom: 0;
  }

  .figureBlock01__visuals--right {
    float: none;
    margin: 0;
  }

  .figureBlock01__visuals--right + .figureBlock01__content {
    margin-top: 14px;
  }

  .figureBlock01__visuals--right.figureBlock01__visuals--small {
    margin: 0;
  }

  .figureBlock01__visuals--right.figureBlock01__visuals--xSmall {
    float: right;
    width: 138px;
    margin: 0 0 10px 10px;
  }

  .figureBlock01__visuals--right.figureBlock01__visuals--xSmall + .figureBlock01__content {
    margin-top: 0;
  }

  .figureBlock01__visuals--right.figureBlock01__visuals--noSpace {
    margin-bottom: 0;
  }

  .figureBlock01__visuals--xSmall {
    width: 138px;
  }

  .figureBlock01__visuals--xSmall + .figureBlock01__content {
    margin-top: 0;
  }

  .figureBlock01__visuals--body {
    margin-top: 18px;
  }

  .figureBlock01__figure {
    margin-top: 14px;
  }

  .figureBlock01__figure:first-child {
    margin-top: 0;
  }

  .figureBlock01__caption {
    font-size: 10px;
    font-size: 0.625rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin: 6px 0 0;
  }

  .figureBlock01__content {
    margin: 14px 0 0;
  }

  .figureBlock01__content--divide {
    overflow: visible;
  }

  .figureBlock01__head > *:first-child {
    margin-top: 18px;
  }

  .button01 {
    width: 100%;
  }

  .select01 {
    font-size: 1rem;
  }

  .select01 {
    width: 100%;
  }

  .heading01--categoryTitle {
    font-size: 4rem;
  }

  .heading01--categoryTitle .heading01__copy--lead {
    font-size: 1.28571rem;
  }

  .heading01--subTitle {
    font-size: 1.28571rem;
  }

  .heading01--subTitle .heading01--shoulder {
    font-size: 1rem;
  }

  .heading01--lv01 {
    font-size: 1.57143rem;
  }

  .heading01--lv01 .heading01__copy--shoulder {
    font-size: 1rem;
  }

  .heading01--lv01 .heading01__copy--lead {
    font-size: 1.28571rem;
  }

  .heading01--news {
    font-size: 2.14286rem;
  }

  .heading01--news .heading01__copy--shoulder {
    font-size: 1rem;
  }

  .heading01--news .heading01__copy--lead {
    font-size: 1.28571rem;
  }

  .heading01--lv02 {
    font-size: 1.42857rem;
  }

  .heading01--lv03 {
    font-size: 1.28571rem;
  }

  .heading01--lv04 {
    font-size: 1.14286rem;
  }

  .heading01--lv05 {
    font-size: 1rem;
  }

  .heading01--lv06 {
    font-size: 1rem;
  }

  .heading01--product {
    font-size: 1.85714rem;
  }

  .keyVisual01__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .keyVisual01__heading {
    font-size: 2.42857rem;
  }

  .keyVisual01__text {
    font-size: 1rem;
  }

  .keyVisual01__text .fa {
    font-size: 3.42857rem;
  }

  .keyVisual01__button {
    font-size: 1rem;
  }

  .keyVisual01__button--play .fa {
    font-size: 4.14286rem;
  }

  .keyVisual01__heading {
    font-size: 20px;
    font-size: 1.25rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .keyVisual01__text {
    display: none;
    margin: 0;
  }

  .keyVisual01__button {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 10px;
    padding: 4px;
    border-width: 1px;
  }

  .keyVisual01__button--play .fa {
    font-size: 38px;
    font-size: 2.375rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .linkButton01,
  .button01 {
    font-size: 1rem;
  }

  .linkButton01--thick {
    font-size: 1.28571rem;
  }

  .linkButton01,
  .button01 {
    width: 100%;
  }

  .linkButton01--thick {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    line-height: 42px;
  }

  .unorderedList01__item {
    font-size: 1rem;
  }

  .unorderedList01--small > .unorderedList01__item {
    font-size: 1rem;
  }

  .unorderedList01--2col .unorderedList01__item {
    float: none;
    width: 100%;
    margin: 0;
  }

  .unorderedList01 {
    margin-top: 12px;
  }

  .unorderedList01__item {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 4px;
  }

  .unorderedList01--small {
    margin-top: 8px;
  }

  .unorderedList01--small > .unorderedList01__item {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .unorderedList01--child {
    margin-top: 0;
    margin-left: 10px;
  }

  .unorderedList01--2col .unorderedList01__item:nth-child(2) {
    margin-top: 4px;
  }

  .orderedList01__item {
    font-size: 1rem;
  }

  .orderedList01--small > .orderedList01__item {
    font-size: 1rem;
  }

  .orderedList01 {
    margin-top: 12px;
    margin-left: 23px;
  }

  .orderedList01__item {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 4px;
  }

  .orderedList01--small {
    margin-top: 7px;
  }

  .orderedList01--small .orderedList01__item {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .orderedList01--child {
    margin-top: 0;
    margin-left: 40px;
  }

  .uniqueList01__item {
    font-size: 1rem;
  }

  .uniqueList01--small > .uniqueList01__item {
    font-size: 1rem;
  }

  .uniqueList01 {
    margin-top: 12px;
  }

  .uniqueList01__item {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 4px;
  }

  .uniqueList01--small {
    margin-top: 7px;
  }

  .uniqueList01--small > .uniqueList01__item {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .alertList01__item {
    font-size: 1rem;
  }

  .alertList01 {
    margin-top: 12px;
  }

  .alertList01__item {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 4px;
  }

  .definitionList01__term {
    font-size: 1rem;
  }

  .definitionList01__description {
    font-size: 1rem;
  }

  .definitionList01--small .definitionList01__term {
    font-size: 1rem;
  }

  .definitionList01--small .definitionList01__description {
    font-size: 1rem;
  }

  .definitionList01 {
    margin-top: 14px;
  }

  .definitionList01__term {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 6px;
  }

  .definitionList01__description {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 2px;
  }

  .definitionList01--horizontal .definitionList01__term {
    margin-top: 6px;
    float: none;
    width: auto;
  }

  .definitionList01--horizontal .definitionList01__term:first-child {
    margin-top: 0;
  }

  .definitionList01--horizontal .definitionList01__description {
    margin-top: 2px;
    padding-left: 0;
  }

  .definitionList01--horizontal .definitionList01__description:first-of-type {
    margin-top: 2px;
  }

  .definitionList01--border .definitionList01__term {
    padding-top: 6px;
    border: none;
    border-top: 1px solid #e5e5e5;
  }

  .definitionList01--border .definitionList01__description {
    padding-top: 0;
    border: none;
  }

  .definitionList01--small {
    margin-top: 7px;
  }

  .definitionList01--small .definitionList01__term {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .definitionList01--small .definitionList01__description {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .menuBlock01--left .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .menuBlock01--left .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .menuBlock01--left .menuBlock01__headingText,
  .menuBlock01--left .menuBlock01__content {
    margin: 0;
  }

  .cols__col--10 .menuBlock01--left .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--left .menuBlock01__content {
    margin: 0;
  }

  .menuBlock01--left.menuBlock01--small .menuBlock01__headingText,
  .menuBlock01--left.menuBlock01--small .menuBlock01__content {
    margin: 0;
  }

  .cols__col--10 .menuBlock01--left.menuBlock01--small .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--left.menuBlock01--small .menuBlock01__content {
    margin: 0;
  }

  .menuBlock01--right .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .menuBlock01--right .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .menuBlock01--right .menuBlock01__headingText,
  .menuBlock01--right .menuBlock01__content {
    margin: 0;
  }

  .cols__col--10 .menuBlock01--right .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--right .menuBlock01__content {
    margin: 0;
  }

  .menuBlock01--right.menuBlock01--small .menuBlock01__headingText,
  .menuBlock01--right.menuBlock01--small .menuBlock01__content {
    margin: 0;
  }

  .cols__col--10 .menuBlock01--right.menuBlock01--small .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--right.menuBlock01--small .menuBlock01__content {
    margin: 0;
  }

  .menuBlock01--small .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .cols__col--10 .menuBlock01--small .menuBlock01__img {
    width: 100%;
    max-width: 100%;
  }

  .menuBlock01__heading {
    font-size: 1.14286rem;
  }

  .menuBlock01__heading--small {
    font-size: 1rem;
  }

  .menuBlock01__text {
    font-size: 1rem;
  }

  .menuBlock01__listItem {
    font-size: 1rem;
  }

  .menuBlock01 {
    margin-top: 6px;
  }

  .menuBlock01--border {
    margin-top: 16px;
    padding-top: 16px;
  }

  .menuBlock01--left .menuBlock01__img {
    position: relative;
  }

  .menuBlock01--left .menuBlock01__content {
    margin-top: 3px;
  }

  .menuBlock01--left.menuBlock01--small .menuBlock01__heading {
    margin-top: 0;
  }

  .menuBlock01--left.menuBlock01--xSmall .menuBlock01__img {
    position: absolute;
    width: 100px;
  }

  .menuBlock01--left.menuBlock01--xSmall .menuBlock01__heading {
    margin-top: 0;
  }

  .menuBlock01--left.menuBlock01--xSmall .menuBlock01__headingText,
  .menuBlock01--left.menuBlock01--xSmall .menuBlock01__content {
    margin-left: 110px;
  }

  .cols__col--10 .menuBlock01--left.menuBlock01--xSmall .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--left.menuBlock01--xSmall .menuBlock01__content {
    margin-left: 110px;
  }

  .menuBlock01--right .menuBlock01__img {
    position: relative;
  }

  .menuBlock01--right .menuBlock01__content {
    margin-top: 6px;
  }

  .menuBlock01--right.menuBlock01--small .menuBlock01__heading {
    margin-top: 0;
  }

  .menuBlock01--right.menuBlock01--xSmall .menuBlock01__img {
    position: absolute;
    width: 100px;
  }

  .menuBlock01--right.menuBlock01--xSmall .menuBlock01__heading {
    margin-top: 0;
  }

  .menuBlock01--right.menuBlock01--xSmall .menuBlock01__headingText,
  .menuBlock01--right.menuBlock01--xSmall .menuBlock01__content {
    margin-right: 110px;
  }

  .cols__col--10 .menuBlock01--right.menuBlock01--xSmall .menuBlock01__headingText,
  .cols__col--10
  .menuBlock01--right.menuBlock01--xSmall .menuBlock01__content {
    margin-right: 110px;
  }

  .menuBlock01--small {
    margin-top: 20px;
  }

  .menuBlock01--xSmall {
    margin-top: 20px;
  }

  .menuBlock01__heading {
    font-size: 16px;
    font-size: 1rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 10px;
  }

  .menuBlock01__heading--small {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .menuBlock01__img {
    padding-bottom: 10px;
  }

  .menuBlock01__headingText {
    /*margin-top: $sp-space-x-small;*/
  }

  .menuBlock01__content {
    margin-top: 3px;
  }

  .menuBlock01__content + .menuBlock01__figure {
    margin-top: 3px;
  }

  .menuBlock01__text {
    font-size: 13px;
    font-size: 0.8125rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 10px;
  }

  .menuBlock01__list {
    margin-top: 6px;
  }

  .menuBlock01__listItem {
    font-size: 10px;
    font-size: 0.625rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .menuBlockSet01__col--1 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .menuBlockSet01__col--2 {
    float: none;
    width: 100%;
    margin: 0;
  }

  .menuBlockSet01__description {
    font-size: 1rem;
  }

  .menuBlockSet01__info {
    font-size: 1rem;
  }

  .menuBlockSet01 {
    margin-top: 16px;
  }

  .menuBlock02__description {
    font-size: 1.28571rem;
  }

  .menuBlock02__img {
    width: auto;
  }

  .modalWindow__col {
    float: none;
    width: 100%;
    margin: 0;
  }

  .modalWindow__col--typeText {
    float: none;
    width: 100%;
    margin: 0;
  }

  .modalWindow__closeLink .fa {
    font-size: 1.28571rem;
  }

  .modalWindow__col {
    margin: auto;
  }

  .pagination01__item {
    font-size: 1rem;
  }

  .text01 {
    font-size: 1rem;
  }

  .text01--lead {
    font-size: 2.14286rem;
  }

  .text01--leadSmall {
    font-size: 1.57143rem;
  }

  .text01--small {
    font-size: 1rem;
  }

  .text01--xSmall {
    font-size: 0.85714rem;
  }

  .text01 {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 12px;
  }

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

  .text01--lead {
    font-size: 26px;
    font-size: 1.625rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 13px;
  }

  .text01--leadSmall {
    font-size: 20px;
    font-size: 1.25rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 13px;
  }

  .text01--small {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 8px;
  }

  .text01--xSmall {
    font-size: 10px;
    font-size: 0.625rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    margin-top: 3px;
  }

  .text01--signature {
    margin-top: 6px;
  }

  .quotation01 {
    font-size: 1.14286rem;
  }

  .relatedLinkBlock01__parentTitle {
    font-size: 1.14286rem;
  }

  .relatedLinkBlock01__title {
    font-size: 1rem;
  }

  .relatedLinkBlock01__item {
    font-size: 1rem;
  }

  .relatedLinkBlock01 {
    margin-top: 30px;
    padding-top: 10px;
  }

  .relatedLinkBlock01__title {
    margin-top: 4px;
  }

  .relatedLinkBlock01__list {
    margin-top: 6px;
  }

  .tab01__item--different {
    font-size: 1rem;
  }

  .tab02__item--1of2 {
    width: 50%;
  }

  .tab02__item--1of3 {
    width: 50%;
  }

  .tab02__item--1of4 {
    width: 50%;
  }

  .tab02__item--1of5 {
    width: 50%;
  }

  .tab02__item--1of6 {
    width: 50%;
  }

  .tab02__item {
    border-top: 1px solid #e5e5e5;
  }

  .tab02__item:nth-child(odd) {
    border-left: none;
  }

  .tab02__item:nth-child(1),
  .tab02__item:nth-child(2) {
    border-top: none;
  }

  .tag01 {
    font-size: 0.78571rem;
  }

  .tag01--large {
    font-size: 1.14286rem;
  }

  .dataTable01__caption {
    font-size: 1rem;
  }

  .dataTable01__info {
    font-size: 1rem;
  }

  .dataTable01__cell {
    font-size: 1rem;
  }

  .dataTable01 {
    width: 100%;
    margin-top: 16px;
    overflow: auto;
    -webkit-overflow-scrolling: auto;
  }

  .dataTable01::-webkit-scrollbar {
    -webkit-appearance: none;
  }

  .dataTable01::-webkit-scrollbar:horizontal {
    height: 5px;
    background-color: #fff;
  }

  .dataTable01::-webkit-scrollbar-thumb:horizontal {
    background-color: #ccc;
    border-radius: 5px;
  }

  .dataTable01__caption {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .dataTable01__info {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .dataTable01__table {
    width: 100%;
    min-width: 640px;
    margin-top: 3px;
  }

  .dataTable01__cell {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    padding: 5px;
  }

  .formatTable01__info {
    font-size: 1rem;
  }

  .formatTable01__cell {
    font-size: 1rem;
  }

  .formatTable01 {
    width: 100%;
    margin-top: 16px;
  }

  .formatTable01__caption {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .formatTable01__info {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .formatTable01__table {
    width: 100%;
    margin-top: 3px;
    border-top: 1px solid #e5e5e5;
  }

  .formatTable01__cell {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    display: block;
    border-top: none;
  }

  .videoBlock01 {
    margin: 14px 0 0;
  }

  .contactBlock01__contactCall {
    font-size: 2.14286rem;
  }

  .contactBlock01__contactCall small {
    font-size: 1.14286rem;
  }

  .jumbotron__visual {
    margin-top: 12px;
  }

  .jumbotron__visual--ld {
    display: none;
  }

  .jumbotron__visual--sd {
    display: block;
  }

  .jumbotron__img {
    width: 100%;
  }

  .jumbotron__img:hover {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .visible_sd {
    display: inline-block;
  }

  .breadcrumbs {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .breadcrumbs__list {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .breadcrumbs__item {
    font-size: 0.85714rem;
  }

  .breadcrumbs__item .fa {
    font-size: 1rem;
  }

  .breadcrumbs__list {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .discoverMore {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .discoverMore__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .discoverMore__heading {
    font-size: 1.14286rem;
  }

  .discoverMore__item {
    float: none;
    width: 100%;
    margin: 0;
  }

  .discoverMore__link {
    font-size: 1rem;
  }

  .discoverMore__item {
    float: left;
    width: 48.46626%;
    margin: 10px 0 0 3.06748%;
  }

  .discoverMore__item:nth-child(odd) {
    clear: left;
    margin-left: 0;
  }

  .gHeader {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .gHeader__wigNavItem {
    font-size: 0.85714rem;
  }

  .gHeader__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .gHeader__country {
    font-size: 0.78571rem;
  }

  .gHeader__gNavLinkText {
    font-size: 1rem;
  }

  .gHeader__infoNavLink {
    font-size: 0.85714rem;
  }

  .gHeader__languageItem {
    font-size: 0.85714rem;
  }

  .gHeader__searchCloseLink .fa {
    font-size: 1.28571rem;
  }

  .gHeader__searchText {
    font-size: 1rem;
  }

  .gHeader__searchBtn {
    font-size: 0.71429rem;
  }

  .gHeader .gsc-input {
    font-size: 0.85714rem;
  }

  .gHeader {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: none;
    min-width: 100%;
  }

  .gHeader__wig {
    height: 80px;
    margin-bottom: 0;
    padding: 0 20px 0 0;
  }

  .gHeader__wigLogo {
    left: 21px;
    top: 21px;
  }

  .gHeader--global .gHeader__wigLogo {
    left: 21px;
    top: 21px;
  }

  .gHeader__wigLogo a img {
    width: 113px;
    height: auto;
  }

  .gHeader--global .gHeader__wigLogo a img {
    width: 109px;
  }

  .gHeader__wigNav {
    position: static;
    text-align: left;
  }

  .gHeader__wigNavItem {
    display: block;
    margin-left: 0;
  }

  .gHeader__wigNavItem:first-child {
    border-right-width: 0;
    padding-right: 0;
    margin-right: 0;
  }

  .gHeader__wigNavLink {
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    color: #666;
    display: block;
  }

  .gHeader__wigNavLink:hover {
    text-decoration: none;
    color: #666;
  }

  .gHeader__content {
    padding: 0;
  }

  .gHeader__logo {
    position: relative;
    z-index: 1;
    height: 28px;
    padding: 13px 60px 10px 20px;
    border-bottom: solid 1px #e5e5e5;
    background-color: #fff;
  }

  .gHeader__country {
    padding: 10px 0 0 12px;
  }

  .gHeader__nav {
    -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: static;
    width: 100%;
    height: 0;
    background-color: #fff;
    overflow: hidden;
  }

  .gHeader__nav--open {
    height: 100%;
    overflow-y: scroll;
  }

  .gHeader__gNav {
    position: relative;
    width: 100%;
    padding-top: 0;
    display: inline;
  }

  .gHeader__gNavItem {
    font-size: 14px;
    font-size: 0.875rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    float: none;
    width: 100%;
    text-align: left;
    display: inline;
  }

  .gHeader__gNavItem:before,
  .gHeader__gNavItem:after {
    display: none;
  }

  .gHeader__gNavItem:first-child {
    width: 100%;
  }

  .gHeader__gNavLink {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  .gHeader__gNavLink:hover {
    color: #666;
    text-decoration: none;
  }

  .gHeader__gNavLink:hover .gHeader__gNavLinkText {
    border: none;
  }

  .gHeader__gNavLink--current:hover .gHeader__gNavLinkText {
    border-bottom: 2px solid #e1002a;
  }

  .gHeader__infoNav {
    position: inherit;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .gHeader__infoNavItem {
    display: block;
    margin-left: 0;
  }

  .gHeader__infoNavItem--lang {
    float: none;
    margin: 0;
  }

  .gHeader__infoNavItem--search {
    background-color: #f7f7f7;
  }

  .gHeader__infoNavItem--search .gHeader__infoNavLink {
    display: none;
  }

  .gHeader__infoNavLink {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
  }

  .gHeader__infoNavLink:hover {
    text-decoration: none;
  }

  .gHeader__language {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: inherit;
    border-width: 0 0 1px 0;
    width: 100%;
    display: table;
  }

  .gHeader__languageItem {
    display: table-cell;
    width: 50%;
    text-align: center;
  }

  .gHeader__languageLink {
    padding: 10px 12px;
  }

  .gHeader__languageLink:hover {
    text-decoration: none;
  }

  .gHeader__search {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    padding: 6px 10px 5px;
    background-color: transparent;
  }

  .gHeader__search #___gcse_0 {
    display: block;
  }

  .gHeader__searchClose {
    display: none !important;
  }

  .gHeader__searchText {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    width: auto;
    min-width: 237px;
  }

  .gHeader__searchBtn {
    font-size: 10px;
    font-size: 0.625rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
  }

  .gHeader .mobile-gHeader__menu {
    display: block;
    position: absolute;
    right: 20px;
    top: 18px;
    z-index: 2;
    width: 20px;
    height: 16px;
    margin: 0;
    padding: 0;
    cursor: pointer;
  }

  .gHeader .mobile-gHeader__menu:before,
  .gHeader .mobile-gHeader__menu:after {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    content: "";
    display: block;
    position: absolute;
    left: 0;
    width: 20px;
    height: 3px;
    background-color: #999;
  }

  .gHeader .mobile-gHeader__menu:before {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    top: 0;
  }

  .gHeader .mobile-gHeader__menu:after {
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    bottom: -1px;
  }

  .gHeader .mobile-gHeader__menu--open:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
  }

  .gHeader .mobile-gHeader__menu--open:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    bottom: 0;
  }

  .gHeader .mobile-gHeader__menu--open .mobile-gHeader__menuInner {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 0;
    filter: alpha(opacity=0);
    display: none;
  }

  .gHeader .mobile-gHeader__menuInner:before {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 1;
    filter: alpha(opacity=100);
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 7px;
    width: 20px;
    height: 3px;
    background-color: #999;
  }

  .localNav {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .localNav__list {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .localNav__item {
    font-size: 1rem;
  }

  .localNav__link .fa {
    font-size: 1.28571rem;
  }

  .localNav__tmbLink {
    font-size: 0.92857rem;
  }

  .localNav__md .localNav__hdg {
    font-size: 1rem;
  }

  .localNav__md .slick-prev .fa,
  .localNav__md .slick-next .fa {
    font-size: 1.42857rem;
  }

  .localNav {
    position: relative;
    margin: 20px 20px 0;
    /*position: absolute;*/
    /*top: 0;*/
    z-index: 2;
    min-width: 0;
    max-height: 41px;
    background-color: transparent;
  }

  .localNav__list {
    position: absolute;
    padding: 0 10px 5px;
    overflow: hidden;
  }

  .localNav__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 6px 30px 6px 1.2em;
    border: none;
  }

  .localNav__item:first-child {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .localNav__item:first-child .fa {
    top: 0.6em;
    /*color: $gray-light;*/
  }

  .localNav__link {
    color: #4163b1;
  }

  .localNav__link:hover {
    border: none;
    color: #4163b1;
  }

  .localNav__link:visited {
    color: #4163b1;
  }

  .localNav .mobile-localNav__menu {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    position: absolute;
    right: 0;
    top: 10px;
    display: block;
    width: 21px;
    height: 21px;
    border-radius: 5px;
    background-color: #ccc;
    text-align: center;
    cursor: pointer;
  }

  .localNav .mobile-localNav__menu:before,
  .localNav .mobile-localNav__menu:after {
    content: "";
    position: absolute;
    border-radius: 2px;
    background-color: #f7f7f7;
  }

  .localNav .mobile-localNav__menu:before {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    left: 9px;
    top: 4px;
    width: 3px;
    height: 13px;
  }

  .localNav .mobile-localNav__menu:after {
    left: 4px;
    top: 9px;
    width: 13px;
    height: 3px;
  }

  .localNav .mobile-localNav__menu--open:before {
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .localNav .mobile-localNav__menuTxt {
    font-size: 12px;
    font-size: 0.75rem;
    /*@media only screen and (max-width : 640px) { @content; }*/
    color: #666;
    font-weight: normal;
    position: absolute;
    right: 31px;
    top: 14px;
  }

  .localNav--slide > .localNav__list {
    display: block;
  }

  .localNav__md {
    display: none;
  }

  .localNav__tmbTrig {
    display: block;
  }

  .localNav__tmbItem {
    float: none;
    width: 100%;
    padding: 10px 0;
  }

  .megaMenu__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .megaMenu__titleLink {
    font-size: 1.85714rem;
  }

  .megaMenu__nav--1of2 .megaMenu__navItem {
    width: 100%;
    max-width: 100%;
  }

  .megaMenu__nav--1of2 .megaMenu__navItem {
    margin: 0;
  }

  .megaMenu__figureLinkCaption {
    font-size: 1rem;
  }

  .megaMenu__newsTitle {
    font-size: 1.14286rem;
  }

  .megaMenu__newsItem {
    font-size: 1rem;
  }

  .megaMenu__newsDate {
    font-size: 0.78571rem;
  }

  .megaMenu__closeLink .fa {
    font-size: 1.28571rem;
  }

  .megaMenu {
    display: none;
  }

  .doc {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .doc__content {
    padding: 0 0 30px;
  }

  .gFooter {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
  }

  .gFooter__content {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
  }

  .gFooter__gNavList--child .gFooter__gNavItem {
    font-size: 0.85714rem;
  }

  .gFooter__gNavList--follow .gFooter__gNavItem--icon .fa {
    font-size: 1.71429rem;
  }

  .gFooter__infoNavLink {
    font-size: 0.71429rem;
  }

  .gFooter__copyright {
    font-size: 1rem;
  }

  .gFooter__utility {
    margin: 0;
  }

  .gFooter__utility .gFooter__content {
    padding-top: 0;
    padding-bottom: 10px;
  }

  .gFooter__content {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .gFooter__gNavList {
    display: none;
    margin: 0;
    padding: 0;
  }

  .gFooter__gNavList--follow {
    display: block;
    border: none;
  }

  .gFooter__gNavList--follow .gFooter__gNavList--child {
    display: block;
  }

  .gFooter__login {
    display: none;
  }

  .gFooter__utility {
    border: none;
  }

  .gFooter__infoNav {
    float: none;
  }

  .gFooter__copyright {
    float: none;
    margin-top: 10px;
  }

  .gFooter--tiny .gFooter__gNav {
    float: none;
    padding: 10px 0;
  }

  .gFooter--tiny .gFooter__gNavItem {
    margin-top: 4px;
  }

  .gFooter--tiny .gFooter__gNavList--child {
    margin: 10px 0 0 0;
  }
}

@media only screen and (max-width: 767px) and (max-width: 767px) {
  body {
    font-size: 0.85714rem;
  }

  .faqBlock01__heading {
    font-size: 1rem;
  }

  .faqBlock01__content {
    font-size: 1rem;
  }

  .figureBlock01__caption {
    font-size: 0.71429rem;
  }

  .keyVisual01__heading {
    font-size: 1.42857rem;
  }

  .keyVisual01__button {
    font-size: 0.85714rem;
  }

  .keyVisual01__button--play .fa {
    font-size: 2.71429rem;
  }

  .linkButton01--thick {
    font-size: 1rem;
  }

  .unorderedList01__item {
    font-size: 1rem;
  }

  .unorderedList01--small > .unorderedList01__item {
    font-size: 0.85714rem;
  }

  .orderedList01__item {
    font-size: 1rem;
  }

  .orderedList01--small .orderedList01__item {
    font-size: 0.85714rem;
  }

  .uniqueList01__item {
    font-size: 1rem;
  }

  .uniqueList01--small > .uniqueList01__item {
    font-size: 0.85714rem;
  }

  .alertList01__item {
    font-size: 1rem;
  }

  .definitionList01__term {
    font-size: 1rem;
  }

  .definitionList01__description {
    font-size: 1rem;
  }

  .definitionList01--small .definitionList01__term {
    font-size: 0.85714rem;
  }

  .definitionList01--small .definitionList01__description {
    font-size: 0.85714rem;
  }

  .menuBlock01__heading {
    font-size: 1.14286rem;
  }

  .menuBlock01__heading--small {
    font-size: 1rem;
  }

  .menuBlock01__text {
    font-size: 0.92857rem;
  }

  .menuBlock01__listItem {
    font-size: 0.71429rem;
  }

  .text01 {
    font-size: 1rem;
  }

  .text01--lead {
    font-size: 1.85714rem;
  }

  .text01--leadSmall {
    font-size: 1.42857rem;
  }

  .text01--small {
    font-size: 0.85714rem;
  }

  .text01--xSmall {
    font-size: 0.71429rem;
  }

  .dataTable01__caption {
    font-size: 1rem;
  }

  .dataTable01__info {
    font-size: 0.85714rem;
  }

  .dataTable01__cell {
    font-size: 0.85714rem;
  }

  .formatTable01__caption {
    font-size: 1rem;
  }

  .formatTable01__info {
    font-size: 0.85714rem;
  }

  .formatTable01__cell {
    font-size: 1rem;
  }

  .gHeader__gNavItem {
    font-size: 1rem;
  }

  .gHeader__searchText {
    font-size: 0.85714rem;
  }

  .gHeader__searchBtn {
    font-size: 0.71429rem;
  }

  .localNav .mobile-localNav__menuTxt {
    font-size: 0.85714rem;
  }
}

@media all and (-ms-high-contrast: none) {
  .megaMenu {
    transition-property: none;
  }

  .megaMenu *::-ms-backdrop,
  .megaMenu {
    -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .megaMenu__category {
    transition-property: none;
  }

  .megaMenu__category *::-ms-backdrop,
  .megaMenu__category {
    -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .megaMenu__category--open {
    transition-property: none;
  }

  .megaMenu__category--open *::-ms-backdrop,
  .megaMenu__category--open {
    -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    -moz-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

@media print {
  body {
    color: #333 !important;
    background-color: #fff !important;
  }

  .gHeader__nav,
  .mobile-gHeader__menu,
  .megaMenu,
  .localNav,
  .breadcrumbs,
  .gFooter__content {
    display: none !important;
  }

  .gFooter__utility .gFooter__content {
    display: block !important;
  }

  .gFooter__utility .gFooter__content .gFooter__infoNav {
    display: none !important;
  }
}