@charset "UTF-8";
/* @  starter-kit
 * ------------------------------------------------------------ */
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*doc
---
title: font
name: font
category: mixins
---


```
@include fsize($size-pc: 14, $size-tab: false, $size-sp: false);

@include fsize-vmin($fsize: 14, $screen: 375);


```

*/
/*doc
---
title: floor
name: floor
category: mixins
---


```
@include floor-decimal($number, $digits: 4);

1.234567 => 1.2345

```

*/
/*doc
---
title: mediaqueries
name: mediaqueries
category: mixins
---

```
@include media-min;
@include media-sp-min;
@include media-sp-max;
@include media-sp-only;

@include media-tab-min;
@include media-tab-max;
@include media-tab-only;

@include media-pc-min;
@include media-pc-max;
@include media-pc-only;

@include media-lg-min;
@include media-lg-max;
@include media-lg-only;

@include media-max;


@include media($query);

```

*/
/*doc
---
title: mb
name: mb
category: mixins
---


```
@include mb-small($multiplication:1);
@include mb-medium($multiplication:1);
@include mb-large($multiplication:1);

```

*/
/*doc
---
title: link
name: link
category: mixins
---


```
@include link();
@include link-dark();

```

*/
/*doc
---
title: elevation
name: elevation
category: mixins
---


```
.item {
  @include elevation(2);
  @include elevation-transition;

  &:hover,
  &:focus {
    @include elevation(4);
  }

  &:active {
    @include elevation(8);
  }
}

https://material.io/guidelines/material-design/elevation-shadows.html

```

*/
/*doc
---
title: grid
name: grid
category: mixins
---

```
grid ($className:'.cols', $col:6, $allW:940, $g:30, $sp:false)

@include grid('.c-summary__item', 6, $screen-pc-max, 24);



```


*/
/*doc
---
title: img
name: img
category: variables
---


```

```

*/
/*doc
---
title: colors
name: colors
category: variables
---


```

```

*/
/*doc
---
title: fonts
name: fonts
category: variables
---


```

```

*/
/*doc
---
title: width
name: width
category: variables
---


```

```

*/
/*doc
---
title: margin
name: margin
category: variables
---


```

```

*/
/*doc
---
title: border
name: border
category: variables
---


```

```

*/
/*doc
---
title: utilities
name: utilities
category: variables
---


```

```

*/
/* @ Print Layout
 * ------------------------------------------------------------ */
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

/* @  Font Reset
* ------------------------------------------------------------ */
@font-face {
  font-family: "MyYuGothicM";
  font-weight: normal;
  src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
  /* Mediumがない場合 */
}

@font-face {
  font-family: "MyYuGothicM";
  font-weight: bold;
  src: local("YuGothic-Bold"), local("Yu Gothic");
  /* for Chrome */
}

html {
  line-height: 1.8;
  min-width: 1000px;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, helvetica, arial, sans-serif;
  color: rgba(0, 0, 0, 0.87);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

p,
li,
dt,
dd,
th,
td,
pre {
  -ms-line-break: strict;
  line-break: strict;
  word-wrap: break-word;
  word-break: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-family: inherit;
  font-weight: 500;
  color: inherit;
}

/* @  Element Reset
* ------------------------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dt,
dd,
table,
pre,
figure,
img,
blockquote {
  margin: 0;
}

ul,
ol {
  list-style-type: none;
  padding-left: 0;
}

img,
picture {
  max-width: 100%;
  vertical-align: middle;
}

hr {
  border: 0;
  border-bottom: solid 1px #0B7DAF;
  margin-top: 30px;
  margin-bottom: 30px;
}

table {
  border-collapse: collapse;
}

th {
  text-align: left;
}

/* @  Link Reset
* ------------------------------------------------------------ */
::-moz-selection {
  background: #06c8f9;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #06c8f9;
  color: #fff;
  text-shadow: none;
}

input::-moz-selection,
textarea::-moz-selection {
  background: #6adefb;
  color: rgba(0, 0, 0, 0.87);
  text-shadow: none;
}

input::selection,
textarea::selection {
  background: #6adefb;
  color: rgba(0, 0, 0, 0.87);
  text-shadow: none;
}

a,
a:link {
  color: inherit;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover,
a:focus,
a:visited {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a {
  -webkit-tap-highlight-color: rgba(6, 200, 249, 0.5);
}

a:link {
  -webkit-tap-highlight-color: rgba(6, 200, 249, 0.5);
}

button:focus,
a:focus {
  -webkit-box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
          box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
}

button:focus {
  outline-width: 0;
}

/* @  Print Reset
* ------------------------------------------------------------ */

/* @ Code Layout
 * ------------------------------------------------------------ */
code,
kbd,
pre,
samp {
  font-family: "Inconsolata", Monaco, Menlo, Consolas, "Courier New", monospace;
}

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: bold;
  -webkit-box-shadow: none;
          box-shadow: none;
}

pre,
.e-pre {
  display: block;
  padding: 10px;
  white-space: pre-wrap;
  font-size: 14px;
  font-size: 1.0769230769rem;
  line-height: 1.8;
  word-break: break-all;
  word-wrap: break-word;
  color: #aaa;
  background-color: #00AFDD;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 0;
  margin-bottom: 16px;
}

pre code,
.e-pre code {
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre-wrap;
  background-color: transparent;
  border-radius: 0;
}

.e-pre--scrollable {
  max-height: 340px;
  overflow-y: scroll;
}

/* @  Footer Layout
 * ------------------------------------------------------------ */
.l-footer {
  border-top: 5px solid #ebeb6b;
  color: #fff;
  background-color: #00AFDD;
}

.l-footer ._fixed-sp {
  display: none;
}

.l-footer ._fixed-button {
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  color: #fff;
  padding: 1rem;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 4px;
  text-align: center;
  display: block;
  vertical-align: middle;
  background-color: #39bc00;
}

.l-footer ._inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.l-footer ._primary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 20px;
  padding-top: 30px;
  padding-bottom: 10px;
}

.l-footer ._secondary ._inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.l-footer ._secondary ._block {
  white-space: nowrap;
}

.l-footer ._nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  font-size: 13px;
}

.l-footer ._nav li {
  width: 20%;
  margin-bottom: 20px;
}

.l-footer ._logo {
  width: 94px;
  height: 66px;
  float: left;
  margin-right: 1em;
}

.l-footer ._logo a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-footer ._logo a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-footer ._title {
  font-size: 16px;
  font-weight: bold;
}

.l-footer ._address {
  font-size: 13px;
  margin-bottom: 30px;
}

.l-footer ._sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 10px;
}

