@charset "utf-8";
/* お知らせ・ブログ（一覧と記事。右に横の欄） */

.post_page{
	padding-top: 100px;
	padding-bottom: 130px;
}

.post_layout{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
	margin-top: 88px;
}

.post_main{
	flex: 1;
	max-width: 793px;
	min-width: 0;
}

/* カテゴリー・月ごとのページで、見出しのあとに名前を出す */
.post_heading{
	font-size: 0.8em;
}

/* 日付と種類 */
.post_meta{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 30px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.post_date{
	color: #2c8dca;
}

/* 種類のラベル（紺。色をカテゴリーごとに変える仕組みはないので1色） */
.post_category{
	display: inline-block;
	min-width: 118px;
	padding: 2px 14px;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	background-color: #29557b;
}

.post_category:empty{
	display: none;
}

/* 一覧の1件 */
.post_row + .post_row{
	margin-top: 90px;
}

.post_title{
	margin-top: 20px;
	padding-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: #18293e;
	border-bottom: 2px solid #29557b;
}

.post_title a:hover{
	opacity: 0.7;
}

.post_excerpt{
	margin-top: 24px;
	font-size: 15px;
}

/* ページ送り（丸い数字） */
.pagination{
	display: flex;
	justify-content: center;
	gap: 22px;
	margin-top: 100px;
}

.pagination a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
	background-color: #6ca4c7;
	border-radius: 50%;
}

.pagination .current a{
	background-color: #29557b;
}

.pagination a:hover{
	opacity: 0.7;
}

/* 記事 */
.article_title{
	margin-top: 20px;
	padding-bottom: 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	color: #18293e;
	border-bottom: 2px solid #29557b;
}

.article_body{
	margin-top: 30px;
}

.article_body p{
	margin-top: 1.4em;
	font-size: 15px;
}

.article_body > :first-child{
	margin-top: 0;
}

.article_body h2,
.article_body h3{
	margin-top: 2em;
	font-size: 19px;
	font-weight: 700;
	color: #29557b;
}

.article_body ul,
.article_body ol{
	margin-top: 1.4em;
	padding-left: 1.5em;
	font-size: 15px;
}

.article_body li{
	list-style: disc;
}

.article_body a{
	color: #29557b;
	text-decoration: underline;
}

/* PDF へのリンクには、前に書類の印を付ける */
.article_body a[href$=".pdf"]::before,
.article_body a[href$=".PDF"]::before{
	content: "PDF";
	display: inline-block;
	margin-right: 10px;
	padding: 0 5px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.8;
	color: #ffffff;
	background-color: #d93a3a;
	border-radius: 2px;
	vertical-align: 2px;
}

.news_img{
	margin: 40px 0;
}

.article_body img{
	display: block;
	width: 100%;
	height: auto;
}

/* 前の記事へ・記事一覧へ・次の記事へ（前後がないときも、一覧へは真ん中に置く） */
.pager{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 39px;
	margin-top: 100px;
}

.pager .prev{
	grid-column: 1;
	justify-self: end;
}

.pager .pager_list{
	grid-column: 2;
}

.pager .next{
	grid-column: 3;
	justify-self: start;
}

.pager_btn{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 184px;
	height: 43px;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	background-color: #6ca4c7;
	border-radius: 30px;
}

.pager_list .pager_btn{
	background-color: #29557b;
}

.pager_btn:hover{
	opacity: 0.7;
}

/* 横の欄（水色の箱） */
.side{
	flex-shrink: 0;
	width: 303px;
}

.side_box{
	padding: 38px 28px 34px 33px;
	background-color: #e9f9ff;
	border-radius: 10px;
}

.side_box + .side_box{
	margin-top: 12px;
}

.side_title{
	margin-bottom: 26px;
	font-size: 19px;
	font-weight: 700;
	text-align: center;
	color: #29557b;
}

/* カテゴリーのボタン（並びの順に 黄・紺・緑・灰 をくり返す） */
.side_categories li + li{
	margin-top: 20px;
}

.side_categories a{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 8px 36px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	color: #ffffff;
	background-color: #ffbe32;
	border-radius: 4px;
}

.side_categories li:nth-child(4n+2) a{
	background-color: #29557b;
}

.side_categories li:nth-child(4n+3) a{
	background-color: #33aa8f;
}

.side_categories li:nth-child(4n+4) a{
	background-color: #bfbfbf;
}

.side_categories a::after{
	content: "＞";
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	font-size: 12px;
}

.side_categories a:hover{
	opacity: 0.8;
}

/* 最近の記事（白いカード） */
.side_recent_item + .side_recent_item{
	margin-top: 25px;
}

.side_recent a{
	display: block;
	padding: 20px 18px;
	font-size: 14px;
	line-height: 1.6;
	background-color: #ffffff;
	border-radius: 6px;
}

.side_date{
	display: block;
	color: #2c8dca;
}

.side_post{
	display: block;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.side_recent a:hover{
	opacity: 0.7;
}

/* アーカイブ（年ごと） */
.side_year + .side_year{
	margin-top: 20px;
}

.side_year_label{
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #29557b;
}

.side_months li + li{
	margin-top: 8px;
}

.side_months a{
	display: block;
	padding: 10px 16px;
	font-size: 14px;
	background-color: #ffffff;
	border-radius: 6px;
}

.side_months a:hover{
	opacity: 0.7;
}





@media screen and (max-width: 1170px){

	.post_layout{
		gap: 40px;
	}

	.side{
		width: 260px;
	}

	.side_box{
		padding: 28px 20px;
	}
}




@media screen and (max-width: 750px){

	.post_page{
		padding-top: 50px;
		padding-bottom: 60px;
	}

	/* 横の欄は記事の下に回す */
	.post_layout{
		flex-direction: column;
		align-items: stretch;
		gap: 50px;
		margin-top: 40px;
	}

	.post_main{
		max-width: none;
	}

	.post_meta{
		gap: 4px 16px;
		font-size: 13px;
	}

	.post_category{
		min-width: 90px;
		font-size: 12px;
	}

	.post_row + .post_row{
		margin-top: 50px;
	}

	.post_title,
	.article_title{
		margin-top: 12px;
		padding-bottom: 10px;
		font-size: 17px;
	}

	.post_excerpt,
	.article_body p,
	.article_body ul,
	.article_body ol{
		font-size: 14px;
	}

	.post_excerpt{
		margin-top: 14px;
	}

	.pagination{
		gap: 10px;
		margin-top: 50px;
	}

	.pagination a{
		width: 30px;
		height: 30px;
		font-size: 13px;
	}

	.news_img{
		margin: 24px 0;
	}

	.pager{
		gap: 8px;
		margin-top: 50px;
	}

	.pager_btn{
		width: 104px;
		height: 38px;
		font-size: 11px;
	}

	.side{
		width: 100%;
	}

	.side_box{
		padding: 28px 22px;
	}

	.side_categories{
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.side_categories li + li{
		margin-top: 0;
	}

	.side_categories a{
		min-height: 46px;
		font-size: 13px;
	}
}