ul.topicData{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-wrap: wrap; /* 折返し指定 */
}

.topicData li{
	position: relative;
	width:calc((100% - 1.5em) / 2);
	margin-right:1.5em;
	vertical-align:top;
	cursor:pointer;
	transition:0.3s;		
}

.topicData li:nth-child(2n){
	margin-right:0;
}

.topicData li img{
	height:30vw;
	width:100%;
	vertical-align: top;
	
	transition:.3s all;
}


.topicData li p{
	margin:0.75em 0;
	line-height:1.5em;
}

.topicData .swip{
	overflow: hidden;
}

.topicData li:hover{
	opacity:0.7;
}

.topicData li:hover img{
	transform:scale(1.2, 1.2);
}


.topicData li p.small{
	display: block;
	width:6em;
	position: absolute;
	right:0;
	text-align:center;
	margin:-2em 0.5em 0.25em 0 !important;
	background:rgb(255,255,255,.7);
}

.topicData li p.club{
	display: inline-block;
	position: absolute;
	left:0;
	top:0;
	text-align:center;
	margin:0.5em 0 0 0.5em !important;
	padding:0.1em 0.5em 0 0.5em;
	font-size:0.7em;
	color:#fff;
}

.topicData li p.club.club_sports{
	background:#f7b63d;
}

.topicData li p.club.club_cultural{
	background:#64bfaa;
}

@media screen and (min-width: 568px) {
	.topicData li img{
		height:150px;
	}
	.topicData li p.club{
		font-size:0.8em;
	}
	
}

@media screen and (min-width: 768px) {
	.topicData li img{
		height:150px;
	}
	
	.topicData li{
		width:calc((100% - 3em) / 3);
		margin-right:1.5em;
	}

	.topicData li:nth-child(2n){
		margin-right:1.5em;
	}
	.topicData li:nth-child(3n){
		margin-right:0;
	}
	
}

@media screen and (min-width: 1024px) {
	
	.topicData li p{
		margin:0.75em 0 1.5em 0;
		line-height:1.8em;
	}
	
	.topicData li p.small{
		margin-top:-2.25em !important;
	}
	
	.topicData li img{
		height:200px;
	}

}

@media screen and (min-width: 1280px) {
	
	.topicData li,
	.topicData li:nth-child(2n){	
		width:calc((100% - 4em) / 3);
		margin-right:2em;
	}
	.topicData li:nth-child(3n){
		margin-right:0;
	}
	
}


/*	top page */
@media screen and (min-width: 568px) {
	.top .topicData li{
		width:calc((100% - 3em) / 3);
		margin-right:1.5em;
	}

	.top .topicData li:nth-child(2n){
		margin-right:1.5em;
	}
	.top .topicData li:nth-child(3n){
		margin-right:0;
	}
}

/*	top page */
@media screen and (min-width: 768px) {
	.top .topicData li p{
		margin:0.75em 0 1.5em 0;
		line-height:1.8em;
	}
	
	.top .topicData li p.small{
		margin-top:-2.25em !important;
	}
	
	
	.top .topicData li img{
		height:175px;
	}
}

/*	top page */
@media screen and (min-width: 1024px) {
	.top .topicData li{
		width:calc((100% - 6em) / 4);
		margin-right:2em;
	}

	.top .topicData li:nth-child(2n),
	.top .topicData li:nth-child(3n){
		margin-right:2em;
	}
	
	.top .topicData li:nth-child(4n){
		margin-right:0;
	}
}

@media screen and (min-width: 1280px) {
	
	.top .topicData li img{
		height:240px;
	}
	
	.top .topicData li{		
		margin-right:1.5em !important;
		margin-left:1.5em !important;
	}
}