@charset "UTF-8";

/* 
      #legend {
        font-family: Arial, sans-serif;
        background: #fff;
        padding: 10px;
        margin: 10px;
        border: 3px solid #000;
      }
      #legend h3 {
        margin-top: 0;
      }
      #legend img {
        vertical-align: middle;
      }
*/	  
	  
	  

.lead{
margin:0 auto 20px;
padding:5px 10px;
text-align:left;
background-color:#FFEAF4;
border:#FFA4D1 solid 1px;
text-align:center;	
}

.lead p{
line-height:2;
text-align:left;
}

.lead img{
margin:1em auto!important;
padding:0;
text-align:center !important;
}

#info{
margin:10px auto;
padding:6px 10px;
border-top:#F69 dotted 3px;
border-bottom:#F69 dotted 3px;
background-color:#FFECFF;
}



#map-col{
clear:both;
}

#map-col dt{
max-width:140px;
margin:5px auto;
text-align:center;
font-size:120%;
background-color:#333;
color:#FFF;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}

#map-col dt i{
color:#FC0;
}

#map-col dd{
text-align:center;
}

#map dd.big-map{
padding:5px;
font-size:140%;
}

#canvas_wrapper{
clear:both;
max-width:90%;
min-width:280px;
padding:4px;
border:1px solid #CCC;  
margin:auto;
}
 
#canvas_wrapper img {
max-width:none;
}
 
#map,
#map-canvas {
width:100%;
height:300px;
}

#map-col ul{
margin:5px auto;
padding:0;
text-align:center;	
}

#map-col li{
display:inline-block;
padding:2px 8px;
margin-right:2px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
color:#000;
font-weight:700;
font-size:12px;
}

#map-col li.apoint{
background-color:#77C03B;
}

#map-col li.bpoint{
background-color:#F76458;
}


dl.list{
clear:left;
border-bottom:#CCC solid 1px;
margin:5px auto;
padding:5px 0 0 0;
}

dl.list dt{
text-align:left;	
clear:left;
float:left;
width:6em;
font-weight:bold;
border-top:#CCC solid 1px;	
padding:5px;	
}

dl.list dd{
margin-left:8em;
margin-bottom:5px;
zoom:1;	
border-top:#CCC solid 1px;	
padding:5px;
}

dl.list dd li{
padding-left:12px;
background:url(../images/common/maru-orange.png) left 4px no-repeat;
}


#map-link{
position:static;
width:auto;
margin:10px auto;
padding:0;
text-align:center;
font-size:90%;
background-color:#FFCC33;
font-weight:700;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

#map-link a{
display:block;
text-decoration:none;
padding:8px 0;
color:#000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}

#map-link a span.bm:after{
content:"\f041";
font-family:FontAwesome;
font-size:120%;
font-weight:normal;
}

#map-link a span.am:after{
content:"\f1b9";
font-family:FontAwesome;
font-size:120%;
font-weight:normal;
}

#map-link a:hover{
text-decoration:none;
background-color:#F8DC7C;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
}






dl.map-list{
width:90%;
margin:1em auto;
padding:1em;
font-size:120%;
}

dl.map-list dt{
margin-top:1em;
padding-top:1em;
padding-left:1em;
font-weight:700;
border-top:#333 dotted 1px;
}

dl.map-list dd{
text-indent:2em;
}

dl.map-list dd.park-fee{
color:#F60;
}




@media all and (min-width:700px) {

dl.list dt{
padding:10px;
font-size:120%;	
}

dl.list dd{
padding:10px;
font-size:120%;	
}


#map-link{
width:360px;
font-size:100%;
margin:10px 10px 10px;
}

#map,
#map-canvas{
height:400px;
}

dl.list{
width:80%;
}

dl.list dt{
width:11em;
}

dl.list dd{
margin-left:13em;
}

dl.map-list{
max-width:900px;
margin:1em auto;
padding:1em;
}

dl.map-list dd{
display:inline-block;
}

}


@media only screen and (min-width:900px) {

#map,
#map-canvas{
height:500px;
}


}