@charset "utf-8";

/***********************************************************
////////////////////////////////////////////////////////////

@ DESKTOP

////////////////////////////////////////////////////////////
***********************************************************/


/**************************************
  articles
**************************************/
#articles {
	
}

#articles .list {
	border-top: 1px dotted #000;
}
#articles .list .item {
	position: relative;
	display: flex;
	gap: 24px;
	padding: 30px 0;
	border-bottom: 1px dotted #000;
	pointer-events: none;
}

#articles .list .item .thumb {
	position: relative;
	width: 360px;
	background: #fff;
	overflow: hidden;
}
#articles .list .item .thumb img {
	display: block;
	width: 100%;
	object-fit: cover;
	aspect-ratio: 16/9;
	transition: all 0.9s 0s ease;
}
#articles .list .item .thumb .status {
	position: absolute;
	left: 0;
	top: 0;
	width: 4.5em;
	font-size: 86%;
	line-height: 1.0;
	text-align: center;
	padding: 0.3em 0.5em;
	background: #ccc;
}
#articles .list .item .thumb .status.code_0 {
	background: #D2DCEF;
}
#articles .list .item .thumb .status.code_1 {
	background: #DFE619;
}
#articles .list .item .thumb .status.code_9 {
	background: #FFFFFF;
}

#articles .list .item:hover .thumb img {
	opacity: 0.6;
	transform: scale(1.1);
}

#articles .list .item .cont {
	position: relative;
	flex: 1;
}
#articles .list .item .cont .meta {
	display: flex;
	gap: 24px;
	font-size: 86%;
	line-height: 1.2;
	margin-bottom: 1.0em;
}
#articles .list .item .cont .meta .date {
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .meta .cats {
	display: flex;
	list-style: none;
}
#articles .list .item .cont .meta .cats li {

}
#articles .list .item .cont .meta .cats li::after {
	content: '｜';
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .meta .cats li:last-child:after {
	content: '';
}
#articles .list .item .cont .meta .cats li a {
	color: #000;
	text-decoration: none;
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .lead {
	line-height: 1.6;
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .tarms {
	display: none;
}

#articles .list .item .cont .view {
	position: absolute;
	bottom: 0;
	line-height: 1.0;
}
#articles .list .item .cont .view a {
	display: inline-block;
	color: #000;
	font-size: 82%;
	line-height: 1.0;
	text-decoration: none;
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .view a .arrow {
	position: relative;
	display: inline-block;
	width: 1.8em;
	height: 0.8em;
	margin-left: 0.5em;
	vertical-align: top;
}
#articles .list .item .cont .view a .arrow::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: #000;
	transition: all 0.2s 0s ease;
}
#articles .list .item .cont .view a .arrow::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 0 10px;
	border-color: transparent transparent transparent #000;
	transition: all 0.2s 0s ease;
}

#articles .list .item:hover .cont .meta .date {
	color: #8FB94A;
}
#articles .list .item:hover .cont .meta .cats li::after {
	color: #8FB94A;
}
#articles .list .item:hover .cont .meta .cats li a {
	color: #8FB94A;
}
#articles .list .item:hover .cont .lead {
	color: #8FB94A;
}
#articles .list .item:hover .cont .view a {
	color: #8FB94A;
}
#articles .list .item:hover .cont .view a .arrow::before {
	background: #8FB94A;
}
#articles .list .item:hover .cont .view a .arrow::after {
	border-color: transparent transparent transparent #8FB94A;
}

#articles .list .item .area {
	position: absolute;
	display: block;
	left: 0;
	top: 5%;
	width: 100%;
	height: 90%;
	pointer-events: all;
}




/**************************************
  article
**************************************/
#article {

}

#article .head {
	margin-bottom: 140px;
}

#article .head .cont {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	font-size: 86%;
	line-height: 1.2;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 2px solid #000;
}
#article .head .cont .meta {
	min-width: 9em;
}
#article .head .cont .meta .status {
	display: inline-block;
	width: 4.5em;
	/*font-size: 86%;*/
	line-height: 1.0;
	text-align: center;
	padding: 0.3em 0.5em;
	background: #ccc;
	margin-bottom: 0.5em;
}
#article .head .cont .meta .status.code_0 {
	background: #D2DCEF;
}
#article .head .cont .meta .status.code_1 {
	background: #DFE619;
}
#article .head .cont .meta .status.code_9 {
	background: #FFFFFF;
}
#article .head .cont .meta .date {

}
#article .head .cont .cats {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
}
#article .head .cont .cats {

}
#article .head .cont .cats li::after {
	content: '｜';
}
#article .head .cont .cats li:last-child:after {
	content: '';
}
#article .head .cont .cats li a {
	color: #000;
	white-space: nowrap;
}

