@charset "UTF-8";
/*----------------------------------------------------------

Reset

----------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

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

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

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

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

/*----------------------------------------------------------

Width

----------------------------------------------------------*/
.width-0 {
  width: 0% !important; }

.width-10 {
  width: 10% !important; }

.width-20 {
  width: 20% !important; }

.width-30 {
  width: 30% !important; }

.width-40 {
  width: 40% !important; }

.width-50 {
  width: 50% !important; }

.width-60 {
  width: 60% !important; }

.width-70 {
  width: 70% !important; }

.width-80 {
  width: 80% !important; }

.width-90 {
  width: 90% !important; }

.width-100 {
  width: 100% !important; }

/*----------------------------------------------------------

Margin

----------------------------------------------------------*/
.mt-0 {
  margin-top: 0px !important; }
  @media screen and (max-width: 767px) {
    .mt-0 {
      margin-top: 0vw !important; } }

.mr-0 {
  margin-right: 0px !important; }
  @media screen and (max-width: 767px) {
    .mr-0 {
      margin-right: 0vw !important; } }

.mb-0 {
  margin-bottom: 0px !important; }
  @media screen and (max-width: 767px) {
    .mb-0 {
      margin-bottom: 0vw !important; } }

.ml-0 {
  margin-left: 0px !important; }
  @media screen and (max-width: 767px) {
    .ml-0 {
      margin-left: 0vw !important; } }

.mt-10 {
  margin-top: 10px !important; }
  @media screen and (max-width: 767px) {
    .mt-10 {
      margin-top: 1.5625vw !important; } }

.mr-10 {
  margin-right: 10px !important; }
  @media screen and (max-width: 767px) {
    .mr-10 {
      margin-right: 1.5625vw !important; } }

.mb-10 {
  margin-bottom: 10px !important; }
  @media screen and (max-width: 767px) {
    .mb-10 {
      margin-bottom: 1.5625vw !important; } }

.ml-10 {
  margin-left: 10px !important; }
  @media screen and (max-width: 767px) {
    .ml-10 {
      margin-left: 1.5625vw !important; } }

.mt-20 {
  margin-top: 20px !important; }
  @media screen and (max-width: 767px) {
    .mt-20 {
      margin-top: 3.125vw !important; } }

.mr-20 {
  margin-right: 20px !important; }
  @media screen and (max-width: 767px) {
    .mr-20 {
      margin-right: 3.125vw !important; } }

.mb-20 {
  margin-bottom: 20px !important; }
  @media screen and (max-width: 767px) {
    .mb-20 {
      margin-bottom: 3.125vw !important; } }

.ml-20 {
  margin-left: 20px !important; }
  @media screen and (max-width: 767px) {
    .ml-20 {
      margin-left: 3.125vw !important; } }

.mt-30 {
  margin-top: 30px !important; }
  @media screen and (max-width: 767px) {
    .mt-30 {
      margin-top: 4.6875vw !important; } }

.mr-30 {
  margin-right: 30px !important; }
  @media screen and (max-width: 767px) {
    .mr-30 {
      margin-right: 4.6875vw !important; } }

.mb-30 {
  margin-bottom: 30px !important; }
  @media screen and (max-width: 767px) {
    .mb-30 {
      margin-bottom: 4.6875vw !important; } }

.ml-30 {
  margin-left: 30px !important; }
  @media screen and (max-width: 767px) {
    .ml-30 {
      margin-left: 4.6875vw !important; } }

.mt-40 {
  margin-top: 40px !important; }
  @media screen and (max-width: 767px) {
    .mt-40 {
      margin-top: 6.25vw !important; } }

.mr-40 {
  margin-right: 40px !important; }
  @media screen and (max-width: 767px) {
    .mr-40 {
      margin-right: 6.25vw !important; } }

.mb-40 {
  margin-bottom: 40px !important; }
  @media screen and (max-width: 767px) {
    .mb-40 {
      margin-bottom: 6.25vw !important; } }

.ml-40 {
  margin-left: 40px !important; }
  @media screen and (max-width: 767px) {
    .ml-40 {
      margin-left: 6.25vw !important; } }

.mt-50 {
  margin-top: 50px !important; }
  @media screen and (max-width: 767px) {
    .mt-50 {
      margin-top: 7.8125vw !important; } }

.mr-50 {
  margin-right: 50px !important; }
  @media screen and (max-width: 767px) {
    .mr-50 {
      margin-right: 7.8125vw !important; } }

.mb-50 {
  margin-bottom: 50px !important; }
  @media screen and (max-width: 767px) {
    .mb-50 {
      margin-bottom: 7.8125vw !important; } }

.ml-50 {
  margin-left: 50px !important; }
  @media screen and (max-width: 767px) {
    .ml-50 {
      margin-left: 7.8125vw !important; } }

.mt-60 {
  margin-top: 60px !important; }
  @media screen and (max-width: 767px) {
    .mt-60 {
      margin-top: 9.375vw !important; } }

.mr-60 {
  margin-right: 60px !important; }
  @media screen and (max-width: 767px) {
    .mr-60 {
      margin-right: 9.375vw !important; } }

.mb-60 {
  margin-bottom: 60px !important; }
  @media screen and (max-width: 767px) {
    .mb-60 {
      margin-bottom: 9.375vw !important; } }

.ml-60 {
  margin-left: 60px !important; }
  @media screen and (max-width: 767px) {
    .ml-60 {
      margin-left: 9.375vw !important; } }

.mt-70 {
  margin-top: 70px !important; }
  @media screen and (max-width: 767px) {
    .mt-70 {
      margin-top: 10.9375vw !important; } }

.mr-70 {
  margin-right: 70px !important; }
  @media screen and (max-width: 767px) {
    .mr-70 {
      margin-right: 10.9375vw !important; } }

.mb-70 {
  margin-bottom: 70px !important; }
  @media screen and (max-width: 767px) {
    .mb-70 {
      margin-bottom: 10.9375vw !important; } }

.ml-70 {
  margin-left: 70px !important; }
  @media screen and (max-width: 767px) {
    .ml-70 {
      margin-left: 10.9375vw !important; } }

.mt-80 {
  margin-top: 80px !important; }
  @media screen and (max-width: 767px) {
    .mt-80 {
      margin-top: 12.5vw !important; } }

.mr-80 {
  margin-right: 80px !important; }
  @media screen and (max-width: 767px) {
    .mr-80 {
      margin-right: 12.5vw !important; } }

.mb-80 {
  margin-bottom: 80px !important; }
  @media screen and (max-width: 767px) {
    .mb-80 {
      margin-bottom: 12.5vw !important; } }

.ml-80 {
  margin-left: 80px !important; }
  @media screen and (max-width: 767px) {
    .ml-80 {
      margin-left: 12.5vw !important; } }

.mt-90 {
  margin-top: 90px !important; }
  @media screen and (max-width: 767px) {
    .mt-90 {
      margin-top: 14.0625vw !important; } }

.mr-90 {
  margin-right: 90px !important; }
  @media screen and (max-width: 767px) {
    .mr-90 {
      margin-right: 14.0625vw !important; } }

.mb-90 {
  margin-bottom: 90px !important; }
  @media screen and (max-width: 767px) {
    .mb-90 {
      margin-bottom: 14.0625vw !important; } }

