*{
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	margin: 0px;
	padding: 0px;
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer */
	-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
	-webkit-user-select: none; /* Chrome, Safari, and Opera */
	-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
	user-select: none;
	text-decoration: none;
}

body{
  word-break: break-all;
}

.title_area > a:link, .title_area > a:visited, .title_area > a:hover, .title_area > a:active {
  color: rgb(0, 0, 0);
}

#container{
	background-color:#eee;
	width: 912px;
	display: block;
	margin: 0 auto;
	position:relative;
}

#Box{
	background-color: #F6F6F6;
}

#img_area{

}

#nav{
	position:relative;
	width: 750px;
	height: 140px;
	margin: 0 auto;
	margin-top: 10px;
}

.direction_text{
	font-size: 36px;
	line-height: 60px;
	color: #888;
}

#RangeBox{
	position:absolute;
	background-color: #eee;
	width: 750px;
	height: 15px;
	margin: 30px 0px 30px;
}

#img_range{
	display: block;
	margin: 0 auto;
	width: 500px;
	height: 10px;
	background-color: rgba(204, 204, 204, 1.0);
}

[type="range"] {
	-webkit-appearance:none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
	width: 100%;
	height: 42px;
	vertical-align:middle;
	background-color:transparent;
}
input[type=range]::-ms-track {
	background-color: transparent;
	width: 100%;
	height: 12px;
	border-color: transparent;
	color: transparent;
}
[type="range"]::-webkit-slider-thumb {
	-webkit-appearance:none;
	-moz-appearance: none;
	appearance: none;
	cursor:pointer;
	position:relative;
	border: none;
	width: 42px;
	height: 42px;
	background-color:rgba(0, 191, 255, 1.0);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
[type=range]::-moz-range-thumb {
	appearance: none;
	cursor:pointer;
	position:relative;
	border: none;
	width: 42px;
	height: 42px;
	background-color:rgba(0, 191, 255, 1.0);
	border-radius:50%;
}
input[type=range]::-ms-thumb {
	border: none;
	height: 42px;
	width: 42px;
	border-radius: 50%;
	background: rgba(0, 191, 255, 1.0);
}
input[type=range]:focus::-ms-fill-lower {
	background: #888;
}
input[type=range]:focus::-ms-fill-upper {
	background: #ccc;
}
[type="range"]:focus,
[type="range"]:focus::-webkit-slider-thumb,
[type="range"]:active,
[type="range"]:active::-webkit-slider-thumb {
	outline:none;
}

/* 動き→ */
.manual {
	position: absolute;
	color: rgb(255, 255, 255);
	height: 750px;
	width: 750px;
	z-index: 1;
	top: 0px;
	left: 0px;
}

.progress {
	background-color: rgba(0, 0, 0, 0.7 );
	color: rgb(255, 255, 255);
	height: 750px;
	position: absolute;
	width: 750px;
	z-index: 2;
	top: 0px;
	left: 0px;
}
.progress-bar {
	border-top: 5px solid rgb(160, 160, 160);
	position: absolute;
	top:50%;
	width: 0%;
}
.progress-text {
	font-family: "Menlo", "Consolas", monospace;
	font-size: 16px;
	margin-top: 10px;
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
}
.progress-complete .progress-bar {
	border-top-color: rgb(255, 255, 255);
}

.header_container{
	display: flex;
	background-color: #fff;
	justify-content: space-between;
	height: 35px;
}

#supervision{
	padding: 10px 10px 5px;
	color: #666;
}

.title_area{
	display: flex;
	align-items: flex-end;
	width: 750px;
	height: 60px;
	margin: 0 auto;
}

.title{
	flex: 1;
	font-size: 36px;
	font-weight: bold;
}

.source{
	font-size: 20px;
	width: 105px;
	height: 35px;
	background-color: rgb(247, 204, 95);
	border-radius: 5px;
	text-align: center;
	margin-bottom: 5px;
	line-height: 35px;
}

.img_area{
	position:relative;
	width: 750px;
	height: 750px;
	margin: 0 auto;
}

.source_title{
	font-size: 30px;
	padding-left: 10px;
}

.source_list_area{
	width: 750px;
	margin: 20px auto;
	padding-bottom: 20px;
}

ul, ol {
  padding-left:20px;
}

.noDisplay{
	display: none;
}

@media screen and (min-width : 768px){
}

@media screen and (min-width : 1024px) {
}