@media(max-width:1024px) {
  .header-wrapper {
    padding: 16px!important;
  }
  .fv-wrapper {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
  }
  .fv-theme {
    font-size: 2rem;
  }
  .fv-desc {
    font-size: 1rem;
  }
  .pc-only{
    display: none;
  }
  .fv-img{
    right: 5%;
  }
  #feature {
    padding-bottom: 64px;
  }
  .feature-container2 {
    padding-top: 168px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .fv.btn2 {
    margin-top: 180px;
  }
  .btn2 {
    background-color: #4B69A6;
    text-align: center;
    border-radius: 32px;
    color: #fff;
    padding: 12px 16px;
    font-weight: bold;
    margin-bottom: 24px;
    margin: 16px;
    font-size: 1rem;
  }
  .mb180 {
    margin-bottom: 180px;
  }
  .btn3 {
    background-color: #fff;
    text-align: center;
    border-radius: 32px;
    border: 2px solid #4B69A6;
    color: #4B69A6;
    padding: 12px 14px;
    font-weight: bold;
    margin-left: 16px;
    margin-right: 16px;
    font-size: 1rem;
  }
  .sv {
    height: 450px;
  }
  .sv-container {
    padding: 36px 0;
  }
  .section-title {
    font-size: 1.7rem!important;
  }
  .sv h2 {
    font-size: 2rem;
    width: 90%;
    margin: 0 auto;
  }
  .box-text h3{
    font-size: 1.5rem;
  }
  .xl-only{
    display: block;
  }
  .section-cp {
    font-size: 2rem;
    width: 80%;
    margin: 0 auto;
  }
  .sp-sv-p {
    padding-top: 24px;
    font-size: 1rem;
  }
  .sp-adjust1 {
    transform: translateY(-824px);
  }
  #trial {
    text-align: center;
  }
  .trial h2 {
    font-size: 1.3rem;
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  #users h2 {
    padding-bottom: 36px;
  }
  #users h3 {
    font-size: 1rem;
}
  .horizontal-list {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .pricebox {
    width: 700px;
    margin-left: 150px;
  }
  table {
    width: 850px!important;
  }
  .item {
    display: inline-block;
    width: 90%;
  }
  .light {
    transform: translateX(-126px);
  }
  .basic {
    transform: translateX(-48px);
  }
  .premium {
    transform: translateX(24px);
  }
  .pricebox2 {
    width: 850px;
  }
  .pricebox2 a.btn4, .pricebox2 a.btn5 {
    transform: translateX(28px);
    margin-right: 24px!important;
  }
  #question ul {
    padding-left: 0;
  }
  .footerbox, .sns {
    text-align: center;
    float: none;
  }
  footer ul {
    display: block;
    text-align: center;
    padding-top: 20px;
    width: auto;
    padding-left: 0;
  }
  .sns-ul {
    width: 50%;
    margin: 0 auto;
  }
  .trial h2.pc-none{
    display: none!important;
  }
}


