@charset "utf-8";
@media screen and(max-width:650px){
    .kiso{
        display: grid;
        grid-template-columns:1fr 1fr 1fr 1fr;
        gap:10px
    }    
    }    

html{
    font-size: 100%;
}
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 ;
}

.kiso{
    display: grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width: 100%;
    max-width: 700px;
    margin: 10px;
}
.kiso button{
    display: block;
    max-width: 700px; /* 大きさを変更 */
    width: 100%;
    height:100%;
    background:rgba(87, 227, 72, 0.683);
    border: none;
    border-radius: 5%;
    text-align: left;
    font-weight: bold; 
    font-size:small;   
    color:#013201;
    border-bottom: 4px solid #419302; 
    border-right: 4px solid#419302; 
}
.kiso image{
    max-width: 100px;
    width: 20%;
    height:auto;   
    }

.kihon{
    display: grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width: 100%;
    max-width: 700px;
    margin: 10px;
}
.kihon button{
    display: block;
    max-width: 700px; /* 大きさを変更 */
    width: 100%;
    height:100%;
    background:rgb(45, 210, 212);
    border: none;
    border-radius: 5%;
    text-align: left;
    font-weight: bold; 
    font-size:small;   
    color:#020d6b;
    border-bottom: 4px solid #046be0; 
    border-right: 4px solid #046be0; 

.kihon image{
    max-width: 100px;
    width: 20%;
    height:auto;   
    }

}
.goi{
    display: grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width: 100%;
    max-width: 700px;
    margin: 10px;
}
.goi button{
    display: block;
    max-width: 500px; /* 大きさを変更 */
    width: 100%;
    height:100%;
    background:rgb(250, 177, 88);
    border: none;
    border-radius: 5%;
    text-align: left;
    font-weight: bold; 
    font-size:small;   
    color:#fff;
    border-bottom: 4px solid #e07604; 
    border-right: 4px solid #e07604 ; 
}
.goi image{
    max-width: 100px;
    width: 20%;
    height:auto;   
}
#kani{
    max-width: 100px;
    width: 100px;
    height:auto;

}

.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;
    font-size: 80%;
    text-align: center;
    background: #f9c64e;
    padding: 0;
    display: flex;
    gap: 1em;
}
.gnav-list li span{
    display: block;
}

h3{
    margin-top: 15px;
 
}

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