@charset "UTF-8";
/*==============================================================================
1.ページタイトル
2.記事
==============================================================================*/

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

	1.ページタイトル

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

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

	2.記事

==============================================================================================================================================================
============================================================================================================================================================*/
#content h1{
    padding-bottom: 20px;
    margin-bottom: 20px;
    position: relative;
    font-size: 2.8rem;
    background-image: url(../1_img/base/pattern-wave-yellow-s.svg);
    background-repeat: repeat-x;
    background-size: auto 4px;
    background-position: left bottom;
}
/*======= カテゴリ&基本情報 =======*/
#content .content-post .cate-info{
    display: flex;
    align-items: start;
    gap: 0 10px;
}
#content .content-post .cate-info .cate{
    padding: 5px 10px;
    display: inline-block;
    background-color: var(--color-base);
    border-radius: 20px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}
/*======= 説明 =======*/
#content .content-post .text{
    margin-top: 20px;
}
/*======= 画像 =======*/
#content .content-post .img-wrap{
    margin-top: 20px;
}
#content .content-post .img-wrap > div{
    overflow: hidden;
    border-radius: 15px;
}
#content .content-post .img-wrap > div + div{
    margin-top: 15px;
}
#content .content-post .img-wrap > div img{
    width: 100%;
}
/*==============================================================================

	記事 スマホ

==============================================================================*/
@media all and (max-width: 768px){
    #content h1{
        font-size: 2rem;
    }
    /*======= カテゴリ&基本情報 =======*/
    #content .content-post .cate-info{
        flex-direction: column;
        gap: 10px;
    }
}


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

	4.戻るボタン・ページネーション

==============================================================================================================================================================
============================================================================================================================================================*/
#content .page_navi{
    margin: 40px auto 0;
}

/*==============================================================================
	記事一覧戻るボタン
==============================================================================*/
#content .return{
    margin-top: 70px;
    text-align: center;
}
#content .return a{
    padding-left: 30px;
    display: inline-block;
    position: relative;
    color: var(--color-green);
    font-weight: var(--weight-bold);
}
#content .return a::before{
    content:"";
    width: 9px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(180deg);
    content: "";
    background-image: url(../1_img/base/arrow-green-right.svg);
    background-size: 100% auto;
}

/*==============================================================================
	前後の記事
==============================================================================*/
#content .nav_post_list {
    margin-top: 40px;
    padding: 0px;
    border: none;
    margin-bottom: 0px;
    justify-content: stretch;
    list-style: none;
}
.nav_post_list li{
    margin: 0;
    font-size: 1.4rem;
}
/* 前と後の記事どちらもある場合 */
.nav_post_list.columns_2{
    display: flex;
}
.nav_post_list.columns_2 .previous,
.nav_post_list.columns_2 .next{
    width: 50%;
    flex-basis: 50%;
}
.nav_post_list.columns_2 a{
    padding: 0;
    display: flex;
    height: 100%;
    align-items: center;
}
.nav_post_list.columns_2 a span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.nav_post_list.columns_2 .previous a{
    padding-right: 30px;
    padding-left: 70px;
    justify-content: flex-start;
    text-align: left;
}
.nav_post_list.columns_2 .next a{
    padding-right: 70px;
    padding-left: 30px;
    justify-content: flex-end;
    text-align: left;
}
.nav_post_list.columns_2 .next{
    border-left: 1px solid var(--color-base);
}

/* 前の記事しかない場合 */
#content .nav_post_list.columns_1_prev{
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: left;
}
.nav_post_list.columns_1_prev a{
    display: block;
    padding-left: 70px;
}
.nav_post_list.columns_1_prev a span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 1.4rem;
}
/* 次の記事しかない場合 */
#content .nav_post_list.columns_1_next{
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: right;
}
.nav_post_list.columns_1_next a{
    display: block;
    padding-right: 70px;
}
.nav_post_list.columns_1_next a span{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    font-size: 1.4rem;
}
/* 共通 */
.nav_post_list a{
    font-size: 1.4rem;
    position: relative;
    transition: 500ms;
    color: #5b5757;
}
.nav_post_list a:hover{
    opacity: 0.6;
}
/* 矢印 */
.nav_post_list a::after{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    content: "";
    background-size: cover;
    transition: 500ms;
}
.nav_post_list .previous a::after{
    left: 0px;
    background-image: url(../1_img/blog/page-prev.svg);
}
.nav_post_list .next a::after{
    right: 0px;
    background-image: url(../1_img/blog/page-next.svg);
}
/*==============================================================================

	戻るボタン・ページネーション スマホ

==============================================================================*/
@media all and (max-width: 768px){
    .nav_post_list {
        margin-top: 30px;
    }

    /*==============================================================================
        記事一覧戻るボタン
    ==============================================================================*/
    #content .return{
        margin-top: 35px;
    }

    /* 前と後の記事がある場合 */
    .nav_post_list.columns_2 .previous a{
        padding-right: 10px;
        padding-left: 40px;
    }
    .nav_post_list.columns_2 .next a{
        padding-right: 40px;
        padding-left: 10px;
    }    
    /* 前の記事しかない場合 */
    .nav_post_list.columns_1_prev a{
        padding-left: 40px;
    }
    /* 次の記事しかない場合 */
    .nav_post_list.columns_1_next a{
        padding-right: 40px;
    }
    /* 矢印 */
    .nav_post_list a::after{
        width: 30px;
        height: 30px;
    }
    .nav_post_list a{
        font-size: 1.2rem;
    }
}