:root {
	/* html */
	--background-main:#120052;
	--background-wrap:#fff;
	--point-color:#fe53bb;
	--btn-main:#0996fb;
	--btn-focus:#28b2ff;
	--message:#e0edff;

	/* main */
	--glow-main:#00db33;

	--gray-fa:#fafafa;
	--gray-e:#eee;
	--gray-d:#ddd;
	--gray-c:#ccc;
	--gray-a:#aaa;
	--gray-9:#999;
	--gray-7:#777;
	--gray-06:#606060;
	--gray-5:#555;
	--gray-0:#000;

	--shadow:#000;
	--black:0, 0, 0;
}

.text_Vlr {
	text-align: left;
	-webkit-writing-mode: vertical-rl;
	-moz-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-ms-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}

h1,h2,h3,h4{
	margin: 0;
	padding: 0;
}

hr {
	background-color: var(--gray-c);
	height: 1px;
	border: none;
	margin: 15px 0px;
}

@media screen and (min-width:769px){
	html, body {
		font-family: Noto Sans Japanese,Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
		letter-spacing: 0.1em;
		min-height: 400px;
		height: 100%;
		width:100%;
		margin: 0;
		padding: 0;
		background-color: var(--background-main);
	}
		
	/* commonDialog.cssに移植予定 */
	.dialogoverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: rgba(var(--black), 0.3);
		z-index: 1000;
	}

	.dialogoverlay > .commonDialog {
		position: relative;
		top: 110px;
		left: calc(50% - 200px);
		font-size: 14px;
		padding: 30px 30px 20px;
		width: 400px;
		height: auto;
		border-radius: 5px;
		border: none;
		background-color: var(--gray-e);
		-moz-box-shadow: 4px 4px 10px 1px #555;
		-webkit-box-shadow: 4px 4px 10px 1px #555;
		box-shadow: 4px 4px 10px 1px #555;
		box-sizing: border-box;
		user-select: none;
		z-index: 2000;
	}

	.dialogoverlay > .commonDialog > .dialogHeading {
		font-weight: bold;
		font-size: 17px;
		padding-bottom: 8px;
		user-select: none;
		margin-right: 5px;
	}

	.commonDialog input,
	.commonDialog label,
	.dialogTextArea {
		display: inline;
		margin-top: 10px;
	}

	.dialogoverlay ul {
		list-style: none;
		text-align: left;
		padding-left: 10px !important;
	}

	.dialogoverlay > .dialogScroll { /* dialogの中にスクロールが必要なコンテンツが入る場合 */
		height: 100% !important;
		max-height: calc(100% - 165px);
		min-height: 250px;
	}

	.dialogWide {
		width: 600px !important;
		left: calc(50% - 300px) !important;
	}

	.scrollContents {
		text-align: left;
		padding: 10px;
		margin: 10px;
		overflow: auto;
		height: calc(100% - 130px);
		list-style: none;
		border: #aaa 1px solid;
	}

	.scrollContents label,
	.scrollContents input {
		margin-top: 0 !important;
	}

	.dialogTable {
		padding: 10px 0;
		text-align: left;
	}

	.dialogTable > span {
		display: inline-block;
		width: 7em;
		padding: 7px 10px 7px 0;
		text-align: right;
	}

	.dialogTable > input {
		width: 12em;
		margin-right: 4px;
	}

	.alertMessage {
		color: #f00;
		text-align: left;
	}
	/* 移植ここまで */

	.explanatory {
		text-align: left;
		font-size: 13px;
		letter-spacing: 0.1em;
	}

	.dialogoverlay > .commonDialog > .dialogtype {
		display: inline-block;
		width: calc(100% - 40px);
		text-align: left;
		font-weight: bold;
		height: auto;
		line-height: 30px;
		padding-left: 40px;
	}

	#input_text {
		margin: 10px 0;
	}

	.dialogoverlay > .commonDialog > .dialogMassage {
		display: block;
		text-align: left;
		margin: 20px 0px;
		font-size: 15px;
		color: var(--gray-7);
		word-break: break-all;
	}

	.dialogoverlay > .commonDialog > button,
	.dialogFormBtn {
		user-select: none;
		display: inline-block;
		background-image: none;
		background-color: var(--btn-main);
		color: var(--background-wrap);
		text-decoration: none;
		border: none;
		cursor: pointer;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
		position: relative;
		border-radius: 5px;
		line-height: 1em !important;
		padding: 0.5em 1em !important;
		font-size: 12px;
		margin-top: 10px;
	}

	textarea.dialogTextArea {
		resize: vertical;
		width: 100%;
		height: 6em;
		box-sizing: border-box;
	}
	/* commonDialog.cssに移植予定 */


	/* dialog icon */
	.dialogoverlay > .commonDialog > .warning {
		background: url('../icon/warning.png') no-repeat;
		background-size: 30px;
	}

	.dialogoverlay > .commonDialog > .ban {
		background: url('../icon/ban.png') no-repeat;
		background-size: 30px;
	}

	.dialogoverlay > .commonDialog > .info {
		background: url('../icon/infomation.png') no-repeat;
		background-size: 30px;
	}

	#wrap {
		margin:  0 auto;
		padding: 0;
		height: 100%;
		background-color: var(--background-wrap);
		min-width:  500px;
		max-width: 1200px;
		text-align: center;
	}

	#content {
		position: relative;
		padding: 0 30px 60px;
		background-color: var(--background-wrap);
		box-sizing: border-box;
	}

	.full {
		height: 100%;
	}

	#breadcrumbsList {
		text-align: left;
		padding: 5px 0px;
	}

	.btn {
		user-select: none;
		display: inline-block;
		padding: 0.5em 1.5em;
		margin: 10px;
		background-image: none;
		background-color: var(--btn-main);
		color: var(--background-wrap);
		text-decoration: none;
		border: none;
		border-radius: 0;
		cursor: pointer;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
		position: relative;
		border-radius: 5px;
	}

	.btn_s { /* btnと併記 */
		line-height: 1em !important;
		padding: 0.5em 1em !important;
		margin: 10px 0 !important;
		font-size: 12px;
	}

	.btn_r {
		background-color: #f00 !important;
	}

	.btn_r:hover {
		background-color: #f55 !important;
	}

	h3 > .btn_s,
	h3 > a > .btn_s {
		margin: 0 !important;
	}

	.close_btn {
		display: inline-block;
		text-align: center;
		background-color: #0996fb;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		position: absolute;
		right: 10px;
		top: 10px;
		user-select: none;
	}

	.close_btn::after {
		content: '';
		display: block;
		background: url(../icon/cancel_w.png) no-repeat;
		background-size: 15px;
		height: 25px;
		width: 25px;
		background-position: center;
	}

	.btn:hover,
	.btn:focus,
	.close_btn:hover,
	.close_btn:focus,
	.dialogoverlay > .commonDialog > button:hover,
	.dialogoverlay > .commonDialog > button:focus {
		outline: none;
		background-color: var(--btn-focus);
		cursor: pointer;
	}

	.login {
		margin-bottom: 0 !important;
		margin-top: 20px !important;
	}

	.btn:active,
	#scoring:active,
	.dialogoverlay > .commonDialog > button:active {
		position: relative;
		top: 1px;
	}

	.close_btn:active {
		top: 11px;
	}

	.logout_btn { /* btnと併記 */
		padding: 0.5em 1em;
		font-size: 12px;
		letter-spacing: 0;
		margin: 0 !important;
		position: absolute !important;
		top:   10px !important;
		right: 20px !important;
	}

	.logout_btn:active{
		position: absolute !important;
		top:11px !important;
	}

	.btn::-moz-foucus-inner {
		padding: 0;
		border: none;
	}

	.text {
		text-align: left;
		line-height: 1.8em;
		margin: 40px;
	}

	a {
		display: inline-block;
		text-decoration: none;
		color: var(--point-color);
	}

	a:hover {
		text-decoration: underline;
	}


	a[href^="http"] {
		background: url(../icon/link_p.png) no-repeat right center;
		background-size: 18px;
		padding-right: 22px;
		margin-right: 4px;
	}

	.cd_jkURL > a[href^="http"] {
		background: none !important;
	}

	.prj {
		position: relative;
		padding: 10px 20px 10px 10px;
		width: 260px;
		height: 4em;
		box-sizing: border-box;
	}

	.prj span {
		position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 230px;
		text-align: center;
		left: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.prj::after {
		position: absolute;
		content: "▶";
		color: var(--background-wrap);
		font-weight: 900;
		top: 50%;
		right: 4px;
		left: auto;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	h1 {
		color: var(--background-wrap);
		font-size: 50px;
		line-height: 1.2em;
		font-weight: bold;
		height: 300px;
		padding:60px 30px;
		margin: 0 -30px 30px;
		background-color: #ddd;
		text-align: left;
		text-shadow: 2px 2px 7px rgba(var(--shadow), 0.5);
		box-sizing: border-box;
	}

	h2 {
		color: var(--background-main);
		font-size: 30px;
		font-weight: bold;
		padding: 0.5em 1em;
		margin: 1em 0 !important;
		border-top: var(--background-main) 1px solid;
		border-bottom: var(--background-main) 1px solid;
		text-align: center;
	}

	h3 {
		position: relative;
		color: var(--background-main);
		font-size: 25px;
		font-weight: normal;
		margin: 0 !important;
		padding: 5px 0px !important;
		border-bottom: var(--background-main) 1px solid;
		text-align: left;
		line-height: 30px;
	}

	h4 {
		height: 1.4em;
		line-height: 1em;
		color: var(--background-main);
		font-weight: normal;
		padding: 2px 5px !important;
		margin: 0.5em 0 !important;
		border-left: var(--background-main) 5px solid;
		text-align: left;
		box-sizing: border-box;
	}

	.machine {/* 実験授業ヘッダー画像 */
		background: url("../img/machine.jpg") no-repeat;
		background-size: cover;
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="text"]:focus,
	textarea:focus {
		outline: 0;
		-webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
		box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
	}

	.form {
		display: inline-block;
		background:#ddd;
		padding: 40px;
		margin-top: 30px;
	}

	.loginform {
		padding: 10px;
		width: 300px;
		letter-spacing: 1px;
		font-size: 15px;
		background-color: var(--background-wrap) !important;
		border: #ccc solid 1px !important;
	}

	.id, .pass {
		margin-bottom: 15px;
	}

	.id {
		background: url("../icon/user_s.png") no-repeat;
		padding-left: 35px;
		background-position-x: left;
		background-position-y: center;
		background-size: 24px;
	}

	.pass {
		background: url("../icon/key.png") no-repeat;
		padding-left: 35px;
		background-position-x: left;
		background-position-y: center;
		background-size: 24px;
	}

	ul.user {
		margin: 0;
		padding: 1em 2em;
		text-align: left;
		width: auto;
		background-color: #ddd;
	}

	#inner {
		display: table;
		text-align: left;
		margin: 20px -30px 0;
		border: none;
		background-color: var(--background-wrap);
		border-collapse: separate;
		border-spacing: 30px;
		box-sizing: border-box;}

	#userinfo {
		display: table;
		background-color: #eee;
		width: 100%;
		margin-bottom: 15px;
		border-collapse: separate;
		border-spacing: 0px;
		text-align: left;
		padding: 15px;
		box-sizing: border-box;
	}

	#userinfo > .left {
		display: table-cell;
		padding-right: 15px;
		text-align: center;
		width: 100px;
	}

	.userimg {
		display: block;
		background-color: var(--background-wrap);
		width: 100px;
		height: 100px;
		padding: 10px;
		box-sizing: border-box;
	}

	#userinfo > .right {
		position: relative;
		display: table-cell;
		text-align: left;
		vertical-align: middle;
	}

	#userinfo > .right > a > .btn {
		position: absolute;
		right: 0;
		top: 5px;
		margin: 0 !important;
		padding: 5px 10px !important;
		font-size: 12px !important;
	}

	#userinfo > .right > h3 {
		margin: 0 0 10px !important;
		display: table;
		width: 100%;
	}

	#userinfo > .right > h3 > span,
	#userinfo > .right > h3 > a {
		display: table-cell;
	}

	.Unchangeable {
		color: #666;
	}

	.Unchangeable::after{
		content: " *変更不可";
		color: #f00;
		font-size: 14px;
	}

	.userInfo_wrap {
		width: 100%;
		text-align: left;
	}

	.userInfo_line > form {
		margin: 0 !important;
	}

	.userInfo_block {
		width: 70%;
		display: block;
		margin: auto;
		padding: 10px 0;
	}

	.userInfo_pass {
		font-size: 12px;
		margin: 10px auto;
		text-align: left;
		line-height: 1.2em;
		color: #666;
		width: fit-content;
	}

	.userInfo_index, .userInfo_text {
		display: inline-block;
		margin: 10px 0;
	}

	.userInfo_index {
		text-align: right;
		font-weight: bold;
		width: 260px;
	}

	.timeline {
		display: table-cell;
		vertical-align: top;
		padding: 15px;
		width: 40%;
		min-width: 250px;
		height: 100%;
		background: #eee;
	}

	#timeline > .btn {
		width: 69px;
	}

	.message{
		width: calc(100% - 75px);
		height: 2em;
		padding: 12px 6px;
		letter-spacing: 1px;
		font-size: 14px;
		box-sizing: border-box;
	}

	#reload-timeline{
		margin-bottom: 10px;
	}

	.timeline-item {
		position: relative;
		display: block;
		background-color: var(--background-wrap);
		border-bottom: #ddd 1px solid;
		padding: 15px;
		color: #666;
		text-align: left;
		word-break: break-all;
	}

	.delete {
		display: none;
	}

	.own > .delete {
		position: absolute;
		right: 15px;
		top: 19px;
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(../icon/dustbox.png) no-repeat right top;
		background-size: 18px;
		opacity: 0.4;
	}

	.delete:hover{
		opacity: 0.8;
	}

	.timeline-item > .timeline-username{
		display: inline;
		padding-left: 20px;
		font-weight: bold;
		background: url(../icon/user_s.png) no-repeat;
		background-position-x: left;
		background-position-y: center;
		background-size: 18px;
	}

	.timeline-item > .timeline-userid{
		display: inline;
		font-size: 12px;
		color: #aaa;
		margin: 0 2px;
	}

	.timeline-item > .timeline-date{
		text-align: right;
		font-size: 12px;
		color: #aaa;
	}

	.timeline-item > .timeline-message{
		position: relative;
		font-size: 14px;
		line-height: 18px;
		background-color: var(--message);
		padding: 10px;
		border-radius: 10px;
		margin: 12px 0 6px 4px;
	}

	.timeline-message:before {
		content: "";
		position: absolute;
		top: -20px;
		left: 16px;
		border: 8px solid transparent;
		border-bottom: 15px solid var(--message);
	}

	.own > .timeline-message {
		background-color: rgb(255, 232, 197) !important;
	}

	.own > .timeline-message:before {
		content: "";
		position: absolute;
		top: -20px;
		left: 16px;
		border: 8px solid transparent;
		border-bottom: 15px solid rgb(255, 232, 197) !important;
	}

	.timeline-item > .timeline-automessage{
		display: inline;
		font-size: 14px;
		line-height: 18px;
		margin: 4px 0;
	}

	.toggle {
		position: relative;
		background-color: #eee;
		padding: 10px;
		margin-bottom: 20px;
	}

	.toggle > .toggle_close,
	.toggle > .toggle_open {
		background-size: 20px;
		background-position-x: right;
		background-position-y: center;
		display: inline-block;
		width: calc(100% - 20px);
		height: 24px;
		position: absolute;
		top: 18px;
		right: 10px;
	}

	.toggle_close {
		background: url(../icon/close_b.png) no-repeat;
	}

	.toggle_open {
		background: url(../icon/open_b.png) no-repeat;
	}

	.toggle_close:hover,
	.toggle_open:hover {
		cursor: pointer;
	}

	.booklist {
		background: #fff;
		padding: 15px 20px;
		margin-left: 35px;
		margin-top: 10px;
		border-radius: 10px;
		text-align: left;
		position: relative;
		word-break:break-all;
	}

	.booklist div {
		border-bottom: #ddd 1px solid;
		margin-bottom:  10px;
		padding-bottom: 10px;
		word-break:break-all;
	}

	.booklist div:last-child {
		border: none !important;
		padding: 0px !important;
		margin: 0 !important;
	}

	.books {
		background: url("../icon/books_b.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 30px;
	}

	.book_b {
		background: url("../icon/book_b.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 20px;
	}

	.book_info {
		content: "";
		display: inline-block;
		position: relative;
		top: 2px;
		background: url(../icon/infomation.png) no-repeat;
		background-size: 1em;
		height: 1em;
		width: 1em;
		margin:0 0.25em;
	}

	.book_info:hover {
		cursor: pointer;
	}

	.bell {
		background: url("../icon/bell.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 30px;
	}

	.booklist > div > a.book_b{
		padding-left: 24px;
		padding-right: 20px;
	}

	.books:before,
	.bell:before {
		content: "";
		display: inline-block;
		width:  30px;
		height: 20px;
		margin-right: 5px;
		vertical-align: middle;
	}

	#scoring { /* 採点ボタン */
		display: inline-block;
		font-size: small;
		color: var(--background-wrap);
		border-radius: 5px;
		padding: 0 5px;
		margin-left:0.5em;
		background-color: #999;
		cursor: pointer;
		-webkit-appearance: none;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
	}

	#scoring:hover,
	#scoring:focus {
		outline: none;
		background-color: #bbb;
	}

	/* admin */
	.adminWrap {
		padding: 0 !important;
		padding: 0 30px;
		height: 100%;
		background-color: var(--background-wrap);
	}

	#adminMenu > .btn_s,
	#adminMenu > form > input.btn,
	#adminMenu > a.btn_s {
		height: auto !important;
		line-height: auto !important;
		margin: 4px 0 !important;
		width: 100%;
		text-align: left;
		padding: 6px 10px !important;
		box-sizing: border-box;
		letter-spacing: 0em;
		font-size: 12px !important;
	}

	a.btn,
	#adminMenu > a.btn {
		text-decoration: none !important;
	}

	#adminHeader {
		position: relative;
		height: 60px;
		padding: 7px 30px;
		text-align: left;
		box-sizing: border-box;
		border-bottom: 1px var(--gray-5) solid;
	}

	#adminHeader .left {
		display: inline-block;
		color: var(--background-main);
		font-weight: bold;
		font-size: 30px;
	}

	#adminHeader .right {
		display: inline-block;
		position: absolute;
		right: 30px;
		height: 40px;
		line-height: 40px;
		color: #777;
		border-bottom: #777 1px solid;
	}

	#adminHeader .right > span {
		color: #000;
	}

	#adminTable {
		display: -webkit-box; /*Android4.3*/
		display: -moz-box;    /*Firefox21*/
		display: -ms-flexbox; /*IE10*/
		display: -webkit-flex; /*PC-Safari,iOS8.4*/
		display: flex;
		height: calc(100% - 65px);
		text-align: left;
		box-sizing: border-box;
	}

	#adminMenu {
		height: 100%;
		padding: 10px;
		width: 20%;
		min-width: 200px;
		border-right: 1px var(--gray-5) solid;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#adminMenu input[type="text"] {
		margin: 5px 0px;
	}

	#adminDisplayArea {
		padding: 10px;
		width: 80%;
		background-color: var(--gray-e);
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#adminDisplayArea > table {
		background-color: #fff;
	}

	#infoeditorDisplayArea {
		padding: 10px;
		width: 100%;
		background-color: var(--gray-e);
		box-sizing: border-box;
		overflow-y: scroll;
	}

	div.DragDropArea {
		z-index: 10;
		overflow: auto;
		border: 2px dotted #888888;
		width: 540px;
		height: calc(100% - 110px);
		background-color: #cccccc;
		margin: 0 auto;
		text-align: left;
		margin: 10px 0;
		box-sizing: border-box;
		font-size: 14px;
	}

	div.DragDropArea:empty:before {
		content:attr(data-placeholder);
		color:gray
	}

	.fileDeleteLabel {
		color: var(--btn-main);
		word-break: keep-all;
		padding-right: 8px;
	}

	.file_local > .fileName::before{
		content: "Upload";
		font-size: 8px;
		letter-spacing: 0;
		text-align: center;
		display: inline-block;
		width: 48px;
		background-color: #fff;
		color: var(--btn-main);
		margin-right: 8px;
	}

	.file_server,
	.file_local {
		width: fit-content;
	}

	.file_server > label,
	.file_local {
		display: flex;
		padding: 2px 2px 2px 4px;
		height: 1.5em;
		margin: 0 !important;
		line-height: 1.5em;
	}

	.file_server > label:hover {
		background-color: #ddd;
	}

	.fileName {
		display: inline-block;
	}

	.check_FileDelete {
		margin: 4px 4px 2px 0px !important;
	}

	div.DragDropArea > div > .writingDirection,
	div.DragDropArea > div > .upload {
		background-color: #fff;
		color: #0075ff;
		padding: 0 2px;
	}

	div.DragDropArea > hr {
		background-color: #8d8d8d !important;
		height: 1px !important;
		margin: 5px 0px !important;
	}

	.bgY {
		background-color: #FF0;
	}

	.h40p {
		max-height: 40% !important;
	}

	.fw900 {
		font-weight: 900;
	}

	.pos_R410 {
		left:calc(100% - 410px) !important;
	}

	.searchResultPage{
		color: #aaa;
	}
}

