@charset "UTF-8";
* {
	margin: 0;
	padding: 0;
	font-family: -apple-system, 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', meiryo, 'Helvetica Neue', sans-serif;
}
html {
    height: 100%;
	font-size:100%;
}
body{
	height:100%;
	margin: 0;
	background:url(../img/bg.png);	
}



#main.b{
	background:#000;
}
#header{
	height:4%;
	position:relative;
	margin-top:.5%;
	margin-bottom:.5%;
	
}
#header h1{
	height:100%;
	position:relative;
}

#header .title{
display: block;
    left: 1.5%;
    margin: auto;
    position: absolute;
    bottom: 0%;
    height: 100%;
}
#main{
	height:90%;
	width:96%;
	margin: 0 auto;
	padding: 1%;
	border-radius:1vw;
	-webkit-box-shadow: 0px 0px 5px 3px rgba(170,170,170,0.75);
	-moz-box-shadow: 0px 0px 5px 3px rgba(170,170,170,0.75);
	box-shadow: 0px 0px 5px 3px rgba(170,170,170,0.75);
	position:relative;
	background:#fff;
	font-size:1em;
}
#mute{
	position:absolute;
	height:100%;
	left:35%;
	top:0%;
}

#fullscreenSwitch{
	position:absolute;
	height:100%;
	left:25%;
	top:0%;
}
#main .logo{
	height: 45%;
    margin: 0 auto;
    padding-top: 5%;
    padding-bottom: 5%;
    display: block;
}

#login{
	
	}
#login {
	display:block;
	margin:0 auto;
	width:100%;
}

#login table{
	margin:0 auto;
}
#login p{
	margin:0 auto;
	display:block;
	width:100%;
	text-align:center;
}

#login th{
	text-align:right;

	width:40%;
}

#login td{
	margin:0 auto;
	width:60%;
}
#login .btn{
	margin:10px auto;
	padding:.5em 1em;
}

#header .btn{
	position:absolute;
	right:1%;
	top:0;
	font-size:.9em;
	padding:0 1em;
	bottom:0;
	height:100%;
	display:none;
}


#wrapper {
    position: relative;
    width: 100%;
	height:100%;
}



#content {
    position: absolute;
	margin:auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}


#wrapper:-webkit-full-screen{
	background:url(../img/bg.png);	
	position : absolute ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#wrapper:-moz-full-screen {
	background:url(../img/bg.png);	
	position : absolute ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#wrapper:-ms-fullscreen {
	background:url(../img/bg.png);	
	position : absolute ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#wrapper:fullscreen {
	background:url(../img/bg.png);	
	position : absolute ;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#wrapper:-webkit-full-screen #fullscreenSwitch{
	display:none;
}
#wrapper:-moz-full-screen #fullscreenSwitch{
	display:none;
}
#wrapper:-ms-fullscreen #fullscreenSwitch{
	display:none;
}
#wrapper:fullscreen #fullscreenSwitch{
	display:none;
}



.entrance{
	width:20%;
	float: right;
	margin:2em 1em 0 0;
}

.entrance button{
	width:100%;
	margin:0 0 .5em;
	font-size:0.7rem;
	padding:1rem;
}
.user{
	position:absolute;
	bottom:5%;
	left:3%
}

iframe{
	width:100%;
	height:100%;
	border:0 none;
}


canvas {
	background-color:#000;
	width:100%;
	height:100%;
	margin:0;padding:0;
}