.ml-90 {
  margin-left: 90px !important; }
  @media screen and (max-width: 767px) {
    .ml-90 {
      margin-left: 14.0625vw !important; } }

.mt-100 {
  margin-top: 100px !important; }
  @media screen and (max-width: 767px) {
    .mt-100 {
      margin-top: 15.625vw !important; } }

.mr-100 {
  margin-right: 100px !important; }
  @media screen and (max-width: 767px) {
    .mr-100 {
      margin-right: 15.625vw !important; } }

.mb-100 {
  margin-bottom: 100px !important; }
  @media screen and (max-width: 767px) {
    .mb-100 {
      margin-bottom: 15.625vw !important; } }

.ml-100 {
  margin-left: 100px !important; }
  @media screen and (max-width: 767px) {
    .ml-100 {
      margin-left: 15.625vw !important; } }

.mt-110 {
  margin-top: 110px !important; }
  @media screen and (max-width: 767px) {
    .mt-110 {
      margin-top: 17.1875vw !important; } }

.mr-110 {
  margin-right: 110px !important; }
  @media screen and (max-width: 767px) {
    .mr-110 {
      margin-right: 17.1875vw !important; } }

.mb-110 {
  margin-bottom: 110px !important; }
  @media screen and (max-width: 767px) {
    .mb-110 {
      margin-bottom: 17.1875vw !important; } }

.ml-110 {
  margin-left: 110px !important; }
  @media screen and (max-width: 767px) {
    .ml-110 {
      margin-left: 17.1875vw !important; } }

.mt-120 {
  margin-top: 120px !important; }
  @media screen and (max-width: 767px) {
    .mt-120 {
      margin-top: 18.75vw !important; } }

.mr-120 {
  margin-right: 120px !important; }
  @media screen and (max-width: 767px) {
    .mr-120 {
      margin-right: 18.75vw !important; } }

.mb-120 {
  margin-bottom: 120px !important; }
  @media screen and (max-width: 767px) {
    .mb-120 {
      margin-bottom: 18.75vw !important; } }

.ml-120 {
  margin-left: 120px !important; }
  @media screen and (max-width: 767px) {
    .ml-120 {
      margin-left: 18.75vw !important; } }

.mt-130 {
  margin-top: 130px !important; }
  @media screen and (max-width: 767px) {
    .mt-130 {
      margin-top: 20.3125vw !important; } }

.mr-130 {
  margin-right: 130px !important; }
  @media screen and (max-width: 767px) {
    .mr-130 {
      margin-right: 20.3125vw !important; } }

.mb-130 {
  margin-bottom: 130px !important; }
  @media screen and (max-width: 767px) {
    .mb-130 {
      margin-bottom: 20.3125vw !important; } }

.ml-130 {
  margin-left: 130px !important; }
  @media screen and (max-width: 767px) {
    .ml-130 {
      margin-left: 20.3125vw !important; } }

.mt-140 {
  margin-top: 140px !important; }
  @media screen and (max-width: 767px) {
    .mt-140 {
      margin-top: 21.875vw !important; } }

.mr-140 {
  margin-right: 140px !important; }
  @media screen and (max-width: 767px) {
    .mr-140 {
      margin-right: 21.875vw !important; } }

.mb-140 {
  margin-bottom: 140px !important; }
  @media screen and (max-width: 767px) {
    .mb-140 {
      margin-bottom: 21.875vw !important; } }

.ml-140 {
  margin-left: 140px !important; }
  @media screen and (max-width: 767px) {
    .ml-140 {
      margin-left: 21.875vw !important; } }

.mt-150 {
  margin-top: 150px !important; }
  @media screen and (max-width: 767px) {
    .mt-150 {
      margin-top: 23.4375vw !important; } }

.mr-150 {
  margin-right: 150px !important; }
  @media screen and (max-width: 767px) {
    .mr-150 {
      margin-right: 23.4375vw !important; } }

.mb-150 {
  margin-bottom: 150px !important; }
  @media screen and (max-width: 767px) {
    .mb-150 {
      margin-bottom: 23.4375vw !important; } }

.ml-150 {
  margin-left: 150px !important; }
  @media screen and (max-width: 767px) {
    .ml-150 {
      margin-left: 23.4375vw !important; } }

.mt-160 {
  margin-top: 160px !important; }
  @media screen and (max-width: 767px) {
    .mt-160 {
      margin-top: 25vw !important; } }

.mr-160 {
  margin-right: 160px !important; }
  @media screen and (max-width: 767px) {
    .mr-160 {
      margin-right: 25vw !important; } }

.mb-160 {
  margin-bottom: 160px !important; }
  @media screen and (max-width: 767px) {
    .mb-160 {
      margin-bottom: 25vw !important; } }

.ml-160 {
  margin-left: 160px !important; }
  @media screen and (max-width: 767px) {
    .ml-160 {
      margin-left: 25vw !important; } }

.mt-170 {
  margin-top: 170px !important; }
  @media screen and (max-width: 767px) {
    .mt-170 {
      margin-top: 26.5625vw !important; } }

.mr-170 {
  margin-right: 170px !important; }
  @media screen and (max-width: 767px) {
    .mr-170 {
      margin-right: 26.5625vw !important; } }

.mb-170 {
  margin-bottom: 170px !important; }
  @media screen and (max-width: 767px) {
    .mb-170 {
      margin-bottom: 26.5625vw !important; } }

.ml-170 {
  margin-left: 170px !important; }
  @media screen and (max-width: 767px) {
    .ml-170 {
      margin-left: 26.5625vw !important; } }

.mt-180 {
  margin-top: 180px !important; }
  @media screen and (max-width: 767px) {
    .mt-180 {
      margin-top: 28.125vw !important; } }

.mr-180 {
  margin-right: 180px !important; }
  @media screen and (max-width: 767px) {
    .mr-180 {
      margin-right: 28.125vw !important; } }

.mb-180 {
  margin-bottom: 180px !important; }
  @media screen and (max-width: 767px) {
    .mb-180 {
      margin-bottom: 28.125vw !important; } }

.ml-180 {
  margin-left: 180px !important; }
  @media screen and (max-width: 767px) {
    .ml-180 {
      margin-left: 28.125vw !important; } }

.mt-190 {
  margin-top: 190px !important; }
  @media screen and (max-width: 767px) {
    .mt-190 {
      margin-top: 29.6875vw !important; } }

.mr-190 {
  margin-right: 190px !important; }
  @media screen and (max-width: 767px) {
    .mr-190 {
      margin-right: 29.6875vw !important; } }

.mb-190 {
  margin-bottom: 190px !important; }
  @media screen and (max-width: 767px) {
    .mb-190 {
      margin-bottom: 29.6875vw !important; } }

.ml-190 {
  margin-left: 190px !important; }
  @media screen and (max-width: 767px) {
    .ml-190 {
      margin-left: 29.6875vw !important; } }

.mt-200 {
  margin-top: 200px !important; }
  @media screen and (max-width: 767px) {
    .mt-200 {
      margin-top: 31.25vw !important; } }

.mr-200 {
  margin-right: 200px !important; }
  @media screen and (max-width: 767px) {
    .mr-200 {
      margin-right: 31.25vw !important; } }

