@charset "UTF-8";

#main {
	color:#666;
}

	#main .section {
		border-radius:20px;
		border:6px solid #229def;
		background:#fff;
	}

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

	#main .button a {
		display:inline-block;
		position:relative;
		padding:10px 15%;
		border-radius:6px;
		color:#fff;
		font-weight:bold;
	}
	
		.pc #main .button a:hover {
			left:1px;
			margin-top:3px;
			color:#eaf3f8;
			border-width:3px;
			background-color:#2d9feb;
		}

			#question li.test .button a {
				font-size: 23px;
				border:3px solid #1280d4;
				border-right-width:6px;
				border-bottom-width:6px;
				background:#fff115;
				color: #1365a4;
			}

			#question li.trial .button a {
				font-size: 23px;
				border:3px solid #167506;
				border-right-width:6px;
				border-bottom-width:6px;
				background:#fff115;
				color: #167506;
			}

			#question li.quiz .button a {
				font-size: 23px;
				border:3px solid #7a510b;
				border-right-width:6px;
				border-bottom-width:6px;
				background:#fff115;
				color: #7a510b;
			}

			#question li.test .button a:hover {
				left:1px;
				margin-top:3px;
				color:#1365a4;
				border-width:3px;
				background-color:#e3d60c;
			}

			#question li.trial .button a:hover {
				left:1px;
				margin-top:3px;
				color:#167506;
				border-width:3px;
				background-color:#e3d60c;
			}

			#question li.quiz .button a:hover {
				left:1px;
				margin-top:3px;
				color:#7a510b;
				border-width:3px;
				background-color:#e3d60c;
			}

@media screen and (min-width:961px) {
	
	#main .button a {
		font-size:16px;
	}
	
}
	
@media screen and (max-width:960px) {
	
	#main .button a {
		font-size:16px;
	}
	
}

/*-------------------------------------------------------------------------
	intro
/*-----------------------------------------------------------------------*/
#intro {
	border-radius:10px;
	border:5px solid #229def;
	background:#f4fbff;
	text-align: center;
	padding: 30px 0;
	width: 78%;
	margin: 0 auto;
	margin-bottom:60px;
}

	#intro p {
		font-size: 16px;
		line-height: 26px;
	}

		#intro p span{
			color: #1986ce;
			font-size: 120%;
			font-weight: bold;
		}

@media screen and (max-width:960px) {
	
	#intro {
		width: 100%;
		margin-bottom:30px;
	}

		#intro p {
			padding: 0 30px;
		}
	
}

/*-------------------------------------------------------------------------
	question
/*-----------------------------------------------------------------------*/

	#question li {
		float: left;
		font-size: 16px;
		text-align: left;
		width: 31%;
		margin-right: 30px;
	}

	#question li:last-child {
		margin-right: 0;
	}

	#question li span {
		font-size: 120%;
		font-weight: bold;
	}

	#question li.test {
		color: #0568b4;
	}

	#question li.trial {
		color: #167506;
	}

	#question li.quiz {
		color: #84590f;
	}

@media screen and (max-width:960px) {
	
	#question li {
		width: 100%;
		margin-bottom: 30px;
	}
	
}

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

#question .question_list {
	position:relative;
	max-width:300px;
	border-radius:50%;
	border:5px solid #fff;
	margin-bottom: 30px;
}

	#question .test .question_list {
		background: #4cb7fd;
		box-shadow:0 0 0 6px #4cb7fd;
	}

	#question .trial .question_list {
		background:#55c927;
		box-shadow:0 0 0 6px #55c927;
	}

	#question .quiz .question_list {
		background: #f89e1c;
		box-shadow:0 0 0 6px #f89e1c;
	}

@media screen and (max-width:960px) {

#question {
	width: 100%;
}

#question li {
	margin-bottom: 30px;
}
	
	#question .question_list {
		margin: 0 auto;
		position:relative;
		max-width:350px;
		border-radius:50%;
		border:5px solid #fff;
		margin-bottom: 30px;
	}
	
}

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

#question .question_list:after {
	display:block;
	padding-top:100%;
	content:"";
}

	#question .question_list .wrap {
		position:absolute;
		/* left:0; */
		/* top:0; */
		width:100%;
		height:100%;
		padding:0;
	}
	
	#question .question_list .content {
		position:relative;
		top:16%;
		/*width:100%;*/
		max-width:440px;
		margin:0 auto;
	}
		
		#question .question_list .content .title {
			width:80%;
			max-width:385px;
			margin: 20px auto 15px auto;
		}

			#question .quiz .question_list .content .title {
				width:80%;
				max-width:385px;
				margin:30px auto 30px auto;
			}
		
			#question .question_list .content .title img  {
				width:100%;
			}

			#question .question_list .content .button {
				text-align: center;
			}