.btn{
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border:2px solid #aaa;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#cccccc');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#f0f0f0', endColorstr = '#cccccc')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -ms-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -o-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#cccccc));
	background-image: -webkit-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: linear-gradient(top, #f0f0f0, #cccccc);
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;

}


.btn:hover{
	border:2px solid #009afb;

}

.btn:active{
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#f0f0f0');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#cccccc', endColorstr = '#f0f0f0')";
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	background-image: -moz-linear-gradient(top, #cccccc, #f0f0f0);
	background-image: -ms-linear-gradient(top, #cccccc, #f0f0f0);
	background-image: -o-linear-gradient(top, #cccccc, #f0f0f0);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#cccccc), to(#f0f0f0));
	background-image: -webkit-linear-gradient(top, #cccccc, #f0f0f0);
	background-image: linear-gradient(top, #cccccc, #f0f0f0);
}


.config{
	width:90%;
	margin:auto;
	height:95%;
	position:relative;
}
.config img{
	height: 15%;
	margin:0 auto 5%;
	padding-top:20px;
	display:block;
}
.config .start{
	position:absolute;
	right:0;
	bottom:0;
	padding:.5em 1em;
	font-size:14px;

}

.config dl{
	clear:both;
}
.config dt{
	width:25%;
	clear:both;
	float:left;
	margin:auto;	
}

.config dd{
	width:75%;
	margin:auto;	
	float:left;
	position:relative;
}

.config dd dl{
	font-size:.7em;
}


.radio_btn {
	display: -webkit-flex; /* Safari */
	display: flex;
}


.radio_btn input{
	display: none;
}
.radio_btn label{
	-webkit-align-content: stretch; /* Safari */
	align-content:         stretch;
	display: block;
	cursor: pointer;
	width:100%;
	margin: 0 1em 1em 0;
	padding: .7em .5em;
	border:2px solid #aaa;
	background-image: -moz-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -ms-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -o-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#f0f0f0), to(#cccccc));
	background-image: -webkit-linear-gradient(top, #f0f0f0, #cccccc);
	background-image: linear-gradient(top, #f0f0f0, #cccccc);
	color: #555e64;
	font-size: .8em;
	text-align: center;
	line-height: 1;
	transition: .2s;
	border-radius: 4px;
}

.radio_btn label:hover{
	border:2px solid #009afb;

}

.radio_btn input[type="radio"]:checked + label {
	border:2px solid #009afb;
	background-image: -moz-linear-gradient(top, #a1dafe, #ddf1fd);
	background-image: -ms-linear-gradient(top, #a1dafe, #ddf1fd);
	background-image: -o-linear-gradient(top, #a1dafe, #ddf1fd);
	background-image: -webkit-gradient(linear, center top, center bottom, from(#a1dafe), to(#ddf1fd));
	background-image: -webkit-linear-gradient(top, #a1dafe, #ddf1fd);
	background-image: linear-gradient(top, #a1dafe, #ddf1fd);
	color: #333;
}
/*radio*/

.radio input{
	display: none;
}
.radio label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 20px;
	padding: 10px 20px;
	border-radius: 2px;
	color: #3e4956;
	font-size: .8em;
	text-align: center;
	line-height: 1;
}
.radio label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #bdc3c7;
	border-radius: 50%;
}
.radio input[type="radio"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #009afb;
}
.radio input[type="radio"]:disabled + label {
	color:#ddd;

}
.radio input[type="radio"]:disabled + label:before{
	background: #eee;
}

.radio input[type="radio"]:disabled + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #fafafa;
}

/*checkbox*/

.checkbox input{
	display: none;
}
.checkbox label{
	display: inline-block;
	position: relative;
	cursor: pointer;
	margin-left: 20px;
	padding: 10px 20px;
	border-radius: 2px;
	color: #3e4956;
	font-size: .8em;
	text-align: center;
	line-height: 1.2;
}
.checkbox label:before{
	position: absolute;
	content: "";
	top: 50%;
	left: -10px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: #bdc3c7;
	border-radius: 10%;
}
.checkbox input[type="checkbox"]:checked + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 6px;
	height: 10px;
	margin-top: -9px;
	border-right: 3px solid #009afb;
	border-bottom: 3px solid #009afb;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	
}
.checkbox input[type="checkbox"]:disabled + label {
	color:#ddd;

}
.checkbox input[type="checkbox"]:disabled + label:before{
	background: #eee;
}

.checkbox input[type="checkbox"]:disabled + label:after {
	position: absolute;
	content: "";
	top: 50%;
	left: -4px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #fafafa;
}



.select{
	margin-bottom:20px;}
.select select {
	font-size: .8em;
	padding: .5em 2em .5em .5em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 2px solid #009afb;
	border-radius:4px;
	line-height:1;
	background: #a1dafe;
	background: url(../img/select-box-arrow.png) right 50% no-repeat, -webkit-linear-gradient(top, #fff 0%,#efebe1 100%);
	background: url(../img/select-box-arrow.png) right 50% no-repeat, linear-gradient(to bottom, #fff 0%,#efebe1 100%);
	background-size: 20px, 100%;
}


.ui-slider-wrapper { position: relative;  width: 90%;
margin-left:1em;}
.ui-slider-wrapper .ui-slider-horizontal { width: 100%; }

.ui-slider-labels { position: absolute; border: 1px solid transparent; }
.ui-slider-label-ticks { border: 1px solid transparent; position: absolute; white-space: nowrap; }
.ui-slider-label-ticks span { font-size: 0.7em; min-width: 1.2em; }

.ui-slider-wrapper.horizontal { height: 4.5em; }
.horizontal .ui-slider-labels { left: 0; right: 0; top: 0.7em }
.horizontal .ui-slider-label-ticks { width: 1.2em; height: .8em; text-align: center; border-left: 1px solid #999; }
.horizontal .ui-slider-label-ticks span { position: relative; display: inline-block; margin-left: -1.9em; top: .8em; }

.ui-slider-wrapper.vertical { width: 4.5em; }
.vertical .ui-slider-labels { top: 1px; bottom: 0; left: 0.7em; }
.vertical .ui-slider-label-ticks { height: 1.2em; width: 0.8em; border-bottom: 1px solid #999; }
.vertical .ui-slider-label-ticks span { position: relative; display: inline-block; margin-left: 1em; top: .6em; }
#tabs .ui-tabs-panel {
    overflow: auto;
    height: 10em;
}

#flex{
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
justify-content: space-between;
	
}
#flex li{
	list-style-type: none;
    background: #eee;
	color: #888;
    margin: 1em 0;
    padding:  0.5em;
	border-radius: .5em;
}


#flex li.check{
    background:#BEFF9F;
	color: #158200;
}

.fade {  
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}  
#tabs{
	position: relative;
}


#tabs ul.navi{
	position: absolute;
	right: 0;
	margin: auto;
	width: 25%;
}

#tabs ul.navi li{
	border: 2px solid #ddd;
	margin-bottom: .5em;
	border-radius: .2em;
	list-style-type: none;
	padding-left: .5em;
}


#tabs ul.navi li.slct{
	border-color:#009afb;
}
#tabs ul.navi li a{
	text-decoration: none;
	padding: .5em;
	display: inline-block;
	width: 9em;
	color: #000;
}

#tabs .content{
	position: absolute;
	left: 0;
	margin: auto;
	width:73%;
	
}
#tabs .content>div{
	border: 1px solid #ddd;
	height: 18em;
	padding: 1em;
	border-radius: 1em;
	
}


#tabs .content>div .box{
	height: 13em;
	overflow: auto;
	
}

#tabs .content>div h2{
	border-bottom: 1px solid #ddd;
	margin-bottom: 1em;
	
}
#tabs .content>div input{
	    font-family: Verdana,Arial,sans-serif;
    font-size: 1em;
}

#tabs .content>div textarea{
	font-size: 1.2em;
	width: 95%;
}

