/* --reset-- */
@charset "UTF-8";

/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,input {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  font-size: 100%;
  vertical-align: baseline;
}
ol,ul {
  list-style: none;
  text-align: left;
}
table {
  border-collapse:collapse;
  border-spacing: 0;
  vertical-align: middle;
  border:none;
  border-spacing:0;
}
th,td{
  vertical-align:top;
  font-weight:normal;
  text-align:left;
}
caption{
  text-align:left;
}
caption,th,td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}
img {
  border: none;
  line-height: 0;
  vertical-align: top;
}
div,a,span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  text-decoration: none;
}
body {
  font-size: 100%;
  line-height: 1.0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  color:#333333;
}
*/

/* --common-- */

html,body	{
	width: 100%;
}

ul	{
	margin: 0;
	padding: 0;
	list-style: none;
}

.test	{
	display: none;
}

/* mother */

#mother_animation	{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: rgba(256,256,256,1.0);
}

#mother_header	{
	font-size: 2em;
	margin-block-start: 0.67em;
	margin-block-end: 0.67em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	font-weight: bold;
	text-align: center;
	display: block;
	width: 75%;
	height: 15%;
	margin-right: auto;
	margin-left: auto;
}

#mother	{
	display: block;
	width: 75%;
	height: 75%;
	margin-right: auto;
	margin-left: auto;
}

#mother_footer	{
	display: block;
	width: 75%;
	height: 10%;
	margin: 8px auto 0 auto;
	padding: 8px 0 8px 0;
	background-color: #EEE;
	text-align: center;
	cursor: pointer;
}

/* --home-- */

#home	{
	display: block;
	width: 100%;
	padding: 16px 0 16px 0;
	background-color: #EEE;
}

.home_menu	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: #ddd;
}

.home_menu--title	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8px;
	background-color: #ccc;
	text-align: center;
}

.home_menu--news	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 16px;
	padding: 8px;
	background-color: #ccc;
}

.home_menu--content	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 16px;
	padding: 8px;
	border: 1px solid #000;
	background-color: #ccc;
	cursor : pointer;
}

.home_menu--content:hover	{
	border: 1px solid red;
}

.home_menu--content--title	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.home_menu--content--context	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

/* --explain-- */

.explain_header__table	{
	width: 100%;
}

.explain_header--navi 	{
	width: 25%;
	border: 1px solid #000;
	padding: 8px 0 8px 0;
	text-align: center;
	background-color: #EEE;
	cursor : pointer;
}

.explain_content	{
	display: none;
	width: 100%;
	border: 1px solid;
	border-top: none;
	background-color: #EEE;
}

.explain_content--title	{
	font-size: 1.5em;
	text-align: center;
	padding: 8px 0 8px 0;
	display: block;
	width: 100%;
}

.explain_content--context	{
	display: block;
	width: 100%;
}

/* --set-- */

#set	{
	display: block;
	width: 100%;
	padding: 16px 0 16px 0;
	background-color: #EEE;
}

.set_menu	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: #ddd;
}

.set_menu--title	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding: 8px;
	background-color: #ccc;
	text-align: center;
}

.set_menu--content	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 16px;
	padding: 8px;
	border: 1px solid #000;
	background-color: #ccc;
	cursor : pointer;
}

.set_menu--content:hover	{
	border: 1px solid red;
}

.set_menu--content--title	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.set_menu--content--context	{
	display: block;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
}

/* --setting-- */

/* menubar */

.setting_menu__label	{
	display: block;
	margin: 0 0 4px 0;
	line-height: 1.0;
	color: #fff;
	background: green;
	cursor : pointer;
}

.setting_menu__table	{
	padding: 8px;
	width: 100%;
}

.setting__table--mark	{
	width: 10%;
	text-align: center;
}

.setting__table--name	{
	width: 25%;
	text-align: left;
}

.setting__table--set	{
	width: 75%;
	text-align: right;
}

.setting_menu__input	{
	display: none;
}