.mb-200 {
  margin-bottom: 200px !important; }
  @media screen and (max-width: 767px) {
    .mb-200 {
      margin-bottom: 31.25vw !important; } }

.ml-200 {
  margin-left: 200px !important; }
  @media screen and (max-width: 767px) {
    .ml-200 {
      margin-left: 31.25vw !important; } }

/*----------------------------------------------------------

Padding

----------------------------------------------------------*/
.pt-0 {
  padding-top: 0px !important; }
  @media screen and (max-width: 767px) {
    .pt-0 {
      padding-top: 0vw !important; } }

.pr-0 {
  padding-right: 0px !important; }
  @media screen and (max-width: 767px) {
    .pr-0 {
      padding-right: 0vw !important; } }

.pb-0 {
  padding-bottom: 0px !important; }
  @media screen and (max-width: 767px) {
    .pb-0 {
      padding-bottom: 0vw !important; } }

.pl-0 {
  padding-left: 0px !important; }
  @media screen and (max-width: 767px) {
    .pl-0 {
      padding-left: 0vw !important; } }

.pt-10 {
  padding-top: 10px !important; }
  @media screen and (max-width: 767px) {
    .pt-10 {
      padding-top: 1.5625vw !important; } }

.pr-10 {
  padding-right: 10px !important; }
  @media screen and (max-width: 767px) {
    .pr-10 {
      padding-right: 1.5625vw !important; } }

.pb-10 {
  padding-bottom: 10px !important; }
  @media screen and (max-width: 767px) {
    .pb-10 {
      padding-bottom: 1.5625vw !important; } }

.pl-10 {
  padding-left: 10px !important; }
  @media screen and (max-width: 767px) {
    .pl-10 {
      padding-left: 1.5625vw !important; } }

.pt-20 {
  padding-top: 20px !important; }
  @media screen and (max-width: 767px) {
    .pt-20 {
      padding-top: 3.125vw !important; } }

.pr-20 {
  padding-right: 20px !important; }
  @media screen and (max-width: 767px) {
    .pr-20 {
      padding-right: 3.125vw !important; } }

.pb-20 {
  padding-bottom: 20px !important; }
  @media screen and (max-width: 767px) {
    .pb-20 {
      padding-bottom: 3.125vw !important; } }

.pl-20 {
  padding-left: 20px !important; }
  @media screen and (max-width: 767px) {
    .pl-20 {
      padding-left: 3.125vw !important; } }

.pt-30 {
  padding-top: 30px !important; }
  @media screen and (max-width: 767px) {
    .pt-30 {
      padding-top: 4.6875vw !important; } }

.pr-30 {
  padding-right: 30px !important; }
  @media screen and (max-width: 767px) {
    .pr-30 {
      padding-right: 4.6875vw !important; } }

.pb-30 {
  padding-bottom: 30px !important; }
  @media screen and (max-width: 767px) {
    .pb-30 {
      padding-bottom: 4.6875vw !important; } }

.pl-30 {
  padding-left: 30px !important; }
  @media screen and (max-width: 767px) {
    .pl-30 {
      padding-left: 4.6875vw !important; } }

.pt-40 {
  padding-top: 40px !important; }
  @media screen and (max-width: 767px) {
    .pt-40 {
      padding-top: 6.25vw !important; } }

.pr-40 {
  padding-right: 40px !important; }
  @media screen and (max-width: 767px) {
    .pr-40 {
      padding-right: 6.25vw !important; } }

.pb-40 {
  padding-bottom: 40px !important; }
  @media screen and (max-width: 767px) {
    .pb-40 {
      padding-bottom: 6.25vw !important; } }

.pl-40 {
  padding-left: 40px !important; }
  @media screen and (max-width: 767px) {
    .pl-40 {
      padding-left: 6.25vw !important; } }

.pt-50 {
  padding-top: 50px !important; }
  @media screen and (max-width: 767px) {
    .pt-50 {
      padding-top: 7.8125vw !important; } }

.pr-50 {
  padding-right: 50px !important; }
  @media screen and (max-width: 767px) {
    .pr-50 {
      padding-right: 7.8125vw !important; } }

.pb-50 {
  padding-bottom: 50px !important; }
  @media screen and (max-width: 767px) {
    .pb-50 {
      padding-bottom: 7.8125vw !important; } }

.pl-50 {
  padding-left: 50px !important; }
  @media screen and (max-width: 767px) {
    .pl-50 {
      padding-left: 7.8125vw !important; } }

.pt-60 {
  padding-top: 60px !important; }
  @media screen and (max-width: 767px) {
    .pt-60 {
      padding-top: 9.375vw !important; } }

.pr-60 {
  padding-right: 60px !important; }
  @media screen and (max-width: 767px) {
    .pr-60 {
      padding-right: 9.375vw !important; } }

.pb-60 {
  padding-bottom: 60px !important; }
  @media screen and (max-width: 767px) {
    .pb-60 {
      padding-bottom: 9.375vw !important; } }

.pl-60 {
  padding-left: 60px !important; }
  @media screen and (max-width: 767px) {
    .pl-60 {
      padding-left: 9.375vw !important; } }

.pt-70 {
  padding-top: 70px !important; }
  @media screen and (max-width: 767px) {
    .pt-70 {
      padding-top: 10.9375vw !important; } }

.pr-70 {
  padding-right: 70px !important; }
  @media screen and (max-width: 767px) {
    .pr-70 {
      padding-right: 10.9375vw !important; } }

.pb-70 {
  padding-bottom: 70px !important; }
  @media screen and (max-width: 767px) {
    .pb-70 {
      padding-bottom: 10.9375vw !important; } }

.pl-70 {
  padding-left: 70px !important; }
  @media screen and (max-width: 767px) {
    .pl-70 {
      padding-left: 10.9375vw !important; } }

.pt-80 {
  padding-top: 80px !important; }
  @media screen and (max-width: 767px) {
    .pt-80 {
      padding-top: 12.5vw !important; } }

.pr-80 {
  padding-right: 80px !important; }
  @media screen and (max-width: 767px) {
    .pr-80 {
      padding-right: 12.5vw !important; } }

.pb-80 {
  padding-bottom: 80px !important; }
  @media screen and (max-width: 767px) {
    .pb-80 {
      padding-bottom: 12.5vw !important; } }

.pl-80 {
  padding-left: 80px !important; }
  @media screen and (max-width: 767px) {
    .pl-80 {
      padding-left: 12.5vw !important; } }

.pt-90 {
  padding-top: 90px !important; }
  @media screen and (max-width: 767px) {
    .pt-90 {
      padding-top: 14.0625vw !important; } }

.pr-90 {
  padding-right: 90px !important; }
  @media screen and (max-width: 767px) {
    .pr-90 {
      padding-right: 14.0625vw !important; } }

.pb-90 {
  padding-bottom: 90px !important; }
  @media screen and (max-width: 767px) {
    .pb-90 {
      padding-bottom: 14.0625vw !important; } }

.pl-90 {
  padding-left: 90px !important; }
  @media screen and (max-width: 767px) {
    .pl-90 {
      padding-left: 14.0625vw !important; } }

