/* ========================================
   第一土木 新着情報一覧
======================================== */


/* ========================================
   ページタイトル
======================================== */

.renewal-news-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(2, 9, 6, 0.9),
            rgba(2, 9, 6, 0.34)
        ),
        url("../img/news/mainvisual.jpg");
}


/* ========================================
   一覧エリア
======================================== */

.renewal-news-archive {
    padding: 100px 0 120px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 72%,
            #f2f6f4 72%
        );
}

.renewal-news-archive__heading {
    display: flex;
    gap: 60px;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 58px;
    padding-bottom: 28px;
    border-bottom: 1px solid #dce2de;
}

.renewal-news-archive__heading-en {
    margin: 0 0 8px;
    color: #008a44;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.renewal-news-archive__heading h2 {
    margin: 0;
    color: #08110d;
    font-size: 36px;
    line-height: 1.4;
    letter-spacing: 0.08em;
}

.renewal-news-archive__lead {
    max-width: 430px;
    margin: 0;
    color: #68716b;
    font-size: 14px;
    line-height: 1.9;
}


/* ========================================
   投稿カード
======================================== */

.renewal-news-list {
    display: grid;
    gap: 24px;
}

.renewal-news-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dce2de;
    background: #fff;
    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.renewal-news-card:hover {
    border-color: rgba(0, 138, 68, 0.45);
    box-shadow: 0 18px 38px rgba(5, 20, 12, 0.09);
    transform: translateY(-4px);
}

.renewal-news-card__link {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    min-height: 245px;
    color: inherit;
    text-decoration: none;
}


/* ========================================
   左側画像
======================================== */

.renewal-news-card__image {
    position: relative;
    min-height: 245px;
    overflow: hidden;
    background: #08110d;
}

.renewal-news-card__thumbnail {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.renewal-news-card:hover .renewal-news-card__thumbnail {
    transform: scale(1.06);
}

.renewal-news-card__image-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(2, 8, 5, 0.08) 0%,
            rgba(2, 8, 5, 0.18) 42%,
            rgba(2, 8, 5, 0.82) 100%
        );
    pointer-events: none;
}

.renewal-news-card__image-label {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 25px;
    left: 24px;
}

.renewal-news-card__image-label span {
    display: block;
    margin-bottom: 8px;
    color: #4fd287;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.18em;
}

.renewal-news-card__image-label strong {
    display: block;
    color: #fff;
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: 0.15em;
}


/* ========================================
   アイキャッチ画像未設定
======================================== */

.renewal-news-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(
            145deg,
            #101914 0%,
            #050b08 100%
        );
}

.renewal-news-card__placeholder::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 32px 32px;
    content: "";
}

.renewal-news-card__placeholder span,
.renewal-news-card__placeholder strong {
    position: relative;
    z-index: 1;
}

.renewal-news-card__placeholder span {
    margin-bottom: 8px;
    color: #4fd287;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.renewal-news-card__placeholder strong {
    color: #fff;
    font-size: 28px;
    letter-spacing: 0.15em;
}


/* ========================================
   記事本文
======================================== */

.renewal-news-card__body {
    display: flex;
    flex-direction: column;
    padding: 34px 38px 30px;
}

.renewal-news-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.renewal-news-card__meta time {
    color: #68716b;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.renewal-news-card__category {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 4px 12px;
    color: #087344;
    background: #e8f5ee;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
}

.renewal-news-card__title {
    margin: 0;
    color: #08110d;
    font-size: 23px;
    line-height: 1.6;
    letter-spacing: 0.04em;
}

.renewal-news-card__excerpt {
    margin-top: 18px;
    color: #58625c;
    font-size: 14px;
    line-height: 1.9;
}

.renewal-news-card__more {
    display: inline-flex;
    gap: 20px;
    align-items: center;
    align-self: flex-end;
    margin-top: auto;
    padding-top: 26px;
    color: #087344;
    font-size: 13px;
    font-weight: 700;
}

