@charset "utf-8";

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

@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#sec_quiz{
  font-size: 3.7vw;
}

#sec_quiz li{
	margin: 0 auto 6vw auto;
	padding: 0;
}

.pc{display:none!important;}
.sp{display:block!important;}


/*header/footer
----------------------------------------------------*/
.contents{
	width: 90%;
	padding: 6vw 0 8vw 0;
}


/*home
----------------------------------------------------*/
.box_main_home{
	margin-bottom: 6vw;
	display: block;
}

#sec_quiz .box_main_home h1{
	margin-bottom: 6vw;
}

#sec_quiz .box_main_home .illust{
	position: relative;
	right: 0;
	width: 100%!important;
	margin-top: 5vw;
}

#sec_quiz .box_main_home .illust img{
	width: 32vw;
	margin: -6vw 28vw 0 auto;
}

#sec_quiz .box_main_home .illust .box_fukidashi{
	width: 60vw;
	margin: 0 auto;
	padding: 4vw 0 11vw 0;
	font-size: 3.4vw;
}

.kakomi{
	padding: 2vw 4vw;
}


/*question
----------------------------------------------------*/
.contents .illust{
	position: absolute;
	top: 0;
	right: 2vw;
	width: 26vw!important;
	margin: 6vw auto 0 auto;
}

.p-quiz-ttl{
	margin: 8vw auto;
}

.p-quiz-ttl span{
	font-size: 10vw;
}

.p-quiz-ttl span:after{
	border-top: 4vw solid transparent;
	border-left: 4vw solid transparent;
	border-right: 4vw solid #B4FDCC;
	border-bottom: 4vw solid #B4FDCC;
}

.box_q{
	position: relative;
	margin-bottom: 6vw;
	padding: 8vw 4vw;
	font-size: 3.7vw;
}

.box_q:before,
.box_q:after{
	width: 6vw;
	height: 6vw;	
}

.box_q:before{
	top: 0;
	left: 0;
	border-top: 3vw solid #9AF6F9;
	border-left: 3vw solid #9AF6F9;
	border-right: 3vw solid transparent;
	border-bottom: 3vw solid transparent;
}

.box_q:after{
	bottom: 0;
	right: 0;
	border-top: 3vw solid transparent;
	border-left: 3vw solid transparent;
	border-right: 3vw solid #EDAFFD;
	border-bottom: 3vw solid #EDAFFD;
}


/*choises
----------------------------*/
.p-quiz-choices{
	margin-bottom: 10vw;
	display: block;
}

.p-quiz-choices.home{
	display: block;
}

.p-quiz-choices li{
	height: 44vw;
}

.p-quiz-choices li:before{
	width: 9vw;
	height: 9vw;
}

.p-quiz-choices li button{
	height: 44vw;
	padding: 4vw;
	font-size: 4vw;
}

.p-quiz-choices.home li a{
	font-size: 7vw;
}

.p-quiz-choices li.maru,
.p-quiz-choices li.batsu{
	padding: 4vw!important;
	font-size: 4vw;
}

.p-quiz-choices li.maru{
	background: url("../img/bg_maru_gray.png") no-repeat center / 28vw;
}

.p-quiz-choices li.batsu{
	background: url("../img/bg_batsu_gray.png") no-repeat center / 28vw;
}

.p-quiz-choices li.maru:has(.quiz-label-user-choice){
	background: #FFF url("../img/bg_maru.png") no-repeat center / 28vw;
}

.p-quiz-choices li.batsu:has(.quiz-label-user-choice){
	background: #FFF url("../img/bg_batsu.png") no-repeat center / 28vw;
}

.p-quiz-choices li.maru:has(.quiz-label-user-choice):before,
.p-quiz-choices li.batsu:has(.quiz-label-user-choice):before{
	width: 12vw;
	height: 9vw;
}

.p-quiz-choices li.maru:has(.quiz-label-user-choice):after,
.p-quiz-choices li.batsu:has(.quiz-label-user-choice):after{
	width: 12vw;
	height: 9vw;
}