.pt-100 {
  padding-top: 100px !important; }
  @media screen and (max-width: 767px) {
    .pt-100 {
      padding-top: 15.625vw !important; } }

.pr-100 {
  padding-right: 100px !important; }
  @media screen and (max-width: 767px) {
    .pr-100 {
      padding-right: 15.625vw !important; } }

.pb-100 {
  padding-bottom: 100px !important; }
  @media screen and (max-width: 767px) {
    .pb-100 {
      padding-bottom: 15.625vw !important; } }

.pl-100 {
  padding-left: 100px !important; }
  @media screen and (max-width: 767px) {
    .pl-100 {
      padding-left: 15.625vw !important; } }

/*----------------------------------------------------------

Float

----------------------------------------------------------*/
.alignleft {
  float: left; }

.alignright {
  float: right; }

.aligncenter {
  display: block;
  margin: 0px auto;
  clear: both; }

img.alignleft {
  margin: 0 1em 1em 0; }

img.alignright {
  margin: 0 0 1em 1em; }

/*----------------------------------------------------------

Font

----------------------------------------------------------*/
/* font-size */
.fs-10 {
  font-size: 10px !important;
  font-size: 1rem !important; }

.fs-11 {
  font-size: 11px !important;
  font-size: 1.1rem !important; }

.fs-12 {
  font-size: 12px !important;
  font-size: 1.2rem !important; }

.fs-13 {
  font-size: 13px !important;
  font-size: 1.3rem !important; }

.fs-14 {
  font-size: 14px !important;
  font-size: 1.4rem !important; }

.fs-15 {
  font-size: 15px !important;
  font-size: 1.5rem !important; }

.fs-16 {
  font-size: 16px !important;
  font-size: 1.6rem !important; }

.fs-17 {
  font-size: 17px !important;
  font-size: 1.7rem !important; }

.fs-18 {
  font-size: 18px !important;
  font-size: 1.8rem !important; }

.fs-19 {
  font-size: 19px !important;
  font-size: 1.9rem !important; }

.fs-20 {
  font-size: 20px !important;
  font-size: 2rem !important; }

.fs-21 {
  font-size: 21px !important;
  font-size: 2.1rem !important; }

.fs-22 {
  font-size: 22px !important;
  font-size: 2.2rem !important; }

.fs-23 {
  font-size: 23px !important;
  font-size: 2.3rem !important; }

.fs-24 {
  font-size: 24px !important;
  font-size: 2.4rem !important; }

.fs-25 {
  font-size: 25px !important;
  font-size: 2.5rem !important; }

.fs-26 {
  font-size: 26px !important;
  font-size: 2.6rem !important; }

.fs-27 {
  font-size: 27px !important;
  font-size: 2.7rem !important; }

.fs-28 {
  font-size: 28px !important;
  font-size: 2.8rem !important; }

.fs-29 {
  font-size: 29px !important;
  font-size: 2.9rem !important; }

.fs-30 {
  font-size: 30px !important;
  font-size: 3rem !important; }

.fs-31 {
  font-size: 31px !important;
  font-size: 3.1rem !important; }

.fs-32 {
  font-size: 32px !important;
  font-size: 3.2rem !important; }

.fs-33 {
  font-size: 33px !important;
  font-size: 3.3rem !important; }

.fs-34 {
  font-size: 34px !important;
  font-size: 3.4rem !important; }

.fs-35 {
  font-size: 35px !important;
  font-size: 3.5rem !important; }

.fs-36 {
  font-size: 36px !important;
  font-size: 3.6rem !important; }

.fs-37 {
  font-size: 37px !important;
  font-size: 3.7rem !important; }

.fs-38 {
  font-size: 38px !important;
  font-size: 3.8rem !important; }

.fs-39 {
  font-size: 39px !important;
  font-size: 3.9rem !important; }

.fs-40 {
  font-size: 40px !important;
  font-size: 4rem !important; }

/* font-weight */
.fw-bold {
  font-weight: bold !important; }

.fw-normal {
  font-weight: normal !important; }

/* line-height */
.lh-10 {
  line-height: 1 !important; }

.lh-11 {
  line-height: 1.1 !important; }

.lh-12 {
  line-height: 1.2 !important; }

.lh-13 {
  line-height: 1.3 !important; }

.lh-14 {
  line-height: 1.4 !important; }

.lh-15 {
  line-height: 1.5 !important; }

.lh-16 {
  line-height: 1.6 !important; }

.lh-17 {
  line-height: 1.7 !important; }

.lh-18 {
  line-height: 1.8 !important; }

.lh-19 {
  line-height: 1.9 !important; }

.lh-20 {
  line-height: 2 !important; }

.lh-21 {
  line-height: 2.1 !important; }

.lh-22 {
  line-height: 2.2 !important; }

.lh-23 {
  line-height: 2.3 !important; }

.lh-24 {
  line-height: 2.4 !important; }

.lh-25 {
  line-height: 2.5 !important; }

.lh-26 {
  line-height: 2.6 !important; }

.lh-27 {
  line-height: 2.7 !important; }

.lh-28 {
  line-height: 2.8 !important; }

.lh-29 {
  line-height: 2.9 !important; }

.lh-30 {
  line-height: 3 !important; }

/* text-align */
.ta-left {
  text-align: left !important; }

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

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

/* vertical-align */
.va-top {
  vertical-align: top !important; }

.va-bottom {
  vertical-align: bottom !important; }

.va-middle {
  vertical-align: middle !important; }

/*----------------------------------------------------------

Form

----------------------------------------------------------*/
button,
input,
select,
textarea {
  max-width: 100%;
  box-sizing: border-box;
  font-size: 100%;
  vertical-align: baseline; }

/* テキスト・テキストエリア */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"] {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

textarea {
  padding: 10px;
  border: 1px solid #CCC;
  border-radius: 0px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

input[type="button"], input[type="submit"], input[type="reset"] {
  border-radius: 0px;
  cursor: pointer; }

label {
  cursor: pointer; }

/*----------------------------------------------------------

Column

----------------------------------------------------------*/
.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .row.ai-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
  .row.jc-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .row.row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse; }

.col-1 {
  width: 8.33333%; }

.col-2 {
  width: 16.666666%; }

.col-3 {
  width: 24.99999%; }

.col-4 {
  width: 33.33333%; }

.col-5 {
  width: 41.66666%; }

.col-6 {
  width: 49.99999%; }

.col-7 {
  width: 58.33333%; }

.col-8 {
  width: 66.66666%; }

.col-9 {
  width: 74.99999%; }

.col-10 {
  width: 83.33333%; }

.col-11 {
  width: 91.66666%; }

.col-12 {
  width: 100%; }

@media screen and (max-width: 1023px) {
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.666666%; }
  .col-md-3 {
    width: 24.99999%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66666%; }
  .col-md-6 {
    width: 49.99999%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66666%; }
  .col-md-9 {
    width: 74.99999%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66666%; }
  .col-md-12 {
    width: 100%; } }

