@charset "utf-8";
.character,
.post-type-archive-character{
    .sec{
        padding-bottom: 3em;
    }
    .sec_container{
        background-color: transparent!important;
    }
    .character_list{
        display: grid;
        gap:5px;
        grid-template-columns: repeat(auto-fill, minmax(63px, 1fr));
        padding: 0 20px;
        @media screen and (min-width:1000px) {
            gap:10px;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            @media screen and (min-width:1280px) {
                padding: 0;
            }
        }
        .character_list_item{
            border-radius: 10px;
            overflow: hidden;
            @media screen and (min-width:1280px) {
                border-radius: 20px;
            }
            .character_box{
                position: relative;
                height: 100%;
                .noimg{
                    width: 100%;
                    height: 100%;
                    display: block;
                    background-color: #fff;
                }
                .character_box_tmb{
                    width: 100%;
                    height: auto;
                    transition: all .3s ease;
                }
                .character_box_cap{
                    font-size: 1.2rem;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    padding: 10px;
                    writing-mode: vertical-rl;
                    text-orientation: upright;
                    color: var(--maincolor);
                    z-index: 0;
                    display: grid;
                    place-items: center;
                    opacity: 0;
                    transition: all .3s ease;
                    font-family: var(--jpfont),sans-serif;
                    &::after{
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        background: var(--subcolor);
                        opacity: 0.8;
                    }
                }
                &:hover{
                    .character_box_tmb{
                        filter: blur(5px);
                    }
                    .character_box_cap{
                        opacity: 1;
                    }
                }
            }
        }
    }
}