/* -moz-border-radius */

div.player {
	-moz-border-radius: 3px
}

/* -moz-box-shadow */

div.left-box, div.player {
	-moz-box-shadow: rgba(113, 135, 164, .258824) 0 0 12px 3px
}

/* -webkit-border-radius */

div.player {
	-webkit-border-radius: 3px
}

/* -webkit-box-shadow */

div.left-box, div.player {
	-webkit-box-shadow: rgba(113, 135, 164, .258824) 0 0 12px 3px
}

/* background */

#floatbox .close {
	background: #666
}
#full-screen, #mute, #play-pause, #showBtn, div.player {
	background: none
}
#video-controls .speed-button button, .speed-button ul li {
	background: #333
}
.active {
	background: rgba(128, 128, 128, .3) !important
}
.active-speed {
	background: #eee !important
}
.index-speed {
	background: #333 !important
}
.link button, body, video {
	background: #fff
}
div.btn-question {
	background: #f06
}
div.chapter {
	background: rgba(255, 255, 255, 1)
}
div.chapter, div.progress {
	background: rgba(255, 255, 255, .4)
}
div.left-box {
	background: #eee
}
p.intro {
	background: rgba(0, 0, 0, .3)
}
p.sub {
	background: rgba(0, 0, 0, .8)
}
button.showBtn {
	background: none;
}

/* border */

#video-controls .speed-button button {
	border: 0
}
#video-controls button, #video-controls ul {
	border: none
}
.link button {
	border: 1px solid #f06
}

/* border-bottom */

.speed-button ul li {
	border-bottom: 1px solid #fff
}

/* border-radius */

#floatbox .close {
	border-radius: 6px
}
div.btn-question {
	border-radius: 4px
}
div.left-box {
	border-radius: 8px
}
div.player, div.progress {
	border-radius: 3px
}

/* bottom */

.link {
/*	bottom: 30px*/
}
div.footer {
	bottom: 0
}
i.playmark, i.waiting  {
	bottom: -100%
}

/* box-shadow */

div.left-box, div.player {
	box-shadow: rgba(113, 135, 164, .258824) 0 0 12px 3px
}

/* clear */

div.chapter, div.footer {
	clear: both
}

/* color */

#floatbox .close, #video-controls .speed-button button, .speed-button ul li, div.btn-question, div.btn-question a, i.playmark, i.waiting , p.intro, p.sub {
	color: #fff
}
#full-screen, #mute, #play-pause, #showBtn {
	color: #333
}
.active-speed {
	color: #333 !important
}
.index-speed {
	color: #fff !important
}
.link button {
	color: #f06
}
body {
	color: #555
}
div.footer {
	color: #666
}

/* cursor */

#floatbox .close, #video-controls .speed-button button, #video-controls ul li:hover, .link button, div.chapter ul li, i.playmark:hover, img.normal:hover, img.zoom:hover {
	cursor: pointer
}
#floatbox .handle {
	/*cursor: move*/
}
#video-controls li.time-box {
	margin-left: 0;
	cursor: default !important;
	line-height: 1.4;
}

/* display */

#video-controls .speed-button button, i.playmark, i.waiting  {
	display: block
}
.btn-question, .speed-selector input {
	display: none
}
div.logo-box, div.title-box {
	display: table-cell
}

/* float */

#floatbox .close, div.btn-question {
	float: right
}
#floatbox .handle img, #video-controls ul, #video-controls ul li, .speed-button, .speed-button ul li, div.header .title, div.logo-box, p.menu-title, p.slide-num {
	float: left
}
div.right-box {
	float: none
}

/* font-size */

#video-controls .speed-button button {
	font-size: 11px
}
.ctime, .duration, div.chapter, div.chapter ul, div.chapter-tilte, p.sub {
	font-size: 12px
}
.link button {
	font-size: 18px
}
.speed-button ul li, p.intro {
	font-size: 10px
}
div.btn-question {
	font-size: 80%
}
div.footer, p.menu-title, span.link-txt {
	font-size: 14px
}
div.header .title {
	font-size: 20px
}
i.playmark, i.waiting  {
	font-size: 6em
}

