@charset "UTF-8";
/* ============================== */
/* bourbon */
/* ============================== */
/* ============================== */
/* vendor */
/* ============================== */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */ }

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

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block; }

/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px; }

/**
 * 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
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */ }

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0; }

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

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit; }

/**
 * 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 style in Android 4.3-.
 */
dfn {
  font-style: italic; }

/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000; }

/**
 * 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
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block; }

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

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

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden; }

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

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

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

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */ }

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

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

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

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Remove the default vertical scrollbar in IE.
 */
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 and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[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 IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block; }

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

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block; }

/**
 * Add the correct display in IE.
 */
template {
  display: none; }

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

/* ============================== */
/* common */
/* ============================== */
/*doc
---
title: grid
name: grid
category: basics
---

グリッドです。flexboxを使用しています。<br>

*/
.wrapper {
  box-sizing: border-box;
  max-width: 1728px;
  margin: 0 auto; }

.wrapper_white {
  box-sizing: border-box;
  max-width: 1728px;
  margin: 0 auto; }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem; }

.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -moz-box-flex: 0;
  -moz-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem; }

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

.col.reverse {
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.col-xs {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: auto;
  -moz-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto; }

.col-xs-1 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 8.3333333333%;
  -moz-flex-basis: 8.3333333333%;
  -ms-flex-preferred-size: 8.3333333333%;
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%; }

.col-xs-2 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 16.6666666667%;
  -moz-flex-basis: 16.6666666667%;
  -ms-flex-preferred-size: 16.6666666667%;
  flex-basis: 16.6666666667%;
  max-width: 16.6666666667%; }

.col-xs-3 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 25%;
  -moz-flex-basis: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-4 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 33.3333333333%;
  -moz-flex-basis: 33.3333333333%;
  -ms-flex-preferred-size: 33.3333333333%;
  flex-basis: 33.3333333333%;
  max-width: 33.3333333333%; }

.col-xs-5 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 41.6666666667%;
  -moz-flex-basis: 41.6666666667%;
  -ms-flex-preferred-size: 41.6666666667%;
  flex-basis: 41.6666666667%;
  max-width: 41.6666666667%; }

.col-xs-6 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 50%;
  -moz-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-7 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 58.3333333333%;
  -moz-flex-basis: 58.3333333333%;
  -ms-flex-preferred-size: 58.3333333333%;
  flex-basis: 58.3333333333%;
  max-width: 58.3333333333%; }

.col-xs-8 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 66.6666666667%;
  -moz-flex-basis: 66.6666666667%;
  -ms-flex-preferred-size: 66.6666666667%;
  flex-basis: 66.6666666667%;
  max-width: 66.6666666667%; }

.col-xs-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 75%;
  -moz-flex-basis: 75%;
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-10 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 83.3333333333%;
  -moz-flex-basis: 83.3333333333%;
  -ms-flex-preferred-size: 83.3333333333%;
  flex-basis: 83.3333333333%;
  max-width: 83.3333333333%; }

.col-xs-11 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 91.6666666667%;
  -moz-flex-basis: 91.6666666667%;
  -ms-flex-preferred-size: 91.6666666667%;
  flex-basis: 91.6666666667%;
  max-width: 91.6666666667%; }

.col-xs-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  -webkit-flex-basis: 100%;
  -moz-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.col-xs-offset-0 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 0; }

.col-xs-offset-1 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 8.3333333333%; }

.col-xs-offset-2 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 16.6666666667%; }

.col-xs-offset-3 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 25%; }

.col-xs-offset-4 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 33.3333333333%; }

.col-xs-offset-5 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 41.6666666667%; }

.col-xs-offset-6 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 50%; }

.col-xs-offset-7 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 58.3333333333%; }

.col-xs-offset-8 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 66.6666666667%; }

.col-xs-offset-9 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 75%; }

.col-xs-offset-10 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 83.3333333333%; }

.col-xs-offset-11 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 91.6666666667%; }

.col-xs-offset-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-left: 100%; }

.col-xs {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 0;
  -moz-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%; }

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
  text-align: left; }

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  text-align: center; }

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
  text-align: right; }

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center; }

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  -moz-align-items: flex-end;
  align-items: flex-end; }

.around-xs {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around; }

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

.first-xs {
  order: -1; }

.last-xs {
  order: 1; }

@media only screen and (min-width: 768px) {
  .container {
    width: 768px; }
  .col-sm {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .col-sm-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 8.3333333333%;
    -moz-flex-basis: 8.3333333333%;
    -ms-flex-preferred-size: 8.3333333333%;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-sm-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 16.6666666667%;
    -moz-flex-basis: 16.6666666667%;
    -ms-flex-preferred-size: 16.6666666667%;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-sm-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-sm-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 33.3333333333%;
    -moz-flex-basis: 33.3333333333%;
    -ms-flex-preferred-size: 33.3333333333%;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-sm-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 41.6666666667%;
    -moz-flex-basis: 41.6666666667%;
    -ms-flex-preferred-size: 41.6666666667%;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-sm-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-sm-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 58.3333333333%;
    -moz-flex-basis: 58.3333333333%;
    -ms-flex-preferred-size: 58.3333333333%;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-sm-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 66.6666666667%;
    -moz-flex-basis: 66.6666666667%;
    -ms-flex-preferred-size: 66.6666666667%;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-sm-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-sm-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 83.3333333333%;
    -moz-flex-basis: 83.3333333333%;
    -ms-flex-preferred-size: 83.3333333333%;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-sm-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 91.6666666667%;
    -moz-flex-basis: 91.6666666667%;
    -ms-flex-preferred-size: 91.6666666667%;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-sm-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-sm-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 0; }
  .col-sm-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 8.3333333333%; }
  .col-sm-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 16.6666666667%; }
  .col-sm-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 25%; }
  .col-sm-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 33.3333333333%; }
  .col-sm-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 41.6666666667%; }
  .col-sm-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 50%; }
  .col-sm-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 58.3333333333%; }
  .col-sm-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 66.6666666667%; }
  .col-sm-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 75%; }
  .col-sm-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 83.3333333333%; }
  .col-sm-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 91.6666666667%; }
  .col-sm-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 100%; }
  .col-sm {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  .start-sm {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left; }
  .center-sm {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center; }
  .end-sm {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right; }
  .top-sm {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  .middle-sm {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .bottom-sm {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .around-sm {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  .between-sm {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .first-sm {
    order: -1; }
  .last-sm {
    order: 1; } }

@media only screen and (min-width: 960px) {
  .container {
    width: 960px; }
  .col-md {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: auto;
    -moz-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto; }
  .col-md-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 8.3333333333%;
    -moz-flex-basis: 8.3333333333%;
    -ms-flex-preferred-size: 8.3333333333%;
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%; }
  .col-md-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 16.6666666667%;
    -moz-flex-basis: 16.6666666667%;
    -ms-flex-preferred-size: 16.6666666667%;
    flex-basis: 16.6666666667%;
    max-width: 16.6666666667%; }
  .col-md-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }
  .col-md-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 33.3333333333%;
    -moz-flex-basis: 33.3333333333%;
    -ms-flex-preferred-size: 33.3333333333%;
    flex-basis: 33.3333333333%;
    max-width: 33.3333333333%; }
  .col-md-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 41.6666666667%;
    -moz-flex-basis: 41.6666666667%;
    -ms-flex-preferred-size: 41.6666666667%;
    flex-basis: 41.6666666667%;
    max-width: 41.6666666667%; }
  .col-md-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }
  .col-md-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 58.3333333333%;
    -moz-flex-basis: 58.3333333333%;
    -ms-flex-preferred-size: 58.3333333333%;
    flex-basis: 58.3333333333%;
    max-width: 58.3333333333%; }
  .col-md-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 66.6666666667%;
    -moz-flex-basis: 66.6666666667%;
    -ms-flex-preferred-size: 66.6666666667%;
    flex-basis: 66.6666666667%;
    max-width: 66.6666666667%; }
  .col-md-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 75%;
    -moz-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }
  .col-md-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 83.3333333333%;
    -moz-flex-basis: 83.3333333333%;
    -ms-flex-preferred-size: 83.3333333333%;
    flex-basis: 83.3333333333%;
    max-width: 83.3333333333%; }
  .col-md-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 91.6666666667%;
    -moz-flex-basis: 91.6666666667%;
    -ms-flex-preferred-size: 91.6666666667%;
    flex-basis: 91.6666666667%;
    max-width: 91.6666666667%; }
  .col-md-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }
  .col-md-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 0; }
  .col-md-offset-05 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 4.1666666667%; }
  .col-md-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 8.3333333333%; }
  .col-md-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 16.6666666667%; }
  .col-md-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 25%; }
  .col-md-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 33.3333333333%; }
  .col-md-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 41.6666666667%; }
  .col-md-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 50%; }
  .col-md-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 58.3333333333%; }
  .col-md-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 66.6666666667%; }
  .col-md-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 75%; }
  .col-md-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 83.3333333333%; }
  .col-md-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 91.6666666667%; }
  .col-md-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-left: 100%; }
  .col-md {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -moz-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    -moz-flex-basis: 0;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%; }
  .start-md {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left; }
  .center-md {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    text-align: center; }
  .end-md {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right; }
  .top-md {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start; }
  .middle-md {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center; }
  .bottom-md {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end; }
  .around-md {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around; }
  .between-md {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between; }
  .first-md {
    order: -1; }
  .last-md {
    order: 1; } }

.contents .wrapper {
  max-width: 1360px; }

@media print, screen and (min-width: 960px) {
  .container-fluid {
    padding-right: 3rem;
    padding-left: 3rem; } }

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor; }

/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */
.icon-contact {
  width: 1.529296875em; }

.icon-logo_h {
  width: 3.3701171875em; }

.icon-logo_v {
  width: 0.962890625em; }

.icon-login {
  width: 15.29296875em; }

