/* Opening */
.levelBox {
	position: absolute;
	bottom: calc(100% * (110 / 1080));
	left: 50%;
	width: calc(100% * (1293 / 1920));
	height: calc(100% * (165 / 1080));
	transform: translateX(-51%);
}

.levelBox a {
	position: absolute;
	top: 0;
	height: 100%;
	display: block;
	cursor: pointer;
}
.levelBox a:first-of-type {
	left: 0;
}
.levelBox a:nth-of-type(2) {
	left: 50%;
	transform: translateX(-50%);
}
.levelBox a:last-of-type {
	right: 0;
}

.stratSection,
.questionSection,
.explanationSection,
.resultSection,
.endSection,
.inductionSection {
	display: none;
}

/* Start */
#cmdStart {
	position: absolute;
	bottom: calc(100% * (182 / 1080));
	left: 50%;
	width: calc(100% * (600 / 1920));
	height: calc(100% * (150 / 1080));
	transform: translateX(-50%);
	border-top-left-radius: 8% 32%;
	border-top-right-radius: 8% 32%;
	border-bottom-left-radius: 8% 32%;
	border-bottom-right-radius: 8% 32%;
	cursor: pointer;
}

/* Question */
.questionBox {
	position: absolute;
	top: 0;
	left: 50%;
	width: 94%;
	height: 100%;
	background-image: url("../img/board_q.png");
	background-repeat: no-repeat;
	background-position-y: 12%;
	background-size: 100%;
	transform: translateX(-50%);
}

.questionBox h1 {
	position: absolute;
	top: 4.7%;
	left: 50%;
	color: #000;
	text-align: center;
	line-height: 100%;
	margin: 0;
	transform: translateX(-52%);
	font-size: calc(0.125rem + ((2.5vw - 3px) * 1.1667));
}

