main .product-management {
  background-color: #D15540;
  z-index: 20;
}
main .connect-to-customer {
  background-color: #14B2BD;
  z-index: 20;
}
main .faq {
  background-color: #F7F7F7;
  z-index: 20;
}
main .any-service {
  position: relative;
  background-color: #F8F8F8;
  z-index: 1;
}
main .suit-to-your-site {
  position: relative;
  background-color: #FEC500;
  z-index: 21;
}
main .get-started {
  background-color: #272737;
  z-index: 20;
}
main .suit-to-your-site,
main .any-service,
main .product-management,
main .connect-to-customer,
main .design-to-customization,
main .get-started,
main .functions,
main .faq {
  position: relative;
  width: 100%;
}
main .connect-to-customer .container {
  background-repeat: no-repeat;
}
main .register-button-sticky:hover {
  background-color: #4F4F5F;
  cursor: pointer;
}
main .register-button-sticky {
  background-color: #272737;
  box-shadow: 0px 2px 24px rgba(39, 39, 55, 0.5);
  border-radius: 1000px;
  opacity: 1;
  z-index: 22;
}
main .register-button-sticky {
  position: absolute;
  left: 40px;
  bottom: 40px;
  transition: all 0.12s ease-in-out;
}
main .register-button-fixed {
  position: absolute;
  opacity: 1;
}
main .register-button-sticky a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
}
main .register-button-sticky img {
  width: 36px;
  height: 32px;
}
main .register-button-sticky span {
  color: white;
  font-weight: bold;
  line-height: 24px;
  margin-left: 12px;
  font-family: NotoSansMedium;
}
main .suit-to-your-site .js-animate-background, 
main .product-management .js-animate-background,
main .connect-to-customer .js-animate-background {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  overflow: hidden;
}
main .suit-to-your-site .context,
main .product-management .context,
main .connect-to-customer .context {
  position: relative;
  z-index: 10;
}
main .any-service .checklist span,
main .suit-to-your-site .context h1 {
  color: #36475D;
}
.cta-fixed {
  position: relative;
}
.fader-cta {
  position: fixed;
  display: none;
  z-index: 25;
}
main .functions {
  overflow: hidden;
}
main .functions .content {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 60px;
  /*--gap: 30px;*/
  margin-left: auto;
  margin-right: auto;
}
.design-to-customization {
  background-color: #FFFFFF;
}
main .faq .container .content {
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
main .any-service a,
main .get-started .context a {
  text-decoration: none;
}
main .any-service a {
  display: inline-block;
  width: fit-content;
  margin-top: 40px;
}
@media screen and (min-width: 320px) {
  .show-769-1024 {
    display: none;
  }
  main {
    background-color: #F8F8F8;
    padding-top: 80px;
  }
  main .any-service .scroll-down-container {
    position: relative;
    margin-top: -48px;
    margin-left: -25px;
  }
  main .any-service .scroll-down {
    position: absolute;
    top: 573px;                 
    margin-left: -40px;
    width: 27px;
    height: 80px;
    opacity: 0;
  }
  main .any-service .scroll-down-show {
    opacity: 1;
  }
  main section .featured-01 {
    position: absolute;
    margin-top: 728px;
    right: 0px;
    z-index: 25px;
  }
  main section .featured-02 {
    position: absolute;
    top: 728px;
    right: 0px;
  }
  main .any-service, main .any-service .container {
    height: 56.25vw;
  }
  main .any-service .container {
    position: absolute;
    display: block;
    margin: 0px auto;
    max-width: 1440px;
  }
  .js-animate-background-anyservice {
    background-image: url('../img/section-any-service-1.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  main .any-service {
    padding-top: 0px;
  }
  main .any-service .context {
    display: block;
    margin: 0px 120px;
    padding-top: 120px;
  }
  main .any-service .context .brand-logo {
    display: block;
    margin: 0px;
    width: 285px;
    height: auto;
  }
  main .any-service .context p,
  main .any-service .context h1 {
    text-align: left;
  }
  main .any-service .context p {
    margin-top: 16px;
    font-size: 20px;
    line-height: 30px;
  }
  main .any-service .context h1 {
    margin-top: 24px;
    font-family: NotoSansRegular, sans-serif;
    letter-spacing: 2px;
    overflow: hidden;
    color: #18293F;
  }
  main .any-service .checklist {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    width: 397px;
    height: 58px;
    overflow: hidden;
  }
  main .any-service .checklist .group {
    margin-top: 55px;
    display: flex;
    flex-wrap: wrap;
  }
  main .any-service .checklist img {
    width: 30px;
    height: 30px;
  }
  main .any-service .checklist span {
    display: inline-block;
    padding-left: 11px;
    line-height: 30px;
    font-weight: bold;
    font-size: 24px;              
    font-family: NotoSansMedium;
  }
  main .any-service button {
    display: block;
    margin: 0px;
    opacity: 0;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
  }
  .show-above-1024 {
    display: block;
  }
  .show-below-1024 {
    display: none;
  }
  main .suit-to-your-site, main .suit-to-your-site .container, main .suit-to-your-site .js-animate-background {
    height: 60vw; /* height: 874px; */
  }
  main .suit-to-your-site .container {
    display: flex;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
  main .suit-to-your-site .container ul {
    position: relative;
    opacity: 0px;
    z-index: 12;
    margin-top: 0px;
  }
  main .suit-to-your-site .container ul li {
    color: #18293F;
  }
  main .suit-to-your-site .js-animate-background {
    background-image: url('../img/section-suit-to-you-1.png');
    background-repeat: no-repeat;
    background-size: 69.24vw auto;                            /*background-size: 997px auto */
    background-position: right 9.51vw;                        /*background-position: right 137px;*/
  }
  main .suit-to-your-site .context {
    max-width: 48.61vw;                                       /*max-width: 700px*/
    margin: 16.81vw 12.5vw 0px 12.5vw;
  }
  main .product-management .context h1,
  main .connect-to-customer .context h1 {
    letter-spacing: -2px;
  }
  main .suit-to-your-site .context ul,
  main .product-management .context ul,
  main .connect-to-customer .context ul {
    opacity: 0;
    margin-top: 140px;
  }
  main .connect-to-customer .container .context h1 {
    font-weight: 700;
    font-size: 2.92vw;
    line-height: 4.66vw;
    letter-spacing: 1px;
    font-family: NotoSansMedium;
  }
  main .suit-to-your-site .context ul li,
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    margin-top: 24px;
    font-size: 20px;
    line-height: 3.13vw;
    background: url('../img/checkmark-black.svg');
    background-repeat: no-repeat;
    padding-left: 35px;
  }
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    background: url('../img/checkmark-white.svg');
    background-repeat: no-repeat;
    color: white;
  }
  .show-on-pc {
    display: block;
  }
  .show-on-tab {
    display: none;
  }
  .show-on-sp {
    display: none;
  }
  main .product-management, main .product-management .container, main .product-management .js-animate-background {
    height: 874px;      /* height: 874px; */
  }
  main .product-management, main .connect-to-customer {
    display: flex;
  }
  main .product-management .container, main .connect-to-customer .container {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  main .product-management .js-animate-background {
    background-image: url('../img/section-project-management-1.png');
    background-repeat: no-repeat;
    background-size: 902px auto; 
    background-position: -50px 204px;
  }
  main .product-management .container .context {
    float: right;
    margin: 276px 90px 0px 0px ;
    max-width: 600px;
  }
  main .product-management .container .context ul li {
    letter-spacing: 0px;
  }
  main .product-management .show-on-1920 {
    display: block;
  }
  main .product-management .show-on-1024 {
    display: none;
  }
  main .product-management .show-on-768 {
    display: none;
  }
  main .product-management .show-on-540 {
    display: none;
  }
  main .connect-to-customer,
  main .connect-to-customer .js-animate-background {
    height: 874px;                          /* height: 874px; */
  }
  main .connect-to-customer .container {
    display: inline-block;
  }
  main .connect-to-customer .js-animate-background {
    background-image: url('../img/section-connect-to-customer-1.png');
    background-repeat: no-repeat;
    background-size: 1000px auto;
    background-position: 420px 120px
  }
  main .connect-to-customer .container .show-below-1920 {
    display: block;
  }
  main .connect-to-customer .container .show-below-768 {
    display: none;
  }
  main .connect-to-customer .container .show-below-540 {
    display: none;
  }
  main .connect-to-customer .container .context {
    margin: 260px 0px 0px 137px;
    max-width: 580px;
  }
  main .design-to-customization,
  main .design-to-customization .container,
  main .design-to-customization .container .js-animate-container,
  main .design-to-customization .container .js-animate-container .motion {
    height: 156px;
  }
  main .design-to-customization .container .js-animate-container {
    overflow: hidden;
  }
  main .design-to-customization .container .js-animate-container .motion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 150px;
    opacity: 0;
  }
  main .design-to-customization .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main .design-to-customization .brand-logo {
    width: 58px;
    height: 56px;
  }
  main .design-to-customization .text {
    margin-left: 24px;
    margin-right: 30px;
  }
  main .design-to-customization .text p {
    font-size: 1.67vw;          /* font-size: 20px; */
    line-height: 32px;
  }
  main .design-to-customization a {
    text-decoration: none;
  }
  main .design-to-customization .show-below-1920 {
    display: block;
  }
  main .design-to-customization .show-below-768 {
    display: none;
  }
  main .get-started {
    padding: 80px 0px;
  }
  main .get-started .container {
    display: block;
    height: auto;
    max-width: 1080px;
    margin: 0px auto;
  }
  main .get-started .container .context {
    max-width: 514px;
  }
  main .get-started .container {
    background-image: url('../img/section-get-started-1.png');
    background-repeat: no-repeat;
    background-size: 34.72vw auto;          /* background-size: 500px auto */
    background-position: 41.67vw 2.78vw;      /* background-position: 600px 40px;  */
  }
  main .get-started .context h1 {
    font-size: 2.22vw;                    /* font-size: 32px; */
    line-height: 3.33vw; 
    letter-spacing: 2px;
  }
  main .get-started .context ul {
    opacity: 0;
    margin-top: 100px;                    /* Animate from base 100px to margin top 24px  */
  }
  main .get-started .context .list-pc {
    display: block;
  }
  main .get-started .context .list-sp {
    display: none;
  }
  main .get-started .context ul li {
    margin-top: 24px;
    font-size: 1.39vw;                    /* font-size: 20px */
    line-height: 32px;
    background: url('../img/checkmark-white.svg') no-repeat left 6px;
    padding-left: 33px;
    color: white;
  }
  main .get-started .context button {
    margin-top: 32px;
    height: 48px;
    opacity: 0;
  }
  main .get-started .context .settlement-fee {
    display: none;
    font-weight: 400;
    color: white;
    text-align: center;
  }
  main .functions {
    background-color: #EAEFF2;
    padding: 80px 0px;
  }
  main .faq {
    background-color: #F8F8F8;
    padding: 80px 0px 112px 0px;
  }
  main .functions .container,
  main .faq .container {
    display: block;
    margin: 0px auto;
  }
  main .faq ul li{overflow: hidden;}
  main .functions .section-header, main .faq .section-header {
    height: 124px;
    overflow: hidden;
  }
  main .functions .section-header .motion, main .faq .section-header .motion {
    margin-top: 124px;
    height: 124px;
    opacity: 0;
  }
  main .functions .section-header h1, main .faq .section-header h1 {
    font-family: 'Sen', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    color: #D15540;
    text-align: center;

  }
  main .functions .section-header h2, main .faq .section-header h2 {
    margin-top: 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 2px;
    text-align: center;
    color: #36475D;
    font-family: NotoSansMedium;
  }
  .see-all-features {
    margin-top: 16px;
    text-align: center;
  }
  .see-all-features a {
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    color: #2F80ED;
    font-family: NotoSansMedium;
  }
  .see-all-features img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  main .functions .section-header h2 br {
    display: none;
  }
  main .functions .content .item {
    margin-top: 150px;
    opacity: 0;
  }
  main .functions .content .item .text p:first-child {
    color: #36475D;
  }
  main .functions .content .item .text p:last-child {
    color: #464646;
  }
  main .functions .container .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    width: 100%;
  }
  main .functions .container .icon img {
    display: block;
    width: 80px;
    height: 80px;
  }
  main .functions .container .item .text p:nth-child(1) {
    font-weight: 700;
    font-size: 16px;
    line-height: 27px;
    text-align: center;
    font-family: NotoSansMedium;
  }
  main .functions .container .item .text p:nth-child(2) {
    font-weight: 400;
    font-size: 16px;
    line-height: 27px;
    align-self: stretch;
    text-align: justify;
  }
  main .faq .container .content {
    margin-top: 16px;
  }
  main .faq .container .item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 16px 24px;
    margin-top: 24px;
    background-color: #EAEFF2;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  main .faq .container .item.open {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  main .faq .container .item.close {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  main .faq .container .item:hover {
    cursor: pointer;
  }
  main .faq .container .item p {
    font-weight: bold;
    color: #36475D;
    font-size: 16px;
    line-height: 27px;
    max-width: calc(100% - 50px);
    font-family: NotoSansMedium;
  }
  main .faq .container .item img {
    position: relative;
    margin-top: 5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
  }
  main .faq .container .toggle-content {
    background-color: #FFFFFF;
    padding: 24px;
    display: none;
    border-radius: 0px 0px 8px 8px;
  }
  main .faq .container .toggle-content p {
    font-size: 16px;
    line-height: 27px;
    color: #272737;
  }
  main .faq .container .toggle-content a {
    display: inline-block;
    font-weight: bold;
    margin-top: 16px;
    text-decoration: none;
    color: #007BFF;
    font-family: NotoSansMedium;
  }
  main .faq .container .toggle-content a img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
  }
  main .functions .container .item .text p {
    margin-top: 5px;
  }
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
  .show-above-1025 {
    display: block;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  .show-above-375 {
    display: block;
  }
  .show-below-375 {
    display: none;
  }
  main .any-service .context .brand-logo {
    width: 300px;
    height: auto;
  }
  main .any-service, main .any-service .container {
    height: 775px;
  }
  main .suit-to-your-site .context ul li, 
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li {
    font-size: 20px;
    line-height: 32px;
    background-size: 26px 26px;
    background-position: left 3px;
  }
  main .design-to-customization .text p {
    font-size: 20px;
    line-height: 30px;
  }
  main .functions {
    height: 770px;
  }
  main .functions .content .item {
    max-width: 256px;
    /* max-width: 246px; */
  }
  main .functions .content {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1270px;
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
  .js-animate-background-anyservice {
    background-size: 1200px auto;
    background-position: 250px 125px;
  }
  main .suit-to-your-site .context {
    max-width: 700px;
    margin: 241px 0px 0px 180px
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 960px auto;
    background-position: right -20px bottom 80px;
    background-attachment: local;
  }
  main .suit-to-your-site, 
  main .suit-to-your-site .container, 
  main .suit-to-your-site .js-animate-background {
    height: 860px;
  }
  main .connect-to-customer .container .context {
    margin: 260px 0px 0px 130px;
    max-width: 600px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 1000px auto;
    background-position: 440px 129px;
  }
  main .faq .container .content {
    max-width: 1280px;
    padding-left: 100px;
    padding-right: 100px;
  }
  main .get-started {
    height: 410px;
  }
  main .get-started .context h1 {
    font-size: 32px;
    line-height: 48px;
  }
  main .get-started .context ul li {
    font-size: 20px;
  }
  main .get-started .container {
    background-size: 530px auto;
    background-position: 570px 35px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  main section .featured-01 {
    margin-top: 50vw;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  .show-above-375 {
    display: block;
  }
  .show-below-375 {
    display: none;
  }
  main .design-to-customization .text p {
    font-size: 1.57vw;
  }
  main section .featured-02 {
    top: 52.34vw;                             /* top:670; */
  }
  main .product-management {
    height: 725px;                           /* height: 752px; */
  }
  main .product-management .featured-02 {
    top: 610px;    
  }
  main .connect-to-customer,
  main .connect-to-customer .js-animate-background {
    height: 62.5vw;                           /* height: 800px; */
  }
  main .get-started {
    height: 33.22vw;
  }
  main .get-started .container {
    display: block;
    height: auto;
    max-width: 1280px;
    padding-left: 100px;
    margin: 0px auto;
    box-sizing: border-box;
  }
  main .get-started .container .context {
    max-width: 514px;
  }
  main .get-started .container {
    background-size: 40vw auto;            /* background-size: 550px auto;  */
    background-position: 55vw 3.2vw;      /* background-position: 670px 41px; */
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
  main .functions {
    height: 710px;
  }
  main .functions .content .item {
    max-width: 260px;
    /*max-width: 230px;*/
  }
  main .functions .content {
    padding-left: 40px;
    padding-right: 40px;
  }
  .show-769-1024 {
    display: none;
  }
  main .any-service .context,
  main .suit-to-your-site .context,
  main .connect-to-customer .container .context {
    margin-left: 100px;
  }
  main .connect-to-customer .container .context {
    margin: 16.25vw 0px 0px 10.7vw;                      /* margin: 260px 0px 0px 137px; */
    max-width: 580px;
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 70vw auto;                    /* background-size: 850px auto; */
    background-position: 37.50vw 10vw;             /* background-position: 480px 137px; */
  }
  main .product-management .js-animate-background {
    background-size: 58.10vw auto;                    /* background-size: 750px 463px; */
    background-position: -3.10vw 14.24vw;             /* background-position: -80px 205px; */
  }
  main .product-management .container .context {
    float: right;
    margin: 17.5vw 7.66vw 0px 0px;                    /* margin: 224px 98px 0px 0px; */
    max-width: 610px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 63vw auto;                      /* background-size: 900px auto;  */
    background-position: 38vw 11.72vw;                 /* background-position: 400px 150px; */
  }
}
@media screen and (max-width: 1024px) {
  .show-above-1025 {
    display: none;
  }
  main .any-service a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }
  main .any-service .container {
    width: 100%;
  }
  main .any-service, 
  main .any-service .container {
    height: 1210px;
  }
  .js-animate-background-anyservice {
    background-image: url("../img/section-any-service-1-1024-below.png");
    background-size: 1300px auto;
    background-position: right 0px top 480px;
    background-attachment: local;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  .show-above-375 {
    display: block;
  }
  .show-below-375 {
    display: none;
  }
  .see-all-features a,
  main .functions .container .item .text p:nth-child(1),
  main .functions .container .item .text p:nth-child(2),
  main .faq .container .item p,
  main .faq .container .toggle-content p,
  main .faq .container .toggle-content a,
  main .any-service button {
    font-size: 16px;
  }
  main .get-started .context h1,
  main .functions .section-header h2, 
  main .faq .section-header h2 {
    font-size: 32px;
    line-height: 48px;
  }
  main .get-started .context ul li,
  main .functions .section-header h1, 
  main .faq .section-header h1 {
    font-size: 20px;
  }
  main .any-service .context h1 {
    font-size: 48px;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .context h1 {
    font-size: 42px;
    line-height: 67px;
  }
  main .any-service .checklist {
    max-width: 397px;
  }
  main .any-service .checklist span {
    font-size: 24px;
  }
  main .suit-to-your-site .context ul li, 
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li {
    font-size: 20px;
    line-height: 32px;
    padding-left: 28px;
    margin-top: 8px;
    background-size: 24px 24px;
    background-position: left 4px;
  }
  main .suit-to-your-site .js-animate-background {
    height: 100%;
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
  main .functions .content {
    display: flex;
    max-width: 820px;
    gap: 70px;
  }
  main .functions .content .item {
    max-width: 330px;
  }
  main .functions .container .item .text p {
    margin-top: 0px;
  }
  main .any-service .context h1 {
    padding-left: 20px;
  }
  main {
    padding-top: 80px;
  }
  main .any-service .scroll-down {
    display: none;
  }
  main section .featured-01 {
    position: absolute;
    margin-top: 41px;
    right: 0px;
  }
  main section .featured-02 {
    top: 41px;
  }
  main .any-service {
    padding-top: 0px;
  }
  main .any-service .context {
    margin: 0px auto;
    max-width: 100%;
    padding-top: 80px;
  }
  main .any-service .context .brand-logo {
    margin: 0px auto;
    width: 379px;
  }
  main .any-service .context p,
  main .any-service .context h1 {
    text-align: center;
  }
  main .any-service .checklist {
    display: flex;
    margin-left: auto;
    margin-right: auto;
  }
  main .any-service button {
    display: block;
    margin: 0px auto;
  }
  .show-above-1024 {
    display: none;
  }
  .show-below-1024 {
    display: block;
  }
  main .suit-to-your-site {
    height: 1045px;
    padding-bottom: 80px;
  }
  main .suit-to-your-site .container {
    height: auto;
  }
  main .suit-to-your-site .js-animate-background {
    background-image: url('../img/section-suit-to-you-1.png');
    background-repeat: no-repeat;
    background-size: 1097px auto;
    background-position: center 81px;
  }
  main .suit-to-your-site .context {
    max-width: 625px;
    margin: 780px auto 0px auto;
  }
  main .suit-to-your-site .context ul {
    margin-top: 100px; /* Animate margin top to 24px from base 100px */
  }
  main .suit-to-your-site .context ul li {
    margin-top: 8px;
    background: url('../img/checkmark-black.svg') no-repeat left 5px;
  }
  .show-on-pc {
    display: none;
  }
  .show-on-tab {
    display: block;
  }
  .show-on-sp {
    display: none;
  }
  .show-769-1024 {
    display: block;
  }
  main .product-management {
    height: auto;
    padding-bottom: 7.82vw;
  }
  main .product-management, 
  main .product-management .container {
    height: 880px;
  }
  main .product-management .js-animate-background {
    background-size: 1024px auto;
    background-position: center 69px;
  }
  main .product-management .container .context {
    float: unset;
    display: block;
    margin: 613px auto 0px auto ;
    max-width: 628px;
  }
  main .product-management .show-on-1920 {
    display: none;
  }
  main .product-management .show-on-1024 {
    display: block;
  }
  main .product-management .show-on-768 {
    display: none;
  }
  main .product-management .show-on-540 {
    display: none;
  }
  main .product-management .context ul {
    opacity: 0;
    margin-top: 100px;
  }
  main .product-management .context ul li {
    margin-top: 8px;
    background: url('../img/checkmark-white.svg') no-repeat left 6px;
    padding-left: 28px;
  }
  main .connect-to-customer {
    height: 1008px;
    padding-bottom: 40px;
  }
  main .connect-to-customer .container {
    height: auto;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 1100px auto;
    background-position: left -150px top 77px;
  }
  main .connect-to-customer .container .context {
    display: block;
    margin: 725px auto 0px auto;
    max-width: 590px;
  }
  main .design-to-customization .text p {
    font-size: 20px;
  }
  main .get-started {
    height: 472px;
    padding: 7.83vw 0px;
  }
  main .get-started .container {
    display: block;
    max-width: 100%;
    margin: 0px auto;
  }
  main .get-started .container {
    background-image: url('../img/section-get-started-1.png');
    background-size: 500px auto;
    background-position: right 20px top 50px;
  }
  main .get-started .container .context {
    max-width: 500px;
    padding-left: 80px;
  }
  main .get-started .context h1 {
    letter-spacing: 2px;
  }
  main .faq .container {
    display: block;
    max-width: 944px;
    padding-left: 40px;
    padding-right: 40px;
  }
  main .functions {
    height: 980px;
  }
  main .functions .content {
    padding-left: 40px;
    padding-right: 40px;
    margin-top: 64px;
  }
  main .faq .container .content {
    margin-top: 40px;
  }
  main .functions .content .item {
    display: flex;
  }
  main .functions .content .item .icon {
    display: block;
    width: 6.25vw;
    height: auto;
    margin-right: 12px;
  }
  main .functions .content .item .text p:nth-child(1) {
    text-align: left;
  }
  main .functions .content .item img {
    width: 6.25vw;;
    height: 6.25vw;;
  }
}
@media screen and (min-width: 1090px) and (max-width: 1160px) {
  main .functions .content .item {
    max-width: 230px; /*210px*/
  }
}
@media screen and (min-width:  1025px) and (max-width: 1089px) {
  main .functions .content .item {
    max-width: 210px; /*210px*/
  }
}

@media screen and (min-width: 769px) and (max-width: 901px) {
  main .design-to-customization .container {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 100%;
  }
  main .design-to-customization .container .text {
    max-width: 100%;
    margin-left: 24px;
    margin-right: 40px;
  }
  .design-to-customization .btn-primary-dark {
    width: 250px;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  main .faq .container {
    box-sizing: border-box;
  }
}
@media screen and (min-width: 769px) and (max-width: 809px) {
  main .functions .content {
    gap: 60px;
  }
  main .functions .content .item {
    max-width: 310px;
  }
}
@media screen and (min-width: 901px) and (max-width: 1024px) {
   main .design-to-customization {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
    box-sizing: border-box;
  }
  main .design-to-customization .container .text {
    max-width: 400px;
  }
}
@media screen and (min-width: 768px) and (max-width: 900px) {
  main .design-to-customization {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
    box-sizing: border-box;
  }
  main .design-to-customization .container {
    max-width: auto;
  }
  main .design-to-customization .container .text {
    max-width: 320px;
  }
}
@media screen and (min-width: 769px) {
  .register-button-sticky {
    bottom: 40px;
    left: 40px;
    padding: 16px 24px;
  }
  main .register-button-sticky span {
    font-size: 16px;
  }
  .show-above-768-2 {
    display: block;
  }
  .show-below-768-2 {
    display: none;
  }
  main .faq .container {
    box-sizing: border-box;
  }
}
@media screen and (max-width: 768px) {
  .show-above-768-2 {
    display: none;
  }
  .show-below-768-2 {
    display: block;
  }
  main .register-button-sticky {
    bottom: 24px;
    left: 24px;
    padding: 14px 16px;
  }
  main .register-button-sticky.fixed{
    bottom: 24px;
    left: 24px;
  }
  main .register-button-sticky span {
    font-size: 14px;
  }
  .show-above-375 {
    display: block;
  }
  .show-below-375 {
    display: none;
  }
  main .functions .content {
    gap: 40px;
  }
  main .register-button-sticky {
    opacity: 1;
    width: auto;
    box-sizing: border-box;
  }
  main .register-button-sticky img, 
  main .register-button-fixed img {
    width: 25px;
    height: auto;
  }
  main .any-service .context .brand-logo {
    max-width: 379px;
  }
  main .any-service .context h1 {
    font-size: 48px;
  }
  main .functions {
    height: 1160px;
  }
  main .functions .content .item .text p:nth-child(1),
  main .get-started .context ul li, 
  main .functions .section-header h1, 
  main .faq .section-header h1 {
    font-size: 20px;
  }
  .see-all-features a, 
  main .functions .container .item .text p:nth-child(1), 
  main .functions .container .item .text p:nth-child(2), 
  main .faq .container .item p, 
  main .faq .container .toggle-content p, 
  main .faq .container .toggle-content a, 
  main .any-service button,
  .see-all-features a span {
    font-size: 16px;
  }
  .see-all-features a {
    line-height: 16px;
  }
  main .any-service .checklist {
    max-width: 397px;
    width: 397px;
    height: auto;
  }
  main .any-service .checklist span {
    padding-left: 0.9vw;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .context h1 {
    font-size: 5.47vw;
    line-height: 8.73vw;
  }
  main .suit-to-your-site .context ul li,
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    background-size: 18px 18px;
    background-position: left 0.4vw;
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
  main .faq .container {
    padding-left: 0px;
    padding-right: 0px;
  }
  .show-769-1024 {
    display: none;
  }
  main .faq {
    padding: 80px 0px 80px 0px;
  }
  main .faq .container .content {
    margin-top: -20px;
  }
  main .faq .container .item {
    box-sizing: border-box;
    max-width: 608px;
    margin-top: 2.90vw;
  }
  main {
    padding-top: 64px;
  }
  main .any-service, main .any-service .container {
    height: 1024px;
  }
  main .suit-to-your-site {
    height: 875px;
    padding-bottom: 40px;
  }
  .js-animate-background-anyservice {
    background-size: 970px auto;
    background-position: right -10px top 480px;
    background-attachment: local;
  }
  main .suit-to-your-site .js-animate-background {
    background-image: url('../img/section-suit-to-you-1.png');
    background-repeat: no-repeat;
    background-size: 109.38vw auto;
    background-position: -13.021vw 11.85vw;
  }

  main .suit-to-your-site .context h1 {
    letter-spacing: 1.5px;
  }
  .show-on-pc {
    display: none;
  }
  .show-on-tab {
    display: block;
  }
  .show-on-sp {
    display: none;
  }
  main .product-management .js-animate-background {
    background-size: 114.58vw 64.58vw;
    background-position: center 16.67vw;
  }
  main .connect-to-customer .container .context {
    margin: 79.43vw auto 0px auto;
    max-width: 703px;
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
  }
   main .suit-to-your-site .context {
    margin: 80.73vw auto 0px auto;
    max-width: 703px;
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
  }
  main .product-management .container .context {
    margin: 75.52vw auto 0px auto ;
    max-width: 708px;
    width: 100%;
    padding: 0px 40px;
    box-sizing: border-box;
  }
  main .product-management .show-on-1920 {
    display: none;
  }
  main .product-management .show-on-1024 {
    display: none;
  }
  main .product-management .show-on-768 {
    display: block;
  }
  main .product-management .show-on-540 {
    display: none;
  }
  main .product-management, 
  main .product-management .container {
    height: 878px;
  }
  main .product-management .context h1 {
    letter-spacing: 1.5px;
  }
  main .connect-to-customer .context ul {
    margin-top: 140px;
  }
  main .connect-to-customer .js-animate-background {
    background-image: url('../img/section-connect-to-customer-1.png');
    background-size: 110.68vw auto;
    background-position: -16.927vw 13.02vw;
  }
  main .connect-to-customer {
    height: 915px;
    overflow: hidden;
  }
  main .connect-to-customer .container .show-below-1920 {
    display: none;
  }
  main .connect-to-customer .container .show-below-768 {
    display: block;
  }
  main .connect-to-customer .container .show-below-540 {
    display: none;
  }
  main .design-to-customization {
    overflow: hidden;
  }
  main .design-to-customization,
  main .design-to-customization .container,
  main .design-to-customization .container .js-animate-container {
    height: auto;
  }
  main .design-to-customization .container {
    padding-bottom: 40px;
  }
  main .design-to-customization .container {
    display: block;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  main .design-to-customization .brand-logo,
  main .design-to-customization .openion-form {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  main .design-to-customization .brand-logo {
    margin-top: 40px;
    width: 58px;
    height: 56px;
  }
  main .design-to-customization .container .js-animate-container {
    height: 24.74vw;
  }
  main .design-to-customization .container .js-animate-container .motion {
    display: block;
  }
  main .design-to-customization .text {
    margin-top: 16px;
    margin-left: unset;
    margin-right: unset;
  }
  main .design-to-customization .text p {
    text-align: center;
    font-size: 16px;
    line-height: 27px;
  }
  main .design-to-customization button {
    margin-top: 16px;
    max-width: 327px;
    height: 59px;
  }
  main .design-to-customization .show-below-1920 {
    display: none;
  }
  main .design-to-customization .show-below-768 {
    display: block;
  }
  main .get-started {
    height: 788px;
    padding: 10.42vw;
    box-sizing: border-box;
  }
  main .get-started .container {
    width: auto;
    margin: 0px;
  }
  main .get-started .container {
    background-image: url('../img/section-get-started-1.png');
    background-size: 450px  auto;
    background-position: center 0px;
  }
  main .get-started .container .context {
    width: 100%;
    max-width: 100%;
    padding-left: 0px;
  }
  main .get-started .context .settlement-fee {
    display: block;
    font-size: 14px;
    line-height: 21px;
    padding-top: 290px;
  }
  main .get-started .context h1 {
    font-size: 24px;
    line-height: 38px;
    text-align: center;
    padding-top: 310px;
  }
  main .get-started .context ul {
    opacity: 0;
    margin-top: 60px;
  }
  main .get-started .context ul li {
    font-size: 16px;
    line-height: 27px;
  }
  main .get-started .context .list-pc {
    display: none;
  }
  main .get-started .context .list-sp {
    display: block;
    font-size: 2.09vw;;
    line-height: 3.52vw;
  }
  main .suit-to-your-site .context ul li,
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    margin-top: 8px;
    background-size: 24px 24px;
    background-position: left 4px;
  }
  main .get-started .context ul li {
    background-position: left 3px;
  }
  main .get-started .context button {
    display: block;
    margin: 5.29vw auto 0px auto;
    max-width: 327px;
    height: 48px;
    opacity: 0;
  }
  main .faq .container {
    max-width: 79.17vw;
  }
  main .functions .section-header h2, main .faq .section-header h2 {
    font-size: 3.16vw;
    line-height: 4.95vw;
    letter-spacing: unset;
  }
  main .functions .section-header, main .faq .section-header {
    height: 19.80vw;
    overflow: hidden;
  }
  main .functions .section-header .motion, main .faq .section-header .motion {
    margin-top: 19.80vw;
    height: 19.80vw;
    opacity: 0;
  }
  main .functions .section-header h2 br {
    display: block;
  }
  main .functions .content {
    max-width: 688px;
  }
  main .functions .content .item {
    max-width: 100%;
  }
  main .functions .content .item .text {
    margin-left: 12px;
  }
}
main .any-service .context h1 {
  font-size: 48px;
  line-height: 72px;
  font-weight: bold;
  font-family: NotoSansMedium;
}
main .suit-to-your-site .context h1,
main .product-management .context h1,
main .connect-to-customer .context h1,
main .connect-to-customer .container .context h1 {
  font-weight: bold;
  font-size: 42px;                       
  line-height: 67px;
  letter-spacing: 2px;
  font-family: NotoSansMedium;
}
@media screen and (max-width: 600px) {
  main .functions {
    height: 1280px;
  }
  main .any-service .context .brand-logo {
    max-width: 300px;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .context h1, 
  main .connect-to-customer .container .context h1 {
    font-size: 37px;
  }
   main .suit-to-your-site {
    height: 790px;
  }
  main .product-management {
    height: 850px;
  }
  main .connect-to-customer {
    height: 790px;
  }
  main .functions .section-header, main .faq .section-header {
    height: 21.60vw;
  }
}
@media screen and (max-width: 669px) and (min-width: 541px) {
  main .any-service .context {
    margin-left: 24px;
    margin-right: 24px;
  }
  main .any-service .context h1 {
    padding-left: 0px;
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
}
@media screen and (min-width: 651px) and (max-width: 714px) {
  main .any-service .context h1 {
    font-size: 42px;
  }
}
@media screen and (min-width: 601px) and (max-width: 650px) {
  main .any-service .context h1 {
    font-size: 40px;
  }
}
@media screen and (min-width: 587px) and (max-width: 600px) {
  main .any-service .context h1 {
    font-size: 38px;
  }
}
@media screen and (min-width: 541px) and (max-width: 586px) {
  main .any-service .context h1 {
    font-size: 35px;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .context h1, 
  main .connect-to-customer .container .context h1 {
    font-size: 32px;
  }
  main .suit-to-your-site {
    height: 820px;
  }
  main .product-management {
    height: 820px;
  }
  main .connect-to-customer {
    height: 790px;
  }
  main .functions .section-header, 
  main .faq .section-header {
    height: 135px;
  }
}
@media screen and (max-width: 540px) {
  main .suit-to-your-site {
    height: 775px;
    padding-bottom: 80px;
    overflow: hidden;
  }
  main .product-management {
    height: 680px;
    padding-bottom: 80px;
  }
  main .connect-to-customer {
    height: 595px;
    padding-bottom: 80px;
  }
  .js-animate-background-anyservice {
    background-size: 790px auto;
    background-position: -200px 345px;
  }
  .design-to-customization .btn-primary-dark {
    width: 327px;
  }
  main .functions .content .item img {
    width: 50px;
    height: 50px;
  }
  main .faq .container .item img {
    width: 18px;
    height: 18px;
  }
  main .design-to-customization button {
    height: 10.93vw;
  }
  main .faq .container {
    max-width: 100%;
  }
  main .get-started .context h1 {
    font-size: 24px;
    line-height: 38px;
  }
  main .get-started .context ul li {
    margin-top: 12px;
    font-size: 1.39vw;
    line-height: 32px;
    background: url(../img/checkmark-white.svg) no-repeat left 2px;
    padding-left: 33px;
    color: white;
  }
  main .functions {
    height: 1390px;
  }
  main .functions .content .item .text p:nth-child(1), 
  main .get-started .context ul li, 
  main .functions .section-header h1, 
  main .faq .section-header h1 {
    font-size: 20px;
  }
  main .functions .section-header h2, 
  main .faq .section-header h2 {
    font-size: 24px;
    line-height: 38px;
  }
  main .functions .section-header, 
  main .faq .section-header {
    height: 170px;
  }
  main .functions .section-header .motion, 
  main .faq .section-header .motion {
    margin-top: 19.80vw;
    height: 170px;
    opacity: 0;
  }
  .see-all-features a, 
  main .functions .container .item .text p:nth-child(1), 
  main .functions .container .item .text p:nth-child(2), 
  main .faq .container .item p,
  main .faq .container .toggle-content p, 
  main .faq .container .toggle-content a, 
  main .any-service button,
  .see-all-features a span {
    font-size: 16px;
  }
  main .faq .container .toggle-content a {
    letter-spacing: -0.5px;
  }
  .show-below-540-sp {
    display: block;
  }
  .show-above-540-pc {
    display: none;
  }
  main .suit-to-your-site .container {
    position: relative;
    overflow: hidden;
  }
  main section .featured-01 {
    position: absolute;
    margin-top: 41px;
    right: -30px;
  }
  main .get-started .context h1 {
    padding-top: 230px;
  }
  main .any-service .context h1 {
    padding-left: 0px;
  }
  main .get-started .context .settlement-fee {
    padding-top: 240px;
  }
  main .any-service {
    height: 800px;
  }
  main .any-service .container {
    height: 800px;
    background-size: 133.33vw auto;
    background-position: -35.185vw 72.22vw;
  }
  main .any-service {
    padding-top: 0px;
  }
  main .any-service .context {
    margin: 0px auto;
    width: 100%;
    padding-top: 48px;
    margin-left: ;
  }
  main .any-service .context .brand-logo {
    width: 178px;
    height: auto;
  }
  main .any-service .context p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
  }
  main .any-service .context h1 {
    margin-top: 28px;
    font-size: 32px;
    line-height: 51px;
    letter-spacing: 1px;
  }
  main .any-service .checklist {
    max-width: 306px;
    height: 35px;
  }
  main .any-service .checklist span {
    font-size: 20px;
    padding-left: 3px;
  }
  main .suit-to-your-site .js-animate-background {
    background-image: url('../img/section-suit-to-you-1.png');
    background-repeat: no-repeat;
    background-size: 140.74vw auto;
    background-position: -29.63vw 15.37vw;
  }
  main .connect-to-customer .js-animate-background {
    background-image: url('../img/section-connect-to-customer-1.png');
    background-size: 120.37vw auto;
    background-position: -24.074vw 6.48vw;
  }
  main .suit-to-your-site .context {
    overflow: hidden;
    max-width: auto;
    width: auto;
    margin: 103vw 24px 0px 24px;
    padding-left: 0px;
    padding-right: 0px;
  }
  main .suit-to-your-site .context h1,
  main .product-management .context h1 {
    font-size: 28px;
    line-height: 45px;
    letter-spacing: 2px;
  }
  main .suit-to-your-site .context ul,
  main .product-management .context ul,
  main .connect-to-customer .context ul {
    margin-top: 50px;
  }
  main .suit-to-your-site .context ul li,
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    margin-top: 16px;
    background: url('../img/checkmark-black.svg') no-repeat left 2px;
    font-size: 16px;
    line-height: 27px;
  }
  main .product-management .context ul li,
  main .connect-to-customer .context ul li {
    background: url('../img/checkmark-white.svg') no-repeat left 2px;
  }
  main .connect-to-customer .container .context h1 {
    font-size: 28px;
    line-height: 45px;
  }
  .show-on-pc {
    display: none;
  }
  .show-on-tab {
    display: none;
  }
  .show-on-sp {
    display: block;
  }
  main .product-management .js-animate-background {
    background-image: url('../img/section-project-management-1.png');
    background-repeat: no-repeat;
    background-size: 117.59 auto;
    background-position: -9.259vw 15.37vw;
  }
  main .product-management .container .context {
    max-width: auto;
    width: auto;
    margin: 81.48vw 24px 0px 24px;
    padding-left: 0px;
    padding-right: 0px;
  }
  main .product-management .show-on-1920 {
    display: none;
  }
  main .product-management .show-on-1024 {
    display: none;
  }
  main .product-management .show-on-768 {
    display: none;
  }
  main .product-management .show-on-540 {
    display: block;
  }
  main .connect-to-customer .container {
    background-size: 327px 327px;
    background-position: center 83px;
  }
  main .connect-to-customer .container .show-below-1920 {
    display: none;
  }
  main .connect-to-customer .container .show-below-768 {
    display: none;
  }
  main .connect-to-customer .container .show-below-540 {
    display: block;
  }
  main .connect-to-customer .container .context {
    max-width: auto;
    width: auto;
    margin: 77.41vw 24px 0px 24px;
    padding-left: 0px;
    padding-right: 0px;
  }
  main .design-to-customization button {
    max-width: 100%;
    width: calc(100% - 48px);
    height: 59px;
  }
  main .get-started {
    height: 685px;
    padding: 80px 25px;
  }
  main .get-started .container {
    background-size: 300px auto;
    background-position: center 0px;
  }
  main .get-started .context ul li {
    font-size: 16px;
    line-height: 27px;
  }
  main .get-started .context button {
    max-width: 100%;
    width: 100%;
    height: 48px;
    font-size: 16px;
    opacity: 0;
  }
  main .faq .container {
    width: auto;
    margin: 0px 24px;
  }
  main .functions .container {
    width: auto;
    margin: 0px;
  }
  main .functions .content {
    padding-left: 18px;
    padding-right: 16px;
  }
  main .functions .content .item .icon {
    margin-right: 18px;
  }
}
@media screen and (min-width: 449px) {
  .show-above-448 {
    display: block;
  }
  .show-below-448 {
    display: none;
  }
}
@media screen and (max-width: 448px) {
  .show-above-448 {
    display: none;
  }
  .show-below-448 {
    display: block;
  }
  .js-animate-background-anyservice {
    background-size: 650px auto;
    background-position: -170px 420px;
  }
  main .any-service .context {
    padding-left: 16px;
    padding-right: 16px;
    max-width: auto;
    width: auto;
  }
  main .suit-to-your-site .container {
    padding-bottom: 40px;
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 143.44vw auto;
    background-position: -34.836vw 20.49vw;
  }
  main .product-management .js-animate-background {
    background-size: 112.7vw  auto;
    background-position: -10.246vw 17.01vw;
  }
  main .product-management .container .context {
    margin: 81.97vw 24px 0px 24px;
  }
  main .connect-to-customer .container .context {
    margin: 82vw 24px 0px 24px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 118.85vw auto;
    background-position: -26.639vw 12.3vw;
  }
}
@media screen and (max-width: 390px) {
  .show-above-375 {
    display: none;
  }
  .show-below-375 {
    display: block;
  }
  .design-to-customization .btn-primary-dark {
    width: auto;
    width: 280px;
  }
  main .suit-to-your-site .context h1 {
    display: inline;
  }
  main .suit-to-your-site .context h1 br {
    display: none;
  }
  .js-animate-background-anyservice {
    background-size: 610px auto;
    background-position: -170px 450px;
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 620px auto;
    background-position: -160px 83px;
  }
  main .suit-to-your-site .context {
    margin: 500px 24px 0px 24px;
  }
  main .product-management .js-animate-background {
    background-size: 480px auto;
    background-position: -50px 83px;
  }
  main .product-management .container .context {
    margin: 350px 24px 0px 24px;
  }
  main .any-service .container {
    background-size: 550px auto;
    background-position: -140px 460px;
  }
  main .functions .content .item .icon {
    width: 50px;
    margin-right: 0px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 460px auto;
    background-position: -90px 80px;
  }
  main .connect-to-customer .container .context {
    margin: 350px 24px 0px 24px;
  }
  main .get-started .container {
    background-size: 300px auto;
    background-position: center 0px;
  }
  main .get-started {
    height: 635px;
    padding: 10px 24px 40px 24px;
  }
  main .functions {
    height: 1570px;
  }
  main .functions .content {
    margin-top: 40px;
  }
}
@media screen and (max-width: 350px) {
  main .get-started {
    height: 730px;
  }
}
@media screen and (max-width: 375px) {
  .js-animate-background-anyservice {
    background-size: 560px auto;
    background-position: -150px 450px;
  }
  main .get-started {
    height: 720px;
  }
}
@media screen and (max-width: 326px) {
  main .suit-to-your-site .js-animate-background {
    background-size: 620px auto;
    background-position: -180px 100px;
  }
  main .product-management .js-animate-background {
    background-size: 470px auto;
    background-position: -70px 83px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 460px auto;
    background-position: -120px 80px;
  }
  main .get-started .context h1 {
    font-size: 20px;
  }
  main .get-started {
    height: 650px;
  }
  main .any-service .checklist {
    max-width: 270px;
    width: 270px;
    height: 35px;
  }
  main .any-service .checklist span {
    font-size: 18px;
  }
}
@media screen and (max-width: 320px) {
  main .any-service .container {
    background-size: 480px auto;
    background-position: -140px 460px;
  }
  main .get-started .context button {
    width: 100%;
    opacity: 0;
  }
  main .get-started .context h1 {
    font-size: 23px;
    letter-spacing: -3px;
  }
  main .get-started .context ul li {
    letter-spacing: -1px;
  }
  main .get-started .container {
    background-size: 250px 250px;
  }
  main .faq .container .item p {
    font-size: 14px;
    letter-spacing: -1px;
  }
  main .faq .container .item img {
    width: 20px;
    height: 20px;
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 500px auto;
    background-position: -120px 100px;
  }
  main .suit-to-your-site .context {
    margin: 430px 24px 0px 24px;
  }
  main .product-management .js-animate-background {
    background-size: 370px auto;
    background-position: center 100px;
  }
  main .product-management .container .context {
    margin: 310px 24px 0px 24px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 400px auto;
    background-position: -80px 100px;
  }
  main .get-started .container {
    background-size: 250px auto;
    background-position: center 0px;
  }
  main .get-started .context h1 {
    padding-top: 190px;
  }
  main .get-started .context .settlement-fee {
    padding-top: 180px;
  }
  main .functions {
    height: 1720px;
  }
}
@media screen and (min-width: 1400px) and (max-width: 1440px) {
  main .functions .content {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media screen and (min-width: 1441px) {
  .show-above-1025 {
    display: block;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  .show-above-375 {
    display: block;
  }
  .show-below-375 {
    display: none;
  }
  .show-below-540-sp {
    display: none;
  }
  .show-above-540-pc {
    display: block;
  }
  main .any-service, 
  main .any-service .container {
    height: 775px;
  }
  main .any-service .context h1 {
    font-size: 48px;
    line-height: 72px;
  }
  main .any-service .checklist {
    max-width: 397px;
    height: 58px;
  }
  main .any-service .checklist span {
    font-size: 24px;
    line-height: 30px;
  }
  main .any-service .context .brand-logo {
    width: 285px;
  }
  .js-animate-background-anyservice {
    background-size: 1200px auto;
    background-position: right 0px bottom 80px;
    background-attachment: fixed;
  } 
  main .any-service button {
    font-size: 16px;
  }
  main section.container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .context h1,
  main .connect-to-customer .container .context h1 {
    font-size: 42px;
    line-height: 67px;
  }
  main .suit-to-your-site .context ul li, 
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li {
    font-size: 20px;
    line-height: 32px;
  }
  main .suit-to-your-site .context {
    max-width: 851px;
    margin: 14.07vw 0px 0px 180px;
  }
  main .suit-to-your-site, 
  main .suit-to-your-site .container,
  main .suit-to-your-site .js-animate-background {
    height: 874px;
  }
  main .suit-to-your-site .js-animate-background {
    background-size: 997px auto;
    background-position: right 0px bottom 80px;
    background-attachment: local;
  }
  main .product-management .container .context {
    max-width: 600px;
    margin: 276px 130px 0px 0px;
  }
  main .product-management .js-animate-background {
    background-size: 902px auto;
    background-position: left 0px 197px;
  }
  main .product-management, 
  main .product-management .container, 
  main .product-management .js-animate-background {
    height: 874px;
  }
  main .suit-to-your-site .context ul li,
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li {
    background-size: 26px 26px;
    background-position: left 3px;
    line-height: 32px;
  }
  main .connect-to-customer .container .context {
    max-width: 751px;
    margin: 260px 0px 0px 137px;
  }
  main .connect-to-customer .js-animate-background {
    background-size: 1089px auto;
    background-position: right -20px top 120px;
    background-attachment: local;
  }
  main .design-to-customization .text p {
    font-size: 20px;
    line-height: 30px;
  }
  main .get-started .container {
    max-width: 1080px;
    background-size: 550px;
    background-position: right -20px bottom 10px;
  }
  main .get-started .context h1 {
    font-size: 32px;
    line-height: 48px;
  }
  main .get-started .context ul li {
    background-size: 26px 26px;
    background-position: left 3px;
    font-size: 20px;
    line-height: 32px;
    padding-left: 35px;
  }
  main .get-started .container .context {
    max-width: 544px;
  }
  main .functions .container, 
  main .faq .container {
    max-width: 1240px;
  }
  main .functions .content {
    padding-left: 40px;
    padding-right: 40px;
    max-width: 1270px;
  }
  main .functions .content .item {
    max-width: 286px;
    /*max-width: 246px;*/
  }
  main .functions .container .icon img {
    width: 64px;
    height: auto;
  }
  main .faq .container .content {
    max-width: 1280px;
    padding-left: 100px;
    padding-right: 100px;
  }
  .get-started {
    height: 405px;
    overflow: hidden;
  }
  main .get-started .container {
    height: 410px;
  }
}
@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .show-above-1025 {
    display: block;
  }
  main .register-button-fixed {
    left: 80px;
    bottom: 80px;
  }
  main .any-service .context h1 {
    font-size: 3.80vw;
    line-height: 5.63vw;
  }
  main .suit-to-your-site .context h1, 
  main .product-management .context h1, 
  main .connect-to-customer .container .context h1 {
    font-size: 3.28vw;
    line-height: 5.25vw;
  }
  main .suit-to-your-site .context ul li, 
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li {
    font-size: 1.56vw;
    line-height: 2.5vw;
  }
  main .get-started .context h1 {
    font-size: 2.50vw;
    line-height: 3.75vw;
  }
  main .get-started .context ul {
    font-size: 1.56vw;
  }
  main .functions .section-header h1, 
  main .faq .section-header h1 {
    font-size: 1.56vw;
    line-height: 2.03vw;
  }
  main .functions .section-header h2, 
  main .faq .section-header h2 {
    font-size: 2.50vw;
    line-height: 3.75vw;
  }
  .see-all-features a,
  main .functions .container .item .text p:nth-child(1),
  main .functions .container .item .text p:nth-child(2),
  main .faq .container .item p,
  main .faq .container .toggle-content p,
  main .faq .container .toggle-content a {
    font-size: 1.30vw; /*16px*/
    line-height: 1.88vw;
  }
  main .any-service .context .brand-logo {
    width: 23.05vw;
    height: auto;
  }
  .js-animate-background-anyservice {
    background-size: 98vw auto;
    background-position: 17vw 10vw;
  }
  main .any-service, 
  main .any-service .container {
    height: 60.58vw;
  }
  main .suit-to-your-site .context ul li, 
  main .product-management .context ul li, 
  main .connect-to-customer .context ul li,
  main .get-started .context ul li {
    background-size: 2.03vw 2.03vw;
    background-position: left 0.2vw;
    padding-left: 2.57vw;
  }
  main .faq .container .content {
    max-width: 1280px;
    padding-left: 100px;
    padding-right: 100px;
  }
}
main section .featured-02-container {
  width: 100%;
  height: 30px;
  position: absolute;
  z-index: 0;
}


/* Animation */
.register-button-sticky.fixed{
  position: fixed;
  bottom: 40px;
  left: 40px;
  z-index: 21;
  opacity: 1;
  transition: all 0.12s ease-in-out;
}

.register-button-sticky.show {
  opacity: 1;
  animation-name: showButton;
  animation-duration: 0.5s;
}
.register-button-sticky.show2 {
  opacity: 1;
}
.register-button-sticky.hide {
  /*opacity: 0;*/
  display: none;
  animation-name: hideButton;
  animation-duration: 0.5s;
}
.register-button-sticky.show-cleared {
  opacity: 1;
  animation: 0s ease-in-out 0s 1 showButton;
}
.register-button-sticky.hide-cleared {
  opacity: 0;
  animation: 0s ease-in-out 0s 1 hideButton;
}
.skewText-init {
  opacity: 0;
}
.skewText {
  position: relative;
  display: inline-block;
  top: 0px;
  -webkit-transform:skew(0deg);
  -moz-transform:skew(0deg);
  transform:skew(0deg);
  animation: 0.8s ease-in-out 0s 1 skewOpacity_type1;
}
.css-animate-text {
  display: inline-flex; 
  height: inherit ;
  overflow: hidden;
}
.css-animate-margin-top-40-opacity-1 {
  animation: 1s ease-in-out 0s 1 marginTop40Opacity;
}
.faq-button-open {
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  transform:rotate(0deg);
  -webkit-animation: 0.5s ease-in-out 0s 1 openIcon;
  -moz-animation: 0.5s ease-in-out 0s 1 openIcon;
  animation: 0.5s ease-in-out 0s 1 openIcon;
}
.faq-button-close {
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-animation: 0.5s ease-in-out 0s 1 closeIcon;
  -moz-animation: 0.5s ease-in-out 0s 1 closeIcon;
  animation: 0.5s ease-in-out 0s 1 closeIcon;
}
@keyframes closeIcon { 
  0% { 
    -webkit-transform: rotate(0deg);
    transform:rotate(0deg);
  } 
  100% { 
    -webkit-transform: rotate(45deg);
    transform:rotate(45deg); 
  } 
}
@keyframes openIcon { 
  0% { 
    -webkit-transform: rotate(45deg);
    transform:rotate(45deg); 
  } 
  100% { 
    -webkit-transform: rotate(0deg);
    transform:rotate(0deg); 
  } 
}
@keyframes closeIcon { 
  0% { 
    -webkit-transform: rotate(0deg);
    transform:rotate(0deg); 
  } 
  100% { 
    -webkit-transform: rotate(45deg);
    transform:rotate(45deg); 
  } 
}

@keyframes showButton {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hideButton {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes skewOpacity_type1 {
  0% {
    transform: skew(45deg);
    opacity: 0;
    top: 50px;
  }
  100% {
    transform: skew(0deg)
    opacity: 1;
    top: 0px;
  }
}
@keyframes marginTop40Opacity {
  0% {
    opacity: 0;
    margin-top: 100px;
  }
  100% {
    opacity: 1;
    margin-top: 40px;
  }
}

/*Animation Guide UI*/
.animation-guide {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  background-color: black;
  color: white;
  z-index: 100;
  display: none;
}
.animation-guide table tr td {
  padding: 5px 3px;
}
.animation-guide table tr td span {
  font-family: monospace;
  font-size: 11px;
}
.animation-guide input[type='text'] {
  padding: 8px 10px;
  border: none;
  outline: none;
}

@media screen and (min-width: 541px) {
  main .any-service .context .brand-logo {
    height: 115px;
    width: auto;
  }
}
@media screen and (max-width: 540px) {
  main .any-service .context .brand-logo {
    height: 64px;
    width: auto;
  }
}