@charset "UTF-8";

/* ブログ（一覧・記事）。お知らせの CSS（news_list.css・news_detail.css）に足す分 */

/* 本文 */
.news_body img{
	max-width: 100%;
	height: auto;
	display: block;
	margin: 20px auto;
}

.news_body h2{
	font-size: 20px;
	border-left: 4px solid currentColor;
	padding-left: 12px;
	margin: 30px 0 15px;
}

.news_body h3{
	font-size: 17px;
	margin: 25px 0 10px;
}

.news_body ul{
	list-style: disc;
	padding-left: 1.5em;
}

.news_body ol{
	list-style: decimal;
	padding-left: 1.5em;
}

.news_body li{
	list-style: inherit;
}

.news_body blockquote{
	border-left: 3px solid #cccccc;
	padding-left: 12px;
	color: #555555;
}

.news_body a{
	text-decoration: underline;
}

/* 横の欄のカテゴリー */
.side .btn{
	text-align: center;
}

.btn2{
	background-color: #84b206;
	color: #ffffff;
	display: inline-block;
	width: 100%;
	padding: 6px 34px 6px 20px;
	margin-top: 14px;
	position: relative;
	border-radius: 50px;
	text-align: center;
	font-weight: 700;
}

.btn2 p{
	font-size: 14px;
}

/* デザインのように、カテゴリーごとに色を変える（4つで繰り返す） */
.side .btn:nth-of-type(4n+1) .btn2{
	background-color: #84b206;
}

.side .btn:nth-of-type(4n+2) .btn2{
	background-color: #f47682;
}

.side .btn:nth-of-type(4n+3) .btn2{
	background-color: #fac234;
}

.side .btn:nth-of-type(4n) .btn2{
	background-color: #8dd6ec;
}

.btn2::before{
	border-right: 2px solid #ffffff;
	border-top: 2px solid #ffffff;
	bottom: 0px;
	content: "";
	height: 5px;
	margin: auto;
	right: 20px;
	top: 0px;
	transform: rotate(45deg);
	width: 5px;
	position: absolute;
}

.btn2:hover{
	opacity: 0.7;
}

/* 横の欄のアーカイブ（年ごとにまとめて、押すと月が開く） */
.side_year{
	margin-top: 15px;
}

.side_year summary{
	cursor: pointer;
	padding: 6px 0;
	border-bottom: 1px solid #e3f3b7;
	color: #3e2b18;
}

.side_year .side_text{
	margin-top: 10px;
}