.renewal-news-card__more span {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.renewal-news-card:hover .renewal-news-card__more span {
    transform: translateX(5px);
}


/* ========================================
   ページネーション
======================================== */

.renewal-pagination {
    margin-top: 70px;
}

.renewal-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.renewal-pagination .page-numbers {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 10px 15px;
    color: #28312c;
    border: 1px solid #d5dcd8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

.renewal-pagination .page-numbers:hover,
.renewal-pagination .page-numbers.current {
    color: #fff;
    border-color: #008a44;
    background: #008a44;
}

.renewal-pagination .prev,
.renewal-pagination .next {
    min-width: 94px;
}


/* ========================================
   投稿なし
======================================== */

.renewal-news-empty {
    padding: 70px 30px;
    border: 1px solid #dce2de;
    background: #fff;
    text-align: center;
}

.renewal-news-empty p {
    margin: 0;
    color: #5b655f;
    font-size: 15px;
}


/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1024px) {

    .renewal-news-card__link {
        grid-template-columns: 250px minmax(0, 1fr);
    }

    .renewal-news-card__body {
        padding: 28px 30px;
    }

    .renewal-news-card__title {
        font-size: 21px;
    }

    .renewal-news-card__image-label {
        right: 20px;
        bottom: 21px;
        left: 20px;
    }
}


/* ========================================
   スマートフォン
======================================== */

@media screen and (max-width: 767px) {

    .renewal-news-archive {
        padding: 68px 0 80px;
        background: #fff;
    }

    .renewal-news-archive__heading {
        display: block;
        margin-bottom: 38px;
        padding-bottom: 22px;
    }

    .renewal-news-archive__heading h2 {
        font-size: 29px;
    }

    .renewal-news-archive__lead {
        margin-top: 20px;
        font-size: 13px;
    }

    .renewal-news-list {
        gap: 18px;
    }

    .renewal-news-card__link {
        display: block;
        min-height: 0;
    }

    .renewal-news-card__image {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .renewal-news-card__thumbnail {
        position: absolute;
        min-height: 0;
    }

    .renewal-news-card__image-label {
        right: 18px;
        bottom: 17px;
        left: 18px;
    }

    .renewal-news-card__image-label span {
        margin-bottom: 5px;
        font-size: 9px;
    }

    .renewal-news-card__image-label strong {
        font-size: 22px;
    }

    .renewal-news-card__body {
        padding: 24px 21px 22px;
    }

    .renewal-news-card__meta {
        margin-bottom: 15px;
    }

    .renewal-news-card__title {
        font-size: 19px;
        line-height: 1.55;
    }

    .renewal-news-card__excerpt {
        margin-top: 14px;
        font-size: 13px;
    }

    .renewal-news-card__more {
        padding-top: 20px;
    }

    .renewal-pagination {
        margin-top: 48px;
    }

    .renewal-pagination .page-numbers {
        min-width: 42px;
        min-height: 42px;
        padding: 8px 12px;
    }

    .renewal-pagination .prev,
    .renewal-pagination .next {
        min-width: 78px;
    }
}

/* ========================================
   カテゴリー絞り込み
======================================== */

.renewal-news-filter {
    margin: -12px 0 42px;
    padding: 24px 26px;
    border: 1px solid #dce5df;
    background: #f8fbf9;
}

.renewal-news-filter__label {
    margin: 0 0 14px;
    color: #65726a;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.18em;
}

.renewal-news-filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.renewal-news-filter__button {
    --news-filter-color: #5e6b63;
    --news-filter-bg: #f2f4f3;

    display: inline-flex;
    gap: 9px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    color: var(--news-filter-color);
    border: 1px solid color-mix(
        in srgb,
        var(--news-filter-color) 28%,
        transparent
    );
    background: var(--news-filter-bg);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.renewal-news-filter__button span {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    color: var(--news-filter-color);
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    font-size: 10px;
}

.renewal-news-filter__button:hover {
    color: var(--news-filter-color);
    border-color: var(--news-filter-color);
    box-shadow: 0 6px 15px rgba(0,0,0,.06);
    transform: translateY(-1px);
}

.renewal-news-filter__button.is-active {
    color: #fff;
    border-color: var(--news-filter-color);
    background: var(--news-filter-color);
}

.renewal-news-filter__button.is-active span {
    color: var(--news-filter-color);
    background: #fff;
}

.renewal-news-filter__button--all {
    --news-filter-color: #26332c;
    --news-filter-bg: #edf1ef;
}

.renewal-news-filter__button--dx {
    --news-filter-color: #176da8;
    --news-filter-bg: #eaf5fc;
}

.renewal-news-filter__button--company {
    --news-filter-color: #087344;
    --news-filter-bg: #e8f5ee;
}

.renewal-news-filter__button--award {
    --news-filter-color: #9a6b00;
    --news-filter-bg: #fff5d9;
}

.renewal-news-filter__button--recruit {
    --news-filter-color: #b85718;
    --news-filter-bg: #fff0e5;
}

.renewal-news-filter__button--training {
    --news-filter-color: #7353a6;
    --news-filter-bg: #f2edfb;
}

.renewal-news-filter__button--default {
    --news-filter-color: #5e6b63;
    --news-filter-bg: #f2f4f3;
}

.renewal-news-filter__current {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 22px;
    color: #5e6962;
    font-size: 12px;
}

.renewal-news-filter__current span {
    color: #7a847e;
}

.renewal-news-filter__current strong {
    color: #16221b;
    font-size: 14px;
}


/* ========================================
   カテゴリーラベル 色分け
======================================== */

.renewal-news-card__category {
    --news-category-color: #087344;
    --news-category-bg: #e8f5ee;

    color: var(--news-category-color);
    border: 1px solid color-mix(
        in srgb,
        var(--news-category-color) 22%,
        transparent
    );
    background: var(--news-category-bg);
}

.renewal-news-card__category--dx {
    --news-category-color: #176da8;
    --news-category-bg: #eaf5fc;
}

.renewal-news-card__category--company {
    --news-category-color: #087344;
    --news-category-bg: #e8f5ee;
}

.renewal-news-card__category--award {
    --news-category-color: #9a6b00;
    --news-category-bg: #fff5d9;
}

.renewal-news-card__category--recruit {
    --news-category-color: #b85718;
    --news-category-bg: #fff0e5;
}

.renewal-news-card__category--training {
    --news-category-color: #7353a6;
    --news-category-bg: #f2edfb;
}

.renewal-news-card__category--default {
    --news-category-color: #5e6b63;
    --news-category-bg: #f2f4f3;
}


/* ========================================
   paginate_links(type=list) 対応
======================================== */

.renewal-pagination > ul,
.renewal-pagination .page-numbers {
    list-style: none;
}

.renewal-pagination > ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.renewal-pagination > ul.page-numbers > li {
    margin: 0;
    padding: 0;
}


/* ========================================
   スマホ
======================================== */

@media screen and (max-width: 767px) {

    .renewal-news-filter {
        margin: -4px 0 32px;
        padding: 18px 16px;
    }

    .renewal-news-filter__label {
        margin-bottom: 12px;
    }

    .renewal-news-filter__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .renewal-news-filter__button {
        width: 100%;
        min-height: 44px;
        padding: 9px 10px;
        font-size: 11px;
    }

    .renewal-news-filter__button--all {
        grid-column: 1 / -1;
    }

    .renewal-news-filter__current {
        margin-bottom: 18px;
    }
}

/* ========================================
   ページネーション hover 修正
   ul.page-numbers 全体が緑になるのを防止
======================================== */

/* 親ULにはカード風スタイルを絶対に当てない */
.renewal-pagination > ul.page-numbers {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
}

/* hover時も親UL全体は変化させない */
.renewal-pagination > ul.page-numbers:hover {
    color: inherit !important;
    border: 0 !important;
    background: transparent !important;
}

/* 実際の番号・前後ボタンだけを対象にする */
.renewal-pagination > ul.page-numbers > li > a.page-numbers,
.renewal-pagination > ul.page-numbers > li > span.page-numbers {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 10px 15px;
    color: #28312c;
    border: 1px solid #d5dcd8;
    background: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background-color 0.25s ease;
}

/* hoverはリンク単体のみ */
.renewal-pagination > ul.page-numbers > li > a.page-numbers:hover,
.renewal-pagination > ul.page-numbers > li > span.page-numbers.current {
    color: #fff;
    border-color: #008a44;
    background: #008a44;
}

/* 前へ・次へ */
.renewal-pagination > ul.page-numbers > li > .prev,
.renewal-pagination > ul.page-numbers > li > .next {
    min-width: 94px;
}

@media screen and (max-width: 767px) {

    .renewal-pagination > ul.page-numbers > li > a.page-numbers,
    .renewal-pagination > ul.page-numbers > li > span.page-numbers {
        min-width: 42px;
        min-height: 42px;
        padding: 8px 12px;
    }

    .renewal-pagination > ul.page-numbers > li > .prev,
    .renewal-pagination > ul.page-numbers > li > .next {
        min-width: 78px;
    }
}