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


    
    /*========================= header ========================== */



    header .header-right{
        padding: 30px clamp(2.5rem, 0.268rem + 5.57vw, 3.75rem);
        display:  none;
     }

     .header-left a img{
        width: clamp(18.125rem, 17.009rem + 2.79vw, 18.75rem);
     }

     header,.footer-fixed{
        padding: 30px;
        height: 60px;
    }




    /*========================= compare ========================== */
    .compare:before {
        height: 15%;
    }

    /*========================= for ========================== */
    .for::before {
        display: none;
    }

    /*========================= voice ========================== */
    .voice::before {
        display: none;
    }

    /*========================= reason ========================== */
    .reason::before,.reason::after {
        top: 6%;
    }

    .reason-arrow {
    height: 100px;
    }
    .reason-img01 {
    width: 70% !important;
}

    /*========================= form ========================== */

    .form-title{
        margin: 8% 0;
    }

    .form-box{
        margin: 0% auto 8%;
    }

    .contact-flow{
        padding: 2% 0 10%;
    }

}

@media screen and (max-width:640px) {
    .pc {
        display: none;
    }

    .sp {
        display: block!important;
    }

    html {
        font-size: 90%;
    }

    h2 {
        font-size: 12vw;
    }

    .box {
        padding: 8% 0;
    }

    .box img{
        width:90%;
    }

    .logo {
    width: 50%;
    top: 2%;
    left: 4.5%;
    }


    /*========================= fv ========================== */

    .fv{
        background: none;
    }

    .fv-box img{
        width: 100%;
        padding-top: 30px;
    }


        
    /*========================= header ========================== */


        header{
        padding: 30px clamp(1.25rem, 0.849rem + 2.56vw, 1.875rem);
    }

    .header-img a img{
        width: clamp(9.375rem, 5.369rem + 25.64vw, 15.625rem);
        
    }

        header, .footer-fixed {
        height: 50px;
    }

    
    /*========================= cta ========================== */

    .cta-area{
        padding: 8%;
        gap: 10px;
    }

    .cta {
        padding: 10% 5%;
    }

    .cta-box {
        width: 80%;
        flex-direction: column;
        margin: 0 auto;
        gap: 10px;
    }

    .cta-text {
    padding: 10px 0 20px;
}

    .fixed-cta .cta-box {
        width: 90%;
        flex-direction: row;
        padding: 2% 0;
        gap: 10px;
    }

    .fixed-cta .cta-text{
       padding: 10px 0 0;
}

    .cta-mail img {
    width: 100%;
}


    /*========================= solution ========================== */

    .solution02{
        padding: 0;
    }


    /*========================= case ========================== */


    .case-title {
    width: 40% !important;
}

.case-contents{
        padding-top: 64px;
}


    /*========================= faq ========================== */
    .faq {
        padding: 15% 0;
    }

    .faq-contents{
            margin: 40px 20px 0;
    }

    .accordion-area dt{
         padding: 5% 7% 5% 12%;
         background: url(../img/Q.png) no-repeat left / 18px;
    }

        .accordion-area dd{
         padding: 5% 7% 5% 12%;
        background: url(../img/A.png) no-repeat left / 18px;
    }


    
    /*========================= form ========================== */

    .form-top{
        padding-top: 70px;
    }

        .form-tr {
        flex-direction: column;
    }

    .form-tr th {
        margin: 3% 0 2% 0;
        width: 100%;
    }

        .form-box {
        padding: 5% 5% 8% 5%;
    }

    .submit-btn {
        width: 80%;
    }

    .privacy{
     padding: 6% 10%;
    }

    .privacy .sub{
  background: #fff;
}

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

    .privacy .box {
        padding: 0 !important;
    }

}

        /*========================= footer ========================== */

    
    footer {
        padding-bottom: 30%;
    }
}


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


    /*========================= about ========================== */

    .about:before{
        display: none;
    }


    .compare:before{
        right: 1%;
    }

        /*========================= case ========================== */


    .case-title {
    width: 40% !important;
}





}