/*---------------------------------------------------*/
/*----- 全体 -----*/
.blog_box_big{
    margin: 0 auto;
    display: flex;
    width: 1240px;
    justify-content: space-between;
}
.blog_box{
    width: 900px;
}
.blog_box_inn li{
    margin: 0 0 30px;
    padding: 0 0 30px;
    border-bottom: 1px dotted #000;
    transition: all .4s;
}
.blog_box_inn li:hover{
    opacity: .6;
    transition: all .4s;
}
.blog_box_inn li:last-of-type{
    margin: 0 0 0;
}
.blog_box_inn li a{
	display: flex;
    align-items: center;
}
/*------------------------------------------*/
/*----- メディアクエリ: 1300px -----*/
@media screen and ( max-width: 1300px ){
    .blog_box_big{
        width: calc(1240 / 1300 * 100vw);
    }
    .blog_box{
        width: calc(900 / 1300 * 100vw);
    }
    .blog_box_inn li{
        margin: 0 0 calc(30 / 1300 * 100vw);
        padding: 0 0 calc(30 / 1300 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_box_big{
        flex-direction: column;
        width: calc(742 / 780 * 100vw);
    }
    .blog_box{
        width: calc(742 / 780 * 100vw);
    }
    .blog_box_inn li{
        margin: 0 0 calc(30 / 780 * 100vw);
        padding: 0 0 calc(30 / 780 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_box_inn li{
        margin: 0 0 calc(45 / 500 * 100vw);
        padding: 0 0 calc(45 / 500 * 100vw);
    }
	.blog_box_inn li a{
		display: block;
	}	
}




/*---------------------------------------------------*/
/*----- サムネイル画像 -----*/
.blog_thumbnail{
    width: 140px;
    height: 110px;
}
.blog_thumbnail>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*------------------------------------------*/
/*----- メディアクエリ: 1300px -----*/
@media screen and ( max-width: 1300px ){
    .blog_thumbnail{
        width: calc(140 / 1300 * 100vw);
        height: calc(110 / 1300 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 900px -----*/
@media screen and ( max-width: 900px ){
    .blog_thumbnail{
        width: calc(140 / 900 * 100vw);
        height: calc(110 / 900 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_thumbnail{
        width: calc(145 / 780 * 100vw);
        height: calc(115 / 780 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_thumbnail{
        width: calc(475 / 500 * 100vw);
        height: calc(290 / 500 * 100vw);
    }
}





/*---------------------------------------------------*/
/*----- タイトル・テキスト -----*/
.blog_content{
    margin-left: 23px;
}
.blog_time{
    font-weight: 500 !important;
}
.blog_title{
    margin: 0 0 5px;
    font-size: 18px;
    color: var(--dark-blue02);
}
.blog_text{
    margin: 0 0 21px;
    width: 740px;
}
.blog_text p{
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
}
/*-- Moreボタン --*/
.blog_more{
    position: relative;
    padding: 5px 25px;
	display: inline-block;
    font-size: 12px;
    color: #fff;
    background-color: #000;
    border: 1px solid #000;
    border-radius: 20px;
    overflow: hidden;
    transition: ease .4s;
    box-sizing: border-box;
}
.blog_more:hover{
    color: #000;
    background-color: transparent;
    transition: ease .4s;
}
/*------------------------------------------*/
/*----- メディアクエリ: 1300px -----*/
@media screen and ( max-width: 1300px ){
    .blog_content{
        margin-left: calc(23 / 1300 * 100vw);
    }
    .blog_time{
        font-size: calc(17 / 1300 * 100vw);
    }
    .blog_title{
        margin: 0 0 calc(5 / 1300 * 100vw);
        font-size: calc(18 / 1300 * 100vw);
    }
    .blog_text{
        margin: 0 0 calc(21 / 1300 * 100vw);
        width: calc(740 / 1300 * 100vw);
        font-size: calc(16 / 1300 * 100vw);
    }
    /*-- Moreボタン --*/
    .blog_more{
        padding: calc(5 / 1300 * 100vw) calc(25 / 1300 * 100vw);
        font-size: calc(12 / 1300 * 100vw);
        border-radius: calc(20 / 1300 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 900px -----*/
@media screen and ( max-width: 900px ){
    .blog_content{
        margin-left: calc(23 / 900 * 100vw);
    }
    .blog_time{
        font-size: calc(16 / 900 * 100vw);
    }
    .blog_title{
        margin: 0 0 calc(5 / 900 * 100vw);
        font-size: calc(16 / 900 * 100vw);
    }
    .blog_text{
        margin: 0 0 calc(27 / 900 * 100vw);
        width: calc(480 / 900 * 100vw);
        font-size: calc(15 / 900 * 100vw);
    }
    /*-- Moreボタン --*/
    .blog_more{
        padding: calc(3 / 900 * 100vw) calc(20 / 900 * 100vw);
        font-size: calc(12 / 900 * 100vw);
        border-radius: calc(20 / 900 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_content{
        margin-left: calc(15 / 780 * 100vw);
    }
    .blog_time{
        font-size: calc(18 / 780 * 100vw);
    }
    .blog_title{
        margin: 0 0 calc(5 / 780 * 100vw);
        font-size: calc(20 / 780 * 100vw);
    }
    .blog_text{
        margin: 0 0 calc(21 / 780 * 100vw);
        width: calc(575 / 780 * 100vw);
        font-size: calc(18 / 780 * 100vw);
    }
    /*-- Moreボタン --*/
    .blog_more{
        padding: calc(3 / 780 * 100vw) calc(20 / 780 * 100vw);
        font-size: calc(14 / 780 * 100vw);
        border-radius: calc(20 / 780 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_content{
        margin: calc(25 / 500 * 100vw) 0 0 0;
    }
    .blog_time{
        font-size: calc(17 / 500 * 100vw);
    }
    .blog_title{
        margin: 0 0 calc(5 / 500 * 100vw);
        font-size: calc(20 / 500 * 100vw);
    }
    .blog_text{
        margin: 0 0 calc(10 / 500 * 100vw);
        width: calc(475 / 500 * 100vw);
        font-size: calc(17 / 500 * 100vw);
    }
    /*-- Moreボタン --*/
    .blog_more{
        margin-left: calc(365 / 500 * 100vw);
        padding: calc(5 / 500 * 100vw) calc(35 / 500 * 100vw);
        font-size: calc(14 / 500 * 100vw);
        border-radius: calc(20 / 500 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 390px -----*/
@media screen and ( max-width: 390px ){
    /*-- Moreボタン --*/
    .blog_more{
        padding: calc(6 / 390 * 100vw) calc(28 / 390 * 100vw);
        border-radius: calc(20 / 390 * 100vw);
        font-size: 11px;
    }
}





/*---------------------------------------------------*/
/*----- サイド_カテゴリー・過去の記事 -----*/
.blog_side_box{
    width: 275px;
}
.blog_side_box01,
.blog_side_box02{
    margin: 0 0 60px;
}
.bs_content_title{
    margin: 0 0 25px;
    padding: 0 0 0 15px;
    width: 275px;
    height: 40px;
    line-height: 40px;
    background-color: var(--dark-blue01);
    box-sizing: border-box;
}
.bs_content_title p{
    font-size: 18px;
    color: #fff;
}
.bs_content_list{
    display: grid;
}
.bs_content_list a{
    position: relative;
    padding-left: 15px;
    line-height: 30px;
}
.bs_content_list a::before{
    content: "・";
    position: absolute;
	top: -1px;
    left: 0;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
}
/*------------------------------------------*/
/*----- メディアクエリ: 1300px -----*/
@media screen and ( max-width: 1300px ){
    .blog_side_box{
        width: calc(275 / 1300 * 100vw);
    }
    .blog_side_box01{
        margin: 0 0 calc(60 / 1300 * 100vw);
    }
    .bs_content_title{
        margin: 0 0 calc(25 / 1300 * 100vw);
        padding: 0 0 0 calc(15 / 1300 * 100vw);
        width: calc(275 / 1300 * 100vw);
        height: calc(40 / 1300 * 100vw);
        line-height: calc(40 / 1300 * 100vw);
    }
    .bs_content_title p{
        font-size: calc(18 / 1300 * 100vw);
    }
    .bs_content_list li{
        font-size: calc(16 / 1300 * 100vw);
    }	
    .bs_content_list a{
        padding-left: calc(15 / 1300 * 100vw);
        line-height: calc(30 / 1300 * 100vw);
        font-size: calc(16 / 1300 * 100vw);
    }
	.bs_content_list a::before{
		top: calc(-1 / 1300 * 100vw);
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 1280px -----*/
@media screen and ( max-width: 1280px ){
	.bs_content_list a::before{
		top: calc(-1.8 / 1280 * 100vw);
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 1030px -----*/
@media screen and ( max-width: 1030px ){
	.bs_content_list a::before{
		top: calc(-1 / 1030 * 100vw);
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 900px -----*/
@media screen and ( max-width: 900px ){
    .bs_content_title{
        height: calc(35 / 900 * 100vw);
        line-height: calc(35 / 900 * 100vw);
    }
    .bs_content_title p{
        font-size: calc(16 / 900 * 100vw);
    }
    .bs_content_list li{
        font-size: calc(15 / 900 * 100vw);
    }	
    .bs_content_list a{
        font-size: calc(15 / 900 * 100vw);
    }
	.bs_content_list a::before{
		top: calc(2 / 900 * 100vw);
	}	
}

/*------------------------------------------*/
/*----- メディアクエリ: 850px -----*/
@media screen and ( max-width: 850px ){
	.bs_content_list a::before{
		top: calc(2 / 850 * 100vw);
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_side_box{
        width: calc(742 / 780 * 100vw);
    }
    .blog_side_box02{
        margin: 0 0 calc(60 / 780 * 100vw);
    }
    .bs_content_title{
        margin: 0 0 calc(25 / 780 * 100vw);
        padding: 0 0 0 calc(15 / 780 * 100vw);
        width: calc(742 / 780 * 100vw);
        height: calc(55 / 780 * 100vw);
        line-height: calc(55 / 780 * 100vw);
    }
    .bs_content_title p{
        font-size: calc(20 / 780 * 100vw);
    }
	.bs_content_list li{
		font-size: calc(20 / 780 * 100vw);
	}
    .bs_content_list a{
        padding-left: calc(15 / 780 * 100vw);
        line-height: calc(34 / 780 * 100vw);
        font-size: calc(20 / 780 * 100vw);
    }
	.bs_content_list a::before{
		top: 0;
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_side_box02{
        margin: 0 0 calc(60 / 500 * 100vw);
    }
    .bs_content_title{
        margin: 0 0 calc(25 / 500 * 100vw);
        padding: 0 0 0 calc(15 / 500 * 100vw);
        height: calc(45 / 500 * 100vw);
        line-height: calc(45 / 500 * 100vw);
    }
    .bs_content_title p{
        font-size: calc(19 / 500 * 100vw);
    }
	.bs_content_list li{
		font-size: calc(17 / 500 * 100vw);
	}	
    .bs_content_list a{
        padding-left: calc(15 / 500 * 100vw);
        line-height: calc(34 / 500 * 100vw);
        font-size: calc(17 / 500 * 100vw);
    }
	.bs_content_list a::before{
		top: calc(-3 / 500 * 100vw);
	}	
}
/*------------------------------------------*/
/*----- メディアクエリ: 375px -----*/
@media screen and ( max-width: 375px ){
	.bs_content_list a::before{
		top: calc(-1 / 375 * 100vw);
	}
}
/*------------------------------------------*/
/*----- メディアクエリ: 280px -----*/
@media screen and ( max-width: 280px ){
	.bs_content_list a::before{
		top: calc(-1 / 280 * 100vw);
	}
}







/*---------------------------------------------------*/
/*----- ページネーション -----*/
.blog_pagination{
    margin: 135px 0 150px;/* 150pxは後で消す */
}
.blog_pagination .page-numbers-ul{
    display: flex;
    justify-content: center;
	flex-wrap: wrap;
}
.blog_pagination .page-numbers-li{
    margin-right: 20px;
}
.blog_pagination .page-numbers-li .page-numbers{
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    border-radius: 50%;
    background-color: #000;
    text-align: center;
}
.blog_pagination .page-numbers-li .prev,
.blog_pagination .page-numbers-li .next{
    width: 57px !important;
    border-radius: 15px !important;
}
.blog_pagination .page-numbers-li .next{
    margin-right: 0;
}
/*------------------------------------------*/
/*----- メディアクエリ: 900px -----*/
@media screen and ( max-width: 900px ){
    .blog_pagination{
        margin: calc(135 / 900 * 100vw) 0 calc(150 / 900 * 100vw);/* 150pxは後で消す */
    }
    .blog_pagination .page-numbers-li{
        margin-right: calc(5 / 900 * 100vw);
		margin-bottom: calc(7 / 900 * 100vw);
    }
    .blog_pagination .page-numbers-li .page-numbers{        
        width: calc(30 / 900 * 100vw);
        height: calc(30 / 900 * 100vw);
        line-height: calc(30 / 900 * 100vw);
        font-size: calc(16 / 900 * 100vw);
    }
    .blog_pagination .page-numbers-li .next,
    .blog_pagination .page-numbers-li .prev{
        width: calc(57 / 900 * 100vw);
        border-radius: calc(15 / 900 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_pagination .page-numbers-li{
        margin-right: calc(5 / 780 * 100vw);
		margin-bottom: calc(7 / 780 * 100vw);
    }
    .blog_pagination .page-numbers-li .page-numbers{        
        width: calc(30 / 780 * 100vw);
        height: calc(30 / 780 * 100vw);
        line-height: calc(30 / 780 * 100vw);
        font-size: calc(16 / 780 * 100vw);
    }
    .blog_pagination .page-numbers-li .next,
    .blog_pagination .page-numbers-li .prev{
        width: calc(57 / 780 * 100vw);
        border-radius: calc(15 / 780 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_pagination page-numbers-li{
        margin-right: calc(5 / 500 * 100vw);
    }
    .blog_pagination .page-numbers-li .page-numbers{
        width: calc(30 / 500 * 100vw);
        height: calc(30 / 500 * 100vw);
        line-height: calc(30 / 500 * 100vw);
        font-size: calc(16 / 500 * 100vw);
    }
    .blog_pagination .page-numbers-li .next,
    .blog_pagination .page-numbers-li .prev{
        width: calc(57 / 500 * 100vw);
        border-radius: calc(15 / 500 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 400px -----*/
@media screen and ( max-width: 400px ){
    .blog_pagination .page-numbers-li{
        margin-right: calc(5 / 400 * 100vw);
		margin-bottom: calc(5 / 400 * 100vw);
/* 		width: calc(30 / 400 * 100vw);
		height: calc(30 / 400 * 100vw);
		line-height: calc(30 / 400 * 100vw);
		font-size: calc(16 / 400 * 100vw);				 */
    }
    .blog_pagination .page-numbers-li .page-numbers{        
		width: calc(30 / 400 * 100vw);
		height: calc(30 / 400 * 100vw);
		line-height: calc(30 / 400 * 100vw);
		font-size: calc(16 / 400 * 100vw);		
    }
    .blog_pagination .page-numbers-li .next,
    .blog_pagination .page-numbers-li .prev{
        width: calc(57 / 400 * 100vw) !important;
        border-radius: calc(15 / 400 * 100vw) !important;
    }
}




/*---------------------------------------------------*/
/*----- ページネーション -----*/
.blog_pagination{
    margin: 135px 0 150px;/* 150pxは後で消す */
}
.blog_pagination .nav-links{
    display: flex;
    justify-content: center;
}
.blog_pagination .page-numbers{
/*    margin-right: 20px;*/
    display: flex;
    /*display: block;*/
/*    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #000;
    text-align: center;*/
    /* width: 100%;
    height: 100%; */
/*    color: #fff;*/
    justify-content: center;
}
.nav-links ul li .page-numbers{
    margin-right: 20px !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #000;
    text-align: center !important;
    color: #fff !important;
}
.blog_pagination .prev,
.blog_pagination .next{
    width: 57px !important;
    border-radius: 15px !important;
}
.blog_pagination .next{
    margin-right: 0 !important;
}
/* .blog_pagination_dot a{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
} */
/*------------------------------------------*/
/*----- メディアクエリ: 900px -----*/
@media screen and ( max-width: 900px ){
    .blog_pagination{
        margin: calc(135 / 900 * 100vw) 0 calc(150 / 900 * 100vw);/* 150pxは後で消す */
    }
    .blog_pagination .page-numbers{
        margin-right: calc(20 / 900 * 100vw);
        width: calc(30 / 900 * 100vw);
        height: calc(30 / 900 * 100vw);
        line-height: calc(30 / 900 * 100vw);
        font-size: calc(16 / 900 * 100vw);
    }
    .blog_pagination .prev,
    .blog_pagination .next{
            width: calc(57 / 900 * 100vw);
            border-radius: calc(15 / 900 * 100vw);
        }
}
/*------------------------------------------*/
/*----- メディアクエリ: 780px -----*/
@media screen and ( max-width: 780px ){
    .blog_pagination .page-numbers{
        margin-right: calc(20 / 780 * 100vw);
        width: calc(30 / 780 * 100vw);
        height: calc(30 / 780 * 100vw);
        line-height: calc(30 / 780 * 100vw);
        font-size: calc(16 / 780 * 100vw);
    }
    .blog_pagination .prev,
    .blog_pagination .next{
        width: calc(57 / 780 * 100vw);
        border-radius: calc(15 / 780 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 500px -----*/
@media screen and ( max-width: 500px ){
    .blog_pagination .page-numbers{
        margin-right: calc(20 / 500 * 100vw);
        width: calc(30 / 500 * 100vw);
        height: calc(30 / 500 * 100vw);
        line-height: calc(30 / 500 * 100vw);
        font-size: calc(16 / 500 * 100vw);
    }
    .blog_pagination .prev,
    .blog_pagination .next{
        width: calc(57 / 500 * 100vw);
        border-radius: calc(15 / 500 * 100vw);
    }
}
/*------------------------------------------*/
/*----- メディアクエリ: 400px -----*/
@media screen and ( max-width: 400px ){
    .blog_pagination .page-numbers{
        margin-right: calc(20 / 400 * 100vw);
        width: calc(30 / 400 * 100vw);
        height: calc(30 / 400 * 100vw);
        line-height: calc(30 / 400 * 100vw);
        font-size: calc(16 / 400 * 100vw);
    }
    .blog_pagination .prev,
    .blog_pagination .next{
        width: calc(57 / 400 * 100vw);
        border-radius: calc(15 / 400 * 100vw);
    }
}





/*---------------------------------------------------*/
/*----- 見ているページの色変更 -----*/
.page-numbers li .current{
	background-color: #a9a9a9!important;
}