@media screen and (max-width: 1024px) {

  .sp {
    display: block;
  }

  .pc {
    display: none!important;
  }

  .navigation .gnav li:nth-child(9),
  .navigation .gnav li:nth-child(10) {
    margin: 15px;
  }

  .area_title h2 {
    text-align: center;
    font-size: 1.5rem;
}

  .area_accordion .title {
    font-size: 1.2rem;
    padding: 1em 2em 1em 1em;
}

}

@media screen and (max-width: 768px) {
  .wrap {
    max-width: 640px;
  }

  .col_box {
    display: inherit;
  }

  .rev {
    flex-direction: inherit;
  }

  .col-50, .col-33, .col-25, .col-20, .col-10 {
    width: inherit;
  }

  #header.fixed .header-content {
    padding: 0;
  }

  .area_feature .col_box div:nth-child(1) {
    margin: 40px;
  }

  .area_contact_sub .col-50:nth-child(1) a {
    margin: 0 0 10px 0;
  }

  .area_contact_sub .col-50:nth-child(2) a {
    margin: 0;
  }

  .footer .col_box .col-50:nth-child(1) {
    padding: 0 120px 30px;
  }

  .footer .col_box .col-50:nth-child(2) {
    padding: 0 120px 30px;
  }

    .area_thanks {
    text-align: center;
    padding: 150px 0;
  }


}

@media screen and (max-width: 640px) {
  .wrap {
    padding: 0 15px;
  }

  .area_mv > div > div:nth-child(2) > h1 {
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-align: center;
    margin: 40px 0 0;
  }

  .area_intro p {
    font-size: 1rem;
    line-height: 2rem;
    text-align: left;
    padding: 40px 0;
  }

  .area_about {
    padding: 60px 0 0;
}

  .area_about h2 {
    font-size: 1.6rem;
  }

  .area_about p {
    padding: 0;
}

.area_feature .col-50 div {
  margin: 0;
}

.area_feature .col-50 h2 {
  font-size: 1.6rem;
}

.area_feature h2 span {
  display: block;
  margin: 20px 0 0;
}

.area_feature .col-50 div p {
  margin: 20px 0 30px;
}

.area_feature-list h2 {
  font-size: 1.6rem;
}

.area_function h2 {
  font-size: 1.6rem;
}



.area_use h2 {
  font-size: 1.6rem
}

.area_use h3 {
  font-size: 1.6rem;
}

.area_contact .wrap {
  padding: 60px 0 40px;
}

.area_contact h2 {
  font-size: 1.1rem;
  padding: 0 0 10px;
}


.area_contact .col-50 a {
  margin: 20px;
}

.area_feature-list ul li {
  font-size: 1rem;
  line-height: 2rem;
}

.area_feature-list ul li span {
  margin: 0 5px 0 0;
}

.area_feature .col_box div:nth-child(1) {
  margin: inherit;
}

.footer .col_box {
  padding: 30px 0 0;
}

.footer .col_box .col-50 {
  padding: 10px 0;
}

.footer .nav ul {
  display: inherit;
  justify-content: inherit;
  align-items: inherit;
}

.footer .nav ul li {
  padding: 10px 0;
  border-right: none;
  border-top: 1px solid #6c6c6c;
}

.footer .nav ul li:last-child {
  border-bottom: 1px solid #6c6c6c;
}

.footer .copy {
  padding: 30px 0;
}

.area_form .Form-Btn {
  padding: 15px 80px;
  margin: 0;
}

.Form-Item > div > div > span {
  padding: 16px 7px 0 0;
}

.footer .col_box .col-50:nth-child(1) {
  padding: 0 40px 20px;
}

.footer .col_box .col-50:nth-child(2) {
  padding: 0 40px 10px;
}

}



@media screen and (max-width: 1024px) {


  .nav_box:nth-child(3) {
    margin: 0;
}

  .login_plan, .login_app {
    min-width: 300px;
    position: inherit;
    width: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login_app {
  margin: 0 0 10px 0;
}

  .arrow--right_root::after {
    top: 22px;
}

  #root .pc img {
    width: 680px;
  }

  br {
    display: none;
  }

  #telework {
    padding: 0;
  }

  .bg-change {
    background: #ffffff8a;
    padding: 120px 0;
  }

  .sp-link {
    display: block!important;
  }

  .pc-link {
    display: none!important;
  }

  #download .detail {
    margin: 0;
}

  .fa {
    display: none;
}

  .gnav li li {
    display: none;
}

.gnav li li a {
  border-top: inherit;
}

  .nav_box {
    text-align: center;
  }

  .gnav li a {
    background: inherit;
    width: inherit;
    margin: 0;
    padding: 10px 0;
}

  .navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .nav_box:nth-child(1) {
    margin: 0;
    }

    .nav_box:nth-child(2) {
      font-size: 14px;
      margin: 20px 0 0;
      }

    .gnav {
    display: block;
    height: inherit;
    margin: 0;
    }

    .navigation li {
      display: block;
      margin: 0;
    }

    #header .header-content {
      width: 90%;
    }
    .banner-text {
      padding: 15% 0 10%
    }
    .secondary-content h3 {
      font-size: 30px;
  }
    .nav-toggle {
      display: block;
    }
    .navigation {
      position: fixed;
      background-color: #000;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 99999;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
      transition: opacity 0.5s, visibility 0s 0.5s;
    }
    .navigation .primary-nav {
      position: relative;
      top: 45%;
      -moz-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
      -webkit-transform: translateY(-45%);
      transform: translateY(-45%);
    }

    .navigation a {
      display: inline-block;
      font-size: 14px;
      margin: 0;
      text-align: center;
    }
    .overview-video iframe {
      width: 290px;
      height: 163px;
    }
    .flex-control-nav {
      bottom: 20px;
    }
    .footer-nav li {
      padding: 0 5px;
      /* margin: 0 0 0 20px; */
    }
    .overview .row {
      display: flex;
      justify-content: center;
      align-items: center;
    }

  }



  @media screen and (max-width: 768px) {

  }

  @media screen and (max-width: 640px) {


  }