@charset "utf-8";


#system-wrap{
	width:100%;
	}

.coming{
	width:100%;
	text-align:center;
	}
	
.system{
	width:320px;
	margin:0 auto;
	margin-bottom:20px;
	}
.system h3{
	font-weight:600;
	line-height:1.6;
	}
.system p{
	
	}
.system p.pink{
	color:#db197d;
	}
.system p.purple{
	color:#8709a7;
	}
.bold{
	font-weight:600;
	}
#map-wrap{
	width:320px;
	margin:0 auto;
	}
#map{ display:block; width:300px; height:300px; margin:0 auto; border:2px solid #4967A0;}
#map div {color:#000;}
#sideBar{ width:310px; overflow:auto; padding:5px; text-align:left;}
#sideBar div{ padding:10px 0; cursor:pointer; color:#222; font-weight:bold;}
#sideBar div:hover{ text-decoration:underline }
#buttons{ clear:both;text-align:center }
.bSideSelect{ background:#4967A0;} /* clicked items get this class */


/*横向きの際に適用*/
@media only screen and (orientation : landscape) { 

.system{
	width:480px;
	margin:0 auto;
	margin-bottom:20px;
	}
#map-wrap{
	width:480px;
	margin:0 auto;
	}
#map{ display:block; width:480px; height:300px; border:2px solid #4967A0;}
#map div {color:#000;}
#sideBar{ width:470; overflow:auto; padding:5px; text-align:left;}
#sideBar div{ padding:10px 0; cursor:pointer; color:#222; font-weight:bold;}
#sideBar div:hover{ text-decoration:underline }
#buttons{ clear:both;text-align:center }
.bSideSelect{ background:#4967A0;} /* clicked items get this class */

}