/* 変数定義 */
:root {
  --bg-color	: #c8efd3;	/* 背景色 */
  --bg-nav		: #59ca00;	/* ナビバー */
  --bg-nav-hover: #c0daac;	/* ナビバー(ホバー) */
  --bg-table	: #f8f8f8;	/* テーブル外側色 */
  --bg-content	: #ffffff;	/* テーブル内側色 */
  --bg-sidebar	: #75dc24;	/* サイドバー色 */
  --bg-cream	: #f8fad4;	/* クリームの色 */
  --bg-complete	: #ffe6c9;	/* 履修済み課題の帯色	*/
  --title-font-color	: #478d84;	/* コンテンツタイトル文字色 */
  --bg-button-y	: #ffe600;	/* 黄ボタン色 */
  --ft-button-y	: #afa658;	/* 黄ボタン字 */
  --bg-button-g	: #d8e212;	/* 緑ボタン色 */
  --ft-button-g	: #a0a458;	/* 緑ボタン字 */
  --bg-button-p	: #f4d2de;	/* 桃ボタン色 */
  --ft-button-p	: #9b5b63;	/* 桃ボタン字 */
  --notification-title	: #007fb1;	/* 先生画面のタイトルカラー */
  --notification-font	: #497e93;	/* 先生画面のフォントカラー */
  
  --bg-blackboard	: #047531;	/* 黒板背景色 */
  --ft-blackboard	: white;	/* 黒板文字色 */
  
  --text-gray	: darkgray;
  --grade-s		: 255,192,203;
  --grade-a		: 255,127,80;
  --grade-b		: 144,238,144;
  --grade-c		: 189,183,107;
  --grade-d		: 135,206,235;
  --grade-e		: 0,191,255;
}

a{
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
img{
	max-width	: 100%;
}

body {
	margin		: 0;
	padding		: 0;
	/*font-family	: meiryo;*/
	font-family	: "M PLUS Rounded 1c";
	font-size	: 18px;
	font-weight	: bold;
	background		: var(--bg-color);
	padding-top		: 3.5rem;	/* ナビゲーションバーと重ならないためのpadding */
}

.green_select{
	color	: white;
	background	: #2bad38;
	border-radius	: 1em;
	padding		: .25em 1em;
}
.blue_select{
	color	: white;
	background	: #141fa0;
	border-radius	: 1em;
	padding		: .25em 1em;
}

div#main_content{
	overflow-x		: hidden;
}
div#main_content[data-page='answer'],
div#main_content[data-page='timer'][data-subject='algo']{
	overflow		: initial;
}

div#main_content.content_smartphone{
	font-size		: 0.85em;
}
div#main_content.content_tablet{
	font-size		: 0.85em;
}
@media screen and (max-width: 992px){
	body{
		font-size			: 70%;
	}
}
@media screen and (max-width: 768px){
	body{
		font-size			: 65%;
	}
}
@media screen and (max-width: 576px){
	body{
		font-size			: 65%;
	}
}
.emScaler {
	margin: 0;
	padding: 0;
	width: 1px;
	height: 1em;
	visibility: hidden;
}
.hidden_data{
	display			: none;
}
#main_message{
	padding			: 0 20px;
}
.katex{
	font-family		: "M PLUS Rounded 1c" !important;
	font-weight		: bold;
	font-size		: 1.2em;
}
.passive_interface{
	display			: none;
}
.active_interface{
	display			: block;
}
.btn-transition,
.btn-accordion,
.btn-normal{
	cursor		: pointer;
}
.btn-decorative{
	box-shadow	: 0 0.2em;
	transition	: margin .1s ease-in-out,box-shadow .1s ease-in-out;
}
.btn-decorative.pushing{
	margin-top	: 0.2em;
	box-shadow	: 0 0;
	margin-bottom : -0.2em;
}
svg-icon{
    position	: relative;
    width		: 30px;
    height		: 30px;
}
svg-icon svg{
	position	: relative;
    width		: 15px;
    height		: 15px;
}
svg-icon svg g{
    fill		: #34769B !important;
}
.do_event{
	cursor		: pointer;
}
.no_event{
	pointer-events: none;
}
.no_scroll{
	scroll-behavior	: unset;
	overflow		: unset !important;
}
.mobile_scroll{
	scroll-behavior	: unset;
	overflow		: unset !important;
}

.btn-y{
	background		: var(--bg-button-y) !important;
	color			: var(--ft-button-y) !important;
}
.btn-g{
	background		: var(--bg-button-g) !important;
	color			: var(--ft-button-g) !important;
}
.btn-p{
	background		: var(--bg-button-p) !important;
	color			: var(--ft-button-p) !important;
}
.btn-b{
	background		: #a3d7e3 !important;
	color			: #007fb1 !important;
}
.btn-o{
	background		: #ffb400 !important;
	color			: #af8100 !important;
}
@media screen and (max-width: 576px){
	.mobile_scroll{
		overflow		: auto;
	}
}
.gray{
	color		: darkgray;
}
.n_gray{
	color		: gray;
}
.f120{	font-size	: 1.2em; }
.f090{	font-size	: .9em; }
.f080{	font-size	: .8em; }
.f070{	font-size	: .7em; }
.f060{	font-size	: .6em; }
.f050{	font-size	: .5em; }
.bg_orange{
	background	: #ffd768;
}
.nav_select_corporation,.nav_select_school{
	font-size	: .9em;
}
.nav_toggle_select{
	font-size	: 1rem;
}
@media screen and (max-width: 992px){
	.nav_menu_select {
		display	: none;
	}
}

/* css service hidden*/
body[data-localize="DEFAULT"] *[data-localize_hidden*="DEFAULT"]{
	display		: none !important;
}

body[data-localize="MEIJIN"] *[data-localize_hidden*="MEIJIN"]{
	display		: none !important;
}

/*カレンダーコンテンツ*/
div.fc-content > div.fc-title{
	font-size	: 60%;
}
#calendar div.fc-time{
	display		: none;
}
#calendar a.fc-time-grid-event{
	left		: 0 !important;
	right		: 0 !important;
	margin-right: 0 !important;
}
div.fc-event-container > a.status_new{
	background	: orange;
	border-color: orange;
}
div.fc-event-container > a.status_clear,
div.fc-event-container > a.status_complete{
	background	: green;
	border-color: green;
}
div#calendar .fc-left,
div#calendar .fc-center,
div#calendar .fc-light{
	white-space:nowrap;
}

/*=========================
	メイン　コンテンツ
=========================*/

