@charset "UTF-8";

/* 選択回答ボタン */
#toi { margin: 0px; padding: 0px; width: 13.7%; aspect-ratio: 1 / 0.968; position: absolute; top: 5.2vw; left: 2.8vw; z-index: 101; }
#question { margin: 0px auto; padding: 3vw 2vw 2.6vw 10vw; width: 84.36%; text-align: left; background: #094a07; border: dashed 3px #f1cd28; position: absolute; top: 6vw; left: 0px; right: 0px; z-index: 90; animation: widthAni 1s ease 0s forwards; }
#question p { margin: 0px; padding: 0px; width: 100%; color: #fff; font-size: 3.2vw; font-weight: 600; line-height: 160%; }
#question rt { font-size: 1.4vw; font-weight: normal; transform: translateY(.01em); ruby-align: center; }
#b_stop { margin: 0px; padding: 0px; width: 11.34%; position: absolute; top: 50.5vw; left: 0.73vw; right: auto; z-index: 100; transition: all 0.75s; }
#b_stop:hover { opacity: 0.75; }
#chara { margin: 0px; padding: 0px; width: 14.48%; aspect-ratio: 1 / 1.384; position: absolute; top: 30vw; right: 6vw; z-index: 99; }

#answer { margin: 0px auto; padding: 0px; width: 85%; position: absolute; top: 29vw; left: 0px; right: 0px; z-index: 50; }
.b_answer { margin: 0px 0px 0.5vw 0px; padding: 0px; width: 100%; aspect-ratio: 1 / 0.074; overflow: hidden; cursor: pointer; }
.b_answer div { margin: 0px; padding: 0.5vw 0px 0px 7vw; width: 100%; transition: all 0.75s; }
.b_answer div:hover { opacity: 0.5; }
#ba1 { background:url(../i/btn_A.svg) center center no-repeat; background-size: contain; opacity: 0; animation: slideinTop 1s ease 0s forwards; }
#ba1 div { color: #094a07; font-size: 3.45vw; font-weight: 400; }
#ba1 div rt { font-size: 1.4vw; font-weight: normal; transform: translateY(.01em); ruby-align: center; }
#ba2 { background:url(../i/btn_B.svg) center center no-repeat; background-size: contain; opacity: 0; animation: slideinTop 1s ease 0.5s forwards; }
#ba2 div { color: #094a07; font-size: 3.45vw; font-weight: 400; }
#ba2 div rt { font-size: 1.4vw; font-weight: normal; transform: translateY(.01em); ruby-align: center; }
#ba3 { background:url(../i/btn_C.svg) center center no-repeat; background-size: contain; opacity: 0; animation: slideinTop 1s ease 1.0s forwards; }
#ba3 div { color: #094a07; font-size: 3.45vw; font-weight: 400; }
#ba3 div rt { font-size: 1.4vw; font-weight: normal; transform: translateY(.01em); ruby-align: center; }

#answer_m { display: none; }

@keyframes slideinTop {
 0% {
	transform: translateY(-50px);
	opacity: 0;
 }
 100% {
	transform: translateY(0);
	opacity: 1;
 }
}

/* 答え合わせ */
#correct { margin: 0px; padding: 0px; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 400; animation: widthAni 0.35s ease forwards; }
#correct img { margin: 0px; padding: 0px; width: 100%; height: auto; }

#incorrect { margin: 0px; padding: 0px; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 400; animation: widthAni 0.35s ease forwards; }
#incorrect img { margin: 0px; padding: 0px; width: 100%; height: auto; }

/* 解説 */
#chara2 { margin: 0px; padding: 0px; width: 19%; aspect-ratio: 1 / 0.782; position: absolute; top: 1.2vw; left: 2vw; right: 0px; z-index: 301; }
#area { margin: 0px auto; padding: 0px; width: 84.82%; aspect-ratio: 1 / 0.139; background: url(../i/bg_kotae_area.svg) center center no-repeat; background-size: contain; position: fixed; top: 5.8vw; left: 1vw; right: 0px; z-index: 300; }
#area span { margin: 0px; padding: 2.1vw 0px 0px 23vw; color: #094a07; font-size: 4vw; font-weight: 600; display: block; }
#area rt { font-size: 1.8vw; transform: translateY(.01em); ruby-align: center; }
#ex { margin: 0px auto; padding: 0px; width: 84.82%; display: flex; position: absolute; top: 20.5vw; left: 0px; right: 0px; z-index: 302; }
#ex dt { margin: 0px; padding: 0px; width: 99%; color: #fff; font-size: 2.7vw; line-height: 140%; }
#ex dt rt { font-size: 0.875vw; transform: translateY(.01em); ruby-align: center; }
/* #ex dd { margin: 0px; padding: 0px 0px 0px 2vw; width: 40%; } */
#ex dd { margin: 0px; padding: 0px; width: 1%; }
#ex dd img { margin: 0px; padding: 0px; width: 86%; height: auto; }
#b_next { margin: 0px; padding: 0px; width: 21.83%; aspect-ratio: 1 / 0.259; position: absolute; top: 46vw; right: 5.5vw; z-index: 303; transition: all 0.75s; }
#b_next:hover { opacity: 0.75; }

