/* 変数定義 */
: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 */
}


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;
}
.katex span.mop.op-limits{
	font-size		: .9em;
}
.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;
}
@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; }

/* 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;
}
.localize_hidden{
	display		: none;
}

/*カレンダーコンテンツ*/
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-smartstudy{
	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-smartstudy.hide{
	-webkit-transform: translateY(-150%);
	transform: translateY(-150%);
}
nav.navbar-smartstudy a{
	color			: white;
}
nav.navbar-smartstudy a.active-link:hover{
	background		: var(--bg-nav-hover);
}
nav.navbar-smartstudy a.disable_link{
	opacity			: 0.5;
}
nav.navbar-smartstudy 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;
}
#smartstudy_navbar .location_infomation{	
    font-size		: 0.9rem;
    padding			: 0.25em 0.5em;
}
#smartstudy_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;
}
#nav_to_kanri{
	font-size		: .75em;
	background		: #547d91;
	border-radius	: .75em;
	color			: white;
	display			: block;
	padding			: .25em;
	margin-left		: .5em;
}
#nav_to_manabi{
	font-size		: .75em;
	background		: #78c53c;
	border-radius	: .75em;
	color			: white;
	margin			: .5em;
	display			: block;
	padding			: .25em;
}
#nav_to_basic{
	font-size		: .75em;
	background		: #59ca00;
	border-radius	: .75em;
	color			: white;
	display			: block;
	padding			: .25em .5em;
}
#nav_to_readiness{
	font-size		: .75em;
	background		: white;
	border-radius	: .75em;
	color			: #67a246;
	display			: block;
	padding			: .25em;
}
#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			: 8px 8px;
}
div.content_table{
	background		: var(--bg-table);
	margin			: 8px 4px 16px 4px;
	padding			: 4px 8px;
	border-radius	: 8px;
}
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;
}

ul#next_curriculum_list:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: '次の学習はありません。';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#recently_curriculum_list:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: '最近の学習はありません。';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#waiting_curriculum_list:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: 'おわってないテストはありません。';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#next_action_list:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: '今日の予定はありません。';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
/* yomutoku latest */
ul#next_curriculum_list .yomutoku_latest_bar{
	border			: none;
}
ul.top_curriculum_list > .yomutoku_latest_bar.list-group-item > div:first-child{
	background		: transparent;
}
ul.top_curriculum_list > .yomutoku_latest_bar .curriculum_unit{
	text-align		: center;
	border			: 1px solid lightgray;
	border-right	: none;
	border-left		: none;
}
ul.top_curriculum_list > .yomutoku_latest_bar .grade_class{
	border			: 1px solid lightgray;
	width			: 4em;
	text-align		: center;
}
ul.top_curriculum_list > .yomutoku_latest_bar .icon{
	border			: 1px solid lightgray;
	width			: 7em;
	text-align		: center;
}
ul.top_curriculum_list > .yomutoku_latest_bar .icon span.oi{
	border: 1px solid black;
    padding: 0.25em 0.5em;
    border-radius: 0.25em;
}
ul.top_curriculum_list > .yomutoku_latest_bar .count_border{
	border-radius	: .25em;
	border			: 1px solid black;
	background		: var(--bg-button-y);
	padding			: .25em .5em;
}
ul.top_curriculum_list > .yomutoku_latest_bar.list-group-item > div:last-child{
	padding			: 1em;
}



/* ムービー 一覧 */
div.movie > div.movie_inner{
	max-width		: 240px;
	margin			: 8px 0;
	overflow		: hidden;
}
div.movie .thumbnail{
	padding-top		: calc(100% * 9 / 16);	/* 要素のアスペクト比固定 16:9 */
	position		: relative;
}
div.movie .thumbnail > .thumbnail_image{
	background		: lightgray;
	position		: absolute;
	overflow		: hidden;
	top				: 0;
	left			: 0;
	width			: 100%;
	height			: 100%;
}
div.movie .detail > span{
	display			: inline-block;
	color			: var(--title-font-color);
	vertical-align	: super;
	min-width		: 50%;
	text-overflow	: ellipsis;
	white-space		: nowrap;
}
div.movie .detail > span:first-child{
	width			: 100%;
	margin			: 4px 0;
}
div.movie .detail > span > span.oi{
	margin-right	: 2px;
}

/* 右サイドメニュー */
div#right_column{
	padding			: 8px 8px;
	background		: var(--bg-sidebar);
	
}
div.sidemenu_table{
    margin			: 8px 4px 16px 4px;
    padding			: 8px 4px;
    /*デフォで非表示/スクリプトで表示*/
    display			: none;
}
div.sidemenu_table .container-fluid{
	padding-left	: 0;
	padding-right	: 0;
}
div.sidemenu_table > div.menu_head{
	color			: white;
}
div.sidemenu_table > div.menu_head h3,
div.sidemenu_table > div.menu_head span.oi{
    padding			: 12px 0 6px 0;
    font-size		: 1.5em;
}
div.sidemenu_table .compact_list{
	height			: 200px;
    overflow-y		: auto;
}
div.sidemenu_content{
	background		: white;
	padding			: 4px;
	border-radius	: 8px;
}
div.sidemenu_inner{
	background		: var(--bg-table);
	color			: var(--title-font-color);
	padding			: 16px;
	border-radius	: 8px;
}
div.sidemenu_inner span.badge{
	line-height		: initial;
}
div.sidemenu_status .row{
	margin			: 8px 4px;
}
div.sidemenu_status .row > div:first-child{
	font-weight		: bold;
}
div.sidemenu_search_form input{
	width			: 100%;
	padding			: 6px;
    border-radius	: 8px;
    border			: 1px solid white;
}
div.sidemenu_search_form .btn{
	white-space		: nowrap;
	background		: white;
	color			: var(--title-font-color);
	width			: 100%;
    padding			: 7px;
    line-height		: 1.2em;
    border-radius	: 8px;
}

div.sidemenu_comment_form textarea{
	width			: 100%;
    min-height		: 100px;
}

div.sidemenu_comments .comment_text{
	font-size		: 1.0em;
}
div.sidemenu_comments .comment_detail{
	font-size		: 0.7em;
}
div.sidemenu_ranking .list-group-item{
	padding			: 0;
	width			: 111%;
    transform		: scale(0.9,1);
    transform-origin: left top;
}
div.sidemenu_ranking .ranking_number,
div.sidemenu_ranking .ranking_score,
div.sidemenu_ranking .ranking_time,
div.sidemenu_ranking .ranking_name,
div.sidemenu_ranking .ranking_image,
div.sidemenu_ranking .ranking_date,
div.sidemenu_ranking .ranking_row{
	padding			: .5rem .25rem;
	text-align		: center;
}
div.sidemenu_ranking .ranking_image{
	transform		: scale(1.11,1);
	padding			: .5rem;
}
div.sidemenu_ranking .ranking_rank{
	padding			: .5rem .25rem;
	font-size		: 0.8em;
	min-width		: 2.5em;
}
div.sidemenu_ranking .ranking_rank.even{ color	: green; }
div.sidemenu_ranking .ranking_rank.up{ color	: red; }
div.sidemenu_ranking .ranking_rank.red{ color	: blue; }

