@charset "utf-8";

body {
	margin: 0;
	padding: 0;
}
ul {
	margin: 0 0 20px 0;
	padding: 20px;
	background: #fff url(../images/color-bg.png);
}
li {
	display: inline-block;
	margin: 0px;
	padding: 0;
}
figure {
	margin: 0;
	padding: 0;
}
figcaption {
	text-align: center;
	color: #fff;
}
figure div {
	/* padding: 10px; */
	width: 300px;
	height: 100%;
	text-align: center;
}

/* divのカラー設定 */
.normal .hex { background-color: #f23d3d; }
.normal .rgb { background-color: rgb(255, 220, 22); }
.normal .hsl { background-color: hsl(220, 75%, 75%); }
.alpha .hex { background-color: #f23d3d; }
.alpha .rgb { background-color: rgba(255, 220, 22, 0.5); }
.alpha .hsl { background-color: hsla(220, 75%, 75%, 0.5); }
.opacity .hex {
	background-color: #f23d3d;
	opacity: 0.5;
}
.opacity .rgb {
	background-color: rgba(255, 220, 22, 1);
	opacity: 0.5;
}
.opacity .hsl {
	background-color: hsla(220, 75%, 75%, 1);
	opacity: 0.5;
}