@charset "UTF-8";
@import url("https://use.typekit.net/xpv4afd.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* --------------------------------------------------
	CSS Reset
-------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-family: "Noto Sans JP", sans-serif;
	letter-spacing: 0.01em;
	color: #000000;
	vertical-align: baseline;
	background: transparent;
}
html {
	scroll-behavior: smooth;
}
body {
	position: relative;
	line-height: 1;
	background-color: #365ECC;
}
article,aside,details,figcaption,figure,picture,
footer,header,hgroup,menu,nav,section {
	display: block;
}
ul,ol {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	transition: all 0.2s linear;
}
a:link,
a:visited {
	color: #333;
	text-decoration: none;
}
a:hover { opacity: 0.7; }
a:hover,
a:active {
	color: #333;
	text-decoration: underline;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}
input, select {
	vertical-align: middle;
}
img {
	vertical-align: top;
	width: 100%;
}
sup {
	font-size: 50%;
	vertical-align: text-top;
}
.europa {
	font-family: "europa", sans-serif;
}
.kerning-l {
	display: inline-block;
	margin-left: -0.5em;
}
.kerning-r {
	display: inline-block;
	margin-right: -0.5em;
}
.kerning-c {
	display: inline-block;
	margin-left: -0.25em;
	margin-right: -0.25em;
}
.kerning-l2 {
	display: inline-block;
	margin-left: -0.25em;
}
.kerning-r2 {
	display: inline-block;
	margin-right: -0.25em;
}
.kerning-c2 {
	display: inline-block;
	margin-left: -0.2em;
	margin-right: -0.125em;
}
.padding-l {
	display: inline-block;
	padding-left: 0.25em;
}

/* --------------------------------------------------
	main
-------------------------------------------------- */
main {
	padding-bottom: 110px;
}
@media screen and (max-width: 750px) {
	main {
		padding-bottom: 14.6667vw;
	}
}

/* --------------------------------------------------
	.inner
-------------------------------------------------- */
.inner {
	position: relative;
	margin: 0 auto;
	max-width: 750px;
	box-sizing: border-box;
}

