@charset "utf-8";

/* header */
header {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 38px;
	background: #ffec50;
	background: linear-gradient(180deg, #ffc000 0%, #ffec50 100%);
	z-index: 10;
}

header .logo {
	position: absolute;
	top: 3px;
	left: 3px;
	height: 45px;
	width: 40px;
}

header .btnArea {
	position: absolute;
	top: 0;
	left: 50px;
	height: 60px;
	width: 125px;
}

header .btnArea div {
	position: relative;
	margin: 0;
	width: 60px;
}

header .btnArea .btn {
	cursor: pointer;
}

header .lessonNo {
	position: absolute;
	top: 6px;
	right: 0;
	height: 45px;
	width: auto;
}

header .lessonNo img {
	height: 100%;
	width: auto;
}

header .ttlep {
	position: absolute;
	top: 6px;
	left: 50%;
	transform: translateX(-50%);
	height: 30px;
	width: auto;
}

header .ttlep-1 {
	position: absolute;
	top: 32px;
	right: 3px;
	height: 52px;
	width: auto;
}

header .ttlep img,
header .ttlep-1 img {
	height: 100%;
	width: auto;
}

#headerBg {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 33px;
	overflow: hidden;
	z-index: 9;
}

#headerBg .bg01,
#headerBg .bg02 {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 180%;
	height: 100%;
}

#headerBg .bg01 {
	top: 3px;
}

#headerBg .bg01.ep {
	top: 0;
}

#headerBg .bg02 {
	top: 0;
}

#headerBg .bg01 svg,
#headerBg .bg02 svg {
	height: 100%;
	width: 100%;
}

/* contents */
#contents {
	position: relative;
	margin: 0 auto -30px auto;
	transform: translateY(-30px);
}

#contents .bgBlue {
	position: relative;
	margin: 0 auto;
	padding: 40px 0 30px 0;
	background: #05b8de;
	background: linear-gradient(180deg, #77fcf1 0%, #05b8de 100%);
}

#contents .bgBlueBtm {
	position: relative;
	margin: 0 auto;
	widows: 100%;
	height: 40px;
	transform: translateY(-1px);
}

#contents .bgBlueBtm svg {
	height: 100%;
	width: 100%;
}

/* intro */
.intro header {
	background: #2777c1;
	background: linear-gradient(180deg, #1fc1de 0%, #2777c1 100%);
}

.intro header .logo {
	top: 5px;
	left: 50%;
	transform: translateX(-50%);
	height: 110px;
	width: 105px;
}

.intro.kiyaku header .logo {
	height: 90px;
	width: 95px;
}

.intro .logoC {
	position: relative;
	margin: 30px auto 70px auto;
	height: 185px;
	width: 180px;
	transform: translateX(-6px);
}

.introBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100vh;
	background-image: url("../img/top/bg.jpg");
	background-color: #e2fef5;
	background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.intro #contents {
	padding-top: 90px;
}

.intro.kiyaku #contents {
	padding-top: 80px;
}

.intro .safari {
	width: 30px;
	vertical-align: bottom;
	display: inline-block;
	margin: 0 5px;
}

.introTxtWrap {
	position: relative;
	margin: 0 auto;
	padding: 0 0 50px 0;
	width: calc(100% - 30px);
	max-width: 500px;
}

.introTxt {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.9);
	border: solid 1px #003e5b;
	border-radius: 10px;
	box-shadow: -1.2px 1.2px 0px 0px #003e5b;
}

.introTxt p {
	position: relative;
	margin: 0 auto;
	line-height: 2em;
}

.introTxt p .strong {
	color: #fd6e0b;
}

.introTxt .icon {
	position: relative;
	margin: 15px auto 0 auto;
	width: 30%;
	max-width: 40px;
}

.introTxt .icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

.intro #btnArea.flexbox {
	gap: 0 5px;
}

.intro .arrow {
	position: fixed;
	bottom: 5px;
	right: 20px;
	width: 28px;
	animation: arrowD 1.8s linear infinite;
	z-index: 10010;
}

.intro .arrow img {
	display: block;
	max-width: 100%;
	height: auto;
}

