@charset "UTF-8";

:root{
	--body : #000;
	--link : #000;
	--primary : #000;
}

/*--------------------------------------------
WORKS
---------------------------------------------*/

@keyframes fade-in{
	from{
		opacity : 0;
	}
	to{
		opacity : 1;
	}
}

#otherWorks .box ul{
}

#otherWorks .box button{
	letter-spacing : .06em;
	color : #9e937d;
	border-bottom-style : solid;
	border-bottom-color : transparent;
	transition : border-bottom-color .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : border-bottom-color;
	font-weight : 500;
}

#otherWorks .box button:hover , #otherWorks .box button.is-current{
	border-bottom-color : currentColor;
}

@media screen and (max-width: 750px){
	#otherWorks .box ul{
		margin-top : calc( ( 39 - 18 ) * 100vw / 375 );
		overflow : hidden;
		position : relative;
		padding-left : calc( 34 * 100% / 330 );
	}
	#otherWorks .box li{
		margin-top : calc( 18 * 100vw / 375 );
		float : left;
	}
	#otherWorks .box li:first-child{
		width : calc( 30 * 100% / 330 );
		position : absolute;
		top : 0;
		left : 0;
	}
	#otherWorks .box li + li{
		margin-left : calc( 30 * 100% / 296 );
	}
	#otherWorks .box button{
		height : calc( 21 * 100vw / 375 );
		display : flex;
		align-items : center;
		font-size : 1.35rem;
		border-bottom-width : calc( 2 * 100vw / 375 );
	}
	#otherWorks .posts{
		margin-top : calc( ( 52 - ( 18.5 - 1 ) ) * 100vw / 375 );
	}
}

@media print,screen and (min-width: 751px){
	#otherWorks .box ul{
		display : flex;
		align-items : flex-start;
		margin-left : 54px;
		margin-top : 10px;
	}
	#otherWorks .box li + li{
		margin-left : 29px;
	}
	#otherWorks .box button{
		display : block;
		font-size : 1.4rem;
		line-height : 1.3036;
		padding-top : 1px;
		border-bottom-width : 1px;
	}
	#otherWorks .posts{
		margin-top : calc( 78px - ( 69px - 6.125px ) );
	}
}