.mainvisual {
		position: relative;
		max-width: 1280px;
		margin: 0 auto;
}

.mainvisual h1 {
		background: url(/wakaru/kentei/img/2018/ind_bg_01.png) no-repeat center center;
		background-size: auto;
		height: 300px;
		margin-top: -30px;
}

.mainvisual h1 img {
		position: relative;
		top: 40px;
		left: 50%;
		width: 32%;
		max-width: 322px;
		transform: translateX(-160px);
}

.mainvisual p {
		position: absolute;
		top: 180px;
		left: 50%;
		min-width: 480px;
		transform: translateX(-130px);
}

@media screen and (max-width: 768px) {
		.mainvisual h1 {
				height: 50vw;
				background: url(/wakaru/kentei/img/2018/ind_bg_01_sp.png) no-repeat top center;
				background-size: cover;
		}
		.mainvisual h1 img {
				position: relative;
				top: 16.53vw;
				left: 40.15vw;
				transform: none;
				width: 54.31vw;
		}
		.mainvisual p {
				position: relative;
				border: 0;
				left: 0;
				transform: none;
				padding: 12px 3%;
				top: 0;
				font-size: 3.2vw;
				background: #fffb96;
				background-size: 39.06vw;
				min-width: auto;
		}
		.mainvisual p:before {
				content: "";
				background: url(/wakaru/kentei/img/2018/ind_ico_01_sp.png) no-repeat bottom right -2vw;
				position: absolute;
				width: 35.06vw;
				height: 31.56vw;
				bottom: 0;
				right: 0;
				background-size: contain;
		}
}

@media screen and (min-width: 1020px) {
		.mainvisual h1 img {
				margin-left: 1%;
		}
}

/*content*/
.content {
		max-width: 1000px;
		margin: 30px auto 60px;
}

@media screen and (max-width: 768px) {
		.content {
				max-width: 100%;
		}
		.content_title {
				padding: 0 15px;
		}
}

.quiz {
		margin-top: 70px;
		display: none;
}

.quiz.s_active {
		display: block;
}

.quiz_title {
		text-align: center;
		margin-top: 30px;
}

@media screen and (max-width: 768px) {
		.quiz {
				margin-top: 35px;
		}
}

.question {
		overflow: hidden;
		display: table;
		width: 100%;
		height: 122px;
		table-layout: fixed;
}

.question_item {
		display: table-cell;
		font-size: 1.57em;
		color: #fff;
		width: 122px;
		text-align: center;
		font-weight: bold;
		z-index: 0;
		position: relative;
		vertical-align: middle;
}

.question_item::before {
		content: '';
		display: block;
		width: 122px;
		height: 122px;
		background: #2aa477;
		border-radius: 50%;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
}

.question_item > span {
		position: relative;
		z-index: 10;
}

.question_num {
		font-size: 1.5em;
}

.question_text {
		font-size: 1.57em;
		display: table-cell;
		padding: 0 18px;
		vertical-align: middle;
}

@media screen and (max-width: 768px) {
		.question {
				display: block;
				height: auto;
		}
		.question_item {
				display: block;
				width: 84px;
				height: 84px;
				font-size: 1.07em;
				padding-top: 24px;
				margin-right: auto;
				margin-left: auto;
		}
		.question_item::before {
				width: 84px;
				height: 84px;
		}
		.question_num {
				font-size: 1.6em;
		}
		.question_text {
				display: block;
				font-size: 4.375vw;
				padding: 0;
				margin-top: 16px;
		}
}

.answer {
		margin-top: 40px;
		margin-right: auto;
		margin-left: auto;
		overflow: hidden;
		max-width: 462px;
}

.answer_btn {
		width: 210px;
		height: 125px;
		display: block;
		background: #fff;
		border: 4px solid #2aa477;
		border-radius: 7px;
		float: left;
		cursor: pointer;
}

@media screen and (max-width: 768px) {
		.answer_btn {
				width: 45.7%;
		}
}

.answer_btn:hover {
		background-color: #2aa477;
}

.answer_btn-circle {
		position: relative;
}

.answer_btn-circle::before {
		width: 60px;
		height: 60px;
		background-image: url(/wakaru/kentei/img/2018/ind_ico_02.png);
		background-size: 60px 120px;
		position: absolute;
		content: '';
		background-repeat: no-repeat;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
		.answer_btn-circle::before {
				width: 35px;
				height: 35px;
				background-size: 35px 70px;
		}
}

.answer_btn-circle:hover::before {
		background-position: bottom;
}

.answer_btn-cross {
		position: relative;
}

.answer_btn-cross::before {
		width: 44px;
		height: 44px;
		background-image: url(/wakaru/kentei/img/2018/ind_ico_03.png);
		background-size: 44px 88px;
		position: absolute;
		content: '';
		background-repeat: no-repeat;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
		.answer_btn-cross::before {
				width: 26px;
				height: 26px;
				background-size: 26px 52px;
		}
}

