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

/* ---------symbol--------- */
.symbol {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.symbol li {
	display:block;
	width:30%;
	height:30%;
	background:#226BFF;
}
.symbol li:nth-child(even) {
	background:#96FAFF;
}


.symbol_2 {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
.symbol_2 li {
	display:block;
	width:47%;
	height:47%;
	background:#226BFF;
}
.symbol_2 li:nth-child(1) {
	background:#96FAFF;
}
.symbol_2 li:nth-child(4) {
	background:#96FAFF;
}



/* ---------marker--------- */
.marker {
	position:absolute;
	top:0px;
	left:0px;
}
.marker li {
	position:absolute;
	flex-direction:column;
	justify-content:center;
}

.marker li div { /* markerの色とサイズ指定部分 */
	height:24px;
	width:24px;
	margin:-20% auto 0 auto;
	background:#226BFF;
	border-top:18px solid #226BFF;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}
.marker li div:nth-child(1) {
	display:flex;
	justify-content:center;
	border-radius:50%;
	border:none;
}
.marker li div:nth-child(1) div {
	margin:auto auto;
	width:40%;
	height:40%;
	background:#FFFFFF;
	border-radius:50%;
	border:none;
}
.marker li div:nth-child(2) {
	width:0px;
	background:none;
}


/*IE*/
@media screen\0 {
.marker li div:nth-child(1) div {
	margin:auto 8px;
}
}