@charset "UTF-8";
/*==============================================================================
1.ページタイトル
2.カテゴリ&タグ
3.その他情報
==============================================================================*/
#pankuzu{
    background-color: #fff;

    & ul {
        & li {
            color: var(--color-font);

            &:not(:first-child) {

                &::before {
                    color: var(--color-font);
                }
            }
        }
    }
}
#content{
    padding-top: 20px;
    background-color: #fff;
}

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

	1.ページタイトル

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

h1 span{
    display: block;
    font-size: 60%;
}

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

	2.カテゴリ&タグ

==============================================================================================================================================================
============================================================================================================================================================*/
#content .cate-tag {
    margin: 10px 0 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;

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

    /* カテゴリ */
    & .tags{
        padding: 0 10px 2px;
        min-width: 70px;
        display: inline-block;
        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;
        }
    }
}



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

	お気に入りの表示・非表示 / お気に入りボタン

==============================================================================================================================================================
============================================================================================================================================================*/
.favorite-display{
    pointer-events: none;
    padding-left: 20px;

    & .simplefavorite-button{
        padding-left: 25px;
        display: none;
        position: relative;
        font-family: var(--font-sub);
        font-weight: var(--weight-bold);
        color: var(--color-sub);

        & p{
            margin: 0;
        }

        &::before{
            content: "";
            width: 20px;
            aspect-ratio: 1 / 1;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            background: url(../1_img/base/icon-favorite_gold.svg) no-repeat center / 100% auto;
        }
    }
    & .active{
        margin-bottom: 5px;
        display: block;
        opacity: 1;
    }
}

.favorite-button{
    text-align: center;

    & .simplefavorite-button{
        width: 80%;
        max-width: 400px;
        padding: 20px;
        display: inline-block;
        background-color: #000;
        color: #fff;
        font-family: var(--font-sub);
        font-size: 1.4rem;
        font-weight: var(--weight-bold);
        opacity: 1;
        cursor: pointer;
        transition: 500ms;

        &:hover{
            opacity: 0.6;
        }

        & p{
            margin: 0;
            padding-left: 35px;
            display: inline-block;
            position: relative;

            &::before{
                content: "";
                width: 20px;
                aspect-ratio:  1 / 1;
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                background: url(../1_img/base/icon-favorite_white.svg) no-repeat center / 100% auto;
            }
        }
    }
}
@media all and (min-width: 769px) {
    .favorite-button{
        & .simplefavorite-button{
            font-size: 1.6rem;
        }
    }
}



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

	関連記事

==============================================================================================================================================================
============================================================================================================================================================*/
#content .yarpp{
    margin: 0;
    margin-top: 80px;
    padding: 50px 0;
    background-color: #ccc;
}
#content .yarpp h2{
    text-align: center;
    font-size: 2.2rem;
}
#content .yarpp .post_wrap{
    margin-top: 50px;
    display: flex;
    gap: 0 40px;
}
#content .yarpp .post_wrap article{
    width: calc(100% / 3 - 80px);
    display: flex;
    flex-direction: column;
}
#content .yarpp .post_wrap article .text_area{
    order: 2;
}
/*======= タイトル =======*/
#content .yarpp .post_wrap article .article-title{
    margin-top: 10px;
    line-height: 1.4;
    font-size: 2rem;
}
#content .yarpp .post_wrap article .article-title a{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-family: var(--font-ver1);
    font-weight: var(--weight-medium);
}
/*======= カテゴリ&日付 =======*/
#content .yarpp .post_wrap article .cate-date{
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 20px;
}
#content .yarpp .post_wrap article .cate{
    width: 80px;
}
#content .yarpp .post_wrap article .cate a{
    padding: 5px 0;
    display: block;
    color: #fff;
    text-align: center;
    border-radius: 15px;
    background-color: var(--color-main);
    font-size: 1.2rem;
    font-weight: var(--weight-bold);
    line-height: 1;
}
#content .yarpp .post_wrap article .date{
    font-size: 1.5rem;
    font-family: var(--font-en);
    font-weight: var(--weight-semibold);
}
#content .yarpp .post_wrap article .img_wrap{
    order: 1;
    border: 1px solid #fff;
}
#content .yarpp .post_wrap article .img_wrap img{
    width: 100%;
}


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

	関連投稿 スマホ

==============================================================================*/
@media all and (max-width: 768px){

    #content .yarpp h2{
        text-align: center;
        font-size: 1.8rem;
    }
    #content .yarpp{
        margin: 40px -20px 0;
        float: none;
        width: calc(100% + 40px);
    }
    #content .yarpp .post_wrap{
        margin-top: 30px;
        gap: 0 20px;
        justify-content: space-between;
    }
    #content .yarpp .post_wrap article{
        width: calc(100% / 2 - 20px);
    }
    
    /*======= カテゴリ&日付 =======*/
    #content .yarpp .post_wrap article .cate-date{
        margin-top: 15px;
        flex-direction: column;
        align-items: start;
        gap: 5px 0;
    }
    #content .yarpp .post_wrap article .cate-date .cate a{
        font-size: 1rem;
    }    
    #content .yarpp .post_wrap article .cate-date .date{
        font-size: 1.2rem;
    }
    /*======= タイトル =======*/
    #content .yarpp .post_wrap article .article-title{
        margin-top: 10px;
        padding-right: 0px;
        font-size: 1.6rem;
    }
    #content .yarpp .post_wrap article .article-title a{
        -webkit-line-clamp: 2;
    }
}


@media all and (max-width: 768px){
    .underlayer .content{
        padding-bottom: 0;
    }
    footer{
        margin-top: 0;
    }
}


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

	3.その他情報

==============================================================================================================================================================
============================================================================================================================================================*/
#content .content-info{
    margin-top: 40px;
    padding: 40px 0;
    background-color: #eee;

    /* 設計・ブランディング */
    & .info-top_wrap{
        display: flex;
        justify-content: center;

        & .info-top{
            & dl{
                display: flex;
                flex-direction: column;

                & + dl{
                    margin-top: 10px;
                }
            }
            & dt{
                font-weight: normal;
            }
            & a{
                margin-right: 5px;
                padding-right: 16px;
                display: inline-block;
                position: relative;
                color: var(--color-font);
                text-decoration: underline;
                
                &::after {
                    width: 10px;
                    aspect-ratio: 1 / 1;
                    content:"";
                    position: absolute;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    background: url(../1_img/base/icon-window.svg);
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                }
            }
        }
    }

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

    /* 施工実績一覧 */
    & .info-works{
        margin-top: 40px;
        padding-top: 40px;
        border-top: 1px solid var(--color-font);

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

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

}
@media all and (min-width: 769px) {
    #content .content-info{
        margin-top: 100px;
        padding: 60px 0;

        /* 設計・ブランディング */
        & .info-top_wrap{
            justify-content: left;

            & .info-top{
                & dl{
                    flex-direction: row;
                }
            }
        }

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

.underlayer .content{
    padding-bottom: 0;
}
footer{
    margin-top: 0;
}