@charset "UTF-8";
/*!
 * Name: Basis v7.0.0
 * Description: A lightweight responsive Sass/CSS framework based on flexible box.
 * Author: Takashi Kitajima ( inc2734 )
 * Author URL: https://2inc.org
 * GitHub Repository: https://github.com/sass-basis/basis
 * License: MIT
 */
/*
---
name: $_prefix
category:
  - core/variable
---
Prefix of basis classes

```scss
$_prefix: '';
```
*/
/*
---
name: _light()
category:
  - core/function
  - core/function/color
---
A little brighten

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _light(#000);
```
*/
/*
---
name: _lighter()
category:
  - core/function
  - core/function/color
---
Brighten

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _lighter(#000);
```
*/
/*
---
name: _lightest()
category:
  - core/function
  - core/function/color
---
To very brighten

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _lightest(#000);
```
*/
/*
---
name: _dark()
category:
  - core/function
  - core/function/color
---
A little darken

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _dark(#fff);
```
*/
/*
---
name: _darker()
category:
  - core/function
  - core/function/color
---
Darken

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _darker(#fff);
```
*/
/*
---
name: _darkest()
category:
  - core/function
  - core/function/color
---
To very darken

### scss
```scss
//
// @param   hex  $hex
// @return  hex
//

color: _darkest(#fff);
```
*/
/*
---
name: _is-int()
category:
  - core/function
  - core/function/condition
---
Checks for a valid int

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-int($value)) {
  z-index: $value;
}
```
*/
/*
---
name: _is-length()
category:
  - core/function
  - core/function/condition
---
Checks for a valid CSS length

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-length($value)) {
  width: $value;
}
```
*/
/*
---
name: _is-null()
category:
  - core/function
  - core/function/condition
---
Checks for a valid null

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (not _is-null($value)) {
  width: $value;
}
```
*/
/*
---
name: _is-number()
category:
  - core/function
  - core/function/condition
---
Checks for a valid number

### scss
```scss
//
// @param   mixed  $value
// @return  bool
//

@if (_is-number($value)) {
  z-index: $value;
}
```
*/
/*
---
name: _gcd()
category:
  - core/function
---
Return greatest common divisor

### scss
```scss
//
// @param   int  $a  The number to be divided
// @param   int  $b  The number to divide
// @return  int  The number of the remainder
//

$gcd: _gcd(4, 8);
```
*/
/*
---
name: _min()
category:
  - core/function
  - core/function/media-query
---
Return min size.

* If `$size` is key of `$_size`, return that value.
* If `$size` is number, return this.

### scss
```scss
//
// @param  size|length  $size
// @return length|false
//

@media (min-width: _min(md)) {
  ...
}
```
*/
/*
---
name: _max()
category:
  - core/function
  - core/function/media-query
---
Return max size.

* If `$size` is key of `$_size`, return that max value.
* If `$size` is number, return this.

### scss
```scss
//
// @param  size|length  $size
// @return length|false
//

@media (max-width: _max(md)) {
  ...
}
```
*/
/*
---
name: _prev-size-key()
category:
  - core/function
  - core/function/media-query
---
Return prev key of `$_size`

### scss
```scss
//
// @param  size  $size
// @return size
//

$prev_size_key: _prev-size-key(md); // => sm
```
*/
/*
---
name: _next-size-key()
category:
  - core/function
  - core/function/media-query
---
Return next key of `$_size`

### scss
```scss
//
// @param  size  $size
// @return size
//

$next_size_key: _next-size-key(md); // => lg
```
*/
/*
---
name: _px2rem()
category:
  - core/function
---
Return rem from px

### scss
```scss
//
// @param   px  $px
// @param   px  $base-font-size-px
// @return  rem
//

font-size: _px2rem(16px);
```
*/
/*
---
name: _rem2px()
category:
  - core/function
---
Return px from rem

### scss
```scss
//
// @param   rem  $rem
// @param   px   $base-font-size-px
// @return  px
//

font-size: _rem2px(2rem);
```
*/
/*
---
name: _replace()
category:
  - core/function
---
Replace in a string

### scss
```scss
//
// @param   string|list  $substr
// @param   string       $newsubstr
// @param   string       $string
// @return  string
//

$value: _replace('p', 'a', 'apple'); // => aaale
```
*/
/*
---
name: _sanitize-animation-name()
category:
  - core/function
---
Sanitize animation name

### scss
```scss
//
// @param   string  $name
// @return  string
//

$animation-name: _sanitize-animation-name($name);
animation: $animation-name .2s ease-in 0s;
```
*/
/*
---
name: _size-prefix()
category:
  - core/function
---

Return prefix for the device size

### scss
```scss
//
// @param   string  $size  sm|md|lg
// @return  string
//

$prefix: _size-prefix(md); // -> --md
```
*/
/*
---
name: _space()
category:
  - core/function
---
Return the margin conforming to the rhythm

* When coefficient is lenght return it as is

### scss
```scss
//
// @param   int|length  $coefficient
// @return  length
//

padding: _space(1);
```
*/
/*
---
name: _strip-unit()
category:
  - core/function
---
Return numeric value that doesn't have the unit.

### scss
```scss
//
// @param   length  $value  numeric value
// @return  int
//

$value: _strip-unit(10px); // => 10
```
*/
/*
---
name: _vertical-rhythm()
category:
  - core/function
---
Return line height ( px ) for vertical rhythum

### scss
```scss
//
// @param   px   font-size
// @param   int  coefficient
// @return  int
//

line-height: (_vertical-rhythm(16px) / 16);
```
*/
/*
---
name: $_base-font-size-px
category:
  - core/variable
  - core/variable/typography
---
Default font size

* If html is `font-size: 62.5%`, set `10px`

### scss
```scss
$_base-font-size-px: 16px;
```
*/
/*
---
name: $_base-font-size
category:
  - core/variable
  - core/variable/typography
---
Default font size (rem)

* `$_base-font-size-px` be not able to change. If you want to change base font size, overwrite `$_base-font-size-px`.

### scss
```scss
$_base-font-size-px: 16px;
```
*/
/*
---
name: $_between-lines
category:
  - core/variable
  - core/variable/typography
---
Between the character and line of line-height

### scss
```scss
$_between-lines: ($_base-font-size / 4);
```
*/
/*
---
name: $_base-line-height
category:
  - core/variable
  - core/variable/typography
---
Default line height

### scss
```scss
$_base-line-height: ($_base-font-size + $_between-lines * 2);
```
*/
/*
---
name: $_margin-coefficient
category:
  - core/variable
  - core/variable/typography
---
Margin coefficient

### scss
```scss
$_margin-coefficient: 1;
```
*/
/*
---
name: $_base-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
HTML element margin coefficient

### scss
```scss
$_base-margin-bottom: 1
```
*/
/*
---
name: $_h1-font-size-scale
category:
  - core/variable
  - core/variable/typography
---
`h1` font size scale

### scss
```scss
$_h1-font-size-scale: 2.5;
```
*/
/*
---
name: $_h2-font-size-scale
category:
  - core/variable
  - core/variable/typography
---
`h2` font size scale

### scss
```scss
$_h2-font-size-scale: 2;
```
*/
/*
---
name: $_h3-font-size-scale
category:
  - core/variable
  - core/variable/typography
---
`h3` font size scale

### scss
```scss
$_h3-font-size-scale: 1.5;
```
*/
/*
---
name: $_h4-font-size-scale
category:
  - core/variable
  - core/variable/typography
---
`h4` font size scale

### scss
```scss
$_h4-font-size-scale: 1.25;
```
*/
/*
---
name: $_h5-font-size-scale
category:
  - core/variable/typography
---
`h5` font size scale

### scss
```scss
$_h5-font-size-scale: 1;
```
*/
/*
---
name: $_h6-font-size-scale
category:
  - core/variable
  - core/variable/typography
---
`h6` font size scale

### scss
```scss
$_h6-font-size-scale: 1;
```
*/
/*
---
name: $_h1-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h1` margin top coefficient

### scss
```scss
$_h1-margin-top: 0;
```
*/
/*
---
name: $_h1-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h1` margin bottom coefficient

### scss
```scss
$_h1-margin-bottom: $_base-margin-bottom;
```
*/
/*
---
name: $_h2-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h2` margin top coefficient

### scss
```scss
$_h2-margin-top: $_base-margin-bottom * 2;
```
*/
/*
---
name: $_h2-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h2` margin bottom coefficient

### scss
```scss
$_h2-margin-bottom: $_base-margin-bottom;
```
*/
/*
---
name: $_h3-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h3` margin top coefficient

### scss
```scss
$_h3-margin-top: $_base-margin-bottom * 1.5;
```
*/
/*
---
name: $_h3-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h3` margin bottom coefficient

### scss
```scss
$_h3-margin-bottom: $_base-margin-bottom;
```
*/
/*
---
name: $_h4-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h4` margin top coefficient

### scss
```scss
$_h4-margin-top: $_base-margin-bottom * 1.25;
```
*/
/*
---
name: $_h4-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h4` margin bottom coefficient

### scss
```scss
$_h4-margin-bottom: $_base-margin-bottom;
```
*/
/*
---
name: $_h5-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h5` margin top coefficient

### scss
```scss
$_h5-margin-top: $_base-margin-bottom;
```
*/
/*
---
name: $_h5-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h5` margin bottom coefficient

### scss
```scss
$_h5-margin-bottom: $_base-margin-bottom * .5;
```
*/
/*
---
name: $_h6-margin-top
category:
  - core/variable
  - core/variable/typography
---
`h6` margin top coefficient

### scss
```scss
$_h6-margin-top: $_base-margin-bottom;
```
*/
/*
---
name: $_h6-margin-bottom
category:
  - core/variable
  - core/variable/typography
---
`h6` margin bottom coefficient

### scss
```scss
$_h6-margin-bottom: $_base-margin-bottom * .5;
```
*/
/*
---
name: $_font-family
category:
  - core/variable
  - core/variable/typography
---
Default font family

### scss
```scss
$_font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
```
*/
@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 300;
}

@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: 500;
}

@font-face {
  font-family: "Original Yu Gothic";
  src: local("Yu Gothic");
  font-weight: bold;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}

@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

/*
---
name: $_transition-duration
category:
  - core/variable
---
Animation time

### scss
```scss
$_transition-duration: .1s;
```
*/
/*
---
name: $_transition-function-timing
category:
  - core/variable
---
Transition function timing

### scss
```scss
//
// @link  http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
//

$_transition-function-timing: ease-out;
```
*/
/*
---
name: $_border-radius
category:
  - core/variable
---
Border radius

### scss
```scss
$_border-radius: 3px;
```
*/
/*
---
name: $_color-text
category:
  - core/variable
  - core/variable/color
---
Default text color

### scss
```scss
$_color-text: #333;
```
*/
/*
---
name: $_color-black
category:
  - core/variable
  - core/variable/color
---
Default black color

### scss
```scss
$_color-black: #111;
```
*/
/*
---
name: $_color-gray
category:
  - core/variable
  - core/variable/color
---
Default gray color

### scss
```scss
$_color-gray: #999;
```
*/
/*
---
name: $_color-red
category:
  - core/variable
  - core/variable/color
---
Default red color

### scss
```scss
$_color-red: #e74c3c;
```
*/
/*
---
name: $_font-path
category:
  - core/variable
---
Basis font relative path

### scss
```scss
$_font-path: '../font';
```
*/
@font-face {
  font-family: 'basis';
  src: url("../font/basis.eot");
  src: url("../font/basis.eot#iefix") format("embedded-opentype"), url("../font/basis.ttf") format("truetype"), url("../font/basis.woff") format("woff"), url("../font/basis.svg#basis") format("svg");
  font-weight: normal;
  font-style: normal;
}

