/*@import "../../css/bootstrap.css";*/

html,
body {
	font-family: "メイリオ";
}

.table {
	margin: 0;
}
/** ヘッダー系 */

.site-header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1020;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	height: 60px;
	/*
	color: white;
	background-color: rgba(223, 77, 135, 1);
	*/
	background-color: white;
	border: 2px solid white;
}



.header_logo {
	margin-left: 10px;
	max-height: 30px;
}

.PC_VIEW {
	display: block;
}

.PHONE_VIEW {
	display: none;
}


/** サイドバー */

.list-group-item-secondary{
	background: rgb(245, 245, 245);
	color: #495057;
}


.sidebar {
	width: 100%;
	height: 0;
}

.menu-panel,
.main,
.swipe,
.fade-layer {
	top: 60px;
	float: left;
	height: 100%;
}

.menu-panel {
	position: fixed;
	width: 240px;
	z-index: 500;
	left: -240px;
	background: rgb(245, 245, 245);
	box-shadow: 0px 3px 2px rgba(0, 10, 10, 0.2);
	transition: all 0.4s;
}

.menu-open {
	-webkit-transform: translate(240px, 0);
	transform: translate(240px, 0);
}

.side-button {
	width: 25px;
	height: 25px;
	cursor: pointer;
}


/*PC*/

@media screen and (min-width:769px) {

	/*ログイン画面の入力系*/
	.login_input{
		margin:1rem;
	}

	.view_margin{
		margin-top: 1rem;
		margin-right: 1rem ;
		margin-bottom: 1rem;
		margin-left: 1rem ;
	}

	.view_margin_course{
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.btn_width{
		width:auto;
	}

    .col-4_new_pass{
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 33.3333%;
        max-width: 33.333333%;
    }
    
    .login_area{
        height: 70% !important;
    }

	.bg_shadows {
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
	}

	.float_l {
		float: left;
	}

	/*ユーザ情報*/
	.mypage_btn {
		margin-top: 20px;
		margin-left: auto;
		margin-right: 1rem;
		width:auto;
	}

	.mypage_status {
		padding-left: 2rem;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.mypage_margin {
		margin-top: 1rem;
	}

    .text-prewrap {
        white-space: pre-wrap;
    }


	/* ユーザ詳細 */
	.user-space {
		width: 24%;
	}
	.user-name {
		font-size: x-large;
		font-weight: bold;
	}
	.user_cen {
		text-align: center;
		margin-top: 30px;
		margin-bottom: 15px;
	}
	.user-label {
		text-align: left;
		/*
		opacity: 0.5;
		*/
		font-weight: bold;
	}
	/*
	.user-label {
		min-width: 120px;
	}
	.user-value {
		width: 200px;
	}
	*/
}

/** 共有パーツ */

.breadcrumb {
/*
	background-color: #113994;

	background-color: #696969;
*/
	background-color: #f5f5f5;
	padding: 10px;

}

.carsor_share{
    cursor: pointer;
    cursor: hand;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: ">";
/*
	color:white;
*/
}

.breadcrumb-bar {
	background-color: #f5f5f5;
	border-bottom: 1px solid #f5f5f5;
	margin-top:5px;

}

.content {
	max-width: 1280px;
	height: auto;
}
.content_f {
	max-width: 1280px;
	height: auto;
/*	padding-bottom: 60px;*/
	padding-bottom: 50px;
}

.footer {
	width: 100%;
	box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15);
/*	height: 60px;*/
	height: 50px;
	text-align: center;
	background-color: white;
	position: fixed;
	bottom: 0;
	z-index: 1010;
}

.footer_content {
	max-width: 1280px;
}

.footer_btn {
	width: 10rem;
/*	margin: 0px 10px 0px 10px;*/
	margin: 0px;
}


.form-control::placeholder{
  color: #c0c0c0;
}


.margin_top {
	margin-top: 1rem;
}


tbody tr:hover {
	outline-width: 2px;
	outline-style: solid;
	outline-color: rgba(169, 169, 169, 0.6);
}

thead th {
	background-color: #ffeeba;
}


thead th.sortable {
	cursor: pointer;
	background-position: right;
	background-repeat: no-repeat;

}

thead th.sortable a {
	text-decoration: none;
	color:black; 

	display: block;
	width: 100%;
	height: 100%;
}

thead th.sort {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAkElEQVQ4T73UMQ6AIAyF4Z/E0dHRIzh4/1M4eARHR0cH0wQMMdBC0sgMH4VXCDiP4OzRAg7AEjfegVsrwgIFW4ExIhewaagGfrFUmIrWwBpmoiXQwlS0BEoAU2P6JyBBvaMEzp3gYYGNxZWnWW3Tjf9yZPdQ3NtG7s1Cq6/lt6eX0nX9HHLU7fty6cNuJF/wAAIWJBX1VHH6AAAAAElFTkSuQmCC");
}

thead th.sort-asc {
	border: 2px solid #ff8c00;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAgUlEQVQ4T+3SsQ2AIBCF4Z/eMdxCx3ARB7ByABdxDN3CMRzAkKCFHneQUFhwNXxc3sNReFxhjxSwAebw8ASc2hIW6LEFaANyAKOGauAbuxdT0RgYw0xUAi1MRSXQF9Antr8BvqhnJHAAukRwB1YLTLTkY9a3ycYrmB3Z50LN8IcZXsnkEhVNjPJpAAAAAElFTkSuQmCC");
}

thead th.sort-desc {
	border: 2px solid #ff8c00;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAfUlEQVQ4T2NkoDJgpLJ5DKMGUh6io2E4RMIwhIGBwZpItx5lYGBYg6wWWyw3MzAw2BBp4BEGBoZaQgbyMDAw9DMwMKgQMPQOAwNDIQMDwxdCBoLkCRmK1TCQRnwJG5ehOA0jZCA2l+I1jBgDYYaCIgoEQBGAEmbo4Tz48zIAQNgSFR9+d5MAAAAASUVORK5CYII=");
}


.btn-outline-red {
	color: #dc3545;
	background-color: #fff;
	border-color: #dc3545;
}

.btn-outline-red:hover {
	color: #fff;
	background-color: #dc3545;
}

.btn-outline-red::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.5);
	transform: scale(.5);
}

