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

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

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

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


```

@include fsize-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: hover
name: hover
category: mixins
---


```


```

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


```
@include text-overflow();

```

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


```

```

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


```

```

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


```

```

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


```

```

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


```

```

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


```

```

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


```

```

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

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

/* @  Font Reset
* ------------------------------------------------------------ */
html {
  line-height: 2;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, helvetica, arial, sans-serif;
  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%;
  color: #333;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

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

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

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

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

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

hr {
  border: 0;
  border-bottom: solid 1px #ddd;
  margin-top: 40px;
  margin-bottom: 40px;
}

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

th {
  text-align: left;
}

/* @  Link Reset
* ------------------------------------------------------------ */
::-moz-selection {
  background: rgba(120, 145, 175, 0.25);
  color: #333;
  text-shadow: none;
}
::selection {
  background: rgba(120, 145, 175, 0.25);
  color: #333;
  text-shadow: none;
}

input::-moz-selection,
textarea::-moz-selection {
  background: #8f9fb2;
  color: #333;
  text-shadow: none;
}

input::selection,
textarea::selection {
  background: #8f9fb2;
  color: #333;
  text-shadow: none;
}

a,
a:link {
  color: #3498DB;
  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: #3A5898;
  text-decoration: none;
}

a:visited {
  color: #3A5898;
}

a {
  -webkit-tap-highlight-color: rgba(0, 52, 134, 0.5);
}

a:link {
  -webkit-tap-highlight-color: rgba(0, 52, 134, 0.5);
}

button:focus,
a:focus {
  outline: 3px solid rgba(0, 74, 248, 0.6);
  outline-offset: 2px;
  -webkit-transition: none;
  transition: none;
}

button:focus {
  outline-width: 0;
}

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

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

code {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 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: 2;
  word-break: break-all;
  word-wrap: break-word;
  color: #aaa;
  background-color: #ffffff;
  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 {
  position: relative;
  width: 100%;
  background: url("../img/common/footer-bg.jpg") bottom center no-repeat;
  background-size: cover;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0 auto;
  padding-top: 90px;
  padding-right: 80px;
  padding-left: 80px;
}

.footer:before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 400px;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(white, rgba(255, 255, 255, 0));
  content: '';
}

.footer:after {
  position: absolute;
  z-index: 1;
  bottom: -5px;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 10vw;
  min-width: 200px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black));
  background: linear-gradient(rgba(0, 0, 0, 0), black);
  content: '';
}

.footer-primary {
  position: relative;
  z-index: 2;
  padding-bottom: 25vw;
}

.footer-primary-row {
  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;
}

.footer-primary-col {
  max-width: 240px;
  width: 240px;
}

.footer-primary-nav__heading {
  margin-bottom: 1em;
  line-height: 1;
  font-size: 17px;
  font-weight: bold;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.footer-primary-nav__heading a {
  color: #333;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.footer-primary-nav__heading a:hover {
  opacity: 0.7;
}

.footer-primary-nav__body li {
  line-height: 1.2;
  font-size: 14px;
  margin-bottom: 1em;
}

.footer-primary-nav__body li a {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  text-decoration: none;
  color: #333;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.footer-primary-nav__body li a:hover {
  opacity: 0.7;
}

.footer-secondary {
  position: relative;
  z-index: 2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 40px 0 5px;
}

.footer-secondary-row {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-secondary-row__child {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.footer-secondary-logo {
  width: 268px;
  margin-right: 40px;
  margin-bottom: 10px;
}

.footer-secondary-info {
  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;
  margin-bottom: 10px;
}

.footer-secondary-info p {
  text-shadow: 1px 1px 1px #000000;
  margin-right: 30px;
  line-height: 1.384615385;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 13px;
  color: #fff;
}

.footer-secondary-btn-group {
  display: none;
}

.footer-copy__text {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 10px 0;
  line-height: 1;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* @  Header Layout
 * ------------------------------------------------------------ */
.header {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  width: 100%;
  -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 66px;
}

.header-common {
  background: #fff;
}

.header__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;
  height: 100%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-right: 80px;
  padding-left: 80px;
}

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

.header__primary {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 200px;
}

.header__primary__logo {
  width: 100%;
}

.header__primary__logo a {
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.header__primary__logo a:hover {
  opacity: 0.7;
}

.header__primary__logo a:focus {
  outline: none;
}

.header__primary__logo img {
  display: none;
}

.header__primary__logo--white.is-active {
  display: block;
}

.header__primary__logo--black.is-active {
  display: block;
}

.header__secondary--pc {
  width: calc(100% - 186px);
}

.header__secondary--pc__nav {
  height: 100%;
}

.header__secondary--sp {
  display: none;
}

.media-info {
  position: fixed;
  z-index: 999999;
  top: 0;
  left: 0;
  display: block;
  content: "hogehoge";
  width: 120px;
  background: #003486;
}

.media-info:before {
  display: inline-block;
  width: 120px;
  content: 'lg';
  color: #fff;
  text-align: center;
  line-height: 1;
  font-size: 13px;
}

.gnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.gnav__item {
  display: block;
  text-align: center;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #333;
  padding: 15px 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1.2;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.gnav__item:hover {
  opacity: 0.7;
}

.gnav__item:last-child {
  padding-right: 0;
}

.gnav__item a {
  display: block;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  line-height: 1;
}

.gnav__item a:focus {
  outline: none;
}

.gnav__item--en {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

/* @  Header Layout
 * ------------------------------------------------------------

# 仕様

1.(is-step01) メインビジュアル領域（Y）をスクロールで超すまでは、ヘッダーは初期設定

IF Y点を越しているか?
  2. TRUE スクロール判定固定ヘッダー機能がON (is-step02)
     3.スクロールの上下によってクラスが付与される(is-step03)
  3. FALSE スクロール判定固定ヘッダー機能がOFF -> 初期化
     初期化

処理完了

----------

# 各ステップの概要

## is-step01

初期スタイル

## is-step02

仕様2番時のスタイル
絶対配置だが、描画領域外にヘッダーが存在


## is-step03

仕様3番時のスタイル
絶対配置、描画領域にヘッダーが出現する


 ------------------------------------------------------------ */
.is-step01.header {
  background: transparent;
  z-index: 9999;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: .5s;
  transition: .5s;
}

.is-step01 .gnav__item a {
  color: #fff;
}

.is-step01 .c-control-offcanvas__icon span {
  background: #fff;
}

.is-step01 .c-control-offcanvas__title {
  color: #fff;
}

.is-step01.is-dark .gnav__item a {
  color: #333;
}

.is-step02 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
}

.is-step03.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999;
  -webkit-transition: .5s;
  transition: .5s;
  -webkit-transform: translateY(0%);
      -ms-transform: translateY(0%);
          transform: translateY(0%);
}

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

.l-main {
  overflow-x: hidden;
}

/* @  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-wrapper {
  margin-top: 66px;
}

[data-browser="ie"] .l-wrapper {
  position: relative;
  top: 66px;
}

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

.l-container {
  min-height: 2px;
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
}

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

.l-container__inner {
  min-height: 2px;
  z-index: 1;
  max-width: 1564px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
}

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

/* @ l-block
 * ------------------------------------------------------------ */
.l-block {
  width: 100%;
  max-width: 100%px;
  margin-left: auto;
  margin-right: auto;
}

.l-block02 {
  width: 90%;
  max-width: 100%px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

.l-block03 {
  width: 1036px;
  max-width: 1036px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px;
}

.l-block-fluid {
  width: 100%;
}

/* @ l-block-primary
 * ------------------------------------------------------------ */
.l-block-primary {
  width: 100%;
  float: left;
}

/* @  l-block-secondary
 * ------------------------------------------------------------ */
.l-block-secondary {
  width: 0%;
  float: right;
}

.l-entry-block {
  padding: 30px 0;
}

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

/* @ 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="c-anchor-nav is-mb-large">
        <div class="c-anchor-nav__body">
          <p class="c-anchor-nav__title">コンテンツ</p>
          <ul data-scroll>
            <li><a href="#ank1">見出し・段落</a> </li>
            <li><a href="#ank2">リスト</a> </li>
            <li><a href="#ank3">テキスト（装飾・リンク・配置・引用）</a> </li>
            <li><a href="#ank4">画像（サイズ・配置）</a> </li>
            <li><a href="#ank5">テーブル</a> </li>
          </ul>
        </div>
      </div>


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


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

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

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

        <ul>
          <li>順序がないリスト</li>
          <li>順序がないリスト
            <ul 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>

        <h2 id="ank3">3. テキスト（装飾・リンク・配置・引用）</h2>
        <h3>装飾</h3>
        <p>
          <strong>強い強調を表す要素（strong）</strong><br>
          <em>強調を表す要素（em）</em><br>
          <s>すでに正確ではなくなった要素、打ち消し線（s）</s><br>
          <small>注釈や細目を表す要素（small）</small>
          <br>
          <span>上付き文字（sup）　E=mc<sup>2</sup></span><br>
          <span>下付き文字（sub）　CO<sub>2</sub></span><br>
          <span style="color: #cc3e4c;">エラー色文字（Text Red）</span><br>
        </p>


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

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

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

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

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

        <h3>サイズ</h3>
        <figure>
          <img class="size-full" src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <figure>
          <img class="size-medium" src="/assets/img/dummy/840x560.png" alt="">
        </figure>
        <figure>
          <img class="size-thumbnail" src="/assets/img/dummy/840x560.png" alt="">
        </figure>

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

        <h4>中央寄せ</h4>
        <figure>
          <img class="aligncenter size-medium" src="/assets/img/dummy/840x560.png" alt="">
        </figure>

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



        <h2 id="ank5">5. テーブル</h2>

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

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


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

      </div>

```


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

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

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

.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 p {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 2.4;
}

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

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

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

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

.alignleft {
  margin-right: 1rem;
  margin-bottom: 24px;
  float: left;
}

.alignright {
  margin-left: 1rem;
  margin-bottom: 24px;
  float: right;
}

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

.size-thumbnail {
  width: 25%;
}

.size-medium {
  width: 33.33%;
}

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

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

.entry .columnImage,
.visual-editor .columnImage {
  margin-bottom: 35px;
}

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

```html_example


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

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

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

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

```html_example


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   #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 {
  -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: -1%;
  margin-left: -1%;
}

.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 {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: 1%;
  margin-left: 1%;
  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
   ========================================================================== */
.e-admin-edit-btn {
  position: absolute;
  z-index: 9999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: .8em 1em;
  font-size: 13px;
  line-height: 1;
  font-weight: bold;
  border-radius: 0 0 10px 0;
}

.e-admin-edit-btn:active, .e-admin-edit-btn:link, .e-admin-edit-btn:visited, .e-admin-edit-btn:focus, .e-admin-edit-btn:hover {
  color: #fff;
  text-decoration: none;
}

/* 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 {
  position: relative;
  padding: 0.6rem 1.5rem 0.6rem 3.2rem;
  border-radius: 3px;
  border: 1px solid #ddd;
  background-color: #ffffff;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 24px;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

.e-box-alert--success {
  background-color: #eff8ef;
  border-color: #5CB85C;
  color: #5CB85C;
}

.e-box-alert--success:before {
  color: #5CB85C;
  content: "check";
}

.e-box-alert--warning {
  background-color: #fef9ee;
  border-color: #F5C156;
  color: #F5C156;
}

.e-box-alert--warning:before {
  color: #F5C156;
  content: "warning";
}

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

.e-box-alert--error:before {
  color: #E74C3C;
  content: "warning";
}

.e-box-alert--info {
  background-color: #f1f1f1;
  border-color: #707070;
  color: #707070;
}

.e-box-alert--info:before {
  color: #707070;
  content: "priority_high";
}

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

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

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

```html_example

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

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

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

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

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

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

```html_example
<h1 class="e-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 {
  overflow: hidden;
}

.visual-editor h2,
.e-heading2 {
  overflow: hidden;
}

.visual-editor h3,
.e-heading3 {
  overflow: hidden;
}

.visual-editor h4,
.e-heading4 {
  overflow: hidden;
}

.visual-editor h5,
.e-heading5 {
  overflow: hidden;
}

.visual-editor h6,
.e-heading6 {
  overflow: hidden;
}

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

```html_example


<div class="e-heading-group">
  <h3 class="e-heading3">情に棹させば流される智に働けば角が立つ</h3>
  <p class="e-heading-date"> 6月12日  12:49</p>
</div>



```
*/
.e-heading-date {
  margin-bottom: 24px;
  color: #999;
  font-size: .8em;
}

.e-heading-date a {
  color: #3498DB;
  text-decoration: underline;
}

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

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

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

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

```html_example


<div class="e-section-heading01">
  <div class="e-section-heading01__inner">
    <h1 class="e-section-heading01__title">製品紹介</h1>
    <p class="e-section-heading01__en">Products</p>
  </div>
</div>


```
*/
.e-section-heading01 {
  margin: 0 auto;
  text-align: center;
  margin-bottom: 120px;
  overflow: hidden;
}

.e-section-heading01__inner {
  position: relative;
  display: inline-block;
  background: #fff;
  padding: .5em 3.333333333em;
}

.e-section-heading01__inner:before, .e-section-heading01__inner:after {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  display: block;
  content: '';
  width: 280px;
  height: 4px;
  background: url("../img/common/wave.png") center center repeat-x;
  background-size: contain;
  -webkit-animation: bg/oop 30s linear infinite;
  animation: bgloop 20s linear infinite;
}

@-webkit-keyframes bgloop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 280px 0;
  }
}

@keyframes bgloop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 280px 0;
  }
}

.e-section-heading01__inner:before {
  left: -280px;
}

.e-section-heading01__inner:after {
  right: -280px;
}

.e-section-heading01__title {
  line-height: 1.2;
  font-size: 2em;
  font-weight: bold;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.e-section-heading01__en {
  display: inline-block;
  margin-top: .8em;
  line-height: 1;
  opacity: .8;
  font-size: .8125em;
}

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

```html_example


<h2 class="e-heading02">見出し2<span>heading02__en</span></h2>


```
*/
.e-heading2 {
  position: relative;
  display: block;
  padding-bottom: 30px;
  margin-bottom: 50px;
  font-size: 26px;
  line-height: 1.2;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.e-heading2:before {
  position: absolute;
  bottom: 0;
  -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  display: block;
  content: '';
  width: 100%;
  height: 4px;
  background: url("../img/common/wave.png") center center repeat-x;
  background-size: contain;
  -webkit-animation: bg/oop 30s linear infinite;
  animation: bgloop 20s linear infinite;
}

@keyframes bgloop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 280px 0;
  }
}

.e-heading2 span {
  font-size: 13px;
  line-height: 1.2;
  opacity: .8;
  font-weight: normal;
  margin-left: 25px;
}

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

