/* ========================================
   お知らせ詳細ページ
======================================== */

.single-news-section {
    position: relative;

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

    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;
}


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

.single-news-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;
}


.single-news-section > * {
    position: relative;

    z-index: 1;
}


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

.single-news-heading {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 18px;
}


.single-news-mark {
    margin-top: 5px;

    font-size: 24px;

    color: #333333;
}


.single-news-en {
    margin: 0 0 6px;

    font-family: "Inria Serif", serif;

    font-size: 11px;

    letter-spacing: 0.24em;

    color: #72888a;
}


.single-news-title {
    margin: 0;

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

    font-size: clamp(27px, 3vw, 40px);
    font-weight: 400;

    line-height: 1.5;

    color: #333333;
}


/* ========================================
   投稿日
======================================== */

.single-news-date {
    display: block;

    margin: 0 0 35px;
    padding-bottom: 18px;

    font-family: "Inria Serif", serif;

    font-size: 14px;

    letter-spacing: 0.06em;

    color: #718184;

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


/* ========================================
   本文
======================================== */

.single-news-content {
    color: #444444;

    font-size: clamp(15px, 1.4vw, 18px);

    line-height: 2;
}


.single-news-content p {
    margin: 0 0 24px;
}


.single-news-content h2 {
    margin: 50px 0 20px;

    padding-bottom: 10px;

    font-size: clamp(22px, 2.3vw, 28px);
    font-weight: 400;

    border-bottom: 1px solid rgba(80, 100, 105, 0.25);
}


.single-news-content h3 {
    margin: 40px 0 18px;

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


/* 投稿に画像を入れた場合 */
.single-news-content img {
    max-width: 100%;
    height: auto;

    margin: 20px auto;

    border-radius: 15px;
}


/* ========================================
   一覧へ戻る
======================================== */

.single-news-back {
    margin-top: 60px;

    padding-top: 25px;

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


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

    gap: 9px;

    color: #333333;

    font-size: 15px;

    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;
}


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

    gap: 14px;
}


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

.single-news-empty {
    margin: 0;

    padding: 40px 0;

    text-align: center;

    font-size: 16px;

    color: #777777;
}


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

@media (max-width: 1024px) {

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

        padding: 40px 35px;
    }

}


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

@media (max-width: 768px) {

    .single-news-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);
    }


    .single-news-heading {
        gap: 10px;

        margin-bottom: 15px;
    }


    .single-news-mark {
        font-size: 19px;
    }


    .single-news-title {
        font-size: clamp(23px, 6vw, 29px);
    }


    .single-news-date {
        margin-bottom: 28px;

        font-size: 12px;
    }


    .single-news-content {
        font-size: 15px;

        line-height: 1.9;
    }


    .single-news-back {
        margin-top: 45px;
    }


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

        font-size: 110px;
    }

}