@charset "utf-8";
/* CSS Document */


/*--------------------------------------------*/
/*モバイル*/
/*--------------------------------------------*/

#topics .container {
	padding-left: 15px;
	padding-right: 15px;
}

/*見出しのキャラクター画像位置*/
#topics h2:nth-of-type(even) img {
	position: absolute;
	top: -20px;
	left: auto;/*left値を初期化*/
	right: 5px;
	width: 40px;
	height: auto;
}


#topics article,
#topics article .post {
	margin-bottom: 40px;
}

#topics h3,
#topics h4 {
	font-size: 20px;
	font-weight: bold;
	padding-top: 10px;
}

.post h3,
.post h4 {
	color: #2950B9;
}

article img {
	border: 1px solid #ddd;
	padding: 10px;
	width: 100%;
	height: auto;
}

.yumekko h3 {
	border-bottom: 1px dotted #308C6B;
	color: #308C6B;
	font-size: 22px;
	padding: 10px 5px;
	margin-bottom: 20px;

}








/*--------------------------------------------*/
/*スマホ横/タブレット横/PC/(768px～)*/
/*--------------------------------------------*/
@media (min-width: 768px) {
	
	#topics h2:nth-of-type(even) img {
        width: 60px;
    }

	#topics article {
		margin: 0 50px 30px;
	}
	
	#topics article img {
		float: left;
		width: 40%;
	}
	
	#topics article::after,
	#topics article .post::after {
		content: "";
		display: block;
		clear: both;
		height: 0;
	}
	
	#topics h3,
	#topics h4 {
		padding-top: 0;
	}
	
	#topics .post h3,
	#topics .post h4,
	#topics .post p {
		padding-left: 42%;
	}
	
	#topics .yumekko {
		margin-top: 10px;
	}
	
	#topics .yumekko h3 {
		font-size: 24px;
	}
	

}









/*--------------------------------------------*/
/*タブレット横/PC/(992px～)*/
/*--------------------------------------------*/
@media (min-width: 992px) {
	
	
	#topics article {
		margin: 0 100px 30px;
	}
	
	#topics .post h3,
	#topics .post h4,
	#topics .post p {
		padding-left: 42%;
	}

	
	

}








/*--------------------------------------------*/
/*PC(1200px～)*/
/*--------------------------------------------*/
@media (min-width: 1200px) {
	
	#topics article {
		margin: 0 150px 30px;
	}
	
	


}




/* 補足 */
#wrapper main > figure {
	display: none;
}