@charset "UTF-8";
/* @  starter-kit
 * ------------------------------------------------------------ */
/*doc
---
title: font
name: font
category: mixins
---


```

@include fsize-h1;
@include fsize-h2;
@include fsize-h3;
@include fsize-h4;
@include fsize-h5;
@include fsize-h6;


@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: 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: material-icons
name: material-icons
category: mixins
---

```
@include material-icons($fsize);



```

*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400&display=swap");
/*! 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;
}

/* @ 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
* ------------------------------------------------------------ */
html {
  line-height: 1.7;
  font-size: 14px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #1A1A1A;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

main {
  font-synthesis: weight style;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  -ms-text-size-adjust: 100%;
}

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;
}

[data-browser="ie"] img, [data-browser="ie"]
picture {
  max-height: 100%;
}

small {
  color: #757575;
}

strong {
  font-weight: bold;
}

strong > strong {
  color: #cc3e4c;
  font-size: 1.15rem;
}

em {
  font-weight: bold;
}

hr {
  border: 0;
  border-bottom: solid 1px #DEDEDE;
  margin-top: 36px;
  margin-bottom: 36px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  text-align: left;
}

/* @  Link Reset
* ------------------------------------------------------------ */
::selection {
  background: rgba(44, 160, 125, 0.3);
  color: #1A1A1A;
  text-shadow: none;
}

input::selection,
textarea::selection {
  background: #fcfcfc;
  color: #1A1A1A;
  text-shadow: none;
}

a,
a:link {
  color: #1A1A1A;
  text-decoration: underline;
  -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);
  color: #192f60;
  text-decoration: none;
}

a:visited {
  color: #1A1A1A;
}

a {
  -webkit-tap-highlight-color: rgba(44, 160, 125, 0.5);
}

a:link {
  -webkit-tap-highlight-color: rgba(44, 160, 125, 0.5);
}

button:focus {
  outline-width: 0;
}

button {
  cursor: pointer;
}

/* @  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: 3px;
}

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 1.5px;
  -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;
  line-height: 1.7;
  word-break: break-all;
  word-wrap: break-word;
  color: #aaa;
  background-color: #DEDEDE;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0;
  margin-bottom: 24px;
}

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

.e-code-clipboard {
  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;
  margin-bottom: 16px;
}

.e-code-clipboard__title {
  margin-right: 10px;
  padding-right: 10px;
  padding-left: 10px;
  color: #666666;
  border-bottom: 1px solid #DDDDDD;
}

.e-code-clipboard__body {
  position: relative;
  min-width: 180px;
  display: block;
}

.e-code-clipboard__copy {
  display: none;
  background-color: #aaa;
  color: #fff;
  border-radius: 3px;
  padding: .2em .4em;
  position: absolute;
  bottom: -1.6em;
  right: -.5em;
}

/* @  Footer Layout
 * ------------------------------------------------------------ */
.l-footer {
  background-color: #222222;
  padding-top: 29px;
  color: white;
}

.l-footer a,
.l-footer button {
  color: inherit;
  text-decoration: none;
}

.l-footer a:hover,
.l-footer button:hover {
  text-decoration: underline;
}

.l-footer ._primary {
  max-width: 1192px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
  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-bottom: 15px;
}

.l-footer ._secondary {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 13px;
  padding-bottom: 13px;
  text-align: center;
  padding-right: 16px;
  padding-left: 16px;
}

.l-footer ._secondary ._copy {
  max-width: 1192px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
}

.l-footer ._secondary ._copy::after {
  clear: both;
  content: "";
  display: block;
}

.l-footer ._secondary ._copy ._copy-address {
  float: left;
}

.l-footer ._secondary ._copy ._copy-text {
  float: right;
}

.l-footer ._description {
  width: 250px;
  margin-bottom: 12px;
}

.l-footer ._nav {
  width: calc(100% - 320px);
  margin-bottom: 12px;
}

.l-footer ._nav ._nav-title {
  display: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-right: -16px;
  margin-left: -16px;
  padding: 14px 15px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.l-footer ._nav ._nav-title button, .l-footer ._nav ._nav-title a {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
  border: none;
  background-color: transparent;
}

.l-footer ._nav ._nav-title:after {
  font-family: 'Material Icons';
  font-size: 20px;
  position: absolute;
  top: 50%;
  right: 0;
  content: 'add';
  -webkit-transform: translateY(-50%) translateX(-50%);
      -ms-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
  white-space: nowrap;
  word-wrap: normal;
}

.l-footer ._nav ._nav-title[aria-expanded="false"]:after {
  content: "remove";
}

.l-footer ._nav ._nav-body {
  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;
}

.l-footer ._nav ul {
  width: 17%;
  margin-left: 3%;
  /*
      @media screen and (max-width: 1000px) {
        width: 47%;
      }
*/
}

.l-footer ._nav li {
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 15px;
}

.l-footer ._nav li ul {
  width: 100%;
  margin-top: 15px;
  margin-left: 0;
}

/* @  Header Layout
 * ------------------------------------------------------------ */
.l-header ._pc {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

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

.l-header ._pc ._primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 16px;
  float: left;
  -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;
  height: 92px;
}

.l-header ._pc ._logo img {
  width: 237px;
}

.l-header ._pc ._secondary {
  float: right;
  padding-left: 16px;
}

.l-header ._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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-header ._pc ._nav li {
  white-space: nowrap;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*
        &:nth-child(4) {
          padding-right: 3.9%;
          @media screen and (max-width: 980px) {
            padding-right: 2%;
          }
        }
*/
}

.l-header ._pc ._nav li:nth-child(1)::after, .l-header ._pc ._nav li:nth-child(2)::after, .l-header ._pc ._nav li:nth-child(3)::after, .l-header ._pc ._nav li:nth-child(4)::after {
  content: "";
  display: block;
  height: 21px;
  width: 12px;
  background: url("../img/common/header-nav-line.svg") no-repeat;
  position: absolute;
  right: -8px;
  top: 50%;
  margin-top: -10px;
}

.l-header ._pc ._nav li:last-child {
  width: 220px;
}

.l-header ._pc ._nav li:last-child a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #192f60 url("../img/common/header-nav-bg-contact.svg") no-repeat right center;
  background-size: auto 100%;
  color: #fff;
  font-size: 15px;
  padding: 19px 0;
  height: 92px;
  width: 200px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-left: auto;
}

.l-header ._pc ._nav a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 19px 20px;
  text-align: center;
  text-decoration: none;
  color: #1A1A1A;
}

.l-header ._pc ._nav a.is-active, .l-header ._pc ._nav a.stay, .l-header ._pc ._nav a:hover {
  opacity: 0.6;
}

.l-header ._pc ._nav a:focus {
  outline-offset: -3px;
}

