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


/*****ARTICLE*****/


h3{
padding: 0.25em 0.5em;
background: transparent;/*�w�i������*/
border-left: solid 5px #0162A7;/*����*/
font-size:1.4em;
margin-bottom:.5em;
}
#left_block h3{
padding: 0em 0.5em;
background: #fff;
border-left: solid 0px #0162A7;/*����*/
font-size:1em;
margin-bottom:.2em;
color:#000;
border-radius:5px;
line-height:1.4em;
display:inline-block;
}

#maparea{
	border: 0px #CCCCCC solid;
	width: 100wh;
	/* height: 95vh; */
	overflow: auto;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px;
background-color: #efefef;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #fcfcfc), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #fcfcfc),
            color-stop(.75, #fcfcfc), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
}

.map01{
width:1022px;
height:526px;
background-image:url('../../images/map01.jpg');
background-size:cover;
margin: 0 auto;
}


.map02{
width:1152px;
height:500px;
background-image:url('../../images/map02.jpg');
background-size:cover;
margin: 0 auto;
}

.map03{
width:1080px;
height:993px;
background-image:url('../../images/map03.jpg');
background-size:cover;
margin: 0 auto;
}

.map04{
width:1000px;
height:713px;
background-image:url('../../images/map04.jpg');
background-size:cover;
margin: 0 auto;
}

.map05{
width:859px;
height:700px;
background-image:url('../../images/map05.jpg');
background-size:cover;
margin: 0 auto;
}

.map06{
width:1420px;
height:600px;
background-image:url('../../images/map06.jpg');
background-size:cover;
margin: 0 auto;
}
#mappoint{
position:relative;
}

#mappoint .btn_menu{
position:absolute;
}

#left_block{display: block;}
#left_block {
width: 395px;
    height: 100%;
    transition: all 0.2s;
    transform: translate(-100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #416f88;
    border-right: 0px solid #ccc;
color:#fff;
padding:10px;
   }
#left_block.open {
    transform: translate(0); 
   }

#panel{
height:40vh;
overflow: auto;

}

.map01 .btn_menu{
  display: block;
  cursor: pointer;
  z-index: 10;
background-color: #00b1f4;
border: solid 2px #fff;
width: 10px;
height: 10px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 10px;
box-shadow: 0 0 0 2px #00b1f4;
-webkit-box-shadow: 0 0 0 2px #00b1f4;
-moz-box-shadow: 0 0 0 2px #00b1f4;
}

.map02 .btn_menu a,.map03 .btn_menu a,.map04 .btn_menu a,.map05 .btn_menu a,.map06 .btn_menu a{
  display: block;
  cursor: pointer;
  z-index: 10;
background-color: #00b1f4;
border: solid 2px #fff;
width: 20px;
height: 20px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 20px;

color:#fff;
font-size:12px;
text-align:center;
font-weight:bold;
line-height:20px;
}

.map02 .large a,.map03 .large a,.map04 .large a,.map05 .large a,.map06 .large a{
  display: block;
  cursor: pointer;
  z-index: 10;
background-color: #00b1f4;
border: solid 2px #fff;
width: 20px;
height: 20px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 20px;
box-shadow: 0 0 0 2px #00b1f4;
-webkit-box-shadow: 0 0 0 2px #00b1f4;
-moz-box-shadow: 0 0 0 2px #00b1f4;
color:#fff;
font-size:14px;
text-align:center;
font-weight:bold;
line-height:20px;
}


.btn_menu a:hover,.btn_menu.active a{
background-color: #C10900;
box-shadow: 0 0 0 2px #C10900;
-webkit-box-shadow: 0 0 0 2px #C10900;
-moz-box-shadow: 0 0 0 2px #C10900;
}
.btn_menu:hover,.btn_menu.active{
    transform: scale(1.4); 
z-index:100;
   }

.drawer_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  background-color: rgba(51, 51, 51, 0.5);
  display: none;
  top: 0;
  left: 0;
}
.btn_menu.active .drawer_bar {
  width: 49px;
}

.btn_menu.active .drawer_bar1 {
  transform: rotate(30deg);
}

.btn_menu.active .drawer_bar2 {
  opacity: 0;
}

.btn_menu.active .drawer_bar3 {
  transform: rotate(-30deg);
}

.drawer_bar {
  display: block;
  height: 2px;
  margin: 10px 0;
  transition: all 0.2s;
  transform-origin: 0 0;
}
.drawer_bar {
    background-color: #fff;
}

.btn_menu {
  color: #fff;
}

.btn_menu_del{
display:inline-block;
border:1px solid #fff;
position:absolute;
left:auto;
right:10px;
line-height:1.2em;
}

.drawer_menu_text{
padding: 0px 5px;
cursor:pointer;
}


.mapitem{
width:95%;
border: 0px solid #ccc;
margin-bottom:1em;
padding:8px;
display: table;
background:#000;
}
.mapitem h5{
font-size:1.2em;
}
.mapitem .subphoto{
float:right;
}
.mapitem .cap{
margin-top:0.5em;
text-align:right;
}
.mapitem .subphoto img{
width:100px;
height:auto;
border: 1px solid #ccc;
margin-left:5px;
}

.mapitem .itemtext{
float:left;
line-height:1.5em;
font-size:0.8em;
width:calc(100% - 120px);
}
.gotomap a{
width:100%;
height:100%;
display:block;
}