#tabs .content>div td p{
	font-size: .8em;
	text-indent: 3em;
}

#tabs .content>div td{
	font-size: 1.2em;
}

#record_data{
	position: absolute;
	bottom: 0;
}
.hide {display:none;}
#record_date,#last_update{
	height: 1.8em;
}

#choice{
	position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    height: 8em;
    right: 0;
    left: 0;
    width: 50%;

}
#choice button{
	position: absolute;	
	font-size: .8em;
	width: 40%;
	margin: auto;
	padding: 10px 0;
	right:0;
}
#choice button:first-child{
	left: 0;
	right: auto;
}
#choice .recdate{
	position: absolute;
	margin: auto;
	bottom: 0;
}
#score{
	width:75%;
	height:80%;
	float: left;
	margin:20px 0 0 10px;

}


#score h4{
	border-bottom: 1px solid #aaa;
	clear: both;
	text-indent: 1rem;
	font-size: .8rem;
	font-weight: normal;
	margin-top: .5rem;
}
#score h4::before{

	content: "■";
}
#score h3{
	font-size: .8rem;
	text-indent: .5em;
	letter-spacing: .1em;
	position: relative;
}
#score h3 span{
	font-size: .7rem;
	font-weight: normal;
	position: absolute;
	right: 0;
	background: #eee;
	border: 1px solid #ddd;
	border-radius: 3px;
	text-align: center;
	text-indent: 0;
	padding: 0 5px
}
#score{
}
#score span{
	font-family: 'Quicksand' !important;
	font-size: .8em;
	margin: 0 5px;
}
#score .list{
	border: 1px solid #aaa;
	margin:0 auto 20px;
	padding: 10px;
	overflow: auto;
	border-radius: 6px;
	height: 100%;
	font-family: 'Quicksand' !important;
	background: #fafafa;}
#score .list p,#score .list dl{
    margin: 0 0 0 1rem;
    font-size: 0.75rem;
}
#score .list dl::after{
	display: block;
	clear: both;
	content: "";
}
#score .list dt,#score .list dd{
	float: left;
	margin: 0 10px 0 0 ;
	line-height: 2em;
	vertical-align: bottom;
}
#score .list table {
	width: 90%;
	margin: 0 20px;
	background: #fff;
}

#score thead th{
    font-family: "Lucida Grande",Verdana,Arial,sans-serif;
    font-size: 0.55rem;
    line-height: 1;
    padding: 5px 5px;
    vertical-align: top;
    border: 1px solid #aaa;
    background: #ccc;
}
#score th,#score td{
font-family: "Lucida Grande",Verdana,Arial,sans-serif;
    font-size: .6rem;
    line-height: 1;
    padding: 8px 5px;
    vertical-align: top;
    text-align: left;
    border: 1px solid #aaa;
}
#score th{
	background-repeat:no-repeat;
	background-position: 5px center;
	background-color:#eee;
    margin: 0;
	padding-left:25px;
}