#loading{
		display:flex;
		position:fixed;
		left:0;
		width:100vw;
		height:100vh;
		top:0;
		right:0;	
		bottom:0;
		background-color:#00a9ef;
		z-index:99999999999999;
		
		flex-direction:column;
		align-items:center;
		justify-content:center;
	}
	#loading-wrapper{
		width:80vw;
		height:80vh;
		display:flex;
		text-align:center;
		flex-direction:column;
		flex-wrap:wrap;
		align-content:center;
		justify-content:center;
		align-items:center;
	}
	#loading .logo{
		display:block;
		width:320px;
	}
	.spin{
		animation:3s linear infinite rotation;	
		width:320px;
		height:320px;
	}
	@keyframes rotation{
		0%{transform:rotate(0);}
		100%{transform:rotate(360deg);}
	}
	body{
		background-color:black;
	}
	*{
		padding:0;
		margin:0;
		overflow:hidden;
		touch-action:manipulation;
		font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
}
	.clear-button{
		background-image:url( ../images/cross.png );
		background-repeat:no-repeat;
		background-size:contain;
		width:32px;
		height:32px;
		outline:none;
		border-style:none;
		background-color:transparent;
	}
#tmp_canvas{
	opacity:0;
}
#input-zone{
	height:80px;
}
.photo-page{
	height:100vh;
}
.frame-page {
	position:relative;
	display:flex;
//	width:100vw;
	width:80vw;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	align-content:flex-start;
	flex-wrap:wrap;
	height:100%;
	
}

.clear-button{
	position:absolute;
	z-index:9999;
	right:0px;
	top:0px;
	cursor:pointer;
}
.input-text{
	position:relative;
}
.input-name{
	padding:30px;
}

input:invalid {
	background-color: lightpink;
}
	.logo{
		object-fit:contain;
	}
	#frames-wrapper{
	#	height:100vh;
		display:flex;
		align-items:center;
		flex-direction:column;
	#	justify-content:center;
		justify-content:space-between;
	}
	.frames-btn{
		cursor:pointer;
	}
	.frames-btn.on{
		border-width:5px;
		border-color:deeppink;
		border-style:solid;
		box-sizing:border-box;
	}
	::placeholder{
		color:#cccccc;
		font-size:12px;
	}
	html{
		touch-action:manipulation;
	}
	#result-wrapper{
		display:none;
	}
	.sel-btns>.left,.sel-btns>.right{
		display:flex;
		align-items:center;
	}
	.sel-btns{
		
		display:flex;
		padding-bottom:20px;
		align-items:center;
		flex-direction:row;
		position:fixed;
		left:0;
		justify-content:space-around;
		bottom:0;
		width:100%;
		height:50px;
		
	}
	.sel-ul{
		display:flex;
		justify-content:flex-start;
		align-items:center;
		flex-direction:column;
	}
	.button{
		cursor:pointer;
		border-style:solid;
		border-width:1px;
		border-color:white;
		background-color:transparent;
		font-size:24px;
		color:white;
		padding:10px;
		margin-bottom:40px;
		min-height:34px;
	
	}
	#result{
		position:fixed;
		z-index:999999;
		left:0;
		right:0;
		background-color:black;
		bottom:0;
		top:0;
		display:flex;
#		justify-content:space-between;
		justify-content:space-evenly;
		align-items:center;
		background-size:contain;
		flex-direction:column;
		
	}
	#result-image{
		display:block;
		top:0px;
		left:0px;
		width:80%;
		object-fit:contain;
	}
	#result>p{
		padding:10px;
		width:100%;
		text-align:center;
		color:white;
	}
	#flash{
		position:fixed;
		background-color:white;
		width:100%;
		height:100%;
		z-index:9999;
		top:0;
		left:0;	
		right:0;
		bottom:0;
		display:none;
	}
	#ori-wrapper{
		display:none;
		width:100%;
		height:100%;
	}
	#ori{
		width:100%;
		height:100%;
		display:flex;
		position:fixed;
		background-color:#000000;
		z-index:9999999;
		top:0;
		left:0;	
		right:0;
		bottom:0;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
	}
	#splash{
		height:100vh;
		display:flex;
		position:fixed;
		background-color:#00a9ef;
		width:100%;
		height:100%;
		z-index:999999;
		top:0;
		left:0;	
		right:0;
		bottom:0;
