/*
Theme Name: 小町ネット様用テーマ
Theme URI: none
Description:小町ネット　トピックスページ
Version: 3.0
Author: 株式会社ルシアス
Author URI:
*/

@charset "utf-8";


/* ==================================================================== */
/* トピックス
/* ==================================================================== */
#topics{
}
#topics > section{
	padding: 0 10px;
}
#topics > section img{
	height: auto !important;
}
#topics_list{
	margin-bottom: 50px;
}
#topics_list > div{
	border: 1px solid #FD669C;
	border-radius: 10px;
	overflow: hidden;
}
#topics_list > div > h1,
#topics_list > div > h2{
	background-color: #FD669C;
	color: #FFFFFF;
	text-align: center;
}
#topics_list > div > h1 img,
#topics_list > div > h2 img{
	vertical-align: top;
	width: 200px;
}
#topics_list > div a{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	color: #4D4D4D;
	display: block;
	position: relative;
	text-decoration: none;
	transition: opacity 0.2s ease-out 0s;
}
#topics_list > div a:hover{
	opacity: 0.7;
}
#topics_list > div a + a{
	border-top: 1px solid #000000;
}
#topics_list > div a:after{
	content: "\F142";
	font-family:"Material Design Icons";
	font-size: 150%;
	line-height: 1;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
#topics_list > div a time{
	font-size: 75%;
}
#topics_list > div a span{
	background-color: #FFC105;
	border-radius: 8px;
	color: #FFF;
	font-size: 62.5%;
	font-weight: normal;
	padding: 0.1em 0.6em;
	margin: 0 0 0 1em;
	vertical-align: baseline;
}
#topics_list > div a h2,
#topics_list > div a h3{
}
#topics_list > div a p{
}
#topics_article{
}
#topics_article h2{
	border-left: 0.25em solid #D56A6E;
	color: #D56A6E;
	line-height: 1.5;
	margin: 30px 0 10px;
	font-size: 150%;
	position: relative;
	padding: 0.25em 0.5em 0.25em 0.75em;
}
#topics_article h2:after{
	background-color: #D56A6E;
	content: "";
	display: block;
	height: 1px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%
}
#topics_article h3{
	color: #D56A6E;
	line-height: 1.5;
	margin: 30px 0 10px;
	font-size: 125%;
	position: relative;
	padding: 0.25em 0.5em;
}
#topics_article h3:after{
	background: -webkit-linear-gradient(left, #D56A6E 0%, #D56A6E 25%, #BDBDBD 25%, #BDBDBD 100%);
	background: linear-gradient(to right, #D56A6E 0%, #D56A6E 25%, #BDBDBD 25%, #BDBDBD 100%);
	content: "";
	display: block;
	height: 1px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%
}
#topics_article h4{
	color: #D56A6E;
	line-height: 1.5;
	margin: 30px 0 10px;
	font-size: 125%;
	position: relative;
	padding: 0.25em 0.5em;
}
#topics_article h4:after{
	background: #BDBDBD;
	content: "";
	display: block;
	height: 1px;
	pointer-events: none;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%
}
@media screen and (max-width:767px){
	#topics_list > div{
		margin-left: auto;
		margin-right: auto;
		width: -webkit-calc(93.75% + (1px * 2));
		width: calc(93.75% + (1px * 2));
	}
	#topics_list > div a{
		padding: 1.5625% -webkit-calc(3.125% + 1em) 1.5625% 3.125%;
		padding: 1.5625% calc(3.125% + 1em) 1.5625% 3.125%;
	}
	#topics_list > div > p{
		padding: 1.5625% 3.125%;
	}
	#topics_list > div + p.right{
		margin-top: 1.5625%;
		padding: 0 3.125%;
	}
}
@media screen and (min-width:768px){
	#topics_list{
		margin-bottom: 6.25em;
	}
	#topics_list > div{
	}
	#topics_list > div > h1 img,
	#topics_list > div > h2 img{
		width: 25em;
	}
	#topics_list > div a{
		padding: 0.875em 1.25em;
	}
	#topics_list > div > p{
		padding: 1em;
	}
	#topics_list > div + p.right{
		margin-top: 0.875em;
	}
	#topics_article h2{
		font-size: 200%;
	}
	#topics_article h3{
		font-size: 150%;
	}
	#topics_article h4{
		font-size: 125%;
	}
}
@media screen and (min-width:768px) and (max-width:1199px){
	#topics_list{
		padding-left: 1.25em;
		padding-right: 1.25em;
	}
}