@charset "utf-8";

/* フォント */
/* Windows 用 Medium 指定の游ゴシック */
@font-face {
    font-family: "Yu Gothic M";
    src: local("Yu Gothic Medium");
}
/* font-weight: bold の時は通常どおり Bold 書体を使わせる */
@font-face {
    font-family: "Yu Gothic M";
    src: local("Yu Gothic Bold");
    font-weight: bold;
}

/* ゴシック体指定 */
*:not(.glyphicon) {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* ステータスラベル */
.label.label-status-planned {
    background-color: #2fa084;
}
.label.label-status-accepting {
    background-color: #7cd1ef;
}
.label.label-status-passed_deadline {
    background-color: #f59e00;
}
.label.label-status-on_going {
    background-color: #FF5722;
}
.label.label-status-closed {
    background-color: #286090;
}
.label.label-status-on_demanded {
    background-color: #EC87C0;
}
.label.label-status-canceled {
    background-color: #761c19;
}

/* モーダルスタイル */
div.notice-modal div.modal-header,
div.course-setting-modal div.modal-header,
div.course-show-modal div.modal-header,
div#report-modal div.modal-header,
div#report-show-modal div.modal-header,
div#record-modal div.modal-header {
    border-bottom: 1px solid #e5e5e5;
}
div.notice-modal div.modal-body {
    height: calc(90vh - 180px);
    overflow-y: auto;
}
div.course-setting-modal div.modal-body {
    height: calc(100vh - 270px);
    overflow-y: auto;
}
div.course-show-modal div.modal-body,
div#report-modal div.modal-body,
div#report-show-modal div.modal-body,
div#record-modal div.modal-body {
    height: calc(90vh - 140px);
    overflow-y: auto;
}
div.notice-modal div.modal-footer,
div.course-setting-modal div.modal-footer,
div.course-show-modal div.modal-footer,
div#report-modal div.modal-footer,
div#report-show-modal div.modal-footer,
div#record-modal div.modal-footer {
    border-top: 1px solid #e5e5e5;
}

/* 演習割合用円グラフ */
.donut-chart-wrapper {
    position: relative;
    margin: 10px 0 0 50px;
    height: 170px;
}
.donut-chart {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #7cd1ef;
    position: absolute;
    top: 0;
    left: 0;
}
.donut-hole {
    width: 90px;
    height: 90px;
    text-align: center;
    padding-top: 22px;
    border-radius: 50%;
    background-color: #fcfcfc;
    position: absolute;
    top: 30px;
    left: 30px;
}
.donut-data1 {
    width: 75px;
    height: 150px;
    border-radius: 0 75px 75px 0;
    background-color: #EC87C0;
    position: absolute;
    top: 0;
    left: 75px;
}
.donut-data2 {
    width: 75px;
    height: 150px;
    border-radius: 75px 0 0 75px;
    background-color: #EC87C0;
    position: absolute;
    top: 0;
    left: 0;
}
.donut-cover1 {
    width: 75px;
    height: 150px;
    border-radius: 0 75px 75px 0;
    background-color: #7cd1ef;
    position: absolute;
    top: 0;
    left: 75px;
    transform-origin: left center;
}
.donut-cover2 {
    width: 75px;
    height: 150px;
    border-radius: 75px 0 0 75px;
    background-color: #7cd1ef;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: right center;
}

/* 講師カード */
div.lecturer-card-wrapper {
    display: table;
}
div.lecturer-card {
    padding: 10px 30px 10px 140px;
    position: relative;
    height: 135px;
    width: calc(50% - 4px);
    display: table-cell;
}
div.lecturer-card.sub-lecturer {
    padding-left: 110px;
    height: 105px;
}

div.lecturer-card div.lecturer-card-image {
    position: absolute;
    top: 6px;
    left: 6px;
}

div.lecturer-card div.lecturer-card-image img {
    margin: 0;
    padding: 0;
    border-radius: 5px;
}