/* ------------------------------------ */
@media(max-width:768px) {
  .sp-box01 {
    display: flex!important;
    flex-direction: column-reverse!important;
  }
.tb-none{
  display: none;
}
.fv-img{
  height: 50%;
}
  .section-cp {
    padding-bottom: 96px;
  }
  .feature-container {
    width: 80%;
    margin: 0 auto;
  }
  .feature-container1 {
    width: 100%;
    margin: 0 auto;
  }
  .box {
    width: 100%;
  }
  .box-text h3{
    width: 80%;
  }
  .box-inner {
    padding: 3% 0;
  }
  .feature-img01, .feature-img02, .feature-img03 {
    width: 80%;
    transform: translate(0);
    margin: 0 auto;
  }
  .sp-box02 {
    display: flex;
    flex-direction: column;
  }
  .figure {
    padding-top: 0;
    margin-bottom: 0;
  }
  #question .container{
    padding: 36px;
  }
}
/* --------------------------------------- */
@media(max-width:425px) {
  .xl-none {
    display: none;
  }
  .sp-only{
    display: block!important;
  }
  .pc-only {
    display: block;
  }
  .sp-none {
    display: none;
  }
  .heaeder-logo {
    width: 100%;
  }
  .header-wrapper {
    padding: 16px!important;
  }
  .fv {
    height: 800px;
  }
  .fv-wrapper {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
    padding-top: 36px;
  }
  .fv-left {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .nav-container {
    display: none;
  }
  .fv-theme {
    font-size: 1.75rem;
    text-align: start;
    width: 100%;
  }
  .sp-only {
    display: none!important;
  }
  .fv-desc {
    font-size: .9rem;
    text-align: start;
    width: 95%;
    margin: 0;
    padding-top: 16px;
    padding-bottom: 0;
  }
  .fv-img{
    position: static;
    margin-left: 0!important;
  }
  .fv-btn {
    display: flex;
    flex-direction: column;
  }
  .fv.btn2 {
    margin-top: 180px;
  }
  .btn2 {
    background-color: #4B69A6;
    text-align: center;
    border-radius: 32px;
    color: #fff;
    padding: 12px 16px;
    font-weight: bold;
    margin-bottom: 24px;
    margin: 16px;
    font-size: 1rem;
  }
  .mb180 {
    margin-bottom: 180px;
  }
  .btn3 {
    background-color: #fff;
    text-align: center;
    border-radius: 32px;
    border: 2px solid #4B69A6;
    color: #4B69A6;
    padding: 12px 14px;
    font-weight: bold;
    margin-left: 16px;
    margin-right: 16px;
    font-size: 1rem;
  }
  .sv {
    height: 550px;
  }
  .sv-container {
    width: 90%;
    margin: 0 auto;
  }
  .section-title {
    font-size: 1.7rem!important;
    margin-bottom: 16px!important;
  }
  .section-cp {
    font-size: 1.5rem;
    width: 80%;
    margin: 0 auto;
  }
  .adjust01{
    font-size: 2rem;
  }
  .sp-sv-p {
    padding-top: 24px;
    font-size: 1.1rem!important;
  }
  .sv-second-p {
    padding-bottom: 32px;
  }
  #feature {
    height: 2036px;
  }
  #feature img {
    width: 80%;
    margin: 0 auto;
  }
  #feature .section-cp{

  }
  .xl-only{
    display: none;
  }
  .feature-container{
    width: 100%;
  }
  .box {
    width: 100vw;
    transform: translateY(-17%);
  }
  .figure {
    font-size: 4rem;
  }
  .odd-img {
    transform: translate(12px, -520px);
  }
  .box-text h3 {
    font-size: 1.45rem;
    width: 100%;
  }
  .box-text h3.nowrap{
    white-space: normal;
  }
  .xs-none{
    display: none;
  }
  .box-text p{
    width: 100%;
    font-size: 14px;
  }
  .feature-img02 {
    transform: translateY(-320px)
  }
  .feature-container2{
    padding-top: 320px;
  }
  .feature-container3{
    transform: translateY(-480px);
  }
  .feature-img03{
    transform: translateY(10px);
  }
  .sp-box03 {
    transform: translateY(-356px);
    display: flex;
    flex-direction: column;
    margin: 0;
  }
  .sp-box04 {
    display: flex;
    flex-direction: column;
  }
  .sp-box05 {
    margin: 0;
    transform: translateY(-240px);
  }
  .sp-adjust1 {
    transform: translateY(-824px);
  }
  #trial{
    text-align: center;
  }
  .trial h2 {
    font-size: 1rem;
    font-weight: bold;
    justify-content: center;
  }
  #users h2 {
    padding-bottom: 36px;
  }
  #users h3 {
    font-size: 1rem;
  }
  #users img{
    width: 100%;
  }
  .pc-only{
    display: none;
  }
  ul.horizontal-list {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-left: 16px;
  }
  .pricebox {
    width: 700px;
    margin-left: 150px;
  }
  table {
    width: 850px!important;
  }
  .item {
    display: inline-block;
    width: 90%;
  }
  .light {
    transform: translateX(-126px);
  }
  .basic {
    transform: translateX(-48px);
  }
  .premium {
    transform: translateX(24px);
  }
  .pricebox2 {
    width: 850px;
  }
  .pricebox2 a.btn4, .pricebox2 a.btn5 {
    transform: translateX(28px);
    margin-right: 24px!important;
  }

  #question ul {
    padding-left: 0;
  }
  .footerbox, .sns {
    text-align: center;
    float: none;
  }
  footer ul {
    display: block;
    text-align: center;
    padding-top: 20px;
    width: auto;
    padding-left: 0;
  }
  .sp-only {
    display: flex!important;
    margin-left: 28px;
  }
}
@media(max-width:335px){
  h1.fv-theme br.sp-only{
    display: none;
  }
}