@media screen and (max-width: 767px) {
  .col-sm-1 {
    width: 8.33333%; }
  .col-sm-2 {
    width: 16.666666%; }
  .col-sm-3 {
    width: 24.99999%; }
  .col-sm-4 {
    width: 33.33333%; }
  .col-sm-5 {
    width: 41.66666%; }
  .col-sm-6 {
    width: 49.99999%; }
  .col-sm-7 {
    width: 58.33333%; }
  .col-sm-8 {
    width: 66.66666%; }
  .col-sm-9 {
    width: 74.99999%; }
  .col-sm-10 {
    width: 83.33333%; }
  .col-sm-11 {
    width: 91.66666%; }
  .col-sm-12 {
    width: 100%; } }

.row-space-0 {
  margin-top: 0px;
  margin-left: 0px; }
  @media screen and (max-width: 767px) {
    .row-space-0 {
      margin-top: 0vw;
      margin-left: 0vw; } }

.row-space-10 {
  margin-top: -10px;
  margin-left: -10px; }
  @media screen and (max-width: 767px) {
    .row-space-10 {
      margin-top: -1.5625vw;
      margin-left: -1.5625vw; } }

.row-space-20 {
  margin-top: -20px;
  margin-left: -20px; }
  @media screen and (max-width: 767px) {
    .row-space-20 {
      margin-top: -3.125vw;
      margin-left: -3.125vw; } }

.row-space-30 {
  margin-top: -30px;
  margin-left: -30px; }
  @media screen and (max-width: 767px) {
    .row-space-30 {
      margin-top: -4.6875vw;
      margin-left: -4.6875vw; } }

.row-space-40 {
  margin-top: -40px;
  margin-left: -40px; }
  @media screen and (max-width: 767px) {
    .row-space-40 {
      margin-top: -6.25vw;
      margin-left: -6.25vw; } }

.row-space-50 {
  margin-top: -50px;
  margin-left: -50px; }
  @media screen and (max-width: 767px) {
    .row-space-50 {
      margin-top: -7.8125vw;
      margin-left: -7.8125vw; } }

.row-space-60 {
  margin-top: -60px;
  margin-left: -60px; }
  @media screen and (max-width: 767px) {
    .row-space-60 {
      margin-top: -9.375vw;
      margin-left: -9.375vw; } }

.row-space-70 {
  margin-top: -70px;
  margin-left: -70px; }
  @media screen and (max-width: 767px) {
    .row-space-70 {
      margin-top: -10.9375vw;
      margin-left: -10.9375vw; } }

.row-space-80 {
  margin-top: -80px;
  margin-left: -80px; }
  @media screen and (max-width: 767px) {
    .row-space-80 {
      margin-top: -12.5vw;
      margin-left: -12.5vw; } }

.col-space-0 {
  padding-top: 0px;
  padding-left: 0px; }
  @media screen and (max-width: 767px) {
    .col-space-0 {
      padding-top: 0vw;
      padding-left: 0vw; } }

.col-space-10 {
  padding-top: 10px;
  padding-left: 10px; }
  @media screen and (max-width: 767px) {
    .col-space-10 {
      padding-top: 1.5625vw;
      padding-left: 1.5625vw; } }

.col-space-20 {
  padding-top: 20px;
  padding-left: 20px; }
  @media screen and (max-width: 767px) {
    .col-space-20 {
      padding-top: 3.125vw;
      padding-left: 3.125vw; } }

.col-space-30 {
  padding-top: 30px;
  padding-left: 30px; }
  @media screen and (max-width: 767px) {
    .col-space-30 {
      padding-top: 4.6875vw;
      padding-left: 4.6875vw; } }

.col-space-40 {
  padding-top: 40px;
  padding-left: 40px; }
  @media screen and (max-width: 767px) {
    .col-space-40 {
      padding-top: 6.25vw;
      padding-left: 6.25vw; } }

.col-space-50 {
  padding-top: 50px;
  padding-left: 50px; }
  @media screen and (max-width: 767px) {
    .col-space-50 {
      padding-top: 7.8125vw;
      padding-left: 7.8125vw; } }

.col-space-60 {
  padding-top: 60px;
  padding-left: 60px; }
  @media screen and (max-width: 767px) {
    .col-space-60 {
      padding-top: 9.375vw;
      padding-left: 9.375vw; } }

.col-space-70 {
  padding-top: 70px;
  padding-left: 70px; }
  @media screen and (max-width: 767px) {
    .col-space-70 {
      padding-top: 10.9375vw;
      padding-left: 10.9375vw; } }

.col-space-80 {
  padding-top: 80px;
  padding-left: 80px; }
  @media screen and (max-width: 767px) {
    .col-space-80 {
      padding-top: 12.5vw;
      padding-left: 12.5vw; } }

/*----------------------------------------------------------

Clearfix

----------------------------------------------------------*/
.clearfix:after {
  content: ".";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both; }

.clear {
  clear: both; }

/*----------------------------------------------------------

フォント

----------------------------------------------------------*/
/*----------------------------------------------------------

全体

----------------------------------------------------------*/
* {
  box-sizing: border-box; }

html {
  font-size: 62.5%; }

body {
  min-width: 320px;
  overflow-x: hidden;
  font-family: tbchibirgothicplusk-pro, sans-serif;
  font-size: 1.4em;
  line-height: 2; }

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

strong {
  font-weight: bold; }

sup,
sub {
  font-size: 10px;
  height: 0;
  line-height: 1;
  position: relative;
  vertical-align: baseline; }

sup {
  bottom: 1ex; }

sub {
  top: .5ex; }