/*
---
name: $_min-columns
category:
  - core/variable
  - core/variable/media-query
---
The minimum number of columns

### scss
```scss
$_min-columns: 1;
```
*/
/*
---
name: $_max-columns
category:
  - core/variable
  - core/variable/media-query
---
The maximum number of columns

### scss
```scss
$_max-columns: 12;
```
*/
/*
---
name: $_sizes
category:
  - core/variable
  - core/variable/media-query
---
Hash of breakpoints

### scss
```scss
$_sizes: (
  'sm': 0,
  'md': (_px2rem(640px) / _px2rem($_base-font-size-px) * 1em),
  'lg': (_px2rem(1024px) / _px2rem($_base-font-size-px) * 1em)
);
```
*/
/*
---
name: _bounce-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce vertical

### scss
```scss
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-vertical(4px, .5s);
  }
}
```
*/
/*
---
name: _shake-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Shake vertical

### scss
```scss
.c-foo {
  @include _hover() {
    @include _shake-vertical();
  }
}
```
*/
/*
---
name: _vibrate-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate vertical

### scss
```scss
.c-foo {
  @include _hover() {
    @include _vibrate-vertical();
  }
}
```
*/
/*
---
name: _bounce-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce horizontal

### scss
```scss
//
// @param   length             $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-horizontal(4px, .5s);
  }
}
```
*/
/*
---
name: _shake-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Shake horizontal

### scss
```scss
.c-foo {
  @include _hover() {
    @include _shake-horizontal();
  }
}
```
*/
/*
---
name: _vibrate-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate horizontal

### scss
```scss
.c-foo {
  @include _hover() {
    @include _vibrate-horizontal();
  }
}
```
*/
/*
---
name: _bounce-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Bounce scale

### scss
```scss
//
// @param   float              $px        bounce size
// @param   second|milisecond  $delay: 0  animate time
//

.c-foo {
  @include _hover() {
    @include _bounce-scale(1.2, .5s);
  }
}
```
*/
/*
---
name: _shake-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Shake scale

### scss
```scss
.c-foo {
  @include _hover() {
    @include _shake-scale();
  }
}
```
*/
/*
---
name: _vibrate-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Vibrate scale

### scss
```scss
.c-foo {
  @include _hover() {
    @include _vibrate-scale();
  }
}
```
*/
/*
---
name: _extend-underline()
category:
  - core/mixin
  - core/mixin/animation
---
Extend the underline from the center.

* This mixin use the pseudo-elements.

### scss
```scss
.c-foo a {
  @include _hover() {
    &::after {
      @include _extend-underline();
    }
  }
}
```
*/
/*
---
name: _background-image-cover()
category:
  - core/mixin
  - core/mixin/background-image
---
Background image cover + centering

### scss
```scss
.c-foo {
  @include _background-image-cover();
  background-image: url(...);
}
```
*/
/*
---
name: _background-image-fixed()
category:
  - core/mixin
  - core/mixin/background-image
---
Background image fixed

### scss
```scss
.c-foo {
  @include _background-image-fixed();
  background-image: url(...);
}
```
*/
/*
---
name: _balloon-triangle()
category:
  - core/mixin
---
Generate balloon triangle

### scss
```scss
//
// @param  string  $position
// @param  length  $size              triangle size
// @param  hex     $background-color
// @param  length  $border-size
// @param  hex     $border-color
//

.c-foo {
  @include _balloon-triangle(top, 10px, #fff, 1px, #ccc);
  position: relative;
  background-color: #fff;
  border: 1px solid #ccc;
}
```
*/
/*
---
name: _balloon()
category:
  - core/mixin
---
Generate balloon

### scss
```scss
//
// @param  string  $angle   position of arrow
// @param  hash    $params  properties for decoration
//

.c-foo {
  @include _balloon(top, (
    background-color: #fff,
    border-color: #ccc,
    border-size: 1px,
    triangle-size: 10px,
  ));
}
```
*/
/*
---
name: _clearfix()
category:
  - core/mixin
---
Clearfix helper

### scss
```scss
.clerfix {
  @include _clearfix();
}
```

### html
```ejs
<div class="clearfix">
  <img style="float: right">
  ....
</div>
```
*/
/*
---
name: _content()
category:
  - core/mixin
---
Sets Child elements margin

### scss
```scss
//
// @param  int  $coefficient
//

.u-content {
  @include _content(1);
}
```

### html
```ejs
<div class="u-content">
  ...
</div>
```
*/
/*
---
name: _hover()
category:
  - core/mixin
---
Hover event helper

### scss
```scss
img {
  @include _hover() {
    opacity: .8;
  }
}
```
*/
/*
---
name: _form-control-base-padding()
category:
  - core/mixin
  - core/mixin/form
---
Sets padding for form controls

### scss
```scss
input[type="text"],
select {
  @include _form-control-base-padding();
}
```
*/
/*
---
name: $_form-control-border-color
category:
  - core/mixin
  - core/mixin/form
  - core/variable/form
---
Form Control border color

### scss
```scss
$_form-control-border-color: _light($_color-gray);
```
*/
/*
---
name: $_form-control-border-color-hover
category:
  - core/mixin
  - core/mixin/form
  - core/variable/form
---
Form Control border color when hover

### scss
```scss
$_form-control-border-color-hover: $_color-gray;
```
*/
/*
---
name: $_form-control-border-color-focus
category:
  - core/mixin
  - core/mixin/form
  - core/variable/form
---
Form Control border color when focus

### scss
```scss
$_form-control-border-color-focus: #85B7D9;
```
*/
/*
---
name: _form-control-base-border()
category:
  - core/mixin
  - core/mixin/form
---
Sets border for form controls

### scss
```scss
input[type="text"],
select {
  @include _form-control-base-border();
}
```
*/
/*
---
name: _ghost()
category:
  - core/mixin
---
### Ghost button helper

### scss
```scss
//
// @param  hash  $params
//   border-size  length
//   color        hex
//

.c-ghost-btn {
  @include _btn();
  @include _ghost((
    border-size: 1px,
    color: #fff,
  ));
  @include _padding(1, 2);
}
```

### html
```ejs
<a class="c-ghost-btn" role="button">btn</a>
```
*/
/*
---
name: _list-unstyled()
category:
  - core/mixin
  - core/mixin/list
---
Unstyled list

### scss
```scss
ul.u-unstyled-list {
  @include _list-unstyled();
}
```
*/
/*
---
name: _list-inline()
category:
  - core/mixin
  - core/mixin/list
---
Inline list

### scss
```scss
ul.u-inline-list {
  @include _list-inline();
}
```
*/
/*
---
name: _margin()
category:
  - core/mixin
  - core/mixin/margin
---
Sets margin

### scss
```scss
//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//

@include _margin(1);
@include _margin(1, 2);
@include _margin(1, 2, .5);
@include _margin(1, 2, .5, 2);
@include _margin(10px);
```
*/
/*
---
name: _margin-top()
category:
  - core/mixin
  - core/mixin/margin
---
Sets margin-top

### scss
```scss
//
// @param  int  $coefficient
//

@include _margin-top(1);
@include _margin-top(10px);
```
*/
/*
---
name: _margin-right()
category:
  - core/mixin
  - core/mixin/margin
---
Sets margin-right

### scss
```scss
//
// @param  int  $coefficient
//

@include _margin-right(1);
@include _margin-right(10px);
```
*/
/*
---
name: _margin-bottom()
category:
  - core/mixin
  - core/mixin/margin
---
Sets margin-bottom

### scss
```scss
//
// @param  int  $coefficient
//

@include _margin-bottom(1);
@include _margin-bottom(10px);
```
*/
/*
---
name: _margin-left()
category:
  - core/mixin
  - core/mixin/margin
---
Sets margin-left

### scss
```scss
//
// @param  int  $coefficient
//

@include _margin-left(1);
@include _margin-left(10px);
```
*/
/*
---
name: _overlay()
category:
  - core/mixin
---
Overlay helper

### scss
```scss
//
// @param  hex  $hex
// @param  int  $opacity
//

.c-foo {
  @include _overlay(#fff, .5);
}
```
*/
/*
---
name: _padding()
category:
  - core/mixin
  - core/mixin/padding
---
Sets padding

### scss
```scss
//
// @param  int  $coefficient-1
// @param  int  $coefficient-2
// @param  int  $coefficient-3
// @param  int  $coefficient-4
//

@include _padding(1);
@include _padding(1, 2);
@include _padding(1, 2, .5);
@include _padding(1, 2, .5, 2);
@include _padding(10px);
```
*/
/*
---
name: _padding-top()
category:
  - core/mixin
  - core/mixin/padding
---
Sets padding-top

### scss
```scss
//
// @param  int  $coefficient
//

@include _padding-top(1);
@include _padding-top(10px);
```
*/
/*
---
name: _padding-right()
category:
  - core/mixin
  - core/mixin/padding
---
Sets padding-right

### scss
```scss
//
// @param  int  $coefficient
//

@include _padding-right(1);
@include _padding-right(10px);
```
*/
/*
---
name: _padding-bottom()
category:
  - core/mixin
  - core/mixin/padding
---
Sets padding-bottom

### scss
```scss
//
// @param  int  $coefficient
//

@include _padding-bottom(1);
@include _padding-bottom(10px);
```
*/
/*
---
name: _padding-left()
category:
  - core/mixin
  - core/mixin/padding
---
Sets padding-left

### scss
```scss
//
// @param  int  $coefficient
//

@include _padding-left(1);
@include _padding-left(10px);
```
*/
/*
---
name: _position()
category:
  - core/mixin
---
The position shorthand

### scss
```scss
//
// @param  string  $position
// @param  length  $top
// @param  length  $right
// @param  length  $bottom
// @param  length  $left
// @param  int     $z-index
//

@include _position(absolute, 10px, null, null, 10px, 1);
```
*/
/*
---
name: _media-min()
category:
  - core/mixin
  - core/mixin/media-query
---
min-width media query

### scss
```scss
//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-min(md) {
    ...
  }
}
```
*/
/*
---
name: _media-max()
category:
  - core/mixin
  - core/mixin/media-query
---
max-width media query

### scss
```scss
//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-max(md) {
    ...
  }
}
```
*/
/*
---
name: _media-only()
category:
  - core/mixin
  - core/mixin/media-query
---
Specific size only media query

### scss
```scss
//
// @param  size|length  $size  width
//

.c-foo {
  @include _media-only(md) {
    ...
  }
}
```
*/
/*
---
name: _circle()
category:
  - core/mixin
  - core/mixin/shape
---
Create circle object

### scss
```scss
//
// @param  length  $size
//

.c-foo {
  @include _circle(30px);
}
```
*/
/*
---
name: _square()
category:
  - core/mixin
  - core/mixin/shape
---
Creating square

### scss
```scss
//
// @param  length  $size
// @param  length  $border-radius
//

.c-foo {
  @include _square(30px);
}
```
*/
/*
---
name: _triangle-top()
category:
  - core/mixin
  - core/mixin/shape
---
Generate top triangle style

### scss
```scss
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-top {
  @include _triangle-top(10px, 10px, #000);
}
```
*/
/*
---
name: _triangle-right()
category:
  - core/mixin
  - core/mixin/shape
---
```scss
//
// Generate right triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-right {
  _triangle-right(10px, 10px, #000);
}
```
*/
/*
---
name: _triangle-bottom()
category:
  - core/mixin
  - core/mixin/shape
---
```scss
//
// Generate bottom triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-bottom {
  @include _triangle-bottom(10px, 10px, #000);
}
```
*/
/*
---
name: _triangle-left()
category:
  - core/mixin
  - core/mixin/shape
---
```scss
//
// Generate left triangle style
//
// @param  length  $width
// @param  length  $height
// @param  hex     $color
//

.c-triangle-left {
  @include _triangle-left(10px, 10px, #000);
}
```
*/
/*
---
name: _transition()
category:
  - core/mixin
---
Transition helper

### scss
```scss
//
// @param  string  $property
//

a {
  @include _transition(all);
  color: #f00;

  @include _hover() {
    color: #f9c;
  }
}
```
*/
/*
---
name: _font-size()
category:
  - core/mixin
  - core/mixin/typography
---
Sets px and rem font-sizes

### scss
```scss
//
// @param  rem|px  $font-size
//

.c-foo {
  @include _font-size(12px);
}
```
*/
/*
---
name: _line-height()
category:
  - core/mixin
  - core/mixin/typography
---
Sets line-height for vertical rhythum

### scss
```scss
//
// @param  rem|px  $font-size  font size
//

.c-foo {
  @include _line-height(12px);
}
```
*/
/*
---
name: _font-size-line-height()
category:
  - core/mixin
  - core/mixin/typography
---
Sets px and rem font-sizes and line-height for vertical rhythum

### scss
```scss
//
// @param  rem|px  $font-size
//

.c-foo {
  @include _font-size-line-height(24px);
}
```
*/
/*
---
name: _hidden()
category:
  - core/mixin
  - core/mixin/visibility
---
Hidden helper

* This helper set "position" property.
* We recomment to use this helper on elements with no position specified.

### scss
```scss
.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}
```
*/
/*
---
name: _visible()
category:
  - core/mixin
  - core/mixin/visibility
---
Visible helper

* This helper set "position" property.
*  We recomment to use this helper on elements with no position specified.

### scss
```scss
.c-foo {
  @include _hidden();

  @include _media-min(md) {
      @include _visible();
  }
}
```
*/
/*
---
name: _alert()
category:
  - core/abstract
---
Abstract alert component

### scss
```scss
.c-alert {
  @include _alert();
  @include _padding(1);
  background-color: #4b9ad8;
  color: #fff;
}
```

### html
```ejs
<div class="c-alert" role="alert">
  ...
</div>
```
*/
/*
---
name: _top-balloon()
category:
  - core/abstract
  - core/abstract/balloon
---
Abstract top balloon component

### scss
```scss
//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-top-balloon {
  @include _top-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}
```

### html
```ejs
<div class="c-top-balloon">
  ...
</div>
```
*/
/*
---
name: _right-balloon()
category:
  - core/abstract
  - core/abstract/balloon
---
Abstract right balloon component

### scss
```scss
//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-right-balloon {
  @include _right-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}
```

### html
```ejs
<div class="c-right-balloon">
  ...
</div>
```
*/
/*
---
name: _bottom-balloon()
category:
  - core/abstract
  - core/abstract/balloon
---
Abstract bottom balloon component

### scss
```scss
//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-bottom-balloon {
  @include _bottom-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}
```

### html
```ejs
<div class="c-bottom-balloon">
  ...
</div>
```
*/
/*
---
name: _left-balloon()
category:
  - core/abstract
  - core/abstract/balloon
---
Abstract left balloon component

### scss
```scss
//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

.c-left-balloon {
  @include _left-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  @include _padding(1);
}
```

### html
```ejs
<div class="c-left-balloon">
  ...
</div>
```
*/
/*
---
name: _breadcrumbs()
category:
  - core/abstract
---
Abstract breadcrumbs component

### scss
```scss
.c-breadcrumbs {
  @include _breadcrumbs();
}
```

### html
```ejs
<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">...</a></li>
  <li class="c-breadcrumbs__item">...</li>
</ol>
```
*/
/*
---
name: _btn()
category:
  - core/abstract
---
Abstract button component

### scss
```scss
.c-btn {
  @include _btn();
  @include _padding(.5, 1);
  background-color: #fff;
  color: $_color-text;
}
```

## html
```ejs
<a class="c-btn" role="button">btn</a>
```
*/
/*
---
name: _card()
category:
  - core/abstract
compile: true
---
Abstract card component

### scss
```scss
.c-card {
  @include _card();
  background-color: #fff;

  &__body, &__action {
    @include _padding(.75);
  }
}
```

### html
```ejs
<div class="c-card">
  <div class="c-card__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
```
```ejs
<div class="c-card">
  <div class="c-card__figure" style="background-image: url('/basis/aigis_assets/images/dummy.jpg'); padding-top: 50%">
    <div style="position: absolute; left: 10px; bottom: 10px">...</div>
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
```
*/
/*
---
name: _checkbox()
category:
  - core/abstract
  - core/abstract/form
---
Abstract checkbox component

### scss
```scss
//
// @param  hash  $params
//   size           length
//   border-radius  length
//

.c-checkbox {
  @include _checkbox((
    size: $_base-font-size-px,
    border-radius: $_border-radius,
  ));
}
```

### html
```ejs
<label>
  <span class="c-checkbox">
    <input type="checkbox">
    <span class="c-checkbox__control"></span>
  </span>
  ...
</label>
```
*/
/*
---
name: $_container-margin
category:
  - core/abstract
  - core/abstract/container
  - core/variable/container
---
Container side margin

### scss
```scss
//
// @var  length
//

$_container-margin: $_base-line-height;
```
*/
/*
---
name: _fluid-container()
category:
  - core/abstract
  - core/abstract/container
---
Abstract fluid container component

### scss
```scss
.c-fluid-container {
  @include _fluid-container();
}
```

### html
```ejs
<div class="c-fluid-container">
  ...
</div>
```
*/
/*
---
name: $_container-max-width
category:
  - core/abstract
  - core/abstract/container
  - core/variable/container
---
Container max width

### scss
```scss
//
// @var  length
//

$_container-max-width: 1200px;
```
*/
/*
---
name: _container()
category:
  - core/abstract
  - core/abstract/container
---
Abstract container component

### scss
```scss
.c-container {
  @include _container();
}
```

### html
```ejs
<div class="c-container">
  ...
</div>
```
*/
/*
---
name: _drawer()
category:
  - core/abstract
---
Abstract drawer component

### scss
```scss
//
// @param  hash  $params
//   width      length
//   max-width  length
//

.c-drawer {
  @include _drawer((
    width: ($_base-line-height * 10),
    max-width: 80%,
  ));

  $item-padding-coefficient: 1;

  &__menu {
    @include _list-unstyled();
  }

  &__item, &__subitem {
    position: relative;
  }

  &__item {
    @include _padding(.5, $item-padding-coefficient, 0);
  }

  &__submenu {
    @include _list-unstyled();
    @include _margin(0, ($item-padding-coefficient * -1), 0, 0);
    padding-left: 1em;
  }

  &__subitem {
    @include _padding(.5, $item-padding-coefficient, 0, 0);
  }

  &__toggle {
    @include _position(absolute, _space(.5), 5px, 0);
    @include _square($_base-line-height);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
```

### js
```js
import BasisDrawer from 'node_modules/sass-basis/src/js/drawer.js';
new BasisDrawer({
  drawer : '.c-drawer',
  toggle : '.c-drawer__toggle',
  submenu: '.c-drawer__submenu'
});
```

### html
```ejs
<div style="min-height: 200px">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labeledby="hamburger-btn">
    <ul class="c-drawer__menu">
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item">
        <a href="#">menu</a>
        <div class="c-drawer__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-drawer__submenu" aria-hidden="true">
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div id="hamburger-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>
```
*/
/*
---
name: _entries()
category:
  - core/abstract
---
Abstract entries component

### scss
```scss
.c-entries {
  @include _entries();
  boder-top: 1px solid _light($_color-gray);

  &__item {
    @include _padding(1, 0);
    boder-bottom: 1px solid _light($_color-gray);
  }
}
```

### html
```ejs
<ul class="c-entries">
  <li class="c-entries__item">
    ...
  </li>
</ul>
```
*/
/*
---
name: _entry()
category:
  - core/abstract
---
Abstract entry component

### scss
```scss
.c-entry {
  @include _entry();

  &__header {
    @include _margin(0, 0, 1);
    @include _font-size-line-height($_base-font-size * 1.5);
  }

  &__content {
    @include _content();
  }
}
```

### html
```ejs
<article class="c-entry">
  <header class="c-entry__header">
    <h1 class="c-entry__title">...</h1>
    <div class="c-entry__content">
      ...
    </div>
  </header>
</article>
```
*/
/*
---
name: _flex-media()
category:
  - core/abstract
---
Abstract flexible media component

### scss
```scss
.c-flex-media {
  @include _flex-media();

  &__figure {
    @include _margin(0, 0, .5);
    width: 100%;

    @include _media-min(md) {
      @include _margin(0, 1, 0, 0);
      width: 150px;
    }
  }
}
```

### html
```ejs
<div class="c-flex-media">
  <div class="c-flex-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-flex-media__body">
    ...
  </div>
</div>
```
*/
/*
---
name: _form-control()
category:
  - core/abstract
  - core/abstract/form
---
Abstract form control component

### scss
```scss
.c-form-control {
  @include _form-control();
}
```

### html
```ejs
<input type="text" class="c-form-control">
```
*/
/*
---
name: _hamburger-btn()
category:
  - core/abstract
---
Abstract hamburger button component

### scss
```scss
.c-hamburger-btn {
  @include _hamburger-btn((
    height: 16px,
    width: 22px,
    bar-height: 2px,
    color: $_color-text,
  ));
}
```

### js
```js
import BasisHamburgerBtn from 'node_modules/sass-basis/src/js/hamburger-btn.js';
new BasisHamburgerBtn({
  btn: '.c-hamburger-btn'
});
```

### html
```ejs
<div id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>

<nav id="drawer" aria-labeledby="hamburger-btn">...</nav>
```
*/
/*
---
name: _hero()
category:
  - core/abstract
---
Abstract hero component

### scss
```scss
.c-hero {
  @include _hero();
  @include _padding(1);

  &__header {
    @include _margin(0, 0, 1);
  }

  &__footer {
    @include _margin(1, 0, 0);
  }
}
```

### html
```ejs
<div class="c-hero">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>
```
*/
/*
---
name: _ic()
category:
  - core/abstract
---
Abstract icon component

### scss
```scss
.c-ic-angle-right {
  @include _ic();

  &::before {
    content: "\e900";
  }
}
```

### html
```ejs
<span class="c-ic-angle-right" aria-hidden="true"></span>
```
*/
/*
---
name: _ib-row()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Abstract row component of inline-block based grid system

### scss
```scss
.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }

    &--offset-1-3 {
      @include _ib-row__col--offset(1, 3);
    }
  }
}
```

### html
```ejs
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _ib-row__col()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Abstract column element of inline-block based grid system

### scss
```scss
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();

    &--1-3 {
      @include _ib-row__col(1, 3);
    }
  }
}
```

### html
```ejs
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _ib-row__col--width()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Sets column width of inline-block based grid system

### scss
```scss
//
// @param  length  $width
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--width(auto);
  }
}
```
*/
/*
---
name: _ib-row__col--offset()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Sets column offset of inline-block based grid system

### scss
```scss
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _ib-row();

  &__col {
    @include _ib-row__col();
    @include _ib-row__col--offset(1, 3);
  }
}
```
*/
/*
---
name: _ib-row--margin()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Sets row margin of inline-block based grid system

### scss
```scss
//
// @param  int  $coefficient
//

.c-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}
```
*/
/*
---
name: _ib-row__col--margin()
category:
  - core/abstract
  - core/abstract/grid-system/inline-block
---
Sets column margin of inline-block based grid system

### scss
```scss
//
// @param  int  $coefficient
//

.c-row {
  @include _ib-row();
  @include _ib-row--margin(1);
}
```
*/
/*
---
name: _input-group()
category:
  - core/abstract
  - core/abstract/form
---
Abstract input group component

### scss
```scss
.c-input-group {
  @include _input-group();
}
```

### html
```ejs
<div class="c-input-group">
  <div class="c-input-group__addon">@</div>
  <div class="c-input-group__field">
    <input type="text">
  </div>
  <button class="c-input-group__btn">Go</button>
</div>
```
*/
/*
---
name: _media()
category:
  - core/abstract
---
Abstract media component

### scss
```scss
.c-media {
  @include _media();

  &__figure {
    @include _margin(0, 1, 0, 0);
  }
}
```

### html
```ejs
<div class="c-media">
  <div class="c-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>
```
*/
/*
---
name: _meta()
category:
  - core/abstract
---
Abstract meta component

### scss
```scss
.c-meta {
  @include _meta();
}
```

### html
```ejs
<ul class="c-meta">
  <li class="c-meta__item">
    ...
  </li>
</ul>
```
*/
/*
---
name: _navbar()
category:
  - core/abstract
---
Abstract navbar component

### scss
```scss
.c-navbar {
  @include _navbar();

  &__item > a {
    color: $_color-text;
    @include _padding(.5, 1);
  }
}
```

### js
```js
import BasisNavbar from 'node_modules/sass-basis/src/js/navbar.js';
new BasisNavbar({
  item   : '.c-navbar__item',
  submenu: '.c-navbar__submenu',
  subitem: '.c-navbar__subitem'
});
```

### html
```ejs
<ul class="c-navbar">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
</ul>
```
*/
/*
---
name: $_page-effect-z-index
category:
  - core/abstract
  - core/variable/page-effect
---
`z-index` of page effect

### scss
```scss
$_page-effect-z-index: 1000000;
```
*/
/*
---
name: _page-effect()
category:
  - core/abstract
---
Abstract page effect component

### scss
```scss
.c-page-effect {
  @include _page-effect((
    duration: .2s,
    background-color: #fff,
  ));
}
```

### js
```js
import BasisPageEffect from 'node_modules/sass-basis/src/js/page-effect.js';
new BasisPageEffect({
  pageEffect: '.c-page-effect',
  duration: 200
});
```

### html
```ejs
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>
```
*/
/*
---
name: _page-header()
category:
  - core/abstract
---
Abstract page header component

### scss
```scss
.c-page-header {
  @include _page-header();
  @include _padding(2, 0);

  &__title {
    @include _font-size-line-height($_base-font-size * 2);
  }
}
```

### html
```ejs
<div class="c-page-header">
  <h1 class="c-page-header__title">...</h1>
</div>
```
*/
/*
---
name: _pagination()
category:
  - core/abstract
---
Abstract pagination component

### scss
```scss
.c-pagination {
  @include _pagination();
  text-align: center;
  font-size: 0;

  &__item,
  &__item-link,
  &__item-ellipsis {
    margin: 0 3px;
    display: inline-flex;
    @include _square(30px);
    @include _font-size($_base-font-size-px - 2);
    align-items: center;
    justify-content: center;
  }
}
```

### html
```ejs
<div class="c-pagination">
  <span class="c-pagination__item" aria-current="page">1</span>
  <a class="c-pagination__item-link">2</a>
  <span class="c-pagination__item-ellipsis" aria-hidden="true">…</span>
  <a class="c-pagination__item-link">99</a>
  <a class="c-pagination__item-link">100</a>
</div>
```
*/
/*
---
name: _radio()
category:
  - core/abstract
  - core/abstract/form
---
Abstract radio button component

### scss
```scss
.c-radio {
  @include _radio((
    size: $_base-font-size-px,
  ));
}
```

### html
```ejs
<label>
  <span class="c-radio">
    <input type="radio">
    <span class="c-radio__control"></span>
  </span>
  ...
</label>
```
*/
/*
---
name: _row()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Abstract row component of flexbox based grid system

### scss
```scss
.c-row {
  @include _row();

  &__col {
    @include _row__col();

    &--1-3 {
      @include _row__col(1, 3);
    }

    &--offset-1-3 {
      @include _row__col--offset(1, 3);
    }
  }
}
```

### html
```ejs
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _row__col()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Abstract column element of flexbox based grid system

### scss
```scss
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();

    &--1-3 {
      @include _row__col(1, 3);
    }
  }
}
```

### html
```ejs
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _row__col--width()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Sets column width of flexbox based grid system

### scss
```scss
//
// @param  length  $width
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--width(auto);
  }
}
```
*/
/*
---
name: _row__col--offset()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Sets column offset of flexbox based grid system

### scss
```scss
//
// @param  int  $columns      molecule column size
// @param  int  $max-columns  denominator column size
//

.c-row {
  @include _row();

  &__col {
    @include _row__col();
    @include _row__col--offset(1, 3);
  }
}
```
*/
/*
---
name: _row--margin()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Sets row margin of flexbox based grid system

### scss
```scss
//
// @param  int  $coefficient
//

.c-row {
  @include _row();
  @include _row--margin(1);
}
```
*/
/*
---
name: _row__col--margin()
category:
  - core/abstract
  - core/abstract/grid-system/flexbox
---
Sets column margin of flexbox based grid system

### scss
```scss
//
// @param  int  $coefficient
//

.c-row {
  @include _row();
  @include _row--margin(1);
}
```
*/
/*
---
name: _section()
category:
  - core/abstract
---
Abstract section component

### scss
```scss
.c-section {
  @include _section();
  @include _padding(2, 0);

  &__title {
    @include _margin(0, 0, 2);
    @include _font-size-line-height($_base-font-size * 1.5);
    text-align: center;
  }

  &__content {
    @include _content();
  }
}
```

### html
```ejs
<section class="c-section">
  <div class="_c-container">
    <h2 class="c-section__title">...</h2>
    <div class="c-section__content">
      ...
    </div>
  </div>
</section>
```
*/
/*
---
name: _select()
category:
  - core/abstract
  - core/abstract/form
---
Abstract selectbox component

### scss
```scss
.c-select {
  @include _select();
}
```

### js
```js
import BasisSelect from 'node_modules/sass-basis/src/js/select.js';
new BasisSelect({
  select: '.c-select',
  label : '.c-select__label'
});
```

### html
```ejs
<span class="c-select c-select--block" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__label"></span>
</span>
```
*/
/*
---
name: _site-branding()
category:
  - core/abstract
---
Abstract site branding component

### scss
```scss
.c-site-branding {
  @include _site-branding();
}
```

### html
```ejs
<div class="c-site-branding">
  <h1 class="c-site-branding__title">...</h1>
</div>
```
*/
/*
---
name: _circle-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract circle spinner component

### scss
```scss
//
// @param  hash  $params
//   size         length
//   color        hex
//   border-size  length
//   delay        seconds
//   duration     seconds
//

.c-circle-spinner {
  @include _circle-spinner((
    size: 20px,
    color: _light($_color-gray),
    border-size: 3px,
    delay: 0s,
    duration: 2s,
  ));
}
```

### html
```ejs
<div class="c-circle-spinner"></div>
```
*/
/*
---
name: _dots-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract dots spinner component

### scss
```scss
//
// @param  hash  $params
//   size         length
//   color        hex
//   delay        seconds
//   duration     seconds
//   scale        int
//

.c-dots-spinner {
  @include _dots-spinner((
    size: 10px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
```

### html
```ejs
<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>
```
*/
/*
---
name: _pulse-spinner()
category:
  - core/abstract
  - core/abstract/spinner
---
Abstract pulse spinner component

### scss
```scss
//
// @param  hash  $params
//   height    length
//   width     length
//   color     hex
//   delay     seconds
//   duration  seconds
//   scale     int
//

.c-pulse-spinner {
  @include _pulse-spinner((
    height: 16px,
    width: 5px,
    color: $_color-gray,
    delay: 0s,
    duration: 2s,
    scale: 1.3,
  ));
}
```

### html
```ejs
<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>
```
*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html, body,
p, ol, ul, li, dl, dt, dd, table,
blockquote, figure, fieldset, legend, textarea, pre, iframe, hr,
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  color: #4c4c4c;
  font-family: YuGothic, "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, Meiryo, "M+ 1p", sans-serif;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media all and (-ms-high-contrast: none) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

code, kbd, pre, samp {
  font-size: 13px;
  font-size: 0.86667rem;
  line-height: 9.65385;
  font-family: '_', monospace;
}

input, textarea, keygen, select, button {
  font-family: YuGothic, "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, Meiryo, "M+ 1p", sans-serif;
}

input, textarea, optgroup, select, button {
  line-height: 8.5;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  letter-spacing: .1em;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}

h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 4rem;
  line-height: 1.3;
}

h3 {
  font-size: 3.6rem;
  line-height: 1.4;
}

h4 {
  line-height: 1.4;
}

h5 {
  line-height: 1.4;
}

h6 {
  line-height: 1.4;
}

ul, ol {
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

blockquote {
  border-left: 7.5px solid #eeeeee;
  margin-left: 0;
  padding: 15px 0 15px 15px;
}

blockquote :last-child {
  margin-bottom: 0;
}

blockquote footer {
  color: #444444;
  font-size: 90%;
}

code {
  background-color: #fad8d4;
  border-radius: 3px;
  color: #e74c3c;
  padding: 2px 4px;
}

pre {
  background-color: #f7f7f7;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 15px;
  overflow: auto;
}

pre code {
  background-color: transparent;
  border: none;
  color: #4c4c4c;
  font-size: 100%;
  padding: 0;
}

label {
  cursor: pointer;
}

/*
---
name: .c-alert
category:
  - object/component
  - object/component/alert
---
Alert component

### html
```html
<div class="c-alert" role="alert">
  ...
</div>
```
*/
.c-alert {
  display: block;
}

