#debug{
	position:fixed;
	left:0;
	top:0;
	background:#f00;
	color:#fff;
	z-index:100000;
	font-size:50px;
}


html{
	overflow-y:scroll;
}
body{
	position:relative;
}
#canvas{
	position:fixed;
	top:0;
	left:0;
	z-index:10000;
}
#otanoshimi .btn-close{
	position:fixed;
	bottom:200px;
	right:-130px;
	z-index:10002;
	transition:right 0.3s ease;
	width:111px;
	height:70px;
	background:url(../img/otanoshimi-close.png) no-repeat;
	background-size:contain;
}
#otanoshimi .btn-close:hover,
#otanoshimi .btn-close:active{
	background:url(../img/otanoshimi-close-on.png) no-repeat;
	background-size:contain;
}
#otanoshimi.open .btn-close{
	right: -35px;
}
#otanoshimi.open.sns-open .btn-close{
	right:-130px;
}
#otanoshimi.loading .btn-open,
#otanoshimi.open .btn-open,
#otanoshimi.hide .btn-open{
	right:-150px;
}
#otanoshimi .btn-close img{
	display:none;
}
#otanoshimi .btn-open{
	position:fixed;
	bottom:200px;
	right:-2px;
	z-index:10002;
	transition:right 0.3s ease;
	width:81px;
	height:80px;
	background:url(../img/otanoshimi-open.png) no-repeat;
	background-size:contain;
}
#otanoshimi .btn-open:hover,
#otanoshimi .btn-open:active{
	background:url(../img/otanoshimi-open-on.png) no-repeat;
	background-size:contain;
}
#otanoshimi .btn-open img{
	display:none;
}
#otanoshimi .sns{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:10003;
	background:rgba(255,255,255,0.8);
}
#otanoshimi .sns .inner{
	position:fixed;
	left:50%;
	top:50%;
	margin-top:-40px;
	margin-left: -172px;
	z-index:10004;
	height: 60px;
	width:339px;
	background:url(../img/otanoshimi-share.png) no-repeat;
	background-size:contain;
}
#otanoshimi .sns .inner .nhk-snsbtn{
	padding:7px 0 0 113px;
}
#otanoshimi .sns .inner .nhk-snsbtn .nhksns > li{
	padding:0 7px 0 0;
}
#otanoshimi .sns .inner .nhk-snsbtn .nhksns-guide{
	display:none !important;
}
#otanoshimi .sns .inner .nhksns img{
	width:29px;
	border:2px solid #fff;
	border-radius:2px;
	box-shadow:1px 1px 2px rgba(0,0,0,1);
}
#otanoshimi .sns .inner .sns-close{
	color: #fff;
	font-size: 30px;
	position: absolute;
	top: 0;
	right: 17px;
	padding: 10px;
	line-height: 1;
	display: block;
}
#otanoshimi .load{
	visibility: hidden;
	opacity: 0;
	transition: opacity 1.0s ease 0.0s, visibility 1.0s ease 0.0s;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.8);
	z-index:10005;
}
#otanoshimi .load img{
	position:fixed;
	top:50%;
	left:50%;
	width:57px;
	margin: -181.5px 0 0 -27.5px;
	max-width:100%;
	max-height:100%;
}
#otanoshimi.loading .load{
	visibility: visible;
	opacity: 1;
}

@media screen and (max-width: 640px){
#otanoshimi .btn-close{
	bottom:100px;
}
#otanoshimi .btn-open{
	bottom:100px;
}
}