@charset "UTF-8";
/* line 19, ../scss/variables.scss */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* line 25, ../scss/variables.scss */
.clear-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* line 32, ../scss/variables.scss */
.align-center {
  align-items: center;
}

/* line 5, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

/* line 22, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1;
}

/* line 24, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none;
}

/* line 26, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 28, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

/* line 30, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none;
}
/* line 103, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

/* line 32, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none;
}

/* line 116, ../../../../../../../../Ruby24-x64/lib/ruby/gems/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

/* line 10, ../scss/style.scss */
.center {
  text-align: center;
  margin: 0 auto;
}

/* line 15, ../scss/style.scss */
body {
  font-family: "Segoe UI", SegoeUI, "Microsoft JhengHei", 微軟正黑體, "Helvetica Neue", Helvetica, Arial, sans-serif;
  height: 100%;
  width: 100%;
}

/* line 21, ../scss/style.scss */
a {
  transition: 0.3s;
}
/* line 23, ../scss/style.scss */
a:hover {
  opacity: 0.8;
  transition: 0.3s;
}

/* line 29, ../scss/style.scss */
#page-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 91;
}
@media screen and (max-width: 768px) {
  /* line 29, ../scss/style.scss */
  #page-top {
    bottom: 10px;
    right: 10px;
    transform: scale(0.8, 0.8);
  }
}

/* line 41, ../scss/style.scss */
#page-top a {
  display: block;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

/* line 50, ../scss/style.scss */
#page-top a:hover {
  opacity: 0.8;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

/*----------------
    index
    ------------*/
/* line 62, ../scss/style.scss */
#wrap {
  width: 100%;
  transition: 0.3s;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
  background: url("../images/bg-filter.png") repeat top left;
}

/* line 71, ../scss/style.scss */
.inner {
  width: 1100px;
  margin: 0 auto;
}
@media screen and (max-width: 1100px) {
  /* line 71, ../scss/style.scss */
  .inner {
    width: 100%;
    padding: 0 10px;
  }
}

/* line 80, ../scss/style.scss */
section {
  padding: 45px 0 35px;
}
@media screen and (max-width: 768px) {
  /* line 80, ../scss/style.scss */
  section {
    padding: 45px 10px 35px;
  }
}
/* line 86, ../scss/style.scss */
section .sp-mds {
  padding-bottom: 20px;
}

/* line 91, ../scss/style.scss */
section#main {
  padding: 0;
}
/* line 93, ../scss/style.scss */
section#main div.inner {
  padding: 65px 0 0;
  position: relative;
}
@media screen and (max-width: 768px) {
  /* line 93, ../scss/style.scss */
  section#main div.inner {
    padding: 10px 10px 0;
  }
}
/* line 99, ../scss/style.scss */
section#main div.inner:before {
  content: url("../images/header-logo-pc.webp");
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 768px) {
  /* line 99, ../scss/style.scss */
  section#main div.inner:before {
    right: auto;
    left: 10px;
  }
}
/* line 109, ../scss/style.scss */
section#main div.inner div.language {
  z-index: 3;
  position: relative;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  /* line 109, ../scss/style.scss */
  section#main div.inner div.language {
    padding-bottom: 20px;
  }
}
/* line 118, ../scss/style.scss */
section#main div.inner div.language img {
  width: auto;
  backdrop-filter: blur(3px);
  display: block;
}
/* line 124, ../scss/style.scss */
section#main div.inner h1 {
  text-align: right;
}
/* line 126, ../scss/style.scss */
section#main div.inner h1 img {
  width: auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  /* line 126, ../scss/style.scss */
  section#main div.inner h1 img {
    width: 100%;
  }
}
/* line 134, ../scss/style.scss */
section#main div.inner h1 img.main-txt-pc {
  width: 78%;
}
/* line 137, ../scss/style.scss */
section#main div.inner h1 div.ebizou {
  position: absolute;
  top: 0;
  right: 53%;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  /* line 137, ../scss/style.scss */
  section#main div.inner h1 div.ebizou {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  /* line 145, ../scss/style.scss */
  section#main div.inner h1 div.ebizou img {
    transform: scale(0.8);
    transform-origin: top right;
  }
}
@media screen and (min-width: 1040px) {
  /* line 145, ../scss/style.scss */
  section#main div.inner h1 div.ebizou img {
    transform: scale(1.05);
    transform-origin: top;
  }
}

/* line 160, ../scss/style.scss */
section#main-movie {
  text-align: center;
  justify-content: center;
}

/* line 165, ../scss/style.scss */
section#story {
  text-align: center;
}
@media screen and (max-width: 768px) {
  /* line 165, ../scss/style.scss */
  section#story {
    padding-top: 20px;
  }
}
/* line 170, ../scss/style.scss */
section#story img {
  width: auto;
}
@media screen and (max-width: 768px) {
  /* line 170, ../scss/style.scss */
  section#story img {
    width: 100%;
  }
}

