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


```

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


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

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


```

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


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

1.234567 => 1.2345

```

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

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

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

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

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

@include media-max;


@include media($query);

```

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


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

```

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


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

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

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

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

```

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

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

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



```


*/
/*doc
---
title: material-icons
name: material-icons
category: mixins
---

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



```

*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif+JP&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald:300,500&display=swap");
@font-face {
  font-family: 'Futura';
  src: url(/assets/font/TT0144M0.eot);
  src: url(/assets/font/TT0144M0.eot?) format("embedded-opentype"), url(/assets/font/TT0144M0.woff) format("woff"), url(/assets/font/TT0144M0.TTF) format("truetype");
}

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

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

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

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

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

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* @ Print Layout
 * ------------------------------------------------------------ */
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */
@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;
  }
}

/* @  Font Reset
* ------------------------------------------------------------ */
html {
  line-height: 1.84;
  width: 100%;
  overflow-x: hidden;
  font-size: 16px;
}

@media screen and (max-width: 767.999px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 599.999px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 374.999px) {
  html {
    font-size: 3.73333vmin;
  }
}

body {
  width: 100%;
  font-family: dnp-shuei-gothic-kin-std, Meiryo, メイリオ, helvetica, arial, sans-serif;
  color: #000000;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media all and (-ms-high-contrast: none) {
  body {
    font-family: dnp-shuei-gothic-kin-std, Meiryo, メイリオ, helvetica, arial, sans-serif;
  }
}

@media screen and (min-width: 600px) {
  body {
    min-width: 1000px;
  }
}

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

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

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,
span,
div,
blockquote {
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

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

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

small {
  color: #757575;
}

strong {
  font-weight: bold;
}

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

em {
  font-weight: bold;
}

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

@media screen and (max-width: 599.999px) {
  hr {
    margin-top: 50px;
    margin-bottom: 50px;
  }
}

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

th {
  text-align: left;
}

/* @  Link Reset
* ------------------------------------------------------------ */
::-moz-selection {
  background: #E6F1F7;
  text-shadow: none;
}
::selection {
  background: #E6F1F7;
  text-shadow: none;
}

input::-moz-selection,
textarea::-moz-selection {
  background: #f0f7fa;
  color: #000000;
  text-shadow: none;
}

input::selection,
textarea::selection {
  background: #f0f7fa;
  color: #000000;
  text-shadow: none;
}

a,
a:link {
  color: #000000;
  text-decoration: underline;
  -webkit-transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: 280ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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: #000000;
  text-decoration: none;
}

a:visited {
  color: #000000;
}

a {
  -webkit-tap-highlight-color: rgba(29, 42, 118, 0.5);
}

a:link {
  -webkit-tap-highlight-color: rgba(29, 42, 118, 0.5);
}

button:focus {
  outline-width: 0;
}

button {
  cursor: pointer;
}

/* @  Print Reset
* ------------------------------------------------------------ */
@media print {
  header,
  footer {
    display: none;
  }
  a[href]:after {
    content: "";
  }
  abbr[title]:after {
    content: "";
  }
}

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

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

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

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

pre,
.e-pre {
  display: block;
  padding: 10px;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.84;
  word-break: break-all;
  word-wrap: break-word;
  color: #aaa;
  background-color: #DEDEDE;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: 0;
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  pre,
  .e-pre {
    margin-bottom: 30px;
  }
}

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

.e-code-clipboard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 16px;
}

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

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

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

/* @  Footer Layout
 * ------------------------------------------------------------ */
.l-footer {
  position: relative;
  background: #333333;
  overflow: hidden;
}

.l-footer::before {
  content: "";
  position: absolute;
  background: url(/assets/img/common/footer/ico-01.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 348px;
  height: 252px;
  display: block;
  left: -42px;
  top: 32px;
}

@media screen and (max-width: 599.999px) {
  .l-footer::before {
    width: 278px;
    height: 202px;
    left: inherit;
    top: inherit;
    bottom: -30px;
    right: -35px;
  }
}

.l-footer::after {
  content: "";
  position: absolute;
  background: url(/assets/img/common/footer/ico-02.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 197px;
  height: 242px;
  display: block;
  right: 50%;
  bottom: 13px;
  margin-right: -290px;
}

@media screen and (max-width: 1000px) {
  .l-footer::after {
    right: 60%;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer::after {
    width: 127px;
    height: 162px;
    right: calc(25 / 375 * 100vw);
    bottom: 30%;
    margin-right: 0;
  }
}

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

.l-footer a:hover {
  opacity: 0.6;
}

.l-footer ._inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 900px;
  margin: 0 auto;
  padding-top: 40px;
  color: #ffffff;
  z-index: 1;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .l-footer ._inner {
    padding: 40px 5% 0;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner {
    padding: 0;
    display: block;
  }
}

.l-footer ._inner .__address {
  width: 50%;
  padding-right: 30px;
  font-size: 14px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address {
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }
}

.l-footer ._inner .__address .address-head {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address .address-head {
    font-size: calc(16 / 375 * 100vw);
  }
}

.l-footer ._inner .__address address {
  font-style: normal;
  font-weight: normal;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address address {
    font-size: calc(12 / 375 * 100vw);
  }
}

.l-footer ._inner .__lnav {
  width: 50%;
  padding-left: 30px;
  border-left: 2px solid #858585;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav {
    width: 100%;
    padding-left: 0;
    border-left: none;
  }
}

.l-footer ._inner .__lnav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 100%;
  margin-left: -30px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul {
    border-top: 1px solid #858585;
    border-bottom: 1px solid #858585;
    margin-left: 0;
  }
}

.l-footer ._inner .__lnav ul > li {
  margin-left: 30px;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  color: #858585;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li {
    margin-left: 0;
    border-left: 1px solid #858585;
    width: 29.3%;
    text-align: center;
    padding: 10px 0;
    font-size: calc(12 / 375 * 100vw);
  }
  .l-footer ._inner .__lnav ul > li:first-child {
    border-left: none;
  }
  .l-footer ._inner .__lnav ul > li:nth-child(2) {
    width: 37.3%;
  }
}

.l-footer ._inner .__lnav ul > li::before {
  content: "";
  left: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 15px;
  height: 10px;
  border: 5px solid transparent;
  border-left: 10px solid #858585;
  display: inline-block;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li::before {
    display: none;
  }
}

.l-footer ._sns {
  position: relative;
  z-index: 1;
}

.l-footer ._sns ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px 0 0;
}

.l-footer ._sns ul li {
  margin: 0 10px;
}