/* font-weight */

#floatbox .close {
	font-weight: 200
}
.link button, div.btn-question {
	font-weight: 500
}
div.chapter-tilte {
	font-weight: 600
}
div.footer, div.header .title {
	font-weight: 100
}
i.playmark, p.intro, p.sub {
	font-weight: 400
}

/* height */

#video-controls ul li img {
	height: 16px
}
.link button {
	height: 60px
}
.link button img {
	height: 40px
}
div.chapter, div.chapter ul {
	height: 240px
}
div.header, div.title-box {
	height: 60px
}
div.player {
	height: auto
}
div.progress {
	height: 22px
}
i.playmark, i.waiting  {
	height: 20%
}
video#slide {
	height: auto !important
}

/* left */

.link {
	left: 350px
}
.speed-button ul li ul {
	left: -46px
}
.speed-button ul li ul li {
	left: 45px
}
i.playmark, i.waiting  {
	left: -100%
}
p.intro {
	left: 10px
}

/* line-height */

#video-controls .speed-button button {
	line-height: normal
}
.speed-button ul li, p.intro, p.sub {
	line-height: 1.4
}
div.chapter ul {
	line-height: 1.6em
}
div.footer p {
	line-height: 1.4em
}
div.header .title {
	line-height: 1.2em
}

/* list-style */

#video-controls ul, .speed-button ul {
	list-style: none
}

/* list-style-type */

#video-controls .speed-button button, .speed-selector input {
	list-style-type: none;
}
.speed-selector input {
	list-style-type: none;
	display: none;
}

.spped-selecter li label {
	width: 60px;
    float: left;
    padding: 4px 0 0 0;
    line-height: 15px;
    font-family: helvetica, arial;
    font-size: 11.5px;
    color: white;
    margin-left: 5px;
    cursor: pointer;
}

/* margin */

#video-controls .speed-button button, #video-controls button, .link button, .speed-button ul, .speed-button ul li, body, div.chapter, div.chapter-tilte, div.header, div.right-box {
	margin: 0
}
#video-controls, div.player {
	margin: 0 auto
}
div.chapter {
	margin: 0 auto 10px
}
div.progress {
	margin: 0 10px 0 370px
}
i.playmark, i.waiting  {
	margin: auto
}

/* margin-left */

#video-controls ul li {
	margin-left: 1.2%;
	list-style: none;
}
div.right-box {
	margin-left: auto
}
div.title-box {
	margin-left: 17%
}
p.menu-title {
	margin-left: 3%
}
p.slide-num {
	margin-left: 10%
}
p.sub {
	margin-left: 20px
}

/* margin-right */

div.btn-question {
	margin-right: 20px
}
div.logo-box {
	margin-right: 1em
}
div.right-box {
	margin-right: auto
}

/* margin-top */

#floatbox .close {
	margin-top: -3px
}
#floatbox .handle img {
	margin-top: -2px
}
.speed-button {
	/* margin-top: -5px; */
	margin-top: -6px;
}
div.slide {
	margin-top: 10px
}
div.slide {
	margin-top: 24px
}

/* max-height */

div.chapter {
	max-height: 220px
}
div.header .title, div.title-box, img.logo {
	max-height: 100%
}
div.left-box {
	max-height: 300px
}
div.logo-box {
	/* max-height: 60px; */
}
#logo {
    max-height: 60px;
}

/* max-width */

body, div.player {
	max-width: 1280px
}
div.chapter {
	max-width: 90%
}
img.logo {
	max-width: 100%;
	max-height: 60px;
}

/* min-height */

#video-controls {
	padding-top: 10px;
	padding-bottom: 10px;
	height: 35px
}

/* min-width */

.speed-button ul li {
	min-width: 27px
}
div.left-box {
	min-width: 18em
}

/* opacity */

#video-controls {
	opacity: 1
	width: 100%;
	padding-left: 0.5em;
    padding-right: 0.5em;
}
img.btn-pause:hover, img.btn-play:hover {
	opacity: 0.7
}

/* outline */

