@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: "fontn";
	src: url("../../img/font_n.woff") format('woff');
}
@font-face {
	font-family: "fontb";
	src: url("../../img/font_b.woff") format('woff');
}
#stage #content {
	width: 100%;
	background: #b8ce69 url(../../kids/quiz/img/bg_stage01.png) 50% 30px;
	overflow: hidden;
}
#stage #content .headbg {
	position: absolute;
	width: 100%;
	height: 350px;
	background: #b8ce69 url(../../kids/img/bg_pc.jpg) no-repeat 50% top;
	overflow: hidden;
}
#content .inner {
	position: relative;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}


@keyframes tlatt {
	0%, 40%, 100% {
		transform: scale(1)
	}
	10%,
	12% {
		transform: scale(1.2)
	}
	24% {
		transform: scale(0.9)
	}
}
/*============================
#ctsHead
============================*/
#ctsHead {}
#ctsHead h1 {
	width: 100%;
	overflow: hidden;
	height: 329px;
	position: absolute;
	background: url(../../kids/quiz/img/bg_mv.png) center top;
	z-index: 1;
	background-position-x: calc(50% - 47px);
}
#ctsHead h1 img {
	left: 50%;
	position: relative;
	transform: translateX(-50%);
	margin: 10px 0 0 -14px;
}
#ctsHead .inner {
	padding-top: 329px;
}
#ctsHead .ctsMenu {
	margin: 36px 0 65px;
}
#ctsHead .ctsMenu li {
	position: relative;
	width: 318px;
	background: url(../../kids/quiz/img/bg_menu.png) no-repeat center;
	background-size: contain;
	display: inline-block;
	margin-right: 23px;
	transition:.23s;
}
#ctsHead .ctsMenu li:last-child {
	margin-right: 0;
}
#ctsHead .ctsMenu li:after {
	content: "";
	width: 0.8em;
	height: 0.8em;
	border: #fff 2px solid;
	border-left: 0;
	border-top: 0;
	position: absolute;
	right: 0;
	top: 0;
	margin: 6% 7.8% 0 0;
	transform: rotate(45deg);
	transition:.1s;
}
#ctsHead .ctsMenu li:hover:after {
	margin-top: 6.5%;
}
#ctsHead .ctsMenu a {
	color: #fff;
	font-size: 1.8em;
	padding: 17px 0 11px;
	display: block;
	line-height: 1;
	letter-spacing: 0.02em;
	font-family: dnp-shuei-mgothic-std, sans-serif;

font-weight: 600;

font-style: normal;
	text-decoration: none !important;
}
#ctsHead .ctsMenu li:hover{
	filter:brightness(1.3)
}
#ctsHead .star {
	width: 83px;
	vertical-align: middle;
	margin: 0 0 5px 18px;
}
#ctsHead h2 {
	position: relative;
	z-index: 1;
	width: 237px;
	position: absolute;
	margin: 1.05% 1% 0 0;
	filter: drop-shadow(0em 0.2em 0.2em rgba(0, 0, 0, 0.5));
	position: absolute;
	right: -17px;
	top: 7px;
}
#ctsHead h2 a {
	display: block;
}
#ctsHead h2 img {
	position: absolute;
	left: 0;
	animation: tlatt 5s cubic-bezier(0.4, 0, 0.5, 1) infinite;
}
#ctsHead h2 .en {
	width: 52%;
	margin: 0 0 0 22.8%;
	animation: none;
}
#ctsHead h2 .c1 {
	width: 16.62%;
	margin: 8.6% 0 0 -1.2%;
	z-index: 6;
}
#ctsHead h2 .c2 {
	width: 19.08%;
	margin: 8.4% 0 0 11%;
	z-index: 5;
	animation-delay: .2s;
}
#ctsHead h2 .c3 {
	width: 16.925%;
	margin: 7.9% 0 0 26.5%;
	z-index: 4;
	animation-delay: .4s;
}
#ctsHead h2 .c4 {
	width: 19.08%;
	margin: 6.58% 0 0 40.2%;
	z-index: 3;
	animation-delay: .6s;
}
#ctsHead h2 .c5 {
	width: 15.693%;
	margin: 8.4% 0 0 55.7%;
	z-index: 2;
	animation-delay: .8s;
}
#ctsHead h2 .c6 {
	width: 14.77%;
	margin: 10.8% 0 0 68.2%;
	z-index: 1;
	animation-delay: 1s;
}
#ctsHead h2 .c7 {
	width: 18.465%;
	margin: 6.6% 0 0 79.8%;
	z-index: 0;
	animation-delay: 1.2s;
}
#ctsHead h2 .c7 {
	width: 18.465%;
	margin: 6.6% 0 0 79.8%;
	z-index: 0;
	animation-delay: 1.2s;
}
/*============================
.quiz
============================*/