div.sidemenu_ranking .ranking_number{
	min-width		: 2em;
	background		: var(--bg-cream);
}
div.sidemenu_ranking .ranking_score{
	min-width		: 4em;
	background		: var(--bg-table);
	border-right	: 1px solid rgba(0,0,0,.125);
}
div.sidemenu_ranking .ranking_date{
	min-width		: 4em;
	background		: var(--bg-cream);
	border-right	: 1px solid rgba(0,0,0,.125);
}
div.sidemenu_ranking .ranking_time{
	background		: var(--bg-table);
}

div.sidemenu_inner .btn{
	background		: var(--bg-button-y);
	color			: var(--ft-button-y);
	padding			: 8px 24px;
	min-width		: 20%;
	border-radius	: 8px;
	cursor			: pointer;
}
ul#sidemenu_searched_list > li.selected{
	color			: green;
}
ul#sidemenu_select_list > li.selected{
	color			: green;
}
ul#ranking_score_data,
ul#ranking_early_data{
	counter-reset	: ranking_number;
}
ul#ranking_score_data > li,
ul#ranking_early_data > li{
	counter-increment: ranking_number;
}
div.ranking_number:before{
	content			: counter(ranking_number);
}
#ranking_score_data > li.new_record,
#ranking_early_data > li.new_record,
#ranking_self_data > li.new_record{
	color			: coral;
	animation		: ranking_new_record 2s linear infinite;
}
#ranking_score_data > li.new_record > div,
#ranking_early_data > li.new_record > div,
#ranking_self_data > li.new_record{
	animation		: ranking_new_record 2s linear infinite;
}

@keyframes ranking_new_record {
  0%{
    background		: #ffffff;
  }

  50%{
  	background		: #f8fad4;
  }
  
  100%{
    background		: #ffffff;
  }
}
.ranking_empty{
	text-align		: center;
	padding			: .5rem .25rem;
	color			: darkgray;
}
ul#ranking_early_data:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: '早起きした人がいません！(3日以内)';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#ranking_score_data:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: 'まだ挑戦者がいません！';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#ranking_self_data:empty:before{
	display			: block;
	color			: var(--text-gray);
	content			: ' - ';
	text-align		: center;
    padding			: 15px !important;
    font-size		: 0.8em;
    background		: white;
    border			: 1px solid rgba(0,0,0,.125);
	border-radius	: .25rem;
}
ul#ranking_self_data{
	overflow-y		: auto;
	max-height		: 30em;
}
#main_content[data-subject="algo"] ul#ranking_score_data:empty:before{
	content			: 'まだちょうせんしゃがいません！';
}
#ranking_score.sidemenu_ranking.hidden_ranking{
	display			: none !important;
}

/* 塾or学習塾の表示 */
ul#location_status_items > li{
	padding			: 0;
}
ul#location_status_items > li.selected{
	background		: var(--bg-cream);
}
ul#location_status_items > li > label{
	display			: block;
    width			: 100%;
    margin			: 0;
    padding			: .75rem 1.25rem;
    cursor			: pointer;
}
ul#location_status_items > li > label > input[type='radio']{
	display			: none;
}
ul#location_status_items > li > label > input[type='radio'] + .radio_replace{
	position		: relative;
    vertical-align	: middle;
    border			: 2px solid lightgray;
    width			: 20px;
    height			: 20px;
    display			: inline-block;
    line-height		: 1;
    text-align		: center;
    margin			: 0 10px 0 0;
    border-radius	: 100%;
}
ul#location_status_items > li > label > input[type='radio']:checked + .radio_replace{
	background		: green;
}

@media screen and (max-width: 992px){
	ul#location_status_items > li > label > input[type='radio'] + .radio_replace{
		width			: 18px;
    	height			: 18px;
	}
}
@media screen and (max-width: 768px){
	ul#location_status_items > li > label > input[type='radio'] + .radio_replace{
		width			: 16px;
    	height			: 16px;
	}
}
@media screen and (max-width: 576px){
	ul#location_status_items > li > label > input[type='radio'] + .radio_replace{
		width			: 15px;
    	height			: 15px;
	}
}
/* メニュー右上のつまんで移動できそうなアレ */
div.sidemenu_table .menu_head .menu.col-2{
	color				: transparent;
}
/* メッセージ*/
#message_notification_count{
	background			: var(--bg-button-g);
}
div#open_message_list.unread{
	background			: var(--bg-cream);
	color				: orangered;
}
table.modal_message_table tr.unread > td{
	background			: var(--bg-cream);
    color				: orangered;
    cursor				: pointer;
}
table.modal_message_table tr.unread > td > div.message_body{
	display				: none;
}

div.message_title div.photo{
	width				: 3em;
	height				: 3em;
    overflow			: hidden;
    border-radius		: 100%;
    background			: var(--bg-color);
    margin-right		: 0.5em;
}
div.message_body{
	margin				: 0.5em 0.5em 0 3.5em;
}
div.message_title div.name,
table.modal_message_table div.date{
	line-height			: 3;
}
table.modal_message_table div.date{
	color				: gray;
	margin-right		: 0.5em;
}

/* テキスト進捗率 */
ul#text_progress_list img{
	max-height			: 3em;
}
ul#text_progress_list div.program_info{
	padding				: .2em 0 .5em 0;
}
ul#text_progress_list div.program_info > .textname{
	vertical-align		: middle;
	padding				: 0 .5em;
}
ul#text_progress_list div.progress_parent{
	height				: 0.5em;
    border				: 1px solid lightgray;
    position			: relative;
    font-size			: 0.8em;
    margin				: 1.2em 0 1em;
    text-shadow			: 0 0 2px white;
}
ul#text_progress_list div.progress_bar{
	background			: var(--title-font-color);
    height				: 100%;
    position			: relative;
}
ul#text_progress_list div.progress_num_now{
	position			: absolute;
    top					: -1.4em;
    right				: -0.5em;
}
ul#text_progress_list div.progress_num_max{
	position			: absolute;
    right				: -1em;
    top					: .4em;
}
ul#text_progress_list:empty::before{
	display				: block;
    color				: var(--text-gray);
    content				: "...";
    text-align			: center;
    font-size			: 0.8em;
    background			: white;
    border-width		: 1px;
    border-style		: solid;
    border-color		: rgba(0, 0, 0, 0.125);
    border-image		: initial;
    border-radius		: 0.25rem;
    padding				: 15px !important;
}
    
/* カリキュラム評価率 */
div#curriculum_result_progress{
	height				: 0.5em;
    margin				: 0 0 0.5em;
    line-height			: 0;
}
div#curriculum_result_progress > div{
	height				: 100%;
	display				: inline-block;
}
div#curriculum_result_progress > div.rankS{	background	: rgba(var(--grade-s),1);	}
div#curriculum_result_progress > div.rankA{	background	: rgba(var(--grade-a),1);	}
div#curriculum_result_progress > div.rankB{	background	: rgba(var(--grade-b),1);	}
div#curriculum_result_progress > div.rankC{	background	: rgba(var(--grade-c),1);	}
div#curriculum_result_progress > div.rankD{	background	: rgba(var(--grade-d),1);	}

