aside div.wpp{
    background-color: #fff;
}

/* タブ */
aside div.wpp > div.wpp-tabs{
    padding: .25em .5em 0;
    display: flex;
    gap: .25em;
}
aside div.wpp > div.wpp-tabs > button.wpp-tab{
    appearance: none;
    border: none;
    background-color: #eee;
    margin: auto auto;
    color: inherit;
    font-size: .9em;
    padding: 1em 0;
    line-height: 1.2;
    cursor: pointer;
    width: 100%;
    margin-top: .5em;
    border-radius: 4px;
}
aside div.wpp > div.wpp-tabs > button.wpp-tab.is-active{
    box-shadow: var(--shadow);
    background: #031996;
    color: #fff;
}

aside div.wpp > div.wpp-content.is-loading{
    opacity: .65;
    pointer-events: none;
}

aside div.wpp > div.wpp-content > ul.wpp-list{
    padding: .5em;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
}

aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item{
    position: relative;
    width: 100%;
    margin: 2px 0;
}

/* カード全体リンク */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item > a.wpp-cardlink{
    display: block;
    text-decoration: none;
    color: inherit;

    position: relative;
}

/* クリック可能の透かしアイコン（テーマの tap.svg をマスクしてグラデ表示） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item > a.wpp-cardlink > .wpp-clickhint{
    position: absolute;
    right: .45em;
    bottom: .4em;
    width: 34px;
    height: 34px;
    transform: rotate(-45deg);
    opacity: .22;
    pointer-events: none;
    line-height: 1;
    z-index: 2;

    background: linear-gradient(90deg, rgba(0,140,255,.95), rgba(255,70,70,.95));
    -webkit-mask-image: var(--cp-tap-url);
    mask-image: var(--cp-tap-url);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transition: transform .25s ease, opacity .25s ease;
}

/* hoverで少しズーム（カードリンクに追従） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item > a.wpp-cardlink:hover > .wpp-clickhint{
    transform: rotate(-45deg) scale(1.12);
    opacity: .28;
}


/* カード（外枠） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item > a.wpp-cardlink > div.wpp-card{
    border: 2px #aaa solid;
    border-radius: var(--rad);
    padding: .75em .5em .25em;
    box-sizing: border-box;
}

/* 左：画像 / 右：タイトル＋カテゴリ */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item > a.wpp-cardlink > div.wpp-card > div.wpp-row{
    display: flex;
    align-items: flex-start;
    gap: .5em;
}

/* サムネ（JSフォールバック対象） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item div.wpp-thumb{
    flex-shrink: 0;
}

/* 画像 or JS のフォールバック span */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item div.wpp-thumb > img{
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item div.wpp-thumb > span:first-child{
    display: flex;
}

/* 右側テキスト */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item div.wpp-text{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: .25em;
}

/* タイトル（表示のみ） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item span.wpp-post-title{
    font-size: 0.9em;
    line-height: 1.5;
    display: block;
    word-break: break-word;
    margin-top: -.25em;
    margin-bottom: .25em;
}

/* 親カテゴリ（表示のみ） */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item span.wpp-parent-cat-link{
    display: inline-flex;
    align-items: center;
}

aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item span.wpp-parent-cat-link > span{
    font-size: .8em;
    color: #fff;
    padding: .25em .75em;
    background-color: var(--red);
    border-radius: var(--rad);
}

aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item span.wpp-parent-cat-link > span.wpp-parent-cat::before{
    content: "";
    width: .95em;
    height: .95em;
    margin-right: 4px;
    display: inline-block;
    vertical-align: -.12em;
    background-color: currentColor;
    -webkit-mask-image: url("icon/folder-regular.svg");
    mask-image: url("icon/folder-regular.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 2列配置（タブレット） */
@media (min-width: 767px){
    aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item{
        width: calc(50% - 0.25em);
    }
}

/* PC は 1列に戻す */
@media (min-width: 1180px){
    aside div.wpp > div.wpp-content > ul.wpp-list{
        padding: .5em;
    }
    aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item{
        width: 100%;
    }
}

/* ----------------------------
   ランク番号（WPP 固有）
---------------------------- */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item::before{
    position: absolute;
    display: inline-block;
    background-color: rgba(50, 50, 50, 0.8);
    color: #fff;
    content: "5";
    left: calc( 0.5em + 2px );
    top: calc( 0.5em + 2px );
    width: 2em;
    height: 2em;
    min-width: 2em;
    min-height: 2em;
    text-align: center;
    line-height: 2em;
    z-index: 10;
    pointer-events: none;
    border-radius: 4px 0 0 0;
}

/* 1-4 位カラー */
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item:nth-child(1)::before{
    background-color: rgba(255,200,0,.9);
    content:"1";
}
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item:nth-child(2)::before{
    background-color: rgba(200,200,200,.9);
    content:"2";
}
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item:nth-child(3)::before{
    background-color: rgba(210,90,10,.9);
    content:"3";
}
aside div.wpp > div.wpp-content > ul.wpp-list > li.wpp-item:nth-child(4)::before{
    content:"4";
}