@charset "UTF-8";

/* =======================================
		「なぞときクイズの森」　ページ （.page_mystery-forest）
======================================= */
.page_mystery-forest{
	background-size: 1920px auto;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #76B159;
}
@media screen and (min-width: 1921px) {
	.page_mystery-forest{
		background-size: 100% auto;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.page_mystery-forest{
		background-size: 100% auto;
		width: 100%;
	}
}

/* deco */
.page_mystery-forest .deco_quiz-list_left{
	top: 820px;
	left: calc(50% - 810px);
}
.page_mystery-forest .deco_quiz-list_right{
	top: 390px;
	right: calc(50% - 810px);
}
@media screen and (max-width: 767px) {
	.page_mystery-forest .deco_quiz-list_left,
	.page_mystery-forest .deco_quiz-list_right{
		display: none;
	}
}


/* ------ .subpage_link_box -------*/
.page_mystery-forest .link_list_box{
	border-top: 2px solid #F3C600;
	border-bottom: 2px solid #F3C600;
}
@media screen and (max-width: 767px) {
	.page_mystery-forest .link_list_box li{
		margin: 0 2%;
		width: 21%;
	}
	.page_mystery-forest .subpage_link_box .ttl_quiz-list_sub{
		top: 18.667vw;
		/* top: 70px; */
	}
}


/* ------ .way-of-playing_box -------*/
@media screen and (max-width: 767px) {
	.page_mystery-forest .way-of-playing_box .ttl_sub img{
		width: 42.667vw;
	}
}
.page_mystery-forest .way-of-playing_box .col2{
	border-top: 2px solid #F3C600;
	border-bottom: 2px solid #F3C600;
}
.page_mystery-forest .way-of-playing_box .col2 li:first-child{
	border-right: 2px solid #F3C600;
}
.page_mystery-forest .way-of-playing_box p{
	color: #fff;
}
@media screen and (max-width: 767px) {
	.page_mystery-forest .way-of-playing_box .col2 li:first-child{
		border-right: none;
		border-bottom: 2px solid #F3C600;
	}
}


/* ------ .link_box -------*/
@media screen and (max-width: 767px) {
	.page_mystery-forest .link_box .ttl_sub img{
		width: 42.667vw;
	}
}


/* =======================================
		「なぞときクイズの森」　トップページ（#page_mystery-forest_top）
======================================= */
#page_mystery-forest_top{
	background-image: url("../img/mainvisual_pc.png");
}
@media screen and (max-width: 767px) {
	#page_mystery-forest_top{
		background-image: url("../img/mainvisual_sp.png");
	}
}


/* =======================================
	「なぞなぞクイズ」　ページ （#page_riddles）
======================================= */
#page_riddles{
	background-image: url("../img/mainvisual_riddles_pc.png");
}
@media screen and (max-width: 767px) {
	#page_riddles{
		background-image: url("../img/mainvisual_riddles_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_riddles .mainvisual_box{
		padding-bottom: 20px;
	}
}


/* =======================================
	「ジェスチャークイズ」　ページ （#page_gesture）
======================================= */
#page_gesture{
	background-image: url("../img/mainvisual_gesture_pc.png");
}
@media screen and (max-width: 767px) {
	#page_gesture{
		background-image: url("../img/mainvisual_gesture_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_gesture .mainvisual_box{
		padding-bottom: 30px;
	}
}
#page_gesture .text_quiz-list{
	display: block;
	margin: 45px auto 55px;
}
#page_gesture .text_gesture_b{
	margin: 0 30px;
}
@media screen and (max-width: 767px) {
	#page_gesture .text_quiz-list{
		margin: 8.533vw auto 10.667vw;
		/* margin: 32px auto 40px; */
	}
	#page_gesture .text_gesture_b{
		margin: 0 4vw;
		/* margin: 0 15px; */
		width: 5.333vw;
		/* width: 20px; */
	}
}
#page_gesture .shuffle_box{
	margin-bottom: 0;
}
.card_gesture{
	border-radius: 20px;
	padding-bottom: 10px;
	background: #5b904f;
}


/* =======================================
	「イントロクイズ」　ページ （#page_intro）
======================================= */
#page_intro{
	background-image: url("../img/mainvisual_intro_pc.png");
}
@media screen and (max-width: 767px) {
	#page_intro{
		background-image: url("../img/mainvisual_intro_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_intro .mainvisual_box{
		padding-bottom: 30px;
	}
}
#page_intro .quiz-list_box .container{
	padding-bottom: 45px;
}
#page_intro .text_quiz-list{
	margin-bottom: 40px;
}
#page_intro  .quiz-list_box .text_bottom{
	font-size: 1.5rem;
	text-align: right;
}
@media screen and (max-width: 767px) {
	#page_intro .quiz-list_box .container{
		padding-bottom: 10.667vw;
		/* padding-bottom: 40px; */
	}
	#page_intro .text_quiz-list{
		margin-bottom: 8vw;
		/* margin-bottom: 30px; */
	}
	#page_intro  .quiz-list_box .text_bottom{
		font-size: min(3.467vw, 15px);
	}
}


