@charset "utf-8";

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
}

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

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-tap-highlight-color: transparent; /* 3*/
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

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

body {
  margin: 0;
}

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

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

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

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

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

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

hr {
  border-top-width: 1px;
  box-sizing: content-box; /* 1 */
  clear: both;
  color: inherit;
  height: 0; /* 1 */
  margin: 0;
  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: inherit; /* 2 */
}

address {
  font-style: inherit;
}

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

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

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

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

abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

* {
  letter-spacing: 0.05rem;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

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

/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */

button,
input,
optgroup,
select,
textarea {
  background: transparent;
  border-radius: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  vertical-align: middle;
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */

option {
  padding: 0;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  min-width: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

textarea {
  overflow: auto;
}

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

/**
 * Correct the outline style in Safari.
 */

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

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

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

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

/**
 * Fix appearance for Firefox
 */
[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-collapse: collapse;
  border-color: inherit; /* 1 */
}

caption {
  text-align: left;
}

td,
th {
  padding: 0;
  vertical-align: top;
}

th {
  font-weight: bold;
  text-align: left;
}

input,
select {
  vertical-align: middle;
}

ul li {
  list-style-type: none;
}

/*IE対応*/
#contactForm select::-ms-expand {
  display: none;
}

input[type="submit"],
input[type="button"] {
  -webkit-appearance: button;
  appearance: button;
  border: none;
  border-radius: 0;
  -webkit-box-sizing: content-box;
  box-sizing: border-box;
  cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*========================================================================*\

$common

\*========================================================================*/

html {
  font-size: 62.5%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "palt";

  /* font-family:"Noto Serif JP", "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif; */
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

.en {
  font-family: "Josefin Sans", sans-serif;
}

@media screen and (max-width: 767px) {
  body,
  html {
    min-width: 100% !important;
  }
  body {
    word-wrap: break-word;
  }
}

/*========================================================================*\

$テキスト系

\*========================================================================*/

#Co .err,
#Co .error,
#Co .mailerr,
#Co .mail_chkerr {
  color: #ff0000;
  font-size: 1.4rem;
}

#Co p:not(:last-child) {
  margin-bottom: 3rem;
}

strong {
  font-weight: 700;
}

sup,
sub {
  font-size: 1.1rem !important;
}

.nw {
  white-space: nowrap !important;
}

@media screen and (max-width: 767px) {
  #Co p:not(:last-child) {
    margin-bottom: 2rem;
  }

  #Co .err,
  #Co .error,
  #Co .mailerr,
  #Co .mail_chkerr {
    font-size: 1.2rem;
  }
}

/*========================================================================*\

$テーブル系

\*========================================================================*/

#Co table th,
#Co table td,
#Co .detailSection table th,
#Co .detailSection table td {
  background: #ffffff;
  font-size: 1.6rem;
  line-height: 1.6;
  margin: 0;
  padding: 2rem 0;
}

#Co table td ul {
  margin: 0;
}

#Co table td p,
#Co table td li {
  margin: 0 0 0.5rem 0;
}

#Co table td li:last-child {
  margin: 0;
}

#Co table th .ss,
#Co table td .ss {
  font-size: 1.2rem;
}

#Co table.tbl,
.lity-container .lity-content table.tbl,
#Co table.tblBorder,
#Co .detailSection table {
  margin: 0 0 5rem 0;
  padding: 0;
  width: 100%;
}

#Co table.tbl tr.price td,
#Co table.tblBorder tr.price td {
  text-align: right;
}

#Co table.tblBorder th,
#Co table.tblBorder td {
  border-bottom: solid 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  text-align: left;
  vertical-align: middle;
}

#Co table.tblBorder th {
  border-bottom: solid 1px #ff0000;
  padding-right: 2rem;
  text-align: left;
  width: 25%;
}

#Co table.tblBorder td {
  padding: 2rem 0 2rem 2rem;
}

#Co table.tblBorder.fix,
#Co table.tbl.fix {
  table-layout: fixed;
  width: 100%;
}

#Co table.tblBorder.fix th,
#Co table.tbl.fix th {
  width: auto;
}

#Co table.tbl.center th,
#Co table.tbl.center td {
  text-align: center !important;
}

#Co table.tbl.center th.no,
#Co table.tbl.center td.no {
  text-align: left !important;
}

#Co table.tbl th,
#Co table.tbl td,
.lity-container .lity-content table.tbl th,
.lity-container .lity-content table.tbl td,
#Co .detailSection table th,
#Co .detailSection table td {
  border: 1px solid #dfdfdf;
  padding: 1.5rem;
  text-align: left;
  vertical-align: middle;
}

#Co table.tbl.alternate,
#Co table.tbl.alternate tr,
#Co table.tbl.alternate th,
#Co table.tbl.alternate td {
  border: none;
}
#Co table.tbl.alternate th,
#Co table.tbl.alternate td {
  padding: 2rem 1.5rem;
}

#Co table.tbl.alternate th {
  background: transparent;
}

#Co table.tbl.alternate tr:nth-child(even) th,
#Co table.tbl.alternate tr:nth-child(even) td {
  background-color: #f5f8f8;
  border: none;
}

#Co table.tbl th,
.lity-container .lity-content table.tbl th,
#Co .detailSection table th {
  background: #f0f0f0;
  font-weight: bold;
  text-align: left;
  width: 30%;
}

#Co table.tbl th.second {
  background: #f4f4f4;
}

#Co table.tbl th.thaad {
  background: #fafafa;
}

