@charset "UTF-8";

.category {
	list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;
}
.category li {
	float: left;
}
.cateLeft {
	margin-left: 5%
}
.category li a:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
}
.category li img {
	width: 100%
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wrap figure {
    width: 25vw;
	max-width: 400px;
    margin: 0 20px 30px 20px;
}

.wrap img {
	margin-bottom: 1em;
}

.wrap p {
	line-height: 1.5em;
	margin-bottom: 1em;
}

.wrap .name {
	color: #d7508e;	
}

.wrap .name span {
	font-weight: bold;
}

#works_main {
	width: 73.6842%;
	height: 100%;
	margin-left: 26%;
	margin-top: 10%;
}

#works_main h2 {
	text-align: center;
	margin-bottom: 5%;
}

#works_footer {
	width: 73.6842%;
	margin: 2% 0 2% 26%;
	text-align: right;
}

@media screen and (max-width: 768px) {
	.wrap {
		display:block;
	}

	.wrap figure {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.wrap figure p {
		font-size: clamp(12px, 3vw, 16px);
	}

	.wrap img,
	.wrap p {
		margin-bottom: 0.5em;
	}
	
}