```html_example


<h1 class="e-heading03">行橋産 鱧 <span class="e-heading03__sub">（骨切り加工済み）</span></h1>


```
*/
.e-heading3 {
  padding-bottom: .85em;
  border-bottom: solid 1px #ccc;
  margin-bottom: 1em;
  line-height: 1.2;
  font-size: 1.75em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.e-heading3 span {
  display: inline-block;
  line-height: 1;
  opacity: .8;
  font-size: .678571429em;
  font-weight: normal;
  margin-left: 25px;
}

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

```html_example


<h4 class="e-heading05">見出し4</h4>


```
*/
.e-heading4 {
  margin: 40px 0;
  line-height: 1.2;
  font-size: 24px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.e-heading4 span {
  font-size: 13px;
  line-height: 1.2;
  opacity: .8;
  font-weight: normal;
  margin-left: 25px;
}

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

```html_example


<h4 class="e-heading06">見出し4</h4>


```
*/
.e-heading5 {
  margin: 40px 0;
  line-height: 1.2;
  font-size: 20px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.e-heading5 span {
  font-size: 13px;
  line-height: 1.2;
  opacity: .8;
  font-weight: normal;
  margin-left: 25px;
}

/*doc
---
title: e-heaidng-unit01
name: e-heaidng-unit01
categories: [elements, heading]
parent: heading
---

```html_example


<div class="e-heaidng-unit01">
  <h1 class="e-heading-unit01__title">見出しユニット1 - 情に棹させば流される智に働けば角が立つ</h1>
  <span class="e-heading-unit01__date">6月12日 12:49</span>
</div>


```
*/
.e-heading-unit01 {
  margin: 40px 0 30px;
  border-bottom: solid 1px #ccc;
}

.e-heading-unit01__title {
  line-height: 1.2;
  font-size: 24px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.e-heading-unit01__date {
  margin: 0 0 10px 3px;
  display: inline-block;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 14px;
  font-weight: normal;
  opacity: .4;
}

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

```html_example

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

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


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


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


```

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

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

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

.e-responsive-img {
  margin-bottom: 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: 5px;
  color: #999;
  font-size: 12px;
  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 #ddd;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

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

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

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



```html_example

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


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


```

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

.visual-editor strong > strong,
.e-text-catchcopy {
  font-weight: bold;
  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-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-small {
  font-size: 12px;
}

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

.is-text-week {
  color: #ccc;
  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 #999;
  border-left: 1px solid #999;
  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-bold {
  font-weight: bold;
}

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

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

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

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

/* ==========================================================================
   #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: .3em;
}

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

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

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

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

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

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

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

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

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

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

.e-list-inline {
  margin-bottom: 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: #ddd;
}

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

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

.visual-editor table caption, .e-table caption, .visual-editor .e-table--borderless caption, .e-table--borderless caption, .visual-editor .e-table--liner caption {
  color: #999;
  margin-bottom: 24px;
}

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


.visual-editor table th,
.e-table th,
.visual-editor .e-table--borderless th,
.e-table--borderless th,
.visual-editor .e-table--liner th {
  padding: 6px 14px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  vertical-align: top;
  background-color: #EEE;
  width: 20%;
}


.visual-editor table td,
.e-table td,
.visual-editor .e-table--borderless td,
.e-table--borderless td,
.visual-editor .e-table--liner td {
  padding: 6px 14px;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

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

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

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

```
*/
.visual-editor .e-table--liner {
  border-top: none;
  border-right: 0;
}

.visual-editor .e-table--liner tbody, .visual-editor .e-table--liner tr, .visual-editor .e-table--liner th, .visual-editor .e-table--liner td {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.visual-editor .e-table--liner th, .visual-editor .e-table--liner td {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.visual-editor .e-table--liner th {
  border-left: 0;
  background: transparent;
  border-bottom: 1px solid #999999;
}

.visual-editor .e-table--liner td {
  border-left: 0;
  border-bottom: 1px solid #ddd;
}

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

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

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

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

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

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

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

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

/* ==========================================================================
   #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 {
  overflow: hidden;
  position: relative;
  display: inline-block;
  max-width: 100%;
  text-decoration: none !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  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;
  border-radius: 2px;
  vertical-align: middle;
  line-height: 1.2;
  letter-spacing: .1em;
  min-width: 300px;
  padding: 1.285714286em 1.6rem;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.3);
  border: 0;
  background-color: #455F7E;
  color: #fff !important;
  font-weight: bold;
  font-size: .933333333em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.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;
  -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-button:active,
.entry-btn:active,
.entry-btn-attention: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);
}

.e-button:hover,
.entry-btn:hover,
.entry-btn-attention:hover {
  opacity: .7;
  cursor: pointer;
}

.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;
  background-color: #eee;
  border: 1px solid #ddd;
  color: #666 !important;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.e-button .is-icon-left,
.e-button .is-icon-right,
.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;
  margin: auto;
  bottom: 0;
  height: 1em;
  width: 1em;
}

.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--secondary,
.entry-btn-attention {
  background-color: #003486;
  color: #fff !important;
}

/* ボタン2
   ========================================================================== */
/*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-button02,
.entry-btn02,
.entry-btn-attention02 {
  font-weight: bold;
  text-decoration: none !important;
  color: #fff !important;
  padding: 15px 1.8rem;
  min-width: 64px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50px;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  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;
  overflow: hidden;
  position: relative;
  display: inline-block;
  min-width: 300px;
  vertical-align: middle;
  line-height: 1;
  background-color: #455F7E;
  border: solid 0 transparent;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

.e-button02 a,
.entry-btn02 a,
.entry-btn-attention02 a {
  font-weight: inherit;
  text-decoration: inherit;
  color: inherit;
}

.e-button02:hover, .e-button02:focus, .e-button02.is-hover,
.entry-btn02:hover,
.entry-btn02:focus,
.entry-btn02.is-hover,
.entry-btn-attention02:hover,
.entry-btn-attention02:focus,
.entry-btn-attention02.is-hover {
  color: #fff;
  -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-button02:active,
.entry-btn02:active,
.entry-btn-attention02: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);
}

.e-button02:hover,
.entry-btn02:hover,
.entry-btn-attention02:hover {
  opacity: .7;
  cursor: pointer;
}

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

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

.e-button02 .is-icon-left,
.entry-btn02 .is-icon-left,
.entry-btn-attention02 .is-icon-left {
  left: .5em;
}

.e-button02 .is-icon-right,
.entry-btn02 .is-icon-right,
.entry-btn-attention02 .is-icon-right {
  right: .5em;
}

/* ボタン3
   ========================================================================== */
/*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-button03,
.entry-btn03,
.entry-btn-attention03 {
  font-weight: bold;
  text-decoration: none !important;
  color: #455F7E !important;
  padding: 1.6em 2.4em;
  min-width: 64px;
  max-width: 100%;
  min-width: 500px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  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;
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  background-color: #fff;
  border: 0;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 20px;
  -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

.e-button03 a,
.entry-btn03 a,
.entry-btn-attention03 a {
  font-weight: inherit;
  text-decoration: inherit;
  color: inherit;
}

.e-button03:hover, .e-button03:focus, .e-button03.is-hover,
.entry-btn03:hover,
.entry-btn03:focus,
.entry-btn03.is-hover,
.entry-btn-attention03:hover,
.entry-btn-attention03:focus,
.entry-btn-attention03.is-hover {
  -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-button03:active,
.entry-btn03:active,
.entry-btn-attention03: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);
}

.e-button03:focus,
.entry-btn03:focus,
.entry-btn-attention03:focus {
  outline: none;
}

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

.e-button03:hover,
.entry-btn03:hover,
.entry-btn-attention03:hover {
  opacity: .7;
  cursor: pointer;
}

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

.e-button03 .is-icon-left,
.entry-btn03 .is-icon-left,
.entry-btn-attention03 .is-icon-left {
  left: .5em;
}

.e-button03 .is-icon-right,
.entry-btn03 .is-icon-right,
.entry-btn-attention03 .is-icon-right {
  right: .5em;
}

.e-button--secondary,
.entry-btn-attention {
  background-color: #003486;
  color: #fff !important;
}

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

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

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


```

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

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

.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>
  <button type="button" class="e-button e-button--xlarge">もっと見る</button>
</div>

```

*/
.e-button--small {
  padding: 0.5142857144em 0.88rem;
  font-size: .75em;
  font-weight: normal;
}

.e-button--large {
  padding: 1.8000000004em 1.6rem;
  font-size: 1.2em;
  font-weight: bold;
}

.e-button--xlarge {
  padding: 1.928571429em 1.6rem;
  font-size: 1.4em;
  font-weight: bold;
  min-width: 30%;
}

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

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

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

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

.e-label--blue {
  background-color: #478fbb !important;
}

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

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

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

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

/* 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: 12px 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 #ddd;
  border-radius: 3px;
  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: #333;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  font-size: 15px;
}

.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 {
  display: none;
}

input[type=file].e-form-control ~ label {
  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 #ddd;
  border-radius: 3px;
  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);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  display: block;
  color: #868686;
}

.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: #fff url("../img/form/form_icon_select_top.svg") right 10px center 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: .2em;
  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;
}

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

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

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

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

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

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

.is-warning.e-form-control {
  background: #fff url("../img/form/form_icon_warning.svg") 98% 0.6em no-repeat;
  padding-right: 30px;
}

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

.is-valid {
  border-color: #8cc152;
}

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

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

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

.e-form-control [role="tooltip"] {
  display: none;
  width: auto;
  margin: 0;
  padding: .25em;
  background: #003486;
  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 #ddd;
}

.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 {
  margin-left: 5px;
  margin-right: 5px;
  padding: 2px 8px;
  border-radius: 3px;
  background-color: #e73656;
  color: #fff;
  font-size: .8rem;
  display: inline-block;
  font-weight: normal;
}

.e-form-any {
  background-color: #5CB85C;
}

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

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

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

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

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

/*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 #ddd;
  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: #fff;
  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 #ddd;
  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 #fff;
}

.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: #fff;
  background-color: #455F7E;
}

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

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

.e-form-step__item.is-active:before {
  font-weight: normal;
  background-color: #fff;
  color: #455F7E;
}

.e-form-table {
  width: 100%;
  border-top: 1px solid #ddd;
  border-collapse: separate;
  border-spacing: 0;
  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: 1.8em 1.2em;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
  width: 30%;
}

.e-form-table td {
  padding: 1em 1.2em;
  border-bottom: 1px solid #ddd;
  vertical-align: middle;
}

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

```


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

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

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

.e-media__img {
  overflow: hidden;
  position: relative;
  margin-right: 10px;
  float: left;
  width: 192px;
  height: 128px;
}

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

.e-media__img img {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  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: 16px;
  margin-bottom: 3px;
  line-height: 1.4;
}

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

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

.e-media--small .e-media__title {
  font-size: 14px;
}

.e-media--small .e-media__text {
  font-size: 12px;
}

.e-media--small .e-media__img {
  margin-right: 16px;
  float: left;
  width: 82px;
  height: 82px;
}

/* ==========================================================================
   #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/dummy/820x273.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 {
  border-radius: 5px;
  border: solid 1px #D8D8D8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.e-card a {
  display: block;
  -webkit-box-shadow: rgba(170, 170, 170, 0.15) 0 3px 6px;
          box-shadow: rgba(170, 170, 170, 0.15) 0 3px 6px;
}

.e-card a:active, .e-card a:link, .e-card a:visited, .e-card a:focus, .e-card a:hover {
  text-decoration: none;
  color: #333;
}

.e-card a:hover {
  -webkit-box-shadow: #aaaaaa 0 5px 10px;
          box-shadow: #aaaaaa 0 5px 10px;
}

.e-card__img {
  width: 100%;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.e-card__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 100%;
}

.e-card__body {
  padding: 20px;
}

.e-card__title {
  font-size: 17px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1;
  margin-bottom: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.e-card__date {
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #555;
}

.e-card__label {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  border: solid 1px #555;
  padding: 3px 10px;
  border-radius: 3px;
  color: #555;
  margin-left: .5em;
}

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

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


```html_example

<ul class="c-summary">
  <li class="c-summary__item e-card02">
    <a href="">
      <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
      <div class="e-card02__body">
        <p class="e-card02__title">タイトル</p>
      </div>
    </a>
  </li>
  <li class="c-summary__item e-card02">
    <a href="">
      <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
      <div class="e-card02__body">
        <p class="e-card02__title">タイトル</p>
      </div>
    </a>
  </li>
  <li class="c-summary__item e-card02">
    <a href="">
      <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
      <div class="e-card02__body">
        <p class="e-card02__title">タイトル</p>
      </div>
    </a>
  </li>
</ul>

```

*/
.e-card02 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.e-card02 a {
  display: block;
}

.e-card02 a:active, .e-card02 a:link, .e-card02 a:visited, .e-card02 a:focus, .e-card02 a:hover {
  text-decoration: none;
  color: #333;
}

.e-card02 a:hover {
  opacity: .7;
}

.e-card02__img {
  width: 100%;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.e-card02__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 100%;
}

.e-card02__body {
  padding: 15px 10px;
}

.e-card02__title {
  font-size: 17px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Alerts
   ========================================================================== */
/*doc
---
title: cta
name: cta
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>
```

*/
.cta {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 100%;
  background: url("../img/common/cta-bg.jpg") center center no-repeat;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: 20px;
  padding-left: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.cta:before {
  z-index: -1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: #455F7E;
  opacity: .9;
}

.cta-header {
  margin: 0 auto 80px;
  text-align: center;
  color: #fff;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.cta-header__en {
  margin-bottom: 10px;
  line-height: 1;
  font-size: 2.4em;
}

.cta-header__jp {
  font-size: 16px;
  line-height: 1;
}

.cta-body {
  margin-bottom: 80px;
  text-align: center;
  line-height: 40px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 1.066666667em;
  color: #fff;
}

.cta-btn-group {
  margin: 0 auto;
  text-align: center;
}

.e-custom_margin {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
}

.e-custom_margin.mb--lg {
  margin-bottom: 100px;
}

.e-custom_margin.mb--mb {
  margin-bottom: 50px;
}

.e-custom_margin.mb--sm {
  margin-bottom: 20px;
}

.e-custom_margin.mb--xlg {
  margin-bottom: 200px;
}

/*
<div class="e-custom-layout01 {fld_custom_layout01_layout}">
<header class="e-custom-layout01-header">
<h2 class="e-custom-layout01-header__title e-heading2">{fld_custom_layout01_heading}<!-- BEGIN_IF [{fld_custom_layout01_subheading}/nem] --><span>{fld_custom_layout01_subheading}</span><!-- END_IF --></h2>
</header>
<div class="e-custom-layout01-media">
<img class="e-custom-layout01-media__img"  alt="{fld_custom_layout01_media@alt}" src="%{MEDIA_ARCHIVES_DIR}{fld_custom_layout01_media@path}" />
<!-- BEGIN_IF [{fld_custom_layout01_media@caption}/nem] -->
<h3>
<!-- BEGIN_IF [{fld_custom_layout01_media@path}/em] -->
<a href="{fld_custom_layout01_media@path}">{fld_custom_layout01_media@caption}</a>
<!-- ELSE -->{fld_custom_layout01_media@caption}
<!-- END_IF -->
</h3>
<!-- END_IF -->
<!-- BEGIN_IF [{fld_custom_layout01_media@text}/nem] -->
<p>{fld_custom_layout01_media@text}</p>
<!-- END_IF -->
</div>
<div class="e-custom-layout01-content">
<p class="e-custom-layout01-content__text">{fld_custom_layout01_text}[escape|nl2br]</p>
</div>
</div>

*/
.e-custom-layout01::after {
  clear: both;
  content: "";
  display: block;
}

.e-custom-layout01 .e-custom-layout01-header,
.e-custom-layout01 .e-custom-layout01-content {
  float: left;
}

.e-custom-layout01 .e-custom-layout01-media {
  float: right;
}

.e-custom-layout01.is-normal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse wrap;
          flex-flow: row-reverse wrap;
}

.e-custom-layout01.is-normal .e-custom-layout01-header,
.e-custom-layout01.is-normal .e-custom-layout01-content {
  float: right;
}

.e-custom-layout01.is-normal .e-custom-layout01-media {
  float: left;
}

.e-custom-layout01 .e-heading2 {
  margin-bottom: 35px;
}

.e-custom-layout01-header,
.e-custom-layout01-media,
.e-custom-layout01-content {
  width: 49.2327366%;
  max-width: 49.2327366%;
}

/* ==========================================================================
   #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 {
  max-width: 1980px;
  padding: 10px 20px;
  margin: 0 auto 50px;
  background: #F4F4F4;
}

.c-breadcrumb__inner {
  font-size: 13px;
}

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

.c-breadcrumb__inner a {
  text-decoration: none;
  color: #3498DB;
}

.c-breadcrumb__inner span {
  position: relative;
}

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

.c-breadcrumb__inner span:first-child:before {
  position: relative;
  top: 2px;
  left: 0;
  content: "home";
  padding-right: .3em;
  padding-left: 0;
  font-family: 'Material Icons';
  font-size: 1.1em;
  color: #3498DB;
}

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

/* ==========================================================================
   #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 a {
  display: block;
  position: fixed;
  right: 15px;
  bottom: -100px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 56px;
  height: 56px;
  opacity: .88;
  background: #716f86;
  border-radius: 100px;
  font-size: 2em;
  line-height: 54px;
  text-align: center;
  z-index: 8888;
  -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 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;
}

.c-to-top a span {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
  display: inline-block;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  content: "";
  vertical-align: middle;
}

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

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


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

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

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

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

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

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

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

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

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

```html_example

  <div class="c-pager">
    <ul class="c-pager__inner">
      <li class="c-pager__item c-pager__prev"><a href="javascript:void(0)"><figure class="c-pager__thumb"><img src="/assets/img/top/e-card_dummy01.jpg"></figure><span class="c-pager__title">前の記事を読む前の記事を読む前の記事を読む</span></a></li>
      <li class="c-pager__item c-pager__next"><a href="javascript:void(0)"><span class="c-pager__title">次の記事を読む</span><figure class="c-pager__thumb"><img src="/assets/img/top/e-card_dummy01.jpg"></figure></a></li>
    </ul>
  </div>


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

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

.c-pager__inner {
  position: relative;
}

.c-pager__inner::after {
  clear: both;
  content: "";
  display: block;
}

.c-pager__item {
  position: relative;
  width: 50%;
  border-top: solid 1px #DBDBDB;
  border-bottom: solid 1px #DBDBDB;
}

.c-pager__next {
  float: left;
  text-align: left;
}

.c-pager__prev {
  float: right;
  text-align: right;
}

.c-pager__item a {
  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-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  line-height: 1;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px 20px;
}

.c-pager__item a:active, .c-pager__item a:link, .c-pager__item a:visited, .c-pager__item a:focus, .c-pager__item a:hover {
  color: #333;
}

.c-pager__item a:hover {
  background: #eee;
}

.c-pager__item a:before {
  display: inline-block;
  position: absolute;
  width: 4px;
  height: 4px;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.c-pager__next a {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.c-pager__next a:before {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-bottom: solid 1px #999;
  border-left: solid 1px #999;
  left: .1em;
}

.c-pager__prev a {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.c-pager__prev a:before {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
      -ms-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
  border-top: solid 1px #999;
  border-right: solid 1px #999;
}

.c-pager__thumb {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 14.6258503%;
  padding-top: 9.5400341%;
  overflow: hidden;
}

.c-pager__thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.c-pager__title {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 10px;
  width: calc(100% - 14.6258503% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* @  main visual
 * ------------------------------------------------------------ */
/*doc
---
title: main-visual
name: main-visual
categories: [components, main-visual]
---


<h3 class="styleguide">Main Visual Background</h3>

```html_example
  <div class="c-main-visual">
    <div class="c-main-visual__bg-img" style="background-image: url(/assets/img/common/main-visual.jpg)">
       <h1>タイトル</h1>
    </div>
  </div>
```



*/
.c-main-visual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
  text-align: center;
}

.c-main-visual:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(0, 0, 0, 0.3);
}

.c-main-visual a {
  display: block;
}

.c-main-visual__bg-img {
  background-image: url(../img/common/main_visual.png);
  background-position: center center;
  background-size: cover;
  min-height: 470px;
  max-height: 470px;
  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;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 100%;
}

.c-main-visual__title {
  position: relative;
  z-index: 2;
  margin-bottom: 6px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
  font-size: 30px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  line-height: 1.2;
}

.c-main-visual__en {
  position: relative;
  z-index: 2;
  line-height: 1;
  font-size: 13px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  text-shadow: 1px 1px 1px #000;
  color: #fff;
}

.c-main-visual__sub-title {
  display: block;
}

/* ==========================================================================
   #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>
      <span class="c-headline__label">
        <span class="e-label e-label--blue">カテゴリ</span>
        <span class="e-label e-label--blue">カテゴリ</span>
      </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>
      <span class="c-headline__label">
        <span class="e-label e-label--blue">カテゴリ</span>
      </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 {
  margin-bottom: 24px;
}

.c-headline__item {
  margin-bottom: 1em;
  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;
}

.c-headline__item a {
  color: #333;
}

.c-headline__date {
  margin: .1em 1em .1em 0;
  font-size: 12px;
  color: #999;
  min-width: 6em;
}

.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 {
  white-space: nowrap;
  margin-right: .3em;
}

.c-headline__label span:last-child {
  margin-right: 0;
}

.c-headline__title {
  font-size: 14px;
}

/*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"><a href="">ニュースニュース</a></p>
      <p class="c-headline-search__text">ニュースニュースニュースニュース<span class="c-headline-search__sub-text"> ニュースニュースニュースニュース</span></p>
    </li>
   </ul>

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

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

.c-headline-search__title {
  font-size: 18px;
  margin-bottom: .5em;
}

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

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

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

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

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

```html_example
<div class="c-menu">
<div class="c-menu__title-group">
  <h3 class="c-menu__title">階層構造メニュー</h3>
  <span class="c-menu__title-to-list"><a href="" class="e-button e-button--small">一覧へ</a></span>
</div>
  <ul class="c-menu__list">
    <li><a href="">タイトル</a>
    <ul class="c-menu__list">
        <li><a href="" class="is-active">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
    </ul>
    </li>
    <li><a href="">タイトル</a></li>
    <li><a href="">タイトル</a></li>
  </ul>
</div>


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

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

.c-menu__title {
  background: #003486;
  color: #fff;
  font-size: 16px;
  padding: .6em 1em;
  font-weight: bold;
}

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

.c-menu__list a {
  border-top: 1px dotted #ddd;
  font-size: 14px;
  padding: .6em;
  display: block;
  text-decoration: none;
  color: #333;
}

.c-menu__list a:hover {
  background-color: #003486;
  color: #fff;
}

.c-menu__list a.is-active {
  font-weight: bold;
  background-color: #003486;
  color: #fff;
}

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

.acms-admin-box,
.acms-admin-revison-admin {
  margin-bottom: 0 !important;
}

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

*/
.c-anchor-nav {
  border: 1px solid #ddd;
  margin-bottom: 24px;
}

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

.c-anchor-nav__title {
  color: #999;
  font-weight: bold;
  font-size: 14px;
  background: #fff;
  position: absolute;
  top: -.5em;
  left: 1.1rem;
  padding-right: .5rem;
  padding-left: .5rem;
  line-height: 1;
}

.c-anchor-nav li {
  margin-bottom: .4em;
}

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

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

.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 #999;
  border-left: 1px solid #999;
  content: "";
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin-right: 7px;
}

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

```html_example


  <ul class="c-summary">
    <li class="c-summary__item e-card">
      <a href="#">
        <figure class="e-card__img">
          <img src="/assets/img/top/e-card_dummy01.jpg" alt="エントリータイトル">
        </figure>
        <div class="e-card__body">
          <h2 class="e-card__title">新春初物あのあのイーハトーヴォのすきとおった</h2>
          <div class="e-card__footer">
            <p class="e-card__date">2019.4.23</p>
            <p class="e-card__label">お知らせ</p>
          </div>
        </div>
      </a>
    </li>
    <li class="c-summary__item e-card">
      <a href="#">
        <figure class="e-card__img">
          <img src="/assets/img/top/e-card_dummy01.jpg" alt="エントリータイトル">
        </figure>
        <div class="e-card__body">
          <h2 class="e-card__title">新春初物あのあのイーハトーヴォのすきとおった</h2>
          <div class="e-card__footer">
            <p class="e-card__date">2019.4.23</p>
            <p class="e-card__label">お知らせ</p>
          </div>
        </div>
      </a>
    </li>
    <li class="c-summary__item e-card">
      <a href="#">
        <figure class="e-card__img">
          <img src="/assets/img/top/e-card_dummy01.jpg" alt="エントリータイトル">
        </figure>
        <div class="e-card__body">
          <h2 class="e-card__title">新春初物あのあのイーハトーヴォのすきとおった</h2>
          <div class="e-card__footer">
            <p class="e-card__date">2019.4.23</p>
            <p class="e-card__label">お知らせ</p>
          </div>
        </div>
      </a>
    </li>
    <li class="c-summary__item e-card">
      <a href="#">
        <figure class="e-card__img">
          <img src="/assets/img/top/e-card_dummy01.jpg" alt="エントリータイトル">
        </figure>
        <div class="e-card__body">
          <h2 class="e-card__title">新春初物あのあのイーハトーヴォのすきとおった</h2>
          <div class="e-card__footer">
            <p class="e-card__date">2019.4.23</p>
            <p class="e-card__label">お知らせ</p>
          </div>
        </div>
      </a>
    </li>
  </ul>



```
*/
.c-summary {
  margin: 0 0 80px 50px;
  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-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0;
}

.c-summary__item {
  margin: 0 20px 20px 0;
  width: calc(((100% - 20px * 3) / 4));
}

.c-summary__item:nth-child(4n) {
  margin-right: 0;
}

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

```html_example


  <ul class="c-summary02">
    <li class="c-summary02__item e-card02">
      <a href="">
        <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
        <div class="e-card02__body">
          <p class="e-card02__title">タイトル</p>
        </div>
      </a>
    </li>
    <li class="c-summary02__item e-card02">
      <a href="">
        <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
        <div class="e-card02__body">
          <p class="e-card02__title">タイトル</p>
        </div>
      </a>
    </li>
    <li class="c-summary02__item e-card02">
      <a href="">
        <div class="e-card02__img"><img src="/assets/img/dummy/400x250.png" alt=""></div>
        <div class="e-card02__body">
          <p class="e-card02__title">タイトル</p>
        </div>
      </a>
    </li>
  </ul>



```
*/
.c-summary02 {
  margin: 0 0 80px 50px;
  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-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0;
}

.c-summary02__item {
  margin: 0 20px 20px 0;
  width: calc(((100% - 20px * 2) / 3));
}

.c-summary02__item:nth-child(3n) {
  margin-right: 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">
      <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>
```
*/
/*

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

*/
.c-keyword-search {
  overflow: hidden;
  background-color: #f7f7f7;
  padding: 16px;
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

.c-keyword-search__input {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 3px 0 0 3px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.c-keyword-search__button {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-weight: normal;
  margin: 0 auto;
  width: 80px;
  border-radius: 0 3px 3px 0;
  padding: 10px;
  font-size: 18px;
  border: 0;
  color: #333;
  background-color: #003486;
  -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: #ccc;
  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" style="display:none;" data-body-accordion>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
 </div>
</div>

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

<div class="c-accordion" data-accordion data-device-accordion="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" style="display:none;" 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" style="display:none;" data-body-accordion>
  <p>情に棹させば流される。智に働けば角が立つ。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。とかくに人の世は住みにくい。意地を通せば窮屈だ。</p>
 </div>
</div>

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



```

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


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

.c-accordion + .c-accordion {
  margin-top: -24px;
}

.c-accordion + .c-accordion .c-accordion__title {
  border-top: 0;
}

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

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

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

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

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

.c-accordion__body {
  border: 1px solid #ddd;
  border-top: 0;
  padding: 25px 20px;
}

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

.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: 15px;
  top: 12px;
}

.c-accordion--faq .c-accordion__body {
  padding-left: 3.6rem;
  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: #fff;
  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 #ddd;
}

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

.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: #ccc;
  width: 100%;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.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: #333;
  border-color: #003486;
  border-top-width: 2px;
  border-bottom-width: 0;
}

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

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

.c-tab__to-list a {
  border-radius: 3px;
  background-color: #eef0f4;
  padding: .3em .7em;
  display: inline-block;
  color: #333;
  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" style="display:none;" 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" style="display:none;" 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: #fff;
  border-radius: 3px;
  width: 1980;
  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: #fff;
  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: 18px;
}

.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/dummy/1500x500.png" alt=""></a>
      </li>
      <li class="swiper-slide">
        <a href=""><img src="/assets/img/dummy/1500x500.png" alt=""></a>
      </li>
      <li class="swiper-slide">
        <a href=""><img src="/assets/img/dummy/1500x500.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;
  margin-bottom: 24px;
}

.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: rgba(0, 0, 0, 0.5);
  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: static;
  margin-top: 1em;
}

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

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

/*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-hover"><img src="/assets/img/dummy/400x250.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-hover"><img src="/assets/img/dummy/400x250.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-hover"><img src="/assets/img/dummy/400x250.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-hover"><img src="/assets/img/dummy/400x250.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: #003486;
}

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

```html_example


<div id="vue-calendar">
  <calendar-list></calendar-list>
</div>



```
*/
.calendar {
  width: 100%;
  background-color: #fff;
}

.calendar__body {
  clear: both;
}

.calendar__week {
  width: 14.28%;
  height: 30px;
  line-height: 30px;
  float: left;
  text-align: center;
  font-weight: bold;
  padding-top: 1%;
}

.calendar__date {
  width: 14.28%;
  height: 120px;
  line-height: 30px;
  float: left;
  text-align: center;
  padding-top: 1%;
}

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


```html_example

<div style="background:#5b5e63; padding: 1em;">
  <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);
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}

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

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

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

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

[aria-expanded="true"] .c-control-offcanvas__icon span {
  background: #fff;
}

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

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

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

.c-control-offcanvas__title {
  display: block;
  font-size: 10px;
  color: #333;
  -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
          transform: scale(0.9);
}

[aria-expanded="true"] .c-control-offcanvas__title {
  color: #fff;
}

.c-offcanvas {
  position: fixed;
  left: 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: 10px;
}

.c-offcanvas__list__item {
  border-bottom: 1px solid #ddd;
}

.c-offcanvas__list__item a {
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1.4;
  border-radius: 0;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  padding: 14px 18px;
  display: block;
  text-decoration: none;
}

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

.c-offcanvas__list__item a:focus {
  outline: none;
}

.c-offcanvas__list__item a.is-active {
  background-color: #eef0f4;
}

.c-offcanvas__list__item i {
  font-size: 18px;
  margin-right: 17px;
  position: relative;
  top: 3px;
}

.c-offcanvas__list__item--en {
  display: block;
  margin-top: 1px;
  line-height: 1;
  font-size: 11px;
}

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

.c-scrollbar .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 3px;
}

.c-scrollbar .mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .c-scrollbar .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 3px;
}

.c-scrollbar .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: #999;
}

@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, .is-icon-target-blank:after,
.visual-editor [target="_blank"]:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  font-size: inherit;
  display: none\9;
}

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


```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/*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: #fff;
  text-align: center;
}

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

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

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


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

*/
.is-color-primary-light {
  color: #455F7E !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.is-color-link {
  color: #3498DB !important;
}

.is-bg-color-link {
  background-color: #3498DB !important;
}

.is-color-link-visited {
  color: #3A5898 !important;
}

.is-bg-color-link-visited {
  background-color: #3A5898 !important;
}

.is-color-link-hover {
  color: #3A5898 !important;
}

.is-bg-color-link-hover {
  background-color: #3A5898 !important;
}

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

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

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

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

.is-color-success {
  color: #5CB85C !important;
}

.is-bg-color-success {
  background-color: #5CB85C !important;
}

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

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

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

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

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

.is-bg-color-info {
  background-color: #707070 !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: -10px;
  margin-left: -10px;
}

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

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

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

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

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

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

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

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

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

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

.sg-header__nav .current {
  opacity: 1;
  border-bottom-color: #455F7E;
}

.sg-footer {
  background: #003486;
}

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

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

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

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

.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: 1980px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 60px;
  margin-bottom: 60px;
}

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

.sg-content-block {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

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

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

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

.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: 1980px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 20px;
  padding-left: 20px;
}

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

/* @  lib
 * ------------------------------------------------------------ */
/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.7.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
      transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }
  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
      transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
      transform-origin: center;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceOut {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }
  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }
  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }
  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@font-face {
  font-family: ytpregular;
  src: url(font/ytp-regular.eot);
}