/*
---
name: .c-top-balloon
category:
  - object/component
  - object/component/balloon
  - object/component/balloon/top-balloon
---
Top balloon component

### html
```html
<div class="c-top-balloon">
  ...
</div>
```
*/
.c-top-balloon {
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
}

.c-top-balloon::before, .c-top-balloon::after {
  content: '';
  display: block;
  margin-left: -5px;
}

.c-top-balloon::before {
  position: absolute;
  top: -10px;
  left: 50%;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #cccccc transparent;
}

.c-top-balloon::after {
  position: absolute;
  top: -8px;
  left: 50%;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #fff transparent;
}

/*
---
name: .c-right-balloon
category:
  - object/component
  - object/component/balloon
  - object/component/balloon/right-balloon
---
Right balloon component

### html
```html
<div class="c-right-balloon">
  ...
</div>
```
*/
.c-right-balloon {
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
}

.c-right-balloon::before, .c-right-balloon::after {
  content: '';
  display: block;
  margin-top: -5px;
}

.c-right-balloon::before {
  position: absolute;
  top: 50%;
  right: -10px;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #cccccc;
}

.c-right-balloon::after {
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #fff;
}

/*
---
name: .c-bottom-balloon
category:
  - object/component
  - object/component/balloon
  - object/component/balloon/bottom-balloon
---
Bottom balloon component

### html
```html
<div class="c-bottom-balloon">
  ...
</div>
```
*/
.c-bottom-balloon {
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
}

.c-bottom-balloon::before, .c-bottom-balloon::after {
  content: '';
  display: block;
  margin-left: -5px;
}

.c-bottom-balloon::before {
  position: absolute;
  bottom: -10px;
  left: 50%;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: #cccccc transparent transparent transparent;
}

.c-bottom-balloon::after {
  position: absolute;
  bottom: -8px;
  left: 50%;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 10px 5px 0 5px;
  border-color: #fff transparent transparent transparent;
}

/*
---
name: .c-left-balloon
category:
  - object/component
  - object/component/balloon
  - object/component/balloon/left-balloon
---
Left balloon component

### html
```html
<div class="c-left-balloon">
  ...
</div>
```
*/
.c-left-balloon {
  position: relative;
  background-color: #fff;
  border: 1px solid #cccccc;
}

.c-left-balloon::before, .c-left-balloon::after {
  content: '';
  display: block;
  margin-top: -5px;
}

.c-left-balloon::before {
  position: absolute;
  top: 50%;
  left: -10px;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  border-color: transparent #cccccc transparent transparent;
}

.c-left-balloon::after {
  position: absolute;
  top: 50%;
  left: -8px;
  height: 0;
  width: 0;
  border-style: solid;
  border-width: 5px 10px 5px 0;
  border-color: transparent #fff transparent transparent;
}

/*
---
name: .c-breadcrumbs
category:
  - object/component
  - object/component/breadcrumbs
---
Breadcrumbs component

### html
```html
<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">...</a></li>
  <li class="c-breadcrumbs__item">...</li>
</ol>
```
*/
.c-breadcrumbs {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.c-breadcrumbs__item {
  display: inline;
}

.c-breadcrumbs__item:nth-child(n + 2)::before {
  margin: 0 5px;
  font-family: 'basis';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e900";
}

/*
---
name: .c-btn
category:
  - object/component
  - object/component/btn
---
Button component

### html
```html
<a class="c-btn" role="button">btn</a>
```
```html
<a class="c-btn c-btn--block" role="button">btn</a>
```
```html
<a class="c-btn c-btn--ghost" role="button">btn</a>
```
*/
.c-btn {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.c-btn--block {
  display: block;
  width: 100%;
}

.c-btn--ghost {
  background-color: transparent !important;
  border: 1px solid #fff;
  color: #fff;
}

/*
---
name: .c-card
category:
  - object/component
  - object/component/card
---
Card component

### html
```html
<div class="c-card">
  <div class="c-card__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
```
```html
<div class="c-card">
  <div class="c-card__figure" style="background-image: url('/basis/aigis_assets/images/dummy.jpg'); padding-top: 50%">
    <div style="position: absolute; left: 10px; bottom: 10px">...</div>
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
```
*/
.c-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.05);
}

.c-card__figure {
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.c-card__figure > img {
  vertical-align: top;
  width: 100%;
}

.c-card__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

.c-card__action {
  border-top: 1px solid #eeeeee;
}

/*
---
name: .c-checkbox
category:
  - object/component
  - object/component/checkbox
---
Checkbox component

### html
```html
<label>
  <span class="c-checkbox">
    <input type="checkbox">
    <span class="c-checkbox__control"></span>
  </span>
  ...
</label>
```
*/
.c-checkbox {
  position: relative;
  display: inline-block;
  height: 15px;
  width: 15px;
}

.c-checkbox > [type="checkbox"], .c-checkbox__control, .c-checkbox__control::before, .c-checkbox__control::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 15px;
  width: 15px;
}

.c-checkbox > [type="checkbox"] {
  z-index: 1;
  cursor: pointer;
  opacity: 0 !important;
  outline: 0;
}

.c-checkbox > [type="checkbox"]:checked ~ .c-checkbox__control::after {
  opacity: 1;
}

.c-checkbox__control {
  z-index: 0;
}

.c-checkbox__control::before {
  content: '';
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
}

.c-checkbox__control::after {
  font-family: 'basis';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e901";
  opacity: 0;
  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;
}

/*
---
name: .c-fluid-container
category:
  - object/component
  - object/component/container/fluid-container
---
Fluid container component

### html
```html
<div class="c-fluid-container">
  ...
</div>
```
*/
.c-fluid-container {
  padding-right: 11.25px;
  padding-left: 11.25px;
}

@media (min-width: 40rem) {
  .c-fluid-container {
    padding-right: 22.5px;
    padding-left: 22.5px;
  }
}

/*
---
name: .c-container
category:
  - object/component
  - object/component/container
  - object/component/container/container
---
Container component

### html
```html
<div class="c-container">
  ...
</div>
```
*/
.c-container {
  padding-right: 11.25px;
  padding-left: 11.25px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 40rem) {
  .c-container {
    padding-right: 22.5px;
    padding-left: 22.5px;
  }
}

@media (min-width: 64rem) {
  .c-container {
    max-width: 73.06667rem;
  }
}

/*
---
name: .c-copyright
category:
  - object/component
  - object/component/copyright
---
Copyright component

### html
```html
<div class="c-copyright">
  ...
</div>
```
*/
/*
---
name: .c-drawer
category:
  - object/component
  - object/component/drawer
---
Drawer component

### html
```html
<div style="min-height: 200px; position: relative">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labeledby="hamburger-btn">
    <ul class="c-drawer__menu">
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item"><a href="#">menu</a></li>
      <li class="c-drawer__item">
        <a href="#">menu</a>
        <div class="c-drawer__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-drawer__submenu" aria-hidden="true">
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div id="hamburger-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>
```
*/
.c-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  z-index: 10;
  -webkit-transition: left 0.1s ease-out;
  transition: left 0.1s ease-out;
  width: 225px;
  max-width: 80%;
  overflow-y: auto;
}

.c-drawer[aria-hidden="false"] {
  left: 0;
}

.c-drawer__submenu {
  height: 0;
  overflow: hidden;
}

.c-drawer__submenu[aria-hidden="false"] {
  height: auto;
  overflow: visible;
}

.c-drawer__item > a, .c-drawer__subitem > a {
  display: block;
  text-decoration: none;
}

.c-drawer__toggle {
  cursor: pointer;
}