/* =======================================
	「お絵描きクイズ」　ページ （#page_drawing）
======================================= */
#page_drawing{
	background-image: url("../img/mainvisual_drawing_pc.png");
}
@media screen and (max-width: 767px) {
	#page_drawing{
		background-image: url("../img/mainvisual_drawing_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_drawing .mainvisual_box{
		padding-bottom: 30px;
	}
}
#page_drawing .text_quiz-list{
	display: block;
	margin: 45px auto 55px;
}
@media screen and (max-width: 767px) {
	#page_drawing .text_quiz-list{
		margin: 8.533vw auto 10.667vw;
		/* margin: 32px auto 40px; */
	}
	#page_drawing .text_drawing_b{
		width: 61.333vw;
		/* width: 230px; */
	}
}
.card_drawing{
	border-radius: 20px;
	padding-bottom: 10px;
	background: #5b904f;
}

/* modal */
#page_drawing .accordion_content{
	border: 4px solid #fff;
	border-radius: 20px;
	box-sizing: border-box;
	max-width: 570px;
	margin: 0 auto 30px;
	padding: 50px;
	position: relative;
}
#page_drawing .accordion_content .img_card{
	margin: 0 auto;
	height: auto;
	width: 228px;
}
#page_drawing .deco_click{
	top: -10px;
	left: -20px;
}
@media screen and (max-width: 767px) {
	#page_drawing .accordion_content{
		border-width: 3px;
		padding: 30px;
		padding: 7.979vw;
		width: 90%;
	}
	#page_drawing .accordion_content .img_card{
		width: 70%;
	}
	#page_drawing .deco_click{
		top: -2.667vw;
		/* top: -10px; */
		left: -2.667vw;
		/* left: -10px; */
		width: 17.333vw;
	}
}


/* =======================================
	「音あてクイズ」　ページ （#page_sound）
======================================= */
#page_sound{
	background-image: url("../img/mainvisual_sound_pc.png");
}
@media screen and (max-width: 767px) {
	#page_sound{
		background-image: url("../img/mainvisual_sound_sp.png");
	}
}
#page_sound .quiz-list_box .container{
	padding-bottom: 45px;
}
#page_sound .text_quiz-list{
	margin-top: 0;
	margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
	#page_sound .quiz-list_box .container{
		padding-bottom: 10.667vw;
		/* padding-bottom: 40px; */
	}
	#page_sound .text_quiz-list{
		margin-bottom: 8vw;
		/* margin-bottom: 30px; */
		width: 82.667vw;
	}
}

/* .modal_box */
#page_sound .modal_box .img{
	margin: 0 auto;
	display: block;
}
#page_sound .modal_box p.text{
	line-height: 1.8;
}

#page_sound  .quiz-list_box .text_bottom{
	font-size: 1.5rem;
	text-align: right;
}
@media screen and (max-width: 767px) {
	#page_sound .quiz-list_box .text_bottom{
		font-size: min(3.467vw, 15px);
	}
}



/* =======================================
	「私はだれでしょう」　ページ （#page_who）
======================================= */
#page_who{
	background-image: url("../img/mainvisual_who_pc.png");
}
@media screen and (max-width: 767px) {
	#page_who{
		background-image: url("../img/mainvisual_who_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_who .mainvisual_box{
		padding-bottom: 20px;
	}
}
#page_who .text_quiz-list{
	margin-top: 0;
}

/* .modal_box */
#page_who .modal_box .img{
	margin: 0 auto;
	display: block;
}
#page_who .modal_box p{
	letter-spacing: -0.02em;
}
#page_who .modal_box p.text{
	line-height: 1.8;
}
#page_who .modal_box .question_modal{
	padding: 6px;
}
@media screen and (max-width: 767px) {
	#page_who .modal_box .question_modal{
		padding: 3.2vw 5.867vw;
	}
	#page_who .modal_box p.text_answer{
		text-align: center;
	}
}

/* =======================================
	「間違いさがし」　ページ （#page_spot-the-difference）
======================================= */
#page_spot-the-difference{
	background-image: url("../img/mainvisual_spot-the-difference_pc.png");
}
@media screen and (max-width: 767px) {
	#page_spot-the-difference{
		background-image: url("../img/mainvisual_spot-the-difference_sp.png");
	}
}
@media screen and (min-width: 768px) {
	#page_spot-the-difference .mainvisual_box{
		padding-bottom: 20px;
	}
}
#page_spot-the-difference .text_quiz-list{
	margin-top: 0;
	margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
	#page_spot-the-difference .maintitle{
		margin-bottom: 8vw;
		/* margin-bottom: 30px; */
	}
	#page_spot-the-difference .text_quiz-list{
		margin-bottom: 5.333vw;
	}
}