.timer {
	position: absolute;
	top: 2%;
	right: 5%;
	width: 21%;
	height: 14%;
	background-image: url("../img/background_timer.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.timer h2 {
	position: absolute;
	width: 60%;
	top: 34%;
	right: 5%;
	font-size: calc(0.125rem + ((1.9vw - 3px) * 1.1667));
	text-align: center;
}

.questionBox h3 {
	position: absolute;
	top: 26%;
	left: 6%;
	width: 65%;
	height: 28%;
	font-size: calc(0.125rem + ((2.1vw - 3px) * 1.1667));
	line-height: 144%;
	visibility: hidden;
}
.textSplitLoad {
	display: none;
}

.questionBox .imageBox {
	position: absolute;
	top: calc(100% * (207 / 1024));
	right: calc(100% * (75 / 2048));
	width: calc(100% * (467 / 2048));
	height: calc(100% * (307 / 1024));
}
.questionBox .imageBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.optionBoxes {
	position: absolute;
	bottom: calc(100% * (208 / 1024));
	left: calc(100% * (69 / 1024));
	width: calc(100% * (1782 / 2048));
	height: calc(100% * (158 / 1024));
}
optionBoxes:after {
	content: "";
	display: block;
	clear: both;
}
.optionBox {
	position: relative;
	width: calc(100% / 3);
	height: 100%;
	float: left;
}
.optionBox span {
	width: 91%;
	height: 100%;
	font-size: calc(0.125rem + ((1.9vw - 3px) * 1.1667));
	font-weight: bold;
	line-height: 112%;
	display: block;
	border-top-left-radius: 8% 32%;
	border-top-right-radius: 8% 32%;
	border-bottom-left-radius: 8% 32%;
	border-bottom-right-radius: 8% 32%;
	padding: 7% 5% 0% 16%;
	cursor: pointer;
}
.optionBox:nth-of-type(2) span {
	margin: 0 auto;
}
.optionBox:last-of-type span {
	margin: 0 0 0 auto;
}
.optionBox img {
	position: absolute;
	top: -35%;
	left: 50%;
	width: 8%;
	transform: translate(-50%);
	opacity: 0;
}

.resultBox {
	width: 100%;
	height: 100%;
	z-index: -1;
}
.resultBox .inner {
	position: absolute;
	top: calc(100% * (152 / 1024));
	left: 50%;
	width: calc(100% * (864 / 2048));
	height: calc(100% * (768 / 1024));
	transform: translateX(-50%);
}
.resultBox img {
	width: 100%;
	height: 100%;
}

.questionBox .charaEasy {
	position: absolute;
	bottom: 1.8%;
	left: -1.8%;
	width: calc(100% * (148 / 2048));
	height: auto;
}
.questionBox .charaEasy .inner img {
	width: 100%;
	object-fit: cover;
}
.questionBox .charaNormal {
	position: absolute;
	bottom: 1.8%;
	left: 20%;
	width: calc(100% * (464 / 2048));
	height: calc(100% * (224 / 1024));
	z-index: -1;
}
.questionBox .charaNormal .inner {
	width: 60%;
	height: 100%;
}
.questionBox .charaNormal .inner img {
	width: 100%;
	object-fit: cover;
}
.questionBox .charaHard {
	position: absolute;
	bottom: 4%;
	right: 0%;
	width: calc(100% * (164 / 2048));
	height: auto;
	z-index: -1;
}
.questionBox .charaHard .inner img {
	width: 100%;
	object-fit: cover;
}

/* Explanation */
.explanationSection {
	display: none;
}
.explanationBox {
	position: absolute;
	top: 0;
	left: 50%;
	width: 94%;
	height: 100%;
	background-image: url("../img/board_a.png");
	background-repeat: no-repeat;
	background-position-y: 12%;
	background-size: 100%;
	transform: translateX(-50%);
}

.explanationBox h1 {
	position: absolute;
	top: 4.4%;
	left: 50%;
	color: #000;
	text-align: center;
	line-height: 100%;
	margin: 0;
	transform: translateX(-52%);
	font-size: calc(0.125rem + ((2.5vw - 3px) * 1.1667));
}
.ansOptionBox span {
	position: absolute;
	top: 13.4%;
	left: 15%;
	width: 8%;
	color: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 144%;
	margin: 0;
	font-size: calc(0.125rem + ((4.2vw - 3px) * 1.1667));
}
.ansOptionBox h2 {
	position: absolute;
	top: 15.5%;
	left: 23.5%;
	width: 35%;
	color: #fff;
	font-weight: bold;
	line-height: 144%;
	margin: 0;
	font-size: calc(0.125rem + ((2.6vw - 3px) * 1.1667));
}

.explanationBox .imageBox {
	position: absolute;
	top: calc(100% * (180 / 1024));
	right: calc(100% * (75 / 2048));
	width: calc(100% * (680 / 2048));
	height: calc(100% * (420/ 1024));
}
.explanationBox .imageBox img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.explanationBox h3 {
	position: absolute;
	top: 42%;
	left: 4%;
	width: 58%;
	color: #fff;
	line-height: 148%;
	margin: 0;
	font-size: calc(0.125rem + ((2.1vw - 3px) * 1.1667));
}

#cmdBackStart {
	position: absolute;
	bottom: 5.5%;
	left: 0;
	width: calc(100% * (408 / 2048));
	height: auto;
}
#cmdBackStart img {
	width: 100%;
}

#cmdNextQuestion {
	position: absolute;
	bottom: 5.5%;
	right: 0;
	width: calc(100% * (408 / 2048));
	height: auto;
	cursor: pointer;
}
#cmdNextQuestion img {
	width: 100%;
}