/*doc
---
title: normal button
name: normal button
category: button
---

通常のボタンです。

*/
.btn,
button, [type='button'], [type='reset'], [type='submit'] {
  appearance: none;
  background-color: #00b2b2;
  border: 0;
  border-radius: 0;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
  font-size: 9px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 7px 15px;
  text-decoration: none;
  transition: opacity, background-color 150ms ease;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap; }
  .btn:hover, .btn:focus,
  button:hover,
  button:focus, [type='button']:hover, [type='button']:focus, [type='reset']:hover, [type='reset']:focus, [type='submit']:hover, [type='submit']:focus {
    opacity: 1;
    background-color: #ff5252; }
  .btn:disabled,
  button:disabled, [type='button']:disabled, [type='reset']:disabled, [type='submit']:disabled {
    cursor: not-allowed;
    opacity: 0.5; }
  @media screen and (min-width: 768px) {
    .btn,
    button, [type='button'], [type='reset'], [type='submit'] {
      font-size: 12px;
      padding: 9px 23px; } }

.btn-bottom {
  text-align: center;
  margin: 48px 0; }
  @media screen and (min-width: 768px) {
    .btn-bottom {
      margin: 64px 0 104px; } }

.btn-contact {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 17px 0;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 408px;
  margin: 0 auto; }
  .btn-contact .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact:hover, .btn-contact:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact {
      border-radius: 32px;
      font-size: 18px;
      padding-top: 22px;
      padding-bottom: 22px; } }

.btn-contact-mini {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 17px 0;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 258px;
  margin: 0 auto; }
  .btn-contact-mini .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-mini:hover, .btn-contact-mini:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-mini {
      border-radius: 32px;
      font-size: 18px;
      padding-top: 22px;
      padding-bottom: 22px; } }

.btn-contact-mini2 {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 17px 0;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 208px;
  margin: 0 auto; }
  .btn-contact-mini2 .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-mini2:hover, .btn-contact-mini2:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-mini2 {
      border-radius: 32px;
      font-size: 18px;
      padding-top: 22px;
      padding-bottom: 22px; } }

.btn-contact-mini3 {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 8px 8px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 308px;
  margin: 0 auto; }
  .btn-contact-mini3 .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-mini3:hover, .btn-contact-mini3:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-mini3 {
      max-width : 308px;
      min-width : 108px;
      border-radius: 32px;
      font-size: 14px;
      padding-top: 8px;
      padding-bottom: 8px; } }

.btn-contact-mini4 {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 17px 0px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 0 auto; }
  .btn-contact-mini4 .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-mini4:hover, .btn-contact-mini4:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-mini4 {
      max-width : 158px;
      min-width : 108px;
      border-radius: 32px;
      font-size: 14px; } }

.btn-contact-minimini {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 8px 8px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 8px auto; }
  .btn-contact-minimini .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-minimini:hover, .btn-contact-minimini:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-minimini {
      max-width : 188px;
      min-width : 88px;
      border-radius: 32px;
      font-size: 14px;
      padding-top: 8px;
      padding-bottom: 8px; } }

.btn-contact-minimini2 {
  display: inline;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 8px 32px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 8px 4px; }
  .btn-contact-minimini .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-minimini:hover, .btn-contact-minimini:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-minimini {
      max-width : 188px;
      min-width : 88px;
      border-radius: 32px;
      font-size: 14px;
      padding-top: 8px;
      padding-bottom: 8px; } }

.btn-contact-minimini3 {
  display: inline;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 2px 8px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 8px auto; }
  .btn-contact-minimini .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-minimini:hover, .btn-contact-minimini:focus {
    opacity: 0.85; }

.btn-contact-minimini4 {
  display: inline;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 4px 16px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 8px 4px; }
  .btn-contact-minimini4 .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-minimini4:hover, .btn-contact-minimini:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-minimini4 {
      max-width : 188px;
      min-width : 88px;
      border-radius: 28px;
      font-size: 14px;
      padding-top: 4px;
      padding-bottom: 4px; } }

.btn-success {
  display: block;
  appearance: none;
  background-color: #faba26;
  border: 0;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 17px 0;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 408px;
  margin: 0 auto; }
  .btn-contact .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact:hover, .btn-contact:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact {
      border-radius: 32px;
      font-size: 18px;
      padding-top: 22px;
      padding-bottom: 22px; } }

.btn-contact-sample {
  display: inline;
  appearance: none;
  background-color: #00B2B2;
  border: 0;
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  font-weight: bold;
  line-height: 1;
  padding: 8px 32px;
  text-decoration: none;
  transition: opacity 150ms ease;
  user-select: none;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  max-width: 158px;
  margin: 8px 4px; }
  .btn-contact-minimini .icon {
    vertical-align: middle;
    margin-right: 12px; }
  .btn-contact-minimini:hover, .btn-contact-minimini:focus {
    opacity: 0.85; }
  @media screen and (min-width: 768px) {
    .btn-contact-minimini {
      max-width : 188px;
      min-width : 88px;
      border-radius: 12px;
      font-size: 14px;
      padding-top: 8px;
      padding-bottom: 8px; } }

