/* 視聴ページ全体　*/
.view-page{
/*    background-image:url("/img/viewer/bg.jpg");*/
	background: #f7f7f7;
    background-size:cover;
}
.view-container{
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}
.fixed_hdr #hdr.sec-page{
    margin: 0  auto;
    padding: 0 15px 10px 15px;
    
}

@media (min-width: 1200px){
    .view-container,
    .fixed_hdr #hdr.sec-page{
        width: 90%;
    }

}
@media (min-width: 1500px){
    .view-container,
    .fixed_hdr #hdr.sec-page {
        max-width: 1450px;
    }
}

/* ログイン画面 */
.login-btn{
	background: #2b2d41!important;
}
.login-btn:hover{
	opacity: 0.7;
	color:white;
}
.view-login-panel{
	background: rgba(0,0,0,0.2);
	text-align:center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.view-login-content{
    color: #3d5062;
}
.view-login-content .form-control{
/*    color: white!important;*/
background-color: #f2f2f2!important;
}
.view-login-content .form-control:focus{
    background-color: #fae769!important;
}


.view-login-content input:focus{
    background-color: rgba(0,0,0,0.2);
}
.view-login-content h2{
    margin-bottom: 15px;
}
.be-member-notice{
    font-size: 16px;
}
@media (max-width: 500px){
    .be-member-notice{
        font-size: 12px;
        margin-bottom: 0px;
        padding:0 20px;
        text-align: left;
    }
    .be-member-notice span{
        display:none;
    }
    .be-member-notice br{
        display:none;
    }
    .be-member-notice a{
        text-decoration: underline!important;
        color: #fff!important;
    }
    
}
.be-member-notice a{
    font-weight:bold;
}

/* デジぽちロゴとヘッダメニュー */
.view-header-menu{
    display:flex;
    justify-content:space-between;
}
@media (min-width: 768px){
    .view-header-menu_degi-logo{
        width:200px;
    }
}
@media (max-width: 767px){
    .view-header-menu_degi-logo{
        width:110px;
    }
}
.view-header-menu_link{
    margin-top: auto;
}
.navbar{
    margin-bottom: 10px
}
.material-icons {
    font-size:inherit!important;    
}
.modal-title{
    margin-top:0;
}
@media (min-width: 992px){
    .modal-dialog {
        max-width: 700px;
        margin: 30px auto;
    }
}
.modal-body_description{
    padding:10px 0;
    font-size:12px;
}
/* ハンバーガーメニュー */
@media (min-width: 992px){
    .navbar-translate {
        display: none;
    }
}
.toggled{
    background-color: rgba(0, 0, 0, 0.8);
    padding:1rem;
}

/* 講師情報 */
@media (max-width: 991px){
    .view-lectures-list{
        display:none;
    }
}
.view-lectures-list{
/*    margin-bottom: 20px;*/
}
.list-group{
    padding: 20px 20px;
	background: rgba(43,45,65,0.05);
	border-radius: 10px;
	padding: 20px;
	margin: 0 20px;
}
.view-lecture-name{
    margin-top:0;
    margin-bottom:0px;
    font-size:20px;
	border-bottom: 1px solid rgba(43,45,65,0.2);
	padding-bottom: 3px;
}
.view-lectures-list p{
    margin-bottom: 0;
    font-size: 14px;
	line-height: 1.3em;
	text-align: justify;
	text-justify: inter-ideograph;
}
.view-lectures-list a{
    color:#337ab7;
}
.view-lecture-facility{
    margin-bottom: 5px!important;
	font-size: 13px!important;
	padding: 5px 0 0 0;
}

/* 開場前　*/
.btn-danger{
    font-size:inherit;
}
.btn-danger .material-icons{
    padding-right: 5px;
    font-size:28px!important;
    vertical-align: middle;
    margin-top: -5px;
}
@media (max-width: 767px){
    .h2-seo{
        font-size:20px!important;
    }
    .btn-danger .material-icons{
        font-size:16px!important;
    }
}
/* 動画と説明 */
.main-bg-color{
    background: rgba(243, 102, 51, 0) !important;
}
@media (min-width: 992px){
    .main-bg-color{
        display:flex;
    }
}
.videobox{
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px){
    .videobox{
        width:100%;
		background: #fff;
	    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
		margin-bottom: 50px;
		padding-bottom: 20px;
		border-radius: 0 0 10px 10px;
    }
}
.video-box_title{
    text-align: left;
}
.video-box_content{
    color: #2b2d41;
}
.video-box_content h4{
	font-size: 20px;
    padding: 0 10px 10px 10px;
    margin-top: 0px;
    margin: 20px 20px 0 20px;
    border-bottom: 2px solid #2b2d41;
}
.video-box_subtitle{
    font-size:16px;
    margin-top:0px;
    margin-bottom:5px;
}
.view-seminar-detail{
    font-size:16px;
    padding:20px 40px;
	line-height: 1.4em;
	text-align: justify;
	text-justify:inter-ideograph;
}
@media (max-width: 991px){
    .view-seminar-detail{
        display:none;
		padding: 20px;
    }
}
@media (max-width: 767px){
    .video-box_content h4{
        font-size:16px;
		margin: 0;
    }
    .video-box_subtitle{
        font-size:14px;
		display: block;
		margin-top: 10px;
    }
    .view-seminar-detail{
        display: none;
    }
}

.mob-view-info-closer{
    display:none;
}
@media (min-width: 992px){
    .mob-view-info-opener{
        display:none;
    }
}
@media (max-width: 991px){
    .mob-view-info-opener{
        width:100%;
        margin-top: 5px;
        margin-bottom: 10px;
        background-color: transparent!important;
        border:none;
    }
    .mob-view-info-closer{
        width:100%;
        margin-top: -5px;
        margin-bottom: 10px; 
        background-color: transparent!important;
        border:none;
    }
    .mob-view-info-opener div,
    .mob-view-info-closer div{
        margin:auto;
        width:120px;
        text-align:center;
        border-radius: 15px;
		font-size: 35px!important;
    }
    .mob-view-info-opener img,
    .mob-view-info-closer img{
        padding:5px 0;
        height: 25px;
    }
    .mob-view-info-closer img{
        transform: scale(1, -1);
    }
    div.simple_btn ul li{
        margin: 30px 0;
    }
}

/* 動画横の質問BOXなど */
.userbox{
    display: flex;
    flex-direction: column;
}
@media (min-width: 992px){
    .userbox{
        padding-left:20px;
        position: relative;  
    }

	
	.userbox_white:after, .userbox_white:before {
		right: 100%;
		top: 45%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}
	.userbox_white:after {
		border-color: rgba(255, 255, 255, 0);
		border-right-color: #fff;
		border-width: 15px;
		margin-top: -15px;
	}
	.userbox_white:before {
		border-color: rgba(20, 7, 7, 0);
		border-right-color: rgba(43,45,65,0.2);
		border-width: 16px;
		margin-top: -16px;
	}

}


.userbox_white{
	position: relative;
	background: #fff;
	border: 1px solid rgba(43,45,65,0.2);
    border-radius: 10px;
    padding:10px;
    margin-bottom: 15px;
	text-align: center;
}

.simple_btn{
    margin-top: 15px;
}

@media (max-width: 767px){
    .userbox_white{
        margin-bottom: 15px;
        padding-bottom: 0px;
    }
}
@media (min-width: 768px){
    .ask-form{
        margin-bottom: 15px;
    }
}
.ask-form .form-control{
    border-radius: 5px;
	height: 8em;
	box-shadow:0px 0px 1px 0px #bfbfbf inset;
	background:  rgba(45,47,66,.05)!important;

}
.dash-btn{
    background-color: rgba(255, 255, 255, 0);
    border: 0px;
    height:85px;
    padding:0px;
    background-size:contain!important;
    background-position: center!important;
    background-repeat: no-repeat;
}
@media (min-width: 768px){
    .dash-btn{
        height:85px;
    }
}
@media (max-width: 767px){
    .dash-btn{
        
		margin: 0 0 20px 0;
    }
    div.simple_btn ul{
        margin-bottom: 0!important;
    }
}
#dash-button{
    background: url("/img/viewer/before-btn.png") no-repeat;
}
#dash-button:hover{
    background: url("/img/viewer/after-btn.png") no-repeat;   
}
#latest-reserve-button{
    background: url("/img/viewer/latest-reserve-btn.png") no-repeat;
}
#latest-reserve-button:hover{
    opacity: 0.7;