#content .quiz h2 {
	position: relative;
	width: 100%;
	background: url(../../kids/quiz/img/bg_h2.png) no-repeat center top;
	background-size: contain;
	margin-bottom: 96px;
	color: #fff;
	font-size: 2.2em;
	padding: 15px 0 9px;
	display: block;
	line-height: 1;
	letter-spacing: 0.02em;
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-weight: 600;
	font-style: normal;
}
#content .quiz h2 .star {
	width: 110px;
	vertical-align: middle;
	margin: -2px -10px 7px 24px;
}
#content .quiz .cts {
	position: relative;
	background: url(../../kids/quiz/img/border_side.png) repeat-y center top;
	background-size: contain;
	margin-top: 98px;
	margin-bottom: 134px;
}
#content .quiz .cts.q03,
#content .quiz .cts.q05,
#content .quiz .cts.q09 {
	margin-bottom: 0px;
}
#content .quiz .cts:before {
	content: "";
	background: url(../../kids/quiz/img/border_top.png) no-repeat center top;
	background-size: contain;
	width: 100%;
	height: 33px;
	display: block;
	top: -32px;
	position: relative;
}
#content .quiz .cts:after {
	content: "";
	background: url(../../kids/quiz/img/border_bottom.png) no-repeat center top;
	background-size: contain;
	width: 100%;
	height: 33px;
	bottom: -33px;
	display: block;
	position: absolute;
}
#content .quiz h3 {
	width: 384px;
	margin: -95px auto -6.7px;
	position: relative;
}
#content .quiz h3 img {
	width: 100%;
}
#content .quiz h4 {
	font-size: 2.1em;
	font-family: dnp-shuei-mgothic-std, sans-serif;
	color: #000;
	margin-bottom: 21px;
}
#content .quiz .q06 h4 {
	margin-bottom: 17px;
}
#content .quiz .cts div {
	width: 42.4%;
	display: inline-block;
	vertical-align: top;
	margin: 0 16px;
	position: relative;
}
#content .quiz .cts div img {
	width: 100%
}
#content .quiz h4 span {
	color: #003591;
}
#content .quiz h4 em {
	font-style: normal;
	font-size: 1.5em;
}
#content .quiz .aimg {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
#content .quiz .open .aimg {
	display: block;
}
#content .quiz .new {
    position: absolute;
    top:0;
    left:0;
    margin: -30px 0 0 2px;
}