/* ナビバー */
nav.navbar-lms{
	background		: var(--bg-nav);
	font-weight		: bold;
	font-size		: 0.95em;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform .4s ease;
	transition: -webkit-transform .4s ease;
	transition: transform .4s ease;
	transition: transform .4s ease, -webkit-transform .4s ease;
}
nav.navbar-lms li{
	padding	: 0 .75em;
}
nav.navbar-lms.hide{
	-webkit-transform: translateY(-150%);
	transform: translateY(-150%);
}
nav.navbar-lms a{
	color			: white;
}
nav.navbar-lms a.active-link:hover{
	background		: var(--bg-nav-hover);
}
nav.navbar-lms a.disable_link{
	opacity			: 0.5;
}
nav.navbar-lms a.loading_link{
	background		: var(--bg-nav-hover);
}
nav .navbar-toggler-icon{
	color			: white;
}
nav .navigation_scrolltop_button{
	padding			: .25rem .75rem;
    font-size		: 1.25rem;
    line-height		: 1;
    background-color: transparent;
    border			: 1px solid transparent;
    border-radius	: .25rem;
    display			: none;
}
#lms_navbar .location_infomation{	
    font-size		: 0.9rem;
    padding			: 0.25em 0.5em;
}
#lms_navbar .navbar_button_info{
    vertical-align	: super;
}
.location_infomation{
	background		: transparent;
	color			: transparent;
	border-radius	: 0.5em;
	cursor			: pointer;
}
.location_infomation.location_school{
	background		: #f4ac45;
	color			: white;
}
.location_infomation.location_home{
	background		: #2c6d8c;
	color			: white;
}
.navbar-reload{
	padding-right	: 1em;
}
.navbar_reload_wrap{
	color			: white;
	cursor			: pointer;
}
.reload_on{
	display			: none;
}
.reload_rotate{
	width			: 0;
	opacity			: 0;
	transform-origin: 50% 43%;
	animation: reload_rotation 2s linear infinite;
}
 
@keyframes reload_rotation {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.navbar_message_wrap{
	color			: transparent;
}
.navbar_message_wrap.has_message{
	color			: white;
	cursor			: pointer;
}
.navbar_message_wrap .badge{
	position		: absolute;
	right			: -0.8em;
	top				: -0.8em;
	background		: red;
	border-radius	: 100%;
	font-size		: 0.5em;
}
#smartstudy_navbar #nav_menu_message > div{
	display			: none;
}
#smartstudy_navbar.message #nav_menu_message > div{
	display			: block;
}
@media screen and (max-width: 992px){
	.navbar-location_infomation{
		display		: none;
	}
	.navbar-reload{
		display		: none;
	}
	.navbar-message{
		display		: none;
	}
}


/* カレンダー */
#calendar {
	max-width		: 100%;
	margin			: 0 auto;
}
th.fc-sun{
	background		: #ffe4e1;
}
th.fc-sat{
	background		: #add8e6;
}

/* カレンダー要素 */
a.schedule.no_editable{
	cursor			: not-allowed;
}
a.fc-schedule{
	color			: white !important;
}

/* main content */
div#main_content{
	background		: var(--bg-color);

}

/* 左メインコンテンツ */
div#left_column{
	padding			: 0px 8px;
}
div.content_table{
	
}
div.content_table.accordion_closing_table{
	margin			: 0 0 .5em 0;
	padding			: 0;
	border-radius	: 0;
}
body[data-pagename="challenge"] #content_normal{
	position		: relative;
}

body[data-pagename="challenge"] #content_normal div.bookmark_container{
	position		: absolute;
	right			: 0.1em;
	top				: 0em;
	font-size		: 2em;
	color			: var(--title-font-color);
	display			: none;
}
body[data-actionname="result"] #content_normal div.bookmark_container{
	display			: block;
}


div.content_table > h3{
	color			: var(--title-font-color);
	font-size		: 1.5em;
    padding			: 6px 0 3px 0;
}
div.content_header{
	padding			: 16px;
}
div.content_table > div.content_inner{
	background		: var(--bg-content);
	padding			: 16px;
	overflow		: auto;
}
div.content_table > div.content_footer{
	padding			: 8px 0 12px 0;
}
@media screen and (max-width: 576px){
	div.content_table > div.content_inner{
		padding				: 2px;
	}
}

/* 左上ボタン */
div.top_menu{
	margin			: 0;
	padding			: 0;
}
div.top_menu > div.row{
	padding			: 4px 0;
}
div.top_menu > div.row > div > a{
	display			: block;
/*	width			: 90%;*/
	margin			: 8px 4px;
	padding			: 8px 16px;
	text-align		: center;
	border-radius	: 8px;
	background		: var(--bg-button-y);
	color			: var(--ft-button-y);
	font-weight		: bold;
}
div.top_menu > div.row > div > a.active-link:hover{
	background		: #fff6a7;
}

/* パンくずリスト */
div#left_column .breadcrumb{
	background		: var(--bg-table);
    margin			: 8px 4px 16px 4px;
    border-radius	: 12px;
}
/* 次のカリキュラムリスト*/
ul.top_curriculum_list {
	min-height		: 70px;
}
ul.top_curriculum_list  > .list-group-item{
	padding			: 0;
	cursor			: pointer;
}
ul.top_curriculum_list  > .list-group-item > div{
	padding			: 1em;
}
ul.top_curriculum_list  > .list-group-item > div:first-child{
	background		: var(--bg-button-y);
}
ul.top_curriculum_list  > .list-group-item > div:last-child{
	padding			: 0.5em;
}

li.list-group-item.loading{
	text-align		: center;
    padding			: 10px !important;
    background		: white;
}
li.list-group-item.loading > div{
	text-align		: center;
    background		: white !important;
    border			: .25em solid var(--notification-font);
    border-right-color: transparent;
}
ul#recently_curriculum_list{
	max-height		: 18em;
    overflow		: auto;
}
body[data-pagename="studyrecord"] ul#recently_curriculum_list{
	max-height		: 100%;
    overflow		: auto;
}
ul#recently_curriculum_list > li{
	cursor			: pointer;
}
ul#recently_curriculum_list > li > div > div:first-child{
	color			: var(--text-gray);
	margin-right	: 1em;
	white-space		: nowrap;
}
ul#recently_curriculum_list > li > div > div:last-child{
	white-space		: nowrap;
}
ul#recently_curriculum_list > li.question div > div.title{
	text-decoration	: underline;
}

/* メニュー右上のつまんで移動できそうなアレ */
div.sidemenu_table .menu_head .menu.col-2{
	color				: transparent;
}
/*=========================
	ログインページ
=========================*/
body.login,div.login{
	padding			: 0 32px;
}
#login_container{
	max-width		: 512px;
	margin			: 64px auto;
    padding			: 16px 16px 8px 16px;
	background		: white;
    border-radius	: 32px;
}
#login_container h1{
	padding			: 16px 0;
}
#login_container .form-group{
	padding			: 0 24px
}
#login_container div.form-input{
	margin			: 8px 0;
	font-size		: 120%;
    font-weight		: bold;
}
#login_container div.form-input > span{
	display			: inline-block;
	color			: #497e93;
	width			: 30%;
}
#login_container div.form-input > input{
	display			: inline-block;
	background		: #f8f8f8;
	width			: 65%;
	border			: none;
}
#login_container .submit_wrap{
	text-align		: center;
	margin			: 24px 0 48px 0;
}
#login_container .submit_wrap > button{
	white-space		: nowrap;
	font-size		: 120%;
    font-weight		: bold;
	color			: #497e93;
	background		: #cae7f2;
	padding			: 8px 64px;
    border-radius	: 12px;
}
#login_container p{
	text-align		: center;
}
.error_message_wrap{
    max-width		: 512px;
	margin			: 0 auto;
	color			:red;
}

#login_footer  p{
	text-align		: center;
}
#login_footer  p > a{
	color			: #aaa;
}