/* --------------------------------------------------
	.btn
-------------------------------------------------- */
.btn {
	margin: 0 auto;
	width: 89.3334%;
	max-width: 670px;
	height: 120px;
}
.btn a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 60px;
	box-shadow: 6px 6px 0 #193196;
	box-sizing: border-box;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	text-align: center;
	transition: all .2s cubic-bezier(.21,1.05,.8,.98);
}
.btn a:hover {
	opacity: 1;
	text-decoration: none;
}
.btn a:hover,
.btn a:focus {
	transform: translate(3px,3px);
	box-shadow: 3px 3px 0 #00137B;
}
.btn a::after {
	content: '';
	position: absolute;
	right: 1.5em;
	top: 50%;
	transform: translate(0,-50%);
}
.btn-next a,
.btn-back a,
.btn-retry a {
	background: #FFFF00;
	color: #193196;
}
.btn-next a::after {
	content: '↓';
}
.btn-back a::after,
.btn-retry a::after {
	content: '←';
}
.btn-result {
	margin-top: 160px;
	height: 150px;
}
.btn-result a {
	background: #e32929;
	border-radius: 20px;
	border: 4px solid #fff;
	font-size: 50px;
	color: #fff;
}
.btn-result a::after {
	content: '→';
	right: 1em;
}
.btn-prizecheck {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 94px;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}
.btn-prizecheck span {
	position: relative;
	display: inline-block;
	padding-right: 80px;
	font-weight: 600;
	font-size: 34px;
	line-height: 1;
	text-align: center;
}
.btn-prizecheck span::before,
.btn-prizecheck span::after {
	content: '';
	position: absolute;
	display: block;
}
.btn-prizecheck span::after {
	right: 0;
	top: 50%;
	transform: translate(0,-50%);
	width: 40px;
	height: 40px;
	border: 2px solid #707070;
	box-sizing: border-box;
}
.btn-prizecheck span::before {
	display: none;
	right: -14px;
	top: -1px;
	width: 46px;
	height: 28px;
	background-image: url("../img/icon_check.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.is--active.btn-prizecheck span::before {
	display: block;
}
.btn-back,
.btn-retry,
.btn-prizecheck {
	display: none;
	margin-top: 50px;
}
.btn-prizecheck {
	margin-top: 350px;
}
@media screen and (max-width: 750px) {
	.btn {
		height: 16vw;
	}
	.btn a {
		border-radius: 8vw;
		box-shadow: 0.8vw 0.8vw 0 #193196;
		font-size: 5.3334vw;
	}
	.btn a:hover,
	.btn a:focus {
		transform: translate(0.4vw,0.4vw);
		box-shadow: 0.4vw 0.4vw 0 #00137B;
	}
	.btn-result {
		margin-top: 21.3334vw;
		height: 20vw;
	}
	.btn-result a {
		border-radius: 2.6667vw;
		border: 0.5334vw solid #fff;
		font-size: 6.6667vw;
	}
	.btn-prizecheck {
		height: 12.5334vw;
		border-radius: 1.3334vw;
	}
	.btn-prizecheck span {
		padding-right: 10.6667vw;
		font-size: 4.5334vw;
	}
	.btn-prizecheck span::after {
		width: 5.3334vw;
		height: 5.3334vw;
		border: 1px solid #707070;
	}
	.btn-prizecheck span::before {
		right: -1.8667vw;
		width: 6.1334vw;
		height: 3.7334vw;
	}
	.btn-back,
	.btn-retry {
		margin-top: 6.6667vw;
	}
	.btn-prizecheck {
		margin-top: 46.6667vw;
	}
}

/* --------------------------------------------------
	.question-box
-------------------------------------------------- */
.question-box {
	margin-top: 25px;
}
.question-box + .question-box {
	margin-top: 160px;
}
.question-box .inner {
	padding-top: 75px;
}
.question-box .q-head {
	position: relative;
	margin: 0 auto 50px;
	width: 89.3334%;
	background-color: #FFF;
	border-radius: 20px;
}
.question-box.q4 .q-head {
	padding-bottom: 6.5672%;
}
.question-box.q5 .q-head {
	padding-bottom: 6.5672%;
}
.question-box .q-head h1 {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin: 0 auto -40px;
	width: 205px;
	height: 100px;
	background-color: #FFF;
	border-radius: 100px 100px 0 0;
	transform: translate(0,-75%);
}
.question-box .q-head h1 span {
	font-size: 36px;
	font-weight: 700;
	color: #193196;
	line-height: 1;
	text-align: center;
}
.question-box .q-head h1 .num {
	padding: 0 0.1em;
	font-size: 80px;
	font-family: "europa", sans-serif;
	color: #193196;
}
.question-box .q-head .q-text {
	margin: 0 auto 60px;
	width: 86.5672%;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.52;
	letter-spacing: -0.03em;
}
.question-box .q-head .q-hint {
	position: relative;
	padding: 5px 25px;
	border: 4px solid #3E59CD;
	border-radius: 10px;
	box-sizing: border-box;
	background-color: #fff;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.6;
	color: #193196;
	letter-spacing: -0.03em;
}
.question-box .q-head .q-hint::before {
	content: '';
	position: absolute;
	left: -8px;
	top: -32px;
	display: block;
	width: 45px;
	height: 40px;
	background-image: url("../img/icon_hint.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.question-box.q1 .q-head .q-hint {
	position: absolute;
	right: 54px;
	top: 240px;
}
.question-box.q2 .q-head .q-hint {
	margin: 0 auto 50px;
	width: 86.5672%;
}
.question-box.q3 .q-head .q-hint {
	margin-top: -20px;
	margin-left: 6.7165%;
	margin-bottom: -220px;
	padding: 10px 25px;
	width: 40.2986%;
}
.question-box.q4 .q-head .q-hint {
	margin-left: 6.7165%;
	margin-bottom: -176px;
	width: 49.2538%;
}
.question-box.q5 .q-head .q-hint {
	margin: 0 auto 30px;
	width: 86.5672%;
	text-align: center;
}
.question-box .q-head .q-pic {
	border-radius: 0 0 20px 20px;
	overflow: hidden;
}
.question-box.q3 .q-head .q-pic {
	position: relative;
	margin-left: auto;
	margin-right: 1.3433%;
	width: 61.7911%;
}
.question-box.q4 .q-head .q-pic {
	position: relative;
	margin-left: 14.1792%;
	width: 76.2687%;
}
.question-box.q5 .q-head .q-pic {
	margin-left: 10.4478%;
	width: 78.9553%;
}
.question-box .answer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	margin: 0 auto 80px;
	width: 89.3334%;
}
.question-box .answer li {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 120px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 6px 6px 0 #00137B;
	font-size: 56px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: all .2s cubic-bezier(.21,1.05,.8,.98);
}
.question-box.q3 .answer li {
	font-size: 44px;
}
.question-box .answer li:hover,
.question-box .answer li:focus {
	transform: translate(3px,3px);
	box-shadow: 3px 3px 0 #00137B;
}
.question-box .answer li span {
	position: absolute;
	left: 50%;
	top: 50%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	text-indent: -9999px;
	transform: translate(-50%,-50%) scale(0.5);
	transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
	transform-origin: center;
	opacity: 0;
	pointer-events: none;
}
.question-box .answer li span.correct,
.question-box .answer li span.incorrect {
	transform: translate(-50%,-50%) scale(1);
	opacity: 1;
}
.question-box .answer li span.correct {
	width: 100px;
	height: 100px;
	background-image: url("../img/icon_o.png");
}
.question-box .answer li span.incorrect {
	width: 80px;
	height: 80px;
	background-image: url("../img/icon_x.png");
}
.question-box .answer.is--selected {
	pointer-events: none;
}
.question-box .answer.is--selected li {
	cursor: default;
	opacity: 0.3;
}
.question-box .answer.is--selected li.is--active {
	opacity: 1;
}
.question-box .answer-box .correct,
.question-box .answer-box .incorrect {
	height: 0;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}
.question-box .answer-box .correct {
	transition: all .5s cubic-bezier(.21,1.05,.8,.98) 0.2;
}
.question-box .answer-box .correct.is--active,
.question-box .answer-box .incorrect.is--active {
	display: block;
	height: auto;
	opacity: 1;
	pointer-events: auto;
	overflow: visible;
}
.question-box .answer-box .incorrect.is--active {
	margin-bottom: 70px;
}
.question-box .answer-box .correct.is--active {
	margin-bottom: 60px;
}
.question-box .answer-box .incorrect h2,
.question-box .answer-box .correct h2 {
	font-weight: 700;
	font-size: 70px;
	line-height: 1;
	text-align: center;
	color: #fff;
	transform: scale(0.5);
	transform-origin: center;
	opacity: 0;
	transition: all 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);
}
.question-box .answer-box .incorrect.is--active h2,
.question-box .answer-box .correct.is--active h2 {
	transform: scale(1);
	opacity: 1;
}
.question-box .answer-box .correct .bg-white {
	position: relative;
	margin: 40px auto 0;
	padding-top: 8.9553%;
	padding-bottom: 8.9553%;
	width: 89.3334%;
	background-color: #FFF;
	border-radius: 20px;
}
.question-box .answer-box .correct h3 {
	margin-bottom: 30px;
	font-weight: 700;
	font-size: 70px;
	line-height: 1;
	text-align: center;
}
.question-box .answer-box .correct .a-pic {
	margin: 0 auto 30px;
	width: 86.5672%;
}
.question-box .answer-box .correct .a-pic figcaption {
	padding-top: 0.2em;
	font-size: 22px;
	line-height: 1.4;
	text-align: right;
}
.question-box .answer-box .correct dl {
	margin: 0 auto;
	width: 86.5672%;
}
.question-box .answer-box .correct dt {
	margin-bottom: 1em;
	text-align: center;
}
.question-box .answer-box .correct dt span {
	display: inline-block;
	padding: 0.4em 1em;
	background-color: #365ECC;
	border-radius: 1em;
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: #fff;
}
.question-box .answer-box .correct dd {
	font-size: 32px;
	line-height: 1.75;
	text-align: left;
	text-justify: auto;
}
.question-box.q5 .answer-box .correct .a-pic {
	margin-bottom: 50px;
	width: 89.5523%;
}
@media screen and (max-width: 750px) {
	.question-box {
		margin-top: 3.3334vw;
	}
	.question-box + .question-box {
		margin-top: 21.3334vw;
	}
	.question-box .inner {
		padding-top: 10vw;
	}
	.question-box .q-head {
		margin-bottom: 6.6667vw;
		border-radius: 2.6667vw;
	}
	.question-box .q-head h1 {
		margin-bottom: -5.3334vw;
		width: 27.3334vw;
		height: 13.3334vw;
		border-radius: 13.3334vw 13.3334vw 0 0;
	}
	.question-box .q-head h1 span {
		font-size: 4.8vw;
	}
	.question-box .q-head h1 .num {
		font-size: 10.6667vw;
	}
	.question-box .q-head .q-text {
		margin-bottom: 8vw;
		font-size: 5.6001vw;
	}
	.question-box .q-head .q-hint {
		padding: 0.6667vw 3.3334vw;
		border: 0.5334vw solid #3E59CD;
		border-radius: 1.3334vw;
		font-size: 4vw;
	}
	.question-box .q-head .q-hint::before {
		left: -1.0667vw;
		top: -4.2667vw;
		width: 6vw;
		height: 5.3334vw;
	}
	.question-box.q1 .q-head .q-hint {
		right: 7.2vw;
		top: 32vw;
	}
	.question-box.q2 .q-head .q-hint {
		margin-bottom: 6.6667vw;
	}
	.question-box.q3 .q-head .q-hint {
		margin-top: -2.6667vw;
		margin-bottom: -29.3334vw;
		padding: 1.3334vw 3.3334vw;
 	}
	.question-box.q4 .q-head .q-hint {
		margin-bottom: -23.4667vw;
	}
	.question-box.q5 .q-head .q-hint {
		margin-bottom: 4vw;
	}
	.question-box .q-head .q-pic {
		border-radius: 0 0 2.6667vw 2.6667vw;
	}
	.question-box .answer {
		gap: 2.9334vw;
		margin-bottom: 10.6667vw;
	}
	.question-box .answer li {
		height: 16vw;
		border-radius: 2.6667vw;
		box-shadow: 0.8vw 0.8vw 0 #00137B;
		font-size: 7.4667vw;
	}
	.question-box.q3 .answer li {
		font-size: 5.8667vw;
	}
	.question-box .answer li:hover,
	.question-box .answer li:focus {
		transform: translate(0.4vw,0.4vw);
		box-shadow: 0.4vw 0.4vw 0 #00137B;
	}
	.question-box .answer li span.correct {
		width: 13.3334vw;
		height: 13.3334vw;
	}
	.question-box .answer li span.incorrect {
		width: 10.6667vw;
		height: 10.6667vw;
	}
	.question-box .answer-box .incorrect.is--active,
	.question-box .answer-box .correct.is--active {
		margin-bottom: 9.3334vw;
	}
	.question-box .answer-box .incorrect h2,
	.question-box .answer-box .correct h2 {
		font-size: 9.3334vw;
	}
	.question-box .answer-box .correct .bg-white {
		margin-top: 5.3334vw;
		border-radius: 2.6667vw;
	}
	.question-box .answer-box .correct h3 {
		margin-bottom: 4vw;
		font-size: 9.3334vw;
	}
	.question-box .answer-box .correct .a-pic {
		margin-bottom: 4vw;
	}
	.question-box .answer-box .correct .a-pic figcaption {
		font-size: 2.9334vw;
	}
	.question-box .answer-box .correct dt span {
		font-size: 3.7334vw;
	}
	.question-box .answer-box .correct dd {
		font-size: 4.2667vw;
	}
	.question-box.q5 .answer-box .correct .a-pic {
		margin-bottom: 6.6667vw;
	}
}

