@charset "utf-8";
@import url(reset.css) layer(reset); /* reset.cssをレイヤーとして読み込み */

/* 右の方にあるレイヤーが左のレイヤーよりも優先される。 */
@layer reset, question, answer;

:root {
	--contentWidth: min(calc(100% - 40px), 1080px);
}

html{
	font-size: 62.5%;
}
body{
	background: #f0f8da;
	color: #333;
	font-size: 1.8rem;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}

/* 質問画面 */
@layer question {

	header .header__logo {
		background: #4c2000;
		padding-block: 15px;
	}

	header .header_logo-img {
		width: var(--contentWidth);
		margin-inline: auto;
	}

	.main_header{
		display: grid;
		place-content: center center;
		background-image: url(../../img/title_bg.png),
		linear-gradient(0deg, transparent calc(100% - 1px), #eaebeb calc(100% - 1px)),
							linear-gradient(90deg, transparent calc(100% - 1px), #eaebeb calc(100% - 1px));
		background-size: auto auto,16px 16px,16px 10px;
		background-repeat: no-repeat,repeat,repeat;
		background-position: center center,left top,left top;
		background-color: #fff;
		min-height: 180px;
	}

	header h1 {
		max-width: calc(100vw - 20px);
		margin-inline: auto;
	}

	header h1 .h1__innerwrap {
		display: inline;
	}

	header img {
		max-width: 100%;
		height: auto;
	}

	main {
		display: grid;
		grid-template-columns: 1fr;
		gap: 60px;
		padding-block: 60px;
	}

	/* 結果表示・初期は非表示状態 */
	.point{
		display: none;
		/* display: block; */
		width: var(--contentWidth);
		margin-inline: auto;
	}
	/* 結果表示・点数表示で表示状態 */
	.point:has(.point__result:not([hidden])){
		display: block;
	}
	.point .point__result:not([hidden]){
		display:grid;
		place-content: center center;
		height: auto;
	}
	.point .point__result{
		background-repeat: no-repeat;
		background-position: center top;
		background-color: transparent;
		background-size: contain;
	}

	.result_num{
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
	}
	.result_num img{
		max-width: 100%;
		height: auto;
	}


/* 設問 */
	.quiz {
		width: var(--contentWidth);
		margin-inline: auto;
		background: #fff;
		padding: 0px 50px 50px;
		border-radius: 30px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
		position: relative;
		overflow: hidden;
	}
	.quiz.is_notAns{
		box-shadow: 0px 0px 0px 10px #f88;
	}

	fieldset.quiz__fieldset {
		border: none;
		margin: 0px;
		padding: 0px;
		position: relative;
		z-index: 2;
	}
	.quiz__title-sub{
		font-size: 2.8rem;
		font-weight: bold;
	}

	.quiz__header{
		display: grid;
		grid-template-columns: 120px 1fr;
		align-items: center;
		gap: 60px;
		padding: 20px 0px 20px;
		position: relative;

		& span{
			position: relative;
			z-index: 10;
		}
	}
	.quiz__header::before {
		content: '';
		position: absolute;
		height: calc(100% + 30px);
		width: 200px;
		background: #ffdf49;
		top: 0;
		left: -50px;
	}
	.quiz__body{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		gap: 30px;
		position: relative;
		z-index: 10;
	}

	.quiz__image:empty{
		height: 30px;
	}
	.quiz__image img{
		max-width: 100%;
		max-height: 80vh;
		width: auto;
		height: auto;
		margin-inline: auto;
		border-radius: 20px;
	}

	.quiz__options {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		gap: 20px 25px;
	}

	.quiz label {
		cursor: pointer;
		display: grid;
		grid-template-columns: 30px 1fr;
		align-items: center;
		gap: 20px;
		background: #fff;
		border: 2px solid #ccc;
		padding: 30px;
		border-radius: 20px;
		font-size: 2.6rem;
		font-weight: bold;
	}
	.quiz label:has(input:focus){
		outline: 2px solid;
	}

	.quiz label:has(input:checked) {
		background: #fffdc7;
		border-color: #ffd300;
	}

	.options__input{
		position: relative;
	}

	.options__input::before{
		content: '';
		display: block;
		width: 31px;
		height: 30px;
		background: url(../../img/icon_uncheck.png) no-repeat center center #dbdbdb;
		background-size: contain;
		border-radius:  50%;
		position: absolute;
		inset: 0;
		margin: auto;
		z-index: 20;
	}
	.options__input:has(input:checked)::before{
		background-image: url(../../img/icon_checked.png)
	}

	.quiz__footer {
		margin-top: 40px;
	}
	.quiz__footer .quiz__summary{
		cursor: pointer;
		width: min(100%,400px);
		list-style: none;
		display: grid;
		grid-template-columns: 400px;
		place-content: center center;
		margin-inline: auto;

	}

	.quiz .quiz__footer .quiz__details:not([open]) .quiz__summary--close {
		display: none;
	}

	.quiz .quiz__footer .quiz__details[open] .quiz__summary--close {
		display: block;
		margin-inline: auto;
	}

	.quiz .quiz__footer .quiz__details[open] .quiz__summary--open {
		display: none;
	}

	.quiz .quiz__footer .quiz__details span {
		display: block;
		width: 100%;
		position: relative;
		padding: 20px 100px 20px 100px;
		background: #f4ceb0;
		font-weight: bold;
		line-height: 2.4rem;
		box-sizing: border-box;
	}

	.quiz .quiz__footer .quiz__details .quiz__summary--open {
		padding: 20px 90px 20px 200px;
		border-radius: 40px;
	}

	.quiz .quiz__footer .quiz__details span.quiz__summary--open::before {
		content: '';
		display: block;
		width: 91px;
		height: 90px;
		background: url(../../img/chk-ans.png);
		position: absolute;
		left: 100px;
		bottom: 0;
		border-radius: 100vmax;
	}

	.quiz .quiz__footer .quiz__details[open] .quiz__summary--close {
		border-radius: 40px 40px 0px 0px;
		display: grid;
		grid-template-columns: 24px auto;
		align-items: center;
		justify-content: center;
		gap: 20px;
	}

	.quiz .quiz__footer .quiz__details .quiz__summary--close::before {
		content: '';
		display: block;
		width: 24px;
		height: 24px;
		background: url(../../img/icon_close.png);
	}

	.quiz .quiz__footer .quiz__result-box {
		border: 2px solid #f4ceb0;
		border-radius: 20px;
		overflow: hidden;
	}

	.quiz .quiz__footer .quiz__result-box .quiz__message {
		display: none;
	}
	.quiz__message--image img{
		max-width: 80%;
		width: auto;
		height: auto;
		margin-inline: auto;
	}
	.quiz__explanation{
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;;
		padding: 30px 30px;
		font-size: 2rem;
		font-weight: bold;
		line-height: 1.8;
	}
	.quiz__explanation:has(.image){
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30px;
	}
	.quiz__explanation img{
		max-width: 100%;
		height: auto;
		border-radius: 20px;
	}

	.answer{
		width: var(--contentWidth);
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.answer button{
		display: grid;
		place-content: center center;
		padding: 20px;
		width: min(80%,480px);
		margin-inline: auto;
		background: #4c2000;
		color: #fff;
		border: none;
		border-radius: 100vmax;
		cursor: pointer;
	}
	.answer button[hidden]{
		display: none;
	}
	.answer a:any-link{
		display: grid;
		place-content: center center;
		padding: 20px;
		width: min(80%,480px);
		margin-inline: auto;
		background: #fff;
		border-radius: 100vmax;
		border: 2px solid #003070;
	
	}
	.answer .alert{
		display: none;
		font-size: 3rem;
		letter-spacing: 0.1;
		text-align: center;
		font-weight: bold;
	}
	main:has(.is_notAns) .answer .alert{
		display: block;
	}


/* フッタ */
	footer{
		background: #fff;
		padding: clamp(20px,10vw,60px) 0px 0px;
	}
	footer a:any-link{
		color: currentColor;
		text-decoration: none;
	}
	footer a:hover{
		text-decoration: underline;
	}

	.footer__nav{
		width: var(--contentWidth);
		margin-inline: auto;
		padding: 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		list-style: none;
		font-size: 1.4rem;
		line-height: 1;
	}
	.footer__nav li{
		display: block;
		margin-inline: 0px;
		margin-block: 0px;
		padding-inline: 10px;
	}
	.footer__nav li:not(:first-child){
		border-left: 1px solid currentColor;
	}
	.footer__author{
		width: var(--contentWidth);
		display: grid;
		grid-template-columns: 290px 1fr;
		align-items: center;
		justify-content: center;
		gap: 50px;
		margin-inline: auto;
		font-size: 1.4rem;
		margin: 0px auto 40px;
	}

	.footer__author strong{
		font-size: 1.8rem;
		font-weight: bold;
	}
	.footer__author p span{
		display: inline-block;
	}

	.copyright{
		background: #4c2000;
		color: #fff;
		padding-block: 15px;
		text-align: center;
		font-size: 1.4rem;
		line-height: 1;
	}

	@media (width < 1080px) {
		.quiz{
			padding: 0px clamp(10px,5vw,30px) clamp(10px,10vw,50px);
		}
		.quiz .quiz__options {
			grid-template-columns: 1fr;
		}
		@media (width < 768px){
			.quiz__header::before{
				display: none;
				width: 100%;
				height: 80px;
			}
			.quiz__header{
				grid-template-columns: 1fr;
				grid-template-rows: auto auto;
				gap: 20px
			}
			.quiz__title-main{
				position: relative
			}
			.quiz__title-main::before{
				content: '';
				display: block;
				background: #ffdf49;
				position: absolute;
				left: calc(50% - 100vw);
				top: -20px;
				width: 200vw;
				height: calc(100% + 40px);

			}
			.quiz__title-main img{
				position: relative;
				z-index: 10;
			}
			
			.quiz .quiz__footer .quiz__summary{
				grid-template-columns: 1fr;
				justify-content: center;
			}
			.quiz .quiz__footer .quiz__details span{
				width: 80%;
				padding-left: 20px;
				padding-right: 20px;
			}
			
			.quiz .quiz__footer .quiz__details .quiz__summary--open{
				padding-left: 20px;
				padding-right: 20px;
				margin-inline: auto;
				display: inline-grid;
				grid-template-columns: 50px auto;
				align-items: center;
				justify-content: center;
				gap: 10px;
			}
			.quiz .quiz__footer .quiz__details span.quiz__summary--open::before{
				position: static;
				left: 50px;
				width: 50px;
				height: 50px;
				background-size: contain;
			}
			.quiz__explanation:has(.image){
				grid-template-columns: 1fr;
				grid-template-rows: auto auto;
			}
			.quiz__explanation img{
				max-height: 60vh;
				width: auto;
				margin-inline: auto;
			}
			.footer__author{
				margin-top: 30px;
				grid-template-columns: auto;
				grid-template-rows: auto auto;
				justify-content: center;
				gap: 20px;
			}
			.footer__logo img{
				margin-inline: auto;
			}
		}
	}
}

/* 解答画面 */
@layer answer {
	.page_result .quiz__summary {
		display: none;
	}

	.page_result .quiz__message:not([hidden]) {
		background: #f4ceb0;
		display: grid;
		place-content: center center;
		padding-block: 20px;
	}
	.page_result .quiz__fieldset{
		pointer-events: none;
	}
}