@keyframes arrowD {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-15px);
	}
}

/* kiyaku */
.kiyakuTxtWrap {
	position: relative;
	margin: 0 auto;
	padding: 0 0 30px 0;
	width: calc(100% - 30px);
	max-width: 500px;
}

.kiyakuTxt {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	padding: 25px 20px 40px 20px;
	background-color: rgba(255, 255, 255, 0.9);
	border: solid 1px #003e5b;
	border-radius: 10px;
	box-shadow: -1.2px 1.2px 0px 0px #003e5b;
}

.kiyakuTxt h2 {
	position: relative;
	margin: 0 auto;
	padding-bottom: 3px;
	text-align: center;
	font-weight: 700;
	color: #3ac3c8;
	border-bottom: solid 1px #3ac3c8;
}

.kiyakuTxt p {
	position: relative;
	margin: 15px auto 0 auto;
	line-height: 2em;
	text-align: center;
}

.kiyakuTxt ul {
	margin: 15px auto 0 auto;
}

.kiyakuTxt ul li {
	padding: 5px 0;
	list-style: inside;
	margin-left: 1.2em;
	text-indent: -1.4em;
}

.kiyakuTxt ul li a {
	font-weight: 700;
	color: #397cf0;
	font-size: 100%;
	text-decoration: underline;
}

.kiyakuTxt .button.nolink {
	pointer-events: none;
	background: #e4e5e6;
	background: linear-gradient(180deg, #e4e5e6 0%, #cfd0d2 100%);
	border: solid 1px #b0b0b0;
	color: #b0b0b0 !important;
}

/*Checkbox*/
.accept {
	position: relative;
	margin: 0 auto 60px auto;
}

.accept input[type="checkbox"] {
	display: none;
}

.accept input[type="checkbox"] + label {
	display: block;
	position: relative;
	padding: 45px 0 10px 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	text-align: center;
}

.accept input[type="checkbox"] + label:before {
	content: "";
	display: block;
	width: 12px;
	height: 12px;
	border: 2px solid #65cdd1;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 20px;
	cursor: pointer;
	-webkit-transition: all 0.12s, border-color 0.08s;
	transition: all 0.12s, border-color 0.08s;
}

.accept input[type="checkbox"]:checked + label:before {
	width: 8px;
	top: 15px;
	left: calc(50% + 2px);
	border-radius: 0;
	opacity: 1;
	border-bottom: 2px solid #65cdd1;
	border-right: 2px solid #65cdd1;
	border-top-color: transparent;
	border-left-color: transparent;
	-webkit-transform: rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.accept input::-webkit-contacts-auto-fill-button,
.accept input::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
}

/* prologue, epilogue */
.prologueBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100vh;
	background-image: url("../img/prologue/bg_ep0.jpg");
	background-color: #e2fef5;
	background-position: 50% 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.epilogueBg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100vh;
	background-image: url("../img/epilogue/bg_ep6.jpg");
	background-color: #e2fef5;
	background-position: 50% 100%;
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.epTxtWrap {
	position: relative;
	margin: 0 auto;
	padding: 35px 0 30px 0;
	width: calc(100% - 30px);
	max-width: 500px;
}

.epTxt {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.8);
	border: solid 1px #003e5b;
	border-radius: 10px;
	box-shadow: -1.2px 1.2px 0px 0px #003e5b;
}

.epTxt p {
	position: relative;
	margin: 0 auto;
	line-height: 2em;
}

.epTxt .name {
	position: relative;
	margin: 5px 0 min(-45px, -12%) auto;
	transform: translateX(30px);
	width: 80%;
	max-width: 280px;
}

.loading {
	position: absolute;
	overflow: hidden;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #ffffff 0%, #ffffff 30%, #1fc1de 55%, #29a5bc 80%, #1fc1de 100%);
	background-size: 100% 330%;
	z-index: 20000;
	animation: wave linear 4.2s 1 forwards;
}

@keyframes wave {
	from {
		background-position: 0 100%;
	}

	to {
		background-position: 0 0;
	}
}

.loading p.lessonStart {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #ffffff;
	font-family: "PlaywriteAUVIC";
	font-size: 0.42rem;
	font-style: italic;
}

