@charset  "utf-8";
@import url(https://fonts.googleapis.com/css?family=Nunito);


.bg-gradient-lightblue{background: linear-gradient(90deg, white, lightblue) repeat-x !important;}


*{font-family: 'Kosugi Maru', 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, sans-serif;}


.card{background: transparent !important;border-color: black}
.card .border-bottom{border-color: black !important;}
.card .border-bottom:first-child{border-top: 1px solid black}
.w-10{width: 10% !important;max-width: 10% !important;min-width: 10% !important}
.w-20{width: 20% !important;max-width: 20% !important;min-width: 20% !important}
.w-30{width: 30% !important;max-width: 30% !important;min-width: 30% !important}
.w-40{width: 40% !important;max-width: 40% !important;min-width: 40% !important}
.w-50{width: 50% !important;max-width: 50% !important;min-width: 50% !important}
.w-60{width: 60% !important;max-width: 60% !important;min-width: 60% !important}
.w-70{width: 70% !important;max-width: 70% !important;min-width: 70% !important}
.w-80{width: 80% !important;max-width: 80% !important;min-width: 80% !important}
.w-90{width: 90% !important;max-width: 90% !important;min-width: 90% !important}

.w-95px{width: 95px !important;max-width:95px !important;}

header{border-bottom: 1px solid gray}
#contents{padding: 3rem 0 9rem;}

@media screen and (min-width:480px){
	header{padding: 1rem 0 !important;}
}

@media screen and (max-width:480px){
	header{padding-bottom: 0 !important;}
	.header_wrap{display: block !important;}
	.header_wrap > * {display: block !important;margin: 0 auto}
	.header_wrap > div{display: flex !important;justify-content: space-around;border-top: 1px solid gray;padding: .5em 0;margin: .5rem 0 !important}
}

/* index */
#index_right{top: 5rem;z-index: 999}
.cls_index{padding-bottom: 5rem !important;}
.cls_index .header_wrap > div{display: none !important;}

@media screen and (min-width:480px){
	#index_right{right: 18% !important;}
}

@media screen and (max-width:480px){
	#index_right{right: .5rem !important;}
}

#page_title{word-break: keep-all;}
@media screen and (max-width:480px){
	#fullmark_area{display: block !important}
	#fullmark_area span{display: block;}
}

/* login */
.cls_login .header_wrap > div{display: none !important}



/* quest */
#start_limit_time > div{border: 1px solid gray;color:red;}
.teach_detail{color: red;font-weight: bold;}
#quest_table,
#quest_table th,
#quest_table td{border: 1px solid gray;}

#rank_table,
#rank_table th,
#rank_table td{border: 1px solid gray;}

.long_quests_row_0{background: rgba(0,0,0,.05);}
1.long_quests_row_1{background: lightblue}
1.long_quests_row_2{background: lightyellow}

.select_row{background: lightcoral}/*lightyellow*/
.select_row_mj{background: lightyellow;}
.result_ok{background: lightcyan!important;/*dodgerblue !important*/}
.result_ng{background: darksalmon !important}
.text-red{color: red}
#info_wrap{
	right: 1rem;
	border: 1px solid gray;
	position: fixed;
	bottom: 0;
	background-color: gainsboro;
	padding: .5rem;
	z-index: 999;
	margin-bottom: 0.75rem;
}

#error_wrap{
	height: 90vw !important;
	display: flex;
	justify-content:space-around;
	align-items: center;
	flex-direction: column;
}

.answer_info{
	border: 2px solid red !important;
	background: lightpink !important;
	color: black;

}

.answer_info > div{
	border-bottom: 1px solid black;
	padding-bottom: 3px;
	margin-bottom: 3px;
}

.fullmark_check{font-size: .75rem;}
@media screen and (min-width:480px){
	#contents{min-height: 62vw;}
	#info_wrap{width: 15rem;font-size: 1rem;}
	.fullmark_check{float: right}
}

@media screen and (max-width:480px){
	#contents{min-height: 147vw;}
	#info_wrap{width: 12rem;font-size: .7rem;}
	#rank_table{font-size: .8rem;}
	.fullmark_check{display: block !important;}
}


.submenu.active{background: lightblue !important;color: black !important;}

.quest_bottom{border-bottom: 3px solid black !important;}

form table tr td button{
	border: 1px solid black;
	border-radius: 5px;
	padding: .2rem .5rem;
	background: white;
}

.quest-underline{border-bottom: 3px solid black !important}

.under_red{text-decoration: underline;}

.border_double{border-top: 5px double black;}