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

@media (min-width: 768px) {
/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }

/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }

ul#newsList{
	display: flex;
	flex-wrap: wrap;
	padding: 70px;
}
ul#newsList li{
	flex: 0 0 calc(29% - 10px); /* 各列の幅を計算し、マージンを考慮する */
  margin: 10px; /* 要素間のマージン */
  border: 2px solid skyblue; /* 水色の線 */
  border-radius: 10px; /* 角丸 */
  padding: 10px; /* 内側の余白 */
}

ul#newsList li img{
	width:100%;
	height:100%;
	object-fit: cover;
	}

a{color:#1DA3D8;text-decoration:underline;}
a:hover{color:#039;text-decoration:none;}

.up_ymd,
.catName{
  display: inline-block;
  vertical-align: top; /* 上揃えにする */
}

.up_ymd{
	font-size:80%}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:100%;
	margin:0 2px;
}

.title{
	display: inline-block;
	font-size: 120%;}

.newMark{
	display:inline-block;
	border:1px solid #F00;
	padding:1px 4px;
	font-size:11px;
	line-height:100%;
	background:#F00;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
.comment{
	display:block;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100px; /* 最小の高さ */
}


.thumbNailWrap{
	display: block;
	width: 100%;
	height:200px;
	padding-bottom: 10px;
	
}

}


@media (max-width: 767px) {
	
	
	/* clearfix */
.clearfix:after { content:"."; display:block; clear:both; height:0; visibility:hidden; }
.clearfix { display:inline-block; }

/* for macIE \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
	
	ul#newsList{
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
}
ul#newsList li{
	flex: 2 0 calc(40% - 10px); /* 各列の幅を計算し、マージンを考慮する */
  margin: 10px; /* 要素間のマージン */
  border: 2px solid skyblue; /* 水色の線 */
  border-radius: 10px; /* 角丸 */
  padding: 10px; /* 内側の余白 */
}

ul#newsList li img{
	width:100%;
	height:100%;
	object-fit: cover;
	}

a{
	color: #1DA3D8;
	text-decoration: underline;
	font-size: 80%;
}
a:hover{color:#039;text-decoration:none;}

.up_ymd,
.catName{
  display: inline-block;
  /*vertical-align: top; *//* 上揃えにする */
}

.up_ymd{
	font-size:65%}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	font-size:11px;
	line-height:100%;
	margin:0 2px;
}

.title{
	display: inline-block;
	font-size: 120%;
	line-height: 1em;
}

.newMark{
	display:inline-block;
	border:1px solid #F00;
	padding:1px 4px;
	font-size:11px;
	line-height:100%;
	background:#F00;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
.comment{
	display: block;
	font-size: 70%;
	line-height: 1.5;
	min-height: 30px; /* 最小の高さ */
}


.thumbNailWrap{
	display: block;
	width: 100%;
	height:200px;
	padding-bottom: 10px;
	
}
	
}