body{
	overflow: hidden;
}


.wrapper{
width: 100%;
padding: 0;
overflow: hidden;

}



.round_group{
	border: 1px solid #000;
	border-radius: 1em;
}



.stamp_chara{
	width:100%;
	height:100%;
	
	}

.stamp_chara>div{
	height: 100%;
	width: 100%;
	/*
	background-size:  auto 100% ;
	background-position: center center;
	
	background-repeat: no-repeat;
	*/
}


.stamp_list .stamp_chara{
width:2em;
height:2em;
margin: 0.2em;
}


.stamp_chara img{
	height: 100%;
	width: 100%;
	max-width: none;
	opacity: 0;
}


.stamp_image.flip{
	transform: scaleX(-1);
}


.layer.flip{
	transform: scaleX(-1);
}


canvas.layer{
	width: 100%;
	height: 100%;
}





.ojama_rainbow{animation: rainbow_change_anim 4s linear  infinite };

.anim_delay_0{animation-delay:0;}
.anim_delay_500{animation-delay:500ms;}
.anim_delay_1000{animation-delay:1000ms;}





@keyframes rainbow_change_anim {
0%{
filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}
20%{
filter: invert(88%) sepia(100%) saturate(2929%) hue-rotate(104deg) brightness(99%) contrast(104%);
}
40%{
filter: invert(17%) sepia(91%) saturate(7085%) hue-rotate(128deg) brightness(100%) contrast(106%);
}
60%{
filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

80%{
filter: invert(8%) sepia(99%) saturate(7044%) hue-rotate(247deg) brightness(100%) contrast(145%);
}

100%{
filter: invert(81%) sepia(81%) saturate(633%) hue-rotate(359deg) brightness(106%) contrast(105%);
}
}


.selected_color {
animation: selected_color_anim 1s  infinite;
}
	
@keyframes selected_color_anim {
	0%   { padding:0; }
	25%  { padding: 1% 2%; }
	50%  { padding:0 0; }
	75%  { padding: 2% 3%  }
	100% { padding:0; }
}




.selected_bold {
	animation: selected_bold_anim 1s  infinite;
	}
		
	@keyframes selected_bold_anim {
		0%   { opacity:1; }
		50%  { opacity:0.3; }
		100% { opacity:1; }
	}





/* game */


#clear{
    height: 2em;
}

#open_menu{
    margin:-0.4em 0 0;
    height: 2em;

}



.fontsmall{
	font-size:0.8em;
	line-height: 1.4em;
}



.paint_chara{
	display: inline-block;
	position: absolute;
	height: 5em;
	width: 5em;
	margin:-2.5em -5em 0 0 ;
	display: none;
}

.paint_chara.reverse{
	margin:-2.5em  0 0 -5em ;

}

.paint_chara img{
	object-fit: contain;
	width: 100%;
	height: 100%;
}


.paint_chara.reverse img{	
	transform: scale(-1,1);
}



.paint_effect{

	position: absolute;
	height: 2em;
	width: 2em;
	object-fit: contain;
	margin:-1.5em 0 0 -1.5em;
	z-index:99999;

}



.paint_effect.half{
	height: 0.5em;
	width: 0.5em;
}


.paint_effect img{
	object-fit: contain;
	width: 100%;
	height: 100%;
	transform-origin: center;
}


.paint_effect img.rotate0{  }
.paint_effect img.rotate1{ transform: rotate(90deg); }
.paint_effect img.rotate2{ transform: rotate(180deg); }
.paint_effect img.rotate3{ transform: rotate(270deg); }







.absolute{
	position: absolute;
}

/*
.hato{
transition: transform 0.1s linear, left 1.6s linear , top 1.6s linear;
}


.neko{
transition: transform 0.1s linear , left 1.0s linear , top 1.0s linear;
}*/



.reverse{
transform: scale(-1,1);
}

.top1{top:10%;}
.top2{top:20%;}
.top3{top:30%;}
.top4{top:40%;}
.top5{top:50%;}
.top6{top:60%;}
.top7{top:70%;}
.top8{top:80%;}
.top9{top:90%;}



.do_save,
.save_done{
width: 100vw;
height: 100vh;
background-color: rgba(255,255,255,0.70);
position: fixed;
z-index:10;
top:0;
left:0;

display: none;
}


.save_done img{
	width: 50vmin;
	height: 50vmin;
	object-fit: contain;
	position: absolute;
	z-index:10;
	margin:-25vmin 0 0 -25vmin;

	top:50%;
	left:50%;

	
}


.do_save img{
	width: 100vmin;
	height: 100vmin;
	object-fit: contain;
	position: absolute;
	z-index:10;
	margin:-50vmin 0 0 -50vmin;
	top:50%;
	left:50%;
	background-color: rgba(255,255,255,1);

	border:0.3em solid #000;

	box-shadow: 0px 0px 2em -2em #000;
	border-radius: 2em;



	
}






.do_sound{
	width: 1em;
	height: 1em;
	position: absolute;
	right: 0;
	top: 0;
}