@charset "UTF-8";


@media screen and (min-width : 960px){


	/* -------------------------------------------------------------------------------------------
	*
	* トピックス
	*
	* ----------------------------------------------------------------------------------------- */

	#topics{
		padding: 5.75rem 0 0 0;
	}

	#topics h3{
		margin: 0 0 1rem 0;
		line-height: 1;
		}
	#topics h3 p{
		display: inline-block;
		vertical-align: top;
		font-size: 1.3125rem;
		padding: 0 0 0.125rem 0;
		border-bottom: 2px solid #cccccc;
	}

	#topics div.tagList{
		margin: 0 0 3rem 0;
		line-height: 1;
		-webkit-transition-delay: 0.2s;transition-delay: 0.2s;
	}
	#topics div.tagList ul.main{
		/*margin: 0 0 0.5rem 0;*/
	}
	#topics div.tagList ul li{
		display: inline-block;
		vertical-align: top;
		margin: 0 0.5rem 0.1rem 0;
		line-height: 0.7;
		}
		#topics div.tagList.isTag ul li{
			font-size: 0.875rem;
			font-weight: 300;
			background-color: #ededed;
			line-height: 1.1;
			height: 0.75rem;
			padding: 0 0.1rem 0.1rem 0.1rem;
			display: inline-block;
			vertical-align: top;
		}
		body.js_isIe #topics div.tagList ul li{
			margin: 0 0.5rem 0.7rem 0;
		}

	#topics div.tagList.isCategory ul li a{
		font-size: 0.75rem;
		background-color: #ededed;
		line-height: 1.1;
		height: 0.625rem;
		padding: 0 0.1rem;
		display: inline-block;
		vertical-align: top;
		font-weight: 300;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		}
		#topics div.tagList.isTag ul li.active{
			background-color: #ffff00;
		}
		#topics div.tagList.isTag ul li::before,
		#topics div.tagList.isCategory ul li a::before{
			content: '#';
			display: inline;
		}
		#topics div.tagList ul li a:hover{
			background-color: #ffff00;
		}


	#topics p.coming{
		text-align: center;
	}


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



	/* -------------------------------------------------------------------------------------------
	*
	* トピックス
	*
	* ----------------------------------------------------------------------------------------- */

	#topics{
		padding: 3.125rem 0 0 0;
	}

	#topics h3{
		margin: 0 0 1rem 0;
		line-height: 1;
	}
	#topics h3 p{
		display: inline-block;
		vertical-align: top;
		font-size: 1.3125rem;
		padding: 0 0 0.125rem 0;
		border-bottom: 2px solid #cccccc;
	}

	#topics div.tagList{
		margin: 0 0 2.4rem 0;
		line-height: 1;
		-webkit-transition-delay: 0.2s;transition-delay: 0.2s;
	}
	#topics div.tagList ul.main{
		/*margin: 0 0 0.75rem 0;*/
	}
	#topics div.tagList ul li{
		display: inline-block;
		vertical-align: top;
		margin: 0 0.3rem 0.6rem 0;
		line-height: 0.7;
		}
		#topics div.tagList.isTag ul li{
			font-size: 0.875rem;
			font-weight: 300;
			line-height: 1.1;
			height: 0.75rem;
			padding: 0.1rem 0.1rem 0 1rem;
			display: inline;
			vertical-align: top;
			position: relative;
		}
	#topics div.tagList.isCategory ul li a{
		font-size: 0.6875rem;
		background: linear-gradient(transparent 0%, #ededed 0%);
		line-height: 0.5;
		padding: 0.1rem 0.1rem 0 0.1rem;
		font-weight: 300;
		word-break: break-all;
		}
		#topics div.tagList.isTag ul li.active{
			background: linear-gradient(transparent 0%, #ffff00 0%);
		}
		#topics div.tagList.isTag ul li::before{
			content: '#';
			display: inline-block;
			position: absolute;
			top: 0.1rem; left: 0.3rem; bottom: 0;
			margin: 0;
		}
		#topics div.tagList.isCategory ul li a::before{
			content: '#';
			display: inline;
		}
		#topics div.tagList ul li a:hover{
			background: linear-gradient(transparent 0%, #ffff00 0%);
		}

	#topics p.coming{
		text-align: center;
	}


}