@charset "UTF-8";

#title h1::before {content:"Cases";}

#layout .inner { max-width:1000px;}
.bgo { padding: 40px 0;}
.bgo h2 { text-align: center; padding:20px 0 40px 0;}

.map .content { position: relative;}
	.map .content ul li { position: absolute; border-radius:20px; text-align: center; width: 2em; font-weight: bold;}

li.maptotal { top:6.5%; left:20.0%; color:#FF7100; width: 3em !important;}
li.map1 { top:4.2%; left:60.0%; color:#29ABE2;}
li.map2 { top:25.5%; left:87.5%; color:#318BDD;}
li.map3 { top:42.5%; left:86.5%; color:#29B5B2;}
li.map4 { top:30.0%; left:35.5%; color:#77B530;}
li.map5 { top:62.0%; left:79.5%; color:#3BA739;}
li.map6 { top:72.5%; left:61.8%; color:#FC7CC9;}
li.map7 { top:51.0%; left:15.0%; color:#EA6D90;}
li.map8 { top:86.0%; left:43.0%; color:#EC6D45;}


@media screen and (max-width: 960px)
	/* 960px- settings */ {
	.map { position: relative; left: 50%; transform: translateX(-50%); }
		.map .content ul li{ font-size:6vw;}
}
@media all and (min-width:960px) {
	/* 960px+ settings */
		.map .content ul li{ font-size:64px;}
}