@charset "utf-8";
/* CSS Document */
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
タームリスト
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.term_list {
    li {
        a {
            color: #000;
        }
        span {
            letter-spacing: 0.05em;
            &::before {
                content: "●";
                font-size: 0.5em;
                display: inline-block;
                vertical-align: 0.35em;
                padding-right: 0.5em;
            }

            /* 色 */
            &.products {
                &::before {
                    color: var(--color-blue);
                }
            }
            &.others {
                &::before {
                    color: var(--color-orange);
                }
            }
        }
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
エントリー一覧
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.entrylist_catlist_wrap {
    display: flex;
    gap: min(5.2%, 6.2rem);
    max-width: 120rem;
    margin: auto;
    @media screen and (max-width: 480px) {
        display: block;
        padding: 0 2rem;
    }
    #contents_area,
    .entrylist_wrap {
        max-width: 96.6rem;
        width: 81%;
        @media screen and (max-width: 480px) {
            width: 100%;
            margin-bottom: 3.2rem;
        }
    }
    .catlist_wrap {
        width: 12.8%;
        max-width: 11.4rem;
        @media screen and (max-width: 480px) {
            width: 100%;
            max-width: 100%;
        }

        h4 {
            color: var(--color-gray);
            font-size: 3.2rem;
            letter-spacing: 0.025em;
            margin-bottom: 1.2rem;
        }
        /* ターム */
        .term_list {
            li {
                font-size: 1.6rem;
                padding: 1rem 0;
            }
        }
    }
}

.post_list {
    &.news {
        border-top: 1px solid #000;
        li.entry_item {
            border-bottom: 1px solid #000;
            a.permalink {
                display: block;
                color: #000;
                position: relative;

                &::after {
                    content: "";
                    display: block;
                    position: absolute;
                    right: 0.8rem;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4.1rem;
                    aspect-ratio: 1/1;
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-image: url(../img/common/icon-yajirushi-gray-black.svg);
                }
                @media screen and (max-width: 480px) {
                    &::after {
                        width: 3.3rem;
                    }
                }
                &:hover {
                    background-color: #eee;
                    &::after {
                        background-image: url(../img/common/icon-yajirushi-white-blue.svg);
                    }
                }
                dl {
                    display: flex;

                    /* 日付 */
                    dt.postdate {
                        border-right: 1px solid #000;
                        display: block;
                        padding: 2.6rem 1.2rem;
                        width: 6.4rem;
                        flex-shrink: 0;
                        @media screen and (max-width: 480px) {
                            padding: 1.2rem 0.3rem;
                            width: 4.6rem;
                        }
                        div {
                            font-size: 3.6rem;
                            @media screen and (max-width: 480px) {
                                font-size: 2.4rem;
                            }
                            span {
                                font-size: 1.6rem;
                                display: block;
                                @media screen and (max-width: 480px) {
                                    font-size: 1.2rem;
                                    margin-bottom: 0.3rem;
                                }
                            }
                        }
                    }

                    .title_wrap {
                        padding: 2.4rem 6rem 2.4rem 2.4rem;
                        @media screen and (max-width: 480px) {
                            padding: 1rem 6rem 1rem 1.2rem;
                        }
                        /* ターム */
                        .term_list {
                            margin-bottom: 0.75rem;
                            @media screen and (max-width: 480px) {
                                margin-bottom: 0.2rem;
                            }
                            li {
                                font-size: 1.4rem;
                                padding: 0.3rem 0;
                                @media screen and (max-width: 480px) {
                                    font-size: 1.2rem;
                                }
                            }
                        }

                        /* タイトル */
                        h3 {
                            font-size: 1.8rem;
                            line-height: 1.5;
                            font-weight: 500;
                            @media screen and (max-width: 480px) {
                                font-size: 1.4rem;
                            }
                        }
                    }
                }
            }
        }
    }
}