.c-drawer__menu {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.c-drawer__item, .c-drawer__subitem {
  position: relative;
}

.c-drawer__item {
  padding: 11.25px 22.5px 0;
}

.c-drawer__submenu {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  margin: 0 -22.5px 0 0;
  padding-left: 1em;
}

.c-drawer__subitem {
  padding: 11.25px 22.5px 0 0;
}

.c-drawer__toggle {
  position: absolute;
  top: 11.25px;
  right: 5px;
  bottom: 0;
  height: 22.5px;
  width: 22.5px;
  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;
}

.c-drawer--fixed {
  position: fixed;
}

/*
---
name: .c-entries
category:
  - object/component
  - object/component/entries
---
Entries component

### html
```html
<ul class="c-entries">
  <li class="c-entries__item">
    ...
  </li>
</ul>
```
*/
.c-entries {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

/*
---
name: .c-entry
category:
  - object/component
  - object/component/entry
---
Entry component

### html
```html
<article class="c-entry">
  <header class="c-entry__header">
    <h1 class="c-entry__title">...</h1>
    <div class="c-entry__content">
      ...
    </div>
  </header>
</article>
```
*/
.c-entry__title {
  margin-top: 0;
}

/*
---
name: .c-flex-media
category:
  - object/component
  - object/component/flex-media
---
Flexible media component

### html
```html
<div class="c-flex-media">
  <div class="c-flex-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-flex-media__body">
    ...
  </div>
</div>
```
```html
<div class="c-flex-media c-flex-media--reverse">
  <div class="c-flex-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-flex-media__body">
    ...
  </div>
</div>
```
*/
@media (min-width: 40rem) {
  .c-flex-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

.c-flex-media__figure {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.c-flex-media__figure > img {
  width: 100%;
}

@media (min-width: 40rem) {
  .c-flex-media__figure > * {
    vertical-align: top;
    margin-top: 3.75px;
  }
}

.c-flex-media__body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

@media (min-width: 40rem) {
  .c-flex-media--reverse .c-flex-media__figure {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}

/*
---
name: .c-form-control
category:
  - object/component
  - object/component/form-control
---
Form control component

### html
```html
<input type="text" class="c-form-control">
```
```html
<textarea class="c-form-control"></textarea>
```
```html
<input type="text" class="c-form-control" disabled>
```
```html
<input type="text" class="c-form-control" readonly>
```
*/
.c-form-control {
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: 0;
  -webkit-transition: border 0.1s ease-out;
  transition: border 0.1s ease-out;
  padding: 5.625px 11.25px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
}

.c-form-control:hover {
  border-color: #999;
}

.c-form-control:active, .c-form-control:focus, .c-form-control[aria-selected="true"] {
  border-color: #85b7d9;
}

textarea.c-form-control {
  height: auto;
  width: 100%;
}

.c-form-control[disabled] {
  background-color: #eeeeee;
  cursor: not-allowed;
}

.c-form-control[readonly] {
  background-color: #eeeeee;
}

/*
---
name: .c-hamburger-btn
category:
  - object/component
  - object/component/hamburger-btn
---
Hamburger button component

### html
```html
<div id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
</div>

<nav id="drawer" aria-labeledby="hamburger-btn">...</nav>
```
*/
.c-hamburger-btn {
  position: relative;
  display: inline-block;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  height: 16px;
  width: 22px;
}

.c-hamburger-btn__bar {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
  background-color: #4c4c4c;
  height: 2px;
  -webkit-transition: -webkit-transform 0.1s ease-out;
  transition: -webkit-transform 0.1s ease-out;
  transition: transform 0.1s ease-out;
  transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}

.c-hamburger-btn__bar:nth-child(1) {
  top: 0;
}

.c-hamburger-btn__bar:nth-child(2) {
  top: 7px;
}

.c-hamburger-btn__bar:nth-child(3) {
  top: 14px;
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bar:nth-child(1), .c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bar:nth-child(3) {
  top: 7px;
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bar:nth-child(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bar:nth-child(2) {
  background-color: transparent;
}

.c-hamburger-btn[aria-expanded="true"] > .c-hamburger-btn__bar:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*
---
name: .c-hero
category:
  - object/component
  - object/component/hero
---
Hero component

### html
```html
<div class="c-hero" style="background-image: url(/basis/aigis_assets/images/dummy.jpg)">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>
```
*/
.c-hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  position: relative;
}

.c-hero__header {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 100%;
  position: relative;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.c-hero__content {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 100%;
  position: relative;
  -ms-flex-item-align: center;
  align-self: center;
}

.c-hero__footer {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 100%;
  position: relative;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.c-hero--full {
  height: 100vh;
}

.c-hero--cover {
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.c-hero--overlay {
  position: relative;
}

.c-hero--overlay::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background-color: rgba(0, 0, 0, 0.7);
}

@media (min-width: 64rem) {
  .c-hero--fixed {
    background-attachment: fixed;
  }
}

[class^="c-ic-"],
[class*=" c-ic-"] {
  font-family: 'basis';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*
---
name: .c-ic-angle-right
category:
  - object/component
  - object/component/icon
  - object/component/icon/ic-angle-right
---
Icon (Angle Right) component

### html
```html
<span class="c-ic-angle-right" aria-hidden="true"></span>
```
*/
.c-ic-angle-right::before {
  content: "\e900";
}

/*
---
name: .c-ic-check
category:
  - object/component
  - object/component/icon
  - object/component/icon/ic-check
---
Icon (Check) component

### html
```html
<span class="c-ic-check" aria-hidden="true"></span>
```
*/
.c-ic-check::before {
  content: "\e901";
}

/*
---
name: .c-ic-angle-down
category:
  - object/component
  - object/component/icon
  - object/component/icon/ic-angle-down
---
Icon (Angle Down) component

### html
```html
<span class="c-ic-angle-down" aria-hidden="true"></span>
```
*/
.c-ic-angle-down::before {
  content: "\e902";
}

/*
---
name: .c-input-group
category:
  - object/component
  - object/component/input-group
---
Input group component

### html
```html
<div class="c-input-group">
  <div class="c-input-group__addon">@</div>
  <div class="c-input-group__field">
    <input type="text">
  </div>
  <button class="c-input-group__btn">Go</button>
</div>
```
*/
.c-input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  border-radius: 3px;
}

.c-input-group > :first-child {
  position: relative;
  border-radius: 3px 0 0 3px;
  border-right: none;
}

.c-input-group > :nth-last-child(2) {
  position: relative;
  z-index: 1;
}

.c-input-group > :last-child {
  position: relative;
  z-index: 0;
  left: -1px;
  border-radius: 0 3px 3px 0;
}

.c-input-group > :last-child:hover, .c-input-group > :last-child:active, .c-input-group > :last-child:focus {
  z-index: 1;
}

.c-input-group__addon {
  border: 1px solid #cccccc;
  padding: 5.625px 11.25px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.c-input-group__field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c-input-group__field > input[type='email'],
.c-input-group__field > input[type='number'],
.c-input-group__field > input[type='password'],
.c-input-group__field > input[type='search'],
.c-input-group__field > input[type='tel'],
.c-input-group__field > input[type='text'],
.c-input-group__field > input[type='url'] {
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: 0;
  -webkit-transition: border 0.1s ease-out;
  transition: border 0.1s ease-out;
  padding: 5.625px 11.25px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.035);
  border-radius: 0;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

.c-input-group__field > input[type='email']:hover,
.c-input-group__field > input[type='number']:hover,
.c-input-group__field > input[type='password']:hover,
.c-input-group__field > input[type='search']:hover,
.c-input-group__field > input[type='tel']:hover,
.c-input-group__field > input[type='text']:hover,
.c-input-group__field > input[type='url']:hover {
  border-color: #999;
}

.c-input-group__field > input[type='email']:active, .c-input-group__field > input[type='email']:focus, .c-input-group__field > input[type='email'][aria-selected="true"],
.c-input-group__field > input[type='number']:active,
.c-input-group__field > input[type='number']:focus,
.c-input-group__field > input[type='number'][aria-selected="true"],
.c-input-group__field > input[type='password']:active,
.c-input-group__field > input[type='password']:focus,
.c-input-group__field > input[type='password'][aria-selected="true"],
.c-input-group__field > input[type='search']:active,
.c-input-group__field > input[type='search']:focus,
.c-input-group__field > input[type='search'][aria-selected="true"],
.c-input-group__field > input[type='tel']:active,
.c-input-group__field > input[type='tel']:focus,
.c-input-group__field > input[type='tel'][aria-selected="true"],
.c-input-group__field > input[type='text']:active,
.c-input-group__field > input[type='text']:focus,
.c-input-group__field > input[type='text'][aria-selected="true"],
.c-input-group__field > input[type='url']:active,
.c-input-group__field > input[type='url']:focus,
.c-input-group__field > input[type='url'][aria-selected="true"] {
  border-color: #85b7d9;
}

textarea.c-input-group__field > input[type='email'], .c-input-group__field > input[type='number'], .c-input-group__field > input[type='password'], .c-input-group__field > input[type='search'], .c-input-group__field > input[type='tel'], .c-input-group__field > input[type='text'], .c-input-group__field > input[type='url'] {
  height: auto;
  width: 100%;
}

.c-input-group__btn {
  display: inline-block;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: 0;
  -webkit-transition: border 0.1s ease-out;
  transition: border 0.1s ease-out;
  padding: 5.625px 11.25px;
  color: #4c4c4c;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  overflow: visible;
}

.c-input-group__btn:hover {
  border-color: #999;
}

.c-input-group__btn:active, .c-input-group__btn:focus, .c-input-group__btn[aria-selected="true"] {
  border-color: #85b7d9;
}

/*
---
name: .c-media
category:
  - object/component
  - object/component/media
---
Media component

### html
```html
<div class="c-media">
  <div class="c-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>
```
*/
.c-media {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-media__figure {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.c-media__figure > * {
  vertical-align: top;
  margin-top: 3.75px;
}

.c-media__body {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.c-media--middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-media--reverse .c-media__figure {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

/*
---
name: .c-meta
category:
  - object/component
  - object/component/meta
---
Meta component

### html
```html
<ul class="c-meta">
  <li class="c-meta__item">
    ...
  </li>
</ul>
```
*/
.c-meta {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.c-meta__item {
  display: inline;
}

/*
---
name: .c-navbar
category:
  - object/component
  - object/component/navbar
---
Navbar component

### html
```html
<ul class="c-navbar">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
</ul>
```
```html
<ul class="c-navbar c-navbar--left">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
</ul>
```
```html
<ul class="c-navbar c-navbar--right">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
</ul>
```
*/
.c-navbar {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.c-navbar__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.c-navbar__item > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.c-navbar__item > .c-navbar__submenu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
}

.c-navbar__subitem {
  position: relative;
}

.c-navbar__subitem > a {
  display: block;
  text-decoration: none;
}

.c-navbar__subitem > .c-navbar__submenu {
  position: absolute;
  top: 0;
  left: 100%;
}

.c-navbar__submenu {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
}

.c-navbar__submenu[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}

.c-navbar--left .c-navbar__item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.c-navbar--right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.c-navbar--right .c-navbar__item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

.c-navbar--right .c-navbar__item > .c-navbar__submenu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
}

.c-navbar--right .c-navbar__subitem > .c-navbar__submenu {
  position: absolute;
  top: 0;
  right: 100%;
  left: auto;
}

/*
---
name: .c-page-effect
category:
  - object/component
  - object/component/page-effect
---
Page effect component

### html
```ejs
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>
```
*/
.c-page-effect {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000000;
  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;
  background-color: #fff;
}

.c-page-effect[data-page-effect="fadein"][aria-hidden="true"] {
  opacity: 0;
  z-index: -1;
  -webkit-animation: _page_effect_fadein_0_2s___fff 0.4s ease-in 0s;
  animation: _page_effect_fadein_0_2s___fff 0.4s ease-in 0s;
}

.c-page-effect[data-page-effect="fadeout"][aria-hidden="false"] {
  opacity: 1;
  z-index: 1000000;
  -webkit-animation: _page_effect_fadeout_0_2s___fff 0.2s ease-in 0s;
  animation: _page_effect_fadeout_0_2s___fff 0.2s ease-in 0s;
}

@-webkit-keyframes _page_effect_fadein_0_2s___fff {
  0% {
    z-index: 1000000;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes _page_effect_fadein_0_2s___fff {
  0% {
    z-index: 1000000;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes _page_effect_fadeout_0_2s___fff {
  0% {
    z-index: 1000000;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes _page_effect_fadeout_0_2s___fff {
  0% {
    z-index: 1000000;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.c-page-effect__item {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

/*
---
name: .c-page-header
category:
  - object/component
  - object/component/page-header
---
Page header component

### html
```html
<header class="c-page-header">
  <h1 class="c-page-header__title">...</h1>
</header>
```
*/
.c-page-header__title {
  margin: 0;
}

/*
---
name: .c-pagination
category:
  - object/component
  - object/component/paginatiion
---
Paginatiion component

### html
```html
<div class="c-pagination">
  <span class="c-pagination__item" aria-current="page">1</span>
  <a class="c-pagination__item-link">2</a>
  <span class="c-pagination__item-ellipsis" aria-hidden="true">…</span>
  <a class="c-pagination__item-link">99</a>
  <a class="c-pagination__item-link">100</a>
</div>
```
*/
.c-pagination__item, .c-pagination__item-link, .c-pagination__item-ellipsis {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
}

/*
---
name: .c-radio
category:
  - object/component
  - object/component/radio
---
Radio button component

### html
```html
<label>
  <span class="c-radio">
    <input type="radio">
    <span class="c-radio__control"></span>
  </span>
  ...
</label>
```
*/
.c-radio {
  position: relative;
  display: inline-block;
  height: 15px;
  width: 15px;
}

.c-radio > [type="radio"], .c-radio__control, .c-radio__control::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 15px;
  width: 15px;
  border-radius: 100%;
}

.c-radio > [type="radio"] {
  z-index: 1;
  cursor: pointer;
  opacity: 0 !important;
  outline: 0;
}

.c-radio > [type="radio"]:checked ~ .c-radio__control::after {
  opacity: 1;
}

.c-radio__control {
  z-index: 0;
}

.c-radio__control::before {
  content: '';
  background-color: #fff;
  border: 1px solid #cccccc;
}

.c-radio__control::after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  content: '';
  display: block;
  background-color: #4c4c4c;
  height: 7.5px;
  width: 7.5px;
  border-radius: 100%;
  opacity: 0;
}

/*
---
name: .c-row
category:
  - object/component
  - object/component/grid-system
---
Row component of flexbox based grid system

### html
```html
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
```
```html
<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
```
```html
<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--auto">
    1
  </div>
  <div class="c-row__col c-row__col--auto">
    22
  </div>
  <div class="c-row__col c-row__col--auto">
    333
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--justify">
    1
  </div>
  <div class="c-row__col c-row__col--justify">
    22
  </div>
  <div class="c-row__col c-row__col--justify">
    333
  </div>
</div>
```
```html
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--fit">
    1
  </div>
  <div class="c-row__col c-row__col--fit">
    22
  </div>
  <div class="c-row__col c-row__col--fit">
    333
  </div>
</div>
```
*/
.c-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.c-row__col {
  max-width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.c-row--reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.c-row--nowrap {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.c-row--left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.c-row--right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

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

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

.c-row--around {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.c-row--top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.c-row--bottom {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.c-row--middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-row--baseline {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.c-row--collapse {
  margin-right: 0;
  margin-left: 0;
  margin-bottom: 0;
}

.c-row--collapse > .c-row__col {
  padding-right: 0;
  padding-left: 0;
  margin-bottom: 0;
}

.c-row--margin {
  margin-right: -11.25px;
  margin-left: -11.25px;
  margin-bottom: -22.5px;
}

.c-row--margin > .c-row__col {
  padding-right: 11.25px;
  padding-left: 11.25px;
  margin-bottom: 22.5px;
}

.c-row--margin-s {
  margin-right: -5.625px;
  margin-left: -5.625px;
  margin-bottom: -11.25px;
}

.c-row--margin-s > .c-row__col {
  padding-right: 5.625px;
  padding-left: 5.625px;
  margin-bottom: 11.25px;
}

.c-row--margin-l {
  margin-right: -22.5px;
  margin-left: -22.5px;
  margin-bottom: -45px;
}

.c-row--margin-l > .c-row__col {
  padding-right: 22.5px;
  padding-left: 22.5px;
  margin-bottom: 45px;
}

.c-row--fill > .c-row__col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.c-row--fill > .c-row__col > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  max-width: 100%;
}

@media (min-width: 40rem) {
  .c-row--md-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .c-row--md-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .c-row--md-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .c-row--md-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .c-row--md-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .c-row--md-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .c-row--md-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .c-row--md-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .c-row--md-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .c-row--md-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }
  .c-row--md-collapse {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }
  .c-row--md-collapse > .c-row__col {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
  }
  .c-row--md-margin {
    margin-right: -11.25px;
    margin-left: -11.25px;
    margin-bottom: -22.5px;
  }
  .c-row--md-margin > .c-row__col {
    padding-right: 11.25px;
    padding-left: 11.25px;
    margin-bottom: 22.5px;
  }
  .c-row--md-margin-s {
    margin-right: -5.625px;
    margin-left: -5.625px;
    margin-bottom: -11.25px;
  }
  .c-row--md-margin-s > .c-row__col {
    padding-right: 5.625px;
    padding-left: 5.625px;
    margin-bottom: 11.25px;
  }
  .c-row--md-margin-l {
    margin-right: -22.5px;
    margin-left: -22.5px;
    margin-bottom: -45px;
  }
  .c-row--md-margin-l > .c-row__col {
    padding-right: 22.5px;
    padding-left: 22.5px;
    margin-bottom: 45px;
  }
  .c-row--md-fill > .c-row__col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .c-row--md-fill > .c-row__col > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
  }
}

@media (min-width: 64rem) {
  .c-row--lg-nowrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .c-row--lg-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  .c-row--lg-right {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .c-row--lg-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .c-row--lg-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .c-row--lg-around {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  .c-row--lg-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  .c-row--lg-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .c-row--lg-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .c-row--lg-baseline {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }
  .c-row--lg-collapse {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }
  .c-row--lg-collapse > .c-row__col {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 0;
  }
  .c-row--lg-margin {
    margin-right: -11.25px;
    margin-left: -11.25px;
    margin-bottom: -22.5px;
  }
  .c-row--lg-margin > .c-row__col {
    padding-right: 11.25px;
    padding-left: 11.25px;
    margin-bottom: 22.5px;
  }
  .c-row--lg-margin-s {
    margin-right: -5.625px;
    margin-left: -5.625px;
    margin-bottom: -11.25px;
  }
  .c-row--lg-margin-s > .c-row__col {
    padding-right: 5.625px;
    padding-left: 5.625px;
    margin-bottom: 11.25px;
  }
  .c-row--lg-margin-l {
    margin-right: -22.5px;
    margin-left: -22.5px;
    margin-bottom: -45px;
  }
  .c-row--lg-margin-l > .c-row__col {
    padding-right: 22.5px;
    padding-left: 22.5px;
    margin-bottom: 45px;
  }
  .c-row--lg-fill > .c-row__col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .c-row--lg-fill > .c-row__col > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
  }
}

.c-row__col--1-2, .c-row__col--2-4, .c-row__col--3-6, .c-row__col--4-8, .c-row__col--5-10, .c-row__col--6-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 50%;
  flex: 0 1 50%;
  max-width: 50%;
}

.c-row__col--offset-1-2, .c-row__col--offset-2-4, .c-row__col--offset-3-6, .c-row__col--offset-4-8, .c-row__col--offset-5-10, .c-row__col--offset-6-12 {
  margin-left: 50%;
}

.c-row__col--1-3, .c-row__col--2-6, .c-row__col--3-9, .c-row__col--4-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 33.33333%;
  flex: 0 1 33.33333%;
  max-width: 33.33333%;
}

.c-row__col--offset-1-3, .c-row__col--offset-2-6, .c-row__col--offset-3-9, .c-row__col--offset-4-12 {
  margin-left: 33.33333%;
}

.c-row__col--2-3, .c-row__col--4-6, .c-row__col--6-9, .c-row__col--8-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 66.66667%;
  flex: 0 1 66.66667%;
  max-width: 66.66667%;
}

.c-row__col--offset-2-3, .c-row__col--offset-4-6, .c-row__col--offset-6-9, .c-row__col--offset-8-12 {
  margin-left: 66.66667%;
}

.c-row__col--1-4, .c-row__col--2-8, .c-row__col--3-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 25%;
  flex: 0 1 25%;
  max-width: 25%;
}

.c-row__col--offset-1-4, .c-row__col--offset-2-8, .c-row__col--offset-3-12 {
  margin-left: 25%;
}

.c-row__col--3-4, .c-row__col--6-8, .c-row__col--9-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 75%;
  flex: 0 1 75%;
  max-width: 75%;
}

.c-row__col--offset-3-4, .c-row__col--offset-6-8, .c-row__col--offset-9-12 {
  margin-left: 75%;
}

.c-row__col--1-5, .c-row__col--2-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 20%;
  flex: 0 1 20%;
  max-width: 20%;
}

.c-row__col--offset-1-5, .c-row__col--offset-2-10 {
  margin-left: 20%;
}

.c-row__col--2-5, .c-row__col--4-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 40%;
  flex: 0 1 40%;
  max-width: 40%;
}

.c-row__col--offset-2-5, .c-row__col--offset-4-10 {
  margin-left: 40%;
}

.c-row__col--3-5, .c-row__col--6-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 60%;
  flex: 0 1 60%;
  max-width: 60%;
}

.c-row__col--offset-3-5, .c-row__col--offset-6-10 {
  margin-left: 60%;
}

.c-row__col--4-5, .c-row__col--8-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 80%;
  flex: 0 1 80%;
  max-width: 80%;
}

.c-row__col--offset-4-5, .c-row__col--offset-8-10 {
  margin-left: 80%;
}

.c-row__col--1-6, .c-row__col--2-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 16.66667%;
  flex: 0 1 16.66667%;
  max-width: 16.66667%;
}

.c-row__col--offset-1-6, .c-row__col--offset-2-12 {
  margin-left: 16.66667%;
}

.c-row__col--5-6, .c-row__col--10-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 83.33333%;
  flex: 0 1 83.33333%;
  max-width: 83.33333%;
}

.c-row__col--offset-5-6, .c-row__col--offset-10-12 {
  margin-left: 83.33333%;
}

.c-row__col--1-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 14.28571%;
  flex: 0 1 14.28571%;
  max-width: 14.28571%;
}

.c-row__col--offset-1-7 {
  margin-left: 14.28571%;
}

.c-row__col--2-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 28.57143%;
  flex: 0 1 28.57143%;
  max-width: 28.57143%;
}

.c-row__col--offset-2-7 {
  margin-left: 28.57143%;
}

.c-row__col--3-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 42.85714%;
  flex: 0 1 42.85714%;
  max-width: 42.85714%;
}

.c-row__col--offset-3-7 {
  margin-left: 42.85714%;
}

.c-row__col--4-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 57.14286%;
  flex: 0 1 57.14286%;
  max-width: 57.14286%;
}

.c-row__col--offset-4-7 {
  margin-left: 57.14286%;
}

.c-row__col--5-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 71.42857%;
  flex: 0 1 71.42857%;
  max-width: 71.42857%;
}

.c-row__col--offset-5-7 {
  margin-left: 71.42857%;
}

.c-row__col--6-7 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 85.71429%;
  flex: 0 1 85.71429%;
  max-width: 85.71429%;
}

.c-row__col--offset-6-7 {
  margin-left: 85.71429%;
}

.c-row__col--1-8 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 12.5%;
  flex: 0 1 12.5%;
  max-width: 12.5%;
}

.c-row__col--offset-1-8 {
  margin-left: 12.5%;
}

.c-row__col--3-8 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 37.5%;
  flex: 0 1 37.5%;
  max-width: 37.5%;
}

.c-row__col--offset-3-8 {
  margin-left: 37.5%;
}

.c-row__col--5-8 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 62.5%;
  flex: 0 1 62.5%;
  max-width: 62.5%;
}

.c-row__col--offset-5-8 {
  margin-left: 62.5%;
}

.c-row__col--7-8 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 87.5%;
  flex: 0 1 87.5%;
  max-width: 87.5%;
}

.c-row__col--offset-7-8 {
  margin-left: 87.5%;
}

.c-row__col--1-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 11.11111%;
  flex: 0 1 11.11111%;
  max-width: 11.11111%;
}

.c-row__col--offset-1-9 {
  margin-left: 11.11111%;
}

.c-row__col--2-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 22.22222%;
  flex: 0 1 22.22222%;
  max-width: 22.22222%;
}

.c-row__col--offset-2-9 {
  margin-left: 22.22222%;
}

.c-row__col--4-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 44.44444%;
  flex: 0 1 44.44444%;
  max-width: 44.44444%;
}

.c-row__col--offset-4-9 {
  margin-left: 44.44444%;
}

.c-row__col--5-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 55.55556%;
  flex: 0 1 55.55556%;
  max-width: 55.55556%;
}

.c-row__col--offset-5-9 {
  margin-left: 55.55556%;
}

.c-row__col--7-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 77.77778%;
  flex: 0 1 77.77778%;
  max-width: 77.77778%;
}

.c-row__col--offset-7-9 {
  margin-left: 77.77778%;
}

.c-row__col--8-9 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 88.88889%;
  flex: 0 1 88.88889%;
  max-width: 88.88889%;
}

.c-row__col--offset-8-9 {
  margin-left: 88.88889%;
}

.c-row__col--1-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 10%;
  flex: 0 1 10%;
  max-width: 10%;
}

.c-row__col--offset-1-10 {
  margin-left: 10%;
}

.c-row__col--3-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 30%;
  flex: 0 1 30%;
  max-width: 30%;
}

.c-row__col--offset-3-10 {
  margin-left: 30%;
}

.c-row__col--7-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 70%;
  flex: 0 1 70%;
  max-width: 70%;
}

.c-row__col--offset-7-10 {
  margin-left: 70%;
}

.c-row__col--9-10 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 90%;
  flex: 0 1 90%;
  max-width: 90%;
}

.c-row__col--offset-9-10 {
  margin-left: 90%;
}

.c-row__col--1-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 9.09091%;
  flex: 0 1 9.09091%;
  max-width: 9.09091%;
}

.c-row__col--offset-1-11 {
  margin-left: 9.09091%;
}

.c-row__col--2-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 18.18182%;
  flex: 0 1 18.18182%;
  max-width: 18.18182%;
}

.c-row__col--offset-2-11 {
  margin-left: 18.18182%;
}

.c-row__col--3-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 27.27273%;
  flex: 0 1 27.27273%;
  max-width: 27.27273%;
}

.c-row__col--offset-3-11 {
  margin-left: 27.27273%;
}

.c-row__col--4-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 36.36364%;
  flex: 0 1 36.36364%;
  max-width: 36.36364%;
}

.c-row__col--offset-4-11 {
  margin-left: 36.36364%;
}

.c-row__col--5-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 45.45455%;
  flex: 0 1 45.45455%;
  max-width: 45.45455%;
}

.c-row__col--offset-5-11 {
  margin-left: 45.45455%;
}

.c-row__col--6-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 54.54545%;
  flex: 0 1 54.54545%;
  max-width: 54.54545%;
}

.c-row__col--offset-6-11 {
  margin-left: 54.54545%;
}

.c-row__col--7-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 63.63636%;
  flex: 0 1 63.63636%;
  max-width: 63.63636%;
}

.c-row__col--offset-7-11 {
  margin-left: 63.63636%;
}

.c-row__col--8-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 72.72727%;
  flex: 0 1 72.72727%;
  max-width: 72.72727%;
}

.c-row__col--offset-8-11 {
  margin-left: 72.72727%;
}

.c-row__col--9-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 81.81818%;
  flex: 0 1 81.81818%;
  max-width: 81.81818%;
}

.c-row__col--offset-9-11 {
  margin-left: 81.81818%;
}

.c-row__col--10-11 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 90.90909%;
  flex: 0 1 90.90909%;
  max-width: 90.90909%;
}

.c-row__col--offset-10-11 {
  margin-left: 90.90909%;
}

.c-row__col--1-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 8.33333%;
  flex: 0 1 8.33333%;
  max-width: 8.33333%;
}

.c-row__col--offset-1-12 {
  margin-left: 8.33333%;
}

.c-row__col--5-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 41.66667%;
  flex: 0 1 41.66667%;
  max-width: 41.66667%;
}

.c-row__col--offset-5-12 {
  margin-left: 41.66667%;
}

.c-row__col--7-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 58.33333%;
  flex: 0 1 58.33333%;
  max-width: 58.33333%;
}

.c-row__col--offset-7-12 {
  margin-left: 58.33333%;
}

.c-row__col--11-12 {
  max-width: 100%;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 91.66667%;
  flex: 0 1 91.66667%;
  max-width: 91.66667%;
}

.c-row__col--offset-11-12 {
  margin-left: 91.66667%;
}

.c-row__col--1-1, .c-row__col--2-2, .c-row__col--3-3, .c-row__col--4-4, .c-row__col--5-5, .c-row__col--6-6, .c-row__col--7-7, .c-row__col--8-8, .c-row__col--9-9, .c-row__col--10-10, .c-row__col--11-11, .c-row__col--12-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 100%;
  flex: 0 1 100%;
  max-width: 100%;
}

.c-row__col--auto {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}

.c-row__col--justify {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
}

.c-row__col--offset-0 {
  margin-left: 0;
}

