/* ========================================
   お知らせ一覧ページ
======================================== */

.news-archive-section {
    position: relative;

    width: 88%;
    max-width: 1100px;

    margin: clamp(70px, 8vw, 110px) auto 120px;

    padding:
        clamp(40px, 5vw, 60px)
        clamp(25px, 5vw, 60px);

    box-sizing: border-box;

    background-color: rgba(234, 247, 248, 0.72);

    border: 7px solid rgba(255, 255, 255, 0.9);
    border-radius: 25px;

    box-shadow:
        10px 12px 24px rgba(90, 100, 105, 0.18);

    overflow: hidden;
}


/* ========================================
   背景のトランプマーク
======================================== */

.news-archive-section::before {
    content: "♠";

    position: absolute;

    top: -45px;
    right: 25px;

    font-family: serif;

    font-size: clamp(130px, 15vw, 200px);

    color: rgba(51, 51, 51, 0.025);

    pointer-events: none;
}


/* 中身を透かしより前にする */
.news-archive-section > * {
    position: relative;

    z-index: 1;
}


/* ========================================
   見出し
======================================== */

.news-archive-heading {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 45px;
}


.news-archive-mark {
    font-size: 25px;

    color: #333333;
}


.news-archive-en {
    margin: 0;

    font-family: "Inria Serif", serif;

    font-size: 11px;

    letter-spacing: 0.24em;

    color: #72888a;
}


.news-archive-title {
    margin: 3px 0 0;

    font-family: "Inria Serif", "Noto Serif JP", serif;

    font-size: clamp(30px, 3vw, 42px);
    font-weight: 400;

    color: #333333;
}


/* ========================================
   投稿一覧
======================================== */

.news-archive-list {
    width: 100%;
}


.news-archive-item {
    position: relative;

    padding: 28px 10px;

    border-top: 1px solid rgba(70, 85, 90, 0.18);
}


/* 最後の記事にも下線 */
.news-archive-item:last-of-type {
    border-bottom: 1px solid rgba(70, 85, 90, 0.18);
}


/* ========================================
   日付
======================================== */

.news-archive-date {
    display: block;

    margin-bottom: 10px;

    font-family: "Inria Serif", serif;

    font-size: 14px;

    letter-spacing: 0.06em;

    color: #718184;
}


/* ========================================
   タイトル
======================================== */

.news-archive-item-title {
    margin: 0 0 14px;

    font-family: "Noto Serif JP", serif;

    font-size: clamp(19px, 2vw, 24px);
    font-weight: 400;
}


.news-archive-item-title a {
    color: #333333;

    text-decoration: none;

    transition: color 0.3s ease;
}


.news-archive-item-title a:hover {
    color: #607a7d;
}


/* ========================================
   本文の一部
======================================== */

.news-archive-excerpt {
    margin-bottom: 16px;

    color: #555555;

    font-size: clamp(14px, 1.3vw, 16px);

    line-height: 1.8;
}


.news-archive-excerpt p {
    margin: 0;
}


/* ========================================
   詳しく見る
======================================== */

.news-archive-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #333333;

    font-size: 14px;

    text-decoration: none;

    border-bottom: 1px solid rgba(51, 51, 51, 0.45);

    padding-bottom: 3px;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.news-archive-link:hover {
    color: #607a7d;

    gap: 13px;
}


/* ========================================
   投稿がない場合
======================================== */

.news-archive-empty {
    margin: 0;

    padding: 40px 0;

    text-align: center;

    font-size: 16px;

    color: #777777;
}


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

@media (max-width: 1024px) {

    .news-archive-section {
        width: 90%;

        padding: 40px 35px;
    }

}


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

@media (max-width: 768px) {

    .news-archive-section {
        width: 92%;

        margin-top: 50px;
        margin-bottom: 80px;

        padding: 30px 20px;

        border-width: 5px;
        border-radius: 20px;

        box-shadow:
            8px 8px 14px rgba(90, 100, 105, 0.18);
    }


    .news-archive-heading {
        margin-bottom: 30px;
    }


    .news-archive-mark {
        font-size: 20px;
    }


    .news-archive-title {
        font-size: clamp(26px, 7vw, 32px);
    }


    .news-archive-item {
        padding: 23px 3px;
    }


    .news-archive-date {
        font-size: 12px;
    }


    .news-archive-item-title {
        font-size: clamp(18px, 5vw, 22px);
    }


    .news-archive-excerpt {
        font-size: 14px;
    }


    .news-archive-section::before {
        top: -15px;
        right: 5px;

        font-size: 110px;
    }

}