#openLayer {
	position: fixed;
	z-index: 9997;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	background-color: #000000;
}
#openLayerContainer {
	width: 850px;
	height : 555px;
	margin-right: auto;
	margin-left: auto;
	position: fixed;
	z-index: 9998;
	left: 0px;
	right: 0px;
}

#maesetsu1 {
	display: block;
	position : absolute;
}
#maesetsu2 {
	display: none;
	position : absolute;
}

#openLoadingLayer {
	background-color: #FFFFFF;
	position: fixed;
	z-index: 9998;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
#openLoadingContainer {
	position: fixed;
	z-index: 9999;
	left: 48%;
	top: 48%;
	right: 48%;
	bottom: 48%;
	font-size: 12px;
	color: #FF666A;
	text-align: center;
}
#wrapper {
	background-image: url(images/bg.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	height: 100%;
	width: 100%;
	background-size : cover;
	overflow:scroll;
}
#canvasFrame {
	background-image: url(images/canvasFrame.png);
	height: 760px;
	width: 1069px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
}
#canvasContainer {
	height: 620px;
	width: 1044px;
	margin-top: 5px;
	margin-left: 6px;
	position: absolute;
	z-index: 10;
	overflow:hidden;
	cursor : pointer;
}
.zoomHolder img {
	display : block;
	position: absolute;
	z-index: 12;
}
.zoomHolder a {
	display : block;
	position : absolute;
	z-index : 20;
	text-indent: -9999px;
	display:none;
}
.zoomHolder img.chameItem {
	display : none;
	position : absolute;
	z-index : 13;
}
.zoomHolder img.choised {
	animation-name : choise1;
	animation-duration : 2s;
	animation-timing-function: linear;
}
@keyframes choise1 {
	0% { transform: rotate(0deg);}
	15% { transform: rotate(180deg);}
	30% { transform: rotate(360deg);opacity:1}
	100% { transform: rotate(360deg);opacity : 0; }
}
.loupeContainer {
	position: fixed;
	z-index: 14;
	width: 1045px;
	height: 620px;
	top : 0;
	left : 0;
	background-image: url(images/loupe.png?a=1);
	background-repeat: no-repeat;
	background-position: left top;
/*
opacity : 0.6;
*/
}
.noLoupe {
	background-image : url(../../common/images/transparent.png);
	background-repeat: repeat;
}
.zoomHolder {
	position: absolute;
	z-index: 16;
}
/******** �Y�[���P (�L��) ********/
#zoom1Container {
	height: 620px;
	width: 1045px;
	position: absolute;
	z-index: 10;
}
#zoom1Holder {
	height: 620px;
	width: 1045px;

}
.cam11 {
	height: 15.5px;
	width: 40.5px;
	margin-top: 431px;
	margin-left: 676.5px;
}
.cam12 {
	height: 19.5px;
	width: 26.5px;
	margin-top: 543px;
	margin-left: 903.5px;
}
.cam13 {
	height: 86.5px;
	width: 76.5px;
	margin-top: 187px;
	margin-left: 796.5px;	
}
.cam14 {
	height: 25px;
	width: 57px;
	margin-top: 44px;
	margin-left: 273px;
	-webkit-blend-mode:color-burn;
}
.cam15 {
	height: 34.5px;
	width: 32.5px;
	margin-top: 480px;
	margin-left: 88px;
}
.cam16 {
	height: 45px;
	width: 92.5px;
	margin-top: 270px;
	margin-left: 416px;	
}
/********  �Y�[���Q (�g��1) ********/
#zoom2Container {
	width : 2180px; /** 2090 **/
	height : 1474px; /** 1240 **/

	position : absolute;
	z-index : 10;

	margin-top : -438px; /** 310 **/
	margin-left : -565px; /** 525 **/


	display : none;
}
#zoom2Holder {
	height: 930px;
	width: 1567px;
	top : 160px;
	left : 270px;
}
.cam21 {
	height: 23.25px;
	width: 60.75px;
	margin-top: 646.5px;
	margin-left: 1014.75px;
}
.cam22 {
	height: 29.25px;
	width: 39.75px;
	margin-top: 814.5px;
	margin-left: 1355.25px;
}
.cam23 {
	height: 129.75px;
	width: 114.75px;
	margin-top: 280.5px;
	margin-left: 1194.75px;
}
.cam24 {
	height: 37.5px;
	width: 85.5px;
	margin-top: 66px;
	margin-left: 409.5px;
}
.cam25 {
	height: 51.75px;
	width: 48.75px;
	margin-top: 720px;
	margin-left: 132px;
}
.cam26 {
	height: 67.5px;
	width: 138.75px;
	margin-top: 405px;
	margin-left: 624px;
}
/********  �Y�[���R (�ő�g��) ********/
#zoom3Container {
/*
	width : 3134px;
	height : 1860px;
*/
	width : 3228px; /** 3134 **/
	height : 2090px;

	position : absolute;
	z-index : 10;
/*
	margin-top : -620px;
	margin-left : -1044px;
*/
	margin-top : -748px;
	margin-left : -1091px; /** 1046 **/

	display : none;
}
#zoom3Holder {
	height: 1240px;
	width: 2089px;
	top : 310px;
	left : 522px;
}

