@charset"utf-8";

@import url("common.css");

/*TOP START*/

#content{
	padding-bottom:120px;
}

#animated-logo{
	position:relative;
	width:420px;
	aspect-ratio:2/1;
	float:left;
	margin-left:-12px;
}

#animated-logo #canvas-container{
	width:100%;
	height:100%;
}

#animated-logo img{
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	cursor:pointer;
}

#banner{
	width:246px;
	text-align:left;
	float:right;
	margin-right:18px;
	margin-bottom:60px;
}

#banner a{
	display:block;
}

#banner a.btn{
	float:left;
	margin-right:15px;
	margin-bottom:24px;
}

#banner a.banner{
	clear:both;
	margin-bottom:18px;
}

#news{
	clear:both;
	width:100%;
	text-align:left;
}

#news #news-header{
	font-size:1.8rem;
	color:#FF3300;
	margin-bottom:12px;
}

#news ul{
	list-style: none;
}

#news ul li{
	display:grid;
	grid-template-columns:72px 72px auto;
	gap:6px;
	border-bottom:#FF3300 2px solid;
	padding-bottom:6px;
	margin-bottom:27px;
}

#news ul li p.date{
	grid-column:2/3;
	grid-row:1/2;
	font-size:1.3rem;
	line-height:1.9rem;
}

#news ul li .category{
	grid-column:1/2;
	grid-row:1/2;
}

#news ul li .category p{
	font-size:1.2rem;
	line-height:1.8rem;
	text-align:center;
	color:white;
	background-color:#33c466;
}

#news ul li .category p.priority{
	background-color:#FF3300;
}

#news ul li p.title{
	grid-column:1/4;
	grid-row:2/3;
	font-size:1.5rem;
	text-align:justify;
}

@media screen and (max-width:809px) {
	#content{
		padding-top:90px;
	}

	#animated-logo{
		float:none;
		width:90%;
		margin:0 auto;
	}

	#banner{
		float:none;
		margin:0 auto;
		margin-top:90px;
		margin-bottom:90px;
	}
	
	#news #news-header{
		font-size:2.1rem;
	}
	
}

/*TOP END*/