@charset "UTF-8";

@import "../../../files/css/common/layout.css";
@import "../../../files/css/common/base.css";

/*-------------------------------------------------------------------------
	Init
/*-----------------------------------------------------------------------*/
#all.loading {
	background:url(../../../files/img/common/loading.gif) no-repeat center 260px;
}

#start {
	display:none;
	text-align:center;
}

#main .section {
	display:none;
	max-width:720px;
	margin:0 auto;
	padding:20px 20px 40px 20px;
	font-size:24px;
	text-align:center;
}

	#main .section .content .title {
		display:inline-block;
		position:relative;
		top:-55px;
		margin-bottom:-5px;
	}

@media screen and (max-width:960px) {
	
	#main .section {
		margin:0 15px;
		font-size:18px;
	}

}

/*-------------------------------------------------------------------------
	Main Header
/*-----------------------------------------------------------------------*/
#main-header {
	display:none;
}
	
	#main-header .subject {
		width:20%;
		max-width:110px;
		margin-bottom:60px;
	}
	
		#main-header .subject img {
			width:100%;
			height:auto;
		}

/*-------------------------------------------------------------------------
	button
/*-----------------------------------------------------------------------*/

		#main .button a {
			display:inline-block;
			position:relative;
			padding:12px 10%;
			border-radius:6px;
			border:3px solid #2f800f;
			border-right-width:6px;
			border-bottom-width:6px;
			background:#55c927;
			color:#fff;
			font-size:16px;
			font-weight:bold;
		}

		#main .button.test-button a {
			border:3px solid #1280d4;
			border-right-width:6px;
			border-bottom-width:6px;
			background:#41abf1;
		}

		#main .button.trial-button a {
			border:3px solid #2f800f;
			border-right-width:6px;
			border-bottom-width:6px;
			background:#55c927;
		}


		#main .button.quiz-button a {
			border:3px solid #946004;
			border-right-width:6px;
			border-bottom-width:6px;
			background:#f89e1c;
		}
	

			
@media screen and (max-width:960px) {
	
	#main-header .subject {
		margin-bottom:12%;
	}

		#main #othres .button a {
			padding:5%;
		}

}

/*-------------------------------------------------------------------------
	Start Header
/*-----------------------------------------------------------------------*/

#start-header:after {
	display:block;
	padding-top:100%;
	content:"";
}

	#start-header .wrap {
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		padding:0;
	}
	
	#start-header .content {
		position:relative;
		top:16%;
		width:100%;
		max-width:440px;
		margin:0 auto;
	}
		
		#start-header .content .title {
			width:90%;
			max-width:385px;
			margin:0 auto 15px auto;
		}
		
			#start-header .content .title img  {
				width:100%;
			}

		#start-header .content .form {
			color:#fff;
		}
	
			#start-header .content .form .name {
				margin-bottom:10px;
				font-size:18px;
				line-height:1.2;
			}
			
				#start-header .content .form .name span {
					display:block;
					font-size:.8em;
				}
	
			#start-header .content .form .input {
				width:60%;
				padding:8px;
				border:solid 1px #ccc;
				background:#fff;
				color:#aaa;
				font-size:18px;
			}
			
			#start-header .content .form .input.focus {
				color:#333;
			}
				
@media screen and (max-width:480px) {
	
	#start-header .content {
		top:12%;
	}
	
		#start-header .content .title {
			margin-bottom:10px;
		}
		
			#start-header .content .form .name {
				font-size:14px;
			}
	
}

/*-------------------------------------------------------------------------
	Start Content
/*-----------------------------------------------------------------------*/
#start-content {
}

	#start-content .summary {
		margin-bottom:60px;
		font-size:26px;
		font-weight:bold;
		line-height:1.2;
	}

		#start-content .summary strong {
			margin:0 2px;
			font-size:1.2em;
		}
		
		#start-content .summary a {
			display:inline-block;
			width:30%;
			max-width:140px;
			margin:0 2px;
		}
		
			#start-content .summary a img {
				width:100%;
			}
		
	#start-navi {
		width:100%;
		max-width:760px;
		margin:0 auto;
	}
			
				#start-navi .content h1 em {
					margin-left:5px;
					color:#fff115;
				}
				
			#start-navi .content .text,
			#start-navi .content .attention {
				padding:0 20px;
				font-size:16px;
			}
				
			#start-navi .content .text {
				margin-bottom:15px;
				font-weight:bold;
			}
			
			#start-navi .content ul {
				margin-bottom:15px;
				text-align:center;
			}
			
				#start-navi .content ul li {
					display:inline-block;
					margin:10px;
					cursor:pointer;
				}
				
				#start-navi .content ul li.none {
					opacity:.2;
					cursor:default;
				}
						
			#start-navi .content .attention {
				margin-bottom:20px;
			}
			
	#start .button {
		margin:0 auto 20px auto;
	}
		
	#start aside {
		color:#000;
		font-size:12px;
	}
	
		#start aside br {
			display:none;
		}

#othres {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 30px;
	max-width: 760px;
}

	#othres li {
		width: 50%;
		float: left;
		text-align: center;
	}
		
		#othres .button a {
			display:inline-block;
			position:relative;
			border-radius:6px;
			width: 250px;
		}

		#othres .button.quiz-button {
			display:inline-block;
			position:relative;
			border-radius:6px;
		}

@media screen and (max-width:960px) {
	
	#start-content .summary {
		font-size:16px;
	}
	
	#start-navi .content h1 {
		font-size:16px;
	}
	
		#start-navi .content .text,
		#start-navi .content .attention {
			font-size:12px;
		}
	
		#start aside br {
			display:block;
		}
	
	#othres ul {
		width: 100%;
	}

	#othres li {
		width: 100%;
		text-align: center;
		float: none;
	}

		/*#othres .button a,
		#othres .button.quiz-button {
			width: 70%;
		}*/
}

