@charset "UTF-8";

/**
 * generic
 * サイトの基本となるスタイルを指定
 */

.seekbar {
    width: 100%;
}

.movie-area {
    position: relative;
}

video {
    width: 100%;
}

.control {
    position: absolute;
    bottom: -48px;
    padding: 10px;
    width: 100%;
    padding: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: -webkit-gradient(linear, left top, left bottom, from(#5C5D66), to(#4A4B56));
    background: -webkit-linear-gradient(#5C5D66 0%, #4A4B56 100%);
    background: -o-linear-gradient(#5C5D66 0%, #4A4B56 100%);
    background: linear-gradient(#5C5D66 0%, #4A4B56 100%);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.control .control__box {
    display: -webkit-box;
    display: -ms-flexbox;
    width: 100%;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
}

.control .play-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.btn {
    position: relative;
    width: 35px;
    height: 35px;
    border: none;
    background: none;
    background: -webkit-gradient(linear, left top, left bottom, from(#E4E4E4), to(#CFCFCF));
    background: -webkit-linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    background: -o-linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    background: linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    border-radius: 8px;
    color: #5C5D66;
    font-size: 24px;
}

.btn:hover {
    background: -webkit-gradient(linear, left top, left bottom, from(#b9ddfa), to(#92accc));
    background: -webkit-linear-gradient(#b9ddfa 0%, #92accc 100%);
    background: -o-linear-gradient(#b9ddfa 0%, #92accc 100%);
    background: linear-gradient(#b9ddfa 0%, #92accc 100%);
}

.btn:active {
    border: none;
}

button:focus {
    outline: 0;
}

.btn__play {
    width: 70px;
}

.btn__icon::before {
    font-family: fontawesome;
    font-size: 20px;
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
}

#play::before {
    content: '\f04c';
}

#top::before {
    content: '\f048';
}

#full::before {
    content: '\f0b2';
}

#play.toggle::before {
    content: '\f04b';
}

.btn__play {
    width: 60px;
}

.btn__top {
    display: block;
    width: 35px;
    margin-left: 5px;
}

#mute::before {
    content: '\f026';
    font-family: fontawesome;
    font-size: 20px;
}

#volup::before {
    content: '\f028';
    font-family: fontawesome;
    font-size: 20px;
}

#voldown::before {
    content: '\f027';
    font-family: fontawesome;
    font-size: 20px;
}

.time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-shrink: 0;
    margin: 0 10px;
    font-size: 12px;
    -ms-flex-negative: 1;
}

.time__text {
    font-size: 13px;
}

.time__text--cl {
    color: #FFF !important;
}


.time__text--mg {
    margin: 0 5px;
}

.seekBar-area {
    width: 100%;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
}

.movie-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 55px;
}


#progress-wrap {
    display: flex;
    height: 10px;
    flex: 1;
    margin-left: 20px;
    margin-right: 10px;
}

#progress-out {
    width: 100%;
    height: 100%;
    background-color: #808080;
    -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
}

#progress-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 auto 0 0;
    width: 0;
    height: 100%;
    background-color: #00B8FF;
    border-radius: 3px;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-transition: 0.1s;
    -o-transition: 0.1s;
    transition: 0.1s;
}

#progress-in .progress-pointer {
    position: absolute;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    display: block;
    width: 20px;
    height: 40px;
    border-radius: 50%;
    background: -webkit-gradient(linear, left top, left bottom, from(#E4E4E4), to(#CFCFCF));
    background: -webkit-linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    background: -o-linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    background: linear-gradient(#E4E4E4 0%, #CFCFCF 100%);
    right: -10px;
    top: -15px;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.dis-none {
    display: none;
}

/* @media screen and (max-width: 767px) {
    .control {
        display: none;
    }

    .movie-area {
        margin-bottom: 0;
    }

    .disp-pc {
        display: none;
    }

    .disp-sc {
        display: block;
    }

    #main>div{
        width: 100%;
    }

    #main video{
        width: 90%;
        height: auto;
        margin: 0 auto;
    }


} */