/* グレード・スコア・バッジ関連 */
span.badge.grade{
	background		: bisque;
    margin-right	: 4px;
}
span.badge.grade.junior{	background		: #ffd700;	}
span.badge.grade.middle{	background		: #98fb98;	}
span.badge.grade.high{		background		: #add8e6;	}
span.badge.task{
	background		: bisque;
    margin-right	: 4px;
}
span.badge.clear{
	margin-right	: 2px;
}
span.badge.clear.rankS{	background	: rgba(var(--grade-s),0.8);	}
span.badge.clear.rankA{	background	: rgba(var(--grade-a),0.6);	}
span.badge.clear.rankB{	background	: rgba(var(--grade-b),0.7);	}
span.badge.clear.rankC{	background	: rgba(var(--grade-c),0.7);	}
span.badge.clear.rankD{	background	: rgba(var(--grade-d),0.7);	}
span.badge.clear.rankE{	background	: rgba(var(--grade-e),0.6);	}

span.badge.time{
	margin-right	: 2px;
	background		: #fffbd5;
}
span.badge.time.clear{
	background		: #c8efea;
}
span.badge.school{
	background		: bisque;
    margin-right	: 4px;
}

/* 設定関連 */
div#program_loading{
	display			: none;
	margin			: 1em;
	color			: var(--title-font-color);
}
ul#setting_list_programs{
	margin			: 0.5em 0;
}
ul#setting_list_programs div.program_text,
ul#setting_list_programs div.program_curriculum,
ul#setting_list_programs div.program_root{
	margin			: .5em;
}
ul#setting_list_programs > li.program_data{
	background		: #ddeef8;
	color			: darkblue;
}
ul#setting_list_programs > li.program_data select{
	color			: darkblue;
}
ul#setting_list #clear_cache_button,
ul#setting_list_programs > li.program_data div.program_delete{
	background		: var(--bg-button-p);
	color			: var(--ft-button-p);
}
div#add_program_button{
	background		: var(--bg-button-g);
	color			: var(--ft-button-g);
	display			: none;
}

/* 生徒/講師共通 modal関連 */
div.modal_bg{
	background		: rgba(0,0,0,0.25);
    width			: 100%;
    height			: 110%;
    position		: fixed;
    z-index			: 1100;
    margin-top		: -4rem;
    cursor			: pointer;
}
body.container-fluid > div.modal_bg{
	margin-left		: -15px;
}
div.modal_content{
	position		: fixed;
    background		: rgba(255,255,255,0.8);
    z-index			: 1200;
    max-height		: calc(90% - 4em);
    overflow-y		: auto;
}
div.modal_vertical_answers{
    min-height		: calc(90% - 4em);
}
div.modal_content_visible{
	position		: fixed;
    background		: rgba(255,255,255,0.8);
    z-index			: 1200;
    max-height		: calc(90% - 4em);
    overflow		: visible;
}
div.modal_content > div.modal_close{
	position		: absolute;
	content			: '×';
    right			: 0.5rem;
    top				: 0.25em;
    font-size		: 1.5em;
    padding			: 0.2rem 0.5rem;
    cursor			: pointer;
}
div.modal_content.modal_student{
	width			: 65%;
}
div.modal_content.modal_hint{
	width			: 92%;
	width			: calc(100% - 30px);
}
div.loading_wrap,
div.modal_content div.modal_button{
	text-align		: center;
}
div.modal_content div.modal_message{
	margin			: 1em auto;
}
#main_content > div.modal_content{
	margin			: 0 -8px;
}
div.modal_answers,
div.modal_finish,
div.modal_question_view{
	width			: 95%;
	z-index			: 1205;
}
div.modal_question_edit{
	width			: 92%;
	width			: calc(100% - 30px);
	z-index			: 1210;
}
div.modal_question_preview{
	width			: 92%;
	width			: calc(100% - 30px);
	z-index			: 1215;
}
div.modal_rublic{
	z-index			: 1220 !important;
}
div.modal_question_edit tr.questions_data{
    border-bottom	: .35em solid lightgrey;
}

div.modal_register{
	width			: 95%;
	margin-left		: 2.5%;
}
div.modal_inner{
	padding			: 2em;
	text-shadow		: -2px -2px 1px white, 2px 2px 1px white, 2px -2px 1px white, -2px 2px 1px white;
}
table.modal_table{
	width			: 100%;
    margin			: 12px 0;
    border			: 1px solid lightgray;
    background		: rgba(255,255,255,0.6);
    text-shadow		: none;
    font-size		: 0.9em;
}
table.modal_table > thead > tr > th,
table.modal_table > tbody > tr > td.infomation{
	text-align		: left;
	padding			: 8px;
	background		: var(--bg-button-y);
	color			: var(--title-font-color);
}

table.modal_table > tbody > tr > td{
	text-align		: left;
	padding			: 8px;
	border			: 1px solid lightgray;
}
table.modal_table > thead > tr > th:nth-child(2),
table.modal_table > tbody > tr > td:nth-child(2){
	text-align		: left;
}
table.modal_table > tbody > tr > td .align_left{
	text-align		: left;
}
table.modal_table > tbody > tr > td .align_center{
	text-align		: center;
}
table.modal_table > tbody > tr > td .align_right{
	text-align		: right;
}
table.modal_table > tbody > tr > td span.badge.clear{
	font-size		: 110%;
}
table.modal_table input:not([type="radio"]){
	min-width		: 80%;
}
table.modal_table span.infomation{
	font-size		: 0.8em;
	color			: gray;
}
td.modal_loading > div{
	color			: gray;
	margin			: 150px 0;
	text-align		: center;
}
.record_display,
.modal_close_button
.modal_inner .btn{
	cursor			: pointer;
}
div.modal_inner table.modal_table > tbody > tr > td.record_display{
	text-decoration	: underline;
}
tbody.answerecord_content td.column_question,
tbody.answerecord_content td.column_answer{
	width			: 40%;
	vertical-align	: top;
}
tbody.answerecord_content td.column_question img,
tbody.answerecord_content td.column_answer img{
	display			: block;
}
tbody.answerecord_content td.column_correct{
	font-size		: 1.25em;
}
.test_summary_container table.modal_answer_table tbody.answerecord_content td.column_correct{
	font-size		: 1em;
}
tbody.answerecord_content .selfcheck{
	color			: red;
	font-weight		: bold;
}
tbody.answerecord_content .vertical_display div{
	-ms-writing-mode: tb-rl;
	writing-mode	: vertical-rl;
	text-orientation: upright;
	width			: 100%;
	min-height		: 10em;
	white-space		: nowrap;
}
tr.questions_data.vertical_display div{
	-ms-writing-mode: tb-rl;
	writing-mode	: vertical-rl;
	text-orientation: upright;
	width			: 100%;
	min-height		: 10em;
	white-space		: nowrap;
}
span.rubric_button{
	display			: block;
}
div.modal_inner span.badge,
div.modal_inner div.btn-normal{
	text-shadow		: none;
}
.studycomment_form .btn{
	border			: 1px solid var(--ft-button-y);
    background		: var(--bg-button-y);
    color			: var(--ft-button-g);
}
div.modal_hint div.modal_inner{
	text-align		: center;
}
table.modal_answer_table{
    position		: relative;
    z-index			: 10;
}
li.list_loading_wrap{
	padding			: 0.5em !important;
	text-align		: center;
}

@media screen and (max-width: 768px){
	div.modal_content.modal_student,
	div.modal_content.modal_answers,
	div.modal_content.modal_finish,
	div.modal_content.modal_register,
	div.modal_content.modal_normal{
		width			: 100%;
	    width			: calc(100% - 16px);
	}
}

