@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;

700;900&display=swap);@charset "UTF-8";

/**
 * CONTENTS 目次
 *
 * ABSTRACTS
 * Mixins...............ミックスイン
 * Variables............変数
 *
 * BASE
 * Base.................基本スタイル
 * Fonts................フォント
 * Helpers..............ヘルパー
 * Reset................リセットCSS
 * Typography...........タイポグラフィ（フォントサイズなど）
 *
 * LAYOUT
 * Footer...............フッター
 * Form.................フォーム
 * Grid.................グリッド
 * Header...............ヘッダ
 * Menu.................メニュー
 * Sidebar..............サイドメニュー
 *
 * COMPONENTS
 * Background...........背景
 * Badge................バッジ
 * Border...............ボーダー
 * Button...............ボタン
 * Card.................カード
 * Display..............Display
 * Flex.................フレックス
 * Float................フロート
 * Icon.................アイコン
 * Image................画像
 * List.................リスト
 * Navigation...........ナビゲーション
 * Modal................モーダル
 * Position.............方向
 * Slider...............スライドショー
 * Spacing..............空白（マージンとパディング）
 * Table................表
 * Text.................テキスト、文字
 * Tooltip..............ツールチップ
 *
 * VENDORS
 * Media................メディアクエリ
 * Normalize.css........ブラウザの設定の正規化
 */

/*------------------------------------*\
    フォント
\*------------------------------------*/

/*------------------------------------*\
    空白
\*------------------------------------*/

/*------------------------------------*\
    色
\*------------------------------------*/

/*------------------------------------*\
    アニメーション
\*------------------------------------*/

/*------------------------------------*\
    グリッド
\*------------------------------------*/

/*------------------------------------*\
    URL
\*------------------------------------*/

/*------------------------------------*\
    Body
\*------------------------------------*/

/*------------------------------------*\
    ボーダー
\*------------------------------------*/

/*------------------------------------*\
    Display
\*------------------------------------*/

/*------------------------------------*\
    Position
\*------------------------------------*/

/*------------------------------------*\
    Z-index
\*------------------------------------*/

/*------------------------------------*\
    Tooltip
\*------------------------------------*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * 1. Remove the focus Firefox and Safari.
 */

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove the default appearance in browsers.
 */

input,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

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

/**
 * Restore the focus styles unset by the previous rule.
 */

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

/**
 * Correct the padding in Firefox.
 */

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

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

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

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */

/**
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/**
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  -webkit-text-size-adjust: none;
}

mark {
  background-color: transparent;
  color: inherit;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input,
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

/**
 * MSIE: IEMobileに必要
 */

@-ms-viewport {
  width: device-width;
}

/**
 * MSIE: スクロールバーがコンテンツと重複するのを防ぐ
 */

body {
  -ms-overflow-style: scrollbar;
}

/**
 * ページの幅を >=320px　に設定する
 */

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

/**
 * border-box は、要素に指定した width および height の中で境界線およびパディングを取るように
 * ブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線や
 * パディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対する
 * サイズ設定をもっと簡単になります。
 */

html {
  box-sizing: border-box;
}

/**
 * DOMのすべての要素を親と同じ box-sizing を設定します。
 * 詳細については: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */

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

/**
 * bodyの基本スタイル
 */

body {
  background-color: #fff;
}

/**
 * ブロック部分の基本スタイル
 */

article,
section,
table {
  display: block;
}

/**
 * 画像の基本スタイル
 */

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

/*------------------------------------*\
    Noto Sans JP
\*------------------------------------*/

/**
 * Clearfix
 */

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

/**
 * メインコンテナ
 * 1. 全幅を設定する
 * 2. ビューポートの中央に配置する
 * 3. 端に空白を残す
 */

.container {
  max-width: 1200px;
  /* 1 */
  width: 100%;
  /* 1 */
  margin-left: auto;
  /* 2 */
  margin-right: auto;
  /* 2 */
  padding-left: 20px;
  /* 3 */
  padding-right: 20px;
  /* 3 */
}

/**
 * スクリーンリーダーで読みやすいようにテキストを非表示にする
 * 1. WebKit-系ブラウザで必要
 *    詳細: https://code.google.com/p/chromium/issues/detail?id=457146
 */

.hide-text {
  overflow: hidden;
  padding: 0;
  /* 1 */
  text-indent: 101%;
  white-space: nowrap;
}

/**
 * スクリーンリーダーで読みやすいようにテキストを非表示にする
 * HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */

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

/**
 * v-cloak 不完全形態のWebページを表示させなくする方法
 */

[v-cloak] {
  display: none;
}

/**
 * htmlの基本スタイル
 */

html {
  overflow-x: hidden;
}

/**
 * bodyの基本スタイル
 * 1. bodyのフォントカラー
 * 2. bodyの基本フォント設定
 *   font: [font-style] [font-size]/[line-height] [font-family 1, font-family 2, ..., font-family n]
 */

body {
  color: #212a2f;
  /* 1 */
  font: normal 14px/1.75 "Noto Sans JP", Meiryo, sans-serif;
  /* 2 */
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/**
* h1
* 1. フォントのサイズ
*    font-size: [bodyのfont-size]＊[48px]
* 2. line-heightの設定基準
*    line-height: [bodyのline-height]/[h1のfont-size]
*/

h1,
.h1 {
  font-size: 2.286em;
  /* 1 */
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.3;
  /* 2 */
  margin-bottom: 0.5em;
}

@media (min-width: 992px) {
  h1,
  .h1 {
    font-size: 3em;
  }
}

h2,
h3,
h4,
h5,
h6,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 14px;
}

h2,
.h2 {
  font-size: 1.786em;
  /* 1 */
  letter-spacing: 0.1em;
}

@media (min-width: 768px) {
  h2,
  .h2 {
    font-size: 2em;
  }
}

h3,
.h3 {
  font-size: 1.286em;
  /* 1 */
  letter-spacing: 0.05em;
}

@media (min-width: 768px) {
  h3,
  .h3 {
    font-size: 1.375em;
  }
}

h4,
.h4 {
  font-size: 1.143em;
  /* 1 */
  font-weight: 900;
}

@media (min-width: 768px) {
  h4,
  .h4 {
    font-size: 1em;
  }
}

h5,
.h5 {
  font-size: 0.8em;
  /* 1 */
}

h6,
.h6 {
  font-size: 0.8em;
  /* 1*/
}

/**
* p要素
*/

p {
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

/**
* small要素
*/

small {
  font-size: 0.875em;
  line-height: 1.7em;
}

/**
* a要素
*/

a {
  border-bottom: dotted 1px rgba(33, 42, 47, 0.5);
  color: inherit;
  transition: border-bottom-color 0.2s ease, color 0.2s ease;
}

a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none;
}

a:hover {
  border-bottom-color: transparent;
  color: #fcc325;
}

/**
* strong, b要素
*/

strong,
b {
  font-weight: 700;
}

/**
* em, i要素
*/

em,
i {
  font-style: italic;
}

/**
* sub要素
*/

sub {
  font-size: 0.75em;
  position: relative;
  top: 0.5em;
}

/**
* sup要素
*/

sup {
  font-size: 0.75em;
  position: relative;
  top: -5px;
}

/**
* blockquote要素
*/

blockquote {
  border-left: 4px solid #D3D4D5;
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 24px;
  padding: 8px 0 8px 24px;
}

/**
* pre要素
*/

pre {
  line-height: 1.5;
  margin-bottom: 24px;
}

pre code {
  display: block;
  line-height: 1.75;
  padding: 16px 24px;
  overflow-x: auto;
}

/**
* code要素
*/

code {
  line-height: 1.5em;
  margin-bottom: 1.5em;
}

/**
* hr要素
*/

hr {
  border: 0;
  border-bottom: 1px solid #D3D4D5;
  margin: 24px 0;
}

/**
* ol, ul要素
*/

ol,
ul {
  line-height: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1.25em;
}

ol {
  list-style: decimal;
}

ol li {
  padding-left: 0.25em;
}

ul {
  list-style: disc;
}

ul li {
  padding-left: 0.5em;
}

/**
 * フッターの基本スタイル。 `.footer--*` でスタイルを追加してください。
 * class.
 */

.footer {
  background-color: #212a2f;
  color: #fff;
  text-align: center;
  position: relative;
  width: 100%;
}

@media (min-width: 768px) {
  .footer {
    text-align: left;
  }
}

.footer__link {
  padding-bottom: 0.5em;
}

.footer__copyright {
  border-top: 1px solid #fff;
  text-align: left;
}

.footer__copyright-logo {
  line-height: 3.45;
}

/**
 * 入力欄の基本スタイル。 `.input--*` でスタイルを追加してください。
 * class.
 */

.input,
.textarea {
  border: none;
  border-bottom: 1px solid #c9c9c9;
  display: block;
  padding: 8px;
  transition: all 0.5s ease-out;
  width: 100%;
}

.input:active,
.input:focus,
.textarea:active,
.textarea:focus {
  background-color: #fff;
  border-color: #fcc325;
  border-width: 2px;
  color: #333;
  outline: none;
}

.input:not(:placeholder-shown),
.textarea:not(:placeholder-shown) {
  background-color: #fff;
  border-color: #fcc325;
  color: #333;
}

.input:invalid,
.textarea:invalid {
  background-color: #FFEFEF;
  border-color: #ce0000;
  color: #ce0000;
}

.input input:-webkit-autofill,
.input input:-webkit-autofill:hover,
.input input:-webkit-autofill:focus,
.input input:-webkit-autofill:active,
.textarea input:-webkit-autofill,
.textarea input:-webkit-autofill:hover,
.textarea input:-webkit-autofill:focus,
.textarea input:-webkit-autofill:active {
  background-color: #FFEFEF;
}

/**
 * selectの基本スタイル。 `.select--*` でスタイルを追加してください。
 * class.
 */

.select {
  border: none;
  border-bottom: 1px solid #ccc;
  border-radius: 3px;
  padding: 9px;
  width: 100%;
}

.select--border {
  border: 1px solid #ccc;
}

/**
 * ドロップダウンメニューの基本スタイル。 `.dropdown--*` でスタイルを追加してください。
 * class.
 */

.dropdown {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.dropdown:first-child {
  color: #333;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  background-color: #fff;
  color: #333;
  cursor: auto;
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  min-width: 160px;
  z-index: 1;
}

/**
 * ラジオボタンメニューの基本スタイル。 `.radiobtn--*` でスタイルを追加してください。
 * 文字部分に`.radio-label`を追加してください。
 *
 * class.
 */

.radiobtn {
  margin: 0.5rem;
}

.radiobtn input[type=radio] {
  position: absolute;
  opacity: 0;
}

.radiobtn input[type=radio] + .radio-label:before {
  background-color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 100%;
  content: "";
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-right: 1em;
  height: 1.4em;
  width: 1.4em;
  vertical-align: bottom;
  text-align: center;
  transition: all 250ms ease;
}

.radiobtn input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #fff;
}

/**
 * チェックボックスの基本スタイル。 `.checkbox--*` でスタイルを追加してください。
 * 文字部分に`.checkbox-label`を追加してください。
 *
 * class.
 */

.checkbox {
  margin: 0.5rem;
}

.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

.checkbox input[type=checkbox] + .checkbox-label {
  cursor: pointer;
}

