@charset "utf-8";
/* CSS Document */
#cosList{
}
#cosList ul{
	font-size:0;
	text-align:left;
    /*コレ*/display: flex;
    /*コレ*/align-items: stretch;
	flex-wrap:wrap;
}
#cosList ul li{
	display:inline-block;
	margin:10px;
	font-size:14px;
	text-align:center;
	width:calc(100%/4 - 20px);
	vertical-align:top;
	border:1px solid #cccccc;
	border-radius:3px;
	padding:2px;
	box-sizing: border-box;
}
#cosList ul li h3{
	text-align:left;
	font-weight:bold;
	padding:3px 1px;
	font-size:14px;
}
#cosList ul li img{
	display:block;
	margin:auto;
	max-width:100%;
}
#cosList ul li h4{
	text-align:center;
	font-weight:bold;
	padding:5px;
	font-size:14px;
}
#cosList ul li p{
	text-align:left;
	font-weight:normal;
	font-size:12px;
	padding:10px;
}
	#largeImg{
		display:none;
	}
	#largeImg.active{
		display:block;
		position:fixed;
		padding:10px;
		width:calc(100% - 20px);
		height:100vh;
		top:0;
		left:0;
		z-index:10;
		background:rgba(0,0,0,.6);
	}
	#largeImg.active img{
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		z-index:1;
		max-width: calc(100% - 20px);
max-height: calc(100vh - 20%);
		box-shadow:1px 1px 5px rgba(0,0,0,.6);
	}

@media screen and (max-width: 667px) {
#cosList ul li {
    width: calc(100%/3 - 10px);
    margin: 10px 5px;
}	
#cosList ul li h3,
#cosList ul li h4{
	font-size:13px;
}
}