ul#curriculum_result_list li{
	white-space			: nowrap;
	padding				: .3em .3em;
}
ul#curriculum_result_list span.num{
	vertical-align		: middle;
    padding				: 0 .1em;
}


/* チャレンジポイント */
div.top_challangepoint_view{
	text-align		: center;
	color			: var(--title-font-color);
	position		: relative;
	min-height		: 250px;
	text-shadow		: 2px 2px 3px white,-2px 2px 3px white,2px -2px 3px white,-2px -2px 3px white;
}
div.top_challangepoint_view > div.title{
	position		: absolute;
    left			: 0;
    width			: 100%;
    top				: 0;
    z-index			: 10;
}
div.top_challangepoint_view > div.challange_point{
	position		: absolute;
    left			: 0;
    width			: 100%;
    top				: 90px;
    font-size		: 300%;
    z-index			: 10;
    
}
div#liquid_view{
	position		: absolute;
    left			: 0;
    top				: 0;
    width			: 100%;
    height			: 100%;
    z-index			: 1;
}
div#liquid_view g.body{
	stroke			: lightslategrey;
}

/* フッター */
footer#main_footer{
	color			: white;
	font-weight		: bold;
	background		: var(--bg-color);
	
	padding			: 10px 0;
	text-align		: center;
}

.clearfix:after{
	content			: '';
	display			: block;
	clear			: both;
}

/*=========================
	動画ページ
=========================*/
ul.movie_list{
	margin			: 6px 0;
}	
ul.movie_list > li.curriculum{
	background		: var(--bg-button-y);
}
ul.movie_list > li > div{
	padding			: 4px;
}
ul.movie_list > li.curriculum > div:first-child:before{
	color			: #fffbd5;
	padding-right	: 8px;
}
div.video_player_empty{
	padding-top		: 56.25%;
}
ul.structure_tree ul,
ul.structure_tree li{
	padding			: 0;
}
ul.structure_tree span.d-flex{
	display			: block;
	padding			: .75rem 1rem;
}
ul.structure_tree .btn-accordion > span,
ul.structure_tree .text_in_group > span{
	background		: var(--bg-button-y);
}
ul.structure_tree .btn-accordion .btn-accordion > span,
ul.structure_tree .text_in_group .text_in_group > span{
	background		: #F0F0FF;
}
ul.structure_tree ul span.d-flex{
	padding-left	: 2rem;
}
ul.structure_tree ul ul span.d-flex{
	padding-left	: 3rem;
}
ul.structure_tree ul ul ul span.d-flex{
	padding-left	: 4rem;
}

ul.structure_tree ul li{
	border-radius	: 0;
	border-left		: none;
	border-right	: none;
}
/* 課題アイコン */
div.content_icon{
	padding-left	: 12px;
	white-space		: nowrap;
	line-height		: 1;
}
div.content_icon > span{
	display			: inline-block;
	background		: white;
	margin			: 0;
	width			: 50px;
/*    height			: 100%;*/
    font-size		: 1.35em;
    text-align		: center;
    vertical-align	: bottom;
    color			: #EEE;
    border-radius	: 8px;
    padding			: 6px;
    border			: 3px solid transparent;
    -webkit-transition	: all 0.2s ease;
    -moz-transition		: all 0.2s ease;
    -o-transition		: all 0.2s ease;
    transition			: all 0.2s ease;
}
div.content_icon > span.enable{
	color			: gray;
	border			: 3px solid gray;
}
div.content_icon > span.disable{
	color			: lightgray;
	border			: 3px solid lightgray;
}
div.content_icon > span.enable:hover{
	background		: #ffe6c9;
}
div.content_icon > span.enable.learning{
	color			: orange;
	border-color	: orange;
}
div.content_icon > span.enable.complete,
li.curriculum_item[data-flowtype="検定"].date_over_after div.content_icon span.display_question{
	color			: green;
	border-color	: green;
	text-shadow		: 0 0 1.5px green;
    box-shadow		: 0 0 1.5px green inset, 0 0 1.5px green;
}
div.content_icon span > .start_text,
div.content_icon span > .result_text,
div.content_icon span > .complete_text{
	position	: absolute;
	font-size	: .6em;
	bottom		: -.7em;
	left		: -1em;
	right		: -1em;
	background	: transparent;
	z-index		: 1;
	color		: white;
	text-align	: center;
	text-shadow	: 0.1em 0.1em gray, -0.1em -0.1em gray, -0.1em 0.1em gray, 0.1em -0.1em gray, 0.1em 0 gray, -0.1em 0 gray, 0 -0.1em gray, 0 0.1em gray;
}
div.content_icon span:not(.complete) > .result_text,
div.content_icon span > .complete_text{
	display		: none;
}
div.content_icon span.learning > .start_text,
div.content_icon span.learning > .result_text{
	text-shadow	: 0.1em 0.1em orange, -0.1em -0.1em orange, -0.1em 0.1em orange, 0.1em -0.1em orange, 0.1em 0 orange, -0.1em 0 orange, 0 -0.1em orange, 0 0.1em orange;
}
div.content_icon span.complete > .start_text,
div.content_icon span.complete > .result_text{
	text-shadow	: 0.1em 0.1em green, -0.1em -0.1em green, -0.1em 0.1em green, 0.1em -0.1em green, 0.1em 0 green, -0.1em 0 green, 0 -0.1em green, 0 0.1em green;
}
div.content_icon span.disable > .result_text{
	text-shadow	: 0.1em 0.1em lightgray, -0.1em -0.1em lightgray, -0.1em 0.1em lightgray, 0.1em -0.1em lightgray, 0.1em 0 lightgray, -0.1em 0 lightgray, 0 -0.1em lightgray, 0 0.1em lightgray;
	display				: none;
}
li.curriculum_item[data-flowtype="検定"] div.content_icon span.start_button.complete > .complete_text{
	display		: block;
	text-shadow	: 0.1em 0.1em lightgray, -0.1em -0.1em lightgray, -0.1em 0.1em lightgray, 0.1em -0.1em lightgray, 0.1em 0 lightgray, -0.1em 0 lightgray, 0 -0.1em lightgray, 0 0.1em lightgray;
}
li.curriculum_item[data-flowtype="検定"] div.content_icon span.start_button.complete > .start_text,
li.curriculum_item[data-flowtype="検定"] div.content_icon span.start_button.complete > .result_text{
	display		: none;
}
li.curriculum_item[data-flowtype="検定"] div.content_icon span.start_button.complete{
	color			: lightgray;
	border			: 3px solid lightgray;
}
/*li.curriculum_item[data-flowtype="検定"].date_over div.content_icon > span.display_question{
	color			: lightgray;
	border-color	: lightgray;
	text-shadow		: 0 0 1.5px lightgray;
    box-shadow		: 0 0 1.5px lightgray inset, 0 0 1.5px lightgray;
}
li.curriculum_item[data-flowtype="検定"].date_over div.content_icon > span.display_question > .result_text{
	text-shadow	: 0.1em 0.1em lightgray, -0.1em -0.1em lightgray, -0.1em 0.1em lightgray, 0.1em -0.1em lightgray, 0.1em 0 lightgray, -0.1em 0 lightgray, 0 -0.1em lightgray, 0 0.1em lightgray;
}*/
li.curriculum_item[data-flowtype="検定"].date_over_after div.content_icon span.display_question > .result_text{
	text-shadow	: 0.1em 0.1em green, -0.1em -0.1em green, -0.1em 0.1em green, 0.1em -0.1em green, 0.1em 0 green, -0.1em 0 green, 0 -0.1em green, 0 0.1em green;
	display		: block;
}
div.content_icon .enable:not(.complete){
	animation		: icon_blink 2s linear infinite;
}
div.content_icon .enable.complete.display_result{
	animation		: icon_blink 2s linear infinite;
}
div.content_icon .enable.complete .start_text{
	display			: none;
}
div.content_icon span.display_result{
	margin-left		: 0.35em;
}
div.content_icon span.display_question{
	margin-left		: 0.35em;
}
div.content_icon span.complete.display_result,
div.content_icon span.complete.display_question,
li.curriculum_item[data-flowtype="検定"].date_over_after div.content_icon span.display_question{
	z-index			: 10;
}
div.content_icon span.display_result .result_text,
div.content_icon span.display_question .result_text{
	transform		:scaleX(.75);
}
ul.top_curriculum_list div.content_icon span.display_result,
ul.top_curriculum_list div.content_icon span.display_question{
	display			: none;
}
ul.top_curriculum_list div.content_icon span.display_question.public_pdf{
	display			: inline-block;
}
@keyframes icon_blink {
  0%{
    box-shadow		: 0 0 .25em;
  }

  50%{
  	box-shadow		: 0 0 0;
  }
  
  100%{
    box-shadow		: 0 0 .25em;
  }
}
@media screen and (max-width: 992px){
	div.content_icon > span{
		width			: 38px;
    	padding			: 4px;
	}
}
@media screen and (max-width: 768px){
	div.content_icon > span{
		width			: 32px;
		border-radius	: 6px;
    	padding			: 2px;
	}
}
@media screen and (max-width: 576px){
	div.content_icon > span{
		width			: 24px;
		border-radius	: 6px;
    	padding			: 4px;
    	border-width	: 2px !important;
	}
}

