@charset "utf-8";
/* CSS Document */

/*==============================*/
/* 一覧 */
/*==============================*/
div.newsList article{
	border-bottom: 1px solid #eee
}
div.newsList article a{
	display: block;
	padding: 22px 20px;
}
div.newsList article a:hover{
	background: #F2F2F2;
}
div.newsList article dl{
	display: flex;
	gap: 20px;
}

div.newsList article dl dt{
	flex: 0 0 124px;
	font-size: 15px;
	letter-spacing: 0.03em;
}
div.newsList article dl dd{
	flex: 1;
	font-size: 15px;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.newsList article a{
			padding: 22px 0px;
		}
		div.newsList article dl{
			flex-direction: column;
			gap: 0px;
		}
		div.newsList article dl dt{ flex: auto;}
		div.newsList article dl dd{ flex: auto;}
	}


/*---------------------------------
   PAGER
---------------------------------*/
ul.pager{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 48px;
}

ul.pager li button{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	background: #9FA4B4;
	border: 1px solid #9FA4B4;
	border-radius: 4px;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	transition: .3s;
}

ul.pager li button:hover{ background: #40496A;}

ul.pager li.active button{
	background: #40496A;
	border-color: #40496A;
	pointer-events: none;
}


/*-- PREV / NEXT
------------------------- */
ul.pager li.prev button,
ul.pager li.next button{
	position: relative;
	min-width: 42px;
	padding: 0;
	font-size: 0;
}

ul.pager li.prev button::after,
ul.pager li.next button::after{
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	width: 7px;
	height: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

ul.pager li.prev button::after{ transform: translate(-35%, -50%) rotate(-135deg);}
ul.pager li.next button::after{ transform: translate(-65%, -50%) rotate(45deg);}

ul.pager li.disabled button{
	opacity: .3;
	pointer-events: none;
}

	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
		ul.pager{
			margin-top: 40px;
		}
	}
	/* ======= SP =======*/
	@media screen and (max-width: 767px) {
		ul.pager{
			gap: 6px;
			margin-top: 32px;
		}
		ul.pager li button{
			min-width: 36px;
			height: 36px;
			padding: 0 9px;
			font-size: 13px;
		}
		ul.pager li.prev button,
		ul.pager li.next button{
			min-width: 36px;
		}
	}


/*==============================*/
/* NEWS詳細 */
/*==============================*/

/*---------------------------------
   
---------------------------------*/
div.newsTitle{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 26px 0 36px 0;
}
div.newsTitle h1{
	color: #000;
	font-size: 22px;
	font-weight: 600;
}

div.newsTitle time{
	flex: 0 0 112px;
	font-size: 15px;
	letter-spacing: 0.02em;
}
	/* ======= TB =======*/
	@media screen and (min-width: 768px) and (max-width: 1024px) {
	}
	/* ======= SP =======*/
	@media (max-width: 767px) {
		div.newsTitle{
			flex-direction: column-reverse;
			align-items: flex-start;
			padding: 26px 0 36px 0;
		}
		div.newsTitle h1{
			
			font-size: 22px;
			font-weight: 600;
		}

		div.newsTitle time{
			margin-bottom: 4px;
			flex: auto;
			font-size: 15px;
		}
	}


/*---------------------------------
   
---------------------------------*/
div.newsContent{
	padding-top: 64px;
	margin-bottom: 80px;
}


/*---------------------------------
   
---------------------------------*/
p.news-backBtn{
	width: min(240px,100%);
	margin: 0 auto 40px auto;
}
p.news-backBtn a{
	position: relative;
	display: block;
	padding: 14px 0 14px 12px;
	border: 1px solid #b3b3b3;
	text-align: center;
	font-size: 15px;
}
p.news-backBtn a::before{
	position: absolute;  top: 24px; left: 50%;
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1px solid #969696;
    border-right: 1px solid #969696;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
	margin-left: -64px;
}
p.news-backBtn a:hover{
	background: #3f496c;
	color: #fff;
}

p.news-backBtn a:hover::before{
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}