/*===============================================
●画面の横幅が768px以上
===============================================*/
@media print, screen and (min-width: 768px){

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

/*  ページレイアウト　*/
/*--------------------------------------------------------*/

.contentsBox{
	margin-top:70px;
	padding:0 40px 0 40px;
}

.contentsBox ul.works_list{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 50px; /* 行と列の間隔 */
}

.contentsBox ul.works_list li{
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.contentsBox ul.works_list li img{
	border:1px solid #EEE;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
	box-sizing: border-box;
	transition: all  0.2s ease;
}

.contentsBox ul.works_list li a:hover img{
	opacity: 0.6;
}

.contentsBox .illust_link{
	text-align:center;
	padding:100px 0 60px 0;
}

.contentsBox .illust_link a{
	color:#1841CE;
}

}













/*===============================================
●画面の横幅が768px以下
===============================================*/
@media screen and (max-width:768px){

img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

/*  ページレイアウト　*/
/*--------------------------------------------------------*/

.contentsBox{
	margin-top:50px;
	padding:0 20px;
}

.contentsBox ul.works_list{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.contentsBox ul.works_list li{
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.contentsBox ul.works_list li img{
	border:1px solid #EEE;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
	box-sizing: border-box;
	transition: all  0.2s ease;
}

.contentsBox ul.works_list li a:hover img{
	opacity: 0.6;
}

.contentsBox .illust_link{
	text-align:center;
	padding:80px 0 0 0;
}

.contentsBox .illust_link a{
	color:#1841CE;
}

}