@charset "utf-8";
.illust_list{
    display: grid;
    gap:5px;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    @media screen and (min-width:1000px) {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    @media screen and (min-width:1280px) {
        gap:10px;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .illust_list_item{
        aspect-ratio: 1/1;
        border-radius: 10px;
        background: var(--accentcolor);
        position: relative;
        overflow: hidden;
        @media screen and (min-width:1280px) {
            border-radius: 20px;
        }
        img{
            object-fit: cover;
            object-position: center;
            width: 100%;
            height: 100%;
            &[alt="ネタバレ"],
            &[alt="注意"],
            &[alt="腐向け"]{
                filter: blur(5px);
            }
        }
        &:has([alt="ネタバレ"]),
        &:has([alt="注意"]),
        &:has([alt="腐向け"]){
            &::after{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                color: var(--subcolor);
                background: rgb(from var(--accentcolor) r g b / 80%);
                z-index: 2;
                display: grid;
                place-items: center;
                transition: all .3s ease;
                pointer-events: none;
                font-size: 1.2rem;
            }
            &:hover{
                &::after{
                    opacity: 0;
                }
            }
        }
        &:has([alt="ネタバレ"]){
            &::after{
                content: "ネタバレ";
            }
        }
        &:has([alt="腐向け"]){
            &::after{
                content: "腐向け";
            }
        }
        &:has([alt="注意"]){
            &::after{
                content: "注意";
            }
        }
        .illust_list_cap{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 10px;
            color: var(--maincolor);
            z-index: 0;
            display: grid;
            place-items: center;
            opacity: 0;
            transition: all .3s ease;
            font-size: 1.2rem;
            &::after{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                background: var(--subcolor);
                opacity: 0.8;
            }
        }
        &:hover{
            img{
                filter: blur(5px);
            }
            .illust_list_cap{
                opacity: 1;
            }
        }
    }
}