@font-face {
  font-family: ytpregular;
  src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA5sABEAAAAAFCAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABgAAAABwAAAAcZ9iuNUdERUYAAAGcAAAAHQAAACAAdAAET1MvMgAAAbwAAABJAAAAYHUMUrFjbWFwAAACCAAAAKkAAAGKn5XycWN2dCAAAAK0AAAANgAAADYNLQohZnBnbQAAAuwAAAGxAAACZVO0L6dnYXNwAAAEoAAAAAgAAAAIAAAAEGdseWYAAASoAAAGVQAAB4jz86dSaGVhZAAACwAAAAAzAAAANgbKONpoaGVhAAALNAAAACAAAAAkESQLXGhtdHgAAAtUAAAAVAAAARxOmwVwbG9jYQAAC6gAAAAjAAAAkFoEXRRtYXhwAAALzAAAACAAAAAgAWoB625hbWUAAAvsAAAA+wAAAeok3Eb+cG9zdAAADOgAAADAAAABN99tv1lwcmVwAAANqAAAALkAAAFY3I6ikndlYmYAAA5kAAAABgAAAAbHMlGnAAAAAQAAAADMPaLPAAAAAM3Nk7QAAAAAzc13sXjaY2BkYGDgA2IJBhBgYmAEQjcgZgHzGAAHTAB5AAAAeNpjYGbZwDiBgZWBhdWY5SwDA8MsCM10liGNKQ3IB0rBASMDEgj1DvdjcGDgfcDAlvYPqJJVldEZpoZVkuUZkFJgYAQAUUULewAAAHjaY2BgYGaAYBkGRgYQaAHyGMF8FoYMIC3GIAAUYQOyeBkUGKIYqhgWKHAp6CvEP2D4/x+sAyTuyJAIFGeAizP+//r/8f/D//f+n/HA8oHo/WcKblDzsQBGoOkwSUYmIMGErgDiRLyAhZWNnYOTi5uHl49fQFBIWERUTFxCUkpaRhYiLyevoKikrKKqpq6hqaWto6unb2BoZGxiambOQF1gQZYuAIQnH4IAAAAAAAAAAAABegEnAHEAswC9AOAA5QD+ARcBIwBdAHIBtgBcAGAAZgByAI8AogErAbIAUwBEBREAAHjaXVG7TltBEN0NDwOBxNggOdoUs5mQxnuhBQnE1Y1iZDuF5QhpN3KRi3EBH0CBRA3arxmgoaRImwYhF0h8Qj4hEjNriKI0Ozuzc86ZM0vKkap36WvPU+ckkMLdBs02/U5ItbMA96Tr642MtIMHWmxm9Mp1+/4LBpvRlDtqAOU9bykPGU07gVq0p/7R/AqG+/wf8zsYtDTT9NQ6CekhBOabcUuD7xnNussP+oLV4WIwMKSYpuIuP6ZS/rc052rLsLWR0byDMxH5yTRAU2ttBJr+1CHV83EUS5DLprE2mJiy/iQTwYXJdFVTtcz42sFdsrPoYIMqzYEH2MNWeQweDg8mFNK3JMosDRH2YqvECBGTHAo55dzJ/qRA+UgSxrxJSjvjhrUGxpHXwKA2T7P/PJtNbW8dwvhZHMF3vxlLOvjIhtoYEWI7YimACURCRlX5hhrPvSwG5FL7z0CUgOXxj3+dCLTu2EQ8l7V1DjFWCHp+29zyy4q7VrnOi0J3b6pqqNIpzftezr7HA54eC8NBY8Gbz/v+SoH6PCyuNGgOBEN6N3r/orXqiKu8Fz6yJ9O/sVoAAAAAAQAB//8AD3jaTZVrbBxXFcfvufNe72Nmdx77tmfHO2N76117784OTr154YAbR7RQuUQhttoSuXZKFQVKKYqgiFJAgkpIkVClIn8opSomjXY3VHHTFldEIYpay1hR+ID4Bha27FoIEQGpd8Idu4lY7c6eOfee//2f3+zeizAaQwif4iYRgwRUbgGqjLYFNvVxtcVzfxltM5iGqMUEaS5ItwU+vTPahiBPFFMpmoo5hnv8XnjFn+Um7/xmjF1GCLHoPf+fgsUVEYcSKIcGkYbaWYxKLZ3bgGa50qpACQ0NeyYoYILaDTqpurUK2FZBUYlJY8ukEc0egLpbo+kY8O/BQcx2dvwP2Fh6/Q+Gl19fyroubHmer7rpjHllPZ/NKB+tp2/4/TzxSx0zo/74uUY29vJZOEHIfng4lzz7cjyXzn/jJwqCwCOLdj2iPSP3F/hUAHF3v+Cviee5DIqhJDLRACLoPGpHECq1M7Sd5iDZ/W6zQW8mu9Ecql7SI6xYaiOpnxCydwPNWqWJ/tSSjY1mqtqU5ZYNpWal2pJiGy0XSi1bVuKX1Fyh1GuMoJYeUeJvy/GEVbTpfTOjHJRVzUim0tlcwekbKD1QrgR5M97OV8nIyMjQsKPUEKWGNEVFFBwqEs/yHMEVFMM1PIc4FhiWQVxHcxjD0zzXEkgbmHe5G1eA9T955453xd+B9tbpi6vj10+fvj6+evH0Fju7vPDU5szVY8euzmw+tXABv7kEov/v33WOv+v/C8LG9M2xD19/EquzCyuHVuY6R25Obz35+odw4NDKwuzWHAK86q9x21wKYYQkjFeZ3M5f/TUmw6Qo12P+38Wf0zEZpVABlVANfQu1owHXXMD1AdIyQhvNgeou2b1LAuhAkVwyExRps/ppAE230qrTX1MrEVXil5W4qlm9thMAMpR2MtVHAbXMnBJvZ8oVGjdZ5XK6u6cwNExqdNJ9dnm4D+8eIeYeM7hH0b3H9bcQuczdeH75ef+TxTveO/5tuDK2Mrs5d+HmzQtzm7MrbP6ZqxMrrz2+vf34aysTV5+5iN9YhMi51W93Tiz5/wFp+ujy/MntGXx+dfrjqflrO788Ob989MaMP716+Nr8FOpCjbvnw032BUrm82gKfQc10SJaAwwZGINHEUrksaEndI3XCppBavWaU7Nrda/u7QfPsnmBF1ReK4NjCxbkgVRJdW/MdmiyjHkhCgKvGkrNq+uGngPLUDXVioJTcGxONWguENOIYmkq1lQqaDu2q1AqKi6qRh6CN0uqhlkn1WIwt1Z3FTqH6lt2kWLkqZpQ2F1H4D3X1CzFUkCp1R8EVaeKGr3mgXpyd3OKZTcgioMi3qImqA2FaFSYrkHd7BYESnSMdqAx1HNgg/6pG0Bo95RAGehqoNAuaRHR90wGdXyJtkAJ1DxSDVQCfS8ocui+EohqagNjFroniyLAOYbBgvSQxuXxiUSCGQXReJBnjafhbf6xBs8P9ZclLLJdTJfdL3bLRsgd50Nf52P7JIWjInYqFuZhUGErucF0Qj/zNJtPGArDz7EYFi0chvSpw8C/mJRgRVLfgrEf7RvowhyjJ3JPfPlX/h8N/6fZryX7bh/pJsPj4QLX9Ra89NL3QQkljmOqnognU6HcxKkoI/JsaJ8cDcfCqZAMC2cfFeSoHu+WFEmWzIQqx8PVmCThSFqPKqLIsgxJx0QYZt1iocjgfrPbjIoiltkXxzxTlE5FVTL1zb7YmTOSzXGiEBU0ZgHzXexjd9HklDtTc2P7iR4/Wmqk/jGhfZXjZW1bYFVp3y01G+ocrh/K9VST3+05OUsaEnAYGKZRfWIpDQaXT2Ej2/vCl1S5nNe7jHq5eCAlM7rOpFx8PP1Zf/NzCUdkpXjUhHmdfdi/Xv31D6WccPAIDjNMmPnBzC+ErAipZzPf++LkQyGRhTDEpCNkbmLpz8892zmE3+8swq1YODIqf2Z7lO8RdJHn7RS8kpY6r0qhAg7xXIHnhViu+zBDbhcx16UOfGVgaGkoXe6LhwS+h7NgSa+vR7ESZvPyq6VUqN+SC0ZSTPm3oETGoxGIh/p60w3naIyJ/Gywf9CMnnAemR3524hT5DErxOwBhR55COMw3e+u0T0tOEsR0JMx+NBHftD/AJ+D/f7v/TW+9t+P+Bo9e/7vNYz+By6FsKkAAAB42mNgZGBgYGRwbI8IWhzPb/OVQZ6DAQTOni3fCKP/+/x7yrOBNRTI5WBgAokCAG3mDbAAeNpjYGRgYFX9t5eBgeftf5//WTwbGIAiKMAdAJycBph42mN6w+DCwcDAAMIsZ8D0HhBNLIap52D478fBwHQRyvbBpZ7nLYMtKeZjt5OJhxT1TKsYGFhDETTjcSAG0gyPoRgozigIpL0hNEiOBcgFAEBoNC142mNgYNCBwjoccALDBEY9RhsgPIMMmZcRhHtIhkcA9pQspAAAAQAAAEcBVAALAAAAAAACAAEAAgAWAAABAACTAAAAAHjalZCxTgJBFEXPApJoYYgF9VZUSIAFTdDCnmiIgsTKsASQuGiCu0YaCr4OfomKOzsTCHRmMzPn3blz38sCFyzJ4uXOgbKWZY+8KssZLqk7zkp9cJyjSOT4jD9WjvPSt46vKHoFx2txyfGGqnfPO18kyohSGjBjJPqRFmqPmWolWkZ9o0uHZ/EkfTNgTo0KVX017ujRps+TyDqvT7xW9U/UV1Vz9ZryrQn8o8QOL1JsdVA/5IwZpv7f/YsKTW50O1PqpzKNZyw1UnKov2c9dbkD7c1/zdhXFSrNdIz3HbuaJFH1KM9CZyDN3N3SoiFupfP66mbOYAd8k0EGAHjabc05TwJhHITxZ0BBBc/P4IkI7y4sh0dBsosHKiqHeLUiiTE0FH56Xdl/6TS/ZIoZUszzM+ad/3IOSilNmm122GWPfQ4ocEiRI0qUcXj4VKgSUKNOgybHnHDKGSER7Xjjgkuu6HDNDbd0ueOeB3r0GTDkkRFPPPPCK29a0KIyympJy1pRTnmtak3r2tCmtjLjz+/ph5edfU2cc2Fiy/3px4Xpmb5ZMatmYNbMutkwm2Yr0W8nBnOj+OcXVDk0PnjaRc67DoJAEAVQFuT9fqsJCSZ2+w12QkNjrCCx9w+sbSy19DsGK/9Ob3RZujk3k7nzZp8bsbvSkXXoR8Yew9gavN9QNHSUHTFch4oMfuoV0uqGNL4nv25emq3yHzzADwVcwOsFHMCtBWzAWQlYgJ0ImIA1rRmAeRbQAWM6vQD04A9GgXglRBo4Kh+19gJGYDgzBqOnZALGO8kUTLaSGZhWkjmYrSULMA8kS7CYi5ZgKTlQxr/W1F5aAAAAAAFRp8cxAAA=) format("woff"), url(font/ytp-regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

.mb_YTPlayer:focus {
  outline: 0;
}

.YTPWrapper {
  display: block;
  -webkit-transform: translateZ(0) translate3d(0, 0, 0);
          transform: translateZ(0) translate3d(0, 0, 0);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mb_YTPlayer .loading {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.51);
  text-align: center;
  padding: 2px 4px;
  border-radius: 5px;
  font-family: "Droid Sans", sans-serif;
  -webkit-animation: fade .1s infinite alternate;
  animation: fade .1s infinite alternate;
}

@-webkit-keyframes fade {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade {
  0% {
    opacity: .5;
  }
  100% {
    opacity: 1;
  }
}

.YTPFullscreen {
  display: block !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  border: none !important;
  opacity: 1 !important;
  background-color: #000 !important;
  padding: 0 !important;
}

.inlinePlayButton {
  font-family: ytpregular;
  font-size: 45px;
  color: #fff;
  text-align: center;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 80px;
  height: 80px;
  line-height: 80px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  opacity: .8;
  -webkit-transition: all .4s;
  transition: all .4s;
  -webkit-transform: scale(1.3);
      -ms-transform: scale(1.3);
          transform: scale(1.3);
}

.mb_YTPlayer:hover .inlinePlayButton {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.inlinePlayButton:hover {
  background-color: black;
  -webkit-transform: scale(1.3) !important;
      -ms-transform: scale(1.3) !important;
          transform: scale(1.3) !important;
}

.mbYTP_wrapper iframe {
  max-width: 8000px !important;
}

.inline_YTPlayer {
  margin-bottom: 20px;
  vertical-align: top;
  position: relative;
  left: 0;
  overflow: hidden;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.5);
}

.inline_YTPlayer img {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
}

.mb_YTPBar, .mb_YTPBar .buttonBar {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 0;
  padding: 5px;
  width: 100%;
}

.mb_YTPBar .ytpicon {
  font-size: 20px;
  font-family: ytpregular;
}

.mb_YTPBar .mb_YTPUrl.ytpicon {
  font-size: 30px;
}

.mb_YTPBar {
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
  display: block;
  height: 10px;
  background: #333;
  position: fixed;
  bottom: 0;
  text-align: left;
  z-index: 1000;
  font: 14px/16px sans-serif;
  color: #fff;
  opacity: .1;
}

.mb_YTPBar.visible, .mb_YTPBar:hover {
  opacity: 1;
}

.mb_YTPBar .buttonBar {
  -webkit-transition: all .5s;
  transition: all .5s;
  background: 0 0;
  font: 12px/14px san-serif;
  position: absolute;
  top: -30px;
  height: 40px;
}

.mb_YTPBar:hover .buttonBar {
  background: rgba(0, 0, 0, 0.4);
}

.mb_YTPBar span {
  display: inline-block;
  font: 16px/20px sans-serif;
  position: relative;
  width: 30px;
  height: 25px;
  vertical-align: middle;
}

.mb_YTPBar span.mb_YTPTime {
  width: 130px;
}

.mb_YTPBar span.mb_OnlyYT, .mb_YTPBar span.mb_YTPUrl {
  position: absolute;
  width: auto;
  display: block;
  top: 6px;
  right: 10px;
  cursor: pointer;
}

.mb_YTPBar span.mb_YTPUrl img {
  width: 60px;
}

.mb_YTPBar span.mb_OnlyYT {
  left: 300px;
  right: auto;
}

.mb_YTPBar span.mb_OnlyYT img {
  width: 25px;
}

.mb_YTPBar span.mb_YTPUrl a {
  color: #fff;
}

.mb_YTPBar .mb_YTPMuteUnmute, .mb_YTPBar .mb_YTPPlayPause, .mb_YTPlayer .mb_YTPBar .mb_YTPPlayPause img {
  cursor: pointer;
}

.mb_YTPBar .mb_YTPProgress {
  height: 10px;
  width: 100%;
  background: #222;
  bottom: 0;
  left: 0;
}

.mb_YTPBar .mb_YTPLoaded {
  height: 10px;
  width: 0;
  background: #444;
  left: 0;
}

.mb_YTPBar .mb_YTPseekbar {
  height: 10px;
  width: 0;
  background: #bb110e;
  bottom: 0;
  left: 0;
  -webkit-box-shadow: rgba(82, 82, 82, 0.47) 1px 1px 3px;
          box-shadow: rgba(82, 82, 82, 0.47) 1px 1px 3px;
}

.mb_YTPBar .YTPOverlay {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: "flat";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.YTPOverlay.raster {
  background: url(images/raster.png);
}

.YTPOverlay.raster.retina {
  background: url(images/raster@2x.png);
}

.YTPOverlay.raster-dot {
  background: url(images/raster_dot.png);
}

.YTPOverlay.raster-dot.retina {
  background: url(images/raster_dot@2x.png);
}

.mb_YTPBar .simpleSlider {
  position: relative;
  width: 100px;
  height: 10px;
  border: 1px solid #fff;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-right: 10px;
  cursor: pointer !important;
  border-radius: 3px;
}

.mb_YTPBar.compact .simpleSlider {
  width: 40px;
}

.mb_YTPBar.compact span.mb_OnlyYT {
  left: 260px;
}

.mb_YTPBar .simpleSlider.muted {
  opacity: .3;
}

.mb_YTPBar .level {
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.mb_YTPBar .level.horizontal {
  height: 100%;
  width: 0;
}

.mb_YTPBar .level.vertical {
  height: auto;
  width: 100%;
}

/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.bx-wrapper img {
  max-width: 100%;
  display: block;
}

.bxslider {
  margin: 0;
  padding: 0;
  /*fix flickering when used background-image instead of <img> (on Chrome)*/
  -webkit-perspective: 1000;
}

ul.bxslider {
  list-style: none;
}

.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}

/** THEME
===================================*/
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}

/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}

/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}