.checkbox input[type=checkbox] + .checkbox-label:before {
  background-color: #fff;
  border: 1px solid #bfbfbf;
  border-radius: 0;
  content: "";
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-right: 1em;
  height: 1.4em;
  width: 1.4em;
  vertical-align: bottom;
  text-align: center;
  transition: all 100ms ease;
}

.checkbox input[type=checkbox]:checked + .checkbox-label:before {
  border: solid 1px #3197EE;
  border-width: 2px 2px 0px 0px;
  height: 8px;
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
  top: -0.5em;
}

/**
 * TODO:ピータさんからいただいたシンプルなチェックボックスとラジオボタンのSCSS
 * 後ほどこちらを適用する
 */

/**
 * コンテナーの基本スタイル。 `.container--*` でスタイルを追加してください。
 * class.
 */

.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.row:after {
  clear: both;
  content: "";
  display: table;
}

[class*=col-] {
  float: left;
  margin-top: 24px;
  padding-left: 10px;
  padding-right: 10px;
  width: 8.3333333333%;
}

/* スマートフォン用 */

[class*=col-] {
  width: 100%;
}

.col-1 {
  width: 8.3333333333%;
}

.col-2 {
  width: 16.6666666667%;
}

.col-3 {
  width: 25%;
}

.col-4 {
  width: 33.3333333333%;
}

.col-5 {
  width: 41.6666666667%;
}

.col-6 {
  width: 50%;
}

.col-7 {
  width: 58.3333333333%;
}

.col-8 {
  width: 66.6666666667%;
}

.col-9 {
  width: 75%;
}

.col-10 {
  width: 83.3333333333%;
}

.col-11 {
  width: 91.6666666667%;
}

.col-12 {
  width: 100%;
}

@media (min-width: 576px) {
  .col-small-1 {
    width: 8.3333333333%;
  }

  .col-small-2 {
    width: 16.6666666667%;
  }

  .col-small-3 {
    width: 25%;
  }

  .col-small-4 {
    width: 33.3333333333%;
  }

  .col-small-5 {
    width: 41.6666666667%;
  }

  .col-small-6 {
    width: 50%;
  }

  .col-small-7 {
    width: 58.3333333333%;
  }

  .col-small-8 {
    width: 66.6666666667%;
  }

  .col-small-9 {
    width: 75%;
  }

  .col-small-10 {
    width: 83.3333333333%;
  }

  .col-small-11 {
    width: 91.6666666667%;
  }

  .col-small-12 {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .col-medium-1 {
    width: 8.3333333333%;
  }

  .col-medium-2 {
    width: 16.6666666667%;
  }

  .col-medium-3 {
    width: 25%;
  }

  .col-medium-4 {
    width: 33.3333333333%;
  }

  .col-medium-5 {
    width: 41.6666666667%;
  }

  .col-medium-6 {
    width: 50%;
  }

  .col-medium-7 {
    width: 58.3333333333%;
  }

  .col-medium-8 {
    width: 66.6666666667%;
  }

  .col-medium-9 {
    width: 75%;
  }

  .col-medium-10 {
    width: 83.3333333333%;
  }

  .col-medium-11 {
    width: 91.6666666667%;
  }

  .col-medium-12 {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .col-large-1 {
    width: 8.3333333333%;
  }

  .col-large-2 {
    width: 16.6666666667%;
  }

  .col-large-3 {
    width: 25%;
  }

  .col-large-4 {
    width: 33.3333333333%;
  }

  .col-large-5 {
    width: 41.6666666667%;
  }

  .col-large-6 {
    width: 50%;
  }

  .col-large-7 {
    width: 58.3333333333%;
  }

  .col-large-8 {
    width: 66.6666666667%;
  }

  .col-large-9 {
    width: 75%;
  }

  .col-large-10 {
    width: 83.3333333333%;
  }

  .col-large-11 {
    width: 91.6666666667%;
  }

  .col-large-12 {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xlarge-1 {
    width: 8.3333333333%;
  }

  .col-xlarge-2 {
    width: 16.6666666667%;
  }

  .col-xlarge-3 {
    width: 25%;
  }

  .col-xlarge-4 {
    width: 33.3333333333%;
  }

  .col-xlarge-5 {
    width: 41.6666666667%;
  }

  .col-xlarge-6 {
    width: 50%;
  }

  .col-xlarge-7 {
    width: 58.3333333333%;
  }

  .col-xlarge-8 {
    width: 66.6666666667%;
  }

  .col-xlarge-9 {
    width: 75%;
  }

  .col-xlarge-10 {
    width: 83.3333333333%;
  }

  .col-xlarge-11 {
    width: 91.6666666667%;
  }

  .col-xlarge-12 {
    width: 100%;
  }
}

/**
 * ヘッダーの基本スタイル。 `.header--*` でスタイルを追加してください。
 * class.
 */

.header {
  background-color: #fff;
  padding: 0.1em 0 0;
}

.header__logo {
  border-bottom: 0;
  font-size: 1.25em;
  letter-spacing: 0.35em;
  line-height: 1.25;
  text-transform: uppercase;
  padding: 16px 0;
}

.header__logo:hover .header__logo-ec {
  color: #212a2f;
}

.header__logo-symbol {
  margin-left: 0.65em;
}

.header__logo-symbol img {
  display: block;
  width: 7.75em;
}

.header__logo-title {
  font-size: 1.4em;
  font-weight: 900;
}

.header__logo-ec {
  color: #fcc325;
  transition: color 0.2s ease;
}

/**
 * 固定ヘッダー。`.header`の延長
 */

.header--fixed {
  box-shadow: rgba(33, 42, 47, 0.09) 0px 2px 24px 0px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
}

/**
 * 基本ヘッダー。`.header`の延長
 */

.header--primary {
  background-color: #212a2f;
}

.header--primary:after {
  clear: both;
  content: "";
  display: table;
}

.subhead {
  position: relative;
}

.pc-header {
  display: none;
}

.mobile-header {
  display: block;
}

@media (min-width: 768px) {
  .pc-header {
    display: block;
  }

  .mobile-header {
    display: none;
  }
}

/**
 * メニューの基本スタイル。 `.menu--*` でスタイルを追加してください。
 * class.
 */

.menu {
  background-color: #212a2f;
  overflow-x: hidden;
  transition: 0.5s;
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  max-width: 80%;
  width: 0;
  z-index: 11;
}

.menu__inner {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  padding: 2.75em;
  height: 100%;
  width: 100%;
}

.menu__link {
  border: 0;
  border-top: solid 1px rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 1em 0;
  transition: 0.3s;
}

.menu__link:first-of-type {
  border-top: 0;
  margin-top: -1em;
}

/**
* メニューボタンの基本スタイル。 `.menu-button--*` でスタイルを追加してください。
 * class.
*/

.menu-button {
  background-color: rgba(255, 255, 255, 0.5);
  border: 0;
  border-radius: 0.3rem;
  cursor: pointer;
  display: inline-block;
  padding: 1em;
  position: fixed;
  right: 2em;
  top: 1em;
  transition: right 0.45s ease;
  z-index: 10000;
}

.menu-button__bar {
  background-color: #212a2f;
  margin: 6px auto;
  height: 2px;
  width: 29px;
  transition: 0.4s;
}

.menu-visible .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
          transform: rotate(-45deg) translate(-6px, 6px);
}

.menu-visible .bar2 {
  opacity: 0;
}

.menu-visible .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -6px);
          transform: rotate(45deg) translate(-5px, -6px);
}

body.is-menu-visible header,
body.is-menu-visible .wrapper {
  cursor: default;
  opacity: 0.25;
  pointer-events: none;
}

body.is-menu-visible .menu {
  width: 22em;
}

/**
 * サイドバーの基本スタイル。 `.sidebar--*` でスタイルを追加してください。
 * class.
 */

.sidebar {
  background-color: #fff;
  padding: 2.75em 10px;
  vertical-align: top;
}

/**
 * 背景の色
 */

.bg-grey {
  background-color: #f4f4f4;
}

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

.bg-black {
  background-color: #212a2f;
}

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

/**
 * バッジの基本スタイル。 `.badge--*` でスタイルを追加してください。
 * class.
 */

.badge {
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 24px;
  text-align: center;
  display: inline-block;
  margin: 0 30px 0 0;
  width: 70px;
}

/**
* 整形サイズのバッジ。`.badge`の延長
*/

.badge--proportional {
  width: auto;
  padding: 0 0.5em;
}

/**
* accentカラー色のバッジ。`.badge`の延長
*/

.badge--accent {
  background: #fcc325;
  color: #fff;
}

/**
* dangerカラー色のバッジ。`.badge`の延長
*/

.badge--danger {
  background: #ce0000;
  color: #fff;
}

/**
* 数字のバッジ。`.badge`の延長
*/

.badge--numeric {
  border-radius: 50%;
  font-size: 12px;
  line-height: 1.6;
  position: absolute;
  top: 8px;
  right: -23px;
  height: 20px;
  width: 20px;
}

/**
 * ボーダーの基本スタイル。 `.border--*` でスタイルを追加してください。
 * class.
 */

.border {
  border: 1px solid #D3D4D5 !important;
}

.border-top {
  border-top: 1px solid #D3D4D5 !important;
}

.border-right {
  border-right: 1px solid #D3D4D5 !important;
}

.border-bottom {
  border-bottom: 1px solid #D3D4D5 !important;
}

