/*======================================
  Article / Single Post
======================================*/


/*--------------------------------------
 Main
--------------------------------------*/

.article-main{

    width:100%;

    padding:var(--space-xl) 0 var(--space-2xl);

}


/*--------------------------------------
 Article
--------------------------------------*/

.article{

    width:100%;

}


/*--------------------------------------
 Header
--------------------------------------*/

.article__header{

    margin-bottom:var(--space-xl);

}


/*--------------------------------------
 Title
--------------------------------------*/

.article__title{

    margin:0;

    color:var(--color-primary);

    line-height:1.5;

}


/*--------------------------------------
 Content
--------------------------------------*/

.article__content{

    width:100%;

    line-height:1.9;

    overflow-wrap:break-word;

}


/*--------------------------------------
 Paragraph
--------------------------------------*/

/*
 * 通常段落
 *
 * 基本コンテナの左端から
 * 段落全体を2文字分右へ移動する。
 *
 * さらに段落の先頭行のみ
 * 1文字分字下げする。
 */
.article__content p{

    margin-top:0;

    margin-right:0;

    margin-bottom:1.5em;

    margin-left:2em;

    text-indent:1em;

    font-size :1.1em;


    color:#222;

    font-family:
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;

    font-weight:500;

}

/*--------------------------------------
 Indented Paragraph
--------------------------------------*/

/*
 * 番号付き説明など、
 * 通常段落よりさらに右へ配置する段落。
 *
 * 通常段落：2em
 * インデント段落：4em
 *
 * 「１）」「２）」自体を開始位置とするため、
 * 先頭行の追加字下げは行わない。
 */

.article__content p.article-indent{

    margin-left:4em;

    text-indent:0;

}


/*--------------------------------------
 Heading
--------------------------------------*/

/*
 * 見出しは段落とは違い、
 * 基本コンテナの左端に揃える。
 */

.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content h6{

    clear:both;

    text-indent:0;

}


.article__content h2{

    margin:2em 0 1em;

}


.article__content h3{

    margin:1.8em 0 .8em;

}


.article__content h4{

    margin:1.5em 0 .7em;

}


/*--------------------------------------
 Image
--------------------------------------*/

.article__content img{

    max-width:100%;

    height:auto;

}


.article__content .wp-block-image{

    max-width:100%;
    margin-top: 2rem;
    margin-bottom: 2rem;

}




/*--------------------------------------
 Table
--------------------------------------*/

.article__content table{

    max-width:100%;

}


/*--------------------------------------
 Code
--------------------------------------*/

.article__content pre{

    max-width:100%;

    overflow-x:auto;

}


/*--------------------------------------
 Page Links
--------------------------------------*/

.article__page-links{

    margin-top:var(--space-xl);

}


/*======================================
  Responsive
======================================*/

@media (max-width:768px){

    .article-main{

        padding:var(--space-lg) 0 var(--space-xl);

    }


    /*
     * スマートフォンでは横幅確保のため
     * 通常段落の字下げを1文字にする。
     */

    .article__content p{

        margin-left:1em;

        text-indent:1em;

    }


    /*
     * 番号付きインデント段落。
     *
     * スマートフォンでは通常段落より
     * さらに1文字分だけ右へ配置する。
     */

    .article__content p.article-indent{

        margin-left:2em;

        text-indent:0;

    }

}



.reference-item {
   padding-left: 2.5em;  /* 2行目以降のインデント幅 */
   text-indent: -2.0em!important;  /* 1行目だけを左に戻す */
}


/*======================================
  Statistics Notes Notice
=======================================*/

.statistics-notes-notice {
    margin: 32px 0;
    padding: 20px 24px;
    background-color: #fff8e8;
    border: 1px solid #e5c66d;
    border-left: 4px solid #d6a928;
    border-radius: 6px;
}

.statistics-notes-notice__message {
    margin: 0;
    color: #5f4a16;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    text-align: center;
}

@media (max-width: 767px) {
    .statistics-notes-notice {
        margin: 24px 0;
        padding: 16px 18px;
    }

    .statistics-notes-notice__message {
        font-size: 14px;
        line-height: 1.7;
    }
}