hr {
  border: none;
  border-top: 1px solid #ddd; }

a {
  color: #ff4496;
  text-decoration: underline;
  -webkit-transition: .5s;
  transition: .5s; }
  a:hover {
    opacity: .7; }

table {
  width: 100%; }

@media screen and (max-width: 767px) {
  .pc-only {
    display: none; } }

.sp-only {
  display: none; }
  @media screen and (max-width: 767px) {
    .sp-only {
      display: block; } }

.container {
  position: relative;
  width: 1300px;
  margin: auto;
  padding: 0 50px; }
  @media screen and (max-width: 1023px) {
    .container {
      width: 90%;
      padding: 0; } }

/*----------------------------------------------------------

ヘッダー

----------------------------------------------------------*/
.header {
  position: relative;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .header {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 200;
      width: 100%;
      background: #fff; } }

.header-logo {
  padding: 15px 0; }
  @media screen and (max-width: 767px) {
    .header-logo {
      padding: 10px 0; } }
  @media screen and (max-width: 767px) {
    .header-logo img {
      width: auto;
      height: 20px; } }

@media screen and (min-width: 798px) {
  .header-navi ul li.special a, .footer-navi ul li.special a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 106px;
    height: 35px;
    padding: 0 0 1px;
    background: #ff4496;
    color: #ffffff;
    border-radius: 8px;
    line-height: 100%; } }

.header-navi {
  padding-bottom: 15px;
  padding-top: 15px; }
  @media screen and (max-width: 767px) {
    .header-navi {
      display: none; } }
  .header-navi ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    @media screen and (max-width: 767px) {
      .header-navi ul {
        display: block;
        border-bottom: 1px solid #ff4496; } }
    .header-navi ul li {
      margin: 0 5%; }
      @media screen and (max-width: 767px) {
        .header-navi ul li {
          margin: 0;
          border-top: 1px solid #ff4496; } }
      .header-navi ul li a {
        color: #ff4496;
        font-size: 21px;
        font-size: 2.1rem;
        text-decoration: none; }
        @media screen and (max-width: 767px) {
          .header-navi ul li a {
            display: block;
            padding: 1em 0;
            font-size: 15px;
            font-size: 1.5rem; } }

.header-trigger {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 300;
  display: none; }
  @media screen and (max-width: 767px) {
    .header-trigger {
      display: block; } }
  .header-trigger a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    height: 40px; }
    .header-trigger a:hover {
      opacity: 1; }
    .header-trigger a span {
      display: block;
      width: 24px;
      height: 2px;
      margin: 5px 0;
      background: #ff4496; }
    .header-trigger a:before {
      content: "";
      display: block;
      width: 24px;
      height: 2px;
      background: #ff4496;
      -webkit-transition: all .4s;
      transition: all .4s; }
    .header-trigger a:after {
      content: "";
      display: block;
      width: 24px;
      height: 2px;
      background: #ff4496;
      -webkit-transition: all .4s;
      transition: all .4s; }
  .header-trigger a:hover {
    opacity: 1; }
  .header-trigger a.is-active {
    opacity: 1; }
    .header-trigger a.is-active span {
      opacity: 0; }
    .header-trigger a.is-active:before {
      -webkit-transform: translateY(7px) rotate(-45deg);
      -ms-transform: translateY(7px) rotate(-45deg);
      transform: translateY(7px) rotate(-45deg); }
    .header-trigger a.is-active:after {
      -webkit-transform: translateY(-7px) rotate(45deg);
      -ms-transform: translateY(-7px) rotate(45deg);
      transform: translateY(-7px) rotate(45deg); }

/*----------------------------------------------------------

メイン

----------------------------------------------------------*/
.main {
  display: block; }
  @media screen and (max-width: 767px) {
    .main {
      padding-top: 48px; } }

/*----------------------------------------------------------

フッター

----------------------------------------------------------*/
.footer {
  font-family: 'HiraginoKakuGothic ProN',Meiryo,'ＭＳＰゴシック','Arial',sans-serif; }

.footer-banner ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: -40px 0 0 -40px; }
  @media screen and (max-width: 767px) {
    .footer-banner ul {
      margin: -3.125vw 0 0 -3.125vw; } }
  .footer-banner ul li {
    width: 33.33333%;
    padding: 40px 0 0 40px; }
    @media screen and (max-width: 767px) {
      .footer-banner ul li {
        width: 50%;
        padding: 3.125vw 0 0 3.125vw; } }

.footer-navi ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center; }
  .footer-navi ul li {
    margin: 0 3%; }
    .footer-navi ul li a {
      color: #ff4496;
      font-family: tbchibirgothicplusk-pro, sans-serif;
      font-size: 21px;
      font-size: 2.1rem;
      text-decoration: none; }

.footer-info {
  text-align: center; }

@media screen and (max-width: 767px) {
  .footer-info-logo {
    padding: 0 10vw; } }

.footer-info-address {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  @media screen and (max-width: 767px) {
    .footer-info-address {
      display: block;
      font-size: 10px;
      font-size: 1rem; } }
  .footer-info-address p:nth-child(1) {
    margin-right: 2em; }
    @media screen and (max-width: 767px) {
      .footer-info-address p:nth-child(1) {
        margin: 0; } }

.footer-copy {
  margin-top: 20px;
  font-size: 11px;
  font-size: 1.1rem;
  text-align: center; }
  @media screen and (max-width: 767px) {
    .footer-copy {
      margin-top: 12.5vw; } }

/*----------------------------------------------------------

ページトップ

----------------------------------------------------------*/
.pagetop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  width: 100px; }
  @media screen and (max-width: 767px) {
    .pagetop {
      bottom: 10vw;
      right: 5vw;
      width: 18.75vw; } }

/*----------------------------------------------------------

アニメーション

----------------------------------------------------------*/
.js-fade {
  opacity: 0;
  -webkit-transition: 1s ease;
  transition: 1s ease; }

.js-fade.is-active {
  opacity: 1; }

.js-fade-up {
  opacity: 0;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: 1s ease;
  transition: 1s ease; }

.js-fade-up.is-active {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px); }

.js-fade-down {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  -webkit-transition: 1s ease;
  transition: 1s ease; }

.js-fade-down.is-active {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px); }

.js-scale-up {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5); }

.js-scale-up.is-active {
  -webkit-animation: scaleup .5s ease forwards;
  animation: scaleup .5s ease forwards; }

@-webkit-keyframes scaleup {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes scaleup {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

.js-float {
  -webkit-animation: float 1.5s ease infinite;
  animation: float 1.5s ease infinite; }

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

.js-float2 {
  -webkit-animation: float2 1.5s ease infinite;
  animation: float2 1.5s ease infinite; }

@-webkit-keyframes float2 {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); } }

@keyframes float2 {
  0% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); }
  50% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  100% {
    -webkit-transform: translateY(5px);
    transform: translateY(5px); } }

.js-incli {
  -webkit-animation: incli 1s ease infinite;
  animation: incli 1s ease infinite; }

@-webkit-keyframes incli {
  0% {
    -webkit-transform: translateY(0) rotate(2deg);
    transform: translateY(0) rotate(2deg); }
  25% {
    -webkit-transform: translateY(-2px) rotate(0);
    transform: translateY(-2px) rotate(0); }
  50% {
    -webkit-transform: translateY(0) rotate(-2deg);
    transform: translateY(0) rotate(-2deg); }
  75% {
    -webkit-transform: translateY(-2px) rotate(0);
    transform: translateY(-2px) rotate(0); }
  100% {
    -webkit-transform: translateY(0) rotate(2deg);
    transform: translateY(0) rotate(2deg); } }

@keyframes incli {
  0% {
    -webkit-transform: translateY(0) rotate(2deg);
    transform: translateY(0) rotate(2deg); }
  25% {
    -webkit-transform: translateY(-2px) rotate(0);
    transform: translateY(-2px) rotate(0); }
  50% {
    -webkit-transform: translateY(0) rotate(-2deg);
    transform: translateY(0) rotate(-2deg); }
  75% {
    -webkit-transform: translateY(-2px) rotate(0);
    transform: translateY(-2px) rotate(0); }
  100% {
    -webkit-transform: translateY(0) rotate(2deg);
    transform: translateY(0) rotate(2deg); } }