.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}

.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}

/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
}

.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}

.bx-wrapper .bx-next {
  right: 10px;
}

.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}

/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}

/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}

.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

.bx-wrapper {
  margin: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
}

.bxslider img {
  width: 100% !important;
  height: auto !important;
}

.mCustomScrollbar {
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom;
}

.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}

.mCustomScrollBox {
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: 0;
  direction: ltr;
}

.mCSB_container {
  overflow: hidden;
  width: auto;
  height: auto;
}

.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
}

.mCSB_scrollTools {
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_outside + .mCSB_scrollTools {
  right: -26px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px;
}

.mCSB_scrollTools .mCSB_draggerContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger {
  cursor: pointer;
  width: 100%;
  height: 30px;
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  border-radius: 16px;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px;
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonUp {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}

.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px;
  height: 100%;
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px;
  margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft, .mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}

.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}

.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper {
  margin-right: 0;
  margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
  margin-left: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

.mCSB_scrollTools, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
  transition: opacity .2s ease-in-out,background-color .2s ease-in-out;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar {
  -webkit-transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;
  transition: width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)";
}

.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)";
}

.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

.mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight, .mCSB_scrollTools .mCSB_buttonUp {
  background-image: url(mCSB_buttons.png);
  background-repeat: no-repeat;
  opacity: .4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
}

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
}

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
}

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
}

