@charset "utf-8";

html{
    font-size: 100%;
}

@media screen and(min-width: 768px){
    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: #fbd98bde;
    padding: 0;
    text-align:left ;
}
.gnav-wrap{
    background:  #f8f2e4;
}
.gnav-inner{
    margin-inline: auto;
    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: #fbd98bde;
    padding: 0;
    display: flex;
    gap: 2em;
}
.gnav-list li span{
    display: block;
}

.countainer{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr ;
    gap:20px;
    width: 80%;
    max-width: 1000px;
    margin: 20px auto;
}
.countainer button{
    display: block;
    max-width: 500px; /* 大きさを変更 */
    width: 100%;
    height:180px;
    border: none;
    text-align: center;
    font-weight: bold; 
    font-size: large;   
    color:#fff;
    border-bottom: 4px solid #017d24; 
    border-right: 4px solid #018627; 
}

@media screen and(min-width: 768px){
    .countainer{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }  
    .countainer button{
        max-width: 1000px; /* 大きさを変更 */
    } 
}
#study{    
    background: #93da48ee;    
}
#goi{
    background: #f9ac64f0;
}#katuyou{    
    background: #78badfee;    
}
#print{
    background: #d6d436f0;
}


#maingani{
    display: inline-flex;
    width: 60px;
    height:45px;
    margin-left: 5px;

}

#sub-gani{
    max-width: fit-content;
    display: inline;
    width: 100px;
    height: 80px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: right;
    margin-bottom: 2%;  
    align-items:baseline; /* 垂直方向の中央揃え */
    justify-content: center; /* 水平方向の中央揃え */  
}

footer{
    display: inline-flex;
    width: 100%;
    background:  #fbd98bde;
    text-align: left;
    font-weight:lighter;
    padding: 0.2em;
}