div.markup_fukidashi{
	display				: inline-block;
    background-image	: url(temp/fukidashi.png);
    background-size		: cover;
    color				: transparent;
    width				: 1.2em;
    height				: 1.2em;
    line-height			: 1em;
    margin-right		: .2em;
    cursor				: pointer;
	vertical-align		: middle;
}
div.markup_document{
	display				: inline-block;
    background-image	: url(temp/document.png);
    background-size		: cover;
    color				: transparent;
    width				: 1.2em;
    height				: 1.2em;
    line-height			: 1em;
    margin-right		: .2em;
    cursor				: pointer;
	vertical-align		: middle;
}

/* 最強のmodal */
div.modal_foreground{
	background	: rgba(0,0,0,0.25);
	position	: fixed;
	z-index		: 20000;
	left		: 0;
	top			: 0;
	bottom		: 0;
	right		: 0;
}
div.modal_loading_window_foreground{
	position	: fixed;
	z-index		: 20001;
	left		: 0;
	top			: 0;
	bottom		: 0;
	right		: 0;
	color		: white;
}
div.modal_loading_window_foreground .loading_wrap{
	height		: 100%;
}
div.modal_loading_window_foreground .spinner-border{
	width		: 5rem;
	height		: 5rem;
}

/* リザルト画面 modal */
div.modal_finish div.finish_display{
	text-align		: center;
	font-size		: 1.2em;
	margin			: 1em;
}
div.modal_finish div.modal_inner{
	width			: 75%;
	margin			: 2em auto;
}
div.modal_finish table.modal_table > tbody > tr > td:first-child,
div.modal_register table.modal_table > tbody > tr > td:first-child{
	background		: var(--bg-button-y);
	color			: var(--title-font-color);
}
div.modal_finish .col-6{
	text-align		: center;
}
div.modal_finish .col-6 > .btn{
	padding			: 1em;
	color			: black !important;
    text-shadow		: none;
    font-weight		: bold;
}

/* トースト */
#toast_wrap{
	position		: fixed;
	right			: 1rem;
	top				: 9rem;
	z-index			: 7800;
}
@media screen and (max-width: 768px){
	#toast_wrap{
		top				: 4rem;
	}
}

/* ランキングページ */
.profile_row{
	line-height		: 2.5em;
}
div.ranking_name span.photo,
.profile_row span.photo{
	width			: 2.5em;
    height			: 2.5em;
    display			: inline-block;
    border-radius	: 100%;
    overflow		: hidden;
    line-height		: 0;
    vertical-align	: middle;
    border			: 0.05em solid lightgray;
}
ul.ranking_list div.ranking_number,
ul.ranking_list div.ranking_score{
	line-height		: 3;
}
/* input label */
label > input[type='checkbox'],
label > input[type='radio']{
	display			: none;
}
tr.studycomment_form input[type='radio']{
	display			: inline-block;
}
label > span.check_icon{
	position		: relative;
	background		: white;
	text-align		: center;
    vertical-align	: middle;
    border			: 1px solid lightgray;
    width			: 1.5em;
    height			: 1.5em;
    display			: inline-block;
    margin			: 6px auto;
}
label > span.check_icon.radio{
	border-radius	: 100%;
}
label > input[type='checkbox'] + span.check_icon > span{
	color			: transparent;
}
label > input[type='checkbox'] + span.check_icon > span:before{
	vertical-align	: middle;
}
label > input[type='checkbox']:checked + span.check_icon > span{
  	color			: var(--notification-font);
}
label > input[type='radio'] + span.check_icon > span{
	color			: transparent;
}
label > input[type='radio'] + span.check_icon > span:before{
	vertical-align	: initial;
	line-height		: 1.25em;
}
label > input[type='radio']:checked + span.check_icon > span{
  	color			: var(--notification-font);
}
span.bulk_check{
	display			: inline-block;
	padding			: .2em .5em;
	border-radius	: .5em;
	border			: 1px solid var(--notification-font);
	font-size		: .7em;
	margin-left		: 1em;
	color			: var(--notification-font);
}

/* challenge 手書きモード body */
body.handwrite_mode #main_content{
	padding			: 0;
}
body.handwrite_mode #content_challenge{
	margin			: 0;
	padding			: 0;
	border-radius	: 0;
}
body.handwrite_mode #content_challenge > h3{
	display			: none;
}
#handwrite_timer_bar{
	font-size		: 1.5rem;
}
/* challenge 手書きモード canvas */
#latex_wrap{
	background	: white;
	position	: relative;
}
#question_detail_container{
	position	: absolute;
	font-size	: 1.75rem;
	z-index		: 1;
	width		: 100%;
	height		: 100%;
	background	: white;
}
#question_detail_container.finish{
	background	: rgba(127,127,127,0.05);
}
.pause #question_detail_container{
	display		: none;
}
#question_display{
	padding	: .5em;
}
#question_body{
	padding	: .5em;
}
#question_body_number{
	padding			: .5em 1em;
}
#question_body_number .q_num{
	padding-right	: .5em;
}
#question_display_number{
	padding			: .5em;
	white-space		: nowrap;
}
#question_display_number .q_num{
	border		: 1px solid currentColor;
	padding		: .1em .5em;
	margin-right: .5em;
	display		: block;
	white-space		: nowrap;
}
#question_display.align_left,
#question_display.align_center,
#question_display.align_right{
	padding-right	: 3em;
}
#question_body.align_left,
#question_body.align_center,
#question_body.align_right{
	padding-right	: 3em;
}
#question_display.align_left,
#question_body.align_left{
	text-align		: left;
}
#question_display.align_center,
#question_body.align_center{
	text-align		: center;
}
#question_display.align_right,
#question_body.align_right{
	text-align		: right;
}

#question_display .image_size_default,
#question_body .image_size_default{
	max-width	: 100%;
	max-height	: 5em;
}
#question_body .image_size_half{
	max-width	: 100%;
}
#question_body .image_size_full{
	max-width	: 100%;
}
#question_display .image_size_responsive_middle,
#question_body .image_size_responsive_middle{
	max-width	: 100%;
	max-height	: 70%;
}
#question_display .image_size_responsive_large,
#question_body .image_size_responsive_large{
	max-width	: 100%;
	max-height	: 100%;
}
#question_body .m_top{
	margin-top	: 2.5em;
}