#Co table.tbl th .ss,
#Co .detailSection table th .ss,
#Co table.tbl td .ss,
#Co .detailSection table td .ss {
  color: #666666;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  #Co table.tblBorder {
    margin: 0 0 2rem 0;
    padding: 0;
    width: 100%;
  }

  #Co table.tblBorder th,
  #Co table.tblBorder td {
    border-bottom: none;
    box-sizing: border-box;
    display: block;
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    padding: 1.5rem 0;
    text-align: left;
    vertical-align: middle;
    width: 100% !important;
  }

  #Co table.tblBorder tr:first-child th,
  #Co table.tblBorder tr:first-child td {
    border-top: none;
  }

  #Co table.tblBorder th {
    border-bottom: solid 1px #ff0000;
    color: #000000;
    font-size: 1.6rem;
    padding: 1.5rem 1.5rem 0.5rem 0;
    padding-right: 0;
    width: 100% !important;
  }

  #contactForm tr th .hissu {
    margin-right: 1rem;
  }

  #Co table.tbl,
  #Co .detailSection table {
    border-top: 1px solid #dfdfdf;
  }

  #Co table.tbl th,
  #Co table.tbl td,
  #Co .detailSection table th,
  #Co .detailSection table td {
    border-top: none;
    display: block;
    font-size: 1.4rem;
    width: 100%;
  }

  .sticky_table_x table {
    border-collapse: collapse !important;
    width: 800px !important;
  }

  #Co .sticky_table_y table th,
  #Co .sticky_table_y table td,
  #Co .sticky_table_x table th,
  #Co .sticky_table_x table td {
    display: table-cell;
    width: auto;
  }

  #Co .sticky_table_x table th {
    width: 150px;
  }
}

/*========================================================================*\

$リンク系

\*========================================================================*/

a {
  background: transparent;
  color: #28489c;
  font-size: 100%;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  vertical-align: baseline;
}

a:hover {
  color: #28489c;
  text-decoration: none;
  transition: all 0.3s;
}

a:link {
  transition: all 0.3s;
}

a.disabledLink {
  pointer-events: none;
}

a.blank[target="_blank"] {
  position: relative;
}

a.blank[target="_blank"]:after {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cdefs%3E%3Cstyle%3E.b%7Bfill%3Anone%3Bstroke%3A%23005acc%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20style%3D%22fill%3Anone%22%20d%3D%22M0%200h48v48H0z%22%2F%3E%3Cpath%20class%3D%22b%22%20d%3D%22M27%2012h9v9M32%2026v8H14V16h8M24%2024l11-11%22%2F%3E%3C%2Fsvg%3E");
  content: "";
  height: 24px;
  position: absolute;
  right: -26px;
  top: 0;
  width: 24px;
}

a[href$=".pdf"] {
  background: url(../images/ico_pdf.svg) no-repeat center right;
  background-size: 22px 23px;
  content: "";
  display: inline-block;
  margin: 0;
  padding: 0.2rem 2.7rem 0.2rem 0;
}

a[href$=".doc"] {
  background: url(../images/ico_doc.svg) no-repeat center right;
  background-size: 23px;
  content: "";
  display: inline-block;
  margin: 0;
  padding: 0.2rem 2.7rem 0.2rem 0;
}

a[href$=".xls"] {
  background: url(../images/ico_xls.svg) no-repeat center right;
  background-size: 23px;
  content: "";
  display: inline-block;
  margin: 0;
  padding: 0.2rem 2.7rem 0.2rem 0;
}

a.no {
  background: none !important;
}

a.blank.no:after {
  content: none !important;
}

/*========================================================================*\

$Flex

\*========================================================================*/

.box02,
.box03,
.box04,
.box05 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 3rem 0;
  position: relative;
  width: 100%;
}

/*左揃え*/
.start {
  justify-content: start;
}

/*右揃え*/
.end {
  justify-content: flex-end;
}

/*均等配置*/
.around {
  justify-content: space-around;
}

/*中央揃え*/
.center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*逆向き*/
.reverse {
  flex-flow: row-reverse;
}

.box02.fltL .box02Inner:first-child,
.box02.fltR .box02Inner:first-child {
  width: 35%;
}

.box02.fltL .box02Inner,
.box02.fltR .box02Inner {
  width: 63%;
}

.box02::after {
  content: "";
  display: block;
  width: 48.5%;
}

.box02.reverse::after {
  content: none;
}

.box03::after {
  content: "";
  display: block;
  width: 32%;
}

.box04::before {
  content: "";
  display: block;
  order: 1;
  width: 23.5%;
}

.box04::after {
  content: "";
  display: block;
  width: 23.5%;
}

.box02 li,
.box02 .box02Inner {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
  width: 48.5%;
}

.box03 li,
.box03 .box03Inner {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
  width: 32%;
}

.box04 li,
.box04 .box04Inner {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
  width: 23.5%;
}

.box05 li,
.box05 .box05Inner {
  flex-shrink: 0;
  margin: 0;
  max-width: 100%;
  width: 18%;
}

.box02 li:nth-child(n + 2),
.box03 li:nth-child(n + 2),
.box04 li:nth-child(n + 2),
.box05 li:nth-child(n + 2),
.box02 .box02Inner:nth-child(n + 2),
.box03 .box03Inner:nth-child(n + 2),
.box04 .box03Inner:nth-child(n + 2),
.box05 .box05Inner:nth-child(n + 2) {
  margin-top: 0 !important;
}

.box02 li:nth-child(n + 3),
.box03 li:nth-child(n + 4),
.box04 li:nth-child(n + 5),
.box05 li:nth-child(n + 6) {
  margin-top: 1rem !important;
}

.box02 .box02Inner:nth-child(n + 3),
.box03 .box03Inner:nth-child(n + 4),
.box04 .box03Inner:nth-child(n + 5),
.box05 .box05Inner:nth-child(n + 6) {
  margin-top: 3rem !important;
}

