/* Works */
#works .works-list.grid {
	margin-bottom:var(--margin);
}
#works .works-list.grid a {
	padding:20px;
	display:block;
	height:100%;
}
#works .works-list.grid a figure p {
	aspect-ratio:1 / 1;
	overflow:hidden;
}
#works .works-list.grid a figure p img {
	object-fit:cover;
	width:100%;
	height:100%;
}
#works .works-list.grid a figure figcaption {
	color:var(--color-black);
	font-weight:bold;
	text-align:center;
	font-size:1.2em;
}
#works .works-list.grid a figure figcaption span {
	display:block;
	font-size:0.7em;
	line-height:1em;
	background:var(--color-gray);
	color:var(--color-white);
	border-radius:20px;
	padding:5px;
	margin-bottom:10px;
}

#works.works-list {
	padding:40px 0;
}


#works-detail {
	margin-bottom:var(--margin);
}
#works-detail > .width-limiter {
	padding-bottom:40px;
}
#works-detail article {
	padding:20px;
	position:relative;
}
#works-detail article aside + p {
	padding-top:20px;
	padding-bottom:0;
}

#works-detail div > p {
	color:var(--color-black);
}

#works-detail figure p {
	aspect-ratio:1 / 1;
	overflow:hidden;
	padding:0;
}
#works-detail figure p img {
	object-fit:cover;
	width:100%;
	height:100%;
}
#works-detail h3 {
	color:var(--color-black);
	text-align:center;
	width:100%;
}
#works-detail h3 span {
	display:block;
	font-size:0.7em;
	line-height:1em;
	background:var(--color-gray);
	color:var(--color-white);
	font-family: var(--font-2);
	border-radius:20px;
	padding:5px;
	margin:0 auto 10px auto;
	max-width:400px;
}
#works-detail ul {
	padding:0;
	margin:0;
}
#works-detail ul li {
	list-style:none;
}
#works-detail aside {
	position:relative;
	border:solid 1px var(--color-lightgray);
	border-radius:var(--radius-inner);
	padding:40px 20px 20px 20px;
	margin-top:40px;
}
#works-detail aside h4 {
	font-size:1.2em;
	color:var(--color-gray);
	background:var(--color-superwhite);
	position:absolute;
	top:-0.9em;
	left:50%;
	transform: translateX(-50%);
	display:inline-block;
	padding:0 20px;
}
#works-detail .button {
	width:100%;
}

@media (prefers-color-scheme: dark){
	#works-detail ul li a:not(:hover) {
		color:var(--color-black);
	}

	#works-detail aside {
		border:solid 1px var(--color-gray);
	}
	#works-detail aside h4 {
		color:var(--color-black);
		background:var(--color-lightgray);
	}
}


/** Media Query **/
@media (max-width : 920px) {

}
@media (max-width : 520px) {
	#works-detail article > * {
		width:100%;
	}
}