@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);
/* ==========================================================================
   Common
   ========================================================================== */
body {
	font-family: "Noto Sans JP";
	margin: 0;
}

.item-hide {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}

.contents-color-message {
	color: var(--message-color);
}
.contents-color-information {
	color: var(--information-color);
	/*	border-bottom: 5px solid;*/
}
.contents-color-report {
	color: var(--report-color);
}
.contents-color-materials {
	color: var(--materials-color);
}
.contents-color-examination {
	color: var(--examination-color);
}
.contents-color-surveys {
	color: var(--surveys-color);
}
.contents-color-forum {
	color: var(--forum-color);
}
.contents-color-attendances {
	color: var(--attendances-color);
}
.contents-color-externaltool {
	color: var(--externaltool-color);
}
.contents-color-cabinet {
	color: var(--cabinet-color);
}
.contents-color-eventcalendar {
	color: var(--eventcalendar-color);
}
.contents-color-main {
	color: var(--main-color);
}
.contents-color-light {
	color: var(--light-color);
}

.background-color-main {
	background-color: var(--main-color);
}
.background-color-box {
	background-color: var(--box-color);
}
.background-base {
	background-image: var(--base-image);
	background-size: cover;
}

.clearfix:after {
	visibility: hidden;
	height: 0;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
}

.ui-button-icon-only.hour-select {
	width: 2px;
	height: 29px;
	margin-left: -33px;
}

/*@media ( max-width : 480px) {
	.ui-button-icon-only.hour-select {
		height: 25px;
		margin-left: -28px;
	}
}*/

.ui-button-icon-only.time-select {
	height: 29px;
	/*	position: absolute;*/
	margin-left: -29px;
	width: 2px;
}

/*@media ( max-width : 480px) {
	.ui-button-icon-only.time-select {
		height: 25px;
		margin-left: -25px;
	}
}*/

.commonDialogButtonArea {
	align-items: center;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: center;
	float: none;
}

/* Progress Popup */
.common-progress {
	animation: spin 0.7s linear infinite;
	-moz-animation: spin 0.7s linear infinite;
	-webkit-animation: spin 0.7s linear infinite;
	border-radius: 50%;
	border: 8px solid var(--ruled-line);
	border-right-color: transparent;
	bottom: 0px;
	height: 45px;
	left: 0px;
	margin: auto;
	position: absolute;
	right: 0px;
	top: 15px;
	width: 45px;
}

.progress-popup-area {
	overflow: hidden;
}

.progress-popup-block {
	padding: 10px 0px;
}

.progress-popup-txt {
	color: var(--base-font);
	text-align: center;
	font-size: 15px;
	line-height: 24px;
	padding: 18px 0;
}

.page-main {
	width: calc(100% - 250px);
	min-width: 693px;
	background-color: #edf3f7;
	float: left;
	/* position: absolute; */
	left: 250px; /* sidemenu分移動 */
	/*transition: all 300ms 0s ease;
	-webkit-transition: all 300ms 0s ease;*/

	display: flex;
	flex-direction: column;
	min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */
	position: relative; /* ←相対位置 */
	padding-bottom: 150px; /* ←フッターの高さを指定 */
	box-sizing: border-box;
}

@media (max-width: 480px) {
	.page-main {
		min-width: initial;
		min-width: auto;
		width: 100%;
		float: none;
		left: 0;
	}
}

@media screen and (min-width: 481px) and (max-width: 1300px) {
	.page-main {
		min-width: 1040px;
	}
}

.sidemenu-hide {
	width: calc(100% - 70px);
	left: 70px;
}

/* 180612add// */
@media (max-width: 480px) {
	.sidemenu-hide {
		min-width: initial;
		min-width: auto;
		left: 0;
		width: 100%;
	}
}

.control-list-txt {
	padding-left: 25px;
	width: 10%;
}

@media (max-width: 480px) {
	.control-list-txt {
		display: inline-block;
		/*margin-top: 7%;*/
		padding: 0;
		text-align: center;
		vertical-align: middle;
		width: 100%;
	}
}

.contents-exchange-block-inline {
	display: inline-block;
}

@media (max-width: 480px) {
	.contents-exchange-block-inline {
		display: block;
		margin-bottom: 3px;
	}
}

/* 操作ボタン */
.control-menu {
	background-color: var(--box-color);
	box-shadow: 5px 5px 5px #c2c2c2;
	display: none;
	width: 145px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 35px;
	z-index: 15;
}

.control-menu-colomn {
	-webkit-justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	color: var(--base-font);
	cursor: pointer;
	display: flex;
	font-size: 93%;
	font-weight: bold;
	height: 49px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
}

.control-menu-colomn:hover {
	color: var(--hover-color);
}
.control-menu .control-list:nth-child(2n-1) {
	background-color: var(--box-color);
}

.control-menu .control-list:nth-child(2n) {
	background-color: #fffaf0;
}

/* 画面上部 ユーザ情報部分 */
.login-view {
	background-color: #edf3f7;
	padding: 0 30px 7px 34px;
}

@media (max-width: 480px) {
	.login-view {
		padding: 0 13px 13px;
	}
}

.login-view-name {
	float: right;
	padding-top: 8px;
}

@media (max-width: 480px) {
	.login-view-name {
		padding-bottom: 15px;
	}
}

/* 表示枠部品 */
.block {
	border: 2px solid var(--ruled-line);
	border-radius: 10px;
	background-color: var(--box-color);
	margin: 30px;
	padding: 20px;
}

@media (max-width: 480px) {
	.block {
		font-size: 93%;
		margin: 30px 15px;
		padding: 10px;
	}
}

.block:last-child {
	margin-bottom: 0;
}

.flex {
	display: flex;
}

@media (max-width: 480px) {
	.flex {
		display: block;
	}
}

.block-title {
	position: relative;
	/*margin: 10px 0;*/
}

@media (max-width: 480px) {
	.block-title {
		float: none;
	}
}

.block-title-underline {
	width: 100%;
	border-bottom: 5px solid;
	margin-bottom: 10px;
}

.block-title-question {
	width: 100%;
	border-left: 5px solid var(--surveys-color);
	margin-bottom: 10px;
}

.block-dummy {
	padding-bottom: 55px;
}

@media (max-width: 480px) {
	.block-dummy {
		padding-bottom: 0px;
	}
}

.block-cube {
	min-height: 185px;
	min-width: 190px;
}

@media (max-width: 480px) {
	.block-cube {
		min-height: auto;
		width: 100%;
	}
}

.block-wide {
	padding: 10px 25px 10px;
}

@media (max-width: 480px) {
	.block-wide {
		/*display: inline-block;*/
		padding: 7px 5px 7px;
	}
}

.block-title-txt {
	color: var(--base-font);
	text-indent: 10px;
	font-size: 20px;
	font-weight: bold;
	word-break: break-all;
}

/*@media ( max-width : 480px) {
	.block-title-txt {
		font-size: 80%;
		word-break: break-all;
	}
}*/

.block-title-vline {
	border-left: 5px solid; /*線の設定*/
	padding-right: 5px; /*余白の設定*/
}

.block-title-txt-small {
	color: var(--base-font);
	font-size: 16px;
	font-weight: bold;
	word-break: break-all;
}