.setting--content	{
	height: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

#setting_content:checked ~ #setting_content--content,
#setting_range:checked ~ #setting_range--content,
#setting_number:checked ~ #setting_number--content,
#setting_order:checked ~ #setting_order--content,
#setting_shape:checked ~ #setting_shape--content,
#setting_timer:checked ~ #setting_timer--content,
#setting_change:checked ~ #setting_change--content,
#setting_list:checked ~ #setting_list--content{
	height: auto;
	opacity: 1;
}

.setting--message	{
	color: red;
}

/* 問題と選択肢 */

.setting_content__table	{
	width: 100%;
	text-align: center;
}

.setting_content__table__th	{
	width: 35%;
}

.setting_content__table__td	{
	width: 30%;
}

.setting_content__table--checkbox	{
	display: block;
	cursor: pointer;
}

/* 範囲 */

.setting_range__table	{
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.setting_range__table__th	{
	width: 35%;
}

.setting_range__table__td	{
	width: 30%;
}

/* 問題数 */
.setting_number__table	{
	width: 100%;
	text-align: center;
}

.setting_number__table__td	{
	width: 50%;
}

/* 順番 */

.setting_order__table	{
	width: 100%;
	text-align: center;
}

.setting_order__table__td	{
	width: 25%;
}

.setting_order__label	{
	display: block;
	cursor: pointer;
}

/* 選択肢の形 */

.setting_shape__table	{
	width: 100%;
	text-align: center;
}

.setting_shape__td	{
	width: 50%;
}

.setting_shape__label	{
	display: block;
	cursor: pointer;
}

/* 制限時間 */

.setting_timer__table	{
	width: 100%;
	text-align: center;
}

.setting_timer__table__td	{
	width: 25%;
}

.setting_timer__label	{
	display: block;
	cursor: pointer;}

/* 切り替え */

.setting_change__table	{
	width: 100%;
	text-align: center;
}

.setting_change__table__td	{
	width: 50%;
}

.setting_change__label	{
	display: block;
	cursor: pointer;
}

/* ボタン */

.setting_start	{
	width: 100%;
}

.setting_start__table	{
	width: 100%;
	text-align: center;
}

.setting_start__table--button	{
	width: 50%;
}



#setting_numberofquestion__bar	{
	width: 64px;
	height: 100%;
	margin-right: auto;
	margin-left: auto;
}

/*.setting_numberofquestion__input	{
	display: block;
	float: right;
	width: 50%;
}*/

/* --play-- */

.play_data__table	{
	width: 100%;
	text-align: center;
}

.play_data__table__t	{
	width: 50%;
}

#play_body	{
	position: relative;
}

.play_body__table	{
	width: 100%;
}

.play_body__table__tr	{
	text-align: center;
}

.play_body__table__td	{
	width: 25%;
}

.play_answer__style	{
	writing-mode: tb-rl;
	margin-right: auto;
	margin-left: auto;
	padding: 4px;
}

.play_option__style	{
	writing-mode: tb-rl;
	background: #fff;
	border: 4px solid #060;
	margin: auto;
	padding: 4px;
	cursor: pointer;
	width: 25px;
	line-height: 25px;
	text-align: center;
	position: relative;
}

#play_nextButton	{
	display: none;
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;	
}

.play_nextButton__input	{
	width: 100%;
	padding: 16px;
}

/* --result-- */

.result__table	{
	width: 100%;
	text-align: center;
}

.result__table__td	{
	width: 50%;
}

.result_percent	{
	position: relative;
	width: 100%;
}

#result_percent--bar	{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	background-color: red;
}

#result_percent--number	{
	position: relative;
	width: 100%;
}

/*----*/

.result_choise	{
	display: block;
	width: 100%;
	border: 1px solid;
}

.result_choise__table	{
	width: 100%;
	border-spacing: 0;
	border: none;
}

.result_choise__table__td--left	{
	width: 10%;
}

.result_choise__table__td--right	{
	width: 90%;
}

.result_choise__table__td--left--content	{
	width: 100%;
	border-spacing: 0;
	border: none;
}

.result_choise__table__td--right--content	{
	width: 100%;
	border-spacing: 0;
	border: none;
}

.result_replay	{
	display: block;
	width: 100%;
	border: 1px solid;
}

/* list */

#list	{
	overflow: auto;
}

#list__table	{
	text-align: center;
}

#result__tr0	{
	background: #c4a3bf;
}