.c-row__col--fit {
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

@media (min-width: 40rem) {
  .c-row__col--md-1-2, .c-row__col--md-2-4, .c-row__col--md-3-6, .c-row__col--md-4-8, .c-row__col--md-5-10, .c-row__col--md-6-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
  }
  .c-row__col--md-offset-1-2, .c-row__col--md-offset-2-4, .c-row__col--md-offset-3-6, .c-row__col--md-offset-4-8, .c-row__col--md-offset-5-10, .c-row__col--md-offset-6-12 {
    margin-left: 50%;
  }
  .c-row__col--md-1-3, .c-row__col--md-2-6, .c-row__col--md-3-9, .c-row__col--md-4-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 33.33333%;
    flex: 0 1 33.33333%;
    max-width: 33.33333%;
  }
  .c-row__col--md-offset-1-3, .c-row__col--md-offset-2-6, .c-row__col--md-offset-3-9, .c-row__col--md-offset-4-12 {
    margin-left: 33.33333%;
  }
  .c-row__col--md-2-3, .c-row__col--md-4-6, .c-row__col--md-6-9, .c-row__col--md-8-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 66.66667%;
    flex: 0 1 66.66667%;
    max-width: 66.66667%;
  }
  .c-row__col--md-offset-2-3, .c-row__col--md-offset-4-6, .c-row__col--md-offset-6-9, .c-row__col--md-offset-8-12 {
    margin-left: 66.66667%;
  }
  .c-row__col--md-1-4, .c-row__col--md-2-8, .c-row__col--md-3-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
  }
  .c-row__col--md-offset-1-4, .c-row__col--md-offset-2-8, .c-row__col--md-offset-3-12 {
    margin-left: 25%;
  }
  .c-row__col--md-3-4, .c-row__col--md-6-8, .c-row__col--md-9-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
  }
  .c-row__col--md-offset-3-4, .c-row__col--md-offset-6-8, .c-row__col--md-offset-9-12 {
    margin-left: 75%;
  }
  .c-row__col--md-1-5, .c-row__col--md-2-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 20%;
    flex: 0 1 20%;
    max-width: 20%;
  }
  .c-row__col--md-offset-1-5, .c-row__col--md-offset-2-10 {
    margin-left: 20%;
  }
  .c-row__col--md-2-5, .c-row__col--md-4-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 40%;
    flex: 0 1 40%;
    max-width: 40%;
  }
  .c-row__col--md-offset-2-5, .c-row__col--md-offset-4-10 {
    margin-left: 40%;
  }
  .c-row__col--md-3-5, .c-row__col--md-6-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 60%;
    flex: 0 1 60%;
    max-width: 60%;
  }
  .c-row__col--md-offset-3-5, .c-row__col--md-offset-6-10 {
    margin-left: 60%;
  }
  .c-row__col--md-4-5, .c-row__col--md-8-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 80%;
    flex: 0 1 80%;
    max-width: 80%;
  }
  .c-row__col--md-offset-4-5, .c-row__col--md-offset-8-10 {
    margin-left: 80%;
  }
  .c-row__col--md-1-6, .c-row__col--md-2-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 16.66667%;
    flex: 0 1 16.66667%;
    max-width: 16.66667%;
  }
  .c-row__col--md-offset-1-6, .c-row__col--md-offset-2-12 {
    margin-left: 16.66667%;
  }
  .c-row__col--md-5-6, .c-row__col--md-10-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 83.33333%;
    flex: 0 1 83.33333%;
    max-width: 83.33333%;
  }
  .c-row__col--md-offset-5-6, .c-row__col--md-offset-10-12 {
    margin-left: 83.33333%;
  }
  .c-row__col--md-1-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 14.28571%;
    flex: 0 1 14.28571%;
    max-width: 14.28571%;
  }
  .c-row__col--md-offset-1-7 {
    margin-left: 14.28571%;
  }
  .c-row__col--md-2-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 28.57143%;
    flex: 0 1 28.57143%;
    max-width: 28.57143%;
  }
  .c-row__col--md-offset-2-7 {
    margin-left: 28.57143%;
  }
  .c-row__col--md-3-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 42.85714%;
    flex: 0 1 42.85714%;
    max-width: 42.85714%;
  }
  .c-row__col--md-offset-3-7 {
    margin-left: 42.85714%;
  }
  .c-row__col--md-4-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 57.14286%;
    flex: 0 1 57.14286%;
    max-width: 57.14286%;
  }
  .c-row__col--md-offset-4-7 {
    margin-left: 57.14286%;
  }
  .c-row__col--md-5-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 71.42857%;
    flex: 0 1 71.42857%;
    max-width: 71.42857%;
  }
  .c-row__col--md-offset-5-7 {
    margin-left: 71.42857%;
  }
  .c-row__col--md-6-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 85.71429%;
    flex: 0 1 85.71429%;
    max-width: 85.71429%;
  }
  .c-row__col--md-offset-6-7 {
    margin-left: 85.71429%;
  }
  .c-row__col--md-1-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 12.5%;
    flex: 0 1 12.5%;
    max-width: 12.5%;
  }
  .c-row__col--md-offset-1-8 {
    margin-left: 12.5%;
  }
  .c-row__col--md-3-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 37.5%;
    flex: 0 1 37.5%;
    max-width: 37.5%;
  }
  .c-row__col--md-offset-3-8 {
    margin-left: 37.5%;
  }
  .c-row__col--md-5-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 62.5%;
    flex: 0 1 62.5%;
    max-width: 62.5%;
  }
  .c-row__col--md-offset-5-8 {
    margin-left: 62.5%;
  }
  .c-row__col--md-7-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 87.5%;
    flex: 0 1 87.5%;
    max-width: 87.5%;
  }
  .c-row__col--md-offset-7-8 {
    margin-left: 87.5%;
  }
  .c-row__col--md-1-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 11.11111%;
    flex: 0 1 11.11111%;
    max-width: 11.11111%;
  }
  .c-row__col--md-offset-1-9 {
    margin-left: 11.11111%;
  }
  .c-row__col--md-2-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 22.22222%;
    flex: 0 1 22.22222%;
    max-width: 22.22222%;
  }
  .c-row__col--md-offset-2-9 {
    margin-left: 22.22222%;
  }
  .c-row__col--md-4-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 44.44444%;
    flex: 0 1 44.44444%;
    max-width: 44.44444%;
  }
  .c-row__col--md-offset-4-9 {
    margin-left: 44.44444%;
  }
  .c-row__col--md-5-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 55.55556%;
    flex: 0 1 55.55556%;
    max-width: 55.55556%;
  }
  .c-row__col--md-offset-5-9 {
    margin-left: 55.55556%;
  }
  .c-row__col--md-7-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 77.77778%;
    flex: 0 1 77.77778%;
    max-width: 77.77778%;
  }
  .c-row__col--md-offset-7-9 {
    margin-left: 77.77778%;
  }
  .c-row__col--md-8-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 88.88889%;
    flex: 0 1 88.88889%;
    max-width: 88.88889%;
  }
  .c-row__col--md-offset-8-9 {
    margin-left: 88.88889%;
  }
  .c-row__col--md-1-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    max-width: 10%;
  }
  .c-row__col--md-offset-1-10 {
    margin-left: 10%;
  }
  .c-row__col--md-3-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 30%;
    flex: 0 1 30%;
    max-width: 30%;
  }
  .c-row__col--md-offset-3-10 {
    margin-left: 30%;
  }
  .c-row__col--md-7-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 70%;
    flex: 0 1 70%;
    max-width: 70%;
  }
  .c-row__col--md-offset-7-10 {
    margin-left: 70%;
  }
  .c-row__col--md-9-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 90%;
    flex: 0 1 90%;
    max-width: 90%;
  }
  .c-row__col--md-offset-9-10 {
    margin-left: 90%;
  }
  .c-row__col--md-1-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 9.09091%;
    flex: 0 1 9.09091%;
    max-width: 9.09091%;
  }
  .c-row__col--md-offset-1-11 {
    margin-left: 9.09091%;
  }
  .c-row__col--md-2-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 18.18182%;
    flex: 0 1 18.18182%;
    max-width: 18.18182%;
  }
  .c-row__col--md-offset-2-11 {
    margin-left: 18.18182%;
  }
  .c-row__col--md-3-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 27.27273%;
    flex: 0 1 27.27273%;
    max-width: 27.27273%;
  }
  .c-row__col--md-offset-3-11 {
    margin-left: 27.27273%;
  }
  .c-row__col--md-4-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 36.36364%;
    flex: 0 1 36.36364%;
    max-width: 36.36364%;
  }
  .c-row__col--md-offset-4-11 {
    margin-left: 36.36364%;
  }
  .c-row__col--md-5-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 45.45455%;
    flex: 0 1 45.45455%;
    max-width: 45.45455%;
  }
  .c-row__col--md-offset-5-11 {
    margin-left: 45.45455%;
  }
  .c-row__col--md-6-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 54.54545%;
    flex: 0 1 54.54545%;
    max-width: 54.54545%;
  }
  .c-row__col--md-offset-6-11 {
    margin-left: 54.54545%;
  }
  .c-row__col--md-7-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 63.63636%;
    flex: 0 1 63.63636%;
    max-width: 63.63636%;
  }
  .c-row__col--md-offset-7-11 {
    margin-left: 63.63636%;
  }
  .c-row__col--md-8-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 72.72727%;
    flex: 0 1 72.72727%;
    max-width: 72.72727%;
  }
  .c-row__col--md-offset-8-11 {
    margin-left: 72.72727%;
  }
  .c-row__col--md-9-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 81.81818%;
    flex: 0 1 81.81818%;
    max-width: 81.81818%;
  }
  .c-row__col--md-offset-9-11 {
    margin-left: 81.81818%;
  }
  .c-row__col--md-10-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 90.90909%;
    flex: 0 1 90.90909%;
    max-width: 90.90909%;
  }
  .c-row__col--md-offset-10-11 {
    margin-left: 90.90909%;
  }
  .c-row__col--md-1-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 8.33333%;
    flex: 0 1 8.33333%;
    max-width: 8.33333%;
  }
  .c-row__col--md-offset-1-12 {
    margin-left: 8.33333%;
  }
  .c-row__col--md-5-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 41.66667%;
    flex: 0 1 41.66667%;
    max-width: 41.66667%;
  }
  .c-row__col--md-offset-5-12 {
    margin-left: 41.66667%;
  }
  .c-row__col--md-7-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 58.33333%;
    flex: 0 1 58.33333%;
    max-width: 58.33333%;
  }
  .c-row__col--md-offset-7-12 {
    margin-left: 58.33333%;
  }
  .c-row__col--md-11-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 91.66667%;
    flex: 0 1 91.66667%;
    max-width: 91.66667%;
  }
  .c-row__col--md-offset-11-12 {
    margin-left: 91.66667%;
  }
  .c-row__col--md-1-1, .c-row__col--md-2-2, .c-row__col--md-3-3, .c-row__col--md-4-4, .c-row__col--md-5-5, .c-row__col--md-6-6, .c-row__col--md-7-7, .c-row__col--md-8-8, .c-row__col--md-9-9, .c-row__col--md-10-10, .c-row__col--md-11-11, .c-row__col--md-12-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
  }
  .c-row__col--md-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .c-row__col--md-justify {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
  }
  .c-row__col--md-offset-0 {
    margin-left: 0;
  }
  .c-row__col--md-fit {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
}

@media (min-width: 64rem) {
  .c-row__col--lg-1-2, .c-row__col--lg-2-4, .c-row__col--lg-3-6, .c-row__col--lg-4-8, .c-row__col--lg-5-10, .c-row__col--lg-6-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 50%;
    flex: 0 1 50%;
    max-width: 50%;
  }
  .c-row__col--lg-offset-1-2, .c-row__col--lg-offset-2-4, .c-row__col--lg-offset-3-6, .c-row__col--lg-offset-4-8, .c-row__col--lg-offset-5-10, .c-row__col--lg-offset-6-12 {
    margin-left: 50%;
  }
  .c-row__col--lg-1-3, .c-row__col--lg-2-6, .c-row__col--lg-3-9, .c-row__col--lg-4-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 33.33333%;
    flex: 0 1 33.33333%;
    max-width: 33.33333%;
  }
  .c-row__col--lg-offset-1-3, .c-row__col--lg-offset-2-6, .c-row__col--lg-offset-3-9, .c-row__col--lg-offset-4-12 {
    margin-left: 33.33333%;
  }
  .c-row__col--lg-2-3, .c-row__col--lg-4-6, .c-row__col--lg-6-9, .c-row__col--lg-8-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 66.66667%;
    flex: 0 1 66.66667%;
    max-width: 66.66667%;
  }
  .c-row__col--lg-offset-2-3, .c-row__col--lg-offset-4-6, .c-row__col--lg-offset-6-9, .c-row__col--lg-offset-8-12 {
    margin-left: 66.66667%;
  }
  .c-row__col--lg-1-4, .c-row__col--lg-2-8, .c-row__col--lg-3-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 25%;
    flex: 0 1 25%;
    max-width: 25%;
  }
  .c-row__col--lg-offset-1-4, .c-row__col--lg-offset-2-8, .c-row__col--lg-offset-3-12 {
    margin-left: 25%;
  }
  .c-row__col--lg-3-4, .c-row__col--lg-6-8, .c-row__col--lg-9-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 75%;
    flex: 0 1 75%;
    max-width: 75%;
  }
  .c-row__col--lg-offset-3-4, .c-row__col--lg-offset-6-8, .c-row__col--lg-offset-9-12 {
    margin-left: 75%;
  }
  .c-row__col--lg-1-5, .c-row__col--lg-2-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 20%;
    flex: 0 1 20%;
    max-width: 20%;
  }
  .c-row__col--lg-offset-1-5, .c-row__col--lg-offset-2-10 {
    margin-left: 20%;
  }
  .c-row__col--lg-2-5, .c-row__col--lg-4-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 40%;
    flex: 0 1 40%;
    max-width: 40%;
  }
  .c-row__col--lg-offset-2-5, .c-row__col--lg-offset-4-10 {
    margin-left: 40%;
  }
  .c-row__col--lg-3-5, .c-row__col--lg-6-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 60%;
    flex: 0 1 60%;
    max-width: 60%;
  }
  .c-row__col--lg-offset-3-5, .c-row__col--lg-offset-6-10 {
    margin-left: 60%;
  }
  .c-row__col--lg-4-5, .c-row__col--lg-8-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 80%;
    flex: 0 1 80%;
    max-width: 80%;
  }
  .c-row__col--lg-offset-4-5, .c-row__col--lg-offset-8-10 {
    margin-left: 80%;
  }
  .c-row__col--lg-1-6, .c-row__col--lg-2-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 16.66667%;
    flex: 0 1 16.66667%;
    max-width: 16.66667%;
  }
  .c-row__col--lg-offset-1-6, .c-row__col--lg-offset-2-12 {
    margin-left: 16.66667%;
  }
  .c-row__col--lg-5-6, .c-row__col--lg-10-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 83.33333%;
    flex: 0 1 83.33333%;
    max-width: 83.33333%;
  }
  .c-row__col--lg-offset-5-6, .c-row__col--lg-offset-10-12 {
    margin-left: 83.33333%;
  }
  .c-row__col--lg-1-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 14.28571%;
    flex: 0 1 14.28571%;
    max-width: 14.28571%;
  }
  .c-row__col--lg-offset-1-7 {
    margin-left: 14.28571%;
  }
  .c-row__col--lg-2-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 28.57143%;
    flex: 0 1 28.57143%;
    max-width: 28.57143%;
  }
  .c-row__col--lg-offset-2-7 {
    margin-left: 28.57143%;
  }
  .c-row__col--lg-3-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 42.85714%;
    flex: 0 1 42.85714%;
    max-width: 42.85714%;
  }
  .c-row__col--lg-offset-3-7 {
    margin-left: 42.85714%;
  }
  .c-row__col--lg-4-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 57.14286%;
    flex: 0 1 57.14286%;
    max-width: 57.14286%;
  }
  .c-row__col--lg-offset-4-7 {
    margin-left: 57.14286%;
  }
  .c-row__col--lg-5-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 71.42857%;
    flex: 0 1 71.42857%;
    max-width: 71.42857%;
  }
  .c-row__col--lg-offset-5-7 {
    margin-left: 71.42857%;
  }
  .c-row__col--lg-6-7 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 85.71429%;
    flex: 0 1 85.71429%;
    max-width: 85.71429%;
  }
  .c-row__col--lg-offset-6-7 {
    margin-left: 85.71429%;
  }
  .c-row__col--lg-1-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 12.5%;
    flex: 0 1 12.5%;
    max-width: 12.5%;
  }
  .c-row__col--lg-offset-1-8 {
    margin-left: 12.5%;
  }
  .c-row__col--lg-3-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 37.5%;
    flex: 0 1 37.5%;
    max-width: 37.5%;
  }
  .c-row__col--lg-offset-3-8 {
    margin-left: 37.5%;
  }
  .c-row__col--lg-5-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 62.5%;
    flex: 0 1 62.5%;
    max-width: 62.5%;
  }
  .c-row__col--lg-offset-5-8 {
    margin-left: 62.5%;
  }
  .c-row__col--lg-7-8 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 87.5%;
    flex: 0 1 87.5%;
    max-width: 87.5%;
  }
  .c-row__col--lg-offset-7-8 {
    margin-left: 87.5%;
  }
  .c-row__col--lg-1-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 11.11111%;
    flex: 0 1 11.11111%;
    max-width: 11.11111%;
  }
  .c-row__col--lg-offset-1-9 {
    margin-left: 11.11111%;
  }
  .c-row__col--lg-2-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 22.22222%;
    flex: 0 1 22.22222%;
    max-width: 22.22222%;
  }
  .c-row__col--lg-offset-2-9 {
    margin-left: 22.22222%;
  }
  .c-row__col--lg-4-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 44.44444%;
    flex: 0 1 44.44444%;
    max-width: 44.44444%;
  }
  .c-row__col--lg-offset-4-9 {
    margin-left: 44.44444%;
  }
  .c-row__col--lg-5-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 55.55556%;
    flex: 0 1 55.55556%;
    max-width: 55.55556%;
  }
  .c-row__col--lg-offset-5-9 {
    margin-left: 55.55556%;
  }
  .c-row__col--lg-7-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 77.77778%;
    flex: 0 1 77.77778%;
    max-width: 77.77778%;
  }
  .c-row__col--lg-offset-7-9 {
    margin-left: 77.77778%;
  }
  .c-row__col--lg-8-9 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 88.88889%;
    flex: 0 1 88.88889%;
    max-width: 88.88889%;
  }
  .c-row__col--lg-offset-8-9 {
    margin-left: 88.88889%;
  }
  .c-row__col--lg-1-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 10%;
    flex: 0 1 10%;
    max-width: 10%;
  }
  .c-row__col--lg-offset-1-10 {
    margin-left: 10%;
  }
  .c-row__col--lg-3-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 30%;
    flex: 0 1 30%;
    max-width: 30%;
  }
  .c-row__col--lg-offset-3-10 {
    margin-left: 30%;
  }
  .c-row__col--lg-7-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 70%;
    flex: 0 1 70%;
    max-width: 70%;
  }
  .c-row__col--lg-offset-7-10 {
    margin-left: 70%;
  }
  .c-row__col--lg-9-10 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 90%;
    flex: 0 1 90%;
    max-width: 90%;
  }
  .c-row__col--lg-offset-9-10 {
    margin-left: 90%;
  }
  .c-row__col--lg-1-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 9.09091%;
    flex: 0 1 9.09091%;
    max-width: 9.09091%;
  }
  .c-row__col--lg-offset-1-11 {
    margin-left: 9.09091%;
  }
  .c-row__col--lg-2-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 18.18182%;
    flex: 0 1 18.18182%;
    max-width: 18.18182%;
  }
  .c-row__col--lg-offset-2-11 {
    margin-left: 18.18182%;
  }
  .c-row__col--lg-3-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 27.27273%;
    flex: 0 1 27.27273%;
    max-width: 27.27273%;
  }
  .c-row__col--lg-offset-3-11 {
    margin-left: 27.27273%;
  }
  .c-row__col--lg-4-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 36.36364%;
    flex: 0 1 36.36364%;
    max-width: 36.36364%;
  }
  .c-row__col--lg-offset-4-11 {
    margin-left: 36.36364%;
  }
  .c-row__col--lg-5-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 45.45455%;
    flex: 0 1 45.45455%;
    max-width: 45.45455%;
  }
  .c-row__col--lg-offset-5-11 {
    margin-left: 45.45455%;
  }
  .c-row__col--lg-6-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 54.54545%;
    flex: 0 1 54.54545%;
    max-width: 54.54545%;
  }
  .c-row__col--lg-offset-6-11 {
    margin-left: 54.54545%;
  }
  .c-row__col--lg-7-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 63.63636%;
    flex: 0 1 63.63636%;
    max-width: 63.63636%;
  }
  .c-row__col--lg-offset-7-11 {
    margin-left: 63.63636%;
  }
  .c-row__col--lg-8-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 72.72727%;
    flex: 0 1 72.72727%;
    max-width: 72.72727%;
  }
  .c-row__col--lg-offset-8-11 {
    margin-left: 72.72727%;
  }
  .c-row__col--lg-9-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 81.81818%;
    flex: 0 1 81.81818%;
    max-width: 81.81818%;
  }
  .c-row__col--lg-offset-9-11 {
    margin-left: 81.81818%;
  }
  .c-row__col--lg-10-11 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 90.90909%;
    flex: 0 1 90.90909%;
    max-width: 90.90909%;
  }
  .c-row__col--lg-offset-10-11 {
    margin-left: 90.90909%;
  }
  .c-row__col--lg-1-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 8.33333%;
    flex: 0 1 8.33333%;
    max-width: 8.33333%;
  }
  .c-row__col--lg-offset-1-12 {
    margin-left: 8.33333%;
  }
  .c-row__col--lg-5-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 41.66667%;
    flex: 0 1 41.66667%;
    max-width: 41.66667%;
  }
  .c-row__col--lg-offset-5-12 {
    margin-left: 41.66667%;
  }
  .c-row__col--lg-7-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 58.33333%;
    flex: 0 1 58.33333%;
    max-width: 58.33333%;
  }
  .c-row__col--lg-offset-7-12 {
    margin-left: 58.33333%;
  }
  .c-row__col--lg-11-12 {
    max-width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 91.66667%;
    flex: 0 1 91.66667%;
    max-width: 91.66667%;
  }
  .c-row__col--lg-offset-11-12 {
    margin-left: 91.66667%;
  }
  .c-row__col--lg-1-1, .c-row__col--lg-2-2, .c-row__col--lg-3-3, .c-row__col--lg-4-4, .c-row__col--lg-5-5, .c-row__col--lg-6-6, .c-row__col--lg-7-7, .c-row__col--lg-8-8, .c-row__col--lg-9-9, .c-row__col--lg-10-10, .c-row__col--lg-11-11, .c-row__col--lg-12-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    max-width: 100%;
  }
  .c-row__col--lg-auto {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
  }
  .c-row__col--lg-justify {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
  }
  .c-row__col--lg-offset-0 {
    margin-left: 0;
  }
  .c-row__col--lg-fit {
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
  }
}

/*
---
name: .c-section
category:
  - object/component
  - object/component/section
---
Section component

### html
```html
<section class="c-section">
  <div class="_c-container">
    <h2 class="c-section__title">...</h2>
    <div class="c-section__content">
      ...
    </div>
  </div>
</section>
```
*/
.c-section__title {
  margin-top: 0;
}

/*
---
name: .c-select
category:
  - object/component
  - object/component/select
---
Select box component

### html
```html
<span class="c-select" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__label"></span>
</span>
```
```html
<span class="c-select c-select--block" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__label"></span>
</span>
```
*/
.c-select {
  position: relative;
  display: inline-block;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  outline: 0;
  -webkit-transition: border 0.1s ease-out;
  transition: border 0.1s ease-out;
}

.c-select:hover {
  border-color: #999;
}

.c-select:active, .c-select:focus, .c-select[aria-selected="true"] {
  border-color: #85b7d9;
}

.c-select::before {
  position: absolute;
  top: 50%;
  right: 7.5px;
  z-index: 1;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: 'basis';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e902";
}

.c-select > select, .c-select__label {
  padding: 5.625px 11.25px;
}

.c-select > select {
  position: relative;
  z-index: 1;
  opacity: 0 !important;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: 0;
  padding-right: 33.75px;
}

.c-select__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  padding-right: 0;
}

.c-select--block {
  display: block;
}