.answer_btn-cross:hover::before {
		background-position: bottom;
}

.answer_btn + .answer_btn {
		margin-left: 4%;
}

@media screen and (max-width: 768px) {
		.answer_btn + .answer_btn {
				margin-left: 8.3%;
		}
}

.result {
		text-align: center;
		display: none;
}

.result_text {
		font-size: 2.92em;
		line-height: 1.1;
}

@media screen and (max-width: 768px) {
		.result_text {
				font-size: 8.75vw;
		}
}

.result_fontS {
		font-size: 0.58em;
}

.result_fontL {
		font-size: 1.48em;
}

.result_fontM {
		font-size: 1.42em;
}

@media screen and (max-width: 768px) {
		.result_fontM {
				font-size: 1.2em;
		}
}

.result_level {
		width: 505px;
		height: 94px;
		text-align: center;
		background: url(/wakaru/kentei/img/2018/ind_bg_02.png) no-repeat right center;
		margin: 0 auto;
		position: relative;
		margin-top: 37px;
		display: table;
		vertical-align: middle;
}

@media screen and (max-width: 768px) {
		.result_level {
				max-width: 597px;
				width: 100%;
				height: 0;
				background: url(/wakaru/kentei/img/2018/ind_bg_02_sp.png) no-repeat center center;
				background-size: contain;
				display: table;
				text-align: center;
		}
}

.result_levelText {
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		height: 94px;
		padding-right: 77px;
}

@media screen and (max-width: 768px) {
		.result_levelText {
				height: 0;
				position: relative;
				text-align: center;
				vertical-align: middle;
				display: table-cell;
				font-size: 4.37vw;
				padding-top: 3.2%;
				padding-bottom: 3.2%;
				padding-right: 23%;
		}
}

.result_list {
		overflow: hidden;
		margin-top: 40px;
		margin-right: auto;
		margin-left: auto;
		max-width: 660px;
}

.result_listitem {
		max-width: 320px;
		float: left;
}

@media screen and (max-width: 768px) {
		.result_listitem {
				width: 48.3%;
		}
}

.result_listitem:hover {
		opacity: 0.7;
}

.result_listitem + .result_listitem {
		margin-left: 2%;
}

@media screen and (max-width: 768px) {
		.result_listitem + .result_listitem {
				margin-left: 3.4%;
		}
}

.mordal_overlay {
		position: fixed;
		background: rgba(0, 0, 0, 0.8);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 101;
		display: none;
}

.mordal_window {
		width: 100%;
		height: 100%;
		padding: 10.84% 16.67%;
}

@media screen and (max-width: 768px) {
		.mordal_window {
				padding: 10.84% 3.12%;
		}
}

.mordal_area {
		max-width: 800px;
		height: 600px;
		background: #fff;
		margin: auto;
		z-index: 102;
		overflow: hidden;
		padding: 60px;
		position: relative;
}

@media screen and (max-width: 768px) {
		.mordal_area {
				padding: 50px 30px;
				height: 87vh;
		}
}

@media screen and (max-height: 750px) {
		.mordal_window {
			padding-top: 5%;
			padding-bottom: 5%;;
		}
		.mordal_area {
				padding: 50px 30px;
				height: 87vh;
		}
}

.mordal_cont {
		height: 80%;
		overflow: auto;
		display: none;
}

.mordal_cont.s_active {
		display: block;
}

.comment_titel {
		font-size: 4.71em;
		text-align: center;
		border-bottom: 3px solid #2aa477;
}

@media screen and (max-width: 768px) {
		.comment_titel {
				font-size: 3.29em;
		}
}

.comment_answer {
		position: relative;
		display: none;
		color: #2aa477;
}

.comment_answer.s_active {
		display: inline-block;
}

.comment_text {
		font-size: 1.85em;
		padding-top: 20px;
		line-height: 1.4;
		min-height: 240px;
		padding-bottom: 5%;
}

@media screen and (max-width: 768px) {
		.comment_text {
				min-height: 140px;
				font-size: 4.37vw;
		}
}

.comment_btn {
		text-align: center;
		cursor: pointer;
		position: absolute;
		display: inline-block;
		bottom: 5%;
		left: 50%;
		transform: translateX(-50%);
		display: none;
}

.comment_btn.s_active {
		display: inline-block;
}

.comment_btn:hover {
		opacity: 0.7;
}

@media screen and (max-width: 768px) {
		.comment_btn {
				max-width: 290px;
				margin: 35px auto 0;
		}
}

/*Utility*/
.color01 {
		color: #2aa477;
}

.liquid {
		width: 100%;
}