@charset "utf-8";

@import url(/ssi/css/base.css) layer(base);
@import url(site-kids-quiz.css) layer(kids);

@layer base,kids,quiz;

@layer quiz{
	#main_header h1{
		text-align: center;
	}
	#main_header h1 img{
		width: 500px;
		max-width: 100%;
		height: auto;
	}

	#main_body .toc_link_wrap{
		display: none;
	}

	/* 設問 */
	.quiz__wrap{
		display: flex;
		flex-direction: column;
		gap: min(10vw,100px);
	}
	.quiz__wrap img{
		display: block;
		max-width: 100%;
		height: auto;
	}

	.quiz__fieldset{
		border: none;
		padding: 0;
		margin: 0;
		display: block;
	}
	.quiz__header{
		display: block;
		width: 100%;
	}
	.quiz__header h2{
		margin-top: 0;
	}
	.quiz__options{
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-items: end;
		gap: min(5vw,50px);
	}
	.quiz__options label{
		cursor: pointer;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		gap: 20px;
		background: #EDF4D4;
		padding: 10px;
		border-radius: 20px;
		position: relative;
		top: 0;
		left: 0;
		transition: background 0.3s ease;
	}
	.quiz__image{
		display: block;
		align-self: end;
	}
	.quiz__image img{
		max-width: 100%;
		height: auto;
	}
	.quiz__options-answertext{
		display: block;
		border-radius: 10px;
		padding: 10px;
		/* background: #fdb61c url(/img/sites/kids/bg_stripe_15.png) center top / 30px 30px; */
		background: #C3DA70;
	}
	.quiz__options label:has(:checked){
		/* filter: drop-shadow(0px 10px 10px #c2e081);
		position: relative;
		top: -10px;
		left: -0px; */
		background: #C3DA70;
		transition: background 0.3s ease;
		& .quiz__options-answertext{
			background: #F5F5D9;
		}
	}
	.quiz__options label .options__text{
	}
	.quiz__options label:has(:checked) .options__text{
		font-weight: bold;
	}

	.quiz__summary{
		display: none;
		pointer-events: none;
	}
	.quiz__explanation{
		margin: 30px 0px 0px;
		/* border: 10px solid; */
		box-sizing: border-box;
		border-radius: 20px;
		/* background: #fdb61c; */
		color: #eb0000;

	}
	.quiz__explanation p{
		margin:  0px;
		padding: 20px 20px;
	}


	/* 解答 */
	.page_result #main_header{
		display: none;
	}
	.result_num{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		justify-content: center;
		text-align: center;
		gap: 20px;
		width: 100%;
		margin: 0px 0px 50px;
	}

	.result_num:has(.result__nuim-image:only-child) {
		grid-template-columns: auto;
		grid-template-rows: auto;
	}
	.result__num-point{
		/* grid-column: span 2; */
		font-size: 10vw;
		font-weight: bold;
		background: #fdb61c url(/img/sites/kids/bg_stripe_15.png) center top / 30px 30px;
		background-size: 20px 20px;
		border-radius: 50px;
	}
	.result_num img{
		width: clamp(590px,100vw,1081px);
		height: auto;
	}
	.result__num-comment{
		text-align: left;
	}

	/* 解答後 */
	div[class*="quiz__result"] fieldset{
		pointer-events: none;
	}
	.quiz__result-correct label:has(:checked) .quiz__image{
		/* position: relative; */
	}
	.quiz__result-correct label:has(:checked) .quiz__image::before,
	.quiz__result-wrong label:has(:checked) .quiz__image::before{
		content: '';
		display: block;
		position: absolute;
		z-index: 100;
		top: -20px;
		left: -20px;
		width: 50px;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	.quiz__result-correct label:has(:checked) .quiz__image::before{
		border: 8px solid #f66;
		box-sizing: border-box;
		border-radius: 50%;
		/* mix-blend-mode:multiply; */
	}
	.quiz__result-wrong label:has(:checked) .quiz__image::before{
		clip-path: polygon(0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%);
		transform: rotate(45deg);
		background: #f66;
		box-sizing: border-box;
		/* mix-blend-mode:multiply; */
	}

	.answer {
		display: grid;
		place-content: center center;
		gap: 30px;
		grid-template-columns: auto auto;
		grid-template-rows: auto auto;
		margin-top: 100px;
	}
	.answer:has(#page_reload[hidden]){
		gap: 0;
	}

	p.alert {
		/* border: 2px solid ; */
		background: #E60000;
		color: #fff;
		font-weight: bold;
		font-size: 2rem;;
		text-align: center;
		border-radius: 100vmax;
		padding: 20px 40px;
		line-height: 1;
		grid-column: span 2;
	}

	.answer :where(button,a:any-link){
		font-size: 3rem;
		line-height: 1;
		font-weight: bold;
		letter-spacing: 0.2em;
		border: none;
		text-decoration: none;
		padding: 20px 40px;
		border-radius: 100vmax;
		background: #63c8e4;
		background-size: 30px 30px;
	}
	.answer:has(p[hidden],button[hidden]) #check_ans{
		grid-column: span 2;
	}

	@media screen and (width < 1100px){
		.quiz__result-correct label:has(:checked) .quiz__image::before,
		.quiz__result-wrong label:has(:checked) .quiz__image::before{
			width: 30px;
			top: -10px;
			left: -10px;
		}
		.answer_action {
			display: grid;
			gap: 10px;
		}
		.answer :where(button,a:any-link){
			font-size: 2rem;
			text-align: center;
		}
		.answer:has(.alert:not([hidden])) .answer_action {
			grid-column: span 2;
		}

	}


}