/* --------------------------------------------------
	.result-area
-------------------------------------------------- */
.result-area {
	margin-top: 25px;
}
.result-base {
	position: relative;
	margin: 0 auto 50px;
	padding-bottom: 60px;
	width: 89.3334%;
	background-color: #FFF;
	border-radius: 20px;
	box-sizing: border-box;
}
.result-allcorrect {
	display: block;
	margin-bottom: -40px;
	height: 330px;
	background-image: url("../img/result_bg.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	border-radius: 20px 20px 0 0;
	opacity: 0;
	transition: all 1s linear;
}
.result-allcorrect h1 {
	margin-left: 19.403%;
	margin-bottom: 20px;
	padding-top: 40px;
	width: 64.0299%;
	transform: scale(0.7);
	transition: all 0.8s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.1s;
	transform-origin: center;
	opacity: 0;
}
.result-allcorrect p {
	font-weight: 700;
	font-size: 34px;
	line-height: 1.4;
	text-align: center;
	text-shadow: 0px 0px 3px #fff;
	transform: translate(0,10%);
	transition: all 1s cubic-bezier(0.680, -0.550, 0.265, 1.550) 0.5s;
	opacity: 0;
}
.result-allcorrect.is--active {
	opacity: 1;
}
.result-allcorrect.is--active h1 {
	transform: scale(1);
	opacity: 1;
}
.result-allcorrect.is--active p {
	transform: translate(0,0);
	opacity: 1;
}
.result-normal {
	display: none;
	padding: 70px 0 65px;
}
.result-normal h1 {
	font-weight: 700;
	font-size: 50px;
	line-height: 1;
	text-align: center;
}
.result {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 30px;
	margin: 0 auto 40px;
	width: 85.0747%;
}
.result div {
	display: flex;
	align-items: center;
	height: 110px;
	border-bottom: #D4D4D4 2px solid;
}
.result dt {
	flex-grow: 0;
}
.result dt span {
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: #193196;
}
.result dt span.num {
	display: inline-block;
	padding: 0 0.1em;
	font-family: "europa", sans-serif;
	font-size: 60px;
}
.result dd {
	flex-grow: 1;
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	text-align: center;
}
.result dd span {
	display: block;
	margin: 0 auto;
	text-indent: -9999px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}
.result dd .correct {
	width: 70px;
	height: 70px;
	background-image: url("../img/icon_o.png");
}
.result dd .incorrect {
	width: 65px;
	height: 65px;
	background-image: url("../img/icon_x.png");
}
.result-base .score {
	font-weight: 700;
	font-size: 50px;
	line-height: 1;
	text-align: center;
}
.result-base .score span {
	display: inline-block;
	font-family: "europa", sans-serif;
	font-size: 200px;
	line-height: 1;
}
@media screen and (max-width: 750px) {
	.result-area {
		margin-top: 3.3334vw;
	}
	.result-base {
		margin-bottom: 6.6667vw;
		padding-bottom: 8vw;
		border-radius: 2.6667vw;
	}
	.result-allcorrect {
		margin-bottom: -5.3334vw;
		height: 44vw;
		border-radius: 2.6667vw 2.6667vw 0 0;
	}
	.result-allcorrect h1 {
		margin-bottom: 2.6667vw;
		padding-top: 5.3334vw;
	}
	.result-allcorrect p {
		font-size: 4.5334vw;
		text-shadow: 0px 0px 0.4vw #fff;
	}
	.result-normal {
		padding: 9.3334vw 0 8.6667vw;
	}
	.result-normal h1 {
		font-size: 6.6667vw;
	}
	.result {
		gap: 0 4vw;
		margin-bottom: 5.3334vw;
	}
	.result div {
		height: 14.6667vw;
		border-bottom: #D4D4D4 1px solid;
	}
	.result dt span {
		font-size: 4vw;
	}
	.result dt span.num {
		font-size: 8vw;
	}
	.result dd {
		font-size: 5.3334vw;
	}
	.result dd .correct {
		width: 9.3334vw;
		height: 9.3334vw;
	}
	.result dd .incorrect {
		width: 8.6667vw;
		height: 8.6667vw;
	}
	.result-base .score {
		font-size: 6.6667vw;
	}
	.result-base .score span {
		font-size: 26.6667vw;
	}
}