/* 動画コメント */
#content_movie_comment ul.content_inner > li{
	border			: none;
}
#content_movie_comment > div.content_footer{
	padding			: 12px 0;
}
#content_movie_comment > div.content_footer input{
	width			: 100%;
	padding			: .5rem 1.25rem
}
#content_movie_comment > div.content_footer .btn{
	width			: 100%;
	height			: 100%;
	background		: var(--bg-button-g);
	color			: var(--ft-button-g);
}
#side_comment_list:empty:before{
	content			: 'loading...';
    padding			: 16px;
    color			: darkgray;
    text-align		: center;
}
#side_comment_list > li{
	position		: relative;
	transition-duration	:1s;
	overflow		: hidden;
	padding-bottom	: 40px;
}
#side_comment_list > li.mycomment{
	background		: var(--bg-cream);
}
#side_comment_list > li > div.comment_detail{
	position		: absolute;
    bottom			: 0;
    left			: 0;
    z-index			: 1;
    background		: white;
    background		: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 80%,transparent 100%);
    width			: 100%;
    padding			: .75rem 1.25rem;
    
}
#side_comment_list > li.mycomment > div.comment_detail{
	background		: linear-gradient(to top, var(--bg-cream) 0%,var(--bg-cream) 80%,transparent 100%);
}
#side_comment_submit > div:first-child{
	background		: var(--bg-button-y);
}
#side_comment_submit > div:last-child{
	background		: var(--bg-button-g);
}
.side_comment_input_wrap.loading > textarea{
	display			: none;
}
.side_comment_input_wrap.loading:before{
	content			: '送信中...';
	color			: darkgray;
	text-align		: center;
    width			: 100%;
    display			: block;
    padding			: 40px;
}

.comment_vertical_limit{
	max-height				: 200px;
	transition-duration		:1s;
}


/*=========================
	チャレンジページ
=========================*/
#challenge_loading{
	text-align		: center;
	height			: 100%;
}
#video_player > div.loading_wrap{
	padding			: 80px;
}
div.content_challenge_item{
	color			: var(--title-font-color);
	overscroll-behavior-x	: none !important;	/*横スクロールによるブラウザバック無効*/
}
ul#challenge_list > li.curriculum{
	background		: var(--bg-button-y);
}
ul#challenge_list > li > div{
}
ul#challenge_list > li.text_header_label{
	width			: 100%;
	background		: var(--bg-table);
}
ul#challenge_list > li.curriculum > div:first-child:before,
.accordion_header:before{
	content			: '▼';
	color			: #fffbd5;
	padding-right	: 8px;
}
.accordion_close:before{
	content			: '▶'!important;
}
.accordion_header{
	background		: #fff0c8;
}
.accordion_header:before{
	padding-left	: 1em;
}
.text_header_label .subject:before{
	color			: black !important;
	content			: '▼';
}
.text_header_label .subject.accordion_close:before{
	content			: '▶' !important;
}
body.ui_type_yomutoku .accordion_header,
body.ui_type_yomutoku .accordion_header:before,
body.ui_type_yomutoku ul#challenge_list > li.curriculum > div:first-child:before{
	color			: black;
}
ul#challenge_list > li > div.button_start{
	background		: #f4d2de;
	color			: #9b5b63;
	border-radius	: 8px;
	padding			: 4px 16px;
	font-weight		: bold;
	cursor			: pointer;
}
ul#challenge_list > li.disabled{
	color			: lightgray;
}
div.content_icon > .ss_item{
	height			: inherit !important;
	position		: relative;
}
li.curriculum_item > div.task{
	width			: 100%;
	padding			: 0.75rem 1.25rem;
}
li.curriculum_item{
	position	: relative;
	padding		: 0;
}
li.curriculum_item.load_link{
	background: rgb(255,255,186);
	background: linear-gradient(90deg, rgba(255,255,186,1) 0%, rgba(122,255,184,1) 50%, rgba(255,255,186,1) 100%);
	background-size: 400% 100%;
	animation: gradient_load_link 3s ease infinite;
}
@keyframes gradient_load_link {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
li.curriculum_item .load_over{
	z-index	: 6;
	position: absolute;
	left	: 0;
	top		: 0;
	right: 0;
	background: rgba(255,255,255,0.5) !important;
	bottom: 0;
}
li.curriculum_item .load_over > .loading_wrap{
	color		: gray;
    margin-top	: 1.25em;
}
li.curriculum_item .limited_over{
	z-index	: 5;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	background: rgba(0,0,0,0.5) !important;
	bottom: 0;
	color	: white;
}
li.curriculum_item .limited_over > div{
	text-align		: center;
}
li.yomutoku_accordion_header{
	position		: relative;
	width			: 100%;
}

#challenge_text_image > img{
	max-height		: 100%;
}
ul#challenge_list > li.hidden_accordion > div:first-child:before{
	content			: '▲';
}
ul#challenge_list > li.hidden_item{
    height			: 1px;
    padding			: 0;
    border			: none;
    overflow		: hidden;
}
div#challenge_skip_button{
	margin-bottom	: 1em;
    font-size		: 0.7em;
    background		: var(--bg-button-p);
    color			: var(--ft-button-p);
    min-width		: 20%;
    padding			: .5em .3em;
    display			: inline-block;
    text-align		: center;
    border-radius	: 8px;
}
div#challenge_back_button{
	margin-bottom	: 1em;
    font-size		: 0.7em;
    background		: var(--bg-button-g);
    color			: var(--ft-button-g);
    min-width		: 20%;
    padding			: .5em .3em;
    display			: inline-block;
    text-align		: center;
    border-radius	: 8px;
}
li.curriculum_subject_label div.subject{
	white-space		: nowrap;
	margin-right	: 1em;
}
li.curriculum_subject_label div.class_list_fixed{
	position		: relative;
    top				: 0;
    right			: 0;
    bottom			: 0;
    border-left		: 1px solid rgba(0,0,0,0.125);
}
li.curriculum_subject_label.hidden_accordion div.class_list_fixed{
	display			: none;
}
li.curriculum_subject_label ul.class_list{
	height			: 100%;
    margin			: 0;
    padding			: 0;
}
li.curriculum_subject_label ul.class_list > li.curriculum_jump{
	display			: inline-block;
    float			: left;
    padding			: .2rem .25rem;
    border			: 1px solid rgba(0,0,0,.125);
    background		: rgba(255,255,255,0.75);
    border-radius	: 0.5em;
    margin			: .2em .2em;
    font-size		: 0.8em;
}
div#main_content[data-subject="algo"][data-type="タイムアタック"] #challenge_ready_title{
	display			: none;
}