.mCSB_scrollTools .mCSB_buttonDown:hover, .mCSB_scrollTools .mCSB_buttonLeft:hover, .mCSB_scrollTools .mCSB_buttonRight:hover, .mCSB_scrollTools .mCSB_buttonUp:hover {
  opacity: .75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_buttonDown:active, .mCSB_scrollTools .mCSB_buttonLeft:active, .mCSB_scrollTools .mCSB_buttonRight:active, .mCSB_scrollTools .mCSB_buttonUp:active {
  opacity: .9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0;
}

.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}

.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
}

.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger, .mCS-rounded.mCSB_scrollTools .mCSB_dragger {
  height: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px;
  height: 16px;
  margin: -1px 0;
}

.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px;
  width: 16px;
  margin: 0 -1px;
}

.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=);
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px;
}

.mCS-3d-dark.mCSB_scrollTools, .mCS-3d.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  border-radius: 16px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
          box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
          box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  border-radius: 7px;
}

.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical {
  right: 1px;
}

.mCS-3d-thick-dark.mCSB_scrollTools_vertical, .mCS-3d-thick.mCSB_scrollTools_vertical {
  -webkit-box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
          box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal, .mCS-3d-thick.mCSB_scrollTools_horizontal {
  bottom: 1px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  border-radius: 5px;
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  height: 12px;
  width: auto;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
          box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-3d-thick-dark.mCSB_scrollTools {
  -webkit-box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #777;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
          box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-minimal.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0;
}

.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px;
}

.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical, .mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical {
  left: 0;
  right: auto;
}

.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px;
}

.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger, .mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: "alpha(opacity=20)";
  -ms-filter: "alpha(opacity=20)";
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0;
}

.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px;
}

.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight, .mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

/* @  Pages
 * ------------------------------------------------------------ */
.msg_sign {
  max-width: 258px;
  height: 30px;
  margin-left: auto;
}

.msg_sign img {
  width: 100%;
  max-width: 100%;
}

.e-section-heading01.page-contact-heading01 {
  margin-bottom: 50px;
}

.form-info-box {
  margin-bottom: 45px;
}

.form-info-box__item {
  padding: 15px;
}

.form-info-box__heading {
  font-size: 1.5em;
}

.form-btn-box--confirm {
  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;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-btn-box--insert,
.form-btn-box-reapply {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-content:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  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;
  opacity: .2;
  z-index: 9998;
}

.hero-content:after {
  display: block;
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  background-image: url(../img/top/hero-brand.png);
  background-size: contain;
  width: 476px;
  height: 102px;
  z-index: 9998;
  margin-left: 80px;
}

.hero-content__video__elm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-content__slider {
  display: none;
}

.hero-content__slider-body li {
  height: 100vh;
  background: center/cover no-repeat;
  background-position: center center;
}

.hero-content-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("../img/top/main-visual-loading.jpg") center center;
  background-size: cover;
  z-index: 2;
}

.hero-content-loading:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.loader-container {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -60%);
      -ms-transform: translate(-50%, -60%);
          transform: translate(-50%, -60%);
  z-index: 9998;
}