.placeWrap {
	position: relative;
	margin: 0 auto 30px auto;
	overflow: hidden;
	width: calc(100% - 36px);
	/* max-width: 720px; */
	width: 339px;
	height: 225.64px;
	/* padding-top: min(60%, 400px); */
	border: solid 2px #003e5b;
}

.placeWrap .placeInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* min-width: 100%; */
	/* min-height: 100%; */
	width: 339px;
	height: 225.64px;
}

.placeWrap .placeInner img {
	min-width: 100%;
	min-height: 100%;
}

.placeWrap .placeInner img.zoom {
	width: auto;
	height: auto;
}

.returnPlace {
	position: absolute;
	bottom: 2px;
	left: 2px;
	width: 35px;
	height: 35px;
}

.returnPlace img {
	max-width: 100%;
	height: auto;
	display: block;
}

.directingArrow {
	position: absolute;
	bottom: 45px;
	right: 85px;
	width: 45px;
	height: 45px;
}

.directingArrow img {
	max-width: 100%;
	height: auto;
	display: block;
	transform: rotate(-10deg);
}

.charaTxtWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 500px;
}

.charaTxt {
	position: relative;
	margin: 0 0 0 auto;
	width: calc(82% - 40px);
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.7);
	border: solid 1px #003e5b;
	border-radius: 10px;
	box-shadow: -1.2px 1.2px 0px 0px #003e5b;
}

.charaTxt p {
	position: relative;
	margin: 0 auto;
	line-height: 2em;
}

.charaImg {
	position: absolute;
	bottom: -70px;
	left: -5px;
	width: 23%;
	max-width: 100px;
	z-index: 20;
}

.charaImg.btm {
	top: -10px;
	bottom: auto;
}

.nazoWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 500px;
	overflow: hidden;
}

.nazoWrap.zoomWrap {
	height: 0;
	padding-top: 70%;
}

.nazoWrap.zoomWrap .nazoInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

.nazoWrap.zoomWrap .nazoInner img {
	width: auto;
	height: auto;
}

.nazoTxtWrap {
	position: relative;
	margin: 0 auto 25px auto;
	width: calc(100% - 70px);
	max-width: 500px;
	padding: 25px 20px;
	background-color: rgba(255, 255, 255, 0.7);
	border: solid 1px #003e5b;
	border-radius: 10px;
	box-shadow: -1.2px 1.2px 0px 0px #003e5b;
}

.lessonImg {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 500px;
}

/* btnArea, button */
#btnArea {
	position: relative;
	margin: -40px auto 0 auto;
	width: calc(100% - 60px);
	text-align: center;
}

#btnArea.Btm40 {
	padding-bottom: 40px;
}

/*.intro .button {
	width: calc(50% - 2em - 10px);
}*/

.intro #btnArea {
	max-width: 480px;
}

