.near_recommend_article{
    --arrow-ratio: 0.05; /* カスタムプロパティ：矢印の大きさの比率 */
    background-color: #e7f1f8;
    padding: 10px;

    @media (max-width: 768px) {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    /* アイテムがない場合は非表示 */
    &:not(:has(.near_recommend_article__list--item)) {
        display: none;
    }

    .near_recommend_article__list{
        display: flex;
        gap: 5px;

        .near_recommend_article__list--item{
            background: #fff;
            padding: 8px 12px;
            border: 1px solid #ddd;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            max-width: 50%;
            min-width: 50%;

            &:hover {
                border-color: #bbb;
            }

            &:nth-child(1),
            &:nth-child(2){
                background: #ddd;
                border: none;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    top: 1px;
                    left: 1px;
                    right: 1px;
                    bottom: 1px;
                    background: #fff;
                }

                a {
                    position: relative;
                    z-index: 1;
                }
            }

            &:nth-child(1) {
                /* clip-pathで左向き矢印の形状を作成 */
                clip-path: polygon(calc(100% * var(--arrow-ratio)) 0, 100% 0, 100% 100%, calc(100% * var(--arrow-ratio)) 100%, 0 50%);
                padding-left: 25px;

                &::after {
                    clip-path: polygon(calc(100% * var(--arrow-ratio) - 1px) 0, 100% 0, 100% 100%, calc(100% * var(--arrow-ratio) - 1px) 100%, 0 50%);
                }
            }

            &:nth-child(2) {
                /* clip-pathで右向き矢印の形状を作成 */
                clip-path: polygon(0 0, calc(100% - 100% * var(--arrow-ratio)) 0, 100% 50%, calc(100% - 100% * var(--arrow-ratio)) 100%, 0 100%);
                padding-right: 25px;
                justify-content: flex-end;

                &::after {
                    clip-path: polygon(0 0, calc(100% - 100% * var(--arrow-ratio) + 1px) 0, calc(100% - 1px) 50%, calc(100% - 100% * var(--arrow-ratio) + 1px) 100%, 0 100%);
                }
            }

            a{
                color: #333;
                text-decoration: none;
                font-weight: 500;
                display: -webkit-box; /* WebKitベンダープレフィックス */
                -webkit-line-clamp: 2; /* WebKit用：テキストを2行で切り取り */
                line-clamp: 2; /* 標準プロパティ：テキストを2行で切り取り */
                -webkit-box-orient: vertical; /* WebKit用：縦方向のボックス配置 */
                overflow: hidden;
                line-height: 1.3;
                max-height: calc(1.3em * 2);
                word-wrap: break-word;
                line-height: 1.2;
                letter-spacing: 0;
                @media (max-width: 768px) {
                    font-size: .8rem;
                }
            }
        }
    }

}