@charset "UTF-8";

/*/////-----NEWS-----/////*/

#news{
	background-color:#fff;
	color:#222;
}

#news div.content{
	box-sizing: border-box;
	padding:10px;
	
	width:100%;
	margin:0 auto;
	max-width: 960px;
}


/*/////-----ARCHIVEROW-----/////*/

.archiverow{
	margin-bottom:10px;
}

.archiverow:last-child{
	margin-bottom:0;
}

.archiverow a{
	display:block;
}

.archiverow a:hover{
	opacity:0.8;
	text-decoration:none;
}

.archiverow div.inner{
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
	
	padding-right:30px;
	position: relative;
	
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
}

.archiverow div.inner:before{
	display:block;
	content:"";
	
	width:30px;
	height:30px;
	
	background-image: url("../images/icon_topix-arrow-right.webp");
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
	
	position: absolute;
	top:0;
	bottom:0;
	right:10px;
	
	margin:auto 0;
}

.archiverow ul{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
	margin-bottom:5px;
}

.archiverow ul li.update{
	font-size:0.8rem;
	line-height:20px;
	
	width:95px;
	
	/*background-color:#444;*/
}

.archiverow ul li.category{
	font-size:0.8rem;
	line-height:20px;
	text-align: center;
	
	width:120px;
	
	/*background-color:#888;*/
}

.archiverow ul li.category span.note{
	display:block;
	
	background-color:#000;
	color:#fff;
}

.archiverow ul li.category span.category_a{
	background-color:#f00;
}

.archiverow ul li.category span.category_b{
	background-color:#f80;
}

.archiverow ul li.category span.category_c{
	background-color:#094;
}

.archiverow h4{
	width:100%;
	
	font-weight:500;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media only screen and (min-width: 720px){
	
	.archiverow ul{
		width:230px;
		margin-bottom:0;
	}
	
	.archiverow h4{
		width:calc(100% - 230px);
	}
	
}

/*----- PAGER-ARCHIVE -----*/

.pager ul.archive{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	
	width:100%;
	
	margin-top:30px;
}

.pager ul.archive li{
	width:50px;
	
	box-sizing: border-box;
	padding:0 5px;
}

.pager ul.archive li span.note{
	display:block;
	
	background-color:#f0f0f0;
	color:#000;
	
	font-size:0.75rem;
	line-height:40px;
	font-weight:bold;
	
	text-align: center;
	
	border-radius:5px;
}

.pager ul.archive li a{
	display:block;
	
	background-color:#f00;
	color:#fff;
	
	border-radius:5px;
	
	transition:0.25s;
}

.pager ul.archive li a:hover{
	opacity: 0.75;
	text-decoration: none;
}