.cam31 {
	height: 31px;
	width: 81px;
	margin-top: 862px;
	margin-left: 1353px;
}
.cam32 {
	height: 39px;
	width: 53px;
	margin-top: 1086px;
	margin-left: 1807px;
}
.cam33 {
	height: 173px;
	width: 153px;
	margin-top: 374px;
	margin-left: 1593px;
}
.cam34 {
	height: 50px;
	width: 114px;
	margin-top: 88px;
	margin-left: 546px;
}
.cam35 {
	height: 69px;
	width: 65px;
	margin-top: 960px;
	margin-left: 176px;
}
.cam36 {
	height: 90px;
	width: 185px;
	margin-top: 540px;
	margin-left: 832px;
}

/******** �e��{�^�� *****/

#canvasLeft {
	position: absolute;
	z-index: 20;
}
#backHome {
	margin-top: 24px;
	margin-left: 22px;
	position : absolute;
	z-index: 100;
}

#backHome a {
	background-image: url(images/toHome.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
	display: block;
	height: 60px;
	width: 60px;
}
#zoom {
	margin-top: 545px;
	margin-left: 16px;
	position:absolute;
	z-index : 12;
}
#zoom1button {
	background-image: url(images/zoomOn.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	text-indent: -9999px;
	display: block;
	height: 68px;
	width: 75px;
	float : left;
}
#zoom2button {
	background-image: url(images/zoomOn.png);
	background-repeat: no-repeat;
	background-position:left -68px;
	text-indent: -9999px;
	display: none;
	height: 68px;
	width: 75px;
	float : left;
}
#canvasFooter {
	margin-top: 620px;
	position: absolute;
	z-index: 100;
	width: 1044px;
}
#chameleonCounter {
	float: left;
	width: 463px;
	margin-top: 18px;
	margin-left: 23px;
}
#chameleonCounter li {
	position: absolute;
	height: 57px;
	width: 76px;
}
#chameleonCounter li.seted {
	background-image: url(images/chameleon.png);
	background-repeat: no-repeat;
}
#chameleonCounter li.cml1 {}
#chameleonCounter li.cml2 {
	margin-left: 63px;
}
#chameleonCounter li.cml3 {
	margin-left: 125px;
}
#chameleonCounter li.cml4 {
	margin-left: 188px;
}
#chameleonCounter li.cml5 {
	margin-left: 250px;
}
#chameleonCounter li.cml6 {
	margin-left: 314px;
}

#hintContainer {
	background-repeat: no-repeat;
	background-position: left top;
	float: left;
	height: 54px;
	width: 401px;
	margin-top: 15px;
}
#hintButton {
	float: left;
	width: 80px;
	margin-top: 9px;
}
#hintButton a {
	background-image: url(images/hintUp.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	text-indent: -9999px;
	display: block;
	height: 68px;
	width: 75px;
}
#hintButton a.down {
	background-position: left -68px;
}
#giveupButton {
	float: left;
	width: 75px;
	margin-top: 9px;
}
#giveupButton a {
	background-image: url(images/giveUp.png);
	background-repeat: no-repeat;
	background-position: left 0px;
	text-indent: -9999px;
	display: block;
	height: 68px;
	width: 75px;
}
#giveupButton a.down {
	background-position: left -68px;
}
#loupePipe {
	background-image: url(images/loupe.png);
	background-repeat: no-repeat;
	background-position: -3px bottom;
	width: 1000px;
	height : 89px;
	margin-left : 8px;
	display : none;
}
.guLoupe {
	background-image: url(images/giveupLoupe2.png);
	background-repeat: no-repeat;
	background-position: left top;
	position: absolute;
	z-index: 30;
	height: 141px;
	width: 81px;
	display : none;
}
.guLoupe img {
	display : none;
}
#guLoupe1 {
	margin-top: 410px;
	margin-left: 660px;
}
#guLoupe2 {
	margin-top: 519px;
	margin-left: 882px;
}
#guLoupe3 {
	margin-top: 198px;
	margin-left: 799px;
}
#guLoupe4 {
	margin-top: 19px;
	margin-left: 269px;
}
#guLoupe5 {
	margin-top: 461px;
	margin-left: 70px;
}
#guLoupe6 {
	margin-top: 259px;
	margin-left: 423px;
}

/**** �N���A�� ****/
#clearLayer {
	background-color: #000000;
	position: fixed;
	z-index: 9995;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	opacity : .8;
	display : none;
}
#clearContainer .clearItem {
	position: fixed;
	margin-right: auto;
	margin-left: auto;
	display : none;
}
#clear1 {
	z-index: 9998;
}
#clear2 {
	z-index: 9997;
}
#clear3 {
	z-index: 9996;
	background-image: url(images/clear3.png);
	background-repeat: no-repeat;
	height: 640px;
	width: 950px;	
}
#clear3 a {
	display: block;
	margin-top: 550px;
	margin-left: 30px;
}
#clear3 a img {
	display : none;
}
#giveupContainer {
	margin-right: auto;
	margin-left: auto;
	position: fixed;
	z-index: 9998;
	display : none;
}