@charset "utf-8";

/* トップのボックス
*****************************************************/
#top-box-monthly{
	clear:both;
	margin:0;
	padding:40px 4% 40px 4%;
	position:relative;
	text-align:left;
	background-image:url(../Resources/bg-craft-10-400px.jpg);
	background-size: 200px 200px;
	background-repeat:repeat;
	color:#f5f0e8;
	}

#top-box-monthly.flex-monthly { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }

#top-box-monthly.flex-monthly .left-fixed-270 { width: 270px; }
#top-box-monthly.flex-monthly .right-fluid { flex: 1; }

#top-box-monthly.flex-monthly .left-fixed-270 img.top-ikuji-hoiku-logo-250{ width:250px; height:auto; margin-top: 8px; }
#top-box-monthly.flex-monthly .right-fluid h1.heading { font-weight:600; font-size:22px; line-height:30px; letter-spacing: 0.05em; padding:4px 0 0 18px; margin-top:0; border-left: 1px solid #f5f0e8; }

/* ボックス
*****************************************************/

.box-monthly-info { display: flex; flex-wrap: wrap; width: 100%; margin: 0; border-top: 1px solid #b39c7d; }

.monthly-header { width:150px; margin: 0; padding: 20px 0; background-color:#fdf6ed; }
.monthly-header h4 { text-align:right; font-weight: 500; margin-right: 20px; }
.monthly-note { flex: 1; padding: 20px 0; margin: 0 5px 0 20px;}


/* タイポグラフィ
*****************************************************/


@media only screen and (max-width:959px){

}

@media only screen and (max-width:640px){
	
	#top-box-monthly{ padding:25px 5px 25px 5px; text-align:center; }

	#top-box-monthly.flex-monthly .left-fixed-270 { width: 100%; }
	#top-box-monthly.flex-monthly .right-fluid { width: 100%; }
	
	#top-box-monthly.flex-monthly .left-fixed-270 img.top-ikuji-hoiku-logo-250{ width:250px; margin-top: 5px; }
	#top-box-monthly.flex-monthly .right-fluid h1.heading { padding:0; border-left: none; }
	
	.box-monthly-info { width: 100%; }

	.monthly-header { width:100%; margin-right: 0; padding: 10px 0 10px 0; border-bottom: 1px solid #b39c7d;}
	.monthly-header h4{ text-align:left; margin-left: 3%}
	.monthly-note { width:100%; padding-bottom: 22px; margin: 0 3%;}

}

@media only screen and (max-width:480px){

}