@charset "UTF-8";

/* =====================================================================
    色設定
======================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&display=swap');

:root {
    /* テキストカラー */
    --color_text: #100923;
    /* アクセントカラー1 */
    --color_accent1: #87010d;
    /* アクセントカラー2 */
    --color_accent2: #ffffff;
}


/* =====================================================================
    style
======================================================================*/
.gDef-top-banner {
    background: #ffffff;
}

.wrapper {
    background: #f5ffff;
}

.wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    aspect-ratio: 750 / 764;
    background-image: url(../images/common_bg02_sp.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

@media screen and (min-width: 768px) {
    .wrapper::after {
        aspect-ratio: 1600 / 1081;
        background-image: url(../images/common_bg02_pc.jpg);
    }
}

.article-header h1,
.article-contents h2,
.article-contents h3,
.sns-share>p {
    font-family: "Noto Serif JP", serif;
}

.article-inner,
.header-link li a {
    color: var(--color_text);
}

.sns-share-list li svg {
    fill: var(--color_text);
}

.sns-share-list li.linkShare svg {
    stroke: var(--color_text);
}

.article-contents p span,
.article-contents p a:hover,
.article-header time,
.header-link li a:hover {
    color: var(--color_accent1);
}

.article-contents p a {
    color: var(--color_accent1);
    text-decoration: underline 1px var(--color_accent1);
}

.article-contents h2 span {
    line-height: 1.8;
    color: var(--color_text);
    /*background-color: var(--color_accent2);*/
}

.article-contents h3 {
    color: var(--color_text);
    border-left-color: var(--color_text);
}

.article-header time::after,
.sns-share {
    border-top-color: var(--color_accent1);
}

.article-contents p strong {
    color: var(--color_accent2);
    background-color: var(--color_accent1);
}

#article_template .btn-back a {
    color: var(--color_accent2);
    background-color: var(--color_accent1);
}