@charset "UTF-8";

html,body {
	width: 100%;
	height: 100%;
}

#view360 {
	width: 1500px;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

#viewArea {
	position: relative;
}

ol {
		display: block;
    list-style-type: none;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

/*///////////////////////// HELP /////////////////////////*/
.help {
	z-index: 1000;
	text-align:center;
	width: 100%;
	position:absolute;
	bottom:18%;
	display:none;
}
.help img {
	width:12%;
	min-width:80px;
}
.spritespin {
	z-index:900;
/*
	cursor:e-resize;
*/
}
#loading {
	width: 100%;
	position:absolute;
	top:0px;
	z-index:500;
}

/*///////////////////////// ColorSelect /////////////////////////*/
#colorSelect {
	width:100%;
  position:absolute;
  z-index:2000;
	bottom:0px;
}
#colorSelect ol {
	text-align:right;
	padding:5px 25px;
}
#colorSelect ol li {
	display:inline-block;
}

.circle {
	width: 30px;
	height: 30px;
  cursor:pointer;
	background-repeat:no-repeat;	
	position: relative;
}
/*
.active {
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4) inset;
}
*/

/* balloon-1 bottom */
.balloon {
	font-size:70%;
	position:absolute;
	display: inline-block;
	padding: 3px 3px;
	width: auto;
	height: auto;
	line-height:1em;
	color: #19283C;
	text-align: center;
	background: #F6F6F6;
	border: 1px solid #19283C;
	z-index: 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	bottom:40px;
	display:none;
	min-width:60px;
}
.balloon:before {
	content: "";
	position: absolute;
	bottom: -7px; left: 49%;
	margin-left: -8px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #F6F6F6 transparent transparent transparent;
	z-index: 0;
}
.balloon:after {
	content: "";
	position: absolute;
	bottom: -8px; left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 8px 8px 0 8px;
	border-color: #19283C transparent transparent transparent;
	z-index: -1;
}

/* PC Browser */

@media all and (max-width: 960px) {
}


/* Mobile Browser */

@media all and (max-width: 767px) {
#view360 {
	width: 100%;
}
.circle {
	width: 24px;
	height: 24px;
	-webkit-border-radius: 12px;/* width,heightの半分 */
	-moz-border-radius: 12px;
	border-radius: 12px;
	background-size:24px 24px;
}
.balloon {
	bottom:33px;
}

}

@media all and (max-width: 640px){
.circle {
	width: 20px;
	height: 20px;
	-webkit-border-radius: 10px;/* width,heightの半分 */
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-size:20px 20px;
}
.balloon {
	bottom:30px;
}

}

@media all and (max-width: 542px){
.help {
	bottom:25%;
}
}

@media all and (max-width: 480px){

}

@media all and (max-width: 479px) {
.help {
	bottom:30%;
}
}

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

}

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

}

@media all and (max-width: 320px) {

}