@charset "UTF-8";

/* --------  680〜　PC調整   --------*/
@media screen and ( min-width:680px) {
/*----------------------------------------------------
   サムネイル基本設定
----------------------------------------------------*/
.thumbnail-img {
	display:block;
    overflow: hidden;
    position: relative;
}
.thumbnail-img img {
	/*画像のセンタリング（中央寄せ）*/
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

 
/*----------------------------------------------------
   テキスト部分
----------------------------------------------------*/
.thumbnail .cap {
	font-size:12px;
	text-align:center;
	padding-top:3px;
	color:#999;
}
.thumbnail .blog-thumbnail-title {
	font-size:16px;
	padding-top:3px;
	font-weight:bold;
	letter-spacing:0.05em;
	line-height:1.5;
}
.thumbnail .blog-thumbnail-txt {
	font-size:13px;
	padding-top:10px;
	line-height:1.5;
}



/*----------------------------------------------------
   サムネイル-外枠がリンクの場合
----------------------------------------------------*/
.thumbnail-outside li.thumbnail-list a {
	border:solid 1px #CCC;
	box-sizing:border-box;
	padding:15px;
	outline: none;
	transition: all .3s;
	display:block;
	position:relative;
}
.thumbnail-outside li.thumbnail-list a:hover {
	border:solid 1px #FCC;
}
.thumbnail-outside .blog-thumbnail-txt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/*----------------------------------------------------
   サムネイル-各部分がリンクの場合
----------------------------------------------------*/
.thumbnail-inside li.thumbnail-list {
	border:solid 1px #CCC;
	box-sizing:border-box;
	padding:15px;
	outline: none;
	transition: all .3s;
}
.thumbnail-inside .thumbnail-img {
	transition:none;
}
.thumbnail-inside .blog-thumbnail-txt a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.thumbnail-inside .blog-thumbnail-title a:hover,
.thumbnail-inside .blog-thumbnail-txt a:hover {
	color:#ef857d;
}
.thumbnail-inside .blog-thumbnail-tag {
	margin-top:20px;
	letter-spacing:-1em;
}
.thumbnail-inside .blog-thumbnail-tag li {
	letter-spacing:normal;
	display:inline-block;
}
.thumbnail-inside .blog-thumbnail-tag li a {
	display:inline-block;
	background-color:#ef857d;
	color:#FFF;
	padding:2px 7px;
	font-size:11px;
	margin-right:5px;
}
.thumbnail-inside .blog-thumbnail-tag li a:hover {
	background-color:#f79992;
}



/*----------------------------------------------------
   サムネイル各枠組みの幅設定
----------------------------------------------------*/
.thumbnail-outside li.thumbnail-list {
	width:31.3333%;
	margin:0 1%;
	float:left;
}
.thumbnail-inside li.thumbnail-list {
	width:31.3333%;
	margin:20px 1% 0;
	float:left;
}

}
/* --------  〜680　スマホ調整   --------*/
@media screen and ( max-width:679px) {
/*----------------------------------------------------
   サムネイル基本設定
----------------------------------------------------*/
.thumbnail-img {
	display:block;
    overflow: hidden;
    position: relative;
}
.thumbnail-img img {
	/*画像のセンタリング（中央寄せ）*/
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


 
/*----------------------------------------------------
   テキスト部分
----------------------------------------------------*/
.thumbnail .cap {
	font-size:10px;
	text-align:center;
	padding-top:3px;
	color:#999;
}
.thumbnail .blog-thumbnail-title {
	font-size:15px;
	padding-top:3px;
	font-weight:bold;
	letter-spacing:0.05em;
	line-height:1.5;
}
.thumbnail .blog-thumbnail-txt {
	font-size:11px;
	padding-top:10px;
	line-height:1.5;
}



/*----------------------------------------------------
   サムネイル-外枠がリンクの場合
----------------------------------------------------*/
.thumbnail-outside li.thumbnail-list a {
	border:solid 1px #CCC;
	box-sizing:border-box;
	padding:10px 3%;
	outline: none;
	transition: all .3s;
	display:block;
	position:relative;
}
.thumbnail-outside li.thumbnail-list a:hover {
	border:solid 1px #FCC;
}
.thumbnail-outside .blog-thumbnail-txt {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/*----------------------------------------------------
   サムネイル-各部分がリンクの場合
----------------------------------------------------*/
.thumbnail-inside li.thumbnail-list {
	border:solid 1px #CCC;
	box-sizing:border-box;
	padding:10px 1.7%;
	outline: none;
	transition: all .3s;
}
.thumbnail-inside .thumbnail-img {
	transition:none;
}
.thumbnail-inside .blog-thumbnail-txt a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.thumbnail-inside .blog-thumbnail-tag {
	margin-top:10px;
	letter-spacing:-1em;
}
.thumbnail-inside .blog-thumbnail-tag li {
	letter-spacing:normal;
	display:inline-block;
	margin-right:5px;
	margin-bottom:3px;
}
.thumbnail-inside .blog-thumbnail-tag li a {
	display:inline-block;
	background-color:#ef857d;
	color:#FFF;
	padding:2px 7px;
	font-size:10px;
}



/*----------------------------------------------------
   サムネイル各枠組みの幅設定
----------------------------------------------------*/
.thumbnail-outside li.thumbnail-list {
	width:48%;
	margin:0 1% 20px;
	float:left;
}
.thumbnail-inside li.thumbnail-list {
	width:48%;
	margin:20px 1% 0;
	float:left;
}
}