/* タイトルボタンが存在する場合に必要 */
.block-title-inline {
	display: inline-block;
	width: 56%;
	padding-top: 20px;
}

@media (max-width: 480px) {
	.block-title-inline {
		width: 100%;
	}
}

.cube-block-title-txt {
	background-position: center top;
	background-repeat: no-repeat;
	padding: 65px 10px 0;
	position: relative;
	text-align: center;
	top: calc(50% - 57px);
}

@media (max-width: 480px) {
	.cube-block-title-txt {
		padding: 10px 10px 10px;
		text-align: left;
		position: relative;
	}
}

.block-title-btn {
	/*	bottom: 10px;*/
	right: 15px;
	position: absolute;
}

@media (max-width: 480px) {
	.block-title-btn {
		background-color: inherit;
		margin: 0;
		padding: 0 20px 20px;
		position: relative;
		bottom: 0;
		left: 0;
		float: left;
		width: 100%;
	}
}

.block-contents {
	background-color: var(--box-color);
	float: left;
	width: 100%;
}

@media (max-width: 480px) {
	.block-contents {
		width: 100%;
	}
}

/*TODO blockのプロパティの影がないバージョン 分けれる? */
.block-under-area {
	margin: 30px;
}

@media (max-width: 480px) {
	.block-under-area {
		margin: 30px;
	}
}

.block-under-area-btn {
	margin: 30px;
	text-align: center;
}

.under-area-txt {
	text-align: center;
	margin-bottom: 20px;
}

.under-btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	/*  margin-top: 10px;
  margin-bottom: 10px;*/
}

.disable-under-btn {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	margin-top: 10px;
	margin-bottom: 10px;
}

@media (max-width: 480px) {
	.under-btn {
		display: block;
		margin: 0px 10px 10px 10px;
		min-width: auto;
	}
}

.feedback-transition-btn {
	display: inline-block;
	margin: 0 10px 0 10px;
	width: 80px;
	padding: 7px 14px 5px;
}

.under-btn:hover {
	cursor: pointer;
	background-color: var(--hover-color);
}

.link-txt {
	color: var(--base-font);
	text-decoration: underline;
}

.link-txt:hover {
	opacity: 0.6;
	cursor: pointer;
}

.disabled {
	opacity: 0.6;
	pointer-events: none;
}

.break {
	word-break: break-word;
	word-wrap: anywhere;
}

/* コースコンテンツ内のヘッダー */
.course-edit-block {
	padding: 0 30px 0 30px;
}

.edit-header-txt {
	font-size: 100%;
	font-weight: bold;
	padding: 5px;
	color: #fff;
	text-align: center;
}

.must-operation-color {
	background-color: var(--must-operation-color);
}

.btn-edit-view-area {
	margin-left: 12px;
	padding-top: 5px;
}

@media (max-width: 480px) {
	.btn-edit-view-area {
		display: contents;
	}
}

.course-header {
	background-color: transparent;
}

.course-title-txt {
	border-top: 2px solid #d6dadb;
	font-size: 160%;
	font-weight: bold;
	padding: 12px 30px 10px 34px;
}

@media (max-width: 480px) {
	.course-title-txt {
		font-size: 145%;
		float: none;
		padding: 12px 13px 13px;
	}
}

.contents-title {
	padding: 30px 30px 0 30px;
	/*  height: 40px;*/
}

/*@media ( max-width : 480px) {
	.contents-title {
		padding: 2px 13px 1px;
	}
}*/

.contents-title-icon {
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 28px auto;
	padding-left: 35px;
}
/* ヘッダー内に詳細を書く場合はcontents-titleではなくこっちで対応 */
.course-header-detail {
	border-top: 1px solid #d6dadb;
	margin: 10px 10px;
}

.contents-title-txt {
	color: var(--base-font);
	font-size: 28px;
	font-weight: bold;
	/*	position: absolute;
	margin-left: 10px;*/
}

/*@media ( max-width : 480px) {
	.contents-title-txt {
		font-size: 80%;
	}
}*/

.contents-detail {
	width: 100%;
}

.contents-list {
	border-top: 0px;
}

.contents-display-flex {
	align-items: center;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: flex-start;
	padding: 5px 5px 5px 20px;
}

@media (max-width: 480px) {
	.contents-display-flex {
		padding: 5px;
	}
}

/* スマートフォン用に作成 */
.contents-display-flex-exchange-sp {
	align-items: center;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: flex-start;
}

@media (max-width: 480px) {
	.contents-display-flex-exchange-sp {
		display: block;
	}
}

.contents-display-flex-padding-sp {
	padding: 8px 6px 6px 20px;
}

@media (max-width: 480px) {
	.contents-display-flex-padding-sp {
		padding: 6px 6px 6px 6px;
	}
}
/*TODO 隙を見て変更する
.display-flex{
	justify-content: flex-start;
	padding: 8px 6px 6px 20px;
}

.feedback-flex{
	justify-content: space-between;
	padding: 8px 6px 6px 20px;
}

.question-template-new-flex{
	justify-content: flex-end;
	width: 13%;
}

*/
.contents-feedback-flex {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: space-between;
	padding: 8px 6px 6px 20px;
}

@media (max-width: 480px) {
	.contents-feedback-flex {
		padding: 10px 6px 6px 6px;
	}
}

/*TODO 最終的にreport.cssに移動*/
.contents-report-all-status-block-flex {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: flex-start;
	padding: 8px 6px 6px 20px;
}

@media (max-width: 480px) {
	.contents-report-all-status-block-flex {
		padding: 8px 0px;
	}
}

.contents-report-all-status-flex {
	align-items: center;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	height: 35px;
	justify-content: space-around;
}

@media (max-width: 480px) {
	.contents-report-all-status-flex {
		height: 50px;
	}
}

.contents-survey-all-status-flex {
	align-items: center;
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	height: 35px;
	justify-content: space-around;
}

@media (max-width: 480px) {
	.contents-survey-all-status-flex {
		height: 50px;
	}
}

.result-list {
	border-bottom: 1px solid #ddd;
}

@media (max-width: 480px) {
	.result-list {
		display: block;
	}
}

.result-list:nth-child(2n-1) {
	background-color: var(--box-color);
}

.result-list:nth-child(2n) {
	background-color: #fffaf0;
}

.course-result-list {
	border-bottom: 1px solid #ddd;
}

.course-result-list:nth-of-type(odd) {
	background-color: var(--box-color);
}

.course-result-list:nth-of-type(even) {
	background-color: #fffaf0;
}

@media (max-width: 480px) {
	.course-result-list {
		display: block;
	}
}

.contents-tag {
	border-bottom: 2.5px solid #ddd;
}

.contents-vertical {
	border-bottom: 1px solid var(--ruled-line);
	display: table;
}

.contents-header {
	display: table-cell;
	padding: 9px 15px 9px 25px;
	vertical-align: middle;
	width: 20%;
}

@media (max-width: 480px) {
	.contents-header {
		display: block;
		padding: 7px 5px 7px 5px;
		width: 100%;
	}
}

.table-base {
	background-color: var(--table-background);
}

.table-line {
	border-top: 1px solid var(--ruled-line);
	border-bottom: 1px solid var(--ruled-line);
}

.contents-complete {
	min-height: 80px;
	position: relative;
}

