/* hakos 4/4 = 70vw, 2/4 = 35vw, 1/4 = 17.5vw */
.hako_s9
{
    background-color: var(--bgcolor_hako);
    
    position: absolute;
    top: 0; left: 30vw; bottom: 100px;
    width: 70vw;
    overflow: scroll;
    user-select: none;
    scale: 100%;
    
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    z-index: -1;
}
    #A_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #A_s9:hover
    {
        opacity: 1;
    }
    #B_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #B_s9:hover
    {
        opacity: 1;
    }
    #C_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #C_s9:hover
    {
        opacity: 1;
    }
    #D_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #D_s9:hover
    {
        opacity: 1;
    }
    #E_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #E_s9:hover
    {
        opacity: 1;
    }
    #F_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #F_s9:hover
    {
        opacity: 1;
    }
    #G_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #G_s9:hover
    {
        opacity: 1;
    }
    #H_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #H_s9:hover
    {
        opacity: 1;
    }
    #I_s9
    {
        width: calc(70vw / 3 - 2px);
        height: calc(70vw / 3 - 2px);
        opacity: 0.9;
    }
    #I_s9:hover
    {
        opacity: 1;
    }

:root
{
    --bgcolor_hako: rgb(12, 12, 12);
}
:root[theme="swap"]
{
    --bgcolor_hako: rgb(243, 243, 243);
}