.l-header ._sp {
  display: none;
  -webkit-transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* @  Content Layout
 * ------------------------------------------------------------ */
body,
html {
  background-color: #FFFFFF;
}

.l-main {
  overflow-x: hidden;
  min-height: 20vh;
  display: block;
  /* IE対策に追加 */
}

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

<p>メインカラムレイアウトを下記のパターンから選択します。</p>

<p>スマホ時はgap幅が追加されます。レイアウトで最大幅にしたい要素に対して<code>.is-gapless--sm</code>,<code>.is-gapless--md</code>を指定してください。</p>


<h2 class="styleguide">1column</h2>
```html_example
<div class="l-container">
  <div class="dummy-box">
    <p>.l-container</p>
      <div class="l-block"><div class="dummy-box">.l-block</div></div>
  </div>
</div>
```

<h2 class="styleguide">1column-full</h2>
```html_example
<div class="l-container">
    <div class="dummy-box">
    <p>.l-container</p>
      <div class="l-block-fluid"><div class="dummy-box">.l-block-fluid</div></div>
  </div>
  </div>
```
```html_example
    <div class="l-container-fluid">
    <div class="dummy-box">
    <p>.l-container-fluid</p>
     <div class="l-block-fluid"><div class="dummy-box">.l-block-fluid</div></div>
    </div>
  </div>
```

<h2 class="styleguide">2column</h2>
```html_example
<div class="l-container">
  <div class="dummy-box">
    <p>.l-container</p>
      <div class="l-block-primary"><div class="dummy-box">.l-block-primary</div></div>
      <div class="l-block-secondary"><div class="dummy-box">.l-block-secondary</div></div>
  </div>
</div>




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

.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 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}

.l-block-fluid {
  margin-bottom: 48px;
  width: 100%;
}

/* @ l-block-primary
 * ------------------------------------------------------------ */
.l-block-primary {
  margin-bottom: 48px;
  float: left;
  width: 70.6375838926%;
}

/* @  l-block-secondary
 * ------------------------------------------------------------ */
.l-block-secondary {
  margin-bottom: 48px;
  float: right;
  width: 25.1677852349%;
}

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

/* @ l-visualeditor
 * ------------------------------------------------------------ */
/*doc
---
title: visualeditor
name: visualeditor
category: visualeditor
---
<p class="e-text is-mb-medium">

外枠に<code>.visual-editor</code>を指定することで、内包するタグに「Elements」の主要なベース装飾を指定可能です。<br>
<code>.visual-editor</code>内はh3,h4,pなど基本的なタグのみで使用する想定です。<br>
複雑な装飾がある場合は<code>.visual-editor</code>を使わず直接classを指定してください。<br>
詳細ページやCMSで直接タグ入力するして更新する箇所に指定するのがよいかもです。
</p>




```html_example
      <div class="l-unit visual-editor">
        <h2>見出し2</h2>
        <h3>見出し3</h3>
        <h4>見出し4</h4>
        <h5>見出し5</h5>
        <h6>見出し6</h6>

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


        <ul>
          <li>順序がないリスト</li>
          <li>順序がないリスト
            <ul style="list-style-type: circle;">
              <li>順序がないリスト</li>
              <li>順序がないリスト</li>
            </ul>
          </li>
          <li>順序がないリスト</li>
        </ul>

        <ol>
          <li>順序のあるリスト</li>
          <li>順序のあるリスト
            <ol style="list-style-type: lower-alpha;">
              <li>順序のあるリスト</li>
              <li>順序のあるリスト</li>
            </ol>
          </li>
          <li>順序のあるリスト</li>
        </ol>


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

        <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 style="color: #cc3e4c;">エラー色文字（Text Red）</span><br>
        </p>

        <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>
          <br>
          <a href="#dummy" target="_blank"><img class="" src="/assets/img/common/img1.png" alt="" width="80" height="80"></a>
          <br>画像にリンクがある場合は自動アイコンは表示されません
        </p>



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

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




        <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>



```


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

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

.visual-editor h2:not(:first-child) {
  margin-top: 4rem;
}

.visual-editor h3:not(:first-child),
.visual-editor h4:not(:first-child) {
  margin-top: 3rem;
}

.visual-editor h5:not(:first-child),
.visual-editor h6:not(:first-child) {
  margin-top: 2rem;
}

.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,
.visual-editor h2,
.visual-editor h2,
.visual-editor h3,
.visual-editor h3,
.visual-editor h4,
.visual-editor h4,
.visual-editor h5,
.visual-editor h5 .visual-editor h6 {
  clear: both;
}

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

.alignleft {
  float: left;
  text-align: left;
  margin-right: 16px;
  margin-bottom: 16px;
}

.alignright {
  text-align: right;
  float: right;
  margin-bottom: 16px;
  margin-left: 16px;
}

.aligncenter {
  display: block;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.clearfloat {
  clear: both;
}

.size-thumbnail {
  max-width: 25%;
}

.size-medium {
  max-width: 33.33%;
}

[class^=column-table] .entry-container {
  overflow-x: auto;
  margin-bottom: 12px;
}

[class^=column-table] .entry-container .acms-table-scrollable th,
[class^=column-table] .entry-container .acms-table-scrollable td {
  display: table-cell;
  white-space: nowrap;
}

/* ==========================================================================
   #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>
```

*/
.l-block-primary .l-cols,
.l-cols {
  margin-right: -1.2%;
  margin-left: -1.2%;
}

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

.l-block-primary .l-cols > .l-col1,
.l-block-primary .l-cols > .l-col2,
.l-block-primary .l-cols > .l-col3,
.l-block-primary .l-cols > .l-col4,
.l-block-primary .l-cols > .l-col5,
.l-block-primary .l-cols > .l-col6,
.l-block-primary .l-cols > .l-col7,
.l-block-primary .l-cols > .l-col8,
.l-block-primary .l-cols > .l-col9,
.l-block-primary .l-cols > .l-col10,
.l-block-primary .l-cols > .l-col11,
.l-block-primary .l-cols > .l-col12,
.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 {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  min-height: 1px;
  margin-right: 1.2%;
  margin-left: 1.2%;
  margin-bottom: 1.92%;
}

.l-block-primary .l-cols > .l-col1 > *:last-child,
.l-block-primary .l-cols > .l-col2 > *:last-child,
.l-block-primary .l-cols > .l-col3 > *:last-child,
.l-block-primary .l-cols > .l-col4 > *:last-child,
.l-block-primary .l-cols > .l-col5 > *:last-child,
.l-block-primary .l-cols > .l-col6 > *:last-child,
.l-block-primary .l-cols > .l-col7 > *:last-child,
.l-block-primary .l-cols > .l-col8 > *:last-child,
.l-block-primary .l-cols > .l-col9 > *:last-child,
.l-block-primary .l-cols > .l-col10 > *:last-child,
.l-block-primary .l-cols > .l-col11 > *:last-child,
.l-block-primary .l-cols > .l-col12 > *:last-child,
.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 {
  margin-bottom: 0 !important;
}

.l-block-primary .l-cols {
  margin-right: -1.4251781473%;
  margin-left: -1.4251781473%;
}

.l-block-primary .l-cols > .l-col1, .l-block-primary .l-cols > .l-col2, .l-block-primary .l-cols > .l-col3, .l-block-primary .l-cols > .l-col4, .l-block-primary .l-cols > .l-col5, .l-block-primary .l-cols > .l-col6, .l-block-primary .l-cols > .l-col7, .l-block-primary .l-cols > .l-col8, .l-block-primary .l-cols > .l-col9, .l-block-primary .l-cols > .l-col10, .l-block-primary .l-cols > .l-col11, .l-block-primary .l-cols > .l-col12 {
  margin-right: 1.4251781473%;
  margin-left: 1.4251781473%;
  margin-bottom: 2.64%;
}

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

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

.l-block-primary .l-cols > .l-col1 {
  width: 5.4829770388%;
}

.l-block-primary .l-cols > .is-offset1 {
  margin-left: 9.7585114806%;
}

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

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

.l-block-primary .l-cols > .l-col2 {
  width: 13.8163103721%;
}

.l-block-primary .l-cols > .is-offset2 {
  margin-left: 18.0918448139%;
}

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

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

.l-block-primary .l-cols > .l-col3 {
  width: 22.1496437055%;
}

.l-block-primary .l-cols > .is-offset3 {
  margin-left: 26.4251781473%;
}

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

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

.l-block-primary .l-cols > .l-col4 {
  width: 30.4829770388%;
}

.l-block-primary .l-cols > .is-offset4 {
  margin-left: 34.7585114806%;
}

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

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

.l-block-primary .l-cols > .l-col5 {
  width: 38.8163103721%;
}

.l-block-primary .l-cols > .is-offset5 {
  margin-left: 43.0918448139%;
}

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

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

.l-block-primary .l-cols > .l-col6 {
  width: 47.1496437055%;
}

.l-block-primary .l-cols > .is-offset6 {
  margin-left: 51.4251781473%;
}

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

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

.l-block-primary .l-cols > .l-col7 {
  width: 55.4829770388%;
}

.l-block-primary .l-cols > .is-offset7 {
  margin-left: 59.7585114806%;
}

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

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

.l-block-primary .l-cols > .l-col8 {
  width: 63.8163103721%;
}

.l-block-primary .l-cols > .is-offset8 {
  margin-left: 68.0918448139%;
}

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

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

.l-block-primary .l-cols > .l-col9 {
  width: 72.1496437055%;
}

.l-block-primary .l-cols > .is-offset9 {
  margin-left: 76.4251781473%;
}

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

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

.l-block-primary .l-cols > .l-col10 {
  width: 80.4829770388%;
}

.l-block-primary .l-cols > .is-offset10 {
  margin-left: 84.7585114806%;
}

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

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

.l-block-primary .l-cols > .l-col11 {
  width: 88.8163103721%;
}

.l-block-primary .l-cols > .is-offset11 {
  margin-left: 93.0918448139%;
}

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

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

.l-block-primary .l-cols > .l-col12 {
  width: 97.1496437055%;
}

.l-block-primary .l-cols > .is-offset12 {
  margin-left: 101.425178147%;
}

/* ==========================================================================
   #FLEX
   ========================================================================== */
/**
 * フレックスボックスのスタイルです
 *
 *
 *
 */
/* flex
   ========================================================================== */
/*doc
---
title: flex
name: 30_grid-flex
categories: [flex]
---

```html_example

<div class="l-flex-boxes">
 <div class="l-flex-box l-flex-box--large"><div class="dummy-box">.l-flex-box--large</div></div>
 <div class="l-flex-box"><div class="dummy-box">.l-flex-box</div></div>
 <div class="l-flex-box"><div class="dummy-box">.l-flex-box</div></div>
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box--small</div></div>
 <div class="l-flex-box l-flex-box--auto">  <div class="dummy-box">.l-flex-box</div></div>
</div>





<div class="l-flex-boxes is-flex-center">
 <div class="l-flex-box"><div class="dummy-box">.l-flex-box</div></div>
</div>


<div class="l-flex-boxes is-flex-flex-end">
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
</div>


<div class="l-flex-boxes .is-flex-flex-start">
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
</div>

<div class="l-flex-boxes is-flex-space-between">
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
 <div class="l-flex-box l-flex-box--small"><div class="dummy-box">.l-flex-box</div></div>
</div>


```
*/
.l-flex-boxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  clear: both;
  margin-right: -1%;
  margin-left: -1%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

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

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

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

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

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

.l-flex-box {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: 1%;
  margin-left: 1%;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  margin-bottom: 16px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
          flex: 0 0 23%;
}

.l-flex-box > *:last-child {
  margin-bottom: 0 !important;
}

.l-flex-box--small {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 14.6666666667%;
          flex: 0 0 14.6666666667%;
}

.l-flex-box--medium {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 23%;
          flex: 0 0 23%;
}

.l-flex-box--large {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 31.3333333333%;
          flex: 1 1 31.3333333333%;
}

.l-flex-box--auto {
  -webkit-box-flex: 2;
      -ms-flex: 2 2 15em;
          flex: 2 2 15em;
}

/* ==========================================================================
   #ELEMENTS
   ========================================================================== */
/* Alerts
   ========================================================================== */
/*doc
---
title: alert
name: alert
categories: [elements, alert]
---

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

```html_example
<div class="e-box-alert e-box-alert--success">
  <div class="e-box-alert__body">
    <p class="e-box-alert__text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
  </div>
</div>
```

<h3 class="styleguide">Warning</h3>
```html_example
<div class="e-box-alert e-box-alert--warning">
  <div class="e-box-alert__body">
    <p class="e-box-alert__text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
  </div>
</div>
```

<h3 class="styleguide">Error</h3>
```html_example
<div class="e-box-alert e-box-alert--error" role="alert">
  <div class="e-box-alert__body">
    <p class="e-box-alert__text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
  </div>
</div>
```


<h3 class="styleguide">Information</h3>
```html_example
<div class="e-box-alert e-box-alert--info">
  <div class="e-box-alert__body">
    <p class="e-box-alert__text">情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った</p>
  </div>
</div>

```


*/
.e-box-alert {
  font-size: 16px;
  position: relative;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding: .6rem 1.5rem .6rem 3.2rem;
  border: 1px solid #DEDEDE;
  border-radius: 4px;
  background-color: #DEDEDE;
  margin-bottom: 24px;
}

.e-box-alert:before {
  font-size: 1.5rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.1rem;
  height: 1em;
  margin: auto;
  content: 'check';
  vertical-align: middle;
  white-space: nowrap;
}

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

.e-box-alert--success:before {
  content: 'check';
  color: #6f9614;
}

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

.e-box-alert--warning:before {
  content: 'warning';
  color: #f6bb42;
}

.e-box-alert--error {
  color: #cc3e4c;
  border-color: #cc3e4c;
  background-color: #faeced;
}

.e-box-alert--error:before {
  content: 'warning';
  color: #cc3e4c;
}

.e-box-alert--info {
  color: #478fbb;
  border-color: #478fbb;
  background-color: #edf4f8;
}

.e-box-alert--info:before {
  content: 'priority_high';
  color: #478fbb;
}

/* ==========================================================================
   #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 {
  text-align: center;
  width: 100%;
  overflow: hidden;
  margin-bottom: 24px;
}

.e-video-container iframe {
  width: 100%;
  min-height: 100px;
}

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

```html_example
 <div class="e-gmap">
    <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-gmap {
  text-align: center;
  overflow: hidden;
  position: relative;
  margin-bottom: 24px;
}

.e-gmap::after {
  content: "";
  display: block;
  padding-top: 60%;
}

.e-gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

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

```html_example

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

```
*/
.acms-entry blockquote,
.visual-editor blockquote,
.e-blockquote {
  margin: 0;
  line-height: 1.7;
  position: relative;
  padding: 30px 60px 30px 60px;
  border: 1px solid #DEDEDE;
  margin-bottom: 24px;
}

.acms-entry blockquote:before, .acms-entry blockquote:after,
.visual-editor blockquote:before,
.visual-editor blockquote:after,
.e-blockquote:before,
.e-blockquote:after {
  font-family: 'Material Icons';
  font-size: 40px;
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  content: 'format_quote';
  white-space: nowrap;
  word-wrap: normal;
  color: #DEDEDE;
}

.acms-entry blockquote:before,
.visual-editor blockquote:before,
.e-blockquote:before {
  top: 20px;
  left: 10px;
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}

.acms-entry blockquote:after,
.visual-editor blockquote:after,
.e-blockquote:after {
  right: 10px;
  bottom: 20px;
}

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

```html_example
<h1 class="e-heading1">情に棹させば流される智に働けば角が立つ</h1>
<h2 class="e-heading2">情に棹させば流される智に働けば角が立つ</h2>
<h3 class="e-heading3">情に棹させば流される智に働けば角が立つ</h3>
<h4 class="e-heading4">情に棹させば流される智に働けば角が立つ</h4>
<h5 class="e-heading5">情に棹させば流される智に働けば角が立つ</h5>
<h6 class="e-heading6">情に棹させば流される智に働けば角が立つ</h6>

```

*/
.visual-editor h1,
.e-heading1 {
  font-size: 36px;
  margin-bottom: 1rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

.visual-editor h2,
.e-heading2 {
  font-size: 30px;
  color: #192f60;
  margin-bottom: 2.5rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

.visual-editor h3,
.e-heading3 {
  font-size: 20px;
  color: #192f60;
  background: url("../img/common/bg-h3.png");
  padding: 20px 15px 20px 28px;
  margin-bottom: 2rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  position: relative;
}

.visual-editor h3::before,
.e-heading3::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #192f60;
  width: 10px;
}

.visual-editor h4,
.e-heading4 {
  font-size: 20px;
  color: #fff;
  background: #192f60;
  margin-bottom: 1.5rem;
  padding: 11px 15px 11px 20px;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

.visual-editor h5,
.e-heading5 {
  font-size: 18px;
  color: #192f60;
  background: url("../img/common/bg-h5.png") no-repeat left 3px;
  margin-bottom: 1rem;
  padding-left: 28px;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

.visual-editor h6,
.e-heading6 {
  font-size: 15px;
  margin-bottom: 1rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
}

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

```html_example


<div class="e-heading-group">
  <h1 class="e-heading1">情に棹させば流される智に働けば角が立つ</h1>
  <p class="e-heading-date"> 6月12日  12:49</p>
   <ul class="e-heading-tag e-list-tag">
    <li><a href="">タグ1</a></li>
    <li><a href="">タグ2</a></li>
    <li><a href="">タグ3</a></li>
    <li><a href="">タグ4</a></li>
    <li><a href="">タグ5</a></li>
    <li><a href="">タグ6</a></li>
  </ul>

</div>

```
*/
.e-heading-date {
  margin-bottom: 24px;
}

.e-heading-copy {
  margin-bottom: 24px;
  font-size: 14px;
}

.e-heading-group {
  margin-bottom: 48px;
}

.e-heading-group h1,
.e-heading-group h2,
.e-heading-group h3,
.e-heading-group h4,
.e-heading-group h5,
.e-heading-group h6 {
  margin-bottom: 24px;
}

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

```html_example

  <figure class="e-img-box">
    <img src="/assets/img/common/img1.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/common/img1.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/common/img1.png" alt="">
    </figure>
   </div>


  <div class="l-unit visual-editor">
    <figure class="is-img-left is-img-w25">
      <img src="/assets/img/common/img1.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: 24px;
}

.visual-editor figure,
.e-img-box,
[class^=column-image] {
  margin-bottom: 24px;
}

.visual-editor figure a,
.e-img-box a,
[class^=column-image] a {
  display: inline-block;
}

.visual-editor figure figcaption,
.visual-editor figure .e-img-caption,
.e-img-box figcaption,
.e-img-box .e-img-caption,
[class^=column-image] figcaption,
[class^=column-image] .e-img-caption {
  text-align: left;
  margin-top: 14px;
  color: #757575;
  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;
  display: block;
  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 #DEDEDE;
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

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

.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: 24px;
}

.e-text-catchcopy {
  text-align: center;
  font-size: 16px;
  margin-bottom: 24px;
}

/*doc
---

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

---

<div class="styleguide-table"></div>
Class                                                                      | Description
-----------------------------------------------------------------------    | ------------
`is-text-small`            |                        |
`is-text-sub`            |                        |
`is-text-week`           |                        |
`is-text-point`          |                        |
`is-text-highlight`          |                        |
`is-text-arrow`          |                        |
`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-larger {
  font-size: 1.5em;
}

.is-text-large {
  font-size: 1.2em;
}

.is-text-small {
  font-size: .8em;
}

.is-text-smaller {
  font-size: .65em;
}

.is-text-sub {
  color: #757575;
  font-size: 12px;
}

.is-text-week {
  color: #9E9E9E;
  font-size: 12px;
}

.is-text-arrow {
  overflow: hidden;
}

.is-text-arrow:before {
  display: inline-block;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  border-top: 1px solid #757575;
  border-left: 1px solid #757575;
  content: "";
  vertical-align: middle;
  position: relative;
  top: -1px;
  margin-right: 5px;
}

.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-highlight {
  background-color: #FFFF00;
}

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

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

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

.is-text-mindent {
  text-indent: -1.5em;
  padding-left: 1.5em;
}

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

.is-text-bdb {
  border-bottom: 1px solid #192f60;
}

.is-text-en {
  font-family: "Raleway", sans-serif;
}

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

.visual-editor ul li,
.visual-editor ol li,
.e-list li {
  margin-bottom: 8px;
}

.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: 0;
  list-style-type: none;
}

.visual-editor ul li,
.e-list--disc li {
  padding-left: 20px;
  position: relative;
}

.visual-editor ul li::before,
.e-list--disc li::before {
  position: absolute;
  top: .5em;
  left: 0;
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #192f60;
  content: "";
  vertical-align: middle;
}

/* リスト 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;
}

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

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

.visual-editor .e-list--arrow li,
.e-list--arrow li {
  padding-left: 20px;
  position: relative;
}

.visual-editor .e-list--arrow li::before,
.e-list--arrow li::before {
  position: absolute;
  top: .5em;
  left: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #192f60;
  content: "";
  vertical-align: middle;
}

.visual-editor .e-list--arrow li::after,
.e-list--arrow li::after {
  position: absolute;
  top: .7em;
  left: .15em;
  display: inline-block;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-style: solid;
  border-color: #fff;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0;
  border-left-width: 0;
  content: "";
  vertical-align: middle;
}

.visual-editor .e-list--arrow a:hover:before,
.e-list--arrow a:hover:before {
  text-decoration: none;
}

/* 定義リスト
   ========================================================================== */
/*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: 24px;
}

.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: 1em;
}

/* インラインリスト
   ========================================================================== */
/*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: 24px;
}

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

.e-list-inline li:after {
  padding-left: 4px;
  content: "｜";
  display: inline-block;
  width: 1em;
  height: 1em;
  color: #DEDEDE;
}

.e-list-inline li:last-child:after {
  display: none;
}

/* タグリスト
   ========================================================================== */
/*doc
---
title: list-tag
name: list-tag
categories: [elements, list]
parent: list
---

```html_example
<ul class="e-list-tag">
  <li><a href="">タグ1</a></li>
  <li><a href="">タグ2</a></li>
  <li><a href="">タグ3</a></li>
  <li><a href="">タグ4</a></li>
  <li><a href="">タグ5</a></li>
  <li><a href="">タグ6</a></li>
</ul>
```
*/
.visual-editor .e-list-tag {
  margin-left: 0;
  list-style-type: none;
}

.e-list-tag {
  margin-bottom: 24px;
  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-right: -3px;
  margin-left: -3px;
  margin-top: -12px;
}

.e-list-tag li {
  margin-right: 6px;
  margin-left: 6px;
  margin-top: 12px;
}

.e-list-tag li a {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  color: #1A1A1A !important;
  text-decoration: none !important;
  border-radius: 4px;
  min-width: 3rem;
  display: block;
  padding: 7px 12px;
  border: solid 1px #DEDEDE;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  vertical-align: top;
}

.e-list-tag li a:hover {
  text-decoration: underline !important;
}

.e-list-tag li a:focus {
  outline-offset: -3px;
}

.e-list-tag li:last-child:after {
  display: none;
}

/* 画像リスト
   ========================================================================== */
/*doc
---
title: list-img
name: list-img
categories: [elements, list]
parent: list
---

```html_example
<ul class="e-list-img-vertical">
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
</ul>
```
*/
.visual-editor .e-list-img-vertical {
  margin-left: 0;
  list-style-type: none;
}

.e-list-img-vertical {
  margin-bottom: 24px;
}

.e-list-img-vertical li {
  text-align: center;
  margin-bottom: 16px;
}

/*doc
---
title: list-img-inline
name: list-img-inline
categories: [elements, list]
parent: list
---

```html_example
<ul class="e-list-img-horizontal">
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
  <li><a href=""><img src="/assets/img/common/widget.png" alt=""> </a></li>
</ul>
```
*/
.visual-editor .e-list-img-horizontal {
  margin-left: 0;
  list-style-type: none;
}

.e-list-img-horizontal {
  text-align: center;
  margin-left: -1.3422818792%;
  margin-right: -1.3422818792%;
  -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;
}

.e-list-img-horizontal li {
  margin-bottom: 16px;
}

.e-list-img-horizontal li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22.3154362416%;
          flex: 0 0 22.3154362416%;
  margin-left: 1.3422818792%;
  margin-right: 1.3422818792%;
  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;
}

.e-list-img-horizontal li > *:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   #TABLE
   ========================================================================== */
/* table:base
   ========================================================================== */
[class*="column-table-"] table,
.visual-editor table,
.e-table, .visual-editor .e-table--borderless,
.e-table--borderless {
  width: 100%;
  border-top: 1px solid #DEDEDE;
  border-right: 1px solid #DEDEDE;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 24px;
}

[class*="column-table-"] table caption, .visual-editor table caption, .e-table caption, .visual-editor .e-table--borderless caption, .e-table--borderless caption {
  color: #757575;
  margin-bottom: 24px;
}

[class*="column-table-"] table tr, .visual-editor table tr, .e-table tr, .visual-editor .e-table--borderless tr, .e-table--borderless tr,
[class*="column-table-"] table td,
.visual-editor table td,
.e-table td,
.visual-editor .e-table--borderless td,
.e-table--borderless td,
[class*="column-table-"] table th,
.visual-editor table th,
.e-table th,
.visual-editor .e-table--borderless th,
.e-table--borderless th {
  text-align: left;
  vertical-align: top;
  word-break: break-all;
}


[class*="column-table-"] table th,
.visual-editor table th,
.e-table th,
.visual-editor .e-table--borderless th,
.e-table--borderless th {
  padding: 11px 16px;
  border-bottom: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  vertical-align: top;
  background-color: #fafafa;
  width: 20%;
}


[class*="column-table-"] table td,
.visual-editor table td,
.e-table td,
.visual-editor .e-table--borderless td,
.e-table--borderless td {
  padding: 11px 16px;
  border-bottom: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  background-color: #fff;
}

/*  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>

```
*/
/*  Borderless
   ========================================================================== */
/*doc
---
title: table-borderless
name: table-borderless
categories: [elements, table]
parent: table
---

```html_example
  <table class="e-table 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>

```
*/
.visual-editor .e-table--borderless,
.e-table--borderless {
  border-right: 0;
}

.visual-editor .e-table--borderless th,
.e-table--borderless th {
  background: transparent;
  border-left: 0;
}

.visual-editor .e-table--borderless td,
.e-table--borderless td {
  border-left: 0;
}

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

```html_example
  <table class="e-table e-table--sp-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="is-cell-25p">タイトル</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: 12px;
}

/* テーブル バリエーション 横スクロール
   ========================================================================== */
/*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-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 !important;
}

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

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

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

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

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

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

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

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

/* ==========================================================================
   #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;
  border: solid 1px #DEDEDE;
  background: #fff;
  margin-bottom: 24px;
  padding: 1rem 1.5rem;
}

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

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

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

.e-box--error {
  background-color: #faeced;
  border-color: #cc3e4c;
}

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

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

.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,
.entry-btn,
.entry-btn-attention {
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 64px;
  max-width: 100%;
  padding: 1rem 2rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none !important;
  color: #1A1A1A !important;
  border: 1px solid #DEDEDE;
  border-radius: 0;
  outline: none;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.e-button a,
.entry-btn a,
.entry-btn-attention a {
  font-weight: inherit;
  text-decoration: inherit;
  color: inherit;
}

.e-button:hover, .e-button:focus, .e-button.is-hover,
.entry-btn:hover,
.entry-btn:focus,
.entry-btn.is-hover,
.entry-btn-attention:hover,
.entry-btn-attention:focus,
.entry-btn-attention.is-hover {
  text-decoration: none;
  opacity: 0.6;
}

.e-button:active,
.entry-btn:active,
.entry-btn-attention:active {
  text-decoration: none;
}

.e-button:disabled, .e-button.is-disabled,
.entry-btn:disabled,
.entry-btn.is-disabled,
.entry-btn-attention:disabled,
.entry-btn-attention.is-disabled {
  cursor: not-allowed;
  color: #666 !important;
  border: 1px solid #DEDEDE;
  background-color: #eee;
}

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

.e-button .is-icon-left,
.entry-btn .is-icon-left,
.entry-btn-attention .is-icon-left {
  left: .5em;
}

.e-button .is-icon-right,
.entry-btn .is-icon-right,
.entry-btn-attention .is-icon-right {
  right: .5em;
}

.e-button--primary,
.entry-btn-attention {
  color: #fff !important;
  border-color: #192f60;
  background-color: #192f60;
}

.e-button--accent {
  color: #fff !important;
  border-color: #192f60;
  background: #192f60 url("../img/common/header-nav-bg-contact.svg") no-repeat right center;
}

.e-button--accent:disabled, .e-button--accent.is-disabled {
  background-image: none;
}

.e-button--arrow {
  position: relative;
  padding: 1rem 4rem;
}

.e-button--arrow::after {
  content: url("../img/common/icon-arrow-wh.svg");
  display: inline-block;
  position: absolute;
  right: 10px;
  top: 50%;
  -webkit-transform: translateY(-60%);
      -ms-transform: translateY(-60%);
          transform: translateY(-60%);
}

/* ボタングループ
   ========================================================================== */
/*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 e-button-group--left">
  <button type="button" class="e-button">もっと見る</button>
  <button type="button" class="e-button">もっと見る</button>
</div>


```

*/
.e-button-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: -0.9501187648%;
  margin-left: -0.9501187648%;
  text-align: center;
  -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;
  margin-bottom: 24px;
}

.e-button-group .e-button {
  margin-right: 0.9501187648%;
  margin-bottom: 12px;
  margin-left: 0.9501187648%;
}

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

.e-button-group--left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.e-button-group--right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

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

```html_example
<div class="e-button-group">
  <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>
</div>

```

*/
.e-button--small {
  padding: 0.5rem 1.1rem;
  font-size: .75em;
  -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);
  -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--large {
  padding: 1.4rem 2rem;
  font-size: 1.15em;
  font-weight: bold;
  min-width: 31.4330958036%;
}

/* @ button
 * ------------------------------------------------------------ */
/*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: 5px 6px;
  border: 0;
  border-radius: 4px;
  background-color: #aaa;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  vertical-align: top;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

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

/* Control
   ========================================================================== */
/*doc
---
title: form
name: form
categories: [elements, form]
---



```html_example
<form>
  <table class="e-form-table">
    <tr>
      <th>
        <label for="name">お名前<span class="e-form-req">必須</span></label>
      </th>
      <td>
        <div class="e-form-cols e-form-cols--break">
          <div class="e-form-col8">
            <input type="text" name="name" id="name" value="" class="e-form-control js-required" aria-describedby="name-tip" placeholder="(例) 太郎">
          </div>
          <div class="e-form-message-box">
            <p class="e-form-error-text">お名前を入力してください。</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>
        <label for="inquiry">お問い合わせ内容<span class="e-form-any">任意</span></label>
      </th>
      <td>
        <div class="e-form-cols">
          <div class="e-form-col12">
            <textarea name="inquiry" id="inquiry" cols="40" rows="10" class="e-form-control" placeholder="お問い合わせ内容を入力してください。"></textarea>
          </div>
           <div class="e-form-message-box">
            <p class="e-form-small-text">お問い合わせ内容を入力してください。</p>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>ご用件種別<span class="e-form-req">必須</span></th>
      <td>
        <div class="e-form-cols">
          <div class="e-form-col12">
            <ul aria-describedby="description1-1-tip" class="e-form-rc-box" id="description1-1">
              <li>
                <input checked type="radio" class="e-form-control is-valid" name="description1-1" id="description1-1_radio1" value="お問い合わせ">
                <label for="description1-1_radio1">お問い合わせ</label>
              </li>
              <li>
                <input type="radio" class="e-form-control" name="description1-1" id="description1-1_radio2" value="ご利用申し込み">
                <label for="description1-1_radio2">ご利用申し込み</label>
              </li>
              <li>
                <input type="radio" class="e-form-control" name="description1-1" id="description1-1_radio3" value="ご相談">
                <label for="description1-1_radio3">ご相談</label>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>ご用件種別<span class="e-form-req">必須</span></th>
      <td>
        <div class="e-form-cols">
          <div class="e-form-col12">
            <ul aria-describedby="description1-2-tip" class="e-form-rc-box" id="description1-2">
              <li>
                <input type="checkbox" name="description1-2" class="is-valid e-form-control" value="お問い合わせ" id="description1-2_check1">
                <label for="description1-2_check1">お問い合わせ</label>
              </li>
              <li>
                <input checked type="checkbox" name="description1-2" class="e-form-control" value="ご利用申し込み" id="description1-2_check2">
                <label for="description1-2_check2">ご利用申し込み</label>
              </li>
              <li>
                <input type="checkbox" name="description1-2" class="e-form-control" value="ご相談" id="description1-2_check3">
                <label for="description1-2_check3">ご相談</label>
              </li>
            </ul>
            <div class="e-form-message-box">
              <p class="e-form-error-text">ご用件種別を入力してください。</p>
            </div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th>ご用件種別 <span class="e-form-req">必須</span></th>
      <td>
        <div class="e-form-cols">
          <div class="e-form-col12">
            <select name="description1-3" id="description1-3" value="" class="e-form-control">
              <option value="" >選択してください。</option>
              <option value="">お問い合わせ</option>
              <option value="">ご利用申し込み</option>
              <option value="">ご相談</option>
            </select>
                 <div class="e-form-message-box">
            <p class="e-form-error-text">ご用件種別を入力してください。</p>
          </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
  <div class="e-button-group">
    <button type="submit" class="e-button e-button--xlarge">確認画面へ</button>
  </div>
</form>
```
```html_example


<h3 class="styleguide">Disabled Input</h3>
<input type="text" disabled class="e-form-control">


<h3 class="styleguide">Input with Success</h3>
<input type="text"  class="e-form-control is-valid">

<h3 class="styleguide">Input with Warning</h3>
<input type="text"  class="e-form-control is-warning">

<h3 class="styleguide">Input with Error</h3>
<input type="text"  class="e-form-control is-error">




```



*/
.e-form-control {
  padding: 10px 15px;
  -webkit-transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #DEDEDE;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
  color: #1A1A1A;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

.e-form-control:focus, .e-form-control:hover {
  background-color: white;
}

.e-form-control:focus {
  -webkit-box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
          box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
  outline: 0;
}

.e-form-control::-webkit-input-placeholder {
  color: #868686;
}

.e-form-control::-moz-input-placeholder {
  color: #868686;
}

.e-form-control::-ms-input-placeholder {
  color: #868686;
}

.e-form-control::-ms-expand {
  display: none;
}

input[type=file].e-form-control {
  background-color: transparent;
  border-width: 0;
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
          box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
}

.e-form-control[disabled],
.e-form-control[readonly],
fieldset[disabled] .e-form-control {
  background-color: #eee;
  cursor: not-allowed;
}

textarea.e-form-control {
  height: auto;
  resize: vertical;
}

select.e-form-control {
  background-image: url("../img/form/form_icon_select_top.svg");
  background-position: right 10px center;
  background-repeat: no-repeat;
  text-align: left;
  text-indent: .01px;
  text-overflow: "";
  cursor: pointer;
  padding-right: 25px;
}

select.e-form-control:focus {
  background-image: url("../img/form/form_icon_select_top.svg");
}

.e-form-rc-box {
  position: relative;
}

.e-form-rc-box > span,
.e-form-rc-box > li,
.e-form-rc-box > div {
  margin-bottom: 10px;
  display: block;
}

.e-form-rc-box label {
  display: inline-block;
  position: relative;
  min-height: 20px;
  padding-left: 30px;
  padding-right: 10px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.e-form-rc-box input {
  position: absolute;
  opacity: 0;
  z-index: -1;
  width: auto;
}

.e-form-rc-box input + label:before,
.e-form-rc-box input + .mwform-radio-field-text:before,
.e-form-rc-box input + .mwform-checkbox-field-text:before {
  display: block;
  position: absolute;
  top: .1em;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../img/form/form_icons.png") 0 0 no-repeat;
  background-image: url("../img/form/form_icons.svg");
  content: "";
  overflow: hidden;
}

.e-form-rc-box input:focus + label,
.e-form-rc-box input:focus + .mwform-radio-field-text,
.e-form-rc-box input:focus + .mwform-checkbox-field-text {
  -webkit-box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
          box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
}

.e-form-rc-box input:disabled + label,
.e-form-rc-box input:disabled + .mwform-radio-field-text,
.e-form-rc-box input:disabled + .mwform-checkbox-field-text {
  opacity: .6;
}

.e-form-rc-box input:checked + label,
.e-form-rc-box input:checked + .mwform-radio-field-text,
.e-form-rc-box input:checked + .mwform-checkbox-field-text {
  color: #333;
}

.e-form-rc-box input[type=radio] + label:before,
.e-form-rc-box input[type=radio] + .mwform-radio-field-text:before {
  background-position: -40px -40px;
}

.e-form-rc-box input[type=radio]:disabled + label:before,
.e-form-rc-box input[type=radio]:disabled + .mwform-radio-field-text:before {
  background-position: -40px -70px;
}

.e-form-rc-box input[type=radio]:checked + label:before,
.e-form-rc-box input[type=radio]:checked + .mwform-radio-field-text:before {
  background-position: -140px -40px;
}

.e-form-rc-box input[type=radio]:disabled:checked + label:before,
.e-form-rc-box input[type=radio]:disabled:checked + .mwform-radio-field-text:before {
  background-position: -140px -70px;
}

.e-form-rc-box input[type=checkbox] + label:before,
.e-form-rc-box input[type=checkbox] + .mwform-checkbox-field-text:before {
  background-position: -40px -140px;
}

.e-form-rc-box input[type=checkbox]:disabled + label:before,
.e-form-rc-box input[type=checkbox]:disabled + .mwform-checkbox-field-text:before {
  background-position: -40px -110px;
}

.e-form-rc-box input[type=checkbox]:checked + label:before,
.e-form-rc-box input[type=checkbox]:checked + .mwform-checkbox-field-text:before {
  background-position: -140px -140px;
}

.e-form-rc-box input[type=checkbox]:disabled:checked + label:before,
.e-form-rc-box input[type=checkbox]:disabled:checked + .mwform-checkbox-field-text:before {
  background-position: -140px -110px;
}

.e-form-rc-box--ib > div,
.e-form-rc-box--ib > li,
.e-form-rc-box--ib > span {
  display: inline-block;
}

.e-form-rc-box--2col > div,
.e-form-rc-box--2col > li,
.e-form-rc-box--2col > span {
  width: 48%;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.validate-rc-icon {
  display: none;
}

.e-form-message-box.is-error {
  display: inline-block;
}

.is-error {
  border-color: #cc3e4c;
  color: #cc3e4c;
}

.is-error.e-form-control {
  background-image: url("../img/form/form_icon_error.svg");
  background-position: 98% .6em;
  background-repeat: no-repeat;
  padding-right: 30px;
  background-color: #fff0f5;
}

.is-error ~ .validate-rc-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("../img/form/form_icon_error.svg");
  background-position: 98% .6em;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

.is-warning {
  border-color: #f6bb42;
  color: #f6bb42;
}

.is-warning.e-form--warning-text {
  display: block;
}

.is-warning.e-form-control {
  padding-right: 30px;
}

.is-warning ~ .validate-rc-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
}

.is-valid {
  border-color: #6f9614;
}

.is-valid.e-form--valid-text {
  display: block;
}

.is-valid.e-form-control {
  background-image: url("../img/form/form_icon_done.svg");
  background-position: 98% .8em;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.is-valid ~ .validate-rc-icon {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("../img/form/form_icon_done.svg");
  background-position: 98% .6em;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

.e-form-control [role="tooltip"] {
  display: none;
  width: auto;
  margin: 0;
  padding: .25em;
  background: #192f60;
  color: #fff;
  z-index: 2;
  position: static;
  top: 100%;
}

.e-form-control:focus + [role="tooltip"] {
  display: block;
  position: static;
  top: 100%;
}

.e-form-inframe {
  width: 100%;
  max-height: 250px;
  margin: 15px auto;
  padding-right: 15px;
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #DEDEDE;
}

.e-form-inframe::-webkit-scrollbar {
  width: 4px;
}

.e-form-inframe::-webkit-scrollbar-track {
  background: #d4d4d4;
}

.e-form-inframe::-webkit-scrollbar-thumb {
  background: #000;
}

/* Tools
   ========================================================================== */
.e-form-req,
.e-form-any {
  padding: 1px 6px;
  border-radius: 2px;
  background-color: #cc3e4c;
  color: #fff;
  font-size: 10px;
  display: inline-block;
  font-weight: bold;
}

.e-form-table .e-form-req, .e-form-table
.e-form-any {
  margin-left: 10px;
}

.e-form-any {
  background-color: #6f9614;
}

.e-form-text {
  margin-top: .5em;
}

.e-form-text-small {
  font-size: .8em;
  margin-top: .5em;
  font-weight: normal;
}

.e-form-message-box {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  clear: both;
  display: inline-block;
  width: 100%;
}

.e-form-error-text {
  color: #cc3e4c;
  margin-top: .5em;
}

.e-form-error-text:before {
  vertical-align: middle;
  content: "info_outline";
  white-space: nowrap;
  font-size: 1.2em;
  line-height: 1em;
  margin-right: 5px;
}

.e-form-button-group {
  text-align: center;
  margin-bottom: 24px;
}

.e-form-button-group button, .e-form-button-group input, .e-form-button-group a {
  margin-bottom: 12px;
}

/*doc
---
title: form-step
name: form-step
categories: [elements, form]
parent: form
---


```html_example

<div class="e-form-step">
  <ol class="e-form-step__body">
    <li class="e-form-step__item is-active"><span>お客様情報の変更</span></li>
    <li class="e-form-step__item"><span>変更内容の確認</span></li>
    <li class="e-form-step__item"><span>変更完了</span></li>
    <li class="e-form-step__item"><span>変更完了</span></li>
    <li class="e-form-step__item"><span>変更完了</span></li>
  </ol>
</div>


```
*/
.e-form-step {
  margin-bottom: 24px;
}

.e-form-step__body {
  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;
  border: 1px solid #DEDEDE;
  overflow: hidden;
}

.e-form-step__item {
  width: 100%;
  counter-increment: form-step;
  font-size: 15px;
  padding: .75em .75em .75em 2em;
  position: relative;
  white-space: nowrap;
}

.e-form-step__item:first-child {
  padding-left: .75em;
}

.e-form-step__item:before {
  content: counter(form-step);
  width: 26px;
  height: 26px;
  background-color: #aaa;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 26px;
  color: #ffffff;
  margin-right: 8px;
}

.e-form-step__item span:before, .e-form-step__item span:after {
  right: -1.1em;
  top: -.2em;
  bottom: -.2em;
  border-color: transparent transparent transparent #DEDEDE;
  border-width: 1.8em 0 1.8em 1.3em;
  position: absolute;
  border-style: solid;
  content: "";
  z-index: 2;
}

.e-form-step__item span:after {
  right: -1em;
  border-color: transparent transparent transparent #ffffff;
}

.e-form-step__item:last-child span:before, .e-form-step__item:last-child span:after {
  display: none;
}

.e-form-step__item.is-active {
  font-weight: bold;
  color: #ffffff;
  background-color: #fafafa;
}

.e-form-step__item.is-active span:before {
  border-color: transparent transparent transparent #DEDEDE;
}

.e-form-step__item.is-active span:after {
  border-color: transparent transparent transparent #fafafa;
}

.e-form-step__item.is-active:before {
  font-weight: normal;
  background-color: #ffffff;
  color: #fafafa;
}

.e-form-table {
  width: 100%;
  border-top: 1px solid #DEDEDE;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  margin-bottom: 24px;
}

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

.e-form-table th {
  padding: 20px 10px 20px 25px;
  border-bottom: 1px solid #DEDEDE;
  vertical-align: top;
  width: 33%;
}

.e-form-table td {
  padding: 20px 10px 20px 25px;
  border-bottom: 1px solid #DEDEDE;
}

/* @ Layout
 * ------------------------------------------------------------ */
.e-form-cols {
  margin-right: -1.5%;
  margin-left: -1.5%;
  display: block;
}

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

.e-form-col0_5,
.e-form-col1,
.e-form-col2,
.e-form-col3,
.e-form-col4,
.e-form-col5,
.e-form-col6,
.e-form-col7,
.e-form-col8,
.e-form-col9,
.e-form-col10,
.e-form-col11,
.e-form-col12 {
  margin-bottom: .5em;
  padding-right: 1.5%;
  padding-left: 1.5%;
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 38px;
}

.e-form-col0_5 > *:last-child,
.e-form-col1 > *:last-child,
.e-form-col2 > *:last-child,
.e-form-col3 > *:last-child,
.e-form-col4 > *:last-child,
.e-form-col5 > *:last-child,
.e-form-col6 > *:last-child,
.e-form-col7 > *:last-child,
.e-form-col8 > *:last-child,
.e-form-col9 > *:last-child,
.e-form-col10 > *:last-child,
.e-form-col11 > *:last-child,
.e-form-col12 > *:last-child {
  margin-bottom: 0;
}

.e-form-text-dash {
  line-height: 38px;
  text-align: center;
  display: block;
}

.e-form-col0_5 {
  width: 4.1666666665%;
}

.e-form-col1 {
  width: 8.333333333%;
}

.e-form-col2 {
  width: 16.666666666%;
}

.e-form-col3 {
  width: 24.999999999%;
}

.e-form-col4 {
  width: 33.333333332%;
}

.e-form-col5 {
  width: 41.666666665%;
}

.e-form-col6 {
  width: 49.999999998%;
}

.e-form-col7 {
  width: 58.333333331%;
}

.e-form-col8 {
  width: 66.666666664%;
}

.e-form-col9 {
  width: 74.999999997%;
}

.e-form-col10 {
  width: 83.33333333%;
}

.e-form-col11 {
  width: 91.666666663%;
}

.e-form-col12 {
  width: 99.999999996%;
}

/* Lib
   ========================================================================== */
.e-required-countdown-group {
  position: fixed;
  top: 30vh;
  right: 0;
  background-color: #cc3e4c;
  color: #ffffff;
  text-align: center;
  z-index: 99;
}

.e-required-countdown-group__inner {
  padding: .6rem;
}

.e-required-countdown-group__text {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.4;
}

.e-required-countdown-group__num {
  font-size: 2.75rem;
  line-height: 1.3;
}

.e-required-countdown-group__num--hidden {
  display: none;
}

/* Z-INDEX */
.formError {
  display: block;
  position: absolute;
  top: 300px;
  left: 300px;
  text-align: left;
  cursor: pointer;
  z-index: 990;
}

.formErrorContent {
  position: relative;
  width: 100%;
  min-width: 120px;
  padding: 4px 10px;
  border-radius: 4px;
  background: #cc3e4c;
  background: #cc3e4c;
  color: #ffffff;
  z-index: 991;
  top: 5px;
}

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

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



```html_example

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

```


*/
.e-media {
  margin-bottom: 24px;
  color: inherit;
  display: block;
}

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

.e-media > a .e-media__img {
  -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-media > a:hover .e-media__img, .e-media > a:focus .e-media__img {
  -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.e-media > a:active .e-media__img {
  -webkit-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

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

.e-media__img {
  margin-right: 16px;
  float: left;
  width: 110px;
}

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

.e-media__img img {
  -o-object-fit: cover;
     object-fit: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.e-media__body {
  overflow: hidden;
}

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

.e-media__label {
  margin-bottom: 3px;
  width: 100%;
  display: inline-block;
}

.e-media__title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  line-height: 1.4;
  margin-top: -.2em;
}

.e-media__text {
  font-size: 14px;
}

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

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

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


```html_example

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

```

*/
.e-card {
  color: inherit;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 24px;
}

.e-card > a {
  width: 100%;
  display: block;
  color: inherit;
  height: inherit;
  text-decoration: none;
}

.e-card > a:hover, .e-card > a:focus {
  opacity: 0.6;
}

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

.e-card__body {
  padding-top: 22px;
  position: relative;
}

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

.e-card__title {
  font-weight: bold;
  line-height: 1.4;
  font-size: 20px;
  margin-bottom: 10px;
}

.e-card__text {
  font-size: 14px;
  line-height: 1.7;
}

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

/* ==========================================================================
   #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 {
  padding: 0 16px;
}

.c-breadcrumb__inner {
  max-width: 1000px;
  margin: 70px auto 70px;
  font-size: 12px;
}

.c-breadcrumb__inner i {
  color: #757575;
  font-size: 1.125rem;
  vertical-align: middle;
  margin-right: -.3em;
}

.c-breadcrumb__inner a {
  text-decoration: none;
  color: #1A1A1A;
}

.c-breadcrumb__inner > * {
  display: inline-block;
}

.c-breadcrumb__inner > *:before {
  content: "/";
  padding-right: .5em;
  padding-left: .5em;
  /*
        margin-right: 24px;
        margin-left: 16px;
        display: inline-block;
        width: 4px;
        height: 4px;
        transform: rotate(45deg);
        border-style: solid;
        border-color: $dividers-color;
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 0;
        border-left-width: 0;
        content: "";
  */
}

.c-breadcrumb__inner > *:first-child:before {
  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: #192f60;
}

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

```html_example
<p class="c-to-top" data-scroll="to-top">
  <a href="#skippy"><span>ページトップへ</span></a>
</p>
```
*/
.c-to-top {
  display: block;
  position: fixed;
  right: 15px;
  bottom: 80px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 78px;
  height: 78px;
  z-index: 8888;
  cursor: pointer;
}

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

```html_example
<div class="c-pagenavi">
  <p class="c-pagenavi__title">100件中　11 - 20件表示</p>

  <div class="c-pagenavi__body">
    <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>
    <span class="c-extend">...</span>
    <a href="">10</a>
    <a class="c-nextpostslink" rel="next" href=""></a>
  </div>
</div>

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

.c-pagenavi__title {
  font-size: 12px;
  margin-bottom: 20px;
}

.c-pagenavi__body {
  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;
}

.c-pagenavi .cur,
.c-pagenavi .is-current,
.c-pagenavi .c-extend,
.c-pagenavi a {
  margin-left: 0;
  margin-bottom: 10px;
  display: inline-block;
  min-width: 30px;
  height: 30px;
  -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: #ffffff;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #DEDEDE;
  color: #757575;
  margin-right: -1px;
}

.c-pagenavi .cur:first-child,
.c-pagenavi .is-current:first-child,
.c-pagenavi .c-extend:first-child,
.c-pagenavi a:first-child {
  border-left: 1px solid #DEDEDE;
}

.c-pagenavi .cur,
.c-pagenavi .is-current,
.c-pagenavi a:hover {
  border: 1px solid #DEDEDE;
  background-color: #192f60;
  color: #ffffff;
}

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

.c-pagenavi .c-extend {
  border-top-width: 0;
  border-bottom-width: 0;
}

.c-pagenavi .c-previouspostslink,
.c-pagenavi .c-nextpostslink {
  position: relative;
  background-color: #fafafa;
}

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

.c-pagenavi .c-previouspostslink {
  margin-right: 16px;
}

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

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

.c-pagenavi .c-nextpostslink {
  margin-left: 16px;
}

/*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"><a href="" class="is-disabled"><i class="material-icons">chevron_left</i> 前へ</a></li>
      <li class="c-pager__to-list"><a href="">一覧</a></li>
      <li class="c-pager__next"><a href="">次へ<i class="material-icons">chevron_right</i></a></li>
    </ul>
  </div>


```
*/
.c-pager {
  border-top: 1px solid #DEDEDE;
  margin-bottom: 24px;
  padding-top: 24px;
}

.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__prev i, .c-pager__next i {
  top: .15em;
  position: relative;
}

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

```html_example

   <ul class="c-headline">
    <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。<span class="is-new">New<span></a></p>
    </li>
     <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
    </li>
     <li class="c-headline__item">
      <span class="c-headline__date">2017.10.01 </span>
      <p class="c-headline__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
    </li>

   </ul>

```
*/
.c-headline {
  border-top: 1px solid #DEDEDE;
  margin-bottom: 24px;
}

.c-headline__item {
  line-height: 1.4;
  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;
  -webkit-box-align: top;
      -ms-flex-align: top;
          align-items: top;
  border-bottom: 1px solid #DEDEDE;
  padding: 24px 16px 20px 16px;
}

.c-headline__item a {
  color: #1A1A1A;
  text-decoration: none;
}

.c-headline__item a:hover {
  text-decoration: underline;
}

.c-headline__date {
  margin: .1em 1em .1em 0;
  font-size: 14px;
  color: #757575;
  white-space: nowrap;
}

.c-headline__label {
  margin-right: 1em;
  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-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.c-headline__label span {
  font-size: 12px;
  width: 82px;
  display: inline-block;
  padding: 1px 3px;
  background: #21296A;
  color: #fff;
  white-space: nowrap;
  text-align: center;
}

.c-headline__label .is-event {
  background: #E31666;
}

.c-headline__label .is-goods {
  background: #0000cd;
}

.c-headline__title {
  font-weight: bold;
}

/*doc
---
title: headline-search
name: headline-search
categories: [components, headline]
parent: headline
---

```html_example

   <ul class="c-headline-search">
    <li class="c-headline-search__item">
      <p class="c-headline-search__title"><a href="">ニュースタイトルが入りますニュースタイトルが入ります。ニュースタイトルが入りますニュースタイトルが入ります。</a></p>
      <p class="c-headline-search__url">news/index.html</p>
      <p class="c-headline-search__text">ニュースニュースニュースニュース<span class="c-headline-search__sub-text"> 2018.01.01</span></p>
    </li>
   </ul>

```
*/
.c-headline-search {
  margin-bottom: 24px;
}

.c-headline-search__item {
  margin-bottom: 36px;
}

.c-headline-search__item a {
  text-decoration: none;
}

.c-headline-search__item a:hover {
  text-decoration: underline;
}

.c-headline-search__title {
  font-size: 20px;
  font-weight: bold;
  color: #1A1A1A;
  margin-bottom: 6px;
}

.c-headline-search__title a {
  color: inherit;
}

.c-headline-search__url {
  font-size: 14px;
  color: #6f9614;
  line-height: 1;
  margin-bottom: 10px;
}

.c-headline-search__text {
  font-size: 14px;
  display: inline;
  margin-right: .5em;
}

.c-headline-search__sub-text {
  font-size: 12px;
  color: #757575;
  display: inline;
}

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

```html_example
<div class="c-menu">
  <h3 class="c-menu__title">カテゴリー名</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__title {
  color: #192f60;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding-bottom: 10px;
  border-bottom: 3px solid #192f60;
}

.c-menu__list {
  margin-top: 8px;
  margin-bottom: 24px;
}

.c-menu__list a {
  border-bottom: 1px solid #DEDEDE;
  font-size: 14px;
  padding: 12px 16px 12px 16px;
  display: block;
  text-decoration: none;
  color: #1A1A1A;
}

.c-menu__list a:hover, .c-menu__list a.is-active, .c-menu__list a.stay {
  color: #192f60;
}

.c-menu__list a:focus {
  outline-offset: -3px;
}

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

.c-menu__list-tag {
  margin-top: 8px;
  margin-bottom: 24px;
}

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

```html_example
<div class="c-anchor-nav">
  <div class="c-anchor-nav__body">
    <p class="c-anchor-nav__title">コンテンツ</p>
    <ul data-scroll>
      <li><a href="#accordion">accordion</a></li>
      <li><a href="#calendar">calendar</a></li>
    </ul>
  </div>
</div>
```

*/
.visual-editor .c-anchor-nav,
.c-anchor-nav {
  border: 1px solid #DEDEDE;
  margin-bottom: 24px;
}

.visual-editor .c-anchor-nav__body,
.c-anchor-nav__body {
  padding: 1.6rem 1.6rem 1.2rem;
  position: relative;
}

.visual-editor .c-anchor-nav__title,
.c-anchor-nav__title {
  color: #757575;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: -5px;
  margin-bottom: 10px;
  line-height: 1;
}

.visual-editor .c-anchor-nav ul,
.c-anchor-nav ul {
  margin-left: 0;
  margin-bottom: 0;
}

.visual-editor .c-anchor-nav li,
.c-anchor-nav li {
  list-style: none;
  margin-bottom: .4em;
}

.visual-editor .c-anchor-nav li:last-child,
.c-anchor-nav li:last-child {
  margin-bottom: 0;
}

.visual-editor .c-anchor-nav li a,
.c-anchor-nav li a {
  text-indent: -.6em;
  padding-left: 1em;
  display: inline-block;
  overflow: hidden;
}

.visual-editor .c-anchor-nav li a:before,
.c-anchor-nav li a:before {
  display: inline-block;
  width: 5px;
  height: 5px;
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  border-top: 1px solid #757575;
  border-left: 1px solid #757575;
  content: "";
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin-right: 7px;
}

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

```html_example


  <ul class="c-summary1">
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
   <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
         <li class="c-summary__item e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
  </ul>



```
*/
.c-summary1 {
  margin-left: -1.3422818792%;
  margin-right: -1.3422818792%;
  -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-summary1 .c-summary__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 22.3154362416%;
          flex: 0 0 22.3154362416%;
  margin-left: 1.3422818792%;
  margin-right: 1.3422818792%;
  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-summary1 .c-summary__item > *:last-child {
  margin-bottom: 0;
}

.c-summary2 {
  margin-left: -1.0067114094%;
  margin-right: -1.0067114094%;
  -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-summary2 .c-summary__item {
  margin-bottom: 36px;
}

.c-summary2 .c-summary__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 47.9865771812%;
          flex: 0 0 47.9865771812%;
  margin-left: 1.0067114094%;
  margin-right: 1.0067114094%;
  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-summary2 .c-summary__item > *:last-child {
  margin-bottom: 0;
}

.c-summary3 {
  margin-left: -1.0067114094%;
  margin-right: -1.0067114094%;
  -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-summary3 .c-summary__item {
  margin-bottom: 36px;
}

.c-summary3 .c-summary__item {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 31.3199105145%;
          flex: 0 0 31.3199105145%;
  margin-left: 1.0067114094%;
  margin-right: 1.0067114094%;
  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-summary3 .c-summary__item > *:last-child {
  margin-bottom: 0;
}

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



<h3 class="styleguide">Keyword Search</h3>

```html_example
<div class="c-keyword-search" role="search">
  <div class="c-keyword-search__body">
    <p class="c-keyword-search__title">検索キーワード</p>
    <input type="text" name="#" class="c-keyword-search__input" value="" placeholder="キーワードを入力してください" autocomplete="off" aria-autocomplete="list" role="textbox">
    <button type="submit" class="c-keyword-search__button"><i class="material-icons">search</i></button>
  </div>
  <div class="c-keyword-search__control">
    <p class="c-keyword-search__control-lead">100アイテムが検索キーワードに該当</p>
    <div class="c-keyword-search__control-item">
      <p class="c-keyword-search__control-title">絞り込み</p>
      <select class="c-keyword-search__control-select">
        <option>すべて</option>
        <option>すべて</option>
        <option>すべて</option>
        <option>すべて</option>
      </select>
    </div>
    <div class="c-keyword-search__control-item">
      <p class="c-keyword-search__control-title">ソート</p>
      <select class="c-keyword-search__control-select">
        <option>関連度</option>
        <option>関連度</option>
        <option>関連度</option>
        <option>関連度</option>
      </select>
    </div>
  </div>
</div>
```
*/
/*


*/
.c-keyword-search {
  overflow: hidden;
  background-color: #fafafa;
  border-radius: 4px;
  padding: 25px 21px 25px 21px;
  margin-bottom: 24px;
}

.c-keyword-search__body {
  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;
  position: relative;
}

.c-keyword-search__title {
  color: #222222;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  margin-right: 20px;
}

.c-keyword-search__input {
  width: 70%;
  padding: 10px 1.5em 10px 15px;
  border: 0;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.c-keyword-search__button {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-weight: normal;
  margin: 0;
  border: 0;
  position: absolute;
  right: 0;
  bottom: .5em;
  background-color: transparent;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.c-keyword-search__control {
  margin-top: 1em;
  font-size: 14px;
  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;
}

.c-keyword-search__control-item {
  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;
}

.c-keyword-search__control-item:before {
  text-align: center;
  content: "|";
  color: #9E9E9E;
  width: 1em;
  padding-right: 1em;
  padding-left: 1em;
}

.c-keyword-search__control-title {
  font-weight: bold;
}

.c-keyword-search__control-select {
  border: 0;
  margin-left: 10px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: 15px;
  background: transparent url("../img/form/form_icon_select_top.svg") right 0 center no-repeat;
  text-align: left;
  text-indent: .01px;
  text-overflow: "";
  cursor: pointer;
}

.c-keyword-search__control-select::-ms-expand {
  display: none;
}

.c-keyword-search__control-select:focus {
  background-image: url("../img/form/form_icon_select_top.svg");
}

.l-block-widget .c-keyword-search {
  font-size: 14px;
}

.l-block-widget .c-keyword-search__button {
  width: 54px;
}

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

<div class="c-accordion" data-accordion data-device-accordion="tab">
 <button type="button" class="c-accordion__title" aria-controls="accordion3" aria-expanded="true" aria-label="開く" data-toggle-accordion>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った - TAB</button>
 <div id="accordion3" class="c-accordion__body" aria-hidden="true" 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" 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>Javascript</button>
    <div class="c-accordion__body" aria-hidden="true" data-body-accordion>
  <ul class="list list--disc">
    <li>data-accordion class="is-active"</li>
    <li>data-toggle-accordion</li>
    <li>data-body-accordion </li>
    <li>data-device-accordion = `all`, `pc`, `tab`, `sp`</li>
  </ul>
    </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" 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: #ffffff;
  margin-bottom: 24px;
}

.c-accordion__title {
  display: block;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 20px;
  -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: 18px 35px 18px 20px;
  border: 1px solid #DEDEDE;
  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.6;
}

.c-accordion__title:hover, .c-accordion__title:focus {
  background-color: #DEDEDE;
}

.c-accordion__title {
  position: relative;
  overflow: hidden;
}

.c-accordion__title:after {
  vertical-align: middle;
  content: 'add';
  color: #1A1A1A;
  text-align: right;
  font-size: 1.5rem !important;
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}

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

.c-accordion__title2 {
  position: relative;
  overflow: hidden;
}

.c-accordion__title2:after {
  display: inline-block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-top: 1px solid #1A1A1A;
  border-left: 1px solid #1A1A1A;
  content: "";
  vertical-align: middle;
  position: absolute;
  right: 20px;
  top: 4px;
  bottom: 0;
  margin: auto;
}

.c-accordion__title2[aria-expanded="false"]:after {
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  top: -4px;
}

.c-accordion__body {
  border: 1px solid #DEDEDE;
  border-top: 0;
  padding: 25px 20px;
  font-size: 20px;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-accordion__body[aria-hidden="true"] {
  display: none;
}

.c-accordion__body[aria-hidden="false"] {
  display: block;
}

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

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

.c-accordion--faq .c-accordion__body {
  padding-left: 4rem;
  position: relative;
}

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

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

```html_example

<div class="c-tab" data-tab>
  <ul class="c-tab__nav" role="tablist">
    <li id="aria-tab-nav1" role="tab" tabindex="0" aria-selected="true"><button type="button" data-tablist aria-controls="area-tab-panel1">タイトル1</button></li>
    <li id="aria-tab-nav2" role="tab" tabindex="-1" aria-selected="false"><button type="button" data-tablist aria-controls="area-tab-panel2">タイトル2</button></li>
    <li id="aria-tab-nav3" role="tab" tabindex="-1" aria-selected="false"><button type="button" data-tablist aria-controls="area-tab-panel3">タイトル3</button></li>
  </ul>
  <div class="c-tab__body">
    <div data-tabpanel id="area-tab-panel1" aria-labelledby="aria-tab-nav1" aria-hidden="false" role="tabpanel">タイトル1</div>
    <div data-tabpanel id="area-tab-panel2" aria-labelledby="aria-tab-nav2" aria-hidden="true" role="tabpanel">タイトル2</div>
    <div data-tabpanel id="area-tab-panel3" aria-labelledby="aria-tab-nav3" aria-hidden="true" role="tabpanel">タイトル3</div>
  </div>
</div>


```

*/
.c-tab {
  background-color: #ffffff;
  list-style-position: outside;
  margin-bottom: 24px;
}

.c-tab [data-tabpanel][aria-hidden="true"] {
  opacity: 0;
  height: 0;
  z-index: -1;
  position: relative;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-tab [data-tabpanel][aria-hidden="false"] {
  height: auto;
  opacity: 1;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.c-tab__nav {
  overflow: auto;
  white-space: nowrap;
  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;
}

.c-tab__nav li {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  border-right: 1px solid #DEDEDE;
}

.c-tab__nav li:first-child {
  border-left: 1px solid #DEDEDE;
}

.c-tab__nav li button,
.c-tab__nav li a {
  background-color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  line-height: 1;
  border: 0;
  border-radius: 0;
  display: block;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 auto;
  font-weight: normal;
  color: #9E9E9E;
  width: 100%;
  border-top: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
}

.c-tab__nav li button:hover,
.c-tab__nav li[aria-selected="true"] button,
.c-tab__nav li.is-active button,
.c-tab__nav li a:hover,
.c-tab__nav li[aria-selected="true"] a,
.c-tab__nav li.is-active a {
  color: #1A1A1A;
  border-color: #192f60;
  border-top-width: 2px;
  border-bottom-width: 0;
}

.c-tab__body {
  overflow: hidden;
  margin-top: -1px;
  border: 1px solid #DEDEDE;
  padding: 1.5em;
}

.c-tab__to-list {
  text-align: center;
}

.c-tab__to-list a {
  border-radius: 4px;
  background-color: #eef0f4;
  padding: .3em .7em;
  display: inline-block;
  color: #1A1A1A;
  font-size: 14px;
  -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;
}

.c-tab__to-list a:hover {
  text-decoration: none;
  -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.c-tab__to-list a:active {
  text-decoration: none;
  -webkit-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

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

```html_example



<!-- ボタン領域 -->
<div class="e-button-group">
<button type="button" class="e-button" data-open-modal aria-controls="area-modal-dialog1" aria-expanded="false" aria-label="開く">Modal Dialogを開く</button>
</div>
<div class="e-box" data-clone-modal="area-modal-dialog1">
<div class="e-box__body">
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
</div>
</div>

<!-- コンテンツ領域 -->
  <div class="c-modal-dialog" id="area-modal-dialog1" data-modal role="dialog" tabindex="-1" aria-hidden="true">
    <div class="c-modal-dialog__scroll" role="document">
      <div class="c-modal-dialog__body">

        <h3 class="c-modal-dialog__title">情に棹させば流される智に働けば角が立つ 18px</h3>
        <div data-append-modal>
          <!--  data-append-modal内はdata-clone-modal="aria-controls名"を表示 -->
        </div>
        <div class="c-modal-dialog__button-group e-button-group">
          <button type="button" class="e-button e-button--secondary" data-close-modal aria-expanded="true" aria-label="キャンセル">キャンセル</button>
          <button type="button" class="e-button e-button--secondary" aria-expanded="true" aria-label="実行する">実行する</button>
        </div>

      </div>
    </div>
    <button type="button" class="c-modal-dialog__close" data-close-modal aria-expanded="true" aria-label="dialogを閉じる">close</button>
  </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>Javascript</button>
    <div class="c-accordion__body" aria-hidden="true" data-body-accordion>
  <ul>
    <li>･data-open-modal</li>
    <li>･data-modal</li>
    <li>･data-close-modal</li>
    <li>･data-clone-modal="aria-controls名"</li>
    <li>･data-append-modal</li>
    <li>･背景暗転はjsで作成します。</li>
  </ul>
    </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" data-body-accordion>
  <ul>
    <li>･表示領域の操作はマウスとキーボードの両方で使用可能です。</li>
    <li>･ボタン領域の属性は、aria-expanded = `true`または`false`を設定します（必須）。</li>
    <li>･ボタン領域の属性は、aria-label = `開く`または`閉じる`など適宜設定します（必須）。</li>
    <li>･ボタン領域にaria-controls = `id名`、コンテンツ領域に該当する`id名`を設定し、表示領域の関連付けを設定します（必須）。</li>
    <li>･コンテンツ領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`を設定します（必須）。</li>
    <li>･コンテンツ領域の属性は、対応するボタン領域の属性に応じて、tabindex=`-1`または`1`を設定します（必須）。</li>
    <li>･背景暗転下領域の属性は、対応するボタン領域の属性に応じて、aria-hidden= `true`または`false`を設定します（必須）。</li>
    <li>･コンテンツ領域は role="dialog"設定します（必須）。</li>
    <li>･コンテンツのドキュメント領域は role="document"を設定します（必須）。</li>
  </ul>
    </div>
</div>

*/
.c-modal-dialog {
  display: none;
  z-index: 99999;
  position: fixed;
  top: 15%;
  left: 0;
  right: 0;
  padding: 25px;
  background-color: #ffffff;
  border-radius: 4px;
  width: 842px;
  margin: auto;
  overflow: hidden;
  -webkit-box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px 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;
}

.c-modal-dialog__scroll {
  padding-right: 15px;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
}

.c-modal-dialog__close {
  color: #ffffff;
  border: none;
  display: block;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  cursor: pointer;
  margin: 0 auto;
  position: absolute;
  top: -20px;
  right: 0;
  background-color: transparent;
  padding: 0;
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}

.c-modal-dialog__close:before, .c-modal-dialog__close:after {
  content: '';
  top: 8px;
  left: 0;
  display: block;
  position: absolute;
  height: 2px;
  width: inherit;
  background: #fff;
  border-radius: 9px;
  -webkit-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

.c-modal-dialog__close:before {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}

.c-modal-dialog__close:after {
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.c-modal-dialog__body {
  max-height: 50vh;
}

.c-modal-dialog__body > *:last-child {
  margin-bottom: 0;
}

.c-modal-dialog__title {
  font-weight: bold;
  margin-bottom: 1rem;
  font-size: 20px;
}

.c-modal-dialog__button-group {
  margin-top: 24px;
}

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

```html_example

<div class="swiper-main">
  <div id="js-swiper-main" class="swiper-container">
    <ul class="swiper-wrapper">
      <li class="swiper-slide">
        <a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
      </li>
      <li class="swiper-slide">
        <a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
      </li>
      <li class="swiper-slide">
        <a href=""><img src="/assets/img/top/main-visual.png" alt=""></a>
      </li>
    </ul>

    <div class="swiper-controls">
      <button class="swiper-start on"><i class="material-icons">play_arrow</i></button>
      <button class="swiper-stop"><i class="material-icons">pause</i></button>
    </div>

  </div>
  <div class="swiper-pagination"></div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" />
<script  src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>

    var swiperMain = new Swiper('#js-swiper-main', {
      pagination: '.swiper-main .swiper-pagination',
      paginationClickable: true,
      centeredSlides: false,
      loop: true,
      loopAdditionalSlides: 1,
      spaceBetween: 0,
      slidesPerView: 1,
      autoplay: 3000,
      onInit() {
        var start = $('.swiper-main .swiper-start');
        var stop = $('.swiper-main .swiper-stop');
        start.on('click', function()  {
          if (!start.hasClass('on')) {
            swiperMain.startAutoplay();
            start.addClass('on');
            stop.removeClass('on');
          }
        });
        stop.on('click', function() {
          if (!stop.hasClass('on')) {
            swiperMain.stopAutoplay();
            stop.addClass('on');
            start.removeClass('on');
          }
        });
      }
    });


</script>




```
*/
.swiper-main {
  position: relative;
}

.swiper-main .swiper-slide {
  text-align: center;
}

.swiper-main .swiper-slide img {
  width: 100%;
}

.swiper-main .swiper-container {
  position: relative;
}

.swiper-main .swiper-controls {
  background-color: #192f60;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
}

.swiper-main .swiper-start,
.swiper-main .swiper-stop {
  padding: 9px 3px 7px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  opacity: .3;
}

.swiper-main .swiper-start i,
.swiper-main .swiper-stop i {
  font-size: 20px;
}

.swiper-main .swiper-start.on,
.swiper-main .swiper-stop.on {
  opacity: 1;
}

.swiper-main .swiper-pagination-bullets {
  position: absolute;
  left: 50%;
  bottom: 100px;
}

.swiper-main .swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: #fafafa;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  opacity: 1;
}

.swiper-main .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #192f60;
}

/*doc
---
title: carousel-3to1
name: carousel-3to1
categories: [js, carousel]
parent: carousel
---


```html_example

<div class="swiper-3to2to1">
  <div id="js-swiper-3to2to1" class="swiper-container">
    <ul class="swiper-wrapper">
      <li class="swiper-slide e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
      <li class="swiper-slide e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
      <li class="swiper-slide e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
      <li class="swiper-slide e-card">
        <a href="">
          <div class="e-card__img"><img src="/assets/img/common/card.png" alt=""></div>
          <div class="e-card__body">
            <p class="e-card__title">タイトル</p>
            <p class="e-card__text">テキストテキストテキストテキストテキスト</p>
          </div>
        </a>
      </li>
    </ul>
    <div class="swiper-pagination"></div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css" />
<script  src="http://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>
<script>

    var swiper3to2to1 = new Swiper('#js-swiper-3to2to1', {
      pagination: '.swiper-3to2to1 .swiper-pagination',
      paginationClickable: true,
      nextButton: '.swiper-3to2to1 .swiper-button-next',
      prevButton: '.swiper-3to2to1 .swiper-button-prev',
      centeredSlides: false,
      loop: true,
      loopAdditionalSlides: 1,
      spaceBetween: 20,
      slidesPerView: 3,
      autoplay: 0,
      breakpoints: {
        599: {
          centeredSlides: true,
          slidesPerView: 1.5
        }
      }
    });

</script>


```
*/
.swiper-3to2to1 {
  position: relative;
  margin-bottom: 24px;
}

.swiper-3to2to1 .swiper-wrapper {
  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;
}

.swiper-3to2to1 .swiper-button-prev,
.swiper-3to2to1 .swiper-button-next {
  top: -20%;
  bottom: 0;
  margin: auto;
  background-size: 13px 22px;
  width: 13px;
  height: 22px;
}

.swiper-3to2to1 .swiper-button-prev {
  left: -27px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}

.swiper-3to2to1 .swiper-button-next {
  right: -27px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23666666'%2F%3E%3C%2Fsvg%3E");
}

.swiper-3to2to1 .swiper-pagination-bullets {
  position: static;
}

.swiper-3to2to1 .swiper-pagination-bullets .swiper-pagination-bullet {
  background-color: #ddd;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  opacity: 1;
}

.swiper-3to2to1 .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: #192f60;
}

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


```html_example

<div>
    <div class="c-control-offcanvas">
          <button
              type="button"
              aria-controls="aria-offcanvas"
              aria-expanded="false"
              aria-label="開く"
              data-toggle-offcanvas>
            <span class="c-control-offcanvas__icon"><span></span><span></span><span></span></span>
            <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>
        <ul class="c-offcanvas__list2">
          <li><a href="">交通アクセス</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__icon {
  display: block;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  overflow: hidden;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}

.c-control-offcanvas__icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: inherit;
  background: #192f60;
  border-radius: 0;
  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: 6px;
  width: 60%;
}

.c-control-offcanvas__icon span:nth-child(3) {
  top: 12px;
  width: 30%;
}

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

[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: 8px;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
  width: inherit;
}

.c-control-offcanvas__title {
  display: block;
  font-size: 10px;
  color: #fff;
}

.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: #fff;
  z-index: 9999;
}

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

.c-offcanvas__list li a {
  line-height: 1.4;
  border-radius: 0;
  font-size: 14px;
  font-weight: bold;
  color: #1A1A1A;
  padding: 16px 10px 16px 30px;
  display: block;
  text-decoration: none;
  position: relative;
}

.c-offcanvas__list li a:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12px;
  margin: auto;
  display: inline-block;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-style: solid;
  border-color: #192f60;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0;
  border-left-width: 0;
  content: "";
  vertical-align: middle;
}

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

```html_example

 <button class="js-ripple e-button e-button--secondary" type="button">もっと見る</button>

```

*/
.js-ripple {
  overflow: hidden;
  position: relative;
}

.js-rp-effect {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  opacity: 0;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-animation: 500ms ripple-fg forwards, 500ms ripple-fg-opacity-out forwards;
          animation: 500ms ripple-fg forwards, 500ms ripple-fg-opacity-out forwards;
}

@-webkit-keyframes ripple-fg {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@keyframes ripple-fg {
  to {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

@-webkit-keyframes ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes ripple-fg-opacity-out {
  from {
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@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, .e-box-alert:before, .e-form-error-text:before, .c-accordion__title:after, .is-icon-target-blank:after,
.visual-editor [target="_blank"]:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  /* 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';
  display: none\9;
}

/*doc
---
title: lazy-preloader
name: lazy-preloader
categories: [utilities, lazy-preloader]

---

```html_example

<div class="is-lazy-preloader js-lazy-preloader">
  <div class="is-lazy-preloader__inner">
    <h4 class="heading4">遅延読み込み</h4>
  </div>
</div>

<script>

$(window).on('load', () => {
  $('.js-lazy-preloader').addClass('fin');
});


</script>

```
*/
.is-lazy-preloader {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.is-lazy-preloader:before {
  content: "";
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  -webkit-transform-origin: 50%;
      -ms-transform-origin: 50%;
          transform-origin: 50%;
  -webkit-animation: preloader-spin 1s steps(12, end) infinite;
          animation: preloader-spin 1s steps(12, end) infinite;
  display: block;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

@-webkit-keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes nojsfadeIn {
  100% {
    opacity: 1;
  }
}

@keyframes nojsfadeIn {
  100% {
    opacity: 1;
  }
}

.is-lazy-preloader.fin:before {
  display: none;
}

.is-lazy-preloader__inner {
  opacity: 0;
  -webkit-animation: nojsfadeIn 1s ease-in-out 5s forwards;
          animation: nojsfadeIn 1s ease-in-out 5s forwards;
}

.fin .is-lazy-preloader__inner {
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

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

```html_example


<p><span class="is-new">New</span></p>

<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-new {
  background-color: #cc3e4c;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  margin-right: 6px;
  text-decoration: none;
  display: inline-block;
}

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

.is-icon-target-blank:after,
.visual-editor [target="_blank"]:after {
  vertical-align: middle;
  content: "open_in_new";
  color: #757575;
  margin-left: .3em;
  min-width: 1em;
  text-align: right;
}

.e-button--accent.is-icon-target-blank:after,
.e-button--primary.is-icon-target-blank:after,
.entry-btn-attention.is-icon-target-blank:after,
.e-button--accent[target="_blank"]:after,
.e-button--primary[target="_blank"]:after,
.visual-editor .entry-btn-attention[target="_blank"]:after {
  color: #fff;
}

.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;
  top: .1em;
  position: relative;
}

.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;
}

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

---


<ul class="sg-colors">
  <li>
    <span class="sg-swatch is-layer-dot"></span>
    <span class="sg-label">Layer Dot</span>
    <span class="sg-label-sub">.is-layer-dot > &__float-chamber{-abs}</span>
  </li>

</ul>


*/
.is-layer-dot {
  position: relative;
}

.is-layer-dot:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: radial-gradient(#000 20%, transparent 0), radial-gradient(#000 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 4px 4px;
}

.is-layer-dot__float-chamber {
  position: relative;
  z-index: 99;
}

.is-layer-dot__float-chamber-abs {
  position: absolute;
  z-index: 99;
}

/*doc
---
title:  Stripe
name: texture1
categories: [utilities, texture]
parent: texture
---

<ul class="sg-colors">
  <li>
    <span class="sg-swatch is-bg-stripe"></span>
    <span class="sg-label">Stripe</span>
    <span class="sg-label-sub">.is-bg-stripe</span>
  </li>
</ul>


*/
.is-bg-stripe {
  background: repeating-linear-gradient(-45deg, #f4f4f4, #f4f4f4 3px, #fff 0, #fff 5px);
}

/* @ 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: #ffffff;
  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-primary-light {
  color: #fafafa !important;
}

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

.is-color-primary {
  color: #192f60 !important;
}

.is-bg-color-primary {
  background-color: #192f60 !important;
}

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

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

.is-color-secondary {
  color: #192f60 !important;
}

.is-bg-color-secondary {
  background-color: #192f60 !important;
}

.is-color-text {
  color: #1A1A1A !important;
}

.is-bg-color-text {
  background-color: #1A1A1A !important;
}

.is-color-text-sub {
  color: #757575 !important;
}

.is-bg-color-text-sub {
  background-color: #757575 !important;
}

.is-color-text-week {
  color: #9E9E9E !important;
}

.is-bg-color-text-week {
  background-color: #9E9E9E !important;
}

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

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

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

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

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

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

.is-color-link {
  color: #1A1A1A !important;
}

.is-bg-color-link {
  background-color: #1A1A1A !important;
}

.is-color-link-visited {
  color: #1A1A1A !important;
}

.is-bg-color-link-visited {
  background-color: #1A1A1A !important;
}

.is-color-link-hover {
  color: #192f60 !important;
}

.is-bg-color-link-hover {
  background-color: #192f60 !important;
}

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

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

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

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

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

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

.is-color-info {
  color: #478fbb !important;
}

.is-bg-color-info {
  background-color: #478fbb !important;
}

/* @ 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-visible-ib`            |  表示
 `is-hidden`             |  非表示
 `is-sr-only`        |
 `is-float-left`        |
 `is-float-right`        |
 `is-float-clear`                |
 `is-flex-center`        |
 `is-flex-start`        |
 `is-flex-end`          |
 `is-space-between`     |
 `is-inline`           |
 `is-ib`                |
 `is-block`             |
 `is-br`                |
 `is-w100p`                |

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

.is-hidden {
  display: none;
}

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

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

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

.is-float-clear::after,
.clearfloat::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-inline {
  display: inline;
}

.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: 12px !important;
}

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

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

.is-mb-large {
  margin-bottom: 48px !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: #192f60;
  -webkit-box-shadow: 0 3px 8px #aaacac;
          box-shadow: 0 3px 8px #aaacac;
}

.sg-header__inner {
  padding-top: 20px;
  max-width: 1192px;
  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-heading2 {
  color: #192f60;
  font-size: 18px;
  padding-bottom: 5px;
  margin-bottom: 24px;
  border-bottom: 1px solid #192f60;
}

.sg-heading3 {
  color: #192f60
  font-size: 16px;
  padding-left: 1em;
  position: relative;
  margin-bottom: 24px;
}

.sg-heading3:before {
  position: absolute;
  content: '';
  height: 1px;
  width: .5em;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #192f60;
  display: block;
}

.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: #fafafa;
}

.sg-footer {
  background: #192f60;
}

.sg-footer__inner {
  padding-top: 19px;
  padding-bottom: 17px;
  max-width: 1192px;
  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: #757575;
}

.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: #1A1A1A;
  font-size: 18px;
  border-bottom: 1px solid #DEDEDE;
  margin-bottom: 5px;
  padding-bottom: 2px;
}

.sg-widget__title span {
  font-size: 13px;
  color: #9E9E9E;
}

.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: 1192px;
  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: 70.6375838926%;
  margin-left: auto;
  margin-right: auto;
}

.sg-primary-block {
  width: 70.6375838926%;
  float: right;
}

.sg-secondary-block {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  top: 0;
  float: left;
  width: 25.1677852349%;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.sg-heading2 {
  font-size: 26px;
  font-weight: 700;
  color: #192f60;
}

.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: 1192px;
  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;
  text-align: center;
  font-weight: bold;
}

.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: hidden;
}

.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: 3px;
  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: 3px;
}

.sg-colors li:before {
  display: none !important;
}

.sg-swatch {
  display: block;
  height: 4em;
  margin-bottom: 5px;
  border-radius: 3px 3px 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;
}

/* @  Pages
 * ------------------------------------------------------------ */
.top-unit-white,
.top-unit-primary-light {
  padding-top: 65px;
  padding-bottom: 60px;
}

.top-unit-white::after,
.top-unit-primary-light::after {
  content: "";
  display: block;
  clear: both;
}

.top-unit-main-visual .swiper-main .swiper-pagination-bullets {
  position: absolute;
  left: 50%;
  bottom: 70px;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

.top-unit-primary-light {
  background-color: #fafafa;
  margin-right: -100%;
  margin-left: -100%;
  padding-right: 100%;
  padding-left: 100%;
}

.top-unit-map {
  background-color: #fafafa;
  margin-right: -100%;
  margin-left: -100%;
  position: relative;
}

.top-unit-map::after {
  content: "";
  display: block;
  padding-top: 460px;
}

.top-unit-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.top-heading__title {
  font-size: 13px;
  font-weight: 400;
  color: #192f60;
  line-height: 1.4;
  margin-bottom: 13px;
  padding-left: 50px;
}

.top-heading__title .is-text-en {
  font-size: 40px;
  font-weight: 300;
  position: relative;
}

.top-heading__title .is-text-en::before {
  content: "";
  display: block;
  width: 33px;
  height: 2px;
  background: #192f60;
  position: absolute;
  top: 50%;
  left: -50px;
}

.top-heading__lead {
  font-size: 14px;
}

.top-heading--white .top-heading__title {
  color: #fff;
}

.top-heading--white .top-heading__lead {
  color: #fff;
}

.top-unit-pickup {
  background: #fff;
  border-radius: 10px;
  -webkit-box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.1);
  margin-top: -120px;
  margin-bottom: 60px;
  padding: 6.3% 4.5% 2%;
  position: relative;
  z-index: 2;
}

.top-unit-pickup .e-card__img img {
  width: 100%;
  height: auto;
}

.top-unit-pickup .e-card__body {
  padding-top: 22px;
}

.top-unit-pickup .e-card__title {
  color: #192f60;
  font-size: 18px;
  line-height: 1.4;
  padding-left: 10px;
  border-left: solid 3px #192f60;
}

.top-unit-pickup .e-card__text {
  font-size: 14px;
}

.top-unit-pickup .e-card__button {
  text-align: center;
  margin-top: 15px;
  display: none;
}

.top-unit-news {
  width: 48%;
  float: left;
}

.top-unit-twitter {
  width: 48%;
  float: right;
}

.top-unit-access .top-heading,
.top-unit-contact .top-heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.top-unit-access .top-heading__title,
.top-unit-contact .top-heading__title {
  width: 330px;
}

.top-unit-access .top-heading__lead,
.top-unit-contact .top-heading__lead {
  padding-top: 20px;
}

.top-unit-access .top-heading__tel {
  color: #192f60;
  font-size: 18px;
}

.top-unit-access .top-heading__tel a {
  color: inherit;
  text-decoration: none;
  font-size: 1.66em;
}

.top-unit-access .top-heading__access {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 15px;
}

.top-unit-access .top-heading__access dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-right: 20px;
}

.top-unit-access .top-heading__access dl dt {
  background: #192f60;
  color: #fff;
  padding: 2px 15px;
}

.top-unit-access .top-heading__access dl dd {
  color: #192f60;
  padding: 2px 15px;
}

#js-swiper-bnr {
  position: relative;
}

#js-swiper-bnr .swiper-slide a {
  display: block;
}

#js-swiper-bnr .swiper-button-prev,
#js-swiper-bnr .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
}

#js-swiper-bnr .swiper-button-prev,
#js-swiper-bnr .swiper-container-rtl .swiper-button-next {
  left: -40px;
  right: auto;
}

#js-swiper-bnr .swiper-button-next,
#js-swiper-bnr .swiper-container-rtl .swiper-button-prev {
  right: -40px;
  left: auto;
}

.c-page-header {
  background: url("../img/common/bg-pagetitle.png");
  height: 217px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.c-page-header__title {
  width: 1000px;
  font-size: 13px;
  font-weight: 400;
  color: #192f60;
  line-height: 1.4;
  margin-bottom: 13px;
  padding-left: 50px;
}

.c-page-header__title .is-text-en {
  display: block;
  font-size: 40px;
  font-weight: 300;
  position: relative;
}

.c-page-header__title .is-text-en::before {
  content: "";
  display: block;
  width: 33px;
  height: 2px;
  background: #192f60;
  position: absolute;
  top: 50%;
  left: -50px;
}

.visual-editor .e-mainimg-box {
  margin-bottom: 24px;
}

.comments-area {
  margin-top: 50px;
  margin-bottom: 36px;
}

.comments-area .comment-reply-title,
.comments-area .comments-title {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.comments-area .comment-reply-title {
  margin-top: 2rem;
}

.comments-area .comment-list {
  list-style: none;
  margin: 0;
}

.comments-area .comment-list .comment,
.comments-area .comment-list .pingback {
  padding-top: 24px;
  border-top: 1px solid #f8f8f8;
}

.comments-area .comment-list > .depth-1:first-of-type {
  border-top: 0;
}

.comments-area .comment-list .children {
  list-style: none;
}

.comments-area .pingback .comment-body {
  padding-bottom: 24px;
}

.comments-area .bypostauthor > .comment-body {
  background: #f8f8f8;
  padding: 24px 24px 0 24px;
  margin-bottom: 24px;
}

.comments-area .comment .reply {
  padding-bottom: 24px;
  font-weight: bold;
  text-transform: uppercase;
}

.comments-area .comment .reply:empty {
  display: none;
}

.comments-area .comment .reply a {
  border-bottom: 1px solid #c5c5c5;
}

.comments-area .comment .reply a:hover,
.comments-area .comment .reply a:focus,
.comments-area .comment .reply a:active {
  border-bottom-color: #303030;
}

.comments-area .comment-meta {
  margin-bottom: 24px;
}

.comments-area .comment-author .avatar {
  float: left;
  margin-right: 12px;
}

.comments-area .no-comments {
  margin: 0 auto 16px;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 2em;
}

.comments-area .comment-form p {
  margin-bottom: 24px;
}

.comments-area .comment-form textarea {
  padding: 10px 15px;
  -webkit-transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #DEDEDE;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
  color: #1A1A1A;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}

.comments-area .comment-form textarea:focus, .comments-area .comment-form textarea:hover {
  background-color: white;
}

.comments-area .comment-form textarea:focus {
  -webkit-box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
          box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
  outline: 0;
}

.comments-area .comment-form textarea::-webkit-input-placeholder {
  color: #868686;
}

.comments-area .comment-form textarea::-moz-input-placeholder {
  color: #868686;
}

.comments-area .comment-form textarea::-ms-input-placeholder {
  color: #868686;
}

.comments-area .comment-form textarea::-ms-expand {
  display: none;
}

.comments-area .comment-form input[type="text"] {
  padding: 10px 15px;
  -webkit-transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #DEDEDE;
  border-radius: 2px;
  background-color: #fff;
  -webkit-box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0.3px 0.3px 2px rgba(0, 0, 0, 0.1);
  color: #1A1A1A;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
}

.comments-area .comment-form input[type="text"]:focus, .comments-area .comment-form input[type="text"]:hover {
  background-color: white;
}

.comments-area .comment-form input[type="text"]:focus {
  -webkit-box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
          box-shadow: 0 0 3px #3e94cf, 0 0 7px #3e94cf;
  outline: 0;
}

.comments-area .comment-form input[type="text"]::-webkit-input-placeholder {
  color: #868686;
}

.comments-area .comment-form input[type="text"]::-moz-input-placeholder {
  color: #868686;
}

.comments-area .comment-form input[type="text"]::-ms-input-placeholder {
  color: #868686;
}

.comments-area .comment-form input[type="text"]::-ms-expand {
  display: none;
}

.comments-area .comment-form .comment-form-author label,
.comments-area .comment-form .comment-form-email label,
.comments-area .comment-form .comment-form-url label {
  display: inline-block;
  width: 8em;
}

.comments-area .comment-form .comment-form-cookies-consent {
  position: relative;
}

.comments-area .comment-form .comment-form-cookies-consent input {
  position: absolute;
  top: .4em;
  left: 0;
  z-index: 2;
}

.comments-area .comment-form .comment-form-cookies-consent label {
  display: inline-block;
  padding-left: 25px;
}

.comments-area .comment-form .form-submit {
  margin-top: 25px;
}

.comments-area .comment-form .form-submit input[name="submit"] {
  font-weight: bold;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 64px;
  max-width: 100%;
  padding: 1rem 2rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none !important;
  color: #fff !important;
  border: 1px solid #192f60;
  background-color: #192f60;
  border-radius: 0;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.comments-area .comment-form .form-submit input[name="submit"]:hover, .comments-area .comment-form .form-submit input[name="submit"]:focus, .comments-area .comment-form .form-submit input[name="submit"].is-hover {
  text-decoration: none;
  opacity: 0.6;
}

.comments-area .comment-form .form-submit input[name="submit"]:active {
  text-decoration: none;
}

.comments-area .comment-form .form-submit input[name="submit"]:disabled, .comments-area .comment-form .form-submit input[name="submit"].is-disabled {
  cursor: not-allowed;
  color: #666 !important;
  border: 1px solid #DEDEDE;
  background-color: #eee;
}

.comments-area .comment-form .form-submit input[name="submit"] .is-icon-left,
.comments-area .comment-form .form-submit input[name="submit"] .is-icon-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
}

.comments-area .comment-form .form-submit input[name="submit"] .is-icon-left {
  left: .5em;
}

.comments-area .comment-form .form-submit input[name="submit"] .is-icon-right {
  right: .5em;
}

@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 {
    display: none;
  }
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}

@media screen and (max-width: 767.999px) {
  html {
    font-size: 14px;
  }
  .l-footer {
    padding-top: 8px;
  }
  .l-footer ._primary {
    margin-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-footer ._primary ._order1-sp {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .l-footer ._primary ._order2-sp {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .l-footer ._secondary ._copy {
    font-size: 10px;
  }
  .l-footer ._secondary ._copy ._copy-address {
    float: none;
    text-align: center;
  }
  .l-footer ._secondary ._copy ._copy-address span {
    display: block;
    font-size: 12px;
    padding: 5px 0;
  }
  .l-footer ._secondary ._copy ._copy-address span a {
    font-size: 16px;
  }
  .l-footer ._secondary ._copy ._copy-text {
    float: none;
    text-align: center;
  }
  .l-footer ._secondary {
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-footer ._description {
    width: 100%;
    margin-top: 12px;
  }
  .l-footer ._description-title {
    width: 130px;
    margin: 0 auto;
  }
  .l-footer ._nav {
    width: 100%;
  }
  .l-footer ._nav ._nav-title {
    display: block;
  }
  .l-footer ._nav ._nav-body {
    display: block;
  }
  .l-footer ._nav ._nav-body[aria-hidden="true"] {
    display: none;
  }
  .l-footer ._nav ul {
    width: 100%;
    margin-left: 0;
  }
  .l-footer ._nav li {
    margin-bottom: 0;
  }
  .l-footer ._nav li a {
    display: block;
    margin-right: -16px;
    margin-left: -16px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .l-footer ._nav li ul {
    margin-top: 0;
  }
  .l-header ._pc {
    display: none;
  }
  .l-header {
    margin-top: 60px;
  }
  .l-header ._sp {
    height: 60px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    display: block;
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  }
  [data-scroll-pos="is-down"] .l-header ._sp {
    -webkit-transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .l-header ._sp ._primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 16px;
    padding-left: 16px;
    -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;
    position: relative;
  }
  .l-header ._sp ._order1 {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .l-header ._sp ._order2 {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .l-header ._sp ._order3 {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .l-header ._sp ._logo {
    width: 180px;
    margin-top: 15px;
  }
  .l-header ._sp ._nav-control {
    position: absolute;
    z-index: 10000;
    top: 23px;
    right: 20px;
  }
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-block {
    width: 100%;
  }
  .l-block-primary {
    float: none;
    width: 100%;
  }
  .l-block-secondary {
    float: none;
    width: 100%;
  }
  .l-block-secondary:before {
    display: block;
    height: 1px;
    margin-right: -16px;
    margin-bottom: 36px;
    margin-left: -16px;
    content: '';
    background-color: #DEDEDE;
  }
  .l-block-primary .l-cols-tab--break,
  .l-cols-tab--break {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
  .l-block-primary .l-cols-tab--break > .l-col1,
  .l-block-primary .l-cols-tab--break > .l-col2,
  .l-block-primary .l-cols-tab--break > .l-col3,
  .l-block-primary .l-cols-tab--break > .l-col4,
  .l-block-primary .l-cols-tab--break > .l-col5,
  .l-block-primary .l-cols-tab--break > .l-col6,
  .l-block-primary .l-cols-tab--break > .l-col7,
  .l-block-primary .l-cols-tab--break > .l-col8,
  .l-block-primary .l-cols-tab--break > .l-col9,
  .l-block-primary .l-cols-tab--break > .l-col10,
  .l-block-primary .l-cols-tab--break > .l-col11,
  .l-block-primary .l-cols-tab--break > .l-col12,
  .l-cols-tab--break > .l-col1,
  .l-cols-tab--break > .l-col2,
  .l-cols-tab--break > .l-col3,
  .l-cols-tab--break > .l-col4,
  .l-cols-tab--break > .l-col5,
  .l-cols-tab--break > .l-col6,
  .l-cols-tab--break > .l-col7,
  .l-cols-tab--break > .l-col8,
  .l-cols-tab--break > .l-col9,
  .l-cols-tab--break > .l-col10,
  .l-cols-tab--break > .l-col11,
  .l-cols-tab--break > .l-col12 {
    float: none;
    clear: both;
    width: auto;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 4.8%;
  }
  .l-block-primary .l-cols-tab--break > .l-col1::after,
  .l-block-primary .l-cols-tab--break > .l-col2::after,
  .l-block-primary .l-cols-tab--break > .l-col3::after,
  .l-block-primary .l-cols-tab--break > .l-col4::after,
  .l-block-primary .l-cols-tab--break > .l-col5::after,
  .l-block-primary .l-cols-tab--break > .l-col6::after,
  .l-block-primary .l-cols-tab--break > .l-col7::after,
  .l-block-primary .l-cols-tab--break > .l-col8::after,
  .l-block-primary .l-cols-tab--break > .l-col9::after,
  .l-block-primary .l-cols-tab--break > .l-col10::after,
  .l-block-primary .l-cols-tab--break > .l-col11::after,
  .l-block-primary .l-cols-tab--break > .l-col12::after,
  .l-cols-tab--break > .l-col1::after,
  .l-cols-tab--break > .l-col2::after,
  .l-cols-tab--break > .l-col3::after,
  .l-cols-tab--break > .l-col4::after,
  .l-cols-tab--break > .l-col5::after,
  .l-cols-tab--break > .l-col6::after,
  .l-cols-tab--break > .l-col7::after,
  .l-cols-tab--break > .l-col8::after,
  .l-cols-tab--break > .l-col9::after,
  .l-cols-tab--break > .l-col10::after,
  .l-cols-tab--break > .l-col11::after,
  .l-cols-tab--break > .l-col12::after {
    clear: both;
    content: "";
    display: block;
  }
  .is-visible--md {
    display: block;
  }
  .is-visible-ib--md {
    display: inline-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-inline--md {
    display: inline;
  }
  .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-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;
  }
  .top-unit-pickup .e-card__body {
    padding-top: 15px;
  }
  .top-unit-pickup .e-card__title {
    font-size: 16px;
  }
  .top-unit-pickup .e-card__text {
    font-size: 13px;
  }
  .top-unit-news {
    width: auto;
    float: none;
    margin-bottom: 40px;
  }
  .top-unit-twitter {
    width: auto;
    float: none;
  }
  .top-unit-access .top-heading,
  .top-unit-contact .top-heading {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .top-unit-access .top-heading__title,
  .top-unit-contact .top-heading__title {
    width: auto;
  }
  .top-unit-access .top-heading__lead,
  .top-unit-contact .top-heading__lead {
    padding-top: 0;
  }
  .top-unit-contact .e-button-group {
    margin-top: 20px;
  }
  .top-unit-access .top-heading__access dl {
    margin-bottom: 10px;
    padding-right: 0;
  }
  .top-unit-access .top-heading__access dl dt {
    padding: 2px 10px;
  }
  .top-unit-access .top-heading__access dl dd {
    padding: 2px 10px;
  }
  #js-swiper-bnr .swiper-slide a {
    text-align: center;
  }
  .c-page-header {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media screen and (max-width: 599.999px) {
  html {
    font-size: 12px;
  }
  hr {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  pre,
  .e-pre {
    margin-bottom: 12px;
  }
  body,
  html {
    min-width: 320px;
  }
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
  .l-block {
    margin-bottom: 36px;
  }
  .l-block {
    width: 100%;
  }
  .l-block-fluid {
    margin-bottom: 36px;
  }
  .l-block-primary {
    margin-bottom: 36px;
  }
  .l-block-secondary {
    margin-bottom: 36px;
  }
  .l-unit {
    margin-bottom: 24px;
  }
  .visual-editor h2:not(:first-child) {
    margin-top: 4rem;
  }
  .visual-editor h3:not(:first-child),
  .visual-editor h4:not(:first-child) {
    margin-top: 3rem;
  }
  .visual-editor h5:not(:first-child),
  .visual-editor h6:not(:first-child) {
    margin-top: 2rem;
  }
  .size-thumbnail,
  .size-medium {
    max-width: 33.33%;
  }
  .l-block-primary .l-cols,
  .l-cols {
    margin-right: -2.1333333333%;
    margin-left: -2.1333333333%;
  }
  .l-block-primary .l-cols > .l-col1,
  .l-block-primary .l-cols > .l-col2,
  .l-block-primary .l-cols > .l-col3,
  .l-block-primary .l-cols > .l-col4,
  .l-block-primary .l-cols > .l-col5,
  .l-block-primary .l-cols > .l-col6,
  .l-block-primary .l-cols > .l-col7,
  .l-block-primary .l-cols > .l-col8,
  .l-block-primary .l-cols > .l-col9,
  .l-block-primary .l-cols > .l-col10,
  .l-block-primary .l-cols > .l-col11,
  .l-block-primary .l-cols > .l-col12,
  .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 {
    margin-right: 2.1333333333%;
    margin-left: 2.1333333333%;
    margin-bottom: 4.8%;
  }
  .l-block-primary .l-cols > .l-col1,
  .l-cols > .l-col1 {
    width: 4.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset1,
  .l-cols > .is-offset1 {
    margin-left: 10.4666666667%;
  }
  .l-block-primary .l-cols > .l-col1--sm,
  .l-cols > .l-col1--sm {
    width: 4.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset1--sm,
  .l-cols > .is-offset1--sm {
    margin-left: 10.4666666667%;
  }
  .l-block-primary .l-cols > .l-col2,
  .l-cols > .l-col2 {
    width: 12.4%;
  }
  .l-block-primary .l-cols > .is-offset2,
  .l-cols > .is-offset2 {
    margin-left: 18.8%;
  }
  .l-block-primary .l-cols > .l-col2--sm,
  .l-cols > .l-col2--sm {
    width: 12.4%;
  }
  .l-block-primary .l-cols > .is-offset2--sm,
  .l-cols > .is-offset2--sm {
    margin-left: 18.8%;
  }
  .l-block-primary .l-cols > .l-col3,
  .l-cols > .l-col3 {
    width: 20.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset3,
  .l-cols > .is-offset3 {
    margin-left: 27.1333333333%;
  }
  .l-block-primary .l-cols > .l-col3--sm,
  .l-cols > .l-col3--sm {
    width: 20.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset3--sm,
  .l-cols > .is-offset3--sm {
    margin-left: 27.1333333333%;
  }
  .l-block-primary .l-cols > .l-col4,
  .l-cols > .l-col4 {
    width: 29.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset4,
  .l-cols > .is-offset4 {
    margin-left: 35.4666666667%;
  }
  .l-block-primary .l-cols > .l-col4--sm,
  .l-cols > .l-col4--sm {
    width: 29.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset4--sm,
  .l-cols > .is-offset4--sm {
    margin-left: 35.4666666667%;
  }
  .l-block-primary .l-cols > .l-col5,
  .l-cols > .l-col5 {
    width: 37.4%;
  }
  .l-block-primary .l-cols > .is-offset5,
  .l-cols > .is-offset5 {
    margin-left: 43.8%;
  }
  .l-block-primary .l-cols > .l-col5--sm,
  .l-cols > .l-col5--sm {
    width: 37.4%;
  }
  .l-block-primary .l-cols > .is-offset5--sm,
  .l-cols > .is-offset5--sm {
    margin-left: 43.8%;
  }
  .l-block-primary .l-cols > .l-col6,
  .l-cols > .l-col6 {
    width: 45.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset6,
  .l-cols > .is-offset6 {
    margin-left: 52.1333333333%;
  }
  .l-block-primary .l-cols > .l-col6--sm,
  .l-cols > .l-col6--sm {
    width: 45.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset6--sm,
  .l-cols > .is-offset6--sm {
    margin-left: 52.1333333333%;
  }
  .l-block-primary .l-cols > .l-col7,
  .l-cols > .l-col7 {
    width: 54.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset7,
  .l-cols > .is-offset7 {
    margin-left: 60.4666666667%;
  }
  .l-block-primary .l-cols > .l-col7--sm,
  .l-cols > .l-col7--sm {
    width: 54.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset7--sm,
  .l-cols > .is-offset7--sm {
    margin-left: 60.4666666667%;
  }
  .l-block-primary .l-cols > .l-col8,
  .l-cols > .l-col8 {
    width: 62.4%;
  }
  .l-block-primary .l-cols > .is-offset8,
  .l-cols > .is-offset8 {
    margin-left: 68.8%;
  }
  .l-block-primary .l-cols > .l-col8--sm,
  .l-cols > .l-col8--sm {
    width: 62.4%;
  }
  .l-block-primary .l-cols > .is-offset8--sm,
  .l-cols > .is-offset8--sm {
    margin-left: 68.8%;
  }
  .l-block-primary .l-cols > .l-col9,
  .l-cols > .l-col9 {
    width: 70.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset9,
  .l-cols > .is-offset9 {
    margin-left: 77.1333333333%;
  }
  .l-block-primary .l-cols > .l-col9--sm,
  .l-cols > .l-col9--sm {
    width: 70.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset9--sm,
  .l-cols > .is-offset9--sm {
    margin-left: 77.1333333333%;
  }
  .l-block-primary .l-cols > .l-col10,
  .l-cols > .l-col10 {
    width: 79.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset10,
  .l-cols > .is-offset10 {
    margin-left: 85.4666666667%;
  }
  .l-block-primary .l-cols > .l-col10--sm,
  .l-cols > .l-col10--sm {
    width: 79.0666666667%;
  }
  .l-block-primary .l-cols > .is-offset10--sm,
  .l-cols > .is-offset10--sm {
    margin-left: 85.4666666667%;
  }
  .l-block-primary .l-cols > .l-col11,
  .l-cols > .l-col11 {
    width: 87.4%;
  }
  .l-block-primary .l-cols > .is-offset11,
  .l-cols > .is-offset11 {
    margin-left: 93.8%;
  }
  .l-block-primary .l-cols > .l-col11--sm,
  .l-cols > .l-col11--sm {
    width: 87.4%;
  }
  .l-block-primary .l-cols > .is-offset11--sm,
  .l-cols > .is-offset11--sm {
    margin-left: 93.8%;
  }
  .l-block-primary .l-cols > .l-col12,
  .l-cols > .l-col12 {
    width: 95.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset12,
  .l-cols > .is-offset12 {
    margin-left: 102.133333333%;
  }
  .l-block-primary .l-cols > .l-col12--sm,
  .l-cols > .l-col12--sm {
    width: 95.7333333333%;
  }
  .l-block-primary .l-cols > .is-offset12--sm,
  .l-cols > .is-offset12--sm {
    margin-left: 102.133333333%;
  }
  .l-block-primary .l-cols--break,
  .l-cols--break {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
  .l-block-primary .l-cols--break > .l-col1,
  .l-block-primary .l-cols--break > .l-col2,
  .l-block-primary .l-cols--break > .l-col3,
  .l-block-primary .l-cols--break > .l-col4,
  .l-block-primary .l-cols--break > .l-col5,
  .l-block-primary .l-cols--break > .l-col6,
  .l-block-primary .l-cols--break > .l-col7,
  .l-block-primary .l-cols--break > .l-col8,
  .l-block-primary .l-cols--break > .l-col9,
  .l-block-primary .l-cols--break > .l-col10,
  .l-block-primary .l-cols--break > .l-col11,
  .l-block-primary .l-cols--break > .l-col12,
  .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 {
    float: none;
    clear: both;
    width: auto;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 4.8%;
  }
  .l-block-primary .l-cols--break > .l-col1::after,
  .l-block-primary .l-cols--break > .l-col2::after,
  .l-block-primary .l-cols--break > .l-col3::after,
  .l-block-primary .l-cols--break > .l-col4::after,
  .l-block-primary .l-cols--break > .l-col5::after,
  .l-block-primary .l-cols--break > .l-col6::after,
  .l-block-primary .l-cols--break > .l-col7::after,
  .l-block-primary .l-cols--break > .l-col8::after,
  .l-block-primary .l-cols--break > .l-col9::after,
  .l-block-primary .l-cols--break > .l-col10::after,
  .l-block-primary .l-cols--break > .l-col11::after,
  .l-block-primary .l-cols--break > .l-col12::after,
  .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;
  }
  .l-flex-boxes {
    margin-right: -1.7142857143%;
    margin-left: -1.7142857143%;
  }
  .l-flex-box {
    margin-right: 1.7142857143%;
    margin-bottom: 16px;
    margin-left: 1.7142857143%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.5714285714%;
            flex: 0 0 46.5714285714%;
  }
  .l-flex-box--small {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.5714285714%;
            flex: 0 0 46.5714285714%;
  }
  .l-flex-box--medium {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.5714285714%;
            flex: 0 0 46.5714285714%;
  }
  .l-flex-box--large {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 96.5714285714%;
            flex: 1 1 96.5714285714%;
  }
  .l-flex-box--auto {
    -webkit-box-flex: 2;
        -ms-flex: 2 2 15em;
            flex: 2 2 15em;
  }
  .e-box-alert {
    margin-bottom: 12px;
  }
  .e-video-container {
    margin-bottom: 12px;
  }
  .e-video-container iframe {
    height: 30vh;
  }
  .e-gmap {
    margin-bottom: 12px;
  }
  .acms-entry blockquote,
  .visual-editor blockquote,
  .e-blockquote {
    margin-bottom: 12px;
  }
  .acms-entry blockquote,
  .visual-editor blockquote,
  .e-blockquote {
    padding: 42px 15px 42px 15px;
  }
  .acms-entry blockquote:before,
  .visual-editor blockquote:before,
  .e-blockquote:before {
    left: 6px;
  }
  .acms-entry blockquote:after,
  .visual-editor blockquote:after,
  .e-blockquote:after {
    right: 6px;
  }
  .visual-editor h1,
  .e-heading1 {
    font-size: 28px;
  }
  .visual-editor h2,
  .e-heading2 {
    font-size: 24px;
  }
  .visual-editor h3,
  .e-heading3 {
    font-size: 16px;
  }
  .visual-editor h3,
  .e-heading3 {
    padding: 15px 10px 15px 22px;
  }
  .visual-editor h3::before,
  .e-heading3::before {
    width: 7px;
  }
  .visual-editor h4,
  .e-heading4 {
    font-size: 16px;
  }
  .visual-editor h4,
  .e-heading4 {
    padding: 8px 10px 8px 15px;
  }
  .visual-editor h5,
  .e-heading5 {
    font-size: 14px;
  }
  .visual-editor h5,
  .e-heading5 {
    background-size: 14px 14px;
    padding-left: 21px;
  }
  .visual-editor h6,
  .e-heading6 {
    font-size: 12px;
  }
  .e-heading-date {
    margin-bottom: 12px;
  }
  .e-heading-copy {
    margin-bottom: 12px;
  }
  .e-heading-group {
    margin-bottom: 36px;
  }
  .e-heading-group h1,
  .e-heading-group h2,
  .e-heading-group h3,
  .e-heading-group h4,
  .e-heading-group h5,
  .e-heading-group h6 {
    margin-bottom: 18px;
  }
  .e-responsive-img .e-img-box {
    position: relative;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar {
    height: 3px;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar-track {
    background: #d4d4d4;
  }
  .e-responsive-img .e-img-box::-webkit-scrollbar-thumb {
    background: #333;
  }
  .e-responsive-img .e-img-box: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: 12px;
  }
  .e-text-catchcopy {
    margin-bottom: 12px;
  }
  .is-text-point {
    padding-right: 0;
  }
  .visual-editor ul,
  .visual-editor ol,
  .e-list {
    margin-bottom: 12px;
  }
  .visual-editor dl,
  .e-dl {
    margin-bottom: 12px;
  }
  .e-list-inline {
    margin-bottom: 12px;
  }
  .e-list-tag {
    margin-bottom: 12px;
  }
  .e-list-img-vertical {
    margin-bottom: 12px;
  }
  .e-list-img-horizontal {
    margin-left: 0%;
    margin-right: 0%;
    -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;
  }
  .e-list-img-horizontal li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    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;
  }
  .e-list-img-horizontal li > *:last-child {
    margin-bottom: 0;
  }
  [class*="column-table-"] table caption, .visual-editor table caption, .e-table caption, .visual-editor .e-table--borderless caption, .e-table--borderless caption {
    margin-bottom: 12px;
  }
  [class*="column-table-"] table,
  .visual-editor table,
  .e-table, .visual-editor .e-table--borderless,
  .e-table--borderless {
    margin-bottom: 12px;
  }
  
  [class*="column-table-"] table th,
  .visual-editor table th,
  .e-table th,
  .visual-editor .e-table--borderless th,
  .e-table--borderless th {
    width: 30%;
    padding: 10px;
  }
  
  [class*="column-table-"] table td,
  .visual-editor table td,
  .e-table td,
  .visual-editor .e-table--borderless td,
  .e-table--borderless td {
    padding: 10px;
  }
  .visual-editor .e-table--sp-block th,
  .e-table--sp-block th {
    border-bottom: 0;
  }
  .visual-editor .e-table--sp-block th,
  .visual-editor .e-table--sp-block td,
  .e-table--sp-block th,
  .e-table--sp-block td {
    display: block;
    width: auto;
  }
  .visual-editor .e-responsive-table,
  .e-responsive-table {
    position: relative;
    margin-bottom: 12px;
    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;
    min-width: 100%;
  }
  .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 !important;
  }
  .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 !important;
  }
  .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 !important;
  }
  .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 !important;
  }
  .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 !important;
  }
  .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 !important;
  }
  .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 !important;
  }
  .visual-editor .e-responsive-table .is-responsive-cell-30vw,
  .e-responsive-table .is-responsive-cell-30vw {
    white-space: normal !important;
    width: 30vw !important;
  }
  .visual-editor .e-responsive-table .is-responsive-cell-50vw,
  .e-responsive-table .is-responsive-cell-50vw {
    white-space: normal !important;
    width: 50vw !important;
  }
  .e-box {
    margin-bottom: 12px;
  }
  .e-box {
    padding: 1rem;
  }
  .e-button,
  .entry-btn,
  .entry-btn-attention {
    padding: 1rem 1.6rem;
  }
  .e-button--arrow {
    padding: 1rem 3.2rem;
  }
  .e-button-group {
    margin-bottom: 12px;
  }
  .e-button-group {
    display: block;
    margin-right: -0.9501187648%;
    margin-left: -0.9501187648%;
  }
  .e-button-group .e-button {
    margin-right: 0.9501187648%;
    margin-left: 0.9501187648%;
  }
  .e-button-group .e-button--large {
    width: 98.0997624703%;
  }
  .e-button-group--one-half .e-button {
    width: 50%;
  }
  .e-button--large {
    padding: 1.4rem 2rem;
    width: 100%;
    min-width: 31.4330958036%;
  }
  .e-form-rc-box--2col > div,
  .e-form-rc-box--2col > li,
  .e-form-rc-box--2col > span {
    width: 100%;
  }
  .e-form-button-group {
    margin-bottom: 12px;
  }
  .e-form-step {
    margin-bottom: 12px;
  }
  .e-form-step__item {
    padding: .75em .75em .75em 1.8em;
    text-align: center;
  }
  .e-form-step__item:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 0;
  }
  .e-form-step__item span {
    display: inline-block;
    text-indent: -9999px;
  }
  .e-form-table {
    margin-bottom: 12px;
  }
  .e-form-table th {
    border-bottom: 0;
    display: block;
    width: auto;
    padding: 23px 0 0 0;
  }
  .e-form-table td {
    display: block;
    width: auto;
    padding: 8px 0 16px 0;
  }
  .e-form-cols--break > .e-form-col1,
  .e-form-cols--break > .e-form-col2,
  .e-form-cols--break > .e-form-col3,
  .e-form-cols--break > .e-form-col4,
  .e-form-cols--break > .e-form-col5,
  .e-form-cols--break > .e-form-col6,
  .e-form-cols--break > .e-form-col7,
  .e-form-cols--break > .e-form-col8,
  .e-form-cols--break > .e-form-col9,
  .e-form-cols--break > .e-form-col10,
  .e-form-cols--break > .e-form-col11,
  .e-form-cols--break > .e-form-col12 {
    width: auto;
    float: none;
    clear: both;
  }
  .e-form-cols--break > .e-form-col1::after,
  .e-form-cols--break > .e-form-col2::after,
  .e-form-cols--break > .e-form-col3::after,
  .e-form-cols--break > .e-form-col4::after,
  .e-form-cols--break > .e-form-col5::after,
  .e-form-cols--break > .e-form-col6::after,
  .e-form-cols--break > .e-form-col7::after,
  .e-form-cols--break > .e-form-col8::after,
  .e-form-cols--break > .e-form-col9::after,
  .e-form-cols--break > .e-form-col10::after,
  .e-form-cols--break > .e-form-col11::after,
  .e-form-cols--break > .e-form-col12::after {
    clear: both;
    content: "";
    display: block;
  }
  .e-form-col0_5--sm {
    width: 4.1666666665%;
  }
  .e-form-col1--sm {
    width: 8.333333333%;
  }
  .e-form-col2--sm {
    width: 16.666666666%;
  }
  .e-form-col3--sm {
    width: 24.999999999%;
  }
  .e-form-col4--sm {
    width: 33.333333332%;
  }
  .e-form-col5--sm {
    width: 41.666666665%;
  }
  .e-form-col6--sm {
    width: 49.999999998%;
  }
  .e-form-col7--sm {
    width: 58.333333331%;
  }
  .e-form-col8--sm {
    width: 66.666666664%;
  }
  .e-form-col9--sm {
    width: 74.999999997%;
  }
  .e-form-col10--sm {
    width: 83.33333333%;
  }
  .e-form-col11--sm {
    width: 91.666666663%;
  }
  .e-form-col12--sm {
    width: 100%;
  }
  .e-required-countdown-group {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
  }
  .e-required-countdown-group__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;
    padding: .4rem .6rem 0;
  }
  .e-required-countdown-group__text {
    display: inline;
    text-align: left;
    font-size: 1rem;
  }
  .e-required-countdown-group__num {
    display: inline;
    padding-left: 10px;
    font-size: 2.66rem;
  }
  .e-media {
    margin-bottom: 12px;
  }
  .e-media__img {
    width: 80px;
  }
  .e-media__title {
    font-size: 16px;
  }
  .e-media__title {
    margin-bottom: 10px;
  }
  .e-media__text + .e-media__text {
    margin-top: 12px;
  }
  .e-card {
    margin-bottom: 12px;
  }
  .e-card {
    max-width: inherit;
  }
  .e-card__title {
    font-size: 16px;
  }
  .e-card__text + .e-card__text {
    margin-top: 12px;
  }
  .c-breadcrumb__inner {
    font-size: 10px;
    margin: 25px auto 25px;
    white-space: nowrap;
    overflow: scroll;
    -ms-overflow-style: none;
  }
  .c-to-top {
    width: 50px;
    height: 50px;
    bottom: 120px;
  }
  .c-pagenavi {
    margin-bottom: 12px;
  }
  .c-pager {
    margin-bottom: 12px;
    padding-top: 12px;
  }
  .c-headline {
    margin-bottom: 12px;
  }
  .c-headline__item {
    display: block;
    padding: 15px 14px 16px 14px;
  }
  .c-headline__label {
    display: inline;
  }
  .c-headline__label span {
    font-size: 11px;
  }
  .c-headline__title {
    margin-top: .4em;
  }
  .c-headline-search {
    margin-bottom: 12px;
  }
  .c-headline-search__item {
    margin-bottom: 24px;
  }
  .c-headline-search__title {
    font-size: 16px;
  }
  .c-headline-search__title {
    margin-bottom: 0;
  }
  .c-menu__list {
    margin-bottom: 12px;
  }
  .c-menu__list-tag {
    margin-bottom: 12px;
  }
  .visual-editor .c-anchor-nav,
  .c-anchor-nav {
    margin-bottom: 12px;
  }
  .c-summary1 {
    margin-left: -1.3333355556%;
    margin-right: -1.3333355556%;
    -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;
    margin-right: -16px;
    margin-left: -16px;
    padding-left: 16px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -ms-flex-flow: nowrap;
        flex-flow: nowrap;
  }
  .c-summary1 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 55.6666622222%;
            flex: 0 0 55.6666622222%;
    margin-left: 1.3333355556%;
    margin-right: 1.3333355556%;
    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-summary1 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
  .c-summary1:after {
    content: '';
    display: block;
    padding-right: 16px;
  }
  .c-summary2 .c-summary__item {
    margin-bottom: 24px;
  }
  .c-summary2 {
    margin-left: 0%;
    margin-right: 0%;
    -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-summary2 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    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-summary2 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
  .c-summary3 .c-summary__item {
    margin-bottom: 24px;
  }
  .c-summary3 {
    margin-left: 0%;
    margin-right: 0%;
    -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-summary3 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    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-summary3 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
  .c-keyword-search {
    padding: 12px 16px 16px 16px;
  }
  .c-keyword-search {
    margin-bottom: 12px;
  }
  .c-keyword-search__body {
    display: block;
  }
  .c-keyword-search__title {
    margin-bottom: 10px;
  }
  .c-keyword-search__input {
    width: 100%;
  }
  .c-keyword-search__control {
    display: block;
  }
  .c-keyword-search__control-item:before {
    display: none;
  }
  .c-accordion {
    margin-bottom: 12px;
  }
  .c-tab {
    margin-bottom: 12px;
  }
  .c-tab {
    margin-right: -16px;
    margin-left: -16px;
  }
  .c-tab__nav {
    padding: 6px 6px 0;
  }
  .c-tab__body {
    border-width: 1px 0 0;
    padding: 16px;
  }
  .c-modal-dialog {
    width: auto;
    margin-right: 16px;
    margin-left: 16px;
  }
  .c-modal-dialog__scroll {
    padding-right: 10px;
  }
  .c-modal-dialog__title {
    font-size: 16px;
  }
  .c-modal-dialog__button-group {
    margin-top: 12px;
  }
  .swiper-main {
    margin-right: -16px;
    margin-left: -16px;
  }
  .swiper-main .swiper-controls {
    background-color: inherit;
    position: static;
    float: right;
  }
  .swiper-main .swiper-start,
  .swiper-main .swiper-stop {
    padding: 5px 3px;
    opacity: 1;
    color: #192f60
  }
  .swiper-main .swiper-start.on,
  .swiper-main .swiper-stop.on {
    color: #222222;
  }
  .swiper-main .swiper-pagination-bullets {
    margin-top: -2em;
    text-align: left;
    max-width: 80%;
    padding-left: 10px;
  }
  .swiper-3to2to1 {
    margin-bottom: 12px;
  }
  .swiper-3to2to1 .swiper-button-prev,
  .swiper-3to2to1 .swiper-button-next {
    display: none;
  }
  .swiper-3to2to1 .swiper-pagination-bullets {
    display: none;
  }
  .is-visible--sm {
    display: block;
  }
  .is-visible-ib--sm {
    display: inline-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-inline--sm {
    display: inline;
  }
  .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: 12px !important;
  }
  .is-mb-small {
    margin-bottom: 12px !important;
  }
  .is-mb-medium {
    margin-bottom: 24px !important;
  }
  .is-mb-large {
    margin-bottom: 36px !important;
  }
  .is-mt0--sm {
    margin-top: 0 !important;
  }
  .is-mb0--sm {
    margin-bottom: 0 !important;
  }
  .sg-html {
    margin-top: 0;
  }
  .sg-heading2 {
    margin-bottom: 12px;
  }
  .sg-heading3 {
    margin-bottom: 12px;
  }
  .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;
  }
  .top-unit-white,
  .top-unit-primary-light {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .top-unit-main-visual {
    padding-top: 0;
  }
  .top-unit-main-visual .swiper-main .swiper-pagination-bullets {
    bottom: 50px;
  }
  .top-unit-map {
    margin-right: -5%;
    margin-left: -5%;
  }
  .top-heading__title {
    font-size: 10px;
    padding-left: 35px;
  }
  .top-heading__title .is-text-en {
    font-size: 30px;
  }
  .top-heading__title .is-text-en::before {
    width: 23px;
    left: -35px;
  }
  .top-heading__lead {
    font-size: 13px;
  }
  .top-unit-pickup {
    margin-top: -80px;
    margin-bottom: 40px;
  }
  .top-unit-pickup .c-summary__item.e-card {
    margin-bottom: 36px;
  }
  .top-unit-pickup .e-card__button {
    display: block;
  }
  .top-unit-pickup .e-card__button .e-button {
    width: 100%;
  }
  .top-unit-access .top-heading__tel {
    font-size: 14px;
  }
  .top-unit-access .top-heading__access {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .c-page-header {
    padding-right: 16px;
    padding-left: 16px;
    height: 100px;
  }
  .c-page-header__title {
    font-size: 10px;
    padding-left: 35px;
  }
  .c-page-header__title .is-text-en {
    font-size: 30px;
  }
  .c-page-header__title .is-text-en::before {
    width: 23px;
    left: -35px;
  }
  .visual-editor .e-mainimg-box {
    margin-bottom: 12px;
  }
  .comments-area {
    margin-bottom: 24px;
  }
  .comments-area .comment-reply-title,
  .comments-area .comments-title {
    font-size: 16px;
  }
  .comments-area .comment-form p {
    margin-bottom: 12px;
  }
  .comments-area .comment-form .form-submit input[name="submit"] {
    padding: 1rem 1.6rem;
  }
}

@media screen and (max-width: 374.999px) {
  html {
    font-size: 3.2vmin;
  }
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  }
  .e-list-img-horizontal li > *:last-child {
    min-height: 0;
  }
  .c-summary1 .c-summary__item > *:last-child {
    min-height: 0;
  }
  .c-summary2 .c-summary__item > *:last-child {
    min-height: 0;
  }
  .c-summary3 .c-summary__item > *:last-child {
    min-height: 0;
  }
  .material-icons, .e-box-alert:before, .e-form-error-text:before, .c-accordion__title:after, .is-icon-target-blank:after,
  .visual-editor [target="_blank"]:after {
    display: inline-block\0;
  }
}

@media screen and (max-width: 980px) {
  .l-header ._pc ._logo img {
    width: 200px;
  }
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._nav li:last-child {
    width: 140px;
  }
  .l-header ._pc ._nav li:last-child a {
    font-size: 12px;
    width: 120px;
  }
  .l-header ._pc ._nav a {
    font-size: 12px;
    padding: 19px 15px;
  }
}

@media screen and (max-width: 1192px) {
  .swiper-3to2to1 .swiper-button-prev {
    display: none;
  }
  .swiper-3to2to1 .swiper-button-next {
    display: none;
  }
}

@media screen and (min-width: 1192.001px) {
  .is-visible--lg {
    display: block;
  }
  .is-visible-ib--lg {
    display: inline-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-inline--lg {
    display: inline;
  }
  .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;
  }
  .top-unit-pickup {
    margin-left: -55px;
    margin-right: -55px;
  }
}

@media screen and (max-width: 1090px) {
  #js-swiper-bnr .swiper-container {
    margin-left: 45px;
    margin-right: 45px;
  }
  #js-swiper-bnr .swiper-button-prev,
  #js-swiper-bnr .swiper-container-rtl .swiper-button-next {
    left: 0;
  }
  #js-swiper-bnr .swiper-button-next,
  #js-swiper-bnr .swiper-container-rtl .swiper-button-prev {
    right: 0;
  }
}