/*----------------------------------------------------------

トップ

----------------------------------------------------------*/
.mainvisual {
  position: relative;
  z-index: 1;
  padding: 1.5625vw 5vw 0;
  overflow: hidden;
  background: #ff73a8; }
  @media screen and (max-width: 767px) {
    .mainvisual {
      padding: 0; } }
  .mainvisual:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 16.35416vw;
    background: #ff73a8 url("../images/bg_mv01.png") no-repeat 50% bottom/100% auto; }
    @media screen and (max-width: 767px) {
      .mainvisual:before {
        height: 48vw;
        background: #ff73a8 url("../images/bg_mv01.png") no-repeat 50% bottom/auto 100%; } }

.mainvisual-inner {
  position: relative;
  max-width: 1680px;
  margin: auto; }

.mainvisual-main {
  width: 56.78571%;
  margin: auto; }
  @media screen and (max-width: 767px) {
    .mainvisual-main {
      width: auto; } }

.mainvisual-sub01 {
  position: absolute;
  top: 55.60747%;
  left: 0;
  width: 13.27381%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub01 {
      top: 75.02168%;
      left: 1.73333%;
      width: 14.91333%; } }

.mainvisual-sub02 {
  position: absolute;
  top: 42.28972%;
  left: 18.63095%;
  width: 12.55952%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub02 {
      top: 33.91153%;
      left: 9.06666%;
      width: 20.26666%; } }

.mainvisual-sub03 {
  position: absolute;
  bottom: 0;
  left: 15.05952%;
  width: 6.90476%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub03 {
      display: none; } }

.mainvisual-sub04 {
  position: absolute;
  top: 67.99065%;
  left: 26.72619%;
  width: 7.91666%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub04 {
      display: none; } }

.mainvisual-sub05 {
  position: absolute;
  top: 53.73831%;
  left: 74.64285%;
  width: 10.29761%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub05 {
      display: none; } }

.mainvisual-sub06 {
  position: absolute;
  top: 63.43457%;
  left: 88.03571%;
  width: 6.0119%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub06 {
      display: none; } }

.mainvisual-sub07 {
  position: absolute;
  bottom: 0;
  left: 73.86904%;
  width: 7.08333%; }
  @media screen and (max-width: 767px) {
    .mainvisual-sub07 {
      left: auto;
      right: 0;
      width: 16.8%; } }

#about {
  background: #ff73a8; }

.about-concept {
  padding: 4.16666vw 0 12.5vw;
  text-align: center;
  background: url("../images/bg_about01.jpg") no-repeat 50% top/auto 100%; }

.text-about-concept01 {
  display: inline-block;
  color: #6f2e02;
  font-size: 27px;
  font-size: 2.7rem;
  letter-spacing: 0.08em;
  line-height: 1.8;
  text-align: left; }
  @media screen and (max-width: 767px) {
    .text-about-concept01 {
      font-size: 12px;
      font-size: 1.2rem; } }

.about-main {
  padding: 0 5vw; }

.about-main-inner {
  max-width: 1280px;
  margin: 0 auto; }

.about-main-image {
  position: relative;
  padding-top: 71.5909%; }
  @media screen and (max-width: 767px) {
    .about-main-image {
      padding-top: 79.34508%; } }

.about-main-image-chara {
  position: absolute;
  top: 0;
  left: 0;
  width: 76.02272%; }
  @media screen and (max-width: 767px) {
    .about-main-image-chara {
      width: 86.20037%; } }

.about-main-image-text {
  position: absolute;
  top: 0;
  right: 12.5%;
  width: 35.90909%; }
  @media screen and (max-width: 767px) {
    .about-main-image-text {
      right: 0;
      width: 39.79848%; } }

.about-family-single {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  color: #fff; }

.family01 {
  margin-top: 30px; }
  .family01 .about-family-single {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 780px;
    margin: auto;
    padding-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .family01 .about-family-single {
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: auto;
        margin-left: 0;
        padding-bottom: 4.6875vw; } }
  .family01 .about-family-single-image {
    position: relative;
    width: 410px; }
    @media screen and (max-width: 767px) {
      .family01 .about-family-single-image {
        width: 29.33333vw;
        margin-left: -2.5vw;
        padding-bottom: 4.6875vw; } }
  .family01 .about-family-single-content {
    width: 460px; }
    @media screen and (max-width: 767px) {
      .family01 .about-family-single-content {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
        margin-left: 4.6875vw; } }

.family02 {
  background: #ff9d00; }
  .family02 .about-family-single {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 740px;
    margin-left: 310px;
    padding-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .family02 .about-family-single {
        width: auto;
        margin-left: 0;
        padding: 2.66666vw 0 13.33333vw; } }
  .family02 .about-family-single-image {
    width: 280px;
    margin-top: -40px; }
    @media screen and (max-width: 767px) {
      .family02 .about-family-single-image {
        width: 22.4vw;
        margin-top: 0; } }
  .family02 .about-family-single-content {
    width: 440px; }
    @media screen and (max-width: 767px) {
      .family02 .about-family-single-content {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
        margin-right: 4.6875vw; } }

.family03 {
  background: #45c0f2; }
  .family03 .about-family-single {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 700px;
    margin-left: 180px;
    padding-bottom: 30px; }
    @media screen and (max-width: 767px) {
      .family03 .about-family-single {
        width: auto;
        margin-left: 0;
        padding: 2.66666vw 0 21.33333vw; } }
  .family03 .about-family-single-image {
    width: 300px;
    margin-top: -50px; }
    @media screen and (max-width: 767px) {
      .family03 .about-family-single-image {
        width: 24.53333vw;
        margin: 0; } }
  .family03 .about-family-single-content {
    width: 360px; }
    @media screen and (max-width: 767px) {
      .family03 .about-family-single-content {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        width: auto;
        margin-left: 4.6875vw; } }

.family04 {
  padding: 30px 0 60px; }
  @media screen and (max-width: 767px) {
    .family04 {
      padding: 4vw 0; } }
  .family04 .about-family-single {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 460px; }
    @media screen and (max-width: 767px) {
      .family04 .about-family-single {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0; } }
  .family04 .about-family-single-image {
    width: 212px; }
    @media screen and (max-width: 767px) {
      .family04 .about-family-single-image {
        width: 25.36873%; } }
  .family04 .about-family-single-content {
    margin-left: 25px; }
    @media screen and (max-width: 767px) {
      .family04 .about-family-single-content {
        margin-left: 4vw; } }

.about-family-deco01 {
  position: absolute;
  bottom: -10px;
  left: 30px; }
  @media screen and (max-width: 767px) {
    .about-family-deco01 {
      bottom: 2.66666vw;
      left: 0;
      width: 8vw; } }

.about-family-deco02 {
  position: absolute;
  bottom: 0;
  right: 15px; }
  @media screen and (max-width: 767px) {
    .about-family-deco02 {
      bottom: 2.66666vw;
      right: 0;
      width: 8vw; } }

.about-family-deco03 {
  position: absolute;
  bottom: 65px;
  right: 20px; }
  @media screen and (max-width: 767px) {
    .about-family-deco03 {
      bottom: 2.66666vw;
      right: -2.5vw;
      width: 26.66666vw; } }

.about-family-deco04 {
  position: absolute;
  bottom: 0;
  left: 310px; }
  @media screen and (max-width: 767px) {
    .about-family-deco04 {
      display: none; } }

.text-about-family01 {
  color: #ffff78;
  font-size: 44px;
  font-size: 4.4rem;
  line-height: 1.4; }
  @media screen and (max-width: 767px) {
    .text-about-family01 {
      font-size: 22px;
      font-size: 2.2rem; } }
  .text-about-family01 .small {
    font-size: 63.63636%; }

.text-about-family02 {
  font-size: 18px;
  font-size: 1.8rem; }
  @media screen and (max-width: 767px) {
    .text-about-family02 {
      font-size: 10px;
      font-size: 1rem; } }

.img-family-hero01 {
  margin-left: 20px; }
  @media screen and (max-width: 767px) {
    .img-family-hero01 {
      width: 21.33333vw;
      margin-left: 3.125vw; } }

#anime {
  padding: 50px 0;
  background: #d2e53f; }
  @media screen and (max-width: 767px) {
    #anime {
      padding: 7.8125vw 0; } }

.anime-title {
  position: relative;
  padding-left: 40px; }
  @media screen and (max-width: 767px) {
    .anime-title {
      padding-left: 0; } }

.anime-title-chara {
  position: absolute;
  bottom: 0;
  left: 40px; }
  @media screen and (max-width: 767px) {
    .anime-title-chara {
      position: static;
      max-width: 32vw;
      margin: -15.625vw auto 0; } }

.anime-deco01 {
  position: absolute;
  bottom: -15px;
  right: 21.66666%; }
  @media screen and (max-width: 767px) {
    .anime-deco01 {
      bottom: 0;
      right: 0;
      width: 10.66666vw; } }

.text-anime-lead01 {
  color: #ff4496;
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.6; }
  @media screen and (max-width: 767px) {
    .text-anime-lead01 {
      font-size: 12px;
      font-size: 1.2rem; } }

.img-anime-name01 {
  width: auto;
  height: 32px; }
  @media screen and (max-width: 767px) {
    .img-anime-name01 {
      height: 28px; } }

.anime-youtube {
  position: relative;
  padding-top: 56.25%;
  background: #fff; }
  .anime-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.deco-frame {
  background: url("../images/bg_deco_frame01.png") no-repeat 50% 50%; }
  @media screen and (max-width: 767px) {
    .deco-frame {
      background: transparent; } }

#manga {
  padding: 30px 0;
  background: #ffc47c; }
  @media screen and (max-width: 767px) {
    #manga {
      padding: 9.375vw 0 4.6875vw; } }

.manga-title {
  position: relative; }

.list-manga01 {
  padding-bottom: 200px; }
  @media screen and (max-width: 767px) {
    .list-manga01 {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: -5vw 0 0 -5vw;
      padding-bottom: 31.25vw; } }
  .list-manga01 li {
    padding: 0 50px; }
    @media screen and (max-width: 767px) {
      .list-manga01 li {
        width: 50%;
        margin-bottom: 5vw;
        padding: 5vw 0 0 5vw; } }
  .list-manga01 .slick-prev {
    top: auto;
    bottom: 100px;
    left: 50%;
    width: 92px;
    height: 23px;
    background: url("../images/img_manga_prev01.png") no-repeat 50% 50%/cover;
    -webkit-transform: translate(-122px, 0);
    -ms-transform: translate(-122px, 0);
    transform: translate(-122px, 0); }
    .list-manga01 .slick-prev:hover, .list-manga01 .slick-prev:focus {
      background: url("../images/img_manga_prev01.png") no-repeat 50% 50%/cover; }
    .list-manga01 .slick-prev:before {
      display: none; }
  .list-manga01 .slick-next {
    top: auto;
    bottom: 100px;
    right: 50%;
    width: 92px;
    height: 23px;
    background: url("../images/img_manga_next01.png") no-repeat 50% 50%/cover;
    -webkit-transform: translate(122px, 0);
    -ms-transform: translate(122px, 0);
    transform: translate(122px, 0); }
    .list-manga01 .slick-next:hover, .list-manga01 .slick-next:focus {
      background: url("../images/img_manga_next01.png") no-repeat 50% 50%/cover; }
    .list-manga01 .slick-next:before {
      display: none; }

.img-manga-name01 {
  display: inline-block !important;
  width: auto;
  height: 72px; }
  @media screen and (max-width: 767px) {
    .img-manga-name01 {
      height: 16vw; } }

.img-manga-download01 {
  display: inline-block !important;
  width: auto;
  height: 20px; }
  @media screen and (max-width: 767px) {
    .img-manga-download01 {
      height: 4.26666vw; } }

.manga-deco01 {
  position: absolute;
  top: -45px;
  right: 0; }
  @media screen and (max-width: 767px) {
    .manga-deco01 {
      top: -14.0625vw;
      right: 0;
      width: 16vw; } }

.manga-deco02 {
  position: absolute;
  bottom: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%); }
  @media screen and (max-width: 767px) {
    .manga-deco02 {
      bottom: -9.375vw;
      width: 32vw; } }

.manga-deco03 {
  position: absolute;
  bottom: -70px;
  right: 80px; }
  @media screen and (max-width: 767px) {
    .manga-deco03 {
      bottom: 8vw;
      right: 0;
      width: 16vw; } }

.what-wrap {
  position: relative;
  z-index: 1;
  overflow: hidden; }
  @media screen and (max-width: 767px) {
    .what-wrap {
      padding-top: 4.6875vw;
      background: #e79be5; } }
  .what-wrap:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 50%;
    background: #e79be5; }

.what-chara {
  max-width: 730px;
  margin-left: auto; }
  @media screen and (max-width: 767px) {
    .what-chara {
      max-width: 64vw;
      margin: auto; } }
  .what-chara > div {
    position: relative;
    padding-top: 62.32876%; }

.what-chara-image {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 61.64383%; }

.what-chara-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 84.9315%; }

.what-deco01 {
  position: absolute;
  bottom: 215px;
  left: 105px;
  width: 175px; }
  @media screen and (max-width: 767px) {
    .what-deco01 {
      bottom: 9.33333vw;
      left: 0;
      width: 8vw; } }

.js-chara-image {
  opacity: 0;
  -webkit-transform: translateY(60px);
  -ms-transform: translateY(60px);
  transform: translateY(60px);
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease; }

.js-chara-image.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); }

.js-chara-text {
  opacity: 0;
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5); }

.js-chara-text.is-active {
  -webkit-animation: charaText .5s ease .4s forwards;
  animation: charaText .5s ease .4s forwards; }

@-webkit-keyframes charaText {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes charaText {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.5);
    transform: scale(0.5); }
  50% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1); } }