btn-detail {
  display: block;
  background-color: #faba26;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  margin: 0 auto; }


fieldset {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  font-weight: 600;
  margin-bottom: 0.25rem;
  padding: 0; }

label {
  display: block;
  font-weight: normal;
  margin-bottom: 0.25rem;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif; }

input {
  display: block;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 0.875rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  border: none;
  background-color: #fff;
  margin: 0;
  outline: 0; }

[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #B2B2B2;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: .75rem;
  line-height: 1.666;
  margin-bottom: 0.5rem;
  padding: 0.3333333333rem 0.3333333333rem 0.3333333333rem 0;
  transition: border-color 150ms ease;
  width: 100%; }
  [type='color']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='email']:focus, [type='month']:focus, [type='number']:focus, [type='password']:focus, [type='search']:focus, [type='tel']:focus, [type='text']:focus, [type='time']:focus, [type='url']:focus, [type='week']:focus, input:not([type]):focus, textarea:focus {
    outline: none; }
  [type='color']:disabled, [type='date']:disabled, [type='datetime']:disabled, [type='datetime-local']:disabled, [type='email']:disabled, [type='month']:disabled, [type='number']:disabled, [type='password']:disabled, [type='search']:disabled, [type='tel']:disabled, [type='text']:disabled, [type='time']:disabled, [type='url']:disabled, [type='week']:disabled, input:not([type]):disabled, textarea:disabled {
    background-color: #f2f2f2;
    cursor: not-allowed; }
    [type='color']:disabled:hover, [type='date']:disabled:hover, [type='datetime']:disabled:hover, [type='datetime-local']:disabled:hover, [type='email']:disabled:hover, [type='month']:disabled:hover, [type='number']:disabled:hover, [type='password']:disabled:hover, [type='search']:disabled:hover, [type='tel']:disabled:hover, [type='text']:disabled:hover, [type='time']:disabled:hover, [type='url']:disabled:hover, [type='week']:disabled:hover, input:not([type]):disabled:hover, textarea:disabled:hover {
      border: 1px solid #f7f7f5; }

textarea {
  resize: vertical;
  margin-bottom: 0;
  font-size: 16px;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 3px;
  padding: 7px 12px;
  -webkit-appearance: none; }

[type="search"] {
  appearance: none; }

[type="checkbox"],
[type="radio"] {
  display: inline;
  margin-right: 0.25rem; }

[type="file"] {
  margin-bottom: 0.5rem;
  width: 100%; }

[type='text'] {
  resize: vertical;
  margin-bottom: 0;
  font-size: 16px;
  display: inline;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 3px;
  padding: 7px 12px; }
  
select {
  resize: vertical;
  height: 25px;
  margin-bottom: 0.5rem;
  font-size: 16px;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 3px;
  padding: 0px 12px; }

/*doc
---
title: form-area
name: form-area
category: form
---

フォームのスタイルです。

*/
.form-area {
  position: relative; }
  .form-area input[type="text"],
  .form-area input[type="tel"],
  .form-area input[type="email"],
  .form-area input[type="number"],
  .form-area input[type="url"] {
    font-size: 16px;
    line-height: 1;
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #dddddd;
    border-radius: 3px;
    padding: 7px 12px; }
  .form-area .row {
    margin-top: 0;
    margin-right: -0.3125rem;
    margin-left: -0.3125rem; }
  .form-area .form-area__lead {
    margin: 30px 0; }
  .form-area .form-area__error-top {
    margin: 32px 0 36px; }
  .form-area .form-area__item {
    background-color: #f6f6f6;
    border-bottom: 1px solid  #ddd;
    padding: 20px 10px 15px; }
    .form-area .form-area__item:first-child {
      border-top: 1px solid  #ddd; }
    .form-area .form-area__item:nth-child(2n) {
      background-color: #fafafa; }
  .form-area .form-area__item-name {
    font-weight: bold; }
  .form-area .form-area__item-input {
    margin-top: 15px; }
  .form-area .form-area__item-note small {
    font-size: 14px;
    line-height: 1.5;
    display: block;
    margin-top: 10px; }
  .form-area .btn a, .form-area .btn input {
    font-size: 15px;
    line-height: 1;
    padding: 14px 0; }
  @media print, screen and (min-width: 750px) {
    .form-area input[type="text"],
    .form-area input[type="tel"],
    .form-area input[type="email"],
    .form-area input[type="number"],
    .form-area input[type="url"],
    .form-area textarea {
      padding: 11px 12px; }
      .form-area input[type="text"].form-area__item-input--no-note,
      .form-area input[type="tel"].form-area__item-input--no-note,
      .form-area input[type="email"].form-area__item-input--no-note,
      .form-area input[type="number"].form-area__item-input--no-note,
      .form-area input[type="url"].form-area__item-input--no-note,
      .form-area textarea.form-area__item-input--no-note {
        width: 87%; }
    .form-area .row {
      margin-right: -0.625rem;
      margin-left: -0.625rem; }
    .form-area .form-area__lead {
      margin: 35px 0; }
    .form-area .form-area__error-top {
      margin: -5px 0 35px; }
    .form-area .form-area__item {
      padding: 0; }
      .form-area .form-area__item.form-area__item--pre-entered .form-area__item-input-inner {
        padding: 23px 50px 23px 0; }
    .form-area .form-area__item-input {
      margin-top: 0; }
    .form-area .form-area__item-name-inner {
      padding: 23px 0 23px 40px; }
    .form-area .form-area__item-input-inner {
      padding: 15px 0; }
      .form-area .form-area__item-input-inner .radio--simple:first-child,
      .form-area .form-area__item-input-inner .checkbox--simple:first-child {
        margin-top: 8px; }
      .form-area .form-area__item-input-inner .radio--simple:last-child,
      .form-area .form-area__item-input-inner .checkbox--simple:last-child {
        margin-bottom: 8px; }
    .form-area .form-area__item-note-inner {
      padding: 15px 0; }
    .form-area .form-area__item-note small {
      font-size: 12px;
      line-height: 2;
      display: block;
      margin-top: 10px; }
    .form-area .btn {
      margin-top: 40px; }
      .form-area .btn a, .form-area .btn input {
        font-size: 20px;
        line-height: 1;
        padding: 20px 0; } }

/*doc
---
title: checkbox
name: checkbox
category: form
---

チェックボックスのスタイルです。

*/
.checkbox--text {
  cursor: pointer;
  position: relative;
  display: block;
  margin-top: 10px;
  margin-right: 0;
  padding-left: 25px;
  overflow: hidden; }
  .checkbox--text.checkbox--text-inline {
    display: inline-block;
    margin-right: 20px; }
  .checkbox--text:first-child {
    margin-top: 0; }
  .checkbox--text:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid  #dddddd;
    border-radius: 2px; }
  .checkbox--text:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
    border-right: 3px solid #999999;
    border-bottom: 3px solid #999999;
    transform: rotate(45deg); }
  .checkbox--text input[type="checkbox"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 2;
    left: -17px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 16px;
    height: 16px;
    box-shadow: 17px -1px #FFF; }
    .checkbox--text input[type="checkbox"]:checked {
      z-index: 0; }
  @media print, screen and (min-width: 750px) {
    .checkbox--text {
      margin-top: 15px; }
      .checkbox--text:first-child {
        margin-top: 9px; }
      .checkbox--text:after {
        top: 5px; } }

/*doc
---
title: radio
name: radio
category: form
---

ラジオボタンのスタイルです。

*/
.radio--text {
  cursor: pointer;
  position: relative;
  display: block;
  margin-top: 10px;
  margin-right: 0;
  padding-left: 25px;
  overflow: hidden; }
  .radio--text.radio--text-inline {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 5px;
    margin-right: 40px; }
  .radio--text:first-child {
    margin-top: 0; }
  .radio--text:before {
    content: '';
    position: absolute;
    z-index: 3;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 18px;
    height: 18px;
    border: 2px solid #dddddd;
    border-radius: 50%;
    box-sizing: border-box; }
  .radio--text:after {
    content: '';
    position: absolute;
    z-index: 1;
    display: block;
    left: 5px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 8px;
    height: 8px;
    background-color: #999999;
    border-radius: 100%; }
  .radio--text input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    position: absolute;
    z-index: 2;
    left: -17px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    box-shadow: 17px -1px #FFF; }
    .radio--text input[type="radio"]:checked {
      z-index: 0; }
  @media print, screen and (min-width: 750px) {
    .radio--text {
      margin-top: 15px; }
      .radio--text:first-child {
        margin-top: 9px; } }

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

.checkbox02-input{
  display: none;
}
.checkbox02-parts{
  padding-left: 70px;
  position:relative;
  margin-right: 20px;
}
.checkbox02-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 4px;
  left: 50px;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox02-input:checked + .checkbox02-parts{
  color: #009a9a;
}
.checkbox02-input:checked + .checkbox02-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 55px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

.checkbox03-parts{
  cursor: pointer;
  display:inline-block;
  background-color: #525252;
  color:White;
  padding:5px;
  border: 1px solid #434343;
  border-radius: 5px;
}
.checkbox03-input{
  display: none;
}
.checkbox03-input:checked + .checkbox03-parts {
  background-color: #ff5252;
}

.checkbox04-input {
    display: none;
}

.checkbox04-parts {
    padding-left: 20px;
    position: relative;
    margin-right: 20px;
}

    .checkbox04-parts::before {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 4px;
    }

.checkbox04-input:checked + .checkbox04-parts {
    color: #009a9a;
}

    .checkbox04-input:checked + .checkbox04-parts::after {
        content: "";
        display: block;
        position: absolute;
        top: -2px;
        left: 5px;
        width: 7px;
        height: 14px;
        transform: rotate(40deg);
        border-bottom: 3px solid #009a9a;
        border-right: 3px solid #009a9a;
    }

.checkbox05-input {
    display: none;
}

.checkbox05-parts {
    padding-left: 20px;
    position: relative;
    margin-right: 20px;
    cursor: pointer;
}

    .checkbox05-parts::before {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        left: -5px;
        width: 15px;
        height: 15px;
        border: 1px solid #999;
        border-radius: 4px;
    }

.checkbox05-input:checked + .checkbox05-parts {
    color: #009a9a;
}

    .checkbox05-input:checked + .checkbox05-parts::after {
        content: "";
        display: block;
        position: absolute;
        top: -3px;
        left: 0px;
        width: 7px;
        height: 14px;
        transform: rotate(40deg);
        border-bottom: 3px solid #009a9a;
        border-right: 3px solid #009a9a;
    }


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

dl {
  margin-bottom: 0.5rem; }
  dl dt {
    font-weight: 600;
    margin-top: 0.5rem; }
  dl dd {
    margin: 0; }

/*doc
---
title: list-disc-colored
name: list-disc-colored
category: basics
---

色付きマーカーのリストです。

*/
.list-disc-colored {
  margin: 0 0 48px;
  font-size: 14px;
  line-height: 28px;
  color: #595854; }
  .list-disc-colored:last-child {
    margin-bottom: 0; }
  .list-disc-colored li {
    margin-top: 24px;
    padding-left: 36px;
    position: relative; }
    .list-disc-colored li::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 0.8em;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background-color: #00b2b2; }
  @media screen and (min-width: 768px) {
    .list-disc-colored {
      margin-bottom: 64px;
      font-size: 18px;
      line-height: 36px; }
      .list-disc-colored li {
        margin-top: 14px;
        padding-left: 48px; }
        .list-disc-colored li::before {
          left: 20px;
          width: 8px;
          height: 8px; } }

.list-disc-colored-blue {
  margin: 0 0 48px;
  font-size: 14px;
  line-height: 28px;
  color: #1c498c; }
  .list-disc-colored-blue:last-child {
    margin-bottom: 0; }
  .list-disc-colored-blue li {
    margin-top: 24px;
    padding-left: 36px;
    position: relative; }
    .list-disc-colored-blue li::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 0.75em;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background-color: #00b2b2; }
  @media screen and (min-width: 768px) {
    .list-disc-colored-blue {
      margin-bottom: 64px;
      font-size: 18px;
      line-height: 36px; }
      .list-disc-colored-blue li {
        margin-top: 14px;
        padding-left: 48px; }
        .list-disc-colored-blue li::before {
          left: 20px;
          width: 8px;
          height: 8px; } }


.list-disc-colored-smart {
  margin: 0 0 0;
  font-size: 15px;
  line-height: 16px;
  color: #595854; }
  .list-disc-colored-smart:last-child {
    margin-bottom: 8px; }
  .list-disc-colored-smart li {
    margin-top: 8px;
    padding-left: 36px;
    position: relative; }
    .list-disc-colored-smart li::before {
      content: "";
      display: inline-block;
      position: absolute;
      top: 4px;
      left: 15px;
      width: 6px;
      height: 6px;
      border-radius: 2px;
      background-color: #00b2b2; }
  @media screen and (min-width: 768px) {
    .list-disc-colored-smart {
      margin-bottom: 0;
      font-size: 15px;
      line-height: 18px; }
      .list-disc-colored-smart li {
        margin-top: 8px;
        padding-left: 48px; }
        .list-disc-colored-smart li::before {
          left: 20px;
          width: 8px;
          height: 8px; } }

/*doc
---
title: list-with-heading
name: list-with-heading
category: basics
---

見出し付きのリストです。

*/
@media screen and (min-width: 768px) {
  .list-with-heading {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    margin-top: 32px; } }

@media screen and (min-width: 768px) {
  .list-with-heading__column {
    -webkit-flex-basis: 48.48%;
    -moz-flex-basis: 48.48%;
    -ms-flex-preferred-size: 48.48%;
    flex-basis: 48.48%; } }

.list-with-heading__item {
  margin: 0; }

.list-with-heading__header {
  margin-top: 24px;
  background-color: rgba(0, 178, 178, 0.1);
  color: #00b2b2;
  font-weight: bold;
  font-size: 11px;
  line-height: 22px;
  padding: 4px 12px 2px 12px; }
  @media screen and (min-width: 768px) {
    .list-with-heading__header {
      margin-top: 32px;
      font-size: 14px;
      padding: 5px 16px; } }

.list-with-heading__content {
  margin-top: 12px;
  font-size: 11px;
  line-height: 29px;
  color: #595854; }
  @media screen and (min-width: 768px) {
    .list-with-heading__content {
      font-size: 14px;
      line-height: 22px; }
      .list-with-heading__content .list-disc {
        margin-left: 16px; }
      .list-with-heading__content li {
        margin-top: 16px; } }

/*doc
---
title: list-disc
name: list-disc
category: basics
---

頭に黒丸のつくリストです。

*/
.list-disc li {
  padding-left: 1em;
  position: relative; }
  .list-disc li:before {
    content: "・";
    position: absolute;
    left: 0; }

.list-disc.is-in-section {
  font-size: 11px;
  line-height: 22px; }
  @media screen and (min-width: 1150px) {
    .list-disc.is-in-section {
      font-size: 14px;
      line-height: 38px; } }

/*doc
---
title: list-none
name: list-none
category: basics
---

頭に黒丸をつけないリストです。

*/
.list-none li {
  padding-left: 1em;
  position: relative; }
  .list-none li:before {
    content: "";
    position: absolute;
    left: 0; }

.list-none.is-in-section {
  font-size: 11px;
  line-height: 22px; }
  @media screen and (min-width: 1150px) {
    .list-none.is-in-section {
      font-size: 14px;
      line-height: 38px; } }

.list-none-font li {
  font-weight: normal;
  font-size: 15px;
  line-height: 28px;
  padding-left: 1em;
  position: relative; }
  .list-none li:before {
    content: "";
    position: absolute;
    left: 0; }
/*doc
---
title: example-list
name: example-list
category: basics
---

見出しと罫線のついたリストです。

*/
.example-list.has-no-lead .row:first-child .col-xs-12:first-child .box-bordered:first-child {
  margin-top: 0; }

.example-list .lead {
  font-weight: 700; }

@media screen and (min-width: 768px) {
  .example-list .lead {
    margin-top: -32px; }
  .example-list.has-no-lead .row:first-child .box-bordered:first-child {
    margin-top: 0; } }

table {
  border-collapse: collapse;
  margin: 24px 0 0;
  table-layout: fixed;
  width: 100%;
  font-size: 11px;
  line-height: 2; }
  @media screen and (min-width: 768px) {
    table {
      font-size: 14px;
      margin-top: 32px; } }

th {
  border-top: 1px solid #e5e5e3;
  border-bottom: 1px solid #e5e5e3;
  padding: 10px 0;
  text-align: left;
  /*position: relative;*/
  font-weight: 700;
  color: #1c498c;
  width: 25.53%; }
  /*th:before, th:after {
    content: "";
    position: absolute;
    right: 0;
    width: 15px;
    border-top: 1px solid #fff; }
  th:before {
    top: -1px; }
  th:after {
    bottom: -1px; }*/
  @media screen and (min-width: 768px) {
    th {
      padding: 17px 0;
      width: 27.13%; }
      /*th:before, th:after {
        width: 24px; }*/ }

td {
  width: 74.47%;
  border-top: 1px solid #e5e5e3;
  border-bottom: 1px solid #e5e5e3;
  padding: 10px 0; }
  @media screen and (min-width: 768px) {
    td {
      padding: 17px 0;
      width: 72.87%; } }

.table-type01 {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #1f75cc;
  margin: 16px 0 0 48px;
  table-layout: fixed;
  width: calc(100% - 48px);
  font-size: 14px;
  line-height: 1.2; }

.table-type01 th {
  padding: 6px 15px;
  text-align: left;
  position: relative;
  font-weight: 700;
  background: #ecf2fe;
  color: #1c498c;
  width: 20%; }

.table-type01 td {
  padding: 6px 15px;
  text-align: left;
  position: relative;
  width: 80%;
  text-align: left;
   }

.table-type02 {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #1f75cc;
  margin: 16px 0 0 48px;
  table-layout: fixed;
  width: calc(100% - 48px);
  font-size: 14px;
  line-height: 1.2; }

.table-type02 th {
  padding: 6px 15px;
  text-align: left;
  position: relative;
  font-weight: 700;
  background: #ecf2fe;
  color: #1c498c;
   }

.table-type02 td {
  padding: 6px 15px;
  text-align: left;
  position: relative;
  text-align: left;
   }

.table-type02-5 {
  width: 5%;
   }
.table-type02-10 {
  width: 10%;
   }
.table-type02-15 {
  width: 15%;
   }
.table-type02-20 {
  width: 20%;
   }
.table-type02-25 {
  width: 25%;
   }
.table-type02-30 {
  width: 30%;
   }
.table-type02-35 {
  width: 35%;
   }
.table-type02-40 {
  width: 40%;
   }
.table-type02-45 {
  width: 45%;
   }
.table-type02-50 {
  width: 50%;
   }
.table-type02-55 {
  width: 55%;
   }
.table-type02-60 {
  width: 60%;
   }
.table-type02-65 {
  width: 65%;
   }
.table-type02-70 {
  width: 70%;
   }
.table-type02-75 {
  width: 75%;
   }
.table-type02-80 {
  width: 80%;
   }
.table-type02-85 {
  width: 85%;
   }
.table-type02-90 {
  width: 90%;
   }
.table-type02-95 {
  width: 95%;
   }
.table-type02-100 {
  width: 100%;
   }

.table-type03 {
  border-spacing: 0;
  border-collapse: collapse;
  border: 1px solid #1f75cc;
  margin: 0 0 0 30px;
  table-layout: fixed;
  width: calc(100% - 30px);
  border-top-width:1em;
  font-size: 14px;
  line-height: 1.2; }

.table-type03 th {
  padding: 6px 15px;
  border: 1px solid #1f75cc;
  text-align: left;
  /*position: relative;*/
  font-weight: 700;
  background: #ecf2fe;
  color: #1c498c;
   }

.table-type03 .title  {
  font-size:20px;
  line-height:28px;
  background: #1F75CC;
  color: #FFFFFF;
   }

.table-type03 td {
  padding: 6px 15px;
  border: 1px solid #1f75cc;
  text-align: left;
  /*position: relative;*/
  text-align: left;
   }


tr,
td,
th {
  vertical-align: top; }

body {
  color: #595854;
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 0.875rem;
  line-height: 1.71;
  margin: 0;
  word-wrap: break-word;
  background-color: #1c498c; }
  @media screen and (min-width: 768px) {
    body {
      letter-spacing: 0.05em; } }

.defs {
  display: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", "Noto Sans Japanese", sans-serif;
  font-size: 0.875rem;
  line-height: 1.75;
  margin: 0 0 0.5rem;
  font-weight: normal; }

p {
  margin: 0 0 0.5rem; }

a {
  color: #595854;
  text-decoration: none;
  transition: all 150ms ease; }
  a:active, a:hover {
    opacity: 0.85; }

hr {
  border-bottom: 1px solid #1c498c;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  margin: 48px 0;
  position: relative; }
  hr::before, hr::after {
    content: "";
    position: absolute;
    border: 1px solid #1c498c;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    box-sizing: border-box;
    transform: translateY(-50%); }
  hr::before {
    left: 0; }
  hr::after {
    right: 0; }
  .list-disc-colored + hr {
    margin-top: 72px; }
  .section hr {
    border-bottom-color: #e5e5e3;
    margin: 24px 0; }
    .section hr:before, .section hr:after {
      content: none; }
  @media screen and (min-width: 768px) {
    hr {
      margin: 64px 30px; }
      hr::before, hr::after {
        width: 8px;
        height: 8px; }
      .section hr {
        margin: 32px 0; } }

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

mark {
  background: linear-gradient(transparent 40%, #ffff00 40%);
  display: inline-block; }

iframe {
  border: none; }

/*doc
---
title: heading
name: heading
category: basics
---

見出しです。

*/
/* heading-lv1 */
.heading-lv1 {
  text-align: center;
  margin: 0 0 30px; }
  @media screen and (min-width: 768px) {
    .heading-lv1 {
      margin-bottom: 64px; } }

.heading-lv1__en {
  font-size: 24px;
  line-height: 1;
  font-weight: 700;
  display: block;
  text-transform: uppercase;
  color: #1c498c;
  font-family: "Montserrat", "Noto Sans Japanese", sans-serif; }
  @media screen and (min-width: 768px) {
    .heading-lv1__en {
      font-size: 32px; } }

.heading-lv1__ja {
  font-size: 12px;
  line-height: 1;
  font-weight: bold;
  display: block;
  color: #00b2b2;
  margin-top: 12px;
  letter-spacing: 0.1em; }
  @media screen and (min-width: 768px) {
    .heading-lv1__ja {
      font-size: 16px;
      margin-top: 16px; } }

/* heading-lv2 */
.heading-lv2 {
  margin: 24px 0 0;
  text-align: center;
  letter-spacing: 0; }
  @media screen and (min-width: 768px) {
    .heading-lv2 {
      margin-top: 32px; } }

.heading-lv2__category {
  display: block;
  color: #00b2b2;
  text-transform: uppercase;
  font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
  font-weight: bold;
  font-size: 11px;
  line-height: 1; }
  .heading-lv2__category b {
    color: #1f75cc; }
  @media screen and (min-width: 768px) {
    .heading-lv2__category {
      font-size: 16px; } }

.heading-lv2__title {
  display: block;
  font-size: 30px;
  line-height: 39px;
  color: #ff5252;
  margin-top: 7px; }
  @media screen and (min-width: 768px) {
    .heading-lv2__title {
      font-size: 40px;
      margin-top: 16px;
      letter-spacing: 0.1em; } }

.heading-lv2__title-sub {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #ff5252;
  margin-top: 4px;
  letter-spacing: 0.05em; }
  @media screen and (min-width: 768px) {
    .heading-lv2__title-sub {
      font-size: 18px;
      margin-top: 16px;
      letter-spacing: 0.1em; } }

/* heading-lv3 */
.heading-lv3 {
  margin: 0; }
  @media screen and (min-width: 768px) {
    .heading-lv3 {
      letter-spacing: 0.1em; } }

.heading-lv3--bg {
  background-color: #1c498c;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  border-left: 8px solid #ff5252;
  padding: 12px 13px;
  margin: 16px -1.5rem 12px; }
  hr + .heading-lv3-outer .heading-lv3--bg {
    margin-top: 0; }
  @media screen and (min-width: 768px) {
    .heading-lv3--bg {
      margin: 24px 0 20px;
      font-size: 24px;
      padding: 12px 32px 12px;
      border-left-width: 10px; }
      hr + .heading-lv3-outer .heading-lv3--bg {
        margin-top: 0; } }

.heading-lv3--no-bg {
  border-left: 5px solid #ff5252;
  color: #1c498c;
  padding-left: 20px;
  font-size: 15px;
  line-height: 26px;
  font-weight: 700; }
  @media screen and (min-width: 768px) {
    .heading-lv3--no-bg {
      border-left-width: 6px;
      font-size: 20px;
      line-height: 35px;
      padding-left: 25px; } }

/* heading-lv4 */
.heading-lv4 {
  margin: 0; }

.heading-lv4--normal {
  margin: 16px 0 12px;
  background-color: #1f75cc;
  color: #ffffff;
  border-radius: 4px;
  padding: 14px 20px 14px 36px;
  font-size: 15px;
  line-height: 23px;
  position: relative;
  font-weight: 700; }
  .heading-lv4--normal:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-color: #ff5252; }
  .section-inner .heading-lv4--normal:first-child {
    margin-top: 0; }
  @media screen and (min-width: 768px) {
    .heading-lv4--normal {
      margin: 32px 0 24px;
      border-radius: 6px;
      font-size: 20px;
      line-height: 36px;
      padding: 6px 20px 5px 48px; }
      .heading-lv4--normal:before {
        width: 8px;
        height: 8px;
        border-width: 2px;
        left: 18px; } }

.heading-lv4--no-bg {
  padding: 0 17px;
  margin: 30px 0;
  text-align: center;
  position: relative; }
  .heading-lv4--no-bg::after {
    content: "";
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    border-top: 1px solid #e5e5e3; }
  .section-inner .heading-lv4--no-bg:first-child {
    margin-top: 0; }
  .heading-lv4--no-bg .heading-lv4__inner {
    display: inline-block;
    color: #1c498c;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    background-color: #ffffff;
    padding: 0 11px;
    position: relative;
    z-index: 1; }
  .img-wrapper + .heading-lv4--no-bg {
    margin-top: 48px; }
  @media screen and (min-width: 768px) {
    .heading-lv4--no-bg {
      margin: 64px 0; }
      .heading-lv4--no-bg .heading-lv4__inner {
        font-size: 24px;
        padding-left: 24px;
        padding-right: 24px; }
      .img-wrapper + .heading-lv4--no-bg {
        margin-top: 96px; } }

.heading-lv4--no-marker {
  font-size: 15px;
  line-height: 27px;
  color: #1f75cc;
  border: 2px solid currentColor;
  font-weight: 700;
  text-align: center;
  padding: 3px 0;
  margin: 24px 0 20px; }
  @media screen and (min-width: 768px) {
    .heading-lv4--no-marker {
      font-size: 20px;
      line-height: 36px;
      padding: 4px 0;
      margin: 48px 0 40px; } }

/* heading-lv5 */
/*doc
---
title: lead
name: lead
category: basics
---

リード文です。

*/
.lead {
  font-size: 14px;
  line-height: 2;
  margin: 24px 0 0;
  color: #1f75cc; }
  @media screen and (min-width: 768px) {
    .lead {
      font-size: 18px;
      line-height: 36px;
      margin-top: 32px; } }
  .heading-lv1 + .lead {
    margin-top: 23px; }
    @media screen and (min-width: 768px) {
      .heading-lv1 + .lead {
        text-align: center;
        margin-top: 64px; } }
  .heading-lv2 + .lead {
    margin-top: 36px; }
    @media screen and (min-width: 768px) {
      .heading-lv2 + .lead {
        text-align: center;
        margin-top: 64px; } }

/*doc
---
title: lead-no-color
name: lead-no-color
category: basics
---

色なしのリード文です。

*/
.lead-no-color {
  font-size: 11px;
  line-height: 2;
  margin: 24px 0; }
  .lead-no-color strong {
    font-weight: normal;
    color: #ff5252;
    border-bottom: 1px solid currentColor; }
  .section-inner .lead-no-color:first-child {
    margin-top: 0; }
  @media screen and (min-width: 768px) {
    .lead-no-color {
      font-size: 14px;
      margin: 57px 0;
      text-align: center; } }

/*doc
---
title: header
name: header
category: basics
---

ヘッダです。

*/
@media screen and (max-width: 767px) {
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #1c498c; }
    .header .header__logo {
      display: none;
      font-size: 28px;
      line-height: 1;
      margin: 0; }
      .header .header__logo a {
        display: block;
        padding: 10px 0; }
      .header .header__logo .icon {
        fill: #fff;
        vertical-align: top; }
    .header .header__user {
      font-size: 20px;
      line-height: 1;
      margin: 0; }
      .header .header__user a {
        display: block;
        color: #FFFFFF;
        padding: 14px 0; }
    .header .header__btn-SP {
      position: absolute;
      right: 0;
      top: 0; }
      .header .header__btn-SP a {
        display: block;
        width: 48px;
        height: 48px;
        background-color: #1f75cc;
        transition: background-color 150ms ease; }
      .header .header__btn-SP span {
        position: absolute;
        display: block;
        line-height: 1;
        border-top: 2px #ffffff solid;
        width: 16px;
        left: 16px;
        transition: transform 150ms ease; }
        .header .header__btn-SP span:nth-child(1) {
          top: 16px; }
        .header .header__btn-SP span:nth-child(2) {
          top: 23px; }
        .header .header__btn-SP span:nth-child(3) {
          top: 30px; }
    .header .header__nav {
      display: none; } }

@media screen and (min-width: 768px) {
  .header {
    background-color: #ffffff;
    border-top: 8px solid #1c498c; }
    .header .header__logo {
      font-size: 66px;
      line-height: 1;
      margin: 2px 0; }
      .header .header__logo .icon {
        fill: #1c498c;
        vertical-align: top; }
    .header .header__user {
      font-size: 28px;
      color: #1c498c;
      line-height: 1;
      margin: 20px 0; }
    .header .header__nav {
      text-align: right; }
    .header .header__btn-SP {
      display: none; } }

@media screen and (max-width: 767px) {
  .nav-open .header .header__btn-SP a {
    background-color: #00b2b2; }
  .nav-open .header .header__btn-SP span:nth-child(1) {
    transform: rotateZ(45deg) translate(4px, -1px);
    transform-origin: left top; }
  .nav-open .header .header__btn-SP span:nth-child(2) {
    transform: scale(0);
    transform-origin: center; }
  .nav-open .header .header__btn-SP span:nth-child(3) {
    transform: rotateZ(-45deg) translate(3px, 2px);
    transform-origin: left bottom; } }

/*doc
---
title: nav
name: nav
category: basics
---

ナビゲーションのアクティブ状態はナビゲーションのli要素にis-activクラスを付加することで実装しています。

*/
.nav .is-active .nav__text--en,
.nav .is-active .nav__text--ja {
  color: #ff5252 !important; }

.nav .is-active.nav__item--contact .nav__link-inner {
  background-color: #ff5252; }

.nav__2nd-item.is-active a, .nav__2nd-item.is-active b {
  color: #ff5252 !important; }

.footer__nav .nav .is-active.nav__item--contact .icon {
  fill: #ffffff; }

@media screen and (min-width: 768px) {
  .nav {
    font-size: 0; }
  .nav__item {
    display: inline-block;
    vertical-align: bottom; }
  .nav__link {
    display: inline-block;
    font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
    text-align: center;
    margin: 0 40px;
    padding: 16px 0; }
  .nav__text--en {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    color: #1c498c; }
  .nav__text--ja {
    font-size: 12px;
    line-height: 1;
    font-weight: 500;
    display: block;
    color: #00b2b2;
    margin-top: 10px; }
  .is-active .nav__text--ja {
    position: relative; }
    .is-active .nav__text--ja:after {
      content: "";
      position: absolute;
      width: 100%;
      bottom: -10px;
      display: block;
      border-bottom: 1px solid #ff5252; }
  .nav__item--contact {
    font-size: 18px; }
    .nav__item--contact .nav__link {
      display: inline-block;
      padding: 32px 0;
      transition-property: opacity, transform; }
      .nav__item--contact .nav__link:hover {
        transform: scale(1.2); }
    .nav__item--contact .nav__link-inner {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      padding: 19px 0;
      display: inline-block;
      box-sizing: border-box;
      background-color: #1c498c;
      line-height: 1;
      vertical-align: 10px; }
    .nav__item--contact .icon {
      fill: #fff; }
  .header__nav .nav__text--en {
    color: #1c498c; } }

.img-link {
  margin: 0;
  max-width: 100%;
  height: auto;
  vertical-align: middle; }

.a-link {
  color: #1C498C;
  text-decoration: underline;
  transition: all 150ms ease; }
  a:active, a:hover {
    opacity: 0.85; }

/*doc
---
title: header nav
name: header nav
category: basics
---

ヘッダナビゲーションのスタイル。

*/
@media screen and (max-width: 767px) {
  .header .nav {
    position: fixed;
    top: 48px;
    left: 0;
    border-top: 1px solid rgba(70, 167, 212, 0.25);
    background-color: #1c498c;
    width: 100%;
    height: calc(100% - 48px);
    overflow: scroll;
    box-sizing: border-box;
    padding: 0 48px 48px;
    letter-spacing: 0; }
  .header .nav__item {
    border-bottom: 1px solid rgba(70, 167, 212, 0.25); }
    .header .nav__item:last-child {
      border-bottom: none; }
  .header .nav__link {
    color: #ffffff;
    display: block;
    font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
    padding: 14px 2px 15px; }
  .header .nav__text--en {
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    color: #fff; }
  .header .nav__text--ja {
    font-size: 9px;
    line-height: 1;
    font-weight: 500;
    display: block;
    color: #00b2b2;
    margin-top: 10px; }
  .header .nav__item--contact {
    font-size: 13px;
    text-align: center;
    padding-top: 30px; }
    .header .nav__item--contact .nav__link {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      padding: 14px 0;
      display: inline-block;
      box-sizing: border-box;
      background-color: #fff;
      line-height: 1; }
    .header .nav__item--contact .icon {
      fill: #1c498c; }
  .header .nav__2nd {
    border-top: 1px solid rgba(70, 167, 212, 0.25);
    padding-left: 30px;
    font-weight: 500; }
    .header .nav__2nd .nav__2nd-item {
      border-bottom: 1px solid rgba(70, 167, 212, 0.25); }
      .header .nav__2nd .nav__2nd-item:last-child {
        border-bottom: none; }
    .header .nav__2nd a {
      display: block;
      font-family: "Roboto", "Noto Sans Japanese", sans-serif;
      color: #ffffff;
      padding: 20px 0;
      font-size: 12px; }
    .header .nav__2nd b {
      color: #1f75cc; } }

@media screen and (min-width: 768px) {
  .header .nav__link {
    margin: 0 20px;
    position: relative; }
  .header .nav__item--contact .nav__link {
    margin-right: 0; }
  .header .nav__item.is-active .nav__link:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 12px solid #f7f7f5;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent; } }

@media screen and (min-width: 960px) {
  .header .nav__link {
    margin: 0 40px; } }

/*doc
---
title: nav-sub
name: nav-sub
category: basics
---

サブナビゲーションのスタイル。

*/
.nav-sub {
  background-color: #f7f7f5; }

.nav-sub__list {
  margin-left: 24px;
  margin-right: 24px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }
  @media screen and (min-width: 960px) {
    .nav-sub__list {
      margin-left: 48px;
      margin-right: 48px; } }

.nav-sub__item {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700; }
  .nav-sub__item a {
    display: block;
    text-align: center;
    padding: 12px 0; }
    .nav-sub__item a span {
      display: block; }
  .nav-sub__item.is-active a {
    color: #ff5252; }

@media screen and (min-width: 1200px) {
  .nav-sub__item a span {
    display: inline; } }

/*doc
---
title: wrapper
name: wrapper
category: basics
---

ページ全体です。

*/
#wrapper {
  max-width: 1680px;
  margin: 0 auto;
  background-color: #f7f7f5;
  padding-bottom: 70px;
  position: relative; }
  @media screen and (min-width: 768px) {
    #wrapper {
      padding-bottom: 95px; } }

#wrapper_white {
  max-width: 1680px;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative; }

/*doc
---
title: contents
name: contents
category: basics
---

コンテンツ領域です。

*/
.contents {
  padding-top: 16px;
  background-color: #ffffff;
  position: relative; }
  .contents.is-top {
    padding-top: 16px; }
  .contents.is-bg-gray {
    background-color: #f7f7f5; }
  @media screen and (min-width: 768px) {
    .contents {
      padding-top: 16px; }
      .contents.is-top {
        padding-top: 0; }
      .contents.has-frame-no-nav-sub {
        margin-top: 24px; } }
  @media screen and (min-width: 960px) {
    .contents.has-frame::before, .contents.has-frame::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 23px;
      background-color: #f7f7f5; }
    .contents.has-frame::before {
      left: 0; }
    .contents.has-frame::after {
      right: 0; }
    .contents.has-frame-no-nav-sub::before, .contents.has-frame-no-nav-sub::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 23px;
      background-color: #f7f7f5; }
    .contents.has-frame-no-nav-sub::before {
      left: 0; }
    .contents.has-frame-no-nav-sub::after {
      right: 0; } }

/*doc
---
title: contents
name: contents
category: basics
---

コンテンツ領域です。

*/
.contents-nopad {
  padding-top: 0px;
  background-color: #ffffff;
  position: relative; }
  .contents-nopad.is-top {
    padding-top: 48px; }
  .contents-nopad.is-bg-gray {
    background-color: #f7f7f5; }
  @media screen and (min-width: 768px) {
    .contents-nopad {
      padding-top: 0px; }
      .contents-nopad.is-top {
        padding-top: 0; }
      .contents-nopad.has-frame-no-nav-sub {
        margin-top: 24px; } }
  @media screen and (min-width: 960px) {
    .contents-nopad.has-frame::before, .contents-nopad.has-frame::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 23px;
      background-color: #f7f7f5; }
    .contents-nopad.has-frame::before {
      left: 0; }
    .contents-nopad.has-frame::after {
      right: 0; }
    .contents-nopad.has-frame-no-nav-sub::before, .contents-nopad.has-frame-no-nav-sub::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 23px;
      background-color: #f7f7f5; }
    .contents-nopad.has-frame-no-nav-sub::before {
      left: 0; }
    .contents-nopad.has-frame-no-nav-sub::after {
      right: 0; } }

/*doc
---
title: footer
name: footer
category: basics
---

フッタです。

*/
.footer {
  padding-top: 140px;
  background: url(/common/img/bg_footer.png) repeat-x center 0;
  background-size: auto 360px;
  position: relative; }
  .footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    background-color: #f7f7f5;
    width: 100%;
    height: 100px;
    z-index: -1; }
  @media screen and (min-width: 768px) {
    .footer::before {
      height: 190px; } }
  @media screen and (min-width: 1680px) {
    .footer::before {
      left: 50%;
      margin-left: -840px;
      max-width: 1680px; } }

.footer__inner {
  background-color: #1b5468;
  padding: 0 0 24px; }

.footer__copyright {
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin: 0;
  line-height: 1; }
  .footer__copyright small {
    font-size: 8px; }

@media screen and (min-width: 768px) {
  .footer {
    padding-top: 190px;
    background-position: center 0;
    background-size: 1272px auto; }
  .footer__inner {
    padding: 7px 0 64px;
    background-color: transparent; }
  .footer__copyright small {
    font-size: 10px; }
  .footer__logo {
    text-align: center;
    font-size: 136px;
    line-height: 1; }
    .footer__logo .icon {
      fill: #fff; }
  .footer__nav {
    width: 500px;
    margin: 0 auto;
    text-align: center; }
    .footer__nav .nav__text--en {
      color: #fff; }
    .footer__nav .nav__item--contact .nav__link-inner {
      background-color: #ffffff; }
    .footer__nav .nav__item--contact .icon {
      fill: #1c498c; }
  .footer__copyright {
    margin-top: 64px; } }

/*doc
---
title: btn-pagetop
name: btn-pagetop
category: basics
---

ページの先頭へ戻るボタンです。

*/
.btn-pagetop {
  display: none;
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 30px;
  height: 30px;
  z-index: 1;
  transition: bottom ease 0.3s; }
  .btn-pagetop.postion_fixed {
    position: fixed;
    bottom: 20px; }
  .btn-pagetop a {
    display: block;
    width: 30px;
    transition-property: opacity, transform; }
    .btn-pagetop a:hover {
      transform: scale(1.3); }
  @media screen and (min-width: 768px) {
    .btn-pagetop {
      width: 40px;
      height: 40px;
      right: 55px;
      bottom: 0; }
      .btn-pagetop.postion_fixed {
        bottom: 60px; }
      .btn-pagetop a {
        width: 40px; } }

/*doc
---
title: main-visual
name: main-visual
category: basics
---

メインビジュアルです。

*/
.main-visual-1st {
  background: url(/img/img_index_mv.jpg) no-repeat center top;
  background-size: cover;
  padding: 45px 0 85px;
  text-align: center;
  position: relative;
  margin-bottom: 30px; }
  .main-visual-1st img {
    width: 80%; }
  @media screen and (min-width: 768px) {
    .main-visual-1st {
      padding: 16% 0 23.25%;
      margin-bottom: 64px; }
      .main-visual-1st img {
        width: 45%; } }

.main-visual-1st__credit {
  position: absolute;
  color: #ffffff;
  right: 20px;
  bottom: 40px;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.1em; }
  @media screen and (min-width: 768px) {
    .main-visual-1st__credit {
      right: 45px;
      bottom: 11%;
      font-size: 10px; } }

.main-visual-3rd {
  text-align: center; }
  @media screen and (min-width: 768px) {
    .main-visual-3rd img {
      max-width: 560px; } }

/*doc
---
title: img-wrapper
name: img-wrapper
category: basics
---

画像のコンテナです。

*/
.img-wrapper {
  margin: 30px 0 0; }
  .section-inner .img-wrapper:first-child {
    margin-top: 0; }
  @media screen and (min-width: 768px) {
    .img-wrapper {
      margin-top: 64px;
      width: 568px;
      margin-left: auto;
      margin-right: auto; } }

.img-wrapper--3col {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }
  .img-wrapper--3col .img-wrapper__column {
    -webkit-flex-basis: 28.57%;
    -moz-flex-basis: 28.57%;
    -ms-flex-preferred-size: 28.57%;
    flex-basis: 28.57%; }
  @media screen and (min-width: 768px) {
    .img-wrapper--3col {
      max-width: 656px;
      margin-left: auto;
      margin-right: auto; }
      .img-wrapper--3col .img-wrapper__column {
        -webkit-flex-basis: 24.39%;
        -moz-flex-basis: 24.39%;
        -ms-flex-preferred-size: 24.39%;
        flex-basis: 24.39%; } }

.img-wrapper__caption {
  font-size: 10px;
  line-height: 16px;
  margin: 6px 0 0; }
  @media screen and (min-width: 768px) {
    .img-wrapper__caption {
      font-size: 14px;
      line-height: 22px;
      margin: 20px -12px 0; } }

/*doc
---
title: photo-wrapper
name: photo-wrapper
category: basics
---

写真のコンテナです。

*/
.photo-wrapper {
  margin: 24px 0; }
  .photo-wrapper img {
    width: 100%; }
  @media screen and (min-width: 768px) {
    .photo-wrapper {
      margin: 32px 0; } }

/*doc
---
title: step
name: step
category: basics
---

サービスの流れです。

*/
.step__item {
  margin: 0 0 18px; }
  .step__item:last-child {
    margin-bottom: 0; }
  @media screen and (min-width: 768px) {
    .step__item {
      margin-bottom: 24px; } }

.step__header {
  border-bottom: 3px solid #e5e5e3;
  padding-bottom: 12px;
  margin: 0 0 17px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }
  @media screen and (min-width: 768px) {
    .step__header {
      border-bottom-width: 4px;
      padding-bottom: 16px;
      margin-bottom: 23px; } }

.step__header__blue {
  border-bottom: 3px solid #1893F3;
  padding-bottom: 12px;
  margin: 0 0 17px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }
  @media screen and (min-width: 768px) {
    .step__header {
      border-bottom-width: 4px;
      padding-bottom: 16px;
      margin-bottom: 23px; } }

.step__header__noline {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between; }

.step__num-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  -webkit-flex-basis: 18%;
  -moz-flex-basis: 18%;
  -ms-flex-preferred-size: 18%;
  flex-basis: 18%;
  font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .step__num-wrapper {
      -webkit-flex-basis: 202px;
      -moz-flex-basis: 202px;
      -ms-flex-preferred-size: 202px;
      flex-basis: 202px; } }

.step__num-side {
  font-size: 16px;
  color: #00b2b2;
  margin-right: 15px; }
  @media screen and (min-width: 768px) {
    .step__num-side {
      font-size: 16px;
      margin-right: 18px; } }

.step__num {
  font-size: 24px;
  color: #1c498c; }
  @media screen and (min-width: 768px) {
    .step__num {
      font-size: 32px;
      font-weight: normal; } }

.step__num-week {
  font-size: 16px;
  color: #1c498c; }
  @media screen and (min-width: 768px) {
    .step__num-week {
      font-size: 16px; } }

.step__title-wrapper {
  -webkit-flex-basis: 95%;
  -moz-flex-basis: 95%;
  -ms-flex-preferred-size: 95%;
  flex-basis: 95%; }
/*  @media screen and (min-width: 768px) {
    .step__title-wrapper {
      -webkit-flex-basis: calc(100% - 202px);
      -moz-flex-basis: calc(100% - 202px);
      -ms-flex-preferred-size: calc(100% - 202px);
      flex-basis: calc(100% - 202px); } }*/
  @media screen and (min-width: 1150px) {
    .step__item.has-button .step__title-wrapper {
      -webkit-flex-basis: calc(100% - 202px - 200px);
      -moz-flex-basis: calc(100% - 202px - 200px);
      -ms-flex-preferred-size: calc(100% - 202px - 200px);
      flex-basis: calc(100% - 202px - 200px); } }

.step__title {
  font-size: 15px;
  line-height: 23px;
  font-weight: bold;
  color: #ff5252; }
  @media screen and (min-width: 768px) {
    .step__title {
      font-size: 20px;
      line-height: 35px; } }

.step__title-small {
  font-size: 11px; }
  @media screen and (min-width: 768px) {
    .step__title-small {
      font-size: 14px; } }

.step__btn {
  -webkit-flex-basis: 150px;
  -moz-flex-basis: 150px;
  -ms-flex-preferred-size: 150px;
  flex-basis: 150px;
  margin-top: 8px;
  margin-left: 25%; }
  @media screen and (min-width: 768px) {
    .step__btn {
      -webkit-flex-basis: 200px;
      -moz-flex-basis: 200px;
      -ms-flex-preferred-size: 200px;
      flex-basis: 200px;
      margin-left: 112px; } }
  @media screen and (min-width: 1150px) {
    .step__btn {
      -webkit-flex-basis: 200px;
      -moz-flex-basis: 200px;
      -ms-flex-preferred-size: 200px;
      flex-basis: 200px;
      margin-top: 0;
      margin-left: 0;
      text-align: right; } }

.step__content {
  font-size: 14px;
  line-height: 28px;
  color: #1f75cc; }
  @media screen and (min-width: 768px) {
    .step__content {
      font-size: 18px;
      line-height: 36px;
      margin-left: 112px; } }

/*doc
---
title: contents__sub
name: contents__sub
category: basics
---

ページ下部のサブ・コンテンツです。

*/
.contents__sub {
  background-color: #f7f7f5;
  padding-top: 48px; }

/*doc
---
title: box-bordered
name: box-bordered
category: basics
---

罫線付きのボックスです。

*/
.box-bordered {
  border: 2px solid #1f75cc;
  margin-top: 24px; }
  @media screen and (min-width: 768px) {
    .box-bordered {
      margin-top: 32px; } }

.box-bordered__header {
  background-color: #1f75cc;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  padding: 10px 0;
  font-weight: 500; }
  @media screen and (min-width: 768px) {
    .box-bordered__header {
      font-size: 20px;
      line-height: 36px;
      padding: 6px 0; } }

.box-bordered__title {
  background-color: rgba(31, 117, 204, 0.1);
  color: #1f75cc;
  font-size: 11px;
  line-height: 1;
  padding: 7px 10px 6px;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .box-bordered__title {
      font-size: 14px;
      padding: 9px 22px 8px; } }

.box-bordered__content .list-disc {
  margin: 20px 16px;
  font-size: 14px;
  line-height: 24px; }
  .box-bordered__content .list-disc li {
    margin-top: 11px; }
  @media screen and (min-width: 768px) {
    .box-bordered__content .list-disc {
      margin: 25px 22px;
      font-size: 18px;
      line-height: 32px; }
      .box-bordered__content .list-disc li {
        margin-top: 12px; } }

.box-bordered__content .list-none {
  margin: 20px 16px;
  font-size: 14px;
  line-height: 24px; }
  .box-bordered__content .list-none li {
    margin-top: 11px; }
  @media screen and (min-width: 768px) {
    .box-bordered__content .list-none {
      margin: 25px 22px;
      font-size: 18px;
      line-height: 32px; }
      .box-bordered__content .list-none li {
        margin-top: 12px; } }

.box-bordered__content .list-none2 {
  margin: 20px 16px;
  font-size: 14px;
  line-height: 24px; }
  @media screen and (min-width: 768px) {
    .box-bordered__content .list-none2 {
      margin: 7px 6px;
      font-size: 16px;
      line-height: 1.666; } }

@media screen and (min-width: 768px) {
  .box-bordered__column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
  .box-bordered__column-item {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    box-sizing: border-box; }
    .box-bordered__column-item:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item10 {
    -webkit-flex-basis: 10%;
    -moz-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    box-sizing: border-box; }
    .box-bordered__column-item10:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item10:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item20 {
    -webkit-flex-basis: 20%;
    -moz-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    box-sizing: border-box; }
    .box-bordered__column-item20:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item20:nth-child(2) {
      border-left: 1px solid #1f75cc; }

  .box-bordered__column-item30 {
    -webkit-flex-basis: 30%;
    -moz-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    box-sizing: border-box; }
    .box-bordered__column-item30:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item30:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item40 {
    -webkit-flex-basis: 40%;
    -moz-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
    box-sizing: border-box; }
    .box-bordered__column-item40:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item40:nth-child(2) {
      border-left: 1px solid #1f75cc; }

  .box-bordered__column-item50 {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    box-sizing: border-box; }
    .box-bordered__column-item50:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item50:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item60 {
    -webkit-flex-basis: 60%;
    -moz-flex-basis: 60%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
    box-sizing: border-box; }
    .box-bordered__column-item60:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item60:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item70 {
    -webkit-flex-basis: 70%;
    -moz-flex-basis: 70%;
    -ms-flex-preferred-size: 70%;
    flex-basis: 70%;
    box-sizing: border-box; }
    .box-bordered__column-item70:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item70:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item80 {
    -webkit-flex-basis: 80%;
    -moz-flex-basis: 80%;
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
    box-sizing: border-box; }
    .box-bordered__column-item80:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item80:nth-child(2) {
      border-left: 1px solid #1f75cc; }
  .box-bordered__column-item90 {
    -webkit-flex-basis: 90%;
    -moz-flex-basis: 90%;
    -ms-flex-preferred-size: 90%;
    flex-basis: 90%;
    box-sizing: border-box; }
    .box-bordered__column-item90:nth-child(1) {
      border-right: 1px solid #1f75cc; }
    .box-bordered__column-item90:nth-child(2) {
      border-left: 1px solid #1f75cc; }


  .box-bordered__column__borderd {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
  .box-bordered__column__borderd-item {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item5 {
    -webkit-flex-basis: 5%;
    -moz-flex-basis: 5%;
    -ms-flex-preferred-size: 5%;
    flex-basis: 5%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item10 {
    -webkit-flex-basis: 10%;
    -moz-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item15 {
    -webkit-flex-basis: 15%;
    -moz-flex-basis: 15%;
    -ms-flex-preferred-size: 15%;
    flex-basis: 15%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item20 {
    -webkit-flex-basis: 20%;
    -moz-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item25 {
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item30 {
    -webkit-flex-basis: 30%;
    -moz-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item40 {
    -webkit-flex-basis: 40%;
    -moz-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item50 {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item55 {
    -webkit-flex-basis: 55%;
    -moz-flex-basis: 55%;
    -ms-flex-preferred-size: 55%;
    flex-basis: 55%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item60 {
    -webkit-flex-basis: 60%;
    -moz-flex-basis: 60%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item70 {
    -webkit-flex-basis: 70%;
    -moz-flex-basis: 70%;
    -ms-flex-preferred-size: 70%;
    flex-basis: 70%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item80 {
    -webkit-flex-basis: 80%;
    -moz-flex-basis: 80%;
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item90 {
    -webkit-flex-basis: 90%;
    -moz-flex-basis: 90%;
    -ms-flex-preferred-size: 90%;
    flex-basis: 90%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }
  .box-bordered__column__borderd-item100 {
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    border: 1px solid #1f75cc;
    box-sizing: border-box; }

  .box-nobordered__column-item5 {
    -webkit-flex-basis: 5%;
    -moz-flex-basis: 5%;
    -ms-flex-preferred-size: 5%;
    flex-basis: 5%;
    box-sizing: border-box;}
  .box-nobordered__column-item10 {
    -webkit-flex-basis: 10%;
    -moz-flex-basis: 10%;
    -ms-flex-preferred-size: 10%;
    flex-basis: 10%;
    box-sizing: border-box; }
  .box-nobordered__column-item15 {
    -webkit-flex-basis: 15%;
    -moz-flex-basis: 15%;
    -ms-flex-preferred-size: 15%;
    flex-basis: 15%;
    box-sizing: border-box; }
  .box-nobordered__column-item20 {
    -webkit-flex-basis: 20%;
    -moz-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    box-sizing: border-box; }
  .box-nobordered__column-item25 {
    -webkit-flex-basis: 25%;
    -moz-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    box-sizing: border-box; }
  .box-nobordered__column-item30 {
    -webkit-flex-basis: 30%;
    -moz-flex-basis: 30%;
    -ms-flex-preferred-size: 30%;
    flex-basis: 30%;
    box-sizing: border-box; }
  .box-nobordered__column-item35 {
    -webkit-flex-basis: 35%;
    -moz-flex-basis: 35%;
    -ms-flex-preferred-size: 35%;
    flex-basis: 35%;
    box-sizing: border-box; }
  .box-nobordered__column-item40 {
    -webkit-flex-basis: 40%;
    -moz-flex-basis: 40%;
    -ms-flex-preferred-size: 40%;
    flex-basis: 40%;
    box-sizing: border-box; }
  .box-nobordered__column-item50 {
    -webkit-flex-basis: 50%;
    -moz-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    box-sizing: border-box; }
  .box-nobordered__column-item60 {
    -webkit-flex-basis: 60%;
    -moz-flex-basis: 60%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 60%;
    box-sizing: border-box; }
  .box-nobordered__column-item70 {
    -webkit-flex-basis: 70%;
    -moz-flex-basis: 70%;
    -ms-flex-preferred-size: 70%;
    flex-basis: 70%;
    box-sizing: border-box; }
  .box-nobordered__column-item80 {
    -webkit-flex-basis: 80%;
    -moz-flex-basis: 80%;
    -ms-flex-preferred-size: 80%;
    flex-basis: 80%;
    box-sizing: border-box; }
  .box-nobordered__column-item90 {
    -webkit-flex-basis: 90%;
    -moz-flex-basis: 90%;
    -ms-flex-preferred-size: 90%;
    flex-basis: 90%;
    box-sizing: border-box; }
  .box-nobordered__column-item100 {
    -webkit-flex-basis: 100%;
    -moz-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    box-sizing: border-box; }

       }
/*doc
---
title: note
name: note
category: basics
---

小さい文字で書かれているような内容です。

*/
.note {
  font-size: 11px;
  line-height: 22px; }
  @media screen and (min-width: 768px) {
    .note {
      font-size: 14px;
      line-height: 28px; } }

/*doc
---
title: footnote
name: footnote
category: basics
---

脚注です。

*/
.footnote {
  margin: 24px 0 0;
  font-size: 9px;
  line-height: 14px;
  color: #999999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  align-items: flex-start; }
  @media screen and (min-width: 768px) {
    .footnote {
      font-size: 12px;
      line-height: 20px;
      margin: 32px 0 0; } }

.footnote__header {
  -webkit-flex-basis: 32px;
  -moz-flex-basis: 32px;
  -ms-flex-preferred-size: 32px;
  flex-basis: 32px;
  margin: 0;
  font-weight: normal; }

.footnote__content {
  -webkit-flex-basis: calc(100% - 32px);
  -moz-flex-basis: calc(100% - 32px);
  -ms-flex-preferred-size: calc(100% - 32px);
  flex-basis: calc(100% - 32px); }

/*doc
---
title: section
name: section
category: basics
---

通常コンテンツのセクションです。

*/
.section {
  padding-bottom: 12px; }
  @media screen and (min-width: 768px) {
    .section {
      padding-bottom: 16px; }
      .section.section--margin-x2 {
        margin: 128px 0; } }

/*doc
---
title: displayChanger
name: displayChanger
category: helper
---

SP版、TB版、PC版で要素の表示を変更します<br>

SP版…幅600px未満
TB版…幅600-959px
PC版…幅960px以上

* .spOnly-inline　…　SP版のみ表示。インラインで表示。
* .spOnly-inlineblock　…　SP版のみ表示。インラインブロックで表示。
* .spOnly-block　…　SP版のみ表示。ブロックで表示。
* .pcTbOnly-inline　…　TB・PC版のみ表示。インラインで表示。
* .pcTbOnly-inlineblock　…　TB・PC版のみ表示。インラインブロックで表示。
* .pcTbOnly-block　…　TB・PC版のみ表示。ブロックで表示。
* .pcOnly-inline　…　PC版のみ表示。インラインで表示。
* .pcOnly-inlineblock　…　PC版のみ表示。インラインブロックで表示。
* .pcOnly-block　…　PC版のみ表示。ブロックで表示。
* .spBlock-pcInline　…　SP版ブロック、PC版インラインで表示。
* .spInline-pcBlock　…　SP版インライン、PC版ブロックで表示。
* .displayNone　…　表示しない
* .displayInlineBLock

*/
.spOnly-inline {
  display: inline; }

.spOnly-inlineblock {
  display: inline-block; }

.spOnly-block {
  display: block; }

.pcTbOnly-inline {
  display: none; }

.pcTbOnly-inlineblock {
  display: none; }

.pcTbOnly-block {
  display: none; }

.pcOnly-inline {
  display: none; }

.pcOnly-inlineblock {
  display: none; }

.pcOnly-block {
  display: none; }

.spBlock-pcInline {
  display: block; }

.spInline-pcBlock {
  display: inline; }

.spBlock-pcTbInline {
  display: block; }

.spInline-pcTbBlock {
  display: inline; }

.displayNone {
  display: none; }

.displayInlineBLock {
  display: inline-block; }

@media print, screen and (min-width: 768px) {
  .spOnly-inline {
    display: none; }
  .spOnly-inlineblock {
    display: none; }
  .spOnly-block {
    display: none; }
  .pcTbOnly-inline {
    display: inline; }
  .pcTbOnly-inlineblock {
    display: inline-block; }
  .pcTbOnly-block {
    display: block; }
  .spBlock-pcTbInline {
    display: inline; }
  .spInline-pcTbBlock {
    display: block; } }

@media print, screen and (min-width: 960px) {
  .pcOnly-inline {
    display: inline; }
  .pcOnly-inlineblock {
    display: inline-block; }
  .pcOnly-block {
    display: block; }
  .spBlock-pcInline {
    display: inline; }
  .spInline-pcBlock {
    display: block; } }

/*doc
---
title: clearfix
name: clearfix
category: helper
---

floatによる回りこみ解除クラス

*/
.clearfix::after {
  clear: both;
  content: "";
  display: block; }

/*doc
---
title: textAlign
name: textAlign
category: helper
---

テキストの水平揃えクラス

*/
.text-c {
  text-align: center; }

.text-l {
  text-align: left; }

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

@media print, screen and (min-width: 768px) {
  .pcTb-text-c {
    text-align: center; } }

/*doc
---
title: textColor
name: textColor
category: helper
---

テキストの色変更クラス

*/
.color-blue {
  color: #1c498c; }

.color-red {
  color: #ff5252; }

.color-skyblue {
  color: #1f75cc; }

/* ============================== */
/* individual */
/* ============================== */
/*doc
---
title: top
name: top
category: top
---

トップページにひもづけるスタイルです。

*/
/*doc
---
title: service-list
name: service-list
category: service
---

サービス案内にひもづけるスタイルです。

*/
.service-list.is-top {
  margin-bottom: 0;
  padding-bottom: 24px; }

@media screen and (max-width: 767px) {
  .service-list {
    margin-top: -48px;
    margin-bottom: -36px; } }

@media screen and (min-width: 768px) {
  .service-list {
    margin-top: -64px; }
    .service-list.is-top {
      padding-bottom: 64px; } }

.service-list__item {
  margin-top: 32px; }

.service-list__link {
  display: block;
  padding: 12px 27px 48px; }
  @media screen and (min-width: 768px) {
    .service-list__link {
      padding: 40px 30px; }
      .service-list__link:hover {
        background-color: rgba(31, 117, 204, 0.08);
        border-radius: 12px;
        opacity: 1; }
        .service-list__link:hover .service-list__num {
          background-color: #ecf4fa; }
        .service-list__link:hover .btn {
          opacity: 1;
          background-color: #ff5252; } }

.service-list__img {
  text-align: center; }
  .service-list__img img {
    width: 53.57%; }
    @media screen and (min-width: 768px) {
      .service-list__img img {
        width: 73.82%; } }

.service-list__heading {
  margin-top: 30px;
  padding: 24px 0;
  border-top: 1px dotted #46a7d4;
  border-bottom: 1px dotted #46a7d4;
  position: relative; }
  @media screen and (min-width: 768px) {
    .service-list__heading {
      margin-top: 56px;
      padding: 32px 0;
      border-top-width: 2px;
      border-bottom-width: 2px; } }

.service-list__num {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  font-family: "Montserrat", "Noto Sans Japanese", sans-serif;
  position: absolute;
  padding: 0 7px;
  background-color: #ffffff;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1c498c;
  transition: background-color 150ms ease; }
  @media screen and (min-width: 768px) {
    .service-list__num {
      font-size: 24px;
      padding-left: 10px;
      padding-right: 10px; } }

.service-list__title {
  display: block;
  font-size: 15px;
  color: #1f75cc;
  font-weight: 700;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .service-list__title {
      font-size: 20px; } }

.service-list__description {
  margin-top: 19px;
  text-align: center;
  font-size: 14px;
  line-height: 25px; }
  @media screen and (min-width: 768px) {
    .service-list__description {
      margin-top: 25px;
      font-size: 18px;
      line-height: 32px; } }

.service-list__btn {
  text-align: center;
  margin-top: 25px; }
  @media screen and (min-width: 768px) {
    .service-list__btn {
      margin-top: 33px; } }

/*doc
---
title: signature
name: signature
category: about
---

署名です。

*/
.signature {
  margin: 24px 0; }
  @media screen and (min-width: 768px) {
    .signature {
      margin: 32px 0; } }

.signature__text {
  font-size: 9px;
  line-height: 1;
  color: #1c498c;
  font-weight: 700;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .signature__text {
      font-size: 12px;
      width: 215px;
      margin-left: auto;
      text-align: left; } }

.signature__img {
  margin-top: 12px;
  text-align: center; }
  .signature__img img {
    width: 55.71%; }
  @media screen and (min-width: 768px) {
    .signature__img {
      margin-top: 16px;
      text-align: right; }
      .signature__img img {
        width: 215px; } }

/*doc
---
title: vows
name: vows
category: about
---

創業の想いです。

*/
.vows {
  margin: 24px auto 0;
  border: 1px solid #e5e5e3;
  border-radius: 5px;
  position: relative;
  max-width: 600px;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .vows {
      margin-top: 64px; } }
  .vows .vows__header {
    text-align: center;
    font-weight: 500;
    color: #1f75cc;
    font-size: 14px;
    margin: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    transform: translateY(-50%); }
    @media screen and (min-width: 768px) {
      .vows .vows__header {
        font-size: 18px; } }
  .vows .vows__header-inner {
    padding: 0 13px;
    background-color: #ffffff; }
    @media screen and (min-width: 768px) {
      .vows .vows__header-inner {
        padding: 0 24px; } }
  .vows .vows__content {
    font-size: 11px;
    line-height: 2;
    padding: 20px 16px;
    color: #595854; }
    .vows .vows__content p {
      margin: 10px 0 0; }
    @media screen and (min-width: 768px) {
      .vows .vows__content {
        font-size: 14px;
        padding: 25px 24px; }
        .vows .vows__content p {
          margin-top: 14px; } }

/*doc
---
title: map
name: map
category: about
---

地図です。

*/
.map_outer {
  margin-top: 24px; }
  @media screen and (min-width: 768px) {
    .map_outer {
      margin-top: 32px; } }

#map {
  width: 100%;
  height: 280px; }
  @media screen and (min-width: 768px) {
    #map {
      height: 358px; } }

/*doc
---
title: txt-address
name: txt-address
category: about
---

住所表示です。

*/
.txt-address {
  margin: 17px 0 0;
  font-size: 14px;
  line-height: 28px; }
  @media screen and (min-width: 768px) {
    .txt-address {
      font-size: 18px;
      line-height: 36px;
      margin-top: 32px; } }

/*doc
---
title: list-with-heading--access
name: list-with-heading--access
category: about
---

交通アクセスの経路です。

*/
.list-with-heading--access {
  display: block; }
  .list-with-heading--access .list-with-heading__header {
    margin-top: 48px;
    padding: 0;
    background-color: transparent;
    color: #1c498c;
    border-bottom: 1px solid #e5e5e3;
    padding-bottom: 4px; }
    @media screen and (min-width: 768px) {
      .list-with-heading--access .list-with-heading__header {
        margin-top: 64px;
        padding-bottom: 6px; } }
  @media screen and (min-width: 768px) {
    .list-with-heading--access .list-with-heading__content .list-disc {
      margin-left: 0; } }

/*doc
---
title: contact-lead
name: contact-lead
category: contact
---

お問い合わせのリード部分です。

*/
.contact-lead .list-disc li {
  margin-bottom: 14px;
  line-height: 2; }
  .contact-lead .list-disc li strong {
    color: #ff5252;
    border-bottom: 1px solid #ff5252; }
  @media screen and (min-width: 768px) {
    .contact-lead .list-disc li {
      font-size: 18px;
      margin-bottom: 18px; } }

.contact-form {
  width: 100%;
  height: 1750px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch; }
  @media screen and (min-width: 768px) {
    .contact-form {
      height: 1400px; } }

.section--contact-form + hr {
  margin-top: 0; }

/* ============================== */
/* print */
/* ============================== */
@media print {
  body {
    width: 960px;
    margin: 0 auto; }
  .nav,
  .navDirectory,
  .pagination,
  .paginationDetail,
  .pagetop {
    display: none; } }
    
/* //slider -------------------------------------------- */
.swiper-container {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.swiper-slide a {
	cursor: pointer;
}


.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: 50%;
	/*width: 20px;
	height: 80px;
	margin-top: -40px;*/
	width: 40px;
	height: 40px;
	margin-top: -20px;
	z-index: 10;
	cursor: pointer;
	/*background-size: 20px 80px;*/
	background-size: 40px 40px;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
	transition: all 300ms 0s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
	  opacity: 0.5;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
	background-image: url(../images/mm_tb/slide_next.svg);
	/*right: 20px;*/
	right: 10px;
}  
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
	background-image: url(../images/mm_tb/slide_prev.svg);
	/*left: 20px;*/
	left: 10px;
}

.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 100%;
	background: #fff;
	opacity: 1;
}
.swiper-pagination-bullet-active {
	opacity: 1;
	width: 10px;
	height: 10px;
	background: rgba(255,255,255,0);
	border: 1px #fff solid;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 7px;
}

@media (max-width:768px) {

}
/* //slider -------------------------------------------- */