/**
* Single Pages Styles
* 投稿ページ（NEWS お知らせ）のスタイル
*/

/**
* カテゴリーと日付
*/
.news-meta {
    margin-bottom: 16px;
    text-align: right;

    .news-meta__category {
        background-color: #CCE6F6;
        font-size: 0.75rem;
        display: inline-block;
        margin-right: 8px;
        padding: 0.25rem 0.5rem;
    }

    .news-meta__date {
        font-size: clamp(0.75rem, 0.67rem + 0.33vw, 0.875rem);
        display: inline-block;
    }
}




/**
* 見出し
* h2は既存の contents-title を使用
*/
.aomidashi {
    background: var(--color-main);
    color: var(--color-sub-yellow);
    font-size: clamp(0.875rem, 0.635rem + 0.98vw, 1.25rem);
    margin: 16px 0;
    padding: 6px 12px;
}

/**
* 見出し番号
* data-number 属性を使用して番号を表示
* 例: <h2 class="contents-heading--lv3 contents-heading-number" data-number="1">見出しタイトル</h2>
* このクラスは、見出しの前に番号を表示するために使用されます。
*/
.bangomidashi {
    font-size: clamp(0.875rem, 0.635rem + 0.98vw, 1.25rem);
    display: flex;
    align-items: center;
    margin: 16px 0;

    &::before {
        content: attr(data-number);
        background: var(--color-main);
        border-radius: 9999px;
        color: #FFF;
        font-weight: 700;
        display: grid;
        place-content: center;
        margin-right: 8px;
        padding-bottom: 3px;
        width: 23px;
        height: 23px;
    }
}




/**
* 点線セパレーター
*/
.tensen {
    border-top: 2px dotted;
}




/**
* お知らせ一覧へ戻るボタン
*/
.news-back-button {
    margin-top: 50px;
}




/**
* Media Queries
*/
@media (min-width: 768px) {
}