@media screen and (max-width: 768px){
	#question_display.responsive,
	#question_body.responsive{
		display		: block !important;
	}
}
#question_display.responsive > div.question_display_text,
#question_body.responsive > div.question_body_text{
}
#question_display.responsive > div.question_display_image,
#question_body.responsive > div.question_body_image{
	min-width		: 35%;
	padding-left	: .5em;
}
#question_display .opening_image,
#question_body .opening_image,
.question_display_image.opening_image > img,
.question_body_image.opening_image > img{
	opacity		: 0;
}
#question_answer_info{
	padding-left: .5em;
	color		: #C0C0C0;
	font-size	: .9em;
}
.answer_display_title{
	padding-left: .5em;
	color		: #C0C0C0;
	position	: absolute;
	left		: 1em;
	top			: 0;
	font-size	: .9em;
}
#question_units_info{
	position	: absolute;
	left		: 0;
	bottom		: 0;
	right		: 20%;
	top			: 75%;
}
#question_units_info.note_like{
	background		: #ffffeb;
	/*background-image	: url("./temp/note_bg_left.png"),url("./temp/note_bg_middle.png");
	background-size		: 1em,.75em;
	background-repeat	: repeat-y,repeat;*/
	background-image	: url("./temp/note_bg_left.png");
	background-size		: 1em;
	background-repeat	: repeat-y;
	background-position	: 0;
}
#question_units_info_inner{
	width		: 100%;
	height		: 100%;
}
#question_units_info div.answer_unit{
	position	: absolute;
	bottom		: 1em;
	left		: 50%;
}
#question_units_info.unit_left div.answer_unit{
	left		: .5em;
}
#question_units_info div.answer_units{
	height		: 100%;
	padding		: 1em;
	border-left	: .2em solid #F3F9F9;
	position	: relative;
}
#question_units_info div.answer_units > .number{
	color		: #C0C0C0;
	font-size	: .7em;
    padding		: .75em 0;
}
#question_units_info div.answer_units > .erase{
	position	: absolute;
	font-size	: 1rem;
    padding		: .5em;
	top			: .1em;
	right		: .1em;
	color		: transparent;
}
#canvas_wrapper .erase_button{
	position	: absolute;
	font-size	: 1rem;
    padding		: .5em;
	color		: lightgray;
	cursor		: pointer;
	z-index		: 12;
	/*margin		: -1px;*/
}
/* 縦型カリキュラム */
.vertical_curriculum #question_units_info{
	top			: 0 !important;
	position	: relative;
}
.vertical_curriculum #question_units_info div.answer_units{
	border-top	: .2em solid #F3F9F9;
	border-left	: none;
}
#question_units_info div.answer_units:first-child{
	border-top	: none;
	border-left	: none;
}

#canvas_wrapper{
	position	: relative;
	z-index		: 2;
	border: 1px solid #000000;
}
#canvas_wrapper canvas.ready{
	
}
#canvas-background-area{

}
#layerd-canvas-area{
	/*position	: relative;
	display		: block;
	z-index		: 3;*/
}
#layerd-canvas-area > canvas{
	position	: absolute;
	top			: 0;
	left		: 0;
	right		: 0;
	bottom		: 0;
}
#layerd-canvas-area #draw-area{
	z-index		: 6;
}
#layerd-canvas-area #line-width-indicator{
	z-index		: 7;
}
.latex_ajax_result{
	border	: 1px solid gray;
	padding	: .5em;
	margin-top	: .5em;
}
.canvas_control_buttons > div{
	margin-right		: 1em;
	padding				: 1em 2em;
	font-size			: 1.2em;
}

#handwrite_vertical_menu{
	position		: relative;
	z-index			: 10;
	background		: var(--bg-color);
}

#handwrite_vertical_menu > div{
	background		: var(--bg-color);
	margin-left		: -30px;
	height			: 100%;
}
#handwrite_horizontal_menu{
	display		: none;
	position	: fixed;
	bottom		: -1.1rem;
	background		: var(--bg-nav);
	left		: 0;
	z-index		: 100;
	width		: 100%;
	height		: 6.3rem;
}
#handwrite_horizontal_menu ul{
	width		: 50%;
}
#handwrite_horizontal_menu ul li{
	width		: 33%;
}
.handwrite_horizontal_view{
	width		: 80%;
	width		: calc(100% - 13.5rem);
}
.math_result_wrapper{
	display		: none;
	padding		: 1em;
}
.math_result_display{
	background	: white;
	width			: 100%;
	height			: 100%;
	border-radius	: .5em;
}
#math_result_view{
	font-size		: 1.2rem;
	overflow		: auto;
    height			: 4rem;
	padding			: 1rem;
	-ms-overflow-style: none;    /* IE, Edge 対応 */
	scrollbar-width: none;       /* Firefox 対応 */
}
#math_result_view::-webkit-scrollbar {  /* Chrome, Safari 対応 */
	display:none;
}
#math_result_view > .result_row{
	padding			: .25rem 0;
	height			: 2rem;
	margin			: 0;
	border-bottom	: none;
}
#math_result_view > .blank_row{
	height			: 5rem;
	margin			: 0;
}
@media screen and (min-width: 650px){
	.math_result_wrapper{
		display		: block;
	}
}

#question_board{
	transform-origin	: top left;
}
#question_board.small{
	font-size			: .85em;
}
#question_board.small.cram{
	font-size			: .75em;
}
#handwrite_submitter{
	position	: fixed;
	right		: 0;
	z-index		: 101;
	width		: 40%;
}
.vertical_fix #handwrite_submitter{
	width		: 13rem;
}
.handwrite_large_big_giant_circle_button{
	border		: .75rem solid lightgray;
	position	: absolute;
	bottom		: -7rem;
	pointer-events: none;
	width		: 12rem;
	height		: 12rem;
	background	: white;
    border-radius: 100%;
}
.handwrite_large_loading_circle_button{
	display				: none;
	position			: absolute;
	left				: -.75rem;
	top					: -.75rem;
	width				: 12rem;
	height				: 12rem;
	border				: .75rem solid var(--bg-button-y);
	border-left-color	: transparent;
	border-top-color	: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border .75s linear infinite;
	animation: spinner-border .75s linear infinite;
}
#handwrite_large_progress_circle_button{
	position			: absolute;
	left				: -.75rem;
	top					: -.75rem;
	width				: 12rem;
	height				: 12rem;
}
.loading .handwrite_large_loading_circle_button{
	display				: block;
}
.pushing .handwrite_large_big_giant_circle_button{
	background			: lightyellow !important;
}
.handwrite_large_big_giant_circle_button:active{
	background			: red !important;
}
.handwrite_touch_button{
	white-space	: nowrap;
	position	: absolute;
	font-size	: 1;
	cursor		: pointer;
	bottom		: -3.5rem;
	left		: 3rem;
	width		: 6rem;
	height		: 7.5rem;
	user-select	: none;
}
.handwrite_touch_button > div{
	text-align	: center;
	font-size	: 1.5rem;
	padding-top	: 1rem;
	white-space	: nowrap;
}
.handwrite_touch_button > div.answer{

}
.handwrite_touch_button > div.finish{
	display		: none;
	color		: var(--ft-button-y);
}
#handwrite_submitter.finish div.answer{
	display		: none;
}
#handwrite_submitter.finish div.finish{
	display		: block;
}
#handwrite_submitter.finish div.handwrite_large_big_giant_circle_button{
	border		: .75rem solid var(--bg-button-y);
	background	: var(--bg-button-y);
}
#handwrite_submitter.next div.handwrite_large_big_giant_circle_button{
	border		: .75rem solid var(--bg-nav);
	background	: white;
}
.pause #handwrite_submitter{
	display		: none;
}
#handwrite_timer_pause_wrapper{
	height		: 1.5em;
	margin-top	: -.2em;
	padding-top	: .15em;
}

body.ui_type_yomutoku #handwrite_timer_pause_wrapper{	/* 読むとくの場合のUI非表示*/
	display		: none;
}
#handwrite_timer_pause{
	padding		: .1em 1em;
	cursor		: pointer;
}
#handwrite_answer_check_wrapper{
	height		: 1.5em;
	margin		: -.2em .2em 0 .2em;
	padding-top	: .15em;
	display		: none;
	position	: relative;
}
body.ui_type_yomutoku #handwrite_answer_check_wrapper{	/* 読むとくの場合のUI非表示*/
	display		: none;
}