#article .head .lead {
	font-size: 150%;
	font-weight: bold;
	line-height: 1.6;
}

#article .body {

}




/**************************************
  information
**************************************/
#information {

}




/**************************************
  pagination
**************************************/
#pagination {
	margin-top: 60px;
}
#pagination .page-numbers {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	list-style: none;
}
#pagination .page-numbers li {
	line-height: 1.0;
}
#pagination .page-numbers li .page-numbers {
	display: inline-block;
	color: #000;
	font-size: 112%;
	text-decoration: none;
	text-underline-offset: 0.2em;
	padding: 1.0em;
	transition: all 0.2s 0s ease;
	/*background: rgba(255, 0, 0, 0.1);*/
}
#pagination .page-numbers li a.page-numbers:hover {
	color: #8FB94A;
}
#pagination .page-numbers li .page-numbers.current {
	/*color: #666;*/
	text-decoration: underline;
}
#pagination .page-numbers li .page-numbers.prev::before,
#pagination .page-numbers li .page-numbers.prev::after,
#pagination .page-numbers li .page-numbers.next::before,
#pagination .page-numbers li .page-numbers.next::after {
	transition: all 0.2s 0s ease;
}
#pagination .page-numbers li .page-numbers.prev:hover::before,
#pagination .page-numbers li .page-numbers.prev:hover::after,
#pagination .page-numbers li .page-numbers.next:hover::before,
#pagination .page-numbers li .page-numbers.next:hover::after {
	background: #8FB94A;
}

#pagination .page-numbers li .page-numbers.prev,
#pagination .page-numbers li .page-numbers.next {
	position: relative;
	width: 1.0em;
	height: 2.0em;
	padding: 0;
	margin: 0 20px;
}
#pagination .page-numbers li .page-numbers.prev::before,
#pagination .page-numbers li .page-numbers.prev::after,
#pagination .page-numbers li .page-numbers.next::before,
#pagination .page-numbers li .page-numbers.next::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	width: 141%;
	height: 1px;
	background: #000;
}
#pagination .page-numbers li .page-numbers.prev::before,
#pagination .page-numbers li .page-numbers.prev::after {
	left: 0;
	transform-origin: left center;
}
#pagination .page-numbers li .page-numbers.prev::before {
	transform: rotate(-45deg);
}
#pagination .page-numbers li .page-numbers.prev::after {
	transform: rotate(45deg);
}
#pagination .page-numbers li .page-numbers.next::before,
#pagination .page-numbers li .page-numbers.next::after {
	right: 0;
	transform-origin: right center;
}
#pagination .page-numbers li .page-numbers.next::before {
	transform: rotate(45deg);
}
#pagination .page-numbers li .page-numbers.next::after {
transform: rotate(-45deg);
}







/***********************************************************
////////////////////////////////////////////////////////////

@ TABLET

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (max-width: 960px) {

	/**************************************
	  articles
	**************************************/
	#articles {

	}

	#articles .list {

	}
	#articles .list .item {
		display: block;
		padding: 40px 0;
	}
	#articles .list .item .thumb {
		width: 100%;
		margin-bottom: 20px;
	}
	#articles .list .item .cont .meta {
		margin-bottom: 1.0em;
	}
	#articles .list .item .cont .meta .date {
		white-space: nowrap;
	}
	#articles .list .item .cont .meta .cats {
		display: none;
	}
	#articles .list .item .cont .lead {
		margin-bottom: 1.0em;
	}
	#articles .list .item .cont .tarms {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin-bottom: 2.0em;
	}
	#articles .list .item .cont .tarms li {
		line-height: 1.2;
	}
	#articles .list .item .cont .tarms li::after {
		content: '｜';
		transition: all 0.2s 0s ease;
	}
	#articles .list .item .cont .tarms li:last-child:after {
		content: '';
	}
	#articles .list .item .cont .tarms li a {
		color: #000;
		font-size: 86%;
		white-space: nowrap;
		/*text-decoration: none;*/
		transition: all 0.2s 0s ease;
	}

	#articles .list .item .cont .view {
		position: relative;
		text-align: center;
	}

	#articles .list .item:hover .cont .tarms li a {
		color: #8FB94A;
	}
	#articles .list .item:hover .cont .tarms li::after {
		color: #8FB94A;
	}


	/**************************************
	  article
	**************************************/
	#article {

	}
	#article .head {
		margin-bottom: 40px;
	}
	#article .head .cont {
		margin-bottom: 40px;
	}

}





/***********************************************************
////////////////////////////////////////////////////////////

@ MOBILE

////////////////////////////////////////////////////////////
***********************************************************/
 @media only screen and (max-width: 520px) {
	
}