@import url('https://fonts.googleapis.com/css?family=Economica:400,700');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

@media (max-width: 810px) {
    header {
        flex-direction: column;
        align-items: center;
    }
    header a {
        width: 100%;
        text-align:center;
    }
    .main-title {
        width: 100%;
        margin-top: 20px;
    }
    #nothing {
        display: none;
    }
    /* .attention-container .memo p {
        font-size: 14px;
    }
    .manual-container {
        width: initial;
        font-size: 14px;
    }
    #drill-image {
        width: 400px;
    } 
      #contents-image {
        width: 400px;
    }
    .link-support {
        flex-direction: column;
        align-items: center;
    }
    #supporturl, #support-manual {
        font-size: 18px;
    } */

}

@media (max-width: 600px) {
    header {
        flex-direction: column;
        align-items: center;
    }
    header a {
        width: 100%;
        text-align:center;
    }
    .main-title {
        width: 100%;
        margin-top: 20px;
    }
    #nothing {
        display: none;
    }
    .attention-container .memo p {
        font-size: 14px;
    }
    .manual-container {
        width: initial;
        font-size: 14px;
    }
    #drill-image {
        width: 400px;
    } 
      #contents-image {
        width: 400px;
    }
      #mix-book-image {
        width: 400px;
    }
    .link-support {
        flex-direction: column;
        align-items: center;
    }
    #supporturl, #support-manual {
        font-size: 18px;
    }






}