.c-select--block > select {
  width: 100%;
}

/*
---
name: .c-site-branding
category:
  - object/component
  - object/component/site-branding
---
Site branding component

### html
```html
<div class="c-site-branding">
  <h1 class="c-site-branding__title">...</h1>
</div>
```
*/
.c-site-branding__title {
  margin: 0;
  font-size: 30px;
  font-size: 2rem;
  line-height: 4.75;
}

/*
---
name: .c-circle-spinner
category:
  - object/component
  - object/component/spinner
  - object/component/spinner/circle-spinner
---
Circle spinner component

### html
```html
<div class="c-circle-spinner"></div>
```
*/
.c-circle-spinner {
  display: inline-block;
  border-radius: 100%;
  height: 20px;
  width: 20px;
  overflow: hidden;
  border: 3px solid #cccccc;
  border-top-color: #999999;
  -webkit-animation: _circle_spinner_20px___cccccc__3px__0s__2s 2s linear 0s infinite;
  animation: _circle_spinner_20px___cccccc__3px__0s__2s 2s linear 0s infinite;
}

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

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

/*
---
name: .c-dots-spinner
category:
  - object/component
  - object/component/spinner
  - object/component/spinner/dots-spinner
---
Dots spinner component

### html
```html
<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>
```
*/
.c-dots-spinner {
  display: inline-block;
  font-size: 0;
}

.c-dots-spinner__dot {
  border-radius: 100%;
  height: 10px;
  width: 10px;
  overflow: hidden;
  display: inline-block;
  background-color: #999;
  -webkit-animation: _dots_spinner_10px___999__0s__2s__1_3 2s ease-in 0s infinite;
  animation: _dots_spinner_10px___999__0s__2s__1_3 2s ease-in 0s infinite;
}

.c-dots-spinner__dot:nth-child(2) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.c-dots-spinner__dot:nth-child(3) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

@-webkit-keyframes _dots_spinner_10px___999__0s__2s__1_3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes _dots_spinner_10px___999__0s__2s__1_3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.c-dots-spinner__dot {
  margin: 0 4px;
}

/*
---
name: .c-pulse-spinner
category:
  - object/component
  - object/component/spinner
  - object/component/spinner/pulse-spinner
---
Pulse spinner component

### html
```html
<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>
```
*/
.c-pulse-spinner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.c-pulse-spinner__bar {
  height: 16px;
  width: 5px;
  display: block;
  background-color: #999;
  -webkit-animation: _pulse_spinner_16px__5px___999__0s__2s__1_4 2s ease-in 0s infinite;
  animation: _pulse_spinner_16px__5px___999__0s__2s__1_4 2s ease-in 0s infinite;
}

.c-pulse-spinner__bar:nth-child(2) {
  -webkit-animation-delay: .1s;
  animation-delay: .1s;
}

.c-pulse-spinner__bar:nth-child(3) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

@-webkit-keyframes _pulse_spinner_16px__5px___999__0s__2s__1_4 {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(1.4);
    transform: scaleY(1.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes _pulse_spinner_16px__5px___999__0s__2s__1_4 {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(1.4);
    transform: scaleY(1.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

.c-pulse-spinner__bar {
  margin: 0 3px;
}

.page__navi {
  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;
  height: 220px;
}

.page__navi .vc_arrow {
  stroke: #1e2c5b;
}

.page__navi__link {
  width: 100%;
}

.page__navi__link__item {
  position: relative;
  max-width: 50%;
  -ms-flex-preferred-size: 416px;
  flex-basis: 416px;
  margin: 0 .5em;
}

.page__navi .c-btn {
  font-size: 1.6rem;
  height: 80px;
}

.page__navi .c-btn:hover {
  color: #fff;
}

.page__navi .c-btn:hover .vc_arrow {
  stroke: #fff;
}

.page__navi .hoverLine:hover:before, .page__navi .hoverLine:hover:after, .page__navi .hoverLine:focus:before, .page__navi .hoverLine:focus:after {
  z-index: -1;
  background-color: #1a2448;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

address {
  font-style: normal;
}

body {
  letter-spacing: .1em;
}

/* IE10以上 */
@media all and (-ms-high-contrast: none) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

@media all and (-ms-high-contrast: active) {
  body {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

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

.u-pb0 {
  padding-bottom: 0 !important;
}

.c-icon {
  position: relative;
}

.c-section__common__contact {
  overflow: hidden;
}

@media (max-width: 63.93333rem) {
  .c-section__common__contact.c-section__common__contact {
    padding-bottom: 28rem;
  }
}

.c-section__common__contact__bg {
  position: relative;
}

.c-section__common__contact__bg:before {
  content: '';
  position: absolute;
  display: block;
  top: calc(50%  - -40px);
  width: 100%;
  height: 297px;
  right: 0;
  z-index: 1;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/wp-content/themes/eekurashi/dist/images/common/contact-bg_sp.png);
}

.c-section__common__contact__bg:after {
  content: '';
  pointer-events: none;
  position: absolute;
  display: block;
  bottom: calc(50%  - 339px);
  width: 100%;
  height: 44px;
  background-color: #f2f3f5;
}

@media (min-width: 64rem) {
  .c-section__common__contact__bg:before {
    content: '';
    pointer-events: none;
    position: absolute;
    z-index: 1;
    display: block;
    top: calc(50%  - 27px);
    width: 100%;
    height: 325px;
    right: -445px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(/wp-content/themes/eekurashi/dist/images/common/contact-bg_pc.png);
  }
  .c-section__common__contact__bg:after {
    content: '';
    pointer-events: none;
    height: 50px;
    bottom: calc(50%  - 298px);
  }
}

.c-section__common__contact .c-btn {
  font-size: 1.8rem;
  letter-spacing: .2em;
  line-height: 1;
  padding: 1.667em 1em;
}

.c-section__common__contact .c-btn__arrow:after {
  right: .5em;
}

.c-section__common__contact .c-btn {
  font-size: 2rem;
  line-height: 1;
  padding: 1.45em 1em;
}

.c-icon__arrow:after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  right: 1em;
  bottom: calc(50% - 8px);
}

.c-icon__arrow--green:after {
  background-image: url(/wp-content/themes/eekurashi/dist/images/common/circle-green.png);
}

.c-icon__arrow--navy:after {
  background-image: url(/wp-content/themes/eekurashi/dist/images/common/circle-navy.png);
}

.navigation-panel__list li:nth-of-type(odd) {
  background-color: #79cdcd;
}

.navigation-panel__list li:nth-of-type(even) {
  background-color: #56587c;
}

.navigation-panel__list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
  color: #fff;
  min-height: 60px;
  padding: 0.643em .7em;
}

.navigation-panel__list li:hover {
  opacity: 1;
  -webkit-animation: flash 1s;
  animation: flash 1s;
}

@-webkit-keyframes flash {
  25% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .5;
  }
}

@keyframes flash {
  25% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .5;
  }
}

@media (min-width: 64rem) {
  .navigation-panel__list a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    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-align: center;
    font-size: 1.5rem;
    line-height: 1.33;
    height: 80px;
    min-height: 80px;
    padding-bottom: 1.2em;
  }
  .c-icon__arrow:after {
    content: '';
    right: calc(50% - 8px);
    bottom: .5rem;
  }
}

.profileList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media (min-width: 40rem) {
  .profileList {
    text-align: center;
  }
}

.interview-outer {
  padding: 3.2rem 0 0;
}

.bg-color__red {
  background-color: #ce4b25;
}

.bg-color__blue {
  background-color: #f1fcfc;
}

.bg-color__lightblue {
  background-color: #68838b;
}

.bg-color__lightblue.c-section__content__inner {
  color: #fff;
}

.bg-color__beige {
  background-color: #fafafa;
}

.bg-color__navy {
  background-color: #1e2c5b;
}

.bg-color__navy .c-section__title__jp {
  color: #fff;
}

.bg-color__green {
  background-color: #c1cdcd;
}

.bg-color__white {
  background-color: #fff;
}

.bg-white__back {
  opacity: 0.9;
  background-color: #ffffff;
}

p {
  line-height: 2.13;
  text-align: justify;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
}

.hidden-sm {
  display: none;
}

.display-sm {
  display: block;
}

.c-section {
  padding: 6rem 0;
}

@media (min-width: 40rem) {
  .c-section {
    padding: 8rem 0;
  }
}

@media (min-width: 64rem) {
  .c-section {
    padding: 12rem 0;
  }
}

.c-container {
  padding-right: 26px;
  padding-left: 26px;
}

@media (max-width: 340px) {
  .c-container {
    padding-right: 15px;
    padding-left: 15px;
  }
}

.c-section__white .c-section__title__jp,
.c-section__white .c-section__title__en,
.c-section__white .c-section__content {
  color: #fff;
}

.c-row__col--thum {
  padding-right: 16px;
  padding-left: 16px;
}

.site-main {
  padding-top: 5.2rem;
}

@media (min-width: 64rem) {
  .site-main {
    padding-top: 7.2rem;
  }
}

p {
  font-size: 1.5rem;
  line-height: 2.13;
}

/* =====================================================
 * px以上の設定
 * ================================================== */
@media (min-width: 64rem) {
  .hidden-sm {
    display: inherit;
  }
  .display-sm {
    display: none;
  }
  .c-container {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.6rem;
    padding-left: 1.6rem;
  }
  .c-container {
    max-width: 103.2rem;
  }
  .c-section__title__h3 {
    font-size: 3.2rem;
    margin-bottom: 1.6em;
  }
  .c-section__small {
    padding-top: 8rem;
  }
  .section-thum {
    max-height: 400px;
  }
}

@media (max-width: 63.93333rem) {
  a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}

/**
* 見出し関連
*/
.title-h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-size: 4rem;
  color: #79cdcd;
  text-align: center;
  letter-spacing: .2em;
  margin-bottom: 1em;
  text-transform: uppercase;
}

@media (min-width: 64rem) {
  .title-h2 {
    margin-bottom: 1.5em;
  }
}

.title-jp {
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: .2em;
  color: #4c4c4c;
  text-align: center;
  margin-top: 1rem;
}

.c-section__header {
  margin-bottom: 4rem;
}

@media (min-width: 64rem) {
  .c-section__header {
    margin-bottom: 6rem;
  }
}

.c-section__header__intro {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.88;
  letter-spacing: .2em;
}

@media (min-width: 40rem) {
  .c-section__header__intro {
    font-size: 2.4rem;
    line-height: 1.66;
    text-align: center;
  }
}

.title-bottom__border {
  border-bottom: solid 1px #1e2c5b;
  padding-bottom: .5em;
}

.title-left__border {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.title-left__border:after {
  content: '';
  background-color: #79cdcd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 2px;
  margin-left: .5em;
  padding: 7px 0;
}

.title-box {
  font-size: 2rem;
  background-color: #79cdcd;
  color: #fff;
  padding: 0.55em 1em;
  margin-bottom: 1.5em;
}

.c-section__title__border {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.c-section__title__border:before, .c-section__title__border:after {
  content: '';
  background-color: #1e2c5b;
  width: 26px;
  height: 1px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font: inherit;
  color: inherit;
}

.c-section__title__border:before {
  margin-right: .5em;
}

.c-section__title__border:after {
  margin-left: .45em;
}

.name__label {
  display: block;
  font-size: 1.8rem;
}

.name__label:before {
  display: inline-block;
  content: '[';
  margin-right: .2em;
}

.name__label:after {
  display: inline-block;
  content: ']';
  margin-left: .2em;
}

.c-section__title {
  font-size: 2.6rem;
  margin-bottom: .4em;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  letter-spacing: .1em;
}

@media (max-width: 63.93333rem) {
  .c-section__title {
    font-size: 2.2rem;
  }
}

.c-section__title__en {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-weight: 600;
  text-align: center;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  text-transform: uppercase;
}

@media (max-width: 63.93333rem) {
  .c-section__title__en {
    letter-spacing: 0;
  }
}

.c-section__title__jp {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.c-section__title__label {
  font-size: 1.8rem;
  line-height: 2.4;
  display: block;
}

.c-section__title__label:before {
  display: inline-block;
  content: '[';
  margin-right: .2em;
}

.c-section__title__label:after {
  display: inline-block;
  content: ']';
  margin-left: .2em;
}

.c-section__pagetop .c-section__header__title__jp {
  margin-bottom: 2em;
}

.title-border:before {
  content: '';
  background-color: #ce4b25;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 8px;
  margin-right: .77em;
}

.c-section__head__content__text {
  margin-bottom: 2em;
}

.icon-new_tab:after {
  content: '';
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-left: .6em;
}

.border-box {
  border: solid 1px #f9ae00;
}

/* =====================================================
 * Layout
 * ================================================== */
/**
 * Header module
 */
.site-header {
  position: absolute;
  background-color: #79cdcd;
}

@media (max-width: 63.93333rem) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 0.688em 0;
    color: #fff;
  }
  .site-header__logo {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 2;
    letter-spacing: .3em;
    padding: 1.219em 0;
  }
}

@media (min-width: 40rem) {
  .site-header__logo {
    font-size: 2.2rem;
  }
}

.site-header__sp-menu em {
  display: block;
  color: #1e2c5b;
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.04em;
}

.site-header__sp-menu span {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 1px;
}

.site-header__sp-menu span:nth-of-type(1) {
  -webkit-transform: translate(-6px, 16px);
  transform: translate(-6px, 16px);
  background-color: #1e2c5b;
}

.site-header__sp-menu span:nth-of-type(2) {
  -webkit-transform: translate(0, 22px);
  transform: translate(0, 22px);
  background-color: #1e2c5b;
}

.site-header__sp-menu span:nth-of-type(3) {
  -webkit-transform: translate(6px, 28px);
  transform: translate(6px, 28px);
  width: 22px;
  background-color: #1e2c5b;
}

.site-header.is-open .site-header__sp-menu span:nth-of-type(2) {
  opacity: 0;
}

.site-header.is-open .site-header__sp-menu span:nth-of-type(1) {
  width: 22px;
  -webkit-transform: rotateZ(45deg) translate3d(18px, 18px, 6px);
  transform: rotateZ(45deg) translate3d(18px, 18px, 6px);
  background-color: #fff;
}

.site-header.is-open .site-header__sp-menu span:nth-of-type(3) {
  width: 22px;
  -webkit-transform: rotateZ(-45deg) translate3d(-18px, 18px, 6px);
  transform: rotateZ(-45deg) translate3d(-18px, 18px, 6px);
  background-color: #fff;
}

.site-header__nav-main {
  margin-left: 0;
}

.site-header__nav-main li {
  font-size: 1.8rem;
  letter-spacing: 0.01em;
}

.site-header__nav-main li:not(:last-child) {
  margin-bottom: .9em;
}

@media (min-width: 64rem) {
  .site-header__nav-main li:not(:last-child) {
    margin-bottom: 0;
  }
  .site-header__sp-menu {
    display: none;
  }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
  }
  .site-header__logo {
    font-size: 2.8rem;
    position: relative;
    top: 0;
    left: 0;
  }
  .site-header__logo a {
    font: inherit;
  }
  .site-header__logo a:hover {
    opacity: .7;
  }
  .site-header__inner {
    position: relative;
    margin: 0 auto;
    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;
    -webkit-transition: min-height 0.2s ease-in-out;
    transition: min-height 0.2s ease-in-out;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .site-header--fix {
    position: fixed;
    bottom: 0;
    color: inherit;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  .site-header--fix .site-header__logo {
    color: inherit;
  }
  .site-header__nav {
    -webkit-transition: top 0.1s ease;
    transition: top 0.1s ease;
  }
  .site-header__nav-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    font-size: 1.5rem;
  }
  .site-header__nav-main li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 72px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  }
  .site-header__nav-main li:not(:last-child) {
    margin-right: 8rem;
  }
  .site-header__nav-main a {
    font-size: 1.5rem;
    color: #fff;
    position: relative;
    font-weight: bold;
    text-decoration: none;
    padding: 1.2em 0;
  }
  .site-header__nav-main a.site-header__nav-main--active:after {
    content: '';
    position: absolute;
    top: 69px;
    left: 0;
    width: 100%;
    height: 3px;
    -webkit-transition: top 0.1s ease;
    transition: top 0.1s ease;
  }
  .site-header__nav-sub {
    display: none;
  }
}

@media (max-width: 63.93333rem) {
  .site-header--fix .site-header__inner {
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 50px;
  }
  .site-header__nav-inner {
    position: fixed;
    z-index: 10;
    top: 0;
    right: -100%;
    width: 100%;
    height: auto;
    background: #f1fcfc;
    -webkit-transition: right 0.4s ease;
    transition: right 0.4s ease;
  }
  .site-header__nav-inner .c-btn {
    margin-top: 2.4em;
  }
  .site-header__nav-inner.is-active {
    right: 0;
  }
  .site-header__nav-main li {
    text-indent: 1em;
    padding-bottom: .9em;
    text-align: center;
    position: relative;
  }
  .site-header__nav-main li:after {
    content: '';
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("../images/common/btn-arrow.png");
    position: absolute;
    right: 10px;
    top: calc(50% - 12.75px);
    width: 5px;
    height: 21.5px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  .site-header__nav-main li .hoverLine:hover:before, .site-header__nav-main li .hoverLine:hover:after, .site-header__nav-main li .hoverLine:focus:before, .site-header__nav-main li .hoverLine:focus:after {
    content: none;
  }
  .site-header__nav-scroll {
    overflow-y: scroll;
    height: 100%;
    padding: 6em 2rem 3.33em;
    -webkit-overflow-scrolling: touch;
  }
}

.site-header .drawer-hamburger {
  padding: 14px 1.6rem 10px;
  right: 1em;
  width: 2.4rem;
}

.site-header .drawer-hamburger-icon, .site-header .drawer-hamburger-icon:after, .site-header .drawer-hamburger-icon:before {
  background-color: #fff;
  height: 3px;
}

.site-header .drawer-hamburger-icon:before {
  top: -7px;
}

.site-header .drawer-hamburger-icon:after {
  top: 7px;
}

#drawer {
  background-color: #f1fcfc;
  -webkit-transition: top 0.8s cubic-bezier(0, 0, 0.57, 0.91);
  transition: top 0.8s cubic-bezier(0, 0, 0.57, 0.91);
}

#drawer .drawer-menu {
  padding-top: 10.6rem;
  padding-bottom: 11rem;
}

#drawer .drawer-menu-item {
  font-size: 1.8rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  color: #79cdcd;
  text-align: center;
  letter-spacing: .2em;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  padding: 1rem .75rem;
}

/**
 * footer module
 */
.site-footer {
  position: relative;
  background-color: #79cdcd;
  padding: 4rem 0 3.5rem;
  color: #fff;
  overflow: hidden;
}

.site-footer .navList {
  font-size: 1.4rem;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 4rem;
}

.site-footer .navList li:not(:last-child) {
  margin-right: 2em;
}

.site-footer .navList li:hover {
  text-decoration: underline;
}

.site-footer .c-copyright {
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
}

@media (min-width: 64rem) {
  .site-footer {
    padding: 3rem 0 2.5rem;
  }
  .site-footer .navList {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 0;
  }
  .site-footer .c-copyright {
    text-align: right;
  }
}

/**
 * Breadcrumb
 */
.breadcrumbs {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .1em;
  background-color: #1e2c5b;
  color: #c1cdcd;
  padding: 1em 0;
  min-height: 48px;
}

.breadcrumbs .deli {
  margin: 0 .3em;
}

.breadcrumbs .c-fluid-container em {
  font-weight: bold;
  font-style: normal;
}

.breadcrumbs span[property="itemListElement"]:last-child {
  color: #fff;
}

.breadcrumbs span[property="itemListElement"]:not(:last-child) {
  cursor: pointer;
}

.breadcrumbs span[property="itemListElement"]:not(:last-child):hover {
  text-decoration: underline;
}

@media (max-width: 640.5px) {
  .breadcrumbs span[property="itemListElement"]:last-child {
    display: block;
  }
}

/* page-visual */
.page-visual {
  position: relative;
  overflow: hidden;
}

.page-visual__container {
  padding: 0 20px;
  margin: 0 auto;
}

