@charset "utf-8";
/* CSS Document */
#keyVisual{
	background: url("/common/img/keyvisual_blog.jpg") no-repeat left center / cover;
}

.catNav{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 10px;
}
.catNav li{
	min-width: 140px;
}

.catNav li a{
	display: block;
	padding: 7px 10px 9px;
	border-radius: 20px;
	overflow: hidden;
	border: solid 1px #003d99;
}

.catNav li.catAll.current a,
.catNav li.catAll a:hover{
	background: #003d99;
	color: #fff;
}

/* カテゴリラベル設定 */
.catNav li.newslabel-1 a{
	border-color: #319e10;
	color: #319e10;
}
.catNav li.newslabel-1.current a,
.catNav li.newslabel-1 a:hover{
	background: #319e10;
	color: #fff;
}
.catNav li.newslabel-2 a{
	border-color: #d6000b;
	color: #d6000b;
}
.catNav li.newslabel-2.current a,
.catNav li.newslabel-2 a:hover{
	background: #d6000b;
	color: #fff;
}
.catNav li.newslabel-3 a{
	border-color: #0e8c84;
	color: #0e8c84;
}
.catNav li.newslabel-3.current a,
.catNav li.newslabel-3 a:hover{
	background: #0e8c84;
	color: #fff;
}
.catNav li.newslabel-4 a{
	border-color: #6f2680;
	color: #6f2680;
}
.catNav li.newslabel-4.current a,
.catNav li.newslabel-4 a:hover{
	background: #6f2680;
	color: #fff;
}
.catNav li.newslabel-5 a{
	border-color: #000;
	color: #000;
}
.catNav li.newslabel-5.current a,
.catNav li.newslabel-5 a:hover{
	background: #000;
	color: #fff;
}

.newsList{
	margin-top: 80px;
}
.newsList li{
	border-bottom: solid 1px #ccc;
}
	.newsList li a{
		display: flex;
		font-weight: 500;
		color: #000;
		justify-content: flex-start;
		align-items: center;
		padding: 20px 0;
		position: relative;
		width: 100%;
	}
	.newsList li:first-child a{
		padding-top: 0;
	}
	.newsList li a:hover{
		color: #003d99;
	}

.newsList li .date{
	flex-shrink: 0;
	margin-right: 19px;
	font-weight: 600;
}


.newsList li .labelBox{
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width: 210px;
	margin-right: 20px;
	gap: 10px;
}
.newsList li .label{
	background: #f2f5f4;
	color: #fff;
	font-size: 1.4rem;
	min-width: 100px;
	line-height: 26px;
}
	.newsList li .label.newslabel-1{
		background: #319e10;
	}
	.newsList li .label.newslabel-2{
		background: #d6000b;
	}
	.newsList li .label.newslabel-3{
		background: #0e8c84;
	}
	.newsList li .label.newslabel-4{
		background: #6f2680;
	}
	.newsList li .label.newslabel-5{
		background: #000;
	}

.newsList li a .ttl{
	text-align: left;
	font-weight: 500;
	color: #003d99;
}
.newsList li a:hover .ttl{
	color: #d6000b;
}

@media screen and (max-width: 1023px){
	.catNav{
		margin: 0 -5px;
		gap: 0;
	}
	.catNav li{
		margin: 0 5px 5px;
		min-width: inherit;
		width: calc(100% / 6 - 10px);
	}
	.newsList li a{
		flex-wrap: wrap;
	}
		.newsList li a .ttl{
			margin-top: 10px;
			width: 100%;
		}
}

@media screen and (max-width: 768px){
	#keyVisual{
		background-position: 14% center;
	}
	.newsList{
		margin-top: 60px;
	}
}
@media screen and (max-width: 767px){
	.catNav{
		margin: 0 -5px;
		gap: 0;
	}
	.catNav li{
		margin: 0 5px 5px;
		width: calc(100% / 3 - 10px);
	}
	.newsList li .labelBox{
		min-width: 160px;
	}
	.newsList li .label{
		min-width: 75px;
	}
}