/* 特別UIのアコーディオン */
.next_curriculum_accordion_bar{
	background		: var(--bg-button-y);
	margin-top		: .5em;
	padding			: 0.75rem 1.25rem;
	border			: 1px solid rgba(0,0,0,.125);
	border-radius	: 0.25rem;
}
.next_action_accordion_bar{
	background		: var(--bg-button-g);
	margin-top		: .5em;
	padding			: 0.75rem 1.25rem;
	border			: 1px solid rgba(0,0,0,.125);
	border-radius	: 0.25rem;
}
.next_curriculum_accordion_bar.open,
.next_action_accordion_bar.open{
	border-radius	: 0.25rem 0.25rem 0 0;
}
.next_curriculum_accordion,
.next_action_accordion{
	padding			: 4px;
	cursor			: pointer;
}
.next_curriculum_accordion:before,
.next_action_accordion:before{
	content			: '▼';
	color			: #fffbd5;
	padding-right	: 8px;
	
}
.tokyo_drill_accordion.open:before{
	content			: '▼';
}
.accordion_close:before{
	content			: '▶'!important;
}

/* 特別テキストリスト */
#tokyo_text_navigation{
	margin			: 8px 0 0 0;
	background		: var(--bg-button-y);
	border			: 1px solid rgba(0,0,0,.125);
	border-radius	: 0.25rem;
}
.tokyo_drill_accordion_bar{
	padding			: .5em;
}
.tokyo_drill_items > li.list-group-item{
	padding			: 0;
	border			: none;
}
.tokyo_drill_items .curriculum_item,
.tokyo_drill_accordion{
	cursor			: pointer;
}
li.list-group-item.tokyo_drill_item_grade_container{
	padding			: 0;
}
.tokyo_drill_items > li.list-group-item.tokyo_drill_item_text_name{
	padding			: .5em;
	border			: 1px solid rgba(0,0,0,.125);
	border-radius	: 0;
	background		: var(--bg-button-y);
}
.tokyo_drill_accordion.text_label:before{
	padding-left	: 24px;
}
.tokyo_drill_curriculums{
	padding			: 0;
}


/* チュートリアル */
div.challenge_tutorial_info > div{
	text-align		: center;
}
div.challenge_tutorial_info .btn{
	background		: var(--bg-button-y);
	color			: var(--ft-button-y);
	padding			: 1em 1em;
    font-size		: 1.25em;
	min-width		: 20%;
	border-radius	: 8px;
	cursor			: pointer;
}
div.challenge_tutorial_info.col-6 .btn{
	padding			: 1em;
}
.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;
}

.btn-gray{
	background		: #c4c4c4 !important;
	color			: #333 !important;
}
.col-6 > .btn{
	min-width		: 50%;
}
#main_content[data-subject="algo"] .btn-y{
	color			: #5d592c !important;
	background		: #ffe62c !important;
	font-weight		: bold;
}
#main_content[data-subject="algo"] .btn-g{
	color			: #545718 !important;
	background		: #d8e22b !important;
	font-weight		: bold;
}
#main_content[data-subject="algo"] .btn-p{
	color			: #333 !important;
	font-weight		: bold;
}
#main_content[data-subject="algo"] #challenge_button_finish,
#main_content[data-subject="algo"] #challenge_button_finish_next{
	background		: #ffe62c;
	color			: #5d592c;
}

div.challenge_tutorial .tutorial_program > div:first-child{
	margin			: 8px auto;
	width			: 70%;
	text-align		: center;
}
div.challenge_tutorial_info .btn.btn-large{
	padding			: 24px 64px;
    min-width		: 30%;
    font-size		: 200%;
}
div.challenge_tutorial_info .btn.btn-pause{
	padding			: 24px 32px;
    min-width		: inherit;
    font-size		: 200%;
    color			: orange;
}
div.challenge_tutorial_info .btn.btn-pause.paused{
	color			: red;
	animation		: gradation_pause 1s infinite;
	border			: 1px solid lightgray;
}

@keyframes gradation_pause {
	0% { background-color: #fff6a4; }
	50% { background-color: #ffe6d0; }
	100% { background-color: #fff6a4; }
}

div.challenge_tutorial_info label{
	font-size		: 125%;
	margin-left		: 8px;
    vertical-align	: middle;
    cursor			: pointer;
}
div.challenge_tutorial_info input[type="checkbox"]{
	width			: 20px;
	height			: 20px;
	-moz-transform	: scale(1.25);
	-webkit-transform: scale(1.25);
	transform		: scale(1.25);
	cursor			: pointer;
}
/* チャレンジ内動画 */
#challenge_movie_title{
	font-size		: 1.2em;
	text-align		: center;
}
#video_player.challenge_video{
	max-width		: 580px;
	margin			: 0 auto;
	text-align		: center;
}
#video_player.challenge_video + div{
	margin			: 12px 0;
	text-align		: center;
}

