@charset "UTF-8";

#all {
	text-align:center;
}

#main {
	width:750px;
	text-align:left;
	margin:auto;
}

#header {
	height:70px;
	background-repeat:no-repeat;
	margin:10px 0px;
}

#banner {
	width: 100%;
}

#title {
	padding-top: 29px;
	margin-left:80px;
}
#subtitle {
	display: inline-block;
	background-color:#000066;
	color:#FFFFFF;
	font-size:15px;
	font-weight: bold;
	width: 100%;
	height:30px;
}
#subtitle div.right{
	padding:2px;
	padding-right:10px;
}
#subtitle div.left{
	padding: 5px;
	padding-left:15px;
}
#state {
	text-align:center;
}
.container {
	margin-top: 2px;
	margin-bottom: 15px;
}
#ans_status {
	margin:auto;
	margin-top:30px;
	width:300px;
	padding:5px;
	background-color:#B22222;
	color:#FFFFFF;
	text-align:center;
}

/*
.null_check_box {
	background-color:#EAEEEE;
}

.null_check_box_1 {
	height:46px;
	width:154px;
}

.null_check_box_2 {
	height:46px;
	width:115px;
}

.null_check_box_3 {
	height:46px;
	width:76px;
}

.null_check_box_4 {
	height:46px;
	width:37px;
}

.null_check_box_6 {
	width:154px;
	height:22px;
}

.null_check_box_7 {
	width:115px;
	height:22px;
}

.null_check_box_8 {
	width:76px;
	height:22px;
}

.null_check_box_9 {
	width:37px;
	height:22px;
}*/

.clearfloat {
	display:hidden;
	clear:both;
}

/* 2012/12/07 add */
.msg_area {
	color: #ff0000;
}

/* たかきadd */
body {	font-family: "ヒラギノ角ゴ proN W3","メイリオ",Meiryo,sans-serif;}


table {
	border-collapse:collapse;
	width: 750px;
}
ul,li,th,td {
	padding:0;
	margin: 0;
}

/* ※印用 */
.caution {
	padding-left:1em;
	text-indent:-1em;
}
.caution:before {
	content: "※";
}
.input {	text-align: center;}