.page-visual__bg {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

@media (min-width: 40rem) {
  .page-visual__bg {
    height: 320px;
  }
}

@media (min-width: 64rem) {
  .page-visual__container {
    width: 1000px;
  }
  .page-visual__copy {
    width: 50%;
  }
}

.page-visual__copy {
  position: relative;
  color: #fff;
}

.page-visual__copy__en {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #79cdcd;
  text-align: center;
}

@media (max-width: 63.93333rem) {
  .page-visual__copy__en {
    line-height: 1.2;
    margin-bottom: .2em;
  }
}

.page-visual__copy__jp {
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #4c4c4c;
  letter-spacing: .2em;
}

.page-visual__copy__intro {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4c4c4c;
  text-align: center;
  margin-top: 1em;
}

@media (min-width: 40rem) {
  .page-visual__copy__intro {
    margin-top: 1.8em;
  }
}

.hoverLine {
  border: 2px solid transparent;
}

.hoverLine::after {
  width: 0%;
  height: 4px;
  display: block;
  background-color: #fff;
  content: " ";
  position: absolute;
  top: 62px;
  left: 50%;
  -webkit-transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: left 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hoverLine:hover::after {
  width: 100%;
  height: 4px;
  display: block;
  background-color: #fff;
  content: " ";
  position: absolute;
  top: 62px;
  left: 0;
}

/*
 * jQuery FlexSlider v2.6.3
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/*
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none;
}

.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex-pauseplay span {
  text-transform: capitalize;
}

/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0;
}

.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}

.flexslider .slides img {
  width: 100%;
  display: block;
}

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .flexslider .slides {
  display: block;
}

* html .flexslider .slides {
  height: 1%;
}

.no-js .flexslider .slides > li:first-child {
  display: block;
}

/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  position: relative;
  zoom: 1;
}

.flexslider .slides {
  zoom: 1;
}

.flexslider .slides img {
  height: auto;
  -moz-user-select: none;
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.loading .flex-viewport {
  max-height: 300px;
}

.carousel li {
  margin-right: 5px;
}

.flex-direction-nav {
  *height: 0;
}

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

.flex-direction-nav a.flex-next:before {
  content: '\f002';
}

.flex-direction-nav .flex-prev {
  left: -50px;
}

.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

.flex-direction-nav .flex-disabled {
  opacity: 0 !important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1;
}

.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}

.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}

.flex-pauseplay a:hover {
  opacity: 1;
}

.flex-pauseplay a.flex-play:before {
  content: '\f003';
}

/* flex-control-nav */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 0;
  right: .3em;
  z-index: 2;
  text-align: right;
}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  vertical-align: top;
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #fff;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.flex-control-paging li a:hover {
  background: #CCCCCC;
}

.flex-control-paging li a.flex-active {
  background: #ce323a;
  cursor: default;
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.flex-control-thumbs img:hover {
  opacity: 1;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}

/* タブレット向け：760px～960px */
@media only screen and (min-width: 960px) {
  /* flex-control-nav */
  .flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: 70px;
    right: 110px;
    text-align: right;
    z-index: 500;
  }
  .flex-control-nav li {
    margin: 0 6px;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
  .flex-control-nav li:last-of-type {
    margin-right: 0;
  }
  .flex-control-paging li a {
    width: 11px;
    height: 11px;
    display: block;
    background: #FFFFFF;
    cursor: pointer;
    border-radius: 20px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
  }
  .flex-control-paging li a:hover {
    background: #FFFFFF;
  }
  .flex-control-paging li a.flex-active {
    background: #ce323a;
    cursor: default;
  }
  .flex-control-thumbs {
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
  }
  .flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
  }
  .flex-control-thumbs img {
    width: 100%;
    height: auto;
    display: block;
    opacity: .7;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
  }
  .flex-control-thumbs img:hover {
    opacity: 1;
  }
  .flex-control-thumbs .flex-active {
    opacity: 1;
    cursor: default;
  }
}

/* タブレット向けここまで */
.newsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: solid 1px #1e2c5b;
  padding-bottom: 1.33em;
  margin-bottom: 1.2em;
}

.newsList__meta {
  font-weight: normal;
  -ms-flex-preferred-size: 260px;
  flex-basis: 260px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: 4em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.newsList__date {
  font-size: 1.4rem;
  font-weight: normal;
  padding-left: 1em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  letter-spacing: .1em;
}

.newsList .cate__label {
  margin-left: 2em;
}

.newsList .wp-post__title {
  font-size: 1.4rem;
  color: #000;
  letter-spacing: .1em;
}

.newsList:hover .wp-post__title {
  text-decoration: underline;
}

@media (max-width: 63.93333rem) {
  .newsList {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .newsList__meta {
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-bottom: .2em;
    margin-right: 1em;
  }
  .newsList__date {
    padding-left: 0;
    margin-right: 1em;
  }
  .cate__label {
    font-size: 1.4rem;
  }
}

.defineList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-bottom: 1.2em;
  -ms-flex-direction: row;
  flex-direction: row;
}

.defineList:last-of-type {
  margin-bottom: 2em;
}

.defineList__title {
  -ms-flex-preferred-size: 93px;
  flex-basis: 93px;
  margin-right: 1em;
}

.flowList li {
  position: relative;
}

.flowList li:not(:last-child) {
  margin-bottom: 3rem;
}

.flowList-head__inner {
  margin-top: -1em;
}

.flowList-head__outer {
  position: absolute;
  top: calc(50% - 80px);
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: .1em;
  color: #fff;
  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;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 160px;
  height: 160px;
  background-color: #68838b;
  border: solid 10px #c1cdcd;
  border-radius: 50%;
}

.flowList-head__outer .step__num {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  display: block;
  font-size: 6rem;
  line-height: .53;
  text-align: center;
}

.flowList-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #fff;
  width: 90%;
  margin-left: auto;
  height: 150px;
  padding: 1em 2em 1em 5em;
}

.flowList-main__text {
  text-align: justify;
}

.flowList-main__title {
  font-size: 1.6rem;
  letter-spacing: .1em;
  line-height: 2;
}

.flowList__link {
  text-decoration: underline;
  color: #68838b;
}

.flowList__link:hover {
  text-decoration: none;
}

.home .site-main {
  padding-top: 11rem;
}

@media (min-width: 64rem) {
  .home .site-main {
    padding-top: 0;
  }
  .home .site-header {
    position: absolute;
    top: 1008px;
  }
  .home .site-header--fix {
    position: fixed;
    top: 0;
    bottom: inherit;
  }
  .home .profileList li br {
    display: none;
  }
}

/* main-visual
----------------------------------------- */
.main-visual .sm-hidden {
  display: none;
}

.main-visual .sm-visible {
  display: block;
}

.main-visual__sp {
  display: block;
  margin-bottom: 2.7rem;
}

.main-visual__copy__title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #56587c;
  text-align: center;
  letter-spacing: .1em;
  line-height: 1.78;
}

.main-visual__copy__title__sub {
  font-size: 1.8rem;
  display: none;
  text-align: center;
  white-space: nowrap;
}

.main-visual__copy__text {
  font-size: 1.2rem;
  line-height: 1.75;
}

.main-visual__left {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  padding: 0 2.7rem;
  margin: 0;
}

.main-visual__left__title {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.88;
  letter-spacing: .2em;
  text-align: center;
  margin-bottom: 2em;
}

.main-visual__left__text {
  text-align: center;
  font-weight: bold;
  margin-bottom: 4rem;
  letter-spacing: .2em;
}

.main-visual__left__icon {
  width: 16px;
  display: block;
  margin: 3.2rem auto;
}

.main-visual .box-text {
  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  background-color: #56587c;
  color: #fff;
  padding: 0.73em .8em;
  letter-spacing: .3em;
}

.main-visual__logo {
  display: block;
  width: 57%;
  max-width: 218px;
  margin: 0 auto 4.8rem;
}

.main-visual__copy__bg {
  width: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background: none;
}

@media (min-width: 64rem) {
  .main-visual .sm-hidden {
    display: block;
  }
  .main-visual .sm-visible {
    display: none;
  }
  .main-visual .c-row {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .main-visual__left__title {
    font-size: 1.9rem;
    line-height: 2.52;
  }
  .main-visual .box-text {
    font-size: 2.7rem;
    padding: 1.0376em .5em;
  }
  .main-visual__left__text {
    line-height: 3.2;
  }
  .main-visual__left__icon {
    margin: 3.3rem auto 1.7rem;
  }
  .main-visual__logo {
    margin-bottom: 0;
  }
  .main-visual__right {
    position: relative;
    -ms-flex-preferred-size: 66.6%;
    flex-basis: 66.6%;
    max-width: 66.6%;
  }
  .main-visual__copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-font-feature-settings: 'palt';
    font-feature-settings: 'palt';
    font-weight: bold;
  }
  .main-visual__copy__title {
    width: 100%;
    font-size: 3.2rem;
    letter-spacing: .2em;
    padding: 1.5625em 2.7rem;
    line-height: 1.25;
    background-color: rgba(255, 255, 255, 0.7);
    text-align: center;
  }
  .main-visual__copy__bg {
    height: 1008px;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(/wp-content/themes/eekurashi/dist/images/home/main-visual_pc.jpg);
  }
}

@media (min-width: 64rem) {
  .c-section__case .c-section {
    padding-top: 18rem;
  }
}

/* top-company
  ----------------------------------------- */
/* banner
  ----------------------------------------- */
.banner {
  padding: 2.6rem 0;
}

.banner .bannerList li {
  padding: 6px 0;
  margin: 1px 8px;
}

.banner .bannerList li:hover {
  opacity: .7;
}

.banner .bannerList li:not(:last-child) {
  margin-bottom: 1em;
}

@media (min-width: 40rem) {
  .banner {
    padding: 8rem 0;
  }
  .banner .bannerList li {
    max-width: 416px;
    margin: 0 8px;
    padding: 0;
  }
  .banner .bannerList li:not(:last-child) {
    margin-bottom: 1.2em;
  }
}

/* about
  ----------------------------------------- */
.panel figure {
  margin-right: 0;
  margin-bottom: 2.2rem;
}

.panel figcaption {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.6;
  text-align: center;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  letter-spacing: 0;
}

.panel-title {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.65;
  margin-bottom: 2em;
  text-align: center;
}

.panel-thum {
  display: block;
  width: 90%;
  max-width: 132px;
  margin: 0 auto;
  margin-bottom: 1.9rem;
}

@media (min-width: 64rem) {
  .panel .c-row__col--lg-1-6:not(:last-child) {
    max-width: 160px;
    margin-right: 1.5rem;
  }
  .panel figure {
    max-width: 160px;
    margin: 0 auto;
  }
  .panel-title {
    font-size: 2rem;
  }
  .panel-thum {
    width: 100%;
    max-width: inherit;
  }
}

.symbol:after {
  content: '';
  display: block;
  margin: 4.8rem auto;
  background-image: url(/wp-content/themes/eekurashi/dist/images/common/logo.svg);
  width: 16px;
  height: 32px;
  background-size: contain;
  background-repeat: no-repeat;
}

.text-group__title {
  font-size: 2.4rem;
  font-weight: bold;
  color: #56587c;
  text-align: center;
  margin-bottom: 1.4em;
  letter-spacing: .2em;
}

.text-group__text {
  text-align: justify;
  letter-spacing: .2em;
}

@media (min-width: 64rem) {
  .text-group__text {
    text-align: center;
  }
  .text-group__title {
    font-size: 3.2rem;
  }
}

.c-section__about .panel {
  padding: 3.8rem 0;
}

/* menu
  ----------------------------------------- */
.c-section__menu .c-section__header {
  padding-bottom: 4.8rem;
  margin-bottom: 6rem;
}

.c-section__menu.c-section {
  padding-top: 0;
}

.c-section__menu .title-h2 {
  padding-top: 6rem;
}

@media (min-width: 64rem) {
  .c-section__menu .c-section__header {
    padding-bottom: 5rem;
    margin-bottom: 0;
  }
  .c-section__menu .title-h2 {
    padding-top: 12rem;
  }
}

.menu-content {
  padding-bottom: 1rem;
}

.menu-content:last-child {
  padding-bottom: 6rem;
}

.menu-content:not(:last-child) {
  margin-bottom: 6rem;
}

.menu-title {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  color: #fff;
  padding: .75em;
  margin-bottom: 2em;
}

.menu-title__label {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.67;
  letter-spacing: .1em;
  margin-bottom: 1em;
}

@media (max-width: 340px) {
  .menu-title__label {
    font-size: 2.1rem;
  }
}

.menu-desc__main {
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1.88;
  letter-spacing: .1em;
  margin-bottom: 1.2em;
}

.menu-desc__sub {
  margin-bottom: 2.5em;
}

@media (min-width: 64rem) {
  .menu-main {
    margin-left: 6em;
  }
  .menu-title {
    font-size: 2.4rem;
    text-align: left;
    padding: 0.77em .66em;
    margin-bottom: 2.2em;
  }
  .menu-desc__main {
    font-size: 1.8rem;
    line-height: 1.77;
    margin-bottom: 1.5em;
  }
  .menu-thum {
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 728px;
    font-family: 'object-fit: cover;';
  }
  .menu-desc__sub {
    margin-bottom: 0;
  }
  .menu-content:not(:last-child) {
    margin-bottom: 0;
  }
  .menu-content:last-child {
    padding-bottom: 12rem;
  }
}

.menu-odd .menu-main {
  margin-left: 0;
  margin-right: 0;
}

.menu-odd .menu-title {
  background-color: #79cdcd;
}

.menu-odd .menu-title__label {
  color: #79cdcd;
}

.menu-even .menu-main {
  margin-left: 0;
  margin-right: 0;
}

.menu-even .menu-title {
  background-color: #56587c;
}

.menu-even .menu-title__label {
  color: #56587c;
}

@media (min-width: 64rem) {
  .menu-thum {
    -o-object-position: right;
    object-position: right;
  }
  .menu-title__label {
    font-size: 3.2rem;
    line-height: 1.25;
    margin-bottom: 1.4em;
  }
  .menu-odd .menu-main {
    margin-left: 3em;
    margin-right: 1.5em;
  }
  .menu-even .menu-main {
    margin-left: 1.5em;
    margin-right: 3em;
  }
}

@media (min-width: 1280px) {
  .menu-odd .menu-main {
    margin-left: 6em;
    margin-right: 3em;
  }
  .menu-even .menu-main {
    margin-left: 3em;
    margin-right: 6em;
  }
}

.c-section__menu .c-section__header__intro {
  margin-bottom: 3.8rem;
}

@media (min-width: 64rem) {
  .c-section__menu .c-section__header__intro {
    margin-bottom: 7rem;
  }
}

/**
* button
*/
.c-btn {
  position: relative;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.33;
  letter-spacing: .1em;
  color: #79cdcd;
  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;
  border: 1px solid #79cdcd;
  padding: 1em;
}

.c-btn__hover {
  position: relative;
  z-index: 1;
}

.c-btn__arrow {
  position: relative;
}

.c-btn__arrow:after {
  content: '>';
  position: absolute;
  right: 1em;
  top: calc(50% - .9rem);
  color: #79cdcd;
  display: block;
}

.c-btn__arrow:hover:after {
  color: #fff;
}

.c-btn__new__tab {
  position: absolute;
  right: 1em;
  top: 50%;
  margin-top: -6px;
  width: 12px;
  height: 12px;
}

.c-btn--center {
  margin-left: auto;
  margin-right: auto;
}

.c-btn--small,
.c-btn--medium,
.c-btn--large {
  max-width: 100%;
}

.animated-hover__text {
  position: relative;
  z-index: 1;
}

.animated-hover {
  color: #79cdcd;
  cursor: pointer;
  display: block;
  position: relative;
  -webkit-transition: all 0.4s cubic-bezier(0.35, 0.36, 0.71, 0.68);
  transition: all 0.4s cubic-bezier(0.35, 0.36, 0.71, 0.68);
}

.animated-hover:hover {
  color: #fff;
  background-color: transparent;
}

.animated-hover:hover:before {
  left: 0;
  right: auto;
  width: 100%;
  opacity: 1;
  -webkit-animation: flash 3s;
  animation: flash 3s;
}

@keyframes flash {
  25% {
    opacity: .5;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: .5;
  }
}

.animated-hover:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  opacity: 0;
  background: #79cdcd;
  -webkit-transition: all 0.4s cubic-bezier(0.35, 0.36, 0.71, 0.68);
  transition: all 0.4s cubic-bezier(0.35, 0.36, 0.71, 0.68);
}

.c-btn__invert.animated-hover {
  color: #fff;
  background-color: #79cdcd;
}

.c-btn__invert.c-btn__arrow:after {
  color: #fff;
}

.c-btn__invert.c-btn__arrow:hover:after {
  color: #79cdcd;
}

.c-btn__invert.animated-hover:before {
  background: #fff;
}

.c-btn__invert.animated-hover:hover {
  color: #79cdcd;
  background-color: transparent;
}

@media (min-width: 64rem) {
  .c-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .c-btn--small {
    font-size: 1.3rem;
    max-width: 160px;
    height: 40px;
    padding: 1.5em 0;
  }
  .c-btn--small .c-btn__arrow__right {
    right: .5em;
  }
  .c-btn--medium {
    max-width: 500px;
  }
  .c-btn--large {
    font-size: 1.8rem;
    max-width: 632px;
    height: 80px;
  }
}

.interviewList__item {
  background-color: #fafafa;
  padding-bottom: 6rem;
}

.interviewList figure {
  position: relative;
}

.interviewList figcaption {
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.7;
  letter-spacing: .1em;
  width: 100%;
  background-color: #56587c;
  color: #fff;
  padding: 0.822em 2em;
}

@media (min-width: 64rem) {
  .interviewList__item:last-of-type {
    padding-bottom: 0;
  }
  .interviewList figcaption {
    font-size: 1.5rem;
    line-height: 2.13;
    padding: 0.85rem 1em;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(86, 88, 124, 0.85);
  }
  .interviewList .interviewList__item:nth-of-type(even) .c-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
  }
  .interviewList .interviewList__item:nth-of-type(even) .interview-outer {
    margin-left: auto;
  }
}

.interview-main {
  margin-bottom: 4rem;
}

.interview-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .1em;
  margin-bottom: 3.2rem;
}

.interview-title__symbol {
  margin-left: .5em;
}

.interview-title .num {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  display: block;
  font-size: 6.8rem;
  color: #79cdcd;
  line-height: 1;
  margin-left: 3rem;
  margin-top: -7px;
}

.service__name {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  text-align: right;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
}

@media (min-width: 64rem) {
  .interview-main {
    margin-bottom: 3rem;
  }
  .interview-outer {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .interviewList__item .wp-post-image {
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 600px;
    font-family: 'object-fit: cover;';
  }
  .interview-title {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1400px) {
  .interview-outer {
    max-width: 55%;
    padding: 4rem 0;
    margin-left: 2.4rem;
  }
  .service__name {
    margin-bottom: 8.5rem;
  }
}

.single-interview .page-visual__bg,
.interview .page-visual__bg {
  background-image: url("/wp-content/themes/eekurashi/dist/images/visual/case_sp.jpg");
}

@media (min-width: 64rem) {
  .single-interview .page-visual__bg,
  .interview .page-visual__bg {
    background-image: url("/wp-content/themes/eekurashi/dist/images/visual/case_pc.jpg");
  }
}

.single-interview .page-visual__copy,
.interview .page-visual__copy {
  width: 100%;
}

.no-image .interview-outer {
  margin-left: 0 !important;
  max-width: inherit;
}

.single-interview .page-visual__bg {
  height: 360px;
}

@media (min-width: 64rem) {
  .single-interview .page-visual__bg {
    height: 480px;
  }
}

.single-interview .c-section__common__contact {
  border-top: solid 1px #79cdcd;
}

.single-interview .profileList {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.86;
  color: #4c4c4c;
  text-align: center;
}

.single-interview h3 {
  font-size: 1.7rem;
  font-weight: bold;
  color: #56587c;
  margin-bottom: 1em;
}

.single-interview .interview-contents:not(:last-of-type) {
  margin-bottom: 1rem;
}

.single-interview .service__name {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  margin-bottom: 2.8em;
}

@media (min-width: 64rem) {
  .single-interview h3 {
    font-size: 2.4rem;
  }
  .single-interview .interview-contents:not(:last-of-type) {
    margin-bottom: 8.2rem;
  }
  .single-interview .c-section .interview-contents:nth-of-type(even) .c-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse;
    flex-flow: row-reverse;
  }
  .single-interview .c-section .interview-contents:nth-of-type(even) .interview-outer {
    margin-left: auto;
  }
}

.post__num {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 6.8rem;
  line-height: 1;
  color: #56587c;
  display: block;
  text-align: center;
  margin: 1rem 0 1.2rem;
}

.outline .page-visual__bg {
  background-image: url("/wp-content/themes/eekurashi/dist/images/visual/outline_sp.jpg");
}

@media (min-width: 40rem) {
  .outline .page-visual__bg {
    background-image: url("/wp-content/themes/eekurashi/dist/images/visual/outline_pc.jpg");
  }
}

.outline .page-visual__copy__en {
  color: #fff;
}

.outline__list {
  font-size: 1.5rem;
  border-bottom: solid 1px #79cdcd;
  padding-bottom: 1.3em;
  -webkit-font-feature-settings: 'palt';
  font-feature-settings: 'palt';
  letter-spacing: .1em;
}

.outline__list a {
  color: #79cdcd;
  text-decoration: underline;
}

.outline__list a:hover {
  text-decoration: none;
}

.outline__list:first-child {
  border-top: solid 1px #79cdcd;
  padding-top: 1.3em;
}

.outline__list:not(:last-child) {
  margin-bottom: 1.3em;
}

.outline__list .list__item:not(:last-child) {
  margin-bottom: .7em;
}

.outline__list .list__item p:before {
  content: '─';
  display: inline-block;
  font-size: inherit;
  margin-right: .3em;
}

.outline__list .list__item ul > li {
  line-height: 2.13;
  padding-left: 2em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.outline__list ul > li:before {
  content: '';
  width: 5px;
  height: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #79cdcd;
  position: relative;
  left: -.5em;
  top: -3px;
}

.list__text {
  padding-left: 1.5em;
  line-height: 2.13;
}

.privacy .page-visual__bg {
  background-image: url("/wp-content/themes/eekurashi/dist/images/visual/privacy_sp.jpg");
}

@media (min-width: 40rem) {
  .privacy .page-visual__bg {
    background-image: url("/wp-content/themes/eekurashi/dist/images/visual/privacy_pc.jpg");
  }
}

@media (min-width: 64rem) {
  .privacy .c-section__header {
    margin-bottom: 3rem;
  }
  .privacy .title-box {
    padding: .85em 1em;
  }
}

.c-section__privacy:not(:last-child) {
  margin-bottom: 5rem;
}

@media (min-width: 64rem) {
  .c-section__privacy:not(:last-child) {
    margin-bottom: 7rem;
  }
}

.privacy__list {
  text-align: justify;
}

.privacy__list:not(:last-child) {
  margin-bottom: 4rem;
}

.privacy__list > dt {
  color: #56587c;
  font-size: 1.8rem;
  margin-bottom: 1em;
}

.privacy__list > dd p:not(:last-child) {
  margin-bottom: 1em;
}

.privacy__list > dd {
  font-size: 1.5rem;
}

.privacy__list > dd > ul {
  margin-bottom: .8em;
}

.privacy__list > dd > ul > li {
  position: relative;
  line-height: 2.13;
  padding-left: .5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}

.privacy__list > dd > ul > li:not(:last-child) {
  margin-bottom: 1em;
}

.privacy__list > dd > dl {
  margin-bottom: .5em;
}

.privacy__list > dd dt {
  color: #79cdcd;
}

.privacy__list dd > ul > li:before {
  content: '';
  width: 5px;
  height: 5px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #79cdcd;
  position: relative;
  left: -.5em;
  top: -3px;
}

@media (min-width: 40rem) {
  .privacy__list > dd p:not(:last-child) {
    margin-bottom: .7em;
  }
  .privacy__list > dd > ul > li:not(:last-child) {
    margin-bottom: .6em;
  }
  .privacy__list > dd > dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .privacy__list > dd dt {
    -ms-flex-preferred-size: 10rem;
    flex-basis: 10rem;
  }
}

.handling .c-section__header {
  margin-bottom: 5rem;
}

.contact .page-visual__bg,
.contact-confirm .page-visual__bg,
.contact-thanks .page-visual__bg {
  background-image: url("/wp-content/themes/eekurashi/dist/images/visual/contact_sp.jpg");
}

@media (min-width: 40rem) {
  .contact .page-visual__bg,
  .contact-confirm .page-visual__bg,
  .contact-thanks .page-visual__bg {
    background-image: url("/wp-content/themes/eekurashi/dist/images/visual/contact_pc.jpg");
  }
}

@media (min-width: 64rem) {
  .c-section__contact .c-section__header p {
    text-align: center;
  }
}

.contact__head .c-section__content {
  margin-bottom: 3em;
}

.form__contents .c-section__title {
  font-size: 2.6rem;
  margin-bottom: 2em;
}

.form__contents .c-section__header__title__jp {
  text-align: center;
}

.form__contents .c-section__title__label {
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  line-height: 2;
  letter-spacing: 0;
}

.form__contents .c-section__title__label:before, .form__contents .c-section__title__label:after {
  content: none;
}

.form__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: solid 1px #79cdcd;
  font-size: 1.5rem;
  padding-bottom: 1.5em;
}

.form__list:not(:last-child) {
  margin-bottom: 1.5em;
}

.form__list:first-child {
  padding-top: 1.5em;
  border-top: solid 1px #79cdcd;
}

.form__list > dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: .8125em;
}

