/* ========================================
    タイトル
======================================== */
#sub_page #tit_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    margin-bottom: 6%;
    padding-bottom: 1em;
    background-image: repeating-linear-gradient(
        to right,
        var(--main) 0,
        var(--main) 8px,
        transparent 8px,
        transparent 12px
    );
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
}
#sub_page #tit_wrap h1 {
    font-size: clamp(24px, 3.33vw, 32px);
    font-weight: 700;
    flex: none;
}
#sub_page #tit_wrap .tag_group {
    font-size: clamp(12px, 1.66vw, 18px);
    margin-top: 0;
    flex: 1;
    min-width: 0;
}


/* ========================================
    カテゴリーリスト
======================================== */
#sub_page #category_wrap {
    padding-inline: 2em;
    margin-bottom: 16%;
}
#sub_page .cat_list {
    justify-content: flex-start;
}



/* ========================================
    パネル
======================================== */
#sub_page #panel_group_wrap {
    margin-bottom: 8%;
}
#sub_page #panel_group_wrap .panel_group {
    grid-template-columns: repeat(4, 1fr);
}
#sub_page .panel_group .panel {
    --topic_wide: 320;
}


/* ========================================
    タグ
======================================== */
#sub_page .tag_box {
    padding: 2em;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 8%;
}
#sub_page h2 {
    font-size: clamp(18px, 2.5vw, 24px);
    margin-bottom: 1em;
}



/* ========================================
    ページ送り・0件
======================================== */
#sub_page .pager {
    margin-top: 3em;
}
#sub_page .pager ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5em;
}
#sub_page .pager a,
#sub_page .pager span {
    display: block;
    min-width: 2.6em;
    padding: .5em .8em;
    text-align: center;
    font-weight: 700;
    color: var(--main);
    border: 1px solid var(--main);
    border-radius: 999px;
    background: #fff;
}
#sub_page .pager .current,
#sub_page .pager a:hover {
    background: var(--main);
    color: #fff;
}
#sub_page .pager .dots {
    border: none;
    background: none;
}
#sub_page .no_posts {
    text-align: center;
    padding-block: 4em;
}




@media screen and (max-width: 768px){

    /* ========================================
    タイトル
    ======================================== */
    #sub_page #tit_wrap {
        flex-direction: column;
        gap: .8em;
        align-items: stretch;
        background-image: none;
    }
    #sub_page #tit_wrap h1 {
        padding-bottom: .6em;
        background-image: repeating-linear-gradient(
            to right,
            var(--main) 0,
            var(--main) 8px,
            transparent 8px,
            transparent 12px
        );
        background-size: 100% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    #sub_page .cat_list {
        justify-content: center;
    }

    /* パネルグループ */
    #sub_page #panel_group_wrap {
        margin-bottom: 16%;
    }
    #sub_page #panel_group_wrap .panel_group {
        grid-template-columns: 1fr;
    }

    #sub_page .tag_box {
        margin-bottom: 16%;
    }
    #sub_page h2 {
        text-align: center;
    }


}