#		justify-content:space-between;
		justify-content:space-evenly;
		align-items:center;
		flex-direction:column;
		column-gap:20px;
		row-gap:5px;
	}
	#select-frame-wrapper{
	
		display:block;
		position:fixed;
		top:0;
		left:0;	
		right:0;
		bottom:0;
		z-index:999998;
		background-color:#00a9ef;
		
	}
	#frame-box{
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		align-items:flex-start;
		justify-content:space-start;
		align-content:space-around;
		position:relative;	
		height:100vh;
		left:0;
		over-flow:hidden;
		
	}
	#frame-box-wrapper{
		height:500px;
		display:flex;
		flex-direction:row;
		flex-wrap:nowrap;
		align-items:flex-start;
	}

	#frame-box img{
//		padding:10px;
		width:140px;
	}
	.frame-page div{
		width:40vw;
		text-align:center;
		padding-bottom:30px;
	}
	#select-frame{
		display:flex;
		position:fixed;
		width:100%;
		height:100%;
		justify-content:space-evenly;
#		align-items:center;
#		flex-direction:column;
#		column-gap:20px;
#		row-gap:5px;
#		align-items:center;
	}
	p{
		display:block;
		min-height:20px;
		color:white;
	}
	#splash>p{
		margin:10px 20px;
	}
	#splash>img{
		padding-top:40px;
		width:300px;
	}
	input{
		height:20px;
		border-style:solid;
		border-width:4px;
		border-color:#ffffff;
		border-radius:20px;
		font-size:18px;
		line-height:32px;
		height:32px;
		outline:none;
		padding:10px;
		padding-right:30px;
	}
	#camera{
		position:absolute;
		left:0;
//		top:-100;
		width:150px;
		height:150px;
		z-index:-10;
		opacity:0;
		object-fit:contain;
//		aspect-ratio:16/9;
	}
	#frame{
		
		position:relative;
		top:0px;
		height:80%;
		left:0px;
		margin:0 auto;
		display:block;
		object-fit:contain;
		aspect-ratio:16/9;
		//object-fit:scale-down;
	}
	#tmppic{
		position:absolute;
		display:block;
		top:0;left:0;
		width:300px;
		height:300px;
		background-color:red;
	}

	.btn{
		max-width:50px;
		min-height:50px;
		display:block;
		width:50px;
		height:50px;
#		width:calc(200/1242 * 100vw );
#		height:calc(200/1242 * 100vw );
		background-repeat:no-repeat;
		background-size:contain;
		touch-action:manipulation;
		cursor:pointer;
		transition: all 0.1s ease-out allow-discrete;
	}
	.button:hover{
		background-color:rgba(255,255,255,0.2);
	}
	.button:active{
		transform:translateY(5px);
	}
	.btn:active{
		opacity:0.1;
		transform:translateY(5px);
	}
	#back-title,#back{
		background-image:url( "../images/back.png" );
	}
	#goto{
		background-image:url( "../images/back.png" );
		transform:rotateZ( 180deg );
	}
	#save{
		background-image:url( "../images/save.png" );
	}
	#select{
		background-image:url( "../images/select.png" );
	}
	#shot{
		background-image:url( "../images/shot.png" );
	}
	#rotate{
		background-image:url( "../images/rotate.png" );
	}
	#frame-prev{
		background-image:url( "../images/icon_prev.png" );
		left:0;
	}
	#frame-next{
		background-image:url( "../images/icon_next.png" );
		right:0;
	}
	.btn.pager{
		width:100px;
		height:100px;
		max-width:100px;
		max-height:100px;
		position:absolute;
		top:calc( 50% - 50px );
		z-index:99999;	
		opacity:0.8;
	}
	.buttons{

		width:100%;
		position:fixed;
		display:flex;	
		justify-content:space-around;
		height:50px;
		bottom:0;
		left:0;
		right:0;
		padding:10px 10px;
		background-color:rgba(0,0,0,0.5);
		max-height:70px;
	}