.contents-complete-icon {
	height: 70px;
	width: 70px;
	margin-top: 40px;
	margin-bottom: 20px;
}

.complete-icon-area {
	min-height: 100px;
	position: relative;
	display: flex;
	justify-content: space-around;
}

.contents-complete-message {
	background-color: var(--table-background);
	font-size: 120%;
	left: 50%;
	position: absolute;
	text-align: center;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: flex;
	justify-content: space-around;
	align-items: center;
}
@media (max-width: 480px) {
	.contents-complete-message {
		font-size: 93%;
		left: 50%;
		position: absolute;
		text-align: center;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
	}
}

.contents-header-txt {
	font-weight: bold;
}

.bold-txt {
	font-weight: bold;
}

.caution-txt {
	color: red;
}

.highlight-txt {
	color: var(--warning-color);
}

.margin-center {
	margin-left: auto;
	margin-right: auto;
}

/* ステップバー */
.stepbar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 27px auto 30px;
	list-style-type: none;
	z-index: 0;
	position: relative;
	padding: 0;
	text-align: center;
}

.stepbar-item {
	width: 100px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 5px;
}

.stepbar-item::after {
	content: "";
	width: 100px;
	height: 5px;
	background-color: var(--place-holder);
	display: block;
	position: absolute;
	top: 15px;
	z-index: -1;
	right: -50%;
}

@media screen and (max-width: 480px) {
	.stepbar-item {
		width: 60px;
	}
	.stepbar-item::after {
		width: 60px;
	}
}

.stepbar-item:last-of-type::after {
	display: none;
}

.stepbar-num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: var(--place-holder);
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	line-height: 30px;
}

.stepbar-txt {
	font-size: 16px;
	line-height: 1.2;
	color: var(--place-holder);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
}

.stepbar-item.current .stepbar-num {
	font-weight: bold;
}

.stepbar-item.current .stepbar-txt {
	color: var(--base-font);
	font-weight: bold;
}

.stepbar-item.done .stepbar-txt {
	color: var(--base-font);
}

.stepbar--main .stepbar-item.current .stepbar-num,
.stepbar--main .stepbar-item.done .stepbar-num,
.stepbar--main .stepbar-item.done:after {
	background-color: var(--main-color);
}
.stepbar--information .stepbar-item.current .stepbar-num,
.stepbar--information .stepbar-item.done .stepbar-num,
.stepbar--information .stepbar-item.done:after {
	background-color: var(--information-color);
}

.stepbar--report .stepbar-item.current .stepbar-num,
.stepbar--report .stepbar-item.done .stepbar-num,
.stepbar--report .stepbar-item.done:after {
	background-color: var(--report-color);
}

.stepbar--exam .stepbar-item.current .stepbar-num,
.stepbar--exam .stepbar-item.done .stepbar-num,
.stepbar--exam .stepbar-item.done:after {
	background-color: var(--examination-color);
}

.stepbar--forum .stepbar-item.current .stepbar-num,
.stepbar--forum .stepbar-item.done .stepbar-num,
.stepbar--forum .stepbar-item.done:after {
	background-color: var(--forum-color);
}

.stepbar--lti1p3 .stepbar-item.current .stepbar-num,
.stepbar--lti1p3 .stepbar-item.done .stepbar-num,
.stepbar--lti1p3 .stepbar-item.done:after {
	background-color: var(--externaltool-color);
}

.stepbar--surveys .stepbar-item.current .stepbar-num,
.stepbar--surveys .stepbar-item.done .stepbar-num,
.stepbar--surveys .stepbar-item.done:after {
	background-color: var(--surveys-color);
}

.stepbar--materials .stepbar-item.current .stepbar-num,
.stepbar--materials .stepbar-item.done .stepbar-num,
.stepbar--materials .stepbar-item.done:after {
	background-color: var(--materials-color);
}

.stepbar--attendances .stepbar-item.current .stepbar-num,
.stepbar--attendances .stepbar-item.done .stepbar-num,
.stepbar--attendances .stepbar-item.done:after {
	background-color: var(--attendances-color);
}

.stepbar--eventcalendar .stepbar-item.current .stepbar-num,
.stepbar--eventcalendar .stepbar-item.done .stepbar-num,
.stepbar--eventcalendar .stepbar-item.done:after {
	background-color: var(--eventcalendar-color);
}

/* ボタン部品 */
.btn,
.under-btn,
.disable-under-btn {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 5px 20px;
	min-width: 90px;
	min-height: 25px;
	-webkit-transition: all 300ms 0s ease !important;
	transition: all 300ms 0s ease !important;
}

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

.btn:hover {
	cursor: pointer;
}

.btn-new {
	background-image: url(/img/add_icon-93f37cfd559352085d19dbba5a02d9ac.svg);
	border-radius: 50%;
	height: 27px;
	width: 27px;
}

.btn-new-color {
	filter: invert(65%);
	margin-right: 5px;
}

/*TODO 名称変更*/
/* 2つ以上のボタンが存在する時に右側に追加 */
.title-btn {
	margin-left: 20px;
}

