@charset "UTF-8";

.section {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}


/*---------------------------------------------------------*/
/* --- イメージボックス --- */
/*---------------------------------------------------------*/
div.image-box {
	border: 1px solid #0000cc; /* 1.枠線 */
	background-color: #eeeeff;	/* 2.背景色 #eeeeff*/
	width: 270px; /* 横幅 */
/*	float: left;*/ /* 左に配置 */
	margin: 5px; /* 周囲の余白 */
	border-radius: 4px;
}

div.image-box:hover {
	border: 1px solid #cc0000; /* 1.枠線 */
	background-color: #ff995d;	/* 2.背景色 */
}

div.image-box img {
	width: 250px; /* 横幅 */
	height: auto; 
	vertical-align: middle;
}

div.image-box a {
	text-decoration: none; /* 横幅 */
	color: blue; /* 6.文字色 darkblue */
}

div.image-box a:hover {
	color: red; /* 6.文字色 darkblue */
}

div.image-box h4 {
	padding: 5px;
/*	font-size: 80%;*/	/* 5.文字サイズ */
	font-weight: 500;/* 文字の太さ */
color: blue;
}

p.image, p.caption {
		text-align: center; /* 3.中央寄せ */
/*		margin: 5px;*/
}

p.image {
		margin: 5px;
}

 p.caption {
		font-size: 80%;	/* 5.文字サイズ */
/*		color: blue; /* 6.文字色 darkblue */
		margin: 0 5px;		/* マージン 上下　左右 */
}

/*---------------------------------------------------------*/
/* --- キャプションボックス --- */
/*---------------------------------------------------------*/
div.caption-box {
		border-radius: 4px 4px 0px 0px;
		background-color: #00f888;	/* 2.背景色 */
		margin-top: 0px;
}

h4 {
	text-align: center;
}