#seikai { display: none; }

@keyframes widthAni {
 0% {
	transform: scaleX(0);
	opacity: 0;
 }
 100% {
	transform: scaleX(1);
	opacity: 1;
 }
}

@media all and (max-width:800px){
	#toi { width: 30%; aspect-ratio: 1 / 1; top: 2.5vw; left: 2.5vw; }
	#question { padding: 18.5vw 3.5vw 5vw 3.5vw; width: 93.02%; top: 15vw; }
	#question p { font-size: 5.5vw; line-height: 190%; }
	#question rt { font-size: 2.6vw; font-weight: normal; transform: translateY(-0.2em); }
	#b_stop { width: 23.26%; aspect-ratio: 1 / 0.5; top: 1.5vw; left: auto; right: 1.5vw; z-index: 100; transition: all 0.75s; }
	
	#ba1 { display: none; }
	#ba2 { display: none; }
	#ba3 { display: none; }
	
	#answer_m { margin: 0px auto; padding: 0px 0px 3vw 0px; width: 100%; position: absolute; top: 0px; display: block; }
	.bm_answer { margin: 0px auto; padding: 6px; width: 96%; background: linear-gradient(#e4e3e3 0%, #fff 100%); border-radius: 3vw; cursor: pointer; transition: all 0.75s; }
	.bm_answer:hover { opacity: 0.75; }
	.bm_answer:nth-child(n+2) { margin: 2vw auto 0px auto; }
	.bm_answer div { margin: 0px; padding: 6vw 0px; width: 100%; background: linear-gradient(#fff 0%, #e4e3e3 100%); border-radius: 2.8vw; }
	.bm_answer ul { margin: 0px; padding: 0px; width: 100%; display: flex; align-items: stretch; }
	.bm_answer li:first-child { margin: 0px; padding: 0px 0px 0px 1vw; width: 15%; display: flex; align-items: center; }
	.bm_answer li:first-child span { margin: 0px; padding: 0px; width: 100%; }
	.bm_answer img { margin: 0px auto 0px 0px; padding: 0px; width: 80%; height: auto; aspect-ratio: 1 / 1; }
	.bm_answer li:last-child { margin: 0px; padding: 0px; width: 85%; color: #094a07; font-size: 6vw; font-weight: 500; display: flex; align-items: center; }
	.bm_answer li:last-child span { margin: 0px; padding: 0px; width: 100%; }
	.bm_answer li:last-child rt { font-size: 2.6vw; font-weight: normal; transform: translateY(-0.2em); ruby-align: center; }
	
	#chara { width: 57.24%; aspect-ratio: 1 / 0.753; position: absolute; top: auto; bottom: 5vw; right: 2vw; pointer-events: none; }
	
	/* 答え合わせ */
	#correct_m { margin: 0px; padding: 0px; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 200; animation: widthAni 0.35s ease forwards; }
	#incorrect_m { margin: 0px; padding: 0px; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; right: 0px; z-index: 200; animation: widthAni 0.35s ease forwards; }
	
	/* 解説 */
	#b_stop { width: 23.26%; position: absolute; top: 2vw; left: auto; right: 2vw; z-index: 100; transition: all 0.75s; }
	#seikai { margin: 0px; padding: 0px; width: 35%; aspect-ratio: 1 / 0.964; display: block; position: absolute; top: 1.5vw; left: 1.5vw; z-index: 310; }
	#area { margin: 8vw auto 0px auto; padding: 22vw 0px; width: 96%; aspect-ratio: auto; background-image: none; background: linear-gradient(#f5f5f5 0%,#fff 14.24%,#f5f5f5 50%,#fff 85.76%,#f5f5f5 100%); border-radius: 1.5vw; position: static; }
	#area span { margin: 0px; padding: 0px; font-size: 9vw; text-align: center; }
	#area rt { font-size: 3.4vw; transform: translateY(-0.005em); ruby-align: center; }
	#chara2 { width: 50%; aspect-ratio: 1 / 0.977; top: 41vw; left: 2.5vw; right: 0px; }
	
	#ex { margin: 0px auto; width: 100%; flex-wrap: wrap; }
	#ex li:first-child { width: 94%; text-align: center; }
	#ex li:first-child img { margin: 0px; padding: 0px; width: 74%; height: auto; }
	#ex li:nth-child(2) { padding: 4vw 3vw 0px 3vw; width: 100%; color: #fff; font-size: 5.4vw; line-height: 180%; }
	#ex li:nth-child(2) rt { color: #fff; font-size: 2.4vw; transform: translateY(0.005em); ruby-align: center; }
	#ex li:nth-child(3) { margin: 0px; padding: 2vw 0px 10vw 0px; width: 94%; text-align: center; }
	#b_next { margin: 0px auto; padding: 0px; width: 37.21%; aspect-ratio: 1 / 0.313; display: none; position: static; transition: all 0.75s; }
	#b_next:hover { opacity: 0.75; }
	#ex li:last-child { margin: 5vw 0px 0px 0px; padding: 0px; width: 100%; }
	#ex li:last-child img { margin: 0px; padding: 0px; width: 100%; height: auto; }
}