div.left-box video, div.right-box video {
	outline: #ccc solid 1px
}

/* overflow */

div.chapter ul {
	overflow: auto
}

/* padding */

#floatbox {
	padding: 0px
}
#floatbox .close, .speed-button ul li, div.chapter ul li, span.link-txt {
	padding: 3px 6px
}
#video-controls .speed-button button, #video-controls button, .link button, .speed-button ul, body, div.left-box video, div.right-box, div.right-box video, div.slide, input[type=range] {
	padding: 0
}
.link button {
    width: 100%;
    text-align: left;
    border: none;
    color: #fff;
/*    background: #f06;*/
    background: #ff6f00;
    text-align: center;
}
#video-controls ul {
	padding: 7px 0;
}
.video-box, div.left-box {
	padding: 10px
}
div.btn-question, p.intro {
	padding: 6px 12px
}
div.chapter, div.chapter-tilte {
	padding: 10px 6px 24px
}
div.header {
	padding: 10px 20px
}
div.left-box {
	padding: 5px
}
div.progress {
	padding: 5px 10px
}

/* padding-left */

div.footer p {
	padding-left: 80px
}

/* padding-top */

div.slide {
	padding-top: 30px
}

/* position */

#floatbox .handle, .speed-button ul li, div.player, div.progress, div.right-box, div.video {
	position: relative
}
#floatbox, .speed-button ul li ul, i.playmark, i.waiting , p.intro {
	position: absolute
}

/* right */

i.playmark, i.waiting  {
	right: -100%
}

/* text-align */

.speed-button ul li {
	text-align: center;
}
.pwTxt {
	text-align: center !important;
}

/* text-decoration */

#video-controls .speed-button button, #video-controls ul, .speed-button ul li, div.btn-question a {
	text-decoration: none
}

/* text-shadow */

i.playmark {
/*	text-shadow: 2px 2px 10px #ccc, -2px 2px 10px #ccc, 2px -2px 10px #ccc, -2px -2px 10px #ccc;*/
    text-shadow: 1px 1px 3px #ccc, -1px 1px 3px #ccc, 1px -1px 3px #ccc, -1px -1px 3px #ccc;
    opacity: 0.85;
}

.fa, .fas, .far {
    font-size: 1.2rem;
    color: #333;
}
#btn-play, #btn-pause {
	font-size: 1.4rem;
}

/* top */

#floatbox {
	top: 60px
}
.play-time-fixed {
	top: -8px!important
}
.speed-button ul li ul {
	top: 65px
}
.speed-button ul li ul li {
	top: -140px
}
.speed-button ul li ul li {
	top: -182px
}
i.playmark, i.waiting {
	top: -100%
}

/* vertical-align */

.speed-selector input, img.logo, span.link-txt {
	vertical-align: middle
}

i.allow {
    vertical-align: initial;
    margin-right: 0.5em;
}

/* width */

#floatbox {
	width: 18em
}
#floatbox .handle img, #video-controls ul li img {
	width: 16px
}
#seek-bar {
	width: 79%
}
#video-controls li.seek-box {
	/* width: 23%; */
	width: 28%;
}
#video-controls li.time-box {
	width: 22%;
	text-align: center;
}
#video-controls li.volume-box {
	width: 120px;
	max-width: 16%;
	display: table-cell;
	vertical-align: middle;
}
div.logo-box {
	max-width: 14%;
	display: table-cell;
	vertical-align: middle;
	line-height: 60px;
}
#video-controls ul, body, div.player, div.right-box, video#slide {
	width: 100%
}
.menu-btn-text {
    line-height: 16px;
}
#volume-bar {
/*	width: 60%;*/
	width: 53%;
}
.speed-button ul {
	width: 10%
}
div.title-box {
	width: 80%
}
i.playmark, i.waiting  {
	width: 80px;
    font-size: 80px;
    text-align: center;
}
i.waiting  {
	color: #666;
}
p.intro {
	width: 260px
}
div.footer {
	width: 100%;
    margin: 0;
    padding: 0;
}
div.footer p {
    padding-left: 1em;
    margin: 0;
    width: 100%;
}
.link {
	width: 100%;
	left: 0;
/*	bottom: 0;*/
}
div.footer p.desc-txt, div.footer p.sub {
    padding-left: 1%;
    padding-right: 1%;
    width: 98%;
}
div.footer p.sub {
    font-size: 14px;
    line-height: 30px;
}
div.footer p.desc-txt {
    font-size: 12px;
    line-height: 20px;
    display:table-cell;
    vertical-align:middle;
}




