@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////// NEWS /////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/


#caterories
{
	display: flex;
	justify-content: center;
	flex-wrap:wrap;
	width: calc(100% + 1rem);
	margin: clamp(3rem, 10vw, 5rem) -1rem 0;
}

#caterories > a
{
	margin: .25em .5em;
}

#news
{
	padding: max(3rem, 5vw) 2rem;
	max-width: 1500px;
}

.news_wrapper
{
	display: flex;
	flex-wrap: wrap;
	width: calc(100% + 2rem);
	margin-left: -1rem;
	
	justify-content: center;
}

.news_wrapper:has(a:nth-child(n+4))
{
	justify-content: flex-start;
}

.news_wrapper .news
{
	width: calc(100% / 4 - 2rem);
	margin: 1rem;
	padding: 1rem;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
	
	background-color: rgb(250, 250, 250);
	box-shadow: 0px 0px 5px rgba(0,0,0,.2);
}

body:not(.touch) .news_wrapper a.news:hover
{
	background-color: rgb(250, 250, 250);
	box-shadow: 0px 0px 25px rgba(0,0,0,.3);
	transform: translateY(-1rem);
}

.news_wrapper .news a.img,
.news_wrapper .news figure
{
	display: block;
	width: 100%;
	aspect-ratio: 5/ 3;
}

.news_wrapper .news a.img > img,
.news_wrapper .news figure > img
{
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
}

.news_wrapper .news .text
{
	margin-top: 1em;
	display: flex;
	flex-direction:column;
	align-items: center;
	line-height: 1.5;
}

#news h3
{
	font-size: clamp(1rem, 2vw, 1.1rem);
}

#news .cate_date
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 1em -.2em;
	width: calc(100% + .2em);
/*	color: rgb(100, 100, 100);*/
	font-size: .9em;
	transform: translateY(-0.2em);
}
.cate_date > span
{
	margin: 0 .2em;
}

.news_wrapper .news .desc
{
	margin-top: .75em;
	padding-top: .75em;
	border-top: 1px solid rgb(230, 230, 230);
	font-size: .85em;
/*	color: rgb(50, 50, 50);*/
}

#news .link
{
	margin-top: 1em;
	display: flex;
	justify-content:center;
}

/*//////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////*/


@media screen and (max-width: 1080px)
{
	.news_wrapper:has(a:nth-child(n+3))
	{
		justify-content: flex-start;
	}

	.news_wrapper .news
	{
		width: calc(100% / 3 - 2rem);
	}
}

@media screen and  (max-width: 850px)
{
	.news_wrapper:has(a:nth-child(n+2))
	{
		justify-content: flex-start;
	}

	.news_wrapper .news
	{
		width: calc(100% / 2 - 2rem);
	}
}

@media screen and  (max-width: 600px)
{
	.news_wrapper .news
	{
		width: calc(100% / 1 - 2rem);
		display: flex;
		align-items: flex-start;
	}
	.news_wrapper .news figure
	{
		width: 50%;
		aspect-ratio: 1 / 1;
	}
	.news_wrapper .news .text
	{
		width: 50%;
		align-items: flex-start;
		padding-left: 1rem;
		margin-top: 0;
	}
	#news .cate_date
	{
		justify-content: flex-start;
	}
	.news_wrapper .news .text h3
	{
		font-size: 1rem;
	}
	.news_wrapper .news .desc
	{
		font-size: .9rem;
	}
}

@media screen and  (max-width: 500px)
{
	.news_wrapper .news .desc
	{
		display: none;
	}
	#news .cate_date
	{
		margin-bottom: 0;
	}
	
}