﻿body{
	width			:	100%;;
	height			:	100%;
	font-family		:	sans-serif;
	background-color	:	black;
	padding			:	0px;
	margin			:	0px;
	-webkit-user-select	:	none;
	-moz-user-select	:	none;
	-ms-user-select		:	none;
	-webkit-touch-callout	:	none;
	color			:	white;
	overflow		:	hidden;
//	font-size		:	10.24px;//スクリーンwidthの1%
}
#d_show{
	position		:	relative;
	top			:	0px;
	left			:	0px;
	z-index			:	2;
	margin			:	auto;
	padding			:	0;
}

canvas{
	z-index			:	0;
	width			:	100%;
	height			:	100%;
	position		:	absolute;
	top			:	0px;
	left			:	0px;
	margin			:	0;
	padding			:	0;
}

#d_htm{
	z-index			:	1;
	width			:	100%;
	height			:	100%;
	position		:	absolute;
	top			:	0px;
	left			:	0px;
	margin			:	0;
	padding			:	0;
}

#ver401out{
	position		:	absolute;
	width			:	100%;
	bottom			:	0;
	margin			:	0;
	padding			:	0;
	text-align		:	center;
}

#ver401in{
	display			:	inline-block;
	white-space		:	nowrap;
	left			:	0;
	margin			:	0;
	padding			:	0.5em;
	text-align		:	left;
	color			:	white;
	font-family		:	ＭＳ Ｐ明朝,serif;
	font-size		:	248%;
	line-height		:	111%;
	text-shadow		:	0.15em 0.15em 0.15em #000,0.08em 0.08em 0.03em #000 , -0.08em 0.08em 0.03em #000 , 0.08em -0.08em 0.03em #000 , -0.08em -0.08em 0.03em #000 , 0.08em 0em 0.03em #000 , -0.08em 0em 0.03em #000 , 0em -0.08em 0.03em #000 , 0em 0.08em 0.03em #000;
}


#d_top{
	position		:	absolute;
	z-index			:	1;
	top			:	0px;
	left			:	0px;
	right			:	0px;
	bottom			:	0px; 
	margin			:	0px; 
	padding			:	0px; 
	width			:	100vw;
	height			:	100vh;
	visibility		:	hidden;
}



#d_panel{
	visibility		:	hidden;
	z-index			:	3;
	position		:	absolute;
	top			:	1vw;
	left			:	1vw;
	right			:	1vw;
	bottom			:	auto;
	margin			:	0;
	padding			:	1vw 3vw 0vw 3vw;
	width			:	auto;
	background-color	:	rgba(0,0,0,0.2);
	border-radius		:	15px 15px 15px 15px / 15px 15px 15px 15px;
	font-family		:	sans-serif,monospace;
	color			:	white;
}


#d_timeline_base{
	position		:	relative;
	cursor			:	pointer;
	margin			:	0px;
	padding			:	0px;
	width			:	auto;
	height			:	1vw;
	background-Color	:	rgba(150,150,150,0.6);
//	background		:	linear-gradient(to right, rgba(255,255,255,0.5) 0% , rgba(255,255,255,0.5) 50% , rgba(150,150,150,0.5) 50% , rgba(150,150,150,0.5) 90%);
	border-radius		:	1vw;
}
#d_timeline_load{
	position		:	absolute;
	margin			:	0px;
	padding			:	0px;
	width			:	0%;
	height			:	1vw;
	background-Color	:	rgba(255,255,255,0.5);
	border-radius		:	1vw;
}

#d_timeline_seek{
	width			:	0%;
	height			:	100%;
	margin			:	0px;
	padding			:	0px;
	background-Color	:	rgba(255,255,255,0.9);
	border-radius		:	1vw 0px 0px 1vw;
}
#d_timeline_point{
	width			:	2vw;
	height			:	2vw;
	background-Color	:	rgba(255,255,255,1);
	border-radius		:	2vw 2vw 2vw 2vw;
	float			:	right;
	margin-right		:	-1vw;
	transform		:	translateY(-25%);
	-webkit-transform	:	translateY(-25%);
}

.d_slide_small{
	display			:	inline-block;
	vertical-align		:	middle;
	margin			:	0vw 1vw 0vw 1vw;
	padding			:	0;
	width			:	10vw;
	height			:	0.8vw;
}

#d_speed_base,#d_volume_base{
	position		:	relative;
	cursor			:	pointer;
	margin			:	0;
	padding			:	0;
	width			:	auto;
	height			:	0.8vw;
	background-Color	:	rgba(150,150,150,1);
	border-radius		:	1vw;
}

#d_speed_seek{
	width			:	70%;
	height			:	100%;
	padding			:	0px;
	background-Color	:	rgba(250,24,24,0.6);
	border-radius		:	1vw 1vw 1vw 1vw;
}

#d_volume_seek{
	width			:	50%;
	height			:	100%;
	padding			:	0px;
	background-Color	:	rgba(250,24,24,0.6);
	border-radius		:	1vw 1vw 1vw 1vw;
}

#d_speed_point,#d_volume_point{
	width			:	1vw;
	height			:	1vw;
	background-Color	:	rgba(255,255,255,1);
	border-radius		:	2vw 2vw 2vw 2vw;
	float			:	right;
	margin-right		:	-0.5vw;
	transform		:	translateY(-12.5%);
	-webkit-transform	:	translateY(-12.5%);
}


#d_timeline_text,#d_speed_text,#d_volume_text{
	position		:	absolute;
	top			:	-1vw;
	line-height		:	100%;
	color			:	white;
	background-color	:	rgba(0,0,0,0.4);
}
#img_play256{
	position		:	absolute;
	z-index			:	4;
	cursor			:	pointer;
	width			:	25vw;
	height			:	25vw;
	margin			:	15vw auto auto auto;
	padding			:	0px;
	top			:	0vw;
	left			:	0vw;
	right			:	0vw;
	bottom			:	0vw;
	opacity			:	0.8;
}



#tb_panel_bottom{
	display			:	table;
	width			:	100%;
}
#tbc_panel_bottomL{
	display			:	table-cell;
	padding			:	0px;
	margin			:	0px;
	width			:	50%;
	height			:	3vw;
}
#tbc_panel_bottomR{
	display			:	table-cell;
	padding			:	0px;
	margin			:	0px;
	width			:	30%;
	height			:	3vw;
	text-align		:	right;
}
#s_play{
	cursor			:	pointer;
	display			:	inline-block;
	transform		:	rotate( 90deg );
	-webkit-transform	:	rotate( 90deg );
//	-moz-transform		:	rotate( 90deg );
}
.bt_img{
	cursor			:	pointer;
	width			:	2vw;
	height			:	2vw;
	padding			:	0px;
	margin			:	0px;
	vertical-align		:	middle;
}

.bt_img:hover{
	opacity			:	1;
	height			:	1.5vw;
	transition		:	height 0.5s ease;
//	-webkit-transition	:	all 1s ease;
}


#s_counter{
	vertical-align		:	middle;
	font-size		:	3vw;
	padding			:	0px;
	margin			:	0px;
}
#s_framerate{
	vertical-align		:	bottom;
	font-size		:	1vw;
	padding			:	0px;
	margin			:	0px;
}

