/* Body */
body {
	color: #344050;
	font-size: 0.85rem;
}

/* ナビゲーションバー（サイド） */
.navbar-vertical.navbar-vibrant .navbar-collapse {
	background-image: none;
	background: linear-gradient(-45deg, rgba(0, 160, 255, 0.86), #0048A2);
}

/* ログイン情報 */
#dvLoginInfo {
	margin-top: 0.725rem !important;
	margin-bottom: 0.725rem !important;
}

/** 受講生、講師詳細画面の画像表示用 */
.rounded-circle.img-thumbnail:not(#imgUser) {
	object-fit: cover;
	height:170px;
}

/*┌───────────────────────
	ローディング
　└─────────────────────── */
.loading {
	z-index: 99;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	text-align: center;
	vertical-align: middle;
	background: rgba(255, 255, 255, 0.5);
}

/*┌─────────────────────────
	TOPへ戻る
　└───────────────────────── */
#pageTop {
	display: none;
	position: fixed;

	font-size: 1.44rem;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	vertical-align: middle;
	background-color: #2C7BE5;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	bottom: 0;
	right: 0;
	margin-bottom: 1rem;
	margin-right: 0.25rem;

	opacity: 0.6;
	z-index: 99999;
}
#pageTop a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
}
#pageTop a:hover {
	opacity: 0.7;
}

/*┌─────────────────────────
	タイトルエリア
　└───────────────────────── */
.bgTitleArea {
	background-image: url(../img/illustrations/corner-4.png);
}
/* 画面タイトル */
#dvTitle {
	color: #344050;
	font-size: 1.25rem;
}
[name=dvTitleArea] ol.breadcrumb {
	padding-top: 0px;
	padding-bottom: 0px;
}

/*┌─────────────────────────
	カード
　└───────────────────────── */
.card .form-control,
.card-body {
	font-size: 0.85rem;
}
/* コース詳細のチャプターヘッダ */
[name=courseChapterCard] .card-header {
	cursor: pointer;
}

/*┌─────────────────────────
	モーダル
　└───────────────────────── */
.modal,
.modal .form-control {
	font-size: 0.85rem;
}
.modal-header {
	border-bottom: 0px;
}
.modal-body {
	background-color: #F9FAFD;
}
.modal-footer {
	border-top: 0px;
}

/*┌─────────────────────────
	テーブル
　└───────────────────────── */
/* テーブル行　※ 「.align-items-center」と同じ指定 */
tr {
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
}
/* テーブル列　※ 「.align-middle」と同じ指定 */
td {
	vertical-align: middle !important;
}
/* 詳細画面用リストTableタグ　パディング設定 */
.table.table_dtl_list tr th:first-child,
.table.table_dtl_list tr td:first-child {
	padding-left: 0.3rem;
}

th.w_4 {
	width: 4%;
}
th.w_10 {
	width: 10%;
}
th.w_12 {
	width: 12%;
}
th.w_16 {
	width: 16%;
}
th.w_17 {
	width: 17%;
}
th.w_20 {
	width: 20%;
}
th.w_21 {
	width: 21%;
}
th.w_30 {
	width: 30%;
}
th.w_32 {
	width: 32%;
}
th.w_45 {
	width: 45%;
}

/* ↓↓↓イベント確認一覧テーブル用設定↓↓↓ */
table[id="tblEvent"] tbody tr > td {
	border: 0.5px solid #D8E2EF;
	border-left: none !important;
	border-top: none !important;
}
table[id="tblEvent"] tbody tr:last-of-type td {
	border-bottom: none !important;
}
table[id="tblEvent"] tbody tr td:last-of-type {
	border-right: none !important;
}
table[id="tblEvent"] tbody tr th {
	background-color: #EDF2F9;
}
/* ↑↑↑イベント確認一覧テーブル用設定↑↑↑ */

/* 行ヘッダ　折り返しなし設定 */
table > thead > tr > th {
	white-space: nowrap !important;
}
/* 行ヘッダ　縦中央揃え */
table > tbody > tr > th {
	vertical-align: middle !important;
}
/* テーブル下線 */
table.table_border_bottom tbody tr:last-child th,
table.table_border_bottom tbody tr:last-child td {
	border-bottom: 1px solid #edf2f9 !important;
}