/* チャレンジ内問題カルーセル */
#challenge_carousel{
	height			: 100%;
}
#challenge_carousel > div{
	height			: 100%;
}
#challenge_carousel.carousel_bb{
	/*margin			: 0 0 0 1em;*/
	padding			: .5em;
    border			: .25em solid #cfdfdd;
    border-radius	: .3em;
    background		: var(--bg-blackboard);
    color			: var(--ft-blackboard);
}
div.carousel-item{
	height			: 100%;
}
div.carousel-item > div{
	height			: 100%;
	position		: relative;
}
div.carousel-item .info{
	white-space		: nowrap;
}
div.carousel-item .detail{
	padding			: .5em;
}
div.carousel-item img{
	object-fit		: contain;
}
a.carousel-control-prev,
a.carousel-control-next{
    font-size		: 2em;
}
#main_content[data-subject="algo"] a.carousel-control{	/* アルゴの場合の問題画像スクロールボタン */
	display			: none;									/* 表示しない */
}

/* タイマー */
#challenge_ready_title,.challenge_ready_title{
	max-width		: 720px;
    text-align		: left;
    margin			: 1.5em auto;
}
div.challenge_timer_wrapper{
	position		: relative;
	padding-top		: 10em;
}
#challenge_timer_countdown_wrap,.challenge_timer_countdown_wrap{
	position		: absolute;
	width			: 100%;
	height			: 100%;
    top				: 2.5em;
    line-height		: 0;
    left			: 0;
    pointer-events	: none;
}
#challenge_timer_countdown,.challenge_timer_countdown{
	position		: absolute;
	width			: 100%;
	height			: 100%;
    top				: 0;
    left			: 0;
    z-index			: 2;
    font-size		: 777%;
    line-height		: 0;
    color			: orange;
    font-family		: arial black,Impact;
    text-shadow		: -0.02em -0.02em red, 0.02em 0.02em red, 0.02em -0.02em red, -0.02em 0.02em red;
    pointer-events	: none;
}
div.challenge_timer{
	height			: 100%;
	text-align		: center;
	display			: none;
}
div.challenge_timer > div{
	height			: 100%;
	position		: relative;
}
#challenge_timer_counter,.challenge_timer_counter{
	line-height		: 0;
	font-size		: 600%;
	/*color			: transparent;*/
	color			: var(--title-font-color);
	font-family		: arial black,Impact;
	display			: inline;
	position		: relative;
}
#timer_column{
	position		: relative;
	z-index			: 1;
}
#timer_column.half{
	font-size		: 60%;
	padding-left	: 0;
}


div.challenge_timer_control{
	display			: block;
}
div.challenge_timer.timer .challenge_timer_counter{
	color			: var(--title-font-color);
}
div.challenge_timer.timer .over,#handwrite_timer_bar.over{
	color			: orange !important;
}
div.challenge_timer.timer #challenge_timer_countdown{
/*	color			: transparent;*/
/*	text-shadow		: none;*/
	pointer-events	: none;
}


div.challenge_timer.waiting #challenge_button_finish_next,
div.challenge_timer.accepting #challenge_button_finish_next{
	display			: none;
}
div.challenge_timer.finish #challenge_button_finish,
div.challenge_timer.finish #challenge_button_pause{
	display			: none;
}
div.challenge_timer.pause #challenge_button_finish,
div.challenge_timer.pause #challenge_button_pause{
	display			: none;
}

div.challenge_timer.accepting #challenge_timer_countdown{
	display			: none;
}
div.challenge_timer.timer div.challenge_timer_control{
	display			: block;
}
div.challenge_timer.waiting div.btn{
	color			: transparent !important;
	background		: none !important;
}
div#challenge_timer_progress{
	position		: absolute;
    bottom			: 0;
    left			: 0;
    background		: lightgray;
    width			: 100%;
    height			: 0.1em;
}
div#challenge_timer_progress > .progress_now{
	width			: 0;
	height			: 100%;
	background		: var(--title-font-color);
}
div#challenge_timer_progress > .progress_master{
	position		: absolute;
	width			: 1px;
    height			: 100%;
    background		: #358;
    top				: 0;
}
div.over div#challenge_timer_progress > .progress_now{
	background		: orange !important;
}
div#challenge_timer_referencetime{
	margin-top		: 2.5em;
    line-height		: 1.5em;
    font-size		: 170%;
}
div#challenge_timer_referencetime > div:nth-child(1){
	color			: var(--title-font-color);
}
div#challenge_timer_referencetime > div:nth-child(2){
	color			: dodgerblue;
}
#challengetime_reference_success,
#challengetime_reference_master{
	margin-left		: 1em;
}
#challenge_timer_hintdisplay{
	margin-top		: 1em;
}
#hint1_button,#hint2_button{
	display			: none;
	padding			: 1em;
	margin-top		: 1em;
    font-size		: 2em;
}
#hint1_button.show,#hint2_button.show{
	display			: inline-block;
}
#handwrite_pause_bg{
	display			: none;
	top				: 0;
	left			: 0;
	right			: 0;
	bottom			: 0;
	position		: absolute;
	z-index			: 2;
	background		: rgba(255,255,255,.75);
}
div.handwrite_timer.pause #handwrite_pause_bg{
	display			: block;
}
#challenge_pause_menu,
#handwrite_pause_menu{
	display			: none;
	top				: 0;
	left			: 2em;
	right			: 2em;
	bottom			: 1em;
	position		: absolute;
	z-index			: 3;
	background		: #fffbd5;
	border			: .25em solid #ffe600;
	border-radius	: .75em;
	color			: #afa658;
}
#handwrite_pause_menu{
	top				: 2em;
	bottom			: 2em;
}
div.challenge_timer.pause #challenge_pause_menu,
div.handwrite_timer.pause #handwrite_pause_menu{
	display			: block;
}
#challenge_pause_menu div.btn,
#handwrite_pause_menu div.btn{
	margin-left		: 1em;
    margin-right	: 1em;
    font-size		: 1.5em;
    padding			: .5em 1em;
	cursor			: pointer;
}
#challenge_pause_restart{
	font-size		: 2em;
	font-weight		: bold;
}
#challenge_pause_menu > div,
#handwrite_pause_menu > div{
	height			: 100%;
	padding			: 1em;
}
#challenge_pause_menu .pause_title,
#handwrite_pause_menu .pause_title{
    font-size		: 2em;
    color			: #afa658;
    animation		: pause_title_blink 2s linear infinite;
}
@keyframes pause_title_blink {
  0%{
    color		: #afa658;
  }
  50%{
  	color		: transparent;
  }
  100%{
    color		: #afa658;
  }
}


#challenge_pause_restart > span.oi{
	color			: white;
	font-size		: 1.5em;
	vertical-align	: bottom;
	margin			: 0 .3em 0 0;
}
#challenge_pause_menu_buttons > div,
#handwrite_pause_menu_buttons > div{
	background		: #d8e212;
	color			: var(--ft-button-y);
}
#challenge_pause_menu_buttons > div.loading_wrap,
#handwrite_pause_menu_buttons > div.loading_wrap{
    background		: transparent;   
    color			: #009f8c;
}
#challenge_pause_now_time{
	color			: #009f8c;
}
#challenge_pause_break,
#handwrite_pause_break{
	color			: #9b5b63;
/*	border			: .25em solid #9b5b63;*/
	background		: #f4d2de;
}

@media screen and (max-width: 768px){
	.challenge_timer_counter{
		font-size			: 700%;
	}
}


