@charset "UTF-8";
/* foundation */
/*
---
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: _px2em()
category:
  - core/function
---
Return em from px

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

font-size: _px2em(16px);
```
*/
/*
---
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   number  $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
// @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;
```
*/
/*
---
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-white
category:
  - core/variable
  - core/variable/color
---
Default white color

### scss
```scss
$_color-white: #fff;
```
*/
/*
---
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: $_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),
  'xl': (_px2rem(1280px) / _px2rem($_base-font-size-px) * 1em)
);
```
*/
/*
---
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: $_container-max-width
category:
  - core/abstract
  - core/abstract/container
  - core/variable/container
---
Container max width

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

$_container-max-width: 1200px;
```
*/
/*
---
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: $_page-effect-z-index
category:
  - core/abstract
  - core/variable/page-effect
---
`z-index` of page effect

### scss
```scss
$_page-effect-z-index: 1000000;
```
*/
/*
---
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(lg) {
    @include _bounce-vertical(4px, .5s);
  }
}
```
*/
/*
---
name: _shake-vertical()
category:
  - core/mixin
  - core/mixin/animation
---
Shake vertical

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

### scss
```scss
.c-foo {
  @include _hover(lg) {
    @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(lg) {
    @include _bounce-horizontal(4px, .5s);
  }
}
```
*/
/*
---
name: _shake-horizontal()
category:
  - core/mixin
  - core/mixin/animation
---
Shake horizontal

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

### scss
```scss
.c-foo {
  @include _hover(lg) {
    @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(lg) {
    @include _bounce-scale(1.2, .5s);
  }
}
```
*/
/*
---
name: _shake-scale()
category:
  - core/mixin
  - core/mixin/animation
---
Shake scale

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

### scss
```scss
.c-foo {
  @include _hover(lg) {
    @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(lg) {
    &::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: _between-content()
category:
  - core/mixin
---
Sets Child elements margin

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

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

### html
```ejs
<div class="u-between-content">
  ...
</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
//
// @param  size|length  $size
//

img {
  @include _hover(lg) {
    opacity: .8;
  }
}

img {
  @include _hover(md) {
    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-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-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: _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: _overlay()
category:
  - core/mixin
---
Overlay helper

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

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

### scss
```scss
//
// @param  int  $coefficient
// @param  boolean  $apply-margin-scale
//

@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
// @param  boolean  $apply-margin-scale
//

@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
// @param  boolean  $apply-margin-scale
//

@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
// @param  boolean  $apply-margin-scale
//

@include _padding-left(1);
@include _padding-left(10px);
```
*/
/*
---
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: _position()
category:
  - core/mixin
  - core/mixin/position
---
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: _top()
category:
  - core/mixin
  - core/mixin/position
---
Sets top

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

@include _top(1);
@include _top(10px);
```
*/
/*
---
name: _right()
category:
  - core/mixin
  - core/mixin/position
---
Sets right

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

@include _right(1);
@include _right(10px);
```
*/
/*
---
name: _bottom()
category:
  - core/mixin
  - core/mixin/position
---
Sets bottom

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

@include _bottom(1);
@include _bottom(10px);
```
*/
/*
---
name: _left()
category:
  - core/mixin
  - core/mixin/position
---
Sets left

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

@include _left(1);
@include _left(10px);
```
*/
/*
---
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     $colors
//

.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     $colors
//

.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     $colors
//

.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     $colors
//

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

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

a {
  @include _transition(color, font-size);
  color: #f00;
  font-size: 12px;

  @include _hover(lg) {
    color: #f9c;
    font-size: 14px;
  }
}
```
*/
/*
---
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: _invisible()
category:
  - core/mixin
  - core/mixin/visibility
---
Invisible helper

### scss
```scss
.c-foo {
  @include _invisible();
}
```
*/
/*
---
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="#">Lorem</a></li>
  <li class="c-breadcrumbs__item">ipsum</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: _checkbox()
category:
  - core/abstract
  - core/abstract/form
---
Abstract checkbox component

### scss
```scss
.c-checkbox {
  @include _checkbox();
}
```

### html
```ejs
<label>
  <span class="c-checkbox">
    <input type="checkbox" class="c-checkbox__control">
    <span class="c-checkbox__label">...</span>
  </span>
</label>
```
*/
/*
---
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()
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 {
    position: absolute;
    @include _top(.5);
    @include _right(5px);
    @include _bottom(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',
});
```

### html
```ejs
<div style="min-height: 200px">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="my-drawer-btn">
    <div class="c-drawer__inner">
      <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>
              <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>
              </ul>
            </li>
          </ul>
        </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>
    </div>
  </nav>
</div>

<div id="my-drawer-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="drawer">
  <div class="c-hamburger-btn__bars">
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
  </div>
  <div class="c-hamburger-btn__label">MENU</div>
</div>
```
*/
/*
---
name: _dropdown()
category:
  - core/abstract
---
Abstract dropdown component

### scss
```scss
.c-dropdown {
  $item-padding-coefficient: 1;

  @include _dropdown();
  @include _transition(bottom, visibility);
  transition-timing-function: ease-in;

  &[aria-hidden="false"] {
    transition-timing-function: ease-out;
  }

  &__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 {
    position: absolute;
    @include _top(.5);
    @include _right(5px);
    @include _bottom(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-dropdown',
});
```

### html
```ejs
<div style="min-height: 200px; position: relative">
  <nav id="my-dropdown" class="c-dropdown" role="navigation" aria-hidden="true" aria-labelledby="my-dropdown-btn">
    <div class="c-dropdown__inner">
      <ul class="c-dropdown__menu">
        <li class="c-dropdown__item">
          <div class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="my-dropdown">
            <div class="c-hamburger-btn__bars">
              <div class="c-hamburger-btn__bar"></div>
              <div class="c-hamburger-btn__bar"></div>
              <div class="c-hamburger-btn__bar"></div>
            </div>
            <div class="c-hamburger-btn__label">MENU</div>
          </div>
        </li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item">
          <a href="#">menu</a>
          <div class="c-dropdown__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <ul class="c-dropdown__submenu" aria-hidden="true">
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

<div id="my-dropdown-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-dropdown">
  <div class="c-hamburger-btn__bars">
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
  </div>
  <div class="c-hamburger-btn__label">MENU</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: _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__bars">
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
    <div class="c-hamburger-btn__bar"></div>
  </div>
  <div class="c-hamburger-btn__label">MENU</div>
</div>

<nav id="drawer" aria-labelledby="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: _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({
  wrapper: '.c-navbar',
});
```

### 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>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <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>
          <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>
    <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">
    <a href="#">menu</a>
  </li>
</ul>
``````html
<ul class="c-navbar" data-popup-mode="click">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <div class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </div>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <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>
    <div class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </div>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <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">
    <a href="#">menu</a>
  </li>
</ul>
```
*/
/*
---
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: _pre()
category:
  - core/abstract
---
Abstract pre component

### scss
```scss
pre {
  @include _pre();
}
```

## html
```ejs
<pre>pre</pre>
```
*/
/*
---
name: _radio()
category:
  - core/abstract
  - core/abstract/form
---
Abstract radio button component

### scss
```scss
.c-radio {
  @include _radio();
}
```

### html
```ejs
<label>
  <span class="c-radio">
    <input type="radio" class="c-radio__control">
    <span class="c-radio__label">...</span>
  </span>
</label>
```
*/
/*
---
name: _responsive-container()
category:
  - core/abstract
---
Abstract responsive container component

### scss
```scss
.c-responsive-container-16-9 {
  @include _responsive-container();
  padding-bottom: (9 / 16 * 100%);
}
```

### html
```ejs
<div class="c-responsive-container-16-9">
  <iframe></iframe>
</div>
```
*/
/*
---
name: _responsive-table()
category:
  - core/abstract
---
Abstract responsive table component

### scss
```scss
.responsive-table {
  @include _media-max(sm) {
    @include _responsive-table();
  }
}
```

### html
```html
<div class="c-responsive-table">
  <table style="width: 1000px">
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
  </table>
</div>
```
*/
/*
---
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: _lattice()
category:
  - core/abstract
  - core/abstract/grid-system/lattice
---
Abstract row component of flexbox based grid system

### scss
```scss
.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

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

### html
```html
<div class="c-lattice">
  <div class="c-c-lattice__col c-row__c-lattice--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _lattice__col()
category:
  - core/abstract
  - core/abstract/grid-system/lattice
---
Abstract column element of flexbox based grid system

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

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col();

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

### html
```html
<div class="c-lattice">
  <div class="c-c-lattice__col c-row__c-lattice--1-3">
    ...
  </div>
</div>
```
*/
/*
---
name: _lattice__col--width()
category:
  - core/abstract
  - core/abstract/grid-system/lattice
---
Sets column width of flexbox based grid system

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

.c-lattice {
  @include _lattice();

  &__col {
    @include _lattice__col(1, 2);

    @include _media-min(lg) {
      @include _lattice__col--width(1 / 3 * 100%);
    }
  }
}
```
*/
/*
---
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();
}
```

### html
```ejs
<div class="c-select">
  <select class="c-select__control">
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__toggle"></span>
</div>
```
*/
/*
---
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>
```
*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: 0;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[hidden],
template {
  display: none;
}

html {
  font-size: calc(100vw / 768);
  -webkit-tap-highlight-color: transparent;
}
@media screen and (min-width: 769px) {
  html {
    font-size: 1px;
  }
}

body {
  font-family: "Yu Gothic", YuGothic, 游ゴシック体, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
  font-size: 30rem;
  font-weight: 500;
  color: #003e6f;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 17rem;
  }
}

#__nuxt img {
  width: 100%;
}

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

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

button {
  border: 0;
}

svg {
  vertical-align: bottom;
}

.sk-chase {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-animation: sk-chase 2.5s infinite linear both;
          animation: sk-chase 2.5s infinite linear both;
}
@-webkit-keyframes sk-chase {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes sk-chase {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes sk-chase-dot {
  80%, 100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes sk-chase-dot {
  80%, 100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes sk-chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100%, 0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes sk-chase-dot-before {
  50% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  100%, 0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.sk-chase-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: sk-chase-dot 2s infinite ease-in-out both;
          animation: sk-chase-dot 2s infinite ease-in-out both;
}
.sk-chase-dot::before {
  content: "";
  display: block;
  width: 25%;
  height: 25%;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sk-chase-dot-before 2s infinite ease-in-out both;
          animation: sk-chase-dot-before 2s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.sk-chase-dot:nth-child(3) {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1)::before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2)::before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.sk-chase-dot:nth-child(3)::before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4)::before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5)::before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6)::before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s;
}

/* faq */
.c-ttl-balloon {
  margin-bottom: 70rem;
}
@media screen and (min-width: 769px) {
  .c-ttl-balloon {
    position: relative;
  }
}
@media screen and (min-width: 769px) {
  .c-ttl-balloon::before {
    content: "";
    position: absolute;
  }
}

