@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap);
body {
  background-color: #121619;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-size: 12pt;
}

body img {
  max-width: 100%;
  max-height: 100%;
}

header {
  width: 100%;
  max-width: 640px;
  margin: auto;
  -webkit-transform: translateY(-12vw);
          transform: translateY(-12vw);
  margin-bottom: -13vw;
  position: relative;
}

@media (min-width: 640px) {
  header {
    -webkit-transform: translateY(-80px);
            transform: translateY(-80px);
    margin-bottom: -87px;
  }
}

header h1 {
  position: absolute;
  top: 17vw;
  width: 65vw;
  max-width: 443px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 10;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  header h1 {
    top: 12%;
  }
}

header .key_visual {
  display: block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  z-index: 1;
}

header .catch_copy_right {
  position: absolute;
  top: 29%;
  width: 11.9vw;
  max-width: 80px;
  right: 0;
  z-index: 2;
}

header .catch_copy_left {
  position: absolute;
  width: 11.9vw;
  max-width: 80px;
  top: 49%;
  left: 0;
  z-index: 2;
}

header .catch_copy_center {
  position: absolute;
  width: 44vw;
  max-width: 293px;
  bottom: 5vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 2;
}

@media (min-width: 640px) {
  header .catch_copy_center {
    bottom: 3.8%;
  }
}

.movie_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
  height: 108vw;
}

@media (min-width: 640px) {
  .movie_content {
    padding-top: 65px;
  }
}

@media (min-width: 640px) {
  .movie_content {
    height: 700px;
  }
}

.movie_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 60vw;
  max-width: 404px;
  z-index: 3;
}

@media (min-width: 640px) {
  .movie_content .title {
    margin-bottom: 20px;
  }
}

.movie_content .movie {
  display: block;
  text-align: center;
  margin: auto;
  position: relative;
  width: 90vw;
  max-width: 606px;
  z-index: 2;
}

.movie_content .movie .play {
  position: relative;
  padding-top: 50.6vw;
}

@media (min-width: 640px) {
  .movie_content .movie .play {
    padding-top: 53.1%;
  }
}

.movie_content .movie .play iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.movie_content .movie .pv iframe {
  position: absolute;
  top: 55vw;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

@media (min-width: 640px) {
  .movie_content .movie .pv iframe {
    top: 110%;
  }
}

.synchro_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
}

@media (min-width: 640px) {
  .synchro_content {
    padding-top: 65px;
  }
}

.synchro_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: -0.7vw;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
}

@media (min-width: 640px) {
  .synchro_content .title {
    margin-bottom: -7px;
  }
}

.synchro_content .number {
  position: absolute;
  width: 30vw;
  max-width: 200px;
  top: 8vw;
  left: -4.2vw;
  z-index: 2;
}

@media (min-width: 640px) {
  .synchro_content .number {
    top: 45px;
    left: -28px;
  }
}

.synchro_content .bg_image {
  position: absolute;
  top: 33%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100vw;
  height: 50%;
  overflow-x: hidden;
}

.synchro_content .bg_image img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-5%);
          transform: translateX(-5%);
  z-index: 1;
}

.synchro_content .sub_title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 85vw;
  max-width: 560px;
  z-index: 2;
}

@media (min-width: 640px) {
  .synchro_content .sub_title {
    margin-bottom: 20px;
  }
}

.synchro_content .image {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
  margin-top: -3.6vw;
  margin-bottom: -3.6vw;
}

@media (min-width: 640px) {
  .synchro_content .image {
    margin-top: -30px;
    margin-bottom: -30px;
  }
}

.synchro_content .image2 {
  position: relative;
  display: inline-block;
  text-align: left;
  margin: 0px;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  padding-top: 10vw;
  width: 45vw;
  max-width: 300px;
  z-index: 2;
}

@media (min-width: 640px) {
  .synchro_content .image2 {
    margin-left: 4px;
    margin-right: 8px;
    padding-top: 60px;
  }
}

.synchro_content .image3 {
  position: relative;
  display: inline-block;
  text-align: right;
  margin: 0px;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  padding-top: 10vw;
  width: 45vw;
  max-width: 300px;
  z-index: 2;
}

@media (min-width: 640px) {
  .synchro_content .image3 {
    margin-left: 8px;
    margin-right: 4px;
    padding-top: 60px;
  }
}

.synchro_content .description {
  width: 100%;
  max-width: 640px;
  background: url(../images/text_border.png) no-repeat center;
  background-size: contain;
}

