@charset "utf-8";


#read{
    text-align: center;
    font-weight: bold;
    padding: 1em 0;
}



/** menu **/

#menu{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}
#menu li{
    margin: 0 2em 1em 2em;
	width:auto;
}
#menu li a{
    display: block;
    text-align: left;
    text-decoration: none;
    background-color: #FFF;
    color: brown;
    border: 2px solid brown;
    border-radius: 0.3em;
    padding: 1em;
    font-weight: bold;
/*    box-shadow: 0 4px rgb(165,42,42);*/
    padding-left: 2em;
    text-indent: -1em;
    height: 100%;
}
#menu li a::before{
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 0.5em;
}

#menu li a:hover{
    background-color: brown;
    color: #FFF;
}





/*------------------------------------------------------
	mediaQuery
*-------------------------------------------------------*/
@media screen and (min-width: 640px) {


    #menu{
        flex-direction: row;
        justify-content: space-around;
        max-width: 900px;
        margin: 0 auto;

    }
    #menu li{
        margin: 1em 0;
        width:48%;
    }



}