* { outline: none; }

		html, body { width: 100%; }
		body { 
			overscroll-behavior-y: none; margin: 0px; padding: 0px; height: 100vh; line-height: 1; 
			color: #000000; font-size: 16px;
			background-image: linear-gradient(greenyellow,green); overflow: hidden;
		}

		/*
		div.daction {
			position: fixed; bottom: 20px; width: 100vw; height: 50px; text-align: left; overflow: hidden; line-height: 50px;
			background-color: rgba(255,255,255,0.3);
		}
		*/

		button.add-button {
			position: fixed; bottom: 20px; width: 100%; height: 50px; font-size: 16px;
			background-color: rgba(255,255,255,0.7); border: none; outline: none;
		}

		/*span.sp_closeinstall { display: inline-block; width: 50px; line-height: 50px; font-size: 2em; text-align: center}*/

		div.ddev {
			position: fixed; text-align: center; background-color: rgba(255,255,255,0.2); bottom: 0;
		}
		div.ddevinfohp { font-size: 14px; }
		span.spdev { display: block; }

		.bh_header {
			position: fixed; top: 0; width: 100%; height: 30px; line-height: 30px;
			background-image: linear-gradient(grey,white,grey);
		}
		.sp_header1, .sp_header2 {
			display: block; text-align: center; line-height: 15px; font-size: 14px; text-shadow: 0 0 2px white;
			font-family: arial; font-weight: bold;
		}
		.bh_container {
			 position: fixed; top: 30px; width: 100%; height: calc(100vh - 50px); overflow: hidden;
		}


		.bh_left { width: 118px; height: 100%; padding-right: 2px; text-align: right; overflow: hidden; float: left; }
		.bh_left button {
			width: calc(100% - 2px); height: 50px; font-size: 14px; border: 1px outset white; outline: none; 
			background-color: grey; cursor: pointer;
			color: lightgrey; border-radius: 0; transition: background-color 0.5s ease;
		}
		.bh_left button.mn_on, .bh_left button:hover { background-color: red; color: white; }

		#bhl_back span.spl_back {
			display: block; line-height: 30px; font-size: 12px; text-align: left; padding-left: 10px; cursor: pointer;
			background-image: linear-gradient(135deg,rgba(0,0,0,0.2) 70%, transparent 70%);
			transition: background-image 0.5s ease;
		}
		#bhl_back span.spl_back:hover {
			background-image: linear-gradient(135deg,rgba(255,255,255,0.5) 70%, transparent 70%);
		}

		#butmn_2 { margin-top: 5px; }
		#bh_imgnav1, #bh_imgnav2 { width: 100%; height: auto; }
		#bh_imgnav1 span, #bh_imgnav2 span {
			 display: block; line-height: 40px; margin-top: 2px; margin-bottom: 2px; padding-right: 5px; font-size: 14px;
			 background-image: linear-gradient(45deg, transparent 30%, lightgrey 30%);
			 color: rgba(0,0,0,0.5); cursor: pointer;
		}
		#bh_imgnav1 span.smn_on, #bh_imgnav2 span.smn_on, #bh_imgnav1 span:hover, #bh_imgnav2 span:hover {
			 background-image: linear-gradient(45deg, transparent 30%, hotpink 30%); color: black; font-weight: bold;
		}

		.bh_right, .bh_rightsub, .bh_nextsub {
			 width: calc(100vw - 125px); height: calc(100vh - 50px); padding-left: 5px; overflow: hidden; float: left;
			 box-shadow: 1px 1px 5px inset rgba(0,0,0,0.3);
		}

		.bh_imgview, .bh_subview { width: calc(100% - 5px); height: calc(100vh - 50px); overflow: auto; }

		span.spmenutit {
			display: block; line-height: 20px; font-size: 12px; background-color: rgba(255,255,255,0.5);
		}

		.bh_imgview span span.spsubmenu, .bh_subview span span.spsubmenu {
			display: inline-block; width: 130px; line-height: 20px; float: right; font-size: 12px;
			padding-right: 10px; text-align: right; cursor: pointer;
			background-image: linear-gradient(45deg,transparent 30px,rgba(0,0,0,0.2) 30px);
		}

		span.sp_sep { display: block; line-height: 20px; }

		.bh_imgview img, .bh_subview img { width: auto; height: calc(100vh - 90px); }

		.bh_footer {
			position: fixed; bottom: 0; width: 100vw; height: 20px; text-align: center; background-color: rgba(255,255,255,0.5);
		}
		.bh_footer span#sp_pc { display: block; line-height: 20px; font-size: 14px; }
		.bh_footer span#sp_hp1, .bh_footer span#sp_hp2 { display: none; }



		/*hp*/
		@media screen and (max-width: 768px) {
			div.ddev { left: 50%; transform: translate(-50%); }
			div.ddevinfopc { display: none; }
		}
		@media screen and (max-width: 768px) and (orientation: landscape) {
			div.ddev {
				display: flex; flex-direction: row; justify-content: center; align-items: center;
				width: 100vw; height: 70px;
			}
			div.ddevlogo { display: inline-block; float: left; width: 50%; }
			div.ddevlogo img { width: 30vw; height: auto; }
			div.ddevinfohp { display: inline-block; float: left; width: 50%; }
		}
		@media screen and (max-width: 768px) and (orientation: portrait) {
			div.ddev { display: block; width: 100vw; height: 150px; }
			div.ddevlogo { display: block; width: 100%; }
			div.ddevlogo img { width: 50vw; height: auto; }
			div.ddevinfohp { display: block; width: 100%; }
			span.spdev { line-height: 20px; }
		}

		/*pc, tablet*/
		@media screen and (min-width: 768px) {
			div.ddev { display: block; width: 100%; height: 200px; bottom: 0; }
			div.ddevinfopc { display: block; width: 100%; }
			div.ddevinfohp { display: none; }
			div.ddevlogo { display: block; width: 100%; }
			div.ddevlogo img { width: 30vw; height: auto; }
			span.spdev { line-height: 26px; }
		}

		.bh_right div[id^="bh_sv_"],
		.bh_rightsub,
		.bh_rightsub div[id^="bh_sv_"],
		.bh_nextsub,
		.bh_nextsub div[id^="bh_sv_"],
		#bh_imgnav2,
		#bhl_back,
		div.ddev {
			display: none;
		}