@media screen and (max-width:768px){
	html, body {
		font-family: Noto Sans Japanese,Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
		letter-spacing: 0.1em;
		min-height: 400px;
		height: 100%;
		width:100%;
		margin: 0;
		padding: 0;
		background-color: var(--background-main);
	}

	/* commonDialog.cssに移植予定 */
	.dialogoverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: rgba(var(--black), 0.3);
		z-index: 1000;
	}

	.dialogoverlay > .commonDialog {
		position: relative;
		top: 110px;
		left: calc(50% - 200px);
		font-size: 14px;
		padding: 30px 30px 20px;
		width: 400px;
		height: auto;
		border-radius: 5px;
		border: none;
		background-color: var(--gray-e);
		-moz-box-shadow: 4px 4px 10px 1px #555;
		-webkit-box-shadow: 4px 4px 10px 1px #555;
		box-shadow: 4px 4px 10px 1px #555;
		box-sizing: border-box;
		user-select: none;
		z-index: 2000;
	}

	.dialogoverlay > .commonDialog > .dialogHeading {
		font-weight: bold;
		font-size: 17px;
		padding-bottom: 8px;
		user-select: none;
		margin-right: 5px;
	}

	.commonDialog input,
	.commonDialog label,
	.dialogTextArea {
		display: inline;
		margin-top: 10px;
	}

	.dialogoverlay ul {
		list-style: none;
		text-align: left;
		padding-left: 10px !important;
	}

	.dialogoverlay > .dialogScroll { /* dialogの中にスクロールが必要なコンテンツが入る場合 */
		height: 100% !important;
		max-height: calc(100% - 165px);
		min-height: 250px;
	}

	.dialogWide {
		width: 600px !important;
		left: calc(50% - 300px) !important;
	}

	/* CommonDialog.css移植予定 */
	.scrollContents {
		text-align: left;
		padding: 10px;
		margin: 10px;
		overflow: auto;
		height: calc(100% - 130px);
		list-style: none;
		border: #aaa 1px solid;
	}

	.scrollContents label,
	.scrollContents input {
		margin-top: 0 !important;
	}

	.dialogTable {
		padding: 10px 0;
		text-align: left;
	}

	.dialogTable > span {
		display: inline-block;
		width: 7em;
		padding: 7px 10px 7px 0;
		text-align: right;
	}

	.dialogTable > input {
		width: 12em;
		margin-right: 4px;
	}

	.alertMessage {
		color: #f00;
		text-align: left;
	}
	/* 移植ここまで */

	.explanatory {
		text-align: left;
		font-size: 13px;
		letter-spacing: 0.1em;
	}

	.dialogoverlay > .commonDialog > .dialogtype {
		display: inline-block;
		width: calc(100% - 40px);
		text-align: left;
		font-weight: bold;
		height: auto;
		line-height: 30px;
		padding-left: 40px;
	}

	#input_text {
		margin: 10px 0;
	}

	.dialogoverlay > .commonDialog > .dialogMassage {
		display: block;
		text-align: left;
		margin: 20px 0px;
		font-size: 15px;
		color: var(--gray-7);
		word-break: break-all;
	}

	.dialogoverlay > .commonDialog > button,
	.dialogFormBtn {
		user-select: none;
		display: inline-block;
		background-image: none;
		background-color: var(--btn-main);
		color: var(--background-wrap);
		text-decoration: none;
		border: none;
		cursor: pointer;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
		position: relative;
		border-radius: 5px;
		line-height: 1em !important;
		padding: 0.5em 1em !important;
		font-size: 12px;
		margin-top: 10px;
	}

	textarea.dialogTextArea {
		resize: vertical;
		width: 100%;
		height: 6em;
		box-sizing: border-box;
	}
	/* commonDialog.cssに移植予定 */


	/* dialog icon */
	.dialogoverlay > .commonDialog > .warning {
		background: url('../icon/warning.png') no-repeat;
		background-size: 30px;
	}

	.dialogoverlay > .commonDialog > .ban {
		background: url('../icon/ban.png') no-repeat;
		background-size: 30px;
	}

	.dialogoverlay > .commonDialog > .info {
		background: url('../icon/infomation.png') no-repeat;
		background-size: 30px;
	}

	#wrap {
		margin:  0 auto;
		padding: 0;
		height: 100%;
		background-color: var(--background-wrap);
		text-align: center;
	}

	#content {
		position: relative;
		padding: 0 20px;
		background-color: var(--background-wrap);
		box-sizing: border-box;
	}

	.full {
		height: 100%;
	}

	#breadcrumbsList {
		text-align: left;
		padding: 5px 0px;
	}

	.btn {
		user-select: none;
		display: inline-block;
		padding: 0.5em 1.5em;
		margin: 10px;
		background-image: none;
		background-color: var(--btn-main);
		color: var(--background-wrap);
		text-decoration: none;
		border: none;
		border-radius: 0;
		cursor: pointer;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
		position: relative;
		border-radius: 5px;
		font-size: 12px;
	}

	.btn_s { /* btnと併記 */
		line-height: 1em !important;
		padding: 0.5em 1em !important;
		margin: 10px 0 !important;
		font-size: 12px;
	}

	.btn_r {
		background-color: #f00 !important;
	}

	.btn_r:hover {
		background-color: #f55 !important;
	}

	h3 > .btn_s,
	h3 > a > .btn_s {
		margin: 0 !important;
	}

	.close_btn {
		display: inline-block;
		text-align: center;
		background-color: #0996fb;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		position: absolute;
		right: 10px;
		top: 10px;
		user-select: none;
	}

	.close_btn::after {
		content: '';
		display: block;
		background: url(../icon/cancel_w.png) no-repeat;
		background-size: 15px;
		height: 25px;
		width: 25px;
		background-position: center;
	}

	.btn:hover,
	.btn:focus,
	.close_btn:hover,
	.close_btn:focus,
	.dialogoverlay > .commonDialog > button:hover,
	.dialogoverlay > .commonDialog > button:focus {
		outline: none;
		background-color: var(--btn-focus);
		cursor: pointer;
	}

	.login {
		margin-bottom: 0 !important;
	}

	.btn:active,
	#scoring:active,
	.dialogoverlay > .commonDialog > button:active {
		position: relative;
		top: 1px;
	}

	.close_btn:active {
		top: 11px;
	}

	.logout_btn { /* btnと併記 */
		padding: 0.5em 1em;
		font-size: 12px;
		letter-spacing: 0;
		margin: 0 !important;
		position: absolute !important;
		top:   10px !important;
		right: 20px !important;
	}

	.logout_btn:active{
		position: absolute !important;
		top:11px !important;
	}

	.btn::-moz-foucus-inner {
		padding: 0;
		border: none;
	}

	.text {
		text-align: left;
		line-height: 1.8em;
		margin: 40px;
	}

	a {
		display: inline-block;
		text-decoration: none;
		color: var(--point-color);
	}

	a:hover {
		text-decoration: underline;
	}


	a[href^="http"] {
		background: url(../icon/link_p.png) no-repeat right center;
		background-size: 18px;
		padding-right: 22px;
		margin-right: 4px;
	}

	.cd_jkURL > a[href^="http"] {
		background: none !important;
	}

	.prj {
		position: relative;
		padding: 10px 20px 10px 10px;
		width: 260px;
		height: 4em;
		box-sizing: border-box;
	}

	.prj span {
		position: absolute;
		display: inline-block;
		margin: 0;
		padding: 0;
		width: 230px;
		text-align: center;
		left: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.prj::after {
		position: absolute;
		content: "▶";
		color: var(--background-wrap);
		font-weight: 900;
		top: 50%;
		right: 4px;
		left: auto;
		bottom: auto;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	h1 {
		color: var(--background-wrap);
		font-size: 50px;
		line-height: 1.2em;
		font-weight: bold;
		height: 300px;
		padding:60px 30px;
		margin: 0 -30px 30px;
		background-color: #ddd;
		text-align: left;
		text-shadow: 2px 2px 7px rgba(var(--shadow), 0.5);
		box-sizing: border-box;
	}

	h2 {
		color: var(--background-main);
		font-size: 30px;
		font-weight: bold;
		padding: 0.5em 1em;
		margin: 1em 0 !important;
		border-top: var(--background-main) 1px solid;
		border-bottom: var(--background-main) 1px solid;
		text-align: center;
	}

	h3 {
		position: relative;
		color: var(--background-main);
		font-size: 25px;
		font-weight: normal;
		margin: 0 !important;
		padding: 5px 0px !important;
		border-bottom: var(--background-main) 1px solid;
		text-align: left;
		line-height: 30px;
	}

	h4 {
		height: 1.4em;
		line-height: 1em;
		color: var(--background-main);
		font-weight: normal;
		padding: 2px 5px !important;
		margin: 0.5em 0 !important;
		border-left: var(--background-main) 5px solid;
		text-align: left;
		box-sizing: border-box;
	}

	.machine {/* 実験授業ヘッダー画像 */
		background: url("../img/machine.jpg") no-repeat;
		background-size: cover;
	}

	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="text"]:focus,
	textarea:focus {
		outline: 0;
		-webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
		box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
	}

	.form {
		display: inline-block;
		background:#ddd;
		padding: 20px;
		margin-top: 30px;
	}

	.loginform {
		padding: 10px;
		letter-spacing: 1px;
		font-size: 15px;
		background-color: var(--background-wrap) !important;
		border: #ccc solid 1px !important;
	}

	.id, .pass {
		margin-bottom: 15px;
	}

	.id {
		background: url("../icon/user_s.png") no-repeat;
		padding-left: 35px;
		background-position-x: left;
		background-position-y: center;
		background-size: 24px;
	}

	.pass {
		background: url("../icon/key.png") no-repeat;
		padding-left: 35px;
		background-position-x: left;
		background-position-y: center;
		background-size: 24px;
	}

	ul.user {
		margin: 0;
		padding: 1em 2em;
		text-align: left;
		width: auto;
		background-color: #ddd;
	}

	#inner {
		display: table;
		text-align: left;
		margin: 20px -30px 0;
		border: none;
		background-color: var(--background-wrap);
		border-collapse: separate;
		border-spacing: 30px;
		box-sizing: border-box;}

	#userinfo {
		display: table;
		background-color: #eee;
		width: 100%;
		margin-bottom: 15px;
		border-collapse: separate;
		border-spacing: 0px;
		text-align: left;
		padding: 15px;
		box-sizing: border-box;
	}

	#userinfo > .left {
		display: table-cell;
		padding-right: 15px;
		text-align: center;
		width: 100px;
	}

	.userimg {
		display: block;
		background-color: var(--background-wrap);
		width: 100px;
		height: 100px;
		padding: 10px;
		box-sizing: border-box;
	}

	#userinfo > .right {
		position: relative;
		display: table-cell;
		text-align: left;
		vertical-align: middle;
	}

	#userinfo > .right > a > .btn {
		position: absolute;
		right: 0;
		top: 5px;
		margin: 0 !important;
		padding: 5px 10px !important;
		font-size: 12px !important;
	}

	#userinfo > .right > h3 {
		margin: 0 0 10px !important;
		display: table;
		width: 100%;
	}

	#userinfo > .right > h3 > span,
	#userinfo > .right > h3 > a {
		display: table-cell;
	}

	.Unchangeable {
		color: #666;
	}

	.Unchangeable::after{
		content: " *変更不可";
		color: #f00;
		font-size: 14px;
	}

	.userInfo_wrap {
		width: 100%;
		text-align: left;
	}

	.userInfo_line > form {
		margin: 0 !important;
	}

	.userInfo_block {
		width: 70%;
		display: block;
		margin: auto;
		padding: 10px 0;
	}

	.userInfo_pass {
		font-size: 12px;
		margin: 10px auto;
		text-align: left;
		line-height: 1.2em;
		color: #666;
		width: fit-content;
	}

	.userInfo_index, .userInfo_text {
		display: inline-block;
		margin: 10px 0;
	}

	.userInfo_index {
		text-align: right;
		font-weight: bold;
		width: 260px;
	}

	.timeline {
		display: table-cell;
		vertical-align: top;
		padding: 15px;
		width: 40%;
		min-width: 250px;
		height: 100%;
		background: #eee;
	}

	#timeline > .btn {
		width: 69px;
	}

	.message{
		width: calc(100% - 75px);
		height: 2em;
		padding: 12px 6px;
		letter-spacing: 1px;
		font-size: 14px;
		box-sizing: border-box;
	}

	#reload-timeline{
		margin-bottom: 10px;
	}

	.timeline-item {
		position: relative;
		display: block;
		background-color: var(--background-wrap);
		border-bottom: #ddd 1px solid;
		padding: 15px;
		color: #666;
		text-align: left;
		word-break: break-all;
	}

	.delete {
		display: none;
	}

	.own > .delete {
		position: absolute;
		right: 15px;
		top: 19px;
		display: inline-block;
		width: 20px;
		height: 20px;
		background: url(../icon/dustbox.png) no-repeat right top;
		background-size: 18px;
		opacity: 0.4;
	}

	.delete:hover{
		opacity: 0.8;
	}

	.timeline-item > .timeline-username{
		display: inline;
		padding-left: 20px;
		font-weight: bold;
		background: url(../icon/user_s.png) no-repeat;
		background-position-x: left;
		background-position-y: center;
		background-size: 18px;
	}

	.timeline-item > .timeline-userid{
		display: inline;
		font-size: 12px;
		color: #aaa;
		margin: 0 2px;
	}

	.timeline-item > .timeline-date{
		text-align: right;
		font-size: 12px;
		color: #aaa;
	}

	.timeline-item > .timeline-message{
		position: relative;
		font-size: 14px;
		line-height: 18px;
		background-color: var(--message);
		padding: 10px;
		border-radius: 10px;
		margin: 12px 0 6px 4px;
	}

	.timeline-message:before {
		content: "";
		position: absolute;
		top: -20px;
		left: 16px;
		border: 8px solid transparent;
		border-bottom: 15px solid var(--message);
	}

	.own > .timeline-message {
		background-color: rgb(255, 232, 197) !important;
	}

	.own > .timeline-message:before {
		content: "";
		position: absolute;
		top: -20px;
		left: 16px;
		border: 8px solid transparent;
		border-bottom: 15px solid rgb(255, 232, 197) !important;
	}

	.timeline-item > .timeline-automessage{
		display: inline;
		font-size: 14px;
		line-height: 18px;
		margin: 4px 0;
	}

	.toggle {
		position: relative;
		background-color: #eee;
		padding: 10px;
		margin-bottom: 20px;
	}

	.toggle > .toggle_close,
	.toggle > .toggle_open {
		background-size: 20px;
		background-position-x: right;
		background-position-y: center;
		display: inline-block;
		width: calc(100% - 20px);
		height: 24px;
		position: absolute;
		top: 18px;
		right: 10px;
	}

	.toggle_close {
		background: url(../icon/close_b.png) no-repeat;
	}

	.toggle_open {
		background: url(../icon/open_b.png) no-repeat;
	}

	.toggle_close:hover,
	.toggle_open:hover {
		cursor: pointer;
	}

	.booklist {
		background: #fff;
		padding: 15px 20px;
		margin-left: 35px;
		margin-top: 10px;
		border-radius: 10px;
		text-align: left;
		position: relative;
		word-break:break-all;
	}

	.booklist div {
		border-bottom: #ddd 1px solid;
		margin-bottom:  10px;
		padding-bottom: 10px;
		word-break:break-all;
	}

	.booklist div:last-child {
		border: none !important;
		padding: 0px !important;
		margin: 0 !important;
	}

	.books {
		background: url("../icon/books_b.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 30px;
	}

	.book_b {
		background: url("../icon/book_b.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 20px;
	}

	.book_info {
		content: "";
		display: inline-block;
		position: relative;
		top: 2px;
		background: url(../icon/infomation.png) no-repeat;
		background-size: 1em;
		height: 1em;
		width: 1em;
		margin:0 0.25em;
	}

	.book_info:hover {
		cursor: pointer;
	}

	.bell {
		background: url("../icon/bell.png") no-repeat;
		background-position-x:0px;
		background-position-y:center;
		background-size: 30px;
	}

	.booklist > div > a.book_b{
		padding-left: 24px;
		padding-right: 20px;
	}

	.books:before,
	.bell:before {
		content: "";
		display: inline-block;
		width:  30px;
		height: 20px;
		margin-right: 5px;
		vertical-align: middle;
	}

	#scoring { /* 採点ボタン */
		display: inline-block;
		font-size: small;
		color: var(--background-wrap);
		border-radius: 5px;
		padding: 0 5px;
		margin-left:0.5em;
		background-color: #999;
		cursor: pointer;
		-webkit-appearance: none;
		box-shadow: 1px 1px 3px 0 rgba(var(--shadow), 0.2);
	}

	#scoring:hover,
	#scoring:focus {
		outline: none;
		background-color: #bbb;
	}

	/* admin */
	.adminWrap {
		padding: 0 !important;
		padding: 0 30px;
		height: 100%;
		background-color: var(--background-wrap);
	}

	#adminMenu > .btn_s,
	#adminMenu > form > input.btn,
	#adminMenu > a.btn_s {
		height: auto !important;
		line-height: auto !important;
		margin: 4px 0 !important;
		width: 100%;
		text-align: left;
		padding: 6px 10px !important;
		box-sizing: border-box;
		letter-spacing: 0em;
		font-size: 12px !important;
	}

	a.btn,
	#adminMenu > a.btn {
		text-decoration: none !important;
	}

	#adminHeader {
		position: relative;
		height: 60px;
		padding: 7px 30px;
		text-align: left;
		box-sizing: border-box;
		border-bottom: 1px var(--gray-5) solid;
	}

	#adminHeader .left {
		display: inline-block;
		color: var(--background-main);
		font-weight: bold;
		font-size: 30px;
	}

	#adminHeader .right {
		display: inline-block;
		position: absolute;
		right: 30px;
		height: 40px;
		line-height: 40px;
		color: #777;
		border-bottom: #777 1px solid;
	}

	#adminHeader .right > span {
		color: #000;
	}

	#adminTable {
		display: -webkit-box; /*Android4.3*/
		display: -moz-box;    /*Firefox21*/
		display: -ms-flexbox; /*IE10*/
		display: -webkit-flex; /*PC-Safari,iOS8.4*/
		display: flex;
		height: calc(100% - 65px);
		text-align: left;
		box-sizing: border-box;
	}

	#adminMenu {
		height: 100%;
		padding: 10px;
		width: 20%;
		min-width: 200px;
		border-right: 1px var(--gray-5) solid;
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#adminMenu input[type="text"] {
		margin: 5px 0px;
	}

	#adminDisplayArea {
		padding: 10px;
		width: 80%;
		background-color: var(--gray-e);
		box-sizing: border-box;
		overflow-y: scroll;
	}

	#adminDisplayArea > table {
		background-color: #fff;
	}

	#infoeditorDisplayArea {
		padding: 10px;
		width: 100%;
		background-color: var(--gray-e);
		box-sizing: border-box;
		overflow-y: scroll;
	}

	div.DragDropArea {
		z-index: 10;
		overflow: auto;
		border: 2px dotted #888888;
		width: 540px;
		height: calc(100% - 110px);
		background-color: #cccccc;
		margin: 0 auto;
		text-align: left;
		margin: 10px 0;
		box-sizing: border-box;
		font-size: 14px;
	}

	div.DragDropArea:empty:before {
		content:attr(data-placeholder);
		color:gray
	}

	.fileDeleteLabel {
		color: var(--btn-main);
		word-break: keep-all;
		padding-right: 8px;
	}

	.file_local > .fileName::before{
		content: "Upload";
		font-size: 8px;
		letter-spacing: 0;
		text-align: center;
		display: inline-block;
		width: 48px;
		background-color: #fff;
		color: var(--btn-main);
		margin-right: 8px;
	}

	.file_server,
	.file_local {
		width: fit-content;
	}

	.file_server > label,
	.file_local {
		display: flex;
		padding: 2px 2px 2px 4px;
		height: 1.5em;
		margin: 0 !important;
		line-height: 1.5em;
	}

	.file_server > label:hover {
		background-color: #ddd;
	}

	.fileName {
		display: inline-block;
	}

	.check_FileDelete {
		margin: 4px 4px 2px 0px !important;
	}

	div.DragDropArea > div > .writingDirection,
	div.DragDropArea > div > .upload {
		background-color: #fff;
		color: #0075ff;
		padding: 0 2px;
	}

	div.DragDropArea > hr {
		background-color: #8d8d8d !important;
		height: 1px !important;
		margin: 5px 0px !important;
	}

	.bgY {
		background-color: #FF0;
	}

	.h40p {
		max-height: 40% !important;
	}

	.fw900 {
		font-weight: 900;
	}

	.pos_R410 {
		left:calc(100% - 410px) !important;
	}

	.searchResultPage{
		color: #aaa;
	}
}