.btn-outline-red:hover::after {
	background: #333;
	-webkit-transform: scale(1);
	transform: scale(1);
}


.btn-danger {
	border: none; 
}

.btn-danger:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #ff3355;
	border: none; 
}

.btn-primary {
	border: none; 
}

.btn-primary:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #4da6ff;
	border: none; 
}

.btn-success {
	border: none; 
}

.btn-success:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #3cb371;
	border: none; 
}


.btn-warning {
	border: none; 
}

.btn-warning:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: black;
	background-color: #ffd700;
	border: none; 
}

.btn_bg_info {
	color: white;
	background-color: #17a2b8;
}

.hover_info:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #5cc3e6;
}

.btn_bg_sec {
	color: white;
	background-color: #6c757d;
}

.hover_sec:hover {
	box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #6c757d;
}

.btn-outline-secondary:hover{
		box-shadow: 0 3px 4px rgba(33, 33, 33, 0.4);
	color: white;
	background-color: #6c757d;
}

.common_btn {
	width: 10rem;
	/* margin: 10px; */
	margin: 0px 0px 5px 10px;
}

.common_btn_top {
	width: 10rem;
	/* margin: 10px; */
	margin: 8px 10px 0px 10px;
}

/*
    @page {
        size:portrait;
        
    }
*/

/*
@media print {
	@page {
		size: A4 landscape;
		margin: 0;
	}
}
*/

/** ユーザTOP画面：お知らせ一覧 */

.maring_notice_new {
	margin-top: 1px;
}

.notice-new {
	background-color: yellow;
}

.notice-impo {
	background-color: orangered;
	color: white;
}

.badge-notify {
	background: orangered;
	color: white;
	position: relative;
	top: 10px;
	left: -15px;
}

.top-notice {
	height: calc(100vh - 135px);
	overflow-y: scroll;
}

.top-notice::-webkit-scrollbar {
	width: 10px;
}

.top-notice::-webkit-scrollbar-track {
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: inset 0 0 2px #777;
}

.top-notice::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px;
	box-shadow: none;
}

.top-notice .notice-row {
	cursor: pointer;
}

.top-notice td {
	font-weight: bolder;
}

.top-notice .readed td {
	font-weight: normal;
	background-color: rgb(240, 240, 240);
}

.top-notice td:nth-child(1) {
	width: 40px;
	padding-left: 1px;
	padding-right: 1px;
	font-size: small;
}

.top-notice td:nth-child(2) {
	width: 40px;
	padding-left: 1px;
	padding-right: 1px;
	font-size: small;
}

.top-notice td:nth-child(3) {
	width: auto;
	font-size: small;
}

.top-notice td:nth-child(4) {
	font-size: small;
}

/** ユーザTOP画面：動画一覧 */

.top-movie {
	height: calc(100vh - 77px);
	overflow-y: scroll;
}

.top-movie::-webkit-scrollbar {
	width: 10px;
}

.top-movie::-webkit-scrollbar-track {
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: inset 0 0 2px #777;
}

.top-movie::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px;
	box-shadow: none;
}

/*リンク文字_下線*/

.rink_col{
	color: #1b489d;
}

.modal_rink {
	text-decoration:underline; 
	text-underline-position:above;
	
}

.modal_rink:hover{
	border-bottom: none; 
	text-decoration: none;
}

.bread_rink_col{
/*
	color: #1b489d;
*/
}

.bread_rink_col_now{
	color: #1b489d;
	font-weight:bold;
	
}

.bread_modal_rink {
	
}

.bread_modal_rink:hover{
	border-bottom: none; 
	text-decoration: none;

}


/** TOP画面　動画一覧 */

.movie-card {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: #fff;
	background-clip: border-box;
	margin-bottom: 40px;
/*	padding-left: 10px;*/
	padding-left: 0.5rem;
/*	padding-right: 10px;*/
	padding-right: 0.5rem;
}

