@charset "UTF-8";

/**********************************************************/
/************************* News **************************/
/**********************************************************/

#news
{
	background-color:rgb(255, 255, 255);
	padding-top: max(8vw, 8rem);
	padding-bottom: max(10vw, 10rem);
}

* + #news
{
	padding-top: max(5vw, 5rem)
}

#news h1:not(.title),
#news h2
{
	position:sticky;
	top: 5rem;
	display: inline-block;
	font-family: 'FS-R';
	font-size: clamp(1.3rem, 3vw, 1.7rem);
	line-height: 1;
	padding-bottom: .25em;
	
	margin-right: max(2rem, 5vw);
	border-bottom: 1px solid;
}

#news > div
{
	display: flex;
	justify-content:space-between;
	align-items: flex-start;
}

#news .news_wrapper
{
	flex-shrink: 1;
	padding-top: clamp(2.5rem, 6.5vw, 3.7rem);
	width: calc(100% - clamp(7rem, 20vw, 10rem));
}

#news .news + .news
{
	margin-top: max(2.5rem, 4vw);
}

#news .news,
#news .news .text
{
	display: flex;
	justify-content: space-between;
}

#news .news .text
{
	width: calc(100% - 300px);
	align-items: center;
}

#news .news .text > div
{
	width: calc(100% - 10rem);
}

#news .news .text .time
{
	font-size: .8em;
	margin-bottom: .5em;
}

#news .news .text h4
{
	font-size: clamp(1rem, 2vw, 1.1rem);
	line-height: 1.5;
}

#news .news .text .moreBt > p
{
	width: calc(100% - 3em);
}

#news .news .text .moreBt > span.dir
{
	width: 3em;
}

body:not(.touch) #news .news .text .moreBt:hover span.dir:after
{
	width: calc(3em + 1em);
}

#news .news a._a
{
	width: 300px;
	margin-right: 2rem;
}

#news .news figure
{
	width: 100%;
	aspect-ratio: 5 / 3;
	overflow:hidden;
}

#news .news img
{
	width: 100%;
	height: 100%;
	object-fit:cover;
	object-position: 50% 50%;
	transition: all 1.5s ease;
}

body:not(.touch) #news .news a._a:hover img
{
	transform:scale(1.1);
}


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

@media screen and (max-width: 900px)
{

	#news .news .text
	{
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	
	#news .news .text > div
	{
		width: 100%;
		margin-bottom: .5em;
	}

}

@media screen and (max-width: 600px)
{
	#news > div
	{
		flex-direction: column;
	}

	#news .news_wrapper
	{
		width: 100%;
	}
	
	#news h1:not(.title), #news h2
	{
		position:static;
		margin-bottom:max(3rem, 3vw);
	}
}

@media screen and (max-width: 550px)
{
	#news .news a._a
	{
		width: max(150px, 50%);
	}

	#news .news .text
	{
		width: calc(100% - max(150px, 50%));
	}
}
	
@media screen and (max-width: 500px)
{
	#news .news
	{
		flex-direction: column;
	}

	#news .news + .news
	{
		margin-bottom: 4rem;
	}

	#news .news a._a
	{
		width: 100%;
		margin-right: 0;
		margin-bottom: 1rem;
	}

	#news .news .text
	{
		width: 100%;
	}
}