#handwrite_answer_check_button{
	padding		: .1em 1em;
	cursor		: pointer;
}
#handwrite_answer_check_wrapper .badge{
	position		: absolute;
	right			: -0.3em;
	top				: 0.5em;
	color			: white;
	background		: red;
	border-radius	: 100%;
	font-size		: 0.5em;
}
#handwrite_answer_check_wrapper .badge[data-count="0"]{
	display			: none;
}
.canvas_clear_button_wrapper{
	padding		: 1em;
}
.canvas_clear_button{
	border-radius	: .5em;
	padding			: 1em;
	font-size		: 1.5em;
	background		: var(--bg-button-y);
	color			: var(--ft-button-y);
	cursor			: pointer;
	text-align		: center;
}
.canvas_edit_buttons{
	margin			: 0;
	border-radius	: .5em;
}
.canvas_edit_buttons > .canvas_clear_button{
	font-size		: 1.2rem;
	border-radius	: .5em 0 0 .5em;
	border-right	: 1px solid;
	white-space		: nowrap;
}
.canvas_undo_button{
	font-size		: 1.2rem;
	padding-top		: 1em;
	background		: var(--bg-button-y);
	color			: var(--ft-button-y);
	cursor			: pointer;
	text-align		: center;
	border-radius	: 0 .5em .5em 0;
}
.canvas_undo_button > span{
	font-size		: 1.35em;
}
#handwrite_timer_counter{
	position		: absolute;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
	z-index			: 1000;
	background		: white;
	text-align		: center;
}
#handwrite_timer_counter > .challenge_timer_countdown_wrap{
	height			: initial;
	top				: initial;
}
.handwrite_timer.accepting #handwrite_timer_counter{
	z-index			: 0;
}
div#handwrite_timer_decimal{
	padding-left	: .5em;
}
div#handwrite_timer_count{
	padding			: 0 .5em;
}
div#handwrite_timer_progress{
	background		: lightgray;
	position		: relative;
	margin			: 0 .5em;
}
div#handwrite_timer_progress > .progress_now{
	width			: 0;
	height			: 100%;
	background		: var(--title-font-color);
}
div#handwrite_timer_progress > .progress_master{
	position		: absolute;
	width			: 1px;
	height			: 100%;
	background		: #358;
	top				: 0;
}
div.over div#handwrite_timer_progress > .progress_now{
	background		: orange !important;
}
#canvas_tools{
	position		: absolute;
	z-index			: 10;
	right			: .75rem;
	top				: .75rem;
}
body.ui_type_yomutoku #canvas_tools{	/* 読むとくの場合のUI非表示*/
	display			: none !important;
}
.tool_icon_container{
	width			: 2.5rem;
	height			: 2.5rem;
	line-height		: 1em;
	background-color: #ececec;
	border-radius	: 100%;
	border			: .25em solid #acacac;
	padding			: .1rem;
	margin-bottom	: .5rem;
	cursor			: pointer;
	opacity			: .6;
}
.vertical_curriculum .tool_icon_container{
	margin-right	: .5rem;
}
.tool_icon_container.selected{
	border			: .25rem solid #f1904a;
	opacity			: 1;
}
.tool_icon{
	display			: inline-block;
	width			: 100%;
	height			: 100%;
	line-height		: 1em;
}
#canvas_tool_pencil > .tool_icon,
#yomutoku_tool_pencil > .tool_icon{
	background-image	: url(temp/icon_pencil.png);
	background-size		: cover;
}
#canvas_tool_eraser > .tool_icon,
#yomutoku_tool_eraser > .tool_icon{
	background-image	: url(temp/icon_eraser.png);
	background-size		: cover;
}
#canvas_tool_voice > span.oi,
#yomutoku_tool_voice > span.oi{
	margin				: .25rem;
	display				: block;
}
#handwrite_yomutoku_controller{
	margin-right	: .5em;
	display			: none;
}
body.ui_type_yomutoku #handwrite_yomutoku_controller{	/* 読むとくの場合のUI表示*/
	display			: block;
}
#handwrite_yomutoku_controller > .controller_button{
	margin-top		: .5em;
}
#handwrite_yomutoku_controller > .tool_button{
	margin-top		: .5em;
}

/* メモ欄 */
#memo_canvas_tools{
	position: absolute;
	left	: 0;
	top		: 0;
	z-index: 11;
	height	: 100%;
	transition : left .25s;
}
#memo_canvas_container{
	width		: 100%;
	height		: 100%;
	background	: rgba(255,255,237,0.55);
	border-right: 0.25em solid #d0dbcd;
}
#memo_canvas_button{
	position	: absolute;
	z-index		: 12;
	background	: rgba(255,255,237,0.55);
	right		: -2.75em;
	width		: 3em;
	height		: 6em;
	top			: calc(50% - 2.5em);
	border		: 0.25em solid #d0dbcd;
	border-left	: none;
	border-radius: 0 1em 1em 0;
	padding		: 1em 0.75em;
	cursor		: pointer;
	user-select	: none;
	font-size	: .8em;
}
#memo_canvas_container > canvas{
	position	: absolute;
	left		: 0;
	right		: 0;
	top			: 0;
	bottom		: 0;
}
#memo-area{
	z-index		: 15;
}
#memo-line-width-indicator{
	z-index		: 16;
}
#memo_erase_button{
	z-index		: 17;
	position	: absolute;
	right		: .25em;
	top			: 0;
	padding		: .5em;
	color		: lightgray;
	cursor		: pointer;
	text-shadow : 0 0 2px grey, 0 0 1px black;
}

#question_detail_container .answer_input_container{
	display				: none;
	
}
#question_detail_container.keyboard_mode .answer_units{
	cursor				: pointer;
}
#question_detail_container.keyboard_mode .answer_input_container{
	display				: block;
	width				: 100%;
}
#question_detail_container.keyboard_mode .answer_input_container input{
	width				: 100%;
	height				: 100%;
	background			: transparent;
	border				: none;
	text-align			: right;
	padding				: .5em;
	font-size			: 2em;
}
#question_detail_container.keyboard_mode .answer_input_container input:focus {
	border				: 2px solid #eff46a;
	outline				: orange;
}
/* 選択肢関連 */
#question_units_info .selection_container{
	width				: 100%;
	height				: 100%;
}
#question_units_info .selection_container .selection_row{
	padding				: .5em;
}
#question_units_info .selection_container .selection_box{
	width				: 80%;
}
#question_units_info .selection_container .selection_answer_option{
	border				: 2px solid;
	border-radius		: .25em;
	padding				: .5em 1em;
	margin-left			: 1em;
	margin-right			: 1em;
	text-align			: center;
	cursor				: pointer;
	background			: #f7ffea;
	white-space			: nowrap;
	position			: relative;
	border-color		: #ecfb81;
	color				: black;
}
#question_units_info .selection_container .selection_answer_option.selected{
	border-color		: #4ba67b;
	color				: #1d5a1f;
	background			: rgb(170,223,126);
	background			: linear-gradient(180deg, rgba(170,223,126,1) 0%, rgba(225,246,137,1) 100%);
}
#question_units_info .selection_container .selection_answer_option.unselected{
	border-color		: #faffd6;
	color				: gray;
}
#question_units_info .selection_container .selection_answer_option .select_number{
	left				: -.3em;
	top					: -.6em;
	position			: absolute;
    text-shadow			: .1em 0 0 #1d5a1f,0 .1em 0 #1d5a1f,-.1em 0 0 #1d5a1f,0 -.1em 0 #1d5a1f,
							.05em .05em 0 #1d5a1f,.05em -.05em 0 #1d5a1f,-.05em -.05em 0 #1d5a1f,-.05em .05em 0 #1d5a1f;
    color				: white;
    font-size			: 1.5em;
}
#handwrite_main.selection_mode #question_detail_container{
	z-index				: 10;
}
#question_detail_container.note_s #question_units_info .selection_container .selection_row{
	padding				: .25em;
}
#question_detail_container.note_s #question_units_info .selection_container .selection_answer_option{
	padding				: .25em 1em;
}