.synchro_content .description p {
  line-height: 1.8em;
  margin-bottom: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 4.1vw;
  text-align: left;
  margin-left: 7vw;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .synchro_content .description p {
    font-size: 1.6em;
    margin-left: 56px;
  }
}

.intuitive_action_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
}

@media (min-width: 640px) {
  .intuitive_action_content {
    padding-top: 65px;
  }
}

.intuitive_action_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: -0.7vw;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
}

@media (min-width: 640px) {
  .intuitive_action_content .title {
    margin-bottom: -7px;
  }
}

.intuitive_action_content .number {
  position: absolute;
  width: 30vw;
  max-width: 200px;
  top: 8vw;
  left: -4.2vw;
  z-index: 2;
}

@media (min-width: 640px) {
  .intuitive_action_content .number {
    top: 45px;
    left: -28px;
  }
}

.intuitive_action_content .bg_image {
  position: absolute;
  top: 8%;
  left: 0;
  width: 100vw;
  max-width: 640px;
  -webkit-transform: translateX(-10%);
          transform: translateX(-10%);
  z-index: 1;
}

.intuitive_action_content .sub_title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 85vw;
  max-width: 560px;
  z-index: 2;
  padding-bottom: 28vw;
}

@media (min-width: 640px) {
  .intuitive_action_content .sub_title {
    margin-bottom: 20px;
  }
}

@media (min-width: 640px) {
  .intuitive_action_content .sub_title {
    padding-bottom: 28%;
  }
}

.intuitive_action_content .image {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
}

.intuitive_action_content .images {
  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;
}

.intuitive_action_content .images .image2, .intuitive_action_content .images .image3 {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 42vw;
  margin: 0 4vw;
  z-index: 2;
}

@media (min-width: 640px) {
  .intuitive_action_content .images .image2, .intuitive_action_content .images .image3 {
    margin: 0 26px;
    width: 275px;
  }
}

.intuitive_action_content .images .image3 {
  margin-left: 0;
}

.intuitive_action_content .description {
  width: 100%;
  max-width: 640px;
  background: url(../images/text_border.png) no-repeat center;
  background-size: contain;
}

.intuitive_action_content .description p {
  line-height: 1.8em;
  margin-bottom: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 4.1vw;
  text-align: left;
  margin-left: 7vw;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .intuitive_action_content .description p {
    font-size: 1.6em;
    margin-left: 56px;
  }
}

.facial_expression_battle_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
}

@media (min-width: 640px) {
  .facial_expression_battle_content {
    padding-top: 65px;
  }
}

@media (min-width: 640px) {
  .facial_expression_battle_content {
    overflow-x: visible;
  }
}

.facial_expression_battle_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: -0.7vw;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
}

@media (min-width: 640px) {
  .facial_expression_battle_content .title {
    margin-bottom: -7px;
  }
}

.facial_expression_battle_content .number {
  position: absolute;
  width: 30vw;
  max-width: 200px;
  top: 8vw;
  left: -4.2vw;
  z-index: 2;
}

@media (min-width: 640px) {
  .facial_expression_battle_content .number {
    top: 45px;
    left: -28px;
  }
}

.facial_expression_battle_content .bg_image {
  position: absolute;
  top: -16%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  max-height: 785px;
  overflow-x: hidden;
}

.facial_expression_battle_content .bg_image img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  z-index: 1;
}

.facial_expression_battle_content .sub_title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 85vw;
  max-width: 560px;
  z-index: 2;
}

@media (min-width: 640px) {
  .facial_expression_battle_content .sub_title {
    margin-bottom: 20px;
  }
}

.facial_expression_battle_content .image {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  width: 90vw;
  max-width: 600px;
  z-index: 2;
}

.facial_expression_battle_content .description {
  width: 100%;
  max-width: 640px;
  background: url(../images/text_border.png) no-repeat center;
  background-size: contain;
}

.facial_expression_battle_content .description p {
  line-height: 1.8em;
  margin-bottom: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 4.1vw;
  text-align: left;
  margin-left: 7vw;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .facial_expression_battle_content .description p {
    font-size: 1.6em;
    margin-left: 56px;
  }
}

.share_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
  padding-top: 20vw;
}

@media (min-width: 640px) {
  .share_content {
    padding-top: 65px;
  }
}

@media (min-width: 640px) {
  .share_content {
    padding-top: 130px;
  }
}

.share_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 60vw;
  max-width: 404px;
  z-index: 3;
}

@media (min-width: 640px) {
  .share_content .title {
    margin-bottom: 20px;
  }
}

.share_content .icons {
  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;
}

