body{
	margin:8px auto;
	padding:0px;
	width:624px;
}

html {
 overflow-y: scroll;
}

*:focus {
  outline: none;
}


div{
	margin:0px;
	font-size:12px;
	line-height:1.2em;
}

button,input[type="text"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button{
	border:outset 8px #99CC99;
	background-color:#CCFFCC;
	margin:0px;
	padding:0px;
	border-radius:8px;
	display:block;
	box-sizing:content-box;
}

button:hover {
	background-color:#EEFFEE;
}

a{
	font-size:12px;
	margin:1em;
	color:#00cc00;
}

h1{
	margin:0;
	padding:0;
	font-size:16px;
}

canvas{
	margin:0px;
	padding:0px;
	display:block;
}

svg{
	margin:0px;
	padding:0px;
	display:block;
	border:0px;
}

h1{
	width:100%;
	text-align:center;
	font-size:16px;
	line-height:1.2em;
}
	
h1 > span{
	display:block;
}

.rinku{
	font-size:12px;
}

.rinku>a{
	width:264px;
	float:left;
	display:block;
	height:3.6em;
	border:solid 8px #D6DDD6;
	background-color:#F6FFF6;
	text-align:center;
	margin:16px;
	position:relative;
	border-radius: 8px;
}
	
.rinku>a>span{
	width:200px;
	display:block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
	padding:0px;
	margin:0px;
}

.rinku + div{
	clear:left;
}

.heading{
	position:relative;
	line-height:2em;
	padding-left:3em;
	margin:0.5em 0 0.5em 0;
	font-size:16px;
}

.heading:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(pig32.png) no-repeat;
	background-size:contain;
}



.load_dsc{
	width:100%;
	text-align:center;
	margin:3em auto 1em auto;
}

.load_dsc>span{
	position:relative;
	line-height:2em;
	padding-left:3em;
}

.load_dsc>span:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(pig32.png) no-repeat;
	background-size:contain;
}



div.load_button{
	float:left;
	width:156px;
	height:312px;
	margin:1em 78px;
}
div.load_button_0{
	float:left;
	width:156px;
	height:312px;
	margin:1em 234px;
}
div.load_button>button{
	width:140px;/*156-16*/
	height:140px;/*156-16*/
	margin-bottom:1em;
}

#pageDsc{
	width:416px;
	float:left;
}

#div_opening{
	width:624px;
	float:left;
}

#div_start{
	width:80%;
	height:1.2em;
	line-height:1.2em;
	text-align:center;
	padding-top:1.4em;
	padding-bottom:1.4em;
	border:solid 2px #060;
	background-color:#CFC;
	margin:auto;
	margin-top:0.5em;
}

#button_start{
	display:block;
	width:544px;/*624-32-32-8-8*/
	height:4em;
	margin:32px;
}

#div_cnv{
	width:400px;
	height:400px;
	float:left;
	border:solid 8px #0C0;
	display:block;
}


#div_cnv>div:nth-child(2){
	width:800px;
}


#div_left{
	width:416px;
	float:left;
}

.optionb{
	margin:8px;
	width:140px;/*156-8-8*/
	height:72px;
	float:left;
}

.optionb>button{
	width:124px;/*156-8-8-8-8*/
	height:72px;
}

.optionb_s{
	border-style:solid;
	border-color:#00FF00;
}



#div_cmd{
	clear:left;
	float;left;
	font-size:12px;
	line-height:1.1em;
	width:624px;
	height:11em;
}


div#div_btn{
	width:208px;
	float:right;
	background-color:#F6FFF6;
}
div#div_btn>div{
	width:208px;
}
div#div_btn + div{
	clear:both;
}


div#div_btn>div>div{
	width:92px;/*104-4-8*/
	height:48px;/*60-4-8*/
	border:outset 2px #99CC99;
	background-color:#CCFFCC;
	margin:16px 4px;
	padding:0px;
	float:left;
	position:relative;
	border-radius:8px;
}

div#div_btn>div>div>div{
	font-size:12px;
	line-height:16px;
	width:92px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%);
	text-align: center;
}

div#div_btn>div>div.pig_i{
	width:96px;/*104-8*/
	height:52px;/*60-8*/
	border:none 0px #99CC99;
	background-color:transparent;
	float:left;
}

