/*-------------------------
__common_style
-------------------------*/


/*===============================================
●smart.css  画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px) {
	#panorama {
		padding: 12px 0 !important;
	}
	#stage {
	overflow:hidden;
	}
	#panorama_inner {
	position:relative;
	}
	ul#panorama_control {
	position:absolute;
	bottom:0;
	width:100%;
	padding:32px 0 0 0;
	margin:0;
	}
	#panorama ul.thumbnail {
	height:80px;
	overflow:hidden;
	padding:0 15px !important;
	}
	#panorama ul.thumbnail li {
	width:100px;
	height:72px;
	overflow:hidden;
	}
	#panorama ul.thumbnail li a {
	width:100%;
	height:100%;
	left:0;
	top:0;
	}
	#panorama ul.thumbnail li img {
	width:90%;
	margin-right:auto;
	margin-left:auto;
	}
	#panorama ol li {
	top:20px;
	}
	#panorama_wrap #panorama ul.thumbnail li a{
	width: 100%;
	display:inline-block;
	height: 92px!important;
	position:absolute;
	left: 0px!important;
	top: 0px!important;
	overflow:hidden;
	}
	#wrap .thumbnail li .over {
	width: 114px;
	position: absolute;
	padding: 0;
	top: 0!important;
	left: 0!important;
	}
	#stage_wrap #pano_comment {
	bottom:32px !important;
	margin:0 !important;
	padding: 0 8px !important;
	width: 100%;
	box-sizing: border-box;
	}
	#stage,
	#stage .member {
	height:250px;
	}
}






/*=========================*/
#panorama_wrap {
padding:0;
margin: 0 auto 15px;
border:solid 1px #CCC;
}
#panorama {
width:auto;
/*width:800px;*/
margin:0 auto;
position:relative;
overflow:hidden;
background-color: #DDD;
}
#panorama ul.thumbnail {
padding:5px 10px;
margin:0 auto 0 auto;
text-align:left;
width:auto;
}
#panorama ul.thumbnail li {
display:inline-block;
text-align:center;
}
#panorama ul.thumbnail li img {
/*width:115px;*/
height: auto;
max-height: 86px;
width:auto!important;
margin:auto;
}
#stage_wrap {
/*	width:800px;*/
width:100%;
position:relative;
}
#stage_wrap .loading {
position:absolute;
left:46%;
top:36%;
}
#stage {
/*	width:798px;*/
width:100%;
height:440px;
background-color:#FFF;
}
@media screen and (max-width:640px) {
#panorama_wrap #stage_wrap #stage{height:320px;}
#stage_wrap .loading {position: absolute;left: 40%;top: 30%;margin: auto;}
}


#stage_wrap #pano_comment {
color:#333;
position:absolute;
bottom:0;
left:0;
padding:0;
margin:0 310px 0  8px;
font-size:14px;
line-height:32px;
font-weigt:normal;
text-align:left;
height:32px;
overflow:hidden;
}
#panorama ul.thumbnail {
white-space:nowrap;
position:relative;
left:0;
margin: 0 auto;
padding: 12px 15px;
text-align: left;
width: auto;
}
#panorama ul.thumbnail li {
font-style: 1px;
line-height: 0;
margin: 0 6px;
height: 93px;
position:relative;
background-color:#FFF;
width:122px;
overflow:hidden;
}
#panorama ul.thumbnail li a {
width: 114px;
display:inline-block;
height: 82px;
position:absolute;
left: 4px;
top: 4px;
overflow:hidden;
}
#panorama ul.thumbnail li a span {
width: 320px;
height: 82px;
overflow:hidden;
position:relative;
left:-31px;
display:table-cell;
text-align: center;
vertical-align: middle;
left:0;
}

.thumbnail li .over {
width: 114px;
position: absolute;
padding: 0;
top: 4px;
left: 4px;
}
.thumbnail li .over img {
width:115px;
margin: 0 atuo;	
}
ul#panorama_control {
overflow:hidden;
height:32px;
position:relative;
bottom:0;
left:0;
text-align:right;
background-image: url("/lib/images/common/detail/panorama/pano_bkg.png");
background-repeat: repeat;
width:auto;
border-style:solid;
border-color: #CCC;
border-width:1px 0; 
}
ul#panorama_control li{
display: inline-block;
margin:0;
}
ul#panorama_control li img {
touch-callout:none;
user-select:none;
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
ul#panorama_control li img:hover {
cursor: pointer
}
#panorama ol {
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
width:100%;
}
#panorama ol li {
margin:0;
padding:0;
list-style:none;
display:inline-block;
position:absolute;
width:34px;
height:40px;
top:38px;
}
#panorama ol li:hover {
cursor: pointer
}
#panorama ol li.thum_move_l {
left:0;

}
#panorama ol li.thum_move_r {
	right:0;

}

#stage {
/*
background-image: url("/lib/images/common/detail/panorama/loading.gif");
background-repeat: no-repeat;
background-position: center center;
*/
}
#stage .member {
background: rgba(0, 0, 0, 0) url("/images_asp/detail/pano_member_bg.jpg") no-repeat scroll center center / cover ;
display: table;
height: 440px;
width: 100%;
}
#stage .member span {
display: table-cell;
text-align: center;
vertical-align: middle;
}