@charset "UTF-8";

html{
    font-size: 100%;
}

header{
    background-color: white;
    position: sticky;
    top: 0;
}

body {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}

/*タブ全体*/
    .betutabu{
        display: flex;
        gap: 1rem;
        padding: 5px;
        border-bottom: 2px solid gray;
    }
    a{
        font-size: 8px;
        text-decoration: none;
        color: #252430;
        padding: 3px;
    }
/*現在タブ*/
    #genzaitabu{
        color: #252430;
        font-size: 10px;
        background-color: #56d722;
        border-radius: 8px;
        font-weight: bold;
    }
/*他タブ*/
    .tabu:hover{
        color: #56d722;
    }
/*ホームタブ*/
    #home {
        justify-content: flex-end;
        margin-left: auto;
        margin-right: 5px;
        color: white;
        background-color: #56d722;
        border-radius: 8px;
    }

main{
    background-color:#56d722
}
/*おえかきサムネ*/
    .grid{
        display: grid;
        gap: .25rem;
        grid-template-columns: repeat(2,1fr);
        text-align: center;
    }
    .luminous{
        max-width: 100%;
    }
/*最新おえかき(大)*/
    .item-big{
        max-width: 100%;
        grid-column: 1/3;
        grid-row: 1/3;
        padding: 10px;
    }
    .item-big img{
        height: 90%;
        width: 100%;
        object-fit: cover;
        border-radius: 16px;
        margin-bottom: 5px;
    }
    .item-big:hover{
        background-color: #5d03a5;
        padding-right: 20px;
        border-radius: 16px;
    }
/*おえかき(小)*/
    .item img{
        max-width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 20px;
        padding-top: 10px;
        margin-bottom: 5px;
    }
    .item:hover{
        gap: 1rem;
        background-color: #5d03a5;
        padding-right: 6px;
        border-radius: 16px;
    }

/*タイトル*/
    p{
        font-size: 15px;
        color: white;
    }

footer{
    background-color: white;
    margin-top: 5px;
    text-align: center;
}


/*-----------デスクトップ用--------------*/
@media(min-width:800px){
    .betutabu{
        display: flex;
        gap: 2rem;
        font-size: 1.5rem;
        padding: 10px;
    }
    /*現在タブ*/
    #genzaitabu{
        font-size: 28px;
    }
    /*別タブ*/
    a{
        font-size: 25px;
    }

    /*おえかきサムネ数*/
    .grid{
        grid-template-columns: repeat(5,1fr);
    }
    /*タイトル*/
    p{
        font-size: 20px;
    }
}