/* z-index */

.link, p.sub {
	z-index: 3
}
div.left-box {
	z-index: 100
}

/* free */
.free {
	height: 40px;
	border-bottom: 0.75px dotted #ccc;
/*	padding: 3px;*/
}
.free-box {
	/*	padding: 6px;*/
	padding: 8.5px 3px 8.5px 6px;
}
.free-title {
	padding: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	vertical-align: middle;
	line-height: 24px;
}
#freeword {
	width: 240px;
	height: 22px;
	padding: 0 12px;
	margin-left: 4px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.btn-search {
	text-decoration: none;
	background: #035ea5;/*背景色*/
	border-radius: 4px;/*角の丸み*/
	font-weight: bold;
	height: 24px;
	font-size: 12px;
	color: #fff;
	line-height: 1.8;
}
.btn-search .fa-search {
	width: 0.8rem;
}
.btn-search:hover {
	background: #4b9fe0;
	cursor: pointer;
}
/* tag */
.tags {
	height: 40px;
	border-bottom: 0.75px dotted #ccc;
/*	padding: 3px;*/
}
.tag-box {
	padding: 8.5px 3px 8.5px 6px;
}
.tag-header {
	padding: 4px;
	font-size: 14px;
    font-weight: 600;
    color: #333;
    vertical-align: middle;
    line-height: 24px;
}
.tag {
/*	padding: 6px;*/
	padding: 4px 6px 6px 4px;
    background: #efefef;
    border: 0.5px solid #999;
    border-radius: 6px;
    margin-right: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #333;
    vertical-align: middle;
    line-height: 24px;
}
.tag:hover {
	cursor: pointer;
}
.modal.tag-list .modalBody {
	display: block;
    position: fixed;
    background: rgba(255,255,255,0.9);
    width: 80%;
    left: 0;
    top: 0;
    right: 0;
    height: 80%;
    bottom: 0;
    margin: auto;
}
.modal.tag-list .modal-header {
    background: none;
    color: #333;
	text-align: right;
}
.modal.tag-list h1 span.selected {
	font-size: 18px;
	padding: 6px;
    background: #efefef;
    border: 0.5px solid #999;
    border-radius: 6px;
}
.modal.tag-list h1 span{
	font-size: 14px;
}
.modal.tag-list .modal-header .btn-close{
	padding: 6px 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
}
.modal.tag-list .form-wrapper {
	padding: 14px;
	font-size: 14px;
    background: none;
    color: #333;
}
ul.modal-tag-ul {
	padding: 0 14px 14px;
}
ul.modal-tag-ul li {
	list-style: none;
}
ul.modal-tag-ul li a {
	display: block;
	margin-bottom: 10px;
	padding: 10px 10px 10px;
	text-decoration: none;
	color: #333;
}
ul.modal-tag-ul li a:hover {
	background: #999;
	color: #fff;
}
ul.modal-tag-ul li a h5{
	font-size: 16px;
	font-weight: 600;
}
ul.modal-tag-ul li a p {
    margin-top: 10px;
    font-size: 14px;
    margin-left: 24px;
	line-height: 1.4;
}

img.poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

/* media query */
@media screen and (max-width:1280px) {
    /*　画面サイズが1280pxまではここを読み込む　*/
	.menu-btn-text-head {
		display: inline;
	}
}
@media screen and (max-width:800px) {
    /*　画面サイズが800pxまではここを読み込む　*/
	.menu-btn-text-head {
		display: none;
	}
}
@media screen and (max-width:720px) {
    /*　画面サイズが720pxまではここを読み込む　*/
	#seek-bar {
		width: 72%;
	}
}