.btn-edit {
	width: 25px;
	height: 25px;
	-webkit-mask-image: url(/img/btn_ico_edit-b43d4aa731ed01281c0727baffb08fdb.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/btn_ico_edit-b43d4aa731ed01281c0727baffb08fdb.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

.btn-control {
	background-image: url(/img/control_btn_icon-ad8a3566a96ec5f23781976c1ca88c15.svg);
	background-repeat: no-repeat;
	background-size: 30px, 30px;
	border-radius: 50%;
	cursor: pointer;
	height: 28px;
	position: relative;
	width: 30px;
	transition: all 300ms 0s ease;
}

@media (max-width: 480px) {
	.btn-control {
		float: right;
	}
}

.btn-control:hover {
	background-color: var(--light-color);
}

.btn-control:before {
	content: "";
	border-radius: 3px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all 300ms 0s ease;
}

.btn-control:hover:before {
	background-color: rgba(255, 255, 255, 0.4);
}

.btn-control-none {
	height: 28px;
	position: relative;
	width: 27px;
}

.btn-square {
	height: auto;
	width: 115px;
}

.btn-delete-shape {
	height: 25px;
	width: 70px;
}

.btn-reload {
	margin: 10px;
}

.btn-square-area {
	margin-left: 12px;
	padding-top: 5px;
}

.btn-left {
	float: left;
}

.btn-right {
	float: right;
}

.btn-inline {
	text-align: center;
	display: inline-block;
	padding: 7px 14px 5px;
}

.btn-inline:hover {
	/*	opacity: 0.6;*/
	cursor: pointer;
}

.btn-file-margin {
	margin-left: 10px;
}

@media (max-width: 480px) {
	.btn-file-margin {
		margin-left: 0px;
		margin-bottom: 5px;
	}
}

.btn-txt {
	border-radius: 50px;
	font-size: 100%;
	/*  line-height: 1.2;*/
	font-weight: bold;
	text-decoration: none;
}

/*特大*/
.largest-btn-txt {
	border-radius: 25px;
	padding: 10px 55px 10px 55px;
	font-size: 100%;
	line-height: 1.2;
	font-weight: bold;
	text-decoration: none;
}

/*大*/
.l-btn-txt {
	border-radius: 20px;
	padding: 6px 30px 6px 30px;
	font-size: 100%;
	font-weight: bold;
	text-decoration: none;
}
/*中*/
.midium-btn-txt {
	border-radius: 20px;
	padding: 6px 14px 6px 14px;
	font-size: 100%;
	line-height: 1.2;
	font-weight: bold;
	text-decoration: none;
}
/*小*/
.small-btn-txt {
	border-radius: 20px;
	padding: 4px 14px 4px 14px;
	font-size: 100%;
	line-height: 1.2;
	font-weight: bold;
	text-decoration: none;
}

.btn-color {
	background-color: var(--main-color);
	/*  border: 1px solid var(--main-color);*/
	color: var(--box-color);
	box-shadow: none;
	margin: 10px 20px;
}

.info-detail-btn-color {
	background-color: var(--main-color);
	/*  border: 1px solid var(--light-color);*/
	color: var(--box-color);
	box-shadow: none;
	margin: 0 20px;
}

.btn-color:active {
	box-shadow: none;
}

.white-btn-color {
	background-color: var(--box-color);
	border: 1px solid var(--main-color);
	/*	box-shadow: 0px 2px 3px 1px #40454a;*/
	color: var(--base-font);
	/*	transition: all 300ms 0s ease;*/
}

.white-btn-color:hover {
	background-color: var(--light-color);
}

.white-btn-color:active {
	box-shadow: none;
}

.red-btn-color {
	background-color: var(--warning-color);
	color: var(--box-color);
	transition: all 300ms 0s ease;
}

.red-btn-color:active {
	box-shadow: none;
}

@media (hover: hover) {
	.btn-color:hover {
		background-color: var(--hover-color);
	}
	info-detail-btn-color:hover {
		background-color: var(--hover-color);
	}
	.btn-secondary:hover {
		/*    color: var(--hover-color);*/
		background-color: var(--light-color);
	}
}

/*特大*/
.largest-btn {
	height: 40px;
}
/*大*/
.l-btn {
	height: 35px;
	border-style: none;
}
/*中*/
.medium-btn {
	height: 32px;
}
/*小*/
.small-btn {
	height: 25px;
}

.btn-primary {
	background-color: var(--main-color);
	/*  border: 1px solid var(--main-color);*/
	color: var(--box-color);
}

.btn-secondary {
	/*  min-height: 25px;*/
	background-color: var(--box-color);
	border: 2px solid var(--main-color);
	color: var(--main-color);
	margin: 10px 20px;
	/*  padding: 3px 20px;*/
}

.right-btn-secondary {
	background-color: var(--box-color);
	border: 2px solid var(--main-color);
	color: var(--main-color);
	margin: 0px 20px;
}

.right-btn-secondary:hover {
	background-color: var(--light-color);
}

.btn-forward {
	padding-right: 50px;
	min-height: 35px;
	/*  border-radius: 50px;*/
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	/*          justify-content: flex-start;*/
	position: relative;
	/*  margin: 0 20px;*/
}
.btn-forward::after {
	content: "keyboard_arrow_right";
	font-family: "Material Icons";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--box-color);
	font-size: 18px;
	line-height: 1;
	color: var(--main-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	right: 3px;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
@media (hover: hover) {
	.btn-forward:hover::after {
		color: var(--hover-color);
	}
}

.btn-back {
	background-color: transparent;
	border: none;
	color: var(--main-color);
	position: relative;
	padding-left: 50px;
	margin-right: 22px;
}

.btn-back::before {
	content: "keyboard_arrow_left";
	font-family: "Material Icons";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--main-color);
	font-size: 18px;
	line-height: 1;
	color: var(--box-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	left: 3px;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
@media (hover: hover) {
	.btn-back:hover {
		background-color: var(--hover-color);
	}
	.btn-back:hover::before {
		background-color: var(--hover-color);
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
}

.secondary-btn-back {
	position: relative;
	padding-left: 45px;
	min-height: 32px;
	margin-bottom: 10px;
}

.secondary-btn-back::before {
	content: "keyboard_arrow_left";
	font-family: "Material Icons";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--main-color);
	font-size: 18px;
	line-height: 1;
	color: var(--box-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	left: 3px;
	top: 0;
	bottom: 0;
	margin: auto 0;
}
@media (hover: hover) {
	.secondary-btn-back:hover {
		color: var(--hover-color);
	}
	.secondary-btn-back:hover::before {
		background-color: var(--hover-color);
		-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
}

.newIcon {
	font-weight: bold;
	margin: 0 2px 0 0;
	padding: 0px 3px;
	word-break: keep-all;
	border-radius: 4px;
	font-size: 90%;
	background-color: var(--warning-color);
	color: var(--box-color);
}

/* 入力部品 */
.contents-input-area {
	display: table-cell;
	padding: 9px 15px 9px 25px;
	width: 100%;
	word-break: break-word;
}

@media (max-width: 480px) {
	.contents-input-area {
		display: block;
		font-size: 93%;
		padding: 5px 5px 5px 5px;
		width: calc(100% - 10px);
		word-break: break-word;
	}
}

.input-count {
	text-align: right;
}

@media (max-width: 480px) {
	.input-count {
		margin-top: 5px;
		margin-bottom: 5px;
	}
}

.input {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid var(--input-box);
}

.input-box {
	color: var(--base-font);
	width: calc(100% - 10px);
	padding: 5px 10px;
	font-family: "Noto Sans JP";
}

@media (max-width: 480px) {
	.input-box {
		padding-left: 0;
	}
}

/* 調整中 */
.input-box-url {
	color: #545555;
	padding: 6px 10px;
	width: 70%;
}

.textarea-box {
	padding: 6px 10px;
	resize: none;
	width: calc(100% - 20px);
}

.quil-textarea-box {
	padding: 6px 10px;
	resize: none;
	width: 100%;
}

.textarea-add-box {
	height: 165px;
}

.input-select-box-area {
	background: var(--box-color);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}

/*TODO 時間があるときに上と結合*/
.input-select-small-box-area {
	width: 10%;
}

.input-select-box {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	line-height: 1.5em;
	min-height: 20px;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	width: 100%;
	padding: 5px 1.8em 5px 10px;
	font-family: "Noto Sans JP";
}

.input-select-box-area::before {
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--table-font);
	content: "";
	height: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	top: 1em;
	right: 0.5em;
	width: 0;
}

.input-select-box-area::after {
	bottom: 0;
	position: absolute;
	border-left: 1px solid var(--ruled-line);
	content: "";
	right: 1.6em;
	top: 0;
	width: 1px;
}

.input-file-text-area {
	float: left;
}

.input-calender {
	padding: 5px 10px;
	width: 95px;
	font-family: "Noto Sans JP";
}

@media (max-width: 480px) {
	.input-calender {
		width: 85px;
	}
}

.input-timer {
	padding: 6px 10px;
	width: 80px;
}

@media (max-width: 480px) {
	.input-timer {
		width: 65px;
	}
}

.btn-timer {
	height: 29px;
	padding: 6px 10px;
	width: 2px;
}

/* : */
.contents-time-colon:after {
	content: ":";
	margin-left: 1px;
	margin-right: 1px;
}

/* ～ */
.contents-time-to:after {
	content: "～";
	margin-left: 3px;
	margin-right: 3px;
}

.margin-txt-left {
	margin-left: 10px;
}

.input-radio {
	background-color: transparent;
	border-radius: 100%;
	height: 18px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 0;
	position: relative;
	top: 5px;
	width: 18px;
}

@media (max-width: 480px) {
	.input-radio {
		margin-left: 5px;
	}
}

.input-radio:after {
	content: "";
	background-color: #595656;
	border-radius: 100%;
	display: block;
	height: 10px;
	left: 3px;
	top: 3px;
	opacity: 0;
	position: absolute;
	width: 10px;
}

.input-radio:checked:after {
	opacity: 1;
}

.no-top-input-radio {
	top: 0;
}

.input-checkbox {
	background-color: transparent;
	border-radius: 0;
	height: 18px;
	margin-right: 10px;
	padding: 0;
	position: relative;
	top: 4px;
	width: 18px;
}

@media (max-width: 480px) {
	.input-checkbox {
		margin: 0;
	}
}

.input-checkbox-label {
	vertical-align: 3px;
}

.input-checkbox:after {
	content: "";
	border-right: 2px solid #231815;
	border-bottom: 2px solid #231815;
	display: block;
	height: 8px;
	left: 4px;
	opacity: 0;
	position: absolute;
	top: 2px;
	transform: rotate(45deg);
	width: 5px;
}

.input-checkbox:checked:after {
	opacity: 1;
}

.input-small-box {
	padding: 5px 10px;
	/*	width: 80px;*/
	display: inline-block;
}

.up-sortmark {
	cursor: pointer;
}

.sortmark {
	cursor: pointer;
}

.up-sortmark:after {
	content: "△";
}

.sortmark:after {
	content: "▽";
}

/* ユーザグループ選択部品 */
.user-group-checkbox {
	width: 5%;
}

.user-group-name {
	width: 90%;
}

/* ユーザグループ詳細(ポップアップ) */
.user-group-list-user-number {
	margin-left: 15px;
	width: 33%;
}

.user-group-list-user-id {
	margin-left: 15px;
	width: 33%;
}

.user-group-list-user-name {
	margin-left: 15px;
	width: 33%;
}

/* 説問追加およびテンプレートエリア */

/*TODO 調整中(contents-display-flex) */
.contents-question-template-area {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	/*justify-content: flex-end;*/
}

.contents-question-template-select-area {
	display: flex;
	justify-content: flex-end;
}

.contents-question-template-title {
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
	width: 20%;
}

.contents-question-template-new {
	justify-content: flex-end;
	width: 13%;
}

@media (max-width: 480px) {
	.contents-question-template-new {
		justify-content: flex-start;
		width: 100%;
	}
}

.contents-question-template-txt-area {
	width: 75%;
}

@media (max-width: 480px) {
	.contents-question-template-txt-area {
		width: 100%;
	}
}

.contents-template-txt {
	margin-right: 5px;
}

.contents-question-template-control-area {
	padding: 13px 0px 5px 0px;
	width: 4%;
}

.sp-contents-question-template-control-area {
	display: none;
}

@media (max-width: 480px) {
	.sp-contents-question-template-control-area {
		display: block;
		float: right;
		padding: 0;
		width: 10%;
	}
}

.question-make-btn-txt {
	margin-top: 6px;
}

.last-updater-area {
	float: right;
	margin-right: 70px;
}

@media (max-width: 480px) {
	.last-updater-area {
		float: none;
		margin: 10px 18px 0 18px;
	}
}

/* ページング */
.paging-area {
	margin: 0 auto;
}

.btn-paging {
	display: inline-block;
	min-width: 25px;
}

.btn-paging:hover {
	cursor: pointer;
}

@media (max-width: 480px) {
	.btn-paging {
		margin-left: 5px;
	}
}

.btn-paging-txt {
	display: flex;
	align-items: center;
	justify-content: center;
}

.paging-txt {
	text-align: center;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 10px;
}

/* 現在ページのボタン */
.current-page {
	background-color: var(--box-color);
	color: #434444;
}

.result_paging_btn {
	display: flex;
}

/* ポップアップ用 */
.block-popup {
	background: var(--box-color);
	height: auto;
	margin: auto;
	border-radius: 10px;
	max-width: 880px;
	padding-bottom: 10px;
	position: relative;
	width: 100%;
}

@media (max-width: 480px) {
	.block-popup {
		width: auto;
	}
}

.popup-title-block {
	justify-content: space-between;
	padding-top: 20px;
}

.popup-block-title-txt {
	color: var(--base-font);
	text-indent: 50px;
	font-size: 20px;
	font-weight: bold;
	word-break: break-all;
	padding-bottom: 5px;
}

.popup-close-btn {
	font-family: "Material Icons";
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--main-color);
	font-size: 20px;
	color: var(--box-color);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	position: absolute;
	right: 30px;
	top: 15px;
	bottom: 0;
	margin: auto;
}

.popup-close-btn:hover {
	background-color: var(--hover-color);
}

.popup-contents-header {
	display: table-cell;
	padding: 9px 15px 9px 25px;
	vertical-align: middle;
	width: 20%;
	background-color: var(--table-background);
}

@media (max-width: 480px) {
	.contents-header {
		display: block;
		padding: 7px 5px 7px 5px;
		width: calc(100% - 10px);
		background-color: var(--table-background);
	}
}

.block-btn-popup-area {
	margin-top: 12px;
	padding-bottom: 12px;
}

@media (max-width: 480px) {
	.popup-txt {
		font-size: 93%;
		text-align: center;
	}
}

.block-popup-scroll {
	overflow: scroll;
	max-height: 300px;
}

@media (max-width: 480px) {
	.block-popup-scroll-sp {
		overflow: scroll;
		max-height: 300px;
	}
}

.popup-design {
	border-radius: 10px;
}

.popup-complete-message {
	font-size: 120%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateY(20px);
}

/* 各コンテンツのイメージカラー*/
.inquiry-color {
	background-color: var(--message-color);
}

.information-color {
	background-color: var(--information-color);
}

.report-color {
	background-color: var(--report-color);
}

.material-color {
	background-color: var(--materials-color);
}

.material-sub-color {
	background-color: var(--materials-lightcolor);
}

.examination-color {
	background-color: var(--examination-color);
}

.survey-color {
	background-color: var(--surveys-color);
}

.discussion-color {
	background-color: var(--forum-color);
}

.attendance-color {
	background-color: var(--attendances-color);
}

.lti-color {
	background-color: var(--externaltool-color);
}

.setting-color {
	background-color: var(--main-color);
}

.course-search-color {
	background-color: var(--main-color);
}

.portal-color {
	background: var(--main-color);
}

.lms-color {
	background-color: var(--main-color);
}

.info-color {
	background-color: var(--information-color);
}

.calendar-color {
	background-color: #3a4e5d;
}

.links-color {
	background-color: #d6736b;
}

.notice-color {
	background-color: #195863;
}

.questionnaire-color {
	background-color: var(--examination-color);
}

.cabinet-color {
	background-color: var(--cabinet-color);
}

.lti1p3-color {
	background-color: var(--externaltool-color);
}

/* コーストップアイコン */
.inquiry-icon {
	background: url(/img/subblock_ico_qa-bc4ea27b90928032a2011c9219dad865.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.information-icon {
	background: url(/img/subblock_ico_information-aaad72ec05e09e26a03e9ee58baa19b4.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.survey-icon {
	background: url(/img/subblock_ico_questionnaire-3692f38662472dceb6b473d2106e1a7f.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.cabinet-icon {
	background: url(/img/subblock_ico_cabinet-ca4827629d771991a4c6b13c608528ab.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.event-calendar-icon {
	background: url(/img/subblock_ico_event_calendar-00af8006ef8aa1fd280bd0dac6478672.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.link-icon {
	mask-image: url(/img/subblock_ico_link-bc123d682f672e5de623c210eab3e630.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
	/* padding-left: 50px; */
	/* background-color: var(--main-color); */
	display: inline-block;
}

.user-manage-icon {
	mask-image: url(/img/subblock_ico_user_manage-56ecce4fbf8c22a2bec448f669946acd.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
	/* padding-left: 50px; */
	/* background-color: var(--main-color); */
	display: inline-block;
}

.role-manage-icon {
	mask-image: url(/img/subblock_ico_user_manage-56ecce4fbf8c22a2bec448f669946acd.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
	/* padding-left: 50px; */
	/* background-color: var(--main-color); */
	display: inline-block;
}

.text-search-icon-colored {
	background: url(/img/subblock_ico_text_search-a0c3a7e75384e62adb9d4691989ccad2.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.text-search-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_text_search-a0c3a7e75384e62adb9d4691989ccad2.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.personal-setting-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_settings-784fa72484eb4c82e4fded3edbddee99.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.course-manage-icon-colored {
	background-image: url(/img/subblock_ico_course-a9fa6ffb0936ff632bdb7643b70d5855.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.course-manage-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_course-a9fa6ffb0936ff632bdb7643b70d5855.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.online-course-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_operationlog-7fbb630176e996b1f97e4d6e57724821.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.task-list-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_course-a9fa6ffb0936ff632bdb7643b70d5855.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.update-info-icon {
	display: inline-block;
	mask-image: url(/img/subblock_ico_text_update_info-9745fbac638d03a106485e58b89165a3.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 40px;
	height: 40px;
}

.report-icon {
	background: url(/img/subblock_ico_report-55d1cbe227fc24be3c76d4ff8454fd99.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.material-icon {
	background: url(/img/subblock_ico_content-f45fdbaf13d97f6659df46f973768584.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.examination-icon {
	background: url(/img/subblock_ico_examination-9aff5005a43de8448890eaebe6e215e0.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.survey-icon {
	background: url(/img/subblock_ico_questionnaire-3692f38662472dceb6b473d2106e1a7f.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.discussion-icon {
	background: url(/img/subblock_ico_discussion-b91a48fbd2685c79d87c31c5fa6eae8d.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.lti-icon {
	background: url(/img/subblock_other_tools-b84465535c97d1f0fc0a0a7a993bf705.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.attendance-icon {
	background: url(/img/subblock_ico_attendance-1db134bfc93d6f8b919284384c0a1549.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px auto;
	padding-left: 50px;
}

.course-top-icon {
	background-position: center top;
	background-repeat: no-repeat;
}

@media (max-width: 480px) {
	.course-top-icon {
		background: none;
	}
}

/*コースコンテンツ作成タイトル*/
.course-contents-title-txt {
	padding-right: 5px;
	color: var(--base-font);
	font-size: 28px;
	font-weight: bold;
}

/*@media ( max-width : 480px) {
	.course-contents-title-txt {
		font-size: 80%;
	}
}*/

/* お知らせ詳細画面アイコン一覧*/
.print-icon {
	height: 30px;
	width: 30px;
	display: block;
	mask-image: url(/img/icon_print-4cfabc8ec8aa585a44031811ebe8472f.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;
}

.calendar-icon {
	height: 30px;
	width: 30px;
	display: block;
	mask-image: url(/img/icon_calendarregistration-027bfe14e2225e8841a62aa2a743aff2.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;
}

/*編集画面の削除ボタンの位置調整*/
.cource-contents-edit-flex {
	display: flex;
	justify-content: space-between;
}

@media (max-width: 480px) {
	.cource-contents-edit-flex {
		display: block;
	}
}

/* 設問編集アイコン一覧*/
.question-icon-area {
	display: flex;
}

@media (max-width: 480px) {
	.question-icon-area {
		display: flex;
	}
}

.question-down-icon {
	width: 30px;
	height: 30px;
	-webkit-mask-image: url(/img/examination_btn_down-9f95c9f470dbbfb62d990004c7424089.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/examination_btn_down-9f95c9f470dbbfb62d990004c7424089.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

.question-up-icon {
	width: 30px;
	height: 30px;
	-webkit-mask-image: url(/img/examination_btn_up-a265b166c7c6874223bb2df0e2a98d72.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/examination_btn_up-a265b166c7c6874223bb2df0e2a98d72.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

.question-copy-icon {
	width: 30px;
	height: 30px;
	-webkit-mask-image: url(/img/examination_btn_copy-6938d54e300a7290255ff35ed9ebaccc.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/examination_btn_copy-6938d54e300a7290255ff35ed9ebaccc.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

.question-edit-icon {
	width: 30px;
	height: 30px;
	-webkit-mask-image: url(/img/examination_btn_edit-b43d4aa731ed01281c0727baffb08fdb.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/examination_btn_edit-b43d4aa731ed01281c0727baffb08fdb.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

.question-delete-icon {
	width: 30px;
	height: 30px;
	-webkit-mask-image: url(/img/examination_btn_delete-73f96fb67d8e0857b2bfa6659e482b3d.svg);
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: inherit;

	mask-image: url(/img/examination_btn_delete-73f96fb67d8e0857b2bfa6659e482b3d.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: inherit;

	margin-right: 10px;
	flex-shrink: 0;
	background-color: var(--main-color);
}

/* テスト・アンケート 編集 説問表示 */
/* contents-input-areaとほぼ同じ */
.contents-answer-area {
	display: table-cell;
	padding: 9px 0 0 25px;
	vertical-align: middle;
	width: 80%;
}

.contents-question-border {
	border-bottom: 1px solid #ddd;
}

.contents-question-border:last-child {
	border: none;
}

.contents-question-answer {
	padding: 7px 0px;
}

.contents-question-collect {
	width: 30%;
}

/* 説問表示 */
.contents-quetison-area {
	margin-bottom: 10px;
}

.contents-question-vertical {
	border-bottom: 1px solid #ddd;
	display: table;
	table-layout: fixed;
}

.contents-question-title {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	width: 180px;
}

@media (max-width: 480px) {
	.contents-question-title {
		display: block;
		width: 100%;
		padding: 9px 10px 7px;
		text-align: left;
	}
}

.contents-question-detail-area {
	display: table-cell;
}

@media (max-width: 480px) {
	.contents-question-detail-area {
		display: block;
		width: 100%;
	}
}

@media (max-width: 480px) {
	.sp-contents-question-title {
		display: block;
	}
}

.contents-question-save-temp-date {
	display: block;
	font-size: 90%;
	padding-top: 5px;
	text-align: center;
	width: auto;
}

/* 掲示板・問い合わせ */
/* スレッド */
.discussion-main-board {
	padding: 60px 30px 10px;
	background-color: var(--ruled-line);
	border-radius: 10px;
}

@media (max-width: 480px) {
	.discussion-main-board {
		padding: 20px 25px 10px;
	}
}

.discussion-reload-area {
	padding-top: 10px;
	text-align: right;
}

.discussion-message-block {
	width: calc(70% - 90px);
	margin-bottom: 40px;
}

@media (max-width: 480px) {
	.discussion-message-block {
		width: 100%;
	}
}

.discussion-self {
	text-align: right;
	margin-left: auto;
}

.discussion-other {
	text-align: left;
	margin-right: auto;
}

.discussion-message-main {
	border-radius: 15px;
	display: inline-block;
	font-size: 93%;
	line-height: 1.6;
	padding: 10px 18px 10px;
	position: relative;
	text-align: start;
	max-width: 100%;
	min-width: 370px;
}

@media (max-width: 480px) {
	.discussion-message-main {
		min-width: 100px;
		padding: 10px 10px 10px;
	}
}

.discussion-self-color {
	background-color: var(--main-color);
	color: white;
}

.discussion-student-color {
	background-color: white;
}

.discussion-teacher-color {
	background-color: white;
}

.discussion-self-comment:after {
	background-color: transparent;
	border-top: 8px solid var(--main-color);
	border-left: 8px solid var(--main-color);
	border-bottom: 8px solid transparent;
	border-right: 8px solid transparent;
	content: "";
	display: block;
	height: 0;
	position: absolute;
	right: -16px;
	top: 14px;
	width: 0;
}

.discussion-self-link-txt {
	text-decoration: underline;
}

.discussion-self-link-txt:hover {
	opacity: 0.6;
	cursor: pointer;
}

.discussion-other-comment:before {
	background-color: transparent;
	border-left: 8px solid transparent;
	border-bottom: 8px solid transparent;
	content: "";
	display: block;
	height: 0;
	left: -16px;
	position: absolute;
	top: 14px;
	width: 0;
}

.discussion-teacher-comment:before {
	border-top: 8px solid white;
	border-right: 8px solid white;
}

.discussion-student-comment:before {
	border-top: 8px solid #fff;
	border-right: 8px solid #fff;
}

/*TODO margin-topしてるだけなのでなんとかしたい*/
.message-margin-top {
	margin-top: 10px;
}

.textarea-contents {
	white-space: pre-wrap;
}

/* テスト解答・アンケート回答画面 残り時間のエリア */
.timer-btn-area-timer {
	float: left;
	padding-right: 20px;
	position: relative;
}

.timer-btn-area-btn {
	display: inline-block;
	margin-top: 10px;
	padding-right: 20px;
	position: relative;
	text-align: center;
	width: 310px;
}

.timer-btn-confirm-area-btn {
	display: inline-block;
	margin-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	position: relative;
	text-align: center;
	width: 140px;
	margin-right: 25px;
}

.save-temp-area {
	display: inline-block;
}

.btn-question-confirm {
	display: inline-block;
	vertical-align: top;
}

@media (max-width: 480px) {
	.btn-question-confirm {
		padding: 5px 15px;
		margin: 5px 5px;
	}
}

/* 常時必要 */
.timer-btn-area {
	background-color: #e1e1e0;
	padding: 17px 0 14px 34px;
}

@media (max-width: 480px) {
	.timer-btn-area {
		padding: 5px 0 5px 13px;
	}
}

/*スクロール前*/
.timer-btn-area-unset {
	margin: 15px 0 35px;
}

@media (max-width: 480px) {
	.timer-btn-area-unset {
		margin: 15px 0;
	}
}

/*スクロール後*/
.timer-btn-area-fixed {
	margin: 0;
	position: sticky;
	top: 59px;
	z-index: 10;
}

.large-timer-number {
	background-color: var(--box-color);
	border-radius: 4px;
	color: #888988;
	float: left;
	font-size: 269%;
	line-height: 1.1;
	padding: 6px 5px 1px;
}

.small-timer-number {
	background-color: var(--box-color);
	border-radius: 4px;
	color: #888988;
	font-size: 189%;
	float: left;
	line-height: 1.1;
	margin-top: 13px;
	padding: 4px 3px 0;
}

.large-colon {
	float: left;
	font-size: 269%;
	line-height: 1.1;
	padding: 6px 0 1px;
}

.small-colon {
	float: left;
	font-size: 189%;
	line-height: 1.1;
	margin-top: 13px;
	padding: 4px 0 0;
}

.drag-drop-area {
	background-color: #cde4ff;
	color: rgba(00, 00, 00, 0.35);
	height: 100px;
	margin-top: 10px;
	padding: 20px;
}

/* 幅選択用 */
.width-small {
	width: 10%;
}

.width-quarter {
	width: 25%;
}

.width-half {
	width: 50%;
}

.width-three-quarters {
	width: 75%;
}

/* 設問作成画面 */
.question-move-img {
	background: url(/img/move_2d-ee5c120dd53a27d5bdba735e878e87d8.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40px auto;
	padding-left: 40px;
}

/* アンケート回答画面のイメージ */
@media (max-width: 480px) {
	img.downloadFile {
		width: 100%;
	}
}

/* 一括削除 */
.bulk-delete-title {
	width: 14%;
}

@media (max-width: 480px) {
	.bulk-delete-title {
		width: 100%;
	}
}

.bulk-delete-btn {
	margin-left: 15px;
	width: 14%;
}

@media (max-width: 480px) {
	.bulk-delete-btn {
		margin-left: 10px;
		margin-top: 10px;
		width: 100%;
	}
}

.bulk-delete-detail {
	margin-left: 15px;
	width: 72%;
}

@media (max-width: 480px) {
	.bulk-delete-detail {
		margin: 5px 0px;
		width: 100%;
	}
}

/* 入力エラー背景色 */
.inputErrorField {
	background-color: #ffc1d0;
}

/*エラーアイコン*/
.error-icon {
	background: url(/img/tometable_icon_classcancellation-ef2ccca126b73a512e567dfa350fd5cb.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px auto;
	padding-left: 25px;
}

/* エラー件数表示 */
.error-count-message-area {
	margin: 30px;
	border: 2px solid #ff2800;
	border-radius: 10px;
	background-color: #fff;
	padding: 4px;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
}

/* エラーブロック */
.error-block {
	margin: 10px 70px 0 34px;
}

@media (max-width: 480px) {
	.error-block {
		margin: 20px 13px 0;
	}
}

/*TODO 上書きされない方法を見つける */
.contents-hidden {
	display: none;
}

@media (max-width: 480px) {
	.sp-contents-hidden {
		display: none;
	}
}

.pc-contents-hidden {
	display: none;
}

@media (max-width: 480px) {
	.pc-contents-hidden {
		display: block;
	}
}

/* ページダイレクトリンク */
.page-directlink {
	margin: 30px;
}

@media (max-width: 480px) {
	.page-directlink {
		margin: 20px;
	}
}

.page-directlink-txt {
	color: #545555;
	font-size: 93%;
	float: left;
	margin-right: 10px;
	padding: 7px;
}

@media (max-width: 480px) {
	.page-directlink-txt {
		width: 95%;
	}
}

.direct-link-box {
	width: 25%;
}

@media (max-width: 480px) {
	.direct-link-box {
		width: 65%;
	}
}

.course-view-header-btn.header-btn-active {
	background-color: var(--main-color);
	box-shadow: none;
	color: var(--box-color);
	pointer-events: none;
}

/* 履修者一覧選択部品 */
.student-list-checkbox {
	width: 10%;
}

.student-list-user-number {
	width: 30%;
}

.student-list-user-id {
	width: 30%;
}

.student-list-user-name {
	width: 30%;
}

/* お知らせポップアップ */

.information-popup-block {
	background-color: var(--box-color);
	display: inline-block;
	margin: 20px 10px 0 10px;
	position: relative;
	width: calc(100% - 70px);
	font-family: "Noto Sans JP";
}

.btn-information-move {
	cursor: pointer;
	display: table-cell;
	height: 150px;
	margin-bottom: auto;
	padding: 4px;
	vertical-align: middle;
}

.btn-information-move:hover {
	background-color: var(--hover-color);
}

.btn-information-next {
	float: right;
	margin-top: 46px;
	margin-left: 4px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 20px;
}

.btn-information-back {
	float: left;
	margin-top: 46px;
	margin-right: 4px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 20px;
}

.btn-information-txt {
	display: inline-block;
}

.print-off {
	display: none;
}

/*プリント用CSS*/
.info_set_confirm_preview_sp {
	text-align: center;
	margin-top: 15px;
}
@media (max-width: 480px) {
	.info_set_confirm_preview_sp {
		display: none;
	}
}
@media print {
	#info_preview {
		width: 100%;
	}

	.information-popup-block {
		width: 100%;
	}
}

/* ロード中のキーフレーム */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
.noDataStatus {
	background-color: var(--warning-lightcolor);
	border-bottom: 1px solid #ddd;
}

.absenceStudent {
	background-color: var(--warning-lightcolor);
}

.absenceStudent:nth-of-type(2n-1) {
	background-color: var(--warning-lightcolor);
}

.absenceStudent:nth-of-type(2n) {
	background-color: var(--warning-lightcolor);
}

/* 期間指定のリストの長さを調整(jquery内のhtmlの為id指定で記載 */
#hourSelectFrom-menu,
#hourSelectTo-menu,
#hourSelectFromDisp-menu,
#hourSelectToDisp-menu,
#hourSelectLate-menu {
	overflow-y: auto;
	height: 120px;
	width: 50px;
}

#minuitSelectFrom-menu,
#minuitSelectTo-menu,
#minuitSelectFromDisp-menu,
#minuitSelectToDisp-menu,
#minuitSelectLate-menu {
	overflow-y: auto;
	height: 120px;
	width: 50px;
}

/* システムエラー画面 */
.system-error-body {
	background-color: #edf3f7;
	margin: auto;
}

@media (max-width: 480px) {
	.system-error-body {
		margin: 10px;
	}
}

.system-error-title-txt {
	font-size: 40px;
}

/* ファイルアップロードクラス(課題もそのうち共通にする) */
.file-input-area {
	padding-bottom: 55px;
}
@media (max-width: 480px) {
	.file-input-area {
		padding-bottom: 0px;
	}
}

.file-object-area {
	margin-bottom: 10px;
}

.file-name-area {
	float: left;
	width: 55%;
}

@media (max-width: 480px) {
	.file-btn-sp {
		margin-left: 80%;
	}
}

/* お知らせ重要度 枠の大きさや文字のweight管理 */
.portal-information-priority {
	font-weight: bold;
	margin: 0 2px 0 0;
	padding: 0px 3px;
	word-break: keep-all;
	border-radius: 4px;
	font-size: 90%;
}

/* お知らせ重要度 緊急タイプ(importanceType=3)の重要度 */
.portal-information-priority-urgency-color {
	background-color: var(--warning-color);
	color: var(--box-color);
}

/* お知らせ重要度 重要タイプ(importanceType=2)の重要度 */
.portal-information-priority-important-color {
	background-color: var(--importance-color1);
	color: var(--box-color);
}

/* お知らせ重要度 通常タイプ(importanceType=1)の重要度 */
.portal-information-priority-normal-color {
	background-color: var(--warning-color);
	color: var(--box-color);
	display: none; /* 現在は非表示 */
}

.portal-information-unread {
	background-color: #565251;
	color: var(--box-color);
}

/* --------------- */
/* Task List       */
/* --------------- */
.result_list .result_list_line,
.result_list .result_list_tag {
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	justify-content: flex-start;
	align-items: center;
}

.result_list .result_list_tag {
	font-size: 108%;
	color: #27251f;
	font-weight: bold;
	padding: 8px 6px 6px;
	border-bottom: 2.5px solid #ddd;
}

.result_list .result_list_tag {
	font-size: 108%;
	color: #27251f;
	font-weight: bold;
	padding: 8px 6px 6px;
	border-bottom: 2.5px solid #ddd;
}
div.result_list_content .result_list_line:nth-of-type(odd) {
	background-color: var(--box-color);
}
div.result_list_content .result_list_line:nth-of-type(even) {
	background-color: #f2a9000f;
}

.result_list .result_list_line {
	font-size: 93%;
	color: #545555;
	padding: 10px 6px 8px;
	border-bottom: 1px solid #ddd;
	position: relative;
}

@media (max-width: 480px) {
	.result_list .result_list_line {
		padding: 0;
		background-color: var(--box-color);
	}

	.result_list:not(.sp_normal) .result_list_line {
		display: block;
	}

	.sp_normal.result_list .result_list_line {
		margin: 0px;
		padding: 5px 0px;
	}

	.sp_normal.result_list .result_list_tag {
		display: flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		background-color: var(--box-color);
	}

	.sp_normal.result_list .result_list_line {
		box-shadow: none;
	}
}

.course-manage {
	display: flex;
}
@media (max-width: 480px) {
	.course-manage {
		display: block;
	}
}

.download-icon {
	mask-image: url(/img/button_icon_download-06aae2e73580ff1213f20e1679841656.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--main-color);
	width: 16px;
	height: 16px;
	display: inline-block;
	/* position: absolute; */
}

.download-icon:hover {
	background-color: var(--hover-color);
}

.add-btn-icon {
	mask-image: url(/img/add_icon-93f37cfd559352085d19dbba5a02d9ac.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 25px;
	height: 25px;
	background-color: var(--main-color);
	/*	padding-left: 10px;
	padding-right: 10px;*/
	margin-right: 8px;
	display: inline-block;
}

.download-btn-icon {
	mask-image: url(/img/button_icon_download-06aae2e73580ff1213f20e1679841656.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	width: 16px;
	height: 16px;
	background-color: var(--main-color);
	padding-left: 25px;
	padding-right: 10px;
	display: inline-block;
}

.btn-icon-area {
	display: flex;
	align-items: center;
}

link-mini-icon {
	mask-image: url(/img/link-55937fd1cc1ba4450935697a5168b3a5.svg);
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	background-color: var(--main-color);
	width: 28px;
	height: 28px;
	display: inline-block;
	position: absolute;
}

.fileSelectButton {
	cursor: pointer;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

/*::-webkit-scrollbar-track{
	margin: 5px;
}*/

::-webkit-scrollbar-thumb {
	background-color: var(--input-box);
	border-radius: 5px;
}

::placeholder {
	font-family: "Noto Sans JP";
}