@charset "shift_jis";

/* ======================================================
	* PC
====================================================== */
@media print,screen and (min-width: 751px) {

	/* ------------------------------------------------------
	 * contents
	------------------------------------------------------ */
	[data-contents="quiz"] .icon-heading-lv2 {
		margin-bottom: 25px;
	}
	[data-contents="quiz"] > :first-child {
		margin-top:50px !important;
	}

	/* ------------------------------------------------------
	 * contents common
	------------------------------------------------------ */
	/* ----- text ----- */
	.text-em {
		font-weight: bold;
	}


	/* ----- box-question ----- */
	.box-question {
		margin-top:60px;
		padding:40px;
		position:relative;
		z-index:0;
	}
	.box-question:before,
	.box-question:after {
		background: url("../../inschool/img/cmn_navi_ic01.png") no-repeat;
		content:"";
		position:absolute;
		z-index:-1;
	}
	.box-question:before{
		background-position: 0 0;
		left: 50px;
		height: 67px;
		top: 28px;
		width: 38px;
	}
	.box-question:after{
		background-position: -38px 0;
		height: 52px;
		top: 32px;
		right: 35px;
		width: 101px;
	}
	.box-question .text-question {
		margin-left:100px;
		margin-right:100px;
	}
	.box-question .character-layout .character_detail {
		background-color:#fff;
		margin-top:45px;
		padding:18px 20px;
		width:750px;
	}
	.box-question .character-layout .character_detail > p {
		display:table-cell;
		vertical-align:middle;
	}
	.box-question .character-layout .character_detail > .question_num,
	.box-question .character-layout .character_detail > .answer_num {
		min-width:60px;
	}
	.box-question .character-layout .character_detail > .question_num span,
	.box-question .character-layout .character_detail > .answer_num span {
		border-radius:50%;
		display:table-cell;
		font-size:2.2rem;
		font-weight:bold;
		height:60px;
		line-height:60px;
		text-align:center;
		width:60px;
	}
	.box-question .character-layout .character_detail > .question_num span {
		background-color:#3399cc;
		color:#fff;
	}
	.box-question .character-layout .character_detail > .answer_num span {
		background-color:#e9f6ff;
		color:#3399cc;
	}
	.box-question .character-layout .character_detail > .question_num + p,
	.box-question .character-layout .character_detail > .answer_num + p {
		font-size:1.8rem;
		line-height:1.5;
		padding-left:25px;
	}
	.box-question .character-layout .character_detail > .question_num + p {
		font-weight:bold;
	}
	.box-question .answer-choice {
		margin-top:30px;
	}
	.box-question .answer-choice .btn-list {
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.box-question .answer-choice .btn-list li {
		border-radius:5px;
		height:110px;
		width:354px;
	}
	.box-question .answer-choice .btn-list li a {
		border:2px solid #85c4ec;
		background-color:#fff;
		border-radius:5px;
		color:#333;
		display:table;
		height:100%;
		font-weight:bold;
		line-height:1.5;
		overflow:hidden;
		padding-right:60px;
		position:relative;
		width:100%;
	}
	.box-question .answer-choice .btn-list li a:after {
		background: url("../../inschool/img/cmn_ic01.png") no-repeat;
		background-position:-26px 0;
		position: absolute;
		content: "";
		height:26px;
		margin-top:-13px;
		top: 50%;
		right: 10px;
		width:26px;
	}
	.box-question .answer-choice .btn-list li a:hover {
		background-color:#e9f6ff;
	}
	.box-question .answer-choice .btn-list li a > * {
		display:table-cell;
		vertical-align:middle;
	}
	.box-question .answer-choice .btn-list li a > .choice_num {
		color:#3399cc;
		font-size:3.0rem;
		padding-left:15px;
		position:relative;
		text-align:center;
		width:65px;
		z-index:0;
	}
	.box-question .answer-choice .btn-list li a > .choice_num:after {
		background-color:#e9f6ff;
		border-radius:50%;
		content:"";
		display:block;
		height:160px;
		position:absolute;
		top:-25px;
		right:-20px;
		width:160px;
		z-index:-1;
	}
	.box-question .answer-choice .btn-list li a > .choice_text {
		padding-left:30px;
	}


	/* ------------------------------------------------------
	 * answer
	------------------------------------------------------ */
	.box-question.answer {
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.box-question.answer .icon-answer {
		margin-top:25px;
		padding-left:30px;
		padding-right:30px;
	}
	.box-question.answer .text-answer {
		width:750px;
	}
	.box-question.answer .character-layout .character_img {
		padding-right:30px;
		width:120px;
	}
	.box-question.answer .character-layout .character_detail {
		margin-top:25px;
		width:600px;
	}
	.box-question.answer .character-layout .character_detail > .answer_num + p b {
		color:#3399cc;
	}
	.box-question.answer .text-answer .character-layout + p {
		margin-top:25px;
	}
	.box-question.answer .text-answer .link-text {
		margin-top:10px;
	}
	.box-question.answer .text-answer .btn.next {
		margin-top:40px;
		margin-left:70px;
	}
	.box-question.answer .text-answer .btn.next a {
		margin:0;
	}

}

/* ======================================================
 * PC Media Queries
====================================================== */
/***
@media screen and (min-width: 1921px) {
}
@media screen and (min-width: 751px) and (max-width: 1920px) {
}
***/

/* ======================================================
 * SP
====================================================== */
@media only screen and (max-width: 750px) {

	/* ------------------------------------------------------
	 * contents
	------------------------------------------------------ */
	[data-contents="quiz"] .icon-heading-lv2 {
		margin-bottom: 15px;
	}
	[data-contents="quiz"] > :first-child {
		margin-top:25px !important;
	}

	/* ------------------------------------------------------
	 * contents common
	------------------------------------------------------ */
	/* ----- text ----- */
	.text-em {
		font-weight: bold;
	}


	/* ----- box-question ----- */
	.box-question {
		margin-top:25px;
		padding:20px 15px 40px;
	}
	.box-question .character-layout .character_img {
		padding-right:15px;
		width:73px;
	}
	.box-question .character-layout .character_detail {
		padding:12px;
		background-color:#fff;
	}
	.box-question .character-layout .character_detail > p {
		display:table-cell;
		vertical-align:top;
	}
	.box-question .character-layout .character_detail > .question_num,
	.box-question .character-layout .character_detail > .answer_num {
		min-width:45px;
	}
	.box-question .character-layout .character_detail > .question_num span,
	.box-question .character-layout .character_detail > .answer_num span {
		border-radius:50%;
		display:table-cell;
		font-size:1.7rem;
		font-weight:bold;
		height:45px;
		line-height:45px;
		text-align:center;
		width:45px;
	}
	.box-question .character-layout .character_detail > .question_num span {
		background-color:#3399cc;
		color:#fff;
	}
	.box-question .character-layout .character_detail > .answer_num span {
		background-color:#e9f6ff;
		color:#3399cc;
	}
	.box-question .character-layout .character_detail > .question_num + p,
	.box-question .character-layout .character_detail > .answer_num + p {
		font-size:1.6rem;
		line-height:1.5;
		padding-left:10px;
	}
	.box-question .character-layout .character_detail > .question_num + p {
		font-weight:bold;
	}
	.box-question .answer-choice {
		margin-top:30px;
	}
	.box-question .answer-choice .btn-list li {
		border-radius:5px;
		margin-top:10px;
		width:auto;
	}
	.box-question .answer-choice .btn-list li:first-child {
		margin-top:0;
	}
	.box-question .answer-choice .btn-list li a {
		border:2px solid #85c4ec;
		background-color:#fff;
		border-radius:5px;
		color:#333;
		display:table;
		font-weight:bold;
		height:90px;
		line-height:1.3;
		overflow:hidden;
		padding-right:30px;
		position:relative;
		text-decoration:none;
		width:100%;
	}
	.box-question .answer-choice .btn-list li a:after {
		background: url("../../inschool/img/cmn_ic01_sp.png") no-repeat;
		background-position:-21px 0;
		background-size:87px 181px;
		position: absolute;
		content: "";
		height:20px;
		margin-top:-10px;
		top: 50%;
		right: 10px;
		width:20px;
	}
	.box-question .answer-choice .btn-list li a:hover {
		background-color:#e9f6ff;
	}
	.box-question .answer-choice .btn-list li a > * {
		display:table-cell;
		vertical-align:middle;
	}
	.box-question .answer-choice .btn-list li a > .choice_num {
		color:#3399cc;
		font-size:2.4rem;
		padding-left:10px;
		position:relative;
		text-align:center;
		width:60px;
		z-index:0;
	}
	.box-question .answer-choice .btn-list li a > .choice_num:after {
		background-color:#e9f6ff;
		border-radius:50%;
		content:"";
		height:120px;
		position:absolute;
		top:50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		right:-15px;
		width:120px;
		z-index:-1;
	}
	.box-question .answer-choice .btn-list li a > .choice_text {
		padding-left:30px;
	}


	/* ------------------------------------------------------
	 * answer
	------------------------------------------------------ */
	.box-question.answer {
		padding-top:40px;
	}
	.box-question.answer .icon-answer {
		margin-left:auto;
		margin-right:auto;
		width:43.47%;
	}
	.box-question.answer .character-layout .character_detail {
		margin-top:20px;
	}
	.box-question.answer .character-layout .character_detail > .answer_num + p b {
		color:#3399cc;
	}
	.box-question.answer .text-answer .character-layout + p {
		margin-top:25px;
	}
	.box-question.answer .text-answer .link-text {
		margin-top:15px;
	}
	.box-question.answer .text-answer .btn.next {
		margin-top:25px;
	}

}

/* ======================================================
 * SP Media Queries
====================================================== */
/***
@media only screen and (min-width: 320px) and (max-width: 750px) {
}
@media only screen and (max-width: 736px) {
}
@media only screen and (max-width: 667px) {
}
@media only screen and (max-width: 640px) {
}
@media only screen and (max-width: 568px) {
}
@media only screen and (max-width: 480px) {
}
@media only screen and (max-width: 414px) {
}
@media only screen and (max-width: 375px) {
}
@media only screen and (max-width: 360px) {
}
@media only screen and (max-width: 320px) {
}
***/


/* ======================================================
 * Print
====================================================== */
@media print {
}