.button {
	position: relative;
	margin: 0 auto;
	display: inline-block;
	width: auto;
	max-width: 480px;
	padding: 7px 3.5em;
	background: #fd644f;
	background: linear-gradient(180deg, #f28e26 0%, #fd644f 100%);
	border: solid 1px #f1692c;
	border-radius: 100px;
	color: #ffffff !important;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}

.button.blue {
	background: linear-gradient(180deg, #26b6f2 0%, #244fca 100%);
	border: solid 1px #13338e;
}

.button.last {
	margin: 20px auto 0 auto;
}

.btn.btn_finalQuestion {
	position: relative;
	margin: 20px auto 0 auto;
	display: inline-block;
	width: auto;
	max-width: 480px;
	padding: 7px 3.5em;
	background: linear-gradient(180deg, #ed7faa 0%, #d03b8a 100%);
	border: solid 1px #e7648b;
	border-radius: 100px;
	color: #ffffff !important;
	text-align: center;
	font-weight: 700;
	cursor: pointer;
}

.button.red {
	background: linear-gradient(180deg, #ed7faa 0%, #d03b8a 100%);
	border: solid 1px #e7648b;
}

.button.green {
	background: linear-gradient(180deg, #6acb8f 0%, #39af7f 100%);
	border: solid 1px #4fce79;
}

.button.last {
	margin: 20px auto 0 auto;
}

.button.gray {
	background: linear-gradient(180deg, #ffffff 0%, #f6dfcf 100%);
	border: solid 1px #f1692c;
	color: #f67e35 !important;
}

.button.gray.opacity05 {
	background: linear-gradient(0deg, rgba(142, 88, 88, 0.2), rgba(142, 88, 88, 0.2)),
		linear-gradient(180deg, #ffffff 0%, #f7dfcf 100%);
}

.opacity05 {
	opacity: 0.5;
}

.selectArea {
	margin: 20px auto 0 auto !important;
	width: calc(100% - 20px) !important;
	max-width: 600px;
	gap: 10px 8px;
}

.selectBtn {
	position: relative;
	margin: 0;
	width: calc(20% - 11px);
	padding: 1em 0;
	line-height: 2em;
	background: #fd644f;
	background: linear-gradient(180deg, #f28e26 0%, #fd644f 100%);
	border: solid 2px #f4824f;
	border-radius: 5px;
	color: #ffffff !important;
	text-align: center;
}

.selectBtn.clear {
	background: #e4e5e6;
	background: linear-gradient(180deg, #e4e5e6 0%, #cfd0d2 100%);
	border: solid 2px #848383;
	color: #848383 !important;
}

.selectBtn.active {
	background: #f2e126;
	background: linear-gradient(180deg, #f2e126 0%, #fd9d4f 100%);
	border: solid 2px #950ddb;
	color: #950ddb !important;
}

.selectBtn.nolink {
	pointer-events: none;
}

/* form */
.inputArea {
	position: relative;
	margin: 30px auto 60px auto;
	padding: 0 20px;
}

.inputArea .inputTxt {
	position: relative;
	display: block;
	margin: 0 auto 15px auto !important;
	padding: 0 8px;
	border: solid 1px #9aadb6;
	background-color: #fffff3;
	width: calc(100% - 16px);
	max-width: 700px;
	border-radius: 5px;
	height: 2.8em;
	font-size: 0.16rem;
}

::placeholder {
	color: #c8c8c8;
}

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
	visibility: hidden;
	pointer-events: none;
	position: absolute;
	right: 0;
}

/* hint */
#hint {
	position: fixed;
	left: 5px;
	bottom: 5px;
	width: 64px;
	height: 64px;
}

#hint .btn_hint {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	z-index: 300;
	cursor: pointer;
}

/* calpt */
#calpt {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 30px auto 0 auto;
	width: 100%;
}

#calpt::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30px;
	background-color: #ffb244;
	border-top: solid 2px #ffec50;
	content: "";
	display: block;
}

#calpt .numWrap {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 49%;
	max-width: 300px;
	height: 0;
	background-image: url("../img/lesson/calpo.png");
	background-position: 50% 100%;
	background-size: contain;
	background-repeat: no-repeat;
	padding-top: min(37.27%, 228.5px);
}

#calpt .numWrap.ndata {
	background-image: url("../img/lesson/calpo02.png");
}

#calpt .numWrap.ndataPerfect {
	background-image: url("../img/lesson/calpo01.png");
}

#calpt .numWrap .num {
	position: absolute;
	top: 36.7%;
	left: 50.9%;
	width: 48.4%;
	transform: translateX(-50%);
}

#calpt .numWrap .num div {
	position: relative;
	margin: 0;
	width: 19.75%;
}

/* popup */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	z-index: 10000;
	overflow-y: scroll;
}

.closeWin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10001;
}

.btnClose,
.closeBtn {
	position: fixed;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	z-index: 10010;
	cursor: pointer;
}

.popupInner {
	position: relative;
	margin: 30px auto;
	width: calc(100% - 30px);
	z-index: 10003;
}

.popupInner h2 {
	position: relative;
	margin: 0 auto 10px auto;
	display: block;
	width: 40%;
	max-width: 180px;
	min-width: 100px;
}

/* icon */
#iconWin.popup {
	background-color: rgba(58, 195, 200, 0.9);
}