/*    background: url("/img/viewer/after-reserve-btn.png") no-repeat;   */
}
#call-button{
    background: url("/img/viewer/before-call-btn.png") no-repeat;
}
#call-button:hover{
    opacity: 0.7;
/*    background: url("/img/viewer/after-call-btn.png") no-repeat;   */
}
#next-reserve-button{
    background: url("/img/viewer/before-next-reserve-btn.png") no-repeat;
}
#next-reserve-button:hover{
    opacity: 0.7;
/*    background: url("/img/viewer/after-next-reserve-btn.png") no-repeat;   */
}
#dl-dush-button{
    background: url("/img/viewer/before-dl-btn.png") no-repeat;
}
#dl-dush-button:hover{
    opacity: 0.7;
/*    background: url("/img/viewer/after-dl-btn.png") no-repeat;   */
}


@media (min-width: 992px){
    .userbox{
        min-width:300px;
        width:300px;
    }
}
.dash-btn{
    width:100%;
}
.enquete-box{
	padding: 0;
	text-align: center;
}
.inner-enquete-box{
    background: #fff;
    border: 1px solid rgba(43,45,65,0.2);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
    text-align: center;
}
.inner-enquete-box a.btn{
    background-color: #fae769;
    border-radius: 30px !important;
    border: 1px solid #edd367;
    font-size: 14px;
    line-height: 1.35em;
    padding: 5px 15px;
}
.inner-enquete-box a.btn:hover{
    color: #2b2d41;
}