/* 解答 */
div.answer_paper{
	background		: #c4c4c4;
	text-align		: center;
	color			: white;
/*	height			: calc(100% - 8px);*/
/*	height			: 400px;*/
/*	overflow-y		: scroll;*/
	border			: 1px solid var(--ft-button-g);
}
#answer_all_correct_button{
	position		: relative;
	height			: 1.5em;
}
#answer_all_correct_button > span{
	position		: absolute;
	z-index			: 8;
	right			: 0;
	top				: 0;
	margin			: 0 0.5em;
	cursor			: pointer;
	color			: red;
	padding			: 0.1em 1em 2em 1em;
	font-size		: 0.8em;
	border			: 0.15em solid var(--ft-button-g);
	border-radius	: .5em .5em 0 0;
	background		: var(--bg-button-y);
}
#section_answer.uneditable #answer_all_correct_button{	/*正誤編集OFFの場合は隠す*/
	display			: none;
}
#main_content[data-subject="algo"] #answer_all_correct_button{	/* アルゴの場合の全問正解ボタン */
	display			: none;									/* 表示しない */
}
table.answer_table{
	position		: relative;
	z-index			: 10;
	width			: 100%;
	border			: 1px solid var(--ft-button-g);
	overflow-y		: scroll;
}
table.answer_table th{
	padding			: 8px;
	color			: var(--ft-button-g);
	background		: var(--bg-button-g);
	border			: 1px solid var(--ft-button-g);
	white-space		: nowrap;
}
table.answer_table td{
	padding			: 8px;
	color			: var(--ft-button-g);
	background		: #F8F8F8;
	border			: 1px solid var(--ft-button-g);
	vertical-align	: top;
	text-align		: left;
}
table.answer_table thead > tr.answer_normal > th:nth-child(1){
	width			: 15%;
}
table.answer_table thead > tr.answer_normal > th:nth-child(2){
	max-width			: 70%;
}
table.answer_table thead > tr.answer_normal > th:nth-child(3){
	display			: none;
}
table.answer_table thead > tr.answer_normal > th:nth-child(4){
	
	width			: 10%;
}
table.answer_table.handwrite_layout thead > tr.answer_normal > th:nth-child(2){
	max-width			: 30%;
}
table.answer_table.handwrite_layout thead > tr.answer_normal > th:nth-child(3){
	display				: table-cell;
	max-width			: 30%;
}
table.answer_table.handwrite_layout thead > tr.answer_normal > th:nth-child(4){
	width			: 10%;
}
table.answer_table tr.answer_hidden{
	display				: none;
}
/* 答え欄が非表示のときのレイアウト */
table.answer_table.answer_hidden_layout tr.answer_normal{
	display				: none;
}
table.answer_table.answer_hidden_layout tr.answer_hidden{
	display				: table-row;
}

table.answer_table td > img{
	max-width		: 100%;
}
table.answer_table .question_number{
	/* font-size		: 0.8em; */
	white-space		: nowrap;
}
table.answer_table td:nth-child(2){
	font-size		: 1.2em;
}
table.answer_table .question_number,
table.answer_table td:last-child{
	text-align		: center;
}
table.answer_table .answer_info{
	font-size		: .8em;
}
table.answer_table td.question_correct .question_handwrite_answer{
	padding-top		: 8px;
	font-size		: 1.2em;
}
table.answer_table td.question_correct{
	padding			: 0;
}
table.answer_table td.question_correct > label{
	margin-bottom	: 0;
	width			: 100%;
	height			: 100%;
	cursor			: pointer;
}
table.answer_table td.question_correct input[type='checkbox']{
	display			: none;
}
table.answer_table td.question_correct input[type='checkbox'] + .answer_check_icon {
	position		: relative;
	vertical-align	: middle;
	border			: 1px solid lightgray;
	width			: 1.8em;
    height			: 1.8em;
    display			: block;
    margin			: 6px auto;
}
#section_answer.uneditable table.answer_table td.question_correct input[type='checkbox'] + .answer_check_icon{	/*正誤編集OFFの場合は線なし*/
	border			: none;
}
#section_answer.uneditable table.answer_table td.question_correct input[type='checkbox'].editable + .answer_check_icon{	/*正誤編集OFFでも編集可能なら線あり*/
	border			: 1px solid lightgray;
}
table.answer_table td.question_correct input[type='checkbox'] + .answer_check_icon:before {
	content			: "○";
	color			: transparent;
	font-size		: 18px;
	line-height		: 0;
}
table.answer_table td.question_correct input[type='checkbox']:checked + .answer_check_icon:before {
	content			: "○";
	color			: transparent;
	font-weight		: bold;
}
table.answer_table tr.vertical_display div{
	-ms-writing-mode: tb-rl;
	writing-mode	: vertical-rl;
	text-orientation: upright;
	min-height		: 10em;
}
span.answer_check_icon > svg{
	position		: absolute;
	top				: 0;
	left			: 0;
	z-index			: 3;
	overflow		: inherit;
}
input.circle_correct:checked + span.answer_check_icon svg path{
	stroke-dashoffset	: 0;
}
input.circle_correct + span.answer_check_icon svg path{
	stroke-dasharray	: 300;
	stroke-dashoffset	: 301;
	transition: all 550ms cubic-bezier(1,0,.37,.91);
	stroke-linecap		: round;
	stroke-linejoin		: round;
}
div.info_box{
	background		: #fffbd5;
	margin			: 8px auto 0 auto;
	padding			: 16px;
	
}
div.info_box > textarea{
	width			: 100%;
}
div.answer_info_box{
	height			: calc(100% - 16px);
}
td.question_answer input.circle_correct{
	display			: none;
}
td.question_answer input.circle_correct + .answer_check_icon {
	position		: relative;
	vertical-align	: middle;
	display			: block;
	cursor			: pointer;
}
td.question_answer span.answer_check_icon > svg{
	transform		: scale(0.3);
}

#answer_info_box_algo,
.algo_content,
.algo_localize{
	display			: none;
}
#main_content[data-subject="algo"] #answer_info_box_algo,
#main_content[data-subject="algo"] .algo_content,
#main_content[data-content_localize="algo"] .algo_localize{
	display			: block;
}
#main_content[data-subject="algo"] #answer_info_box_button{
	display			: none;
}
#answer_info_box_algo{
	margin-top		: 1em;
}
#answer_algo_success,#answer_algo_failed{
	width			: 50%;
	width			: calc(50% - 0.2em);
	font-size		: 2em;
}
#answer_algo_success{
	margin-right	: 0.1em;
}
#answer_algo_failed{
	margin-left		: 0.1em;
}
img.text_child_image{
	max-height		: 5em;
}

/* コメント */
div.challenge_comment,
div.challenge_comment > div{
	height			: 100%;
}

