@charset "UTF-8";

.scroll-container{
  width:90%;
  max-width:1200px;
  margin: 0 auto;
  position: relative;
}

.scroll-inner{
  width:100%;
  height: 100%;
}

.scroll-target{
  height:400px;
  overflow-x:visible;
  overflow-y: hidden;
  -webkit-overflow-scrolling:touch;
  position: relative;
}
.scroll-target img{
  width:auto;
  height: 100%;
}

.scroll-target::-webkit-scrollbar{
  width:16px;
}
.scroll-target::-webkit-scrollbar-track{
  height: 10px;
  background-color: transparent;
}

.scroll-container .view-arrow-cls{
  position: absolute;
  top:50%; transform: translateY(-50%);
  width:40px;
  cursor: pointer;
}

.scroll-container .view-arrow-cls img{width:100%; height: auto; display: block;}

.scroll-container .view-arrow-cls.arrow-left{
  left: 20px;
}
.scroll-container .view-arrow-cls.arrow-right{
  right: 20px;
}

.scroll-container.ios-cls .view-arrow-cls.arrow-right{
	right: 10px;
}


@media screen and (max-width:600px){
  .scroll-container .view-arrow-cls{
    width:30px;
  }
  .scroll-container .view-arrow-cls.arrow-left{
    left: 10px;
  }
  .scroll-container .view-arrow-cls.arrow-right{
    right:10px;
  }
}



/*-------------------------------------

size

-------------------------------------*/


@media screen and (max-width:600px){
  .scroll-target{
    height:340px;
  }
}

@media screen and (max-width:500px){
  .scroll-target{
    height:300px;
  }
}

@media screen and (max-width:400px){
  .scroll-target{
    height:260px;
  }
}

/*-------------------------------------

custom location page #map2

-------------------------------------*/

#location #map2{
	width:100%;
	background-color: #fff;
}

#location #map2 .view-arrow-cls{
	width:3rem;
  background-color: #6cc1c7;
	padding: 1.0rem;
	border-radius: 0.5rem;
}
#location #map2 .view-arrow-cls.arrow-left{
  left: 5px;
	/*border-radius:  0 5px 5px 0;*/
}
#location #map2 .view-arrow-cls.arrow-right{
  right: 15px;
	/*border-radius: 5px 0 0 5px;*/
}
#location #map2 .view-arrow-cls.arrow-top{
  left: calc(50% - 1.5rem);
	top:0;
	transform: rotate(90deg);
}

#location #map2 .view-arrow-cls.arrow-bottom{
  left: calc(50% - 1.5rem);
	bottom:10px; top:auto;
	transform: rotate(90deg);
}

#location #map2 .view-arrow-cls img{
	width:100%; height: auto; display: block;
	mix-blend-mode: color-dodge;
}

#location #map2 .scroll-target{
	height: 700px;
	overflow-x: scroll;
	overflow-y: scroll;
	cursor: grab;
	/*padding:10px 10px 10px 10px;
	box-sizing: border-box;*/
}
#location #map2 .scroll-target:active{
	cursor: grabbing;
}


#location #map2 .scroll-target img{
  width:auto;
  height: 150%;
}
#location #map2 .scroll-target img.tabImg2,
#location #map2 .scroll-target img.tabImg3,
#location #map2 .scroll-target img.tabImg4{
	position: absolute; top:0; left: 0;
	opacity: 0;
	transition: 0.3s ease-out 0s opacity;
}
#location #map2 .scroll-target img.tabImg2.active,
#location #map2 .scroll-target img.tabImg3.active,
#location #map2 .scroll-target img.tabImg4.active{
	opacity: 1;
}


#location #map2 .scroll-target::-webkit-scrollbar{
	width: 10px;
	background: #6cc1c7;
	/*border-radius: 5px;*/
}
#location #map2 .scroll-target::-webkit-scrollbar:horizontal{
	height: 10px;
	background: #6cc1c7;
	/*border-radius: 5px;*/
}
#location #map2 .scroll-target::-webkit-scrollbar-thumb{
	background: #fff;
	border-radius: 5px;
	border:3px solid #6cc1c7;
	box-sizing: border-box;
}
#location #map2 .scroll-target::-webkit-scrollbar-thumb:horizontal{
	background: #fff;
	border-radius: 5px;
}



@media screen and (max-width:600px){
  #location #map2 .scroll-target{
    height:600px;
  }
	#location #map2 .scroll-target img{
		height: 120%;
	}
}

@media screen and (max-width:500px){
  #location #map2 .scroll-target{
    height:450px;
  }
	#location #map2 .scroll-target img{
		height: 150%;
	}
}

@media screen and (max-width:400px){
  #location #map2 .scroll-target{
    height:400px;
  }
}


/*-------------------------------------

custom access page #map1

-------------------------------------*/

#access #map1.scroll-container{
	width:100%;
}

