@charset "UTF-8";
/* CSS Document */

/* エリア-------------*/
.works-content{
	padding: 60px 0;
}

.works-area{
	margin-top: 30px;
}
/* /エリア-------------*/



.container{
	background-color: #F5F2EA;
}

.works-area{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 30px 15px;
}

.works-list{
	width: calc((100% - 30px) / 3);
	background-color: #fff;
}

.works-img{
	width: 100%;
}

.works-img img{
	width: 100%;
}

.works-txt{
	padding: 16px;
}

.production-name{
	font-weight: bold;
}

.publisher{
	font-size: 14px;
	margin-bottom: 16px;
}

.Genre{
	font-size: 14px;
	border-bottom: 1px solid #333333;
}

.details{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 10px;
}

.details li{
	display: inline-block;
	background-color: #fff;
	border-radius: 20px;
	padding: 2px 15px;
	font-size: 12px;
}

.automatictypesetting{
	border: 1px solid #B883E0;
	color: #B883E0;
}

.correction{
	border: 1px solid #ffbf7f;
	color: #ffbf7f;
}

.proofreading{
	border: 1px solid #76D981;
	color: #76D981;
}

.prepress{
	border: 1px solid #D9CA67;
	color: #D9CA67;
}

.typesetting{
	border: 1px solid #7fbfff;
	color: #7fbfff;
}

.retouch{
	border: 1px solid #ff7fbf;
	color: #ff7fbf;
}

.colorize{
	border: 1px solid #ff7f7f;
	color: #ff7f7f;
}

.line-drawing-extraction{
	border: 1px solid #A2DE66;
	color: #A2DE66;
}









/* タブレット用（1024px以下）-------------*/
@media screen and (max-width: 1024px) {

}
/* /タブレット用（1024px以下）-------------*/









/* スマホ用（600px以下） -------------*/
@media screen and (max-width: 600px) {
.works-area{
	gap: 30px 0px;
}

.works-list{
	width: 100%;
}
}
/* /スマホ用（600px以下） -------------*/