@charset "UTF-8";
/*==============================================================================
1.ページタイトル
2.記事
3.カテゴリ&日付&タグ
4.記事内容
5.ページネーション
==============================================================================*/

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

	1.ページタイトル

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

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

	2.記事とサイドバーの位置

==============================================================================================================================================================
============================================================================================================================================================*/
.underlayer .content{
    padding-top: 20px;
}
#content .column-two{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
}

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

	記事とサイドバーの位置 PC

==============================================================================*/
@media all and (min-width: 769px){
    .underlayer .content{
        padding-top: 100px;
    }
    #content .column-two{
        flex-direction: row;
    }
}


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

	3.カテゴリ&日付&タグ

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

/*======= カテゴリ&日付&タグ =======*/
#content .content-post .cate-and{
    margin: 10px 0 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;

    /* カテゴリ */
    & .cate{
        margin-right: 5px;
        min-width: 80px;
        display: inline-block;
        padding: 0 10px 2px;
        display: block;
        text-align: center;
        color: #fff;
        background-color: #000;
        font-family: var(--font-sub);
        font-weight: var(--weight-bold);
        font-size: 1.2rem;
    }

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

    /* タグ */
    & .tags{
        padding: 0 10px 2px;
        min-width: 70px;
        text-align: center;
        color: var(--color-font);
        font-family: var(--font-sub);
        font-weight: var(--weight-bold);
        font-size: 1.2rem;
        border: 1px solid var(--color-font);
        border-radius: 20px;

        &:hover{
            background-color: var(--color-sub);
            border-color: var(--color-sub);
            color: #fff;
            opacity: 1;
        }
    }
}



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

	4.記事内容

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

#content .article{
    width: 100%;

    & .main-img{
        margin-left: -20px;
        width: calc(100% + 40px);
    }

    /*======= スライダー =======*/
    & .slider-realestate{
        &.slick-dotted{
            padding-bottom: 20px;
        }
        & .slick-slide{
            width: 100%;
            aspect-ratio: 3 / 2;
            overflow: hidden;

            & img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
        & .slick-dots{
            bottom: 0;

            & li{
                width: 8px;
            }

            & li button{
                background-color: #999999;
            }
            & li.slick-active button{
                background-color: #d9d9d9;
            }
        }
        & .slick-arrow{
            width: 30px;
            background: rgb(255 255 255 / 0.5);
            border: unset;

            &.prev {
                left: 10px;
                transform: translateY(-50%) translateX(0);
            }
            &.next {
                right: 10px;
                transform: translateY(-50%) translateX(0);
            }
        }
        & .slick-arrow:hover{
            background: rgb(0 0 0 / 0.5);
        }
    }

    /*======= スライダー =======*/
    & .map{
        & iframe{
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }
    }
}
/*==============================================================================

	記事内容 pc

==============================================================================*/
@media all and (min-width: 769px){
    #content .article{
        width: 620px;

        & .main-img{
            margin-left: 0;
            width: calc(100%);
        }
    }
}


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

	5.ページネーション

==============================================================================================================================================================
============================================================================================================================================================*/
#content .navi-return_wrap{
    margin-top: 40px;
    margin-left: -20px;
    padding: 30px 20px;
    width: calc(100% + 40px);
    background: var(--bg-img);

    & .page-navi{
        margin-top: 0;

        & .page-navi-list{
            margin-top: 0;
        }
    }

    & .return{
        margin-top: 20px;
    }
}
/*==============================================================================

	ページネーション pc

==============================================================================*/
@media all and (min-width: 769px){
    #content .navi-return_wrap{
        margin-top: 80px;
        margin-left: 0;
        padding: 0;
        width: 100%;
        background: none;

        & .return{
            margin-top: 30px;
        }
    }
}