@charset "UTF-8";



.page-header{
	margin-top: 100px;
	text-align: center;
	margin-bottom: 50px;
}

.archive-title {
		position: relative;
		display: inline-block;
		font-size: 24px;
		font-weight: 600;
		margin-bottom: .5rem;
	}
	
	.archive-title a{
		text-decoration: none;
		color: #003366;
	}
	
	.archive-title:before {
		content: '';
		position: absolute;
		bottom: -5px;
		display: inline-block;
		width: 60px;
		height: 2px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		background-color: #79b6c8;
		border-radius: 2px;
	  }

	  .article_grid{
		width: 85%;
		gap: 16px;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		margin: 0 auto 60px; 
	}

	.article{
		position: relative;
	}

	.article .jirei_title {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 1;
		width: 100%;
		-moz-box-sizing: border-box;
		 box-sizing: border-box;
		padding: 12px 10px;
		background: rgba(0, 0, 0, .6);
		color: #ffffff;
		text-align: center;
		font-size: 14px;
		opacity: 1;
		transition: .3s ease;
	}

.article .disp_line li{
 display: inline-block;
 margin: 0 0 0 .5rem;
}

.article .disp_line li span{
 font-size: 13px;
}

.article .disp_line{
 position: absolute;
 left: 0;
 top: 0;
 z-index: 1;
 width: 100%;
 -moz-box-sizing: border-box;
  box-sizing: border-box;
 padding: 12px 10px;
 background: rgba(0, 0, 0, .6);
 color: #ffffff;
 font-size: 14px;
 margin: 0;
}

.article .thumb img{
	object-fit: cover;
	border: 1px solid #999;
	height: 320px;
}



/*ページング*/

	.page{
		text-align: center;
		margin: 0 auto;
	}
	
	nav.pagination{
		clear: both;
	}
	
	.nav-links{
		text-align: center;
		margin: 0 auto 3rem;
	}
	
	.page-numbers {
		color: #fff;
		text-decoration: none;
		background: #173002;
		padding: 5px;
		margin: 0;
	}
	
	span.current{
		background: #0c6ad4;
	}





@media only screen and (max-width: 736px) {/*スマホ*/

article{
	width: 100%;
	margin: 0 auto;
}



.article_grid{
	width: 100%;
	gap: 30px;
	display: grid;
	grid-template-columns: repeat(1,1fr);
}


}/*スマホ*/


@media only screen and  (min-width: 737px) and (max-width: 1024px) {
	
	article{
	width: 98%;
	margin: 0 auto;
}

.article_grid{
	width: 100%;
	gap: 20px;
	display: grid;
	grid-template-columns: repeat(2,1fr);
}


	
}