@charset "UTF-8";
/*--------------------------------------------
COMMON
---------------------------------------------*/
@media screen and (max-width: 750px){
	body{
		padding-top : calc( 120 * 100vw / 750 );
	}
}
@media print,screen and (min-width: 751px){
	body{
		padding-top : 56px;
	}
}
/*--------------------------------------------
NEWS
---------------------------------------------*/
#news h1{
	text-align : center;
}
#news .links{
	display : flex;
	flex-wrap : wrap;
}
#news .links a{
	width : 100%;
	height : 100%;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	font-weight : 500;
	border-style : solid;
	transition : color .3s ease-in , background-color .3s ease-in;
	backface-visibility : hidden;
	will-change : color, background-color;
}
#news .links a.label-all{
	color : #000;
	background-color : #fff;
}
#news .links a.label-all:hover , #news .links a.label-all.is-active{
	background-color : #000;
	color : #fff;
	border-color : #000;
}
#news .links a.label-new{
	color : #a4804c;
	border-color : #a4804c;
}
#news .links a.label-new:hover , #news .links a.label-new.is-active{
	background-color : #a4804c;
	color : #fff;
}
#news .links a.label-event{
	color : #c18065;
	border-color : #c18065;
}
#news .links a.label-event:hover , #news .links a.label-event.is-active{
	background-color : #c18065;
	color : #fff;
}
#news .links a.label-other{
	color : #808080;
	border-color : #808080;
}
#news .links a.label-other:hover , #news .links a.label-other.is-active{
	background-color : #808080;
	color : #fff;
}
#news .posts > li > a{
	position : relative;
	background-image : url("../images/ui/icon/arrow01.svg");
	background-repeat : no-repeat;
}
#news .posts > li > a > p{
	position : absolute;
	z-index : 1;
}
#news .posts picture img{
	width : 100%;
	height : auto;
}
#news .posts h2{
	font-weight : 600;
}
#news .posts time{
	font-weight : 500;
}
@media screen and (max-width: 750px){
	#news .wrap{
		padding-top : calc( 52 * 100vw / 750 );
		padding-bottom : calc( 94 * 100vw / 750 );
		padding-left : calc( 70 * 100% / 750 );
		padding-right : calc( 70 * 100% / 750 );
	}
	#news h1{
		font-size : 4rem;
	}
	#news .links{
		margin-top : calc( 38 * 100vw / 750 );
		padding-left : calc( 35 * 100% / 610 );
		padding-right : calc( 35 * 100% / 610 );
		justify-content : space-between;
	}
	#news .links li{
		width : calc( 250 * 100% / 540 );
		height : calc( 70 * 100vw / 750 );
	}
	#news .links li:nth-child(n+3){
		margin-top : calc( 30 * 100vw / 750 );
	}
	#news .links a{
		font-size : 3.2rem;
		border-width : calc( 2 * 100vw / 750 );
	}
	#news .posts{
		margin-top : calc( 52 * 100vw / 750 );
	}
	#news .posts > li + li{
		margin-top : calc( 102 * 100vw / 750 );
	}
	#news .posts a{
		display : block;
		background-size : auto calc( 26 * 100vw / 750 );
		background-position : right bottom calc( 12 * 100vw / 750 );
	}
	#news .posts a > p{
		left : calc( -16 * 100% / 610 );
		top : calc( -6 * 100vw / 750 );
	}
	#news .posts a > p img{
		height : calc( 180 * 100vw / 750 );
	}
	#news .posts picture{
		width : 100%;
	}
	#news .posts li > a > div{
		margin-top : calc( ( 46 - 4 ) * 100vw / 750 );
	}
	#news .posts h2{
		font-size : 3.26rem;
		line-height : 1.25;
	}
	#news .posts time{
		display : block;
		margin-top : calc( ( 118 - 4 ) * 100vw / 750 );
		font-size : 2.8rem;
	}
}
@media print,screen and (min-width: 751px){
	#news .wrap{
		padding-top : 86px;
		padding-bottom : 84px;
		padding-left : 148px;
		padding-right : 148px;
	}
	#news h1{
		font-size : 3.6rem;
	}
	#news .links{
		margin-top : 64px;
	}
	#news .links li{
		width : 162px;
		height : 34px;
	}
	#news .links li:not(:nth-child(4n+1)){
		margin-left : 58px;
	}
	#news .links a{
		font-size : 1.6rem;
		border-width : 1px;
	}
	#news .posts{
		margin-top : 148px;
	}
	#news .posts > li + li{
		margin-top : 94px;
	}
	#news .posts a{
		display : flex;
		padding-left : 7px;
		background-size : auto 14px;
		background-position : right bottom 18px;
	}
	#news .posts a > p{
		left : 0;
		top : -6px;
	}
	#news .posts a > p img{
		height : 85px;
	}
	#news .posts a > div{
		display : flex;
		flex-direction : column;
		width : 100%;
	}
	#news .posts h2{
		font-size : 2rem;
		line-height : 1.5;
	}
	#news .posts picture{
		flex-shrink : 0;
		width : 250px;
		margin-right : 34px;
	}
	#news .posts .exerpt{
		font-size : 1.6rem;
		line-height : 1.875;
		margin-top : 10px;
	}
	#news .posts time{
		margin-top : auto;
		padding-bottom : 16px;
		font-size : 1.6rem;
	}
}
#pagination{
	display : flex;
	justify-content : center;
	align-items : center;
}
#pagination a{
	font-weight : 600;
}
@media screen and (max-width: 750px){
	#pagination{
		margin-top : calc( 88 * 100vw / 750 );
	}
	#pagination a + a{
		margin-left : calc( 102 * 100vw / 750 );
	}
	#pagination a{
		font-size : 3.2rem;
		display : flex;
		align-items : center;
	}
	#pagination .prev:before{
		content : "";
		display : block;
		background : url("../images/ui/icon/prev02.svg") 0 center / contain no-repeat;
		width : 19px;
		height : 33px;
		margin-right : 6px;
		flex-shrink : 0;
	}
	#pagination .next:after{
		content : "";
		display : block;
		background : url("../images/ui/icon/next02.svg") 0 center / contain no-repeat;
		width : 19px;
		height : 33px;
		margin-left : 6px;
		flex-shrink : 0;
	}
}
@media print,screen and (min-width: 1120px){
	#pagination{
		margin-top : 100px;
	}
	#pagination a + a{
		margin-left : 52px;
	}
	#pagination a{
		width : 85px;
		font-size : 1.6rem;
		padding-bottom : 5px;
		background-size : 100% auto;
		background-repeat : no-repeat;
		font-weight : 600;
	}
	#pagination .prev{
		padding-left : 31px;
		background-position : left bottom;
		background-image : url("../images/ui/icon/arrow02.svg");
	}
	#pagination .next{
		text-align : right;
		padding-right : 31px;
		background-image : url("../images/ui/icon/arrow02_reverse.svg");
		background-position : right bottom;
	}
}