@charset "UTF-8";
/*==============================================================================
1.ページタイトル
2.記事
3.見出し・その他コンテンツ部分
==============================================================================*/

/*============================================================================================================================================================
==============================================================================================================================================================

	1.ページタイトル

==============================================================================================================================================================
============================================================================================================================================================*/
#title{
    background-image: url(../1_img/blog/title.jpg);
}

/*============================================================================================================================================================
==============================================================================================================================================================

	2.記事

==============================================================================================================================================================
============================================================================================================================================================*/
#content .column-two{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
#content .article{
    width: 620px;
}
/*======= カテゴリ&日付 =======*/
#content .content-post .cate-date{
    margin: 10px 0 30px;
    display: flex;
    align-items: center;
    gap: 0 20px;
}
#content .content-post .cate a{
    min-width: 100px;
    padding: 10px;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 1.2rem;
    font-weight: var(--weight-bold);
    background-color: var(--color-main);
    line-height: 1;
}
#content .content-post .date{
    font-size: 1.5rem;
    font-family: var(--font-en);
    font-weight: var(--weight-semibold);
}
/*==============================================================================

	記事タイトル部分

==============================================================================*/
@media all and (max-width: 768px){
    #content .column-two{
        flex-direction: column;
    }
    #content .article{
        width: 100%;
    }
}




/*============================================================================================================================================================
==============================================================================================================================================================

	3.記事タイトル・見出し・その他コンテンツ部分

==============================================================================================================================================================
============================================================================================================================================================*/
/*==============================================================================

	見出し・その他コンテンツ部分 スマホ

==============================================================================*/
@media all and (max-width: 768px){
    /* 見出し */
    #content h1{
        padding-right: 0px;
        min-height: auto;
        font-size: 2rem;
    }
    #content h1::before {
        content: none;
    }
    #content .entry-content h2{
        margin-bottom: 20px;
        border-radius: 8px;
        font-size: 1.8rem;
    }
    #content .entry-content h3{
        margin-bottom: 20px;
        font-size: 1.6rem;
    }
    #content .entry-content h4{
        margin-bottom: 20px;
        font-size: 1.6rem;
    }
    /* 画像 */
    #content .entry-content figure {
        margin-bottom: 20px;
    }
    /* 吹き出し */
    #content .entry-content .is-style-fukidashi{
        margin-bottom: 20px;
        font-size: 1.6rem;
    }
    /* 段落 */
    #blog_content .entry-content p{
        margin-bottom: 20px;
    }
}



/*============================================================================================================================================================
==============================================================================================================================================================

	関連記事

==============================================================================================================================================================
============================================================================================================================================================*/
#content .yarpp{
    margin: 40px -20px 0;
    float: none;
    width: calc(100% + 40px);

    & h2{
        text-align: center;
        font-weight: var(--weight-bold);
        font-size: 1.8rem;
    }

    & .inner{
        padding-top: 40px;
        padding-bottom: 40px;
        border-top: 2px solid var(--color-font);
        border-bottom: 2px solid var(--color-font);
    }
}
#content .yarpp .post_wrap{
    margin-top: 30px;
    display: flex;
    gap: 0 20px;

    & article{
        width: calc( (100% - 20px) / 2 );
        display: flex;
        flex-direction: column;
        gap: 10px;

        & .text_area{
            order: 2;

            /* タイトル */
            & .article-title {
                margin-top: 10px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;

                & a{
                    color: var(--color-font);
                    font-size: 1.6rem;
                    font-weight: var(--weight-bold);
                        
                }
            }

            /* カテゴリと日付 */
            & .cate-date{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                line-height: 1;
                gap: 10px;
                font-weight: var(--weight-bold);

                & .cate{
                    min-width: 80px;
                    padding: 5px 10px;
                    background-color: var(--color-main);
                    color: #fff;
                }

                & .date{
                    color: var(--color-font);
                }
            }
        }

        & .img_wrap{
            order: 1;
            aspect-ratio: 16 / 9;

            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }

        &:nth-child(3){
            display: none;
        }
    }
}


/*==============================================================================

	関連投稿 PC

==============================================================================*/
@media all and (min-width: 769px){

    #content .yarpp{
        margin-top: 60px;

        & h2{
            font-size: 2.2rem;
        }

        & .inner{
            padding-top: 60px;
            padding-bottom: 0px;
            border-bottom: none;
        }

        & .post_wrap{
            margin-top: 50px;
            gap: 0 40px;

            & article{
                width: calc( (100% - 80px) / 3 );

                & .text_area{
                    order: 2;

                    /* タイトル */
                    & .article-title {
                        margin-top: 10px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;

                        & a{
                            color: var(--color-font);
                            font-size: 1.6rem;
                            font-weight: var(--weight-bold);
                                
                        }
                    }

                    /* カテゴリと日付 */
                    & .cate-date{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: flex-start;
                        line-height: 1;
                        gap: 10px;
                        font-weight: var(--weight-bold);

                        & .cate{
                            min-width: 80px;
                            padding: 5px 10px;
                            background-color: var(--color-main);
                            color: #fff;
                        }

                        & .date{
                            color: var(--color-font);
                        }
                    }
                }

                & .img_wrap{
                    order: 1;
                    aspect-ratio: 16 / 9;

                    & img{
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                &:nth-child(3){
                    display: flex;
                }
            }
        }
    }
}


@media all and (max-width: 768px){
    footer{
        margin-top: 0;
    }
}