/*anime
-------------------*/
@keyframes bound {
	0% { opacity: 0; transform: scale(1); }
	50% { opacity: 1; transform: scale(0.9); }
	90% { opacity: 1; transform: scale(1); }
	96% { opacity: 1; transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}

.p-quiz-next{
	height: auto;
}

.p-quiz-next .js-quiz-prev{
	position: relative;
	left:auto;
	width: 70%;
	margin: 0 auto 6vw auto;
	padding: 2vw 10vw;
	background: #FFF url("../img/icon_link_back.png") no-repeat 8px center / 0.4em;
	font-size: 3.7vw;
	display: block;
}

.p-quiz-next .js-quiz-next{
	width: 70%;
	margin: 0 auto 6vw auto;
	padding: 2vw 10vw;
	background: #FFF url("../img/icon_link.png") no-repeat right 8px center / 0.4em;
	font-size: 3.7vw;
	display: block;
}


/*result
----------------------------------------------------*/
.box_result{
	margin: 6vw auto 12vw auto;
}

.box_result .ttl_result{
	margin-bottom: 2vw;
	font-size: 6vw;
}

.box_result .num_result{
	font-size: 6vw;
}

.box_result .num_result .all{
	font-size: 10vw;
}

.box_result .num_result .correct{
	margin: 0 2vw;
	padding: 0 5vw 4vw 5vw;
	font-size: 24vw;
}

#sec_quiz .illust_result{
	position: relative;
	top:auto;
	right:0;
	width: 60vw!important;
	margin: 0 auto 4vw auto;
}

#sec_quiz .illust_result img{
	width: 36vw;
	margin: -8vw auto 0 auto;
}

#sec_quiz .illust_result .box_fukidashi{
	width: 60vw;
	padding: 3vw 0 12vw 0;
	font-size: 3.7vw;
}

.q1,
.q2,
.q3,
.q4,
.q5{
	margin-bottom: 10vw;
}

.box_result_question{
	padding: 4vw;
	display: block;
}

.box_result_question .p-quiz-ttl{
	margin: 0 auto 6vw auto;
}

.box_result_question .box_q{
	padding: 5vw 8vw;
}

.box_result_comment{
	padding: 4vw;
	display: block;
}

.user-choice-correct,
.user-choice-incorrect{
	height: 44vw;
	margin-bottom: 6vw;
	padding: 4vw!important;
	font-size: 4vw;
}

.user-choice-correct{
	background: #FFF url("../img/bg_maru.png") no-repeat center / 28vw;
}

.user-choice-incorrect{
	background: #FFF url("../img/bg_batsu.png") no-repeat center / 28vw;
}

.user-choice-correct:before,
.user-choice-incorrect:before{
	width: 12vw;
	height: 9vw;
}

.user-choice-correct:after,
.user-choice-incorrect:after{
	width: 12vw;
	height: 9vw;
}


/*comment
----------------------------*/
.box_answer{
	margin-bottom: 8vw;
}

.box_answer h3,
.box_comment h3{
	width: 20vw;
}

.box_answer h3:before,
.box_comment h3:before{
	width: 5vw;
	height: 4vw;
}

.box_answer h3:after,
.box_comment h3:after{
	width: 5vw;
	height: 4vw;
}

.box_answer dl{
	margin-bottom: 0.5em;
	line-height: 1.6;
	grid-gap:3vw;
}

.box_answer dl dt {
	align-self: flex-start;
}

.box_answer dl dt.pt {
	padding-top: 0.6em;
}

.box_example{
	margin-top: 8vw;
}

.box_example h4{
	width: 100%;
	margin: 0 0 -1.2em -2vw;
	padding: 0.2em 0 0.3em 1.5em;
	background: url("../img/bg_ttl_example_sp.png") no-repeat left center / contain;
	font-size: 4vw;
	display: block;
}

.result01 .box_example h4{
	padding: 0.3em 0 0.5em 1.9em;
	background: url("../img/bg_ttl_example_check01_sp.png") no-repeat left center / contain;
}

.box_example h4 span{
	margin-left: -2em;
	padding: 0 32.8vw 1em 2.7vw;
	font-size: 3.2vw;
	text-align: right;
	display: block;
}

.result01 .box_example h4 span{
	padding: 0 25.5vw 1.3em 4vw;
	text-align: center;
	display: block;
}

.box_example .inner{
	padding: 8vw 4vw 5vw 4vw;
}

.box_example .inner:before,
.box_example .inner:after{
	width: 4vw;
	height: 6vw;
}

.box_example .inner p{
	word-break: break-all;
	clear: both;
}

.box_example .inner p span{
	float: left;
}

.box_example .inner a{
	display: block;
}

.box_example .inner span + a{
	width: calc(100% - 2.5em);
	display: inline-block;
}

.btn_pdf,
.btn_return{
	margin: 6vw auto;
	padding: 3vw 6vw;
	width: 100%;
	font-size: 3.7vw;
}