/* line 178, ../scss/style.scss */
section#character {
  text-align: center;
}
@media screen and (max-width: 768px) {
  /* line 178, ../scss/style.scss */
  section#character {
    padding-top: 20px;
  }
}
/* line 183, ../scss/style.scss */
section#character h2 {
  position: relative;
}
/* line 185, ../scss/style.scss */
section#character h2 img {
  width: auto;
}
@media screen and (max-width: 768px) {
  /* line 185, ../scss/style.scss */
  section#character h2 img {
    width: 100%;
  }
}
/* line 191, ../scss/style.scss */
section#character h2 div.more {
  position: absolute;
  left: 60px;
  bottom: 0;
}
@media screen and (max-width: 768px) {
  /* line 191, ../scss/style.scss */
  section#character h2 div.more {
    position: static;
  }
}

/* line 200, ../scss/style.scss */
section#system {
  text-align: center;
}
/* line 202, ../scss/style.scss */
section#system img {
  width: auto;
}
@media screen and (max-width: 768px) {
  /* line 202, ../scss/style.scss */
  section#system img {
    width: 100%;
  }
}
/* line 209, ../scss/style.scss */
section#system div {
  padding: 20px 0;
}
/* line 211, ../scss/style.scss */
section#system div img.desc {
  text-align: left;
}

/* line 217, ../scss/style.scss */
section#product {
  padding: 40px 0 70px;
}

/* line 221, ../scss/style.scss */
section#sub-character {
  padding: 10px 0 70px;
}
/* line 223, ../scss/style.scss */
section#sub-character h1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  /* line 223, ../scss/style.scss */
  section#sub-character h1 {
    flex-direction: column;
    padding-bottom: 0px;
  }
}
/* line 231, ../scss/style.scss */
section#sub-character h1 img {
  width: auto;
}
@media screen and (max-width: 768px) {
  /* line 231, ../scss/style.scss */
  section#sub-character h1 img {
    width: auto !important;
  }
}
/* line 238, ../scss/style.scss */
section#sub-character div.language {
  z-index: 3;
  position: relative;
  margin-right: 10px;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 768px) {
  /* line 238, ../scss/style.scss */
  section#sub-character div.language {
    padding: 20px 0 40px;
    justify-content: center;
    margin-right: 0;
  }
}
/* line 249, ../scss/style.scss */
section#sub-character div.language img {
  width: auto;
  backdrop-filter: blur(3px);
  display: block;
}
/* line 257, ../scss/style.scss */
section#sub-character div img {
  width: auto;
}
@media screen and (max-width: 768px) {
  /* line 257, ../scss/style.scss */
  section#sub-character div img {
    width: 100%;
  }
}
/* line 265, ../scss/style.scss */
section#sub-character div.character-box {
  padding: 10px 0;
}
@media screen and (max-width: 768px) {
  /* line 265, ../scss/style.scss */
  section#sub-character div.character-box {
    padding: 20px 0;
  }
}
/* line 271, ../scss/style.scss */
section#sub-character div.left {
  text-align: left;
}
@media screen and (max-width: 768px) {
  /* line 271, ../scss/style.scss */
  section#sub-character div.left {
    text-align: center;
  }
}
/* line 277, ../scss/style.scss */
section#sub-character div.right {
  text-align: right;
}
@media screen and (max-width: 768px) {
  /* line 277, ../scss/style.scss */
  section#sub-character div.right {
    text-align: center;
  }
}

/* line 286, ../scss/style.scss */
footer ul.sns {
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  /* line 286, ../scss/style.scss */
  footer ul.sns {
    flex-wrap: wrap;
  }
}
/* line 292, ../scss/style.scss */
footer ul.sns li {
  padding: 0 5px;
}
@media screen and (max-width: 768px) {
  /* line 292, ../scss/style.scss */
  footer ul.sns li {
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
  /* line 298, ../scss/style.scss */
  footer ul.sns li img {
    width: auto;
  }
}
/* line 305, ../scss/style.scss */
footer div.marks {
  line-height: 2;
  padding: 100px 0 0;
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  /* line 305, ../scss/style.scss */
  footer div.marks {
    font-size: 13px;
    text-align: left;
  }
}
/* line 316, ../scss/style.scss */
footer div.caution {
  line-height: 2;
  padding: 70px 0 150px;
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  /* line 316, ../scss/style.scss */
  footer div.caution {
    font-size: 13px;
    text-align: left;
  }
}

/* line 328, ../scss/style.scss */
section#movie {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -1;
}
/* line 338, ../scss/style.scss */
section#movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*
          width: 177.77777778vh;
          height: 56.25vw;
  */
  min-height: 100%;
  min-width: 100%;
}