/************************** gameBOX start ********************************/
.gameBOX {
	--color1:#94bdd0;
	--color1o:#2e4962;
	--color2:#c7d89e;
	--color2o:#546b3c;
	--color3:#f2ca66;
	--color3o:#ad793b;
	position: relative;
	text-align:center;
	margin:1.5em auto;
	max-width:1000px;
	aspect-ratio:1.68;
	font-family: inherit;
	font-size: clamp(10px, 1.6vw, 16px);
	border-radius:4.375em;
	overflow:hidden;
}

/*********** 題目 start *************/
.QBlock{
	height:100%;
}
.QBlock:is(:has(~.RBlock.show)){
	display: none;
}
.Q{
	position: relative;
	height:100%;
	padding:6% 5% 0;
	background-color:#afd6cb;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size:61.22%;
	display: none;
}
.Q:nth-child(1){ background-image: url(../imgs/gameQ1.png);}
.Q:nth-child(2){ background-image: url(../imgs/gameQ2.png);}
.Q:nth-child(3){ background-image: url(../imgs/gameQ3.png);}
.Q:nth-child(4){ background-image: url(../imgs/gameQ4.png);}
.Q:nth-child(5){ background-image: url(../imgs/gameQ5.png);}
.Q.active{
	display: block;
}

.Q h3{
	font-size: 1.7em;
	color:var(--green-deep);
	line-height: 1.6em;
	margin:0;
}

.Q button{
	--YN-side:13.65%;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:9.1%;
	aspect-ratio:1;
	background-color:transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	filter:drop-shadow(-0.35em 0.35em 0.5em #255954);
	cursor: pointer;
	transition: all 0.2s;
	color:transparent;
	border:none;
	padding:0;
}
.Q button.out{
	opacity: 0.2;
}
.Q button:hover{
	transform:translateY(-50%) scale(1.2);
}
.Q button.Y{ 
	right:var(--YN-side);
	background-image: url(../imgs/gameY.png);
}
.Q button.N{ 
	left:var(--YN-side);
	background-image: url(../imgs/gameN.png);
}
/*********** 題目 end *************/

/*********** 解答 start *************/
.ABlock{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0;
	transition: all 0.5s;
	visibility: hidden;
}
.ABlock.show{
	background-size: 30%;
	visibility: visible;
}
.ABlock.correct{ background-image:url(../imgs/gameV.png);}
.ABlock.wrong{ background-image:url(../imgs/gameX.png);}
/*********** 解答 end *************/

/*********** 結果 start *************/
.RBlock {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display: none;
}
.RBlock.show {
	display: block;
}

.R{
	position: relative;
	height:inherit;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	display: none;
}
.R:nth-child(1){ background-image: url(../imgs/gameResult1.png);}
.R:nth-child(2){ background-image: url(../imgs/gameResult2.png);}
.R:nth-child(3){ background-image: url(../imgs/gameResult3.png);}
.R.active{
	display: block;
}

.R button{
	position: absolute;
	right:0;
	bottom:0;
	font-family: inherit;
	font-size: 1.5em;
	font-weight:900;
	white-space: nowrap;
	margin:0 3em 2.5em 0;
	padding:0.35em 1.8em;
	color:#FFF;
	border:0.25em solid;
	line-height: 1em;
	cursor:pointer;
	border-radius:2em;
	display:flex;
	justify-content: center;
	align-items: center;
	transition: all 0.2s;
}
.R:nth-child(1) button{
	background-color: var(--color1);
	border-color:var(--color1o);
}
.R:nth-child(1) button:hover{ background-color: var(--color1o);}
.R:nth-child(2) button{
	background-color: var(--color2);
	border-color:var(--color2o);
}
.R:nth-child(2) button:hover{ background-color: var(--color2o);}
.R:nth-child(3) button{
	background-color: var(--color3);
	border-color:var(--color3o);
}
.R:nth-child(3) button:hover{ background-color: var(--color3o);}
.R button:after{
	content:"";
	display: block;
	width:0.7em;
	aspect-ratio:0.9;
	background: url(../imgs/gameArrow.svg) no-repeat center/100%;
	margin-left:0.4em;
}
/*********** 結果 end *************/
/************************** gameBOX end ********************************/


/*手機版xs*/
@media (max-width: 767.98px) { 
	
	/************************** gameBOX start ********************************/
	.gameBOX {
		aspect-ratio:0.75;
		font-size: clamp(10px, 4.13vw, 32px);
		border-radius:2.375em;
	}

	/*********** 題目 start *************/
	.Q{
		padding:12% 8% 0;
		background-size:95%;
		/*background-position: center 95%;*/
	}

	.Q h3{
		font-size: 1.2em;
	}
	.Q h3 br{
		display: none;
	}

	.Q button{
		--YN-side:10%;
		/*top:32%;*/
		top:37%;
		width:15%;
	}
	/*********** 題目 end *************/

	/*********** 解答 start *************/
	.ABlock.show{
		background-position: center 70%;
		background-size: 55%;
	}
	/*********** 解答 end *************/

	/*********** 結果 start *************/
	.R:nth-child(1){ background-image: url(../imgs/gameResult1m.png);}
	.R:nth-child(2){ background-image: url(../imgs/gameResult2m.png);}
	.R:nth-child(3){ background-image: url(../imgs/gameResult3m.png);}

	.R button{
		right:50%;
		transform: translateX(50%);
		font-size: 1.1em;
		margin:0 0 1em;
	}
	/*********** 結果 end *************/
	/************************** gameBOX end ********************************/
	
}