#enquete_now{
    background: linear-gradient(transparent 50%, #fff9b7 30%);
}

.enquete-box p{
    color: #2b2d41;
    margin:0.5em 0;
    font-size: 15px;
}
.enquete-btn{
    background-color:#000;
    width:100%;
    margin-bottom: 10px;
}
.enquete-btn-off{
    width:100%;
    cursor: not-allowed;
}

.my-font-color{
    color:#ffffff !important;
}

#form_ask{
    background-color: rgba(136, 169, 231, 0.3) !important;
}

#form_ask::placeholder {
  color: #808080 !important;
}

/* IE */
#form_ask:-ms-input-placeholder {
  color: #808080 !important;
}

/* Edge */
#form_ask::-ms-input-placeholder {
  color: #808080 !important;
}


.client-askbn{
  background-color:#2b2d41 !important;
}
.notice{
	font-size: 13px;
	color: rgba(43,45,65,0.8);
	line-height: 1.25em;
	text-align: left;
	text-align: justify;
    text-justify: inter-ideograph;
    letter-spacing: -0.05em;
    margin:0 0.5em 0.5em 0.5em;
}
.notice img{
    height: 16px;
    width: 16px;
    margin-left: 49%;
}
img[alt="!"] {
    height: 16px;
    width: 16px;
}

.notice b{ background:linear-gradient(transparent 60%, #fae769 60%);}

.nav-link{
  color:#ffffff !important;
}
.nav-item{
  font-size: 1.5em
}
.bg{
  background-color:#e0efff !important;
}
.footer{
  background-color:#1a1a1a !important;
}
.no-user{
    color:whitesmoke;
    font-size:16px;
}
@media (max-width: 767px){
    .no-user{
        font-size: 12px;
        margin: 0 -20px;
    }
}

.navbar-collapse:before{
    background: #d4e4f8 !important;
}

.client-dash{
    background-color: rgba(255, 255, 255, 0);
    border:0
}
.client-banner{
    background-color: rgba(255, 255, 255, 0);
    border:0

}

.banner{
    padding-bottom:3%;
}
.reserve-dash{
    background-color: rgba(255, 255, 255, 0);
    border: 0;
}
.next-reserve-dash{
    background-color: rgba(255, 255, 255, 0);
    border: 0;
}
#call-button {
    background-color: rgba(255, 255, 255, 0);
    border: 0;
}
.video_play_notice_parent{
    text-align: center;
    margin-bottom:10px;
}
.video_play_notice{
    color:#2b2d41;
    font-size: 12px;
    background-color:#fff;
	border: 1px solid #ccc;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    margin:0;
}

/* ログイン前視聴ページ*/
@media (max-width: 767px) {
	.view-login-content h2{
		font-size:18px;
		margin-top:5px;
		margin-bottom:2px;
	}
	.pc-login-form{
	    display:none;
	}
	.mob-top-link{
		font-size:18px;
	}
}
@media (min-width: 768px) {
	.mob-top-link{
		display:none;
	} 
	.pc-login-form{
	    margin-bottom:10px;
	}
}
@media (min-width: 768px) {
    .view-sp-modal{
        display: none!important;
    }
}



/*　視聴予約ボタン */
.viewer-reserve-btn{
	background: rgba(0,0,0,0.1);
	color: #fff;
	border-radius: 12px;
	border: solid 2px #fff;
	font-size:23px;
}
.viewer-reserve-btn img{
	width:30px;
	padding-bottom: 3px;
}
.viewer-reserve-btn:hover,
.viewer-reserve-btn:focus,
.viewer-reserve-btn:visited{
	background: rgba(0,0,0,0.3);
}
.cancel-reserve-btn{
  	background-color: rgba(255,255,255,0.1);
}

.before-notice{
	margin-bottom:0;
	position:relative;
	font-size: 1.5em;
}
@media (max-width: 767px) {
    .before-notice{
    	padding-top: 20px;
    }
    .viewer-reserve-btn{
    	font-size:16px;
    	width:150px;
    	padding:3px 5px;
    }
    .btn-danger{
    	padding:5px 10px;
    }
    .viewer-reserve-btn img{
        width:24px;
    }
}
.register-notice{
	position:absolute;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
    width:300px;
    background:#000;
    text-align:center;
    padding: 5px 5px;
    border-radius:3px;
    font-size:18px;
    display:none;
}
.register-notice p{
    margin-bottom:0;
}
.register-notice:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 7px solid transparent;
    border-top: 7px solid #000;
    margin-left: -7px;
}