div.lecturer-card div.lecturer-card-name {
    font-weight: bold;
    font-size: large;
}
div.lecturer-card.sub-lecturer div.lecturer-card-name {
    font-size: medium;
}

div.lecturer-card div.lecturer-card-info {
    font-size: small;
}
div.lecturer-card.sub-lecturer div.lecturer-card-info {
    font-size: x-small;
}

@media screen and (max-width: 600px) {
    div.lecturer-card-wrapper {
        display: block;
    }
    div.lecturer-card {
        padding: 0;
        margin-bottom: 3px;
        position: static;
        height: auto;
        width: auto;
        display: block;
    }
    div.lecturer-card.sub-lecturer {
        padding-left: 0;
        height: auto;
    }

    div.lecturer-card div.lecturer-card-image {
        width: 5.5em;
        margin: 7px;
        float: left;
        position: static;
    }

    div.lecturer-card div.lecturer-card-image img {
        width: 100%;
        border-radius: 5px;
    }

    div.lecturer-card div.lecturer-card-name,
    div.lecturer-card.sub-lecturer div.lecturer-card-name {
        font-weight: bold;
        font-size: medium;
    }

    div.lecturer-card div.lecturer-card-info,
    div.lecturer-card.sub-lecturer div.lecturer-card-info {
        font-size: small;
    }
}

/* 共通スタイル */
.navbar-toggle,
a.navbar-brand, .dropdown a,
.footer-copyright {
    color: #fff;
}

.icon-bar {
    background-color: #fff;
}

.navbar, .dropdown-menu, .dropdown-menu li a {
    background-color: #286090;
}

.navbar .title {
    background-color: #f5f5f5;
    color: #286090;
    padding: 2px;
    margin-top: -4px;
    border-radius: 2px;
}
.navbar .title .version {
    vertical-align: text-bottom;
    padding-right: 5px;
}

.footer {
    background-color: #2c3e50;
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand{
    color: #fff;
}

.navbar .nav>li>a:hover, .navbar .nav>li>a:focus,
.navbar .nav .open>a, .nav .open>a:hover, .navbar .nav .open>a:focus,
.dropdown-menu .active a,
.dropdown-menu .active a:focus,
.dropdown-menu .active a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li a:hover {
    background-color: #00a1e9;
}

.dropdown-menu .divider {
    background-color: #00a1e9;
}

#top-body {
    margin-bottom: 40px;
}

#top-image img {
    width: 100%;
}

p.introduction {
    margin: 10px 0;
}

/* フィルター */
.filters.panel,
.filters .panel-heading,
.filters .panel-body {
    border: none!important;
    box-shadow: none!important;
    background-color: #d7f1fa!important;
    height: 100%;
}

.filters hr {
    margin: 10px 5px;
    border: 1px solid #c7ccd3;
}

div.checkbox-area label {
    width: auto!important;
}



/* ログイン*/
.login-logo {
    max-width: 80%;
}

/* 検索 */
#search-menu-button {
    margin-top: 15px;
}

.popover {
    color: #1a1a1a;
    background-color: #f3f3f3;
    width: 30vw;
    min-width: 300px;
    margin: 0!important;
    left: 15px!important;
}

.popover>.arrow {
    display: none;
}

.popover .icheckbox_flat {
    margin-right: 3px;
}

div.rateit{
    font-size: 20px;
}

@media (max-width: 768px) {
    .btn-responsive {
        padding:2px 4px;
        font-size:80%;
        line-height: 1;
        border-radius:3px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .btn-responsive {
        padding:4px 9px;
        font-size:90%;
        line-height: 1.2;
    }
}

div#course-list div.panel-heading {
    padding-top: 0;
    padding-bottom: 0;
    height: 6.5em;
}

div#course-list div.panel-heading .course-title {
    padding-top: 6px;
}

div#course-list div.panel-body {
    min-height: 150px;
}

