@charset "UTF-8";

.portfolio__ul{
	display: flex;
	flex-direction: column;
	gap:40px;
}

.portfolio__li>a{
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 20px;
}

.portfolio__li-img{
	position: relative;
	width:100%;
	aspect-ratio: 1/1;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--color-gray-05);
}

.portfolio__li-img>img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:100%;
	height: 100%;
	object-fit: cover;
}

.portfolio__li-img>.no_image{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: var(--color-gray-70);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.portfolio__li-tit{
	margin-bottom: 8px;
	word-break: break-all;
	transition: 0.3s;
}

.portfolio__li-txt{
	margin-bottom: 40px;
	color: var(--color-gray-70);
}

.portfolio__li-date{
	text-align: right;
	color: var(--color-gray-70);
}

.portfolio__li>a:hover .portfolio__li-tit{
	color: var(--color-primary-50);
}

.portfolio__empty-data{
	text-align: center;
	padding:80px 0;
	box-sizing: border-box;
	color: var(--color-gray-70);
}

@media all and (max-width:840px) {
	.portfolio__li>a{
		grid-template-columns: 80px 1fr;
	}
}