@media screen and (min-width: 1000px) {
    .toplogo{
        width: 50%;
    }
    .read>p{
        width: 50%;
    }
    .about{
        width: 50%;
    }
    }
@media (min-width: 767px) and (max-width: 999px) {
/* 767px以上999px以下に適用されるCSS（タブレット用） */
    .toplogo{
        width: 70%;
        padding-top: 15%;
    }
    .read>p{
        width: 70%;
    }
    .about{
        width: 70%;
    }
    .design10 {
        width: 80%;
        /* text-align: center; */
        /* border-collapse: collapse; */
        border-spacing: 0;
        margin: 0 auto;
       }
       .toppart{
        height: 30vh;
    }
    .top{
        background-image: url(../img/topsp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        background-position: center;
    }
}
@media(min-width: 320px)   and (max-width: 766px) {
    .toplogo{
        width: 90%;
        padding-top: 15%;
    }
    .top{
        background-image: url(../img/topsp.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        background-position: center;
    }
    .read>p{
        width: 70%;
    }
    .about{
        width: 70%;
    }
    .design10 {
        width: 90%;
       }
       .toppart{
        height: 30vh;
    }
    .toppart>h1{
        font-size: x-large;
    }
}