#iconWin .popupInner {
	position: absolute;
	bottom: 45px;
	width: calc(100% - 5px);
}

#iconWin .popupInner p {
	position: relative;
	text-align: right;
	color: #ffffff;
	text-shadow: 0px 1px 3px rgba(0, 62, 91, 0.5), -2px 1px 3px rgba(10, 62, 91, 0.5);
}

/* map */
#mapWin.popup {
	background-color: rgba(247, 84, 26, 0.9);
}

#mapWin .mapWrap {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	/* width: 100%; */
	/* max-width: 720px; */
	width: 345px;
	height: 326.39px;
	/* padding-top: min(70%, 400px); */
	border: solid 2px #bf340d;
}

#mapWin .mapWrap .mapInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 345px;
	height: 326.39px;
	/* min-width: 100%; */
	/* min-height: 100%; */
}

#mapWin .mapWrap .mapInner img {
	min-width: 100%;
	min-height: 100%;
}

#mapWin .mapWrap .mapInner img.zoom {
	width: auto;
	height: auto;
}

#mapWin.popup p {
	position: relative;
	padding-top: 20px;
	text-align: center;
	color: #ffffff;
}

/* finalQuestion */
#finalQuestionWin.popup {
	background-color: #05b8de;
}

#finalQuestionWin .finalQuestionWrap {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	max-width: 720px;
	height: 0;
	padding-top: min(70%, 400px);
	border: solid 2px #05829e;
}

#finalQuestionWin .finalQuestionWrap .finalQuestionInner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
}

#finalQuestionWin .finalQuestionWrap .finalQuestionInner img {
	min-width: 100%;
	min-height: 100%;
}

#finalQuestionWin .finalQuestionWrap .finalQuestionInner img.zoom {
	width: auto;
	height: auto;
}

#finalQuestionWin.popup p {
	position: relative;
	padding-top: 20px;
	text-align: center;
	color: #ffffff;
}

/* history */
#historyWin.popup {
	background-color: rgba(63, 32, 101, 0.9);
}

#historyWin .historyWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 720px;
	padding: 20px;
	background-color: #ffffff;
	border-radius: 5px;
}

#historyWin .historyWrap ul {
	position: relative;
	margin: 20px auto;
}

#historyWin .historyWrap ul li {
	position: relative;
	margin: 0 auto 25px auto;
}

#historyWin .historyWrap ul li .ttlNo {
	position: relative;
	margin: 0 auto;
	color: #f7541a;
	font-weight: 700;
}

#historyWin .historyWrap ul li .Hlist {
	position: relative;
}

#historyWin .historyWrap ul li .Hlist p {
	position: relative;
	margin: 0 auto;
	padding: 5px 0 0 1.2em;
}

#historyWin .historyWrap ul li .Hlist p::before {
	position: absolute;
	top: 5px;
	left: 0;
	content: "・";
}

#historyWin .historyWrap ul li .Himg {
	position: relative;
	margin: 10px auto 0 auto;
}

#historyWin .historyWrap ul li .Himg .Img {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 380px;
}

#historyWin .historyWrap .btn_ep0,
#historyWin .historyWrap .btn_ep1,
#historyWin .historyWrap .btn_ep2,
#historyWin .historyWrap .btn_kiyaku {
	position: relative;
	margin: 20px auto 0 auto;
}

#historyWin .historyWrap .btn_ep0 p,
#historyWin .historyWrap .btn_ep1 p,
#historyWin .historyWrap .btn_ep2 p,
#historyWin .historyWrap .btn_kiyaku p {
	position: relative;
	display: inline-block;
	color: #f7541a;
	font-weight: 700;
}

#historyWin .historyWrap .btn_ep0 p::after,
#historyWin .historyWrap .btn_ep1 p::after,
#historyWin .historyWrap .btn_ep2 p::after,
#historyWin .historyWrap .btn_kiyaku p::after {
	position: absolute;
	top: 50%;
	right: -20px;
	content: "▼";
	transform: translateY(-50%) scale(0.6, 0.6);
	transition: all 0.3s ease-out;
}