#content .quiz .cts.q02 .aimg {
	width: 104.2%;
	margin: -4.5% 0 0 -4.2%;
}
#content .quiz .cts.q06 .aimg {
	width: 103.54%;
	margin: 0.1% 0 0 0%;
}
#content .quiz .cts.q14 .aimg {
	width: 101.89%;
	margin: -0.1% 0 0 0%;
}
#content .quiz .cts.q15 .aimg {
	width: 102.36%;
	margin: 0.1% 0 0 -2.2%;
}
#content .quiz .cts.q16 .aimg {
	width: 95.05%;
	margin: -1.9% 0 0 -5.1%;
}
#content .quiz .cts.q17 .aimg {
	width: 104.72%;
	margin: 0.1% 0 0 -4.7%;
}
#content .quiz .kotae {
	margin: 38px auto -8px;
	width: 230px;
	padding-bottom: 24px;
	display: block;
	cursor: pointer;
	/* transition:opacity.2s; */
}
#content .quiz .kotae:hover{
	opacity:0.8;
}
#content .quiz .open .kotae {
	visibility: hidden;
}
#content .quiz div.answer {
	position: relative;
	background: url(../../kids/quiz/img/border_side_a.png) repeat-y center top;
	background-size: 100%;
	margin-top: -35px;
	margin-bottom: 64px;
	width: 883px;
	text-align: left;
	display: none;
}
#content .quiz .open div.answer {
	display: inline-block;
}
#content .quiz div.answer:before {
	content: "";
	background: url(../../kids/quiz/img/border_top_a.png) no-repeat center top;
	background-size: 100% 100%;
	width: 100%;
	height: 21px;
	display: block;
	top: -21px;
	position: relative;
}
#content .quiz div.answer:after {
	content: "";
	background: url(../../kids/quiz/img/border_bottom_a.png) no-repeat center bottom;
	background-size: 100% 100%;
	width: 100%;
	height: 21px;
	bottom: -21px;
	display: block;
	position: relative;
}
#content .quiz .answer p {
	color: #e40a1c;
	width: 92.6%;
	margin: -19px 0 -18px 5%;
	font-family: dnp-shuei-mgothic-std, sans-serif;
	line-height: 1.9;
	font-size: 1.43em;
	letter-spacing: 0.035em;
}
#content .quiz div img.return {
	position: absolute;
	width: 230px;
	z-index: 1;
	margin: 21px 0 0 -100px;
	left: 50%;
	cursor: pointer;
}
#content .quiz .illust {
	position: absolute;
	top: 0;
	left: 0;
}
#content .q01 .illust {
	margin: -204px 0 0 -167px;
}
#content .q02 .illust {
	margin: -156px 0 0 1092px;
}
#content .q03 .illust {
	margin: -120px 0 0 -168px;
}
#content .q04 .illust {
	margin: -155px 0 0 -174px;
}
#content .q05 .illust {
	margin: -149px 0 0 1057px;
}
#content .q06 .illust {
	margin: -153px 0 0 1093px;
}
#content .q07 .illust {
	margin: -219px 0 0 -161px;
}
#content .q08 .illust {
	margin: -141px 0 0 1056px;
}
#content .q09 .illust {
	margin: -187px 0 0 -177px;
}
#content .q09 .illust.i2 {
	margin: 491px 0 0 1057px;
}
#content .q10 .illust {
	margin: -219px 0 0 -161px;
}
#content .q11 .illust {
	margin: -155px 0 0 1093px;
}
#content .q12 .illust {
	margin: -154px 0 0 -167px;
}
#content .q13 .illust {
	margin: -156px 0 0 1057px;
}
#content .q14 .illust {
	margin: -176px 0 0 1057px;
}
#content .q15 .illust {
	margin: -194px 0 0 -167px;
}
#content .q16 .illust {
	margin: -157px 0 0 1057px;
}
#content .q17 .illust {
	margin: -204px 0 0 -160px;
}

#content .quiz .q02 h3 {
	width: 294px;
}
#content .quiz .q03 h3 {
	width: 413px;
}
#content .quiz .q04 h3 {
	width: 257px;
}
#content .quiz .q05 h3 {
	width: 323px;
}
#content .quiz .q06 h3 {
	width: 636px;
	margin: -99px auto 0px;
}
#content .quiz .q07 h3 {
	width: 412px;
}
#content .quiz .q08 h3 {
	width: 366px;
}
#content .quiz .q09 h3 {
	width: 279px;
}
#content .quiz .q10 h3 {
	width: 365px;
}
#content .quiz .q11 h3 {
	width: 345px;
}
#content .quiz .q12 h3 {
	width: 345px;
}
#content .quiz .q13 h3 {
	width: 279px;
}
#content .quiz .q14 h3 {
	width: 433px;
}
#content .quiz .q15 h3 {
	width: 277px;
}
#content .quiz .q16 h3 {
	width: 300px;
}
#content .quiz .q17 h3 {
	width: 279px;
}
#content .quiz .cts small {
	font-size: 1.2em;
	font-family: dnp-shuei-mgothic-std, sans-serif;
	font-weight: 600;
	font-style: normal;
	color: #003591;
	letter-spacing: -0.08em;
	margin-top: 10px;
	margin-bottom: -11px;
	display: block;
}
#content .quiz#level1 {
	padding-bottom: 93px;
}
#content .quiz#level2 {
	background: #b8ce69 url(../../kids/quiz/img/bg_stage02.png) 50% 81px;
	padding-top: 38px;
	margin-top: -9px;
	padding-bottom: 110px;
}
#content .quiz#level2:before {
	content: "";
	background: url(../../kids/quiz/img/top_stage02.png) repeat-x center top;
	background-size: contain;
	width: 100%;
	height: 21px;
	display: block;
	top: -59px;
	position: relative;
}
#content .quiz#level3 {
	background: #b8ce69 url(../../kids/quiz/img/bg_stage03.png) 50% 81px;
	padding-top: 49px;
	margin-top: -25px;
}
#content .quiz#level3:before {
	content: "";
	background: url(../../kids/quiz/img/top_stage03.png) repeat-x center top;
	background-size: contain;
	width: 100%;
	height: 21px;
	display: block;
	top: -70px;
	position: relative;
}
#content a.return {
	position: relative;
	display: inline-block;
	background: #00a03c;
	color: #fff;
	font-family: fontn;
	border: #fff 3px solid;
	border-radius: 1.4em;
	padding: 0.42em 1.2em;
	font-size: 1.15em;
	letter-spacing: .02em;
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, .4);
	transition: .2s;
	margin: 10.7% 0 7.9%;
	width: 11.3em;
	white-space: nowrap;
}
#content a.return.totop {
	background: #fff;
	color: #00a03c;
	border: #00a03c 3px solid;
}
#content a.return:after{
	content:"";
	border: #fff .15em solid;
	border-left:0;
	border-bottom:0;
	width: 0.5em;
	height: 0.5em;
	position:relative;
	display:inline-block;
	transform:rotate(45deg);
	margin: 0 -1.4% 0 4%;
}
#content a.return.totop:after{
	border: #00a03c .15em solid;
	border-left:0;
	border-bottom:0;
	transform: rotate(-45deg);
	margin: 0 -3.5% -0.7% 6.6%;
}
#content #level1 a.return,
#content #level2 a.return{
    margin: 10.8% 0 0;
}
#content a.return:hover {
	text-decoration: none;
	background: #21ba5a;
}
#content a.return.totop:hover {
	text-decoration: none;
	background: #e1ffec;
}
#content .cover {
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	background: #fff;
	z-index: 6;
}
#content .cover.c2 {
	mix-blend-mode: overlay;
	pointer-events: none;
}
@media all and (-ms-high-contrast:none){
	#content .quiz h4{
		margin-top:13px;
		margin-bottom:9px;
	}
	#content a.return {
		padding: 0.61em 1.2em 0.01em;
	}
}

