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

    /*========================= compare ========================== */
    .compare:after {
        display: none;
    }

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

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

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

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

    .sp {
        display: block!important;
    }

    html {
        font-size: 90%;
    }

    h2 {
        font-size: 12vw;
    }

    .box {
        padding: 15% 0;
    }

    .logo {
    width: 50%;
    top: 2%;
    left: 4.5%;
    }
    
    /*========================= cta ========================== */
    .cta {
        padding: 10% 0;
    }

    .cta-box {
        width: 70%;
        flex-direction: column;
    }

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

    /*========================= about ========================== */
    .about-box:before {
        font-size: 12vw;
        top: -1%;
        left: -3%;
    }

    /*背景三角の幅*/
    .about:before,.compare:before {
        height: 20px;
        bottom: -18px;
    }

    /*========================= compare ========================== */
    .compare-box:before {
        font-size: 12vw;
        top: -2%;
        left: -3%;
    }

    /*========================= for ========================== */
    .for-box:before {
        font-size: 12vw;
        top: -2%;
        left: -3%;
    }
    
    .voice-slider {
        width: 100%;
    }

    .slick-slide {
        padding: 0.3% 0.6%;
    }

    .slick-prev, .slick-next {
        width: 40px;
        height: 40px;
    }

    .slick-prev {
        left: -3%;
    }

    .slick-next {
        right: -3%;
    }

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

    /*========================= form ========================== */
    .form-tr {
        flex-direction: column;
    }

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

    .privacy {
        margin-bottom: 10%;
    }

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

    .submit-btn {
        width: 80%;
    }

    /*========================= about ========================== */
    footer {
        padding-bottom: 15%;
    }
}