.movie-img {
	position: relative;
/*	height: 200px;*/
	background-color: #343a40 !important;
}
.movie-img:hover {
	opacity: 0.7;
}
.movie-img iframe {
	max-width: 100%;
	height: auto;
}

.video-thumbnail{
	display: flex;
}

.movie-thumbnail {
/*	width: 100%;*/
	display: block;
	max-height: 200px;
	max-width: 100%;
	width: auto;
	height: auto;
	margin: auto;
}
.movie-link {
	position: absolute;
	display:block;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 2;
}

.movie-info{
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	top: 50%;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	z-index: 1;
}

.movie-alert {
	max-height: 24px;
}

.web-movie , .real-movie , .new-movie {
	padding: 0 1em;
	color: #ffffff;
	max-height: 24px;
}

.web-movie {
	background-color: #CC0066;
}

.real-movie {
	background-color: #C55A11;
}

.new-movie {
	background-color: #FFCC33;
}

.movie-title {
	margin: 5px;
	font-size: medium;
  height: calc( 1.3em * 1.9 );
  line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.movie-badge {
	font-size: medium;
	position: absolute;
	top: .5rem;
	left: .5rem;
}

.movie-section {
	font-size: medium;
	font-weight: bold;
}

.movie-date {
	font-size: small;
}

.movie-text {
	font-size: small;
	height: calc( 1.3rem * 3.9 );
	line-height: 1.3rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.web-movie_list {
	padding: 0 1em;
	color: #CC0066;
}

.real-movie_list {
	padding: 0 1em;
	color: #C55A11;
}


/*------ここから--------*/

.btn-outline-red {
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
}

.btn-outline-blue {
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

.btn-outline-green {
	color: #fff;
	background-color: #28a745;
	border-color: #28a745;
}

.toggle-buttons {
	display: flex;
}

.toggle-buttons.vertical {
	flex-direction: column;
}

.toggle-buttons label {
	display: flex;
	position: relative;
}

.toggle-buttons [type=radio],
.toggle-buttons [type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

/* appearance: none; for IE11 */

_:-ms-lang(x)::-ms-backdrop,
.toggle-buttons [type=radio],
_:-ms-lang(x)::-ms-backdrop,
.toggle-buttons [type=checkbox] {
	visibility: hidden;
}

.toggle-buttons .button {
	z-index: 1;
}

.toggle-buttons.vertical .button {
	width: 100%;
}



.toggle-buttons:not(.vertical) :not(:last-child) .button {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.toggle-buttons.vertical :not(:first-child) .button {
	border-top: 1px solid #567;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.toggle-buttons.vertical :not(:last-child) .button {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}


.toggle-buttons :disabled + .button {
	cursor: not-allowed;
	opacity: .6;
	color: #def;
}


.button {
	display: inline-block;
	padding: .5em 1em;
	border-radius: 4px;
	text-align: center;
	cursor: pointer;
}

.button:hover {
	color: white;
}

.button:disabled {
	cursor: not-allowed;
	opacity: .6;
	color: #def;
}

/*----ここまで----*/

/* 受講証明証 */

.certificate-bg {
	max-width: 100%;
	width: 750px;
	height: auto;
	margin: auto;
	display: block;
}

.certificate-title {
	margin: 45px 0px 0px 0px;
	font-size: 2.5rem;
	white-space: nowrap;
}

.certificate-content {
	margin: 20px auto 20px auto;
	padding: 0px 7vw 0px 0px;
	display: inline-block;
	font-size: 1.25rem;
	white-space: nowrap;
}

.certificate-explanation {
	margin: 30px 0 0 0;
	font-size: 1rem;
}

.certificate-footer {
	margin: 0px 3vw 0px 0px;
	font-size: 1rem;
	white-space: nowrap;
}

.certificate-seal {
	width: 50px;
	vertical-align: text-bottom;
}


/** 動画詳細 */

#video-player {
	position: relative;
	height: 0;
	padding: 0 0 56.25%;
	overflow: hidden;
	background-color: #343a40 !important;
}
#video-player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pe_none iframe {
	pointer-events:none;
}

#movieFrame {
	position: relative;
	user-select: none;
/*	font-size: 0;*/
}

#mv {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}
#custom-seekbar
{
	cursor: pointer;
	height: 10px;
	margin-bottom: 10px;
/*	outline: thin solid blue;*/
	outline: thin solid #0000CC;
	overflow: hidden;
	position: relative;
	width: 400px;
}
/* 独自シークバー */
#custom-seekbar span
{
/*	background-color: blue;*/
	background-color: #0000CC;
	position: absolute;
	top: 0;
	left: 0;
	height: 10px;
	width: 0px;
}
#custom-seekbar_nocon
{
	cursor: pointer;
	height: 10px;
	margin-bottom: 10px;
/*	outline: thin solid orange;*/
	outline: thin solid #6c757d;
	overflow: hidden;
	position: relative;
	width: 400px;
	cursor: unset;
}
#custom-seekbar_nocon span
{
/*	background-color: orange;*/
	background-color: #6c757d;
	position: absolute;
	top: 0;
	left: 0;
	height: 10px;
	width: 0px;
}
.video_btn {
	width: 32px;
	height: auto;
	cursor: pointer;
}
.video_btn2 {
	width: 12px;
	height: auto;
	cursor: pointer;
}
.video_btn3 {
	width: 27.5px;
	height: auto;
	cursor: pointer;
}
.video_btn:hover , .video_btn2:hover, .video_btn3:hover {
	opacity: 0.7;
}
#vol {
/*	width: 35px;*/
	width: 75px;
}
/* シークバー隠し */

.hiddenSeek {
	position: absolute;
	width: 100%;
/*	margin-top: -35px;*/
/*	bottom: 35px;*/
	bottom: 0;
	height: 30px;
	background-color: transparent;
	z-index: 100;
	user-select: none;
}

.movie-speed {
/*	width: 80px;*/
	width: 100px;
}

/** 理解度チェック */

.test-bg {
	background-color: #eeeeee;
}


.result-bg {
	background-color: #eeeeee;
}


/** 試聴動画一覧 */
.movie-table .sp-span {
	display: none;
}

.movie-table th:nth-child(1) {
	width: 50px;
}

.movie-table th:nth-child(2) {
	width: 120px;
}

.movie-table th:nth-child(3) {
	width: 120px;
}

.movie-table th:nth-child(6) {
	width: 120px;
}

.movie-table th:nth-child(7) {
	width: 100px;
}

.movie-table th:nth-child(8) {
	width: 100px;
}

.movie-table th:nth-child(9) {
	width: 120px;
}

.movie-table th:nth-child(10) {
	width: 100px;
}


/** 資料一覧 */

.files-table th:nth-child(3) {
	width: 120px;
}

.files-table th:nth-child(4) {
	width: 50px;
}



/** 周知一覧 */

.notice-table .sp-span {
	display: none;
}

.notice-table th:nth-child(1) {
	width: 120px;
}

.notice-table th:nth-child(2) {
	width: 120px;
}

.notice-table th:nth-child(3) {
	width: 200px;
}

.notice-table th:nth-child(4) {
	max-width: 300px;
}

.notice-table th:nth-child(5) {
	width: 120px;
}

.notice-table {
	font-weight: bolder;
}

.notice-table .readed {
	font-weight: normal;
	background-color: #f5f5f5;
}


.sp-sort-box {
	display: none;
}

.sp-sortable {
	display: none;
}

.table-bar {
	display: flex;
	justify-content: flex-end;
	margin: 0px 0px 5px 0px;
}

.sort_userList {
	cursor: pointer;
}

/* お知らせ詳細 */

.notice_body {
	white-space: pre-wrap;
	word-wrap: break-word;
}

.notice_bg {
/*
	background-color: #eeeeee;
*/
	border-top: 1px solid #d3d3d3;
}

/** ユーザ詳細 */

/*
.user-space {
	width: 100px;
}
.user-name {
	font-size: x-large;
}
.user-label {
	min-width: 120px;
}
.user-value {
	width: 200px;
}

*/

/** ラジオボタン、チェックボックス */

.checkbox label {
	padding-left: 0;
}

.checkbox input[type="checkbox"] +label{
	display: block;
	position: relative;
	padding-left: 35px;
	margin-bottom: 20px;
	font: 14px/20px 'Open Sans', Arial, sans-serif;
	color: #ddd;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

input[type=checkbox]{
	display: none;
	margin-top:;2px
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #53b300;
  position: absolute;
  left: 10px;
  top: calc(50% - 9px);
  /*
  top: 3px;
  */
/*  margin-top:1.2%;*/
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: calc(50% - 12px);
/*  top: -1px;*/
  left: 16px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: #fff;
  border-bottom-color: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox {
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	margin: 5px 10px 0 0;
	padding: 2px 10px 2px 42px;
	border-radius: 8px;
	/*
	background-color: #f6f7f8;
	*/
	vertical-align: middle;
	cursor: pointer;
}

.checkbox:hover {
	background-color: #e2edd7;
	color: #53b300;
}

.checkbox:hover:after {
	border-color: #53b300;
}


/*
.checkbox:after {
	display: block;
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
	position: absolute;
	top: 50%;
	margin-top: -8px;
	width: 16px;
	height: 16px;
	border: 2px solid #bbb;
	left: 15px;
	border-radius: 6px;
	content: '';
}
*/
/*
.checkbox:before {
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 50%;
	left: 21px;
	display: block;
	margin-top: -5px;
	width: 5px;
	height: 9px;
	border-right: 3px solid #53b300;
	border-bottom: 3px solid #53b300;
	content: '';
	opacity: 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
*/



input[type=checkbox]:checked + .checkbox:before {
	opacity: 1;
}

input[type=checkbox]:checked + .checkbox {
	background-color: #53b300;
	color: #fff;
}



.radio label{
	padding-left: 0;

}


.radio input[type="radio"]{
	position: relative;
	margin-left: 0;
	
}

input[type=radio]{
	display: none;
}

.radio{
	box-sizing: border-box;
	-webkit-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
	position: relative;
	display: inline-block;
	margin: 5px 10px 0 0;
	padding: 2px 10px 2px 42px;
	border-radius: 8px;
	/* background-color: #f6f7f8; */
	vertical-align: middle;
	cursor: pointer;
}

.radio:hover{
	background-color: #e2edd7;
	color:#53b300;
	
}

.radio:hover:after{
	border-color: #53b300;
}

.radio:after{
	display: block;
	-webkit-transition: border-color 0.2s linear;
	transition: border-color 0.2s linear;
	position: absolute;
	top: 14px;
	margin-top: -10px;
	width: 18px;
	height: 18px;
	border: 2px solid #53b300;
	left: 13px;
	border-radius: 50%;
	content: '';
	opacity: 1;
}


.radio:before {
	display: block;
	-webkit-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
	position: absolute;
	top: 7px;
	margin-top: -5px;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	left: 11px;
	border-radius: 50%;
	background-color: #fff;
	content: '';
	opacity: 0;
}


input[type=radio]:checked + .radio:before {
	opacity: 1;
}

input[type=radio]:checked + .radio {
	background-color: #53b300;
	color:#fff;
}



/** ラジオ・チェック disabled */

input[type=radio]:disabled + .radio {
	background-color: #e9ecef !important;
	pointer-events: none;
}

input[type=radio]:disabled + .radio:hover {
	background-color: #e9ecef;
	pointer-events: none;
}

input[type=radio]:disabled + .radio:hover:after {
	border-color: #bbb;
	pointer-events: none;
}
/*
input[type=checkbox]:disabled + .checkbox {
	background-color: #e9ecef !important;
	pointer-events: none;
}

input[type=checkbox]:disabled + .checkbox:hover {
	background-color: #e9ecef;
	pointer-events: none;
}

input[type=checkbox]:disabled + .checkbox:hover:after {
	border-color: #bbb;
	pointer-events: none;
}
*/



/*スマホ*/

@media screen and (max-width:768px) {

	.breadcrumbs {
		padding:0 20px;
	}

	.breadcrumbs ol {
		display:block;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
		overflow: auto;
		white-space: nowrap;
	}

	.breadcrumbs li {
		display:inline;
		flex: 0 0 40%;
	}

	/*ログイン画面の入力系*/
	.login_input{
		margin-top:1rem;
		margin-bottom:1rem;
	}
    
    .col-4_new_pass{
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-new_pass_input{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .login_area{
        height: 80% !important;
    }
    
	.login_card_top{
		padding-top:260px;
	}

	.h-100{
		height: 500px !important;
	}

	.form-group{
		padding-left:5px;
		padding-right:5px;
	}

	.bread_rist{
		font-size:1.2rem;
	}

	.bg_shadows {
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
	}

	.course_view_kigen{
		width:40%;
	}

	.view_margin{
		margin-top: 1rem;
		margin-bottom: 1rem;
		font-size:1.1rem;
	}
	
	.view_margin_course{
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	
	.btn_width{
		width:90%;
	}

	.PC_VIEW {
		display: none;
	}
	.PHONE_VIEW {
		display: block;
	}

	.top-notice {
		height: 30vh;
		overflow-y: scroll;
	}
	.top-movie {
		height: auto;
		overflow-y: visible;
	}

	.search-btn-group {
		width: 100%;
	}

	/** 共有パーツ */
	.breadcrumb {
/*		font-size: 1.2rem;*/
		font-size: 3.25vw;
	}

	/*ユーザ情報*/
	.mypage_btn {
		display: block;
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.mypage_status {
	/*
		text-align: center;
	*/
		margin-bottom: 15px;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.mypage_margin {
		margin-top: 0
	}

	.user_cen {
		text-align: center;
		margin-top: 20px;
		margin-bottom: 15px;
		font-weight: bold;
	}

	.user-label {
	/*
		text-align: center;
		opacity: 0.5;
		margin-left:1rem;
	*/
		font-weight: bold;
		font-size: 1rem;
	}

	.top-notice {
		height: 30vh;
		overflow-y: scroll;
	}
	.top-movie {
		height: auto;
		overflow-y: visible;
	}

	/* 受講証明証 */
	.certificate-title {
		margin: 3vw 0 0 0;
		font-size: 3.5vw;
	}

	.certificate-content {
		margin: 2.75vw auto 1.5vw;
		padding: 0px 0vw 0px 0px;
		font-size: 2.75vw;
	}

	.certificate-explanation {
		margin: 2vw 0 0 0;
		font-size: 1.75vw;
	}

	.certificate-footer {
		margin: 0;
		font-size: 1.5vw;
	}

	.certificate-seal {
		width: 7vw;
	}


	/*理解度テスト*/
	.check_supplement{
		margin-top:2rem;
	}
	
	.check_number{
		margin-top:1rem;
	}
	
	.card-body{
	/*
		padding-top: 1rem;
	*/
		padding-bottom: 1rem;
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	
	}
	
	.image_photo{
		width:100%;
	}
	
	.container {
		width: 100%;
		padding-right: 0px;
		padding-left: 0px;
		margin-right: auto; 
		margin-left: auto;
	}

	.certif_text{
		text-align:left;
	}

	/* 周知一覧 */
	.notice-table .sp-span {
		display: inline;
		opacity: 0.5;
		font-weight: bold
	}

	.notice-table th {
		display: none;
	}

	.notice-table tbody {
		border-top: 0.5px solid rgba(0, 0, 0, 0.125);
	}

	.notice-table tbody tr {
		margin-top: -1px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border: 0.5px solid rgba(0, 0, 0, 0.125);
		/*
		border-radius: 0.25rem;
		margin-bottom: 10px;
		*/
		width: 100%;
		min-width: 200px;
		outline: none;
		position: relative;
	}

	.notice-table td{
		position: relative;
		display: block;
		border: none;
	}

	.notice-table td:nth-child(1) {
		text-align: start !important;
		font-size: small;
		width: 60px;
		-webkit-flex-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.notice-table td:nth-child(2) {
		font-size: small;
		text-align: end !important;
		width: calc(100% - 60px);
		-webkit-flex-order: 2;
		-ms-flex-order: 2;
		order: 2;
	}

	.notice-table td:nth-child(3) {
		font-size: small;
  	white-space: normal !important;
		width: calc(100% - 80px);
		-webkit-flex-order: 4;
		-ms-flex-order: 4;
		order: 4;
	}

	.notice-table td:nth-child(4) {
		font-size: medium;
  	white-space: normal !important;
		width: 100%;
		-webkit-flex-order: 3;
		-ms-flex-order: 3;
		order: 3;
	}

	.notice-table td:nth-child(5) {
		font-size: small;
		width: 80px;
		-webkit-flex-order: 5;
		-ms-flex-order: 5;
		order: 5;
	}

	/* .notice-table td:nth-child(1) {
		width: 100px;
		-webkit-flex-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.notice-table td:nth-child(2) {
		font-size: small;
		width: 100px;
		-webkit-flex-order: 3;
		-ms-flex-order: 3;
		order: 3;
	}

	.notice-table td:nth-child(3) {
		font-size: small;
  	white-space: normal !important;
		width: calc(100% - 180px);
		-webkit-flex-order: 4;
		-ms-flex-order: 4;
		order: 4;
	}

	.notice-table td:nth-child(4) {
		font-size: medium;
  	white-space: normal !important;
		width: calc(100% - 100px);
		-webkit-flex-order: 2;
		-ms-flex-order: 2;
		order: 2;
	}

	.notice-table td:nth-child(5) {
		font-size: small;
		width: 80px;
		-webkit-flex-order: 5;
		-ms-flex-order: 5;
		order: 5;
	} */

	.table-bar {
		display: flex;
		justify-content: space-between;
	}

	.sp-btn {
		width: auto;
	}

	.sp-sort-box {
		display: flex;
		margin: 0px 0px 5px 0px;
		flex-wrap: wrap;
		justify-content: flex-end
	}
	.sp-sort-label {
		display: inline-block;
		vertical-align: middle;
		padding-top: calc(0.375rem + 1px);
		padding-bottom: calc(0.375rem + 1px);
		font-size: inherit;
		line-height: 1.5;
	}
	.sp-sort-select {
		display: inline-block;
		vertical-align: middle;
		max-width: 8rem;
		min-width: 5rem;
		width: calc(100% - 1.5em - 0.5rem - 2px - 10px);
	}

	.sp-sortable {
		display: inline-block;
		vertical-align: middle;
		justify-content: space-between;
		cursor: pointer;
		margin: 0px 0px 0px 5px;
		width: calc(1.5em + 0.5rem + 2px);
		height: calc(1.5em + 0.5rem + 2px);
	}

	.sp-sort-asc {
		background-position: bottom center;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAgUlEQVQ4T+3SsQ2AIBCF4Z/eMdxCx3ARB7ByABdxDN3CMRzAkKCFHneQUFhwNXxc3sNReFxhjxSwAebw8ASc2hIW6LEFaANyAKOGauAbuxdT0RgYw0xUAi1MRSXQF9Antr8BvqhnJHAAukRwB1YLTLTkY9a3ycYrmB3Z50LN8IcZXsnkEhVNjPJpAAAAAElFTkSuQmCC");
	}

	.sp-sort-desc {
		background-position: top center;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAfUlEQVQ4T2NkoDJgpLJ5DKMGUh6io2E4RMIwhIGBwZpItx5lYGBYg6wWWyw3MzAw2BBp4BEGBoZaQgbyMDAw9DMwMKgQMPQOAwNDIQMDwxdCBoLkCRmK1TCQRnwJG5ehOA0jZCA2l+I1jBgDYYaCIgoEQBGAEmbo4Tz48zIAQNgSFR9+d5MAAAAASUVORK5CYII=");
	}



	/* 動画一覧 */

	.movie-table .sp-span {
		display: inline-block;
		width: 4.5rem;
		opacity: 0.5;
		font-weight: bold
	}

	.movie-table th {
		display: none;
	}

	.movie-table tbody {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-top: 0.5px solid rgba(0, 0, 0, 0.125);
	}

	.movie-table tbody tr {
		margin-top: -1px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border: 0.5px solid rgba(0, 0, 0, 0.125);
		/*
		margin-bottom: 10px;
		border-radius: 0.25rem;*/
		width: 100%;
		min-width: 250px;
		outline: none;
		position: relative;
	}

	.movie-table td {
		position: relative;
		display: block;
		border: none;
	}


	.movie-table td:nth-child(1) {		/* 必須 */
		width: 50px;
		max-width: 50px;
		-webkit-flex-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.movie-table td:nth-child(1):empty {		/* 必須 */
		width: 0;
		max-width: 50px;
		-webkit-flex-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.movie-table td:nth-child(2) {		/* 公開開始 */
		font-size: small;
		text-align: start !important;
/*		width: 50%;*/
		width: 100%;
		min-width: 150px;
		max-width: 210px;
		-webkit-flex-order: 4;
		-ms-flex-order: 4;
		order: 4;
	}
	.movie-table td:nth-child(3) {		/* 公開終了 */
		font-size: small;
		text-align: start !important;
/*		width: 50%;*/
		width: 100%;
		min-width: 150px;
		-webkit-flex-order: 5;
		-ms-flex-order: 5;
		order: 5;
	}

	.movie-table td:nth-child(4) {		/* タイトル */
		white-space: normal !important;
		width: calc(100% - 50px);
		-webkit-flex-order: 2;
		-ms-flex-order: 2;
		order: 2;
	}

	.movie-table td:nth-child(5) {		/* 部署 */
		white-space: normal !important;
		width: 100%;
		-webkit-flex-order: 3;
		-ms-flex-order: 3;
		order: 3;
	}
	
	.movie-table td:nth-child(6) {		/* 形式 */
		font-size: small;
		text-align: start !important;
		width: 50%;
		min-width: 150px;
		-webkit-flex-order: 6;
		-ms-flex-order: 6;
		order: 6;
	}

	.movie-table td:nth-child(7) {		/* 受講出席 */
		font-size: small;
		text-align: start !important;
		width: 50%;
		min-width: 80px;
		-webkit-flex-order: 7;
		-ms-flex-order: 7;
		order: 7;
	}
	
	.movie-table td:nth-child(8) {		/* 視聴日 */
		font-size: small;
		text-align: start !important;
/*		width: 50%;*/
		width: 75%;
		min-width: 150px;
		-webkit-flex-order: 8;
		-ms-flex-order: 8;
		order: 8;
	}
	
	.movie-table td:nth-child(9) {		/* 視聴回数 */
		font-size: small;
		text-align: start !important;
		width: 50%;
		min-width: 150px;
		-webkit-flex-order: 9;
		-ms-flex-order: 9;
		order: 9;
	}
	
	.movie-table td:nth-child(10) {		/* ステータス */
		font-size: small;
		text-align: start !important;
		width: calc(100% - 150px);
		min-width: 150px;
		-webkit-flex-order: 10;
		-ms-flex-order: 10;
		order: 10;
	}
	
	.movie-table td:nth-child(11) {		/* 合格日 */
		font-size: small;
		text-align: start !important;
		width: calc(100% - 150px);
		min-width: 150px;
		-webkit-flex-order: 11;
		-ms-flex-order: 11;
		order: 11;
	}

	.movie-table td:nth-child(12) {		/* 証明書ボタン */
/*		position: absolute;*/
/*		width: 100px;*/
		width: calc(100% - 150px);
		min-width: 150px;
/*		height: 3.5rem;*/
/*		right: 0;*/
/*		bottom: 0;*/
		-webkit-flex-order: 12;
		-ms-flex-order: 12;
		order: 12;
	}
	.movie-table td:nth-child(12) span {
		font-size: small;
	}

	.movie-table td button {
		height: 100%;
		width: 100%;
	}

	/** 資料一覧 */
	.files-table th {
		display: none;
	}

	.files-table tbody {
		display: -ms-flexbox;
		display: flex;
		justify-content: center;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border-top: 0.5px solid rgba(0, 0, 0, 0.125);
	}

	.files-table tbody tr {
		margin-top: -1px;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		border: 0.5px solid rgba(0, 0, 0, 0.125);
		/*
		border-radius: 0.25rem;
		margin-bottom: 10px;
		*/
/*		margin-bottom: 10px;*/
		width: 100%;
		min-width: 200px;
		outline: none;
		position: relative;
	}

	.files-table td {
		position: relative;
		display: block;
		border: none;
	}

	.files-table td:nth-child(1) {		/* ファイル名 */
		white-space: normal !important;
		width: 100%;
		/* width: calc(100% - 100px); */
		min-width: 100px;
		-webkit-flex-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.files-table td:nth-child(2) {		/* 部署 */
		white-space: normal !important;
		width: 100%;
		/* width: calc(100% - 100px); */
		min-width: 100px;
		-webkit-flex-order: 2;
		-ms-flex-order: 2;
		order: 2;
	}

	.files-table td:nth-child(3) {		/* 更新日時 */
		white-space: normal !important;
		font-size: small;
		text-align: end !important;
		width: 100%;
		/* width: calc(100% - 100px); */
		min-width: 100px;
		-webkit-flex-order: 3;
		-ms-flex-order: 3;
		order: 3;
	}

	.files-table td:nth-child(4) {		/* リンク */
		font-size: small;
		text-align: start !important;
		position: absolute;
		width: 100px;
    top: 0;
    right: 0;
    bottom: 0;
		-webkit-flex-order: 4;
		-ms-flex-order: 4;
		order: 4;
	}
	
	.files-table td button {
		height: 100%;
		width: 100%;
	}
}


/* 受講証明証 */
@media print {
	@page {
		size: A4 landscape;
		margin: 0;
	}
}

.certificate-bg {
	max-width: 100%;
	width: 750px;
	height: auto;
	margin: auto;
	display: block;
}
.print-off {
	display: none !important;
}


/* bootstrap v3.0からの移植 */
.pagination {
/*  display: inline-block;*/
  padding-left: 0;
  margin: 10px 0;
  border-radius: 4px;
}

.pagination > li {
  display: inline;
}

.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  background-color: #eeeeee;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  cursor: default;
  background-color: #428bca;
  border-color: #428bca;
}

.pagination > .disabled > span,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #999999;
  cursor: not-allowed;
  background-color: #ffffff;
  border-color: #dddddd;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}


/** モーダル系 */

.modal-scroll-body {
	height: calc(100vh - 200px);
/*	overflow-y: scroll;*/
	overflow: scroll;
}

.modal-scroll-body::-webkit-scrollbar {
	width: 10px;
}

.modal-scroll-body::-webkit-scrollbar-track {
	background: #fff;
	border: none;
	border-radius: 10px;
	box-shadow: inset 0 0 2px #777;
}

.modal-scroll-body::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 10px;
	box-shadow: none;
}

.modal-dialog-fluid {
	max-width: inherit;
	width: 98%;
	margin-left: 15px;
}


.setting_tabel_wrapper {
	overflow: scroll;
  white-space: nowrap;
	height: 70vh;
}

.setting_tabel thead th{
  position: sticky;
  position: -webkit-sticky;
  top: -1px;
  z-index: 50;
}
/* .setting_tabel tbody td{
  position: sticky;
  position: -webkit-sticky;
  top: -10px;
  z-index: 10;
} */

.setting_tabel th:nth-child(1) {
	width: 8rem;
}

.setting_tabel th:nth-child(3) {
	width: 15rem;
}

.setting_tabel th:nth-child(4) {
	width: 10rem;
}

.setting_tabel th:nth-child(5) {
	width: 20rem;
}


/* 
	受講状況テーブル
 */
 
.attend_table_wrapper {
	overflow: scroll;
	white-space: nowrap;
/*	height: 75vh;*/
	height: calc(95vh - 350px);
	min-height: 500px;
}
.attend_table {
	border-collapse:separate;
	border-spacing: 0;
	table-layout: fixed;
}
.attend_table table{
  border: 0;
}

.attend_table thead th{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 50;
}

.attend_table thead th:nth-of-type(1){
  z-index: 100;
}
.attend_table thead th:nth-of-type(2){
  z-index: 100;
}
.attend_table thead th:nth-of-type(3){
  z-index: 100;
}

.attend_table td, .attend_table th{
  border: 1px #dee2e6 solid;
}
.attend_table th{
  border-left: 0;
}
.attend_table thead th{
  border-top: 0;
}

.staff_id  {
	width: 8rem;
	min-width: 8rem;
	max-width: 8rem;
  position: sticky;
  position: -webkit-sticky;
	left: 0;
  z-index: 20;
}
tbody .staff_id {
	background: #fff;
}

.staff_name {
	width: 12rem;
	min-width: 12rem;
	max-width: 12rem;
  position: sticky;
  position: -webkit-sticky;
	left: 8rem;
  z-index: 20;
}
tbody .staff_name {
	background: #fff;
}

.department_name {
	width: 12rem;
	min-width: 12rem;
	max-width: 12rem;
  position: sticky;
  position: -webkit-sticky;
	left: 20rem;
  z-index: 20;
}
tbody .department_name {
	background: #fff;
}

.attend {
	vertical-align: top !important;
	width: 3rem;
	min-width: 3rem;
	max-width: 3rem;
}

.course_title {
	writing-mode: vertical-lr;
/*	max-height:10rem;*/
	max-height:6rem;
	overflow: hidden;
    text-overflow: ellipsis;
} 

.attend_table thead th.sortable {
	background-position: bottom 10px right;
}
.attend_table thead th.sort-asc {
	background-position: bottom 10px right;
}
.attend_table thead th.sort-desc {
	background-position: bottom 10px right;
}

.attend_table thead th.sortable a {
	text-decoration: none;
	color:black; 
	display: block;
	margin-right: 30px;
/*	padding-top: 9rem;*/
	padding-top: 5rem;
	padding-bottom: 0.5rem;
}

.sticky_th_p {
	padding: 0 !important;;
}
.sticky_th_p:hover {
}
.sticky_th_ttl{
	cursor: pointer;
}
.sticky_th_ttl:hover {
	border-top: 2px #dee2e6 solid;
}