body {
    /* margin: 0; */
    font-family: "メイリオ","Meiryo";
}

#parent {
    width: 900px;
    margin: 0 auto;

    padding: 0;
    box-sizing: border-box;
    border: 1px solid white;
    
    background: gray;
}

#panel{
    display: flex;
    flex-wrap: wrap;

    width: 800px;
    margin: 20px auto;

    padding: 0;
}

li{
    cursor: pointer;
    list-style:none;
    
    width:  192px;
    height: 192px;

    margin: 4px;
    border: 6px solid #333;
    padding: 10px;

    box-sizing: border-box;
    background: #FFF;

    text-align: center;
}

#sound-1 {
    background: #FF8FB3;
}
#sound-2 {
    background: #77FAE0;
}
#sound-3 {
    background: #AF72ED;
}
#sound-4 {
    background: #AF72ED;
}
#sound-5 {
    background: #77FAE0;
}
#sound-6 {
    background: #FF8FB3;
}
#sound-7 {
    background: #77FAE0;
}
#sound-8 {
    background: #AF72ED;
}
#sound-9 {
    background: #77FAE0;
}
#sound-10 {
    background: #FF8FB3;
}
#sound-11 {
    background: #FF8FB3;
}
#sound-12 {
    background: #AF72ED;
}

@media screen and (max-width:900px){
    #parent {
        width: 480px;
        margin: 0 auto;

        padding: 0;
        box-sizing: border-box;
        border: 1px solid white;
        
        background: gray;
    }

    #panel{
        display: flex;
        flex-wrap: wrap;

        width: 440px;
        margin: 20px auto;

        padding: 0;
    }

    li{
        list-style:none;
        
        width:  138px;
        height: 138px;

        margin: 4px;
        border: 6px solid #333;
        padding: 10px;


        box-sizing: border-box;
        background: #FFF;
    }
}