.explanationBox .charaEasy {
	position: absolute;
	bottom: 5%;
	left: 53%;
	width: calc(100% * (435 / 2048));
	height: auto;
}
.explanationBox .charaEasy .inner img {
	width: 100%;
}
.explanationBox .charaNormal {
	position: absolute;
	bottom: 5%;
	left: 53%;
	width: calc(100% * (435 / 2048));
	height: auto;
}
.explanationBox .charaNormal .inner img {
	width: 100%;
}
.explanationBox .charaHard {
	position: absolute;
	bottom: 5%;
	left: 53%;
	width: calc(100% * (435 / 2048));
	height: auto;
}
.explanationBox .charaHard .inner img {
	width: 100%;
}

/* Result */
.resultSection {
	display: none;
}

.resultSection h1 {
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translateX(-50%);
	line-height: 100%;
	font-size: calc(0.125rem + ((2.8vw - 3px) * 1.1667));
}

#resultCard {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}

/* End */
.endSection .cmdToStart {
	position: absolute;
	bottom: 25%;
	left: 50%;
	width: 40.5%;
	height: 18%;
	transform: translateX(-49%);
	display: block;
	border-top-left-radius: 9% 28%;
	border-top-right-radius: 9% 28%;
	border-bottom-right-radius: 9% 28%;
	border-bottom-left-radius: 9% 28%;
}

/* Induction */
.inductionSection .cmdToStart {
	position: absolute;
	bottom: 3.4%;
	left: 2.4%;
	width: 19.5%;
	height: 8.8%;
	display: block;
	border-top-left-radius: 9% 28%;
	border-top-right-radius: 9% 28%;
	border-bottom-right-radius: 9% 28%;
	border-bottom-left-radius: 9% 28%;
}
#cmdToJA {
	position: absolute;
	top: 44.3%;
	right: 15.8%;
	width: 25%;
	height: 19%;
	display: block;
	border-top-left-radius: 20% 40%;
	border-top-right-radius: 20% 40%;
	border-bottom-right-radius: 20% 40%;
	border-bottom-left-radius: 20% 40%;
}

@media (max-device-width: 768px) and (orientation: landscape){
	.questionBox h1 {
		top: 4.9%;
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
	}
	.timer h2 {
		top: 35%;
		font-size: calc(0.125rem + ((2.8vh - 3px) * 1.1667));
	}
	.questionBox h3 {
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
		line-height: 144%;
	}
	.optionBox span {
		font-size: calc(0.125rem + ((3.2vh - 3px) * 1.1667));
	}
	.explanationBox h1 {
		top: 4.5%;
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
	}
	.ansOptionBox span {
		top: 14%;
		font-size: calc(0.125rem + ((6.0vh - 3px) * 1.1667));
	}
	.ansOptionBox h2 {
		top: 15.5%;
		font-size: calc(0.125rem + ((4.3vh - 3px) * 1.1667));
	}
	.explanationBox h3 {
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
	}
	.resultSection h1 {
		font-size: calc(0.125rem + ((4.5vh - 3px) * 1.1667));
	}
}

/* Android */
@media (orientation: landscape){
	.Android .questionBox h1 {
		font-size: calc(0.125rem + ((4.8vh - 3px) * 1.1667));
	}
	.Android .timer h2 {
		font-size: calc(0.125rem + ((3.7vh - 3px) * 1.1667));
	}
	.Android .questionBox h3 {
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
		line-height: 144%;
	}
	.Android .optionBox span {
		font-size: calc(0.125rem + ((3.6vh - 3px) * 1.1667));
	}
	.Android .explanationBox h1 {
		font-size: calc(0.125rem + ((4.8vh - 3px) * 1.1667));
	}
	.Android .ansOptionBox span {
		top: 13.0%;
		font-size: calc(0.125rem + ((8.6vh - 3px) * 1.1667));
	}
	.Android .ansOptionBox h2 {
		font-size: calc(0.125rem + ((4.8vh - 3px) * 1.1667));
	}
	.Android .explanationBox h3 {
		font-size: calc(0.125rem + ((4.2vh - 3px) * 1.1667));
	}
	.Android .resultSection h1 {
		font-size: calc(0.125rem + ((5.4vh - 3px) * 1.1667));
	}
}