@charset "utf-8";

body {
	background: url("../img/bg.png") repeat top left;
	font-family: 'Noto Sans JP', sans-serif;
}

img {
	vertical-align: bottom;
}

a:hover {
	opacity: 0.8;
}

* {
	margin: 0;
}

#wrap {
	max-width: 640px;
	position: relative;
	/*topBtnの親要素に指定*/
}

@media screen and (max-width:640px) and (min-width: 1px) {
	#wrap {
		max-width: 100%;
	}
}

@media screen and (min-width: 640px) {
	#wrapper {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 640px 1fr;
		grid-template-columns: 1fr 640px 1fr;
	}
}

.left {
	background: url(../img/bg_pc.png) top left no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.right {
	background: url(../img/bg_pc.png) top right no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

/*-----------------------------------------------
 clearfix
-----------------------------------------------*/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*¥*/
	/*/
	height: auto;
	overflow: hidden;
	/**/
}

/*-----------------------------------------------
 共通
-----------------------------------------------*/
.content .main_cont {
	margin: 20px;
}

.content .main_cont h2.main_cont_ttl {
	margin: 1px;
	padding-top: 1px;
	position: relative;
}


@media screen and (max-width:640px) and (min-width: 1px) {
	.content .main_cont {
		margin: 3.125vw;
	}
}

.main_cont_btn p {
	position: relative;
}

.main_cont_btn p a {
	position: relative;
	display: block;
	opacity: 1;
}

.main_cont_btn p a img {
	filter: drop-shadow(5px 5px 0 #222222);
	transition: all 0.3s;
}

.main_cont_btn p a:hover {
	animation: none;
}

.main_cont_btn p a img:hover,
.main_cont_btn p a img:active {
	filter: none;
	transform: translate3D(5px, 5px, 0);
}

.main_cont_btn .replay_btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

.main_cont_btn .replay_btn a img {
	filter: none;
	width: 316px;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	.main_cont_btn .replay_btn a img {
		width: 49.375vw;
	}

}

.main_cont_btn .replay_btn a img:hover,
.main_cont_btn .replay_btn a img:active {
	transform: none;
}

.note {
	text-align: right;
	margin: -10px 10px;
	font-size: 12px;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	.note {
		margin: -1.562vw 1.563vw;
		font-size: 2.2vw;
	}
}



/*-----------------------------------------------
sp切り替え
-----------------------------------------------*/
#content .for-sp {
	display: none;
}

#content .for-pc {
	display: block;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	#content .for-sp {
		display: block;
	}

	#content .for-pc {
		display: none;
	}
}

/*-----------------------------------------------
 topへ戻る
-----------------------------------------------*/
.back_top {
	text-align: center;
	margin: 70px 0 62px;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	.back_top {
		margin: 10.9375vw 0 9.688vw;
	}

	.back_top img {
		margin: 0 auto;
		max-width: 195px;
		width: 30.46875vw;
	}

}

/*-----------------------------------------------
 banner
-----------------------------------------------*/
.banner {
	background: #99d5c6;
	padding: 58px 67px;
}

.banner img {
	width: 100%;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	.banner {
		padding: 9% 10.5%;
	}
}

/*-----------------------------------------------
 footer
-----------------------------------------------*/
footer {
	background: #b3b3b3;
	font-size: 12px;
	line-height: 1.8;
}

footer .inner {
	width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 49px 0 30px;
	color: #fff;
}

footer .inner a {
	color: #fff;
}

footer .btn {
	width: 263px;
	margin: 0 auto 20px;
}

footer .btn img {
	width: 100%;
}

footer .inner p.terms {
	text-align: center;
	line-height: 1.27;
	margin: 26px 0 37px;
	font-feature-settings: "palt";
	letter-spacing: -0.03em;
}

footer p.terms,
footer p.copy {
	font-size: 18px;
}

@media screen and (max-width:640px) and (min-width: 1px) {

	footer {
		min-width: 100%;
	}

	footer .btn {
		width: 46%;
	}

	footer .inner {
		width: 90%;
		margin: 0 auto;
		padding-bottom: 6%;
	}

	footer .inner p.terms {
		font-size: 2.8125vw;
		margin: 3.5vw 0 6.5vw;
	}

	footer .btn {}

	footer p.terms,
	footer p.copy {
		font-size: 2.5vw;
	}
}


/*-----------------------------------------------
 key-visual
-----------------------------------------------*/
h1,
h2 {
	padding: 0;
	margin: 0;
	font-size: 0;
}