.box02.wide li,
.box03.wide li,
.box04.wide li,
.box06.wide li {
  flex-shrink: 0;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 767px) {
  .box02,
  .box03,
  .box04,
  .box05 {
    display: block;
    margin: 0 0 2rem 0;
    width: 100%;
  }

  .box02.half,
  .box03.half,
  .box04.half,
  .box05.half {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .box02 li,
  .box03 li,
  .box04 li,
  .box05 li,
  .box02 .box02Inner,
  .box03 .box03Inner,
  .box04 .box04Inner,
  .box05 .box05Inner {
    width: 100%;
  }

  .box02.half li,
  .box03.half li,
  .box04.half li,
  .box05.half li,
  .box02.half .box02Inner,
  .box03.half .box03Inner,
  .box04.half .box04Inner,
  .box05.half .box05Inner {
    flex-shrink: 0;
    max-width: 100%;
    width: 48%;
  }

  .box02 li:nth-child(n + 2),
  .box03 li:nth-child(n + 2),
  .box04 li:nth-child(n + 2),
  .box05 li:nth-child(n + 2),
  .box02 .box02Inner:nth-child(n + 2),
  .box03 .box03Inner:nth-child(n + 2),
  .box04 .box04Inner:nth-child(n + 2),
  .box05 .box05Inner:nth-child(n + 2) {
    margin-top: 1rem !important;
  }

  .box02.half li:nth-child(n + 2),
  .box03.half li:nth-child(n + 2),
  .box04.half li:nth-child(n + 2),
  .box05.half li:nth-child(n + 2),
  .box02.half .box02Inner:nth-child(n + 2),
  .box03.half .box03Inner:nth-child(n + 2),
  .box04.half .box04Inner:nth-child(n + 2),
  .box05.half .box05Inner:nth-child(n + 2) {
    margin-top: 0 !important;
  }

  .box02.half li:nth-child(n + 3),
  .box03.half li:nth-child(n + 3),
  .box04.half li:nth-child(n + 3),
  .box05.half li:nth-child(n + 3),
  .box02.half .box02Inner:nth-child(n + 3),
  .box03.half .box03Inner:nth-child(n + 3),
  .box04.half .box04Inner:nth-child(n + 3),
  .box05.half .box05Inner:nth-child(n + 3) {
    margin-top: 1rem !important;
  }

  .box02.flex-start li:first-child,
  .box02.flex-start .box02Inner:first-child {
    margin-right: 0;
  }

  .box02.fltL .box02Inner:first-child,
  .box02.fltR .box02Inner:first-child {
    margin-bottom: 2rem;
    width: 100%;
  }

  .box02.fltL .box02Inner,
  .box02.fltR .box02Inner {
    width: 100%;
  }
}

/*========================================================================*\

$scroll

\*========================================================================*/

@media screen and (max-width: 767px) {
  #Co .scroll {
    margin-bottom: 2rem;
  }

  #Co .scroll table {
    margin: 0 0 2rem 0;
    width: 800px !important;
  }

  #Co .scroll table.tbl th,
  #Co .scroll table.tbl td {
    display: table-cell !important;
    width: auto !important;
  }
}

/*========================================================================*\

$リスト系

\*========================================================================*/

ul,
ol {
  margin-bottom: 3rem;
}

ol {
  counter-reset: number;
  padding: 0;
}

ul li,
ol li {
  font-size: 1.6rem;
  padding: 0;
}

ul li:nth-child(n + 2),
ol li:nth-child(n + 2) {
  margin-top: 1rem !important;
}

ol li {
  list-style: none;
  padding-left: 1.2em;
  position: relative;
  text-indent: 0;
}

ol li:before {
  color: #009ffa;
  content: counter(number) ".";
  counter-increment: number;
  font-weight: bold;
  left: 0;
  position: absolute;
  top: 0;
}

.ind,
.point li,
.point-dot,
#Co .detailSection #CoL ul li {
  padding-left: 1em;
  text-indent: -1em;
}

.point li::before,
#Co .detailSection #CoL ul li::before {
  border-color: transparent transparent transparent #ff0000;
  border-style: solid;
  border-width: 4.5px 0 4.5px 8px;
  content: "";
  display: inline-block;
  height: 0;
  margin-right: 0.8rem;
  width: 0;
}

.point-dot li {
  padding-left: 1.4rem;
  position: relative;
  text-indent: 0;
}

.point-dot li:before {
  background: rgba(17, 17, 17, 0.5);
  border-radius: 50%;
  content: "";
  height: 5px;
  left: 0;
  position: absolute;
  top: 0.75em;
  width: 5px;
}

@media only screen and (max-width: 767px) {
  ul li,
  ol li {
    font-size: 1.4rem;
  }
}

/*========================================================================*\

$btn

\*========================================================================*/

#Co .btn,
footer .btn {
  margin: 5rem auto 3rem auto;
  width: 350px;
}

#Co .btnGroup {
  margin: 5rem auto 3rem auto;
  width: 600px;
}

#Co .btn a,
#Co .btnGroup ul li a,
footer .btn a {
  align-items: center;
  background: #ff0000;
  border-radius: 100px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  font-size: 1.4rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin: 0 auto;
  overflow: hidden;
  padding: 2rem 1rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 100%;
  z-index: 1;
}

#Co .btn a:hover,
#Co .btnGroup ul li a:hover,
footer .btn a:hover {
  opacity: 0.7;
  transform: translateY(-5px);
}

#Co .btnGroup ul li:nth-child(2) a {
  background: #008cd6;
}

#Co .btnGroup ul li:nth-child(3) a {
  background: #7fc31c;
}

#Co .btn a:hover::before,
#Co .btnGroup ul li a:hover::before,
footer .btn a:hover::before {
  transform: scale(1, 1);
}

