*{
	margin: 0;
	padding: 0;
}

.flex{
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 50px;
}
section{
}
.title{
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
	font-weight: 500;
}

h1, p{
	font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','メイリオ', Meiryo,sans-serif;
	color: #333;
}

.return_box{
		margin: 50px 10px;
}
.returen{
	text-decoration: none;

	padding: 5px;
	color: #333;
	border-bottom: 1px solid #333;
}
@media(max-width: 670px){
	h1{
		padding: 20px 0 10px 2.5%;
	}
	.works{
		width: 45%;
		margin: 15px 2.5%;

	}
	.work_img{
		width: 100%;
	}

	.title{
		font-size: 16.5px;
		border-bottom: 1px solid #333;
	}
	.genre{
		font-size: 14px;
		color: #333;
	}

	.name{
		font-size: 14px;
		color: #333;
	}

	.textIn{
		filter: grayscale(1);
	}
	.textIn.active{
		animation: fadeinShadow 1s forwards;
	}
	@keyframes fadeinShadow{
		0%{
			filter: grayscale(1);
		}
		100%{
			filter: grayscale(0);
		}
	}
}


@media(min-width: 670px){
	h1{
		padding: 20px 0 10px 15px;
	}
	.works{
		width: 200px;
		margin: 15px;
	}

	.work_img{
		width: 100%;
		transition: 0.3s;
		filter: grayscale(1);
	}

	.work_img:hover{
		transition: 0.3s;
		filter: grayscale(0);
	}

	.title{
		font-size: 18px;
		border-bottom: 1px solid #333;
	}
	.genre{
		font-size: 16px;
		color: #333;
	}

	.name{
		font-size: 16px;
		color: #333;
	}

}