@charset "utf-8";


/* ==================================================================== */
/* お役立ちコンテンツ一覧
/* ==================================================================== */
.useful_list{
	margin-bottom: 30px;
}
.useful_list > a{
	width: 145px;
	border: 1px solid #D80614;
	border-radius: 10px;
	box-shadow: 1px 1px 2px 2px rgba(0,0,0,0.2);
	display: inline-block;
	height: 205px;
	overflow: hidden;
	position: relative;
	text-align: left;
	vertical-align: top;
	text-decoration: none;
}
.useful_list > a > img{
	width: 100%;
}
.useful_list > a picture{
	display: block;
}
.useful_list > a h2,
.useful_list > a h3{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-size: 87.5%;
	margin: 5px 0 0;
	padding: 0 5px;
	transition: opacity 0.2s ease-out 0s;
}
.useful_list > a h2:hover,
.useful_list > a h3:hover{
	opacity: 0.7;
}
.useful_list > a h2 span,
.useful_list > a h3 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 0.5em;
	vertical-align: top;
}
.useful_list > a p{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	color: #000000;
	font-size: 75%;
	padding:0 5px 5px;
	transition: opacity 0.2s ease-out 0s;
}
.useful_list > a p:hover{
	opacity: 0.7;
}
@media screen and (max-width:359px){
	.useful_list{
		text-align: center;
	}
	.useful_list > a{
		width: 75%;
	}
}
@media screen and (min-width:360px) and (max-width:639px){
	.useful_list > a{
		width: -webkit-calc((100% - (10px * 3)) / 2);
		width: calc((100% - (10px * 3)) / 2);
	}
}
@media screen and (min-width:360px)  and (max-width:767px){
	.useful_list > a{
		margin-left: 10px;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	.useful_list > a{
		width: -webkit-calc((100% - (10px * 4)) / 3);
		width: calc((100% - (10px * 4)) / 3);
	}
}
@media screen and (max-width:767px){
	.useful_list > a{
		margin-top: 10px;
	}
	.useful_list > a:after{
		color: #D80614;
		content: "\F056";
		font-family:"Material Design Icons";
		font-size: 150%;
		line-height: 1;
		position: absolute;
		right: 5px;
		bottom: 2px;
	}
	.useful_list > a > img:not([src*="wide"]){
		display: none;
	}
}
@media screen and (min-width:768px){
	.useful_list > a{
		border-color: #BDBDBD;
		border-width: 0 0 1px 0;
		border-radius: 0;
		box-shadow: none;
		display: block;
		height: auto;
		line-height: 1.3em;
		margin: 0 auto;
		padding: 0.4em 0;
	}
	.useful_list > a:after{
		clear: both;
		content: "";
		display: block;
	}
	.useful_list > a > img,
	.useful_list > a picture{
		float: left;
		margin-right: 20px;
		width: 75px;
	}
	.useful_list > a > img[src*="wide"]{
		display: none;
	}
	.useful_list > a picture{
		overflow: hidden;
		position: relative;
	}
	.useful_list > a picture:before{
		content: "";
		display: block;
		padding-top: 100%;
	}
	.useful_list > a picture img{
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		max-width: none !important;
		max-width: unset !important;
	}
	.useful_list > a h2,
	.useful_list > a h3{
		font-size: 112.5%;
		margin: 2% 0 0.2em;
		padding: 0;
	}
	.useful_list > a p{
		font-size: 87.5%;
		padding: 0;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	.useful_list > a{
		width: 720px;
	}
}
@media screen and (min-width:940px){
	.useful_list > a{
		width: 800px;
	}
}