@charset "UTF-8";
@keyframes eyeBlink {
	0% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	85% {
		opacity: 1;
	}
	90% {
		opacity: 0;
	}
	95% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
:root {
	--color-orange: #cf4020;
	--color-text: #333;
	--color-beige: #cdb07f;
	--color-white: #fff;
	--font-gothic: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック体', YuGothic, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	--font-mincho: "游明朝", YuMincho, "ヒラギノ明朝 Pr6 W6", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
html {
	height: 100%;
	overflow: hidden;
	width: 100%;
}
body {
	background-color: var(--color-beige);
	color: var(--color-text);
	font-family: var(--font-gothic);
	font-size: 15px;
	line-height: 1.8;
	overflow-wrap: break-word;
	height: 100%;
	overflow: hidden;
	width: 100%;
}
.contents {
	width: 1920px;
	height: 1080px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
	visibility: hidden;
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, visibility;
	pointer-events: none;
}
.contents.isShow {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.step {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition-property: opacity, visibility;
	transition-duration: .5s;
}
.step.isShow {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.step-question {}
.step-answer {}
.step_base {
	position: relative;
	z-index: 0;
}
.step_base > img {
	display: block;
}
.step_btn {
	display: block;
	position: absolute;
	z-index: 1;
	width: 570px;
	height: 518px;
	bottom: 150px;
	left: 134px;
	color: var(--color-white);
	font-size: 100px;
	font-weight: bold;
	line-height: 1;
	transition-duration: .3s;
	transition-property: opacity, visibility;
}
.step_btn[disabled] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 0;
}
.step_btn-start {
	opacity: 0;
}
.step_btn-stop {}
.step_btn_icon {
	display: block;
	background-color: var(--color-white);
	position: relative;
	z-index: 1;
	width: 100px;
	height: 100px;
	border-radius: 10px;
	margin: 0 auto;
}
.step_btn_text {
	display: block;
	position: relative;
	z-index: 2;
	margin-top: 50px;
}
.step_btn_bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background-color: #cf4020;
	border-radius: 10px;
}
.step_eye {
	width: 73px;
	position: absolute;
	opacity: 1;
	animation-name: eyeBlink;
	animation-iteration-count: infinite;
	animation-duration: 3s;
	animation-timing-function: steps(1);
}
.step_eye > img {
	display: block;
	width: 100%;
	height: auto;
}
.step_eye-left {
	top: 868px;
	left: 1205px;
}
.step_eye-right {
	top: 868px;
	left: 1418px;
}
.step_answer {
	position: absolute;
	z-index: 2;
	top: 260px;
	left: 123px;
	width: 855px;
	height: 640px;
	overflow: hidden;
}
.step_answer_loading {
	position: absolute;
	z-index: 1;
	width: 100px;
	height: 100px;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	fill: var(--color-orange);
	animation-name: rotate;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(8);
	pointer-events: none;
	animation-play-state: paused;
	opacity: 0;
	transition-duration: .3s;
	transition-property: opacity;
}
.step_answer_loading.isShow {
	opacity: 1;
	animation-play-state: running;
}
.step_answer_scroll {
	height: 640px;
	overflow: auto;
	position: relative;
}
.step_answer_text {
	font-size: 40px;
	white-space: pre-line;
}
.step_backBtn {
	position: absolute;
	z-index: 1;
	bottom: 30px;
	right: 40px;
	width: 250px;
	height: 137px;
	opacity: 0;
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.debugText {
	position: absolute;
	z-index: 10;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 50px;
	background-color: #fff;
}
.debugText:empty {
	display: none;
}
.step_indicator {
	visibility: hidden;
	opacity: 0;
	width: 570px;
	height: 518px;
	bottom: 150px;
	left: 134px;
	position: absolute;
	pointer-events: none;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 30px;
	transition-duration: 0.3s;
	transition-property: opacity, visibility;
}
.step_indicator.isShow {
	opacity: 1;
	visibility: visible;
}
.step_indicator_bg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background-color: #cf4020;
	border-radius: 10px;
	z-index: 2;
}
.step_indicator_dot {
	animation-play-state: paused;
	display: block;
	width: 30px;
	height: 30px;
	background-color: var(--color-white);
	border-radius: 50%;
	position: relative;
	z-index: 3;
	animation-name: fadeIn;
	animation-duration: 0.6s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
.step_indicator.isShow .step_indicator_dot {
	animation-play-state: running;
}
.step_indicator_dot-no2 {
	animation-delay: 0.2s;
}
.step_indicator_dot-no3 {
	animation-delay: 0.4s;
}