.loader,
.loader:after {
  z-index: 9998;
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

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

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

.loader__text {
  margin-top: -50px;
  color: #fff;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  text-align: center;
  margin-bottom: 0;
}

[data-browser='ie'] .brand-message-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.brand-message-group {
  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;
}

.section-brand-message {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 300px 0 300px;
  overflow-x: hidden;
}

.brand-message-body {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  -webkit-font-feature-settings: 'pkna';
  font-feature-settings: 'pkna';
  letter-spacing: 0.03em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  margin: 0 auto;
  min-height: 535px;
}

.brand-message-title {
  font-size: 1.6875em;
  line-height: 1;
  font-weight: bold;
  margin-right: .5em;
  margin-left: 1.851851852em;
}

.brand-message-text {
  margin: 3.333333333em 0;
}

.brand-message-text p {
  font-size: 1.2em;
  line-height: 2.777777778em;
  margin-left: 4em;
}

.brand-message-text p:last-child {
  margin-left: 0;
}

.brand-message-parallax {
  position: absolute;
  opacity: 0;
}

.brand-message-parallax.parallax-item001 {
  width: 241px;
  height: 142px;
  top: 100px;
  right: 17%;
  -webkit-transform: translate(0%, 0%);
      -ms-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.brand-message-parallax.parallax-item002 {
  position: absolute;
  width: 119px;
  height: 144px;
  top: 240px;
  left: 18%;
  -webkit-transform: translate(0%, 0%);
      -ms-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.brand-message-parallax.parallax-item003 {
  position: absolute;
  width: 190px;
  height: 110px;
  bottom: 180px;
  right: 26%;
  -webkit-transform: translate(0%, 0%);
      -ms-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
}

.parallax-slider {
  width: 100%;
  height: 550px;
  position: relative;
}

.parallax-slider ul {
  height: 550px;
  overflow: hidden;
}

.parallax-slider li {
  position: absolute;
  right: 0;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 140%;
  background: center center no-repeat;
  background-size: cover;
}

.parallax-slider .bx-wrapper img {
  width: 100%;
}

.section-brand-products {
  padding: 170px 0 230px;
}

.brand-products-unit {
  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;
  margin-bottom: 100px;
}

.brand-products-unit:last-child {
  margin-bottom: 0;
}

.brand-products-unit:nth-child(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.brand-products-thumb {
  width: 41.9947507%;
  margin-right: 20px;
  -webkit-transition: .3s;
  transition: .3s;
}

.brand-products-content {
  width: calc(58.0052493% - 20px);
  -webkit-transition: .3s;
  transition: .3s;
}

.brand-products-content__text {
  margin-bottom: 2em;
}

.brand-products-content__text p {
  line-height: 2.5em;
}

.brand-products-content__text p:last-child {
  margin-bottom: 0;
}

.section-recruit {
  padding: 170px 0;
}

.recruit-parallax-unit {
  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;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: 150px;
}

.recruit-parallax-unit:last-child {
  margin-bottom: 0;
}

.recruit-parallax-unit.is-rebirth {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-flow: row-reverse wrap;
          flex-flow: row-reverse wrap;
}

.recruit-parallax-img {
  width: 55%;
  max-width: 55%;
  -webkit-transition: .3s;
  transition: .3s;
}

.recruit-parallax-img img {
  width: 100%;
  display: block;
  max-width: 100%;
  vertical-align: bottom;
}

.recruit-parallax-content {
  width: 45%;
  max-width: 45%;
  -webkit-transform: translate(0%, 5%);
      -ms-transform: translate(0%, 5%);
          transform: translate(0%, 5%);
  -webkit-transition: .3s;
  transition: .3s;
}

.recruit-parallax-content__inner {
  position: relative;
  padding: 0 20% 0 10%;
}

.is-rebirth .recruit-parallax-content__inner {
  padding: 0 10% 0 20%;
}

.recruit-parallax-content-header {
  margin-bottom: 2.5em;
}

.recruit-parallax-content-header__heading {
  display: inline-block;
  line-height: 1;
  font-size: 1.75em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.recruit-parallax-content-header__en {
  display: inline-block;
  padding-left: 20px;
  line-height: 1;
  font-size: 1em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #999;
}

.recruit-parallax-content-header__lead {
  display: block;
  margin-top: .5em;
  line-height: 1;
  font-size: .875em;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.recruit-parallax-content-body__text {
  margin-bottom: 3em;
  font-size: 1.066666667em;
  line-height: 2.5;
}

.recruit-parallax-content-elm {
  position: absolute;
  -webkit-transition: .3s;
  transition: .3s;
}

.recruit-parallax-content-elm.parallax-item001 {
  width: 116px;
  height: 137px;
  right: 10%;
  bottom: 0;
  -webkit-transform: translate(0%, 50%);
      -ms-transform: translate(0%, 50%);
          transform: translate(0%, 50%);
}

.recruit-parallax-content-elm.parallax-item002 {
  width: 140px;
  height: 100px;
  right: 10%;
  bottom: 0;
  -webkit-transform: translate(0%, 50%);
      -ms-transform: translate(0%, 50%);
          transform: translate(0%, 50%);
}

.section-news {
  margin-bottom: 100px;
}

.news-entry-card-group {
  margin: 0 0 80px 50px;
}

.news-entry-card-group__inner {
  position: relative;
  overflow: hidden;
  max-height: 530px;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  width: auto;
  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;
}

.news-entry-card-item {
  border-radius: 5px;
  border: solid 1px #D8D8D8;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-left: 50px;
  width: 23.9769821%;
  min-width: 376px;
}

.news-entry-card-item:first-child {
  margin-left: 0;
}

.news-entry-card-item a {
  display: block;
  -webkit-box-shadow: rgba(170, 170, 170, 0.15) 0 3px 6px;
          box-shadow: rgba(170, 170, 170, 0.15) 0 3px 6px;
}

.news-entry-card-item a:active, .news-entry-card-item a:link, .news-entry-card-item a:visited, .news-entry-card-item a:focus, .news-entry-card-item a:hover {
  text-decoration: none;
  color: #333;
}

.news-entry-card-item a:hover {
  -webkit-box-shadow: #aaaaaa 0 5px 10px;
          box-shadow: #aaaaaa 0 5px 10px;
}

.news-entry-card-item__img {
  width: 100%;
  position: relative;
  padding-top: 60%;
  overflow: hidden;
}

.news-entry-card-item__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
  width: 100%;
}

.news-entry-card-item__body {
  padding: 25px;
}

.news-entry-card-item__title {
  font-size: 17px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  line-height: 1;
  margin-bottom: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-entry-card-item__date {
  display: inline-block;
  line-height: 1;
  font-size: 14px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #555;
}

.news-entry-card-item__label {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  border: solid 1px #555;
  padding: 3px 10px;
  border-radius: 3px;
  color: #555;
  margin-left: .5em;
}

.section-news-entry-btn {
  text-align: center;
}

[data-inview="elm01"] {
  opacity: 0;
}

[data-inview="elm02"] {
  opacity: 0;
}

.future-unit {
  margin-bottom: 250px;
}

.future-unit::after {
  clear: both;
  content: "";
  display: block;
}

.future-unit-header {
  position: relative;
  width: 45%;
  max-width: 45%;
  float: right;
}

.is-reverth .future-unit-header {
  float: left;
}

.future-unit-media {
  width: 55%;
  max-width: 55%;
  float: left;
}

.is-reverth .future-unit-media {
  float: right;
}

.future-unit-content {
  position: relative;
  width: 45%;
  max-width: 45%;
  float: right;
  line-height: 2.8;
}

.is-reverth .future-unit-content {
  float: left;
}

.future-heading-unit {
  position: relative;
  display: block;
  margin-bottom: 20px;
}

.future-heading-unit:before {
  position: absolute;
  bottom: 0;
  -webkit-transform: translate(0%, -50%);
      -ms-transform: translate(0%, -50%);
          transform: translate(0%, -50%);
  display: block;
  content: '';
  width: 100%;
  height: 4px;
  background: url("../img/common/wave.png") center center repeat-x;
  background-size: contain;
  -webkit-animation: bg/oop 30s linear infinite;
  animation: bgloop 20s linear infinite;
}

@keyframes bgloop {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 280px 0;
  }
}

.future-heading-unit__inner {
  padding: 10px 60px 40px 60px;
}

.future-heading {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 26px;
  line-height: 1.2;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.future-heading__en {
  font-size: 13px;
  line-height: 1.2;
  opacity: .8;
  font-size: 13px;
  font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: bold;
}

.future-media-container {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  /* 最大の横幅 */
}

.future-media-inner {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

.future-media-inner iframe {
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important;
}

.future-symbol {
  position: absolute;
  bottom: 0;
}

.future-symbol--sp {
  display: none;
}

.future-symbol--01 {
  width: 217px;
  height: 125px;
  bottom: -125px;
  right: 30px;
}

.future-symbol--02 {
  width: 182px;
  height: 105.5px;
  bottom: -105.5px;
  right: 30px;
}

.future-symbol--03 {
  width: 192px;
  height: 193px;
  bottom: -193px;
  right: 30px;
}

.future-symbol--04 {
  width: 229px;
  height: 225.5px;
  bottom: -225.5px;
  right: 30px;
  bottom: -451px;
}

@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 (min-width: 1980.001px) {
  html {
    font-size: 15px;
  }
  .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: -10px;
    margin-left: -10px;
  }
  .is-mt0--lg {
    margin-top: 0 !important;
  }
  .is-mb0--lg {
    margin-bottom: 0 !important;
  }
}

@media screen and (min-width: 1580px) {
  html {
    font-size: 15px;
  }
}

@media screen and (max-width: 666.999px) {
  html {
    font-size: 14px;
  }
  .footer-primary {
    display: none;
  }
  .media-info:before {
    content: '現在の表示：L sp';
  }
  .e-section-heading01__inner {
    padding: .5em 2em;
  }
  .e-section-heading01__title {
    font-size: .636363636em;
  }
  .e-heading3 {
    font-size: 1.466666667em;
  }
  .e-button03,
  .entry-btn03,
  .entry-btn-attention03 {
    font-size: 16px;
    padding: 1.6em 1.5em;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }
  .cta-body {
    font-size: 1em;
  }
  .section-brand-products {
    padding: 90px 0;
  }
  .brand-products-thumb {
    width: 100% !important;
    margin-right: 0;
  }
  .brand-products-content {
    width: 100% !important;
  }
  .section-recruit {
    padding: 90px 0;
  }
  .recruit-parallax-unit {
    margin-bottom: 80px;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 3.7333333333vmin;
  }
}

@media screen and (max-width: 413.999px) {
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  pre,
  .e-pre {
    margin-bottom: 16px;
  }
  .footer:after {
    height: 50vw;
  }
  .header {
    height: 60px;
  }
  .header__primary {
    width: 130px;
  }
  body,
  html {
    min-width: 320px;
  }
  .l-block {
    width: 100%;
  }
  .l-block-primary {
    margin-bottom: 20px;
    float: none;
    width: 100%;
  }
  .l-block-secondary {
    float: none;
    width: 100%;
  }
  .visual-editor h2:not(:first-child),
  .visual-editor h3:not(:first-child),
  .visual-editor h4:not(:first-child),
  .visual-editor h5:not(:first-child),
  .visual-editor h6:not(:first-child) {
    margin-top: 0;
  }
  .alignleft {
    float: none;
    margin-right: 0;
  }
  .alignright {
    float: none;
    margin-left: 0;
  }
  .size-thumbnail,
  .size-medium,
  .size-full {
    width: 100%;
  }
  .l-cols--break {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
  .l-cols--break > .l-col1,
  .l-cols--break > .l-col2,
  .l-cols--break > .l-col3,
  .l-cols--break > .l-col4,
  .l-cols--break > .l-col5,
  .l-cols--break > .l-col6,
  .l-cols--break > .l-col7,
  .l-cols--break > .l-col8,
  .l-cols--break > .l-col9,
  .l-cols--break > .l-col10,
  .l-cols--break > .l-col11,
  .l-cols--break > .l-col12 {
    width: auto;
    float: none;
    clear: both;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px !important;
  }
  .l-cols--break > .l-col1::after,
  .l-cols--break > .l-col2::after,
  .l-cols--break > .l-col3::after,
  .l-cols--break > .l-col4::after,
  .l-cols--break > .l-col5::after,
  .l-cols--break > .l-col6::after,
  .l-cols--break > .l-col7::after,
  .l-cols--break > .l-col8::after,
  .l-cols--break > .l-col9::after,
  .l-cols--break > .l-col10::after,
  .l-cols--break > .l-col11::after,
  .l-cols--break > .l-col12::after {
    clear: both;
    content: "";
    display: block;
  }
  .l-flex-boxes {
    margin-right: -1.7142857143%;
    margin-left: -1.7142857143%;
  }
  .l-flex-box {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.5714285714%;
            flex: 0 0 46.5714285714%;
    margin-right: 1.7142857143%;
    margin-left: 1.7142857143%;
    margin-bottom: 10px;
  }
  .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: 16px;
  }
  .e-video-container {
    margin-bottom: 16px;
  }
  .e-video-container iframe {
    height: 30vh;
  }
  .e-gmap {
    margin-bottom: 16px;
  }
  .e-gmap iframe {
    height: 50vh;
  }
  .visual-editor blockquote,
  .e-blockquote {
    margin-bottom: 16px;
  }
  .visual-editor blockquote,
  .e-blockquote {
    padding: 3.4rem 1rem;
  }
  .e-heading-date {
    margin-bottom: 16px;
  }
  .e-heading-group {
    margin-bottom: 20px;
  }
  .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: 16px;
  }
  .visual-editor strong > strong,
  .e-text-catchcopy {
    margin-bottom: 16px;
  }
  .is-text-point {
    padding-right: 0;
  }
  .visual-editor ul,
  .visual-editor ol,
  .e-list {
    margin-bottom: 16px;
  }
  .visual-editor dl,
  .e-dl {
    margin-bottom: 16px;
  }
  .e-list-inline {
    margin-bottom: 16px;
  }
  .visual-editor table caption, .e-table caption, .visual-editor .e-table--borderless caption, .e-table--borderless caption, .visual-editor .e-table--liner caption {
    margin-bottom: 16px;
  }
  .visual-editor table,
  .e-table, .visual-editor .e-table--borderless,
  .e-table--borderless, .visual-editor .e-table--liner {
    margin-bottom: 16px;
  }
  
  .visual-editor table th,
  .e-table th,
  .visual-editor .e-table--borderless th,
  .e-table--borderless th,
  .visual-editor .e-table--liner th {
    width: 30%;
  }
  .visual-editor .e-table--block th,
  .e-table--block th {
    border-bottom: 0;
  }
  .visual-editor .e-table--block th,
  .visual-editor .e-table--block td,
  .e-table--block th,
  .e-table--block td {
    display: block;
    width: auto;
  }
  .visual-editor .e-responsive-table,
  .e-responsive-table {
    position: relative;
    margin-bottom: 16px;
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar,
  .e-responsive-table::-webkit-scrollbar {
    height: 3px;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar-track,
  .e-responsive-table::-webkit-scrollbar-track {
    background: #d4d4d4;
  }
  .visual-editor .e-responsive-table::-webkit-scrollbar-thumb,
  .e-responsive-table::-webkit-scrollbar-thumb {
    background: #333;
  }
  .visual-editor .e-responsive-table:after,
  .e-responsive-table:after {
    display: block;
    padding: .5em 0;
    font-size: .8em;
    text-align: center;
    white-space: nowrap;
    content: "← この表は左右に動かせます。 →";
  }
  .visual-editor .e-responsive-table table,
  .e-responsive-table table {
    width: auto;
    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: 16px;
  }
  .e-box {
    padding: 1rem;
  }
  .e-button,
  .entry-btn,
  .entry-btn-attention {
    padding: 1.285714286em 1.28rem;
  }
  .e-button02,
  .entry-btn02,
  .entry-btn-attention02 {
    padding: 15px 1.44rem;
  }
  .e-button03,
  .entry-btn03,
  .entry-btn-attention03 {
    padding: 1.6em 1.92em;
  }
  .e-button-group {
    margin-bottom: 16px;
  }
  .e-button-group .e-button {
    width: 100%;
  }
  .e-button-group--one-half .e-button {
    width: 50%;
  }
  .e-button--small {
    padding: 0.5142857144em 0.64rem;
  }
  .e-button--large {
    padding: 1.8000000004em 1.6rem;
  }
  .e-button--xlarge {
    padding: 1.8000000004em 1.6rem;
  }
  .e-form-rc-box--2col > div,
  .e-form-rc-box--2col > li,
  .e-form-rc-box--2col > span {
    width: 100%;
  }
  .e-form-step {
    margin-bottom: 16px;
  }
  .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: 16px;
  }
  .e-form-table th {
    border-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    display: block;
    width: auto;
    padding-top: 1.2em;
    padding-bottom: 0;
  }
  .e-form-table td {
    padding-left: 0;
    padding-right: 0;
    display: block;
    width: auto;
    padding-top: 0.7em;
    padding-bottom: 1.2em;
  }
  .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: 16px;
  }
  .e-media__img {
    margin-right: 10px;
    width: 104px;
    height: 69px;
  }
  .e-media__title {
    font-size: 14px;
  }
  .e-media__text + .e-media__text {
    margin-top: 16px;
  }
  .e-media--small .e-media__img {
    margin-right: 10px;
    width: 104px;
    height: 69px;
  }
  .c-breadcrumb {
    border-top: 1px solid #ddd;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    left: 0;
    margin-top: 0;
    margin-bottom: 9px;
  }
  .c-breadcrumb__inner {
    white-space: nowrap;
    overflow: scroll;
    -ms-overflow-style: none;
  }
  .c-pager {
    margin-bottom: 16px;
  }
  .c-pager__next {
    margin-left: 0;
    margin-right: 0;
  }
  .c-pager__prev {
    margin-left: 0;
    margin-right: 0;
  }
  .c-main-visual__title {
    font-size: 1.5em;
  }
  .c-headline {
    margin-bottom: 16px;
  }
  .c-headline__item {
    display: block;
  }
  .c-headline__label {
    display: inline;
  }
  .c-headline__title {
    margin-top: .4em;
  }
  .c-headline-search {
    margin-bottom: 16px;
  }
  .c-headline-search__item {
    margin-bottom: 20px;
  }
  .c-headline-search__title {
    margin-bottom: 0;
  }
  .c-menu {
    margin-bottom: 16px;
  }
  .c-menu__title {
    font-size: 14px;
  }
  .c-anchor-nav {
    margin-bottom: 16px;
  }
  .c-keyword-search {
    margin-bottom: 16px;
  }
  .c-keyword-search__control {
    display: block;
  }
  .c-keyword-search__control-item:before {
    display: none;
  }
  .c-accordion {
    margin-bottom: 16px;
  }
  .c-accordion + .c-accordion {
    margin-top: -16px;
  }
  .c-tab {
    margin-bottom: 16px;
  }
  .c-tab {
    margin-right: -10px;
    margin-left: -10px;
  }
  .c-tab__nav {
    padding: 6px 6px 0;
  }
  .c-tab__body {
    border-width: 1px 0 0;
    padding: 10px;
  }
  .c-modal-dialog {
    width: auto;
    margin-right: 10px;
    margin-left: 10px;
  }
  .c-modal-dialog__scroll {
    padding-right: 10px;
  }
  .c-modal-dialog__title {
    font-size: 16px;
  }
  .c-modal-dialog__button-group {
    margin-top: 16px;
  }
  .swiper-main {
    margin-bottom: 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: #003486;
  }
  .swiper-main .swiper-start.on,
  .swiper-main .swiper-stop.on {
    color: #4f5156;
  }
  .swiper-main .swiper-pagination-bullets {
    margin-top: -2em;
    text-align: left;
    max-width: 80%;
  }
  .swiper-3to2to1 {
    margin-bottom: 16px;
  }
  .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: -10px;
    margin-left: -10px;
  }
  .is-mb-xs {
    margin-bottom: 10px !important;
  }
  .is-mb-small {
    margin-bottom: 16px !important;
  }
  .is-mb-medium {
    margin-bottom: 20px !important;
  }
  .is-mb-large {
    margin-bottom: 20px !important;
  }
  .is-mt0--sm {
    margin-top: 0 !important;
  }
  .is-mb0--sm {
    margin-bottom: 0 !important;
  }
  .sg-html {
    margin-top: 0;
  }
  .sg-container {
    width: auto;
    margin-bottom: 20px;
  }
  .sg-content-block {
    width: 100%;
  }
  .sg-primary-block {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
  .sg-secondary-block {
    position: static;
    top: auto;
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
  }
  .sg-main-contents {
    padding-right: 10px;
    padding-left: 10px;
  }
  div.codeBlock {
    display: none;
  }
}

@media screen and (max-width: 1579.999px) {
  .footer {
    padding-right: 50px;
    padding-left: 50px;
  }
  .footer-primary-col {
    max-width: 220px;
    width: 220px;
  }
  .header__inner {
    padding-right: 50px;
    padding-left: 50px;
  }
  .media-info:before {
    content: '現在の表示：L mid';
  }
  .l-block02 {
    width: 98%;
  }
  .l-block03 {
    width: 98%;
  }
  .l-unit {
    margin-bottom: 140px;
  }
  .e-section-heading01__title {
    font-size: 1.875em;
  }
  .e-card__title {
    font-size: 16px;
  }
  .cta {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .cta-header {
    margin: 0 auto 60px;
  }
  .cta-body {
    margin: 0 auto 60px;
  }
  .c-breadcrumb {
    margin: 0 auto 40px;
  }
  .c-main-visual__bg-img {
    min-height: 400px;
    max-height: 400px;
  }
  .hero-content:after {
    margin-left: 50px;
  }
  .section-brand-message {
    padding: 250px 0;
  }
  .brand-message-text p {
    margin-left: 3em;
  }
  .brand-message-parallax.parallax-item001 {
    width: 216.9px;
    height: 127.8px;
    right: 5%;
  }
  .brand-message-parallax.parallax-item002 {
    width: 107.1px;
    height: 129.6px;
    top: 220px;
    left: 5%;
  }
  .brand-message-parallax.parallax-item003 {
    width: 171px;
    height: 99px;
    bottom: 150px;
    left: 20%;
  }
  .recruit-parallax-content__inner {
    padding: 0 10%;
  }
  .is-rebirth .recruit-parallax-content__inner {
    padding: 0 10%;
  }
  .recruit-parallax-content-elm.parallax-item001 {
    right: 5%;
  }
  .recruit-parallax-content-elm.parallax-item002 {
    bottom: 20px;
    right: 5%;
  }
  .news-entry-card-item {
    margin-left: 40px;
    max-width: 350px;
    min-width: 350px;
  }
  .future-unit {
    margin-bottom: 200px;
  }
}

@media screen and (max-width: 1199.999px) {
  .footer {
    padding-right: 20px;
    padding-left: 20px;
  }
  .footer:after {
    height: 25vw;
  }
  .footer-primary-col {
    width: 170px;
    max-width: 170px;
  }
  .footer-primary-nav__heading {
    font-size: 16px;
  }
  .header__inner {
    padding-right: 40px;
    padding-left: 40px;
  }
  .media-info:before {
    content: '現在の表示：mid';
  }
  .gnav__item a {
    font-size: 15px;
  }
  .gnav__item--en {
    font-size: 10px;
  }
  .l-block02 {
    width: 100%;
  }
  .l-block03 {
    width: 100%;
  }
  .l-entry-block {
    padding: 30px 0;
  }
  .l-unit {
    margin-bottom: 130px;
  }
  .entry .columnImage,
  .visual-editor .columnImage {
    margin-bottom: 30px;
  }
  .e-section-heading01 {
    margin-bottom: 100px;
  }
  .e-heading2 {
    font-size: 24px;
    padding-bottom: 25px;
  }
  .e-heading3 {
    font-size: 1.625em;
  }
  .e-card__body {
    padding: 15px;
  }
  .e-card__title {
    font-size: 15px;
  }
  .e-custom-layout01 .e-heading2 {
    padding-bottom: 25px;
  }
  .c-breadcrumb {
    margin: 0 auto 30px;
  }
  .c-main-visual__bg-img {
    min-height: 300px;
    max-height: 300px;
  }
  .hero-content:after {
    margin-left: 40px;
    bottom: 0px;
  }
  .brand-message-title {
    margin-left: 1.481481481em;
  }
  .brand-message-text p {
    margin-left: 2.5em;
  }
  .brand-message-parallax.parallax-item001 {
    width: 192.8px;
    height: 113.6px;
    top: 110px;
    right: 0;
  }
  .brand-message-parallax.parallax-item002 {
    width: 95.2px;
    height: 115.2px;
    top: 200px;
    left: -1%;
  }
  .brand-message-parallax.parallax-item003 {
    width: 152px;
    height: 88px;
    right: 50%;
    bottom: 190px;
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
            transform: translate(50%, 0);
  }
  .recruit-parallax-img {
    width: 95%;
    max-width: 95%;
    margin-bottom: 30px;
  }
  .recruit-parallax-content {
    padding: 0 5%;
    width: 100%;
    max-width: 100%;
  }
  .recruit-parallax-content__inner {
    padding: 0 !important;
  }
  .recruit-parallax-content-header {
    margin-bottom: 35px;
  }
  .recruit-parallax-content-header__heading {
    font-size: 27px;
  }
  .recruit-parallax-content-header__en {
    font-size: 16px;
  }
  .recruit-parallax-content-header__lead {
    font-size: 14px;
  }
  .recruit-parallax-content-elm.parallax-item001 {
    bottom: 30px;
    right: 3%;
  }
  .recruit-parallax-content-elm.parallax-item002 {
    right: 3%;
  }
  .news-entry-card-group {
    margin: 0 0 40px 40px;
  }
  .news-entry-card-item {
    margin-left: 30px;
    max-width: 300px;
    min-width: 300px;
  }
  .future-unit {
    margin-bottom: 180px;
  }
  .future-unit-content {
    line-height: 2;
  }
  .future-symbol--01 {
    width: 195.3px;
    height: 112.5px;
    bottom: -83.3333333333px;
  }
  .future-symbol--01 {
    width: 173.6px;
    height: 100px;
    bottom: -71.4285714286px;
  }
  .future-symbol--02 {
    width: 163.8px;
    height: 94.95px;
    bottom: -70.3333333333px;
  }
  .future-symbol--02 {
    width: 145.6px;
    height: 84.4px;
    bottom: -60.2857142857px;
  }
  .future-symbol--03 {
    width: 172.8px;
    height: 173.7px;
    bottom: -128.666666667px;
  }
  .future-symbol--03 {
    width: 153.6px;
    height: 154.4px;
    bottom: -110.285714286px;
  }
  .future-symbol--04 {
    width: 206.1px;
    height: 202.95px;
    bottom: -150.333333333px;
  }
  .future-symbol--04 {
    width: 183.2px;
    height: 180.4px;
    bottom: -128.857142857px;
  }
}

@media screen and (max-width: 947.999px) {
  .footer {
    padding-right: 30px;
    padding-left: 30px;
  }
  .footer-primary-col {
    width: 140px;
    max-width: 140px;
  }
  .footer-primary-nav__heading {
    font-size: 15px;
  }
  .footer-primary-nav__body li {
    font-size: 13px;
  }
  .header__inner {
    padding-right: 20px;
    padding-left: 20px;
  }
  .header__primary {
    width: 180px;
  }
  .media-info:before {
    content: '現在の表示：S mid';
  }
  .gnav__item {
    padding: 15px 15px;
  }
  .l-block02 {
    margin-bottom: 60px;
  }
  .l-block03 {
    margin-bottom: 60px;
  }
  .l-entry-block {
    padding: 20px 0;
  }
  .l-unit {
    margin-bottom: 100px;
  }
  .e-section-heading01 {
    margin-bottom: 90px;
  }
  .e-section-heading01__title {
    font-size: 1.75em;
  }
  .e-section-heading01__en {
    margin-top: .5em;
  }
  .e-heading2 {
    font-size: 22px;
  }
  .e-heading4 {
    margin: 40px 0 20px;
  }
  .e-heading-unit01__title {
    font-size: 22px;
  }
  .e-button03,
  .entry-btn03,
  .entry-btn-attention03 {
    font-size: 18px;
  }
  .e-card__title {
    font-size: 15px;
  }
  .e-card02__title {
    font-size: 16px;
  }
  .cta-header {
    margin: 0 auto 50px;
  }
  .cta-body {
    margin: 0 auto 50px;
  }
  .e-custom-layout01-header,
  .e-custom-layout01-media,
  .e-custom-layout01-content {
    width: 100%;
    max-width: 100%;
  }
  .hero-content:after {
    margin-left: 20px;
    width: 238px;
    height: 51px;
  }
  .section-brand-message {
    padding: 200px 0;
  }
  .brand-message-title {
    margin-left: 1.111111111em;
  }
  .brand-message-text p {
    font-size: 1.1em;
    margin-left: 2em;
  }
  .brand-message-parallax.parallax-item001 {
    width: 168.7px;
    height: 99.4px;
    top: 90px;
  }
  .brand-message-parallax.parallax-item002 {
    width: 83.3px;
    height: 100.8px;
  }
  .brand-message-parallax.parallax-item003 {
    width: 133px;
    height: 77px;
    right: 50%;
    bottom: 170px;
    -webkit-transform: translate(50%, 0);
        -ms-transform: translate(50%, 0);
            transform: translate(50%, 0);
  }
  .section-brand-products {
    padding: 200px 0;
  }
  .brand-products-thumb {
    width: 50%;
  }
  .brand-products-content {
    width: calc(50% - 20px);
  }
  .section-recruit {
    padding: 150px 0;
  }
  .recruit-parallax-unit {
    margin-bottom: 120px;
  }
  .recruit-parallax-content-header__heading {
    font-size: 25px;
  }
  .recruit-parallax-content-header__en {
    font-size: 15px;
  }
  .recruit-parallax-content-header__lead {
    font-size: 13px;
  }
  .section-news {
    margin-bottom: 80px;
  }
  .news-entry-card-item {
    margin-left: 20px;
    max-width: 270px;
    min-width: 270px;
  }
  .future-unit {
    margin-bottom: 150px;
  }
  .future-unit-content {
    line-height: 2;
  }
  .future-heading-unit__inner {
    padding: 10px 40px 40px 40px;
  }
  .future-heading {
    font-size: 24px;
  }
  .future-symbol--01 {
    width: 162.75px;
    height: 93.75px;
    bottom: -62.5px;
  }
  .future-symbol--02 {
    width: 136.5px;
    height: 79.125px;
    bottom: -52.75px;
  }
  .future-symbol--03 {
    width: 144px;
    height: 144.75px;
    bottom: -96.5px;
  }
  .future-symbol--04 {
    width: 171.75px;
    height: 169.125px;
    bottom: -112.75px;
  }
}

@media screen and (max-width: 767.999px) {
  .footer:before {
    height: 50px;
  }
  .footer:after {
    height: 35vw;
  }
  .footer-primary-col {
    width: 120px;
    max-width: 120px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .footer-primary-nav__heading {
    font-size: 14px;
  }
  .footer-primary-nav__body li {
    font-size: 12px;
  }
  .footer-secondary {
    padding-bottom: 0;
  }
  .footer-secondary-row {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer-secondary-row__child {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer-secondary-logo {
    margin-left: 15px;
    margin-right: 15px;
  }
  .footer-secondary-info p {
    margin-left: 15px;
    margin-right: 15px;
  }
  .header__secondary--pc {
    display: none;
  }
  .header__secondary--sp {
    display: block;
  }
  .header__secondary__nav-control {
    display: block;
    position: absolute;
    right: 15px;
    top: 17px;
    z-index: 9999;
  }
  .media-info:before {
    content: '現在の表示：Tab';
  }
  .is-step02 {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    top: -100%;
  }
  .is-step03.header {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .l-wrapper {
    margin-top: 60px;
  }
  .l-container {
    padding-right: 20px;
    padding-left: 20px;
  }
  .l-block {
    width: 100%;
  }
  .l-block02 {
    width: 98%;
  }
  .l-block03 {
    width: 98%;
  }
  .l-entry-block {
    padding: 20px 0;
  }
  .l-unit {
    margin-bottom: 50px;
  }
  .visual-editor p {
    line-height: 2.207142857;
  }
  .e-section-heading01 {
    margin-bottom: 80px;
  }
  .e-section-heading01__title {
    font-size: 1.714285714em;
  }
  .e-section-heading01__en {
    margin: 0;
  }
  .e-heading2 {
    padding-bottom: 20px;
    font-size: 20px;
  }
  .e-heading3 {
    font-size: 1.5em;
  }
  .e-heading4 {
    font-size: 22px;
  }
  .e-heading-unit01__title {
    font-size: 22px;
  }
  .e-card__title {
    margin-bottom: 60px;
  }
  .cta-body {
    font-size: 1.071428571em;
  }
  .e-custom-layout01 .e-heading2 {
    padding-bottom: 20px;
  }
  .e-custom-layout01-media {
    margin-bottom: 20px;
  }
  .c-breadcrumb {
    margin: 0 auto 30px;
  }
  .c-breadcrumb__inner {
    font-size: 12px;
  }
  .c-pagenavi {
    margin-top: 30px;
  }
  .c-main-visual__bg-img {
    min-height: 200px;
    max-height: 200px;
  }
  .c-summary__item {
    margin: 0 10px 10px 0;
    width: calc(((100% - 10px * 1) / 2));
  }
  .c-summary__item:nth-child(4n) {
    margin-right: 10px;
  }
  .c-summary__item:nth-child(2n) {
    margin-right: 0;
  }
  .c-summary02__item {
    margin: 0 10px 10px 0;
    width: calc(((100% - 10px * 1) / 2));
  }
  .c-summary02__item:nth-child(3n) {
    margin-right: 10px;
  }
  .c-summary02__item:nth-child(2n) {
    margin-right: 0;
  }
  .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: -20px;
    margin-left: -20px;
  }
  .is-mt0--md {
    margin-top: 0 !important;
  }
  .is-mb0--md {
    margin-bottom: 0 !important;
  }
  .sg-content-block {
    width: 100%;
  }
  .sg-main-contents {
    padding-right: 20px;
    padding-left: 20px;
  }
  .form-info-box {
    margin-bottom: 40px;
  }
  .form-info-box__heading span {
    margin-left: 0;
  }
  .section-brand-message {
    padding: 130px 0 150px;
  }
  .brand-message-body {
    position: relative;
    z-index: 20;
    -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
  .brand-message-title {
    text-align: center;
  }
  .brand-message-text p {
    margin: 0;
    text-align: center;
  }
  .brand-message-parallax.parallax-item001 {
    width: 192.8px;
    height: 113.6px;
    right: -10%;
  }
  .brand-message-parallax.parallax-item002 {
    width: 95.2px;
    height: 115.2px;
    left: -1%;
  }
  .brand-message-parallax.parallax-item003 {
    width: 152px;
    height: 88px;
    left: 15%;
    right: 0;
    bottom: 90px;
  }
  .section-brand-products {
    padding: 120px 0 150px;
  }
  .section-brand-products-heading {
    margin-bottom: 50px;
  }
  .section-recruit {
    padding: 120px 0 150px;
  }
  .recruit-parallax-unit {
    margin-bottom: 100px;
  }
  .section-news {
    margin-bottom: 70px;
  }
  .news-entry-card-group {
    margin: 0 0 50px 10px;
  }
  .news-entry-card-item {
    max-width: 240px;
    min-width: 240px;
  }
  .future-unit {
    margin-bottom: 30px;
  }
  .future-unit-header {
    max-width: 100%;
    width: 100%;
    float: none;
  }
  .future-unit-media {
    max-width: 100%;
    width: 100%;
    float: none;
  }
  .future-unit-content {
    max-width: 100%;
    width: 100%;
    float: none;
  }
  .future-unit-content {
    line-height: 2;
  }
  .future-heading-unit__inner {
    padding: 5%;
  }
  .future-heading {
    font-size: 22px;
  }
  .future-media-container {
    pointer-events: auto;
  }
  .future-symbol {
    display: none;
  }
  .future-symbol--sp {
    display: block !important;
  }
  .future-symbol--01 {
    bottom: auto;
    right: 10px;
    top: 30px;
    width: 108.5px;
    height: 62.5px;
  }
  .future-symbol--02 {
    bottom: auto;
    right: 10px;
    top: 40px;
    width: 91px;
    height: 52.75px;
  }
  .future-symbol--03 {
    bottom: auto;
    right: 10px;
    top: 30px;
    width: 96px;
    height: 96.5px;
  }
  .future-symbol--04 {
    bottom: auto;
    right: 10px;
    top: 10px;
    width: 114.5px;
    height: 112.75px;
  }
}

@media screen and (min-width: 1580px) and (max-width: 1980px) {
  .media-info:before {
    content: '現在の表示：PC';
  }
  .brand-message-parallax.parallax-item001 {
    right: 12%;
  }
  .brand-message-parallax.parallax-item002 {
    left: 15%;
  }
}

@media screen and (min-width: 320px) and (max-width: 413.999px) {
  .media-info:before {
    content: '現在の表示：sp';
  }
  .l-container {
    padding-right: 10px;
    padding-left: 10px;
  }
  .l-block02 {
    width: 100%;
    margin-bottom: 40px;
  }
  .l-block03 {
    width: 100%;
    margin-bottom: 40px;
  }
  .l-entry-block {
    padding: 10px 0;
  }
  .l-unit {
    margin-bottom: 30px;
  }
  .e-section-heading01 {
    margin-bottom: 30px;
  }
  .e-heading2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 20px;
  }
  .e-heading4 {
    margin: 40px 0 15px;
    font-size: 20px;
  }
  .e-heading-unit01 {
    margin-bottom: 20px;
  }
  .e-heading-unit01__title {
    font-size: 20px;
  }
  .visual-editor .e-table--liner {
    display: block;
    width: 100%;
  }
  .visual-editor .e-table--liner tbody, .visual-editor .e-table--liner tr, .visual-editor .e-table--liner th, .visual-editor .e-table--liner td {
    display: block;
    width: 100%;
  }
  .visual-editor .e-table--liner th {
    border-bottom: none;
    line-height: 1.2;
    padding-top: 14px;
    padding-bottom: 0;
  }
  .visual-editor .e-table--liner td {
    display: block;
    width: 100%;
  }
  .e-card {
    border-radius: 0;
    border-top: solid 1px #D8D8D8;
    border-bottom: none;
    border-right: none;
    border-left: none;
  }
  .e-card:last-child {
    border-bottom: solid 1px #D8D8D8;
  }
  .e-card a {
    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;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 10px;
  }
  .e-card__img {
    width: 38.028169%;
    padding-top: 22.8169014%;
  }
  .e-card__body {
    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;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 57.7464789%;
    padding: 0;
  }
  .e-card__title {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    margin-bottom: 0;
  }
  .e-card02__title {
    font-size: 15px;
  }
  .e-custom-layout01 .e-heading2 {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  .c-breadcrumb {
    margin: 0 auto 25px;
    padding: 8px 10px 10px;
  }
  .c-breadcrumb__inner {
    font-size: 11px;
    line-height: 1;
  }
  .c-pagenavi {
    margin-top: 20px;
  }
  .c-pager__item {
    width: 100%;
  }
  .c-pager__item:nth-child(2) {
    border-top: none;
  }
  .c-main-visual__bg-img {
    min-height: 150px;
    max-height: 150px;
  }
  .c-summary__item {
    width: 100%;
    margin: 0;
  }
  .e-section-heading01.page-contact-heading01 {
    margin-bottom: 20px;
  }
  .form-info-box {
    margin-bottom: 30px;
  }
  .form-info-box__item {
    margin-top: 25px;
  }
  .form-info-box__item:first-child {
    margin-top: 0;
  }
  .form-info-box__heading span {
    margin-left: 0;
  }
  .hero-content:after {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    margin: 0;
    width: 90%;
    height: 0;
    padding-top: 19.25%;
    background-size: contain;
  }
  .hero-content__video {
    display: none;
  }
  .hero-content__slider {
    display: block;
  }
  .section-brand-message {
    padding: 90px 0 100px;
  }
  .brand-message-title {
    letter-spacing: .1em;
    font-size: 18px;
  }
  .brand-message-text {
    margin-top: 75px;
    padding: 0 5%;
  }
  .brand-message-text p {
    font-size: 13px;
    line-height: 2.5em;
  }
  .brand-message-parallax.parallax-item001 {
    width: 120.5px;
    height: 71px;
    top: 30px;
  }
  .brand-message-parallax.parallax-item002 {
    width: 59.5px;
    height: 72px;
    top: auto;
    bottom: 40px;
    left: auto;
    right: 23%;
  }
  .brand-message-parallax.parallax-item003 {
    width: 95px;
    height: 55px;
    top: 110px;
    bottom: auto;
    right: auto;
    left: -2%;
  }
  .parallax-slider {
    height: 180px;
  }
  .parallax-slider ul {
    height: 180px;
  }
  .section-brand-products {
    padding: 90px 0;
  }
  .section-brand-products-heading {
    margin-bottom: 0;
  }
  .brand-products-unit {
    margin-bottom: 60px;
  }
  .brand-products-content__btn {
    text-align: center;
  }
  .section-recruit {
    padding: 70px 0;
  }
  .recruit-parallax-unit {
    margin-bottom: 60px;
  }
  .recruit-parallax-img {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .recruit-parallax-content {
    padding: 0 5%;
  }
  .recruit-parallax-content-header__heading {
    font-size: 22px;
  }
  .recruit-parallax-content-header__en {
    padding-left: 10px;
    font-size: 14px;
  }
  .recruit-parallax-content-header__lead {
    font-size: 12px;
  }
  .recruit-parallax-content-body__btn {
    text-align: center;
  }
  .recruit-parallax-content-elm.parallax-item001 {
    top: -45px;
    bottom: auto;
    width: 58px;
    height: 68px;
  }
  .recruit-parallax-content-elm.parallax-item002 {
    top: -30px;
    bottom: auto;
    width: 70px;
    height: 50px;
  }
  .section-news {
    margin-bottom: 60px;
  }
  .news-entry-card-item {
    max-width: 220px;
    min-width: 220px;
  }
  .future-unit {
    margin-bottom: 10px;
  }
  .future-heading {
    font-size: 18px;
  }
  .future-symbol--01 {
    width: 65.1px;
    height: 37.5px;
    top: 15px;
  }
  .future-symbol--02 {
    width: 54.6px;
    height: 31.65px;
    top: 20px;
  }
  .future-symbol--03 {
    width: 57.6px;
    height: 57.9px;
    top: 10px;
  }
  .future-symbol--04 {
    width: 68.7px;
    height: 67.65px;
    top: 5px;
  }
}

@media screen and (min-width: 414px) and (max-width: 666.999px) {
  .l-entry-block {
    padding: 10px 0;
  }
  .l-unit {
    margin-bottom: 50px;
  }
  .e-section-heading01 {
    margin-bottom: 40px;
  }
  .e-heading2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 20px;
  }
  .e-heading4 {
    font-size: 20px;
  }
  .e-heading-unit01 {
    margin-bottom: 20px;
  }
  .e-heading-unit01__title {
    font-size: 20px;
  }
  .visual-editor .e-table--liner {
    display: block;
    width: 100%;
  }
  .visual-editor .e-table--liner tbody, .visual-editor .e-table--liner tr, .visual-editor .e-table--liner th, .visual-editor .e-table--liner td {
    display: block;
    width: 100%;
  }
  .visual-editor .e-table--liner th {
    border-bottom: none;
  }
  .visual-editor .e-table--liner td {
    display: block;
    width: 100%;
  }
  .e-card {
    border-radius: 0;
    border-top: solid 1px #D8D8D8;
    border-bottom: none;
    border-right: none;
    border-left: none;
  }
  .e-card:last-child {
    border-bottom: solid 1px #D8D8D8;
  }
  .e-card a {
    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;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    padding: 10px;
  }
  .e-card__img {
    width: 38.028169%;
    padding-top: 22.8169014%;
  }
  .e-card__body {
    width: 57.7464789%;
    padding: 0;
  }
  .e-card__title {
    width: 100%;
    max-width: 100%;
    font-size: 15px;
    margin-bottom: 0;
  }
  .e-card02__title {
    font-size: 15px;
  }
  .e-custom-layout01 .e-heading2 {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  .c-breadcrumb {
    margin: 0 auto 25px;
    padding: 8px 10px 10px;
  }
  .c-breadcrumb__inner {
    font-size: 11px;
    line-height: 1;
  }
  .c-pagenavi {
    margin-top: 25px;
  }
  .c-pager__item {
    width: 100%;
  }
  .c-pager__item:nth-child(2) {
    border-top: none;
  }
  .c-summary__item {
    width: 100%;
    margin: 0;
  }
  .e-section-heading01.page-contact-heading01 {
    margin-bottom: 20px;
  }
  .form-info-box {
    margin-bottom: 30px;
  }
  .form-info-box__item {
    margin-top: 25px;
  }
  .form-info-box__item:first-child {
    margin-top: 0;
  }
  .form-info-box__heading span {
    margin-left: 0;
  }
  .section-brand-message {
    padding: 90px 0 120px;
  }
  .brand-message-parallax.parallax-item001 {
    width: 168.7px;
    height: 99.4px;
    top: 30px;
    right: -5%;
  }
  .brand-message-parallax.parallax-item002 {
    width: 83.3px;
    height: 100.8px;
    top: auto;
    bottom: 40px;
    left: auto;
    right: 23%;
  }
  .brand-message-parallax.parallax-item003 {
    width: 133px;
    height: 77px;
    top: 110px;
    bottom: auto;
    right: auto;
    left: -2%;
  }
  .section-brand-products-heading {
    margin-bottom: 0;
  }
  .brand-products-unit {
    margin-bottom: 70px;
  }
  .brand-products-content__btn {
    text-align: center;
  }
  .recruit-parallax-img {
    width: 100%;
    max-width: 100%;
  }
  .recruit-parallax-content {
    padding: 0 5%;
  }
  .recruit-parallax-content-header__heading {
    font-size: 22px;
  }
  .recruit-parallax-content-header__en {
    padding-left: 10px;
    font-size: 14px;
  }
  .recruit-parallax-content-header__lead {
    font-size: 12px;
  }
  .recruit-parallax-content-body__btn {
    text-align: center;
  }
  .recruit-parallax-content-elm.parallax-item001 {
    top: -45px;
    bottom: auto;
    width: 58px;
    height: 68px;
  }
  .recruit-parallax-content-elm.parallax-item002 {
    top: -30px;
    bottom: auto;
    width: 70px;
    height: 50px;
  }
  .section-news {
    margin-bottom: 60px;
  }
  .news-entry-card-item {
    max-width: 220px;
    min-width: 220px;
  }
  .future-heading {
    font-size: 20px;
  }
  .future-symbol--01 {
    width: 65.1px;
    height: 37.5px;
  }
  .future-symbol--02 {
    width: 54.6px;
    height: 31.65px;
  }
  .future-symbol--03 {
    width: 57.6px;
    height: 57.9px;
  }
  .future-symbol--04 {
    width: 68.7px;
    height: 67.65px;
  }
}

@media screen and (max-width: 1980px) {
  .swiper-3to2to1 .swiper-button-prev {
    display: none;
  }
  .swiper-3to2to1 .swiper-button-next {
    display: none;
  }
}

@media all and (-ms-high-contrast: none) {
  .material-icons, .e-box-alert:before, .e-form-error-text:before, .is-icon-target-blank:after,
  .visual-editor [target="_blank"]:after {
    display: inline-block\0;
  }
}

@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}