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

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  line-height:normal;
}

body {
  background-image: url("../../common/img/bg.png");
  /* background: #111; */ 
}


#myContainer {
  width: calc( 100% - 20px );
  height: calc( 100% - 150px );
  background-color: #FFF;
  margin: auto;
  /*  */order: 2px solid #C89633;
  border: 2px solid #414141;
}

/* --- 2画像の間に26pxの色帯 --- */
#myContainer{
  position: relative; /* ::after の基準 */
}

/* 中央に26pxの帯を重ねる（操作は透過） */
#myContainer::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-13px); /* 26pxの半分 */
  width: 26px;
  /* height: calc( 100% - 150px ); */
  height: 100%;
  background: #414141; /* 好きな色に変更可 */
  z-index: 999999;     /* ビューアより上 */
  pointer-events: none;/* ドラッグ・ズーム等を邪魔しない */
}

a {
	display: block;
	height: 40px;
	width: 60px;
	float: left;
	cursor: pointer;
	background-image: url(../images/view-btn.png);
	background-repeat: no-repeat;
}
i {
	display: block;
	height: 40px;
	width: 60px;
}

#myControl {
	position:relative;
	overflow:hidden;
	margin-top: 20px;
	margin-bottom:20px;
	width:100%
}

#zoomOut, #zoomOut i {
	background-position: 0px 0px;
}
#zoomIn, #zoomIn i {
	background-position: -60px 0px;
}
#panUp, #panUp i {
	background-position: -120px 0px;
}
#panDown, #panDown i {
	background-position: -180px 0px;
}
#panRight, #panRight i {
	background-position: -240px 0px;
}
#panLeft, #panLeft i {
	background-position: -300px 0px;
}
#reset, #reset i {
	background-position: -360px 0px;
}
#returne, #returne i {
	background-position: -420px 0px;
}
#zoomOut i:hover {
	background-position: 0px -40px;
}
#zoomIn i:hover {
	background-position: -60px -40px;
}
#panUp i:hover {
	background-position: -120px -40px;
}
#panDown i:hover {
	background-position: -180px -40px;
}
#panRight i:hover {
	background-position: -240px -40px;
}
#panLeft i:hover {
	background-position: -300px -40px;
}
#reset i:hover {
	background-position: -360px -40px;
}
#returne i:hover {
	background-position: -420px -40px;
}
ul {
	position:relative;
	left:50%;
	float:left;
	margin:0;
	padding:0;
}
li {
	position:relative;
	left:-50%;
	float:left;
	margin:0;
	padding:0;
	list-style-type: none;
}
#footer {
	padding: 50px 0;
	width:100%;
}

h1.viewH1{
	width:100%;
	/* font-size:100%; */
  font-size: 16px;
	/* color:#fdd558; */
  margin: 12px 0px;
  padding: 0px;
  color: #FFF;
	text-align:center;
}

@media only screen and (max-width: 768px) {
h1.viewH1{
	display:none;
}
  
#myContainer {
  height: calc( 100% - 115px );
}  
  
#myControl {
	margin-top: 20px;
	margin-bottom: 0px;
}
  
}

@media (orientation: landscape) and (max-width: 1026px){

h1.viewH1{
	display:none;
}
  
#myContainer {
  height: calc( 100% - 80px );
}  
  
#myControl {
	margin-top: 20px;
	margin-bottom: 0px;
}  
  
}