.subgroup {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
  list-style: none;
}
.subgroup li {
    width: 30%;
    margin-bottom: 20px;
    box-sizing: border-box;
    margin-right: 4%;
}
.subgroup li:nth-child(3n){margin-right:0;}
.subgroup li.pic:hover,
.subgroup li.pic a:hover{background:#7cd5ec; color:#FFF;height:154px; font-size:1em;} 
.subgroup li.pic a{color:#10a4cc; text-decoration:none; display:block; padding:4px; font-weight:bold;box-sizing:border-box;}
.subgroup li img{display:block;width:100%; border-radius:8px;margin-bottom:5px;}
.subgroup li div{ margin-left:5px; line-height:1.2; font-size:.9em;}
.subgroup li.no-pic {
    box-sizing: border-box;
    display: block;
    height: 154px;
    padding: 0.3em;
    text-decoration: none;
    background: #c0e2f3;
    color: #10a4cc;
    font-weight: 600;
    position: relative;
    text-align:center;
}
li.no-pic a{
  color: #10a4cc;
  cursor:pointer;
  height:100%;
  display: flex;/* テキストを天地中央に揃えるため*/
  justify-content: center;
  align-items: center;
  font-size:.9em;
  font-family: font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
li.no-pic a:hover{color:#FFF;}
li.no-pic::after{
	font-family: "Font Awesome 5 Free";
	content: "\f138"" ";
	font-weight: 600;
	font-size:1.1em;
	color: #10a4cc;
	position:absolute;
	bottom:20px;
	left:45%;
}
li.no-pic:hover::after{color:#FFF;}
.center{text-align:center;}