.page_contents .archive {
    width: 73.529vw;
    margin: auto;
    padding: 7.353vw 0;
}

.work-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.765vw;
}

.work-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 1.176vw;
}

.work-card img {
    width: 100%;
    height: auto;
    border-radius: 0;
    margin-bottom: 0.882vw;
}

.work-card p {
    margin: 0.441vw 0;
}

.work_info {
    display: flex;
}

.info_sec1 {
    padding-bottom: 0.735vw;
    margin-bottom: 0.735vw;
    border-bottom: solid 1px #DEDEDE;
}

p.label {
    width: 4.779vw;
    font-weight: 600;
    padding: 0 0 0.147vw;
    margin-right: 1.471vw;
    color: #fff;
    background: #0362a2;
    letter-spacing: .2vw;
    text-align: center;
}

p.label_2 {
    width: 8.779vw;
    font-weight: 600;
    padding: 0 0 0.147vw;
    margin-right: 1.471vw;
    color: #004370;
    background: #AACFE8;
    letter-spacing: 0;
    text-align: center;
}

.nav-links {
    display: flex;
    justify-content: center;
}

span.page-numbers,
a.page-numbers {
    display: flex;
    width: 2.647vw;
    height: 2.647vw;
    margin: 0 0.368vw;
    align-items: center;
    justify-content: center;
    border: solid 1px #004370;
}

span.page-numbers.current {
    background: #004370;
    color: #fff;
}

.all_tag_wrap {
    margin-bottom: 6.471vw;
}

.single_post_ttl {
    text-align: left;
    font-family: "Noto Sans JP";
    font-size: 1.471vw;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.single_post_ttl h2 {
    text-align: left;
    font-family: "Noto Sans JP";
    font-size: 1.471vw;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;         /* 行間は必要に応じて調整 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;    /* ← 2行で省略 */
    overflow: hidden;
}

p.short_txt {
    text-align: left;
}

p.name_age {
    padding: 0.147vw 0.735vw 0.294vw;
    display: inline-block;
    background: #AACFE8;
}

span.cat-name {
    display: inline-block;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    background: #02b79c;
    margin-bottom: 10px;
    min-width: 80px;
    padding: 0 10px 2px;
}

.page_contents.blog {
    background: url(../img/works/single_bg.png);
    background-size: contain;
    background-repeat: repeat;
}


.work.archive {

    h3.filter-heading {
        color: var(--004370, #004370);
        font-family: "Noto Sans JP";
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 20px;
    }

    .tag-list {
        display: flex;
        flex-wrap: wrap;
    }
    a.tag.tag-color {
        width: 24%;
        margin: 0 1% 22px 0;
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        position: relative;
        padding-bottom: 6px;
        border-bottom: solid 1px #E0E0E0;

        span.label {
            margin-left: 28px;
        }

        span.count {
            display: flex;
            line-height: 1;
            justify-content: center;
            align-items: center;
            margin-left: 0;
            padding: 0 8px;
            font-size: 11px;
            background: #004370;
            color: #fff;
            border-radius: 12px;
        }

        span.label.label-more-color {
            margin-left: 0;
        }
        .label-white::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c1.png);
            background-size: cover;
        }
        .label-gray-black::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c2.png);
            background-size: cover;
        }
        .label-brown-cream::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c3.png);
            background-size: cover;
        }
        .label-yellow-orange::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c4.png);
            background-size: cover;
        }
        .label-pink-red::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c5.png);
            background-size: cover;
        }
        .label-blue::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c6.png);
            background-size: cover;
        }
        .label-green::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c7.png);
            background-size: cover;
        }
        .label-clear::after {
            content: "";
            position: absolute;
            top: 3px;
            left: 0;
            width: 18px;
            height: 18px;
            background: url(../img/works/c8.png);
            background-size: cover;
        }

    }

    a.tag.tag-color:before,
    a.tag.tag-property_type:before {
        content: "";
        position: absolute;
        top: 5px;
        right: 0;
        width: 10px;
        height: 14px;
        background: url(../img/works/work_arrow.svg);
        background-size: cover;
    }

    .filter-section.filter-house_corp {
        margin: 50px 0;

        .tag-list {
            gap: 16px;
            margin-bottom: 5.861vw;
        }
    }

    a.tag.tag-property_type {
        width: 24%;
        margin: 0 1% 22px 0;
        display: flex;
        justify-content: space-between;
        padding-right: 17px;
        position: relative;
        padding-bottom: 6px;
        border-bottom: solid 1px #E0E0E0;

        span.label {
            max-width: 13vw;
        }

        span.count {
            display: flex;
            line-height: 1;
            justify-content: center;
            align-items: center;
            margin-left: 0;
            height: 23px;
            padding: 0 8px;
            font-size: 11px;
            background: #004370;
            color: #fff;
            border-radius: 12px;
        }
    }

    .tag-house_corp {
        display: inline-block;
        padding: 7px 16px;
        background: #bfbfbf; /* 通常はグレー */
        color: #fff;
        text-decoration: none;
        position: relative;
        transition: background 0.3s;
    }

    a.tag.tag-house_corp {
        font-weight: bold;
    }

    .tag-house_corp:hover,
    .tag-house_corp.active {
        background: #4ba8f7; /* ホバーで青 */
    }

    /* アイコン（ローラー）は擬似要素で */
    .tag-house_corp:hover::after,
    .tag-house_corp.active::after {
        content: url(../img/housebuilder/icon.svg);
        position: absolute;
        top: -25px;
        right: -32px;
        font-size: 18px;
    }
}

@media(max-width:767px) {

    .page_contents .archive {
        width: 87vw;
        margin: auto;
        padding: 7.353vw 0;
    }

    .work.archive {
        a.tag.tag-color {
            width: 80%;
        }
        a.tag.tag-property_type {
            width: 80%;
        
            span.label {
                max-width: unset;
            }
        }
    }

    .work-cards {
        grid-template-columns: 1fr; /* 1列に */
        gap: 20px; /* スマホ用に gap も調整可 */
    }

    p.label {
        width: 16.779vw;
        font-weight: 600;
        padding: 0 0 0.147vw;
        margin-right: 2.471vw;
        color: #fff;
        background: #0362a2;
        letter-spacing: .2vw;
        text-align: center;
    }

    p.label_2 {
        width: 24.779vw;
        font-weight: 600;
        padding: 0 0 0.147vw;
        margin-right: 1.471vw;
        color: #004370;
        background: #AACFE8;
        letter-spacing: 0;
        text-align: center;
    }

    .work_info {
        margin-bottom: 12px;
    }

    .work-thumb {
        margin-bottom: 12px;
    }

    .work-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0;
        padding: 4.176vw;
    }

    .info_sec1 {
        padding-bottom: 0.735vw;
        margin-bottom: 3.735vw;
        border-bottom: solid 1px #DEDEDE;
    }

    .single_post_ttl h2 {
        font-size: 4.175vw;
    }
}