#Co .btn a:after,
#Co .btnGroup ul li a:after,
footer .btn a:after {
  border-right: solid 2px #ffffff;
  border-top: solid 2px #ffffff;
  content: "";
  height: 8px;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transition: 0.3s;
  width: 8px;
}

#Co .btn a[href$=".pdf"],
#Co .btnGroup ul li a[href$=".pdf"] {
  background: url(../images/ico_pdf.svg) no-repeat 96% center #3fa037;
}

#Co .btn a[href$=".pdf"]:hover,
#Co .btnGroup ul li a[href$=".pdf"]:hover {
  background: url(../images/ico_pdf.svg) no-repeat 96% center #ffffff;
  color: #3fa037;
}

@media only screen and (max-width: 767px) {
  #Co .btn,
  #Co .btnGroup,
  footer .btn {
    margin: 3rem auto;
    width: 100%;
  }

  #Co .btnGroup ul {
    display: block;
  }

  #Co .btnGroup ul li {
    margin-left: auto;
    margin-right: auto;
  }

  #Co .btnGroup ul.half {
    display: block;
  }

  #Co .btnGroup ul.half li {
    margin-left: 0;
    margin-right: 0;
    width: 48.5%;
  }

  #Co .btn a,
  #Co .btnGroup ul li a,
  footer .btn a {
    font-size: 1.4rem;
    padding: 1.5rem 0.5rem;
  }
}

/*========================================================================*\

$pan

\*========================================================================*/

#pan {
  margin: 0 auto;
  max-width: 1100px;
  padding: 1rem 0 0 0;
  position: relative;
  width: 100%;
}

@media (max-width: 992px) {
  #pan {
    max-width: 1100px;
    padding: 1rem 2rem;
  }
}

#pan ul {
  margin: 0 auto;
}

#pan ul li {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: bold;
  list-style: none;
  margin-right: 0.5rem;
  position: relative;
}

#pan ul li:last-child {
  margin-right: 0;
}

#pan ul li a {
  color: #ff0000;
  font-size: 1.1rem;
  text-decoration: underline;
}

#pan ul li a:hover {
  text-decoration: none;
}

#pan ul li:after {
  content: ">";
  margin-left: 0.7rem;
}

#pan ul li:last-child:after {
  content: none;
  margin-left: 0;
}

@media all and (-ms-high-contrast: none) {
  #pan ul li a {
    background: transparent !important;
  }
}

@media screen and (max-width: 767px) {
  #pan {
    display: none;
  }
}

/*========================================================================*\

$btnTop

\*========================================================================*/

#btnTop {
  background: #ffffff;
  border: 2px solid #007524;
  border-radius: 50%;
  bottom: 60px;
  height: 60px;
  opacity: 0;
  position: fixed;
  right: 20px;
  visibility: hidden;
  width: 60px;
  z-index: 200;
}

#btnTop.active {
  opacity: 1;
  visibility: visible;
}

#btnTop a {
  display: block;
  height: 60px;
  position: relative;
  text-decoration: none;
  width: 60px;
}

#btnTop a::before {
  border-left: 4px solid #007524;
  border-top: 4px solid #007524;
  bottom: 0;
  color: #007524;
  content: "";
  height: 10px;
  left: -3px;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 4px;
  transform: rotate(45deg);
  width: 10px;
}

@media only screen and (max-width: 767px) {
  #btnTop {
    bottom: 10px;
    height: 50px;
    width: 50px;
  }

  #btnTop a::before {
    left: -13px;
    right: 0;
    top: -8px;
  }
}

/*========================================================================*\

$蛍光ペン

\*========================================================================*/