/* 自動送信関連 */
.auto_send_buttons_wrapper{
	padding		: 1em;
	display		: none;
}
#handwrite_horizontal_menu .auto_send_buttons_wrapper{
	font-size	: .85em;
}
#handwrite_horizontal_menu .auto_send_buttons_wrapper > div > span{
	color		: white;
}
.auto_send_buttons{
	font-size		: 1.5em;
	text-align		: center;
	color			: var(--ft-button-y);
	margin			: 0;
	border-radius	: .5em;
}
.auto_send_fast{
	border-radius	: .5em 0 0 .5em;
	background		: var(--bg-button-y);
}
.auto_send_slow{
	border-left		: 1px solid currentColor;
	border-right	: 1px solid currentColor;
	background		: var(--bg-button-y);
}
.auto_send_none{
	border-radius	: 0 .5em .5em 0;
	background		: var(--bg-button-y);
}
.auto_send_buttons > div{
	transition		: margin .1s ease-in-out,box-shadow .1s ease-in-out;
	margin-top		: 0em;
	border-bottom	: 0.2em solid currentColor;
	cursor			: pointer;
	padding			: .75em .1em;
	white-space		: nowrap;
	font-size		: .9em;
}
.auto_send_buttons > div.pushing{
	margin-top		: 0.2em;
	background		: var(--bg-button-g);
	border-bottom	: 0 solid currentColor;
}
.auto_send_buttons.disable > div{
	background		: whitesmoke;
    color			: darkgray;
    margin-top		: 0em;
    border-bottom	: 0.2em solid currentColor;
}

div.written_answers_wrapper{
	padding			: 0 1em 0 1em;
}
div.handwrite_answers_view{
	overflow		: auto;
	max-height		: 10em;
}
div.handwrite_answers_view > ul{
	font-size		: .8em;
}
div.handwrite_answers_view > ul > li.answer_view_header{
	padding			: 0;
}
div.handwrite_answers_view > ul > li.answer_view_single{
	padding			: 0;
	cursor			: pointer;
}
div.handwrite_answers_view > ul > li.answer_view_single.answered{
	background		: var(--bg-cream);
}
div.handwrite_answers_view > ul > li.answer_view_single.error{
	background		: var(--bg-button-p);
}
div.handwrite_answers_view > ul > li.answer_view_single.answering{
	background		: var(--bg-button-y);
}
div.handwrite_answers_view > ul > li.answer_view_header > div > div.number,
div.handwrite_answers_view > ul > li.answer_view_single > div > div.number{
	padding			: .5em;
	min-width		: 5em;
	text-align		: right;
	border-right	: 1px solid gray;
	vertical-align	: middle;
}
div.handwrite_answers_view > ul > li.answer_view_header > div > div.question_text,
div.handwrite_answers_view > ul > li.answer_view_single > div > div.question_text{
	padding			: .5em;
	vertical-align	: middle;
	width			: 60%;
	overflow		: hidden;
	text-overflow	: ellipsis;
	white-space		: nowrap;
	border-right	: 1px solid gray;
}
div.handwrite_answers_view > ul > li.answer_view_header > div > div.answer,
div.handwrite_answers_view > ul > li.answer_view_single > div > div.answer{
	padding			: .5em;
	vertical-align	: middle;
}
#handwrite_loading_modal{
	display			: none;
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
	position		: absolute;
	z-index			: 5;
	background		: rgba(127,127,127,0.1);
	color			: white;
}
#handwrite_loading_modal > div{
	height			: 100%;
}
#handwrite_loading_modal .spinner-border{
	width			: 8em;
	height			: 8em;
	font-size		: 2rem;
}
#handwrite_loading_modal.loading{
	display			: block !important;
}
#handwrite_answer_check_view{
	display			: none;
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
	position		: absolute;
	z-index			: 3;
	background		: rgba(128,128,128,.2);
	cursor			: pointer;
}
#handwrite_answer_check_view.show{
	display			: block;
}
#handwrite_answer_check_view > div{
	width			: 90%;
	height			: 90%;
	margin			: 1em auto;
	font-size		: 1.3em;
}
#handwrite_answer_check_view > div .handwrite_answers_view{
	width			: 100%;
}
.handwrite_answer_check_view_wrapper{
	background		: white;
	padding			: .5em;
	border-radius	: .5em;
	max-height		: 50%;
	overflow		: auto;
}
.handwrite_finish_button_wrapper{
	padding			: 1em 0;
	text-align		: center;
	display			: none;
}
@media screen and (min-width: 993px){
	div.handwrite_answers_view > ul > li.answer_view_header,
	div.handwrite_answers_view > ul > li.answer_view_single{
		font-size		: .8em;
	}
}
/*@media screen and (max-width: 767px){*/
	#question_units_info{
		right		: 0;
	}
	#handwrite_timer_count{
		display		: none;
	}
	#handwrite_answer_check_wrapper{
		display		: block;
	}
	#handwrite_vertical_menu{
		display		: none;
	}
	#handwrite_horizontal_menu{
		display		: block;
	}
	#question_detail_container{
		font-size	: 1.35rem;
	}
	.handwrite_large_big_giant_circle_button{
		bottom		: -11rem;
	}
	.handwrite_touch_button{
		bottom		: -8rem;
	}

/*}*/

