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

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

nav {
  position: fixed;
  width: 100%;
  max-width: 640px;
  margin: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 11;
}

nav .navigation-menu {
  position: absolute;
  right: 0;
}

nav .navigation-menu.open span {
  background: transparent;
}

nav .navigation-menu.open span::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}

nav .navigation-menu.open span::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}

nav .navigation-menu.open .menu {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

nav .hamburger {
  margin-top: 3.5vw;
  margin-right: 3.5vw;
  width: 6vw;
  height: 6vw;
  position: relative;
  cursor: pointer;
}

@media (min-width: 640px) {
  nav .hamburger {
    margin-top: 22.4px;
    margin-right: 22.4px;
    width: 30px;
    height: 30px;
  }
}

nav .hamburger span, nav .hamburger span::before, nav .hamburger span::after {
  position: absolute;
  width: 100%;
  height: 5px;
  background: #808080;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

nav .hamburger span {
  top: 10px;
}

nav .hamburger span::before {
  content: "";
  top: -10px;
}

nav .hamburger span::after {
  content: "";
  top: 10px;
}

nav .menu {
  position: absolute;
  top: 11.9vw;
  right: 0px;
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  z-index: 10;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  width: 47vw;
  max-width: 90vw;
  height: calc(100vh - 40px);
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
}

@media (min-width: 640px) {
  nav .menu {
    top: 72px;
    width: 300px;
  }
}

nav .menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .menu ul li {
  font-size: 3vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

@media (min-width: 640px) {
  nav .menu ul li {
    font-size: 1.2em;
  }
}

nav .menu ul li:hover {
  background: rgba(255, 255, 255, 0.3);
}

nav .menu ul li a {
  display: block;
  text-decoration: none;
  color: #fff;
  padding: 0.5em 1em;
}

header {
  position: fixed;
  background-color: #181b2e;
  z-index: 10;
  width: 100%;
}

header .content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-top: 0;
}

header .content img {
  height: 6vw;
  padding: 2.5vw 0 2.5vw 2.5vw;
}

@media (min-width: 640px) {
  header .content img {
    height: 38.4px;
    padding: 15px 0 15px 15px;
  }
}

.arrow {
  position: fixed;
  width: 100%;
  max-width: 640px;
  margin: auto;
  bottom: 18vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 11;
}

@media (min-width: 640px) {
  .arrow {
    bottom: 15%;
  }
}

.arrow .content {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5vw;
  width: 10vw;
}

@media (min-width: 640px) {
  .arrow .content {
    width: 64px;
    padding: 32px;
  }
}

.home {
  background-color: #181b2e;
}

.home .content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
  padding-top: 25vw;
}

@media (min-width: 640px) {
  .home .content {
    padding-bottom: 76.8px;
  }
}

@media (min-width: 640px) {
  .home .content {
    padding-top: 160px;
  }
}

.home .content .top {
  margin-left: auto;
  margin-bottom: 8vw;
  width: 92vw;
}

@media (min-width: 640px) {
  .home .content .top {
    width: 589px;
    margin-bottom: 52px;
  }
}

.home .content .para {
  margin: auto;
  margin-bottom: 5vw;
  width: 90vw;
}

@media (min-width: 640px) {
  .home .content .para {
    margin-bottom: 32px;
    width: 575px;
  }
}

.home .content .button {
  margin: auto;
  padding-bottom: 15vw;
  width: 70vw;
}

@media (min-width: 640px) {
  .home .content .button {
    padding-bottom: 96px;
    width: 448px;
  }
}

.experience {
  background-color: #181b2e;
}

.experience .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
}

@media (min-width: 640px) {
  .experience .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .experience .content {
    padding-bottom: 76.8px;
  }
}

.experience .content .title {
  margin: auto;
  width: 70vw;
}

@media (min-width: 640px) {
  .experience .content .title {
    width: 448px;
  }
}

.experience .content .image {
  margin: 10vw 0;
  width: 100%;
}

@media (min-width: 640px) {
  .experience .content .image {
    margin: 64px 0;
    width: 640px;
  }
}

.experience .content .mid_content {
  margin: auto;
  width: 70vw;
}

@media (min-width: 640px) {
  .experience .content .mid_content {
    width: 448px;
  }
}

.feature {
  background-color: #01c8ff;
}

.feature .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
}

@media (min-width: 640px) {
  .feature .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .feature .content {
    padding-bottom: 76.8px;
  }
}

