html, body, wrap, main, table, tr, td, th, ul, ol,li, img, div, p, h1, h2, h3, h4, iframe {
	border: 0;
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-size: 12px;
	font-family: "メイリオ";
}

img {
	vertical-align: bottom;
}

ul, ol, li {
	list-style-type: none;
}

a:visited {
	color: black;
}

a {
	text-decoration: none;
}


/***************レイアウト******************/

body {
	width: 100%;
}

#wrap {
	width: 1200px;
	height: 700px;
//	border: 1px solid #000;
//	background: #F00;
}

#btn_wrap {
	overflow: hidden;
//	background : #0F0;
	width: 400px;
	float: left;
}


/***************ボタン******************/

div.btn_list {
	float: left;
	width: 200px;
	height: 700px;
	overflow-y: scroll;
}


div.btn_list h3,
div.btn_list ul li {
	border: 3px solid;
	border-radius: 20px;
	text-align: center;
	margin: 3px;
	padding: 1px;
}

div.btn_list h3 p,
div.btn_list ul li p {
	border-radius: 20px;
	height: 28px;
}

rt {
	font-size: 10px;
}



div.btn_list h3.jr_st,
div.btn_list ul li.jr_st {
	border-color: #AAA;
}

div.btn_list h3.jr_st,
div.btn_list ul li.jr_st p {
	background: #AAA;
}

div.btn_list h3.n_st,
div.btn_list ul li.n_st {
	border-color: #009944;
}

div.btn_list h3.n_st,
div.btn_list ul li.n_st p {
	background: #009944;
}

div.btn_list h3.t_st,
div.btn_list ul li.t_st {
	border-color: #EA5514;
}

div.btn_list h3.t_st,
div.btn_list ul li.t_st p {
	background: #EA5514;
}

div.btn_list h3.h_st,
div.btn_list ul li.h_st {
	border-color: #036EB8;
}

div.btn_list h3.h_st,
div.btn_list ul li.h_st p {
	background: #036EB8;
}


/****************************イメージエリア*****************/


#img_wrap {
	width: 720px;
//	background : #0F0;
	float: left;
	position: absolute;
	top: 0;
	left: 440px;
//	margin: 0 40px;
//	overflow: hidden;
}


#img_wrap img {
	position: absolute;
}


#img_wrap #city_wrap img {
	z-index: 0;
}

#img_wrap img#city_1950,
#img_wrap img#city_1973 {
	opacity: 0;
	visibility: hidden;
}

#img_wrap #railway_wrap img {
	z-index: 10;
}

#img_wrap img#railway_1950 {
	opacity: 0;
}

#img_wrap #subway_wrap img {
	z-index: 20;
}

#img_wrap img#subway_1975,
#img_wrap img#subway_1976,
#img_wrap img#subway_1978,
#img_wrap img#subway_1982,
#img_wrap img#subway_1988,
#img_wrap img#subway_1994 {
	opacity: 0;
}

#img_wrap #shiden_wrap img {
	z-index: 30;
}

#img_wrap img#shiden_1950,
#img_wrap img#shiden_1973 {
	opacity: 0;
	z-index: 30;
}


#img_wrap img#city_2019,
#img_wrap img#railway_1973,
#img_wrap img#subway_1999,
#img_wrap img#shiden_2019 {
	opacity: 100;
	visibility: visible;
}


button {
	background: #AAA;
	border: solid 1px #AAA;
	border-radius: 8px;
}

/*********************イメージエリア内スライダーバー*****************/


div#sliderbar {
	position: relative;
	top: 600px;
	width: 720px;
	padding-top:5px;
	padding-bottom: 5px;
	background: #FFF;
	z-index: 80;
}

div#sliderbar ul.slider_list li {
	position: relative;
	width: 60px;
	float: left;
	font-size: 12px;
	color: #FFF;
	background: #AAA;
	border-radius: 20px;
	height: 1.4em;
	text-align: center;
}

div#sliderbar ul.slider_list li.upper {
	margin-right: 72px;
}

div#sliderbar ul.slider_list li.upper:last-child {
	margin-right: 0px;
}

div#sliderbar ul.slider_list li.lower {
	margin-left: 72px;
}


div#sliderbar ul.slider_list li#y2019 {
	background: #F00;
}

div#slider_area {
//	clear: both;
}

#sliderbar button {
	width: 120px;
	height: 60px;
	margin: 0 10px 5px 610px;
	position: relative;
	top: -50px;
}