/*┌─────────────────────────
	テーブルヘッダ固定
　└───────────────────────── */
/* 固定対象TBLの親要素 */
#sticky-table-wrapper {
	overflow: auto;
	width: 100%;
	height: 400px;
}
#sticky-table-y-wrapper {
	overflow-y: auto;
	overflow-x: hidden;
	width: 100%;
	height: 400px;
}
table.sticky-table {
	border-collapse:separate;
	border-spacing: 0px;
}
/* 縦スクロール時に固定 */
table.sticky-table thead tr[class*="fixed-header-"] th {
	background-color: #EDF2F9;
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
}
/* 横スクロール時に固定 */
table.sticky-table thead tr[class*="fixed-header-"] th[class*="fixed-column-"],
table.sticky-table tbody tr th[class*="fixed-column-"] {
	background-color: #EDF2F9;
	position: -webkit-sticky;
	position: sticky;
}
/* ヘッダー行内の他のセルより手前に表示 */
table.sticky-table thead tr[class*="fixed-header-"] th[class*="fixed-column-"] {
	background-color: #EDF2F9;
	z-index: 2;
}

table.sticky-table thead tr th {
  min-width:55px;
}

table[id="tblEvent"] tbody tr:hover th,
table[id="tblEvent"] tbody tr:hover td  {
	background-color: #ECECEC;
}

/*┌─────────────────────────
	ウィザード
　└───────────────────────── */
/* ウィザード　色 */
.theme-wizard .nav-link.active .nav-item-circle {
	background-color: #E0FAEF !important;
	color: #00D27A;
	border-color: #00D27A;
}
.theme-wizard .nav-link.active {
	color: #00D27A;
}
/* ウィザード　1つのみの場合のハンドル除去 */
.theme-wizard .nav-item:last-child .nav-item-circle-parent.onlyItem:before {
	content: none;
}
[name=titleLesson] {
	color: #2c7be5;
	cursor: pointer;
}

/*┌─────────────────────────
	バッジ
　└───────────────────────── */
/* バッジ　完了済　色 */
.badgeComp {
	color: #fff;
	background-color: #00d27a;
	margin-left: 0.5rem !important;
}
/* バッジ　受講中　色 */
.badgeLearn {
	color: #00d27a !important;
	border: 1px solid #00d27a !important;
	background-color: #ccf6e4;
	margin-left: 0.5rem !important;
	margin-bottom: 0.25rem !important;
}
/* バッジ　未実施　色 */
.badgeLock {
	color: #9da9bb !important;
	border: 1px solid #d8e2ef !important;
	background-color: #fefeff;
	margin-left: 0.5rem !important;
	vertical-align: middle !important;
}

/*┌─────────────────────────
	FlatPicker：年月日カレンダー 設定
　└───────────────────────── */
/* カレンダー文字色　日曜 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
	color: #E63757;
}
/* カレンダー文字色　土曜 */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
	color: #2C7BE5;
}
/* カレンダー文字色　土曜日曜（選択時） */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day.selected:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day.selected:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
	color: #FFFFFF;
}
/* カレンダー内の年月 */
.flatpickr-month .flatpickr-current-month  .flatpickr-monthDropdown-months,
.flatpickr-month .numInputWrapper .numInput.cur-year {
	font-size: 0.9rem;
}
/* 入力項目エラー色 */
.flatpickr-input[readonly].alert-danger {
	background-color: #FAD7DD;
}
/* 入力項目非活性時背景色 */
.flatpickr-input[disabled] {
	background-color: #EDF2F9;
}

/*┌─────────────────────────
	Select2
　└───────────────────────── */
/* 枠線 */
.select2-container--default .select2-selection--multiple {
	border-color: #d8e2ef;
}
/* 枠線　フォーカス時 */
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-color: #9ec2f3;
	box-shadow: 0 0 0 0.2rem rgb(44 123 229 / 25%);
}
/* 選択肢　上下余白 */
.select2-results__options .select2-results__option {
	padding-top: 0.1rem;
	padding-bottom: 0.1rem;
}

/*┌─────────────────────────
	Prism
　└───────────────────────── */
/* Preタグ外側の影削除 */
pre[class*=language-]:after, pre[class*=language-]:before {
	box-shadow: none;
}
.token.comment,
.token.block-comment {
	color: #6fb88b;
}

/*┌─────────────────────────
	Lesson
　└───────────────────────── */
[name=dvLesson] {
	min-width: 12rem;
}
[name=dvLesson] .bg-holder {
	background-image: url(../img/illustrations/corner-2.png);
}
[name=dvLesson] .bg-holder.exam {
	background-image: url(../img/illustrations/corner-1.png);
}
[name=dvLesson] [name=dvTerm] {
	color: #344050;
	font-weight: nomal;
	margin-bottom: 0;
}
[name=dvLesson] a {
	text-decoration: none;
}