#key-visual {
	background: linear-gradient(180deg, transparent 0%, transparent 48.15%, #222222 48.15%, #222222 100%);
}

#key-visual .inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}

#key-visual .inner h1 {
	position: relative;
	margin: 0;
	animation-delay: 0.1s;
}

#key-visual .inner p.kv_txt {
	position: relative;
	margin: 0;
	animation-delay: 1s;
	width: 428px;
	margin: 26px 0 0 17px;
}

#key-visual .inner .six {
	position: absolute;
	top: 897px;
	right: 7px;
	margin: 0;
	animation-delay: 2s;
}

#key-visual .inner .btn {
	position: relative;
	width: 560px;
	padding: 48px 39px 68px;
	margin: 0;
}

#key-visual .inner .btn a {
	position: relative;
	display: block;
	opacity: 1;
}

#key-visual .inner .btn a img {
	filter: drop-shadow(5px 5px 0 #e8eaed);
	transition: all 0.3s;
}

#key-visual .inner .btn a:hover {
	animation: none;
}

#key-visual .inner .btn a img:hover,
#key-visual .inner .btn a img:active {
	filter: none;
	transform: translate3D(5px, 5px, 0);
}


@media screen and (max-width:640px) and (min-width: 1px) {
	#wrap {
		min-width: inherit;
	}

	#key-visual {
		width: 100%;
	}

	#key-visual .inner {
		min-width: 100%;
	}

	#key-visual img,
	#content img {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	#key-visual .inner h1 {
		width: 100%;
	}

	#key-visual .inner .six {
		width: 28.9%;
		top: 140vw;
		right: 1vw;
	}

	#key-visual .inner .btn {
		width: 88%;
		padding: 7.58vw 6% 10.5vw;
	}


	#key-visual .inner p.kv_txt {
		width: 67%;
		margin: 3.9vw 0 0 2.6%;
	}

}

/*-----------------------------------------------
 content
-----------------------------------------------*/
#content {
	margin-top: 0;
}

#content .mb10 {
	margin-bottom: 10px;
}

#content .mb20 {
	margin-bottom: 20px;
}

#content .mb30 {
	margin-bottom: 30px;
}

#content .mb40 {
	margin-bottom: 40px;
}

#content .mt10 {
	margin-top: 10px;
}

#content .mt20 {
	margin-top: 20px;
}

#content .mt30 {
	margin-top: 30px;
}

#content .fs24 {
	font-size: 24px;
}

#content .pk {
	color: #fb4b92;
}

#content .bold {
	font-weight: bold;
}

#content p {
	margin: 0;
}

#content .inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

#content h2 {
	margin-bottom: 24px;
}

#content .under {
	text-decoration: underline;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	#content {
		min-width: 100%;
	}

	#content p {
		text-align: left;
	}

	#content .inner {
		width: 100%;
		margin: 0 auto;
	}

	#content h2 {
		margin: 0 5% 4%;
	}

	#content .mb10 {
		margin-bottom: 3%;
	}

	#content .mb20 {
		margin-bottom: 4%;
	}

	#content .fs24 {
		font-size: 5.5vw;
	}

	#content .sp-mt20 {
		margin-top: 20px;
	}
}

/*-----------------------------------------------
 line
-----------------------------------------------*/
.line {
	background: url("../img/line_bg.png");
	padding: 10px 0;
	overflow: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}

.line_text {
	display: flex;
}

.line_text img:first-child {
	animation: scroll-left 50s -25s linear infinite;
}

.line_text img:last-child {
	animation: scroll-left2 50s linear infinite;
}

.line_text img {
	width: 157vw;
}

@keyframes scroll-left {
	from {
		transform: translateX(100%);
	}

	to {
		transform: translateX(-100%);
	}
}

@keyframes scroll-left2 {
	from {
		transform: translateX(0%);
	}

	to {
		transform: translateX(-200%);
	}
}


@media screen and (max-width:640px) and (min-width: 1px) {
	.line {
		padding: 2.6vw 0;
	}
}


/*-----------------------------------------------
 main_cont
-----------------------------------------------*/
#content .main_cont {
	background: url("../img/cont_bg.png") no-repeat top left/contain;
	margin: 38px 20px 73px;
}

#content .main_cont h2.main_cont_ttl {
	margin: 1px;
	padding-top: 1px;
	position: relative;
}

#content .main_cont h2.main_cont_ttl span {
	display: block;
}

#content .main_cont h2.main_cont_ttl .cont_ttl_sub {
	position: absolute;
	margin: 11px 18px 0 12px;
}

