* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}


html {
	font-size: 62.5%;	/* 16px x 0.625 = 10px(=1rem) */
}

body {
	background: #000;

	touch-action: manipulation; /* 標準外の追加的なジェスチャーを無効 ダブルタップでズームなど */
}



/*******************************************************************************
[@]header
*******************************************************************************/
div#HEADER_WRAPPER {
	display: none;
}





div#DIV_WHOLE {
	text-align: center;
}


div#DIV_MAZE_2 {
	position: fixed;
	display: grid;
	justify-items: center;
	align-content: center;

	width: 100%;
	height: 100%;

}

div#DIV_SPOT {
	/* 背景色くり抜き */
	position: absolute;
	top: 0;
	left 0;
	width: 100%;
	height: 100%;
/*
	background-image: radial-gradient(
		circle 20rem at 50% 50%,
		transparent 20rem,
		rgba( 0, 0, 0, 1.0 ),
		rgba( 0, 0, 0, 1.0 )
	);
*/
	z-index: 1000;
}


input#BTN_START {
	display: none;
	position: absolute;
	left: calc(50% - 8rem);
	top: 60%;

	font-size: 2rem;
	padding: 0.5rem;
	width: 16rem;

	color: #fff;
	background: #c00;
	border: solid #000 2px;
	border-radius: 0.5rem;
}


div#DIV_MAZE {
	position: relative;
	margin: auto;
	padding: 0;

}

canvas#CANVAS {
	display: none;

	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

canvas#CANVAS_P {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	display: none;
}


div#DIV_TIME {
	position: fixed;
	top: 0;

	padding: 0.2rem;
	font-size: 4rem;
	color: #fff;
	background: rgba(0,0,0, 0.6);
}

div#DIV_POINT {
	position: fixed;
	right: 0;
	top: 0;

	padding-left: 5rem;

	font-size: 4rem;
	color: #fff;
	background: rgba(0,0,0, 0.6);

	background-image: url(/image/maze_g/icon_jewelry.svg);
	background-repeat: no-repeat;
	background-size: 5rem;
	background-position: left center;


}

div#DIV_MSG {
	display: none;

	position: fixed;
	left: 50%;
	top: 50%;
/*	font-size: 3rem;*/
	color: #fff;
	background: rgba(0,0,0, 0.6);
}


div#CROSS_KEY {
	user-select: none;

	position: fixed;
	z-index: 1000;
	left: calc( 50% - 18mm );
	bottom: 3%;

/*	display: grid; */ 
	grid-template-columns: 1fr 1fr 1fr;

	width: 36mm;
	height: 36mm;

	background-image: url(/image/maze_g/cross.svg);
	background-repeat: no-repeat;
	background-size: 24mm 24mm;
	background-position: center center;
}

div.key_null {
	width: 8mm;
	height: 8mm;
}

div.key_arrow {
	width: 8mm;
	height: 8mm;
	z-index: 2000;
}




div#DIV_CONFIRM_WHOLE {
/*	display: grid;*/
	display: none;

	justify-items: center;
	align-content: center;

	position:fixed;
	z-index: 200;

	width: 100%;
	height: 100%;
}


/* mobile *****************************/
#DIV_CONFIRM_WHOLE > div {

	width: 360px;
	height: 400px;

	background: #efe;
	border: solid 5px #000;
	border-radius: 1rem;
}


div#DIV_CONFIRM_MSG {
	margin: 1rem 0;
	font-size: 3rem;
}


input#BTN_CONFIRM_RETRY,
input#BTN_CONFIRM_BACK {
	margin: 1.6rem 1rem;
	padding: 0.4rem;
	font-size: 2rem;

	background: #ddd;
	border: solid #000 2px;
	border-radius: 0.5rem;

}

div#DIV_ADD_CREDIT_PROG_BACK{
    position: absolute;
    width: 30rem;
    height: 3rem;

	left: calc(50% - 15rem);

	margin: 1.6rem 0;

	border: solid 2px #000;
	border-radius: 0.4rem;
	background: #dff;

}

div#DIV_ADD_CREDIT_PROG_FRONT {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;

	border-radius: 0.4rem;
	background: #6af;

}



div#LOADING_DIV {
	position: fixed;
	display: flex;
	flex-direction: column-reverse; 

	align-items: center;
	justify-content: center;

	left: 0;
	top: 0;
	width: 100%;
    height: 100%;

	background: rgba(0,0,0, 0.0);

}




img#IMG_QR {
	width: 6rem;
}



/*******************************************************************************
[@]footer
*******************************************************************************/

footer {
	display: none;
}





/* 固定広告対応 start ***************************/

#DIV_BTN_AD_CLOSE_MOBILE,
#DIV_BTN_AD_CLOSE_PC_HOR,
#DIV_BTN_AD_CLOSE_PC_VER {
	display: none;
}

/* mobile *****************************/
/* 縦横同じ */
div#DIV_AD_FIXED_MOBILE {
	display: block;

	position: fixed;
	width: 100%;
	top: 0;
	text-align: center;
}

div#DIV_AD_FIXED_PC_HOR {
	display: none;
}

div#DIV_AD_FIXED_PC_VER {
	display: none;
}


/* 広告閉じるボタン */
.div_btn_ad_close {

	position: absolute;
	bottom: -3rem;
	left: calc( 50% - 1.2rem );
	right: auto;

	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: #333;
}
 
.div_btn_ad_close::before,
.div_btn_ad_close::after {

	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3px;
	height: 2rem;
	background: #fff;
}
 
.div_btn_ad_close::before {
	transform: translate(-50%,-50%) rotate(45deg);
}
 
.div_btn_ad_close::after {
	transform: translate(-50%,-50%) rotate(-45deg);
}


/* PC *********************************/
@media screen and (min-width: 730px) {

	/* 縦向き */
	div#DIV_AD_FIXED_MOBILE {
		display: none;
	}

	div#DIV_AD_FIXED_PC_HOR {
		display: block;

		position: fixed;
		width: 100%;
		top: 0;
		text-align: center;
	}
	div#DIV_AD_FIXED_PC_VER {
		display: none;
	}

	/* 横向きなら書き換え */
	@media (min-aspect-ratio: 1/1) {

		div#DIV_AD_FIXED_PC_HOR {
			display: none;
		}
		div#DIV_AD_FIXED_PC_VER {
			display: block;

			position: fixed;
			top: calc( 50% - 300px );
			right: 0;
		}

		/* 広告閉じるボタン */
		.div_btn_ad_close {
			left: -3rem;
			right: auto;
			top: calc( 50% - 1.2rem );
			bottom: auto;
		}

	}
}

/* 固定広告対応 end ***************************/