body, dl, dt, dd, ul {
	margin: 0;
	padding: 0;
}/*
img {
	max-width: 100%;
}*/
.blog {
	font-family: 'Hiragino Kaku Gothic Pro';
	width: 808px;
}
/* この下にCSSを追加してください */
.blog-recent {
	display: flex;
	gap: 30px;
   
}
.blog-recent a {
	color: #888;　/*a　の囲みでフレックスボックス内で伸縮可能で、残りの空間を均等に分配*/
	flex: 1;
	text-decoration: none;
}
.blog-recent a:hover,
.blog-recent a:focus {
	color: #621862;
}
.blog__item {
	border-bottom: 1px solid #bbbbbb;
	border-top: 0px solid #ccc;　/*説明分上部の腺*/
	display: flex;
   
	flex-direction: row; /* columnだった　row は左から右へ向かう水平軸を表*/
	height: 100%;
     width: 260px; /*説明分の大きさ後日設定したｑ*/
}
.blog__title {
	font-size: 16px;
   /* font-weight: normal;　タイトルの文字太さ*/
	line-height: 1.73;
	order: 3;
	/*padding-bottom: 16px;
	padding-top: 14px;*/
    /* border: solid 3px #38b3f2;角丸ラインを入れた*/
    /* border-radius: 10px;/*角丸ラインを入れた*/
   /* padding: 5px 10px 5px 10px;/*角丸ラインを入れた*/
   /* text-align: center;
    /*角丸ラインを入れた*/
    
	/*text-decoration: underline; アンダーライン*/
}

/* 角丸ライン（線）で囲う装飾した見出し 
.maru_text08 {
  display: inline-block;
  font-weight:bold;
  border: solid 2px #38b3f2;
  border-radius: 10px;
  margin: 0 auto 50px;
  padding: 5px 10px 5px 10px;
}
 */


.blog__image {
	order: 1;
	padding-top: 8px;
}
.blog__date {
	color: #666666;
	font-size: 14px;
	order: 2;
	padding-top: 14px;
}
.blog__author,
.blog__tag {
	background-position: 0 center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border-top: 1px dotted #bbbbbb;
	color: #000000;
	font-size:  16px;　/*説明文のフォントサイズ*/
	min-height: 16px;
	padding: 6px 5px 6px 1px;/*上部、右側、下部、左側の余白　説明文の左から1px*/
}
.blog__author {
	background-image: url(./icn_author.png);
	margin-top: auto;
	order: 3;
}
.blog__tag {
	background-image: url(./icn_tag.png);
	order: 4;
}
.blog__tag ul {
	display: flex;
	list-style: none;
}
.blog__tag li+li::before {
	content: "／";
}
@media (max-width: 807px) {
	.blog {
		width: auto;
	}
	.blog-recent {
		flex-wrap: wrap;
	}
	.blog-recent a {
		flex: 0 1 auto;
		width: calc((100% - 32px) / 2);
	}
}
@media (max-width: 700px) {
	.blog-recent {
		flex-direction: column;
		gap: 48px;
		padding: 0 40px;
	}
	.blog-recent a {
		width: 100%;
	}
}