/* リザルト */
div.answer_info_box{
	margin			: 8px auto 0 auto;
	padding			: 16px;
	height			: calc(100% - 16px);
}
div.answer_info_box > .row > div{
	padding-left	: 0;
	padding-right	: 0;
	margin-bottom	: 10px;
}
#answered_time{
	white-space		: nowrap;
}
#answered_time > span{
	width			: 15%;
}
#answered_time > input{
	width			: 40%;
	font-size		: 0.8em;
}
div.answer_info_box > .row > div:nth-child(odd) > .result_param{
	margin-right	: 10px;
}
@media screen and (max-width: 768px){
	div.answer_info_box > .row > div:nth-child(odd) > .result_param{
		margin-right	: 0;
	}
	#answer_all_correct_button{
		height			: 2.2em;
	}
}

#challenge_result_loading{
	text-align		: center;
}
div.answer_info_box > .row > div > .result_param{
	font-size		: 1.5em;
}
.result_param > div:first-child{
	padding			: 8px;
	background		: var(--bg-button-y);
}
.result_param > div:last-child{
	padding			: 8px;
	background		: var(--bg-cream);
}
.challenge_result_button{
	background		: var(--bg-button-y);
	color			: var(--title-font-color);
	font-size		: 2em;
    line-height		: 2em;
}

div.result_display{
	width			: 100%;
	max-width		: 512px;
    margin			: 0 auto;
    
}
div.result_row{
	border-bottom	: 8px dashed #c4c4c4;
	margin			: 32px 0;
}
div.result_row > div{
	display			: inline-block;
}
div.result_row > div:first-child{
	width			: 30%;
	text-align		: left;
	font-size		: 200%;
	font-weight		: bold;
	color			: var(--title-font-color);
	overflow		: hidden;
    white-space		: nowrap;
}
div.result_row > div:last-child{
	width			: 60%;
	text-align		: right;
	font-size		: 500%;
	font-weight		: bold;
	line-height		: 1;
	white-space		: nowrap;
}
div.result_row.answer_error{
	color			: red;
	font-weight		: bold;
}
div.challenge_result .challenge_result_grade{
	
}
.challenge_result_grade.gradeS{	color	: rgba(var(--grade-s),1);	}
.challenge_result_grade.gradeA{	color	: rgba(var(--grade-a),1);	}
.challenge_result_grade.gradeB{	color	: rgba(var(--grade-b),1);	}
.challenge_result_grade.gradeC{	color	: rgba(var(--grade-c),1);	}
.challenge_result_grade.gradeD{	color	: rgba(var(--grade-d),1);	}
.challenge_result_grade.gradeE{	color	: rgba(var(--grade-e),1);	}

span.result_scorevalue{
	font-size		: 40%;
    margin-left		: 0.5em;
    color			: #c4c4c4;
}
span.result_normalvalue{
	font-size		: 60%;
    margin-left		: 0.5em;
    color			: var(--title-font-color);
	line-height		: 1.5em;
	vertical-align	: middle;
	display			: inline-block;
}
#challenge_result_display #challenge_no_result_message{
	display			: none;
	text-align		: center;
	font-size		: 1.5em;
}
#challenge_result_display.no_result #challenge_no_result_message{
	display			: none;
}
#challenge_result_display.no_result #challenge_result_mastercheck_label,
#challenge_result_display.no_result #challenge_result_star{
	display			: none;
}
#main_content.readiness #challenge_result_display.no_result #challenge_result_star{
	display			: block;
}
#challenge_result_star{
	
}
.stars_wrapper > span.star{
	cursor			: pointer;
}
.stars_wrapper > span.star > div.star_char{
	font-size		: 350%;
	margin			: 0 .75em;
}
.stars_wrapper > span.star > div.star_info{
}
.stars_wrapper > span.bookmark{
	cursor			: pointer;
	display			: none;
}
.stars_wrapper > span.star.disable{
	opacity			: 0.5;
}

#challenge_success_box{
	background		: #e0ffaf;
	color			: coral;
}

#challenge_success_message{
	animation		: blink_text 2s linear infinite;
}
@keyframes blink_text {
  0%{
    color			: #ff7f50;
  }

  50%{
  	color			: #ffd700;
  }
  
  100%{
    color			: #ff7f50;
  }
}

/* チャレンジ内　トップへスクロールボタン */
#fixed_scroll_top_button{
	position		: fixed;
	z-index			: 1000;
	bottom			: 0;
	right			: 0;
	display			: none;
}
#main_content[data-page="list"] #fixed_scroll_top_button{
	display			: block;
}
#fixed_scroll_top_button .button_wrap{
	margin			: 0 28px 8px 0;
    padding			: 1em;
    line-height		: 0;
    display			: inline-block;
    color			: white;
    background		: var(--bg-nav);
    border-radius	: 0.4em;
    display			: none;
}
@media screen and (max-width: 992px){
	#fixed_scroll_top_button .button_wrap{
		font-size	: 0.8rem;
	}
}

/* チャレンジ内 教科による特別処理 */
/* アルゴのとき */
#main_content[data-subject="algo"] #challenge_skip_button,	/* スキップボタン */
#main_content[data-subject="algo"] #challenge_button_pause,	/* ポーズボタン */
#main_content[data-subject="algo"] #challenge_display_answer_result{		/* こたえを見るボタン */
	display			: none !important;									/* 表示しない */
}
#main_content[data-page="ready"][data-subject="algo"] #challenge_title{	/* テキスト〇ページを開いてくださいという表示 */
display			: none;									/* 表示しない */
}
/*=========================
	ログインページ
=========================*/
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;
	margin-top		: 1em;
}
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;
}
div.modal_loading_window_foreground .foreground_loading_progress{
	text-shadow	: none;
	position	: absolute;
	top			: 60%;
	width		: 10%;
	border		: 1px solid white;
	height		: 0.75em;
}
div.modal_loading_window_foreground .foreground_loading_bar{
	width		: 0%;
	height		: 100%;
	background	: white;
}
div.modal_loading_window_foreground .foreground_loading_message{
	text-shadow	: none;
	position	: absolute;
	top			: 65%;
}

/* リザルト画面 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;
	font-family: "M PLUS Rounded 1c";
	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_keyboard > .tool_icon,
#yomutoku_tool_keyboard > .tool_icon{
	background-image	: url(temp/icon_keyboard.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;
}
#handwrite_main.selection_mode #question_detail_container.note_l .selection_box{
	font-size			: .7em;
}

/* 自動送信関連 */
.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;
  }
}

/* maitra */

body.maitra nav#smartstudy_navbar{
    background: #1781d5;
}
body.maitra nav#smartstudy_navbar a.active-link:hover{
	background: #6cbdfd;
}
body.maitra,body.maitra div#main_content {
    background: #c0d7f3;
}
body.maitra div#right_column {
    background: #77b1d2;
}


/* 宿題関連 */
.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;
}

/* result table */
table.curriculum_results_table{
	border		: 1px solid gray;
	width		: 100%;
}
table.curriculum_results_table th{
	background	: rgba(255,235,210,.8);
}
table.curriculum_results_table td{
	background	: rgba(255,255,255,.5);
}
table.curriculum_results_table th,
table.curriculum_results_table td{
	text-align	: left;
	padding		: .25em;
}
table.curriculum_results_table tr:hover td{
	background	: rgba(255,255,255,1);
}

/* 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;
}

/* 帳票 */
.ledger_question_viewer{
	white-space			: nowrap;
}