.l-footer ._sns ul li.facebook a {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22%23ffffff%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20height%3D%2224px%22%3E%20%20%20%20%3Cpath%20d%3D%22M11.666%2C2.005C6.62%2C2.17%2C2.374%2C6.251%2C2.025%2C11.288c-0.369%2C5.329%2C3.442%2C9.832%2C8.481%2C10.589V14.65H8.892%20c-0.726%2C0-1.314-0.588-1.314-1.314v0c0-0.726%2C0.588-1.314%2C1.314-1.314h1.613v-1.749c0-2.896%2C1.411-4.167%2C3.818-4.167%20c0.357%2C0%2C0.662%2C0.008%2C0.921%2C0.021c0.636%2C0.031%2C1.129%2C0.561%2C1.129%2C1.198v0c0%2C0.663-0.537%2C1.2-1.2%2C1.2h-0.442%20c-1.022%2C0-1.379%2C0.969-1.379%2C2.061v1.437h1.87c0.591%2C0%2C1.043%2C0.527%2C0.953%2C1.111l-0.108%2C0.701c-0.073%2C0.47-0.477%2C0.817-0.953%2C0.817%20h-1.762v7.247C18.235%2C21.236%2C22%2C17.062%2C22%2C12C22%2C6.366%2C17.341%2C1.821%2C11.666%2C2.005z%22%2F%3E%3C%2Fsvg%3E%0A") 50% 50% no-repeat;
  background-size: auto;
  background-size: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.l-footer ._sns ul li.twitter a {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%3E%0A%20%20%3Cimage%20id%3D%22Twitter_Logo_WhiteOnImage%22%20width%3D%2242%22%20height%3D%2242%22%20xlink%3Ahref%3D%22data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAGZxJREFUeNrs3Q1w1%2FV9B3AJgWBC%2FshzJFiqLQ9%2F3URAA1cfwVTndJawul2vg8zTY7Xg5qRWyFm6eh5j1%2Bm5AdMyWUXOeR4tUNSyKogP2EHEx6sGZAOpBJAyKImiUOSWj2s6qgL5J%2F8k%2F4fX644Dkad88v%2Fn%2Ffs%2Bfb5dkiPHDDsFAFJUoAQACBAABAgAAgQAAQIAAgQAAQKAAAFAgAAgQABAgAAgQAAQIAAIEAAECAAIEAAECAACBAABAoAAAQABAoAAAUCAACBAABAgACBAABAgAAgQAAQIAAIEAAQIAAIEAAECgAABQIAAgAABQIAAIEAAECAAIEAAECAACBAABAgAAgQABAgAAgQAAQKAAAFAgACAAAFAgAAgQAAQIAAIEAAQIAAIEAAECAACBAABAgACBAABAoAAAUCAACBAAECAACBAABAgAAgQAAQIAAgQAAQIAAIEAAECgAABAAECgAABQIAAIEAAQIAAIEAAECAACBAABAgACBAABAgAAgQAAQKAAAEAAQKAAAFAgAAgQAAQIAAgQAAQIAAIEAAECAD5pVAJIHvdOfuOZJ8%2BvUuHDR06tvnn%2BvQ%2BreKzfu17771fd%2Fg3v2mMH%2B%2FavbuusbGxYfotM2pVkdbqkhw5ZpgyQHaExehRIytOO%2B20ZElx8YiioqJkOv7cI0eO1B%2F84IO6hobGTW9t2bJBqCBAIMtNuOzSxE1%2FdePlp5eVjT2tV6%2FLCwoKEh31dzc0Nq5%2BZ8eO1ff94IE1Tz%2FzbIPPBgIEssDiRQsrv3DWmZV9eveuyoR%2FT3OYXPe1yct9djiWRXTIkNHGk0%2BsvPn1jeufvmDM6AWZEh4hUVpaeU4yOfcXL9e%2B%2BMyTq2pumnpjebbWOf7t659fuyCbPwYjEOB3wTHzthnVg04vm9KRU1RttW%2F%2F%2FuUPP%2FLovPsWPlCfTXUeXD5o%2BqFDh%2BpGjb1wolefAAHBIUhSqvPWbdvmXFN13WKvQgECWWfpI0uqksOH12RzcBzr6NGjDTt37X7oiquvnZdpdR4%2BdOjNhYWFvzddNe9f7p%2BQLSMnAQJ8LObdb%2FjLKXOLi4srcvHji%2B3Az617YWZnbgNuHnGUDRxQ9cngaB4xXTT%2ByzO9GtPDQcJO%2BCLi6Sf%2FPL58afXnhwyZniujjs%2F8YtL0BbvpC%2FiSZ55ctfiyK66a09Hvq6qvXDvpZFOCr772%2BjKvxvTp2r9sUF9l6BhxEOz6KX%2BxauCAAWvWPvvcXhXJffFE%2FMiSB%2B8pGziwukuXLkX58DGXlJScd%2BP11ZVNX8if3%2FjSy43t%2BXfNv%2Ffuiprbb7v5sksunptIlFacqMYHDx6snXjd1%2BZ7VRqBZKU%2F%2FqMrauL7SROvfWjX7t0TjURy%2F4Fh4rXXLPisqZRcF6fkp31j6opxYytmVd8wdXW6Q%2FnWv5le9bkzzqhOpbbra1%2Bc51WZXtZAOkg8KcXwvvm%2FYyvhjNtrpjjlm5viMOCYUef9fS5PWbVUOnY9NZ%2FKP2Pw4Mo4l5Lq74%2FRx%2FlfumSyV6YAyUobf%2F7ckk8unnpR56bY%2FRMH71Ti%2F7Vm8frY0OhZUlLRljBuelCbrMeXAMnaqYyvTpq4Il1vLIRHroZIc8PIsoEDK9O1Wy1asYy7ePw0n4H0swbSASaMv7T6eP8vWlY88%2BSqho7etYLw6GjxWl%2B39qlTjg2RCIxkcviIaBiZKC2tSPd6UZxRWbzkYe8tAZKl4dE0DD9ZX6MBA%2FpXN33xqdOsTnjkQ4isf35taWHXrokePXqMaO81ore3b59vs0r70UyxncVukZb8uvjiE1%2BEVEx45LpYBI%2FpqfYOj1hj1LJEgGS18kGDWhwKQiT7xO464ZF5Yupq0YMPWVsUINkrTsememucEMmuz%2B9ll1y8QCUyz0uvvDrL1JUAyWpXX3VlZWt%2BnxDJfLG2NfWG6xc455F59uz51eJ0H15EgHS42IrY2t8rRDLb7JqZ09N1JznpE%2BsedjQKkJzQ1n3sQiQzxSnz2DmnEpklujt8u%2BY7znsIkOwXi6vp%2BHOESGaJqatoUaISmRceWgMJkJwxbOjQsen6s4RI5oipK%2BsemSV2XD32xKpZbQ2P5nvpVVSAdLo%2BvU9L66VBESJe3J0%2FqjR1lVniEqtlK1ZOmX3nXXVt%2BbyuW%2FvU3KbvX1TR1DiJ3k66d%2B%2Be9hbeg8sHTW96oZfrndU5xlVcIMAzSFumrWILduySPLYlfPx5mXYtrwDJ18K20x0Qza0gar7zd7PM93acmELM1ato8yU8TtQSvnkaTGUFSKdL1wL68cSL%2F%2B5%2FmFNu0bDjDB861OgjQ6TSwTpGGhPGX1pxsntE6jZvntOWaTABQlaJMwj%2FfM%2F317R1%2FpeWjT7y8VbBTBOjhPhCf7Kmo%2FEA9wdnn13Zq1eioiVndSKQNDIVIBkjnTuwTiR2A8X1uMnk8DneAO3ni2edZeG8k8WUVUwxffJhKaalqid%2FveL0srJkbFxJdZox%2FtzZ37vLwUMBkp8iRGKH1jNPrko6gZt%2B8TTrxHnn2lG%2Fc34sbsfdIXGIM8IikSgdUXzqqcm2jAzTtf1XgJD1Ynvpxp8%2Fl4yTuN4Q6XPeyHMnqULniW26%2Ffv1vfzNVzdOT%2FefHQ0XTf%2B28QFWCdIvno464%2B%2BN4fu9%2F%2FgPK%2BJJzWeh7VpyGRjt%2FITbNMJojxHg1m3b5mi4KEAy80XftWuiM99wcf%2F648uXmrdvo5ZeBkZ2iUVzF00JEE7grDPPrFn%2F%2FNoF8RStGq2TymVgZIfo1usgrgChBWLfe2z1be9zKbkogtfieW7RrVeAkOonuKAg0fTFcMkzT66qUY2WixPLqpBb4eHgrQDJCvv2%2F7o20%2F5NsUvrlQ0vWGBvodPLysaqQm6I7brCQ4DQRjElEwvsuvqeXKK01LRfjoRHdGsQHgKENImuvq9vXP%2B0tZHPFv2TtC7JnfBw1kOAZJVdu3dn%2FAs2vkA2r43YqfX7xo2tMM0nPBAgnaOxsTFrhsuxNhI7tdx4%2BP%2BiVYYqZK9YMF9w%2F8KJwkOAZKWmJ59NWfUi%2BG0%2FrY0%2Ff26JRfb03yZJx4ZHLJjft%2FCBetUQIFkpFuxiCJ1t%2F%2B5ohRKL7HG9Zz5Pa3Xt2rXUqzh7w8OCuQDJeh9%2B%2BOGmbP23R%2F%2BnmNaK3Vr5GCQOEGafaE8yauyFE4WHAMmRF3TmnQVJ6YVRUJCI3VrWR8h00e5dexIBklOyYSdWS4Mk1kdi228%2BBImtzdkjponfqKubGXeFqIYAySmLlzxcm0sfT2z7zacgIbPFPSGxTddNnAIkJ8VcbCzq5drHJUjobA2Njatv%2BdbttukKkNz2q73%2FsyZXP7bmIPnFy7Uv5utiOx0vLoIad%2FF4t24KkNy3fkNtzt941rzYPv%2Feu1%2BM7b%2FRBsRnnvYQi%2BUughIgeSOG2DFXmy8fb2z%2Fvfmb33g6DiSa3gIBQhvtfndP3i3yxYHE5umt6LVlVEI6JBKlI1RBgOSV5T9ZuSxvX1wFBYnotRWjkriLJEYl1kporcKuXb12BEh%2BiZ48sWsk3%2BsQp7tjVBJrJXFXuzABAUILbHzpZQt%2Fx4i72jM1TN54s04TPmihLsmRY4YpQ%2FuLcxMuKTqxGKnt3bu39olVP1vdmd1U33x142afjcxz8ODB2vO%2FdMlklTACyTubt2zRbqEFI5OzzjyzJtZMInBjAX7xooWVHT06ycZOymAEYhTCccSp%2FgMHGmq3v%2FNO7foNtXXtOUKJbcixk0zVjUA4sUIl6DjPrXthZlwjqxKpi0X4AQP6x7fqC8aMjnvL6w9%2B8EFdQ0Pjpre2bNkQl3il63Tyh4cO1TcFiKKDEUhm8XTbfuLQ5uHDh%2Bujlf6BhgM73n13T31rguXx5UurYypNRTNLrJFFGxOVMALJW4sefGhmzPGrRDu8mAsLy%2BNbBPTg8kGnnJNMntI04vv4%2F8X0x5GPPmqIEUv8d4xa4vvYdfXJ6bC3t%2F%2ByrilAFDTTAuS3nzuMQPJaNB%2BM%2FlEqkVli8bz5JkmjxMwTvbDc%2FZFZ7MLqBPEmyMVW71n%2FZigoSERwCA8QIBntsSdWzVIFQICQsujUG3cbqAQgQEhZ3G2wb%2F9%2BV3JCCzRvfECA0DwS%2Bd5dc6yHAAKElMUZhRm310zRPgPINl37lw3qqwyda9vb2w%2BVDRy4bsTwYX%2FcpUuXIhWBT7t64ldtPDECyX2tuYEvFtWXrVhpJAIIkHwWJ83jsGCqXWSFCHw27wkBklfipPk%2F3%2FP9NevWPjU3lRGJEIFPa%2B4QgADJn%2BIWFCT69O5dFSOSuHkv7rZoaYgsuH%2FhRLuz4P9EHzNVECB5Ky5LumDM6AXNFyXdOfuO5Il%2BfTT4i91Z7lMHjRQzlWaK7aClV6LGNNWvDxxYs2v37g1Pr3229niXJGm%2BSL6Lrg1x8FYlMot27u0gpp7iAqSTDv9%2BO8UV36L1%2BLRvTP24G%2Byx91lEu%2FFovjj%2F3rs3XHLRhXPdaEg%2Bihb7qiBA8sJHH33U2Jrfd2w32GPvs7j5m99QVPJaPEipQuaxBtIO4kpUVYD0Od70LgIk5xw8%2BIEXO6Tt%2FXSwVhUESN7YtXu3%2BVowohcgpG79hloBAkb0AoTUxXytk%2BSQHu4BESB557333zdvC2mwbMVKhwgFSH7Zu3evAIE2OnLkSH3cmaMSAiSvvPzKawIE2ujgBx9YTxQg%2BScaIsbTk0pA6%2BmBJUDy98Xf2GgUAm1gAV2A5K1XX3t9mSpA61lAFyB5a%2FotM2pNY0HrRFNSC%2BgCJK%2FtfnfPclWA1B040GAKWIDkt%2BU%2FWWkaC1ph%2BzvvCBABkt%2FiVPq%2B%2FfuNQiBFi5c8LEAECBbTITXWPwQIvxWL6VpSQ8tZ%2FxAgHGN97YvzVAFaxvpHduiSHDlmmDJ0jHVrn5ob95%2BrBJzY2eedP1wVjEA4xsOPPGoUAifR0Ni4WhUECJ8QO7J21O%2BcrxJwfO%2Fs2CFABAif5Yqrr50XO0xUAj7b02uftf4hQDiex55YNUsV4NPi4SpG6iohQDiOaPVuKgs%2BrX7nToduBQgnE1NZzobA73ti1c%2BsfwgQWuLbNd%2BZdvToUadt4RTTVwKElESrhmUrVk4RImD6SoCQslgPqdu8eY5KkO9MXwkQWuG6r01e%2FkZd3UyVIF%2BZvhIgCBFolf%2FaunWxKggQhAik7L4fPLBGFQQIQgRSEheuuftDgJDGEHnxpZdt8SUvuHAte3XtXzaorzJknhUrH9taNnDgumFDv3hxQUFBQkXIRUeOHKn%2Fk0l%2FZheiEQjpFlt8b%2FnW7ROdWCdX%2FfKddyyeCxDaS8wNn%2F%2BlSyZv3bbNUxo5555%2Fmu%2FwoAChvV1Tdd3iHy1bMVEreHKFxXMBQgeKKa1RYy%2BcGKMRC%2Bxk%2Feh67bOmr7KcRfQs9O%2BPLn1t0%2Ba3Hh03tqL%2FqaeemlQRsk2s631tyvULVcIIhM54emsa%2Bl80%2Fssz5%2F3L%2FRNiKkBFyCZv1G0y%2BjACobNtfOnlxn9bvGT10aNHlw%2F94hcSRUVF5V26dClSGTJVbN298pqvfFcljEDIENGILkYkf33rbZfHSXaL7WSqzVu2zFOF3NAlOXLMMGXITTdNvbH86quurCwfNKiqaWRirYSMGH2ce%2F64CSohQMgiEy67NFE9%2BesVQ844o6Jfv75VTrfTGWJ0HK16VCI3FCpB5lr6yJKqd9%2FdUz%2F9lhmtPokeo5Bzzk6WDxs6dGwiUTqiZ0lJhfCgM8TWc113BQgdZPjQoTefk0yWv%2Fnqxo%2FffB9%2B%2BOGm%2BPkPDx2qP3jwg09dvtO9W7fSnj1LPp6q6t69e3lhYWG5KpIpdu7a%2FZCDgwKEDrJv3%2F7VAwb0r44fx6ihuLi4In7c9P0pfXr3ViCyRqx9zP3%2B3bbu5hi7sDLYoz%2F6sTccOSF2Xhl9CBA6UGzN1YmXXBh9WDgXIHSCbdu3u2yHrB99qEJuso03C7y%2Bcf3TFsTJRnGgNRqAqoQRCJ7gICUv%2FOd699gYgWAUAqlpaGxcPe7i8dNUwggEoxBIyeIlDxt9CBAyQexi0SCRbLGjfuf82EWoEgKEDGE%2BmWzg0KAAIQNFTyyXR5HpXnnt9TkODQoQMtDs793lPnQyVhx8rb5h6mqVECBkoHiye%2BmVV2epBJkmHmwWPfjQTJUQIGSweMLbs%2BdX5pjJKG9v327hXICQDS674qo5dmWRKWLq6pqq6zzUCBCyxcJFP5xmPYTOZupKgJCFYrpg2YqVU1SCzmTqSoCQpWbfeVdd3DOtEnQGU1cChCwXp9SFCB3N1BUCRIhAq9Rt3jzH1JUAQYhASqIjglsGESA5GiJ2Z9FeotdVdERQCQRIjoZI7M4SIqRbvKZWrHx8ml5XhK79ywb1VYbcs%2FbZ5%2FZu2vzWo5ePv%2BziwsLC%2FipCOry5adN3v%2FnXf%2Fu8SmAEkuPiKTHuo9b2hHSw7oEAyUPR9qQpTCbH3LVq0BrRNse6B59kCitP%2FPQ%2Fnqzf%2FNaW5eePHl1UUlJynorQUrHucf%2B%2FLpqy9MfL96oGAiRPbXt7%2B6EHlzz8fHLE8NqBAwYM7tatW7mqcDI%2FXv6TP%2F%2F%2BPfduVQk%2BqUty5JhhypCflj6ypGr40KE3FxYWChI%2BU2wJt%2B6BAEGQkJLYfBHrZyqBAOGk5t97d8X5Y0ZXJ0pLK1Ujv8WOq4vGf1lXA07IGgi%2FEwvtD%2Fxw8U%2BPHj26vH%2B%2FvvXFxcX9nCHJP7HjatYd37011sxUAyMQWu2mqTeWX33VlZX9%2BvWr6FlSUlFQUJBQldwOjxm310xx0hwBQtrdOfuO5OhRI5vCpGd5z54lyR49eowQKrkhzgnd8q3bJwoPBAgdKtZPmn%2F8%2BSGfS35%2ByJDpgiV7xFmP6J8WF5SpBgKEThFTXlNvuH5BUVFRUjWEB7mtUAlIl8WLFlaOGXXe3xt5CA%2Fyg15YtNmEyy5NrFv71NwLxoxeIDyEB0Yg0CKx9nHJRRfOdQhReCBAoMWjjtk1M6cPGNC%2FWjWEBwIEWiTWOkaNPLfGqEN4IECgRWKH1Q1%2FOWVucXFxhWpknzjnEdfRCg8ECB0mpqtm3jajenD5oOmqkZ2cMEeA0OGiU29y%2BPAau6uEBwgQWhwcWrxnP111ESAIDlK2o37n%2FCuuvnaeSiBAEBy0SOy0qtu8eY6bBBEgtJvmxfGygQOqBEfuhIdtuggQ2k2cHj9v5LmT%2BvTuXaUauePgwYO13675zjSL5QgQ0qr5YqjPnXFGtdFG7nF%2FOQKEtIopqpv%2B6sbLzxg8uNI957kppqxeeuXVWdU3TF2tGggQ2jzSmDD%2B0gqhkfvifMfCRT%2Bcdt%2FCB%2BpVAwFCq8Saxh%2BcfXZlr16JChc55QdbdBEgpCympaonf73i9LKyZJ%2Fep1XoS5Vfop%2FVc%2BtemDn9lhm1qoEA4bjunH1HcsiQz5VHWCQSpSOKTz01aQE8f8VC%2BZ1z5s63ywoBkoUeX760unv3osRbW7ZsaP651j4JxlrFOWcnPw6DgQMHlPdK9BrcvVu30p49S5Ldu3cvFxQYdZDpuiRHjhmmDC3%2Fol89%2Bes1LVmcjj358b0wwKgDAcLvuFCJ9hY7rF74z%2FVzjDrIZF37lw3qqwypWbHysa2b39qy%2FNw%2F%2FMPDiUSpRWzSJs511O%2Fc9a8Xjf%2FyrT%2F9jydtz0WA5KJtb28%2FtOTfH6ltesMvT44YXl5UVHSWqtAW0Xp90YMP3fo3M25zKJCsYAorTeIsxriKC262rZZUxXrZ%2BtoX55muQoDkOW3RaanYXbV5y5Z52q4jQBAkCA4ECIIEwQECRJAgOECA5EqQnDlkyCSL7YIDBAitEru2zh8zulrL9dxjVxUChA4R7VH%2B%2FKt%2FWt2vX9%2BqgoKChIpkpzgA%2BOsDB9Y8%2FMij89zPgQChw5neyj7RcuS%2Ftm5dfN8PHlijXxUChIwYlVR95dpJZQMHVFl0zzyxtrFv3%2F7Vj%2F7ox4uNNhAgZKxYKzlv5LmTTuvV63JTXJ2neYrqv7duW%2B3%2BcRAgWSe6AH%2FhrDMrhYnQAAFCm0YmcQ96nz69K01zpU%2Fz9NQv3nxztV1UIEByXqyZXH3VlZX9%2BvWr6FlSUmF0ktoo473336%2Fdu3dv7ROrfrbamgYIkLwWd6mPHjWyQqCcODBefuW12tl33lWnKiBAOEGgJJPDR5xeVja2pLh4RFFRUTJfPvY41Pfee%2B%2FX%2Fep%2F9tY9vfbZWiMMECC0UayhDBw4oLx%2F337Jnj1Lkj169BiRzSOVOI9x6PDh%2BoaGxk27du%2BuW7%2Bhtk5YgAChg4OltLQ00TRaSXbv1q00wqVr166lnT1qicXtw00BceSjjxoiJA4fPtTw9vZf1r3xZl29oAABQhaI6bA%2BfXqXxo9jBNMr0Wvwsf%2B%2FuPjU8h5FRS3aFRZTS4d%2F85vGY3%2FuQMOBHe%2B%2Bu%2BfjQNi3b3%2BjNQoQIADkmAIlAECAACBAABAgAAgQABAgAAgQAAQIAAIEAAECAAIEAAECgAABQIAAIEAAQIAAIEAAECAACBAABAgACBAABAgAAgQAAQKAAAEAAQKAAAFAgAAgQAAQIAAgQAAQIAAIEAAECAACBAAECAACBAABAoAAAQABAoAAAUCAACBAABAgACBAABAgAAgQAAQIAAIEAAQIAAIEAAECgAABQIAAgAABQIAAIEAAECAACBAAECAACBAABAgAAgQAAQIAAgQAAQKAAAFAgAAgQABAgAAgQAAQIAAIEAAECAAIEAAECAACBAABAgACBAABAoAAAUCAACBAAECAACBAABAgAAgQAAQIAAgQAAQIAAIEAAECgAABAAECgAABQIAAIEAAyC%2F%2FK8AA4ReKKycFZAsAAAAASUVORK5CYII%3D%22%2F%3E%0A%3C%2Fsvg%3E%0A") 50% 50% no-repeat;
  background-size: auto;
  background-size: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.l-footer ._sns ul li.instagram a {
  display: inline-block;
  width: 42px;
  height: 42px;
  background: url("data:image/svg+xml;charset=utf8,%3C%21--%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F--%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2019.2.1%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22_x31_0%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22width%3A%2048px%3B%20height%3A%2048px%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23374149%3B%7D%0A%3C%2Fstyle%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M363.024%2C0H148.976C69.063%2C0%2C4.281%2C64.782%2C4.281%2C144.695v222.61C4.281%2C447.218%2C69.063%2C512%2C148.976%2C512h214.047%0A%09%09c79.914%2C0%2C144.695-64.782%2C144.695-144.695v-222.61C507.719%2C64.782%2C442.937%2C0%2C363.024%2C0z%20M55.652%2C144.695%0A%09%09c0-51.461%2C41.863-93.324%2C93.324-93.324h214.047c51.461%2C0%2C93.324%2C41.863%2C93.324%2C93.324v222.61c0%2C51.461-41.863%2C93.324-93.324%2C93.324%0A%09%09H148.976c-51.461%2C0-93.324-41.863-93.324-93.324V144.695z%22%20style%3D%22fill%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%3C%2Fpath%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M256%2C387.851c72.703%2C0%2C131.852-59.148%2C131.852-131.851S328.703%2C124.145%2C256%2C124.145%0A%09%09c-72.702%2C0-131.851%2C59.152-131.851%2C131.855S183.297%2C387.851%2C256%2C387.851z%20M256%2C165.242c50.043%2C0%2C90.754%2C40.714%2C90.754%2C90.758%0A%09%09S306.043%2C346.758%2C256%2C346.758c-50.042%2C0-90.754-40.714-90.754-90.758S205.957%2C165.242%2C256%2C165.242z%22%20style%3D%22fill%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%3C%2Fpath%3E%0A%09%3Cellipse%20class%3D%22st0%22%20cx%3D%22391.707%22%20cy%3D%22120.296%22%20rx%3D%2229.539%22%20ry%3D%2229.541%22%20style%3D%22fill%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%3C%2Fellipse%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") 50% 50% no-repeat;
  background-size: auto;
  background-size: 100%;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.l-footer ._sns + ._inner {
  padding-top: 20px;
  max-width: 1152px;
  padding-right: 16px;
  padding-left: 16px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner {
    padding: 0;
  }
}

.l-footer ._sns + ._inner .__address {
  width: 30%;
}

@media screen and (max-width: 1000px) {
  .l-footer ._sns + ._inner .__address {
    font-size: calc(14 / 1000 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__address {
    width: 100%;
  }
}

.l-footer ._sns + ._inner .__address ._logo {
  margin-top: -35px;
  margin-bottom: 10px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__address ._logo {
    margin-top: 0;
  }
}

.l-footer ._sns + ._inner .__address ._logo img {
  max-width: 200px;
  width: 100%;
}

.l-footer ._sns + ._inner .__lnav {
  width: 75%;
  padding-left: 0;
}

.l-footer ._sns + ._inner .__lnav ._pc {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-flex-wrap: flex-start;
      flex-wrap: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__lnav ._pc {
    display: none;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__lnav {
    width: 100%;
    display: block;
  }
}

.l-footer ._sns + ._inner .__lnav .c-accordion {
  background: none;
  margin-bottom: 0;
  display: none;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__lnav .c-accordion {
    display: block;
  }
}

.l-footer ._sns + ._inner .__lnav .c-accordion .c-accordion__title {
  border: none;
  border-bottom: 1px solid #858585;
  border-top: 1px solid #858585;
}

.l-footer ._sns + ._inner .__lnav .c-accordion .c-accordion__title:hover, .l-footer ._sns + ._inner .__lnav .c-accordion .c-accordion__title:focus {
  background: none;
}

.l-footer ._sns + ._inner .__lnav .c-accordion .c-accordion__title::after {
  color: #ffffff;
}

.l-footer ._sns + ._inner .__lnav .c-accordion .c-accordion__body {
  border: none;
  padding: 0;
}

.l-footer ._sns + ._inner .__lnav ul {
  display: block;
  height: auto;
  margin-left: 30px;
}

@media screen and (max-width: 1000px) {
  .l-footer ._sns + ._inner .__lnav ul {
    width: 25%;
    margin-left: calc(30 / 1000 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__lnav ul {
    width: 100%;
    margin-left: 0;
    border: none;
  }
}

.l-footer ._sns + ._inner .__lnav ul > li {
  display: block;
  margin-left: 0;
  margin-bottom: 5px;
}

@media screen and (max-width: 1000px) {
  .l-footer ._sns + ._inner .__lnav ul > li {
    font-size: calc(15 / 1000 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns + ._inner .__lnav ul > li {
    font-size: calc(14 / 375 * 100vw);
    width: 100%;
    border: none;
    border-bottom: 1px solid #858585;
    color: #ffffff;
  }
}

.l-footer ._copy {
  position: relative;
  text-align: center;
  font-size: 13px;
  padding: 15px 10%;
  color: #ffffff;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._copy {
    padding: 15px 10%;
  }
}

.l-footer ._inner {
  max-width: 1140px;
  padding: 100px 20px 0;
}

@media screen and (max-width: 1000px) {
  .l-footer ._inner {
    padding-top: 80px;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner {
    padding: 0;
  }
}

.l-footer ._inner .__lnav {
  padding-left: 0;
  border-left: none;
  width: 65%;
  padding-right: 30px;
  border-right: 1px solid #ffffff;
}

@media screen and (max-width: 1000px) {
  .l-footer ._inner .__lnav {
    width: 62%;
    padding-right: 10px;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav {
    width: 100%;
    padding-right: 0;
    border-right: none;
  }
}

.l-footer ._inner .__lnav ul {
  display: inline-block;
  vertical-align: top;
  height: auto;
  margin-left: 15px;
  margin-right: 14%;
}

@media screen and (max-width: 1000px) {
  .l-footer ._inner .__lnav ul {
    margin-right: 5%;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: calc(20 / 375 * 100vw) calc(25 / 375 * 100vw);
    margin: 0 calc(20 / 375 * 100vw) !important;
    border-top: none;
  }
}

.l-footer ._inner .__lnav ul:last-child {
  margin-right: 0;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul:last-child {
    border-bottom: none;
  }
}

.l-footer ._inner .__lnav ul > li {
  display: block;
  margin-left: 0;
  margin-bottom: 20px;
  color: #ffffff;
  font-size: 13px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li {
    border: none;
    text-align: left;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    margin: 0;
    padding: calc(10 / 375 * 100vw) 0;
    font-size: calc(12 / 375 * 100vw);
  }
}

.l-footer ._inner .__lnav ul > li::before {
  content: "";
  position: absolute;
  display: block;
  left: -18px;
  width: 8px;
  height: 8px;
  border: none;
  border-top: 2px solid #23C2C3;
  border-right: 2px solid #23C2C3;
  top: 8px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li::before {
    display: none;
  }
}

.l-footer ._inner .__lnav ul > li ul {
  display: block;
  margin-top: 5px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li ul {
    padding: 0;
    margin: 10px 0 0 !important;
  }
}

.l-footer ._inner .__lnav ul > li ul > li {
  margin-bottom: 5px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li ul > li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 49% !important;
    display: inline-block;
    margin: auto;
    padding: 0;
  }
  .l-footer ._inner .__lnav ul > li ul > li:nth-child(2) {
    width: 100%;
  }
}

.l-footer ._inner .__lnav ul > li ul > li::before {
  content: "";
  position: absolute;
  display: block;
  left: -14px;
  width: 6px;
  height: 1px;
  border: none;
  top: 10px;
  background: #BABABA;
  -webkit-transform: rotate(0);
          transform: rotate(0);
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul > li ul > li::before {
    display: none;
  }
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__lnav ul:nth-child(2) > li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    width: 100%;
  }
}

.l-footer ._inner .__address {
  padding-right: 0;
  width: auto;
  padding-left: 30px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address {
    width: 100%;
    padding: 15px calc(35 / 375 * 100vw) 0;
    text-align: left;
  }
}

.l-footer ._inner .__address ._logo {
  max-width: 200px;
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address ._logo {
    width: calc(200 / 375 * 100vw);
  }
}

.l-footer ._inner .__address ._logo + p {
  font-size: 20px;
  margin-bottom: 15px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address ._logo + p {
    font-size: calc(18 / 375 * 100vw);
    margin-bottom: 5px;
  }
}

.l-footer ._inner .__address address {
  font-size: 13px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._inner .__address address {
    font-size: 12px;
  }
}

.l-footer ._sns {
  max-width: 1150px;
  margin: 0 auto;
}

.l-footer ._sns ul {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 35px 0 0;
  margin: 0 15px;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._sns ul {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding: 20px calc(25 / 375 * 100vw) 0;
    margin: 0;
  }
}

.l-footer ._sns ul li {
  margin: 0 5px;
}

.l-footer ._sns ul li.facebook a {
  background: url(/assets/img/common/ico-facebook.svg);
}

.l-footer ._sns ul li.instagram a {
  background: url(/assets/img/common/ico-instagraam.svg);
}

.l-footer ._sns ul li.twitter a {
  background: url(/assets/img/common/ico-twitter.svg);
}

.l-footer ._copy {
  font-size: 12px;
  padding: 20px 10%;
}

@media screen and (max-width: 599.999px) {
  .l-footer ._copy {
    font-size: calc(12 / 375 * 100vw);
  }
}

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

@media screen and (max-width: 599.999px) {
  .l-header ._pc {
    display: none;
  }
}

.l-header ._pc ._primary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /*max-width: $width-pc-max;*/
  margin-right: auto;
  margin-left: auto;
  -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;
  padding: 37px calc(80 / 1000 * 100vw) 25px calc(20 / 1000 * 100vw);
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._primary {
    padding: 37px 0 25px;
  }
}

.l-header ._pc ._primary a,
.l-header ._pc ._primary button {
  color: inherit;
  text-decoration: none;
}

.l-header ._pc ._primary a:hover,
.l-header ._pc ._primary button:hover {
  opacity: 0.6;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._logo {
    width: 30%;
  }
}

.l-header ._pc ._logo a {
  display: block;
}

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

@media screen and (max-width: 1000px) {
  .l-header ._pc ._logo img {
    width: 80%;
    max-width: 210px;
    padding-left: 15px;
  }
}

.l-header ._pc ._interaction {
  position: relative;
}

.l-header ._pc ._interaction::before {
  content: "";
  position: absolute;
  background: url(/assets/img/common/header/ico-01.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: calc(60 / 1000 * 100vw);
  max-width: 86px;
  height: 89px;
  display: block;
  left: calc(-60 / 1000 * 100vw);
  top: -32px;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction::before {
    width: calc(70 / 1000 * 100vw);
    height: 75px;
    left: calc(115 / 1000 * 100vw);
    top: -22px;
  }
}

.l-header ._pc ._interaction::after {
  content: "";
  position: absolute;
  background: url(/assets/img/common/header/ico-02.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: calc(40 / 1000 * 100vw);
  max-width: 54px;
  height: 50px;
  display: block;
  right: calc(-55 / 1000 * 100vw);
  top: -13px;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction::after {
    width: calc(45 / 1000 * 100vw);
    height: 42px;
    right: calc(35 / 1000 * 100vw);
    top: -9px;
  }
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction {
    width: 70%;
  }
}

.l-header ._pc ._interaction ul {
  display: inline-block;
  /*&.language {
          border: 1px solid $bg-color-dark;
          padding: 2px 0 0;

          @include media-pc-max {
            width: auto;
          }

          li {
            margin: 0 5px 0 15px;

            &:last-child {
              margin: 0 15px 0 0;
              padding-left: 15px;
              border-left: 1px solid $bg-color-dark;
            }
          }
          
        }*/
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction ul {
    width: 70%;
    text-align: right;
  }
}

.l-header ._pc ._interaction ul li {
  display: inline-block;
  margin: 0 15px;
  line-height: 1;
  font-size: 14px;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction ul li {
    margin: 0 2.5%;
    font-size: calc(13 / 1000 * 100vw);
  }
}

.l-header ._pc ._interaction .lang-select {
  position: relative;
  display: inline-block;
}

.l-header ._pc ._interaction .lang-select a.btn-dropdown {
  position: relative;
  width: 115px;
  display: block;
  text-align: center;
  padding: 3px 0 0;
  font-size: 14px;
  border: 1px solid #000000;
}

.l-header ._pc ._interaction .lang-select a.btn-dropdown::before {
  content: "";
  display: block;
  position: absolute;
  right: 8px;
  top: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 3px;
  height: 3px;
  border: 3px solid transparent;
  border-left: 3px solid #000000;
  -webkit-transform: rotate(90deg) translateY(-50%);
          transform: rotate(90deg) translateY(-50%);
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction .lang-select a.btn-dropdown {
    font-size: calc(13 / 1000 * 100vw);
    width: calc(110 / 1000 * 100vw);
  }
}

.l-header ._pc ._interaction .lang-select a:hover {
  opacity: 0.5;
}

.l-header ._pc ._interaction .lang-select .lang-menu {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  top: 30px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  white-space: nowrap;
  width: 126px;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction .lang-select .lang-menu {
    top: calc(28 / 1000 * 100vw);
    text-align: left;
  }
}

.l-header ._pc ._interaction .lang-select .lang-menu a {
  color: #ffffff !important;
  display: block !important;
}

.l-header ._pc ._interaction .lang-select .lang-menu.active {
  opacity: 1;
  visibility: visible;
}

.l-header ._pc ._interaction .lang-select .lang-menu li {
  display: block !important;
  margin: 17px 15px !important;
  font-size: 14px;
}

.l-header ._pc ._interaction .lang-select .lang-menu li:last-child {
  border-bottom: none;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._interaction .lang-select .lang-menu li {
    font-size: calc(13 / 1000 * 100vw);
    margin: calc(17 / 1000 * 100vw) calc(15 / 1000 * 100vw) !important;
  }
}

.l-header ._pc ._interaction .lang-select:hover .lang-menu {
  opacity: 1;
  visibility: visible;
  z-index: 100;
  width: 100% !important;
}

.l-header ._pc ._secondary {
  background: #0E8E56;
}

.l-header ._pc ._nav {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, helvetica, arial, sans-serif;
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 16px;
  padding-left: 16px;
  position: relative;
}

.l-header ._pc ._nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.l-header ._pc ._nav li {
  position: relative;
  display: inline-block;
  width: 224px;
  padding: 15px 0;
  /*&::before {
          content: "";
          width: 0;
          transition: all 0.3s ease;
          border-bottom: 3px solid $primary-text-color-white;
          display: block;
          position: absolute;
          top: 3px;
        }
        &::after {
          content: "";
          width: 0;
          transition: all 0.3s ease;
          border-bottom: 3px solid $primary-text-color-white;
          display: block;
          position: absolute;
          bottom: 3px;
        }

        &:hover {
          &::before,
          &::after {
              width: 100%;
              border-bottom: 3px solid $primary-text-color-white;;
          }
        }*/
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._nav li {
    width: 20%;
  }
}

.l-header ._pc ._nav li span {
  margin-right: 7px;
  width: 48px;
  display: inline-block;
  text-align: right;
}

.l-header ._pc ._nav li span img {
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._nav li span {
    height: 25px;
    width: 35px;
    margin-top: -5px;
  }
  .l-header ._pc ._nav li span img {
    width: 100%;
    height: 100%;
  }
}

.l-header ._pc ._nav a {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-decoration: none;
  position: relative;
  padding: 7px 0;
  white-space: nowrap;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  height: 45px;
}

@media screen and (max-width: 1000px) {
  .l-header ._pc ._nav a {
    font-size: calc(17 / 1000 * 100vw);
  }
}

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

.l-header ._pc ._nav li:first-child a {
  border-left: none;
}

.l-header ._pc ._nav .slide-line:nth-child(1) {
  position: absolute;
  top: 3px;
  height: 3px;
  background-color: #ffffff;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.l-header ._pc ._nav ul + .slide-line {
  position: absolute;
  bottom: 3px;
  height: 3px;
  background-color: #ffffff;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

@media screen and (max-width: 767.999px) {
  .l-header ._pc ._nav ._first > a {
    pointer-events: none;
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  .l-header ._pc ._nav ._first > a {
    pointer-events: none;
  }
}

@media screen and (max-width: 599.999px) {
  .l-header {
    margin-top: 55px;
  }
}

.l-header ._sp {
  display: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599.999px) {
  .l-header ._sp {
    height: 55px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background-color: #FFFFFF;
    display: block;
    /*box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);*/
  }
  [data-scroll-pos="is-down"] .l-header ._sp {
    -webkit-transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    transition: 800ms cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  .l-header ._sp ._primary {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    height: 55px;
    padding-right: 55px;
  }
  .l-header ._sp ._logo {
    padding-left: 16px;
  }
  .l-header ._sp ._logo img {
    width: 112px;
    height: auto;
  }
  .l-header ._sp ._sns {
    padding-right: 16px;
  }
  .l-header ._sp ._sns ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
            flex-flow: row nowrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-left: auto;
  }
  .l-header ._sp ._sns ul li + li {
    margin-left: 15px;
  }
  .l-header ._sp ._nav-control {
    position: absolute;
    right: 0;
    top: 0;
    width: 55px;
    height: 55px;
    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: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .l-header ._sp ._search-body {
    padding: 15px 36px;
  }
  .l-header ._sp ._search-body button {
    position: absolute;
    top: 15px;
    right: 36px;
  }
  .l-header ._sp .language-block {
    position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 40%;
    border: 1px solid #ffffff;
    margin-top: 10px;
  }
  .l-header ._sp .language-block::after {
    content: "";
    display: inline-block;
    right: 15px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    -webkit-transform: rotate(45deg) translateY(-50%);
            transform: rotate(45deg) translateY(-50%);
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 5px;
    position: absolute;
    top: 54%;
  }
  .l-header ._sp .language-block .lang-box {
    border: none;
    outline-style: none;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: 45px;
    color: #ffffff;
    padding: 0 15px;
    outline: none;
    font-size: 15px;
  }
  .l-header ._sp .language-block .lang-box option {
    font-size: 10px;
  }
}

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

@media screen and (max-width: 599.999px) {
  body,
  html {
    min-width: 320px;
  }
}

.l-main {
  display: block;
}

.l-main .top-mainv {
  position: relative;
}

.l-main .top-mainv ._ph img {
  width: 100%;
}

.l-main .top-mainv ._info {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  padding: 15px 0;
  z-index: 100;
}

.l-main .top-mainv ._info .b-btn a {
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  padding: 6px 30px 3px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  min-width: 230px;
  background: #D93636;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._info .b-btn a {
    font-size: calc(12 / 375 * 100vw);
    min-width: inherit;
    padding: 7px 30px 5px;
  }
}

.l-main .top-mainv ._info .b-btn a::before {
  content: "";
  position: absolute;
  display: block;
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  top: 50%;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._info .b-btn a::before {
    right: 12px;
    width: 5px;
    height: 5px;
  }
}

.l-main .top-mainv ._info .b-btn a:hover {
  opacity: 0.7;
}

.l-main .top-mainv ._movie ._bg {
  position: relative;
  padding-top: 44%;
  overflow: hidden;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._movie ._bg {
    padding-top: 88%;
  }
}

.l-main .top-mainv ._movie ._bg::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
}

.l-main .top-mainv ._movie video {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._movie video {
    -webkit-transform: translate(-50%, -50%) scale(2);
            transform: translate(-50%, -50%) scale(2);
  }
}

.l-main .top-mainv ._catch {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 62.66%;
  max-width: 940px;
  z-index: 10;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._catch {
    width: 86.93%;
  }
}

.l-main .top-mainv ._list {
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._list {
    padding-top: 0;
  }
}

.l-main .top-mainv ._mainslide {
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  /*&::before {
        content: "";
        position: absolute;
        background: rgba(0,0,0,0.5);
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        top: 0;
      }*/
}

.l-main .top-mainv ._mainslide .slick-slide img {
  width: 100%;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._mainslide .slick-slide ._ph {
/*    height: 330px;*/
  }
  .l-main .top-mainv ._mainslide .slick-slide ._ph img {
    width: 100%;
/*    -webkit-transform: scale(3);
            transform: scale(3);
*/  }
}

.l-main .top-mainv ._mainslide .slick-prev {
  left: 9%;
  z-index: 100;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  top: 50%;
}

.l-main .top-mainv ._mainslide .slick-prev::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 45%;
  width: 20px;
  height: 20px;
  border-bottom: 4px solid #000000;
  border-left: 4px solid #000000;
  -webkit-transform: rotate(45deg) translateX(-50%);
          transform: rotate(45deg) translateX(-50%);
  vertical-align: middle;
  margin-left: 5px;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._mainslide .slick-prev {
    display: none !important;
  }
}

.l-main .top-mainv ._mainslide .slick-next {
  right: 9%;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  z-index: 10;
  top: 50%;
}

.l-main .top-mainv ._mainslide .slick-next::before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 45%;
  width: 20px;
  height: 20px;
  border-top: 4px solid #000000;
  border-right: 4px solid #000000;
  -webkit-transform: rotate(45deg) translateX(-50%);
          transform: rotate(45deg) translateX(-50%);
  vertical-align: middle;
  margin-right: 5px;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._mainslide .slick-next {
    display: none !important;
  }
}

.l-main .top-mainv ._thumb {
  position: absolute;
  bottom: 20px;
  right: 10%;
  z-index: 1;
  width: 370px;
  margin: 0 -2.5px;
}

@media screen and (max-width: 599.999px) {
  .l-main .top-mainv ._thumb {
    display: none;
  }
}

.l-main .top-mainv ._thumb .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.l-main .top-mainv ._thumb li {
  width: 66px !important;
  margin: 0 2.5px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.l-main .top-mainv ._thumb li.slick-current {
  width: 84px !important;
}

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

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

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


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

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

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




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

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

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

@media screen and (max-width: 767.999px) {
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media screen and (max-width: 599.999px) {
  .l-container {
    padding-right: 16px;
    padding-left: 16px;
  }
}

/* @ l-block
 * ------------------------------------------------------------ */
.l-block {
  width: 71%;
  max-width: 710px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 70px;
}

@media screen and (max-width: 599.999px) {
  .l-block {
    margin-bottom: 70px;
  }
}

@media screen and (max-width: 767.999px) {
  .l-block {
    width: 100%;
  }
}

@media screen and (max-width: 599.999px) {
  .l-block {
    width: 100%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .l-block-fluid {
    margin-bottom: 70px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .l-block-primary {
    margin-bottom: 70px;
  }
}

@media screen and (max-width: 599.999px) {
  .l-block-primary {
    float: none;
    width: 100%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .l-block-secondary {
    margin-bottom: 70px;
  }
}

@media screen and (max-width: 599.999px) {
  .l-block-secondary {
    float: none;
    width: 100%;
  }
  .l-block-secondary:before {
    display: block;
    height: 1px;
    margin-right: -16px;
    margin-bottom: 70px;
    margin-left: -16px;
    content: '';
    background-color: #DEDEDE;
  }
}

/* @  l-block--bg
 * ------------------------------------------------------------ */
.l-block--bg {
  padding: 95px 0;
  background: #E3F5F8;
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .l-block--bg {
    padding: 35px 0;
  }
}

.l-block--bg .e-txt-box {
  background-color: #FFFFFF;
  padding: 30px 50px;
  border-radius: 14px;
}

@media screen and (max-width: 599.999px) {
  .l-block--bg .e-txt-box {
    padding: 20px 30px;
  }
}

.l-block--bg.bg-img {
  background: url(/assets/img/top/bg-news.jpg) repeat;
}

.l-block--bg.bg-img .e-txt-box {
  -webkit-box-shadow: 0 3px 6px rgba(112, 112, 112, 0.16);
          box-shadow: 0 3px 6px rgba(112, 112, 112, 0.16);
}

.bg-img {
  background: url(/assets/img/top/bg-news.jpg) repeat;
}

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

@media screen and (max-width: 599.999px) {
  .l-unit {
    margin-bottom: 50px;
  }
}

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

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




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

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


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

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


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

        <p>
          <strong>強い強調を表す要素（strong）</strong><br>
          <em>強調を表す要素（em）</em><br>
          <s>すでに正確ではなくなった要素、打ち消し線（s）</s><br>
          <small>注釈や細目を表す要素（small）</small>
          <br>
          <span>上付き文字（sup）　E=mc<sup>2</sup></span><br>
          <span>下付き文字（sub）　CO<sub>2</sub></span><br>
          <span style="color: #cc3e4c;">エラー色文字（Text Red）</span><br>
        </p>

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



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

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




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


</div>



```


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

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

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

@media screen and (max-width: 599.999px) {
  .visual-editor h2:not(:first-child) {
    margin-top: 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .visual-editor h3:not(:first-child),
  .visual-editor h4:not(:first-child) {
    margin-top: 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .visual-editor h5:not(:first-child),
  .visual-editor h6:not(:first-child) {
    margin-top: 0;
  }
}

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

.visual-editor h1,
.visual-editor h2,
.visual-editor h2,
.visual-editor h3,
.visual-editor h3,
.visual-editor h4,
.visual-editor h4,
.visual-editor h5,
.visual-editor h5 .visual-editor h6 {
  clear: both;
}

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

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

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

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

.clearfloat {
  clear: both;
}

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

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

@media screen and (max-width: 599.999px) {
  .size-thumbnail,
  .size-medium {
    max-width: 33.33%;
  }
}

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

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

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

```html_example


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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols,
  .l-cols {
    margin-right: -2.13333%;
    margin-left: -2.13333%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col1,
  .l-block-primary .l-cols > .l-col2,
  .l-block-primary .l-cols > .l-col3,
  .l-block-primary .l-cols > .l-col4,
  .l-block-primary .l-cols > .l-col5,
  .l-block-primary .l-cols > .l-col6,
  .l-block-primary .l-cols > .l-col7,
  .l-block-primary .l-cols > .l-col8,
  .l-block-primary .l-cols > .l-col9,
  .l-block-primary .l-cols > .l-col10,
  .l-block-primary .l-cols > .l-col11,
  .l-block-primary .l-cols > .l-col12,
  .l-cols > .l-col1,
  .l-cols > .l-col2,
  .l-cols > .l-col3,
  .l-cols > .l-col4,
  .l-cols > .l-col5,
  .l-cols > .l-col6,
  .l-cols > .l-col7,
  .l-cols > .l-col8,
  .l-cols > .l-col9,
  .l-cols > .l-col10,
  .l-cols > .l-col11,
  .l-cols > .l-col12 {
    margin-right: 2.13333%;
    margin-left: 2.13333%;
    margin-bottom: 4.8%;
  }
}

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col1,
  .l-cols > .l-col1 {
    width: 4.06667%;
  }
  .l-block-primary .l-cols > .is-offset1,
  .l-cols > .is-offset1 {
    margin-left: 10.46667%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col2,
  .l-cols > .l-col2 {
    width: 12.4%;
  }
  .l-block-primary .l-cols > .is-offset2,
  .l-cols > .is-offset2 {
    margin-left: 18.8%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col3,
  .l-cols > .l-col3 {
    width: 20.73333%;
  }
  .l-block-primary .l-cols > .is-offset3,
  .l-cols > .is-offset3 {
    margin-left: 27.13333%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col4,
  .l-cols > .l-col4 {
    width: 29.06667%;
  }
  .l-block-primary .l-cols > .is-offset4,
  .l-cols > .is-offset4 {
    margin-left: 35.46667%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col5,
  .l-cols > .l-col5 {
    width: 37.4%;
  }
  .l-block-primary .l-cols > .is-offset5,
  .l-cols > .is-offset5 {
    margin-left: 43.8%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col6,
  .l-cols > .l-col6 {
    width: 45.73333%;
  }
  .l-block-primary .l-cols > .is-offset6,
  .l-cols > .is-offset6 {
    margin-left: 52.13333%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col7,
  .l-cols > .l-col7 {
    width: 54.06667%;
  }
  .l-block-primary .l-cols > .is-offset7,
  .l-cols > .is-offset7 {
    margin-left: 60.46667%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col8,
  .l-cols > .l-col8 {
    width: 62.4%;
  }
  .l-block-primary .l-cols > .is-offset8,
  .l-cols > .is-offset8 {
    margin-left: 68.8%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col9,
  .l-cols > .l-col9 {
    width: 70.73333%;
  }
  .l-block-primary .l-cols > .is-offset9,
  .l-cols > .is-offset9 {
    margin-left: 77.13333%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col10,
  .l-cols > .l-col10 {
    width: 79.06667%;
  }
  .l-block-primary .l-cols > .is-offset10,
  .l-cols > .is-offset10 {
    margin-left: 85.46667%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col11,
  .l-cols > .l-col11 {
    width: 87.4%;
  }
  .l-block-primary .l-cols > .is-offset11,
  .l-cols > .is-offset11 {
    margin-left: 93.8%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols > .l-col12,
  .l-cols > .l-col12 {
    width: 95.73333%;
  }
  .l-block-primary .l-cols > .is-offset12,
  .l-cols > .is-offset12 {
    margin-left: 102.13333%;
  }
}

@media screen and (max-width: 599.999px) {
  .l-block-primary .l-cols--break,
  .l-cols--break {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0 !important;
  }
  .l-block-primary .l-cols--break > .l-col1,
  .l-block-primary .l-cols--break > .l-col2,
  .l-block-primary .l-cols--break > .l-col3,
  .l-block-primary .l-cols--break > .l-col4,
  .l-block-primary .l-cols--break > .l-col5,
  .l-block-primary .l-cols--break > .l-col6,
  .l-block-primary .l-cols--break > .l-col7,
  .l-block-primary .l-cols--break > .l-col8,
  .l-block-primary .l-cols--break > .l-col9,
  .l-block-primary .l-cols--break > .l-col10,
  .l-block-primary .l-cols--break > .l-col11,
  .l-block-primary .l-cols--break > .l-col12,
  .l-cols--break > .l-col1,
  .l-cols--break > .l-col2,
  .l-cols--break > .l-col3,
  .l-cols--break > .l-col4,
  .l-cols--break > .l-col5,
  .l-cols--break > .l-col6,
  .l-cols--break > .l-col7,
  .l-cols--break > .l-col8,
  .l-cols--break > .l-col9,
  .l-cols--break > .l-col10,
  .l-cols--break > .l-col11,
  .l-cols--break > .l-col12 {
    float: none;
    clear: both;
    width: auto;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 4.8%;
  }
  .l-block-primary .l-cols--break > .l-col1::after,
  .l-block-primary .l-cols--break > .l-col2::after,
  .l-block-primary .l-cols--break > .l-col3::after,
  .l-block-primary .l-cols--break > .l-col4::after,
  .l-block-primary .l-cols--break > .l-col5::after,
  .l-block-primary .l-cols--break > .l-col6::after,
  .l-block-primary .l-cols--break > .l-col7::after,
  .l-block-primary .l-cols--break > .l-col8::after,
  .l-block-primary .l-cols--break > .l-col9::after,
  .l-block-primary .l-cols--break > .l-col10::after,
  .l-block-primary .l-cols--break > .l-col11::after,
  .l-block-primary .l-cols--break > .l-col12::after,
  .l-cols--break > .l-col1::after,
  .l-cols--break > .l-col2::after,
  .l-cols--break > .l-col3::after,
  .l-cols--break > .l-col4::after,
  .l-cols--break > .l-col5::after,
  .l-cols--break > .l-col6::after,
  .l-cols--break > .l-col7::after,
  .l-cols--break > .l-col8::after,
  .l-cols--break > .l-col9::after,
  .l-cols--break > .l-col10::after,
  .l-cols--break > .l-col11::after,
  .l-cols--break > .l-col12::after {
    clear: both;
    content: "";
    display: block;
  }
}

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

```html_example

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





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


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


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

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


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

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

@media screen and (max-width: 599.999px) {
  .l-flex-boxes {
    margin-right: -1.7142857143%;
    margin-left: -1.7142857143%;
  }
}

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .l-flex-box {
    margin-right: 1.7142857143%;
    margin-bottom: 16px;
    margin-left: 1.7142857143%;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 46.5714285714%;
            flex: 0 0 46.5714285714%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .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 23%;
          flex: 0 0 23%;
}

@media screen and (max-width: 599.999px) {
  .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 31.3333333333%;
          flex: 1 1 31.3333333333%;
}

@media screen and (max-width: 599.999px) {
  .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;
}

@media screen and (max-width: 599.999px) {
  .l-flex-box--auto {
    -webkit-box-flex: 2;
        -ms-flex: 2 2 15em;
            flex: 2 2 15em;
  }
}

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

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

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

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

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


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

```


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

@media screen and (max-width: 599.999px) {
  .e-box-alert {
    margin-bottom: 30px;
  }
}

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

.e-box-alert--success {
  color: #0B9B51;
  border-color: #0B9B51;
  background-color: #e7f5ee;
}

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

.e-box-alert--warning {
  color: #93429B;
  border-color: #93429B;
  background-color: #f4ecf5;
}

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

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

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

.e-box-alert--info {
  color: #0074B1;
  border-color: #0074B1;
  background-color: #e6f1f7;
}

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

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

@media screen and (max-width: 599.999px) {
  .e-video-container {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-video-container iframe {
    height: 30vh;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-gmap {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-gmap iframe {
    height: 30vh;
  }
}

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

```html_example

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

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

@media screen and (max-width: 599.999px) {
  .acms-entry blockquote,
  .visual-editor blockquote,
  .e-blockquote {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .acms-entry blockquote,
  .visual-editor blockquote,
  .e-blockquote {
    padding: 42px 15px 42px 15px;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .acms-entry blockquote:before,
  .visual-editor blockquote:before,
  .e-blockquote:before {
    left: 6px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .acms-entry blockquote:after,
  .visual-editor blockquote:after,
  .e-blockquote:after {
    right: 6px;
  }
}

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

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

```

*/
.visual-editor h1,
.e-heading1 {
  font-size: 34px;
  color: #ffffff;
  background: #1D2A76;
  margin-bottom: 1rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  padding: 15px 20px;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h1,
  .e-heading1 {
    font-size: 26px;
  }
}

.visual-editor h1::before,
.e-heading1::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  background: #ffffff;
  right: 6px;
  top: 0;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h1,
  .e-heading1 {
    padding: 10px 15px;
  }
}

.visual-editor h2,
.e-heading2 {
  font-size: 34px;
  margin-bottom: 2rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  text-align: center;
  color: #1D2A76;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h2,
  .e-heading2 {
    font-size: 26px;
  }
}

.visual-editor h3,
.e-heading3 {
  font-size: 28px;
  margin-bottom: 2rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  color: #1D2A76;
  border-bottom: 2px solid #1D2A76;
  padding-bottom: 5px;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h3,
  .e-heading3 {
    font-size: 20px;
  }
}

.visual-editor h4,
.e-heading4 {
  font-size: 24px;
  margin-bottom: 2rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  color: #1D2A76;
  border-left: 6px solid #1D2A76;
  padding-left: 14px;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h4,
  .e-heading4 {
    font-size: 16px;
  }
}

.visual-editor h5,
.e-heading5 {
  font-size: 20px;
  margin-bottom: 2rem;
  font-weight: bold;
  overflow: hidden;
  line-height: 1.4;
  color: #1D2A76;
}

@media screen and (max-width: 599.999px) {
  .visual-editor h5,
  .e-heading5 {
    font-size: 15px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .visual-editor h6,
  .e-heading6 {
    font-size: 14px;
  }
}

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

```html_example


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

</div>

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

@media screen and (max-width: 599.999px) {
  .e-heading-date {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-heading-copy {
    margin-bottom: 30px;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .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: 35px;
  }
}

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

.e-heading-group .e-text-date {
  color: #1D2A76;
}

.img-main-thumbnail {
  margin-bottom: 20px;
}

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

```html_example

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

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


    <div class="e-responsive-img">
    <figure class="e-img-box">
      <img src="/assets/img/common/img1.png" alt="">
    </figure>
   </div>


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


```

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

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

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

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

@media screen and (max-width: 599.999px) {
  .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;
  }
}

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

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

.visual-editor figure figcaption,
.visual-editor figure .e-img-caption,
.e-img-box figcaption,
.e-img-box .e-img-caption,
[class^=column-image] figcaption,
[class^=column-image] .e-img-caption {
  text-align: left;
  margin-top: 14px;
  color: #757575;
  line-height: 1.5;
}

.visual-editor figure img,
.e-img-box img,
[class^=column-image] img {
  width: 100%;
}

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

@media screen and (max-width: 599.999px) {
  .is-img-left {
    float: none;
    margin-right: 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-img-right {
    float: none;
    margin-left: 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-img-w25,
  .is-img-w33,
  .is-img-w50,
  .is-img-w100 {
    width: 100%;
  }
}

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

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

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

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

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



```html_example

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


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


```

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

@media screen and (max-width: 599.999px) {
  .visual-editor p,
  .e-text {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-text-catchcopy {
    margin-bottom: 30px;
  }
}

.e-text-read {
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .e-text-read {
    margin-bottom: 30px;
  }
}

/*doc
---

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

---

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .is-text-point {
    padding-right: 0;
  }
}

.is-text-highlight {
  background-color: #FFFF00;
}

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .visual-editor ul,
  .visual-editor ol,
  .e-list {
    margin-bottom: 30px;
  }
}

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

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

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

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

.e-list--disc {
  list-style: none;
  margin-left: 20px;
}

.e-list--disc li {
  position: relative;
}

.e-list--disc li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50px;
  position: absolute;
  display: block;
  background: #1D2A76;
  left: -15px;
  top: 7px;
}

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

.e-list--decimal {
  list-style: none;
  counter-reset: item;
}

.e-list--decimal li {
  position: relative;
}

.e-list--decimal li::before {
  counter-increment: item;
  content: counter(item) ".";
  color: #1D2A76;
  position: absolute;
  left: -15px;
}

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .visual-editor dl,
  .e-dl {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-list-inline {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

.e-list-tag {
  margin-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-right: -3px;
  margin-left: -3px;
  margin-top: -12px;
}

@media screen and (max-width: 599.999px) {
  .e-list-tag {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-list-img-vertical {
    margin-bottom: 30px;
  }
}

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

.e-list-img-vertical li img {
  width: 100%;
  height: auto;
}

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

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

.e-list-img-horizontal {
  text-align: center;
  margin-left: -1.6%;
  margin-right: -1.6%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

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

.e-list-img-horizontal li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 21.8%;
          flex: 0 0 21.8%;
  margin-left: 1.6%;
  margin-right: 1.6%;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}

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

@media all and (-ms-high-contrast: none) {
  .e-list-img-horizontal li > *:last-child {
    min-height: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .e-list-img-horizontal {
    margin-left: 0%;
    margin-right: 0%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .e-list-img-horizontal li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .e-list-img-horizontal li > *:last-child {
    margin-bottom: 0;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  [class*="column-table-"] table caption, .visual-editor table caption, .e-table caption, .visual-editor .e-table--borderless caption, .e-table--borderless caption {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="column-table-"] table,
  .visual-editor table,
  .e-table, .visual-editor .e-table--borderless,
  .e-table--borderless {
    margin-bottom: 30px;
  }
}

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


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

@media screen and (max-width: 599.999px) {
  
  [class*="column-table-"] table th,
  .visual-editor table th,
  .e-table th,
  .visual-editor .e-table--borderless th,
  .e-table--borderless th {
    width: 30%;
    padding: 10px;
  }
}


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

@media screen and (max-width: 599.999px) {
  
  [class*="column-table-"] table td,
  .visual-editor table td,
  .e-table td,
  .visual-editor .e-table--borderless td,
  .e-table--borderless td {
    padding: 10px;
  }
}

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

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

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

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

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

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

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

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

```html_example
  <table class="e-table e-table--sp-block">
    <tr>
      <th>見出し</th>
      <td>テキストが入ります</td>
    </tr>
    <tr>
      <th>見出し</th>
      <td>テキストが入ります</td>
    </tr>
  </table>
```
*/
@media screen and (max-width: 599.999px) {
  .visual-editor .e-table--sp-block th,
  .e-table--sp-block th {
    border-bottom: 0;
  }
  .visual-editor .e-table--sp-block th,
  .visual-editor .e-table--sp-block td,
  .e-table--sp-block th,
  .e-table--sp-block td {
    display: block;
    width: auto;
  }
}

/* テーブル バリエーション  フォント小さい
   ========================================================================== */
/*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>
```
*/
@media screen and (max-width: 599.999px) {
  .visual-editor .e-responsive-table,
  .e-responsive-table {
    position: relative;
    margin-bottom: 30px;
    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;
  }
}

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

@media screen and (max-width: 599.999px) {
  .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;
  }
}

@media screen and (max-width: 599.999px) {
  .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;
  }
}

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

```html_example

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

```


```html_example

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

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


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


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


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


```

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

.e-box {
  display: block;
  border: solid 1px #DEDEDE;
  background: #fff;
  margin-bottom: 30px;
  padding: 25px 50px;
}

@media screen and (max-width: 599.999px) {
  .e-box {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-box {
    padding: 1rem;
  }
}

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

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

.e-box--bg.bg-bule {
  background-color: #E6F1F7;
  border-color: #E6F1F7;
  border-radius: 6px;
}

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

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

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

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

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


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

```html_example

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

```


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

```html_example

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

```


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

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

@media screen and (max-width: 599.999px) {
  .e-button,
  .entry-btn,
  .entry-btn-attention {
    padding: 1rem 2rem;
  }
}

.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:disabled, .e-button.is-disabled,
.entry-btn:disabled,
.entry-btn.is-disabled,
.entry-btn-attention:disabled,
.entry-btn-attention.is-disabled {
  cursor: not-allowed;
  color: #666 !important;
  border: 1px solid #DEDEDE;
  background-color: #eee;
  -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;
  bottom: 0;
  width: 1em;
  height: 1em;
  margin: auto;
}

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

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

.e-button::after,
.entry-btn::after,
.entry-btn-attention::after {
  content: "";
  display: block;
  width: 13px;
  height: 18px;
  background: url(/assets/img/common/icon-btn-arrow-b.svg) no-repeat right top;
  position: absolute;
  right: 27px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.e-button:hover,
.entry-btn:hover,
.entry-btn-attention:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 0.5;
}

.e-button--primary,
.entry-btn-attention {
  color: #fff !important;
  border-color: #1D2A76;
  background-color: #1D2A76;
  font-weight: bold;
  display: inline-block;
  min-width: 200px;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  border-radius: 45px;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.e-button--primary::after,
.entry-btn-attention::after {
  content: "";
  display: block;
  width: 13px;
  height: 18px;
  background: url(/assets/img/common/icon-btn-arrow.svg) no-repeat right top;
  position: absolute;
  right: 27px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.e-button--primary:hover,
.entry-btn-attention:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 0.5;
}

.e-button--accent {
  color: #fff !important;
  border-color: #B90C00;
  background-color: #B90C00;
}

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

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

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


```

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

@media screen and (max-width: 599.999px) {
  .e-button-group {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .e-button-group {
    display: block;
    margin-right: -1.12676%;
    margin-left: -1.12676%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-button-group .e-button {
    margin-right: 1.12676%;
    margin-left: 1.12676%;
  }
}

@media screen and (max-width: 599.999px) {
  .e-button-group .e-button--large {
    width: 97.74648%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-button-group--one-half .e-button {
    width: 50%;
  }
}

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

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

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

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

```

*/
.e-button--small {
  padding: 0.5rem 1.375rem;
  font-size: .75em;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
          box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

.e-button--large {
  padding: 1.4rem 2.5rem;
  font-size: 1.15em;
  font-weight: bold;
  min-width: 31.07981%;
}

@media screen and (max-width: 599.999px) {
  .e-button--large {
    padding: 1.4rem 2.5rem;
    width: 100%;
    min-width: 31.07981%;
  }
}

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

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

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

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



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


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


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

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

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




```



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-form-rc-box--2col > div,
  .e-form-rc-box--2col > li,
  .e-form-rc-box--2col > span {
    width: 100%;
  }
}

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

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

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

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

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

.is-warning {
  border-color: #93429B;
  color: #93429B;
}

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

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

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

.is-valid {
  border-color: #0B9B51;
}

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

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

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

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

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

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

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

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

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

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

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

.e-form-any {
  background-color: #0B9B51;
}

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-form-button-group {
    margin-bottom: 30px;
  }
}

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

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


```html_example

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


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

@media screen and (max-width: 599.999px) {
  .e-form-step {
    margin-bottom: 30px;
  }
}

.e-form-step__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid #DEDEDE;
  overflow: hidden;
}

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

@media screen and (max-width: 599.999px) {
  .e-form-step__item {
    padding: .75em .75em .75em 1.8em;
    text-align: center;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .e-form-step__item:before {
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 0;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .e-form-step__item span {
    display: inline-block;
    text-indent: -9999px;
  }
}

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-form-table {
    margin-bottom: 30px;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .e-form-table th {
    border-bottom: 0;
    display: block;
    width: auto;
    padding: 23px 0 0 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-form-table td {
    display: block;
    width: auto;
    padding: 8px 0 16px 0;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .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;
  }
}

@media screen and (max-width: 599.999px) {
  .e-form-col0_5--sm {
    width: 4.16667%;
  }
  .e-form-col1--sm {
    width: 8.33333%;
  }
  .e-form-col2--sm {
    width: 16.66667%;
  }
  .e-form-col3--sm {
    width: 25.0%;
  }
  .e-form-col4--sm {
    width: 33.33333%;
  }
  .e-form-col5--sm {
    width: 41.66667%;
  }
  .e-form-col6--sm {
    width: 50.0%;
  }
  .e-form-col7--sm {
    width: 58.33333%;
  }
  .e-form-col8--sm {
    width: 66.66667%;
  }
  .e-form-col9--sm {
    width: 75.0%;
  }
  .e-form-col10--sm {
    width: 83.33333%;
  }
  .e-form-col11--sm {
    width: 91.66667%;
  }
  .e-form-col12--sm {
    width: 100%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-required-countdown-group {
    top: auto;
    right: 0;
    bottom: 0;
    width: 100%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .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 {
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.4;
}

@media screen and (max-width: 599.999px) {
  .e-required-countdown-group__text {
    display: inline;
    text-align: left;
    font-size: 1rem;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-required-countdown-group__num {
    display: inline;
    padding-left: 10px;
    font-size: 2.66rem;
  }
}

.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: #D93636;
  background: #D93636;
  color: #ffffff;
  z-index: 991;
  top: 5px;
}

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

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



```html_example

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

```


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

@media screen and (max-width: 599.999px) {
  .e-media {
    margin-bottom: 30px;
  }
}

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

.e-media > a .e-media__img {
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .e-media__img {
    width: 80px;
  }
}

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

.e-media__body {
  overflow: hidden;
}

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

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

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

@media screen and (max-width: 599.999px) {
  .e-media__title {
    font-size: 20px;
  }
}

@media screen and (max-width: 599.999px) {
  .e-media__title {
    margin-bottom: 10px;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .e-media__text + .e-media__text {
    margin-top: 30px;
  }
}

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

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


```html_example

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

```

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

@media screen and (max-width: 599.999px) {
  .e-card {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .e-card {
    max-width: inherit;
  }
}

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

.e-card > a .e-card__img {
  overflow: hidden;
  position: relative;
}

.e-card > a .e-card__img::before {
  content: "";
  display: block;
  padding-top: 62.3%;
}

.e-card > a .e-card__img img {
  width: 100%;
  max-width: none;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
}

.e-card > a:hover .e-card__img img, .e-card > a:focus .e-card__img img {
  /*@include zoom();*/
}

.e-card > a:active .e-card__img img {
  /*@include zoom();*/
}

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

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

@media screen and (max-width: 599.999px) {
  .e-card__body {
    padding-top: 15px;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .e-card__title {
    font-size: 20px;
  }
}

.e-card__text {
  font-size: 13px;
}

@media screen and (max-width: 599.999px) {
  .e-card__text {
    font-size: 17px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .e-card__text + .e-card__text {
    margin-top: 30px;
  }
}

.e-card__text .text-interview {
  display: block;
  font-size: 11px;
  color: #817E7D;
}

@media screen and (max-width: 599.999px) {
  .e-card__text .text-interview {
    font-size: 14px;
  }
}

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

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


```



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

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

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

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

  ]
}
</script>

```

*/
.c-breadcrumb {
  padding: 0 16px;
  margin-bottom: 57px;
}

@media screen and (max-width: 599.999px) {
  .c-breadcrumb {
    padding-top: calc(5 / 375 * 100vw);
    margin-bottom: calc(30 / 375 * 100vw);
  }
}

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

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

.c-breadcrumb__inner li span::before {
  margin-right: 15px;
  margin-left: 10px;
  display: inline-block;
  width: 4px;
  height: 4px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-style: solid;
  border-color: #1A1311;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 0;
  border-left-width: 0;
  content: "";
  vertical-align: middle;
}

.c-breadcrumb__inner li:first-child span::before {
  display: none;
}

@media screen and (max-width: 599.999px) {
  .c-breadcrumb__inner {
    white-space: nowrap;
    overflow: scroll;
    -ms-overflow-style: none;
  }
}

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

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

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


@include media-sp-max {
  .c-to-top {
    display: none;
  }
}

.c-to-top a {
  display: block;
  position: fixed;
  right: 15px;
  bottom: -100px;
  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;

  @include elevation(6);
  @include elevation-transition;

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

  //&:hover {
  //  background: $primary-color;
  //  transition: all $animation;
  //
  //  span {
  //    border-color: #ffffff;
  //  }
  //
  //}
}
*/
.c-to-top {
  position: absolute;
  top: -20px;
  right: 20px;
  z-index: 1000;
}

@media screen and (max-width: 599.999px) {
  .c-to-top {
    width: 10%;
  }
}

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

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

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

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

@media screen and (max-width: 599.999px) {
  .c-pagenavi {
    margin-bottom: 30px;
  }
}

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

.c-pagenavi__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.c-pagenavi .cur,
.c-pagenavi .is-current,
.c-pagenavi .c-extend,
.c-pagenavi a {
  margin-left: 0;
  margin-bottom: 10px;
  display: inline-block;
  min-width: 30px;
  height: 30px;
  -webkit-transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 280ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #ffffff;
  line-height: 28px;
  text-align: center;
  text-decoration: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #DEDEDE;
  color: #757575;
  margin-right: -1px;
}

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

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

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

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

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

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

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

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

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

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

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

```html_example

  <div class="c-pager">
    <ul class="c-pager__inner">
      <li class="c-pager__prev"><a href="" class="is-disabled"><i class="material-icons">chevron_left</i> 前へ</a></li>
      <li class="c-pager__to-list"><a href="">一覧</a></li>
      <li class="c-pager__next"><a href="">次へ<i class="material-icons">chevron_right</i></a></li>
    </ul>
  </div>


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

@media screen and (max-width: 599.999px) {
  .c-pager {
    margin-bottom: 30px;
  }
}

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

.c-pager__to-list a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  color: #1D2A76;
  font-weight: bold;
}

.c-pager__to-list a:hover {
  opacity: 0.5;
}

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

.c-pager__prev a, .c-pager__next a {
  position: relative;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.c-pager__prev a:hover, .c-pager__next a:hover {
  opacity: 0.5;
}

.c-pager__prev a {
  color: #1D2A76;
  font-weight: bold;
  padding-left: 30px;
}

.c-pager__prev a::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-bottom: 2px solid #1D2A76;
  border-left: 2px solid #1D2A76;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

.c-pager__next a {
  color: #1D2A76;
  font-weight: bold;
  padding-right: 30px;
}

.c-pager__next a::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #1D2A76;
  border-right: 2px solid #1D2A76;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

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

```html_example

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

   </ul>

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

@media screen and (max-width: 599.999px) {
  .c-headline {
    margin-bottom: 30px;
  }
}

.c-headline__item {
  line-height: 1.4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid #DEDEDE;
  padding: 24px 16px 20px 16px;
}

@media screen and (max-width: 599.999px) {
  .c-headline__item {
    display: block;
    padding: 15px 14px 16px 14px;
  }
}

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

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

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

.c-headline__label {
  margin-right: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (max-width: 599.999px) {
  .c-headline__label {
    display: inline;
  }
}

.c-headline__label span {
  white-space: nowrap;
  margin-right: .3em;
}

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

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

@media screen and (max-width: 599.999px) {
  .c-headline__title {
    margin-top: .4em;
  }
}

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

```html_example

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

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

@media screen and (max-width: 599.999px) {
  .c-headline-search {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-headline-search__item {
    margin-bottom: 50px;
  }
}

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

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

.c-headline-search__title {
  font-size: 28px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 6px;
}

@media screen and (max-width: 599.999px) {
  .c-headline-search__title {
    font-size: 20px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-headline-search__title {
    margin-bottom: 0;
  }
}

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

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

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

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

```html_example
<div class="c-menu">
  <h3 class="c-menu__title">カテゴリー名</h3>
  <ul class="c-menu__list">
    <li><a href="">タイトル</a>
      <ul class="c-menu__list">
        <li><a href="" class="is-active">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
      </ul>
    </li>
    <li><a href="">タイトル</a></li>
    <li><a href="">タイトル</a></li>
  </ul>
</div>


```
*/
/* menu
   ========================================================================== */
.c-menu__title {
  color: #1D2A76;
  font-size: 18px;
  font-weight: bold;
  display: block;
  padding-bottom: 10px;
  border-bottom: 3px solid #1D2A76;
}

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

@media screen and (max-width: 599.999px) {
  .c-menu__list {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .c-menu__list-tag {
    margin-bottom: 30px;
  }
}

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

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

*/
.visual-editor .c-anchor-nav,
.c-anchor-nav {
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .visual-editor .c-anchor-nav,
  .c-anchor-nav {
    margin-bottom: 30px;
  }
}

.visual-editor .c-anchor-nav__body,
.c-anchor-nav__body {
  position: relative;
}

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

.visual-editor .c-anchor-nav ul,
.c-anchor-nav ul {
  margin-left: 0;
  margin-bottom: 0;
  -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;
}

.visual-editor .c-anchor-nav li,
.c-anchor-nav li {
  list-style: none;
  margin-bottom: .4em;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33%;
          flex: 0 0 33%;
}

@media screen and (max-width: 599.999px) {
  .visual-editor .c-anchor-nav li,
  .c-anchor-nav li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
}

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

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

@media screen and (max-width: 599.999px) {
  .visual-editor .c-anchor-nav li a,
  .c-anchor-nav li a {
    font-size: 15px;
    padding-left: 10px;
  }
}

.visual-editor .c-anchor-nav li a::before,
.c-anchor-nav li a::before {
  /*display: inline-block;
        width: 5px;
        height: 5px;
        transform: rotate(225deg);
        border-top: 1px solid $secondary-text-color;
        border-left: 1px solid $secondary-text-color;
        content: "";
        vertical-align: middle;
        position: relative;
        top: -2px;
        margin-right: 7px;*/
  content: "";
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 10px;
  height: 15px;
  border: 5px solid transparent;
  border-left-color: transparent;
  border-left-style: solid;
  border-left-width: 5px;
  border-top: 10px solid #0E8E56;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

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

```html_example


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



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

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

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

@media all and (-ms-high-contrast: none) {
  .c-summary1 .c-summary__item > *:last-child {
    min-height: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .c-summary1 {
    margin-left: -2.0%;
    margin-right: -2.0%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .c-summary1 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 95.99999%;
            flex: 0 0 95.99999%;
    margin-left: 2.0%;
    margin-right: 2.0%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-summary1 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
}

.c-summary2 {
  margin-left: -1.2%;
  margin-right: -1.2%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.c-summary2 .c-summary__item {
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  .c-summary2 .c-summary__item {
    margin-bottom: 50px;
  }
}

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

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

@media all and (-ms-high-contrast: none) {
  .c-summary2 .c-summary__item > *:last-child {
    min-height: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .c-summary2 {
    margin-left: 0%;
    margin-right: 0%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .c-summary2 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-summary2 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
}

.c-summary3 {
  margin-left: -1.2%;
  margin-right: -1.2%;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.c-summary3 .c-summary__item {
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  .c-summary3 .c-summary__item {
    margin-bottom: 50px;
  }
}

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

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

@media all and (-ms-high-contrast: none) {
  .c-summary3 .c-summary__item > *:last-child {
    min-height: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .c-summary3 {
    margin-left: 0%;
    margin-right: 0%;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .c-summary3 .c-summary__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin-left: 0%;
    margin-right: 0%;
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
  }
  .c-summary3 .c-summary__item > *:last-child {
    margin-bottom: 0;
  }
}

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



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

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


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

@media screen and (max-width: 599.999px) {
  .c-keyword-search {
    padding: 12px 16px 16px 16px;
  }
}

@media screen and (max-width: 599.999px) {
  .c-keyword-search {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-keyword-search__body {
    display: block;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-keyword-search__title {
    margin-bottom: 10px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-keyword-search__input {
    width: 100%;
  }
}

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

.c-keyword-search__control {
  margin-top: 1em;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (max-width: 599.999px) {
  .c-keyword-search__control {
    display: block;
  }
}

.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: #BABABA;
  width: 1em;
  padding-right: 1em;
  padding-left: 1em;
}

@media screen and (max-width: 599.999px) {
  .c-keyword-search__control-item:before {
    display: none;
  }
}

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

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

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

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

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

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

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

```html_example

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

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

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

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

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



```

<div class="c-accordion" data-accordion data-device-accordion="all">
  <button type="button" class="c-accordion__title" aria-expanded="true" aria-label="開く" data-toggle-accordion>Javascript</button>
    <div class="c-accordion__body" aria-hidden="true" data-body-accordion>
  <ul class="list list--disc">
    <li>data-accordion class="is-active"</li>
    <li>data-toggle-accordion</li>
    <li>data-body-accordion </li>
    <li>data-device-accordion = `all`, `pc`, `tab`, `sp`</li>
  </ul>
    </div>
</div>


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


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

@media screen and (max-width: 599.999px) {
  .c-accordion {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

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

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

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

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

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

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

.c-accordion--faq {
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-accordion--faq {
    margin-bottom: calc(10 / 375 * 100vw);
  }
}

.c-accordion--faq .c-accordion__title {
  font-size: 18px;
  /*padding-left: 4.5rem;*/
  padding: 22px 35px 20px 4.5rem;
}

@media screen and (max-width: 599.999px) {
  .c-accordion--faq .c-accordion__title {
    padding: 15px calc(30 / 375 * 100vw) 10px calc(45 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-accordion--faq .c-accordion__title:after {
  right: 10px;
}

.c-accordion--faq .c-accordion__title:before {
  width: 35px;
  height: 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: 'Q';
  color: #fff;
  display: inline-block;
  border-radius: 100px;
  background-color: #0E8E56;
  font-size: 20px;
  text-align: center;
  position: absolute;
  left: 1.5rem;
  top: 18px;
  font-family: "Futura", sans-serif;
}

@media screen and (max-width: 599.999px) {
  .c-accordion--faq .c-accordion__title:before {
    width: calc(25 / 375 * 100vw);
    height: calc(25 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
    line-height: calc(24 / 375 * 100vw);
    top: calc(11 / 375 * 100vw);
    left: calc(10 / 375 * 100vw);
  }
}

.c-accordion--faq .c-accordion__body {
  font-size: 16px;
  padding-left: 4.5rem;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .c-accordion--faq .c-accordion__body {
    padding: 10px calc(10 / 375 * 100vw) 10px calc(45 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-accordion--faq .c-accordion__body:before {
  width: 35px;
  height: 35px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: 'A';
  color: #0E8E56;
  display: inline-block;
  border-radius: 100px;
  background-color: #F5F5F5;
  font-size: 20px;
  text-align: center;
  line-height: 1.6;
  position: absolute;
  left: 1.5rem;
  top: 20px;
  font-family: "Futura", sans-serif;
}

@media screen and (max-width: 599.999px) {
  .c-accordion--faq .c-accordion__body:before {
    width: calc(25 / 375 * 100vw);
    height: calc(25 / 375 * 100vw);
    font-size: calc(16 / 375 * 100vw);
    line-height: calc(24 / 375 * 100vw);
    top: calc(11 / 375 * 100vw);
    left: calc(10 / 375 * 100vw);
  }
}

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

```html_example

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


```

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

@media screen and (max-width: 599.999px) {
  .c-tab {
    margin-bottom: 30px;
  }
}

.c-tab [data-tabpanel][aria-hidden="true"] {
  display: none;
  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"] {
  display: block;
  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);
}

@media screen and (max-width: 599.999px) {
  .c-tab {
    margin-right: -16px;
    margin-left: -16px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-tab__nav {
    padding: 6px 6px 0;
  }
}

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

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

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

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

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

@media screen and (max-width: 599.999px) {
  .c-tab__body {
    border-width: 1px 0 0;
    padding: 16px;
  }
}

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

.c-tab__to-list a {
  border-radius: 4px;
  background-color: #eef0f4;
  padding: .3em .7em;
  display: inline-block;
  color: #000000;
  font-size: 14px;
  -webkit-transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: box-shadow;
}

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

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

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

```html_example



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

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

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

      </div>
    </div>
    <button type="button" class="c-modal-dialog__close" data-close-modal aria-expanded="true" aria-label="dialogを閉じる">close</button>
  </div>


```



<div class="c-accordion" data-accordion data-device-accordion="all">
  <button type="button" class="c-accordion__title" aria-expanded="true" aria-label="開く" data-toggle-accordion>Javascript</button>
    <div class="c-accordion__body" aria-hidden="true" data-body-accordion>
  <ul>
    <li>･data-open-modal</li>
    <li>･data-modal</li>
    <li>･data-close-modal</li>
    <li>･data-clone-modal="aria-controls名"</li>
    <li>･data-append-modal</li>
    <li>･背景暗転はjsで作成します。</li>
  </ul>
    </div>
</div>

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

*/
.c-modal-dialog {
  display: none;
  z-index: 99999;
  position: fixed;
  top: 15%;
  left: 0;
  right: 0;
  padding: 25px;
  background-color: #ffffff;
  border-radius: 4px;
  width: 710px;
  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;
}

@media screen and (max-width: 599.999px) {
  .c-modal-dialog {
    width: auto;
    margin-right: 16px;
    margin-left: 16px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-modal-dialog__scroll {
    padding-right: 10px;
  }
}

.c-modal-dialog__close {
  color: #ffffff;
  border: none;
  display: block;
  width: 20px;
  height: 20px;
  -webkit-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);
          transform: rotate(135deg);
}

.c-modal-dialog__close:after {
  -webkit-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: 28px;
}

@media screen and (max-width: 599.999px) {
  .c-modal-dialog__title {
    font-size: 20px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .c-modal-dialog__button-group {
    margin-top: 30px;
  }
}

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

```html_example

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

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

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

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


</script>




```
*/
.swiper-main {
  position: relative;
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  .swiper-main {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 599.999px) {
  .swiper-main {
    margin-right: -16px;
    margin-left: -16px;
  }
}

.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: #1D2A76;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 100;
}

@media screen and (max-width: 599.999px) {
  .swiper-main .swiper-controls {
    background-color: inherit;
    position: static;
    float: right;
  }
}

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

@media screen and (max-width: 599.999px) {
  .swiper-main .swiper-start,
  .swiper-main .swiper-stop {
    padding: 5px 3px;
    opacity: 1;
    color: #1D2A76;
  }
}

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

@media screen and (max-width: 599.999px) {
  .swiper-main .swiper-start.on,
  .swiper-main .swiper-stop.on {
    color: #5B5B5B;
  }
}

.swiper-main .swiper-pagination-bullets {
  position: static;
  margin-top: .8em;
}

@media screen and (max-width: 599.999px) {
  .swiper-main .swiper-pagination-bullets {
    margin-top: -2em;
    text-align: left;
    max-width: 80%;
    padding-left: 10px;
  }
}

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

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

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


```html_example

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


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

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

</script>


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

@media screen and (max-width: 599.999px) {
  .swiper-3to2to1 {
    margin-bottom: 30px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .swiper-3to2to1 .swiper-button-prev,
  .swiper-3to2to1 .swiper-button-next {
    display: none;
  }
}

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

@media screen and (max-width: 1000px) {
  .swiper-3to2to1 .swiper-button-prev {
    display: none;
  }
  .swiper-3to2to1 .swiper-button-next {
    display: none;
  }
}

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

@media screen and (max-width: 599.999px) {
  .swiper-3to2to1 .swiper-pagination-bullets {
    display: none;
  }
}

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

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


```html_example

<div>
    <div class="c-control-offcanvas">
          <button
              type="button"
              aria-controls="aria-offcanvas"
              aria-expanded="false"
              aria-label="開く"
              data-toggle-offcanvas>
            <span class="c-control-offcanvas__icon"><span></span><span></span><span></span></span>
            <span class="c-control-offcanvas__title">メニュー</span>
          </button>
    </div>
    </div>

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

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

<div id="js-offcanvas-bg"></div>
```
*/
.c-control-offcanvas a,
.c-control-offcanvas button {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  white-space: nowrap;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  outline: none;
  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);
          transform: rotate(0deg);
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}

.c-control-offcanvas__icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: inherit;
  background-color: #000000;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-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: 2px;
}

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

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

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

[aria-expanded="true"] .c-control-offcanvas__icon span:nth-child(1) {
  top: 8px;
  -webkit-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);
          transform: rotate(-135deg);
}

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

.c-offcanvas {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
  width: 100%;
  background: #000000;
  display: none;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  /*  transform-style: preserve-3d;
  transition-delay: .1s;
  transition-duration: .2s;
  transition-property: transform, left;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);*/
  z-index: 9999;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  overflow-y: auto;
}

.c-offcanvas[aria-hidden="false"] {
  display: block;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.c-offcanvas__body {
  position: absolute;
  top: 55px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding-right: 16px;
  padding-left: 16px;
}

.c-offcanvas nav {
  padding-bottom: 50px;
}

.c-offcanvas nav li a {
  line-height: 1.4;
  border-radius: 0;
  font-size: calc(16 / 375 * 100vw);
  font-weight: 500;
  color: #ffffff;
  padding: 11px 5px;
  display: block;
  text-decoration: none;
  position: relative;
}

.c-offcanvas nav li a span {
  width: 44px;
  display: inline-block;
  margin-right: 15px;
  text-align: center;
}

.c-offcanvas nav li:nth-child(5) {
  margin-bottom: 10px;
}

.c-offcanvas nav li.nav_m {
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);
}

.c-offcanvas nav li.nav_l {
  display: inline-block;
  padding-right: 6px;
}

.c-offcanvas nav li.nav_l a {
  padding: 0;
  line-height: 1;
}

.c-offcanvas nav li.nav_l + .nav_l {
  border-left: 1px solid #FFFFFF;
  padding-left: 10px;
  padding-right: 0;
}

.c-offcanvas nav .language {
  display: inline-block;
  border: 1px solid #ffffff;
  padding: 8px 15px 5px;
  margin-left: 5px;
  margin-top: 10px;
}

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

/* ==========================================================================
   #ranking
   ========================================================================== */
/*doc
---

---

```html_example
<p class="c-ranking" data-scroll="to-top">
  <a href="#skippy"><span>ページトップへ</span></a>
</p>
```
*/
.c-ranking {
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .c-ranking {
    margin-bottom: 30px;
  }
}

.c-ranking a {
  color: inherit;
  text-decoration: none;
}

.c-ranking a:hover {
  opacity: 0.6;
}

.c-ranking__title {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 28px;
  text-align: center;
  margin-bottom: 22px;
}

.c-ranking .text-taxonomy {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-bottom: 8px;
}

@media screen and (max-width: 599.999px) {
  .c-ranking .text-taxonomy {
    margin-left: 45px;
    margin-bottom: 18px;
  }
}

.c-ranking__list {
  counter-reset: number;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__list {
    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;
  }
}

.c-ranking__item {
  margin-bottom: 25px;
  padding-left: 45px;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item {
    width: 50%;
    margin-bottom: 0;
    padding: 30px 10px 20px 0;
  }
}

.c-ranking__item::before {
  counter-increment: number;
  content: counter(number);
  background-color: #5B5B5B;
  color: #ffffff;
  font-family: "Oswald", sans-serif;
  font-size: 18px;
  display: inline-block;
  padding: 2px 2px 3px;
  width: 35px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 0 0 10px 0;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item::before {
    top: 20px;
  }
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:nth-child(4), .c-ranking__item:nth-child(5) {
    border-top: solid 1px #DDDDDD;
  }
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:nth-child(3), .c-ranking__item:nth-child(5) {
    padding-left: 10px;
  }
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:nth-child(3)::before, .c-ranking__item:nth-child(5)::before {
    left: 10px;
  }
}

.c-ranking__item:nth-child(3)::after, .c-ranking__item:nth-child(5)::after {
  content: "";
  display: block;
  position: absolute;
  height: 80%;
  width: 1px;
  top: 10%;
  left: -1px;
  background: #DDDDDD;
}

.c-ranking__item:first-child {
  padding-left: 0;
  padding-top: 0;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:first-child {
    width: 100%;
    border-bottom: solid 1px #DDDDDD;
  }
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:first-child::before {
    top: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .c-ranking__item:first-child .text-taxonomy {
    margin-left: 0;
    margin-bottom: 8px;
  }
}

.c-ranking__img {
  margin-bottom: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__img {
    width: 50%;
    float: left;
    margin-bottom: 0;
    margin-right: 13px;
  }
}

.c-ranking [data-taxonomy="interview"] {
  color: #EA5098;
}

.c-ranking [data-taxonomy="special"] {
  color: #FCCD0A;
}

.c-ranking [data-taxonomy="topics"] {
  color: #1CC7CF;
}

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

.c-ranking__text .text-interview {
  display: block;
  font-size: 11px;
  color: #817E7D;
}

.c-ranking__more a {
  font-size: 11px;
  display: block;
  margin: 0 auto;
  padding: 10px 30px 10px;
  border: solid 1px #5B5B5B;
  background-color: #ffffff;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .c-ranking__more a {
    text-align: center;
    margin-top: 15px;
  }
}

.c-ranking__more a::before {
  content: "";
  display: block;
  width: 29px;
  height: 3px;
  background-color: #5B5B5B;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.c-ranking__more a::after {
  content: "";
  display: block;
  width: 14px;
  height: 6px;
  background: url("../img/common/icon-btn-arrow-s.svg") no-repeat right top;
  position: absolute;
  right: 16px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* ==========================================================================
   #comment
   ========================================================================== */
.comments-area .comments-title-wrap {
  margin-bottom: 20px;
}

.comments-area .comment-body {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #DEDEDE;
}

.comments-area .comment-body .comment-author {
  margin-bottom: 10px;
}

.comments-area .comment-body .comment-author img {
  margin-right: 15px;
}

.comments-area .comment-body .commentmetadata a {
  color: #757575;
  text-decoration: none;
  margin-bottom: 5px;
  display: inline-block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.comments-area .comment-body .commentmetadata a:hover {
  opacity: 0.5;
}

.comments-area .comment-body .fn {
  font-style: inherit;
}

.comments-area .comment-body .comment-reply-link {
  margin-top: 15px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #757575;
  color: #757575;
  padding: 0 5px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.comments-area .comment-body .comment-reply-link:hover {
  opacity: 0.5;
}

.comments-area .comments-title,
.comments-area .screen-reader-text {
  color: #1D2A76;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  font-size: 16px;
  margin-top: 50px;
}

.comments-area .comments-title[aria-hidden="true"] {
  display: none;
}

.comments-area form .comment-notes {
  margin-bottom: 20px;
}

.comments-area form .comment-form-comment {
  margin-bottom: 10px;
  width: 100%;
  display: table;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-comment {
    display: block;
  }
}

.comments-area form .comment-form-comment label {
  width: 20%;
  display: table-cell;
  vertical-align: top;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-comment label {
    width: auto;
    display: block;
  }
}

.comments-area form .comment-form-comment textarea {
  width: 100%;
  border: 1px solid #dddddd;
  display: table-cell;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-comment textarea {
    display: block;
  }
}

.comments-area form .comment-form-author,
.comments-area form .comment-form-email,
.comments-area form .comment-form-url {
  margin-bottom: 10px;
  display: table;
  width: 100%;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-author,
  .comments-area form .comment-form-email,
  .comments-area form .comment-form-url {
    display: block;
  }
}

.comments-area form .comment-form-author label,
.comments-area form .comment-form-email label,
.comments-area form .comment-form-url label {
  width: 20%;
  display: table-cell;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-author label,
  .comments-area form .comment-form-email label,
  .comments-area form .comment-form-url label {
    display: block;
    width: 100%;
  }
}

.comments-area form .comment-form-author input,
.comments-area form .comment-form-email input,
.comments-area form .comment-form-url input {
  width: 100%;
  border: 1px solid #dddddd;
  display: table-cell;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599.999px) {
  .comments-area form .comment-form-author input,
  .comments-area form .comment-form-email input,
  .comments-area form .comment-form-url input {
    display: block;
  }
}

.comments-area form .form-submit input {
  border-radius: 0;
  padding: 5px 15px;
  line-height: 1.5;
  font-weight: normal;
  color: #7c7c7c;
  border: 1px solid #d2d2d2;
  -webkit-box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
          box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
  margin: 10px 0;
  background: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}

.comments-area form .form-submit input:hover {
  opacity: 0.5;
}

/* ==========================================================================
   #archive
   ========================================================================== */
.archive-list ._list {
  margin-bottom: 60px;
}

@media screen and (max-width: 599.999px) {
  .archive-list ._list {
    margin: 0 0 30px;
  }
}

.archive-list ._list dl {
  display: table;
  border-bottom: 1px solid #E8E8E8;
  width: 100%;
  padding: 15px;
}

@media screen and (max-width: 599.999px) {
  .archive-list ._list dl {
    padding: 15px 10px;
  }
}

.archive-list ._list dl.blog span {
  color: #1D2A76;
  border: 1px solid #1D2A76;
}

.archive-list ._list dl.blog span::before {
  border-bottom: 10px solid #1D2A76;
}

.archive-list ._list dl.info span {
  color: #571D76;
  border: 1px solid #571D76;
}

.archive-list ._list dl.info span::before {
  border-bottom: 10px solid #571D76;
}

.archive-list ._list dt {
  display: table-cell;
  vertical-align: middle;
  width: 185px;
}

@media screen and (max-width: 599.999px) {
  .archive-list ._list dt {
    display: block;
    width: auto;
    margin-bottom: 10px;
  }
}

.archive-list ._list dt span {
  width: 85px;
  text-align: center;
  padding: 2px 0;
  display: inline-block;
  font-weight: bold;
  position: relative;
  margin-left: 30px;
}

@media screen and (max-width: 599.999px) {
  .archive-list ._list dt span {
    width: 65px;
    padding: 1px 0;
    margin-left: 10px;
  }
}

.archive-list ._list dt span::before {
  content: "";
  position: absolute;
  display: block;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
  border-left: 10px solid transparent;
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
  left: -7px;
  top: -2px;
}

.archive-list ._list dd {
  font-weight: bold;
  display: inline-block;
  position: relative;
  margin-left: 35px;
}

@media screen and (max-width: 599.999px) {
  .archive-list ._list dd {
    margin-left: 0;
    font-size: 15px;
  }
}

.archive-list ._list dd .is-new {
  font-family: "Oswald", sans-serif;
  color: #ffffff !important;
  border-radius: 0;
  border: none !important;
  font-size: 14px;
}

.archive-list ._list dd a {
  text-decoration: none;
  color: #000000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding-right: 10px;
}

.archive-list ._list dd a:hover {
  opacity: 0.5;
}

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

.material-icons, .e-box-alert:before, .e-form-error-text:before, .c-accordion__title:after, .is-icon-target-blank:after,
.visual-editor [target="_blank"]:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
  display: none\9;
}

@media all and (-ms-high-contrast: none) {
  .material-icons, .e-box-alert:before, .e-form-error-text:before, .c-accordion__title:after, .is-icon-target-blank:after,
  .visual-editor [target="_blank"]:after {
    display: inline-block\0;
  }
}

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

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

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

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

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

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

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

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

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

```html_example


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

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


```

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

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

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

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

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

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

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

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

```
*/
.is-new {
  background-color: #D93636;
  border-radius: 2px;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 6px;
  margin-right: 6px;
  text-decoration: none;
  display: inline-block;
}

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

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

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

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

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

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

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

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

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

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

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

---


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

</ul>


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

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

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

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

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

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


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

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

---


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

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

[v-cloak] {
  display: none;
}

.swiper-container {
  display: none;
}

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

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

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

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

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


<div class="styleguide-table"></div>
 Class        |  Description
 -------------| ----------
 `is-color-success`      |
 `is-color-warning`      |
 `is-color-error`        |
 `is-color-info`         |
 `is-bg-color-success`   |
 `is-bg-color-warning`   |
 `is-bg-color-error`     |
 `is-bg-color-info`      |

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.is-color-success {
  color: #0B9B51 !important;
}

.is-bg-color-success {
  background-color: #0B9B51 !important;
}

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

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

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

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

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

.is-bg-color-info {
  background-color: #0074B1 !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 !important;
}

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

@media screen and (min-width: 1000.001px) {
  .is-visible--lg {
    display: block;
  }
  .is-visible-ib--lg {
    display: inline-block;
  }
  .is-hidden--lg {
    display: none;
  }
}

@media screen and (max-width: 767.999px) {
  .is-visible--md {
    display: block;
  }
  .is-visible-ib--md {
    display: inline-block;
  }
  .is-hidden--md {
    display: none;
  }
}

@media screen and (max-width: 599.999px) {
  .is-visible--sm {
    display: block !important;
  }
  .is-visible-ib--sm {
    display: inline-block !important;
  }
  .is-hidden--sm {
    display: none !important;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-flex-center--lg {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 767.999px) {
  .is-flex-center--md {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 599.999px) {
  .is-flex-center--sm {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-float-left--lg {
    float: left;
  }
}

@media screen and (max-width: 767.999px) {
  .is-float-left--md {
    float: left;
  }
}

@media screen and (max-width: 599.999px) {
  .is-left--sm {
    text-align: left;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-float-right--lg {
    float: right;
  }
}

@media screen and (max-width: 767.999px) {
  .is-float-right--md {
    float: right;
  }
}

@media screen and (max-width: 599.999px) {
  .is-right--sm {
    float: right;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-flex-start--lg {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

@media screen and (max-width: 767.999px) {
  .is-flex-start--md {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

@media screen and (max-width: 599.999px) {
  .is-flex-start--sp {
    -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;
}

@media screen and (min-width: 1000.001px) {
  .is-flex-end--lg {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media screen and (max-width: 767.999px) {
  .is-flex-end--md {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

@media screen and (max-width: 599.999px) {
  .is-flex-end--sm {
    -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;
}

@media screen and (min-width: 1000.001px) {
  .is-space-between--lg {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 767.999px) {
  .is-space-between--md {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

@media screen and (max-width: 599.999px) {
  .is-space-between--sm {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.is-inline {
  display: inline;
}

@media screen and (min-width: 1000.001px) {
  .is-inline--lg {
    display: inline;
  }
}

@media screen and (max-width: 767.999px) {
  .is-inline--md {
    display: inline;
  }
}

@media screen and (max-width: 599.999px) {
  .is-inline--sm {
    display: inline;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-ib--lg {
    display: inline-block;
  }
}

@media screen and (max-width: 767.999px) {
  .is-ib--md {
    display: inline-block;
  }
}

@media screen and (max-width: 599.999px) {
  .is-ib--sm {
    display: inline-block;
  }
}

.is-block {
  display: block;
}

@media screen and (min-width: 1000.001px) {
  .is-block--lg {
    display: block;
  }
}

@media screen and (max-width: 767.999px) {
  .is-block--md {
    display: block;
  }
}

@media screen and (max-width: 599.999px) {
  .is-block--sm {
    display: block;
  }
}

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

@media screen and (min-width: 1000.001px) {
  .is-br--lg:after {
    white-space: pre;
    content: "\A";
  }
}

@media screen and (max-width: 767.999px) {
  .is-br--md:after {
    white-space: pre;
    content: "\A";
  }
}

@media screen and (max-width: 599.999px) {
  .is-br--sm:after {
    white-space: pre;
    content: "\A";
  }
}

.is-w100p {
  width: 100%;
}

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

---


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

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

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

@media screen and (min-width: 1000.001px) {
  .is-gapless--lg {
    margin-right: -16px;
    margin-left: -16px;
  }
}

@media screen and (max-width: 767.999px) {
  .is-gapless--md {
    margin-right: -16px;
    margin-left: -16px;
  }
}

@media screen and (max-width: 599.999px) {
  .is-gapless--sm {
    margin-right: -16px;
    margin-left: -16px;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-mb-xs {
    margin-bottom: 12px !important;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-mb-small {
    margin-bottom: 30px !important;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-mb-medium {
    margin-bottom: 50px !important;
  }
}

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

@media screen and (max-width: 599.999px) {
  .is-mb-large {
    margin-bottom: 70px !important;
  }
}

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

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

@media screen and (min-width: 1000.001px) {
  .is-mt0--lg {
    margin-top: 0 !important;
  }
  .is-mb0--lg {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767.999px) {
  .is-mt0--md {
    margin-top: 0 !important;
  }
  .is-mb0--md {
    margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 599.999px) {
  .is-mt0--sm {
    margin-top: 0 !important;
  }
  .is-mb0--sm {
    margin-bottom: 0 !important;
  }
}

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

@media screen and (max-width: 599.999px) {
  .sg-html {
    margin-top: 0;
  }
}

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

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

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

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

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

.sg-heading2 {
  color: #5B5B5B;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 5px;
  margin-bottom: 30px;
  border-bottom: 1px solid #5B5B5B;
}

@media screen and (max-width: 599.999px) {
  .sg-heading2 {
    margin-bottom: 30px;
  }
}

.sg-heading3 {
  color: #5B5B5B;
  font-size: 16px;
  padding-left: 1em;
  position: relative;
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .sg-heading3 {
    margin-bottom: 30px;
  }
}

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

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

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

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

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

.sg-footer {
  background: #1D2A76;
}

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

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

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

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

.sg-widget a {
  text-decoration: none;
  color: #757575;
}

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

.sg-widget__title {
  color: #000000;
  font-size: 18px;
  border-bottom: 1px solid #DEDEDE;
  margin-bottom: 5px;
  padding-bottom: 2px;
}

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

.sg-widget-head {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 800;
  background-color: #fff;
}

.sg-widget-head ul {
  border-bottom: 1px solid #ddd;
}

.sg-widget-list {
  padding-left: .3em;
  font-size: 16px;
}

.sg-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
  margin-top: 60px;
  margin-bottom: 60px;
}

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

@media screen and (max-width: 599.999px) {
  .sg-container {
    width: auto;
    margin-bottom: 20px;
  }
}

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

@media screen and (max-width: 767.999px) {
  .sg-content-block {
    width: 100%;
  }
}

@media screen and (max-width: 599.999px) {
  .sg-content-block {
    width: 100%;
  }
}

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

@media screen and (max-width: 599.999px) {
  .sg-primary-block {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

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

@media screen and (max-width: 599.999px) {
  .sg-secondary-block {
    position: static;
    top: auto;
    float: none;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
  }
}

/*.sg-heading2 {
  font-size: 26px;
  font-weight: 700;

  color: $primary-color;
}*/
.sg-heading3 {
  font-size: 16px;
  margin: 1.5em 0 1em;
  font-weight: bold;
}

.sg-text {
  font-size: 14px;
  margin: 1.5em 0 1em;
  color: #aab2bd;
}

.sg-main-contents {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 16px;
  padding-left: 16px;
}

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

@media screen and (max-width: 767.999px) {
  .sg-main-contents {
    padding-right: 16px;
    padding-left: 16px;
  }
}

@media screen and (max-width: 599.999px) {
  .sg-main-contents {
    padding-right: 16px;
    padding-left: 16px;
  }
}

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

@media screen and (max-width: 599.999px) {
  div.codeBlock {
    display: none;
  }
}

.codeExample div.codeBlock {
  margin-bottom: 0;
}

.codeExample + .styleguide,
.codeExample + .sg-text {
  margin-top: 60px;
}

.docSwatch {
  min-height: 218.21px;
  margin-bottom: 5px;
  padding: 10px 0 0 10px;
  border: 1px solid #ccc;
  font-size: 12px;
}

.codeExample .line > div:after {
  display: block;
  min-height: 40px;
  border-radius: 3px;
  background-color: #eee;
  font-size: 12px;
  line-height: 40px;
  text-align: center;
  content: attr(class);
}

.sg-colors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 2em;
  list-style: none;
}

.sg-colors li {
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  min-width: 5em;
  max-width: 14em;
  margin: 0 .5em .5em 0;
  -webkit-box-shadow: 0.5px 0.9px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0.5px 0.9px 4px rgba(0, 0, 0, 0.1);
  padding-bottom: 5px;
  border-radius: 3px;
}

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

.sg-swatch {
  display: block;
  height: 4em;
  margin-bottom: 5px;
  border-radius: 3px 3px 0 0;
  border-bottom: solid 1px whitesmoke;
}

.sg-label,
.sg-label-sub {
  font-size: 10px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
}

.sg-label {
  font-size: 12px;
  font-weight: bold;
}

/* @  Pages
 * ------------------------------------------------------------ */
.top {
  min-width: inherit;
}

.top #load_ani {
  -webkit-transform-origin: center top;
          transform-origin: center top;
  -webkit-animation: show 1s both;
          animation: show 1s both;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 0;
  -webkit-animation-name: show;
          animation-name: show;
  -webkit-transform: scale(1);
          transform: scale(1);
  top: 0;
  pointer-events: none;
}

.top #load_ani .ico {
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-animation-name: slideup,fadeOut;
          animation-name: slideup,fadeOut;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  -webkit-animation: slideup 2s,fadeOut 3s 3s forwards;
          animation: slideup 2s,fadeOut 3s 3s forwards;
}

@-webkit-keyframes slideup {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, 50%) scale(1);
            transform: translate(-50%, 50%) scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-50%, -50%) scale(1);
            transform: translateY(-50%, -50%) scale(1);
  }
}

@keyframes slideup {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, 50%) scale(1);
            transform: translate(-50%, 50%) scale(1);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-50%, -50%) scale(1);
            transform: translateY(-50%, -50%) scale(1);
  }
}

@-webkit-keyframes fadeOut {
  from {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(20);
            transform: translate(-50%, -50%) scale(20);
  }
}

@keyframes fadeOut {
  from {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(20);
            transform: translate(-50%, -50%) scale(20);
  }
}

@-webkit-keyframes show {
  0% {
    opacity: 1;
    z-index: 1000;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@keyframes show {
  0% {
    opacity: 1;
    z-index: 1000;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

.top .scrt-cover {
  overflow-x: hidden;
  position: relative;
  display: block;
}

.top .scrt-cover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: 1;
  background-color: #0E8E56;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.top .scrt-cover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-color: #ffffff;
  z-index: 2;
  -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.top .scrt-cover.visible::before, .top .scrt-cover.visible::after {
  right: -100%;
}

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

.top .l-container {
  max-width: 1120px;
}

.top h2,
.top h3 {
  font-family: "Futura", sans-serif;
  font-size: 50px;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 1px;
  line-height: 1.1;
  font-weight: bold;
}

@media screen and (max-width: 599.999px) {
  .top h2,
  .top h3 {
    font-size: calc(25 / 375 * 100vw);
    margin-bottom: 20px;
  }
}

.top h2 span,
.top h3 span {
  font-size: 20px;
  display: block;
  padding-top: 15px;
  font-weight: normal;
}

@media screen and (max-width: 599.999px) {
  .top h2 span,
  .top h3 span {
    font-size: calc(12 / 375 * 100vw);
  }
}

.top h2 {
  color: #1A93D2;
  line-height: 40px;
}

@media screen and (max-width: 599.999px) {
  .top h2 {
    line-height: 22px;
  }
}

.top h2 span {
  color: #000000;
}

.top h3 {
  font-size: 38px;
}

@media screen and (max-width: 599.999px) {
  .top h3 {
    font-size: calc(19 / 375 * 100vw);
  }
}

.top .inview-wrap,
.top .inview-wrap-s {
  overflow: hidden;
  display: inline-block !important;
  position: relative;
  padding-top: 0 !important;
}

.top .inview-wrap::after,
.top .inview-wrap-s::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1A93D2;
  -webkit-transform: translateX(-101%);
  transform: translateX(-101%);
  -webkit-transition: -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.top .inview-wrap.visible::after,
.top .inview-wrap-s.visible::after {
  -webkit-transform: translateX(102%);
  transform: translateX(102%);
}

.top .inview-wrap-s {
  line-height: 20px;
}

@media screen and (max-width: 599.999px) {
  .top .inview-wrap-s {
    margin-top: 5px;
  }
}

.top .inview-text,
.top .inview-text-s {
  display: inline-block;
  opacity: 0;
  -webkit-transition: opacity 0s linear 0.5s;
  transition: opacity 0s linear 0.5s;
}

.top .visible .inview-text {
  opacity: 1;
  font-size: 50px;
  padding-top: 0;
  font-weight: bold;
  color: #1A93D2;
}

@media screen and (max-width: 599.999px) {
  .top .visible .inview-text {
    font-size: calc(25 / 375 * 100vw);
  }
}

.top .visible .inview-text-s {
  opacity: 1;
  font-size: 20px;
  padding-top: 0 !important;
  font-weight: normal;
  color: #000000;
  line-height: 20px;
}

@media screen and (max-width: 599.999px) {
  .top .visible .inview-text-s {
    font-size: calc(12 / 375 * 100vw);
  }
}

.top-pickup {
  padding: 30px 0;
}

@media screen and (max-width: 599.999px) {
  .top-pickup {
    padding: 20px 0;
  }
}

.top-pickup dl {
  display: table;
  width: 100%;
}

.top-pickup dl dt {
  display: table-cell;
  width: 160px;
  text-align: center;
  color: #ffffff;
  background: #0E8E56;
  font-size: 18px;
  line-height: 1;
  padding: 18px 0 35px 11px;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .top-pickup dl dt {
    width: calc(100 / 375 * 100vw);
    max-width: 100px;
    font-size: calc(14 / 375 * 100vw);
    padding: 8px 0 8px 8px;
  }
}

.top-pickup dl dt span::after {
  content: "";
  display: inline-block;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
  margin-left: 5px;
  margin-top: -2px;
}

@media screen and (max-width: 599.999px) {
  .top-pickup dl dt span::after {
    width: 4px;
    height: 4px;
  }
}

.top-pickup dl dt a {
  display: block;
  font-size: 12px;
  color: #ffffff;
  position: absolute;
  bottom: 10px;
  width: 100%;
  left: 0;
}

@media screen and (max-width: 599.999px) {
  .top-pickup dl dt a {
    font-size: calc(12 / 375 * 100vw);
  }
}

.top-pickup dl dd {
  display: table-cell;
  font-size: 16px;
  padding-left: 20px;
  vertical-align: middle;
}

@media screen and (max-width: 599.999px) {
  .top-pickup dl dd {
    font-size: calc(14 / 375 * 100vw);
  }
}

.top-pickup dl dd ul li {
  padding: 8px 0;
  line-height: 1.5;
}

.top-pickup dl dd ul li a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.top-pickup dl dd ul li a:hover {
  opacity: 0.5;
}

.top-slide {
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .top-slide {
    margin-bottom: 20px;
  }
}

.top-slide ._slide ._ph img {
  padding: 0 20px;
  width: 100%;
}

.top-slide ._slide .slick-prev {
  left: 30px;
  z-index: 100;
}

.top-slide ._slide .slick-prev::before {
  content: "";
  display: inline-block;
  left: 0;
  width: 20px;
  height: 20px;
  border-bottom: 4px solid #000000;
  border-left: 4px solid #000000;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
}

.top-slide ._slide .slick-next {
  right: 30px;
}

.top-slide ._slide .slick-next::before {
  content: "";
  display: inline-block;
  right: 0;
  width: 20px;
  height: 20px;
  border-top: 4px solid #000000;
  border-right: 4px solid #000000;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
}

.top-topics {
  padding: 85px 0 120px;
}

@media screen and (max-width: 599.999px) {
  .top-topics {
    padding: calc(40 / 375 * 100vw) 0 calc(60 / 375 * 100vw);
  }
}

.top-topics ._list {
  -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: 0 -1.54%;
}

@media screen and (max-width: 599.999px) {
  .top-topics ._list {
    margin: 0 -3.33%;
  }
}

.top-topics ._list .__item {
  width: 30.25%;
  position: relative;
  margin: 0 1.54% 40px;
}

@media screen and (max-width: 599.999px) {
  .top-topics ._list .__item {
    width: 43%;
    margin: 0 3.33% 20px;
  }
}

.top-topics ._list .__item a {
  text-decoration: none;
  color: #000000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
}

.top-topics ._list .__item a img {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.top-topics ._list .__item a:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.top-topics ._list .__item ._ph {
  margin-bottom: 20px;
  overflow: hidden;
}

.top-topics ._list .__item p {
  font-size: 16px;
}

@media screen and (max-width: 599.999px) {
  .top-topics ._list .__item p {
    font-size: calc(13 / 375 * 100vw);
  }
}

.top-topics ._list .__item p.sttl {
  margin-bottom: 15px;
}

.top-topics ._list .__item p.sttl span {
  width: 105px;
  height: 30px;
  padding: 2px 0 0;
  color: #ffffff;
  background: #23C2C3;
  text-align: center;
  display: inline-block;
  /*margin-left: 35px;*/
}

@media screen and (max-width: 599.999px) {
  .top-topics ._list .__item p.sttl span {
    width: calc(75 / 375 * 100vw);
    height: auto;
    margin-left: calc(10 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
}

.top-topics ._list .__item.hotel p span {
  background: #18943B;
}

.top-topics ._list .__item.hakatamichi p span {
  background: #3FB1DB;
}

.top-topics ._list .__item.theater p span {
  background: #0CBE7E;
}

.top-topics ._list .__item.mice p span {
  background: #64CE4E;
}

.top-topics .b-btn {
  text-align: center;
}

.top-topics .b-btn a {
  color: #1A93D2 !important;
  text-align: center;
  font-size: 16px;
  border: 2px solid #1A93D2;
  padding: 10px 30px 5px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  min-width: 230px;
}

@media screen and (max-width: 599.999px) {
  .top-topics .b-btn a {
    font-size: calc(14 / 375 * 100vw);
    padding: 9px 25px 6px;
    min-width: inherit;
  }
}

.top-topics .b-btn a::before {
  content: "";
  position: absolute;
  display: block;
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #1A93D2;
  border-right: 2px solid #1A93D2;
  top: 50%;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.top-topics .b-btn a:hover {
  opacity: 0.7;
}

.top-topics .b-btn a:hover::before {
  right: 10px;
}

.top-shopsearch {
  background: #D7E2C1;
  padding: 85px 0 100px;
  overflow: hidden;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch {
    padding: calc(40 / 375 * 100vw) 0;
  }
}

.top-shopsearch h2 {
  margin-bottom: 75px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch h2 {
    margin-bottom: calc(30 / 375 * 100vw);
  }
}

.top-shopsearch ._floor {
  margin-bottom: 90px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._floor {
    margin-bottom: calc(45 / 375 * 100vw);
  }
}

.top-shopsearch ._floor ul {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -6%;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch ._floor ul {
    margin: 0 -5%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._floor ul {
    margin: 0 -3.3%;
  }
}

.top-shopsearch ._floor ul li {
  width: 100%;
  max-width: 400px;
  margin: 0 6%;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch ._floor ul li {
    max-width: 40%;
    margin: 0 5%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._floor ul li {
    width: 43%;
    margin: 0 3.3%;
    max-width: inherit;
  }
}

.top-shopsearch ._floor ul li a {
  background: #0E8E56;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 14px 0 10px;
  font-size: 24px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._floor ul li a {
    padding: 10px 0 8px;
    font-size: calc(18 / 375 * 100vw);
  }
}

.top-shopsearch ._floor ul li a:hover {
  opacity: 0.5;
}

.top-shopsearch .c-tab {
  position: relative;
  background: none;
  padding: 0;
  border: none;
  margin-bottom: 90px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab {
    margin: 0;
    padding: 0;
    margin-bottom: calc(45 / 375 * 100vw);
  }
}

.top-shopsearch .c-tab .nav_floor {
  position: absolute;
  width: 100%;
  padding-top: 61%;
  display: block;
  left: 0;
  top: 0;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .c-tab .nav_floor {
    padding-top: calc(620 / 1000 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab .nav_floor {
    padding-top: 65%;
  }
}

.top-shopsearch .c-tab__nav {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -6%;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .c-tab__nav {
    margin: 0 -5%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__nav {
    margin: 0 -3.3%;
  }
}

.top-shopsearch .c-tab__nav li {
  width: 100%;
  margin: 0 8.5%;
  border: none;
  outline: none;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .c-tab__nav li {
    margin: 0 5%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__nav li {
    width: 43%;
    margin: 0 3.3%;
    max-width: inherit;
  }
}

.top-shopsearch .c-tab__nav li button {
  background: #0E8E56;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 14px 0 10px;
  font-size: 24px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 100%;
  padding: 24px 0 20px;
  outline: none;
  border: none;
}

.top-shopsearch .c-tab__nav li button:hover {
  opacity: 0.5;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__nav li button {
    padding: 18px 0 16px;
    font-size: calc(18 / 375 * 100vw);
  }
}

.top-shopsearch .c-tab__body {
  padding: 0;
  border: none;
  margin: 30px 0;
  text-align: center;
}

.top-shopsearch .c-tab__body ._map {
  margin-bottom: 170px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__body ._map {
    margin-bottom: calc(100 / 375 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__body ._list {
    display: block;
  }
}

.top-shopsearch .c-tab__body ._list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  padding: 0 5%;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__body ._list ul {
    width: auto;
    padding: 0;
    display: block;
    margin: 0;
  }
}

.top-shopsearch .c-tab__body ._list ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 29%;
          flex: 0 0 29%;
  margin-bottom: 0;
  text-indent: -25px;
  margin-left: 25px;
  padding-right: 10px;
  font-size: 12px;
  line-height: 2.5;
}

.top-shopsearch .c-tab__body ._list ul li:nth-child(3n) {
  margin-right: 0;
  padding-right: 0;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .c-tab__body ._list ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 45%;
            flex: 0 0 45%;
  }
  .top-shopsearch .c-tab__body ._list ul li:nth-child(3n) {
    margin-left: 25px;
    padding-right: 10px;
    margin-right: 0.95%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__body ._list ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    padding: 0;
    width: 100%;
  }
}

.top-shopsearch .c-tab__body ._list ul li span {
  position: relative;
  margin-right: 6px;
  text-align: center;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: #0E8E56;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  vertical-align: middle;
  padding: 1px 0;
  line-height: 1.6;
  text-indent: 0;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .c-tab__body ._list ul li span {
    padding: 1px 0 0;
  }
}

.top-shopsearch .c-tab__body ._list ul li a {
  font-size: 12px;
}

.top-shopsearch .c-tab__body ._list ul li a:hover {
  opacity: 0.5;
}

.top-shopsearch ._category {
  max-width: 900px;
  margin: 0 auto;
}

.top-shopsearch ._category ul li {
  width: 100%;
}

.top-shopsearch ._category ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px 45px;
  color: #ffffff;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._category ul li a {
    display: block;
    text-align: center;
  }
}

.top-shopsearch ._category ul li a::before {
  content: "";
  position: absolute;
  display: block;
  right: 25px;
  width: 12px;
  height: 12px;
  border: none;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  top: 50%;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.top-shopsearch ._category ul li .icon {
  width: 8%;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._category ul li .icon {
    width: 100%;
    margin-bottom: 12px;
  }
}

.top-shopsearch ._category ul li h3 {
  font-family: dnp-shuei-gothic-kin-std, Meiryo, メイリオ, helvetica, arial, sans-serif;
  margin: 0;
  font-size: 18px;
  text-align: left;
  width: 23.5%;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ._category ul li h3 {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
    font-size: calc(16 / 375 * 100vw);
  }
}

.top-shopsearch ._category ul li.hakatamichi a {
  background: #3FB1DB;
}

.top-shopsearch ._category ul li.food a {
  background: #23C2C3;
}

.top-shopsearch ._category ul li.theater a {
  background: #0CBE7E;
}

.top-shopsearch ._category ul li.mice a {
  background: #64CE4E;
}

.top-shopsearch ._category ul li.hotel a {
  background: #18943B;
}

.top-shopsearch h4 {
  font-size: 24px;
  text-align: center;
  display: block;
  padding-bottom: 10px;
  position: relative;
  margin-bottom: 45px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch h4 {
    font-size: calc(15 / 375 * 100vw);
    margin-bottom: calc(25 / 375 * 100vw);
  }
}

.top-shopsearch h4::before {
  content: "";
  position: absolute;
  width: 53.57%;
  height: 1px;
  left: 0;
  bottom: -7px;
}

.top-shopsearch h4::after {
  content: "";
  position: absolute;
  width: 45.53%;
  height: 1px;
  right: 0;
  bottom: -7px;
}

.top-shopsearch h4 span {
  margin-right: 10px;
  display: inline-block;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch h4 span {
    width: 55px;
  }
}

.top-shopsearch h4 span img {
  margin-top: -10px;
  max-height: 57px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch h4 span img {
    max-height: 40px;
  }
}

.top-shopsearch h4.hakatamichi {
  color: #3FB1DB;
  border-bottom: 1px solid #3FB1DB;
}

.top-shopsearch h4.hakatamichi::before, .top-shopsearch h4.hakatamichi::after {
  content: "";
  background: #3FB1DB;
}

.top-shopsearch h4.food {
  color: #23C2C3;
  border-bottom: 1px solid #23C2C3;
}

.top-shopsearch h4.food::before, .top-shopsearch h4.food::after {
  content: "";
  background: #23C2C3;
}

.top-shopsearch h4.theater {
  color: #0CBE7E;
  border-bottom: 1px solid #0CBE7E;
}

.top-shopsearch h4.theater::before, .top-shopsearch h4.theater::after {
  content: "";
  background: #0CBE7E;
}

.top-shopsearch h4.mice {
  color: #64CE4E;
  border-bottom: 1px solid #64CE4E;
}

.top-shopsearch h4.mice::before, .top-shopsearch h4.mice::after {
  content: "";
  background: #64CE4E;
}

.top-shopsearch h4.hotel {
  color: #18943B;
  border-bottom: 1px solid #18943B;
}

.top-shopsearch h4.hotel::before, .top-shopsearch h4.hotel::after {
  content: "";
  background: #18943B;
}

.top-shopsearch ul {
  -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: 0 -0.95% 35px;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ul {
    margin: 0 -3.3% 25px;
  }
}

.top-shopsearch ul li {
  width: 23.1%;
  margin: 0 0.95% 20px;
  text-align: left;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ul li {
    width: 43%;
    margin: 0 3.3% 15px;
  }
}

.top-shopsearch ul li a {
  font-size: 16px;
  text-decoration: none;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch ul li a {
    font-size: calc(14 / 375 * 100vw);
  }
}

.top-shopsearch ul li a:hover {
  opacity: 0.5;
}

.top-shopsearch .col3 {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 80px -35px 0;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 {
    margin: 80px -5% 0;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 {
    margin: 40px -5% 0;
  }
}

.top-shopsearch .col3 h4 {
  margin: 0 40px 20px;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 h4 {
    margin: 0 20px 20px;
  }
  .top-shopsearch .col3 h4 img {
    max-height: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 h4 {
    margin: 0 0 20px;
  }
  .top-shopsearch .col3 h4 span {
    width: 35px;
  }
}

.top-shopsearch .col3 h4::before {
  content: "";
  width: 51.57%;
}

.top-shopsearch .col3 h4::after {
  content: "";
  width: 43.53%;
}

.top-shopsearch .col3 .__item {
  width: 22.14%;
  margin: 0 35px;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 .__item {
    margin: 0 5%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 .__item {
    width: 40%;
    margin: 0 5% calc(60 / 375 * 100vw);
  }
  .top-shopsearch .col3 .__item:last-child {
    margin-bottom: 0;
  }
}

.top-shopsearch .col3 .__item .txt {
  text-align: center;
  border-radius: 50%;
  width: 248px;
  height: auto;
  vertical-align: middle;
  display: table-cell;
  padding-top: 0;
  font-size: 16px;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 .__item .txt {
    font-size: 14px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 .__item .txt {
    font-size: calc(10 / 375 * 100vw);
    padding: 0 10%;
    width: inherit;
  }
}

.top-shopsearch .col3 .__item .txt::before {
  content: "";
  background: #FFFFFF;
  width: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  border-radius: 50%;
  padding-top: 100%;
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 .__item .txt::before {
    width: calc(150 / 375 * 100vw);
    height: calc(150 / 375 * 100vw);
    padding-top: 0;
  }
}

.top-shopsearch .col3 .__item .txt > * {
  position: relative;
}

.top-shopsearch .col3 .__item .txt p {
  margin-top: 75px;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 .__item .txt p {
    margin-top: 55px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 .__item .txt p {
    margin-top: 55px;
  }
}

.top-shopsearch .col3 .__item .txt .btn {
  margin-top: 50px;
}

@media screen and (max-width: 1000px) {
  .top-shopsearch .col3 .__item .txt .btn {
    margin-top: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-shopsearch .col3 .__item .txt .btn {
    margin-top: 25px;
  }
}

.top-shopsearch .col3 .__item .txt .btn a {
  text-decoration: none;
  color: #000000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.top-shopsearch .col3 .__item .txt .btn a:hover {
  opacity: 0.5;
}

.top-shopsearch .col3 .__item .txt .btn a::after {
  content: ">";
  display: inline-block;
  margin-left: 5px;
}

.top-news {
  padding: 110px 0 90px;
}

@media screen and (max-width: 599.999px) {
  .top-news {
    padding: 60px 0 45px;
  }
}

.top-news .l-container {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container {
    display: block;
  }
}

.top-news .l-container h2 {
  text-align: left;
}

@media screen and (max-width: 1000px) {
  .top-news .l-container h2 {
    font-size: 36px;
    margin-bottom: 15px;
  }
  .top-news .l-container h2 span {
    font-size: 17px;
    padding-top: 10px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container h2 {
    text-align: center;
  }
}

.top-news .l-container ._list {
  margin-left: 60px;
  width: 79.46%;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container ._list {
    margin-left: 0;
    width: 100%;
  }
}

.top-news .l-container ._list dl {
  display: table;
  margin-bottom: 40px;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container ._list dl {
    display: block;
    margin-bottom: 30px;
  }
}

.top-news .l-container ._list dl:last-child {
  margin-bottom: 0;
}

.top-news .l-container ._list dl dt {
  display: table-cell;
  font-size: 16px;
  white-space: nowrap;
  vertical-align: top;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container ._list dl dt {
    display: block;
    font-size: calc(14 / 375 * 100vw);
    margin-bottom: 10px;
  }
}

.top-news .l-container ._list dl dt span {
  width: 105px;
  height: 30px;
  padding: 2px 0 0;
  color: #ffffff;
  background: #0E8E56;
  text-align: center;
  display: inline-block;
  margin-left: 35px;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container ._list dl dt span {
    width: calc(80 / 375 * 100vw);
    height: auto;
    margin-left: calc(10 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
}

.top-news .l-container ._list dl.press span {
  background: #23C2C3;
}

.top-news .l-container ._list dl dd {
  display: table-cell;
  font-size: 16px;
  padding-left: 30px;
}

@media screen and (max-width: 599.999px) {
  .top-news .l-container ._list dl dd {
    display: block;
    padding-left: 0;
    font-size: calc(14 / 375 * 100vw);
  }
}

.top-news .l-container ._list dl dd a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  color: #000000;
}

.top-news .l-container ._list dl dd a:hover {
  opacity: 0.5;
}

.top-area {
  padding: 0 0 130px;
}

@media screen and (max-width: 599.999px) {
  .top-area {
    padding: 0 0 60px;
  }
}

.top-area h2 {
  text-align: left;
}

@media screen and (max-width: 1000px) {
  .top-area h2 {
    font-size: 36px;
    margin-bottom: 15px;
  }
  .top-area h2 span {
    font-size: 17px;
    padding-top: 10px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-area h2 {
    text-align: center;
  }
}

.top-area ._list {
  -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: 0 -2.5px;
}

@media screen and (max-width: 599.999px) {
  .top-area ._list {
    margin: 0 -3.3%;
  }
}

.top-area ._list .__item {
  width: 32.4%;
  position: relative;
  margin: 0 2.5px 5px;
}

@media screen and (max-width: 599.999px) {
  .top-area ._list .__item {
    width: 43%;
    margin: 0 3.3% 20px;
  }
  .top-area ._list .__item:first-child {
    width: 100%;
    margin-bottom: 30px;
  }
}

.top-info {
  background: #D7E2C1;
  padding: 95px 0 120px;
  overflow: hidden;
}

@media screen and (max-width: 599.999px) {
  .top-info {
    padding: 45px 0 60px;
  }
}

.top-info ._list ul {
  -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: 0 -1.56%;
}

@media screen and (max-width: 599.999px) {
  .top-info ._list ul {
    margin: 0;
    display: block;
  }
}

.top-info ._list ul li {
  width: 30.2%;
  position: relative;
  margin: 0 1.56% 35px;
}

@media screen and (max-width: 1000px) {
  .top-info ._list ul li {
    width: 46.8%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-info ._list ul li {
    width: 100%;
    margin: 0 0 10px;
  }
}

.top-info ._list ul li span {
  display: table-cell;
  font-size: 19px;
  line-height: 1.6;
  vertical-align: middle;
}

@media screen and (max-width: 599.999px) {
  .top-info ._list ul li span {
    font-size: calc(15 / 375 * 100vw);
    padding-left: 20px;
  }
}

.top-info ._list ul li span:first-child {
  width: 95px;
  text-align: center;
}

@media screen and (max-width: 599.999px) {
  .top-info ._list ul li span:first-child {
    width: 40px;
    padding-left: 0;
  }
  .top-info ._list ul li span:first-child img {
    height: 35px;
  }
}

.top-info ._list ul li a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: table;
  color: #ffffff;
  background: #0E8E56;
  padding: 0 30px 0 20px;
  width: 100%;
  height: 110px;
}

@media screen and (max-width: 599.999px) {
  .top-info ._list ul li a {
    padding: 20px;
    height: auto;
  }
}

.top-info ._list ul li a:hover {
  opacity: 0.5;
}

.top-access {
  -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;
}

@media screen and (max-width: 1000px) {
  .top-access {
    display: block;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access {
    display: block;
  }
}

.top-access ._map {
  width: 55.7%;
}

@media screen and (max-width: 1000px) {
  .top-access ._map {
    width: 100%;
    line-height: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._map {
    width: 100%;
    line-height: 0;
  }
}

.top-access ._map iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1000px) {
  .top-access ._map iframe {
    height: 300px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._map iframe {
    height: 300px;
  }
}

.top-access ._txt {
  width: 44.3%;
  background: #1A93D2;
  padding: 55px calc(45 / 1000 * 100vw);
  color: #ffffff;
  font-size: 16px;
}

@media screen and (max-width: 1000px) {
  .top-access ._txt {
    width: 100%;
    padding: 40px 3.3%;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt {
    width: 100%;
    padding: 40px 3.3%;
    font-size: calc(12 / 375 * 100vw);
  }
}

.top-access ._txt .address {
  margin-bottom: 35px;
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt .address {
    margin-bottom: 25px;
  }
}

.top-access ._txt .address span {
  border: 1px solid #ffffff;
  border-radius: 10px;
  width: 75px;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  padding: 2px 0 0;
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt .address span {
    padding: 3px 0 1px;
    font-size: calc(12 / 375 * 100vw);
    width: 55px;
    margin: 0 19px 0 6px;
    border-radius: 8px;
  }
}

.top-access ._txt .ttl {
  font-size: 20px;
  margin-bottom: 5px;
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt .ttl {
    font-size: calc(16 / 375 * 100vw);
  }
}

.top-access ._txt dl {
  display: table;
  width: 100%;
  max-width: 400px;
  margin-bottom: 35px;
}

@media screen and (max-width: 1000px) {
  .top-access ._txt dl {
    max-width: inherit;
  }
  .top-access ._txt dl:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt dl {
    max-width: inherit;
  }
  .top-access ._txt dl:last-child {
    margin-bottom: 0;
  }
}

.top-access ._txt dl dt {
  display: table-cell;
  width: 65px;
  text-align: center;
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt dl dt img {
    width: 24px;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt dl + dl dt img {
    width: 45px;
  }
}

.top-access ._txt dl dd {
  display: table-cell;
  padding-left: 15px;
  vertical-align: bottom;
  position: relative;
}

@media screen and (max-width: 1000px) {
  .top-access ._txt dl dd {
    vertical-align: middle;
  }
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt dl dd {
    vertical-align: bottom;
  }
}

.top-access ._txt dl dd .btn {
  position: relative;
  margin-top: 5px;
}

.top-access ._txt dl dd .btn a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 6px 0 4px;
  font-size: 13px;
  position: absolute;
  right: 0;
  width: 147px;
  text-align: center;
}

@media screen and (max-width: 599.999px) {
  .top-access ._txt dl dd .btn a {
    position: relative;
    margin: 10px auto 0;
  }
}

.top-access ._txt dl dd .btn a:hover {
  opacity: 0.5;
}

.top-access ._txt dl dd .btn a::after {
  content: "";
  display: inline-block;
  right: 0;
  width: 7px;
  height: 7px;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
  margin-top: -5px;
  margin-left: 5px;
}

[class*="c-page-sub_"] {
  min-width: inherit;
}

[class*="c-page-sub_"] .l-header ._sp {
  border-bottom: 1px solid #D7E2C1;
}

[class*="c-page-sub_"] figcaption {
  font-size: 12px;
  margin-top: 2px;
  color: #666;
}

[class*="c-page-sub_"] .c-breadcrumb {
  margin-bottom: 0;
  border-bottom: 1px solid #D7E2C1;
}

[class*="c-page-sub_"] .c-breadcrumb__inner {
  max-width: 1120px;
}

[class*="c-page-sub_"] .c-breadcrumb__inner li span::before {
  margin-right: 5px;
  margin-left: 5px;
}

[class*="c-page-sub_"] .c-breadcrumb__inner li a {
  color: #000000;
}

[class*="c-page-sub_"] .c-pagenavi {
  margin: 50px 0 0;
}

[class*="c-page-sub_"] .c-pagenavi .cur,
[class*="c-page-sub_"] .c-pagenavi .is-current,
[class*="c-page-sub_"] .c-pagenavi a:hover {
  background-color: #0E8E56;
}

[class*="c-page-sub_"] .c-pagenavi .cur,
[class*="c-page-sub_"] .c-pagenavi .is-current,
[class*="c-page-sub_"] .c-pagenavi a {
  padding: 1px 0 0;
  font-size: 14px;
}

[class*="c-page-sub_"] .c-pagenavi .c-previouspostslink,
[class*="c-page-sub_"] .c-pagenavi .c-nextpostslink {
  border: none !important;
  background-color: inherit;
}

[class*="c-page-sub_"] .c-pagenavi .c-previouspostslink:hover,
[class*="c-page-sub_"] .c-pagenavi .c-nextpostslink:hover {
  background-color: inherit !important;
  opacity: 0.5;
}

[class*="c-page-sub_"] .c-pagenavi .c-previouspostslink::before,
[class*="c-page-sub_"] .c-pagenavi .c-nextpostslink::before {
  border-color: #0E8E56;
  top: 0;
  width: 8px;
  height: 8px;
}

[class*="c-page-sub_"] .text-center {
  text-align: center !important;
}

[class*="c-page-sub_"] .text-right {
  text-align: right !important;
}

[class*="c-page-sub_"] .text-left {
  text-align: left !important;
}

[class*="c-page-sub_"] .b-btn a {
  color: #1A93D2 !important;
  text-align: center;
  font-size: 16px;
  border: 2px solid #1A93D2;
  padding: 10px 30px 5px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  min-width: 230px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-btn a {
    font-size: calc(14 / 375 * 100vw);
    padding: 9px 25px 6px;
    min-width: inherit;
  }
}

[class*="c-page-sub_"] .b-btn a::before {
  content: "";
  position: absolute;
  display: block;
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #1A93D2;
  border-right: 2px solid #1A93D2;
  top: 50%;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[class*="c-page-sub_"] .b-btn a:hover {
  opacity: 0.7;
}

[class*="c-page-sub_"] .b-btn a:hover::before {
  right: 10px;
}

[class*="c-page-sub_"] .b-asterisk li {
  text-indent: -12px;
  margin-left: 12px;
  font-size: 12px;
}

[class*="c-page-sub_"] .b-asterisk li:first-letter {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, helvetica, arial, sans-serif;
}

[class*="c-page-sub_"] .text-link {
  margin-top: 15px;
}

[class*="c-page-sub_"] .text-link ul li {
  position: relative;
  margin-right: 15px;
  display: block;
}

[class*="c-page-sub_"] .text-link ul li::before {
  content: "";
  left: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 15px;
  height: 10px;
  border: 5px solid transparent;
  border-left-color: transparent;
  border-left-style: solid;
  border-left-width: 5px;
  border-left: 10px solid #0E8E56;
  display: inline-block;
}

[class*="c-page-sub_"] .text-link ul li a {
  color: #000000;
}

[class*="c-page-sub_"] .text-link ul li ul {
  margin-left: 10px;
}

[class*="c-page-sub_"] .text-link ul li ul li {
  width: 32%;
  display: inline-block;
  margin-right: 0;
  font-size: 14px;
  padding-left: 15px;
  vertical-align: top;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .text-link ul li ul li {
    width: auto;
    display: block;
    margin: 5px 0;
  }
}

[class*="c-page-sub_"] .text-link ul li ul li::before {
  content: "";
  position: absolute;
  display: inline-block;
  left: 0;
  width: 8px;
  height: 8px;
  border: none;
  border-top: 2px solid #BABABA;
  border-right: 2px solid #BABABA;
  top: 8px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[class*="c-page-sub_"] .b-list-block {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -0.5%;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-list-block {
    margin: 0;
  }
}

[class*="c-page-sub_"] .b-list-block .list-box {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%;
  border: 1px solid #BABABA;
  margin: 0 0.5% 50px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-list-block .list-box {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    margin: 0 0 30px;
  }
}

[class*="c-page-sub_"] .b-list-block .list-box h3 {
  font-size: 20px;
  text-align: center;
  color: #ffffff;
  background: #0E8E56;
  padding: 20px 0 15px;
  line-height: 1.2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-list-block .list-box h3 {
    font-size: calc(16 / 375 * 100vw);
    padding: 18px 0 15px;
  }
}

[class*="c-page-sub_"] .b-list-block .list-box ul {
  padding: 20px 15px 30px;
}

[class*="c-page-sub_"] .b-list-block .list-box ul li {
  position: relative;
  border-bottom: 1px dotted #BABABA;
  padding-bottom: 5px;
  padding-left: 25px;
  margin-bottom: 5px;
  font-size: 14px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-list-block .list-box ul li {
    font-size: calc(13 / 375 * 100vw);
    padding-left: 20px;
  }
}

[class*="c-page-sub_"] .b-list-block .list-box ul li::before {
  content: "";
  position: absolute;
  display: block;
  left: 0;
  width: 8px;
  height: 8px;
  border: none;
  border-top: 2px solid #23C2C3;
  border-right: 2px solid #23C2C3;
  top: 10px;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .b-list-block .list-box ul li::before {
    width: 6px;
    height: 6px;
    top: 35%;
  }
}

[class*="c-page-sub_"] .b-list-block .list-box ul li a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[class*="c-page-sub_"] .b-list-block .list-box ul li a:hover {
  opacity: 0.5;
}

[class*="c-page-sub_"] table caption {
  text-align: left;
  font-weight: bold;
}

[class*="c-page-sub_"] table th {
  font-weight: normal;
  border: 1px solid #BABABA;
  padding: 10px 10px 5px;
  text-align: center;
}

[class*="c-page-sub_"] table td {
  border: 1px solid #BABABA;
  padding: 10px 10px 5px;
}

[class*="c-page-sub_"] .l-container {
  max-width: 1152px;
  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;
  margin-bottom: 100px;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-container {
    display: block;
    margin-bottom: 50px;
    padding: 0 4.68%;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-container {
    display: block;
    margin-bottom: 50px;
    padding: 0 4.68%;
  }
}

[class*="c-page-sub_"] .inner {
  margin-bottom: 65px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .inner {
    margin-bottom: 30px;
  }
}

[class*="c-page-sub_"] .l-main {
  width: 69.64%;
  max-width: 780px;
  padding-top: 45px;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-main {
    width: 100%;
    max-width: inherit;
    margin-bottom: 70px;
    padding-top: 20px;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-main {
    width: 100%;
    max-width: inherit;
    margin-bottom: 70px;
    padding-top: 20px;
  }
}

[class*="c-page-sub_"] h1 {
  font-size: 40px;
  font-weight: bold;
  position: relative;
  padding-bottom: 23px;
  margin-bottom: 42px;
  line-height: 1.2;
  font-family: "Futura", sans-serif;
  color: #1A93D2;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h1 {
    font-size: calc(35 / 375 * 100vw);
    padding-bottom: 16px;
    margin-bottom: 35px;
  }
}

[class*="c-page-sub_"] h1 span {
  font-size: 18px;
  font-weight: normal;
  font-family: dnp-shuei-gothic-kin-std, Meiryo, メイリオ, helvetica, arial, sans-serif;
  display: block;
  margin-top: 5px;
  color: #000000;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h1 span {
    font-size: calc(16 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] h1::before {
  content: "";
  position: absolute;
  width: 45px;
  height: 3px;
  left: 0;
  bottom: 0;
  background: #1A93D2;
}

[class*="c-page-sub_"] h2.ttl-h2 {
  background: #F5F5F5;
  font-size: 24px;
  padding: 10px 15px 5px;
  border-bottom: 3px solid #0E8E56;
  margin-bottom: 25px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h2.ttl-h2 {
    font-size: calc(20 / 375 * 100vw);
    margin-bottom: 15px;
  }
}

[class*="c-page-sub_"] h2.ttl-h2 span {
  margin-right: 15px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h2.ttl-h2 span {
    margin-right: 0;
    display: block;
  }
}

[class*="c-page-sub_"] h2.ttl-h2_2 {
  border-bottom: 1px solid #BABABA;
  font-size: 24px;
  margin-bottom: 25px;
  padding: 0 10px 5px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h2.ttl-h2_2 {
    font-size: calc(20 / 375 * 100vw);
    margin-bottom: 15px;
  }
}

[class*="c-page-sub_"] h3.ttl-h3 {
  font-size: 20px;
  position: relative;
  padding-left: 23px;
  margin-bottom: 10px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h3.ttl-h3 {
    font-size: calc(16 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] h3.ttl-h3::before {
  content: "";
  display: block;
  position: absolute;
  width: 15px;
  height: 3px;
  background: #000000;
  left: 0;
  top: 14px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h3.ttl-h3::before {
    top: 11px;
  }
}

[class*="c-page-sub_"] h3.ttl-h3_2 {
  font-size: 18px;
  font-weight: bold;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] h3.ttl-h3_2 {
    font-size: calc(16 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] p.text-large {
  font-size: 22px !important;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] p.text-large {
    font-size: calc(18 / 375 * 100vw) !important;
  }
}

[class*="c-page-sub_"] p.text-middle {
  font-size: 18px !important;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] p.text-middle {
    font-size: calc(16 / 375 * 100vw) !important;
  }
}

[class*="c-page-sub_"] p.text-small {
  font-size: 13px !important;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] p.text-small {
    font-size: calc(11 / 375 * 100vw) !important;
  }
}

[class*="c-page-sub_"] .l-side {
  max-width: 300px;
  width: 26.78%;
  margin-left: 40px;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-side {
    width: 100%;
    max-width: inherit;
    margin-left: 0;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side {
    width: 100%;
    max-width: inherit;
    margin-left: 0;
  }
}

[class*="c-page-sub_"] .l-side h3 {
  font-family: "Futura", sans-serif;
  font-size: 28px;
  text-align: center;
  margin-bottom: 25px;
  letter-spacing: 1px;
  line-height: 1.1;
  font-weight: bold;
  color: #1A93D2;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-side h3 {
    font-size: calc(27 / 1000 * 100vw);
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side h3 {
    font-size: calc(25 / 375 * 100vw);
    margin-bottom: 20px;
  }
}

[class*="c-page-sub_"] .l-side h3 span {
  font-size: 16px;
  display: block;
  padding-top: 7px;
  font-weight: normal;
  color: #000000;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side h3 span {
    font-size: calc(12 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] .l-side h3.category {
  font-size: 20px;
  margin-bottom: 15px;
}

[class*="c-page-sub_"] .l-side h3.category span {
  display: inline-block;
  font-size: 14px;
  margin-left: 10px;
}

[class*="c-page-sub_"] .l-side .shopsearch {
  background: #D7E2C1;
  padding: 50px 0;
  overflow: hidden;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch {
    padding: calc(40 / 375 * 100vw) 0;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch h2 {
  margin-bottom: 75px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch h2 {
    margin-bottom: calc(30 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] .l-side .shopsearch ._floor {
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch ._floor {
    margin-bottom: calc(45 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] .l-side .shopsearch ._floor ul {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

[class*="c-page-sub_"] .l-side .shopsearch ._floor ul li {
  width: 100%;
  max-width: 80px;
  margin: 0 3%;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-side .shopsearch ._floor ul li {
    width: 20%;
    margin: 0 2%;
    max-width: inherit;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch ._floor ul li {
    width: 30%;
    margin: 0 3.3%;
    max-width: inherit;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch ._floor ul li a {
  background: #1A93D2;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 10px 0 6px;
  font-size: 18px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: none;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch ._floor ul li a {
    padding: 10px 0 8px;
    font-size: calc(18 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] .l-side .shopsearch ._floor ul li a:hover {
  opacity: 0.5;
}

[class*="c-page-sub_"] .l-side .shopsearch ._list {
  margin: 0 20px 40px;
  padding: 20px 15px;
  background: #FFFFFF;
}

[class*="c-page-sub_"] .l-side .shopsearch h4 {
  font-size: 20px;
  text-align: center;
  display: block;
  padding-bottom: 10px;
  position: relative;
  margin-bottom: 25px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch h4 {
    font-size: calc(15 / 375 * 100vw);
    margin-bottom: calc(25 / 375 * 100vw);
  }
}

[class*="c-page-sub_"] .l-side .shopsearch h4::before {
  content: "";
  position: absolute;
  width: 53.57%;
  height: 1px;
  left: 0;
  bottom: -7px;
}

[class*="c-page-sub_"] .l-side .shopsearch h4::after {
  content: "";
  position: absolute;
  width: 45.53%;
  height: 1px;
  right: 0;
  bottom: -7px;
}

[class*="c-page-sub_"] .l-side .shopsearch h4 span {
  margin-right: 10px;
  display: inline-block;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch h4 span {
    width: 55px;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch h4 span img {
  margin-top: -10px;
  max-height: 40px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch h4 span img {
    max-height: 40px;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch h4.hakatamichi {
  color: #3FB1DB;
  border-bottom: 1px solid #3FB1DB;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.hakatamichi::before, [class*="c-page-sub_"] .l-side .shopsearch h4.hakatamichi::after {
  content: "";
  background: #3FB1DB;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.food {
  color: #23C2C3;
  border-bottom: 1px solid #23C2C3;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.food::before, [class*="c-page-sub_"] .l-side .shopsearch h4.food::after {
  content: "";
  background: #23C2C3;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.theater {
  padding: 0;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.theater a {
  color: #ffffff;
  background: #0CBE7E;
  border-bottom: none;
  padding: 11px 0 5px;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.theater::before, [class*="c-page-sub_"] .l-side .shopsearch h4.theater::after {
  display: none;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.mice {
  padding: 0;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.mice a {
  color: #ffffff;
  background: #64CE4E;
  border-bottom: none;
  padding: 11px 0 5px;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.mice::before, [class*="c-page-sub_"] .l-side .shopsearch h4.mice::after {
  display: none;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.hotel {
  padding: 0;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.hotel a {
  color: #ffffff;
  background: #18943B;
  border-bottom: none;
  padding: 11px 0 5px;
}

[class*="c-page-sub_"] .l-side .shopsearch h4.hotel::before, [class*="c-page-sub_"] .l-side .shopsearch h4.hotel::after {
  display: none;
}

[class*="c-page-sub_"] .l-side .shopsearch ._category {
  padding: 0 5%;
}

[class*="c-page-sub_"] .l-side .shopsearch ul {
  margin: 0;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-side .shopsearch ul {
    -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: 0 -2%;
  }
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch ul {
    -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: 0 -2%;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch ul li {
  width: 100%;
  margin: 0 0 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[class*="c-page-sub_"] .l-side .shopsearch ul li:hover {
  opacity: 0.5;
}

[class*="c-page-sub_"] .l-side .shopsearch ul li span {
  margin-right: 10px;
}

[class*="c-page-sub_"] .l-side .shopsearch ul li.hakatamichi {
  background: #3FB1DB;
}

[class*="c-page-sub_"] .l-side .shopsearch ul li.food {
  background: #23C2C3;
}

[class*="c-page-sub_"] .l-side .shopsearch ul li a {
  display: block;
  text-align: center;
  font-size: 20px;
  padding: 28px 0 23px;
  text-decoration: none;
  color: #ffffff;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch ul li a {
    font-size: calc(18 / 375 * 100vw);
    padding: 17px 0 14px;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: none;
  padding: 0;
  margin: 0 -2%;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch .col3 {
    margin: 0 -4%;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 h4 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

@media screen and (max-width: 1000px) {
  [class*="c-page-sub_"] .l-side .shopsearch .col3 h4 img {
    max-height: 30px;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 h4 span {
  margin-right: 0;
  display: block;
  margin-bottom: 6px;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch .col3 h4 span {
    width: auto;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 h4 span img {
  max-height: inherit;
  max-width: 35px;
  height: 30px;
  margin-top: 0;
  margin-bottom: 4px;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 h4::before {
  content: "";
  width: 51.57%;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 h4::after {
  content: "";
  width: 43.53%;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item {
  margin: 0 2%;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 29%;
          flex: 0 0 29%;
  padding: 10px 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item:hover {
  opacity: 0.5;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item.theater {
  background: #0CBE7E;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item.mice {
  background: #64CE4E;
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item.hotel {
  background: #18943B;
}

@media screen and (max-width: 599.999px) {
  [class*="c-page-sub_"] .l-side .shopsearch .col3 .__item:last-child {
    margin-bottom: 0;
  }
}

[class*="c-page-sub_"] .l-side .shopsearch .col3 .__item a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  line-height: 1;
}

[class*="c-page-sub_"] .l-side .access {
  background: #D7E2C1;
  padding: 50px 20px;
  overflow: hidden;
  margin-top: 30px;
}

[class*="c-page-sub_"] .l-side .access ._map iframe {
  width: 100%;
  height: 300px;
}

[class*="c-page-sub_"] .l-side .access .btn {
  margin-top: 5px;
}

[class*="c-page-sub_"] .l-side .access .btn a {
  display: block;
  width: 100%;
  background: #1A93D2;
  color: #ffffff;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-align: center;
  padding: 14px 0;
  border-radius: 10px;
  position: relative;
  font-size: 13px;
}

[class*="c-page-sub_"] .l-side .access .btn a:hover {
  opacity: 0.5;
}

[class*="c-page-sub_"] .l-side .access .btn a::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  vertical-align: middle;
}

.c-page-sub_news ._list dl {
  display: table;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #BABABA;
  width: 100%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news ._list dl {
    display: block;
    margin-bottom: 30px;
  }
}

.c-page-sub_news ._list dl:last-child {
  margin-bottom: 0;
}

.c-page-sub_news ._list dl dt {
  display: table-cell;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: top;
  width: 30%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news ._list dl dt {
    display: block;
    font-size: calc(14 / 375 * 100vw);
    margin-bottom: 10px;
  }
}

.c-page-sub_news ._list dl dt span {
  width: 125px;
  color: #ffffff;
  background: #26A255;
  text-align: center;
  display: inline-block;
  margin-left: 35px;
  padding: 5px 0 3px;
  line-height: 1.4;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news ._list dl dt span {
    width: calc(80 / 375 * 100vw);
    margin-left: calc(10 / 375 * 100vw);
    font-size: calc(12 / 375 * 100vw);
  }
}

.c-page-sub_news ._list dl.press span {
  background: #0E8E56;
}

.c-page-sub_news ._list dl dd {
  display: table-cell;
  font-size: 14px;
  padding-left: 30px;
  line-height: 2;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news ._list dl dd {
    display: block;
    padding-left: 0;
    font-size: calc(13 / 375 * 100vw);
  }
}

.c-page-sub_news ._list dl dd a {
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  color: #000000;
}

.c-page-sub_news ._list dl dd a:hover {
  opacity: 0.5;
}

.c-page-sub_news h2.ttl-h2 span {
  font-size: 15px;
  display: block;
}

.c-page-sub_news p {
  margin: 15px 0;
}

.c-page-sub_news .c-page-sub_news-linklist {
  border: 4px solid #0E8E56;
  padding: 20px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news .c-page-sub_news-linklist {
    display: block;
  }
}

.c-page-sub_news .c-page-sub_news-linklist ._logo {
  max-width: 150px;
  width: 30%;
  margin-right: 30px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news .c-page-sub_news-linklist ._logo {
    width: 100%;
    text-align: center;
    margin: 0 auto 10px;
  }
}

.c-page-sub_news .c-page-sub_news-linklist ._txt {
  width: 80%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_news .c-page-sub_news-linklist ._txt {
    width: 100%;
  }
}

.c-page-sub_news .c-page-sub_news-linklist ._txt h3 {
  font-size: 18px;
  font-weight: bold;
}

.c-page-sub_news .c-page-sub_news-linklist ._txt p {
  font-size: 14px;
  margin: 0;
}

.c-page-sub_news .c-page-sub_news-linklist ._txt .text-link {
  font-size: 14px;
  text-align: right;
}

.c-page-sub_news .c-page-sub_news-linklist ._txt .text-link ul li {
  margin-right: 0;
}

.c-page-sub_floor a {
  text-decoration: none;
}

.c-page-sub_floor .floor-category {
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floor-category [class*="l-col"] {
    width: 100%;
    float: none;
  }
}

.c-page-sub_floor .floor-category p + .b-btn {
  margin-top: 30px;
}

.c-page-sub_floor .btn-floor ul {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 35px;
}

.c-page-sub_floor .btn-floor ul li {
  width: 50%;
  border: 1px solid #DEDEDE;
  border-radius: 10px 10px 0 0;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #1A93D2;
  position: relative;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .btn-floor ul li {
    font-size: calc(16 / 375 * 100vw);
    line-height: 1.4;
  }
}

.c-page-sub_floor .btn-floor ul li span {
  font-size: 14px;
  font-weight: normal;
  margin-left: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .btn-floor ul li span {
    font-size: calc(10 / 375 * 100vw);
    margin-left: 0;
    display: block;
  }
}

.c-page-sub_floor .btn-floor ul li a {
  padding: 12px 0 8px;
  display: block;
  color: #1A93D2;
}

.c-page-sub_floor .btn-floor ul li.active {
  border-bottom: none;
  background: #1A93D2;
}

.c-page-sub_floor .btn-floor ul li.active::before {
  content: "";
  left: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 15px;
  height: 15px;
  border: 7px solid transparent;
  border-top: 13px solid #1A93D2;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  bottom: -20px;
}

.c-page-sub_floor .btn-floor ul li.active a {
  color: #ffffff;
}

.c-page-sub_floor .floorguide-block {
  position: relative;
}

.c-page-sub_floor .floorguide-block a {
  color: #000000;
}

.c-page-sub_floor .floorguide-block .c-tab {
  padding: 30px;
  border-right: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  position: relative;
  padding: 0em;
  border: none;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab {
    margin: 0;
    padding: 20px 15px;
    padding: 0;
  }
}

.c-page-sub_floor .floorguide-block .c-tab .nav_floor {
  position: absolute;
  width: 100%;
  padding-top: 69%;
  display: block;
  left: 0;
  top: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab .nav_floor {
    position: relative;
    padding-top: 0;
    margin-bottom: 20px;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__nav {
  position: absolute;
  left: 50%;
  bottom: 15px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: 0;
  width: 100%;
  max-width: 240px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__nav {
    position: relative;
    width: 80%;
    bottom: 0;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__nav li {
  border: 1px solid #0E8E56;
  margin: 0 15px;
  -webkit-transition: 0.3;
  transition: 0.3;
  outline: none;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__nav li:focus {
    background: none;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__nav li[aria-selected="true"] {
    border: 1px solid #0E8E56;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__nav li[aria-selected="true"] button {
  background: #0E8E56;
  color: #ffffff;
}

.c-page-sub_floor .floorguide-block .c-tab__nav li[aria-selected="true"] button:hover, .c-page-sub_floor .floorguide-block .c-tab__nav li[aria-selected="true"] button:focus {
  color: #ffffff;
}

.c-page-sub_floor .floorguide-block .c-tab__nav li button {
  border: none;
  padding: 11px 25px 8px;
  outline: none;
}

.c-page-sub_floor .floorguide-block .c-tab__nav li button:hover, .c-page-sub_floor .floorguide-block .c-tab__nav li button:focus {
  color: #BABABA;
}

.c-page-sub_floor .floorguide-block .c-tab__body {
  padding: 0;
  border: none;
}

.c-page-sub_floor .floorguide-block .c-tab__body ._map {
  margin-bottom: 90px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._map {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._list {
    display: block;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list h2 {
  margin: 0 5% 15px;
  font-size: 30px;
  font-weight: bold;
  font-family: "Futura", sans-serif;
  line-height: 1.5;
  border-bottom: 1px solid #ee7800;
  color: #ee7800;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._list h2 {
    font-size: calc(25 / 375 * 100vw);
    margin: 0 0 15px;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list h2.pink {
  border-bottom: 1px solid #ea609e;
  color: #ea609e;
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  padding: 0 5%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._list ul {
    width: auto;
    padding: 0;
    display: block;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 45%;
          flex: 0 0 45%;
  margin-bottom: 10px;
  text-indent: -25px;
  margin-left: 25px;
  padding-right: 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._list ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    padding: 0;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list ul li span {
  position: relative;
  margin-right: 6px;
  text-align: center;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: #0E8E56;
  border-radius: 50%;
  color: #ffffff;
  font-size: 12px;
  vertical-align: middle;
  padding: 1px 0;
  line-height: 1.6;
  text-indent: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block .c-tab__body ._list ul li span {
    padding: 1px 0 0;
  }
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list ul li a:hover {
  opacity: 0.5;
}

.c-page-sub_floor .floorguide-block .c-tab__body ._list ul + h2 {
  margin-top: 40px;
}

.c-page-sub_floor .floorguide-block.floor-top .c-tab {
  padding: 0;
  border: none;
  margin-bottom: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .floorguide-block.floor-top .c-tab .nav_floor {
    padding-top: 0;
    margin-top: 20px;
  }
}

.c-page-sub_floor .floorguide-block.floor-top .c-tab__body ._map {
  margin-bottom: 0;
}

.c-page-sub_floor[class*="category_"] .l-cols [class*="l-col"] {
  margin-bottom: 30px;
}

.c-page-sub_floor[class*="category_"] .topics-list h3.ttl-h3_2 {
  text-align: center;
  margin-top: 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor[class*="category_"] .topics-list [class*="l-col"] {
    width: 45.73333%;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor[class*="category_"] .floor-guide .l-cols [class*="l-col"] {
    width: auto;
    float: none;
  }
}

.c-page-sub_floor[class*="category_"] .floor-guide .l-cols:nth-child(odd) [class*="l-col"] {
  float: right;
}

.c-page-sub_floor[class*="category_"] .txt-box {
  margin-bottom: 20px;
}

.c-page-sub_floor[class*="category_"] .txt-box a {
  text-decoration: underline;
}

.c-page-sub_floor[class*="category_"] .txt-box a:hover {
  text-decoration: none;
}

.c-page-sub_floor .shoplist-block {
  position: relative;
}

.c-page-sub_floor .shoplist-block a {
  color: #000000;
}

.c-page-sub_floor .shoplist-block .c-tab {
  border-right: 1px solid #DEDEDE;
  border-left: 1px solid #DEDEDE;
  border-bottom: 1px solid #DEDEDE;
  padding-top: 30px;
  border: none;
  padding: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab {
    margin: 0;
    padding: 0;
  }
}

.c-page-sub_floor .shoplist-block .c-tab h2 {
  margin: 0 30px;
  font-size: 20px;
  font-weight: bold;
  border-left: 3px solid #0E8E56;
  padding-left: 15px;
  margin: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab h2 {
    font-size: calc(16 / 375 * 100vw);
    padding-left: 10px;
    margin: 0 5px;
  }
}

.c-page-sub_floor .shoplist-block .c-tab .nav_floor {
  border-bottom: 1px solid #DEDEDE;
}

.c-page-sub_floor .shoplist-block .c-tab__nav {
  padding: 20px 30px;
  overflow: inherit;
  white-space: inherit;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  padding: 20px 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__nav {
    padding: 10px 5px;
  }
}

.c-page-sub_floor .shoplist-block .c-tab__nav li {
  border: none;
  -webkit-transition: 0.3;
  transition: 0.3;
  outline: none;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  margin: 15px 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__nav li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    margin: 10px 0;
  }
  .c-page-sub_floor .shoplist-block .c-tab__nav li:focus {
    background: none;
  }
}

.c-page-sub_floor .shoplist-block .c-tab__nav li button {
  border: none;
  padding: 0;
  outline: none;
  text-align: left;
  color: #000000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.c-page-sub_floor .shoplist-block .c-tab__nav li button:hover, .c-page-sub_floor .shoplist-block .c-tab__nav li button:focus {
  color: #1A93D2;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__nav li button {
    font-size: calc(13 / 375 * 100vw);
  }
}

.c-page-sub_floor .shoplist-block .c-tab__nav li[aria-selected="true"] button {
  color: #1A93D2;
}

.c-page-sub_floor .shoplist-block .c-tab__nav li span {
  width: 30px;
  display: inline-block;
  margin-right: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__nav li span {
    width: calc(25 / 375 * 100vw);
    margin-right: 10px;
  }
}

.c-page-sub_floor .shoplist-block .c-tab__body {
  padding: 30px;
  border: none;
  padding: 30px 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__body {
    padding: 15px;
    padding: 15px 0;
  }
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols {
  text-align: center;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .l-col4 {
  margin-bottom: 30px;
  min-height: 278px;
  line-height: 1.4;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .l-col4 {
    width: 45.7%;
    margin-bottom: 15px;
    min-height: initial;
  }
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .ph {
  margin-bottom: 15px;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .ph img {
  width: 100%;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .ph a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols .ph a:hover {
  opacity: 0.5;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols a {
  font-weight: bold;
  text-decoration: underline;
}

.c-page-sub_floor .shoplist-block .c-tab__body ._list .l-cols a:hover {
  text-decoration: none;
}

.c-page-sub_floor .detail-block {
  border: 1px solid #DEDEDE;
  padding: 55px 30px;
  border-radius: 10px 10px 0 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block {
    padding: calc(25 / 375 * 100vw) calc(15 / 375 * 100vw);
    font-size: calc(13 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block p {
  line-height: 1.8;
}

.c-page-sub_floor .detail-block a {
  color: #000000;
}

.c-page-sub_floor .detail-block .ttl {
  position: relative;
  border-bottom: 1px solid #BABABA;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ttl {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
}

.c-page-sub_floor .detail-block .ttl h2 {
  font-size: 21px;
  font-weight: bold;
  line-height: 1.4;
  padding-right: 100px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ttl h2 {
    font-size: calc(15 / 375 * 100vw);
    padding-right: calc(55 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block .ttl h2 span {
  font-size: 15px;
  font-weight: 100;
  display: block;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ttl h2 span {
    font-size: calc(12 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block .ttl .logo {
  position: absolute;
  right: 0;
  bottom: 10px;
}

.c-page-sub_floor .detail-block .ttl .logo img {
  height: 90px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ttl .logo img {
    height: calc(50 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block .txt_midashi {
  font-size: 18px;
  margin-bottom: 25px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .txt_midashi {
    font-size: calc(14 / 375 * 100vw);
    margin-bottom: 15px;
  }
}

.c-page-sub_floor .detail-block .txt_midashi span {
  font-weight: bold;
  margin-left: 15px;
}

.c-page-sub_floor .detail-block .ph_slide {
  margin-bottom: 30px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ph_slide {
    margin-bottom: 25px;
  }
}

.c-page-sub_floor .detail-block .ph_slide .slick-prev {
  left: 30px;
  z-index: 100;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ph_slide .slick-prev {
    left: 10px;
  }
}

.c-page-sub_floor .detail-block .ph_slide .slick-prev::before {
  content: "";
  display: inline-block;
  left: 0;
  width: 20px;
  height: 20px;
  border-bottom: 4px solid #FFFFFF;
  border-left: 4px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ph_slide .slick-prev::before {
    width: 10px;
    height: 10px;
  }
}

.c-page-sub_floor .detail-block .ph_slide .slick-next {
  right: 30px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ph_slide .slick-next {
    right: 10px;
  }
}

.c-page-sub_floor .detail-block .ph_slide .slick-next::before {
  content: "";
  display: inline-block;
  right: 0;
  width: 20px;
  height: 20px;
  border-top: 4px solid #FFFFFF;
  border-right: 4px solid #FFFFFF;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  vertical-align: middle;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .ph_slide .slick-next::before {
    width: 10px;
    height: 10px;
  }
}

.c-page-sub_floor .detail-block .ph_slide + p {
  margin-bottom: 40px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block .l-cols {
    margin-right: 0;
    margin-left: 0;
  }
  .c-page-sub_floor .detail-block .l-cols [class*="l-col"] {
    width: 100%;
    margin: 0 0 20px;
  }
  .c-page-sub_floor .detail-block .l-cols [class*="l-col"] figure.logo {
    max-width: 90px;
  }
  .c-page-sub_floor .detail-block .l-cols [class*="l-col"] figure.ph img {
    width: 100%;
  }
}

.c-page-sub_floor .detail-block ._list dl {
  display: table;
  border-bottom: 1px solid #BABABA;
  width: 100%;
  font-size: 15px;
  padding: 9px 10px 5px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block ._list dl {
    font-size: calc(13 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block ._list dl:first-child {
  border-top: 1px solid #BABABA;
}

.c-page-sub_floor .detail-block ._list dl dt {
  display: table-cell;
  width: 110px;
  font-weight: bold;
}

.c-page-sub_floor .detail-block ._list dl dd {
  display: table-cell;
}

.c-page-sub_floor .detail-block h3 {
  font-size: 25px;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block h3 {
    font-size: calc(22 / 375 * 100vw);
  }
}

.c-page-sub_floor .detail-block ._news .l-cols {
  margin-bottom: 40px;
}

.c-page-sub_floor .detail-block ._news .l-cols [class*="l-col"] {
  margin-bottom: 25px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block ._news .l-cols {
    margin-bottom: 20px;
  }
  .c-page-sub_floor .detail-block ._news .l-cols [class*="l-col"] {
    margin-bottom: 20px;
  }
}

.c-page-sub_floor .detail-block ._news .l-cols:last-child {
  margin-bottom: 0;
}

.c-page-sub_floor .detail-block ._news .l-cols a {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
}

.c-page-sub_floor .detail-block ._news .l-cols a:hover {
  opacity: 0.5;
}

.c-page-sub_floor .detail-block ._news .l-cols .time {
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_floor .detail-block ._news .l-cols .time {
    font-size: calc(13 / 375 * 100vw);
  }
}

.c-page-sub_contact .inner p {
  font-size: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .inner p {
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-page-sub_contact .inner p.txt-tel {
  font-size: 14px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .inner p.txt-tel {
    line-height: 1.5;
  }
}

.c-page-sub_contact .inner p.txt-tel span {
  font-size: 22px;
  font-weight: bold;
  margin-right: 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .inner p.txt-tel span {
    display: block;
  }
}

.c-page-sub_contact .inner a {
  color: #000000;
}

.c-page-sub_contact .inner .text-link ul li {
  font-size: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .inner .text-link ul li {
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-page-sub_contact .form-block p {
  margin-bottom: 15px;
}

.c-page-sub_contact .form-block + .form-block {
  margin-top: 50px;
}

.c-page-sub_contact .form-block .contact-form {
  display: table;
  table-layout: fixed;
  position: relative;
  width: 100%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form {
    display: block;
  }
}

.c-page-sub_contact .form-block .contact-form input, .c-page-sub_contact .form-block .contact-form select, .c-page-sub_contact .form-block .contact-form textarea {
  border-radius: 0;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form input, .c-page-sub_contact .form-block .contact-form select, .c-page-sub_contact .form-block .contact-form textarea {
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-page-sub_contact .form-block .contact-form input[type="text"],
.c-page-sub_contact .form-block .contact-form input[type="email"],
.c-page-sub_contact .form-block .contact-form input[type="number"],
.c-page-sub_contact .form-block .contact-form input[type="tel"] {
  border: 1px solid #707070;
  padding: 13px 15px 10px;
  width: 330px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form input[type="text"],
  .c-page-sub_contact .form-block .contact-form input[type="email"],
  .c-page-sub_contact .form-block .contact-form input[type="number"],
  .c-page-sub_contact .form-block .contact-form input[type="tel"] {
    width: 100%;
  }
}

.c-page-sub_contact .form-block .contact-form input[type=number]::-webkit-inner-spin-button,
.c-page-sub_contact .form-block .contact-form input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.c-page-sub_contact .form-block .contact-form textarea {
  border: 1px solid #707070;
  padding: 13px 15px 10px;
  width: 600px;
  max-width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form textarea {
    height: 200px;
    width: 100%;
  }
}

.c-page-sub_contact .form-block .contact-form input.input-width-small {
  width: 99px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form input.input-width-small {
    width: 70px;
  }
}

.c-page-sub_contact .form-block .contact-form .input-before-text {
  margin-right: 5px;
}

.c-page-sub_contact .form-block .contact-form .input-while-text {
  margin-left: 5px;
  margin-right: 5px;
}

.c-page-sub_contact .form-block .contact-form .input-after-text {
  margin-left: 5px;
}

.c-page-sub_contact .form-block .contact-form .form-subject__box {
  max-width: 180px;
}

.c-page-sub_contact .form-block .contact-form-select {
  overflow: hidden;
  width: 600px;
  max-width: 100%;
  text-align: center;
  position: relative;
  background: #ffffff;
}

.c-page-sub_contact .form-block .contact-form-select::before {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 10px;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #000000;
  pointer-events: none;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form-select::before {
    border-left: 1.5vw solid transparent;
    border-right: 1.5vw solid transparent;
    border-top: 2vw solid #000000;
  }
}

.c-page-sub_contact .form-block .contact-form-select select {
  padding: 13px 10px 10px;
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: 1px solid #707070;
  outline: none;
  background: transparent;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-size: 13px;
  border-radius: 0;
}

.c-page-sub_contact .form-block .contact-form-select select::-ms-expand {
  display: none;
}

.c-page-sub_contact .form-block .contact-form-group {
  display: table-row;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form-group {
    display: block;
    border-bottom: 1px solid #eee;
  }
}

.c-page-sub_contact .form-block .contact-form-group > div {
  display: table-cell;
  border-bottom: 1px solid #eee;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form-group > div {
    display: block;
    border-bottom: none;
  }
}

.c-page-sub_contact .form-block .contact-form-group > div span {
  font-size: 10px;
}

.c-page-sub_contact .form-block .contact-form-label {
  width: 250px;
  padding: 25px 15px;
  vertical-align: top;
  font-weight: bold;
  font-size: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form-label {
    width: 100%;
    border: none;
    padding: 10px 10px 0;
    font-size: calc(15 / 375 * 100vw);
  }
}

.c-page-sub_contact .form-block .contact-form-label label span {
  font-weight: 400;
  margin-left: 5px;
}

.c-page-sub_contact .form-block .contact-form-label .label-required {
  margin-left: 5px;
}

.c-page-sub_contact .form-block .contact-form-control {
  padding: 25px 15px;
  vertical-align: middle;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .contact-form-control {
    padding: 5px 10px 10px;
  }
}

.c-page-sub_contact .form-block .error-text {
  line-height: 1.5;
  margin-top: 5px;
  margin-bottom: 0;
  font-size: 12px;
  color: #B90C00;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .error-text {
    font-size: calc(12 / 375 * 100vw);
  }
}

.c-page-sub_contact .form-block .error-text .sp-only {
  display: none;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .error-text .sp-only {
    display: block;
  }
}

.c-page-sub_contact .form-block .contact-form-your-agree {
  text-align: center;
  margin-top: 40px;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice {
  display: inline-block;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input {
  position: relative;
  margin-bottom: 2px;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input input {
  display: none;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input label {
  cursor: pointer;
  padding-left: 34px;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input label::before, .c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input label::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input label::before {
  width: 16px;
  height: 16px;
  border: 1px solid #000000;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input input[type="checkbox"] + label::after {
  width: 14px;
  height: 7px;
  border-bottom: 3px solid #000000;
  border-left: 3px solid #000000;
  -webkit-transform: rotate(-45deg) scale(0);
          transform: rotate(-45deg) scale(0);
  margin-top: -10px;
  left: 4px;
  -webkit-transition: 50ms ease-in-out;
  transition: 50ms ease-in-out;
  -webkit-box-shadow: 2px 2px 0 #ffffff;
          box-shadow: 2px 2px 0 #ffffff;
}

.c-page-sub_contact .form-block .contact-form-your-agree .form-choice__input input[type="checkbox"]:checked + label::after {
  -webkit-transform: rotate(-45deg) scale(1);
          transform: rotate(-45deg) scale(1);
}

.c-page-sub_contact .form-block .contact-form-your-agree a {
  text-decoration: underline;
  color: #000000;
}

.c-page-sub_contact .form-block .contact-form-your-agree a:hover {
  text-decoration: none;
}

.c-page-sub_contact .form-block .form-btn-box {
  text-align: center;
  margin-top: 40px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .form-btn-box {
    margin-top: 20px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .c-page-sub_contact .form-block .form-btn-box form {
    width: 45%;
  }
}

.c-page-sub_contact .form-block .form-btn-box input {
  margin: 0 10px;
  border: none;
  border-radius: 0;
  background-image: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #23C2C3;
  color: #ffffff;
  width: 280px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  position: relative;
  -webkit-transition: 100ms 100ms;
  transition: 100ms 100ms;
}

.c-page-sub_contact .form-block .form-btn-box input:hover {
  opacity: 0.5;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .form-btn-box input {
    width: 100%;
    font-size: calc(14 / 375 * 100vw);
    margin: 0;
  }
}

.c-page-sub_contact .form-block .form-btn-box input:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.c-page-sub_contact .form-block .form-btn-box input.form-btn-return {
  background: #cccccc;
}

.c-page-sub_contact .form-block .message-text {
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_contact .form-block .message-text {
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_concept .inner [class*="l-col"] {
    width: 100%;
  }
}

.c-page-sub_concept .inner figure {
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_concept .inner figure img {
    width: 100%;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_access .inner [class*="l-col"] {
    width: 100%;
  }
}

.c-page-sub_access .inner figure {
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_access .inner figure img {
    width: 100%;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_access .inner .img-scrool figure {
    overflow: scroll;
  }
  .c-page-sub_access .inner .img-scrool figure img {
    width: 420px;
    max-width: inherit;
    padding-right: 5px;
  }
}

.c-page-sub_access .inner p {
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_access .inner p {
    margin-bottom: 10px;
  }
}

.c-page-sub_access .inner .address {
  color: #1A93D2;
}

.c-page-sub_access .inner .address span {
  border: 1px solid #1A93D2;
  border-radius: 10px;
  width: 55px;
  text-align: center;
  display: block;
  line-height: 1;
  padding: 7px 0 3px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_access .inner .address span {
    padding: 5px 0 2px;
    font-size: calc(12 / 375 * 100vw);
    margin: 0 0 5px;
    border-radius: 8px;
  }
}

.c-page-sub_access .inner .bg-color {
  background: #1A93D2;
  text-align: center;
  color: #ffffff;
  padding: 10px 0 5px;
  margin-bottom: 15px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_around .inner .l-cols {
    margin: 0 0 30px !important;
  }
  .c-page-sub_around .inner [class*="l-col"] {
    width: 100%;
    margin: 0;
  }
}

.c-page-sub_around .inner figure {
  margin-bottom: 20px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_around .inner figure img {
    width: 100%;
  }
}

.c-page-sub_around .inner .l-cols {
  margin-bottom: 25px;
}

.c-page-sub_around .inner .l-cols:nth-child(odd) [class*="l-col"] {
  float: right;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_around .inner .l-cols [class*="l-col"] {
    float: none !important;
  }
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table {
    display: block;
  }
  .c-page-sub_information table tr,
  .c-page-sub_information table tbody {
    display: block;
    width: 100%;
  }
  .c-page-sub_information table tr {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #BABABA;
  }
}

.c-page-sub_information table td {
  border: none;
  padding: 8px 5px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table td {
    display: block;
    padding: 0 5px;
  }
}

.c-page-sub_information table td:first-child {
  width: 70%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table td:first-child {
    width: auto;
    margin-bottom: 10px;
  }
}

.c-page-sub_information table td:first-child p {
  line-height: 1.4;
}

.c-page-sub_information table td:last-child {
  text-align: right;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table td:last-child {
    width: calc(150 / 375 * 100vw);
  }
  .c-page-sub_information table td:last-child .b-btn a {
    font-size: calc(13 / 375 * 100vw);
    padding: 7px 20px 4px 10px;
    width: 100%;
  }
}

.c-page-sub_information table td p {
  font-weight: bold;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table td p {
    font-size: calc(14 / 375 * 100vw);
  }
}

.c-page-sub_information table td p span {
  width: 150px;
  display: inline-block;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information table td p span {
    width: auto;
    display: block;
    font-size: calc(16 / 375 * 100vw);
  }
}

.c-page-sub_information .information-list .l-cols {
  margin-bottom: 50px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .information-list .l-cols [class*="l-col"] {
    width: auto;
    float: none;
  }
  .c-page-sub_information .information-list .l-cols [class*="l-col"] img {
    width: 100%;
  }
}

.c-page-sub_information .information-list .ttl {
  position: relative;
}

.c-page-sub_information .information-list .ttl ul {
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  clear: both;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 -10px;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 5px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .information-list .ttl ul {
    margin: 0 -5px;
  }
}

.c-page-sub_information .information-list .ttl ul li {
  background: #0E8E56;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 4px 15px 0;
  font-size: 16px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border: none;
  margin: 0 10px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .information-list .ttl ul li {
    font-size: calc(14 / 375 * 100vw);
    margin: 0 5px;
  }
}

.c-page-sub_information .txt-tel {
  font-size: 20px;
  font-weight: bold;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .txt-tel {
    font-size: calc(18 / 375 * 100vw);
  }
}

.c-page-sub_information .contact .l-col10 {
  margin-top: 25px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .l-cols {
    margin: 0;
  }
  .c-page-sub_information .l-cols [class*="l-col"] {
    width: 100%;
    float: none;
    margin: 0;
  }
  .c-page-sub_information .l-cols [class*="l-col"] figure {
    width: 50%;
    margin: 0 auto;
  }
  .c-page-sub_information .contact [class*="l-col"] figure {
    width: 100%;
  }
  .c-page-sub_information .contact .l-col2 {
    width: calc(70 / 375 * 100vw);
    float: left;
  }
  .c-page-sub_information .contact .l-col10 {
    width: auto;
    margin-top: calc(15 / 375 * 100vw);
    margin-left: 5%;
    float: left;
  }
}

.c-page-sub_information .c-anchor-nav {
  margin-bottom: 0;
}

.c-page-sub_information .c-anchor-nav ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  padding: 0 3%;
  margin-bottom: 0;
}

.c-page-sub_information .c-anchor-nav ul li a {
  text-indent: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.c-page-sub_information .c-anchor-nav ul li a::before {
  display: none;
}

.c-page-sub_information .c-anchor-nav ul li a:hover {
  opacity: 0.5;
}

.c-page-sub_information .mb-small {
  margin-bottom: 30px !important;
}
/*# sourceMappingURL=bundle.css.map */

.c-page-sub_information .bousai {
  margin-left: 33px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_information .bousai {
    margin-left: 20px;
  }
}

/* 20201124 */
.line_under_blue{
	border-bottom: 3px solid #1A93D2!important;
}

.b-btn_blue a {
  color: #FFFFFF !important;
  text-align: center;
  font-size: 16px;
  border: 2px solid #1A93D2;
  padding: 10px 30px 5px;
  text-decoration: none;
  display: inline-block;
  position: relative;
  min-width: 230px;
	background-color: #1A93D2;
}

@media screen and (max-width: 599.999px) {
.b-btn_blue a {
    font-size: calc(14 / 375 * 100vw);
    padding: 9px 25px 6px;
    min-width: inherit;
  }
}
.b-btn_blue a::before {
  content: "";
  position: absolute;
  display: block;
  right: 15px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #FFFFFF;
  border-right: 2px solid #FFFFFF;
  top: 50%;
  -webkit-transform: rotate(45deg) translateY(-50%);
          transform: rotate(45deg) translateY(-50%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

/* 20210916 */
.o-wrapper-sm {
  max-width: 700px;
  margin: auto;
}

.o-box-md--thin {
	padding: 20px;
}

.o-box-md {
	padding: 24px;
}

.o-box-md--fat {
	padding: 30px;
}

.o-box-lg--thin {
	padding: 40px;
}

.u-bg-graytone01 {
  background-color: #F5F5F5 !important;
}

.u-text-left {
	text-align: left !important;
}

.u-text-center {
	text-align: center !important;
}

.u-text-right {
	text-align: right !important;
}

.c-headline-lv1,
[class*="c-page-sub_"] .c-headline-lv1 {
  padding-bottom: 0;
}

.c-headline-lv1::before {
  display: none;
}

.l-content {
  padding-top: 45px;
  padding-bottom: 100px;
}

.l-header-sm {
  display: flex;
  min-height: 80px;
}

.l-header-sm__inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: inherit;
}

.l-header-sm__logo {
  width: 105px;
  margin: auto;
}

.l-footer-sm {
  position: relative;
  color: #fff;
  background: #333333;
}

.l-footer-sm__inner {
  max-width: 1140px;
  margin: auto;
  padding: 20px;
}

.l-footer-sm__address-name {
  font-size: 20px;
  line-height: 1.3;
  margin-bottom: 15px;
}

.l-footer-sm__address address {
  font-style: normal;
  font-weight: normal;
}

.l-footer-sm__address address {
  font-size: 13px;
}


@media screen and (min-width: 768.001px) {
  .l-footer-sm__inner {
    display: flex;
  }
  
  .l-footer-sm__header {
    flex-shrink: 0;
    width: 200px;
  }
  
  .l-footer-sm__body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 1;
    margin-left: 40px;
  }
}

@media screen and (max-width: 1000px) {
  .o-wrapper-sm {
    padding: 0 4.68%;
  }
  .o-box-md--thin {
    padding: 14px 15px;
  }
  .o-box-md {
    padding: 15px 15px;
  }
  .o-box-md--fat {
    padding: 16px 15px;
  }
  .o-box-lg--thin {
    padding: 20px 15px;
  }
  .l-content {
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .l-header-sm {
    min-height: 60px;
  }
  .l-footer-sm__header {
    margin-bottom: 20px;
  }
  .l-footer-sm__logo {
    max-width: 200px;
  }
}
@media screen and (max-width: 599.999px) {
  .l-footer-sm__inner {
    padding: 20px calc(35 / 375 * 100vw);
  }
  .l-footer-sm__logo {
    width: calc(200 / 375 * 100vw);
  }
  .l-footer-sm__address-name {
    font-size: calc(18 / 375 * 100vw);
    margin-bottom: 5px;
  }
  .l-footer-sm__address address {
    font-size: 12px;
  }
}

/*-----------------
  c-page-sub_lp 2021/09/
-----------------*/

.c-page-sub_lp .l-content {
  padding: 0;
}

.c-page-sub_lp {
  font-size: 14px;
  line-height: 1.57;
}

.c-page-sub_lp a:hover {
  opacity: .6;
}

.c-page-sub_lp .mb0 {
  margin-bottom: 0 !important;
}

.c-page-sub_lp h2 {
  margin-bottom: 26px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-page-sub_lp h3 {
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-page-sub_lp .ttl-h3 {
  margin-bottom: 60px;
  text-align: center;
}
.c-page-sub_lp .ttl-h3 h3 {
  margin-bottom: 0;
  font-size: 2.4rem;
  line-height: 1;
}
.c-page-sub_lp .ttl-h3 h3::after {
  content: "";
  display: block;
  width: 50px;
  height: 5px;
  margin: 10px auto;
  background: #1A93D2;
}
.c-page-sub_lp .ttl-h3 p {
  font-size: 1.5rem;
  font-weight: 700;
}

.c-page-sub_lp .ttl-h3-02 {
  margin-bottom: 50px;
  text-align: center;
}
.c-page-sub_lp .ttl-h3-02 h3 {
  margin-bottom: 0;
  font-size: 2.4rem;
  color: #1A93D2;
}
.c-page-sub_lp .ttl-h3-02 p {
  font-size: 1.5rem;
  margin-bottom: 10px;
}


.c-page-sub_lp .t-blue {
  color: #1A93D2;
}
.c-page-sub_lp .t-orange {
  color: #EE7800;
}
.c-page-sub_lp .t-pink {
  color: #EA609E;
}
.c-page-sub_lp .t-green {
  color: #0E8E56;
}

.c-page-sub_lp .bg-gray {
  background: #EFEFEF;
}  

.c-page-sub_lp .for-sp {
  display: none;
}
@media screen and (max-width: 599.999px) {
  .c-page-sub_lp h2 {
    margin-bottom: 15px;
    font-size: 1.4rem;
  }
  .c-page-sub_lp h3 {
    font-size: 1.4rem;
  }
  .c-page-sub_lp .for-sp {
    display: block;
  }
  
  .c-page-sub_lp .ttl-h3 {
    margin-bottom: 20px;
  }
  .c-page-sub_lp .ttl-h3 h3 {
    margin-bottom: 0;
    font-size: 1.5rem;
    line-height: 1;
  }
  .c-page-sub_lp .ttl-h3 h3::after {
    content: "";
    display: block;
    width: 30px;
    height: 3px;
    margin: 10px auto 7px;
  }
  .c-page-sub_lp .ttl-h3 p {
    font-size: 1.3rem;
  }

  .c-page-sub_lp .ttl-h3-02 {
    margin-bottom: 20px;
  }
  .c-page-sub_lp .ttl-h3-02 h3 {
    margin-bottom: 0;
    font-size: 1.5rem;
  }
  .c-page-sub_lp .ttl-h3-02 p {
    font-size: 1rem;
    margin-bottom: 5px;
  }
}

/* mv */
.c-page-sub_lp .l-main {
  padding: 0;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.c-page-sub_lp .l-main ._mainslide {
  margin-bottom: 60px;
}
.c-page-sub_lp .l-main ._mainslide .slick-dots {
  position: static;
}
.c-page-sub_lp .l-main ._mainslide .slick-dots li button:before {
  opacity: 1;
  color: #0E8E56;
}
.c-page-sub_lp .l-main ._mainslide .slick-dots li.slick-active button:before{
  color: #333333;
}

.c-page-sub_lp .l-main .intro {
  padding: 0 5%;
}
.c-page-sub_lp .l-main h2 {
  margin-bottom: 10px;
  color: #1A93D2;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-main,
  .c-page-sub_lp .l-main ._mainslide {
    margin-bottom: 30px;
  }
}


/* content */
.c-page-sub_lp .l-content section {
  margin: 100px 0 0;
}
.c-page-sub_lp .l-content section .bg-img {
  height: 430px;
}
.c-page-sub_lp .l-content section .inner {
  margin: 0 auto;
  width: 96%;
  max-width: 1200px;
}

.c-page-sub_lp .l-content section .content-wrap .inner {
  margin: -120px auto 0;
  padding: 40px 40px 0;
  background: #fff;
  position: relative;
}

.c-page-sub_lp .l-content section .inner .inner-txt {
  width: 49%;
  max-width: 550px;
}

.c-page-sub_lp .l-content section .inner .btn {
  margin-top: 20px;
}
.c-page-sub_lp .l-content section .inner .btn a {
  padding: 12px 45px;
  min-width: 155px;
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-align: center;
}
.c-page-sub_lp .l-content section .inner .btn a.blank:after {
  content:"";
  display: block;
  height: 100%;
  width: 10px;
  position: absolute;
  background: url(/assets/img/lp/icon-blank01.svg) center center no-repeat;
  background-size: 100%;
  top: 0;
  right: 14px;
}


.c-page-sub_lp .l-content section .contents-lead {
  margin-top: 60px;
  padding: 7% 0;
  height: 487px;
  background-color: #F7F7F7;
}
.c-page-sub_lp .l-content section .contents-lead .inner {
  margin: 0 auto !important;
  padding: 0;
  background: none;
  position: static;
  display: flex;
}
.c-page-sub_lp .l-content section .contents-lead .contents-lead-txt {
  width: 45%;
}
.c-page-sub_lp .l-content section .contents-lead .contents-lead-txt h3::after {
  margin-top: 16px;
  content:"";
  display: block;
  height: 2px;
  width: 84px;
  background-color: #EE7800;
}

.c-page-sub_lp .l-content section .sttl {
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-page-sub_lp .l-content section .contents-detail {
  margin-bottom: 60px;
}
.c-page-sub_lp .l-content section .contents-detail .col-3,
.c-page-sub_lp .l-content section .contents-detail .col-2 {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
}
.c-page-sub_lp .l-content section .contents-detail .col-3 li {
  padding: 0 3px;
  width: 100%;
  max-width: 350px;
}
.c-page-sub_lp .l-content section .contents-detail .col-3 li div {
  margin-bottom: 20px;
}
.c-page-sub_lp .l-content section .contents-detail .col-3 li .note {
  margin-top: 5px;
}

.c-page-sub_lp .l-content section .contents-detail .col-2 .contents-detail-txt {
  width: 50%;
}
.c-page-sub_lp .l-content section .contents-detail .col-2 .contents-detail-img {
  width: 48%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section {
    margin: 60px 0 0;
  }
  .c-page-sub_lp .l-content section .bg-img {
    height: 220px;
  }
  .c-page-sub_lp .l-content section .inner {
    margin: 0 auto;
    width: 90%;
  }

  .c-page-sub_lp .l-content section .inner .inner-img {
    position: static !important;
  }

  .c-page-sub_lp .l-content section .content-wrap .inner {
    margin: -60px auto 0;
    padding: 20px 20px 0;
    position: relative;
  }

  .c-page-sub_lp .l-content section .inner .inner-txt {
    margin-top: 20px;
    width: 100%;
  }

  .c-page-sub_lp .l-content section .inner .btn a {
    padding: 15px;
    width: 100%;
  }
  .c-page-sub_lp .l-content section .inner .btn a.blank:after {
    content:"";
    display: block;
    height: 100%;
    width: 11px;
    position: absolute;
    background: url(/assets/img/lp/icon-blank01.svg) center center no-repeat;
    background-size: 100%;
    top: 0;
    right: 17px;
  }

  .c-page-sub_lp .l-content section .contents-lead {
    margin-top: 40px;
    padding: 0;
    height: auto;
    background-image: none !important;
  }
  .c-page-sub_lp .l-content section .contents-lead .contents-lead-txt {
    padding: 40px 0;
    width: 100%;
  }

  .c-page-sub_lp .l-content section .sttl {
    margin-bottom: 10px;
    font-size: 1.3rem;
  }

  .c-page-sub_lp .l-content section .contents-detail {
    margin-bottom: 40px;
  }
  .c-page-sub_lp .l-content section .contents-detail .col-3,
  .c-page-sub_lp .l-content section .contents-detail .col-2 {
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .c-page-sub_lp .l-content section .contents-detail .col-3 li {
    width: auto;
    margin-bottom: 20px;
  }
  .c-page-sub_lp .l-content section .contents-detail .col-3 li .note {
    margin-top: 5px;
  }
  
  .c-page-sub_lp .l-content section .contents-detail .col-2 .contents-detail-txt {
    width: 100%;
  }
  .c-page-sub_lp .l-content section .contents-detail .col-2 .contents-detail-img {
    width: 100%;
  }
}


/* content forum */
.c-page-sub_lp .l-content section.forum .bg-img {
  background: url(/assets/img/lp/forum-bg.jpg) center top no-repeat;
  background-size: cover;
}
.c-page-sub_lp .l-content section.forum .inner .inner-img {
  width: 50%;
  max-width: 600px;
  position: absolute;
  right: 10px;
  bottom: -10px;
}
.c-page-sub_lp .l-content section.forum .inner .btn a {
  background-color: #EE7800;
}

.c-page-sub_lp .l-content section.forum .contents-lead {
  background-image: url(/assets/img/lp/forum-ttl-photo.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 50%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.forum {
    margin-top: 0;
  }
  .c-page-sub_lp .l-content section.forum .inner .inner-img {
    margin: -164px auto 0;
    width: 96%;
  }

  .c-page-sub_lp .l-content section.forum .contents-detail .col-3 li {
    width: calc(100% / 3);
  }
  .c-page-sub_lp .l-content section.forum .contents-detail .col-2 .contents-detail-txt {
    margin-bottom: 20px;
  }
  .c-page-sub_lp .l-content section.forum .contents-detail .col-2 .contents-detail-img {
    text-align: center;
  }
}

/* content tenant */
.c-page-sub_lp .l-content section.tenant .bg-img {
  background: url(/assets/img/lp/tenant-bg.jpg) center top no-repeat;
  background-size: cover;
}
.c-page-sub_lp .l-content section.tenant .inner .inner-img {
  width: 31%;
  max-width: 350px;
  position: absolute;
  right: 57px;
  bottom: 0;
}
.c-page-sub_lp .l-content section.tenant .inner .btn a {
  background-color: #EA609E;
}

.c-page-sub_lp .l-content section.tenant .contents-lead .contents-lead-txt {
  float: right;
}
.c-page-sub_lp .l-content section.tenant .contents-lead {
  padding: 4% 0;
  background-image: url(/assets/img/lp/tenant-ttl-photo.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 50%;
}

.c-page-sub_lp .l-content section.tenant  .contents-lead .inner {
  flex-direction: row-reverse;
}

.c-page-sub_lp .l-content section.tenant .contents-lead .contents-lead-txt h3::after {
  background-color: #EA609E;
}

.c-page-sub_lp .l-content section.tenant .contents-tenant-box {
  margin-top: 60px;
  padding: 25px 132px 30px;
  border: #EA609E 1px solid;
}
.c-page-sub_lp .l-content section.tenant .contents-tenant-box .sttl {
  text-align: center;
}
.c-page-sub_lp .l-content section.tenant .contents-tenant-box ul {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.tenant .inner .inner-img {
    margin: -120px auto 0;
    width: 88%;
  }
  .c-page-sub_lp .l-content section.tenant .contents-lead .contents-lead-txt {
    float: none;
  }
  
  .c-page-sub_lp .l-content section.tenant .contents-tenant-box {
    margin-top: 10px;
    padding: 20px;
    border: #EA609E 1px solid;
  }
  .c-page-sub_lp .l-content section.tenant .contents-tenant-box ul {
    margin-top: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .c-page-sub_lp .l-content section.tenant .contents-tenant-box li {
    width: 80px;
    margin-top: 10px;
  }
}


/* content whole-map */
.c-page-sub_lp .l-content section.whole-map .whole-map-box {
  margin: 120px auto 0;
  padding: 70px 32px 32px;
  border: #1A93D2 8px solid;
  background: #F3FAFD;
  position: relative;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box::before {
  content: "island eye 施設全体マップ";
  padding: 15px 30px;
  background-color: #1A93D2;
  border-radius: 33px;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box h3 {
  text-align: center;
  margin-bottom: 35px;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .col-2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .col-2 dl {
  width: 48%;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .col-2 dl.whole-map-feature-detail {
  width: 100%;
}


.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dt.sttl {
  padding: 15px 15px 9px;
  width: 100%;
  color: #fff;
  text-align: center;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature-detail {
  margin-bottom: 40px;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature-detail dt {
  margin-bottom: 15px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-txt {
  padding-left: 2rem;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn {
  margin-top: 10px;
  text-align: center;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn .btn a {
  padding: 14px 74px 10px;
  margin: 0 auto;
  min-width: 280px;
  position: relative;
  display: inline-block;
  color: #EE7800;
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  border: #EE7800 3px solid;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn .btn a:after {
  content:"";
  display: block;
  height: 100%;
  width: 8px;
  position: absolute;
  background: url(/assets/img/lp/icon-arrow-orange.svg) center center no-repeat;
  background-size: 100%;
  top: 0;
  right: 10px;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-img {
  padding: 100px 0;
  text-align: center;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box {
  padding: 30px;
  border: #707070 1px solid;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box-txt {
  width: 57%;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box-img {
  width: 32%;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-interact {
  margin-top: 100px;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-training dt.sttl {
  background: #EE7800;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-stay dt.sttl {
  background: #0E8E56;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-interact dt.sttl {
  background: #EA609E;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-stay dd.whole-map-feature-detail-btn .btn a {
  color: #0E8E56;
  border: #0E8E56 3px solid;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-stay dd.whole-map-feature-detail-btn .btn a:after {
  background: url(/assets/img/lp/icon-arrow-green.svg) center center no-repeat;
}

.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-interact dd.whole-map-feature-detail-btn .btn a {
  color: #EA609E;
  border: #EA609E 3px solid;
}
.c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-interact dd.whole-map-feature-detail-btn .btn a:after {
  background: url(/assets/img/lp/icon-arrow-pink.svg) center center no-repeat;
}
@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.whole-map .whole-map-box {
    margin: 70px auto 0;
    padding: 50px 15px 15px;
    border: #1A93D2 4px solid;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box::before {
    padding: 14px;
    min-width: 88%;
    border-radius: 30px;
    font-size: 1.3rem;
    line-height: 1;
    text-align: center;
    top: -25px;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box h3 {
    text-align: center;
    margin-bottom: 20px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .col-2 {
    display: block;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .col-2 dl {
    width: 100%;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature {
    margin-bottom: 30px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dt.sttl {
    margin-bottom: 15px !important;
    padding: 12px 5px 9px;
    font-size: 1.2rem;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature-detail {
    margin-bottom: 20px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature-detail dt {
    margin-bottom: 5px;
    font-size: 1.3rem;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-txt {
    padding-left: 0;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn {
    margin-top: 10px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn .btn a {
    padding: 14px 12px 10px;
    min-width: 100%;
    font-size: 1.2em;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature dd.whole-map-feature-detail-btn .btn a:after {
    content:"";
    display: block;
    height: 100%;
    width: 8px;
    position: absolute;
    background: url(/assets/img/lp/icon-arrow-orange.svg) center center no-repeat;
    background-size: 100%;
    top: 0;
    right: 15px;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-img {
    padding: 10px 0 40px;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box {
    display: block;
    padding: 20px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box-txt {
    width: 100%;
    margin-bottom: 10px;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .preventing-box-img {
    width: 100%;
  }
  
  .c-page-sub_lp .l-content section.whole-map .whole-map-box .whole-map-feature.for-interact {
    margin-top: 0;
  }
}


/* content schedule */
.c-page-sub_lp .l-content section.schedule {
  margin-top: 60px;
  padding: 100px 0 85px;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit {
  margin: 0 auto 25px;
  display: flex;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail {
  width: 700px;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .time {
  padding-left: 45px;
  margin-bottom: 15px;
  background: url(/assets/img/lp/icon-schedule-orange.svg) left center no-repeat;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-pink .schedule-unit-detail .time {
  background: url(/assets/img/lp/icon-schedule-pink.svg) left center no-repeat;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-green .schedule-unit-detail .time {
  background: url(/assets/img/lp/icon-schedule-green.svg) left center no-repeat;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt {
  display: flex;
  align-items: flex-start;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-arrow {
  margin-right: 10px;
  height: 260px;
  width: 30px;
  background-color: #EE7800;
  position: relative;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-pink .schedule-unit-detail .txt-arrow {
  background-color: #EA609E;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-green .schedule-unit-detail .txt-arrow {
  background-color: #0E8E56;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-arrow::after {
  margin-top: 260px;
  content: "";
  position: absolute;
  border: 14px solid transparent;
  border-top: 10px #EE7800 solid;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-pink .schedule-unit-detail .txt-arrow::after {
  border-top: 10px #EA609E solid;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit.color-green .schedule-unit-detail .txt-arrow::after {
  border-top: 10px #0E8E56 solid;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit.last .schedule-unit-detail .txt-arrow::after {
  display: none;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-box {
  padding: 30px;
  min-height: 200px;
  width: 100%;
  background: #fff;
}
.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-box .lead {
  margin-bottom: 20px;
  font-size: 1.8rem;
  font-weight: 700;
}

.c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-img {
  width: 500px;
}

@media screen and (max-width: 1200px) {
  .c-page-sub_lp .l-content section.schedule {
    padding: 40px 0;
  }
  
  .c-page-sub_lp .l-content section.schedule .schedule-unit {
    margin: 0 auto 55px;
    position: relative;
    align-items: flex-end;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit:last-child {
    margin-bottom: 0;
  }

  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail {
    width: 60%;
  }
  
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .time {
    padding-left: 30px;
    background: url(/assets/img/lp/icon-schedule-orange.svg) left center no-repeat;
    background-size: 20px auto !important;
  }
    
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-arrow,
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-arrow::after {
    display: none;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit::after {
    margin-top: 10px;
    content: "";
    position: absolute;
    border: 40px solid transparent;
    border-top: 20px #EE7800 solid;
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50px);
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit.color-pink::after {
    border-top: 20px #EA609E solid;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit.color-green::after {
    border-top: 20px #0E8E56 solid;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit.last::after {
    display: none;
  }
  
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-box {
    padding: 20px;
    min-height: auto;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail .txt-box .lead {
    margin-bottom: 10px;
    font-size: 1.3rem;
  }
  
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-img {
    width: 40%;
  }
}
@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.schedule {
    padding: 40px 0;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit {
    display: block;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-detail {
    width: 100%;
  }
  .c-page-sub_lp .l-content section.schedule .schedule-unit .schedule-unit-img {
    width: 100%;
  }
}

/* content voice */
.c-page-sub_lp .l-content section.voice .voice-unit {
  display: flex;
  justify-content: space-between;
  padding: 40px;
  background: #E7F4FB;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-name {
  text-align: right;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-img {
  width: 25%;
  margin-right: 30px;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt {
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt h3 {
  color: #1A93D2;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility {
  padding: 15px 20px;
  margin: 20px 0;
  width: 100%;
  font-size: 1.5rem;
  font-weight: 700;
  background: #fff;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility p {
  display: inline-block;
}
.c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility span {
  padding: 5px 20px;
  margin-right: 15px;
  color:#fff;
  font-size: 1rem;
  font-weight: 700;
  background: #1A93D2;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.voice .voice-unit {
    padding: 20px;
    display: block;
  }
  .c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-img {
    width: 60%;
    margin: 0 auto 20px;
  }
  .c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt {
    width: 100%;
  }
  .c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility {
    margin: 15px 0;
    padding: 10px;
    font-size: 1.2rem;
  }
  .c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility p {
    margin-bottom: 5px;
    display: block;
  }
  .c-page-sub_lp .l-content section.voice .voice-unit .voice-unit-txt .facility span {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

/* content point */
.c-page-sub_lp .l-content section.point {
  margin-top: 60px;
  padding: 60px 0;
}
.c-page-sub_lp .l-content section.point .inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.c-page-sub_lp .l-content section.point dl.point-box {
  padding: 35px 50px;
  width: 30%;
  border: #1A93D2 5px solid;
  border-radius: 44px;
  font-size: 1.4rem;
  font-weight: 700;
  margin-top: -100px;
}

.c-page-sub_lp .l-content section.point dl.point-box.point2 {
  margin-top: 0;
}

.c-page-sub_lp .l-content section.point dl dt.point-icon {
  margin-bottom: 15px;
  text-align: center;
}
.c-page-sub_lp .l-content section.point dl dd.lead {
  margin-bottom: 15px;
  font-size: 2.4rem;
  color: #1A93D2;
  text-align: center;
}
@media screen and (max-width: 1050px) {
    .c-page-sub_lp .l-content section.point {
      margin-top: 40px;
      padding: 40px 0 20px;
    }
    .c-page-sub_lp .l-content section.point .inner {
      display: block;
    }
    .c-page-sub_lp .l-content section.point dl.point-box {
      margin: 0 0 20px;
      padding: 20px;
      width: 100%;
      border: #1A93D2 3px solid;
      border-radius: 22px;
      font-size: 1.1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    
    .c-page-sub_lp .l-content section.point dl dt.point-icon {
      margin: 0 10px 0 0;
      width: 60px;
    }
    .c-page-sub_lp .l-content section.point dl dd.point-box-txt {
      width: calc(100% - 70px);
    }
    .c-page-sub_lp .l-content section.point dl dd.lead {
      margin-bottom: 5px;
      font-size: 1.3rem;
      text-align: left;
    }
  }

/* content stay */
.c-page-sub_lp .l-content section.stay .bg-img {
  background: url(/assets/img/lp/stay-bg.jpg) center top no-repeat;
  height: 662px;
  background-size: cover;
}
.c-page-sub_lp .l-content section.stay .content-wrap .inner {
  margin: -9vw auto 0;
}
.c-page-sub_lp .l-content section.stay .inner .inner-img {
  width: 64%;
  max-width: 778px;
  position: absolute;
  right: -14%;
  bottom: 103px;
}
.c-page-sub_lp .l-content section.stay .inner .btn a {
  background-color: #0E8E56;
}

.c-page-sub_lp .l-content section.stay .contents-lead {
  background-image: url(/assets/img/lp/stay-ttl-photo.jpg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 50%;
}

.c-page-sub_lp .l-content section.stay .contents-lead .contents-lead-txt h3::after {
  background-color: #0E8E56;
}

.c-page-sub_lp .l-content section.stay .stay-sightseeing-box {
  margin-top: 60px;
  padding: 30px 40px;
  background: #F2F9F6;
}

.c-page-sub_lp .l-content section.stay .stay-sightseeing-box .col-3 li {
  width: 322px;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.stay .bg-img {
    height: 220px;
  }
  .c-page-sub_lp .l-content section.stay .content-wrap .inner {
    margin: -60px auto 0;
  }
  .c-page-sub_lp .l-content section.stay .inner .inner-img {
    margin: -135px auto 0;
    width: 100%;
  }
  
  .c-page-sub_lp .l-content section.stay .stay-sightseeing-box {
    margin-top: 40px;
    padding: 20px;
  }
  .c-page-sub_lp .l-content section.stay .stay-sightseeing-box .col-3 li {
    margin-bottom: 30px;
    width: 100%;
  }
  .c-page-sub_lp .l-content section.stay .stay-sightseeing-box .col-3 li:last-child {
    margin-bottom: 0;
  }
}

/* access */
.c-page-sub_lp .l-content section.access {
  margin-top: 85px;
}
@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.access {
    margin-top: 60px;
  }
}

/* g-map */
.c-page-sub_lp .l-content section.g-map iframe {
  vertical-align: bottom;
}
@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.g-map iframe {
    height: 320px;
  }
}

/* contact-btn */
.c-page-sub_lp .l-content section.contact-btn-area {
  margin: 0;
  padding: 20px 0;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: rgba(0,0,0,0.7);
}
.c-page-sub_lp .l-content section.contact-btn-area ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.c-page-sub_lp .l-content section.contact-btn-area ul li {
  margin: 0 15px;
  min-width: 236px;
}
.c-page-sub_lp .l-content section.contact-btn-area ul li a {
  padding: 15px 45px;
  width: 100%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-page-sub_lp .l-content section.contact-btn-area ul li.btn-voice a {
  color: #fff;
  background-color: #EE7800;
}
.c-page-sub_lp .l-content section.contact-btn-area ul li.btn-voice a::before {
  content: "";
  display: block;
  margin-right: 10px;
  width: 23px;
  height: 22px;
  background: url(/assets/img/lp/icon-voice.svg) 0 0 no-repeat;
  background-size: 100%;
}

.c-page-sub_lp .l-content section.contact-btn-area ul li.btn-contact a {
  color: #333;
  background-color: #FFEA00;
}
.c-page-sub_lp .l-content section.contact-btn-area ul li.btn-contact a::before {
  content: "";
  display: block;
  margin-right: 10px;
  width: 23px;
  height: 22px;
  background: url(/assets/img/lp/icon-contact.svg) 0 0 no-repeat;
  background-size: 100%;
}

@media screen and (max-width: 599.999px) {
  .c-page-sub_lp .l-content section.contact-btn-area ul li {
    margin: 0 8px;
    width: 50%;
    min-width: auto;
  }
  .c-page-sub_lp .l-content section.contact-btn-area ul li a {
    padding: 10px;
  }

  .c-page-sub_lp .l-content section.contact-btn-area ul li.btn-voice a::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 18px;
    height: 17px;
    background: url(/assets/img/lp/icon-voice.svg) 0 0 no-repeat;
    background-size: 18px 17px;
  }
  .c-page-sub_lp .l-content section.contact-btn-area ul li.btn-contact a::before {
    content: "";
    display: block;
    margin-right: 8px;
    width: 18px;
    height: 17px;
    background: url(/assets/img/lp/icon-contact.svg) 0 0 no-repeat;
    background-size: 18px 17px;
  }
}

@media print {
  .c-page-sub_lp .l-content section.contact-btn-area {
    display: none;
  }
  .c-page-sub_lp .l-content section.whole-map .whole-map-box::before {
    top: 0;
  }
}