/* 手書き エフェクト */
div.handwrite_text_effect{
	position		: absolute;
	left			: 0;
	top				: 0;
	z-index			: 999;
	width			: 100%;
	height			: 100%;
	pointer-events	: none;
	overflow		: hidden;
	user-select		: none;
}
div.handwrite_text_effect > div{
	position		: absolute;
	height			: initial;
	top				: initial;
	line-height		: 0;
	pointer-events	: none;
	width			: 100%;
	text-align		: center;
	font-size		: 5rem;
	user-select		: none;
}
div.handwrite_text_effect > div > div.message{
	color			: var(--bg-button-y);
	text-shadow		: -0.045em -0.045em red, 0.045em 0.045em red, 0.045em -0.045em red, -0.045em 0.045em red, -0.06em 0 red, 0 0.06em red, 0 -0.06em red, 0.06em 0 red;
	pointer-events	: none;
	z-index			: 1000;
	position		: absolute;
	width			: 100%;
	white-space		: nowrap;
}
div.handwrite_text_effect.uncorrect > div > div.message.blue{
	color			: var(--bg-button-y);
	text-shadow		: -0.045em -0.045em blue, 0.045em 0.045em blue, 0.045em -0.045em blue, -0.045em 0.045em blue, -0.06em 0 blue, 0 0.06em blue, 0 -0.06em blue, 0.06em 0 blue;
	background		: white;
	animation		: shake_shake .1s 6;
	line-height		: 1em;
}
@keyframes shake_shake {
	0% {transform: translate(0px, 0px) rotateZ(0deg)}
	25% {transform: translate(2px, 2px) rotateZ(1deg)}
	50% {transform: translate(0px, 2px) rotateZ(0deg)}
	75% {transform: translate(2px, 0px) rotateZ(-1deg)}
	100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
div.handwrite_text_effect.uncorrect{
	margin-top		: -5%;
	
}
div.handwrite_text_effect > div > label{
	position		: absolute;
	width			: 100%;
	height			: 100%;
	left			: 0;
	display			: block;
}
div.handwrite_text_effect svg{
	width			: 25%;
	left			: 37%;
}
div.handwrite_text_effect.uncorrect svg{
	width			: 25%;
	left			: 32%;
}
div.handwrite_text_effect.correct svg path{
	stroke-dashoffset	: 0;
}
div.handwrite_text_effect svg path{
	stroke-dasharray	: 300;
	stroke-dashoffset	: 301;
	transition: all 1050ms cubic-bezier(1,0,.37,.91);
	stroke-linecap		: round;
	stroke-linejoin		: round;
}
.question_score_info{
	opacity				: .7;
	font-size			: .75em;
}

/* readiness */
nav.readiness_nav{
	background	: white;
	border-bottom: 1px solid #67a246;
	padding		: 0;
}
nav.readiness_nav a{
	color		: #67a246;
}
nav.readiness_nav .navbar_reload_button{
	color		: #67a246 !important;
}
nav.readiness_nav .navbar-brand{
	padding			: 0 1em;
	margin			: 0;
	line-height		: 2;
    border-left		: 1px solid #67a246;
}
nav.readiness_nav #navigation_menu_movie{
	border-left	: 1px solid #67a246;
	border-right: 1px solid #67a246;
}
nav.readiness_nav li.mylist{
	border-right: 1px solid #67a246;
}
nav.readiness_nav #navigation_menu_movie span.mov{
	padding		: 0 0.2em;
	margin-left: 0.2em;
	border		: 1px solid #67a246;
	border-radius: 0.25em;
	display		: inline-block;
	line-height: 1em;
}
nav.readiness_nav .navbar_message_button{
	color		: #67a246 !important;
}
nav.readiness_nav .logout_button{
	background	: #67a246;
}
nav.readiness_nav ul.logout_button a{
	color		: white;
}
body[data-actionname="ready"] #main_content.readiness #challenge_title{
	display		: none;
}
#main_content.readiness .stars_wrapper > span.star{
	padding		: 0 .25em;
}
#main_content.readiness .stars_wrapper > span.bookmark{
	display		: inline;
	padding		: 0 .25em;
}
#challenge_result_display.selecting #challenge_result_star{
	animation		: understanding_blink 2s linear infinite;
}
#challenge_result_display.selecting #challenge_next_box,
#challenge_result_display.selecting #challenge_success_box,
#challenge_result_display.selecting #challenge_test_box{
	height		: 0;
	overflow	: hidden;
	padding		: 0;
}
div.modal_normal{
	position		: fixed;
	background		: rgba(248,248,248,0.9);
	z-index			: 1250;
	width			: calc(100% - 1em);
	height			: calc(100% - 4em);
	max-height		: calc(100% - 4em);
	overflow-y		: auto;
}
div.modal_normal > .modal_header,
div.modal_normal > .modal_nav,
div.modal_normal > .modal_body,
div.modal_normal > .modal_footer{
	padding				: .75em;
}
div.modal_normal > .modal_header{
	color				: white;
	background			: #d0c498;
}
div.modal_normal .movie_container{
	margin			: 0 auto;
}
#main_content[data-page="handwrite"] div.modal_normal{
	margin				: 0;
	width				: 100%;
}
#main_content.readiness #limittext_A_display,
#main_content.readiness #limittext_S_display{
	display			: none !important;
}
@keyframes understanding_blink{
  0%{
    background		: #ffffff;
  }

  50%{
  	background		: var(--bg-cream);
  }
  
  100%{
    background		: #ffffff;
  }
}

/* 宿題関連 */
.homework_list .homework_detail > span{
	display		: inline-block;
	border-radius	: .8em;
	color		: white;
	line-height: 1.5em;
	text-align: center;
	padding-left	: .5em;
	padding-right	: .5em;
	margin-right	: .5em;
}
.homework_list .homework_detail.type_progress > span{
	background : #0906ad;
}
.homework_list .homework_detail.type_homework > span{
	background : #86630a;
}
.homework_list .homework_detail{
	font-weight :bold;
	display		: inline-flex;
	align-items : center;
	margin-right	: .5em;
	margin-bottom	: .5em;
	padding			: .3em;
	border-radius	: .5em;
}
.homework_list .homework_detail.type_homework{
	background	: #ffe2c8 !important;
	border		: 2px solid #dbbc91;
	color		: #86630a;
}
.homework_list .homework_detail.type_progress{
	background	: #c8e4ff !important;
	border		: 2px solid #a7b4e2;
	color		: #0906ad;
}

/* readiness関連 */

body.readiness{
	padding-top	: 2.7rem;
}
body.readiness,
body.readiness div#main_content{
	background	: white;
}
body.readiness div#right_column{
	border-left: 1px solid #67a246;
	background	: white;
}
body.readiness div.sidemenu_table > div.menu_head{
	color		: #666;
}
body.readiness div.sidemenu_search_form input{
	border			: 1px solid #67a246;
}
div.sidemenu_search_form .btn{
	border			: 1px solid #67a246;
}
div.readiness_top_curriculum_label > .text_name,
div.readiness_top_curriculum_label > .page,
div.readiness_top_curriculum_label > .unit_name,
div.readiness_top_curriculum_label > .number{
	background		: #67a246;
	color			: white;
	border-right	: 1px solid white;
	padding			: 1em .35em;
	font-size		: .85em;
	text-align		: center;
}
div.readiness_top_curriculum_label > .start{
	background		: #67a246;
	color			: white;
	border-radius	: .5em;
	font-weight		: bold;
	margin-left		: .5em;
	white-space		: nowrap;
}
body.readiness #handwrite_horizontal_menu{
	height			: 7rem;
}

/* コマンド選択UI用 */
div.modal_command_overlay{
	background		: rgba(0,0,0,0.25);
	width			: 100%;
	height			: 110%;
	position		: fixed;
	z-index			: 10000;
	margin-top		: -4rem;
	cursor			: pointer;
	top				: 0;
	left			: 0;
}
div.modal_command_box{
	position		: fixed;
	background		: rgba(248,248,248,0.9);
	z-index			: 10001;
	overflow-y		: auto;
	width			: 80%;
	top				: 4em;
	left			: 10%;
}
div.modal_command_box > .content{
	width			: 100%;
	height			: 100%;
}
div.modal_command_box .modal_header{
	color				: white;
	background			: #d0c498;
	padding				: .75em;
}
div.modal_command_box .modal_body,
div.modal_command_box .modal_buttons{
	padding				: .75em;
}
div.modal_command_box .modal_buttons .selection_interface_button{
	padding				: .75em 1.5em;
	border				: 1px solid gray;
	border-radius		: .5em;
	cursor				: pointer;
}