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

    .sp {
        display: block!important;
    }

    html {
        font-size: 90%;
    }

    h2 {
        font-size: 160%;
        letter-spacing: 3px;
        padding: 4%;
    }

    h3 {
        font-size: 120%;
    }

    .menu-title {
        font-size: 90%;
        font-weight: bold;
        letter-spacing: 0;
    }

    .box {
        padding: 15% 0;
    }

    header {
        margin-bottom: 10%;
    }
 
    /*========================= about ========================== */
    .about {
        background-size: 90%;
        background-position: center 15%;
    }

    /*========================= menu ========================== */
    .menu-box h3 {
        padding: 2% 6%;
    }

    .menu-box ul > li {
        width: 49%;
    }

    /*========================= flow ========================== */

    .flow-title h3 {
        padding: 2% 6%;
    }

    .flow-title {
        padding: 8%;
    }

    .flow-box ul > li {
        gap: 15px;
        padding: 3% 0;
        align-items: flex-start;
    }

    /*========================= faq ========================== */
    .faq {
        width: 90%;
    }

    .faq-title {
        width: 80%;
    }

    .faq-question {
        background: var(--yellow) url(../img/faq_question.png) no-repeat 3% center / 10%;
        font-size: 100%;
        padding: 3% 10% 3% 16%;    
    }

    .faq-answer {
        background: #fff url(../img/faq_answer.png) no-repeat 3% center / 10%;
        border: 3px solid var(--yellow);
        font-size: 100%;
        padding: 3% 3% 3% 16%;
    }

    .accordion-title:before {
        right: 15px;
    }

    .accordion-title:after {
        right: 15px;
    }

    /*========================= footer ========================== */
    .clinic table {
        width: 100%;
    }

    th {
        width: 30%;
    }

    td {
        width: 70%;
    }
}