/**
 * パノラマビューア　スタイル
 * author: Naraki Akika
 * date: 2015/07/05
 * version: 1.0
 * copyright: Yonesys Co., Ltd.
 * url: http://www.yonesys.com
 */

#wrapper-panorama-viewer {
	display: none;
	position: fixed;
	top: 0;left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background-color: rgba(0,0,0,0.8);
	
	-webkit-transition: 0.3s linear;
	   -moz-transition: 0.3s linear;
	    -ms-transition: 0.3s linear;
	     -o-transition: 0.3s linear;
	        transition: 0.3s linear;
}
#wrapper-panorama-viewer #loading-viewer {
	display: none;
	width: 64px;
	height: 64px;
	background: url("https://www.raku-dane.jp/images/panorama/loading.gif") no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -32px;
	margin-left: -32px;
	z-index: 999;
}
#wrapper-panorama-viewer #viewer {
	width: 100%;
	height: 100%;
	max-width: 85%;
	max-height: 85%;
	position: absolute;
	top: 50%;
	left: 50%;
	cursor: move;
	border: 4px solid #fff;
	background-color: #000;
}
#wrapper-panorama-viewer #viewer:hover {
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: grab;
}
#wrapper-panorama-viewer #viewer:active {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: grabbing;
}
#wrapper-panorama-viewer #btn-close-viewer {
	font-size: 30px;
	color: #B9B9B9;
	position: absolute;
	top: 7.5%;left: 0;
	z-index: 999;
	width: 85%;
	margin-top: -30px;
	margin-left: 7.5%;
	text-align: right;
	background-color: rgba(0,0,0,0) !important;
	background-image: none !important;
	border: none !important;
}
#wrapper-panorama-viewer #btn-previous-viewer,
#wrapper-panorama-viewer #btn-next-viewer
{
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	overflow: visible;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	display: block;
	outline: none;
	padding: 0;
	z-index: 1046;
	-webkit-box-shadow: none;
	box-shadow: none;
	
	position: absolute;
	opacity: 0.65;
	filter: alpha(opacity=65);
	margin: 0;
	top: 50%;
	margin-top: -55px;
	padding: 0;
	width: 90px;
	height: 110px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#wrapper-panorama-viewer #btn-previous-viewer:active,
#wrapper-panorama-viewer #btn-next-viewer:active
{
	margin-top: -54px;
}
#wrapper-panorama-viewer #btn-previous-viewer:hover,
#wrapper-panorama-viewer #btn-next-viewer:hover,
#wrapper-panorama-viewer #btn-previous-viewer:focus,
#wrapper-panorama-viewer #btn-next-viewer:focus
{
	opacity: 1;
	filter: alpha(opacity=100);
}
/*
#wrapper-panorama-viewer #btn-previous-viewer,
#wrapper-panorama-viewer #btn-next-viewer,
*/
#wrapper-panorama-viewer #btn-previous-viewer:before,
#wrapper-panorama-viewer #btn-next-viewer:before,
#wrapper-panorama-viewer #btn-previous-viewer:after,
#wrapper-panorama-viewer #btn-next-viewer:after
{
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 35px;
	margin-left: 35px;
	border: medium inset transparent;
}

#wrapper-panorama-viewer #btn-previous-viewer:after,
#wrapper-panorama-viewer #btn-next-viewer:after
{
	border-top-width: 13px;
	border-bottom-width: 13px;
	top: 8px;
}
#wrapper-panorama-viewer #btn-previous-viewer:before,
#wrapper-panorama-viewer #btn-next-viewer:before
{
	border-top-width: 21px;
	border-bottom-width: 21px;
	opacity: 0.7;
}
#wrapper-panorama-viewer #btn-previous-viewer {
	left: 0;
}
#wrapper-panorama-viewer #btn-previous-viewer:after {
	border-right: 17px solid white;
	margin-left: 31px;
}
#wrapper-panorama-viewer #btn-previous-viewer:before {
	margin-left: 25px;
	border-right: 27px solid #3f3f3f;
}
#wrapper-panorama-viewer #btn-next-viewer {
	right: 0;
}
#wrapper-panorama-viewer #btn-next-viewer:after {
	border-left: 17px solid white;
	margin-left: 39px;
}
#wrapper-panorama-viewer #btn-next-viewer:before {
	border-left: 27px solid #3f3f3f;
}

button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
#wrapper-panorama-viewer #btn-close-viewer:hover {
	color: #fff;
}
#wrapper-panorama-viewer #viewer canvas {
	width: 100% !important;
	height: 100% !important;
}
@media (max-width: 767px) {
	#wrapper-panorama-viewer #viewer {
		max-width: 100%;
		min-height: 100%;
		border: none;
	}
	#wrapper-panorama-viewer #btn-close-viewer {
		width: 100%;
		top: 0;
		right: 0;
		margin: 0;
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		font-size: 40px;
	}
}
@media all and (max-width: 900px) {
	#wrapper-panorama-viewer #btn-previous-viewer,
	#wrapper-panorama-viewer #btn-next-viewer {
		-webkit-transform: scale(0.75);
		transform: scale(0.75);
	}
	#wrapper-panorama-viewer #btn-previous-viewer {
		-webkit-transform-origin: 0;
		transform-origin: 0;
	}
	#wrapper-panorama-viewer #btn-next-viewer {
		-webkit-transform-origin: 100%;
		transform-origin: 100%;
	}
}
@media (min-width: 1200px) {
	#wrapper-panorama-viewer #viewer {
		max-width: 80%;
		max-height: 80%;
	}
	#wrapper-panorama-viewer #btn-close-viewer {
		width: 80%;
		top: 10%;
		margin-left: 10%;
	}
}