.cont_ttl_sub,
.cont_ttl_hoshi,
.cont_ttl_or,
.cont_ttl_not {
	opacity: 0;
	transform: scale(0.7);
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.popin {
	opacity: 1;
	transform: scale(1);
}

.cont_ttl_line {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 0.7s ease-out;
}

.cont_ttl_line.popin {
	clip-path: inset(0 0 0 0);
}


#content .main_cont h2.main_cont_ttl .cont_ttl_hoshi {
	position: absolute;
	top: 223px;
	left: -6px;
}

#content .main_cont h2.main_cont_ttl .cont_ttl_or {
	position: absolute;
	top: 343px;
	left: 250px;
}

#content .main_cont h2.main_cont_ttl .cont_ttl_not {
	position: absolute;
	top: 240px;
	right: -17px;
}

#content .main_cont h2.main_cont_ttl .cont_ttl_hatena {
	position: absolute;
	top: 359px;
	right: -8px;
}

#content .main_cont h2.main_cont_ttl .cont_ttl_line {
	position: absolute;
	top: 378px;
	left: 33px;
}

#content .main_cont .main_cont_txt {
	margin: 370px 16.188px 0 6px;
}

#content .main_cont_btn {
	background: #222222;
	display: block;
	padding: 60px 21px 61.188px;
	margin: 18px 0 66px;
}

#content .main_cont_btn a {
	position: relative;
	display: block;
	opacity: 1;
}

#content .main_cont_btn a img {
	filter: drop-shadow(5px 5px 0 #222222);
	transition: all 0.3s;
}

#content .main_cont_btn a:hover {
	animation: none;
}

#content .main_cont_btn a img:hover,
#content .main_cont_btn a img:active {
	box-shadow: none;
	transform: translate3D(5px, 5px, 0);
}

@media screen and (max-width:640px) and (min-width: 1px) {
	#content .main_cont {
		margin: 6vw 3vw 14vw;
	}

	#content .main_cont .main_cont_txt {
		margin: 61% 2.7% 0 1%;
	}

	#content .main_cont_btn {
		padding: 10% 3.5% 10.2%;
		margin: 2.8vw 0;
	}


	#content .main_cont h2.main_cont_ttl .cont_ttl_sub {
		margin: 11px 18px 0 12px;
	}

	#content .main_cont h2.main_cont_ttl .cont_ttl_hoshi {
		width: 45.9375vw;
		top: 34.84375vw;
		left: -0.9375vw;
	}

	#content .main_cont h2.main_cont_ttl .cont_ttl_or {
		width: 13.90625vw;
		top: 53.594vw;
		left: 39.063vw;
	}

	#content .main_cont h2.main_cont_ttl .cont_ttl_not {
		width: 51.24999999999999vw;
		top: 37.5vw;
		right: -2.656vw;
	}

	#content .main_cont h2.main_cont_ttl .cont_ttl_hatena {
		width: 9.53125vw;
		top: 56.094vw;
		right: -1.25vw;
	}

	#content .main_cont h2.main_cont_ttl .cont_ttl_line {
		width: 83.59375vw;
		top: 59.062vw;
		left: 5.156vw;
	}
}


/*-----------------------------------------------
 question
-----------------------------------------------*/
#question .main_cont {
	background: url("../img/question_bg.png") no-repeat top center/cover;
}

#question .main_cont img {
	width: 100%;
}

#question .question_bubble {
	background: url("../img/question_txt_bg.png") no-repeat top center / contain;
	width: 555px;
	height: 319px;
	margin: 32px auto 17px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 30px 30px;
	box-sizing: border-box;
	position: relative;
}

#question .question_bubble .main_cont_num {
	position: absolute;
	top: -8px;
	left: -6px;
	margin: 0;
	aspect-ratio: 57/37;
}

#question .main_cont_img {
	margin: 0 26px 24px;
}

#question .main_cont_btn {
	background: #c0e7e2;
	padding: 43px 16px 44px;
	gap: 25px;
	display: flex;
	flex-direction: column;
}



@media screen and (max-width:640px) and (min-width: 1px) {
	#question .question_bubble {
		width: 86.719vw;
		height: 49.844vw;
		margin: 5vw auto 2.65625vw;
		padding: 0 4.688vw 4.6875vw;
	}

	#question .question_bubble .main_cont_num {
		top: -1.406vw;
		left: -0.937vw;
		margin: 0;
		width: 17.8125vw;
	}

	#question .main_cont_img {
		margin: 0 4.0625vw 3.75vw;
	}

	#question .main_cont_btn {
		padding: 6.719vw 2.5vw 6.875vw;
		gap: 3.906vw;
	}
}