#historyWin .historyWrap .btn_ep0.disp p::after,
#historyWin .historyWrap .btn_ep1.disp p::after,
#historyWin .historyWrap .btn_ep2.disp p::after,
#historyWin .historyWrap .btn_kiyaku.disp p::after {
	transform: translateY(-50%) scale(0.6, 0.6) rotate(180deg);
}

#historyWin .historyWrap .txt_ep0,
#historyWin .historyWrap .txt_ep1,
#historyWin .historyWrap .txt_ep2,
#historyWin .historyWrap .txt_kiyaku {
	position: relative;
	margin: 0 auto;
	display: none;
}

#historyWin .historyWrap .link {
	font-weight: 700;
	color: #397cf0;
	font-size: 100%;
	text-decoration: underline;
}

#historyWin .historyWrap .txt_kiyaku ul {
	margin: 0 auto;
}

#historyWin .historyWrap .txt_kiyaku ul li {
	list-style: inside;
	list-style-type: "・";
	text-indent: -1.2em;
	margin: 0 auto 5px 1.2em;
}

#historyWin .historyWrap .txt_kiyaku .info {
	margin: 15px auto 0 auto;
	line-height: 2em;
	text-align: center;
}

/* hint */
#hintWin.popup {
	background-color: rgba(17, 147, 134, 0.9);
}

#hintWin .hintWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 720px;
	padding: 5px 20px 20px 20px;
	background-color: #ffffff;
	border-radius: 5px;
}

#hintWin .hintWrap .ttl_hint {
	position: relative;
	margin: 15px auto 0 auto;
	padding: 5px 10px;
	background-color: #ffffff;
	border: solid 1px #68b1a8;
	cursor: pointer;
}

#hintWin .hintWrap .ttl_hint p {
	position: relative;
	display: inline-block;
	color: #68b1a8;
	font-weight: 700;
}

#hintWin .hintWrap .ttl_hint p::after {
	position: absolute;
	top: 50%;
	right: -20px;
	content: "▼";
	transform: translateY(-50%) scale(0.6, 0.6);
	transition: all 0.3s ease-out;
}

#hintWin .hintWrap .ttl_hint.disp {
	background-color: #68b1a8;
}

#hintWin .hintWrap .ttl_hint.disp p {
	color: #ffffff;
}

#hintWin .hintWrap .ttl_hint.disp p::after {
	transform: translateY(-50%) scale(0.6, 0.6) rotate(180deg);
}

#hintWin .hintWrap .txt_hint {
	position: relative;
	margin: 0 auto;
	display: none;
	padding: 10px;
}

#hintWin .hintWrap .txt_hint.disp {
	display: block;
	border: solid 1px #68b1a8;
}

/* next */
#nextWin.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#nextWin .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#nextWin .flexbox {
	justify-content: space-around;
}

#nextWin .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#nextWin .nextWrap .next .strong {
	color: #fbf809;
}

#nextWin .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#nextWin .nextWrap .nextQ {
	padding-bottom: 30px;
}

#nextWin .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#nextWin .nextWrap .nextQ .strong {
	color: #fbf809;
}

#nextWin .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* next2 */
#next2Win.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#next2Win .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#next2Win .flexbox {
	justify-content: space-around;
}

#next2Win .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#next2Win .nextWrap .next .strong {
	color: #fbf809;
}

#next2Win .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#next2Win .nextWrap .nextQ {
	padding-bottom: 30px;
}

#next2Win .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#next2Win .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* next3 */
#next3Win.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#next3Win .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#next3Win .flexbox {
	justify-content: space-around;
}

#next3Win .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#next3Win .nextWrap .next .strong {
	color: #fbf809;
}

#next3Win .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#next3Win .nextWrap .nextQ {
	padding-bottom: 30px;
}

#next3Win .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#next3Win .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* next4 */
#next4Win.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#next4Win .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#next4Win .flexbox {
	justify-content: space-around;
}

#next4Win .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#next4Win .nextWrap .next .strong {
	color: #fbf809;
}

#next4Win .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#next4Win .nextWrap .nextQ {
	padding-bottom: 30px;
}

