html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline
}
html {
	line-height: 1
}
ol, ul {
	list-style: none
}
a img {
	border: none
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
	display: block
}
html {
	font: .85em/1 'Aldrich', Helvetica, Arial, sans-serif;
	background-color: #f2f2f2;
	color: #222
}
a {
	text-decoration: none
}
#page {
	max-width: 640px;
	margin: 0 auto
}
#viewport {
	margin: 0 auto;
	position:relative;
}
img{
	width:100%;
}
.slide video{
	width:240px;
}
.option{
	position:absolute;
	z-index:100;
	font-size:1.2em;
	color:#a8f4f9;
	background-color:#000;
	border-radius:10px;
	padding:3px 10px;
	position:absolute;
	bottom:10px;
	right:20px;
}
.option i:hover{
	text-decoration:underline;
}
.sound:after{
	content:"音声ON";
}

.fullscreen:after{
	content:"全画面表示";
}

.slide {
	display: none
}
.slide img {
	height: auto;
	display: block
}
.slide.jbs-current {
	display: block
}
#controls {
	margin: 10px 0 20px;
	display:flex;
	flex-wrap:wrap;
	width:100%;
}
#controls li {
	flex-basis:25%;
}
.goto-slide {
	display: flex;
	border: 2px solid #ccc;
	box-sizing:border-box;
	border-radius: 8px;
}
.goto-slide img{
	width:100%;
	height:100%;
}
.goto-slide {
	position:relative;
}
.goto-slide span{
	background-color: #f76107;
	display:block;
	width:87%;
	height:1em;
	overflow:hidden;
	line-height:1.5;
	color:#FFF;
	position:absolute;
	margin:10px auto;
	padding:5px 10px;
	bottom:-10px;

}
.goto-slide:hover span{
	display:none;
}
#effect-switcher {
	clear: both
}
#effect-switcher h2 {
	border-bottom: solid 1px #555;
	margin: 0 0 10px
}
#effect-list {
	overflow: hidden
}
#effect-list li {
	display: inline
}
.effect, .effect:hover {
	display: block;
	float: left;
	margin: 10px 10px 0 0;
	border: solid 1px black;
	border-radius: 7px;
	padding: 10px 12px 6px;
	text-decoration: none;
	background-color: #efefef;
	-webkit-box-shadow: inset 0px 0px 8px #aaa;
	-moz-box-shadow: inset 0px 0px 8px #aaa;
	box-shadow: inset 0px 0px 8px #aaa;
	position: relative
}
.effect.current, .effect:hover.current {
	background-color: #6610c6;
	color: #efefef
}
.effect span, .effect:hover span {
	font-size: .7em;
	position: absolute;
	top: -8px;
	right: -4px;
	background-color: red;
	border-radius: 6px;
	border: solid 1px #555;
	color: white;
	padding: 3px 4px 2px;
	display: inline-block
}
#time-indicator{
	margin: 20px 0;
	width: 0px;
	height: 3px;
	background-color: #6610c6
}

/* 10.0  Media Queries */
@media screen and (min-width: 470px) {
.slide video{
	width:480px;
}

.goto-slide.current img{
	opacity:0.2;
}
}
@media screen and (min-width: 600px) {
.slide video{
		width:640px;
		height:360px;
	}
.goto-slide.current span span{
	height:auto;
}
}