/*********************CANVAS*****************/

#canvas_area {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 720px;
	z-index: 5;
}

canvas {
	margin: 0;
	padding: 0;
	vertical-align: bottom;
	opacity: 0.5;
}

.toolbar {
	position: relative;
	top: -40px;
	width: 720px;
	height: 95px;
	padding-top: 5px;
	overflow: hidden;
	background: #FFF;
}


.toolbar #tool p {
	float: left;
	margin: 0 15px;
	width: 70px;
}

.toolbar div#tool {
	float: left;
	width: 330px;
}

.toolbar button#saveback {
	width: 150px;
	height: 30px;
	float: left;
	margin: 0 10px 5px 380px;
}

.toolbar button#clearback {
	width: 150px;
	height: 30px;
	float: left;
	margin: 0 10px 5px 10px;
}

.toolbar button#clearback:after {
	clear: both;
}

.toolbar button.canvas_btn {
	width: 90px;
//	border: 1px solid;
	border-radius: 20px;
	text-align: center;
	margin: 2px;
	margin-top: 10px;
	padding: 1px;
}


input[type="color"] {
  width: 200px;
  display: block;
}

input[type="range"] {
  width: 180px;
}


.toolbar span {
 position: relative;
 bottom: 5px;
}

/*********************マーカー*****************/

#img_wrap ul li {
	width: 30px;
	display: block;
	position: absolute;
}

#img_wrap ul li p:first-child {
	border-radius: 10px;
	margin: 0 auto;
}

ul#jr_marker li {
	z-index: 50;
}

ul#jr_marker li p:first-child {
	width: 12px;
	height: 12px;
	border: 4px solid;
	background: #FFF100;
	border-color: #F00;
}

ul#jr_marker li p:last-child {
	font-size: 12px;
	font-weight: bold;
	  -ms-writing-mode: tb-rl;
	  writing-mode: vertical-rl;
	text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #FFF;
	position: relative;
}

ul#n_marker li {
	z-index: 40;
}

ul#n_marker li p:first-child {
	width: 10px;
	height: 10px;
	border: 4px solid;
	background: #FFF;
	border-color: #009944;
}

ul#n_marker li p:last-child {
	font-weight: bold;
	color: #009944;
	text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #FFF;
	position: relative;
	top: -5px;
	left: -20px;
}

ul#t_marker li {
	z-index: 40;
}

ul#t_marker li p:first-child {
	width: 10px;
	height: 10px;
	border: 4px solid;
	background: #FFF;
	border-color: #EA5514;
}

ul#t_marker li p:last-child {
	font-weight: bold;
	color: #EA5514;
	text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #FFF;
	position: relative;
	top: -5px;
	left: -20px;
}

ul#h_marker li {
	z-index: 40;
}

ul#h_marker li p:first-child {
	width: 10px;
	height: 10px;
	border: 4px solid;
	background: #FFF;
	border-color: #036EB8;
}

ul#h_marker li p:last-child {
	font-weight: bold;
	color: #036EB8;
	text-shadow: 1px 1px 0px #FFF, -1px -1px 0px #FFF;
	position: relative;
	top: -13px;
	left: 28px;
}

#img_wrap ul li {
//display: none;
}

//ul#jr_marker li {display: none}

ul#jr_marker li#jr00 {opacity: 0; top: 160px; left: 125px;}
ul#jr_marker li#jr01 {top: 305px; left: 380px;}
ul#jr_marker li#jr02 {top: 305px; left: 425px;}
ul#jr_marker li#jr03 {top: 345px; left: 515px;}
ul#jr_marker li#jr04 {top: 370px; left: 570px;}
ul#jr_marker li#jr05 {top: 370px; left: 630px;}
ul#jr_marker li#jr06 {top: 340px; left: 670px;}
ul#jr_marker li#jr07 {top: 390px; left: 650px;}
ul#jr_marker li#jr08 {top: 450px; left: 680px;}
ul#jr_marker li#jr09 {top: 300px; left: 330px;}
ul#jr_marker li#jr10 {top: 250px; left: 300px;}
ul#jr_marker li#jr11 {top: 220px; left: 315px;}
ul#jr_marker li#jr12 {top: 180px; left: 340px;}
ul#jr_marker li#jr13 {top: 150px; left: 375px;}
ul#jr_marker li#jr14 {top: 130px; left: 398px;}
ul#jr_marker li#jr15 {top: 90px; left: 402px;}
ul#jr_marker li#jr16 {top: 65px; left: 440px;}
ul#jr_marker li#jr17 {top: 65px; left: 475px;}
ul#jr_marker li#jr18 {top: 45px; left: 520px;}
ul#jr_marker li#jr19 {top: 265px; left: 270px;}
ul#jr_marker li#jr20 {top: 240px; left: 235px;}
ul#jr_marker li#jr21 {top: 210px; left: 195px;}
ul#jr_marker li#jr22 {top: 180px; left: 155px;}
ul#jr_marker li#jr23 {top: 160px; left: 125px;}
ul#jr_marker li#jr24 {top: 140px; left: 85px;}
ul#jr_marker li#jr25 {top: 130px; left: 50px;}
ul#jr_marker li#jr26 {top: 125px; left: 5px;}
ul#jr_marker li#jr27 {opacity: 0; top: 380px; left: 465px;}
ul#jr_marker li#jr28 {opacity: 0; top: 420px; left: 480px;}
ul#jr_marker li#jr29 {opacity: 0; top: 440px; left: 608px;}