.feature .content .title {
  padding-top: 8vw;
  padding-bottom: 5vw;
  margin: auto;
  width: 50vw;
}

@media (min-width: 640px) {
  .feature .content .title {
    padding-top: 51px;
    padding-bottom: 32px;
    width: 320px;
  }
}

.feature .content .image {
  margin: auto;
  margin-top: 3vw;
  margin-bottom: 0;
  width: 90vw;
}

@media (min-width: 640px) {
  .feature .content .image {
    margin-top: 20px;
    width: 576px;
  }
}

.feature .content .button {
  margin-top: 3vw;
  margin: auto;
  margin-bottom: 5vw;
  width: 70vw;
}

@media (min-width: 640px) {
  .feature .content .button {
    margin-top: 20px;
    margin-bottom: 32px;
    width: 448px;
  }
}

.request_top {
  background-color: #FFFFFF;
}

.request_top .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-top: 15vw;
}

@media (min-width: 640px) {
  .request_top .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .request_top .content {
    padding-top: 96px;
  }
}

.request_top .content .para {
  margin: auto;
  padding-bottom: 15vw;
  width: 80vw;
}

@media (min-width: 640px) {
  .request_top .content .para {
    padding-bottom: 96px;
    width: 512px;
  }
}

.request_bottom {
  background-color: #01c8ff;
}

.request_bottom .content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
  padding-top: 15vw;
}

@media (min-width: 640px) {
  .request_bottom .content {
    padding-bottom: 76.8px;
  }
}

@media (min-width: 640px) {
  .request_bottom .content {
    padding-top: 96px;
  }
}

.request_bottom .content .para {
  margin: auto;
  padding-bottom: 10vw;
  width: 80vw;
}

@media (min-width: 640px) {
  .request_bottom .content .para {
    padding-bottom: 64px;
    width: 512px;
  }
}

.request_bottom .content .button {
  margin: auto;
  margin-bottom: 5vw;
  width: 70vw;
}

@media (min-width: 640px) {
  .request_bottom .content .button {
    margin-bottom: 32px;
    width: 448px;
  }
}

.consultation {
  background-color: #181b2e;
}

.consultation .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
  padding-top: 15vw;
}

@media (min-width: 640px) {
  .consultation .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .consultation .content {
    padding-bottom: 76.8px;
  }
}

@media (min-width: 640px) {
  .consultation .content {
    padding-top: 96px;
  }
}

.consultation .content .para {
  margin: auto;
  width: 80vw;
}

@media (min-width: 640px) {
  .consultation .content .para {
    width: 512px;
  }
}

.details {
  background-color: #01c8ff;
}

.details .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-bottom: 12vw;
}

@media (min-width: 640px) {
  .details .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .details .content {
    padding-bottom: 76.8px;
  }
}

.details .content .title {
  padding-top: 8vw;
  padding-bottom: 5vw;
  margin: auto;
  width: 35vw;
}

@media (min-width: 640px) {
  .details .content .title {
    padding-top: 51px;
    padding-bottom: 32px;
    width: 224px;
  }
}

.details .content .image {
  margin: auto;
  margin-top: 3vw;
  margin-bottom: 0;
  width: 90vw;
}

@media (min-width: 640px) {
  .details .content .image {
    margin-top: 20px;
    width: 576px;
  }
}

.specification {
  background-color: #FFFFFF;
}

.specification .content {
  padding-top: 12vw;
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
  padding-top: 15vw;
}

@media (min-width: 640px) {
  .specification .content {
    padding-top: 76.8px;
  }
}

@media (min-width: 640px) {
  .specification .content {
    padding-top: 96px;
  }
}

.specification .content .title {
  margin: auto;
  width: 35vw;
}

@media (min-width: 640px) {
  .specification .content .title {
    width: 224px;
  }
}

.specification .content .para {
  font-size: 3vw;
  text-align: center;
}

@media (min-width: 640px) {
  .specification .content .para {
    font-size: 1.2em;
  }
}

.specification .content .button {
  margin: auto;
  margin-bottom: 5vw;
  width: 70vw;
}

@media (min-width: 640px) {
  .specification .content .button {
    margin-bottom: 32px;
    width: 448px;
  }
}

footer {
  background-color: #181b2e;
}

footer .content {
  width: 100%;
  max-width: 640px;
  margin: auto;
  position: relative;
}

footer .content .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 .content .company_icon {
    width: 247px;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

footer .content .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;
}

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

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

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

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

footer .content .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 .content .copyright {
    font-size: 1em;
    padding-bottom: 20px;
  }
}