.l-footer ._sub-nav a {
  margin-right: .5em;
  margin-left: .5em;
  display: inline-block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-footer ._sub-nav a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-footer ._copy {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

/* @  Header Layout
 * ------------------------------------------------------------ */
.l-header {
  background: #06c8f9;
  height: 90px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.l-header ._inner {
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.l-header ._inner::after {
  clear: both;
  content: "";
  display: block;
}

.l-header ._logo {
  width: 150px;
  height: 105px;
}

.l-header ._logo a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._logo a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._primary {
  position: absolute;
  top: 0;
  left: 36px;
}

.l-header ._secondary-pc ._sub-nav {
  padding-top: 6px;
}

.l-header ._secondary-pc ._sub-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-header ._secondary-pc ._sub-nav li {
  margin-right: 16px;
}

.l-header ._secondary-pc ._sub-nav ._sub-nav-button {
  margin-right: 0;
}

.l-header ._secondary-pc ._sub-nav i {
  position: relative;
  top: .1em;
}

.l-header ._secondary-pc a {
  display: block;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._secondary-pc a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._secondary-pc ._nav {
  margin-top: 6px;
  padding-left: 150px;
}

.l-header ._secondary-pc ._nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-header ._secondary-pc ._nav li {
  height: 45px;
  position: relative;
}

.l-header ._secondary-pc ._nav li:before {
  background: url("../img/common/head_nav-bar.png") bottom left no-repeat;
  width: 1px;
  height: 100%;
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
}

.l-header ._secondary-pc ._nav li:first-child:before {
  display: none;
}

.l-header ._secondary-pc ._nav a {
  display: block;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 15px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.2;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._secondary-pc ._nav a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.l-header ._secondary-sp {
  display: none;
}

/* @  Content Layout
 * ------------------------------------------------------------ */

.l-main {
  min-height: 20vh;
  background: #D0F5FF url("../img/common/bg.png") center top no-repeat;
  background-size: 100%;
  padding-bottom: 50px;
  margin-top: 90px;
}

/* @  container Layout
 * ------------------------------------------------------------ */
/*doc
---
title: layout
name: 20_block
categories: [layouts, layout]
---


<h2 class="styleguide">1column</h2>
```html_example
  <div class="l-container">
    <div class="l-block">
      <div class="l-block__head">
         <div id="breadcrumb" class="c-breadcrumb" role="navigation" aria-label="現在地表示">
          <div class="c-breadcrumb__inner">
            <span><a href="/">HOME</a></span>
            <span aria-current="page">404</span>
          </div>
        </div>
        <h1 class="e-hd1 e-hd1--type2">お探しのページは見つかりません</h1>
      </div>
      <div class="l-block__body">
        <div class="l-unit">
          <h2 class="e-hd2 ">お探しのページは見つかりません</h2>
          <p class="e-text">誠に申し訳ありません。お探しのページは見つかりませんでした。<br>一時的に利用できない状態にあるか、リニューアルに伴い移動もしくは削除された可能性がございます。</p>
        </div>

        <div class="l-unit">
          <h2 class="e-hd2 e-hd2--type2">お探しのページは見つかりません</h2>
          <p class="e-text">誠に申し訳ありません。お探しのページは見つかりませんでした。<br>一時的に利用できない状態にあるか、リニューアルに伴い移動もしくは削除された可能性がございます。</p>
        </div>

        <div class="l-unit visual-editor">
          <h2>お探しのページは見つかりません</h2>
          <p>誠に申し訳ありません。お探しのページは見つかりませんでした。<br>一時的に利用できない状態にあるか、リニューアルに伴い移動もしくは削除された可能性がございます。</p>
        </div>
      </div>
    </div>
  </div>
```
*/
.l-container {
  min-height: 2px;
  z-index: 1;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.l-container::after {
  clear: both;
  content: "";
  display: block;
}

/* @ l-block
 * ------------------------------------------------------------ */
.l-block {
  background-color: #fff;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.l-block__head {
  padding: 20px 40px 0;
  border-bottom: 3px solid #06c8f9;
}

.l-block__head--borderless {
  border-bottom-width: 0;
}

.l-block__body {
  padding: 40px 40px 40px;
}

/* @ l-unit
 * ------------------------------------------------------------ */
.l-unit {
  margin-bottom: 30px;
}

/* ==========================================================================
   #12 Column Grid System
   ========================================================================== */
/*doc
---
title: grid-12column
name: grid-12column
categories: [layouts, grid-12column]
---

```html_example


<div class="l-cols">
  <div class="l-col12 dummy-box">1/1<br>12 column</div>
</div>
<div class="l-cols">
  <div class="l-col6 is-offset3 dummy-box">1/2<br>6 column, offset3 </div>
</div>

<div class="l-cols l-cols--break">
  <div class="l-col3 dummy-box">1/2<br>3 column</div>
  <div class="l-col3 is-offset6 dummy-box">1/2<br>3 column, offset6 </div>
</div>

<div class="l-cols">
  <div class="l-col6 dummy-box">1/2<br>6 column</div>
  <div class="l-col6 dummy-box">1/2<br>6 column</div>
</div>
<div class="l-cols l-cols--break">
  <div class="l-col4 dummy-box">1/3<br>4 column</div>
  <div class="l-col4 dummy-box">1/3<br>4 column</div>
  <div class="l-col4 dummy-box">1/3<br>4 column</div>
</div>
<div class="l-cols">
  <div class="l-col3 dummy-box">1/4<br>3 column</div>
  <div class="l-col3 dummy-box">1/4<br>3 column</div>
  <div class="l-col3 dummy-box">1/4<br>3 column</div>
  <div class="l-col3 dummy-box">1/4<br>3 column</div>
</div>
<div class="l-cols">
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
  <div class="l-col2 dummy-box">1/6<br>2 column</div>
</div>
<div class="l-cols">
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
  <div class="l-col1 dummy-box">1/12<br>1 column</div>
</div>
```

*/
/*doc
---
title: Inside - Column
name: grid-12column2-inner
categories: [layouts, grid-12column]
parent: grid-12column
---


```html_example


<div class="l-cols l-cols--break">
  <div class="l-col9 dummy-box">3/4<br>9 column
    <div class="l-cols l-cols--inside">
      <div class="l-col6 is-offset3 dummy-box">6 columns(inside), offset3(inside)</div>
     </div>
     <div class="l-cols l-cols--inside l-cols--break">
      <div class="l-col6 dummy-box">6 columns(inside)</div>
      <div class="l-col6 dummy-box">6 columns(inside)</div>
     </div>
      <div class="l-cols l-cols--inside">
      <div class="l-col4 dummy-box">1/3(inside)<br>4 column</div>
      <div class="l-col4 dummy-box">1/3(inside)<br>4 column</div>
      <div class="l-col4 dummy-box">1/3(inside)<br>4 column</div>
     </div>
  </div>
  <div class="l-col3 dummy-box">1/4<br>3 column</div>
</div>
```
*/
.l-cols,
.l-cols--outside {
  margin-right: -1.2%;
  margin-left: -1.2%;
}

.l-cols > .l-col1,
.l-cols > .l-col2,
.l-cols > .l-col3,
.l-cols > .l-col4,
.l-cols > .l-col5,
.l-cols > .l-col6,
.l-cols > .l-col7,
.l-cols > .l-col8,
.l-cols > .l-col9,
.l-cols > .l-col10,
.l-cols > .l-col11,
.l-cols > .l-col12,
.l-cols--outside > .l-col1,
.l-cols--outside > .l-col2,
.l-cols--outside > .l-col3,
.l-cols--outside > .l-col4,
.l-cols--outside > .l-col5,
.l-cols--outside > .l-col6,
.l-cols--outside > .l-col7,
.l-cols--outside > .l-col8,
.l-cols--outside > .l-col9,
.l-cols--outside > .l-col10,
.l-cols--outside > .l-col11,
.l-cols--outside > .l-col12 {
  margin-left: 1.2%;
  margin-right: 1.2%;
  margin-bottom: 2.4%;
}

.l-cols > .l-col1 > *:last-child,
.l-cols > .l-col2 > *:last-child,
.l-cols > .l-col3 > *:last-child,
.l-cols > .l-col4 > *:last-child,
.l-cols > .l-col5 > *:last-child,
.l-cols > .l-col6 > *:last-child,
.l-cols > .l-col7 > *:last-child,
.l-cols > .l-col8 > *:last-child,
.l-cols > .l-col9 > *:last-child,
.l-cols > .l-col10 > *:last-child,
.l-cols > .l-col11 > *:last-child,
.l-cols > .l-col12 > *:last-child,
.l-cols--outside > .l-col1 > *:last-child,
.l-cols--outside > .l-col2 > *:last-child,
.l-cols--outside > .l-col3 > *:last-child,
.l-cols--outside > .l-col4 > *:last-child,
.l-cols--outside > .l-col5 > *:last-child,
.l-cols--outside > .l-col6 > *:last-child,
.l-cols--outside > .l-col7 > *:last-child,
.l-cols--outside > .l-col8 > *:last-child,
.l-cols--outside > .l-col9 > *:last-child,
.l-cols--outside > .l-col10 > *:last-child,
.l-cols--outside > .l-col11 > *:last-child,
.l-cols--outside > .l-col12 > *:last-child {
  margin-bottom: 0 !important;
}

.l-cols > .l-col1 > .l-cols--inside,
.l-cols > .l-col2 > .l-cols--inside,
.l-cols > .l-col3 > .l-cols--inside,
.l-cols > .l-col4 > .l-cols--inside,
.l-cols > .l-col5 > .l-cols--inside,
.l-cols > .l-col6 > .l-cols--inside,
.l-cols > .l-col7 > .l-cols--inside,
.l-cols > .l-col8 > .l-cols--inside,
.l-cols > .l-col9 > .l-cols--inside,
.l-cols > .l-col10 > .l-cols--inside,
.l-cols > .l-col11 > .l-cols--inside,
.l-cols > .l-col12 > .l-cols--inside,
.l-cols--outside > .l-col1 > .l-cols--inside,
.l-cols--outside > .l-col2 > .l-cols--inside,
.l-cols--outside > .l-col3 > .l-cols--inside,
.l-cols--outside > .l-col4 > .l-cols--inside,
.l-cols--outside > .l-col5 > .l-cols--inside,
.l-cols--outside > .l-col6 > .l-cols--inside,
.l-cols--outside > .l-col7 > .l-cols--inside,
.l-cols--outside > .l-col8 > .l-cols--inside,
.l-cols--outside > .l-col9 > .l-cols--inside,
.l-cols--outside > .l-col10 > .l-cols--inside,
.l-cols--outside > .l-col11 > .l-cols--inside,
.l-cols--outside > .l-col12 > .l-cols--inside {
  margin-bottom: -4.32%;
}

.l-cols--inside {
  margin-right: -1.7142857143%;
  margin-left: -1.7142857143%;
}

.l-cols--inside > .l-col1,
.l-cols--inside > .l-col2,
.l-cols--inside > .l-col3,
.l-cols--inside > .l-col4,
.l-cols--inside > .l-col5,
.l-cols--inside > .l-col6,
.l-cols--inside > .l-col7,
.l-cols--inside > .l-col8,
.l-cols--inside > .l-col9,
.l-cols--inside > .l-col10,
.l-cols--inside > .l-col11,
.l-cols--inside > .l-col12 {
  margin-left: 1.7142857143%;
  margin-right: 1.7142857143%;
  margin-bottom: 4.32%;
}

.l-cols--inside > .l-col1 > *:last-child,
.l-cols--inside > .l-col2 > *:last-child,
.l-cols--inside > .l-col3 > *:last-child,
.l-cols--inside > .l-col4 > *:last-child,
.l-cols--inside > .l-col5 > *:last-child,
.l-cols--inside > .l-col6 > *:last-child,
.l-cols--inside > .l-col7 > *:last-child,
.l-cols--inside > .l-col8 > *:last-child,
.l-cols--inside > .l-col9 > *:last-child,
.l-cols--inside > .l-col10 > *:last-child,
.l-cols--inside > .l-col11 > *:last-child,
.l-cols--inside > .l-col12 > *:last-child {
  margin-bottom: 0 !important;
}

.l-cols::after,
.l-cols--outside::after,
.l-cols--inside::after {
  clear: both;
  content: "";
  display: block;
}

.l-cols > .l-col1,
.l-cols > .l-col2,
.l-cols > .l-col3,
.l-cols > .l-col4,
.l-cols > .l-col5,
.l-cols > .l-col6,
.l-cols > .l-col7,
.l-cols > .l-col8,
.l-cols > .l-col9,
.l-cols > .l-col10,
.l-cols > .l-col11,
.l-cols > .l-col12,
.l-cols--outside > .l-col1,
.l-cols--outside > .l-col2,
.l-cols--outside > .l-col3,
.l-cols--outside > .l-col4,
.l-cols--outside > .l-col5,
.l-cols--outside > .l-col6,
.l-cols--outside > .l-col7,
.l-cols--outside > .l-col8,
.l-cols--outside > .l-col9,
.l-cols--outside > .l-col10,
.l-cols--outside > .l-col11,
.l-cols--outside > .l-col12,
.l-cols--inside > .l-col1,
.l-cols--inside > .l-col2,
.l-cols--inside > .l-col3,
.l-cols--inside > .l-col4,
.l-cols--inside > .l-col5,
.l-cols--inside > .l-col6,
.l-cols--inside > .l-col7,
.l-cols--inside > .l-col8,
.l-cols--inside > .l-col9,
.l-cols--inside > .l-col10,
.l-cols--inside > .l-col11,
.l-cols--inside > .l-col12 {
  min-height: 1px;
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
}

.l-cols > .l-col1,
.l-cols--outside > .l-col1 {
  width: 5.9333333333%;
}

.l-cols > .is-offset1,
.l-cols--outside > .is-offset1 {
  margin-left: 9.5333333333%;
}

.l-cols--inside > .l-col1 {
  width: 4.9047619048%;
}

.l-cols--inside > .is-offset1 {
  margin-left: 10.0476190476%;
}

.l-cols > .l-col2,
.l-cols--outside > .l-col2 {
  width: 14.2666666667%;
}

.l-cols > .is-offset2,
.l-cols--outside > .is-offset2 {
  margin-left: 17.8666666667%;
}

.l-cols--inside > .l-col2 {
  width: 13.2380952381%;
}

.l-cols--inside > .is-offset2 {
  margin-left: 18.380952381%;
}

.l-cols > .l-col3,
.l-cols--outside > .l-col3 {
  width: 22.6%;
}

.l-cols > .is-offset3,
.l-cols--outside > .is-offset3 {
  margin-left: 26.2%;
}

.l-cols--inside > .l-col3 {
  width: 21.5714285714%;
}

.l-cols--inside > .is-offset3 {
  margin-left: 26.7142857143%;
}

.l-cols > .l-col4,
.l-cols--outside > .l-col4 {
  width: 30.9333333333%;
}

.l-cols > .is-offset4,
.l-cols--outside > .is-offset4 {
  margin-left: 34.5333333333%;
}

.l-cols--inside > .l-col4 {
  width: 29.9047619048%;
}

.l-cols--inside > .is-offset4 {
  margin-left: 35.0476190476%;
}

.l-cols > .l-col5,
.l-cols--outside > .l-col5 {
  width: 39.2666666667%;
}

.l-cols > .is-offset5,
.l-cols--outside > .is-offset5 {
  margin-left: 42.8666666667%;
}

.l-cols--inside > .l-col5 {
  width: 38.2380952381%;
}

.l-cols--inside > .is-offset5 {
  margin-left: 43.380952381%;
}

.l-cols > .l-col6,
.l-cols--outside > .l-col6 {
  width: 47.6%;
}

.l-cols > .is-offset6,
.l-cols--outside > .is-offset6 {
  margin-left: 51.2%;
}

.l-cols--inside > .l-col6 {
  width: 46.5714285714%;
}

.l-cols--inside > .is-offset6 {
  margin-left: 51.7142857143%;
}

.l-cols > .l-col7,
.l-cols--outside > .l-col7 {
  width: 55.9333333333%;
}

.l-cols > .is-offset7,
.l-cols--outside > .is-offset7 {
  margin-left: 59.5333333333%;
}

.l-cols--inside > .l-col7 {
  width: 54.9047619048%;
}

.l-cols--inside > .is-offset7 {
  margin-left: 60.0476190476%;
}

.l-cols > .l-col8,
.l-cols--outside > .l-col8 {
  width: 64.2666666667%;
}

.l-cols > .is-offset8,
.l-cols--outside > .is-offset8 {
  margin-left: 67.8666666667%;
}

.l-cols--inside > .l-col8 {
  width: 63.2380952381%;
}

.l-cols--inside > .is-offset8 {
  margin-left: 68.380952381%;
}

.l-cols > .l-col9,
.l-cols--outside > .l-col9 {
  width: 72.6%;
}

.l-cols > .is-offset9,
.l-cols--outside > .is-offset9 {
  margin-left: 76.2%;
}

.l-cols--inside > .l-col9 {
  width: 71.5714285714%;
}

.l-cols--inside > .is-offset9 {
  margin-left: 76.7142857143%;
}

.l-cols > .l-col10,
.l-cols--outside > .l-col10 {
  width: 80.9333333333%;
}

.l-cols > .is-offset10,
.l-cols--outside > .is-offset10 {
  margin-left: 84.5333333333%;
}

.l-cols--inside > .l-col10 {
  width: 79.9047619048%;
}

.l-cols--inside > .is-offset10 {
  margin-left: 85.0476190476%;
}

.l-cols > .l-col11,
.l-cols--outside > .l-col11 {
  width: 89.2666666667%;
}

.l-cols > .is-offset11,
.l-cols--outside > .is-offset11 {
  margin-left: 92.8666666667%;
}

.l-cols--inside > .l-col11 {
  width: 88.2380952381%;
}

.l-cols--inside > .is-offset11 {
  margin-left: 93.380952381%;
}

.l-cols > .l-col12,
.l-cols--outside > .l-col12 {
  width: 97.6%;
}

.l-cols > .is-offset12,
.l-cols--outside > .is-offset12 {
  margin-left: 101.2%;
}

.l-cols--inside > .l-col12 {
  width: 96.5714285714%;
}

.l-cols--inside > .is-offset12 {
  margin-left: 101.714285714%;
}

/* @ l-visualeditor
 * ------------------------------------------------------------ */
/*doc
---
title: visualeditor
name: visualeditor
category: visualeditor
---
<p class="e-text is-mb-medium">
詳細ページやCMSで直接タグ入力するして更新する箇所に.visual-editorを指定してください。
こちらのサンプルのような形になり内包するタグ（p,span,table,list,dlなど）にベース装飾を追加します。
このため.visual-editor内ではサンプル以外のクラス.mediaなどは使用出来ませんのでご注意ください。
複雑な装飾がある場合は.visual-editorを使わず直接classを指定してください。
</p>

```html_example
       <div class="c-anchor-nav is-mb-large">
          <ul data-scroll>
            <li><a href="#ank1">見出し・段落</a> </li>
            <li><a href="#ank2">リスト</a> </li>
            <li><a href="#ank3">テキスト（装飾・リンク・配置・引用）</a> </li>
            <li><a href="#ank4">画像（サイズ・配置）</a> </li>
            <li><a href="#ank5">ボックス</a> </li>
            <li><a href="#ank6">テーブル</a> </li>
          </ul>
        </div>


      <div class="l-unit visual-editor">


        <h2 id="ank1">1. 見出し・段落</h2>
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h4>見出し4</h4>
        <h5>見出し5</h5>
        <h6>見出し6</h6>

        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>

        <h2 id="ank2">2. リスト</h2>

        <ul>
          <li>順序がないリスト</li>
          <li>順序がないリスト
            <ul>
              <li>順序がないリスト</li>
              <li>順序がないリスト</li>
            </ul>
          </li>
          <li>順序がないリスト</li>
        </ul>

        <ol>
          <li>順序のあるリスト</li>
          <li>順序のあるリスト
            <ol>
              <li>順序のあるリスト</li>
              <li>順序のあるリスト</li>
            </ol>
          </li>
          <li>順序のあるリスト</li>
        </ol>

        <ul class="e-list--arrow">
          <li>矢印付きリスト</li>
          <li><a href="#dummy">矢印付きリスト</a></li>
          <li><a href="#dummy">矢印付きリスト</a></li>
        </ul>



        <dl>
          <dt>定義リスト</dt>
          <dd>テキストが入ります。テキストが入ります。</dd>
          <dt>定義リスト</dt>
          <dd>テキストが入ります。テキストが入ります。</dd>
          <dt>定義リスト</dt>
          <dd>テキストが入ります。テキストが入ります。</dd>
        </dl>

        <h2 id="ank3">3. テキスト（装飾・リンク・配置・引用）</h2>
        <h3>装飾</h3>
        <p>
          <strong>強い強調を表す要素（strong）</strong><br>
          <em>強調を表す要素（em）</em><br>
          <s>すでに正確ではなくなった要素、打ち消し線（s）</s><br>
          <small>注釈や細目を表す要素（small）</small>
          <br>
          <span>上付き文字（sup）　E=mc<sup>2</sup></span><br>
          <span>下付き文字（sub）　CO<sub>2</sub></span><br>
          <span class="is-text-indent" style="display:block">先頭1文字下げ</span>
          <span class="is-text-underline">下線（Underline Text）</span><br>
          <span class="is-text-point">マーカー線(Marker Yellow)</span><br>
          <span class="is-color-orange">重要色文字（Text Orange）</span><br>
          <span class="is-color-red">エラー色文字（Text Red）</span><br>
          <span class="is-color-blue">青色文字（Text Blue）</span><br>
          <span class="is-color-green">緑色文字（Text Green）</span><br>
          <span class="is-bg-color-orange">重要色背景（Bg Orange）</span><br>
          <span class="is-bg-color-red">エラー色背景（Bg Red）</span><br>
          <span class="is-bg-color-blue">青色背景（Bg Blue）</span><br>
          <span class="is-bg-color-green">緑色背景（Bg Green）</span><br>
        </p>


        <h3>リンク</h3>
        <p>
          <a href="#dummy">標準のリンク</a><br>
          <a href="#dummy" target="_blank">target="_blank"を指定している場合 </a><br>
          <a href="#dummy.pdf">pdfへのリンクの場合</a><br>
          <a href="#dummy.doc">doc、docxへのリンクの場合</a><br>
          <a href="#dummy.xls">xls、xlsxへのリンクの場合</a><br>
          <a href="#dummy.ppt">ppt、pptxへのリンクの場合</a><br>
          <a href="#dummy.ppt" class="is-iconless">aタグに.is-iconlessがあると自動リンクアイコンは表示されません</a>
        </p>

        <h3>配置</h3>
        <p class="is-text-left">左揃え<br>
          吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
        </p>
        <p class="is-text-center">
          中央揃え<br>
          吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
        </p>
        <p class="is-text-right">
          右揃え<br>
          吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
        </p>
        <p class="is-text-justify">
          両端揃え<br>
          吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
        </p>

        <h3>引用</h3>
        <blockquote>
          引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。引用テキストが入ります。
        </blockquote>

        <h2 id="ank4">4. 画像（サイズ・配置）</h2>

        <h3>サイズ</h3>
        <figure>
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <figure class="is-img-w50">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <figure class="is-img-w33">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <figure class="is-img-w25">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>


        <h3>配置</h3>
        <h4>左寄せ（テキスト回り込み）</h4>
        <figure class="is-img-left is-img-w25">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <p>吾輩は猫である。名前はまだ無い。
          どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
          吾輩はここで始めて人間というものを見た。
          しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
          この書生というのは時々我々を捕えて煮て食うという話である。
          しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
          ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
          掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
          第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
          のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。
          これが人間の飲む煙草というものである事はようやくこの頃知った。
          ​</p>

        <h4>中央寄せ</h4>
        <figure class="is-img-center is-img-w25">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>

        <h4>右寄せ（テキスト回り込み）</h4>
        <figure class="is-img-right is-img-w25">
          <img src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <p>吾輩は猫である。名前はまだ無い。
          どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
          吾輩はここで始めて人間というものを見た。
          しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
          この書生というのは時々我々を捕えて煮て食うという話である。
          しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
          ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
          掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。
          第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。
          のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。
          これが人間の飲む煙草というものである事はようやくこの頃知った。
          ​</p>

        <h2 id="ank5">5. ボックス</h2>

        <div class="e-box e-box--bg">
            <p>ボックス<br>選択した部分に背景色と枠線のスタイルがつきます。</p>
        </div>

        <div class="e-box e-box--error">
            <p>ボックス（error）<br>選択した部分に背景色と枠線のスタイルがつきます。</p>
        </div>

        <div class="e-box e-box--warning">
            <p>ボックス（warning）<br>選択した部分に背景色と枠線のスタイルがつきます。</p>
        </div>


        <h2 id="ank6">6. テーブル</h2>

        <h3>標準</h3>
        <table>
          <tr>
            <th>見出し</th>
            <th>見出し</th>
            <th>見出し</th>
          </tr>
          <tr>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
        </table>

        <table>
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
        </table>


        <h3>ボーダーレス</h3>
        <table class="e-table--borderless">
          <tr>
            <th>見出し</th>
            <th>見出し</th>
            <th>見出し</th>
          </tr>
          <tr>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
        </table>

        <h3>文字小さい</h3>
        <table class="e-table--small">
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
          <tr>
            <th>見出し</th>
            <td>テキストが入ります。</td>
            <td>テキストが入ります。</td>
          </tr>
        </table>

        <h3>SP時スクロール</h3>
        <div class="e-responsive-table">
          <table>
            <tr>
              <th>見出し</th>
              <th>見出し</th>
              <th>見出し</th>
            </tr>
            <tr>
              <td>テキストが入ります。</td>
              <td>テキストが入ります。</td>
              <td>テキストが入ります。</td>
            </tr>
            <tr>
              <td>テキストが入ります。</td>
              <td>テキストが入ります。</td>
              <td>テキストが入ります。</td>
            </tr>
          </table>
        </div>

      </div>

```


*/
.visual-editor {
  word-break: break-all;
}

.visual-editor::after {
  clear: both;
  content: "";
  display: block;
}

.visual-editor p,
.visual-editor table,
.visual-editor ul,
.visual-editor ol,
.visual-editor dl,
.visual-editor blockquote,
.visual-editor figure,
.visual-editor .e-box-bordered,
.visual-editor hr {
  margin-bottom: 24px;
}

.visual-editor p:empty {
  display: none;
}

.visual-editor strong > strong {
  color: #e75a00;
}

.visual-editor s {
  opacity: .54;
}

.visual-editor em {
  font-weight: bold;
  font-style: normal;
}

.clearfloat {
  clear: both;
}

/* ==========================================================================
   #ELEMENTS
   ========================================================================== */
/* ==========================================================================
   #VIDEO
   ========================================================================== */
/*doc
---
title: video
name: video
categories: [elements, video]
---


```html_example
<div class="e-video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/MZyeTk5b4PQ?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
```
*/
.e-video-container {
  position: relative;
  height: 0;
  padding-top: 25%;
  padding-bottom: 30.25%;
  overflow: hidden;
  margin-bottom: 16px;
}

.e-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Google map
   ========================================================================== */
/*doc
---
title: video-map
name: video-map
categories: [elements, video]
parent: video
---

```html_example
 <div class="e-g-map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12963.323312243096!2d139.7670516!3d35.6811673!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1515111619588" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
 </div>
```
*/
.e-g-map {
  text-align: center;
  width: 100%;
  margin-bottom: 16px;
}

.e-g-map iframe {
  width: 100%;
  min-height: 250px;
}

/* ==========================================================================
   #BLOCKQUOTE
   ========================================================================== */
/*doc
---
title: blockquote
name: blockquote
categories: [elements, blockquote]
---

```html_example

<blockquote class="e-blockquote">
 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
</blockquote>

```
*/
.visual-editor blockquote,
.e-blockquote {
  background-color: #f5f5f5;
  line-height: 1.8;
  position: relative;
  padding: 3.1rem 3rem;
  border: 0;
  margin-bottom: 16px;
}

.visual-editor blockquote:before, .visual-editor blockquote:after,
.e-blockquote:before,
.e-blockquote:after {
  display: block;
  content: "";
  width: 30px;
  height: 23px;
  position: absolute;
}

.visual-editor blockquote:before,
.e-blockquote:before {
  background-image: url("../img/common/blockquote1.svg");
  top: 1rem;
  left: 1rem;
}

.visual-editor blockquote:after,
.e-blockquote:after {
  background-image: url("../img/common/blockquote2.svg");
  right: 1rem;
  bottom: 1rem;
}

/* ==========================================================================
   #HEADING
   ========================================================================== */
/* 見出し1
   ========================================================================== */
/*doc
---
title: heading
name: heading
categories: [elements, heading]
---

```html_example
<h1 class="e-hd1">情に棹させば流される智に働けば角が立つ</h1>
<h2 class="e-hd2">情に棹させば流される智に働けば角が立つ</h2>
<h3 class="e-hd3">情に棹させば流される智に働けば角が立つ</h3>
<h4 class="e-hd4">情に棹させば流される智に働けば角が立つ</h4>
<h5 class="e-hd5">情に棹させば流される智に働けば角が立つ</h5>
<h6 class="e-hd6">情に棹させば流される智に働けば角が立つ</h6>

```

*/
.visual-editor h1,
.visual-editor h2,
.visual-editor h3,
.visual-editor h4,
.visual-editor h5,
.visual-editor h6,
.e-hd1,
.e-hd2,
.e-hd3,
.e-hd4,
.e-hd5,
.e-hd6 {
  margin-bottom: 20px;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

.visual-editor h1,
.e-hd1 {
  margin-bottom: 1rem;
}

.visual-editor h2:not(:first-child),
.visual-editor h3:not(:first-child),
.visual-editor h4:not(:first-child),
.visual-editor h5:not(:first-child),
.visual-editor h6:not(:first-child) {
  margin-top: 1.5rem;
}

.visual-editor h1 + h2,
.visual-editor h2 + h2,
.visual-editor h2 + h3,
.visual-editor h3 + h3,
.visual-editor h3 + h4,
.visual-editor h4 + h4,
.visual-editor h4 + h5,
.visual-editor h5 + h5,
.visual-editor h5 + h6,
.visual-editor h6 + h6 {
  margin-top: 0 !important;
}

.visual-editor h1,
.e-hd1 {
  font-size: 26px;
  font-size: 2rem;
}

.visual-editor h1,
.e-hd1--type2 {
  position: relative;
  font-weight: bold;
  color: #06c8f9;
}

.e-hd1--type3 {
  font-size: 22px;
  font-size: 1.6923076923rem;
  background-color: #EFEFEF;
  padding: .6em 1em;
  position: relative;
  border: 1px solid #CCCCCC;
}

.l-block__head-borderless .e-hd1--type3,
.l-block__head .e-hd1--type3 {
  margin-top: 10px;
  margin-bottom: -10px;
}

.e-hd1--type3:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  width: 5px;
  height: 1.4em;
  background-color: #00AFDD;
  display: block;
}

.visual-editor h2,
.e-hd2 {
  font-size: 22px;
  font-size: 1.6923076923rem;
}

.visual-editor h2,
.e-hd2--type2 {
  border-left: 3px solid #06c8f9;
  background-color: #f5f5f5;
  padding: 1rem 1.5rem .9rem;
  font-size: 18px;
  font-size: 1.3846153846rem;
}

.e-hd2--type3 {
  color: #fff;
  background-color: #00afdd;
  border: solid 3px #bff1fd;
  padding: .6em 1em;
  font-size: 18px;
  font-size: 1.3846153846rem;
}

.e-hd2--type4 {
  font-size: 18px;
  font-size: 1.3846153846rem;
  margin-bottom: 0;
}

.e-hd2--type4 span {
  display: inline-block;
  background-color: #EFEFEF;
  padding: .6em 1em;
  position: relative;
}

.e-hd2--type4 span:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  left: 0;
  width: 5px;
  height: 1.4em;
  background-color: #00AFDD;
  display: block;
}

.visual-editor h3,
.e-hd3 {
  font-size: 16px;
  font-size: 1.2307692308rem;
}

.visual-editor h4,
.e-hd4 {
  font-size: 15px;
  font-size: 1.1538461538rem;
}

.visual-editor h5,
.e-hd5 {
  font-size: 15px;
  font-size: 1.1538461538rem;
}

.visual-editor h6,
.e-hd6 {
  font-size: 14px;
  font-size: 1.0769230769rem;
}

/*doc
---
title: heading-type
name: heading-type
categories: [elements, heading]
parent: heading
---

```html_example
<h1 class="e-hd1 e-hd1--type2">情に棹させば流される智に働けば角が立つ</h1>
<h1 class="e-hd1 e-hd1--type3">情に棹させば流される智に働けば角が立つ</h1>
<h2 class="e-hd2 e-hd2--type2">情に棹させば流される智に働けば角が立つ</h2>
<h2 class="e-hd2 e-hd2--type3">情に棹させば流される智に働けば角が立つ</h2>
<h2 class="e-hd2 e-hd2--type4"><span>情に棹させば流される智に働けば角が立つ</span></h2>
<h3 class="e-hd3">情に棹させば流される智に働けば角が立つ</h3>
<h4 class="e-hd4">情に棹させば流される智に働けば角が立つ</h4>
<h5 class="e-hd5 is-color-blue">情に棹させば流される智に働けば角が立つ</h5>
<h6 class="e-hd6 e-hd--bd">情に棹させば流される智に働けば角が立つ</h6>


<div class="e-hd-group">
  <h2 class="e-hd2 e-hd2--type3">最新のエボが最良のエボ!?ランサーエボリューションX導入!!</h2>
  <p class="e-hd-date">2018.4.26 | <a href="">メンテナンス</a></p>
</div>

```

*/
.e-hd--brand {
  color: #06c8f9;
}

.e-hd--bd {
  padding-bottom: 1em;
  border-bottom: 1px solid #0B7DAF;
}

.e-hd-date {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.54);
  font-size: 13px;
}

.e-hd-date a {
  color: #477DCA;
  text-decoration: underline;
}

.e-hd-date a:hover {
  text-decoration: none;
}

.e-hd-group {
  margin-bottom: 30px;
}

.e-hd-group h1,
.e-hd-group h2,
.e-hd-group h3,
.e-hd-group h4,
.e-hd-group h5,
.e-hd-group h6 {
  margin-bottom: .5em;
}

/* @ img
 * ------------------------------------------------------------ */
/*doc
---
title: images
name: images
categories: [elements, images]
---

```html_example

  <figure class="e-img-box">
    <img src="/assets/img/dummy/820x273.png" alt="">
    <figcaption class="e-img-caption">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</figcaption>
  </figure>
  <p class="e-text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
    情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>

  <div>
    <figure class="e-img-box is-img-left is-img-w33">
      <a href="" class="e-img-hover"><img src="/assets/img/dummy/820x273.png" alt=""></a>
      <figcaption class="e-img-caption">情に棹させば流される。智に働けば角が立つ。</figcaption>
    </figure>
    <p class="e-text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
  </div>


    <div class="e-responsive-img">
    <figure class="e-img-box">
      <img src="/assets/img/dummy/820x273.png" alt="">
    </figure>
   </div>


  <div class="l-unit visual-editor">
    <figure class="is-img-left is-img-w25">
      <img src="/assets/img/dummy/820x273.png" alt="">
      <figcaption class="eimg-caption">情に棹させば流される。智に働けば角が立つ。</figcaption>
    </figure>
    <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。
      情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
  </div>


```

*/
.e-img-hover {
  overflow: hidden;
}

.e-img-hover img {
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-img-hover:hover img {
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
}

.e-responsive-img {
  margin-bottom: 16px;
}

.visual-editor figure,
.e-img-box {
  margin-bottom: 16px;
  text-align: center;
}

.visual-editor figure a,
.e-img-box a {
  display: inline-block;
}

.visual-editor figure figcaption,
.visual-editor figure .e-img-caption,
.e-img-box figcaption,
.e-img-box .e-img-caption {
  text-align: left;
  margin-top: .5em;
  color: rgba(0, 0, 0, 0.54);
  font-size: .9rem;
  line-height: 1.5;
}

/*doc
---
title: tool-img
name: tool-img
categories: [utilities, tool-img]
---




<div class="styleguide-table"></div>
Class                                                                      | Description
-----------------------------------------------------------------------    | ------------
`is-img-left`                  |         |
`is-img-right`                 |         |
`is-img-center`                |         |
`is-img-w25`                   |         |
`is-img-w33`                   |         |
`is-img-w50`                   |         |
`is-img-w100`                  |         |
`is-img-frame`                 |         |
`is-img-round`                 |         |
`is-img-circle`                |         |



*/
.is-img-left,
.is-img-right {
  margin-top: .3em;
}

.is-img-left {
  margin-right: 1rem;
  float: left;
}

.is-img-right {
  margin-left: 1rem;
  float: right;
}

.is-img-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.is-img-w25 {
  width: 25%;
}

.is-img-w33 {
  width: 33.33%;
}

.is-img-w50 {
  width: 50%;
}

.is-img-w100 {
  width: 100%;
}

.is-img-frame {
  height: auto;
  padding: 2px;
  border: 1px solid #ddd;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.is-img-round {
  border-radius: 4px;
}

.is-img-border {
  border: 1px solid #ddd;
}

.is-img-circle {
  border-radius: 50%;
}

/* ==========================================================================
   #Tppesetting
   ========================================================================== */
/* 枠
   ========================================================================== */
/*doc
---
title: typesetting
name: typesetting
categories: [elements, typesetting]
---



```html_example

<p class="e-text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。 </p>
<p class="e-text-catchcopy">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。 </p>


<p class="e-text">
<span class="is-text-sub">情に棹させば流される。</span><br>
<span class="is-text-week">智に働けば角が立つ。</span><br>
<span class="is-text-point">どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</span><br>
<span class="is-text-arrow">とかくに人の世は住みにくい。</span><br>
<span class="is-text-bold">意地を通せば窮屈だ。</span><br>
<span class="is-text-strike">とかくに人の世は住みにくい。 </span></p>


```

*/
.visual-editor p,
.e-text {
  margin-bottom: 16px;
}

.visual-editor strong > strong,
.e-text-catchcopy {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.2307692308rem;
  margin-bottom: 16px;
}

/*doc
---

title: tool-text
name: tool-text
categories: [utilities, tool-text]

---

<div class="styleguide-table"></div>
Class                                                                      | Description
-----------------------------------------------------------------------    | ------------
`is-text-sub`            |                        |
`is-text-week`           |                        |
`is-text-small`           |                        |
`is-text-point`          |                        |
`is-text-arrow`          |                        |
`is-text-link`           |                        |
`is-text-bold`           |                        |
`is-text-strike`         |                        |
`is-text-indent`         |                        |
`is-text-underline`      |                        |
`is-text-bdb`            |                        |
`is-text-left`            |                        |
`is-text-right`            |                        |
`is-text-center`            |                        |
`is-text-justify`            |                        |

*/
.is-text-left {
  text-align: left;
}

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

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

.is-text-justify {
  text-align: justify;
}

.is-text-small {
  font-size: 12px;
}

.is-text-sub {
  color: rgba(0, 0, 0, 0.54);
  font-size: 12px;
}

.is-text-week {
  color: rgba(0, 0, 0, 0.38);
  font-size: 12px;
}

.is-text-bold {
  font-weight: bold;
}

.visual-editor a:link,
a.is-text-link:link {
  color: #477DCA;
  text-decoration: underline;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.visual-editor a:hover, .visual-editor a:focus, .visual-editor a:visited,
a.is-text-link:hover,
a.is-text-link:focus,
a.is-text-link:visited {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #477DCA;
  text-decoration: none;
}

.visual-editor a:hover,
a.is-text-link:hover {
  text-decoration: none;
}

.visual-editor a:visited,
a.is-text-link:visited {
  color: #477DCA;
}

.is-text-arrow:before {
  color: #06c8f9;
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
  vertical-align: middle;
  content: "navigate_next";
  white-space: nowrap;
  font-size: 1.2rem;
}

.is-text-arrow:hover:before {
  text-decoration: none;
}

.is-text-point {
  display: inline;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), color-stop(50%, #ffffa6), to(#ffffa6));
  background: linear-gradient(transparent 50%, #ffffa6 50%, #ffffa6 100%);
  padding-bottom: .1em;
  padding-right: .5em;
}

.is-text-strike {
  text-decoration: line-through;
}

.is-text-indent {
  text-indent: 1em;
}

.is-text-underline {
  text-decoration: underline;
}

.is-text-bdb {
  border-bottom: 1px solid #06c8f9;
}

/* ==========================================================================
   #LIST
   ========================================================================== */
/* list
   ========================================================================== */
.visual-editor ul,
.visual-editor ol,
.e-list {
  margin-bottom: 16px;
}

.visual-editor ul ul,
.visual-editor ul ol,
.visual-editor ol ul,
.visual-editor ol ol,
.e-list ul,
.e-list ol {
  margin-bottom: 0;
}

/* リスト disc
   ========================================================================== */
/*doc
---
title: list
name: list
categories: [elements, list]
---

```html_example
<ul class="e-list e-list--disc">
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
  <ul class="e-list e-list--disc">
    <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
    <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
    <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
    <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  </ul>
  </li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ul>
```
*/
.visual-editor ul,
.e-list--disc {
  margin-left: 1.4em;
  list-style-type: disc;
}

/* リスト decimal
   ========================================================================== */
/*doc
---
title: list-ordered
name: list-ordered
categories: [elements, list]
parent: list
---

```html_example
<ol class="e-list e-list--decimal">
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
  <li>どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。</li>
</ol>
```
*/
.visual-editor ol,
.e-list--decimal {
  margin-left: 1.4em;
  list-style-type: decimal;
}

/* 定義リスト
   ========================================================================== */
/*doc
---
title: list-description
name: list-description
categories: [elements, list]
parent: list
---

```html_example
<dl class="e-dl">
  <dt>情に棹させば流される。</dt>
  <dd>智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
  <dd>智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
  <dt>情に棹させば流される。</dt>
  <dd>智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
  <dt>情に棹させば流される。</dt>
  <dd>智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて</dd>
</dl>
```
*/
.visual-editor dl,
.e-dl {
  margin-bottom: 16px;
}

.visual-editor dl dt,
.e-dl dt {
  font-weight: bold;
  margin-top: .7em;
  margin-bottom: .1em;
}

.visual-editor dl dt:first-child,
.e-dl dt:first-child {
  margin-top: 0;
}

.visual-editor dl dd,
.e-dl dd {
  margin-left: 1.3em;
}

/* インラインリスト
   ========================================================================== */
/*doc
---
title: list-inline
name: list-inline
categories: [elements, list]
parent: list
---

```html_example
<ul class="e-list-inline">
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>
  <li><a href="">智に働けば</a></li>

</ul>
```
*/
.visual-editor .e-list-inline {
  margin-left: 0;
  list-style-type: none;
}

.e-list-inline {
  margin-bottom: 16px;
}

.e-list-inline li {
  display: inline-block;
  line-height: 1.6;
}

.e-list-inline li:before {
  padding-left: .3rem;
  content: "・";
  display: inline-block;
  width: 1em;
  height: 1em;
  color: rgba(0, 0, 0, 0.87);
}

.e-list-inline a {
  text-decoration: underline;
}

.e-list-inline a:link {
  color: #477DCA;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-list-inline a:hover, .e-list-inline a:focus, .e-list-inline a:visited {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #477DCA;
}

.e-list-inline a:hover {
  text-decoration: none;
}

.e-list-inline a:visited {
  color: #477DCA;
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/* table:base
   ========================================================================== */
.visual-editor table,
.e-table {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 16px;
}

.visual-editor table caption, .e-table caption {
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 16px;
}

.visual-editor table tr, .e-table tr,
.visual-editor table td,
.e-table td,
.visual-editor table th,
.e-table th {
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}


.visual-editor table th,
.e-table th {
  padding: 0.68em 1.4em;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  vertical-align: top;
  background-color: #f5f5f5;
}


.visual-editor table td,
.e-table td {
  padding: 0.68em 1.4em;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

/*  Bordered
   ========================================================================== */
/*doc
---
title: table
name: table
categories: [elements, table]
---




```html_example
  <table class="e-table">
    <tr>
      <th>見出し</th>
      <th>見出し</th>
      <th>見出し</th>
    </tr>
    <tr>
      <td>テキストが入ります</td>
      <td>テキストが入りますテキストが入りますテキストが入ります</td>
      <td>テキストが入ります</td>
    </tr>
    <tr>
      <td>テキストが入ります</td>
      <td>テキストが入りますテキストが入りますテキストが入ります</td>
      <td>テキストが入ります</td>
    </tr>
  </table>

```
*/
.e-table--layout-fixed {
  table-layout: fixed;
}

/* テーブル バリエーション  スマホ時縦１列
   ========================================================================== */
/*doc
---
title: table-sp-block
name: table-sp-block
categories: [elements, table]
parent: table
---

```html_example
  <table class="e-table e-table--block">
    <tr>
      <th>見出し</th>
      <td>テキストが入ります</td>
    </tr>
    <tr>
      <th>見出し</th>
      <td>テキストが入ります</td>
    </tr>
  </table>
```
*/

/* テーブル バリエーション  フォント小さい
   ========================================================================== */
/*doc
---
title: table-small
name: table-small
categories: [elements, table]
parent: table
---

```html_example
<table class="e-table e-table--small">
  <tr>
    <th class="e-th-w--small">タイトル</th>
    <th>タイトル</th>
    <th>タイトル</th>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
  <tr>
    <th>タイトル</th>
    <td>テキスト</td>
    <td>テキスト</td>
  </tr>
</table>

```
*/
.visual-editor .e-table--small th,
.visual-editor .e-table--small td,
.e-table--small th,
.e-table--small td {
  font-size: 0.7em;
}

/* テーブル バリエーション 横スクロール
   ========================================================================== */
/*doc
---
title: table-sp-scroll
name: table-sp-scroll
categories: [elements, table]
parent: table
---


```html_example


<div class="e-responsive-table">
  <table class="e-table">
    <tr>
      <th class="is-cell-10p">タイトル10%</th>
      <th class="is-cell-15p">タイトル15%</th>
      <th class="is-cell-15p">タイトル15%</th>
      <th class="is-cell-15p">タイトル15%</th>
      <th class="is-cell-10p">タイトル10%</th>
      <th>タイトル</th>
    </tr>
    <tr>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td>テキストテキスト</td>
      <td><div class="is-responsive-cell-30vw">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト30vw </div></td>
    </tr>
    <tr>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td>テキスト</td>
      <td><div class="is-responsive-cell-50vw">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト50vw </div></td>
    </tr>

  </table>
</div>
```
*/

/*doc
---
title: tool-table
name: tool-table
categories: [utilities, tool-table]
---

<div class="styleguide-table"></div>
  Class                                                                      | Description
  -----------------------------------------------------------------------    | ------------
  `is-layout-fixed`            |         |
  `is-table-100p`            |         |
  `is-cell-center`            |         |
  `is-cell-1em`             |         |
  `is-cell-10p`             |         |
  `is-cell-15p`             |         |
  `is-cell-20p`             |         |
  `is-cell-25p`             |         |
  `is-cell-30p`             |         |
  `is-cell-50p`             |         |
  `is-responsive-cell-30vw`             |         |
  `is-responsive-cell-50vw`             |         |

*/
.is-layout-fixed {
  table-layout: fixed;
}

.is-table-100p {
  width: 100%;
}

th.is-cell-center,
td.is-cell-center {
  text-align: center;
}

th.is-cell-1em,
td.is-cell-1em {
  width: 1em;
}

th.is-cell-10p,
td.is-cell-10p {
  width: 10%;
}

th.is-cell-15p,
td.is-cell-15p {
  width: 15%;
}

th.is-cell-20p,
td.is-cell-20p {
  width: 20%;
}

th.is-cell-25p,
td.is-cell-25p {
  width: 25%;
}

th.is-cell-30p,
td.is-cell-30p {
  width: 30%;
}

th.is-cell-50p,
td.is-cell-50p {
  width: 50%;
}

/* ==========================================================================
   #BOX
   ========================================================================== */
/*doc
---
title: box
name: box
categories: [elements, box]
---

```html_example

<div class="e-box">
   <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。とかくに人の世は住みにくい。</p>
</div>

```


```html_example

<div class="e-box e-box--error">
    <p>ボックス（error）<br>このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>

<div class="e-box e-box--warning">
    <p>ボックス（warning）<br>このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>


<div class="e-box e-box--info">
    <p>ボックス（info）<br>このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>


<div class="e-box e-box--success">
    <p>ボックス（success）<br>このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>


<div class="e-box e-box--bg">
    <p>ボックス（$bg-color）<br>このように、選択した部分に背景色と枠線のスタイルがつきます。</p>
</div>




```

*/
.visual-editor .e-box h1,
.visual-editor .e-box h2,
.visual-editor .e-box h3,
.visual-editor .e-box h4,
.visual-editor .e-box h5,
.visual-editor .e-box h6 {
  margin-top: 0;
  margin-bottom: .2rem;
}

.e-box {
  display: block;
  background: #fff;
  border: solid 1px #ddd;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.e-box > *:last-child {
  margin-bottom: 0;
}

.e-box__title {
  font-weight: bold;
}

.e-box--bg {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
}

.e-box--error {
  background-color: #fef8f8;
  border-color: #E53958;
}

.e-box--warning {
  background-color: #fef8ec;
  border-color: #fef8ec;
}

.e-box--info {
  background-color: #e7f2f7;
  border-color: #e7f2f7;
}

.e-box--success {
  background-color: #f1f5e8;
  border-color: #f1f5e8;
}

/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/* ボタンベース
   ========================================================================== */
/*doc
---
title: button
name: button
categories: [elements, button]
---


<h3 class="styleguide">Default</h3>

```html_example

<div class="e-button-group">
  <button id="button1" class="ripple e-button e-button--primary" type="button"><i class="material-icons is-icon-left">navigate_before</i>もっと見る<i class="material-icons is-icon-right">navigate_next</i></button>
  <button class="ripple e-button e-button--primary is-hover" type="button">もっと見る
  </button>
  <button class="ripple e-button e-button--primary is-disabled" type="button">もっと見る</button>
</div>

```


<h3 class="styleguide">Secondary</h3>

```html_example

<div class="e-button-group">
  <button class="e-button e-button--secondary" type="button"><i class="material-icons is-icon-left">navigate_before</i>もっと見る<i class="material-icons is-icon-right">navigate_next</i></button>
  <button class="e-button e-button--secondary is-hover" type="button">もっと見る</button>
  <button class="e-button e-button--secondary is-disabled" type="button">もっと見る</button>
</div>

```


*/
.e-button {
  font-weight: bold;
  text-decoration: none !important;
  color: rgba(0, 0, 0, 0.87) !important;
  padding: 0.9rem 1.6rem;
  min-width: 64px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4;
  border: solid 1px #cccccc;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d9f6ff));
  background-image: linear-gradient(#ffffff, #d9f6ff);
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

.e-button:hover, .e-button:focus, .e-button.is-hover {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: .5;
  text-decoration: none;
}

.e-button:active {
  text-decoration: none;
}

.e-button:disabled, .e-button.is-disabled {
  opacity: .5;
  cursor: not-allowed;
  background: #eee;
  border: 1px solid #ddd;
  color: #666 !important;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.e-button .is-icon-left,
.e-button .is-icon-right {
  position: absolute;
  top: 0;
  margin: auto;
  bottom: 0;
  height: 1em;
  width: 1em;
}

.e-button .is-icon-left {
  left: .5em;
}

.e-button .is-icon-right {
  right: .5em;
}

.e-button--secondary {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#39bc00), to(#2e9600));
  background-image: linear-gradient(#39bc00, #2e9600);
  border: solid 1px #39bc00;
  color: #fff !important;
}

.e-button--3rd {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#D2EAE6), to(#D2EAE6));
  background-image: linear-gradient(#D2EAE6, #D2EAE6);
  border: solid 1px #459988;
  color: #459988 !important;
}

.e-button--4th {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#459988), to(#459988));
  background-image: linear-gradient(#459988, #459988);
  border: solid 1px #459988;
  color: #fff !important;
}

.e-button--5th {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#1F5BA2), to(#1F5BA2));
  background-image: linear-gradient(#1F5BA2, #1F5BA2);
  border: solid 1px #1F5BA2;
  color: #fff !important;
}

/* ボタングループ
   ========================================================================== */
/*doc
---
title: button-group
name: button-group
categories: [elements, button]
parent: button
---

```html_example
<div class="e-button-group">
  <button type="button" class="e-button">もっと見る</button>
  <button type="button" class="e-button">もっと見る</button>
</div>

<div class="e-button-group">
  <button type="button" class="e-button">もっと見る</button>
  <button type="button" class="e-button">もっと見る</button>
</div>


```

*/
.e-button-group {
  margin-right: -16px;
  margin-left: -16px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.e-button-group .e-button {
  margin-bottom: 16px;
  margin-right: 16px;
  margin-left: 16px;
}

.e-button-group--50p .e-button {
  width: 50%;
}

/* ボタンサイズ
   ========================================================================== */
/*doc
---
title: button-size
name: button-size
categories: [elements, button]
parent: button
---

```html_example
<div class="e-button-group e-button-group--left">
  <button type="button" class="e-button e-button--small">もっと見る</button>
  <button type="button" class="e-button e-button--medium">もっと見る</button>
  <button type="button" class="e-button e-button--large">もっと見る</button>
  <button type="button" class="e-button e-button--xlarge">もっと見る</button>
</div>

```

*/
.e-button--small {
  padding: .5rem 1rem;
  font-weight: normal;
  border-radius: 4px;
}

.e-button--slarge {
  padding: 0.9rem 1.6rem;
  font-size: 1.2em;
  font-weight: bold;
  min-width: 165px;
}

.e-button--fbutton {
  margin-top: 1.2em;
  padding: 0.9rem 1.6rem;
  font-size: 1.2em;
  font-weight: bold;
  max-width: 80%;
}

.e-button--large {
  padding: 0.9rem 1.6rem;
  font-size: 1.2em;
  font-weight: bold;
  min-width: 230px;
}

.e-button--xlarge {
  padding: 1.35rem 2.24rem;
  font-size: 1.5em;
  font-weight: bold;
  min-width: 230px;
}

/* @ label
 * ------------------------------------------------------------ */
/*doc
---
title: Label
name: label
categories: [elements, label]
---

```html_example
<span class="e-label">Pickup</span>
<span class="e-label e-label--red">Red</span>
<span class="e-label e-label--brawn">Brawn</span>
<span class="e-label e-label--yellow">Yellow</span>
<span class="e-label e-label--pink">Pink</span>
<span class="e-label e-label--blue">Blue</span>
<span class="e-label e-label--light-green">Light Green</span>
<span class="e-label e-label--green">Green</span>
<span class="e-label e-label--orange">Orange</span>
<span class="e-label e-label--purple">Purple</span>
```
*/
.e-label {
  color: #fff !important;
  text-decoration: none !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 3rem;
  display: inline-block;
  padding: 3px 6px;
  border: 0;
  background-color: #00AFDD;
  line-height: 1.2;
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
}

.e-label a {
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-label a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

h1 > .e-label,
h2 > .e-label,
h3 > .e-label,
h4 > .e-label,
h5 > .e-label,
h6 > .e-label {
  line-height: inherit;
  vertical-align: middle;
}

.e-label--red {
  background-color: #E53958 !important;
}

.e-label--pink {
  background-color: #E53958 !important;
}

.e-label--brawn {
  background-color: #af9100 !important;
}

.e-label--blue {
  background-color: #0B7DAF !important;
}

.e-label--light-green {
  background-color: #6f9614 !important;
}

.e-label--orange {
  background-color: #e75a00 !important;
}

.e-label--purple {
  background-color: #997ebd !important;
}

.e-label--green {
  background-color: #1b957b !important;
}

/* ==========================================================================
   #media
   ========================================================================== */
/*doc
---
title: media
name: media
categories: [elements, media]
---

<h3 class="styleguide">Default</h3>


```html_example

<div class="e-media">
  <div class="e-media__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
  <div class="e-media__body">
    <p class="e-media__title">情に棹させば流される智に働けば角が立つ</p>
    <p class="e-media__text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
  </div>
</div>

```


*/
.e-media {
  margin-bottom: 16px;
  background: #fff;
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
  border-radius: 4px;
  border: 1px solid #CCCCCC;
  position: relative;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  color: inherit;
  display: block;
}

.e-media:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-media > a {
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.e-media::after {
  clear: both;
  content: "";
  display: block;
}

.e-media__img {
  text-align: center;
  float: left;
}

.e-media__img + .e-media__img {
  margin-bottom: 10px;
}

.e-media__img img {
  max-width: 270px;
}

.e-media__body {
  overflow: hidden;
  padding: 1.4em;
  padding-left: 2em;
}

.e-media__body > *:last-child {
  margin-bottom: 0;
}

.e-media__label {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.e-media__label span {
  display: block;
  margin-bottom: .2em;
}

.e-media__date {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 10px;
}

.e-media__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.6;
}

.e-media__text {
  color: rgba(0, 0, 0, 0.54);
  font-size: 12px;
}

.e-media__text + .e-media__text {
  margin-top: 16px;
}

/* ==========================================================================
   #card
   ========================================================================== */
/*doc
---
title: card
name: card
categories: [elements, card]
---

<h3 class="styleguide">Default</h3>

<br>

```html_example

<div class="e-card">
  <a href="">
    <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
    <div class="e-card__body">
      <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
      <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
    </div>
  </a>
</div>

```

*/
.e-card {
  color: inherit;
  background-color: #fff;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 16px;
}

.e-card > a {
  width: 100%;
  display: block;
  color: inherit;
  height: inherit;
  text-decoration: none;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-card > a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.e-card__img {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.e-card__body {
  padding: .6rem 1rem;
  position: relative;
  min-height: 2em;
}

.e-card__label {
  font-size: 12px;
  display: inline-block;
  position: absolute;
  top: -1.7em;
  left: 0;
}

.e-card__label span {
  margin-right: .2em;
}

.e-card__title, .e-card__text {
  margin-bottom: .3rem;
}

.e-card__title {
  font-weight: bold;
  line-height: 1.4;
  font-size: 16px;
  font-size: 1.2307692308rem;
}

.e-card__text + .e-card__text {
  margin-top: 16px;
}

/* ==========================================================================
   #breadcrumb
   ========================================================================== */
/*doc
---
title: breadcrumb
name: breadcrumb
categories: [components, breadcrumb]
---

```html_example
<div class="c-breadcrumb" role="navigation" aria-label="現在地表示">
  <div class="c-breadcrumb__inner">
    <span><a href="/">ホーム</a></span>
        <span><a href="/category/">カテゴリー</a></span>
        <span>ページタイトル</span>
  </div>
</div>


```



<h3 class="styleguide">構造化データ</h3>

```html_example
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement":
  [

    {
      "@type": "ListItem",
      "position": 1,
      "item":
      {
        "@id": "/category/",
        "name": "カテゴリー"
      }
    },

    {
      "@type": "ListItem",
      "position": 2,
      "item":
      {
        "@id": "",
        "name": "ページタイトル"
      }
    }

  ]
}
</script>

```

*/
.c-breadcrumb {
  text-align: right;
}

.c-breadcrumb__inner {
  font-size: .875rem;
}

.c-breadcrumb__inner span {
  display: inline-block;
}

.c-breadcrumb__inner a {
  text-decoration: none;
  color: #477DCA;
}

.c-breadcrumb__inner span:after {
  content: "/";
  padding-right: .5em;
  padding-left: .5em;
  color: #ddd;
}

.c-breadcrumb__inner span:last-child:after {
  display: none;
}

.c-breadcrumb__inner a:hover {
  text-decoration: underline;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  color: #477DCA;
}

/* ==========================================================================
   #pagination
   ========================================================================== */
/*doc
---
title: pagination
name: pagination
categories: [components, pagination]
---

```html_example
<div class="c-pagenavi">
  <a class="c-previouspostslink" rel="prev" href=""></a>
  <span class="is-current">1</span>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
  <span class="extend">...</span>
  <a class="c-nextpostslink" rel="next" href=""></a>
</div>


```
*/
.c-pagenavi {
  text-align: center;
  margin-bottom: 16px;
}

.c-pagenavi .cur,
.c-pagenavi .is-current,
.c-pagenavi .c-extend,
.c-pagenavi a {
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 10px;
  display: inline-block;
  min-width: 36px;
  height: 36px;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #fff;
  line-height: 34px;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #ddd;
  font-size: .75em;
  color: rgba(0, 0, 0, 0.54);
}

.c-pagenavi .cur,
.c-pagenavi .is-current {
  border: 1px solid #ddd;
  background-color: #06c8f9;
  color: #fff;
}

.c-pagenavi .cur:before,
.c-pagenavi .is-current:before {
  border-color: #fff;
}

.c-pagenavi a {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-pagenavi a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-previouspostslink,
.c-nextpostslink {
  position: relative;
}

.c-previouspostslink:before,
.c-nextpostslink:before {
  display: inline-block;
  position: relative;
  top: -.1em;
  bottom: 0;
  right: 0;
  left: 0;
  width: 4px;
  height: 4px;
  margin: auto;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border: 1px solid rgba(0, 0, 0, 0.54);
  content: "";
  vertical-align: middle;
}

.c-previouspostslink:before {
  border-top-width: 0;
  border-right-width: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
  left: .1em;
}

.c-nextpostslink:before {
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0;
  border-left-width: 0;
  right: .1em;
}

/*doc
---
title: pagination-pager
name: pagination-pager
categories: [components, pagination]
parent: pagination
---

```html_example

    <div class="c-pager">
      <ul class="c-pager__inner">
        <li class="c-pager__prev"><span class="is-disabled"><i class="material-icons">navigate_before</i> 前の記事を読む</span></li>
        <li class="c-pager__to-top"><a href="">ブログトップ</a></li>
        <li class="c-pager__next"><a href="">次の記事を読む <i class="material-icons">navigate_next</i></a></li>
      </ul>
    </div>

```
*/
.c-pager {
  border-top: 1px dotted #e6e6e6;
  padding-top: 1.6em;
  margin-bottom: 16px;
}

.c-pager a {
  text-decoration: none;
}

.c-pager__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

.c-pager__to-top, .c-pager__prev {
  margin-right: 5px;
}

.c-pager__to-top, .c-pager__prev, .c-pager__next {
  margin-bottom: .5em;
}

.c-pager__to-top i, .c-pager__prev i, .c-pager__next i {
  position: relative;
  top: .1em;
}

.c-pager__to-top a, .c-pager__to-top span, .c-pager__prev a, .c-pager__prev span, .c-pager__next a, .c-pager__next span {
  display: block;
  border-radius: 4px;
  background-color: #00afdd;
  color: #fff;
  padding: .6em 1em;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-pager__to-top a:hover, .c-pager__to-top span:hover, .c-pager__prev a:hover, .c-pager__prev span:hover, .c-pager__next a:hover, .c-pager__next span:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-pager__to-top .is-disabled, .c-pager__prev .is-disabled, .c-pager__next .is-disabled {
  cursor: not-allowed;
  background-color: #eee;
  color: #666;
}

/* ==========================================================================
   #menu
   ========================================================================== */
/*doc
---
title: menu
name: menu
categories: [components, menu]
---

```html_example
<div class="c-menu">
  <h3 class="c-menu__title">階層構造メニュー secondary</h3>
  <ul class="c-menu__list">
    <li><a href="">タイトル</a>
    <ul class="c-menu__list">
        <li><a href="" class="is-active">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
    </ul>
    </li>
    <li><a href="">タイトル</a></li>
    <li><a href="">タイトル</a></li>
  </ul>
</div>


```
*/
/* menu
   ========================================================================== */
.c-menu {
  margin-bottom: 16px;
  border-bottom: 1px dotted #E6E6E6;
}

.c-menu__title-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c-menu__title-group .c-menu__title {
  background-color: transparent;
  padding-left: .4em;
  font-size: 19px;
  font-size: 1.4615384615rem;
  color: #0B7DAF;
}

.c-menu__title {
  background: rgba(0, 175, 221, 0.1);
  color: #00AFDD;
  font-size: 15px;
  font-size: 1.1538461538rem;
  padding: .6em 1em;
  font-weight: bold;
}

.c-menu__list {
  margin-bottom: 0;
}

.c-menu__list li {
  padding: .6em;
  display: block;
  border-top: 1px dotted #ddd;
  font-size: 14px;
  font-size: 1.0769230769rem;
}

.c-menu__list li.is-active {
  font-weight: bold;
  background-color: #f5f5f5;
}

.c-menu__list a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.87);
  display: inline-block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-menu__list a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-menu__list .c-menu__list {
  margin-left: 1.2em;
}

/* Anchor Nav
   ========================================================================== */
/*doc
---
title: anchor-nav
name: anchor-nav
categories: [js, anchor-nav]
---

```html_example
<div class="c-anchor-nav">
    <ul data-scroll>
      <li><a href="#accordion">accordion</a></li>
      <li><a href="#calendar">calendar</a></li>
    </ul>
</div>
```

*/
.c-anchor-nav {
  margin-bottom: 3rem;
  border-radius: 3px;
  border: 1px solid #477ccb;
}

.c-anchor-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-anchor-nav li {
  border-right: 1px dotted #e6e6e6;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

.c-anchor-nav li:last-child {
  border-right: 0;
  border-bottom: 0;
}

.c-anchor-nav li a {
  padding: 1em .6em;
  display: block;
  color: #477ccb;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-anchor-nav li a:before {
  margin-right: .4em;
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
  vertical-align: middle;
  content: "expand_more";
  white-space: nowrap;
  font-size: 1em;
}

.c-anchor-nav li a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page Nav
   ========================================================================== */
/*doc
---
title: page-nav
name: page-nav
categories: [components, page-nav]
---

```html_example
<div class="c-page-nav">
    <ul>
      <li class="is-active"><a href="#accordion">accordion</a></li>
      <li><a href="#calendar">calendar</a></li>
    </ul>
</div>
```

*/
.c-page-nav {
  margin-bottom: 3rem;
  border-radius: 3px;
  border: 1px solid #477ccb;
}

.c-page-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.c-page-nav li {
  border-right: 1px solid #C6D7EF;
  width: 100%;
  white-space: nowrap;
  text-align: center;
}

.c-page-nav li:last-child {
  border-right: 0;
  border-bottom: 0;
}

.c-page-nav li.is-active {
  background-color: #EBF1F9;
}

.c-page-nav li a {
  font-size: 16px;
  font-weight: bold;
  padding: .6em;
  display: block;
  color: #477ccb;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-page-nav li a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* @ horizon
 * ------------------------------------------------------------ */
/*doc
---
title: summary
name: summary
categories: [components, summary]
---

```html_example

<div>
           <div>
          <ul class="c-summary-horizontal">
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
            <li class="c-summary__item e-card">
              <a href="">
                <div class="e-card__img"><img src="/assets/img/car/img1.png" alt=""></div>
                <div class="e-card__body">
                  <p class="e-card__title">初代フェアレディZ:S30改240ZG仕様</p>
                  <p class="e-card__text"><i class="material-icons is-text-sub">schedule</i><span class="is-text-sub">1.5時間</span> ¥11,980〜</p>
                </div>
              </a>
            </li>
          </ul>
          <p class="is-text-sub">※ご利用条件およびその他の費用等、詳細につきましては各車種のページをご覧ください。</p>
          </div>

<div class="c-pagenavi">
  <a class="c-previouspostslink" rel="prev" href=""></a>
  <span class="is-current">1</span>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
  <span class="c-extend">...</span>
  <a class="c-nextpostslink" rel="next" href=""></a>
</div>
</div>

```
*/
.c-summary-horizontal {
  margin-bottom: 24px;
  margin-left: -1.2%;
  margin-right: -1.2%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.c-summary-horizontal .c-summary__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22.6%;
          flex: 0 0 22.6%;
  margin-left: 1.2%;
  margin-right: 1.2%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}

.c-summary-horizontal .c-summary__item > *:last-child {
  margin-bottom: 0;
}

/* @ vertical
 * ------------------------------------------------------------ */
/*doc
---
title: summary-vertical
name: summary-vertical
categories: [components, summary]
parent: summary

---

```html_example

<div>
  <ul class="c-summary-vertical">
    <li class="c-summary__item e-media">
      <a href="">
        <div class="e-media__img">
          <img src="/assets/img/entry/img2.png">
        </div>
        <div class="e-media__body">
          <p class="e-media__label">メンテナンス</p>
          <p class="e-media__text is-text-week">2018.4.26</p>
          <p class="e-media__title">最新のエボが最良のエボ!?ランサーエボリューションX導入!!</p>
          <p class="e-media__text is-text-week">【Fun2Driveニュース】最新のエボが最良のエボ!?ランサーエボリューションX導入!!先週末の箱根は大変良いお天気に恵まれ</p>
        </div>
      </a>
    </li>
    <li class="c-summary__item e-media">
      <a href="">
        <div class="e-media__img">
          <img src="/assets/img/entry/img2.png">
        </div>
        <div class="e-media__body">
          <p class="e-media__label">メンテナンス</p>
          <p class="e-media__text is-text-week">2018.4.26</p>
          <p class="e-media__title">最新のエボが最良のエボ!?ランサーエボリューションX導入!!</p>
          <p class="e-media__text is-text-week">【Fun2Driveニュース】最新のエボが最良のエボ!?ランサーエボリューションX導入!!先週末の箱根は大変良いお天気に恵まれ</p>
        </div>
      </a>
    </li>
    <li class="c-summary__item e-media">
      <a href="">
        <div class="e-media__img">
          <img src="/assets/img/entry/img2.png">
        </div>
        <div class="e-media__body">
          <p class="e-media__label">メンテナンス</p>
          <p class="e-media__text is-text-week">2018.4.26</p>
          <p class="e-media__title">最新のエボが最良のエボ!?ランサーエボリューションX導入!!</p>
          <p class="e-media__text is-text-week">【Fun2Driveニュース】最新のエボが最良のエボ!?ランサーエボリューションX導入!!先週末の箱根は大変良いお天気に恵まれ</p>
        </div>
      </a>
    </li>

  </ul>
 </div>


<div class="c-pagenavi">
  <a class="c-previouspostslink" rel="prev" href=""></a>
  <span class="is-current">1</span>
  <a href="">2</a>
  <a href="">3</a>
  <a href="">4</a>
  <a href="">5</a>
  <span class="c-extend">...</span>
  <a class="c-nextpostslink" rel="next" href=""></a>
</div>

```
*/
.c-summary-vertical {
  margin-bottom: 30px;
}

.c-summary-vertical li {
  margin-bottom: 30px;
}

/* ==========================================================================
   #Accordion
   ========================================================================== */
/*doc
---
title: accordion
name: accordion
categories: [js, accordion]
---

```html_example

<div class="c-accordion" data-accordion>
 <button type="button" class="c-accordion__title" aria-controls="accordion1" aria-expanded="true" aria-label="開く" data-toggle-accordion> 情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</button>
 <div id="accordion1" class="c-accordion__body" aria-hidden="true" style="display:none;" data-body-accordion>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
 </div>
</div>

<div class="c-accordion c-accordion--faq is-active" data-accordion data-device-accordion="all">
 <button type="button" class="c-accordion__title" aria-controls="accordion2" aria-expanded="false" aria-label="閉じる" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - ALL</button>
 <div id="accordion2" class="c-accordion__body" aria-hidden="false" data-body-accordion>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
 </div>
</div>


<div class="c-accordion" data-accordion data-device-accordion="sp">
 <button type="button" class="c-accordion__title" aria-controls="accordion3" aria-expanded="true" aria-label="開く" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - SP</button>
 <div id="accordion3" class="c-accordion__body" aria-hidden="true" style="display:none;" data-body-accordion>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
 </div>
</div>



```


<div class="c-accordion" data-accordion data-device-accordion="all">
  <button type="button" class="c-accordion__title" aria-expanded="true" aria-label="開く" data-toggle-accordion>Accessibility</button>
    <div class="c-accordion__body" aria-hidden="true" style="display:none;" data-body-accordion>
  <ul class="list list--disc">
    <li>表示領域の操作はマウスとキーボードの両方で使用可能です。</li>
    <li>ボタン領域の属性は、aria-expanded = `true`または`false`を設定します（必須）。</li>
    <li>ボタン領域の属性は、aria-label = `開く`または`閉じる`を設定します（必須）。</li>
    <li>ボタン領域にaria-controls = `id名`、コンテンツ領域に該当する`id名`を設定し、表示領域の関連付けを設定します（任意）。</li>
    <li>コンテンツ領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`または`false`を設定します（必須）。</li>
  </ul>
    </div>
</div>


*/
.c-accordion {
  border-bottom: 0;
  background: #fff;
  margin-bottom: 10px;
}

.c-accordion__title {
  display: block;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  text-align: left;
  background-color: transparent;
  font-weight: bold;
  padding: 1.4rem 25px 1.3rem 20px;
  border: 1px solid #ddd;
  cursor: pointer;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.8;
  border-radius: 4px 4px 4px 4px;
}

.c-accordion__title {
  position: relative;
}

.c-accordion__title:after {
  color: rgba(0, 0, 0, 0.87);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
  height: 1em;
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
  vertical-align: middle;
  content: "add";
  white-space: nowrap;
  font-size: 20px;
}

.c-accordion__title[aria-expanded="false"] {
  border-radius: 4px 4px 0 0;
}

.c-accordion__title[aria-expanded="false"]:after {
  content: "remove";
}

.c-accordion__body {
  border: 1px solid #ddd;
  border-top: 0;
  padding: 25px 20px;
  background-color: #F0FCFF;
  border-radius: 0 0 4px 4px;
}

.c-accordion--faq .c-accordion__title {
  padding-left: 4.5rem;
}

.c-accordion--faq .c-accordion__title:before {
  width: 2.428571429rem;
  height: 2.428571429rem;
  font-size: 1.142857143rem;
  line-height: 2.428571429rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: 'Q';
  color: #fff;
  display: inline-block;
  border-radius: 100px;
  background-color: #477CCB;
  text-align: center;
  position: absolute;
  left: 15px;
  top: .9em;
}

.c-accordion--faq .c-accordion__body {
  padding-left: 5.5em;
  position: relative;
}

.c-accordion--faq .c-accordion__body:before {
  width: 2.428571429rem;
  height: 2.428571429rem;
  font-size: 1.142857143rem;
  line-height: 2.428571429rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: 'A';
  color: #fff;
  display: inline-block;
  border-radius: 100px;
  background-color: #FD95A1;
  text-align: center;
  position: absolute;
  left: 2em;
  top: 1.3em;
}

/* ==========================================================================
   #carousel
   ========================================================================== */
.bxslider-main a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-main a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-main.is-slider-captions .bx-wrapper .bx-pager {
  bottom: 6em;
}

.bxslider-main.is-slider-captions .bx-wrapper .bx-controls-direction a {
  top: -55px;
}

.bxslider-main .bx-wrapper {
  margin-bottom: 24px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  background: transparent;
}

.bxslider-main .bx-wrapper img {
  width: 100%;
}

.bxslider-main .bx-wrapper .bx-viewport {
  overflow: visible !important;
}

.bxslider-main .bx-wrapper .bx-caption {
  position: static;
  background-color: #333;
}

.bxslider-main .bx-wrapper .bx-caption span {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.bxslider-main .bx-wrapper .bx-pager {
  position: absolute;
  bottom: 1.3em;
  left: 0;
  right: 0;
  padding-top: 10px;
}

.bxslider-main .bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #00AFDD;
  border-radius: 100px;
  margin: 0 10px;
  width: 8px;
  height: 8px;
}

.bxslider-main .bx-wrapper .bx-pager.bx-default-pager a.active,
.bxslider-main .bx-wrapper .bx-pager.bx-default-pager a:focus,
.bxslider-main .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #00AFDD;
  border: 1px solid #00AFDD;
}

.bxslider-main .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 0px;
  bottom: 0;
  margin: auto;
  outline: 0;
  width: 35px;
  height: 80px;
  text-indent: -9999px;
  z-index: 100;
}

.bxslider-main .bx-wrapper .bx-prev {
  left: 0;
  background: url("../img/common/slider_left1.png") 0 0 no-repeat;
}

.bxslider-main .bx-wrapper .bx-prev:hover,
.bxslider-main .bx-wrapper .bx-prev:focus {
  background-position: 0 0;
  opacity: .4;
}

.bxslider-main .bx-wrapper .bx-next {
  right: 0;
  background: url("../img/common/slider_right1.png") 0 0 no-repeat;
}

.bxslider-main .bx-wrapper .bx-next:hover,
.bxslider-main .bx-wrapper .bx-next:focus {
  background-position: 0 0;
  opacity: .4;
}

.bxslider-main2 {
  margin-bottom: 24px;
}

.bxslider-main2.is-slider-captions .bx-wrapper .bx-pager {
  bottom: 6em;
}

.bxslider-main2 a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-main2 a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-main2 .bx-wrapper {
  margin-bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  background: transparent;
}

.bxslider-main2 .bx-wrapper .bx-viewport {
  overflow: visible !important;
}

.bxslider-main2 .bx-wrapper .bx-caption {
  border-radius: 0 0 3px 3px;
  position: static;
  background-color: #333;
}

.bxslider-main2 .bx-wrapper .bx-caption span {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.6;
}

.bxslider-main2 .bx-wrapper .bx-pager {
  padding-top: 10px;
  position: static;
}

.bxslider-main2 .bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #00AFDD;
  border-radius: 100px;
  margin: 0 10px;
  width: 8px;
  height: 8px;
}

.bxslider-main2 .bx-wrapper .bx-pager.bx-default-pager a.active,
.bxslider-main2 .bx-wrapper .bx-pager.bx-default-pager a:focus,
.bxslider-main2 .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #00AFDD;
  border: 1px solid #00AFDD;
}

.bxslider-main2 .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: -30px;
  bottom: 0;
  margin: auto;
  outline: 0;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  z-index: 100;
}

.bxslider-main2 .bx-wrapper .bx-prev {
  left: -40px;
  background: url("../img/common/slider_left2.png") 0 0 no-repeat;
}

.bxslider-main2 .bx-wrapper .bx-prev:hover,
.bxslider-main2 .bx-wrapper .bx-prev:focus {
  background-position: 0 0;
  opacity: .4;
}

.bxslider-main2 .bx-wrapper .bx-next {
  right: -40px;
  background: url("../img/common/slider_right2.png") 0 0 no-repeat;
}

.bxslider-main2 .bx-wrapper .bx-next:hover,
.bxslider-main2 .bx-wrapper .bx-next:focus {
  background-position: 0 0;
  opacity: .4;
}

.bxslider-sub {
  margin-bottom: 24px;
}

.bxslider-sub a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-sub a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-sub.is-slider-captions .bx-wrapper .bx-pager {
  bottom: 6em;
}

.bxslider-sub .bx-wrapper {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  background: transparent;
}

.bxslider-sub .bx-wrapper li img {
  text-align: center;
  margin: 0 auto;
}

.bxslider-sub .bx-wrapper .bx-caption {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 3px 3px;
}

.bxslider-sub .bx-wrapper .bx-caption span {
  font-weight: bold;
  padding: .5em 1em;
}

.bxslider-sub .bx-wrapper .bx-pager {
  display: none;
  padding-top: 10px;
  position: static;
}

.bxslider-sub .bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #00AFDD;
  border-radius: 100px;
  margin: 0 10px;
  width: 8px;
  height: 8px;
}

.bxslider-sub .bx-wrapper .bx-pager.bx-default-pager a.active,
.bxslider-sub .bx-wrapper .bx-pager.bx-default-pager a:focus,
.bxslider-sub .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #00AFDD;
  border: 1px solid #00AFDD;
}

.bxslider-inline a {
  display: block;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-inline a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.bxslider-inline.is-slider-pager .bx-wrapper {
  margin-bottom: 60px;
}

.bxslider-inline.is-slider-pager .bx-wrapper .bx-pager {
  display: block;
}

.bxslider-inline .bx-wrapper {
  margin-bottom: 24px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  background: transparent;
}

.bxslider-inline .bx-wrapper .bxslider__title {
  padding-top: .3em;
  font-weight: bold;
  font-size: 1.1em;
}

.bxslider-inline .bx-wrapper .bx-caption {
  position: static;
  background-color: #333;
}

.bxslider-inline .bx-wrapper .bx-caption span {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.bxslider-inline .bx-wrapper .bx-pager {
  display: none;
  padding-top: 10px;
}

.bxslider-inline .bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #00AFDD;
  border-radius: 100px;
  margin: 0 10px;
}

.bxslider-inline .bx-wrapper .bx-pager.bx-default-pager a.active,
.bxslider-inline .bx-wrapper .bx-pager.bx-default-pager a:focus,
.bxslider-inline .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #00AFDD;
  border: 1px solid #00AFDD;
}

.bxslider-inline .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 38px;
  margin: auto;
  outline: 0;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  z-index: 100;
}

.bxslider-inline .bx-wrapper .bx-prev {
  left: -40px;
  background: url("../img/common/slider_left2.png") 0 0 no-repeat;
}

.bxslider-inline .bx-wrapper .bx-prev:hover,
.bxslider-inline .bx-wrapper .bx-prev:focus {
  background-position: 0 0;
  opacity: .4;
}

.bxslider-inline .bx-wrapper .bx-next {
  right: -40px;
  background: url("../img/common/slider_right2.png") 0 0 no-repeat;
}

.bxslider-inline .bx-wrapper .bx-next:hover,
.bxslider-inline .bx-wrapper .bx-next:focus {
  background-position: 0 0;
  opacity: .4;
}

/* ==========================================================================
   #offcanvas
   ========================================================================== */
/*doc
---
title: offcanvas
name: offcanvas
categories: [js, offcanvas]
---


```html_example

<div style="background:#ccc; padding:1em">
    <div class="c-control-offcanvas">
      <button
          type="button"
          aria-controls="aria-offcanvas"
          aria-expanded="false"
          aria-label="開く"
          data-toggle-offcanvas>
          <div class="c-control-offcanvas__icon"><span></span><span></span><span></span></div>
          <span class="c-control-offcanvas__title">メニュー</span>
         </button>
    </div>
</div>

  <div class="c-offcanvas" aria-hidden="true" data-body-offcanvas>
    <div id="aria-offcanvas" class="c-offcanvas__body">
      <nav role="navigation" aria-label="スマートフォン用サイト全体のメニュー">
        <ul class="c-offcanvas__list">
          <li><a href="/" class="is-active">offcanvas</a></li>
          <li><a href="#ripple" data-scroll-offcanvas>ripple(ページ内スクロール)</a></li>
          <li><a href="/">会社案内</a></li>
          <li><a href="/">お問い合わせ</a></li>
        </ul>

      </nav>
    </div>
  </div>

<div id="js-offcanvas-bg"></div>
```
*/
.c-control-offcanvas a,
.c-control-offcanvas button {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  white-space: nowrap;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
  vertical-align: middle;
  background-color: transparent;
  border: 0;
}

.c-control-offcanvas a:hover,
.c-control-offcanvas button:hover {
  text-decoration: none;
}

.c-control-offcanvas__title {
  display: block;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.87);
}

.c-control-offcanvas__icon {
  display: block;
  margin-left: 3px;
  width: 25px;
  height: 30px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  cursor: pointer;
}

.c-control-offcanvas__icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.c-control-offcanvas__icon span:nth-child(1) {
  top: 0;
}

.c-control-offcanvas__icon span:nth-child(2) {
  top: 8px;
}

.c-control-offcanvas__icon span:nth-child(3) {
  top: 16px;
}

[aria-expanded="true"] .c-control-offcanvas__icon span:nth-child(1) {
  top: 12px;
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

[aria-expanded="true"] .c-control-offcanvas__icon span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

[aria-expanded="true"] .c-control-offcanvas__icon span:nth-child(3) {
  top: 12px;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.c-offcanvas {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transform: translateX(257px);
      -ms-transform: translateX(257px);
          transform: translateX(257px);
  width: 256px;
  background: #fff;
  display: block;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
  -webkit-transition-property: left, -webkit-transform;
  transition-property: left, -webkit-transform;
  transition-property: transform, left;
  transition-property: transform, left, -webkit-transform;
  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
}

.c-offcanvas[aria-hidden="false"] {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
  background: #fff;
}

.c-offcanvas__body {
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #06c8f9;
  z-index: 9999;
}

.c-offcanvas nav {
  padding-top: 10px;
}

.c-offcanvas__list li a {
  line-height: 1.4;
  border-radius: 0;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  padding: 1em 22px;
  display: block;
}

.c-offcanvas__list li a:hover {
  text-decoration: none;
}

.c-offcanvas__list-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 1em 22px;
}

.c-offcanvas__list-icon li {
  margin-right: 1.5em;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../iconfont/MaterialIcons-Regular.eot);
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../iconfont/MaterialIcons-Regular.woff2) format("woff2"), url(../iconfont/MaterialIcons-Regular.woff) format("woff"), url(../iconfont/MaterialIcons-Regular.ttf) format("truetype");
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
}

/* @ icon
 * ------------------------------------------------------------ */
/*doc
---
title: icon
name: icon
categories: [utilities, icon]
---

```html_example
<p><a href="" class="is-icon-target-blank">target="_blank"を指定している場合</a></p>
<p><a href="" class="is-icon-pdf">pdfへのリンクの場合</a></p>
<p><a href="" class="is-icon-doc">doc、docxへのリンクの場合</a></p>
<p><a href="" class="is-icon-ppt">ppt、pptxへのリンクの場合</a></p>
<p><a href="" class="is-icon-xls">xls、xlsxへのリンクの場合</a></p>
<p><a href="" class="is-iconless is-icon-target-blank">アイコンを非表示</a></p>


```

<a href="https://material.io/icons/" target="blank">https://material.io/icons/</a>

```html_example
<i class="material-icons">phone</i>
<i class="material-icons">fiber_new</i>
<i class="material-icons">mail</i>

<i class="material-icons">launch</i>
<i class="material-icons">picture_as_pdf</i>
<i class="material-icons">video_library</i>
<i class="material-icons">library_books</i>
<i class="material-icons">photo_library</i>

<i class="material-icons">priority_high</i>
<i class="material-icons">warning</i>
<i class="material-icons">check</i>

<i class="material-icons">add</i>
<i class="material-icons">remove</i>

<i class="material-icons">menu</i>
<i class="material-icons">close</i>

<i class="material-icons">expand_less</i>
<i class="material-icons">expand_more</i>

<i class="material-icons">navigate_before</i>
<i class="material-icons">navigate_next</i>

```
*/
.is-iconless:after {
  display: none !important;
}

.is-icon-target-blank:after,
.visual-editor [target="_blank"]:after {
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
  vertical-align: middle;
  content: "open_in_new";
  color: rgba(0, 0, 0, 0.54);
  margin-left: .3em;
  min-width: 1em;
  text-align: right;
}

.is-icon-pdf:after,
.visual-editor a[href$=".pdf"]:after,
.is-icon-doc:after,
.visual-editor a[href$=".doc"]:after,
.visual-editor a[href$=".docx"]:after,
.is-icon-ppt:after,
.visual-editor a[href$=".ppt"]:after,
.visual-editor a[href$=".pptx"]:after,
.is-icon-xls:after,
.visual-editor a[href$=".xls"]:after,
.visual-editor a[href$=".xlsx"]:after {
  background: url("../img/common/icon_pdf.png") right center no-repeat;
  background-size: 15.5px 15.5px;
  width: 15.5px;
  height: 15.5px;
  content: "";
  display: inline-block;
  margin-left: .3em;
  text-align: right;
}

.is-icon-pdf:after,
.visual-editor a[href$=".pdf"]:after {
  background-image: url("../img/common/icon_pdf.png");
}

.is-icon-doc:after,
.visual-editor a[href$=".doc"]:after,
.visual-editor a[href$=".docx"]:after {
  background-image: url("../img/common/icon_doc.png");
}

.is-icon-ppt:after,
.visual-editor a[href$=".ppt"]:after,
.visual-editor a[href$=".pptx"]:after {
  background-image: url("../img/common/icon_ppt.png");
}

.is-icon-xls:after,
.visual-editor a[href$=".xls"]:after,
.visual-editor a[href$=".xlsx"]:after {
  background-image: url("../img/common/icon_xls.png");
}

.is-icon-badge {
  position: relative;
}

.is-icon-badge:before {
  width: 4px;
  height: 4px;
  border-radius: 100px;
  position: absolute;
  top: 2px;
  right: 0;
  display: block;
  content: '';
  z-index: 2;
  background-color: #fff;
}

.is-icon-badge:after {
  z-index: 1;
  width: 8px;
  height: 8px;
  border-radius: 100px;
  position: absolute;
  top: -2px;
  right: -4px;
  display: block;
  content: '';
  background-color: #ff0000;
  border: 2px solid #fff;
}

/* @ Tool Setting
 * ------------------------------------------------------------ */
/*doc
---
title: tool-base
name: tool-base
categories: [utilities, tool-base]

---


<div class="styleguide-table"></div>
 Class        |  Description
 -------------| ----------
 `is-prompt`            |  古いIEへ警告など

*/
body[data-touch-device="false"] a[href^="tel:"],
body[data-device="desktop"] a[href^="tel:"] {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
}

[v-cloak] {
  display: none;
}

.swiper-container {
  display: none;
}

.swiper-container.swiper-container-horizontal {
  display: block;
}

.is-prompt {
  margin: 0 auto;
  padding: 10px;
  background-color: #aaa;
  color: #fff;
  text-align: center;
}

.is-prompt a {
  text-decoration: underline;
}

.is-prompt a:hover {
  text-decoration: none;
}

/* @ color
 * ------------------------------------------------------------ */
/*doc
---
title: tool-color
name: tool-color
categories: [utilities, tool-color]
---


<div class="styleguide-table"></div>
 Class        |  Description
 -------------| ----------
 `is-color-success`      |
 `is-color-warning`      |
 `is-color-error`        |
 `is-color-info`         |
 `is-bg-color-success`   |
 `is-bg-color-warning`   |
 `is-bg-color-error`     |
 `is-bg-color-info`      |
 `is-color-red`          |
 `is-color-pink`         |
 `is-color-orange`       |
 `is-color-light-green`  |
 `is-color-green`        |
 `is-color-blue`         |
 `is-color-purple`       |
 `is-color-brawn`        |
 `is-color-yellow`       |

*/
.is-color-primary-light {
  color: #06c8f9 !important;
}

.is-bg-color-primary-light {
  background-color: #06c8f9 !important;
}

.is-color-primary {
  color: #06c8f9 !important;
}

.is-bg-color-primary {
  background-color: #06c8f9 !important;
}

.is-color-primary-dark {
  color: #00AFDD !important;
}

.is-bg-color-primary-dark {
  background-color: #00AFDD !important;
}

.is-color-secondary-light {
  color: #d7e8df !important;
}

.is-bg-color-secondary-light {
  background-color: #d7e8df !important;
}

.is-color-secondary {
  color: #93e9be !important;
}

.is-bg-color-secondary {
  background-color: #93e9be !important;
}

.is-color-secondary-dark {
  color: #77C399 !important;
}

.is-bg-color-secondary-dark {
  background-color: #77C399 !important;
}

.is-color-text {
  color: rgba(0, 0, 0, 0.87) !important;
}

.is-bg-color-text {
  background-color: rgba(0, 0, 0, 0.87) !important;
}

.is-color-text-sub {
  color: rgba(0, 0, 0, 0.54) !important;
}

.is-bg-color-text-sub {
  background-color: rgba(0, 0, 0, 0.54) !important;
}

.is-color-text-week {
  color: rgba(0, 0, 0, 0.38) !important;
}

.is-bg-color-text-week {
  background-color: rgba(0, 0, 0, 0.38) !important;
}

.is-color-text-dark {
  color: white !important;
}

.is-bg-color-text-dark {
  background-color: white !important;
}

.is-color-text-dark-sub {
  color: rgba(255, 255, 255, 0.7) !important;
}

.is-bg-color-text-dark-sub {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.is-color-text-dark-week {
  color: rgba(255, 255, 255, 0.3) !important;
}

.is-bg-color-text-dark-week {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.is-color-white {
  color: #fff !important;
}

.is-bg-color-white {
  background-color: #fff !important;
}

.is-color-black {
  color: #000 !important;
}

.is-bg-color-black {
  background-color: #000 !important;
}

.is-color-gray {
  color: #ddd !important;
}

.is-bg-color-gray {
  background-color: #ddd !important;
}

.is-color-red {
  color: #E53958 !important;
}

.is-bg-color-red {
  background-color: #E53958 !important;
}

.is-color-pink {
  color: #dc6887 !important;
}

.is-bg-color-pink {
  background-color: #dc6887 !important;
}

.is-color-orange {
  color: #e75a00 !important;
}

.is-bg-color-orange {
  background-color: #e75a00 !important;
}

.is-color-light-green {
  color: #6f9614 !important;
}

.is-bg-color-light-green {
  background-color: #6f9614 !important;
}

.is-color-green {
  color: #1b957b !important;
}

.is-bg-color-green {
  background-color: #1b957b !important;
}

.is-color-blue {
  color: #0B7DAF !important;
}

.is-bg-color-blue {
  background-color: #0B7DAF !important;
}

.is-color-purple {
  color: #997ebd !important;
}

.is-bg-color-purple {
  background-color: #997ebd !important;
}

.is-color-brawn {
  color: #af9100 !important;
}

.is-bg-color-brawn {
  background-color: #af9100 !important;
}

.is-color-yellow {
  color: #f6bb42 !important;
}

.is-bg-color-yellow {
  background-color: #f6bb42 !important;
}

.is-color-link {
  color: #477DCA !important;
}

.is-bg-color-link {
  background-color: #477DCA !important;
}

.is-color-link-visited {
  color: #477DCA !important;
}

.is-bg-color-link-visited {
  background-color: #477DCA !important;
}

.is-color-link-hover {
  color: #477DCA !important;
}

.is-bg-color-link-hover {
  background-color: #477DCA !important;
}

.is-color-link-dark {
  color: #d6d7d9 !important;
}

.is-bg-color-link-dark {
  background-color: #d6d7d9 !important;
}

.is-color-link-dark-visited {
  color: #fff !important;
}

.is-bg-color-link-dark-visited {
  background-color: #fff !important;
}

.is-color-link-dark-hover {
  color: #fff !important;
}

.is-bg-color-link-dark-hover {
  background-color: #fff !important;
}

.is-color-bg-color {
  color: #00AFDD !important;
}

.is-bg-color-bg-color {
  background-color: #00AFDD !important;
}

.is-color-border-color {
  color: #ddd !important;
}

.is-bg-color-border-color {
  background-color: #ddd !important;
}

.is-color-success {
  color: #6f9614 !important;
}

.is-bg-color-success {
  background-color: #6f9614 !important;
}

.is-color-warning {
  color: #ac832e !important;
}

.is-bg-color-warning {
  background-color: #ac832e !important;
}

.is-color-error {
  color: #E53958 !important;
}

.is-bg-color-error {
  background-color: #E53958 !important;
}

.is-color-info {
  color: #0B7DAF !important;
}

.is-bg-color-info {
  background-color: #0B7DAF !important;
}

.is-font-base {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, helvetica, arial, sans-serif;
}

.is-font-noto-sans {
  font-family: "Noto Sans JP", sans-serif;
}

/*
* Noto Sans JP (japanese) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Thin.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Light.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Medium.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf) format("opentype");
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff2) format("woff2"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.woff) format("woff"), url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Black.otf) format("opentype");
}

/* @ Tool Setting
 * ------------------------------------------------------------ */
/*doc
---
title: tool-view
name: tool-view
categories: [utilities, tool-view]

---


`--sm`, `--md`, `--lg`

<div class="styleguide-table"></div>
 Class        |  Description
 -------------| ----------
 `is-visible`            |  表示
 `is-hidden`             |  非表示
 `is-float-left`        |
 `is-float-right`        |
 `is-float-clear`                |
  `is-flex-center`        |
 `is-flex-start`        |
 `is-flex-end`          |
 `is-space-between`     |
 `is-ib`                |
 `is-block`             |
 `is-br`                |
 `is-w100p`                |

*/
.is-visible {
  display: block;
}

.is-hidden {
  display: none;
}

.is-visible--sm,
.is-visible--md,
.is-visible--lg {
  display: none;
}

.is-float-clear::after {
  clear: both;
  content: "";
  display: block;
}

.is-flex-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.is-float-left {
  float: left;
}

.is-float-right {
  float: right;
}

.is-flex-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.is-flex-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.is-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.is-ib {
  display: inline-block;
}

.is-block {
  display: block;
}

.is-br:after {
  white-space: pre;
  content: "\A";
}

.is-w100p {
  width: 100%;
}

/* @ Tool Setting
 * ------------------------------------------------------------ */
/*doc
---
title: tool-margin
name: tool-margin
categories: [utilities, tool-margin]

---


`--sm`, `--md`, `--lg`

<div class="styleguide-table"></div>
 Class        |  Description
 -------------| ----------
 `is-gapless`             |
 `is-mb-xs`             |
 `is-mb-small`          |
 `is-mb-medium`         |
 `is-mb-large`          |
 `is-mb-xl`             |
 `is-mt0`               |
 `is-mb0`               |

*/
/* @ base layout gap
 * ------------------------------------------------------------ */
.is-gapless {
  margin-right: -16px;
  margin-left: -16px;
}

/* @ base margin
 * ------------------------------------------------------------ */
.is-mb-xs {
  margin-bottom: 10px !important;
}

.is-mb-small {
  margin-bottom: 16px !important;
}

.is-mb-medium {
  margin-bottom: 24px !important;
}

.is-mb-large {
  margin-bottom: 30px !important;
}

.is-mt0 {
  margin-top: 0 !important;
}

.is-mb0 {
  margin-bottom: 0 !important;
}

/* @ スタイルガイド用
 * ------------------------------------------------------------ */
.sg-html {
  margin-top: 0;
}

.sg-body {
  background-color: #fff;
}

.sg-header {
  background: #06c8f9;
  -webkit-box-shadow: 0 3px 8px #aaacac;
          box-shadow: 0 3px 8px #aaacac;
}

.sg-header__inner {
  padding-top: 20px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.sg-header__inner::after {
  clear: both;
  content: "";
  display: block;
}

.sg-header h1 {
  line-height: 1;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.sg-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-left: -16px;
}

.sg-header__nav a {
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 44px;
  padding: 0 16px;
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 3px solid transparent;
  opacity: .65;
  text-decoration: none;
}

.sg-header__nav a:hover {
  opacity: 1;
}

.sg-header__nav .current {
  opacity: 1;
  border-bottom-color: #06c8f9;
}

.sg-footer {
  background: #06c8f9;
}

.sg-footer__inner {
  padding-top: 19px;
  padding-bottom: 17px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.sg-footer__inner::after {
  clear: both;
  content: "";
  display: block;
}

.sg-footer p {
  line-height: 1;
  text-align: center;
  font-size: 13px;
  color: #fff;
}

.sg-widget {
  margin-bottom: 15px;
  font-size: 16px;
}

.sg-widget a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.54);
}

.sg-widget a:hover {
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: underline;
}

.sg-widget__title {
  color: rgba(0, 0, 0, 0.87);
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 5px;
  padding-bottom: 2px;
}

.sg-widget__title span {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.38);
}

.sg-widget-head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 800;
  background-color: #fff;
}

.sg-widget-head ul {
  border-bottom: 1px solid #ddd;
}

.sg-widget-list {
  padding-left: .3em;
  font-size: 16px;
}

.sg-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.sg-container::after {
  clear: both;
  content: "";
  display: block;
}

.sg-content-block {
  width: 84%;
  margin-left: auto;
  margin-right: auto;
}

.sg-primary-block {
  width: 84%;
  float: right;
}

.sg-secondary-block {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  float: left;
  width: 28%;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sg-heading2 {
  font-size: 26px;
  font-weight: 700;
  color: #06c8f9;
}

.sg-heading3 {
  font-size: 16px;
  margin: 1.5em 0 1em;
  font-weight: bold;
}

.sg-text {
  font-size: 14px;
  margin: 1.5em 0 1em;
  color: #aab2bd;
}

.sg-main-contents {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

.sg-main-contents::after {
  clear: both;
  content: "";
  display: block;
}

.dummy-box {
  width: 100%;
  display: block;
  padding: 5px 0;
  background-color: rgba(216, 202, 201, 0.4);
  text-align: center;
  font-size: 12px;
}

.dummy-box::after {
  clear: both;
  content: "";
  display: block;
}

h2.styleguide,
h3.styleguide,
h4.styleguide,
h5.styleguide {
  font-size: 16px;
  margin: 2em 0 1em;
  padding-top: 30px;
}

h1.styleguide {
  margin-bottom: 1em;
  padding-top: 30px;
  font-size: 2em;
  border-bottom: 1px solid #06c8f9;
}

.styleguide-table + table {
  width: 100%;
  margin-bottom: 2em;
  border-top: solid 1px #ccc;
  border-left: solid 1px #ccc;
  vertical-align: middle;
}

.styleguide-table + table th {
  padding: 4px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}

.styleguide-table + table td {
  padding: 4px;
  border-right: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
}

pre {
  border: 1px solid #aaa;
  border-radius: 0;
  background-color: whitesmoke;
  overflow-x: scroll;
  padding: 30px;
}

code {
  white-space: pre !important;
}

div.jsExample {
  border-top: 0;
}

div.jsExample:before {
  top: -11px;
  left: -11px;
  width: 80px;
  background-color: #fff;
  content: "JS Example";
}

div.exampleOutput {
  margin-bottom: 10px;
}

div.exampleOutput + div.codeBlock {
  border-width: 1px 0 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

div.codeBlock {
  margin: .5em 0 16px;
  overflow: scroll;
}

.codeExample div.codeBlock {
  margin-bottom: 0;
}

.codeExample + .styleguide,
.codeExample + .sg-text {
  margin-top: 60px;
}

.docSwatch {
  min-height: 218.21px;
  margin-bottom: 5px;
  padding: 10px 0 0 10px;
  border: 1px solid #ccc;
  font-size: 12px;
}

.codeExample .line > div:after {
  display: block;
  min-height: 40px;
  border-radius: 4px;
  background-color: #eee;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  content: attr(class);
}

.sg-colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 2em;
  list-style: none;
}

.sg-colors li {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  min-width: 5em;
  max-width: 14em;
  margin: 0 .5em .5em 0;
  -webkit-box-shadow: 0.5px 0.9px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0.5px 0.9px 4px rgba(0, 0, 0, 0.1);
  padding-bottom: 5px;
  border-radius: 4px;
}

.sg-colors li:before {
  display: none !important;
}

.sg-swatch {
  display: block;
  height: 4em;
  margin-bottom: 5px;
  border-radius: 4px 4px 0 0;
  border-bottom: solid 1px whitesmoke;
}

.sg-label,
.sg-label-sub {
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
}

.sg-label {
  font-size: 12px;
  font-weight: bold;
}

/* @  snippets
 * ------------------------------------------------------------ */
/*doc
---
title: insurance-plan
name: insurance-plan
category: snippets-other
---

*/
.insurance-plan-table th,
.insurance-plan-table td {
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

.insurance-plan-table th {
  vertical-align: top !important;
}

.insurance-plan-table td {
  vertical-align: middle !important;
}

.is-cell-blue {
  background: #00AFDD !important;
  color: #fff !important;
}

.is-cell-light-blue {
  background: #F0FCFF !important;
  color: #00AFDD !important;
}

/*doc
---
title: snippets
name: snippets
category: snippets-other
---

*/
/* @  Pages
 * ------------------------------------------------------------ */

.l-block .top-block-bg1,
.l-block .top-block-bg2,
.l-block .top-block-bg3,
.l-block .top-block-bg4,
.l-block .top-block-bg5 {
  padding: 20px 40px 14px;
  border-bottom: 1px solid transparent;
}

.l-block .top-block-bg1 {
  border-color: #06c8f9;
}

.l-block .top-block-bg2 {
  border-color: #06c8f9;
}

.top-menu {
  width: 280px;
  margin-left: auto;
  margin-right: auto;
}

.top-caption-img-box {
  display: inline-block;
  position: relative;
}

.top-caption-img-box ._caption {
  color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: .2em .4em;
  background-color: rgba(0, 0, 0, 0.5);
}

.cars-bxslider {
  margin-bottom: 24px;
  border: 1px solid #CCCCCC;
  background-color: #EFEFEF;
  padding: 2em 3.3em;
}

.cars-bxslider a {
  display: block;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cars-bxslider a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cars-bxslider.is-slider-captions .bx-wrapper .bx-pager {
  bottom: 6em;
}

.cars-bxslider .bx-wrapper {
  margin-bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 0;
  background: transparent;
}

.cars-bxslider .bx-wrapper .bx-viewport {
  overflow: visible !important;
}

.cars-bxslider .bx-wrapper .bx-caption {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 3px 3px;
  position: static;
  background-color: #333;
}

.cars-bxslider .bx-wrapper .bx-caption span {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.6;
}

.cars-bxslider .bx-wrapper .bx-pager {
  padding-top: 10px;
  position: static;
}

.cars-bxslider .bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  border: 1px solid #00AFDD;
  border-radius: 100px;
  margin: 0 10px;
  width: 8px;
  height: 8px;
}

.cars-bxslider .bx-wrapper .bx-pager.bx-default-pager a.active,
.cars-bxslider .bx-wrapper .bx-pager.bx-default-pager a:focus,
.cars-bxslider .bx-wrapper .bx-pager.bx-default-pager a:hover {
  background: #00AFDD;
  border: 1px solid #00AFDD;
}

.cars-bxslider .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: -30px;
  bottom: 0;
  margin: auto;
  outline: 0;
  width: 40px;
  height: 40px;
  text-indent: -9999px;
  z-index: 100;
}

.cars-bxslider .bx-wrapper .bx-prev {
  left: -40px;
  background: url("../img/common/slider_left2.png") 0 0 no-repeat;
}

.cars-bxslider .bx-wrapper .bx-prev:hover,
.cars-bxslider .bx-wrapper .bx-prev:focus {
  background-position: 0 0;
  opacity: .4;
}

.cars-bxslider .bx-wrapper .bx-next {
  right: -40px;
  background: url("../img/common/slider_right2.png") 0 0 no-repeat;
}

.cars-bxslider .bx-wrapper .bx-next:hover,
.cars-bxslider .bx-wrapper .bx-next:focus {
  background-position: 0 0;
  opacity: .4;
}

.cars-summary-box {
  border: 1px solid #CCCCCC;
  background-color: #EFEFEF;
  padding: 2em;
  margin-bottom: 24px;
}

.cars-summary-box ul {
  margin-left: -1.2%;
  margin-right: -1.2%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-overflow-scrolling: touch;
}

.cars-summary-box ul ._item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30.9333333333%;
          flex: 0 0 30.9333333333%;
  margin-left: 1.2%;
  margin-right: 1.2%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}

.cars-summary-box ul ._item > *:last-child {
  margin-bottom: 0;
}

.cars-summary-box ._item {
  color: inherit;
  position: relative;
  margin-bottom: 16px;
}

.cars-summary-box ._item > a {
  width: 100%;
  display: block;
  color: inherit;
  height: inherit;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cars-summary-box ._item > a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cars-summary-box ._img {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.cars-summary-box ._body {
  padding: .6rem 0;
}

.cars-summary-box ._label {
  position: absolute;
  top: -6px;
  left: -6px;
}

.cars-summary-box ._title {
  font-weight: bold;
}

.cars-summary-box ._text + ._text {
  margin-top: 16px;
}

.cars-box {
  display: block;
  background: #fff;
  border: solid 1px #ddd;
  padding: 24px 30px;
  font-size: 1.1em;
  margin-bottom: 16px;
}

.cars-box > *:last-child {
  margin-bottom: 0;
}

.cars-box__title {
  font-weight: bold;
}

.cars-spec-box {
  background: #fff;
  margin-bottom: 16px;
}

.cars-spec-box ._title {
  display: block;
  border-radius: 3px 3px 0 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 100%;
  text-align: left;
  background-color: transparent;
  font-weight: bold;
  padding: 6px 25px 6px 13px;
  border: 1px solid #ddd;
  font-size: 1.1em;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.8;
}

.cars-spec-box ._title i {
  margin-right: 3px;
  font-size: 1.1em;
  top: 2px;
  position: relative;
}

.cars-spec-box ._title {
  position: relative;
}

.cars-spec-box ._body {
  border-radius: 0 0 3px 3px;
  border: 1px solid #E6E6E6;
  border-top: 0;
}

.cars-spec-box ._body[aria-hidden="true"] {
  display: none;
}

.cars-spec-box ._table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: -1px;
}

.cars-spec-box ._table tr,
.cars-spec-box ._table td,
.cars-spec-box ._table th {
  font-size: 12px;
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}

.cars-spec-box ._table th {
  padding: 6px 2px 6px 8px;
  border-top: 1px solid #E6E6E6;
  vertical-align: top;
  background-color: #F5F5F5;
}

.cars-spec-box ._table td {
  padding: 6px 2px 6px 15px;
  border-top: 1px solid #E6E6E6;
}

.cars-plan-box {
  margin-bottom: 24px;
  padding: 18px 30px 10px 30px;
  border: 2px solid #1FB8DF;
  border-radius: 8px;
  background-color: #F0FCFF;
}

.cars-plan-box ._table {
  width: 100%;
}

.cars-plan-box ._table th {
  text-align: left;
  font-weight: bold;
  padding: 5px;
}

.cars-plan-box ._table td {
  text-align: right;
  font-weight: bold;
  padding: 5px;
}

.cars-plan-box ._table thead {
  border-bottom: 1px solid #00AFDD;
}

.cars-plan-box ._table thead th {
  padding: 4px 8px 6px 8px;
}

.cars-plan-box ._table thead tr th:first-child,
.cars-plan-box ._table thead tr td:first-child {
  text-align: left;
}

.cars-plan-box ._table thead tr th:last-child,
.cars-plan-box ._table thead tr td:last-child {
  text-align: right;
}

.cars-plan-box ._table thead th, .cars-plan-box ._table thead td {
  padding-left: 1em;
  padding-right: 1em;
}

.cars-plan-box ._table tbody tr:first-child th,
.cars-plan-box ._table tbody tr:first-child td {
  padding-top: 1em;
}

.cars-plan-box ._table tbody tr:last-child th,
.cars-plan-box ._table tbody tr:last-child td {
  padding-bottom: 1em;
}

.cars-plan-box ._table tbody a {
  color: #477CCB;
  text-decoration: underline;
  font-size: 14px;
}

.cars-plan-box ._table tbody a:hover {
  text-decoration: none;
}

.cars-plan-box ._table tbody td {
  font-size: 18px;
  color: #E53958;
}

.cars-plan-box ._foot {
  padding-top: 1em;
  border-top: 1px solid #DBE8EB;
}

.cars-plan-box ._foot-title {
  color: #CC0000;
  font-weight: bold;
  padding-bottom: .3em;
}

.plan-annotation-box a {
  padding: 1.2em;
  padding-right: 3em;
  font-size: 1.15rem;
  border-radius: 8px;
  line-height: 1.6;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e80000), to(#c10000));
  background-image: linear-gradient(#e80000, #c10000);
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.plan-annotation-box a:hover {
  opacity: .5;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.plan-annotation-box a:after {
  color: #fff;
  font-family: "Material Icons";
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
  vertical-align: middle;
  content: "navigate_next";
  white-space: nowrap;
  font-size: 2em;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
  width: 1em;
  height: 1em;
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
   * Printing Tables:
   * http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  header,
  footer,
  .c-breadcrumb {
    display: none;
  }
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}

@media screen and (min-width: 1000.001px) {
  html {
    font-size: 13px;
  }
  .is-visible--lg {
    display: block;
  }
  .is-hidden--lg {
    display: none;
  }
  .is-flex-center--lg {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .is-float-left--lg {
    float: left;
  }
  .is-float-right--lg {
    float: right;
  }
  .is-flex-start--lg {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .is-flex-end--lg {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .is-space-between--lg {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .is-ib--lg {
    display: inline-block;
  }
  .is-block--lg {
    display: block;
  }
  .is-br--lg:after {
    white-space: pre;
    content: "\A";
  }
  .is-gapless--lg {
    margin-right: -16px;
    margin-left: -16px;
  }
  .is-mt0--lg {
    margin-top: 0 !important;
  }
  .is-mb0--lg {
    margin-bottom: 0 !important;
  }
}

@media screen and (min-width: 960px) {
  html {
    font-size: 13px;
  }
}

@media screen and (max-width: 959.999px) {
  html {
    font-size: 13px;
  }
  hr {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  pre,
  .e-pre {
    margin-bottom: 16px;
  }
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-block {
    width: 100%;
  }
  .visual-editor p,
  .visual-editor table,
  .visual-editor ul,
  .visual-editor ol,
  .visual-editor dl,
  .visual-editor blockquote,
  .visual-editor figure,
  .visual-editor .e-box-bordered,
  .visual-editor hr {
    margin-bottom: 24px;
  }
  .e-video-container {
    margin-bottom: 16px;
  }
  .e-g-map {
    margin-bottom: 16px;
  }
  .visual-editor blockquote,
  .e-blockquote {
    margin-bottom: 16px;
  }
  .e-hd-date {
    margin-bottom: 16px;
  }
  .e-hd-group {
    margin-bottom: 30px;
  }
  .visual-editor p,
  .e-text {
    margin-bottom: 16px;
  }
  .visual-editor strong > strong,
  .e-text-catchcopy {
    margin-bottom: 16px;
  }
  .visual-editor ul,
  .visual-editor ol,
  .e-list {
    margin-bottom: 16px;
  }
  .visual-editor dl,
  .e-dl {
    margin-bottom: 16px;
  }
  .e-list-inline {
    margin-bottom: 16px;
  }
  .visual-editor table caption, .e-table caption {
    margin-bottom: 16px;
  }
  .visual-editor table,
  .e-table {
    margin-bottom: 16px;
  }
  .e-box {
    margin-bottom: 16px;
  }
  .e-media {
    margin-bottom: 16px;
  }
  .e-card {
    margin-bottom: 16px;
  }
  .c-pagenavi {
    margin-bottom: 16px;
  }
  .c-menu {
    margin-bottom: 16px;
  }
  .c-summary-horizontal {
    margin-bottom: 24px;
  }
  .bxslider-main .bx-wrapper {
    margin-bottom: 24px;
  }
  .bxslider-main2 {
    margin-bottom: 24px;
  }
  .bxslider-sub {
    margin-bottom: 24px;
  }
  .bxslider-inline .bx-wrapper {
    margin-bottom: 24px;
  }
  .is-visible--md {
    display: block;
  }
  .is-hidden--md {
    display: none;
  }
  .is-flex-center--md {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .is-float-left--md {
    float: left;
  }
  .is-float-right--md {
    float: right;
  }
  .is-flex-start--md {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .is-flex-end--md {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .is-space-between--md {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .is-ib--md {
    display: inline-block;
  }
  .is-block--md {
    display: block;
  }
  .is-br--md:after {
    white-space: pre;
    content: "\A";
  }
  .is-gapless--md {
    margin-right: -16px;
    margin-left: -16px;
  }
  .is-mb-xs {
    margin-bottom: 10px !important;
  }
  .is-mb-small {
    margin-bottom: 16px !important;
  }
  .is-mb-medium {
    margin-bottom: 24px !important;
  }
  .is-mb-large {
    margin-bottom: 30px !important;
  }
  .is-mt0--md {
    margin-top: 0 !important;
  }
  .is-mb0--md {
    margin-bottom: 0 !important;
  }
  .sg-content-block {
    width: 100%;
  }
  .sg-main-contents {
    padding-right: 16px;
    padding-left: 16px;
  }
  .cars-bxslider {
    margin-bottom: 24px;
  }
  .cars-summary-box {
    margin-bottom: 24px;
  }
  .cars-summary-box ._item {
    margin-bottom: 16px;
  }
  .cars-box {
    margin-bottom: 16px;
  }
  .cars-spec-box {
    margin-bottom: 16px;
  }
  .cars-plan-box {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 599.999px) {
  html {
    font-size: 13px;
  }
  hr {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  pre,
  .e-pre {
    margin-bottom: 16px;
  }
  .l-footer {
    border-top-width: 3px;
    padding-bottom: 7rem;
  }
  .l-footer ._fixed-sp {
    display: block;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ddd;
    padding: 1rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .l-footer ._inner {
    padding-left: 0;
    padding-right: 0;
  }
  .l-footer ._primary {
    margin-bottom: 30px;
    border-bottom-width: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
  .l-footer ._secondary {
    padding-right: 16px;
    padding-left: 16px;
    margin: 0 auto;
    text-align: center;
  }
  .l-footer ._secondary ._inner {
    display: block;
  }
  .l-footer ._secondary ._block {
    white-space: normal;
  }
  .l-footer ._nav li {
    width: 50%;
    margin-bottom: 0;
  }
  .l-footer ._nav li a {
    display: block;
    padding: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  }
  .l-footer ._nav li:nth-child(2n -1) a {
    border-right: 1px solid rgba(255, 255, 255, 0.5);
  }
  .l-footer ._logo {
    float: none;
    text-align: center;
    margin: 0 auto 16px;
  }
  .l-footer ._sub-nav {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 30px;
  }
  .l-header {
    height: 48px;
    background-color: #06c8f9;
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    min-width: 320px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .l-header ._logo {
    width: 85px;
    height: 60px;
  }
  .l-header ._primary {
    left: 16px;
  }
  .l-header ._secondary-pc {
    display: none;
  }
  .l-header ._secondary-sp {
    display: block;
  }
  .l-header ._secondary-sp ._sub-nav {
    display: block;
    position: absolute;
    right: 50px;
    top: 6px;
  }
  .l-header ._secondary-sp ._sub-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .l-header ._secondary-sp ._sub-nav li {
    text-align: center;
    margin-left: 1em;
    font-weight: bold;
  }
  .l-header ._secondary-sp ._sub-nav i {
    font-size: 1.6rem;
    display: block;
  }
  .l-header ._secondary-sp ._sub-nav ._item-week {
    font-weight: normal;
  }
  .l-header ._secondary-sp ._sub-nav ._item-week i {
    opacity: .7;
  }
  .l-header ._secondary-sp ._sub-nav a {
    text-decoration: none;
    display: block;
    line-height: 1.4;
    font-size: 10px;
    color: #fff;
  }
  .l-header ._secondary-sp ._nav-control {
    display: block;
    position: absolute;
    right: 10px;
    top: 15px;
    z-index: 99999;
  }
  body,
  html {
    min-width: 320px;
  }
  .l-main {
    margin-top: 48px;
    overflow: hidden;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 30px;
    background: #fff;
  }
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-block__head {
    padding: 30px 0 0;
    margin-left: -16px;
    margin-right: -16px;
  }
  .l-block__body {
    padding: 20px 0 10px;
  }
  .l-block {
    width: 100%;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .l-unit {
    margin-bottom: 16px;
  }
  .l-cols--break {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
  .l-cols--break > .l-col1,
  .l-cols--break > .l-col2,
  .l-cols--break > .l-col3,
  .l-cols--break > .l-col4,
  .l-cols--break > .l-col5,
  .l-cols--break > .l-col6,
  .l-cols--break > .l-col7,
  .l-cols--break > .l-col8,
  .l-cols--break > .l-col9,
  .l-cols--break > .l-col10,
  .l-cols--break > .l-col11,
  .l-cols--break > .l-col12 {
    width: auto;
    float: none;
    clear: both;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 16px !important;
  }
  .l-cols--break > .l-col1::after,
  .l-cols--break > .l-col2::after,
  .l-cols--break > .l-col3::after,
  .l-cols--break > .l-col4::after,
  .l-cols--break > .l-col5::after,
  .l-cols--break > .l-col6::after,
  .l-cols--break > .l-col7::after,
  .l-cols--break > .l-col8::after,
  .l-cols--break > .l-col9::after,
  .l-cols--break > .l-col10::after,
  .l-cols--break > .l-col11::after,
  .l-cols--break > .l-col12::after {
    clear: both;
    content: "";
    display: block;
  }
  .visual-editor p,
  .visual-editor table,
  .visual-editor ul,
  .visual-editor ol,
  .visual-editor dl,
  .visual-editor blockquote,
  .visual-editor figure,
  .visual-editor .e-box-bordered,
  .visual-editor hr {
    margin-bottom: 16px;
  }
  .e-video-container {
    margin-bottom: 16px;
  }
  .e-g-map {
    margin-bottom: 16px;
  }
  .e-g-map iframe {
    height: 30vh;
  }
  .visual-editor blockquote,
  .e-blockquote {
    margin-bottom: 16px;
  }
  .visual-editor blockquote,
  .e-blockquote {
    padding: 3.4rem 1rem;
  }
  .visual-editor h2:not(:first-child),
  .visual-editor h3:not(:first-child),
  .visual-editor h4:not(:first-child),
  .visual-editor h5:not(:first-child),
  .visual-editor h6:not(:first-child) {
    margin-top: 0;
  }
  .visual-editor h1,
  .e-hd1 {
    font-size: 20px;
    font-size: 1.5384615385rem;
  }
  .visual-editor h1,
  .e-hd1--type2 {
    text-align: center;
  }
  .e-hd1--type3 {
    font-size: 17px;
    font-size: 1.3076923077rem;
  }
  .l-block__head-borderless .e-hd1--type3,
  .l-block__head .e-hd1--type3 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .e-hd1--type3 {
    border-left-width: 0;
    border-right-width: 0;
  }
  .visual-editor h2,
  .e-hd2 {
    font-size: 17px;
    font-size: 1.3076923077rem;
  }
  .visual-editor h2,
  .e-hd2--type2 {
    font-size: 15px;
    font-size: 1.1538461538rem;
  }
  .visual-editor h2,
  .e-hd2--type2 {
    padding: .7rem 1.2rem .6rem;
  }
  .e-hd2--type3 {
    font-size: 15px;
    font-size: 1.1538461538rem;
  }
  .e-hd2--type4 {
    font-size: 15px;
    font-size: 1.1538461538rem;
  }
  .visual-editor h3,
  .e-hd3 {
    font-size: 15px;
    font-size: 1.1538461538rem;
  }
  .visual-editor h4,
  .e-hd4 {
    font-size: 14px;
    font-size: 1.0769230769rem;
  }
  .visual-editor h5,
  .e-hd5 {
    font-size: 14px;
    font-size: 1.0769230769rem;
  }
  .visual-editor h6,
  .e-hd6 {
    font-size: 14px;
    font-size: 1.0769230769rem;
  }
  .e-hd-date {
    margin-bottom: 16px;
  }
  .e-hd-group {
    margin-bottom: 16px;
  }
  .e-responsive-img .e-img-box,
  .visual-editor .e-responsive-img figure {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar,
  .visual-editor .e-responsive-img figure::-webkit-scrollbar {
    height: 3px;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar-track,
  .visual-editor .e-responsive-img figure::-webkit-scrollbar-track {
    background: #d4d4d4;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar-thumb,
  .visual-editor .e-responsive-img figure::-webkit-scrollbar-thumb {
    background: #333;
  }
  .e-responsive-img .e-img-box:after,
  .visual-editor .e-responsive-img figure:after {
    display: block;
    padding: .5em 0;
    font-size: .8em;
    text-align: center;
    white-space: nowrap;
    content: "← この画像は左右に動かせます。 →";
  }
  .e-responsive-img img {
    min-width: 520px;
  }
  .is-img-left {
    float: none;
    margin-right: 0;
  }
  .is-img-right {
    float: none;
    margin-left: 0;
  }
  .is-img-w25,
  .is-img-w33,
  .is-img-w50,
  .is-img-w100 {
    width: 100%;
  }
  .visual-editor p,
  .e-text {
    margin-bottom: 16px;
  }
  .visual-editor strong > strong,
  .e-text-catchcopy {
    font-size: 16px;
    font-size: 1.2307692308rem;
  }
  .visual-editor strong > strong,
  .e-text-catchcopy {
    margin-bottom: 16px;
  }
  .is-text-point {
    padding-right: 0;
  }
  .visual-editor ul,
  .visual-editor ol,
  .e-list {
    margin-bottom: 16px;
  }
  .visual-editor dl,
  .e-dl {
    margin-bottom: 16px;
  }
  .e-list-inline {
    margin-bottom: 16px;
  }
  .visual-editor table caption, .e-table caption {
    margin-bottom: 16px;
  }
  .visual-editor table,
  .e-table {
    margin-bottom: 16px;
  }
  .visual-editor .e-table--block th,
  .visual-editor .e-table--block td,
  .e-table--block th,
  .e-table--block td {
    display: block;
    width: auto;
  }

  .visual-editor .e-responsive-table,
  .e-responsive-table {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar,
  .e-responsive-table::-webkit-scrollbar {
    height: 3px;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar-track,
  .e-responsive-table::-webkit-scrollbar-track {
    background: #d4d4d4;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar-thumb,
  .e-responsive-table::-webkit-scrollbar-thumb {
    background: #333;
  }
  .visual-editor .e-responsive-table:after,
  .e-responsive-table:after {
    display: block;
    padding: .5em 0;
    font-size: .8em;
    text-align: center;
    white-space: nowrap;
    content: "← この表は左右に動かせます →";
  }
  .visual-editor .e-responsive-table table,
  .e-responsive-table table {
    width: auto;
  }
  .visual-editor .e-responsive-table th,
  .visual-editor .e-responsive-table td,
  .e-responsive-table th,
  .e-responsive-table td {
    white-space: nowrap;
  }
  .visual-editor .e-table--block th.is-cell-1em,
  .visual-editor .e-table--block td.is-cell-1em,
  .e-table--block th.is-cell-1em,
  .e-table--block td.is-cell-1em {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-10p,
  .visual-editor .e-table--block td.is-cell-10p,
  .e-table--block th.is-cell-10p,
  .e-table--block td.is-cell-10p {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-15p,
  .visual-editor .e-table--block td.is-cell-15p,
  .e-table--block th.is-cell-15p,
  .e-table--block td.is-cell-15p {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-20p,
  .visual-editor .e-table--block td.is-cell-20p,
  .e-table--block th.is-cell-20p,
  .e-table--block td.is-cell-20p {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-25p,
  .visual-editor .e-table--block td.is-cell-25p,
  .e-table--block th.is-cell-25p,
  .e-table--block td.is-cell-25p {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-30p,
  .visual-editor .e-table--block td.is-cell-30p,
  .e-table--block th.is-cell-30p,
  .e-table--block td.is-cell-30p {
    width: auto;
  }
  .visual-editor .e-table--block th.is-cell-50p,
  .visual-editor .e-table--block td.is-cell-50p,
  .e-table--block th.is-cell-50p,
  .e-table--block td.is-cell-50p {
    width: auto;
  }
  .visual-editor .e-responsive-table .is-responsive-cell-30vw,
  .e-responsive-table .is-responsive-cell-30vw {
    white-space: normal;
    width: 30vw;
  }
  .visual-editor .e-responsive-table .is-responsive-cell-50vw,
  .e-responsive-table .is-responsive-cell-50vw {
    white-space: normal;
    width: 50vw;
  }
  .e-box {
    padding: 1rem;
  }
  .e-box {
    margin-bottom: 16px;
  }
  .e-button {
    padding: 0.9rem 1.28rem;
  }
  .e-button-group .e-button {
    width: 100%;
  }
  .e-button--small {
    padding: .5rem 1rem;
  }
  .e-button--large {
    padding: 0.9rem 1.6rem;
  }
  .e-button--xlarge {
    padding: 1.26rem 1.92rem;
  }
  .e-media {
    margin-bottom: 16px;
  }
  .e-media__img {
    float: none;
  }
  .e-media__img img {
    width: 100%;
    max-width: none;
  }
  .e-media__body {
    padding: .8em 1em;
  }
  .e-media__body {
    position: relative;
    overflow: visible;
  }
  .e-media__label {
    top: -1.8em;
  }
  .e-media__date {
    margin-bottom: 5px;
  }
  .e-media__title {
    margin-bottom: 0;
    font-size: 13px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    line-height: 1;
  }
  .e-media__text {
    display: none;
  }
  .e-media__text + .e-media__text {
    margin-top: 16px;
  }
  .e-card {
    margin-bottom: 16px;
  }
  .e-card {
    max-width: inherit;
  }
  .e-card__title {
    font-size: 14px;
    font-size: 1.0769230769rem;
  }
  .e-card__text + .e-card__text {
    margin-top: 16px;
  }
  .c-breadcrumb {
    display: none;
  }
  .c-pagenavi {
    margin-bottom: 16px;
  }
  .c-pager {
    margin-bottom: 16px;
  }
  .c-pager__to-top, .c-pager__prev, .c-pager__next {
    font-size: .8em;
  }
  .c-menu {
    margin-bottom: 16px;
  }
  .c-menu__title-group .c-menu__title {
    font-size: 17px;
    font-size: 1.3076923077rem;
  }
  .c-menu__title {
    font-size: 14px;
    font-size: 1.0769230769rem;
  }
  .c-menu.c-menu--sp-ellipsis .c-menu__list li {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .c-menu.c-menu--sp-ellipsis .c-menu__list a {
    white-space: nowrap;
    word-wrap: normal;
  }
  .c-anchor-nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-anchor-nav li {
    border-right: 0;
    border-bottom: 1px dotted #e6e6e6;
    text-align: left;
    white-space: normal;
  }
  .c-page-nav ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-page-nav li {
    border-right: 0;
    border-bottom: 1px solid #EBF1F9;
    text-align: left;
    white-space: normal;
  }
  .c-page-nav li a {
    font-size: 13px;
  }
  .c-summary-horizontal {
    margin-bottom: 16px;
  }
  .c-summary-horizontal {
    margin-left: -2.0000033333%;
    margin-right: -2.0000033333%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: scroll;
    -ms-flex-flow: nowrap;
        flex-flow: nowrap;
    margin-right: -16px;
  }
  .c-summary-horizontal .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 54.3333266667%;
            flex: 0 0 54.3333266667%;
    margin-left: 2.0000033333%;
    margin-right: 2.0000033333%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-summary-horizontal .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
  .c-summary-vertical {
    margin-bottom: 30px;
  }
  .c-summary-vertical li {
    margin-bottom: 20px;
  }
  .c-accordion__title:after {
    right: 5px;
  }
  .c-accordion--faq .c-accordion__body {
    padding-left: 4.5rem;
  }
  .c-accordion--faq .c-accordion__body:before {
    left: 15px;
  }
  .bxslider-main.is-slider-captions .bx-wrapper .bx-controls-direction a {
    top: -110px;
  }
  .bxslider-main .bx-wrapper {
    margin-bottom: 16px;
  }
  .bxslider-main .bx-wrapper .bx-caption span {
    font-size: 17px;
  }
  .bxslider-main .bx-wrapper .bx-pager {
    position: static;
  }
  .bxslider-main .bx-wrapper .bx-controls-direction a {
    top: -30px;
    width: 30px;
    height: 60px;
  }
  .bxslider-main .bx-wrapper .bx-prev {
    background-size: 30px 60px;
  }
  .bxslider-main .bx-wrapper .bx-next {
    background-size: 30px 60px;
  }
  .bxslider-main2 {
    margin-bottom: 16px;
  }
  .bxslider-main2 .bx-wrapper .bx-caption span {
    font-size: 1rem;
    text-align: left;
  }
  .bxslider-main2 .bx-wrapper .bx-controls-direction a {
    display: none;
    top: 0;
  }
  .bxslider-sub {
    margin-bottom: 16px;
  }
  .bxslider-sub .bx-wrapper .bx-caption span {
    text-align: left;
  }
  .bxslider-sub .bx-wrapper .bx-pager {
    display: block;
  }
  .bxslider-inline.is-slider-pager .bx-wrapper {
    margin-bottom: 16px;
  }
  .bxslider-inline.is-slider-pager .bx-wrapper .bx-pager {
    display: none;
  }
  .bxslider-inline {
    margin-right: -16px;
  }
  .bxslider-inline .bx-wrapper {
    margin-bottom: 16px;
  }
  .bxslider-inline .bx-wrapper .bxslider__title {
    font-weight: normal;
  }
  .bxslider-inline .bx-wrapper .bx-caption span {
    font-size: 17px;
  }
  .bxslider-inline .bx-wrapper .bx-controls-direction a {
    display: none;
  }
  .is-visible--sm {
    display: block;
  }
  .is-hidden--sm {
    display: none;
  }
  .is-flex-center--sm {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .is-left--sm {
    text-align: left;
  }
  .is-right--sm {
    float: right;
  }
  .is-flex-start--sp {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .is-flex-end--sm {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .is-space-between--sm {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .is-ib--sm {
    display: inline-block;
  }
  .is-block--sm {
    display: block;
  }
  .is-br--sm:after {
    white-space: pre;
    content: "\A";
  }
  .is-gapless--sm {
    margin-right: -16px;
    margin-left: -16px;
  }
  .is-mb-xs {
    margin-bottom: 10px !important;
  }
  .is-mb-small {
    margin-bottom: 16px !important;
  }
  .is-mb-medium {
    margin-bottom: 16px !important;
  }
  .is-mb-large {
    margin-bottom: 16px !important;
  }
  .is-mt0--sm {
    margin-top: 0 !important;
  }
  .is-mb0--sm {
    margin-bottom: 0 !important;
  }
  .sg-html {
    margin-top: 0;
  }
  .sg-container {
    width: auto;
    margin-bottom: 20px;
  }
  .sg-content-block {
    width: 100%;
  }
  .sg-primary-block {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .sg-secondary-block {
    position: static;
    top: auto;
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
  }
  .sg-main-contents {
    padding-right: 16px;
    padding-left: 16px;
  }
  div.codeBlock {
    display: none;
  }
  .insurance-plan-table th,
  .insurance-plan-table td {
    padding: 2px !important;
  }
  .l-block .top-block-full {
    background-color: #ECF6F8;
    margin-left: -16px;
    margin-right: -16px;
  }
  .l-block .top-block-full .bx-wrapper {
    margin-bottom: 0;
  }
  .l-block .top-block-bg1,
  .l-block .top-block-bg2,
  .l-block .top-block-bg3,
  .l-block .top-block-bg4,
  .l-block .top-block-bg5 {
    padding: 30px 16px 14px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .l-block .top-block-bg1 {
    background-color: #ECF6F8;
    border-color: #ECF6F8;
  }
  .l-block .top-block-bg3 {
    border-color: #06c8f9;
  }
  .l-block .top-block-bg4 {
    background-color: #ECF6F8;
    border-color: #ECF6F8;
  }
  .l-block .top-block-bg5 {
    border-color: #06c8f9;
  }
  .top-menu .c-menu__list li:nth-child(n + 4) {
    display: none;
  }
  .cars-bxslider {
    margin-bottom: 16px;
  }
  .cars-bxslider {
    padding: 1em;
    border-right-width: 0;
    border-left-width: 0;
    margin-left: -16px;
    margin-right: -16px;
  }
  .cars-bxslider .bx-wrapper .bx-caption span {
    font-size: 1rem;
    text-align: left;
  }
  .cars-bxslider .bx-wrapper .bx-controls-direction a {
    display: none;
  }
  .cars-summary-box {
    margin-bottom: 16px;
  }
  .cars-summary-box {
    padding: 0.8em 0 1em 16px;
    margin-right: -16px;
    margin-left: -16px;
    border-right-width: 0;
    border-left-width: 0;
  }
  .cars-summary-box ul {
    margin-left: -2.0000033333%;
    margin-right: -2.0000033333%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    overflow: scroll;
    -ms-flex-flow: nowrap;
        flex-flow: nowrap;
  }
  .cars-summary-box ul ._item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70.9999933333%;
            flex: 0 0 70.9999933333%;
    margin-left: 2.0000033333%;
    margin-right: 2.0000033333%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .cars-summary-box ul ._item > *:last-child {
    margin-bottom: 0;
  }
  .cars-summary-box ._item {
    margin-bottom: 16px;
  }
  .cars-summary-box ._item {
    max-width: inherit;
    margin-top: 6px;
  }
  .cars-summary-box ._text + ._text {
    margin-top: 16px;
  }
  .cars-box {
    font-size: 1em;
    padding: 1rem;
  }
  .cars-box {
    margin-bottom: 16px;
  }
  .cars-spec-box {
    margin-bottom: 16px;
  }
  .cars-spec-box ._title {
    cursor: pointer;
  }
  .cars-spec-box ._title:after {
    color: rgba(0, 0, 0, 0.87);
    position: absolute;
    top: 0;
    bottom: 0;
    right: 10px;
    margin: auto;
    height: 1em;
    font-family: "Material Icons";
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
            font-feature-settings: 'liga';
    font-size: inherit;
    display: none\9;
    vertical-align: middle;
    content: "add";
    white-space: nowrap;
    line-height: 1em;
  }
  .cars-spec-box ._title[aria-expanded="false"]:after {
    content: "remove";
  }
  .cars-plan-box {
    margin-bottom: 16px;
  }
  .cars-plan-box {
    padding: 1.5em;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 3.4666666667vmin;
  }
}

@media screen and (min-width: 600px) and (max-width: 959.999px) {
  .l-header {
    position: static;
  }
  .l-main {
    margin-top: 0;
  }
}

@media all and (-ms-high-contrast: none) {
  .material-icons {
    display: inline-block\0;
  }
}

@media screen and (max-width: 599.999px) and (max-width: 599.999px) {
  .cars-spec-box ._title:after {
    font-size: 20px;
    font-size: 1.5384615385rem;
  }
  .cars-spec-box ._title:after {
    right: 5px;
  }
}