@charset "utf-8";
/* CSS Document */
.width90 {
    width: 90%;
	margin: 0 auto;
}
.max_w1200{max-width: 1200px;}
a{text-decoration: none;}



/****タグボタン****/
.list_page .tag_list{
	margin: 0 auto 45px;
	display: flex;
	justify-content: space-between;
	column-gap: 25px;
	row-gap: 15px;
}
.list_page .tag_btn_design{
	padding: 6px;
	box-sizing: border-box;
	background-color: #ffffff;
	width: calc((100% - 25px * 4) / 5);;
	flex-grow: 1;
	line-height: 1;
	border: 3px solid #000000;
	border-radius: 50px;
	cursor: pointer;
	align-items: center;
    display: flex;
    justify-content: center;
}
.list_page .tag_btn_design:hover{opacity: 1;}

.list_page .tab_button_all:hover{background-color: #fee300;}
.list_page .tab_button_notice:hover{background-color: #2aba6f;}
.list_page .tab_button_fuature:hover{background-color: #eb739c;}
.list_page .tab_button_site:hover{background-color: #82dfd5;}
.list_page .tab_button_other:hover{background-color: #e9ebbe;}

.list_page .tag_btn_design.active {
  background-color: #fee300;
}
.tab_button_notice.active { background-color: #2aba6f; }
.tab_button_fuature.active { background-color: #eb739c; }
.tab_button_site.active   { background-color: #82dfd5; }
.tab_button_other.active  { background-color: #e9ebbe; }


@media screen and (max-width: 1120px){
	.list_page .tag_list{
		display: grid;
		grid-template-columns: repeat(2, 3fr); /* 3列 */
		gap: 8px;
		column-gap: 16px;
	}

	.list_page .tag_btn_design{
		width: 100%;      /* Gridなので幅指定不要 */
		height: 48px;
	}

}



/****記事リスト****/
.list_page .article_list{
	display: flex;
	justify-content: flex-start;
	column-gap: 30px;
    row-gap: 30px;
	margin-bottom: 100px;
	flex-wrap: wrap;
}

.list_page .article_list .img_box{
	overflow: hidden;
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;

}
.list_page .article_list .img_box img {
	object-position: center;
	transition: .3s all;
	width: 100%;
	height: 100%;
    object-fit: cover;
}
.list_page .article_list a:hover .img_box img {transform: scale(1.1, 1.1);}
.list_page .card{
	width: calc((100% - 30px * 2) / 3);
	background: #ffffff;
	border: 3px solid #000000;
	border-radius: 30px;
	box-sizing: border-box;
	display: none;
	padding: 30px;
}
.list_page .article_list .show {display: block;}
.list_page .content{
	padding-top: 45px;
	text-align: left;
	position: relative;
}
.list_page .title{
	font-size: 22px;
	font-weight: bold;
}
.list_page .card_tag_design{
	position: absolute;
	padding: 12px 24px;
	background-color: #e9ebbe;
	border-radius: 0px 50px 50px 0px;
	display: flex;
	align-items: center;
	left: -30px;
	top: -25px;
	height: 45px;
}
.list_page .card_tag_design_notice{background-color: #2aba6f;}
.list_page .card_tag_design_feature{background-color: #eb739c;}
.list_page .card_tag_design_site{background-color: #82dfd5;}
.list_page .card_tag_design_other{background-color: #e9ebbe;}

@media screen and (max-width: 1400px){
	.list_page .article_list .img_box{height: 180px;}
}


@media screen and (max-width: 1120px){
	.list_page .article_list{
		column-gap: 15px;
		row-gap: 15px;
		margin-bottom: 100px;
	}
	.list_page .card{
		width: calc((100% - 15px * 2) / 3);
		padding: 20px;
	}
	.list_page .title{font-size: 18px;}
	.list_page .card_tag_design{
		left: -20px;
		top: -15px;
		height: 40px;
	}
}
@media screen and (max-width: 750px){
	.list_page .article_list{margin-bottom: 50px;}
	.list_page .card{width: 100%;}
	.list_page .content{padding-top: 30px;}
	.list_page .card_tag_design{top: -20px;}
	.list_page .card_tag_design img{width: 80%;}
	.list_page .title{font-size: 20px;}
}


/****ページネーション****/
.list_page .pagination{
	display: flex;
	gap: 20px;
	justify-content: center;
}


/*.list_page .pagination li:last-child:before{
	content: "…";
	font-size: 20px;
	color: #000;
	margin-right: 20px;
}*/
.list_page .pagination li a{
	border: 3px solid #000;
	font-size: 23px;
	color: #000000;
	background-color: #fff;
	border-radius: 50%;
	height: 50px;
    width: 50px;
    display: inline-block;
}
.list_page .pagination .current a{
	color: #000000;
	background-color: #ffef37;
}


@media screen and (max-width: 600px) {
	.list_page .pagination{
		margin-top: 30px;
		gap: 12px;
	}
	.list_page .pagination li a{
		width: 36px;
		height: 36px;
		font-size: 16px;
	}
	.list_page .pagination li.dots{font-size: 24px;}
}