.pen {
  background: linear-gradient(transparent 80%, #ffe001 60%);
  font-weight: 700;
}

.pen_p {
  background: linear-gradient(transparent 80%, #ff66cc 60%);
  font-weight: 700;
}

.pen_b {
  background: linear-gradient(transparent 80%, #66ccff 60%);
  font-weight: 700;
}

.pen_g {
  background: linear-gradient(transparent 80%, #66ff66 60%);
  font-weight: 700;
}

/*========================================================================*\

$右寄せ矢印

\*========================================================================*/

.arrow_r {
  display: block;
  padding: 0 2.4rem 0 0;
  position: relative;
  text-align: right;
  text-decoration: none;
  vertical-align: middle;
}

.arrow_r::before,
.arrow_r::after {
  bottom: 0;
  content: "";
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  vertical-align: middle;
}

.arrow_r::before {
  background: #ffd835;
  border-radius: 50%;
  height: 16px;
  width: 16px;
}

.arrow_r::after {
  border-right: 2px solid #ffffff;
  border-top: 2px solid #ffffff;
  height: 6px;
  right: 6px;
  transform: rotate(45deg);
  width: 6px;
}

/*========================================================================*\

$Loading

\*========================================================================*/

.loading {
  background-color: #ffffff;
  height: 100vh;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  transition: all 1s;
  visibility: visible;
  width: 100vw;
  z-index: 9999;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}

.loading-animation {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  height: 100vh;
  justify-content: center;
  opacity: 0;
  transition: all 1s;
  visibility: hidden;
  width: 100vw;
  z-index: 9999;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}

/* fadeUpをするアイコンの動き */
.fadeUp {
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-name: fadeUpAnime;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*========================================================================*\

$ドットを被せる（背景）

\*========================================================================*/

.layer-dot {
  position: relative;
}

.layer-dot::after {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: radial-gradient(#121212 20%, transparent 0),
    radial-gradient(#121212 20%, transparent 0);
  background-position: 0 0, 10px 10px;
  background-size: 4px 4px;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*========================================================================*\

$photo_link

\*========================================================================*/

.photo_link .photo {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.photo_link img {
  display: block;
  transition-duration: 0.3s;
}

.photo_link:hover img {
  transform: scale(1.1);
  transition-duration: 0.3s;
}

/*========================================================================*\

$pager

\*========================================================================*/

ul.nation {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 2em 0;
  text-align: center;
}

ul.nation li {
  align-items: center;
  background: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  line-height: 2.6em;
  margin: 0 8px !important;
  padding: 0;
  position: relative;
  text-align: center;
  width: 2.6em;
}

ul.nation li span {
  line-height: 1em;
  margin: 0;
  padding: 0;
}

ul.nation li a {
  background: #ffffff;
  border-radius: 300px;
  color: #ff0000;
  display: block;
  text-decoration: none;
  transition: all 1s;
  vertical-align: middle;
  width: 100%;
}

ul.nation li a:hover {
  background: #ff0000;
  color: #ffffff;
}

@media print, screen and (min-width: 767px) {
  ul.thumb li {
    position: relative;
  }

  ul.thumb li.slick-current:after {
    border: 5px solid #ffffff;
    content: "";
    height: 80px;
    left: 10px;
    position: absolute;
    top: 0;
    width: 210px;
  }
}

/*========================================================================*\

$料金

\*========================================================================*/

.price {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: right;
}

.price_b {
  font-size: 3.6rem;
}

/*========================================================================*\

$dot

\*========================================================================*/

.dot {
  color: #ff0000;
  padding-top: 0.2em;
  position: relative;
}

.dot::before {
  background-color: #ff0000;
  border-radius: 50%;
  content: "";
  height: 0.32rem;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, 0);
  width: 0.32rem;
}

/*========================================================================*\

$余白系

\*========================================================================*/

.mt0 {
  margin-top: 0 !important;
}
.mt5 {
  margin-top: 0.5rem !important;
}
.mt10 {
  margin-top: 1rem !important;
}
.mt15 {
  margin-top: 1.5rem !important;
}
.mt20 {
  margin-top: 2rem !important;
}
.mt25 {
  margin-top: 2.5rem !important;
}
.mt30 {
  margin-top: 3rem !important;
}
.mt35 {
  margin-top: 3.5rem !important;
}
.mt40 {
  margin-top: 4rem !important;
}
.mt45 {
  margin-top: 4.5rem !important;
}
.mt50 {
  margin-top: 5rem !important;
}
.mt55 {
  margin-top: 5.5rem !important;
}
.mt60 {
  margin-top: 6rem !important;
}
.mt65 {
  margin-top: 6.5rem !important;
}
.mt70 {
  margin-top: 7rem !important;
}
.mt75 {
  margin-top: 7.5rem !important;
}
.mt80 {
  margin-top: 8rem !important;
}
.mt85 {
  margin-top: 8.5rem !important;
}
.mt90 {
  margin-top: 9rem !important;
}
.mt95 {
  margin-top: 9.5rem !important;
}
.mt100 {
  margin-top: 10rem !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mr5 {
  margin-right: 0.5rem !important;
}
.mr10 {
  margin-right: 1rem !important;
}
.mr15 {
  margin-right: 1.5rem !important;
}
.mr20 {
  margin-right: 2rem !important;
}
.mr25 {
  margin-right: 2.5rem !important;
}
.mr30 {
  margin-right: 3rem !important;
}
.mr35 {
  margin-right: 3.5rem !important;
}
.mr40 {
  margin-right: 4rem !important;
}
.mr45 {
  margin-right: 4.5rem !important;
}
.mr50 {
  margin-right: 5rem !important;
}
.mr55 {
  margin-right: 5.5rem !important;
}
.mr60 {
  margin-right: 6rem !important;
}
.mr65 {
  margin-right: 6.5rem !important;
}
.mr70 {
  margin-right: 7rem !important;
}
.mr75 {
  margin-right: 7.5rem !important;
}
.mr80 {
  margin-right: 8rem !important;
}
.mr85 {
  margin-right: 8.5rem !important;
}
.mr90 {
  margin-right: 9rem !important;
}
.mr95 {
  margin-right: 9.5rem !important;
}
.mr100 {
  margin-right: 10rem !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.mb5 {
  margin-bottom: 0.5rem !important;
}
.mb10 {
  margin-bottom: 1rem !important;
}
.mb15 {
  margin-bottom: 1.5rem !important;
}
.mb20 {
  margin-bottom: 2rem !important;
}
.mb25 {
  margin-bottom: 2.5rem !important;
}
.mb30 {
  margin-bottom: 3rem !important;
}
.mb35 {
  margin-bottom: 3.5rem !important;
}
.mb40 {
  margin-bottom: 4rem !important;
}
.mb45 {
  margin-bottom: 4.5rem !important;
}
.mb50 {
  margin-bottom: 5rem !important;
}
.mb55 {
  margin-bottom: 5.5rem !important;
}
.mb60 {
  margin-bottom: 6rem !important;
}
.mb65 {
  margin-bottom: 6.5rem !important;
}
.mb70 {
  margin-bottom: 7rem !important;
}
.mb75 {
  margin-bottom: 7.5rem !important;
}
.mb80 {
  margin-bottom: 8rem !important;
}
.mb85 {
  margin-bottom: 8.5rem !important;
}
.mb90 {
  margin-bottom: 9rem !important;
}
.mb95 {
  margin-bottom: 9.5rem !important;
}
.mb100 {
  margin-bottom: 10rem !important;
}
.ml0 {
  margin-left: 0 !important;
}
.ml5 {
  margin-left: 0.5rem !important;
}
.ml10 {
  margin-left: 1rem !important;
}
.ml15 {
  margin-left: 1.5rem !important;
}
.ml20 {
  margin-left: 2rem !important;
}
.ml25 {
  margin-left: 2.5rem !important;
}
.ml30 {
  margin-left: 3rem !important;
}
.ml35 {
  margin-left: 3.5rem !important;
}
.ml40 {
  margin-left: 4rem !important;
}
.ml45 {
  margin-left: 4.5rem !important;
}
.ml50 {
  margin-left: 5rem !important;
}
.ml55 {
  margin-left: 5.5rem !important;
}
.ml60 {
  margin-left: 6rem !important;
}
.ml65 {
  margin-left: 6.5rem !important;
}
.ml70 {
  margin-left: 7rem !important;
}
.ml75 {
  margin-left: 7.5rem !important;
}
.ml80 {
  margin-left: 8rem !important;
}
.ml85 {
  margin-left: 8.5rem !important;
}
.ml90 {
  margin-left: 9rem !important;
}
.ml95 {
  margin-left: 9.5rem !important;
}
.ml100 {
  margin-left: 10rem !important;
}

.pt0 {
  padding-top: 0 !important;
}
.pt5 {
  padding-top: 0.5rem !important;
}
.pt10 {
  padding-top: 1rem !important;
}
.pt15 {
  padding-top: 1.5rem !important;
}
.pt20 {
  padding-top: 2rem !important;
}
.pt25 {
  padding-top: 2.5rem !important;
}
.pt30 {
  padding-top: 3rem !important;
}
.pt35 {
  padding-top: 3.5rem !important;
}
.pt40 {
  padding-top: 4rem !important;
}
.pt45 {
  padding-top: 4.5rem !important;
}
.pt50 {
  padding-top: 5rem !important;
}
.pt55 {
  padding-top: 5.5rem !important;
}
.pt60 {
  padding-top: 6rem !important;
}
.pt65 {
  padding-top: 6.5rem !important;
}
.pt70 {
  padding-top: 7rem !important;
}
.pt75 {
  padding-top: 7.5rem !important;
}
.pt80 {
  padding-top: 8rem !important;
}
.pt85 {
  padding-top: 8.5rem !important;
}
.pt90 {
  padding-top: 9rem !important;
}
.pt95 {
  padding-top: 9.5rem !important;
}
.pt100 {
  padding-top: 10rem !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pr5 {
  padding-right: 0.5rem !important;
}
.pr10 {
  padding-right: 1rem !important;
}
.pr15 {
  padding-right: 1.5rem !important;
}
.pr20 {
  padding-right: 2rem !important;
}
.pr25 {
  padding-right: 2.5rem !important;
}
.pr30 {
  padding-right: 3rem !important;
}
.pr35 {
  padding-right: 3.5rem !important;
}
.pr40 {
  padding-right: 4rem !important;
}
.pr45 {
  padding-right: 4.5rem !important;
}
.pr50 {
  padding-right: 5rem !important;
}
.pr55 {
  padding-right: 5.5rem !important;
}
.pr60 {
  padding-right: 6rem !important;
}
.pr65 {
  padding-right: 6.5rem !important;
}
.pr70 {
  padding-right: 7rem !important;
}
.pr75 {
  padding-right: 7.5rem !important;
}
.pr80 {
  padding-right: 8rem !important;
}
.pr85 {
  padding-right: 8.5rem !important;
}
.pr90 {
  padding-right: 9rem !important;
}
.pr95 {
  padding-right: 9.5rem !important;
}
.pr100 {
  padding-right: 10rem !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pb5 {
  padding-bottom: 0.5rem !important;
}
.pb10 {
  padding-bottom: 1rem !important;
}
.pb15 {
  padding-bottom: 1.5rem !important;
}
.pb20 {
  padding-bottom: 2rem !important;
}
.pb25 {
  padding-bottom: 2.5rem !important;
}
.pb30 {
  padding-bottom: 3rem !important;
}
.pb35 {
  padding-bottom: 3.5rem !important;
}
.pb40 {
  padding-bottom: 4rem !important;
}
.pb45 {
  padding-bottom: 4.5rem !important;
}
.pb50 {
  padding-bottom: 5rem !important;
}
.pb55 {
  padding-bottom: 5.5rem !important;
}
.pb60 {
  padding-bottom: 6rem !important;
}
.pb65 {
  padding-bottom: 6.5rem !important;
}
.pb70 {
  padding-bottom: 7rem !important;
}
.pb75 {
  padding-bottom: 7.5rem !important;
}
.pb80 {
  padding-bottom: 8rem !important;
}
.pb85 {
  padding-bottom: 8.5rem !important;
}
.pb90 {
  padding-bottom: 9rem !important;
}
.pb95 {
  padding-bottom: 9.5rem !important;
}
.pb100 {
  padding-bottom: 10rem !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pl5 {
  padding-left: 0.5rem !important;
}
.pl10 {
  padding-left: 1rem !important;
}
.pl15 {
  padding-left: 1.5rem !important;
}
.pl20 {
  padding-left: 2rem !important;
}
.pl25 {
  padding-left: 2.5rem !important;
}
.pl30 {
  padding-left: 3rem !important;
}
.pl35 {
  padding-left: 3.5rem !important;
}
.pl40 {
  padding-left: 4rem !important;
}
.pl45 {
  padding-left: 4.5rem !important;
}
.pl50 {
  padding-left: 5rem !important;
}
.pl55 {
  padding-left: 5.5rem !important;
}
.pl60 {
  padding-left: 6rem !important;
}
.pl65 {
  padding-left: 6.5rem !important;
}
.pl70 {
  padding-left: 7rem !important;
}
.pl75 {
  padding-left: 75rem !important;
}
.pl80 {
  padding-left: 8rem !important;
}
.pl85 {
  padding-left: 8.5rem !important;
}
.pl90 {
  padding-left: 9rem !important;
}
.pl95 {
  padding-left: 9.5rem !important;
}
.pl100 {
  padding-left: 10rem !important;
}

.wide10 {
  width: 10% !important;
}
.wide15 {
  width: 15% !important;
}
.wide20 {
  width: 20% !important;
}
.wide25 {
  width: 25% !important;
}
.wide30 {
  width: 30% !important;
}
.wide35 {
  width: 35% !important;
}
.wide40 {
  width: 40% !important;
}
.wide45 {
  width: 45% !important;
}
.wide50 {
  width: 50% !important;
}
.wide55 {
  width: 55% !important;
}
.wide60 {
  width: 60% !important;
}
.wide65 {
  width: 65% !important;
}
.wide70 {
  width: 70% !important;
}
.wide75 {
  width: 75% !important;
}
.wide80 {
  width: 80% !important;
}
.wide85 {
  width: 85% !important;
}
.wide90 {
  width: 90% !important;
}
.wide95 {
  width: 95% !important;
}
.wide100 {
  width: 100% !important;
}

#contactForm .step10 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

#contactForm .step15 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

#contactForm .step20 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}

#contactForm .step25 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
}

#contactForm .step30 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
}

#contactForm .step35 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 3.5rem;
  padding-bottom: 3.5rem;
}

#contactForm .step40 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}

#contactForm .step45 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 4.5rem;
  padding-bottom: 4.5rem;
}

#contactForm .step50 {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 5rem;
  padding-bottom: 5rem;
}

@media screen and (max-width: 767px) {
  .wide .wide10,
  .wide .wide15,
  .wide .wide20,
  .wide .wide25,
  .wide .wide30,
  .wide .wide35,
  .wide .wide40,
  .wide .wide45,
  .wide .wide50,
  .wide .wide55,
  .wide .wide60,
  .wide .wide65,
  .wide .wide70,
  .wide .wide75,
  .wide .wide80,
  .wide .wide85,
  .wide .wide90,
  .wide .wide95 {
    width: 100% !important;
  }
  .w20 {
    margin: auto;
    width: 20% !important;
  }
  .w25 {
    margin: auto;
    width: 25% !important;
  }
  .w30 {
    margin: auto;
    width: 30% !important;
  }
  .w35 {
    margin: auto;
    width: 35% !important;
  }
  .w40 {
    margin: auto;
    width: 40% !important;
  }
  .w45 {
    margin: auto;
    width: 45% !important;
  }
  .w50 {
    margin: auto;
    width: 50% !important;
  }
  .w55 {
    margin: auto;
    width: 55% !important;
  }
  .w60 {
    margin: auto;
    width: 60% !important;
  }
  .w65 {
    margin: auto;
    width: 65% !important;
  }
  .w70 {
    margin: auto;
    width: 70% !important;
  }
  .w75 {
    margin: auto;
    width: 75% !important;
  }
  .w80 {
    margin: auto;
    width: 80% !important;
  }
  .w85 {
    margin: auto;
    width: 85% !important;
  }
  .w90 {
    margin: auto;
    width: 90% !important;
  }
  .w95 {
    margin: auto;
    width: 95% !important;
  }
}

/*========================================================================*\

$float

\*========================================================================*/

.pctL {
  float: left;
  margin-bottom: 1.5rem;
  margin-right: 5rem !important;
}

.pctR {
  float: right;
  margin-bottom: 1.5rem;
  margin-left: 5rem !important;
}

.cl {
  clear: both;
}

/*========================================================================*\

$clearfix

\*========================================================================*/

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0.1rem;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/* Holly Hack Targets IE Win only \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}
/* End Holly Hack */

/*========================================================================*\

$text-align

\*========================================================================*/

.aLeft {
  text-align: left !important;
}

.aRight {
  text-align: right !important;
}

.aCenter {
  text-align: center !important;
}

/*========================================================================*\

$position

\*========================================================================*/

.centered {
  left: 50%;
  margin: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/*========================================================================*\

$レスポンシブ系

\*========================================================================*/

.sp {
  display: none;
}

@media (max-width: 1210px) {
  .pc {
    display: none !important;
  }
  .tb {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  .pc,
  .tb {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  img {
    max-width: 100%;
  }

  .wide {
    height: auto;
    width: 100% !important;
  }

  .responsiveBox {
    height: 0;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
  }

  .responsiveBox iframe,
  .responsiveBox object,
  .responsiveBox embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

/*========================================================================*\

$背景からの写真

\*========================================================================*/

.mask-wrap {
  display: table;
  overflow: hidden;
}

.mask-wrap .mask {
  display: table;
  left: -100%;
  margin-bottom: 0.25em;
  overflow: hidden;
  position: relative;
}

.mask-wrap .mask-bg {
  background: #0e4d79;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/*========================================================================*\

$流れるテキスト（ベース）

<p class="slide-in leftAnime">
<span class="slide-in_inner leftAnimeInner"></span>
</p>

\*========================================================================*/

.slide-in {
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  display: inline-block;
  opacity: 0;
  overflow: hidden;
}

.slide-in_inner {
  display: inline-block;
}

.leftAnime,
.rightAnime,
.upAnime,
.downAnime {
  opacity: 0;
}

/*========================================================================*\

 流れるテキスト左から

\*========================================================================*/

.slideAnimeLeftRight {
  animation-name: slideTextX100;
}

@keyframes slideTextX100 {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*========================================================================*\

 流れるテキスト右から

\*========================================================================*/

.slideAnimeRightLeft {
  animation-name: slideTextX-100;
}

@keyframes slideTextX-100 {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/*========================================================================*\

 流れるテキスト上から下

\*========================================================================*/

.slideAnimeDownUp {
  animation-name: slideTextY100;
}

@keyframes slideTextY100 {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*========================================================================*\

 流れるテキスト下から上

\*========================================================================*/

.slideAnimeUpDown {
  animation-name: slideTextY-100;
}

@keyframes slideTextY-100 {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*========================================================================*\

$背景色が伸びて出現

\*========================================================================*/

.bgextend {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgextendAnimeBase;
  opacity: 0;
  overflow: hidden;
  position: relative;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.bgappear {
  animation-delay: 0.6s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgextendAnimeSecond;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bgextend__wrap {
  display: block;
}

.bgappearTrigger,
.bgLRextendTrigger,
.bgRLextendTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger {
  display: inline-block;
  opacity: 0;
}

/*========================================================================*\

 背景色が伸びて出現 左から右

\*========================================================================*/

.bgLRextend::before {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgLRextendAnime;
  background: linear-gradient(to right, #362ae0 0%, #3b79cc 50%, #42d3ed 100%);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

@keyframes bgLRextendAnime {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(1);
    transform-origin: left;
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/*========================================================================*\

 背景色が伸びて出現 右から左

\*========================================================================*/

.bgRLextend::before {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgRLextendAnime;
  background-color: #666666; /*伸びる背景色の設定*/
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

@keyframes bgRLextendAnime {
  0% {
    transform: scaleX(0);
    transform-origin: right;
  }
  50% {
    transform: scaleX(1);
    transform-origin: right;
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}

/*========================================================================*\

 背景色が伸びて出現 上から下

\*========================================================================*/

.bgUDextend::before {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgUDextendAnime;
  background-color: #666666; /*伸びる背景色の設定*/
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

@keyframes bgUDextendAnime {
  0% {
    transform: scaleY(0);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
}

/*========================================================================*\

 背景色が伸びて出現 下から上

\*========================================================================*/

.bgDUextend::before {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: bgDUextendAnime;
  background-color: #666666; /*伸びる背景色の設定*/
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}

@keyframes bgDUextendAnime {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  50% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top;
  }
}

/*========================================================================*\

$テキストが1文字ずつ表示

\*========================================================================*/

.eachTextAnime span {
  opacity: 0;
}

.eachTextAnime.appeartext span {
  animation: text_anime_on 1s ease-out forwards;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*========================================================================*\

$動き_ベース

\*========================================================================*/

.animated {
  animation-duration: 0.4s !important;
  animation-fill-mode: both;
  opacity: 0;
}

.animated.item02 {
  animation-delay: 0.6s;
}

.animated.item03 {
  animation-delay: 1.2s;
}

.animated.item04 {
  animation-delay: 1.8s;
}

.animated.item05 {
  animation-delay: 2.4s;
}

.animated.item06 {
  animation-delay: 3s;
}

@media screen and (max-width: 767px) {
  .animated.item02,
  .animated.item03,
  .animated.item04 {
    animation-delay: 0s;
  }
}

/*========================================================================*\

 動き_上から下

\*========================================================================*/

.fadeInDownSmall {
  animation-name: fadeInDownSmall;
}

@keyframes fadeInDownSmall {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
    transition-duration: 5s;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*========================================================================*\

 動き_左から

\*========================================================================*/

.fadeInLeftSmall {
  animation-name: fadeInLeftSmall;
}

@keyframes fadeInLeftSmall {
  from {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*========================================================================*\

 動き_右から

\*========================================================================*/

.fadeInRightSmall {
  animation-name: fadeInRightSmall;
}

@keyframes fadeInRightSmall {
  from {
    opacity: 0;
    transform: translate3d(50px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*========================================================================*\

 動き_下から上

\*========================================================================*/

.fadeInUpSmall {
  animation-name: fadeInUpSmall;
}

@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/*========================================================================*\

$流れるように出現（左から右）

\*========================================================================*/

.leftAnime {
  display: inline-block;
  opacity: 0;
  overflow: hidden;
}

.leftAnimeInner {
  display: inline-block;
}

.slideAnimeLeftRight {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: slideTextX100;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    /*要素を左の枠外に移動*/
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    /*要素を元の位置に移動*/
    opacity: 1;
    transform: translateX(0);
  }
}

/*========================================================================*\

$流れるように出現（右から左）

\*========================================================================*/

.slideAnimeRightLeft {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: slideTextX-100;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    /*要素を右の枠外に移動*/
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    /*要素を元の位置に移動*/
    opacity: 1;
    transform: translateX(0);
  }
}

/*========================================================================*\

$headingBox（見出し）

\*========================================================================*/

.headingBox {
  align-items: center;
  display: flex;
  font-size: 26px;
  justify-content: center;
  text-align: center;
}

.headingBox::before,
.headingBox::after {
  background-color: #121212;
  content: "";
  height: 25px;
  width: 2px;
}

.headingBox::before {
  margin-right: 15px;
  transform: rotate(-35deg);
}
.headingBox::after {
  margin-left: 15px;
  transform: rotate(35deg);
}

@media screen and (max-width: 767px) {
  .headingBox::before,
  .headingBox::after {
    margin-top: -45px;
  }
}

/*========================================================================*\

$伸びる下線

\*========================================================================*/

.extend {
  position: relative;
  z-index: 1;
}

.extend:after {
  background: #ff5722;
  bottom: -5px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transition: all 0.8s;
  width: 0;
  z-index: -1;
}

.extend.Active:after {
  width: 100%;
}

/*========================================================================*\

$画像動く

\*========================================================================*/

.scale_block {
  height: 400px;
  opacity: 1;
  overflow: hidden;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.scaleImg {
  animation-name: scaleImg;
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
}