/* ページ見出し */
.title_area {
	width: 100%;
	border-collapse:collapse;
	border:0px;
	background-color: rgb(0, 0, 102);
	margin-top: 25px;
}
.title {
	color: #ffffff;
	font-size: 14pt;
	font-weight: bold;
	padding: 5px;
}
.container a:link,
.container a:visited {	color: #00349a;}

/* questionコンテンツ */
.container:after {
	content: "";
	width: 100%;
	height: 0;
    display: block;
	clear: both;
}

/* 上table */
.qlist {	width: 49%;}
.qlist tr {	width: 100%;	height: 35px;}
.qlist td {	padding: 5px;}
.qlist.left {
	float: left;
	margin-right: 10px;
}
.resume {	text-align: center;}
.odd:nth-child(odd) {	background-color: #f2f2f2;}
.odd {
	font-size: 15px;
}


/* ボタン非活性 */
.qlist .ansDis {	color: gray;}

/* 注釈 */

.annotation {
	margin-top: 10px;
	margin-left: auto;
	width: 260px;
}
.an_txt {
	line-height: 20px;
}
.mark {
	width: 40px;
    height: 12px;
    margin-right: 5px;
    background: #fdb1b1;
    display: inline-block;
}
.mark_red {
	width: 34px;
    height: 12px;
    margin-right: 5px;
    border: solid 3px red;
    display: inline-block;
}
/* answerコンテンツ */
.answer {
	color: #00349a;
}

/* タブArea */
.tabArea {
	border-bottom: 5px solid #010066;
}
.tabArea li {
	display: inline-block;
	margin-right: 2px;
	width: 76px;
    border-radius: 6px 6px 0 0;
    font-size: 15px;
}
.tabArea li a:hover{
	color: #0080ff;
}
.tabArea li a {
	text-decoration: none;
	padding: 10px 12px;
	border: 2px solid #ffffff;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
	display: inline-block;
}
.tabArea li.active {
	border-bottom: 1px solid #010066;
	background-color: #010066;
}
.tabArea li.active a {
	color: #ffffff;
	border-color: #010066;
	padding-bottom: 9px;
}

/* 下table */
.answerList {
	width: 100%;
	font-size: 13px;
}
.answerList tr {
	border: 3px #ffffff;
    border-style: solid none none none;
}
/* 内側のborder設定 */
.answerList td {
	color: #000000;
	font-size: 16px;
	height: 34px;
	width: 40px;
	border: 2px solid #ffffff;
	border-style: solid none;
}
.answerList td:after {
	content: "";
	width: 100%;
	height: 0;
    display: block;
	clear: both;
}
.answerList td .valueWrap {
	background-color: #d7e3f1;
	height: 35px;
	position: relative;
	border: 2px solid #ededed;
	border-right: none;
	box-sizing: border-box;
	margin: 0;
	padding: 0 3px;
	line-height: 28px;
}
.answerList td:not(.total) .valueWrap:before {
	content: "";
	height: 100%;
	width: 0;
	display: inline-block;
	vertical-align: middle;
}
.answerList td .valueWrap div.content {
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform : translate(-50%,-50%);
  	width: 100%;
}
.answerList tr.rowSecond,
.answerList tr.rowSecond td,
.answerList tr.row td {	border: none;}

/* 問題番号 */
.answerList tr td.num_many {
	font-weight: bold;
	text-align: center;
	border-right: 3px solid #ffffff;
}
.answerList tr td.num_model {
	font-weight: bold;
	text-align: center;
	border-right: 3px solid #ffffff;
}
.answerList tr td.link {
    border-left: 3px solid #ffffff;
    border-right: 1px solid #ffffff;
}
/* 色の設定 */
.answerList tr td.num_many,.answerList tr td.num_many .valueWrap {
	background-color: #b9ceff;
}
.answerList tr td.num_model,.answerList tr td.num_model .valueWrap {
	background-color: #e7d4f8;
}

/* 皆の最多回答と不一致の問題番号 */
.answerList tr td.num_not_match {
	box-shadow: 0 0 0 4px #F44336 inset;
	width: 40px;
	border-right: 3px solid #ffffff;
}

.answerList tr td.total {
	/*height: 100%;*/
	width: 60px;
}
.answerList tr td.num[rowspan="2"],
.answerList tr td.total[rowspan="2"] {	/*height: 68px;*/}
.answerList tr td.link[rowspan="2"] {	/*height: 68px;*/}

.answerList tr td.num[rowspan="2"] {
	vertical-align: top;
	padding-top: 10px;
}

.answerList tr td.total[rowspan="2"] .valueWrap {
	height: 75px;
	width: 100%;
	box-sizing: border-box;
}
.answerList tr td.total[rowspan="2"] .valueWrap:before {
	content: "";
	width: 100%;
	height: 0;
	display: inline-block;
	vertical-align: middle;
}

.answerList tr td.link[rowspan="2"] .valueWrap {
	height: 75px;
	width: 100%;
	box-sizing: border-box;
}
.answerList tr td.link[rowspan="2"] .valueWrap:before {
	content: "";
	width: 100%;
	height: 0;
	display: inline-block;
	vertical-align: middle;
}

.answerList tr td .valueWrap span,
.answerList tr td.total .valueWrap {
	line-height: 16px;
	font-size: 16px;
	color: #00349a;
	font-weight: bold;
	vertical-align: middle;
}
.answerList tr td .valueWrap span.answerd_people{
	font-size: 12px;
	line-height: 17px;
	width: 100%;
    display: inline-block;
}
.answerList tr td .valueWrap .value {
	font-size: 15px;
    position: absolute;
    right: 1px;
    top: 17px;
    width: 90%;
    text-align: right;
    display: inline-block;
}
.answerList tr td .valueWrap span.selection_cell{
	position: absolute;
    top: 2px;
    left: 3px;
}
.answerList tr td.total .valueWrap {
	font-weight: normal;
	font-size: 9pt;
	text-align: center;
	border: 2px solid #ededed;
}
.answerList tr td.link .valueWrap {
	font-weight: normal;
	font-size: 9pt;
	text-align: center;
	border: 2px solid #ededed;
}
.answerList td.check .valueWrap {	background-color: #fdb1b1;}
.answerList tr.rowSecond td .valueWrap {	border-top: none;}
.answerList tr td.total .unit {
	width: 100%;
    display: inline-block;
    margin-top: -1px;
}
.answerList tr td span.model_answer{
	color: red;
}
.answerList td i{
	font-size: 25px;
    margin: 2px;
}
/* 公開していない */
.container.answer .answerList tr.construction td {
	color: #000000;
	background-color: transparent;
	font-weight: normal;
	border: none;
	padding: 20px 0 0;
	vertical-align: top;
}

/* pagetop */
.pageTop {
	text-align: right;
	margin: 0;
	padding: 15px 0 10px;
}
.pageTop a {
	border-bottom: 1px solid #00349a;
}
.pageTop a:link {	text-decoration: none;}
.pageTop a img {
	padding: 0 8px 3px 3px;
}

/* 一致率（解答入力状況画面） */
ul.percentages {
	list-style: none inside;
	display: flex;
	color: #000066;
}
ul.percentages li {
	width: 50%;
	padding: 15px 0;
    border: 2px solid #ededed;

    text-align: center;
    background-color: #d7e3f1;
    line-height: 22px;
}
ul.percentages li:not(:last-child) {
	border-right: 0;
}

ul.percentages li span:nth-child(2) {
	font-weight: bold;
}
.p-detail {
	font-size: 14px;
}

/* 必要なくなった
ul.percentages .p-long {
	width: 210px;
}
*/

/* 一致率（解答入力完了画面） */
ul.percentages_comp {
	list-style: none inside;
	display: flex;
	padding-top: 2px;
	color: #000066;
}
ul.percentages_comp li {
	width: 155px;
	padding: 15px 0;
    border: 2px solid #ededed;
    text-align: center;
    background-color: #d7e3f1;
}
ul.percentages_comp li:not(:last-child) {
	border-right: 0;
}
ul.percentages_comp li:first-child{
	width: 74px;
	background-color: rgb(0, 0, 102);
	color: #ffffff;
	padding: 21px 0;
}

ul.percentages_comp li span:nth-child(2) {
	font-weight: bold;
}

ul.percentages_comp .p-long {
	width: 200px;
}

/* ブロックごとの一致率（解答入力状況画面） */
ul.percentages_brock {
	list-style: none inside;
	display: flex;
	padding-top: 2px;
	color: #000066;
}
ul.percentages_brock li:first-child{
	width: 82px;
	background-color: #fedab8;
    font-weight: bold;
}
ul.percentages_brock li {
	width: 220px;
	padding: 15px 0;
    border: 2px solid #ededed;
    border-right: 0;
    text-align: center;
    background-color: #d7e3f1;
}
ul.percentages_brock li span:nth-child(2) {
	font-weight: bold;
}


/* 答えは70%以下メッセージ */
.answerListWrap .resultMessage {
	padding: 10px 0;
	height: 100px;
}

/* 模範解答は赤文字、それ以外は黒文字 */
.model {
	color:#ff0000;
}
span.notmodel {
	color:black;
}

div.left{
	text-align: left;
	float: left;
}
div.right{
	line-height: 20px;
	text-align: right;
	float: right;
}
.max_ans{
	color: white;
	font-size: 1.4em;
	font-weight: bold;
	padding: 10px 30px;
	background-color: #6262ff;
}
.model_ans{
	color: white;
	font-size: 1.4em;
	font-weight: bold;
	padding: 10px 30px;
	background-color: #6262ff;
}
.max_ans:hover{
	background-color: #8080ff;
}
.model_ans:hover{
	background-color: #8080ff;
}
.max_ans:active{
	background-color: #000040;
}
.model_ans:active{
	background-color: #000040;
}
.select_ans{
	display: block;
	height: 130px;
}
p.right{
	text-align: right;
	float: right;
}
.cb{
	/* floatを解除 */
	clear: both;
}
span.text{
	text-align: left;
	display: inline-block;
	width: 250px;
}

/* モード切替ボタンここから*/
.button_area {
	position	: relative;
	margin		: auto;
	width		: 280px;
	height		: 22px;
	padding		: 2px;
}

.button_area input[type="radio"] {
	display		: none;
}

.button_area label {
	display     : block;
	position    : absolute;
	top         : 0;
	bottom      : 0;
	left        : 0;
	right       : 0;
	text-align  : center;
	line-height : 10px;
	font-size   : 15px;
	padding		: 5px;
	cursor		: pointer;
}

 /* 最多数選択肢ボタンのラベル（OFF) */
.button_area #mode_many + label {
	right          : 50%;
	border-radius  : 6px 0 0 6px;
	background     : #ffffff;
	color          : #000000;
	border-right   : none;
	/* FireFox用*/
    background	   : -moz-linear-gradient(top, #fcfcfc, #ccc);
    /* Chrome、Safari用*/
    background	   : -webkit-linear-gradient(top, #fcfcfc, #ccc);
    /* IE10用*/
    background	   :  -ms-linear-gradient(top, #fcfcfc, #ccc);
    line-height	   : 18px;
    border-top	   : 1px solid #aaa;
    border-right   : 1px solid #b5b6b5;
}

 /* 最多数選択肢ボタンのラベル（ON) */
.button_area #mode_many:checked +label {
	/* FireFox用*/
    background		: -moz-linear-gradient(top, #3c77da, #407ee6 49%, #4d89e8 50%, #7aaceb);
    /* Chrome、Safari用*/
    background		: -webkit-linear-gradient(top, #3c77da, #407ee6 49%, #4d89e8 50%, #7aaceb);
    /* IE10用*/
    background		: -ms-linear-gradient(top, #3c77da, #407ee6 49%, #4d89e8 50%, #7aaceb);
	color          	: #fff;
	letter-spacing	: 1px;
}
#div_many i {
	margin-right	: 5px;
}


 /* 模範解答ボタンのラベル（OFF) */
.button_area #mode_model + label {
	left           : 50%;
	border-radius  : 0 6px 6px 0;
	background     : #ffffff;
	color          : #000000;
	border-left    : none;
	/* FireFox用*/
	background     : -moz-linear-gradient(top, #fcfcfc, #ccc);
	/* Chrome、Safari用*/
	background     : -webkit-linear-gradient(top, #fcfcfc, #ccc);
	/* IE10用*/
	background     :  -ms-linear-gradient(top, #fcfcfc, #ccc);
	line-height    : 18px;
	border-top     : 1px solid #aaa;
    border-right   : 1px solid #b5b6b5;
}

 /* 模範解答ボタンのラベル（ON) */
.button_area #mode_model:checked +label {
	/* FireFox用*/
    background		: -moz-linear-gradient(top, #793cda, #9740e6 49%, #9e4de8 50%, #c07aeb);
    /* Chrome、Safari用*/
    background		: -webkit-linear-gradient(top, #793cda, #9740e6 49%, #9e4de8 50%, #c07aeb);
    /* IE10用*/
    background		:  -ms-linear-gradient(top, #793cda, #9740e6 49%, #9e4de8 50%, #c07aeb);
    color			: #fff;
	letter-spacing	: 1px;
}
 /* 模範解答ボタンのラベル（押下不可) */
.button_area #mode_model:disabled +label{
	background		: #bababa;
    color			: #757575;
	cursor			: default;
	opacity			: 1.0;
}
#div_model i {
	margin-right	: 5px;
}

/* モード切替ボタンここまで*/

/* 模範解答の赤文字 */
.red_word{
	color: red;
	font-weight: bold;
	letter-spacing: 3px;
}

/* 問題数表示部分（解答入力画面) */
.ans_status {
	margin:auto;
	margin-top:30px;
	margin-bottom:30px;
	width:300px;
	padding:5px;
	background-color:#B22222;
	color:#FFFFFF;
	text-align:center;
}
#ans_box{
	display: inline-block;
}
#ans_box li{
	float: left;
	padding: 5px;
	padding-left: 0;
	list-style: none;
}
#ans_box a{
	text-decoration: none;
}
.reset{
  position: static;
}

div.ans{
	padding-bottom:200px;
}
div.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

li{
	list-style: none;
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
}

.modalWrapper {
  position: absolute;
  top: 85%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 90%;
  max-width: 600px;
  height: 200px;
  padding: 10px 30px;
  background-color: #fff;
  border: solid 10px #c0c0c0;
  border-bottom: solid 30px #c0c0c0;
}

.closeModal {
	font-weight: bold;
  position: absolute;
  top: 102%;
  right: 48%;
  text-decoration: underline;
  cursor: pointer;
}
.modal_button{
	border: 0px;
}

/* 汎用ボタン */
.btn {
	border-radius: 2px;
    text-align: center;
    cursor: pointer;
    border: 0px solid #000000;
    opacity: 1.0;
}

.btn:disabled {
	background: #bababa;
	border-color: #bababa;
    color: #757575;
	cursor: default;
}

.btn-normal {
    width: 190px;
    height: 35px;
    font-size: 14px;
    background-color: #4aa0f9;
    color: #ffffff;
}
.btn-normal:hover {
	opacity: 0.7;
}
.btn-normal:disabled {
	opacity: 1.0;
}

.btn-large {
	width: 200px;
    height: 50px;
    font-size: 20px;
    background-color: #FF5722;
    color: #ffffff;
   	font-weight: bold;
    border: 2px solid #FF5722;
    letter-spacing: 2px;
}
.btn-large:hover {
	opacity: 0.85;
}
.btn-large:disabled {
	opacity: 1.0;
}