@charset "UTF-8";
/*==============================================================================
1.ページタイトル
2.カテゴリ一覧
3.カテゴリ/アーカイブページのタイトル
4.新着記事
5.記事一覧
6.記事がない場合
7.ブログと不動産情報のデザイン
==============================================================================*/

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

	1.ページタイトル・共通

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

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

	2.カテゴリ一覧

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

/*======= カテゴリ一覧 =======*/
ul.cate-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    & li{
        flex: 0 0 auto;
        display: contents;

        & a{
            padding: 0px 10px;
            display: block;
            position: relative;
            border: 1px solid var(--color-font);
            border-radius: 1.5em;
            color: var(--color-font);
            font-family: var(--font-sub);
            text-align: center;
        }

        &:hover,
        &.current{
            & a{
                color: #fff;
                background-color: var(--color-font);
            }
        }
    }
}
/* ========== カテゴリページ */
.category{
    & ul.cate-list{
        & li{
            & a{
                &::after {
                    transform: translateY(-50%) rotate(-45deg);
                }
            }
        }
    }
}

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

	カテゴリ一覧 PC

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

    /*======= カテゴリ一覧 =======*/
    ul.cate-list{
        & li{
            & a{
                padding: 5px 30px;
            }
        }
    }

}


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

	3.カテゴリ/アーカイブページのタイトル

==============================================================================================================================================================
============================================================================================================================================================*/
#sub-title{
    margin-top: 60px;
    text-align: center;
    font-size: 1.8rem;
    font-weight: var(--weight-bold);
    font-family: var(--font-sub);
}
.cate-list_wrap + #sub-title{
    margin-top: 30px;
}

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

	カテゴリ/アーカイブページのタイトル PC

==============================================================================*/
@media all and (min-width: 769px){
    #sub-title{
        margin-top: 100px;
        font-size: 2.2rem;
    }
    .cate-list_wrap + #sub-title{
        margin-top: 60px;
    }
}


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

	4.記事一覧

==============================================================================================================================================================
============================================================================================================================================================*/
#sub-title + .post_wrap{
    margin-top: 25px;
}
.post_wrap {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px 5px;
}
.post_wrap article {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    background-color: #e2d9c7;

    /* 最初の記事 */
    &.new{
        width: 100%;
        position: relative;

        &::before{
            content: 'NEW POST'; 
            padding: 5px 10px 7px;
            display: block;
            position: absolute;
            left: 0px;
            top: -10px;
            background: var(--color-sub);
            color: var(--color-font);
            z-index: 1;
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
            font-size: 1.8rem;
            line-height: 1;
        }
    }

    /*======= 画像 =======*/
    & .img_wrap {
        width: 100%;
        display: block;
        position: relative;
        aspect-ratio: 16 / 9;
        transition: 500ms;
        order: 1;
        overflow: hidden;

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

    /*======= テキスト部分 =======*/
    & .text_area {
        padding: 10px 20px;
        width: 100%;
        order: 2;
    }

    /*======= 記事タイトル =======*/
    & .article-title {
        font-size: 1.8rem;
        font-family: var(--font-sub);
        font-weight: var(--weight-bold);
        line-height: 1.4;

        & a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-family: var(--font-ver1);
            font-weight: var(--weight-bold);
            color: var(--color-font);
        }
    }

    /*======= 記事本文 =======*/
    & .article-text {
        margin-top: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: var(--color-font);
    } 

    /*======= カテゴリ&日付&タグ =======*/
    & .cate-date{
        margin-top: 10px;
        display: flex;
        align-items: center;
        gap: 0 10px;

        /* カテゴリ */
        & .cate{
            display: inline-block;
            padding: 3px 10px 5px;
            border: 1px solid #000;
            border-radius: 1.5em;
            color: var(--color-font);
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
            font-size: 1.2rem;
            line-height: 1;
        }

        /* 日付 */
        & .date{
            font-size: 1.2rem;
            font-family: var(--font-sub);
            font-weight: var(--weight-bold);
        }
    }
}

.button_wrap{
    margin-top: 30px;
    text-align: center;

    & a{
        width: calc(100% - 40px);
    }
}

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

	記事一覧 PC

==============================================================================*/
@media all and (min-width: 769px){
    #sub-title + .post_wrap{
        margin-top: 25px;
    }
    .post_wrap {
        margin-top: 30px;
        margin-left: 0;
        width: 100%;
    }
    .post_wrap article {
        width: calc( (100% - 10px) / 3);

        /*========== 最初の記事 /*==========*/
        &.new{
            padding: 0;
            flex-direction: row;

            &::before{
                content: none;
            }
            & .img_wrap {
                width: 500px;
            }

            & .text_area {
                padding-left: 50px;
                width: calc(100% - 500px);

                &::before{
                    content: 'NEW POST'; 
                    margin-bottom: 15px;
                    padding: 5px 10px 7px;
                    display: inline-block;
                    background: var(--color-sub);
                    color: var(--color-font);
                    z-index: 1;
                    font-family: var(--font-sub);
                    font-weight: var(--weight-bold);
                    font-size: 1.8rem;
                    line-height: 1;
                }

                /*======= 記事タイトル =======*/
                & .article-title {
                    font-size: 2rem;
                }

                /*======= 記事本文 =======*/
                & .article-text {
                    -webkit-line-clamp: 3;
                } 
            }
        }
        /*========== 最初の記事 end /*==========*/


        /*======= 記事タイトル =======*/
        & .article-title {
            font-size: 1.8rem;
        }
    }

    .button_wrap{
        margin-top: 60px;

        & a{
            max-width: 400px;
        }
    }
}

@media all and (min-width: 769px){
    #sub-title + .post_wrap{
        margin-top: 25px;
    }
}



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

	6.記事がない場合

==============================================================================================================================================================
============================================================================================================================================================*/
.not-found{
    margin-top: 50px;
    width: 100%;
    text-align: center;
}



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

	7.ブログと不動産情報のデザイン

==============================================================================================================================================================
============================================================================================================================================================*/
#blog,
#realestate{
    margin-top: 50px;

    & .title_wrap{
        padding-top: 100px;
        position: relative;

        &::after{
            content: "";
            width: 482px;
            aspect-ratio: 482 / 82;
            position: absolute;
            top: 0;
            left: -90px;
            background: url(../1_img/base/deco-mountain_b.svg) no-repeat center /100% auto;
        }
    }
}

/* ========== realestate ========== */
#realestate{
    padding: 80px 0;
    background: var(--bg-img) no-repeat center / cover;
}


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

	ブログと不動産情報のデザイン PC

==============================================================================*/
@media all and (min-width: 769px){
    #blog,
    #realestate{
        margin-top: 100px;

        & .title_wrap{
            padding-top: 133px;

            &::after{
                width: 783px;
                left: -113px;
            }
        }
    }
}