div#course-list div.panel-body li.course-series {
    margin-bottom: 3px;
}

#detailed-settings{
    margin-top: 10px;
}
#sort-select{
    margin-top: 10%;
}
#classGroup,#afterChrist{
    margin-top: 10px;
}

.mejs__speed-selector {
    height: 150px!important;
}

.lecturer-link {
    margin-right: 3px;
}

.list-thumbnail {
    width: 50%;
    max-height: 100%;
}

.label-notice-admin-class {
    margin-right: 4px;
}

/** hover effect **/
/*  https://miketricking.github.io/bootstrap-image-hover/  */
.hovereffect {
    width: 100%;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.hovereffect .overlay {
    position: absolute;
    overflow: hidden;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 5%;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0,1);
    -ms-transform: scale(0,1);
    transform: scale(0,1);
}

.hovereffect:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.hovereffect img,
.hovereffect .no-video-thumbnail {
    display: block;
    position: relative;
    border: solid 1px #bababa;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    max-width: 100%;
    min-height: 140px;
    max-height: 140px;
    object-fit: contain;
}

.hovereffect .no-video-thumbnail {
    background-color: #fafafa;
    font-weight: bold;
    padding: 20px 10px;
}

.hovereffect:hover img,
.hovereffect:hover .no-video-thumbnail {
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
    filter: brightness(0.6);
    -webkit-filter: brightness(0.6);
}

.hovereffect a, .hovereffect p {
    color: #FFF;
    padding: 1em 0;
    opacity: 0;
    font-size: 15px;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
    color: #000\9; /* IE10以下 */
    padding: 0\9; /* IE10以下 */
}
@media all and (-ms-high-contrast: none){
    .hovereffect a, .hovereffect p {
        color: #000; /* IE10以上 */
        padding: 0;
    }
}

@media(max-width: 991px){
    .hovereffect a, .hovereffect p{
        font-size: 8px;
    }
}

@media(max-width: 767px){
    .hovereffect a, .hovereffect p{
        font-size: 10px;
    }
}

@media(max-width: 375px){
    .hovereffect a, .hovereffect p{
        font-size: 8px;
    }
}

.hovereffect:hover a, .hovereffect:hover p, .hovereffect:hover h2 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.flex, .flex > div[class*='col-'] {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 0 auto;
}

/** modal **/
.index-modal {
    height: 95vh;
}
.video-list {
    height: 50vh;
    overflow-y: scroll;
}
.TSkenshu {/*ラベルによる縮小回避*/
    font-size: 100% !important;
}
.yscrollable {
    overflow: auto;
}
.nopadding {
    padding:0;
}
/*以下2つは縦横比固定用のオブジェクト*/
.adjust-box {
    position: relative;
    width: 100%;
    height: auto;
}
.adjust-box p {
    font-size:1.25vw;
    line-height:1.5em;
}


/*ここから動画一覧のタイル(動画再生の一覧と共用)*/
.video-list-tile {
    width: 90%;
    height: 140px;
    max-width: 450px;
    max-height: 140px;
    min-height: 140px;
    margin: 5px auto;
    background-color:#f5fcff;
}

.video-list-tile img {
    width: 90%;
    margin: 10%;
}

.video-list-tile.active {
    background-color:#ddeeff;
}

.nonvideo {
    background-color:#fcfcfc;
}

.video-list-tile:hover{
    cursor: pointer;
    background-color:#ddeeff;
}

.nonvideo:hover{
    cursor: auto;
    background-color:#fcfcfc;
}

.video-list-explain{
    padding: 5px;
}

/*ここから動画再生モーダル*/
.modal-title {
    font-size: large;
    font-weight: 600;
}

@media (max-width: 767px) {/*xs画面の場合全幅のcol12で下に移動するため調整*/
    .watch-modal .modal-body{
        height:calc(100vh - 90px);
    }
}

