main .container {
	margin:0 auto 4em;
	overflow: hidden;
}

main h1 {
	text-align: center;
	font-family: "Noto Sans", sans-serif;
	letter-spacing: 0.1em;
	font-size: 1.7em;
	color: var(--BaseColor);
	margin: 2em 0 1em;
}

main h1 span {
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-size:0.5em;
	letter-spacing: 0.08em;
}

main h2 {
	font-family: "Noto Sans", sans-serif;
	letter-spacing: 0.1em;
	font-size: 1.3em;
	margin-bottom:2em;
	text-align: center;
}

main h1 + ul {
	display: flex;
	justify-content: center;
	margin:2.5em 1em 1.5em;
	flex-wrap:wrap;
}

main h1 + ul li {
	width:auto;
	padding:0.5em 0;
}

main h1 + ul li a,
main h1 + ul li span {
	display: block;
	padding:0.5em 0.7em;
	color:#222;
	text-decoration: none;
	position: relative;
}

main h1 + ul li a.active,
main h1 + ul li span {
	border-bottom:solid 3px var(--BaseColor);
}

ul.subcate {
	text-align: center;
	margin:0 1em 2em;
}

ul.subcate li {
	display: inline-block;
	margin:0.3em;
	font-size: 0.95em;
}

ul.subcate li a {
	padding:0.2em 0.8em 0.3em;
	line-height: 1.2;
	border: solid 1px var(--BaseColor);
	border-radius:1em;
	color:var(--BaseColor);
	text-decoration:none;
}

ul.subcate li.active a {
	background:var(--BaseColor);
	color:#FFF;
}

#works ul {
	display: flex;
	flex-wrap:wrap;
	gap:7vw 4vw;
}

#works ul li {
	width:43vw;
}

#works ul li a {
	display: block;
	text-decoration: none;
	color:var(--BaseColor);
	font-size: 0.9em;
}

#works ul li a img {
	object-fit: cover;
	width:43vw;
	height:calc(43vw / 4 * 3);
}

#works ul li a figure figcaption {
	margin-top:0.6em;
	font-family: "Noto Sans", sans-serif;
	letter-spacing: 0.05em;
    font-size: 0.9em;
    font-weight:300;
}

#works ul li a figure figcaption span {
	display:inline-block;
}

#works ul li figure.line_gray img {
	outline: solid 1px #EEE;
	outline-offset: -1px;
}

#works ul li figure > span {
	display: block;
}

#works ul li a > div {
	display: none;
}

#works ul li a > div p.in_charge {
	font-size: 0.8em;
	margin-bottom: 1em;
}

#works ul li a > div p {
	color:var(--DarkGray);
	font-size: 0.9em;
}

.page-navi {
	margin: 2em 0;
    text-align: center;
}

.wp-pagenavi a,
.wp-pagenavi span {
	font-family: "Noto Sans", sans-serif;
	width:2em;
	height:2em;
    line-height: 1.5;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	color:var(--BaseColor);
}

.wp-pagenavi a {
	color:var(--BaseColor);
}

main .wp-pagenavi a:hover,
main .wp-pagenavi span.current {
	border-color:var(--BaseColor);
}


@media print, screen and (min-width: 480px) {

main h1 + ul li a,
main h1 + ul li span {
	padding:0.5em 1.5em;
}

}


@media print, screen and (min-width: 640px) {

main h1 {
	font-size:2em;
}

#works ul {
	gap:6vw 4vw;
}

#works ul li a {
	font-size:1em;
}

#works ul li a figure figcaption {
	font-size:1em;
}

}


@media print, screen and (min-width: 768px) {

#works ul {
	gap:5vw 4vw;
}

.wp-pagenavi a,
.wp-pagenavi span {
	font-size: 1.2em;
}

}


@media print, screen and (min-width: 960px) {

}


@media print, screen and (min-width: 1200px) {

main h1 + ul li a,
main h1 + ul li span {
	padding:0.5em 1.7vw;
}

main h1 + ul li a:before,
main h1 + ul li a:after {
	content:"";
	position: absolute;
	bottom:-3px;
	width:0;
	height:3px;
	background:var(--BaseColor);
	transition-duration: .2s;
}

main h1 + ul li a:hover:before,
main h1 + ul li a:hover:after {
	width:50%;
}

main h1 + ul li a:before {
	left:50%;
}

main h1 + ul li a:after {
	right:50%;
}

#works ul {
	gap:60px calc((100vw - 300px) / 23);
}

#works ul li {
	width:calc((100vw - 300px) * 10 / 23);
}

#works ul li a figure > span {
	display: block;
	overflow: hidden;
}

#works ul li a img {
	width:calc((100vw - 300px) * 10 / 23);
	height:calc((100vw - 300px) * 10 / 23 / 4 * 3);
	transition-duration: .3s;
}

#works ul li a {
	position: relative;
}

#works ul li a:hover img {
	filter:brightness(0.4);
	transform:scale(1.1);
}

#works ul li a > div {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	height: auto;
	opacity: 0;
	transition-duration: .5s;
	padding:3em;
	box-sizing: border-box;
}

#works ul li a > div p {
	color:#FFF;
	line-height: 1.6;
	font-size: 14px;
}

#works ul li a > div p.in_charge {
	font-family: "Noto Sans", "Noto Sans JP", sans-serif;
	margin-bottom:0.6em;
}

#works ul li a:hover > div {
	opacity: 1;
}

}


@media print, screen and (min-width: 2000px) {

#works ul {
	gap: 60px;
}

#works ul li {
	width:calc((100% - 120px) / 3);
}

#works ul li a img {
	width:calc(( ((100vw - 300px) * 21 / 23) - 120px) / 3);
	height:calc(( ((100vw - 300px) * 21 / 23) - 120px) / 3 / 4 * 3);
}

}