.share_content .icons .facebook, .share_content .icons .twitter, .share_content .icons .line {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28vw;
  margin: 0 1vw;
}

@media (min-width: 640px) {
  .share_content .icons .facebook, .share_content .icons .twitter, .share_content .icons .line {
    width: 28%;
    margin: 0 7px;
  }
}

.spec_content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
}

@media (min-width: 640px) {
  .spec_content {
    padding-top: 65px;
  }
}

.spec_content .title {
  position: relative;
  display: block;
  text-align: center;
  margin: auto;
  margin-bottom: 3vw;
  width: 60vw;
  max-width: 404px;
  z-index: 3;
}

@media (min-width: 640px) {
  .spec_content .title {
    margin-bottom: 20px;
  }
}

.spec_content .spec_container {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 16vw;
}

@media (min-width: 640px) {
  .spec_content .spec_container {
    padding-bottom: 16%;
  }
}

.spec_content .spec_container .icon_image {
  position: relative;
  width: 25%;
}

.spec_content .spec_container .spec {
  left: 25%;
  width: 70%;
  padding-left: 2.5%;
  padding-right: 2.5%;
  overflow: hidden;
}

.spec_content .spec_container .spec p {
  margin: 0;
  padding: 0;
  line-height: 1.6em;
  margin-bottom: 0;
  font-family: 'Noto Serif JP', serif;
  font-size: 3.7vw;
  text-align: left;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .spec_content .spec_container .spec p {
    font-size: 1.5em;
  }
}

.spec_content .spec_container .spec .terminal {
  padding-top: 1em;
  padding-left: 1em;
  text-indent: -1em;
}

.information {
  width: 100%;
  max-width: 640px;
  margin: auto;
  padding-top: 10vw;
  position: relative;
  background: url(../images/bg.png) repeat center;
  padding-top: 0;
  padding-bottom: 5vw;
  font-family: 'Noto Sans JP', sans-serif;
  color: #FFFFFF;
}

@media (min-width: 640px) {
  .information {
    padding-top: 65px;
  }
}

@media (min-width: 640px) {
  .information {
    padding-top: 0;
    padding-bottom: 40px;
  }
}

.information p {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 2.5vw;
}

@media (min-width: 640px) {
  .information p {
    font-size: 1em;
  }
}

.information .info_button {
  position: relative;
  margin: auto;
  margin-top: 2vw;
  margin-bottom: 2vw;
  background: url(../images/info_button.png) no-repeat center;
  height: 24vw;
  width: 90%;
  text-align: center;
}

@media (min-width: 640px) {
  .information .info_button {
    margin-top: 15px;
    margin-bottom: 15px;
    height: 156px;
  }
}

.information .info_button a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  z-index: 2;
}

.information .info_button .title {
  position: absolute;
  margin: 0;
  margin-top: 5.5vw;
  padding-bottom: 0;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: 6.2vw;
  font-weight: bold;
}

@media (min-width: 640px) {
  .information .info_button .title {
    margin-top: 32px;
    font-size: 2.5em;
  }
}

.information .info_button p {
  position: absolute;
  margin: 0;
  padding-bottom: 0;
  width: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin-top: 13.5vw;
  font-size: 3vw;
  font-weight: 100;
}

@media (min-width: 640px) {
  .information .info_button p {
    margin-top: 84px;
    font-size: 1.25em;
  }
}

.information .info_main {
  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;
}

.information .info_main .terms_of_service, .information .info_main .privacy_policy, .information .info_main .contact_us {
  padding: 0 2vw;
  font-size: 3vw;
}

@media (min-width: 640px) {
  .information .info_main .terms_of_service, .information .info_main .privacy_policy, .information .info_main .contact_us {
    padding: 0 15px;
    font-size: 1.25em;
  }
}

.information .info_main a {
  text-decoration: none;
  color: #FFFFFF;
}

.information .info_main .terms_of_service, .information .info_main .privacy_policy {
  border-right: solid 1px #FFFFFF;
}

footer {
  background-color: #000000;
}

footer .company_icon {
  display: block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 40vw;
  padding-top: 8vw;
  padding-bottom: 8vw;
}

@media (min-width: 640px) {
  footer .company_icon {
    width: 247px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

footer .cube_banner {
  display: block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 90vw;
  padding: 0;
}

@media (min-width: 640px) {
  footer .cube_banner {
    width: 580px;
  }
}

footer .copyright {
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 100;
  font-size: 2.5vw;
  padding-bottom: 3vw;
}

@media (min-width: 640px) {
  footer .copyright {
    font-size: 1em;
    padding-bottom: 20px;
  }
}