div#div_btn>div>div.pig_i>div{
	background:url(pig32.png) no-repeat;
	background-size:contain;
	width:16px;
	height:16px;
}

#jump_target{
 width:100px;
 height:2em;
 margin:0px;
 padding:0px;
 border:2px solid #000;
 display:block;
}

#jump_go,#jump_cancel{
 width:44px;
 height:2em;
 margin:1px;
 padding:1px;
 border:1px solid #000;
}


#div_stt{
	height:3.6em;
}

#div_exp{
	display:none;
	margin:0.5em 0px;
}

#div_all{
	display:none;
	margin:0.5em 0px 2.5em 0px;
}

#div_exp_on,#div_exp_off,#div_all_on,#div_all_off{
	font-size:12px;
	line-height:1.2em;
	border:outset 8px #99CC99;
	background-color:#CCFFCC;
	width:140px;
	height:1.2em;
	text-align:center;
	padding-top:1.2em;
	padding-bottom:1.2em;
	margin:4px;
	border-radius:8px;
}

#div_all_on{
	margin-bottom:2em;
}

#div_exp_off{
	display:none;
}
#div_all_off{
	display:none;
}


#div_exp_off > div,#div_all_off > div{
	clear:both;
}

.div_num{
	margin-left:2em;
}


#div_dat{
	width:624px;
	float:left;
	display:none;
	margin:0.5em 0px;
}


#div_clr{
	clear:both;
}



@media screen and (max-width:640px){
	body{
	 width:312px;
	 margin:4px auto;
	}
	
	#pageDsc{
	 width:208px;
	 float:left;
	}
	
	#div_opening{
	 width:312px;
	}
	
	
	div.load_button{
	 width:124px;/*156-16-16*/
	 height:248px;
	 margin:16px 16px;
	}
	
	div.load_button_0{
	 width:124px;/*156-16-16*/
	 height:248px;
	 margin:16px 94px;
	}
	
	div.load_button>button{
	 width:108px;/*124-8-8*/
	 height:108px;/*124-8-8*/
	 margin-bottom:1em;
	}
	
	
	.rinku{
	 width:312px;
	}
	
	
	.rinku>a{
		width:132px;
		float:left;
		display:block;
		height:3.6em;
		border:solid 4px #D6DDD6;
		background-color:#F6FFF6;
		text-align:center;
		margin:8px;
		position:relative;
		border-radius: 4px;
	}
	
	.rinku>a>span{
		width:100px;
		display:block;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform : translate(-50%,-50%);
		transform : translate(-50%,-50%);
		text-align: center;
		padding:0px;
		margin:0px;
	}
	
	
	.rinku + div{
		clear:left;
	}
	
	.optionb{
		margin:8px;
		width:140px;/*156-8-8*/
		height:72px;
		float:left;
	}
	
	
	.optionb>button{
		width:124px;/*140-8-8*/
		height:56px;/*72-8-8*/
	}
	
	
	#button_start{
		display:block;
		width:264px;/*312-16-16-8-8*/
		height:4em;
		margin:16px;
	}
	
	
	#div_left{
	 width:208px;
	}
	
	#div_cnv{
	 width:200px;
	 height:200px;
	 float:left;
	 border:solid 4px #0C0;
	}
	
	#div_cnv>div:nth-child(2){
		width:400px;
	}
	
	#div_cmd{
	 width:312px;
	 height:24em;
	 margin:10px 0px;
	}
	
	div#div_btn>div>div{
	 width:40px;/*52-4-8*/
	 height:40px;/*52-4-8*/
	 margin:8px 4px;
	}
	
	div#div_btn>div>div>div{
	 width:40px;/*52-4-8*/
	}
	
	div#div_btn>div>div>div>span{
	 display:block;
	}
	
	div#div_btn{
	 width:104px;
	}
	div#div_btn>div{
	 width:104px;
	}
	
	div#div_btn>div>div.pig_i{
		width:44px;/*52-8*/
		height:44px;/*52-8*/
		border:none 0px #99CC99;
		background-color:transparent;
	}

	div#div_btn>div>div.pig_i>div{
		background:url(pig32.png) no-repeat;
		background-size:contain;
		width:16px;
		height:16px;
	}
	
	#div_dat{
	 width:312px;
	}

}