/*----------------------------------------------------------

特別篇

----------------------------------------------------------*/
.special-banner {
  text-align: center;
  padding: 25px 0;
  max-width: 96%; }
  @media screen and (max-width: 767px) {
    .special-banner img {
      width: 100%;
      height: auto; } }

#special {
  padding: 50px 0;
  background: #6FE1FF; }
  @media screen and (max-width: 767px) {
    #special {
      padding: 7.8125vw 0; } }
  #special .text-special-contents {
    display: inline-block;
    color: #6f2e02;
    font-size: 27px;
    font-size: 2.7rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
    text-align: left;
    margin-bottom: 2.5em; }
    @media screen and (max-width: 767px) {
      #special .text-special-contents {
        font-size: 12px;
        font-size: 1.2rem; } }
  #special .img-special-contents-item {
    position: absolute; }
    #special .img-special-contents-item01 {
      width: 210px;
      height: 201px;
      left: 705px;
      top: 258px; }
      @media screen and (max-width: 767px) {
        #special .img-special-contents-item01 {
          width: 16vw;
          height: auto;
          left: 51vw;
          top: 40vw; } }
    #special .img-special-contents-item02 {
      width: 306px;
      height: 327px;
      left: 947px;
      top: 239px; }
      @media screen and (max-width: 767px) {
        #special .img-special-contents-item02 {
          width: 21vw;
          height: auto;
          left: 70vw;
          top: 21vw; } }