.gotomap a:hover{
background:#ff0;
opacity:.5;
}
.gotomap02{
border:2px dotted #f00;
width:30px;
height:50px;
position:absolute;
top:160px;
left:60px;
}

.gotomap03{
border:2px dotted #f00;
width:100px;
height:65px;
position:absolute;
top:140px;
left:90px;
}

.gotomap04{
border:2px dotted #f00;
width:50px;
height:50px;
position:absolute;
top:210px;
left:90px;
}
.gotomap05{
border:2px dotted #f00;
width:160px;
height:100px;
position:absolute;
top:200px;
left:770px;
}

.gotomap06{
border:2px dotted #f00;
width:350px;
height:150px;
position:absolute;
top:250px;
left:140px;
}


.box{
	float: left;
	padding: 10px;
	background-color: #eee;
	width:100px;
	margin:0 10px 10px 0px;
	text-align:center;
}

.box.fixed-box{
	position:fixed;
	right:50px;
	top:50px;
}

.tooltip,
.tooltip2 {
  width: 600px;
  margin: 10px auto;
  list-style: none;
}
.tooltip li,
.tooltip2 li {
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 0 10px;
}
.tooltip li a,
.tooltip2 li a {
  display: inline-block;
  padding: 3px;
}
.tooltip li span {
  background: #afc6e2;
  color: #fff;
  width: 180px;
  height: 65px;
  padding: 10px;
  position: absolute;
  top: -80px;
  left: 0;
  text-align: left;
  z-index: 2;
  display: none;
}
.tooltip li span p {
  width: 0;
  height: 0;
  position: relative;
  top: 7px;
  left: 10px;
  border: 10px solid transparent;
  border-top: 10px solid #afc6e2;
}
.tooltip2 li span {
  background: #afc6e2;
  color: #fff;
  width: 180px;
  height: 65px;
  padding: 10px;
  position: absolute;
  top: 35px;
  left: 0;
  text-align: left;
  z-index: 2;
  display: none;
}
.tooltip2 li span p {
  width: 0;
  height: 0;
  position: relative;
  top: -78px;
  left: 10px;
  border: 10px solid transparent;
  border-bottom: 10px solid #afc6e2;
}

.content_menu ul{
  width: 1080px;
list-style: none;

}

.content_menu ul li{
float: left;
text-align:center;
  width: calc((100% - 37px) / 6);
  margin-bottom: 20px;
border-top:0px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-right:4px;
line-height:1.2em;
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px;
background-color: #efefef;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #fcfcfc), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #fcfcfc),
            color-stop(.75, #fcfcfc), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #fcfcfc 25%, transparent 25%,
          transparent 50%, #fcfcfc 50%, #fcfcfc 75%,
          transparent 75%, transparent);
box-shadow:0px 1px 2px #aaa;
}

.content_menu ul li a{
color:#000;
font-weight:bold;
display:block;
height:60px;
border-top:0px solid #ccc;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin:0px 3px 3px 3px;
padding-top:10px;
}

.content_menu ul li:hover,.content_menu ul li.active{

-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
background-size: 10px 10px;
background-color: #E7FFE2;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
            color-stop(.25, #D9FFD0), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #D9FFD0),
            color-stop(.75, #D9FFD0), color-stop(.75, transparent),
            to(transparent));
background-image: -webkit-linear-gradient(-45deg, #D9FFD0 25%, transparent 25%,
          transparent 50%, #D9FFD0 50%, #D9FFD0 75%,
          transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #D9FFD0 25%, transparent 25%,
          transparent 50%, #D9FFD0 50%, #D9FFD0 75%,
          transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #D9FFD0 25%, transparent 25%,
          transparent 50%, #D9FFD0 50%, #D9FFD0 75%,
          transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #D9FFD0 25%, transparent 25%,
          transparent 50%, #D9FFD0 50%, #D9FFD0 75%,
          transparent 75%, transparent);
background-image: linear-gradient(-45deg, #D9FFD0 25%, transparent 25%,
          transparent 50%, #D9FFD0 50%, #D9FFD0 75%,
          transparent 75%, transparent);
}

.content_menu ul li .cap{
font-size:0.8em;
font-weight:normal;
}

#history_table{
height:50vh;
	overflow: auto;
}
#history_table table{
width:100%;
}

#history_table td{
border:1px solid #eee;
font-size:.7em;
background:#fff;
color:#000;
padding:3px;
}

.itemtext a{
color:#ccffff;
}


.note{ 
margin-bottom: 2em;
padding:2em;
background:#EAEAEA;
}

.note {
padding:1em;
margin-bottom: 0em;
    position: relative;
    background: #14374a;
    color: #fff;
    padding: 10px 0px 10px 120px;
line-height: 1.6em;
}


.note::before, #page .note::after {
    content: "";
    position: absolute;
    background: #14374a;
    top: 0;
    bottom: 0;
    width: 9999px;
}
.note::before {
    right: 100%;
}

.note::after {
    left: 100%;
}

#history_table .anchor{
background-color: #00b1f4;
border: solid 2px #fff;
width: 20px;
height: 20px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 20px;
color: #fff;
font-size: 12px;
text-align: center;
font-weight: bold;
line-height: 20px;
display: inline-block;
padding: 1px;
}
#history_table a{
margin-top: -1.1em;
display: block;
height: 1.1em;
}