@charset "UTF-8";
/* --------------------------------------
    フロントエンド側、管理画面側ともに
    functions.phpでコンテンツの親が
    「.news-post-body」になるように設定
    ※投稿タイプ：news
-------------------------------------- */
:root {
    --color-surface: #F9F9F9;
    --color-on-surface: #1C1C1C;
    --fluid-24-32: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
    --fluid-40-56: clamp(2.5rem, 2.1479rem + 1.5023vw, 3.5rem);
    /* fs(=font-size) 18-20px */
    --fs-18-20: clamp(1.125rem, 1.081rem + 0.1878vw, 1.25rem);
}

.news-post-body h1,h2,h3,h4,h5,h6 {
    font-feature-settings: "palt" 1;
}

/* h1 */
.news-post-body h1 {
    padding: 1rem 0;
    border-bottom: solid var(--color-on-surface) 1px;
    font-feature-settings: "palt" 1;
    text-align: initial;
    font-weight: 700;
    font-size: var(--fluid-24-32);
    letter-spacing: .05em;
    line-height: 1.6;
    margin-bottom: var(--fluid-40-56);
}

/* H1以外未定、仮スタイル */
.news-post-body h2,
.news-post-body h3 {
    font-weight: 700;
    font-size: var(--fs-18-20);
    letter-spacing: .05em;
    line-height: 1.6;
    margin-bottom: 1rem;
    /* H2,H3,H4のみtop余白つける */
    margin-top: 1rem;
}
@media (max-width: 768px) {
    .news-post-body h2,
    .news-post-body h3 {
        line-height: 1.55;
    }
}

.news-post-body h4,
.news-post-body h5,
.news-post-body h6 {
    font-weight: 500;
    font-size: var(--fs-18-20);
    letter-spacing: .05em;
    line-height: 1.6;
    margin-bottom: 1rem;
    /* top余白つける */
    margin-top: 1rem;
}

.news-post-body p {
    font-feature-settings: "palt" 0;
    line-break: strict;
    text-autospace: ideograph-alpha;
    text-align: justify;
    text-justify: inter-character;
}

.news-post-body p:not(.news-detail__date) {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 2;
    /* 見出しmargin-topに相殺されないようにpadding指定 */
    padding-bottom: 1rem;
}

/* 日付 p */
.news-post-body p.news-detail__date {
    font-family: "Poppins", sans-serif;
    line-height: 1;
    font-size: 0.875rem;
    letter-spacing: .08em;
    margin-bottom: 0;
}
/* 画像 */
.news-post-body figure.wp-block-image {
    padding: 1rem 0;
}
/* hr */
.news-post-body hr.wp-block-separator {
    width: 100%;
    border-top: none;
    height: .063rem;
    background-color: var(--color-outline);
    margin: 1rem 0;
}

.news-post-body a:not(.wp-block-image > a) {
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .5em;
    letter-spacing: .06em;
    line-height: 1.5;
    padding: .25rem 0;
    position: relative;
    display: inline-block;
    /* テキストホバーアニメ用の設定 */
    background-image: linear-gradient(
        to right,
        var(--color-outline) 50%, /* ホバー後の色（グレー） */
        var(--color-on-surface) 50% /* 初期の色（黒） */
    );
    background-size: 200% 100%;
    background-position: 100% 0; /* 最初は黒い部分を見せる */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* アイコン分の余白を確保 */
    margin-right: 2rem;
}

.news-post-body a:hover {
     /* ホバーでグレー側へスライド */
    background-position: 0 0;
}

/* アイコン（矢印）の設定 */
.news-post-body a::after {
    position: absolute;
    content: '';
    width: 1.063rem;
    height: 1.125rem;
    /* 親(aタグ)の背景グラデーションをそのまま継承 */
    background: inherit;
    -webkit-background-clip: initial; /* テキスト用設定をリセット */
    background-clip: initial;
    /* 矢印の形で「マスク」をかける */
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMzE3MzgzIDE3LjI4M0w3LjkxMjggOC43ODkzMkwwLjMxNzM4MyAwLjI4Mjk1OSIgc3Ryb2tlPSIjMUMxQzFDIiBzdHJva2Utd2lkdGg9IjAuODUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNOC43MjI2NiAxNy4yODNMMTYuMzE3IDguNzg5MzJMOC43MjI2NiAwLjI4Mjk1OSIgc3Ryb2tlPSIjMUMxQzFDIiBzdHJva2Utd2lkdGg9IjAuODUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4=');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNyAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuMzE3MzgzIDE3LjI4M0w3LjkxMjggOC43ODkzMkwwLjMxNzM4MyAwLjI4Mjk1OSIgc3Ryb2tlPSIjMUMxQzFDIiBzdHJva2Utd2lkdGg9IjAuODUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNOC43MjI2NiAxNy4yODNMMTYuMzE3IDguNzg5MzJMOC43MjI2NiAwLjI4Mjk1OSIgc3Ryb2tlPSIjMUMxQzFDIiBzdHJva2Utd2lkdGg9IjAuODUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8L3N2Zz4=');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    top: 55%;
    right: -1.5rem;
    transform: translateY(-50%);
}

.news-post-body ul {
    list-style: disc;
    padding-left: 1rem;
}