//ul#n_marker li {display: none}

ul#n_marker li#N01 {top: 195px; left: 350px;}
ul#n_marker li#N02 {top: 217px; left: 355px;}
ul#n_marker li#N03 {top: 245px; left: 360px;}
ul#n_marker li#N04 {top: 270px; left: 365px;}
ul#n_marker li#N05 {top: 290px; left: 370px;}
ul#n_marker li#N06 {top: 310px; left: 375px;}
ul#n_marker li#N07 {top: 330px; left: 380px;}
ul#n_marker li#N08 {top: 345px; left: 382px;}
ul#n_marker li#N09 {top: 360px; left: 384px;}
ul#n_marker li#N10 {top: 385px; left: 385px;}
ul#n_marker li#N11 {top: 393px; left: 398px;}
ul#n_marker li#N12 {top: 400px; left: 415px;}
ul#n_marker li#N13 {top: 425px; left: 420px;}
ul#n_marker li#N14 {top: 452px; left: 413px;}
ul#n_marker li#N15 {top: 480px; left: 408px;}
ul#n_marker li#N16 {top: 522px; left: 392px;}

//ul#t_marker li {display: none}

ul#t_marker li#T01 {top: 248px; left: 208px;}
ul#t_marker li#T02 {top: 270px; left: 235px;}
ul#t_marker li#T03 {top: 285px; left: 265px;}
ul#t_marker li#T04 {top: 305px; left: 295px;}
ul#t_marker li#T05 {top: 327px; left: 292px;}
ul#t_marker li#T06 {top: 343px; left: 303px;}
ul#t_marker li#T07 {top: 338px; left: 327px;}
ul#t_marker li#T08 {top: 333px; left: 355px;}
ul#t_marker li#T09 {top: 328px; left: 380px;}
ul#t_marker li#T10 {top: 325px; left: 395px;}
ul#t_marker li#T11 {top: 340px; left: 430px;}
ul#t_marker li#T12 {top: 350px; left: 450px;}
ul#t_marker li#T13 {top: 370px; left: 480px;}
ul#t_marker li#T14 {top: 383px; left: 507px;}
ul#t_marker li#T15 {top: 398px; left: 537px;}
ul#t_marker li#T16 {top: 412px; left: 565px;}
ul#t_marker li#T17 {top: 420px; left: 608px;}
ul#t_marker li#T18 {top: 410px; left: 632px;}
ul#t_marker li#T19 {top: 397px; left: 658px;}

//ul#h_marker li {display: none}

ul#h_marker li#H01 {top: 183px; left: 410px;}
ul#h_marker li#H02 {top: 208px; left: 417px;}
ul#h_marker li#H03 {top: 237px; left: 423px;}
ul#h_marker li#H04 {top: 270px; left: 430px;}
ul#h_marker li#H05 {top: 278px; left: 410px;}
ul#h_marker li#H06 {top: 282px; left: 385px;}
ul#h_marker li#H07 {top: 313px; left: 383px;}
ul#h_marker li#H08 {top: 330px; left: 386px;}
ul#h_marker li#H09 {top: 345px; left: 391px;}
ul#h_marker li#H10 {top: 363px; left: 417px;}
ul#h_marker li#H11 {top: 382px; left: 433px;}
ul#h_marker li#H12 {top: 396px; left: 455px;}
ul#h_marker li#H13 {top: 415px; left: 480px;}
ul#h_marker li#H14 {top: 435px; left: 490px;}