.movie, .movietabs {
     padding:0 2px 5px 2px;
}

.modal-largest {/*モーダル最大サイズ用*/
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:10px 3px 0 3px;
    position: absolute;
}

@media (max-width: 767px) {/*xs画面の場合全幅のcol12で下に移動するため調整*/
    .modal-largest{
        padding-top: 0;
    }
}

.movie-box{
    height:36.5vw;
    margin:0;
}

.movie, .movietabs, #movieplayer, .video-container{
    height:100%;
}

@media (max-width: 767px) {/*xs画面の場合全幅のcol12で下に移動するため調整*/
    .movie-box{
        height:calc(95vh - 90px);
    }
    .movie,#movieplayer, .video-container{
        width:100%;
        height: 65vw;
    }
    .movietabs{
        width:100%;
        height:calc(100vh - 55vw - 90px);
    }
    .video-container{
        width: 100%;
        height: 60vw;
    }
}



/*ここから動画横(下)のタブ用*/
.CQItabs {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.CQItabs .panel-heading{
     padding:0;
     height:auto;
}
.CQItabs li{
    width:33%;
    height:35px;
    padding:0;
    text-align: center;
    vertical-align: middle;
}
.CQItabs li a{
    padding: 8px 0 !important;
    height: 35px;
}

.CQItabs table{
    font-size: 0.8em;
}

div#CQI{
    height:calc(100% - 20px - 0.3vw);
}

@media (max-width: 767px) {/*xs画面の場合全幅のcol12で下に移動するため調整*/
    div#CQI{
        height:calc(97% - 2vw);
    }
}

#CQI .tab-pane{
     height:100%;
     width:100%;
     overflow:auto;/*3つあるのでこっちで統一*/
     /*left:0;*/
}

#CQI td{
     vertical-align: top;
}

/*チャット履歴用*/
div#history{
    height:100%;
}
table.timeline{
    height:100%;
}
td.timer{
    width:45px;
    padding-right: 5px;
    text-align: right;
}
td.chat{
    padding-left:5px;
    /*text-align: left;*/
}

/*Q&A用*/
/*#question{*/
    /*text-align: right;*/
/*}*/
/*#question button{*/
    /*font-size: 1em;*/
    /*padding:2px;*/
    /*margin:3px 2px 3px;*/
    /*display: inline;*/
/*}*/
/*#question textarea{*/
    /*width:99%;*/
    /*margin: 2px auto;*/
    /*resize:vertical;*/
    /*max-height: 200px;*/
/*}#question tr{*/
     /*margin-top:5px;*/
/*}*/

button#deltpc,div#newtpc,div.commenter{
    display: none;
}

.atopic{
    padding:5px 5px 5px 0;
    margin-bottom:5px;
    background-color: #edf0ff;
    vertical-align: top;
}
td.talker{
    width:5em;
    padding-right: 2px;
    text-align: right;
}
td.talk{
    padding-left: 5px;
    text-align: left !important;
}
.commenter{
    text-align: right;
}

button.addcmt{
    display: inline !important;
}
/*ここまでQ&A*/


/*ここから要望・アンケート*/
#desireM{
    position:relative;
    top:30px;
    display:none;
    left:calc(50% - 150px);
    width:300px;
}
#desireM .modal-dialog{
    margin:-2px;
    width:auto;/*デフォルトが600px*/
}
#desireM .modal-header{
    padding:5px;
    height:30px;
}
#desireM .modal-body{
    height:auto !important;
}
#desiretext{
    height:200px;
    width:300px;
    resize: none;
    overflow:auto;
    max-width:100%;
}
#desireM input{
    float:right;
}



/* メール送信チェック */
.notice-mail-check-area {
    display: table-row;
}
.notice-mail-check,
.notice-mail-check-dummy {
    display: table-cell;
}

.notice-mail-check label {
    display: inline;
    width: auto;
}

.course-mail-check label {
    padding-top: 0!important;
}