@media screen and (min-width: 769px) {
  .c-ttl-balloon--fusa01::before {
    top: -45rem;
    left: 20rem;
    width: 104rem;
    height: 112rem;
    background: url(/img/faq/fusa01.svg) no-repeat;
    background-size: cover;
  }
}

@media screen and (min-width: 769px) {
  .c-ttl-balloon--fusa02::before {
    top: -55rem;
    right: 50rem;
    width: 63rem;
    height: 139rem;
    background: url(/img/faq/fusa02.svg) no-repeat;
    background-size: cover;
  }
}

@media screen and (min-width: 769px) {
  .c-section {
    margin-bottom: 70rem;
  }
}

.p-page-faq__item {
  margin-bottom: 50rem;
}

.p-page-faq__ttl {
  background: #dceff6;
  position: relative;
  padding: 15rem 110rem 15rem 30rem;
  min-height: 120rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 769px) {
  .p-page-faq__ttl {
    padding: 10px 45rem 10rem 25rem;
    min-height: 50rem;
    font-size: 18rem;
  }
}
.p-page-faq__ttl::before, .p-page-faq__ttl::after {
  content: "";
  display: block;
  position: absolute;
  width: 30rem;
  height: 2rem;
  margin-top: -1rem;
  top: 50%;
  right: 25rem;
  background-color: #003e6f;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
@media screen and (min-width: 769px) {
  .p-page-faq__ttl::before, .p-page-faq__ttl::after {
    width: 15rem;
    height: 1rem;
    right: 15rem;
  }
}
.p-page-faq__ttl::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.p-page-faq__ttl.open::after {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
@media screen and (min-width: 769px) {
  .p-page-faq__ttl:hover {
    opacity: 0.6;
  }
}

.p-page-faq__num {
  color: #008bb6;
  font-family: "Barlow", sans-serif;
  font-size: 46rem;
  letter-spacing: 0.1em;
  margin-right: 25rem;
}
@media screen and (min-width: 769px) {
  .p-page-faq__num {
    font-size: 28rem;
    line-height: 1;
  }
}

.p-page-faq__txt {
  padding: 20rem 30rem;
  border: solid 3rem #db499e;
  line-height: 1.7;
  display: none;
}
@media screen and (min-width: 769px) {
  .p-page-faq__txt {
    font-size: 15rem;
    border: solid 2.5rem #db499e;
    line-height: 1.8;
  }
}

.p-page-faq__link {
  text-decoration: underline;
  cursor: pointer;
}
@media screen and (min-width: 769px) {
  .p-page-faq__link:hover {
    text-decoration: none;
  }
}

.p-faq-CVA {
  margin-top: 30rem;
}

.p-faq-CVA__ttl {
  font-size: 30rem;
  margin-bottom: 10rem;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA__ttl {
    font-size: 18rem;
  }
}

@media screen and (min-width: 769px) {
  .p-faq-CVA__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}

.p-faq-CVA__item {
  color: #fff;
  height: 100rem;
  margin-bottom: 20rem;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA__item {
    width: calc((100% - 20rem) / 3);
    height: 70rem;
    margin-bottom: 10rem;
  }
}

.p-faq-CVA__item--tel {
  background: #003e6f;
}

.p-faq-CVA__item--mail {
  background: #db499e;
}

.p-faq-CVA__item--line {
  background: #00b74b;
}

@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__txt {
    font-size: 20rem;
  }
}
.p-faq-CVA .p-CVA__sub-txt {
  font-size: 21rem;
  display: inline-block;
  font-weight: 500;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__sub-txt {
    font-size: 12rem;
  }
}
@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__txt-large {
    font-size: 24rem;
  }
}
.p-faq-CVA .p-CVA__tel-time {
  font-size: 21rem;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__tel-time {
    font-size: 12rem;
  }
}
.p-faq-CVA .p-CVA__tel-num {
  font-size: 30rem;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__btn--tel .p-CVA__txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.p-faq-CVA .p-CVA__btn--line .p-CVA__txt {
  padding-right: 26rem;
  padding-top: 6rem;
}
@media screen and (min-width: 769px) {
  .p-faq-CVA .p-CVA__btn--line .p-CVA__sub-txt {
    -webkit-transform: translateY(-4rem);
            transform: translateY(-4rem);
  }
  .p-faq-CVA .p-CVA__btn--line:before {
    font-size: 40rem;
  }
}
/*# sourceMappingURL=_faq.css.map */