@media (max-width: 767px) {
    .register-notice{
        top: 0px!important;
        left: -43px!important;
        font-size: 13px;
    }
}

/* お気に入り登録ボタン */
.favorite-btn,
.favorite-btn:hover,
.favorite-btn:visited,
.favorite-btn:focus,
.favorite-btn:active{
	background:#fff!important;
	border-radius: 8px;
	border: solid 1px rgba(255,255,255,0.5);
	font-size:17px;
	margin-top:0;
	margin-bottom:15px;
    box-shadow: 0px 1px 3px 0px #a5a5a5;
	color: #ccc!important;
}
.favorite-btn img{
	width:22px;
	margin-bottom:4px;
	margin-right:10px;
	vertical-align: middle;
}

.favorite-cancel-btn,
.favorite-cancel-btn:hover,
.favorite-cancel-btn:visited,
.favorite-cancel-btn:focus,
.favorite-cancel-btn:active{
    box-shadow:0px 0px 5px 0px #bfbfbf inset;
	color: #666!important;
	background: rgba(45,47,66,.05)!important;
}

@media (max-width: 767px) {
    .favorite-btn{
        padding: 5px;
    }
}

/* おすすめ動画 */
.recommend-video{
    min-height: 0%;
	background: rgba(45,47,66,.8);
	padding: 20px;
	border-radius: 10px;
}


.recommend-video p::before {
  font-family: 'Material Icons';
  content: "thumb_up_alt";
  vertical-align: middle;
  font-size: 20px;
  margin-right: 3px;
}

.recommend-video img {
     margin-bottom: 10px;
     border-radius: 3px;
     width: 100%;
}
@media (max-width: 991px) {
    .recommend-video img {
        max-width:50%;
        min-width:50%;
    }
}
.recommend-video p{
    color: #fff;
    margin:0 0 10px 0;
    font-size:14px;
}
.recommend-video a{
    display: flex;
    text-decoration: none;
    align-items: flex-start;
}
.recommend-video a:hover,
.recommend-video a:focus,
.recommend-video a:visited{
    text-decoration: none;
}
.recommend-video h4{
    width:auto;
    color: white;
    margin:15px 10px;
    font-size:18px;
    text-align: left;
}
@media (min-width: 992px) {
	.recommend-video{
		margin-bottom: 15px
	}
    .recommend-video h4{
        display: none;
		
    }
}
@media (max-width: 767px) {
	.recommend-video{
		margin-bottom: 15px
	}
    .recommend-video h4{
        font-size:14px;
        margin:5px;
    }
}
@media (max-width: 510px) {
    .recommend-video-lecture{
        display: none;
    }
}
.recommend-video-lecture{
    margin-top: 10px;
    list-style: none;
    padding-left: 0;
}

/*視聴制限メッセージ*/
.limit-message-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 90%;
    height: 15rem;
    color:white;
    text-align: center;
    vertical-align: middle;
}
.embed-responsive-16by9::before{
    background:rgba(0,0,0,0.2);
}

.limit-message-content,
.limit-message-content-under{
    font-size:16px;
}
.limit-message-content-under{
    margin-bottom: 0px;
}
.limit-message-title{
    font-size:24px;
    margin-top:0px;
}
@media (max-width: 767px) {
    .limit-message-box{
        width: 100%;
    }
    .limit-message-title{
        margin-top: 10px;
        margin-bottom: 8px;
        font-size:16px;
    }
    .limit-message-content{
        margin-bottom: 8px;
    }
    .limit-message-content,
    .limit-message-content-under{
        font-size:14px;
    }
}
@media (max-width: 430px) {    
    .limit-message-box{
        height: 100%;
    }
}

/* お問い合わせ・視聴環境チェック　シンプルボタン */
div.simple_btn ul{
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
div.simple_btn ul li{ padding: 0 0.6em 0 0;}
div.simple_btn ul li a{ color: #2b2d41; font-size: 13px;}
div.simple_btn ul li.btn01::before {
  font-family: 'Material Icons';
  content: "computer";
  vertical-align: middle;
  margin-right: 3px;
}
div.simple_btn ul li.btn02::before {
  font-family: 'Material Icons';
  content: "help_outline";
  vertical-align: middle;
  margin-right: 2px;
}

.viewer_iconlist {
    display: flex;
    flex-wrap: wrap;
}
.viewer_iconlist > div {
    vertical-align: top;
    margin-right: 5px;
    padding-top: 0px;
    height: 35px;
}