@charset "UTF-8";

//=========================================================
// 投稿リスト
//=========================================================

// ul
.p-postList {

    &.-type-simple {
        border-top: solid 1px var(--ark-color_border);
    }

    &.-type-card {
        display: flex;
        flex-wrap: wrap;
        margin-right: -.75rem;
        margin-left: -.75rem;
    }

}

// li
.p-postList__item {

    .-type-simple & {
        margin-top: 0;
        margin-bottom: 0;
    }

    // リスト
    .-type-list & {
        margin-top: 0;
        margin-bottom: 2rem;
    }


    // カード ベースは2列
    .-type-card & {
        width: 100%;
        margin-top: 0;
        margin-bottom: 2.5rem;
        padding: 0 .75rem;

        @include tab {
            width: 50%;
        }
    }

    [data-sidebar="off"] .-type-card & {

        @include pc {
            width: 33.3%;
        }
    }


    // 1列にするケース
    .is-first-big > &:first-child {
        width: 100%;
    }

    .l-content__sidebar .-type-card & {

        @include pc {
            width: 100%;
        }
    }


    // ウィジェットエリアではマージン少し狭く
    // .c-widget .-type-card & {
    //     margin-bottom: 2rem;
    // }
    // .c-widget .-type-list & {
    //     margin-bottom: 1.5rem;
    // }

}


//aタグ
.p-postList__link {
    position: relative;
    z-index: 0;
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;

    .c-postContent & {
        color: inherit;
    }

    &:hover {

        .c-postThumb::before {
            opacity: .1;
        }

        .c-postThumb__img {
            transform: scale(1.15);
        }
    }


    .-type-simple & {
        display: block;
        padding: .75rem .5rem;
        border-bottom: solid 1px var(--ark-color_border);
        transition: background-color .25s;

        &:hover {
            // background-color: rgba(150, 150, 150, .05);
            background-color: var(--ark-color_gray);
        }
    }


    .-type-list & {
        display: flex;
        align-items: flex-start;
        // justify-content: space-between;
    }

}


// サムネイル画像
.p-postList__thumb {

    .-type-card & {
        width: 100%;
    }

    .-type-list & {
        flex-shrink: 0;
        width: 36%;
        max-width: 280px;
    }

    &::before {

        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        background: #000;
        transform: perspective(0);
        backface-visibility: hidden;
        opacity: 0;
        transition: opacity .25s;
        content: "";
    }
}


// テキスト
.p-postList__body {
    // backface-visibility: hidden;
    position: relative;
    transition: opacity .25s;


    .-type-card & {
        padding-top: 1.25rem;
    }

    .-type-card .p-postList__item:hover &,
    .-type-list .p-postList__item:hover & {
        opacity: .75;
    }

    .-type-list & {
        flex: 1 1 auto;
        padding-left: 1rem;

        @include tab {
            padding-left: 1.5rem;
        }
    }
}


// タイトル
.p-postList__title {

    .p-postList & {
        //ショートコードでの呼び出し時（.c-postContent > h2）も考慮し、 .p-postList つけて詳細度アップ
        margin: 0;
        font-weight: 700;
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .-type-simple & {

        font-size: 1rem;
    }

    .-type-list & {

        @include mobile {
            font-size: 4vw;
        }
    }

    // .l-content__sidebar .-type-card & ,
    .-related & {
        font-size: .9rem;
    }

    // .l-content__sidebar .-type-list & {
    //     @include tab {
    //         font-size: 13px;
    //     }
    // }
}


// 抜粋文
.p-postList__excerpt {
    margin-top: .5rem;
    font-size: .8rem;
    // font-size: 3vw;
    line-height: 1.6;

    @include tab {
        font-size: .8rem;
    }

    .-type-list & {
        display: none;
    }

    .-type-card & {

        margin-top: .5rem;
    }

}


// メタ情報
.p-postList__meta {
    position: relative;
    margin-top: .5rem;
    font-size: 10px;
    letter-spacing: .1px;

    .p-postList__title + & {
        margin-top: .25rem;
    }

    @include tab {
        font-size: 11px;
    }

    ::before {
        margin-right: .25em;
    }

    .-type-simple & {
        margin: 0 0 .25rem;
    }


    // .c-widget & {
    //     margin-top: 0;
    // }

}

// .p-postList__cat {
//     padding-right: 1px;
// }


.p-postList__cat {
    margin-right: .5rem;

    &::before {

        margin-right: .25rem;

        @extend %arkheIcon;
        @extend .arkhe-icon-folder::before;
    }
}

// .p-postList__times + .p-postList__cat {

//     position: relative;
//     padding-left: calc(.5rem + 1px);

//     &::before {
//         position: absolute;
//         top: 50%;
//         left: 0;
//         display: block;
//         width: 1px;
//         height: 1em;
//         background: currentColor;
//         transform: translateY(-50%);
//         content: "";
//     }

// }

// .p-postList__times,

.-type-simple .p-postList__author {
    padding: 0;
}

// .p-postList__author:not(:first-child) {
//     margin-left: auto;
// }

// .p-postList__times {}


// 関連記事
.-related {

    &.-type-card {

        @include mobile {
            margin-right: -.5rem;
            margin-left: -.5rem;
        }

        .p-postList__item {
            width: 50%;
            margin-bottom: 1.5rem;

            @include mobile {
                padding: 0 .5rem;
            }

            @include pc {
                width: 33.33%;
            }
        }

    }

    &.-type-list {

        // サイズ小さくする？
        .p-postList__thumb {
            max-width: 240px;
        }
    }
}

// インフィード
@include mobile {

    .-type-card .c-infeedAd {
        width: 100%;
    }
}

/*
// 記事内での呼び出し
.c-postContent {

    .p-postList {
        margin-bottom: 0;
        list-style: none;
        // padding-left: 0;
    }

    .-type-simple {
        //liにmarginがないもの
        margin-bottom: 2em;
    }

    .p-postList__item {
        // padding-left: 0;
        &::before {
            content: none; //liのbeforeを表示させない
        }
    }

    .p-postList__title {
        display: block;
        padding: 0;
        // margin: 0;
        color: inherit;
        background: none;
        border: none;

        &::before,
        &::after {
            content: none;
        }
    }
}
*/