/*
Theme Name: AFFINGER4 Card2-Child
Template: affinger4
Version: 20170505
*/

/*カテゴリID別に色を指定できます
例）IDが7の場合
.catname.st-catid7 {
	background:#ff0000;
	color:#fff;
}
*/

/* Googleフォントの反映箇所
--------------------------------*/
#magazine .kanren .st-top-box dd h3
{
	font-family: Josefin Sans,Julius Sans One,'Meddon',Lobster,Pacifico,Fredericka the Great,Bilbo Swash Caps,PT Sans Caption,Montserrat,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif!important;
}

body {
	background:#fff;
}

/*トップの基本部分*/
.home .post {
	padding-bottom: 0px;
}

.home main {
	padding: 0;
}

.home main {
	background-color:transparent!important;
}

aside .kanren {
	margin-top: 0;
	margin-bottom:20px;
	padding-top: 0;
}

.st-pagelink {
	padding:0 5px;
}

/*ブログカード風マガジン*/
#magazine .kanren {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

/*ブログカード風マガジン*/
#magazine .kanren dl {
	box-sizing:border-box;
	border:1px solid #ccc;
	background:#fff;
}

#magazine .kanren dl {
	width:100%;
}

#magazine .kanren dt {
	float: none!important;
	width: 100%!important;
	height:auto;
	overflow: hidden;
	position:relative;
}

#magazine .kanren dt img {
	width: 100%!important;

}

#magazine .kanren dd {
	padding: 0px 20px 10px;
}

#magazine .kanren .clearfix dd p {
	line-height: 1.8;
}

#magazine .kanren .st-top-box {
	padding:5px;
	box-sizing:border-box;
	width:100%;
}

#magazine .kanren .st-top-box dl {
	margin-bottom:0;
	position: relative;
}

#magazine .kanren .st-top-box a.st-box-a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height:100%;
	width: 100%;
	z-index:9999;
}

#magazine .kanren .st-top-box a:hover {
	text-decoration: none;
	background:#fff;
	opacity:0.3;
}

#magazine .kanren .st-top-box img.size-full,
#magazine .kanren .st-top-box img.size-large {
	margin-bottom:0;
}

/*ブログカード風マガジン最初の投稿*/
#magazine .kanren .st-fist-post {
	padding:10px 5px 5px;
	box-sizing:border-box;
	width:100%!important;
	height:auto;
	border:none;
}



/*WordPress Popular Posts*/
.st-wp-views {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%); /* Safari用 */
	transform: translate(-50%, -50%);
	z-index:999;
	padding:5px 10px;
	color:#fff;
	opacity:0.6;
	font-weight:bold;
	text-align:center;
	line-height:1em;
}
.wpp-views {
	font-size:300%;
	font-family: Josefin Sans,Julius Sans One,'Meddon',Lobster,Pacifico,Fredericka the Great,Bilbo Swash Caps,PT Sans Caption,Montserrat,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif!important;
}
.wpp-text{
	font-size:50%;
	font-family: Josefin Sans,Julius Sans One,'Meddon',Lobster,Pacifico,Fredericka the Great,Bilbo Swash Caps,PT Sans Caption,Montserrat,"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "ＭＳ Ｐゴシック", sans-serif!important;
}

.st-wp-viewbox .st-wp-views,
#side .st-wp-views {
	font-size:50%;
	opacity:0.6;
}

.st-wp-viewbox .st-wp-views .wpp-text,
#side .st-wp-views .wpp-text {
	font-size:50%;
}

/*投稿日*/
#magazine .st-top-time p{
	margin-bottom:-10px;
	padding-top:10px;
	font-size:90%;
	color:#1a1a1a;
}

/*カテゴリ*/

#magazine .catname {
	border-top-left-radius: 0px; 
	border-top-right-radius: 0px;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	position:relative;
	z-index:9999;
	font-size:90%;
	padding:7px 10px;
}


 /*タイトル*/
#magazine .kanren .st-top-box dd h3 {
	padding:10px 0;
	line-height:1.5;
}


/*media Queries タブレットサイズ（960px以下）
----------------------------------------------------*/
@media only screen and (max-width: 960x) {


/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px以上）
----------------------------------------------------*/
@media only screen and (min-width: 600px) {

	#magazine .kanren .st-top-box {
		width:50%;
	}

	/*ブログカード風マガジン最初の投稿*/
	#magazine .kanren .st-top-box.st-fist-post dt {
 	   overflow: hidden;
  	  width: 100%;/* トリミングしたい枠の幅 */
   	 height: 400px;/* トリミングしたい枠の高さ */
  	  position: relative;
	
	}

	#magazine .kanren .st-top-box.st-fist-post dl:last-child {
		padding-bottom:0;
	}

	/*画像にアミ点*/
	#magazine .kanren .st-fist-post dt .st-c-ami{
/*		background-image: url("images/amiten.png");*/
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height:100%;
		width: 100%;
		z-index:1;
	}
	
	#magazine .kanren .st-top-box.st-fist-post dt img {
	  position: absolute;
 	 top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	width: 100%;
 	 height: auto;

	}

	#magazine .kanren .st-fist-post dd {
		width: 100%;
		box-sizing:border-box;
		padding: 0!important;
		position:absolute;
		bottom:0;
		left:0px;
		z-index:999;
	}

	#magazine .kanren .st-fist-post dd .st-cards-content {
		padding:0px;
	}
	#magazine .kanren .st-fist-post dd .st-cards-content-in {
		background: rgba(255,255,255,0.7);
		padding:0 40px 40px;
	}

	#magazine .kanren .st-fist-post dd h3 {
		font-size:200%;
		margin-bottom:10px;
		line-height:1.5;
	}

	/*WordPress Popular Posts*/
	#magazine .kanren .st-fist-post .st-wp-views {
		font-size:200%;
	}

	#magazine .kanren .st-fist-post .wpp-text{
		font-size:50%;
	}



/*-- ここまで --*/
}

/*media Queries タブレットサイズ（600px～959px）のみで適応したいCSS -タブレットのみ
---------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 600px) and (max-width: 959px) {

	#magazine .kanren {
	    padding: 0 10px;
	}

}

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

	#magazine .kanren .st-fist-post {
		padding:0 5px 5px;
	}

	#magazine .kanren .st-top-box {
		width:49.99%;
	}

	.colum1 #magazine .kanren .st-top-box {
		width:33.33%;
	}

	.home aside .kanren {
		margin-top: 0;
		padding-top: 0px;
	}

	.home .colum1 main {
		margin: 0 0 20px;
		padding: 0px;
	}

	/*記事エリアのボーダー*/
	.single main,
	.page main {
		border: 1px solid #ccc;
	}

/*-- ここまで --*/
}