@charset "utf-8";

html{
    font-size: 62.5%;
}
body{
    font-family: "Helvetica neue",Arial, "Hiragino Kaku Goshic ProN","Hiragano Sans",Meiryo,sans-serif;
    box-sizing:border-box;
    margin: 0px;
    padding: 0px;
    background-color: #f8f2e4;
}
header{
    height: 20%;
    margin-bottom: 1em;
    background: #f9c64e;
    padding: 0;
    text-align:left ;
}

.countainer{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap:20px;
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
}

@media screen and(min-width:768px){
    .countainer{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap:10px
    }    
    }

.countainer button{
    display: block;
    max-width: 1000px; /* 大きさを変更 */
    width: 100%;
    height:100px;
    padding: 5px;
    background:rgb(45, 210, 212);
    border: none;
    border-radius: 5%;
    text-align: center;
    font-weight: bold; 
    font-size: large;   
    color:#fff;
    border-bottom: 4px solid #046be0; 
    border-right: 4px solid #046be0; 
}
#kiso{
    background:rgb(45, 210, 212);
}
#kihon{
    background:rgb(45, 148, 212);
}

#goi{
    background:rgba(237, 154, 94, 0.719);
}

.gnav-wrap{
    background: #f9c64e;
}
.gnav-inner{
    margin-inline: auot;
    padding: 0.5em 0em;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gnav-logp{
    font-size: 2em;
    font-weight: bold;
    color: #fff;
}
.gnav-list{
    list-style-type: none;
    text-align: center;
    background: #f9c64e;
    padding: 0;
    display: flex;
    gap: 1em;
}
.gnav-list li span{
    display: block;
}

footer{
    width: 100%;
    background:  #f9c64e;
    margin-inline: auto;
    text-align: left;
    font-weight: bold;
    padding: 15px;
}