/*┌─────────────────────────
	コース Chapter
　└───────────────────────── */
/* 目次 */
#contentsModalLabel {
	z-index: 1000;
	top: 30%;
	right: 0;
	writing-mode: vertical-rl;
}
/* コース内画像 */
[name=courseChapterCard] img {
	border: 1px solid #D8E2EF !important;
	max-width: 600px;
	margin-bottom: 2rem;
}
/* コース内画像　tableタグ内は下マージンなし */
[name=courseChapterCard] .table img {
	margin-bottom: 0;
}
/* コース内Tableタグ　枠色 */
[name=courseChapterCard] .table.table-bordered th,
[name=courseChapterCard] .table.table-bordered td {
	border: 1px solid #D8E2EF;
}
/* コース内Tableタグ　パディング設定 */
[name=courseChapterCard] .table tr th:first-child,
[name=courseChapterCard] .table tr td:first-child {
	padding-left: 0.3rem;
}

/*┌─────────────────────────
	FullCalendar：カレンダー 設定
　└───────────────────────── */
/* 背景色：日曜ヘッダ */
th.fc-day-sun {
	background-color: #FCE7EB;
	width: 10%;
}
/* 背景色：日曜ボディ */
td.fc-day-sun {
	background-color: #FFF4F6;
	width: 10%;
}
/* 背景色：土曜ヘッダ */
th.fc-day-sat {
	background-color: #E6EFFC;
	width: 10%;
}
/* 背景色：土曜ボディ */
td.fc-day-sat {
	background-color: #F2F6FC;
	width: 10%;
}
/* 背景色：日付 */
.fc .fc-daygrid-day-number {
	background-color: transparent;
}
/* タイトル（年月、年月日範囲）文字 */
h2.fc-toolbar-title {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* ボタン（btn-sm と同じ指定） */
.fc-header-toolbar > .fc-toolbar-chunk > button {
	padding: 0.1875rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}
/* ヘッダと日付のスペースサイズ */
[name=scheduleWeek].fc .fc-toolbar.fc-header-toolbar {
	margin-bottom: 0.8em;
}
#cdSceduleCalendarSch [name=scheduleMonth].fc .fc-toolbar.fc-header-toolbar {
	margin-bottom: -0.8em;
}
/* イベント：文字 */
.fc-event-time,
.fc-event-title {
	font-weight: normal !important;
	font-size: 0.7rem;
}
.fc-h-event {
	line-height: 1.2;
}
/* イベント表示（時間・内容の表示設定） */
.fc-h-event .fc-event-main-frame {
	display: block;
}
.fc .fc-dayGridMonth-view .fc-event-time {
	display: block;
}
/* イベント：はみだし設定 */
.fc-h-event .fc-event-title {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* イベント：スケジュール　カーソル */
.fc-daygrid-block-event.evTmSchedule {
	cursor: pointer;
}
/* イベント：スケジュール　重複色 */
.fc-daygrid-block-event.evTmSchedule.evDuplicate {
	border: 2px solid #FFD700 !important;
}

/*┌─────────────────────────
	フォーム
　└───────────────────────── */
/* セレクトボックス：フォント */
select {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* セレクトボックス：幅 */
.select_w200 {
	width: 200px;
}
/* 読取専用：背景色 */
.form-control[readonly] {
	background-color: #FFF;
}
.form-control[readonly].alert-danger {
	background-color: #FAD7DD;
}

/*┌─────────────────────────
	datetimepicker幅
　└───────────────────────── */
.datetimepicker_min {
	width: 120px;
	padding-right: 0px !important;
}

/*┌─────────────────────────
	アイコン
　└───────────────────────── */
.icon_warn {
  color: #FFD700;
}
.icon_yellow {
  color: #f2ab26;
}
/* ペナルティカードアイコン：縦反転 */
.warningCard .fa-file {
	transform: scaleY(-1);
}

/*┌─────────────────────────
	はみ出し設定
　└───────────────────────── */
.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/*┌─────────────────────────
	掲示板用
　└───────────────────────── */
.msg_box {
  background:#ffffff; /*背景色の指定*/
  border: #dcdcdc 1px solid; /*境界線の指定*/
  border-radius: 6px; /*角丸の指定*/
  padding:20px;
}
.msg_box p {
  margin:0;
}
.addr_box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*┌─────────────────────────
	理解度テスト用
　└───────────────────────── */
.question_area {
	border: #d8e2ef solid 1.5px;
	border-left: #358ccb solid 10px;
	padding: 16px;
	margin-bottom: 8px;
	background: #fff;
	font-size: 100%;
}
.question {
	margin-top: 8px;
	background: #fff !important;
	margin-left: 12px !important;
	margin-bottom: 0px !important;
	border: none !important;
	font-size: 100% ;
}

.border_line {
	border: #dfdfdf solid 1px !important;
	box-shadow:0 0 0 0 #dfdfdf !important;
}


.modelanswer_area {
	border: #d8e2ef solid 1.5px;
	border-left: #edf2f9 solid 10px;
	padding: 20px;
	margin-top: 8px;
	margin-bottom: 12px;
	background: #fff;
	font-size: 100%;
}

.modelanswer {
	margin-top: 8px;
	margin-left: 12px;
	margin-bottom: 0px !important;
	border: none !important;
	font-size: 100% ;
}

.console_color {
	background: #000; /*背景色の指定*/
	color: #fff;
}

.answer_area {
	background: #f9fafd;
	width: 73%;
	/*border: #edf2f9 solid 1px;*/
	/* padding: 8px; */
}

/*┌─────────────────────────
	開閉ボタン
　└───────────────────────── */
.acd_check{
	display: none;
}
.acd_label{
	margin-bottom: 1px;
}

.flex_box {
	display: flex;
	/*align-items: center;*/
	padding: 2px;
	margin-top: 12px;
}
.flex_box > div:nth-of-type(2){
	margin-right: auto;
}

.flex_textarea {
	width: 73%;
}

.acd_label > .acd_icon::after {
	font-family: "Font Awesome 5 Free";
	content: "\f078";
	font-weight: 900;
}
.acd_check:checked + .acd_label > .acd_icon::after {
	font-family: "Font Awesome 5 Free";
	content: "\f077";
	font-weight: 900;
}

/*┌─────────────────────────
	フォントサイズ
　└───────────────────────── */
.fsize85 {
	font-size: 85%;	/* 文字サイズ指定 */
	font-weight: 400;
}

/*┌─────────────────────────
	ファイルリンク
　└───────────────────────── */
.fileLink {
	text-decoration: underline;
}

/*┌─────────────────────────
	ゴミ箱アイコン
　└───────────────────────── */
.icon_box {
	position: relative;
}
.icon_box .far_right {
	position: absolute;
	right: 0;
	bottom: 0;
	margin-bottom: 0px;
}
.icon_box a.chat-option {
	opacity: 0;
}
.icon_box:hover a.chat-option {
	opacity: 0.7;
}
.icon_box a.chat-option:hover {
	opacity: 1;
}

/*┌─────────────────────────
	編集アイコン
　└───────────────────────── */
.icon_box .second_right {
	position: absolute;
	right: 30px;
	bottom: 0;
	margin-bottom: 0px;
}

/*┌─────────────────────────
	通知アイコン
　└───────────────────────── */
.notification-indicator-number {
	right: -0.05rem;
	top: 0.25rem;
	font-weight: 600;
	font-size: 0.25rem;
}
.notification-indicator::before {
	right: 0.0rem;
	top: 0.2rem;
	height: 1rem;
	width: 1rem;
	background-color: #e63757;
}

/*┌─────────────────────────
	Toastr：表示色
　└───────────────────────── */
#toast-container .toast-info {
	background-color: #5E6E82;
	color: #FFF;
}

/*┌─────────────────────────
	幅調整用
　└───────────────────────── */
.w12px {
	width: 12px;
}
.w65px {
	width: 65px;
}

.w_12_5 {
	width: 12.5%;
}
.w_23 {
	width: 23%;
}
.w_55 {
	width: 55%;
}

/*┌─────────────────────────
	セル選択
　└───────────────────────── */
table td.cell_select {
	padding: 0 !important;
	text-align: center;
}
table td.cell_select label {
	padding: 0.8em 0.8em 0.5em 1em;
	margin: 0;
}

/*┌─────────────────────────
	感情アイコン用
　└───────────────────────── */
.radio-icon-input {
	display: none;
}
.radio-icon {
	width: 2rem;
	height: 2rem;
	display: block;
}
.radio-icon-editable {
	cursor: pointer;
}
.radio-icon-input:checked + .radio-icon:before {
	color: #5867dd;
}
.radio-icon-input + .radio-icon:before {
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	color: #ccc;
}

/*┌─────────────────────────
	コードブロック用
　└───────────────────────── */
div.code-toolbar > .toolbar {
	/* ツールバーの位置調整 */
	top: .1em;
}