/*-----------------------------------------------
 correct
-----------------------------------------------*/
#correct .main_cont {
	background: url("../img/correct_bg.png") no-repeat top center/cover, #fedde9;
	padding-bottom: 30px;
}

#correct .main_cont img {
	width: 100%;
}

#correct .correct_bubble .main_cont_num {
	position: absolute;
	top: -8px;
	left: -6px;
	margin: 0;
	aspect-ratio: 57/37;
}

#correct .main_cont_img {
	margin: 25px 26px 24px;
}

#correct .main_cont_btn {
	background: #ffffff;
	padding: 31px 33px 28px;
	gap: 25px;
	display: flex;
	flex-direction: column;
}

@media screen and (max-width:640px) and (min-width: 1px) {
	#correct .main_cont {
		padding-bottom: 4.6875vw;
	}

	#correct .correct_bubble {
		width: 86.719vw;
		height: 49.844vw;
		margin: 5vw auto 2.65625vw;
		padding: 0 4.688vw 4.6875vw;
	}

	#correct .correct_bubble .main_cont_num {
		top: -1.406vw;
		left: -0.937vw;
		margin: 0;
		width: 17.8125vw;
	}

	#correct .main_cont_img {
		margin: 3.90625vw 4.0625vw 3.75vw;
	}

	#correct .main_cont_btn {
		padding: 4.844vw 5.156vw 4.375vw;
		gap: 3.906vw;
	}
}

/*-----------------------------------------------
 wrong
-----------------------------------------------*/
#wrong .main_cont {
	background: #c0e7e2;
}

#wrong .main_cont img {
	width: 100%;
}

#wrong .main_cont_txt {
	margin: 38px 80px;
	position: relative;
}

#wrong .main_cont_img {
	margin: -72px 26px 24px;
}

#wrong .main_cont_btn {
	background: #ffffff;
	padding: 31px 33px 28px;
	gap: 25px;
	display: flex;
	flex-direction: column;
}

@media screen and (max-width:640px) and (min-width: 1px) {

	#wrong .main_cont_img {
		margin: -11.25vw 4.0625vw 3.75vw;
	}

	#wrong .main_cont_txt {
		margin: 5.938vw 12.5vw;
	}

	#wrong .main_cont_btn {
		padding: 4.844vw 5.156vw 4.375vw;
		gap: 3.906vw;
	}
}

/*-----------------------------------------------
 call
-----------------------------------------------*/
#call {
	min-height: 100vh;
}

#call .main_cont {
	margin: 0;
	padding: 80px 70px 60px;
}

#call .main_cont .main_cont img {
	width: 100%;
}

#call .main_cont_time {
	color: #fff;
	margin: 410px auto 0;
	display: block;
	text-align: center;
	font-size: 23px;
}

.main_cont_btn {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.main_cont_btn .btn {
	flex: 0 0 auto;
}


.call-correct #call .main_cont_time {
	margin: 610px auto 0;
}

.call-wrong #call .main_cont_time {
	margin: 410px auto 0;
}

.call-correct #call .main_cont .main_cont_btn {
	margin: 214.4px auto 0;
	text-align: center;
}

.call-wrong #call .main_cont .main_cont_btn {
	margin: 369.6px auto 0;
	text-align: center;
}

#call .main_cont .main_cont_btn img {
	filter: none;
}

#call .main_cont .main_cont_btn img:hover {
	transform: none;
}

#call .note2 {
	color: #fff;
	margin: 40px 0 0;
}

@media screen and (max-width:640px) and (min-width: 1px) {


	#call .main_cont {
		padding: 12.5vw 10.938vw 9.375vw;
	}

	#call .main_cont_time {
		font-size: 3.594vw;
	}

	.call-correct #call .main_cont_time {
		margin: 95.313vw auto 0;
	}

	.call-wrong #call .main_cont_time {
		margin: 64.063vw auto 0;
	}

	#call .main_cont .main_cont_btn {
		gap: 1vw;

	}

	.call-correct #call .main_cont .main_cont_btn {
		margin: 33.5vw auto 0;
	}

	.call-wrong #call .main_cont .main_cont_btn {
		margin: 57.75vw auto 0;
	}

	#call .main_cont .main_cont_btn .btn {
		width: 23.75vw;
	}

	#call .main_cont .main_cont_btn .btn img {
		width: 100%;
	}

	#call .note2 {
		margin: 6.25vw 0 0;
		font-size: 2.5vw;
	}

}