#page_title{
	background:#ff9100 url('../images/works/pagetitle.webp') no-repeat top center;
}
.subnav{
	max-width:1100px;
	margin:0 auto 100px;
}
.subnav dl{
	display:flex;
	gap:20px;
	align-items:flex-start;
}
.subnav dl dt{
	white-space:nowrap;
	font-size:30px;
	color:#fd4e01;
	font-weight:bold;
	line-height:1em;
}
.subnav dl dd ul{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	gap:10px 20px;
}
.subnav dl dd ul li{
	width:calc((100% - 60px) / 4);
}
.subnav li a{
	display:block;
	width:100%;
	line-height:30px;
	text-decoration:none;
	font-size:18px;
	font-weight:bold;
	background:#fd4e01;
	text-align:center;
	color:#fff;
}
.subnav li a:hover{
	background:#fb8d5d;
}
.works_cat{
	position:relative;
}
#works_list article{
	display:flex;
	flex-wrap:wrap;
	gap:40px 50px;
}
#works_list dl{
	width:calc((100% - 50px) / 2);
	display:flex;
	gap:10px;
}
#works_list dt{
	width:240px;
}
#works_list dt a{	
	display: block;
	width: 240px;
	height: 280px;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	overflow: hidden;
	position:relative;
}
#works_list dt a img{
	display:block;
	width: 100%;
	height: 100%;
	object-fit: cover
}

/* 右下に影を追加して立方体風に */
#works_list dt a::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%; /* 幅を全体に */
	height: 100%; /* 高さを全体に */
	background: rgba(0, 0, 0, 0.3); /* 半透明の黒 */
	clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); /* 影の形状 */
	transform: translate(0, 0);
	pointer-events: none; /* クリックを邪魔しない */
}

#works_list dd{
	padding:70px 0 0;
}
#works_list dd .cat{
	background:#fd4e01;
	text-align:center;
	color:#fff;
	max-width:220px;
}
#works_list dd a{
	color:#000;
	text-decoration:none;
}
#main_photo{
	display:flex;
	gap:70px;
	margin:0 auto 40px;
}
#main_photo figure{
	width:720px;
	flex:none;
}
#main_photo .comment{
	width:calc(100% - 790px);
	flex:none;
}
#main_photo .comment strong{
	color:#fd4e01;
}
#thumb_photo{
	padding:0;
	list-style:none;
	gap:10px;
	display:flex;
	flex-wrap:wrap;
}
#thumb_photo li{
	height:270px;
	width:calc((100% - 20px) / 3);
}
#thumb_photo li img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}