.list__blog-item {
    border-block-start: 1px solid #000;
    .blog-list-item {
        border-block-end: 1px solid #000;
        .blog-item-link {
            text-decoration: none;
            color: #000;
            display: block grid;
            align-items: center;
            grid-template-columns: 1fr auto;
            gap: 1rem;
            &::after {
                content: "";
                width: var(--icon-size);
                height: var(--icon-size);
                background-color: currentColor;
                mask-image: var(--icon-right-arrow-circle);
                mask-position: center;
                mask-repeat: no-repeat;
                mask-size: contain;
                margin-inline: calc(2 * var(--rem));
                transition: var(--transition__base);
            }
            .blog-list-wrap {
                display: block grid;
                padding-block: calc(64 * var(--rem));
                gap: 1rem;
                .blog-item-title {
                    font-family: var(--font-mincho);
                    font-size: calc(20 * var(--rem));
                    font-weight: 700;
                    @media(min-width: 768px) {
                        font-size: calc(24 * var(--rem));
                    }
                    @media(min-width: 1180px) {
                        font-size: calc(30 * var(--rem));
                    }
                }
            }
            &:hover {
                color: var(--color__link--base-hover);
                &::after {
                    margin-inline: calc(4 * var(--rem)) 0;
                }
            }
        }
    }
    .blog-list-empty {
        border-block-end: 1px solid #000;
        padding-block: calc(64 * var(--rem));
        color: var(--color__gray);
    }
}