.form__list__title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-weight: bold;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  max-width: 200px;
}

.form__list .require {
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  background-color: #56587c;
  padding: 0.334em 0.667em;
  margin-left: 1.25em;
  max-width: 40px;
  letter-spacing: 0;
  -ms-flex-item-align: center;
  align-self: center;
}

@media (min-width: 64rem) {
  .form__list > dt {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-right: 3.75em;
  }
}

.select-box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.select-box__label {
  width: 60px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.select-box .select__input__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 260px;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.select-box .select__input__wrap:not(:last-of-type) {
  margin-bottom: 1em;
}

.select-box .select__input__wrap input, .select-box .select__input__wrap select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: 200px;
}

.radio__wrap .c-btn--block {
  margin-bottom: .3em;
}

.radio__wrap:not(:last-of-type) {
  margin-bottom: 1em;
}

.mw_wp_form .horizontal-item + .horizontal-item {
  margin-left: 0 !important;
}

.form__contents {
  margin-bottom: 12rem;
}

.form__contents .c-section__content {
  text-align: center;
}

form {
  margin-left: auto;
  margin-right: auto;
}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /*Firefox用*/
  text-indent: .01px;
  text-overflow: "";
}

select::-ms-expand {
  display: none;
}

::-ms-clear {
  display: none;
}

:placeholder-shown {
  color: #B2B2B2;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
  color: #B2B2B2;
}

/* Firefox 18- */
:-moz-placeholder {
  color: #B2B2B2;
  opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
  color: #B2B2B2;
  opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
  color: #B2B2B2;
}

input, textarea, optgroup, select, button {
  line-height: 1.6;
}

select {
  width: 100%;
}

[type="checkbox"], [type="radio"] {
  margin-right: .5em;
}

input[type='text'],
input[type='email'],
select,
textarea {
  font-size: 1.5rem;
  height: 40px;
  border: 1px solid #1e2c5b;
  background-color: #fff;
  padding: 0 .6em;
  border-radius: 0;
}

textarea {
  height: 160px;
  padding: .6em;
}

@media (min-width: 64rem) {
  textarea {
    height: 200px;
  }
}

.privacy__confirm {
  margin-top: 3.6rem;
}

.privacy__confirm p {
  margin-bottom: 1.5em;
}

.privacy__confirm a {
  color: #79cdcd;
  text-decoration: underline;
}

.privacy__confirm a:hover {
  text-decoration: none;
}

.privacy__confirm .c-row {
  font-size: 1.4rem;
  margin-bottom: 2.5em;
}

@media (min-width: 40rem) {
  .privacy__confirm {
    margin-top: 5.5rem;
  }
  .privacy__confirm p {
    text-align: center;
  }
}

/*  ボタン
------------------------*/
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 630px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  color: #fff;
  background-color: #79cdcd;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  height: 80px;
}

.submit {
  font-size: 1.8rem;
  letter-spacing: .2em;
  margin-top: 2.5em;
}

.submit:hover {
  opacity: .7;
}

.submit:disabled {
  background-color: #c4c4c4;
  opacity: .5;
}

.submitBack {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  font-size: 1.5rem;
  font-weight: bold;
  color: #1e2c5b;
}

.btn-wrap {
  width: 100%;
  position: relative;
  color: #fff;
  margin: 0 auto;
}

.btn-wrap:after {
  display: block;
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 1.25em;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

@media (min-width: 64rem) {
  .btn-wrap {
    max-width: 500px;
  }
}

.form-btn__wrap {
  max-width: 630px;
  margin: 4.2em auto 0;
  position: relative;
  background-color: #05879f;
}

.mw_wp_form .error {
  margin-top: .5em;
  color: #da0a0a;
}

.c-section__contact__confirm form > p {
  line-height: 1;
}

.c-section__contact__confirm .select__input__wrap:after {
  content: none;
}

.c-section__contact__confirm .required,
.c-section__contact__confirm .privacy__confirm,
.c-section__contact__confirm .select-box__label,
.c-section__contact__confirm .formList .c-btn--block {
  display: none;
}

.c-section__contact__confirm .submit {
  margin-top: 3.4em;
}

.c-section__contact__confirm .back-btn {
  cursor: pointer;
  font-size: 1.5rem;
  color: inherit;
  font-weight: bold;
  background-color: transparent;
  border: none;
  letter-spacing: .1em;
}

.c-section__contact__confirm .back-btn:hover {
  text-decoration: underline;
}

.c-section__contact__thanks .text-group__title {
  font-size: 2.4rem;
  margin-bottom: 2.1em;
}

.c-section__contact__thanks .c-section__header {
  margin-bottom: 6rem;
}

.c-section__contact__thanks .title-h2 {
  text-align: center;
}

.c-section__contact__thanks .btn-wrap {
  background-color: #79cdcd;
}

.c-section__contact__thanks .btn-wrap:hover {
  opacity: .7;
}

.c-section__contact__thanks .btn-wrap:after {
  right: inherit;
  left: 1.25em;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.c-section__contact__thanks .btn-wrap .btn-top {
  font-size: 1.8rem;
  font-weight: bold;
  width: 100%;
  height: 60px;
  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;
  letter-spacing: .2em;
}

@media (min-width: 64rem) {
  .c-section__contact__thanks .c-section__header {
    margin-bottom: 11rem;
  }
  .c-section__contact__thanks .btn-wrap .btn-top {
    font-size: 2rem;
    height: 80px;
  }
  .c-section__contact__thanks p {
    text-align: center;
  }
}

.mw_wp_form .error {
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: .5em;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

input[type='text'],
input[type='email'],
textarea {
  width: 100%;
  max-width: 100%;
  border: solid 1px #bcbcbc;
}

/*
---
name: .u-shake-vertical
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/shake-vertical
---
Shake vertical utility

### html
```html
<div class="u-shake-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-shake-vertical:hover, .u-shake-vertical:active, .u-shake-vertical:focus {
  position: relative;
  -webkit-animation: _bounce_vertical_4px 0.5s;
  animation: _bounce_vertical_4px 0.5s;
}

@-webkit-keyframes _bounce_vertical_4px {
  0% {
    top: -4px;
  }
  25% {
    top: 4px;
  }
  50% {
    top: -2px;
  }
  75% {
    top: 2px;
  }
  100% {
    top: 0;
  }
}

@keyframes _bounce_vertical_4px {
  0% {
    top: -4px;
  }
  25% {
    top: 4px;
  }
  50% {
    top: -2px;
  }
  75% {
    top: 2px;
  }
  100% {
    top: 0;
  }
}

/*
---
name: .u-vibrate-vertical
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/vibrate-vertical
---
Vibrate vertical utility

### html
```html
<div class="u-vibrate-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-vibrate-vertical:hover, .u-vibrate-vertical:active, .u-vibrate-vertical:focus {
  position: relative;
  -webkit-animation: _bounce_vertical_2px 0.2s;
  animation: _bounce_vertical_2px 0.2s;
}

@-webkit-keyframes _bounce_vertical_2px {
  0% {
    top: -2px;
  }
  25% {
    top: 2px;
  }
  50% {
    top: -1px;
  }
  75% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

@keyframes _bounce_vertical_2px {
  0% {
    top: -2px;
  }
  25% {
    top: 2px;
  }
  50% {
    top: -1px;
  }
  75% {
    top: 1px;
  }
  100% {
    top: 0;
  }
}

/*
---
name: .u-shake-horizontal
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/shake-horizontal
---
Shake horizontal utility

### html
```html
<div class="u-shake-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-shake-horizontal:hover, .u-shake-horizontal:active, .u-shake-horizontal:focus {
  position: relative;
  -webkit-animation: _bounce_horizontal_4px 0.5s;
  animation: _bounce_horizontal_4px 0.5s;
}

@-webkit-keyframes _bounce_horizontal_4px {
  0% {
    left: -4px;
  }
  25% {
    left: 4px;
  }
  50% {
    left: -2px;
  }
  75% {
    left: 2px;
  }
  100% {
    left: 0;
  }
}

@keyframes _bounce_horizontal_4px {
  0% {
    left: -4px;
  }
  25% {
    left: 4px;
  }
  50% {
    left: -2px;
  }
  75% {
    left: 2px;
  }
  100% {
    left: 0;
  }
}

/*
---
name: .u-vibrate-horizontal
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/vibrate-horizontal
---
Vibrate horizontal utility

### html
```html
<div class="u-vibrate-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-vibrate-horizontal:hover, .u-vibrate-horizontal:active, .u-vibrate-horizontal:focus {
  position: relative;
  -webkit-animation: _bounce_horizontal_2px 0.2s;
  animation: _bounce_horizontal_2px 0.2s;
}

@-webkit-keyframes _bounce_horizontal_2px {
  0% {
    left: -2px;
  }
  25% {
    left: 2px;
  }
  50% {
    left: -1px;
  }
  75% {
    left: 1px;
  }
  100% {
    left: 0;
  }
}

@keyframes _bounce_horizontal_2px {
  0% {
    left: -2px;
  }
  25% {
    left: 2px;
  }
  50% {
    left: -1px;
  }
  75% {
    left: 1px;
  }
  100% {
    left: 0;
  }
}

/*
---
name: .u-shake-scale
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/shake-scale
---
Shake scale utility

### html
```html
<div class="u-shake-scale" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-shake-scale:hover, .u-shake-scale:active, .u-shake-scale:focus {
  -webkit-animation: _bounce_scale_120 0.5s ease-out;
  animation: _bounce_scale_120 0.5s ease-out;
}

@-webkit-keyframes _bounce_scale_120 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes _bounce_scale_120 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
---
name: .u-vibrate-scale
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/vibrate-scale
---
Vibrate scale utility

### html
```html
<div class="u-vibrate-scale" style="background-color: #333; width: 40px; height: 40px;"></div>
```
*/
.u-vibrate-scale:hover, .u-vibrate-scale:active, .u-vibrate-scale:focus {
  -webkit-animation: _bounce_scale_110 0.2s ease-out;
  animation: _bounce_scale_110 0.2s ease-out;
}

@-webkit-keyframes _bounce_scale_110 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes _bounce_scale_110 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
---
name: .u-extend-underline
category:
  - object/utility
  - object/utility/animation
  - object/utility/animation/extend-underline
---
Extend underline utility

### html
```html
<span class="u-extend-underline">menu</span>
```
*/
.u-extend-underline {
  position: relative;
}

.u-extend-underline::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  content: '';
  width: 0;
  height: 1px;
  -webkit-transition: width 0.1s ease-out;
  transition: width 0.1s ease-out;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #4c4c4c;
}

.u-extend-underline:hover::after, .u-extend-underline:active::after, .u-extend-underline:focus::after {
  width: 100%;
}

/*
---
name: .u-clearfix
category:
  - object/utility
  - object/utility/clearfix
---
Clearfix utility

### html
```html
<div class="u-clearfix">
  <img class="u-pull-left" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-right: 1em">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
```
*/
.u-clearfix:before, .u-clearfix:after {
  content: " ";
  display: table;
}

.u-clearfix:after {
  clear: both;
}

/*
---
name: .u-content
category:
  - object/utility
  - object/utility/content
---
Content utility

### html
```html
<div class="u-content">
  <h1>Heading 1</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h2>Heading 2</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h3>Heading 3</h3>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>Nulla accumsan</li>
    <li>metus ultrices eleifend gravida</li>
  </ul>
  <ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>Nulla accumsan</li>
    <li>metus ultrices eleifend gravida</li>
  </ol>
  <dl>
    <dt>Lorem ipsum dolor sit amet</dt>
    <dd>consectetur adipiscing elit</dd>
    <dt>Nulla accumsan</dt>
    <dd>metus ultrices eleifend gravida</dd>
  </dl>
  <h4>Heading 4</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h5>Heading 5</h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h6>Heading 6</h6>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
</div>
```
*/
.u-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

.u-content > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  margin-top: 22.5px;
}

.u-content > h1 {
  margin-top: 0;
  margin-bottom: 22.5px;
}

.u-content > h2 {
  margin-top: 45px;
  margin-bottom: 22.5px;
}

.u-content > h3 {
  margin-top: 33.75px;
  margin-bottom: 22.5px;
}

.u-content > h4 {
  margin-top: 28.125px;
  margin-bottom: 22.5px;
}

.u-content > h5 {
  margin-top: 22.5px;
  margin-bottom: 11.25px;
}

.u-content > h6 {
  margin-top: 22.5px;
  margin-bottom: 11.25px;
}

.u-content > :first-child {
  margin-top: 0;
}

.u-content > ol ol,
.u-content > ol ul,
.u-content > ul ol,
.u-content > ul ul {
  margin-bottom: 0;
}

/*
---
name: .u-hidden
category:
  - object/utility
  - object/utility/hidden
  - object/utility/hidden/hidden
---
Hidden utility

### html
```html
<div class="u-hidden">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
.u-hidden {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  speak: none !important;
  visibility: hidden !important;
}

/*
---
name: .u-hidden-sm
category:
  - object/utility
  - object/utility/hidden
  - object/utility/hidden/hidden-sm
---
Hidden utility for sm

### html
```html
<div class="u-hidden-sm">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (max-width: 39.93333rem) {
  .u-hidden-sm {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    speak: none !important;
    visibility: hidden !important;
  }
}

/*
---
name: .u-hidden-md
category:
  - object/utility
  - object/utility/hidden
  - object/utility/hidden/hidden-md
---
Hidden utility for md

### html
```html
<div class="u-hidden-md">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 40rem) and (max-width: 63.93333rem) {
  .u-hidden-md {
    display: none !important;
  }
}

/*
---
name: .u-hidden-md-up
category:
  - object/utility
  - object/utility/hidden
  - object/utility/hidden/hidden-md-up
---
Hidden utility for md or more

### html
```html
<div class="u-hidden-md-up">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 40rem) {
  .u-hidden-md-up {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    speak: none !important;
    visibility: hidden !important;
  }
}

/*
---
name: .u-hidden-lg
category:
  - object/utility
  - object/utility/hidden
  - object/utility/hidden/hidden-lg
---
Hidden utility for lg

### html
```html
<div class="u-hidden-lg">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 64rem) {
  .u-hidden-lg {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    speak: none !important;
    visibility: hidden !important;
  }
}

/*
---
name: .u-img-2x
category:
  - object/utility
  - object/utility/img-2x
---
Retina image size utility

### html
```html
<img class="u-img-2x" src="/basis/aigis_assets/images/dummy.jpg">
```
*/
.u-img-2x {
  zoom: 0.5 !important;
}

/*
---
name: .u-pull-right
category:
  - object/utility
  - object/utility/pull
  - object/utility/pull/pull-right
---
Pull right utility

### html
```html
<img class="u-pull-right" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-left: 1em">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
```
*/
.u-pull-right {
  float: right !important;
}

/*
---
name: .u-pull-left
category:
  - object/utility
  - object/utility/pull
  - object/utility/pull/pull-left
---
Pull left utility

### html
```html
<img class="u-pull-left" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-right: 1em">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
```
*/
.u-pull-left {
  float: left !important;
}

/*
---
name: .u-text-center
category:
  - object/utility
  - object/utility/text
  - object/utility/text/text-center
---
Centering text utility

### html
```html
<div class="u-text-center">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
.u-text-center {
  text-align: center !important;
}

/*
---
name: .u-text-right
category:
  - object/utility
  - object/utility/text
  - object/utility/text/text-right
---
Right justified text utility

### html
```html
<div class="u-text-right">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
.u-text-right {
  text-align: right !important;
}

/*
---
name: .u-text-left
category:
  - object/utility
  - object/utility/text
  - object/utility/text/text-left
---
Left justified text utility

### html
```html
<div class="u-text-left">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
.u-text-left {
  text-align: left !important;
}

/*
---
name: .u-transition
category:
  - object/utility
  - object/utility/transition
---
Transition utility

### html
```html
<style>
.u-transition:hover {
  width: 100% !important;
  opacity: .5 !important;
}
</style>
<div class="u-transition" style="background-color: #333; width: 100px; height: 20px;"></div>
```
*/
.u-transition {
  -webkit-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}

/*
---
name: .u-visible
category:
  - object/utility
  - object/utility/visible
  - object/utility/visible/visible
---
Visible utility

### html
```html
<div class="u-visible">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
.u-visible {
  position: static !important;
  clip: auto !important;
  speak: normal !important;
  visibility: visible !important;
}

/*
---
name: .u-visible-sm
category:
  - object/utility
  - object/utility/visible
  - object/utility/visible/visible-sm
---
Visible utility for sm

### html
```html
<div class="u-hidden u-visible-sm">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (max-width: 39.93333rem) {
  .u-visible-sm {
    position: static !important;
    clip: auto !important;
    speak: normal !important;
    visibility: visible !important;
  }
}

/*
---
name: .u-visible-md
category:
  - object/utility
  - object/utility/visible
  - object/utility/visible/visible-md
---
Visible utility for md

### html
```html
<div class="u-hidden u-visible-md">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 40rem) and (max-width: 63.93333rem) {
  .u-visible-md {
    position: static !important;
    clip: auto !important;
    speak: normal !important;
    visibility: visible !important;
  }
}

/*
---
name: .u-visible-md-up
category:
  - object/utility
  - object/utility/visible
  - object/utility/visible/visible-md-up
---
Visible utility for md or more

### html
```html
<div class="u-hidden u-visible-md-up">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 40rem) {
  .u-visible-md-up {
    position: static !important;
    clip: auto !important;
    speak: normal !important;
    visibility: visible !important;
  }
}

/*
---
name: .u-visible-lg
category:
  - object/utility
  - object/utility/visible
  - object/utility/visible/visible-lg
---
Visible utility for lg

### html
```html
<div class="u-hidden u-visible-lg">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
```
*/
@media (min-width: 64rem) {
  .u-visible-lg {
    position: static !important;
    clip: auto !important;
    speak: normal !important;
    visibility: visible !important;
  }
}