DIR : /home/kozerus/public_html/jkwii/js/jsdoit/gamehmpath/style.css

/home/kozerus/public_html/jkwii/js/jsdoit/gamehmpath

/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */

body{margin: 0;}

div#root{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

div#root .cvsCenter{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 320px;
	height: 320px;
	margin-top: -160px;
	margin-left: -160px;
}

/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */
/* --------  十字キー -------- */

div#root div.arrow{
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 144px;
	height: 144px;
}

div#root div.arrow div{
	position: absolute;
	border: solid 3px white;
	background-color: rgba(255, 255, 255, 0.5);
}

div#root div.arrow div.hover{
	background-color: rgba(0, 0, 0, 0.5);
}

div#root div.arrow div::before{
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	width: 100%;
	height: 100%;
	border: solid 2px black;
}

div#root div.arrow div.up{
	left: 56px;
	top: 18px;
	width: 26px;
	height: 36px;
	border-radius: 8px 8px 15px 15px;
}

div#root div.arrow div.up::before{
	border-radius: 8px 8px 15px 15px;
}

div#root div.arrow div.dn{
	left: 56px;
	bottom: 18px;
	width: 26px;
	height: 36px;
	border-radius: 15px 15px 8px 8px;
}

div#root div.arrow div.dn::before{
	border-radius: 15px 15px 8px 8px;
}

div#root div.arrow div.rt{
	right: 18px;
	top: 56px;
	width: 36px;
	height: 26px;
	border-radius: 15px 8px 8px 15px;
}

div#root div.arrow div.rt::before{
	border-radius: 15px 8px 8px 15px;
}

div#root div.arrow div.lt{
	left: 18px;
	top: 56px;
	width: 36px;
	height: 26px;
	border-radius: 8px 15px 15px 8px;
}

div#root div.arrow div.lt::before{
	border-radius: 8px 15px 15px 8px;
}

/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */
/* --------  ボタン -------- */

div#root div.button{
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 144px;
	height: 144px;
}

div#root div.button div{
	position: absolute;
	left: 12px;
	width: 114px;
	height: 26px;
	line-height: 30px;
	border: solid 3px white;
	border-radius: 12px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.5);
}

div#root div.button div.hover{
	background-color: rgba(0, 0, 0, 0.5);
}

div#root div.button div::before{
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	width: 100%;
	height: 100%;
	border: solid 2px black;
	border-radius: 12px;
}

div#root .button div.zb{top: 2px; display: none;}
div#root .button div.xb{top: 38px; display: none;}
div#root .button div.cb{top: 74px; display: none;}
div#root .button div.sb{
	top: 110px;
	top: 20px;
	left: 20px;
	width: 98px;
	height: 48px;
	padding: 25px 0;
	line-height: 24px;
	border-radius: 40px;
}
div#root div.button div.sb::before{
	border-radius: 40px;
}

/* -------------------------------- */
/* -------------------------------- */
/* -------------------------------- */