.border-left {
  border-left: 1px solid #D3D4D5 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

/**
 * ボタンの基本スタイル。 `.btn--*` でスタイルを追加してください。
 * class.
 */

.btn {
  background-color: transparent;
  border: 0;
  border-radius: 0.2rem;
  cursor: pointer;
  display: inline-block;
  height: 3.5em;
  padding: 0 2em;
  overflow: hidden;
  font-size: 0.875em;
  font-weight: 700;
  letter-spacing: 0.214em;
  line-height: 3.45em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.btn a {
  border: 0;
}

/**
 * フルー幅のボタン。`.btn`の延長
 */

.btn--fit {
  width: 100%;
}

/**
 * 小さいのボタン。`.btn`の延長
 */

.btn--small {
  font-size: 0.6em;
}

/**
 * 大きなのボタン。`.btn`の延長
 */

.btn--large {
  font-size: 1em;
}

/**
 * アウトラインのボタン。`.btn`の延長
 */

.btn--outline {
  box-shadow: inset 0 0 0 2px #212a2f;
  color: #212a2f;
}

.btn--outline:hover {
  box-shadow: inset 0 0 0 2px #fcc325;
  color: #fcc325;
}

/**
 * リンクボタン。`.btn`の延長
 */

.btn--link {
  color: inherit;
  height: inherit;
  font-size: 1em;
  letter-spacing: normal;
  line-height: inherit;
}

/**
 * ボタン。`.btn`の延長
 */

.btn--primary {
  background-color: #212a2f;
  color: #fff;
}

.btn--primary:hover {
  background-color: #fcc325;
  color: #fff;
}

/**
 * ボタン。`.btn`の延長
 */

.btn--white {
  background-color: #fff;
  color: #212a2f;
}

.btn--white:hover {
  background-color: #212a2f;
  color: #fff;
}

/**
 * ボタン。`.btn`の延長
 */

.btn--secondly {
  background-color: #fcc325;
  color: #fff;
}

.btn--secondly:hover {
  background-color: #fff;
  box-shadow: inset 0 0 0 2px #fcc325;
  color: #fcc325;
}

/**
 * 成功のボタン。`.btn`の延長
 */

.btn--positive {
  background-color: #00f278;
  color: #fff;
}

.btn--positive:hover {
  background-color: rgba(0, 242, 120, 0.2);
}

/**
 * 警告のボタン。`.btn`の延長
 */

.btn--warning {
  background-color: #fe9f2f;
  color: #fff;
}

.btn--warning:hover {
  background-color: rgba(254, 159, 47, 0.2);
}

/**
 * 失敗のボタン。`.btn`の延長
 */

.btn--negative {
  background-color: #ce0000;
  color: #fff;
}

.btn--negative:hover {
  background-color: rgba(206, 0, 0, 0.2);
}

/**
 * 無効のボタン。`.btn`の延長
 */

.btn--disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.btn--disabled *,
.btn:disabled * {
  pointer-events: none;
}

/**
 * フロートアイコンのボタン。`.btn`の延長
 */

.btn--floating {
  border-radius: 50%;
  box-shadow: 0px 2px 5px #737373;
  font-size: 27px;
  line-height: 2.2;
  padding: 0;
  height: 60px;
  width: 60px;
}

.btn--floating:hover {
  box-shadow: 0px 2px 5px #737373;
}

/**
 * 固定幅のボタン。`.btn`の延長
 */

.btn--set-width {
  display: block;
  width: 250px;
}

/**
 * カードの基本スタイル。 `.card--*` でスタイルを追加してください。
 * class.
 */

.card {
  background-color: transparent;
  margin-bottom: 3rem;
  padding: 0 16px;
}

/**
* input[type=checkbox] カード。
*/

.card__checkbox {
  display: none;
}

.card__checkbox:checked ~ .card__overlay--hidden {
  left: 0;
  width: 100%;
}

.card__label:hover {
  cursor: pointer;
}

.card__figure {
  background-color: #fff;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0 0;
  position: relative;
}

.card__body {
  padding: 0.75rem 0 0;
}

.card__title {
  margin: 0 0 0.25rem;
}

.card__img {
  background-color: #f4f4f4;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.card__img--set-height {
  max-height: 150px;
  width: auto;
}

@media (min-width: 992px) {
  .card__img--set-height {
    max-height: 180px;
  }
}

.card__text {
  text-transform: uppercase;
}

/**
* レビュー表示カード。`.card`の延長
* class.
*/

.card__review {
  display: flex;
}

.card__review .card__review--star {
  align-items: center;
  color: #fcc325;
  display: flex;
  font-size: 12px;
  font-weight: bold;
}

.card__review .card__review--star span.star-icon {
  padding: 0;
  position: relative;
}

.card__review .card__review--star span.star-icon.full:before {
  color: #fcc325;
  content: "\2605";
  position: absolute;
}

.card__review .card__review--star span.star-icon.half:before {
  color: #fcc325;
  content: "\2605";
  position: absolute;
  width: 54%;
  overflow: hidden;
}

.card__review .card__review--count {
  color: #3197EE;
  font-size: 12px;
  font-weight: bold;
  margin: 2px 8px 0;
}

/**
* 画像形カード。`.card`の延長
*/

.card--image {
  color: #fff;
  position: relative;
  padding: 0;
  transition: -webkit-transform 0.3s cubic-bezier(0, 0.25, 0.1, 1);
  transition: transform 0.3s cubic-bezier(0, 0.25, 0.1, 1);
  transition: transform 0.3s cubic-bezier(0, 0.25, 0.1, 1), -webkit-transform 0.3s cubic-bezier(0, 0.25, 0.1, 1);
}

.card--image__body {
  display: block;
  padding: 1rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-shadow: 0 0 0.5rem rgba(33, 42, 47, 0.5);
}

@media (min-width: 768px) {
  .card--image__body {
    padding: 2rem 1.5rem;
  }
}

.card__overlay {
  background: linear-gradient(transparent, rgba(33, 42, 47, 0.5));
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

.card__overlay--hidden {
  overflow: hidden;
  left: 100%;
  width: 0;
  transition: 0.5s ease;
}

/**
* リンク形カード。`.card`の延長
*/

.card--link:hover {
  -webkit-transform: scale(1.075);
          transform: scale(1.075);
}

.card--link:hover .card__link {
  border-bottom: 0;
}

/**
* リンク形カードのリンク。`.card__link`の延長
*/

.card__link {
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease;
}

/**
* 非表示リンク。`.card__link`の延長
*/

.card__link--hidden {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
}

/**
* カードの幅。`.card`の延長
*/

.card--w-85 {
  width: 85%;
}

/**
 * Display
 *
 */

.display-none {
  display: none !important;
}

.display-inline {
  display: inline !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-block {
  display: block !important;
}

.display-table {
  display: table !important;
}

.display-table-row {
  display: table-row !important;
}

.display-table-cell {
  display: table-cell !important;
}

.display-flex {
  display: flex !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

@media (min-width: 576px) {
  .display-none-small {
    display: none !important;
  }

  .display-inline-small {
    display: inline !important;
  }

  .display-inline-block-small {
    display: inline-block !important;
  }

  .display-block-small {
    display: block !important;
  }

  .display-table-small {
    display: table !important;
  }

  .display-table-row-small {
    display: table-row !important;
  }

  .display-table-cell-small {
    display: table-cell !important;
  }

  .display-flex-small {
    display: flex !important;
  }

  .display-inline-flex-small {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) {
  .display-none-medium {
    display: none !important;
  }

  .display-inline-medium {
    display: inline !important;
  }

  .display-inline-block-medium {
    display: inline-block !important;
  }

  .display-block-medium {
    display: block !important;
  }

  .display-table-medium {
    display: table !important;
  }

  .display-table-row-medium {
    display: table-row !important;
  }

  .display-table-cell-medium {
    display: table-cell !important;
  }

  .display-flex-medium {
    display: flex !important;
  }

  .display-inline-flex-medium {
    display: inline-flex !important;
  }
}

@media (min-width: 992px) {
  .display-none-large {
    display: none !important;
  }

  .display-inline-large {
    display: inline !important;
  }

  .display-inline-block-large {
    display: inline-block !important;
  }

  .display-block-large {
    display: block !important;
  }

  .display-table-large {
    display: table !important;
  }

  .display-table-row-large {
    display: table-row !important;
  }

  .display-table-cell-large {
    display: table-cell !important;
  }

  .display-flex-large {
    display: flex !important;
  }

  .display-inline-flex-large {
    display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
  .display-none-xlarge {
    display: none !important;
  }

  .display-inline-xlarge {
    display: inline !important;
  }

  .display-inline-block-xlarge {
    display: inline-block !important;
  }

  .display-block-xlarge {
    display: block !important;
  }

  .display-table-xlarge {
    display: table !important;
  }

  .display-table-row-xlarge {
    display: table-row !important;
  }

  .display-table-cell-xlarge {
    display: table-cell !important;
  }

  .display-flex-xlarge {
    display: flex !important;
  }

  .display-inline-flex-xlarge {
    display: inline-flex !important;
  }
}

/**
 * フロート
 *
 */

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-left-small {
    float: left !important;
  }

  .float-right-small {
    float: right !important;
  }

  .float-none-small {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-left-medium {
    float: left !important;
  }

  .float-right-medium {
    float: right !important;
  }

  .float-none-medium {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-left-large {
    float: left !important;
  }

  .float-right-large {
    float: right !important;
  }

  .float-none-large {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-left-xlarge {
    float: left !important;
  }

  .float-right-xlarge {
    float: right !important;
  }

  .float-none-xlarge {
    float: none !important;
  }
}

/**
 * アイコンの基本スタイル。 `.icon--*` でスタイルを追加してください。
 * class.
 */

.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative;
}

.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
}

.icon i:before {
  line-height: inherit;
}

/**
* アイコンのラベル。
* class
*/

.icon__label {
  display: none;
}

/**
* 枠の中にあるアイコン。`.icon`の延長
*/

.icon--bordered {
  background-color: transparent;
  color: inherit;
  border: solid 1px #D3D4D5;
  border-radius: 0.25rem;
  display: inline-block;
  text-align: center;
  line-height: 2.65em;
  height: 2.65em;
  width: 2.65em;
}

.icon--bordered i {
  font-size: 1.3em;
}

.icon--bordered:hover {
  border-color: #fcc325;
}

.icon--bordered:active {
  background-color: rgba(252, 195, 37, 0.1);
}

/**
 * 画像の基本スタイル。 `.image--*` でスタイルを追加してください。
 * class.
 */

.image {
  height: auto;
  max-width: 100%;
}

/**
* full-widthの画像。`.image`の延長
*/

.image--fit {
  display: block;
  margin: 0 0 2em 0;
  width: 100%;
}

/**
 * リストの基本スタイル。 `.list--*` でスタイルを追加してください。
 * class.
 */

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

/**
* 枠の中にあるリスト。`.list`の延長
*/

.list--bordered li {
  border-top: solid 1px #D3D4D5;
  padding: 0.5em 0;
}

.list--bordered li:first-child {
  border-top: 0;
  padding-top: 0;
}

/**
* 水平リスト。`.list`の延長
*/

.list--inlined li {
  display: inline-block;
  padding: 1em 0 0 1em;
}

/**
* リンクのリスト。`.list`の延長
*/

.list--links {
  cursor: default;
  margin: -1em 0 2em -1em;
}

/**
 * モーダルの基本スタイル。 `.modal--*` でスタイルを追加してください。
 * class.
 */

.modal {
  background-color: rgba(33, 42, 47, 0.5);
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  z-index: 11;
}

.modal__content {
  background-color: #fff;
  position: relative;
  margin: auto;
  min-width: 300px;
}

@media (min-width: 768px) {
  .modal__content {
    width: 80%;
  }
}

@media (min-width: 992px) {
  .modal__content {
    width: 50%;
  }
}

.modal__content--large {
  max-width: 990px;
}

@media (min-width: 992px) {
  .modal__content--large {
    width: 80%;
  }
}

.modal__btn:hover {
  color: #fcc325;
}

/**
 * ナビゲーションの基本スタイル。 `.nav--*` でスタイルを追加してください。
 * class.
 */

.nav ul {
  padding-left: 0;
}

.nav li {
  display: block;
  padding-left: 0;
}

.nav__link {
  border-bottom: none;
}

.nav__link:hover {
  color: #737373;
  text-decoration: underline;
}

/**
* 水平ナビゲーション。`.nav`の延長
*/

.nav--inline li {
  display: inline-block;
  line-height: 3.45;
  margin: 0 8px;
  vertical-align: top;
}

/**
* 右揃えナビゲーション。`.nav`の延長
*/

@media (min-width: 768px) {
  .nav--right {
    text-align: right;
  }
}

/**
* 基本ナビゲーション。`.nav`の延長
*/

.nav--primary {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.036em;
  text-transform: uppercase;
}

/**
* サイドバーナビゲーション。`.nav`の延長
*/

.nav--secondary a {
  border-bottom: 1px solid #D3D4D5;
  color: #212a2f;
  display: block;
  line-height: 1.2em;
  padding: 12px 25px 12px 15px;
  position: relative;
}

/**
 * 方向
 *
 */

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

.fixed-top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sticky-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

.fixed-action-btn {
  position: fixed;
  bottom: 30px;
  right: 24px;
  z-index: 4;
}

/**
 * 中央方向の基本スタイル。 `.centered--*` でスタイルを追加してください。
 * class.
 */

.centered {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.centered--top {
  top: 0;
}

.centered--center {
  top: 50%;
}

.centered--bottom {
  bottom: 0;
}

/**
 * スライドショーのコンテナー
 *
 */

.slide__container {
  margin: auto;
  max-width: 1200px;
  position: relative;
}

/**
 * スライドの基本スタイル。 `.slide--*` でスタイルを追加してください。
 * class.
 */

.slide {
  display: none;
}

/**
* ギャラリースライドショー。`.slide`の延長
*/

.slide--gallery {
  position: relative;
  text-align: center;
}

.slide--gallery:after {
  clear: both;
  content: "";
  display: table;
}

.slide--gallery img {
  width: 60%;
}

@media (min-width: 768px) {
  .slide--gallery img {
    float: right;
    width: 40%;
  }
}

/**
* スライドのテキスト基本スタイル。 `.slide__text--*` でスタイルを追加してください。
* class.
*/

.slide__text {
  text-align: center;
  margin-bottom: 1.75rem;
  margin-top: 48px;
  padding: 8px 12px;
  width: 100%;
}

/**
* 中央テキスト。`.slide__text`の延長
*/

.slide__text--center {
  position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

@media (min-width: 992px) {
  .slide__text--center {
    top: 50%;
  }
}

/**
* 左揃えテキスト。`.slide__text`の延長
*/

@media (min-width: 768px) {
  .slide__text--left {
    float: left;
    top: 30%;
    width: 50%;
  }
}

.slide__bg {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 80%;
  width: 100%;
  z-index: -1;
}

@media (min-width: 768px) {
  .slide__bg {
    top: 0;
  }
}

.slide__bg--light-grey {
  background: #f4f4f4;
}

/**
* スライドのアイコン基本スタイル。 `.slide__icon--*` でスタイルを追加してください。
* class.
*/

.slide__icon {
  color: #737373;
  display: block;
  margin-bottom: 12px;
}

.slide__icon:before {
  font-size: 1.1em;
}

/**
* スライドのナビゲーション基本スタイル。 `.slide__nav--*` でスタイルを追加してください。
* class.
*/

.slide__nav {
  width: 100%;
}

/**
* ギャラリー形ナビゲーション。`.slide__nav`の延長
*/

.slide__nav--gallery {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  position: relative;
  margin-bottom: 30px;
  height: auto;
  white-space: nowrap;
}

.slide__nav--gallery::-webkit-scrollbar {
  display: none;
}

/**
* アイコン形ナビゲーション。`.slide__nav`の延長
*/

.slide__nav--icon {
  text-align: center;
  position: absolute;
  bottom: 10px;
}

/**
* ナビゲーションのボタン基本スタイル。 `.slide__nav-btn--*` でスタイルを追加してください。
* class.
*/

.slide__nav-btn {
  background-color: #fff;
  display: inline-block;
}

.slide__nav-cursor {
  cursor: pointer;
}

/**
* アイコン形ボタン。`.slide__nav-btn`の延長
*/

.slide__nav-btn--icon {
  margin: 0 6px;
  height: 4px;
  width: 60px;
  transition: background-color 0.45s ease;
}

/**
* 画像形ボタン。`.slide__nav-btn`の延長
*/

.slide__nav-btn--image {
  float: none;
  margin: 0 0.25%;
  width: 120px;
  height: 90%;
  zoom: 1;
}

.slide__nav-btn--image img {
  opacity: 0.6;
}

/**
* 選択されたボタン。`.slide__nav-btn`の延長
*/

.slide__nav-btn--active {
  background-color: #212a2f;
}

.slide__nav-btn--selected img,
.slide__nav-btn--image img:hover {
  opacity: 1;
}

.slide__nav-btn--selected .slide__nav-btn__text:after {
  opacity: 1;
}

.slide__nav-btn__text {
  color: #111;
  display: block;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-align: center;
  position: relative;
}

.slide__nav-btn__text:after {
  background: #000;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 7px;
  width: 7px;
  transition: opacity 0.25s ease-in-out;
  opacity: 0;
}

/**
* スライドの`次`と`前`ボタン
*/

.slide__prev,
.slide__next {
  border-bottom: 0;
  color: #737373;
  cursor: pointer;
  font-size: 25px;
  font-weight: 700;
  margin-top: -50px;
  padding: 16px;
  position: absolute;
  top: 50%;
  width: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.slide__prev:hover,
.slide__next:hover {
  background-color: rgba(33, 42, 47, 0.2);
}

.slide__next {
  border-radius: 3px 0 0 3px;
  right: 0;
}

/**
* スライドのアニメーション
*/

.slide__anim--fade {
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

/**
 * マージンとパディング
 *
 */

.margin--0 {
  margin: 0px !important;
}

.margin-top--0 {
  margin-top: 0px !important;
}

.margin-right--0 {
  margin-right: 0px !important;
}

.margin-bottom--0 {
  margin-bottom: 0px !important;
}

.margin-left--0 {
  margin-left: 0px !important;
}

.margin--8 {
  margin: 8px !important;
}

.margin-top--8 {
  margin-top: 8px !important;
}

.margin-right--8 {
  margin-right: 8px !important;
}

.margin-bottom--8 {
  margin-bottom: 8px !important;
}

.margin-left--8 {
  margin-left: 8px !important;
}

.margin--12 {
  margin: 12px !important;
}

.margin-top--12 {
  margin-top: 12px !important;
}

.margin-right--12 {
  margin-right: 12px !important;
}

.margin-bottom--12 {
  margin-bottom: 12px !important;
}

.margin-left--12 {
  margin-left: 12px !important;
}

.margin--16 {
  margin: 16px !important;
}

.margin-top--16 {
  margin-top: 16px !important;
}

.margin-right--16 {
  margin-right: 16px !important;
}

.margin-bottom--16 {
  margin-bottom: 16px !important;
}

.margin-left--16 {
  margin-left: 16px !important;
}

.margin--24 {
  margin: 24px !important;
}

.margin-top--24 {
  margin-top: 24px !important;
}

.margin-right--24 {
  margin-right: 24px !important;
}

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

.margin-left--24 {
  margin-left: 24px !important;
}

.margin--32 {
  margin: 32px !important;
}

.margin-top--32 {
  margin-top: 32px !important;
}

.margin-right--32 {
  margin-right: 32px !important;
}

.margin-bottom--32 {
  margin-bottom: 32px !important;
}

.margin-left--32 {
  margin-left: 32px !important;
}

.margin--48 {
  margin: 48px !important;
}

.margin-top--48 {
  margin-top: 48px !important;
}

.margin-right--48 {
  margin-right: 48px !important;
}

.margin-bottom--48 {
  margin-bottom: 48px !important;
}

.margin-left--48 {
  margin-left: 48px !important;
}

.margin--80 {
  margin: 80px !important;
}

.margin-top--80 {
  margin-top: 80px !important;
}

.margin-right--80 {
  margin-right: 80px !important;
}

.margin-bottom--80 {
  margin-bottom: 80px !important;
}

.margin-left--80 {
  margin-left: 80px !important;
}

.margin--88 {
  margin: 88px !important;
}

.margin-top--88 {
  margin-top: 88px !important;
}

.margin-right--88 {
  margin-right: 88px !important;
}

.margin-bottom--88 {
  margin-bottom: 88px !important;
}

.margin-left--88 {
  margin-left: 88px !important;
}

.margin--100 {
  margin: 100px !important;
}

.margin-top--100 {
  margin-top: 100px !important;
}

.margin-right--100 {
  margin-right: 100px !important;
}

.margin-bottom--100 {
  margin-bottom: 100px !important;
}

.margin-left--100 {
  margin-left: 100px !important;
}

.margin--140 {
  margin: 140px !important;
}

.margin-top--140 {
  margin-top: 140px !important;
}

.margin-right--140 {
  margin-right: 140px !important;
}

.margin-bottom--140 {
  margin-bottom: 140px !important;
}

.margin-left--140 {
  margin-left: 140px !important;
}

.margin--164 {
  margin: 164px !important;
}

.margin-top--164 {
  margin-top: 164px !important;
}

.margin-right--164 {
  margin-right: 164px !important;
}

.margin-bottom--164 {
  margin-bottom: 164px !important;
}

.margin-left--164 {
  margin-left: 164px !important;
}

.padding--0 {
  padding: 0px !important;
}

.padding-top--0 {
  padding-top: 0px !important;
}

.padding-right--0 {
  padding-right: 0px !important;
}

.padding-bottom--0 {
  padding-bottom: 0px !important;
}

.padding-left--0 {
  padding-left: 0px !important;
}

.padding--8 {
  padding: 8px !important;
}

.padding-top--8 {
  padding-top: 8px !important;
}

.padding-right--8 {
  padding-right: 8px !important;
}

.padding-bottom--8 {
  padding-bottom: 8px !important;
}

.padding-left--8 {
  padding-left: 8px !important;
}

.padding--12 {
  padding: 12px !important;
}

.padding-top--12 {
  padding-top: 12px !important;
}

.padding-right--12 {
  padding-right: 12px !important;
}

.padding-bottom--12 {
  padding-bottom: 12px !important;
}

.padding-left--12 {
  padding-left: 12px !important;
}

.padding--16 {
  padding: 16px !important;
}

.padding-top--16 {
  padding-top: 16px !important;
}

.padding-right--16 {
  padding-right: 16px !important;
}

.padding-bottom--16 {
  padding-bottom: 16px !important;
}

.padding-left--16 {
  padding-left: 16px !important;
}

.padding--24 {
  padding: 24px !important;
}

.padding-top--24 {
  padding-top: 24px !important;
}

.padding-right--24 {
  padding-right: 24px !important;
}

.padding-bottom--24 {
  padding-bottom: 24px !important;
}

.padding-left--24 {
  padding-left: 24px !important;
}

.padding--32 {
  padding: 32px !important;
}

.padding-top--32 {
  padding-top: 32px !important;
}

.padding-right--32 {
  padding-right: 32px !important;
}

.padding-bottom--32 {
  padding-bottom: 32px !important;
}

.padding-left--32 {
  padding-left: 32px !important;
}

.padding--48 {
  padding: 48px !important;
}

.padding-top--48 {
  padding-top: 48px !important;
}

.padding-right--48 {
  padding-right: 48px !important;
}

.padding-bottom--48 {
  padding-bottom: 48px !important;
}

.padding-left--48 {
  padding-left: 48px !important;
}

.padding--80 {
  padding: 80px !important;
}

.padding-top--80 {
  padding-top: 80px !important;
}

.padding-right--80 {
  padding-right: 80px !important;
}

.padding-bottom--80 {
  padding-bottom: 80px !important;
}

.padding-left--80 {
  padding-left: 80px !important;
}

.padding--88 {
  padding: 88px !important;
}

.padding-top--88 {
  padding-top: 88px !important;
}

.padding-right--88 {
  padding-right: 88px !important;
}

.padding-bottom--88 {
  padding-bottom: 88px !important;
}

.padding-left--88 {
  padding-left: 88px !important;
}

.padding--100 {
  padding: 100px !important;
}

.padding-top--100 {
  padding-top: 100px !important;
}

.padding-right--100 {
  padding-right: 100px !important;
}

.padding-bottom--100 {
  padding-bottom: 100px !important;
}

.padding-left--100 {
  padding-left: 100px !important;
}

.padding--140 {
  padding: 140px !important;
}

.padding-top--140 {
  padding-top: 140px !important;
}

.padding-right--140 {
  padding-right: 140px !important;
}

.padding-bottom--140 {
  padding-bottom: 140px !important;
}

.padding-left--140 {
  padding-left: 140px !important;
}

.padding--164 {
  padding: 164px !important;
}

.padding-top--164 {
  padding-top: 164px !important;
}

.padding-right--164 {
  padding-right: 164px !important;
}

.padding-bottom--164 {
  padding-bottom: 164px !important;
}

.padding-left--164 {
  padding-left: 164px !important;
}

/**
　* autoマージン・autoパディング
　*/

.margin--auto {
  margin: auto !important;
}

.margin-bottom--auto {
  margin-bottom: auto !important;
}

.margin-left--auto {
  margin-left: auto !important;
}

.margin-right--auto {
  margin-right: auto !important;
}

.margin-top--auto {
  margin-top: auto !important;
}

.padding--auto {
  padding: auto !important;
}

.padding-bottom--auto {
  padding-bottom: auto !important;
}

.padding-left--auto {
  padding-left: auto !important;
}

.padding-right--auto {
  padding-right: auto !important;
}

.padding-top--auto {
  padding-top: auto !important;
}

@media (min-width: 576px) {
  .margin-small--0 {
    margin: 0px !important;
  }

  .margin-top-small--0 {
    margin-top: 0px !important;
  }

  .margin-right-small--0 {
    margin-right: 0px !important;
  }

  .margin-bottom-small--0 {
    margin-bottom: 0px !important;
  }

  .margin-left-small--0 {
    margin-left: 0px !important;
  }

  .margin-small--8 {
    margin: 8px !important;
  }

  .margin-top-small--8 {
    margin-top: 8px !important;
  }

  .margin-right-small--8 {
    margin-right: 8px !important;
  }

  .margin-bottom-small--8 {
    margin-bottom: 8px !important;
  }

  .margin-left-small--8 {
    margin-left: 8px !important;
  }

  .margin-small--12 {
    margin: 12px !important;
  }

  .margin-top-small--12 {
    margin-top: 12px !important;
  }

  .margin-right-small--12 {
    margin-right: 12px !important;
  }

  .margin-bottom-small--12 {
    margin-bottom: 12px !important;
  }

  .margin-left-small--12 {
    margin-left: 12px !important;
  }

  .margin-small--16 {
    margin: 16px !important;
  }

  .margin-top-small--16 {
    margin-top: 16px !important;
  }

  .margin-right-small--16 {
    margin-right: 16px !important;
  }

  .margin-bottom-small--16 {
    margin-bottom: 16px !important;
  }

  .margin-left-small--16 {
    margin-left: 16px !important;
  }

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

  .margin-top-small--24 {
    margin-top: 24px !important;
  }

  .margin-right-small--24 {
    margin-right: 24px !important;
  }

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

  .margin-left-small--24 {
    margin-left: 24px !important;
  }

  .margin-small--32 {
    margin: 32px !important;
  }

  .margin-top-small--32 {
    margin-top: 32px !important;
  }

  .margin-right-small--32 {
    margin-right: 32px !important;
  }

  .margin-bottom-small--32 {
    margin-bottom: 32px !important;
  }

  .margin-left-small--32 {
    margin-left: 32px !important;
  }

  .margin-small--48 {
    margin: 48px !important;
  }

  .margin-top-small--48 {
    margin-top: 48px !important;
  }

  .margin-right-small--48 {
    margin-right: 48px !important;
  }

  .margin-bottom-small--48 {
    margin-bottom: 48px !important;
  }

  .margin-left-small--48 {
    margin-left: 48px !important;
  }

  .margin-small--80 {
    margin: 80px !important;
  }

  .margin-top-small--80 {
    margin-top: 80px !important;
  }

  .margin-right-small--80 {
    margin-right: 80px !important;
  }

  .margin-bottom-small--80 {
    margin-bottom: 80px !important;
  }

  .margin-left-small--80 {
    margin-left: 80px !important;
  }

  .margin-small--88 {
    margin: 88px !important;
  }

  .margin-top-small--88 {
    margin-top: 88px !important;
  }

  .margin-right-small--88 {
    margin-right: 88px !important;
  }

  .margin-bottom-small--88 {
    margin-bottom: 88px !important;
  }

  .margin-left-small--88 {
    margin-left: 88px !important;
  }

  .margin-small--100 {
    margin: 100px !important;
  }

  .margin-top-small--100 {
    margin-top: 100px !important;
  }

  .margin-right-small--100 {
    margin-right: 100px !important;
  }

  .margin-bottom-small--100 {
    margin-bottom: 100px !important;
  }

  .margin-left-small--100 {
    margin-left: 100px !important;
  }

  .margin-small--140 {
    margin: 140px !important;
  }

  .margin-top-small--140 {
    margin-top: 140px !important;
  }

  .margin-right-small--140 {
    margin-right: 140px !important;
  }

  .margin-bottom-small--140 {
    margin-bottom: 140px !important;
  }

  .margin-left-small--140 {
    margin-left: 140px !important;
  }

  .margin-small--164 {
    margin: 164px !important;
  }

  .margin-top-small--164 {
    margin-top: 164px !important;
  }

  .margin-right-small--164 {
    margin-right: 164px !important;
  }

  .margin-bottom-small--164 {
    margin-bottom: 164px !important;
  }

  .margin-left-small--164 {
    margin-left: 164px !important;
  }

  .padding-small--0 {
    padding: 0px !important;
  }

  .padding-top-small--0 {
    padding-top: 0px !important;
  }

  .padding-right-small--0 {
    padding-right: 0px !important;
  }

  .padding-bottom-small--0 {
    padding-bottom: 0px !important;
  }

  .padding-left-small--0 {
    padding-left: 0px !important;
  }

  .padding-small--8 {
    padding: 8px !important;
  }

  .padding-top-small--8 {
    padding-top: 8px !important;
  }

  .padding-right-small--8 {
    padding-right: 8px !important;
  }

  .padding-bottom-small--8 {
    padding-bottom: 8px !important;
  }

  .padding-left-small--8 {
    padding-left: 8px !important;
  }

  .padding-small--12 {
    padding: 12px !important;
  }

  .padding-top-small--12 {
    padding-top: 12px !important;
  }

  .padding-right-small--12 {
    padding-right: 12px !important;
  }

  .padding-bottom-small--12 {
    padding-bottom: 12px !important;
  }

  .padding-left-small--12 {
    padding-left: 12px !important;
  }

  .padding-small--16 {
    padding: 16px !important;
  }

  .padding-top-small--16 {
    padding-top: 16px !important;
  }

  .padding-right-small--16 {
    padding-right: 16px !important;
  }

  .padding-bottom-small--16 {
    padding-bottom: 16px !important;
  }

  .padding-left-small--16 {
    padding-left: 16px !important;
  }

  .padding-small--24 {
    padding: 24px !important;
  }

  .padding-top-small--24 {
    padding-top: 24px !important;
  }

  .padding-right-small--24 {
    padding-right: 24px !important;
  }

  .padding-bottom-small--24 {
    padding-bottom: 24px !important;
  }

  .padding-left-small--24 {
    padding-left: 24px !important;
  }

  .padding-small--32 {
    padding: 32px !important;
  }

  .padding-top-small--32 {
    padding-top: 32px !important;
  }

  .padding-right-small--32 {
    padding-right: 32px !important;
  }

  .padding-bottom-small--32 {
    padding-bottom: 32px !important;
  }

  .padding-left-small--32 {
    padding-left: 32px !important;
  }

  .padding-small--48 {
    padding: 48px !important;
  }

  .padding-top-small--48 {
    padding-top: 48px !important;
  }

  .padding-right-small--48 {
    padding-right: 48px !important;
  }

  .padding-bottom-small--48 {
    padding-bottom: 48px !important;
  }

  .padding-left-small--48 {
    padding-left: 48px !important;
  }

  .padding-small--80 {
    padding: 80px !important;
  }

  .padding-top-small--80 {
    padding-top: 80px !important;
  }

  .padding-right-small--80 {
    padding-right: 80px !important;
  }

  .padding-bottom-small--80 {
    padding-bottom: 80px !important;
  }

  .padding-left-small--80 {
    padding-left: 80px !important;
  }

  .padding-small--88 {
    padding: 88px !important;
  }

  .padding-top-small--88 {
    padding-top: 88px !important;
  }

  .padding-right-small--88 {
    padding-right: 88px !important;
  }

  .padding-bottom-small--88 {
    padding-bottom: 88px !important;
  }

  .padding-left-small--88 {
    padding-left: 88px !important;
  }

  .padding-small--100 {
    padding: 100px !important;
  }

  .padding-top-small--100 {
    padding-top: 100px !important;
  }

  .padding-right-small--100 {
    padding-right: 100px !important;
  }

  .padding-bottom-small--100 {
    padding-bottom: 100px !important;
  }

  .padding-left-small--100 {
    padding-left: 100px !important;
  }

  .padding-small--140 {
    padding: 140px !important;
  }

  .padding-top-small--140 {
    padding-top: 140px !important;
  }

  .padding-right-small--140 {
    padding-right: 140px !important;
  }

  .padding-bottom-small--140 {
    padding-bottom: 140px !important;
  }

  .padding-left-small--140 {
    padding-left: 140px !important;
  }

  .padding-small--164 {
    padding: 164px !important;
  }

  .padding-top-small--164 {
    padding-top: 164px !important;
  }

  .padding-right-small--164 {
    padding-right: 164px !important;
  }

  .padding-bottom-small--164 {
    padding-bottom: 164px !important;
  }

  .padding-left-small--164 {
    padding-left: 164px !important;
  }

  /**
  　* autoマージン・autoパディング
  　*/

  .margin-small--auto {
    margin: auto !important;
  }

  .margin-bottom-small--auto {
    margin-bottom: auto !important;
  }

  .margin-left-small--auto {
    margin-left: auto !important;
  }

  .margin-right-small--auto {
    margin-right: auto !important;
  }

  .margin-top-small--auto {
    margin-top: auto !important;
  }

  .padding-small--auto {
    padding: auto !important;
  }

  .padding-bottom-small--auto {
    padding-bottom: auto !important;
  }

  .padding-left-small--auto {
    padding-left: auto !important;
  }

  .padding-right-small--auto {
    padding-right: auto !important;
  }

  .padding-top-small--auto {
    padding-top: auto !important;
  }
}

@media (min-width: 768px) {
  .margin-medium--0 {
    margin: 0px !important;
  }

  .margin-top-medium--0 {
    margin-top: 0px !important;
  }

  .margin-right-medium--0 {
    margin-right: 0px !important;
  }

  .margin-bottom-medium--0 {
    margin-bottom: 0px !important;
  }

  .margin-left-medium--0 {
    margin-left: 0px !important;
  }

  .margin-medium--8 {
    margin: 8px !important;
  }

  .margin-top-medium--8 {
    margin-top: 8px !important;
  }

  .margin-right-medium--8 {
    margin-right: 8px !important;
  }

  .margin-bottom-medium--8 {
    margin-bottom: 8px !important;
  }

  .margin-left-medium--8 {
    margin-left: 8px !important;
  }

  .margin-medium--12 {
    margin: 12px !important;
  }

  .margin-top-medium--12 {
    margin-top: 12px !important;
  }

  .margin-right-medium--12 {
    margin-right: 12px !important;
  }

  .margin-bottom-medium--12 {
    margin-bottom: 12px !important;
  }

  .margin-left-medium--12 {
    margin-left: 12px !important;
  }

  .margin-medium--16 {
    margin: 16px !important;
  }

  .margin-top-medium--16 {
    margin-top: 16px !important;
  }

  .margin-right-medium--16 {
    margin-right: 16px !important;
  }

  .margin-bottom-medium--16 {
    margin-bottom: 16px !important;
  }

  .margin-left-medium--16 {
    margin-left: 16px !important;
  }

  .margin-medium--24 {
    margin: 24px !important;
  }

  .margin-top-medium--24 {
    margin-top: 24px !important;
  }

  .margin-right-medium--24 {
    margin-right: 24px !important;
  }

  .margin-bottom-medium--24 {
    margin-bottom: 24px !important;
  }

  .margin-left-medium--24 {
    margin-left: 24px !important;
  }

  .margin-medium--32 {
    margin: 32px !important;
  }

  .margin-top-medium--32 {
    margin-top: 32px !important;
  }

  .margin-right-medium--32 {
    margin-right: 32px !important;
  }

  .margin-bottom-medium--32 {
    margin-bottom: 32px !important;
  }

  .margin-left-medium--32 {
    margin-left: 32px !important;
  }

  .margin-medium--48 {
    margin: 48px !important;
  }

  .margin-top-medium--48 {
    margin-top: 48px !important;
  }

  .margin-right-medium--48 {
    margin-right: 48px !important;
  }

  .margin-bottom-medium--48 {
    margin-bottom: 48px !important;
  }

  .margin-left-medium--48 {
    margin-left: 48px !important;
  }

  .margin-medium--80 {
    margin: 80px !important;
  }

  .margin-top-medium--80 {
    margin-top: 80px !important;
  }

  .margin-right-medium--80 {
    margin-right: 80px !important;
  }

  .margin-bottom-medium--80 {
    margin-bottom: 80px !important;
  }

  .margin-left-medium--80 {
    margin-left: 80px !important;
  }

  .margin-medium--88 {
    margin: 88px !important;
  }

  .margin-top-medium--88 {
    margin-top: 88px !important;
  }

  .margin-right-medium--88 {
    margin-right: 88px !important;
  }

  .margin-bottom-medium--88 {
    margin-bottom: 88px !important;
  }

  .margin-left-medium--88 {
    margin-left: 88px !important;
  }

  .margin-medium--100 {
    margin: 100px !important;
  }

  .margin-top-medium--100 {
    margin-top: 100px !important;
  }

  .margin-right-medium--100 {
    margin-right: 100px !important;
  }

  .margin-bottom-medium--100 {
    margin-bottom: 100px !important;
  }

  .margin-left-medium--100 {
    margin-left: 100px !important;
  }

  .margin-medium--140 {
    margin: 140px !important;
  }

  .margin-top-medium--140 {
    margin-top: 140px !important;
  }

  .margin-right-medium--140 {
    margin-right: 140px !important;
  }

  .margin-bottom-medium--140 {
    margin-bottom: 140px !important;
  }

  .margin-left-medium--140 {
    margin-left: 140px !important;
  }

  .margin-medium--164 {
    margin: 164px !important;
  }

  .margin-top-medium--164 {
    margin-top: 164px !important;
  }

  .margin-right-medium--164 {
    margin-right: 164px !important;
  }

  .margin-bottom-medium--164 {
    margin-bottom: 164px !important;
  }

  .margin-left-medium--164 {
    margin-left: 164px !important;
  }

  .padding-medium--0 {
    padding: 0px !important;
  }

  .padding-top-medium--0 {
    padding-top: 0px !important;
  }

  .padding-right-medium--0 {
    padding-right: 0px !important;
  }

  .padding-bottom-medium--0 {
    padding-bottom: 0px !important;
  }

  .padding-left-medium--0 {
    padding-left: 0px !important;
  }

  .padding-medium--8 {
    padding: 8px !important;
  }

  .padding-top-medium--8 {
    padding-top: 8px !important;
  }

  .padding-right-medium--8 {
    padding-right: 8px !important;
  }

  .padding-bottom-medium--8 {
    padding-bottom: 8px !important;
  }

  .padding-left-medium--8 {
    padding-left: 8px !important;
  }

  .padding-medium--12 {
    padding: 12px !important;
  }

  .padding-top-medium--12 {
    padding-top: 12px !important;
  }

  .padding-right-medium--12 {
    padding-right: 12px !important;
  }

  .padding-bottom-medium--12 {
    padding-bottom: 12px !important;
  }

  .padding-left-medium--12 {
    padding-left: 12px !important;
  }

  .padding-medium--16 {
    padding: 16px !important;
  }

  .padding-top-medium--16 {
    padding-top: 16px !important;
  }

  .padding-right-medium--16 {
    padding-right: 16px !important;
  }

  .padding-bottom-medium--16 {
    padding-bottom: 16px !important;
  }

  .padding-left-medium--16 {
    padding-left: 16px !important;
  }

  .padding-medium--24 {
    padding: 24px !important;
  }

  .padding-top-medium--24 {
    padding-top: 24px !important;
  }

  .padding-right-medium--24 {
    padding-right: 24px !important;
  }

  .padding-bottom-medium--24 {
    padding-bottom: 24px !important;
  }

  .padding-left-medium--24 {
    padding-left: 24px !important;
  }

  .padding-medium--32 {
    padding: 32px !important;
  }

  .padding-top-medium--32 {
    padding-top: 32px !important;
  }

  .padding-right-medium--32 {
    padding-right: 32px !important;
  }

  .padding-bottom-medium--32 {
    padding-bottom: 32px !important;
  }

  .padding-left-medium--32 {
    padding-left: 32px !important;
  }

  .padding-medium--48 {
    padding: 48px !important;
  }

  .padding-top-medium--48 {
    padding-top: 48px !important;
  }

  .padding-right-medium--48 {
    padding-right: 48px !important;
  }

  .padding-bottom-medium--48 {
    padding-bottom: 48px !important;
  }

  .padding-left-medium--48 {
    padding-left: 48px !important;
  }

  .padding-medium--80 {
    padding: 80px !important;
  }

  .padding-top-medium--80 {
    padding-top: 80px !important;
  }

  .padding-right-medium--80 {
    padding-right: 80px !important;
  }

  .padding-bottom-medium--80 {
    padding-bottom: 80px !important;
  }

  .padding-left-medium--80 {
    padding-left: 80px !important;
  }

  .padding-medium--88 {
    padding: 88px !important;
  }

  .padding-top-medium--88 {
    padding-top: 88px !important;
  }

  .padding-right-medium--88 {
    padding-right: 88px !important;
  }

  .padding-bottom-medium--88 {
    padding-bottom: 88px !important;
  }

  .padding-left-medium--88 {
    padding-left: 88px !important;
  }

  .padding-medium--100 {
    padding: 100px !important;
  }

  .padding-top-medium--100 {
    padding-top: 100px !important;
  }

  .padding-right-medium--100 {
    padding-right: 100px !important;
  }

  .padding-bottom-medium--100 {
    padding-bottom: 100px !important;
  }

  .padding-left-medium--100 {
    padding-left: 100px !important;
  }

  .padding-medium--140 {
    padding: 140px !important;
  }

  .padding-top-medium--140 {
    padding-top: 140px !important;
  }

  .padding-right-medium--140 {
    padding-right: 140px !important;
  }

  .padding-bottom-medium--140 {
    padding-bottom: 140px !important;
  }

  .padding-left-medium--140 {
    padding-left: 140px !important;
  }

  .padding-medium--164 {
    padding: 164px !important;
  }

  .padding-top-medium--164 {
    padding-top: 164px !important;
  }

  .padding-right-medium--164 {
    padding-right: 164px !important;
  }

  .padding-bottom-medium--164 {
    padding-bottom: 164px !important;
  }

  .padding-left-medium--164 {
    padding-left: 164px !important;
  }

  /**
  　* autoマージン・autoパディング
  　*/

  .margin-medium--auto {
    margin: auto !important;
  }

  .margin-bottom-medium--auto {
    margin-bottom: auto !important;
  }

  .margin-left-medium--auto {
    margin-left: auto !important;
  }

  .margin-right-medium--auto {
    margin-right: auto !important;
  }

  .margin-top-medium--auto {
    margin-top: auto !important;
  }

  .padding-medium--auto {
    padding: auto !important;
  }

  .padding-bottom-medium--auto {
    padding-bottom: auto !important;
  }

  .padding-left-medium--auto {
    padding-left: auto !important;
  }

  .padding-right-medium--auto {
    padding-right: auto !important;
  }

  .padding-top-medium--auto {
    padding-top: auto !important;
  }
}

@media (min-width: 992px) {
  .margin-large--0 {
    margin: 0px !important;
  }

  .margin-top-large--0 {
    margin-top: 0px !important;
  }

  .margin-right-large--0 {
    margin-right: 0px !important;
  }

  .margin-bottom-large--0 {
    margin-bottom: 0px !important;
  }

  .margin-left-large--0 {
    margin-left: 0px !important;
  }

  .margin-large--8 {
    margin: 8px !important;
  }

  .margin-top-large--8 {
    margin-top: 8px !important;
  }

  .margin-right-large--8 {
    margin-right: 8px !important;
  }

  .margin-bottom-large--8 {
    margin-bottom: 8px !important;
  }

  .margin-left-large--8 {
    margin-left: 8px !important;
  }

  .margin-large--12 {
    margin: 12px !important;
  }

  .margin-top-large--12 {
    margin-top: 12px !important;
  }

  .margin-right-large--12 {
    margin-right: 12px !important;
  }

  .margin-bottom-large--12 {
    margin-bottom: 12px !important;
  }

  .margin-left-large--12 {
    margin-left: 12px !important;
  }

  .margin-large--16 {
    margin: 16px !important;
  }

  .margin-top-large--16 {
    margin-top: 16px !important;
  }

  .margin-right-large--16 {
    margin-right: 16px !important;
  }

  .margin-bottom-large--16 {
    margin-bottom: 16px !important;
  }

  .margin-left-large--16 {
    margin-left: 16px !important;
  }

  .margin-large--24 {
    margin: 24px !important;
  }

  .margin-top-large--24 {
    margin-top: 24px !important;
  }

  .margin-right-large--24 {
    margin-right: 24px !important;
  }

  .margin-bottom-large--24 {
    margin-bottom: 24px !important;
  }

  .margin-left-large--24 {
    margin-left: 24px !important;
  }

  .margin-large--32 {
    margin: 32px !important;
  }

  .margin-top-large--32 {
    margin-top: 32px !important;
  }

  .margin-right-large--32 {
    margin-right: 32px !important;
  }

  .margin-bottom-large--32 {
    margin-bottom: 32px !important;
  }

  .margin-left-large--32 {
    margin-left: 32px !important;
  }

  .margin-large--48 {
    margin: 48px !important;
  }

  .margin-top-large--48 {
    margin-top: 48px !important;
  }

  .margin-right-large--48 {
    margin-right: 48px !important;
  }

  .margin-bottom-large--48 {
    margin-bottom: 48px !important;
  }

  .margin-left-large--48 {
    margin-left: 48px !important;
  }

  .margin-large--80 {
    margin: 80px !important;
  }

  .margin-top-large--80 {
    margin-top: 80px !important;
  }

  .margin-right-large--80 {
    margin-right: 80px !important;
  }

  .margin-bottom-large--80 {
    margin-bottom: 80px !important;
  }

  .margin-left-large--80 {
    margin-left: 80px !important;
  }

  .margin-large--88 {
    margin: 88px !important;
  }

  .margin-top-large--88 {
    margin-top: 88px !important;
  }

  .margin-right-large--88 {
    margin-right: 88px !important;
  }

  .margin-bottom-large--88 {
    margin-bottom: 88px !important;
  }

  .margin-left-large--88 {
    margin-left: 88px !important;
  }

  .margin-large--100 {
    margin: 100px !important;
  }

  .margin-top-large--100 {
    margin-top: 100px !important;
  }

  .margin-right-large--100 {
    margin-right: 100px !important;
  }

  .margin-bottom-large--100 {
    margin-bottom: 100px !important;
  }

  .margin-left-large--100 {
    margin-left: 100px !important;
  }

  .margin-large--140 {
    margin: 140px !important;
  }

  .margin-top-large--140 {
    margin-top: 140px !important;
  }

  .margin-right-large--140 {
    margin-right: 140px !important;
  }

  .margin-bottom-large--140 {
    margin-bottom: 140px !important;
  }

  .margin-left-large--140 {
    margin-left: 140px !important;
  }

  .margin-large--164 {
    margin: 164px !important;
  }

  .margin-top-large--164 {
    margin-top: 164px !important;
  }

  .margin-right-large--164 {
    margin-right: 164px !important;
  }

  .margin-bottom-large--164 {
    margin-bottom: 164px !important;
  }

  .margin-left-large--164 {
    margin-left: 164px !important;
  }

  .padding-large--0 {
    padding: 0px !important;
  }

  .padding-top-large--0 {
    padding-top: 0px !important;
  }

  .padding-right-large--0 {
    padding-right: 0px !important;
  }

  .padding-bottom-large--0 {
    padding-bottom: 0px !important;
  }

  .padding-left-large--0 {
    padding-left: 0px !important;
  }

  .padding-large--8 {
    padding: 8px !important;
  }

  .padding-top-large--8 {
    padding-top: 8px !important;
  }

  .padding-right-large--8 {
    padding-right: 8px !important;
  }

  .padding-bottom-large--8 {
    padding-bottom: 8px !important;
  }

  .padding-left-large--8 {
    padding-left: 8px !important;
  }

  .padding-large--12 {
    padding: 12px !important;
  }

  .padding-top-large--12 {
    padding-top: 12px !important;
  }

  .padding-right-large--12 {
    padding-right: 12px !important;
  }

  .padding-bottom-large--12 {
    padding-bottom: 12px !important;
  }

  .padding-left-large--12 {
    padding-left: 12px !important;
  }

  .padding-large--16 {
    padding: 16px !important;
  }

  .padding-top-large--16 {
    padding-top: 16px !important;
  }

  .padding-right-large--16 {
    padding-right: 16px !important;
  }

  .padding-bottom-large--16 {
    padding-bottom: 16px !important;
  }

  .padding-left-large--16 {
    padding-left: 16px !important;
  }

  .padding-large--24 {
    padding: 24px !important;
  }

  .padding-top-large--24 {
    padding-top: 24px !important;
  }

  .padding-right-large--24 {
    padding-right: 24px !important;
  }

  .padding-bottom-large--24 {
    padding-bottom: 24px !important;
  }

  .padding-left-large--24 {
    padding-left: 24px !important;
  }

  .padding-large--32 {
    padding: 32px !important;
  }

  .padding-top-large--32 {
    padding-top: 32px !important;
  }

  .padding-right-large--32 {
    padding-right: 32px !important;
  }

  .padding-bottom-large--32 {
    padding-bottom: 32px !important;
  }

  .padding-left-large--32 {
    padding-left: 32px !important;
  }

  .padding-large--48 {
    padding: 48px !important;
  }

  .padding-top-large--48 {
    padding-top: 48px !important;
  }

  .padding-right-large--48 {
    padding-right: 48px !important;
  }

  .padding-bottom-large--48 {
    padding-bottom: 48px !important;
  }

  .padding-left-large--48 {
    padding-left: 48px !important;
  }

  .padding-large--80 {
    padding: 80px !important;
  }

  .padding-top-large--80 {
    padding-top: 80px !important;
  }

  .padding-right-large--80 {
    padding-right: 80px !important;
  }

  .padding-bottom-large--80 {
    padding-bottom: 80px !important;
  }

  .padding-left-large--80 {
    padding-left: 80px !important;
  }

  .padding-large--88 {
    padding: 88px !important;
  }

  .padding-top-large--88 {
    padding-top: 88px !important;
  }

  .padding-right-large--88 {
    padding-right: 88px !important;
  }

  .padding-bottom-large--88 {
    padding-bottom: 88px !important;
  }

  .padding-left-large--88 {
    padding-left: 88px !important;
  }

  .padding-large--100 {
    padding: 100px !important;
  }

  .padding-top-large--100 {
    padding-top: 100px !important;
  }

  .padding-right-large--100 {
    padding-right: 100px !important;
  }

  .padding-bottom-large--100 {
    padding-bottom: 100px !important;
  }

  .padding-left-large--100 {
    padding-left: 100px !important;
  }

  .padding-large--140 {
    padding: 140px !important;
  }

  .padding-top-large--140 {
    padding-top: 140px !important;
  }

  .padding-right-large--140 {
    padding-right: 140px !important;
  }

  .padding-bottom-large--140 {
    padding-bottom: 140px !important;
  }

  .padding-left-large--140 {
    padding-left: 140px !important;
  }

  .padding-large--164 {
    padding: 164px !important;
  }

  .padding-top-large--164 {
    padding-top: 164px !important;
  }

  .padding-right-large--164 {
    padding-right: 164px !important;
  }

  .padding-bottom-large--164 {
    padding-bottom: 164px !important;
  }

  .padding-left-large--164 {
    padding-left: 164px !important;
  }

  /**
  　* autoマージン・autoパディング
  　*/

  .margin-large--auto {
    margin: auto !important;
  }

  .margin-bottom-large--auto {
    margin-bottom: auto !important;
  }

  .margin-left-large--auto {
    margin-left: auto !important;
  }

  .margin-right-large--auto {
    margin-right: auto !important;
  }

  .margin-top-large--auto {
    margin-top: auto !important;
  }

  .padding-large--auto {
    padding: auto !important;
  }

  .padding-bottom-large--auto {
    padding-bottom: auto !important;
  }

  .padding-left-large--auto {
    padding-left: auto !important;
  }

  .padding-right-large--auto {
    padding-right: auto !important;
  }

  .padding-top-large--auto {
    padding-top: auto !important;
  }
}

@media (min-width: 1200px) {
  .margin-xlarge--0 {
    margin: 0px !important;
  }

  .margin-top-xlarge--0 {
    margin-top: 0px !important;
  }

  .margin-right-xlarge--0 {
    margin-right: 0px !important;
  }

  .margin-bottom-xlarge--0 {
    margin-bottom: 0px !important;
  }

  .margin-left-xlarge--0 {
    margin-left: 0px !important;
  }

  .margin-xlarge--8 {
    margin: 8px !important;
  }

  .margin-top-xlarge--8 {
    margin-top: 8px !important;
  }

  .margin-right-xlarge--8 {
    margin-right: 8px !important;
  }

  .margin-bottom-xlarge--8 {
    margin-bottom: 8px !important;
  }

  .margin-left-xlarge--8 {
    margin-left: 8px !important;
  }

  .margin-xlarge--12 {
    margin: 12px !important;
  }

  .margin-top-xlarge--12 {
    margin-top: 12px !important;
  }

  .margin-right-xlarge--12 {
    margin-right: 12px !important;
  }

  .margin-bottom-xlarge--12 {
    margin-bottom: 12px !important;
  }

  .margin-left-xlarge--12 {
    margin-left: 12px !important;
  }

  .margin-xlarge--16 {
    margin: 16px !important;
  }

  .margin-top-xlarge--16 {
    margin-top: 16px !important;
  }

  .margin-right-xlarge--16 {
    margin-right: 16px !important;
  }

  .margin-bottom-xlarge--16 {
    margin-bottom: 16px !important;
  }

  .margin-left-xlarge--16 {
    margin-left: 16px !important;
  }

  .margin-xlarge--24 {
    margin: 24px !important;
  }

  .margin-top-xlarge--24 {
    margin-top: 24px !important;
  }

  .margin-right-xlarge--24 {
    margin-right: 24px !important;
  }

  .margin-bottom-xlarge--24 {
    margin-bottom: 24px !important;
  }

  .margin-left-xlarge--24 {
    margin-left: 24px !important;
  }

  .margin-xlarge--32 {
    margin: 32px !important;
  }

  .margin-top-xlarge--32 {
    margin-top: 32px !important;
  }

  .margin-right-xlarge--32 {
    margin-right: 32px !important;
  }

  .margin-bottom-xlarge--32 {
    margin-bottom: 32px !important;
  }

  .margin-left-xlarge--32 {
    margin-left: 32px !important;
  }

  .margin-xlarge--48 {
    margin: 48px !important;
  }

  .margin-top-xlarge--48 {
    margin-top: 48px !important;
  }

  .margin-right-xlarge--48 {
    margin-right: 48px !important;
  }

  .margin-bottom-xlarge--48 {
    margin-bottom: 48px !important;
  }

  .margin-left-xlarge--48 {
    margin-left: 48px !important;
  }

  .margin-xlarge--80 {
    margin: 80px !important;
  }

  .margin-top-xlarge--80 {
    margin-top: 80px !important;
  }

  .margin-right-xlarge--80 {
    margin-right: 80px !important;
  }

  .margin-bottom-xlarge--80 {
    margin-bottom: 80px !important;
  }

  .margin-left-xlarge--80 {
    margin-left: 80px !important;
  }

  .margin-xlarge--88 {
    margin: 88px !important;
  }

  .margin-top-xlarge--88 {
    margin-top: 88px !important;
  }

  .margin-right-xlarge--88 {
    margin-right: 88px !important;
  }

  .margin-bottom-xlarge--88 {
    margin-bottom: 88px !important;
  }

  .margin-left-xlarge--88 {
    margin-left: 88px !important;
  }

  .margin-xlarge--100 {
    margin: 100px !important;
  }

  .margin-top-xlarge--100 {
    margin-top: 100px !important;
  }

  .margin-right-xlarge--100 {
    margin-right: 100px !important;
  }

  .margin-bottom-xlarge--100 {
    margin-bottom: 100px !important;
  }

  .margin-left-xlarge--100 {
    margin-left: 100px !important;
  }

  .margin-xlarge--140 {
    margin: 140px !important;
  }

  .margin-top-xlarge--140 {
    margin-top: 140px !important;
  }

  .margin-right-xlarge--140 {
    margin-right: 140px !important;
  }

  .margin-bottom-xlarge--140 {
    margin-bottom: 140px !important;
  }

  .margin-left-xlarge--140 {
    margin-left: 140px !important;
  }

  .margin-xlarge--164 {
    margin: 164px !important;
  }

  .margin-top-xlarge--164 {
    margin-top: 164px !important;
  }

  .margin-right-xlarge--164 {
    margin-right: 164px !important;
  }

  .margin-bottom-xlarge--164 {
    margin-bottom: 164px !important;
  }

  .margin-left-xlarge--164 {
    margin-left: 164px !important;
  }

  .padding-xlarge--0 {
    padding: 0px !important;
  }

  .padding-top-xlarge--0 {
    padding-top: 0px !important;
  }

  .padding-right-xlarge--0 {
    padding-right: 0px !important;
  }

  .padding-bottom-xlarge--0 {
    padding-bottom: 0px !important;
  }

  .padding-left-xlarge--0 {
    padding-left: 0px !important;
  }

  .padding-xlarge--8 {
    padding: 8px !important;
  }

  .padding-top-xlarge--8 {
    padding-top: 8px !important;
  }

  .padding-right-xlarge--8 {
    padding-right: 8px !important;
  }

  .padding-bottom-xlarge--8 {
    padding-bottom: 8px !important;
  }

  .padding-left-xlarge--8 {
    padding-left: 8px !important;
  }

  .padding-xlarge--12 {
    padding: 12px !important;
  }

  .padding-top-xlarge--12 {
    padding-top: 12px !important;
  }

  .padding-right-xlarge--12 {
    padding-right: 12px !important;
  }

  .padding-bottom-xlarge--12 {
    padding-bottom: 12px !important;
  }

  .padding-left-xlarge--12 {
    padding-left: 12px !important;
  }

  .padding-xlarge--16 {
    padding: 16px !important;
  }

  .padding-top-xlarge--16 {
    padding-top: 16px !important;
  }

  .padding-right-xlarge--16 {
    padding-right: 16px !important;
  }

  .padding-bottom-xlarge--16 {
    padding-bottom: 16px !important;
  }

  .padding-left-xlarge--16 {
    padding-left: 16px !important;
  }

  .padding-xlarge--24 {
    padding: 24px !important;
  }

  .padding-top-xlarge--24 {
    padding-top: 24px !important;
  }

  .padding-right-xlarge--24 {
    padding-right: 24px !important;
  }

  .padding-bottom-xlarge--24 {
    padding-bottom: 24px !important;
  }

  .padding-left-xlarge--24 {
    padding-left: 24px !important;
  }

  .padding-xlarge--32 {
    padding: 32px !important;
  }

  .padding-top-xlarge--32 {
    padding-top: 32px !important;
  }

  .padding-right-xlarge--32 {
    padding-right: 32px !important;
  }

  .padding-bottom-xlarge--32 {
    padding-bottom: 32px !important;
  }

  .padding-left-xlarge--32 {
    padding-left: 32px !important;
  }

  .padding-xlarge--48 {
    padding: 48px !important;
  }

  .padding-top-xlarge--48 {
    padding-top: 48px !important;
  }

  .padding-right-xlarge--48 {
    padding-right: 48px !important;
  }

  .padding-bottom-xlarge--48 {
    padding-bottom: 48px !important;
  }

  .padding-left-xlarge--48 {
    padding-left: 48px !important;
  }

  .padding-xlarge--80 {
    padding: 80px !important;
  }

  .padding-top-xlarge--80 {
    padding-top: 80px !important;
  }

  .padding-right-xlarge--80 {
    padding-right: 80px !important;
  }

  .padding-bottom-xlarge--80 {
    padding-bottom: 80px !important;
  }

  .padding-left-xlarge--80 {
    padding-left: 80px !important;
  }

  .padding-xlarge--88 {
    padding: 88px !important;
  }

  .padding-top-xlarge--88 {
    padding-top: 88px !important;
  }

  .padding-right-xlarge--88 {
    padding-right: 88px !important;
  }

  .padding-bottom-xlarge--88 {
    padding-bottom: 88px !important;
  }

  .padding-left-xlarge--88 {
    padding-left: 88px !important;
  }

  .padding-xlarge--100 {
    padding: 100px !important;
  }

  .padding-top-xlarge--100 {
    padding-top: 100px !important;
  }

  .padding-right-xlarge--100 {
    padding-right: 100px !important;
  }

  .padding-bottom-xlarge--100 {
    padding-bottom: 100px !important;
  }

  .padding-left-xlarge--100 {
    padding-left: 100px !important;
  }

  .padding-xlarge--140 {
    padding: 140px !important;
  }

  .padding-top-xlarge--140 {
    padding-top: 140px !important;
  }

  .padding-right-xlarge--140 {
    padding-right: 140px !important;
  }

  .padding-bottom-xlarge--140 {
    padding-bottom: 140px !important;
  }

  .padding-left-xlarge--140 {
    padding-left: 140px !important;
  }

  .padding-xlarge--164 {
    padding: 164px !important;
  }

  .padding-top-xlarge--164 {
    padding-top: 164px !important;
  }

  .padding-right-xlarge--164 {
    padding-right: 164px !important;
  }

  .padding-bottom-xlarge--164 {
    padding-bottom: 164px !important;
  }

  .padding-left-xlarge--164 {
    padding-left: 164px !important;
  }

  /**
  　* autoマージン・autoパディング
  　*/

  .margin-xlarge--auto {
    margin: auto !important;
  }

  .margin-bottom-xlarge--auto {
    margin-bottom: auto !important;
  }

  .margin-left-xlarge--auto {
    margin-left: auto !important;
  }

  .margin-right-xlarge--auto {
    margin-right: auto !important;
  }

  .margin-top-xlarge--auto {
    margin-top: auto !important;
  }

  .padding-xlarge--auto {
    padding: auto !important;
  }

  .padding-bottom-xlarge--auto {
    padding-bottom: auto !important;
  }

  .padding-left-xlarge--auto {
    padding-left: auto !important;
  }

  .padding-right-xlarge--auto {
    padding-right: auto !important;
  }

  .padding-top-xlarge--auto {
    padding-top: auto !important;
  }
}

/**
 * 表の基本スタイル。 `.table--*` でスタイルを追加してください。
 * class.
 */

.table {
  border-collapse: collapse;
  border-spacing: 0;
  display: table;
  width: 100%;
}

.table td,
.table th {
  display: table-cell;
  padding: 8px 8px;
  text-align: left;
  vertical-align: top;
}

.table td:first-child,
.table th:first-child {
  padding-left: 16px;
}

/**
 * 各行の下に線がある表。`.table`の延長
 */

.table--bordered tr {
  border-bottom: 1px solid #D3D4D5;
}

/**
 * 枠線がない表。`.table`の延長
 */

.table--striped tbody tr:nth-child(even) {
  background-color: #f4f4f4;
}

/**
 * マウスオーバーのときに行の背景色が変更する表。`.table`の延長
 */

.table--hoverable tbody tr:hover {
  background-color: #f4f4f4;
}

/**
 * 中央揃えの表。
 */

.align-center tr th,
.align-center tr td {
  text-align: center;
}

/**
 * 文字の色
 */

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

.text-danger {
  color: #ce0000 !important;
}

.text-grey {
  color: #737373 !important;
}

.text-success {
  color: #00f278 !important;
}

.text-black {
  color: #212a2f !important;
}

.text-accent {
  color: #fcc325 !important;
}

/**
 * 配置
 */

.text-justify {
  text-align: justify !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/**
 * 整列
 */

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

@media (min-width: 576px) {
  .text-left-small {
    text-align: left !important;
  }

  .text-right-small {
    text-align: right !important;
  }

  .text-center-small {
    text-align: center !important;
  }
}

@media (min-width: 768px) {
  .text-left-medium {
    text-align: left !important;
  }

  .text-right-medium {
    text-align: right !important;
  }

  .text-center-medium {
    text-align: center !important;
  }
}

@media (min-width: 992px) {
  .text-left-large {
    text-align: left !important;
  }

  .text-right-large {
    text-align: right !important;
  }

  .text-center-large {
    text-align: center !important;
  }
}

@media (min-width: 1200px) {
  .text-left-xlarge {
    text-align: left !important;
  }

  .text-right-xlarge {
    text-align: right !important;
  }

  .text-center-xlarge {
    text-align: center !important;
  }
}

/**
 * 大・小文字
 */

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

/**
 * テキスト効果
 */

.text-kerning-normal {
  letter-spacing: 0.1em;
}

.text-kerning-small {
  letter-spacing: 0.05em;
}

/**
 * テキストの影
 */

.text-no-shadow {
  text-shadow: none !important;
}

/**
 * テキストの太さ
 */

.font-weight-normal {
  font-weight: 400 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

.font-weight-bolder {
  font-weight: 900 !important;
}

.breadcrumb ul {
  display: flex;
  justify-content: flex-start;
  padding: 1%;
  margin: 0 auto;
}

.breadcrumb li {
  position: relative;
  padding-right: 2.5em;
  margin-right: 1em;
  white-space: nowrap;
}

.breadcrumb li::after {
  position: absolute;
  content: "\F787";
  font-family: "Font Awesome 5 Free";
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #fcc325;
  font-weight: 700;
}

.breadcrumb li:last-child::after {
  display: none;
}

/**
 * フレックス
 *
 */

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-end {
  justify-content: end !important;
}

@media (min-width: 576px) {
  .flex-row-small {
    flex-direction: row !important;
  }

  .flex-column-small {
    flex-direction: column !important;
  }

  .justify-content-start-small {
    justify-content: flex-start !important;
  }

  .justify-content-center-small {
    justify-content: center !important;
  }

  .justify-content-end-small {
    justify-content: end !important;
  }
}

@media (min-width: 768px) {
  .flex-row-medium {
    flex-direction: row !important;
  }

  .flex-column-medium {
    flex-direction: column !important;
  }

  .justify-content-start-medium {
    justify-content: flex-start !important;
  }

  .justify-content-center-medium {
    justify-content: center !important;
  }

  .justify-content-end-medium {
    justify-content: end !important;
  }
}

@media (min-width: 992px) {
  .flex-row-large {
    flex-direction: row !important;
  }

  .flex-column-large {
    flex-direction: column !important;
  }

  .justify-content-start-large {
    justify-content: flex-start !important;
  }

  .justify-content-center-large {
    justify-content: center !important;
  }

  .justify-content-end-large {
    justify-content: end !important;
  }
}

@media (min-width: 1200px) {
  .flex-row-xlarge {
    flex-direction: row !important;
  }

  .flex-column-xlarge {
    flex-direction: column !important;
  }

  .justify-content-start-xlarge {
    justify-content: flex-start !important;
  }

  .justify-content-center-xlarge {
    justify-content: center !important;
  }

  .justify-content-end-xlarge {
    justify-content: end !important;
  }
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.align-items-center {
  align-items: center !important;
}

/**
 * ツールチップのラッパ基本スタイル。 `.tooltip__wrapper--*` でスタイルを追加してください。
 * class.
 */

.tooltip__wrapper:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

/**
* ツールチップの基本スタイル。 `.tooltip--*` でスタイルを追加してください。
* class.
*/

.tooltip {
  visibility: hidden;
  background-color: #737373;
  border-radius: 0.2rem;
  position: absolute;
  bottom: 71%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 8;
}

.tooltip:after {
  border-width: 5px;
  border-style: solid;
  border-color: #737373 transparent transparent transparent;
  content: "";
  position: absolute;
  margin-left: -5px;
  top: 100%;
  left: 50%;
}