@media (min-width: 737px) {
  .forsp{
    display:none !important;
  }
}

@media (max-width: 736px) {
	.forpc{
	  display:none !important;
	}
	html,body{
		overflow-x:hidden;
	}
	#content .inner {
		width: 100%;
	}
	#content .mvlogo {
		right: 0.9%;
		top: 0.6em;
		width: 32.5%;
	}
	#stage #content {
		width: 100%;
		font-size: 1.9022vw;
		background-size: 43%;
	}
	#stage #content .headbg {
		width: 100%;
		height: 52em;
		background: #b8ce69 url(../../kids/img/bg_sp.jpg) no-repeat 50% top;
		background-size: contain;
	}
	/*============================
	#ctsHead
	============================*/
    #ctsHead h1 {
		width: 100%;
		height: 114vw;
		background: url(../../kids/quiz/img/bg_mv_sp.png) center top;
	}
	#ctsHead h1 img {
		left: 0%;
		transform: translateX(0);
		margin: 0;
		width: 100%;
	}
	#ctsHead .inner {
		padding-top: 114vw;
	}
	#ctsHead .ctsMenu {
		margin: 8.9% 0 11.3%;
	}
	#ctsHead .ctsMenu li {
		width: 29.9%;
		background: url(../../kids/quiz/img/bg_menu_sp.png) no-repeat center;
		background-size: contain;
		margin-right: 2.4%;
	}
	#ctsHead .ctsMenu li:after {
		width: 1em;
		height: 1em;
		border: #fff 0.2em solid;
		border-left: 0;
		border-top: 0;
		margin: 0 45% 8% 0;
		transform: rotate(45deg);
		bottom: 0;
		top: auto;
	}
	#ctsHead .ctsMenu a {
		font-size: 1.8em;
		padding: 1.4em 0;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	#ctsHead .star {
		width: 39.4%;
		margin: 0 -5% 1.5% 3%;
	}
	#ctsHead h2 {
		width: 237px;
		margin: 1.05% 1% 0 0;
		right: -17px;
		top: 7px;
	}
	/*============================
	.quiz
	============================*/
    #content .quiz .illust{
    	display:none;
    }
	#content .quiz h2 {
		width: 94.4%;
		background: url(../../kids/quiz/img/bg_h2_sp.png) no-repeat center top;
		background-size: contain;
		margin-bottom: 96px;
		font-size: 2.4em;
		padding: 2% 0;
		margin: 0 auto;
		line-height: 1;
		letter-spacing: 0.02em;
	}
	#content .quiz h2 .star {
		width: 17%;
		margin: 0 0 1% 2.2%;
	}
	#content .quiz .cts {
		background: url(../../kids/quiz/img/border_side_sp.png) repeat-y center top;
		background-size: contain;
		margin-top: 15.6%;
		margin-bottom: 19.1%;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	#content .quiz .cts:before {
		background: url(../../kids/quiz/img/border_top_sp.png) no-repeat center top;
		background-size: 100% 100%;
		height: 1.9em;
		top: -1.7em;
	}
	#content .quiz .cts:after {
		background: url(../../kids/quiz/img/border_bottom_sp.png) no-repeat center top;
		background-size: 100% 100%;
		height: 1.9em;
		bottom: -1.75em;
	}
	#content .quiz h3 {
		width: 58.7%;
		margin: -12.4% auto 1.7%;
	}
	#content .quiz h4 {
		font-size: 2.1em;
		margin-bottom: 2.7%;
	}
	#content .quiz .q06 h4 {
		margin-bottom: 2.8%;
	}
	#content .quiz .cts div {
		width: 75.1%;
		margin: 0 0 3.4%;
	}
	#content .quiz h4 em {
		font-size: 1.5em;
	}
	#content .quiz .kotae {
		margin: 3% auto 5%;
		width: 43.5%;
		padding-bottom: 7.9%;
	}
	#content .quiz div.answer {
		background: url(../../kids/quiz/img/border_side_a_sp.png) repeat-y center top;
		background-size: 100% auto;
		margin-top: -16.7%;
		margin-bottom: 15.3%;
		width: 75%;
	}
	#content .quiz div.answer:before {
		background: url(../../kids/quiz/img/border_top_a_sp.png) no-repeat center top;
		background-size: 100% 100%;
		height: 2.2em;
		top: -2.1em;
		width: 100%;
	}
	#content .quiz div.answer:after {
		background: url(../../kids/quiz/img/border_bottom_a_sp.png) no-repeat center bottom;
		background-size: 100% 100%;
		height: 2.2em;
		bottom: -2.1em;
	}
	#content .quiz .answer p {
		width: 88.6%;
		margin: -7% 0 -7% 7%;
		line-height: 1.8;
		font-size: 1.63em;
		letter-spacing: 0.035em;
		min-height: 1.88em;
		padding-bottom: 2%;
	}
	#content .quiz div img.return {
		width: 57%;
		margin: 6.7% 0 0 -28.8%;
	}
	#content .quiz .new {
		width: 18.8%;
		margin: -1.5em 0 0 0.15em;
	}
	#content .quiz .q02 h3 {
		width: 45%;
	}
	#content .quiz .q03 h3 {
		width: 62.8%;
	}
	#content .quiz .q04 h3 {
		width: 39.4%;
	}
	#content .quiz .q05 h3 {
		width: 49.2%;
	}
	#content .quiz .q06 h3 {
		width: 97%;
		margin: -12.9% auto 2%;
	}
	#content .quiz .q07 h3 {
		width: 62.8%;
	}
	#content .quiz .q08 h3 {
		width: 55.7%;
	}
	#content .quiz .q09 h3 {
		width: 42.4%;
	}
	#content .quiz .q10 h3 {
		width: 57.7%;
	}
	#content .quiz .q11 h3 {
		width: 54.4%;
	}
	#content .quiz .q12 h3 {
		width: 53.6%;
	}
	#content .quiz .q13 h3 {
		width: 42.4%;
	}
	#content .quiz .q14 h3 {
		width: 63%;
	}
	#content .quiz .q15 h3 {
		width: 42%;
	}
	#content .quiz .q16 h3 {
		width: 45%;
	}
	#content .quiz .q17 h3 {
		width: 42.4%;
	}
	#content .quiz .cts small {
		font-size: 1.6em;
		letter-spacing: -0.08em;
		margin-top: 1%;
		margin-bottom: -1.3%;
	}
	#content .quiz#level1 {
		padding-bottom: 18.7%;
	}
	#content .quiz#level2 {
		background-size: 43%;
		padding-top: 7%;
		margin-top: -5%;
		padding-bottom: 14.7%;
	}
	#content .quiz#level2:before {
		background: url(../../kids/quiz/img/top_stage02.png) repeat-x 38.9% 0;
		background-size: 29.9%;
		height: 1.6em;
		top: -5.1em;
	}
	#content .quiz#level3 {
		background-size: 43%;
		padding-top: 6.7%;
		margin-top: 0%;
		padding-bottom: 13%;
	}
	#content .quiz#level3:before {
		background: url(../../kids/quiz/img/top_stage03.png) repeat-x 38.9% 0;
		background-size: 29.9%;
		height: 1.6em;
		top: -4.9em;
	}
	#content a.return {
		border: #fff 0.2em solid;
		padding: 0.31em 2.4em;
		font-size: 2.25em;
		margin: 14.7% 0 1.7%;
	}

}