#access #map1 .view-arrow-cls{
	width:3rem;
  background-color: #6cc1c7;
	padding: 1.0rem;
	border-radius: 0.5rem;
	display: none;
}
#access #map1 .view-arrow-cls img{
	width:100%; height: auto; display: block;
	mix-blend-mode: color-dodge;
}


@media screen and (max-width:1200px){
	#access #map1 .scroll-target{
		padding:0 5rem;
	}
	#access #map1 .view-arrow-cls{
		display: block;
	}
}

/*-------------------------------------

custom access page #map1

-------------------------------------*/

#bayparks #map1.scroll-container{
	width:100%;
}

#bayparks #map1 .scroll-target{
	height: 575px;
}

#bayparks .map1-note{
	text-align: right;
	margin-right: 1em;
}

#bayparks #map1 .view-arrow-cls{
	width:3rem;
  background-color: #fff;
	padding: 1.0rem;
	border-radius: 0.5rem;
	display: none;
}
#bayparks #map1 .view-arrow-cls img{
	width:100%; height: auto; display: block;
	mix-blend-mode:difference;
}


@media screen and (max-width:600px){
	#bayparks #map1 .view-arrow-cls{
		display: block;
	}
}

#bayparks #map2.scroll-container{
	width:100%;
}

#bayparks #map2 .scroll-target{
	height: 575px;
}

#bayparks .map2-note{
	text-align: right;
	margin-right: 1em;
}

#bayparks #map2 .view-arrow-cls{
	width:3rem;
  background-color: #6cc1c7;
	padding: 1.0rem;
	border-radius: 0.5rem;
	display: none;
}
#bayparks #map2 .view-arrow-cls img{
	width:100%; height: auto; display: block;
	mix-blend-mode:color-dodge;
}


@media screen and (max-width:600px){
	#bayparks #map2 .view-arrow-cls{
		display: block;
	}
}

/*-------------------------------------

custom map page #map1

-------------------------------------*/

#map #map1{
	width:100%;
	background-color: #fff;
}

#map #map1 .view-arrow-cls{
	width:3rem;
  background-color: #6cc1c7;
	padding: 1.0rem;
	border-radius: 0.5rem;
}
#map #map1 .view-arrow-cls.arrow-left{
  left: 5px;
	/*border-radius:  0 5px 5px 0;*/
}
#map #map1 .view-arrow-cls.arrow-right{
  right: 15px;
	/*border-radius: 5px 0 0 5px;*/
}
#map #map1 .view-arrow-cls.arrow-top{
  left: calc(50% - 1.5rem);
	top:0;
	transform: rotate(90deg);
}

#map #map1 .view-arrow-cls.arrow-bottom{
  left: calc(50% - 1.5rem);
	bottom:10px; top:auto;
	transform: rotate(90deg);
}

#map #map1 .view-arrow-cls img{
	width:100%; height: auto; display: block;
	mix-blend-mode: color-dodge;
}

#map #map1 .scroll-target{
	height: 700px;
	overflow-x: scroll;
	overflow-y: scroll;
	cursor: grab;
	/*padding:10px 10px 10px 10px;
	box-sizing: border-box;*/
}
#map #map1 .scroll-target:active{
	cursor: grabbing;
}


#map #map1 .scroll-target img{
  width:auto;
  height: 150%;
}
#map #map1 .scroll-target img.tabImg2,
#map #map1 .scroll-target img.tabImg3,
#map #map1 .scroll-target img.tabImg4{
	position: absolute; top:0; left: 0;
	opacity: 0;
	transition: 0.3s ease-out 0s opacity;
}
#map #map1 .scroll-target img.tabImg2.active,
#map #map1 .scroll-target img.tabImg3.active,
#map #map1 .scroll-target img.tabImg4.active{
	opacity: 1;
}


#map #map1 .scroll-target::-webkit-scrollbar{
	width: 10px;
	background: #6cc1c7;
	/*border-radius: 5px;*/
}
#map #map1 .scroll-target::-webkit-scrollbar:horizontal{
	height: 10px;
	background: #6cc1c7;
	/*border-radius: 5px;*/
}
#map #map1 .scroll-target::-webkit-scrollbar-thumb{
	background: #fff;
	border-radius: 5px;
	border:3px solid #6cc1c7;
	box-sizing: border-box;
}
#map #map1 .scroll-target::-webkit-scrollbar-thumb:horizontal{
	background: #fff;
	border-radius: 5px;
}



@media screen and (max-width:600px){
  #map #map1 .scroll-target{
    height:600px;
  }
	#map #map1 .scroll-target img{
		height: 120%;
	}
}

@media screen and (max-width:500px){
  #map #map1 .scroll-target{
    height:450px;
  }
	#map #map1 .scroll-target img{
		height: 150%;
	}
}

@media screen and (max-width:400px){
  #map #map1 .scroll-target{
    height:400px;
  }
}