/*-------------------------------------------------------------------------
	Question
/*-----------------------------------------------------------------------*/
#question {
}
	
	#question-content {
	}
	
		#question-content .question {
			display:none;
			margin-bottom:30px;
		}
			
			#question-content .question b {
				text-decoration:underline;
			}
			
			#question-content .question .q {
				position:relative;
				top:-35px;
				margin-bottom:-15px;
			}
			
				#question-content .question .q small {
					display:block;
					margin-bottom:10px;
					color:#333;
					font-size:.83em;
				}
					
				#question-content .question .q strong {
					display:inline-block;
					color:#f31443;
				}

					
			#question-content .question .a {
				display:inline-block;
				margin:0 auto;
			}
			
				#question-content .question .a li {
					margin-bottom:12px;
					padding:3px 10px 3px 45px;
					border-radius:5px;
					background:no-repeat 10px center;
					color:#333;
					font-size:1.15em;
					text-align:left;
					line-height:1.2;
					cursor:pointer;
				}
				
				#question-content .question .a li.none {
					display:none;
				}
				
				#question-content .question .a li:hover {
					background-color:#e7f6ff;
				}
				
				#question-content .question .a li.active {
					background-color:#c2e2f8;
				}

				#question-content .question .a span {
					text-decoration: underline;
				}

/*-------------------------------------------------------------------------
	Result
/*-----------------------------------------------------------------------*/
#result {
}

	#result-content {
		margin-bottom:100px;
	}

		#result-content .name,
		#result-content .point,
		#result-content .time {
			font-weight:bold;
		}
	
		#result-content .name {
			position:relative;
			top:-35px;
			margin-bottom:-35px;
			font-size:1.1em;
		}
		
		#result-content .point {
			font-size:1.2em;
			line-height:1.2;
		}
		
			#result-content .point span {
				margin-right:5px;
				font-size:2em;
			}
			
		#result-content .time {
			margin-bottom:30px;
			color:#333;
			font-size:.77em;
			letter-spacing:.2em;
		}
		
		#check-answers {
		}
		
			#check-answers h1 {
				margin-bottom:30px;
				font-weight:bold;
			}
			
			#check-answers .paper {
				margin-bottom:80px;
				color:#333;
				text-align:left;
			}
			
				#check-answers .paper .header {
					height:40px;
					margin-bottom:30px;
					padding:15px 30px;
					border-radius:10px;
				}
				
				#check-answers .paper.right .header {
					background:#fff2f6;
				}
				
				#check-answers .paper.wrong .header {
					background:#f2f8fd;
				}
				
					#check-answers .paper .header .number,
					#check-answers .paper .header ul {
						float:left;
					}
					
					#check-answers .paper .header .number,
					#check-answers .paper .header ul li {
						line-height:40px;
					}
					
					#check-answers .paper .header .number {
						margin-right:30px;
						font-weight:bold;
					}
					
						#check-answers .paper .header ul li {
							float:left;
							margin-right:15px;
							font-size:.85em;
						}
						
							#check-answers .paper .header ul li span {
								font-size:1.1em;
							}
							
					#check-answers .paper .header .icon {
						float:right;
						width:40px;
						height:40px;
						background:no-repeat left top;
						background-size:100%;
					}
					
				#check-answers .paper .question {
					margin:0 30px 30px 30px;
					padding-bottom:20px;
					border-bottom:1px dotted #bbb;
					font-size:.77em;
				}

					#check-answers .paper .question small {
						display: block;
					}
				
					#check-answers .paper .question dt {
						margin-bottom:10px;
						font-weight:bold;
					}
					
						#check-answers .paper .question dd {
							margin-bottom:5px;
							padding-left:2em;
							background:no-repeat left center;
							background-size:1em;
							font-size:.85em;
							line-height:1.6;
						}
						
						#check-answers .paper .question dd.none {
							display:none;
						}
					
							#check-answers .paper .question dd img {
								/*height:30px;*/
								vertical-align: top !important;
								max-height: 100px;
							}
						
				#check-answers .paper .explanation {
					margin:0 30px;
					font-size:.77em;
				}
				
					#check-answers .paper .explanation dt {
						margin-bottom:10px;
						color:#1280d4;
						font-weight:bold;
					}
					
					#check-answers .paper .explanation dd {
						padding-bottom: 40px;
						font-size:.85em;
						text-align:justify;
						text-justify:inter-ideograph;
						border-bottom: 1px solid #aaa;
					}
					
	#result .buttons {
	}
	
		#result .buttons ul {
			margin-bottom:10px;
		}
	
			#result .buttons ul li {
				overflow:hidden;
				display:inline-block;
				width:300px;
				margin-bottom:5px;
			}
			
				#result .buttons ul li a {
					width:220px;
				}
				
@media screen and (max-width:960px) {
	
	#check-answers .paper .header {
		height:20px;
		padding:10px 20px;
		font-size:14px;
	}
	
	#check-answers .paper .header .number,
	#check-answers .paper .header ul li {
		line-height:20px;
	}
	
	#check-answers .paper .header .number {
		margin-right:15px;
	}
	
	#check-answers .paper .header ul li {
		margin-right:8px;
	}
	
	#check-answers .paper .header .icon {
		width:20px;
		height:20px;
	}
	
	#result .buttons ul li {
		width:240px;
	}
	
	#result .buttons ul li a {
		width:auto;
	}

}