#next4Win .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#next4Win .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* next5 */
#next5Win.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#next5Win .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#next5Win .flexbox {
	justify-content: space-around;
}

#next5Win .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#next5Win .nextWrap .next .strong {
	color: #fbf809;
}

#next5Win .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#next5Win .nextWrap .nextQ {
	padding-bottom: 30px;
}

#next5Win .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#next5Win .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* next6 */
#next6Win.popup {
	background-color: rgba(254, 255, 240, 0.9);
}

#next6Win .nextWrap {
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 40px);
	max-width: 720px;
	padding: 20px;
	background-color: #05b5db;
	border-radius: 10px;
	color: #ffffff;
	box-shadow: -2px 3px 5px -2px rgba(0, 0, 0, 0.4);
}

#next6Win .flexbox {
	justify-content: space-around;
}

#next6Win .nextWrap .next {
	position: relative;
	margin: 0 auto 20px auto;
}

#next6Win .nextWrap .next .strong {
	color: #fbf809;
}

#next6Win .nextWrap .nextCalpt {
	position: relative;
	margin: 20px auto;
	color: #fbf809;
	font-weight: 700;
}

#next6Win .nextWrap .nextQ {
	padding-bottom: 30px;
}

#next6Win .nextWrap .btnArea {
	max-width: 156px;
	flex-direction: column;
	row-gap: 10px;
}

#next6Win .nextWrap .btnArea .button {
	display: block;
	padding: 7px 1em;
	flex: 1;
	margin: 0 5px;
}

/* ng */
#ngWin.popup {
	background-color: rgba(5, 83, 138, 0.95);
}

#ngWin .ngWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#ngWin .ngWrap h2 {
	position: relative;
	margin: 0 auto;
	width: 80%;
	max-width: 280px;
}

#ngWin .ngWrap p {
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 15px 0;
	color: #ffffff;
	white-space: nowrap;
}

#ngWin .ngWrap div {
	text-align: center;
	font-size: 180%;
	color: #ffffff;
	width: 90vw;
	line-height: 140%;
}

/* answer */
#answerWin.popup {
	background-color: rgba(5, 83, 138, 0.95);
}

#answerWin .ngWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#answerWin .ngWrap h2 {
	position: relative;
	margin: 0 auto;
	width: 80%;
	max-width: 280px;
}

#answerWin .ngWrap p {
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 15px 0;
	color: #ffffff;
	white-space: nowrap;
}

/* ok */
#okWin.popup {
	background-color: rgba(178, 255, 252, 0.95);
}

#okWin a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 20000;
}

#okWin .okWrap {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#okWin .okWrap h2 {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 280px;
}

#okWin .okWrap p {
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding: 15px 0;
	color: #3e174b;
	white-space: nowrap;
}

/* ----- ngWin, okWin ----- */
@media screen and (max-height: 199px) {
	#ngWin .ngWrap {
		position: relative;
		margin: 50px auto 0 auto;
		top: auto;
		left: auto;
		transform: translate(0, 0);
	}

	#ngWin .ngWrap h2 {
		width: 55%;
	}

	#okWin .okWrap {
		position: relative;
		margin: 50px auto 0 auto;
		top: auto;
		left: auto;
		transform: translate(0, 0);
	}

	#okWin .okWrap h2 {
		width: 50%;
	}
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	header .ttlep-1 {
		right: calc(50% - 100px);
		transform: translateX(50%);
	}

	/* intro */
	.intro header .logo {
		top: 10px;
		height: 185px;
		width: 180px;
	}

	.intro .logoC {
		height: 225px;
		width: 220px;
	}

	.introBg {
		background-image: url("../img/top/bg_pc.jpg");
	}

	.intro #contents {
		padding-top: 180px;
	}

	.intro #btnArea.flexbox {
		max-width: 400px;
	}

	/* prologue, epilogue */
	.prologueBg {
		background-image: url("../img/prologue/bg_ep0_pc.jpg");
	}

	.epilogueBg {
		background-image: url("../img/epilogue/bg_ep6_pc.jpg");
	}

	#historyWin .historyWrap {
		width: calc(100% - 90px);
		padding: 40px;
	}
}